/* ============================================================
   LOGARITMY — design system
   Helvetica Neue · light/dark · minimal · animated
   ============================================================ */
:root{
  --font: "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;

  /* light theme */
  --bg:        #f6f6f4;
  --bg-2:      #ffffff;
  --ink:       #111114;
  --ink-soft:  #5b5b63;
  --ink-faint: #9a9aa3;
  --line:      #e7e7e3;
  --line-2:    #d9d9d3;
  --accent:    #2f6df6;
  --accent-2:  #6f4bf0;
  --good:      #16a06a;
  --bad:       #e0483c;
  --hl-bg:     rgba(47,109,246,.12);
  --shadow:    0 1px 2px rgba(20,20,30,.05), 0 12px 34px rgba(20,20,40,.08);
  --shadow-sm: 0 1px 2px rgba(20,20,30,.06), 0 6px 18px rgba(20,20,40,.06);

  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 10px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"]{
  --bg:        #0b0b0d;
  --bg-2:      #151518;
  --ink:       #f3f3f5;
  --ink-soft:  #a9a9b3;
  --ink-faint: #6a6a74;
  --line:      #222226;
  --line-2:    #2c2c32;
  --accent:    #5b8cff;
  --accent-2:  #9a7bff;
  --good:      #34d399;
  --bad:       #ff6b5e;
  --hl-bg:     rgba(91,140,255,.16);
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.5);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.4);
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }   /* author display rules must not override hidden */
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-weight:400;
  line-height:1.55;
  transition: background .5s var(--ease), color .4s var(--ease);
  min-height:100vh;
  padding-bottom:64px;
}
::selection{ background:var(--hl-bg); }
button{ font-family:inherit; cursor:pointer; }

/* ============================================================
   TOP BAR  + PILL NAV
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:16px;
  padding:14px 22px;
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease);
}
.topbar.scrolled{ border-bottom-color:var(--line); }

.brand{ display:flex; align-items:center; cursor:pointer; user-select:none; }
.brand-mark{
  font-weight:600; font-size:19px; letter-spacing:-.02em;
  padding:4px 12px; border-radius:999px;
  border:1px solid var(--line-2);
  transition:transform .35s var(--ease), border-color .3s;
}
.brand:hover .brand-mark{ transform:translateY(-1px); border-color:var(--accent); }

.pill{
  position:relative;
  display:flex; align-items:center; gap:2px;
  margin:0 auto;
  padding:5px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:999px;
  box-shadow:var(--shadow-sm);
}
.pill-item{
  position:relative; z-index:2;
  border:none; background:transparent;
  color:var(--ink-soft);
  font-size:14.5px; font-weight:500; letter-spacing:-.01em;
  padding:9px 18px; border-radius:999px;
  transition:color .3s var(--ease);
  white-space:nowrap;
}
.pill-item:hover{ color:var(--ink); }
.pill-item.is-active{ color:#fff; font-weight:600; }
[data-theme="dark"] .pill-item.is-active{ color:#0b0b0d; }
.pill-indicator{
  position:absolute; z-index:1; top:5px; left:5px;
  height:calc(100% - 10px);
  border-radius:999px;
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 45%, transparent);
  transition:transform .42s var(--ease), width .42s var(--ease), opacity .3s;
  opacity:0;
}

.theme-toggle{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:999px;
  background:var(--bg-2); border:1px solid var(--line);
  color:var(--ink); box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease), border-color .3s;
}
.theme-toggle:hover{ transform:translateY(-1px) rotate(-8deg); border-color:var(--accent); }
.theme-toggle svg{ fill:none; stroke:currentColor; stroke-width:1.7; }
.theme-toggle .ic-sun line{ stroke:currentColor; stroke-width:1.8; }
.ic-moon{ display:none; }
[data-theme="dark"] .ic-sun{ display:none; }
[data-theme="dark"] .ic-moon{ display:block; fill:currentColor; stroke:none; }

/* ============================================================
   VIEWS / LAYOUT
   ============================================================ */
#stage{ max-width:1120px; margin:0 auto; padding:30px 22px 60px; }
.view{ animation:viewIn .5s var(--ease) both; }
@keyframes viewIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }

.view-head{ max-width:680px; margin:14px 0 30px; }
.h-hero{
  font-size:clamp(34px,6vw,58px); font-weight:600; letter-spacing:-.035em;
  line-height:1.02; margin:0 0 14px;
}
.lead{ font-size:17px; color:var(--ink-soft); margin:0; max-width:60ch; }
.lead b{ color:var(--ink); font-weight:600; }

/* ============================================================
   PŘÍKLADY — list
   ============================================================ */
.ex-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.ex-item{
  display:flex; align-items:center; gap:18px;
  padding:18px 22px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
  animation:rowIn .5s var(--ease) both;
}
.ex-item:hover{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 50%,var(--line)); box-shadow:var(--shadow); }
@keyframes rowIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.ex-num{
  flex:none; width:34px; height:34px; border-radius:999px;
  display:grid; place-items:center;
  font-weight:600; font-size:14px; color:var(--ink-soft);
  background:var(--bg); border:1px solid var(--line-2);
}
.ex-item:hover .ex-num{ color:#fff; background:linear-gradient(120deg,var(--accent),var(--accent-2)); border-color:transparent; }
[data-theme="dark"] .ex-item:hover .ex-num{ color:#0b0b0d; }
.ex-body{ flex:1; min-width:0; }
.ex-title{ font-weight:600; font-size:16.5px; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ex-sub{ color:var(--ink-faint); font-size:13.5px; margin-top:3px; }
.ex-eq-mini{ color:var(--ink-soft); font-size:15px; }
.ex-go{ flex:none; color:var(--ink-faint); transition:transform .3s var(--ease), color .3s; }
.ex-item:hover .ex-go{ transform:translateX(4px); color:var(--accent); }

.chip{
  font-size:11.5px; font-weight:600; letter-spacing:.02em;
  padding:3px 9px; border-radius:999px;
  background:var(--hl-bg); color:var(--accent);
}
.chip.lvl1{ background:color-mix(in srgb,var(--good) 14%,transparent); color:var(--good); }
.chip.lvl2{ background:var(--hl-bg); color:var(--accent); }
.chip.lvl3{ background:color-mix(in srgb,var(--accent-2) 16%,transparent); color:var(--accent-2); }
.chip.lvl4{ background:color-mix(in srgb,var(--bad) 14%,transparent); color:var(--bad); }
.sec-label{
  margin:26px 4px 8px; font-size:12.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-faint);
}
.sec-label:first-child{ margin-top:6px; }

/* ============================================================
   SOLVER
   ============================================================ */
.back-link{
  border:none; background:transparent; color:var(--ink-soft);
  font-size:14.5px; font-weight:500; padding:6px 0; margin-bottom:8px;
  transition:color .3s, transform .3s var(--ease);
}
.back-link:hover{ color:var(--accent); transform:translateX(-3px); }

.solver-grid{
  display:grid; grid-template-columns:1.15fr 1fr; gap:30px;
  align-items:stretch;
}
.solver-left{
  position:relative;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:30px; min-height:340px;
  display:flex; flex-direction:column;
}
.ex-meta{ display:flex; align-items:center; gap:12px; margin-bottom:auto; }
.ex-name{ color:var(--ink-soft); font-size:14px; font-weight:500; }

.eq-stage{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:24px 6px; min-height:160px;
}
.eq-line{
  font-size:clamp(26px,4.4vw,40px); font-weight:400; letter-spacing:-.01em;
  text-align:center; line-height:1.5; color:var(--ink);
  animation:eqIn .45s var(--ease) both;
}
@keyframes eqIn{ from{opacity:0; transform:translateY(12px) scale(.98);} to{opacity:1; transform:none;} }
/* dim everything (color inherits to bare text nodes too) except .hl */
.eq-line.focus{ color:var(--ink-faint); transition:color .4s var(--ease); }
.eq-line .hl{ color:var(--accent); }
.eq-line .hl.warn{ color:var(--bad); }
.eq-line .hl.ok{ color:var(--good); }
.hlbox{ background:var(--hl-bg); border-radius:7px; padding:1px 5px; transition:background .4s; }

.finish-zone[hidden]{ display:none; }
.finish-zone{ display:flex; justify-content:center; margin-top:14px; }
.finish-btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:16px; font-weight:600; color:#fff;
  padding:13px 26px; border:none; border-radius:999px;
  background:linear-gradient(120deg,var(--good),#0f8a59);
  box-shadow:0 8px 24px color-mix(in srgb,var(--good) 40%,transparent);
  transition:transform .25s var(--ease), box-shadow .25s;
  animation:breathe 2.2s var(--ease-soft) infinite;
}
.finish-btn:hover{ transform:translateY(-2px) scale(1.02); }
.finish-btn:active{ transform:scale(.95); }
.finish-btn .check{ fill:none; stroke:#fff; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:48; stroke-dashoffset:48; }
.finish-btn.done{ animation:popDone .5s var(--ease); }
.finish-btn.done .check{ animation:drawCheck .5s .05s var(--ease) forwards; }
@keyframes breathe{ 0%,100%{ box-shadow:0 8px 24px color-mix(in srgb,var(--good) 32%,transparent);} 50%{ box-shadow:0 8px 34px color-mix(in srgb,var(--good) 55%,transparent);} }
@keyframes popDone{ 0%{transform:scale(1);} 35%{transform:scale(1.12);} 100%{transform:scale(1);} }
@keyframes drawCheck{ to{ stroke-dashoffset:0; } }

/* right panel */
.solver-right{ display:flex; flex-direction:column; padding-top:6px; }
.step-counter{ font-size:13px; font-weight:600; color:var(--ink-faint); letter-spacing:.02em; }
.progress{ height:5px; border-radius:999px; background:var(--line); margin:10px 0 20px; overflow:hidden; }
.progress span{ display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .45s var(--ease); }
.step-title{ font-size:22px; font-weight:600; letter-spacing:-.02em; margin:0 0 12px; }
.step-note{ font-size:16px; color:var(--ink-soft); line-height:1.68; animation:noteIn .45s var(--ease) both; }
.step-note p{ margin:0 0 12px; }
.step-note b{ color:var(--ink); font-weight:600; }
.step-note .why{
  margin-top:6px; padding:12px 14px; border-left:3px solid var(--accent);
  background:var(--hl-bg); border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:14.5px; color:var(--ink);
}
.step-note .vz{
  display:inline-block; margin:2px 0; padding:3px 8px; border-radius:7px;
  background:var(--bg); border:1px solid var(--line-2); font-size:15px;
}
.step-note .warn-note{ border-left-color:var(--bad); background:color-mix(in srgb,var(--bad) 9%,transparent); }
@keyframes noteIn{ from{opacity:0; transform:translateX(8px);} to{opacity:1; transform:none;} }

/* solver bottom nav */
.solver-nav{ display:flex; align-items:center; justify-content:center; gap:22px; margin-top:26px; }
.arrow{
  display:grid; place-items:center; width:54px; height:54px; border-radius:999px;
  background:var(--bg-2); border:1px solid var(--line); color:var(--ink);
  box-shadow:var(--shadow-sm);
  transition:transform .28s var(--ease), border-color .28s, opacity .28s, background .28s;
}
.arrow svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.arrow:not(:disabled):hover{ transform:translateY(-2px); border-color:var(--accent); }
.arrow:disabled{ opacity:.32; cursor:not-allowed; }
.arrow-next{ background:linear-gradient(120deg,var(--accent),var(--accent-2)); color:#fff; border-color:transparent; }
.arrow-next:not(:disabled):hover{ box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 45%,transparent); }
.dots{ display:flex; gap:8px; }
.dot{ width:8px; height:8px; border-radius:999px; background:var(--line-2); transition:all .3s var(--ease); }
.dot.done{ background:var(--accent); }
.dot.active{ background:var(--accent); transform:scale(1.5); }

/* confetti burst */
.confetti{ position:fixed; width:9px; height:9px; border-radius:2px; pointer-events:none; z-index:200; }

/* ============================================================
   GRAFY
   ============================================================ */
.graf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start; }
.graf-left{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:18px;
}
#grafCanvas{ width:100%; height:auto; display:block; border-radius:var(--r-md); }
.graf-right{ display:flex; flex-direction:column; gap:18px; }
.ctrl-card,.info-card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm); padding:20px;
}
.ctrl-card h3,.info-card h3{ margin:0 0 14px; font-size:16px; font-weight:600; letter-spacing:-.01em; }
.ctrl{ margin-bottom:16px; }
.ctrl:last-child{ margin-bottom:0; }
.ctrl label{ display:flex; justify-content:space-between; font-size:14px; color:var(--ink-soft); margin-bottom:7px; }
.ctrl label b{ color:var(--accent); font-weight:600; }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:999px; background:var(--line); outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:999px; background:var(--accent); border:3px solid var(--bg-2); box-shadow:var(--shadow-sm); cursor:pointer; transition:transform .2s; }
input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.15); }
.preset-row{ display:flex; gap:8px; flex-wrap:wrap; }
.preset{ font-size:13.5px; font-weight:600; padding:8px 14px; border-radius:999px; border:1px solid var(--line-2); background:var(--bg); color:var(--ink-soft); transition:all .25s var(--ease); }
.preset:hover{ color:var(--ink); border-color:var(--accent); transform:translateY(-1px); }
.preset.active{ color:#fff; background:linear-gradient(120deg,var(--accent),var(--accent-2)); border-color:transparent; }
[data-theme="dark"] .preset.active{ color:#0b0b0d; }
.info-card p{ margin:0 0 11px; font-size:14.5px; color:var(--ink-soft); line-height:1.62; }
.info-card p:last-child{ margin:0; }
.info-card .k{ font-weight:600; color:var(--ink); }
.eqbig{ font-size:24px; text-align:center; margin:6px 0 16px; }

/* ============================================================
   TEST
   ============================================================ */
.test-stage{ display:flex; flex-direction:column; gap:18px; max-width:760px; }
.q-card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm); padding:24px;
  animation:rowIn .45s var(--ease) both;
}
.q-num{ font-size:12.5px; font-weight:600; color:var(--ink-faint); letter-spacing:.04em; text-transform:uppercase; }
.q-text{ font-size:21px; margin:8px 0 18px; font-weight:500; }
.opts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.opt{
  text-align:left; padding:14px 16px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:var(--bg); color:var(--ink);
  font-size:16px; transition:all .22s var(--ease);
}
.opt:hover{ border-color:var(--accent); transform:translateY(-1px); }
.opt.correct{ border-color:var(--good); background:color-mix(in srgb,var(--good) 12%,transparent); color:var(--good); font-weight:600; }
.opt.wrong{ border-color:var(--bad); background:color-mix(in srgb,var(--bad) 12%,transparent); color:var(--bad); }
.opt.lock{ pointer-events:none; }
.q-feedback{ margin-top:14px; font-size:14.5px; color:var(--ink-soft); }
.q-feedback.ok{ color:var(--good); } .q-feedback.no{ color:var(--bad); }

.match-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.match-graphs{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mini-graph{ background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:8px; position:relative; }
.mini-graph canvas{ width:100%; height:auto; display:block; }
.mini-tag{ position:absolute; top:8px; left:10px; font-weight:600; font-size:13px; color:var(--ink-soft); }
.match-funcs{ display:flex; flex-direction:column; gap:10px; }
.func-pick{
  display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:var(--bg); font-size:16px; transition:all .22s var(--ease);
}
.func-pick:hover{ border-color:var(--accent); }
.func-pick select{ margin-left:auto; font-family:inherit; font-size:14px; padding:6px 8px; border-radius:8px; border:1px solid var(--line-2); background:var(--bg-2); color:var(--ink); }

.score-card{ text-align:center; padding:40px 24px; }
.score-big{ font-size:54px; font-weight:600; letter-spacing:-.03em; background:linear-gradient(120deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.btn{
  font-size:15px; font-weight:600; color:#fff;
  padding:12px 22px; border:none; border-radius:999px;
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 40%,transparent); }
.btn:active{ transform:scale(.97); }
.btn.ghost{ color:var(--ink-soft); background:var(--bg-2); border:1px solid var(--line); box-shadow:none; }
.btn.ghost:hover{ color:var(--ink); border-color:var(--accent); box-shadow:none; }

/* ============================================================
   FEEDBACK
   ============================================================ */
.fb-card{ max-width:720px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:26px; }
.fb-text{ width:100%; min-height:150px; resize:vertical; border:1px solid var(--line-2); border-radius:var(--r-md);
  background:var(--bg); color:var(--ink); font-family:inherit; font-size:16px; line-height:1.6; padding:16px; outline:none; transition:border-color .3s; }
.fb-text:focus{ border-color:var(--accent); }
.fb-row{ display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap; }
.fb-status{ font-size:14px; color:var(--good); font-weight:500; opacity:0; transition:opacity .3s; }
.fb-status.show{ opacity:1; }
.fb-log{ margin-top:18px; display:flex; flex-direction:column; gap:8px; }
.fb-entry{ font-size:14px; color:var(--ink-soft); padding:12px 14px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm); }
.fb-entry .t{ font-size:12px; color:var(--ink-faint); display:block; margin-bottom:4px; }

/* ============================================================
   NOTES POPUP
   ============================================================ */
.notes-fab{
  position:fixed; right:22px; bottom:22px; z-index:80;
  width:54px; height:54px; border-radius:999px;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  border:none; box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 45%,transparent);
  transition:transform .3s var(--ease);
}
.notes-fab svg{ fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.notes-fab:hover{ transform:translateY(-3px) scale(1.05); }
.notes-fab:active{ transform:scale(.92); }
.notes-panel[hidden]{ display:none; }
.notes-panel{
  position:fixed; right:22px; bottom:88px; z-index:80;
  width:min(360px,calc(100vw - 44px)); height:min(460px,60vh);
  display:flex; flex-direction:column;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  transform-origin:bottom right;
  animation:notesIn .35s var(--ease) both;
}
.notes-panel.closing{ animation:notesOut .25s var(--ease) both; }
@keyframes notesIn{ from{opacity:0; transform:translateY(14px) scale(.96);} to{opacity:1; transform:none;} }
@keyframes notesOut{ to{opacity:0; transform:translateY(14px) scale(.96);} }
.notes-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); font-weight:600; font-size:14px; }
.notes-tools{ display:flex; align-items:center; gap:10px; }
.notes-saved{ font-size:12px; color:var(--ink-faint); opacity:0; transition:opacity .3s; }
.notes-saved.show{ opacity:1; }
.notes-x{ border:none; background:transparent; color:var(--ink-faint); font-size:22px; line-height:1; width:26px; height:26px; border-radius:7px; transition:all .2s; }
.notes-x:hover{ color:var(--ink); background:var(--line); }
.notes-text{ flex:1; border:none; outline:none; resize:none; background:transparent; color:var(--ink);
  font-family:inherit; font-size:15px; line-height:1.65; padding:16px; }

/* ============================================================
   MATH RENDER PRIMITIVES
   ============================================================ */
.m{ font-feature-settings:"tnum"; }
.frac{ display:inline-flex; flex-direction:column; vertical-align:-.55em; text-align:center; margin:0 .12em; }
.frac .num{ display:block; padding:0 .35em; line-height:1.05; }
.frac .den{ display:block; padding:0 .35em; line-height:1.15; border-top:.06em solid currentColor; }
.frac.sm{ font-size:.62em; vertical-align:-.4em; }
sub.b{ font-size:.62em; font-weight:500; vertical-align:-.28em; margin-left:.02em; }
sup.e{ font-size:.62em; vertical-align:.55em; margin-left:.02em; }
.rad{ display:inline-flex; align-items:flex-start; }
.rad .sign{ font-size:1.05em; }
.rad .cont{ border-top:.06em solid currentColor; padding:0 .18em; margin-top:.08em; }
.rad .idx{ font-size:.55em; vertical-align:.6em; margin-right:-.18em; }
.op{ margin:0 .28em; color:var(--ink-soft); }
.eq-line.focus .op{ }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px){
  .solver-grid{ grid-template-columns:1fr; gap:18px; }
  .graf-grid{ grid-template-columns:1fr; }
  .opts{ grid-template-columns:1fr; }
  .match-grid{ grid-template-columns:1fr; }
  .pill-item{ padding:8px 13px; font-size:13.5px; }
  .topbar{ gap:8px; padding:10px 12px; }
  .brand{ display:none; }
}
@media (max-width: 560px){
  .pill{ overflow-x:auto; max-width:calc(100vw - 70px); }
  .pill::-webkit-scrollbar{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}