/* Brand and model styles for Chemistrations. The shared styles read these variables. */
:root{--brand:#e5372b;--brand-t:#ffebe8;--hg1:rgba(224,64,122,.38);--hg2:rgba(123,63,228,.28);--hbg:#140a1f;--cta:#ffb23f;--em1:#ffb23f;--em2:#ff6a8a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--brand:#ff7a68;--brand-t:rgba(255,122,104,.14)}}
:root[data-theme="dark"]{--brand:#ff7a68;--brand-t:rgba(255,122,104,.14)}

/* hero and demo animations */
.heroart .bub{animation:rise 3.2s ease-in infinite;transform-box:fill-box;transform-origin:center}
.heroart .rot{transform-origin:400px 130px;animation:spin 30s linear infinite}
@keyframes rise{0%{transform:translateY(0);opacity:.9}100%{transform:translateY(-70px);opacity:0}}
.livefig .phliq{animation:phtint 5s linear infinite alternate}
.livefig .phmark{animation:phmove 5s linear infinite alternate}
@keyframes phmove{from{transform:translateX(0)}to{transform:translateX(240px)}}
@keyframes phtint{0%{fill:#d7191c}21%{fill:#f7941d}36%{fill:#f7e11e}50%{fill:#53b948}64%{fill:#17a6c8}79%{fill:#4a52c8}93%{fill:#7a2fa8}100%{fill:#5b1f8f}}

/* balance model */
.btn.ghost{background:transparent;color:var(--brand);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--brand)}
.bal-eq{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:12px 8px;padding:8px 0}
.bal-sp{display:flex;flex-direction:column;align-items:center;gap:8px}
.bal-step{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px}
.bal-step button{width:40px;height:40px;border-radius:50%;border:0;background:var(--brand-t);color:var(--brand);font-size:22px;font-weight:800;cursor:pointer;font-family:var(--f-body)}
.bal-step b{min-width:22px;text-align:center;font-family:var(--f-mono);font-size:18px}
.bal-f{font-family:var(--f-display);font-weight:800;font-size:26px}
.bal-sign{font-size:28px;font-weight:800;color:var(--ink-soft);padding-bottom:62px}
.bal-mid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:16px;align-items:center}
@media(max-width:700px){.bal-mid{grid-template-columns:1fr}.bal-sign{padding-bottom:60px}}
.bal-tab table{border-collapse:collapse;width:100%;font-family:var(--f-mono);font-size:14px}
.bal-tab th,.bal-tab td{padding:7px 10px;text-align:center;border-bottom:1px solid var(--line)}
.bal-tab th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.bal-tab tr.good td:last-child{color:var(--green);font-weight:800}
.bal-tab tr.bad td:last-child{color:var(--red);font-weight:800}
.stage.bal-ok{box-shadow:inset 0 0 0 3px var(--green)}