:root{--bg: #ffffff;--soft: #f7f8fa;--ink: #1f2937;--muted: #6b7280;--faint: #9ca3af;--line: #e7e9ee;--accent: #4f46e5;--accent-deep: #4338ca;--accent-soft: #eef2ff;--green: #047857;--green-soft: #ecfdf5;--amber: #b45309;--amber-soft: #fef3c7;--teal: #0f766e;--teal-soft: #f0fdfa;--rose: #be123c;--rose-soft: #fff1f2;--radius: 16px;--shadow: 0 1px 2px rgba(16, 24, 40, .04);--shadow-hover: 0 8px 24px -8px rgba(79, 70, 229, .18), 0 2px 6px rgba(16, 24, 40, .06);--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;padding-bottom:76px}img,svg{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}.topbar{position:sticky;top:0;z-index:40;background:#ffffffe0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.topbar-inner{max-width:960px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:-.02em}.brand-emoji{font-size:22px}.brand small{display:block;font-size:10.5px;font-weight:600;color:var(--faint);letter-spacing:.08em;text-transform:uppercase}.topnav{display:none;gap:4px}.topnav a{padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);transition:background .15s ease,color .15s ease}.topnav a:hover{background:var(--soft);color:var(--ink)}.topnav a.is-active{background:var(--accent-soft);color:var(--accent)}.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:40;display:flex;justify-content:space-around;background:#fffffff0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}.tabbar a{flex:1;max-width:140px;text-align:center;padding:6px 4px;border-radius:12px;font-size:11px;font-weight:700;color:var(--faint);display:flex;flex-direction:column;align-items:center;gap:2px;transition:color .15s ease,background .15s ease}.tabbar a .tab-ico{font-size:20px;line-height:1;filter:grayscale(1) opacity(.6);transition:filter .15s ease,transform .15s ease}.tabbar a.is-active{color:var(--accent);background:var(--accent-soft)}.tabbar a.is-active .tab-ico{filter:none;transform:translateY(-1px)}@media (min-width: 720px){body{padding-bottom:0}.topnav{display:flex}.tabbar{display:none}}#app{max-width:960px;margin:0 auto;padding:24px 20px 64px}#app.page-enter{animation:pageIn .35s ease both}@keyframes pageIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}section{margin-top:36px}.section-title{font-size:15px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}.center{text-align:center}h1{font-size:clamp(28px,6vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.15}.lede{color:var(--muted);font-size:16.5px;margin-top:10px;max-width:58ch}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}.meta{font-size:13px;color:var(--muted)}.accent{color:var(--accent)}.card{display:block;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}a.card:hover,a.card:focus-visible{box-shadow:var(--shadow-hover);transform:translateY(-2px);border-color:#d7d9f5}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:999px;font-weight:700;font-size:14.5px;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}.btn:active{transform:scale(.97)}.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 14px -4px #4f46e580}.btn-primary:hover{background:var(--accent-deep)}.btn-ghost{background:var(--soft);color:var(--ink);border:1px solid var(--line)}.btn-ghost:hover{background:#eef0f4}.btn-done{background:var(--green-soft);color:var(--green);border:1px solid #a7f3d0}.btn-lg{padding:14px 26px;font-size:15.5px}.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}.chip-indigo{background:var(--accent-soft);color:var(--accent)}.chip-green{background:var(--green-soft);color:var(--green)}.chip-gray{background:var(--soft);color:var(--muted)}.chip-topic{background:var(--soft);color:var(--ink);font-weight:600;border:1px solid var(--line)}.chips{display:flex;flex-wrap:wrap;gap:8px}.bar{height:8px;background:#eceef1;border-radius:999px;overflow:hidden;margin-top:10px}.bar-lg{height:10px;margin-top:20px}.bar-fill{height:100%;background:var(--accent);border-radius:999px;transition:width .6s cubic-bezier(.22,1,.36,1)}.backlink{font-size:13.5px;font-weight:700;color:var(--accent);display:inline-block;margin-bottom:14px}.backlink:hover{text-decoration:underline}.page-head{margin-top:8px}.hero{display:grid;gap:28px;align-items:center;padding-top:20px}.hero-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}.hero-train{overflow:hidden;border-radius:var(--radius)}.train{width:100%;max-width:480px;margin:0 auto}.train-body{animation:trainBob 1.6s ease-in-out infinite;transform-origin:center}@keyframes trainBob{0%,to{transform:translateY(0)}50%{transform:translateY(-2.5px)}}.sleepers{animation:sleepers 1.2s linear infinite}@keyframes sleepers{0%{transform:translate(0)}to{transform:translate(-30px)}}.puff{opacity:0;animation:puff 2.4s ease-out infinite}.puff-2{animation-delay:.8s}.puff-3{animation-delay:1.6s}@keyframes puff{0%{opacity:0;transform:translate(0) scale(.6)}15%{opacity:.9}to{opacity:0;transform:translate(14px,-26px) scale(1.8)}}@media (min-width: 720px){.hero{grid-template-columns:1.2fr 1fr;padding-top:36px}}.dash{display:grid;gap:16px}.dash-ring{display:flex;align-items:center;gap:22px}.ring{width:116px;flex-shrink:0}.ring-fill{transition:stroke-dashoffset 1s cubic-bezier(.22,1,.36,1)}.dash-stats{display:flex;gap:22px;flex-wrap:wrap}.stat{display:flex;flex-direction:column}.stat-num{font-size:26px;font-weight:800;letter-spacing:-.02em}.stat-of{font-size:15px;color:var(--faint);font-weight:700}.stat-label{font-size:12.5px;color:var(--muted);font-weight:600}.continue-card{display:flex;align-items:center;gap:16px}.continue-emoji{font-size:34px;flex-shrink:0}.continue-title{font-size:18px;font-weight:800;letter-spacing:-.01em;margin:2px 0}.continue-arrow{margin-left:auto;font-size:22px;color:var(--accent);font-weight:800}@media (min-width: 720px){.dash{grid-template-columns:1fr 1fr}}.station-card{display:flex;gap:18px}.station-emoji{font-size:40px;flex-shrink:0}.station-body{flex:1;min-width:0}.station-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}.station-title{font-size:20px;font-weight:800;letter-spacing:-.01em}.trio{display:grid;gap:14px}.how-card h3{font-size:16px;margin:8px 0 6px}.how-card p{font-size:14px;color:var(--muted)}.how-emoji{font-size:28px}@media (min-width: 720px){.trio{grid-template-columns:repeat(3,1fr)}}.peek-scroll{display:flex;align-items:center;gap:6px;overflow-x:auto;padding:12px 4px 16px;scrollbar-width:none}.peek-scroll::-webkit-scrollbar{display:none}.peek-stop{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0}.peek-dot{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:var(--soft);border:2px solid var(--line);transition:transform .15s ease,border-color .15s ease}.peek-stop:hover .peek-dot{transform:scale(1.1);border-color:var(--accent)}.peek-num{font-size:11px;font-weight:800;color:var(--faint)}.peek-done .peek-dot{background:var(--green-soft);border-color:#a7f3d0;color:var(--green);font-weight:800}.peek-current .peek-dot{background:var(--accent-soft);border-color:var(--accent);box-shadow:0 0 0 5px #4f46e51f;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 0 4px #4f46e51a}50%{box-shadow:0 0 0 9px #4f46e50d}}.peek-track{flex:1;min-width:14px;height:3px;background:var(--line);border-radius:2px}.timeline{margin-top:28px}.tl-row{display:grid;grid-template-columns:56px 1fr;gap:14px;position:relative;padding-bottom:22px}.tl-rail{position:relative;display:flex;justify-content:center}.tl-rail:before{content:"";position:absolute;top:0;bottom:-22px;width:3px;background:var(--line);border-radius:2px}.tl-row:last-child .tl-rail:before{display:none}.tl-node{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:var(--bg);border:2px solid var(--line)}.tl-done .tl-node{background:var(--green-soft);border-color:#a7f3d0;color:var(--green);font-weight:800}.tl-done .tl-rail:before{background:#a7f3d0}.tl-current .tl-node{border-color:var(--accent);background:var(--accent-soft);animation:pulse 2s ease-in-out infinite}.tl-card h3{font-size:18px;letter-spacing:-.01em;margin:6px 0 2px}.tl-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.tl-later{opacity:.85}.tl-end{border-style:dashed}.tl-flag{border-color:var(--amber);background:var(--amber-soft)}.phase-hero{display:flex;gap:18px;align-items:flex-start}.phase-hero-emoji{font-size:48px;line-height:1.1}.phase-head-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}.lesson-card{display:flex;align-items:center;gap:16px;margin-bottom:12px}.lesson-check{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:var(--soft);flex-shrink:0}.lesson-card.is-done .lesson-check{background:var(--green-soft);color:var(--green);font-weight:800}.lesson-title{font-weight:800;font-size:16.5px}.lesson-body{flex:1;min-width:0}.lab-card p:first-child{margin-bottom:14px}.lab-card .meta{margin-top:12px}.lab-card.is-done{border-color:#a7f3d0;background:linear-gradient(0deg,#ecfdf580,#ecfdf580),var(--bg)}.empty-card{text-align:center;padding:32px 20px}.empty-card .how-emoji{margin-bottom:8px}.empty-card p{margin-top:6px}.pager{display:grid;gap:12px;margin-top:40px}.pager-card{display:flex;flex-direction:column;gap:2px;font-size:14.5px}.pager-next{text-align:right}@media (min-width: 720px){.pager{grid-template-columns:1fr 1fr}}.readbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:transparent}.readbar-fill{height:100%;width:0;background:var(--accent);transition:width .1s linear}.lesson{max-width:720px;margin:0 auto}.lesson h2{font-size:21px;letter-spacing:-.02em;margin:38px 0 12px}.lesson p{margin:12px 0;font-size:16.5px}.lesson-list{margin:12px 0 12px 22px;display:grid;gap:8px;font-size:16px}.lesson code{font-family:var(--mono);font-size:.88em;background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:1px 6px}.table-scroll{overflow-x:auto;margin:16px 0;border:1px solid var(--line);border-radius:12px}table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:480px}th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--soft)}th,td{padding:10px 14px;border-bottom:1px solid var(--line)}tbody tr:last-child td{border-bottom:none}tbody tr:nth-child(2n){background:#fbfcfd}td:first-child{font-weight:700;white-space:nowrap}.callout{border-radius:var(--radius);padding:16px 18px;margin:18px 0;border:1px solid}.callout p{margin:4px 0 0;font-size:15.5px}.callout-title{font-weight:800;font-size:14.5px}.callout-info{background:var(--accent-soft);border-color:#dfe3fb}.callout-tip{background:var(--green-soft);border-color:#baefd8}.callout-story{background:var(--amber-soft);border-color:#fde68a}.callout-warn{background:var(--rose-soft);border-color:#fecdd3}.callout-next{background:var(--soft);border-color:var(--line);font-weight:600}.diagram{margin:22px 0}.diagram--scroll .diagram-inner{overflow-x:auto;padding-bottom:6px}.diagram--scroll .diagram-inner>svg{min-width:860px}.diagram figcaption{font-size:13px;color:var(--muted);text-align:center;margin-top:8px;font-style:italic}.loop-dash{stroke-dasharray:10 7;animation:dashflow 18s linear infinite}.loop-dash--rev{animation-direction:reverse}@keyframes dashflow{to{stroke-dashoffset:-340}}.deck{display:flex;gap:12px;overflow-x:auto;padding:8px 2px 16px;scroll-snap-type:x mandatory}.deck-grid{flex-wrap:wrap;overflow:visible;scroll-snap-type:none}.fcard{perspective:900px;flex:0 0 240px;height:160px;scroll-snap-align:start;text-align:left}.deck-grid .fcard{flex:1 1 240px;max-width:100%}.fcard-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,.2,.2,1)}.fcard.flipped .fcard-inner{transform:rotateY(180deg)}.fcard-face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:14px;padding:16px;display:flex;flex-direction:column;justify-content:center;font-size:14.5px;line-height:1.45}.fcard-front{background:var(--accent-soft);border:1.5px solid #dfe3fb;font-weight:800;color:var(--accent-deep)}.fcard-hint{margin-top:10px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}.fcard-back{background:var(--bg);border:1.5px solid var(--line);transform:rotateY(180deg);color:var(--ink);font-size:13.5px;overflow-y:auto}.fcard:hover .fcard-inner{transform:rotateY(6deg)}.fcard.flipped:hover .fcard-inner{transform:rotateY(180deg)}.quiz{display:grid;gap:18px;margin:16px 0}.quiz-q{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}.quiz-question{font-weight:700;font-size:15.5px;margin-bottom:12px}.quiz-choices{display:grid;gap:8px}.quiz-choice{text-align:left;padding:10px 14px;border-radius:10px;border:1.5px solid var(--line);font-size:14.5px;background:var(--bg);transition:border-color .15s ease,background .15s ease}.quiz-choice:hover{border-color:var(--accent);background:var(--accent-soft)}.quiz-q.answered .quiz-choice{cursor:default;opacity:.75}.quiz-q.answered .quiz-choice:hover{border-color:var(--line);background:var(--bg)}.quiz-q.answered .quiz-choice.correct{border-color:#34d399;background:var(--green-soft);opacity:1;font-weight:700}.quiz-q.answered .quiz-choice.wrong{border-color:#fda4af;background:var(--rose-soft);opacity:1}.quiz-why{margin-top:12px;font-size:14px;color:var(--muted);background:var(--soft);border-radius:10px;padding:10px 14px}.quiz-score{font-size:16px;text-align:center;padding:14px;background:var(--accent-soft);border-radius:var(--radius);position:relative}.exercise{margin:18px 0}.exercise-title{font-weight:800;margin-bottom:12px}.exercise-item{display:flex;gap:12px;align-items:flex-start;padding:10px 4px;border-bottom:1px dashed var(--line);font-size:15px;cursor:pointer}.exercise-item:last-child{border-bottom:none}.exercise-item input{width:20px;height:20px;margin-top:2px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}.exercise-item:has(input:checked) span{color:var(--faint);text-decoration:line-through}.lesson-finish{display:flex;flex-wrap:wrap;gap:12px;margin:40px 0 20px;position:relative}.confetti{position:absolute;left:50%;top:50%;pointer-events:none;z-index:50}.confetti span{position:absolute;width:9px;height:13px;border-radius:2px;animation:pop 1.3s cubic-bezier(.16,1,.3,1) forwards}@keyframes pop{0%{opacity:1;transform:translate(0) rotate(0)}to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}}.deck-filter{margin-bottom:20px}.chip-filter{border:1.5px solid var(--line);background:var(--bg);cursor:pointer;transition:all .15s ease}.chip-filter:hover{border-color:var(--accent)}.chip-filter.is-on{background:var(--accent);border-color:var(--accent);color:#fff}.chip-shuffle{background:var(--amber-soft);border-color:#fde68a;color:var(--amber)}.cheat-intro{color:var(--muted);font-size:15px;max-width:62ch;margin-bottom:18px}.cheat-list{display:grid;gap:10px;margin-bottom:28px}.cheat-row{display:grid;gap:6px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--bg);transition:border-color .15s ease,box-shadow .15s ease}.cheat-row:hover{border-color:#d7d9f5;box-shadow:var(--shadow)}.cheat-warn{background:linear-gradient(0deg,#fff1f273,#fff1f273),var(--bg);border-color:#fecdd3}.cheat-cmd code{font-family:var(--mono);font-size:13.5px;font-weight:600;color:var(--accent-deep);background:var(--accent-soft);border:1px solid #dfe3fb;border-radius:8px;padding:3px 10px;display:inline-block;max-width:100%;overflow-x:auto;white-space:nowrap;vertical-align:middle}.cheat-warn .cheat-cmd code{color:var(--rose);background:var(--rose-soft);border-color:#fecdd3}.cheat-desc{font-size:14px;color:var(--muted)}.cheat-danger{font-size:13px}kbd{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--ink);background:var(--soft);border:1px solid var(--line);border-bottom-width:2.5px;border-radius:7px;padding:3px 9px;display:inline-block}.kbd-plus,.kbd-alt,.kbd-then{color:var(--faint);font-size:12.5px;font-weight:700;margin:0 4px}.kbd-then{font-style:italic}@media (min-width: 720px){.cheat-row{grid-template-columns:300px 1fr;align-items:center}}.res-grid{display:grid;gap:12px}.res-card{padding:16px 18px}.res-name{font-weight:800;font-size:15.5px}.res-ext{color:var(--accent);font-weight:700;font-size:13px}.res-desc{font-size:13.5px;color:var(--muted);margin-top:4px}@media (min-width: 720px){.res-grid{grid-template-columns:1fr 1fr}}.decode-list{display:grid;gap:10px}.decode-row{display:grid;gap:6px;padding:14px 16px;align-items:center;border:1px solid var(--line);border-radius:14px;background:var(--bg);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.decode-row:hover{border-color:#d7d9f5;box-shadow:var(--shadow-hover);transform:translateY(-1px)}.decode-req{font-weight:800;font-size:14.5px}.decode-note{font-size:13px;color:var(--muted)}.decode-row .chip{justify-self:start}@media (min-width: 720px){.decode-row{grid-template-columns:240px 1fr auto;gap:14px}.decode-row .chip{justify-self:end}}.toolbox{display:grid;gap:14px}.tool-card{display:flex;align-items:center;gap:14px}.tool-card .how-emoji{font-size:26px}.tool-card h3{font-size:15.5px}.tool-card p{font-size:13px;color:var(--muted)}@media (min-width: 720px){.toolbox{grid-template-columns:1fr 1fr}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}