/* formula-viz.css — living diagram cards (see formula-viz.js) */
.fv-card{--fv-navy:#16294a;--fv-navy2:#2c4478;--fv-gold:#F5A623;--fv-gold2:#e8941e;--fv-teal:#0ea5a4;--fv-ink:#1b2333;--fv-mute:#5c6b86;--fv-line:#d8e1ee;--fv-pen:#1d4ed8;--fv-hl:#fff29a;--fv-hlg:#c9f2b4;
  font-family:Poppins,system-ui,sans-serif;color:var(--fv-ink);background:#fff;border:1px solid var(--fv-line);border-radius:24px;display:grid;grid-template-columns:minmax(280px,.78fr) minmax(0,1.4fr);overflow:hidden;box-shadow:0 18px 44px -32px rgba(22,41,74,.5);position:relative;min-height:400px;text-align:left}
.fv-card *{box-sizing:border-box}
.fv-txt{padding:26px 26px 24px;display:flex;flex-direction:column;gap:10px;min-width:0;background:#fffdf7;background-image:linear-gradient(rgba(43,68,120,.07) 1px,transparent 1px);background-size:100% 30px;background-position:0 16px;border-right:1px solid var(--fv-line);position:relative}
.fv-txt>*{position:relative}
.fv-num{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fv-mute)}
.fv-num i{font-style:normal;width:24px;height:24px;border-radius:8px;background:var(--fv-navy);color:#fff;display:grid;place-items:center;font-size:12px}
.fv-name{margin:0;font-size:21px;font-weight:800;color:var(--fv-navy);line-height:1.15}
.fv-f{font-size:30px;color:var(--fv-navy);line-height:1.2;margin:4px 0 0;min-height:44px;display:inline-block;padding:4px 12px 2px;background:linear-gradient(104deg,transparent 2%,var(--fv-hl) 3%,var(--fv-hl) 97%,transparent 98%);border-radius:4px;align-self:flex-start}
.fv-f .katex{font-size:1.05em}
.fv-tex{font-family:"STIX Two Text","Times New Roman",serif}
.fv-hw{font-family:Caveat,"Segoe Print","Bradley Hand",cursive;font-weight:600;color:var(--fv-pen);font-size:21px;line-height:1.15}
.fv-note{transform:rotate(-1.5deg);margin-top:-2px}
.fv-story{font-size:15px;line-height:30px;color:#33456a;margin:0}
.fv-story b{color:var(--fv-navy);font-weight:600}
.fv-hl{background:linear-gradient(104deg,transparent 2%,var(--fv-hlg) 3%,var(--fv-hlg) 97%,transparent 98%);padding:1px 5px;margin:0 -2px;border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.fv-star{color:#e5484d;margin-right:4px}
.fv-exbtn{margin-top:auto;align-self:flex-start;font-family:inherit;font-size:13px;font-weight:700;color:var(--fv-navy);background:#fff;border:1.5px solid var(--fv-line);border-radius:12px;padding:9px 16px;cursor:pointer;display:inline-flex;gap:7px;align-items:center;box-shadow:0 4px 12px -8px rgba(22,41,74,.4)}
.fv-exbtn:hover{border-color:var(--fv-gold)}
.fv-viz{position:relative;background:radial-gradient(120% 90% at 50% 0%,#ffffff,#e9eff8);display:flex;flex-direction:column;justify-content:center;padding:18px 18px 76px;min-height:380px}
.fv-viz svg{width:100%;height:auto;max-height:330px;display:block;overflow:visible}
.fv-viz .lbl{font-family:Poppins,sans-serif;font-size:11px;font-weight:700;fill:#5c6b86;letter-spacing:.04em}
.fv-viz .mono{font-family:"STIX Two Text","Times New Roman",serif;font-size:14px;fill:#16294a}
.fv-viz .big{font-family:"STIX Two Text","Times New Roman",serif;font-size:19px;font-weight:700;fill:#16294a}
.fv-ctrls{position:absolute;left:16px;right:16px;bottom:14px;background:rgba(255,255,255,.88);backdrop-filter:blur(6px);border:1px solid var(--fv-line);border-radius:14px;padding:8px 12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;box-shadow:0 8px 20px -14px rgba(22,41,74,.5)}
.fv-ctrls:empty{display:none}
.fv-ctrls label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--fv-navy2);flex:1;min-width:190px}
.fv-ctrls label span{font-family:"STIX Two Text",serif;font-size:15px;font-weight:400;color:var(--fv-gold2);white-space:nowrap}
.fv-ctrls input[type=range]{flex:1;accent-color:var(--fv-gold);min-width:80px}
.fv-seg{display:flex;gap:4px;flex-wrap:wrap}
.fv-seg button{font-family:inherit;font-size:11.5px;font-weight:700;border:1px solid var(--fv-line);background:#fff;color:var(--fv-mute);border-radius:999px;padding:4px 10px;cursor:pointer}
.fv-seg button.on{background:var(--fv-navy);color:#fff;border-color:var(--fv-navy)}
.fv-paused{position:absolute;right:12px;top:10px;font-size:10.5px;font-weight:700;color:var(--fv-mute);background:#fff;border:1px solid var(--fv-line);border-radius:999px;padding:3px 9px;opacity:0;pointer-events:none}
.fv-card.fv-off .fv-paused{opacity:1}
/* example face */
.fv-ex{position:absolute;inset:0;background:#fff;padding:26px 30px;display:none;flex-direction:column;gap:12px;overflow:auto;z-index:3}
.fv-card.example .fv-ex{display:flex}
.fv-q{font-family:"STIX Two Text","Times New Roman",serif;font-size:19px;line-height:1.5;color:var(--fv-ink);background:#f3f6fb;border-left:4px solid var(--fv-gold);border-radius:0 12px 12px 0;padding:12px 16px;max-width:70ch}
.fv-q .fv-ql{font-family:Poppins,sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fv-gold2);display:block;margin-bottom:4px;font-weight:700}
.fv-sol{display:none;max-width:70ch}.fv-ex.open .fv-sol{display:block}
.fv-hub{display:grid;grid-template-columns:max-content max-content minmax(0,1fr) max-content;column-gap:.6em;row-gap:.55em;align-items:baseline;font-size:20px;margin:6px 0 4px}
.fv-hub .l{justify-self:end}.fv-hub .e{color:#9aa1b3}.fv-hub .r{justify-self:start}
.fv-hub .z{justify-self:end;color:var(--fv-mute);font-style:italic;font-size:13px;font-family:Poppins,sans-serif;white-space:nowrap}
.fv-final{margin-top:10px;background:var(--fv-navy);color:#fff;padding:9px 16px;border-radius:12px;font-size:16.5px;line-height:1.5;display:inline-block}
.fv-final .lab{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#ffd88a;margin-right:10px}
.fv-final .katex{color:#fff}
.fv-row{display:flex;gap:8px;margin-top:auto;padding-top:8px}
.fv-row button{font-family:inherit;font-size:13px;font-weight:700;border-radius:12px;padding:9px 16px;cursor:pointer;border:1.5px solid var(--fv-line);background:#fff;color:var(--fv-navy)}
.fv-row button.p{background:var(--fv-navy);color:#fff;border-color:var(--fv-navy)}
/* compact (inside a modal) and mobile: single column, diagram first */
.fv-card.fv-compact,.fv-card.fv-stack{grid-template-columns:1fr;min-height:0;border-radius:18px}
@media(max-width:900px){ .fv-card{grid-template-columns:1fr;min-height:0;border-radius:18px} }
.fv-card.fv-compact .fv-viz,.fv-card.fv-stack .fv-viz{order:-1;min-height:280px;padding:12px 12px 78px}
.fv-card.fv-compact .fv-viz svg,.fv-card.fv-stack .fv-viz svg{max-height:260px}
.fv-card.fv-compact .fv-txt,.fv-card.fv-stack .fv-txt{padding:16px 16px 18px;border-right:0;border-top:1px solid var(--fv-line)}
.fv-card.fv-compact .fv-f,.fv-card.fv-stack .fv-f{font-size:26px}
.fv-card.fv-compact .fv-story,.fv-card.fv-stack .fv-story{font-size:14.5px;line-height:28px}
.fv-card.fv-compact .fv-txt,.fv-card.fv-stack .fv-txt{background-size:100% 28px}
@media(max-width:900px){
  .fv-viz{order:-1;min-height:280px;padding:12px 12px 78px}
  .fv-viz svg{max-height:260px}
  .fv-txt{padding:16px 16px 18px;border-right:0;border-top:1px solid var(--fv-line);background-size:100% 28px}
  .fv-f{font-size:26px}.fv-story{font-size:14.5px;line-height:28px}
  .fv-hub{font-size:17px;grid-template-columns:max-content max-content minmax(0,1fr)}
  .fv-hub .z{grid-column:1/-1;justify-self:start;padding-left:1.4em;margin-top:-4px;white-space:normal}
  .fv-ex{padding:18px 16px}
}
@media (prefers-reduced-motion:reduce){ .fv-note{transform:none} }
/* night mode hook (Formula Mastery) */
body.night-mode .fv-card{background:#172036;border-color:#243150}
body.night-mode .fv-txt{background:#1b2540;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px);border-color:#243150}
body.night-mode .fv-name,body.night-mode .fv-f,body.night-mode .fv-story b{color:#e5e9f2}
body.night-mode .fv-f{background:linear-gradient(104deg,transparent 2%,rgba(245,166,35,.28) 3%,rgba(245,166,35,.28) 97%,transparent 98%)}
body.night-mode .fv-story{color:#c9d4e8}
body.night-mode .fv-hl{background:linear-gradient(104deg,transparent 2%,rgba(14,165,164,.35) 3%,rgba(14,165,164,.35) 97%,transparent 98%)}
body.night-mode .fv-viz{background:radial-gradient(120% 90% at 50% 0%,#1f2b48,#141c30)}
body.night-mode .fv-ctrls{background:rgba(23,32,54,.9);border-color:#243150}
body.night-mode .fv-ctrls label{color:#c9d4e8}
body.night-mode .fv-seg button{background:#1b2540;color:#9fb0cc;border-color:#2d3b5c}
body.night-mode .fv-exbtn,body.night-mode .fv-row button{background:#1b2540;color:#e5e9f2;border-color:#2d3b5c}
body.night-mode .fv-ex{background:#172036;color:#e5e9f2}
body.night-mode .fv-q{background:#1b2540;color:#e5e9f2}
body.night-mode .fv-hub{color:#e5e9f2}