:root{--ink:#233d32;--paper:#f6f2e9;--line:#d7d6cb;--violet:#c3afe7;--yellow:#f3d858}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 Arial,Helvetica,sans-serif}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #7258a0;outline-offset:4px}.skip{position:fixed;top:-100px;left:20px;z-index:10;background:white;padding:10px}.skip:focus{top:12px}.site-header,main,footer{max-width:1440px;margin:auto;padding-left:48px;padding-right:48px}.site-header{display:flex;align-items:center;justify-content:space-between;padding-top:24px;padding-bottom:24px;border-bottom:1px solid var(--line)}.brand{font-size:27px;font-weight:800;letter-spacing:-1.2px;text-decoration:none;display:flex;gap:12px;align-items:center}.brand span{color:#ad88da;font-size:38px;line-height:1}.back{font-size:15px;text-decoration:none;display:flex;gap:22px}.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:34px 0 30px}.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px;font-weight:600}.intro h1{font-size:clamp(32px,3.7vw,57px);letter-spacing:-.055em;line-height:1.08;margin:0;font-weight:500}.intro h1 em{font-family:Georgia,serif;font-weight:400}.intro>p,.section-top>p{font-size:15px;margin:0;line-height:1.55}.studio{display:grid;grid-template-columns:minmax(370px,.9fr) minmax(0,1.1fr);gap:42px;padding-bottom:54px;align-items:start}.role-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}.role-tab{border:1px solid var(--line);padding:14px;text-align:left;background:transparent;border-radius:14px;min-height:97px}.role-tab.active{background:var(--ink);color:white;border-color:var(--ink)}.role-label{display:block;font-size:13px;margin-bottom:8px}.selected-color{display:flex;gap:9px;align-items:center}.selected-color i{display:block;width:20px;height:20px;flex:0 0 20px;border-radius:50%;box-shadow:inset 0 0 0 1px #0002}.selected-color strong{font-size:14px;line-height:1.2;font-weight:500}.palette-top{display:flex;justify-content:space-between;align-items:center;margin:24px 0 12px}.palette-top h2{font-size:16px;font-weight:500;margin:0}.palette-top>span{font-size:13px;color:#62695f}.swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.swatch{display:flex;align-items:center;gap:7px;min-height:43px;padding:6px;border:1px solid transparent;text-align:left;background:transparent;border-radius:9px;font-size:14px;line-height:1.15}.swatch:hover{background:#e9e6de}.swatch.active{border-color:var(--ink);background:#fff8}.swatch-dot{width:25px;height:25px;border-radius:50%;flex:0 0 25px;box-shadow:inset 0 0 0 1px #0002}.swatch[data-finish="galaxy"] .swatch-dot{background-image:radial-gradient(circle at 30% 25%,#9dcdd7 0 1px,transparent 2px),radial-gradient(circle at 75% 65%,#b898da 0 1px,transparent 2px)}.swatch[data-finish="silk"] .swatch-dot{background-image:linear-gradient(110deg,transparent 20%,#ffffff50 50%,transparent 80%)}.name-field{display:block;margin-top:24px;font-size:15px}.name-field input{display:block;border:0;border-bottom:1px solid #839184;border-radius:0;padding:10px 0;background:transparent;color:var(--ink);font-size:24px;width:100%;margin-top:3px;letter-spacing:.04em}.preview-surround{background:#eeede9;border-radius:22px;padding:32px 38px 16px;transition:background .2s}.preview-surround.gray{background:#8d8d8d}.preview-surround.dark{background:#292d2b}.sample{--body:#AD8CDB;--accent:#F1D24E;border-radius:18px;overflow:hidden;box-shadow:0 15px 30px #0000000d;border:1px solid #00000009}.sample-main{height:260px;display:flex;align-items:center;justify-content:center;background:var(--body);color:var(--accent);padding:20px}.sample-main>span{font-weight:800;letter-spacing:-.04em;line-height:1.1;text-align:center;overflow-wrap:anywhere;max-width:100%;font-size:72px}.sample-band{height:76px;background:var(--accent)}.surround-controls{display:flex;justify-content:center;gap:9px;align-items:center;margin-top:20px;color:#3d443e;font-size:13px}.dark .surround-controls{color:#f5f5f0}.gray .surround-controls{color:#101810}.bg-choice{width:27px;height:27px;border:2px solid #7778;border-radius:50%;padding:0}.bg-choice[data-bg="light"]{background:#eeede9}.bg-choice[data-bg="gray"]{background:#8d8d8d}.bg-choice[data-bg="dark"]{background:#292d2b}.bg-choice.active{outline:2px solid currentColor;outline-offset:3px}.pair-caption{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:18px}.pair-caption p{margin:0;flex:1}.pair-caption p:first-child{text-align:right}.pair-caption strong{display:block;font-size:19px;line-height:1.15;font-weight:500}.pair-caption p>span{display:block;font-size:13px;color:#646c63;margin-top:5px}.plus{font-size:24px;font-weight:300}.actions{display:flex;gap:8px;margin-top:24px}.button{border:1px solid var(--ink);border-radius:40px;padding:12px 18px;font-size:14px;background:transparent;min-height:46px;flex:1}.primary{background:var(--ink);color:#fff}.button:hover{background:#e5dfd0}.primary:hover{background:#355441}.button span{font-size:20px;margin-right:6px;vertical-align:middle}.contrast-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0 10px;gap:15px;font-size:14px}.contrast-row strong{font-size:15px;font-weight:500;white-space:nowrap}.preview-note{font-size:13px;line-height:1.5;color:#646c63;margin:0}.combinations{border-top:1px solid var(--line);padding:42px 0}.section-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.section-top h2{font-size:clamp(27px,3vw,40px);font-weight:500;letter-spacing:-.045em;line-height:1.1;margin:0}.section-top h2 span{color:#9a76c8}.section-top p.eyebrow{margin-bottom:12px}.filter-bar{display:flex;justify-content:space-between;align-items:center;margin:24px 0 20px;gap:16px}.filters{display:flex;gap:8px;flex-wrap:wrap}.filters button{padding:10px 17px;border:1px solid var(--line);border-radius:30px;background:transparent;font-size:14px}.filters button.active{background:var(--ink);color:#fff;border-color:var(--ink)}#pair-count{font-size:13px;color:#646c63;margin:0}.pair-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 16px}.pair-card{padding:0;border:0;background:transparent;text-align:left;min-width:0}.pair-card-visual{display:block;border-radius:12px;overflow:hidden;border:1px solid #0001;transition:transform .15s}.pair-card:hover .pair-card-visual{transform:translateY(-4px)}.pair-card-main{display:flex;align-items:center;justify-content:center;height:100px;font-weight:750;font-size:25px;letter-spacing:-.04em;padding:12px;overflow-wrap:anywhere;text-align:center;line-height:1.15}.pair-card-band{display:block;height:27px}.pair-card-label{display:block;font-size:13px;line-height:1.3;margin-top:9px}.pair-card-label b{font-weight:500}.pair-card-label span{color:#62695f}.pair-card[aria-pressed="true"] .pair-card-visual{outline:2px solid var(--ink);outline-offset:3px}.explanation{padding:0 0 42px}.explanation details{border-top:1px solid var(--line);padding:16px 0}.explanation summary{cursor:pointer;font-size:17px}.explanation-copy{max-width:780px;font-size:16px}.sources{font-size:14px}.explanation img{display:block;width:100%;max-width:900px;height:auto;margin:24px auto 0;border-radius:12px}footer{border-top:1px solid var(--line);display:flex;gap:20px;align-items:center;justify-content:space-between;padding-top:28px;padding-bottom:32px;font-size:14px}footer>a:first-child{font-size:22px;font-weight:700;text-decoration:none}footer p{margin:0}.noscript{margin:24px;padding:24px;background:#fff}
@media(min-width:1450px){.sample-main{height:310px}}@media(max-width:1100px){.site-header,main,footer{padding-left:28px;padding-right:28px}.studio{gap:25px;grid-template-columns:minmax(340px,1fr) minmax(0,1.1fr)}.preview-surround{padding:28px 22px 18px}.sample-main{height:260px}.intro>p{max-width:230px}.pair-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.swatch{font-size:13px}.section-top>p{max-width:280px}}
@media(max-width:760px){.site-header,main,footer{padding-left:20px;padding-right:20px}.site-header{padding-top:18px;padding-bottom:18px}.brand{font-size:23px}.brand span{font-size:30px}.intro{display:block;padding:26px 0 24px}.intro h1{font-size:39px}.intro>p{margin-top:12px;max-width:none}.intro>p br{display:none}.studio{grid-template-columns:1fr;gap:26px;padding-bottom:34px}.preview-column{grid-row:1}.controls{grid-row:2}.preview-surround{padding:22px 28px 14px}.sample-main{height:180px}.sample-band{height:52px}.sample-main>span{font-size:58px}.surround-controls{margin-top:14px}.pair-caption{gap:18px;margin-top:15px}.pair-caption strong{font-size:18px}.actions{margin-top:18px}.button{font-size:13px;padding:10px 12px}.contrast-row{padding-top:12px}.preview-note{font-size:12px}.role-tab{min-height:90px;padding:12px}.swatch{font-size:14px;min-height:49px;padding:7px}.palette-top{margin-top:20px}.swatches{gap:5px}.name-field{margin-top:20px}.section-top{display:block}.section-top h2{font-size:34px}.section-top>p{margin-top:12px;max-width:none;font-size:14px}.filter-bar{display:block}.filters{gap:7px}.filters button{font-size:13px;padding:10px 12px}#pair-count{margin-top:12px}.pair-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 10px}.pair-card-main{height:78px;font-size:22px;padding:8px}.pair-card-band{height:22px}.pair-card-label{font-size:12px}.explanation summary{font-size:16px}footer{flex-wrap:wrap}footer p{order:3;width:100%;font-size:13px}.combinations{padding-top:30px}.explanation-copy{font-size:15px}}
@media(max-width:760px){.studio{row-gap:12px}.preview-column{display:contents}.preview-surround{grid-row:1;position:sticky;top:8px;z-index:3;box-shadow:0 4px 16px #00000008}.pair-caption{grid-row:2}.actions{grid-row:3;margin-top:8px}.contrast-row{grid-row:4;padding-bottom:0}.preview-note{grid-row:5}.controls{grid-row:6;margin-top:12px}.name-field input{scroll-margin-top:360px}}
@media(max-width:390px){.site-header,main,footer{padding-left:16px;padding-right:16px}.intro h1{font-size:35px}.swatch{font-size:13px;gap:5px;padding:5px}.swatch-dot{width:22px;height:22px;flex-basis:22px}.pair-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.preview-surround{padding-left:20px;padding-right:20px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
/* Model-specific, live color preview */
.model-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}.model-choice{padding:3px 3px 7px;border:1px solid var(--line);border-radius:12px;background:transparent;min-width:0;overflow:hidden}.model-choice img{display:block;width:100%;height:60px;object-fit:cover;border-radius:8px;margin-bottom:5px}.model-choice span{font-size:14px;letter-spacing:.07em}.model-choice.active{border:2px solid var(--ink);padding:2px 2px 6px;background:#fff9}.preview-surround{padding:20px 18px 15px}.model-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.model-heading strong{font-size:18px;letter-spacing:.1em}.model-heading span{font-size:13px;color:#62695f}.bowl-preview{height:290px;width:100%;position:relative}.bowl-preview canvas{display:block;width:100%;height:100%}.model-description{font-size:14px;line-height:1.4;min-height:40px;margin:0;text-align:center}.surround-controls{margin-top:14px}.dark .model-heading,.dark .model-description,.dark .model-heading span{color:#f1f0ed}.gray .model-heading,.gray .model-description,.gray .model-heading span{color:#102219}#preview-loading{font-size:14px;padding:30px 15px;text-align:center}
@media(max-width:760px){.model-picker{grid-row:1;margin:0}.preview-surround{grid-row:2;padding:12px 10px 10px;top:8px}.pair-caption{grid-row:3}.actions{grid-row:4}.contrast-row{grid-row:5}.preview-note{grid-row:6}.controls{grid-row:7}.bowl-preview{height:205px}.model-heading strong{font-size:16px}.model-description{font-size:13px;min-height:36px}.surround-controls{margin-top:5px}.model-choice img{height:48px}.model-heading span{font-size:12px}}

.field-hint{font-size:13px;line-height:1.45;color:#646c63;margin:8px 0 0}.name-field input::placeholder{font-size:16px;letter-spacing:0}

.pair-caption small{display:block;font-size:12px;line-height:1.4;color:#62695f;margin-top:5px;overflow-wrap:anywhere}.materials-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 18px;padding:0 0 28px}.material-sample{height:90px;border:1px solid #0001;border-radius:10px}.material-card h3{font-size:16px;margin:12px 0 4px}.material-card p{font-size:14px;margin:4px 0}.material-card .material-proof{font-size:13px;color:#62695f}.material-card a{font-size:13px}.material-card{min-width:0}.materials-grid .material-card p{padding:0}.materials-grid .material-card a{display:inline-block;margin-top:6px}@media(max-width:600px){.materials-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}.material-sample{height:70px}.pair-caption{gap:12px}}
/* Studio composition: generous product view, compact controls, no idle motion. */
html{scroll-padding-top:104px}.intro{padding:38px 0 30px}.intro h1{font-size:clamp(38px,4.4vw,64px)}
.studio{grid-template-columns:minmax(0,1.3fr) minmax(340px,.85fr);gap:40px;align-items:start}.preview-column{grid-column:1;grid-row:1;position:sticky;top:104px}.controls{grid-column:2;grid-row:1;padding-top:2px}.model-picker{gap:10px;margin-bottom:14px}.model-choice{background:#fff5;border-color:#deded3;border-radius:14px;padding:4px 4px 8px;transition:border-color .16s}.model-choice img{height:70px;object-fit:cover}.model-choice.active{border-color:#233d32;background:#fff9}.model-choice span{font-size:12px;font-weight:600;letter-spacing:.12em}
.preview-surround{position:relative;overflow:hidden;isolation:isolate;border:1px solid #e0ddd3;border-radius:24px;padding:22px 22px 16px;background:radial-gradient(ellipse at 38% 18%,#fffdf8 0%,#f1eee6 55%,#e4dfd4 100%)}.preview-surround.gray{background:radial-gradient(ellipse at 30% 18%,#c0bfb9,#868a83)}.preview-surround.dark{background:radial-gradient(ellipse at 32% 12%,#4b514b,#252d28 75%);border-color:#354038}
.model-heading{position:relative;z-index:2;align-items:center}.model-heading>div{display:flex;gap:12px;align-items:baseline}.model-heading .studio-label{font-size:10px;letter-spacing:.13em;font-weight:500;color:#687166}.model-heading strong{font-size:20px;letter-spacing:.08em;font-weight:550}.preview-expand{border:0;border-bottom:1px solid #9ca398;padding:5px 0;background:transparent;font-size:12px;min-height:36px}.dark .preview-expand{color:#f6f2e9;border-color:#87948a}
.bowl-preview{height:350px;min-width:0}.bowl-preview canvas{position:absolute;inset:0;touch-action:pan-y;cursor:grab;opacity:0;transition:opacity .18s}.bowl-preview canvas:active{cursor:grabbing}.bowl-preview.is-ready canvas{opacity:1}#preview-poster{position:absolute;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;border-radius:14px;transition:opacity .18s}#preview-loading{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);width:max-content;max-width:94%;margin:0;padding:8px 12px;border-radius:8px;background:#f6f2e9eb;color:#425246;font-size:12px;text-align:center}.is-ready #preview-poster,.is-ready #preview-loading{opacity:0;visibility:hidden;pointer-events:none}.is-unavailable #preview-loading{font-size:13px}.is-unavailable #preview-poster{opacity:.55}.dark #preview-poster{mix-blend-mode:normal}
.view-controls{display:flex;gap:4px;justify-content:center;margin:0 auto 14px}.view-controls button{border:1px solid transparent;border-radius:30px;background:transparent;font-size:12px;padding:8px 14px;min-height:38px}.view-controls button[aria-pressed=true]{background:#ffffffb3;border-color:#c9cbc0}.dark .view-controls button{color:#f3f2eb}.dark .view-controls button[aria-pressed=true]{background:#ffffff18;border-color:#8d9a8f}.model-description{font-size:13px;min-height:20px;color:#64715f;margin-bottom:12px}.surround-controls{border-top:1px solid #b0b5a044;padding-top:12px;margin-top:0;gap:10px}.bg-choice{width:22px;height:22px}.pair-caption{gap:16px;margin-top:18px}.pair-caption strong{font-size:16px}.pair-caption small{font-size:11px}.actions{margin-top:18px}.contrast-row{font-size:12px}.preview-note{margin-top:14px;font-size:12px;line-height:1.55;max-width:560px}.role-tab{min-height:90px}.swatch{font-size:12px;gap:8px;min-height:44px}.swatch-dot{width:23px;height:23px;flex-basis:23px}.name-field{margin-top:22px}.name-field input{font-size:23px}.controls .field-hint{font-size:12px}
.pair-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 14px;min-height:100px}.pair-card{content-visibility:auto;contain-intrinsic-size:auto 160px}.pair-card-main.long-name{font-size:16px}.show-pairs{display:block;max-width:360px;margin:30px auto 0;padding:14px 24px}.show-pairs[hidden]{display:none}.pair-card-main{font-family:var(--sans,Arial);font-size:24px}.material-card{content-visibility:auto;contain-intrinsic-size:auto 200px}
.preview-dialog{width:min(1180px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);border:0;border-radius:26px;padding:16px;background:var(--paper);color:var(--ink);overflow:auto;box-shadow:0 25px 120px #10291f66}.preview-dialog::backdrop{background:#162b24bf;backdrop-filter:blur(5px)}.preview-close{display:block;margin:0 4px 12px auto;border:0;background:transparent;font-size:14px;min-height:44px;padding:8px}.preview-dialog .preview-surround{position:relative;top:auto;box-shadow:none}.preview-dialog .preview-expand{visibility:hidden}.preview-dialog .bowl-preview{height:min(56dvh,580px)}.preview-expanded{overflow:hidden}
@media(max-width:1100px){.studio{gap:24px;grid-template-columns:minmax(0,1.15fr) minmax(330px,1fr)}.preview-surround{padding:18px 16px 14px}.bowl-preview{height:300px}.model-choice img{height:55px}.swatches{grid-template-columns:repeat(3,minmax(0,1fr))}.swatch{font-size:12px;padding:5px;gap:6px}.pair-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.preview-column{top:100px}}
@media(max-width:760px){.intro{padding:28px 0 24px}.intro h1{font-size:39px}.studio{grid-template-columns:minmax(0,1fr);gap:16px}.preview-column{display:contents;position:static}.controls{grid-column:1;grid-row:3;padding:0;margin:4px 0 0}.model-picker{grid-column:1;grid-row:1;gap:8px;margin:0}.model-choice img{height:48px}.preview-surround{grid-column:1;grid-row:2;position:sticky;top:82px;z-index:4;padding:12px 12px 10px;box-shadow:0 12px 24px #233d320d;border-radius:18px}.model-heading strong{font-size:16px}.model-heading .studio-label{font-size:9px}.preview-expand{font-size:11px;min-height:30px}.bowl-preview{height:clamp(190px,25svh,235px)}.view-controls{margin-bottom:6px;gap:6px}.view-controls button{font-size:11px;padding:7px 13px;min-height:34px}.model-description{display:none}.surround-controls{padding-top:8px;gap:10px;font-size:11px;min-height:30px}.pair-caption{grid-row:4;grid-column:1;margin:0}.actions{grid-row:5;grid-column:1;margin:0}.contrast-row{grid-row:6;grid-column:1;padding:0}.color-order{grid-row:7;grid-column:1;margin:0}.preview-note{grid-row:8;grid-column:1;margin:0}.swatch{font-size:13px;padding:7px 4px;min-height:46px}.swatch-dot{width:24px;height:24px;flex-basis:24px}.name-field input{scroll-margin-top:460px}.pair-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 10px}.preview-dialog{width:calc(100vw - 16px);padding:10px;border-radius:20px}.preview-dialog .bowl-preview{height:45dvh}.preview-dialog .preview-surround{top:0;position:relative}.preview-dialog .model-description{display:block}.preview-dialog .model-heading .studio-label{display:none}}
@media(max-width:360px){.swatches{grid-template-columns:repeat(2,minmax(0,1fr))}.pair-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.model-heading .studio-label{display:none}.model-picker{gap:6px}}
@media(max-height:620px) and (max-width:760px){.preview-surround{position:relative;top:0}.bowl-preview{height:200px}.name-field input{scroll-margin-top:104px}}
@media(prefers-reduced-motion:reduce){.bowl-preview canvas,#preview-poster{transition:none}}
.model-heading .studio-volume{font-size:11px;letter-spacing:0;color:#6a7467;white-space:nowrap}.dark .model-heading .studio-volume{color:#dbe3d8}
/* Mobile flows from model/colors/name into a non-sticky preview. */
.controls .model-picker {margin-bottom:18px;}
.controls .color-recommendations {margin-top:16px;}
.preview-column {position:static;}
@media(max-width:760px){
 .studio {gap:24px;}
 .controls {grid-column:1;grid-row:1;margin:0;min-width:0;}
 .preview-column {display:block;grid-column:1;grid-row:2;min-width:0;}
 .preview-surround {position:relative;top:auto;z-index:auto;box-shadow:none;}
 .controls .model-picker {margin-bottom:14px;}
 .role-tab {min-height:74px;padding:10px;}
 .role-label {font-size:11px;}
 .selected-color strong {font-size:12px;}
 .palette-top {margin:16px 0 8px;}
 .swatches {grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;}
 .swatch {font-size:11px;gap:5px;min-height:44px;padding:5px 3px;}
 .swatch-dot {width:20px;height:20px;flex-basis:20px;}
 .name-field {margin-top:16px;font-size:13px;}
 .name-field input {font-size:18px;min-height:44px;scroll-margin-top:100px;}
 .preview-note {margin-top:12px;}
 .pair-caption {margin-top:16px;}
 .actions {margin-top:16px;}
 .contrast-row {margin-top:12px;}
 .color-order {margin-top:20px;}
 .view-controls button,.preview-expand {min-height:44px;}
}

.controls textarea {display:block;min-height:96px;font:inherit;font-size:16px;line-height:1.5;margin-top:10px;}