@font-face{font-family:EB Garamond;font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/eb-garamond-latin.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg-0:#121110;--bg-1:#1a1917;--bg-2:#232220;--bg-3:#2e2c29;--line:#ffffff12;--line-strong:#ffffff1f;--text-0:#f2f0ec;--text-1:#b8b5ae;--text-2:#807d76;--accent:#d9a45b;--accent-hover:#e4b871;--accent-pressed:#c2914a;--accent-deep:#a8772e;--accent-soft:#d9a45b24;--danger:#e0695e;--success:#7fb285;--paper:#faf7f1;--paper-text:#1c1a17;--r-sm:6px;--r-md:10px;--r-lg:14px;--shadow-card:0 1px 2px #00000059;--shadow-paper:0 2px 6px #00000059, 0 12px 32px #0000004d;--shadow-toast:0 4px 12px #0006, 0 12px 40px #00000059;--ease-out:cubic-bezier(.22, .61, .21, 1);--dur-fast:.12s;--dur-med:.2s;--dur-slow:.24s;--shell-h:48px;--toolbar-h:46px;--seekbar-h:16px;--font-ui:system-ui, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--font-display:"EB Garamond", Georgia, "Times New Roman", serif;--fs-caption:.6875rem;--fs-meta:.75rem;--fs-body:.8125rem;--fs-body-strong:.875rem;--fs-title:1rem;--fs-panel:1.25rem;--fs-section:1.75rem;--fs-readout-sm:1.375rem;--fs-readout-md:1.5rem;--fs-readout-lg:3rem;--fs-readout-xl:3.5rem;--fs-root:14px;font-family:var(--font-ui);font-size:var(--fs-root);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}*{box-sizing:border-box;touch-action:manipulation}body{background:var(--bg-0);height:100vh;color:var(--text-0);margin:0;overflow:hidden}#app{flex-direction:column;height:100vh;display:flex}.library__list,.score__scroll{scrollbar-width:thin;scrollbar-color:var(--bg-3) transparent}.library__list::-webkit-scrollbar{width:8px}.score__scroll::-webkit-scrollbar{width:8px}.library__list::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:4px}.score__scroll::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:4px}button{font:inherit;height:32px;color:var(--text-1);background:var(--bg-2);border:1px solid var(--line-strong);border-radius:var(--r-md);cursor:pointer;transition:color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);padding:0 12px}@media (hover:hover) and (pointer:fine){button:hover{color:var(--text-0);border-color:var(--accent)}}button:active{background:var(--bg-3)}button:focus-visible,input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.icon-btn{border-radius:var(--r-md);width:32px;height:32px;color:var(--text-1);touch-action:manipulation;background:0 0;border-color:#0000;justify-content:center;align-items:center;padding:0;display:inline-flex}@media (hover:hover) and (pointer:fine){.icon-btn:hover{background:var(--bg-2);color:var(--text-0);border-color:#0000}}.icon-btn svg{display:block}.btn-primary{background:var(--accent);color:#241b0d;border-color:#0000;font-weight:600}.btn-primary:hover{background:var(--accent-hover);color:#241b0d;border-color:#0000}.btn-primary:active{background:var(--accent-pressed)}.btn-outline{border-color:var(--line-strong);color:var(--text-0);background:0 0}.btn-outline:hover{border-color:var(--accent);color:var(--accent)}input[type=range]{appearance:none;cursor:pointer;background:0 0;height:20px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill,0%), var(--bg-3) var(--fill,0%));border-radius:2px;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--text-0);width:12px;height:12px;transition:transform var(--dur-fast) var(--ease-out);border:none;border-radius:50%;margin-top:-4px;box-shadow:0 1px 3px #00000080}input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.3)}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.3)}input[type=range]::-moz-range-track{background:var(--bg-3);border-radius:2px;height:4px}input[type=range]::-moz-range-progress{background:var(--accent);border-radius:2px;height:4px}input[type=range]::-moz-range-thumb{background:var(--text-0);border:none;border-radius:50%;width:12px;height:12px;box-shadow:0 1px 3px #00000080}.hidden-input{display:none}.shell{height:var(--shell-h);background:var(--bg-0);border-bottom:1px solid var(--line);flex:none;align-items:center;gap:24px;padding:0 16px;display:flex}.shell__brand{font-family:var(--font-display);font-size:var(--fs-panel);letter-spacing:.02em;color:var(--text-0);-webkit-user-select:none;user-select:none;align-items:center;gap:10px;font-weight:600;display:flex}.shell__logo{color:var(--accent);display:block}.shell__tabs{gap:4px;height:100%;display:flex}.shell__tab{height:100%;font-size:var(--fs-body-strong);color:var(--text-2);background:0 0;border:none;border-radius:0;padding:0 14px;position:relative}.shell__tab:hover{color:var(--text-0);background:0 0}.shell__tab.is-active{color:var(--text-0)}.shell__tab.is-active:after{content:"";background:var(--accent);border-radius:1px;width:24px;height:2px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.shell__tool{flex-direction:column;flex:1;min-height:0;display:flex}.playerdock{background:var(--bg-1);border-top:1px solid var(--line);flex:none}.transport{height:var(--toolbar-h);align-items:center;gap:12px;padding:0 16px;display:flex}.transport__spacer{flex:1}.transport__controls{align-items:center;gap:16px;margin-left:32px;display:flex}.transport__tools{align-items:center;gap:16px;margin-right:32px;display:flex}.transport__sidebar-toggle{visibility:hidden}.transport__sidebar-toggle.is-visible{visibility:visible}.seekbar{height:var(--seekbar-h);align-items:center;display:flex}.transport__seek{width:100%;height:var(--seekbar-h)}.transport__seek::-webkit-slider-runnable-track{border-radius:0;height:3px}.transport__seek::-webkit-slider-thumb{opacity:0;width:12px;height:12px;transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);margin-top:-4.5px}.seekbar:hover .transport__seek::-webkit-slider-thumb{opacity:1}.transport__seek:active::-webkit-slider-thumb{opacity:1}.transport__seek:focus-visible::-webkit-slider-thumb{opacity:1}.transport__seek::-moz-range-track{border-radius:0;height:3px}.transport__seek::-moz-range-progress{border-radius:0;height:3px}.transport__seek::-moz-range-thumb{opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}.seekbar:hover .transport__seek::-moz-range-thumb{opacity:1}.transport__seek:active::-moz-range-thumb{opacity:1}.transport__seek:focus-visible::-moz-range-thumb{opacity:1}.transport__play{width:36px;height:36px;position:relative}.transport__stop{width:36px;height:36px}.transport__play-ring{pointer-events:none;position:absolute;inset:1px;transform:rotate(-90deg)}.transport__play-ring circle{fill:none;stroke:var(--accent);stroke-width:2px;stroke-linecap:round}.transport__time{font-variant-numeric:tabular-nums;font-size:var(--fs-body);color:var(--text-1);white-space:nowrap;text-align:center;min-width:92px}.transport__volume-wrap{display:inline-flex;position:relative}.transport__volume-btn{color:var(--text-1)}.transport__volume-btn.is-muted{color:var(--text-2)}@media (hover:hover) and (pointer:fine){.transport__volume-btn:hover{color:var(--text-0)}}.transport__volume-popup{z-index:30;background:var(--bg-3);border:1px solid var(--line-strong);border-radius:var(--r-md);width:44px;height:124px;box-shadow:var(--shadow-toast);justify-content:center;align-items:center;padding:12px 0;display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%)}.transport__volume-popup:before{content:"";height:6px;position:absolute;top:100%;left:0;right:0}@media (hover:hover) and (pointer:fine){.transport__volume-wrap:hover .transport__volume-popup,.transport__volume-wrap:focus-within .transport__volume-popup{display:flex}}.transport__volume-wrap.is-open .transport__volume-popup{display:flex}.transport__volume{width:100px;transform:rotate(-90deg)}.transport__volume::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill,0%), #ffffff24 var(--fill,0%))}.transport__volume::-moz-range-track{background:#ffffff24}.transport__view{color:var(--text-2)}.transport__view.is-on{color:var(--text-0)}@media (hover:hover) and (pointer:fine){.transport__view:hover{color:var(--text-1)}.transport__view.is-on:hover{color:var(--text-0)}}.transport__midi{color:var(--text-2)}@media (hover:hover) and (pointer:fine){.transport__midi:hover{color:var(--text-0)}}.transport__midi.is-connecting svg{animation:.9s linear infinite midi-spin}@keyframes midi-spin{to{transform:rotate(360deg)}}.icon-btn.is-connected,.icon-btn.is-active{color:var(--accent);background:var(--accent-soft);border-color:#0000}@media (hover:hover) and (pointer:fine){.icon-btn.is-connected:hover,.icon-btn.is-active:hover{background:var(--accent-soft);color:var(--accent-hover)}}.icon-btn:disabled,.icon-btn:disabled:hover{color:var(--text-2);opacity:.45;cursor:default;background:0 0;border-color:#0000}.transport__practice-wrap{display:inline-flex;position:relative}.transport__practice-menu{z-index:30;background:var(--bg-3);border:1px solid var(--line-strong);border-radius:var(--r-md);min-width:208px;max-width:280px;max-height:380px;box-shadow:var(--shadow-toast);flex-direction:column;padding:4px 6px 6px;display:none;position:absolute;bottom:calc(100% + 8px);right:0}@media (hover:hover) and (pointer:fine){.transport__practice-wrap:hover .transport__practice-menu,.transport__practice-wrap:focus-within .transport__practice-menu{display:flex}}.transport__practice-wrap.is-open .transport__practice-menu{display:flex}.transport__practice-menu:before{content:"";height:8px;position:absolute;top:100%;left:0;right:0}.transport__practice-menu__title{font-size:var(--fs-meta);letter-spacing:.04em;color:var(--text-2);white-space:nowrap;padding:6px 10px 8px}.transport__practice-menu__desc{font-size:var(--fs-caption);color:var(--text-2);opacity:.75;padding:0 10px 6px;line-height:1.4}.transport__practice-menu__list{flex-direction:column;gap:2px;display:flex;overflow-y:auto}.transport__practice-item{border-radius:var(--r-sm);width:100%;height:32px;color:var(--text-1);cursor:pointer;background:0 0;border:1px solid #0000;align-items:center;gap:8px;padding:0 10px;display:flex}@media (hover:hover) and (pointer:fine){.transport__practice-item:hover{background:var(--bg-2);color:var(--text-0);border-color:#0000}}.transport__practice-item__swatch{border-radius:3px;flex:none;width:10px;height:10px}.transport__practice-item__name{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:var(--fs-body);flex:1;overflow:hidden}.transport__practice-item__dot{border:1.5px solid var(--line-strong);border-radius:50%;flex:none;width:8px;height:8px}.transport__practice-item.is-active{color:var(--accent);background:var(--accent-soft)}.transport__practice-item.is-active .transport__practice-item__dot{background:var(--accent);border-color:#0000}.transport__practice-item:disabled,.transport__practice-item:disabled:hover{color:var(--text-2);opacity:.5;cursor:default;background:0 0;border-color:#0000}.transport__practice-menu__empty{font-size:var(--fs-body);color:var(--text-2);white-space:nowrap;padding:8px 10px 10px;display:none}.transport__practice-menu__empty.is-visible{display:block}.transport__practice-menu__pedals{border-top:1px solid var(--line);flex-direction:column;gap:2px;margin-top:4px;padding-top:4px;display:flex}.transport__practice-menu__subtitle{font-size:var(--fs-meta);letter-spacing:.04em;color:var(--text-2);white-space:nowrap;padding:4px 10px 6px}.transport__practice-pedal{border-radius:var(--r-sm);height:30px;color:var(--text-1);cursor:pointer;align-items:center;gap:8px;padding:0 10px;display:flex}@media (hover:hover) and (pointer:fine){.transport__practice-pedal:hover{background:var(--bg-2);color:var(--text-0)}}.transport__practice-radio{width:14px;height:14px;accent-color:var(--accent);cursor:pointer;flex:none;margin:0}.transport__practice-pedal__label{font-size:var(--fs-body);white-space:nowrap}.transport__practice-pedal:has(.transport__practice-radio:checked){color:var(--accent);background:var(--accent-soft)}.transport__practice-pedal:has(.transport__practice-radio:disabled){color:var(--text-2);opacity:.5;cursor:default}.transport__practice-pedal:has(.transport__practice-radio:disabled):hover{color:var(--text-2);background:0 0}.transport__midi-wrap{display:inline-flex;position:relative}.transport__midi-menu{z-index:30;background:var(--bg-3);border:1px solid var(--line-strong);border-radius:var(--r-md);min-width:208px;max-width:280px;max-height:320px;box-shadow:var(--shadow-toast);flex-direction:column;padding:4px 6px 6px;display:none;position:absolute;bottom:calc(100% + 8px);right:0}.transport__midi-wrap.is-open .transport__midi-menu{display:flex}.transport__midi-menu:before{content:"";height:8px;position:absolute;top:100%;left:0;right:0}.transport__midi-menu__title{font-size:var(--fs-meta);letter-spacing:.04em;color:var(--text-2);white-space:nowrap;padding:6px 10px 8px}.transport__midi-menu__body{flex-direction:column;gap:4px;display:flex;overflow-y:auto}.transport__midi-menu__text,.transport__midi-menu__device{font-size:var(--fs-body);color:var(--text-1);text-overflow:ellipsis;white-space:nowrap;padding:4px 10px;overflow:hidden}.transport__midi-menu__text--hint{color:var(--danger)}.transport__midi-menu__retry{height:30px;font-size:var(--fs-body);background:var(--bg-2);border:1px solid var(--line-strong);border-radius:var(--r-sm);color:var(--text-0);cursor:pointer;align-self:stretch;margin:4px 6px 2px;padding:0 10px}@media (hover:hover) and (pointer:fine){.transport__midi-menu__retry:hover{border-color:var(--accent);color:var(--accent)}}.notice{top:calc(var(--shell-h) + 12px);z-index:20;max-width:min(560px,80vw);font-size:var(--fs-body);color:var(--text-0);background:var(--bg-3);border:1px solid var(--line-strong);border-left:3px solid var(--danger);border-radius:var(--r-md);box-shadow:var(--shadow-toast);opacity:0;pointer-events:none;transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);align-items:center;gap:10px;padding:10px 8px 10px 14px;display:flex;position:fixed;left:50%;transform:translate(-50%,-8px)}.notice.is-visible{opacity:1;pointer-events:auto;transform:translate(-50%)}.notice--success{border-left-color:var(--success)}.notice--bottom-right{top:auto;left:auto;right:16px;bottom:calc(var(--toolbar-h) + var(--seekbar-h) + 16px);transform:translateY(8px)}.notice--bottom-right.is-visible{transform:translateY(0)}.notice__close{border-radius:var(--r-sm);flex:none;width:24px;height:24px}.main{flex:1;grid-template-columns:264px 1fr;min-height:0;display:grid}.main.is-collapsed{grid-template-columns:0 1fr}.main.is-collapsed .library{border-right:none;min-width:0;padding:0;overflow:hidden}.content{flex-direction:column;min-width:0;min-height:0;display:flex}.content .stage{flex:1;min-height:0}.library{background:var(--bg-1);border-right:1px solid var(--line);flex-direction:column;gap:12px;min-height:0;padding:16px;display:flex}.library.is-drop{outline:2px dashed var(--accent);outline-offset:-6px;background:var(--accent-soft)}.library__head{align-items:center;display:flex}.library__title{font-size:var(--fs-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);margin:0;font-weight:600}.library__import{color:var(--accent);margin-left:auto}.library__import:hover{color:var(--accent-hover)}.library__foot{justify-content:flex-start;display:flex}.library__collapse{width:28px;height:28px;color:var(--text-2)}.library__close{width:28px;height:28px;color:var(--text-2);display:none}.library__close:hover,.library__collapse:hover{color:var(--text-0)}.library__list{flex-direction:column;flex:1;gap:2px;margin:0 -8px;padding:0 8px;list-style:none;display:flex;overflow-y:auto}.library__empty{text-align:center;color:var(--text-2);flex-direction:column;align-items:center;gap:12px;padding:48px 16px;display:flex}.library__empty-art{color:var(--bg-3)}.library__empty-title{font-family:var(--font-display);font-size:var(--fs-panel);color:var(--text-1);margin:0}.library__empty-hint{font-size:var(--fs-meta);margin:0;line-height:1.7}.library__empty .btn-outline{margin-top:4px}.library__item{border-radius:var(--r-md);cursor:pointer;touch-action:manipulation;transition:background-color var(--dur-fast) var(--ease-out);align-items:center;gap:4px;padding:8px 10px;display:flex;position:relative}@media (hover:hover) and (pointer:fine){.library__item:hover{background:var(--bg-2)}}.library__item.is-selected{background:var(--bg-2)}.library__item.is-selected:before{content:"";background:var(--accent);border-radius:1px;width:2px;height:20px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.library__item-body{flex:1;min-width:0}.library__item-name{font-size:var(--fs-body-strong);color:var(--text-0);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.library__item-meta{font-size:var(--fs-meta);color:var(--text-2);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.library__item-del{border-radius:var(--r-sm);width:26px;height:26px;color:var(--text-2);opacity:0;transition:opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);flex:none}@media (hover:hover) and (pointer:fine){.library__item:hover .library__item-del{opacity:1}}.library__item.is-selected .library__item-del{opacity:1}.library__item-del:hover{color:var(--danger);background:#e0695e1f}@media (hover:none){.library__item-del{opacity:1}}.stage{background:var(--bg-0);min-width:0;min-height:0;display:grid}.stage--split{grid-template-columns:1fr 1fr;gap:16px;padding:16px}.stage--waterfall,.stage--score{grid-template-columns:1fr}.stage--waterfall .score,.stage--score .waterfall{display:none}@media (width<=900px){.stage--split{grid-template-rows:1fr 1fr;grid-template-columns:1fr}.main.is-drawer{--drawer-w:min(300px, 82vw);--drawer-pad:16px;grid-template-columns:minmax(0,1fr)}.main.is-drawer .library{top:var(--shell-h);z-index:40;width:var(--drawer-w);border-right:1px solid var(--line-strong);box-shadow:var(--shadow-toast);transition:transform var(--dur-med) var(--ease-out);visibility:hidden;position:fixed;bottom:0;left:0;transform:translate(-100%)}.main.is-drawer.is-drawer-open .library{visibility:visible;transform:translate(0)}.main.is-drawer-open .library__close{display:inline-flex}.main.is-drawer-open .library__head{gap:6px}.main__backdrop{inset:var(--shell-h) 0 0 0;z-index:35;background:#00000080;position:fixed}.transport__time,.transport__tools{display:none}.transport__play,.transport__stop{width:44px;height:44px}}@media (width<=560px){.main.is-drawer{--drawer-w:min(280px, 88vw);--drawer-pad:12px}.stage--split{gap:8px;padding:8px}}.waterfall{background:var(--bg-0);border-radius:var(--r-lg) var(--r-lg) 0 0;min-width:0;min-height:0;position:relative;overflow:hidden}.stage--waterfall .waterfall{border-radius:0}.waterfall__canvas{cursor:pointer;touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.waterfall .piano{box-shadow:none;pointer-events:none;border-top-left-radius:0;border-top-right-radius:0;outline:none;position:absolute;bottom:0;left:0;right:0}.score{background:var(--bg-0);border-radius:var(--r-lg);flex-direction:column;min-width:0;min-height:0;display:flex;overflow:hidden}.stage--score .score{border-radius:0}.score__scroll{flex:1;min-height:0;padding:8px 16px 40vh;overflow-y:auto}.score__system{background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow-paper);margin:0 auto 16px;padding:20px 24px}.score__system svg{max-width:100%;display:block}.score__empty{color:var(--text-2);font-size:var(--fs-body);-webkit-user-select:none;user-select:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:8px;display:flex}.score__empty-art{font-family:var(--font-display);font-size:var(--fs-readout-lg);color:var(--bg-3);line-height:1}.debug-menu{align-self:stretch;align-items:center;margin-left:auto;display:flex;position:relative}.debug-menu__trigger{height:100%;font-size:var(--fs-body-strong);color:var(--text-2);background:0 0;border:none;border-radius:0;padding:0 14px;position:relative}.debug-menu__trigger:hover{color:var(--text-0);background:0 0;border-color:#0000}.debug-menu__trigger.is-active{color:var(--text-0)}.debug-menu__trigger.is-active:after{content:"";background:var(--accent);border-radius:1px;width:24px;height:2px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.debug-menu__dropdown{background:var(--bg-3);border:1px solid var(--line-strong);border-radius:var(--r-md);min-width:168px;box-shadow:var(--shadow-toast);z-index:30;flex-direction:column;gap:2px;padding:6px;display:none;position:absolute;top:100%;right:0}@media (hover:hover) and (pointer:fine){.debug-menu:hover .debug-menu__dropdown{display:flex}}.debug-menu.is-open .debug-menu__dropdown{display:flex}.debug-menu__item{text-align:left;border-radius:var(--r-sm);height:32px;color:var(--text-1);background:0 0;border:none;padding:0 10px}.debug-menu__item:hover{background:var(--bg-2);color:var(--text-0);border-color:#0000}.midi-debug{flex-direction:column;flex:1;min-height:0;display:flex;overflow-y:auto}.midi-debug__inner{text-align:center;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:1024px;margin:auto;padding:32px 24px;display:flex}.midi-debug__status{font-size:var(--fs-body-strong);color:var(--text-1)}.midi-debug__status-row{align-items:center;gap:6px;display:flex}.midi-debug__diag-toggle{width:22px;height:22px;color:var(--text-2)}.midi-debug__diag-toggle:hover{color:var(--text-0);background:0 0}.midi-debug__diag[hidden]{display:none}.midi-debug__devices{flex-wrap:wrap;justify-content:center;gap:8px;max-width:720px;margin:0;padding:0;list-style:none;display:flex}.midi-debug__device{font-size:var(--fs-meta);color:var(--text-1);border-radius:var(--r-md);background:var(--bg-2);border:1px solid var(--line);text-overflow:ellipsis;white-space:nowrap;max-width:360px;padding:6px 12px;overflow:hidden}.midi-debug__device--empty{color:var(--text-2);background:0 0;border-color:#0000}.midi-debug__diag{border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-2);text-align:left;width:100%;max-width:640px;font-size:var(--fs-meta);grid-template-columns:max-content 1fr;gap:4px 16px;margin:0;padding:12px 16px;line-height:1.6;display:grid}.midi-debug__diag dt{color:var(--text-2);white-space:nowrap}.midi-debug__diag dd{color:var(--text-1);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;margin:0}.midi-debug__diag dd[data-tone=ok]{color:var(--success)}.midi-debug__diag dd[data-tone=warn]{color:var(--accent)}.midi-debug__diag dd[data-tone=bad]{color:var(--danger)}.midi-debug__hint{max-width:640px;font-size:var(--fs-meta);color:var(--text-1);line-height:1.6}.midi-debug__hint[hidden]{display:none}.midi-debug__retry{font:inherit;font-size:var(--fs-body);color:var(--text-0);border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--bg-2);cursor:pointer;padding:7px 18px}.midi-debug__retry:hover{background:var(--bg-3)}.midi-debug__retry[hidden]{display:none}.midi-debug__stage{flex-direction:column;align-items:center;gap:20px;width:100%;display:flex}.midi-debug__keys{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;min-height:5.5rem;display:flex}.midi-debug__note{font-family:var(--font-display);font-size:var(--fs-readout-xl);color:var(--text-2);font-variant-numeric:tabular-nums;line-height:1}.midi-debug__key{font-family:var(--font-display);font-size:var(--fs-readout-xl);color:var(--text-0);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);font-variant-numeric:tabular-nums;transition:background-color var(--dur-fast) var(--ease-out);padding:12px 18px;line-height:1;position:relative}.midi-debug__key-name{display:inline-block}.midi-debug__velocity{text-align:right;font-family:var(--font-display);font-size:var(--fs-readout-md);color:var(--accent);font-variant-numeric:tabular-nums;line-height:1;position:absolute;top:5px;left:0;right:7px}.midi-debug__pedal-section{flex-direction:column;align-items:center;gap:8px;display:flex}.midi-debug__pedals{gap:16px;display:flex}.midi-debug__pedal{flex-direction:column;align-items:center;gap:5px;display:flex}.midi-debug__pedal-box{box-sizing:border-box;border:1px solid var(--line-strong);border-radius:var(--r-md);width:84px;height:58px;transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);background:0 0;justify-content:center;align-items:center;display:flex;position:relative}.midi-debug__pedal-box.is-idle{opacity:.65}.midi-debug__pedal-box.is-level{outline:1px solid var(--accent-soft);outline-offset:2px}.midi-debug__pedal-percent{font-family:var(--font-display);font-size:var(--fs-readout-md);font-variant-numeric:tabular-nums;line-height:1}.midi-debug__pedal-raw{font-size:var(--fs-title);opacity:.8;font-variant-numeric:tabular-nums;line-height:1;position:absolute;top:5px;right:8px}.midi-debug__pedal-name{font-size:var(--fs-meta);color:var(--text-1)}.piano{box-sizing:border-box;--key-w:calc(100cqw / 52);--bkey-w:calc(var(--key-w) * 1.3 / 2.3);aspect-ratio:1/.122;outline:1px solid var(--line-strong);width:100%;box-shadow:var(--shadow-card);background:#1a1816;border-radius:.961539%/7.88146%;position:relative;overflow:hidden;container-type:inline-size}.piano__whites{position:absolute;inset:0}.piano__wkey{width:var(--key-w);box-sizing:border-box;height:100%;transition:background var(--dur-fast) var(--ease-out);background:linear-gradient(#f4f1eb,#e3dfd7);border-right:1px solid #00000040;position:absolute;top:0}.piano__wkey:last-child{border-right:none}.piano__wkey.is-pressed,.piano__bkey.is-pressed{animation:.9s ease-in-out infinite alternate piano-press-glow}@keyframes piano-press-glow{0%{box-shadow:0 0 10px rgba(217, 164, 91, calc(var(--press-alpha,1) * .12))}to{box-shadow:0 0 10px rgba(217, 164, 91, calc(var(--press-alpha,1) * .6))}}.piano__blacks{position:absolute;inset:0}.piano__bkey{width:var(--bkey-w);border-radius:0 0 calc(var(--bkey-w) * .25) calc(var(--bkey-w) * .25);height:66.6667%;transition:background var(--dur-fast) var(--ease-out);background:linear-gradient(#2a2825,#141312);position:absolute;top:0;box-shadow:0 1px 2px #0009}.midi-debug__score{background:var(--paper);border-radius:var(--r-lg);width:min(560px,100%);box-shadow:var(--shadow-paper);padding:10px 14px}.midi-debug__score-svg{width:100%;height:auto;display:block}.midi-debug__staff-lines line,.midi-debug__startbar{stroke:var(--paper-text);stroke-width:2px}.midi-debug__clef{fill:var(--paper-text);font-family:Bravura,Noto Music,Segoe UI Symbol,Apple Symbols,sans-serif}.midi-debug__snote line{stroke:var(--paper-text);stroke-width:2px}.midi-debug__shead{fill:var(--paper-text)}.midi-debug__ottava{fill:var(--paper-text);font-family:EB Garamond,Georgia,serif;font-style:italic}.midi-debug__ottava-bar{stroke:var(--paper-text);stroke-width:1px;stroke-linecap:round}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.dialog{color:var(--text-0);background:0 0;border:none;padding:0;overflow:visible}.dialog::backdrop{background:#0000008c}.dialog__panel{background:var(--bg-2);border:1px solid var(--line-strong);border-radius:var(--r-lg);min-width:280px;max-width:min(420px,100vw - 32px);max-height:calc(100dvh - 32px);box-shadow:var(--shadow-paper);flex-direction:column;gap:12px;padding:18px;display:flex;overflow:auto}.dialog__title{font-size:var(--fs-title);margin:0;font-weight:600}.dialog__message{color:var(--text-1);margin:0;line-height:1.6}.dialog__label{font-size:var(--fs-body);color:var(--text-1)}.dialog__input{width:100%;height:34px;font:inherit;color:var(--text-0);background:var(--bg-0);border:1px solid var(--line-strong);border-radius:var(--r-md);padding:0 10px}.dialog__input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.dialog__error{font-size:var(--fs-meta);color:var(--danger);margin:0;display:none}.dialog__error.is-visible{display:block}.dialog__actions{justify-content:flex-end;gap:8px;display:flex}.dialog__btn{height:32px;font:inherit;color:var(--text-1);background:var(--bg-2);border:1px solid var(--line-strong);border-radius:var(--r-md);cursor:pointer;transition:color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);padding:0 14px}.dialog__btn--primary{color:var(--paper-text);background:var(--accent);border-color:var(--accent)}.dialog__btn--danger{color:var(--paper);background:var(--danger);border-color:var(--danger)}@media (hover:hover) and (pointer:fine){.dialog__btn:not(.dialog__btn--primary):not(.dialog__btn--danger):hover{color:var(--text-0);border-color:var(--accent)}.dialog__btn--primary:hover{color:var(--paper-text);background:var(--accent-hover);border-color:var(--accent-hover)}.dialog__btn--danger:hover{color:var(--paper);border-color:var(--danger);filter:brightness(1.08)}}.dialog__btn--primary:active{background:var(--accent-pressed);border-color:var(--accent-pressed)}.dialog__btn--danger:active{color:var(--paper);background:var(--danger);border-color:var(--danger);filter:brightness(.92)}.recorder{background:var(--bg-0);flex-direction:column;flex:1;min-height:0;display:flex}.recorder__head{border-bottom:1px solid var(--line);flex:none;justify-content:center;align-items:center;height:46px;display:flex;position:relative}.recorder__timer{font-family:var(--font-display);font-size:var(--fs-readout-sm);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--text-0)}.notice--recorder{top:calc(var(--shell-h) + 46px + 10px)}.recorder__status{text-overflow:ellipsis;white-space:nowrap;max-width:46%;font-size:var(--fs-meta);color:var(--text-2);position:absolute;top:50%;right:16px;overflow:hidden;transform:translateY(-50%)}.recorder__status.is-connected{color:var(--accent)}.recorder__stage{flex:1;min-height:0;position:relative;overflow:hidden}.recorder__canvas{cursor:grab;touch-action:none;width:100%;height:100%;display:block}.recorder__canvas.is-dragging{cursor:grabbing}.recorder__hint{max-width:min(520px,84%);font-size:var(--fs-panel);color:var(--text-1);text-align:center;border-radius:var(--r-lg);pointer-events:none;background:radial-gradient(120% 150%,#161514f0 0%,#161514e0 45%,#16151400 100%);padding:14px 30px;line-height:1.4;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.recorder__tip{max-width:min(420px,82%);font-size:var(--fs-body);color:var(--text-0);background:var(--bg-3);border:1px solid var(--line-strong);border-radius:var(--r-md);box-shadow:var(--shadow-toast);opacity:0;pointer-events:none;transition:opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);padding:7px 12px;position:absolute;bottom:14px;left:50%;transform:translate(-50%,6px)}.recorder__tip.is-visible{opacity:1;transform:translate(-50%)}.recorder__controls{background:var(--bg-1);border-top:1px solid var(--line);flex:none;justify-content:center;align-items:center;gap:14px;padding:12px 16px 14px;display:flex}.recorder__btn-wrap{display:inline-flex;position:relative}.recorder__btn-wrap.is-blocked:after{content:"";border-radius:50%;position:absolute;inset:0}.recorder__btn{width:46px;height:46px;color:var(--text-1);background:var(--bg-2);border:1px solid var(--line-strong);cursor:pointer;transition:color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);border-radius:50%;justify-content:center;align-items:center;padding:0;display:inline-flex}@media (hover:hover) and (pointer:fine){.recorder__btn:not(:disabled):hover{color:var(--text-0);border-color:var(--accent)}}.recorder__btn:not(:disabled):active{transform:scale(.95)}.recorder__btn:disabled{opacity:.35;cursor:default}.recorder__btn.is-active{color:var(--paper-text);background:var(--accent);border-color:var(--accent)}.recorder__btn--record{color:var(--danger)}.recorder__btn--record.is-recording{color:var(--paper);background:var(--danger);border-color:var(--danger);animation:1.4s ease-in-out infinite recorder-recording-pulse}@keyframes recorder-recording-pulse{0%,to{box-shadow:0 0 #e0695e73}50%{box-shadow:0 0 0 7px #e0695e00}}@media (prefers-reduced-motion:reduce){.recorder__btn--record.is-recording{animation:none}}