/* STRATA visualiser page */
.vis-page .hdr{background:var(--lime);border-bottom-color:var(--ink)}
.vz-hero{padding-top:calc(var(--hdr) + clamp(36px,6vw,88px));padding-bottom:clamp(28px,4vw,56px)}
.vz-hero .display{font-size:clamp(2.4rem,8.4vw,8.6rem);margin-top:18px}
.vz-lab{border-top:2px solid var(--ink);padding-top:14px}
.vz-lead{margin-top:clamp(18px,2.5vw,32px);max-width:40ch}
.vz-app{padding-bottom:clamp(64px,9vw,140px)}
.vz-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:start}
@media(min-width:1000px){.vz-layout{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.vz-left{position:sticky;top:calc(var(--hdr) + 12px)}}
@media(max-width:999px){
  .vz-left{display:contents}
  .vz-left .stage{position:sticky;top:var(--hdr);z-index:20;max-height:40vh;box-shadow:0 0 0 8px var(--lime),0 10px 0 8px var(--lime);outline:2px solid var(--ink);outline-offset:8px;margin-block:10px 14px}
  .vz-left .stage-bar,.vz-left .disc,.vz-left .paint-panel,.vz-left .err-msg{grid-column:1}
}
.vis-page .hdr.hide{transform:none}
.stage{position:relative;overflow:hidden;background:var(--taupe);width:100%;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.stage.zoomed{cursor:zoom-out;touch-action:none}
.stage.painting{touch-action:none}
.zin{position:absolute;inset:0;transform-origin:50% 50%;transition:transform .6s var(--ease);will-change:transform}
.stage.zoomed .zin{transition:transform .6s var(--ease),transform-origin .12s linear}
.base,.after,.after canvas,.paint{position:absolute;inset:0;width:100%;height:100%}
.base{object-fit:cover}
.base.swap{animation:swapIn .7s var(--ease)}
@keyframes swapIn{from{opacity:.0}to{opacity:1}}
.after canvas{opacity:0;transition:none;image-rendering:auto}
.after{clip-path:inset(0 0 0 25%)}
.paint{display:none;cursor:cell;touch-action:none}
.painting .paint{display:block}
.ba{position:absolute;top:0;bottom:0;width:44px;margin-left:-22px;z-index:6;cursor:ew-resize;touch-action:none;outline:0}
.ba::before{content:"";position:absolute;left:21px;top:0;bottom:0;width:2px;background:var(--lime);box-shadow:0 0 0 1px rgba(26,26,26,.35)}
.ba .knob{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;background:var(--lime);border:2px solid var(--ink);display:grid;place-items:center;transition:transform .3s var(--ease),background-color .3s}
.ba .knob i{display:block;width:20px;height:2px;background:var(--ink);position:relative}
.ba .knob i::before,.ba .knob i::after{content:"";position:absolute;top:-4px;width:8px;height:8px;border:solid var(--ink);border-width:0 0 2px 2px}
.ba .knob i::before{left:-3px;transform:rotate(45deg);top:-3px}
.ba .knob i::after{right:-3px;transform:rotate(-135deg);top:-3px}
.ba:hover .knob,.ba:focus-visible .knob{transform:scale(1.12);background:var(--terra)}
.ba:focus-visible .knob{outline:3px solid var(--ink);outline-offset:3px}
.ba[hidden]{display:none}
.stage.zoomed .ba{display:none}
.tag{position:absolute;top:10px;z-index:5;background:var(--ink);color:var(--lime);font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;transition:opacity .3s;pointer-events:none}
.tb{left:10px}.ta{right:10px;background:var(--terra)}
.tag[hidden]{display:none}
.busy{position:absolute;left:0;right:0;bottom:0;height:4px;z-index:7;opacity:0;transition:opacity .2s}
.busy.on{opacity:1}
.busy i{display:block;height:100%;width:30%;background:var(--terra);animation:busy 1s linear infinite}
@keyframes busy{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
.err-msg{background:var(--terra);color:var(--lime);padding:12px 16px;font-weight:700;margin-top:10px}
.stage-bar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:12px}
.tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tools .tl,.pp-row .tl{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-right:4px}
.tools button,.seg2 button{padding:.62em 1em;border:2px solid var(--ink);font-weight:800;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;transition:background-color .25s,color .25s;min-height:40px}
.tools button:hover,.tools button[aria-pressed="true"],.seg2 button[aria-pressed="true"],.seg2 button:hover{background:var(--ink);color:var(--lime)}
.tools.sc{margin-left:auto}
.tools input[type=range],.pp-row input[type=range]{accent-color:var(--terra);width:130px}
.disc{margin-top:12px;font-size:.88rem;font-weight:500;border-left:4px solid var(--terra);padding-left:12px}
.disc b{font-weight:800}
.paint-panel{margin-top:18px;border:2px solid var(--ink);padding:18px;display:grid;gap:12px}
.paint-panel[hidden]{display:none}
.pp{font-size:.95rem}
.pp-row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.pp-row select{font:inherit;font-weight:700;border:2px solid var(--ink);background:var(--lime);padding:.5em .7em}
.status{font-weight:700;min-height:1.2em;color:var(--terra)}

.vz-right .blk{border-top:2px solid var(--ink);padding:16px 0 26px}
.step-l{font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;display:flex;gap:10px;align-items:center}
.step-l b{background:var(--terra);color:var(--lime);padding:2px 7px;font-size:.78rem}
.seg2{display:flex}
.seg2 button{flex:1;font-size:.9rem;padding:.9em 1em}
.seg2 button+button{margin-left:-2px}
.note{font-size:.85rem;color:var(--taupe);font-weight:500;margin-top:10px}
.scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.scenes button{display:block;width:100%;text-align:left;border:2px solid transparent;transition:border-color .25s,transform .35s var(--ease)}
.scenes button:hover{transform:translateY(-3px)}
.scenes button[aria-pressed="true"]{border-color:var(--terra)}
.scenes img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--taupe)}
.scenes span{display:block;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:6px 4px 4px}
.scenes .up{aspect-ratio:auto;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px dashed var(--ink);gap:2px;min-height:90px}
.scenes .up b{font-size:2rem;font-weight:900;line-height:1;color:var(--terra)}
.scenes .up[aria-pressed="true"]{border-style:solid;border-color:var(--terra)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.chips .chip{padding:.6em .95em;font-size:.72rem;min-height:40px}
.sys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(min-width:520px) and (max-width:999px){.sys{grid-template-columns:repeat(5,1fr)}}
.sys li{transition:opacity .3s var(--ease),transform .3s var(--ease)}
.sys li.out{opacity:0;transform:scale(.9)}
.sys li[hidden]{display:none}
.sys button{display:block;width:100%;text-align:left;border:2px solid transparent;padding:0;background:transparent;transition:border-color .25s,transform .35s var(--ease)}
.sys button:hover{transform:translateY(-3px)}
.sys button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--lime)}
.sys img{width:100%;aspect-ratio:4/3;object-fit:cover}
.sys .nm{display:block;font-weight:900;text-transform:uppercase;letter-spacing:-.03em;font-size:.9rem;padding:5px 5px 0}
.sys .tr{display:flex;align-items:center;gap:5px;font-size:.58rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 5px 6px}
.sys .tr i{width:.7em;height:.7em;background:var(--ink);flex:none}
.sys .tr.Signature i{background:var(--terra)}.sys .tr.Premium i{background:var(--taupe)}
.sys button[aria-pressed="true"] .tr i{outline:1px solid var(--lime)}
.shade-now{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.shade-now canvas{width:96px;height:72px;flex:none;background:var(--taupe);border:2px solid var(--ink)}
.shade-info b{display:block;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:1.05rem;line-height:1.1}
.shade-info span{font-size:.85rem;font-weight:600;color:var(--taupe)}
.sub{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin:12px 0 8px;color:var(--taupe)}
.sws{display:flex;flex-wrap:wrap;gap:6px}
.sw{width:40px;height:40px;border:2px solid transparent;outline:1px solid rgba(26,26,26,.3);outline-offset:-3px;position:relative;transition:transform .3s var(--ease)}
.sw:hover{transform:translateY(-4px)}
.sw[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 3px var(--lime),0 0 0 5px var(--terra)}
#shades .tlink{margin-top:14px}
.act{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.act .sel{font-weight:900;text-transform:uppercase;letter-spacing:-.03em;font-size:1.3rem}
.act .sel .muted{font-weight:600;font-size:.9rem;letter-spacing:0;text-transform:none}
.act .btn{width:100%;justify-content:space-between}
@media(prefers-reduced-motion:reduce){.zin,.after canvas{transition:none!important}}