/* Wolf Creek Showcase · Sliders */

#demo-root.pgrid{grid-auto-flow:dense}
#demo-root.pgrid>.item.w2{grid-column:span 2}
@media (max-width:640px){#demo-root.pgrid>.item.w2{grid-column:auto}}
#demo-root.pgrid>.item .stage{flex:1 1 auto;padding:22px 20px}
.pg{container-type:inline-size;width:100%;color:#f4f7ff;font:500 13px/1.4 "Segoe UI",system-ui,-apple-system,sans-serif}
.pg button{font:inherit}
.pg :focus-visible{outline:2px solid #00e5ff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.pg *,.pg *::before,.pg *::after{animation:none!important;transition:none!important}}

/* 01 Value bubble slider */
.sl1{display:grid;gap:12px;max-width:320px;margin:0 auto}
.sl1 label{font:700 11px/1 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#93a0b8}
.sl1-wrap{position:relative;padding-top:40px}
.sl1-b{position:absolute;top:0;left:calc(11px + (100% - 22px) * var(--v,40) / 100);transform:translateX(-50%);padding:6px 10px;border-radius:8px;
  background:#7c5cff;color:#fff;font:800 12px/1 ui-monospace,monospace;white-space:nowrap}
.sl1-b::after{content:"";position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;border-bottom:0;border-top-color:#7c5cff}
.sl1 input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:8px;margin:0;border-radius:8px;cursor:pointer;
  background:linear-gradient(90deg,#7c5cff,#00e5ff) 0 0/calc(11px + (100% - 22px) * var(--v,40) / 100) 100% no-repeat,#1e2636}
.sl1 input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#f4f7ff;border:5px solid #7c5cff;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.sl1 input::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#f4f7ff;border:5px solid #7c5cff}
.sl1 input::-moz-range-track{background:transparent}
.sl1 input:focus-visible{outline-offset:10px}
.sl1-scale{display:flex;justify-content:space-between;color:#64748b;font:600 11px/1 ui-monospace,monospace}

/* 02 Price range with histogram */
.sl2{display:grid;gap:10px;max-width:340px;margin:0 auto}
.sl2-h{display:flex;justify-content:space-between;align-items:baseline}
.sl2-h span{font:700 11px/1 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#93a0b8}
.sl2-h b{font:800 16px/1 system-ui,sans-serif}
.sl2-hist{display:flex;align-items:end;gap:3px;height:56px;padding:0 11px}
.sl2-hist i{flex:1;border-radius:2px 2px 0 0;background:#1e2636;transition:background .2s}
.sl2-hist i.in{background:linear-gradient(#00e5ff,#7c5cff)}
.sl2-r{position:relative;height:22px}
.sl2-t{position:absolute;left:11px;right:11px;top:8px;height:6px;border-radius:3px;
  background:linear-gradient(90deg,#1e2636 var(--a),#22d3ee var(--a),#7c5cff var(--b),#1e2636 var(--b))}
.sl2 input{position:absolute;left:0;top:0;width:100%;height:22px;margin:0;-webkit-appearance:none;appearance:none;background:none;pointer-events:none}
.sl2 input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;cursor:grab;width:22px;height:22px;border-radius:50%;background:#f4f7ff;border:5px solid #22d3ee;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.sl2 input.b::-webkit-slider-thumb{border-color:#7c5cff}
.sl2 input::-moz-range-thumb{pointer-events:auto;cursor:grab;width:12px;height:12px;border-radius:50%;background:#f4f7ff;border:5px solid #22d3ee}
.sl2 input.b::-moz-range-thumb{border-color:#7c5cff}
.sl2 input::-moz-range-track{background:transparent}
.sl2 input:focus-visible{outline:none}
.sl2 input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #00e5ff}
.sl2 input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #00e5ff}

/* 03 Drag-to-status slider */
.sl3{display:grid;gap:18px;padding:0 18px;box-sizing:border-box}
.sl3-card{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid #1e2636;border-radius:12px;background:#0b0f18}
.sl3-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:#121826;font-size:22px}
.sl3-st{font:800 16px/1.2 system-ui,sans-serif}
.sl3-msg{margin:2px 0 0;color:#93a0b8}
.sl3 input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:8px;margin:0;border-radius:8px;cursor:pointer;
  background:linear-gradient(90deg,#22c55e,#00e5ff) 0 0/calc(11px + (100% - 22px) * var(--v,33) / 100) 100% no-repeat,#1e2636}
.sl3 input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#f4f7ff;border:5px solid #00b8d4;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.sl3 input::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#f4f7ff;border:5px solid #00b8d4}
.sl3 input::-moz-range-track{background:transparent}
.sl3 input:focus-visible{outline-offset:10px}
.sl3-ticks{position:relative;height:30px;margin:-6px 11px 0}
.sl3-ticks span{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;
  color:#64748b;font:700 11px/1 system-ui,sans-serif;white-space:nowrap;transition:color .3s}
.sl3-ticks span::before{content:"";width:2px;height:8px;border-radius:1px;background:#334155}
.sl3-ticks span:nth-child(1){left:0}.sl3-ticks span:nth-child(2){left:33.333%}.sl3-ticks span:nth-child(3){left:66.667%}.sl3-ticks span:nth-child(4){left:100%}
.sl3-ticks span.on{color:#f4f7ff}
.sl3-ticks span.on::before{background:#22c55e}

/* 04 Vertical faders */
.sl4{display:flex;justify-content:center;gap:30px}
.sl4-f{display:flex;flex-direction:column;align-items:center;gap:12px}
.sl4-f output{min-width:3ch;text-align:center;font:800 13px/1 ui-monospace,monospace;color:#00e5ff}
.sl4-f span{font:700 10px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#93a0b8}
.sl4-box{position:relative;width:36px;height:160px;border-radius:10px;background:repeating-linear-gradient(#1e2636 0 1px,transparent 1px 16px) center/14px 100% no-repeat}
.sl4-box input{position:absolute;left:50%;top:50%;width:160px;height:8px;margin:0;transform:translate(-50%,-50%) rotate(-90deg);
  -webkit-appearance:none;appearance:none;border-radius:8px;cursor:pointer;
  background:linear-gradient(90deg,transparent calc(var(--v) * 1%),#1e2636 0),linear-gradient(90deg,#22c55e,#eab308 70%,#ef4444)}
.sl4-box input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:32px;border-radius:4px;background:linear-gradient(90deg,#cbd5e1,#f8fafc 45%,#94a3b8);box-shadow:0 3px 8px rgba(0,0,0,.6)}
.sl4-box input::-moz-range-thumb{width:14px;height:32px;border:0;border-radius:4px;background:linear-gradient(90deg,#cbd5e1,#f8fafc 45%,#94a3b8)}
.sl4-box input::-moz-range-track{background:transparent}
.sl4-box input:focus-visible{outline-offset:8px}

/* 05 Rating slider */
.sl5{display:grid;justify-items:center;gap:8px;max-width:300px;margin:0 auto}
.sl5-q{font:700 11px/1 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#93a0b8}
.sl5-face{font-size:46px;line-height:1.1;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.sl5-face.pop{transform:scale(1.18)}
.sl5-l{font:800 16px/1 system-ui,sans-serif}
.sl5 input{-webkit-appearance:none;appearance:none;width:100%;height:10px;margin:8px 0 0;border-radius:10px;cursor:pointer;
  background:linear-gradient(90deg,#ef4444,#f97316,#eab308,#84cc16,#22c55e)}
.sl5 input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#f4f7ff;border:4px solid #0a0d16;box-shadow:0 0 0 2px #f4f7ff,0 3px 10px rgba(0,0,0,.5)}
.sl5 input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#f4f7ff;border:4px solid #0a0d16}
.sl5 input::-moz-range-track{background:transparent}
.sl5 input:focus-visible{outline-offset:10px}
.sl5-ends{width:100%;display:flex;justify-content:space-between;color:#64748b;font:600 11px/1 ui-monospace,monospace}

/* 06 Rotary knob */
.sl6{display:grid;justify-items:center;gap:4px;text-align:center}
.sl6-k{position:relative;width:150px;height:150px;border-radius:50%;cursor:ns-resize;touch-action:none}
.sl6-k:focus-visible{outline-offset:4px}
.sl6-k svg{position:absolute;inset:0;width:100%;height:100%}
.sl6-k circle{fill:none;stroke-width:8;stroke-linecap:round;transform:rotate(135deg);transform-origin:70px 70px}
.sl6-k .t{stroke:#1e2636;stroke-dasharray:75 100}
.sl6-k .v{stroke:#00e5ff;filter:drop-shadow(0 0 4px rgba(0,229,255,.6))}
.sl6-cap{position:absolute;inset:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2a3346,#0b0f18 70%);
  box-shadow:0 8px 18px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);transform:rotate(calc(-135deg + var(--v,65) * 2.7deg))}
.sl6-cap i{position:absolute;left:50%;top:9px;width:4px;height:16px;margin-left:-2px;border-radius:2px;background:#00e5ff;box-shadow:0 0 8px #00e5ff}
.sl6-val{margin-top:8px;font:800 26px/1 ui-monospace,monospace}
.sl6-lbl{color:#93a0b8;font-size:12px}

/* 07 Before / after slider */
.sl7-f{position:relative;height:224px;border-radius:12px;overflow:hidden;border:1px solid #1e2636;--x:50%}
.sl7-a,.sl7-b{position:absolute;inset:0;display:grid;place-items:center}
.sl7-a{background:radial-gradient(circle at 30% 20%,#3a2c1d,#1d160f)}
.sl7-b{background:radial-gradient(circle at 70% 20%,#1b2c44,#0c1420);clip-path:inset(0 0 0 var(--x))}
.sl7-door{position:relative;width:112px;height:172px;border-radius:3px;box-shadow:0 14px 30px rgba(0,0,0,.45)}
.sl7-door::before{content:"";position:absolute;inset:22px 17px;border-radius:2px}
.sl7-a .sl7-door{background:radial-gradient(rgba(70,40,12,.35) .7px,transparent 1.2px) 0 0/7px 7px,radial-gradient(rgba(255,236,200,.22) .7px,transparent 1.2px) 3px 4px/9px 9px,#b88a52}
.sl7-a .sl7-door::before{box-shadow:inset 0 0 0 2px rgba(90,55,20,.4),inset 3px 3px 6px rgba(0,0,0,.25)}
.sl7-b .sl7-door{background:linear-gradient(135deg,#355f8c,#1f4068)}
.sl7-b .sl7-door::before{box-shadow:inset 3px 3px 6px rgba(0,0,0,.35),inset -2px -2px 4px rgba(255,255,255,.12)}
.sl7-b .sl7-door::after{content:"";position:absolute;right:9px;top:50%;width:9px;height:9px;margin-top:-4px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fde68a,#b45309)}
.sl7-a span,.sl7-b span{position:absolute;top:10px;padding:5px 9px;border-radius:999px;background:rgba(7,9,15,.7);font:700 10px/1 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase}
.sl7-a span{left:10px}.sl7-b span{right:10px}
.sl7-h{position:absolute;top:0;bottom:0;left:var(--x);width:3px;margin-left:-1.5px;background:#f4f7ff;pointer-events:none}
.sl7-h::after{content:"\2039\00a0\203A";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  display:grid;place-items:center;background:#f4f7ff;color:#0a0d16;font:800 16px/1 system-ui,sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.sl7 input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.sl7-f:has(input:focus-visible) .sl7-h::after{box-shadow:0 0 0 3px #00e5ff}

/* 08 Slide to place order */
.sl8{display:grid;gap:12px;max-width:360px;margin:0 auto}
.sl8-sum{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sl8-sum span{color:#93a0b8;font-size:12px}
.sl8-sum b{font:800 18px/1 ui-monospace,monospace}
.sl8-t{position:relative;height:58px;border-radius:29px;background:#0b0f18;box-shadow:inset 0 0 0 1px #1e2636;overflow:hidden;--x:0px;transition:background .3s}
.sl8-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--x) + 58px);border-radius:29px;background:linear-gradient(90deg,#7c5cff,#00b8d4)}
.sl8-txt{position:absolute;inset:0;display:grid;place-items:center;padding-left:44px;font:700 14px/1 system-ui,sans-serif;color:transparent;
  background:linear-gradient(90deg,#64748b 40%,#f4f7ff 50%,#64748b 60%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;
  animation:sl8s 2.2s linear infinite;opacity:calc(1 - var(--r,0) * 1.6)}
@keyframes sl8s{from{background-position:100% 0}to{background-position:-100% 0}}
.sl8-k{position:absolute;left:4px;top:4px;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#f4f7ff;color:#4c1d95;
  font:800 26px/1 system-ui,sans-serif;cursor:grab;touch-action:none;transform:translateX(var(--x));box-shadow:0 4px 12px rgba(0,0,0,.5)}
.sl8-k:active{cursor:grabbing}
.sl8-t.snap .sl8-k{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.sl8-t.snap .sl8-fill{transition:width .35s cubic-bezier(.3,1.4,.5,1)}
.sl8.ok .sl8-fill{background:#16a34a}
.sl8.ok .sl8-k{color:#15803d}
.sl8.ok .sl8-txt{background:none;color:#dcfce7;animation:none;padding:0 60px 0 0;opacity:1}
.sl8-hint{margin:0;color:#64748b;font-size:11px;text-align:center}

/* 09 Thermostat dial */
.sl9{display:grid;justify-items:center;gap:6px;text-align:center}
.sl9-d{position:relative;width:184px;aspect-ratio:1;border-radius:50%;touch-action:none;cursor:pointer;
  background:radial-gradient(circle,hsl(var(--h,150) 90% 50% / .2),transparent 62%)}
.sl9-d:focus-visible{outline-offset:2px}
.sl9-d svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sl9-d .t,.sl9-d .v{fill:none;stroke-width:12;stroke-linecap:round;transform:rotate(135deg);transform-origin:100px 100px}
.sl9-d .t{stroke:#1e2636;stroke-dasharray:75 100}
.sl9-d .v{stroke:hsl(var(--h,150) 90% 55%)}
.sl9-d .h{fill:#f4f7ff;stroke:hsl(var(--h,150) 90% 55%);stroke-width:5;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.sl9-c{position:absolute;inset:0;display:grid;place-content:center;gap:6px}
.sl9-n{font:200 48px/1 system-ui,sans-serif;color:hsl(var(--h,150) 90% 78%)}
.sl9-m{font:700 10px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#93a0b8}
.sl9-l{color:#93a0b8;font-size:12px}

/* 10 Rubber band slider */
.sl10{display:grid;gap:6px;max-width:520px;margin:0 auto}
.sl10-h{display:flex;justify-content:space-between;align-items:baseline}
.sl10-h span{font:700 11px/1 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#93a0b8}
.sl10-v{font:800 24px/1 ui-monospace,monospace}
.sl10-w{touch-action:none;cursor:grab}
.sl10-w:active{cursor:grabbing}
.sl10-w svg{display:block;width:100%;height:auto;overflow:visible}
.sl10-s{fill:none;stroke:hsl(calc(190 - var(--t,0) * 190) 90% 60%);stroke-width:4;stroke-linecap:round}
.sl10-a{fill:#334155}
.sl10-k{fill:#f4f7ff;stroke:#7c5cff;stroke-width:4;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.sl10 p{margin:0;color:#64748b;font-size:12px;text-align:center}

/* 11 Wood stain picker */
.sl11{display:grid;gap:16px;max-width:340px;margin:0 auto}
.sl11-top{display:flex;align-items:center;gap:18px}
.sl11-door{flex:none;position:relative;width:66px;height:104px;border-radius:3px;box-shadow:0 10px 24px rgba(0,0,0,.45);
  background:repeating-linear-gradient(92deg,rgba(0,0,0,.14) 0 2px,transparent 2px 7px,rgba(255,255,255,.07) 7px 8px,transparent 8px 13px),var(--c,#c68e3f)}
.sl11-door i{position:absolute;inset:12px 10px;border-radius:2px;box-shadow:inset 2px 2px 5px rgba(0,0,0,.4),inset -1px -1px 3px rgba(255,255,255,.12)}
.sl11-top small{display:block;font:700 10px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#93a0b8}
.sl11-n{display:block;margin:6px 0 5px;font:800 20px/1.1 system-ui,sans-serif}
.sl11-hex{color:#93a0b8;font:600 12px/1 ui-monospace,monospace}
.sl11 input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:14px;margin:0;border-radius:7px;cursor:pointer;
  background:linear-gradient(90deg,#e3c9a1,#c68e3f,#9a4a2b,#5c3b22,#2b1b12)}
.sl11 input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:var(--c,#c68e3f);border:4px solid #f4f7ff;box-shadow:0 3px 10px rgba(0,0,0,.6)}
.sl11 input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--c,#c68e3f);border:4px solid #f4f7ff}
.sl11 input::-moz-range-track{background:transparent}
.sl11 input:focus-visible{outline-offset:8px}
.sl11-tk{display:flex;justify-content:space-between;color:#64748b;font:600 10px/1 ui-monospace,monospace;transition:color .2s}
.sl11-tk span.on{color:#f4f7ff}

/* 12 Tape measure scrubber */
.sl12{display:grid;gap:12px}
.sl12-h{text-align:center}
.sl12-h small{display:block;font:700 10px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#93a0b8}
.sl12-v{display:block;margin:6px 0 3px;font:800 30px/1 ui-monospace,monospace}
.sl12-f{color:#93a0b8;font-size:12px}
.sl12-view{position:relative;border-radius:10px;overflow:hidden;background:linear-gradient(#f2cc66,#d9a93a);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 6px 18px rgba(0,0,0,.4)}
.sl12-view::before,.sl12-view::after{content:"";position:absolute;top:0;bottom:0;z-index:1;width:44px;pointer-events:none}
.sl12-view::before{left:0;background:linear-gradient(90deg,#d9a93a,transparent)}
.sl12-view::after{right:0;background:linear-gradient(-90deg,#d9a93a,transparent)}
.sl12-sc{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;outline-offset:-3px}
.sl12-sc::-webkit-scrollbar{display:none}
.sl12-sc.drag{scroll-snap-type:none;cursor:grabbing}
.sl12-sc>i{flex:none}
.sl12-strip{flex:none;position:relative;display:flex;height:64px;
  background:linear-gradient(90deg,transparent 5px,#1a1206 5px 7px,transparent 7px) 0 0/144px 34px repeat-x,
    linear-gradient(90deg,transparent 5px,#3b2a0e 5px 7px,transparent 7px) 0 0/72px 24px repeat-x,
    linear-gradient(90deg,transparent 5.5px,#5b4516 5.5px 6.5px,transparent 6.5px) 0 0/12px 14px repeat-x}
.sl12-strip>span{flex:none;width:12px;scroll-snap-align:center}
.sl12-strip>b{position:absolute;top:40px;transform:translateX(-50%);font:800 13px/1 ui-monospace,monospace;color:#1a1206}
.sl12-needle{position:absolute;left:50%;top:0;bottom:0;z-index:2;width:2px;margin-left:-1px;background:#dc2626;pointer-events:none}
.sl12-needle::before{content:"";position:absolute;left:50%;top:0;margin-left:-7px;border:7px solid transparent;border-top-color:#dc2626}

/* 13 Waveform scrubber */
.sl13{display:grid;gap:16px}
.sl13-top{display:flex;align-items:center;gap:12px}
.sl13-play{flex:none;appearance:none;border:0;cursor:pointer;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#7c5cff,#00b8d4);color:#fff;font:800 14px/1 system-ui,sans-serif}
.sl13-top b{display:block;font:700 14px/1.2 system-ui,sans-serif}
.sl13-tm{font:600 12px/1.4 ui-monospace,monospace;color:#93a0b8}
.sl13-w{position:relative;height:66px;--v:0}
.sl13-bars{position:absolute;inset:0;display:flex;align-items:center;gap:2px}
.sl13-bars i{flex:1;min-height:3px;border-radius:2px;background:#334155}
.sl13-bars.b{clip-path:inset(0 calc(100% - var(--v) * 1%) 0 0)}
.sl13-bars.b i{background:linear-gradient(#00e5ff,#7c5cff)}
.sl13-ph{position:absolute;top:-5px;bottom:-5px;left:calc(var(--v) * 1%);width:2px;margin-left:-1px;border-radius:1px;background:#f4f7ff;pointer-events:none}
.sl13 input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sl13-w:has(input:focus-visible) .sl13-ph{box-shadow:0 0 0 3px #00e5ff}

/* 14 Tip jar slider */
.sl14{display:flex;align-items:center;gap:18px;max-width:380px;margin:0 auto}
.sl14-jar{position:relative;flex:none;width:80px;height:106px;overflow:hidden;border-radius:10px 10px 22px 22px;
  background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 40%,rgba(255,255,255,.1));box-shadow:inset 0 0 0 2px rgba(148,163,184,.45)}
.sl14-lid{position:absolute;left:0;right:0;top:0;height:9px;background:#475569}
.sl14-coins i{position:absolute;left:calc(50% - 17px + var(--x));bottom:calc(6px + var(--k) * 7px);width:34px;height:10px;border-radius:50%;
  background:radial-gradient(ellipse at 40% 35%,#fef08a,#eab308 55%,#a16207);box-shadow:0 1px 0 #713f12;animation:sl14d .45s cubic-bezier(.5,0,.7,1.3) backwards}
@keyframes sl14d{from{transform:translateY(-110px)}}
.sl14-r{flex:1;min-width:0;display:grid;gap:12px}
.sl14-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.sl14-h span{font:700 11px/1 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#93a0b8}
.sl14-p{font:800 24px/1 ui-monospace,monospace;color:#fbbf24}
.sl14 input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:8px;margin:0;border-radius:8px;cursor:pointer;
  background:linear-gradient(90deg,#f59e0b,#fde047) 0 0/calc(11px + (100% - 22px) * var(--v,50) / 100) 100% no-repeat,#1e2636}
.sl14 input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#f4f7ff;border:5px solid #f59e0b;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.sl14 input::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#f4f7ff;border:5px solid #f59e0b}
.sl14 input::-moz-range-track{background:transparent}
.sl14 input:focus-visible{outline-offset:10px}
.sl14-s{color:#93a0b8;font-size:12px;line-height:1.5}
.sl14-amt{color:#f4f7ff}
.sl14-say{color:#fde68a;font-weight:700}

/* 15 Delivery window picker */
.sl15{display:grid;gap:10px}
.sl15-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.sl15-h small{flex-basis:100%;font:700 10px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#93a0b8}
.sl15-v{font:800 20px/1.1 system-ui,sans-serif}
.sl15-fee{padding:5px 9px;border-radius:999px;background:rgba(34,197,94,.15);color:#4ade80;font:700 11px/1 system-ui,sans-serif}
.sl15-fee.pay{background:rgba(251,191,36,.15);color:#fbbf24}
.sl15-t{position:relative;height:48px;border-radius:10px;touch-action:none;cursor:pointer;box-shadow:inset 0 0 0 1px #1e2636;
  background:repeating-linear-gradient(90deg,transparent 0 calc(100% / 12 - 1px),#1e2636 calc(100% / 12 - 1px) calc(100% / 12)),
    linear-gradient(90deg,#0b0f18 75%,rgba(251,191,36,.1) 75%)}
.sl15-blk{position:absolute;top:4px;bottom:4px;left:calc(var(--s,5) / 12 * 100%);width:calc((var(--e,7) - var(--s,5)) / 12 * 100%);border-radius:8px;cursor:grab;
  background:linear-gradient(135deg,rgba(124,92,255,.9),rgba(0,184,212,.9));box-shadow:0 4px 14px rgba(0,0,0,.45)}
.sl15-blk:active{cursor:grabbing}
.sl15-hd{position:absolute;top:0;bottom:0;width:14px;cursor:ew-resize}
.sl15-hd.l{left:0}.sl15-hd.r{right:0}
.sl15-hd::after{content:"";position:absolute;left:6px;top:28%;bottom:28%;width:2px;border-radius:1px;background:rgba(255,255,255,.85)}
.sl15-ax{display:flex;justify-content:space-between;color:#64748b;font:600 10px/1 ui-monospace,monospace}

/* 16 Control center pills */
.sl16{display:flex;justify-content:center;gap:16px;padding:12px 8px;border-radius:18px;
  background:radial-gradient(circle at 50% 35%,rgba(253,224,71,calc(var(--sun,.7) * .28)),transparent 70%)}
.sl16-c{display:grid;justify-items:center;gap:9px;font:700 10px/1 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#93a0b8}
.sl16-p{position:relative;width:64px;height:164px;border-radius:22px;overflow:hidden;cursor:ns-resize;touch-action:none;background:rgba(148,163,184,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.sl16-p:focus-visible{outline-offset:4px}
.sl16-f{position:absolute;left:0;right:0;bottom:0;height:calc(var(--v,50) * 1%);background:#f4f7ff}
.sl16-p b{position:absolute;left:0;right:0;top:12px;text-align:center;font:800 13px/1 ui-monospace,monospace;color:#fff;mix-blend-mode:difference}
.sl16-ic{position:absolute;left:0;right:0;bottom:14px;margin:auto;width:26px;height:26px;display:grid;place-items:center;font-size:22px;line-height:1}
.sl16-p[data-k=fan] .sl16-ic{animation:sl16r 1s linear infinite}
@keyframes sl16r{to{transform:rotate(360deg)}}

/* 17 Speed and feed pad */
.sl17{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 22px}
.sl17-pad{position:relative;flex:none;width:168px;height:168px;border-radius:12px;overflow:hidden;cursor:crosshair;touch-action:none;
  background:linear-gradient(#1e2636 1px,transparent 1px) 0 0/100% 25%,linear-gradient(90deg,#1e2636 1px,transparent 1px) 0 0/25% 100%,#0b0f18;box-shadow:inset 0 0 0 1px #334155}
.sl17-pad svg{position:absolute;inset:0;width:100%;height:100%}
.sl17-pad polygon{fill:rgba(34,197,94,.13)}
.sl17-x,.sl17-y{position:absolute;background:rgba(255,255,255,.18);pointer-events:none}
.sl17-x{top:0;bottom:0;width:1px;left:calc(var(--x,.62) * 100%)}
.sl17-y{left:0;right:0;height:1px;top:calc((1 - var(--y,.5)) * 100%)}
.sl17-k{position:absolute;left:calc(var(--x,.62) * 100%);top:calc((1 - var(--y,.5)) * 100%);width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  background:var(--c,#22c55e);box-shadow:0 0 0 4px rgba(255,255,255,.12),0 0 18px var(--c,#22c55e);pointer-events:none;transition:background .2s,box-shadow .2s}
.sl17-ax{position:absolute;font:700 9px/1 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#64748b;pointer-events:none}
.sl17-ax.a1{right:6px;bottom:6px}.sl17-ax.a2{left:6px;top:6px}
.sl17-out{display:grid;gap:9px;min-width:150px}
.sl17-out small{display:block;margin-bottom:3px;font:700 10px/1 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:#64748b}
.sl17-out b{font:800 16px/1 ui-monospace,monospace}
.sl17-st{margin:2px 0 0;padding:7px 11px;border-radius:8px;background:color-mix(in srgb,var(--c,#22c55e) 15%,transparent);color:var(--c,#22c55e);font:700 12px/1.2 system-ui,sans-serif}

/* 18 Door thickness gauge */
.sl18{display:grid;gap:12px;max-width:360px;margin:0 auto}
.sl18-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sl18-v{font:800 30px/1 ui-monospace,monospace}
.sl18-w{color:#93a0b8;font-size:12px;line-height:1.4;text-align:right}
.sl18-x{display:block;width:100%;height:auto}
.sl18 .bd{transform-box:fill-box;transform-origin:center;transform:scaleY(var(--s,.6));transition:transform .45s cubic-bezier(.3,1.3,.5,1)}
.sl18 .bar{fill:#64748b}
.sl18 .jt rect,.sl18 .jb rect{fill:#cbd5e1}
.sl18 .jt{transform:translateY(calc((1 - var(--s,.6)) * 40px));transition:transform .45s cubic-bezier(.3,1.3,.5,1)}
.sl18 .jb{transform:translateY(calc((var(--s,.6) - 1) * 40px));transition:transform .45s cubic-bezier(.3,1.3,.5,1)}
.sl18 input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:8px;margin:0;border-radius:8px;cursor:pointer;
  background:linear-gradient(90deg,#b88a52,#e9c99b) 0 0/calc(11px + (100% - 22px) * var(--v,33) / 100) 100% no-repeat,#1e2636}
.sl18 input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#f4f7ff;border:5px solid #b88a52;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.sl18 input::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#f4f7ff;border:5px solid #b88a52}
.sl18 input::-moz-range-track{background:transparent}
.sl18 input:focus-visible{outline-offset:10px}
.sl18-tk{display:flex;justify-content:space-between;color:#64748b;font:600 10px/1 ui-monospace,monospace}

/* 19 Plank width room preview */
.fs19{display:grid;gap:12px}
.fs19-h{display:flex;align-items:center;gap:16px;min-height:52px}
.fs19-big{display:grid;flex:none;min-width:92px}
.fs19-v{font:800 34px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;color:#fde3b8}
.fs19-k{font:700 10px/1.4 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#2dd4bf}
.fs19-d{margin:0;color:#93a0b8;font-size:13px;line-height:1.45}
.fs19-c{display:block;width:100%;aspect-ratio:2.1/1;border-radius:12px;background:#0f131b;box-shadow:inset 0 0 0 1px #222a38}
.fs19-r{display:grid;gap:4px}
.fs19 input{-webkit-appearance:none;appearance:none;width:100%;height:30px;margin:0;border-radius:4px;cursor:pointer;
  background:repeating-linear-gradient(90deg,rgba(28,25,23,.85) 0 1.5px,transparent 1.5px calc(100%/9)) 8px 0/calc(100% - 15px) 55% no-repeat,
  repeating-linear-gradient(90deg,rgba(28,25,23,.6) 0 1px,transparent 1px calc(100%/36)) 8px 0/calc(100% - 15px) 30% no-repeat,linear-gradient(#fde047,#eab308);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.4)}
.fs19 input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:40px;border-radius:3px;background:linear-gradient(90deg,#9ca3af,#f3f4f6 45%,#6b7280);box-shadow:0 3px 8px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.25);
  border-left:0;background-image:linear-gradient(90deg,transparent 7px,#dc2626 7px 9px,transparent 9px),linear-gradient(90deg,#9ca3af,#f3f4f6 45%,#6b7280)}
.fs19 input::-moz-range-thumb{width:16px;height:40px;border:0;border-radius:3px;background:linear-gradient(90deg,transparent 7px,#dc2626 7px 9px,transparent 9px),linear-gradient(90deg,#9ca3af,#f3f4f6 45%,#6b7280);box-shadow:0 3px 8px rgba(0,0,0,.6)}
.fs19 input::-moz-range-track{background:transparent}
.fs19 input:focus-visible{outline:2px solid #00e5ff;outline-offset:4px}
.fs19-tk{position:relative;height:12px;font:700 10px/1 ui-monospace,monospace;color:#64748b}
.fs19-tk span{position:absolute;top:0;left:calc(8px + (100% - 16px) * var(--k));transform:translateX(-50%)}
.fs19-f{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#93a0b8;font-size:12px}
.fs19-f b{color:#f4f7ff;font:800 14px/1 ui-monospace,monospace;margin-left:4px}
@container (max-width:460px){.fs19-h{flex-direction:column;align-items:flex-start;gap:6px}}

/* 20 Wear layer cross-section */
.fs20{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.fs20-l{flex:1.15 1 280px;min-width:0}
.fs20-r{flex:1 1 230px;min-width:0}
.fs20-s{flex:1 1 100%}
.fs20-l{display:grid;gap:2px;justify-items:center}
.fs20-x{display:block;width:100%;height:auto;overflow:visible;touch-action:manipulation;cursor:zoom-in}
.fs20-x text{font:700 8.5px/1 system-ui,sans-serif;fill:#cbd5e1}
.fs20-x text.m{font:600 7px/1 ui-monospace,monospace;fill:#64748b}
.fs20-hint{font:600 10px/1 ui-monospace,monospace;color:#475569;letter-spacing:.06em}
.fs20-h{display:flex;align-items:baseline;gap:8px}
.fs20-v{font:800 40px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;color:#a5f3fc}
.fs20-h span{color:#93a0b8;font-size:13px}
.fs20-n{margin:4px 0 10px;font:800 14px/1.2 system-ui,sans-serif}
.fs20-u{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.fs20-u li{padding:5px 9px;border-radius:999px;border:1px solid #1e2636;color:#475569;font:700 11px/1 system-ui,sans-serif;transition:.3s}
.fs20-u li.on{border-color:rgba(45,212,191,.5);background:rgba(45,212,191,.1);color:#5eead4}
.fs20-t{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.fs20-pad{flex:1 1 100%;position:relative;height:64px;border-radius:8px;overflow:hidden;background-size:cover;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),0 6px 14px rgba(0,0,0,.4)}
.fs20-pad::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 40%,transparent 70%,rgba(255,255,255,.08))}
.fs20-pad svg{position:absolute;inset:0;width:100%;height:100%}
.fs20-paw{position:absolute;left:-30px;top:18px;width:26px;height:26px;opacity:0;
  background:radial-gradient(circle at 50% 70%,#1f1a17 0 7px,transparent 7.5px),radial-gradient(circle at 22% 38%,#1f1a17 0 3.4px,transparent 3.8px),radial-gradient(circle at 42% 22%,#1f1a17 0 3.4px,transparent 3.8px),radial-gradient(circle at 62% 22%,#1f1a17 0 3.4px,transparent 3.8px),radial-gradient(circle at 80% 38%,#1f1a17 0 3.4px,transparent 3.8px);transform:rotate(90deg)}
.fs20-go{appearance:none;cursor:pointer;white-space:nowrap;border:1px solid #334155;border-radius:999px;padding:8px 13px;background:#121826;color:#f4f7ff;font:700 12px/1 system-ui,sans-serif}
.fs20-go:hover{border-color:#2dd4bf}
.fs20-verdict{flex:1;min-width:120px;font:700 11px/1.3 system-ui,sans-serif;color:#93a0b8;text-align:right}
.fs20 input{-webkit-appearance:none;appearance:none;width:100%;height:22px;margin:0;cursor:pointer;background:linear-gradient(to top left,#2dd4bf 49.5%,transparent 50%) 0 50%/100% 100% no-repeat,linear-gradient(#1e2636,#1e2636) 0 100%/100% 3px no-repeat}
.fs20 input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#f4f7ff;border:5px solid #0f766e;box-shadow:0 3px 10px rgba(0,0,0,.6)}
.fs20 input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#f4f7ff;border:5px solid #0f766e}
.fs20 input::-moz-range-track{background:transparent}
.fs20 input:focus-visible{outline:2px solid #00e5ff;outline-offset:4px}
.fs20-tk{position:relative;height:14px;margin-top:4px;font:700 10px/1 ui-monospace,monospace;color:#64748b}
.fs20-tk span{position:absolute;left:calc(12px + (100% - 24px) * var(--k));transform:translateX(-50%);white-space:nowrap}
.fs20-tk span:last-child{transform:translateX(-80%)}

/* 21 Budget sample rack */
.fs21{display:grid;gap:12px}
.fs21-h{display:flex;justify-content:space-between;align-items:end;gap:10px;flex-wrap:wrap}
.fs21-h small{display:block;margin-bottom:6px;font:700 10px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#93a0b8}
.fs21-v{font:800 24px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.fs21-c{padding:7px 12px;border-radius:999px;background:rgba(45,212,191,.12);color:#5eead4;font:700 12px/1 system-ui,sans-serif}
.fs21-rack{display:grid;grid-template-columns:repeat(6,1fr);gap:16px 10px;padding:4px 8px 6px;position:relative}
.fs21-rack::before,.fs21-rack::after{content:"";position:absolute;left:0;right:0;height:5px;border-radius:3px;background:linear-gradient(#fde68a,#b45309);box-shadow:0 2px 4px rgba(0,0,0,.6);z-index:2}
.fs21-rack::before{top:2px}.fs21-rack::after{top:calc(50% + 8px)}
.fs21-s{position:relative;padding-top:12px;perspective:500px}
.fs21-s::before{content:"";position:absolute;left:50%;top:0;width:8px;height:12px;margin-left:-4px;border:2px solid #cbd5e1;border-bottom:0;border-radius:6px 6px 0 0;z-index:3}
.fs21-sw{transform-origin:50% -8px;will-change:transform}
.fs21-cd{position:relative;aspect-ratio:3/4.2;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.4,.5,1);cursor:pointer}
.fs21-s.out .fs21-cd{transform:rotateY(180deg)}
.fs21-f,.fs21-b{position:absolute;inset:0;border-radius:4px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:0 6px 12px rgba(0,0,0,.5)}
.fs21-f{background-size:cover}
.fs21-f::before{content:"";position:absolute;left:50%;top:6px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#0a0d16;box-shadow:inset 0 1px 1px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.3)}
.fs21-f::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.22),transparent 40%,transparent 70%,rgba(0,0,0,.18))}
.fs21-f span{position:absolute;left:0;right:0;bottom:0;padding:4px 3px;background:rgba(10,13,22,.82);font:700 8.5px/1.15 system-ui,sans-serif;color:#f4f7ff;text-align:center;z-index:1}
.fs21-f span b{display:block;color:#5eead4;font:800 10px/1.1 ui-monospace,monospace}
.fs21-b{transform:rotateY(180deg);display:grid;place-items:center;text-align:center;background:repeating-linear-gradient(90deg,#6f5434 0 2px,#7a5d3a 2px 5px);color:#e9d8bd;font:800 10px/1.2 ui-monospace,monospace;padding:4px}
.fs21-b small{display:block;font:700 7.5px/1.2 system-ui,sans-serif}
.fs21-rg{display:grid;gap:4px}
.fs21-hist{position:relative;height:16px;margin:0 11px}
.fs21-hist i{position:absolute;bottom:0;width:6px;height:var(--h);margin-left:-3px;border-radius:2px 2px 0 0;background:var(--c);opacity:.35;transition:opacity .3s}
.fs21-hist i.on{opacity:1}
.fs21-tr{position:relative;height:24px}
.fs21-tr::before{content:"";position:absolute;left:11px;right:11px;top:10px;height:4px;border-radius:4px;background:#1e2636}
.fs21-fill{position:absolute;top:10px;height:4px;border-radius:4px;background:linear-gradient(90deg,#2dd4bf,#a7f3d0);left:calc(11px + (100% - 22px) * var(--a,0));width:calc((100% - 22px) * (var(--b,1) - var(--a,0)))}
.fs21-tr input{-webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:24px;margin:0;background:none;pointer-events:none}
.fs21-tr input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;cursor:grab;width:22px;height:22px;border-radius:50%;background:#f4f7ff;border:5px solid #0d9488;box-shadow:0 2px 10px rgba(0,0,0,.6)}
.fs21-tr input::-moz-range-thumb{pointer-events:auto;cursor:grab;width:12px;height:12px;border-radius:50%;background:#f4f7ff;border:5px solid #0d9488}
.fs21-tr input::-moz-range-track{background:transparent}
.fs21-tr input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #00e5ff}
.fs21-tk{position:relative;height:12px;font:700 10px/1 ui-monospace,monospace;color:#64748b}
.fs21-tk span{position:absolute;left:calc(11px + (100% - 22px) * var(--k));transform:translateX(-50%)}
.fs21-sum{color:#93a0b8;font-size:12px;text-align:center;min-height:16px}
@container (max-width:460px){.fs21-rack{gap:14px 6px;padding:4px 2px}.fs21-f span{font-size:7px}.fs21-f span b{font-size:8.5px}.fs21-b{font-size:8px}}

/* 22 Stain darkness by species */
.fs22{display:grid;gap:10px;max-width:420px;margin:0 auto}
.fs22-h{display:flex;justify-content:space-between;align-items:end;gap:10px}
.fs22-h small{display:block;margin-bottom:5px;font:700 10px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#93a0b8}
.fs22-n{font:800 20px/1.1 system-ui,sans-serif}
.fs22-hex{font:700 11px/1 ui-monospace,monospace;color:#64748b}
.fs22-bw{position:relative;border-radius:6px;box-shadow:0 14px 26px -10px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.5)}
.fs22-bw canvas{display:block;width:100%;aspect-ratio:3.4/1;border-radius:6px}
.fs22-bw::after{content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;box-shadow:inset 0 2px 0 rgba(255,255,255,.22),inset 0 -3px 0 rgba(0,0,0,.35),inset 2px 0 0 rgba(255,255,255,.08),inset -2px 0 0 rgba(0,0,0,.25)}
.fs22-k{display:flex;gap:4px;padding:4px;border-radius:999px;background:#0b0f18;border:1px solid #1e2636;justify-self:center}
.fs22-k button{appearance:none;cursor:pointer;border:0;border-radius:999px;padding:7px 13px;background:none;color:#93a0b8;font:700 12px/1 system-ui,sans-serif;transition:.25s}
.fs22-k button[aria-checked="true"]{background:#f4f7ff;color:#0a0d16}
.fs22 input{-webkit-appearance:none;appearance:none;width:100%;height:16px;margin:4px 0 0;border-radius:8px;cursor:pointer;
  background:linear-gradient(90deg,#e8d5b5,#d4964a 17%,#96603a 33%,#784c2a 50%,#583820 67%,#3a261a 83%,#1e1816);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.fs22 input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:34px;border-radius:5px 5px 9px 9px;
  background:linear-gradient(#c08a52 0 40%,#e5e7eb 40% 52%,#f5f0e6 52%);box-shadow:0 4px 10px rgba(0,0,0,.6),inset 0 -6px 0 var(--st,#784c2a)}
.fs22 input::-moz-range-thumb{width:22px;height:34px;border:0;border-radius:5px 5px 9px 9px;background:linear-gradient(#c08a52 0 40%,#e5e7eb 40% 52%,#f5f0e6 52%);box-shadow:0 4px 10px rgba(0,0,0,.6),inset 0 -6px 0 var(--st,#784c2a)}
.fs22 input::-moz-range-track{background:transparent}
.fs22 input:focus-visible{outline:2px solid #00e5ff;outline-offset:6px}
.fs22-tk{position:relative;height:12px;font:700 9.5px/1 ui-monospace,monospace;color:#64748b}
.fs22-tk span{position:absolute;left:calc(11px + (100% - 22px) * var(--k));transform:translateX(-50%);white-space:nowrap}
.fs22-tk span:first-child{transform:translateX(-11px)}.fs22-tk span:last-child{transform:translateX(calc(-100% + 11px))}
.fs22-tip{margin:0;min-height:32px;color:#93a0b8;font-size:12px;line-height:1.4;text-align:center}

/* 23 Room size to boxes */
.fs23{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.fs23-out{flex:1 1 100%}
.fs23-ctl{flex:1 1 230px;min-width:0}
.fs23-room,.fs23-stack{display:block;width:100%;height:auto;overflow:visible}
.fs23 .fs23-room{flex:1.2 1 280px;width:auto;min-width:0}
.fs23-dim path{stroke:#2dd4bf;stroke-width:.9;fill:none}
.fs23-dim text{font:800 9px/1 ui-monospace,monospace;fill:#5eead4;text-anchor:middle}
.fs23-area{font:800 10px/1 system-ui,sans-serif;fill:#fff;text-anchor:middle;paint-order:stroke;stroke:rgba(10,13,22,.7);stroke-width:3px}
.fs23-bn{font:800 12px/1 ui-monospace,monospace;fill:#fbbf24}
.fs23-ctl{display:grid;gap:12px}
.fs23-ctl label{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center;font:700 11px/1 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:#93a0b8}
.fs23-ctl label b{justify-self:end;color:#f4f7ff;font-size:15px;letter-spacing:0}
.fs23-ctl input{grid-column:1/-1;-webkit-appearance:none;appearance:none;width:100%;height:6px;margin:6px 0;border-radius:6px;cursor:pointer;
  background:linear-gradient(90deg,#2dd4bf calc(var(--f,50%)),#1e2636 0)}
.fs23-ctl input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:5px;background:linear-gradient(135deg,#f8fafc,#cbd5e1);border:2px solid #0f766e;box-shadow:0 3px 8px rgba(0,0,0,.5)}
.fs23-ctl input::-moz-range-thumb{width:18px;height:18px;border-radius:5px;background:#f1f5f9;border:2px solid #0f766e}
.fs23-ctl input:focus-visible{outline:2px solid #00e5ff;outline-offset:6px}
.fs23-k{display:flex;gap:4px;padding:4px;border-radius:999px;background:#0b0f18;border:1px solid #1e2636}
.fs23-k button{flex:1;appearance:none;cursor:pointer;border:0;border-radius:999px;padding:8px 10px;background:none;color:#93a0b8;font:700 12px/1 system-ui,sans-serif;transition:.25s}
.fs23-k button[aria-checked="true"]{background:#2dd4bf;color:#042f2e}
.fs23-out{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0}
.fs23-out div{padding:10px 12px;border:1px solid #1e2636;border-radius:10px;background:#0b0f18}
.fs23-out dt{font:700 9.5px/1.2 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.fs23-out dd{margin:5px 0 0;font:800 16px/1.1 ui-monospace,monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.fs23-out dd small{display:block;margin-top:3px;font:600 10px/1 ui-monospace,monospace;color:#64748b}
.fs23-out .o3{color:#fbbf24}
@container (max-width:460px){.fs23-out{grid-template-columns:1fr 1fr}}

/* 24 Door width cabinet run */
.ks24{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.ks24-run{flex:1.3 1 280px;min-width:0;display:block;width:100%;height:auto;max-height:340px;overflow:visible;filter:drop-shadow(0 14px 18px rgba(0,0,0,.45))}
.ks24-p{flex:1 1 220px;min-width:0;display:grid;gap:10px}
.ks24-h small{display:block;margin-bottom:5px;font:700 10px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#93a0b8}
.ks24-v{font:800 38px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;color:#fde3b8}
.ks24-d{margin:0;min-height:36px;color:#93a0b8;font-size:12.5px;line-height:1.45}
.ks24-dr{transform-box:fill-box}
.ks24-dr[data-h="l"]{transform-origin:left center}.ks24-dr[data-h="r"]{transform-origin:right center}
.ks24-face{stroke:#7a5a34;stroke-width:.6;transition:opacity .3s}
.ks24-pull{fill:#1f2937;stroke:#9ca3af;stroke-width:.35}
.ks24-cup{fill:rgba(45,212,191,.18);stroke:#2dd4bf;stroke-width:.6;stroke-dasharray:1.4 1;opacity:0;transition:opacity .3s}
.ks24[data-x] .ks24-cup{opacity:1}
.ks24[data-x] .ks24-face{opacity:.45}
.ks24-fill{fill:url(#ks24-hatch);opacity:.85}
.ks24-dim path{stroke:#2dd4bf;stroke-width:.8;fill:none}
.ks24-dim text{font:800 8px/1 ui-monospace,monospace;fill:#5eead4;text-anchor:middle}
.ks24-dim text.ks24-am{fill:#fbbf24}
.ks24 input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:14px;margin:0;border-radius:3px;cursor:pointer;
  background:repeating-linear-gradient(90deg,rgba(122,90,52,.35) 0 1px,transparent 1px 7px),linear-gradient(#e8cfa4,#c99f68 60%,#a77d48);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 8px rgba(0,0,0,.5)}
.ks24 input::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:34px;border-radius:6px;background:linear-gradient(90deg,#78350f,#fcd34d 45%,#b45309);box-shadow:0 4px 10px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.3)}
.ks24 input::-moz-range-thumb{width:12px;height:34px;border:0;border-radius:6px;background:linear-gradient(90deg,#78350f,#fcd34d 45%,#b45309);box-shadow:0 4px 10px rgba(0,0,0,.6)}
.ks24 input::-moz-range-track{background:transparent}
.ks24 input:focus-visible{outline:2px solid #00e5ff;outline-offset:8px}
.ks24-r{display:grid;gap:6px;padding-top:10px}
.ks24-tk{position:relative;height:12px;font:700 10px/1 ui-monospace,monospace;color:#64748b}
.ks24-tk span{position:absolute;left:calc(6px + (100% - 12px) * var(--ks24-k));transform:translateX(-50%)}
.ks24-x{font:600 10px/1.3 ui-monospace,monospace;color:#475569;letter-spacing:.04em}
.ks24-out{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0}
.ks24-out div{padding:9px 10px;border:1px solid #1e2636;border-radius:10px;background:#0b0f18}
.ks24-out dt{font:700 9px/1.2 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.ks24-out dd{margin:5px 0 0;font:800 15px/1.1 ui-monospace,monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.ks24-out .ks24-o3{color:#5eead4}
@media (prefers-reduced-motion:reduce){.ks24-face,.ks24-cup{transition:none}}

/* 25 Under-cabinet light temperature */
.ks25{display:grid;gap:12px}
.ks25-cw{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 16px 30px -12px rgba(0,0,0,.8),inset 0 0 0 1px #222a38;background:#0f131b}
.ks25-c{display:block;width:100%;aspect-ratio:2.25/1}
.ks25-led{position:absolute;left:4%;right:4%;top:19.2%;height:3px;border-radius:2px;background:var(--ks25-c,#ffd9a8);box-shadow:0 0 6px 1px var(--ks25-c,#ffd9a8),0 0 22px 4px var(--ks25-g,rgba(255,200,140,.5));pointer-events:none;transition:background .25s,box-shadow .25s}
.ks25-h{display:flex;align-items:center;gap:16px;min-height:52px}
.ks25-big{display:grid;flex:none;min-width:118px}
.ks25-v{font:800 32px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;color:var(--ks25-c,#ffd9a8);text-shadow:0 0 18px var(--ks25-g,rgba(255,200,140,.5));transition:color .25s}
.ks25-n{font:700 10px/1.5 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#93a0b8}
.ks25-d{margin:0;color:#93a0b8;font-size:13px;line-height:1.45}
.ks25-r{display:grid;gap:5px}
.ks25 input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:12px;margin:0;border-radius:12px;cursor:pointer;background:var(--ks25-tr,linear-gradient(90deg,#ff9b3c,#fff,#9ec3ff));box-shadow:inset 0 1px 2px rgba(0,0,0,.5),0 0 0 1px #1e2636}
.ks25 input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff 0 18%,var(--ks25-c,#ffd9a8) 42%,#1e293b 72%);border:2px solid #0a0d16;box-shadow:0 0 0 2px var(--ks25-c,#ffd9a8),0 0 18px 6px var(--ks25-g,rgba(255,200,140,.5))}
.ks25 input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff 0 18%,var(--ks25-c,#ffd9a8) 42%,#1e293b 72%);border:2px solid #0a0d16;box-shadow:0 0 0 2px var(--ks25-c,#ffd9a8),0 0 18px 6px var(--ks25-g,rgba(255,200,140,.5))}
.ks25 input::-moz-range-track{background:transparent}
.ks25 input:focus-visible{outline:2px solid #00e5ff;outline-offset:6px}
.ks25-tk{position:relative;height:12px;font:700 10px/1 ui-monospace,monospace;color:#64748b}
.ks25-tk span{position:absolute;left:calc(13px + (100% - 26px) * var(--ks25-k));transform:translateX(-50%);white-space:nowrap}
.ks25-tk span:first-child{transform:translateX(-13px)}.ks25-tk span:last-child{transform:translateX(calc(-100% + 13px))}
.ks25-f{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:#93a0b8;font-size:12px}
.ks25-f b{color:#f4f7ff;margin-left:4px}
@container (max-width:460px){.ks25-h{flex-direction:column;align-items:flex-start;gap:6px}}
@media (prefers-reduced-motion:reduce){.ks25-led,.ks25-v{transition:none}}

/* 26 Laminate gloss meter */
.ks26{display:grid;gap:10px;max-width:340px;margin:0 auto}
.ks26-h{display:flex;justify-content:space-between;align-items:end;gap:10px}
.ks26-h small{display:block;margin-bottom:5px;font:700 10px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#93a0b8}
.ks26-v{font:800 30px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.ks26-n{padding:6px 11px;border-radius:999px;background:rgba(45,212,191,.12);color:#5eead4;font:700 12px/1 system-ui,sans-serif}
.ks26-stage{perspective:700px;display:grid;place-items:center;padding:10px 0 16px;background:radial-gradient(60% 50% at 50% 100%,rgba(0,0,0,.6),transparent 70%);touch-action:pan-y}
.ks26-door{--ks26-rx:0deg;--ks26-ry:0deg;--ks26-x:30%;--ks26-y:24%;position:relative;width:min(170px,62%);aspect-ratio:3/4.3;border-radius:3px;overflow:hidden;cursor:crosshair;
  background:var(--ks26-c,#1d2a44);transform:rotateX(var(--ks26-rx)) rotateY(var(--ks26-ry));transform-style:preserve-3d;
  box-shadow:0 22px 30px -14px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4);animation:ks26-sway 6s ease-in-out infinite}
.ks26-door[data-live]{animation:none}
.ks26-door::before{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 30% 40%,rgba(255,255,255,var(--ks26-tx,.035)) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.ks26-ref{position:absolute;inset:-12%;transform:translate(calc(var(--ks26-ry) * -1.4px),calc(var(--ks26-rx) * 1.4px));filter:blur(var(--ks26-b,9px));opacity:var(--ks26-o,.15);mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent 18%,#fff 18% 30%,transparent 30% 32%,#fff 32% 44%,transparent 44%) 0 10%/100% 19% no-repeat,
    linear-gradient(90deg,transparent 18%,#fff 18% 30%,transparent 30% 32%,#fff 32% 44%,transparent 44%) 0 40%/100% 19% no-repeat,
    radial-gradient(circle at 74% 22%,#ffe2a8 0 5%,transparent 6%),
    linear-gradient(transparent 60%,rgba(255,255,255,.25) 62%,transparent 64%)}
.ks26-spec{position:absolute;inset:0;background:radial-gradient(circle at var(--ks26-x) var(--ks26-y),rgba(255,255,255,var(--ks26-sa,.2)) 0,transparent var(--ks26-ss,60%));mix-blend-mode:screen}
.ks26-fp{position:absolute;inset:0;opacity:var(--ks26-f,0);mix-blend-mode:screen;transition:opacity .4s;
  background:repeating-radial-gradient(ellipse 9px 12px at 64% 58%,rgba(255,255,255,.5) 0 .6px,transparent .6px 1.8px) 64% 58%/26px 32px no-repeat,
  repeating-radial-gradient(ellipse 8px 11px at 70% 70%,rgba(255,255,255,.45) 0 .6px,transparent .6px 1.8px) 72% 70%/24px 30px no-repeat,
  repeating-radial-gradient(ellipse 9px 12px at 30% 76%,rgba(255,255,255,.4) 0 .6px,transparent .6px 1.8px) 30% 78%/26px 32px no-repeat}
.ks26-door[data-lt] .ks26-ref{mix-blend-mode:multiply;filter:blur(var(--ks26-b,9px)) invert(.55)}
.ks26-door[data-lt] .ks26-spec{mix-blend-mode:normal}
.ks26-door[data-lt] .ks26-fp{mix-blend-mode:multiply;filter:invert(.45)}
.ks26-pull{position:absolute;right:11%;top:56%;width:6px;height:30%;border-radius:3px;background:linear-gradient(90deg,#0b0b0c,#4b5563 40%,#111);box-shadow:-3px 4px 6px rgba(0,0,0,.55)}
.ks26-edge{position:absolute;inset:0;border-radius:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.35),inset 1px 0 0 rgba(255,255,255,.08)}
.ks26-k{display:flex;gap:4px;padding:4px;border-radius:999px;background:#0b0f18;border:1px solid #1e2636;justify-self:center}
.ks26-k button{appearance:none;cursor:pointer;border:0;border-radius:999px;padding:7px 12px;background:none;color:#93a0b8;font:700 12px/1 system-ui,sans-serif;transition:background .25s,color .25s}
.ks26-k button[aria-checked="true"]{background:#f4f7ff;color:#0a0d16}
.ks26 input{-webkit-appearance:none;appearance:none;width:100%;height:14px;margin:2px 0 0;border-radius:8px;cursor:pointer;
  background:linear-gradient(90deg,#20252f,#3a4252 50%,#cfd6e2),#1e2636;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.ks26 input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 12%,#cbd5e1 30%,#475569 80%);box-shadow:0 4px 10px rgba(0,0,0,.6)}
.ks26 input::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 12%,#cbd5e1 30%,#475569 80%)}
.ks26 input::-moz-range-track{background:transparent}
.ks26 input:focus-visible{outline:2px solid #00e5ff;outline-offset:6px}
.ks26-tk{display:flex;justify-content:space-between;font:700 9.5px/1 ui-monospace,monospace;color:#64748b}
.ks26-tip{margin:0;min-height:32px;color:#93a0b8;font-size:12px;line-height:1.4;text-align:center}
@keyframes ks26-sway{0%,100%{transform:rotateX(4deg) rotateY(-10deg)}50%{transform:rotateX(-2deg) rotateY(9deg)}}
@media (prefers-reduced-motion:reduce){.ks26-door{animation:none}.ks26-fp,.ks26-k button{transition:none}}

/* 27 Kitchen budget builder */
.ks27{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.ks27-k{flex:1.3 1 290px;min-width:0;display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 16px 28px -14px rgba(0,0,0,.85),inset 0 0 0 1px #222a38}
.ks27-p{flex:1 1 230px;min-width:0;display:grid;gap:10px}
.ks27-h{display:flex;justify-content:space-between;align-items:end;gap:10px}
.ks27-h small{display:block;margin-bottom:5px;font:700 10px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#93a0b8}
.ks27-v{font:800 32px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;color:#a7f3d0}
.ks27-left{padding:6px 10px;border-radius:999px;background:rgba(45,212,191,.12);color:#5eead4;font:700 12px/1 ui-monospace,monospace;white-space:nowrap}
.ks27-g{opacity:0;transition:opacity .35s}
.ks27-g[data-lit]{opacity:1}
.ks27-g.ks27-old[data-lit]{opacity:1}
.ks27-r{display:grid;gap:5px}
.ks27 input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:10px;margin:0;border-radius:10px;cursor:pointer;background:linear-gradient(90deg,#2dd4bf var(--ks27-f,19%),#1e2636 0);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.ks27 input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fef9c3,#eab308 55%,#854d0e);box-shadow:0 4px 10px rgba(0,0,0,.6),inset 0 0 0 2px rgba(133,77,14,.6)}
.ks27 input::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fef9c3,#eab308 55%,#854d0e)}
.ks27 input::-moz-range-track{background:transparent}
.ks27 input:focus-visible{outline:2px solid #00e5ff;outline-offset:6px}
.ks27-tk{position:relative;height:12px;font:700 10px/1 ui-monospace,monospace;color:#64748b}
.ks27-tk span{position:absolute;left:calc(14px + (100% - 28px) * var(--ks27-k));transform:translateX(-50%)}
.ks27-rc{list-style:none;margin:0;padding:10px 12px;display:grid;gap:5px;border-radius:4px;background:#f5f1e8;color:#3f3a32;font:600 11.5px/1.25 ui-monospace,monospace;
  -webkit-mask:radial-gradient(circle 4px at 50% 100%,#0000 98%,#000) 0 0/12px 100% repeat-x;mask:radial-gradient(circle 4px at 50% 100%,#0000 98%,#000) 0 0/12px 100% repeat-x;padding-bottom:16px;box-shadow:0 8px 18px rgba(0,0,0,.4)}
.ks27-rc li{display:flex;gap:6px;align-items:baseline;opacity:.38;transition:opacity .3s}
.ks27-rc li span{flex:1;min-width:0}
.ks27-rc li b{font-weight:800;white-space:nowrap}
.ks27-rc li i{flex:none;width:14px;font-style:normal;color:#0f766e;font-weight:900;opacity:0}
.ks27-rc li[data-lit]{opacity:1}
.ks27-rc li[data-lit] i{opacity:1}
.ks27-next{margin:0;min-height:30px;color:#93a0b8;font-size:12px;line-height:1.4}
.ks27-next b{color:#fbbf24}
@media (prefers-reduced-motion:reduce){.ks27-g,.ks27-rc li{transition:none}}

/* 28 Drawer depth pull-out */
.ks28{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;width:100%;max-width:420px;margin:0 auto}
.ks28-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:8px 10px}
.ks28-h small{display:block;margin-bottom:5px;font:700 10px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#93a0b8}
.ks28-v{font:800 34px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;color:#fde3b8}
.ks28-s{padding:6px 10px;border-radius:999px;background:rgba(45,212,191,.12);color:#5eead4;font:700 11.5px/1.3 ui-monospace,monospace}
.ks28-x{display:block;width:100%;height:auto;border-radius:10px;background:#111520;box-shadow:inset 0 0 0 1px #222a38}
.ks28-rl,.ks28-rr{fill:#9ca3af;stroke:#4b5563;stroke-width:.4}
.ks28-sd{fill:#ead7ad;stroke:#a8865a;stroke-width:.5}
.ks28-dv{fill:none;stroke:#a8865a;stroke-width:.6}
.ks28-fg{cursor:grab;outline:none;touch-action:none}
.ks28-fg:active{cursor:grabbing}
.ks28-hit{fill:transparent}
.ks28-fg:focus-visible{outline:none}
.ks28-fg:focus-visible .ks28-fr{stroke:#00e5ff;stroke-width:1.5}
.ks28-pl{fill:#111;stroke:#9ca3af;stroke-width:.4}
.ks28-i{transition:opacity .3s}
.ks28-i[data-no]{opacity:.55}
.ks28-i[data-no] .ks28-body{display:none}
.ks28-gh{display:none;fill:rgba(244,63,94,.08);stroke:#f43f5e;stroke-width:.9;stroke-dasharray:3 2}
.ks28-i[data-no] .ks28-gh{display:inline}
.ks28-l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.ks28-l li{padding:5px 9px;border-radius:999px;border:1px solid #1e2636;color:#64748b;font:700 11px/1 system-ui,sans-serif;transition:border-color .3s,color .3s,background .3s}
.ks28-l li[data-fit]{border-color:rgba(45,212,191,.5);background:rgba(45,212,191,.1);color:#5eead4}
.ks28-l li small{font:600 10px/1 ui-monospace,monospace;margin-left:4px;opacity:.8}
.ks28-f{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.ks28-f small{font:600 10px/1.3 ui-monospace,monospace;color:#475569;flex:1;min-width:150px}
.ks28-go{appearance:none;cursor:pointer;border:1px solid #334155;border-radius:999px;padding:8px 13px;background:#121826;color:#f4f7ff;font:700 12px/1 system-ui,sans-serif;transition:border-color .2s}
.ks28-go:hover{border-color:#2dd4bf}
@media (prefers-reduced-motion:reduce){.ks28-i,.ks28-l li,.ks28-go{transition:none}}

/* 29 Rod height wardrobe */
.ks29{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;width:100%;max-width:340px;margin:0 auto}
.ks29-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:8px}
.ks29-h small{display:block;margin-bottom:5px;font:700 10px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#93a0b8}
.ks29-v{font:800 34px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.ks29-n{padding:6px 10px;border-radius:999px;background:rgba(45,212,191,.12);color:#5eead4;font:700 12px/1.2 system-ui,sans-serif;transition:background .3s,color .3s}
.ks29-n[data-bad]{background:rgba(244,63,94,.14);color:#fda4af}
.ks29-x{display:block;width:100%;height:auto;border-radius:10px;background:#111520;overflow:hidden}
.ks29-reach{stroke:#fbbf24;stroke-width:.8;stroke-dasharray:4 3;opacity:.7}
.ks29-rt{font:700 7px/1 ui-monospace,monospace;fill:#fbbf24;text-anchor:end;opacity:.8}
.ks29-rg{cursor:grab;touch-action:none;outline:none}
.ks29-rg:active{cursor:grabbing}
.ks29-hit{fill:transparent}
.ks29-rg:focus-visible{outline:none}
.ks29-rg:focus-visible .ks29-rod{stroke:#00e5ff;stroke-width:1.2}
.ks29-rg[data-high] .ks29-rod{filter:drop-shadow(0 0 4px #f59e0b)}
.ks29-sh{filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}
.ks29-gm path{stroke:rgba(0,0,0,.35);stroke-width:.6}
.ks29-gm[data-fl] .ks29-bd{stroke:#f43f5e;stroke-width:1.2}
.ks29-hk{fill:none;stroke:#cbd5e1;stroke-width:1.1}
.ks29-tip{margin:0;min-height:34px;color:#93a0b8;font-size:12px;line-height:1.4;text-align:center}
.ks29-hint{font:600 10px/1.3 ui-monospace,monospace;color:#475569;text-align:center}
@media (prefers-reduced-motion:reduce){.ks29-n{transition:none}}

/* 30 Closet width to shelves */
.ks30{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.ks30-x{flex:1.4 1 300px;min-width:0;display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 16px 28px -14px rgba(0,0,0,.85),inset 0 0 0 1px #222a38}
.ks30-p{flex:1 1 210px;min-width:0;display:grid;gap:11px}
.ks30-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:8px}
.ks30-h small{display:block;margin-bottom:5px;font:700 10px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#93a0b8}
.ks30-v{font:800 34px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.ks30-n{padding:6px 10px;border-radius:999px;background:rgba(45,212,191,.12);color:#5eead4;font:700 12px/1 system-ui,sans-serif}
.ks30-pn{fill:url(#ks30-mel);stroke:#b6bcc6;stroke-width:.4}
.ks30-dr{fill:url(#ks30-mel);stroke:#9aa3af;stroke-width:.5}
.ks30-rd{fill:url(#ks30-rod)}
.ks30-dim path{stroke:#2dd4bf;stroke-width:.7;fill:none}
.ks30-dim text{font:800 7px/1 ui-monospace,monospace;fill:#5eead4;text-anchor:middle}
.ks30-dim text.ks30-w{fill:#fbbf24}
.ks30-r{display:grid;gap:5px}
.ks30 input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:16px;margin:0;border-radius:3px;cursor:pointer;
  background:linear-gradient(90deg,rgba(45,212,191,.85) var(--ks30-f,55%),transparent 0),repeating-linear-gradient(90deg,#334155 0 1px,transparent 1px calc(100% / 12)),#151b27;box-shadow:inset 0 0 0 1px #263043}
.ks30 input::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:30px;border-radius:3px;background:linear-gradient(90deg,#cbd5e1,#fff 40%,#94a3b8);box-shadow:0 3px 9px rgba(0,0,0,.6)}
.ks30 input::-moz-range-thumb{width:12px;height:30px;border:0;border-radius:3px;background:linear-gradient(90deg,#cbd5e1,#fff 40%,#94a3b8)}
.ks30 input::-moz-range-track{background:transparent}
.ks30 input:focus-visible{outline:2px solid #00e5ff;outline-offset:6px}
.ks30-tk{position:relative;height:12px;font:700 10px/1 ui-monospace,monospace;color:#64748b}
.ks30-tk span{position:absolute;left:calc(6px + (100% - 12px) * var(--ks30-k));transform:translateX(-50%)}
.ks30-out{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0}
.ks30-out div{padding:8px 10px;border:1px solid #1e2636;border-radius:10px;background:#0b0f18}
.ks30-out dt{font:700 9px/1.2 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.ks30-out dd{margin:4px 0 0;font:800 15px/1.1 ui-monospace,monospace;font-variant-numeric:tabular-nums}
.ks30-out .ks30-o4{color:#5eead4}
.ks30-note{margin:0;color:#64748b;font-size:11.5px}

/* 31 Shoe wall builder */
.ks31{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.ks31-h{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ks31-h small{display:block;margin-bottom:5px;font:700 10px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#93a0b8}
.ks31-v{font:800 38px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;color:#fbcfe8}
.ks31-d{margin:0;color:#93a0b8;font-size:13px;flex:1;min-width:180px}
.ks31-x{display:block;width:100%;height:auto;max-height:420px;border-radius:12px;box-shadow:0 16px 28px -14px rgba(0,0,0,.85),inset 0 0 0 1px #222a38}
.ks31-pn{fill:url(#ks31-mel);stroke:#aab1bb;stroke-width:.4}
.ks31-lip{fill:url(#ks31-mel)}
.ks31-tp{fill:#c9ced6}
.ks31-in{transform-box:fill-box;transform-origin:50% 100%}
.ks31-r{display:grid;gap:5px}
.ks31 input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:18px;margin:0;border-radius:9px;cursor:pointer;
  background:radial-gradient(circle at 50% 50%,#0b0f18 0 2.2px,#cbd5e1 2.6px 3.6px,transparent 4px) 0 50%/16px 18px repeat-x,
  repeating-linear-gradient(60deg,transparent 0 6px,#f472b6 6px 8px,transparent 8px 16px) 0 0/100% 100%,#1e2636;box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
.ks31 input::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:12px;border-radius:6px;background:linear-gradient(#f9a8d4,#db2777);box-shadow:0 3px 8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.5)}
.ks31 input::-moz-range-thumb{width:30px;height:12px;border:0;border-radius:6px;background:linear-gradient(#f9a8d4,#db2777)}
.ks31 input::-moz-range-track{background:transparent}
.ks31 input:focus-visible{outline:2px solid #00e5ff;outline-offset:5px}
.ks31-tk{position:relative;height:12px;font:700 10px/1 ui-monospace,monospace;color:#64748b}
.ks31-tk span{position:absolute;left:calc(15px + (100% - 30px) * var(--ks31-k));transform:translateX(-50%)}
.ks31-f{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:#93a0b8;font-size:12px}
.ks31-f b{color:#f4f7ff;margin-left:4px;font-family:ui-monospace,monospace}
.ks31-f .ks31-p{color:#5eead4}

/* 32 Hanging length clearance */
.ks32{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;width:100%;max-width:360px;margin:0 auto}
.ks32-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:8px}
.ks32-h small{display:block;margin-bottom:5px;font:700 10px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#93a0b8}
.ks32-v{font:800 34px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;color:#c4b5fd}
.ks32-n{padding:6px 10px;border-radius:999px;background:rgba(45,212,191,.12);color:#5eead4;font:700 12px/1.2 system-ui,sans-serif;transition:background .3s,color .3s}
.ks32-n[data-bad]{background:rgba(251,191,36,.14);color:#fcd34d}
.ks32-cw{position:relative;border-radius:12px;overflow:hidden;background:#151a25;box-shadow:inset 0 0 0 1px #222a38}
.ks32-c{display:block;width:100%;aspect-ratio:1/1.08;touch-action:none;cursor:grab}
.ks32-hd{--ks32-y:60%;position:absolute;right:8px;top:var(--ks32-y);width:34px;height:34px;margin-top:-17px;border-radius:50%;display:grid;place-items:center;cursor:ns-resize;touch-action:none;
  background:radial-gradient(circle at 38% 32%,#5eead4,#0f766e 70%);color:#042f2e;font:900 16px/1 system-ui,sans-serif;box-shadow:0 4px 12px rgba(0,0,0,.6),0 0 0 3px rgba(45,212,191,.25)}
.ks32-hd:focus-visible{outline:2px solid #00e5ff;outline-offset:3px}
.ks32-k{display:flex;gap:4px;padding:4px;border-radius:999px;background:#0b0f18;border:1px solid #1e2636;justify-self:center;flex-wrap:wrap;justify-content:center}
.ks32-k button{appearance:none;cursor:pointer;border:0;border-radius:999px;padding:7px 11px;background:none;color:#93a0b8;font:700 12px/1 system-ui,sans-serif;transition:background .25s,color .25s}
.ks32-k button[aria-checked="true"]{background:#c4b5fd;color:#1e1b4b}
.ks32-tip{margin:0;min-height:32px;color:#93a0b8;font-size:12px;line-height:1.4;text-align:center}
.ks32-hint{font:600 10px/1.3 ui-monospace,monospace;color:#475569;text-align:center}
@media (prefers-reduced-motion:reduce){.ks32-n,.ks32-k button{transition:none}}

/* 33 His and hers split */
.ks33{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.ks33-x{display:block;width:100%;height:auto;max-height:380px;border-radius:12px;box-shadow:0 16px 28px -14px rgba(0,0,0,.85),inset 0 0 0 1px #222a38;overflow:hidden}
.ks33-lb{font:800 8px/1 ui-monospace,monospace;letter-spacing:.2em;fill:#64748b}
.ks33-gm path{stroke:rgba(0,0,0,.35);stroke-width:.4}
.ks33-hk{fill:none;stroke:#cbd5e1;stroke-width:.7}
.ks33-dv{cursor:ew-resize;touch-action:none;outline:none}
.ks33-hit{fill:transparent}
.ks33-pn{filter:drop-shadow(2px 0 3px rgba(0,0,0,.5))}
.ks33-kn{fill:#2dd4bf;stroke:#0a0d16;stroke-width:2}
.ks33-dv:focus-visible{outline:none}
.ks33-dv:focus-visible .ks33-kn{stroke:#00e5ff;stroke-width:3}
.ks33-dv[data-even] .ks33-kn{fill:#f9a8d4}
.ks33-g{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.ks33-s{display:grid;gap:5px;min-width:0}
.ks33-s:last-child{text-align:right}
.ks33-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ks33-s:last-child .ks33-t{flex-direction:row-reverse}
.ks33-t b{font:800 12px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#93a0b8}
.ks33-t span{font:800 22px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.ks33-bar{height:8px;border-radius:8px;background:#1e2636;overflow:hidden}
.ks33-bar i{display:block;height:100%;width:var(--ks33-p,50%);border-radius:8px;background:#60a5fa;transition:background .3s}
.ks33-s:last-child .ks33-bar i{margin-left:auto;background:#f472b6}
.ks33-s[data-tight] .ks33-bar i{background:#f43f5e}
.ks33-s small{font:600 11px/1.3 ui-monospace,monospace;color:#64748b}
.ks33-s[data-tight] small{color:#fda4af}
.ks33-mid{padding:7px 11px;border-radius:999px;background:#0b0f18;border:1px solid #1e2636;color:#93a0b8;font:700 11.5px/1.2 system-ui,sans-serif;text-align:center;max-width:150px}
.ks33-mid[data-even]{border-color:#f9a8d4;color:#fbcfe8}
@container (max-width:460px){.ks33-g{grid-template-columns:1fr 1fr}.ks33-mid{grid-column:1/-1;grid-row:2;justify-self:center;max-width:none}.ks33-t span{font-size:18px}}
@media (prefers-reduced-motion:reduce){.ks33-bar i{transition:none}}

/* 34 Savings jar */
.ks34{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;width:100%;max-width:400px;margin:0 auto}
.ks34-top{display:flex;align-items:center;gap:10px}
.ks34-jar{flex:0 0 46%;min-width:0;height:auto;display:block;overflow:visible}
.ks34-lt{font:800 6px/1 ui-monospace,monospace;letter-spacing:.14em;fill:#78716c}
.ks34-lb{font:900 11px/1 system-ui,sans-serif;letter-spacing:.06em;fill:#0f766e}
.ks34-side{flex:1;min-width:0;display:grid;gap:8px}
.ks34-side>small{font:700 10px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#93a0b8}
.ks34-od{display:flex;align-items:flex-start;height:1.1em;overflow:hidden;font:800 34px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#fcd34d;text-shadow:0 0 18px rgba(245,158,11,.35)}
.ks34-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ks34-dg{display:block;height:1.1em;overflow:hidden}
.ks34-dg span{display:flex;flex-direction:column;transform:translateY(calc(var(--ks34-d,0) * -1.1em));transition:transform .7s cubic-bezier(.2,1.25,.4,1)}
.ks34-dg span i{font-style:normal;height:1.1em}
.ks34-cmp{display:grid;gap:7px}
.ks34-cmp div{display:grid;gap:3px;font-size:11.5px;color:#93a0b8}
.ks34-cmp b{color:#f4f7ff;font-family:ui-monospace,monospace}
.ks34-bar{display:block;height:7px;border-radius:7px;width:var(--ks34-w,50%);transition:width .5s cubic-bezier(.3,.9,.4,1)}
.ks34-b1{background:repeating-linear-gradient(135deg,#475569 0 4px,#334155 4px 8px)}
.ks34-b2{background:linear-gradient(90deg,#2dd4bf,#a7f3d0)}
.ks34-l{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;font:700 11px/1 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#93a0b8}
.ks34-l b{color:#f4f7ff;font-size:16px;letter-spacing:0}
.ks34 input{grid-column:1/-1;-webkit-appearance:none;appearance:none;width:100%;height:12px;margin:2px 0;border-radius:12px;cursor:pointer;background:linear-gradient(90deg,#f59e0b var(--ks34-f,30%),#1e2636 0);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.ks34 input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fef3c7,#f59e0b 50%,#92400e);box-shadow:0 4px 10px rgba(0,0,0,.6),inset 0 0 0 3px rgba(146,64,14,.45)}
.ks34 input::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fef3c7,#f59e0b 50%,#92400e)}
.ks34 input::-moz-range-track{background:transparent}
.ks34 input:focus-visible{outline:2px solid #00e5ff;outline-offset:6px}
.ks34-go{appearance:none;cursor:pointer;border:0;border-radius:12px;padding:13px 16px;font:800 14px/1 system-ui,sans-serif;color:#422006;
  background:linear-gradient(180deg,#fde68a,#f59e0b);box-shadow:0 4px 0 #92400e,0 10px 20px -6px rgba(245,158,11,.5);transition:transform .12s,box-shadow .12s}
.ks34-go:hover{filter:brightness(1.06)}
.ks34-go:active{transform:translateY(3px);box-shadow:0 1px 0 #92400e,0 4px 10px -4px rgba(245,158,11,.5)}
.ks34-go[data-done]{background:linear-gradient(180deg,#a7f3d0,#2dd4bf);color:#042f2e;box-shadow:0 4px 0 #0f766e,0 10px 20px -6px rgba(45,212,191,.5)}
@container (max-width:340px){.ks34-od{font-size:28px}}
@media (prefers-reduced-motion:reduce){.ks34-dg span,.ks34-bar,.ks34-go{transition:none}}

/* 35 Lead time delivery */
.ks35{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.ks35-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:10px}
.ks35-h small{display:block;margin-bottom:5px;font:700 10px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#93a0b8}
.ks35-v{font:800 30px/1 system-ui,sans-serif;letter-spacing:-.01em}
.ks35-plan{display:grid;gap:3px;padding:8px 12px;border-radius:12px;background:rgba(45,212,191,.1);border:1px solid rgba(45,212,191,.35);text-align:right;transition:background .3s,border-color .3s}
.ks35-plan b{font:800 13px/1 system-ui,sans-serif;color:#5eead4}
.ks35-plan span{font:600 11.5px/1.2 ui-monospace,monospace;color:#cbd5e1}
.ks35-plan[data-rush]{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.4)}
.ks35-plan[data-rush] b{color:#fcd34d}
.ks35-plan[data-tight]{background:rgba(244,63,94,.1);border-color:rgba(244,63,94,.45)}
.ks35-plan[data-tight] b{color:#fda4af}
.ks35-x{display:block;width:100%;height:auto;border-radius:12px;background:linear-gradient(#141a26,#0d1119);box-shadow:inset 0 0 0 1px #222a38;overflow:hidden}
.ks35-ax text{font:700 6.5px/1 ui-monospace,monospace;fill:#64748b;text-anchor:middle}
.ks35-ax text.ks35-td{fill:#5eead4}
.ks35-ax path{stroke:#334155;stroke-width:.7}
.ks35-bt{font:800 6.5px/1 system-ui,sans-serif;fill:#94a3b8;text-anchor:middle}
.ks35-ft{font:900 6px/1 system-ui,sans-serif;fill:#fff;letter-spacing:.06em}
.ks35-late{font:800 7px/1 ui-monospace,monospace;fill:#fda4af;text-anchor:middle}
.ks35-sx{font:900 9px/1 system-ui,sans-serif;fill:#22c55e;text-anchor:middle;letter-spacing:.12em}
.ks35-st[data-late] rect{stroke:#f43f5e}.ks35-st[data-late] .ks35-sx{fill:#f43f5e}
.ks35-si{transform-box:fill-box;transform-origin:center}
.ks35-wh{transform-box:fill-box;transform-origin:center}
.ks35-r{display:grid;gap:5px}
.ks35 input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:14px;margin:0;border-radius:4px;cursor:pointer;
  background:linear-gradient(90deg,rgba(45,212,191,.85) 0 var(--ks35-a,13%),rgba(251,191,36,.25) var(--ks35-a,13%) 75%,rgba(148,163,184,.25) 75%),#1e2636;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.ks35 input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:28px;border-radius:3px 3px 8px 8px;background:linear-gradient(#fb7185 0 45%,#f4f7ff 45%);box-shadow:0 3px 9px rgba(0,0,0,.6)}
.ks35 input::-moz-range-thumb{width:16px;height:28px;border:0;border-radius:3px 3px 8px 8px;background:linear-gradient(#fb7185 0 45%,#f4f7ff 45%)}
.ks35 input::-moz-range-track{background:transparent}
.ks35 input:focus-visible{outline:2px solid #00e5ff;outline-offset:6px}
.ks35-tl{display:flex;justify-content:space-between;font:700 9.5px/1 ui-monospace,monospace;color:#64748b}
.ks35-msg{margin:0;min-height:18px;color:#cbd5e1;font-size:13px;text-align:center}
.ks35-msg b{color:#5eead4}
@media (prefers-reduced-motion:reduce){.ks35-plan{transition:none}}

/* 36 Quantity discount stairs */
.ks36{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.ks36-h{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ks36-tag{perspective:400px;flex:none}
.ks36-tf{position:relative;display:grid;place-items:center;min-width:104px;padding:10px 16px 10px 24px;border-radius:6px 10px 10px 6px;background:linear-gradient(135deg,#fef3c7,#fcd34d);color:#422006;box-shadow:0 8px 18px -6px rgba(0,0,0,.7);transform-origin:50% 0}
.ks36-tf::before{content:"";position:absolute;left:8px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#0a0d16;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.ks36-p{font:900 30px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.ks36-tf small{font:700 9px/1.2 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase}
.ks36-sum{flex:1;min-width:190px}
.ks36-sum small{display:block;margin-bottom:5px;font:700 10px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#93a0b8}
.ks36-t{font:800 20px/1.1 ui-monospace,monospace;font-variant-numeric:tabular-nums}
.ks36-nx{margin:6px 0 0;min-height:17px;font-size:12.5px;color:#93a0b8}
.ks36-nx b{color:#fcd34d}
.ks36-x{display:block;width:100%;height:auto;border-radius:12px;background:linear-gradient(#151b28,#0d1119);box-shadow:inset 0 0 0 1px #222a38}
.ks36-st text{font:900 11px/1 ui-monospace,monospace;fill:#fff7ed;text-anchor:middle;paint-order:stroke;stroke:rgba(67,20,7,.55);stroke-width:2px}
.ks36-st text.ks36-rg{font:700 7px/1 ui-monospace,monospace;fill:#fde68a;stroke-width:0}
.ks36-st rect[data-cur]{filter:brightness(1.18) drop-shadow(0 0 6px rgba(45,212,191,.6))}
.ks36-r{display:grid;gap:5px}
.ks36 input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:12px;margin:0;border-radius:12px;cursor:pointer;
  background:linear-gradient(90deg,#fcd34d 0 16.1%,#fbbf24 16.1% 32.9%,#f59e0b 32.9% 66.4%,#2dd4bf 66.4%);opacity:.9;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.ks36 input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ecfeff,#2dd4bf 40%,#0f3f3a);border:2px solid #0a0d16;box-shadow:0 4px 10px rgba(0,0,0,.6)}
.ks36 input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ecfeff,#2dd4bf 40%,#0f3f3a);border:2px solid #0a0d16}
.ks36 input::-moz-range-track{background:transparent}
.ks36 input:focus-visible{outline:2px solid #00e5ff;outline-offset:6px}
.ks36-tk{position:relative;height:12px;font:700 10px/1 ui-monospace,monospace;color:#64748b}
.ks36-tk span{position:absolute;left:calc(13px + (100% - 26px) * var(--ks36-k));transform:translateX(-50%)}

/* 37 Before and after reveal */
.ks37{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.ks37-v{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 16px 30px -12px rgba(0,0,0,.85),inset 0 0 0 1px #222a38;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.ks37-v svg{display:block;width:100%;height:auto}
.ks37-b{filter:sepia(.25) saturate(1.1) brightness(.92)}
.ks37-a{position:absolute;inset:0;clip-path:inset(0 0 0 var(--ks37-x,50%))}
.ks37-tg{position:absolute;top:10px;padding:5px 9px;border-radius:999px;font:800 10px/1 ui-monospace,monospace;letter-spacing:.14em;pointer-events:none}
.ks37-t1{left:10px;background:rgba(10,13,22,.7);color:#fcd34d}
.ks37-t2{right:10px;background:rgba(45,212,191,.9);color:#042f2e}
.ks37-hd{position:absolute;top:0;bottom:0;left:var(--ks37-x,50%);width:44px;margin-left:-22px;cursor:ew-resize;touch-action:none;outline:none}
.ks37-hd::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:linear-gradient(#fff,#a7f3d0,#fff);box-shadow:0 0 12px rgba(167,243,208,.9),0 0 2px #000}
.ks37-hd i{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff,#e2e8f0 60%,#94a3b8);box-shadow:0 6px 16px rgba(0,0,0,.6)}
.ks37-hd i::before,.ks37-hd i::after{content:"";position:absolute;top:50%;margin-top:-5px;border:5px solid transparent}
.ks37-hd i::before{left:6px;border-right:7px solid #0f766e}
.ks37-hd i::after{right:6px;border-left:7px solid #0f766e}
.ks37-hd:focus-visible i{box-shadow:0 0 0 3px #00e5ff,0 6px 16px rgba(0,0,0,.6)}
.ks37-f{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.ks37-k{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:999px;background:#0b0f18;border:1px solid #1e2636}
.ks37-k button{appearance:none;cursor:pointer;border:0;border-radius:999px;padding:7px 11px;background:none;color:#93a0b8;font:700 12px/1 system-ui,sans-serif;transition:background .25s,color .25s}
.ks37-k button[aria-checked="true"]{background:#2dd4bf;color:#042f2e}
.ks37-cap{margin:0;color:#cbd5e1;font-size:13px}
.ks37-cap b{color:#5eead4}
@media (prefers-reduced-motion:reduce){.ks37-k button{transition:none}}

/* 38 Resale value scale */
.ks38{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;width:100%;max-width:360px;margin:0 auto}
.ks38-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:8px}
.ks38-h small{display:block;margin-bottom:5px;font:700 10px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#93a0b8}
.ks38-v{font:800 32px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.ks38-z{padding:6px 10px;border-radius:999px;background:rgba(45,212,191,.12);color:#5eead4;font:700 12px/1.2 system-ui,sans-serif}
.ks38-z[data-meh]{background:rgba(148,163,184,.12);color:#cbd5e1}
.ks38-x{display:block;width:100%;height:auto;overflow:visible}
.ks38-lb{font:800 7px/1 ui-monospace,monospace;letter-spacing:.12em;fill:#93a0b8;text-anchor:middle}
.ks38-r{margin:0;min-height:36px;color:#cbd5e1;font-size:13px;line-height:1.4;text-align:center}
.ks38-r b{color:#fcd34d}
.ks38-s{display:grid;gap:5px}
.ks38 input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:12px;margin:0;border-radius:12px;cursor:pointer;
  background:linear-gradient(90deg,#2dd4bf 0 8%,#a3e635 8% 20%,#fbbf24 20% 45%,#64748b 45%);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.ks38 input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fef3c7,#fbbf24 45%,#78350f);box-shadow:0 4px 10px rgba(0,0,0,.6)}
.ks38 input::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fef3c7,#fbbf24 45%,#78350f)}
.ks38 input::-moz-range-track{background:transparent}
.ks38 input:focus-visible{outline:2px solid #00e5ff;outline-offset:6px}
.ks38-tk{display:flex;justify-content:space-between;font:700 9.5px/1 ui-monospace,monospace;color:#64748b}
.ks38-n{font:600 10px/1.3 ui-monospace,monospace;color:#475569;text-align:center}