/* Hallmark · macrostructure: Workbench · theme: Studio · tone: quiet · anchor hue: forest green · nav: N3 · footer: Ft2
 * Audience: Quran learners · purpose: mark recitations and memorize · enrichment: none
 * Pre-emit critique: Philosophy 4 · Hierarchy 5 · Execution 4 · Specificity 5 · Restraint 5 · Variety 4 */
*{box-sizing:border-box}html,body{overflow-x:clip}body{margin:0;background:var(--color-paper);color:var(--color-ink);font:var(--text-base)/1.5 var(--font-body)}button,input,select{font:inherit;color:inherit}button,a,input,select{-webkit-tap-highlight-color:var(--color-transparent)}button{cursor:pointer;white-space:nowrap}button:disabled{opacity:.4;cursor:not-allowed}button:not(:disabled):active{transform:translateY(1px)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}h1,h2,h3,p{margin:0}h1,h2,h3{font-style:normal;overflow-wrap:anywhere;min-width:0}h1{font:400 var(--text-display)/1.2 var(--font-display);letter-spacing:-.03em}h2{font-size:var(--text-lg);font-weight:600}svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.65;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle}span[data-icon]{display:inline-flex;align-items:center}a{color:inherit;text-decoration:none}.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:clip;clip-path:inset(50%)}.skip:focus{position:fixed;z-index:var(--z-toast);background:var(--color-surface);padding:var(--space-md)}[hidden]{display:none!important}
.sidebar{position:fixed;inset:0 auto 0 0;width:244px;display:flex;flex-direction:column;background:var(--color-surface);border-right:1px solid var(--color-rule);padding:var(--space-xl) var(--space-lg);z-index:var(--z-sticky)}.brand{display:flex;align-items:center;gap:var(--space-sm);font:500 28px/1.1 var(--font-display);letter-spacing:-.04em}.brand-mark{background:var(--color-accent);color:var(--color-accent-ink);display:grid;place-items:center;width:42px;height:44px;border-radius:14px 14px 6px 14px;font:32px var(--font-arabic)}.brand small{display:block;font:var(--text-xs)/1.6 var(--font-body);letter-spacing:0;color:var(--color-muted);margin-top:var(--space-2xs)}.side-content{margin-top:var(--space-3xl);flex:1;min-height:0;overflow:auto}.side-label{font-size:var(--text-xs);font-weight:550;color:var(--color-muted);margin-bottom:var(--space-sm)}select{background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--radius-sm);height:44px;max-width:100%;padding:0 var(--space-sm)}#recording-select{width:100%;font-weight:550;font-size:var(--text-sm)}.button{border:1px solid var(--color-rule);background:var(--color-surface);border-radius:var(--radius-sm);min-height:40px;padding:var(--space-xs) var(--space-md);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);font-weight:550;font-size:var(--text-sm)}.button:hover:not(:disabled){background:var(--color-paper-2)}.primary{background:var(--color-accent);color:var(--color-accent-ink);border-color:var(--color-accent)}.primary:hover:not(:disabled){background:var(--color-ink-2)}.import-side{width:100%;margin-top:var(--space-sm);background:var(--color-paper)}.side-heading{display:flex;justify-content:space-between;align-items:center;margin:var(--space-xl) 0 var(--space-xs)}.side-heading h2{font-size:var(--text-sm)}.icon-button{width:40px;height:40px;display:inline-grid;place-items:center;flex-shrink:0;background:var(--color-transparent);border:0;border-radius:var(--radius-sm);color:var(--color-muted);padding:0}.icon-button:hover:not(:disabled){background:var(--color-paper-2);color:var(--color-ink)}.lesson-link{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm);width:100%;border:0;background:var(--color-transparent);text-align:left;border-radius:var(--radius-sm);white-space:normal;margin-bottom:var(--space-2xs)}.lesson-link:hover{background:var(--color-paper)}.lesson-link.active{background:var(--color-accent-soft);color:var(--color-accent)}.lesson-link>span:first-child{width:28px;height:32px;display:grid;place-items:center;font-size:var(--text-xs);border:1px solid var(--color-rule);border-radius:var(--radius-sm);flex-shrink:0}.lesson-link strong{display:block;font-size:var(--text-sm);font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:125px}.lesson-link small{font-size:11px;color:var(--color-muted)}.side-tip{margin-top:var(--space-xl);padding:var(--space-md) var(--space-xs);display:flex;gap:var(--space-sm);font-size:var(--text-xs);color:var(--color-muted);border-top:1px solid var(--color-rule)}.side-bottom{padding-top:var(--space-md);border-top:1px solid var(--color-rule)}.device-note{display:flex;gap:var(--space-xs);font-size:var(--text-xs);color:var(--color-ink-2)}.device-note svg{width:16px}.device-note small{display:block;color:var(--color-muted);font-size:10px;margin-top:var(--space-2xs)}.backup-actions{display:flex;justify-content:space-between;margin-top:var(--space-xs)}.backup-actions .text-button{font-size:10px}
.app-shell{margin-left:244px}.topbar{height:76px;border-bottom:1px solid var(--color-rule);padding:0 var(--space-xl);display:flex;align-items:center;justify-content:space-between;background:var(--color-surface)}.breadcrumb{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-xs);color:var(--color-muted);min-width:0}.breadcrumb strong{font-weight:500;color:var(--color-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb svg{width:17px}.crumb-divider{color:var(--color-rule)}.text-button{border:0;background:var(--color-transparent);padding:var(--space-xs) 0;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);font-size:var(--text-xs);color:var(--color-muted);min-height:36px}.text-button:hover{color:var(--color-accent);text-decoration:underline}.text-button svg{width:16px}.mobile-menu{display:none}main{max-width:1510px;margin:auto;padding:var(--space-xl) var(--space-2xl)}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);margin-bottom:var(--space-xl)}.page-heading p{color:var(--color-muted);font-size:var(--text-sm);margin-top:var(--space-xs)}.light-note{display:flex;align-items:center;gap:var(--space-xs);font-size:11px;color:var(--color-muted);white-space:nowrap}.light-note svg{width:16px}.recording-banner{border:1px solid var(--color-rule);border-radius:var(--radius-md);background:var(--color-surface);display:flex;gap:var(--space-md);align-items:center;padding:var(--space-md) var(--space-lg);margin-bottom:var(--space-lg)}.banner-icon{width:44px;height:44px;background:var(--color-paper-2);border-radius:var(--radius-sm);justify-content:center;color:var(--color-accent);flex-shrink:0}.recording-banner>div{min-width:0;flex:1}.recording-banner strong{display:block;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recording-banner p{color:var(--color-muted);font-size:var(--text-xs);margin-top:var(--space-2xs)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 286px;gap:var(--space-lg);align-items:stretch}.practice-panel,.settings-panel,.segments-panel{background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--radius-md);min-width:0}.panel-heading{display:flex;justify-content:space-between;align-items:center;padding:var(--space-lg) var(--space-lg) var(--space-md)}.overline{color:var(--color-muted);font-size:11px;display:block;margin-bottom:var(--space-2xs)}.panel-heading h2{font-size:18px}.mode-switch{display:flex;width:fit-content;margin:0 auto;background:var(--color-paper-2);padding:var(--space-2xs);border-radius:var(--radius-sm);gap:var(--space-2xs)}.mode-switch button{border:0;border-radius:4px;background:var(--color-transparent);font-size:var(--text-xs);padding:var(--space-xs) var(--space-md);display:flex;align-items:center;gap:var(--space-xs);color:var(--color-muted);min-height:36px}.mode-switch svg{width:15px;height:15px}.mode-switch button.selected{background:var(--color-surface);color:var(--color-accent);font-weight:600}.focus-space{display:flex;align-items:center;flex-direction:column;padding:var(--space-lg) var(--space-md) var(--space-xs)}.passage-status{display:flex;align-items:center;gap:6px;color:var(--color-muted);font-size:11px}.status-dot{width:5px;height:5px;background:var(--color-accent);border-radius:50%}.focus-space h3{font:400 28px/1.3 var(--font-display);margin-top:var(--space-xs);text-align:center}.focus-space>p{font-size:11px;color:var(--color-muted);font-variant-numeric:tabular-nums;margin-top:var(--space-2xs)}.replay-button{width:154px;height:154px;border-radius:50%;background:var(--color-paper);border:1px solid var(--color-rule);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--space-xs);margin:var(--space-lg) 0 var(--space-sm);color:var(--color-accent);transition:transform var(--dur-micro) var(--ease-out)}.replay-button:hover:not(:disabled){background:var(--color-accent-soft);transform:scale(1.025)}.replay-button svg{width:36px;height:36px;stroke-width:1.3}.replay-button>span{font-weight:550;font-size:var(--text-sm)}.replay-button small{font-size:10px;color:var(--color-muted)}.transport{display:flex;align-items:center;gap:var(--space-lg)}.play-button{width:46px;height:46px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--color-accent);color:var(--color-accent-ink)}.play-button svg{width:18px}.focus-space .play-hint{margin:var(--space-sm) 0 var(--space-xs);font-size:10px;min-height:16px}.timeline-area{padding:var(--space-sm) var(--space-lg) var(--space-md)}.time-row{display:flex;justify-content:space-between;font-size:10px;color:var(--color-muted);font-variant-numeric:tabular-nums}input[type=range]{accent-color:var(--color-accent);width:100%;margin:var(--space-xs) 0;cursor:pointer;height:18px}.timeline-bands{position:relative;height:10px;background:var(--color-paper-2);border-radius:2px;overflow:clip}.timeline-band{position:absolute;height:10px;background:var(--color-paper-3);border-right:2px solid var(--color-surface);padding:0;border-top:0;border-left:0;border-bottom:0}.timeline-band.active{background:var(--color-accent)}.timeline-caption{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--color-muted);gap:var(--space-xs)}.timeline-caption .text-button{font-size:10px}.session-progress{display:flex;justify-content:space-between;align-items:center;gap:var(--space-xs);border-top:1px solid var(--color-rule);padding:var(--space-sm) var(--space-lg);font-size:10px;color:var(--color-muted)}.progress-dots{display:flex;gap:4px;max-width:120px;overflow:clip}.progress-dots i{display:block;width:5px;height:5px;border-radius:50%;background:var(--color-paper-3)}.progress-dots i.active{background:var(--color-accent)}.mark-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-xs);padding:0 var(--space-lg) var(--space-md)}.mark-toolbar small{width:100%;font-size:10px;color:var(--color-muted)}kbd{font:inherit;color:var(--color-muted);margin-left:var(--space-xs)}
.settings-panel{padding:var(--space-lg)}.settings-heading{display:flex;align-items:center;gap:var(--space-xs)}.settings-heading svg{width:18px;color:var(--color-accent)}.settings-intro{font-size:11px;color:var(--color-muted);margin-top:var(--space-xs);margin-bottom:var(--space-lg)}.setting{margin-bottom:var(--space-lg)}.setting label{font-size:var(--text-xs);font-weight:550;display:block}.setting p{font-size:10px;color:var(--color-muted);margin-top:var(--space-2xs);margin-bottom:var(--space-sm)}.stepper{display:flex;align-items:center;height:40px;border:1px solid var(--color-rule);border-radius:var(--radius-sm)}.stepper button{background:var(--color-transparent);border:0;width:40px;height:38px;color:var(--color-muted);font-size:18px;flex-shrink:0}.stepper button:hover{background:var(--color-paper-2)}.stepper input{border:0;text-align:center;width:55px;min-width:0;background:var(--color-transparent);padding:0;appearance:textfield;-moz-appearance:textfield;font-weight:550}.stepper input::-webkit-inner-spin-button{display:none}.stepper span{flex:1;font-size:11px;color:var(--color-muted)}.compact{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs);padding-bottom:var(--space-md);border-bottom:1px solid var(--color-rule);margin-bottom:var(--space-md)}.compact label{font-size:11px;max-width:110px}.compact select{font-size:11px;height:36px;max-width:124px;padding-inline:var(--space-xs)}.unit-input{display:flex;align-items:center;border:1px solid var(--color-rule);border-radius:var(--radius-sm);height:36px;gap:var(--space-2xs);padding:0 var(--space-xs);max-width:114px;font-size:10px;color:var(--color-muted)}.unit-input input{width:40px;border:0;background:var(--color-transparent);font-size:var(--text-xs);color:var(--color-ink);min-width:0}.rhythm-summary{display:flex;align-items:flex-start;gap:var(--space-xs);font-size:11px;color:var(--color-accent);line-height:1.7;margin-top:var(--space-lg)}.rhythm-summary svg{width:16px;margin-top:2px}.setting-footnote{font-size:10px;color:var(--color-muted);margin-top:var(--space-sm);line-height:1.8}.restart-session{font-size:11px;margin-top:var(--space-sm)}
.segments-panel{margin-top:var(--space-lg);padding:var(--space-lg)}.segments-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);margin-bottom:var(--space-md)}.segments-heading h2{font-size:var(--text-lg)}#segment-count{font:11px var(--font-body);color:var(--color-muted);background:var(--color-paper-2);padding:3px 7px;border-radius:var(--radius-sm);margin-left:var(--space-xs)}.segments-heading p{font-size:11px;color:var(--color-muted);margin-top:var(--space-2xs)}.demo-note{background:var(--color-paper);padding:var(--space-xs) var(--space-sm);font-size:10px;color:var(--color-muted);border-radius:var(--radius-sm);margin-bottom:var(--space-md)}.segment-table-head,.segment-row{display:grid;grid-template-columns:minmax(100px,1fr) minmax(110px,.7fr) 144px 44px;align-items:center;gap:var(--space-md)}.segment-table-head{font-size:10px;color:var(--color-muted);padding:0 var(--space-sm) var(--space-sm);border-bottom:1px solid var(--color-rule)}.segment-row{padding:var(--space-xs) var(--space-sm);border-bottom:1px solid var(--color-rule);min-height:65px}.segment-row:last-child{border:0}.segment-row.active{background:var(--color-accent-soft);border-radius:var(--radius-sm)}.segment-title{display:flex;align-items:center;gap:var(--space-sm);border:0;background:var(--color-transparent);text-align:left;white-space:normal;min-width:0;padding:var(--space-xs) 0}.segment-number{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--color-muted);font-size:11px;flex-shrink:0;border:1px solid var(--color-rule)}.segment-row.active .segment-number{border-color:var(--color-accent);color:var(--color-accent)}.segment-title strong{font-size:var(--text-xs);font-weight:550;display:block;overflow-wrap:anywhere}.segment-title small{color:var(--color-muted);font-size:10px;display:block}.segment-times{font-variant-numeric:tabular-nums;font-size:11px;color:var(--color-muted)}.repeat-inline{display:flex;align-items:center;gap:var(--space-xs)}.repeat-inline input{width:66px;min-width:0;height:34px;border:1px solid var(--color-rule);border-radius:var(--radius-sm);padding:var(--space-2xs) var(--space-xs);background:var(--color-surface);font-size:var(--text-xs)}.repeat-inline span{font-size:10px;color:var(--color-muted)}.empty-state{display:flex;align-items:center;flex-direction:column;text-align:center;gap:var(--space-sm);padding:var(--space-xl);color:var(--color-muted)}.empty-state strong{color:var(--color-ink);font-weight:500}.empty-state p{max-width:45ch;font-size:var(--text-xs)}footer{display:flex;justify-content:space-between;gap:var(--space-md);padding:var(--space-lg) 0 var(--space-xs);color:var(--color-muted);font-size:10px}.footer-dot{padding:0 var(--space-xs)}
dialog{border:1px solid var(--color-rule);border-radius:var(--radius-lg);padding:var(--space-lg);width:min(480px,calc(100% - 32px));background:var(--color-surface);color:var(--color-ink);max-height:90dvh;overflow:auto}dialog::backdrop{background:var(--color-backdrop)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}.dialog-heading h2{font:400 25px var(--font-display)}#editor-description{font-size:var(--text-xs);color:var(--color-muted);margin:var(--space-xs) 0 var(--space-lg)}dialog label{display:block;font-size:var(--text-xs);font-weight:550;margin-bottom:var(--space-xs)}dialog input{width:100%;height:44px;border:1px solid var(--color-rule);border-radius:var(--radius-sm);background:var(--color-surface);padding:var(--space-xs) var(--space-sm)}.time-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-md);margin-top:var(--space-lg)}#override-field{margin-top:var(--space-md)}#override-field small{display:block;color:var(--color-muted);font-size:11px;margin-top:var(--space-xs)}.dialog-actions{display:flex;justify-content:flex-end;gap:var(--space-xs);margin-top:var(--space-lg)}.dialog-actions .danger{margin-right:auto;color:var(--color-danger);border-color:var(--color-transparent)}.form-error{color:var(--color-danger);font-size:var(--text-xs);margin-top:var(--space-md)}.help-steps{padding-left:var(--space-lg);margin:var(--space-lg) 0}.help-steps li{margin-bottom:var(--space-lg);padding-left:var(--space-xs)}.help-steps strong{font-weight:550}.help-steps p,.help-storage{font-size:var(--text-xs);color:var(--color-muted);margin-top:var(--space-xs)}.help-storage{background:var(--color-paper);padding:var(--space-md);border-radius:var(--radius-sm)}.toast{position:fixed;bottom:var(--space-lg);left:50%;transform:translateX(-50%);z-index:var(--z-toast);display:flex;align-items:center;gap:var(--space-md);background:var(--color-ink);color:var(--color-accent-ink);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-md);width:max-content;max-width:calc(100% - 32px);font-size:var(--text-xs)}.toast .text-button,.toast .icon-button{color:var(--color-accent-ink)}.toast>span{overflow-wrap:anywhere}input[aria-invalid=true]{border-color:var(--color-danger)}
@media(min-width:1550px){main{padding-top:var(--space-2xl)}.focus-space{padding-top:var(--space-xl)}.replay-button{width:180px;height:180px}.settings-panel{padding:var(--space-xl)}}
@media(max-width:1250px){main{padding:var(--space-xl) var(--space-lg)}.light-note{display:none}.workspace{grid-template-columns:minmax(0,1fr) 254px}.settings-panel{padding:var(--space-md)}.segment-table-head,.segment-row{grid-template-columns:minmax(100px,1fr) 110px 120px 36px;gap:var(--space-xs)}}
@media(max-width:1050px){.sidebar{width:215px;padding-inline:var(--space-md)}.app-shell{margin-left:215px}.workspace{grid-template-columns:minmax(0,1fr)}.settings-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-md) var(--space-lg);padding:var(--space-lg)}.settings-heading,.settings-intro,.rhythm-summary,.setting-footnote,.restart-session{grid-column:1/-1}.settings-intro{margin:0}.setting{margin:0}.compact{display:block;border:0}.compact label{max-width:none;margin-bottom:var(--space-xs)}.compact select,.unit-input{max-width:none;width:100%}.rhythm-summary{margin-top:0}.setting-footnote{margin:0}.restart-session{justify-content:flex-start;margin:0}.focus-space{padding-top:var(--space-xl)}}
@media(max-width:768px){.sidebar{display:none;top:65px;width:min(300px,90vw);box-shadow:16px 0 40px var(--color-backdrop)}.sidebar.open{display:flex}.side-content{margin-top:var(--space-xl)}.app-shell{margin:0}.mobile-menu{display:grid}.topbar{height:65px;padding:0 var(--space-md)}.breadcrumb{gap:var(--space-xs)}.breadcrumb>span[data-icon]{display:none}.topbar #help span:last-child{display:none}main{padding:var(--space-lg) var(--space-md)}.page-heading{margin-bottom:var(--space-lg)}.page-heading p{font-size:var(--text-xs)}.recording-banner{padding:var(--space-sm);gap:var(--space-sm)}.recording-banner strong{font-size:var(--text-xs)}.recording-banner p{font-size:10px}.recording-banner .button{padding:var(--space-xs);font-size:11px}.recording-banner .button svg{display:none}.banner-icon{width:34px;height:38px}.segments-panel{padding:var(--space-md)}.segments-heading{align-items:flex-start}.segments-heading p{max-width:27ch}.segments-heading .button{font-size:11px;padding-inline:var(--space-sm)}.segment-table-head{display:none}.segment-row{grid-template-columns:minmax(0,1fr) 104px 40px;gap:var(--space-xs);position:relative;padding-bottom:var(--space-sm)}.segment-title{grid-column:1;grid-row:1;padding-bottom:0}.segment-title small{display:none}.segment-times{grid-column:1;grid-row:2;margin-left:40px;font-size:10px}.repeat-inline{grid-column:2;grid-row:1/3}.segment-row>.icon-button{grid-column:3;grid-row:1/3}.repeat-inline input{width:58px;height:44px}.repeat-inline span{font-size:9px}.segment-number{width:28px}.segments-heading{gap:var(--space-xs)}.segments-heading h2{font-size:var(--text-base)}footer{flex-direction:column;gap:var(--space-2xs)}.text-button,.button,.icon-button,.mode-switch button{min-height:44px}.icon-button{width:44px}.timeline-caption .text-button{font-size:9px}.session-progress{font-size:9px;padding-inline:var(--space-md)}.settings-panel{gap:var(--space-md)}.stepper{height:44px}.stepper button{height:42px;width:36px}.stepper input{width:45px}.setting label{font-size:11px}.setting p{min-height:30px}.stepper span{font-size:10px}.dialog-actions{flex-wrap:wrap}.mark-toolbar{padding-inline:var(--space-md)}.mark-toolbar .button{font-size:11px}.timeline-band{min-height:10px!important}.sidebar .lesson-link{min-height:60px}}
@media(max-width:374px){h1{font-size:26px}.settings-panel{padding:var(--space-md);gap:var(--space-md) var(--space-sm)}.stepper button{width:30px}.stepper input{width:38px}.stepper span{font-size:9px}.segments-heading p{font-size:10px}.segment-row{grid-template-columns:minmax(0,1fr) 89px 36px}.repeat-inline{gap:4px}.repeat-inline input{width:52px}.segment-row>.icon-button{width:36px}.timeline-caption{flex-direction:column;align-items:flex-start}.timeline-caption .text-button{min-height:32px}.time-fields{gap:var(--space-xs)}.recording-banner .banner-icon{display:none}.progress-dots{max-width:80px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.replay-button:hover:not(:disabled){transform:none}}

/* Player controls and the collapsible settings panel stay inside the workspace. */
.workspace{display:block}.panel-actions{display:flex;align-items:center;gap:var(--space-xs)}.settings-toggle{background:var(--color-paper);min-height:40px}.settings-toggle[aria-expanded=true]{background:var(--color-accent-soft);color:var(--color-accent);border-color:var(--color-accent)}.settings-toggle svg{width:17px}.practice-panel>.settings-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg);border:0;border-top:1px solid var(--color-rule);border-bottom:1px solid var(--color-rule);border-radius:0;background:var(--color-paper);padding:var(--space-lg);margin-bottom:var(--space-lg)}.settings-heading,.settings-intro,.rhythm-summary,.setting-footnote,.restart-session{grid-column:1/-1}.settings-heading #close-settings{margin-left:auto}.settings-intro{margin:calc(-1 * var(--space-lg)) 0 0}.practice-panel>.settings-panel .setting{margin:0;min-width:0}.practice-panel>.settings-panel .compact{display:flex;align-items:center;border:0;padding-bottom:0}.practice-panel>.settings-panel .compact label{max-width:none}.practice-panel>.settings-panel .rhythm-summary{margin-top:0}.setting-footnote{margin-top:calc(-1 * var(--space-sm))}.restart-session{margin:calc(-1 * var(--space-sm)) 0 0;justify-content:flex-start}.volume-control{display:flex;align-items:center;gap:var(--space-xs);width:170px;max-width:65%}.volume-control input{min-width:0;height:36px}.volume-control output{font-size:11px;min-width:34px;text-align:right}.focus-space{padding-top:var(--space-lg)}.replay-button{width:142px;height:142px;margin-top:var(--space-md)}.transport{gap:var(--space-sm);margin-top:var(--space-xs)}.transport-button{border:0;background:var(--color-transparent);border-radius:var(--radius-sm);min-width:48px;height:56px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--space-2xs);color:var(--color-muted);padding:var(--space-2xs)}.transport-button:hover:not(:disabled){background:var(--color-paper-2);color:var(--color-accent)}.transport-button small{font-size:10px}.transport-button svg{width:22px;height:22px}.play-button{width:54px;height:54px;flex-shrink:0}.scrub-track{position:relative;padding-top:36px}.timeline-pins{position:absolute;top:0;left:10px;right:10px;height:40px}.timeline-pin{position:absolute;top:0;transform:translateX(-50%);width:32px;height:40px;border:0;background:var(--color-transparent);display:flex;align-items:center;justify-content:center;flex-direction:column;padding:0;color:var(--color-muted);gap:0;z-index:1}.timeline-pin svg{height:21px;width:18px;fill:var(--color-surface)}.timeline-pin span{font-size:9px;line-height:12px;font-weight:600}.timeline-pin.lesson-pin{color:var(--color-accent)}.timeline-pin.lesson-pin svg{fill:var(--color-accent-soft)}.timeline-pin.active{color:var(--color-accent)}.timeline-pin:hover{color:var(--color-accent);z-index:2;background:var(--color-paper-2);border-radius:var(--radius-sm)}.timeline-pin:not(:disabled):active{transform:translateX(-50%)}.timeline-legend{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-md);color:var(--color-muted);font-size:10px}.timeline-legend>span{display:inline-flex;align-items:center;gap:var(--space-2xs)}.timeline-legend svg{width:12px;height:12px}.scrub-help{font-size:10px;color:var(--color-muted);margin-top:var(--space-xs)}.time-row{align-items:center}.timeline-area{padding-top:var(--space-xs)}#seek{height:28px;touch-action:pan-y}.form-error{min-height:1.5em}
@media(min-width:1550px){.replay-button{width:160px;height:160px}}
@media(max-width:1050px){.practice-panel>.settings-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.volume-setting{grid-column:1/-1}.practice-panel>.settings-panel .setting p{min-height:0}.compact select,.unit-input{width:auto;max-width:130px}.volume-control{max-width:60%}}
@media(max-width:768px){.panel-heading{padding:var(--space-md)}.panel-heading h2{font-size:var(--text-lg)}.overline{font-size:10px}.settings-toggle{min-height:44px;padding:var(--space-xs);font-size:11px}.panel-actions{gap:var(--space-2xs)}.panel-actions>.icon-button{width:36px}.practice-panel>.settings-panel{padding:var(--space-md);gap:var(--space-md)}.settings-intro{margin-top:calc(-1 * var(--space-md))}.practice-panel>.settings-panel .compact{display:block}.practice-panel>.settings-panel .compact label{margin-bottom:var(--space-xs)}.compact select,.unit-input{width:100%;max-width:none}.volume-setting{grid-column:1/-1}.practice-panel>.settings-panel .volume-setting{display:flex}.volume-control{max-width:65%}.transport{gap:var(--space-xs)}.transport-button{min-width:40px;width:40px;height:52px}.transport-button small{font-size:9px}.play-button{width:48px;height:48px}.replay-button{width:138px;height:138px}.focus-space{padding-top:var(--space-md)}.timeline-pin{min-height:40px;width:32px}.timeline-area{padding-inline:var(--space-md)}}
@media(max-width:374px){.transport{gap:var(--space-2xs)}.transport-button{min-width:34px;width:34px}.transport-button small{font-size:8px}.play-button{width:44px;height:44px}.settings-toggle>span:last-child{display:none}.settings-toggle{width:40px}.timeline-legend{gap:var(--space-sm);font-size:9px}.practice-panel>.settings-panel{gap:var(--space-md) var(--space-sm)}.panel-heading>div:first-child{min-width:0}.panel-actions{flex-shrink:0}}

/* Point markers and saved passage ranges use separate controls. */
.full-recording-link{margin-top:var(--space-lg)}.side-empty{font-size:11px;color:var(--color-muted);padding:var(--space-xs);line-height:1.7}.focus-banner{display:flex;align-items:center;gap:var(--space-sm);margin:0 var(--space-lg) var(--space-lg);padding:var(--space-xs) var(--space-sm);background:var(--color-accent-soft);border-radius:var(--radius-sm);color:var(--color-accent);font-size:11px}.focus-banner p{flex:1;min-width:0}.focus-banner .text-button{color:var(--color-accent);font-size:10px}.focus-banner svg{width:16px}.mark-actions{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);flex-wrap:wrap;margin-top:var(--space-md)}.mark-actions .button{font-size:11px}.mark-actions kbd{font-size:10px;color:var(--color-accent-ink);opacity:.75}.marker-transport{display:grid;grid-template-columns:58px 48px 54px 48px 58px;gap:var(--space-sm);max-width:100%;width:fit-content}.marker-transport.with-passages{grid-template-columns:70px 58px 48px 54px 48px 58px 70px}.marker-transport .transport-button{width:100%;min-width:0}.marker-transport .transport-button small{font-size:9px}.recording-overview{margin-top:var(--space-md);border-top:1px solid var(--color-rule);padding-top:var(--space-md)}.overview-track{height:8px;border-radius:var(--radius-sm);position:relative;background:var(--color-paper-3)}.overview-track>span{position:absolute;top:0;height:100%;background:var(--color-accent);min-width:2px;border-radius:var(--radius-sm)}.recording-overview p{font-size:10px;color:var(--color-muted);margin-top:var(--space-xs)}#marker-fields{margin-top:var(--space-lg)}.implicit-marker{background:var(--color-paper)}.implicit-marker .segment-number{font-size:9px}.implicit-label{font-size:9px;color:var(--color-muted);text-align:center}.practice-panel>.settings-panel .volume-setting{grid-column:auto}
@media(max-width:1050px){.marker-transport.with-passages{grid-template-columns:62px 52px 44px 48px 44px 52px 62px;gap:var(--space-xs)}.practice-panel>.settings-panel .volume-setting{grid-column:1/-1}}
@media(max-width:600px){.marker-transport,.marker-transport.with-passages{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-2xs);width:100%;max-width:310px}.marker-transport .play-button{justify-self:center}.marker-transport #back-marker{grid-column:1;grid-row:1}.marker-transport #rewind{grid-column:2;grid-row:1}.marker-transport #play{grid-column:3;grid-row:1}.marker-transport #forward{grid-column:4;grid-row:1}.marker-transport #next-marker{grid-column:5;grid-row:1}.marker-transport .passage-previous{grid-column:1/3;grid-row:2;justify-self:start}.marker-transport .passage-next{grid-column:4/6;grid-row:2;justify-self:end}.marker-transport .passage-previous,.marker-transport .passage-next{width:auto;flex-direction:row;gap:var(--space-xs);height:44px}.marker-transport #back-marker small,.marker-transport #next-marker small{font-size:8px}.mark-actions{gap:var(--space-xs);width:100%}.mark-actions .button{padding:var(--space-xs);font-size:10px}.mark-actions kbd{display:none}.focus-banner{margin-inline:var(--space-md);flex-wrap:wrap}.focus-banner p{min-width:140px}.focus-banner .text-button{margin-left:auto}.segments-heading{flex-wrap:wrap}.segments-heading>div{min-width:0}.segments-heading .button{font-size:10px}.segment-row.implicit-marker>.implicit-label{grid-column:3;grid-row:1/3}}

/* Explicit repeat state remains visible beside the main player. */
.bookmark-repeat-control{margin:var(--space-md) var(--space-lg) 0;padding:var(--space-sm) var(--space-md);border:1px solid var(--color-rule);border-radius:var(--radius-sm);background:var(--color-paper)}
.bookmark-repeat-switch{position:relative;display:flex;align-items:center;gap:var(--space-sm);min-height:44px;cursor:pointer;font-size:13px}.bookmark-repeat-switch>span[data-icon] svg{width:18px;height:18px;color:var(--color-accent)}.bookmark-repeat-switch input{position:absolute;right:0;width:44px;height:44px;opacity:0;margin:0;cursor:pointer}.switch-track{margin-left:auto;flex-shrink:0;width:42px;height:24px;border:1px solid var(--color-muted);border-radius:20px;background:var(--color-paper-2);pointer-events:none}.switch-track:after{content:"";display:block;width:16px;height:16px;margin:3px;background:var(--color-muted);border-radius:50%;transition:transform .15s}.bookmark-repeat-switch input:checked+.switch-track{background:var(--color-accent);border-color:var(--color-accent)}.bookmark-repeat-switch input:checked+.switch-track:after{transform:translateX(18px);background:var(--color-surface)}.bookmark-repeat-switch input:focus-visible+.switch-track{outline:2px solid var(--color-accent);outline-offset:4px}.bookmark-repeat-control p{margin:0 0 var(--space-xs);font-size:11px;line-height:1.5;color:var(--color-muted)}.repeat-inline input:disabled,.stepper input:disabled{opacity:.5;cursor:default}
@media(max-width:768px){.bookmark-repeat-control{margin-inline:var(--space-md);padding-inline:var(--space-sm)}}
@media(prefers-reduced-motion:reduce){.switch-track:after{transition:none}}

.master-timeline{margin:var(--space-md) var(--space-lg);padding:var(--space-md);border:1px solid var(--color-rule);border-radius:var(--radius-sm);background:var(--color-paper)}.master-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}.master-heading h3{font-family:var(--font-body);font-size:13px;font-weight:600;margin:0}.master-heading .text-button{font-size:11px}.master-timeline>p{font-size:11px;line-height:1.5;color:var(--color-muted);margin:var(--space-xs) 0 0}.master-legend{display:flex;flex-wrap:wrap;gap:var(--space-sm);font-size:10px;color:var(--color-ink-2);margin:var(--space-sm) 0}.master-legend>span{display:flex;align-items:center;gap:var(--space-2xs)}.master-legend i{display:block;width:10px;height:10px}.legend-passage{background:var(--color-passage-soft);border:1px solid var(--color-passage);border-radius:2px}.legend-bookmark{background:var(--color-accent);clip-path:polygon(0 0,100% 0,100% 100%,50% 70%,0 100%)}.master-map{position:relative;padding-top:4px}.master-audio-track{height:6px;position:relative;border-radius:3px;background:var(--color-paper-3)}#master-playhead{position:absolute;top:-3px;width:2px;height:12px;background:var(--color-ink);pointer-events:none}.master-bookmarks{position:relative;height:30px;margin:0 8px}.master-bookmark{position:absolute;top:0;transform:translateX(-50%);width:24px;height:30px;padding:0;border:0;background:var(--color-transparent);color:var(--color-accent);display:flex;align-items:center;justify-content:center}.master-bookmark svg{width:13px;height:19px;fill:var(--color-accent-soft)}.master-bookmark:hover{background:var(--color-accent-soft);border-radius:var(--radius-sm);z-index:2}.master-bookmark:not(:disabled):active{transform:translateX(-50%)}.master-passage-lane{position:relative;height:28px;background:var(--color-paper-2);border-radius:3px;margin-bottom:4px}.master-passage{position:absolute;top:0;height:28px;min-width:4px;padding:0 4px;border:1px solid var(--color-passage);border-radius:3px;background:var(--color-passage-soft);color:var(--color-passage);text-align:left;font-size:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.master-passage:hover,.master-passage.selected{background:var(--color-passage);color:var(--color-surface)}.master-passage.selected{outline:2px solid var(--color-passage);outline-offset:2px}.master-time-scale{display:flex;justify-content:space-between;font-size:10px;color:var(--color-muted);margin-top:var(--space-xs)}.focus-banner{color:var(--color-passage);background:var(--color-passage-soft)}.lesson-link.active{color:var(--color-passage);background:var(--color-passage-soft)}.lesson-link.active>span:first-child{background:var(--color-passage);color:var(--color-surface)}.timeline-pin{color:var(--color-accent)}.timeline-pin svg{fill:var(--color-accent-soft)}
@media(max-width:768px){.master-timeline{margin-inline:var(--space-md);padding:var(--space-sm)}.master-heading{flex-wrap:wrap}.master-bookmark{min-height:30px}.master-legend{gap:var(--space-xs)}}
#full-recording.active{color:var(--color-accent);background:var(--color-accent-soft)}#full-recording.active>span:first-child{background:var(--color-accent);color:var(--color-surface)}

.master-passage-lane{height:46px;background:var(--color-transparent);margin-bottom:6px}.master-passage-lane:after{content:"";position:absolute;top:20px;left:0;right:0;height:24px;background:var(--color-paper-2);border-radius:3px;z-index:0;pointer-events:none}.master-passage-label{display:block;font-size:10px;color:var(--color-passage);line-height:18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.master-passage{top:20px;height:24px;z-index:1}.master-passage>span{display:none}

/* Recording is the parent; saved ranges form an indented branch below it. */
.recording-picker{margin-bottom:var(--space-md)}.recording-picker>label{display:block;font-size:10px;color:var(--color-muted);margin-bottom:var(--space-2xs)}.recording-tree{margin-top:var(--space-xs)}.recording-parent{align-items:flex-start;padding:var(--space-sm) var(--space-xs);gap:var(--space-xs);margin:0}.recording-parent>span:last-child{min-width:0;flex:1}.recording-parent strong{white-space:normal;overflow-wrap:anywhere;max-width:none;font-weight:650;line-height:1.5}.recording-parent small{display:block;font-size:10px;line-height:1.5;margin-top:2px}.recording-parent>span:first-child{width:28px;height:32px;border-color:var(--color-accent);color:var(--color-accent);background:var(--color-accent-soft)}.recording-parent>span:first-child svg{width:18px;height:18px}.recording-children{margin:0 0 var(--space-md) 22px;padding:var(--space-xs) 0 var(--space-xs) 12px;border-left:1px solid var(--color-rule)}.recording-children .side-heading{margin:0 0 var(--space-2xs);gap:var(--space-2xs)}.recording-children .side-heading h2{font-size:10px;font-weight:500;color:var(--color-muted)}.recording-children .side-heading .icon-button{width:30px;height:32px}.passage-children{list-style:none;margin:0;padding:0}.passage-children>li{position:relative;margin:0;padding:0}.passage-children>li:before{content:"";position:absolute;left:-13px;top:24px;width:12px;height:1px;background:var(--color-rule)}.passage-children .lesson-link{gap:var(--space-xs);padding:var(--space-xs) 6px;min-height:50px}.passage-children .lesson-link>span:first-child{width:20px;height:24px;border:0;background:var(--color-passage-soft);color:var(--color-passage);font-size:10px}.passage-children .lesson-link>span:last-child{min-width:0;flex:1}.passage-children .lesson-link strong{font-size:12px;max-width:none;white-space:normal;overflow-wrap:anywhere;line-height:1.4}.passage-children .lesson-link small{display:block;font-size:9px;line-height:1.5;margin-top:2px}.passage-children .lesson-link.active>span:first-child{background:var(--color-passage);color:var(--color-surface)}.recording-children .side-empty{font-size:11px;line-height:1.6;margin:var(--space-xs) 0;color:var(--color-muted)}.side-content>.import-side{margin-top:var(--space-xs)}.side-tip{margin-top:var(--space-md)}

/* Native file controls receive the actual tap, including in Samsung Internet. */
.upload-control{position:relative;overflow:hidden;cursor:pointer;text-align:center}.upload-control .recording-file-input{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;padding:0;font-size:16px;z-index:1}.upload-control:focus-within{outline:2px solid var(--color-focus);outline-offset:3px}.upload-control[aria-disabled=true]{opacity:.5;cursor:wait}.upload-control[aria-disabled=true] .recording-file-input{cursor:wait}
.welcome-panel{min-height:360px;border:1px solid var(--color-rule);border-radius:var(--radius-md);background:var(--color-surface);padding:var(--space-2xl) var(--space-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--space-md)}.welcome-icon{width:60px;height:60px;border-radius:var(--radius-lg);background:var(--color-accent-soft);color:var(--color-accent);display:grid!important;place-items:center}.welcome-icon svg{width:28px;height:28px}.welcome-panel .overline{margin:0}.welcome-panel h2{font:400 clamp(24px,3vw,32px)/1.2 var(--font-display)}.welcome-panel>p{max-width:45ch;color:var(--color-muted);font-size:var(--text-sm);line-height:1.7}.welcome-panel .button{min-height:48px}.welcome-formats{color:var(--color-muted);font-size:11px}.welcome-panel .welcome-privacy{display:flex;align-items:center;justify-content:center;gap:var(--space-xs);font-size:11px}.welcome-privacy svg{width:15px;height:15px}.import-status{background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);font-size:var(--text-sm);margin:var(--space-md) 0;overflow-wrap:anywhere}
@media(max-width:768px){.welcome-panel{padding:var(--space-xl) var(--space-md);min-height:340px}.welcome-panel .welcome-privacy{align-items:flex-start}}

.recording-parent-row{position:relative}.recording-parent-row .recording-parent{padding-right:38px}.recording-rename-side{position:absolute;top:6px;right:2px;width:32px;height:36px;min-height:36px;color:var(--color-accent)}.recording-rename-side svg{width:16px;height:16px}.recording-rename-main{flex-shrink:0}.rename-description{font-size:var(--text-sm);color:var(--color-muted);margin:var(--space-xs) 0 var(--space-lg);line-height:1.6}
@media(max-width:768px){.recording-banner{flex-wrap:wrap}.recording-banner>div{flex-basis:calc(100% - 64px)}.recording-banner>.recording-rename-main{margin-left:auto}.recording-rename-side{width:36px;height:40px;min-height:40px}.recording-parent-row .recording-parent{padding-right:40px}}