/* Math on Board — topic pages (shared). Palette and fonts of mathonboard.com. */
:root{
  --bg:#F5F7FF; --ink:#1C2445; --ink-soft:#565E82;
  --indigo:#5750E0; --indigo-dark:#3E38B5; --indigo-soft:#ECEBFF;
  --yellow:#FFC94A; --yellow-soft:#FFF4D6; --mint:#29C2A6; --mint-soft:#E2F7F2; --mint-dark:#13806E;
  --coral:#BF5342; --coral-soft:#FBE9E6; --line:#E1E5F7;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Manrope',system-ui,sans-serif;line-height:1.65;}
button,input{font-family:inherit;}
a{color:var(--indigo-dark);}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;border-radius:6px;}
.katex{font-size:1.06em;}
.katex-display{margin:.4em 0;overflow-x:auto;overflow-y:hidden;padding:2px 0;}

/* language switch: both languages are in the page; only one is shown */
html[data-lang="pt"] .lang-en, html[data-lang="en"] .lang-pt{display:none !important;}

/* header (same as the rest of the site) */
header{background:#fff;border-bottom:1px solid var(--line);}
.header-in{max-width:820px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.logo-link{display:flex;align-items:center;text-decoration:none;}
.logo-link img{height:34px;display:block;}
.lang-row{display:flex;gap:6px;}
.lang-btn{font-size:.76rem;font-weight:800;padding:6px 12px;border-radius:999px;border:1.5px solid var(--line);background:#fff;
  color:var(--ink-soft);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.lang-btn.active{background:var(--indigo);border-color:var(--indigo);color:#fff;}
.flag{width:18px;height:13px;border-radius:2.5px;box-shadow:0 0 0 1px rgba(28,36,69,.14);flex-shrink:0;}

.wrap{max-width:820px;margin:0 auto;padding:0 20px 80px;}
.breadcrumb{font-size:.8rem;color:var(--ink-soft);margin:22px 0 6px;}
.breadcrumb a{color:var(--ink-soft);text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}
.grade-tag{display:inline-block;font-size:.72rem;font-weight:800;color:var(--indigo-dark);background:rgba(87,80,224,.1);padding:4px 12px;border-radius:999px;margin-bottom:10px;}
h1{font-family:'Baloo 2',cursive;font-size:2.2rem;line-height:1.15;margin:0 0 6px;}
.subtitle{color:var(--ink-soft);font-size:1.05rem;margin:0 0 20px;max-width:62ch;}
h2{font-family:'Baloo 2',cursive;font-size:1.55rem;line-height:1.2;margin:0 0 6px;color:var(--ink);}
h3{font-family:'Baloo 2',cursive;font-size:1.15rem;margin:0 0 6px;}
p{margin:0 0 12px;color:#2A2F45;}
.sec{margin-top:52px;scroll-margin-top:16px;}
.sec-lead{color:var(--ink-soft);margin:0 0 18px;max-width:62ch;}

/* ---------- 5 minutes ---------- */
.five{background:#fff;border:1.5px solid var(--line);border-top:6px solid var(--indigo);border-radius:20px;padding:24px 24px 22px;box-shadow:0 10px 30px rgba(28,36,69,.06);}
.five-label{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.85rem;color:var(--indigo-dark);margin-bottom:8px;}
.five-label .clock{width:18px;height:18px;}
.big-idea{font-size:1.18rem;line-height:1.55;color:var(--ink);margin:0 0 18px;}
.rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:22px;}
.rule{background:var(--bg);border-radius:14px;padding:14px 14px 12px;position:relative;}
.rule .n{position:absolute;top:-10px;left:12px;background:var(--yellow);color:#3D2E00;font-weight:800;font-size:.75rem;border-radius:999px;padding:2px 9px;}
.rule h3{font-size:1rem;margin:6px 0 4px;}
.rule .f{margin:4px 0 6px;}
.rule p{font-size:.88rem;color:var(--ink-soft);margin:0;}
.quick h3{margin-bottom:10px;}

/* ---------- multiple choice ---------- */
.mcq{border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px;background:#fff;}
.mcq .q{font-weight:600;margin:0 0 10px;}
.mcq .q .num{display:inline-block;min-width:26px;color:var(--indigo-dark);font-weight:800;}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.opts.wide{grid-template-columns:1fr;}
.opt{display:flex;align-items:center;gap:10px;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:10px;
  padding:9px 12px;cursor:pointer;font-size:.97rem;color:var(--ink);min-height:44px;}
.opt:hover:not([disabled]){border-color:var(--indigo);}
.opt .l{flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--ink-soft);display:grid;place-items:center;font-size:.75rem;font-weight:800;color:var(--ink-soft);}
.opt[disabled]{cursor:default;}
.opt.right{border-color:var(--mint);background:var(--mint-soft);}
.opt.right .l{background:var(--mint);border-color:var(--mint);color:#fff;}
.opt.wrong{border-color:var(--coral);background:var(--coral-soft);}
.opt.wrong .l{background:var(--coral);border-color:var(--coral);color:#fff;}
.feedback{margin-top:10px;border-radius:10px;padding:10px 12px;font-size:.93rem;}
.feedback.ok{background:var(--mint-soft);}
.feedback.no{background:var(--coral-soft);}
.feedback b.verdict{display:block;margin-bottom:2px;}
.feedback p{margin:0;}

/* ---------- jump bar ---------- */
.jump{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 0;}
.jump a{font-size:.86rem;font-weight:700;text-decoration:none;color:var(--indigo-dark);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;}
.jump a:hover{border-color:var(--indigo);}
.jump a.primary{background:var(--indigo);border-color:var(--indigo);color:#fff;}

/* ---------- level test ---------- */
.progress{height:8px;background:var(--indigo-soft);border-radius:99px;overflow:hidden;margin:4px 0 16px;}
.progress i{display:block;height:100%;width:0;background:var(--indigo);transition:width .3s;}
.result{background:linear-gradient(135deg,var(--indigo),var(--indigo-dark));color:#fff;border-radius:18px;padding:22px 22px 18px;}
.result h3{font-size:1.5rem;margin:0 0 4px;color:#fff;}
.result p{color:#E4E2FF;}
.result ul{margin:8px 0 6px;padding-left:20px;}
.result li{margin:4px 0;}
.result a{color:var(--yellow);font-weight:700;}
.result .again{background:transparent;border:1.5px solid rgba(255,255,255,.5);color:#fff;border-radius:999px;padding:6px 14px;font-weight:700;cursor:pointer;}

/* ---------- worked examples ---------- */
.worked{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:18px 20px;margin-bottom:14px;}
.worked .tag{font-size:.78rem;font-weight:800;color:var(--ink-soft);}
.worked .prob{font-size:1.05rem;margin:6px 0 12px;}
.steps-ctl{display:flex;gap:8px;flex-wrap:wrap;}
.btn{font-weight:800;font-size:.9rem;border-radius:999px;padding:9px 16px;border:1.5px solid var(--line);background:#fff;color:var(--indigo-dark);cursor:pointer;}
.btn:hover{border-color:var(--indigo);}
a.btn{display:inline-block;text-decoration:none;}
.btn.solid{background:var(--indigo);border-color:var(--indigo);color:#fff;}
.btn.yellow{background:var(--yellow);border-color:var(--yellow);color:#3D2E00;}
.hint{background:var(--yellow-soft);border-radius:10px;padding:10px 12px;margin-top:10px;font-size:.95rem;}
.hint b.lbl{display:block;font-size:.8rem;color:#7A5600;}
.solution{border-left:4px solid var(--mint);background:var(--bg);border-radius:0 10px 10px 0;padding:10px 14px;margin-top:10px;}
.solution b.lbl{display:block;}
.solution ol{margin:4px 0 6px;padding-left:20px;}
.solution li{margin:5px 0;}
.answer{font-weight:800;color:var(--mint-dark);}

/* ---------- mistakes ---------- */
.mistakes{display:grid;gap:12px;}
.mistake{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:16px 18px;}
.mistake h3{font-size:1.02rem;margin-bottom:8px;}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.vs div{border-radius:10px;padding:10px 12px;font-size:.95rem;}
.vs .bad{background:var(--coral-soft);}
.vs .good{background:var(--mint-soft);}
.vs b.lbl{display:block;font-size:.78rem;margin-bottom:2px;}
.vs .bad b.lbl{color:var(--coral);}
.vs .good b.lbl{color:var(--mint-dark);}
.check{margin-top:10px;font-size:.95rem;}
.check .btn{padding:6px 12px;font-size:.82rem;margin-left:6px;}
.check .ans{display:block;margin-top:8px;background:var(--bg);border-radius:8px;padding:8px 10px;}

/* ---------- tool ---------- */
.tool{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:18px 20px;}
.tool-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start;}
.tool svg{width:100%;height:auto;display:block;background:var(--bg);border-radius:12px;}
.ctl{margin-bottom:12px;}
.ctl label{display:flex;justify-content:space-between;font-weight:700;font-size:.9rem;margin-bottom:4px;}
.ctl label output{font-weight:800;color:var(--indigo-dark);}
.ctl input[type=range]{width:100%;accent-color:var(--indigo);}
.ctl input[type=number],.ctl input[type=text]{width:100%;padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;font-size:1rem;}
.readout{background:var(--bg);border-radius:12px;padding:12px 14px;font-size:.95rem;}
.readout b{color:var(--indigo-dark);}
.readout .big{font-family:'Baloo 2',cursive;font-size:1.5rem;color:var(--ink);line-height:1.2;}
.tool-note{font-size:.85rem;color:var(--ink-soft);margin-top:10px;}
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.tabs button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;font-weight:700;cursor:pointer;color:var(--ink-soft);}
.tabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff;}

/* ---------- exam ---------- */
.exam .style{display:inline-block;font-size:.75rem;font-weight:800;border-radius:999px;padding:3px 10px;margin-bottom:6px;}
.exam .style.enem{background:#E3F4E8;color:#1C6B34;}
.exam .style.vest{background:var(--yellow-soft);color:#7A5600;}
.exam .style.sat{background:var(--indigo-soft);color:var(--indigo-dark);}
.exam .style.obmep{background:#FDE7F0;color:#9B2C5A;}

/* ---------- in depth (existing text) ---------- */
.deep{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:6px 22px 18px;}
.deep h3{color:var(--indigo-dark);margin-top:22px;}
.deep .lede{font-size:1.05rem;}
.deep .formula-box{background:var(--bg);border:1.5px solid var(--line);border-left:4px solid var(--indigo);border-radius:10px;padding:14px 16px;
  font-family:'Space Mono',ui-monospace,monospace;font-size:.9rem;white-space:pre-wrap;overflow-x:auto;}
.deep .tip-box,.deep .mistake-box{border-radius:12px;padding:12px 14px;margin:14px 0;}
.deep .tip-box{background:var(--mint-soft);} .deep .mistake-box{background:var(--coral-soft);}
.deep .tip-box strong,.deep .mistake-box strong{display:block;margin-bottom:4px;}
.deep .practice-box{background:var(--bg);border-radius:12px;padding:12px 14px;}
.deep details summary{cursor:pointer;font-weight:700;color:var(--indigo);padding:6px 0;}

/* ---------- downloads ---------- */
.downloads{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.dl{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:18px 20px;}
.dl h3{margin-bottom:4px;}
.dl p{font-size:.92rem;color:var(--ink-soft);}
.dl.lead{border-color:var(--indigo);background:linear-gradient(180deg,var(--indigo-soft),#fff 70%);}
.lead-form input{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;font-size:1rem;margin-bottom:8px;background:#fff;}
.lead-form .err{color:var(--coral);font-size:.85rem;font-weight:700;margin:0 0 8px;}
.lead-form .fine{font-size:.76rem;color:var(--ink-soft);margin:8px 0 0;}
.done{background:var(--mint-soft);border-radius:10px;padding:10px 12px;font-weight:700;}

/* ---------- FAQ ---------- */
.faq details{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:4px 16px;margin-bottom:8px;}
.faq summary{cursor:pointer;font-weight:700;padding:10px 0;list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";float:right;color:var(--indigo);font-weight:800;}
.faq details[open] summary::after{content:"−";}
.faq details p{margin:0 0 12px;}

/* ---------- path + CTA ---------- */
.path{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.path a{display:block;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:16px 18px;text-decoration:none;color:var(--ink);}
.path a:hover{border-color:var(--indigo);}
.path .lbl{display:block;font-size:.8rem;font-weight:700;color:var(--ink-soft);margin-bottom:2px;}
.path .ttl{font-family:'Baloo 2',cursive;font-size:1.12rem;}
.cta-card{background:linear-gradient(135deg,var(--indigo),var(--indigo-dark));color:#fff;border-radius:18px;padding:26px 24px;margin-top:22px;text-align:center;}
.cta-card h3{font-size:1.3rem;margin:0 0 8px;color:#fff;}
.cta-card p{color:#DCDAFB;margin:0 0 18px;}
.cta-btn{display:inline-block;background:var(--yellow);color:#3D2E00;font-weight:800;padding:13px 26px;border-radius:11px;text-decoration:none;}
footer{text-align:center;padding:30px 20px;font-size:.8rem;color:var(--ink-soft);}
footer a{color:var(--ink-soft);}

@media (max-width:720px){
  h1{font-size:1.8rem;}
  .five{padding:20px 16px;}
  .rules{grid-template-columns:minmax(0,1fr);gap:16px;}
  .opts{grid-template-columns:1fr;}
  .tool-grid,.downloads,.path,.vs{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto !important;}}
@media print{header,.jump,.lead-form,.cta-card,footer{display:none;}}