*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}:root{--bg: #1a1a2e;--bg-secondary: #16213e;--text: #e0e0e0;--text-secondary: #a0a0a0;--accent: #0f3460;--accent-light: #533483;--note-color: #e94560;--grid-line: rgba(255, 255, 255, .06);--grid-bar: rgba(255, 255, 255, .15);--key-white: #2a2a3e;--key-black: #1a1a28;--toolbar-bg: #0f0f23;--button-bg: #2a2a4a;--button-hover: #3a3a5a;--button-active: #e94560;--tg-bg: var(--tg-theme-bg-color, var(--bg));--tg-text: var(--tg-theme-text-color, var(--text));--tg-hint: var(--tg-theme-hint-color, var(--text-secondary));--tg-button: var(--tg-theme-button-color, var(--button-active));--tg-button-text: var(--tg-theme-button-text-color, #fff);--tg-secondary-bg: var(--tg-theme-secondary-bg-color, var(--bg-secondary))}[data-theme=light]{--bg: #f5f5f5;--bg-secondary: #e8e8e8;--text: #1a1a1a;--text-secondary: #666;--accent: #3366cc;--accent-light: #6699ff;--note-color: #e94560;--grid-line: rgba(0, 0, 0, .06);--grid-bar: rgba(0, 0, 0, .15);--key-white: #ffffff;--key-black: #d0d0d0;--toolbar-bg: #e0e0e0;--button-bg: #d0d0e0;--button-hover: #c0c0d0;--button-active: #e94560}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.spinner{width:48px;height:48px;border:4px solid var(--text-secondary);border-top-color:var(--button-active);border-radius:50%;animation:spin 1s linear infinite}.loading-text{animation:pulse 1.5s ease-in-out infinite}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)}button{background:var(--button-bg);color:var(--text);border:none;padding:10px 18px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:500;transition:background .2s,transform .1s;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;user-select:none;-webkit-user-select:none}button:hover{background:var(--button-hover)}button:active,button.active{background:var(--button-active);color:#fff;transform:scale(.96)}button:disabled{opacity:.5;cursor:not-allowed;transform:none}button.btn-icon{padding:8px 12px;min-width:40px}@media(hover:none){button:hover{background:var(--button-bg)}button:active{background:var(--button-active)}}