.color-lab-page{min-height:100vh}
.color-header{position:relative;max-width:none}
.color-header nav{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:12px;color:var(--muted)}
.color-header nav a:hover{color:var(--ink)}
.color-header nav [aria-current=page]{color:#e6d8ad}
.color-header .header-cta{margin-left:10px}
.color-main{width:min(1480px,92%);margin:0 auto;padding:42px 0 64px}
.color-intro{display:flex;align-items:end;justify-content:space-between;gap:50px;margin:0 0 30px}
.color-intro .kicker{margin:0 0 12px}
.color-intro h1{font-size:clamp(42px,4.4vw,68px)}
.color-intro h1 em{color:#d8caa6;font-weight:400}
.color-intro>p{max-width:360px;margin:0 0 6px;color:var(--muted);font-size:14px;line-height:1.7}
.color-panel{grid-template-columns:minmax(0,1.65fr) minmax(350px,1fr);margin:0}
.color-visual{min-height:730px}
.color-visual::after{background:linear-gradient(0deg,#0008,transparent 22%,transparent 85%,#0004)}
.color-visual img{object-position:center}
.color-controls{padding:34px 36px}
.color-controls h2{font-size:clamp(34px,3vw,45px);line-height:1.05;margin:0 0 16px}
.color-controls h2 em{font-weight:400;color:#c9b98f}
.color-controls h3 em{font-weight:400;color:#c9b98f}
.color-controls>p:not(.card-label){font-size:13px;line-height:1.6;margin-bottom:21px}
.color-controls .range-label{font-size:13px;line-height:1.35}
.color-controls .range-label small{font-size:11px}
.color-controls input[type=range]{margin:7px 0 14px}
.color-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:52px;padding:10px 13px;margin:0 0 18px;text-align:left;border:1px solid #6b6151;background:#24211c}
.color-toggle span{font-size:13px;line-height:1.4}
.color-toggle small{display:block;margin-top:2px;font-size:11px;color:#a69b89}
.color-toggle strong{min-width:42px;padding:5px 8px;border-radius:4px;background:#39332a;font-size:11px;text-align:center}
.color-toggle[aria-pressed=true]{border-color:#bca371;background:#30291c}
.color-toggle[aria-pressed=true] strong{background:#d9bd58;color:#201b12}
.color-controls .demo-actions{margin-top:0}
.color-controls>.demo-tone-note{margin:17px 0 0!important}
.color-back{display:inline-flex;margin-top:22px;color:#d9cdb9;font-size:13px}
.color-back:hover{text-decoration:underline}
.engine-stage{min-height:100svh;scroll-margin-top:94px;padding:105px 0 88px;display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--line)}
.engine-stage .color-intro h2{font-size:clamp(42px,4.4vw,68px)}
.engine-stage .color-intro h2 em{color:#d8caa6}
.engine-stage .color-panel{margin:0}
.engine-stage .color-back{align-self:flex-start}
html.color-motion [data-color-reveal]{transition:opacity 1.35s var(--ease),transform 1.35s var(--ease),filter 1.35s var(--ease)}
html.color-motion [data-color-reveal]:not(.visible){opacity:0;transform:translateY(42px);filter:blur(16px)}
@media(max-width:1050px){.color-panel{grid-template-columns:1fr}.color-visual{min-height:60vw;max-height:680px}.color-visual img{position:absolute}.color-controls{padding:32px}}
@media(max-width:640px){.color-header{height:72px;padding:0 5%}.color-header nav{display:none}.color-header .header-cta{margin-left:auto;font-size:11px;padding:9px 10px}.color-main{width:92%;padding:30px 0 46px}.color-intro{display:block;margin-bottom:22px}.color-intro h1{font-size:44px;margin-bottom:15px}.color-intro>p{font-size:13px}.color-visual{min-height:58vw}.color-controls{padding:25px 22px}.color-controls h2{font-size:36px}.color-controls .range-label{font-size:13px}}
@media(max-width:640px){.engine-stage{padding:72px 0 58px;scroll-margin-top:76px}.engine-stage .color-intro h2{font-size:44px}}
@media(prefers-reduced-motion:reduce){html.color-motion [data-color-reveal]{transition:none}html.color-motion [data-color-reveal]:not(.visible){opacity:1;transform:none;filter:none}}