:root{--ink:#f3e7d3;--mute:#b9a78c;--dim:#7d6d58;--amber:#ffb45e;--ember:#ff7a3d;--bg:#0b0807;--lamp:1;--mx:50%;--my:30%;--bass:0;
--serif:"Fraunces",Georgia,serif;--mono:"JetBrains Mono",ui-monospace,monospace;--hand:"Caveat",cursive}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:var(--serif);overflow-x:hidden}
body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M3 25 L16 6 L20 9 L7 27 Z' fill='%23d9b48a' stroke='%23000' stroke-width='.8'/%3E%3Ccircle cx='3.5' cy='25' r='2' fill='%23ffb45e'/%3E%3C/svg%3E") 3 25,auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:inherit}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--amber);opacity:.85}
em{font-style:italic;font-weight:300;color:var(--amber)}
#dust{position:fixed;inset:0;z-index:4;pointer-events:none;mix-blend-mode:screen}
.grain{position:fixed;inset:-50%;z-index:50;pointer-events:none;opacity:.09;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}

/* GATE */
#gate{position:fixed;inset:0;z-index:30;display:grid;place-items:center;text-align:center;
background:radial-gradient(60% 50% at 50% 55%,#1a120c 0%,#070504 70%);transition:opacity 1.4s ease,visibility 1.4s}
body.on #gate{opacity:0;visibility:hidden}
.gate-inner{display:grid;gap:34px;justify-items:center;padding:24px}
.gate-title{font-size:clamp(44px,7vw,104px);font-weight:300;line-height:.95;letter-spacing:-.02em;font-variation-settings:"opsz" 144}
.power{display:grid;justify-items:center;gap:18px}
.power-ring{width:132px;height:132px;border-radius:50%;display:grid;place-items:center;position:relative;
background:radial-gradient(circle at 35% 30%,#3b2a1f,#140d09 70%);
box-shadow:inset 0 2px 1px #5a4232,inset 0 -6px 14px #000,0 18px 40px #000,0 0 0 10px #120c08,0 0 0 11px #3a2a1e,0 0 60px rgba(255,140,60,.08);transition:transform .3s,box-shadow .4s}
.power:hover .power-ring{transform:scale(1.04);box-shadow:inset 0 2px 1px #5a4232,inset 0 -6px 14px #000,0 18px 40px #000,0 0 0 10px #120c08,0 0 0 11px #8a5a32,0 0 90px rgba(255,140,60,.35)}
.power:active .power-ring{transform:scale(.96)}
.power-glyph{width:40px;height:40px;border:3px solid var(--ember);border-top-color:transparent;border-radius:50%;position:relative;filter:drop-shadow(0 0 8px var(--ember));animation:breathe 2.4s ease-in-out infinite}
.power-glyph::after{content:"";position:absolute;left:50%;top:-10px;width:3px;height:22px;background:var(--ember);transform:translateX(-50%);border-radius:2px}
@keyframes breathe{50%{opacity:.45}}
.power-label{font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.gate-note{font-size:15px;color:var(--dim);font-style:italic}

/* ROOM */
#room{position:relative;min-height:100vh;overflow:hidden;isolation:isolate;
background:radial-gradient(70% 60% at var(--mx) var(--my),rgba(255,170,90,calc(.10 + var(--bass)*.10)),transparent 60%),
linear-gradient(180deg,#1b130e 0%,#140e0a 55%,#0c0806 100%)}
#room::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;background:radial-gradient(120% 90% at 50% 35%,transparent 45%,rgba(0,0,0,.85) 100%)}
body.off #room{filter:brightness(.15) saturate(.4)}
body.on #room{animation:warm 2.2s ease-out}
@keyframes warm{0%{filter:brightness(.1)}12%{filter:brightness(.6)}16%{filter:brightness(.2)}24%{filter:brightness(.8)}28%{filter:brightness(.35)}100%{filter:brightness(1)}}
.top{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:28px 44px;z-index:10;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.brand{color:var(--ink);text-decoration:none;font-family:var(--serif);font-size:20px;letter-spacing:0;text-transform:none}
.brand span{font-style:italic;font-weight:300;color:var(--amber)}
.top-r{display:flex;gap:26px;align-items:center}
.onair{display:flex;gap:8px;align-items:center;color:#ff6a4a}
.onair i{width:7px;height:7px;border-radius:50%;background:#ff4d2e;box-shadow:0 0 10px #ff4d2e;animation:breathe 1.6s infinite}

.wall{position:absolute;inset:0 0 34% 0;z-index:1}
.panel-lines{position:absolute;inset:0;opacity:.5;background:repeating-linear-gradient(90deg,transparent 0 118px,rgba(0,0,0,.35) 118px 120px,rgba(255,200,150,.03) 120px 121px);
mask:linear-gradient(180deg,transparent,#000 30%,#000)}
.acoustic{position:absolute;right:6%;top:16%;width:22vw;max-width:320px;aspect-ratio:1.2;border-radius:6px;opacity:.7;
background:radial-gradient(circle,#2a1d15 30%,transparent 32%) 0 0/22px 22px,linear-gradient(#1a120d,#140d09);box-shadow:0 30px 60px rgba(0,0,0,.6),inset 0 0 40px #000}
.poster{position:absolute;left:58%;top:13%;width:150px;padding:16px 14px;transform:rotate(3deg);background:#d8c6a4;color:#2a1a10;box-shadow:0 20px 40px rgba(0,0,0,.6);font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;display:grid;gap:8px;filter:sepia(.3) brightness(calc(.55 + var(--lamp)*.2))}
.poster b{font-family:var(--serif);font-size:30px;letter-spacing:-.02em;text-transform:none;line-height:.9;font-weight:700}
.poster small{opacity:.6}
.poster::before{content:"";position:absolute;top:-6px;left:50%;width:10px;height:10px;border-radius:50%;background:#a33;box-shadow:0 2px 3px #000}
.clock{position:absolute;left:47%;top:15%;width:64px;height:64px;border-radius:50%;background:#e9dcc3;border:5px solid #2b1d14;box-shadow:0 12px 26px rgba(0,0,0,.6);opacity:.75}
.clock i{position:absolute;left:50%;bottom:50%;width:2px;background:#222;transform-origin:bottom}
.clock .h{height:16px;animation:spin 43200s linear infinite}.clock .m{height:24px;animation:spin 60s linear infinite}

.lamp{position:absolute;left:30%;top:0;z-index:7;width:120px;transform:translateX(-50%);display:grid;justify-items:center;animation:sway 7s ease-in-out infinite;transform-origin:top center}
@keyframes sway{50%{transform:translateX(-50%) rotate(1.2deg)}}
.cord{width:2px;height:12vh;background:linear-gradient(#000,#2a1f18)}
.shade{width:120px;height:56px;border-radius:60px 60px 6px 6px;background:linear-gradient(160deg,#4a3526,#1c130d 60%);box-shadow:inset 0 -8px 12px rgba(0,0,0,.6)}
.bulb{width:40px;height:22px;margin-top:-6px;border-radius:0 0 30px 30px;background:#fff1cc;box-shadow:0 0 calc(30px + var(--bass)*60px) calc(10px + var(--bass)*20px) rgba(255,190,110,calc(.6*var(--lamp)));opacity:var(--lamp)}
.cone{position:absolute;left:30%;top:calc(12vh + 70px);width:min(900px,90vw);height:80vh;transform:translateX(-50%);z-index:5;pointer-events:none;
background:radial-gradient(50% 100% at 50% 0,rgba(255,196,120,calc(.22*var(--lamp) + var(--bass)*.18)),transparent 70%);
clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);mix-blend-mode:screen;filter:blur(6px)}

.intro{position:absolute;left:44px;top:21vh;z-index:8;max-width:520px}
.intro h2{font-size:clamp(40px,5.2vw,82px);font-weight:400;line-height:.95;letter-spacing:-.025em;margin:16px 0 20px;font-variation-settings:"opsz" 144;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.lead{font-size:18px;line-height:1.5;color:var(--mute);max-width:380px}

.desk-wrap{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:8;perspective:1400px}
.desk-wrap::before{content:"";position:absolute;left:-5%;right:-5%;bottom:0;height:62%;
background:linear-gradient(180deg,#5a3a24 0%,#3a2416 30%,#1a0f09 100%),repeating-linear-gradient(92deg,rgba(0,0,0,.15) 0 3px,transparent 3px 11px);
background-blend-mode:multiply;transform:rotateX(52deg);transform-origin:bottom;box-shadow:0 -2px 0 #7a5236,0 -30px 80px rgba(0,0,0,.6);
mask:radial-gradient(90% 140% at 30% 0,#000 40%,rgba(0,0,0,.5) 100%)}
.desk{position:absolute;left:0;right:0;bottom:6%;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:clamp(18px,3vw,54px);padding:0 4vw}

.obj{position:relative;display:grid;justify-items:center;gap:14px;transition:transform .7s cubic-bezier(.2,.8,.2,1);text-align:center}
.obj .art{position:relative;transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s;filter:brightness(calc(.7 + var(--lamp)*.25)) drop-shadow(0 26px 22px rgba(0,0,0,.75))}
.obj:hover .art,.obj:focus-visible .art{transform:translateY(-22px) rotate(var(--tilt-h,0deg)) scale(1.04);filter:brightness(1.18) drop-shadow(0 40px 30px rgba(0,0,0,.8)) drop-shadow(0 0 30px rgba(255,170,90,.25))}
.obj::after{content:"";position:absolute;left:50%;top:-40px;width:260px;height:300px;transform:translateX(-50%);pointer-events:none;opacity:0;transition:opacity .5s;
background:radial-gradient(50% 60% at 50% 30%,rgba(255,200,130,.25),transparent 70%);mix-blend-mode:screen}
.obj:hover::after{opacity:1}
.meta{display:grid;gap:3px;transition:opacity .4s}
.no{font-family:var(--mono);font-size:10px;letter-spacing:.25em;color:var(--amber)}
.ttl{font-size:19px;font-weight:500;letter-spacing:-.01em;white-space:nowrap}
.wt{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.08em}
.stamp{font-family:var(--hand);font-size:19px;color:#e07a52;transform:rotate(-4deg);line-height:1}

/* vinyl + sleeve */
.sleeve{width:var(--s);height:var(--s);position:relative}
.cover{position:absolute;inset:0;border-radius:3px;z-index:2;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset -12px 0 22px rgba(0,0,0,.45)}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.14),transparent 35%,transparent 70%,rgba(255,255,255,.05))}
.cover b{position:absolute;left:10%;bottom:9%;font-family:var(--serif);font-size:calc(var(--s)*.11);font-weight:300;font-style:italic;line-height:.95;text-align:left;color:rgba(255,240,220,.9);mix-blend-mode:screen}
.cover small{position:absolute;right:9%;top:8%;font-family:var(--mono);font-size:9px;letter-spacing:.2em;opacity:.7}
.disc{position:absolute;top:4%;left:30%;width:92%;height:92%;border-radius:50%;z-index:1;transition:left .8s cubic-bezier(.2,.8,.2,1);
background:radial-gradient(circle,var(--lbl) 0 16%,#111 16.5% 18%,transparent 18.5%),repeating-radial-gradient(circle,#0c0c0c 0 1px,#1b1b1b 1.5px 2.5px),#111;
box-shadow:0 0 0 1px #000}
.disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 10%,rgba(255,255,255,.18) 14%,transparent 20% 55%,rgba(255,255,255,.12) 60%,transparent 66%)}
.obj:hover .disc{left:52%;animation:spin 1.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* cassette */
.cass{width:var(--w);aspect-ratio:1.58;border-radius:7px;position:relative;background:linear-gradient(170deg,var(--c1),var(--c2));box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -3px 6px rgba(0,0,0,.5)}
.cass .lbl{position:absolute;inset:9% 7% 34%;border-radius:3px;background:#efe4cc;color:#2b1d14;padding:6px 9px;text-align:left;font-family:var(--hand);font-size:calc(var(--w)*.085);line-height:1;overflow:hidden}
.cass .lbl::before{content:"";position:absolute;left:0;right:0;top:26%;height:5px;background:var(--stripe)}
.cass .lbl span{position:relative;top:34%}
.cass .win{position:absolute;left:24%;right:24%;top:41%;height:20%;border-radius:20px;background:rgba(20,12,8,.85);box-shadow:inset 0 2px 4px #000;display:flex;justify-content:space-between;align-items:center;padding:0 8%}
.reel{width:calc(var(--w)*.1);height:calc(var(--w)*.1);border-radius:50%;background:radial-gradient(circle,#ddd 0 22%,transparent 24%),conic-gradient(#eee 0 8%,transparent 8% 33%,#eee 33% 41%,transparent 41% 66%,#eee 66% 74%,transparent 74%);box-shadow:0 0 0 calc(var(--w)*.03) #3a2a1c}
.obj:hover .reel{animation:spin 1.2s linear infinite}
.cass .bot{position:absolute;left:18%;right:18%;bottom:0;height:20%;clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);background:rgba(0,0,0,.25)}

/* reel to reel */
.r2r{width:var(--s);aspect-ratio:1;border-radius:50%;position:relative;background:radial-gradient(circle,#6d6255 0 9%,#2c241d 9.5% 11%,transparent 11.5%),radial-gradient(circle,transparent 0 30%,#3b2a1c 30.5% 62%,transparent 62.5%),radial-gradient(circle,#b5aa98 0 98%,transparent 99%);box-shadow:inset 0 0 0 4px #8b806d,inset 0 0 20px rgba(0,0,0,.6)}
.r2r::before{content:"";position:absolute;inset:6%;border-radius:50%;background:conic-gradient(from 0deg,#0000 0 9%,#151009 9% 24%,#0000 24% 42%,#151009 42% 57%,#0000 57% 75%,#151009 75% 90%,#0000 90%);mask:radial-gradient(circle,transparent 30%,#000 31% 60%,transparent 61%)}
.obj:hover .r2r{animation:spin 3s linear infinite}
.tape-tail{position:absolute;right:-30%;bottom:16%;width:60%;height:3px;background:#3b2a1c;transform:rotate(-8deg);border-radius:2px}

/* props */
.prop{position:absolute;z-index:9;transition:transform .4s}
.prop:hover{transform:translateY(-6px)}
.fork{left:41%;top:28%;width:14px;height:90px;background:linear-gradient(90deg,#9a9a9a,#eee,#888);clip-path:polygon(0 0,30% 0,30% 55%,70% 55%,70% 0,100% 0,100% 62%,60% 70%,60% 100%,40% 100%,40% 70%,0 62%);opacity:.8}
.mug{right:5%;bottom:13%;width:58px;height:62px;border-radius:4px 4px 14px 14px;background:linear-gradient(90deg,#7c2f1e,#c4573a 40%,#6a2617);box-shadow:0 18px 20px rgba(0,0,0,.6)}
.mug::after{content:"";position:absolute;right:-18px;top:12px;width:20px;height:28px;border:6px solid #8f3a24;border-left:0;border-radius:0 14px 14px 0}
.steam{position:absolute;left:14px;top:-40px;width:30px;height:40px;background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent);filter:blur(6px);animation:steam 3s ease-in-out infinite}
@keyframes steam{0%{transform:translateY(10px) scaleX(.6);opacity:0}50%{opacity:1}100%{transform:translateY(-20px) scaleX(1.2);opacity:0}}
.metro{left:5%;bottom:12%;width:64px;height:104px;background:linear-gradient(90deg,#2a1a10,#5a3a24 50%,#22150d);clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);box-shadow:0 18px 20px rgba(0,0,0,.6)}
.metro .arm{position:absolute;left:calc(50% - 1px);bottom:12px;width:2px;height:80px;background:#d9c39a;transform-origin:bottom;animation:tick calc(60s/88) ease-in-out infinite alternate}
.metro .arm::after{content:"";position:absolute;left:-4px;top:16px;width:10px;height:8px;background:#d9c39a}
@keyframes tick{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
.foot{position:absolute;left:0;right:0;bottom:0;z-index:10;display:flex;justify-content:space-between;padding:18px 44px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
kbd{font-family:var(--mono);color:var(--amber);border:1px solid #3a2a1e;padding:1px 6px;border-radius:3px}

/* GLASS */
.glass{position:fixed;z-index:40;left:50%;bottom:40px;width:min(420px,calc(100vw - 32px));padding:24px 26px 22px;border-radius:18px;transform:translate(-50%,30px);opacity:0;pointer-events:none;
background:linear-gradient(135deg,rgba(255,235,210,.14),rgba(255,235,210,.04));border:1px solid rgba(255,230,200,.18);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.18);transition:all .6s cubic-bezier(.2,.8,.2,1)}
.glass.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.glass h3{font-size:26px;font-weight:400;margin:8px 0 10px;letter-spacing:-.01em}
.glass p{color:var(--mute);line-height:1.55;font-size:15px}
.glass .x{position:absolute;right:14px;top:12px;font-family:var(--mono);font-size:12px;color:var(--dim)}
#toast{position:fixed;left:50%;top:24px;transform:translate(-50%,-80px);z-index:45;font-family:var(--hand);font-size:26px;color:var(--amber);transition:transform .5s;text-shadow:0 2px 20px #000}
#toast.show{transform:translate(-50%,0)}

/* POKAZ */
#pokaz{position:fixed;inset:0;z-index:20;display:none;background:radial-gradient(60% 70% at 32% 50%,rgba(255,160,80,calc(.10 + var(--bass)*.16)),transparent 60%),linear-gradient(180deg,#160f0b,#0a0705)}
#pokaz.open{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:4vw;padding:90px 6vw 60px;animation:fadein .8s ease}
@keyframes fadein{from{opacity:0}}
.back{position:absolute;left:44px;top:30px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);text-decoration:none}
.tt{position:relative;width:min(560px,42vw);aspect-ratio:1.18;border-radius:14px;justify-self:center;
background:linear-gradient(145deg,#3a2718,#1a100a);box-shadow:0 40px 80px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,220,180,.15),inset 0 0 0 10px #22160e}
.platter{position:absolute;left:7%;top:8%;width:72%;aspect-ratio:1;border-radius:50%;background:#0b0b0b;box-shadow:0 0 0 6px #2c2c2c,0 14px 30px rgba(0,0,0,.7)}
.platter .disc{left:3%;top:3%;width:94%;height:94%}
.playing .platter .disc{animation:spin 1.8s linear infinite}
.arm2{position:absolute;right:9%;top:9%;width:16px;height:62%;transform-origin:50% 8%;transform:rotate(18deg);transition:transform 1.6s cubic-bezier(.3,1.4,.4,1)}
.arm2::before{content:"";position:absolute;left:-14px;top:-14px;width:44px;height:44px;border-radius:50%;background:radial-gradient(#ccc,#666);box-shadow:0 6px 12px #000}
.arm2::after{content:"";position:absolute;left:5px;top:10px;width:6px;height:100%;background:linear-gradient(90deg,#888,#eee,#888);border-radius:3px;box-shadow:0 0 0 0 #000,6px 8px 10px rgba(0,0,0,.5)}
.arm2 i{position:absolute;left:-2px;bottom:-14%;width:20px;height:28px;background:#ddd;border-radius:3px;z-index:1}
.playing .arm2{transform:rotate(34deg)}
.lampled{position:absolute;right:7%;bottom:9%;width:12px;height:12px;border-radius:50%;background:#401;box-shadow:inset 0 1px 2px #000}
.playing .lampled{background:#ff7a3d;box-shadow:0 0 14px #ff7a3d}
.pk-meta .ttl{font-size:clamp(44px,5vw,86px);font-weight:300;line-height:.95;letter-spacing:-.03em;white-space:normal;margin:14px 0 8px;font-variation-settings:"opsz" 144}
.pk-meta .wt{font-size:12px}
.wave{display:flex;align-items:center;gap:2px;height:70px;margin:30px 0 14px}
.wave i{flex:1;background:var(--dim);border-radius:2px;transition:background .2s}
.wave i.done{background:var(--amber)}
.ctrl{display:flex;gap:18px;align-items:center;margin-top:18px}
.play{width:74px;height:74px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffcf8f,#e0752f);box-shadow:0 10px 30px rgba(224,117,47,.4),inset 0 -4px 8px rgba(0,0,0,.3);display:grid;place-items:center;color:#2a1508;font-size:22px}
.vu{display:flex;gap:14px}
.vu div{width:92px;height:54px;border-radius:6px;background:linear-gradient(#f2e3c3,#d8c39b);position:relative;overflow:hidden;box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
.vu div::before{content:"VU";position:absolute;left:8px;top:4px;font-family:var(--mono);font-size:8px;color:#7a5a3a}
.vu div::after{content:"";position:absolute;right:8px;top:6px;width:30%;height:4px;background:#c03;opacity:.6;border-radius:2px}
.vu b{position:absolute;left:50%;bottom:-6px;width:2px;height:52px;background:#1a0e08;transform-origin:bottom;transform:rotate(calc(-45deg + var(--v,0)*90deg));transition:transform .08s}
.story{margin-top:26px;color:var(--mute);font-size:16px;line-height:1.6;max-width:440px}
.story .hand{font-family:var(--hand);font-size:22px;color:#e07a52}

@media (max-width:860px){
 .top{padding:20px}.top-r #presence{display:none}
 .intro{left:22px;right:22px;top:15vh}.lead{font-size:16px}
 .lamp{left:78%}.cone{left:78%}.poster,.acoustic,.clock,.fork{display:none}
 .desk-wrap{height:52%}
 .desk{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:40px 22px 0;bottom:10%;align-items:flex-end;scrollbar-width:none}
 .obj{scroll-snap-align:center;flex:0 0 auto}
 .mug{right:16px;bottom:5%;transform:scale(.6)}.metro{display:none}
 .foot{padding:14px 20px}.foot .hint{display:none}
 #pokaz.open{grid-template-columns:1fr;padding:80px 22px 40px;overflow:auto;align-content:start;gap:30px}
 .tt{width:100%}.back{left:22px;top:24px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.obj{color:inherit;text-decoration:none}
.desk{bottom:9%}
.poster b{font-size:24px}
#toast{white-space:nowrap;max-width:92vw;text-align:center}
@media (max-width:860px){.obj .art{zoom:.7}.mug{display:none}#toast{font-size:20px;white-space:normal;width:86vw}.desk{gap:28px}.intro h2{font-size:40px}}
@media (max-width:860px){#toast{top:64px}}