:root{--bg: #14141a;--panel: #1e1e27;--border: #2e2e3c;--text: #e9e9f2;--muted: #9b9bb0;--accent: #7c9cff;--error: #ff8080;--warning: #ffcf70;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}.app{height:100dvh;max-width:1180px;margin:0 auto;padding:14px 18px 12px;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}.app__main{overflow-y:auto;min-height:0;padding-bottom:4px}.app__main--practice{overflow:hidden;display:block}.app__header{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}.app__tabs{margin-left:auto;display:flex;gap:6px}.app__header h1{font-size:20px;margin:0;letter-spacing:-.01em}.app__milestone{color:var(--muted);font-size:13px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:12px}.panel--input{display:flex;flex-wrap:wrap;gap:20px;align-items:center}.control{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}.control--url input{min-width:300px}input[type=url],input[type=file]{background:#15151d;border:1px solid var(--border);color:var(--text);border-radius:7px;padding:7px 9px;font:inherit;font-size:13px}button{background:var(--accent);color:#0f0f16;border:0;border-radius:7px;padding:7px 14px;font:inherit;font-weight:600;cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}.hint{flex-basis:100%;margin:0;color:var(--muted);font-size:12px}.panel--status{display:flex;align-items:center;gap:10px}.panel--status strong{text-transform:uppercase;font-size:12px;letter-spacing:.06em;color:var(--accent)}.panel--status span:last-child{color:var(--muted);font-size:13px}.spinner{width:13px;height:13px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--accent);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.panel--error{border-color:var(--error);color:var(--error)}.panel--warning{border-color:var(--warning);color:var(--warning);font-size:13px}.panel--meta{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.meta__title h2{margin:0 0 3px;font-size:17px}.meta__title p{margin:0;color:var(--muted);font-size:13px}.meta__timing{margin-top:2px!important;font-size:12px!important;opacity:.8}.meta__downloads{display:flex;gap:14px}.meta__downloads a{color:var(--accent);font-size:13px;text-decoration:none}.meta__downloads a:hover{text-decoration:underline}.panel--transport{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.transport__seek{flex:1;min-width:200px;accent-color:var(--accent)}.transport__time,.transport__bar{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px;min-width:70px}.progress{height:3px;background:var(--border);border-radius:2px;overflow:hidden;margin:-6px 0 12px}.progress__fill{height:100%;background:var(--accent);transition:width 80ms linear}.panel--sheet{padding:8px}.sheet{background:transparent}.sheet--empty{background:#fdfdfd;border-radius:7px;color:#666;display:grid;place-items:center;min-height:120px;font-size:13px}.sheet-scroll{background:#fdfdfd;border-radius:7px;padding:8px;overflow:auto;max-height:46vh;position:relative}.sheet-stage{position:relative;min-height:160px}.sheet-stage--selectable{cursor:pointer}.sheet__mark{position:absolute;pointer-events:none;border-radius:3px}.sheet__mark--selected{background:#7c9cff29;outline:1px solid rgba(60,100,230,.55)}.sheet__mark--current{border-left:3px solid #d98324;background:#d983241a}.sheet__hint{margin:6px 2px 0;font-size:11.5px;color:#6a6a78}.panel--piano{padding:12px 14px 10px;position:sticky;bottom:0;z-index:2;margin-bottom:0}.piano{width:100%;height:auto;display:block}.legend{display:flex;align-items:center;gap:6px;margin-top:8px;color:var(--muted);font-size:12px;flex-wrap:wrap}.legend__swatch{width:11px;height:11px;border-radius:3px;display:inline-block;margin-left:10px}.legend__swatch--left{background:#7cc4ff}.legend__swatch--right{background:#ffc46b}.legend__note{margin-left:10px;opacity:.8}.app__footer{margin-top:16px;color:var(--muted);font-size:12px}.practice{height:100%;display:grid;grid-template-rows:minmax(0,auto) auto minmax(120px,1fr) auto;overflow:hidden}.practice__top{overflow-y:auto;min-height:0;max-height:46vh}.practice__sheet{min-height:0;overflow:hidden;padding:8px;display:flex}.practice__sheet .sheet-scroll{flex:1;max-height:none}.practice__keyboard{margin-bottom:0}.practice__title{margin:0 0 8px;font-size:16px}.practice__row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px}.practice__row--transport{border-top:1px solid var(--border);padding-top:10px}.practice__status{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);font-weight:700}.practice__voice{margin-left:auto;font-size:12px;color:var(--muted)}.practice__warn{margin:8px 0 0;color:var(--warning);font-size:12.5px}.practice__counts{margin:8px 0 0;color:var(--muted);font-size:12.5px}.practice__expected{margin:0 0 8px;font-size:14px;letter-spacing:.02em}.practice__expected span{color:var(--muted);font-size:12px;text-transform:uppercase;margin-right:8px}.practice__expected em{color:var(--accent);font-style:normal}.segmented{display:flex;align-items:center;gap:4px}.segmented__label{color:var(--muted);font-size:12px;margin-right:4px}.segmented button{padding:5px 11px;font-size:13px;background:#2a2a36;color:var(--text)}.button--active{background:var(--accent)!important;color:#0f0f16!important}.button--quiet{background:#2a2a36;color:var(--text)}.control--check{gap:6px;color:var(--text);font-size:13px}.control input[type=number]{width:64px;background:#15151d;border:1px solid var(--border);color:var(--text);border-radius:6px;padding:5px 7px;font:inherit;font-size:13px}.midi{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}.midi__label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}.midi__state{color:var(--muted)}.midi__state--good{color:#7fd9a2}.midi__state--bad{color:var(--warning)}.midi__correction{color:var(--muted);font-size:12px}.midi select{background:#15151d;border:1px solid var(--border);color:var(--text);border-radius:6px;padding:5px 7px;font:inherit;font-size:13px}.calibration{margin-top:10px;padding:10px 12px;border:1px dashed var(--border);border-radius:8px}.calibration p{margin:0 0 8px;font-size:12.5px;color:var(--muted)}.calibration label{display:flex;align-items:center;gap:10px;font-size:13px}.calibration input[type=range]{flex:1;max-width:340px;accent-color:var(--accent)}.calibration__value{font-variant-numeric:tabular-nums;min-width:66px}.simulator{margin-top:12px;border:1px dashed #5c4a86;border-radius:8px;padding:8px 10px}.simulator summary{cursor:pointer;font-size:12.5px;color:#b9a7ea}.simulator__warn{color:var(--warning);font-size:11px;margin-left:8px}.simulator__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}.simulator__row label{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}.simulator__value{font-variant-numeric:tabular-nums;min-width:60px}.simulator__keys{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap}.simulator__keys button{padding:5px 9px;font-size:12px;background:#2a2a36;color:var(--text)}.legend--practice{gap:12px}.legend__chip{font-size:11.5px;padding:2px 7px;border-radius:999px;border:1px solid var(--border)}.legend__chip--expected{background:#423714;border-color:#c79a12}.legend__chip--correct{background:#16402a;border-color:#1d7a44}.legend__chip--wrong{background:#451818;border-color:#a01f1f}.legend__chip--missed{background:#33322c;border-color:#8a8371}.legend__chip--accomp{background:#242a4d;border-color:#7b83c4}.legend__chip--played{background:#32323c;border-color:#9a9aa8}.summary h3{margin:0 0 10px;font-size:15px;display:flex;align-items:baseline;gap:10px}.summary__scope{color:var(--muted);font-size:12px;font-weight:400}.summary__grid{display:flex;flex-wrap:wrap;gap:18px 26px;margin:0 0 10px}.summary__grid>div{min-width:96px}.summary__grid dt{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}.summary__grid dd{margin:2px 0 0;font-size:17px;font-variant-numeric:tabular-nums}.summary__grid dd small{display:block;font-size:11.5px;color:var(--muted);font-variant-numeric:normal}.summary__grid--timing{border-top:1px solid var(--border);padding-top:10px}.summary__note{margin:6px 0 0;font-size:12.5px;color:var(--muted)}.summary__note--quiet{opacity:.75;font-size:11.5px}.segmented__note{color:var(--muted);font-size:11.5px;margin-left:6px}.hint--pulse{margin:8px 0 0;max-width:72ch}html,body,#root{height:auto;min-height:100%}body{overflow-x:hidden;overflow-y:auto}.pt{max-width:1180px;margin:0 auto;padding:18px 16px 28px}.pt a{color:var(--accent)}.pt-loading{display:flex;align-items:center;gap:10px;color:var(--muted);margin-top:30vh;justify-content:center}.pt-header{margin-bottom:10px}.pt-header h1{margin:0 0 4px;font-size:clamp(22px,4.2vw,30px);line-height:1.2;letter-spacing:-.01em;overflow-wrap:anywhere}.pt-subtitle{margin:0;color:var(--text);opacity:.85;font-size:14px}.pt-credit{margin:4px 0 0;color:var(--muted);font-size:13px}.pt-intro{margin:0 0 12px;max-width:110ch;color:var(--muted);font-size:14px}.pt-intro strong{color:var(--text)}.pt-compare{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;border-color:#5c4a86;font-size:13.5px}.pt-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}.pt-facts{margin-left:auto;color:var(--muted);font-size:12.5px}.pt-player{display:grid;gap:12px}.pt-source{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}.pt-source__note{color:var(--muted);font-size:12.5px;margin-left:4px}.pt-stage{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}.pt-stage--video{grid-template-columns:356px minmax(0,1fr);align-items:start}.pt-video{width:100%;min-width:0;aspect-ratio:16 / 9;background:#000;border-radius:8px;overflow:hidden}.pt-video__frame,.pt-video__frame>div,.pt-video__frame iframe{width:100%;height:100%;border:0;display:block}.pt-video--hidden{position:absolute;width:1px;min-width:0;height:1px;opacity:0;pointer-events:none;overflow:hidden}.pt-deck{display:grid;gap:12px;min-width:0}.pt-status{margin:0;font-size:13px;color:var(--muted)}.pt-status--warn{color:var(--warning)}.pt-transport{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.pt-play{min-width:108px;padding:9px 16px;font-size:15px}.pt-seek{flex:1 1 220px;min-width:0;accent-color:var(--accent)}.pt-time,.pt-bar,.pt-page{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px}.pt-bar,.pt-page{white-space:nowrap}.pt-section{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);min-width:0}.pt-section select{min-width:0;max-width:100%;background:#15151d;border:1px solid var(--border);color:var(--text);border-radius:6px;padding:5px 7px;font:inherit;font-size:13px}.pt-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}.pt-controls .segmented{flex-wrap:wrap}.pt-volume{display:flex;align-items:center;gap:4px}.pt-volume input{width:120px;accent-color:var(--accent)}.pt-loop{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--muted)}.pt-loop input[type=number]{width:58px;background:#15151d;border:1px solid var(--border);color:var(--text);border-radius:6px;padding:5px 7px;font:inherit;font-size:13px}.pt-sheet{padding:8px}.pt-sheet .sheet-scroll{max-height:var(--pt-sheet-max, min(52vh, 560px))}.pt-keys{position:sticky;bottom:0;z-index:3;padding:10px 12px 8px;box-shadow:0 -10px 24px #00000073}.pt-keys .piano{max-height:110px}.pt-keys .legend{margin-top:6px}.pt-practice{height:min(calc(100dvh - 24px),1000px);min-height:620px;margin-bottom:12px}.pt-practice .practice{height:100%}.practice__nokeyboard{margin:8px 0 0;max-width:78ch}.pt-feedback{margin-top:18px}.pt-feedback h2{margin:0 0 2px;font-size:18px}.pt-feedback__lead{margin:0 0 12px;color:var(--muted);font-size:13px}.pt-feedback__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:10px 18px}.pt-question{border:0;margin:0;padding:0;min-width:0}.pt-question legend{font-size:13.5px;margin-bottom:6px;padding:0}.pt-question__options{display:flex;flex-wrap:wrap;gap:6px}.pt-chip{display:inline-flex;align-items:center;padding:5px 11px;border:1px solid var(--border);border-radius:999px;background:#2a2a36;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.pt-chip input{position:absolute;opacity:0;pointer-events:none}.pt-chip--on{background:var(--accent);border-color:var(--accent);color:#0f0f16;font-weight:600}.pt-chip:focus-within{outline:2px solid var(--accent);outline-offset:2px}.pt-comment{display:grid;gap:6px;margin-top:14px;font-size:13.5px}.pt-comment textarea{width:100%;background:#15151d;border:1px solid var(--border);color:var(--text);border-radius:8px;padding:8px 10px;font:inherit;font-size:14px;resize:vertical}.pt-feedback__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.pt-feedback__notice{margin:10px 0 0;font-size:13px;color:#7fd9a2}.pt-feedback__where{margin:14px 0 0;padding:8px 11px;border:1px dashed var(--border);border-radius:8px;background:#15151d;color:var(--muted);font-size:13px;line-height:1.5}.pt-feedback__where strong{color:var(--text);font-variant-numeric:tabular-nums}.button--link{background:none;border:0;padding:0;color:var(--accent);font:inherit;text-decoration:underline;cursor:pointer}.button--link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.pt-feedback__more{margin-top:16px}.pt-feedback__more summary{cursor:pointer;font-size:13.5px;color:var(--muted);padding:4px 0}.pt-feedback__more summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.pt-feedback__more[open] summary{margin-bottom:10px}.pt-feedback__build{margin:12px 0 0;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}.pt-footer{margin-top:18px;color:var(--muted);font-size:12px}.pt-footer p{margin:4px 0}@media (max-width: 860px){.pt-stage--video{grid-template-columns:minmax(0,1fr)}.pt-video{max-width:480px}}@media (max-width: 700px){.pt{padding:14px 16px 24px}.pt-facts{margin-left:0;flex-basis:100%}.pt-source__note{flex-basis:100%;margin-left:0}.pt-seek{flex-basis:100%;order:5}.pt-practice{height:100dvh;min-height:560px}.practice__top{max-height:52vh}.segmented button{padding:6px 10px}.pt-keys .legend__note{display:none}}