*{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{--radius-lg:8px;--radius-md:6px;--radius-sm:4px;--bg:#080d0b;--surface:#101612;--surface-2:#161e18;--surface-3:#1e2820;--border:#263128;--border-soft:#1c2620;--text:#f1ede1;--text-dim:#a3b0a3;--text-faint:#697566;--green:#3ecf8e;--green-strong:#24b47e;--green-soft:#3ecf8e21;--green-line:#3ecf8e59;--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:#1a8f5a;--green-strong:#147a4c;--green-soft:#1a8f5a1c;--green-line:#1a8f5a52;--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)}}@keyframes spin{to{transform:rotate(360deg)}}.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:var(--radius-md) var(--radius-md) 0 0}.sc-input,.sc-select{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);height:38px;font:inherit;color:var(--text);box-sizing:border-box;width:100%;padding:8px 12px}.sc-select{padding-right:30px}.sc-input::placeholder{color:var(--text-faint)}.sc-input:focus,.sc-select:focus{border-color:var(--green);box-shadow:0 0 0 2px var(--green-soft);outline:none}.sc-input:disabled,.sc-select:disabled{opacity:.6}.sc-menu-btn{z-index:45;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);width:38px;height:38px;color:var(--text-dim);cursor:pointer;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)}}