@font-face{font-family:Syne;src:url(/fonts/syne.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:Karla;src:url(/fonts/karla.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:Karla;src:url(/fonts/karla-italic.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:PlexMono;src:url(/fonts/plexmono.woff2) format("woff2");font-weight:400;font-display:swap}
:root{
  --booth:#141210;--panel:#1C1916;--frame:#2A2520;--ink:#F3EDE3;--mute:#A89F93;--bulb:#E8C27A;--velvet:#8B3A62;--brass:#C4A574;--rule:rgba(243,237,227,.12);
  --disp:Syne,system-ui,sans-serif;--sans:Karla,system-ui,sans-serif;--mono:PlexMono,ui-monospace,monospace;
  --slow:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--booth);color:var(--ink);font:400 17px/1.6 var(--sans);padding-bottom:110px;min-height:100vh}
a{color:var(--bulb);text-decoration-thickness:1px;text-underline-offset:3px}a:hover{color:var(--ink)}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
img{display:block;max-width:100%;height:auto}:focus-visible{outline:2px solid var(--bulb);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:8px;background:var(--bulb);color:var(--booth);padding:8px 12px;z-index:99;font-weight:700}.skip:focus{left:8px}
.w{width:min(1120px,100% - 36px);margin:0 auto}.nar{width:min(680px,100% - 36px);margin:0 auto}
/* header */
.hd{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px max(18px,calc((100% - 1120px)/2));border-bottom:1px solid var(--rule);position:sticky;top:0;background:rgba(20,18,16,.92);backdrop-filter:blur(10px);z-index:40}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 18px/1 var(--disp);letter-spacing:.04em;text-transform:uppercase}
.mark i{font-style:normal;color:var(--bulb)}.lg{width:28px;height:28px;flex:none}
.hd-n{display:flex;gap:22px;font:500 14px/1 var(--sans);letter-spacing:.02em}
.hd-n a{color:var(--mute);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.hd-n a:hover,.hd-n a[aria-current]{color:var(--ink);border-color:var(--bulb)}
@media(max-width:720px){.hd{flex-wrap:wrap;padding:14px 16px}.hd-n{width:100%;justify-content:space-between;gap:10px;font-size:13px;border-top:1px solid var(--rule);padding-top:10px}}
/* booth stage */
.booth{padding:clamp(28px,5vw,56px) 0 10px;position:relative}
.booth::before{content:"";position:absolute;inset:0 0 auto;height:min(72vh,640px);background:radial-gradient(ellipse 70% 55% at 50% 18%,rgba(232,194,122,.18),transparent 70%),radial-gradient(ellipse 40% 30% at 80% 10%,rgba(139,58,98,.22),transparent 60%);pointer-events:none;z-index:0}
.booth .w{position:relative;z-index:1}
.stage{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:center;background:linear-gradient(180deg,var(--panel),#161310);border:1px solid var(--frame);border-radius:18px;padding:clamp(18px,3vw,32px);box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04)}
.cover-wrap{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#0c0b0a;box-shadow:0 0 0 1px rgba(232,194,122,.25),0 20px 50px rgba(0,0,0,.5)}
.cover-wrap img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;transition:transform 12s linear}
body.playing .cover-wrap img{transform:scale(1.04)}
.lamp{position:absolute;top:-18px;left:50%;width:120px;height:40px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(232,194,122,.55),transparent 70%);filter:blur(8px);pointer-events:none}
.tag{font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin:0 0 14px}
.h1{font:700 clamp(36px,6.2vw,72px)/.98 var(--disp);letter-spacing:-.03em;margin:0 0 12px;text-wrap:balance}
.h1 em{font-style:normal;color:var(--bulb)}
.meta{display:flex;flex-wrap:wrap;gap:10px 18px;color:var(--mute);font-size:15px;margin:0 0 22px}
.meta b{color:var(--ink);font-weight:600}
.meters{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 26px}
.meter{background:rgba(0,0,0,.28);border:1px solid var(--rule);border-radius:10px;padding:12px 12px 10px}
.meter span{display:block;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.meter i{display:block;height:4px;border-radius:99px;background:rgba(243,237,227,.12);overflow:hidden}
.meter i b{display:block;height:100%;background:linear-gradient(90deg,var(--velvet),var(--bulb));border-radius:inherit;width:var(--v,40%)}
.meter strong{display:block;margin-top:8px;font:600 14px/1 var(--sans);color:var(--ink)}
.acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:999px;background:var(--bulb);color:var(--booth);font:700 15px/1 var(--sans);letter-spacing:.02em;text-decoration:none;border:0;transition:transform .25s var(--slow),background .25s}
.btn:hover{background:var(--ink);color:var(--booth);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid rgba(243,237,227,.28)}
.btn.ghost:hover{border-color:var(--bulb);color:var(--bulb);background:transparent}
.btn.sm{min-height:40px;padding:10px 16px;font-size:14px}
@media(min-width:861px){.cover-wrap{max-width:min(100%,400px)}}
@media(max-width:860px){.stage{grid-template-columns:1fr;padding:16px;gap:16px}.cover-wrap{max-width:min(240px,64vw);margin:0 auto}.meters{grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:14px}.booth{padding:14px 0 6px}.stage .h1{font-size:clamp(26px,8vw,40px);margin-bottom:8px}.stage .tag{margin-bottom:8px}.meta{margin-bottom:12px}}
@media(max-width:480px){.cover-wrap{max-width:min(160px,52vw)}.meter{padding:8px 7px 7px}.meter span{margin-bottom:5px;font-size:10px}.meter strong{font-size:12px;margin-top:5px}.meter i{height:3px}.acts{gap:8px}.btn{min-height:44px;padding:10px 16px}.btn.sm{min-height:40px;padding:8px 12px}}
@media(max-width:640px){body{padding-bottom:calc(130px + env(safe-area-inset-bottom))}.toast{bottom:calc(120px + env(safe-area-inset-bottom))}}
.btn.now{background:var(--ink);color:var(--booth)}
/* next strip */
.nexts{padding:28px 0 10px}
.nexts-h{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:16px}
.nexts-h h2{font:700 clamp(22px,3vw,32px)/1.1 var(--disp);margin:0;letter-spacing:-.02em}
.nexts-h p{margin:0;color:var(--mute);font-size:14px}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(160px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.card{scroll-snap-align:start;background:var(--panel);border:1px solid var(--frame);border-radius:14px;overflow:hidden;text-align:left;display:grid;color:inherit;text-decoration:none;transition:border-color .25s,transform .25s var(--slow)}
.card:hover,.card.on{border-color:var(--bulb);transform:translateY(-2px)}
.card img{width:100%;aspect-ratio:1;object-fit:cover}
.card span{display:block;padding:12px 12px 14px}
.card b{display:block;font:700 15px/1.25 var(--disp);letter-spacing:-.01em;margin-bottom:4px}
.card small{color:var(--mute);font-size:12.5px}
/* booths grid */
.sec{padding:clamp(36px,6vw,72px) 0}
.sec-h{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.sec-h h2{font:700 clamp(28px,4vw,44px)/1.05 var(--disp);margin:0;letter-spacing:-.025em}
.sec-h p{margin:0;color:var(--mute);max-width:42ch}
.booths{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.booths a{display:grid;gap:8px;padding:22px 20px;min-height:160px;border-radius:16px;background:var(--panel);border:1px solid var(--frame);text-decoration:none;color:inherit;position:relative;overflow:hidden;transition:border-color .25s,transform .25s var(--slow)}
.booths a::before{content:"";position:absolute;inset:auto -20% -40% auto;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,var(--glow,var(--velvet)),transparent 70%);opacity:.55;pointer-events:none}
.booths a:hover{border-color:var(--bulb);transform:translateY(-2px)}
.booths .n{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.booths b{font:700 clamp(24px,3vw,34px)/1 var(--disp);letter-spacing:-.02em;position:relative}
.booths p{margin:0;color:var(--mute);font-size:14.5px;position:relative;max-width:28ch}
.booths .ct{margin-top:auto;font-size:13px;color:var(--bulb);position:relative}
@media(max-width:860px){.booths{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.booths{grid-template-columns:1fr}}
/* free / about blocks */
.panel{background:var(--panel);border:1px solid var(--frame);border-radius:16px;padding:clamp(22px,3vw,36px)}
.panel h2{font:700 clamp(26px,3.5vw,40px)/1.05 var(--disp);margin:0 0 12px;letter-spacing:-.02em}
.panel p{color:var(--mute);margin:0 0 14px}
.rules{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.rules div{padding:16px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid var(--rule)}
.rules h3{margin:0 0 8px;font:700 16px/1.2 var(--disp)}.rules ul{margin:0;padding-left:18px;color:var(--mute);font-size:14.5px}
.rules .yes h3{color:var(--bulb)}.rules .no h3{color:#E07A7A}
@media(max-width:720px){.rules{grid-template-columns:1fr}}
/* page hero */
.ph{padding:clamp(40px,7vw,80px) 0 20px}.ph .tag{margin-bottom:10px}
.ph h1{font:700 clamp(40px,7vw,84px)/.98 var(--disp);margin:0 0 14px;letter-spacing:-.03em;text-wrap:balance}
.ph .lede{font-size:clamp(17px,1.5vw,20px);color:var(--mute);max-width:48ch;margin:0}
/* library */
.lib{padding:10px 0 60px}
.search{display:flex;gap:10px;margin:24px 0 8px}
.search input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--frame);border-radius:12px;color:var(--ink);padding:14px 16px;font:400 16px/1.3 var(--sans)}
.search input::placeholder{color:var(--mute)}.lib-n{color:var(--mute);font-size:14px;margin:0 0 18px}
.rs{list-style:none;margin:0;padding:0}
.r{display:grid;grid-template-columns:minmax(0,1fr) 64px 52px;gap:12px;align-items:center;border-bottom:1px solid var(--rule)}
.r-p{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center;padding:12px 0;text-align:left;min-width:0;width:100%}
.r-p img{width:48px;height:48px;border-radius:8px;object-fit:cover;aspect-ratio:1}
.r-t{min-width:0}.r-t b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-t span{display:block;font-size:13px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-d{color:var(--mute);font:400 13px/1 var(--mono);text-align:right}
.r-dl{color:var(--bulb);font:700 12px/1 var(--mono);letter-spacing:.06em;text-decoration:none;text-align:right}
.r.on .r-t b,.r.on .r-p{color:var(--bulb)}
.al{margin:0 0 36px}.al[hidden],.r[hidden]{display:none}
.al-h{display:flex;align-items:center;gap:14px;padding:8px 0 12px;border-bottom:1px solid rgba(243,237,227,.22)}
.al-h img{width:56px;height:56px;border-radius:10px;object-fit:cover;aspect-ratio:1;flex:none}
.al-h h2{margin:0;font:700 22px/1.1 var(--disp)}.al-h p{margin:2px 0 0;font-size:13px;color:var(--mute)}
/* booth page */
.bhead{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;margin-bottom:28px}
.bswatch{width:84px;height:84px;border-radius:18px;background:radial-gradient(circle at 30% 30%,var(--bulb),var(--glow,var(--velvet)));box-shadow:0 10px 30px rgba(0,0,0,.35)}
/* faq */
.faq{margin:0}.faq div{padding:18px 0;border-top:1px solid var(--rule)}.faq dt{font:700 20px/1.3 var(--disp);margin:0 0 6px}.faq dd{margin:0;color:var(--mute)}
.prose{padding:10px 0 70px;color:var(--mute)}.prose h2{font:700 28px/1.15 var(--disp);color:var(--ink);margin:36px 0 10px}.prose p{margin:0 0 14px}
/* footer */
.ft{border-top:1px solid var(--rule);padding:48px 0 30px;margin-top:40px}
.ft-big{font:700 clamp(32px,5vw,56px)/1 var(--disp);letter-spacing:-.03em;margin:0 0 28px}
.ft-big em{font-style:normal;color:var(--bulb)}
.ft-g{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:28px}
.ft h2{font:700 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:0 0 12px}
.ft ul{list-style:none;margin:0;padding:0}.ft li{margin:0 0 8px}.ft a{color:var(--ink);text-decoration:none}.ft a:hover{color:var(--bulb)}
.fine{font-size:13px;color:var(--mute);line-height:1.55;margin:0;max-width:90ch}
@media(max-width:720px){.ft-g{grid-template-columns:1fr 1fr}}
/* player */
.pb{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(20,18,16,.96);border-top:1px solid var(--rule);backdrop-filter:blur(12px);padding:0 14px calc(10px + env(safe-area-inset-bottom))}
.pb-seek{position:absolute;left:0;right:0;top:-7px;width:100%;height:14px;margin:0;opacity:0;cursor:pointer;z-index:2}
.pb-pr{height:3px;background:rgba(243,237,227,.12);position:relative}
.pb-pr i{display:block;height:100%;width:100%;background:var(--bulb);transform-origin:left center;transform:scaleX(0)}
.pb-in{display:grid;grid-template-columns:44px minmax(0,1.4fr) auto auto auto;gap:12px;align-items:center;padding:10px 0;max-width:1120px;margin:0 auto}
.pb-c{width:44px;height:44px;border-radius:8px;object-fit:cover;aspect-ratio:1;background:#000}
.pb-t{min-width:0;margin:0;line-height:1.25}.pb-t b{display:block;font:700 14px/1.2 var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-t span{display:block;font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-ctl{display:flex;gap:4px;align-items:center}
.pb-b,.pb-pp{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.pb-pp{background:var(--bulb);color:var(--booth)}.pb-pp svg,.pb-b svg{width:14px;height:14px;fill:currentColor}
.pb-tm{font:400 12px/1 var(--mono);color:var(--mute);white-space:nowrap}.pb-sl{margin:0 4px;opacity:.5}
.pb-dl{font:700 12px/1 var(--mono);letter-spacing:.08em;color:var(--bulb);text-decoration:none;padding:8px 10px;border:1px solid rgba(232,194,122,.35);border-radius:999px}
@media(max-width:640px){.pb-in{grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"c t ctl" "c tm dl";row-gap:4px}.pb-c{grid-area:c;width:40px;height:40px}.pb-t{grid-area:t}.pb-ctl{grid-area:ctl}.pb-tm{grid-area:tm;font-size:11px}.pb-dl{grid-area:dl;justify-self:end;padding:6px 8px}}
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%) translateY(12px);background:var(--ink);color:var(--booth);padding:10px 16px;border-radius:999px;font:700 13px/1.2 var(--sans);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:60;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* 404 */
.four{min-height:60vh;display:grid;place-items:center;text-align:center;padding:60px 20px}
.four h1{font:700 clamp(64px,14vw,140px)/.9 var(--disp);margin:0 0 10px;color:var(--velvet)}
.four p{color:var(--mute);margin:0 0 22px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}body.playing .cover-wrap img{transform:none}}
