/* Mathvelo shared header menu + footer rules. Loaded on every page. */
.sx-nav .sx-app{display:inline-flex;align-items:center;gap:6px;border:1.5px solid #d9ccf7;color:#5b21b6;background:#faf7ff;border-radius:10px;margin-left:6px}
.sx-nav .sx-app svg{width:15px;height:15px}
.sx-nav .sx-app:hover{background:#ede9fe;color:#4c1d95}
@media(max-width:820px){.sx-nav .sx-app{margin:4px 0}}
.mvf{margin-top:64px;background:#0f0a26;color:#cfc7ee;position:relative;overflow:hidden}
.mvf:before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 12% 0,rgba(124,58,237,.32),transparent 70%),radial-gradient(50% 45% at 95% 100%,rgba(217,70,239,.18),transparent 70%);pointer-events:none}
.mf-w{position:relative;max-width:1180px;margin:0 auto;padding:0 20px}
.mf-cta{position:relative;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(90deg,#7c3aed59,#d946ef38)}
.mf-ctw{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;padding-top:26px;padding-bottom:26px}
.mf-ctw b{display:block;font:800 20px Manrope,sans-serif;color:#fff}
.mf-ctw span{font-size:14px;color:#d9d0f5}
.mf-q{display:flex;gap:8px;flex:1 1 340px;max-width:520px;padding:6px;border-radius:16px;background:#ffffff1a;border:1px solid rgba(255,255,255,.22)}
.mf-q input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font:600 15px JetBrains Mono,ui-monospace,monospace;padding:10px 12px}
.mf-q input::placeholder{color:#ffffff80}
.mf-q button{all:unset;cursor:pointer;padding:10px 22px;border-radius:12px;background:#fff;color:#4c1d95;font:800 14.5px Manrope,sans-serif}
.mf-main{display:grid;grid-template-columns:minmax(240px,1.1fr) 3fr;gap:44px;padding-top:44px;padding-bottom:30px}
.mf-brand p{margin:14px 0 18px;font-size:14.5px;line-height:1.65;color:#b9b0dd;max-width:340px}
.mf-brand .sx-logo{color:#fff}
.mf-brand .mv-store{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin:0}
.mf-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.mf-pills span{padding:4px 10px;border-radius:99px;border:1px solid rgba(255,255,255,.16);background:#ffffff0d;font:700 11.5px Manrope,sans-serif;color:#d9d0f5}
.mf-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.mf-g summary{list-style:none;display:flex;align-items:center;gap:9px;margin:0 0 12px;font:800 13px Manrope,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#fff;cursor:default}
.mf-g summary::-webkit-details-marker{display:none}
.mf-g summary i{display:grid;place-items:center;min-width:26px;height:26px;padding:0 5px;border-radius:8px;background:linear-gradient(135deg,#7c3aed,#d946ef);font:800 11px JetBrains Mono,monospace;font-style:normal;color:#fff;text-transform:none;letter-spacing:0}
.mf-g ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.mf-g a{color:#b9b0dd;text-decoration:none;font-size:13.5px;line-height:1.4;transition:color .15s,padding .15s}
.mf-g a:hover,.mf-g a:focus-visible{color:#fff;padding-left:4px}
.mf-mid{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;padding-top:18px;padding-bottom:18px;border-top:1px solid rgba(255,255,255,.1)}
.mf-mid nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.mf-mid a{color:#e9e1ff;text-decoration:none;font:700 13.5px Manrope,sans-serif}
.mf-mid a:hover{color:#fff;text-decoration:underline}
.mf-up{padding:7px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.2)}
.mf-low{display:flex;flex-direction:column;gap:12px;padding-bottom:30px}
.mf-disc summary{cursor:pointer;font:700 12.5px Manrope,sans-serif;color:#a79dd0;list-style:none}
.mf-disc summary::-webkit-details-marker{display:none}
.mf-disc summary:after{content:" +"}
.mf-disc[open] summary:after{content:" \2212"}
.mf-disc p{margin:8px 0 0;font-size:12px;line-height:1.65;color:#8f85b8}
.mf-c{font-size:12.5px;color:#8f85b8}
@media(max-width:1000px){.mf-main{grid-template-columns:1fr;gap:26px}}
@media(max-width:820px){.mf-cols{grid-template-columns:1fr;gap:0}.mf-g{border-top:1px solid rgba(255,255,255,.1);padding:14px 0}.mf-g summary{margin:0;cursor:pointer;justify-content:flex-start}.mf-g summary:after{content:"+";margin-left:auto;font-size:18px;color:#a79dd0}.mf-g[open] summary:after{content:"\2212"}.mf-g[open] summary{margin-bottom:12px}.mf-g[open] ul{padding-left:35px}}
.mf-brand .mv-sb,.ap-act .mv-sb{flex:0 0 auto!important;min-height:0;justify-content:flex-start}

/* mega-menu base */
.mx{position:static}
.mxb{padding:9px 14px;border-radius:12px;font:800 14.5px Manrope,sans-serif;color:var(--mut);background:none;border:0;cursor:pointer}
.mxb i{font-style:normal;font-size:11px}
.mxb:hover,.mx.open .mxb,.mx:focus-within .mxb{color:var(--a1);background:color-mix(in srgb,var(--a1) 10%,transparent)}
.mxp{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;width:auto;grid-template-columns:repeat(4,1fr);gap:6px 22px;padding:22px 24px 16px;border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:0 40px 90px -30px #0f0f3c8c;max-height:78vh;overflow:auto}
.mx:hover .mxp,.mx.open .mxp,.mx:focus-within .mxp{display:grid}
.mxc h3{margin:0 0 6px;font:800 11.5px Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--a1)}
.mxc ul{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:1px}
.mxc a{display:block;padding:5px 8px;margin:0 -8px;border-radius:8px;font:600 13.5px Manrope,sans-serif;color:var(--txt);text-decoration:none}
.mxc a:hover{background:color-mix(in srgb,var(--a1) 10%,transparent);color:var(--a1)}
.mxc a.sx-soon{color:var(--mut)}
@media(max-width:1300px){.mx{width:100%}.mxb{width:100%;text-align:left;padding:11px 12px}.mxp{position:static;display:none;width:auto;max-height:none;box-shadow:none;border:0;padding:4px 6px 8px;grid-template-columns:1fr 1fr;background:transparent}.mx.open .mxp,.mx:focus-within .mxp{display:grid}.mx:hover .mxp{display:none}.mx.open:hover .mxp{display:grid}}
@media(max-width:560px){.mxp{grid-template-columns:1fr}}
/* ---- menu: whole list reachable, readable hover ---- */
@media(min-width:1301px){.mx .mxp{max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain}}
@media(max-width:1300px){#sxm:checked~.sx-nav{max-height:calc(100vh - 92px);max-height:calc(100dvh - 92px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}}
.sx-nav .mxb{transition:background .15s,color .15s}
.sx-nav .mxb:hover,.sx-nav .mx.open .mxb,.sx-nav .mx:focus-within .mxb{color:#4c1d95!important;background:#ede9fe!important}
html[data-mv-dark="1"] .sx-nav .mxb:hover,html[data-mv-dark="1"] .sx-nav .mx.open .mxb,html[data-mv-dark="1"] .sx-nav .mx:focus-within .mxb{color:#fff!important;background:rgba(167,139,250,.30)!important}
.sx-nav .mxb:focus-visible{outline:2px solid #7c3aed;outline-offset:2px}
.mxc a:hover,.mxc a:focus-visible{color:#4c1d95;background:#ede9fe}
html[data-mv-dark="1"] .mxc a:hover,html[data-mv-dark="1"] .mxc a:focus-visible{color:#fff;background:rgba(167,139,250,.28)}

/* ---- "Why students get stuck" cards ---- */
#why-students-struggle .mvp-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
#why-students-struggle .mvp-c{position:relative;display:flex;flex-direction:column;min-width:0;padding:24px 20px 20px;border-radius:20px;border:1px solid color-mix(in srgb,currentColor 12%,transparent);background:linear-gradient(180deg,color-mix(in srgb,#6d4ad8 8%,transparent),color-mix(in srgb,currentColor 3%,transparent) 55%);box-shadow:0 18px 36px -28px rgba(60,30,140,.5);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
#why-students-struggle .mvp-c:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#6d4ad8,#c026d3)}
#why-students-struggle .mvp-c:hover{transform:translateY(-3px);box-shadow:0 24px 40px -26px rgba(60,30,140,.6)}
#why-students-struggle .mvp-n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:800 15px system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#6d4ad8,#c026d3);box-shadow:0 8px 16px -8px rgba(109,74,216,.8)}
#why-students-struggle h3{margin:14px 0 2px;font-size:19px;line-height:1.25;letter-spacing:-.01em}
#why-students-struggle .mvp-s{margin:0 0 10px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
#why-students-struggle .mvp-l{margin:0 0 14px;font-size:14.5px;line-height:1.55;opacity:.88}
#why-students-struggle .mvp-c ol,#why-students-struggle .mvp-c ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
#why-students-struggle .mvp-c li{display:grid;gap:8px;padding:12px 12px 12px 14px;border-radius:14px;border-left:3px solid #8b6cf0;background:color-mix(in srgb,currentColor 4.5%,transparent);font-size:14.5px;line-height:1.45}
#why-students-struggle .mvp-try{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:100%;min-height:38px;padding:7px 12px;border-radius:999px;border:1px solid color-mix(in srgb,#6d4ad8 40%,transparent);background:color-mix(in srgb,#6d4ad8 9%,transparent);color:inherit;text-decoration:none;font:600 12.5px ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.35;cursor:pointer;overflow-wrap:anywhere;transition:background .15s,transform .15s}
#why-students-struggle .mvp-try:hover{background:color-mix(in srgb,#6d4ad8 20%,transparent);transform:translateX(2px)}
#why-students-struggle .mvp-try:focus-visible{outline:2px solid #6d4ad8;outline-offset:2px}
#why-students-struggle .mvp-try i{flex:none;font-style:normal;font-weight:800;color:#6d4ad8}
html[data-mv-dark="1"] #why-students-struggle .mvp-try i{color:#c4b5fd}
html[data-mv-dark="1"] #why-students-struggle .mvp-c li{border-left-color:#a78bfa}
#why-students-struggle .mvp-th{margin:16px 0 0;padding:14px 16px;border-radius:14px;border-left:4px solid #6d4ad8;background:color-mix(in srgb,#6d4ad8 9%,transparent);font-size:15.5px;line-height:1.55}
#why-students-struggle .mvp-t{margin-top:26px}
#why-students-struggle .mvp-t h3{margin:20px 0 6px;font-size:18px}
#why-students-struggle .mvp-t p{margin:0 0 10px;line-height:1.65}
@media(max-width:900px){#why-students-struggle .mvp-g{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){#why-students-struggle .mvp-c,#why-students-struggle .mvp-try{transition:none}#why-students-struggle .mvp-c:hover,#why-students-struggle .mvp-try:hover{transform:none}}

/* ---- Studio calculator shortcut on tool pages ---- */
.mvst{max-width:760px;margin:20px auto 0;padding:0 16px}
.mvst a{display:flex;align-items:center;gap:14px;min-height:60px;padding:12px 16px;border-radius:16px;border:1px solid color-mix(in srgb,#6d4ad8 35%,transparent);background:linear-gradient(135deg,color-mix(in srgb,#6d4ad8 12%,transparent),color-mix(in srgb,#c026d3 8%,transparent));color:inherit;text-decoration:none;transition:transform .15s,box-shadow .15s}
.mvst a:hover{transform:translateY(-2px);box-shadow:0 14px 28px -20px rgba(80,40,180,.7)}
.mvst a:focus-visible{outline:2px solid #6d4ad8;outline-offset:2px}
.mvst svg{flex:none;color:#6d4ad8}
html[data-mv-dark="1"] .mvst svg{color:#c4b5fd}
.mvst span{display:grid;gap:2px;min-width:0}
.mvst b{font-size:15px}
.mvst small{font-size:13px;opacity:.75;line-height:1.35}
.mvst i{margin-left:auto;font-style:normal;font-weight:800;font-size:18px}
@media(prefers-reduced-motion:reduce){.mvst a{transition:none}.mvst a:hover{transform:none}}

#scnSrc{position:relative;margin:12px 0;padding:10px 12px;border-radius:10px;border:1px solid #dccffb;border-left:5px solid #7c3aed;background:#fff;color:#3b2f63}
#scnSrc small{display:block;font:700 11px Manrope,sans-serif;letter-spacing:.08em;color:#6b6490;margin-bottom:6px}
#scnSrc img{display:block;max-width:100%;max-height:220px;border-radius:6px;margin:0 auto;object-fit:contain}
#scnSrc button{position:absolute;top:6px;right:8px;border:0;background:none;font:700 20px/1 sans-serif;color:#6b6490;cursor:pointer;min-width:32px;min-height:32px}
html[data-mv-dark="1"] #scnSrc{background:#1c1830;border-color:#3b3466;color:#e8e4fb}
html[data-mv-dark="1"] #scnSrc small,html[data-mv-dark="1"] #scnSrc button{color:#b9b2dc}

.mvx-take{margin:28px auto 8px;max-width:1100px}
.mvx-take p{margin:0 0 12px;padding:12px 16px;border-left:4px solid #6d4ad8;border-radius:0 12px 12px 0;background:color-mix(in srgb,#6d4ad8 7%,transparent);line-height:1.6}
.mvx-take p b{color:#5b3fe0}
html[data-mv-dark="1"] .mvx-take p b{color:#c4b5fd}
.mvx-take .mvx-t{border-left-color:#0ea5e9;background:color-mix(in srgb,#0ea5e9 7%,transparent);font-size:.95em}
/* mobile only: home calculator card runs edge to edge */
@media(max-width:700px){
html body #solver.hm-tool{padding-left:0;padding-right:0}
html body #solver .hm-card{border-radius:0!important;border-left:0;border-right:0;box-shadow:none;max-width:100%}
html body #solver #svIn{padding-left:4px;padding-right:4px}
html body #solver .sv-box{padding-left:6px;padding-right:6px;border-radius:10px}
}

/* ===== One font on the whole site + crisp headings and FAQ (no gradient text, no blur) ===== */
html body,html body *:not(.katex):not(.katex *):not(.cz-app):not(.cz-app *){font-family:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important}
html body main section.sx-sec h2,html body main .sx-faq h2,html body .sx-faq h2,html body main .mv-band h2,html body main .ap-id h2,html body main .pl-h,html body .mv-band#final h2{
 background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;
 -webkit-text-fill-color:currentColor!important;text-shadow:none!important;filter:none!important;opacity:1!important;
 font-weight:800!important;letter-spacing:-.01em!important;line-height:1.25!important;font-size:clamp(22px,2.4vw,28px)!important;text-align:left!important;margin-left:0!important;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
html body main section.sx-sec[data-s] h2,html body .sx-faq h2,html body main .pl-h{color:#14122e!important}
html body .sx-faq{content-visibility:visible!important;contain-intrinsic-size:none!important}
html body .sx-faq,html body .sx-faq *{text-shadow:none!important;filter:none!important;opacity:1!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html body .sx-faq summary{color:#1c1a3c!important;font-weight:800!important}
html body .sx-faq details[open] summary{color:#15803d!important}
html body .sx-faq details p,html body .sx-faq details li,html body .sx-faq>p{color:#2d2b55!important;font-size:16px!important;line-height:1.7!important;font-weight:500!important}
html body .sx-faq details>*{transform:none!important;animation:none!important}

/* ===== One heading style for every section (replaces the 17 per-section H2 variants) ===== */
html body main section.sx-sec[data-s] h2{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:12px!important;width:auto!important;max-width:none!important;padding:0 0 16px!important;margin:0 0 14px!important;border:0!important;border-radius:0!important;background:none!important;position:relative!important;text-shadow:none!important;min-height:0!important}
html body main section.sx-sec[data-s] h2::before{content:"0" counter(sec)!important;position:static!important;display:inline-block!important;flex:none!important;width:auto!important;height:auto!important;min-width:0!important;margin:0!important;padding:5px 12px!important;border:0!important;border-radius:99px!important;background:linear-gradient(120deg,var(--ac,#7c3aed),var(--ac2,#06b6d4))!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font:800 11.5px/1 Manrope,sans-serif!important;letter-spacing:.08em!important;text-transform:none!important;transform:none!important;box-shadow:none!important}
html body main section.sx-sec[data-s] h2::after{content:""!important;display:block!important;position:absolute!important;left:0!important;bottom:0!important;top:auto!important;right:auto!important;flex:none!important;width:64px!important;min-width:0!important;height:4px!important;border-radius:4px!important;background:linear-gradient(90deg,var(--ac,#7c3aed),var(--ac2,#06b6d4))!important;transform:none!important;box-shadow:none!important}
html body main section.sx-sec[data-s]{counter-increment:sec}

/* related guides / calculators block */
html body .mv-rel .mv-rl{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
html body .mv-rel .mv-rl a{display:flex;flex-direction:column;gap:4px;height:100%;padding:14px 16px;border-radius:16px;border:1px solid #ddd6fe;background:#faf9ff;text-decoration:none;color:#1c1a3c;box-sizing:border-box}
html body .mv-rel .mv-rl a:hover{border-color:#7c3aed;background:#f3efff}
html body .mv-rel .mv-rl b{font-weight:800;font-size:15px;line-height:1.35}
html body .mv-rel .mv-rl span{font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#6b6890}

/* solver buttons: Solve and AI solve match in size and shape */
html body .sv-bar>.sv-go:not(:has(svg)),html body #svIn .sv-bar>#svGo,html body #slvHost .sv-bar>#svGo{height:44px!important;min-height:44px!important;padding:0 24px!important;font:800 15px/1 Manrope,system-ui,sans-serif!important;border-radius:14px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;min-width:104px!important}
html body .sv-bar>#svAsk,html body #slvHost .sv-bar>#svAsk{height:44px!important;min-height:44px!important;padding:0 18px!important;font:800 15px/1 Manrope,system-ui,sans-serif!important;border-radius:14px!important;display:inline-flex!important;align-items:center!important;white-space:nowrap!important}
html body .nb-add{flex-wrap:wrap}
html body .nb-add .nb-chip.nb-ai{background:linear-gradient(120deg,#6d28d9,#2563eb)!important;color:#fff!important;border-color:transparent!important}
html body #svIn .sv-bar,html body #slvHost .sv-bar{flex-wrap:wrap!important;gap:8px!important;justify-content:flex-end!important}
html body #svIn .sv-bar>#svAsk,html body #slvHost .sv-bar>#svAsk{width:auto!important;min-width:116px!important;flex:1 1 116px!important;justify-content:center!important;overflow:visible!important}
html body #svIn .sv-bar>#svGo,html body #slvHost .sv-bar>#svGo{flex:1 1 116px!important;margin-left:0!important}

/* poster images that replaced never-played video tags keep the same box */
.cp-fig.vv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fr-vf img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.fr-vf.mob img{aspect-ratio:720/1304}
.sx-sec .pg-vid img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media(max-width:900px){html body .cp-fig.vv{width:100%!important;max-width:560px!important;margin-left:auto!important;margin-right:auto!important}}
@media(max-width:900px){html body .cp-fg{width:100%!important}}

/* footer CTA Solve button matches solver Solve button */
html body .mf-q button{all:unset!important;box-sizing:border-box!important;cursor:pointer!important;height:44px!important;min-width:104px!important;padding:0 22px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border-radius:14px!important;background:linear-gradient(135deg,#6d5efc,#1fb2f5)!important;color:#fff!important;font:800 15px/1 Manrope,sans-serif!important;box-shadow:0 10px 22px -12px rgba(109,94,252,.8)!important}
html body .mf-q{align-items:center!important}

/* shared footer store badges (same on every page) */
.mv-sb{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:9px;background:#14102e;color:#fff;text-decoration:none;font:800 16px/1.1 Manrope,sans-serif;border:1px solid #3b3366;transition:.18s}
.mv-sb:hover{transform:translateY(-2px);background:#221a4d}
.mv-sb svg{width:26px;height:26px;flex:none}
.mv-sb small{display:block;font:600 9.5px Manrope,sans-serif;letter-spacing:.06em;opacity:.8;margin-bottom:2px}
.mv-store.sm .mv-sb{padding:6px 12px 6px 9px;font-size:13.5px}
.mv-store.sm .mv-sb svg{width:20px;height:20px}
.mv-sb{flex:1 1 150px;justify-content:center}
.mv-sb[data-store]{cursor:pointer}
.mv-sb[data-store]:not([data-live]):after{content:"Soon";margin-left:4px;padding:2px 6px;border-radius:5px;background:#fde68a;color:#78350f;font:800 9px Manrope,sans-serif;letter-spacing:.06em;text-transform:uppercase}
/* AI helper row inside Create Graph / Create Diagram */
.pm-aibar{margin:0 0 12px}
.pm-airow{display:flex;gap:8px;align-items:stretch}
.pm-aiin{flex:1 1 auto;min-width:0;font:inherit;font-size:15px;padding:10px 12px;border-radius:10px;border:1px solid rgba(124,58,237,.35);background:rgba(124,58,237,.06);color:inherit}
.pm-aiin:focus{outline:2px solid #7c3aed;outline-offset:1px}
.pm-aibtn{flex:0 0 auto;white-space:nowrap}
.pm-aibtn[disabled]{opacity:.6;cursor:progress}
.pm-aist{margin:6px 0 0;font-size:13px;line-height:1.4;opacity:.85;min-height:0}
.pm-aist:empty{display:none}
@media(max-width:480px){.pm-airow{flex-direction:column}.pm-aibtn{min-height:44px}}
/* phone: the tool row must never hide buttons on the left (flex-end + scroll cannot be reached) */
@media(max-width:640px){
html body #solver .sv-box .sv-bar,html body .sv-box .sv-bar{justify-content:flex-start!important}
html body #solver .sv-box .sv-bar #svStudioB,html body .sv-box .sv-bar #svStudioB{margin-left:auto}
html body #solver .sv-box .sv-bar>#svGo,html body .sv-box .sv-bar>#svGo{position:sticky;right:0;z-index:2}
}
@supports (justify-content:safe flex-end){@media(max-width:640px){
html body #solver .sv-box .sv-bar,html body .sv-box .sv-bar{justify-content:safe flex-end!important}
html body #solver .sv-box .sv-bar #svStudioB,html body .sv-box .sv-bar #svStudioB{margin-left:0}
}}
/* practice test: hint, copy, print, share */
.qz .qz-tools{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:14px 0 4px}
.qz .qz-tools button{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(109,74,216,.35);background:transparent;color:inherit;font:600 13.5px inherit;font-family:inherit;cursor:pointer}
.qz .qz-tools button:hover{background:rgba(109,74,216,.08)}
.qz .qz-ex.hint{border-color:rgba(217,119,6,.4);background:rgba(245,158,11,.1)}
.qz .qz-act .qz-btn.ghost{margin-right:8px}

/* video explainer: concept, trap, recap and your-turn scenes */
.vs-x{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;text-align:center;padding-top:0}
.vs-x .vs-ic{display:none}
.vs-x p{font-size:.82em;line-height:1.3;margin-top:-6px}
.vs-x p{margin:0;max-width:34em}
.vs-x2{margin-top:6px;max-width:34em;padding:10px 14px;border-radius:14px;background:rgba(124,92,255,.12);border:1px solid rgba(124,92,255,.28);display:flex;flex-direction:column;gap:4px;text-align:left}
.vs-x2 b{font-size:.72em;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.vs-x2 span{font-size:.95em;line-height:1.45}
.vs-tm.vs-x .vs-t{width:100%;max-width:34em;text-align:left;display:flex;gap:10px;align-items:flex-start}
.vs-tm.vs-x .vs-t b{min-width:1.6em}

/* cards without media: tag-only header */
.cl-v.cl-nv{aspect-ratio:auto;display:flex;align-items:center;padding:14px 14px 0;background:transparent;overflow:visible}
.cl-v.cl-nv:after{display:none}
.cl-v.cl-nv .cl-tag{position:static;background:#6d28d91f;color:#4c1d95;backdrop-filter:none}
:root[data-theme=dark] .cl-v.cl-nv .cl-tag,html.dark .cl-v.cl-nv .cl-tag{background:#a78bfa2e;color:#ddd6fe}

/* simple hero: only breadcrumb + h1 (all pages except home) */
.mv-h1{background:transparent;border-bottom:0;margin:0}
.mv-h1w{max-width:1100px;margin:0 auto;padding:22px max(16px,env(safe-area-inset-left,0px)) 20px max(16px,env(safe-area-inset-left,0px))}
.mv-h1 .cp-bc{display:block;margin:0 0 8px;font-size:13px;color:var(--mut,#5b6784)}
.mv-h1 .cp-bc a{color:var(--mut,#5b6784);text-decoration:none}.mv-h1 .cp-bc a:hover{text-decoration:underline}
.mv-h1 .cp-bc span{color:var(--txt,#0f1b33)}
.mv-h1 h1{margin:0;font-size:clamp(24px,4.2vw,38px);line-height:1.18;letter-spacing:-.01em;color:var(--txt,#0f1b33);text-wrap:balance;max-width:26em}
.mv-h1 h1 span{color:inherit}
.mv-intro{max-width:1100px;margin:0 auto;padding:16px max(16px,env(safe-area-inset-left,0px)) 0}
.mv-intro p{margin:0 0 10px;max-width:62em;font-size:16px;line-height:1.65;color:var(--txt,#0f1b33)}
/* sticky side/bars only on the Learn page */
.sx-toc{position:static!important;max-height:none!important}
.sv-jump{position:static!important}
.mv-side,.sx-fig,.fcf-in,.qe-in{position:static!important;top:auto!important;max-height:none!important}

/* heroes centred */
.mv-h1w{text-align:center}
.mv-h1 h1{margin-left:auto;margin-right:auto}
.mv-h1 .cp-bc{text-align:center}
.mv-intro{text-align:center}.mv-intro p{margin-left:auto;margin-right:auto}
.cl-v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* crisp text everywhere (no colour or layout change) */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;text-size-adjust:100%}
h1,h2,h3,h4,p,li,a,button,label,span,b,strong{-webkit-font-smoothing:antialiased}
.rl-t b,.vs-in .vs-q,.hx-t h1,.hx-t p{text-shadow:none!important}
.hx-gl,.sx-fl{filter:none}

/* inner-page hero: no own background, same colour as the page below; heading in the home font style */
.mv-h1{background:transparent!important;border-bottom:0!important}
.mv-h1 h1{font-weight:800;letter-spacing:-.03em}

/* body font = the device's own UI font (Segoe UI on Windows, San Francisco on iPhone/Mac, Roboto on Android): hinted by the OS, so always sharp */
@font-face{font-family:Manrope;font-weight:400 500;src:local("Segoe UI Variable Text"),local("Segoe UI")}
@font-face{font-family:Manrope;font-weight:600;src:local("Segoe UI Variable Text Semibold"),local("Segoe UI Semibold"),local("Segoe UI Bold")}
@font-face{font-family:Manrope;font-weight:700 800;src:local("Segoe UI Variable Text Bold"),local("Segoe UI Bold")}
/* advanced headings: Poppins (popular, modern geometric) + medium inner-page h1 */
@font-face{font-family:MvDisplay;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/poppins-500.woff) format("woff")}
@font-face{font-family:MvDisplay;font-style:normal;font-weight:600 800;font-display:swap;src:url(/assets/fonts/poppins-700.woff) format("woff")}
html body h1:not(.katex):not(.katex *):not(.cz-app):not(.cz-app *),html body h2:not(.katex):not(.katex *):not(.cz-app):not(.cz-app *),html body h3:not(.katex):not(.katex *):not(.cz-app):not(.cz-app *){font-family:MvDisplay,Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;letter-spacing:-.015em!important;line-height:1.18}
.mv-h1 h1{font-size:clamp(26px,5vw,42px);line-height:1.18;max-width:22em}
/* no sticky side blocks anywhere except the Learn page */
html body .mv-split .mv-side,html body .mv-split:has(.dm) .mv-side,html body .mv-side{position:static!important;top:auto!important;max-height:none!important}

/* no "On this page" table of contents on tool/info pages (only the Learn page keeps its side list) */
.sx-toc{display:none!important}
.sx-wrap:not(.one){grid-template-columns:minmax(0,820px)!important;justify-content:center}

/* content not boxed into a narrow column: full width with a side gutter (tool/info pages; Learn, home, app untouched) */
.sx-wrap:not(.one){grid-template-columns:minmax(0,1fr)!important;max-width:none!important;padding:0 clamp(16px,4.5vw,72px)!important}
.sx-wrap:not(.one) article,.sx-wrap:not(.one) .sx-sec{max-width:none!important;width:100%}
.sx-wrap:not(.one) .mvst,.sx-wrap:not(.one) .mvfb{max-width:none!important}
