:root{
  --paper:#EFE2C6; --paper2:#F6EDD8; --wall:#E6D6B4; --ink:#1F202B;
  --orange:#D2583A; --brick:#A5432C; --green:#5E7E6E; --green2:#3F6358;
  --slate:#3E4A66; --mustard:#C99A45; --oak:#A45A36; --floor:#B47547;
  --f-display:'Alfa Slab One', Georgia, serif;
  --f-type:'Courier Prime', 'Courier New', monospace;
  --f-marker:'Mansalva', 'Bradley Hand', cursive;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--wall);color:var(--ink);font-family:var(--f-type);-webkit-font-smoothing:antialiased}
button{font-family:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- views ---------- */
.view{position:fixed;inset:0;overflow:hidden;overflow:clip;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.view.active{opacity:1;visibility:visible;transition:opacity .45s ease,visibility 0s}
.view.measuring{visibility:visible;opacity:0;transition:none}
.grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:50;opacity:.6;background-image:url(img/grain-tile.webp);background-size:256px 256px;background-repeat:repeat}
.stage{position:absolute;left:0;top:0;width:1440px;height:900px;transform-origin:0 0}
.stage > *{position:absolute}

/* ---------- shared bits ---------- */
.pill{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px 0 14px;background:var(--paper2);border:2.5px solid var(--ink);border-radius:23px;box-shadow:3px 3px 0 var(--slate);font-size:16px;font-weight:700;cursor:pointer;white-space:nowrap}
.pill:hover{background:#fff7e6}
.pill:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--slate)}
.round{width:48px;height:48px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:var(--paper2);border:2.5px solid var(--ink);border-radius:24px;box-shadow:3px 3px 0 var(--slate);cursor:pointer}
.round:hover{background:#fff7e6}
.round:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--slate)}
.round:disabled{opacity:.4;cursor:default;transform:none;box-shadow:3px 3px 0 var(--slate)}
.paper{background:var(--paper2);border:2.5px solid var(--ink);box-shadow:5px 5px 0 var(--slate)}
.needle-btn{display:inline-flex;align-items:center;gap:14px;min-height:74px;padding:0 30px 0 22px;background:var(--orange);color:var(--paper2);border:3px solid var(--ink);border-radius:40px;box-shadow:5px 5px 0 var(--slate);font-family:var(--f-display);font-size:27px;cursor:pointer}
.needle-btn:hover{background:#dc6445}
.needle-btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--slate)}

/* ---------- sleeve faces ---------- */
.face{position:absolute;inset:0;overflow:hidden;container-type:size}
.face svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.face .t{position:absolute;left:4.7cqw;top:2cqw;right:4.7cqw;font:6.4cqw/1.25 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.face .a{position:absolute;left:5cqw;top:11.4cqw;right:5cqw;font-size:5cqw;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---------- crate view ---------- */
#crateView{background:var(--wall);touch-action:none}
.recede-shade{position:absolute;inset:0;background:var(--ink);opacity:0;pointer-events:none;transition:opacity .5s ease;z-index:45}
#crateView.receded .recede-shade{opacity:.5}
.scene{left:0;top:0;overflow:visible}
.sign{left:48px;top:34px;width:296px;height:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;z-index:5;text-align:center}
.sign h1{margin:0;font:62px/1 var(--f-display);color:var(--orange);text-shadow:3px 3px 0 var(--slate)}
.sign p{margin:0;font-size:14px;font-weight:700}
.sleeves{left:0;top:0;width:1440px;height:900px;pointer-events:none}
.sleeve{position:absolute;left:0;top:0;width:300px;height:300px;transform-origin:50% 100%;transition:transform .42s cubic-bezier(.3,.7,.3,1),filter .42s ease,opacity .42s ease;pointer-events:auto;will-change:transform}
.sleeve button{position:relative;display:block;width:300px;height:300px;padding:0;margin:0;border:3px solid var(--ink);border-radius:3px;cursor:pointer;overflow:hidden;background:var(--paper);box-shadow:0 -5px 10px rgba(31,32,43,.3);transition:transform .2s ease,box-shadow .2s ease}
.sleeve.front button{box-shadow:6px 6px 0 rgba(31,32,43,.3)}
.sleeve.front button:hover,.sleeve.front button:focus-visible{transform:translateY(-14px);box-shadow:0 0 0 3px var(--orange),6px 10px 0 rgba(31,32,43,.3);outline:none}
.crate-front{left:480px;top:545px;z-index:20;overflow:visible;pointer-events:none}
.crate-label{left:616px;top:650px;width:208px;min-height:76px;padding:8px 10px 6px;background:var(--paper2);border:2px solid var(--ink);transform:rotate(-2deg);z-index:21;text-align:center;pointer-events:none}
.crate-label::before,.crate-label::after{content:"";position:absolute;top:-8px;width:34px;height:14px;background:var(--wall);opacity:.9}
.crate-label::before{left:-12px;transform:rotate(-30deg)}
.crate-label::after{right:-12px;transform:rotate(30deg)}
.crate-label b{display:block;font:26.9px/1.1 var(--f-marker);font-weight:400}
.crate-label span{display:block;margin-top:4px;font-size:15px;font-weight:700}
.mini-btn{white-space:nowrap;min-height:34px;padding:4px 12px;background:var(--paper2);border:2px solid var(--ink);border-radius:17px;font:700 13px var(--f-type);cursor:pointer;box-shadow:2px 2px 0 var(--slate)}
.mini-btn:hover{background:#fff7e6}
.ticks.long{align-items:center;gap:12px;min-width:230px}
.ticks .bar{position:relative;display:block;flex:1;height:12px;background:#C8C0A6;border:1.5px solid var(--ink)}
.ticks .bar b{position:absolute;left:0;top:0;bottom:0;background:var(--orange);transition:width .25s ease}
.ticks .count{font-weight:700;font-size:14px;white-space:nowrap}
.flip{position:absolute;left:50%;bottom:max(20px, env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:16px;z-index:60}
.ticks{display:flex;align-items:flex-end;gap:4px;height:38px;padding:6px 14px;background:var(--paper2);border:2px solid var(--ink)}
.ticks i{display:block;width:7px;height:14px;background:#C8C0A6;border:1.5px solid var(--ink);transition:height .25s ease,background .25s ease}
.ticks i.on{height:22px;background:var(--orange)}
.tabs{position:absolute;left:0;right:0;top:0;display:none;touch-action:pan-x;align-items:center;gap:10px;padding:10px 12px;padding-top:max(10px, env(safe-area-inset-top));background:var(--paper2);border-bottom:2.5px solid var(--ink);z-index:60;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs .logo{position:sticky;left:-12px;z-index:2;align-self:stretch;display:flex;align-items:center;margin-left:-12px;padding:0 10px 0 12px;background:var(--paper2);font:26px/1 var(--f-display);color:var(--orange);text-shadow:2px 2px 0 var(--slate);flex:none}
.tabs button{flex:none;min-height:44px;padding:4px 12px 2px;background:var(--paper);border:2px solid var(--ink);border-radius:8px;font:16.8px/1.1 var(--f-marker);cursor:pointer}
.tabs button[aria-pressed="true"]{background:var(--ink);color:var(--paper2)}
.hint-line{position:absolute;left:0;right:0;display:none;text-align:center;font-size:13px;font-weight:700;z-index:60;pointer-events:none}
html.portrait .tabs{display:flex}
html.portrait .hint-line{display:block}
html.portrait .sign{display:none}
.np-chip{position:fixed;left:18px;bottom:max(22px, env(safe-area-inset-bottom));z-index:200;display:none;align-items:center;gap:10px;max-width:min(360px, 44vw);min-height:48px;padding:6px 16px 6px 8px;background:var(--ink);color:var(--paper2);border:2.5px solid var(--ink);border-radius:26px;box-shadow:3px 3px 0 var(--orange);cursor:pointer;font-size:14px;font-weight:700}
.np-chip.show{display:inline-flex}
.np-chip .disc{flex:none;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle,var(--orange) 0 28%,#1F202B 29%);border:2px solid var(--paper2);animation:spin 1.8s linear infinite}
.np-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.portrait .np-chip{left:auto;right:12px;bottom:auto;top:calc(max(10px, env(safe-area-inset-top)) + 70px)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- album view ---------- */
#albumView{background:#2F3A52}
.album-bg{position:absolute;inset:0;width:100%;height:100%}
.album-shade{position:absolute;inset:0;background:rgba(47,58,82,.3)}
.counter-band{position:absolute;left:0;right:0;bottom:0;height:26vh;background:var(--green);border-top:3px solid var(--ink)}
.counter-band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5vh;background:var(--oak);border-top:3px solid var(--ink)}
.album-top{position:absolute;left:0;right:0;top:0;padding:max(28px, env(safe-area-inset-top)) 36px 0;z-index:60;display:flex}
.album-layout{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,72px);padding:100px 40px 60px;overflow-y:auto}
.album-art{--art:clamp(220px, min(33vw, 60vh), 470px);position:relative;flex:none;width:var(--art);height:var(--art);margin-right:calc(var(--art) * .4)}
.vinyl{position:absolute;inset:2.5%;transform:translateX(0) rotate(-40deg);transition:transform .75s cubic-bezier(.25,.8,.3,1)}
.album-art.out .vinyl{transform:translateX(45%) rotate(0deg)}
.vinyl svg{width:100%;height:100%;display:block}
.big-sleeve{position:absolute;inset:0;border:4px solid var(--ink);border-radius:3px;box-shadow:8px 8px 0 rgba(31,32,43,.35);background:var(--paper)}
.album-card{flex:none;width:min(500px,100%);padding:30px 32px 32px}
.album-card .row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.chip{padding:4px 14px 2px;background:var(--wall);border:2px solid var(--ink);font:19px/1.2 var(--f-marker)}
.album-card .artist{margin-top:22px;font-size:25px;font-weight:700}
.album-card h2{margin:4px 0 0;font:clamp(40px,4.4vw,62px)/1.05 var(--f-display);color:var(--orange);text-shadow:3px 3px 0 var(--slate);overflow-wrap:anywhere}
.album-card h2:focus{outline:none}
.album-card .meta{margin-top:14px;display:flex;align-items:center;gap:20px;font-size:18px;flex-wrap:wrap}
.dot{display:inline-block;width:10px;height:10px;border-radius:5px;border:1.5px solid var(--ink);margin-right:8px;vertical-align:1px}
.album-card .needle-btn{margin-top:28px}
.album-note svg,.pending-note svg{flex:none}
.album-note{margin-top:26px;display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--paper);border:2px dashed var(--ink);font-size:15px;line-height:1.45}
.album-nav{margin-top:24px;display:flex;gap:14px;flex-wrap:wrap}

/* ---------- needle view ---------- */
#needleView{background:var(--wall)}
.cone{transition:opacity 1.2s ease;opacity:.4}
#needleView.dim .cone{opacity:.85}
.dim-layer{position:absolute;inset:0;pointer-events:none;z-index:40;opacity:0;transition:opacity 1.2s ease;background:radial-gradient(ellipse 52% 58% at var(--cx,50%) var(--cy,60%), rgba(20,20,30,0) 0%, rgba(20,20,30,.12) 38%, rgba(20,20,30,.72) 88%)}
#needleView.dim .dim-layer{opacity:1}
.deck-wrap{left:300px;top:190px;width:620px;height:579px;perspective:1500px;perspective-origin:50% -20%}
.deck3d{position:absolute;inset:0;transform:rotateX(58deg);transform-style:preserve-3d}
.deck3d > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.deck-front{position:absolute;left:4%;width:92%;top:94.3%;height:30px;transform-origin:top;transform:rotateX(-90deg);background:var(--slate);border:3px solid var(--ink);border-top:0}
.arm-shadow{transform:translateZ(0);filter:blur(3px);opacity:.3}
.arm-layer{transform:translateZ(calc(var(--lift, 22) * 1px))}
.sparks{opacity:0}
.sparks.on{animation:sparks 2.6s ease-out forwards}
@keyframes sparks{0%{opacity:1}70%{opacity:.8}100%{opacity:0}}
.woofer-layer{position:absolute;left:1057px;top:434px;width:96px;height:96px;pointer-events:none;will-change:transform}
#needleView.thumping .woofer-layer{animation:thump .625s ease-out infinite}
@keyframes thump{0%,100%{transform:scale(1)}14%{transform:scale(1.08)}}
.tail{transform-box:fill-box;transform-origin:0% 100%}
#needleView.thumping .tail{animation:tail 1.25s ease-in-out infinite}
@keyframes tail{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(10deg)}}
.sway{transform-box:fill-box;transform-origin:50% 0%;animation:sway 7s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
.dust{animation:dust 9s ease-in-out infinite alternate}
@keyframes dust{0%{transform:translate(0,0);opacity:.15}50%{opacity:.85}100%{transform:translate(16px,-44px);opacity:.15}}
.nv-top{position:absolute;left:0;right:0;top:0;padding:max(24px, env(safe-area-inset-top)) 32px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;z-index:60;pointer-events:none}
.nv-top > *{pointer-events:auto}
.nv-left,.nv-right{display:flex;align-items:center;gap:14px}
.np-card{display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;background:var(--paper2);border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--slate);cursor:pointer;text-align:left;width:max-content;max-width:min(380px, 34vw);min-width:0}
.np-card .mini{position:relative;flex:none;width:52px;height:52px;border:2px solid var(--ink)}
.np-card .np-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.np-card .who{display:block;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-card .what{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:19px/1.15 var(--f-display);color:var(--orange);overflow-wrap:anywhere}
.nv-bottom{position:absolute;left:0;right:0;bottom:0;padding:0 32px max(22px, env(safe-area-inset-bottom));display:flex;align-items:flex-end;justify-content:center;gap:28px;z-index:60;pointer-events:none}
.nv-bottom > *{pointer-events:auto}
.nv-caption{width:360px;padding:14px 20px 16px;transform:rotate(-1.5deg)}
.nv-caption .ct{font:34px/1.05 var(--f-display);color:var(--orange);text-shadow:2px 2px 0 var(--slate)}
.nv-caption .cx{margin-top:6px;font-size:16px;line-height:1.4;font-weight:700}
.player-slot{position:relative;width:min(620px, 100%);height:152px;transform-origin:50% 100%;transform:scale(.6) translateY(40px);opacity:0;transition:transform .6s cubic-bezier(.3,.8,.3,1.1),opacity .4s ease}
.player-slot.open{transform:none;opacity:1}
.player-slot .tape{position:absolute;top:-10px;width:64px;height:18px;background:var(--wall);opacity:.92;z-index:2}
.player-slot iframe{display:block;width:100%;height:152px;border:0;border-radius:12px}
#embedHost{position:relative;width:100%;height:152px;border-radius:12px;background:#2B2D38;border:3px solid var(--ink);box-shadow:5px 5px 0 rgba(31,32,43,.4);overflow:hidden}
.pending-note{position:absolute;inset:0;display:flex;align-items:center;gap:16px;padding:0 22px;background:#F2D27A;border:2.5px solid var(--ink);transform:rotate(-1deg);font:20.2px/1.35 var(--f-marker);box-shadow:5px 5px 0 rgba(31,32,43,.3)}
.pending-note[hidden]{display:none}

/* ---------- flyer ---------- */
.flyer{position:fixed;display:none;z-index:500;border:4px solid var(--ink);border-radius:3px;box-shadow:10px 14px 0 rgba(31,32,43,.35);pointer-events:none;background:var(--paper)}

/* ---------- small screens ---------- */
@media (max-width: 900px), (max-aspect-ratio: 1/1){
  .album-layout{flex-direction:column;justify-content:flex-start;padding:92px 18px 40px;gap:26px}
  .album-art{--art:min(62vw, 440px, 40vh);margin-right:calc(var(--art) * .32)}
  .album-art.out .vinyl{transform:translateX(32%) rotate(0deg)}
  .album-card{padding:22px 20px 24px}
  .album-card .needle-btn{font-size:23px;min-height:64px}
  .counter-band{display:none}
  .nv-top{padding-left:14px;padding-right:14px}
  .np-card{display:none}
  .nv-bottom{flex-direction:column;align-items:stretch;gap:14px;padding-left:14px;padding-right:14px}
  .nv-caption{width:auto;transform:none;padding:10px 14px 12px}
  .nv-caption .ct{font-size:24px}
  .nv-caption .cx{font-size:14px}
  .player-slot{width:100%}
  .ticks{gap:3px;padding:6px 10px}
  .ticks i{width:5px}
  .pill .lbl-long{display:none}
  #needleBack,#albumBack{padding:0 14px}
}
@media (prefers-reduced-motion: reduce){
  .sway,.dust,.np-chip .disc,#needleView.thumping .woofer-layer,#needleView.thumping .tail{animation:none}
  .sleeve,.vinyl,.player-slot,.dim-layer,.cone{transition-duration:.01s}
}

[hidden]{display:none !important}
/* ---------- aisle ---------- */
.center{left:0;top:0;width:1440px;height:900px;z-index:10;pointer-events:none}
.center > *{position:absolute}
.aisle{left:0;top:0;width:1440px;height:900px;z-index:3;pointer-events:none}
.nb{position:absolute;left:0;top:0;width:480px;height:330px;padding:0;margin:0;background:none;border:0;cursor:pointer;transform-origin:50% 100%;transition:transform .5s cubic-bezier(.3,.7,.3,1),filter .5s ease,opacity .5s ease;pointer-events:auto}
.nb svg{position:absolute;left:0;top:0;width:480px;height:330px;overflow:visible}
.nb .tab{position:absolute;left:50%;top:-58px;transform:translateX(-50%) rotate(var(--rot,0deg));white-space:nowrap;padding:8px 20px 6px;background:var(--paper2);border:3px solid var(--ink);border-bottom:0;border-radius:12px 12px 0 0;font:31.4px/1.1 var(--f-marker);transition:transform .2s ease}
.nb.guest .tab{background:#F2D27A}
.nb.blind .tab{background:#D4B68A}
.nb:hover .tab,.nb:focus-visible .tab{transform:translateX(-50%) translateY(-10px)}
.stamp{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;width:88px;height:88px;border:3px solid #B23A24;border-radius:50%;color:#B23A24;font:700 14px/1.05 var(--f-type);text-transform:none;transform:rotate(-14deg);background:rgba(246,237,216,.55)}
.guest-sticker{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:50%;background:#F2D27A;border:3px solid #1F202B;box-shadow:2px 3px 0 rgba(31,32,43,.3);transform:rotate(-12deg);pointer-events:none}
.guest-sticker::before{content:"";position:absolute;inset:6px;border-radius:50%;border:2px dashed #B23A24}
.guest-sticker::after{content:"";position:absolute;right:4px;bottom:9px;width:20px;height:15px;background:#FBEDBE;border-radius:0 0 14px 2px;transform:rotate(-24deg);box-shadow:-1px -1px 0 rgba(31,32,43,.3)}
.guest-sticker span{position:relative;font:19px/1.05 var(--f-marker);color:#B23A24;padding:0 12px}
.center .guest-sticker{left:838px;top:622px;width:98px;height:98px;z-index:22}
.nb .guest-sticker{left:316px;top:182px;width:122px;height:122px;z-index:2}
.nb .guest-sticker span{font-size:22px}
.drop-sign{left:386px;top:22px;width:240px;height:138px;padding:0;cursor:pointer;font-family:var(--f-type);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#2B2D38;border:5px solid #A45A36;box-shadow:inset 0 0 0 2px #1F202B,3px 3px 0 rgba(31,32,43,.3);color:#F4ECD6;text-align:center;z-index:5}
.drop-sign b{font:30.2px/1 var(--f-marker);font-weight:400}
.drop-sign span{font-size:14px;font-weight:700;color:#E6D6B4}
.dir-card{left:444px;top:180px;width:146px;min-height:66px;padding:10px 10px 8px;background:var(--paper2);border:2px solid var(--ink);transform:rotate(-2deg);z-index:6;cursor:pointer;text-align:left;box-shadow:3px 3px 0 rgba(31,32,43,.25);transition:transform .2s ease}
.dir-card:hover,.dir-card:focus-visible{transform:rotate(0deg) translateY(-3px)}
.dir-card::before{content:"";position:absolute;left:62px;top:-8px;width:14px;height:14px;border-radius:7px;background:var(--orange);border:2px solid var(--ink)}
.dir-card b{display:block;font:18px/1.1 var(--f-marker);font-weight:400;color:var(--brick)}
.dir-card span{display:block;margin-top:4px;font-size:13px;font-weight:700}
.hint-card{left:448px;top:256px;width:140px;padding:8px 10px;background:#EFE2C6;border:2px solid var(--ink);transform:rotate(1.5deg);z-index:6;font-size:13px;font-weight:700;line-height:1.45}
.blind-sticky{left:96px;top:318px;width:168px;padding:12px 12px;background:#F2D27A;color:var(--ink);border:2px solid var(--ink);transform:rotate(3deg);z-index:6;font:19px/1.3 var(--f-marker);text-align:left;cursor:pointer;box-shadow:4px 4px 0 rgba(31,32,43,.25);transition:transform .2s ease}
.blind-sticky:hover,.blind-sticky:focus-visible{transform:rotate(1deg) translateY(-3px)}
.crate-label .stamp{right:-58px;top:-40px;width:78px;height:78px;font-size:12px}
.crate-label b{display:block;font:26.9px/1.1 var(--f-marker);font-weight:400}
.walk-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;color:var(--ink)}
.walk-btn .round{pointer-events:none}
.walk-btn[disabled]{opacity:.35;cursor:default}
.walk-left{left:14px}
.walk-right{right:14px}
.walk-lbl{max-width:120px;padding:3px 8px 1px;background:var(--paper2);border:2px solid var(--ink);font:15.7px/1.15 var(--f-marker);text-align:center}
html.portrait .walk-lbl{display:none}
html:not(.portrait) .walk-btn{top:63%}
html.portrait .walk-btn .round{width:42px;height:42px}
html.portrait .dir-card,html.portrait .hint-card,html.portrait .blind-sticky,html.portrait .drop-sign{display:none}
.tabs button.guest{background:#F2D27A}
.tabs button.blind{background:#D4B68A}
.tabs button.guest[aria-pressed="true"],.tabs button.blind[aria-pressed="true"]{background:var(--ink)}

/* ---------- talker cards ---------- */
.talker{left:798px;top:300px;width:176px;padding:14px 12px 10px;background:#FBF4E2;border:2px solid var(--ink);transform:rotate(5deg);z-index:25;pointer-events:none;box-shadow:3px 4px 0 rgba(31,32,43,.25);transition:opacity .3s ease}
.talker.off{opacity:0}
.talker .clip{position:absolute;left:66px;top:-14px;width:40px;height:20px;background:#3A3B48;border:2px solid var(--ink);border-radius:4px}
.talker small{display:block;font:700 12px/1 var(--f-type);color:var(--brick);letter-spacing:.02em}
.talker p{margin:6px 0 0;font:20.2px/1.25 var(--f-marker)}
.album-art .talker{left:auto;right:-26px;top:-22px;z-index:5}
@media (max-width: 900px), (max-aspect-ratio: 1/1){ .album-art .talker{right:-8px;top:-30px;width:150px} .album-art .talker p{font-size:15px} }

/* ---------- dig blind ---------- */
.face.kraft .hint{position:absolute;left:9cqw;right:9cqw;top:9cqw;font:8.1cqw/1.25 var(--f-marker);color:#2B1D10;transform:rotate(-3deg)}
.face.kraft svg{opacity:1}
.wrap-layer{position:absolute;inset:0;z-index:3;transform-origin:8% 92%;transition:transform 1.3s cubic-bezier(.45,.05,.25,1),opacity .6s ease .8s}
.wrap-layer .twine{transition:opacity .5s ease,transform .6s cubic-bezier(.3,.7,.3,1);transform-box:fill-box;transform-origin:50% 50%}
.wrap-layer.untie .twine{opacity:0;transform:translateY(26px) scale(1.06)}
.wrap-layer.untie{animation:parcel .55s ease-in-out}
@keyframes parcel{0%,100%{transform:rotate(0)}25%{transform:rotate(-1.6deg)}60%{transform:rotate(1.2deg)}}
.wrap-layer.tearing{transform:translate(-108%, 6%) rotate(-9deg);opacity:0}
.album-card.fresh .artist,.album-card.fresh h2,.album-card.fresh .meta{animation:freshIn .7s cubic-bezier(.2,.8,.3,1) both}
.album-card.fresh h2{animation-delay:.12s}
.album-card.fresh .meta{animation-delay:.24s}
@keyframes freshIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.album-cta{margin-top:28px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.album-card .album-cta .needle-btn{margin-top:0}
/* Dig blind: a gift tag hangs from the parcel's bow; pulling it (or clicking the paper) unwraps the record */
.wrap-layer{cursor:pointer}
.unwrap-tag{position:absolute;left:71%;top:83%;z-index:4;padding:.5em .9em .45em 1.45em;background:#F3E6C8;border:2px solid var(--ink);border-radius:2px 6px 6px 2px;clip-path:polygon(14% 0,100% 0,100% 100%,14% 100%,0 50%);font:max(15px, calc(var(--art) * .052))/1 var(--f-marker);color:var(--ink);white-space:nowrap;cursor:pointer;transform:rotate(9deg);transform-origin:0 50%;transition:transform .3s cubic-bezier(.3,.7,.3,1),opacity .4s ease}
.unwrap-tag::before{content:"";position:absolute;left:.55em;top:50%;width:.42em;height:.42em;margin-top:-.21em;border:2px solid var(--ink);border-radius:50%;background:var(--paper)}
.unwrap-tag:hover,.unwrap-tag:focus-visible{transform:rotate(3deg) translateY(-2px);background:#F7EDD6}
.unwrap-tag:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.wrap-layer:hover .unwrap-tag{transform:rotate(4deg)}
.wrap-layer.untie .unwrap-tag{opacity:0;transform:translateY(30px) rotate(24deg)}
@media (prefers-reduced-motion: reduce){.unwrap-tag{transition:none}}

/* ---------- the shop cat ---------- */
.floor-cat{left:26px;top:692px;width:250px;height:190px;padding:0;margin:0;background:none;border:0;cursor:pointer;z-index:12;transition:opacity .35s ease}
.floor-cat svg{width:250px;height:190px;overflow:visible}
.cat-awake{display:none}
html.music-on .cat-sleep{display:none}
html.music-on .cat-awake{display:inline}
html.music-on .cat-tail{animation:tail 1.25s ease-in-out infinite;transform-box:fill-box;transform-origin:0% 100%}
.zz{animation:zz 3.2s ease-in-out infinite}
@keyframes zz{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-6px)}}
.prr{position:absolute;pointer-events:none;font:24.6px/1 var(--f-marker);color:var(--brick);animation:prr 1.6s ease-out forwards;z-index:40;white-space:nowrap}
@keyframes prr{0%{opacity:0;transform:translateY(0)}15%{opacity:1}100%{opacity:0;transform:translateY(-60px)}}
.cat-blink .cat-eyes-closed{display:none}
.cat-eyes-open{display:none}
.cat-blink .cat-eyes-open{display:inline}
.record-cat{left:742px;top:386px;width:170px;height:180px;padding:0;background:none;border:0;cursor:pointer;z-index:30;opacity:0;pointer-events:none;transform:translate(46px, 26px) scale(.9);transform-origin:50% 100%;transition:opacity .4s ease,transform .55s cubic-bezier(.3,1.25,.5,1)}
.record-cat::after{content:"";position:absolute;left:34px;width:104px;bottom:-5px;height:12px;border-radius:50%;background:rgba(31,32,43,.32);z-index:-1}
.record-cat svg{width:170px;height:180px;overflow:visible}
#crateView.cat-on-record .record-cat{opacity:1;pointer-events:auto;transform:none}
#crateView.cat-on-record .floor-cat{opacity:0;pointer-events:none}

/* ---------- now-playing stand ---------- */
.np-stand{position:fixed;right:22px;bottom:max(22px, env(safe-area-inset-bottom));z-index:200;width:168px;height:196px;padding:0;margin:0;background:none;border:0;cursor:pointer;display:none;color:var(--ink)}
.np-stand.show{display:block;animation:standIn .45s cubic-bezier(.3,1.3,.5,1)}
@keyframes standIn{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.np-stand .disc{position:absolute;right:0;top:6px;width:118px;height:118px;border-radius:50%;background:radial-gradient(circle, var(--disc-label,#D2583A) 0 17%, #1F202B 18% 21%, transparent 22%),repeating-radial-gradient(circle,#1F202B 0 3px,#2E2F3A 3px 5px);border:3px solid var(--ink);animation:spin 1.8s linear infinite;animation-play-state:paused}
.np-stand.spinning .disc{animation-play-state:running}
.np-stand .disc::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--paper)}
.np-stand .cover{position:absolute;left:4px;top:26px;width:112px;height:112px;border:3px solid var(--ink);transform:rotate(-4deg);box-shadow:4px 4px 0 rgba(31,32,43,.3);overflow:hidden;background:var(--paper)}
.np-stand .ledge{position:absolute;left:0;right:10px;top:132px;height:16px;background:#A45A36;border:3px solid var(--ink);border-radius:3px;box-shadow:0 5px 0 #7A4428}
.np-stand .legs{position:absolute;left:20px;right:30px;top:146px;height:22px;border-left:5px solid #7A4428;border-right:5px solid #7A4428}
.np-stand .tag{position:absolute;left:16px;bottom:0;padding:4px 10px 2px;background:var(--paper2);border:2px solid var(--ink);font:16.8px/1.1 var(--f-marker);transform:rotate(-2deg);white-space:nowrap}
.np-stand .incense{position:absolute;left:-70px;bottom:6px;width:70px;height:236px;opacity:0;transition:opacity 1.8s ease;pointer-events:none}
.np-stand.spinning .incense{opacity:1}
.np-stand .incense svg{overflow:visible;display:block}
.np-stand .incense .wisp{opacity:0;transform-box:fill-box;transform-origin:50% 100%;filter:blur(.4px)}
.np-stand.spinning .incense .wisp{animation:wisp 8s linear infinite}
.np-stand .incense .w2{animation-delay:-2.7s!important}
.np-stand .incense .w3{animation-delay:-5.4s!important}
@keyframes wisp{0%{opacity:0;transform:translateY(14px) scaleX(.6)}14%{opacity:.6}60%{opacity:.32}100%{opacity:0;transform:translateY(-78px) scaleX(1.9) skewX(-9deg)}}
.np-stand .incense .glow{opacity:.3;filter:blur(3px)}
.np-stand.spinning .incense .glow{animation:ember 3.2s ease-in-out infinite}
@keyframes ember{0%,100%{opacity:.25}50%{opacity:.6}}
.np-stand:hover .cover,.np-stand:focus-visible .cover{transform:rotate(-1deg) translateY(-4px)}
html.portrait .np-stand{transform:scale(.72);transform-origin:100% 100%;bottom:calc(max(20px, env(safe-area-inset-bottom)) + 70px)}

/* ---------- store directory ---------- */
.dir-overlay{position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(31,32,43,.55)}
.dir-overlay[hidden]{display:none}
.dir-panel{position:relative;width:min(760px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:28px 30px 26px;background:#E8D5AC;transform:rotate(-.6deg)}
.dir-panel h2{margin:0;font:40px/1.05 var(--f-display);color:var(--orange);text-shadow:3px 3px 0 var(--slate)}
.dir-drop{margin:8px 0 18px;font-weight:700}
.dir-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.dir-panel h3{margin:0 0 8px;font:24.6px/1.1 var(--f-marker);font-weight:400}
.dir-panel ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.dir-item{width:100%;display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;background:var(--paper2);border:2px solid var(--ink);cursor:pointer;text-align:left;font-size:15px;font-weight:700}
.dir-item:hover{background:#fff7e6}
.dir-item .num{font:18px/1 var(--f-display);color:var(--slate);min-width:30px}
.dir-item .nm{flex:1;font:20.2px/1.15 var(--f-marker);font-weight:400}
.dir-item .ct{font-size:13px}
.dir-item em{font-style:normal;font-size:12px;padding:2px 6px;background:var(--orange);color:var(--paper2);border:1.5px solid var(--ink)}
.dir-item.guest{background:#F6E2A6}
.dir-item.blind{background:#E3CBA0;margin-top:18px}
.dir-close{position:absolute;right:16px;top:16px}
@media (max-width:700px){ .dir-cols{grid-template-columns:1fr} .dir-panel h2{font-size:32px} }

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:110px;z-index:700;max-width:min(560px, calc(100vw - 32px));padding:12px 18px;background:var(--paper2);border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--slate);font-weight:700;font-size:15px;line-height:1.4;transform:translate(-50%, 20px);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;overflow-wrap:anywhere}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- time of day ---------- */
html{--sky:#303B52}
html.tod-morning{--sky:#EBCB8F}
html.tod-day{--sky:#A9C0CC}
html.tod-evening{--sky:#8A4E5E}
html.tod-night{--sky:#1B2034}
.door-glass{fill:var(--sky);transition:fill 2s ease}
.sunbeams{opacity:0;transition:opacity 2s ease}
html.tod-morning .sunbeams{opacity:.5}
html.tod-day .sunbeams{opacity:.28}
.stars{opacity:0}
html.tod-night .stars,html.tod-evening .stars{opacity:.9}
.neon-tube{stroke:#6E5A52;transition:stroke 1s ease}
.neon-glow{opacity:0;transition:opacity 1s ease}
.neon-late{opacity:0}
html.tod-evening .neon-tube,html.tod-night .neon-tube{stroke:#FF8A5C}
html.tod-evening .neon-glow,html.tod-night .neon-glow{opacity:1;animation:flicker 7s linear infinite}
html.tod-night .neon-late{opacity:1}
@keyframes flicker{0%,92%,100%{opacity:1}93%{opacity:.4}94%{opacity:1}96%{opacity:.6}97%{opacity:1}}
.tod-tint{position:absolute;left:0;top:0;width:1440px;height:900px;pointer-events:none;z-index:24;mix-blend-mode:multiply;transition:background 2s ease}
html.tod-morning #crateStage .tod-tint{background:rgba(255,214,160,.14)}
html.tod-evening #crateStage .tod-tint{background:radial-gradient(ellipse calc(760px * var(--ts, 1)) calc(620px * var(--ts, 1)) at var(--tcx, 50%) var(--tcy, 50%), rgba(120,70,120,0) 0%, rgba(120,70,120,.12) 45%, rgba(70,40,90,.42) 100%)}
html.tod-night #crateStage .tod-tint{background:radial-gradient(ellipse calc(620px * var(--ts, 1)) calc(560px * var(--ts, 1)) at var(--tcx, 50%) var(--tcy, 50%), rgba(20,20,45,0) 0%, rgba(20,20,45,.25) 40%, rgba(12,14,34,.7) 100%)}
html.tod-morning #needleStage .tod-tint{background:rgba(255,214,160,.12)}
html.tod-evening #needleStage .tod-tint{background:radial-gradient(ellipse calc(760px * var(--ts, 1)) calc(620px * var(--ts, 1)) at var(--tcx, 50%) var(--tcy, 50%), rgba(120,70,120,0) 0%, rgba(70,40,90,.36) 100%)}
html.tod-night #needleStage .tod-tint{background:radial-gradient(ellipse calc(640px * var(--ts, 1)) calc(560px * var(--ts, 1)) at var(--tcx, 50%) var(--tcy, 50%), rgba(20,20,45,0) 0%, rgba(12,14,34,.62) 100%)}
html.tod-evening .album-shade{background:rgba(70,40,80,.4)}
html.tod-night .album-shade{background:rgba(14,16,34,.58)}
html.tod-night .cone,html.tod-evening .cone{opacity:.7}

/* ---------- blacklight (Konami) ---------- */
html.blacklight .scene,html.blacklight .crate-front,html.blacklight .nb svg,html.blacklight .lamps,html.blacklight .album-bg,html.blacklight .drop-sign{filter:invert(1) hue-rotate(180deg) saturate(2.2) brightness(1.08)}
html.blacklight .sleeve button{box-shadow:0 0 22px 4px rgba(190,110,255,.6)!important}
html.blacklight body::after{content:"";position:fixed;inset:0;z-index:650;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(ellipse at 50% 35%, rgba(170,70,255,.16), rgba(50,0,110,.34))}
html.blacklight .grain{opacity:.5}

@media (prefers-reduced-motion: reduce){
  .nb,.wrap-layer,.record-cat{transition-duration:.01s}
  .wrap-layer.untie,.album-card.fresh .artist,.album-card.fresh h2,.album-card.fresh .meta{animation:none}
  .np-stand .incense .wisp{animation:none!important;opacity:.25}
  .zz,html.music-on .cat-tail,.np-stand .disc,html.tod-evening .neon-glow,html.tod-night .neon-glow{animation:none}
}

.stamp[hidden]{display:none}
.tabs .tab-dir{background:var(--orange);color:var(--paper2)}
.cat-awake .eyes-happy{display:none}
.cat-blink .cat-awake .eyes-normal{display:none}
.cat-blink .cat-awake .eyes-happy{display:inline}


/* ---------- the shop window ---------- */
.shop-window{left:1052px;top:126px;z-index:24;pointer-events:none;overflow:visible}
.window-wall{left:1052px;top:126px;width:408px;height:352px;background:#E6D6B4;z-index:2}
html.portrait .window-wall{display:none}
.w-frame{transition:filter 2s ease}
html.tod-evening .w-frame{filter:url(#ink) brightness(.74) saturate(.9)}
html.tod-night .w-frame{filter:url(#ink) brightness(.42) saturate(.85)}
html.portrait .shop-window{display:none}
.win-sky{fill:#9DBBCB;transition:fill 2s ease}.win-horizon{fill:#C4D5D3;transition:fill 2s ease}
html.tod-morning .win-sky{fill:#F1D7A6}html.tod-morning .win-horizon{fill:#F7E5C0}
html.tod-evening .win-sky{fill:#6E4A6E}html.tod-evening .win-horizon{fill:#D9825A}
html.tod-night .win-sky{fill:#1B2034}html.tod-night .win-horizon{fill:#252A44}
.w-bld{fill:#9A8A7C}html.tod-morning .w-bld{fill:#B09A84}html.tod-evening .w-bld{fill:#5E4B5E}html.tod-night .w-bld{fill:#262838}
.w-win{fill:#6E6560}
html.tod-evening .w-win.lit,html.tod-night .w-win.lit{fill:#F2C46A}
html.tod-night .w-win.flick{animation:winFlick 23s steps(1) infinite}
@keyframes winFlick{0%,62%{fill:#F2C46A}63%,100%{fill:#3A3548}}
.w-street{fill:#A8957A}html.tod-evening .w-street{fill:#6E5A5A}html.tod-night .w-street{fill:#2B2D38}
.cloud{fill:#F6EDD8;opacity:.95}html.tod-morning .cloud{fill:#FBE6C4}html.tod-evening .cloud{fill:#E8A38A;opacity:.85}html.tod-night .cloud{fill:#2E3450;opacity:.8}
.cloud{animation:cloud 110s linear infinite}
.cloud.c2{animation-duration:150s;animation-delay:-70s}
.cloud.c3{animation-duration:175s;animation-delay:-30s}
@keyframes cloud{from{transform:translateX(-120px)}to{transform:translateX(420px)}}
.w-only,.w-stars,.w-birds,.w-walker,.w-leaf,.w-car,.w-steam,.street-glow,.street-cone{display:none}
html.tod-morning .w-morning,html.tod-day .w-day,html.tod-evening .w-evening,html.tod-night .w-night{display:inline}
html.tod-evening .w-stars,html.tod-night .w-stars{display:inline}
.w-stars circle{animation:twinkle 4.5s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
html.tod-evening .w-stars circle:nth-child(n+5){display:none}
.w-sunset{animation:sunset 40s ease-in-out infinite alternate}
@keyframes sunset{from{transform:translateY(-4px)}to{transform:translateY(8px)}}
html.tod-morning .w-birds{display:inline}
.flock{animation:birds 28s linear infinite}
@keyframes birds{0%{transform:translate(-70px,0)}38%{transform:translate(420px,-34px)}100%{transform:translate(420px,-34px)}}
.bird{animation:flap .45s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.4)}}
html.tod-day .w-walker,html.tod-evening .w-walker{display:inline}
.w-walker{animation:walker 46s linear infinite}
@keyframes walker{0%{transform:translateX(-30px)}36%{transform:translateX(420px)}100%{transform:translateX(420px)}}
.walker-bob{animation:bob .55s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-2px)}}
.leg1{animation:stride .55s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 0}
.leg2{animation:stride .55s ease-in-out infinite alternate-reverse;transform-box:fill-box;transform-origin:50% 0}
@keyframes stride{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
html.tod-day .w-leaf,html.tod-evening .w-leaf{display:inline}
.w-leaf{transform-box:fill-box;transform-origin:50% 50%;animation:leaf 26s ease-in-out infinite}
@keyframes leaf{0%{transform:translate(150px,40px) rotate(0deg);opacity:0}4%{opacity:1}22%{transform:translate(182px,150px) rotate(200deg)}40%{transform:translate(214px,268px) rotate(420deg);opacity:1}44%,100%{transform:translate(214px,268px) rotate(420deg);opacity:0}}
html.tod-evening .street-glow,html.tod-night .street-glow{display:inline;animation:streetOn 9s ease-in-out infinite}
html.tod-evening .street-cone,html.tod-night .street-cone{display:inline;opacity:.18}
html.tod-evening .street-bulb,html.tod-night .street-bulb{fill:#FFE6A8}
@keyframes streetOn{0%,100%{opacity:.85}48%{opacity:.85}50%{opacity:.35}52%{opacity:.9}54%{opacity:.5}56%{opacity:.85}}
html.tod-night .w-car{display:inline;animation:car 32s linear infinite}
@keyframes car{0%,86%{transform:translateX(0)}100%{transform:translateX(560px)}}
html.tod-morning .w-steam{display:inline}
.w-steam .wisp{opacity:0;animation:wisp 5s linear infinite;transform-box:fill-box;transform-origin:50% 100%}
@media (prefers-reduced-motion: reduce){
  .cloud,.flock,.bird,.w-walker,.walker-bob,.leg1,.leg2,.w-leaf,.w-stars circle,.w-sunset,.w-car,.w-steam .wisp,.street-glow,.w-win.flick{animation:none!important}
  .w-walker,.w-leaf,.w-car{display:none!important}
}

/* ---------- weather ---------- */
.wx-heavy-clouds,.wx-overcast,.w-fog-layer,.w-rain-layer,.w-snow-layer,.wx-snowcaps,.wx-sill-snow,.umbrella,.glass-drops{display:none}
html.wx-cloudy .wx-heavy-clouds,html.wx-rain .wx-heavy-clouds,html.wx-snow .wx-heavy-clouds{display:inline}
.wx-heavy-clouds .cloud{fill:#B9C0C4;opacity:.95}
html.tod-evening .wx-heavy-clouds .cloud{fill:#7E6474}html.tod-night .wx-heavy-clouds .cloud{fill:#252A3E}
.cloud.h1{animation-duration:200s;animation-delay:-40s}.cloud.h2{animation-duration:240s;animation-delay:-150s}
.wx-overcast{fill:#8E9AA3;opacity:0}
html.tod-evening .wx-overcast{fill:#4A3A4E}html.tod-night .wx-overcast{fill:#0E1120}
html.wx-cloudy .wx-overcast{display:inline;opacity:.22}
html.wx-rain .wx-overcast{display:inline;opacity:.42}
html.wx-snow .wx-overcast{display:inline;opacity:.3}
html.wx-fog .wx-overcast{display:inline;opacity:.18}
html.wx-cloudy .w-only{opacity:.4}
html.wx-rain .w-only,html.wx-snow .w-only,html.wx-fog .w-only{opacity:0}
html.wx-rain .w-stars,html.wx-snow .w-stars,html.wx-fog .w-stars,html.wx-rain .w-birds,html.wx-snow .w-birds,html.wx-fog .w-birds,html.wx-snow .w-leaf,html.wx-fog .w-leaf{display:none}
html.wx-cloudy .w-stars circle:nth-child(n+4){display:none}
html.wx-rain .stars,html.wx-snow .stars,html.wx-fog .stars{opacity:0}
html.wx-rain .w-rain-layer,html.wx-rain .glass-drops,html.wx-rain .umbrella{display:inline}
.rain-sheet{stroke:#D8E2E8;stroke-width:1.3;opacity:.65;animation:rain .7s linear infinite}
html.tod-night .rain-sheet,html.tod-evening .rain-sheet{stroke:#A8B4CC}
@keyframes rain{from{transform:translate(0,0)}to{transform:translate(-10px,270px)}}
.glass-drops circle{fill:#E3ECEF;opacity:.55;stroke:#1F202B;stroke-width:.6}
.glass-drops .slide{animation:slide 12s ease-in infinite}
@keyframes slide{0%,70%{transform:translateY(0)}100%{transform:translateY(90px);opacity:0}}
html.wx-rain .w-street{fill:#7F8A8E}html.tod-night.wx-rain .w-street{fill:#232633}
html.wx-snow .w-snow-layer,html.wx-snow .wx-snowcaps,html.wx-snow .wx-sill-snow{display:inline}
.snow-sheet{fill:#FBF8F2;animation:snow 16s linear infinite}
@keyframes snow{from{transform:translateY(0)}to{transform:translateY(270px)}}
.snow-sway{animation:sway2 5s ease-in-out infinite alternate}
@keyframes sway2{from{transform:translateX(-5px)}to{transform:translateX(5px)}}
html.wx-snow .w-street{fill:#E7E4DE}html.tod-night.wx-snow .w-street{fill:#8C90A0}
html.wx-fog .w-fog-layer{display:inline}
.fog-veil{fill:#E9E4DA;opacity:.35}
html.tod-night .fog-veil,html.tod-night .fog-band{fill:#5A607A}
.fog-band{fill:#EFEAE0;opacity:.6}
.fog-band.f1{animation:fog 26s ease-in-out infinite alternate}
.fog-band.f2{animation:fog 34s ease-in-out infinite alternate-reverse}
@keyframes fog{from{transform:translateX(-60px)}to{transform:translateX(60px)}}
.wx-tag{left:1084px;top:448px;z-index:26;padding:5px 12px 3px;background:var(--paper2);border:2px solid var(--ink);border-radius:3px;font:15.7px/1.1 var(--f-marker);color:var(--ink);cursor:pointer;transform:rotate(-3deg);box-shadow:2px 2px 0 rgba(31,32,43,.25);transition:transform .2s ease}
.wx-tag::before{content:"";position:absolute;left:50%;top:-12px;width:2px;height:12px;background:var(--ink)}
.wx-tag:hover,.wx-tag:focus-visible{transform:rotate(0) translateY(-2px)}
.wx-tag.real{background:#CFE3D8}
html.portrait .wx-tag{display:none}

/* ---------- ambient light from the playing record ---------- */
@property --amb1{syntax:'<color>';inherits:true;initial-value:#FFD9A0}
@property --amb2{syntax:'<color>';inherits:true;initial-value:#D2583A}
html{--amb1:#FFD9A0;--amb2:#D2583A;transition:--amb1 2.5s ease,--amb2 2.5s ease}
.ambient-wash{position:absolute;inset:0;pointer-events:none;z-index:44;opacity:0;transition:opacity 2.5s ease;mix-blend-mode:soft-light;
  background:radial-gradient(ellipse 60% 55% at 50% 30%, var(--amb1), transparent 72%),radial-gradient(ellipse 55% 50% at 88% 96%, var(--amb2), transparent 72%),radial-gradient(ellipse 50% 45% at 8% 92%, var(--amb2), transparent 72%)}
html.ambient-on .ambient-wash{opacity:.9}
.amb-cone{fill:var(--amb1);opacity:0;filter:blur(14px);transition:opacity 2.5s ease;pointer-events:none}
html.ambient-on .amb-cone{opacity:.3}
.np-stand::before{content:"";position:absolute;left:-60px;right:-30px;top:-40px;bottom:0;border-radius:50%;background:radial-gradient(closest-side, var(--amb1), transparent);opacity:0;transition:opacity 2.5s ease;z-index:-1;pointer-events:none}
html.ambient-on .np-stand.spinning::before{opacity:.55}
@media (prefers-reduced-motion: reduce){
  .rain-sheet,.snow-sheet,.snow-sway,.fog-band,.glass-drops .slide{animation:none!important}
  html{transition:none}
}

/* ---------- phones held sideways (compact) ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.compact .walk-lbl,html.compact .hint-line{display:none}
html.compact .walk-btn{top:50%}
html.compact .walk-btn .round{width:40px;height:40px}
html.compact .flip{left:auto;right:12px;transform:none;bottom:10px;gap:8px}
html.compact .flip .round{width:40px;height:40px}
html.compact .ticks{height:32px;padding:4px 8px;gap:3px}
html.compact .ticks i{width:5px}
html.compact .np-stand{transform:scale(.58);transform-origin:100% 0;top:10px;bottom:auto;right:12px}
@media (orientation: landscape) and (max-height: 520px){
  .album-top{padding-top:10px;padding-left:14px}
  .album-layout{flex-direction:row;align-items:center;justify-content:center;padding:56px 20px 12px;gap:18px}
  .album-art{--art:min(62vh, 250px);margin-right:calc(var(--art) * .3)}
  .album-art.out .vinyl{transform:translateX(30%) rotate(0deg)}
  .album-card{width:min(420px, 50vw);padding:14px 18px 16px;max-height:calc(100vh - 70px);overflow-y:auto}
  .album-card .artist{margin-top:10px;font-size:18px}
  .album-card h2{font-size:28px}
  .album-card .meta{margin-top:8px;font-size:15px}
  .album-card .album-cta{margin-top:14px}
  .album-card .needle-btn{font-size:19px;min-height:50px}
  .album-note{display:none}
  .album-nav{margin-top:12px}
  .album-art .talker{display:none}
  .counter-band{display:none}
  .nv-top{padding-top:8px}
  .nv-bottom{top:56px;bottom:10px;left:auto;right:12px;width:min(360px, 45vw);flex-direction:column;justify-content:flex-end;align-items:stretch;gap:10px;padding:0}
  .nv-caption{width:auto;transform:none;padding:8px 12px 10px}
  .nv-caption .ct{font-size:20px}
  .nv-caption .cx{font-size:13px}
  .player-slot{width:100%}
  .np-card{display:none}
  .app-card .mini{width:64px;height:64px}
}

/* ---------- listening mode ---------- */
.listen-panel{width:min(640px,100%)}
.listen-opts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px}
.listen-opt{position:relative;display:flex;flex-direction:column;gap:8px;text-align:left;padding:16px 16px 18px;background:var(--paper2);border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--slate);cursor:pointer;color:var(--ink)}
.listen-opt:hover{background:#fff7e6}
.listen-opt b{font:23px/1.1 var(--f-display);color:var(--orange);font-weight:400}
.listen-opt span{font-size:14px;line-height:1.45}
.listen-opt em{position:absolute;right:-8px;top:-14px;font:15.7px/1.2 var(--f-marker);font-style:normal;background:#F2D27A;border:2px solid var(--ink);padding:3px 9px 1px;transform:rotate(4deg)}
@media (max-width: 600px){ .listen-opts{grid-template-columns:1fr} }
.app-card{position:absolute;inset:0;display:flex;align-items:center;gap:14px;padding:14px;background:#2B2D38;border:3px solid var(--ink);border-radius:12px;box-shadow:5px 5px 0 rgba(31,32,43,.4);color:var(--paper2)}
.app-card .mini{position:relative;flex:none;width:110px;height:110px;border:2px solid var(--ink)}
.app-card .app-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.app-card .who{font-size:14px;font-weight:700;color:#D8D5C8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-card .what{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:20px/1.15 var(--f-display);color:var(--paper2)}
.app-card .app-note{font-size:13px;color:#B7BDBE}
.app-play{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 18px;background:var(--orange);color:var(--paper2);border:2.5px solid var(--ink);border-radius:26px;box-shadow:3px 3px 0 var(--ink);font:17px/1 var(--f-display);text-decoration:none;white-space:nowrap}
.app-play:hover{background:#dc6445}
.app-play:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
@media (max-width: 480px){ .app-card .mini{width:72px;height:72px} .app-card .what{font-size:17px} .app-play{padding:0 14px;font-size:15px} .app-card .app-note{display:none} }
.cap-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cap-actions .mini-btn{text-decoration:none;color:var(--ink);display:inline-flex;align-items:center}
.listen-pill .lbl-mode{font-weight:700}
@media (max-width: 400px){ .listen-pill .lbl-mode{display:none} .listen-pill{padding:0 12px;gap:0} .nv-left,.nv-right{gap:8px} }

/* ---------- vibe mode: only the record ---------- */
.vibe-toggle .lbl-long{margin-left:2px}
#needleView .nv-top,#needleView .nv-caption{transition:opacity .7s ease}
#needleStage.vibe-anim{transition:transform 1.1s cubic-bezier(.3,.7,.25,1)}
.vibe-vignette{position:absolute;inset:0;z-index:36;pointer-events:none;opacity:0;transition:opacity 1.2s ease;background:radial-gradient(ellipse 58% 62% at 50% 50%, rgba(8,8,16,0) 30%, rgba(8,8,16,.55) 70%, rgba(8,8,16,.86) 100%)}
.vibe-ctrl{position:absolute;right:max(22px, env(safe-area-inset-right));bottom:max(24px, env(safe-area-inset-bottom));z-index:70;display:none;align-items:center;gap:10px}
.vibe-play{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 0 0 3px;border:1.5px solid rgba(244,236,214,.55);background:rgba(20,20,28,.35);color:#F4ECD6;cursor:pointer;opacity:.26;transition:opacity .5s ease,background .3s ease}
.vibe-exit{display:none;min-height:40px;padding:0 16px;border-radius:20px;border:1.5px solid rgba(244,236,214,.55);background:rgba(20,20,28,.55);color:#F4ECD6;font:700 14px var(--f-type);cursor:pointer}
.vibe-play:hover,.vibe-play:focus-visible,.vibe-exit:hover{opacity:.95;background:rgba(20,20,28,.7)}
html.vibe .vibe-ctrl{display:flex}
html.vibe .vibe-vignette{opacity:1}
html.vibe.vibe-awake .vibe-play{opacity:.7}
html.vibe.vibe-reveal .vibe-play{opacity:.9}
html.vibe.vibe-reveal .vibe-exit{display:inline-flex;align-items:center}
html.vibe #needleView .nv-top,html.vibe #needleView .nv-caption{opacity:0;pointer-events:none}
html.vibe #needleView .nv-top *{pointer-events:none !important}
html.vibe #needleView .player-slot{position:fixed;left:50%;bottom:max(24px, env(safe-area-inset-bottom));width:min(420px, calc(100vw - 150px));height:80px;transform:translate(-50%, 16px);opacity:0;pointer-events:none;transition:opacity .7s ease,transform .7s ease;z-index:65}
html.vibe.vibe-reveal #needleView .player-slot.open{transform:translate(-50%, 0);opacity:1;pointer-events:auto}
html.vibe #needleView .player-slot iframe{height:80px !important}
html.vibe #needleView .player-slot .tape,html.vibe #needleView .pending-note{display:none}
html.vibe #needleView .app-card{padding:8px 10px;gap:10px}
html.vibe #needleView .app-card .mini{width:56px;height:56px}
html.vibe #needleView .app-card .who,html.vibe #needleView .app-card .app-note{display:none}
html.vibe #needleView .app-card .what{font-size:16px;-webkit-line-clamp:1}
html.vibe #needleView .app-play{min-height:44px;padding:0 14px;font-size:15px}
@media (max-width: 520px){
  html.vibe #needleView .player-slot{left:14px;right:14px;width:auto;bottom:calc(max(24px, env(safe-area-inset-bottom)) + 60px);transform:translateY(16px)}
  html.vibe.vibe-reveal #needleView .player-slot.open{transform:none}
  .vibe-ctrl{left:14px;right:14px;justify-content:flex-end;pointer-events:none}
  .vibe-ctrl > *{pointer-events:auto}
  .vibe-exit{margin-right:auto}
}
@media (prefers-reduced-motion: reduce){ #needleStage.vibe-anim{transition:none} .vibe-vignette,html.vibe #needleView .player-slot{transition:none} }

/* ---------- vibe mode, part two ---------- */
.wall-cover{left:300px;top:92px;width:214px;height:206px;z-index:1;opacity:0;transition:opacity 1.6s ease;pointer-events:none}
.wc-art{position:absolute;left:20px;top:8px;width:170px;height:170px;transform:rotate(-3deg);transform-origin:50% 100%;overflow:hidden;container-type:inline-size;box-shadow:0 0 0 3px #1F202B,8px 10px 16px rgba(0,0,0,.5)}
.wc-art .face{position:absolute;inset:0}
.wc-art::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg, rgba(255,236,196,.22) 0%, rgba(255,236,196,0) 45%, rgba(10,10,20,.28) 100%);pointer-events:none}
.wc-ledge{position:absolute;left:0;right:0;top:180px;height:12px;background:#7A4428;border:2px solid #1F202B;border-radius:2px;box-shadow:0 6px 10px rgba(0,0,0,.4)}
html.vibe .wall-cover.has-art{opacity:1}
.motes{left:0;top:0;width:1440px;height:900px;z-index:4;pointer-events:none;opacity:0;transition:opacity 2s ease;clip-path:polygon(584px 96px, 636px 96px, 920px 720px, 300px 720px)}
.mote{position:absolute;border-radius:50%;background:#FFF3D2;opacity:0;animation:mote var(--d) ease-in-out var(--dl) infinite;animation-play-state:paused}
@keyframes mote{0%{transform:translate(0,0);opacity:0}20%{opacity:var(--o)}55%{transform:translate(var(--dx),var(--dy))}82%{opacity:var(--o)}100%{transform:translate(calc(var(--dx) * 1.7),calc(var(--dy) * 1.9));opacity:0}}
html.vibe .motes{opacity:1}
html.vibe .mote{animation-play-state:running}
html.vibe.ambient-on .vibe-vignette{background:radial-gradient(ellipse 58% 62% at 50% 50%, rgba(8,8,16,0) 30%, color-mix(in srgb, var(--amb2) 24%, rgba(8,8,16,.58)) 70%, color-mix(in srgb, var(--amb1) 16%, rgba(8,8,16,.88)) 100%)}
html.vibe.ambient-on .amb-cone{opacity:.5}
html.vibe.ambient-on #needleView .ambient-wash{opacity:1}
.track-name{position:absolute;left:max(48px, env(safe-area-inset-left));bottom:max(44px, env(safe-area-inset-bottom));z-index:66;max-width:min(60vw, 720px);font:700 46px/1.05 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;color:#F4ECD6;text-shadow:0 2px 14px rgba(0,0,0,.55);opacity:0;transform:translateY(8px);transition:opacity 1.4s ease,transform 1.4s ease;pointer-events:none}
.track-name.show{opacity:.92;transform:none}
html:not(.vibe) .track-name{display:none}
@media (max-width: 520px){ .track-name{left:20px;right:20px;bottom:auto;top:max(30px, env(safe-area-inset-top));max-width:none;font-size:34px} }
@media (prefers-reduced-motion: reduce){ .mote{animation:none} .motes{display:none} .track-name{transition:opacity .3s} }

/* ---------- vibe mode: light wandering around the room ---------- */
.room-lights{position:absolute;inset:0;z-index:37;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 2.5s ease;mix-blend-mode:screen}
html.vibe .room-lights{opacity:1}
html.vibe:not(.music-on) .room-lights{opacity:.45}
.rl{position:absolute;border-radius:50%;will-change:transform,opacity}
.rl1{width:62vmax;height:62vmax;left:-24vmax;top:-20vmax;background:radial-gradient(circle, var(--amb1) 0%, rgba(0,0,0,0) 62%);animation:rl1 68s ease-in-out infinite alternate, rlBreathe 11s ease-in-out infinite alternate}
.rl2{width:56vmax;height:56vmax;right:-24vmax;bottom:-22vmax;background:radial-gradient(circle, var(--amb2) 0%, rgba(0,0,0,0) 62%);animation:rl2 86s ease-in-out infinite alternate, rlBreathe 14s ease-in-out -5s infinite alternate}
.rl3{width:38vmax;height:38vmax;left:34vw;top:30vh;background:radial-gradient(circle, #FFD9A0 0%, rgba(0,0,0,0) 60%);animation:rl3 52s ease-in-out infinite alternate, rlBreatheSoft 9s ease-in-out -3s infinite alternate}
@keyframes rl1{0%{transform:translate(0,0)}35%{transform:translate(38vw,14vh)}70%{transform:translate(52vw,46vh)}100%{transform:translate(14vw,58vh)}}
@keyframes rl2{0%{transform:translate(0,0)}40%{transform:translate(-34vw,-18vh)}75%{transform:translate(-56vw,-40vh)}100%{transform:translate(-12vw,-54vh)}}
@keyframes rl3{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-24vw,-16vh) scale(1.18)}100%{transform:translate(20vw,-6vh) scale(.9)}}
@keyframes rlBreathe{from{opacity:.20}to{opacity:.36}}
@keyframes rlBreatheSoft{from{opacity:.10}to{opacity:.2}}
html:not(.music-on) .rl{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){ .rl{animation:none;opacity:.12} }

/* ---------- performance ---------- */
.stage{will-change:transform}
.sleeve::after{content:"";position:absolute;inset:0;background:#15151f;opacity:var(--shade, 0);pointer-events:none;transition:opacity .42s ease}
/* phones and tablets: plain overlays instead of colour blending, which is slow on mobile Safari */
@media (hover: none) and (pointer: coarse){
  .tod-tint{mix-blend-mode:normal}
  .ambient-wash{mix-blend-mode:normal}
  html.ambient-on .ambient-wash{opacity:.3}
  .room-lights{mix-blend-mode:normal}
  html.vibe .room-lights{opacity:.55}
  html.vibe:not(.music-on) .room-lights{opacity:.25}
}

/* phones and tablets: overlay colours worked out to reproduce the original multiply tint without blending */
@media (hover: none) and (pointer: coarse){
  html.tod-morning .stage .tod-tint{background:rgba(255,205,150,.06)}
  html.tod-evening #crateStage .tod-tint{background:radial-gradient(ellipse calc(760px * var(--ts, 1)) calc(620px * var(--ts, 1)) at var(--tcx, 50%) var(--tcy, 50%), rgba(31,0,31,0) 0%, rgba(31,0,31,.08) 45%, rgba(9,0,28,.33) 100%)}
  html.tod-night #crateStage .tod-tint{background:radial-gradient(ellipse calc(620px * var(--ts, 1)) calc(560px * var(--ts, 1)) at var(--tcx, 50%) var(--tcy, 50%), rgba(0,0,16,0) 0%, rgba(0,0,16,.23) 40%, rgba(0,0,10,.65) 100%)}
  html.tod-evening #needleStage .tod-tint{background:radial-gradient(ellipse calc(760px * var(--ts, 1)) calc(620px * var(--ts, 1)) at var(--tcx, 50%) var(--tcy, 50%), rgba(14,0,30,0) 0%, rgba(14,0,30,.29) 100%)}
  html.tod-night #needleStage .tod-tint{background:radial-gradient(ellipse calc(640px * var(--ts, 1)) calc(560px * var(--ts, 1)) at var(--tcx, 50%) var(--tcy, 50%), rgba(0,0,11,0) 0%, rgba(0,0,11,.58) 100%)}
}

/* ---------- chalkboard countdown + reminder card ---------- */
.drop-sign .countdown{font:400 19px/1.1 'Caveat', var(--f-marker), cursive;font-weight:700;font-style:normal;color:#F2D27A}
.drop-sign .remind-link{font-size:12px;font-weight:700;color:#E6D6B4;text-decoration:underline;text-underline-offset:3px;opacity:.85}
.drop-sign:hover .remind-link,.drop-sign:focus-visible .remind-link{opacity:1;color:#F4ECD6}
.drop-sign:hover{box-shadow:inset 0 0 0 2px #1F202B,3px 5px 0 rgba(31,32,43,.35);transform:translateY(-2px)}
.drop-sign{transition:transform .2s ease,box-shadow .2s ease}
.tabs .tab-remind{background:#F2D27A;color:var(--ink)}
.remind-panel{width:min(720px,100%)}
.gone-panel{width:min(480px,100%)}
.gone-panel h2{padding-right:52px}
.gone-panel p{font-size:16px;line-height:1.5;font-weight:700;margin:10px 0 0}
.gone-panel .gone-actions{margin-top:18px}
.drop-panel .drop-kicker{margin:0 0 6px;padding-right:52px;font:400 19px/1.2 var(--f-marker);color:var(--slate)}
.remind-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:4px}
.remind-opt{padding:16px 16px 18px;background:var(--paper2);border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--slate)}
.remind-opt h3{margin:0 0 6px;font:24px/1.1 'Caveat', var(--f-marker), cursive;font-weight:700;color:var(--slate)}
.remind-opt > p{margin:0 0 12px;font-size:14px;line-height:1.5}
.remind-input{width:100%;box-sizing:border-box;min-height:46px;padding:0 12px;border:2px solid var(--ink);border-radius:6px;background:#fffaf0;font:16px var(--f-type);color:var(--ink)}
.remind-input:focus{outline:3px solid var(--orange);outline-offset:1px}
.remind-btn{margin-top:10px;width:100%;justify-content:center;font-size:20px;min-height:52px}
.remind-small{margin:8px 0 0;font-size:12px;opacity:.8}
.remind-msg{margin:8px 0 0;font:700 14px/1.4 var(--f-type)}
.remind-msg.ok{font:700 22px/1.2 'Caveat', var(--f-marker), cursive;color:var(--brick)}
.remind-cal{display:flex;flex-direction:column;gap:10px}
.remind-cal .pill{justify-content:flex-start;text-decoration:none;color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width: 640px){ .remind-grid{grid-template-columns:1fr} }

/* ---------- quieter side arrows ---------- */
.walk-btn{opacity:.5;transition:opacity .25s ease}
.walk-btn:hover,.walk-btn:focus-visible{opacity:1}
.walk-btn[disabled],.walk-btn[disabled]:hover{opacity:.18}
.walk-lbl{opacity:0;transform:translateY(-4px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.walk-btn:hover .walk-lbl,.walk-btn:focus-visible .walk-lbl{opacity:1;transform:none}

/* ---------- chalkboard nudge: a hand-drawn loop every few minutes ---------- */
.drop-sign{z-index:26}
.chalk-ring{position:absolute;left:-30px;top:-31px;width:300px;height:200px;pointer-events:none;overflow:visible;filter:drop-shadow(0 0 3px rgba(240,110,70,.55))}
.chalk-ring path{fill:none;stroke:#EC6A42;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.drop-sign.nudge .chalk-ring .loop{animation:chalkDraw 3.6s ease forwards}
.drop-sign.nudge .chalk-ring .spark{animation:chalkSpark 3.6s ease forwards}
.drop-sign.nudge .chalk-ring .spark:nth-of-type(3){animation-delay:.08s}
.drop-sign.nudge .chalk-ring .spark:nth-of-type(4){animation-delay:.16s}
@keyframes chalkDraw{0%{stroke-dashoffset:1;opacity:.95}30%{stroke-dashoffset:0;opacity:.95}78%{stroke-dashoffset:0;opacity:.9}100%{stroke-dashoffset:0;opacity:0}}
@keyframes chalkSpark{0%,30%{stroke-dashoffset:1;opacity:0}36%{opacity:1}42%{stroke-dashoffset:0;opacity:1}78%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.drop-sign.nudge{animation:signWiggle .7s ease 1.1s}
@keyframes signWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-1.4deg)}60%{transform:rotate(1deg)}}
.drop-sign.nudge .countdown{animation:chalkGlow 3.6s ease}
@keyframes chalkGlow{30%,72%{text-shadow:0 0 12px rgba(242,210,122,.85)}}
.tabs .tab-remind.nudge{animation:tabBounce .9s ease 2}
@keyframes tabBounce{0%,100%{transform:translateY(0)}35%{transform:translateY(-5px)}65%{transform:translateY(1px)}}
@media (prefers-reduced-motion: reduce){
  .drop-sign.nudge,.drop-sign.nudge .chalk-ring path,.tabs .tab-remind.nudge{animation:none}
  .drop-sign.nudge .countdown{animation:none;text-shadow:0 0 12px rgba(242,210,122,.85)}
}

/* ---------- calm turntable view: controls step back while a record plays ---------- */
/* every button and card fades out slowly; any move of the mouse (or a tap) brings them back quickly. The Spotify player stays (Spotify's rules). */
#needleBack,#needleView .nv-right,#vibeBtn,#npCard,#needleView .nv-caption,#needleView .play-hint{transition:opacity .45s ease}
#needleView.calm #needleBack,#needleView.calm .nv-right,#needleView.calm #vibeBtn,#needleView.calm #npCard,#needleView.calm .nv-caption,#needleView.calm .play-hint{opacity:0;pointer-events:none;transition:opacity 1.4s ease}
#needleView.calm{cursor:none}
/* Boris's call (Oct 8): the player fades almost away too, and comes straight back on any move or tap */
#needleView.calm .player-slot.open{opacity:.12;transition:transform .6s cubic-bezier(.3,.8,.3,1.1),opacity 1.4s ease}

/* ---------- the back of the sleeve ---------- */
.album-art{perspective:1600px}
.flip-card{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.3,.7,.25,1);z-index:2}
.album-art.flipped .flip-card{transform:rotateY(180deg)}
.flip-card .big-sleeve{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.sleeve-back{position:absolute;inset:0;transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;border:4px solid var(--ink);border-radius:3px;box-shadow:-8px 8px 0 rgba(31,32,43,.35);background:#EFE2C6;container-type:inline-size;overflow:hidden;color:var(--ink)}
.sleeve-back::before{content:"";position:absolute;left:50%;top:50%;width:84%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;box-shadow:inset 0 0 0 1.4cqw rgba(31,32,43,.06),0 0 0 .5cqw rgba(31,32,43,.04);pointer-events:none}
.sleeve-back::after{content:"";position:absolute;right:5%;top:3.5%;width:16cqw;height:7cqw;background:rgba(242,210,122,.35);border-radius:1cqw;transform:rotate(6deg);pointer-events:none}
.sb-paper{position:absolute;inset:0;overflow:auto;padding:5.5cqw 5.5cqw 6cqw;font-family:var(--f-type);scrollbar-width:thin}
.sb-head{display:flex;justify-content:space-between;align-items:baseline;gap:3cqw;border-bottom:.5cqw solid var(--ink);padding-bottom:2cqw;margin-bottom:3cqw}
.sb-title{font:5.4cqw/1.05 var(--f-display);color:var(--brick);min-width:0}
.sb-title small{display:block;margin-top:1cqw;font:700 3.1cqw/1.2 var(--f-type);color:var(--ink);letter-spacing:.04em;text-transform:uppercase}
.sb-lab{flex:none;max-width:38%;text-align:right;font:700 2.7cqw/1.3 var(--f-type)}
.sb-cols{display:grid;grid-template-columns:1.15fr 1fr;gap:4cqw}
.sb-cols h4{margin:0 0 1.2cqw;font:3.5cqw/1.1 var(--f-display);color:var(--slate);letter-spacing:.03em;text-transform:uppercase}
.sb-cols h4:not(:first-child){margin-top:3cqw}
.sb-tracks ol{list-style:none;margin:0;padding:0}
.sb-tracks li{display:flex;gap:1.6cqw;font-size:3cqw;line-height:1.45}
.sb-tracks li .n{flex:none;min-width:5cqw;font-weight:700;opacity:.7}
.sb-tracks li .t{flex:1;min-width:0}
.sb-tracks li .l{flex:none;opacity:.7}
.sb-people ul{list-style:none;margin:0;padding:0}
.sb-people li{font-size:2.9cqw;line-height:1.35;margin-bottom:1.2cqw}
.sb-people li b{display:block;font-weight:700}
.sb-people li i{font-style:normal;opacity:.78}
.sb-thin{font-size:3cqw;line-height:1.5;opacity:.85}
.sb-foot{margin-top:4cqw;padding-top:2cqw;border-top:.3cqw dashed rgba(31,32,43,.45);font-size:2.5cqw;line-height:1.5;opacity:.85}
.sb-foot a{color:inherit}
.sb-digger{margin-top:3.5cqw;font:700 4.6cqw/1.2 'Caveat', var(--f-marker), cursive;color:var(--slate);transform:rotate(-2deg);transform-origin:left}
.sb-digger::before{content:"The Digger: ";font-size:.8em;opacity:.75}
.flip-tab{position:absolute;left:14px;bottom:-20px;z-index:6;padding:5px 14px 3px;background:var(--paper2);border:2px solid var(--ink);border-radius:3px;box-shadow:2px 3px 0 rgba(31,32,43,.3);font:700 19px/1.1 'Caveat', var(--f-marker), cursive;color:var(--ink);cursor:pointer;transform:rotate(-4deg);transition:transform .2s ease}
.flip-tab:hover,.flip-tab:focus-visible{transform:rotate(-1deg) translateY(-2px)}
@media (prefers-reduced-motion: reduce){ .flip-card{transition:none} }

/* readable on small sleeves (phones): minimum text sizes, one column, the back scrolls */
.sb-title{font-size:max(5.4cqw, 16px)}
.sb-title small{font-size:max(3.1cqw, 10px)}
.sb-lab{font-size:max(2.7cqw, 9.5px)}
.sb-cols h4{font-size:max(3.5cqw, 11.5px)}
.sb-tracks li{font-size:max(3cqw, 11px)}
.sb-people li{font-size:max(2.9cqw, 11px)}
.sb-thin{font-size:max(3cqw, 11px)}
.sb-foot{font-size:max(2.5cqw, 9.5px)}
.sb-digger{font-size:max(4.6cqw, 17px)}
@container (max-width: 330px){ .sb-cols{grid-template-columns:1fr;gap:2px} .sb-people{margin-top:8px} .sb-paper{padding:14px 14px 16px} }
.album-art .talker{transition:opacity .3s ease}
.album-art.flipped .talker{opacity:0;pointer-events:none}

/* ---------- "press play" tag: lands a beat after the needle, gone once the music starts ---------- */
.play-hint{position:absolute;right:64px;top:-64px;z-index:3;display:flex;flex-direction:column;align-items:center;pointer-events:none;opacity:0;transform:translateY(-10px) rotate(-7deg);transform-origin:50% 0;transition:opacity .25s ease,transform .25s ease}
.play-hint.show{opacity:1;transform:rotate(-3deg);transition:opacity .2s ease,transform .5s cubic-bezier(.3,1.5,.5,1)}
.ph-tag{position:relative;padding:4px 14px 3px;background:#FBF4E2;border:2px solid var(--ink);box-shadow:3px 4px 0 rgba(31,32,43,.25);font:700 25px/1.1 'Caveat','Segoe Print','Bradley Hand',cursive;color:var(--ink);white-space:nowrap}
.ph-tape{position:absolute;left:50%;top:-10px;width:34px;height:14px;margin-left:-17px;background:var(--wall);opacity:.92;transform:rotate(3deg)}
.ph-arrow{display:block;margin:-2px 0 0 26px;overflow:visible}
.play-hint.show .ph-arrow{animation:phNudge 1.6s ease-in-out .6s infinite}
@keyframes phNudge{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,5px)}}
html.vibe .play-hint{display:none}
@media (max-width: 700px){ .play-hint{right:20px;top:-36px} .ph-arrow{display:none} .ph-tag{font-size:23px} }
@media (prefers-reduced-motion: reduce){ .play-hint,.play-hint.show{transition:opacity .2s ease;transform:rotate(-3deg)} .play-hint.show .ph-arrow{animation:none} }

/* ---------- vibe mode, part three: lighter room, stronger album light, easy on the CPU ---------- */
/* the record and its glints sit on their own layers: the graphics card spins the record (see app.js) */
.deck3d > .rec-layer{transform-origin:43.3333% 50%;will-change:transform;pointer-events:none}
.deck3d > .rec-glint{pointer-events:none}
/* views that aren't showing stop animating */
.view[inert] *{animation-play-state:paused !important}
/* the slow zoom around the turntable runs on the graphics card; --fx/--fy is the turntable's spot on screen (set in fit()) */
html.vibe #needleStage{animation:drift 140s ease-in-out 1.25s infinite}
@keyframes drift{0%,100%{scale:1;translate:0 0}50%{scale:1.045;translate:calc(var(--fx, 700px) * -0.045) calc(var(--fy, 450px) * -0.045)}}
/* nothing animates inside the big room drawing in vibe mode (each frame would repaint the whole room) */
html.vibe #needleView .tail,html.vibe #needleView .dust{animation:none}
/* lighter room, less grain */
html.vibe #needleView .grain{opacity:.26}
html.vibe #needleTint{opacity:.5}
html.vibe .vibe-vignette{background:radial-gradient(ellipse 76% 74% at 52% 50%, rgba(8,8,16,0) 42%, rgba(8,8,16,.3) 76%, rgba(8,8,16,.6) 100%)}
html.vibe.ambient-on .vibe-vignette{background:radial-gradient(ellipse 76% 74% at 52% 50%, rgba(8,8,16,0) 42%, color-mix(in srgb, var(--amb2v) 20%, rgba(8,8,16,.34)) 76%, color-mix(in srgb, var(--amb1v) 14%, rgba(8,8,16,.62)) 100%)}
/* the album's light: colours boosted from the cover (--amb1v/--amb2v), plain layers instead of colour blending */
.room-lights{mix-blend-mode:normal}
.rl1{background:radial-gradient(circle, var(--amb1v, var(--amb1)) 0%, rgba(0,0,0,0) 60%);animation:rl1 68s ease-in-out infinite alternate, rlBreathe 11s ease-in-out infinite alternate}
.rl2{background:radial-gradient(circle, var(--amb2v, var(--amb2)) 0%, rgba(0,0,0,0) 60%);animation:rl2 86s ease-in-out infinite alternate, rlBreathe 14s ease-in-out -5s infinite alternate}
@keyframes rlBreathe{from{opacity:.16}to{opacity:.3}}
html.vibe #needleView .ambient-wash{mix-blend-mode:normal}
html.vibe.ambient-on #needleView .ambient-wash{opacity:.34;background:radial-gradient(ellipse 60% 55% at 50% 30%, var(--amb1v), transparent 72%),radial-gradient(ellipse 55% 50% at 88% 96%, var(--amb2v), transparent 72%),radial-gradient(ellipse 50% 45% at 8% 92%, var(--amb2v), transparent 72%)}
html.vibe .amb-cone{filter:none}
html.vibe.ambient-on .amb-cone{fill:var(--amb1v);opacity:.22}
/* the cover on the wall and the speaker catch the light */
html.vibe .wall-cover{z-index:26}
html.vibe .wc-art{box-shadow:0 0 0 3px #1F202B,8px 10px 16px rgba(0,0,0,.45)}
html.vibe .speaker .spk-box{fill:#363846}
.cov-glow,.spk-glow{position:absolute;pointer-events:none;opacity:0;transition:opacity 2s ease;z-index:25}
.cov-glow{left:215px;top:-5px;width:380px;height:380px;background:radial-gradient(circle at 50% 50%, var(--amb1v, #FFD9A0) 0%, rgba(0,0,0,0) 62%)}
.spk-glow{left:925px;top:190px;width:360px;height:520px;background:radial-gradient(ellipse 50% 50% at 50% 55%, var(--amb2v, #FFD9A0) 0%, rgba(0,0,0,0) 66%)}
html.vibe .cov-glow{opacity:.16}
html.vibe.ambient-on .cov-glow{opacity:.4}
html.vibe.ambient-on .spk-glow{opacity:.42}
@media (hover: none) and (pointer: coarse){
  html.vibe .room-lights{opacity:.8}
  html.vibe:not(.music-on) .room-lights{opacity:.35}
  html.vibe.ambient-on #needleView .ambient-wash{opacity:.28}
}
@media (prefers-reduced-motion: reduce){ html.vibe #needleStage{animation:none} }
/* ---------- privacy notice and the small text links that open it ---------- */
#privacy{z-index:610}
.privacy-panel{width:min(600px,100%);transform:rotate(.4deg)}
.privacy-panel h3{margin:18px 0 4px;font-size:20px}
.privacy-panel p{margin:0;font-size:15px;line-height:1.45}
.privacy-panel a,.sp-link,.sb-foot a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.privacy-panel .privacy-date{margin-top:18px;font-size:12px;opacity:.75}
.link-btn{padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
.dir-foot{margin:18px 0 0;font-size:13px;opacity:.85}
.privacy-panel h2{padding-right:56px}
@media (max-width: 700px){ .privacy-panel{padding:22px 18px 20px} .privacy-panel h2{font-size:32px} .privacy-panel h3{font-size:18px} }

.auto-btn{margin-top:8px;display:inline-flex;align-items:center;gap:6px}
.auto-btn[hidden]{display:none}
.auto-btn[aria-pressed="true"]{background:var(--green);color:var(--paper)}

/* ---------- at the counter: pick one for me, Ask the counter ---------- */
.counter-strip{display:none}
html.portrait .counter-sign{display:none}
html.portrait .counter-strip{position:absolute;left:0;right:0;top:72px;z-index:59;display:flex;gap:8px;justify-content:center;padding:0 10px;pointer-events:none}
html.portrait .counter-strip .pill{pointer-events:auto;min-height:40px;padding:0 14px;font-size:14px;box-shadow:2px 2px 0 var(--slate)}

.pick-panel,.ask-panel{width:min(860px,100%)}
.pick-body{display:flex;gap:30px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:6px}
.pick-stage{flex:none;width:min(280px,64vw);aspect-ratio:1;position:relative}
.pick-stack{position:absolute;inset:0;perspective:900px}
.pk-card{position:absolute;inset:0;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--slate);transform-origin:50% 100%;background:var(--paper)}
.pick-info{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:14px;min-height:180px;justify-content:center}
.pick-meta h3{margin:0;font:30px/1.1 var(--f-display);font-weight:400;color:var(--orange);text-shadow:2px 2px 0 var(--slate);text-wrap:balance}
.pick-artist{margin-top:6px;font-weight:700;font-size:16px}
.pick-note{position:relative;margin:14px 0 0;padding:12px 14px;background:#F6EBC9;border:2px solid var(--ink);font:19px/1.35 var(--f-marker);transform:rotate(-.8deg);box-shadow:3px 3px 0 rgba(31,32,43,.2)}
.pick-actions{display:flex;flex-wrap:wrap;gap:10px}
.pick-actions .pill{min-height:44px;font-size:15px;padding:0 16px}
.pill-main{background:var(--orange);color:var(--paper2)}
.pill-main:hover{background:var(--brick)}

.ask-reply{min-height:30px;margin:0 0 12px;font:21px/1.3 var(--f-marker)}
.ask-quote{display:block;padding:10px 14px;background:#F6EBC9;border:2px solid var(--ink);transform:rotate(-.5deg);box-shadow:3px 3px 0 rgba(31,32,43,.2)}
.dir-panel .ask-results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ask-rec{display:flex;gap:12px;align-items:flex-start;padding:10px;background:var(--paper2);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--slate);min-width:0}
.rec-sleeve{position:relative;flex:none;width:104px;aspect-ratio:1;border:2px solid var(--ink)}
.rec-text{min-width:0;display:flex;flex-direction:column;gap:5px;flex:1}
.rec-text h4{margin:0;font:18px/1.15 var(--f-display);font-weight:400;color:var(--orange);overflow-wrap:anywhere}
.rec-by{font-weight:700;font-size:13.5px}
.rec-text p{margin:0;font-size:13px;line-height:1.4}
.rec-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.ask-foot{margin-top:14px;display:flex;justify-content:flex-start}
@media (max-width:820px){ .pick-meta h3{font-size:24px} }
@media (max-width:480px){ .rec-sleeve{width:80px} .ask-reply{font-size:19px} }
@media (prefers-reduced-motion: reduce){ .counter-sign{transition:none} }

/* hanging signs on the wall, top right of the shop */
.counter-sign{left:1300px;top:16px;width:132px;height:60px;padding:6px 8px 4px;background:var(--oak);border:3px solid var(--ink);color:var(--paper2);cursor:pointer;z-index:26;box-shadow:3px 4px 0 rgba(31,32,43,.35);transform-origin:50% -14px;transition:transform .25s ease}
.counter-sign.ask-sign{top:86px;background:var(--green2)}
.counter-sign b{display:block;font:20px/1.05 var(--f-marker);font-weight:400;letter-spacing:.2px}
.counter-sign::before,.counter-sign::after{content:"";position:absolute;top:-16px;width:3px;height:14px;background:var(--ink)}
.counter-sign::before{left:22px;transform:rotate(-8deg)}.counter-sign::after{right:22px;transform:rotate(8deg)}
.counter-sign:hover,.counter-sign:focus-visible{transform:rotate(-2.5deg)}
.counter-sign.ask-sign:hover,.counter-sign.ask-sign:focus-visible{transform:rotate(2.5deg)}
.counter-sign.sway{animation:signSway 2.6s ease-in-out 1}
@keyframes signSway{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}60%{transform:rotate(3deg)}}
@media (prefers-reduced-motion: reduce){ .counter-sign.sway{animation:none} }

/* ask the counter: two questions, then results */
.ask-panel{width:min(980px,100%)}
.ask-dots{margin-left:8px;font-weight:400;opacity:.7;font-size:14px}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#askFeelings.tiles{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.tile{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;min-height:84px;padding:12px 12px 10px;background:var(--paper2);border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--slate);cursor:pointer;color:var(--ink);transition:transform .15s ease}
.tile:hover,.tile:focus-visible{background:#fff7e6;transform:translateY(-2px)}
.tile b{font:21px/1.1 var(--f-marker);font-weight:400;color:var(--brick)}
.tile span{font-size:12.5px;line-height:1.3;font-weight:700}
.tile[aria-pressed="true"]{background:var(--ink);color:var(--paper2)}
.tile[aria-pressed="true"] b{color:#F2D27A}
.ask-nav{display:flex;justify-content:space-between;margin-top:16px;font-size:14px;font-weight:700}
.ask-summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.ask-summary .chip[id]{background:var(--ink);color:var(--paper2)}
.ask-summary .ask-era{margin:0 0 0 auto;padding:0;border:0}
.dir-panel .ask-results{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ask-rec{flex-direction:column;align-items:stretch}
.rec-sleeve{width:100%;max-width:150px}
.ask-foot{justify-content:center}
@media (max-width:860px){
  .tiles,#askFeelings.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dir-panel .ask-results{grid-template-columns:1fr}
  .ask-rec{flex-direction:row;align-items:flex-start}
  .rec-sleeve{width:96px;max-width:none}
  .ask-summary .ask-era{margin-left:0}
}
@media (max-width:480px){ .tile{min-height:72px} .tile b{font-size:19px} .rec-sleeve{width:80px} }
    <h2 id="askTitle">Ask the counter</h2>
    <p class="dir-drop"><span id="askQ">What's the moment?</span> <span class="ask-dots" id="askDots"></span></p>
    <div class="ask-step" id="askStep1"><div class="tiles" id="askMoments"></div></div>
    <div class="ask-step" id="askStep2" hidden><div class="tiles" id="askFeelings"></div></div>
    <div class="ask-nav"><button type="button" class="link-btn" id="askBack" hidden>&lsaquo; Back</button><button type="button" class="link-btn" id="askSkip">Skip this one</button></div>
    <div class="ask-step" id="askStep3" hidden>
      <div class="ask-summary">
        <button type="button" class="chip" id="askEditMoment" aria-label="Change the moment"></button>
        <span aria-hidden="true">+</span>
        <button type="button" class="chip" id="askEditFeel" aria-label="Change the feeling"></button>
        <div class="ask-era" id="askEra" role="group" aria-label="Which era"></div>
      </div>
      <div class="ask-reply" id="askReply" aria-live="polite"></div>
      <ol class="ask-results" id="askResults"></ol>
      <div class="ask-foot"><button class="pill" id="askAgain">Another round</button></div>
    </div>
.chip-era{background:var(--paper2);border:2px solid var(--ink);cursor:pointer;color:var(--ink);font:16px/1.1 var(--f-marker);padding:5px 12px 3px}
.chip-era:hover{background:#fff7e6}
.chip-era[aria-pressed="true"]{background:var(--ink);color:var(--paper2)}
@media (max-width:480px){ #askFeelings .tile span{display:none} #askFeelings .tile{min-height:54px;justify-content:center} }
/* screens that crop the shop (tablet upright, phone sideways): the signs would be out of frame, so use the pill row */
html.tablet-portrait .counter-sign,html.compact .counter-sign{display:none}
html.tablet-portrait .counter-strip,html.compact .counter-strip{position:absolute;left:0;right:0;top:12px;z-index:59;display:flex;gap:8px;justify-content:center;padding:0 10px;pointer-events:none}
html.tablet-portrait .counter-strip .pill,html.compact .counter-strip .pill{pointer-events:auto;min-height:40px;padding:0 14px;font-size:14px;box-shadow:2px 2px 0 var(--slate)}

.auto-wrap{position:relative;display:inline-block}
.tip{position:absolute;left:-6px;bottom:calc(100% + 12px);width:min(310px,72vw);padding:10px 12px 10px;background:#F6EBC9;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--slate);z-index:80;display:flex;flex-direction:column;gap:6px;align-items:flex-start;animation:tipIn .35s ease both}
.tip[hidden]{display:none}
.tip::after{content:"";position:absolute;left:26px;bottom:-9px;width:14px;height:14px;background:#F6EBC9;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)}
.tip b{font:19px/1.1 var(--f-marker);font-weight:400;color:var(--brick)}
.tip span{font-size:13px;line-height:1.4;font-weight:700}
@keyframes tipIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){ .tip{animation:none} }

/* ---------- iPhone notch and home bar (the page uses viewport-fit=cover) ---------- */
/* cards stay below the status bar and above the home bar, and are never taller than the visible screen */
.dir-overlay{padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left))}
.dir-panel{max-height:calc(100vh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
@supports (height: 100dvh){ .dir-panel{max-height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom))} }
/* held sideways, the notch takes one side: keep the edge buttons clear of it */
.album-top,.nv-top{left:env(safe-area-inset-left);right:env(safe-area-inset-right)}
.np-chip{left:calc(18px + env(safe-area-inset-left))}
.np-stand{right:calc(22px + env(safe-area-inset-right))}
html.compact .np-stand{right:calc(12px + env(safe-area-inset-right))}
html.compact .flip{right:calc(12px + env(safe-area-inset-right))}
@media (orientation: landscape) and (max-height: 520px){
  .nv-bottom{right:calc(12px + env(safe-area-inset-right))}
}