.colour-studio{display:grid;gap:30px}.colour-preview{--frame-primary:#292a2d;--frame-compare:#756a60;overflow:hidden;border:1px solid #b9d4da;border-radius:30px;background:#042d3b;color:#fff;box-shadow:0 30px 80px rgba(2,39,52,.18)}.colour-preview-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:26px 30px 22px}.colour-preview-head .eyebrow{margin:0 0 6px;color:#67d7e8}.colour-preview-head h3{margin:0;color:#fff;font-size:clamp(24px,2.2vw,36px);line-height:1.08}.colour-preview-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.colour-preview-actions button{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:9px 13px;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(255,255,255,.07);color:#eaf8fa;font:inherit;font-size:12px;font-weight:800;cursor:pointer;transition:.2s ease}.colour-preview-actions button:hover,.colour-preview-actions button:focus-visible,.colour-preview-actions button[aria-pressed=true]{border-color:#62d9ec;background:#087d98;color:#fff;outline:0}.colour-scene{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/9;margin:0 18px;border-radius:20px;background:#d9dde0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}.colour-scene>img,.colour-compare-layer img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1)}.colour-frame-overlay{position:absolute;z-index:2;inset:0;width:100%;height:100%;fill:var(--frame-primary);opacity:.78;mix-blend-mode:color;pointer-events:none}.colour-compare-layer{position:absolute;z-index:3;inset:0;clip-path:inset(0 0 0 50%);pointer-events:none}.colour-frame-overlay--compare{fill:var(--frame-compare)}.colour-scene[data-preview-zoom=true]>img,.colour-scene[data-preview-zoom=true] .colour-compare-layer img{transform:scale(1.17)}.colour-scene[data-preview-zoom=true] .colour-frame-overlay{transform:scale(1.17);transform-origin:center}.colour-compare-divider{display:none;position:absolute;z-index:6;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.18),0 0 24px rgba(0,0,0,.35);pointer-events:none}.colour-compare-divider span{position:absolute;top:50%;left:50%;width:42px;height:42px;border:2px solid #fff;border-radius:50%;background:#063848;box-shadow:0 8px 25px rgba(0,0,0,.35);transform:translate(-50%,-50%)}.colour-compare-divider span:before{content:"↔";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:18px;font-weight:900}.colour-compare-range{display:none;position:absolute;z-index:8;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}.colour-scene-badges{position:absolute;z-index:7;right:18px;bottom:16px;left:18px;display:flex;justify-content:space-between;gap:12px;pointer-events:none}.colour-scene-badges span{padding:8px 12px;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:rgba(2,32,43,.82);color:#fff;font-size:11px;font-weight:900;box-shadow:0 6px 18px rgba(0,0,0,.18);backdrop-filter:blur(8px)}.colour-scene-badges span:last-child{display:none}.colour-scene[data-preview-mode=compare] .colour-compare-divider,.colour-scene[data-preview-mode=compare] .colour-compare-range,.colour-scene[data-preview-mode=compare] .colour-scene-badges span:last-child{display:block}.colour-preview-footer{display:grid;grid-template-columns:minmax(170px,.7fr) minmax(260px,1.5fr) auto;align-items:center;gap:24px;padding:20px 30px 24px}.colour-preview-name small,.colour-preview-name strong,.colour-preview-name span{display:block}.colour-preview-name small{color:#64d8ea;font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.colour-preview-name strong{margin:2px 0;color:#fff;font-size:26px;line-height:1.15}.colour-preview-name span,.colour-preview-footer p{color:#c3dbe0;font-size:12px;line-height:1.55}.colour-preview-footer p{margin:0}.colour-preview-footer>a{color:#76e0ef;font-size:12px;font-weight:900;white-space:nowrap}.colour-preview:fullscreen{display:grid;align-content:center;width:100vw;height:100vh;border:0;border-radius:0;background:#031f2b}.colour-preview:fullscreen .colour-scene{width:min(92vw,1500px);margin-inline:auto}.colour-preview:fullscreen .colour-preview-head,.colour-preview:fullscreen .colour-preview-footer{width:min(92vw,1500px);margin-inline:auto}.colour-library{padding:30px;border:1px solid #d5e4e7;border-radius:28px;background:#fff;box-shadow:0 24px 65px rgba(14,66,78,.09)}.colour-tools{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:20px}.colour-tools .eyebrow{margin:0 0 5px}.colour-tools h3{margin:0;color:#062f3d;font-size:clamp(22px,2vw,31px)}.colour-filters{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}.colour-filters button{min-height:38px;padding:8px 12px;border:1px solid #c8dadd;border-radius:999px;background:#fff;color:#34545f;font-size:10px;font-weight:900;cursor:pointer}.colour-filters button:hover,.colour-filters button:focus-visible{border-color:#009bbb;outline:0}.colour-filters button.active{border-color:#007f9b;background:#007f9b;color:#fff}.colour-swatch-grid{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:10px!important}.colour-swatch{display:block!important;overflow:hidden;padding:0!important;border:1px solid #d4e2e5!important;border-radius:13px!important;background:#fff!important;color:#133a47!important;text-align:left;cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s}.colour-swatch:hover,.colour-swatch:focus-visible{z-index:1;transform:translateY(-3px);border-color:#42bdd3!important;box-shadow:0 10px 22px rgba(2,51,65,.12);outline:0}.colour-swatch.selected{border-color:#0099b8!important;box-shadow:0 0 0 3px rgba(0,153,184,.15)}.colour-chip{display:block!important;width:100%!important;height:66px!important;background-size:cover;background-position:center}.colour-label{display:flex!important;align-items:center;justify-content:space-between;gap:5px;min-height:43px;padding:8px 9px}.colour-label strong{font-size:10px;line-height:1.2}.colour-selected-mark{display:none;color:#008cab;font-size:7px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.colour-swatch.selected .colour-selected-mark{display:block}.colour-swatch[hidden]{display:none!important}.colour-accuracy{margin:24px 0 0;padding:17px 20px;border-left:4px solid #18b6d0;background:#edf7f8;color:#56717a;font-size:12px;line-height:1.6}@media(max-width:1050px){.colour-swatch-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.colour-preview-footer{grid-template-columns:1fr 1.4fr}.colour-preview-footer>a{grid-column:1/-1}}@media(max-width:760px){.colour-preview{border-radius:22px}.colour-preview-head{display:block;padding:21px 20px 17px}.colour-preview-actions{justify-content:flex-start;margin-top:16px}.colour-preview-actions button{min-height:40px}.colour-scene{aspect-ratio:4/3;margin:0 9px;border-radius:15px}.colour-scene>img,.colour-compare-layer img{object-position:center}.colour-preview-footer{display:block;padding:17px 20px 21px}.colour-preview-footer p{margin:12px 0}.colour-library{padding:22px 16px;border-radius:22px}.colour-tools{display:block}.colour-filters{justify-content:flex-start;margin-top:16px}.colour-swatch-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.colour-chip{height:58px!important}}@media(max-width:440px){.colour-preview-actions button{flex:1;justify-content:center;padding-inline:8px;font-size:10px}.colour-preview-actions button:last-child{display:none}.colour-swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.colour-chip{height:64px!important}}