:root{color-scheme:dark;--bg: #15161a;--panel: #1f2127;--panel-2: #262932;--line: #333743;--text: #e6e6ea;--muted: #9a9daa;--accent: #d9a441;--accent-2: #f0c46b;--danger: #d9534f;--play: #1f9aa0;--play-2: #2bb5bb;--play-ink: #f2fbfb;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0%,#1d1f26 0%,var(--bg) 60%);color:var(--text)}.app{min-height:100vh;display:grid;grid-template-columns:300px minmax(360px,1fr) 320px;grid-template-rows:auto auto 1fr;grid-template-areas:"top top top" "scale stage right" "notes stage right";gap:16px;padding:16px}.topbar{grid-area:top;display:flex;align-items:baseline;gap:16px}.topbar h1{margin:0;font-size:20px;font-weight:600;letter-spacing:.02em}.column{display:flex;flex-direction:column;gap:12px;min-width:0}.area-scale{grid-area:scale}.area-notes{grid-area:notes}.right{grid-area:right}.stage{grid-area:stage;position:sticky;top:16px;align-self:start;height:calc(100vh - 92px);display:flex;align-items:center;justify-content:center;min-height:0}.pan{height:100%;width:auto;max-width:100%;max-height:100%;aspect-ratio:1;display:block;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55));-webkit-user-select:none;user-select:none;touch-action:manipulation}.pan3d{position:relative;width:100%;height:100%;min-height:320px;-webkit-user-select:none;user-select:none}.pan3d-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%!important;height:100%!important;display:block;touch-action:none;cursor:grab}.pan3d-canvas:active{cursor:grabbing}.pan3d-labels{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.label3d{display:flex;flex-direction:column;align-items:center;gap:1px;color:#eef3fa;font-weight:600;font-size:15px;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 6px rgba(0,0,0,.6);white-space:nowrap}.label3d.ding{font-size:18px}.label3d small{font-size:10px;font-weight:500;color:#b7c3d6}.pan3d-buttons{position:absolute;left:8px;bottom:8px;z-index:2;display:flex;gap:6px}.pip{z-index:3}.pip{position:absolute;right:0;bottom:0;width:26%;min-width:140px;background:#14161bbf;border:1px solid var(--line);border-radius:12px;padding:8px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.pip .pan{width:100%;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}.pip-toggle{position:absolute;top:6px;left:8px;padding:2px 8px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;background:transparent;border-color:transparent}.pip-toggle:hover:not(:disabled){color:var(--text);background:#ffffff0f}.pip-toggle.collapsed{top:auto;left:auto;right:0;bottom:0;background:#14161bbf;border:1px solid var(--line);border-radius:10px;padding:6px 10px}.field{cursor:pointer}.field:hover ellipse:not(.flash),.field:hover circle:not(.flash){filter:brightness(1.12)}.pan text{fill:#e9f0fa;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;pointer-events:none;paint-order:stroke;stroke:#030812bf;stroke-width:.014px;stroke-linejoin:round}.pan .label{font-size:.085px;font-weight:600}.pan .ding-label{font-size:.1px}.pan .key-hint{font-size:.055px;fill:#b7c3d6}.pan .ghost-label{font-size:.06px;fill:#c9d9f0;opacity:.45;stroke:none}.flash-group{pointer-events:none}.rim-hit{cursor:pointer}.flash-rim{stroke:var(--accent-2);stroke-width:.05px;pointer-events:none;animation:strike .35s ease-out forwards}.flash{fill:var(--accent-2);animation:strike .8s ease-out forwards}.flash-glow{fill:var(--accent-2);animation:strike-glow 1.1s ease-out forwards}@keyframes strike{0%{opacity:.7}to{opacity:0}}@keyframes strike-glow{0%{opacity:.9}to{opacity:0}}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}.panel h2{margin:0;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.panel h3{margin:6px 0 0;font-size:12px;font-weight:600;color:var(--muted)}.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.space-between{justify-content:space-between}.stack{display:flex;flex-direction:column;gap:4px}.muted{color:var(--muted)}.small{font-size:12px;line-height:1.4;margin:0}.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}select,input[type=range],button{font:inherit;color:inherit}select{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:6px 8px}button{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:6px 12px;cursor:pointer}button:hover:not(:disabled){border-color:#4a5060}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#1a1408;font-weight:600}button.primary:hover{background:var(--accent-2)}.play-button{width:100%;display:flex;align-items:center;justify-content:center;gap:16px;padding:14px 18px 12px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:linear-gradient(180deg,var(--play-2),var(--play));color:var(--play-ink);box-shadow:0 6px 18px #1f9aa04d;transition:transform .12s ease,box-shadow .2s ease,filter .2s ease}.play-button:hover{filter:brightness(1.08);box-shadow:0 8px 22px #1f9aa066}.play-button:active{transform:translateY(1px)}.play-button .play-icon{font-size:24px;line-height:1}.play-button .play-text{display:flex;flex-direction:column;align-items:flex-start;gap:5px;line-height:1;font-size:22px;font-weight:700;letter-spacing:.01em}.play-button .play-text small{font-size:12px;font-weight:500;opacity:.85;letter-spacing:.03em}.play-button.stop{background:linear-gradient(180deg,#d8665e,#b8463f);color:#fff4f2;box-shadow:0 6px 18px #b8463f4d}button.mini{padding:2px 8px;font-size:12px;border-radius:6px}button.mini.on{background:var(--accent);border-color:var(--accent);color:#1a1408}button.mini.danger:hover:not(:disabled){border-color:var(--danger);color:var(--danger)}.segmented{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}.segmented button{flex:1;border:0;border-radius:0;background:transparent;padding:6px 4px}.segmented button+button{border-left:1px solid var(--line)}.segmented button.on{background:var(--accent);color:#1a1408;font-weight:600}.slider{display:flex;flex-direction:column;gap:2px}.slider.disabled{opacity:.45}.slider input{width:100%;accent-color:var(--accent);margin:0}.file-button{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);cursor:pointer}.file-button:hover{border-color:#4a5060}.file-button input{display:none}.record-button{border-color:#5a3a3a}.record-button.on{background:#b8463f;border-color:#b8463f;color:#fff4f2}.recording-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:30vh;overflow:auto}.recording-list li{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:6px;padding:3px 6px;border-radius:6px;background:var(--panel-2)}.recording-list .name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.note-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:40vh;overflow:auto}.note-list li{display:grid;grid-template-columns:3.2em 1fr auto auto;align-items:center;gap:6px;padding:3px 6px;border-radius:6px;background:var(--panel-2)}.note-list li.bottom{background:#2a2533}.note-list .pitch{font-weight:600}.note-list .role{color:var(--muted);font-size:12px}.scale-info{display:flex;flex-direction:column;gap:6px}.notes-line{display:flex;flex-wrap:wrap;gap:4px}.chip{padding:1px 7px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);font-size:12px}.chip.ding{border-color:var(--accent)}.chip.bottom{background:#2a2533;border-style:dashed}@media(max-width:1000px){.app{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"top" "scale" "stage" "right" "notes"}.stage{position:relative;top:auto;height:auto}.pan{height:auto;width:min(100%,80vh)}.pan3d{height:auto;aspect-ratio:1;min-height:0}.pan3d-canvas{touch-action:pan-y}}