:root{--bg: #f5f7fb;--bg-2: #ffffff;--bg-3: #e9edf5;--fg: #111827;--fg-2: #4b5563;--line: #d3d9e4;--accent: #2563eb;--accent-fg: #ffffff;--ok: #15803d;--ok-bg: #dcfce7;--err: #b91c1c;--err-bg: #fee2e2;--hint-bg: #fef3c7;--hint-fg: #92400e;--code-bg: #0f172a;--code-fg: #e2e8f0;--code-num: #64748b;--tap: 44px;--radius: 14px;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--bg: #0f172a;--bg-2: #1e293b;--bg-3: #273449;--fg: #f1f5f9;--fg-2: #cbd5e1;--line: #334155;--accent: #60a5fa;--accent-fg: #0f172a;--ok: #4ade80;--ok-bg: #14532d;--err: #fca5a5;--err-bg: #7f1d1d;--hint-bg: #422006;--hint-fg: #fde68a;--code-bg: #020617;--code-fg: #e2e8f0;--code-num: #475569}}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);-webkit-text-size-adjust:100%;overscroll-behavior-y:none}body{font-size:max(16px,1rem);line-height:1.45;touch-action:pan-x pan-y}button{font:inherit;color:inherit}h1{font-size:1.6rem;margin:.25rem 0 .5rem;letter-spacing:-.01em}h2{font-size:1.15rem;margin:.5rem 0}p{margin:.4rem 0}code{font-family:var(--mono);font-size:.92em;background:var(--bg-3);padding:.05em .35em;border-radius:5px}pre{margin:0;font-family:var(--mono)}.app{min-height:100dvh;display:flex;flex-direction:column}.main{flex:1;padding-bottom:calc(64px + env(safe-area-inset-bottom))}.app--full .main{padding-bottom:0}.screen{padding:calc(env(safe-area-inset-top) + 12px) 16px 24px;max-width:720px;margin:0 auto;width:100%}.screen--center{min-height:100dvh;display:flex;flex-direction:column;justify-content:center}.muted{color:var(--fg-2)}.small{font-size:.85rem}.hint{color:var(--fg-2);font-size:.95rem;margin:.4rem 0}.row{display:flex;gap:8px;margin:.5rem 0;flex-wrap:wrap;align-items:center}.row .input{flex:1;min-width:0}.backlink{background:none;border:0;color:var(--accent);padding:8px 0;min-height:var(--tap)}.btn{min-height:var(--tap);padding:0 16px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);cursor:pointer;font-weight:600}.btn:disabled{opacity:.5;cursor:default}.btn--primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.btn--ghost{background:transparent}.btn--block{width:100%;margin-top:8px}.btn--small{min-height:36px;padding:0 12px;font-size:.9rem}.btn--icon{width:var(--tap);padding:0}.tabbar{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--bg-2);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}.tabbar__item{min-height:56px;border:0;background:none;color:var(--fg-2);font-size:.75rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0}.tabbar__item.is-active{color:var(--accent)}.tabbar__icon{font-size:1.3rem}.brand{text-align:center;margin-bottom:1.5rem}.brand__mark{font-family:var(--mono);font-size:2.2rem;color:var(--accent)}.brand__name{margin:0}.brand__claim{color:var(--fg-2)}.tabs{display:flex;background:var(--bg-3);border-radius:12px;padding:4px;margin-bottom:1rem}.tab{flex:1;min-height:40px;border:0;background:none;border-radius:9px;color:var(--fg-2);font-weight:600}.tab.is-active{background:var(--bg-2);color:var(--fg)}.form{display:flex;flex-direction:column;gap:12px}.field{display:flex;flex-direction:column;gap:4px;font-size:.9rem;color:var(--fg-2)}.input{min-height:var(--tap);padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);color:var(--fg);font:inherit;font-size:max(16px,1rem);width:100%}.input--mono{font-family:var(--mono)}.cards{display:flex;flex-direction:column;gap:10px;margin:.75rem 0}.card{text-align:left;padding:14px 16px;border-radius:var(--radius);background:var(--bg-2);border:1px solid var(--line);display:block;width:100%}.card--tap{cursor:pointer}.card--tap:active{transform:scale(.99)}.card.is-disabled{opacity:.55}.card--primary{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--bg-2))}.card--accent{border-color:var(--hint-fg)}.card--done{border-color:var(--ok)}.card__kicker{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);font-weight:700}.card__title{font-weight:700;font-size:1.05rem;display:flex;gap:8px;align-items:center}.card__sub{color:var(--fg-2);font-size:.95rem;margin-top:2px}.card__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;font-size:.85rem;color:var(--fg-2)}.card__lock{font-size:.8rem;color:var(--fg-2);margin-top:6px}.tag{font-size:.72rem;padding:2px 8px;border-radius:999px;background:var(--bg-3);color:var(--fg-2);font-weight:600;white-space:nowrap}.tag--xp{background:var(--hint-bg);color:var(--hint-fg)}.meter{flex:1;max-width:120px;height:6px;border-radius:3px;background:var(--bg-3);overflow:hidden;display:inline-block}.meter__fill{display:block;height:100%;background:var(--ok)}.hero{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:8px}.hero__hello{color:var(--fg-2)}.hero__lang{font-size:1.5rem;font-weight:800}.stats{display:flex;gap:12px}.stats--wide{justify-content:space-between;margin:1rem 0}.stat{display:flex;flex-direction:column;align-items:center;min-width:52px}.stat__v{font-size:1.3rem;font-weight:800}.stat__k{font-size:.7rem;color:var(--fg-2);white-space:nowrap}.levelbar{position:relative;height:22px;border-radius:11px;background:var(--bg-3);overflow:hidden;margin:12px 0}.levelbar__fill{position:absolute;inset:0 auto 0 0;background:var(--accent)}.levelbar__text{position:relative;display:block;text-align:center;font-size:.75rem;line-height:22px;font-weight:600}.level{margin-top:1rem}.level__title{color:var(--fg-2);font-size:.9rem;text-transform:uppercase;letter-spacing:.06em}.modstats{display:flex;gap:12px;flex-wrap:wrap;font-size:.85rem;color:var(--fg-2);margin:.5rem 0}.lessons{list-style:none;padding:0;margin:.75rem 0;display:flex;flex-direction:column;gap:8px}.lesson{width:100%;display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);min-height:var(--tap)}.lesson__num{grid-row:1 / 3;width:32px;height:32px;border-radius:50%;background:var(--bg-3);display:grid;place-items:center;font-weight:700;font-size:.9rem}.lesson.is-done .lesson__num{background:var(--ok-bg);color:var(--ok)}.lesson__title{font-weight:600}.lesson__sub{font-size:.8rem;color:var(--fg-2)}.section{margin:1.25rem 0}.section__title{font-size:.85rem;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}.sticky-foot{position:sticky;bottom:calc(64px + env(safe-area-inset-bottom));padding:8px 0;background:linear-gradient(transparent,var(--bg) 30%)}.app--full .sticky-foot{bottom:env(safe-area-inset-bottom)}.rich p{margin:.5rem 0}.rich__code{background:var(--code-bg);color:var(--code-fg);padding:10px 12px;border-radius:10px;overflow-x:auto;font-size:.88rem;white-space:pre}.mnemonic{font-style:italic;color:var(--fg-2)}.code{background:var(--code-bg);color:var(--code-fg);border-radius:10px;padding:8px 0;overflow-x:auto;font-size:.9rem;line-height:1.5;margin:.5rem 0}.code__line{display:grid;grid-template-columns:2.2em minmax(0,1fr);padding:0 10px 0 0;white-space:pre}.code__num{color:var(--code-num);text-align:right;padding-right:10px;user-select:none}.code--tappable .code__line{cursor:pointer;min-height:1.6em}.code--tappable .code__line:active{background:#ffffff14}.code__line.is-selected{background:#60a5fa40;outline:1px solid var(--accent)}.code--gaps{padding:12px;white-space:pre-wrap;word-break:break-word;line-height:2}.gap{font-family:var(--mono);font-size:.95em;min-width:3.5em;min-height:1.9em;margin:0 2px;padding:0 8px;border-radius:8px;border:2px dashed var(--code-num);background:transparent;color:var(--code-fg);vertical-align:middle}.gap.is-active{border-color:var(--accent);border-style:solid}.gap.is-filled{border-style:solid;background:#60a5fa33;border-color:var(--accent)}.seq{display:inline}.seq__empty{color:var(--code-num)}.bank{display:flex;flex-wrap:wrap;gap:8px;margin:.75rem 0}.chip{font-family:var(--mono);min-height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg-2);color:var(--fg)}.chip:disabled{opacity:.35}.chip--placed{background:#60a5fa40;color:var(--code-fg);border-color:var(--accent);margin:2px;min-height:32px;opacity:1!important}.stdin{display:flex;gap:8px;align-items:baseline;font-size:.9rem;color:var(--fg-2)}.stdin pre{background:var(--bg-3);color:var(--fg);padding:4px 8px;border-radius:6px}.output{background:var(--bg-3);border-radius:10px;padding:10px 12px;white-space:pre-wrap;word-break:break-word;font-size:.9rem;margin:.5rem 0;border-left:3px solid var(--ok)}.output--err{border-left-color:var(--err)}.editor{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--code-bg);margin:.5rem 0}.editor__bar{display:flex;gap:4px;overflow-x:auto;padding:6px;background:#ffffff0d;-webkit-overflow-scrolling:touch}.editor__key{flex:0 0 auto;min-width:36px;min-height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:#ffffff0f;color:var(--code-fg);font-family:var(--mono)}.editor__area{display:block;width:100%;border:0;background:transparent;color:var(--code-fg);font-family:var(--mono);font-size:max(16px,.95rem);line-height:1.5;padding:10px 12px;resize:vertical;outline:none;white-space:pre;overflow-wrap:normal;overflow-x:auto;tab-size:4}.options{display:flex;flex-direction:column;gap:8px;margin:.75rem 0}.option{text-align:left;min-height:var(--tap);padding:10px 14px;border-radius:12px;border:2px solid var(--line);background:var(--bg-2)}.option.is-selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--bg-2))}.option--mono .option__pre{font-family:var(--mono);white-space:pre-wrap;font-size:.92rem}.order{list-style:none;padding:0;margin:.5rem 0;display:flex;flex-direction:column;gap:6px}.order__row{display:flex;align-items:center;gap:8px;background:var(--code-bg);color:var(--code-fg);border-radius:10px;padding:6px 6px 6px 0}.order__text{flex:1;font-family:var(--mono);font-size:.9rem;white-space:pre;overflow-x:auto;background:transparent;padding-right:8px}.order__btns{display:flex;gap:4px}.order__btns .btn{background:#ffffff14;border-color:#ffffff26;color:var(--code-fg);width:40px;min-height:40px}.player{min-height:100dvh;display:flex;flex-direction:column}.player__head{display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top) + 8px) 12px 8px}.progress{flex:1;height:10px;background:var(--bg-3);border-radius:5px;overflow:hidden}.progress__bar{height:100%;background:var(--accent);transition:width .3s}.player__count{font-size:.85rem;color:var(--fg-2)}.player__body{flex:1;padding:0 16px 16px;max-width:720px;width:100%;margin:0 auto}.player__meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}.player__title{font-size:.8rem;color:var(--fg-2);margin-left:auto}.prompt{font-size:1.15rem;margin:.25rem 0 .75rem}.player__foot{position:sticky;bottom:0;display:flex;gap:8px;padding:10px 16px calc(env(safe-area-inset-bottom) + 10px);background:var(--bg);border-top:1px solid var(--line)}.player__foot .btn--primary{flex:1}.hints{display:flex;flex-direction:column;gap:6px;margin:.5rem 0}.alert{padding:10px 12px;border-radius:12px;background:var(--bg-3);margin:.5rem 0;display:flex;flex-direction:column;gap:4px}.alert--error{background:var(--err-bg);color:var(--err);flex-direction:row;justify-content:space-between;align-items:center}.alert--ok{background:var(--ok-bg);color:var(--fg);border-left:4px solid var(--ok)}.alert--hint{background:var(--hint-bg);color:var(--hint-fg)}.result{border-radius:12px;padding:10px 12px;margin:.5rem 0;border:1px solid var(--line)}.result--ok{border-color:var(--ok)}.result--fail{border-color:var(--err)}.result__title{font-weight:700;margin-bottom:6px}.result__stderr{white-space:pre-wrap;font-size:.85rem;color:var(--err)}.cases{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}.case{border-radius:10px;background:var(--bg-2);padding:8px 10px}.case__head{display:flex;gap:8px;font-weight:600;font-size:.9rem}.case--ok .case__mark{color:var(--ok)}.case--fail .case__mark{color:var(--err)}.case__grid{display:grid;grid-template-columns:5.2em minmax(0,1fr);gap:4px 8px;margin-top:6px;font-size:.85rem}.case__k{color:var(--fg-2)}.case__v{white-space:pre-wrap;word-break:break-word;background:var(--bg-3);padding:3px 6px;border-radius:6px}.case__v--err{color:var(--err)}.case__err{font-size:.85rem;color:var(--err);margin-top:4px}.done{text-align:center;display:flex;flex-direction:column;gap:8px}.done__mark{font-size:3rem;color:var(--ok)}.done__xp{font-size:1.6rem;font-weight:800;color:var(--accent);margin:0}.codebox{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.codebox__code{font-size:1.3rem;letter-spacing:.08em;padding:6px 10px}.list{list-style:none;padding:0;margin:.5rem 0;display:flex;flex-direction:column;gap:6px}.list__row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line);font-size:.9rem}#pwa-layer{position:fixed;inset:0;pointer-events:none;z-index:50}.toast,.pwahint{pointer-events:auto;position:fixed;left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom));background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;gap:8px;align-items:center;justify-content:space-between;box-shadow:0 8px 24px #0003}.pwahint{flex-wrap:wrap}.pwahint__actions{display:flex;gap:6px}.spinner{padding:2rem;text-align:center;color:var(--fg-2)}@media(min-width:720px){.tabbar{max-width:720px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}}