:root{color-scheme:light;--ink:#25282b;--muted:#747570;--gold:#ad8350;--line:#d4d2cb;--panel:#dadbd9;--mono:'Consolas','Courier New',monospace}
*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:'DM Sans',Arial,sans-serif;background:radial-gradient(ellipse at 50% 26%,#fffdf6 0%,transparent 62%),linear-gradient(140deg,#eae8e0,#e6e7e4 60%,#dddeda);min-height:100vh}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,select,a{cursor:pointer}button{color:inherit}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #98703b;outline-offset:4px}button:disabled{opacity:.35;cursor:default}button{border:0}a{color:inherit}.studio{max-width:1320px;margin:auto;padding:32px 48px 22px}.masthead{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #cfcec6;padding:0 0 22px}.wordmark{font-family:Manrope,Arial,sans-serif;font-weight:800;font-size:20px;letter-spacing:4px;text-decoration:none;display:flex;align-items:center;gap:13px}.wordmark-sub{font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:2px;color:#77796e;padding-left:18px;margin-left:5px;border-left:1px solid #c5c6bd}.brand-mark{display:flex;gap:3px;height:24px;align-items:center}.brand-mark i{display:block;width:3px;height:16px;border-radius:3px;background:#ad8350}.brand-mark i:nth-child(2){height:24px}.brand-mark i:nth-child(3){height:11px}.edition{font-family:var(--mono);font-size:10px;letter-spacing:1.6px;color:#7a7c74}.edition b{font-weight:400;margin-left:14px;color:#393f3b}.intro{display:flex;justify-content:space-between;align-items:flex-end;padding:37px 4px 30px}.eyebrow{font-family:var(--mono);color:#8a7758;font-size:10px;letter-spacing:2px;margin-bottom:9px}h1{font-family:Manrope,Arial,sans-serif;font-size:clamp(32px,4vw,49px);font-weight:500;letter-spacing:-2.4px;margin:0;line-height:1.2}h1 em{font-family:Georgia,serif;font-weight:400;color:#8f7048} .intro p{font-size:14px;color:#7a7c74;margin:11px 0 0}.demo-button{display:flex;gap:10px;align-items:center;background:transparent;border:1px solid #c3c4ba;border-radius:24px;padding:11px 18px;font-size:12px;box-shadow:0 1px 1px #fff9;transition:.2s}.demo-button:hover{background:#fff8;border-color:#a38b66}.play-symbol{display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid currentColor}.demo-button[aria-pressed=true] .play-symbol{width:7px;height:9px;border:0;border-left:2px solid;border-right:2px solid}
.instrument{isolation:isolate;position:relative;padding:25px 32px 0;border:1px solid #c4c6c3;border-top:1px solid #fbfcf7;border-radius:17px 17px 13px 13px;background:repeating-linear-gradient(0deg,#ffffff09 0,#ffffff09 1px,#282d3209 1px,#282d3209 2px,transparent 2px,transparent 4px),linear-gradient(108deg,#d4d5d2 0%,#f3f4f0 23%,#d3d5d2 48%,#e8e9e4 70%,#bfc2bd 100%);box-shadow:inset 0 2px 2px #fff,0 3px 0 #8c908b,0 7px 0 #575d58,0 10px 0 #343936,0 20px 26px -9px #20271e55,0 45px 54px -22px #20251b55}.instrument::before{content:'';position:absolute;inset:1px;border-radius:inherit;pointer-events:none;border-left:1px solid #ffffffba;border-right:1px solid #ffffff75}.screw{position:absolute;width:10px;height:10px;border-radius:50%;background:linear-gradient(125deg,#7b807a,#f4f7ed 40%,#9ca297 65%,#636c61);box-shadow:0 1px 1px #fff8,inset 0 1px 1px #5558;border:1px solid #8f978a}.screw:after{content:'';position:absolute;width:6px;height:1px;background:#545a51;left:1px;top:3px;transform:rotate(-35deg);box-shadow:0 1px #faffeb88}.screw-tl{top:13px;left:13px}.screw-tr{top:13px;right:13px}.screw-bl{bottom:14px;left:13px}.screw-br{bottom:14px;right:13px}.instrument-heading{display:flex;justify-content:space-between;align-items:center;padding-bottom:23px}.engraved{font-family:Manrope,Arial,sans-serif;font-weight:800;letter-spacing:3px;font-size:14px;text-shadow:0 1px #fff;color:#444b45}.engraved span{font:9px var(--mono);letter-spacing:2px;color:#7e857b;margin-left:12px}.power-button{background:transparent;display:flex;align-items:center;gap:8px;color:#65715e;font:8px var(--mono);letter-spacing:1px;padding:0}.led,.tiny-led,.beat-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#9ba08f;box-shadow:inset 0 1px 2px #2a3d2166}.power-button[aria-pressed=true] .led{background:#a8be75;box-shadow:0 0 7px #c4e78e,0 0 2px #fff}.power-symbol{background:linear-gradient(#f6f8f0,#c5c9c1);border:1px solid #a6ada0;border-radius:50%;width:25px;height:25px;display:grid;place-items:center;font-size:14px;box-shadow:0 1px #fff8,0 2px 3px #5553;margin-left:4px}.control-deck{display:grid;grid-template-columns:1fr 1.55fr 1fr;gap:30px;align-items:center}.dial-bank{display:flex;gap:23px;justify-content:space-around}.dial-control{min-width:0;flex:1;--angle:0deg}.dial-heading{display:flex;justify-content:space-between;gap:4px;align-items:center;font-size:10px;letter-spacing:.2px;margin-bottom:7px}.dial-heading label{font-weight:600}.dial-heading output{font:11px var(--mono);color:#555c51;white-space:nowrap}.dial-heading output span{font-size:8px;margin-left:1px;color:#777e70}.dial{position:relative;width:80px;max-width:100%;aspect-ratio:1;margin:0 auto 4px;border-radius:50%;background:repeating-conic-gradient(from -140deg,#5d665654 0deg 2deg,transparent 2deg 23.3deg);padding:7px;touch-action:none;cursor:ns-resize}.dial:after{content:'';position:absolute;bottom:-2px;height:13px;width:42%;left:29%;background:#daddd5;z-index:-1}.dial-face{width:100%;height:100%;border-radius:50%;position:relative;border:1px solid #b3b9af;background:radial-gradient(ellipse at 50% 40%,#e6e9e2 20%,transparent 67%),conic-gradient(#f8faf4,#adb5a8 45deg,#e9ede5 90deg,#a6aca1 150deg,#f8faf2 220deg,#bfc6b9 280deg,#f8faf4);box-shadow:inset 0 1px 1px #fff,0 4px 2px #707969,0 7px 7px #4e584a50,0 0 0 2px #888f8250}.dial-face:before{content:'';position:absolute;inset:6px;border-radius:50%;border:1px solid #a8b29f4d;background:repeating-linear-gradient(0deg,transparent 0px,transparent 1px,#fbfff466 1px,#fbfff466 2px)}.dial-face i{position:absolute;inset:0;border-radius:50%;transform:rotate(var(--angle))}.dial-face i:after{content:'';position:absolute;width:3px;height:11px;top:5px;left:calc(50% - 1.5px);border-radius:3px;background:#9b763c;box-shadow:0 1px 1px #fff8}.dial-control input{appearance:none;width:100%;height:14px;display:block;background:transparent;cursor:ew-resize;margin:5px 0 0}.dial-control input::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,#a17b43 var(--fill),#a9b0a1 var(--fill));border-radius:4px;box-shadow:0 1px #fff8}.dial-control input::-webkit-slider-thumb{appearance:none;width:8px;height:8px;border-radius:50%;margin-top:-2.5px;background:#555f4e;border:1px solid #dde2d6;box-shadow:0 1px 2px #5555}.dial-control input::-moz-range-track{height:3px;background:#a9b0a1}.dial-control input::-moz-range-thumb{width:8px;height:8px;border-radius:50%;background:#555f4e}.range-ends{display:flex;justify-content:space-between;font:7px var(--mono);letter-spacing:.8px;color:#737d69;margin-top:2px}.display-bezel{padding:5px;background:linear-gradient(150deg,#a5ada1,#eef2e9 50%,#8a9484);border-radius:8px;box-shadow:0 1px #ffffffd9,inset 0 1px 2px #64715c66}.display{position:relative;overflow:hidden;min-height:146px;border:1px solid #202c20;border-radius:4px;background:radial-gradient(ellipse at 30% 0,#354136,#1f2b25 65%);color:#d7dbb5;box-shadow:inset 0 4px 9px #0008;padding:12px 15px 10px}.display:after{content:'';pointer-events:none;position:absolute;inset:0;background:linear-gradient(150deg,#fff7b508 0,transparent 50%);box-shadow:inset 0 0 18px #0004}.display-top,.display-bottom{display:flex;align-items:center;justify-content:space-between;font:8px var(--mono);letter-spacing:.6px;color:#a4b09c;gap:8px}.signal-dot{display:inline-block;width:4px;height:4px;background:#9db487;border-radius:50%;margin-right:4px}.display-main{display:flex;justify-content:space-between;align-items:flex-end;margin-top:14px;gap:8px}.screen-caption{font:7px var(--mono);letter-spacing:1.5px;color:#8e9e8d}.preset-name{font-family:Manrope,Arial,sans-serif;font-size:20px;font-weight:500;margin-top:3px;letter-spacing:-.6px;text-shadow:0 0 12px #bdcf9a22;white-space:nowrap}.note-readout{display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:nowrap}.note-readout strong{font:22px var(--mono);color:#e9deb1}.note-readout span{font:7px var(--mono);color:#99a692}.display canvas{display:block;width:100%;height:36px;margin:6px 0 5px}.display-bottom{font-size:7px;white-space:nowrap}.meter{height:3px;flex:1;background:#81916d26}.meter i{display:block;height:100%;width:0;background:#bfcb9d;box-shadow:0 0 4px #cfe2a955;transition:width .07s}
.utility-strip{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:17px 0 18px;margin-top:11px;border-top:1px solid #8f988a36;box-shadow:inset 0 1px #fff7}.utility-group{display:flex;align-items:center;gap:8px}.strip-label{font:8px var(--mono);letter-spacing:1px;color:#636f5b;white-space:nowrap}select{background:linear-gradient(#e7ece2,#cfd7c7);border:1px solid #aeb8a4;border-radius:4px;color:#3e4a35;padding:6px 19px 6px 8px;font-size:10px;box-shadow:0 1px #fff8}.square-button{height:25px;width:25px;border-radius:4px;background:linear-gradient(#f4f7ed,#c6cfbc);border:1px solid #acb5a0;box-shadow:0 1px #fff8;font-size:16px}.octave-group output{min-width:12px;text-align:center;font:11px var(--mono)}.sustain-button{display:flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid #aab59e;border-radius:4px;background:linear-gradient(#e4eadd,#cfd9c5);font:8px var(--mono);letter-spacing:.5px;white-space:nowrap}.sustain-button kbd{font:7px var(--mono);color:#768369;margin-left:6px}.sustain-button[aria-pressed=true]{background:linear-gradient(#576648,#72815e);color:#f1ecd7;box-shadow:inset 0 1px 4px #1e2b1b44}.sustain-button[aria-pressed=true] .tiny-led{background:#e6cd92;box-shadow:0 0 5px #eddd9e}.sustain-button[aria-pressed=true] kbd{color:#d1d9c1}.keyboard-bed{position:relative;background:#222a21;padding:8px 10px 10px;border-radius:6px 6px 3px 3px;box-shadow:inset 0 5px 7px #000b,0 1px #fff8;border:1px solid #929c86}.felt-strip{height:5px;background:linear-gradient(#49251e,#6b3530,#442320);position:relative;z-index:3;box-shadow:0 2px 4px #0007}.keyboard{position:relative;height:235px;display:flex;gap:2px;touch-action:none;user-select:none}.piano-key{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;touch-action:none;user-select:none;-webkit-user-select:none;padding:0 0 19px;flex:1;border-radius:0 0 5px 5px;transition:transform .06s,box-shadow .06s;background:linear-gradient(90deg,#e2e2d8,#fffef3 8%,#f5f5ec 48%,#f9f8f0 88%,#d4d7cd);border:1px solid #d4d6cb;border-top:none;box-shadow:inset 0 8px 12px #15211444,inset 0 -6px 0 #c1c5b9,inset 0 -7px 0 #fafdf1,0 3px 2px #0007;cursor:pointer}.piano-key:before{content:'';position:absolute;inset:12px 6px 27%;background:linear-gradient(115deg,#fff5,transparent);border-radius:0 0 50% 50%;pointer-events:none}.key-note{font:10px var(--mono);color:#9da18f;margin-bottom:10px}.key-label{font:600 17px Manrope,Arial,sans-serif;color:#5b6551;display:grid;place-items:center;min-width:30px;height:29px;border:1px solid #d8ddd0;border-radius:6px;background:#e8edde66;box-shadow:0 1px #fffff9}.piano-key.is-active{background:linear-gradient(90deg,#cbd3bf,#e7eddb 12%,#f7f8e9 55%,#d7dfca);transform:translateY(4px);height:calc(100% - 4px);box-shadow:inset 0 8px 15px #23322055,inset 0 -2px #a8b797,0 1px 2px #0007}.piano-key.is-active .key-label{background:#b19461;color:#fff9df;border-color:#a48a59;box-shadow:0 0 14px #ddc182aa}.piano-key.black{position:absolute;top:0;z-index:4;width:6.8%;height:62%;padding-bottom:15px;flex:none;border:1px solid #191f18;border-top:0;border-radius:0 0 5px 5px;background:linear-gradient(90deg,#0c100d 0%,#3b413a 14%,#242b23 36%,#293228 82%,#10180e 100%);box-shadow:inset 0 -9px 1px #0b1209,inset 0 -10px #59634f,inset 0 0 0 1px #464f3c,3px 9px 7px #0007}.piano-key.black:before{inset:3px 6px 15px;background:linear-gradient(110deg,#a6b79a10,transparent 50%,#0002);border-radius:0 0 3px 3px;border-left:1px solid #ffffff0c}.black .key-note{color:#818c75;font-size:9px;margin-bottom:7px}.black .key-label{height:auto;min-width:auto;border:none;border-radius:0;background:transparent;box-shadow:none;font-size:10px;color:#b2baa7}.black.is-active{transform:translateY(4px);height:calc(62% - 4px);background:linear-gradient(90deg,#20291a,#3e4934,#26301f);box-shadow:inset 0 -4px #141c0f,inset 0 -5px #687357,2px 3px 4px #0009}.black.is-active .key-label{background:transparent;box-shadow:none;border:0;color:#e4c37d}.instrument-footer{height:43px;display:flex;justify-content:space-between;align-items:center;padding:0 3px;font:7px var(--mono);letter-spacing:1.4px;color:#69765e;gap:12px}.instrument-footer b{color:#a58a54;margin:0 6px}.speaker-grille{width:75px;height:16px;background:radial-gradient(#65705b80 .8px,transparent 1px) 0 0/4px 4px;opacity:.5}
.session-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:34px 4px 0;padding:17px 0;border-bottom:1px solid #cccec3}.recording-controls,.metronome-controls{display:flex;align-items:center;gap:21px}.record-button,.transport-button,.metronome-button{display:flex;align-items:center;gap:9px;background:transparent;font-size:12px;padding:6px 0}.record-dot{width:9px;height:9px;border-radius:50%;background:#a57463;box-shadow:0 0 0 4px #ac7c6810}.record-button[aria-pressed=true]{color:#ad4036}.record-button[aria-pressed=true] .record-dot{background:#c24d3f;box-shadow:0 0 0 4px #c5564222}#record-time{font:12px var(--mono);color:#858a7b;font-variant-numeric:tabular-nums}.transport-button .play-symbol{border-top-width:4px;border-bottom-width:4px;border-left-width:6px}.download-button{display:flex;align-items:center;gap:7px;text-decoration:none;font-size:12px}.download-button.disabled{opacity:.35;cursor:default;pointer-events:none}.tempo-label{display:flex;align-items:center;gap:5px;font:8px var(--mono);color:#7a8370}.tempo-label input{width:53px;padding:6px 4px;text-align:center;color:#47513f;background:#e7ecdf;border:1px solid #c6ceba;border-radius:5px;font:11px var(--mono)}.beat-dot{width:6px;height:6px}.metronome-button[aria-pressed=true] .beat-dot{background:#a28049}.beat-dot.beat{box-shadow:0 0 0 5px #ad8e5430;background:#b18d48}.playing-guide{padding:18px 4px 0;font-size:11px;color:#7f8676;display:flex;flex-direction:column;gap:10px}.playing-guide p{margin:0;display:flex;align-items:center;gap:5px;flex-wrap:wrap}.playing-guide p:nth-child(2){justify-content:space-between}.playing-guide kbd{font:10px var(--mono);display:inline-grid;place-items:center;width:22px;height:22px;background:#f4f6ed;border:1px solid #c9cebf;border-radius:4px;box-shadow:0 1px 1px #c4cbb9;color:#68715d}.playing-guide p>span:not(.guide-detail){margin-left:9px}.text-button{color:#787f6e;font:10px 'DM Sans',sans-serif;background:transparent;padding:3px 0;text-decoration:underline;text-decoration-color:#c2c8b8;text-underline-offset:4px}.guide-detail{font-size:10px}.status{font:11px 'DM Sans',sans-serif;text-align:center;color:#838c79;min-height:16px;margin:19px 0 0}.page-footer{display:flex;justify-content:space-between;gap:30px;border-top:1px solid #d5d9ce;margin-top:22px;padding-top:15px;font:8px var(--mono);letter-spacing:1.1px;color:#959c8b}.page-footer b{font-weight:400;color:#a8916f}.page-footer details{max-width:430px;text-align:right;letter-spacing:0;font:10px 'DM Sans',sans-serif;color:#8a9380}.page-footer summary{cursor:pointer}.page-footer p{line-height:1.65}.status.error{color:#a44436}
@media(min-width:1500px){.studio{padding-top:44px}.intro{padding-top:44px;padding-bottom:35px}.keyboard{height:270px}.display{min-height:153px}.instrument{padding-top:28px}}
@media(max-width:1050px){.studio{padding:24px}.control-deck{gap:17px;grid-template-columns:1fr 1.5fr 1fr}.dial-bank{gap:13px}.dial{width:66px}.display{padding:10px;min-height:138px}.preset-name{font-size:17px}.dial-heading{font-size:9px}.dial-heading output{font-size:10px}.instrument{padding-left:24px;padding-right:24px}.strip-label{font-size:7px}.utility-strip{gap:7px}.utility-group{gap:6px}.sustain-button kbd{display:none}.keyboard{height:220px}.engraved span{font-size:8px}}
@media(max-width:760px){.studio{padding:20px 14px}.masthead{padding-bottom:17px}.wordmark{font-size:17px;letter-spacing:3px}.wordmark-sub{display:none}.edition{font-size:8px}.intro{padding:27px 2px 25px}h1{font-size:38px}.intro p{font-size:12px}.demo-button{font-size:10px;padding:10px 12px}.eyebrow{font-size:8px}.instrument{padding:22px 15px 0}.engraved{font-size:12px}.engraved span{display:none}.control-deck{grid-template-columns:1fr 1fr;gap:20px}.display-bezel{grid-row:1;grid-column:1/-1}.display{min-height:126px;padding:12px 17px}.display-main{margin-top:8px}.preset-name{font-size:22px}.screen-caption{font-size:8px}.display-top{font-size:9px}.display-bottom{font-size:8px}.note-readout span{font-size:8px}.dial-bank{gap:24px;padding:0 9px}.dial{width:73px}.dial-heading{font-size:10px}.range-ends{font-size:7px}.utility-strip{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 0}.utility-group{gap:7px;justify-content:space-between}.utility-strip select{font-size:11px}.sustain-button{justify-content:center;min-height:29px}.strip-label{font-size:8px}.octave-group{justify-content:flex-end}.keyboard-bed{padding:5px 5px 7px}.keyboard{height:205px;gap:1px}.key-label{font-size:14px;min-width:23px;width:23px;height:25px}.piano-key{padding-bottom:15px}.key-note{font-size:8px}.black .key-label{font-size:9px}.black .key-note{font-size:8px}.instrument-footer{font-size:6px;letter-spacing:.6px;height:34px}.speaker-grille{display:none}.session-bar{gap:15px;margin-top:27px;flex-wrap:wrap}.recording-controls{gap:18px}.record-button,.transport-button,.download-button,.metronome-button{font-size:11px}.metronome-controls{gap:10px}.playing-guide p>span:not(.guide-detail){margin-left:0;width:100%;margin-top:6px}.page-footer{gap:10px;font-size:7px}.power-button{font-size:7px}}
@media(max-width:430px){.intro{align-items:center;gap:12px}h1{font-size:31px;letter-spacing:-1.5px}.eyebrow{font-size:7px;letter-spacing:1.5px}.demo-button{padding:9px;font-size:9px;max-width:105px;line-height:1.4;flex-shrink:0}.dial-bank{gap:16px;padding:0}.dial-heading{flex-direction:column;gap:4px;align-items:center}.dial{width:67px}.control-deck{gap:15px}.key-label{font-size:12px;width:20px;min-width:20px;height:23px;border-radius:4px}.keyboard{height:175px}.key-note{font-size:7px}.black .key-note{display:none}.black{min-width:0}.black .key-label{font-size:8px}.instrument-footer{font-size:5px;letter-spacing:.5px}.edition{letter-spacing:.5px}.playing-guide{font-size:10px}.guide-detail{line-height:1.7}.recording-controls{width:100%;justify-content:space-between;gap:8px}.metronome-controls{margin-left:auto}.page-footer>span{max-width:150px;line-height:1.7}.note-readout span{font-size:7px}.status{font-size:10px;line-height:1.5}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
.wordmark{font-size:18px;letter-spacing:1.6px}.engraved{font-size:12px;letter-spacing:1.6px}.preview-actions{display:flex;gap:10px;align-items:center}.concert-button{background:#ebe5d8;border-color:#b49a72}.concert-button[aria-pressed=true]{background:#d9c7a5}.preview-actions .demo-button{white-space:nowrap}
@media(max-width:760px){.preview-actions{flex-direction:column;align-items:stretch}.wordmark{font-size:15px;letter-spacing:1px}.engraved{font-size:10px;letter-spacing:1px}}
@media(max-width:430px){.edition{display:none}.preview-actions .demo-button{max-width:none;font-size:9px}.wordmark{font-size:14px}.wordmark-sub{display:none}}

/* Concert player, accompaniment and a more visible recording transport. */
.concert-choices{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.concert-choice{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;text-align:left;padding:15px 13px;border:1px solid #cec5b5;border-radius:8px;background:linear-gradient(145deg,#fffdf6bd,#e9e3d88c);box-shadow:inset 0 1px #fff8;min-height:88px;color:#605c50}.choice-number{font:9px var(--mono);color:#a58c65}.choice-title{font-size:13px;font-weight:600;letter-spacing:-.3px}.choice-duration{font:10px var(--mono);color:#8d7a5b}.choice-description{grid-column:1/-1;font-size:10px;line-height:1.6;color:#828071}.concert-choice:hover{border-color:#a38b66;background:#fffdf6}.concert-choice[aria-pressed=true]{border-color:#8e7958;background:linear-gradient(145deg,#ebe2cf,#d9cbae);box-shadow:inset 0 0 0 1px #b4a18144}.concert-choice[aria-pressed=true] .choice-title{color:#4b412e}.concert-choice[aria-pressed=true] .choice-number{color:#79603d}.concert-choice[aria-pressed=true] .choice-description{color:#716245}
@media(max-width:1000px){.concert-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.concert-choice{min-height:84px}}
@media(max-width:460px){.concert-choice{padding:12px 10px;grid-template-columns:1fr auto;gap:7px}.choice-number{display:none}.choice-title{font-size:12px}.choice-description{font-size:9px}.choice-duration{font-size:9px}}
.concert-player{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px 24px;padding:22px 26px;margin:0 0 28px;border:1px solid #c9c3b4;border-radius:12px;background:linear-gradient(115deg,#fbf8eeeb,#e3ded2cc);box-shadow:inset 0 1px #fff,0 4px 13px #4e4a3410}
.concert-heading{display:flex;align-items:center;gap:18px;min-width:0}.concert-note{display:grid;place-items:center;flex:0 0 52px;height:52px;border-radius:50%;font-size:28px;color:#917145;background:linear-gradient(140deg,#fffdf6,#d6ccb7);border:1px solid #c5b89f;box-shadow:inset 0 1px #fff,0 3px 5px #66593816}
.concert-eyebrow{font:9px var(--mono);letter-spacing:1.5px;color:#8b7655}.concert-player h2,.band-panel h2,.session-heading h2{font-family:Manrope,Arial,sans-serif;font-size:21px;letter-spacing:-.6px;font-weight:600;margin:5px 0}.concert-player h2{font-family:Georgia,serif;font-size:29px;font-weight:400;color:#695338}.concert-player p,.band-panel p,.session-heading p{margin:5px 0 0;font-size:12px;line-height:1.5;color:#737568}
.concert-player .concert-button{min-height:48px;padding:14px 22px;font-size:14px;font-weight:600;max-width:none;background:linear-gradient(#796340,#655134);border-color:#685334;color:#fff8e8;box-shadow:inset 0 1px #fff3,0 3px 5px #55402520;white-space:nowrap}.concert-player .concert-button:hover{background:linear-gradient(#8b724a,#705b3a)}.concert-player .concert-button[aria-pressed=true]{background:linear-gradient(#4e5a47,#3b4734);border-color:#39432f}
.concert-timeline{grid-column:1/-1;display:flex;align-items:center;gap:12px;color:#82765f;font:10px var(--mono);font-variant-numeric:tabular-nums}.concert-timeline progress{appearance:none;height:4px;width:100%;border:0;border-radius:8px;overflow:hidden;background:#d4cebe}.concert-timeline progress::-webkit-progress-bar{background:#d4cebe}.concert-timeline progress::-webkit-progress-value{background:linear-gradient(90deg,#b29a6e,#80633b);border-radius:8px}.concert-timeline progress::-moz-progress-bar{background:#927449}
.band-panel{margin:35px 4px 0;padding:24px;border:1px solid #c7cbbf;border-radius:12px;background:linear-gradient(125deg,#f0f2eacc,#e0e4d8bb);box-shadow:inset 0 1px #fff9}.band-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.band-heading h2{font-size:20px}.band-heading>output{white-space:nowrap;background:#d7dfcc;color:#526148;border:1px solid #b8c3aa;border-radius:6px;padding:9px 12px;font:11px var(--mono)}
.band-controls{display:flex;align-items:center;justify-content:space-between;gap:26px;margin-top:20px}.band-switches{display:flex;gap:10px}.band-toggle{display:flex;align-items:center;gap:9px;min-height:48px;padding:11px 14px;border:1px solid #bfc6b5;border-radius:7px;background:linear-gradient(#fafbf4,#dce2d3);box-shadow:inset 0 1px #fff,0 2px 2px #78836e23;font-size:13px;font-weight:600;white-space:nowrap}.band-toggle>span:first-child{font-size:19px;color:#839275}.band-toggle small{font:9px var(--mono);text-transform:uppercase;color:#858c7c;background:#c7cebf70;padding:4px 6px;border-radius:4px}.band-toggle[aria-pressed=true]{background:linear-gradient(#657754,#506042);border-color:#4d603e;color:#fff9e5}.band-toggle[aria-pressed=true]>span:first-child{color:#e0c996}.band-toggle[aria-pressed=true] small{background:#d5dcb826;color:#f2e6be}
.band-volume{display:grid;grid-template-columns:1fr auto;gap:6px 20px;font-size:11px;min-width:130px;max-width:210px;flex:1;color:#67725d}.band-volume output{font:11px var(--mono)}.band-volume input{width:100%;grid-column:1/-1;accent-color:#73835e;cursor:pointer;min-height:22px;margin:0}.band-controls .metronome-controls{gap:12px}.band-controls .metronome-button{font-size:12px;min-height:44px}.tempo-label input{min-height:38px;font-size:13px;width:58px}.tempo-label input:disabled{opacity:.6}
.session-bar{margin-top:20px;padding:22px 0 24px;gap:20px;flex-wrap:wrap}.session-heading h2{font-size:19px}.session-heading p{font-size:11px}.recording-controls{gap:12px;flex-wrap:wrap}.record-button,.transport-button,.download-button{min-height:48px;padding:13px 18px;border:1px solid #bfc5b5;border-radius:7px;background:linear-gradient(#fdfef8,#e0e4d7);font-size:14px;font-weight:600;box-shadow:inset 0 1px #fff,0 2px 3px #69755b20;justify-content:center}.record-button{border-color:#c6ad9c;background:linear-gradient(#fff6ee,#e8dace)}.record-button:hover,.transport-button:hover,.download-button:hover{filter:brightness(1.025);border-color:#a28b64}.record-button[aria-pressed=true]{background:linear-gradient(#b96655,#8d4437);color:#fff8ee;border-color:#8a4838}.record-button[aria-pressed=true] .record-dot{background:#ffddc5;box-shadow:0 0 0 4px #ffdbbe20}.record-dot{width:10px;height:10px}#record-time{font-size:14px;min-width:45px;text-align:center}.transport-button .play-symbol{border-top-width:5px;border-bottom-width:5px;border-left-width:7px}
@media(max-width:1050px){.band-controls{flex-wrap:wrap;gap:16px}.band-volume{max-width:none}.band-controls .metronome-controls{margin-left:auto}.session-heading{flex:1}.recording-controls{gap:8px}.record-button,.transport-button,.download-button{padding:13px 15px}}
@media(max-width:760px){.concert-player{padding:19px 18px;gap:15px;margin-bottom:25px}.concert-heading{gap:12px}.concert-note{flex-basis:40px;height:40px;font-size:23px}.concert-eyebrow{font-size:8px;letter-spacing:1px}.concert-player h2{font-size:25px}.concert-player p{font-size:11px}.concert-player .concert-button{font-size:12px;padding:12px 15px}.band-panel{padding:20px 16px}.band-heading{align-items:flex-start}.band-heading>output{font-size:9px;padding:8px;max-width:125px;white-space:normal;line-height:1.5}.band-controls{gap:20px}.band-switches{flex:1}.band-toggle{flex:1;padding:11px 12px;font-size:12px}.band-volume{min-width:135px}.session-bar{padding:19px 0;gap:16px}.session-heading{width:100%;flex-basis:100%}.recording-controls{width:100%;gap:9px;justify-content:flex-start}.record-button,.transport-button,.download-button{font-size:13px;padding:12px 16px;min-height:48px}.session-heading p{margin:0}.metronome-controls{margin-left:0}}
@media(max-width:460px){.concert-player{grid-template-columns:1fr;gap:14px}.concert-heading{align-items:center}.concert-player .concert-button{width:100%;font-size:13px}.concert-note{flex-basis:43px;height:43px}.concert-timeline{gap:8px}.band-heading{flex-wrap:wrap;gap:10px}.band-heading>output{max-width:none}.band-switches{flex-basis:100%}.band-volume{min-width:0;flex-basis:100%;max-width:none}.band-controls .metronome-controls{justify-content:space-between;width:100%;margin:0}.recording-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}.record-button{grid-column:1;grid-row:1}#record-time{grid-column:2;grid-row:1;text-align:right;padding-right:10px}.transport-button{grid-column:1;grid-row:2}.download-button{grid-column:2;grid-row:2}.record-button,.transport-button,.download-button{font-size:13px;padding:12px 10px}.session-heading h2{font-size:19px}}

/* Knall & Kante: the same navy, cobalt and rose as the main website. */
:root {
  color-scheme: dark;
  --ink: #080b18;
  --muted: #b8c0d4;
  --royal: #073ccf;
  --royal-deep: #031b80;
  --royal-bright: #1456ff;
  --blush: #ffe3ec;
  --rose: #ff7ca2;
  --paper: #f4f5fb;
  --line: #b8c0d433;
}
html { scrollbar-color: var(--rose) #10183b; }
body {
  color: var(--paper);
  background: radial-gradient(ellipse at 80% 4%, #1456ff26, transparent 55%),
    radial-gradient(ellipse at 0% 80%, #ff7ca210, transparent 50%),
    linear-gradient(140deg, #080b18, #10183b 65%, #0b1027);
  background-attachment: scroll;
}
body::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--royal-bright), var(--rose)); }
::selection { background: var(--rose); color: var(--ink); }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline-color: var(--rose); }
.masthead { border-color: var(--line); }
.wordmark { color: var(--blush); }
.brand-mark i { background: var(--rose); }
.brand-mark i:nth-child(2) { background: #719aff; }
.wordmark-sub { color: #b8c0d4; border-color: var(--line); }
.edition { color: #a7b2d0; }
.edition b { color: var(--blush); }
.eyebrow { color: var(--rose); }
h1 { color: #fff9fa; }
h1 em { color: var(--rose); }
.intro p { color: #b8c0d4; }
.demo-button { color: var(--blush); border-color: #ff7ca270; background: #ffe3ec08; box-shadow: inset 0 1px #ffffff0c; }
.demo-button:hover { color: #fff; background: #ff7ca218; border-color: var(--rose); }

/* Concerts: clear selection in cobalt, subtle rose details. */
.concert-player { border-color: #7187c448; background: linear-gradient(120deg, #151d3b, #0f1730); box-shadow: inset 0 1px #ffffff0b, 0 12px 35px #02071630; }
.concert-note { color: var(--blush); background: linear-gradient(135deg, #354980, #172752); border-color: #728ccc65; box-shadow: inset 0 1px #ffffff24, 0 3px 8px #0002; }
.concert-eyebrow { color: var(--rose); }
.concert-player h2 { color: var(--blush); }
.concert-player p { color: #bec8df; }
.concert-player .concert-button { color: #fff; background: linear-gradient(135deg, var(--royal-bright), var(--royal)); border-color: #527fff; box-shadow: inset 0 1px #ffffff40, 0 4px 18px #1456ff26; }
.concert-player .concert-button:hover { background: linear-gradient(135deg, #3c73ff, #1446d6); border-color: #91adff; }
.concert-player .concert-button[aria-pressed=true] { color: var(--ink); background: linear-gradient(135deg, var(--blush), var(--rose)); border-color: var(--rose); }
.concert-choice { color: #f4f5fb; border-color: #7187c44a; background: linear-gradient(140deg, #202b4b, #18213d); box-shadow: inset 0 1px #ffffff0b; }
.choice-number { color: var(--rose); }
.choice-duration { color: #ccd5eb; }
.choice-description { color: #b8c0d4; }
.concert-choice:hover { background: #27365f; border-color: #8faaff; }
.concert-choice[aria-pressed=true] { background: linear-gradient(135deg, #194fe0, #0734ab); border-color: #90acff; box-shadow: inset 0 0 0 1px #b6caff2b, 0 4px 18px #07112c55; }
.concert-choice[aria-pressed=true] .choice-title { color: #fff; }
.concert-choice[aria-pressed=true] .choice-number { color: var(--blush); }
.concert-choice[aria-pressed=true] .choice-description, .concert-choice[aria-pressed=true] .choice-duration { color: #e5ebff; }
.concert-timeline { color: #c7d0e7; }
.concert-timeline progress, .concert-timeline progress::-webkit-progress-bar { background: #344061; }
.concert-timeline progress::-webkit-progress-value { background: linear-gradient(90deg, #4c7dff, var(--rose)); }
.concert-timeline progress::-moz-progress-bar { background: var(--rose); }

/* The metal remains tactile, now in neutral, cool silver. */
.instrument { color-scheme: light; color: #18223b; border-color: #9da9c0; border-top-color: #fff; background: repeating-linear-gradient(0deg, #ffffff10 0, #ffffff10 1px, #14203c09 1px, #14203c09 2px, transparent 2px, transparent 4px), linear-gradient(108deg, #c9cfda, #f5f7fc 23%, #cdd4df 48%, #e8edf5 70%, #b6c0d0); box-shadow: inset 0 2px 2px #fff, 0 3px 0 #8795ae, 0 7px 0 #43516f, 0 10px 0 #16213c, 0 22px 28px -9px #02071688, 0 45px 54px -22px #02071688; }
.screw { background: linear-gradient(125deg, #788499, #f6f8ff 40%, #a0adbf 65%, #606d83); border-color: #8793a7; }
.screw::after { background: #4a566e; box-shadow: 0 1px #f7f9ff88; }
.engraved { color: #263651; }
.engraved span, .power-button, .dial-heading output, .range-ends { color: #53627d; }
.dial-heading output span { color: #65738b; }
.power-symbol { color: #243d79; background: linear-gradient(#fafbff, #c7d0df); border-color: #a3afc5; }
.led, .tiny-led, .beat-dot { background: #8795ae; box-shadow: inset 0 1px 2px #18244366; }
.power-button[aria-pressed=true] .led { background: var(--royal-bright); box-shadow: 0 0 7px #1456ff90, 0 0 2px #fff; }
.dial { background: repeating-conic-gradient(from -140deg, #41537370 0deg 2deg, transparent 2deg 23.3deg); }
.dial::after { background: #d9dfe9; }
.dial-face { border-color: #a9b5c8; background: radial-gradient(ellipse at 50% 40%, #edf1f8 20%, transparent 67%), conic-gradient(#fafcff, #aebacd 45deg, #edf2f9 90deg, #a4afc1 150deg, #fcfdff 220deg, #c1ccdc 280deg, #fafcff); box-shadow: inset 0 1px 1px #fff, 0 4px 2px #707e96, 0 7px 7px #3a4a6550, 0 0 0 2px #7888a150; }
.dial-face::before { border-color: #8598b64d; background: repeating-linear-gradient(0deg, transparent 0px, transparent 1px, #f8fbff66 1px, #f8fbff66 2px); }
.dial-face i::after { background: var(--royal); }
.dial-control input::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--royal) var(--fill), #a5b1c5 var(--fill)); }
.dial-control input::-webkit-slider-thumb { background: #243d79; border-color: #edf2ff; }
.dial-control input::-moz-range-track { background: #a5b1c5; }
.dial-control input::-moz-range-progress { background: var(--royal); }
.dial-control input::-moz-range-thumb { background: #243d79; }
.display-bezel { background: linear-gradient(150deg, #8695af, #edf2ff 50%, #7686a2); }
.display { color: #e7edff; background: radial-gradient(ellipse at 30% 0, #1d3267, #080f27 70%); border-color: #111e3a; }
.display::after { background: linear-gradient(150deg, #819fff0b, transparent 50%); }
.display-top, .display-bottom { color: #aabfe8; }
.signal-dot { background: var(--rose); }
.screen-caption, .note-readout span { color: #a2b6db; }
.preset-name { color: #f4f5fb; text-shadow: 0 0 12px #81a4ff22; }
.note-readout strong { color: var(--blush); }
.meter { background: #819fff26; }
.meter i { background: var(--rose); box-shadow: 0 0 4px #ff7ca255; }
.utility-strip { border-color: #6c7c9636; }
.strip-label { color: #4a5d7b; }
.instrument select, .square-button, .sustain-button { color: #263c61; background: linear-gradient(#f1f5fc, #cdd7e6); border-color: #a4b2c9; }
.sustain-button kbd { color: #536885; }
.sustain-button[aria-pressed=true] { color: #fff; background: linear-gradient(#2457e7, #073ccf); border-color: #073ccf; }
.sustain-button[aria-pressed=true] .tiny-led { background: var(--blush); box-shadow: 0 0 5px var(--rose); }
.sustain-button[aria-pressed=true] kbd { color: #e7edff; }
.keyboard-bed { background: #10182a; border-color: #7786a0; }
.felt-strip { background: linear-gradient(#682640, #ac4568, #592239); }
.piano-key { background: linear-gradient(90deg, #dfe3ea, #fff 8%, #f6f8fb 48%, #fcfdff 88%, #ccd3de); border-color: #cbd3df; box-shadow: inset 0 8px 12px #14213d44, inset 0 -6px 0 #b6c0cf, inset 0 -7px 0 #f6f9ff, 0 3px 2px #0007; }
.key-note { color: #74839d; }
.key-label { color: #314b75; border-color: #cad3e3; background: #e5ebf566; box-shadow: 0 1px #fff; }
.piano-key.is-active { background: linear-gradient(90deg, #adc2ee, #d9e5ff 12%, #f2f6ff 55%, #bdcfee); box-shadow: inset 0 8px 15px #14284d55, inset 0 -2px #8199c3, 0 1px 2px #0007; }
.piano-key.is-active .key-label { color: #fff; background: var(--royal); border-color: var(--royal-deep); box-shadow: 0 0 14px #1456ff66; }
.piano-key.black { border-color: #0b101b; background: linear-gradient(90deg, #090e18, #34415a 14%, #1e293d 36%, #273249 82%, #0b1220); box-shadow: inset 0 -9px 1px #080e19, inset 0 -10px #51627e, inset 0 0 0 1px #3e4e69, 3px 9px 7px #0007; }
.piano-key.black::before { background: linear-gradient(110deg, #b5caff10, transparent 50%, #0002); }
.black .key-note { color: #93a1b9; }
.black .key-label { color: #cad3e8; background: transparent; border: 0; box-shadow: none; }
.black.is-active { background: linear-gradient(90deg, #102658, #254888, #172e5d); box-shadow: inset 0 -4px #0b1733, inset 0 -5px #5470a3, 2px 3px 4px #0009; }
.black.is-active .key-label { background: transparent; color: var(--rose); box-shadow: none; border: 0; }
.instrument-footer { color: #526581; }
.instrument-footer b { color: var(--royal); }
.speaker-grille { background: radial-gradient(#4c607f80 .8px, transparent 1px) 0 0 / 4px 4px; }

/* Accompaniment and recording continue the brand palette. */
.band-panel { color: #edf2ff; border-color: #7187c448; background: linear-gradient(125deg, #18213d, #111a34); box-shadow: inset 0 1px #ffffff0c; }
.band-panel p, .session-heading p { color: #b8c0d4; }
.band-heading>output { color: var(--blush); border-color: #7a91cb66; background: #28365d; }
.band-toggle { color: #edf2ff; background: linear-gradient(#30416c, #223155); border-color: #7187c466; box-shadow: inset 0 1px #ffffff16, 0 2px 3px #02071633; }
.band-toggle>span:first-child { color: var(--rose); }
.band-toggle small { color: #c4cfe6; background: #09132c55; }
.band-toggle[aria-pressed=true] { color: #fff; background: linear-gradient(#2457e7, #073ccf); border-color: #8fafff; }
.band-toggle[aria-pressed=true]>span:first-child, .band-toggle[aria-pressed=true] small { color: var(--blush); }
.band-toggle[aria-pressed=true] small { background: #ffe3ec16; }
.band-volume, .tempo-label { color: #c4cfe6; }
.band-volume input { accent-color: var(--rose); }
.tempo-label input { color-scheme: dark; color: #eef2ff; background: #0c1530; border-color: #7387b966; }
.metronome-button { color: #d9e3f8; }
.metronome-button[aria-pressed=true] .beat-dot { background: var(--rose); }
.beat-dot.beat { background: var(--rose); box-shadow: 0 0 0 5px #ff7ca230; }
.session-bar { border-color: var(--line); }
.record-button, .transport-button, .download-button { color: #f4f5fb; background: linear-gradient(#2c3c65, #1c2a4e); border-color: #7187c466; box-shadow: inset 0 1px #ffffff18, 0 2px 3px #02071633; }
.record-button { color: var(--blush); background: linear-gradient(#40233c, #302039); border-color: #ff7ca270; }
.record-dot { background: var(--rose); box-shadow: 0 0 0 4px #ff7ca214; }
.record-button:hover, .transport-button:hover, .download-button:hover { border-color: var(--rose); }
.record-button[aria-pressed=true] { background: linear-gradient(#ae2859, #872047); color: #fff; border-color: var(--rose); }
.record-button[aria-pressed=true] .record-dot { background: #fff; box-shadow: 0 0 0 4px #ffe3ec30; }
#record-time { color: #c4cfe6; }
.playing-guide, .text-button { color: #bcc8e0; }
.playing-guide kbd { color: #e5ecff; border-color: #6076ab70; background: #202d4d; box-shadow: 0 1px 1px #020716; }
.text-button { text-decoration-color: #8499c3; }
.status { color: #b8c0d4; }
.status.error { color: #ffabc4; }
.page-footer { color: #a5b2cc; border-color: var(--line); }
.page-footer b { color: var(--rose); }
.page-footer details { color: #b8c0d4; }
.legal-links { color: #b8c0d4; }

.legal-links{display:flex;gap:18px;justify-content:center;margin-top:16px;font-size:10px;color:#b8c0d4}.legal-links a{text-decoration:none}