:root{--bg:#0e0f13;--panel:#16181f;--panel-2:#1d2029;--line:#2a2e3a;--text:#eceef3;--muted:#8d93a3;--accent:#ffb020;--accent-text:#1a1204;--primary:#4f9dff;--good:#36d399;--bad:#ff4d6d;--radius:12px;--topbar:56px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}a{color:inherit}button,input{font:inherit;color:inherit}code{background:var(--panel-2);border-radius:5px;padding:1px 5px;font-size:.92em}.muted{color:var(--muted)}.error-text{color:var(--bad)}.spacer{flex:1}.app{flex-direction:column;min-height:100%;display:flex}main{flex-direction:column;flex:1;min-height:0;display:flex}.app-game main{height:calc(100dvh - var(--topbar))}.topbar{height:var(--topbar);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;background:#0e0f13eb;flex:none;align-items:center;gap:10px;padding:0 12px;display:flex;position:sticky;top:0}.brand{letter-spacing:.2px;font-weight:800;text-decoration:none}.pill{border:1px solid var(--line);background:var(--panel);color:var(--muted);white-space:nowrap;text-overflow:ellipsis;border-radius:999px;align-items:center;gap:6px;max-width:280px;padding:5px 10px;font-size:13px;display:inline-flex;overflow:hidden}button.pill{cursor:pointer}button.pill:hover{color:var(--text)}.pill .dot{background:var(--muted);border-radius:50%;flex:none;width:8px;height:8px}.pill.ok{color:var(--text)}.pill.ok .dot{background:var(--good);box-shadow:0 0 8px var(--good)}.pill.warn{color:#ffcf70}.icon-btn{cursor:pointer;background:0 0;border:none;border-radius:10px;flex:none;place-items:center;width:36px;height:36px;text-decoration:none;display:inline-grid}.icon-btn:hover{background:var(--panel-2)}.icon-btn.subtle{color:var(--muted);width:30px;height:30px}.icon-btn.small{border:1px solid var(--line);width:28px;height:28px;font-size:18px;line-height:1}.btn{border:1px solid var(--line);background:var(--panel-2);cursor:pointer;white-space:nowrap;border-radius:10px;align-items:center;gap:6px;padding:8px 14px;font-weight:500;text-decoration:none;display:inline-flex}.btn:hover:not(:disabled){border-color:#3d4354}.btn:disabled{opacity:.45;cursor:default}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn.accent{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:700}.btn.big{border-radius:14px;padding:12px 22px;font-size:16px}.btn.small{border-radius:8px;padding:4px 9px;font-size:13px}.round{border:1px solid var(--line);background:var(--panel-2);cursor:pointer;border-radius:50%;flex:none;place-items:center;width:44px;height:44px;display:grid}.round.primary{background:var(--accent);border-color:var(--accent);width:52px;height:52px;color:var(--accent-text)}.round:disabled{opacity:.5;cursor:default}.link-btn{color:var(--muted);cursor:pointer;background:0 0;border:none;align-items:center;gap:6px;font-size:14px;display:inline-flex}.link-btn:hover{color:var(--text)}.spinner{vertical-align:-3px;border:2px solid;border-right-color:#0000;border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.scrim{opacity:0;pointer-events:none;z-index:20;background:#00000080;transition:opacity .2s;position:fixed;inset:0}.scrim.open{opacity:1;pointer-events:auto}.drawer{background:var(--panel);border-right:1px solid var(--line);z-index:21;visibility:hidden;flex-direction:column;width:min(340px,88vw);transition:transform .22s;display:flex;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.drawer.open{visibility:visible;transform:none}.drawer-head{height:var(--topbar);border-bottom:1px solid var(--line);flex:none;justify-content:space-between;align-items:center;padding:0 10px 0 16px;display:flex}.drawer-nav{flex-direction:column;padding:8px;display:flex}.drawer-link{cursor:pointer;text-align:left;background:0 0;border:none;border-radius:10px;align-items:center;gap:10px;padding:10px;text-decoration:none;display:flex}.drawer-link:hover{background:var(--panel-2)}.drawer-section{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:12px 18px 6px;font-size:12px}.recent{margin:0;padding:0 8px 16px;list-style:none;overflow-y:auto}.recent li{border-radius:10px;align-items:center;display:flex}.recent li:hover,.recent li.current{background:var(--panel-2)}.recent li a{flex-direction:column;flex:1;min-width:0;padding:9px 10px;text-decoration:none;display:flex}.recent-title{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.recent-meta{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.recent .empty{color:var(--muted);padding:10px;font-size:14px}.recent li .icon-btn{opacity:0}.recent li:hover .icon-btn,.recent li .icon-btn:focus-visible{opacity:1}@media (hover:none){.recent li .icon-btn{opacity:1}}.home{text-align:center;flex-direction:column;align-items:center;gap:18px;width:100%;max-width:720px;margin:0 auto;padding:12vh 16px 40px;display:flex}.home h1{letter-spacing:-.02em;margin:0;font-size:clamp(32px,6vw,52px)}.lead{color:var(--muted);max-width:560px;margin:0;font-size:17px;line-height:1.5}.search-box{background:var(--panel);border:1px solid var(--line);width:100%;color:var(--muted);border-radius:14px;align-items:center;gap:10px;padding:6px 6px 6px 14px;display:flex}.search-box:focus-within{border-color:var(--primary)}.search-box input{min-width:0;color:var(--text);background:0 0;border:none;outline:none;flex:1;padding:8px 0;font-size:16px}.search-box.big{padding:8px 8px 8px 16px}.search-box.big input{font-size:18px}.continue{background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:12px;margin-top:12px;padding:10px 16px;text-decoration:none}.continue b{color:var(--text)}.page{flex-direction:column;gap:16px;width:100%;max-width:980px;margin:0 auto;padding:20px 16px 40px;display:flex}.page-msg{text-align:center;color:var(--muted);padding:40px 16px}.search-page h2{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);align-items:center;gap:6px;margin:8px 0;font-size:13px;display:flex}.search-page section p{margin:0}.results{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.results li{background:var(--panel);border:1px solid var(--line);border-radius:12px;align-items:center;gap:12px;padding:10px 12px;display:flex}.result-text{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.result-title{overflow-wrap:anywhere;font-weight:600}.result-meta{color:var(--muted);flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;display:flex}.result-link{color:var(--muted);display:inline-flex}.song-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.song-head h1{letter-spacing:-.01em;overflow-wrap:anywhere;margin:0 0 4px;font-size:clamp(24px,4vw,34px)}.song-head p{margin:0}.song-head p a{color:var(--muted)}.transport{align-items:center;gap:10px;display:flex}.readout{font-variant-numeric:tabular-nums;color:var(--muted);margin-left:6px}.timeline{cursor:pointer;touch-action:none;border:1px solid var(--line);border-radius:10px;flex:none;width:100%;display:block}.tracks{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);flex:none}.tracks summary{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:12px 14px;font-weight:600;list-style:none;display:flex}.tracks summary::-webkit-details-marker{display:none}.tracks summary svg{transition:transform .15s}.tracks[open] summary svg{transform:rotate(90deg)}.count{color:var(--muted);font-weight:500}.tracks ul{margin:0;padding:0 8px 8px;list-style:none}.tracks li{border-top:1px solid var(--line);align-items:center;gap:12px;padding:8px 6px;display:flex}.swatch{border-radius:4px;flex:none;width:12px;height:12px}.track-text{flex-direction:column;flex:1;min-width:0;display:flex}.track-name{white-space:nowrap;text-overflow:ellipsis;font-weight:500;overflow:hidden}.track-meta{color:var(--muted);font-size:12px}.track-toggles{gap:6px;display:flex}.toggle{border:1px solid var(--line);min-width:92px;color:var(--muted);cursor:pointer;background:0 0;border-radius:999px;justify-content:center;align-items:center;gap:6px;padding:6px 10px;font-size:13px;display:inline-flex}.toggle.on{color:var(--accent);background:#ffb02024;border-color:#ffb02080}.toggle-gap{width:92px}.volume{appearance:none;background:linear-gradient(to right, var(--accent) var(--fill,66%), var(--line) var(--fill,66%));cursor:pointer;border-radius:999px;outline:none;flex:none;width:96px;height:4px}.volume::-webkit-slider-thumb{-webkit-appearance:none;background:var(--text);border:3px solid var(--accent);border-radius:50%;width:14px;height:14px}.volume::-moz-range-thumb{background:var(--text);border:3px solid var(--accent);border-radius:50%;width:9px;height:9px}.volume:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #ffb02059}.volume:disabled{opacity:.3;cursor:default}.sound-control{align-items:center;gap:8px;display:inline-flex}.sound-control .toggle{min-width:0}.loading-label{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px}.game{flex-direction:column;flex:1;gap:10px;min-height:0;padding:10px 12px 12px;display:flex}.game-bar{flex-wrap:wrap;align-items:center;gap:10px 18px;display:flex}.game-title{white-space:nowrap;text-overflow:ellipsis;min-width:0;max-width:280px;overflow:hidden}.game-buttons{align-items:center;gap:8px;display:flex}.field{align-items:center;gap:6px;display:flex}.field-label{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-size:12px}.number{border:1px solid var(--line);background:var(--panel);text-align:center;font-variant-numeric:tabular-nums;border-radius:8px;width:52px;padding:6px}.number:focus{border-color:var(--primary);outline:none}.number.bpm{width:58px}.check{color:var(--muted);cursor:pointer;align-items:center;gap:6px;font-size:14px;display:inline-flex}.check input{accent-color:var(--accent);width:16px;height:16px}.game .tracks summary{padding:8px 12px}.game .tracks ul{max-height:30vh;overflow-y:auto}.stage{border-radius:var(--radius);border:1px solid var(--line);flex:1;min-height:300px;position:relative;overflow:hidden}.stage-canvas{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.hud{font-variant-numeric:tabular-nums;background:#0e0f13c7;border-radius:10px;align-items:center;gap:12px;padding:6px 12px;font-size:14px;display:flex;position:absolute;top:10px;right:10px}.hud .good{color:var(--good)}.hud .bad{color:var(--bad)}.input-hint{max-width:calc(100% - 360px);color:var(--muted);background:#0e0f13c7;border-radius:10px;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 10px;font-size:13px;display:flex;position:absolute;top:10px;left:10px}.input-hint.ok{color:var(--good)}.result-card{background:var(--panel);border:1px solid var(--line);text-align:center;border-radius:16px;width:min(380px,100% - 32px);padding:24px 28px;position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);box-shadow:0 20px 60px #00000080}.result-card p{color:var(--muted);margin:4px 0 0}.result-score{color:var(--accent);font-size:56px;font-weight:800}.result-actions{justify-content:center;gap:10px;margin-top:16px;display:flex}.drop-overlay{border:2px dashed var(--accent);z-index:30;pointer-events:none;background:#0e0f13d9;border-radius:20px;place-items:center;font-size:22px;font-weight:700;display:grid;position:fixed;inset:12px}.toast{border:1px solid var(--bad);color:#ffd0da;z-index:40;cursor:pointer;background:#2a1520;border-radius:12px;max-width:calc(100vw - 32px);padding:10px 16px;position:fixed;bottom:20px;left:50%;transform:translate(-50%)}@media (width<=720px){.readout{display:none}.toggle{min-width:0}.toggle span{display:none}.toggle-gap{width:36px}.tracks .volume{width:64px}.game-title{display:none}.input-hint{max-width:calc(100% - 20px);top:54px}.pill{max-width:150px}}