:root{--ink:#1b1d24;--muted:#5d6475;--accent:#b5561b;--surface:#fbfaf7;--edge:#e3e0d8;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font:16px/1.5 ui-sans-serif,system-ui,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--ink:#e8ebf3;--muted:#9aa3b8;--accent:#ffc56b;--surface:#0b0c14;--edge:#262a38}}body{background:var(--surface);color:var(--ink);margin:0}a{color:var(--accent)}.page{max-width:40rem;margin:0 auto;padding:3rem 1rem}.brand{color:var(--ink);font-size:1.75rem;font-weight:700;text-decoration:none}.tagline{color:var(--muted);margin:.25rem 0 2.5rem}.songs,.picks{border-top:1px solid var(--edge);margin:0;padding:0;list-style:none}.songs a{border-bottom:1px solid var(--edge);padding:.9rem 0;font-size:1.15rem;text-decoration:none;display:block}.songs a:hover,.songs a:focus-visible{text-decoration:underline}.about h1{margin:0 0 1rem}.about h2{margin:2rem 0 .5rem;font-size:1.15rem}.legend{gap:.6rem;margin:1rem 0;display:grid}.legend div{grid-template-columns:7rem 1fr;gap:1rem;display:grid}.legend dt{font-weight:600}.legend dd{color:var(--muted);margin:0}@media (width<=480px){.legend div{grid-template-columns:1fr;gap:0}}.page:has(.player){max-width:none;padding:0}.page:has(.player)>header{display:none}.player{--ink:#e8ebf3;--muted:#9aa3b8;--accent:#ffc56b;--edge:#262a38;color:var(--ink)}.stage{background:#07080f;position:fixed;inset:0;overflow:hidden}.hud{pointer-events:none;flex-direction:column;display:flex;position:absolute;inset:0}.icon-button{border:1px solid var(--edge);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:40px;height:40px;color:var(--muted);cursor:pointer;background:#0a0c16b8;border-radius:50%;flex:none;place-items:center;transition:transform .15s;display:grid}.icon-button:hover,.icon-button:focus-visible{color:var(--ink);transform:scale(1.08)}.icon-button:active{transform:scale(.92)}.icon-button[aria-expanded=true]{border-color:var(--accent);background:var(--accent);color:#111}.transport{pointer-events:none;background:linear-gradient(#07080fe6,#07080f00);gap:.4rem;padding:.75rem 1rem;display:grid}.transport>*{pointer-events:auto}.transport-row{flex-wrap:wrap;align-items:center;gap:.5rem .75rem;display:flex}.transport h1{margin:0;font-size:1.25rem}.genre{font:inherit;color:#e8ebf3;cursor:pointer;background:#0a0c16d9;border:1px solid #ffffff26;border-radius:.375rem;padding:.25rem .5rem;font-size:.85rem}.transport .time{font-variant-numeric:tabular-nums;color:#9aa3b8;margin-left:auto}.transport button{font:inherit;cursor:pointer}.play{color:#07080f;background:#ffc56b;border:0;border-radius:50%;width:2.5rem;height:2.5rem}.scrub{accent-color:#ffc56b;width:100%}.track{border:1px solid var(--role);border-radius:1rem;font-size:.85rem;display:inline-flex;overflow:hidden}.track button{color:var(--role);background:0 0;border:0;padding:.15rem .6rem}.track button[aria-pressed=true]:not(.mute){background:var(--role);color:#07080f}.track .mute{border-left:1px solid var(--role);padding:.15rem .45rem;font-size:.75rem}.track[data-muted=true]{opacity:.45;border-style:dashed}.track[data-muted=true] button:not(.mute){text-decoration:line-through}.sound-panel{border:1px solid var(--role);background:#0a0c16d9;border-radius:.5rem;width:min(20rem,100% - 2rem);max-height:calc(100% - 9rem);position:absolute;bottom:1rem;right:1rem;overflow:auto}.sound-panel-head{color:var(--role);justify-content:space-between;align-items:center;padding:.35rem .6rem;font-size:.85rem;font-weight:600;display:flex}.sound-panel-head button{color:#9aa3b8;cursor:pointer;background:0 0;border:0;font-size:1.1rem;line-height:1}.follow{color:#9aa3b8;margin-left:auto;font-size:.85rem}.scene-label{white-space:nowrap;color:#9aa3b8;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:.75rem}.section-label b{color:#e8ebf3}.symbol-name{border:1px solid color-mix(in srgb, currentColor 45%, transparent);white-space:nowrap;text-shadow:0 0 8px color-mix(in srgb, currentColor 60%, transparent);pointer-events:none;-webkit-user-select:none;user-select:none;background:#07080fcc;border-radius:.3rem;padding:.2rem .45rem;font:600 .95rem/1 ui-monospace,monospace;animation:2.4s ease-out forwards rise}@keyframes rise{0%{opacity:0;transform:translateY(.5rem)scale(.8)}10%{opacity:1;transform:translateY(-.5rem)scale(1.08)}70%{opacity:1}to{opacity:0;transform:translateY(-3rem)scale(1)}}@media (prefers-reduced-motion:reduce){.symbol-name{animation:2.4s linear forwards fade}@keyframes fade{70%{opacity:1}to{opacity:0}}}.lane-label{font-weight:600;transform:translate(-100%)}.inspector{border:1px solid var(--edge);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:auto;background:#0a0c16d9;border-radius:.5rem;flex:0 auto;width:min(26rem,100% - 2rem);min-height:0;margin:0 1rem 1rem;padding:1rem;overflow-y:auto}.inspector h2{margin:0 0 .5rem;font-size:1.3rem}.inspector h3{margin:1.5rem 0 .4rem;font-size:1rem}.inspector p{margin:.4rem 0}.inspector code{overflow-wrap:anywhere;font-size:.85em}.muted{color:var(--muted)}.back{color:var(--accent);font:inherit;cursor:pointer;background:0 0;border:0;margin-bottom:1rem;padding:0}.facts{grid-template-columns:6rem 1fr;gap:.3rem .75rem;margin:0;display:grid}.facts div{display:contents}.facts dt{font-weight:600}.facts dd{margin:0}.reasons{margin:.5rem 0;padding-left:1.2rem}.reasons li+li{margin-top:.35rem}.picks button{border:0;border-bottom:1px solid var(--edge);width:100%;color:var(--ink);font:inherit;text-align:left;cursor:pointer;background:0 0;align-items:baseline;gap:.5rem;padding:.45rem .25rem;display:flex}.picks button:hover,.picks button:focus-visible{background:color-mix(in srgb, var(--accent) 10%, transparent)}.picks i{border-radius:2px;flex:none;width:.7rem;height:.7rem}.picks .right{text-align:right;margin-left:auto;font-size:.85rem}.files{margin:0;padding-left:1.4rem}.files li{padding:.2rem 0}.files li span{font-size:.8rem;display:block}.files .current{color:var(--accent)}.note{border-left:3px solid var(--accent);background:color-mix(in srgb, var(--accent) 7%, transparent);margin:1rem 0;padding:.25rem .9rem .6rem}.note h3{margin-top:.5rem}
