/* ---- palette: change these to retune the whole site ---- */
:root{
  --paper:#F7F6F1; --raised:#FFFFFF; --ink:#24262B; --muted:#686B72; --rule:#DCD9D0;
  --accent:#2D4F86; --accent-ink:#FFFFFF; --mark:#A8402F; --mark-soft:#F3E4DF; --chip:#ECEAE3;
  --thales:#2D4F86; --euclid:#3D6B4F; --archimedes:#6B4C8A;
  --sheet:#FFFFFF; --sheet-filter:none;
  --serif:Literata,"Iowan Old Style",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#17181B; --raised:#1F2024; --ink:#E6E3DB; --muted:#9C9A93; --rule:#33343A;
    --accent:#8FB1E8; --accent-ink:#121316; --mark:#E59A86; --mark-soft:#3A2622; --chip:#26272C;
    --thales:#8FB1E8; --euclid:#8CC4A0; --archimedes:#BFA0E0;
    --sheet:#141414; --sheet-filter:invert(.92) hue-rotate(180deg);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#17181B; --raised:#1F2024; --ink:#E6E3DB; --muted:#9C9A93; --rule:#33343A;
  --accent:#8FB1E8; --accent-ink:#121316; --mark:#E59A86; --mark-soft:#3A2622; --chip:#26272C;
  --thales:#8FB1E8; --euclid:#8CC4A0; --archimedes:#BFA0E0;
  --sheet:#141414; --sheet-filter:invert(.92) hue-rotate(180deg);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none!important}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--serif)}
button,input,select{font:inherit;color:inherit}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono,.lbl{font-family:var(--mono);font-size:.78rem;letter-spacing:0}
.lbl{color:var(--muted)}

/* ---- top bar ---- */
.bar-top{border-bottom:1px solid var(--rule);background:var(--paper)}
.bar-in{max-width:1040px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{font-family:var(--mono);font-size:.9rem;color:var(--ink);text-decoration:none;margin-right:auto}
nav.main{display:flex;gap:16px;font-family:var(--mono);font-size:.85rem}
nav.main a{color:var(--muted);text-decoration:none}
nav.main a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.theme{font-family:var(--mono);font-size:.8rem;border:1px solid var(--rule);background:transparent;border-radius:4px;padding:3px 9px;cursor:pointer}

/* ---- page header ---- */
header.ph{max-width:1040px;margin:0 auto;padding:26px 20px 8px}
.crumbs{display:flex;gap:6px;flex-wrap:wrap;font-family:var(--mono);font-size:.8rem;color:var(--muted);margin:0 0 10px}
.crumbs a{color:var(--muted)}
h1{font-weight:400;font-size:clamp(1.9rem,4.4vw,2.8rem);line-height:1.15;margin:0 0 8px}
.lede{margin:0;color:var(--muted);max-width:64ch}
svg.hero{display:block;width:100%;max-width:880px;height:auto;margin:6px auto 4px}
svg.hero .fig *{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
svg.hero .fig .acc{stroke:var(--accent);stroke-width:2}
svg.hero .fig .thin{stroke:var(--muted);stroke-width:1}
svg.hero .fig .dash{stroke:var(--mark);stroke-dasharray:4 4;stroke-width:1.2}
svg.hero .fig .dot{fill:var(--ink);stroke:none}
svg.hero text{font-family:var(--mono);font-size:11.5px;fill:var(--muted)}

main.page{max-width:1040px;margin:0 auto;padding:12px 20px 40px}
.foot{max-width:1040px;margin:0 auto;padding:22px 20px calc(36px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--rule);color:var(--muted);font-size:.9rem}
.foot p{margin:4px 0}

/* ---- blocks ---- */
.comps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:18px}
.comp{border:1px solid var(--rule);border-top:4px solid var(--c);border-radius:4px;padding:18px;background:var(--raised)}
.comp.thales{--c:var(--thales)}.comp.euclid{--c:var(--euclid)}.comp.archimedes{--c:var(--archimedes)}
.comp h2{font-weight:400;font-size:1.6rem;margin:0 0 4px}
.comp h2 a{color:inherit;text-decoration:none}
.comp p{margin:0 0 12px;color:var(--muted);font-size:.95rem}
.grades{display:flex;flex-direction:column;gap:6px}
.grades a{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:9px 12px;border:1px solid var(--rule);border-radius:4px;text-decoration:none;color:var(--ink)}
.grades a:hover{background:var(--chip)}
.homegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:34px}
.panel{border:1px solid var(--rule);border-radius:4px;padding:16px 18px;background:var(--raised)}
.panel h2{font-weight:400;font-size:1.3rem;margin:0 0 6px}
.panel p{margin:0 0 10px;color:var(--muted);font-size:.95rem}

.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{border:1px solid var(--rule);background:transparent;border-radius:4px;padding:4px 10px;font-size:.9rem;cursor:pointer;text-decoration:none;color:var(--ink);font-family:var(--serif)}
.opt[aria-pressed="true"],.opt[aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn{border:1px solid var(--rule);background:var(--raised);border-radius:4px;padding:7px 13px;cursor:pointer;font-size:.95rem;white-space:nowrap;text-decoration:none;color:var(--ink);display:inline-block}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.done{background:var(--mark);color:#fff;border-color:var(--mark)}
.btn:disabled{opacity:.45;cursor:default}
.ctrl{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 28px;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:14px 0 6px}
.ctrl h3{font-family:var(--mono);font-size:.75rem;font-weight:500;color:var(--muted);margin:0 0 6px}
.progressbar{height:5px;background:var(--chip);border-radius:3px;overflow:hidden;margin-top:6px;max-width:420px}
.progressbar i{display:block;height:100%;background:var(--mark)}
section.cat{margin-top:28px}
section.cat>h2{font-weight:400;font-size:1.35rem;margin:0 0 6px;display:flex;align-items:baseline;gap:12px}
ul.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
li.item{border-bottom:1px solid var(--rule)}
li.item button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:4px 1fr auto;gap:14px;width:100%;padding:11px 6px;cursor:pointer;align-items:center}
li.item button:hover{background:var(--chip)}
li.item button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cbar{align-self:stretch;border-radius:2px}
.cbar.thales{background:var(--thales)}.cbar.euclid{background:var(--euclid)}.cbar.archimedes{background:var(--archimedes)}
.ttl{font-size:1.02rem}
.meta{display:flex;gap:4px 12px;flex-wrap:wrap;align-items:center}
.chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.chip{background:var(--chip);border-radius:3px;padding:1px 7px;font-family:var(--mono);font-size:.72rem}
.right{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.diff{display:inline-grid;grid-template-columns:repeat(5,9px);gap:2px}
.diff i{width:9px;height:9px;border:1px solid var(--muted);display:block}
.diff i.on{background:var(--ink);border-color:var(--ink)}
.solved{color:var(--mark);font-family:var(--mono);font-size:.75rem}
.empty{padding:30px 6px;color:var(--muted)}
.note{font-size:.88rem;color:var(--muted);margin:18px 0 0}
.years{display:flex;flex-wrap:wrap;gap:6px}

/* ---- theory ---- */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.tcard{display:block;border:1px solid var(--rule);border-radius:4px;padding:12px 14px;text-decoration:none;color:var(--ink);background:var(--raised)}
.tcard:hover{background:var(--chip)}
.tcard small{display:block;color:var(--muted);font-size:.88rem;margin-top:3px}
article.theory{max-width:72ch}
article.theory ol.facts{padding-left:1.3em}
article.theory ol.facts li{margin:0 0 10px}
.box{border-left:3px solid var(--accent);background:var(--raised);padding:10px 14px;margin:16px 0;border-radius:0 4px 4px 0}
.box.warn{border-left-color:var(--mark)}
.box h3{font-family:var(--mono);font-size:.78rem;font-weight:500;color:var(--muted);margin:0 0 4px}
.box p{margin:4px 0}
mjx-container{overflow-x:auto;overflow-y:hidden;max-width:100%}

.lvl{font-family:var(--mono);font-size:.72rem;color:var(--muted);border:1px solid var(--rule);border-radius:3px;padding:0 6px;margin-left:6px;white-space:nowrap}
.formulas h3{font-weight:400;font-size:1.08rem;margin:18px 0 4px}
.formulas ul{margin:0;padding-left:1.2em}
.formulas li{margin:0 0 6px}
@media print{
  .bar-top,#herobox,.noprint,dialog,.ctrl{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .foot{border-top:1px solid #999}
  a{color:#000;text-decoration:none}
  .box{background:#fff;border-left-color:#000}
  .tcard{border-color:#999}
  section.cat{break-inside:avoid-page}
  .formulas section{break-inside:avoid}
}
.rank{font-family:var(--mono);font-size:.8rem;color:var(--ink);text-decoration:none;border:1px solid var(--rule);border-radius:4px;padding:3px 9px;white-space:nowrap}
.rank b{font-weight:500;color:var(--accent)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:50;max-width:min(520px,92vw);background:var(--raised);color:var(--ink);border:1px solid var(--rule);border-left:4px solid var(--accent);border-radius:4px;padding:12px 16px;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.toast b{display:block;font-weight:600;margin-bottom:2px}
.ladder{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.ladder li{display:grid;grid-template-columns:3.2rem 1fr;gap:12px;padding:10px 4px;border-bottom:1px solid var(--rule)}
.ladder li.locked{color:var(--muted)}
.ladder li.locked .bio{display:none}
.ladder li.cur{background:var(--chip)}
.ladder .pts{font-family:var(--mono);font-size:.78rem;color:var(--muted);padding-top:3px}
.ladder .bio{font-size:.92rem;color:var(--muted);margin-top:2px}
.badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.badge{border:1px solid var(--rule);border-radius:4px;padding:10px 12px;background:var(--raised)}
.badge.off{opacity:.5}
.badge small{display:block;color:var(--muted);font-size:.86rem}
.stat{font-size:2.2rem;line-height:1.1}
.helpnote{font-family:var(--mono);font-size:.75rem;color:var(--muted)}
@media print{.rank,.toast{display:none!important}}
.motto{margin:22px 0 0;padding:16px 20px;border-left:3px solid var(--accent);background:var(--raised);border-radius:0 4px 4px 0;max-width:70ch}
.motto p{margin:0;font-style:italic;font-size:1.05rem;line-height:1.65}
.motto small{display:block;margin-top:8px;font-family:var(--mono);font-size:.74rem;color:var(--muted);font-style:normal}
.chat{border:1px solid var(--rule);border-radius:4px;background:var(--raised);margin:8px 0 16px}
.chat-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:10px 14px;border-bottom:1px solid var(--rule)}
.chat-head b{font-weight:600}
.msgs{padding:10px 14px;display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto}
.msgs:empty{display:none}
.msg{white-space:pre-wrap;line-height:1.55;padding:8px 12px;border-radius:4px;max-width:92%}
.msg.user{align-self:flex-end;background:var(--chip)}
.msg.bot{align-self:flex-start;border-left:3px solid var(--accent);background:var(--paper)}
.msg img{max-width:220px;display:block;margin-top:6px;border-radius:3px}
.chat-in{padding:10px 14px;border-top:1px solid var(--rule)}
.chat-in textarea{width:100%;min-height:62px;resize:vertical;font:inherit;border:1px solid var(--rule);border-radius:4px;padding:8px 10px;background:var(--paper);color:var(--ink)}
.chat-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.quick{display:flex;gap:6px;flex-wrap:wrap;padding:10px 14px 0}
.quick button{font-size:.85rem}
.emblem{display:block;width:100%;height:100%}
.emblem *{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.emblem .acc{stroke:var(--accent);stroke-width:2.6}
.emblem .thin{stroke:var(--muted);stroke-width:1.2}
.emblem .dot,.emblem .node{fill:var(--ink);stroke:none}
.emblem .fillacc{fill:var(--accent);stroke:var(--accent);stroke-width:1}
.emblem text{fill:var(--ink);stroke:none;font-family:var(--serif)}
.emblem text.big{font-size:54px}
.emblem text.mid{font-size:21px}
.emblem text.small{font-size:16px}
.emblem text.tiny{font-size:8px;font-family:var(--mono)}
.emblem text.inv{fill:var(--paper)}
.emblem text.acc-t{fill:var(--accent)}
.ladder li{grid-template-columns:3.2rem 64px 1fr;align-items:start}
.ladder .em{width:64px;height:64px;border:1px solid var(--rule);border-radius:4px;background:var(--raised)}
.ladder li.locked .em{opacity:.28;filter:grayscale(1)}
.ladder .lname{display:flex;gap:4px 10px;flex-wrap:wrap;align-items:baseline}
.ladder .lyears{font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.ladder li.locked .bio{display:block;font-style:italic}
.ladder .more p{margin:8px 0;font-size:.95rem;max-width:70ch}
.linkbtn{background:none;border:0;padding:0;margin-top:4px;color:var(--accent);text-decoration:underline;cursor:pointer;font-family:var(--mono);font-size:.78rem}
.titlecard{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:start;padding:14px 0 6px}
.titlecard .em.big{width:120px;height:120px;border:1px solid var(--rule);border-radius:4px;background:var(--raised)}
.titlecard .tname{font-size:1.5rem;line-height:1.2;margin:2px 0}
.titlecard p{margin:8px 0 0;color:var(--muted);max-width:68ch}
.toast.withem{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:start}
.toast .em{width:56px;height:56px}
@media (max-width:640px){.titlecard{grid-template-columns:84px 1fr}.titlecard .em.big{width:84px;height:84px}.ladder li{grid-template-columns:2.6rem 48px 1fr}.ladder .em{width:48px;height:48px}}
/* ---- problem view ---- */
dialog#view{border:0;padding:0;margin:0;width:100%;max-width:none;height:100%;max-height:none;background:var(--paper);color:var(--ink)}
dialog#view::backdrop{background:rgba(10,10,12,.55)}
.vhead{position:sticky;top:0;z-index:2;background:var(--paper);border-bottom:1px solid var(--rule);padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px}
.vhead-in{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:10px}
.vtitle{font-size:1.2rem;line-height:1.25}
.vbody{max-width:900px;margin:0 auto;padding:16px 16px calc(40px + env(safe-area-inset-bottom,0px))}
.sec{font-family:var(--mono);font-size:.78rem;color:var(--muted);margin:20px 0 6px}
.sheet{background:var(--sheet);border:1px solid var(--rule);border-radius:4px;padding:14px;overflow-x:auto}
.sheet img{display:block;max-width:100%;height:auto;margin:0 auto;filter:var(--sheet-filter)}
.steps{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.solwrap{position:relative;overflow:hidden}
.solwrap.part::after{content:"";position:absolute;left:0;right:0;bottom:0;height:32px;background:linear-gradient(transparent,var(--sheet))}
.stepinfo{font-size:.9rem;color:var(--muted);margin:6px 0 0}
.pyth{border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:0 4px 4px 0;padding:12px 14px;margin:6px 0 14px;background:var(--raised)}
.pyth p{margin:0 0 8px}
.pyth ol{margin:0 0 10px;padding-left:1.3em}
.pyth textarea{width:100%;min-height:120px;font:13px/1.45 var(--mono);border:1px solid var(--rule);border-radius:4px;padding:8px;background:var(--paper);color:var(--ink)}
.loading{color:var(--muted);padding:20px;text-align:center}

/* ---- exam ---- */
.timer{font-family:var(--mono);font-size:2rem;letter-spacing:.02em}
.exam-q{margin:18px 0}

@media (max-width:640px){
  body{font-size:16px}
  nav.main{gap:12px}
  .vtitle{font-size:1.05rem}
}
@media (prefers-reduced-motion:no-preference){
  .reveal{animation:rv .25s ease-out}
  @keyframes rv{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
}