@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#15213c;--muted:#77829a;--muted2:#a0a9ba;--line:#e8ecf3;--paper:#fff;--canvas:#f5f7fb;--navy:#0b1630;--blue:#4e79f7;--blue2:#345ee8;--teal:#4ad6bd;--green:#20a87a;--shadow:0 12px 34px rgba(21,39,79,.045)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--canvas);color:var(--ink);font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{color:inherit}.app-shell{min-height:100vh}.topbar{height:76px;background:var(--navy);color:#fff;display:flex;align-items:center;padding:0 clamp(18px,3.2vw,52px);gap:24px;border-bottom:1px solid rgba(255,255,255,.07)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;min-width:250px}.brand-icon{width:39px;height:39px;border-radius:12px;background:linear-gradient(145deg,#5de1c3,#269d98);display:flex;align-items:center;justify-content:center;gap:3px;box-shadow:0 6px 18px #37c9b532}.brand-icon span{width:3px;border-radius:5px;background:#082d3a;height:12px}.brand-icon span:nth-child(2){height:21px}.brand-icon span:nth-child(3){height:16px}.brand-text strong,.brand-text small{display:block}.brand-text strong{font-family:Manrope,sans-serif;font-size:16px;letter-spacing:-.3px}.brand-text small{font-size:9px;letter-spacing:1.8px;color:#9daecb;margin-top:1px;font-weight:700}.topbar-center{margin:auto;display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:1.8px;color:#b2bfd6;font-weight:700}.live-dot,.mini-pulse{height:7px;width:7px;background:var(--teal);border-radius:50%;box-shadow:0 0 0 4px #4ad6bd17}.topbar-right{display:flex;align-items:center;gap:10px;font-size:12px;color:#c9d3e5}.avatar{display:grid;place-items:center;width:33px;height:33px;border-radius:50%;background:#1d3154;color:#a9f0df;font-size:10px;font-weight:800;border:1px solid #354968}.workspace{max-width:1720px;margin:0 auto;padding:28px clamp(14px,2.4vw,38px);display:grid;grid-template-columns:270px minmax(400px,1fr) 270px;gap:22px;align-items:start}.panel{background:var(--paper);border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow)}.library{padding:22px 16px 16px;position:sticky;top:18px;max-height:calc(100vh - 36px);overflow:auto}.panel-kicker{font-size:9px;letter-spacing:1.8px;font-weight:800;color:#929db2}.library-heading{display:flex;align-items:center;justify-content:space-between;margin:5px 0 16px}.library-heading h2,.rail-heading h2,.tips-card h2{font-family:Manrope,sans-serif;font-size:19px;letter-spacing:-.6px;margin:0}.count-badge{min-width:25px;padding:3px 7px;border-radius:8px;background:#eef2ff;color:var(--blue2);font-size:11px;font-weight:800;text-align:center}.search-box{height:42px;border:1px solid #e8edf5;background:#fafbfe;border-radius:10px;display:flex;align-items:center;gap:9px;padding:0 11px;margin-bottom:14px}.search-box svg{width:16px;height:16px;fill:none;stroke:#98a3b6;stroke-width:1.8;flex-shrink:0}.search-box input{border:0;outline:0;background:transparent;width:100%;min-width:0;color:var(--ink);font-size:12px}.search-box input::placeholder{color:#a2adbf}.conversation-list{display:grid;gap:5px}.conversation-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:11px 9px;border:1px solid transparent;background:transparent;border-radius:11px;cursor:pointer;transition:background .18s,border-color .18s}.conversation-item:hover{background:#f7f9ff}.conversation-item.is-active{background:#eef3ff;border-color:#e4ebff}.conversation-item[hidden]{display:none}.conversation-number{display:grid;place-items:center;flex:0 0 35px;height:35px;border-radius:10px;background:#f0f3f8;color:#8490a5;font-size:11px;font-weight:800}.is-active .conversation-number{background:var(--blue);color:#fff;box-shadow:0 4px 10px #4e79f72e}.conversation-info{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.conversation-info strong{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-info small{font-size:10px;color:#8b96a9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-arrow{opacity:0;color:var(--blue);font-size:14px}.is-active .item-arrow{opacity:1}.library-tip{margin-top:24px;padding:13px 11px;border:1px solid #e5f5f0;border-radius:12px;background:linear-gradient(130deg,#f3fcf9,#f8fbff);display:flex;gap:10px;align-items:flex-start}.tip-icon{display:grid;place-items:center;width:25px;height:25px;background:#d9f6ed;color:#198f77;border-radius:8px;flex-shrink:0}.library-tip p{margin:0;color:#73849a;font-size:10px;line-height:1.65}.library-tip strong{color:#324863;font-size:11px}.empty-library{padding:20px 8px;text-align:center;color:var(--muted);font-size:12px}.empty-icon{display:block;font-size:25px;margin-bottom:8px}.empty-library strong{display:block;color:var(--ink)}.empty-library p{overflow-wrap:anywhere}.practice{min-width:0}.welcome-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:1px 2px 21px}.eyebrow{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:1.9px;font-weight:800;color:#6481d6}.eyebrow-line{height:2px;width:18px;background:#70cdb9;border-radius:3px}.welcome-row h1{font-family:Manrope,sans-serif;font-size:clamp(25px,2.2vw,34px);line-height:1.22;letter-spacing:-1.3px;margin:9px 0 7px;font-weight:800}.welcome-row h1 em{font-style:normal;color:var(--blue)}.welcome-row p{margin:0;color:#818da2;font-size:12px;max-width:510px}.streak-card{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 13px;flex-shrink:0}.streak-icon{width:34px;height:34px;border-radius:10px;background:#fff3dd;color:#d58c27;display:grid;place-items:center;font-size:18px}.streak-card strong,.streak-card span{display:block}.streak-card strong{font-size:11px}.streak-card span{font-size:9px;color:#8a96a9;margin-top:2px}.conversation-banner{position:relative;overflow:hidden;min-height:168px;padding:23px 24px;display:flex;align-items:center;gap:21px;background:linear-gradient(112deg,#0e2143 0%,#132c51 66%,#1c3e64 100%);border:0;color:white;margin-bottom:18px}.banner-art{position:relative;width:100px;height:100px;flex:0 0 100px;display:grid;place-items:center}.art-orbit{position:absolute;border:1px solid #75dccc3d;border-radius:50%;transform:rotate(-25deg)}.orbit-one{width:99px;height:68px}.orbit-two{width:80px;height:108px;transform:rotate(43deg)}.art-disc{width:58px;height:58px;border-radius:20px;background:linear-gradient(145deg,#58d9c0,#2f9b9f);display:grid;place-items:center;transform:rotate(-7deg);box-shadow:0 8px 30px #2dd2b12b}.art-disc span{font-family:Georgia,serif;font-size:65px;line-height:1;color:#10344d;margin-top:15px}.art-star{position:absolute;color:#7de6d1}.star-one{top:5px;right:3px;font-size:14px}.star-two{bottom:8px;left:4px;font-size:18px}.banner-copy{position:relative;z-index:1;min-width:0}.banner-label{display:flex;align-items:center;gap:8px;color:#75dbc7;font-size:9px;font-weight:800;letter-spacing:1.7px}.mini-pulse{width:6px;height:6px;box-shadow:none}.banner-copy h2{font-family:Manrope,sans-serif;font-size:24px;letter-spacing:-.7px;margin:8px 0 4px}.banner-copy>p{font-size:11px;color:#b6c7dd;margin:0 0 15px;max-width:470px;overflow-wrap:anywhere}.banner-meta{display:flex;align-items:center;gap:13px;color:#b9c9df;font-size:10px;flex-wrap:wrap}.banner-meta>span{display:flex;align-items:center;gap:6px}.banner-meta svg{width:14px;height:14px;stroke:#75dbc7;stroke-width:1.6;fill:none}.meta-divider{height:13px;width:1px;background:#49617e}.banner-decoration{position:absolute;right:14px;bottom:-35px;font-family:Manrope,sans-serif;font-size:150px;font-weight:800;line-height:1;color:#ffffff06;pointer-events:none}.transcript-panel{padding:20px 20px 9px;margin-bottom:18px}.section-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-header h2{font-family:Manrope,sans-serif;font-size:19px;letter-spacing:-.5px;margin:3px 0 0}.switch-label{display:flex;align-items:center;gap:9px;color:#77849a;font-size:11px;cursor:pointer}.switch-label input{position:absolute;opacity:0;pointer-events:none}.switch{width:31px;height:18px;border-radius:20px;background:#dce2ec;position:relative;transition:background .2s}.switch:after{content:'';position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:white;box-shadow:0 1px 3px #10204020;transition:transform .2s}.switch-label input:checked+.switch{background:var(--blue)}.switch-label input:checked+.switch:after{transform:translateX(13px)}.transcript-guide{display:flex;align-items:center;gap:9px;padding:11px 12px;margin:16px 0 5px;border-radius:9px;background:#f7f9fd;color:#8793a7;font-size:10px}.guide-icon{display:grid;place-items:center;width:21px;height:21px;border-radius:7px;background:#e7efff;color:#5277e2;font-size:15px}.guide-key{margin-left:auto;color:#a5afbf;font-size:8px;font-weight:800;letter-spacing:1px;white-space:nowrap}.sentences{display:grid}.sentence-row{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;gap:10px;align-items:center;padding:12px 8px;border-bottom:1px solid #eff2f7;border-radius:9px;transition:background .15s}.sentence-row:last-child{border-bottom:0}.sentence-row.is-current{background:#f0f4ff;border-bottom-color:transparent}.line-number{width:31px;height:31px;border:0;border-radius:9px;background:#f0f3f8;color:#8a96aa;font-size:10px;font-weight:800;cursor:pointer}.is-current .line-number{background:#dce7ff;color:#3862e2}.sentence-content{min-width:0;text-align:left;border:0;background:transparent;padding:0;cursor:pointer}.sentence-text{display:block;font-size:12px;line-height:1.6;color:#33415a;font-weight:500;overflow-wrap:anywhere}.sentence-text strong{color:#71809a;font-size:10px;font-weight:800;margin-right:3px}.sentence-status{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:9px;color:#a3adbd;font-weight:500}.sentence-status i{width:5px;height:5px;border-radius:50%;background:#d5dbe5}.sentence-status.is-ready{color:#21936e}.sentence-status.is-ready i{background:#36bd92}.line-play{width:31px;height:31px;display:grid;place-items:center;border:1px solid #e7ecf4;background:#fff;border-radius:9px;cursor:pointer;opacity:.7;transition:all .15s}.line-play:hover,.is-current .line-play{opacity:1;border-color:#c9d7ff;color:var(--blue);background:white}.line-play svg{width:13px;height:13px;fill:currentColor}.transcript-empty{padding:30px 8px;text-align:center;color:var(--muted);font-size:12px}.player{padding:19px 20px 16px;margin-bottom:13px}.player-topline{display:flex;align-items:center;justify-content:space-between}.audio-badge{display:flex;align-items:center;gap:6px;font-size:8px;font-weight:800;letter-spacing:1px;color:#238b75;background:#eaf9f4;border-radius:6px;padding:6px 8px}.audio-badge>span{width:5px;height:5px;border-radius:50%;background:#25b68b}.audio-badge.is-original{color:#5c75bc;background:#edf1ff}.audio-badge.is-original>span{background:#6682ee}.mode-select{display:flex;gap:9px;margin:14px 0 17px}.mode-option{display:flex;align-items:center;gap:9px;flex:1;min-width:0;padding:10px;border:1px solid #e9edf4;border-radius:10px;cursor:pointer;transition:all .15s}.mode-option.is-selected{border-color:#cbd8ff;background:#f5f7ff}.mode-option input{position:absolute;opacity:0}.mode-radio{width:14px;height:14px;border:1.5px solid #c4ccda;border-radius:50%;flex-shrink:0;position:relative}.mode-option.is-selected .mode-radio{border-color:var(--blue)}.mode-option.is-selected .mode-radio:after{content:'';position:absolute;inset:3px;background:var(--blue);border-radius:50%}.mode-option strong,.mode-option small{display:block}.mode-option strong{font-size:10px}.mode-option small{font-size:9px;color:#8b97aa;margin-top:3px}.audio-timeline{display:flex;align-items:center;gap:10px;color:#8e99ac;font-size:9px;font-variant-numeric:tabular-nums}.audio-timeline input{flex:1;min-width:0;height:3px;accent-color:var(--blue);cursor:pointer}.transport{display:flex;align-items:center;justify-content:center;gap:15px;margin:13px 0 18px}.transport-btn{display:grid;place-items:center;width:34px;height:34px;border:0;background:transparent;color:#7d8aa1;cursor:pointer}.transport-btn svg{width:19px;height:19px;fill:currentColor}.play-button{display:grid;place-items:center;width:47px;height:47px;border:0;border-radius:50%;background:linear-gradient(145deg,#5a82ff,#4268ed);color:#fff;box-shadow:0 6px 15px #4e79f73c;cursor:pointer;transition:transform .15s}.play-button:hover{transform:translateY(-1px)}.play-button svg{width:18px;height:18px;fill:currentColor}.pause-icon{display:none}.play-button.is-playing .play-icon{display:none}.play-button.is-playing .pause-icon{display:block}.transport-divider{height:25px;width:1px;background:#e8edf4;margin:0 2px}.repeat-button{display:flex;align-items:center;gap:7px;border:1px solid #e8edf4;border-radius:9px;background:#fff;padding:9px 11px;color:#5e6d86;font-size:10px;font-weight:700;cursor:pointer}.repeat-button:hover{border-color:#cad6ff;color:var(--blue)}.repeat-button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.player-settings{display:flex;align-items:flex-end;gap:16px;border-top:1px solid #eef1f6;padding-top:14px}.speed-control{flex:1;min-width:90px}.setting-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.setting-heading label,.repeat-control>label{font-size:10px;color:#7f8ba0}.setting-heading strong{font-size:11px;color:#4268ed}.speed-control input{display:block;width:100%;height:3px;accent-color:var(--blue);cursor:pointer}.repeat-control{display:grid;gap:6px}.repeat-control select{height:29px;border:1px solid #e6ebf3;border-radius:7px;padding:0 9px;background:#fff;color:#475773;font-size:10px;outline:none}.auto-next{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:10px;color:#748198;cursor:pointer;padding-bottom:7px}.auto-next input{position:absolute;opacity:0}.custom-check{width:14px;height:14px;border:1px solid #d6deea;border-radius:4px;background:#fff;position:relative}.auto-next input:checked+.custom-check{background:var(--blue);border-color:var(--blue)}.auto-next input:checked+.custom-check:after{content:'✓';position:absolute;inset:-1px;color:white;font-size:10px;text-align:center}.status-line{display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 11px;border-radius:8px;background:#f7f9fc;color:#7f8ca1;font-size:10px;line-height:1.5}.status-dot{width:6px;height:6px;flex-shrink:0;border-radius:50%;background:#39b998}.status-line.is-warning{background:#fff8ed;color:#9a6b27}.status-line.is-warning .status-dot{background:#e7a343}.footer-note{display:flex;align-items:center;justify-content:center;gap:7px;padding:8px;color:#9aa5b6;font-size:10px}.footer-note span{color:#5ec9b1}.right-rail{display:grid;gap:15px}.progress-card,.tips-card,.shortcut-card{padding:20px}.rail-heading{display:flex;justify-content:space-between;align-items:center}.rail-heading h2{margin-top:4px}.progress-symbol{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#eef3ff;color:var(--blue);font-size:18px}.progress-number{display:flex;align-items:baseline;gap:9px;margin:24px 0 12px}.progress-number>strong{font-family:Manrope,sans-serif;font-size:43px;letter-spacing:-2px;line-height:1;color:#243757}.progress-number>strong small{font-size:20px;letter-spacing:-.5px;color:var(--blue)}.progress-number>span{font-size:10px;color:#8b97aa}.large-progress{height:7px;border-radius:10px;background:#edf1f7;overflow:hidden}.large-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4e79f7,#63cbb8);border-radius:10px;transition:width .3s}.progress-caption{display:flex;justify-content:space-between;margin-top:9px;font-size:9px;color:#929db0}.progress-note{display:flex;gap:9px;align-items:flex-start;margin-top:19px;padding:12px 10px;background:#f1f8ff;border-radius:10px}.progress-note>span{color:#4d7bf0}.progress-note p{margin:0;color:#7c8aa2;font-size:10px;line-height:1.7}.progress-note strong{color:#4e6386}.tips-card h2{margin-top:4px;margin-bottom:18px}.routine-step{display:flex;gap:10px;align-items:flex-start;margin:15px 0}.step-number{display:grid;place-items:center;width:29px;height:29px;border-radius:9px;flex-shrink:0;background:#eff3ff;color:#5376e9;font-size:10px;font-weight:800}.routine-step:nth-of-type(3) .step-number{background:#eaf9f4;color:#239a7d}.routine-step:nth-of-type(4) .step-number{background:#fff4e6;color:#ce8b32}.routine-step strong{display:block;font-size:11px;margin:1px 0 3px}.routine-step p{font-size:10px;color:#8793a6;line-height:1.6;margin:0}.shortcut-card{padding:18px 20px}.shortcut-row{display:flex;align-items:center;justify-content:space-between;margin-top:13px;color:#7e8aa0;font-size:10px}.shortcut-row kbd{font-family:inherit;font-size:9px;color:#6e7c94;background:#f7f9fc;border:1px solid #e7ecf3;border-radius:5px;padding:4px 6px;min-width:29px;text-align:center}.transcript-empty{color:#8793a6}@media(min-width:1600px){.workspace{gap:25px}.conversation-banner{min-height:178px}.sentence-text{font-size:13px}}@media(max-width:1250px){.workspace{grid-template-columns:230px minmax(360px,1fr);gap:16px}.right-rail{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))}.library{top:14px}.topbar-center{display:none}.topbar-right{margin-left:auto}}@media(max-width:820px){.topbar{height:66px;padding:0 16px}.brand{min-width:0}.topbar-right .topbar-label{display:none}.workspace{padding:18px 14px;grid-template-columns:1fr;gap:16px}.library{position:static;max-height:none;padding:17px}.conversation-list{grid-template-columns:repeat(2,minmax(0,1fr))}.conversation-item{min-width:0}.library-tip{margin-top:14px}.right-rail{grid-column:auto;grid-template-columns:repeat(2,minmax(0,1fr))}.shortcut-card{grid-column:1/-1}.welcome-row{align-items:flex-start}.streak-card{display:none}.conversation-banner{min-height:150px;padding:18px}.banner-art{width:75px;height:75px;flex-basis:75px}.art-disc{width:48px;height:48px;border-radius:16px}.art-disc span{font-size:54px}.orbit-one{width:80px;height:56px}.orbit-two{height:84px;width:64px}.banner-copy h2{font-size:21px}.banner-decoration{font-size:120px}}@media(max-width:520px){.workspace{padding:12px 10px;gap:12px}.brand-icon{width:35px;height:35px}.brand-text strong{font-size:14px}.brand-text small{font-size:8px}.topbar-right{gap:7px}.avatar{width:30px;height:30px}.welcome-row{margin:4px 2px 15px}.welcome-row h1{font-size:27px}.welcome-row p{font-size:11px}.conversation-list{grid-template-columns:1fr}.conversation-item{padding:9px}.conversation-banner{gap:12px;padding:16px 13px;min-height:137px}.banner-art{width:53px;height:60px;flex-basis:53px}.art-disc{width:42px;height:42px;border-radius:13px}.art-disc span{font-size:47px;margin-top:12px}.orbit-one{width:58px;height:42px}.orbit-two{width:48px;height:64px}.banner-copy h2{font-size:18px;overflow-wrap:anywhere}.banner-copy>p{font-size:10px;margin-bottom:10px}.banner-meta{font-size:9px;gap:8px}.banner-meta svg{width:12px;height:12px}.meta-divider{display:none}.transcript-panel,.player{padding:15px 12px}.section-header h2{font-size:17px}.transcript-guide{font-size:9px;padding:9px}.guide-key{display:none}.sentence-row{grid-template-columns:29px minmax(0,1fr) 31px;gap:7px;padding:11px 3px}.sentence-text{font-size:11px}.line-number{width:27px;height:28px}.line-play{width:29px;height:29px}.mode-select{gap:6px}.mode-option{padding:8px 6px;gap:6px}.mode-option strong{font-size:9px}.mode-option small{font-size:8px}.mode-radio{width:12px;height:12px}.transport{gap:9px}.transport-divider{margin:0}.repeat-button{padding:8px;font-size:9px;gap:5px}.repeat-button svg{width:12px}.player-settings{gap:10px;flex-wrap:wrap}.speed-control{flex-basis:42%}.repeat-control{flex:1}.auto-next{padding-bottom:6px}.right-rail{grid-template-columns:1fr}.shortcut-card{grid-column:auto}.progress-card,.tips-card,.shortcut-card{padding:16px}.progress-number{margin:17px 0 10px}.progress-number>strong{font-size:36px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}