:root{color-scheme:dark;--bg:#09090b;--surface:#151518;--ink:#f4f1e9;--muted:#a5a19a;--line:#2d2b27;--accent:#dfbd75;--soft:#292317;--red:#ed8e83;--yellow:#e5c57c;--green:#8dc5a0;--gray:#999a9f;--nav:rgba(9,9,11,.95);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:16px}
:root[data-theme=light]{color-scheme:light;--bg:#f7f4ed;--surface:#fffdfa;--ink:#25221d;--muted:#746b5d;--line:#ded6c8;--accent:#836125;--soft:#efe4cf;--red:#a03c35;--yellow:#795709;--green:#376744;--gray:#505955;--nav:rgba(247,244,237,.95)}
html{height:100%;overflow:hidden;overscroll-behavior:none;scrollbar-width:none}*{box-sizing:border-box}body{height:100%;overflow:hidden;overscroll-behavior:none;margin:0;background:var(--bg);color:var(--ink)}svg{width:20px;height:20px;flex-shrink:0}button,input,select,textarea{font:inherit;color:inherit}button,a,input,select{touch-action:manipulation}button{border:0;background:transparent;cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}a{color:var(--accent)}input,select,textarea{width:100%;min-height:46px;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:11px 12px}input[type=checkbox]{width:20px;min-height:20px;accent-color:var(--accent)}input[type=range]{padding:0;border:0;accent-color:var(--accent)}label{display:block;font-size:.87rem;color:var(--muted)}label input,label select{margin-top:7px;color:var(--ink)}h1,h2,h3,p{margin:0}h1{font-size:1.75rem;letter-spacing:-.8px;font-weight:650}h2{font-size:1.2rem;letter-spacing:-.3px;font-weight:600}h3{font-size:1rem;font-weight:600}.muted{color:var(--muted)}.small{font-size:.8rem}.eyebrow{text-transform:uppercase;font-size:.66rem;letter-spacing:2.8px;color:var(--muted)}
#app{max-width:520px;margin:auto;min-height:100dvh;position:relative}.top{padding:calc(25px + var(--safe-top)) 24px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}.top .eyebrow{margin-bottom:9px}.icon{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--soft);flex-shrink:0}.icon svg{width:19px;height:19px}.icon.plain{background:transparent}.demo-banner{padding:8px 24px;background:var(--soft);font-size:.75rem;display:flex;justify-content:space-between;align-items:center}.demo-banner button{font-size:.75rem;text-decoration:underline;min-height:28px}.page{padding:12px 24px calc(105px + var(--safe-bottom));min-height:calc(100dvh - 115px)}
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,520px);display:flex;align-items:center;justify-content:space-around;padding:10px 12px calc(12px + var(--safe-bottom));min-height:83px;background:var(--nav);backdrop-filter:blur(15px);border-top:1px solid var(--line);z-index:5}.nav button{color:var(--muted);display:flex;gap:6px;align-items:center;justify-content:center;flex-direction:column;font-size:.68rem;width:25%;min-height:54px}.nav button svg{width:22px;height:22px}.nav button.active{color:var(--accent);font-weight:650}.nav button.active svg{background:var(--soft);box-sizing:content-box;padding:4px 12px;border-radius:20px;margin:-4px -12px}.practice-context{width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;font-size:.8rem;display:flex;align-items:center;gap:8px}.practice-context button{color:var(--accent);min-height:44px;flex-shrink:0}.practice-context span{flex:1;overflow:hidden;text-overflow:ellipsis}
.primary,.secondary,.danger{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;min-height:48px;border-radius:12px;font-weight:550;font-size:.94rem}.primary{background:var(--accent);color:var(--bg)}.secondary{border:1px solid var(--line);background:var(--surface);color:var(--accent)}.danger{color:var(--red);border:1px solid var(--line)}.wide{width:100%}.text-button{color:var(--accent);min-height:44px;font-size:.88rem;display:inline-flex;align-items:center;gap:6px}.text-button svg{width:16px;height:16px}.section-head{display:flex;align-items:center;justify-content:space-between;margin:26px 0 12px;gap:8px}.section-head:first-child{margin-top:7px}.section-head .small{color:var(--muted)}.section-head .icon{width:44px;height:44px}.intro{margin:12px 0 27px;max-width:310px;font-size:.95rem;line-height:1.6;color:var(--muted)}.choices{display:flex;gap:8px;margin:12px 0 18px}.choices button{min-height:46px;flex:1;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.choices button.active{border-color:var(--accent);background:var(--soft);color:var(--accent)}.duration-label{margin-top:30px}.duration-custom{display:flex;align-items:center;gap:12px;margin-bottom:25px}.duration-custom input{width:85px}.empty{padding:27px 18px;background:var(--surface);border:1px solid var(--line);border-radius:14px;text-align:center}.empty p{color:var(--muted);font-size:.88rem;line-height:1.55;max-width:280px;margin:10px auto 17px}.empty svg{width:32px;height:32px;color:var(--muted);margin-bottom:10px}.section-empty{padding:16px 0;font-size:.83rem;color:var(--muted);line-height:1.5}
.row{display:flex;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid var(--line);min-height:74px}.row-main{flex:1;min-width:0;text-align:left;padding:0;line-height:1.45;overflow-wrap:anywhere}.row-main .name{font-size:.92rem;font-weight:550;display:block}.row-main .meta{font-size:.75rem;color:var(--muted);display:block;margin-top:4px}.row.done .name{color:var(--muted)}.row.done .check{background:var(--soft);color:var(--green)}.row .action{min-width:44px;min-height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:1.05rem;flex-shrink:0}.row .check{border:1px solid var(--line);color:var(--accent)}.dot{width:7px;height:7px;background:var(--gray);border-radius:50%;flex-shrink:0}.dot.red{background:var(--red)}.dot.yellow{background:var(--yellow)}.dot.green{background:var(--green)}.dot.gray{background:var(--gray)}.work-card{border:1px solid var(--line);border-radius:15px;background:var(--surface);padding:20px;margin-bottom:12px;display:block;text-align:left;width:100%;min-height:108px}.work-card .composer{font-size:.82rem;color:var(--muted);margin-top:6px}.work-card .work-footer{display:flex;gap:13px;align-items:center;margin-top:17px;font-size:.74rem;color:var(--muted)}.work-card .status-dots{display:flex;gap:5px}.work-card .chevron{margin-left:auto}.search{margin:6px 0 20px}.back{margin-bottom:12px}.work-title{font-size:1.4rem;margin:5px 0 7px;letter-spacing:-.5px}.work-sub{font-size:.9rem;color:var(--muted);margin-bottom:10px}.work-toolbar{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}.unit-details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;margin:10px 0}.unit-details button{width:100%;text-align:left;min-height:44px}.status-label{display:flex;align-items:center;gap:7px;font-size:.75rem;color:var(--muted);margin-top:9px}.history-card{padding:19px 0;border-bottom:1px solid var(--line)}.history-card h3{font-size:.97rem;margin-bottom:8px}.history-card p{font-size:.83rem;line-height:1.6;color:var(--muted)}.history-card ul{list-style:none;padding:0;margin:8px 0 0;font-size:.85rem}.history-card li{padding:4px 0}.history-type{font-size:.71rem;color:var(--muted);margin-bottom:6px}.history-change{font-size:.81rem;line-height:1.7;color:var(--muted)}.settings-row{padding:15px 0;border-bottom:1px solid var(--line)}.settings-row label{display:flex;justify-content:space-between;align-items:center;gap:14px;color:var(--ink)}.settings-row input,.settings-row select{width:155px;margin-top:0;font-size:16px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-stack{display:grid;gap:18px}.form-stack .check-label{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:.86rem;min-height:38px}.field-note{font-size:.75rem;color:var(--muted);line-height:1.5;margin-top:8px}.divider{height:1px;background:var(--line);margin:5px 0}.problem-row{display:flex;align-items:center;gap:8px}.problem-row input[type=text]{flex:1}.problem-row button{min-width:44px;min-height:44px;color:var(--muted)}.problem-row.solved input[type=text]{color:var(--muted);text-decoration:line-through}.problem-list{display:grid;gap:9px}.problem-add{display:flex;gap:7px}.problem-add select{flex:1;min-width:0}.problem-add button{min-width:44px;background:var(--soft);border-radius:10px;color:var(--accent)}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{font-size:.78rem;background:var(--soft);padding:6px 9px;border-radius:6px}.resource{font-size:.8rem;display:flex;align-items:center;gap:10px;margin:10px 0}.resource a{overflow-wrap:anywhere}.stack-actions{display:grid;gap:10px;margin-top:22px}
dialog{width:min(100% - 20px,500px);max-height:90dvh;overflow-y:auto;border:1px solid var(--line);border-radius:22px;background:var(--bg);color:var(--ink);padding:24px;margin:auto;box-shadow:0 16px 70px #0002}dialog::backdrop{background:#15211c66;backdrop-filter:blur(3px)}.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:12px}.sheet-head h2{font-size:1.2rem}.sheet-head button{min-width:44px;min-height:44px}.sheet-actions{position:sticky;bottom:-24px;background:var(--bg);padding:20px 0 4px;display:flex;gap:10px}.sheet-actions>*{flex:1}.error{color:var(--red);font-size:.82rem;margin-top:12px;line-height:1.5}.hidden{display:none!important}#notice{position:fixed;bottom:105px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);border-radius:12px;padding:12px 18px;font-size:.85rem;max-width:calc(100% - 36px);z-index:30;opacity:0;pointer-events:none;transition:opacity .2s}#notice.visible{opacity:1}.local-label{text-align:center;color:var(--muted);font-size:.73rem;margin:30px 0 6px}.library-piece{display:block;width:100%;text-align:left;border-bottom:1px solid var(--line);padding:16px 0;min-height:65px}.library-piece .name{font-weight:550;font-size:.93rem}.library-piece .meta{font-size:.76rem;color:var(--muted);margin-top:5px}
@media(min-width:650px){#app{border-inline:1px solid var(--line)}.top{padding-top:35px}.page{padding-inline:30px}.nav{border-inline:1px solid var(--line)}}
@media(max-height:740px){.top{padding-top:15px}.page{padding-top:2px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* The drum keeps its tactile scrolling surface within an iPhone 14 screen. */
.top .eyebrow{color:var(--accent);font-weight:600;letter-spacing:4px}.top h1{font-weight:500;letter-spacing:-1px}.work-card,.unit-details,.empty{border-radius:20px}.primary{background:linear-gradient(135deg,#f0d393,#c7a15a);color:#15120c;border-radius:14px}
.work-card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.work-card-heading>div{min-width:0}.progress-ring{width:58px;height:58px;position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.progress-ring svg{position:absolute;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}.progress-ring circle{fill:none;stroke-width:3.5}.ring-track{stroke:var(--line)}.ring-fill{stroke:var(--accent);stroke-linecap:round;transition:stroke-dasharray .6s}.progress-ring>span{font-size:1rem;font-variant-numeric:tabular-nums;color:var(--accent)}.progress-ring small{font-size:.6rem;margin-left:1px}.work-progress{display:flex;align-items:center;gap:16px;margin:20px 0;padding:18px;border:1px solid var(--line);background:var(--surface);border-radius:18px}.work-progress .progress-ring{width:70px;height:70px}.work-progress h3{font-size:.85rem;margin-bottom:6px}.work-progress p{font-size:.73rem}.technique-choice button{font-size:.86rem}.technique-choice{margin-bottom:26px}

.nav button{width:20%}.library-intro{margin:8px 0 18px;line-height:1.6}.library-search{margin-bottom:18px}.library-filters{margin-bottom:20px}.library-filters select{font-size:16px;min-width:0}.filter-reset{display:flex;align-items:flex-end;justify-content:flex-end}.library-piece .name,.library-piece .meta{display:block}.catalog-tags{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:.7rem;color:var(--accent)}.catalog-tags>span{padding:4px 8px;border:1px solid var(--line);border-radius:6px}.library-pagination{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:20px}.library-pagination .secondary{padding:8px 11px;font-size:.75rem}.library-pagination>span{font-size:.7rem;color:var(--muted);text-align:center}.piece-facts{margin:0;display:grid;gap:16px}.piece-facts div{display:grid;gap:5px}.piece-facts dt{font-size:.75rem;color:var(--muted)}.piece-facts dd{margin:0;font-size:.9rem}.problem-summary{color:var(--muted);font-size:.75rem;line-height:1.6;margin-top:12px}.unit-details>.text-button{width:auto;text-align:left;margin-top:4px}

/* Status always has both a prominent colour and a readable text label. */
[data-color=red]{--state:var(--red);--state-soft:rgba(237,142,131,.08)}[data-color=yellow]{--state:var(--yellow);--state-soft:rgba(229,197,124,.07)}[data-color=gray]{--state:var(--gray);--state-soft:rgba(153,154,159,.07)}[data-color=green]{--state:var(--green);--state-soft:rgba(141,197,160,.07)}
.dot{width:10px;height:10px}.color-badge{display:inline-flex;align-items:center;gap:7px;min-height:26px;padding:4px 7px;border-radius:7px;font-size:.68rem;font-weight:600;line-height:1.4;white-space:normal}.color-badge.red{color:var(--red);background:rgba(237,142,131,.12)}.color-badge.yellow{color:var(--yellow);background:rgba(229,197,124,.12)}.color-badge.gray{color:var(--gray);background:rgba(153,154,159,.12)}.color-badge.green{color:var(--green);background:rgba(141,197,160,.12)}
.unit-details[data-color],.row.study-passage{border-left:4px solid var(--state);background:var(--state-soft)}.row.study-passage{border-radius:12px;padding:12px 10px;margin:10px 0;flex-wrap:wrap;gap:6px}.row.study-passage .row-main{flex-basis:calc(100% - 98px)}.row-extra{display:flex;align-items:center;gap:7px;width:100%;flex-wrap:wrap;margin-top:5px}.row-extra .small{font-size:.67rem}.why-button{margin-left:auto;min-height:44px;padding:4px 2px;color:var(--muted);font-size:.7rem;text-decoration:underline;text-underline-offset:3px}.performance-tag{color:var(--accent);font-size:.7rem}.undo-bar{padding:0 24px 4px;text-align:right}.undo-bar .text-button{font-size:.75rem;min-height:38px}.session-summary{padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;margin:6px 0 20px}.session-summary strong{font-size:.86rem}.session-summary p{font-size:.75rem;color:var(--muted);line-height:1.6;margin-top:8px}.advanced-options,.coverage-summary{border-top:1px solid var(--line);padding:12px 0}.advanced-options summary,.coverage-summary summary{font-size:.8rem;color:var(--muted);cursor:pointer;min-height:32px;line-height:1.6}.advanced-options label{margin:12px 0}.work-filter-label{margin-bottom:12px}.work-filter-label select{margin-top:5px}.selection-reasons{padding-left:20px;font-size:.9rem;line-height:1.7}.selection-reasons li+li{margin-top:10px}.manual-performance-heading{margin-top:20px}.library-piece small{display:block;color:var(--muted);margin-top:8px}.coverage-summary p{font-size:.75rem;line-height:1.6;margin:8px 0}.coverage-bar{display:flex;height:12px;border-radius:6px;overflow:hidden;margin:10px 0}.coverage-bar .red{background:var(--red)}.coverage-bar .gray{background:var(--gray)}.coverage-bar .yellow{background:var(--yellow)}.coverage-bar .green{background:var(--green)}

.advanced-options summary,.coverage-summary summary,.undo-bar .text-button{min-height:44px}.why-button{min-width:44px}.row.study-passage .row-main{min-height:44px}

/* Keep the iPhone keyboard from zooming inputs and cover the home indicator. */
input,select,textarea{font-size:16px}
.pwa-card{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);display:grid;gap:12px}
.pwa-status{display:flex;align-items:center;gap:10px;font-size:.85rem;line-height:1.5}.pwa-status svg{color:var(--accent)}.pwa-card .field-note{margin:0}.pwa-card .text-button{min-height:44px}
.install-steps{padding-left:22px;font-size:.9rem;line-height:1.7}.install-steps li+li{margin-top:12px}

/* Metronome: pulse lights and audio-clock pendulum, then a tactile tempo wheel. */
.metronome{display:flex;flex-direction:column;align-items:center;padding-top:0}
.beat-strip{display:flex;align-items:center;justify-content:space-around;width:100%;height:24px;margin:0 0 8px}
.beat-dot{width:12px;height:12px;border:1px solid var(--line);background:var(--surface);border-radius:50%;transition:background .08s,box-shadow .08s}
.beat-dot.accent{border-color:var(--accent)}.beat-dot.active{background:var(--accent);box-shadow:0 0 14px #dfbd7560}.beat-dot.accent.active{background:#f0d393}
.pendulum{width:100%;padding:0 13px;margin-bottom:10px}.pendulum-rail{height:30px;position:relative}
.pendulum-rail::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.pendulum-ball{position:absolute;left:0;top:50%;width:22px;height:22px;border:1px solid #e77971;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ed8e83,#bb4943 70%);box-shadow:0 0 15px #c4544325;transform:translate(-50%,-50%)}
.tempo-word{font-size:.73rem;color:var(--muted);letter-spacing:.4px}
.tempo-editor{display:grid;grid-template-columns:60px minmax(0,1fr) 60px;align-items:center;gap:12px;width:100%;margin-top:5px}
.adjust{display:flex;flex-direction:column;justify-content:space-between;height:174px;gap:18px}
.adjust button{background:var(--surface);color:var(--accent);border:1px solid var(--line);border-radius:14px;height:58px;width:100%;font-size:1.13rem;font-variant-numeric:tabular-nums}
.wheel{height:210px;width:100%;position:relative;isolation:isolate}
.wheel::before,.wheel::after{content:'';position:absolute;left:0;right:0;height:28px;pointer-events:none;z-index:1}
.wheel::before{top:0;background:linear-gradient(var(--bg),transparent)}.wheel::after{bottom:0;background:linear-gradient(transparent,var(--bg))}
.wheel-lines{position:absolute;top:70px;left:0;right:0;height:70px;border-block:1px solid #dfbd7540;pointer-events:none}
.drum-ticks{position:absolute;inset:12px 0;pointer-events:none;z-index:-1;background:repeating-linear-gradient(to bottom,transparent 0 13px,var(--line) 13px 14px);mask-image:linear-gradient(to right,#000 0 7px,transparent 7px calc(100% - 7px),#000 calc(100% - 7px));opacity:.65}
.wheel-scroll{height:210px;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain;touch-action:pan-y;padding:70px 0;position:relative;user-select:none;cursor:grab}
.wheel-scroll[data-dragging]{scroll-snap-type:none;cursor:grabbing}.wheel-scroll::-webkit-scrollbar{display:none}
.wheel-value{height:70px;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;font-size:2.45rem;font-weight:300;color:var(--muted);opacity:.45;font-variant-numeric:tabular-nums}
.wheel-value.selected{font-size:4.8rem;line-height:1;font-weight:400;color:var(--accent);opacity:1;letter-spacing:-3px}
.tempo-name{align-self:flex-end;margin:8px 0 14px;font-size:.72rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.practice-speed{width:100%;text-align:center}.practice-speed .eyebrow{font-size:.61rem;letter-spacing:2px}
.percentages{display:flex;gap:5px;width:100%;margin-top:8px}.percentages button{flex:1;min-height:44px;border-radius:10px;font-size:.82rem;color:var(--muted)}
.percentages button.active{background:var(--soft);color:var(--accent);font-weight:650}.percentages+.muted{margin-top:7px;font-size:.73rem;min-height:20px}
.rhythm-controls{display:grid;grid-template-columns:.85fr 1.55fr 1fr;gap:9px;width:100%;align-items:end;margin-top:16px}
.rhythm-controls label{font-size:.7rem}.rhythm-controls select{font-size:16px;padding:8px;min-height:46px}
.tap-tempo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:64px;padding:6px;border:1px solid var(--line);border-radius:14px;color:var(--accent);background:var(--surface);font-size:.65rem;white-space:nowrap}
.tap-tempo svg{width:28px;height:28px}.pulse-unit{align-self:flex-start;margin:9px 0 0;font-size:.65rem;color:var(--muted)}
.transport{display:flex;justify-content:center;width:100%;margin-top:16px}
.play{width:74px;height:74px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f0d393,#c7a15a);color:#15120c;border-radius:50%;box-shadow:0 6px 30px #dfbd751c;transition:box-shadow .1s}
.play svg{width:29px;height:29px}.play.pulse{box-shadow:0 0 0 7px var(--soft)}
@media(max-width:350px){.tempo-editor{grid-template-columns:50px minmax(0,1fr) 50px;gap:8px}.wheel-value.selected{font-size:4.1rem}.rhythm-controls{gap:6px}.tap-tempo{font-size:.6rem}.percentages button{font-size:.75rem}}
@media(max-height:760px){.pendulum{margin-bottom:9px}.beat-strip{margin-bottom:4px}.tempo-name{margin-bottom:14px}.rhythm-controls{margin-top:12px}.transport{margin-top:14px}.play{width:70px;height:70px}}

/* Compact screens retain full touch targets and named controls. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
.top{padding:calc(16px + var(--safe-top)) 24px 12px}.top .eyebrow{margin-bottom:6px}.top h1{font-size:1.55rem}
.top>.icon{background:var(--surface);border:1px solid var(--line);border-radius:13px;color:var(--accent)}.top>.icon svg{width:21px;height:21px;stroke-width:1.6}
#app{height:100dvh;min-height:0;display:flex;flex-direction:column;padding-bottom:calc(83px + var(--safe-bottom))}
#app>.top,#app>.demo-banner,#app>.undo-bar{flex-shrink:0}
.page{flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;padding:8px 24px 16px;scrollbar-width:none}
.metro-page{flex:1;min-height:0;padding:0 24px 10px;display:flex;flex-direction:column;gap:6px}
.metronome{flex:1;min-height:0;justify-content:space-between;gap:4px;--wheel-size:clamp(140px,calc(100dvh - 560px - var(--safe-top) - var(--safe-bottom)),210px)}
.metro-page:has(.practice-context) .metronome{--wheel-size:clamp(90px,calc(100dvh - 614px - var(--safe-top) - var(--safe-bottom)),180px)}
.practice-context{min-height:44px;margin:0;padding:0 10px;flex-shrink:0}.practice-context .icon{width:44px;height:44px}.practice-context svg{width:18px;height:18px}
.beat-strip{height:20px;margin:0;flex-shrink:0}.pendulum{margin:0;flex-shrink:0}.pendulum-rail{height:26px}
.tempo-editor{margin:0;flex-shrink:0}.wheel,.wheel-scroll{height:var(--wheel-size)}.wheel-scroll{padding:calc((var(--wheel-size) - 70px)/2) 0}.wheel-lines{top:calc((var(--wheel-size) - 70px)/2)}
.adjust{height:calc(var(--wheel-size) - 16px);gap:12px}.adjust button{height:50px;min-height:44px;flex-shrink:0}
.practice-speed{flex-shrink:0}.percentages{margin:0}.percentages+.muted{margin-top:4px}
.rhythm-controls{margin:0;flex-shrink:0}.transport{margin:0;flex-shrink:0}.play{width:64px;height:64px}
@media(max-height:700px){#app[data-tab=metronome]>.top .eyebrow{display:none}.top{padding-top:calc(12px + var(--safe-top))}.wheel-value.selected{font-size:4.25rem}}
.work-card{padding:12px 14px;margin-bottom:8px;min-height:0;border-radius:15px}.work-card .composer{margin-top:3px;font-size:.77rem}.work-card .work-footer{margin-top:6px;gap:9px;flex-wrap:wrap}.work-card .progress-ring{width:44px;height:44px}.work-card h3{font-size:.95rem}
.work-progress{padding:10px 12px;margin:12px 0;gap:12px;border-radius:14px}.work-progress .progress-ring{width:44px;height:44px}
.work-title{font-size:1.25rem;margin:0 0 4px}.work-sub{margin-bottom:6px;font-size:.83rem}.work-toolbar{gap:10px;margin:4px 0}.work-toolbar .text-button{font-size:.8rem}
.section-head{margin:14px 0 6px}.section-head h2{font-size:1.06rem}.section-head h3{font-size:.94rem}
.unit-details{padding:7px 10px;margin:6px 0;border-radius:12px}.unit-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.unit-details .unit-edit{flex:1;min-width:0;width:auto;min-height:44px;line-height:1.35;font-size:.87rem;overflow-wrap:anywhere}.unit-edit .name,.unit-edit .meta{display:block}.unit-edit .meta{margin-top:3px}
.unit-heading .status-label{margin:0;flex-direction:column;align-items:flex-end;flex-shrink:0;max-width:46%}.unit-heading .color-badge{font-size:.63rem;padding:3px 6px;min-height:24px}
.unit-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}.unit-details .unit-footer .text-button{width:auto;min-height:44px;margin:0;font-size:.74rem;flex-shrink:0}.unit-footer p{font-size:.76rem}
.problem-summary{font-size:.73rem;line-height:1.4;margin-top:2px}.row{padding:9px 0;min-height:60px}.row.study-passage{padding:7px 9px;margin:6px 0;gap:3px}.row-extra{margin-top:0;gap:5px}.row-main .name{font-size:.87rem}.row-main .meta{font-size:.73rem;margin-top:2px}
.session-summary{padding:10px 12px;margin:4px 0 12px}.session-summary p{margin-top:4px}.technique-choice{margin-bottom:18px}.duration-label{margin-top:18px}.duration-custom{margin-bottom:18px}
.coverage-summary{padding:5px 0}.coverage-summary summary{font-size:.75rem}.back{margin-bottom:5px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.work-filter-label select{margin-top:0}.duration-custom+.primary{margin-bottom:8px}

/* Preparation stays within two compact, independently expandable rows. */
.duration-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.study-preparation{border:1px solid var(--line);border-radius:12px;background:var(--surface);margin:6px 0;padding:0 10px}
.study-preparation summary{display:flex;align-items:center;gap:10px;min-height:48px;cursor:pointer;list-style:none;font-size:.85rem}
.study-preparation summary::-webkit-details-marker{display:none}
.study-preparation summary>span:first-child{flex:1;font-weight:550}
.study-preparation summary svg{width:16px;height:16px;transform:rotate(-90deg);color:var(--accent)}
.study-preparation[open] summary svg{transform:rotate(90deg)}
.preparation-row{gap:4px;padding:3px 0;min-height:50px}
.preparation-row .row-main{padding:0;text-align:left;overflow-wrap:anywhere}
.preparation-row .name{font-size:.8rem;line-height:1.3}
.preparation-row .meta{font-size:.67rem;line-height:1.3}
.study-preparation .row:last-child{border-bottom:0}