:root{--paper:#f7f5ef;--ink:#292a32;--muted:#81817f;--accent:#b5a3de;--tint:#eeebf5}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px -apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #7258b9;outline-offset:4px}header{height:92px;max-width:1280px;padding:0 50px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e7e4dc}.logo{color:var(--ink);font-size:25px;text-decoration:none;font-weight:800;letter-spacing:-1px;display:flex;align-items:center;gap:16px}.logo span{letter-spacing:2px;font-size:9px;font-weight:500;color:#96958f;border-left:1px solid #d4d0c7;padding:6px 16px}.plain{background:none;border:1px solid #dedbd3;border-radius:24px;padding:10px 17px;font-size:12px}main{max-width:1180px;margin:auto;padding:0 40px}.intro{text-align:center;padding:45px 0 31px}.eyebrow{font-size:11px;letter-spacing:3px;color:#8b7c64}h1{font-size:36px;letter-spacing:-1px;margin:16px 0 13px;font-weight:750}h1>span{color:#ad96d8}p{color:var(--muted);font-size:12px;line-height:1.9;margin:0}nav{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:25px}.instrument{border:1px solid #e0ddd5;border-radius:16px;background:#fbfaf7;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 5px 13px;gap:8px;position:relative;transition:transform .2s,background .2s,box-shadow .2s}.instrument:hover{transform:translateY(-4px)}.instrument .emoji{font-size:30px;line-height:1.25;filter:saturate(.85)}.instrument strong{font-size:13px;font-weight:600}.instrument small{font-size:8px;letter-spacing:1px;color:#92908d}.instrument[aria-pressed=true]{border-color:var(--color);background:var(--shade);box-shadow:0 3px 0 var(--color)}.instrument[aria-pressed=true]:after{content:'✓';position:absolute;top:8px;right:10px;font-size:10px;color:#635379}.playground{background:var(--tint);border:1px solid #d9d2e5;border-radius:24px;padding:30px 34px 22px;position:relative;overflow:hidden;transition:background .3s}.stage-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.tag{font-size:10px;letter-spacing:1px;color:#83728c}h2{font-size:26px;margin:10px 0 6px}.stage-top button{background:#ffffff80;border:1px solid #ffffff;border-radius:22px;padding:11px 17px;font-size:11px;white-space:nowrap}.stage-top button:hover{background:#fff}.stage-top button.playing{background:var(--ink);color:white;border-color:var(--ink)}#surface{margin:30px auto 25px;min-height:190px;position:relative;z-index:1;user-select:none;touch-action:none;max-width:880px}.stage-bottom{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#8c8298}.stage-bottom span:last-child{color:#6f5a8e}.keyboard{display:flex;height:190px;position:relative;gap:6px;background:#37353f;padding:15px 14px 0;border-radius:14px 14px 8px 8px;box-shadow:0 10px 0 #322f3b,0 18px 24px #40334d17}.key{border:0;touch-action:none;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:5px;padding-bottom:12px;transition:background .06s,transform .06s}.white{flex:1;height:100%;background:linear-gradient(#fffefa,#f3f0ea);color:#aaa49c;border-radius:0 0 5px 5px;border-bottom:6px solid #d5d0c8;font-size:9px}.white b{font-size:10px;font-weight:500;color:#c3bcb1}.black{position:absolute;top:15px;width:7.1%;height:56%;background:linear-gradient(90deg,#34323c,#46434f);color:#94909e;z-index:2;border-radius:0 0 4px 4px;border-bottom:6px solid #201e27;font-size:9px}.white.hit{background:#c2ade9;transform:translateY(3px);border-bottom-width:3px}.black.hit{background:#a78bcf;transform:translateY(2px)}.bars{display:flex;align-items:center;justify-content:center;height:200px;gap:12px;padding:0 25px}.bar{flex:1;background:var(--bar);height:var(--height);max-width:85px;border:0;border-radius:12px;color:#514350;box-shadow:0 7px 0 color-mix(in srgb,var(--bar),#333 20%),0 12px 15px #4433220a;display:flex;align-items:center;justify-content:end;flex-direction:column;gap:9px;padding-bottom:18px;touch-action:none;transition:transform .1s}.bar:before{content:'●';color:#0002;position:absolute;top:25%;font-size:8px}.bar b{font-size:17px;font-weight:500}.bar small{font-size:10px;opacity:.5}.bar.hit{transform:translateY(5px);filter:brightness(1.15);box-shadow:0 2px 0 color-mix(in srgb,var(--bar),#333 20%)}.kalimba{align-items:start;background:#d3aa7d;border:8px solid #c69666;border-radius:22px;margin:auto;max-width:650px;height:210px;gap:10px;padding:0 22px;box-shadow:0 8px 0 #a7774e;position:relative}.kalimba:before{content:'随 手 乐';position:absolute;bottom:12px;font-size:10px;letter-spacing:4px;color:#714f3880}.kalimba .bar{border-radius:0 0 12px 12px;background:linear-gradient(90deg,#d9d5ce,#f7f4e9,#ccc6bb);box-shadow:0 5px 0 #8b7b69;max-width:58px;color:#807768;padding-bottom:12px}.kalimba .bar:before{display:none}.guitar{display:flex;flex-direction:column;gap:4px;margin:auto;max-width:820px;padding:6px 22px;border:9px solid #ac7846;border-radius:20px;background:repeating-linear-gradient(90deg,#c3905b 0,#c3905b 15%,#c89b6a 15.3%,#bd8a54 16%);box-shadow:0 7px 0 #8b5b35;position:relative}.guitar:before{content:'';position:absolute;width:143px;height:143px;border:10px solid #754c32;outline:3px solid #d5b384;background:#422f28;border-radius:50%;left:62%;top:10px}.string{height:27px;position:relative;background:none;border:0;display:flex;align-items:center;justify-content:space-between;color:#f8ead9;font-size:10px;touch-action:none}.string:before{content:'';position:absolute;left:35px;right:30px;height:var(--thickness);background:linear-gradient(#f8e5c2,#bdaa8c);box-shadow:0 2px 2px #604220}.string span{z-index:1;background:#9d6b40;padding:3px 6px;border-radius:4px}.string.hit:before{background:#fff;animation:vibrate .1s 3}.drums{display:grid;grid-template-columns:repeat(6,1fr);gap:15px;align-items:center;height:200px}.drum{height:145px;border-radius:22px;background:var(--bar);border:2px solid #fff8;box-shadow:0 7px 0 color-mix(in srgb,var(--bar),#333 20%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;touch-action:none}.drum:nth-child(even){transform:translateY(15px)}.drum .drum-icon{font-size:32px;color:#53475a}.drum b{font-size:13px;font-weight:500}.drum small{font-size:10px;color:#53475a88}.drum.hit{filter:brightness(1.16);box-shadow:0 1px 0 color-mix(in srgb,var(--bar),#333 20%);translate:0 5px}.play-tools{display:flex;align-items:center;justify-content:center;gap:22px;margin:25px 0 34px;color:#85817c;font-size:11px;flex-wrap:wrap}.tool-group{display:flex;align-items:center;gap:10px}.tool-group button{width:25px;height:25px;border:1px solid #d9d5cc;border-radius:50%;background:none;color:#6c6861;font-size:16px}.tool-group b{font-size:11px;color:#57524b;font-weight:400;min-width:48px;text-align:center}.play-tools>button{border:1px solid #dedad1;border-radius:25px;background:transparent;padding:11px 14px;color:#68635b;font-size:11px}.play-tools>button[aria-pressed=true]{background:#e8e0f4;color:#6e529b;border-color:#cbb8e3}.play-tools>button>span{margin-left:8px;color:#999388;font-size:9px}#record i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ce8e83;margin-right:6px}#record.recording{border-color:#ce8e83;color:#ae685c}#record.recording i{animation:pulse 1s infinite}.volume{border-left:1px solid #dfdbd2;padding-left:22px}input[type=range]{width:78px;height:3px;accent-color:#a38ac5}.bottom-note{border-top:1px solid #e2ded5;border-bottom:1px solid #e2ded5;display:flex;align-items:center;gap:18px;padding:24px 0}.bottom-note>span{font-size:35px;color:#b9a6cc}.bottom-note strong{font-size:13px;font-weight:500}.bottom-note p{font-size:10px;margin-top:5px}.sound-dots{margin-left:auto;font-size:23px;letter-spacing:5px;color:#c2b6d2}footer{display:flex;justify-content:space-between;font-size:9px;color:#a29c92;padding:25px 0}.floating-notes{position:absolute;inset:0;pointer-events:none;overflow:hidden}.floating-note{position:absolute;bottom:25%;font-size:32px;color:#8362a4;animation:float 1.1s ease-out forwards;z-index:3}@keyframes float{0%{transform:translateY(0) rotate(-15deg);opacity:.8}100%{transform:translateY(-180px) rotate(30deg);opacity:0}}@keyframes vibrate{50%{transform:translateY(3px)}}@keyframes pulse{50%{opacity:.25}}dialog{max-width:460px;margin:auto;background:#faf7f0;border:1px solid #ddd2c1;border-radius:24px;padding:35px;color:var(--ink)}dialog::backdrop{background:#29243b66;backdrop-filter:blur(5px)}dialog h2{font-size:22px;line-height:1.5;margin:20px 0}dialog p{font-size:12px;margin:12px 0}.close{float:right;border:0;background:none;font-size:25px}#gotIt{background:#b6a0d6;border:0;border-radius:25px;padding:13px 22px;margin-top:15px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);border-radius:25px;background:#38313f;color:white;font-size:12px;padding:13px 22px;opacity:0;pointer-events:none;z-index:20;transition:opacity .2s;max-width:90vw;text-align:center}#toast.show{opacity:1}button:disabled{opacity:.4;cursor:default}@media(max-width:800px){main{padding:0 24px}header{padding:0 24px}.playground{padding:25px 22px 20px}nav{gap:8px}.instrument{padding:14px 4px}.instrument small{font-size:7px}.drums{gap:9px}.drum{height:130px}.bars{gap:8px;padding:0 10px}.play-tools{gap:14px}.volume{padding-left:14px}.stage-bottom{font-size:9px}.sound-dots{font-size:18px}}@media(max-width:560px){header{height:72px;padding:0 20px}.logo{font-size:23px}.logo span{font-size:7px;letter-spacing:1px;padding:5px 10px}.plain{font-size:10px;padding:8px 12px}main{padding:0 18px}.intro{padding:33px 0 26px}h1{font-size:27px;margin:13px 0}.intro p{font-size:11px;max-width:300px;margin:auto}.eyebrow{font-size:9px}nav{grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}.instrument{padding:12px;gap:5px;border-radius:13px}.instrument .emoji{font-size:26px}.instrument strong{font-size:12px}.instrument small{font-size:7px}.playground{padding:22px 16px 18px;border-radius:20px}.tag{font-size:8px;letter-spacing:0}h2{font-size:23px;margin:8px 0 5px}.stage-top p{font-size:10px;max-width:190px}.stage-top button{font-size:9px;padding:10px}.keyboard{height:175px;gap:3px;padding:10px 7px 0;border-radius:10px 10px 4px 4px}.black{top:10px;width:7.2%}#surface{margin:24px auto;min-height:175px}.white{font-size:8px}.white b{font-size:9px}.stage-bottom{flex-direction:column;font-size:9px;gap:7px}.bars{gap:5px;padding:0;height:180px}.bar{border-radius:9px;padding-bottom:12px;gap:6px}.bar b{font-size:13px}.bar small{font-size:9px}.kalimba{height:190px;padding:0 10px;border-width:6px;gap:6px}.kalimba .bar{max-height:150px}.guitar{padding:6px 8px;border-width:6px}.guitar:before{width:115px;height:115px;left:50%;top:25px}.drums{height:205px;grid-template-columns:repeat(3,1fr);gap:10px}.drum{height:93px;border-radius:17px;gap:5px}.drum .drum-icon{font-size:23px}.drum b{font-size:11px}.drum small{font-size:9px}.drum:nth-child(even){transform:none}.play-tools{gap:12px 14px;margin:22px 0 28px}.tool-group{gap:8px}.play-tools>button{font-size:10px;padding:10px 12px}.volume{border:0;padding:0}.volume input{width:70px}.bottom-note{gap:12px;padding:20px 0}.bottom-note>span{font-size:29px}.bottom-note strong{font-size:12px}.bottom-note p{font-size:9px;max-width:240px}.sound-dots{display:none}footer{font-size:8px}footer span:last-child{display:none}dialog{max-width:90vw;padding:25px}}

/* Adjustable note range: keep every key large enough to play. */
#surface{overflow-x:auto;overflow-y:hidden;padding-bottom:20px;margin-bottom:5px;touch-action:pan-x}.keyboard{--key-inset:14px}.key.black{width:calc((100% - var(--key-inset) * 2) / var(--white-count) * .58)}.bar{position:relative;min-width:32px}.note-count select{font:inherit;color:#62546f;background:#f0eaf7;border:1px solid #d6c9e5;border-radius:18px;padding:8px 12px;cursor:pointer}.note-count select:disabled{opacity:.5;cursor:default}.note-count select:focus-visible{outline:2px solid #7258b9;outline-offset:3px}.count-hint{text-align:center;font-size:10px;margin:-19px 0 25px;color:#938a9b}.kalimba{max-width:none;width:max(100%,var(--bars-width,0px))}@media(max-width:560px){.keyboard{--key-inset:7px}.count-hint{font-size:9px;line-height:1.8;margin:-14px 8px 22px}.note-count select{padding:8px;font-size:10px}}

.piano-nav{margin-top:18px;position:relative;z-index:2}.piano-browse{display:flex;align-items:center;gap:8px;font-size:10px;color:#80718e}.piano-browse span{margin-right:auto}.piano-browse button{border:1px solid #cfc2dd;background:#ffffff80;padding:7px 10px;border-radius:18px;font-size:10px}.piano-overview{display:flex;gap:10px;align-items:center;margin-top:12px;color:#8e809c;font-size:9px}.piano-overview input{width:100%;flex:1;height:5px}.keyboard.full-piano{display:block;min-width:2312px;height:200px;padding:0}.full-piano .key{position:absolute;top:15px;flex:none}.full-piano .white{width:42px;height:185px}.full-piano .black{width:27px;height:110px}.full-piano .key b{font-size:10px;font-weight:500}.full-piano .key small{font-size:9px;min-height:10px}.full-piano .black b{color:#b8adca;font-size:8px}.full-piano .middle-c{background:#e2d4f3;border-color:#b39bcc}.full-piano .middle-c b{color:#725093}.full-piano .white.hit{background:#c2ade9}.full-piano .black.hit{background:#a78bcf}#surface:has(.full-piano){scrollbar-width:thin;scrollbar-color:#b9a6cf transparent;touch-action:pan-x}@media(max-width:560px){.piano-browse{flex-wrap:wrap;font-size:9px;gap:6px}.piano-browse button{font-size:9px;padding:7px 9px}.piano-browse span{font-size:9px}.keyboard.full-piano{height:190px}.full-piano .white{height:175px}.full-piano .black{height:105px}}
/* Immersive performance edition */
:root{color-scheme:dark;--paper:#101119;--ink:#edeaf4;--muted:#8d879b;--accent:#b8a1d7;--tint:#1c1826;--energy:0}body{background:#101119;color:var(--ink);min-height:100dvh;overflow-x:hidden;position:relative}button{transition:background .18s,border-color .18s,color .18s}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #c5acf0;outline-offset:4px}header{height:84px;max-width:1600px;padding:0 38px;border:0;gap:24px;position:relative;z-index:5}.logo{font-size:23px;letter-spacing:-1px;gap:14px;white-space:nowrap}.logo span{font-size:7px;letter-spacing:2px;border-color:#ffffff20;color:#6e697b;padding:5px 14px}header nav{display:flex;justify-content:center;gap:5px;margin:0 auto;flex:1}.instrument{background:transparent!important;border:1px solid transparent!important;border-radius:28px;display:flex;flex-direction:row;gap:7px;padding:10px 13px;color:#8b8499;box-shadow:none!important;min-width:0}.instrument:hover{transform:none;background:#ffffff06!important;color:#ece5f7}.instrument .emoji{font-size:16px;filter:saturate(.55)}.instrument strong{font-size:11px;font-weight:400;white-space:nowrap}.instrument small{display:none}.instrument[aria-pressed=true]{color:#e8defa;background:#a38aca1a!important;border-color:#b8a1d733!important}.instrument[aria-pressed=true]:after{display:none}.header-actions{display:flex;gap:9px}.icon-button{width:32px;height:32px;border:1px solid #ffffff12;border-radius:50%;background:#ffffff04;color:#9a91aa;font-size:17px}.icon-button:hover{background:#b8a1d71a;color:#efe7ff;border-color:#b8a1d74d}main{max-width:1600px;padding:0 38px;position:relative;z-index:1}.playground{min-height:calc(100dvh - 158px);padding:30px 36px 20px;border:1px solid #b8a1d718;border-radius:20px;background:linear-gradient(160deg,#1c1924aa,#15151eaa 60%);display:flex;flex-direction:column;overflow:hidden;backdrop-filter:blur(15px);transition:background .3s}.stage-top{align-items:center;margin:0;flex-shrink:0}.instrument-heading{display:flex;align-items:center;gap:12px}.instrument-heading h1{font-size:21px;font-weight:500;letter-spacing:2px;margin:0}.stage-mark{color:#6c607e}#toneCaption{font-size:11px;color:#8e809f;letter-spacing:1px}.stage-actions{display:flex;gap:10px}.stage-top .stage-actions button{background:#ffffff04;border:1px solid #ffffff12;color:#9a91a7;border-radius:20px;padding:9px 15px;font-size:11px}.stage-top .stage-actions button:hover{background:#b8a1d714;color:#e8def9}.stage-top #demo.playing{background:#b8a1d72a;color:#e7d3ff;border-color:#b8a1d755}#record i{width:6px;height:6px;background:#c892a2;margin-right:6px;display:inline-block;border-radius:50%}#record.recording{color:#f6b9ca!important;border-color:#ca7f9a77!important}#record.recording i{animation:pulse 1s infinite}.tone-strip{display:flex;justify-content:center;gap:8px;margin:28px 0 0;z-index:2;flex-shrink:0}.tone-strip button{border:1px solid #ffffff0b;background:#ffffff02;border-radius:18px;padding:8px 17px;font-size:10px;letter-spacing:1px;color:#746c83}.tone-strip button:hover{border-color:#b8a1d74a;color:#d6c5e9}.tone-strip button[aria-pressed=true]{color:#d6c2ed;background:#b8a1d717;border-color:#b8a1d747;box-shadow:0 0 22px #b8a1d708}.sound-space{position:relative;flex:1;min-height:130px;height:24vh;max-height:300px;isolation:isolate;display:flex;align-items:center;justify-content:center;pointer-events:none}.halo{position:absolute;width:146px;height:146px;top:50%;left:50%;border:1px solid #b8a1d718;border-radius:50%;transform:translate(-50%,-50%) rotateX(62deg) rotate(-25deg);box-shadow:0 0 42px #b8a1d707;transition:opacity .2s}.halo-inner{width:106px;height:106px;transform:translate(-50%,-50%) rotateX(62deg) rotate(25deg);border-color:#b8a1d726}.sound-core{width:72px;height:72px;border-radius:50%;position:absolute;background:radial-gradient(circle at 35% 25%,#cfb3f24d,#8e60c521 48%,#5b387800 75%);filter:blur(8px);opacity:calc(.4 + var(--energy)*.6);transform:scale(calc(1 + var(--energy)*.8));transition:transform .12s,opacity .12s}#soundCanvas{width:100%;height:100%;z-index:1;opacity:.9}.space-dot{position:absolute;width:3px;height:3px;border-radius:50%;background:#cdb2ee66;box-shadow:0 0 9px #ceb3ee55}.dot-a{left:24%;top:40%}.dot-b{right:31%;top:31%;width:2px;height:2px}.dot-c{right:19%;bottom:35%;width:2px;height:2px}.ambient-glow{position:fixed;width:60vw;height:60vw;min-width:550px;min-height:550px;border-radius:50%;pointer-events:none;filter:blur(80px);z-index:0;opacity:.23;animation:drift 16s ease-in-out infinite alternate}.glow-one{top:-33vw;left:-10vw;background:radial-gradient(#785997aa,transparent 65%)}.glow-two{right:-20vw;bottom:-38vw;background:radial-gradient(#50458088,transparent 65%);animation-delay:-8s}@keyframes drift{to{translate:5vw 4vw;opacity:.35}}#surface{flex-shrink:0;min-height:0;height:auto;padding:0 0 20px;margin:8px auto 0;max-width:none;width:100%;touch-action:pan-x;scrollbar-width:thin;scrollbar-color:#7e658944 transparent}.keyboard{--key-inset:14px;height:220px;box-shadow:0 10px 0 #0b0a10,0 22px 40px #0005;border-radius:8px;background:#26232d}.white{background:linear-gradient(#ece8e5,#d9d3d2);color:#9c929e;border-color:#b6adb6}.black{background:linear-gradient(90deg,#1a1720,#312a38);border-bottom-color:#100d16;color:#776982}.key b{color:#9b8f9d}.key>small,.key>b,.key.white:not(.full-piano .white){font-weight:400}.key b,.key small{opacity:0;transition:opacity .2s}.key.black{color:transparent}.show-labels .key b,.show-labels .key small{opacity:.7}.show-labels .key.black{color:#8b7b9b}.full-piano .middle-c b{opacity:.7;color:#79608f}.full-piano .middle-c{background:linear-gradient(#e7dff1,#d3c3e2);border-color:#ac95c1}.key.white.hit,.full-piano .white.hit{background:linear-gradient(#e2cff7,#bfa0dc);box-shadow:0 0 22px #b48bdb55}.key.black.hit,.full-piano .black.hit{background:linear-gradient(#a684c3,#6c4f8e);color:#ebddff;box-shadow:0 0 18px #b48bdb44}.keyboard.full-piano{height:220px}.full-piano .white{height:205px}.full-piano .black{height:125px}.full-piano .key b{font-size:9px}.full-piano .black b{color:#a592b7}.piano-nav{margin:18px 0 3px;display:flex;gap:12px;align-items:center;z-index:2;flex-shrink:0}.piano-nav[hidden],.tone-strip[hidden]{display:none!important}.piano-nav button{background:#ffffff04;border:1px solid #ffffff0d;border-radius:16px;color:#9e8eaf;padding:6px 12px;font-size:10px}.piano-nav button:disabled{opacity:.25}.piano-nav input{flex:1;width:100%;min-width:30px;accent-color:#a185bc;height:2px;opacity:.65}.end-note{font-size:8px;color:#6d5d7d}.stage-bottom{margin-top:16px;font-size:9px;color:#665a74;display:flex;justify-content:space-between;gap:12px;flex-shrink:0}.stage-bottom #status{color:#887399;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}#keyboardSummary{font-size:8px;letter-spacing:2px;white-space:nowrap;color:#5f526d}.floating-note{font-size:0;width:5px;height:5px;border-radius:50%;background:#cdb0f3;box-shadow:0 0 22px 8px #b798df25;bottom:25%;animation:float 1.5s ease-out forwards}footer{height:74px;padding:0 10px;align-items:center;font-size:9px;letter-spacing:1px;color:#5f586c;gap:16px}.footer-left{display:flex;align-items:center;gap:10px}.live-dot{width:4px;height:4px;border-radius:50%;background:#b49bcb;box-shadow:0 0 8px #b49bcb55}.footer-divider{color:#3f3749;margin:0 3px}footer .volume{margin:auto;display:flex;align-items:center;gap:9px;border:0;padding:0;color:#7c6f8d}footer .volume label{font-size:16px}footer .volume input{accent-color:#a18ab7;width:110px;height:2px}.footer-right{font-size:9px;letter-spacing:2px}.bars{height:220px}.bar{filter:saturate(.55) brightness(.8);box-shadow:0 7px 0 color-mix(in srgb,var(--bar),#15121c 45%),0 12px 25px #0003}.bar.hit{filter:saturate(.9) brightness(1.13)}.bar small{opacity:0}.show-labels .bar small{opacity:.5}.kalimba{background:#5f4433;border-color:#765039;box-shadow:0 8px 0 #322219}.kalimba:before{display:none}.kalimba .bar{background:linear-gradient(90deg,#9b9399,#d3c9cc,#958a95);color:#59515e}.guitar{background:repeating-linear-gradient(90deg,#725036 0,#725036 15%,#77573e 15.3%,#6a4830 16%);border-color:#4b3327;box-shadow:0 7px 0 #2d1e19}.string span{background:#67462e;color:#b59b81}.string span:last-child{opacity:0}.show-labels .string span:last-child{opacity:1}.guitar:before{background:#221914;border-color:#36251d;outline-color:#8c6746}.drum{filter:saturate(.45) brightness(.65);border-color:#ffffff20;box-shadow:0 7px 0 #211d29}.drum.hit{filter:saturate(.7) brightness(1.1)}.drum small{opacity:0}.show-labels .drum small{opacity:.5}.drums{height:220px}dialog{color-scheme:dark;background:#1d1925f5;border:1px solid #b8a1d72b;box-shadow:0 25px 100px #0008;color:var(--ink);width:min(430px,90vw);padding:26px;border-radius:18px;backdrop-filter:blur(25px)}dialog::backdrop{background:#08070bb0;backdrop-filter:blur(9px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.dialog-heading h2{font-size:17px;font-weight:500;margin:0}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid #ffffff08;font-size:12px;color:#aaa0b7}.setting-row:last-child{border:0}.setting-row select{font:inherit;max-width:150px;background:#2c2338;color:#cfbedf;border:1px solid #b8a1d726;border-radius:10px;padding:8px 10px}.setting-row input[type=range]{accent-color:#ae91cb;width:110px}.setting-row input[type=checkbox]{accent-color:#b397cf;width:16px;height:16px}.tool-group{gap:12px}.tool-group button{color:#ad98c1;border-color:#b8a1d733}.tool-group b{color:#c0accc;font-size:11px}.toggle{padding:5px 14px;border:1px solid #b8a1d733;background:#ffffff05;border-radius:14px;font-size:10px;color:#9d89b1}.toggle[aria-pressed=true]{background:#b8a1d733;color:#ead8ff}.count-hint{margin:9px 0 0;font-size:10px;text-align:left;line-height:1.7;color:#776a85}dialog p{font-size:12px;color:#a196ae;line-height:1.9}#gotIt,.primary{background:#b398cd;color:#21162d;border:0;border-radius:18px;padding:10px 18px;font-size:12px;margin-top:12px}#toast{background:#2b2237ed;color:#d2bfdf;border:1px solid #b8a1d733;font-size:11px;box-shadow:0 8px 28px #0005}.no-ambience .ambient-glow,.no-ambience .sound-space,.no-ambience .floating-notes{visibility:hidden}.focus-mode header nav,.focus-mode .logo span,.focus-mode #help,.focus-mode footer .footer-right{opacity:0;pointer-events:none}.focus-mode header{opacity:.35;transition:opacity .3s}.focus-mode header:hover,.focus-mode header:focus-within{opacity:1}.focus-mode .stage-actions{opacity:.5}.focus-mode .stage-actions:hover{opacity:1}.focus-mode .playground{border-color:transparent;background:transparent;backdrop-filter:none}.focus-mode .stage-bottom{opacity:.4}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}.ambient-glow{animation:none}}
@media(min-height:900px){.sound-space{min-height:220px;max-height:40vh}.playground{padding-top:38px;padding-bottom:26px}.keyboard.full-piano{height:250px}.full-piano .white{height:235px}.full-piano .black{height:145px}}
@media(max-width:1050px){header{padding:0 24px;gap:12px}.logo span{display:none}.instrument{padding:9px 10px}.instrument .emoji{display:none}main{padding:0 24px}.playground{padding:26px 24px 18px}.footer-right{font-size:8px;letter-spacing:1px}}
@media(max-width:700px){header{height:auto;min-height:110px;flex-wrap:wrap;padding:18px 20px 0;gap:12px}.logo{font-size:21px}.header-actions{margin-left:auto;gap:7px}.icon-button{width:29px;height:29px;font-size:15px}header nav{order:3;flex-basis:100%;justify-content:space-between;gap:2px}.instrument{padding:8px 10px}.instrument strong{font-size:10px}.playground{min-height:calc(100dvh - 184px);padding:23px 18px 18px;margin-top:18px;min-width:0}.stage-top{align-items:center}.instrument-heading h1{font-size:18px}.instrument-heading{gap:8px}#toneCaption{font-size:10px}.stage-top .stage-actions button{padding:7px 10px;font-size:10px}.stage-actions{gap:6px}.tone-strip{gap:5px;margin-top:22px}.tone-strip button{padding:7px 12px;font-size:9px}.sound-space{min-height:135px;max-height:210px}.piano-nav{gap:9px}.piano-nav button{padding:6px 8px;font-size:9px}.stage-bottom{font-size:8px}#keyboardSummary{font-size:7px;letter-spacing:1px}footer{height:65px;padding:0 3px}.footer-right{display:none}.footer-left{font-size:8px;gap:7px}footer .volume{margin:0 0 0 auto}main{padding:0 16px}.keyboard.full-piano{height:210px}.full-piano .white{height:195px}.full-piano .black{height:120px}.bars{height:200px}.drums{height:205px}.focus-mode header nav{display:none}.focus-mode header{min-height:65px}.focus-mode .playground{min-height:calc(100dvh - 148px)}.focus-mode .tone-strip{opacity:.65}}
@media(max-width:390px){.tone-strip button{padding:7px 9px}.stage-mark,#toneCaption{display:none}.instrument{padding:8px}.footer-left{letter-spacing:0}header{padding-left:18px;padding-right:18px}}

/* Fit the entire playing surface and navigation into short windows. */
.tone-strip button{color:#94879f}.tone-strip button[aria-pressed=true]{color:#e2cff4}.playground{height:calc(100dvh - 158px);min-height:510px}.sound-space{min-height:65px;height:auto}.key.black:not(.show-labels .key.black){font-size:0}.key.black b,.key.black small{font-size:9px}.tone-strip button{min-width:76px}
@media(max-width:700px){.playground{height:calc(100dvh - 193px);min-height:510px}.tone-strip button{min-width:75px}.focus-mode .playground{height:calc(100dvh - 148px);min-height:510px}}
@media(max-height:820px){.playground{padding-top:22px;padding-bottom:16px}.sound-space{min-height:45px;max-height:none}.tone-strip{margin-top:18px}.keyboard,.keyboard.full-piano{height:185px}.full-piano .white{height:170px}.full-piano .black{height:106px}.bars{height:185px}.piano-nav{margin-top:12px}.stage-bottom{margin-top:12px}}

/* Daylight mode keeps the same quiet stage and controls. */
body.light-mode{color-scheme:light;background:#f5f3ef;--ink:#37333d;--muted:#8c8393;color:var(--ink)}.light-mode .logo{color:#38313e}.light-mode .logo span{color:#aaa0ad;border-color:#cfc6d4}.light-mode .icon-button{color:#8d7e9d;border-color:#8a6f9f22;background:#ffffff55}.light-mode .icon-button:hover{background:#e8dfef;color:#5e4478}.light-mode .instrument{color:#978b9f}.light-mode .instrument:hover{color:#655073;background:#d7c5e01a!important}.light-mode .instrument[aria-pressed=true]{color:#74548c;background:#b8a1d71c!important;border-color:#9d7ab542!important}.light-mode .playground{background:linear-gradient(150deg,#fdfcfa99,#efebf299);border-color:#9980b024;box-shadow:0 12px 60px #51355f04}.light-mode .stage-mark{color:#b3a2c0}.light-mode #toneCaption{color:#9682a4}.light-mode .tone-strip button{color:#a092aa;background:#ffffff33;border-color:#9c80ae1f}.light-mode .tone-strip button[aria-pressed=true]{color:#79528f;background:#b7a0cb22;border-color:#9975b34f}.light-mode .stage-top .stage-actions button{color:#9682a2;background:#ffffff77;border-color:#9f86b923}.light-mode .stage-top .stage-actions button.playing{background:#d8c4e466;color:#76518f}.light-mode .halo{border-color:#9d7ab526}.light-mode .halo-inner{border-color:#9d7ab53b}.light-mode .sound-core{background:radial-gradient(circle at 35% 25%,#b08ac447,#a885ba21 48%,transparent 75%)}.light-mode .glow-one{background:radial-gradient(#c8aecf77,transparent 65%)}.light-mode .glow-two{background:radial-gradient(#b8c0d855,transparent 65%)}.light-mode .piano-nav button{background:#ffffff66;border-color:#9d7fb22b;color:#9b82ae}.light-mode .end-note{color:#b09cbe}.light-mode .stage-bottom #status{color:#a38caf}.light-mode #keyboardSummary{color:#b39ebf}.light-mode footer{color:#a299aa}.light-mode .footer-divider{color:#c4b7cc}.light-mode footer .volume{color:#a390b2}.light-mode .keyboard{background:#3a3440;box-shadow:0 9px 0 #2d2534,0 20px 35px #49305413}.light-mode .white{background:linear-gradient(#fffefb,#ece7e4);border-color:#cac1c9}.light-mode .full-piano .middle-c{background:linear-gradient(#efe6f6,#d7c3e6);border-color:#b499c8}.light-mode .key.white.hit,.light-mode .full-piano .white.hit{background:linear-gradient(#e8d5f7,#bea0d7)}.light-mode .bar{filter:saturate(.6) brightness(1);box-shadow:0 7px 0 color-mix(in srgb,var(--bar),#46394f 25%),0 12px 25px #4433220a}.light-mode .drum{filter:saturate(.55) brightness(1);box-shadow:0 7px 0 color-mix(in srgb,var(--bar),#46394f 25%)}.light-mode .bar.hit,.light-mode .drum.hit{filter:brightness(1.13)}.light-mode dialog{color-scheme:light;background:#fbf9f4f5;border-color:#b49ac833;color:#45354e;box-shadow:0 25px 100px #6a507833}.light-mode dialog::backdrop{background:#dad3e177}.light-mode .setting-row{color:#84728f;border-color:#9477a414}.light-mode .setting-row select{background:#ece5f2;color:#74558a;border-color:#b8a1d74d}.light-mode .count-hint{color:#ae9aba}.light-mode .tool-group button{color:#9278a4;border-color:#b49dc644}.light-mode .tool-group b{color:#856595}.light-mode .toggle{background:#eee7f3;color:#90739f}.light-mode .toggle[aria-pressed=true]{background:#d4bce8;color:#603c79}.light-mode dialog p{color:#8a7896}.light-mode #toast{color:#735084;background:#f5eefaf2;border-color:#cab5da55;box-shadow:0 8px 28px #70507b18}.light-mode.focus-mode .playground{background:transparent;border-color:transparent;box-shadow:none}

.key.white{color:transparent}.show-labels .key.white{color:#95869c}

/* Opposing quick selectors: key count opens right; instruments open left. */
.quick-controls{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:10}.quick-selector{display:flex;align-items:center;min-width:0;flex:0 1 auto;border:1px solid #b8a1d724;border-radius:23px;background:#b8a1d708;transition:border-color .25s,background .25s}.quick-selector.is-open{border-color:#b8a1d74a;background:#211b2bea}.selector-trigger{display:flex;align-items:center;gap:8px;flex-shrink:0;white-space:nowrap;background:transparent;border:0;padding:11px 13px;border-radius:22px;color:#ad9dbd;min-height:39px}.selector-trigger strong{font-size:11px;font-weight:500;color:#d7c6e8}.selector-label{font-size:10px;color:#8d7b9f}.selector-arrow{font-size:18px;line-height:1;color:#a98cbe;transition:transform .4s cubic-bezier(.22,1,.36,1)}.selector-trigger:disabled{opacity:.45;cursor:default}.is-open .selector-arrow{transform:rotate(180deg)}.selector-panel{max-width:0;opacity:0;visibility:hidden;overflow-x:auto;overflow-y:hidden;min-width:0;scrollbar-width:none;transform:translateX(-10px);pointer-events:none;transition:max-width .42s cubic-bezier(.22,1,.36,1),opacity .25s ease,transform .42s cubic-bezier(.22,1,.36,1),visibility 0s .42s}.selector-panel::-webkit-scrollbar{display:none}.instrument-selector .selector-panel{transform:translateX(10px)}.is-open .selector-panel{max-width:356px;opacity:1;visibility:visible;transform:translateX(0);pointer-events:auto;transition:max-width .42s cubic-bezier(.22,1,.36,1),opacity .28s .04s ease,transform .42s cubic-bezier(.22,1,.36,1),visibility 0s}.count-selector.is-open .selector-panel{max-width:218px}.selector-options{display:flex;width:max-content;align-items:center;gap:4px;padding:4px}.quick-controls #instruments{display:flex;flex:none;flex-basis:auto;order:0;width:max-content;gap:3px;margin:0;padding:4px}.selector-options>[data-count]{flex-shrink:0;white-space:nowrap;border:1px solid transparent;background:transparent;color:#96839f;border-radius:17px;padding:7px 10px;font-size:10px;min-width:42px}.selector-options>[data-count]:hover{color:#e2d0ee;background:#b8a1d712}.selector-options>[data-count][aria-pressed=true]{color:#e5d6f5;background:#b8a1d727;border-color:#b8a1d732}.selector-options>[data-count][hidden]{display:none}.quick-controls .instrument{flex-shrink:0;padding:7px 10px;min-height:30px}.quick-controls .instrument .emoji{display:none}.quick-controls .instrument strong{font-size:10px}.quick-controls .instrument-selector .selector-trigger{border-left:1px solid transparent}.instrument-selector.is-open .selector-trigger{border-left-color:#b8a1d722}.count-selector.is-open .selector-trigger{border-right:1px solid #b8a1d722}.focus-mode .quick-controls{opacity:0;pointer-events:none}.focus-mode .quick-controls *{pointer-events:none}.light-mode .quick-selector{background:#b8a1d70b;border-color:#9777ac25}.light-mode .quick-selector.is-open{background:#f0eaf4f2;border-color:#a380ba48}.light-mode .selector-trigger strong{color:#76588b}.light-mode .selector-label{color:#a18caf}.light-mode .selector-arrow{color:#aa91bc}.light-mode .selector-options>[data-count]{color:#aa91ba}.light-mode .selector-options>[data-count]:hover{color:#76588b;background:#d8c7e633}.light-mode .selector-options>[data-count][aria-pressed=true]{color:#79528f;background:#b7a0cb33;border-color:#9975b34f}.light-mode .instrument-selector.is-open .selector-trigger,.light-mode .count-selector.is-open .selector-trigger{border-color:#a380ba2a}.light-mode .selector-trigger:hover{background:#b8a1d70d}
@media(max-width:1050px){header{gap:16px}.quick-controls{gap:8px}.selector-trigger{gap:6px;padding:9px 11px}.quick-controls .instrument{padding:7px 9px}.is-open .selector-panel{max-width:310px}}
@media(max-width:700px){header{gap:12px}.quick-controls{order:3;flex-basis:100%;width:100%;gap:8px;padding-bottom:0}.selector-trigger{padding:8px 11px;gap:7px;min-height:35px}.selector-trigger strong{font-size:10px}.selector-label{font-size:9px}.selector-arrow{font-size:16px}.quick-controls #instruments{order:0;flex-basis:auto;justify-content:flex-start;gap:2px}.is-open .selector-panel{max-width:min(340px,calc(100vw - 254px))}.count-selector.is-open .selector-panel{max-width:min(218px,calc(100vw - 254px))}.quick-controls .instrument{padding:7px 9px;min-height:27px}.quick-controls .instrument strong{font-size:9px}.selector-options>[data-count]{font-size:9px;min-width:37px;padding:7px 8px}.focus-mode .quick-controls{display:none}.instrument-selector .selector-trigger{padding-left:8px}}
@media(prefers-reduced-motion:reduce){.selector-panel,.selector-arrow,.quick-selector{transition:none!important}}

/* Tone selector lives below Record; performance mode is an instrument-only stage. */
.stage-actions{display:grid;grid-template-columns:repeat(3,max-content);gap:9px;align-items:start;justify-items:end;position:relative;z-index:20}.stage-actions #focus{grid-column:1;grid-row:1}.stage-actions #demo{grid-column:2;grid-row:1}.stage-actions #record{grid-column:3;grid-row:1}.stage-actions #exitFocus{display:none}.tone-selector{grid-column:1/-1;grid-row:2;justify-self:end;max-width:min(100%,380px)}.tone-selector[hidden]{display:none!important}.stage-top .tone-selector .selector-trigger{background:none;border:0;border-radius:22px;padding:7px 10px;min-height:30px}.tone-selector .selector-trigger strong{font-size:10px}.tone-selector .selector-label{font-size:9px}.tone-selector .selector-arrow{font-size:15px}.tone-selector .selector-panel{transform:translateX(10px)}.tone-selector.is-open .selector-panel{max-width:230px;transform:translateX(0)}#pianoTones{display:flex;width:max-content;gap:3px;padding:4px}.stage-top #pianoTones button{border:1px solid transparent;padding:6px 11px;border-radius:15px;font-size:10px;white-space:nowrap;background:transparent;color:#a18cad}.stage-top #pianoTones button[aria-pressed=true]{color:#e1cbf3;background:#b8a1d725;border-color:#b8a1d732}.light-mode .stage-top #pianoTones button{color:#a18bad}.light-mode .stage-top #pianoTones button[aria-pressed=true]{color:#77518d;background:#b8a1d72e}.stage-top{align-items:start}.sound-space{min-height:35px;max-height:160px}.keyboard,.keyboard.full-piano{height:270px}.full-piano .white{height:255px}.full-piano .black{height:158px}.bars{height:275px}.bar{height:calc(var(--height)*1.26)}.kalimba{height:275px}.kalimba .bar{max-height:245px}.drums{height:275px}.drum{height:200px}.guitar{padding:12px 26px}.string{height:39px}.guitar:before{width:180px;height:180px;top:33px}.flute-scene{height:280px;display:flex;align-items:center;padding:32px 8px;touch-action:pan-x}.flute-body{width:100%;height:112px;position:relative;border-radius:56px;display:flex;align-items:center;justify-content:space-evenly;gap:15px;padding:0 65px 0 95px;background:repeating-linear-gradient(0deg,#ffffff00 0,#ffffff00 5px,#cfba8710 6px),linear-gradient(#a99062,#d2b47e 25%,#b1935d 51%,#6c512f 92%);border-top:2px solid #dcc69b77;border-bottom:8px solid #4c362aaa;box-shadow:0 15px 35px #0005,inset 13px 0 #4a362766,inset -13px 0 #4a362766}.flute-body:before,.flute-body:after{content:'';width:6px;position:absolute;top:0;bottom:0;background:linear-gradient(#e1cb92,#917340);border-left:1px solid #4b362a;box-shadow:2px 0 3px #24170b66}.flute-body:before{left:55px}.flute-body:after{right:36px}.flute-mouth{position:absolute;width:21px;height:32px;border-radius:50%;left:27px;background:#2c251d;box-shadow:inset 0 3px 8px #0008,0 1px 1px #e0bf84}.flute-hole{flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:2px solid #6b5029;background:#c4a16b;box-shadow:0 2px 3px #f5dba055,inset 0 2px 3px #24170b88;touch-action:pan-x}.hole-inner{display:block;width:28px;height:28px;border-radius:50%;background:#28231d;box-shadow:inset 0 4px 7px #000b,0 1px 1px #e9c88477}.flute-hole small{position:absolute;bottom:-28px;color:#dbcaab;font-size:10px;opacity:0}.show-labels .flute-hole small{opacity:.65}.flute-hole.hit{border-color:#d7e7aa;background:#e0e7b4;box-shadow:0 0 30px #d8eaa766,inset 0 2px 5px #687346}.flute-hole.hit .hole-inner{background:#849455;box-shadow:inset 0 3px 8px #26301a88}.light-mode .flute-body{box-shadow:0 14px 25px #62421f20,inset 13px 0 #4a362733,inset -13px 0 #4a362733}
body.performance-mode{overflow:hidden;min-height:100dvh}.performance-mode header,.performance-mode footer{display:none!important}.performance-mode main{position:fixed;inset:0;width:100%;max-width:none;padding:0;z-index:100;background:var(--paper)}.performance-mode .playground{height:100dvh!important;min-height:0!important;margin:0!important;padding:0!important;width:100%;border:0!important;border-radius:0;display:block;background:var(--paper);backdrop-filter:none;box-shadow:none}.performance-mode .stage-top{display:contents}.performance-mode .instrument-heading,.performance-mode .sound-space,.performance-mode .floating-notes,.performance-mode .piano-nav,.performance-mode .stage-bottom,.performance-mode #focus,.performance-mode #demo,.performance-mode .tone-selector{display:none!important}.performance-mode .stage-actions{position:fixed;top:max(16px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));z-index:110;display:flex;gap:10px;opacity:1}.performance-mode .stage-actions #exitFocus{display:block}.performance-mode .stage-actions button{padding:11px 17px;border-radius:22px;background:#24202ded;border-color:#b8a1d744;color:#cdb9df;box-shadow:0 4px 16px #0002}.performance-mode.light-mode .stage-actions button{background:#faf7f0eb;border-color:#b8a1d755;color:#846595}.performance-mode #surface{position:absolute;inset:0;margin:0;width:100%;height:100dvh;max-width:none;padding:74px 0 0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.performance-mode #surface::-webkit-scrollbar{display:none}.performance-mode .keyboard,.performance-mode .keyboard.full-piano{height:calc(100dvh - 74px);border-radius:0;box-shadow:none}.performance-mode .keyboard .white{height:100%}.performance-mode .full-piano .white{height:calc(100dvh - 89px)}.performance-mode .full-piano .black{height:calc((100dvh - 89px)*.59)}.performance-mode .keyboard,.performance-mode .key{touch-action:pan-x}.performance-mode .bars{height:calc(100dvh - 74px);max-width:none;width:100%;padding:30px 20px;gap:15px}.performance-mode .bar{height:calc(64dvh + var(--height)*.35);max-height:calc(100dvh - 134px);max-width:none;flex:1;min-width:44px}.performance-mode .kalimba{border-radius:0;height:calc(100dvh - 74px);padding-top:0;padding-bottom:50px;align-items:start}.performance-mode .drums{height:calc(100dvh - 74px);grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:18px;padding:20px}.performance-mode .drum{height:100%;transform:none;border-radius:24px}.performance-mode .drum .drum-icon{font-size:50px}.performance-mode .drum b{font-size:18px}.performance-mode .guitar{height:calc(100dvh - 74px);max-width:none;border-radius:0;justify-content:space-around;gap:0;padding:24px 35px}.performance-mode .string{height:calc((100dvh - 130px)/6);font-size:14px}.performance-mode .string:before{height:calc(var(--thickness)*1.7)}.performance-mode .guitar:before{width:min(40vw,60dvh);height:min(40vw,60dvh);top:calc(50% - min(20vw,30dvh));left:55%}.performance-mode .flute-scene{height:calc(100dvh - 74px);padding:30px 20px}.performance-mode .flute-body{height:clamp(150px,30dvh,260px);border-radius:120px}.performance-mode .flute-hole{width:clamp(42px,7vw,82px);height:clamp(42px,7vw,82px)}.performance-mode .hole-inner{width:67%;height:67%}.performance-mode .flute-mouth{height:45px;width:29px}.performance-mode #toast{display:none}.performance-mode .selector-panel{display:none}
@media(max-height:820px){.keyboard,.keyboard.full-piano{height:245px}.full-piano .white{height:230px}.full-piano .black{height:143px}.sound-space{min-height:20px;max-height:110px}.bars,.kalimba,.drums,.flute-scene{height:245px}.bar{height:calc(var(--height)*1.14)}.drum{height:175px}}
@media(max-width:700px){.stage-actions{gap:6px}.stage-top .stage-actions button{padding:7px 9px;font-size:9px}.tone-selector.is-open .selector-panel{max-width:200px}.stage-top #pianoTones button{font-size:9px;padding:6px 8px}.tone-selector .selector-trigger strong{font-size:9px}.tone-selector .selector-trigger .selector-label{font-size:8px}.tone-selector{max-width:min(310px,calc(100vw - 80px))}.stage-top .tone-selector .selector-trigger{padding:6px 9px}.keyboard,.keyboard.full-piano{height:240px}.full-piano .white{height:225px}.full-piano .black{height:139px}.bars,.kalimba,.drums,.flute-scene{height:250px}.drum{height:110px}.guitar{padding:8px 10px}.string{height:37px}.guitar:before{width:142px;height:142px;top:47px}.flute-body{height:100px}.performance-mode .stage-actions{top:14px;right:14px}.performance-mode .stage-top .stage-actions button{padding:10px 15px;font-size:12px}.performance-mode .keyboard,.performance-mode .keyboard.full-piano{height:calc(100dvh - 74px)}.performance-mode .full-piano .white{height:calc(100dvh - 89px)}.performance-mode .full-piano .black{height:calc((100dvh - 89px)*.59)}.performance-mode .bars,.performance-mode .kalimba,.performance-mode .drums,.performance-mode .guitar,.performance-mode .flute-scene{height:calc(100dvh - 74px)}.performance-mode .drum{height:100%}.performance-mode .bar{height:calc(64dvh + var(--height)*.35)}.performance-mode .kalimba .bar{max-height:calc(100dvh - 134px)}.performance-mode .string{height:calc((100dvh - 130px)/6)}.performance-mode .guitar:before{width:min(40vw,60dvh);height:min(40vw,60dvh);top:calc(50% - min(20vw,30dvh))}.performance-mode .flute-body{height:clamp(150px,30dvh,260px)}}

body.light-mode{--paper:#f5f3ef}

/* Fit the complete instrument into immersive view, including all 88 piano keys. */
.icon-button svg{display:block;width:17px;height:17px;margin:auto;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.stage-actions{display:flex;align-items:center;gap:9px}.tone-selector{grid-column:auto;grid-row:auto;max-width:min(380px,calc(100vw - 130px));margin:0}.stage-top .tone-selector .selector-trigger{min-height:33px;padding:8px 10px}.tone-selector.is-open .selector-panel{max-width:200px}.stage-top .tone-selector .selector-trigger strong{font-size:10px}.stage-top .tone-selector .selector-trigger .selector-label{font-size:9px}.keyboard.full-piano{--piano-inset:12px;--piano-gap:2px;isolation:isolate}.full-piano .white{width:calc((100% - var(--piano-inset)*2)/52 - var(--piano-gap));z-index:1}.full-piano .black{width:calc((100% - var(--piano-inset)*2)/52*.62);z-index:2}.key{pointer-events:auto}.full-piano .key{margin:0;min-width:0;padding-left:0;padding-right:0}.performance-mode #surface{padding:76px 12px 14px;overflow:hidden}.performance-mode #surface>.keyboard,.performance-mode #surface>.bars,.performance-mode #surface>.flute-scene{width:100%!important;min-width:0!important;max-width:100%!important}.performance-mode .keyboard.full-piano{--piano-inset:2px;--piano-gap:1px;min-width:0!important;width:100%!important;height:min(62dvh,calc(100dvh - 115px));margin-top:max(0px,calc((100dvh - 100px - min(62dvh,100dvh - 115px))/2));background:#24212c;border-radius:7px;padding:10px 2px 0;overflow:hidden}.performance-mode .full-piano .key{top:10px}.performance-mode .full-piano .white{width:calc((100% - var(--piano-inset)*2)/52 - var(--piano-gap));height:calc(100% - 10px);border-bottom-width:3px;border-radius:0 0 3px 3px}.performance-mode .full-piano .black{width:calc((100% - var(--piano-inset)*2)/52*.62);height:60%;border-bottom-width:3px;border-radius:0 0 2px 2px}.performance-mode .full-piano .key b,.performance-mode .full-piano .key small{font-size:clamp(4px,.6vw,9px);max-width:100%;overflow:hidden}.performance-mode .keyboard:not(.full-piano){--key-inset:12px;height:min(65dvh,calc(100dvh - 115px));min-width:0!important;margin-top:max(0px,calc((100dvh - 100px - min(65dvh,100dvh - 115px))/2))}.performance-mode .bars{min-width:0!important;gap:clamp(2px,1vw,15px);padding:20px 5px;height:calc(100dvh - 100px)}.performance-mode .bar{min-width:0;max-width:none;width:auto;flex:1;padding-left:0;padding-right:0}.performance-mode .bar b{font-size:clamp(8px,1.8vw,17px)}.performance-mode .kalimba{min-width:0!important;border-width:clamp(3px,1vw,8px)}.performance-mode .flute-scene{min-width:0!important;padding:20px 0;height:calc(100dvh - 100px)}.performance-mode .flute-body{min-width:0;gap:clamp(1px,1vw,15px);padding-left:clamp(24px,7vw,95px);padding-right:clamp(12px,4vw,65px);height:clamp(100px,25dvh,230px)}.performance-mode .flute-hole{width:calc((100vw - 160px)/var(--note-count,8)*.65);height:auto;aspect-ratio:1;max-width:82px;min-width:0;flex:0 1 auto}.performance-mode .flute-mouth{left:clamp(5px,2vw,27px);width:clamp(9px,2vw,26px);height:clamp(20px,4vw,45px)}.performance-mode .flute-body:before{left:clamp(16px,4vw,55px)}.performance-mode .flute-body:after{right:clamp(7px,2vw,36px)}.performance-mode .drums{width:100%;max-width:100%;padding:8px;height:calc(100dvh - 100px)}.performance-mode .guitar{min-width:0;width:100%;height:calc(100dvh - 100px)}.performance-mode .string{min-width:0}.performance-mode .stage-actions{display:flex}.performance-mode .stage-actions #exitFocus{display:block}
@media(max-width:700px){.stage-actions{gap:6px}.stage-top .tone-selector .selector-trigger{padding:7px 8px;min-height:29px}.stage-top .tone-selector .selector-trigger strong{font-size:9px}.stage-top .tone-selector .selector-trigger .selector-label{font-size:8px}.tone-selector.is-open .selector-panel{max-width:min(190px,calc(100vw - 260px))}.stage-top #pianoTones button{padding:6px 7px}.performance-mode #surface{padding:72px 5px 10px}.performance-mode .keyboard.full-piano{--piano-inset:1px;--piano-gap:.5px}.performance-mode .full-piano .white{border-bottom-width:2px;border-radius:0 0 1px 1px}.performance-mode .full-piano .black{border-bottom-width:2px;border-radius:0 0 1px 1px}.performance-mode .full-piano .middle-c b{opacity:0}.performance-mode .bars{gap:3px}.performance-mode .flute-hole{width:calc((100vw - 75px)/var(--note-count,8)*.65)}.performance-mode .flute-body{border-bottom-width:4px}}

.keyboard-playing .full-piano .key-mapped small{opacity:.85}.keyboard-playing .full-piano .key-mapped.white{background:linear-gradient(#fff,#eee8fb)}.keyboard-playing .full-piano .key-mapped.black{box-shadow:inset 0 -3px 0 #9b86bb}

/* Physical materials, quiet stage, and feedback at the point of touch. */
.sound-space{flex:0 0 44px;min-height:44px;height:44px;max-height:44px;margin:10px 0 0}.space-dot{display:none}
.keyboard{background:linear-gradient(110deg,#393339,#17161c 65%,#3b3031);border-top:3px solid #746064;border-left:2px solid #4c3c3e;border-right:2px solid #211d22;box-shadow:0 7px 0 #17151b,0 18px 32px #0003,inset 0 3px 8px #0009}
.keyboard:before{content:'';position:absolute;left:0;right:0;top:9px;height:3px;background:#6d303e;z-index:3;pointer-events:none}
.key.white{background:linear-gradient(90deg,#e8e4dd 0%,#fffdf8 12%,#f5f1e9 88%,#d3cfc8 100%);border-bottom-color:#bdb6ac;box-shadow:inset 0 10px 12px #00000012,0 2px 2px #0003}
.key.black{background:linear-gradient(90deg,#15141b 0%,#4c4751 18%,#25232c 72%,#101015 100%);border-bottom-color:#0c0b10;box-shadow:3px 6px 5px #0005,inset 0 1px 1px #ffffff29}
.full-piano .middle-c{background:linear-gradient(90deg,#c9bbd6,#eee4f4 18%,#dfd1e9 85%,#baa9ca)}
.full-piano .white,.full-piano .black{transition:background .08s,filter .08s,box-shadow .08s}
#surface button{touch-action:none;-webkit-user-select:none;user-select:none}
#surface button>*{pointer-events:none}
#surface .key.white:is(.pressed,.hit){background:linear-gradient(90deg,#baa1ce,#ecddfa 22%,#d5b8e9 80%,#ad94bf);box-shadow:inset 0 10px 18px #35213a33,0 0 20px #bd9bea44;border-bottom-width:2px;transform:translateY(2px)}
#surface .key.black:is(.pressed,.hit){background:linear-gradient(90deg,#4d345f,#b998ce 24%,#72518d 80%,#392445);box-shadow:inset 0 4px 7px #0005,0 0 18px #bc91e366;transform:translateY(2px)}
.bars:not(.kalimba){position:relative;border-radius:22px;background:linear-gradient(0deg,transparent 26%,#473432 26%,#77594c 29%,transparent 29%,transparent 72%,#473432 72%,#77594c 75%,transparent 75%)}
.bar{border-radius:9px;background:linear-gradient(90deg,#0000001c,transparent 15%,#ffffff22 45%,transparent 82%,#00000024),var(--bar);border-top:2px solid #ffffff55;border-left:1px solid #ffffff33;box-shadow:0 6px 0 color-mix(in srgb,var(--bar),#21161c 35%),0 11px 14px #0003}
.bar:before,.bar:after{content:'';position:absolute;left:50%;width:6px;height:6px;transform:translateX(-50%);border-radius:50%;background:#4b3d36;box-shadow:inset 0 1px 2px #0009,0 1px 1px #fff6}.bar:before{top:14%}.bar:after{bottom:18%}
.kalimba{background:radial-gradient(ellipse at 50% 75%,#33231a 0 13%,#a77b4a 13.5% 15%,transparent 15.5%),repeating-linear-gradient(92deg,#0000 0 7px,#633a1b10 8px 9px),linear-gradient(100deg,#a57142,#d8ad70 46%,#a16b37);border-color:#825732;box-shadow:0 8px 0 #593a26,0 18px 28px #0003,inset 0 2px 2px #ffe9b877}
.kalimba:before{content:'';left:5%;right:5%;top:11px;bottom:auto;height:9px;background:linear-gradient(#d5c8b2,#6d6256,#c4b7a5);box-shadow:0 3px 3px #0008;z-index:2;border-radius:3px}
.kalimba .bar{background:linear-gradient(90deg,#827d78,#f1eee6 23%,#d5d2c9 67%,#96908a);box-shadow:2px 6px 4px #27180a66,inset 0 -4px 3px #fff5}.kalimba .bar:after{display:none}
.guitar{border:8px solid #855631;border-radius:38px;background:repeating-linear-gradient(3deg,#0000 0 8px,#6b3c1812 9px 10px),linear-gradient(115deg,#b47c40,#e2b97c 42%,#b17b42);box-shadow:inset 0 0 0 2px #e9c799,inset 0 0 25px #57351d44,0 8px 0 #58371f,0 18px 30px #0003}
.guitar:before{background:radial-gradient(circle,#171616 0 62%,#382b23 64% 71%,#b08a59 72% 75%,#372419 76%);border:5px solid #9a693d;outline:2px solid #dfbe88;box-shadow:inset 0 4px 12px #0009}
.guitar:after{content:'';position:absolute;inset:12px 62% 12px 7%;border-radius:5px;background:repeating-linear-gradient(90deg,transparent 0 33px,#c8b99a 34px 36px),linear-gradient(0deg,#35251f,#654533);box-shadow:inset 0 0 12px #0005;pointer-events:none}
.string{z-index:1}.string:before{left:5px;right:5px;background:linear-gradient(#f4e8ce,#a99a7b 50%,#e8d5ae);box-shadow:0 3px 3px #211407aa}.string span{background:#34251b80;color:#f3e7cf;border:1px solid #f2dbac22}
.drums{gap:clamp(8px,1.6vw,22px)}.drum{border-radius:50%;aspect-ratio:1;height:auto!important;max-height:100%;border:6px solid #68636a;background:radial-gradient(circle at 40% 35%,#ffffff1c,#00000028 72%),repeating-radial-gradient(circle,#0000 0 4px,#ffffff06 5px 6px),color-mix(in srgb,var(--bar),#26222b 62%);box-shadow:inset 0 0 0 2px #b6a9b5,inset 0 0 0 7px #24212c88,inset 0 0 22px #0006,0 6px 0 #2b2730,0 15px 22px #0004;color:#eee0ed;gap:6px}
.drum .drum-icon{font-size:26px;color:color-mix(in srgb,var(--bar),white 35%);opacity:.8}.drum b{font-size:11px}.drum small{color:#e4d5e0;opacity:.6}
.flute-body{background:repeating-linear-gradient(1deg,transparent 0 4px,#37291314 5px 6px),linear-gradient(#b49a60,#e8cb8b 23%,#ba9857 52%,#78582d 89%,#48351e);box-shadow:0 15px 22px #0004,inset 12px 0 #513c2555,inset -12px 0 #513c2555,inset 0 2px 2px #fff7;border-bottom-color:#4d341e;border-top-color:#f3dcaa}
.hole-inner{width:68%;height:68%;background:radial-gradient(ellipse at 50% 70%,#46331f,#13110d 75%)}
#surface .bar:is(.pressed,.hit){transform:translateY(4px);filter:brightness(1.18);box-shadow:0 2px 0 color-mix(in srgb,var(--bar),#21161c 35%),0 0 22px color-mix(in srgb,var(--bar),transparent 65%)}
#surface .drum:is(.pressed,.hit){translate:0 3px;filter:brightness(1.24);border-color:var(--bar);box-shadow:inset 0 0 0 2px #ded0e0,inset 0 0 26px color-mix(in srgb,var(--bar),transparent 55%),0 2px 0 #29242c,0 0 24px color-mix(in srgb,var(--bar),transparent 60%)}
#surface .string:is(.pressed,.hit):before{background:#fff1ca;animation:vibrate .09s 4;box-shadow:0 0 10px #f5d69999}
#surface .flute-hole:is(.pressed,.hit){background:#e2d9a4;border-color:#f2e9ba;box-shadow:inset 0 2px 4px #0006,0 0 24px #cfdaa655}#surface .flute-hole:is(.pressed,.hit) .hole-inner{background:radial-gradient(#a2b26e,#3c4d28)}
@media(hover:hover){#surface button:hover:not(.pressed):not(.hit){filter:brightness(1.08)}}
.performance-mode #surface:has(.full-piano){padding:0;display:flex;align-items:center;justify-content:center}
.performance-mode #surface>.keyboard.full-piano{width:96%!important;max-width:96%!important;height:40dvh;margin:0;padding:15px 2px 0;border-radius:10px 10px 5px 5px;box-shadow:0 7px 0 #15131a,0 22px 45px #0003;overflow:hidden}
.performance-mode .full-piano .key{top:15px}.performance-mode .full-piano .white{height:calc(100% - 15px)}.performance-mode .full-piano .black{height:59%}.performance-mode .full-piano .key b,.performance-mode .full-piano .key small{font-size:clamp(5px,.65vw,10px)}
@media(max-height:420px){.performance-mode #surface:has(.full-piano){padding-top:48px}.performance-mode #surface>.keyboard.full-piano{height:40dvh}}
@media(prefers-reduced-motion:reduce){#surface button,#surface button:before{animation:none!important;transition:none!important}}