*{box-sizing:border-box;margin:0;padding:0}
:root{--pad:clamp(14px,2vw,28px);--h:38px;--gold:#F0B90B;--ink:#f5f5f2;
  --glass:rgba(11,11,11,.62);--line:rgba(240,185,11,.34)}
html,body{height:100%;overflow:hidden;background:#0b0b0b;color:var(--ink);
  font-family:"Space Grotesk",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
.stage{position:fixed;inset:0;overflow:hidden}
.art,#fx,#nfx,.nightshade,.grade,.grain{position:absolute;inset:0;width:100%;height:100%}
.art{inset:auto;object-fit:fill;filter:saturate(1.05) contrast(1.03) sepia(.06);user-select:none;-webkit-user-drag:none}
#fx{pointer-events:none}
.grade{pointer-events:none;
  background:
   radial-gradient(ellipse 75% 70% at 60% 45%,rgba(0,0,0,0) 55%,rgba(18,8,2,.42) 100%),
   linear-gradient(180deg,rgba(255,196,80,.06),rgba(120,70,0,.08));
  mix-blend-mode:multiply}
.grain{pointer-events:none;inset:-50%;width:200%;height:200%;opacity:.07;mix-blend-mode:overlay;animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

.ui{position:fixed;z-index:2}
.glass{background:var(--glass);border:1px solid var(--line);border-radius:999px;
  backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(240,185,11,.12),0 8px 30px rgba(0,0,0,.35);transition:border-color .25s,box-shadow .25s}
.glass:hover{border-color:rgba(240,185,11,.6);box-shadow:inset 0 1px 0 rgba(240,185,11,.18),0 0 22px rgba(240,185,11,.18),0 8px 30px rgba(0,0,0,.35)}
.title{top:calc(var(--pad) + env(safe-area-inset-top));left:var(--pad);text-shadow:0 2px 18px rgba(20,8,0,.45)}
.title h1{display:flex;align-items:baseline;gap:.35em;line-height:1;font-size:clamp(26px,3vw,44px)}
.zh{font-family:"Noto Sans SC","PingFang SC",sans-serif;font-weight:900;letter-spacing:.02em}
.en{font-weight:700;letter-spacing:-.02em;color:var(--gold);text-shadow:0 0 18px rgba(240,185,11,.45),0 2px 12px rgba(0,0,0,.5)}
.title::after{content:"";display:block;width:72px;height:2px;margin-top:12px;border-radius:2px;background:linear-gradient(90deg,var(--gold),rgba(240,185,11,0));box-shadow:0 0 10px rgba(240,185,11,.5)}
.meta{display:inline-flex;align-items:center;gap:10px;margin-top:10px;height:28px;padding:0 12px;border-radius:999px;background:rgba(11,11,11,.55);border:1px solid rgba(240,185,11,.22);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:12px;font-weight:500;letter-spacing:.02em;color:rgba(245,245,242,.85);text-shadow:none}
.meta i{width:3px;height:3px;border-radius:50%;background:var(--gold);opacity:.7}
#ticker{color:var(--gold)}
.topright{top:calc(var(--pad) + env(safe-area-inset-top));right:var(--pad);display:flex;align-items:center;height:var(--h);padding:0 4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:30px;min-width:30px;padding:0 10px;border:0;border-radius:999px;
  background:transparent;color:var(--ink);font:500 13px "Space Grotesk",sans-serif;cursor:pointer;text-decoration:none;transition:background .2s,color .2s}
.btn:hover{background:rgba(240,185,11,.14);color:var(--gold)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.ic{padding:0;width:30px}
.btn svg{width:16px;height:16px;fill:currentColor}
.sep{width:1px;height:16px;background:var(--line);margin:0 4px}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.eq b{width:2px;height:3px;border-radius:1px;background:currentColor;opacity:.8;transition:height .3s}
.snd[aria-pressed=true]{color:var(--gold)}
.snd[aria-pressed=true] .eq b{animation:eq 1.1s ease-in-out infinite}
.snd[aria-pressed=true] .eq b:nth-child(2){animation-delay:-.4s}.snd[aria-pressed=true] .eq b:nth-child(3){animation-delay:-.7s}.snd[aria-pressed=true] .eq b:nth-child(4){animation-delay:-.2s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}
.bottomleft{left:var(--pad);bottom:calc(var(--pad) + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ca{display:flex;align-items:center;gap:10px;height:var(--h);padding:0 4px 0 5px;max-width:calc(100vw - 2*var(--pad))}
.ca-tag{height:28px;display:grid;place-items:center;padding:0 10px;border-radius:999px;background:var(--gold);color:#0b0b0b;font-weight:700;font-size:12px;letter-spacing:.08em}
.ca-val{font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.copy{color:var(--gold)}
.disc{font-size:10.5px;color:rgba(245,245,242,.6);letter-spacing:.01em;padding-left:4px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.bottomright-unused{right:var(--pad);bottom:calc(var(--pad) + env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px;height:var(--h);padding:0 14px;font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
.clock .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);animation:pulse 3s ease-in-out infinite}
.clock .wx{color:rgba(240,185,11,.75)}
#clock{color:var(--ink)}
@keyframes pulse{50%{opacity:.35}}
.toast{position:fixed;left:50%;bottom:calc(var(--pad) + 56px);transform:translate(-50%,8px);z-index:3;padding:9px 16px;font-size:13px;opacity:0;transition:.25s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:640px){
  .tag,.meta i:nth-of-type(2){display:none}
  .lbl{display:none}.snd{padding:0;width:30px}
  .bottomright-unused{display:none}
  .title h1{font-size:28px}
}
@media (prefers-reduced-motion:reduce){.grain,.clock .dot,.snd .eq b{animation:none!important}}

.stage::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(240,185,11,.9),transparent);background-size:50% 100%;background-repeat:no-repeat;animation:shim 6s ease-in-out infinite;opacity:.7;z-index:1}
@keyframes shim{0%{background-position:-60% 0}100%{background-position:160% 0}}
@media (prefers-reduced-motion:reduce){.stage::after{animation:none;background-size:100% 100%}}

#flora{position:absolute;pointer-events:none}
.clockpill{top:calc(var(--pad) + env(safe-area-inset-top) + 48px);right:var(--pad);display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums}
.clock .bj{color:var(--gold);font-family:"Noto Sans SC",sans-serif;font-weight:900;font-size:11px;letter-spacing:.06em}
.radio{right:var(--pad);bottom:calc(var(--pad) + env(safe-area-inset-bottom));width:300px;border-radius:20px;padding:12px 12px 10px 14px;display:flex;flex-direction:column;gap:6px}
.r-top{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.14em}
.r-label{color:var(--gold)}
.r-live{margin-left:auto;padding:2px 7px;border-radius:999px;border:1px solid rgba(240,185,11,.35);color:rgba(245,245,242,.6);font-size:9px;letter-spacing:.12em}
.radio.playing .r-live{color:#0b0b0b;background:var(--gold);border-color:var(--gold);box-shadow:0 0 12px rgba(240,185,11,.45)}
.radio .eq{color:var(--gold);height:12px}
.radio.playing .eq b{animation:eq 1s ease-in-out infinite}
.radio.playing .eq b:nth-child(2){animation-delay:-.35s}.radio.playing .eq b:nth-child(3){animation-delay:-.7s}.radio.playing .eq b:nth-child(4){animation-delay:-.15s}.radio.playing .eq b:nth-child(5){animation-delay:-.55s}
.r-name{font-size:14px;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-name:hover{color:var(--gold)}
.r-ctrl{display:flex;align-items:center;gap:6px}
.r-play{width:40px;height:40px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--gold);color:#0b0b0b;cursor:pointer;box-shadow:0 0 0 0 rgba(240,185,11,.5);transition:transform .15s,box-shadow .25s;flex:none}
.r-play:hover{transform:scale(1.05);box-shadow:0 0 18px rgba(240,185,11,.45)}
.r-play svg{width:18px;height:18px;fill:currentColor}
.r-play .i-pause,.radio.playing .r-play .i-play{display:none}.radio.playing .r-play .i-pause{display:block}
.radio.loading .r-play{animation:pulse 1s ease-in-out infinite}
.r-vol{flex:1;min-width:60px;-webkit-appearance:none;appearance:none;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--gold) var(--v,70%),rgba(245,245,242,.2) var(--v,70%));outline:none;cursor:pointer}
.r-vol::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgba(240,185,11,.6);border:0}
.r-vol::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--gold);border:0}
.r-rain[aria-pressed=true]{color:#0b0b0b;background:var(--gold)}
@media (max-width:640px){
  .clockpill{height:28px;font-size:11.5px;padding:0 10px}
  .radio{left:var(--pad);right:var(--pad);width:auto;bottom:calc(var(--pad) + env(safe-area-inset-bottom) + 74px);padding:10px 10px 8px 12px}
}
#flora{filter:saturate(1.05) contrast(1.03) sepia(.06)}

.backdrop{position:absolute;inset:-80px;background:#0b0b0b url(scene-wide-3240.webp?v=7) center/cover no-repeat;filter:blur(40px) brightness(.4) saturate(1.1);display:none}
.bars .backdrop{display:block}
.frame{position:absolute;pointer-events:none;display:none}
.bars .frame{display:block;box-shadow:0 0 70px 30px rgba(0,0,0,.55),inset 0 0 36px rgba(0,0,0,.28)}

.nightshade{pointer-events:none;opacity:0;transition:opacity 1.2s ease;mix-blend-mode:multiply;
  background:radial-gradient(ellipse 70% 80% at 62% 42%,rgb(104,108,176) 0%,rgb(72,74,138) 55%,rgb(44,44,92) 100%)}
.night .nightshade{opacity:1}
#nfx{pointer-events:none;mix-blend-mode:screen}
.lt[aria-pressed=true]{color:var(--gold)}
.lt svg{transition:filter .3s}
.lt[aria-pressed=false] svg{filter:drop-shadow(0 0 4px rgba(240,185,11,.7));color:var(--gold)}
.night .grain{opacity:.035}