:root{--bg: #0f172a;--panel: #1e293b;--text: #f1f5f9;--muted: #94a3b8;--accent: #38bdf8;--good: #10b981;--bad: #ef4444}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:radial-gradient(ellipse at top,#1e3a8a22,transparent 60%),radial-gradient(ellipse at bottom right,#be185d22,transparent 60%),var(--bg);color:var(--text)}.app{max-width:960px;margin:0 auto;padding:clamp(16px,4vw,32px) clamp(12px,3vw,24px) 64px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}h1{margin:0;font-size:clamp(18px,4.5vw,28px);letter-spacing:-.01em}.streak{display:flex;align-items:center;gap:8px;background:var(--panel);padding:8px 14px;border-radius:999px;border:1px solid #334155}.streak-flame{font-size:20px}.streak-count{font-size:22px;font-weight:700}.streak-text{color:var(--muted);font-size:13px}.prompt{color:var(--muted);margin:8px 0 32px}.equation{display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:center;gap:clamp(2px,1vw,16px);background:var(--panel);border:1px solid #334155;padding:clamp(14px,3vw,32px) clamp(4px,1vw,20px);border-radius:16px;margin-bottom:28px;overflow-x:auto}.species{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.5vw,14px);flex:1 1 0;min-width:0}.formula{font-size:clamp(13px,3.4vw,32px);font-family:"Cambria Math",STIX,Times New Roman,Georgia,serif;font-weight:500;letter-spacing:.02em;white-space:nowrap}.formula sub{font-size:.65em;vertical-align:-.2em}.formula sup{font-size:.65em;vertical-align:.6em}.formula .coef{font-weight:600;margin-right:.18em;color:var(--accent)}.op{display:flex;align-items:center;font-size:clamp(16px,4vw,32px);color:var(--muted);flex:0 0 auto}.op.arrow{color:var(--accent);font-size:clamp(18px,4.5vw,36px)}.drop-zone{width:100%;max-width:150px;height:clamp(34px,7vw,48px);border:2px dashed #475569;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#0f172a55;transition:all .12s ease}.drop-zone.over{border-color:var(--accent);background:#38bdf822}.drop-zone.correct{border-style:solid;border-color:var(--good);background:#10b98122}.drop-hint{color:var(--muted);font-size:13px;font-style:italic}.label{user-select:none;-webkit-user-select:none;font-size:clamp(10px,2.4vw,14px);font-weight:600;color:#fff;padding:clamp(4px,1.2vw,8px) clamp(8px,2vw,14px);border-radius:8px;box-shadow:0 2px 6px #0006;white-space:nowrap;touch-action:none;max-width:100%}.label.placed{overflow:hidden;text-overflow:ellipsis}.label-short{display:none}@media (max-width: 640px){.label-full{display:none}.label-short{display:inline}}.label.placed{box-shadow:0 2px 4px #0004}.label.locked{box-shadow:0 0 0 2px #10b981,0 2px 6px #0006}.label.dragging{transform:scale(1.05) rotate(-1.5deg);box-shadow:0 12px 24px #000a,0 0 0 1px #fff2;filter:brightness(.85)}.label:not(.locked):active{filter:brightness(.7);transform:scale(.96);box-shadow:0 1px 3px #0008 inset}.bank{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;background:var(--panel);border:1px solid #334155;padding:20px;border-radius:16px;min-height:78px;align-items:center;margin-bottom:24px}.bank-empty{color:var(--muted);font-style:italic}.actions{display:flex;justify-content:center}.btn{font-size:16px;font-weight:600;padding:12px 28px;border-radius:10px;border:none;cursor:pointer;transition:transform 80ms ease,opacity 80ms ease}.btn:disabled{opacity:.4;cursor:not-allowed}.btn:not(:disabled):active{transform:translateY(1px)}.btn.primary{background:var(--accent);color:#0f172a}.hint{text-align:center;margin-top:16px;color:var(--muted)}.hint.success{color:var(--good);font-weight:600}