:root{--bg-base:#0f172a;--bg-surface:#1e293b;--bg-elevated:#283548;--bg-inset:#0b1120;--bg-input:#0f172a;--border:#334155;--border-light:#475569;--text:#e2e8f0;--text-muted:#94a3b8;--text-dim:#64748b;--accent:#3b82f6;--accent-hover:#2563eb;--green:#22c55e;--green-hover:#16a34a;--red:#ef4444;--red-hover:#dc2626;--orange:#f97316;--note-blue:#0ea5e9;--note-border:#0284c7;color:var(--text);background-color:var(--bg-base);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,Segoe UI,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:400;line-height:1.5}[data-theme=light]{--bg-base:#f1f5f9;--bg-surface:#fff;--bg-elevated:#e2e8f0;--bg-inset:#e8ecf1;--bg-input:#fff;--border:#cbd5e1;--border-light:#94a3b8;--text:#0f172a;--text-muted:#475569;--text-dim:#64748b;--accent:#2563eb;--accent-hover:#1d4ed8;--green:#16a34a;--green-hover:#15803d;--red:#dc2626;--red-hover:#b91c1c;--orange:#ea580c;--note-blue:#0284c7;--note-border:#0369a1;color:var(--text);background-color:var(--bg-base)}*,:before,:after{box-sizing:border-box}body{min-width:320px;margin:0}#root{min-height:100vh}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin{animation:.8s linear infinite spin}.app-shell{grid-template-rows:auto 1fr;min-height:100vh;display:grid}.app-header{background:var(--bg-surface);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:.65rem 1.25rem;display:flex}.brand{color:var(--text);text-decoration:none}.brand h1{letter-spacing:.02em;margin:0;font-size:1.2rem;font-weight:700}.header-nav{align-items:center;gap:.5rem;display:flex}.app-content{width:100%;max-width:960px;margin:0 auto;padding:1.25rem}.btn{border:1px solid var(--border);background:var(--bg-surface);color:var(--text);cursor:pointer;white-space:nowrap;border-radius:8px;padding:.45rem .85rem;font-size:.9rem;transition:border-color .15s,background .15s}.btn:hover:not(:disabled){border-color:var(--border-light);background:var(--bg-elevated)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-sm{padding:.3rem .6rem;font-size:.82rem}.btn-lg{border-radius:10px;padding:.7rem 2rem;font-size:1.05rem;font-weight:600}.btn-ghost{background:0 0;border-color:#0000}.btn-ghost:hover:not(:disabled){background:var(--bg-elevated);border-color:#0000}.btn-icon{place-items:center;padding:.35rem;display:grid}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.btn-start{background:var(--green);border-color:var(--green);color:#fff}.btn-start:hover:not(:disabled){background:var(--green-hover);border-color:var(--green-hover)}.btn-stop{background:var(--red);border-color:var(--red);color:#fff}.btn-stop:hover:not(:disabled){background:var(--red-hover);border-color:var(--red-hover)}.btn-danger{color:var(--red);border-color:var(--border)}.btn-danger:hover:not(:disabled){border-color:var(--red);background:#ef44441f}input[type=text],input[type=number],select{border:1px solid var(--border);background:var(--bg-input);color:var(--text);border-radius:8px;padding:.45rem .55rem;font-size:.95rem}input[type=text]:focus,input[type=number]:focus,select:focus{border-color:var(--accent);outline:none}input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px}.practice-empty{text-align:center;padding:3rem 1rem}.practice-empty h2{margin:0 0 .5rem;font-size:1.4rem}.practice-empty p{color:var(--text-muted);margin:0 0 1.5rem}.practice-page{flex-direction:column;gap:1.25rem;min-height:calc(100vh - 60px - 2.5rem);display:flex}.tab-bar{border-bottom:1px solid var(--border);align-items:center;gap:.25rem;padding-bottom:0;display:flex}.tab-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;padding:.5rem .85rem;font-size:.95rem;font-weight:600;transition:color .15s,border-color .15s}.tab-btn:hover:not(:disabled){color:var(--text)}.tab-btn-active{color:var(--accent);border-bottom-color:var(--accent)}.tab-btn:disabled{opacity:.4;cursor:default}.tab-bar-right{margin-left:auto;padding-bottom:.35rem}.exercise-table-wrap{border:1px solid var(--border);background:var(--bg-inset);border-radius:10px;flex:1;min-height:0;overflow-y:auto}.exercise-table{border-collapse:collapse;width:100%;font-size:.82rem}.exercise-th{background:var(--bg-surface);text-align:left;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);border-bottom:1px solid var(--border);white-space:nowrap;z-index:1;padding:.45rem .55rem;font-size:.72rem;font-weight:600;position:sticky;top:0}.exercise-th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.exercise-th.sortable:hover{color:var(--text)}.exercise-th-visual{width:130px}.exercise-th-actions{width:1%}.exercise-table-empty{text-align:center;color:var(--text-muted);padding:2rem 1rem}.exercise-row{cursor:pointer;transition:background .1s}.exercise-row:hover,.exercise-row-selected{background:var(--bg-surface)}.exercise-td{border-bottom:1px solid var(--border);vertical-align:middle;white-space:nowrap;padding:.35rem .55rem}.exercise-td-date{color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:.75rem}.exercise-td-name{text-overflow:ellipsis;max-width:160px;font-weight:600;overflow:hidden}.exercise-td-owner{color:var(--accent);font-weight:500}.exercise-td-visual{padding-top:.25rem;padding-bottom:.25rem}.exercise-td-actions{white-space:nowrap}.exercise-td-actions .btn{margin-left:.2rem}.btn-xs{border-radius:6px;padding:.2rem .5rem;font-size:.75rem}.picker-field{gap:.25rem;display:grid}.picker-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:.78rem;font-weight:600}.picker-tempo,.picker-narrow{width:80px}.picker-tempo input{width:100%}.practice-rhythm{margin:0}.practice-rhythm-grid{border:1px solid var(--border);background:var(--bg-surface);border-radius:10px;height:80px;position:relative;overflow:hidden}.practice-line{width:1px;position:absolute;top:0;bottom:0}.practice-line.sub{background:var(--border)}.practice-line.beat{background:var(--text-dim)}.practice-line.bar{background:var(--text-muted);width:2px}.practice-note{background:var(--note-blue);border:1px solid var(--note-border);box-sizing:border-box;border-radius:4px;min-width:4px;height:24px;position:absolute;top:28px}.practice-playhead{background:var(--orange);opacity:.4;width:2px;transition:opacity .15s;position:absolute;top:0;bottom:0;transform:translate(-1px)}.practice-playhead.active{opacity:1;box-shadow:0 0 8px #f9731680}.practice-exercise-header{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem;display:flex}.practice-exercise-name{margin-right:.5rem;font-size:1.05rem;font-weight:700}.practice-exercise-owner{color:var(--accent);font-size:.8rem;font-weight:500}.practice-exercise-meta{color:var(--text-muted);font-size:.8rem}.practice-empty-tab{text-align:center;color:var(--text-muted);padding:2rem 0}.transport-options{flex-wrap:wrap;align-items:end;gap:.85rem;display:flex}.checkbox-field{color:var(--text-muted);cursor:pointer;align-items:center;gap:.4rem;padding-bottom:.45rem;font-size:.88rem;display:flex}.transport{align-items:center;gap:1.25rem;display:flex}.transport-status{color:var(--text-muted);gap:1rem;font-size:.88rem;display:flex}.phase-indicator{font-weight:600}.phase-idle{color:var(--text-dim)}.phase-count-in{color:var(--orange)}.phase-playing{color:var(--green)}.page-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:1.25rem}.page-card h2{margin:0 0 .75rem}.page-card a{color:var(--accent)}.editor-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;display:grid}.editor-form label{color:var(--text-muted);gap:.3rem;font-size:.85rem;display:grid}.editor-actions{margin-top:1rem}.grid-panel{margin-top:1.25rem}.grid-panel h3{margin:0 0 .35rem;font-size:1.05rem}.grid-panel p{color:var(--text-muted);margin:0 0 .6rem;font-size:.88rem}.grid-toolbar{flex-wrap:wrap;gap:.45rem;margin-bottom:.7rem;display:flex}.grid-canvas-wrapper{border:1px solid var(--border);background:var(--bg-surface);border-radius:10px;width:100%;overflow:hidden}.grid-canvas-wrapper canvas{cursor:crosshair;touch-action:none;width:100%;height:170px;display:block}.notation-panel{margin-top:1.25rem}.notation-panel h3{margin:0 0 .4rem}.notation-panel p{color:var(--text-muted);font-size:.88rem}.notation-container{border:1px solid var(--border);background:#fff;border-radius:10px;margin-top:.6rem;padding:.25rem;overflow-x:auto}.modal-backdrop{z-index:100;background:#0009;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.modal-panel{background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;width:100%;max-width:420px;max-height:90vh;padding:1.5rem;overflow-y:auto}.modal-header{justify-content:space-between;align-items:center;margin-bottom:1.25rem;display:flex}.modal-header h2{margin:0}.settings-grid{gap:1rem;display:grid}.setting-row{grid-template-columns:1fr auto;align-items:center;gap:.75rem;display:grid}.setting-label{color:var(--text-muted);font-size:.9rem}.setting-row input[type=number]{text-align:center;width:70px}.setting-row select{min-width:100px}.checkbox-row input[type=checkbox]{justify-self:end}.error-text{color:var(--red)!important}@media (width<=640px){.app-content{padding:.9rem}.editor-form{grid-template-columns:1fr}.exercise-td-date{display:none}.picker-tempo{width:100%}}