.color-hero{scroll-snap-align:start;position:relative;overflow:hidden}.color-band{cursor:pointer;z-index:1;transition:clip-path .8s var(--ease);position:absolute;inset:0}.color-band[data-band="0"]{clip-path:polygon(0% 0%,33.333% 0%,51.333% 100%,0% 100%);background:#53524e}.color-band[data-band="1"]{clip-path:polygon(33.333% 0%,66.667% 0%,84.667% 100%,51.333% 100%);background:#c4bebc}.color-band[data-band="2"]{clip-path:polygon(66.667% 0%,100% 0%,100% 100%,84.667% 100%);background:#a36b47}.hero-content-spacer{z-index:3;pointer-events:none;padding:150px 0 50px;position:relative}.hero-content-spacer h1,.hero-content-spacer p{visibility:hidden}.hero-content-spacer h1{margin-bottom:12px;font-size:clamp(26px,4vw,38px)}.hero-content-spacer p{max-width:560px;margin-bottom:28px;font-size:19px}.hero-content-spacer .hero-actions{pointer-events:auto}.hero-text-stack{z-index:2;pointer-events:none;position:absolute;inset:0}.hero-text-layer{transition:clip-path .8s var(--ease);padding:150px 0 50px;position:absolute;inset:0}.hero-text-layer h1{margin-bottom:12px;font-size:clamp(26px,4vw,38px)}.hero-text-layer p{max-width:560px;font-size:19px}.hero-text-layer[data-band="0"]{color:#fff;clip-path:polygon(0% 0%,33.333% 0%,51.333% 100%,0% 100%)}.hero-text-layer[data-band="1"]{color:#14181a;clip-path:polygon(33.333% 0%,66.667% 0%,84.667% 100%,51.333% 100%)}.hero-text-layer[data-band="2"]{color:#14181a;clip-path:polygon(66.667% 0%,100% 0%,100% 100%,84.667% 100%)}.color-hero.band-0-active .color-band[data-band="0"],.color-hero.band-1-active .color-band[data-band="1"],.color-hero.band-2-active .color-band[data-band="2"]{clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%);z-index:2}.color-hero.band-0-active .hero-text-layer[data-band="0"],.color-hero.band-1-active .hero-text-layer[data-band="1"],.color-hero.band-2-active .hero-text-layer[data-band="2"]{clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%);z-index:1}.color-hero.band-0-active .hero-text-layer:not([data-band="0"]),.color-hero.band-1-active .hero-text-layer:not([data-band="1"]),.color-hero.band-2-active .hero-text-layer:not([data-band="2"]){clip-path:polygon(0% 0%,0% 0%,0% 0%)}@media (prefers-reduced-motion:reduce){.color-band,.hero-text-layer{transition:none}}.swatch-grid{grid-template-columns:repeat(6,1fr);gap:18px;display:grid}@media (width<=860px){.swatch-grid{grid-template-columns:repeat(3,1fr)}}@media (width<=520px){.swatch-grid{grid-template-columns:repeat(2,1fr)}}.swatch{border-radius:var(--radius-md);box-shadow:var(--shadow-sm);cursor:pointer;background:#fff;transition:transform .2s;overflow:hidden}.swatch:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}.swatch .chip{aspect-ratio:1}.swatch .info{padding:10px 12px}.swatch .info b{font-size:19px;display:block}.swatch .info span{color:var(--ink-600);font-size:19px}.texture-grid{grid-template-columns:repeat(6,1fr);gap:18px;display:grid}@media (width<=860px){.texture-grid{grid-template-columns:repeat(3,1fr)}}.texture-swatch{aspect-ratio:1;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.texture-swatch .code{color:#fff;text-shadow:0 1px 4px #00000080;font-size:19px;font-weight:700;position:absolute;bottom:8px;left:10px}.viewer3d{background:var(--paper);border:1px solid var(--ink-200);border-radius:var(--radius-lg);padding:28px}@media (width<=860px){.viewer3d{padding:18px}}.viewer3d-canvas-wrap{aspect-ratio:16/7.5;border-radius:var(--radius-md);border:1px solid var(--ink-200);background:#fff;position:relative;overflow:hidden}@media (width<=760px){.viewer3d-canvas-wrap{aspect-ratio:4/3}}.viewer3d-canvas-wrap canvas{cursor:grab;touch-action:none;width:100%;height:100%;display:block}.viewer3d-canvas-wrap canvas:active{cursor:grabbing}.viewer3d-loading{color:var(--ink-600);background:#ffffffb3;justify-content:center;align-items:center;font-size:19px;transition:opacity .3s;display:flex;position:absolute;inset:0}.viewer3d-hint{color:#14181a59;pointer-events:none;font-size:19px;position:absolute;bottom:10px;right:14px}.viewer3d-toolbar{z-index:2;flex-direction:column;gap:6px;display:flex;position:absolute;top:12px;right:12px}.viewer3d-btn{border:1px solid var(--ink-200);width:34px;height:34px;color:var(--ink-800);box-shadow:var(--shadow-sm);background:#ffffffeb;border-radius:50%;justify-content:center;align-items:center;font-size:19px;font-weight:700;transition:background .15s,border-color .15s,transform .15s;display:flex}.viewer3d-btn:hover{background:var(--brand-green-tint);border-color:var(--brand-green);color:var(--brand-green-dark);transform:scale(1.06)}.viewer3d-btn:active{transform:scale(.96)}.viewer3d-controls{flex-wrap:wrap;align-items:flex-start;gap:30px;margin-top:24px;display:flex}.color-select-row{flex:220px;min-width:190px}.color-select-label{color:var(--ink-800);margin-bottom:10px;font-size:19px;font-weight:700}.color-select-label span{opacity:.55;text-transform:uppercase;letter-spacing:.06em;margin-left:6px;font-size:19px;font-weight:500}.color-select-control{align-items:center;gap:12px;display:flex}.color-current-swatch{border:2px solid var(--ink-200);cursor:pointer;border-radius:50%;flex-shrink:0;width:38px;height:38px;padding:0;transition:transform .15s}.color-current-swatch:hover{transform:scale(1.08)}.color-dropdown-toggle{color:var(--brand-green);cursor:pointer;background:0 0;border:none;align-items:center;gap:5px;padding:6px 4px;font-size:19px;font-weight:700;display:flex}.color-dropdown-toggle .chev{transition:transform .25s var(--ease);font-size:19px;display:inline-block}.color-dropdown-toggle.open .chev{transform:rotate(180deg)}.color-dropdown-panel{max-height:0;transition:max-height .3s var(--ease);overflow:hidden}.color-dropdown-panel.open{max-height:120px;margin-top:14px}.viewer3d-current-line{color:var(--ink-600);flex:100%;order:3;font-size:19px}.mini-swatch-grid{flex-wrap:wrap;gap:9px;display:flex}.mini-swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;width:30px;height:30px;padding:0;transition:transform .15s,border-color .15s}.mini-swatch:hover{transform:scale(1.12)}.mini-swatch.on{border-color:var(--brand-green);box-shadow:0 0 0 2px var(--brand-green-tint)}.mini-swatch.add-swatch{border:1.5px dashed var(--ink-200);color:var(--ink-600);justify-content:center;align-items:center;font-size:19px;font-weight:700;line-height:1;display:flex;background:var(--paper-alt)!important}.mini-swatch.add-swatch:hover{border-color:var(--brand-green);color:var(--brand-green);transform:scale(1.12);background:var(--brand-green-tint)!important}.texture-upload-row{border-top:1px dashed var(--ink-200);margin-top:14px;padding-top:14px}.texture-upload-btn{color:var(--brand-green);cursor:pointer;border:1.5px dashed var(--brand-green);background:var(--brand-green-tint);border-radius:999px;align-items:center;gap:6px;padding:8px 14px;font-size:19px;font-weight:700;transition:background .2s,color .2s;display:inline-flex}.texture-upload-btn:hover{background:var(--brand-green);color:#fff}.texture-upload-controls{flex-wrap:wrap;align-items:center;gap:16px;margin-top:10px;display:flex}.texture-scale-label{color:var(--ink-600);align-items:center;gap:6px;font-size:19px;display:flex}.texture-scale-label input[type=range]{width:100px}.texture-clear-btn{color:var(--ink-400);cursor:pointer;background:0 0;border:none;padding:0;font-size:19px;text-decoration:underline}.texture-clear-btn:hover{color:#c0392b}