:root{--app-height:100dvh;--pwa-min-gutter:14px}html.pwa-standalone{--app-height:100vh}html,body{height:var(--app-height);overscroll-behavior:none;margin:0;overflow:hidden}#root,#app{height:var(--app-height)}.pwa-frame{width:100vw;height:var(--app-height);position:fixed;top:0;left:0}.pwa-backdrop{width:100vw;height:calc(var(--app-height) + 20vh);pointer-events:none;position:fixed;top:-10vh;left:0;overflow:hidden}.pwa-safe-top{padding-top:max(var(--pwa-min-gutter), env(safe-area-inset-top))}.pwa-safe-bottom{padding-bottom:max(var(--pwa-min-gutter), env(safe-area-inset-bottom))}.pwa-safe-x{padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right))}.pwa-above-home-indicator{bottom:max(var(--pwa-min-gutter), env(safe-area-inset-bottom))}.pwa-scroll{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;height:100%;overflow-y:auto}.ltb{--ltb-item-w:72px;--ltb-item-h:56px;--ltb-gap:4px;--ltb-padding:6px;--ltb-surface:#ffffff14;--ltb-blur:blur(26px) saturate(150%);--ltb-border:#ffffff24;--ltb-shadow:0 18px 50px #00000059;--ltb-lens-edge:#ffffff24;--ltb-label-size:10px;--ltb-icon:#fffc;--ltb-highlight:#fff3;--ltb-lens-highlight:#ffffff1f;--ltb-focus:#fffc;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.ltb-body{padding:var(--ltb-padding);will-change:transform;position:relative}.ltb-surface{background:var(--ltb-surface);-webkit-backdrop-filter:var(--ltb-blur);backdrop-filter:var(--ltb-blur);box-shadow:inset 0 0 0 1px var(--ltb-border), inset 0 1px 0 var(--ltb-highlight), var(--ltb-shadow);will-change:transform;border-radius:999px;position:absolute;inset:0}@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.ltb{--ltb-surface:#262432eb}}.ltb-track{gap:var(--ltb-gap);display:flex;position:relative}.ltb--vertical .ltb-track{flex-direction:column}.ltb-lens{width:0;height:0;box-shadow:inset 0 0 0 1px var(--ltb-lens-edge), inset 0 1px 0 var(--ltb-lens-highlight);pointer-events:none;will-change:transform;border-radius:999px;position:absolute;top:0;left:0}.ltb-item{z-index:1;width:var(--ltb-item-w);height:var(--ltb-item-h);color:var(--ltb-icon);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:999px;flex-direction:column;justify-content:center;align-items:center;gap:2px;margin:0;padding:0;display:flex;position:relative}.ltb--vertical .ltb-item{width:var(--ltb-item-h)}.ltb-item:focus-visible{outline:2px solid var(--ltb-focus);outline-offset:2px}.ltb-label{font-size:var(--ltb-label-size);font-weight:500;line-height:1.2}.ltb--vertical .ltb-label{display:none}.ltb-tip{color:#fff;white-space:nowrap;opacity:0;pointer-events:none;background:#0009;border-radius:999px;margin-left:12px;padding:4px 12px;font-size:12px;transition:opacity .15s;display:none;position:absolute;left:100%;box-shadow:inset 0 0 0 1px #ffffff1a}@media (hover:hover){.ltb--vertical .ltb-tip{display:block}.ltb--vertical .ltb-item:hover .ltb-tip{opacity:1}}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);--bg:var(--lightningcss-light,#f2f2f7)var(--lightningcss-dark,#09090b);--card:var(--lightningcss-light,#fff)var(--lightningcss-dark,#161618);--fill:var(--lightningcss-light,#ededf2)var(--lightningcss-dark,#222226);--sep:var(--lightningcss-light,#3c3c431f)var(--lightningcss-dark,#ffffff12);--line:var(--lightningcss-light,#3c3c432e)var(--lightningcss-dark,#ffffff1c);--text:var(--lightningcss-light,#111114)var(--lightningcss-dark,#f4f4f6);--text-2:var(--lightningcss-light,#6c6c72)var(--lightningcss-dark,#9a9aa1);--text-3:var(--lightningcss-light,#8e8e93)var(--lightningcss-dark,#6e6e76);--accent:var(--lightningcss-light,#1d5c6e)var(--lightningcss-dark,#5fb8cc);--on-accent:var(--lightningcss-light,#fff)var(--lightningcss-dark,#06181d);--good:var(--lightningcss-light,#248a3d)var(--lightningcss-dark,#32d74b);--bad:var(--lightningcss-light,#d70015)var(--lightningcss-dark,#ff6961);--shadow-near:var(--lightningcss-light,#0000000d)var(--lightningcss-dark,#00000080);--shadow-far:var(--lightningcss-light,#00000017)var(--lightningcss-dark,#0000008c);--font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;--font-num:ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--r-row:14px;--r-card:22px;--ease-out:cubic-bezier(.23, 1, .32, 1);--spring:linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 20.3%, 1.043 24.3%, 1.035 28.4%, 1.007 41.4%, .998 51.9%, 1);--tabbar-space:66px}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}:root.sim{--sat:59px;--sab:34px}html{background:var(--bg);-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;touch-action:pan-x pan-y}body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}input,textarea,[contenteditable=true],.cm-editor,.selectable{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}input,select,textarea{font-size:max(16px,1rem)}img,svg,a{-webkit-user-drag:none}.pwa-scroll{overscroll-behavior:contain}@media (pointer:coarse){.pwa-scroll{scrollbar-width:none}.pwa-scroll::-webkit-scrollbar{display:none}}*,:before,:after{box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;font-size:17px;line-height:1.35}h1,h2,p,ol,ul{margin:0;padding:0}ol,ul{list-style:none}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:0 0;border:0;margin:0;padding:0}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}.press{transition:transform .45s var(--spring)}.press:active{transition:transform .12s var(--ease-out);transform:scale(.97)}.btn{border-radius:999px;justify-content:center;align-items:center;height:54px;font-size:17px;font-weight:600;display:flex}.btn-primary{background:var(--accent);color:var(--on-accent)}.screen{height:100%;padding:calc(max(14px, var(--sat)) + 6px) max(16px, var(--sar)) calc(max(14px, var(--sab)) + var(--tabbar-space) + 36px) max(16px, var(--sal))}.screen-top{justify-content:space-between;align-items:center;gap:12px;min-height:52px;margin-bottom:16px;padding:0 4px;display:flex}.large-title{letter-spacing:-.01em;font-size:34px;font-weight:700;line-height:1.1}.credit{color:var(--text-3);margin-top:32px;padding:0 4px;font-size:15px}.ring{border-radius:999px;flex:none;place-items:center;width:44px;height:44px;display:grid;position:relative}.ring svg{width:36px;height:36px;position:absolute;inset:4px;transform:rotate(-90deg)}.ring circle{fill:none;stroke-width:3.5px;stroke-linecap:round}.ring-track{stroke:var(--line)}.ring-fill{stroke:var(--accent);transition:stroke-dashoffset .6s var(--ease-out)}.ring .num{font-size:15px;font-weight:600;position:relative}.group-head{letter-spacing:-.01em;margin:32px 4px 10px;font-size:20px;font-weight:600}.group{background:var(--card);border-radius:var(--r-card);overflow:hidden}.group>li{position:relative}.group>li+li:before{content:"";background:var(--sep);height:1px;position:absolute;top:0;left:52px;right:0}.group.units>li+li:before{left:16px}.row{text-align:left;align-items:center;gap:14px;width:100%;min-height:54px;padding:8px 16px;display:flex}button.row{transition:background-color .3s var(--ease-out)}button.row:active{background:var(--fill);transition:none}.row-name{flex:1;min-width:0;font-size:17px}.row-chevron{color:var(--text-3);flex:none}.mark{width:22px;height:22px;box-shadow:inset 0 0 0 1.5px var(--text-3);border-radius:999px;flex:none;place-items:center;display:grid}.is-done .mark{background:var(--fill);box-shadow:none;color:var(--text-2)}.is-done .row-name{color:var(--text-2)}.is-current .mark{box-shadow:inset 0 0 0 2px var(--accent)}.is-current .mark:after{content:"";background:var(--accent);border-radius:999px;width:10px;height:10px}.is-current .row-name{font-weight:600}.current-item{padding-bottom:16px}.current-item .row{min-height:58px}.current-item .btn{width:calc(100% - 68px);margin:2px 16px 0 52px}.ophi-tabbar{left:50%;bottom:max(14px, var(--sab));z-index:20;--ltb-item-w:76px;--ltb-item-h:54px;--ltb-gap:2px;--ltb-padding:6px;--ltb-label-size:10px;--ltb-surface:var(--card);--ltb-blur:none;--ltb-border:var(--sep);--ltb-shadow:0 1px 2px var(--shadow-near), 0 10px 30px var(--shadow-far);--ltb-highlight:transparent;--ltb-lens-edge:transparent;--ltb-lens-highlight:transparent;--ltb-focus:var(--accent);position:absolute;transform:translate(-50%)}.ophi-tabbar .ltb-label{font-weight:600}.update-pill{left:50%;bottom:calc(max(14px, var(--sab)) + var(--tabbar-space) + 12px);z-index:19;background:var(--card);box-shadow:inset 0 0 0 1px var(--sep), 0 1px 2px var(--shadow-near), 0 10px 30px var(--shadow-far);white-space:nowrap;transition:translate .45s var(--spring), opacity .2s var(--ease-out);border-radius:999px;align-items:center;gap:12px;padding:6px 6px 6px 18px;font-size:15px;display:flex;position:absolute;translate:-50%}@starting-style{.update-pill{opacity:0;translate:-50% 12px}}.update-pill-button{background:var(--accent);min-height:44px;color:var(--on-accent);border-radius:999px;padding:0 18px;font-weight:600}@media (prefers-reduced-motion:reduce){.press,.press:active{transition:none;transform:none}.ring-fill,button.row,.update-pill{transition:none}}.btn-quiet{background:var(--fill);color:var(--text)}.btn:disabled{background:var(--fill);color:var(--text-3)}.inline-code{font-family:var(--font-mono);background:var(--fill);border-radius:6px;padding:1px 6px;font-size:.92em}.layer{z-index:30;background:var(--bg);width:100%;height:100%;transition:transform .38s var(--ease-out);position:absolute;top:0;left:0}@starting-style{.layer{transform:translateY(100%)}}.layer.is-closing{transition-duration:.34s;transform:translateY(100%)}.lesson,.summary{flex-direction:column;height:100%;display:flex;position:relative;overflow:hidden}.lesson-top{padding:calc(max(14px, var(--sat)) + 2px) max(20px, var(--sar)) 0 max(6px, var(--sal));flex:none;align-items:center;gap:10px;display:flex}.close{width:44px;height:44px;color:var(--text-2);border-radius:999px;flex:none;place-items:center;display:grid}.progress{background:var(--line);border-radius:999px;flex:1;height:6px;overflow:hidden}.progress>span{border-radius:inherit;background:var(--text);transform-origin:0;height:100%;transition:transform .45s var(--spring);display:block}.lesson-body{min-height:0;padding:40px max(16px, var(--sar)) 140px max(16px, var(--sal));flex:1}.step{transition:opacity .28s var(--ease-out), translate .32s var(--ease-out)}@starting-style{.step{opacity:0;translate:16px}}.step-text{text-wrap:pretty;margin:0 4px 16px;font-size:19px;line-height:1.4}.question{letter-spacing:-.01em;text-wrap:balance;margin:0 4px 16px;font-size:22px;font-weight:600;line-height:1.25}.code{--code-bg:var(--lightningcss-light,#1c1c1f)var(--lightningcss-dark,#202024);border-radius:var(--r-card);background:var(--code-bg);color:#ededf0;font-family:var(--font-mono);margin:0;padding:22px;font-size:22px;line-height:1.6;box-shadow:inset 0 0 0 1px var(--lightningcss-light,#0000)var(--lightningcss-dark,#ffffff17)}.code-small{font-size:18px}.code li{white-space:pre-wrap;overflow-wrap:anywhere;text-indent:-4ch;padding-left:4ch}.code li.is-error{background:#ff696133;margin:0 -22px;padding-left:calc(22px + 4ch);padding-right:22px}.tok-s{color:#e9b98a}.tok-f{color:#b7c6ff}.tok-o{color:#9a9aa3}.tok-n{color:#ededf0}.tok-c{color:#7c7c85}.output{border-radius:var(--r-row);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:opacity .25s var(--ease-out), translate .3s var(--ease-out);margin-top:12px;padding:14px 18px}@starting-style{.output{opacity:0;translate:0 -6px}}.output-text{font-family:var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font-size:18px;line-height:1.5}.output-error{color:var(--bad);font-size:16px}.output-text+.output-text{margin-top:6px}.editor-frame{padding:0;overflow:hidden}.editor .cm-editor{border-radius:var(--r-card)}.compare{grid-template-columns:1fr 1fr;gap:10px;margin-top:4px;padding-left:30px;display:grid}.compare-label{color:var(--text-2);margin-bottom:4px;font-size:13px;font-weight:600}.compare-text{background:var(--fill);font-family:var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere;border-radius:10px;margin:0;padding:10px 12px;font-size:16px;line-height:1.45}.symbol-row{z-index:40;padding:6px max(8px, var(--sar)) 6px max(8px, var(--sal));scrollbar-width:none;background:var(--lightningcss-light,#d1d3d9)var(--lightningcss-dark,#2b2b2e);gap:6px;display:flex;position:fixed;left:0;right:0;overflow-x:auto}.symbol-row::-webkit-scrollbar{display:none}.symbol-key{min-width:44px;height:44px;font-family:var(--font-mono);color:var(--text);background:var(--lightningcss-light,#fff)var(--lightningcss-dark,#48484c);border-radius:8px;flex:1 0 auto;padding:0 10px;font-size:18px;box-shadow:0 1px var(--lightningcss-light,#0000004d)var(--lightningcss-dark,#00000080)}.symbol-key:active{background:var(--lightningcss-light,#b9bcc4)var(--lightningcss-dark,#6b6b70)}@media (pointer:fine){.symbol-row{display:none}}.output-explain{margin-top:8px;font-size:17px;line-height:1.4}.options{gap:10px;padding-top:24px;display:grid}.option{background:var(--card);border-radius:var(--r-row);min-height:56px;box-shadow:inset 0 0 0 1px var(--line);text-align:left;justify-content:space-between;align-items:center;gap:12px;padding:0 16px 0 18px;font-size:17px;display:flex}.option.is-code .option-text{font-family:var(--font-mono);font-size:19px}.radio{width:22px;height:22px;box-shadow:inset 0 0 0 1.5px var(--text-3);border-radius:999px;flex:none;place-items:center;display:grid}.option.is-selected{box-shadow:inset 0 0 0 2px var(--accent)}.option.is-selected .radio{background:var(--accent);box-shadow:none;color:var(--on-accent)}.option.is-wrong{box-shadow:inset 0 0 0 2px var(--bad)}.option.is-wrong .radio{background:var(--bad);box-shadow:none;color:#fff}.option.is-right{box-shadow:inset 0 0 0 2px var(--good)}.option.is-right .radio{background:var(--good);box-shadow:none;color:var(--lightningcss-light,#fff)var(--lightningcss-dark,#04210b)}.action{padding:12px max(16px, var(--sar)) max(16px, var(--sab)) max(16px, var(--sal));flex:none}.action .btn{width:100%}.feedback{z-index:2;padding:22px max(20px, var(--sar)) max(16px, var(--sab)) max(20px, var(--sal));background:var(--card);transition:transform .42s var(--ease-out);border-radius:28px 28px 0 0;gap:4px;display:grid;position:absolute;bottom:0;left:0;right:0;transform:translateY(105%)}.feedback[data-open=true]{transition:transform .45s var(--spring);transform:none}.feedback-title{letter-spacing:-.01em;text-wrap:balance;align-items:flex-start;gap:10px;font-size:20px;font-weight:600;line-height:1.3;display:flex}.feedback-title .inline-code{background:0 0;padding:0;font-size:1em}.verdict{color:#fff;border-radius:999px;flex:none;place-items:center;width:20px;height:20px;margin-top:3px;display:grid}.is-wrong .verdict{background:var(--bad)}.is-right .verdict{background:var(--good);color:var(--lightningcss-light,#fff)var(--lightningcss-dark,#04210b)}.feedback-body{color:var(--text-2);text-wrap:pretty;padding-left:30px;font-size:17px;line-height:1.45}.feedback-body .inline-code{color:var(--text)}.feedback>.btn,.feedback-buttons{margin-top:16px}.feedback-buttons{grid-template-columns:1fr 1.6fr;gap:10px;display:grid}.feedback-buttons.single{grid-template-columns:1fr}.summary-body{min-height:0;padding:calc(max(14px, var(--sat)) + 48px) max(16px, var(--sar)) 24px max(16px, var(--sal));flex:1}.summary-ring{place-items:center;width:132px;height:132px;margin:0 auto;display:grid;position:relative}.summary-ring svg{width:100%;height:100%;position:absolute;inset:0;transform:rotate(-90deg)}.summary-ring circle{fill:none;stroke-width:10px;stroke-linecap:round}.summary-ring .ring-fill{transition:stroke-dashoffset 1.1s var(--ease-out) .15s}.summary-ring .num{font-size:44px;font-weight:700;position:relative}.summary-xp{text-align:center;color:var(--text-2);margin-top:12px;font-size:15px;font-weight:600}.summary-title{text-align:center;letter-spacing:-.015em;text-wrap:balance;margin:20px 4px 0;font-size:28px;font-weight:700;line-height:1.2}.row.learned{min-height:52px}@media (prefers-reduced-motion:reduce){.layer,.layer.is-closing,.step,.output,.feedback,.feedback[data-open=true],.progress>span,.summary-ring .ring-fill{transition:none}}