:root{--paper:#f3f5f9;--surface:#fff;--ink:#142033;--muted:#586579;--line:#dde2ea;--accent:#2443c4;--accent-soft:#e6ebfd;--on-accent:#fff;--marigold:#c98500;--marigold-soft:#fff1d1;--good:#17703f;--good-soft:#e1f3e8;--bad:#ad2a1f;--bad-soft:#fbe8e5;--warn:#7f5600;--warn-soft:#fff3d3;--code-bg:#eef1f7;--syn-kw:#1b3aa8;--syn-str:#a01a52;--syn-num:#0b7568;--syn-com:#5b7a35;--shadow:0 1px 2px #1420330f, 0 6px 20px #1420330f;--font-display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;--font-body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;--font-code:"JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;--radius:14px;--radius-sm:8px;--step--1:.875rem;--step-0:1rem;--step-1:1.2rem;--step-2:1.5rem;--step-3:2rem}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#10141b;--surface:#1a2029;--ink:#e5eaf2;--muted:#9aa5b5;--line:#2c3440;--accent:#8aa0ff;--accent-soft:#232c4d;--on-accent:#0c1330;--marigold:#f2b544;--marigold-soft:#352a12;--good:#5ccb8d;--good-soft:#143022;--bad:#ff8f84;--bad-soft:#3a1916;--warn:#f0c35c;--warn-soft:#332910;--code-bg:#0d1117;--syn-kw:#9fb2ff;--syn-str:#f29bc1;--syn-num:#62d6c3;--syn-com:#97b876;--shadow:0 1px 2px #0000004d, 0 6px 20px #00000040;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--paper:#10141b;--surface:#1a2029;--ink:#e5eaf2;--muted:#9aa5b5;--line:#2c3440;--accent:#8aa0ff;--accent-soft:#232c4d;--on-accent:#0c1330;--marigold:#f2b544;--marigold-soft:#352a12;--good:#5ccb8d;--good-soft:#143022;--bad:#ff8f84;--bad-soft:#3a1916;--warn:#f0c35c;--warn-soft:#332910;--code-bg:#0d1117;--syn-kw:#9fb2ff;--syn-str:#f29bc1;--syn-num:#62d6c3;--syn-com:#97b876;--shadow:0 1px 2px #0000004d, 0 6px 20px #00000040;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:var(--step-0);-webkit-text-size-adjust:100%;margin:0;line-height:1.55}button{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}h1,h2,h3{font-family:var(--font-display);text-wrap:balance;margin:0;line-height:1.15}code,pre{font-family:var(--font-code)}.shell{max-width:760px;min-height:100%;padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));flex-direction:column;margin:0 auto;display:flex}.shell.wide{max-width:1100px}.topbar{align-items:center;gap:12px;padding-block:14px;display:flex}.brand{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);align-items:center;gap:10px;margin-right:auto;display:flex}.brand-tld{color:var(--muted);font-weight:500}.brand,.topbar .btn{white-space:nowrap}.brand{min-width:0}.brand>span:last-child{text-overflow:ellipsis;overflow:hidden}@media (width<=480px){.brand{font-size:var(--step-0);gap:8px}.brand-tld{display:none}.topbar{gap:6px}.topbar .stat{gap:4px;padding:4px 8px}.topbar .btn.small{padding:7px 10px}}@media (width<=400px){.brand .brand-mark{display:none}}.brand-mark{background:var(--accent);width:30px;height:30px;color:var(--on-accent);font-size:.95rem;font-family:var(--font-code);border-radius:8px;place-items:center;font-weight:600;display:grid}.stat{font-variant-numeric:tabular-nums;font-weight:700;font-size:var(--step--1);border-radius:999px;align-items:center;gap:6px;padding:4px 10px;display:inline-flex}.stat.xp{background:var(--accent-soft);color:var(--accent)}.stat.streak{background:var(--marigold-soft);color:var(--marigold)}.stat svg{width:15px;height:15px}.hero{gap:6px;padding-block:8px 20px;display:grid}.eyebrow{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}.hero h1{font-size:var(--step-3)}.hero p{color:var(--muted);max-width:60ch;margin:0}.continue-card{border-radius:var(--radius);background:var(--accent);color:var(--on-accent);gap:12px;margin-bottom:28px;padding:18px;display:grid}.continue-card h2{font-size:var(--step-2)}.continue-card p{opacity:.9;margin:0}.continue-card .btn{background:var(--on-accent);color:var(--accent);justify-self:start}.term{gap:10px;margin-bottom:26px;display:grid}.term-label{font-family:var(--font-display);font-size:var(--step-1);align-items:baseline;gap:10px;font-weight:700;display:flex}.term-label span{font-family:var(--font-body);font-size:var(--step--1);color:var(--muted);font-weight:400}.module{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.module-head{grid-template-columns:auto 1fr;align-items:start;gap:4px 14px;padding:14px 16px;display:grid}.module-num{width:36px;height:36px;font-family:var(--font-code);background:var(--code-bg);color:var(--muted);border-radius:10px;grid-row:span 2;place-items:center;font-weight:600;display:grid}.module.has-lessons .module-num{background:var(--accent-soft);color:var(--accent)}.module-head h3{font-size:var(--step-1)}.module-head p{color:var(--muted);font-size:var(--step--1);margin:0}.lesson-list{border-top:1px solid var(--line);margin:0;padding:0;list-style:none}.lesson-row{text-align:left;border:0;border-bottom:1px solid var(--line);background:0 0;align-items:center;gap:12px;width:100%;min-height:52px;padding:12px 16px;display:flex}.lesson-list li:last-child .lesson-row{border-bottom:0}.lesson-row[disabled]{color:var(--muted)}button.lesson-row:not([disabled]){cursor:pointer;font-weight:700}button.lesson-row:not([disabled]):hover{background:var(--accent-soft)}.lesson-row .dot{border:2px solid var(--line);border-radius:50%;flex:none;place-items:center;width:22px;height:22px;display:grid}button.lesson-row:not([disabled]) .dot{border-color:var(--accent)}.lesson-row .dot.done{background:var(--good);border-color:var(--good);color:var(--surface)}.lesson-row .dot svg{width:13px;height:13px}.lesson-row .meta{font-size:var(--step--1);color:var(--muted);white-space:nowrap;margin-left:auto;font-weight:400}.soon{font-size:var(--step--1);color:var(--muted);padding:0 16px 14px 66px}.footnote{color:var(--muted);font-size:var(--step--1);padding-block:8px 32px}.btn{cursor:pointer;background:var(--accent);min-height:48px;color:var(--on-accent);border:0;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:12px 20px;font-weight:700;transition:transform 80ms,filter .12s;display:inline-flex}.btn:active{transform:translateY(1px)}.btn:hover{filter:brightness(1.06)}.btn[disabled]{background:var(--line);color:var(--muted);cursor:not-allowed;filter:none}.btn.secondary{background:var(--surface);color:var(--ink);border:1px solid var(--line)}.btn.good{background:var(--good);color:var(--surface)}.btn.small{min-height:38px;font-size:var(--step--1);padding:7px 14px}.btn svg{width:18px;height:18px}.icon-btn{cursor:pointer;width:44px;height:44px;color:var(--muted);background:0 0;border:0;border-radius:10px;place-items:center;display:grid}.icon-btn:hover{background:var(--code-bg)}.icon-btn svg{width:22px;height:22px}.player-top{top:env(safe-area-inset-top,0px);background:var(--paper);z-index:5;align-items:center;gap:10px;padding-block:10px;display:flex;position:sticky}body:before{content:"";height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper);position:fixed;inset:0 0 auto}.progress{flex:1;gap:4px;display:flex}.progress span{background:var(--line);border-radius:99px;flex:1;height:8px;transition:background .2s}.progress span.done{background:var(--good)}.progress span.current{background:var(--accent)}.card-area{flex:1;align-content:start;gap:18px;padding-block:12px 24px;display:grid}.card-kind{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:700}.card-area h2{font-size:var(--step-2)}.prose{gap:12px;max-width:65ch;display:grid}.prose p,.prose ul,.prose ol{margin:0}.prose ul,.prose ol{gap:6px;padding-left:1.2em;display:grid}.prose code,.inline-code{background:var(--code-bg);border-radius:5px;padding:1px 5px;font-size:.92em}.prompt{font-size:var(--step-1);max-width:60ch;margin:0;font-weight:700}.codeblock{background:var(--code-bg);border:1px solid var(--line);border-radius:var(--radius-sm);min-width:0;overflow-x:auto}.codeblock pre{margin:0;padding:12px 0;font-size:.86rem;line-height:1.6}.code-line{white-space:pre;padding:0 14px 0 0;display:block}.codeblock.plain pre{padding-left:14px}.codeblock.plain .code-line{white-space:pre-wrap;text-indent:-2ch;padding-left:2ch}.code-line .ln{text-align:right;width:2.6em;color:var(--muted);opacity:.6;-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums;padding-right:.9em;display:inline-block}.tok-kw{color:var(--syn-kw);font-weight:600}.tok-str{color:var(--syn-str)}.tok-num{color:var(--syn-num)}.tok-com{color:var(--syn-com);font-style:italic}.choices{gap:10px;display:grid}.choice{text-align:left;border:2px solid var(--line);background:var(--surface);cursor:pointer;min-height:54px;font-family:var(--font-code);border-radius:12px;align-items:center;gap:12px;padding:14px 16px;font-size:.95rem;display:flex}.choice.text{font-family:var(--font-body);font-size:var(--step-0)}.choice:hover:not([disabled]){border-color:var(--accent)}.choice.selected{border-color:var(--accent);background:var(--accent-soft)}.choice.correct{border-color:var(--good);background:var(--good-soft)}.choice.wrong{border-color:var(--bad);background:var(--bad-soft)}.choice[disabled]{cursor:default}.choice .key{border:1.5px solid var(--line);width:26px;height:26px;font-family:var(--font-body);font-size:var(--step--1);color:var(--muted);border-radius:7px;flex:none;place-items:center;font-weight:700;display:grid}.blank{border:2px dashed var(--muted);text-align:center;cursor:pointer;background:var(--surface);min-width:6.5em;color:var(--ink);font:inherit;border-radius:6px;margin:0 1px;padding:0 6px;line-height:1.45;display:inline-block}.blank.filled{border-style:solid;border-color:var(--accent);color:var(--accent);font-weight:600}.blank.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.blank.correct{border-color:var(--good);color:var(--good)}.blank.wrong{border-color:var(--bad);color:var(--bad)}.blank-answer{border:2px solid var(--good);background:var(--good-soft);color:var(--good);border-radius:6px;margin-left:6px;padding:0 6px;font-weight:600;display:inline-block}.blank.wrong{text-decoration:line-through}.answer-label{font-size:var(--step--1);color:var(--good);text-transform:uppercase;letter-spacing:.06em;font-weight:700}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{font-family:var(--font-code);border:2px solid var(--line);background:var(--surface);cursor:pointer;border-bottom-width:4px;border-radius:10px;min-height:44px;padding:10px 14px;font-size:.92rem}.chip:hover:not([disabled]){border-color:var(--accent)}.chip[disabled]{opacity:.35;cursor:default}.order-target,.order-pool{gap:6px;display:grid}.order-target{border-radius:var(--radius-sm);border:2px dashed var(--line);background:var(--code-bg);min-height:80px;padding:10px}.order-target:empty:before{content:"Tap the lines below in the right order";color:var(--muted);font-size:var(--step--1);place-self:center}.order-line{font-family:var(--font-code);text-align:left;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;white-space:pre-wrap;overflow-wrap:anywhere;border-radius:9px;min-height:44px;padding:10px 12px;font-size:.84rem}.order-line.placed{border-color:var(--accent)}.order-line.correct{border-color:var(--good);background:var(--good-soft)}.order-line.wrong{border-color:var(--bad);background:var(--bad-soft)}.bug-lines .code-line{cursor:pointer;padding-block:3px}.bug-lines .code-line:hover{background:var(--accent-soft)}.bug-lines .code-line.selected{background:var(--accent-soft);box-shadow:inset 4px 0 0 var(--accent)}.bug-lines .code-line.correct{background:var(--good-soft);box-shadow:inset 4px 0 0 var(--good)}.bug-lines .code-line.wrong{background:var(--bad-soft);box-shadow:inset 4px 0 0 var(--bad)}.shot{gap:6px;min-width:0;margin:0;display:grid}.shot-frame{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);display:block;position:relative;overflow:hidden}.shot-frame img{width:100%;height:auto;display:block}.shot-mark{background:var(--accent);min-width:26px;height:26px;color:var(--on-accent);box-shadow:0 0 0 2px var(--surface), 0 2px 6px #0000004d;border-radius:13px;place-items:center;padding:0 6px;font-size:.85rem;font-weight:700;display:grid;position:absolute;transform:translate(-50%,-50%)}.shot-box{border:3px solid var(--marigold);border-radius:6px;position:absolute;box-shadow:0 0 0 9999px #00000059}.shot figcaption{font-size:var(--step--1);color:var(--muted)}.flowchart{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);justify-content:center;padding:8px 0;display:flex;overflow-x:auto}.flowchart svg{max-width:100%;height:auto}.flow-shape{fill:var(--surface);stroke:var(--ink);stroke-width:1.5px}.flow-shape.terminal{fill:var(--good-soft)}.flow-shape.io{fill:var(--marigold-soft)}.flow-shape.decision{fill:var(--accent-soft)}.flow-text{fill:var(--ink);font-family:var(--font-body)}.flow-label{fill:var(--muted);font-family:var(--font-body);font-weight:700}.flow-line{fill:none;stroke:var(--ink);stroke-width:1.5px}.flow-arrowhead{fill:var(--ink)}.trace-wrap{min-width:0;overflow-x:auto}.trace{border-collapse:collapse;font-family:var(--font-code);font-variant-numeric:tabular-nums;background:var(--surface);font-size:.88rem}.trace th,.trace td{border:1px solid var(--line);text-align:center;min-width:4.2rem;height:40px;padding:4px 6px}.trace thead th{background:var(--code-bg);font-family:var(--font-body);font-size:var(--step--1);white-space:nowrap}.trace tbody th{background:var(--code-bg);color:var(--muted);min-width:2.8rem}.trace tbody th,.trace thead th:first-child{z-index:1;box-shadow:1px 0 0 var(--line);position:sticky;left:0}.trace td.empty{background:var(--paper)}.trace tr.example td{color:var(--muted);font-style:italic}.trace input{width:100%;min-width:4rem;font:inherit;text-align:center;border:1.5px solid var(--accent);background:var(--surface);color:var(--ink);border-radius:6px;padding:4px;font-size:16px}.trace td.correct input{border-color:var(--good);background:var(--good-soft)}.trace td.wrong input{border-color:var(--bad);background:var(--bad-soft);text-decoration:line-through}.cell-answer{color:var(--good);margin-top:2px;font-weight:600;display:block}.sort-list{gap:8px;margin:0;padding:0;list-style:none;display:grid}.sort-list li{border:1.5px solid var(--line);background:var(--surface);border-radius:12px;gap:8px;padding:10px 12px;display:grid}.sort-list li.correct{border-color:var(--good)}.sort-list li.wrong{border-color:var(--bad)}.sort-item{font-weight:700}.segmented{border:1.5px solid var(--line);border-radius:10px;display:flex;overflow:hidden}.segmented button{border:0;border-right:1.5px solid var(--line);background:var(--surface);min-height:40px;font-size:var(--step--1);cursor:pointer;color:var(--muted);flex:1;font-weight:700}.segmented button:last-child{border-right:0}.segmented button.on{background:var(--accent);color:var(--on-accent)}.sort-list li.wrong .segmented button.on{background:var(--bad);color:var(--surface)}.sort-list li.correct .segmented button.on{background:var(--good);color:var(--surface)}.segmented button.answer{background:var(--good-soft);color:var(--good);box-shadow:inset 0 0 0 2px var(--good)}.segmented button[disabled]{cursor:default}.checkbar{margin-left:calc(-1 * max(16px, env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(16px, env(safe-area-inset-right,0px)));padding:12px max(16px, env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px));background:var(--surface);border-top:1px solid var(--line);z-index:5;gap:10px;display:grid;position:sticky;bottom:0}.checkbar.correct{background:var(--good-soft);border-color:var(--good)}.checkbar.wrong{background:var(--bad-soft);border-color:var(--bad)}.checkbar-inner{gap:10px;width:100%;max-width:728px;margin:0 auto;display:grid}.feedback-title{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);align-items:center;gap:8px;display:flex}.checkbar.correct .feedback-title{color:var(--good)}.checkbar.wrong .feedback-title{color:var(--bad)}.feedback-title svg{width:22px;height:22px}.feedback-body{max-width:65ch;margin:0}.checkbar .btn{width:100%}@media (width>=640px){.checkbar .btn{justify-self:end;width:auto;min-width:180px}}.code-ex{gap:16px;display:grid}@media (width>=900px){.code-ex{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}.code-ex .task{grid-column:1/-1}}.pane{gap:10px;min-width:0;display:grid}.pane-head{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.pane-head h3{font-size:var(--step-0);margin-right:auto}.editor{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--code-bg);min-width:0;overflow:hidden}.editor .cm-editor{min-height:240px;max-height:62vh;font-size:.9rem}.editor .cm-scroller{font-family:var(--font-code);line-height:1.6}.editor .cm-gutters{background:var(--code-bg);color:var(--muted);border-right:1px solid var(--line)}.editor .cm-activeLine,.editor .cm-activeLineGutter{background:color-mix(in srgb, var(--accent-soft) 60%, transparent)}.editor .cm-error-line{background:var(--bad-soft)}.editor .cm-content{caret-color:var(--accent)}.editor .cm-cursor{border-left-color:var(--accent)}.editor .cm-focused{outline:none}.editor .cm-selectionBackground,.editor .cm-focused .cm-selectionBackground{background:var(--accent-soft)!important}.keybar{scrollbar-width:thin;gap:6px;padding-bottom:4px;display:flex;overflow-x:auto}.keybar button{font-family:var(--font-code);border:1px solid var(--line);background:var(--surface);cursor:pointer;border-bottom-width:3px;border-radius:8px;flex:none;min-height:40px;padding:6px 12px;font-size:.85rem}.testpanel{gap:4px;display:grid}.testpanel-head{align-items:baseline;gap:10px;display:flex}.testpanel-head h3{font-size:var(--step-0);margin-right:auto}.testpanel-count{font-size:var(--step--1);color:var(--muted);font-variant-numeric:tabular-nums}.tests{margin:0;padding:0;list-style:none}.tests li{border-bottom:1px dashed var(--line);font-size:var(--step--1);color:var(--muted);cursor:default;align-items:flex-start;gap:10px;padding:7px 0;display:flex}.tests li:last-child{border-bottom:0}.tests li.pass,.tests li.fail{color:var(--ink);animation:.22s ease-out test-in}.tests li.running{opacity:.55}.tests .mark{width:18px;height:18px;color:var(--muted);flex:none;margin-top:2px}.tests li.pass .mark{color:var(--good)}.tests li.fail .mark{color:var(--bad)}.tests .got{color:var(--bad);display:block}@keyframes test-in{0%{transform:translate(-4px)}to{transform:none}}.hint{background:var(--marigold-soft);color:var(--ink);font-size:var(--step--1);border-radius:10px;gap:4px;padding:12px 14px;display:grid}.hint b{color:var(--marigold)}.error-card{border:1px solid var(--bad);background:var(--bad-soft);border-radius:10px;gap:6px;min-width:0;padding:12px 14px;display:grid}.error-card.warning{border-color:var(--warn);background:var(--warn-soft)}.error-card .where{font-size:var(--step--1);color:var(--bad);text-transform:uppercase;letter-spacing:.06em;font-weight:700}.error-card.warning .where{color:var(--warn)}.error-card .delphi{font-family:var(--font-code);overflow-wrap:anywhere;color:var(--muted);font-size:.8rem}.error-card .friendly{margin:0;font-weight:700}.error-card .fix{font-size:var(--step--1);margin:0}.error-card .fix code{font-size:.85rem}.form-stage{width:100%;overflow:hidden}.vcl-window{transform-origin:0 0;color:#000;box-shadow:var(--shadow);background:#f0f0f0;border:1px solid #7a8a9f;border-radius:8px 8px 4px 4px;font-family:Segoe UI,Tahoma,Arial,sans-serif;position:relative;overflow:hidden}.vcl-title{color:#1b1b1b;background:#fff;border-bottom:1px solid #d6dbe3;align-items:center;gap:8px;height:32px;padding:0 4px 0 10px;font-size:12px;display:flex}.vcl-title .ico{color:#fff;background:#c4302b;border-radius:3px;place-items:center;width:16px;height:16px;font-size:10px;font-weight:700;display:grid}.vcl-title .caption{white-space:nowrap;text-overflow:ellipsis;margin-right:auto;overflow:hidden}.vcl-title .ctl{color:#333;place-items:center;width:34px;height:26px;font-size:13px;display:grid}.vcl-client{position:relative}.vcl{font-size:9pt;position:absolute}.vcl-label{white-space:pre;line-height:1.25;overflow:hidden}.vcl-label.wrap{white-space:pre-wrap}.vcl-button{font:inherit;color:#000;cursor:pointer;background:#e1e1e1;border:1px solid #adadad;border-radius:2px;padding:0 6px}.vcl-button:hover:not([disabled]){background:#e5f1fb;border-color:#0078d7}.vcl-button:active:not([disabled]){background:#cce4f7;border-color:#005499}.vcl-button[disabled]{color:#a0a0a0;cursor:default}.vcl-edit,.vcl-memo,.vcl-list{color:#000;font:inherit;background:#fff;border:1px solid #7a7a7a;border-radius:0;padding:1px 4px}.vcl-edit:focus,.vcl-memo:focus,.vcl-list:focus{border-color:#0078d7;outline:none}@media (pointer:coarse){.vcl-edit{font-size:16px}}.vcl-memo{white-space:pre;padding:2px 4px;line-height:1.35;overflow:auto}.vcl-memo.wrap{white-space:pre-wrap}.vcl-list{margin:0;padding:0;list-style:none;overflow:auto}.vcl-list li{cursor:default;white-space:nowrap;padding:0 4px}.vcl-list li.sel{color:#fff;background:#0078d7}.vcl-panel{border:1px solid #c8c8c8;place-items:center;display:grid}.vcl-group{border:1px solid #d5dfe5;border-radius:3px}.vcl-group>.legend{background:#f0f0f0;padding:0 3px;position:absolute;top:-.75em;left:8px}.vcl-check{cursor:pointer;align-items:center;gap:5px;display:flex}.vcl-check input{accent-color:#0078d7;margin:0}.vcl-radio-items{gap:2px;padding:14px 8px 4px;display:grid}.vcl-closed{color:#333;background:#f0f0f0eb;place-items:center;font-size:13px;display:grid;position:absolute;inset:32px 0 0}.vcl-dialog-backdrop{z-index:3;background:#0000002e;place-items:center;display:grid;position:absolute;inset:0}.vcl-dialog{color:#000;background:#fff;border:1px solid #7a8a9f;width:min(92%,320px);font-family:Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;box-shadow:0 8px 28px #00000047}.vcl-dialog .vcl-title{height:28px}.vcl-dialog-body{white-space:pre-wrap;overflow-wrap:anywhere;align-items:flex-start;gap:12px;padding:16px 14px 14px;display:flex}.vcl-dialog-body .err-ico{color:#fff;background:#e0401f;border-radius:50%;flex:none;place-items:center;width:30px;height:30px;font-size:15px;font-weight:700;display:grid}.vcl-dialog-body{align-items:center}.vcl-dialog-body .stack{gap:8px;width:100%;display:grid}.vcl-dialog-body .vcl-edit{width:100%;height:28px;position:static}.vcl-dialog-foot{background:#f0f0f0;justify-content:flex-end;gap:8px;padding:10px 12px;display:flex}.vcl-dialog-foot .vcl-button{min-width:76px;height:28px}.run-hint{font-size:var(--step--1);color:var(--muted);margin:0}.complete{justify-items:start;gap:18px;padding-block:24px;display:grid}.complete .badge{background:var(--good-soft);width:64px;height:64px;color:var(--good);border-radius:18px;place-items:center;display:grid}.complete .badge svg{width:34px;height:34px}.complete h2{font-size:var(--step-3)}.complete-stats{flex-wrap:wrap;gap:10px;display:flex}.complete-stats .stat{font-size:var(--step-0);padding:8px 14px}.recap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);gap:8px;max-width:65ch;padding:16px 18px;display:grid}.recap h3{font-size:var(--step-0)}.recap ul{gap:6px;margin:0;padding-left:1.2em;display:grid}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.stat{background:var(--code-bg);color:var(--ink)}.account,.dashboard{align-content:start;gap:20px;width:100%;max-width:560px;padding-block:8px 40px;display:grid}.dashboard{max-width:none}.notice{background:var(--marigold-soft);font-size:var(--step--1);border-radius:10px;margin:0;padding:10px 14px}.tabs{border:1.5px solid var(--line);border-radius:12px;display:flex;overflow:hidden}.tabs button{background:var(--surface);min-height:46px;color:var(--muted);cursor:pointer;border:0;flex:1;padding:12px;font-weight:700}.tabs button.on{background:var(--accent);color:var(--on-accent)}.form{gap:14px;display:grid}.form h2{font-size:var(--step-2)}.form h3{font-size:var(--step-1)}.form p{max-width:60ch;margin:0}.field{gap:6px;display:grid}.field-label{font-weight:700}.field-hint{font-size:var(--step--1);color:var(--muted)}.field input{font:inherit;border:1.5px solid var(--line);background:var(--surface);min-height:46px;color:var(--ink);border-radius:10px;width:100%;padding:11px 12px;font-size:16px}.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}.check{font-size:var(--step--1);cursor:pointer;align-items:flex-start;gap:10px;display:flex}.check input{width:20px;height:20px;accent-color:var(--accent);flex:none;margin:0}.form-error{color:var(--bad);background:var(--bad-soft);font-size:var(--step--1);border-radius:10px;padding:10px 12px}.form-ok{color:var(--good);background:var(--good-soft);font-size:var(--step--1);border-radius:10px;padding:10px 12px}.fine{font-size:var(--step--1);color:var(--muted);margin:0}.link{color:var(--accent);cursor:pointer;text-align:left;background:0 0;border:0;justify-self:start;min-height:40px;padding:6px 0;font-weight:700}.link.danger{color:var(--bad)}.btn.danger{background:var(--bad);color:var(--surface)}.danger-zone{border-top:1px solid var(--line);padding-top:16px}.recovery{font-family:var(--font-code);border:2px dashed var(--accent);background:var(--accent-soft);text-align:center;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all;border-radius:12px;padding:16px;font-size:1.25rem;font-weight:600}.profile-head{align-items:center;gap:14px;display:flex}.profile-head h2{font-size:var(--step-2)}.avatar{background:var(--accent);width:52px;height:52px;color:var(--on-accent);font-family:var(--font-display);border-radius:50%;flex:none;place-items:center;font-size:1.4rem;font-weight:700;display:grid}.avatar.small{width:34px;height:34px;font-size:1rem}.avatar-btn{cursor:pointer;color:var(--accent);background:0 0;border:0;min-height:40px;padding:0;font-weight:700}.class-list{gap:8px;margin:0;padding:0;list-style:none;display:grid}.class-list li{border:1px solid var(--line);background:var(--surface);border-radius:12px;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;display:flex}.inline-form{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:16px}.class-cards{gap:12px;margin:0;padding:0;list-style:none;display:grid}.class-card{grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:14px 16px;display:grid}@media (width<=560px){.class-card{grid-template-columns:1fr;justify-items:start}}.class-card h3{font-size:var(--step-1)}.code-badge{align-items:center;gap:8px;display:inline-flex}.code-text{font-family:var(--font-code);letter-spacing:.08em;background:var(--code-bg);border-radius:8px;padding:4px 10px;font-size:1.15rem;font-weight:600}.class-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;display:flex}.class-head h1{font-size:var(--step-3)}.join-box{gap:4px;display:grid}.summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;gap:2px;padding:12px 14px;display:grid}.tile-num{font-family:var(--font-display);font-size:var(--step-3);font-variant-numeric:tabular-nums;font-weight:700;line-height:1.1}.tile-label{font-size:var(--step--1);color:var(--muted)}.tile.good .tile-num{color:var(--good)}.tile.warn{border-color:var(--warn);background:var(--warn-soft)}.tile.warn .tile-num{color:var(--warn)}.no-learners{border:2px dashed var(--line);border-radius:var(--radius);justify-items:start;gap:12px;padding:18px;display:grid}.no-learners p{margin:0}.report{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin:0;padding:0;list-style:none;overflow:hidden}.report-head,.report-main{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.3fr) 4rem;align-items:center;gap:10px;padding:10px 14px;display:grid}.report-head{font-size:var(--step--1);color:var(--muted);background:var(--code-bg);font-weight:700}.report-row{border-top:1px solid var(--line)}.report-main{text-align:left;cursor:pointer;background:0 0;border:0;width:100%;min-height:52px}.report-main:hover{background:var(--accent-soft)}.r-name{text-overflow:ellipsis;white-space:nowrap;font-weight:700;overflow:hidden}.r-lessons{align-items:center;gap:8px;display:flex}.r-count,.r-streak{font-variant-numeric:tabular-nums;font-size:var(--step--1)}.r-streak{color:var(--marigold);align-items:center;gap:3px;font-weight:700;display:inline-flex}.r-streak svg{width:14px;height:14px}.bar{background:var(--line);border-radius:99px;flex:1;min-width:30px;height:8px;overflow:hidden}.bar span{background:var(--good);border-radius:99px;height:100%;display:block}.pill{font-size:var(--step--1);background:var(--code-bg);white-space:nowrap;border-radius:99px;padding:2px 8px;display:inline-block}.pill.good{background:var(--good-soft);color:var(--good)}.pill.warn{background:var(--warn-soft);color:var(--warn);font-weight:700}.report-detail{gap:10px;padding:4px 14px 14px;display:grid}.module-progress{gap:6px;margin:0;padding:0;list-style:none;display:grid}.module-progress li{font-size:var(--step--1);justify-content:space-between;align-items:center;gap:10px;display:flex}.mp-dots{gap:4px;display:flex}.mp-dot{background:var(--line);border-radius:4px;width:14px;height:14px}.mp-dot.done{background:var(--good)}@media (width<=560px){.report-head{display:none}.report-main{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name streak""active active""lessons lessons";row-gap:6px}.r-name{grid-area:name}.r-active{grid-area:active}.r-lessons{grid-area:lessons}.r-streak{grid-area:streak}.summary .tile-num{font-size:var(--step-2)}}