@font-face{font-family:display;src:url(../media/fraunces_latin-s.p.31ly29hbkuj68.woff2)format("woff2");font-display:swap;font-weight:600}@font-face{font-family:display Fallback;src:local(Arial);ascent-override:89.28%;descent-override:23.28%;line-gap-override:0.0%;size-adjust:109.54%}._5nZONW_className{font-family:display,display Fallback,Georgia,serif;font-weight:600}._5nZONW_variable{--font-display:"display", "display Fallback", Georgia, serif}
@font-face{font-family:body;src:url(../media/source_serif_4_latin-s.p.2fkb5nt7yf_6p.woff2)format("woff2");font-display:swap;font-weight:400 600}@font-face{font-family:body Fallback;src:local(Arial);ascent-override:102.41%;descent-override:33.12%;line-gap-override:0.0%;size-adjust:101.16%}._4fS9na_className{font-family:body,body Fallback,Georgia,serif}._4fS9na_variable{--font-body:"body", "body Fallback", Georgia, serif}
@font-face{font-family:ui;src:url(../media/inter_latin-s.p.0rpdhg_4ubdtf.woff2)format("woff2");font-display:swap;font-weight:400 600}@font-face{font-family:ui Fallback;src:local(Arial);ascent-override:89.79%;descent-override:22.36%;line-gap-override:0.0%;size-adjust:107.89%}.l7Qj2q_className{font-family:ui,ui Fallback,system-ui,sans-serif}.l7Qj2q_variable{--font-ui:"ui", "ui Fallback", system-ui, sans-serif}
:root{--green:#10312a;--green-soft:#e3ede8;--gold:#b08d46;--gold-light:#d4b36a;--gold-soft:#f3e9d2;--cream:#e9e2cf;--paper:#faf8f2;--surface:#fff;--ink:#1f2a26;--muted:#5e6a64;--line:#ddd6c4;--amber:#fff3cd;--amber-ink:#6b4e00;--red-soft:#f6e3dd;--red-ink:#7a3b28}*{box-sizing:border-box}html,body{margin:0}body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.55}a{color:var(--green)}:focus-visible{outline:2px solid var(--gold);outline-offset:2px}button{font:inherit}.wrap{max-width:880px;padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));margin:0 auto}.topbar{background:var(--green);color:var(--cream)}.topbar .wrap{font-family:var(--font-ui);justify-content:space-between;align-items:center;gap:16px;padding-block:12px;font-size:14px;display:flex}.topbar a{color:var(--cream);text-decoration:none}.brand{font-family:var(--font-display);font-size:20px;font-weight:600}.learner-chip{background:#e9e2cf26;border-radius:999px;padding:4px 12px}@media (max-width:640px){.learner-chip{padding:3px 10px;font-size:12px}.brand{font-size:18px}.topnav{gap:12px;margin-left:14px}}main.wrap{padding-block:32px 64px}.eyebrow{font-family:var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 4px;font-size:12px;font-weight:600}h1{font-family:var(--font-display);color:var(--green);text-wrap:balance;margin:0 0 8px;font-size:clamp(28px,4.5vw,38px);font-weight:600;line-height:1.15}h2{font-family:var(--font-display);color:var(--green);margin:32px 0 8px;font-size:24px;font-weight:600}h3{font-family:var(--font-ui);margin:20px 0 6px;font-size:15px;font-weight:600}p{max-width:68ch;margin:0 0 12px}.muted{color:var(--muted)}.ui{font-family:var(--font-ui)}.small{font-size:14px}.btn{font-family:var(--font-ui);border:1.5px solid var(--green);background:var(--green);color:var(--cream);cursor:pointer;border-radius:8px;padding:10px 18px;font-size:15px;font-weight:600;text-decoration:none;display:inline-block}.btn:disabled{opacity:.5;cursor:default}.btn--gold{background:var(--gold);border-color:var(--gold);color:var(--green)}.btn--outline{color:var(--green);background:0 0}.btn--small{padding:6px 12px;font-size:14px}.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 18px}.cards{gap:10px;margin:0;padding:0;list-style:none;display:grid}.skill-row{color:inherit;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;text-decoration:none;display:grid}.skill-row[aria-disabled=true]{opacity:.6}.code{font-family:var(--font-ui);border:1.5px solid var(--green);width:36px;height:36px;color:var(--green);border-radius:50%;place-items:center;font-size:13px;font-weight:600;display:grid}.status{font-family:var(--font-ui);white-space:nowrap;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600}.status--locked{color:var(--muted);background:#eeebe2}.status--available{background:var(--surface);border:1px solid var(--green);color:var(--green)}.status--in_progress{background:var(--green-soft);color:var(--green)}.status--mastered{background:var(--green);color:var(--cream)}.status--fragile{background:var(--amber);color:var(--amber-ink)}.code--mastered{background:var(--green);color:var(--cream)}.code--fragile{background:var(--amber);color:var(--amber-ink);border-color:var(--amber-ink)}.steps{font-family:var(--font-ui);flex-wrap:wrap;gap:8px;margin:16px 0 24px;padding:0;font-size:13px;list-style:none;display:flex}.steps li{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px}.steps li[aria-current=step]{background:var(--green);color:var(--cream);border-color:var(--green)}.steps a{color:inherit;text-decoration:none}.vocab{gap:6px;margin:0 0 12px;padding:0;list-style:none;display:grid}.vocab li{font-size:16px}.example{border-left:3px solid var(--gold);margin:16px 0;padding-left:16px}.diagram{border:1px solid var(--line);background:#fff;border-radius:12px;margin:20px 0 28px;padding:16px 16px 10px}.diagram figcaption{margin-top:8px}.example ol{margin:6px 0;padding-left:20px}.recap{background:var(--green-soft);border-radius:10px;padding:14px 18px;font-weight:600}.item{gap:12px;display:grid}.prompt{margin:0;font-size:20px}.answer-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}input.answer{font:inherit;border:1.5px solid var(--line);background:var(--surface);width:12ch;max-width:100%;color:var(--ink);border-radius:8px;padding:8px 12px;font-size:18px}.options-group{border:0;min-width:0;margin:0;padding:0}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.options{gap:8px;margin:0;padding:0;list-style:none;display:grid}.options label{border:1.5px solid var(--line);background:var(--surface);cursor:pointer;border-radius:8px;align-items:center;gap:10px;padding:10px 14px;display:flex}.options label:has(input:checked){border-color:var(--green);background:var(--green-soft)}.feedback{font-family:var(--font-ui);border-radius:8px;padding:10px 14px;font-size:15px}.feedback--good{background:var(--green-soft);color:var(--green)}.feedback--bad{background:var(--amber);color:var(--amber-ink)}.hint{background:var(--gold-soft);border-radius:8px;padding:10px 14px;font-size:16px}.progress-dots{flex-wrap:wrap;gap:6px;display:flex}.progress-dots span{background:var(--line);border-radius:50%;width:12px;height:12px}.progress-dots span.done{background:var(--green)}.progress-dots span.current{outline:2px solid var(--gold)}.unlock{background:var(--gold-soft);border:1.5px solid var(--gold);border-radius:10px;padding:16px 18px}.footer-note{border-top:1px solid var(--line);font-family:var(--font-ui);color:var(--muted);margin-top:48px;padding-top:16px;font-size:13px}@media (max-width:520px){body{font-size:16px}.skill-row{grid-template-columns:auto 1fr}.skill-row .status{grid-column:2;justify-self:start}}@media (prefers-reduced-motion:no-preference){.card{transition:border-color .15s}}.topnav{gap:18px;margin-left:28px;margin-right:auto;display:flex}.topnav a{color:var(--cream);opacity:.85;font-weight:600;text-decoration:none}.topnav a:hover{opacity:1}.alert{border-left:4px solid var(--gold);margin-bottom:14px}.table-wrap{-webkit-overflow-scrolling:touch;overflow-x:auto}.table{border-collapse:collapse;width:100%;margin:6px 0 20px;font-size:15px}.table th{text-align:left;font-family:var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding:6px 8px;font-size:12px;font-weight:600}.table td{border-bottom:1px solid var(--line);vertical-align:top;padding:8px}.code--small{width:30px;height:30px;margin-right:6px;font-size:12px}h3{font-family:var(--font-display);margin:18px 0 4px;font-size:20px}@media (max-width:640px){.table th:nth-child(4),.table td:nth-child(4){display:none}}.skill-cell{align-items:center;gap:8px;display:flex}.skill-cell .code{flex:none;margin:0}.narrow{max-width:640px}.form label{margin:10px 0 4px;display:block}.form .answer{margin-bottom:6px}.answer.wide{width:100%;max-width:360px}select.answer{padding-right:28px}.btn--danger{background:var(--red-ink);color:#fff;border-color:var(--red-ink)}
