@keyframes token-in{from{opacity:.4;transform:translateY(-7px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
:root{font-family:'DM Sans',sans-serif;color:#302c3b;background:#f7f6f2;--purple:#7461bf;--line:#e5e1dc;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;border:0;background:none;color:inherit}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #ad97d9;outline-offset:3px}a{color:inherit;text-decoration:none}svg{display:block;flex-shrink:0}.site-header{min-height:78px;padding:16px 5%;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);background:#faf9f6}.brand{display:flex;align-items:center;gap:9px;font-size:28px;font-weight:700;letter-spacing:-1.5px}.brand svg,.brand-dot{color:var(--purple)}.brand-dot{margin-left:-6px}.language-picker{display:flex;gap:3px;padding:4px;background:#eeebe6;border-radius:8px}.language-button{padding:8px 11px;border-radius:5px;font-size:11px;color:#93869c}.language-button.active{background:#fff;color:#6d56a0;box-shadow:0 1px 4px #49343810}.page{max-width:900px;margin:auto;padding:34px 40px 50px}.lesson-heading{margin-bottom:23px}h1{font-family:'Instrument Serif',serif;font-weight:400;font-size:43px;letter-spacing:-.8px;line-height:1.15;margin:0}.topic-name{font-size:13px;color:#8d8196;margin:9px 0 0}.lesson-rule{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px 20px;background:#eee9f4;border-radius:8px;margin-bottom:24px}.lesson-rule p{font-size:13px;line-height:1.7;margin:0;color:#8d7a9d}.lesson-rule strong{font-size:16px;font-weight:500;color:#79608e;white-space:nowrap}.lab-layout{display:block}.lab-workspace{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.lab-toolbar{display:flex;justify-content:flex-end;padding:12px 17px 0}.icon-button{padding:7px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #e8e1eb;border-radius:6px;font-size:11px;color:#9a8aa4}.lab-canvas{padding:16px 24px 22px;min-height:210px}.live-sentence{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:55px}.sentence-token{border:1px solid #dcd0ea;border-radius:7px;background:#eee7f8;color:#82649e;font-size:23px;padding:11px 15px;animation:token-in .3s both}.sentence-token.subject{background:#e6ebe0;border-color:#d3ddc9;color:#7c8c6d}.sentence-token.action{background:#f6e7d4;border-color:#ebd4b6;color:#b28a5b}.sentence-meaning{font-size:14px;line-height:1.7;color:#a18eae;margin:13px 0 0}.sentence-translation{font-size:13px;line-height:1.7;color:#8b7b96;margin:7px 0 0}.lab-diff{font-size:12px;color:#95829f;line-height:1.8;margin-top:17px;border-top:1px solid #eee7f1;padding-top:12px}.lab-diff b{font-weight:500;color:#806194}.lab-controls{padding:21px 24px;border-bottom:1px solid #e9e2ed}.control-group{display:flex;align-items:flex-start;gap:12px;margin-bottom:15px}.control-group:last-child{margin-bottom:0}.control-label{font-size:11px;color:#a08eab;width:61px;flex-shrink:0;padding-top:9px;line-height:1.5}.segmented{display:flex;flex-wrap:wrap;gap:6px}.segment{border:1px solid #e5dceb;border-radius:6px;padding:8px 12px;font-size:12px;color:#9885a3}.segment.selected{color:#89669f;border-color:#c8b3dd;background:#eee7f7}.segment.subject.selected{background:#e7eddf;border-color:#c7d6b8;color:#7c8d69}.segment.verb.selected{background:#f7e8d3;border-color:#e6cfac;color:#b28d5b}.lesson-actions{display:flex;justify-content:flex-end;margin-top:22px}.primary{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 20px;background:var(--purple);color:#fff;border-radius:7px;font-size:12px}.primary:hover{background:#6652ae}.quiet-button{display:flex;align-items:center;gap:7px;color:#9b88a5;font-size:12px;padding:9px 0}.practice-shell{max-width:720px;margin:auto}.practice-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.practice-top{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid var(--line);font-size:12px;color:#9c8aa7}.practice-body{padding:25px}.question-progress{height:3px;border-radius:3px;overflow:hidden;background:#ece5f1;margin-bottom:22px}.question-progress span{display:block;height:100%;background:#ad90c9}.practice-body h2{font-size:20px;line-height:1.5;font-weight:500;margin:0 0 12px;letter-spacing:-.3px}.practice-body p{font-size:14px;line-height:1.8;color:#9a88a5}.answer-options{display:grid;gap:9px;margin-top:18px}.answer-option{border:1px solid #e5dcec;border-radius:7px;padding:14px;display:flex;align-items:center;gap:12px;text-align:left;font-size:14px;color:#967fa5;background:#fdfbff}.answer-letter{width:24px;height:24px;border:1px solid #e1d5e8;border-radius:5px;display:grid;place-items:center;font-size:10px}.answer-option.chosen{background:#eee5f8;border-color:#bca0d5;color:#82649b}.answer-option.correct{background:#edf3e7;border-color:#bacfa9;color:#7e986a}.answer-option.incorrect{background:#f9eee5;border-color:#dfbda5;color:#b18a6d}.answer-option:disabled{opacity:1}.answer-input{width:100%;padding:14px;border:1px solid #decee9;border-radius:7px;background:#fdfaff;color:#8f6da2;font-size:17px;margin:10px 0}.inline-feedback{padding:13px;background:#eef4e8;color:#81956f;border-radius:7px;font-size:12px;line-height:1.8}.inline-feedback.error{background:#faeee5;color:#b38b6e}.inline-feedback strong{font-weight:600}.practice-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding:16px 24px}.practice-bottom .primary{margin-left:auto}.result{text-align:center;padding:24px}.result-score{margin:5px 0 25px}.result-score strong{display:block;font-size:35px;font-weight:500;color:var(--purple);margin-bottom:7px}.result-score small{font-size:12px;color:#aa97b6}.result .quiet-button{margin:8px auto 0}.lesson-complete-tag{color:#84976e;font-size:11px}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:900px){.page{padding:30px}.lab-layout{grid-template-columns:1fr}.lab-canvas{min-height:185px}.lesson-rule{align-items:flex-start;flex-direction:column;gap:6px}.lab-toolbar{padding-top:12px}.lesson-actions{margin-top:18px}}
@media(max-width:580px){.site-header{min-height:67px;padding:14px 18px;gap:10px}.brand{font-size:23px;gap:7px}.brand svg{width:25px;height:28px}.language-button{font-size:9px;padding:7px}.language-picker{padding:3px;gap:1px}.page{padding:26px 18px 35px}h1{font-size:34px}.topic-name{font-size:12px}.lesson-heading{margin-bottom:20px}.lesson-rule{padding:14px 16px;gap:7px;margin-bottom:20px}.lesson-rule p{font-size:12px}.lesson-rule strong{font-size:15px}.lab-canvas{padding:14px 18px 20px;min-height:170px}.sentence-token{font-size:20px;padding:10px 12px}.live-sentence{gap:6px}.sentence-meaning{font-size:13px}.sentence-translation{font-size:12px}.lab-diff{font-size:11px}.lab-controls{padding:18px}.control-label{width:52px;font-size:10px}.control-group{gap:8px}.segment{font-size:11px;padding:8px 10px}.primary,.quiet-button{font-size:11px}.practice-body{padding:20px}.practice-top,.practice-bottom{padding:15px 20px}.practice-body h2{font-size:18px}.practice-body p{font-size:13px}.answer-option{font-size:12px;padding:12px;gap:9px}.lesson-complete-tag{font-size:10px}}
@media(max-width:350px){.site-header{flex-wrap:wrap}.language-picker{margin-left:auto}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:12px;color:#a493ae;margin-bottom:18px}.crumbs a{color:#7d6a92}.crumbs a:hover{color:var(--purple)}.crumb-sep{color:#cfc3d6}.status-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px 24px;text-align:center;color:#9a88a5;font-size:14px}.status-card p{margin:0 0 14px}.status-card[aria-busy] p{margin:0}.card-list{display:grid;gap:10px}.course-card,.unit-card{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;color:#9a88a5;transition:border-color .15s}.course-card:hover,.unit-card:hover{border-color:#c8b3dd}.course-mark{color:var(--purple);width:46px;height:46px;border-radius:10px;background:#eee7f8;display:grid;place-items:center}.course-body{display:grid;gap:4px;flex:1;min-width:0}.course-body strong{font-size:17px;font-weight:550;color:#302c3b}.course-body small{font-size:13px;line-height:1.6}.course-body em{font-style:normal;font-size:11px;color:#84976e}.unit-number{width:52px;height:52px;border-radius:10px;background:#7461bf;color:#fff;display:grid;place-items:center;align-content:center;font-size:20px;font-weight:600;line-height:1;flex-shrink:0}.unit-number small{font-size:9px;font-weight:450;letter-spacing:.5px;text-transform:uppercase;opacity:.8;margin-bottom:3px}.unit-done{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#7e986a;background:#edf3e7;border-radius:5px;padding:5px 8px;white-space:nowrap}.sample-link{display:inline-flex;align-items:center;gap:7px;margin-top:22px;font-size:12px;color:#9b88a5}.sample-link:hover{color:var(--purple)}.unit-kicker{display:inline-block;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:#fff;background:var(--purple);border-radius:4px;padding:4px 8px;margin-bottom:10px}.sections{display:grid;gap:16px}.section-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.section-head{display:flex;align-items:center;gap:13px;padding:16px 22px;border-bottom:1px solid #eee7f1}.section-head h2{font-size:17px;font-weight:550;margin:0;letter-spacing:-.2px}.section-code{width:30px;height:30px;border-radius:7px;background:#eee7f8;color:#6d56a0;display:grid;place-items:center;font-weight:650;font-size:14px;flex-shrink:0}.section-body{padding:18px 22px;display:grid;gap:18px}.block-title{font-size:12px;font-weight:550;color:#a08eab;text-transform:uppercase;letter-spacing:.5px;margin:0 0 10px}.block-text{font-size:14px;line-height:1.8;color:#5d5568;margin:0}.block-text b,.block-note b{font-weight:600;color:#6d56a0}.block-note{display:flex;gap:10px;align-items:flex-start;background:#f6f3fa;border-radius:8px;padding:12px 14px;color:#8d7a9d}.block-note svg{margin-top:4px;color:var(--purple)}.block-note p{margin:0;font-size:13px;line-height:1.75}.bubbles{display:flex;flex-wrap:wrap;gap:9px}.bubble{display:grid;gap:3px;background:#faf8fc;border:1px solid #e9e1ef;border-radius:14px 14px 14px 4px;padding:10px 14px;font-size:15px;color:#3e3849}.example-tr{font-size:12px;color:#a193ab}.examples{list-style:none;margin:0;padding:0;display:grid;gap:8px}.examples li{display:grid;gap:2px;padding:9px 0 9px 14px;border-left:2px solid #e5dcec;font-size:15px;color:#3e3849}.be-mark{background:#eee7f8;color:#6d56a0;border-radius:4px;padding:0 3px;font-weight:550}.table-wrap{overflow-x:auto}.forms-table{border-collapse:collapse;width:100%;font-size:14px}.forms-table th{text-align:left;font-size:11px;font-weight:500;color:#a08eab;padding:8px 12px;border-bottom:1px solid var(--line)}.forms-table td{padding:10px 12px;border-bottom:1px solid #f1ecf4;color:#6d56a0}.forms-table td.subject-cell{color:#7c8c6d}.forms-table tr:last-child td{border-bottom:0}.playground{margin-top:16px}.playground-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px 0}.playground-head h2{font-size:17px;font-weight:550;margin:0}.lab-canvas .sentence-dot{font-size:23px;color:#a18eae;margin-left:-4px}.lesson-actions{align-items:center;gap:12px}.unit-nav{display:flex;justify-content:space-between;margin-top:26px;padding-top:16px;border-top:1px solid var(--line)}.unit-nav a:hover{color:var(--purple)}.practice-top span:last-child{color:#7d6a92}.question-sentence{font-size:19px!important;color:#3e3849!important;line-height:1.6!important;margin:6px 0 4px}.question-hint{font-size:13px!important;margin:0 0 6px}.gap{display:inline-block;min-width:54px;border-bottom:2px solid #bca0d5;color:transparent;line-height:1.1}.inline-feedback b{font-weight:600}.result .quiet-button{justify-content:center}
@media(max-width:580px){.crumbs{font-size:11px;margin-bottom:14px}.course-card,.unit-card{padding:14px;gap:12px}.course-mark{width:40px;height:40px}.unit-number{width:44px;height:44px;font-size:17px}.course-body strong{font-size:15px}.course-body small{font-size:12px}.section-head{padding:14px 16px}.section-head h2,.playground-head h2{font-size:15px}.section-body{padding:16px;gap:16px}.playground-head{padding:14px 18px 0}.bubble,.examples li{font-size:14px}.forms-table{font-size:13px}.forms-table td,.forms-table th{padding:8px}.question-sentence{font-size:17px!important}.lesson-actions{flex-wrap:wrap}}
.unit-list{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}.unit-card.soon{opacity:.6;cursor:default}.unit-card.soon:hover{border-color:var(--line)}.unit-card.soon .unit-number{background:#c8bddf}.soon-tag{font-size:11px;color:#9a88a5;background:#f1edf5;border-radius:5px;padding:5px 8px;white-space:nowrap}.status-card .primary{margin-top:6px}
@media(max-width:580px){.unit-list{grid-template-columns:1fr}}
.header-tools{display:flex;align-items:center;gap:8px}.theme-button{width:36px;height:36px;display:grid;place-items:center;border-radius:8px;background:#eeebe6;color:#7d6a92}.theme-button:hover{color:var(--purple)}
@media(max-width:580px){.header-tools{gap:6px}.theme-button{width:31px;height:31px}}
/* Dark theme: data-theme is set on <html> before first paint (index.html) and toggled from the header */
:root[data-theme=dark]{color-scheme:dark;color:#ebe7f1;background:#16141b;--purple:#9d8ae6;--line:#332e3c;--surface:#1f1c26;--surface-2:#28242f;--muted:#a69db3;--soft:#c8bff5;--tint:#2d2740;--tint-line:#493f66;--tint-text:#c6b6f0;--green:#22301e;--green-line:#3d5234;--green-text:#a9c591;--orange:#3a2b1d;--orange-line:#5e462e;--orange-text:#e3b680}
[data-theme=dark] body{background:#16141b}
[data-theme=dark] .site-header{background:#1a1820}
[data-theme=dark] .language-picker,[data-theme=dark] .theme-button{background:var(--surface-2)}
[data-theme=dark] .language-button{color:var(--muted)}
[data-theme=dark] .language-button.active{background:#3a3445;color:var(--tint-text);box-shadow:none}
[data-theme=dark] .theme-button{color:var(--tint-text)}
[data-theme=dark] .topic-name,[data-theme=dark] .crumbs,[data-theme=dark] .control-label,[data-theme=dark] .block-title,[data-theme=dark] .forms-table th,[data-theme=dark] .example-tr,[data-theme=dark] .result-score small{color:var(--muted)}
[data-theme=dark] .crumbs a,[data-theme=dark] .practice-top span:last-child{color:var(--tint-text)}
[data-theme=dark] .crumb-sep{color:#5a5266}
[data-theme=dark] .lesson-rule,[data-theme=dark] .block-note{background:var(--tint)}
[data-theme=dark] .lesson-rule p,[data-theme=dark] .block-note{color:#b7abc6}
[data-theme=dark] .lesson-rule strong{color:var(--tint-text)}
[data-theme=dark] .lab-workspace,[data-theme=dark] .practice-card,[data-theme=dark] .status-card,[data-theme=dark] .course-card,[data-theme=dark] .unit-card,[data-theme=dark] .section-card{background:var(--surface)}
[data-theme=dark] .icon-button{border-color:var(--line);color:var(--muted)}
[data-theme=dark] .sentence-token,[data-theme=dark] .segment.selected,[data-theme=dark] .answer-option.chosen{background:var(--tint);border-color:var(--tint-line);color:var(--tint-text)}
[data-theme=dark] .sentence-token.subject,[data-theme=dark] .segment.subject.selected,[data-theme=dark] .answer-option.correct{background:var(--green);border-color:var(--green-line);color:var(--green-text)}
[data-theme=dark] .sentence-token.action,[data-theme=dark] .segment.verb.selected,[data-theme=dark] .answer-option.incorrect{background:var(--orange);border-color:var(--orange-line);color:var(--orange-text)}
[data-theme=dark] .sentence-meaning,[data-theme=dark] .sentence-translation,[data-theme=dark] .lab-diff,[data-theme=dark] .lab-canvas .sentence-dot,[data-theme=dark] .practice-top,[data-theme=dark] .practice-body p,[data-theme=dark] .status-card,[data-theme=dark] .course-card,[data-theme=dark] .unit-card,[data-theme=dark] .quiet-button,[data-theme=dark] .sample-link{color:var(--muted)}
[data-theme=dark] .lab-diff b,[data-theme=dark] .block-text b,[data-theme=dark] .block-note b,[data-theme=dark] .forms-table td{color:var(--tint-text)}
[data-theme=dark] .lab-diff,[data-theme=dark] .lab-controls,[data-theme=dark] .section-head{border-color:var(--line)}
[data-theme=dark] .segment,[data-theme=dark] .answer-option,[data-theme=dark] .answer-letter{border-color:var(--line);color:var(--muted)}
[data-theme=dark] .answer-option{background:var(--surface-2)}
[data-theme=dark] .answer-input{background:var(--surface-2);border-color:var(--tint-line);color:#ebe7f1}
[data-theme=dark] .primary{background:#7461bf}[data-theme=dark] .primary:hover{background:#836fd0}
[data-theme=dark] .question-progress{background:var(--surface-2)}[data-theme=dark] .question-progress span{background:var(--purple)}
[data-theme=dark] .inline-feedback,[data-theme=dark] .unit-done{background:var(--green);color:var(--green-text)}
[data-theme=dark] .inline-feedback.error{background:var(--orange);color:var(--orange-text)}
[data-theme=dark] .lesson-complete-tag,[data-theme=dark] .course-body em,[data-theme=dark] .forms-table td.subject-cell{color:var(--green-text)}
[data-theme=dark] .course-card:hover,[data-theme=dark] .unit-card:hover{border-color:var(--tint-line)}
[data-theme=dark] .unit-card.soon:hover{border-color:var(--line)}
[data-theme=dark] .course-mark,[data-theme=dark] .section-code,[data-theme=dark] .be-mark{background:var(--tint);color:var(--tint-text)}
[data-theme=dark] .course-body strong,[data-theme=dark] .bubble,[data-theme=dark] .examples li,[data-theme=dark] .question-sentence{color:#ebe7f1!important}
[data-theme=dark] .block-text{color:#cdc6d8}
[data-theme=dark] .bubble{background:var(--surface-2);border-color:var(--line)}
[data-theme=dark] .examples li{border-left-color:var(--tint-line)}
[data-theme=dark] .forms-table td{border-bottom-color:#2b2733}
[data-theme=dark] .gap{border-bottom-color:var(--purple)}
[data-theme=dark] .unit-number,[data-theme=dark] .unit-kicker{background:#6b58b8}
[data-theme=dark] .unit-card.soon .unit-number{background:#4a4260}
[data-theme=dark] .soon-tag{background:var(--surface-2);color:var(--muted)}
[data-theme=dark] button:focus-visible,[data-theme=dark] input:focus-visible,[data-theme=dark] a:focus-visible{outline-color:#8c78d6}
.sentence-context{font-size:14px;line-height:1.6;color:#8b7b96;margin:0 0 10px;font-style:italic}
[data-theme=dark] .sentence-context{color:var(--muted)}

/* All unit exercises share one scrollable page, grouped by the lesson's cases. */
.practice-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:24px}
.practice-heading .quiet-button{margin-top:4px;flex-shrink:0}
.practice-overview{padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:32px}
.practice-overview-labels{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:12px;color:#78688a;margin-bottom:13px}
.practice-overview .question-progress{margin:0;height:5px}
.exercise-groups{display:grid;gap:36px}
.exercise-group{min-width:0}
.exercise-group-heading{display:flex;align-items:center;gap:12px;padding:0 0 16px;border-bottom:2px solid #d8cce8;margin-bottom:16px}
.exercise-group-heading .section-code{width:42px;height:42px;font-size:19px;border-radius:10px}
.exercise-group-heading>div{flex:1;min-width:0}
.exercise-group-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:#8b749f;margin:0 0 4px}
.exercise-group-heading h2{font-size:18px;line-height:1.5;font-weight:550;margin:0;overflow-wrap:anywhere}
.exercise-group-count{font-size:11px;color:#8b7b96;flex-shrink:0}
.exercise-list{display:grid;gap:16px}
.exercise-card{border-left:3px solid var(--line)}
.exercise-card .practice-top{gap:12px;padding:13px 24px}
.exercise-number{font-weight:550;color:#78688a}
.exercise-status{display:inline-flex;align-items:center;gap:5px;text-align:right;font-size:11px}
.exercise-card .practice-body h3{font-size:18px;line-height:1.5;font-weight:500;margin:0 0 12px;letter-spacing:-.3px}
.exercise-card .practice-body{padding:20px 24px}
.exercise-card .practice-bottom{padding:12px 24px}
.exercise-card[data-status=answered],.exercise-card[data-status=checking]{border-left-color:var(--purple)}
.exercise-card[data-status=correct]{border-left-color:#7e986a}
.exercise-card[data-status=incorrect]{border-left-color:#c48b60}
.exercise-card[data-status=correct] .exercise-status{color:#64844d}
.exercise-card[data-status=incorrect] .exercise-status{color:#a3673d}
.practice-result{margin-top:28px}
.practice-result .lesson-complete-tag{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 0 16px}
.practice-page-bottom{margin-top:24px;padding-top:12px;border-top:1px solid var(--line)}
[data-theme=dark] .practice-overview{background:var(--surface)}
[data-theme=dark] .practice-overview-labels,[data-theme=dark] .exercise-number,[data-theme=dark] .exercise-group-label{color:var(--tint-text)}
[data-theme=dark] .exercise-group-count{color:var(--muted)}
[data-theme=dark] .exercise-group-heading{border-color:var(--tint-line)}
[data-theme=dark] .exercise-card[data-status=correct] .exercise-status{color:var(--green-text)}
[data-theme=dark] .exercise-card[data-status=incorrect] .exercise-status{color:var(--orange-text)}
@media(max-width:580px){
  .practice-heading{flex-direction:column;gap:10px;margin-bottom:18px}
  .practice-heading .quiet-button{margin:0}
  .practice-overview{padding:16px;margin-bottom:26px}
  .practice-overview-labels{font-size:11px}
  .exercise-groups{gap:30px}
  .exercise-group-heading{gap:10px;flex-wrap:wrap}
  .exercise-group-heading .section-code{width:36px;height:36px;font-size:17px}
  .exercise-group-heading h2{font-size:16px}
  .exercise-group-count{font-size:10px}
  .exercise-card .practice-top,.exercise-card .practice-bottom{padding:12px 16px}
  .exercise-card .practice-body{padding:18px 16px}
  .exercise-card .practice-body h3{font-size:16px}
  .exercise-status{font-size:10px}
}

/* Learner account and server-backed course progress. */
.telegram-entry{text-align:center}
.telegram-entry h1{font-size:36px;margin-top:18px}
.telegram-entry>p{font-size:13px;line-height:1.85;color:#8b7b96;margin:16px 0 24px}
.telegram-entry-mark{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:#eee7f8;color:#7461bf;margin:0 auto 18px}
.telegram-entry-mark>svg{width:34px;height:38px}
.demo-badge{display:inline-flex;align-items:center;font-size:10px;font-weight:550;white-space:nowrap;color:#a06b20;background:#fff1d6;padding:5px 8px;border-radius:5px}
[data-theme=dark] .telegram-entry>p{color:var(--muted)}
[data-theme=dark] .telegram-entry-mark{background:var(--tint);color:var(--tint-text)}
[data-theme=dark] .demo-badge{background:var(--orange);color:var(--orange-text)}
.learner-nav{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:13px 5%;border-bottom:1px solid var(--line);background:#faf9f6;font-size:12px;color:#877496}
.learner-nav-links,.learner-account{display:flex;align-items:center;gap:20px;min-width:0}
.learner-nav a[aria-current=page]{color:#6d56a0;font-weight:650}
.learner-nav a:hover,.learner-account button:hover{color:var(--purple)}
.learner-account{gap:12px}
.account-name{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#4c4358}
.account-details{display:grid;gap:4px;text-align:right;min-width:0}
.account-phone{font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums;color:#78688a}
.learner-account button{font-size:11px;padding:3px 0;color:#9b88a5;white-space:nowrap}
.auth-card{max-width:440px;margin:18px auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px}
.auth-card .topic-name{line-height:1.8}
.auth-card form{margin-top:24px}
.phone-telegram-actions{margin-top:24px}
.form-field{display:grid;gap:8px;font-size:13px;font-weight:500;margin-bottom:20px}
.form-field input{width:100%;min-width:0;border:1px solid #e1d5e8;background:#fdfaff;color:#302c3b;border-radius:7px;padding:12px 14px;font-size:15px}
.form-field small{font-size:11px;line-height:1.6;font-weight:400;color:#8b7b96}
.auth-submit{width:100%;margin-top:8px}
.auth-switch{font-size:12px;line-height:1.8;color:#8b7b96;text-align:center;margin:22px 0 0}
.auth-switch a{font-weight:600;color:#6d56a0}
.auth-notice{font-size:12px;line-height:1.8;padding:12px;background:#eee7f8;border-radius:8px;color:#6d56a0}
.course-learning-panel{display:grid;justify-items:start;gap:16px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;margin-bottom:24px}
.course-learning-panel>p{margin:0;color:#8b7b96;font-size:13px;line-height:1.8}
.learning-badge{display:inline-flex;align-items:center;gap:5px;border-radius:6px;background:#eee7f8;color:#6d56a0;padding:5px 9px;font-size:11px;white-space:nowrap}
.learning-badge.is-complete{background:#edf3e7;color:#64844e}
.learning-progress{width:100%;font-size:12px;color:#8b7b96}
.learning-progress>div:first-child{display:flex;justify-content:space-between;gap:16px;margin-bottom:10px}
.learning-progress strong{color:#6d56a0;font-weight:600}
.learning-progress-track{height:5px;background:#ece5f1;border-radius:4px;overflow:hidden}
.learning-progress-track span{height:100%;display:block;background:var(--purple);border-radius:inherit}
.learning-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
.learning-stats>div{display:grid;gap:7px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:12px}
.learning-stats strong{font-size:28px;font-weight:550;color:#6d56a0}
.learning-stats span{font-size:12px;color:#8b7b96;line-height:1.6}
.learning-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.learning-cards{display:grid;gap:16px}
.learning-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px}
.learning-card-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
.learning-card h2{margin:0;font-size:20px;font-weight:550}
.learning-card>p{font-size:13px;line-height:1.8;color:#8b7b96;margin:12px 0 22px}
.learning-card-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px}
.saved-progress-note{font-size:12px;color:#8b7b96}
[data-theme=dark] .learner-nav{background:#1a1820;color:var(--muted)}
[data-theme=dark] .learner-nav a[aria-current=page],[data-theme=dark] .auth-switch a,[data-theme=dark] .learning-progress strong,[data-theme=dark] .learning-stats strong{color:var(--tint-text)}
[data-theme=dark] .account-name{color:#ebe7f1}
[data-theme=dark] .account-phone{color:var(--muted)}
[data-theme=dark] .auth-card,[data-theme=dark] .course-learning-panel,[data-theme=dark] .learning-stats>div,[data-theme=dark] .learning-card{background:var(--surface)}
[data-theme=dark] .form-field input{background:var(--surface-2);border-color:var(--tint-line);color:#ebe7f1}
[data-theme=dark] .auth-notice,[data-theme=dark] .learning-badge{background:var(--tint);color:var(--tint-text)}
[data-theme=dark] .learning-badge.is-complete{background:var(--green);color:var(--green-text)}
[data-theme=dark] .form-field small,[data-theme=dark] .auth-switch,[data-theme=dark] .course-learning-panel>p,[data-theme=dark] .learning-progress,[data-theme=dark] .learning-stats span,[data-theme=dark] .learning-card>p,[data-theme=dark] .saved-progress-note{color:var(--muted)}
[data-theme=dark] .learning-progress-track{background:var(--surface-2)}
@media(max-width:580px){
  .learner-nav{padding:12px 18px;gap:12px;font-size:11px;flex-wrap:wrap}
  .learner-nav-links{gap:16px}
  .learner-account{gap:10px;margin-left:auto}
  .account-name{max-width:180px}
  .account-phone{font-size:10px}
  .auth-card{padding:24px 20px;margin-top:0}
  .learning-stats{gap:8px}
  .learning-stats>div{padding:14px 10px}
  .learning-stats strong{font-size:24px}
  .learning-stats span{font-size:10px}
  .learning-card,.course-learning-panel{padding:18px}
  .learning-card-heading{flex-wrap:wrap}
  .learning-card h2{font-size:18px}
}

.course-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto}
.course-card-unavailable{cursor:not-allowed;background:#eeece8;border-style:dashed}
.course-card-unavailable .course-cover{filter:saturate(.25);opacity:.6;box-shadow:none}
.course-card-unavailable .course-body strong{color:#736d78}
.course-lock{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#e1ded9;color:#736d78}
[data-theme=dark] .course-card-unavailable{background:#1b1920}
[data-theme=dark] .course-card-unavailable .course-body strong{color:#a69db3!important}
[data-theme=dark] .course-lock{background:var(--surface-2);color:var(--muted)}
.course-card-unavailable:hover,[data-theme=dark] .course-card-unavailable:hover{border-color:var(--line)}
.course-cover{display:block;width:80px;height:auto;aspect-ratio:20/27;object-fit:contain;border-radius:3px;box-shadow:0 3px 10px #0002}
@media(max-width:580px){.course-cover{width:64px}}
.course-card .course-body{gap:6px;overflow-wrap:anywhere}
.course-meta{font-size:12px;color:#8b7b96}
.course-progress-text{font-size:12px;color:#78688a}
.course-card .learning-badge{justify-self:start}
.learning-badge.is-not-started,.learning-badge.is-unavailable{background:#eeece9;color:#797182}
.unit-progress{white-space:normal;line-height:1.5;max-width:190px}
[data-theme=dark] .course-meta{color:var(--muted)}
[data-theme=dark] .course-progress-text{color:var(--tint-text)}
[data-theme=dark] .learning-badge.is-not-started,[data-theme=dark] .learning-badge.is-unavailable{background:var(--surface-2);color:var(--muted)}
@media(max-width:580px){.course-card{gap:10px;padding:18px 16px}.course-mark{width:36px;height:36px}.course-mark>svg{width:25px;height:28px}.course-meta,.course-progress-text{font-size:11px}.unit-progress{max-width:125px;font-size:10px}}

/* Keep a unit's status under its title so narrow cards never squeeze four items into one row. */
.unit-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr))}
.unit-card{display:grid;grid-template-columns:52px minmax(0,1fr) 16px;gap:8px 16px;min-width:0}
.unit-card .unit-number{grid-column:1;grid-row:1 / span 2}
.unit-card .course-body{grid-column:2;grid-row:1;overflow-wrap:anywhere}
.unit-card .unit-progress,.unit-card .soon-tag{grid-column:2;grid-row:2;justify-self:start;max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere}
.unit-card>svg{grid-column:3;grid-row:1 / span 2;justify-self:end}
@media(max-width:580px){.unit-card{grid-template-columns:44px minmax(0,1fr) 14px;gap:8px 12px;padding:16px}.unit-card .unit-number{width:44px;height:48px}.unit-card .course-body strong{font-size:15px}.unit-card .course-body small{font-size:12px}.unit-card>svg{width:14px}}

/* Approved Schola identity: vector artwork stays crisp at every screen density. */
.brand{flex-shrink:0;gap:0;min-height:36px}
.brand-logo{display:block;width:139px;height:auto;aspect-ratio:1237/330}
.schola-mark{display:block;flex-shrink:0;width:31px;height:36px;background:currentColor;-webkit-mask:url('assets/branding/schola-mark.svg') center/contain no-repeat;mask:url('assets/branding/schola-mark.svg') center/contain no-repeat}
[data-theme=dark] .brand-logo{filter:brightness(0) invert(1)}
@media(max-width:580px){.brand-logo{width:112px}.schola-mark{width:25px;height:29px}}