:root{--paper:#f7f3ea;--grid-line:#22303f12;--ink:#22303f;--accent:#e8833a;--grid-size:14px;--font-serif:"Lining Figures", Georgia, "Times New Roman", serif}@font-face{font-family:Lining Figures;src:local(Charter),local(Charter-Roman),local(Charter Roman),local(Cambria),local(Times New Roman);unicode-range:U+30-39}html,body{touch-action:manipulation}body{color:var(--ink);font-family:var(--font-serif);background-color:var(--paper);background-image:linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);background-size:var(--grid-size) var(--grid-size);margin:0}.keypad{grid-template-columns:repeat(10,1fr);gap:8px;max-width:420px;display:grid}.key{min-width:48px;min-height:48px;font-family:var(--font-serif);color:var(--ink);background:var(--paper);border:2px solid var(--ink);touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:6px;grid-column:span 2;padding:0;font-size:1.5rem}.key-wide{grid-column:span 4}.key-ok{border-color:var(--accent);grid-column:span 6}.key:active:not(:disabled){background:var(--accent)}.key:disabled{opacity:.4}.bond-graph text{fill:var(--ink);font-family:var(--font-serif);font-size:20px}.bond-graph line{stroke:var(--ink);stroke-width:1.5px}.bond-graph text.hi{fill:var(--accent);font-weight:700}.equation{justify-content:center;gap:.3em;font-size:2.5rem;display:flex}.equation .hi{color:var(--accent);font-weight:700}[hidden]{display:none!important}#app{height:100vh;flex-direction:column;height:100dvh;display:flex}.outlet{flex:1;min-height:0}.notice{opacity:.75;margin:0;padding:8px 24px;font-size:1rem}.install-hint{justify-content:space-between;align-items:center;gap:16px;padding-right:24px;display:flex}button{font-family:var(--font-serif);color:var(--ink);touch-action:manipulation;-webkit-tap-highlight-color:transparent}.nav-button{background:var(--paper);border:2px solid var(--ink);border-radius:6px;min-width:48px;min-height:48px;padding:0 20px;font-size:1.25rem}.nav-button.primary{border-color:var(--accent)}.nav-button:active:not(:disabled){background:var(--accent)}.nav-button:disabled{opacity:.4}.link-button{background:0 0;border:none;min-height:48px;padding:0 4px;font-size:1.125rem;text-decoration:underline}.muted{opacity:.7}.screen{box-sizing:border-box;height:100%;padding:12px 24px max(16px, env(safe-area-inset-bottom))}.lesson,.review,.check{grid-template:"head head""scene side"minmax(0,1fr)"controls controls"/minmax(0,1fr) minmax(0,1fr);gap:12px 32px;display:grid}@media (orientation:portrait){.lesson,.review,.check{grid-template:"head""scene"minmax(0,1fr)"side""controls"/minmax(0,1fr)}}.head{grid-area:head;justify-content:space-between;align-items:center;gap:24px;display:flex}.home-button:before{content:"← "}.head h1{margin:0;font-size:1.5rem;font-weight:400}.scene-box{grid-area:scene;min-height:0;position:relative}.scene{position:absolute;inset:0}.scene-box .notice{padding:24px 0}.side,.practice-side{text-align:center;flex-direction:column;grid-area:side;gap:12px;min-height:0;display:flex;overflow:auto}.screen[data-mode=intro]>.scene-box{display:none}.screen[data-mode=intro] .side{grid-area:scene-start/scene-start/side-end/side-end;justify-content:center;align-items:center;max-height:none}.screen[data-mode=intro] .board{flex:none;display:flex}.screen[data-mode=intro] .bond-graph,.screen[data-mode=intro] .equation{display:none}.screen[data-mode=intro] .caption{white-space:pre-line;text-align:left;max-width:42ch;font-size:2rem}.board{flex-direction:column;flex:auto;gap:8px;min-height:0;display:flex}.bond-graph{flex:none;width:100%;height:clamp(160px,40vh,320px)}@media (orientation:portrait){.side,.practice-side{max-height:45vh}.board{grid-template-rows:auto 1fr;grid-template-columns:minmax(200px,1fr) 1fr;align-items:center;gap:8px 24px;display:grid}.bond-graph{grid-row:1/3;height:clamp(200px,30vh,320px)}}.equation{letter-spacing:.06em;min-height:1.3em}.caption,.question,.feedback,.hint-text{margin:0;font-size:1.75rem;line-height:1.4}.feedback:empty,.hint-text:empty{display:none}.predict{flex-wrap:wrap;justify-content:center;align-items:baseline;gap:16px;display:flex}.answer-slot{text-align:center;border-bottom:2px solid var(--accent);min-width:1.6em;padding:0 4px;font-size:2rem;display:inline-block}.answer-slot.given-wrong{opacity:.6;text-decoration:line-through}.controls,.practice-controls{flex-wrap:wrap;grid-area:controls;justify-content:space-between;align-items:flex-end;gap:16px 32px;display:flex}.nav{gap:12px;display:flex}.keypad{flex:320px}.keypad.idle{visibility:hidden}.practice{display:contents}.problem{font-size:3rem;line-height:1.2}.problem .answer-slot{font-size:inherit}.problem .mark{color:var(--accent);margin-left:.4em}.screen[data-visual=off]>.scene-box,.screen[data-mode=done]>.scene-box{display:none}.screen[data-visual=off] .practice-side,.done{grid-area:scene-start/scene-start/side-end/side-end}.screen[data-visual=off] .practice-side{text-align:center;justify-content:center;align-items:center}.done{flex-direction:column;justify-content:center;align-items:center;gap:24px;font-size:1.5rem;display:flex}.done p{margin:0}.home{max-width:640px;margin:0 auto;overflow:auto}.home h1{margin:24px 0;font-size:2.5rem;font-weight:400}.home h2{margin:0 0 12px;font-size:1.25rem;font-weight:400}.home section{margin-bottom:32px}.lesson-list{margin:0;padding:0;list-style:none}.lesson-row{align-items:stretch;gap:12px;margin-bottom:12px;display:flex}.lesson-button{text-align:left;background:var(--paper);border:2px solid var(--ink);border-radius:6px;flex:1;min-height:64px;padding:0 20px;font-size:1.5rem}.lesson-button:active{background:var(--accent)}.review-row,.languages{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.review-row p{margin:0}.lang-button{background:0 0;border:2px solid #0000;border-radius:6px;min-height:48px;padding:0 16px;font-size:1.125rem}.lang-button[aria-pressed=true]{border-color:var(--ink)}.lesson-progress{border-collapse:collapse;color:var(--ink);text-align:left;font-size:1.125rem}.lesson-progress th,.lesson-progress td{border-bottom:1px solid var(--grid-line);padding:4px 16px 4px 0}.lesson-progress thead th{opacity:.6;font-size:1rem;font-weight:400}.lesson-progress tbody th{font-weight:400}.lesson-progress .link-button{min-height:44px;font-size:inherit;color:inherit;text-align:left;padding:0}.lesson-progress .marks{white-space:nowrap;letter-spacing:.15em}.mark-error,.lesson-progress .verdict-errors{color:var(--accent)}.lesson-progress .verdict-few,.lesson-progress .verdict-unseen{opacity:.6}.mark-legend{flex-wrap:wrap;gap:4px 16px;margin:0;padding:0;list-style:none;display:flex}.lesson-progress-block{flex-direction:column;gap:12px;display:flex}.check-summary{text-align:center;justify-content:flex-start;min-height:0;overflow:auto}.check-progress{margin:0;font-size:1rem}.stats{flex-direction:column;gap:12px;display:flex}.stats-body{flex:1;min-height:0;padding-bottom:24px;overflow:auto}.stats-section{max-width:960px;margin:0 0 32px}.stats-section h2{margin:0 0 12px;font-size:1.25rem;font-weight:400}.stats-empty{opacity:.7;margin:0}.sr-only{white-space:nowrap;clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.speed-chart svg[role=img]{width:100%;max-width:720px;height:auto;font-size:13px;display:block}.speed-chart text{fill:var(--ink)}.speed-chart .gridline{stroke:var(--ink);stroke-width:1px;opacity:.2}.speed-chart .y-label{text-anchor:end;dominant-baseline:central}.speed-chart .x-label{text-anchor:middle}.speed-chart .line{fill:none;stroke:var(--ink);stroke-width:2px}.speed-chart .mark{text-anchor:middle;dominant-baseline:central;stroke:var(--paper);stroke-width:4px;paint-order:stroke;font-size:18px}.chart-caption{margin:0 0 4px}.chart-legend{flex-wrap:wrap;gap:4px 20px;margin:8px 0 0;padding:0;list-style:none;display:flex}.chart-legend svg{vertical-align:middle}.activity-calendar{border-collapse:collapse}.activity-calendar th{text-align:center;opacity:.7;padding:0 6px;font-size:.8125rem;font-weight:400}.activity-calendar tbody th{text-align:right}.activity-calendar td{text-align:center;border:1px solid var(--grid-line);width:44px;height:36px;padding:0}.activity-calendar .level-1{background:#22303f1a}.activity-calendar .level-2{background:#22303f40}.activity-calendar .level-3{background:#22303f73}.activity-calendar .today{outline:2px solid var(--ink);outline-offset:-2px}.session-list{margin:0;padding:0;list-style:none}.session-list li{border-bottom:1px solid var(--grid-line);padding:6px 0}.check-table{border-collapse:collapse}.check-table th,.check-table td{text-align:center;border:1px solid var(--grid-line);padding:6px 14px}.check-table tbody th{text-align:left;font-weight:400}
