/* A quieter shell: color and the current task carry the visual weight. */
:root{--paper:#fcfcfb;--ink:#24252b;--muted:#676a73;--line:#e6e7eb;--blue:#5152ce;--lime:#e9edff;--radius:16px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--paper)}
body{background:var(--paper)}
h1,h2,h3{letter-spacing:-.045em;font-weight:600}.serif{letter-spacing:-.04em}p{line-height:1.6}
button,input,select,textarea{font-family:inherit}button:hover{filter:none}button,a,summary{ -webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid #6768dc;outline-offset:3px}button:disabled{cursor:not-allowed}.icon{flex-shrink:0;vertical-align:middle}
.wrap{max-width:1440px;padding-inline:40px}.site-header{height:76px;padding:0 40px;background:#fcfcfbf5;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}
.brand{font-size:1.3rem;letter-spacing:-.065em;gap:10px}.brand img{width:28px;height:28px}.site-header nav{gap:8px;font-size:.86rem}.site-header nav a{border-radius:9px;padding:10px 16px;min-height:40px;transition:background .18s,color .18s}.site-header nav a:hover{background:#f0f0f5}.site-header nav a[aria-current=page]{text-decoration:none;background:#efeff7;color:#4143a6}.site-header .nav-studio{border:0;background:#25262d;color:#fff;gap:10px;margin-left:10px}.site-header .nav-studio:hover{background:#41424b;color:white}
.button{border-radius:10px;min-height:44px;padding:12px 18px;gap:10px;font-size:.86rem;font-weight:550;transition:background .18s,box-shadow .18s,transform .18s}.button:hover{background:#41424b;box-shadow:0 3px 9px #24252b10}.button:active{transform:translateY(1px)}.button.secondary{background:white;color:var(--ink);border-color:#dadce3}.button.secondary:hover{background:#f5f5f9}.button.lime{background:#e8eaff;color:#34356c;border-color:#e8eaff}.text-link{border:0;padding:0;font-size:.85rem;gap:10px}.text-link:hover{text-decoration:underline}.eyebrow{font-size:.65rem;letter-spacing:.1em;color:var(--muted);font-weight:600}
.intro{padding-top:38px;padding-bottom:30px;align-items:center;gap:30px}.intro .eyebrow{margin-bottom:14px}.intro h1{font-size:clamp(2rem,3.15vw,3rem);line-height:1.13;margin-bottom:12px}.intro-description{font-size:.94rem;color:var(--muted);margin-bottom:0}.intro-aside{max-width:none;display:flex;align-items:center;flex-direction:column;gap:12px;padding:0}.brand-start{position:relative}.brand-start summary{list-style:none;font-size:.76rem;color:var(--muted);cursor:pointer;padding:4px}.brand-start summary::-webkit-details-marker{display:none}.brand-start[open] .home-builder{position:absolute;z-index:11;right:0;top:30px;background:white;border:1px solid var(--line);padding:20px;border-radius:14px;box-shadow:0 12px 40px #28293b15;width:320px}.home-builder label{font-size:.8rem}.home-builder input{min-width:0}.home-builder>div{border:1px solid #c3c5ce;border-radius:9px;overflow:hidden}.home-builder button{background:var(--ink);border:0}
.collection{padding-top:4px;scroll-margin-top:96px}.browse-title{font-size:2.25rem;margin:32px 0}.collection-tools{display:flex;align-items:center;gap:12px;margin-bottom:20px}.library-search{display:flex;flex:1;align-items:center;gap:11px;max-width:660px;border:1px solid #dddfe5;background:#fff;border-radius:12px;padding:0 15px;min-height:48px;color:var(--muted)}.library-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px #5152ce12}.library-search input{border:0;background:none;min-width:0;width:100%;font-size:.88rem;min-height:46px;color:var(--ink);outline:0;padding:10px 0}.library-search input::placeholder{color:#797c85}.filter-options{position:relative}.filter-options>summary,.saved-filter,.generator-options>summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 15px;border:1px solid #dddfe5;border-radius:11px;min-height:46px;background:#fff;font-size:.82rem;cursor:pointer}.filter-options>summary::-webkit-details-marker,.generator-options>summary::-webkit-details-marker{display:none}.filter-options[open]>summary{background:#efeff7;color:#4143a6}.saved-filter{margin-left:auto}.saved-filter[aria-pressed=true]{background:#efeff7;color:#4143a6;border-color:#c8c8e5}.saved-filter span{font-size:.74rem;color:inherit}
.discovery-controls{position:absolute;top:54px;right:0;z-index:12;width:300px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 40px #28293b18;display:grid;grid-template-columns:1fr;gap:16px;margin:0}.discovery-controls label{display:flex;flex-direction:column;gap:7px;font-size:.78rem}.discovery-controls select{width:100%;min-height:42px;border:1px solid #c8cbd5;border-radius:8px;padding:8px 10px;background:white;color:var(--ink);font-size:.84rem}.reset-filters{font-size:.77rem;min-height:34px;color:#505463}.filter-bar{border:0;padding:0;display:flex;gap:16px;align-items:center}.filters{gap:6px}.filters button{padding:9px 15px;font-size:.81rem;min-height:38px;color:#5c5e69;border:1px solid transparent;background:#f3f3f6}.filters button:hover{background:#eaeaf1;border-color:transparent}.filters button[aria-pressed=true]{color:#fff;background:var(--ink)}.collection-options{display:flex;gap:16px;align-items:center;margin-left:auto}.collection-options select{background:none;border:0;min-height:36px;font-size:.77rem;color:var(--muted);padding:6px 20px 6px 6px;max-width:130px}.view-options{border:0;background:#f0f0f4;border-radius:9px;padding:3px;gap:2px;display:flex}.view-options button{border:0;border-radius:7px;background:transparent;min-height:32px;padding:7px 11px;font-size:.75rem;color:#5b5e67}.view-options button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 4px #26284212}.collection .collection-meta{align-items:center;margin:20px 0 16px;font-size:.75rem;gap:12px;min-height:21px}.copy-hint{margin-left:auto;color:#6b6e78;font-size:.73rem}.active-filters{display:flex;gap:6px;flex-wrap:wrap}.active-filters button{font-size:.72rem;padding:3px 8px;min-height:28px;border:0;border-radius:6px;background:#ededf8;color:#44469d}
.palette-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.palette-card{padding:10px;background:#fff;border:1px solid #e8e9ed;border-radius:18px;transition:box-shadow .2s,transform .2s}.palette-card:hover{box-shadow:0 7px 24px #272b4310;transform:translateY(-2px)}.swatches{height:222px;min-height:0;display:flex;flex-direction:column;border:0;border-radius:10px;overflow:hidden}.swatch{width:100%;min-height:0;flex:1;transition:flex .22s ease;background:var(--swatch);color:var(--ink);touch-action:manipulation}.swatch:first-child{flex:1.5}.swatch:nth-child(2){flex:1.1}.swatch:hover,.swatch:focus-visible{width:100%;flex:1.7}.swatch span{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.76rem;left:16px;bottom:50%;transform:translateY(50%);font-weight:500}.swatch:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}.card-info{padding:14px 3px 0;align-items:center;gap:7px}.card-info h2{font-size:.95rem;line-height:1.3;letter-spacing:-.025em;font-weight:600;margin:0 0 4px}.card-info p{font-size:.72rem;color:var(--muted);margin:0}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;min-height:36px;padding:8px;border:1px solid transparent;border-radius:9px;background:transparent;flex-shrink:0;color:#6e7079}.icon-button:hover{background:#f1f1f6;color:#33353e}.save-palette[aria-pressed=true]{color:#5a50b1;background:#f0edfc}.save-palette[aria-pressed=true] svg{fill:#5a50b1;stroke:#5a50b1}.card-actions{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:10px 0 0;border-top:1px solid #f0f0f3;padding:8px 2px 0}.card-actions button,.card-actions a{display:flex;align-items:center;gap:5px;min-height:32px;padding:6px 4px;border:0;border-radius:6px;background:none;font-size:.69rem;color:#626570;text-decoration:none;white-space:nowrap}.card-actions button:hover,.card-actions a:hover{background:#f2f2f8;color:#3f4294}.card-actions button[aria-pressed=true]{background:#edecfa;color:#4540a0}.card-preview .mini-preview{height:222px;min-height:222px;border-radius:10px}.card-preview .mini-preview>strong{font-size:2.1rem}.card-preview .mini-panel{margin-top:16px}.match-note{font-size:.71rem;margin:10px 3px 0}.collection-pages{margin-top:35px;gap:6px}.collection-pages a{border:0;border-radius:9px;background:#f1f1f5;width:38px;height:38px;font-size:.8rem}.collection-pages a[aria-current=page]{background:var(--ink);color:white}.collection-footnote{font-size:.75rem;color:var(--muted);margin-top:30px;display:block;border-top:1px solid var(--line);padding-top:20px}.collection-footnote summary{cursor:pointer;min-height:34px}.collection-footnote p{max-width:750px;font-size:.75rem}.collection-footnote[open] summary{margin-bottom:12px}
[data-copy]{position:relative}[data-copy][data-copied=true]::after{content:'Copied ✓';position:absolute;inset:0;display:grid;place-items:center;background:var(--swatch,var(--color,#fff));color:var(--ink);font:600 .76rem -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;border-radius:inherit;pointer-events:none}.generator-copy[data-copied=true]::after{color:var(--color-ink)}
.palette-preview-dialog{position:relative;width:calc(100% - 32px);max-width:650px;max-height:calc(100dvh - 40px);border:1px solid var(--line);border-radius:22px;padding:30px;background:#fff;color:var(--ink);box-shadow:0 24px 100px #22243c26}.palette-preview-dialog::backdrop,.work-dialog::backdrop,.collection-comparison::backdrop,.studio-dialog::backdrop{background:#24263880;backdrop-filter:blur(5px)}.close-preview{position:absolute;top:18px;right:18px}.palette-preview-dialog h2{font-size:2rem;margin:10px 35px 8px 0}.quick-description{font-size:.9rem;color:var(--muted);margin-bottom:23px}.palette-preview-dialog .mini-preview{padding:28px;border-radius:14px;min-height:270px}.palette-preview-dialog .mini-preview>strong{font-size:2.8rem}.quick-colors{display:flex;gap:8px;margin:20px 0}.quick-colors button{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;align-items:start;padding:0;border:0;background:none;color:#5d606b;font-size:.66rem;text-align:left}.quick-colors i{width:100%;height:32px;border-radius:6px;border:1px solid #0001}.quick-colors code{font-size:.65rem;color:var(--ink)}.quick-note{font-size:.84rem;color:var(--muted)}.quick-actions{display:flex;gap:10px;flex-wrap:wrap}.quick-evidence{border-top:1px solid var(--line);padding-top:18px;margin-top:22px;font-size:.8rem}.quick-evidence summary{cursor:pointer;min-height:30px}.quick-evidence dl{display:grid;gap:10px}.quick-evidence dl>div{display:flex;justify-content:space-between}.quick-evidence dd{font-variant-numeric:tabular-nums}.quick-evidence a{font-size:.8rem}
.studio-banner{background:#f0f0f8;color:var(--ink);padding:36px 40px;margin-top:60px;border:1px solid #e1e2ed;max-width:1360px}.studio-banner>.eyebrow,.studio-banner p{color:var(--muted)}.studio-banner h2{font-size:2.65rem}.studio-banner .banner-sample{border-radius:16px;overflow:hidden}.field-feature{margin-top:60px}.field-feature h2{font-size:2.7rem}.intro-copy{padding-top:50px;padding-bottom:40px}.intro-copy h2{font-size:1.65rem}.site-footer{padding:35px 40px;gap:32px;margin-top:40px;background:#f4f4f7;border-top:1px solid var(--line)}.site-footer p,.site-footer small,.site-footer nav{font-size:.77rem;color:var(--muted)}.site-footer nav{gap:14px}.site-footer .brand{font-size:1.2rem}
/* Generator: the swatches are the canvas, not a row of forms. */
.generator-heading{padding-top:30px;padding-bottom:24px;align-items:center}.generator-heading h1{font-size:2.65rem;margin:10px 0}.generator-heading p:not(.eyebrow){font-size:.91rem}.generator-heading .eyebrow{margin:0}.generator-toolbar{justify-content:space-between;align-items:center;flex-direction:row}.generator-toolbar>.work-actions{order:-1}.generator-toolbar>.work-actions .button{min-height:42px;padding:10px 15px}.generator-toolbar #gen-next{order:-1}.generator-options{position:relative}.generator-settings{position:absolute;z-index:12;right:0;top:54px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 40px #28293b18;display:flex;width:460px;gap:12px}.generator-settings label{flex:1}.generator-settings select{border:1px solid #c8cbd5;border-radius:8px;min-height:42px;font-size:.82rem}.generator-message{font-size:.76rem;margin:16px auto;min-height:21px}.generator-swatches{margin:0 40px;border:0;border-radius:20px}.generator-color{min-height:360px;padding:22px;display:flex;flex-direction:column;animation:color-arrive .2s ease-out}.generator-color-top{flex-direction:row;align-items:center}.generator-color-top button{border-color:transparent;font-size:.73rem;background:#ffffff15;border-radius:8px}.generator-color-top button:hover{background:#ffffff30}.generator-color-top button[aria-pressed=true]{box-shadow:none;border-color:currentColor;font-weight:600}.generator-number{font-size:.67rem;opacity:.7}.generator-color-sample{padding:60px 0 30px;justify-content:end;flex:1}.generator-copy{font-size:1.65rem!important;font-weight:550;letter-spacing:-.03em;min-height:44px!important;padding:5px 8px!important;border-radius:8px!important}.generator-copy:hover{background:#ffffff22}.generator-edit{margin:12px 0 0;min-height:30px}.generator-edit summary{font-size:.73rem;cursor:pointer;text-align:center;list-style:none;min-height:30px;padding:7px}.generator-edit summary::-webkit-details-marker{display:none}.generator-edit summary:hover{text-decoration:underline}.generator-color-edit{margin-top:8px}.generator-color-edit input{font-size:.76rem}.generator-move{margin-top:8px}.generator-move span{font-size:.63rem}.generator-move button{border-color:transparent;background:#ffffff0f;border-radius:8px}.generator-move button:hover{background:#ffffff30}.generator-bottom{padding-top:18px;align-items:center;flex-direction:row}.generator-bottom>p{font-size:.74rem}.generator-bottom .work-actions .button{min-height:40px;font-size:.78rem;padding:10px 14px}.generator-preview{padding-top:52px}.generator-preview-heading{margin-bottom:22px}.generator-preview-heading h2{font-size:2rem;margin:10px 0}.generator-preview-heading p:not(.eyebrow){font-size:.86rem}.generator-preview-grid{gap:28px;grid-template-columns:1.35fr 1fr;align-items:center}.generator-preview-grid .mini-preview{border-radius:18px;min-height:350px;padding:32px}.generator-preview-grid .mini-preview>strong{font-size:3.2rem}.role-assignment{padding:24px;border:1px solid var(--line);background:#fff;border-radius:16px}.role-options summary{font-size:.88rem;font-weight:550;cursor:pointer;padding-bottom:8px;min-height:32px}.role-options[open] #gen-roles{margin-top:12px}.role-assignment #gen-pairs{font-size:.75rem;color:var(--muted);margin:12px 0 20px}.role-assignment #gen-pairs strong{color:var(--ink);font-weight:600}.role-assignment .caption{font-size:.74rem;margin-top:14px;margin-bottom:0}.generator-explainer{padding-top:22px;margin-top:40px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}.generator-explainer summary{cursor:pointer;min-height:36px}.generator-explainer p{font-size:.84rem}.work-dialog{background:#fff;border-color:var(--line);border-radius:20px}.work-dialog h2{font-size:1.9rem}.work-dialog .dialog-close{position:static}.work-dialog label{font-size:.8rem}.work-dialog input,.work-dialog select,.work-dialog textarea{border-color:#c3c6d1;border-radius:9px}.work-dialog textarea[readonly]{background:#f6f6fa}.library-privacy{background:#f2f2f8;border:0;border-radius:12px;font-size:.8rem;color:#585d6c;padding:16px 20px}.library-privacy a{margin-left:5px}.library-controls input,.library-controls select{border-color:#d0d3dc;border-radius:10px;font-size:.83rem}.library-entries{gap:24px}.saved-direction{border-color:var(--line);border-radius:18px;background:white}.saved-swatches{min-height:160px}.saved-direction-body{padding:22px}.saved-direction h2{font-size:1.4rem}.saved-direction .eyebrow{font-size:.65rem}.saved-notes{font-size:.83rem}.saved-direction .button{min-height:40px;font-size:.77rem}.saved-secondary button{font-size:.75rem}.library-empty{border-color:#dddfe8;background:white;padding:55px 24px}.library-empty h2{font-size:1.8rem}.library-controls{margin:24px 0 20px}#library-status{font-size:.76rem}
/* Studio: distinct tasks, shared colors, and progressively disclosed details. */
.system-main{padding:0 40px 55px;max-width:1520px}.system-heading{padding:30px 0 16px}.system-heading .eyebrow{margin-bottom:10px}.system-heading h1{font-size:2.55rem;letter-spacing:-.045em;margin-bottom:8px}.system-heading>div>p:last-child{font-size:.9rem}.project-actions{position:static;background:transparent;margin:0;padding:0 0 18px;border:0;align-items:center}.project-actions>div{gap:8px}.quiet-button{font-size:.77rem;border-radius:8px;min-height:38px}.quiet-button:hover{background:#efeff5}.action-menu{position:relative}.action-menu>summary{cursor:pointer;list-style:none;font-size:.77rem;min-height:38px;padding:10px;border-radius:8px;white-space:nowrap}.action-menu>summary::-webkit-details-marker{display:none}.action-menu[open]>summary{background:#efeff5}.action-menu>div{position:absolute;left:0;top:44px;z-index:15;background:white;box-shadow:0 10px 36px #23244018;border:1px solid var(--line);border-radius:12px;width:225px;padding:7px;display:grid;gap:3px}.action-menu>div>*{text-align:left;text-decoration:none;padding:10px}.studio-tabs{display:flex;gap:30px;border-bottom:1px solid var(--line);margin:0 0 24px}.studio-tabs button{border:0;border-bottom:2px solid transparent;background:none;padding:13px 3px;font-size:.88rem;font-weight:550;color:var(--muted);min-height:46px}.studio-tabs button[aria-pressed=true]{color:#4244a9;border-bottom-color:#5152ce}.studio-tabs button:hover{color:#4244a9}.studio-tabs span{display:inline-grid;place-items:center;background:#f0f0f6;color:#5e5b8a;font-size:.65rem;min-width:20px;height:20px;border-radius:6px;margin-left:5px}.seed-bar{background:#fff;border-color:var(--line);border-radius:14px;padding:18px 20px 13px;grid-template-columns:180px 180px auto 240px;gap:12px 18px}.seed-bar .button{background:#f1f1fa;border-color:#e0e0f1;color:#42439c}.seed-bar .button:hover{background:#e7e7f6}.seed-bar label,.seed-color>label{font-size:.72rem}.seed-color>div{border-color:#c8cbd5;border-radius:8px}.system-select select{border-color:#c8cbd5;border-radius:8px;background:#fff;color:var(--ink)}.seed-bar>p{font-size:.7rem;color:var(--muted)}.image-workflow{margin:12px 0 22px;border:0;background:#f3f3f7;border-radius:10px}.image-workflow>summary{padding:13px 16px;font-size:.79rem;min-height:42px}.image-workflow>summary span{font-size:.73rem;color:var(--muted)}.system-main .notice{padding:10px 14px;border:0;background:#f2f2f8;font-size:.78rem;border-radius:9px;margin:0 0 18px}.system-workspace{grid-template-columns:250px minmax(0,1fr);gap:26px;scroll-margin-top:94px}.system-editor{border-color:var(--line);border-radius:14px;padding:20px}.editor-title h2{font-size:1.2rem;font-weight:600}.editor-description{font-size:.73rem;margin:16px 0;color:var(--muted)}.token-heading label{font-size:.77rem}.token-input{border-color:#d0d2db;border-radius:9px;padding:7px 9px}.token-input input[type=color]{width:28px;height:28px;border-radius:5px}.token-input input:not([type=color]){font-size:.78rem}.core-tokens{gap:14px}.lock-token{border-color:transparent;color:#606471;background:#f3f3f7;font-size:.63rem;border-radius:6px}.lock-token[aria-pressed=true]{color:#4541a5;background:#edebfa;border-color:#ccc8ed}.more-tokens{border-color:var(--line);margin-top:18px;padding-top:15px}.more-tokens summary{font-size:.75rem}.derived-labels{font-size:.69rem;color:var(--muted)}.system-editor>.caption{font-size:.7rem;color:var(--muted)}.segmented{border:0;background:#f0f0f5;border-radius:10px;padding:3px;gap:3px}.segmented button{border-radius:7px;font-size:.75rem;min-height:33px;color:#626573}.segmented button[aria-pressed=true]{background:#fff;color:#333648;box-shadow:0 1px 5px #20223315}.canvas-toolbar{margin-bottom:12px}.compact-select select{border-color:var(--line);border-radius:8px;font-size:.75rem}.vision-options{font-size:.73rem;color:var(--muted);margin-bottom:16px}.vision-options>summary{cursor:pointer;min-height:28px;padding:5px 0}.vision-toolbar{margin:8px 0 0;background:#f6f6fa;border-color:var(--line)}.theme-previews{gap:20px}.theme-caption{font-size:.75rem;margin-bottom:10px}.check-badge{font-size:.61rem;border-radius:6px}.demo-site{border-radius:14px;border-color:#e0e1e7}.quality-strip{background:#f1f3f8;border-radius:11px;padding:16px 18px}.quality-strip p{color:var(--muted);font-size:.72rem}.audit-status{font-size:.82rem}.brand-provenance{color:var(--muted);font-size:.7rem}.system-section{margin-top:0;border:0;padding-top:4px}.system-section h2{font-size:2.25rem;margin:12px 0}.section-explainer{font-size:.85rem;max-width:790px;margin:18px 0;color:var(--muted)}.system-check-table{font-size:.8rem;border-radius:12px;overflow:hidden}.system-details{border-color:var(--line)}.system-export{gap:40px;grid-template-columns:1fr 1.35fr}.system-export textarea{background:#24252e;color:#f1f2fc;border:0;border-radius:16px;min-height:440px;font-size:.74rem}.system-export>div>p:not(.eyebrow){color:var(--muted);font-size:.85rem}.system-method{font-size:.8rem;border-color:var(--line);margin-top:36px;padding-top:18px;max-width:none}.system-method>summary{cursor:pointer;min-height:34px;color:var(--muted)}.system-method p{max-width:850px;color:var(--muted);font-size:.8rem}.studio-dialog{background:white;border-color:var(--line);border-radius:20px}.studio-dialog .dialog-close{position:absolute}.studio-dialog h2{font-size:1.9rem}.studio-dialog p,.studio-dialog li{font-size:.84rem}.studio-dialog textarea{border-color:#b8bece}.system-main #checks,.system-main #export{scroll-margin-top:96px}
.article h1,.detail-heading h1{font-size:clamp(2.25rem,4vw,3.75rem)}.article h2{font-size:1.7rem}.article p{line-height:1.8}.article .lead{font-size:1.15rem}.detail-main{padding-top:32px}.breadcrumbs{font-size:.78rem}.toast{border-radius:12px;background:#24252e;color:#fff;box-shadow:0 5px 24px #20223320;font-size:.82rem}.comparison-tray{background:#fff;border-color:var(--line);box-shadow:0 10px 45px #24283c22;border-radius:16px;bottom:22px}.collection-comparison{background:#fff;border-color:var(--line);border-radius:20px}.collection-comparison h2{font-size:2.2rem}
@keyframes color-arrive{from{opacity:.78}to{opacity:1}}
@media(max-width:1150px){.wrap{padding-inline:28px}.site-header{padding-inline:28px}.intro h1{font-size:2.45rem}.palette-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.filter-bar{flex-wrap:wrap;gap:12px}.collection-options{gap:10px}.filters button{padding:8px 13px}.generator-swatches{margin-inline:28px}.generator-color{padding:18px 14px;min-height:340px}.generator-copy{font-size:1.35rem!important}.generator-move span{display:none}.system-main{padding-inline:28px}.seed-bar{grid-template-columns:160px 175px 1fr}.seed-preset{grid-column:1/-1;display:flex;flex-direction:row;align-items:center;gap:14px}.seed-preset select{max-width:330px}.seed-bar>p{grid-column:1/-1}.system-workspace{grid-template-columns:225px minmax(0,1fr);gap:20px}.theme-previews{gap:14px}.site-footer{padding-inline:28px}.studio-banner{margin-inline:28px}.generator-preview-grid{grid-template-columns:1.15fr 1fr;gap:22px}.role-assignment{padding:20px}}
@media(max-width:850px){.intro{align-items:start}.intro h1{font-size:2.05rem;max-width:480px}.intro-description{max-width:390px;font-size:.87rem}.intro .eyebrow{font-size:.6rem}.intro-aside .button{font-size:.79rem;padding:11px 13px;white-space:nowrap}.filters{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:3px}.collection-options{margin-left:auto}.palette-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.swatches{height:190px}.card-preview .mini-preview{height:190px;min-height:190px}.card-info h2{font-size:.85rem}.card-actions{gap:2px}.card-actions button,.card-actions a{font-size:.63rem;gap:3px;padding:5px 2px}.card-actions svg{width:14px;height:14px}.card-info{gap:3px}.card-info .icon-button{width:31px;height:31px;min-height:31px;padding:6px}.system-workspace{grid-template-columns:1fr}.core-tokens{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.system-editor{padding:20px}.editor-title h2{margin:0}.system-heading h1{font-size:2.3rem}.generator-toolbar>.work-actions .button{font-size:.78rem;padding:10px 12px}.generator-options>summary{font-size:.78rem;min-height:42px;padding:10px 12px}.generator-heading h1{font-size:2.35rem}.generator-bottom{align-items:start;flex-direction:column;gap:12px}.generator-preview-grid{grid-template-columns:1fr}.generator-preview-grid .mini-preview{min-height:320px}.role-assignment{display:block}.generator-preview-heading h2{font-size:1.9rem}.system-export{grid-template-columns:1fr 1fr}.library-entries{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.wrap{padding-inline:20px}.site-header{height:auto;min-height:110px;padding:15px 20px 10px;gap:9px;flex-direction:column;align-items:start;position:static}.brand{font-size:1.2rem}.brand img{width:25px;height:25px}.site-header nav{width:100%;gap:4px;justify-content:space-between}.site-header nav a{padding:8px 10px;min-height:36px;font-size:.73rem;white-space:nowrap}.site-header .nav-studio{padding:8px 10px;margin-left:0;gap:7px}.site-header .nav-studio span{display:none}.intro{padding-top:28px;padding-bottom:25px;display:block}.intro h1{font-size:2.3rem;max-width:330px;line-height:1.1;margin-bottom:12px}.intro .eyebrow{margin-bottom:13px}.intro-description{font-size:.83rem;max-width:290px}.intro-aside{margin-top:20px;flex-direction:row;justify-content:start;gap:18px}.intro-aside .button{font-size:.76rem;min-height:40px}.brand-start summary{font-size:.71rem;padding:4px 0}.brand-start[open] .home-builder{right:-4px;width:300px;max-width:calc(100vw - 40px)}.collection-tools{gap:8px;flex-wrap:wrap;margin-bottom:16px}.library-search{flex-basis:100%;max-width:none;min-height:44px;padding-inline:12px}.library-search input{font-size:.8rem;min-height:42px}.library-search svg{width:18px;height:18px}.filter-options>summary,.saved-filter{min-height:38px;padding:8px 11px;font-size:.74rem;border-radius:9px}.filter-options>summary svg,.saved-filter svg{width:16px;height:16px}.saved-filter{margin-left:0}.discovery-controls{left:0;right:auto;top:45px;width:calc(100vw - 40px);max-width:350px}.filter-bar{gap:12px}.filters{width:100%;gap:6px;padding-bottom:4px}.filters button{font-size:.74rem;padding:8px 13px;min-height:35px}.collection-options{width:100%;justify-content:space-between;gap:12px}.collection-options select{padding-left:0;min-height:32px}.view-options button{font-size:.7rem;min-height:29px}.collection .collection-meta{font-size:.69rem;margin:14px 0 13px;align-items:start;flex-wrap:wrap;gap:5px 10px}.copy-hint{display:none}.active-filters{order:2;width:100%}.active-filters:empty{display:none}.palette-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.palette-card{padding:7px;border-radius:14px;transform:none}.palette-card:hover{transform:none}.swatches{height:168px;border-radius:8px}.swatch span{font-size:.64rem;left:9px}.card-info{padding:11px 2px 0;align-items:start}.card-info h2{font-size:.79rem;font-weight:600;line-height:1.25;min-height:2em;display:flex;align-items:start}.card-info p{font-size:.64rem}.card-info .icon-button{width:26px;height:29px;min-height:29px;padding:5px;margin-top:-4px}.card-info .icon-button svg{width:16px;height:16px}.card-actions{margin-top:8px;padding-top:6px;gap:0;flex-wrap:wrap;justify-content:space-between}.card-actions button,.card-actions a{font-size:.64rem;min-height:30px;padding:5px 2px}.card-actions [data-compare]{font-size:0;gap:0;padding:5px;min-width:28px}.card-actions [data-compare] svg{width:16px;height:16px}.card-preview .mini-preview{height:168px;min-height:168px;padding:15px 11px}.card-preview .mini-preview>strong{font-size:1.4rem}.card-preview .mini-body{display:none}.card-preview .mini-nav{font-size:.52rem}.card-preview .mini-panel{font-size:.48rem;margin-top:12px;padding:9px 6px;gap:4px}.card-preview .mini-action{padding:6px}.collection-pages{margin-top:28px}.collection-footnote{font-size:.69rem;margin-top:24px}.palette-preview-dialog{padding:23px 18px;border-radius:18px;max-height:calc(100dvh - 24px)}.palette-preview-dialog h2{font-size:1.7rem}.palette-preview-dialog .eyebrow{font-size:.58rem}.quick-description{font-size:.8rem}.palette-preview-dialog .mini-preview{padding:22px;min-height:260px}.palette-preview-dialog .mini-preview>strong{font-size:2.5rem}.quick-colors{gap:5px}.quick-colors code{font-size:.58rem}.quick-colors button{font-size:.6rem}.quick-actions{gap:8px}.quick-actions .button{font-size:.76rem;padding:11px 12px;width:100%}.quick-note{font-size:.79rem}.studio-banner{margin:40px 20px 0;padding:25px 23px;display:block}.studio-banner h2{font-size:2.2rem}.studio-banner p{font-size:.86rem}.studio-banner .banner-sample{margin-top:26px}.field-feature{margin-top:40px}.field-feature h2{font-size:2.1rem}.intro-copy h2{font-size:1.5rem}.site-footer{padding:28px 20px;margin-top:28px}.site-footer nav{gap:12px}.site-footer small{font-size:.69rem}.generator-heading{padding-top:27px;padding-bottom:20px;gap:14px}.generator-heading h1{font-size:2.15rem;margin:10px 0}.generator-heading p:not(.eyebrow){font-size:.8rem;max-width:310px}.generator-heading>.text-link{display:none}.generator-toolbar{flex-wrap:wrap;gap:12px}.generator-toolbar>.work-actions{width:auto;gap:6px;flex:1}.generator-toolbar>.work-actions .button{font-size:.71rem;padding:9px 10px;min-height:39px;gap:6px}.generator-toolbar>.work-actions .button:last-child{flex:initial}.generator-toolbar #gen-next kbd{display:none}.generator-options>summary{font-size:.7rem;padding:9px 11px;min-height:39px}.generator-settings{right:0;width:calc(100vw - 40px);max-width:390px;padding:16px;gap:9px}.generator-settings label{font-size:.68rem}.generator-settings select{font-size:.73rem;padding:9px 5px}.generator-message{font-size:.69rem;margin:13px auto}.generator-swatches{margin-inline:20px;grid-template-columns:1fr;border-radius:15px}.generator-color{display:grid;grid-template-columns:1fr 1fr;min-height:116px;padding:14px 17px;gap:5px 14px;align-items:center}.generator-color-top{grid-column:1/-1;display:flex;justify-content:space-between}.generator-color-top button{font-size:.65rem;min-height:30px;padding:4px 8px}.generator-color-sample{grid-column:1;grid-row:2/4;padding:0;align-items:start;justify-content:center}.generator-copy{font-size:1.2rem!important;padding:2px 0!important;min-height:37px!important}.generator-edit{grid-column:2;grid-row:2;margin:0;min-height:28px}.generator-edit summary{font-size:.66rem;text-align:right;padding:6px 0;min-height:28px}.generator-color-edit{grid-column:2;gap:5px;margin-top:5px}.generator-color-edit input:not([type=color]){font-size:.7rem}.generator-color-edit input[type=color]{width:30px}.generator-color-error{font-size:.63rem}.generator-move{grid-column:2;margin:0;justify-content:end;gap:14px}.generator-move span{display:none}.generator-move button{min-height:29px;min-width:29px;padding:1px 6px}.generator-bottom{gap:12px;padding-top:14px}.generator-bottom>p{font-size:.69rem;margin:0}.generator-bottom .work-actions{gap:7px;width:100%}.generator-bottom .work-actions .button{font-size:.69rem;min-height:39px;padding:10px 10px;flex:1;white-space:nowrap}.generator-preview{padding-top:38px}.generator-preview-heading{gap:14px;align-items:start}.generator-preview-heading h2{font-size:1.8rem;max-width:300px}.generator-preview-heading p:not(.eyebrow){font-size:.8rem}.generator-preview-heading>label{font-size:.7rem;min-width:125px}.generator-preview-heading select{min-height:38px;padding:8px 10px;font-size:.78rem}.generator-preview-grid .mini-preview{min-height:310px;padding:25px}.generator-preview-grid .mini-preview>strong{font-size:2.6rem}.role-assignment{padding:19px}.role-assignment .button{width:100%;font-size:.78rem;padding:12px}.generator-explainer{font-size:.75rem;margin-top:28px}.generator-explainer p{font-size:.76rem}.library-main .generator-heading{padding-bottom:20px}.library-privacy{padding:15px;font-size:.75rem}.library-controls{gap:12px;grid-template-columns:1fr 1fr;margin-top:20px}.library-controls .work-actions .button{font-size:.73rem;min-height:39px}.library-controls label{font-size:.72rem}.library-controls input,.library-controls select{font-size:.76rem;min-height:42px;padding:10px}.library-entries{grid-template-columns:1fr;gap:18px}.saved-swatches{min-height:145px}.saved-direction h2{font-size:1.3rem}.saved-direction-body{padding:19px}.work-dialog{padding:22px 18px}.work-dialog h2{font-size:1.7rem}.work-dialog .button{font-size:.76rem}
.system-main{padding:0 20px 40px}.system-heading{padding:26px 0 18px}.system-heading h1{font-size:2.15rem}.system-heading .eyebrow{font-size:.6rem}.system-heading>div>p:last-child{font-size:.79rem;max-width:290px}.project-actions{flex-direction:row;flex-wrap:wrap;gap:9px;padding:0 0 8px}.project-actions>div{gap:3px;justify-content:start}.project-actions .quiet-button{font-size:.68rem;padding:8px 7px;min-height:36px}.project-actions .small-button{font-size:.72rem;padding:9px 12px;min-height:37px}.action-menu>summary{font-size:.69rem;padding:10px 6px}.action-menu>div{left:auto;right:0;max-width:calc(100vw - 40px)}.studio-tabs{margin:0 0 18px;gap:27px}.studio-tabs button{font-size:.8rem;padding:11px 2px;min-height:43px}.seed-bar{grid-template-columns:1fr 1fr;padding:15px;gap:12px;border-radius:12px}.seed-bar .button{grid-column:1/-1;min-height:41px;height:41px;font-size:.76rem}.seed-preset{grid-column:1/-1;display:flex!important;flex-direction:column;align-items:stretch;gap:6px}.seed-preset select{max-width:none;margin-top:0}.seed-bar>p{font-size:.66rem;line-height:1.5}.seed-bar label,.seed-color>label{font-size:.65rem}.seed-bar select{min-height:41px;font-size:.75rem}.seed-color input:not([type=color]){font-size:.8rem}.image-workflow{margin:10px 0 18px}.image-workflow>summary{font-size:.74rem;padding:12px 14px}.image-workflow>summary span{display:none}.mobile-workspace-switch{margin-bottom:18px}.system-editor{padding:17px}.core-tokens{grid-template-columns:1fr 1fr;gap:13px}.system-workspace{grid-template-columns:1fr}.system-editor>.caption{font-size:.68rem}.token-heading label{font-size:.7rem}.token-input{padding:6px;gap:6px}.token-input input:not([type=color]){font-size:.72rem}.token-input input[type=color]{width:25px;height:26px}.token-heading .lock-token{font-size:.6rem;padding:5px}.vision-options{font-size:.7rem}.theme-previews{grid-template-columns:1fr;gap:22px}.theme-caption{font-size:.72rem}.demo-site h3{font-size:2.45rem}.quality-strip{padding:15px}.quality-strip p{font-size:.68rem}.system-section h2{font-size:1.9rem}.system-section .eyebrow{font-size:.6rem}.section-explainer{font-size:.78rem;margin:14px 0}.system-export{grid-template-columns:1fr;gap:25px}.system-export textarea{min-height:300px;font-size:.68rem}.system-export>div>p:not(.eyebrow){font-size:.79rem}.system-method{font-size:.73rem}.system-main #checks,.system-main #export{scroll-margin-top:20px}.article h1,.detail-heading h1{font-size:2.25rem}.article h2{font-size:1.5rem}.article .lead{font-size:1rem}.comparison-tray{bottom:12px;width:calc(100% - 24px);padding:12px;gap:10px}.comparison-tray .button{font-size:.74rem;min-height:39px;padding:10px}.collection-comparison{padding:24px 18px}.collection-comparison h2{font-size:1.8rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Refinements from desktop and phone testing. */
.palette-card .card-info{margin:0}.palette-card .card-actions{margin-top:14px}
.studio-topbar{display:flex;align-items:center;justify-content:space-between;gap:24px}.studio-topbar .project-actions{padding:20px 0 0;gap:18px;flex-shrink:0}.studio-topbar .system-heading{padding-bottom:20px}.seed-bar{grid-template-columns:190px 190px max-content;padding-bottom:15px}.starting-points{position:relative;margin:12px 0 20px;font-size:.77rem}.starting-points>summary{cursor:pointer;list-style:none;min-height:34px;padding:8px 2px;color:var(--muted);display:flex;align-items:center;gap:12px;width:fit-content}.starting-points>summary::-webkit-details-marker{display:none}.starting-points>div{padding:18px;border:1px solid var(--line);border-radius:12px;background:white;margin-top:8px}.starting-points .seed-preset{max-width:420px}.starting-points .image-workflow{margin-bottom:0}.system-main #state-notice{font-size:.73rem;padding:8px 12px;margin-bottom:14px}
@media(max-width:1000px){.studio-topbar{display:block}.studio-topbar .project-actions{padding:0 0 12px}.studio-topbar .system-heading{padding-bottom:12px}}
@media(max-width:600px){.intro{padding-top:21px;padding-bottom:20px}.intro .eyebrow{display:none}.intro h1{font-size:1.9rem;max-width:320px}.intro-description{max-width:none;font-size:.78rem}.intro-aside{margin-top:14px;gap:15px}.collection-tools{margin-bottom:12px}.filter-bar{gap:8px}.collection .collection-meta{margin:10px 0 10px}.generator-toolbar{gap:8px}.generator-toolbar>.work-actions{flex:0 0 100%;flex-wrap:nowrap}.generator-toolbar>.work-actions .button{flex:1!important}.generator-options{width:100%}.generator-options>summary{width:100%;min-height:34px;padding:7px 11px}.generator-settings{top:41px;width:100%;max-width:none}.generator-heading{padding-top:22px;padding-bottom:16px}.generator-heading .eyebrow{font-size:.6rem}.generator-heading h1{font-size:1.9rem}.generator-message{margin:10px auto}.studio-topbar .project-actions{flex-wrap:nowrap;gap:8px;padding-bottom:10px}.project-actions>.history-actions{flex:1;gap:3px}.project-actions #undo,.project-actions #redo{font-size:1rem;width:30px;min-width:30px;padding:5px}.project-actions #undo span,.project-actions #redo span{display:none}.project-actions .small-button{padding-inline:10px}.studio-topbar .system-heading{padding-top:22px;padding-bottom:12px}.system-heading h1{font-size:1.9rem}.system-heading .eyebrow{display:none}.system-heading>div>p:last-child{max-width:none}.studio-tabs{margin-bottom:14px}.seed-bar{grid-template-columns:1fr 1fr;padding:13px;gap:9px}.seed-bar>p{margin:0;font-size:.65rem}.starting-points{margin:6px 0 12px;font-size:.71rem}.starting-points>div{padding:13px}.starting-points .seed-preset{font-size:.74rem}.starting-points .image-workflow>summary{padding-inline:10px}.system-main #state-notice{font-size:.65rem;line-height:1.5;margin-bottom:12px}.mobile-workspace-switch{margin-bottom:12px}.canvas-toolbar{gap:8px}.vision-options{margin-bottom:9px}.card-info h2{min-height:0}}

.seed-bar{grid-template-columns:190px max-content minmax(0,1fr);align-items:center}.seed-bar>p{grid-column:auto;max-width:390px;justify-self:end;margin:0}.starting-selects{display:flex;gap:20px;align-items:start}.starting-selects .system-select{flex:1;max-width:420px}
@media(max-width:600px){.seed-bar{grid-template-columns:1fr 1fr;align-items:end}.seed-bar .button{grid-column:2;white-space:nowrap;font-size:.7rem;padding:10px 8px}.seed-bar>p{grid-column:1/-1;max-width:none;justify-self:start}.starting-selects{display:grid;gap:14px}.canvas-toolbar{flex-direction:row;align-items:center;gap:7px;flex-wrap:nowrap}.canvas-toolbar .segmented{flex:1}.canvas-toolbar .segmented button{font-size:.63rem;padding:6px 7px}.canvas-toolbar .compact-select{width:103px}.canvas-toolbar .compact-select select{width:103px;font-size:.65rem;padding:8px 5px;min-height:38px}}

.banner-sample{background:#3448c5;color:#fff}.banner-sample .eyebrow{color:#fff}.generator-number{opacity:1;color:var(--color-ink)}.generator-color-top button,.generator-color-top button:hover,.generator-move button,.generator-move button:hover,.generator-copy:hover{background:transparent}.generator-color-top button:hover,.generator-move button:hover{border-color:currentColor}.generator-copy:hover{text-decoration:underline;text-underline-offset:5px}.generator-color{animation:none}

.collection .collection-meta{flex-direction:row}.detail-swatches .copy-hint{display:inline;color:inherit}.collection .copy-hint{max-width:none;text-align:right}.collection .card-info{min-height:0}.collection .card-info h2{font-size:.95rem}
@media(min-width:601px) and (max-width:1000px){.intro{display:flex;flex-direction:column;align-items:stretch;gap:20px}.intro-aside{flex-direction:row;justify-content:start;align-self:start;gap:22px}.system-workspace{grid-template-columns:220px minmax(0,1fr);gap:18px}.system-editor{padding:16px}.core-tokens{grid-template-columns:1fr}.editor-title{flex-direction:column;align-items:start;gap:12px}.theme-previews{grid-template-columns:1fr}.demo-site{padding:24px}.canvas-toolbar{flex-direction:column;align-items:stretch}.canvas-toolbar .compact-select{align-self:end}.system-editor .derived-labels{display:block}.system-editor .derived-labels span{display:block;margin-top:5px}}
@media(max-width:850px){.collection .card-info h2{font-size:.85rem}}
@media(max-width:600px){.collection .card-info h2{font-size:.79rem}.collection .collection-meta{margin:10px 0 10px}.collection .copy-hint{display:none}}
@media(max-width:600px){.detail-swatches button{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:12px}.detail-swatches .copy-hint{margin-left:0}.library-main .generator-heading{align-items:start}.library-main .generator-heading>.button{font-size:.78rem;min-height:40px}}

/* Intent-led browsing and small, focused tools. */
.topic-links{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0}.topic-links a,.topic-links button{font-family:inherit;font-size:.79rem;font-weight:500;color:#44468e;background:#f0f0f8;border:1px solid #e4e4ef;border-radius:8px;padding:9px 12px;min-height:38px;display:inline-flex;align-items:center;gap:7px;text-decoration:none}.topic-links a:hover,.topic-links button:hover{background:#e6e6f4}.collection-topic-links{margin:0 0 16px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.collection-topic-links a{white-space:nowrap;flex-shrink:0;font-size:.73rem;background:transparent;border-color:transparent;padding:5px 8px;min-height:32px}.collection-topic-links a:first-child{padding-left:0;font-weight:600}.discovery-main,.tool-main{padding-top:36px;padding-bottom:40px}.discovery-main h1,.tool-main h1{font-size:clamp(2.2rem,4vw,3.6rem);margin:12px 0 16px;line-height:1.12}.discovery-main .guide-lead,.tool-main .guide-lead{max-width:720px;font-size:1rem;color:var(--muted)}.discovery-group{margin:42px 0}.discovery-group>h2{font-size:1.7rem}.topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.topic-card{display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;padding:16px;background:#fff;text-decoration:none;transition:box-shadow .18s}.topic-card:hover{box-shadow:0 8px 24px #24252b0d}.topic-stripe{display:flex;height:96px;overflow:hidden;border-radius:9px}.topic-stripe span{flex:1}.topic-card h3{font-size:1.1rem;margin:18px 0 9px;display:flex;justify-content:space-between}.topic-card p{font-size:.84rem;color:var(--muted);margin:0}.discovery-main .card-info h3{font-size:.95rem;line-height:1.3;margin:0 0 4px}.topic-card-note{font-size:.76rem;padding:0 3px;color:var(--muted);min-height:42px}.collection-editorial{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding-top:28px;border-top:1px solid var(--line);scroll-margin-top:100px}.collection-editorial h2{font-size:1.85rem}.collection-editorial h3{font-size:1.12rem;margin-top:26px}.collection-editorial p{font-size:.92rem}.collection-editorial .mini-preview{border-radius:16px;padding:28px;min-height:260px}.article-next{padding:30px 0 10px;margin-top:40px;border-top:1px solid var(--line)}.article-next h2{font-size:1.6rem}.article-next p{max-width:900px;font-size:.91rem}.pair-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px;margin-top:36px}.tool-controls{min-width:0}.tool-controls label,.tool-details label,.extras-form label,.custom-role label,.scale-adjustments label{display:flex;flex-direction:column;gap:8px;font-size:.8rem;font-weight:500;min-width:0}.tool-controls input,.tool-controls select,.extras-form input,.extras-form select,.custom-role input:not([type=checkbox]),.custom-role select,.scale-adjustments input{width:100%;min-width:0;min-height:44px;border:1px solid #c6c8d3;border-radius:8px;background:white;color:var(--ink);padding:10px;font-size:.9rem}.color-entry{display:flex;gap:10px;align-items:center}.color-entry input[type=color]{width:48px;min-width:48px;height:46px;padding:4px;cursor:pointer}.color-entry input:not([type=color]){font-family:ui-monospace,monospace;font-size:1rem}.pair-inputs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}.tool-details{border-top:1px solid var(--line);padding:18px 0;margin:24px 0}.tool-details summary{font-size:.9rem;cursor:pointer;min-height:32px}.tool-details label{margin:16px 0;max-width:420px}.pair-summary{display:flex;align-items:baseline;gap:20px;margin:0 0 20px}.pair-summary strong{font-size:3.4rem;letter-spacing:-.06em;font-variant-numeric:tabular-nums}.pair-summary>span{font-size:.86rem;color:var(--muted)}#pair-preview,#pair-preview-inner{border-radius:14px}#pair-preview-inner{padding:26px}#pair-preview-text>strong{font-size:1.4rem;font-weight:600}#pair-preview-text p{font-size:1rem}.pair-preview-ui{display:inline-block;border:2px solid currentColor;border-radius:8px;padding:9px 12px;font-size:.85rem}.pair-checks{margin-top:20px}.pair-checks>div{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:13px 0;gap:15px;font-size:.88rem}.pair-checks small{display:block;font-size:.72rem;color:var(--muted);margin-top:3px}.pair-checks .pass{color:#28613e}.pair-checks .fail{color:#aa3434}.color-explorer-layout{display:grid;grid-template-columns:280px minmax(0,500px);gap:60px;align-items:center;margin:38px 0}.color-wheel{width:250px;height:250px;border-radius:50%;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);position:relative;display:grid;place-items:center}.color-wheel>span{width:188px;height:188px;border:14px solid var(--paper);border-radius:50%;display:grid;place-items:center;font-family:ui-monospace,monospace;font-size:1.2rem}.color-wheel>div{position:absolute;inset:0;pointer-events:none}.color-wheel i{position:absolute;left:calc(50% - 9px);top:5px;width:18px;height:18px;background:#fff;border:3px solid #222;border-radius:50%}.color-values{margin-top:20px}.color-values>div{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.77rem;border-bottom:1px solid var(--line);padding:8px 0}.color-values button{background:none;border:0;border-radius:6px;padding:8px 4px;max-width:100%;overflow-wrap:anywhere;color:var(--ink);text-align:right}.color-values code{font-size:.78rem}.explorer-swatches{display:flex;gap:8px;flex-wrap:wrap}.explorer-swatch{flex:1;min-width:90px;min-height:140px;border:0;border-radius:12px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;padding:18px 9px;font-size:.8rem}.tonal-swatches .explorer-swatch{min-height:110px;min-width:80px}.demo-status-list{padding:14px 24px 20px;background:var(--p-surface);border-top:1px solid var(--p-border)}.demo-status-list p{display:flex;align-items:center;gap:10px;font-size:.75rem;margin:10px 0}.demo-status-list span{border:1px solid currentColor;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;flex-shrink:0}.system-extras{margin-top:30px}.system-extras>summary{font-size:.95rem}.system-extras>summary span{font-size:.78rem;font-weight:400;margin-left:8px;color:var(--muted)}.system-extras>p,.system-extras section>p{max-width:840px;font-size:.83rem}.system-extras section{margin:28px 0}.system-extras h2{font-size:1.3rem}.extras-form{display:flex;gap:14px;align-items:end;flex-wrap:wrap;background:#f3f3f8;padding:18px;border-radius:12px;margin-top:20px}.extras-form label{flex:1;min-width:130px}.custom-role{display:grid;grid-template-columns:1.2fr 1.4fr 1fr 1fr auto;gap:14px;align-items:start;border:1px solid var(--line);border-radius:12px;padding:18px;margin:12px 0}.custom-role .inline-check{display:flex;flex-direction:row;align-items:center;font-size:.68rem;margin-top:9px;font-weight:400;gap:5px}.named-scale{border:1px solid var(--line);border-radius:12px;margin:12px 0;padding:16px}.named-scale summary{cursor:pointer;font-weight:550;font-size:.9rem}.named-scale summary span{font-size:.75rem;font-weight:400;color:var(--muted);margin-left:8px}.scale-shades{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:5px;margin:20px 0}.scale-shades label{background:var(--shade);color:var(--shade-ink);padding:18px 4px 8px;border-radius:8px;display:flex;flex-direction:column;align-items:center;gap:18px;font-size:.7rem}.scale-shades input{width:100%;min-width:0;background:transparent;border:1px solid transparent;text-align:center;font-family:ui-monospace,monospace;font-size:.68rem;color:inherit;padding:8px 0;border-radius:4px}.scale-shades input:focus{border-color:currentColor;outline-color:currentColor}.scale-adjustments{display:flex;flex-wrap:wrap;align-items:end;gap:12px}.scale-adjustments label{width:130px}.system-extras[hidden]{display:none}
@media(max-width:1000px){.topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-editorial{gap:30px}.pair-layout{gap:25px}.custom-role{grid-template-columns:1fr 1fr}.scale-shades{grid-template-columns:repeat(6,minmax(0,1fr))}.color-explorer-layout{gap:30px;grid-template-columns:250px minmax(0,1fr)}}
@media(max-width:600px){.discovery-main,.tool-main{padding-top:24px}.discovery-main h1,.tool-main h1{font-size:2.2rem}.discovery-main .guide-lead,.tool-main .guide-lead{font-size:.91rem}.topic-grid,.collection-editorial,.pair-layout{grid-template-columns:1fr}.discovery-group{margin:30px 0}.topic-stripe{height:85px}.topic-card-note{font-size:.7rem;min-height:65px}.discovery-main .card-actions{flex-wrap:wrap}.discovery-main .card-actions a{white-space:normal;font-size:.66rem;min-height:32px}.collection-editorial{gap:18px}.pair-layout{gap:25px}.pair-inputs{grid-template-columns:1fr 1fr;gap:12px}.color-entry{gap:6px}.color-entry input[type=color]{width:36px;min-width:36px}.color-entry input:not([type=color]){font-size:.85rem;padding:9px 6px}.pair-summary strong{font-size:3rem}.pair-summary{margin-top:0}.color-explorer-layout{display:flex;flex-direction:column;align-items:stretch;gap:25px}.color-wheel{align-self:center;width:210px;height:210px}.color-wheel>span{width:155px;height:155px;border-width:10px}.explorer-swatch{min-height:110px;min-width:85px}.color-values code{font-size:.7rem}.custom-role{grid-template-columns:1fr;padding:14px}.extras-form{padding:14px}.scale-shades{grid-template-columns:repeat(3,minmax(0,1fr))}.system-extras>summary span{display:block;margin:8px 0}.demo-status-list{padding:12px 18px}.topic-links a,.topic-links button{font-size:.74rem}.article .topic-links{margin-left:0;margin-right:0}}

.mobile-result{display:none}@media(max-width:600px){.pair-summary.mobile-result{display:flex;align-items:center;gap:18px;margin:0 0 24px}.mobile-result strong{font-size:2.7rem}.mobile-result>span{max-width:110px;font-size:.77rem}#pair-result>.pair-summary{display:none}.color-explorer-layout .tool-controls{order:-1}}
.discovery-search{margin:28px 0 12px;max-width:520px}.discovery-search label{display:block;font-size:.82rem;font-weight:600;margin-bottom:8px}.discovery-search input{width:100%;padding:14px 18px;border:1px solid var(--line,#d8d9d1);border-radius:12px;background:#fff;color:#20241d;font:inherit}.discovery-search p{font-size:.8rem;color:#5b6256}.topic-card[hidden],.discovery-group[hidden]{display:none}.collection-options{flex-wrap:wrap}.discovery-controls{max-height:70vh;overflow-y:auto}.match-note{overflow-wrap:anywhere}
.quiet-button[aria-pressed=true],.quiet-button[aria-pressed=true]:hover{background:var(--ink);color:#fff}