:root{color-scheme:dark;font-family:Oswald,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--bg: #10131a;--text: #f2f5f8;--muted: #9aa5b1;--surface: rgba(17, 21, 29, .9);--border: rgba(255, 255, 255, .14);--canvas-bg: #0d1117;--cell-fill: rgba(244, 247, 249, .96);--cell-border: rgba(255, 255, 255, .58);--cell-tonic: #f7e6a8;--cell-active: #7ee8ff;--cell-text: #10202b;--active-text: #06212d;--axis-horizontal: rgba(225, 234, 244, .52);--axis-rising: rgba(82, 226, 174, .54);--axis-falling: rgba(255, 203, 92, .5);--node-glow: rgba(255, 255, 255, .08);--node-orbit: rgba(225, 234, 244, .56);--active-ring: rgba(255, 255, 255, .82);--node-shadow: rgba(0, 0, 0, .42);--node-highlight: rgba(255, 255, 255, .95);--soft-shadow: rgba(0, 0, 0, .34);--soft-pressed-shadow: rgba(0, 0, 0, .42);--soft-highlight-shadow: rgba(255, 255, 255, .18);--soft-top: #ffffff;--soft-mid: #eef2f5;--soft-bottom: #cdd4da;--soft-tonic-mid: #f6e8b4;--soft-active-bottom: #8fcfe0;--soft-inset-top: rgba(92, 106, 118, .32);--soft-inset-bottom: rgba(255, 255, 255, .74);--soft-gloss: rgba(255, 255, 255, .86);--soft-tonic-rim: rgba(255, 241, 190, .94)}[data-theme=light]{color-scheme:light;--bg: #eef1f4;--text: #121821;--muted: #506070;--surface: rgba(245, 247, 249, .92);--border: rgba(18, 24, 33, .18);--canvas-bg: #e6eaee;--cell-fill: rgba(248, 249, 250, .96);--cell-border: rgba(255, 255, 255, .9);--cell-tonic: #f5dd94;--cell-active: #48c8e8;--cell-text: #14202c;--active-text: #06212d;--axis-horizontal: rgba(28, 40, 54, .44);--axis-rising: rgba(0, 145, 110, .5);--axis-falling: rgba(219, 146, 0, .5);--node-glow: rgba(255, 255, 255, .22);--node-orbit: rgba(28, 40, 54, .38);--active-ring: rgba(255, 255, 255, .92);--node-shadow: rgba(32, 45, 58, .24);--node-highlight: rgba(255, 255, 255, .98);--soft-shadow: rgba(35, 45, 58, .2);--soft-pressed-shadow: rgba(35, 45, 58, .28);--soft-highlight-shadow: rgba(255, 255, 255, .86);--soft-top: #ffffff;--soft-mid: #f0f2f4;--soft-bottom: #cfd4d9;--soft-tonic-mid: #f5e1a0;--soft-active-bottom: #8ad2e3;--soft-inset-top: rgba(90, 101, 112, .26);--soft-inset-bottom: rgba(255, 255, 255, .82);--soft-gloss: rgba(255, 255, 255, .92);--soft-tonic-rim: rgba(255, 241, 190, .95)}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden;touch-action:none}body{background:var(--bg);color:var(--text);-webkit-user-select:none;user-select:none}button,select,input{font:inherit}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--cell-active);outline-offset:2px}.app-shell{position:relative;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text)}.tonnetz-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.app-header{position:fixed;z-index:10;top:max(10px,env(safe-area-inset-top));left:10px;right:10px;display:flex;align-items:center;gap:12px;min-height:56px;padding:8px;border:1px solid var(--border);border-radius:8px;background:var(--surface);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.header-restore-button{position:fixed;z-index:11;top:max(10px,env(safe-area-inset-top));left:10px;min-width:58px;min-height:36px;border:1px solid var(--border);border-radius:8px;background:color-mix(in srgb,var(--surface),transparent 22%);color:var(--muted);opacity:.54;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:pointer}.header-restore-button:hover,.header-restore-button:focus-visible{color:var(--text);opacity:.96}.hold-toggle{position:fixed;z-index:9;left:12px;bottom:max(12px,env(safe-area-inset-bottom));min-width:70px;min-height:46px;border:1px solid var(--border);border-radius:8px;background:color-mix(in srgb,var(--surface),var(--text) 6%);color:var(--text);box-shadow:0 10px 28px #00000038;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);cursor:pointer}.hold-toggle[aria-pressed=true]{border-color:color-mix(in srgb,var(--cell-active),white 24%);background:var(--cell-active);color:var(--active-text)}.brand{flex:0 0 auto;font-size:17px;font-weight:600}.control-row{display:flex;align-items:center;gap:8px;min-width:0;overflow-x:auto;scrollbar-width:thin}.control-button,select{min-height:40px;border:1px solid var(--border);border-radius:8px;background:color-mix(in srgb,var(--surface),var(--text) 6%);color:var(--text);padding:0 12px}.control-button[aria-pressed=true]{border-color:color-mix(in srgb,var(--cell-active),white 24%);background:var(--cell-active);color:var(--active-text)}.volume-control{display:inline-flex;align-items:center;gap:8px;min-height:40px;color:var(--muted);white-space:nowrap}.volume-control input{width:112px}.study-panel{position:fixed;z-index:8;right:12px;bottom:12px;display:grid;grid-template-columns:repeat(5,auto);gap:12px;max-width:calc(100% - 24px);padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.study-panel div{min-width:72px}.panel-label{display:block;margin-bottom:2px;color:var(--muted);font-size:11px;text-transform:uppercase}.study-panel strong{display:block;font-size:14px;font-weight:500;white-space:nowrap}@media(max-width:760px){.app-header{align-items:flex-start;flex-direction:column}.control-row{width:100%}.study-panel{grid-template-columns:repeat(2,minmax(0,1fr));left:12px}}