:root{--paper:#f4f7fa;--card:#fffefa;--ink:#243c50;--muted:#586b7d;--accent:#32668d;--dark:#203d54;--line:#d6e2eb;--sky:#b9d9ee;--gold:#c58d4c;--rose:#b7614f;--focus:#347da9;--serif:Georgia,'Times New Roman',serif;--sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);font-family:var(--sans);color:var(--ink);font-size:15px;line-height:1.6}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}a{color:inherit}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:4px}button{border:0}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:400}h1{font:clamp(35px,4vw,51px)/1.13 var(--serif);letter-spacing:-1.5px}h2{font:30px/1.2 var(--serif);letter-spacing:-.6px}h3{font:23px/1.25 var(--serif)}small{font-size:12px}.skip{position:fixed;left:20px;top:-80px;z-index:20;padding:12px;background:white}.skip:focus{top:10px}.sidebar{position:fixed;inset:0 auto 0 0;width:238px;padding:35px 25px;background:var(--dark);color:#eef6fc;display:flex;flex-direction:column;z-index:5}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;font:31px var(--serif);letter-spacing:-1px}.brand-mark{border:1px solid #7198b4;border-radius:50%;display:grid;place-items:center;width:45px;height:45px;font-style:italic;letter-spacing:-1px}.brand small{display:block;margin-top:7px;font:8px var(--sans);letter-spacing:2.1px;color:#b3cede}.sidebar-caption{font-size:9px;letter-spacing:1.5px;color:#b3cede;margin:52px 9px 17px}nav{display:flex;flex-direction:column;gap:7px}.nav-item{border-radius:7px;background:none;color:#c6dbe9;padding:13px 15px;display:flex;align-items:center;gap:13px;text-align:left;font-size:13px}.nav-item svg{width:19px;height:19px;stroke-width:1.5}.nav-item:hover{background:#ffffff0a;color:white}.nav-item.active{color:var(--dark);background:#c2e0f3}.nav-item.active:after{content:'·';margin-left:auto;font-size:24px;line-height:15px}.sidebar-bottom{margin-top:auto;padding-top:30px}.quiet-quote{font:italic 23px/1.45 var(--serif);color:#c4dcec;margin-bottom:28px}.device-button{background:#ffffff08;border:1px solid #ffffff20;border-radius:7px;color:#d9eaf5;display:flex;align-items:center;gap:9px;padding:11px 10px;width:100%;font-size:10px;text-align:left}.device-button span:last-child{margin-left:auto}.status-dot{width:6px;height:6px;border-radius:50%;display:inline-block;background:#a9c4d7;flex-shrink:0}.status-dot.connected{background:#b5e5cf;box-shadow:0 0 0 3px #b5e5cf20}.sidebar-foot{font-size:9px;color:#b0c8d9;display:block;margin-top:15px}.workspace{margin-left:238px;min-height:100vh}.topbar{height:83px;display:flex;align-items:center;justify-content:space-between;margin:0 48px;border-bottom:1px solid var(--line)}.topbar-label{font-size:9px;letter-spacing:2px;color:#61778b}.topbar-actions{display:flex;align-items:center;gap:22px;font-size:11px;color:var(--muted)}.icon-button{width:33px;height:33px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);font-size:19px}main{padding:38px 48px 20px;max-width:1450px;margin:auto;outline:none}.eyebrow{font-size:9px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:13px}.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px}.page-heading p{color:var(--muted);font-size:13px;margin-top:12px;max-width:570px}.tag{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);padding:5px 10px;border-radius:4px;font-size:10px;white-space:nowrap;color:#60758a;background:#ffffff30}.hero{display:grid;grid-template-columns:1.2fr 1fr;border:1px solid #c7deed;background:#e3f0f9;border-radius:11px;overflow:hidden;min-height:288px}.hero-copy{padding:35px 37px;position:relative;z-index:1}.hero-copy h2{font-size:37px;line-height:1.15;letter-spacing:-1px}.hero-copy p{color:#546f83;font-size:13px;max-width:335px;margin:15px 0 23px}.primary,.secondary,.quiet-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:11px 19px;border-radius:5px;font-size:12px;font-weight:500;text-decoration:none;transition:background .15s,transform .15s}.primary{background:var(--accent);color:#fffefa}.primary:hover{background:#244f71}.secondary{background:var(--card);border:1px solid var(--line);color:var(--ink)}.secondary:hover{background:#eaf3fa}.quiet-button{color:var(--accent);background:none;padding:8px 4px}.quiet-button:hover{text-decoration:underline}.arrow{font-size:17px;line-height:1}.hero-art{display:flex;flex-direction:column;justify-content:center;position:relative;padding:25px 0 18px;min-width:0}.hero-art:before{content:'';position:absolute;width:235px;height:235px;border:1px solid #b5d1e5;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.hero-art:after{content:'';position:absolute;width:190px;height:190px;border:1px solid #b5d1e590;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.hero-art svg{width:100%;position:relative;z-index:1;transform:rotate(-7deg)}.hero-art small{text-align:center;color:#5d7a90;font-size:8px;letter-spacing:2px;position:relative;z-index:1}.stat-row{display:grid;grid-template-columns:repeat(3,1fr);margin:27px 0 33px;border-bottom:1px solid var(--line);padding:0 0 24px}.stat{padding:0 25px;border-right:1px solid var(--line)}.stat:first-child{padding-left:0}.stat:last-child{border:0}.stat-label{font-size:10px;color:var(--muted)}.stat-value{font:31px var(--serif);margin-top:5px;line-height:1.3}.stat-value small{font:11px var(--sans);margin-left:4px;color:var(--muted)}.section-title{display:flex;justify-content:space-between;align-items:center;margin:23px 0 18px}.section-title h2{font-size:24px}.section-title span{font-size:10px;color:var(--muted)}.practice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.practice-card{border:1px solid var(--line);border-radius:9px;padding:23px 22px;background:var(--card);display:flex;flex-direction:column}.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.card-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;background:#e1eff9;color:var(--accent)}.card-icon svg{width:22px;height:22px}.practice-card:nth-child(2) .card-icon{background:#f3e9dc;color:#956b40}.practice-card:nth-child(3) .card-icon{background:#e9edf7;color:#677794}.card-index{font:italic 13px var(--serif);color:#708599}.practice-card h3{font-size:24px}.practice-card p{font-size:12px;color:var(--muted);line-height:1.8;margin:10px 0 18px;flex:1}.card-link{background:none;padding:0;color:var(--accent);display:flex;justify-content:space-between;text-align:left;font-size:11px}.practice-tip{display:flex;align-items:flex-start;gap:13px;margin-top:24px;border-top:1px solid var(--line);padding-top:20px;font-size:12px;color:var(--muted)}.practice-tip strong{color:#4c687e;font-weight:500}.footer{display:flex;justify-content:space-between;gap:12px;font-size:9px;color:#5c7182;padding:25px 48px}.controls{display:flex;align-items:flex-end;gap:17px;flex-wrap:wrap;padding:18px 22px;background:#eaf0f5;border-radius:8px 8px 0 0;border:1px solid var(--line);border-bottom:0}.field{display:flex;flex-direction:column;gap:5px;min-width:120px}.field label,.control-label{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#60758a}select{border:1px solid #c9d9e5;background:var(--card);border-radius:4px;padding:8px 30px 8px 10px;color:var(--ink);font-size:12px;min-width:130px}.toggle-row{display:flex;gap:5px;flex-wrap:wrap}.chip{background:var(--card);border:1px solid var(--line);color:var(--muted);font-size:11px;padding:6px 12px;border-radius:4px}.chip.selected{color:var(--accent);border-color:#79a5c6;background:#e2f0fa}.exercise-card{background:var(--card);border:1px solid var(--line);border-radius:0 0 10px 10px;overflow:hidden}.exercise-top{display:flex;justify-content:space-between;align-items:center;padding:22px 28px;gap:15px}.exercise-top p{font-size:12px;color:var(--muted)}.exercise-top strong{font-weight:500;font-size:13px}.exercise-badge{background:#e9f3fa;border:1px solid #d4e5f0;padding:5px 10px;border-radius:4px;font-size:10px;color:var(--accent)}.staff-wrap{padding:5px 22px 0;overflow:auto}.staff{display:block;width:100%;height:auto;max-height:230px;min-width:320px}.staff text{font-family:var(--serif);fill:var(--ink)}.staff .measure-number{fill:var(--muted)}.staff .staff-line{stroke:#748b9e;stroke-width:1}.staff .bar-line{stroke:#7b91a3;stroke-width:1}.staff .note{fill:var(--ink);stroke:var(--ink)}.staff .note .open-note{fill:var(--card);stroke-width:1.8}.staff .note.current{fill:var(--accent);stroke:var(--accent)}.staff .note.played{fill:#7299b6;stroke:#7299b6}.staff .note-circle{fill:#d8eaf7;stroke:none}.staff .ledger{stroke:var(--ink);stroke-width:1.2}.staff .clef{font-family:'Noto Music','Segoe UI Symbol','Apple Symbols',serif;font-size:66px;fill:var(--ink)}.feedback{min-height:65px;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px 25px;font-size:13px;color:var(--muted);gap:10px}.feedback.correct{color:var(--accent);background:#edf5fb}.feedback.incorrect{color:#97543e;background:#f8eee6}.feedback strong{font-weight:600}.keyboard-area{border-top:1px solid var(--line);background:#f3f7fa;padding:18px 25px 24px}.keyboard-caption{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-bottom:13px;gap:12px}.keyboard{height:142px;position:relative;display:flex;max-width:730px;margin:auto;touch-action:manipulation}.piano-key.white{flex:1;height:140px;border:1px solid #c5d4df;border-radius:0 0 6px 6px;background:linear-gradient(#fffefa 90%,#eaf0f5);position:relative;color:#607589;min-width:20px}.piano-key.black{position:absolute;top:0;width:4.4%;height:86px;background:linear-gradient(#334f66,#1e3549);border-radius:0 0 4px 4px;z-index:2;color:#c1d5e3;transform:translateX(-50%);border:1px solid #203b51;box-shadow:0 3px 4px #0002}.piano-key.white:hover,.piano-key.white.pressed{background:#c5e3f5}.piano-key.black:hover,.piano-key.black.pressed{background:#3c759c}.key-label{position:absolute;bottom:13px;left:0;right:0;font-size:10px;text-align:center}.key-shortcut{position:absolute;bottom:32px;left:0;right:0;text-align:center;font-size:8px;color:#6b7f90}.piano-key.black .key-label{font-size:8px;bottom:10px}.exercise-actions{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-top:18px}.exercise-actions p{font-size:11px;color:var(--muted)}.routine-banner{display:flex;align-items:center;gap:20px;margin-bottom:22px;padding:13px 18px;background:#e0eef8;border:1px solid #c3dced;border-radius:7px;font-size:11px}.routine-track{height:4px;flex:1;background:#bfd8ea;border-radius:5px;overflow:hidden}.routine-track span{display:block;height:100%;background:var(--accent)}.routine-banner button{background:none;color:var(--accent);text-decoration:underline;font-size:10px}.ear-center{text-align:center;padding:30px 25px}.ear-center h2{margin:12px 0;font-size:28px}.ear-center p{color:var(--muted);font-size:12px}.listen-button{width:90px;height:90px;border-radius:50%;background:#dceefa;color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;border:1px solid #bad8ec;font-size:25px}.listen-button:hover{background:#c7e3f5}.listen-button.playing{animation:pulse 1.2s ease-in-out infinite}.choices{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:0 24px 30px}.choice{border:1px solid #c9dce9;border-radius:6px;padding:13px 22px;background:#f3f8fc;color:var(--ink);font-size:13px;min-width:120px}.choice:hover{background:#e3f1fa}.choice.right{background:#e1edcf;border-color:#83a374;color:#325c36;opacity:1}.choice.wrong{background:#f8e8df;border-color:#bc8065;color:#8b5038;opacity:1}.listening-notes{font-size:10px;color:var(--muted);text-align:center;margin-top:12px}.rhythm-stage{padding:20px 25px 28px;text-align:center}.count-display{font:50px var(--serif);height:66px;margin-bottom:8px}.count-caption{font-size:11px;color:var(--muted);margin-bottom:20px}.tap-button{background:#dceefa;color:var(--accent);border:1px solid #9fc7e2;border-radius:9px;width:min(420px,100%);padding:24px;margin:auto;font-size:17px;touch-action:manipulation}.tap-button:active,.tap-button.pressed{background:#b8daf0;transform:translateY(1px)}.tap-button small{display:block;font-size:10px;color:#526e84;margin-top:3px}.rhythm-result{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px auto;max-width:550px}.rhythm-result div{border-right:1px solid var(--line)}.rhythm-result div:last-child{border:0}.rhythm-result b{display:block;font:26px var(--serif)}.rhythm-result span{font-size:10px;color:var(--muted)}.beats{display:flex;gap:8px;justify-content:center;margin-bottom:22px}.beat-dot{height:8px;width:8px;border-radius:50%;background:#d2e1ed}.beat-dot.on{background:var(--accent);box-shadow:0 0 0 3px #deedf8}.panel{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:26px}.progress-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:22px}.week-chart{height:170px;display:flex;align-items:flex-end;gap:15px;margin:25px 0 12px}.day-col{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;gap:6px;font-size:10px;color:var(--muted)}.day-bar{width:100%;max-width:35px;min-height:3px;background:#9bc3df;border-radius:4px 4px 0 0}.day-col.today .day-bar{background:var(--accent)}.skill-row{border-bottom:1px solid var(--line);padding:16px 0}.skill-row:last-child{border:0}.skill-row-top{display:flex;justify-content:space-between;font-size:12px}.skill-row p{font-size:10px;color:var(--muted);margin-top:4px}.mini-track{height:5px;background:#e6eff6;border-radius:3px;margin-top:9px;overflow:hidden}.mini-track span{height:100%;display:block;background:#78aace}.empty-note{font-size:12px;color:var(--muted);margin-top:18px}.history{width:100%;border-collapse:collapse;font-size:12px;margin-top:20px}.history th{text-align:left;font-size:9px;font-weight:500;letter-spacing:1px;color:var(--muted);padding:10px;border-bottom:1px solid var(--line)}.history td{padding:11px 10px;border-bottom:1px solid #e9f0f6}.history td:last-child{text-align:right}.completion{text-align:center;padding:60px 20px}.completion .seal{width:72px;height:72px;background:#dceefa;display:grid;place-items:center;border-radius:50%;margin:0 auto 25px;font:30px var(--serif);color:var(--accent)}.completion h1{margin-bottom:18px}.completion p{color:var(--muted);max-width:430px;margin:0 auto 25px;font-size:13px}.completion-actions{display:flex;justify-content:center;gap:15px}.subtle{color:var(--muted);font-size:12px}.small-info{font-size:11px;color:var(--muted);line-height:1.8;margin-top:15px}.range-line{display:flex;gap:10px;align-items:center}.range-line input{accent-color:var(--accent);max-width:170px}.range-value{font-size:11px;min-width:45px}.toast{position:fixed;bottom:25px;left:calc(50% + 100px);transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fffefa;padding:12px 20px;border-radius:7px;font-size:12px;box-shadow:0 4px 25px #0002;opacity:0;pointer-events:none;z-index:30;max-width:80vw;transition:.2s}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}dialog{width:min(610px,calc(100% - 30px));border:1px solid var(--line);border-radius:13px;background:var(--card);padding:29px;color:var(--ink);box-shadow:0 20px 80px #0003;max-height:90vh;overflow:auto}dialog::backdrop{background:#18354d80;backdrop-filter:blur(3px)}.dialog-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}.dialog-header p{font-size:11px;color:var(--muted);margin-top:8px}.dialog-section{border-top:1px solid var(--line);padding-top:19px;margin-top:20px}.dialog-section h3{font:18px var(--serif);margin-bottom:9px}.dialog-section p,.dialog-section li{font-size:12px;color:var(--muted);line-height:1.8}.dialog-section ol{padding-left:20px}.dialog-row{display:flex;gap:15px;justify-content:space-between;align-items:center;margin-top:13px}.midi-readout{border:1px solid var(--line);padding:14px 18px;border-radius:7px;background:#edf5fb;display:flex;justify-content:space-between;align-items:center;margin:12px 0;font-size:11px}.midi-readout strong{font:25px var(--serif)}.settings-note{background:#f4eee3;border-radius:6px;padding:10px 13px;font-size:11px;color:#78664b;margin-top:12px}.check-label{font-size:12px;display:flex;align-items:center;gap:9px}.check-label input{accent-color:var(--accent)}.connection-status{font-size:11px;line-height:1.7;color:var(--accent);margin-top:12px}.link-inline{color:var(--accent);text-underline-offset:3px}.support-links{display:flex;gap:17px;margin-top:10px;font-size:10px}.shortcut-hint{font-size:10px;color:var(--muted);margin-top:17px}.welcome-line{font-size:13px;color:var(--muted);margin-bottom:12px}@keyframes pulse{50%{box-shadow:0 0 0 10px #b9d9ee60}}
@media(min-width:1450px){main{padding-top:46px}.hero{min-height:310px}.hero-copy{padding:40px}.hero-copy h2{font-size:43px}.practice-card{padding:27px}}
@media(max-width:1100px){.sidebar{width:205px;padding:28px 18px}.workspace{margin-left:205px}main{padding:30px}.topbar{margin:0 30px}.hero-copy{padding:28px}.hero-copy h2{font-size:32px}.practice-grid{gap:12px}.practice-card{padding:19px}.practice-card h3{font-size:21px}.footer{padding:25px 30px}.controls{gap:11px}.field{min-width:95px}select{min-width:110px}}
@media(max-width:800px){.sidebar{position:static;width:auto;padding:18px 22px 13px;display:block}.brand{font-size:27px}.brand-mark{height:38px;width:38px}.brand small{font-size:7px}.sidebar-caption,.sidebar-bottom{display:none}nav{flex-direction:row;margin-top:18px;gap:5px;overflow-x:auto}.nav-item{font-size:10px;padding:9px 10px;white-space:nowrap;gap:6px}.nav-item svg{width:15px;height:15px}.nav-item.active:after{display:none}.workspace{margin:0}.topbar{height:58px;margin:0 23px}.topbar-label{font-size:8px}.topbar-actions{gap:15px;font-size:10px}main{padding:26px 23px 15px}.hero{grid-template-columns:1.2fr .8fr;min-height:260px}.hero-copy{padding:26px}.hero-art:before{width:170px;height:170px}.hero-art:after{width:140px;height:140px}.hero-copy h2{font-size:32px}.practice-card{padding:18px}.practice-card h3{font-size:20px}.practice-card p{font-size:11px}.progress-grid{grid-template-columns:1fr}.toast{left:50%}.page-heading{align-items:flex-start}.footer{padding:23px}.quiet-quote{display:none}}
@media(max-width:540px){body{font-size:14px}.sidebar{padding:16px 15px 9px}.nav-item{flex:1;justify-content:center;flex-direction:column;font-size:9px;padding:7px}.nav-item svg{width:17px;height:17px}h1{font-size:35px}.page-heading{gap:8px;margin-bottom:23px}.page-heading .tag{display:none}.topbar{margin:0 19px}.topbar-label{letter-spacing:1px}.topbar-actions{font-size:9px}main{padding:24px 18px 15px}.hero{grid-template-columns:1fr}.hero-copy{padding:26px}.hero-art{display:none}.hero-copy h2{font-size:34px}.hero-copy p{max-width:none}.stat-row{margin:23px 0}.stat{padding:0 14px}.stat-value{font-size:27px}.stat-value small{font-size:9px}.stat-label{font-size:9px}.practice-grid{grid-template-columns:1fr}.practice-card{position:relative;padding:19px 20px 19px 77px}.card-top{position:absolute;left:19px;top:22px}.card-index{display:none}.practice-card p{margin:7px 0 11px}.practice-card h3{font-size:23px}.section-title span{font-size:9px}.footer{font-size:8px;padding:20px;align-items:flex-end}.controls{padding:15px;gap:12px}.field{flex:1;min-width:105px}.field select{width:100%}.exercise-top{padding:18px 16px;align-items:flex-start}.exercise-top p{font-size:10px}.exercise-top strong{font-size:12px}.exercise-badge{font-size:9px;padding:4px 7px}.staff-wrap{padding:0 5px}.staff.phrase{min-width:630px}.keyboard-area{padding:16px 9px}.keyboard-caption{font-size:8px;padding:0 5px}.keyboard{height:116px}.piano-key.white{height:114px}.piano-key.black{height:70px}.key-label{font-size:8px}.key-shortcut{display:none}.piano-key.black .key-label{font-size:6px}.choices{padding:0 15px 20px;gap:8px}.choice{padding:11px 13px;min-width:90px;font-size:11px}.ear-center{padding:25px 15px}.exercise-actions{gap:10px;align-items:flex-start}.exercise-actions p{font-size:10px}.exercise-actions .secondary,.exercise-actions .primary{font-size:10px;padding:10px 13px}.feedback{font-size:12px;padding:12px 15px}.routine-banner{gap:10px;padding:11px}.routine-banner>span{font-size:9px}.panel{padding:20px}.dialog-row{flex-wrap:wrap}.shortcut-hint{display:none}dialog{padding:22px}.history{font-size:10px}.history th,.history td{padding:10px 5px}.rhythm-stage{padding:20px 14px}.rhythm-result b{font-size:23px}.progress-grid{gap:15px}.completion{padding:36px 5px}.completion-actions{flex-wrap:wrap}}
#account-controls{display:flex;align-items:center;gap:12px}.sign-in-link{border:1px solid #c4d9e8;padding:7px 11px;border-radius:5px;text-decoration:none;color:var(--accent);font-size:10px;white-space:nowrap}.sign-in-link:hover{background:#dfedf8}.account-status{font-size:10px;color:var(--accent)}.footer-link{background:none;color:var(--accent);font:inherit;text-decoration:underline;padding:0 0 0 9px;text-underline-offset:3px}@media(max-width:1100px){#date-label{display:none}}@media(max-width:540px){.topbar-label{display:none}.topbar-actions{width:100%;justify-content:space-between}.topbar-actions #account-controls{margin-left:auto}.account-status{font-size:9px}.sign-in-link{font-size:9px}.topbar{height:54px}.footer{flex-wrap:wrap}.guest-account-cta{margin-top:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Brighter focus rings on the deep-blue navigation. */
.sidebar :focus-visible{outline-color:var(--sky)}

/* Four areas of practice, with comfortable phone controls. */
.practice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.practice-status{font-size:10px;color:var(--accent);margin-bottom:10px}.daily-extras{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:22px 0}.daily-extras .small-info{margin:0}.practice-subtitle{margin-top:24px}.note-sequence{font:clamp(20px,4vw,28px)/1.6 var(--serif);margin:16px 0;color:var(--accent)}.practice-form{display:grid;gap:12px;margin:22px 0}.practice-form label{font-size:13px;margin-top:6px}.practice-form label span{color:var(--muted)}.practice-form input,.practice-form textarea{font:inherit;width:100%;min-width:0;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);padding:12px}.practice-form textarea{resize:vertical}.practice-form input[type=number]{max-width:140px}.practice-form button{justify-self:start}.practice-form .small-info{margin:0}.practice-steps{padding-left:23px;color:var(--muted)}.practice-steps li{padding:6px 0}.theory-note{background:#e3f0f9;border-radius:8px;padding:16px;margin:20px 0}.theory-note summary{cursor:pointer;font-weight:500}.theory-note p{margin-top:10px}.journal-entry{border-top:1px solid var(--line);padding:20px 0;margin-top:16px}.journal-entry h3{margin:5px 0}.journal-note{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:8px}.journal-entry p,.journal-entry h3{overflow-wrap:anywhere}#technique-topic{display:block;margin-top:10px;max-width:100%;width:100%}textarea:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media(max-width:800px){.nav-item{min-width:75px;min-height:48px;flex-shrink:0}.sidebar nav{padding-bottom:5px}.primary,.secondary,.choice,.quiet-button,.card-link{min-height:44px}.practice-form input,.practice-form textarea,select{font-size:16px}.practice-form button{width:100%}.practice-card .card-link{align-items:center}.keyboard-area{overflow-x:auto}.keyboard{min-width:448px}.keyboard-caption{min-width:280px}.key-label{font-size:10px}.piano-key.black .key-label{font-size:8px}}
@media(max-width:540px){.practice-grid{grid-template-columns:1fr}.practice-card{padding-left:77px}.daily-extras{align-items:stretch;flex-direction:column}.daily-extras button{width:100%}.section-title{gap:12px;font-size:9px}.stat-value small{display:block;margin:4px 0 0}.practice-status{font-size:9px}.nav-item{flex:0 0 auto}.practice-form{padding:20px}.panel{min-width:0}}

/* Landscape practice: keep the score and broad piano keys in the same workspace. */
.practice-toolbar,.rotate-hint{display:none}
.phone-practice .practice-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;margin-bottom:10px}
.phone-practice .practice-toolbar strong{margin-right:auto;min-width:0;font-size:13px;line-height:1.2}
.phone-practice .practice-toolbar button{min-height:44px;padding:8px 10px;font-size:12px;white-space:nowrap}
.phone-practice #practice-screen{min-width:112px}
@media(orientation:portrait){
 .phone-practice .rotate-hint{display:block;padding:10px 12px;margin-bottom:12px;border:1px solid #bad8ec;border-radius:8px;background:#e3f0f9;font-size:12px;line-height:1.5}
 .phone-practice .practice-toolbar{margin-top:6px}
 .phone-practice .practice-toolbar strong{display:none}
}
@media(orientation:landscape) and (max-height:600px){
 .phone-practice .sidebar,.phone-practice .topbar,.phone-practice .footer{display:none}
 .phone-practice .workspace{margin:0;min-height:100dvh}
 .phone-practice main{max-width:none;padding:6px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left))}
 .phone-practice .practice-toolbar{position:sticky;top:0;z-index:4;background:var(--paper);margin:0 0 4px;padding:0 0 4px;flex-wrap:nowrap}
 .phone-practice .practice-toolbar button{min-height:44px}
 .phone-practice .page-heading,.phone-practice main>.daily-extras{display:none}
 .phone-practice main>.controls{display:none}
 .phone-practice.practice-options-open main>.controls{display:flex;padding:10px;gap:10px;flex-wrap:wrap;margin-bottom:8px}
 .phone-practice .controls select{font-size:16px;min-height:44px}
 .phone-practice .routine-banner{padding:6px 10px;margin:0 0 5px;gap:12px;font-size:11px;min-height:26px}
 .phone-practice .routine-banner>span+span{margin-left:auto;font-size:10px}
 .phone-practice .exercise-top{display:none}
 .phone-practice .staff-wrap{padding:0 8px}
 .phone-practice .staff{height:80px;max-height:none;min-width:0}
 .phone-practice .staff.phrase{height:100px;min-width:570px}
 .phone-practice .feedback{padding:5px 10px;min-height:30px;font-size:12px}
 .phone-practice .keyboard-area{padding:6px 8px 8px;overflow-x:auto}
 .phone-practice .keyboard-caption{margin-bottom:5px;font-size:10px;padding:0;min-width:0}
 .phone-practice .keyboard{width:100%;max-width:none;min-width:616px;height:128px}
 .phone-practice .piano-key.white{height:128px;min-width:44px}
 .phone-practice .piano-key.black{height:80px;width:4.7%}
 .phone-practice .key-label{font-size:13px;bottom:10px}
 .phone-practice .piano-key.black .key-label{font-size:10px;bottom:8px}
 .phone-practice .key-shortcut{display:none}
 .phone-practice .exercise-actions{margin-top:6px;gap:10px;align-items:center}
 .phone-practice .exercise-actions p{font-size:10px}
 .phone-practice .exercise-actions button{min-height:40px;padding:8px 12px}
 .phone-practice .ear-center{display:grid;grid-template-columns:90px 1fr;gap:5px 18px;padding:12px 18px;text-align:left;align-items:center}
 .phone-practice .listen-button{grid-row:1/4;margin:0;width:76px;height:76px}
 .phone-practice .ear-center h2{font-size:24px;margin:0}
 .phone-practice .ear-center>.quiet-button{justify-self:start;min-height:40px}
 .phone-practice .choices{padding:4px 18px 10px;gap:8px}
 .phone-practice .choice{min-height:44px;padding:10px 16px}
 .phone-practice main[data-view=rhythm] .exercise-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
 .phone-practice main[data-view=rhythm] .staff.phrase{min-width:0}
 .phone-practice .rhythm-stage{padding:8px 12px}
 .phone-practice .count-display{font-size:32px;height:38px;margin:0}
 .phone-practice .count-caption,.phone-practice .beats{margin-bottom:8px}
 .phone-practice .tap-button{min-height:68px;padding:14px}
 .phone-practice .rhythm-result{margin:8px auto}
 .phone-practice .rhythm-result b{font-size:21px}
 .phone-practice .toast{left:50%;bottom:8px}
}

/* Email sign-in stays within the current practice visit. */
#email-signin-dialog{width:calc(100% - 24px);max-width:464px;max-height:calc(100dvh - 24px);margin:auto;padding:0;border:0;border-radius:14px;overflow-y:auto;overscroll-behavior:contain;background:var(--card);color:var(--ink)}
#email-signin-dialog::backdrop{background:#102a3bcc;backdrop-filter:blur(3px)}
#email-signin-dialog .arpessa-signin{max-width:none;margin:0;border:0;border-top:3px solid var(--gold);box-shadow:none}
#email-signin-dialog .email-signin-close{position:absolute;right:12px;top:10px;min-width:44px;min-height:44px;background:var(--card);color:var(--ink);z-index:1}
#email-signin-dialog .arpessa-signin__mark{margin-right:40px}
button.sign-in-link{background:transparent;font-family:inherit;min-height:40px}
.account-migration{padding:18px;margin:18px 0;background:#eaf1f5;border:1px solid #c9dbe6;border-radius:8px}
.account-migration h3{font-size:21px;margin-bottom:8px}
.account-migration .secondary{margin-top:13px;white-space:normal;text-align:left;min-height:44px}
@media(orientation:landscape) and (max-height:600px){#email-signin-dialog{max-width:600px;max-height:calc(100dvh - 12px);width:calc(100% - 24px)}#email-signin-dialog .arpessa-signin{padding:22px 30px}#email-signin-dialog .arpessa-signin__mark{display:none}#email-signin-dialog .arpessa-signin__eyebrow{margin-right:40px}#email-signin-dialog .arpessa-signin h2{font-size:28px;max-width:calc(100% - 30px)}#email-signin-dialog .arpessa-signin__intro{margin-bottom:17px}#email-signin-dialog .arpessa-signin__guest{margin-top:17px;padding-top:10px}}
.account-recovery{padding:18px 0 0;margin-top:18px;border-top:1px solid var(--line)}
.account-recovery>p:first-child{font-size:13px;color:var(--muted)}
.account-recovery .quiet-button{padding:8px 0;min-height:44px;text-align:left;text-decoration:underline;text-underline-offset:3px}
.account-recovery .small-info{font-size:11px;line-height:1.7}
#email-signin-dialog>.account-recovery{margin:0;padding:18px 30px 25px;background:#f4f7fa}

/* Keep complete phone navigation labels visible, without changing exercise mode. */
@media(max-width:800px){
 .sidebar #nav{min-width:0;max-width:100%;scroll-padding-inline:4px}
 .sidebar #nav .nav-item{flex:0 0 auto;min-height:48px}
 .sidebar #nav .nav-item svg{flex-shrink:0}
}
@media(max-width:540px){
 .sidebar #nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px 6px;margin-top:15px;padding:0 0 5px;overflow:visible}
 .sidebar #nav .nav-item{min-width:0;max-width:100%;width:100%;min-height:64px;padding:9px 4px;flex-direction:column;justify-content:center;gap:5px;font-size:11px;font-weight:500;line-height:1.3;text-align:center;white-space:normal;overflow:visible;text-overflow:clip}
 .sidebar #nav .nav-item span{display:block;min-width:0;max-width:100%;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
 .sidebar #nav .nav-item svg{width:17px;height:17px}
 .sidebar #nav .nav-item[data-nav="today"]:not(.active),.sidebar #nav .nav-item[data-nav="own-music"]:not(.active){box-shadow:inset 0 0 0 1px #7ba3be66;background:#ffffff08;color:#eef6fc}
 .sidebar #nav .nav-item:focus-visible{outline-offset:2px}
}

/* The account label stays compact; settings show the complete identity. */
#account-controls,.topbar-actions{min-width:0}.topbar-actions>.icon-button{flex-shrink:0}.account-summary{display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:190px;line-height:1.4}.account-identity{display:block;max-width:100%;padding:0;background:none;color:var(--ink);font-size:11px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-identity:hover{text-decoration:underline}.account-details{margin:16px 0;padding:14px 16px;border:1px solid var(--line);border-radius:7px;background:var(--paper)}.account-details>div+div{margin-top:10px}.account-details dt{font-size:10px;color:var(--muted)}.account-details dd{margin:2px 0 0;font-size:12px;overflow-wrap:anywhere}.account-details code{font-size:11px}@media(max-width:540px){.account-summary{max-width:140px}.account-identity{font-size:10px}#account-controls{gap:9px}}