:root{--ink:#fff0d4;--dim:#ffd9a0b0;--line:#ffb35c33;--glass:rgba(12,12,26,.55);--serif:Georgia,'Times New Roman',serif;--sans:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#05070f;color:var(--ink);font-family:var(--sans);overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none}
#gl{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none;cursor:default}
#hud{position:fixed;left:26px;bottom:24px;pointer-events:none;text-shadow:0 0 18px #000c}
.clock{font:italic 300 46px/1 var(--serif);letter-spacing:.06em;color:#fff0d4}
.status{margin-top:6px;font:italic 15px var(--serif);color:var(--dim);letter-spacing:.04em}
#dock{position:fixed;right:18px;top:16px;display:flex;gap:8px}
.pill{background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:7px 15px;font:12px var(--sans);letter-spacing:.1em;color:var(--dim);cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:.25s}
.pill:hover{color:var(--ink);border-color:#ffb35c88}
#intro{position:fixed;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none;animation:intro 7.5s ease-in-out .5s forwards;opacity:0;text-shadow:0 0 40px #000}
#intro h1{margin:0;font:italic 300 clamp(40px,7vw,84px) var(--serif);letter-spacing:.22em}
#intro p{margin:10px 0 0;font:italic 16px var(--serif);letter-spacing:.3em;color:var(--dim)}
@keyframes intro{0%{opacity:0}25%{opacity:.92}70%{opacity:.92}100%{opacity:0}}
#toast{position:fixed;left:50%;top:22px;transform:translateX(-50%);pointer-events:none;font:italic 16px var(--serif);color:#fff0d4;text-shadow:0 0 14px #000;opacity:0;transition:opacity 1s}
#toast.on{opacity:1}
#help{position:fixed;inset:0;display:grid;place-items:center;background:#02030888;backdrop-filter:blur(4px);z-index:20}
#help[hidden]{display:none}
.card{background:#0a0c1cdd;border:1px solid var(--line);border-radius:18px;padding:22px;max-width:min(92vw,440px);box-shadow:0 0 80px #ff9a3c22}
.card h3{margin:0 0 8px;font:italic 300 26px var(--serif);letter-spacing:.08em}
.card p{color:var(--dim);font-size:14px;line-height:1.6}
.keys b{color:var(--ink)}
@media(max-width:700px){#hud{left:16px;bottom:16px}.clock{font-size:36px}#dock{top:10px;right:10px}}

.radio{width:min(92vw,460px)}
.rhead{display:flex;justify-content:space-between;align-items:center}
.rnote{margin:2px 0 10px;font-size:13px}
.np{min-height:22px;margin-bottom:10px;font:italic 16px var(--serif);color:var(--ink)}
#stations{display:flex;flex-direction:column;gap:7px;max-height:46vh;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:#ffb35c44 transparent}
.st{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;text-align:left;width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:12px;background:#ffffff05;color:inherit;cursor:pointer;transition:.2s;font:inherit}
.st:hover{border-color:#ffb35c99;background:#ff9a3c10}
.st.on{border-color:#ffb35c;background:#ff9a3c1c;box-shadow:0 0 22px #ff9a3c22}
.st .n{font:italic 17px var(--serif)}
.st .d{font-size:12px;color:var(--dim);margin-top:2px}
.st .b{font-size:11px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
.rvol{display:flex;align-items:center;gap:12px;margin-top:14px;color:var(--dim);font-size:12px;letter-spacing:.1em}
.rvol input{flex:1;accent-color:#ffb35c}
#radio{position:fixed;inset:0;display:grid;place-items:center;background:#02030888;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:20}
#radio[hidden]{display:none}