/* Playground presentations that inherit from Hylly-Aikajana (shelf-kit.js): Classic list, Timeline + scrub orb,
   Record store bins, Wall shelf, Night dial, and shelf blocks on other pages. The master's own styles
   (shelf-timeline.css) are reused, never changed here. */

/* —— Shared: walnut case, sleeves, detail panel, chrome controls —— */
.kit-shell{position:relative}
.kit-case{
  position:relative;border-radius:22px;overflow:hidden;isolation:isolate;
  border:1px solid rgba(255,255,255,.06);box-shadow:0 32px 80px rgba(0,0,0,.45);
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(255,214,160,.16),transparent 60%),
    linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.38)),
    var(--wood,none) center/cover,#3a2515;
  color:#f7efdf;
}
@media (max-width:760px){.kit-case{background-image:radial-gradient(120% 90% at 50% 0%,rgba(255,214,160,.16),transparent 60%),linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.38)),var(--wood-sm,var(--wood,none))}}
.kit-case::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,236,205,.06),inset 0 0 120px rgba(0,0,0,.45)}

.kit-sleeve{position:relative;display:block;flex:none;width:var(--rw);aspect-ratio:1}
.kit-sleeve .vinyl-sleeve{padding:calc(var(--rw) * .065);box-shadow:0 calc(var(--rw) * .05) calc(var(--rw) * .14) rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.12)}
/* Small sleeves are scaled-down copies of the big ones: shadows and sticker edges are in em so they shrink with
   the title instead of swamping it. */
.kit-sleeve .vinyl-sleeve.is-art{padding:calc(var(--rw) * .065)}
.kit-sleeve .vinyl-sleeve.is-hybrid{padding:calc(var(--rw) * .065) calc(var(--rw) * .055)}
.kit-sleeve .vinyl-sleeve__name{text-shadow:0 .05em .1em rgba(0,0,0,.75),0 0 .74em rgba(0,0,0,.45)}
.kit-sleeve .vinyl-sleeve__name.is-box{border-radius:.21em;text-shadow:none}
.kit-sleeve .vinyl-sleeve__name.is-sticker{border-radius:.1em;text-shadow:none;box-shadow:0 .16em .42em rgba(0,0,0,.4)}
.kit-sleeve .vinyl-sleeve__name.is-bar{text-shadow:0 .05em .16em rgba(0,0,0,.85)}
.kit-sleeve .vinyl-sleeve__name.is-outline{text-shadow:0 .1em .32em rgba(0,0,0,.5)}
.kit-sleeve .vinyl-sleeve::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:radial-gradient(150% 60% at 50% 50%,transparent 60%,rgba(255,255,255,.06) 62%,transparent 66%),linear-gradient(0deg,rgba(0,0,0,.18),transparent 14%);
  mix-blend-mode:soft-light;
}

.kit-detail{
  position:relative;container-type:inline-size;
  padding:1.25rem clamp(1rem,3vw,2rem) 1.5rem;
  background:color-mix(in srgb,var(--as-bg) 82%,rgba(0,0,0,.55));
  border-top:1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--as-text);
}
.kit-detail:empty{display:none}
.kit-detail .vinyl-feature{grid-template-columns:auto minmax(0,1fr);gap:clamp(1rem,3vw,2.25rem);max-width:60rem}
.kit-detail .vinyl-feature__desc{max-height:none;max-width:62ch}
@container (max-width:520px){.kit-detail .vinyl-feature{grid-template-columns:1fr}}
.kit-detail .vinyl-feature{animation:kitFeatureIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes kitFeatureIn{from{opacity:0;transform:translateY(10px)}}

/* Polished chrome, like the master's timeline knob */
.kit-chrome,.kit-play{
  --chrome:radial-gradient(120% 70% at 50% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 58%),
    linear-gradient(180deg,#f7f8fa 0%,#cfd3d8 32%,#8d939b 50%,#7b8189 53%,#c4c9cf 78%,#f1f2f4 100%);
  border:1px solid rgba(20,22,26,.65);color:#1c1f24;cursor:pointer;
  background:var(--chrome);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 1px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.12),0 6px 16px rgba(0,0,0,.45);
  text-shadow:0 1px 0 rgba(255,255,255,.7);
  transition:transform .15s ease,box-shadow .2s ease,filter .2s ease;
}
.kit-chrome:hover,.kit-play:hover{filter:brightness(1.05);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 1px rgba(0,0,0,.35),0 0 0 3px rgba(255,255,255,.08),0 10px 22px rgba(0,0,0,.5)}
.kit-chrome:active,.kit-play:active{transform:translateY(1px) scale(.98);box-shadow:inset 0 2px 5px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.4)}
.kit-chrome:focus-visible,.kit-play:focus-visible{outline:2px solid #fbf7ef;outline-offset:3px}
.kit-chrome{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1.15rem;border-radius:999px;font:700 .8rem/1 var(--as-font-ui,system-ui,sans-serif);letter-spacing:.12em;text-transform:uppercase}
.kit-chrome:disabled{opacity:.42;cursor:default;filter:grayscale(.4);transform:none}
.kit-play{flex:none;display:grid;place-items:center;width:2.6rem;height:2.6rem;padding:0;border-radius:50%}
.kit-play .kit-play__bars,.kit-play.is-sounding .kit-play__tri{display:none}
.kit-play.is-sounding .kit-play__bars{display:inline}
.kit-play.is-sounding{box-shadow:inset 0 1px 0 #fff,inset 0 -1px 1px rgba(0,0,0,.35),0 0 0 3px color-mix(in srgb,var(--as-accent) 55%,transparent),0 8px 20px rgba(0,0,0,.5)}

.kit-admin-bar{margin-top:1rem}
.kit-add{
  display:inline-grid;place-content:center;justify-items:center;gap:.3rem;min-height:5rem;margin:.5rem .45rem;padding:0 1.5rem;cursor:pointer;
  border-radius:8px;border:2px dashed color-mix(in srgb,var(--as-accent) 60%,transparent);background:color-mix(in srgb,var(--as-accent) 8%,transparent);
  color:#f5ecd7;font:600 .8rem/1.2 system-ui,sans-serif;
}
.kit-add span{font-size:1.8rem;font-weight:300;color:var(--as-accent)}

/* —— Catalogue rows (Classic list, Timeline) —— */
.kit-rows{list-style:none;margin:0;padding:.75rem clamp(.6rem,2vw,1.25rem) 1rem;display:grid;gap:.55rem}
.kit-row{
  position:relative;display:flex;align-items:center;gap:.75rem;padding:.55rem .9rem .55rem .55rem;border-radius:12px;
  background:linear-gradient(180deg,rgba(24,14,7,.7),rgba(14,8,4,.78));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,236,205,.1),inset 0 0 0 1px rgba(255,236,205,.06),0 8px 22px rgba(0,0,0,.35);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,background .25s ease;
}
.kit-row:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,236,205,.16),inset 0 0 0 1px rgba(255,236,205,.12),0 14px 30px rgba(0,0,0,.45)}
.kit-row.is-open{border-radius:12px 12px 0 0;background:linear-gradient(180deg,rgba(38,22,10,.82),rgba(20,12,6,.86));box-shadow:inset 0 1px 0 rgba(255,236,205,.18),inset 0 0 0 1px rgba(255,236,205,.16)}
.kit-row__main{
  flex:1;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.9rem;
  padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;
}
.kit-row__main:focus-visible{outline:2px solid #fbf7ef;outline-offset:4px;border-radius:8px}
.kit-row .kit-sleeve{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.kit-row:hover .kit-sleeve{transform:rotate(-2deg) scale(1.04)}
.kit-row__text{display:grid;gap:.25rem;min-width:0}
.kit-row__title{font:700 1.02rem/1.2 var(--as-font-display,Syne,system-ui,sans-serif);color:#fbf4e6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kit-row__tags{display:flex;flex-wrap:wrap;gap:.3rem;font-size:.72rem;color:#eadcc4}
.kit-row__tags:empty{display:none}
.kit-row__tags .shelf-genre{margin:0;font-size:inherit}
.kit-row__tags .rec-star{font-size:1.2em}
.kit-row__desc{font-size:.84rem;line-height:1.35;color:rgba(247,239,223,.72);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kit-row__year{
  padding:.3rem .6rem .28rem;border-radius:6px;font:700 .82rem/1 var(--as-font-mono,IBM Plex Mono,monospace);font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fbf7ef,#efe6d6);color:#2a1a0e;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 3px 8px rgba(0,0,0,.35);
}
.kit-row__year:empty{display:none}
.kit-row-open{margin-top:-.55rem;border-radius:0 0 12px 12px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,236,205,.16),0 18px 40px rgba(0,0,0,.4);animation:kitOpen .4s cubic-bezier(.2,.8,.2,1)}
.kit-row-open .kit-detail{border-top:0}
@keyframes kitOpen{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0)}}
@media (max-width:600px){
  .kit-row{gap:.5rem;padding:.45rem .6rem .45rem .45rem}
  .kit-row__main{gap:.6rem}
  .kit-row .kit-sleeve{--rw:52px!important}
  .kit-row__year{display:none}
  .kit-row__desc{display:none}
}

/* —— Classic list —— */
.kit-classic__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem;padding:1rem clamp(.8rem,2vw,1.25rem) .25rem}
.kit-classic__count{margin:0;padding:.3rem .7rem .28rem;border-radius:6px;font-size:.8rem;font-weight:700;background:linear-gradient(180deg,#fbf7ef,#efe6d6);color:#2a1a0e;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.kit-seg{display:inline-flex;padding:4px;border-radius:999px;gap:2px;background:linear-gradient(180deg,rgba(10,6,3,.75),rgba(30,18,9,.7));box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 1px 0 rgba(255,236,205,.14)}
.kit-seg__btn{
  display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .95rem;border:0;border-radius:999px;cursor:pointer;
  background:none;color:#e9dcc6;font:600 .76rem/1 var(--as-font-ui,system-ui,sans-serif);letter-spacing:.06em;transition:color .2s,background .2s,box-shadow .2s;
}
.kit-seg__btn:hover{color:#fff}
.kit-seg__btn .rec-star{font-size:1.05em;margin:0;cursor:inherit}
.kit-seg__btn[aria-pressed=true]{
  color:#1c1f24;text-shadow:0 1px 0 rgba(255,255,255,.7);
  background:radial-gradient(120% 70% at 50% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 58%),linear-gradient(180deg,#f7f8fa,#cfd3d8 35%,#8d939b 52%,#c4c9cf 80%,#f1f2f4);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 1px rgba(0,0,0,.3),0 3px 8px rgba(0,0,0,.45);
}
.kit-seg__btn:focus-visible{outline:2px solid #fbf7ef;outline-offset:2px}
.kit-pager{display:flex;align-items:center;justify-content:center;gap:1rem;padding:.25rem 1rem 1.4rem}
.kit-pager[hidden]{display:none}
.kit-pager__at{min-width:4.5rem;text-align:center;font:700 .85rem/1 var(--as-font-mono,IBM Plex Mono,monospace);letter-spacing:.08em;color:#f7efdf;text-shadow:0 1px 2px rgba(0,0,0,.6)}

/* —— Timeline + scrub orb —— */
.kit-orb__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin:0 0 .9rem}
.kit-orb__top .shelf-rec-bar{margin:0 0 0 auto}
.kit-orb__chrono{border-radius:22px 22px 0 0}
.kit-orb__rail{cursor:pointer;touch-action:none}
.kit-orb__rail .shelf-timeline__orb{transition:left .2s cubic-bezier(.3,1.4,.5,1),transform .15s ease,box-shadow .15s ease}
.kit-orb__rail .shelf-timeline__rail-fill{transition:width .2s cubic-bezier(.3,1.4,.5,1)}
.is-scrubbing .kit-orb__rail .shelf-timeline__orb{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1)}
.kit-orb__ticks{position:absolute;inset:0;pointer-events:none}
.kit-orb__tick{position:absolute;top:50%;width:2px;height:calc(10px + var(--n,1) * 2px);translate:-50% -50%;border-radius:1px;background:linear-gradient(180deg,rgba(255,240,215,.85),rgba(255,240,215,.35));box-shadow:0 0 4px rgba(255,220,170,.35)}
.kit-orb__ends{display:flex;justify-content:space-between;margin:.35rem 0 0;font:600 .72rem/1 var(--as-font-mono,IBM Plex Mono,monospace);color:#f7efdf;opacity:.8}
.kit-orb__case .kit-rows{min-height:6rem}
.kit-switch{display:inline-flex;align-items:center;gap:.6rem;padding:.35rem .9rem .35rem .4rem;border-radius:999px;text-decoration:none;font-weight:700;font-size:.85rem;color:var(--as-text);background:color-mix(in srgb,var(--as-text) 8%,transparent);border:1px solid color-mix(in srgb,var(--as-text) 18%,transparent)}
.kit-switch__track{position:relative;width:2.6rem;height:1.4rem;border-radius:999px;background:linear-gradient(180deg,#1a1009,#3b2616);box-shadow:inset 0 2px 5px rgba(0,0,0,.7)}
.kit-switch__knob{position:absolute;top:.15rem;left:.15rem;width:1.1rem;height:1.1rem;border-radius:50%;transition:left .25s cubic-bezier(.3,1.4,.5,1);
  background:radial-gradient(circle at 34% 28%,#fff 0 10%,rgba(255,255,255,0) 30%),conic-gradient(from 200deg,#f4f4f4,#8a8a8a 12%,#e6e6e6 25%,#6d6d6d 38%,#fafafa 52%,#7c7c7c 66%,#dedede 80%,#909090 90%,#f4f4f4);
  box-shadow:0 0 0 1px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.5)}
.kit-switch.is-on .kit-switch__track{background:linear-gradient(180deg,color-mix(in srgb,var(--as-accent) 60%,#000),var(--as-accent))}
.kit-switch.is-on .kit-switch__knob{left:1.35rem}

/* —— Record store bins —— */
.kit-bins__store{padding:clamp(1rem,3vw,1.75rem) clamp(.6rem,3vw,1.75rem) 0}
.kit-bins__tabs{display:flex;flex-wrap:wrap;gap:.35rem .4rem;justify-content:center;margin:0 0 1.4rem}
.kit-bins__tab{
  position:relative;display:inline-flex;align-items:baseline;gap:.4rem;padding:.55rem .8rem .45rem;border:0;border-radius:6px 6px 2px 2px;cursor:pointer;
  font:800 .85rem/1 var(--as-font-mono,IBM Plex Mono,monospace);letter-spacing:.04em;color:#2b1f12;
  background:
    repeating-linear-gradient(90deg,rgba(120,90,50,.06) 0 2px,transparent 2px 5px),
    linear-gradient(180deg,#efe2c6,#d9c49c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(110,80,40,.25),0 4px 10px rgba(0,0,0,.4);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s;
}
.kit-bins__tab:hover{transform:translateY(-2px)}
.kit-bins__tab[aria-current=true]{transform:translateY(-4px);background:repeating-linear-gradient(90deg,rgba(120,90,50,.06) 0 2px,transparent 2px 5px),linear-gradient(180deg,#fff7e4,#ecd9b0);box-shadow:inset 0 1px 0 #fff,0 0 0 2px var(--as-accent),0 8px 16px rgba(0,0,0,.45)}
.kit-bins__tab-n{font-size:.68rem;font-weight:700;opacity:.6}
.kit-bins__tab:focus-visible{outline:2px solid #fbf7ef;outline-offset:3px}
.kit-bins__crate{
  position:relative;width:min(100%,calc(var(--bin-w,236px) + 5rem));margin:0 auto;padding:2.6rem 2.5rem 0;
  border-radius:10px 10px 0 0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.55),transparent 2.5rem,transparent calc(100% - 2.5rem),rgba(0,0,0,.55)),
    linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.25) 40%,rgba(0,0,0,.5)),
    var(--wood,none) 30% 0/420px auto,#2c1a0e;
  box-shadow:inset 0 0 0 1px rgba(255,236,205,.08),inset 0 18px 40px rgba(0,0,0,.6);
}
.kit-bins__stack{position:relative;display:flex;flex-direction:column;align-items:center;perspective:1100px;padding-bottom:calc(var(--bin-w,236px) * .08)}
.kit-bins__rec{
  --strip:clamp(24px,calc(var(--bin-w,236px) * .14),36px);
  position:relative;display:block;padding:0;border:0;background:none;cursor:pointer;color:inherit;
  margin-top:calc(var(--strip) - var(--bin-w,236px));
  transform-origin:50% 100%;transform:rotateX(9deg) rotate(var(--tilt,0deg));
  transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .3s ease;
  filter:brightness(calc(.72 + var(--i,0) / (var(--n,1) + 1) * .3));
}
.kit-bins__rec:first-child{margin-top:0}
.kit-bins__rec:hover,.kit-bins__rec:focus-visible{transform:translateY(calc(var(--strip) * -.55)) rotateX(4deg) rotate(var(--tilt,0deg));filter:brightness(1.05)}
.kit-bins__rec.is-pulled{transform:translateY(calc(var(--bin-w,236px) * -.36)) rotateX(0) rotate(calc(var(--tilt,0deg) * -1));filter:brightness(1.08)}
.kit-bins__rec:focus-visible{outline:none}
.kit-bins__rec:focus-visible .kit-sleeve{outline:2px solid #fbf7ef;outline-offset:3px}
.kit-bins__rec.is-pulled .kit-sleeve .vinyl-sleeve{box-shadow:0 0 0 2px var(--as-accent),0 22px 40px rgba(0,0,0,.65)}
.kit-bins__tab-title{
  position:absolute;top:5px;left:8px;max-width:calc(100% - 16px);z-index:4;padding:.18rem .45rem .16rem;border-radius:3px;pointer-events:none;
  font:700 .66rem/1.1 var(--as-font-ui,system-ui,sans-serif);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#1e140b;background:linear-gradient(180deg,#fbf3e2,#e9dbc0);box-shadow:0 1px 3px rgba(0,0,0,.45);
}
.kit-bins__rec.is-pulled .kit-bins__tab-title{opacity:0}
.kit-bins__lip{
  position:relative;z-index:2;height:calc(var(--bin-w,236px) * .3);margin:calc(var(--bin-w,236px) * -.3) -2.5rem 0;pointer-events:none;
  display:grid;place-items:center;border-radius:4px 4px 10px 10px;
  background:
    linear-gradient(180deg,rgba(255,236,200,.22),rgba(255,236,200,0) 14%,rgba(0,0,0,0) 70%,rgba(0,0,0,.4)),
    var(--wood,none) 0 60%/520px auto,#5a3520;
  box-shadow:0 -10px 24px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,240,210,.32),inset 0 0 0 1px rgba(20,8,2,.5);
}
.kit-bins__stencil{
  padding:.35rem .8rem;border-radius:3px;font:800 clamp(.8rem,2.4vw,1.05rem)/1 var(--as-font-mono,IBM Plex Mono,monospace);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(250,240,220,.88);text-shadow:0 1px 0 rgba(0,0,0,.6);border:2px solid rgba(250,240,220,.55);mix-blend-mode:screen;
}
.kit-bins .kit-detail{margin:0 calc(clamp(.6rem,3vw,1.75rem) * -1)}
@media (prefers-reduced-motion:reduce){.kit-bins__rec{transition:none}}

/* —— Wall shelf: sleeve faces on the spines, sleeve edges on the drawers, detail under the cabinet —— */
.wall-shelf-scene.kit-wall{grid-template-columns:minmax(0,1fr);max-height:none}
.kit-wall .wall-shelf__cabinet{max-height:min(72vh,720px);border-right:0;border-bottom:1px solid rgba(255,220,170,.08)}
.kit-wall__detail{grid-column:1;grid-row:2;position:relative;z-index:1}
.kit-wall{--wall-spine-w:56px}
.kit-wall .wall-spine{
  --dim:.5;border-radius:3px 3px 0 0;overflow:hidden;isolation:isolate;
  background:
    linear-gradient(90deg,rgba(255,255,255,.34) 0 1px,rgba(255,255,255,.08) 1px 3px,transparent 3px calc(100% - 4px),rgba(0,0,0,.35) calc(100% - 4px),rgba(0,0,0,.6) calc(100% - 1px)),
    linear-gradient(180deg,rgba(255,255,255,.1),transparent 18%,transparent 70%,rgba(0,0,0,.42)),
    radial-gradient(130% 70% at 50% 45%,transparent 45%,rgba(0,0,0,.32)),
    linear-gradient(rgba(14,10,7,var(--dim)),rgba(14,10,7,var(--dim))),
    var(--cover-img,none) center/cover no-repeat,
    var(--art,linear-gradient(90deg,color-mix(in srgb,var(--sleeve,#555) 70%,#000),var(--sleeve,#555)));
  box-shadow:1px 0 0 rgba(0,0,0,.55),5px 3px 14px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.07);
  filter:saturate(.72) brightness(.9);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,filter .4s ease;
}
.kit-wall .wall-spine.has-cover{--dim:.24;filter:saturate(.88) brightness(.93)}
.kit-wall .wall-spine::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.3) 47%,rgba(255,255,255,.05) 54%,transparent 62%);
  background-size:300% 100%;background-position:115% 0;mix-blend-mode:screen;transition:background-position .9s cubic-bezier(.2,.8,.2,1);
}
.kit-wall .wall-spine:hover,.kit-wall .wall-spine:focus-visible{transform:translateY(-8px) rotate(-1deg);filter:saturate(.98) brightness(1.08);box-shadow:1px 0 0 rgba(0,0,0,.55),10px 10px 24px rgba(0,0,0,.55)}
.kit-wall .wall-spine:hover::after,.kit-wall .wall-spine:focus-visible::after{background-position:-15% 0}
.kit-wall .wall-spine.is-active{transform:translateY(-12px);filter:saturate(1) brightness(1.1);outline:0;box-shadow:0 0 0 2px var(--as-accent),10px 10px 26px rgba(0,0,0,.55)}
.kit-spine__hybrid{
  position:absolute;inset:30% 0 0;z-index:0;pointer-events:none;opacity:var(--hybrid-op,.65);
  background:linear-gradient(rgba(14,10,7,.2),rgba(14,10,7,.2)),var(--hybrid-img) center/cover no-repeat;
  -webkit-mask:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 22%,#000 55%);mask:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 22%,#000 55%);
}
.kit-wall .wall-spine .wall-spine__text{
  inset:auto;top:9px;left:50%;transform:translateX(-50%);z-index:1;max-height:calc(100% - 18px);padding:.6em .34em;border-radius:999px;font-size:.78rem;
  background:rgba(5,5,7,.88);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);box-shadow:0 3px 10px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.1);text-shadow:none;
}
.kit-wall .wall-spine__text .rec-star{writing-mode:horizontal-tb;font-size:.95em;margin:.15em 0 0}
.kit-edge.wall-shelf__peek-edge{
  width:9px;height:40px;border-radius:1px 2px 0 0;opacity:.95;
  background:
    linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px calc(100% - 2px),rgba(0,0,0,.55) calc(100% - 2px)),
    linear-gradient(180deg,rgba(255,255,255,.12),transparent 30%,rgba(0,0,0,.35)),
    var(--cover-img,none) center/auto 100% no-repeat,
    var(--art,var(--sleeve,#555));
  box-shadow:1px 2px 4px rgba(0,0,0,.5);
}
.kit-edge.wall-shelf__peek-edge:nth-child(odd){height:37px}
.kit-edge.wall-shelf__peek-edge:nth-child(3n){height:42px}
.wall-shelf__tier.is-open .kit-edge.wall-shelf__peek-edge{opacity:.4;height:32px}
.kit-wall .kit-add{min-height:var(--wall-spine-h,210px);margin:.4rem 1.1rem 1rem}

/* —— Night dial —— */
.kit-dial{padding:clamp(1rem,3vw,2rem) clamp(.5rem,3vw,2rem) 0;
  background:
    radial-gradient(80% 60% at 50% 42%,rgba(255,200,140,.18),transparent 65%),
    radial-gradient(140% 100% at 50% 40%,transparent 45%,rgba(0,0,0,.6)),
    var(--wood,none) center/cover,#2a170c}
.kit-dial{--dial-r:300px;--cover:96px;--ring:.755}
.kit-dial__stage{position:relative;width:min(100%,680px);aspect-ratio:1;margin:0 auto;touch-action:manipulation}
.kit-dial__gl{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.kit-dial__wheel{
  position:absolute;inset:3%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,transparent 0 62%,rgba(0,0,0,.25) 100%),var(--wood,none) center/cover,#5a3825;
  box-shadow:0 0 0 calc(var(--dial-r) * .034) #1b130d,0 0 0 calc(var(--dial-r) * .045) #c9a352,0 30px 60px rgba(0,0,0,.6);
}
.kit-dial__sectors{
  position:absolute;inset:3.5%;border-radius:50%;
  background:
    repeating-conic-gradient(from calc(-180deg / var(--n,12)),transparent 0 calc(360deg / var(--n,12) - .7deg),#d8b25e 0 calc(360deg / var(--n,12))),
    repeating-conic-gradient(from calc(-180deg / var(--n,12)),rgba(255,230,190,.22) 0 calc(360deg / var(--n,12)),rgba(0,0,0,.28) 0 calc(720deg / var(--n,12)));
  -webkit-mask:radial-gradient(circle,transparent 0 21%,#000 21.5%);mask:radial-gradient(circle,transparent 0 21%,#000 21.5%);
}
.kit-dial__pointer{position:absolute;left:50%;top:50%;z-index:4;width:0;height:0;pointer-events:none;filter:drop-shadow(4px 7px 5px rgba(0,0,0,.5))}
.kit-dial__pointer span{
  position:absolute;left:0;bottom:0;width:calc(var(--dial-r) * .1);height:calc(var(--dial-r) * .985);translate:-50% 0;
  background:linear-gradient(90deg,#7d838b,#f4f6f8 48%,#9aa0a8 52%,#6c727a);
  clip-path:polygon(50% 0,58% 5%,60% 27%,72% 85%,72% 100%,28% 100%,28% 85%,40% 27%,42% 5%);
}
.has-gl .kit-dial__wheel,.has-gl .kit-dial__pointer{visibility:hidden}
.kit-dial__gl-top{position:absolute;inset:0;z-index:4;width:100%;height:100%;pointer-events:none;filter:drop-shadow(5px 9px 6px rgba(0,0,0,.45))}
.kit-dial__covers{position:absolute;inset:0;z-index:3;pointer-events:none;filter:drop-shadow(5px 9px 8px rgba(0,0,0,.5))}
.kit-dial__ring{position:absolute;inset:0;will-change:transform}
.kit-dial__cover{
  position:absolute;left:50%;top:50%;width:var(--cover);height:var(--cover);margin:calc(var(--cover) / -2) 0 0 calc(var(--cover) / -2);
  padding:0;border:0;border-radius:3px;background:none;cursor:pointer;pointer-events:auto;
  transform:rotate(var(--a)) translateY(calc(var(--dial-r) * var(--ring) * -1));
  transition:scale .3s cubic-bezier(.2,.8,.2,1),filter .3s ease;
}
.kit-dial__cover .kit-sleeve{width:100%}
.kit-dial__cover:hover,.kit-dial__cover:focus-visible{scale:1.07;outline:none}
.kit-dial__cover:focus-visible .vinyl-sleeve{outline:2px solid #fbf7ef;outline-offset:3px}
.is-spinning .kit-dial__cover{transition:none}
.is-spinning .kit-dial__cover.is-under{filter:brightness(1.18)}
.kit-dial__cover.is-picked{scale:1.1}
.kit-dial__cover.is-picked .vinyl-sleeve{box-shadow:0 0 0 2px #f6d77f,0 0 26px rgba(246,215,127,.55),0 12px 26px rgba(0,0,0,.6)}
.kit-dial__spin{
  position:absolute;left:50%;top:50%;z-index:5;width:calc(var(--dial-r) * .36);aspect-ratio:1;translate:-50% -50%;
  display:grid;place-items:center;padding:0;border:0;border-radius:50%;cursor:pointer;
  font:800 clamp(.72rem,calc(var(--dial-r) * .062),1.15rem)/1 var(--as-font-display,Syne,system-ui,sans-serif);letter-spacing:.2em;text-transform:uppercase;color:#262a30;
  text-shadow:0 1px 0 rgba(255,255,255,.75);
  background:
    radial-gradient(circle at 34% 26%,rgba(255,255,255,.95) 0 9%,rgba(255,255,255,0) 30%),
    radial-gradient(circle at 50% 50%,#e9ebee 0 54%,#9aa0a7 55% 57%,transparent 58%),
    conic-gradient(from 200deg,#f4f4f4,#8a8a8a 12%,#e6e6e6 25%,#6d6d6d 38%,#fafafa 52%,#7c7c7c 66%,#dedede 80%,#909090 90%,#f4f4f4);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 2px 2px rgba(255,255,255,.9),inset 0 -3px 5px rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.6);
  transition:scale .15s ease,box-shadow .2s ease;
}
.kit-dial__spin span{padding-left:.2em}
.kit-dial__spin::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.25) 42%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.25) 58%,transparent 70%) 160% 0/260% 100% no-repeat;
}
.kit-dial__spin.is-ready::after{animation:kit-spin-sheen .9s cubic-bezier(.4,0,.2,1)}
@keyframes kit-spin-sheen{0%{opacity:1;background-position:160% 0}85%{opacity:1}100%{opacity:0;background-position:-60% 0}}
.kit-dial__spin:hover{scale:1.04}
.kit-dial__spin:active{scale:.95;box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 3px 6px rgba(0,0,0,.4),0 4px 10px rgba(0,0,0,.55)}
.kit-dial__spin:focus-visible{outline:3px solid #fbf7ef;outline-offset:4px}
.kit-dial__spin:disabled{cursor:progress}
.is-spinning .kit-dial__spin span{opacity:.55}
.kit-dial__hint{
  width:fit-content;max-width:calc(100% - 2rem);margin:1rem auto 1.25rem;padding:.45rem .9rem .42rem;border-radius:6px;text-align:center;font-size:.9rem;
  background:linear-gradient(180deg,#fbf7ef,#efe6d6);color:#2a1a0e;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 12px rgba(0,0,0,.35);
}
.kit-dial .kit-detail{margin:0 calc(clamp(.5rem,3vw,2rem) * -1)}
@media (prefers-reduced-motion:reduce){.kit-dial__cover,.kit-dial__spin{transition:none}}
.kit-dial-shell{container:dial / inline-size}
.kit-dial__deck{position:relative}
.kit-dial__head{
  position:absolute;top:clamp(.75rem,2vw,1.25rem);left:clamp(1rem,2.6vw,1.75rem);right:clamp(.75rem,2vw,1.25rem);z-index:5;
  display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;pointer-events:none;
}
.kit-dial__head .kit-dial__tools{pointer-events:auto}
.kit-dial__mini{display:none}
.kit-dial__sound{position:absolute;right:0;bottom:0;z-index:6;width:3.1rem;height:3.1rem;transition:opacity .2s,filter .2s}
.kit-dial__sound svg{width:28px;height:28px}
.kit-dial__sound .kit-dial__sound-off,.kit-dial__sound.is-muted .kit-dial__sound-waves{display:none}
.kit-dial__sound.is-muted .kit-dial__sound-off{display:inline}
.kit-dial__sound.is-muted{opacity:.6;filter:grayscale(1) brightness(.82)}
.kit-dial__sound.is-muted:hover{opacity:.85}

/* Carved into the walnut: the letters are the same wood, darker and deeper, with a lit lower lip and a shaded
   upper edge, so the logo reads as cut into the case rather than printed on it. */
.kit-dial__brand{
  margin:.2rem 0 0;display:grid;justify-items:start;gap:.42em;
  pointer-events:none;user-select:none;-webkit-user-select:none;
}
.kit-dial__brand span{
  display:block;color:transparent;font-family:Didot,'Bodoni 72','Bodoni MT',Georgia,serif;font-weight:600;line-height:1;text-transform:uppercase;
  background:
    linear-gradient(180deg,rgba(8,3,1,.86) 0%,rgba(18,8,3,.7) 38%,rgba(40,20,8,.42) 72%,rgba(70,38,16,.3) 100%),
    var(--wood,none) 18% 8%/900px auto,#3a2213;
  -webkit-background-clip:text;background-clip:text;
  text-shadow:0 .8px 0 rgba(255,228,190,.34),0 1.4px .6px rgba(255,214,160,.12),0 -.6px 0 rgba(0,0,0,.55),.5px 0 0 rgba(255,220,180,.08);
}
.kit-dial__brand-top{font-size:clamp(.62rem,1.1vw,.8rem);letter-spacing:.62em;padding-left:.12em}
.kit-dial__brand-main{font-size:clamp(.92rem,1.85vw,1.3rem);letter-spacing:.34em;padding-left:.06em;position:relative;padding-top:.5em}
.kit-dial__brand-main::before{
  content:"";position:absolute;top:0;left:.1em;width:2.4em;height:1px;
  background:linear-gradient(90deg,rgba(10,4,1,.7),rgba(10,4,1,.5) 70%,transparent);box-shadow:0 1px 0 rgba(255,226,186,.22);
}
.kit-dial__tools{display:grid;justify-items:end;gap:.6rem}
.kit-dial__change svg{flex:none}
.kit-dial__change:disabled{opacity:.6}
.kit-toggle{padding:.4rem 1rem .4rem .45rem}
.kit-toggle .kit-switch__track{width:2.5rem;height:1.35rem}
.kit-toggle .kit-switch__knob{width:1.05rem;height:1.05rem}
.kit-toggle.is-on .kit-switch__track{background:linear-gradient(180deg,color-mix(in srgb,var(--as-accent) 55%,#000),var(--as-accent));box-shadow:inset 0 2px 5px rgba(0,0,0,.5),0 0 10px color-mix(in srgb,var(--as-accent) 45%,transparent)}
.kit-toggle.is-on .kit-switch__knob{left:1.3rem}
.kit-toggle:disabled{cursor:not-allowed}
/* Without room beside the wheel the logo and buttons become a row above it, and the picked record shows in a
   small box under Spin instead of only below the wheel, out of sight. */
@container dial (max-width:1000px){
  .kit-dial__head{position:static;margin:0 0 clamp(.6rem,2.5vw,1rem)}
  .kit-dial__tools{gap:.45rem}
  .kit-dial__tools .kit-chrome{padding:.5rem .85rem;font-size:.7rem}
  .kit-dial__tools .kit-toggle{padding:.35rem .8rem .35rem .4rem}
  .kit-dial__tools .kit-switch__track{width:2.1rem;height:1.15rem}
  .kit-dial__tools .kit-switch__knob{width:.85rem;height:.85rem}
  .kit-dial__tools .kit-toggle.is-on .kit-switch__knob{left:1.1rem}
  .kit-dial__sound{width:2.6rem;height:2.6rem}
  .kit-dial__sound svg{width:24px;height:24px}
  .kit-dial__mini:not([hidden]){
    position:absolute;left:50%;top:calc(50% + var(--dial-r) * .2);z-index:5;translate:-50% 0;width:calc(var(--dial-r) * .84);
    display:flex;align-items:center;gap:.4rem;padding:.25rem .5rem .25rem .25rem;border-radius:999px;
    background:linear-gradient(180deg,#fbf7ef,#efe6d6);color:#2a1a0e;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 0 0 1px rgba(60,36,16,.35),0 6px 14px rgba(0,0,0,.45);
    animation:kit-mini-in .35s cubic-bezier(.2,.8,.2,1);
  }
  .kit-dial.has-mini .kit-dial__hint{display:none}
}
@container dial (max-width:520px){
  .kit-dial__brand-top{font-size:.56rem}
  .kit-dial__brand-main{font-size:.82rem;letter-spacing:.28em}
  .kit-dial__tools .kit-chrome{padding:.42rem .7rem;font-size:.62rem;letter-spacing:.08em}
}
@keyframes kit-mini-in{from{opacity:0;transform:translateY(-6px) scale(.94)}}
.kit-dial__mini .kit-play{width:calc(var(--dial-r) * .17);height:calc(var(--dial-r) * .17);min-width:1.75rem;min-height:1.75rem;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 1px rgba(0,0,0,.35),0 2px 5px rgba(0,0,0,.35)}
.kit-dial__mini .kit-play svg{width:55%;height:55%}
.kit-dial__mini-text{
  min-width:0;flex:1;display:grid;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;
  font:600 clamp(.66rem,calc(var(--dial-r) * .062),.8rem)/1.2 var(--as-font-ui,system-ui,sans-serif);
}
.kit-dial__mini-text b,.kit-dial__mini-text small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.kit-dial__mini-text small{font-weight:500;font-size:.86em;opacity:.7}

/* —— Spin the wheel: a button as tall as Play recommended that opens the Night dial over the page —— */
.kit-rec-row{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.6rem;margin:0 0 .9rem}
.kit-rec-row>.shelf-rec-bar{margin:0}
.kit-rec-row:empty{display:none}
.kit-spin-bar{display:inline-flex;align-items:center;gap:.6rem}
.block-shelf>.kit-spin-bar{margin:.5rem 0}
.kit-spin-bar.is-hidden-item .kit-spin-pill{opacity:.45;filter:grayscale(.6)}
.kit-spin-pill{
  position:relative;display:inline-flex;align-items:center;gap:.6rem;padding:.6rem 1.05rem .6rem .7rem;border-radius:999px;cursor:pointer;
  font:600 .82rem/1 var(--as-font-ui,inherit);letter-spacing:.14em;text-transform:uppercase;color:#fbe7b0;text-shadow:0 1px 2px rgba(0,0,0,.75);
  border:1.5px solid transparent;
  background:
    linear-gradient(180deg,rgba(255,226,180,.24),rgba(255,226,180,0) 42%,rgba(0,0,0,.12) 58%,rgba(0,0,0,.42)) padding-box,
    url('/media/placeholders/common/shelf-walnut-sm.webp') 30% 50%/340px auto padding-box,
    linear-gradient(#5a3520,#3a2012) padding-box,
    linear-gradient(135deg,#fff2b8,#d9a227 35%,#7a5306 60%,#f6d36b) border-box;
  box-shadow:inset 0 1px 0 rgba(255,236,200,.35),inset 0 -2px 3px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.35);
  transition:transform .2s ease,box-shadow .25s ease;
}
.kit-spin-pill:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,236,200,.4),inset 0 -2px 3px rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.4),0 0 22px rgba(244,196,48,.3)}
.kit-spin-pill:active{transform:translateY(0) scale(.98)}
.kit-spin-pill:focus-visible{outline:2px solid #fbf7ef;outline-offset:3px}
.kit-spin-pill__icon{
  position:relative;flex:none;width:1.9rem;height:1.9rem;border-radius:50%;
  background:
    radial-gradient(circle,#e6e8eb 0 16%,#5b6067 17% 19%,transparent 20%),
    repeating-conic-gradient(from -22.5deg,transparent 0 44deg,#d8b25e 0 45deg),
    repeating-conic-gradient(from -22.5deg,#e9cfa8 0 45deg,#7a4c2c 0 90deg);
  box-shadow:0 0 0 2px #1b130d,0 0 0 3px #c9a352,0 2px 4px rgba(0,0,0,.45);
  transition:rotate .9s cubic-bezier(.2,.8,.2,1);
}
.kit-spin-pill__icon::after{
  content:"";position:absolute;left:50%;bottom:50%;width:4px;height:44%;translate:-50% 0;
  background:linear-gradient(90deg,#7d838b,#fff 48%,#6c727a);clip-path:polygon(50% 0,100% 30%,70% 100%,30% 100%,0 30%);
  transform-origin:50% 100%;transition:rotate .9s cubic-bezier(.2,.8,.2,1);
}
.kit-spin-pill:hover .kit-spin-pill__icon{rotate:200deg}
.kit-spin-pill:hover .kit-spin-pill__icon::after{rotate:-200deg}
.kit-spin-pill__icon.is-stack{border-radius:3px;background:linear-gradient(135deg,#c9572c,#4a1a0c);box-shadow:4px -3px 0 -1px #2f6f8f,0 0 0 1px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.45);rotate:-6deg}
.kit-spin-pill__icon.is-stack::after{display:none}
.kit-spin-pill:hover .kit-spin-pill__icon.is-stack{rotate:4deg}
@media (max-width:760px){
  .kit-rec-row{margin-bottom:.6rem}
  .kit-spin-pill{gap:.4rem;padding:.38rem .7rem .38rem .45rem;font-size:.68rem;letter-spacing:.1em;border-width:1px}
  .kit-spin-pill__icon{width:1.4rem;height:1.4rem}
}
@media (prefers-reduced-motion:reduce){.kit-spin-pill,.kit-spin-pill__icon{transition:none}}

/* —— Shelf block shown small: a launcher that opens the presentation over the page —— */
.kit-launch{
  display:inline-flex;align-items:center;gap:1rem;margin:.5rem 0;padding:.55rem 1.4rem .55rem .55rem;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,236,205,.18);color:#f7efdf;font:700 .95rem/1.2 var(--as-font-display,Syne,system-ui,sans-serif);text-align:left;
  background:linear-gradient(180deg,rgba(255,236,205,.1),transparent 50%),var(--wood,none) center/cover,#3a2515;
  box-shadow:inset 0 1px 0 rgba(255,236,205,.2),0 14px 34px rgba(0,0,0,.45);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease;
}
.kit-launch:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,236,205,.25),0 20px 44px rgba(0,0,0,.55)}
.kit-launch:focus-visible{outline:2px solid var(--as-accent);outline-offset:3px}
.kit-launch__label small{display:block;margin-top:.2rem;font:500 .78rem/1.3 var(--as-font-ui,system-ui,sans-serif);opacity:.75}
.kit-launch__wheel{
  position:relative;flex:none;width:92px;aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle,#e6e8eb 0 14%,#8d939b 15% 16%,transparent 17%),
    repeating-conic-gradient(from -15deg,transparent 0 29deg,#d8b25e 0 30deg),
    repeating-conic-gradient(from -15deg,rgba(255,230,190,.25) 0 30deg,rgba(0,0,0,.3) 0 60deg),
    var(--wood,none) center/cover,#5a3825;
  box-shadow:0 0 0 4px #1b130d,0 0 0 5.5px #c9a352,0 8px 18px rgba(0,0,0,.55);
  transition:rotate 1.2s cubic-bezier(.2,.8,.2,1);
}
.kit-launch__wheel::after{
  content:"";position:absolute;left:50%;bottom:50%;width:8px;height:38%;translate:-50% 0;transform-origin:50% 100%;
  background:linear-gradient(90deg,#7d838b,#f4f6f8 48%,#6c727a);clip-path:polygon(50% 0,70% 22%,62% 100%,38% 100%,30% 22%);
  transition:rotate 1.2s cubic-bezier(.2,.8,.2,1);
}
.kit-launch:hover .kit-launch__wheel{rotate:300deg}
.kit-launch:hover .kit-launch__wheel::after{rotate:-300deg}
.kit-launch__stack{position:relative;flex:none;width:92px;height:92px}
.kit-launch__stack i{position:absolute;inset:14% 10% 6%;border-radius:3px;box-shadow:0 6px 14px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.14);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.kit-launch__stack i:nth-child(1){background:linear-gradient(135deg,#c9572c,#4a1a0c);transform:rotate(-9deg) translate(-8px,2px)}
.kit-launch__stack i:nth-child(2){background:linear-gradient(135deg,#2f6f8f,#0d2633);transform:rotate(4deg) translate(4px,-3px)}
.kit-launch__stack i:nth-child(3){background:radial-gradient(circle at 60% 40%,#f4c430 0 18%,transparent 19%),linear-gradient(135deg,#3a3a3a,#111)}
.kit-launch:hover .kit-launch__stack i:nth-child(1){transform:rotate(-14deg) translate(-14px,2px)}
.kit-launch:hover .kit-launch__stack i:nth-child(2){transform:rotate(8deg) translate(10px,-6px)}
@media (prefers-reduced-motion:reduce){.kit-launch__wheel,.kit-launch__wheel::after{transition:none}}

.kit-pop{
  position:fixed;inset:0;z-index:90;overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(.5rem,3vw,2.5rem) clamp(.5rem,3vw,2.5rem) 7rem;
  background:rgba(8,5,3,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  visibility:hidden;opacity:0;transition:opacity .3s ease,visibility 0s linear .3s;
}
.kit-pop.is-open{visibility:visible;opacity:1;transition:opacity .3s ease}
.kit-pop__panel{position:relative;width:min(1100px,100%);margin:0 auto;padding-top:3.25rem;transform:translateY(16px) scale(.98);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.kit-pop.is-open .kit-pop__panel{transform:none}
.kit-pop__close{
  position:absolute;top:0;right:0;width:2.6rem;height:2.6rem;padding:0;border-radius:50%;display:grid;place-items:center;gap:0;letter-spacing:0;line-height:0;
}
.kit-pop__close svg{display:block;filter:drop-shadow(0 1px 0 rgba(255,255,255,.7))}
html.has-kit-pop{overflow:hidden}
@media (prefers-reduced-motion:reduce){.kit-pop,.kit-pop__panel{transition:none}}
.block-shelf{margin:0}