:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#090b0f;color:#f5f7fb}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 20% 0%,rgba(20,184,166,.14),transparent 34rem),linear-gradient(180deg,#0f141b,#080a0d)}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}svg{width:1rem;height:1rem}label{display:block;margin-bottom:.4rem;color:#aab4c3;font-size:.78rem;font-weight:700}input,select,textarea{width:100%;border:1px solid #283341;border-radius:.55rem;background:#0b1017;color:#f5f7fb;outline:none}input,select{min-height:2.4rem;padding:0 .75rem}textarea{min-height:8rem;resize:vertical;padding:.75rem;line-height:1.5}input:focus,select:focus,textarea:focus{border-color:#2dd4bf;box-shadow:0 0 0 3px #2dd4bf1f}.login-shell{min-height:100vh;display:grid;place-items:center;padding:1.5rem}.login-panel{width:min(100%,30rem);border:1px solid #25303d;border-radius:.75rem;background:#0e141cf0;padding:2rem;box-shadow:0 24px 80px #00000059}.brand-mark,.brand-icon{display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:.55rem;background:#2dd4bf;color:#03110f}.brand-mark svg,.brand-icon svg{width:1.35rem;height:1.35rem}.eyebrow{margin:0 0 .25rem;color:#2dd4bf;font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.login-panel h1,.topbar h1,.reader-header h1{margin:0;line-height:1.1}.login-copy{color:#aab4c3;line-height:1.6}.login-form,.stack{display:grid;gap:1rem}.checkbox-row{display:flex;align-items:center;gap:.55rem;margin:0}.checkbox-row input{width:1rem;min-height:auto}.primary-button,.secondary-button,.round-button,.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:1px solid transparent;border-radius:.55rem;font-weight:800}.primary-button{min-height:2.65rem;padding:0 1rem;background:#2dd4bf;color:#03110f}.primary-button:hover{background:#5eead4}.secondary-button,.icon-button{min-height:2.35rem;padding:0 .8rem;border-color:#283341;background:#111821;color:#d8dee8}.secondary-button:hover,.icon-button:hover{border-color:#3f5268;background:#172232}.round-button{width:3rem;height:3rem;border-radius:999px;background:#f5f7fb;color:#0b1017}.round-button svg{width:1.25rem;height:1.25rem}.form-error,.inline-error{margin:0;border:1px solid rgba(248,113,113,.35);border-radius:.55rem;background:#7f1d1d42;color:#fecaca;padding:.7rem .8rem;font-size:.86rem}.inline-notice{margin:0;border:1px solid rgba(45,212,191,.28);border-radius:.55rem;background:#14b8a61f;color:#99f6e4;padding:.7rem .8rem;font-size:.86rem}.app-shell{min-height:100vh}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid #25303d;background:#090b0fe0;padding:1rem clamp(1rem,2.5vw,2rem);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.app-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:4rem;border-bottom:1px solid #25303d;background:#090b0feb;padding:.65rem clamp(.75rem,2.5vw,1.5rem);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.app-nav.source-nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto}.nav-title{overflow:hidden;color:#f5f7fb;font-size:1rem;text-align:center;text-overflow:ellipsis;white-space:nowrap}.compact-brand,.nav-actions{display:flex;align-items:center}.compact-brand{min-width:0;gap:.55rem;color:#f5f7fb}.compact-brand strong{overflow:hidden;font-size:1rem;line-height:1;text-overflow:ellipsis;white-space:nowrap}.brand-icon.compact{width:2rem;height:2rem;border-radius:.5rem}.brand-icon.compact svg{width:1.1rem;height:1.1rem}.nav-actions{flex:0 0 auto;gap:.45rem}.nav-button,.control-button{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:2.45rem;border:1px solid #283341;border-radius:.55rem;background:#111821;color:#d8dee8;font-weight:800}.nav-button{padding:0 .7rem}.nav-button.icon-only,.control-button{width:2.45rem;padding:0}.nav-button:hover,.control-button:hover{border-color:#3f5268;background:#172232}.control-button.active{border-color:#2dd4bf9e;background:#163c38;color:#99f6e4}.brand,.panel-title,.inline-control,.metrics,.transport{display:flex;align-items:center}.brand,.panel-title{gap:.75rem}.workspace{width:min(96rem,100%);margin:0 auto;padding:clamp(1rem,2.5vw,2rem);display:grid;grid-template-columns:minmax(18rem,26rem) minmax(0,1fr);gap:1.25rem}.player-page,.source-page{width:min(100%,96rem);margin:0 auto;min-height:calc(100vh - 4rem);padding:clamp(.75rem,2.5vw,1.5rem)}.player-page{width:100%;height:calc(100vh - 4rem);min-height:28rem;overflow:hidden;padding-bottom:7rem}.source-page{width:min(100%,56rem)}.player-stack{display:grid;gap:.75rem;width:100%;height:100%;min-height:0;margin:0 auto;position:relative}.sidebar,.reader-column{display:grid;gap:1.25rem;align-content:start}.panel,.transport,.subtitle-stage,.bottom-player-bar,.playlist-panel{border:1px solid #25303d;border-radius:.55rem;background:#0e141ceb;box-shadow:0 18px 55px #0000003d}.panel{padding:1rem}.panel-title{margin-bottom:1rem;color:#d8dee8}.panel-title h2{margin:0;font-size:1rem}.segmented{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.25rem;margin-bottom:1rem;border:1px solid #283341;border-radius:.6rem;background:#0b1017;padding:.25rem}.segmented button{border:0;border-radius:.45rem;background:transparent;color:#aab4c3;padding:.6rem .5rem;font-weight:800}.segmented button.active{background:#163c38;color:#99f6e4}.two-column,.range-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}.range-grid{grid-template-columns:7rem 1fr;align-items:center}.range-grid label{margin:0}.inline-control{gap:.55rem}.inline-control .icon-button{flex:0 0 auto;width:2.4rem;padding:0}.preset-list{display:grid;gap:.55rem}.preset-list button{display:grid;grid-template-columns:auto 1fr;gap:.15rem .55rem;align-items:center;border:1px solid #283341;border-radius:.55rem;background:#0b1017;color:#eef2f7;padding:.7rem;text-align:left}.preset-list small{grid-column:2;color:#8190a3}.featured-list{display:grid;gap:.65rem}.featured-lesson{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.8rem;align-items:center;border:1px solid #283341;border-radius:.55rem;background:#0b1017;padding:.8rem}.featured-lesson h3{margin:0 0 .5rem;color:#eef2f7;font-size:1rem;line-height:1.25}.featured-lesson-main{min-width:0}.lesson-meta,.lesson-actions{display:flex;align-items:center;gap:.5rem}.lesson-meta{flex-wrap:wrap}.lesson-meta span{border:1px solid #283341;border-radius:999px;background:#101821;color:#aab4c3;padding:.28rem .55rem;font-size:.75rem;font-weight:800}.lesson-actions{justify-content:flex-end}.subtitle-stage{display:grid;grid-template-rows:auto minmax(0,1fr);height:100%;min-height:0;overflow:hidden;padding:clamp(.85rem,2.2vw,1.5rem);background:#050607}.subtitle-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-width:0;color:#8792a2}.subtitle-title-group{display:flex;align-items:center;gap:.8rem;min-width:0}.subtitle-title-group h1{overflow:hidden;margin:0;color:#d8dee8;font-size:1rem;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.subtitle-counter{flex:0 0 auto;color:#f87171;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;font-weight:900}.subtitle-counter strong{color:#f04438}.subtitle-window{display:grid;align-content:center;gap:.85rem;min-height:0;padding:2rem clamp(.5rem,5vw,5rem)}.subtitle-line{display:flex;justify-content:center;width:100%;border:0;border-radius:.45rem;background:transparent;color:#8d97a6;padding:.2rem 0;text-align:center}.subtitle-line:hover{color:#d8dee8}.subtitle-line.active{color:#f04438}.subtitle-text{max-width:min(64rem,92vw);font-size:1rem;font-weight:750;line-height:1.55}.subtitle-line.active .subtitle-text{font-size:1.28rem;font-weight:800;line-height:1.65}.player-summary-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.8rem;align-items:start}.player-summary-row h2{display:-webkit-box;overflow:hidden;margin:0;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#f5f7fb;font-size:clamp(1.15rem,3.6vw,1.55rem);line-height:1.12}.reader-header{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid #25303d;padding-bottom:1rem}.metrics{flex-wrap:wrap;gap:.55rem;justify-content:flex-end}.compact-metrics{max-width:16rem}.metrics span{display:inline-flex;align-items:center;gap:.35rem;border:1px solid #283341;border-radius:999px;background:#0b1017;color:#b8c4d4;padding:.35rem .65rem;font-size:.8rem}.sentence-counter{display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid #283341;border-radius:.55rem;background:#0b1017;color:#aab4c3;padding:.55rem .7rem}.sentence-counter span{font-size:.8rem;font-weight:800}.sentence-counter strong{color:#f8fafc;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95rem}.live-dot:before{content:"";width:.48rem;height:.48rem;border-radius:999px;background:#64748b}.live-dot.active:before{background:#2dd4bf;box-shadow:0 0 0 5px #2dd4bf1f}.transcript-window{display:grid;gap:.55rem}.transcript-row{display:grid;grid-template-columns:2.5rem 1fr;gap:.75rem;align-items:center;border:1px solid transparent;border-radius:.65rem;background:transparent;color:#aab4c3;padding:.7rem;text-align:left}.transcript-row strong{font-size:.9rem;line-height:1.45}.transcript-row:hover{border-color:#283341;background:#101821}.transcript-row span{color:#6f7f92;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;font-weight:900}.transcript-row.active{border-color:#2dd4bf73;background:#14b8a61f;color:#ccfbf1;padding:.95rem .85rem}.transcript-row.active .active-transcript-text{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.6}.empty-state{color:#8190a3}.bottom-player-bar{position:fixed;right:0;bottom:0;left:0;z-index:24;display:flex;align-items:center;justify-content:center;min-height:5.8rem;border-right:0;border-bottom:0;border-left:0;border-radius:0;background:#141618fa;padding:.75rem clamp(.75rem,3vw,2rem);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 -18px 55px #00000052}.player-action-row{display:grid;grid-template-columns:2.75rem 3.25rem 2.75rem minmax(16rem,1fr) 2.75rem 2.75rem 2.75rem 2.75rem;gap:.65rem;align-items:center;width:min(100%,82rem)}.player-action-row .round-button{width:3.25rem;height:3.25rem}.bar-progress{display:flex;align-items:center;min-width:0}.bar-progress input,.bar-volume input{accent-color:#38bdf8}.bar-progress input{width:100%}.bar-volume{position:relative;display:flex;align-items:center;justify-content:center;min-width:0}.volume-popover{position:absolute;bottom:calc(100% + 2rem);left:50%;z-index:28;display:grid;place-items:center;width:2.9rem;height:9rem;border:1px solid #283341;border-radius:.55rem;background:#111821fa;padding:.7rem 0;transform:translate(-50%);box-shadow:0 18px 45px #00000057}.volume-slider-vertical{width:1.35rem;height:7.25rem;min-height:7.25rem;padding:0;writing-mode:vertical-lr;direction:rtl}.bar-speed{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;margin:0;color:#8d97a6}.speed-popover{position:absolute;bottom:calc(100% + .8rem);left:50%;z-index:28;width:7rem;border:1px solid #283341;border-radius:.55rem;background:#111821fa;padding:.35rem;transform:translate(-50%);box-shadow:0 18px 45px #00000057}.speed-options{display:grid;gap:.05rem}.speed-option{display:grid;grid-template-columns:1.1rem minmax(0,1fr);gap:.35rem;align-items:center;min-height:2.35rem;border:0;border-radius:.4rem;background:transparent;color:#d8dee8;padding:0 .55rem;text-align:left;font-size:1.02rem;font-weight:800}.speed-option:hover,.speed-option.selected{background:#2dd4bf1f;color:#f8fafc}.speed-option-mark{display:inline-flex;align-items:center;justify-content:center;color:#f8fafc}.player-status-layer{position:fixed;right:clamp(.75rem,2.5vw,1.5rem);bottom:6.4rem;left:clamp(.75rem,2.5vw,1.5rem);z-index:25;display:grid;gap:.5rem;max-width:44rem;margin:0 auto}.playlist-panel{position:fixed;right:clamp(.75rem,2.5vw,1.5rem);bottom:6.6rem;z-index:26;display:grid;gap:.75rem;width:min(30rem,calc(100vw - 1.5rem));max-height:min(34rem,calc(100vh - 8rem));overflow:auto;background:#1c222bfa;padding:.9rem;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.playlist-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;color:#d8dee8}.playlist-header span{color:#8d97a6;font-size:.8rem;font-weight:800}.playlist-items{display:grid;gap:.35rem}.playlist-item{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;gap:.65rem;align-items:center;border:1px solid transparent;border-radius:.45rem;background:transparent;color:#d8dee8;padding:.65rem .55rem;text-align:left}.playlist-item:hover,.playlist-item.active{border-color:#3f5268;background:#172232}.playlist-item span,.playlist-item small{color:#8d97a6;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:900}.playlist-item strong{overflow:hidden;color:#f5f7fb;text-overflow:ellipsis;white-space:nowrap}@media(max-width:980px){.workspace{grid-template-columns:1fr}.player-page{padding-bottom:8.75rem}.bottom-player-bar{min-height:7.25rem}.reader-header{flex-direction:column}.metrics{justify-content:flex-start}}@media(max-width:620px){.topbar{align-items:flex-start;flex-direction:column}.two-column,.range-grid,.featured-lesson{grid-template-columns:1fr}.lesson-actions{justify-content:stretch}.lesson-actions button{flex:1}.transport .secondary-button{flex:1 1 42%}.app-nav{min-height:3.75rem}.player-page,.source-page{padding:.75rem}.player-page{padding-bottom:10.75rem}.subtitle-stage{grid-template-rows:auto minmax(0,1fr);min-height:0;padding:.75rem}.subtitle-header{align-items:flex-start;flex-direction:column;gap:.45rem}.subtitle-title-group h1{width:100%}.subtitle-title-group{align-items:flex-start;flex-direction:column;gap:.35rem}.subtitle-window{padding:1.25rem .25rem}.subtitle-text{font-size:.95rem;line-height:1.5}.subtitle-line.active .subtitle-text{font-size:1.08rem;line-height:1.6}.bottom-player-bar{min-height:9.45rem;padding:.6rem}.player-action-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem}.bar-progress{flex:1 1 100%;order:4}.bar-volume{flex:0 0 2.45rem;order:5}.bar-speed{flex:0 0 2.45rem;order:6}.player-action-row [data-testid=player-control-loop]{order:7}.player-action-row [data-testid=player-control-playlist]{order:8}.playlist-panel,.player-status-layer{right:.6rem;bottom:10rem;left:.6rem;width:auto}}@media(max-width:360px){.nav-button span{display:none}.nav-button{width:2.45rem;padding:0}}.settings-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;justify-content:flex-end;background:#02060c9e}.settings-drawer{width:min(100%,26rem);min-height:100%;overflow:auto;border-left:1px solid #25303d;background:#0b1017;padding:1rem;box-shadow:-24px 0 70px #00000059}.drawer-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.drawer-header h2{margin:0;font-size:1.05rem}.settings-drawer .panel{border:0;background:transparent;box-shadow:none;padding:0}@media(max-width:620px){.settings-overlay{align-items:flex-end}.settings-drawer{width:100%;min-height:0;max-height:82vh;border-top:1px solid #25303d;border-left:0;border-radius:.75rem .75rem 0 0;box-shadow:0 -18px 70px #0000006b}}