:root{color-scheme:dark;--bg:#10151f;--panel:#19222f;--panel2:#202c3b;--text:#eff3f8;--muted:#aab7c8;--mint:#8aebd0;--violet:#ada3ff;--line:#314052;--danger:#ffb8ab}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:var(--mint)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--violet);outline-offset:4px}button:disabled{opacity:.5;cursor:default}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.top{height:90px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#131b27}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);font-size:calc(23px * var(--text-scale,1));font-weight:750;letter-spacing:-.8px}.brand small{display:block;font-size:calc(10px * var(--text-scale,1));letter-spacing:2px;color:var(--muted);font-weight:500}.mint{color:var(--mint)}.top-controls{display:flex;align-items:center;gap:16px}.top select{width:auto;background:transparent;border:0}.avatar{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:var(--panel2);color:var(--mint);font-size:calc(25px * var(--text-scale,1))}.shell{display:grid;grid-template-columns:220px minmax(0,1fr);max-width:1500px;margin:auto}aside{border-right:1px solid var(--line);min-height:calc(100vh - 90px);padding:32px 18px;display:flex;flex-direction:column}nav{display:grid;gap:8px}nav button{display:flex;align-items:center;gap:14px;text-align:left;border:0;background:transparent;color:var(--muted);border-radius:12px;padding:13px 15px;font-size:calc(15px * var(--text-scale,1))}nav button .nav-icon{font-size:calc(21px * var(--text-scale,1));width:24px}nav button.active{background:#253d40;color:var(--mint)}.rail-note{margin-top:auto;padding:36px 12px;color:var(--muted);font-size:calc(14px * var(--text-scale,1))}.rail-note b{display:block;color:var(--text);margin-bottom:6px}main{padding:38px clamp(20px,4vw,64px) 72px;min-width:0;max-width:1200px;width:100%}.eyebrow{color:var(--mint);font-size:calc(13px * var(--text-scale,1));letter-spacing:1.7px;font-weight:700;text-transform:uppercase}h1{font-size:clamp(calc(28px * var(--text-scale,1)),calc(3.2vw * var(--text-scale,1)),calc(42px * var(--text-scale,1)));letter-spacing:-1.5px;line-height:1.15;margin:10px 0 12px}h2{font-size:calc(22px * var(--text-scale,1));letter-spacing:-.5px;line-height:1.3;margin:0 0 16px}h3{font-size:calc(17px * var(--text-scale,1));line-height:1.35;margin:0 0 8px}p{margin:10px 0 18px}.muted{color:var(--muted)}.small{font-size:calc(14px * var(--text-scale,1))}.row{display:flex;align-items:center;justify-content:space-between;gap:16px}.wrap{flex-wrap:wrap}.heading{margin-bottom:28px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px}.hero{display:grid;grid-template-columns:1fr 185px;gap:24px;background:linear-gradient(120deg,#233837,#222a42);border-color:#3f565a;margin-bottom:28px;align-items:center}.hero h2{font-size:calc(27px * var(--text-scale,1));max-width:560px}.ring{height:148px;width:148px;border-radius:50%;background:conic-gradient(var(--mint) calc(var(--pct)*1%),#374951 0);display:grid;place-items:center;margin:auto}.ring>div{width:130px;height:130px;background:#233337;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column}.ring strong{font-size:calc(35px * var(--text-scale,1));letter-spacing:-1px}.ring span{font-size:calc(13px * var(--text-scale,1));color:var(--muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:45px;padding:11px 18px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--text);font-weight:650;text-decoration:none}.primary{background:var(--mint);color:#152e29;border-color:var(--mint)}.soft{background:#2a3c3e;color:var(--mint);border-color:#3c5753}.danger{color:var(--danger)}.btn.small{padding:8px 12px}.textbtn{border:0;background:none;color:var(--mint);padding:8px;font-size:calc(14px * var(--text-scale,1))}.work-grid{display:grid;grid-template-columns:minmax(0,1fr) 255px;gap:24px}.ex-list{display:grid;gap:12px}.exercise{display:flex;gap:16px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:19px;text-align:left;color:var(--text);width:100%}.exercise:hover{border-color:#64867e;background:#1c2a35}.ex-num{color:var(--muted);font-size:calc(18px * var(--text-scale,1));font-variant-numeric:tabular-nums;border-right:1px solid var(--line);padding-right:16px}.ex-info{flex:1;min-width:0}.exercise h3{margin:0 0 7px}.tags{display:flex;gap:8px;flex-wrap:wrap}.tag{display:inline-block;font-size:calc(12px * var(--text-scale,1));color:#c4cfdd;padding:3px 8px;border:1px solid #3b4a60;border-radius:6px}.tag.mint{color:var(--mint);border-color:#41625b}.chevron{font-size:calc(23px * var(--text-scale,1));color:var(--mint)}.side-stack{display:grid;align-content:start;gap:16px}.side-stack .panel{padding:22px}.big{font-size:calc(32px * var(--text-scale,1));font-weight:700;letter-spacing:-1px}.progress{height:6px;border-radius:20px;background:#354458;overflow:hidden;margin:14px 0}.progress i{display:block;background:var(--mint);height:100%;border-radius:20px}.level-mark{font-size:calc(16px * var(--text-scale,1));font-weight:700;color:var(--violet);letter-spacing:2px}.foot-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0}.stats .panel{padding:18px}.stats .big{font-size:calc(28px * var(--text-scale,1))}.filters{display:flex;gap:16px;margin-bottom:22px}.filters>*{flex:1}.library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.library-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;color:var(--text);font:inherit;min-width:0}.library-card:hover{border-color:var(--mint)}.library-card .meta{margin-top:auto;padding-top:20px;display:flex;width:100%;justify-content:space-between;color:var(--muted);font-size:calc(14px * var(--text-scale,1))}.program-card{display:flex;flex-direction:column}.program-card .btn{margin-top:auto}input,select,textarea{width:100%;background:#111b28;color:var(--text);border:1px solid #405066;border-radius:10px;padding:11px 13px;min-height:44px}label{display:block;margin-bottom:7px;color:var(--muted);font-size:calc(14px * var(--text-scale,1))}textarea{resize:vertical;min-height:90px}fieldset{border:0;padding:0;margin:0 0 20px}legend{font-weight:650;margin-bottom:10px}.choices{display:flex;gap:10px;flex-wrap:wrap}.choices label{margin:0;flex:1;min-width:120px}.choices input{position:absolute;opacity:0;width:1px;height:1px}.choices span{display:block;border:1px solid var(--line);border-radius:10px;padding:12px;background:#16202e;cursor:pointer}.choices input:checked+span{border-color:var(--mint);background:#29443f;color:var(--mint)}.choices input:focus-visible+span{outline:3px solid var(--violet)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}dialog{background:#141e2c;color:var(--text);border:1px solid #4a5b71;border-radius:22px;padding:0;width:min(960px,calc(100% - 24px));max-height:92dvh;overflow:auto}dialog::backdrop{background:#050c16bf;backdrop-filter:blur(5px)}.dialog-head{padding:24px 28px;display:flex;justify-content:space-between;gap:20px;align-items:flex-start;border-bottom:1px solid var(--line)}.dialog-head h2{margin:8px 0 0}.dialog-content{padding:26px 28px}.close{border:1px solid var(--line);background:var(--panel2);color:var(--text);width:40px;height:40px;border-radius:10px;flex:none;font-size:calc(22px * var(--text-scale,1))}.notation{background:#101925;border:1px solid var(--line);border-radius:16px;padding:12px;overflow:auto;margin:20px 0}.notation svg{width:100%;min-width:550px;display:block}.notation text{font-family:ui-monospace,SFMono-Regular,monospace}.notation-key{display:flex;gap:18px;flex-wrap:wrap;font-size:calc(14px * var(--text-scale,1));color:var(--muted);margin:8px 0 20px}.notation-key b{color:var(--mint)}.position{display:grid;grid-template-columns:1fr 160px;align-items:center;gap:20px}.position p{margin:4px 0}.steps{list-style:none;padding:0;counter-reset:steps;display:grid;gap:16px}.steps li{counter-increment:steps;display:grid;grid-template-columns:30px 1fr;gap:13px;line-height:1.7}.steps li:before{content:counter(steps);border:1px solid #4a5c71;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font-size:calc(14px * var(--text-scale,1));color:var(--mint);margin-top:3px}.hint{background:#253932;border-left:3px solid var(--mint);padding:15px 18px;border-radius:0 10px 10px 0;font-size:calc(14px * var(--text-scale,1));color:#d3e7e1}.warning{background:#3a2e2a;border-left-color:#f7b989;color:#f1d5b7}details{border-top:1px solid var(--line);padding:17px 0}summary{cursor:pointer;font-weight:650}details p{color:var(--muted);line-height:1.7}.practice-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px}.timer{font-size:clamp(calc(44px * var(--text-scale,1)),calc(7vw * var(--text-scale,1)),calc(72px * var(--text-scale,1)));line-height:1.4;font-variant-numeric:tabular-nums;font-weight:650;letter-spacing:-3px}.bpm-row{display:flex;align-items:center;gap:14px;justify-content:center}.bpm-row input{font-size:calc(32px * var(--text-scale,1));width:115px;text-align:center;padding:0;border:0;background:transparent}.beatlights{display:flex;gap:12px;justify-content:center;margin:18px 0}.beatlights i{width:11px;height:11px;border-radius:50%;background:#536174}.beatlights i.on{background:var(--mint);box-shadow:0 0 0 5px #8aebd020}.practice-layout .panel{text-align:center}.achievement.current{border-color:var(--violet);background:linear-gradient(145deg,#292f49,#1b2636)}.achievement .badge{font-size:calc(42px * var(--text-scale,1));color:var(--violet);font-weight:750;margin:8px 0 18px}.achievement.locked{opacity:.7}.journal{overflow:auto}.journal table{width:100%;border-collapse:collapse;font-size:calc(14px * var(--text-scale,1));min-width:650px}.journal th,.journal td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}.journal th{color:var(--muted);font-weight:500}.journal td p{margin:4px 0;max-width:300px}.empty{padding:30px;color:var(--muted);text-align:center}.sync{position:fixed;bottom:16px;right:22px;font-size:calc(12px * var(--text-scale,1));color:var(--muted);background:#10151fee;border:1px solid var(--line);border-radius:20px;padding:6px 12px;pointer-events:none}#toast{position:fixed;bottom:58px;left:50%;transform:translateX(-50%);background:var(--mint);color:#132c26;padding:12px 22px;border-radius:12px;z-index:5;max-width:90%;display:none}#toast.show{display:block}.account-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:22px}.account-grid p{overflow-wrap:anywhere}.hr{border:0;border-top:1px solid var(--line);margin:24px 0}
@media(min-width:1600px){.top{padding:0 calc((100vw - 1380px)/2)}}@media(max-width:1100px){.shell{grid-template-columns:180px 1fr}aside{padding:24px 10px}.work-grid{grid-template-columns:1fr}.side-stack{grid-template-columns:1fr 1fr}.stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.top{height:76px;padding:0 18px}.brand{font-size:calc(20px * var(--text-scale,1));gap:8px}.brand img{width:38px;height:38px}.brand small{font-size:calc(8px * var(--text-scale,1))}.top-controls{gap:4px}.top select{font-size:calc(14px * var(--text-scale,1));max-width:118px;padding:8px}.avatar{width:36px;height:36px}.shell{display:block}aside{padding:0;min-height:0;border:0}nav{position:fixed;bottom:0;left:0;right:0;z-index:3;background:#141e2cf5;backdrop-filter:blur(10px);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:4px 8px max(6px,env(safe-area-inset-bottom))}nav button{justify-content:center;gap:7px;padding:9px 4px;font-size:calc(14px * var(--text-scale,1));border-radius:8px}nav .nav-icon{font-size:calc(17px * var(--text-scale,1))!important;width:19px!important}.rail-note{display:none}main{padding:26px 18px 165px}.hero{grid-template-columns:1fr 100px;padding:20px;gap:12px}.hero h2{font-size:calc(23px * var(--text-scale,1))}.ring{width:96px;height:96px}.ring>div{width:82px;height:82px}.ring strong{font-size:calc(25px * var(--text-scale,1))}.ring span{font-size:calc(11px * var(--text-scale,1))}.side-stack{grid-template-columns:1fr}.library-grid{grid-template-columns:1fr}.filters{flex-direction:column;gap:12px}.panel{padding:20px}.exercise{padding:16px;gap:10px}.ex-num{padding-right:10px}.account-grid{grid-template-columns:1fr}.sync{bottom:112px;right:10px}#toast{bottom:146px}.dialog-head{padding:20px}.dialog-content{padding:20px}.practice-layout{grid-template-columns:1fr}.position{grid-template-columns:1fr 105px}.form-grid{grid-template-columns:1fr}.choices label{min-width:100px}.choices span{padding:10px;font-size:calc(14px * var(--text-scale,1))}dialog{max-height:94dvh}.hero .btn{font-size:calc(14px * var(--text-scale,1));padding:10px}.hero .small{font-size:calc(13px * var(--text-scale,1))}}
@media(prefers-reduced-motion:no-preference){button{transition:background .15s,border-color .15s}.progress i{transition:width .3s}}
.meter-controls{margin-top:16px;text-align:left;grid-template-columns:1fr 1fr}.meter-controls select{font-size:calc(14px * var(--text-scale,1));padding:10px 8px}.pulse-count{font-variant-numeric:tabular-nums;color:var(--violet);font-size:calc(22px * var(--text-scale,1));margin-top:12px;min-height:34px}.leaderboard{display:grid;gap:12px}.leader{display:flex;align-items:center;gap:20px;padding:18px 22px}.leader.you{border-color:var(--mint)}.place{font-size:calc(23px * var(--text-scale,1));color:var(--violet);min-width:34px}.leader-name{flex:1;min-width:0;overflow-wrap:anywhere}.leader-name .tag{margin-left:10px}.leader strong{white-space:nowrap;font-size:calc(18px * var(--text-scale,1))}.practice-layout .panel{min-width:0}.tab-note{min-width:0}select{max-width:100%}
@media(max-width:760px){nav{grid-template-columns:repeat(4,minmax(0,1fr))}nav button{flex-direction:column;gap:1px;min-height:52px;font-size:calc(14px * var(--text-scale,1));padding:5px 2px;overflow-wrap:anywhere}main{padding-bottom:190px}.sync{bottom:130px}#toast{bottom:165px}.leader{gap:10px;padding:16px}.leader-name b{font-size:calc(14px * var(--text-scale,1))}.leader-name .tag{display:table;margin:5px 0}.leader strong{font-size:calc(16px * var(--text-scale,1))}.meter-controls{grid-template-columns:1fr 1fr}.dialog-content{padding:18px}.practice-layout .btn{width:100%}.top{padding-top:env(safe-area-inset-top)}}
/* Motion stays short and finite so the studio is calm during practice. */
.task-row{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:4px 8px 12px}.task-row .exercise{border:0;background:transparent}.task-row>.completion-toggle{margin-left:14px}.is-done{border-color:#527e70}.completion-toggle.is-done{color:var(--mint);background:#233b35}.done-mark{display:inline-grid;place-items:center;flex:none;width:25px;height:25px;border-radius:50%;background:var(--mint);color:#16342b;font-weight:800}.completion-label{display:inline-flex;align-items:center;gap:7px;color:var(--mint);font-size:calc(13px * var(--text-scale,1));margin-bottom:12px}.program-card .row{align-items:start}.program-card .progress{margin-top:0}.library-card .completion-label{margin-bottom:10px}#sessionCompletion{margin-bottom:18px}.hero{overflow:hidden;position:relative}.hero:after{content:'';position:absolute;right:-80px;top:-120px;width:300px;height:300px;border:1px solid #8aebd018;border-radius:50%;pointer-events:none}.ring{position:relative;z-index:1}.launch-intro{position:fixed;inset:0;z-index:20;background:#10151f;display:grid;place-items:center;overflow:hidden;pointer-events:auto;animation:intro-away .35s 1.45s forwards}.intro-brand{text-align:center;position:relative;z-index:1;animation:logo-arrive .75s cubic-bezier(.16,1,.3,1) both}.intro-brand img{display:block;margin:0 auto 22px;border-radius:30px;box-shadow:0 0 90px #8aebd026}.intro-brand>div{font-size:clamp(calc(32px * var(--text-scale,1)),calc(7vw * var(--text-scale,1)),calc(52px * var(--text-scale,1)));font-weight:750;letter-spacing:-2px}.intro-brand span{color:var(--mint)}.intro-brand small{display:block;margin-top:14px;font-size:calc(10px * var(--text-scale,1));letter-spacing:2px;color:var(--muted)}.intro-orbit{position:absolute;width:min(78vw,430px);aspect-ratio:1;border:1px solid #8aebd030;border-radius:50%;box-shadow:0 0 0 38px #ada3ff05,0 0 0 80px #8aebd004;animation:orbit-arrive 1.5s ease-out both}.intro-strings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:24px;transform:rotate(28deg);opacity:.14}.intro-strings i{width:1px;height:120%;background:linear-gradient(transparent,#8aebd0,transparent);transform-origin:center;animation:string-arrive 1.1s ease-out both}.intro-strings i:nth-child(2n){animation-delay:.12s}.intro-skip{position:absolute;bottom:max(38px,env(safe-area-inset-bottom));font-size:calc(12px * var(--text-scale,1));color:var(--muted)}
@keyframes intro-away{to{opacity:0;visibility:hidden;pointer-events:none}}@keyframes logo-arrive{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:none}}@keyframes orbit-arrive{from{opacity:0;transform:scale(.65)}to{opacity:1;transform:scale(1)}}@keyframes string-arrive{from{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes surface-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}@keyframes check-in{0%{transform:scale(.65)}65%{transform:scale(1.12)}100%{transform:scale(1)}}@keyframes toast-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:no-preference){#page>.heading,#page>.hero,.task-row,.library-card,.program-card,.achievement{animation:surface-in .36s ease-out both}.task-row:nth-child(2),.library-card:nth-child(2),.program-card:nth-child(2){animation-delay:.04s}.task-row:nth-child(3),.library-card:nth-child(3),.program-card:nth-child(3){animation-delay:.08s}.task-row:nth-child(4){animation-delay:.12s}dialog[open]{animation:surface-in .22s ease-out}details[open]>p,details[open]>.steps{animation:surface-in .2s ease-out}.done-mark{animation:check-in .3s ease-out}.btn,.library-card,nav button,.exercise{transition:background .18s,border-color .18s,transform .18s}.btn:active,.library-card:active{transform:scale(.98)}#toast.show{animation:toast-in .2s ease-out}.beatlights i{transition:background .08s,box-shadow .08s}.progress i{transition:width .35s ease-out}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.library-card:hover,.btn:hover{transform:translateY(-2px)}}
@media(max-width:760px){nav{grid-template-columns:repeat(5,minmax(0,1fr));padding-inline:3px}nav button{font-size:calc(11px * var(--text-scale,1));min-height:62px}main{padding-bottom:110px}#toast{bottom:90px}.top{height:auto;min-height:90px;flex-wrap:wrap;gap:6px;padding:12px 16px}.top-controls{margin-left:auto}.top select{max-width:126px}.hero{grid-template-columns:1fr}.hero .ring{width:96px;height:96px;margin:4px 0 0}.hero .ring>div{width:82px;height:82px}.task-row>.completion-toggle{font-size:calc(14px * var(--text-scale,1))}.intro-brand small{letter-spacing:1.4px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.launch-intro{display:none}}
.resume-card,.backup-panel,.demo-panel{margin-bottom:24px}.resume-card{border-color:#56867d;background:linear-gradient(130deg,#203b38,#202b42)}.resume-card h2{margin-top:10px}.rating-options{border:0;padding:0;margin:20px 0;display:grid;gap:10px}.rating-options legend{margin-bottom:10px}.rating-options label{display:flex;align-items:center;gap:12px;min-height:52px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}.rating-options input,.loop-choice input{width:22px;height:22px;accent-color:var(--mint);flex:none}.loop-choice{display:flex;align-items:center;gap:10px;margin:18px 0}.notation g.sounding rect{fill:#36574c}.notation g.sounding>text{fill:#8aebd0}.notation g.sounding text{font-weight:800}.demo-panel .form-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.demo-panel input,.demo-panel select{width:100%;min-width:0}.foot-actions{flex-wrap:wrap;gap:12px}.resume-card .btn{width:100%}@media(max-width:420px){.panel{padding:18px}.demo-panel .form-grid{grid-template-columns:1fr}.foot-actions>.btn{flex:1 1 160px}}/* Explicit checkbox sizing overrides generic full-width demo inputs. */
.demo-panel .loop-choice{display:flex;width:100%;min-width:0;max-width:100%;justify-content:flex-start;align-items:center;gap:12px;text-align:left;white-space:normal;cursor:pointer;min-height:44px}
.demo-panel .loop-choice input[type=checkbox]{width:22px;min-width:22px;max-width:22px;height:22px;min-height:22px;max-height:22px;flex:0 0 22px;padding:0;margin:0;box-sizing:border-box;accent-color:var(--mint)}
.loop-choice span{display:block;min-width:0;flex:1;overflow-wrap:anywhere}
.rating-options input[type=radio]{min-height:22px;max-height:22px;padding:0;margin:0}
.ring>div{flex-shrink:0;text-align:center;gap:3px;padding:8px;overflow:hidden}
.ring strong{display:block;width:100%;text-align:center;line-height:1.05;flex:none}
.ring span{display:block;width:100%;max-width:108px;text-align:center;line-height:1.2;overflow-wrap:normal;white-space:normal}
.done-mark{line-height:1;text-align:center;vertical-align:middle}
.completion-toggle{text-align:center;justify-content:center}
.top{height:auto;min-height:90px;flex-wrap:wrap;gap:12px;padding:14px 4%}
.top-controls{max-width:100%;min-width:0;flex-wrap:wrap;justify-content:flex-end;gap:12px}
.top-controls select{width:auto;min-width:174px;max-width:100%;padding-right:24px}
.favorite-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.favorite-toggle{white-space:normal;text-align:center;min-height:44px}
.favorite-toggle>span:first-child{font-size:calc(23px * var(--text-scale,1));line-height:1;color:var(--mint)}
.favorite-toggle.is-favorite{background:#253d40;border-color:#56867d;color:var(--mint)}
.lesson-favorite{display:flex;justify-content:flex-end;margin:0 0 18px}
.favorite-card{padding:0;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.favorite-card .favorite-card-main{border:0;border-radius:0;background:transparent;color:var(--text);width:100%;padding:24px;flex:1;text-align:left}
.favorite-card-footer{border-top:1px solid var(--line);padding:12px 20px}
.favorite-card-footer .favorite-toggle{width:100%}
@media(max-width:760px){.hero .ring{margin:12px auto 0}.ring span{max-width:66px;font-size:calc(11px * var(--text-scale,1));line-height:1.15}.ring strong{font-size:calc(26px * var(--text-scale,1))}.top-controls{margin-left:auto}.favorite-card .favorite-card-main{padding:20px}}
/* Shared instrument and medal system. Animations happen on entry or an action only. */
#versionBadge{font-size:calc(12px * var(--text-scale,1));letter-spacing:.04em;min-height:44px;border:1px solid #43596a;color:var(--mint);border-radius:10px;padding:6px 12px;background:#1b2c33}
.tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.tools-grid>.panel{min-width:0}
.tuner-card{background:linear-gradient(125deg,#1e3a36,#202b43);display:flex;gap:28px;align-items:center;justify-content:space-between;margin-bottom:24px}.tuner-card h2{font-size:calc(28px * var(--text-scale,1));margin:10px 0}.tuner-card-art{display:flex;gap:8px;align-items:center;padding:24px 10px}.tuner-card-art span{border:1px solid #577769;border-radius:20px;padding:28px 9px;color:var(--mint);font-size:calc(20px * var(--text-scale,1));background:#182b30}.tuner-card-art span:nth-child(even){padding-top:42px;padding-bottom:42px}
.setting-check{display:flex;gap:12px;align-items:center;margin:18px 0}.setting-check input{min-width:22px;max-width:22px;width:22px;height:22px;min-height:22px;padding:0;margin:0;accent-color:var(--mint)}
.sound-controls{border-top:1px solid var(--line);padding:20px 0 0;margin:14px 0 0}.sound-controls legend{padding-top:16px}#metroVolume{padding:0;accent-color:var(--mint);height:44px;min-height:44px;background:transparent}.sound-controls output{float:right;color:var(--mint);font-variant-numeric:tabular-nums}
.string-buttons{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;margin:18px 0}.string-choice{min-width:0;padding:10px 2px;display:flex;flex-direction:column;gap:2px}.string-choice small{font-size:calc(10px * var(--text-scale,1));color:var(--muted)}.string-choice.selected{border-color:var(--mint);background:#29453f}.string-choice.detected{box-shadow:inset 0 -3px 0 var(--mint)}
.tuner-display{background:radial-gradient(ellipse at center,#223a3c,#172332 70%);padding:22px 24px 8px;border:1px solid #40596b;border-radius:24px;text-align:center}.tuner-note{font-size:clamp(calc(58px * var(--text-scale,1)),calc(12vw * var(--text-scale,1)),calc(100px * var(--text-scale,1)));line-height:1.1;font-weight:750;color:var(--text);letter-spacing:-3px;margin-bottom:10px}.tuner-display.in-tune{border-color:var(--mint)}.in-tune .tuner-note,.in-tune .pitch-label{color:var(--mint)}.tuner-meter{height:66px;position:relative;overflow:hidden;margin:24px 0 8px;background:repeating-linear-gradient(90deg,transparent,transparent calc(10% - 1px),#455368 calc(10% - 1px),#455368 10%);border-bottom:2px solid #536475;border-radius:6px}.tuner-center{position:absolute;top:0;bottom:0;left:46%;width:8%;background:#8aebd020;border-inline:1px solid #8aebd060}.tuner-center:after{content:'';position:absolute;left:50%;width:2px;top:0;bottom:0;background:var(--mint)}#tunerNeedle{display:block;position:absolute;left:50%;bottom:0;height:53px;width:4px;border-radius:3px;background:var(--violet);transform:translateX(-50%);transition:left .15s ease-out}.in-tune #tunerNeedle{background:var(--mint)}.tuner-labels{display:flex;justify-content:space-between;font-size:calc(12px * var(--text-scale,1));color:var(--muted);gap:12px}.pitch-label{font-size:calc(18px * var(--text-scale,1));font-weight:650;min-height:30px;margin:24px 0 6px}
.medals-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.medal-card{text-align:center;min-width:0;padding:22px 16px;position:relative;overflow:hidden}.medal{width:94px;height:116px;display:block;margin:0 auto 14px;filter:drop-shadow(0 5px 9px #0004)}.medal-locked{filter:grayscale(.8);opacity:.42}.medal-card h2{font-size:calc(19px * var(--text-scale,1));margin:10px 0;min-height:2.6em;overflow-wrap:anywhere}.medal-card.current{border-color:var(--mint);background:linear-gradient(135deg,#223c38,#202d3d)}.medal-card.locked{opacity:1}.medal-card .tag{white-space:normal}.achievement-hero{display:flex;gap:24px;align-items:center;margin-bottom:22px;background:linear-gradient(130deg,#293d3b,#252e44)}.achievement-hero>.medal{width:122px;height:148px;flex:none;margin:0}.achievement-hero h2{font-size:calc(28px * var(--text-scale,1));margin:7px 0}.achievement-hero p{margin:8px 0 0}
.level-celebration{position:fixed;z-index:20;bottom:max(90px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(430px,calc(100% - 32px));display:flex;gap:18px;align-items:center;border:1px solid var(--mint);border-radius:20px;padding:18px;background:#1e3338;box-shadow:0 12px 50px #0009;pointer-events:none}.level-celebration .medal{width:58px;height:72px;margin:0;flex:none}.level-celebration strong{font-size:calc(20px * var(--text-scale,1))}.level-celebration p{margin:4px 0;font-size:calc(13px * var(--text-scale,1));color:var(--muted)}dialog>.level-celebration{position:sticky;bottom:18px;left:0;transform:none;margin:0 auto 18px}.version-hero{padding:10px 0 14px}.version-hero .big{font-size:calc(48px * var(--text-scale,1))}.release-list{padding-left:20px;margin:10px 0 28px}.release-list li{margin:12px 0;color:var(--muted)}
@keyframes medal-arrive{from{opacity:0;transform:translateY(12px) rotate(-7deg) scale(.9)}to{opacity:1;transform:none}}
@keyframes medal-glint{from{opacity:0;transform:translateX(-130%) rotate(20deg)}40%{opacity:.6}to{opacity:0;transform:translateX(200%) rotate(20deg)}}
@media(prefers-reduced-motion:no-preference){.medal-card{animation:surface-in .32s ease-out both;animation-delay:var(--delay,0ms)}.achievement-hero .medal,.level-celebration .medal{animation:medal-arrive .55s ease-out both}.medal-card.earned:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 20%,#c7e6ff18 48%,transparent 70%);animation:medal-glint .8s ease-out .3s both}.tools-grid>.panel,.tuner-card{animation:surface-in .3s ease-out both}.favorite-toggle.is-favorite>span:first-child{animation:check-in .3s ease-out}}
.reduce-motion *,.reduce-motion *:before,.reduce-motion *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reduce-motion .launch-intro{display:none}
@media(max-width:1100px){.tools-grid{grid-template-columns:1fr}.tuner-card-art{display:none}}
@media(max-width:760px){nav{grid-template-columns:repeat(6,minmax(0,1fr))}nav button{font-size:calc(10px * var(--text-scale,1));gap:4px;min-height:64px}.top-controls{gap:8px}#privacyButton{font-size:calc(12px * var(--text-scale,1))}.medals-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.medal-card{padding:18px 12px}.medal-card h2{font-size:calc(17px * var(--text-scale,1))}.medal-card .tag{font-size:calc(11px * var(--text-scale,1))}.achievement-hero{gap:16px}.achievement-hero>.medal{width:85px;height:108px}.achievement-hero h2{font-size:calc(23px * var(--text-scale,1))}.string-buttons{gap:5px}.string-choice{font-size:calc(14px * var(--text-scale,1))}.tuner-display{padding:20px 12px 8px}}
@media(max-width:370px){.medals-grid{gap:8px}.medal-card{padding:16px 8px}.medal-card h2{font-size:calc(16px * var(--text-scale,1))}.top-controls{justify-content:space-between;width:100%}.top-controls select{min-width:158px}.top{padding:12px}.string-choice{font-size:calc(13px * var(--text-scale,1))}}
.history-peek{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;border:1px solid #42655e;border-radius:16px;background:#1c3035;margin-bottom:22px}.history-peek p{margin:7px 0 4px}.history-peek .btn{flex:none}.history-peek .eyebrow{font-size:calc(11px * var(--text-scale,1));letter-spacing:1.2px}.history-library-button{display:block;width:100%;margin-top:8px;min-height:44px}.history-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.history-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}.history-stats>div{border:1px solid var(--line);border-radius:14px;padding:16px;background:#1e2c3c}.history-stats>div:last-child{grid-column:1/-1}.history-stats b{display:block;font-size:calc(24px * var(--text-scale,1));line-height:1.3}.history-stats span{font-size:calc(13px * var(--text-scale,1));display:block;color:var(--muted);margin-top:6px}.history-stats .tempo-comparison{font-size:calc(18px * var(--text-scale,1));color:var(--mint)}.history-table-wrap{width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:14px}.history-table{width:100%;min-width:750px;border-collapse:collapse;text-align:left;font-size:calc(14px * var(--text-scale,1))}.history-table th{background:#243a42;color:var(--mint);padding:14px;font-weight:650}.history-table td{padding:16px 14px;border-top:1px solid var(--line);vertical-align:top;max-width:230px}.history-table tr:nth-child(even){background:#1b2837}.history-table small{display:block;color:var(--muted);font-size:calc(12px * var(--text-scale,1));margin-top:7px}.history-table strong{display:block;font-weight:650;max-width:200px}.history-note{white-space:pre-wrap;overflow-wrap:anywhere;min-width:105px;max-width:220px}.history-pagination{display:flex;gap:16px;align-items:center;justify-content:space-between;margin:16px 0}.history-controls{border:1px solid var(--line);border-radius:14px;padding:18px;margin:22px 0}.history-controls summary{cursor:pointer;color:var(--mint)}.history-controls .setting-check{margin-top:20px}#comfortBpm,#paceFeeling,#practiceNote{margin-bottom:20px}.history-empty{margin:24px 0}.sound-settings{margin-top:20px}.sound-settings output{float:right;color:var(--mint)}#effectsVolume,#exampleVolume{height:44px;min-height:44px;padding:0;accent-color:var(--mint);background:transparent;margin-bottom:12px}.music-medal{width:112px;height:135px}.achievement-hero>.music-medal{width:132px;height:158px}.medal-card.current .music-medal{filter:drop-shadow(0 7px 12px #8aebd015)}.medal-card h2{min-height:2.6em}.level-celebration .music-medal{width:72px;height:87px}
.launch-intro{animation:none!important}.launch-intro .intro-brand{animation:logo-arrive .9s ease-out both!important}.launch-intro .intro-orbit{animation:orbit-arrive 4.2s ease-out both!important}.launch-intro .intro-strings i{animation-duration:2.3s!important;animation-iteration-count:1!important}.intro-skip{cursor:pointer;background:#1b303b;border:1px solid #68877f;color:var(--mint);padding:12px 22px;border-radius:12px;min-height:48px;font:600 14px system-ui;z-index:2}.intro-subtitle{color:var(--muted);font-size:calc(14px * var(--text-scale,1));text-align:center;margin-top:22px;letter-spacing:1px}.intro-progress{height:3px;border-radius:3px;overflow:hidden;background:#354458;width:180px;margin:24px auto}.intro-progress:after{content:'';display:block;width:100%;height:100%;background:var(--mint);transform-origin:left;animation:intro-progress 4.2s linear both}@keyframes intro-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:760px){.history-peek{align-items:flex-start;flex-direction:column;padding:16px}.history-peek>.btn{width:100%}.history-filters{gap:12px}.history-pagination{gap:8px}.history-pagination .btn{padding-inline:12px}.music-medal{width:102px;height:123px}.achievement-hero>.music-medal{width:104px;height:125px}.history-stats b{font-size:calc(22px * var(--text-scale,1))}}
.reduce-motion .launch-intro{display:none!important}.reduce-motion *,.reduce-motion *:before,.reduce-motion *:after{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.launch-intro{display:none!important}}

.history-row-actions{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:8px}.history-row-actions .textbtn{min-height:44px;min-width:44px;padding:8px 2px;text-align:left}.history-row-actions .danger{color:#ffb4a8}.history-delete-preview{padding:16px;border:1px solid var(--line);border-radius:14px;background:#1e2c3c}.history-delete-preview p{margin:10px 0 0}.history-delete-preview .history-note{max-width:none;min-width:0}
.notation.score{padding:10px;border:1px solid var(--line);background:#101925;overflow:visible;min-width:0;width:100%;border-radius:16px}
.score-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:calc(12px * var(--text-scale,1));margin-bottom:16px;color:var(--muted)}
.score-bar{margin:0 0 18px;border:1px solid #35485b;border-radius:12px;overflow:hidden;background:#101925}
.score-bar-title{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px;font-size:calc(13px * var(--text-scale,1));border-bottom:1px solid #35485b;background:#1a2937}
.score-bar-title span{color:#bccbd5;margin-left:auto}.shift-label{color:#8aebd0;background:#27493f;border-radius:6px;padding:2px 6px}
.notation .tab-staff{display:block;min-width:0;width:100%;max-width:100%;height:auto;background:#101925}
.score-line+.score-line{border-top:1px dashed #465369}.line-caption{font-size:calc(11px * var(--text-scale,1));padding:6px 10px 0;color:#aab7c8}
.score-next{font-size:calc(13px * var(--text-scale,1));margin:8px;color:#b9cccf}.score-toolbar{display:flex;gap:12px;align-items:center;margin:16px 0;flex-wrap:wrap}
.score g.sounding rect{fill:#2c6255}.score g.sounding text{fill:#9af8d3;font-weight:750}
.dialog-content{min-width:0}.position>div{min-width:0}.position label{white-space:normal}.expanded-tabs{width:calc(100% - 12px);max-width:1200px}
.review-intro{border-left:3px solid var(--mint);padding:0 0 0 14px}.review-card{padding:0;border:1px solid var(--line);border-radius:16px;margin:14px 0;background:var(--panel2);overflow:hidden}
.review-card>summary{padding:18px;list-style:none;display:flex;align-items:center;gap:12px;cursor:pointer}.review-card>summary::after{content:'⌄';margin-left:auto}
.review-number{display:grid;place-items:center;min-width:32px;height:32px;border-radius:50%;background:#28443e;color:#a0f3d9;font-weight:700}
.review-card h3{font-size:calc(17px * var(--text-scale,1));margin:0}.review-card small{display:block;color:var(--muted);margin-top:4px}.review-fields{padding:0 18px 18px}
.review-fields label{display:block;margin:12px 0 5px}.review-fields .setting-check{display:flex;margin-top:18px}.review-fields .setting-check input{width:22px;height:22px;min-height:22px;flex:none}
.review-tempos{display:grid;grid-template-columns:1fr 1fr;gap:14px}.review-tempos>div{min-width:0}.review-card textarea{width:100%}.review-card input,.review-card select{width:100%;min-width:0}
.review-fields[aria-disabled=true]{opacity:.75}.path-hero{background:linear-gradient(120deg,#203b38,#22283d);border-color:#56746f;margin:0 0 22px}
.path-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:18px 0}.path-node{border:1px solid var(--line);padding:18px;border-radius:16px;background:var(--panel);min-width:0}.path-node.unlocked{border-color:#56867d}
.path-node h3{margin:6px 0 10px}.path-node p{font-size:calc(14px * var(--text-scale,1));margin:6px 0}.path-node .btn{width:100%;margin-top:12px}.path-node .medal{width:54px;height:62px;float:right;margin-left:8px}
.unlock-list{list-style:none;margin:18px 0;padding:0;display:grid;gap:12px}.unlock-list li{border:1px solid var(--line);padding:12px;border-radius:10px}.unlock-list .textbtn{display:block;text-align:left;margin-top:6px;white-space:normal}
.lock-tag{display:inline-block;font-size:calc(12px * var(--text-scale,1));color:#e5c28c;margin-bottom:12px}.history-clean{color:var(--mint)}
.readiness-panel{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}.readiness-panel .setting-check{display:flex;align-items:flex-start;gap:12px}.readiness-panel input{width:22px;height:22px;min-height:22px;flex:none}
@media(max-width:480px){.review-tempos{grid-template-columns:1fr}.review-card>summary,.review-fields{padding-left:13px;padding-right:13px}.dialog-content .position{flex-direction:column;align-items:stretch}.position select{width:100%}.score-bar-title{font-size:calc(12px * var(--text-scale,1))}.path-grid{grid-template-columns:1fr}dialog{padding:14px}.notation.score{padding:5px}.score-head{font-size:calc(11px * var(--text-scale,1))}.score-toolbar .btn{min-height:44px}}

.lesson-actions{display:flex;gap:10px;justify-content:space-between;align-items:center;margin:0 0 18px}.lesson-actions .btn{flex:1;padding:10px}.position{grid-template-columns:1fr 110px;gap:14px}.notation-key{gap:10px;flex-wrap:wrap;font-size:calc(12px * var(--text-scale,1))}.review-card .review-details{min-width:0}
@media(max-width:480px){.dialog-content .position{display:grid;grid-template-columns:1fr 96px;gap:10px}.position h3{font-size:calc(18px * var(--text-scale,1))}.position p{font-size:calc(12px * var(--text-scale,1));margin-bottom:0}.position label{font-size:calc(13px * var(--text-scale,1))}.lesson-actions .btn{font-size:calc(14px * var(--text-scale,1))}.notation-key{display:flex;flex-wrap:wrap;gap:5px 12px}.score-toolbar span{font-size:calc(11px * var(--text-scale,1))}.score-toolbar{gap:8px}}
.guitar-fact-dialog{width:min(540px,calc(100vw - 24px));max-width:540px;max-height:calc(100dvh - 32px);padding:0;border:1px solid #446962;border-radius:24px;background:var(--panel);color:var(--text);overflow:auto;overscroll-behavior:contain;box-shadow:0 24px 90px #0009}
.guitar-fact-dialog::backdrop{background:#08111bce;backdrop-filter:blur(5px)}
.fact-card{padding:24px;background:radial-gradient(ellipse at 50% 0,#25463e,transparent 65%)}
.fact-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.fact-top .eyebrow{line-height:1.6}.fact-top .close{position:static;flex:none;min-width:44px;min-height:44px}
.fact-emblem{text-align:center;height:88px;margin:10px 0 18px}.fact-art{width:88px;height:88px;color:var(--mint)}
.fact-artist{color:var(--mint);font-size:calc(13px * var(--text-scale,1));letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.fact-card h2{font-size:clamp(calc(22px * var(--text-scale,1)),calc(5vw * var(--text-scale,1)),calc(30px * var(--text-scale,1)));line-height:1.18;margin:8px 0 20px;overflow-wrap:anywhere}
.fact-body{font-size:calc(17px * var(--text-scale,1));line-height:1.65;margin-bottom:24px;overflow-wrap:anywhere}
.fact-source{padding:14px;border:1px solid var(--line);border-radius:12px;background:#0b162255;font-size:calc(13px * var(--text-scale,1))}.fact-source summary{min-height:30px;cursor:pointer;font-weight:700}.fact-source code{display:block;overflow-wrap:anywhere;white-space:normal;user-select:text;font-size:calc(12px * var(--text-scale,1));line-height:1.6;color:var(--mint)}
.fact-card .setting-check{margin:20px 0;font-size:calc(13px * var(--text-scale,1));line-height:1.5}.fact-continue{width:100%;min-height:48px}.day-next{margin-top:24px;border-color:#446962}
@media(max-height:600px){.fact-emblem{display:none}.fact-card{padding:18px}.fact-body{font-size:calc(16px * var(--text-scale,1));margin-bottom:16px}}
@media(max-width:360px){.fact-card{padding:18px}.fact-body{font-size:calc(16px * var(--text-scale,1))}.fact-source{padding:10px}}

/* v0.14: native padding defines the real viewport; web layout responds to its width. */
:root{--text-scale:1;--control-scale:1}
html{scroll-padding-top:12px}
body{font-size:calc(16px * var(--text-scale))}
.top{height:76px;min-height:76px;flex-wrap:nowrap;padding:8px 4%;gap:8px}
.brand{min-width:0;gap:8px;letter-spacing:-.5px;flex-shrink:1}
.brand-name{font-size:20px;white-space:nowrap;line-height:1.2}
.brand-meta{display:flex;align-items:center;gap:8px;margin-top:3px}
.brand-meta small{font-size:8px;letter-spacing:1px}
#versionBadge{font-size:10px;min-height:30px;padding:4px 6px;line-height:1;border:0;background:transparent;white-space:nowrap}
.top-controls{flex:none;width:auto;max-width:none;flex-wrap:nowrap;gap:4px;margin-left:auto}
.top-controls select{min-width:58px;width:58px;max-width:58px;font-size:14px;padding:8px 2px;min-height:44px}
#privacyButton{min-width:44px;min-height:44px;display:grid;place-items:center;padding:8px}
nav button{overflow-wrap:normal;word-break:normal;min-width:0}
.nav-label{white-space:nowrap;line-height:1.25}
.btn{min-height:calc(45px * var(--control-scale));padding:calc(10px * var(--control-scale)) calc(14px * var(--control-scale));max-width:100%;white-space:normal;overflow-wrap:normal}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),select,textarea{min-height:calc(44px * var(--control-scale))}
.close{min-height:44px;min-width:44px}
.panel,.grid>*,.form-grid>*{min-width:0}
.display-settings,.exit-panel,.scale-theory{margin-top:20px}
.scale-formula{color:var(--mint);line-height:1.8}
.practice-controls{margin:0 0 16px;padding:10px 0}
.practice-controls>summary{padding:10px 0;color:var(--mint)}
.practice-controls[open]>.practice-layout{margin-top:14px}
.compact-player{position:sticky;top:0;z-index:2;background:#1b2c38;border:1px solid #496777;border-radius:14px;padding:10px 12px;margin:0 0 18px;box-shadow:0 5px 15px #08131c55}
.player-main{display:flex;gap:12px;align-items:center;justify-content:space-between}
.player-main>.btn{flex:1;min-width:0;font-size:calc(14px * var(--text-scale));padding:8px 10px}
.player-tempo{flex:none;display:flex;align-items:center;gap:6px;font-size:calc(12px * var(--text-scale));margin:0}
.player-tempo input{width:65px;min-width:0;padding:8px 4px;text-align:center;font-size:calc(16px * var(--text-scale))}
.player-toggles{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin-top:4px}
.player-toggles .loop-choice{display:flex;align-items:center;gap:6px;margin:0;min-height:42px;font-size:calc(13px * var(--text-scale))}
.player-toggles .loop-choice input{margin:0;padding:0;min-height:22px}
.player-options{border:0;padding:0;margin-left:auto;font-size:calc(13px * var(--text-scale));position:static}
.player-options>summary{min-height:42px;display:flex;align-items:center;gap:4px;list-style:none;color:var(--mint)}
.player-options>summary::after{content:'⌄'}
.player-options-body{position:absolute;inset:100% 0 auto;background:#1b2c38;padding:14px;border:1px solid #496777;border-radius:0 0 14px 14px;max-height:52dvh;overflow:auto;box-shadow:0 14px 25px #08131c88}
.player-options-body .loop-choice{margin-bottom:8px}
.player-options-body p{margin-bottom:0}
#demoStatus{font-size:calc(12px * var(--text-scale));min-height:0;line-height:1.4}
#demoStatus:not(:empty){padding-top:4px}
.notation-key .accent-key{color:#f4d18c;font-weight:650}
.notation.score{scroll-margin-top:145px}
.dialog-content{overflow-wrap:break-word}
@media(max-width:760px){
 .top{padding:8px 12px;height:76px;min-height:76px}
 .brand img{width:34px;height:34px}.brand-name{font-size:18px}.brand-meta{gap:3px}.brand-meta small{font-size:7px;letter-spacing:.7px}
 #versionBadge{padding:4px;font-size:10px}
 nav{grid-template-columns:repeat(6,minmax(0,1fr));padding:4px 3px max(6px,env(safe-area-inset-bottom));gap:0}
 nav button{font-size:calc(10px * var(--text-scale));min-height:calc(60px * var(--control-scale));gap:4px;padding:5px 2px}
 main{padding-bottom:calc(95px * var(--control-scale))}
 .dialog-content{padding:14px}.dialog-head{padding:14px;gap:10px}.dialog-head h2{font-size:calc(20px * var(--text-scale))}
 dialog{padding:0;width:calc(100% - 12px);max-height:96dvh}
 .player-main{gap:8px}.compact-player{padding:8px}
}
@media(max-width:480px){
 nav{grid-template-columns:repeat(3,minmax(0,1fr))}
 nav button{flex-direction:row;min-height:calc(45px * var(--control-scale));font-size:calc(12px * var(--text-scale));gap:6px}
 main{padding-bottom:calc(125px * var(--control-scale))}#toast{bottom:calc(116px * var(--control-scale))}
 .player-tempo{flex-direction:column;gap:0;font-size:10px}.player-tempo input{width:59px}
 .player-toggles{gap:4px 9px}.player-toggles .loop-choice,.player-options{font-size:calc(12px * var(--text-scale))}
 .form-grid,.review-tempos{grid-template-columns:1fr}
 .lesson-actions{flex-wrap:wrap}.lesson-actions .btn{font-size:calc(13px * var(--text-scale))}
 .grid{grid-template-columns:minmax(0,1fr)}
 .string-buttons{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:760px){
 html[data-text-size="130"] nav{grid-template-columns:repeat(3,minmax(0,1fr))}
 html[data-text-size="130"] nav button{flex-direction:row;min-height:calc(45px * var(--control-scale));font-size:14px}
 html[data-text-size="130"] main{padding-bottom:calc(125px * var(--control-scale))}
}
@media(max-height:500px) and (min-width:500px){
 dialog{max-height:calc(100dvh - 8px);width:calc(100% - 16px)}
 .dialog-head{padding:8px 14px}.dialog-head h2{margin:2px 0;font-size:calc(18px * var(--text-scale))}.dialog-head .eyebrow{font-size:10px}
 .compact-player{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:5px 8px;}
 .player-main{flex:1}.player-toggles{margin:0;flex:none}.player-options>summary{min-height:38px}
 #demoStatus:not(:empty){flex-basis:100%;padding-top:0;font-size:11px}.player-main>.btn{min-height:40px}.player-tempo input{min-height:40px!important}
 .notation .tab-staff{max-height:194px}.score-toolbar{margin:8px 0}
 .player-options-body{max-height:calc(100dvh - 115px)}
}

.compact-player .loop-choice{width:auto;flex:none;gap:6px}
.compact-player .loop-choice span{overflow-wrap:normal}
.player-options-body .loop-choice{width:100%}
dialog:not(.guitar-fact-dialog){max-width:calc(100vw - 12px)}
.tab-help{margin:4px 0 12px;padding:6px 0;font-size:calc(13px * var(--text-scale));}
.tab-help>summary{min-height:40px;display:flex;align-items:center;color:var(--mint)}
.score-toolbar{margin:10px 0;gap:8px}.score-toolbar .btn{padding:8px 10px}
.score-toolbar span{flex:1;min-width:100px}
@media(max-width:480px){
 .position h3{font-size:calc(16px * var(--text-scale))}.position p{font-size:calc(12px * var(--text-scale))}
 .score-toolbar{font-size:12px}.lesson-actions{margin-bottom:12px}.notation.score{margin-top:8px}
 html[data-text-size="130"] nav button{flex-direction:column;min-height:calc(58px * var(--control-scale));gap:2px}
 html[data-text-size="130"] main{padding-bottom:calc(146px * var(--control-scale))}
 html[data-text-size="130"] #toast{bottom:calc(138px * var(--control-scale))}
}
@media(max-width:360px){nav button{flex-direction:column;gap:2px;min-height:calc(54px * var(--control-scale))}main{padding-bottom:calc(138px * var(--control-scale))}.player-toggles{gap:4px 8px}}
/* Exercise controls always inherit the global scale, so a very small/large score is reversible. */
.triplet-picking{margin:12px 0;padding:14px;border:1px solid var(--line);border-radius:12px;background:#162733;min-width:0}
.triplet-picking select{width:100%;max-width:100%;font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.03em}
.triplet-picking p{margin:10px 0 0;overflow-wrap:anywhere}
.exercise-size-panel{border:1px solid #52766e;border-radius:16px;background:#1c302f;padding:18px;margin:12px 0 18px;scroll-margin-top:160px}
.exercise-size-panel[hidden]{display:none!important}
.exercise-size-panel h3{margin:0;color:var(--mint)}
.exercise-size-panel .row{align-items:flex-start;gap:12px}
.exercise-scale-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.exercise-scale-field{min-width:0;margin:0;padding:12px;border:1px solid #416259;border-radius:12px}
.exercise-scale-field legend{font-size:calc(14px * var(--text-scale));padding:0 5px;color:var(--text)}
.exercise-percent-row{display:flex;align-items:center;justify-content:center;gap:8px}
.exercise-percent-row input{width:78px;min-width:0;text-align:center;padding:8px 2px;font-variant-numeric:tabular-nums}
.exercise-percent-row .size-step{min-width:44px;flex:none;padding:8px;font-size:20px}
.exercise-size-panel input[type=range]{display:block;width:100%;min-height:44px;height:44px;accent-color:var(--mint);padding:0;margin:12px 0 0;background:transparent;border:0;touch-action:pan-y}
.scale-bounds{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.exercise-size-panel .foot-actions{margin-top:12px;gap:8px}.exercise-size-panel .foot-actions>.btn{flex:1}
.exercise-explanations{font-size:calc(16px * var(--text-scale));min-width:0;overflow-wrap:anywhere;word-break:normal}
.exercise-explanations>*{max-width:100%;min-width:0}.exercise-explanations .steps{min-width:0}
.exercise-explanations .scale-theory{padding:16px}.exercise-explanations .steps li{grid-template-columns:30px minmax(0,1fr)}
.exercise-explanations h3{font-size:calc(17px * var(--text-scale))}.exercise-explanations .history-peek{--text-scale:var(--global-text-scale,1);font-size:calc(16px * var(--text-scale))}
.score-toolbar .size-toggle{white-space:nowrap}
.notation .score-line{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#55776f #101925}
.notation .tab-staff{max-width:none;max-height:none;flex:none}
.notation .line-caption{position:sticky;left:0}
@media(max-width:600px){.exercise-scale-grid{grid-template-columns:minmax(0,1fr)}.exercise-size-panel{padding:14px}.exercise-size-panel .foot-actions{flex-direction:column}.exercise-size-panel .foot-actions>.btn{width:100%}.score-toolbar>span{flex-basis:100%}}
@media(max-height:500px) and (min-width:500px){.exercise-size-panel{scroll-margin-top:95px}.exercise-scale-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.exercise-size-panel .foot-actions{flex-direction:row}}

/* v0.14.2: separate header columns and always-visible dialog navigation. */
.top{height:auto;display:grid;grid-template-columns:minmax(0,1fr) auto}
.brand>img{flex:none}.brand>div{min-width:0}.brand-meta{flex-wrap:wrap;gap:2px 6px}.brand-meta small{white-space:nowrap}
.top-controls{width:auto;flex-wrap:nowrap;justify-content:flex-end}
.dialog-navigation{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 16px;background:#172130;border-bottom:1px solid #344452;border-radius:20px 20px 0 0}
.dialog-navigation button{min-width:44px;min-height:44px;font-size:14px;line-height:1.2}
.dialog-navigation .close{width:auto;height:auto;padding:8px 12px;display:flex;align-items:center;gap:8px}
.dialog-navigation .close span{font-size:22px}
dialog{scroll-padding-top:var(--dialog-nav-height,53px)}
.compact-player{top:var(--dialog-nav-height,53px)}
.notation.score{scroll-margin-top:calc(var(--dialog-nav-height,53px) + 150px)}
@media(max-width:760px){.top{height:auto}.dialog-navigation{padding:4px 10px}}

.practice-celebration{position:fixed;inset:auto 16px max(22px,env(safe-area-inset-bottom)) auto;width:min(390px,calc(100vw - 32px));box-sizing:border-box;margin:0;padding:18px;display:flex;align-items:center;gap:16px;border:1px solid #81ddbd;border-radius:20px;background:linear-gradient(125deg,#223e3b,#1c293b);color:#eff3f8;box-shadow:0 10px 40px #0008;z-index:999;pointer-events:none;max-height:calc(100dvh - 32px);overflow:hidden}
.practice-celebration:popover-open{display:flex}.practice-celebration .eyebrow{font-size:11px;letter-spacing:1px}.practice-celebration strong{display:block;font-size:18px;line-height:1.35;margin-top:6px;overflow-wrap:anywhere}.celebration-art{flex:none;width:64px}.celebration-art svg{width:64px;height:74px;display:block}.celebration-art>svg:not(.medal){fill:none;stroke:#8aebd0;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.practice-celebration .medal{margin:0;width:64px;height:78px}
@keyframes reward-arrive{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:none}}@keyframes reward-check{from{stroke-dashoffset:65}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:no-preference){html:not(.reduce-motion) .practice-celebration{animation:reward-arrive .28s ease-out}html:not(.reduce-motion) .celebration-art path{stroke-dasharray:65;animation:reward-check .45s ease-out}}


/* 0.14.4: one daily summary; the calendar lives inside History. */
.lesson-start,.practice-finish-top{display:flex;align-items:center;gap:12px;margin:0 0 20px}
.lesson-start>.btn{min-height:48px;flex:1}
.practice-finish-top{padding-bottom:16px;border-bottom:1px solid var(--line)}
.practice-finish-top>.btn{min-height:46px}
.pending-reviews{margin:12px 0 18px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.daily-time{margin:10px 0 18px;color:var(--muted)}
.hero.day-complete{border-color:#64c5b0}
.practice-calendar{margin:0 0 22px;padding:18px;border:1px solid var(--line);border-radius:22px;background:#13222d}
.calendar-heading{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:0 0 14px}
.calendar-heading strong{font-size:1.05rem;text-align:center;overflow-wrap:anywhere}
.calendar-heading .textbtn{min-width:44px;min-height:44px;flex:none}
.calendar-week,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.calendar-week{margin-bottom:6px;text-align:center;font-size:.75rem;color:var(--muted)}
.calendar-date{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:5px 1px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--text);font:inherit;font-size:.9rem;cursor:pointer}
.calendar-date .calendar-mark{font-size:.65rem;line-height:1;height:.7rem;margin-top:4px}
.calendar-date.practised{background:#27364a}
.calendar-date.completed-plan{background:#214b45;color:#b2f8e5}
.calendar-date.is-today{border-color:#8fd9c8}
.calendar-date[aria-pressed=true]{outline:2px solid #b7a9f4;outline-offset:1px}
.calendar-date:disabled{opacity:.35;cursor:default}
.calendar-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.78rem;color:var(--muted);margin:14px 0 0}
.calendar-legend .mint{color:var(--mint)}
.calendar-selection{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:16px 0 6px;padding-top:14px;border-top:1px solid var(--line)}
.calendar-selection p{margin:0}
.calendar-note{font-size:.78rem;color:var(--muted);margin:12px 0 0}
.programme-link{color:var(--mint)}
@media(max-width:380px){.practice-calendar{padding:12px}.calendar-grid,.calendar-week{gap:2px}.calendar-date{font-size:.8rem;min-height:42px}.calendar-heading{gap:4px}}

.history-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.history-stats>div{min-width:0;overflow-wrap:anywhere}
.history-stats>div:nth-child(n+3),.history-filters>div:only-child{grid-column:1/-1}


/* BEGIN STYLES 0.14.5 */
/* 0.14.5: reuse the existing palette and navigation. */
.compact-resume{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;margin-bottom:18px}
.compact-resume>div{display:grid;gap:8px;min-width:0}.compact-resume strong{font-size:calc(17px * var(--text-scale,1))}.compact-resume .btn{flex-shrink:0}
.resume-exercise{margin:12px 0;color:var(--text)}.calendar-entry{width:100%}.selected-day-note{margin-bottom:0}
.day-activity{padding:20px 0}.day-activity h2{margin:10px 0 16px}.day-activity-total{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;color:var(--muted)}.day-activity-total>strong{font-size:calc(24px * var(--text-scale,1));color:var(--mint)}
.day-exercises{list-style:none;padding:0;margin:16px 0}.day-exercises li{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid var(--line,#344452)}.day-exercises li>div{display:grid;gap:6px;min-width:0}.day-exercise-status{color:var(--mint);font-size:22px;flex-shrink:0}.calendar-record-details{margin:4px 0 24px}.calendar-record-details>summary{font-weight:700;padding:14px 0;color:var(--mint);cursor:pointer}
.practice-guide-entry{margin-bottom:26px}.practice-guide-entry .foot-actions{margin-bottom:0}
dialog.practice-help{padding:0;width:min(840px,calc(100vw - 24px));max-width:calc(100vw - 24px);height:fit-content;max-height:calc(100dvh - 24px);border:1px solid #526774;border-radius:24px;background:#16212e;color:var(--text,#eef3f6);overflow:hidden}
dialog.practice-help[open]{display:flex;flex-direction:column}dialog.practice-help::backdrop{background:#070d16bb}
.help-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 20px;border-bottom:1px solid #344452;flex-shrink:0}.help-heading .textbtn{min-height:44px}.help-content{padding:20px;overflow-y:auto;overscroll-behavior:contain;min-height:0}.help-content h2{font-size:calc(25px * var(--text-scale,1));margin:0 0 18px;line-height:1.25;outline:none}.help-content p{line-height:1.65}.help-footer{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;padding:14px 20px;border-top:1px solid #344452;background:#16212e;flex-shrink:0}
.posture-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}.posture-pair figure{margin:0;min-width:0}.posture-pair img,.pain-picture{display:block;width:100%;height:auto;border-radius:14px;background:#e8e5df}.posture-pair figcaption{font-size:calc(14px * var(--text-scale,1));line-height:1.5;padding:10px 2px}.posture-avoid{color:#ffaaa7}.egg-rule{background:#213c3b;border-left:3px solid var(--mint);padding:14px 18px;border-radius:0 12px 12px 0}.egg-rule h3{margin:0 0 8px}.egg-rule p{margin:0}.warmup-symbol{font-size:44px;line-height:1;color:var(--mint);margin:10px 0 22px}
#dialogNav{flex-wrap:wrap}.posture-hint{display:flex;align-items:center;gap:12px;width:100%;flex:0 0 100%;padding:10px 12px;border-radius:12px;background:#24413e;border:1px solid #68bbaa;color:#effcf8;font-size:calc(13px * var(--text-scale,1))}.posture-hint>div{min-width:0;flex:1}.posture-hint strong{display:block;font-size:inherit}.posture-hint p{margin:5px 0 0;line-height:1.45}.posture-hint .textbtn{flex-shrink:0;padding:6px;min-height:44px;color:#c2f5e6}
dialog.update-tour{position:fixed;inset:0;margin:0;padding:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:transparent;border:0;overflow:hidden;color:var(--text,#eef3f6)}dialog.update-tour::backdrop{background:transparent;backdrop-filter:none}.tour-spot{position:fixed;border:2px solid var(--mint);border-radius:14px;box-shadow:0 0 0 200vmax #050b15c7;pointer-events:none;transition:none}.tour-card{display:flex;flex-direction:column;position:fixed;left:50%;transform:translateX(-50%);width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 24px);overflow:hidden;border:1px solid #58746e;border-radius:20px;background:#1b2d35;padding:20px;box-shadow:0 16px 60px #0006}.tour-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.tour-top .eyebrow{font-size:11px}.tour-top .textbtn{min-height:44px}.tour-card h2{font-size:calc(23px * var(--text-scale,1));line-height:1.25;margin:12px 0;outline:none}.tour-card p{color:#c4d5d9;line-height:1.6}.tour-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
@media(max-width:600px){.posture-pair{grid-template-columns:1fr}.compact-resume{align-items:stretch;flex-direction:column}.compact-resume .btn{width:100%}.help-content{padding:16px}.help-heading,.help-footer{padding:10px 14px}.help-footer .btn{padding-left:16px;padding-right:16px}.tour-card{padding:16px}}
@media(max-height:460px){dialog.practice-help{max-height:calc(100dvh - 12px)}.help-heading{padding:4px 14px}.help-footer{padding:6px 14px}.tour-card{padding:12px;max-width:560px}.tour-card p{margin:8px 0}.tour-actions{margin-top:10px}}

.tour-copy{min-height:0;overflow:auto}.tour-top,.tour-actions{flex-shrink:0}
@media(max-height:460px){.posture-pair img,.pain-picture{width:auto;max-width:100%;max-height:calc(100dvh - 160px);margin-inline:auto}}

/* END STYLES 0.14.5 */
/* BEGIN STYLES 0.14.6 */
/* Language names are self-identifying; no English guide appears underneath. */
dialog.first-language{width:min(430px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:28px;border:1px solid #526c71;border-radius:24px;background:#172630;color:#f0f8f7;overflow:auto}
dialog.first-language::backdrop{background:#10151f}
.language-brand{font-size:26px;font-weight:800;letter-spacing:-1px}.language-brand span{color:#8aebd0}
.first-language h1{display:grid;gap:8px;font-size:calc(24px * var(--text-scale,1));line-height:1.3;margin:28px 0}
.first-language h1 [lang="en"]{font-size:calc(17px * var(--text-scale,1));font-weight:400;color:#c0cecf}
.language-options{display:grid;gap:12px}.language-options .btn{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:60px;padding:14px 18px;border-color:#619f92;font-size:calc(18px * var(--text-scale,1));background:#25443f;color:#f0fff9}
.language-options .btn:focus-visible{outline:3px solid #8aebd0;outline-offset:3px}
/* High contrast, stable placement within the existing sticky navigation. */
.posture-hint{background:#b9f3df;color:#102e29;border:2px solid #81dec1;box-shadow:0 3px 18px #0004;padding:12px 14px;font-size:calc(15px * var(--text-scale,1));animation:posture-arrive146 .3s ease-out}
.posture-hint strong{font-size:calc(17px * var(--text-scale,1));line-height:1.3}.posture-hint p{line-height:1.45;margin-top:6px}
.posture-hint .textbtn{color:#123b30;border:1px solid #478b76;border-radius:9px;padding:8px;min-width:44px;min-height:44px;font-weight:600}
@keyframes posture-arrive146{from{opacity:.3;transform:translateY(-5px)}to{opacity:1;transform:none}}
.reduce-motion .posture-hint{animation:none}
@media(prefers-reduced-motion:reduce){.posture-hint{animation:none}}
@media(max-width:360px){dialog.first-language{padding:20px}.posture-hint{gap:8px;padding:10px}.posture-hint .textbtn{align-self:flex-start}}
@media(max-height:460px){dialog.first-language{padding:18px}.first-language h1{margin:16px 0}.language-options{grid-template-columns:1fr 1fr}.posture-hint{padding:8px 12px}.posture-hint p{margin-top:3px}}

/* END STYLES 0.14.6 */
/* BEGIN STYLES 0.14.7 */
/* Whole measures retain their natural rhythmic spacing and wrap together. */
.score-bars147{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;min-width:0;overflow-anchor:none}
.score-bars147>.score-bar{flex:0 0 auto;max-width:100%;min-width:0;margin:0}
.score-bars147 .score-bar-title{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 6px;min-height:53px;padding:7px 8px;font-size:12px;line-height:1.3}
.score-bars147 .score-bar-title strong{grid-column:1;grid-row:1}
.score-bars147 .score-bar-title span{grid-column:1 / -1;grid-row:2;margin:0}
.score-bars147 .shift-label{grid-column:2;grid-row:1;white-space:nowrap;font-size:11px}
#notation{overflow-anchor:none}
.compact-player{z-index:9}
.tab-size-controls147{position:sticky;top:calc(var(--dialog-nav-height,53px) + var(--score-player-height147,120px));z-index:8;display:grid;gap:4px;margin:12px 0 8px;padding:7px 10px;background:#192b36;border:1px solid #426157;border-radius:12px;min-width:0;--text-scale:var(--global-text-scale,1)}
.tab-size-heading147{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.tab-size-heading147 label{margin:0;color:var(--mint);font-size:calc(13px * var(--text-scale));line-height:1.25;font-weight:650;min-width:0}
.tab-size-heading147>.btn{min-height:44px;padding:6px 8px;font-size:calc(12px * var(--text-scale));line-height:1.2;max-width:48%;flex:none}
.tab-size-inputs147{display:flex;align-items:center;gap:6px;min-width:0}
.tab-size-inputs147 .size-step{width:44px;min-width:44px;min-height:44px;padding:4px;font-size:20px;line-height:1;flex:none}
.tab-size-inputs147 input[type=range]{width:auto;min-width:20px;flex:1;min-height:44px;height:44px;margin:0;padding:0;background:transparent;border:0;accent-color:var(--mint);touch-action:pan-y}
.tab-size-number147{display:flex;align-items:center;gap:2px;flex:none;color:var(--muted);font-size:12px}
.tab-size-number147 input{width:52px;min-width:0;min-height:44px;padding:5px 1px;font-size:14px;text-align:center;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.tab-size-number147 input::-webkit-inner-spin-button,.tab-size-number147 input::-webkit-outer-spin-button{appearance:none;margin:0}
.notation.score{scroll-margin-top:calc(var(--score-player-height147,120px) + var(--tab-controls-height147,105px) + 8px)}
.explanation-size147{font-size:calc(13px * var(--global-text-scale,1));--text-scale:var(--global-text-scale,1)}
.explanation-size147>.exercise-scale-field{max-width:420px;margin:12px 0}
.explanation-size147 input[type=range]{accent-color:var(--mint);padding:0}
@media(min-width:640px){
 .tab-size-controls147{display:flex;align-items:center;gap:12px}
 .tab-size-heading147{flex:0 1 auto;max-width:52%}
 .tab-size-heading147 label{max-width:180px}
 .tab-size-inputs147{flex:1 1 240px}
}
@media(max-height:500px) and (min-width:500px){
 .tab-size-controls147{padding:4px 8px;margin-top:8px}
}

/* END STYLES 0.14.7 */
/* BEGIN STYLES 0.14.8 */
/* Compact live actions; advanced settings never push a start button off screen. */
.practice-quick148{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:14px;border:1px solid #3a5060;border-radius:18px;background:#1a2935;margin:0 0 10px}
.quick-column148{display:grid;grid-template-rows:auto 54px 1fr;gap:8px;min-width:0;align-items:center}
.quick-label148{font-size:calc(13px * var(--text-scale,1));color:var(--mint);line-height:1.25;margin:0;min-height:2.5em;display:flex;align-items:center}
.practice-quick148 .timer{font-size:calc(34px * var(--text-scale,1));line-height:1;margin:0;text-align:center;white-space:nowrap}
.practice-quick148 .bpm-row{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;gap:2px;margin:0;align-items:center}
.practice-quick148 .bpm-row input{width:100%;min-width:0;font-size:calc(25px * var(--text-scale,1));padding:2px 0;height:48px}
.practice-quick148 .bpm-row .textbtn{padding:0;min-width:30px;font-size:14px;min-height:44px}
.practice-quick148 .btn{padding:10px 6px;font-size:calc(13px * var(--control-scale,1));line-height:1.3;min-height:52px;align-self:stretch;white-space:normal;overflow-wrap:normal}
.practice-actions148{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.practice-actions148 .btn{font-size:calc(13px * var(--control-scale,1));padding:10px 12px;min-height:44px}.practice-actions148 .textbtn{color:var(--muted)}
.practice-layout.practice-settings148{display:block}.practice-settings148 .panel{padding:14px;margin:0}.practice-controls{margin:10px 0 18px}
#dialog input:is(#metroVolume,#demoClickVolume,#exampleVolume,#effectsVolume){appearance:none;-webkit-appearance:none;display:block;box-sizing:border-box;width:100%;height:44px;min-height:44px;padding:0;margin:4px 0 10px;border:0;border-radius:0;background:transparent;box-shadow:none;accent-color:#8aebd0;cursor:pointer}
#dialog input:is(#metroVolume,#demoClickVolume,#exampleVolume,#effectsVolume)::-webkit-slider-runnable-track{height:6px;border:0;border-radius:6px;background:linear-gradient(to right,#8aebd0 0%,#8aebd0 var(--range-fill,100%),#465565 var(--range-fill,100%),#465565 100%)}
#dialog input:is(#metroVolume,#demoClickVolume,#exampleVolume,#effectsVolume)::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:0;border-radius:50%;background:#8aebd0;margin-top:-6px;box-shadow:none}
#dialog input:is(#metroVolume,#demoClickVolume,#exampleVolume,#effectsVolume)::-moz-range-track{height:6px;border:0;border-radius:6px;background:#465565}
#dialog input:is(#metroVolume,#demoClickVolume,#exampleVolume,#effectsVolume)::-moz-range-progress{height:6px;border-radius:6px;background:#8aebd0}
#dialog input:is(#metroVolume,#demoClickVolume,#exampleVolume,#effectsVolume)::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:#8aebd0}
#dialog input:is(#metroVolume,#demoClickVolume,#exampleVolume,#effectsVolume):focus-visible{outline:2px solid #b6acff;outline-offset:2px;border-radius:8px}
@media(min-width:700px){.quick-column148{grid-template-rows:auto 58px auto}.practice-quick148{gap:24px;padding:16px 20px}.practice-quick148 .btn{font-size:calc(15px * var(--control-scale,1))}.resume-cards148{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}.resume-cards148 .compact-resume{flex-direction:column;align-items:stretch}.resume-cards148 .compact-resume .btn{width:100%}}
@media(max-height:460px){#dialogBody:has(.practice-quick148)>.dialog-head{padding:8px 16px}#dialogBody:has(.practice-quick148)>.dialog-head h2{font-size:18px;margin:4px 0}.practice-quick148{padding:8px 12px}.quick-column148{grid-template-rows:auto 38px 1fr;gap:3px}.quick-label148{min-height:1.3em}.practice-quick148 .timer{font-size:28px}.practice-quick148 .bpm-row input{height:36px;font-size:24px}.practice-quick148 .btn{min-height:44px}.practice-actions148{margin-bottom:8px}}
.practice-actions148 [hidden]{display:none!important}

/* END STYLES 0.14.8 */
/* BEGIN STYLES 0.15.0 */
/* GuitarDaily 0.15.0: one navy / mint surface system, using existing controls. */
:root{--bg:#0e1723;--panel:#172330;--panel2:#21343e;--text:#edf6f5;--muted:#b4c7ca;--mint:#8aebd0;--violet:#c0b5fc;--line:#364b58;--danger:#ffc1b4;--radius150:22px}
body{background:var(--bg);color:var(--text);line-height:1.6}button,input,select,textarea{touch-action:manipulation}button,summary{ -webkit-tap-highlight-color:transparent}button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--mint);outline-offset:3px}.btn,.textbtn,.close{min-height:48px;border-radius:13px}.btn{font-weight:650;border-color:#49616b;background:#223541}.btn.primary{background:var(--mint);border-color:var(--mint);color:#102d25}.btn.soft{background:#203e40;color:#baf7e6;border-color:#527971}.textbtn{color:#aff2df}.btn.selected,.segmented150 .selected{background:#29534c;color:#c7ffec;border-color:#8aebd0;box-shadow:inset 0 0 0 1px #8aebd0}.btn:disabled{opacity:.55}
.top{height:auto;min-height:84px;background:#111c28;padding:14px clamp(16px,3vw,44px);gap:20px}.brand{gap:12px}.brand small{font-size:10px;letter-spacing:1.7px;color:#b3c4c8}.top-controls{gap:10px;flex-wrap:wrap;justify-content:flex-end}.top select{background:#1b2e3a!important;border:1px solid #536a76!important;border-radius:12px;padding:9px 12px!important;min-height:44px;color:#f1f9f7!important}#privacyButton{min-width:44px}#versionBadge{background:#1e3538;color:#b1f7e2;border-color:#4b696c;font-size:12px;min-height:44px}
.shell{grid-template-columns:210px minmax(0,1fr)}.shell>aside{background:#111c28;padding:28px 14px;border-right:1px solid #2d414d}.rail-note{color:#afc2c6}.rail-note b{font-size:16px}#nav{gap:10px}#nav button{min-height:54px;color:#b9cbd0;border:1px solid transparent;border-radius:14px;font-size:calc(14px * var(--text-scale,1));padding:12px;gap:12px}#nav button.active{background:#244a46;color:#bafbe6;border-color:#4e8074}#nav .nav-icon{height:24px;width:24px;display:grid;place-items:center;flex:none}#nav svg,.sections150 svg{height:24px;width:24px}#nav .more150{display:none}
main{padding:36px clamp(18px,3vw,46px) 64px;max-width:1280px}.heading{margin-bottom:26px}.heading h1{letter-spacing:-1.2px;font-size:clamp(28px,3.4vw,42px);margin-bottom:12px}.heading .eyebrow{font-size:11px;letter-spacing:2px}.heading>p{max-width:720px}.panel{border-radius:var(--radius150);background:#172330;border-color:#364d59;box-shadow:0 9px 30px #0000000a}.hero,.instrument-card150,.calendar-feature150{background:linear-gradient(135deg,#183e3d,#1a2a3a);border-color:#3d6a63}.hero{padding:28px;gap:20px}.hero h2{font-size:calc(26px * var(--text-scale,1));line-height:1.25}.ring{background:conic-gradient(var(--mint) calc(var(--pct)*1%),#385758 0)}.ring>div{background:#1c353a}.resume-card{background:#1b303a;border-color:#53766e}.resume-card strong{font-size:calc(19px * var(--text-scale,1))}.resume-cards148{gap:14px}.calendar-entry{background:#1c323b;border-color:#5a7b7c}
.task-row{border:1px solid #38515c;border-radius:20px;background:#172733;overflow:hidden}.task-row .exercise{border:0;background:transparent;padding:20px}.task-row .ex-num{width:36px;border:0;padding:0;display:grid;place-items:center;flex:none;color:#a8edda}.task-row .completion-wrap{margin:0 18px 18px}.task-row.is-done{border-color:#467e6c;background:#1a3438}.task-row h3{font-size:calc(18px * var(--text-scale,1));line-height:1.4}.ex-list{gap:14px}.hint{background:#1e393a;border-color:#75c4ad;color:#d3e5e2;border-radius:0 14px 14px 0}.program-card{position:relative}.program-card.is-done{border-color:#568e78}.program-card .progress{background:#334e56}.program-card .btn{width:100%}.library-grid{gap:16px}.favorite-card{border-radius:20px}.favorite-card .favorite-card-main{padding:22px}.favorite-card .tag{background:#203640;border-color:#536f7a;color:#d2e2e6}.favorite-card .favorite-card-footer{background:#15212e;border-color:#354b57}.filters input,.filters select{background:#132330}.tag{color:#d4e1e5;border-color:#526b77;background:#20313f}.tag.mint{background:#213e3e;color:#b8f4e0;border-color:#5e8c7e}
input:not([type=checkbox]):not([type=range]):not([type=hidden]),select,textarea{border-color:#59717d;background-color:#12222e;color:#f2f8f8;border-radius:12px;min-height:48px}input::placeholder,textarea::placeholder{color:#a4b9be}label{color:#c5d6d9}details{border-color:#425d67}summary{min-height:48px;display:list-item;padding:12px 14px;line-height:1.5;color:#baf4e2;font-weight:650;background:#203641;border-radius:12px;cursor:pointer}details[open]>summary{background:#244843;color:#d5ffef;border-bottom:1px solid #4c766d;border-radius:12px 12px 0 0}summary::marker{color:#b4f4df}details>p,details>.scale-theory{margin:16px}.loop-choice,.setting-check{min-height:44px}.loop-choice{padding:5px 7px;border:1px solid #54717c;background:#1b303c;border-radius:10px;color:#d0e0e3}input[type=checkbox]{accent-color:var(--mint)}.player-options>summary{padding:7px 12px;min-height:44px;border:1px solid #5c7e7d;background:#25443f;color:#c5ffeb}.tab-help>summary,.explanation-size147>summary,.practice-controls>summary{border:1px solid #52766f}.player-options-body{background:#1d333d;border:1px solid #5a7a80;border-radius:14px}.player-options-body label,.player-options-body p{color:#c8dadd}.tab-size-controls147{border-color:#547977;background:#1b323c;border-radius:14px}.tab-size-controls147 label{color:#d5f4ec}.tab-size-controls147 .btn{border-color:#60817d;background:#274640;color:#d0fdea}.tab-size-number147{min-width:88px}
#dialog{background:#111f2c;border:1px solid #55717d;border-radius:26px}#dialogNav{background:#172b36;border-color:#3d5966;padding:10px 16px}#dialogNav .close{background:#243c48;border:1px solid #5f7a86;color:#e3f1ef}#dialogBody .dialog-head{background:#162733}.dialog-head h2{font-size:calc(25px * var(--text-scale,1));line-height:1.3}.practice-quick148{background:linear-gradient(125deg,#1b393a,#1b2c3c);border-color:#507b73;border-radius:18px}.quick-label148{color:#b7eddf}.practice-actions148{gap:8px;margin-top:12px;flex-wrap:wrap}.practice-actions148 .btn{font-size:calc(13px * var(--text-scale,1));min-height:44px}.practice-actions148 [data-action=cancel-practice]{border:1px solid #6f6466;color:#f6c8bb;background:#2b3039}.practice-actions148 [data-action=finish]{background:#25473f;color:#c7fbe5;border-color:#6da78d}.compact-player{background:#203941;border-color:#5b7b7b}.compact-player [data-action=demo]{border-color:#6a978a;color:#d3ffed;background:#2b4c45}.score-bar{border-color:#46616d!important;background:#101f2c}.score-bar-title{background:#24404c!important;color:#d4e9e5}.score-head{color:#bfced3}.score-next{color:#c1d1d7}.exercise-explanations .steps li{background:#182b38;border-color:#4c6873}.rest-legend150{vertical-align:middle}.notation-key{gap:10px}.notation-key>span{display:inline-flex;align-items:center;gap:5px;padding:5px 8px}.hr{border-color:#354c59}
.progress-overview150{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}.progress-overview150 article{display:flex;flex-direction:column;gap:8px}.progress-overview150 strong{font-size:calc(28px * var(--text-scale,1));line-height:1.25;overflow-wrap:anywhere}.calendar-feature150{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.calendar-feature150 p{margin-bottom:0}.calendar-feature150 .btn{flex:none}.achievement-hero{background:#193137;border-color:#4b716b}.medal-card.current{background:linear-gradient(135deg,#245148,#1e303c)}.practice-calendar{background:#192e38;border-color:#4e6f76}.calendar-day{border-color:#4e6e78}.history-table th{background:#26464d}.history-table td{border-color:#3e5865}.history-controls{background:#172c37}.review-card,.review-item{border-color:#527a77}.review-panel{background:#192d36}
.instrument-grid150{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:32px}.instrument-card150{display:flex;flex-direction:column;align-items:flex-start;padding:26px}.instrument-card150 h2{font-size:calc(26px * var(--text-scale,1));margin:14px 0 8px;line-height:1.3}.instrument-card150 .eyebrow{font-size:11px;letter-spacing:1.2px}.instrument-card150 .btn{margin-top:auto;width:100%}.instrument-mark150{height:48px;width:48px;display:grid;place-items:center;border:1px solid #557d77;border-radius:14px;background:#294f49;margin-bottom:24px;color:#b0f6de}.instrument-mark150 svg{width:25px;height:25px}.tools-settings150{margin:16px 0;border:1px solid #405b66;border-radius:16px;background:#182c38;padding:0;overflow:hidden}.tools-settings150>summary{border-radius:15px;padding:14px 18px}.tools-settings150>.panel{border:0;background:transparent;border-radius:0;box-shadow:none;padding:20px}.tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.tools-grid>.tools-settings150{margin:0}.settings-heading150{margin-bottom:14px}.segmented150{display:flex;gap:8px;margin-bottom:20px}.segmented150 .btn{flex:1;font-size:calc(14px * var(--text-scale,1));padding:10px}.tuner-display{background:radial-gradient(ellipse at center,#244c48,#182e39 72%);border-color:#527d76}.tuner-note.accidental150{font-size:clamp(30px,7vw,58px);letter-spacing:-1px}.standalone-metro150>.btn{width:100%;margin:12px 0 24px}.standalone-metro150 .bpm-row{max-width:400px;margin:auto}.standalone-metro150 #bpm{font-size:42px;text-align:center}.standalone-metro150 .pulse-count{color:#b9f4e3}
/* Inline non-modal coaching uses the top layer without moving keyboard focus. */
aside.exercise-coach150{position:fixed;inset:0;display:none;min-height:0;max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));height:max-content;width:min(540px,calc(100vw - 24px));max-width:calc(100vw - 24px);margin:auto;border:1px solid #8dd6bd;border-radius:22px;padding:0;background:#19343b;color:#edf9f5;box-shadow:0 18px 80px #000a;z-index:1000;overflow:hidden;grid-template-rows:auto minmax(0,1fr) auto;font-size:calc(15px * var(--text-scale,1))}aside.exercise-coach150:popover-open{display:grid}aside.exercise-coach150:not([popover]){display:grid}.exercise-coach150::backdrop{background:transparent;pointer-events:none}.coach-header150{padding:12px 18px;display:flex;align-items:center;gap:12px;justify-content:space-between;background:#244c46;border-bottom:1px solid #659d88;min-width:0}.coach-header150 .eyebrow{font-size:10px;letter-spacing:1.2px;color:#baffdf}.coach-header150 button{flex:none;white-space:nowrap;color:#e1fff1;border:1px solid #70a894;border-radius:10px;font-size:13px;min-width:44px;min-height:44px}.coach-copy150{min-height:0;overflow:auto;overscroll-behavior:contain;padding:18px 22px}.coach-copy150 h2{font-size:calc(23px * var(--text-scale,1));line-height:1.3}.coach-copy150>p{font-size:calc(13px * var(--text-scale,1));color:#c2dbd7}.coach-copy150 ol{margin:18px 0;padding-left:24px}.coach-copy150 li{padding-left:5px;margin:12px 0;line-height:1.55}.coach-copy150 li::marker{color:#a1f0cc;font-weight:700}.coach-copy150 .coach-motivation150{color:#bafadd;border-top:1px solid #4b7569;padding-top:16px;margin-bottom:0}.coach-footer150{padding:12px 18px;border-top:1px solid #537e70;background:#1c3a3e}.coach-footer150 .btn{width:100%;font-size:calc(14px * var(--text-scale,1));white-space:normal}
.sections150{position:fixed;z-index:30;right:12px;bottom:calc(90px + env(safe-area-inset-bottom));width:min(360px,calc(100vw - 24px));max-height:calc(100dvh - 130px);overflow:auto;background:#19323d;border:1px solid #68958b;border-radius:20px;padding:12px;box-shadow:0 16px 60px #0008}.sections150 .row{padding:2px 6px 8px;color:#d5f1e8}.sections150>.btn{display:flex;justify-content:flex-start;width:100%;margin:7px 0;background:#243f47;border-color:#51767a;gap:14px}.sections150>.btn>span:last-child{margin-left:auto}.sections150 strong{font-size:18px}
@media(min-width:761px) and (min-height:501px){.sections150{display:none}}
@media(max-width:1100px){.shell{grid-template-columns:180px minmax(0,1fr)}#nav button{font-size:calc(13px * var(--text-scale,1));padding:12px 8px;gap:8px}.instrument-grid150{grid-template-columns:1fr}.instrument-mark150{margin-bottom:16px}.calendar-feature150{align-items:stretch;flex-direction:column}.calendar-feature150 .btn{width:100%}}
@media(max-width:760px),(max-height:500px) and (max-width:1100px){.shell{display:block}.shell>aside{min-height:0;padding:0;border:0;background:transparent}main{padding:26px 16px calc(118px + env(safe-area-inset-bottom))}.top{padding:14px 16px;align-items:center;gap:12px}.brand{font-size:22px}.brand small{font-size:8px;letter-spacing:1.2px}.top-controls{gap:6px}.top-controls select{min-width:70px!important;width:76px!important;padding-inline:8px!important}#nav{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px;padding:7px 8px calc(7px + env(safe-area-inset-bottom));background:#152936;border-top:1px solid #4a696c;backdrop-filter:blur(18px)}#nav .secondary150{display:none!important}#nav .more150{display:flex}#nav button{padding:8px 2px;min-height:64px;display:flex;flex-direction:column;justify-content:center;gap:3px;border-radius:13px;font-size:calc(11px * var(--text-scale,1));line-height:1.25;overflow-wrap:anywhere;text-align:center}#nav .nav-icon{width:22px;height:22px}#nav .nav-icon svg{width:22px;height:22px}#nav button.active{border-color:#638a77;background:#2c5148}#railNote{display:none}.top #versionBadge{padding:4px 8px;min-height:40px;font-size:11px}.heading h1{font-size:calc(29px * var(--text-scale,1));letter-spacing:-1px}.heading .eyebrow{font-size:10px}.heading{margin-bottom:22px}.hero{padding:22px;gap:18px}.hero h2{font-size:calc(23px * var(--text-scale,1))}.hero .ring{width:102px;height:102px}.hero .ring>div{width:86px;height:86px}.hero .ring strong{font-size:28px}.hero .ring span{font-size:11px}.task-row .exercise{padding:18px 16px;gap:10px}.task-row .completion-wrap{margin:0 14px 16px}.panel{border-radius:18px;padding:20px}.instrument-card150{padding:22px}.instrument-card150 h2{font-size:calc(25px * var(--text-scale,1))}.tools-grid{grid-template-columns:1fr}.progress-overview150{gap:10px}.progress-overview150 article{padding:16px}.progress-overview150 strong{font-size:calc(23px * var(--text-scale,1))}.progress-overview150 .eyebrow{font-size:10px;letter-spacing:.8px}.filters{gap:12px}.segmented150{flex-wrap:wrap}.segmented150 .btn{min-width:110px}#dialog{border-radius:20px;max-width:calc(100vw - 12px)}#dialogNav{padding:7px 12px}.dialog-head h2{font-size:calc(22px * var(--text-scale,1))}.practice-actions148{display:grid;grid-template-columns:1fr 1fr}.practice-actions148 [data-action=exercise-hints150]{grid-column:1/-1}.practice-actions148 .btn{padding:8px 10px}.calendar-feature150{gap:14px}}
@media(max-width:380px){.top{gap:8px;padding:12px}.top-controls{width:auto;max-width:52%;justify-content:flex-end}.brand{font-size:19px;gap:8px}.brand-logo{width:36px;height:36px}.brand small{font-size:7px;letter-spacing:1px}.top-controls select{width:68px!important;min-width:68px!important}.top #versionBadge{font-size:10px;padding:4px 6px}main{padding-inline:12px}.hero{padding:18px}.hero h2{font-size:calc(21px * var(--text-scale,1))}.coach-copy150{padding:15px 17px}.coach-header150{padding:8px 12px}.coach-header150 .eyebrow{font-size:9px;letter-spacing:.5px}.coach-footer150{padding:10px 12px}}
@media(max-height:500px){aside.exercise-coach150{max-height:calc(100dvh - 12px);width:min(620px,calc(100vw - 24px));border-radius:16px}.coach-header150{padding:4px 14px}.coach-copy150{padding:10px 18px}.coach-copy150 h2{font-size:20px;margin-bottom:8px}.coach-copy150 li{margin:10px 0}.coach-footer150{padding:6px 14px}.coach-footer150 .btn{min-height:44px}.coach-header150 .eyebrow{font-size:10px}.sections150{bottom:80px;max-height:calc(100dvh - 95px)}.practice-actions148{display:flex}.practice-actions148 [data-action=exercise-hints150]{grid-column:auto}}
@media(prefers-reduced-motion:no-preference){.instrument-card150,.calendar-feature150{animation:surface-in .25s ease-out both}.exercise-coach150:popover-open{animation:coach-fade150 .18s ease-out both}}

@keyframes coach-fade150{from{opacity:0}to{opacity:1}}

/* Bounded hints keep some practice context visible; the checklist scrolls inside. */
aside.exercise-coach150{max-height:min(680px,calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}
@media(min-width:761px){.top-controls select{min-width:90px!important;width:90px!important}}
@media(max-height:500px){aside.exercise-coach150{max-height:calc(100dvh - 12px)}}

/* END STYLES 0.15.0 */
/* BEGIN STYLES 0.15.1 */
/* 0.15.1: full available exercise viewport, unscaled compact controls. */
#dialog.exercise-screen151{box-sizing:border-box;width:calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));max-width:none;height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));margin:auto;border-radius:18px;scrollbar-gutter:stable;animation:none!important;transform:none!important}
#dialog.exercise-screen151 .dialog-content{padding:12px clamp(8px,1.3vw,20px) 24px}
#dialog.exercise-screen151{overflow-anchor:none}
#dialog.exercise-screen151 .dialog-head{padding:12px clamp(12px,1.5vw,24px)}
#dialog.exercise-screen151 .dialog-head h2{margin:2px 0;font-size:calc(20px * var(--global-text-scale,1))}
#dialog.exercise-screen151 .dialog-head .eyebrow:empty{display:none}
#dialogNav.single-close151{justify-content:flex-end}
.compact-position151{display:flex;gap:12px;justify-content:flex-end;align-items:center;margin:10px 0;flex-wrap:wrap}
.compact-position151 label{margin:0;font-size:calc(13px * var(--global-text-scale,1))}
.compact-position151 select{width:86px;flex:none;min-width:70px}
#dialog .lesson-actions{margin:8px 0;gap:8px}
#dialog .lesson-actions .btn{font-size:calc(13px * var(--global-text-scale,1));padding:8px 12px;min-height:44px}
#tabSizeControls147.compact-scale151{display:block;padding:0;margin:8px 0;border-radius:12px;--text-scale:var(--global-text-scale,1);font-size:calc(13px * var(--global-text-scale,1));overflow:visible}
.compact-scale151>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 12px;list-style:none;border-radius:11px;font-size:inherit}
.compact-scale151>summary::after{content:'⌄';flex:none}
.compact-scale151>summary::-webkit-details-marker{display:none}
.compact-scale151>summary output{margin-left:auto;color:#c9ffe8}
.compact-scale151[open]>summary::after{content:'⌃'}
.compact-scale151>.tab-size-inputs147{padding:8px 12px 12px}
.compact-scale151:not([open])>.tab-size-inputs147{display:none}
.exercise-hints151{margin-top:14px}
.hint-copy151{padding:12px 18px}
.hint-copy151>p{margin:12px 0}
.exercise-tips151{padding-left:22px;margin:8px 0}
.exercise-tips151 li{margin:10px 0;line-height:1.6}
.hint-motivation151{color:var(--mint)}
.exercise-hints151>.explanation-size147{margin:0 12px 12px}
.exercise-hints151 .exercise-scale-field{padding:12px;margin:0}
.timer-duration151{margin:0;padding:0;border:1px solid #54766e;border-radius:12px;min-width:0;max-width:100%;background:#1c333b}
.timer-duration151>summary{font-size:calc(13px * var(--global-text-scale,1));min-height:44px;padding:9px 12px;white-space:normal}
.timer-duration151[open]{flex:1 0 100%}
.duration-fields151{display:grid;grid-template-columns:minmax(110px,1fr) minmax(76px,110px) auto auto;align-items:center;gap:8px;padding:12px;min-width:0}
.duration-fields151 label{font-size:14px;margin:0;overflow-wrap:anywhere}
.duration-fields151 input{width:100%;min-width:0}
.duration-fields151 p{grid-column:1/-1;margin:0}
.duration-fields151 .duration-error151{font-size:14px;color:var(--danger)}
.duration-error151:empty{display:none}
.app-guide151{box-sizing:border-box;width:min(620px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:0;margin:auto;border:1px solid #699c90;border-radius:22px;background:#172c37;color:var(--text);overflow:hidden;overscroll-behavior:contain}
.app-guide151[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.app-guide151::backdrop{background:#08121cbb;backdrop-filter:blur(5px)}
.app-guide151>header,.app-guide151>footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;background:#203d40;min-width:0}
.app-guide151>header{border-bottom:1px solid #4f776e}
.app-guide151>footer{border-top:1px solid #4f776e}
.app-guide151 header .eyebrow{font-size:11px;letter-spacing:1.8px}
.app-guide151 .app-guide-copy151{min-height:0;overflow:auto;padding:20px 24px;overflow-wrap:anywhere}
.app-guide151 h2{font-size:calc(25px * var(--global-text-scale,1));line-height:1.3;margin:0 0 16px}
.app-guide151 h2:focus{outline:none}
.app-guide151 p{font-size:calc(16px * var(--global-text-scale,1));line-height:1.75;margin:0 0 18px}
.app-guide151 .small{font-size:calc(13px * var(--global-text-scale,1));margin-top:12px}
.app-guide151 .btn,.app-guide151 .textbtn{white-space:normal;min-width:44px;min-height:44px;font-size:calc(14px * var(--control-scale,1));line-height:1.4}
.app-guide151 footer>.primary{margin-left:auto}
.guide-paths151{display:grid;gap:12px}
.guide-paths151 .btn{width:100%;padding:14px}
.manual-entry151{margin-bottom:20px}
.manual-entry151 h2{font-size:calc(20px * var(--global-text-scale,1))}
@media(max-width:560px){.duration-fields151{grid-template-columns:minmax(90px,1fr) minmax(76px,100px)}.duration-fields151>.btn{width:100%}.app-guide151>header,.app-guide151>footer{padding:10px 12px}.app-guide151 .app-guide-copy151{padding:18px}.app-guide151 h2{font-size:calc(22px * var(--global-text-scale,1))}#dialog.exercise-screen151{border-radius:14px}.practice-actions148{gap:6px}.practice-actions148 .btn,.timer-duration151>summary{font-size:calc(12px * var(--global-text-scale,1));padding-inline:10px}}
@media(max-height:460px){#dialog.exercise-screen151{height:calc(100dvh - 8px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:calc(100dvh - 8px - env(safe-area-inset-top) - env(safe-area-inset-bottom));width:calc(100vw - 8px - env(safe-area-inset-left) - env(safe-area-inset-right));border-radius:10px}#dialog.exercise-screen151 .dialog-head{padding:7px 12px}#dialog.exercise-screen151 .dialog-head h2{font-size:calc(17px * var(--global-text-scale,1))}#dialogNav{padding:5px 10px}#dialogNav .btn,#dialogNav .close,#dialogNav .textbtn{min-height:44px}.app-guide151>header,.app-guide151>footer{padding:6px 12px}.app-guide151 .app-guide-copy151{padding:12px 20px}.app-guide151 h2{font-size:calc(21px * var(--global-text-scale,1));margin-bottom:10px}}

/* END STYLES 0.15.1 */
/* BEGIN STYLES 0.15.2 */
/* Separate player and score scroll regions: no floating panel over notes. */
#dialog.exercise-dock152[open]{display:flex;flex-direction:column;overflow:hidden;padding:0}
#dialog.exercise-dock152>#dialogNav{position:relative;top:auto;flex:none;border-radius:0;z-index:2}
#dialog.exercise-dock152>#dialogBody{min-height:0;flex:1 1 auto;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;overflow-anchor:none;scrollbar-gutter:stable;scroll-padding-block:8px}
#exampleDock152{flex:none;min-width:0;max-height:45dvh;overflow-y:auto;overscroll-behavior:contain;padding:6px clamp(8px,1.3vw,20px);background:#172c37;border-bottom:1px solid #4b6d72}
#exampleDock152 .compact-player{position:static!important;top:auto;z-index:auto;margin:0;padding:6px 10px;box-shadow:none}
#exampleDock152 .player-main{gap:8px}
#exampleDock152 .player-main>.btn{min-height:44px;padding:7px 10px;font-size:calc(14px * var(--control-scale,1))}
#exampleDock152 .player-tempo{font-size:10px}
#exampleDock152 #demoBpm{min-height:44px;height:44px;font-size:18px;width:70px}
#exampleDock152 .player-toggles{flex-wrap:wrap;gap:5px;margin-top:5px;min-width:0}
#exampleDock152 .player-toggles .loop-choice{font-size:calc(12px * var(--control-scale,1));padding:3px 5px;gap:5px;min-height:44px}
#exampleDock152 .player-toggles input[type=checkbox]{width:22px;height:22px;min-width:22px;flex:none}
#exampleDock152 .player-options{position:static;min-width:0}
#exampleDock152 .player-options>summary{min-height:44px;font-size:calc(12px * var(--control-scale,1));padding:7px 8px}
#exampleDock152 .player-options[open]{flex-basis:100%;margin-left:0}
#exampleDock152 .player-options[open]>summary{width:fit-content;margin-left:auto}
#exampleDock152 .player-options-body{position:static;inset:auto;width:auto;max-height:none;margin-top:6px;padding:10px;box-shadow:none;border-radius:10px}
#exampleDock152 #demoStatus:empty{display:none}
#dialog.exercise-dock152 #tabSizeControls147{position:static!important;top:auto!important;z-index:auto!important;scroll-margin-block:8px}
#dialog.exercise-dock152 :is(.notation,.score-bar,.score-line){scroll-margin-block:8px}
.practice-quick148 .quick-column148{grid-template-rows:auto minmax(90px,1fr) auto!important}
.practice-quick148 .bpm-row{align-self:center}
.practice-clock152{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0}
.timer-ring152{position:relative;width:126px;max-width:100%;aspect-ratio:1;flex:0 1 126px;min-width:72px;display:grid;place-items:center}
.timer-ring152>svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible;pointer-events:none}
.timer-ring152 circle{fill:none;stroke-width:5}
.timer-ring152 .timer-track152{stroke:#446568}
.timer-ring152 .timer-remaining152{stroke:#8aebd0;stroke-linecap:round}
.practice-quick148 .timer-ring152 .timer{font-size:clamp(18px,calc(24px * var(--global-text-scale,1)),38px);font-variant-numeric:tabular-nums;z-index:1}
.practice-clock152 .add-time152{flex:none;min-width:44px;min-height:44px;padding:5px 7px;font-size:calc(13px * var(--control-scale,1));border:1px solid #78b29f;border-radius:12px;color:#d4ffed;background:#284d45;line-height:1.3;white-space:normal}
.practice-clock152 .add-time152:disabled{opacity:.45}
.timer-status152{font-size:12px;color:var(--muted);margin:0;text-align:center}
.timer-status152:empty{display:none}
@media(max-width:420px){.timer-ring152{flex-basis:90px}.practice-clock152{gap:4px}.practice-clock152 .add-time152{font-size:calc(11px * var(--control-scale,1));padding:5px;max-width:52px}.practice-quick148{gap:10px;padding:12px 8px}.practice-quick148 .quick-label148{font-size:calc(12px * var(--global-text-scale,1))}}
@media(min-width:650px) and (max-height:500px){#exampleDock152 .compact-player{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}#exampleDock152 .player-toggles{margin-top:0;justify-content:flex-end}#exampleDock152 #demoStatus{grid-column:1/-1}.timer-ring152{flex-basis:100px}}
@media(prefers-reduced-motion:reduce){.timer-remaining152{transition:none!important}}

/* END STYLES 0.15.2 */

/* BEGIN STYLES 0.15.3 */
/* Keep noon at the top; remove the right side of the ring first. */
.timer-ring152>svg{transform:rotate(-90deg) scaleY(-1)}
.timer-ring152[aria-valuenow="0"] .timer-remaining152{visibility:hidden}
.practice-quick148 .timer-ring152 .timer{letter-spacing:.045em;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.15;width:max-content;max-width:none;margin:0;text-indent:0}
.brand img,.intro-brand img{object-fit:contain;background:#10151f}

/* END STYLES 0.15.3 */

/* BEGIN STYLES 0.15.5 */
/* No player is ever a sticky descendant of the scrolling lesson, including
   the first layout before observers run. Its final dock owns its paint area. */
#dialog .compact-player{position:static!important;top:auto!important;inset:auto!important;z-index:auto!important;transform:none!important;float:none!important}
#exampleDock152{position:relative;isolation:isolate;contain:paint;flex-shrink:0;overflow-x:hidden}
#dialog.exercise-dock152>#dialogBody{position:relative;scroll-behavior:auto;overflow-anchor:none}
#dialog.exercise-dock152 #tabSizeControls147{scroll-margin-block:0}
.practice-clock152 .time-adjust155{display:grid;gap:4px;flex:none;align-content:center;min-width:44px}
.time-adjust155 .add-time152{margin:0;min-height:44px}
.time-adjust155 .subtract-time155{background:#243e43;border-color:#658c87}
.time-adjust155 .subtract-time155:disabled{opacity:.45}

/* END STYLES 0.15.5 */

/* BEGIN STYLES 0.15.6 */
/* 0.15.6: supplementary content never occupies the scrolling note surface. */
.tab-legend156{margin-block:18px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(128,224,203,.04)}
.tab-legend156>summary{padding:14px 16px;min-height:48px;cursor:pointer;color:var(--mint);font-weight:650}
.tab-legend156 dl{margin:0;padding:0 16px 16px;display:grid;grid-template-columns:minmax(54px,auto) minmax(0,1fr);gap:10px 16px;font-size:.9em}
.tab-legend156 dt{font-weight:700;color:#eaf2f5}.tab-legend156 dd{margin:0;overflow-wrap:anywhere}
.tab-legend156 .legend-finger156{color:#8cebd5;font-size:.8em;vertical-align:super}
.tab-legend156 svg{vertical-align:middle}
#exerciseNotes156{position:fixed;inset:0;margin:auto;width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 28px);padding:0;border:1px solid #536e79;border-radius:20px;background:#152430;color:#edf4f6;box-shadow:0 18px 80px #0009;overflow:hidden;display:none;grid-template-rows:auto minmax(0,1fr) auto;z-index:2147483000}
#exerciseNotes156:popover-open,#exerciseNotes156.notes-fallback156{display:grid}
.notes-header156{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid #405661}
.notes-header156 h2{font-size:1.1rem;line-height:1.3;margin:0;overflow-wrap:anywhere}
.notes-header156 button{flex-shrink:0;min-height:44px}
.notes-copy156{padding:16px;overflow-y:auto;overscroll-behavior:contain;min-width:0}
.notes-copy156 label{display:block;font-weight:600;margin-bottom:8px}
.notes-copy156 textarea{display:block;width:100%;min-height:94px;resize:vertical;box-sizing:border-box;font:inherit;line-height:1.5}
.notes-copy156 details{border-top:1px solid #405661;padding-block:12px;overflow-wrap:anywhere}
.notes-copy156 summary{min-height:44px;cursor:pointer;font-size:.9em}
.notes-copy156 h3{font-size:1rem;margin-top:22px}.notes-save156{min-height:24px;color:#8cebd5;font-size:.85em;margin:5px 0 10px}
.notes-footer156{padding:12px 16px;border-top:1px solid #405661}.notes-footer156 button{width:100%;min-height:44px}
.review-card .review-fields{min-width:0}.review-card .review-fields input,.review-card .review-fields select,.review-card .review-fields textarea{max-width:100%;box-sizing:border-box}
.review-card summary{overflow-wrap:anywhere}.review-card .review-tempos>div{min-width:0}
@media(max-width:480px){.review-card .review-tempos{grid-template-columns:minmax(0,1fr)}.tab-legend156 dl{gap:10px 12px;padding-inline:12px}}

/* END STYLES 0.15.6 */

/* BEGIN STYLES 0.15.7 */
/* Elapsed time has no shrinking ring or duration controls. */
.practice-quick148 .quick-column148{grid-template-columns:minmax(0,1fr)}
.practice-stopwatch157{display:grid;place-items:center;container-type:inline-size;min-height:100px;min-width:0;width:100%;border:1px solid #446568;border-radius:18px;background:#142731}
.practice-quick148 .practice-stopwatch157 .timer{font-size:clamp(24px,calc(32px * var(--global-text-scale,1)),44px);font-variant-numeric:tabular-nums;letter-spacing:.045em;line-height:1.25;white-space:nowrap;min-width:0;max-width:100%;margin:0;padding:10px 4px}
.practice-stopwatch157[data-running="true"]{border-color:#8aebd0}
.practice-quick148 .practice-stopwatch157.long-time157 .timer{font-size:clamp(19px,calc(25px * var(--global-text-scale,1)),36px)}
@media(max-width:420px){.practice-stopwatch157{min-height:90px}.practice-quick148 .practice-stopwatch157 .timer{font-size:24px}.practice-quick148 .practice-stopwatch157.long-time157 .timer{font-size:16px}}
@supports(font-size:1cqi){.practice-quick148 .practice-stopwatch157 .timer{font-size:min(clamp(24px,calc(32px * var(--global-text-scale,1)),44px),25cqi)}.practice-quick148 .practice-stopwatch157.long-time157 .timer{font-size:min(clamp(19px,calc(25px * var(--global-text-scale,1)),36px),16cqi)}}

/* END STYLES 0.15.7 */

/* BEGIN STYLES 0.15.8 */
.top{gap:16px;min-height:108px;align-items:center}.brand{min-width:0;flex:1}.brand>div{min-width:0}.brand-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.brand-name{margin-bottom:6px}.creator-link158{display:inline-flex;align-items:center;gap:9px;border:1px solid #73ccb7;border-radius:13px;padding:8px 11px;min-height:52px;background:linear-gradient(120deg,#244f49,#1c3544);box-shadow:0 0 16px #63eac514;color:#d4fff1;text-decoration:none;letter-spacing:0;max-width:100%;flex:none}.creator-link158:hover{background:#305e55;box-shadow:0 0 20px #63eac52b}.creator-link158>svg{width:23px;height:23px;flex:none}.creator-copy158{display:grid;line-height:1.25;gap:2px}.creator-copy158 small{font-size:calc(10px * var(--global-text-scale,1));letter-spacing:.2px;font-weight:500;color:#c6eadf}.creator-copy158 strong{font-size:calc(13px * var(--global-text-scale,1));font-weight:750;white-space:nowrap}.creator-arrow158{font-size:16px;font-weight:500}.top #versionBadge{flex:none;margin:0;min-height:40px;white-space:nowrap}.top-controls{flex:none;max-width:none}.privacy-copy,.privacy-copy p,.privacy-copy h1,.privacy-copy h2{min-width:0;overflow-wrap:anywhere;word-break:normal}.practice-goal158{font-size:calc(11px * var(--global-text-scale,1));color:#b2c9c7;line-height:1.35;text-align:center;padding:0 5px 8px}.practice-stopwatch157:has(.practice-goal158){align-content:center;gap:0}.practice-quick148 .practice-stopwatch157 .timer{padding-bottom:4px}
.program-review158{position:fixed;inset:0;margin:auto;width:min(660px,calc(100vw - 24px));height:max-content;max-height:calc(100dvh - 24px);min-height:0;padding:0;display:flex;flex-direction:column;border:1px solid #7ab9a9;border-radius:20px;background:#182d37;color:#f0f8f5;box-shadow:0 18px 80px #0008;z-index:20;overflow:hidden}.program-review158::backdrop{background:transparent;pointer-events:none}.program-review158>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid #4b716c;flex:none}.program-review158 .eyebrow{font-size:calc(11px * var(--global-text-scale,1));letter-spacing:.8px}.program-review158>header button{min-height:44px;flex:none}.program-review-copy158{overflow:auto;overscroll-behavior:contain;min-height:0;padding:18px 22px;scrollbar-gutter:stable}.program-review-copy158 h2{overflow-wrap:anywhere}.program-review158 .review-card{padding:0;border:0;background:none;margin:0}.program-review158 .review-fields{padding:0}.program-review158 label{overflow-wrap:anywhere}.program-review158 input,.program-review158 select,.program-review158 textarea{min-width:0;max-width:100%}.program-review158>footer{padding:12px 18px;display:flex;gap:10px;border-top:1px solid #4b716c;flex-wrap:wrap;flex:none;background:#1b3a3c}.program-review158>footer button{flex:1;min-width:100px;white-space:normal;line-height:1.3}.program-review158 .review-tempos{grid-template-columns:repeat(2,minmax(0,1fr))}.program-review158 .setting-check{display:flex;gap:10px;align-items:flex-start}.program-review158 .setting-check input{flex:none;width:22px;min-height:22px}.program-review158 .setting-check span{min-width:0}.program-review158 .small{font-size:calc(12px * var(--global-text-scale,1));line-height:1.5}
@media(max-width:680px){.top{display:grid;grid-template-columns:32px minmax(0,1fr) auto;padding:12px;gap:10px}.brand{display:contents}.brand>img{display:block;grid-column:1;grid-row:1;width:32px;height:32px}.brand>div{display:contents}.brand-name{grid-column:2;grid-row:1;margin:0;font-size:calc(22px * var(--global-text-scale,1))}.brand-meta{grid-column:1/-1;grid-row:2;gap:12px;justify-content:flex-start;flex-wrap:nowrap}.top-controls{grid-column:3;grid-row:1;max-width:none;gap:5px;flex-wrap:nowrap}.creator-link158{padding:8px 10px}.creator-copy158 strong{font-size:calc(13px * var(--global-text-scale,1))}.creator-copy158 small{font-size:calc(10px * var(--global-text-scale,1))}.program-review-copy158{padding:14px 16px}.program-review158>header,.program-review158>footer{padding:9px 12px}}
@media(max-width:360px){.brand-name{font-size:20px}.top-controls select{width:64px!important;min-width:64px!important}.top-controls #privacyButton{padding:4px;min-width:36px}.creator-link158{gap:7px;padding:7px 9px}.creator-arrow158{display:none}.brand-meta{gap:8px}.top #versionBadge{font-size:10px;padding:4px 6px}.program-review158 .review-tempos{grid-template-columns:minmax(0,1fr)}}
@media(max-height:440px){.program-review158{max-height:calc(100dvh - 12px)}.program-review158>header,.program-review158>footer{padding:5px 12px}.program-review-copy158{padding:10px 16px}}

/* END STYLES 0.15.8 */

/* BEGIN STYLES 0.15.9 */
.program-card.is-locked159{border-color:#4a6269;background:#172935}.program-lock159{font-size:calc(13px * var(--global-text-scale,1));line-height:1.5;color:#c1d7d2;overflow-wrap:anywhere;margin:12px 0}.program-card .locked-day159,.hero .locked-day159{opacity:1;background:#233843;border-color:#57717a;color:#c1d2d7;white-space:normal;line-height:1.35}.program-finish159{position:fixed;inset:0;margin:auto;width:min(600px,calc(100vw - 24px));height:max-content;max-height:calc(100dvh - 24px);min-height:0;padding:0;display:flex;flex-direction:column;border:1px solid #83b9a6;border-radius:20px;background:#19313a;color:#edf7f2;box-shadow:0 16px 70px #0009;z-index:22;overflow:hidden}.program-finish159::backdrop{background:transparent;pointer-events:none}.program-finish159>header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #52716d;padding:10px 18px}.program-finish159 .eyebrow{font-size:calc(11px * var(--global-text-scale,1));letter-spacing:.8px}.program-finish159>header button{min-height:44px;flex:none}.program-finish-copy159{padding:20px 22px;overflow:auto;overscroll-behavior:contain;min-height:0;scrollbar-gutter:stable}.program-finish-copy159 h2{font-size:calc(23px * var(--global-text-scale,1));overflow-wrap:anywhere}.program-finish-copy159 p{line-height:1.55;overflow-wrap:anywhere}.finish-count159{color:#a4f1d6;font-weight:750}.finish-list159{list-style:none;padding:0;margin:14px 0;display:grid;gap:9px}.finish-list159 li{display:flex;align-items:flex-start;gap:10px;border:1px solid #4b6969;border-radius:12px;padding:11px 12px;background:#152a35}.finish-list159 li>span{color:#9de8d1;flex:none;width:22px}.finish-list159 strong{font-size:calc(14px * var(--global-text-scale,1));font-weight:600;min-width:0;overflow-wrap:anywhere}.program-finish159>footer{flex:none;border-top:1px solid #52716d;padding:12px 18px;background:#214440}.program-finish159>footer button{width:100%;min-height:46px;line-height:1.4;white-space:normal}.program-finish159 .small{font-size:calc(12px * var(--global-text-scale,1))}
@media(max-width:380px){.program-finish-copy159{padding:14px 16px}.program-finish-copy159 h2{font-size:calc(20px * var(--global-text-scale,1))}.program-finish159>header,.program-finish159>footer{padding:8px 12px}}
@media(max-height:440px){.program-finish159{max-height:calc(100dvh - 12px)}.program-finish159>header,.program-finish159>footer{padding:5px 12px}.program-finish-copy159{padding:12px 16px}}

/* END STYLES 0.15.9 */

/* BEGIN STYLES 0.15.10 */
/* Keep intentional reading sizes separate from menu and control typography. */
.exercise-hints151>summary{font-size:calc(14px * var(--global-text-scale,1));line-height:1.5;white-space:normal;word-break:normal;overflow-wrap:break-word}
.hint-copy151{font-size:calc(16px * var(--text-scale,1));min-width:0;overflow-wrap:break-word}
.exercise-explanations>.exercise-hints151{min-width:0;max-width:100%}
#dialog .exercise-hints151>.explanation-size147{--text-scale:var(--global-text-scale,1)}
#dialog :is(button,summary,label,select,input){min-width:0}
#dialog :is(.btn,.textbtn,.close){white-space:normal;line-height:1.4;overflow-wrap:break-word}
#dialog .dialog-head{overflow-wrap:anywhere;word-break:normal}
#dialog .lesson-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(90px * var(--global-text-scale,1))),1fr));gap:8px;min-width:0}
#dialog .lesson-actions>.btn{width:100%;max-width:100%;min-width:0;justify-content:center}
.compact-scale151>summary{flex-wrap:wrap}
.compact-scale151>summary>span{flex:1 1 auto;min-width:0}
.practice-quick148{grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(132px * var(--global-text-scale,1))),1fr))}
.practice-quick148 .quick-column148{min-width:0;align-content:start;grid-template-rows:auto auto auto!important}
.practice-quick148 .quick-label148{min-width:0;white-space:normal;overflow-wrap:break-word;line-height:1.4;height:auto}
.practice-quick148 .bpm-row{grid-template-columns:34px minmax(0,1fr) 34px;gap:6px;width:100%;min-width:0;max-width:100%}
.practice-quick148 .bpm-row .textbtn{flex:none;min-width:34px;padding:4px}
.practice-quick148 .bpm-row input{width:100%;min-width:0;height:auto;min-height:48px;font-size:calc(24px * var(--global-text-scale,1));line-height:1.3}
.practice-quick148 .practice-stopwatch157 .timer{width:max-content;max-width:none;box-sizing:border-box;font-size:calc(32px * var(--global-text-scale,1));padding:8px 6px 4px;letter-spacing:.045em;line-height:1.3;white-space:nowrap}
.practice-stopwatch157{min-width:0;max-width:100%;padding-inline:4px}
.practice-goal158{max-width:100%;white-space:normal;overflow-wrap:break-word}
.practice-actions148 .btn{min-width:0;white-space:normal}
.coach-header150 .eyebrow{font-size:calc(10px * var(--global-text-scale,1));line-height:1.5;white-space:normal;overflow-wrap:break-word}
.coach-copy150{overflow-x:hidden;overflow-wrap:break-word}
.coach-copy150 ol{padding-left:1.5em}
.coach-copy150 h2{font-size:calc(23px * var(--global-text-scale,1));overflow-wrap:break-word}
aside.exercise-coach150{--text-scale:var(--global-text-scale,1)}
#dialog.exercise-screen151{scrollbar-gutter:auto}
#dialogBody{scrollbar-gutter:stable}
/* Reuse the existing navigation row: no extra rail and no overlay on notes. */
#dialogNav{gap:8px}
#dialogNav>.close{order:2}
#metroBubbleTray1510{order:1;flex:none;display:flex;align-items:center;margin-inline-start:auto;overflow:visible}
#metroBubbleTray1510[hidden]{display:none!important}
#metroBubble1510{display:grid;place-items:center;flex:none;width:48px;height:48px;min-width:48px;min-height:48px;padding:0;border:1px solid #71b8a5;border-radius:50%;background:#244b47;color:#c8ffea;box-shadow:0 2px 8px #0004;cursor:pointer;touch-action:manipulation}
#metroBubble1510 svg{width:25px;height:25px;pointer-events:none}
#metroBubble1510[aria-pressed="true"]{background:#8aebd0;color:#102d25;border-color:#b8ffe9}
#metroBubble1510:focus-visible{outline:3px solid #d0fff0;outline-offset:2px}
@media(max-width:360px){.practice-quick148{gap:8px;padding-inline:8px}.practice-actions148{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr))}.coach-header150{padding-inline:12px;gap:8px}.coach-copy150{padding-inline:16px}}
@media(max-height:440px){#exampleDock152{max-height:40dvh}}

/* END STYLES 0.15.10 */

/* BEGIN STYLES 0.15.11 */
/* Compact practice interface. One fixed control region and a separate scrolling score. */
/* A full-height feedback window must not slide outside a short viewport. */
#dialog:not(.exercise-screen151){animation:dialog-fade1511 .12s ease-out;transform:none}
dialog.practice-help,dialog.app-guide151,dialog.guitar-fact-dialog{animation:dialog-fade1511 .12s ease-out;transform:none}
@keyframes dialog-fade1511{from{opacity:.65}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#dialog{animation:none!important}}
#dialog.practice-compact{display:flex;flex-direction:column;overflow:hidden}
#dialog.practice-compact>#dialogNav{padding:5px 10px;gap:8px;min-height:48px;align-items:center;flex:none}
#dialog.practice-compact>#dialogNav .close{min-height:44px;padding:7px 10px;flex:none;font-size:calc(13px * var(--control-scale,1));order:2}
#dialog.practice-compact>#dialogNav [data-action="dialog-back"]{font-size:calc(12px * var(--control-scale,1));padding:6px;min-height:44px;order:-1}
#compact1511Heading{flex:1;min-width:0;display:grid;gap:2px;order:0}
#compact1511Heading .compact1511-tag{font-size:9px;letter-spacing:.08em;color:#8aebd0;line-height:1.1}
#compact1511Name{font-size:calc(14px * var(--global-text-scale,1));line-height:1.3;overflow-wrap:anywhere}
#compact1511Heading #sessionExercise{font-size:calc(13px * var(--control-scale,1));min-height:40px;padding:5px 26px 5px 8px;line-height:1.3;width:100%;margin:0;min-width:0;max-width:100%}
#dialog.practice-compact>#dialogBody{display:flex;flex-direction:column;overflow:hidden!important;padding:0;min-height:0;flex:1;scrollbar-gutter:auto}
#dialog.practice-compact>#dialogBody>.dialog-head{display:none}
#dialog.practice-compact #compact1511ScoreScroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;overflow-anchor:none;scrollbar-gutter:stable;padding:7px 10px 20px;scroll-padding-top:8px}
#compact1511Transport{flex:none;min-width:0;padding:5px 10px 7px;background:#172f38;border-bottom:1px solid #4b6d72;display:flex;gap:8px;align-items:center;--text-scale:var(--global-text-scale,1)}
#dialog.practice-compact #compact1511Transport .practice-quick148{display:grid;grid-template-columns:minmax(130px,1fr) minmax(135px,1fr) minmax(95px,.7fr);gap:8px;align-items:center;flex:1;padding:0;margin:0;border:0;border-radius:0;background:none;min-width:0}
#dialog.practice-compact .quick-column148{display:flex!important;flex-direction:row;align-items:center;gap:6px;min-width:0}
#dialog.practice-compact .quick-label148{display:none}
#dialog.practice-compact .practice-stopwatch157{min-height:44px;min-width:0;flex:1;display:grid;align-content:center;padding:0 3px;background:none;border:0;border-radius:0;container-type:normal}
#dialog.practice-compact .practice-stopwatch157 .timer{font-size:calc(22px * var(--global-text-scale,1));line-height:1.3;letter-spacing:.045em;padding:0;margin:0;min-width:0;max-width:none;width:max-content}
#dialog.practice-compact .practice-goal158{display:none}
#dialog.practice-compact #compact1511Transport button{min-height:44px;min-width:44px;margin:0;border-radius:12px;padding:7px 9px;font-size:calc(12px * var(--control-scale,1));line-height:1.25;display:flex;align-items:center;justify-content:center;gap:6px}
#compact1511Transport button svg{width:21px;height:21px;flex:none;pointer-events:none}
#compact1511Transport .compact1511-timer{flex:none;width:44px;padding:8px!important}
#compact1511Transport .compact1511-timer>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#dialog.practice-compact .bpm-row{display:flex;flex:1;min-width:0;max-width:100%;gap:0}
#dialog.practice-compact #compact1511Transport .bpm-row>.textbtn{display:none!important}
#dialog.practice-compact .bpm-row #bpm{width:100%;min-width:0;min-height:44px;height:auto;font-size:calc(21px * var(--control-scale,1));padding:4px 6px;border-radius:10px;text-align:center}
#compact1511Transport input[type=number]{appearance:textfield;-moz-appearance:textfield}
#compact1511Transport input[type=number]::-webkit-inner-spin-button,#compact1511Transport input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#compact1511Transport [data-action="metro"][aria-pressed="true"],#compact1511Transport [data-action="demo"][aria-pressed="true"]{background:#8aebd0;color:#102d25;border-color:#b8ffe9}
#compact1511Transport .compact1511-example{display:flex;align-items:center;gap:6px;min-width:0}
#compact1511Transport .compact1511-example>[data-action="demo"]{flex:1}
#compact1511Transport .player-tempo{margin:0;display:flex;align-items:center;gap:5px;font-size:10px;min-width:0}
#compact1511Transport #demoBpm{width:70px;min-width:0;min-height:44px;padding:4px;font-size:20px;text-align:center}
#compact1511Transport>.compact1511-start{flex:none}
#compact1511Transport[data-mode="lesson"]{display:grid;grid-template-columns:auto minmax(0,1fr)}
#compact1511Utility{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;margin:0 0 7px;min-width:0}
#compact1511LessonUtility{display:contents}
#dialog.practice-compact #compact1511Utility>.compact1511-done{margin:0;margin-inline-start:auto;min-width:0}
#dialog.practice-compact #compact1511Utility .btn{font-size:calc(12px * var(--control-scale,1));min-height:44px;padding:7px 9px;line-height:1.3;margin:0;max-width:100%}
#dialog.practice-compact #tabSizeControls147{position:static!important;flex:1 1 160px;width:auto;min-width:0;max-width:100%;margin:0;font-size:calc(12px * var(--control-scale,1));border-radius:11px}
#dialog.practice-compact #tabSizeControls147>summary{padding:7px 9px;min-height:44px;gap:7px;line-height:1.3}
#dialog.practice-compact #tabSizeControls147[open]{flex-basis:100%;order:5}
#dialog.practice-compact #tabSizeControls147 .tab-size-inputs147{padding:7px 9px;gap:8px;min-width:0}
#dialog.practice-compact #tabSizeControls147 .tab-size-inputs147 button{min-width:44px;min-height:44px}
#dialog.practice-compact #compact1511More{min-width:54px;flex:none;border-color:#5f7a86;background:#223c46;border-radius:11px;touch-action:manipulation}
#compact1511More::after{content:'⌄'}
#compact1511More[aria-expanded="true"]::after{content:'⌃'}
/* The settings are a full-width sibling, never a flex item's narrow child.
   Opening a menu does not relocate its own button or overlay the notation. */
#compact1511MoreContent{padding:10px;margin:0 0 10px;min-width:0;width:100%;max-width:100%;border:1px solid #4b6d72;border-radius:12px;background:#172f38;--text-scale:var(--global-text-scale,1)}
#compact1511MoreContent[hidden]{display:none!important}
#compact1511LessonSettings{min-width:0}
#dialog.practice-compact #compact1511MoreContent .compact-player{display:block!important;position:static!important;margin:8px 0;padding:10px;min-width:0;width:100%;max-width:100%;box-sizing:border-box}
#dialog.practice-compact #compact1511MoreContent .compact-player .player-main{display:none}
#compact1511MoreContent .player-options.compact1511-player-options{width:100%;flex-basis:100%}
#compact1511MoreContent .player-options.compact1511-player-options>summary{min-height:44px;display:flex;align-items:center;padding:8px 10px;cursor:pointer;touch-action:manipulation}
#compact1511MoreContent .player-options-body{position:static!important;inset:auto;max-height:none;min-width:0;width:100%;box-shadow:none;padding:8px;box-sizing:border-box}
#compact1511MoreContent .player-options:not([open])>.player-options-body{display:none!important}
#compact1511MoreContent .player-options[open]>.player-options-body{display:block!important}
#dialog.practice-compact #compact1511MoreContent .player-toggles{display:flex!important;flex-wrap:wrap;gap:8px;min-width:0;width:100%;max-width:100%}
#dialog.practice-compact #compact1511MoreContent .player-options{min-width:0;max-width:100%;box-sizing:border-box}
#compact1511MoreContent .loop-choice{margin:4px 0;min-height:44px}
#compact1511MoreContent .practice-actions148{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
#compact1511MoreContent .practice-actions148>.btn{flex:1 1 140px}
#dialog.practice-compact .notation.score{margin-top:0}
#dialog.practice-compact #compact1511ScoreScroll>.foot-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:8px;min-width:0}
#dialog.practice-compact #compact1511ScoreScroll>.foot-actions .btn{width:100%;min-width:0;overflow-wrap:anywhere;white-space:normal}
#dialog.practice-compact .notation .score-head{margin:0 0 6px}
#dialog.practice-compact .notation .score-bars{gap:10px}
#dialog.practice-compact #metroBubbleTray1510{display:none!important}
#compact1511MoreContent [hidden],#compact1511Heading [hidden]{display:none!important}
/* Large text may wrap metadata and navigation instead of widening the page. */
.top .brand-meta{min-width:0;flex-wrap:wrap}
.creator-link158{min-width:0}
.creator-copy158{min-width:0}
.creator-copy158 strong{white-space:normal;overflow-wrap:anywhere}
main .row{flex-wrap:wrap}
main .row>*{min-width:0;max-width:100%}
.filters{flex-wrap:wrap}
.filters>*{min-width:0;max-width:100%}
main :is(h1,h2,h3){min-width:0;overflow-wrap:anywhere}
main .tag{max-width:100%;white-space:normal;overflow-wrap:anywhere}
#nav .nav-label{min-width:0;white-space:normal;overflow-wrap:anywhere}
@media(max-width:320px){
 .top{grid-template-columns:32px minmax(0,1fr)}
 .top-controls{grid-column:1/-1;grid-row:3;justify-content:flex-end}
}
@media(max-width:310px){
 #dialog.practice-compact .quick-column148:has(.long-time157){flex-direction:column!important;gap:2px}
 #dialog.practice-compact .quick-column148 .long-time157{width:100%;flex:none}
}
@media(max-width:760px){
 #nav button{min-width:0}
 #nav .nav-label{display:block;max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.2}
}
@media(max-width:600px){
 #compact1511Transport[data-mode="lesson"]{grid-template-columns:minmax(0,1fr)}
 #dialog.practice-compact #compact1511Transport .practice-quick148{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 #compact1511Transport .compact1511-example{grid-column:1/-1}
 #dialog.practice-compact #compact1511Transport .compact1511-example>[data-action="demo"]{min-height:44px;padding:6px 9px}
 #dialog.practice-compact #compact1511Utility .compact1511-done{flex:1 1 160px;margin:0}
 #dialog.practice-compact #compact1511Utility .compact1511-done .btn{width:100%}
 #dialog.practice-compact #compact1511Transport [data-action="metro"]{width:44px;flex:none;padding:7px}
 #dialog.practice-compact #compact1511Transport [data-action="metro"]>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 #dialog.practice-compact .bpm-row #bpm{min-width:62px;font-size:calc(20px * var(--control-scale,1))}
}
@media(min-width:601px){#dialog.practice-compact #compact1511Transport .practice-quick148{grid-template-columns:minmax(130px,1fr) minmax(180px,1.15fr) minmax(100px,.7fr)}#compact1511Transport .compact1511-example{grid-column:auto}}
/* At medium widths retain space for three BPM digits at enlarged text sizes. */
@media(max-width:840px){
 #dialog.practice-compact #compact1511Transport [data-action="metro"]{width:44px;flex:none;padding:7px}
 #dialog.practice-compact #compact1511Transport [data-action="metro"]>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
@media(max-height:460px){
 #dialog.practice-compact>#dialogNav{padding:3px 8px;min-height:44px}
 #compact1511Heading .compact1511-tag{display:none}
 #dialog.practice-compact>#dialogNav .close{font-size:0;padding:7px;width:44px}
 #dialog.practice-compact>#dialogNav .close span{font-size:24px}
 #compact1511Transport{padding:3px 8px}
 #dialog.practice-compact #compact1511ScoreScroll{padding-top:5px}
 #compact1511Utility{gap:5px;margin-bottom:5px}
}

/* END STYLES 0.15.11 */
/* BEGIN STYLES 0.15.12 */
#dialog.practice-compact #compact1511Transport .compact1511-example{min-width:0;align-items:stretch;gap:6px}
#dialog.practice-compact #compact1511Transport .compact1511-example>[data-action="demo"]{min-width:44px;flex:1 1 0;overflow-wrap:anywhere}
#dialog.practice-compact #compact1511Transport .practice-finish1512{flex:0 1 auto;min-width:44px;max-width:58%;padding:7px 9px;border:1px solid #76bca9;background:#244b44;color:#c0ffe9;white-space:normal;overflow-wrap:anywhere;font-weight:750}
#dialog.practice-compact #compact1511Transport .practice-finish1512:disabled{opacity:.48;cursor:default}
/* An icon close button leaves room for the exercise title at enlarged sizes. */
@media(max-width:480px){
 #dialog.practice-compact>#dialogNav .close{font-size:0;padding:7px;width:44px}
 #dialog.practice-compact>#dialogNav .close span{font-size:24px}
}
/* Keep the one-tap Finish label legible on the narrowest phones. The example
   still has its play/stop icon, accessible name and pressed state. */
@media(max-width:360px){
 #dialog.practice-compact #compact1511Transport .compact1511-example>[data-action="demo"]{flex:0 0 44px;width:44px;padding:7px}
 #dialog.practice-compact #compact1511Transport .compact1511-example>[data-action="demo"]>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 #dialog.practice-compact #compact1511Transport .practice-finish1512{flex:1;max-width:none}
}
/* Give Example and Finish a complete row on medium-width windows as well as
   phones. Two large labels must not be squeezed into a 100px third column. */
@media(max-width:840px){
 #dialog.practice-compact #compact1511Transport .practice-quick148{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 #dialog.practice-compact #compact1511Transport .compact1511-example{grid-column:1/-1}
}
@media(max-height:460px){
 #dialog.practice-compact #compact1511Transport .practice-quick148{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 #dialog.practice-compact #compact1511Transport .compact1511-example{grid-column:1/-1}
 #dialog.practice-compact .practice-stopwatch157 .timer{line-height:1.1}
 #dialog.practice-compact .bpm-row #bpm{line-height:1;height:44px;font-size:min(calc(21px * var(--control-scale,1)),32px);box-sizing:border-box}
 #dialog.practice-compact #compact1511Transport [data-action="metro"]{width:44px;flex:none;padding:7px}
 #dialog.practice-compact #compact1511Transport [data-action="metro"]>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
.library-resumes1512{min-width:0;margin:0;border:1px solid #42616a;border-radius:16px;background:#142c35;overflow:hidden}
.library-resumes1512>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:12px 16px;cursor:pointer;font-size:calc(15px * var(--control-scale,1));font-weight:700;overflow-wrap:anywhere}
.library-resumes1512>summary::after{content:'⌄';flex:none}
.library-resumes1512[open]>summary::after{content:'⌃'}
.library-resumes1512>summary>span{margin-inline-start:auto;color:#8aebd0}
.library-resume-list1512{display:grid;gap:8px;padding:0 10px 10px;min-width:0}
.library-resume-list1512 .resume-card{margin:0;min-width:0;gap:10px;padding:12px}
.library-resume-list1512 .resume-card>div{min-width:0}
.library-resume-list1512 .resume-card strong{overflow-wrap:anywhere}
.library-resume-list1512 .resume-card .small{display:block;white-space:normal;overflow-wrap:anywhere}
.library-resume-list1512 .resume-card .btn{min-height:44px;min-width:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere}
@media(max-width:480px){.library-resume-list1512 .resume-card{display:flex;flex-wrap:wrap}.library-resume-list1512 .resume-card>div{flex:1 1 160px}.library-resume-list1512 .resume-card>.btn{flex:1 1 120px}}

/* END STYLES 0.15.12 */
/* BEGIN STYLES 0.15.13 */
/* Resume titles and buttons each own a complete row at every viewport width.
   Legacy flex rules gave the button width:100% and reduced the title to zero
   between 600px and 700px. Grid also avoids vertical flex-basis spacing on phones. */
.resume-cards148{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0}
.resume-cards148 .compact-resume{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;justify-content:stretch;min-width:0}
.resume-cards148 .compact-resume>div{width:100%;min-width:0}
.resume-cards148 .compact-resume strong{line-height:1.35;white-space:normal;word-break:normal;overflow-wrap:anywhere}
.resume-cards148 .compact-resume>.btn{width:100%;min-width:44px;min-height:44px;max-width:100%;height:auto;padding:10px 12px;line-height:1.3;flex:none;justify-self:stretch;white-space:normal;overflow-wrap:anywhere}
.resume-cards148>.library-resumes1512{grid-column:1/-1}
.library-resume-list1512{grid-template-columns:minmax(0,1fr)}

/* END STYLES 0.15.13 */
/* BEGIN STYLES 0.15.14 */
/* The Program and Library are independent cards, including their heights.
   Wrap when the available content width cannot hold two readable sections. */
.resume-cards148{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px}
.resume-cards148>.compact-resume{flex:1 1 320px;align-self:flex-start}
.resume-cards148>.library-resumes1512{flex:1 1 400px;align-self:flex-start}
.resume-cards148 .compact-resume{height:auto;align-self:start;align-content:start;justify-items:start}
/* Actions follow their own title and time, with the same left alignment.
   Never distribute spare height between text and a bottom-aligned action. */
.resume-cards148 .compact-resume>.btn{width:fit-content;min-width:min(100%,180px);justify-self:start;justify-content:flex-start;text-align:left}
@media(max-width:480px){.resume-cards148 .compact-resume>.btn{width:100%}}

/* END STYLES 0.15.14 */
/* BEGIN STYLES 0.15.15 */
/* Every new surface uses the current shared UI scale. */
.tempo-stepper1515{display:flex;align-items:center;gap:4px;min-width:0}
.tempo-stepper1515>button{flex:0 0 auto;min-width:44px;min-height:44px;padding:4px 7px;font:inherit;font-weight:700;border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--mint);touch-action:manipulation}
.tempo-stepper1515>button:disabled{opacity:.4}
.tempo-stepper1515>input{min-width:3.3em!important;max-width:5em;width:4em!important}
#dialog.practice-compact #compact1511Transport .practice-quick148{grid-template-columns:minmax(116px,1fr) minmax(205px,1.4fr) minmax(130px,1fr)}
#compact1511Transport .tempo-stepper1515{justify-content:center;flex-wrap:nowrap;max-width:100%}
#compact1511Transport .tempo-stepper1515 input{min-width:0!important;flex:1 1 3em;max-width:4em}
.next-overlay1515{box-sizing:border-box;position:fixed;inset:0;margin:auto;width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--line);border-radius:22px;background:var(--panel);color:var(--text);box-shadow:0 20px 70px #0009;font-family:inherit;font-size:calc(1rem * var(--global-text-scale,1));overflow:hidden}
.next-overlay1515:popover-open{display:flex;flex-direction:column}
.next-overlay1515::backdrop{background:#09121b88}
.next-overlay1515 header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);flex:0 0 auto}
.next-overlay1515 header h2{margin:0;font-size:1.15em;line-height:1.3;overflow-wrap:anywhere}
#nextOverlay1515.next-overlay1515 header button.textbtn{flex:0 0 44px;min-width:44px;min-height:44px;width:44px;font-size:24px;line-height:1;padding:4px}
.next-overlay1515 .next-copy1515{overflow:auto;overscroll-behavior:contain;padding:16px 18px;min-height:0;overflow-wrap:anywhere}
.next-overlay1515 footer{display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px;border-top:1px solid var(--line);flex:0 0 auto}
.next-overlay1515 footer button{flex:1 1 130px;white-space:normal;overflow-wrap:anywhere;min-height:44px}
#nextOverlay1515.next-overlay1515 header h2{font-size:1.05em;line-height:1.2}
#nextOverlay1515.next-overlay1515 footer button{font:inherit;line-height:1.2;padding:9px 10px;min-width:44px;min-height:44px;box-sizing:border-box}
.next-overlay1515 p{line-height:1.5;margin:0 0 12px}
.next-overlay1515 input,.next-overlay1515 textarea,.next-overlay1515 select{box-sizing:border-box;width:100%;min-width:0;font:inherit;margin:4px 0 12px}
.next-overlay1515 label{display:block;font-size:.9em;color:var(--muted)}
.next-overlay1515 .field-pair1515{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.next-overlay1515 .next-status1515{color:var(--mint);min-height:1.5em;overflow-wrap:anywhere}
.summary1515{border:1px solid var(--line);border-radius:14px;padding:12px;margin:0 0 16px;background:var(--panel2);display:grid;gap:7px}
.summary1515 strong{color:var(--mint);font-size:1em}
.summary1515 div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.summary1515 span{color:var(--muted);font-size:.9em}
.week1515{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:16px;margin:18px 0;min-width:0}
.week1515 h2{font-size:1.05em;margin:0 0 5px}
.week1515 p{margin:0;color:var(--muted);font-size:.9em}
.week-days1515{display:flex;gap:5px;margin-top:10px}
.week-days1515 span{width:18px;height:6px;border-radius:6px;background:var(--line)}
.week-days1515 span.on{background:var(--mint)}
.scale-entry1515{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px;margin:16px 0}
.scale-entry1515 h2{font-size:1.2em;margin:0 0 6px}
.scale-entry1515 p{margin:0;color:var(--muted)}
.scale-filters1515{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px;margin:16px 0}
.scale-filters1515 select{width:100%;min-width:0}
.library-grid>article[hidden],#scaleFilters1515[hidden]{display:none!important}
.scale-context1515{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 0;min-width:0}
.scale-context1515 select{max-width:100%;min-width:0}
#dialog.practice-compact .scale-context1515 .compact-position151{display:flex;align-items:center;gap:10px;padding:0;margin:0;flex:0 1 auto;min-width:0;width:auto}
#dialog.practice-compact .scale-context1515 .compact-position151 select{flex:0 1 auto;width:4.5em;max-width:6em;min-width:72px;margin:0;box-sizing:border-box}
.scale-key1515{font-weight:700;color:var(--mint);margin-right:auto}
.scale-bar-label1515{color:var(--mint);font-size:.85em}
.preview-note1515{font-size:.85em;color:var(--muted);border-left:3px solid var(--mint);padding-left:10px}
.preview-tools1515 .foot-actions{display:flex;gap:8px;flex-wrap:wrap}
.preview-tools1515 .btn{white-space:normal}
@media(max-width:420px){
 .scale-filters1515{grid-template-columns:1fr}
 .tempo-stepper1515{gap:2px}
 .tempo-stepper1515>button{padding:3px;min-width:44px}
 .next-overlay1515{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:16px}
 .next-overlay1515 .field-pair1515{grid-template-columns:1fr;gap:0}
}
@media(max-width:700px){
 #dialog.practice-compact #compact1511Transport .practice-quick148{grid-template-columns:minmax(146px,1fr) minmax(100px,1fr)}
 #dialog.practice-compact #compact1511Transport .quick-column148:nth-child(1){grid-row:1;grid-column:1}
 #dialog.practice-compact #compact1511Transport .quick-column148:nth-child(2){display:contents!important}
 #dialog.practice-compact #compact1511Transport .bpm-row{grid-row:2;grid-column:1}
 #dialog.practice-compact #compact1511Transport .quick-column148:nth-child(2)>[data-action="metro"]{grid-row:1;grid-column:2;justify-self:end}
 #dialog.practice-compact #compact1511Transport .compact1511-example{grid-row:2;grid-column:2}
 #dialog.practice-compact #compact1511Transport .compact1511-example>[data-action="demo"]{flex:0 0 44px;width:44px;padding:7px}
 #dialog.practice-compact #compact1511Transport .compact1511-example>[data-action="demo"]>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
@media(max-width:340px){
 #dialog.practice-compact #compact1511Transport .practice-quick148{grid-template-columns:minmax(0,1fr) 44px}
 #dialog.practice-compact #compact1511Transport .bpm-row{grid-row:2;grid-column:1/-1}
 #dialog.practice-compact #compact1511Transport .compact1511-example{grid-row:3;grid-column:1/-1}
}
#dialog.practice-compact #compact1511Transport.room1515 .practice-quick148{grid-template-columns:minmax(0,1fr) 44px}
#dialog.practice-compact #compact1511Transport.room1515 .bpm-row{grid-row:2;grid-column:1/-1}
#dialog.practice-compact #compact1511Transport.room1515 .compact1511-example{grid-row:3;grid-column:1/-1}
@media(min-width:701px){
 #dialog.practice-compact #compact1511Transport .compact1511-example{grid-row:auto;grid-column:auto}
}
@media(max-height:430px){
 .next-overlay1515{width:min(920px,calc(100vw - 20px));max-height:calc(100dvh - 16px)}
 .next-overlay1515 header,.next-overlay1515 footer{padding:5px 12px}
 .next-overlay1515 .next-copy1515{padding:10px 12px}
}
@media(max-height:300px){
 #compact1511Name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
 #dialog.practice-compact #compact1511Transport .compact1511-example>[data-action="demo"]{flex:0 0 44px;width:44px;padding:7px}
 #dialog.practice-compact #compact1511Transport .compact1511-example>[data-action="demo"]>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}

/* END STYLES 0.15.15 */
/* BEGIN STYLES 0.15.16 */
/* Clear actions share one row; they remain in normal flow above the score. */
.exercise-actions1516{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;min-width:0;max-width:100%;width:100%;align-items:stretch}
.exercise-actions1516>.btn{width:100%;min-width:0;min-height:44px;white-space:normal;overflow-wrap:anywhere;line-height:1.3;display:block;text-align:center;margin:0}
.exercise-actions1516>.repeat-exercise1516{background:#193e3d;border-color:#558b7d;color:#acf5de}
.repeat-exercise1516>span{font-size:1.4em;line-height:1;flex:none}
#dialog.practice-compact #compact1511Utility>.compact1511-done{flex:1 1 100%;margin-inline-start:0}
#dialog.practice-compact .exercise-actions1516{max-width:100%;font-size:calc(12px * var(--control-scale,1));grid-template-columns:repeat(auto-fit,minmax(min(100%,12em),1fr))}
.next-overlay1515:has([data-repeat-apply1516]) h3{margin:0 0 12px;overflow-wrap:anywhere}
.repeat-kept1516{color:#adc7c3}
.repeat-status1516{padding:10px 12px;border:1px solid #486e64;border-radius:12px;background:#193f36;display:flex;gap:8px;align-items:center}
.next-overlay1515:has([data-repeat-apply1516]) footer .btn{white-space:normal;overflow-wrap:anywhere;min-height:44px;display:block;text-align:center}
@media(min-width:1000px){#dialog.practice-compact #compact1511Utility>.compact1511-done{flex:1 1 370px;margin-inline-start:auto}.exercise-actions1516{gap:8px}}
/* Medium tablet/window widths need enough room for the full Finish word.
   The familiar playback/metronome icons keep their accessible names. */
@media(min-width:701px) and (max-width:1000px){
 #dialog.practice-compact #compact1511Transport .practice-quick148{grid-template-columns:minmax(130px,1fr) minmax(180px,1.15fr) max-content}
 #dialog.practice-compact #compact1511Transport [data-action="metro"],#dialog.practice-compact #compact1511Transport .compact1511-example>[data-action="demo"]{width:44px;min-width:44px;flex:0 0 44px;padding:7px}
 #dialog.practice-compact #compact1511Transport [data-action="metro"]>span,#dialog.practice-compact #compact1511Transport .compact1511-example>[data-action="demo"]>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 #dialog.practice-compact #compact1511Transport #practiceFinish1512{flex:0 0 auto;min-width:max-content;max-width:none;white-space:nowrap;overflow-wrap:normal}
}
/* Short landscape screens need one scrollable confirmation rather than a
   fixed footer that would consume all reading space at enlarged text sizes. */
@media(max-height:650px){
 .next-overlay1515:has([data-repeat-apply1516]){display:block;overflow-y:auto;overscroll-behavior:contain}
 .next-overlay1515:has([data-repeat-apply1516]) .next-copy1515{overflow:visible;max-height:none}
}

/* END STYLES 0.15.16 */
/* BEGIN STYLES 0.15.17 */
/* Shared layout fixes and the Virtuoso Path journey. */
#page:focus,dialog:focus{outline:none}
.resume-cards148:not(:empty){gap:20px;margin-bottom:24px}
.resume-cards148>.compact-resume{margin-bottom:0}
.library-resumes1512{padding:0}
.library-resumes1512[open]>summary{border-bottom:1px solid var(--line)}
.library-resume-list1512{gap:16px;padding:16px}
.library-resume-list1512>.compact-resume{gap:14px;padding:16px}
.exercise-actions1516{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:stretch}
.exercise-actions1516>.completion-toggle>span[aria-hidden=true]{margin-inline-end:.6em;vertical-align:middle}
.exercise-actions1516>.completion-toggle:disabled{opacity:1;cursor:default;color:var(--mint);border-color:rgba(144,235,210,.45);background:rgba(144,235,210,.09)}
.exercise-actions1516>.program-feedback1517{grid-column:1/-1;text-align:start;padding:8px 4px}
.exercise-actions1516>.btn{min-width:0;white-space:normal;overflow-wrap:anywhere}
.task-row .ex-num{font-variant-numeric:tabular-nums}
.path-hero1517{position:relative;overflow:hidden;border:1px solid rgba(144,235,210,.4);background:radial-gradient(ellipse at 100% 0,rgba(144,235,210,.17),transparent 65%),var(--panel,#16242d)}
.path-hero1517 h2{font-size:clamp(1.5em,4vw,2.3em);line-height:1.15;margin:.5em 0}
.path-hero1517>button.btn{display:block;margin-top:12px;min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:center}
.path-stats1517{display:flex;gap:12px 24px;flex-wrap:wrap;justify-content:space-between;margin:18px 0 12px;font-weight:700;color:var(--mint)}
.path-next1517{margin-top:12px;overflow-wrap:anywhere}
.path-intro1517{padding:20px;margin-bottom:24px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(140deg,rgba(144,235,210,.12),transparent)}
.path-intro1517>svg{width:78px;height:78px}
.path-intro1517 h2{font-size:clamp(1.35em,4vw,2em);line-height:1.2}
.path-track1517{position:relative;display:grid;gap:24px;padding-inline-start:22px;margin:0 0 24px 0}
.path-track1517::before{content:"";position:absolute;inset:24px auto 24px 7px;width:2px;background:linear-gradient(var(--mint),rgba(144,235,210,.12))}
.path-stage1517{position:relative;min-width:0;padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--panel,#16242d)}
.path-stage1517::before{content:"";position:absolute;left:-22px;top:32px;width:12px;height:12px;border-radius:50%;border:2px solid var(--mint);background:#111d29;box-shadow:0 0 0 5px #111d29}
.path-stage1517.complete::before{background:var(--mint)}
.path-stage1517.available{border-color:rgba(144,235,210,.65)}
.path-stage1517.next-goal1517{background:linear-gradient(135deg,rgba(144,235,210,.12),rgba(144,235,210,.02));border-color:var(--mint);box-shadow:0 0 26px rgba(144,235,210,.06)}
.path-stage1517.locked{opacity:1}
.path-stage-top1517{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
.path-medal1517{width:64px;height:64px;flex:0 0 auto}
.path-medal1517>svg{width:100%;height:100%}
.path-state1517{padding:6px 10px;border-radius:999px;border:1px solid var(--line);font-size:.8em;font-weight:700}
.available .path-state1517,.complete .path-state1517{color:var(--mint);background:rgba(144,235,210,.1)}
.path-stage1517 h3{font-size:1.3em;line-height:1.2;margin:12px 0;overflow-wrap:anywhere}
.path-level1517{line-height:1.5;overflow-wrap:anywhere}
.path-stage1517>button.btn{display:block;width:100%;min-width:0;margin-top:12px;white-space:normal;overflow-wrap:anywhere;text-align:center}
@media(min-width:800px){.path-track1517{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.path-stage1517:last-child{grid-column:1/-1}}
@media(max-width:350px){.exercise-actions1516{grid-template-columns:minmax(0,1fr)}.path-stage1517{padding:16px}.path-stage-top1517{gap:8px;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.path-stage1517,.path-hero1517{animation:none;transition:none}}
/* Keep the real control visible while explaining it, including landscape. */
body.feature-walkthrough1517 .top{position:static}
body.feature-walkthrough1517 #page *,body.feature-walkthrough1517 dialog{animation:none!important;transition:none!important}
dialog.update-tour{transform:none!important}
#tourCard145.tour-card1517{display:block;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;max-width:calc(100vw - 24px)}
#tourCard145.tour-card1517 .tour-copy{overflow:visible}
#tourCard145.tour-card1517 .tour-top{align-items:flex-start;gap:8px;flex-wrap:wrap}
#tourCard145.tour-card1517 .tour-top .eyebrow{max-width:100%;line-height:1.5}
#tourCard145.tour-card1517 .tour-actions{display:flex;flex-wrap:wrap;gap:8px}
#tourCard145.tour-card1517 button{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
#tourCard145.tour-card1517 h2,#tourCard145.tour-card1517 p{overflow-wrap:anywhere}

/* END STYLES 0.15.17 */
/* BEGIN STYLES 0.15.18 */
.path-level1517>strong{font-weight:650}
.path-threshold1518{display:block;margin-top:5px;font-size:.9em;line-height:1.6;color:var(--muted)}
.path-state1517{min-width:0;overflow-wrap:anywhere}
.path-history1518{padding:10px 12px;border:1px solid var(--line);border-radius:12px;color:var(--mint);overflow-wrap:anywhere}

/* END STYLES 0.15.18 */
/* BEGIN STYLES 0.15.19 */
.neck-summary1519{padding:14px 16px;margin:12px 0 20px;border:1px solid var(--line);border-radius:14px;background:rgba(144,235,210,.07);overflow-wrap:anywhere}
.neck-summary1519>strong,.neck-summary1519>span{display:block;line-height:1.6}
.neck-summary1519>span{font-size:.85em;color:var(--muted);margin-top:4px}
.neck-technique1519{margin:8px 0 0;color:var(--mint);font-size:.9em}

/* END STYLES 0.15.19 */
/* BEGIN STYLES 0.15.20 */
/* The same two transport rows; labels replace the ambiguous play-only icons. */
#dialog.practice-compact #compact1511Transport .compact1511-timer{width:auto;min-width:82px;padding:6px 8px!important;gap:4px;flex:none}
#dialog.practice-compact #compact1511Transport .compact1511-timer>span,
#dialog.practice-compact #compact1511Transport .compact1511-example>[data-action="demo"]>span{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}
#dialog.practice-compact #compact1511Transport .compact1511-timer>svg{width:18px;height:18px}
#dialog.practice-compact #compact1511Transport .compact1511-example{gap:6px;min-width:0}
#dialog.practice-compact #compact1511Transport .compact1511-example>[data-action="demo"]{width:auto;flex:1 1 auto;min-width:90px;padding:6px 8px;color:var(--mint);background:#193e40;border-color:#6eaa9c}
#dialog.practice-compact #compact1511Transport .compact1511-example>[data-action="demo"][aria-pressed="true"]{background:#325c5a;color:#d5fff3}
#dialog.practice-compact #compact1511Utility #exampleRestart1520{flex:0 0 44px;width:44px;min-width:44px;min-height:44px;padding:7px}
#dialog.practice-compact #compact1511Utility #exampleRestart1520>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#dialog.practice-compact #compact1511Utility #exampleRestart1520>svg{width:19px;height:19px}
#dialog.practice-compact #compact1511Transport .example-restart1520{flex:0 0 44px;width:44px;padding:7px}
#dialog.practice-compact #compact1511Transport .example-restart1520>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#dialog.practice-compact #compact1511Transport .example-restart1520>svg{width:19px;height:19px}
#dialog.practice-compact .quick-column148:has(.practice-stopwatch157){min-width:0;gap:5px}
#dialog.practice-compact .practice-stopwatch157 .timer{font-size:min(calc(21px * var(--global-text-scale,1)),30px)}
#dialog.practice-compact .note-help1520{margin:4px 0 8px;color:var(--muted);font-size:12px;line-height:1.4}
#examplePosition1520{display:block;margin:6px 0 0}
.update-example-controls1520{gap:8px;margin:0 0 16px}
.update-example-controls1520 svg{width:20px;height:20px;flex:none}
.update-example-controls1520 .btn{font-size:13px;min-height:44px;padding:8px 10px}
#notation [data-demo-note][role="button"]{cursor:pointer;outline:none}
#notation .example-cursor1520>.fret-number,#notation .example-cursor1520 .fret-number{fill:#fff1ad;font-weight:800;text-decoration:underline;text-underline-offset:3px}
#notation [data-demo-note]:focus-visible .fret-number{fill:#fff1ad;stroke:var(--violet);stroke-width:.4px}
#notation .sounding .fret-number{fill:var(--mint)}
.reminder-settings1520>.panel.reminder-card1520{display:grid;gap:16px;padding:18px;min-width:0;overflow:hidden}
.reminder-card1520>p{margin:0;line-height:1.5}
.reminder-row1520{display:flex;flex-wrap:wrap;align-items:center;gap:16px;min-width:0}
.reminder-card1520 .reminder-toggle1520{display:flex;align-items:center;gap:12px;flex:1 1 200px;margin:0;min-height:44px;min-width:0;cursor:pointer}
.reminder-toggle1520>span{min-width:0;line-height:1.4}
.reminder-card1520 .reminder-toggle1520>input{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 44px;width:44px;min-width:44px;height:26px;min-height:26px;padding:0;margin:0;border:1px solid #66808a;border-radius:20px;background:#11242e;cursor:pointer}
.reminder-card1520 .reminder-toggle1520>input::before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#afc3cc;transition:transform .12s}
.reminder-card1520 .reminder-toggle1520>input:checked{background:#337465;border-color:#8de7cf}
.reminder-card1520 .reminder-toggle1520>input:checked::before{background:#cefff0;transform:translateX(18px)}
.reminder-time1520{flex:1 1 150px;min-width:0;max-width:100%}
.reminder-time1520>label{margin:0 0 6px}
.reminder-card1520 #reminderTime{box-sizing:border-box;display:block;min-width:0;max-width:100%;width:100%;height:46px;min-height:44px;padding:8px 12px;appearance:none;-webkit-appearance:none;font-size:max(16px,1em);text-align:left}
.reminder-card1520 #reminderTime::-webkit-date-and-time-value{text-align:left;min-height:1.4em}
.reminder-card1520 .foot-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0;min-width:0}
.reminder-card1520 .foot-actions>.btn{flex:1 1 150px;min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.4;padding:10px 12px}
.reminder-card1520 #reminderStatus{margin:0;min-height:1.4em;overflow-wrap:anywhere}
@media(min-width:1100px){#dialog.practice-compact #compact1511Transport .example-restart1520{flex-basis:auto;width:auto}#dialog.practice-compact #compact1511Transport .example-restart1520>span{position:static;width:auto;height:auto;clip-path:none}}
@media(max-width:360px){#dialog.practice-compact #compact1511Transport .compact1511-timer{min-width:72px;font-size:11px;padding:6px!important}#dialog.practice-compact #compact1511Transport .compact1511-example>[data-action="demo"]{min-width:82px;font-size:11px}}
@media(max-width:420px){#dialog.practice-compact #compact1511Transport .compact1511-example>[data-action="demo"],#dialog.practice-compact #compact1511Transport #practiceFinish1512{font-size:calc(11px * var(--control-scale,1));padding:6px;gap:4px}#dialog.practice-compact #compact1511Transport .compact1511-example>[data-action="demo"]{min-width:76px}#dialog.practice-compact #compact1511Transport .compact1511-example>button>span{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.reminder-toggle1520>input::before{transition:none}}

/* END STYLES 0.15.20 */
/* BEGIN STYLES 0.15.21 */
/* Only the notation owns pinch resizing. Ordinary single-finger panning stays
   native; transformed previews and large notation remain clipped to the score. */
#dialog.practice-compact #notation{min-width:0;max-width:100%;touch-action:pan-x pan-y;isolation:isolate}
#dialog.practice-compact #notation.pinching1521{overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#dialog.practice-compact #notation .score-bar,#dialog.practice-compact #notation .score-line{max-width:100%;min-width:0}
#dialog.practice-compact #notation .score-line{overflow-x:auto;overscroll-behavior-x:contain}
.pinch-badge1521{position:fixed;z-index:30;pointer-events:none;max-width:calc(100vw - 24px);padding:6px 12px;border:1px solid #8aebd0;border-radius:12px;background:#102a32ee;color:#d4fff0;font:700 14px/1.4 system-ui,sans-serif;box-shadow:0 3px 16px #0005}
.pinch-badge1521[hidden]{display:none}
.pinch-hint1521{position:fixed;z-index:31;box-sizing:border-box;display:flex;flex-direction:row;min-height:0;margin:0;align-items:center;gap:10px;max-width:calc(100vw - 24px);padding:12px;border:1px solid #83cbbb;border-radius:16px;background:#173c42f5;box-shadow:0 8px 26px #0007;color:#dbfff4;pointer-events:none;line-height:1.4}
.pinch-hint1521>p{min-width:0;margin:0;font:500 13px/1.45 system-ui,sans-serif;overflow-wrap:anywhere}
.pinch-hint1521>button{pointer-events:auto;flex:0 0 44px;min-width:44px;width:44px;height:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:8px;background:transparent;color:#dbfff4;font-size:24px;line-height:1;align-self:flex-start}
.pinch-illustration1521{display:block;flex:0 0 64px;width:64px;height:40px;max-width:100%;color:#8aebd0;overflow:hidden}
.pinch-finger-left1521{animation:pinch-left1521 1.5s ease-in-out infinite}
.pinch-finger-right1521{animation:pinch-right1521 1.5s ease-in-out infinite}
@keyframes pinch-left1521{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}
@keyframes pinch-right1521{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@media(max-height:450px){.pinch-hint1521{padding:9px;gap:8px}.pinch-hint1521>p{font-size:12px}.pinch-hint1521 .pinch-illustration1521{flex-basis:52px;width:52px;height:34px}}
@media(prefers-reduced-motion:reduce){.pinch-finger-left1521,.pinch-finger-right1521{animation:none}}

/* END STYLES 0.15.21 */