:root {
  --bg: #0b0f17;
  --panel: #131926;
  --panel-2: #1a2233;
  --border: #243049;
  --text: #e6edf6;
  --muted: #93a1b5;
  --accent: #5b8cff;
  --accent-2: #34d399;
  --warn: #f5a524;
  --baseline: #8a93a6;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  --radius: 14px;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(91, 140, 255, 0.12), transparent),
    var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 32px 20px 64px; }

.hero {
  display: flex; gap: 16px 24px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 18px;
}
.hero-text { flex: 1 1 420px; }
h1 {
  font-size: 32px; margin: 0; letter-spacing: -0.02em;
  background: linear-gradient(90deg, #fff, #9db8ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tagline { color: var(--muted); margin: 10px 0 0; max-width: 70ch; }
.tagline[hidden] { display: none; }
/* collapsible "about this page" icon next to the h1 */
.hero-info { width: 20px; height: 20px; font-size: 12px; margin-left: 12px; vertical-align: middle;
  -webkit-text-fill-color: var(--accent); -webkit-background-clip: border-box; background-clip: border-box; }
.hero-info:hover { -webkit-text-fill-color: #fff; }

.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.badge {
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
}
.badge b { color: var(--text); font-weight: 600; }

.hero-headline {
  flex: 0 0 auto; min-width: 220px; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow);
}
.hero-headline .big { font-size: 40px; font-weight: 700; color: var(--accent-2); letter-spacing: -0.02em; }
.hero-headline .lbl { color: var(--muted); font-size: 13px; }
.hero-headline .sub { color: var(--muted); font-size: 12px; margin-top: 6px; }

.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--shadow); margin-bottom: 20px;
}
.card h2 { margin: 0 0 4px; font-size: 17px; letter-spacing: -0.01em; }
.muted { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; } }

/* fixed chart height (prevents overflow); width fills the tile, with horizontal
   scroll when there are many models (min-width set per-chart in JS) */
canvas { display: block; height: 300px !important; max-height: 300px; width: 100% !important; }

.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: right; padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th { color: #c3cedd; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--panel-2); border-bottom: 1px solid var(--accent); }
tbody tr:hover { background: var(--panel-2); }
td.best { color: var(--accent-2); font-weight: 700; }
.pill { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.pill.mlx { color: #c4b5fd; border-color: #4c3f7a; }
.pill.transformers { color: #fbbf24; border-color: #6b5320; }

#arch { overflow-x: auto; padding: 6px 0; }
.arch-svg text { fill: var(--text); font-size: 12px; }
.arch-svg .muted-t { fill: var(--muted); font-size: 10px; }
.arch-svg .box { fill: var(--panel-2); stroke: var(--border); }
.arch-svg .box.future { stroke-dasharray: 4 3; opacity: 0.6; }
.arch-svg .flow { stroke: var(--accent); stroke-width: 1.5; fill: none; marker-end: url(#arrow); }

/* inline findings moved into the side panel's "What to look for" section */
.analysis { display: none; }
.analysis ul { margin: 0; padding-left: 18px; }
.analysis li { margin: 6px 0; font-size: 14px; }
.analysis li:first-child { margin-top: 0; }
.analysis li:last-child { margin-bottom: 0; }
.analysis b { color: var(--accent-2); }

footer { color: var(--muted); font-size: 12px; text-align: center; margin-top: 28px; }

.empty { color: var(--warn); padding: 40px; text-align: center; }

/* --- study sections --- */
h3 { font-size: 15px; font-weight: 600; color: var(--text); margin: 2px 0 12px; letter-spacing: -0.005em; }
.study-head { margin-bottom: 16px; }
.study-head h2 { font-size: 20px; }
.study .grid-2 { margin-bottom: 8px; }
.study .grid-2 > div { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.next-chapter { border-style: dashed; }
.next-chapter p { font-size: 14px; color: var(--text); max-width: 80ch; }

/* table of contents */
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.toc a { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--text); border-color: var(--accent); }

/* ---- nav bar ---- */
#nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 20px; margin: -32px -20px 24px; background: rgba(11,15,23,0.85);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
#nav .brand { font-weight: 700; color: var(--text); text-decoration: none; letter-spacing: -0.01em; }
.navlinks { display: flex; gap: 6px; flex-wrap: wrap; }
.navlinks a { font-size: 13px; padding: 6px 12px; border-radius: 8px; color: var(--muted); text-decoration: none; }
.navlinks a:hover { color: var(--text); background: var(--panel-2); }
.navlinks a.active { color: var(--text); background: var(--panel-2); border: 1px solid var(--border); }
.navlinks a.gh-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text);
  border: 1px solid #4a5a82; background: #33405e; font-weight: 600; }
.navlinks a.gh-link:hover { background: #3e4d70; border-color: #5d6f9c; }
.navlinks a.gh-link svg { display: block; }

/* ---- info-icon tooltip ---- */
.info { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  font-size: 10px; font-style: normal; font-weight: 700; font-family: Georgia, serif; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--accent); color: var(--accent); cursor: pointer;
  position: relative; vertical-align: middle; user-select: none; }
.info:hover { background: var(--accent); color: #fff; }
.corner-host { position: relative; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; overflow-x: auto; }
.grid-2 > .corner-host { margin-bottom: 0; }   /* grid gap handles spacing inside a row */
.info-corner { position: absolute; top: 10px; right: 10px; margin: 0; z-index: 3; }
/* hover = native title tooltip (clean, never clipped); click = full Overview/Deeper modal */

/* ---- info modal (click-to-open, Overview / Deeper tabs) ---- */
/* explanation drawer — slides in on the right; page stays visible (and usable) beside it */
.modal-overlay { position: fixed; inset: 0; z-index: 100; display: flex; justify-content: flex-end; pointer-events: none; }
.modal-overlay[hidden] { display: none; }
.modal { pointer-events: auto; background: var(--panel); border: none; border-left: 1px solid var(--accent);
  border-radius: 0; width: 380px; max-width: 92vw; height: 100%; padding: 22px 24px 40px; overflow-y: auto;
  box-shadow: -10px 0 36px rgba(0,0,0,0.4); position: relative; animation: drawerIn 0.22s ease; }
@keyframes drawerIn { from { transform: translateX(24px); opacity: 0.3; } to { transform: translateX(0); opacity: 1; } }
body.drawer-open .wrap { margin-right: 380px; transition: margin-right 0.2s ease; }
@media (max-width: 1024px) {
  .modal-overlay { pointer-events: auto; background: rgba(0,0,0,0.55); }
  .modal { width: 100vw; max-width: 100vw; border-left: none; }
  body.drawer-open .wrap { margin-right: 0; }
}
.modal h3 { color: var(--text); font-size: 18px; margin: 0 28px 14px 0; }
.modal-x { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--muted);
  font-size: 22px; line-height: 1; cursor: pointer; }
.modal-x:hover { color: var(--text); }
.modal-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.modal-tabs button { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.modal-tabs button.active { color: var(--text); border-color: var(--accent); background: rgba(91,140,255,0.12); }
.modal-body { font-size: 14px; line-height: 1.65; color: var(--text); }
.modal-look { margin-top: 16px; background: rgba(52,211,153,0.07); border: 1px solid rgba(52,211,153,0.28);
  border-left: 3px solid var(--accent-2); border-radius: 8px; padding: 12px 14px; }
.modal-look:empty { display: none; }
/* inline glossary links in prose — subtle dotted underline, open glossary in a new tab */
.gloss-link { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(91,140,255,0.75); cursor: help; }
.gloss-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.gloss dt:target { background: rgba(91,140,255,0.14); border-radius: 6px; padding: 2px 8px; margin: 0 -8px; }
@keyframes glossFlash {
  0%, 25% { background: rgba(91,140,255,0.45); box-shadow: 0 0 0 2px var(--accent); }
  100% { background: transparent; box-shadow: 0 0 0 2px transparent; }
}
.gloss dt.gloss-flash, .gloss dd.gloss-flash { border-radius: 6px; padding: 4px 8px; margin: 4px -8px; animation: glossFlash 2.6s ease; }
.modal-look .look-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-2); font-weight: 600; margin-bottom: 6px; }
.modal-look .look-body { font-size: 14px; line-height: 1.6; color: var(--text); }
.modal-learn { margin-top: 14px; }
.modal-learn:empty { display: none; }
.modal-learn .learn-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
  border-top: 1px solid var(--border); padding-top: 12px; margin-bottom: 6px; }
.modal-learn a { display: block; color: var(--accent); text-decoration: none; font-size: 14px; padding: 3px 0; }
.modal-learn a:hover { text-decoration: underline; }

/* ---- summary hub cards ---- */
.hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.hub a { display: block; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; text-decoration: none; color: var(--text); box-shadow: var(--shadow); }
.hub a:hover { border-color: var(--accent); }
.hub h3 { color: var(--text); font-size: 16px; margin: 0 0 6px; }
.hub p { color: var(--muted); font-size: 13px; margin: 0; }

/* ---- callout (baseline definition) ---- */
.callout { background: var(--panel-2); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 12px 14px; font-size: 13px; line-height: 1.6; color: var(--text); margin-bottom: 16px; }

/* ---- per-card header + model multi-select popover ---- */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px; }   /* breathing room between the header/dropdown row and the table or content below */
.card-head h2 { margin: 0; }
.modelpop { position: relative; flex: none; }
.pop-btn { display: inline-flex; align-items: center; gap: 8px; background: #33405e; color: var(--text);
  border: 1px solid #4a5a82; border-radius: 8px; padding: 0 12px; height: 34px; box-sizing: border-box;
  font-weight: 600; font-size: 13px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: border-color .15s, background-color .15s; }
.pop-btn:hover { background: #3e4d70; border-color: #5d6f9c; }
.pop-btn .caret { color: var(--text); font-size: 11px; }
.pop-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 180px;
  max-height: 320px; overflow-y: auto;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 2px; }
.pop-panel[hidden] { display: none; }
.pop-panel label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text);
  white-space: nowrap; padding: 5px 8px; border-radius: 6px; cursor: pointer; }
.pop-panel label:hover { background: rgba(91,140,255,0.10); }
.pop-panel input { accent-color: var(--accent); margin: 0; }

/* ---- explorer header + model select ---- */
.exp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.selwrap { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 10px; }
/* native single-select styled to MATCH .pop-btn exactly (same height, border, font, custom caret) */
.selwrap select, .ex-controls select {
  appearance: none; -webkit-appearance: none;
  background: #33405e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='none' stroke='%23e6edf6' stroke-width='1.8' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--text); border: 1px solid #4a5a82; border-radius: 8px;
  padding: 0 32px 0 12px; height: 34px; box-sizing: border-box; font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: border-color .15s, background-color .15s; }
.selwrap select:hover, .ex-controls select:hover { background-color: #3e4d70; border-color: #5d6f9c; }

/* ---- sub-tabs + explorer ---- */
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 20px; padding-bottom: 0; }
.subtabs button { background: none; color: var(--muted); border: none; border-bottom: 2px solid transparent;
  padding: 10px 16px; font-size: 14px; cursor: pointer; margin-bottom: -1px; }
.subtabs button:hover { color: var(--text); }
.subtabs button.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 500; }
.panel[hidden] { display: none; }
.toggles { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 18px; }
.tgroup { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tlabel { width: 130px; color: var(--muted); font-size: 13px; }
.tgroup button { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.tgroup button.active { color: var(--text); border-color: var(--accent); background: rgba(91,140,255,0.14); }
.tgroup button[disabled] { opacity: 0.35; cursor: not-allowed; }

/* ---- progress banner ---- */
.progress-banner { display: flex; align-items: center; gap: 10px; background: var(--panel-2);
  border: 1px solid var(--accent); border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-size: 13px; }
.progress-banner.done { border-color: #2a6; }
.progress-banner .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: 0 0 auto;
  animation: pulse 1.3s ease-in-out infinite; }
.progress-banner.done .dot { background: var(--accent-2); animation: none; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ---- model filter controls ---- */
.filterbar { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-bottom: 14px; }
.filtergroup { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.filtergroup button { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.filtergroup button:hover { color: var(--text); }
.filtergroup button.active { color: var(--text); border-color: var(--accent); background: rgba(91,140,255,0.12); }
.filtergroup button.ghost { padding: 4px 10px; font-size: 12px; }
.modelchips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 5px 10px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); cursor: pointer; user-select: none; }
.chip.on { color: var(--text); border-color: var(--accent); background: rgba(91,140,255,0.10); }
.chip input { accent-color: var(--accent); margin: 0; }

/* ---- model controls, merged into the top of the comparison card ---- */
.models-controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.models-controls .ctl-status { margin-left: 0; }
.models-controls .modelpop { margin-left: auto; }   /* Models ▾ sits on the right, like other tabs */
/* ---- compact single controls row (legacy) ---- */
.controls-card { padding: 12px 16px; margin-bottom: 16px; }
.controls-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.ctl-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.ctl-status { color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; gap: 7px; margin-left: auto; }
.ctl-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); flex: 0 0 auto; }
.ctl-status.pending .dot { background: var(--accent); animation: pulse 1.3s ease-in-out infinite; }
.note-inline { display: flex; gap: 8px; align-items: baseline; color: var(--muted); font-size: 12.5px;
  margin: 0 0 14px; padding: 7px 12px; border-left: 2px solid var(--warn); background: rgba(245,165,36,0.06); border-radius: 0 8px 8px 0; }
.note-inline b { color: var(--text); }

/* ---- examples ---- */
.ex-controls { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
/* .ex-controls select styled by the unified .selwrap select rule above */
.ex-q { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.ex-q .qtext { font-size: 14px; white-space: pre-wrap; }
.ex-answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.ex-a { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.ex-a .hd { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 8px; }
.ex-a pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; color: var(--muted);
  max-height: 320px; overflow: auto; margin: 0; font-family: var(--font-mono, ui-monospace, monospace); }
.tag-pass { color: var(--accent-2); border: 1px solid #2a6; border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.tag-fail { color: var(--warn); border: 1px solid #863; border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.pill.coding { color: #c4b5fd; border-color: #4c3f7a; }
.pill.general { color: #7dd3fc; border-color: #235; }

/* ---- story / narrative ---- */
.story { font-size: 14px; line-height: 1.7; color: var(--text); }
.story p { margin: 0 0 12px; }
.story ol { margin: 0 0 12px; padding-left: 20px; }
.story li { margin: 8px 0; }
.story code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; font-size: 13px; }

/* ---- glossary page ---- */
.gloss dt { font-weight: 600; color: var(--text); margin-top: 16px; font-size: 15px; }
.gloss dd { color: var(--muted); margin: 4px 0 0; font-size: 14px; }

/* metric cards */
.metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.metric { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; position: relative; }
.metric .lbl { font-size: 12px; color: var(--muted); padding-right: 18px; }
.metric .val { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.metric .val.good { color: var(--accent-2); }
.metric .sub { font-size: 11px; color: var(--muted); margin-top: 2px; }