:root{
  --paper:#F3F4EF;--paper-2:#FAFBF7;--ink:#171B2E;--ink-soft:#3A4055;--ink-faint:#6B7186;
  --slate:#141A2E;--slate-2:#1B2238;--chalk:#F2F4EC;--chalk-soft:#AEB6C4;
  --gold:#D7A13B;--gold-deep:#B8842A;--teal:#1C9C92;--teal-deep:#157A72;
  --line:#D9DBD0;--line-soft:#E7E8DF;
  --shadow:0 1px 2px rgba(20,26,46,.05),0 8px 30px rgba(20,26,46,.06);
  --shadow-lg:0 30px 70px -30px rgba(20,26,46,.4);--rad:14px;--maxw:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Onest',system-ui,sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Spectral',Georgia,serif;font-weight:700;line-height:1.12;letter-spacing:-.01em;margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-family:'Onest';font-weight:700;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-deep);display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold)}
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:'Onest';font-weight:600;font-size:.97rem;padding:.85em 1.5em;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:transform .18s,box-shadow .18s,background .18s,color .18s}
.btn-primary{background:var(--gold);color:#221a08;box-shadow:0 8px 22px -8px rgba(215,161,59,.7)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(215,161,59,.8)}
.btn-ghost{background:transparent;border-color:rgba(242,244,236,.35);color:var(--chalk)}
.btn-ghost:hover{background:rgba(242,244,236,.08);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:var(--chalk)}
.btn-dark:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}

/* HEADER */
header.site{position:sticky;top:0;z-index:60;background:rgba(20,26,46,.86);backdrop-filter:blur(12px);border-bottom:1px solid rgba(242,244,236,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:.7em;color:var(--chalk);font-family:'Spectral';font-weight:700;font-size:1.18rem}
.brand .mark{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#1c1505;font-family:'Spectral';font-weight:800;font-size:1.25rem;box-shadow:0 6px 16px -6px rgba(215,161,59,.8)}
.brand small{display:block;font-family:'Onest';font-weight:500;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--chalk-soft);margin-top:-2px}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{color:var(--chalk-soft);font-weight:500;font-size:.93rem;padding:.5em .9em;border-radius:8px;transition:color .15s,background .15s}
.nav-links a:hover{color:var(--chalk);background:rgba(242,244,236,.06)}
.nav-cta{margin-left:14px}
.burger{display:none;background:none;border:none;cursor:pointer;width:42px;height:42px;color:var(--chalk)}
.burger svg{width:26px;height:26px}

/* HERO */
.hero{position:relative;background:var(--slate);color:var(--chalk);overflow:hidden;padding:84px 0 96px}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(242,244,236,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(242,244,236,.045) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(ellipse 90% 80% at 30% 30%,#000 40%,transparent 100%)}
.hero::after{content:"";position:absolute;right:-160px;top:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(28,156,146,.28),transparent 70%);filter:blur(8px)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}
.hero h1{font-size:clamp(2.4rem,5.2vw,4.3rem);font-weight:800;letter-spacing:-.025em}
.hero h1 .em{color:var(--gold);font-style:italic;font-weight:700}
.hero p.lead{font-size:1.16rem;color:#D5DAE6;max-width:30em;margin:22px 0 0}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-stats{display:flex;gap:34px;margin-top:48px;flex-wrap:wrap}
.hero-stats .s b{font-family:'Spectral';font-weight:700;font-size:2rem;color:var(--chalk);display:block;line-height:1}
.hero-stats .s span{font-size:.82rem;color:var(--chalk-soft)}
.hero-stats .s b em{font-style:normal;color:var(--gold)}
.board{position:relative;aspect-ratio:1/.92;border-radius:18px;background:linear-gradient(160deg,#101526,#1d2742);border:1px solid rgba(242,244,236,.1);box-shadow:var(--shadow-lg),inset 0 0 60px rgba(0,0,0,.35);padding:22px}
.board svg{width:100%;height:100%;display:block}
.draw{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2.6s ease forwards .3s}
.draw.d2{animation-delay:.9s}.draw.d3{animation-delay:1.5s}
@keyframes draw{to{stroke-dashoffset:0}}
.board .formula-chip{position:absolute;background:rgba(20,26,46,.85);border:1px solid rgba(215,161,59,.4);color:var(--chalk);border-radius:10px;padding:.5em .8em;font-size:.95rem}
.chip-1{top:16%;left:8%;animation:float 5s ease-in-out infinite}
.chip-2{bottom:14%;right:7%;animation:float 6s ease-in-out infinite .6s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ABOUT */
.section{padding:96px 0}
.about{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.portrait{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/4.6;background:linear-gradient(135deg,#1d2742,#2a3760);box-shadow:var(--shadow-lg);display:grid;place-items:center}
.portrait .ph{color:var(--chalk-soft);text-align:center;font-size:.85rem;padding:24px;line-height:1.5}
.portrait .ph svg{width:64px;height:64px;opacity:.5;margin-bottom:10px}
.portrait .tag{position:absolute;left:18px;bottom:18px;background:var(--gold);color:#211907;font-weight:700;font-size:.8rem;padding:.5em .9em;border-radius:999px}
.about h2{font-size:clamp(1.9rem,3.4vw,2.8rem);margin:14px 0 0}
.about p{color:var(--ink-soft);font-size:1.06rem;margin:18px 0 0;max-width:38em}
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.mini-stats .m{background:var(--paper);border:1px solid var(--line);border-radius:var(--rad);padding:18px 16px}
.mini-stats .m b{font-family:'Spectral';font-size:1.7rem;color:var(--ink);display:block;line-height:1.1}
.mini-stats .m span{font-size:.82rem;color:var(--ink-faint)}
.checks{display:flex;flex-direction:column;gap:11px;margin-top:28px}
.checks .c{display:flex;gap:.7em;align-items:flex-start;font-size:1rem;color:var(--ink-soft)}
.checks .c svg{flex:none;width:22px;height:22px;color:var(--teal);margin-top:2px}

/* THEORY HEAD */
.theory-head{text-align:center;max-width:640px;margin:0 auto}
.theory-head h2{font-size:clamp(2rem,3.8vw,3rem);margin-top:14px}
.theory-head p{color:var(--ink-soft);font-size:1.08rem;margin-top:14px}

/* BROWSER (tabs → chips → content) */
.browser{margin-top:40px}
.search-wrap{position:relative;max-width:440px;margin:0 auto 22px}
.search-wrap input{width:100%;padding:.78em 1em .78em 2.6em;border:1px solid var(--line);border-radius:12px;font-family:'Onest';font-size:.95rem;background:var(--paper-2);color:var(--ink);outline:none}
.search-wrap input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(28,156,146,.14)}
.search-wrap svg{position:absolute;left:.85em;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--ink-faint)}
.gtabs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 14px;border-bottom:1px solid var(--line);scrollbar-width:thin}
.gtabs::-webkit-scrollbar{height:6px}.gtabs::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.gtab{flex:none;display:inline-flex;align-items:center;gap:.55em;border:1px solid var(--line);background:var(--paper-2);color:var(--ink-soft);font-family:'Onest';font-weight:600;font-size:.9rem;padding:.6em 1.05em;border-radius:999px;cursor:pointer;white-space:nowrap;transition:all .15s}
.gtab .gc{width:7px;height:7px;border-radius:2px;background:var(--gold)}
.gtab:hover{border-color:var(--teal);color:var(--ink)}
.gtab.active{background:var(--ink);color:var(--chalk);border-color:var(--ink)}
.gtab.active .gc{background:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 30px}
.chip{display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--line);background:var(--paper-2);color:var(--ink-soft);font-family:'Onest';font-weight:500;font-size:.9rem;padding:.5em .85em;border-radius:11px;cursor:pointer;transition:all .15s}
.chip .cs{font-family:'Spectral';color:var(--teal-deep);font-weight:700;font-size:1.02em}
.chip .cb{font-size:.64rem;font-weight:700;color:var(--ink-faint);background:var(--line-soft);padding:.12em .5em;border-radius:5px}
.chip:hover{border-color:var(--teal);color:var(--ink);transform:translateY(-1px)}
.chip.active{background:var(--gold);border-color:var(--gold);color:#221907}
.chip.active .cs{color:#6b4e12}.chip.active .cb{background:rgba(34,25,7,.16);color:#3a2c0c}
.chips .gtag{width:100%;font-family:'Onest';font-weight:700;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-top:4px}

/* CONTENT */
.content{min-width:0;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.illo{position:relative;border-radius:14px;background:linear-gradient(160deg,#FAFBF7,#ECEFE6);border:1px solid var(--line);height:170px;display:grid;place-items:center;margin-bottom:24px;overflow:hidden}
.illo::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(20,26,46,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(20,26,46,.04) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(ellipse 80% 90% at 50% 40%,#000,transparent)}
.illo svg{position:relative;width:84%;max-width:380px;height:auto;display:block}
.illo .ax{stroke:#9aa0b0;stroke-width:1.5;fill:none}
.illo .d{stroke:var(--slate);stroke-width:2.4;fill:none;stroke-linejoin:round;stroke-linecap:round}
.illo .g{stroke:var(--gold);stroke-width:2.8;fill:none;stroke-linejoin:round;stroke-linecap:round}
.illo .t{stroke:var(--teal);stroke-width:2.4;fill:none;stroke-linejoin:round;stroke-linecap:round}
.illo .fg{fill:var(--gold)}.illo .ft{fill:var(--teal)}.illo .fd{fill:var(--slate)}.illo .fdim{fill:rgba(215,161,59,.16)}.illo .ftim{fill:rgba(28,156,146,.13)}
.illo .dash{stroke-dasharray:5 5}
.illo text{fill:var(--ink-faint);font-family:'PT Serif',serif;font-style:italic;font-size:13px}
.topic-head{display:flex;align-items:flex-start;gap:18px;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:28px}
.topic-head .tsym{flex:none;width:58px;height:58px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(150deg,var(--slate),var(--slate-2));color:var(--gold);font-family:'Spectral';font-size:1.8rem;font-weight:700;box-shadow:var(--shadow)}
.topic-head .tmeta .tg{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep)}
.topic-head h3{font-size:clamp(1.5rem,3vw,2rem);margin-top:4px}
.topic-head .tt{font-size:.74rem;font-weight:700;color:#211907;background:var(--gold);padding:.3em .7em;border-radius:7px;margin-left:auto;white-space:nowrap;align-self:center}
.card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--rad);padding:22px 24px;margin:18px 0;box-shadow:var(--shadow)}
.card>h4{font-size:1.12rem;color:var(--ink);margin-bottom:10px;display:flex;align-items:center;gap:.55em}
.card>h4::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--gold);transform:rotate(45deg);flex:none}
.card p{margin:.5em 0;color:var(--ink-soft)}
.frow{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}
.fbox{flex:1 1 230px;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:10px;padding:14px 16px}
.fbox .lbl{display:block;font-family:'Onest';font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.fbox.gold{border-left-color:var(--gold)}
.fcenter{padding:14px 16px;background:var(--paper);border:1px dashed var(--line);border-radius:10px;margin:12px 0}
.note{background:rgba(28,156,146,.07);border:1px solid rgba(28,156,146,.25);border-radius:10px;padding:13px 16px;margin:14px 0;font-size:.96rem;color:var(--ink-soft);display:flex;gap:.7em}
.note svg{flex:none;width:20px;height:20px;color:var(--teal-deep);margin-top:2px}
.note.warn{background:rgba(215,161,59,.09);border-color:rgba(215,161,59,.35)}
.note.warn svg{color:var(--gold-deep)}
ul.clean{list-style:none;padding:0;margin:10px 0}
ul.clean li{position:relative;padding:.32em 0 .32em 1.5em;color:var(--ink-soft)}
ul.clean li::before{content:"";position:absolute;left:.1em;top:.95em;width:7px;height:7px;border-radius:50%;border:2px solid var(--teal)}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0}
table.mtab{width:100%;border-collapse:collapse;font-size:1rem;background:var(--paper);border-radius:10px;overflow:hidden;border:1px solid var(--line);min-width:340px}
table.mtab th,table.mtab td{padding:10px 12px;text-align:center;border:1px solid var(--line-soft)}
table.mtab th{background:var(--slate);color:var(--chalk);font-family:'Onest';font-weight:600;font-size:.9rem}
table.mtab tr:nth-child(even) td{background:var(--paper-2)}
table.mtab td:first-child{font-weight:600;color:var(--ink);background:var(--line-soft)}

/* === MATH (pure CSS, no external lib) === */
.m{font-family:'PT Serif',Georgia,serif;font-style:italic;white-space:nowrap}
.eq{display:block;text-align:center;font-family:'PT Serif',Georgia,serif;font-style:italic;font-size:1.18rem;line-height:2.2;margin:6px 0;padding:4px 2px;overflow-x:auto;overflow-y:hidden;color:var(--ink)}
.eq.l{text-align:left}
.m sup,.eq sup,.m sub,.eq sub{font-style:normal;font-size:.72em}
.op{font-style:normal}
.fr{display:inline-flex;flex-direction:column;vertical-align:-.55em;text-align:center;margin:0 .2em}
.fr>span{display:block;padding:0 .35em;line-height:1.2}
.fr>.n{border-bottom:1.6px solid currentColor}
.sqrt{display:inline-flex;align-items:flex-start;white-space:nowrap}
.sqrt>.idx{font-style:normal;font-size:.66em;align-self:flex-start;margin-right:-.12em}
.sqrt>.rad{display:inline-flex;align-items:flex-start}
.sqrt>.rad::before{content:"√";font-style:normal;font-size:1.04em;line-height:1}
.sqrt>.rad>.r{border-top:1.6px solid currentColor;padding:0 .22em;margin-top:.12em;display:inline-block}
.cases{display:inline-flex;align-items:center;font-style:normal;vertical-align:middle}
.cases>.br{font-size:2.6em;font-weight:200;line-height:.8;margin-right:.1em}
.cases>.cl{display:inline-flex;flex-direction:column;gap:.25em;font-style:italic;text-align:left}

/* CONTACTS */
.contacts{background:var(--slate);color:var(--chalk);position:relative;overflow:hidden}
.contacts::before{content:"";position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(242,244,236,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(242,244,236,.04) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(ellipse 80% 70% at 70% 40%,#000,transparent)}
.contacts .wrap{position:relative}
.contacts-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.contacts h2{font-size:clamp(2rem,4vw,3rem);color:var(--chalk)}
.contacts h2 .em{color:var(--gold);font-style:italic}
.contacts p.lead{color:#CBD2E0;font-size:1.1rem;margin-top:16px;max-width:30em}
.cmethods{display:flex;flex-direction:column;gap:12px}
.cmethod{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:14px;background:rgba(242,244,236,.04);border:1px solid rgba(242,244,236,.1);transition:transform .16s,background .16s,border-color .16s}
.cmethod:hover{transform:translateY(-3px);background:rgba(242,244,236,.07);border-color:rgba(215,161,59,.4)}
.cmethod .ic{width:46px;height:46px;border-radius:12px;background:rgba(215,161,59,.16);display:grid;place-items:center;color:var(--gold);flex:none}
.cmethod .ic svg{width:24px;height:24px}
.cmethod .t b{display:block;font-family:'Onest';font-weight:600;color:var(--chalk);font-size:1.02rem}
.cmethod .t span{font-size:.86rem;color:var(--chalk-soft)}
.cmethod .arr{margin-left:auto;color:var(--chalk-soft)}

footer.site{background:#0E1424;color:var(--chalk-soft);padding:40px 0;border-top:1px solid rgba(242,244,236,.07)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:.9rem}
.foot a:hover{color:var(--chalk)}

@media(max-width:880px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .board{max-width:440px}
  .about-grid{grid-template-columns:1fr;gap:36px}
  .portrait{max-width:360px}
  .contacts-grid{grid-template-columns:1fr;gap:36px}
  .nav-links{display:none}
  .burger{display:grid;place-items:center}
}
@media(max-width:560px){
  .wrap{padding:0 16px}.section{padding:60px 0}.hero{padding:52px 0 62px}
  .mini-stats{grid-template-columns:1fr}.card{padding:18px 16px}
  .topic-head{flex-wrap:wrap}.topic-head .tt{margin-left:0}
  .illo{height:140px}.eq{font-size:1.05rem}
}


/* === ANTI-OVERFLOW / RESPONSIVE PATCH ===
   Keeps formula cards, tables, chips and SVG blocks inside the viewport on narrow screens. */
html, body { width:100%; max-width:100%; overflow-x:clip; }
.wrap, .browser, .content, .card, .frow, .fbox, .fcenter, .note, .topic-head, .illo, .tw, table.mtab {
  min-width:0;
  max-width:100%;
}
.card { overflow:hidden; }
.frow {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap:12px;
  align-items:stretch;
}
.fbox {
  width:100%;
  min-width:0;
  flex:unset;
  overflow:hidden;
}
.eq, .m {
  max-width:100%;
}
.eq {
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  white-space:nowrap;
  text-wrap:nowrap;
}
.eq::-webkit-scrollbar, .tw::-webkit-scrollbar, .gtabs::-webkit-scrollbar { height:6px; }
.eq::-webkit-scrollbar-thumb, .tw::-webkit-scrollbar-thumb, .gtabs::-webkit-scrollbar-thumb {
  background:var(--line);
  border-radius:999px;
}
.fr, .sqrt, .cases { flex-shrink:0; }
.topic-head { overflow:hidden; }
.topic-head .tmeta { min-width:0; }
.topic-head h3 { overflow-wrap:anywhere; }
.chips, .gtabs { max-width:100%; }
.chip, .gtab { max-width:100%; }
.chip span, .gtab span { min-width:0; }
.tw {
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
table.mtab { width:max-content; min-width:min(100%, 340px); }
.illo svg, .board svg { max-width:100%; height:auto; }
.cmethod { min-width:0; }
.cmethod .t { min-width:0; }
.cmethod .t span { display:block; overflow-wrap:anywhere; }

@media (max-width:720px){
  .frow { grid-template-columns:1fr; }
  .fbox { padding:13px 14px; }
  .fcenter { padding:12px 14px; }
  .card { margin:14px 0; }
  .topic-head { gap:12px; }
  .topic-head .tsym { width:50px; height:50px; font-size:1.55rem; border-radius:13px; }
}

@media (max-width:560px){
  .wrap { padding:0 14px; }
  .card { padding:16px 14px; border-radius:12px; }
  .card>h4 { font-size:1.02rem; }
  .eq { font-size:clamp(.88rem, 4.2vw, 1.02rem); line-height:2.05; padding:6px 0; }
  table.mtab { font-size:.9rem; }
  table.mtab th, table.mtab td { padding:8px 10px; }
  .chips { flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; }
  .chip { flex:0 0 auto; }
  .gtabs { padding-bottom:10px; }
  .topic-head { align-items:center; }
  .topic-head .tt { width:auto; max-width:100%; }
  .note { align-items:flex-start; padding:12px 13px; }
  .contacts-grid { min-width:0; }
}

@media (max-width:380px){
  .wrap { padding:0 12px; }
  .brand { font-size:1rem; gap:.55em; }
  .brand .mark { width:34px; height:34px; }
  .eq { font-size:.86rem; }
  .hero-actions .btn { width:100%; justify-content:center; }
  .cmethod { padding:13px 14px; gap:12px; }
  .cmethod .ic { width:40px; height:40px; }
}



/* === FIX: illustrations must fit inside preview cards ===
   Previous global SVG rule made .illo SVGs scale to the full card width,
   so tall graph paths were clipped by .illo{overflow:hidden}. */
.illo svg{
  width:min(84%, 380px) !important;
  max-width:380px !important;
  height:auto !important;
  max-height:calc(100% - 22px) !important;
  object-fit:contain;
  overflow:visible;
  align-self:center;
  justify-self:center;
}
.illo{
  min-height:170px;
  height:auto;
  padding:16px 12px;
}
@media (max-width:560px){
  .illo{min-height:140px; padding:12px 10px;}
  .illo svg{width:min(92%, 340px) !important; max-height:116px !important;}
}



/* === FIX: formula baseline alignment ===
   Keeps CSS-made fractions visually centered with sin/cos/S/letters.
   Without this, inline-flex fractions sit on the text baseline and look
   like they have fallen onto a separate row. */
.eq{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.18em;
  white-space:nowrap;
  text-wrap:nowrap;
}
.eq.l{justify-content:flex-start;}
.fr{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  vertical-align:middle;
  transform:translateY(.03em);
  margin:0 .18em;
}
.fr>span{
  display:block;
  padding:0 .35em;
  line-height:1.08;
}
.fr>.n{border-bottom:1.6px solid currentColor;}
.fbox .eq, .fcenter .eq{
  min-height:2.7em;
}
@media (max-width:560px){
  .eq{gap:.14em;}
  .fr>span{padding:0 .28em;}
  .fbox .eq, .fcenter .eq{min-height:2.35em;}
}



/* === FINAL FIX: stable inline math fractions ===
   Fractions are inline-blocks, not flex items. This keeps b/a, x/2,
   1/cos²x, 1/3 · πR²h on one visual formula line in Safari/Chrome. */
.eq{
  display:block !important;
  text-align:center;
  white-space:nowrap;
  text-wrap:nowrap;
  line-height:1.55 !important;
  overflow-x:auto;
  overflow-y:hidden;
  padding:12px 4px;
}
.eq.l{text-align:left;}
.fr{
  display:inline-block !important;
  vertical-align:middle !important;
  text-align:center;
  margin:0 .18em;
  transform:none !important;
  line-height:1 !important;
  white-space:nowrap;
}
.fr>span{
  display:block;
  padding:0 .34em;
  line-height:1.08 !important;
}
.fr>.n{
  border-bottom:1.6px solid currentColor;
  padding-bottom:.08em;
}
.fr>.d{
  padding-top:.08em;
}
.fbox .eq, .fcenter .eq{
  min-height:0 !important;
}
.m .fr, table.mtab .fr, .note .fr{
  vertical-align:middle !important;
}
@media (max-width:560px){
  .eq{line-height:1.5 !important; padding:10px 2px;}
  .fr>span{padding:0 .26em;}
}



/* === UNIVERSAL MATH TYPOGRAPHY FIX ===
   Corrects n-th root indices, nested radicals, fraction alignment and
   formula-card spacing consistently across all theory sections. */
.sqrt{
  display:inline-flex !important;
  align-items:flex-start !important;
  position:relative;
  vertical-align:-.16em;
  white-space:nowrap;
  line-height:1;
}
.sqrt>.idx{
  display:inline-block;
  position:relative;
  z-index:2;
  flex:0 0 auto;
  width:.58em;
  margin-right:-.20em;
  top:-.34em;
  text-align:right;
  font-size:.56em !important;
  line-height:1;
  font-style:normal;
}
.sqrt>.rad{
  display:inline-flex !important;
  align-items:flex-start !important;
  min-width:0;
  line-height:1;
}
.sqrt>.rad::before{
  content:"√";
  display:inline-block;
  flex:0 0 auto;
  font-style:normal;
  font-size:1.12em;
  line-height:.93;
  margin-right:-.04em;
}
.sqrt>.rad>.r{
  display:inline-block !important;
  border-top:1.55px solid currentColor;
  padding:.06em .22em 0 .16em;
  margin-top:.03em !important;
  min-height:1.05em;
  line-height:1.05;
}
/* Nested radicals need a little more breathing room under the outer bar. */
.sqrt .sqrt{
  vertical-align:-.08em;
  margin-top:.08em;
}
.eq{
  min-height:2.35em;
  box-sizing:border-box;
}
.fbox>.eq:only-child{
  margin:0;
}
.fbox{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.fbox .lbl + .eq{
  margin-top:auto;
  margin-bottom:auto;
}
.cases>.br{
  line-height:.72;
  transform:scaleY(1.08);
  transform-origin:center;
}
@media (max-width:560px){
  .sqrt>.idx{font-size:.58em !important;top:-.31em;width:.56em;}
  .sqrt>.rad::before{font-size:1.1em;}
  .eq{min-height:2.2em;}
}



/* === NATIVE MATHML RENDERING === */
.eq.mathml-ready{overflow-x:auto;overflow-y:hidden;padding:14px 4px;line-height:normal!important;white-space:normal!important}
.eq math{font-family:"STIX Two Math","Cambria Math","Times New Roman",serif;font-size:1.18rem;display:block;margin:auto;white-space:nowrap}
.eq.l math{margin-left:0;margin-right:auto}
.m.mathml-ready{font-style:normal;white-space:normal}
.m math{font-family:"STIX Two Math","Cambria Math","Times New Roman",serif;font-size:1em;vertical-align:-.08em}
math mtext{font-family:"STIX Two Math","Cambria Math","Times New Roman",serif;font-style:italic}
math mfrac{font-size:1em}
@media(max-width:560px){.eq math{font-size:1.02rem}}