:root{color-scheme:dark;--ink: #080908;--panel: rgba(15, 17, 14, .68);--panel-strong: rgba(18, 20, 16, .84);--line: rgba(232, 225, 201, .18);--text: #f4eedc;--muted: #b8ad91;--bamboo: #d2aa62;--bamboo-hot: #ffd47a;--leaf: #6fb59b;--red: #cc594b;--blue: #7bb4c5;--score-paper: rgba(16, 17, 13, .82);--score-ink: #f4eedc;--score-line: rgba(244, 238, 220, .24);--select-bg: #15170f;--select-bg-hover: #24332a;--select-text: #f4eedc;--shadow: rgba(0, 0, 0, .42);--title-color: #fff3d0;--title-shadow: 0 3px 0 rgba(0, 0, 0, .28), 0 13px 30px rgba(0, 0, 0, .58);--title-stroke: rgba(0, 0, 0, .18);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}[data-theme=light]{color-scheme:light;--ink: #ece6d7;--panel: rgba(255, 250, 236, .76);--panel-strong: rgba(255, 250, 236, .9);--line: rgba(54, 43, 27, .2);--text: #1d1a12;--muted: #695d43;--bamboo: #9d6728;--bamboo-hot: #b9762a;--leaf: #276e55;--red: #a84136;--blue: #2f6878;--score-paper: rgba(255, 252, 241, .9);--score-ink: #1d1a12;--score-line: rgba(54, 43, 27, .28);--select-bg: #fff9ea;--select-bg-hover: #e9f0dc;--select-text: #1d1a12;--shadow: rgba(69, 52, 25, .18);--title-color: #211a10;--title-shadow: 0 1px 0 rgba(255, 250, 232, .8), 0 12px 28px rgba(112, 88, 43, .24);--title-stroke: rgba(255, 250, 232, .42)}*{box-sizing:border-box}[hidden]{display:none!important}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--ink);color:var(--text)}button,input,select{font:inherit;-webkit-tap-highlight-color:transparent}button{min-height:38px;border:1px solid var(--line);border-radius:6px;background:#f4eedc14;color:var(--text);padding:0 13px;cursor:pointer;box-shadow:0 10px 28px var(--shadow);touch-action:manipulation}button:hover,button:focus-visible{border-color:#ffd47a8c;background:#ffd47a24;outline:none}button:disabled{opacity:.42;cursor:not-allowed}button.primary{border-color:#ffd47aa6;background:#c8913f;color:#11100c;font-weight:700}button.active{background:#6fb59b38;border-color:#6fb59bb3}#stage{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}#stage.dragging-view{cursor:grabbing}.status-bar,.control-strip,.theme-cycle,.sound-toggle,.inspector,.note-readout,.score-panel,.about-toggle,.about-panel,.reference-toggle,.reference-panel,.key-rail{position:fixed;z-index:4}.control-strip,.theme-cycle,.sound-toggle,.inspector,.note-readout,.about-toggle,.about-panel,.reference-toggle,.reference-panel,.key-rail{user-select:none;-webkit-user-select:none}.status-bar{top:18px;left:20px;right:20px;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}.status-bar>div:first-child{min-width:0;max-width:min(620px,100%)}.status-bar h1{margin:0;color:var(--title-color);line-height:1.08;max-width:100%;overflow:hidden;padding-bottom:.06em;font-size:clamp(30px,min(4.6vw,7vh),58px);font-weight:820;letter-spacing:0;text-overflow:ellipsis;text-shadow:var(--title-shadow);white-space:nowrap;-webkit-text-stroke:.35px var(--title-stroke)}.eyebrow{margin:0 0 6px;color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}.mini-spinner{width:16px;height:16px;flex:0 0 auto;border:2px solid rgba(105,93,67,.22);border-top-color:var(--bamboo-hot);border-radius:50%;animation:spin .82s linear infinite}.audio-status-chip:not(.is-loading) .mini-spinner{display:none}.control-strip{left:20px;bottom:calc(22px + var(--safe-bottom));display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.mobile-label{display:none}.audio-status-chip{min-height:38px;min-width:132px;max-width:148px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(111,181,155,.52);border-radius:6px;background:#6fb59b26;color:var(--text);font-weight:720;box-shadow:0 10px 28px var(--shadow);overflow:hidden;white-space:nowrap}.audio-status-chip span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}.audio-status-chip.ready{border-color:#276e556b;background:#276e551f}.audio-status-chip.ready:not(.is-loading){display:none}.audio-status-chip.failed{border-color:#a841368a;background:#a841361a}.theme-cycle{top:calc(18px + var(--safe-top));right:20px;z-index:5;min-width:66px;min-height:32px;padding:0 10px;box-shadow:0 10px 26px var(--shadow);background:var(--panel-strong);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.sound-toggle{display:none;z-index:5;width:34px;min-width:34px;min-height:34px;padding:0;border-radius:50%;background:var(--panel-strong);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.sound-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.9}.inspector{top:calc(18px + var(--safe-top));right:96px;width:min(292px,calc(100vw - 40px));max-height:calc(100dvh - 36px - var(--safe-top));padding:14px;display:grid;gap:14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);overflow-y:auto;overscroll-behavior:contain}.inspector label{display:grid;grid-template-columns:60px 1fr;gap:12px;align-items:center;color:var(--muted);font-size:13px}input[type=range]{width:100%;min-width:0;accent-color:var(--bamboo-hot)}select{width:100%;min-width:0;height:36px;border:1px solid var(--line);border-radius:6px;background:var(--select-bg);color:var(--select-text);color-scheme:dark;padding:0 10px;outline:none}[data-theme=light] select{color-scheme:light}select:hover,select:focus-visible{border-color:#6fb59b94;background:var(--select-bg-hover)}select option{background:var(--select-bg);color:var(--select-text)}select option:checked{background:var(--select-bg-hover);color:var(--select-text)}.select-row{grid-template-columns:60px 1fr}.note-readout{left:50%;bottom:318px;transform:translate(-50%);min-width:148px;padding:10px 14px;display:grid;place-items:center;gap:2px;border:1px solid var(--line);border-radius:8px;background:#0a0a0885;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);pointer-events:none}.note-readout{display:none!important}.score-panel{left:50%;bottom:102px;width:clamp(390px,calc(100vw - 920px),520px);border:1px solid var(--line);border-radius:8px;background:var(--score-paper);color:var(--score-ink);box-shadow:0 18px 46px var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transform:translate(-50%);overflow:hidden}.reference-toggle{right:20px;bottom:136px;min-width:0;min-height:34px;padding:0 12px;border-radius:17px;background:var(--panel-strong);color:var(--text);font-size:13px;font-weight:720;letter-spacing:0;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.reference-toggle[aria-expanded=true]{border-color:#ffd47a94;background:#ffd47a29}.about-toggle{right:83px;bottom:136px;min-width:0;min-height:34px;padding:0 12px;border-radius:17px;background:var(--panel-strong);color:var(--text);font-size:13px;font-weight:720;letter-spacing:0;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.about-toggle[aria-expanded=true]{border-color:#6fb59bad;background:#6fb59b2e}.reference-panel{left:50%;bottom:154px;width:clamp(390px,42vw,540px);border:1px solid var(--line);border-radius:8px;background:var(--score-paper);color:var(--score-ink);box-shadow:0 18px 46px var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transform:translate(-50%);overflow:hidden}.about-panel{right:20px;bottom:184px;width:min(390px,calc(100vw - 40px));max-height:min(560px,calc(100dvh - 232px - var(--safe-top) - var(--safe-bottom)));border:1px solid var(--line);border-radius:8px;background:var(--score-paper);color:var(--score-ink);box-shadow:0 18px 46px var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);overflow:auto}.about-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line)}.about-head h2{margin:0;font-size:18px;line-height:1.05}.about-head .eyebrow{margin-bottom:4px;font-size:10px}.about-head button{min-height:30px;padding:0 10px;box-shadow:none;font-size:12px}.about-body{padding:11px 12px 12px}.about-body p{margin:0 0 10px;color:var(--score-ink);font-size:13px;line-height:1.42}.about-body .about-lede{font-size:13.5px;line-height:1.45}.about-facts{display:grid;gap:9px;margin:0 0 10px}.about-facts div{display:grid;gap:2px}.about-facts dt{color:var(--score-ink);font-size:11px;font-weight:800;letter-spacing:0}.about-facts dd{margin:0;color:var(--score-ink);font-size:12.5px;line-height:1.38}.about-body .about-note{color:var(--muted)}.about-sources{display:flex;flex-wrap:wrap;gap:6px;padding-top:2px}.about-sources a{min-height:26px;padding:5px 7px;border:1px solid var(--line);border-radius:6px;background:#6fb59b1a;color:var(--score-ink);font-size:11.5px;font-weight:700;line-height:1.1;text-decoration:none}.about-sources a:hover,.about-sources a:focus-visible{border-color:#6fb59bad;outline:none}.reference-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(148px,190px);gap:12px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}.reference-head h2{margin:0;font-size:18px;line-height:1.05}.reference-head .eyebrow{margin-bottom:4px;font-size:10px}.reference-source,#referenceSource{margin:3px 0 0;color:var(--muted);font-size:11px;line-height:1.2}.reference-controls{padding:10px 12px 12px;display:grid;grid-template-columns:76px minmax(0,1fr) 74px;gap:10px;align-items:center}.reference-controls button{min-height:34px;box-shadow:none}.reference-controls input[type=range]{accent-color:var(--leaf)}#referenceTime{color:var(--muted);font-size:11px;text-align:right;white-space:nowrap}.score-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 7px;border-bottom:1px solid var(--line)}.score-head h2{margin:0;font-size:18px;line-height:1}.score-head h2:after{content:" keys";margin-left:7px;color:var(--muted);font-size:11px;font-weight:520;white-space:nowrap}.score-source{margin:3px 0 0;color:var(--muted);font-size:11px;line-height:1.15}.score-head .eyebrow{margin-bottom:4px;font-size:10px}.score-tabs{display:grid;grid-template-columns:repeat(2,minmax(76px,1fr));gap:6px}.score-tabs button{min-height:32px;box-shadow:none}.score-body{height:132px;padding:10px 12px 12px;overflow-x:auto;scrollbar-width:thin}.number-score{height:100%;display:grid;grid-template-columns:repeat(24,minmax(42px,1fr));gap:5px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}.score-note{min-width:42px;height:100%;border:1px solid var(--score-line);border-radius:6px;background:#f4eedc0f;color:var(--score-ink);box-shadow:none;padding:0;display:grid;grid-template-rows:13px 1fr 22px 15px;place-items:center}.score-note .dots{height:11px;color:var(--leaf);font-size:14px;line-height:1}.score-note .degree{font-size:23px;font-weight:780;line-height:1}.score-key{min-width:24px;height:20px;padding:1px 6px 0;display:grid;place-items:center;border:1px solid rgba(255,212,122,.42);border-radius:4px;background:#ffd47a29;color:var(--score-ink);font-size:12px;font-weight:800;line-height:1}.score-note .bar-note{color:var(--muted);font-size:10px}.score-note.current,.score-note:hover,.score-note:focus-visible{border-color:#ffd47ab8;background:#ffd47a38}.staff-score{display:none;width:100%;min-width:920px;height:100%;color:var(--score-ink);overflow:visible}.staff-note{cursor:pointer}.staff-note.current{color:var(--bamboo-hot)}.score-panel[data-mode=staff] .number-score{display:none}.score-panel[data-mode=staff] .staff-score{display:block}.note-readout span:first-child{font-size:24px;font-weight:760}.note-readout span:last-child{color:var(--muted);font-size:12px}@media (max-width: 1100px){.note-readout{display:none}}.key-rail{right:20px;bottom:calc(22px + var(--safe-bottom));display:grid;grid-template-columns:repeat(8,minmax(32px,42px));gap:6px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.key-rail button{width:100%;height:42px;min-height:42px;padding:0;display:grid;place-items:center;gap:1px;line-height:1}.key-rail button span:first-child{font-size:11px;color:var(--muted)}.key-rail button span:last-child{font-size:14px;font-weight:730}.key-rail button.hot{background:#ffd47a47;border-color:#ffd47abf}[data-preview=social] .control-strip,[data-preview=social] .theme-cycle,[data-preview=social] .sound-toggle,[data-preview=social] .inspector,[data-preview=social] .note-readout,[data-preview=social] .score-panel,[data-preview=social] .about-toggle,[data-preview=social] .about-panel,[data-preview=social] .reference-toggle,[data-preview=social] .reference-panel,[data-preview=social] .key-rail{display:none!important}[data-preview=social] .status-bar{top:34px;left:44px;right:auto}[data-preview=social] .status-bar h1{font-size:76px;line-height:1;text-shadow:0 2px 0 rgba(255,250,232,.72),0 18px 42px rgba(88,64,24,.28)}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 880px){.status-bar{top:calc(14px + var(--safe-top));left:14px;right:14px}.status-bar>div:first-child{max-width:calc(100vw - 150px)}.status-bar h1{font-size:clamp(30px,8.2vw,44px)}.inspector{top:calc(58px + var(--safe-top));left:14px;right:14px;bottom:auto;width:auto;max-height:calc(100dvh - 74px - var(--safe-top) - var(--safe-bottom));grid-template-columns:repeat(3,minmax(0,1fr));padding:10px;gap:10px;opacity:0;pointer-events:none;transform:translateY(-8px) scale(.98);transform-origin:top right;transition:opacity .16s ease,transform .16s ease,visibility .16s ease;visibility:hidden}.theme-cycle{top:calc(14px + var(--safe-top));right:14px}.sound-toggle{display:grid;place-items:center;top:calc(14px + var(--safe-top));right:86px}.sound-toggle[aria-expanded=true]{border-color:#ffd47a94;background:#ffd47a29}.inspector.is-open{opacity:1;pointer-events:auto;transform:none;visibility:visible}.inspector label{grid-template-columns:1fr;gap:5px;font-size:12px;min-width:0}.inspector input[type=range]{min-height:30px}.inspector select{height:42px;font-size:16px}.select-row{grid-column:1 / -1;grid-template-columns:48px 1fr}.control-strip{left:14px;right:14px;bottom:calc(14px + var(--safe-bottom));justify-content:center;overflow-x:auto}.key-rail{left:14px;right:14px;bottom:calc(92px + var(--safe-bottom));grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}.reference-toggle{right:14px;bottom:calc(220px + var(--safe-bottom))}.about-toggle{right:78px;bottom:calc(220px + var(--safe-bottom))}.note-readout{display:none}.score-panel{left:14px;right:14px;bottom:calc(202px + var(--safe-bottom));width:auto;min-width:0;transform:none}.reference-panel{left:14px;right:14px;bottom:calc(264px + var(--safe-bottom));width:auto;min-width:0;max-height:min(36vh,190px);transform:none;overflow:auto}.about-panel{left:14px;right:14px;bottom:calc(264px + var(--safe-bottom));width:auto;min-width:0;max-height:min(56vh,500px)}.reference-head{grid-template-columns:1fr;gap:8px;padding:9px 10px}.reference-controls{grid-template-columns:68px minmax(0,1fr) 64px;gap:8px;padding:8px 10px 10px}.score-body{height:116px;padding:8px 10px 10px}}@media (max-width: 520px){.status-bar{top:calc(12px + var(--safe-top));left:12px;right:12px}.status-bar>div:first-child{max-width:calc(100vw - 138px)}.status-bar h1{font-size:clamp(27px,9.4vw,36px);line-height:1.08}.theme-cycle{top:calc(12px + var(--safe-top));right:12px;min-width:54px;padding:0 8px}.sound-toggle{top:calc(12px + var(--safe-top));right:74px}.inspector{top:calc(54px + var(--safe-top));max-height:calc(100dvh - 66px - var(--safe-top) - var(--safe-bottom))}.control-strip{display:grid;grid-template-columns:minmax(72px,.9fr) repeat(3,minmax(0,1fr));gap:6px;overflow:visible}.control-strip button,.audio-status-chip{min-width:0;min-height:44px;padding:0 4px;font-size:13px;line-height:1.05;white-space:nowrap}.audio-status-chip{gap:4px;font-size:12px;max-width:none}.audio-status-chip .mini-spinner{width:13px;height:13px}.wide-label{display:none}.mobile-label{display:inline}.key-rail button{height:44px;min-height:44px}.key-rail button span:first-child{font-size:10px}.key-rail button span:last-child{font-size:12px}.score-head{padding:8px 9px 6px}.score-head h2{font-size:16px}.score-tabs{grid-template-columns:repeat(2,minmax(62px,1fr))}.score-tabs button{min-height:30px;padding:0 6px}.score-panel{bottom:calc(198px + var(--safe-bottom))}.reference-panel{bottom:calc(264px + var(--safe-bottom))}.reference-toggle{bottom:calc(220px + var(--safe-bottom))}.about-toggle{right:76px;bottom:calc(220px + var(--safe-bottom))}.score-body{height:108px}.score-note{min-width:38px}.score-note .degree{font-size:22px}}@media (max-height: 720px){.status-bar h1{font-size:clamp(26px,min(4.4vw,6.4vh),38px)}.inspector{top:calc(18px + var(--safe-top))}.score-panel{bottom:178px}.reference-panel{bottom:154px}.about-panel{bottom:154px;max-height:calc(100dvh - 198px - var(--safe-top) - var(--safe-bottom))}.score-body{height:92px}.score-note{grid-template-rows:10px 1fr 22px}.score-note .dots{height:8px;font-size:12px}.score-note .bar-note,.note-readout{display:none}}@media (max-width: 880px) and (max-height: 720px){.inspector{top:calc(58px + var(--safe-top))}.reference-panel{bottom:calc(264px + var(--safe-bottom))}.reference-toggle{bottom:calc(220px + var(--safe-bottom))}.about-panel{bottom:calc(264px + var(--safe-bottom))}.about-toggle{bottom:calc(220px + var(--safe-bottom))}}