:root{color-scheme:light;--ink:#29392e;--muted:#7a8171;--paper:#f7f4e9;--sage:#56765b;--line:#d5d9c8;--gold:#9d7c3e}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 12% 0,#e8edde,transparent 50%),#f2f2e8;font:14px/1.5 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}main{max-width:1440px;margin:auto;padding:0 38px}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;padding:9px 14px;background:#ffffff75;border:1px solid #c9d1be;border-radius:7px;color:var(--ink);transition:background .15s,box-shadow .15s}button:hover:not(:disabled){background:#e5eddb;border-color:#88a27e}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #729a57;outline-offset:3px}a{color:#496c4e;text-underline-offset:3px}header{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:33px;color:#536a46;display:flex;align-items:center;gap:15px;text-decoration:none}.brand span{font-size:13px;letter-spacing:3px;font-weight:700}header>div{display:flex;align-items:center;gap:8px}header button{font-size:12px;background:none;border-color:transparent}.header-note{font:italic 14px Georgia,serif;color:#85856b;margin-right:18px}.intro{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:33px 0 28px}.eyebrow{font-size:9px;letter-spacing:2px;color:var(--gold);font-weight:700;margin:0 0 9px}h1{font:400 clamp(32px,3vw,46px)/1.14 Georgia,serif;letter-spacing:-1.3px;margin:0 0 9px}h1 em{color:#65815a}.intro p:not(.eyebrow){color:#7b826f;font-size:12px;margin:0}.mode-switch{background:#e4e8da;border:1px solid #d0d7c3;border-radius:9px;padding:4px;display:flex;gap:3px;white-space:nowrap}.mode-switch button{font-size:12px;background:none;border-color:transparent;padding:9px 17px}.mode-switch button[aria-pressed=true]{background:#fffdf5;border-color:#dce0d1;box-shadow:0 2px 4px #2c402b0b}.studio{display:grid;grid-template-columns:minmax(0,1fr) 275px;gap:22px}.play-area{min-width:0}.room{background:url('conservatory.webp') center/cover;border:1px solid #babda0;border-radius:13px 13px 0 0;min-height:365px;position:relative;overflow:hidden;padding:18px 23px 44px;box-shadow:0 12px 35px #525d3a12}.room:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#e5dfbd22,transparent);pointer-events:none}.room-top{display:flex;align-items:center;justify-content:space-between;position:relative;margin-bottom:17px;gap:10px}.room-top>span{font-size:8px;font-weight:700;color:#535d40;letter-spacing:1.6px;background:#fbf6decc;border-radius:4px;padding:5px 8px}.room-top button{font-size:10px;padding:5px 9px;background:#ffffedd9;color:#4b6145;border-color:#d4d6b4}.paper{position:relative;width:85%;max-width:780px;border:1px solid #d9d2b8;background:#fffdf3ed;border-radius:4px;box-shadow:0 7px 25px #51442f24;padding:19px 19px 13px;transform:rotate(-.4deg)}.paper:before{content:"";position:absolute;inset:4px;pointer-events:none;border:1px solid #e0d6bc66}.paper-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 12px}.paper-heading .eyebrow{font-size:7px;letter-spacing:1.5px}.paper-heading h2{font:400 25px Georgia,serif;margin:0}.paper-heading>span{font-size:11px;color:#9b957e}.paper svg{display:block;width:100%;height:auto;max-height:200px}.staff-line{stroke:#7a806c;stroke-width:1;opacity:.65}.clef{font:82px Georgia,serif;fill:#59614f}.note-head{fill:#73806b}.stem{stroke:#73806b;stroke-width:2}.ledger{stroke:#7a806c;stroke-width:1.4}.note-halo{fill:#e2edd0;opacity:.9}.current .note-head{fill:#345d37}.current .stem{stroke:#345d37}.current .note-name{fill:#476b3e}.done .note-head{fill:#aeb79c}.done .stem{stroke:#aeb79c}.accidental{font:31px Georgia,serif;fill:#68705d}.note-name{font:600 12px system-ui;fill:#7d846c;letter-spacing:.7px}.free-note{font:26px Georgia,serif;fill:#5c7d51}.paper-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;padding:0 12px}.paper-foot button{font-size:10px;padding:6px 10px;border-color:#d5dbc9;background:#edf0e2}.paper-foot p{font-size:9px;color:#8b8c76;margin:0;text-align:right}.garden-progress{position:absolute;bottom:10px;left:24px;right:24px;display:flex;align-items:center;gap:9px;color:#53623f;font-size:10px;background:#faf4d9b8;padding:3px 8px;border-radius:5px;width:max-content;max-width:calc(100% - 48px)}#grow{color:#668449;letter-spacing:1px;font-size:17px}.piano-case{border:1px solid #5b5040;background:linear-gradient(#463d32,#302c27);border-radius:0 0 12px 12px;padding:0 16px 11px;box-shadow:0 14px 30px #47483122;color:#e3ddc9}.piano-top{height:53px;display:flex;align-items:center;justify-content:space-between;padding:0 7px;gap:10px}.piano-top>span{font-size:10px;letter-spacing:3px;color:#c5b689}.piano-top i{font:italic 10px Georgia,serif;color:#a29171;letter-spacing:1px;margin-left:9px}.piano-top>div{display:flex;align-items:center;gap:13px}.piano-top label{font-size:9px;color:#cfc6ae;display:flex;align-items:center;gap:5px}.piano-top input{accent-color:#bdc897}.piano-top button{font-size:9px;background:#69604a66;border-color:#8b806366;color:#ddd2b5;padding:5px 8px}.piano-scroll{overflow-x:auto;border-radius:5px;background:#161b17;scrollbar-color:#a69c7b #302d24;overscroll-behavior-x:contain}.keyboard{height:172px;min-width:670px;width:100%;position:relative;border-top:4px solid #211e1a}.piano-key{border-radius:0 0 5px 5px;position:absolute;top:0;padding:0;user-select:none;touch-action:pan-x;transition:background .06s,box-shadow .06s;display:flex;align-items:center;justify-content:end;flex-direction:column}.piano-key.white{height:100%;width:calc(100% / 14);background:linear-gradient(90deg,#e7e4d7,#fffef5 17%,#fbf9ec 82%,#e6e2d3);border:1px solid #8c8c7a;border-top:0;color:#56604c;padding-bottom:14px;z-index:1;box-shadow:inset 0 -5px 0 #d8d3be}.piano-key.black{height:62%;width:calc(100% / 14 * .62);z-index:2;background:linear-gradient(90deg,#1d251e,#374137 40%,#222b23);color:#ccd3b9;border:1px solid #111a13;box-shadow:inset 0 -6px 0 #151e16,2px 4px 5px #0005;padding-bottom:9px}.piano-key.white:hover{background:#edf3de}.piano-key.black:hover{background:#475942}.piano-key.white.active{background:#cedbb4;box-shadow:inset 0 -2px 0 #92ae75,inset 0 2px 5px #596d3b33}.piano-key.black.active{background:#7a8e58;box-shadow:inset 0 -2px 0 #506939}.piano-key.hint-key:before{content:"";width:7px;height:7px;background:#5e8b4c;border-radius:50%;position:absolute;top:70%}.piano-key.black.hint-key:before{top:40%;background:#d4e7a7}.key-name{font:500 10px system-ui;line-height:1.4}.piano-key.black .key-name{font-size:8px}.piano-key small{font:8px system-ui;color:#979780;margin-top:5px}.piano-key.black small{color:#7c9071}.hide-labels .key-name{visibility:hidden}.piano-bottom{display:flex;justify-content:space-between;padding:10px 8px 0;gap:10px;font-size:7px;letter-spacing:1px;color:#a79d82}#message{font-size:11px;color:#617255;margin:12px 3px;min-height:34px}aside{display:flex;flex-direction:column;gap:16px}.card{border:1px solid #d1d7c4;background:linear-gradient(135deg,#fdfcf4,#ebeedf);border-radius:10px;padding:21px}.card h2{font:400 25px/1.2 Georgia,serif;margin:11px 0}.card p:not(.eyebrow){font-size:11px;color:#7c8571;line-height:1.7}.numbers{display:flex;justify-content:space-between;border-top:1px solid #d6dcc9;border-bottom:1px solid #d6dcc9;margin:19px 0 17px;padding:13px 0}.numbers>div{display:flex;flex-direction:column;gap:2px}.numbers strong{font:400 29px Georgia,serif}.numbers strong span{font:13px system-ui;color:#8a977b;margin-left:3px}.numbers small{font-size:8px;color:#8b967f;letter-spacing:1px}.meter{height:5px;background:#dbe1ce;border-radius:5px;overflow:hidden}.meter span{display:block;width:0;height:100%;background:#86a36f;border-radius:5px;transition:width .2s}.card .progress-text{font-size:9px!important;margin:7px 0 0;text-align:right}.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.section-heading>span{font-size:9px;color:#91a17d}.studies{padding:17px 15px}.studies .eyebrow{font-size:8px;letter-spacing:1.4px}.study-option{display:flex;width:100%;align-items:center;text-align:left;gap:11px;background:none;border-color:transparent;padding:10px 7px;margin-top:3px}.study-option.selected{background:#e0e8d5;border-color:#cbd7b9}.study-num{font-size:10px;color:#9ca68d}.study-option>div{flex:1}.study-option strong{font-size:11px;display:block;font-weight:500}.study-option small{font-size:9px;color:#8c967f;display:block;margin-top:2px}.badge{font-style:normal;color:#78965c;font-size:14px}.tip{display:flex;gap:12px;padding:0 12px;color:#92a47c}.tip>span{font:37px Georgia,serif}.tip p{font-size:10px;line-height:1.8;color:#89967a;margin:0}.tip strong{font-weight:600;color:#788c66}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:18px 0 25px;margin-top:10px;color:#929987;font-size:9px}footer button{font-size:9px;padding:0;border:0;background:none;color:#788b65;text-decoration:underline}.primary{background:#5d7b53;border-color:#5d7b53;color:#fffdf0}.primary:hover:not(:disabled){background:#486b40;color:#fffdf0;border-color:#486b40}.hidden{display:none!important}.result{position:absolute;inset:15% 12%;z-index:4;background:#fffdf1f5;border:1px solid #becda6;border-radius:12px;box-shadow:0 8px 45px #4b5e352b;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px}.result h2{font:italic 38px Georgia,serif;color:#5d7c4f;margin:0 0 9px}.result p:not(.eyebrow){font-size:12px;color:#808d70;max-width:330px}.result button{font-size:11px;margin:4px}.miss{color:#b27049!important}dialog{max-width:600px;width:calc(100% - 32px);padding:32px;background:#f9f7ec;color:#425239;border:1px solid #b4c49d;border-radius:13px;box-shadow:0 20px 80px #293c3440;font-size:13px;line-height:1.8}dialog::backdrop{background:#18291bc9;backdrop-filter:blur(6px)}dialog h2{font:400 32px Georgia,serif;margin:10px 0 20px}dialog code{font-size:11px}.close{position:absolute;right:10px;top:6px;font-size:23px;padding:0 7px;background:none;border:0}@media(max-width:1100px){main{padding:0 24px}.studio{grid-template-columns:minmax(0,1fr) 250px;gap:16px}.paper{width:95%;padding:15px 8px}.room{padding:15px 16px 41px;min-height:325px}.card{padding:17px}.piano-case{padding:0 10px 10px}.piano-top>span{font-size:8px;letter-spacing:2px}.piano-top i{display:none}}@media(max-width:800px){main{padding:0 15px}header{height:65px}.brand{font-size:26px;gap:9px}.brand span{font-size:11px;letter-spacing:2px}.header-note{display:none}header button{font-size:11px;padding:7px}.intro{padding:25px 0 20px;align-items:start}.intro h1{font-size:33px;max-width:260px}.intro .eyebrow{font-size:8px;letter-spacing:1.5px}.intro p:not(.eyebrow){font-size:11px;max-width:240px}.mode-switch{flex-direction:column;align-self:center;min-width:105px}.mode-switch button{padding:7px 10px;font-size:11px}.studio{grid-template-columns:1fr;gap:9px}.room{min-height:320px;padding:13px 12px 42px}.room-top{margin-bottom:17px}.room-top>span{font-size:7px;letter-spacing:1px;padding:5px}.room-top button{font-size:8px;padding:5px 6px}.paper{width:100%;max-width:680px;margin:auto;padding:16px 6px 12px;transform:rotate(-.25deg)}.paper-heading{padding:0 10px}.paper-heading h2{font-size:24px}.paper-heading .eyebrow{font-size:6px}.paper-heading>span{font-size:9px}.paper svg{min-height:125px}.paper-foot{gap:10px;padding:0 6px}.paper-foot button{font-size:9px;white-space:nowrap;padding:5px}.paper-foot p{font-size:8px}.garden-progress{left:14px;bottom:9px;font-size:9px}.keyboard{height:170px}.piano-top{height:49px;padding:0 4px}.piano-top>span{font-size:8px}.piano-top>div{gap:9px}.piano-top label{font-size:8px}.piano-top button{font-size:8px}.piano-bottom{font-size:6px;letter-spacing:.4px;padding:8px 3px 0}.piano-bottom span:last-child{color:#c1b591}aside{display:grid;grid-template-columns:1fr 1fr;gap:12px}.card{padding:15px}.card h2{font-size:25px}.card p:not(.eyebrow){font-size:10px}.numbers{margin:12px 0;padding:10px 0}.numbers strong{font-size:27px}.numbers small{font-size:7px}.studies{padding:15px 9px}.study-option{padding:7px 4px;gap:8px}.study-option strong{font-size:10px}.study-option small{font-size:8px}.study-num{font-size:9px}.section-heading>span{font-size:8px}.studies .eyebrow{font-size:7px;letter-spacing:1px}.tip{grid-column:1/-1;max-width:500px;padding:0 5px}footer{font-size:8px;gap:14px;padding:14px 0 22px}footer>span{max-width:260px}dialog{padding:26px;font-size:12px}.result{inset:12% 5%;padding:13px}.result h2{font-size:31px}.result p:not(.eyebrow){font-size:10px}.result .eyebrow{font-size:8px;letter-spacing:1.2px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}