*{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}#root{height:100%}body{font-family:Anuphan,system-ui,sans-serif}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:8px}::-webkit-scrollbar-track{background:0 0}:root{--bg:#080d0b;--surface:#101612;--surface-2:#161e18;--surface-3:#1e2820;--border:#263128;--border-soft:#1c2620;--text:#f1ede1;--text-dim:#a3b0a3;--text-faint:#697566;--green:#22c06c;--green-strong:#17a259;--green-soft:#22c06c21;--green-line:#22c06c59;--felt:#0c6b41;--gold:#d9a441;--gold-soft:#d9a44121;--gold-line:#d9a44157;--red:#f1556a;--red-soft:#f1556a24;--amber:#f1b53d;--amber-soft:#f1b53d24;--blue:#54a7f0;--blue-soft:#54a7f024;--scroll:#2b3a33;--shadow:0 14px 42px #0000008c}:root[data-theme=light]{--bg:#f0ede3;--surface:#fbf9f2;--surface-2:#f3f0e6;--surface-3:#eae6d9;--border:#ddd8c8;--border-soft:#e7e3d5;--text:#1c231d;--text-dim:#5f6a5f;--text-faint:#96a094;--green:#0f9d55;--green-strong:#0c8a4a;--green-soft:#0f9d551a;--green-line:#0f9d554d;--felt:#0c6b41;--gold:#a87718;--gold-soft:#a877181c;--gold-line:#a8771852;--red:#d83a52;--red-soft:#d83a521a;--amber:#cf8a0f;--amber-soft:#cf8a0f1f;--blue:#2f7fd6;--blue-soft:#2f7fd61a;--scroll:#cdd6d1;--shadow:0 10px 30px #28230f1f}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}@keyframes glow{0%,to{box-shadow:0 0 0 0 var(--green-soft)}50%{box-shadow:0 0 0 5px var(--green-soft)}}@keyframes slideup{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes pop{0%{opacity:0;transform:scale(.96)translateY(8px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-7px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(3px)}}.sc-card{background:var(--surface);border:1px solid var(--border-soft);transition:border-color .15s}.sc-card:hover{border-color:var(--border)}.sc-card.is-playing{border-color:var(--green-line)}.sc-stat{background:var(--surface);border:1px solid var(--border-soft);transition:border-color .15s}.sc-stat:hover{border-color:var(--border)}.sc-btn{transition:background-color .12s,opacity .12s}.sc-btn:not(:disabled):active{opacity:.82}.sc-btn-primary:not(:disabled):hover{filter:brightness(.96)}.sc-card-header{border-radius:6px 6px 0 0}.sc-menu-btn{z-index:45;border:1px solid var(--border);background:var(--surface);width:38px;height:38px;color:var(--text-dim);cursor:pointer;border-radius:7px;justify-content:center;align-items:center;transition:border-color .15s,color .15s;display:flex;position:fixed;top:12px;left:12px}.sc-menu-btn:hover{border-color:var(--gold-line);color:var(--text)}.sc-backdrop{z-index:40;background:#0000008c;position:fixed;inset:0}@media (width>=900px){.sc-sidebar:not(.is-open){display:none!important}.sc-backdrop{display:none}}@media (width<=899px){.sc-sidebar{z-index:41;transition:transform .2s;top:0;bottom:0;left:0;overflow-y:auto;transform:translate(-100%);position:fixed!important}.sc-sidebar.is-open{transform:translate(0)}}