:root{--bg: #0f1419;--panel: #1a2028;--text: #e6edf3;--muted: #8b949e;--accent: #d2202c;--accent-hover: #b51a25;--ok: #3fb950;--err: #f85149;--border: #30363d}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,Roboto,Helvetica,Arial,sans-serif;min-height:100vh}.app{max-width:760px;margin:0 auto;padding:48px 24px}h1{margin:0 0 8px;font-size:28px}.subtitle{color:var(--muted);margin:0 0 32px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:20px;margin-bottom:20px}.panel h2{margin:0 0 12px;font-size:16px;color:var(--muted);font-weight:600}.input-row{display:flex;gap:8px}#equation-input{flex:1;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:10px 12px;font-family:SF Mono,Menlo,Consolas,monospace;font-size:15px}#equation-input:focus{outline:none;border-color:var(--accent)}button{cursor:pointer;font-family:inherit;font-size:14px;border-radius:6px;border:1px solid var(--border);background:var(--panel);color:var(--text);padding:8px 14px;transition:background .15s,border-color .15s}button:hover{border-color:var(--accent)}#balance-btn{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;padding:10px 18px}#balance-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.demos{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}.demo-btn{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px;text-align:left;line-height:1.4}.demo-label{font-size:13px;color:var(--muted)}.demo-preview{font-size:14px;color:var(--text)}.equation{font-family:Times New Roman,Songti SC,SimSun,serif;font-size:22px;line-height:1.6;display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0}.equation .species{white-space:nowrap}.equation .coef{font-weight:600;margin-right:1px}.equation .op{margin:0 8px;color:var(--muted)}.equation .arrow{margin:0 12px;color:var(--muted);font-weight:600}.equation sub{font-size:.7em;vertical-align:sub;line-height:0}.equation sup{font-size:.7em;vertical-align:super;line-height:0}.equation .state-marker{font-size:.85em;margin-left:1px;font-weight:600}.equation .state-marker.gas{color:#58a6ff}.equation .state-marker.precipitate{color:#d29922}.equation .el-with-valence{position:relative;display:inline}.equation .el-with-valence .valence{position:absolute;bottom:100%;left:50%;transform:translate(-50%,2px);font-size:11px;color:#d29922;font-weight:600;font-family:SF Mono,Menlo,Consolas,monospace;white-space:nowrap;pointer-events:none}.equation .el-with-valence .el{display:inline}.equation .arrow-double{display:inline-flex;flex-direction:column;align-items:center;margin:0 12px;line-height:1;vertical-align:middle}.equation .arrow-double .arrow-top,.equation .arrow-double .arrow-bot{font-size:12px;color:var(--muted);font-family:-apple-system,PingFang SC,sans-serif;min-height:.7em;line-height:1.2}.equation .arrow-double .arrow-mid{letter-spacing:-2px;color:var(--muted)}.canvas-wrap{padding:8px;overflow-x:auto}.equation-canvas{display:block;max-width:100%}.result{padding:12px 14px;border-radius:6px;word-break:break-word}.result.ok{background:#ffffff05;color:var(--text);border:1px solid var(--border)}.result.error{background:#f851491a;color:var(--err);border:1px solid rgba(248,81,73,.3)}.result-meta{margin-top:8px;color:var(--muted);font-size:13px;font-family:SF Mono,Menlo,Consolas,monospace}footer{margin-top:32px;text-align:center;color:var(--muted);font-size:13px}footer a{color:var(--muted)}