:root{--bg: #ffffff;--fg: #0f172a;--muted: #64748b;--card: #f8fafc;--line: #e2e8f0;--accent: #0284c7;--accent-fg: #fff;--code-bg: #0f172a;--code-fg: #e2e8f0;--radius: 12px;--fs: 16px}[data-theme=dark]{--bg: #0f172a;--fg: #f1f5f9;--muted: #94a3b8;--card: #1e293b;--line: #334155;--accent: #38bdf8;--accent-fg: #082f49;--code-bg: #020617;--code-fg: #e2e8f0}[data-fs=small]{--fs: 14px}[data-fs=large]{--fs: 18px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--fg);font:var(--fs)/1.65 -apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;-webkit-text-size-adjust:100%}a{color:var(--accent)}button{font:inherit;cursor:pointer}.app{max-width:1080px;margin:0 auto;padding:12px 14px calc(76px + env(safe-area-inset-bottom))}header.top{display:flex;align-items:center;gap:10px;padding:6px 2px 12px}header.top h1{font-size:1.25rem;margin:0}header.top .sub{color:var(--muted);font-size:.82rem}.spacer{flex:1}.chip-btn{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:999px;padding:6px 10px;font-size:.85rem}.search{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--fg);font-size:1rem;margin-bottom:10px}.course{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:10px 12px;margin-bottom:10px}.course h2{margin:0 0 2px;font-size:1.05rem}.course p{margin:0;color:var(--muted);font-size:.88rem}.lesson-row{display:flex;gap:10px;align-items:baseline;width:100%;text-align:left;background:none;border:none;border-top:1px solid var(--line);padding:9px 2px;color:var(--fg)}.lesson-row .n{color:var(--muted);font-size:.8rem;min-width:1.6em}.lesson-row .t{flex:1;font-size:.95rem}.lesson-row .s{color:var(--muted);font-size:.78rem}.lesson-row:first-of-type{border-top:none}.tabs{display:flex;gap:6px;margin:8px 0}.tabs button{flex:1;padding:8px 4px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--fg);font-size:.9rem}.tabs button.on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.prose h3{font-size:1.05rem;margin:14px 0 6px}.prose p{margin:6px 0}.prose code{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:0 4px;font-size:.88em}.prose ul{padding-left:20px;margin:6px 0}.editor{width:100%;min-height:220px;resize:vertical;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--code-bg);color:var(--code-fg);border:1px solid var(--line);border-radius:10px;padding:12px;-moz-tab-size:2;tab-size:2}.preview{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;min-height:180px}.preview iframe{width:100%;height:320px;border:0;display:block;background:#fff}.output{background:var(--code-bg);color:var(--code-fg);border-radius:10px;padding:12px;font:13px/1.6 ui-monospace,monospace;white-space:pre-wrap;word-break:break-word;min-height:80px}.run-bar{position:sticky;bottom:calc(64px + env(safe-area-inset-bottom));display:flex;gap:8px;margin:12px 0}.run-btn{flex:1;background:var(--accent);color:var(--accent-fg);border:none;border-radius:12px;padding:13px;font-size:1.05rem;font-weight:700}.ghost-btn{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:12px;padding:13px 14px}.quiz{border:1px solid var(--line);border-radius:var(--radius);padding:12px;background:var(--card);margin-top:14px}.quiz button{display:block;width:100%;text-align:left;margin:6px 0;padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--fg)}.quiz button.right{border-color:#16a34a;background:#dcfce7;color:#14532d}.quiz button.wrong{border-color:#dc2626;background:#fee2e2;color:#7f1d1d}.note{background:#fef9c3;color:#713f12;border-radius:10px;padding:10px 12px;font-size:.9rem}[data-theme=dark] .note{background:#422006;color:#fde68a}.bottom-nav{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--bg);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:10}.bottom-nav button{flex:1;padding:10px 0 12px;border:none;background:none;color:var(--muted);font-size:.85rem}.bottom-nav button.on{color:var(--accent);font-weight:700}.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:12px;margin-bottom:10px}.muted{color:var(--muted);font-size:.88rem}.back{background:none;border:none;color:var(--accent);padding:4px 0;font-size:.95rem}@media (min-width: 1024px){.app{padding-bottom:24px}.split{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.preview iframe{height:420px}.bottom-nav{position:static;border:1px solid var(--line);border-radius:12px;margin-bottom:12px}.run-bar{position:static}}