/* گره — the visual world of this desk.

   THESIS: a licensing course is not a list of 77 lessons, it is one interlaced pattern that
   closes only when every knot is tied. Girih strapwork is built exactly that way. The band on
   every screen IS the course, and it refuses the arrangement this category always ships: a
   cream page, a serif headline, and a progress bar borrowed from a fitness app.
   OWN-WORLD: deep cobalt ground, turquoise strapwork, brick for the one thing you may act on,
   on unbleached paper. Flat colour only — depth comes from one colour overlapping another and
   from nothing else. No shadow, no gradient, no glass, anywhere.
   STORY: she sees the whole pattern unset, understands the size of the work, and asks for a code.
   FIRST VIEWPORT: the cobalt field holds the full 77-knot panel at the top; the name sits inside
   it; the plain facts of the course sit under it; the invite form is the only brick on the page.
   FORM: girih strapwork, candidate 3 of the grounded list, seed d5a045ba.
   FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review,
   the verdict, DESIGN.md, and every shipping raster carrying its provenance. */
@font-face{font-family:Vazirmatn;src:url('/static/fonts/Vazirmatn-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url('/static/fonts/Vazirmatn-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Vazirmatn;src:url('/static/fonts/Vazirmatn-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Vazirmatn;src:url('/static/fonts/Vazirmatn-800.woff2') format('woff2');font-weight:800;font-display:swap}
:root{
/* three colours and a ground, held everywhere. */
--deep:#0d2f4f;--deep-2:#113c63;--deep-3:#17507f;
--turq:#1f8a8c;--turq-soft:#dbeceb;--turq-line:#a9cfcd;
--brick:#b4472a;--brick-ink:#933a22;--brick-soft:#f6e3dc;--brick-line:#e2b8a8;
--paper:#f4efe4;--surface:#fbf8f1;--surface-2:#ece5d6;--sunk:#e2d9c7;
--ink:#14202b;--ink-2:#46596b;--ink-3:#778693;
--line:#d9d0bd;--line-soft:#e7dfcf;
--accent:var(--brick);--accent-ink:var(--brick-ink);--accent-soft:var(--brick-soft);--accent-line:var(--brick-line);
--good:#1f8a8c;--bad:#b4472a;
--t-xs:.75rem;--t-sm:.8125rem;--t-md:.875rem;--t-base:1rem;--t-lg:1.125rem;--t-xl:1.3125rem;--t-2xl:1.625rem;--t-3xl:2.125rem;
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;
--r-sm:3px;--r-md:4px;--r-lg:5px;--r-xl:6px;
/* depth by overlap of flat colour; a shadow token would be a way back in. */
--shadow:none;
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:var(--paper);color:var(--ink);font:var(--t-md)/1.8 Vazirmatn,Tahoma,sans-serif;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
button,a,input,summary{touch-action:manipulation}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:700;line-height:1.55}
h1{font-size:var(--t-2xl);letter-spacing:-.01em}
h2{font-size:var(--t-lg)}
h3{font-size:var(--t-base)}
p{margin:0 0 var(--s4)}
ul,ol{margin:0;padding-inline-start:1.25em}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.muted{color:var(--ink-3)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.skip{position:fixed;top:-80px;right:20px;background:var(--ink);color:#fff;padding:var(--s3) var(--s4);border-radius:var(--r-sm);z-index:60}
.skip:focus{top:10px}

/* buttons */
button{cursor:pointer;border:1px solid transparent;border-radius:var(--r-md);padding:11px 20px;background:var(--ink);color:#fff;min-height:44px;font-weight:600;transition:background .15s,border-color .15s,transform .1s}
button:hover:not(:disabled){background:#3b342c}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{cursor:not-allowed;opacity:.45}
.secondary,.quiet{background:var(--surface);border-color:var(--line);color:var(--ink-2)}
.secondary:hover:not(:disabled),.quiet:hover:not(:disabled){background:var(--surface-2);border-color:#d8cfbd}
.quiet{font-weight:500}

/* shell */
.desk{display:grid;grid-template-columns:270px minmax(0,1fr) 262px;gap:var(--s5);max-width:1640px;padding:var(--s5) var(--s6);margin:auto;align-items:start}
.course-sidebar,.study-progress{position:sticky;top:var(--s5);max-height:calc(100dvh - var(--s7));overflow:auto;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface-2);padding:var(--s5) var(--s4);scrollbar-width:thin}
.workspace{min-width:0}
main{min-height:70vh;outline:none}
footer{padding:var(--s6) var(--s1) var(--s5);color:var(--ink-3);font-size:var(--t-xs)}

/* brand + nav */
.brand{display:flex;gap:var(--s3);align-items:center;font-size:var(--t-lg);font-weight:800}
.brandmark{display:grid;place-items:center;background:var(--ink);color:#fff;border-radius:13px;width:42px;height:42px;flex:none}
.brand small{display:block;color:var(--ink-3);font-size:var(--t-xs);font-weight:400;letter-spacing:.01em}
.nav-label,.section-label{font-size:var(--t-xs);color:var(--ink-3);margin:var(--s6) 0 var(--s2);letter-spacing:.04em}
.section-label{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:var(--s5);margin-top:var(--s5)}
.section-label span{color:var(--accent);font-weight:700}
nav{display:grid;gap:2px}
nav a{padding:10px 13px;border-radius:var(--r-sm);font-size:var(--t-md);min-height:44px;display:flex;align-items:center}
nav a.selected{background:var(--ink);color:#fff}
nav a:hover:not(.selected){background:var(--sunk)}

/* course tree */
.tree-module{font-size:var(--t-xs);color:var(--ink-3);margin:var(--s4) 0 var(--s2);padding-top:var(--s2)}
.course-item{display:block;border-radius:var(--r-md);margin:var(--s1) 0}
.course-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--s2);padding:10px 12px;border-radius:var(--r-md);font-size:var(--t-md);font-weight:600;min-height:44px}
.course-item summary::-webkit-details-marker{display:none}
.course-item summary:hover{background:var(--sunk)}
.course-item summary:before{content:'';width:0;height:0;border:5px solid transparent;border-left-color:var(--ink-3);flex:none;transition:transform .15s}
.course-item[open] summary:before{transform:rotate(-90deg) translateX(-2px)}
.ch-name{flex:1;min-width:0}
.ch-count{font-size:var(--t-xs);font-weight:500;color:var(--ink-3);background:var(--sunk);border-radius:20px;padding:1px 8px;flex:none}
.course-item[open] .ch-count{background:var(--accent-soft);color:var(--accent-ink)}
.course-item .units{padding:var(--s1) 0 var(--s3);display:grid;gap:2px}
.course-item button{width:100%;text-align:right;font-size:var(--t-sm);font-weight:500;line-height:1.6;background:transparent;color:var(--ink-2);border:0;border-radius:var(--r-sm);padding:9px 12px;position:relative;padding-inline-start:26px}
.course-item button:hover:not(:disabled){background:var(--surface);color:var(--ink)}
.course-item button:before{content:'';position:absolute;inset-inline-start:11px;top:16px;width:6px;height:6px;border-radius:50%;background:var(--line);}
.course-item button.done:before{background:var(--good)}
.course-item button.doing:before{background:var(--accent)}
.course-item button.active-lesson{background:var(--surface);color:var(--ink);font-weight:700;background:var(--turq-soft)}
.unit-state{display:block;font-size:var(--t-xs);font-weight:400;color:var(--ink-3)}
.aside-bottom{display:flex;gap:var(--s3);justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:var(--s5);padding-top:var(--s4);font-size:var(--t-xs);color:var(--ink-3);line-height:1.7}
.aside-bottom button{min-height:36px;padding:6px 12px;font-size:var(--t-xs)}

/* workspace header */
.desk-header{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);color:var(--ink-3);font-size:var(--t-xs);margin:0 var(--s1) var(--s5)}
.language{border:1px solid var(--line);border-radius:20px;padding:3px 12px;white-space:nowrap}
.language span{padding:0 6px}
#draft-mark{border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent-ink);border-radius:20px;padding:3px 12px;font-size:var(--t-xs);margin-inline-end:var(--s2);cursor:help}

/* page headings */
.eyebrow{font-size:var(--t-xs);color:var(--accent);font-weight:600;letter-spacing:.03em;margin-bottom:var(--s2)}
.now-dot{display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:50%;margin-inline-end:7px}
.topline{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s5)}
.topline h1{margin-bottom:var(--s2)}
.chip,.pill{font-size:var(--t-xs);border-radius:20px;padding:3px 10px;background:var(--sunk);color:var(--ink-3);white-space:nowrap}
.topline .chip{display:none}
.section-title{display:flex;justify-content:space-between;align-items:center;margin:var(--s6) 0 var(--s4)}
.card>p:has(+progress){margin-bottom:0;font-size:var(--t-md)}
.card>progress{margin:0 0 var(--s4)}

/* hero */
.hero{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s6);margin-bottom:var(--s4);box-shadow:none}
.hero h1{font-size:var(--t-3xl);line-height:1.4;margin-bottom:var(--s3)}
.hero p{color:var(--ink-2);max-width:62ch;font-size:var(--t-base)}
.hero-actions{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;border-top:1px solid var(--line-soft);padding-top:var(--s4);margin-top:var(--s5);font-size:var(--t-md)}
.next-strip{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:14px 18px;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-md);margin:var(--s2) 0;font-size:var(--t-md);transition:border-color .15s,background .15s}
.next-strip:hover{background:var(--surface);border-color:var(--accent-line)}
.next-strip span{color:var(--ink-3);font-size:var(--t-sm)}

/* cards */
.card,.stat{padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.card>p{color:var(--ink-2)}
.card>h2{margin-bottom:var(--s3)}
.divider{border-top:1px solid var(--line-soft);margin:var(--s5) 0}
.inactive{background:var(--surface-2)}
.row{display:flex;justify-content:space-between;gap:var(--s4);align-items:center;flex-wrap:wrap;padding:var(--s2) 0;border-top:1px solid var(--line-soft)}
.chapter-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);margin:var(--s5) 0 var(--s2);font-weight:700;font-size:var(--t-md);color:var(--accent-ink)}
.chapter-head span{font-size:var(--t-xs);font-weight:400;color:var(--ink-3)}
.card>.chapter-head:first-of-type{margin-top:var(--s3)}
main>.row{border-top:0;padding:0;margin-bottom:var(--s4)}
.modules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.module-top{display:flex;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.module-no{color:var(--accent);font-weight:700;font-size:var(--t-lg)}
.official{font-size:var(--t-xs);display:block;color:var(--ink-3);margin-top:var(--s1)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin:var(--s5) 0}
.stat{font-size:var(--t-sm);color:var(--ink-3)}
.stat strong{font-size:var(--t-2xl);display:block;color:var(--ink)}
.empty{border:1px dashed #d8ceba;background:var(--surface-2);border-radius:var(--r-md);padding:var(--s6) var(--s5);text-align:center;color:var(--ink-3)}
.empty h3{color:var(--ink-2);margin-bottom:var(--s2)}
.empty p{margin:0}
.callout{padding:var(--s4) var(--s5);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-md);margin:var(--s4) 0;color:#6d4a20}
.callout p:last-child{margin-bottom:0}
.callout button{margin-top:var(--s3)}

/* lesson */
.lesson-head{margin-bottom:var(--s5)}
.lesson-head h1{font-size:var(--t-2xl);max-width:26ch;margin-bottom:var(--s3)}
.source-note{font-size:var(--t-xs);color:var(--ink-3);border:1px solid var(--line);border-radius:20px;padding:3px 12px;display:inline-block}
.objectives{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);margin-bottom:var(--s5)}
.objectives h2{font-size:var(--t-md);color:var(--ink-3);font-weight:600;margin-bottom:var(--s3)}
.objectives ol{display:grid;gap:var(--s2);font-size:var(--t-md);color:var(--ink-2);padding-inline-start:1.4em;list-style-type:persian}
.objectives li::marker{color:var(--accent);font-weight:700}
.tabs{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin:var(--s5) 0}
.tabs a{font-size:var(--t-md);text-decoration:underline;text-underline-offset:4px;color:var(--ink-3);padding:0 var(--s2)}
.lesson-tabs{margin:0;gap:var(--s1);border-bottom:1px solid var(--line);padding-bottom:0}
.lesson-tabs button{border:0;border-radius:var(--r-sm) var(--r-sm) 0 0;background:transparent;color:var(--ink-3);font-weight:600;padding:10px 16px;margin-bottom:-1px;border-bottom:2px solid transparent}
.lesson-tabs button:hover{background:var(--sunk);color:var(--ink-2)}
.lesson-tabs button[aria-pressed=true]{background:transparent;color:var(--accent-ink);border-bottom-color:var(--accent)}
.lesson-panel{min-height:300px;border-radius:0 0 var(--r-lg) var(--r-lg);border-top:0;padding:var(--s6) var(--s5)}
.prose{max-width:64ch;font-size:var(--t-base);line-height:1.95;color:#2c2925}
.prose p{margin:0 0 1.15em}
.block-label{font-size:var(--t-xs);color:var(--ink-3);font-weight:600;letter-spacing:.04em;margin-bottom:var(--s2)}
.example{max-width:64ch;margin:var(--s6) 0;padding:var(--s5);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-lg)}
.example .block-label{color:var(--accent-ink)}
.example p{margin:0;font-size:var(--t-md);line-height:1.9;color:#5e421f}
.keypoints{max-width:64ch;margin:var(--s6) 0;padding:var(--s5);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg)}
.keypoints ul{list-style:none;padding:0;display:grid;gap:var(--s3);font-size:var(--t-md);line-height:1.85}
.keypoints li{display:flex;gap:var(--s3)}
.keypoints li:before{content:'';flex:none;width:7px;height:7px;border-radius:2px;background:var(--accent);margin-top:11px;transform:rotate(45deg)}
.terms{max-width:64ch;margin:var(--s6) 0 0;display:grid;gap:0}
.terms>div{padding:var(--s4) 0;border-top:1px solid var(--line-soft)}
.terms dt{font-weight:700;font-size:var(--t-md);color:var(--accent-ink);margin-bottom:var(--s1)}
.terms dd{margin:0;font-size:var(--t-md);color:var(--ink-2);line-height:1.85}
bdi{unicode-bidi:isolate}
.lesson-text{max-width:64ch}
.flashdeck{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s4)}
.flashcard{min-height:170px;display:flex;flex-direction:column;justify-content:space-between;gap:var(--s4);text-align:center;padding:var(--s5) var(--s4);background:var(--surface-2);border-color:var(--line)}
.flashcard>div{flex:1;display:grid;place-items:center;font-size:var(--t-md);line-height:1.8}
.flashcard button{width:100%;min-height:40px;padding:8px}
audio,video{width:100%;max-height:480px;margin:var(--s4) 0}

/* practice */
.practice-zone{background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s6) var(--s5);margin-top:var(--s6)}
.practice-zone p{color:var(--ink-2);max-width:60ch}
.practice-zone .empty{background:var(--surface);border-color:#d8ceba}
.practice-top{display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline;margin-bottom:var(--s4)}
.practice-top span{font-size:var(--t-sm);color:var(--ink-3)}
.practice-zone .tabs{margin-bottom:0}

/* progress rail */
.study-progress h2{font-size:var(--t-md);color:var(--ink-3);font-weight:600}
.study-progress h3{font-size:var(--t-sm);color:var(--ink-3);margin-bottom:var(--s3)}
.progress-value{font-size:var(--t-3xl);line-height:1.3;font-weight:800;margin-top:var(--s2)}
.progress-value small{font-size:var(--t-sm);color:var(--ink-3);font-weight:400}
.progress-caption{font-size:var(--t-xs);color:var(--ink-3);line-height:1.7}
.progress-divider{border-top:1px solid var(--line);margin:var(--s5) 0}
.progress-row{display:flex;justify-content:space-between;gap:var(--s3);font-size:var(--t-sm);margin:var(--s3) 0;color:var(--ink-2)}
.progress-row strong{color:var(--ink);font-weight:600;text-align:left}
.progress-note{border:1px solid var(--accent-line);border-radius:var(--r-md);background:var(--accent-soft);padding:var(--s3) var(--s4);margin:var(--s4) 0;font-size:var(--t-xs);line-height:1.8;color:#6d4a20}
.study-progress a{font-size:var(--t-sm);text-decoration:underline;text-underline-offset:4px;display:inline-block;min-height:44px;line-height:44px}
progress{width:100%;height:8px;accent-color:var(--accent);margin:var(--s2) 0}

/* auth */
.auth{max-width:440px;margin:var(--s5) auto}
.auth label{display:block;margin-top:var(--s4);font-size:var(--t-sm);color:var(--ink-2)}
.auth input{display:block;width:100%;margin-top:var(--s1);padding:12px;border:1px solid #dbd2c1;border-radius:var(--r-sm);background:var(--paper);min-height:44px}
.auth input:focus{background:#fff}
.auth button{margin-top:var(--s4);width:100%}
.auth .quiet{margin-top:var(--s3)}
.error{color:var(--bad);font-size:var(--t-sm);min-height:22px}

/* exam */
.exam-head{margin-bottom:var(--s5)}
.exam-head h1{margin-bottom:var(--s2)}
.exam-meta{display:flex;gap:var(--s4);flex-wrap:wrap;font-size:var(--t-sm);color:var(--ink-3);border-top:1px solid var(--line);padding-top:var(--s3);margin-top:var(--s4)}
.question{margin:0 0 var(--s4);padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);min-width:0}
.question legend{font-weight:700;font-size:var(--t-base);line-height:1.8;padding:0;max-width:60ch}
.q-no{display:block;font-size:var(--t-xs);color:var(--accent);font-weight:600;margin-bottom:var(--s2)}
.option{display:flex;gap:var(--s3);align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);margin:var(--s2) 0;cursor:pointer;min-height:44px;background:var(--paper);transition:border-color .12s,background .12s}
.option:hover{border-color:var(--accent-line);background:var(--surface)}
.option input{margin:0;accent-color:var(--accent);width:18px;height:18px;flex:none}
.option span{font-size:var(--t-md);line-height:1.75}
.option-key{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--sunk);color:var(--ink-3);font-size:var(--t-xs);font-weight:700}
.option:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.option:has(input:checked) .option-key{background:var(--accent);color:#fff}
.exam-foot{position:sticky;bottom:0;display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;background:var(--paper);border-top:1px solid var(--line);padding:var(--s4) 0;margin-top:var(--s5)}
.exam-foot span{font-size:var(--t-sm);color:var(--ink-3)}
#exam-clock{font-weight:700;color:var(--accent-ink);font-variant-numeric:tabular-nums}
#exam-clock.over{color:var(--ink-3);font-weight:400}
.exam-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin:var(--s4) 0 var(--s5)}
.exam-facts div{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4);text-align:center}
.exam-facts strong{display:block;font-size:var(--t-2xl);line-height:1.3}
.exam-facts span{font-size:var(--t-xs);color:var(--ink-3)}
fieldset{margin:0;border:0}
.success{color:var(--good);font-weight:600}
.wrong{color:var(--bad);font-weight:600}
.review{margin:var(--s3) 0}
.review h3{line-height:1.8;margin-bottom:var(--s3);max-width:60ch}
details.review>summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
table{width:100%;border-collapse:collapse;font-size:var(--t-md)}
th,td{text-align:right;padding:var(--s3);border-bottom:1px solid var(--line)}
th{color:var(--ink-3);font-weight:600;font-size:var(--t-sm)}

#notice{position:fixed;bottom:var(--s5);left:var(--s5);max-width:min(420px,calc(100vw - 48px));background:var(--ink);color:#fff;border-radius:var(--r-md);z-index:50;font-size:var(--t-md);box-shadow:none}
#notice:not(:empty){padding:14px 20px}
.mobile-head{display:none}
button,summary{overflow-wrap:anywhere}

@media(max-width:1250px){
.desk{grid-template-columns:240px minmax(0,1fr);padding:var(--s5) var(--s4);gap:var(--s4)}
.study-progress{grid-column:2;position:static;max-height:none}
.course-sidebar{grid-row:1 / span 2}
.modules{grid-template-columns:1fr}
}
@media(max-width:820px){
.mobile-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:30}
.mobile-head .brand{font-size:var(--t-base);gap:var(--s2)}
.mobile-head .brand small{font-size:var(--t-xs)}
.mobile-head button{font-size:var(--t-xs);padding:8px 10px;min-height:40px}
.mobile-head>div{display:flex;gap:var(--s1)}
.desk{display:flex;flex-direction:column;padding:var(--s4) var(--s3);gap:var(--s4)}
.workspace{width:100%;order:1}
.course-sidebar,.study-progress{display:none;position:static;width:100%;max-height:none;order:0}
.course-sidebar.mobile-open,.study-progress.mobile-open{display:block}
.course-sidebar .brand,.chip{display:none}
.nav-label{margin-top:0}
.desk-header{margin-bottom:var(--s3)}
.hero{padding:var(--s5);border-radius:var(--r-lg)}
.hero h1{font-size:var(--t-2xl)}
.card,.practice-zone,.objectives,.keypoints,.example,.question{padding:var(--s4);border-radius:var(--r-lg)}
.lesson-panel{padding:var(--s5) var(--s4)}
.prose{font-size:var(--t-md);line-height:1.9}
.lesson-head h1{font-size:var(--t-xl)}
.stats{gap:var(--s2)}
.stat{padding:var(--s3);font-size:var(--t-xs)}
.stat strong{font-size:var(--t-xl)}
.next-strip{align-items:flex-start;flex-direction:column;gap:var(--s1)}
.lesson-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.lesson-tabs button{flex:none;padding:10px 12px;font-size:var(--t-sm)}
.practice-top{align-items:flex-start;flex-direction:column;gap:var(--s1)}
.hero-actions,.tabs{gap:var(--s2)}
.exam-foot button{flex:1}
#notice{left:var(--s3);right:var(--s3);bottom:var(--s3);max-width:none}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* the sign-in door: no desk furniture behind it */
body.locked .desk{display:block;max-width:560px}
body.locked .desk-header{display:none}
.gate{text-align:center;padding:var(--s7) var(--s4) var(--s5)}
.gate-mark{display:grid;place-items:center;width:56px;height:56px;margin:0 auto var(--s4);border-radius:16px;background:var(--ink);color:#fff;font-size:var(--t-xl);font-weight:800}
.gate h1{font-size:var(--t-2xl);margin-bottom:var(--s3)}
.gate-line{color:var(--ink-2);font-size:var(--t-base);max-width:44ch;margin:0 auto var(--s3)}
.gate-note{max-width:44ch;margin:0 auto;font-size:var(--t-md)}
body.locked .auth{margin:0 auto}

/* review queue: one item at a time, and the English-terms drill */
.review-item{margin-top:var(--s4)}
.review-prompt{font-size:var(--t-xl);line-height:1.75;max-width:48ch;margin:var(--s3) 0}
.review-answer{border-top:1px solid var(--line);margin-top:var(--s4);padding-top:var(--s4);font-size:var(--t-base);line-height:1.9;color:var(--ink-2);max-width:56ch}
.verdicts{display:flex;gap:var(--s2);flex-wrap:wrap;border-top:1px solid var(--line-soft);margin-top:var(--s5);padding-top:var(--s4)}
.verdicts button{min-width:9rem}
.drill-prompt{font-size:var(--t-xl);line-height:1.75;max-width:48ch;margin:var(--s3) 0 var(--s5)}
.drill-options{display:grid;gap:var(--s2);max-width:56ch}
.drill-options .option{width:100%;text-align:right;justify-content:flex-start;background:var(--paper);color:var(--ink);font-weight:500;line-height:1.75}
.drill-options .option:disabled{opacity:1;cursor:default}
.drill-options .option.is-right{border-color:var(--good);background:#eef4f0;color:var(--good)}
.drill-options .option.is-wrong{border-color:var(--bad);background:#f8eeeb;color:var(--bad)}
.drill-after:not(:empty){border-top:1px solid var(--line-soft);margin-top:var(--s5);padding-top:var(--s4);max-width:56ch}
.drill-after p{font-size:var(--t-md);line-height:1.85}
.exam-date{margin:var(--s4) 0}
.exam-date p{margin-bottom:0}
.exam-date .tabs{margin-bottom:0}
.exam-date input[type=date]{border:1px solid #dbd2c1;border-radius:var(--r-sm);background:var(--paper);padding:10px 12px;min-height:44px;direction:ltr}
.progress-row.stage{align-items:flex-start}
.progress-row.stage small{display:block;color:var(--ink-3);font-size:var(--t-xs);line-height:1.7;font-weight:400}
@media(max-width:820px){
.review-prompt,.drill-prompt{font-size:var(--t-lg)}
.verdicts button{flex:1;min-width:0}
}

/* ── the strapwork panel ───────────────────────────────────────────────────── */
.girih{display:block;width:100%;height:auto;max-height:52vh}
.g-strap{fill:none;stroke:var(--turq);stroke-width:2.5;opacity:.45;stroke-linejoin:round;stroke-linecap:round}
.g-knot{fill:var(--deep-2);stroke:var(--turq);stroke-width:1.6;opacity:.75}
.g-knot.is-set{fill:var(--turq);stroke:var(--turq);opacity:1}
.g-knot.is-here{fill:var(--brick);stroke:var(--brick);opacity:1}
.desk-panel .g-strap{stroke:var(--turq);opacity:.3}
.desk-panel .g-knot{fill:var(--surface);stroke:var(--turq);opacity:.55}

/* ── the door ──────────────────────────────────────────────────────────────── */
body.locked .desk{display:block;max-width:none;padding:0}
body.locked main{min-height:0}
.door{margin:0 0 var(--s6)}
.door-field{position:relative;background:var(--deep);padding:var(--s7) var(--s5) var(--s6);overflow:hidden}
.door-field .girih{margin:0 auto;max-width:900px}
.door-name{max-width:56ch;margin:var(--s6) auto 0;text-align:center;color:var(--paper)}
.door-name h1{font-size:clamp(1.9rem,5.5vw,3.2rem);letter-spacing:-.02em;line-height:1.35;color:#fff}
.door-name h1 bdi{color:var(--turq-line)}
.door-sub{margin:var(--s3) 0 0;font-size:var(--t-lg);color:#bcd3e2}
.door-facts{max-width:62ch;margin:0 auto;padding:var(--s6) var(--s5) 0}
.door-lead{font-size:var(--t-lg);line-height:1.9;color:var(--ink);margin-bottom:var(--s5)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:0 0 var(--s5)}
.facts>div{background:var(--surface);padding:var(--s4) var(--s3);text-align:center}
.facts dt{font-size:var(--t-xs);color:var(--ink-3);margin-bottom:var(--s1)}
.facts dd{margin:0;font-size:var(--t-xl);font-weight:700;color:var(--deep);font-variant-numeric:tabular-nums}
.door-note{font-size:var(--t-md);color:var(--ink-2);margin:0}
body.locked .auth{max-width:62ch;margin:0 auto var(--s7);padding:var(--s6) var(--s5)}
@media(max-width:720px){
 .door-field{padding:var(--s5) var(--s4) var(--s5)}
 .facts{grid-template-columns:repeat(2,1fr)}
 .door-facts,body.locked .auth{padding-inline:var(--s4)}
}

/* ── browser surfaces: the parts nobody draws still belong to the world ────── */
::selection{background:var(--turq);color:#fff}
input,textarea{caret-color:var(--brick)}
*{scrollbar-width:thin;scrollbar-color:var(--turq-line) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--turq-line)}
::-webkit-scrollbar-track{background:transparent}
a{text-underline-offset:4px}
.facts dd,.progress-value,progress,td,th{font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
.desk-panel{border:1px solid var(--line);background:var(--surface);padding:var(--s4);margin-bottom:var(--s5)}
.desk-panel .girih{max-height:none}
.panel-key{display:flex;align-items:center;gap:var(--s2);margin:var(--s3) 0 0;font-size:var(--t-xs);color:var(--ink-3);flex-wrap:wrap}
.panel-key .k{width:9px;height:9px;border:1.25px solid var(--turq);transform:rotate(45deg);flex:none;margin-inline-start:var(--s2)}
.panel-key .k.set{background:var(--turq)}
.panel-key .k.here{background:var(--brick);border-color:var(--brick)}