:root{font-family:Arial,Helvetica,sans-serif;color:#eee5d6;background:#191512;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;font-size:18px;color-scheme:dark;--brass:#c9a66b;--ivory:#eee5d6;--muted:#b4a99a;--line:rgba(204,173,120,.23)}*{box-sizing:border-box}body{margin:0;min-width:360px;background:radial-gradient(ellipse at 45% 25%,#27221c44,transparent 70%),repeating-linear-gradient(1deg,#21191125 0px,#21191125 2px,transparent 3px,transparent 8px),#191512}button,input{font:inherit}button{cursor:pointer;color:inherit}button:disabled{opacity:.36;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #f0c777;outline-offset:5px}button{transition:background .18s,border-color .18s,box-shadow .18s}h1,h2,h3,p{margin:0}h1,h2,h3,.serif{font-family:Georgia,Times New Roman,serif;font-weight:400}button svg{flex-shrink:0}a{color:#e1c28a;text-underline-offset:4px}.app-shell{max-width:1800px;margin:auto;padding:28px 36px 0}.masthead{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);padding-bottom:26px}.masthead h1{font-size:clamp(40px,4.2vw,66px);line-height:1.12;letter-spacing:-1.8px}.masthead p{font-family:Georgia,Times New Roman,serif;font-size:23px;color:#c7bfb3;margin-top:8px}.masthead p span{padding:0 8px}.play-all{display:flex;align-items:center;justify-content:center;gap:16px;background:linear-gradient(#30251b44,#0e0b0866);border:1px solid var(--brass);border-radius:8px;min-height:52px;padding:12px 24px;font-family:Georgia,Times New Roman,serif;font-size:22px;color:#ebce94;white-space:nowrap;box-shadow:inset 0 1px #fff1}.play-all:hover:not(:disabled){background:#53402a55;box-shadow:0 0 20px #bc905615}.workspace{display:grid;grid-template-columns:260px minmax(0,1fr);padding-top:24px;gap:26px}.library{border-right:1px solid var(--line);padding-right:18px;display:flex;flex-direction:column}.library h2{font-size:29px;margin:2px 0 22px;white-space:nowrap}.library nav{display:flex;flex-direction:column}.library nav button{border:0;border-bottom:1px solid var(--line);border-left:3px solid transparent;display:flex;align-items:center;gap:22px;padding:19px 18px;background:transparent;text-align:left;font-family:Georgia,Times New Roman,serif;white-space:nowrap;min-height:66px}.library nav button span:first-child{font-size:23px}.library nav button span:last-child{font-size:20px;color:#c9c0b3}.library nav button:hover:not(:disabled){background:#c9a66b0c}.library nav button.selected{border-left-color:#e1c28a;background:linear-gradient(90deg,#c9a66b30,#c9a66b08)}.library nav button.selected span{color:#f3e3bd}.library-foot{display:flex;gap:12px;align-items:center;margin:28px 14px 15px;color:#9e907b;font-size:16px;line-height:1.6}.performance{min-width:0}.movement-header{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:85px;padding:0 0 20px 8px}.movement-title h2{font-size:40px;line-height:1.2;letter-spacing:-.7px}.movement-title p{font-family:Georgia,Times New Roman,serif;font-size:23px;margin-top:5px;color:#d6caba;white-space:nowrap}.movement-tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.movement-tabs button{min-height:46px;border:1px solid #d0b98c2c;border-radius:6px;background:#fff3;padding:9px 13px;background:linear-gradient(#ffffff06,#ffffff02);font-size:16px;color:#c3b9ab;white-space:nowrap}.movement-tabs button.active{border-color:var(--brass);color:#f2d79b;background:linear-gradient(#d5b27928,#d5b27912)}.piano-scroll{overflow-x:auto;scrollbar-color:#766044 #161310;scrollbar-width:thin;border:1px solid var(--line);border-radius:4px;box-shadow:0 12px 24px #0005}.piano-surface{min-width:1040px}.roll-stage{position:relative;height:clamp(220px,30vh,360px);background:linear-gradient(90deg,#181918,#24252288 50%,#171818),linear-gradient(#1e211e,#111412);overflow:hidden;border-bottom:3px solid #8b353566}.roll-stage canvas{width:100%;height:100%;display:block}.roll-caption{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;pointer-events:none;color:#b4a48a;font-family:Georgia,Times New Roman,serif;font-size:24px}.keyboard{height:150px;position:relative;background:#0a0907;border-top:7px solid #0b0908;border-bottom:9px solid #070605;touch-action:none;user-select:none;-webkit-user-select:none}.piano-key{position:absolute;top:0;margin:0;padding:0;border-radius:0 0 4px 4px;transition:background .04s,box-shadow .04s;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer}.white-key{height:100%;z-index:1;border:1px solid #776f60;border-top:0;background:linear-gradient(90deg,#dcd4c4,#f0eadc 16%,#f5efe3 80%,#c7c1b5);box-shadow:inset 0 -5px #b9b0a0,0 3px 1px #000a}.white-key span{position:absolute;bottom:13px;left:0;right:0;text-align:center;color:#70695d;font-size:16px;letter-spacing:-1px}.black-key{height:63%;z-index:2;border:1px solid #030303;background:linear-gradient(90deg,#100f0e,#302e29 28%,#1d1b18 65%,#070706);box-shadow:inset 0 -7px #3a3730,inset 1px 0 #5c574d80,2px 5px 3px #0007}.white-key.pressed{background:linear-gradient(90deg,#b2935c,var(--note-color) 35%,#dcc69a);box-shadow:inset 0 -2px #8f7140,0 0 16px #dbb97566}.black-key.pressed{background:linear-gradient(90deg,#3a3021,var(--note-color),#77613d);box-shadow:inset 0 -3px #796847,0 0 16px #dbb97555}.piano-key.pressed span{color:#4a3920}.keyboard.loading{opacity:.6}.play-along{display:flex;align-items:center;gap:26px;padding:20px 5px 22px;min-height:86px}.play-along>.serif{font-size:24px;margin-right:4px;white-space:nowrap}.octave-control{display:flex;align-items:center;gap:14px;font-size:16px}.stepper{display:flex;align-items:center;overflow:hidden;border:1px solid #b9ac9330;border-radius:7px;background:#ffffff03}.stepper button{display:grid;place-items:center;width:41px;height:38px;border:0;background:transparent}.stepper button:hover:not(:disabled){background:#ffffff0a}.stepper output{display:block;min-width:46px;text-align:center;border-left:1px solid #b9ac9320;border-right:1px solid #b9ac9320;font-size:16px}.text-button{display:inline-flex;align-items:center;gap:8px;background:transparent;border:0;padding:7px 0;color:#bead94;font-size:16px}.text-button:hover{color:#f1d5a0}.key-help{margin-left:auto;white-space:nowrap}.sustain-button{background:transparent;border:1px solid #b9ac9330;border-radius:7px;padding:9px 12px;font-size:16px;white-space:nowrap}.sustain-button span{color:#a99d8a;margin-left:5px}.sustain-button.on{border-color:var(--brass);background:#c9a66b22}.sustain-button.on span{color:#f2d99e}.help-panel{padding:16px 20px;margin-bottom:20px;background:#c9a66b0c;border-left:2px solid var(--brass);font-size:16px;line-height:1.7;color:#c9c0b3}.help-panel p+p{margin-top:8px}.transport{display:grid;grid-template-columns:auto minmax(210px,1fr) 155px 135px 146px;align-items:center;gap:28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 8px}.transport-buttons{display:flex;align-items:center;gap:14px}.round-button,.icon-button{display:grid;place-items:center;background:linear-gradient(#ffffff0b,#ffffff02);border:1px solid #d4cbb349;color:#e0d8c7}.round-button{width:53px;height:53px;border-radius:50%;box-shadow:inset 0 1px #ffffff21}.icon-button{width:36px;height:42px;background:none;border:0;color:#b8a98e}.main-play{display:grid;place-items:center;width:78px;height:78px;border-radius:50%;border:1px solid #f7dda5;background:linear-gradient(130deg,#e0c58c,#a88245);color:#211a11;box-shadow:inset 0 2px #fff5,0 7px 17px #0004}.main-play svg{margin-left:2px}.main-play:hover:not(:disabled){background:linear-gradient(130deg,#efd8a8,#bd944f)}.round-button:hover:not(:disabled){border-color:var(--brass);background:#c9a66b18}.timeline{min-width:0}.timeline-label{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:9px}.time-display{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:18px}.time-display>span{color:#a99e8e}.performance-status{font-size:16px;color:#b6a98f;text-align:right;line-height:1.3}.slider-control,.motion-control{display:flex;flex-direction:column;gap:12px;font-size:16px}.slider-control>span{display:flex;align-items:center;gap:8px;white-space:nowrap}.slider-control output{color:#d2c0a3}.slider-control input{width:100%}input[type=range]{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:transparent;height:24px;cursor:pointer;margin:0;width:100%}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:3px;background:#766b5a88}input[type=range]::-webkit-slider-thumb{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;border:1px solid #e5c891;background:#c8a568;box-shadow:0 1px 4px #0007;margin-top:-6px}.motion-control{position:relative;cursor:pointer}.motion-control>span:first-child{white-space:nowrap}.motion-control input{position:absolute;bottom:0;left:0;width:46px;height:25px;margin:0;opacity:0;cursor:pointer}.switch{display:block;width:46px;height:25px;background:#55544e;border:1px solid #7b7568;border-radius:15px;pointer-events:none}.switch:after{content:"";display:block;width:19px;height:19px;border-radius:50%;background:#c1bfb7;margin:2px;transition:transform .2s}.motion-control input:checked+.switch{background:#997747}.motion-control input:checked+.switch:after{transform:translate(20px);background:#f4dfb3}.motion-control input:focus-visible+.switch{outline:2px solid #f0c777;outline-offset:5px}footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0 24px;color:#a59a88;font-family:Georgia,Times New Roman,serif;font-size:18px}.credits-link{font-family:Georgia,Times New Roman,serif;font-size:18px;color:#d0ad74}.sample-progress{height:2px;background:#432}.sample-progress>span{display:block;height:100%;background:#d0ad74;transition:width .2s}.error-notice{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 20px;background:#693c292e;border:1px solid #ba7f5444;font-size:18px;line-height:1.5}.error-notice button{border:1px solid var(--brass);background:transparent;border-radius:5px;padding:8px 14px;white-space:nowrap}.spinner{animation:spin 1.5s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.credits-dialog{background:#241e18;color:var(--ivory);border:1px solid #bfa17066;border-radius:8px;padding:42px;max-width:700px;width:calc(100% - 32px);max-height:85vh;box-shadow:0 20px 100px #0009}.credits-dialog::backdrop{background:#090704b8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.credits-dialog h2{font-size:34px;margin-bottom:22px}.credits-dialog h3{font-size:25px;margin:25px 0 10px}.credits-dialog p{font-size:18px;line-height:1.7;color:#cbc0ae}.credits-dialog p.subtle{margin-top:24px;font-size:16px;color:#a99b87}.dialog-close{position:absolute;right:12px;top:10px}@media(min-width:1600px){.workspace{grid-template-columns:285px minmax(0,1fr)}.piano-surface{min-width:0}.roll-stage{height:340px}.keyboard{height:172px}}@media(max-width:1380px){.app-shell{padding:24px 26px 0}.workspace{grid-template-columns:225px minmax(0,1fr);gap:22px}.library h2{font-size:26px}.library nav button{padding-left:13px;gap:18px}.library nav button span:last-child{font-size:18px}.movement-header{align-items:flex-start;flex-direction:column;gap:15px;padding-bottom:18px}.movement-title h2{font-size:36px}.movement-tabs{justify-content:flex-start}.roll-stage{height:220px}.transport{grid-template-columns:auto minmax(180px,1fr) 125px 105px 137px;gap:20px;padding:22px 0}.transport-buttons{gap:10px}.main-play{width:68px;height:68px}.round-button{width:45px;height:45px}.performance-status{display:none}.play-along{gap:16px}.key-help span{display:none}}@media(max-width:1050px){.workspace{grid-template-columns:185px minmax(0,1fr);gap:20px}.library{padding-right:12px}.library h2{font-size:22px}.library nav button{gap:11px;padding:17px 10px}.library nav button span:first-child{font-size:20px}.library nav button span:last-child{font-size:16px}.masthead h1{font-size:44px}.masthead p{font-size:20px}.play-all{font-size:18px;padding:12px 18px}.transport{grid-template-columns:auto minmax(200px,1fr) 140px;row-gap:22px}.volume-control{grid-column:2}.motion-control{grid-column:3;grid-row:2}.play-along{flex-wrap:wrap;gap:14px}.key-help{margin-left:auto}.octave-control{gap:8px}.library-foot{margin-left:8px;font-size:16px}}@media(max-width:760px){.app-shell{padding:22px 18px 0}.masthead{flex-direction:column;align-items:flex-start;gap:20px;padding-bottom:23px}.masthead h1{font-size:clamp(34px,7.5vw,50px);letter-spacing:-1.3px}.masthead p{font-size:18px;line-height:1.5}.masthead p span{padding:0 3px}.play-all{width:100%;min-height:50px}.workspace{display:flex;flex-direction:column;gap:22px;padding-top:20px}.library{padding-right:0;border-right:0}.library h2{font-size:25px;margin-bottom:12px}.library nav{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.library nav button{display:flex;flex-direction:column;gap:5px;align-items:flex-start;justify-content:center;padding:10px 11px;border:1px solid var(--line);border-radius:4px;min-height:66px}.library nav button.selected{border-color:var(--brass)}.library nav button span:first-child{font-size:20px}.library nav button span:last-child{font-size:16px}.library-foot{display:none}.movement-header{padding-left:0;gap:16px}.movement-title h2{font-size:33px}.movement-title p{font-size:21px}.movement-tabs{width:100%;gap:6px}.movement-tabs button{padding:10px;font-size:16px;flex:1}.piano-surface{min-width:1560px}.roll-stage{height:220px}.keyboard{height:152px}.white-key span{font-size:16px}.play-along{gap:15px;justify-content:space-between;padding:18px 0}.play-along>.serif{font-size:22px}.octave-control{font-size:16px}.sustain-button{margin-left:auto}.key-help{margin-left:0}.transport{grid-template-columns:1fr 1fr;gap:20px}.transport-buttons{grid-column:1 / -1;justify-content:center;gap:23px}.transport .main-play{width:76px;height:76px}.transport .round-button{width:52px;height:52px}.timeline{grid-row:2;grid-column:1 / -1}.timeline-label{margin-bottom:7px}.performance-status{display:block}.slider-control{grid-row:3;grid-column:auto}.volume-control{grid-column:2}.motion-control{grid-row:4;grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between}.motion-control input{right:0;left:auto}.motion-control>span:first-child{font-size:16px}footer{font-size:16px;align-items:flex-start;padding:18px 0;gap:14px}footer>span{max-width:180px;line-height:1.5}.credits-link{font-size:16px;padding:0;line-height:1.5;white-space:nowrap}.credits-dialog{padding:34px 22px}.credits-dialog h2{font-size:30px}.error-notice{flex-direction:column;align-items:flex-start}.restart{margin-right:-7px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.movement-tabs button,.sustain-button,.stepper output{font-size:18px}.slider-control output{font-size:18px}.key-help{font-size:18px}.footer-links{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px 24px}.watch-link{font-size:18px;line-height:1.5;color:#e1c28a}.watch-link:hover{color:#f2d79b}@media(max-width:760px){footer{flex-direction:column}footer>span{max-width:none}.footer-links{justify-content:flex-start}}