:root{color-scheme:light;--ink:#1a1a18;--paper:#f5f4ef;--card:#fffefa;--muted:#62615a;--line:#e3e1d8;--orange:#fa6428;--orange-dark:#a53508;--dark:#171716;--dark-line:#3c3b36}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
h1,h2,p,ol{margin-top:0}button,a,input{font:inherit}
a{color:var(--orange-dark)}
:focus-visible{outline:3px solid #d24713;outline-offset:4px}
.skip{position:absolute;left:-1000px}.skip:focus{left:1rem;top:1rem;z-index:10;background:white;padding:1rem}
.top{background:var(--dark);color:white;border-bottom:3px solid var(--orange)}
.top-inner,.shell{width:min(1150px,calc(100% - 44px));margin:auto}
.top-inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none;font-size:1.1rem;font-weight:800;letter-spacing:.06em}
.brand small{display:block;color:#b9b7ac;font-size:.58rem;letter-spacing:.18em}
.brand-icon{height:40px;width:40px;display:grid;place-items:center;background:var(--orange);color:#18110b;border-radius:8px;font-size:1.6rem;line-height:1}
.shell{padding:28px 0}
.route{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:19px 23px;margin-bottom:22px}
.route-meta{display:flex;justify-content:space-between;align-items:center;gap:12px}
.eyebrow{color:var(--orange-dark);font-size:.69rem;font-weight:800;letter-spacing:.12em}
#total{font-size:.83rem;font-weight:750}
progress{width:100%;height:7px;border:0;border-radius:50px;overflow:hidden;appearance:none;background:#e7e3d8;margin:12px 0 13px;display:block}
progress::-webkit-progress-bar{background:#e7e3d8}progress::-webkit-progress-value{background:var(--orange)}
progress::-moz-progress-bar{background:var(--orange)}
.phases{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.phase{font-size:.78rem;line-height:1.3;display:flex;gap:7px;align-items:center;color:var(--muted);min-height:27px}
.phase b{display:grid;place-items:center;border:1px solid #b3b0a4;border-radius:50%;width:23px;height:23px;flex:none;font-size:.7rem}
.phase.current{color:var(--orange-dark);font-weight:750}.phase.current b{border-color:#d24713;background:#fff1e9}
.phase.done b{background:var(--dark);color:white;border-color:var(--dark)}
.count{margin:11px 0 0;color:var(--muted);font-size:.76rem}
.grid{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:22px;align-items:start}
.lesson,.chapters{border-radius:12px}
.lesson{min-height:470px;padding:clamp(23px,5vw,53px);background:var(--card);border:1px solid var(--line)}
.lesson h1{font-size:clamp(1.9rem,4.7vw,3.3rem);letter-spacing:-.055em;line-height:1.04;margin:9px 0 21px;max-width:620px}
.lesson h2{font-size:1.18rem;letter-spacing:-.025em;margin:24px 0 9px}
.story{max-width:65ch;color:#43433d}
.chapters{background:var(--dark);color:white;padding:22px 18px;position:sticky;top:18px}
.chapters .eyebrow{color:#ff9a6f}.chapters h2{margin:4px 0 12px;font-size:1.38rem}
.chapter{border:0;border-bottom:1px solid var(--dark-line);color:#e5e3da;background:transparent;display:flex;text-align:left;gap:9px;align-items:flex-start;padding:10px 9px;width:100%;font-size:.88rem;line-height:1.45;cursor:pointer}
.chapter:last-child{border-bottom:0}.chapter[aria-current="step"]{color:#ffc1a5;background:#33251d;border-radius:5px}.chapter:hover:not(:disabled){background:#332e27}
.chapter:disabled{opacity:.62;cursor:default}.chapter-num{width:1.7rem;flex:none;color:#ff9a6f;font-variant-numeric:tabular-nums}
.button{border:1px solid transparent;display:inline-flex;justify-content:center;align-items:center;text-decoration:none;border-radius:7px;padding:8px 15px;background:var(--orange);color:#1d100a;font-weight:750;cursor:pointer;line-height:1.4;font-size:.9rem}
.button.secondary{background:transparent;color:#f4f1e8;border-color:#77736a}
.button.outline{background:var(--card);color:var(--ink);border-color:#bdb9af}
.button:disabled{cursor:default;opacity:.62}
pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:.89rem;background:#f2efe6;border:1px solid #e5e0d3;padding:13px 15px;border-radius:7px;margin:7px 0 11px;user-select:text}
.steps{display:grid;gap:8px;margin:10px 0 17px}
.choice,.step{display:flex;align-items:flex-start;gap:11px;padding:9px 12px;border:1px solid var(--line);border-radius:7px;margin:6px 0;font-size:.91rem}
.choice:has(input:checked),.step:has(input:checked){border-color:#e77645;background:#fff6ef}
input[type=radio],input[type=checkbox]{accent-color:#a53508;flex:none;margin:5px 0 0}
fieldset{border:0;padding:0;margin:23px 0 14px;min-width:0}legend{padding:0;font-weight:750}
.feedback{min-height:1.6em;color:#5b483c;margin-top:12px;font-size:.93rem}.feedback:empty{display:none}
.feedback.good{background:#eff5e9;border:1px solid #c9d6be;padding:10px 12px;border-radius:7px;color:#29471c}
.actions{display:flex;gap:9px;flex-wrap:wrap;margin:11px 0}
.login-code{font-size:2rem;font-weight:850;font-variant-numeric:tabular-nums;letter-spacing:.12em}
.footer{color:var(--muted);font-size:.8rem;padding:22px 0}
@media(max-width:820px){.grid{grid-template-columns:minmax(0,1fr) 240px;gap:14px}.chapters{padding:16px 12px}}
@media(max-width:670px){.top-inner,.shell{width:calc(100% - 26px)}.top-inner{min-height:65px}.shell{padding-top:15px}.route{padding:14px;margin-bottom:14px}.phases{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}.chapters{position:static}.lesson{min-height:300px}.button.secondary{font-size:.77rem;padding:8px 10px}}