@charset "UTF-8";:root{font-family:Hiragino Maru Gothic ProN,Yu Gothic,Meiryo,sans-serif;color:#55433c;background:#fff9ef;font-synthesis:none;--paper:#fff9ef;--ink:#55433c;--muted:#9b897b;--line:#ded2c2;--coral:#cf705e;--pink:#f6dace;--green:#879c7b;--skin:#f6b39e;--pants:#ef9d86}*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.38}button,a,input{outline-offset:5px}button:focus-visible,a:focus-visible{outline:3px solid #6b8c83}button{touch-action:manipulation}svg{width:20px;height:20px;flex-shrink:0}button svg{pointer-events:none}a{color:inherit;text-decoration:none}.wrap{width:min(1160px,calc(100% - 96px));margin:auto}.site-header{height:113px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;font-weight:800;font-size:21px;letter-spacing:2px}.brand small{display:block;font-size:8px;font-weight:600;letter-spacing:2.4px;margin-top:6px}.brand-mark{display:flex;width:47px;height:49px;align-items:center;border:1.5px solid var(--ink);border-radius:15px;background:#f6dfd1;transform:rotate(-7deg)}.brand-mark svg{width:47px;height:47px;--pants:#87a397}.help-button{display:flex;align-items:center;gap:8px;background:none;border:none;font-size:12px;font-weight:600;padding:10px 0 10px 12px}.help-button:hover{color:var(--coral)}.intro{min-height:263px;display:flex;justify-content:space-between;align-items:center;padding:33px 10px 32px 4px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.6px;display:flex;align-items:center;gap:8px}.eyebrow span{width:6px;height:6px;background:var(--coral);border-radius:50%}h1{font-size:clamp(34px,4.1vw,51px);margin:17px 0 13px;letter-spacing:2px;line-height:1.35;font-weight:900}.title-dot{color:var(--coral)}.intro p{font-size:12px;letter-spacing:1px;line-height:2;margin:0;color:#927e70}.mobile-break{display:none}.hero-art{width:300px;height:195px;position:relative;margin-right:20px;--pants:#90a49c}.hero-butt{position:absolute;width:151px;height:151px;left:80px;top:27px;transform:rotate(-7deg);z-index:2}.hero-butt svg{width:100%;height:100%}.hero-ground{position:absolute;bottom:22px;left:80px;width:150px;height:11px;border-radius:50%;background:#ebdfcc}.hero-note{position:absolute;font-family:Georgia,serif;font-weight:400;color:#879c7b}.note-a{font-size:35px;left:40px;top:56px;transform:rotate(-15deg)}.note-b{font-size:27px;right:22px;top:107px;transform:rotate(12deg);color:#c88c72}.speech{position:absolute;font-size:11px;letter-spacing:1px;right:15px;top:0;background:#fffdf6;padding:10px 17px;border:1px solid #d9ccb8;border-radius:50%;transform:rotate(6deg)}.speech:after{content:"";position:absolute;left:24px;bottom:-6px;width:8px;height:10px;background:#fffdf6;border-left:1px solid #d9ccb8;transform:skew(-28deg)}.hero-puff{position:absolute;font-size:13px;letter-spacing:1px;left:19px;top:134px;transform:rotate(-13deg);color:#bc8b6c}.studio{border:1.5px solid #766050;border-radius:15px;background:#fffcf5;box-shadow:0 5px #e5d8c4;overflow:hidden}.studio-top{height:48px;padding:0 25px;display:flex;justify-content:space-between;align-items:center;background:#f4eddf;border-bottom:1px solid #e0d3c1}.studio-label{font-size:10px;letter-spacing:2.2px;font-weight:700;display:flex;align-items:center;gap:9px}.live-dot{height:7px;width:7px;border-radius:50%;background:#94a780;box-shadow:0 0 0 3px #94a78019}.studio-number{font-size:9px;letter-spacing:1px;color:#a79987;margin-left:6px}.volume-control{display:flex;align-items:center;gap:10px}.volume-control svg{width:16px;height:16px}.volume-control input{width:90px;accent-color:#8e9d7d;height:4px;cursor:pointer}.volume-control span{font-size:10px;color:#8c806f;width:28px;font-variant-numeric:tabular-nums}.instrument-bar{display:flex;justify-content:space-between;align-items:center;padding:23px 25px 19px;gap:15px}.instrument-choice{display:flex;align-items:center;gap:18px}.field-label{font-size:11px;font-weight:700;white-space:nowrap}.timbres{display:flex;gap:7px}.timbre{display:flex;align-items:center;gap:6px;border:1px solid #e4d9c9;border-radius:8px;background:transparent;padding:9px 12px;transition:background .15s,box-shadow .15s}.timbre.selected{border-color:#cd836b;background:#fbeddf;box-shadow:0 2px #e2b59c}.timbre:hover{background:#fbeddf}.timbre strong{font-size:12px;white-space:nowrap}.timbre small{font-size:9px;color:#9e8976;white-space:nowrap}.timbre-dot{width:9px;height:9px;border-radius:50%;border:1px solid #55433c30}.demo-button{display:flex;gap:6px;align-items:center;white-space:nowrap;border:none;background:none;font-size:10px;color:#8e7c6c;padding:9px 0}.demo-button:hover{color:var(--coral)}.demo-button svg{width:16px;height:16px}.performance-strip{margin:0 25px 21px;min-height:89px;position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border:1px solid #e6d9c9;border-radius:9px;background:#f6f1e5;overflow:hidden}.performance-title{z-index:1;display:flex;flex-direction:column;gap:10px}.tiny-heading{font-family:monospace;font-size:8px;letter-spacing:1.8px;color:#a39079}#now-note{font-size:12px;font-weight:600;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#stage{position:absolute;left:39%;right:15%;top:0;height:100%;opacity:.8}#stage canvas{display:block}.polyphony{z-index:1;display:flex;flex-direction:column;text-align:center;padding-left:19px;border-left:1px solid #ddcfbc}.polyphony strong{font-family:Georgia,serif;font-weight:400;font-size:28px;line-height:1}.polyphony span{font-family:monospace;font-size:7px;letter-spacing:1px;margin-top:6px;color:#a39079}.keyboard-area{display:flex;padding:0 25px;gap:0;user-select:none;-webkit-user-select:none;touch-action:none;--skin:#f4baa5}.octave-group{width:46.66666%;min-width:0}.octave-group:nth-child(2){width:53.33333%}.octave-label{font-family:monospace;font-size:8px;letter-spacing:1.8px;color:#b49d85;margin-bottom:9px;display:flex;gap:12px}.octave-label span{letter-spacing:1px;color:#baa994}.octave-group:nth-child(2) .octave-label{padding-left:13px}.octave-keys{position:relative;height:237px;display:flex;isolation:isolate}.piano-key{-moz-appearance:none;appearance:none;-webkit-appearance:none;border-radius:0 0 11px 11px;padding:0;position:relative;-webkit-user-select:none;user-select:none;touch-action:none;display:flex;align-items:center;flex-direction:column;transition:background .08s,box-shadow .08s;overflow:hidden}.white-key{width:calc(100% / var(--white-count));height:233px;border:1px solid #d1c1aa;border-bottom:5px solid #d1bea5;background:linear-gradient(100deg,#fffdf7,#fffaf0);margin-right:-1px;z-index:1;box-shadow:inset 0 -5px #f3e9d7}.white-key:hover{background:#fff0db}.key-person{width:90%;max-width:74px;position:absolute;top:105px;pointer-events:none;transition:transform .12s}.key-person svg{width:100%;height:auto;display:block}.white-key .note-name{position:absolute;bottom:31px;font-size:12px;font-weight:700;line-height:1.5}.note-name small{display:block;font-family:monospace;font-size:8px;letter-spacing:.4px;font-weight:400;color:#b09c87}.piano-key kbd{position:absolute;font-family:monospace;font-size:10px;bottom:9px;color:#ab9a88;background:#f1e8d9;border-radius:3px;padding:1px 4px;line-height:1.3}.black-key{position:absolute;left:calc((100% / var(--white-count)) * var(--position));transform:translate(-50%);top:0;z-index:3;width:calc(100% / var(--white-count) * .61);height:139px;border:1px solid #57443d;border-bottom:5px solid #43352f;background:linear-gradient(100deg,#6b5750,#51413b);box-shadow:inset 0 -3px #7d6358,2px 3px 3px #55433c14;color:#fff7e9;border-radius:0 0 8px 8px;--skin:#b78e7e;--ink:#422f2b;--pants:#c5b18a}.black-key:hover{background:#7a6054}.black-key .key-person{top:28px;width:100%;max-width:46px}.black-key .note-name{position:absolute;bottom:22px;font-size:9px;font-weight:700;line-height:1.2}.black-key kbd{bottom:5px;font-size:8px;padding:1px 3px;color:#d1bbae;background:#ffffff10}.key-puff{position:absolute;top:85px;left:40%;font-size:12px;color:#bd735d;opacity:0;pointer-events:none}.black-key .key-puff{top:12px;color:#f6d59f}.piano-key.pressed{background:#f1c4a9;box-shadow:inset 0 4px 8px #ab725f20;border-bottom-width:2px;transform:translateY(3px);height:230px}.piano-key.pressed .key-person{transform:translateY(-5px) scale(1.06) rotate(-6deg)}.piano-key.pressed .key-puff{opacity:1;transform:translateY(-9px);transition:transform .15s}.black-key.pressed{background:#9c6c59;transform:translate(-50%,3px);height:136px}.piano-key.next-note:after{content:"";position:absolute;bottom:67px;width:8px;height:8px;border-radius:50%;background:#76936b;box-shadow:0 0 0 4px #7d9c6826}.black-key.next-note:after{bottom:48px;background:#c9e0a5}.keyboard-caption{display:flex;justify-content:space-between;gap:10px;padding:15px 25px 20px;font-size:9px;color:#a18a75;letter-spacing:.3px}.keyboard-caption span{display:flex;align-items:center;gap:5px}.keyboard-caption svg{width:13px;height:13px}.mobile-tip{display:none!important}.recording-panel{margin-top:32px;border:1px solid #dccfbe;border-radius:12px;padding:22px 25px 16px;background:#fffcf680}.recording-header{display:flex;justify-content:space-between;align-items:center}.section-index{font-family:monospace;font-size:8px;letter-spacing:1.7px;color:#a08a76}.recording-header h2{font-size:16px;letter-spacing:.7px;margin:7px 0 0}.status-pill{border:1px solid #d6ddc9;color:#83916f;background:#f1f3e9;border-radius:5px;padding:5px 9px;font-size:9px}.status-pill.is-recording{color:#be6252;background:#f9e2d7;border-color:#e6b29d}.recorder-body{display:flex;align-items:center;gap:22px;margin-top:20px}.transport{display:flex;align-items:center;gap:10px;flex-shrink:0}.record-button{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;font-weight:700;background:#cf7563;border:1px solid #b65f50;border-radius:7px;padding:12px 16px;box-shadow:0 2px #ad5e4d;color:#fff9ef;white-space:nowrap}.record-button:hover{background:#bb6858}.record-dot{width:9px;height:9px;border-radius:50%;background:#fff3df}.recording .record-dot{border-radius:1px;animation:blink 1s infinite}.square-button{display:flex;justify-content:center;align-items:center;width:40px;height:39px;background:#fffaf0;border:1px solid #dacebd;border-radius:7px}.square-button svg{width:16px;height:16px}.square-button:hover:not(:disabled){background:#f1e8d8}.time{font-family:monospace;font-size:16px;white-space:nowrap;margin-left:2px;font-variant-numeric:tabular-nums}.time small{font-size:9px;color:#b5a28c}.timeline{height:45px;flex:1;min-width:60px;border-top:1px solid #e2d7c7;border-bottom:1px solid #e2d7c7;background:repeating-linear-gradient(90deg,transparent,transparent calc(12.5% - 1px),#e7dece55 calc(12.5% - 1px),#e7dece55 12.5%);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.timeline:after{content:"";position:absolute;top:50%;left:0;width:100%;height:1px;background:#e7dece70;pointer-events:none}.timeline>span{font-size:9px;color:#b29d86;background:#fffcf6;padding:0 8px;z-index:1}.timeline-note{display:block;position:absolute;height:3px;border-radius:1px;min-width:3px}.save-actions{display:flex;gap:10px;align-items:center}.download-button{display:flex;align-items:center;gap:6px;border:1px solid #d6c8b7;border-radius:7px;background:#fffaf0;padding:10px 12px;white-space:nowrap;font-size:10px;font-weight:600}.download-button svg{width:15px;height:15px}.download-button:hover:not(:disabled){background:#efe8d7}.delete-button{border:0;background:transparent;padding:7px;color:#9a806c}.delete-button svg{width:15px;height:15px}.recorder-note{font-size:9px;color:#a5907a;display:flex;align-items:center;gap:5px;margin:16px 0 0}.recorder-note svg{width:12px;height:12px}.recorder-note>span{margin-left:auto}.challenge-panel{position:relative;margin-top:24px;display:flex;align-items:center;gap:16px;padding:23px 25px;border:1px dashed #cecfb4;background:#f2f1e580;border-radius:12px}.challenge-icon{width:43px;height:43px;border-radius:50%;display:flex;justify-content:center;align-items:center;background:#e6ead9;color:#8b9974;transform:rotate(-10deg)}.challenge-copy{flex:1}.challenge-copy .section-index{color:#8e9b78}.challenge-copy h2{font-size:14px;margin:5px 0 6px}.challenge-copy p{margin:0;font-size:10px;color:#a18e78}.challenge-button{background:none;border:1px solid #c6ccb2;padding:10px 15px;border-radius:7px;font-size:10px;white-space:nowrap;color:#7b876b;font-weight:600}.challenge-button:hover{background:#e5ead8}.challenge-button span{margin-left:17px}#challenge-progress{font-family:monospace;font-size:10px;color:#8b9974}footer{display:flex;align-items:center;justify-content:space-between;padding:35px 3px 30px;color:#b39c85;font-size:9px;letter-spacing:.5px}footer>span:last-child{font-family:monospace;font-size:8px;letter-spacing:1.3px}.footer-star{font-size:18px;margin-left:14px;color:#bf9279;vertical-align:middle}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}#playhead{display:none;position:absolute;left:0;top:0;bottom:0;width:2px;background:#ba705c;z-index:3}dialog{max-width:560px;width:calc(100% - 32px);border:1.5px solid #9d8370;border-radius:15px;background:#fffbf2;color:var(--ink);padding:25px;box-shadow:0 10px 50px #372a3326}dialog::backdrop{background:#493d3666;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}dialog h2{font-size:24px;margin:9px 0 20px}dialog p{font-size:12px;line-height:2;color:#8f7a69}.dialog-heading{display:flex;align-items:center;justify-content:space-between}.dialog-heading button{border:none;background:transparent;width:28px;height:28px}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:20px 0}.help-grid>div{border:1px solid #e1d2bc;padding:13px;border-radius:7px;background:#f6f0e2}.help-grid strong{font-size:11px}.help-grid p{font-family:monospace;font-size:11px;margin-bottom:0}.help-footnote{border-top:1px solid #e1d2bc;padding-top:12px;font-size:10px!important}dialog>.record-button{margin-top:18px;width:100%}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,10px);width:max-content;max-width:calc(100% - 32px);z-index:20;background:#5c493e;color:#fff6e6;padding:13px 19px;border-radius:9px;box-shadow:0 4px 14px #33231f22;font-size:11px;line-height:1.6;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}#toast.visible{opacity:1;transform:translate(-50%)}@keyframes blink{50%{opacity:.4}}@media(min-width:1400px){.intro{min-height:285px}.octave-keys{height:252px}.white-key{height:248px}.white-key .key-person{top:115px}.piano-key.pressed{height:245px}.black-key{height:148px}.black-key.pressed{height:145px}.black-key .key-person{top:34px}}@media(max-width:1100px){.wrap{width:calc(100% - 48px)}.timbre{padding:8px 10px}.timbre small{display:none}.instrument-choice{gap:13px}.hero-art{margin-right:0}.recorder-body{gap:15px}.time{font-size:14px}.time small{display:none}.save-actions{gap:4px}.key-person{top:111px}.white-key .note-name{font-size:11px}.black-key .note-name{font-size:8px}}@media(max-width:760px){.wrap{width:calc(100% - 32px)}.site-header{height:89px}.brand{font-size:18px;gap:9px;letter-spacing:1px}.brand small{font-size:7px;letter-spacing:1.6px}.brand-mark{width:40px;height:43px}.brand-mark svg{width:40px;height:40px}.help-button{font-size:10px}.help-button svg{width:17px;height:17px}.intro{min-height:237px;padding:25px 0}.eyebrow{font-size:9px;letter-spacing:.6px}h1{font-size:35px;letter-spacing:1px;margin:14px 0 12px}.intro p{font-size:10px;letter-spacing:0}.hero-art{width:180px;flex-shrink:0;height:167px;transform:scale(.9);transform-origin:right center;margin-left:-15px}.hero-butt{width:126px;height:126px;left:35px;top:28px}.hero-ground{left:33px;width:125px;bottom:14px}.speech{font-size:9px;padding:9px 12px;right:-5px;top:0;white-space:nowrap}.note-a{left:0;top:48px;font-size:27px}.note-b{right:-4px;top:105px;font-size:23px}.hero-puff{left:-13px;top:120px;font-size:11px}.studio-top{padding:0 15px;height:43px}.studio-label{font-size:9px;letter-spacing:1.5px}.studio-number{display:none}.instrument-bar{padding:18px 15px 14px;align-items:flex-start}.instrument-choice{display:block}.field-label{display:block;font-size:10px;margin-bottom:9px}.timbres{gap:5px}.timbre{padding:8px 10px}.timbre strong{font-size:11px}.demo-button{font-size:9px;margin-top:24px}.demo-button svg{width:13px;height:13px}.performance-strip{margin:0 15px 20px;min-height:75px;padding:0 15px}.tiny-heading{font-size:7px;letter-spacing:1.3px}#now-note{font-size:10px;max-width:240px}.polyphony strong{font-size:25px}.keyboard-area{padding:0 15px;display:block}.octave-group,.octave-group:nth-child(2){width:100%}.octave-group+.octave-group{margin-top:20px}.octave-label{font-size:8px;margin-bottom:8px}.octave-group:nth-child(2) .octave-label{padding-left:0}.octave-keys{height:206px}.white-key{height:202px}.piano-key.pressed{height:199px}.key-person{top:78px;width:93%;max-width:68px}.white-key .note-name{bottom:30px;font-size:12px}.black-key{height:117px;width:calc(100% / var(--white-count) * .66)}.black-key.pressed{height:114px}.black-key .key-person{top:18px;max-width:46px}.black-key .note-name{bottom:13px;font-size:9px}.piano-key kbd{font-size:9px}.black-key kbd{display:none}.key-puff{top:67px}.black-key .key-puff{top:5px}.keyboard-caption{font-size:9px;padding:14px 15px 17px}.desktop-tip{display:none!important}.mobile-tip{display:flex!important}.recording-panel{margin-top:26px;padding:20px 18px 15px}.recording-header h2{font-size:14px}.status-pill{font-size:8px;padding:5px 6px}.recorder-body{flex-wrap:wrap;gap:15px 10px;margin-top:17px}.transport{flex:1}.record-button{font-size:10px;padding:12px 13px}.time{font-size:16px;margin-left:4px}.timeline{order:3;flex-basis:100%;height:49px}.recorder-note{font-size:8px;flex-wrap:wrap;line-height:1.7;margin-top:12px}.recorder-note>span{display:none}.download-button{font-size:9px;padding:10px}.delete-button{padding:6px}.challenge-panel{padding:20px 18px;flex-wrap:wrap;gap:12px}.challenge-icon{width:35px;height:35px}.challenge-copy h2{font-size:12px}.challenge-copy p{font-size:9px;line-height:1.8}.challenge-button{margin-left:47px;padding:10px 13px;font-size:9px}.challenge-copy .section-index{font-size:7px}.challenge-copy{flex-basis:calc(100% - 47px)}#challenge-progress{margin-left:auto}footer{padding-top:28px;font-size:8px}footer>span:last-child{font-size:6px;letter-spacing:.7px}.footer-star{margin-left:5px;font-size:15px}}@media(max-width:480px){.wrap{width:calc(100% - 24px)}.site-header{height:82px}.brand{font-size:16px;letter-spacing:1px}.brand small{font-size:6px;letter-spacing:1.3px}.help-button span{display:none}.help-button{padding:12px}.intro{min-height:250px;padding:26px 3px 28px}.intro-copy{z-index:1}.eyebrow{font-size:8px;letter-spacing:.3px;gap:6px}h1{font-size:36px;line-height:1.4;margin:15px 0 11px}.mobile-break{display:block}.intro p{font-size:9px;line-height:1.9;letter-spacing:.3px}.hero-art{width:142px;height:170px;margin-left:-35px;transform:scale(.84);margin-right:0;margin-top:35px}.hero-butt{left:8px;width:125px;height:125px;top:29px}.hero-ground{left:9px;bottom:15px;width:125px}.speech{right:-8px;top:0;font-size:9px}.note-a{left:-12px;top:42px;font-size:24px}.note-b{right:-8px;top:113px;font-size:22px}.hero-puff{left:-19px;top:129px;font-size:11px}.studio{border-radius:12px}.studio-top{padding:0 12px}.volume-control{gap:7px}.volume-control input{width:65px}.volume-control span{font-size:9px}.instrument-bar{padding:16px 12px 13px;display:block;position:relative}.instrument-choice{display:block}.field-label{font-size:9px;margin-bottom:10px}.timbres{gap:6px;display:grid;grid-template-columns:repeat(4,1fr)}.timbre{padding:9px 5px;justify-content:center;gap:5px}.timbre strong{font-size:11px}.timbre-dot{width:7px;height:7px}.demo-button{position:absolute;right:12px;top:8px;margin:0;font-size:9px}.performance-strip{margin:0 12px 17px;padding:0 12px;min-height:70px}.performance-title{gap:9px}.tiny-heading{font-size:6px;letter-spacing:1.3px}#now-note{font-size:10px;max-width:240px}#stage{left:42%;right:16%;opacity:.5}.polyphony{padding-left:12px}.polyphony strong{font-size:23px}.polyphony span{font-size:6px}.keyboard-area{padding:0 8px}.octave-keys{height:191px}.white-key{height:187px;border-radius:0 0 8px 8px}.piano-key.pressed{height:184px}.key-person{top:75px;width:100%}.white-key .note-name{font-size:11px;bottom:28px}.note-name small{font-size:7px}.piano-key kbd{bottom:7px;font-size:8px}.black-key{width:calc(100% / var(--white-count) * .74);height:107px;border-radius:0 0 6px 6px}.black-key.pressed{height:104px}.black-key .key-person{top:14px;width:100%;max-width:39px}.black-key .note-name{bottom:10px;font-size:8px}.octave-label{margin:0 4px 8px;font-size:7px;letter-spacing:1.5px}.octave-group+.octave-group{margin-top:18px}.keyboard-caption{padding:12px 12px 15px;font-size:8px}.keyboard-caption .mobile-tip{display:none!important}.recording-panel{margin-top:24px;padding:17px 13px 13px}.recording-header h2{font-size:12px;letter-spacing:.3px;margin-top:6px}.section-index{font-size:7px}.status-pill{font-size:7px;max-width:112px}.recorder-body{gap:13px 7px}.transport{gap:6px}.record-button{padding:11px 10px;font-size:9px;gap:6px}.record-dot{width:8px;height:8px}.square-button{width:32px;height:35px}.time{font-size:14px;margin-left:2px}.download-button{padding:9px 7px;font-size:8px;gap:4px}.download-button svg{width:13px;height:13px}.delete-button{padding:6px 2px}.delete-button svg{width:13px;height:13px}.save-actions{gap:4px}.recorder-note{font-size:7px;gap:4px}.recorder-note svg{width:10px;height:10px}.challenge-panel{padding:18px 14px}.challenge-copy h2{font-size:12px}.challenge-copy p,.challenge-button{font-size:9px}.challenge-panel{margin-top:18px}.challenge-icon{width:32px;height:32px}footer{padding:25px 3px;flex-direction:column;gap:13px}.help-grid{gap:8px}.help-grid>div{padding:10px}.help-grid p{font-size:10px}dialog{padding:20px}dialog h2{font-size:22px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(min-width:761px){.octave-keys{height:257px}.white-key{height:253px}.white-key.pressed{height:250px}.white-key .key-person{top:139px;max-width:50px}}@media(min-width:1400px){.octave-keys{height:272px}.white-key{height:268px}.white-key.pressed{height:265px}.white-key .key-person{top:148px;max-width:58px}}@media(max-width:760px){.white-key .key-person{top:117px;max-width:54px}.white-key .note-name{bottom:11px}.white-key .note-name small,.white-key kbd{display:none}}@media(max-width:480px){.white-key .key-person{top:107px;max-width:44px}.white-key .note-name{bottom:12px}}.app-title{font-size:20px;font-weight:800;letter-spacing:1px;margin:0 0 16px;padding:0 4px;line-height:1.5}#demo-song{font-size:13px;max-width:170px}@media(max-width:760px){.app-title{font-size:18px;margin:12px 4px}.utility-controls{flex-wrap:wrap;gap:12px}#demo-song{flex:1;max-width:none}.volume-control{margin-left:auto}}.wrap{width:min(1320px,calc(100% - 48px));margin:20px auto}.studio{border:0;border-radius:18px;background:radial-gradient(ellipse at 50% 45%,#fbefdc,transparent 70%),#fffcf5;box-shadow:0 2px 14px #79614c0c;overflow:hidden}.keyboard-area{position:relative;padding:22px 24px 0;display:flex;gap:0;isolation:isolate;touch-action:none}.octave-group{width:46.666666%;position:relative;z-index:2;pointer-events:none}.octave-group:nth-child(2){width:53.333333%}.octave-label{font-size:9px;letter-spacing:1.6px;margin:0 0 18px 8px;color:#a8957e;pointer-events:none}.octave-group:nth-child(2) .octave-label{padding-left:10px}.octave-keys{height:310px;position:relative;display:flex;isolation:auto}.ensemble-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;display:block}.piano-key,.white-key,.black-key,.piano-key:hover,.piano-key.pressed,.black-key:hover,.black-key.pressed{border:0;background:transparent;box-shadow:none;border-radius:14px;padding:0;margin:0;overflow:visible;transition:none;pointer-events:auto;touch-action:none}.white-key,.white-key.pressed{height:310px;width:calc(100% / var(--white-count));z-index:1;transform:none}.black-key,.black-key.pressed{top:0;height:156px;width:calc(100% / var(--white-count) * .84);left:calc((100% / var(--white-count)) * var(--position));z-index:3;transform:translate(-50%);color:var(--ink)}.model-window{position:absolute;pointer-events:none;left:-5%;width:110%;top:135px;height:124px}.black-key .model-window{top:0;left:-8%;width:116%;height:119px}.piano-key .note-name{position:absolute;bottom:24px;font-size:12px;font-weight:700;line-height:1.6;display:block;color:#69574c;pointer-events:none}.piano-key .note-name small{display:block;font-size:8px;color:#ae9984;font-weight:400}.black-key .note-name{bottom:22px;font-size:10px;line-height:1.4}.black-key .note-name small{display:none}.piano-key kbd{bottom:3px;font-size:11px;color:#9d8874;background:#eee5d5;border:1px solid #e0d4c3;border-bottom-width:2px;padding:1px 6px;display:block;pointer-events:none;min-height:19px}.piano-key kbd:empty{display:none}.black-key kbd{bottom:0;font-size:10px;color:#776351;background:#eee5d5;padding:1px 5px;display:block}.piano-key.pressed .note-name{color:#c96c56}.piano-key.pressed:before{content:"";position:absolute;left:10%;width:80%;height:14px;border-radius:50%;background:#e9bd8d66;top:247px;filter:blur(5px)}.black-key.pressed:before{top:106px;background:#b9ad9777}.smoke-cloud{position:absolute;left:50%;top:49%;width:1px;height:1px;z-index:5;pointer-events:none}.smoke-burst{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.smoke-burst i{position:absolute;left:0;top:0;width:27px;height:25px;border-radius:48% 53% 46% 58%;opacity:0;background:radial-gradient(ellipse at 40% 40%,#e2e7c8dd 8%,#b8c4a4bb 46%,#95ab8555 67%,transparent 74%);filter:blur(.6px);pointer-events:none}.smoke-burst i:nth-child(2n){width:22px;height:24px;background:radial-gradient(ellipse,#d1d9b9dd,#9cae8b88 56%,transparent 74%)}.static-smoke i{opacity:.6;transform:translate(-50%,-50%) scale(.7)}.piano-key.next-note:after,.black-key.next-note:after{bottom:59px;width:9px;height:9px;background:#8da078;box-shadow:0 0 0 4px #91a77522}.black-key.next-note:after{bottom:45px}.model-fallback{display:none}.no-webgl .model-fallback{display:flex;width:100%;height:100%;align-items:center;justify-content:center;border:2px solid #d3c8b8;border-radius:42% 42% 35% 35%;background:#fffdf4;color:#817264;font-size:12px}.no-webgl .black-key .model-fallback{background:#22252e;color:#fff}.performance-strip{margin:8px 24px 0;padding:0 12px;min-height:39px;border:0;border-top:1px solid #eadfcd;border-radius:0;background:none}#now-note{font-size:10px;max-width:80%;color:#a08a73;font-weight:400}.polyphony{flex-direction:row;align-items:center;gap:7px;border:0;padding:0}.polyphony strong{font-size:17px}.polyphony span{margin:0;font-size:7px}.instrument-bar{padding:10px 24px 18px;display:flex;align-items:center;gap:15px}.keyboard-settings{display:flex;align-items:center;gap:8px;font-size:10px;color:#9b856f}.keyboard-settings label{display:flex;gap:5px;align-items:center;white-space:nowrap}.keyboard-settings svg{width:15px;height:15px}select{font:inherit;color:#796552;background:#fffaf0;border:1px solid #ded0ba;border-radius:6px;padding:7px;max-width:230px}#octave-setting{font-family:monospace;font-size:10px;white-space:nowrap}.utility-controls{display:flex;align-items:center;gap:20px;margin-left:auto}.demo-button{position:static;margin:0;font-size:10px;padding:8px 0}.help-button{padding:6px}.help-button svg{width:18px;height:18px}.recording-panel{margin-top:18px}.recording-header h2{font-size:14px}.recording-panel{padding-top:17px}.challenge-panel{margin-top:18px}.help-grid pre{font-family:monospace;font-size:12px;line-height:2;white-space:pre;margin-bottom:0}@media(max-width:1000px)and (min-width:761px){.wrap{width:calc(100% - 24px)}.keyboard-area{padding:18px 12px 0}.model-window{height:106px;top:129px}.black-key .model-window{height:103px}.octave-keys,.white-key,.white-key.pressed{height:282px}.black-key,.black-key.pressed{height:144px}.piano-key .note-name{bottom:23px}.piano-key.pressed:before{top:223px}.black-key.pressed:before{top:94px}.utility-controls{gap:12px}.keyboard-settings{gap:5px}.instrument-bar{padding:10px 18px 16px}}@media(max-width:760px){.wrap{width:calc(100% - 20px);margin:8px auto}.studio{border-radius:12px}.keyboard-area{display:block;padding:14px 10px 0}.octave-group,.octave-group:nth-child(2){width:100%}.octave-group+.octave-group{margin-top:17px}.octave-label,.octave-group:nth-child(2) .octave-label{font-size:8px;margin:0 0 8px 6px;padding-left:0}.octave-keys,.white-key,.white-key.pressed{height:231px}.black-key,.black-key.pressed{height:116px;width:calc(100% / var(--white-count) * .87)}.model-window{top:105px;height:102px;left:-5%;width:110%}.black-key .model-window{top:0;height:92px;left:-5%;width:110%}.piano-key .note-name{font-size:11px;bottom:0;line-height:1.4}.piano-key .note-name small{display:none}.black-key .note-name{font-size:9px;bottom:4px}.piano-key kbd,.black-key kbd{display:none}.piano-key.pressed:before{top:194px}.black-key.pressed:before{top:82px}.key-puff{top:107px}.black-key .key-puff{top:1px}.piano-key.next-note:after{bottom:23px}.black-key.next-note:after{bottom:23px}.performance-strip{margin:7px 14px 0;min-height:34px;padding:0 3px}#now-note{font-size:9px;max-width:80%}.instrument-bar{padding:5px 15px 12px;display:block}.keyboard-settings{display:none}.utility-controls{justify-content:space-between;margin:0;gap:12px}.demo-button{font-size:10px}.volume-control input{width:80px}.recording-panel{margin-top:15px}}@media(max-width:380px){.keyboard-area{padding-left:6px;padding-right:6px}.model-window{height:96px}.black-key .model-window{height:89px}.volume-control input{width:67px}}.performance-strip{display:none}.piano-key .note-name{bottom:26px}.recording-header:has(>div:empty){display:none}.recording-header>div:empty{display:none}.recording-header{justify-content:flex-end;margin-bottom:10px}.challenge-copy>p{display:none}.challenge-copy h2{font-size:14px}.demo-button{background:#c86144;color:#fff;border:1px solid #b65035;border-radius:999px;padding:13px 21px;font-size:14px;font-weight:700;box-shadow:0 3px 9px #b6503526;white-space:nowrap}.demo-button:hover{background:#ae4f35;color:#fff}.instrument-bar{flex-wrap:wrap}#sound-pattern{font-size:13px;max-width:100%;padding:10px 12px}.keyboard-settings label,#volume-value{display:none}@media(max-width:760px){.instrument-bar{display:flex;gap:14px}#sound-pattern{width:100%;max-width:none}.utility-controls{width:100%}.demo-button{font-size:14px;padding:13px 20px}.recording-header{display:none}.recording-panel{padding-top:18px}.challenge-panel{padding:16px}.challenge-copy h2{font-size:12px}}.recording-header{display:none}.challenge-panel:has(#challenge-progress:not([hidden])) .challenge-copy>p{display:block}@media(max-width:760px){.piano-key .note-name{bottom:0}.black-key .note-name{bottom:4px}}