/* ============================================================ tokens */
:root{
  --bg:#0e1220; --bg2:#141a2e; --panel:#171e34; --panel2:#1e2740;
  --line:#2a3352; --line2:#374169;
  --ink:#eef2ff; --muted:#93a0c4; --faint:#66739a;
  --brand:#7c9cff; --brand2:#5a78e6;
  --good:#3ecf8e; --warn:#ffb454; --bad:#ff8080; --path:#ff7a8a;
  --on-good:#8ff0c4; --on-bad:#ffb3b3;
  --shadow:0 12px 34px rgba(0,0,0,.34); --radius:16px;
  --nav-bg:rgba(14,18,32,.82);
  --page:radial-gradient(1100px 600px at 12% -8%,#18213c 0,transparent 60%),
         radial-gradient(900px 520px at 100% 0,#1a2340 0,transparent 55%), #0e1220;
  --code-bg:#0b0f1c;
  --hero-scrim-strong:rgba(14,18,32,.9); --hero-scrim:rgba(14,18,32,.55);
}
[data-theme="light"]{
  --bg:#ffffff; --bg2:#f6f8fc; --panel:#ffffff; --panel2:#f5f7fc;
  --line:#e4e8f1; --line2:#d3dae8;
  --ink:#161d2f; --muted:#5c6a86; --faint:#8a95ad;
  --brand:#4a63c8; --brand2:#3a52b8;
  --good:#1f9d63; --warn:#c07d0a; --bad:#d9455a; --path:#d9455a;
  --on-good:#137a49; --on-bad:#c0303f;
  --shadow:0 12px 30px rgba(60,80,140,.12);
  --nav-bg:rgba(255,255,255,.86);
  --page:radial-gradient(1100px 600px at 12% -8%,#eef3ff 0,transparent 60%),
         radial-gradient(900px 520px at 100% 0,#eaf0ff 0,transparent 55%), #ffffff;
  --code-bg:#0f1424;
  --hero-scrim-strong:rgba(255,255,255,.9); --hero-scrim:rgba(255,255,255,.5);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:Inter,system-ui,sans-serif; color:var(--ink); background:var(--page);
  line-height:1.6; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
h1,h2,h3{line-height:1.2; letter-spacing:-.02em}
.mono{font-family:"JetBrains Mono",monospace}

/* ============================================================ nav */
.nav{position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:12px 26px; background:var(--nav-bg); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.nav-brand{display:flex; align-items:center; gap:11px; font-weight:800; font-size:16px}
.nav-logo{width:34px; height:34px; border-radius:9px; background:#fff; object-fit:cover;
  box-shadow:0 4px 14px rgba(124,156,255,.3)}
.nav-links{display:flex; align-items:center; gap:22px}
.nav-links a{font-size:14px; font-weight:600; color:var(--muted); transition:.15s}
.nav-links a:hover{color:var(--ink)}
.theme-btn{background:var(--panel2); border:1px solid var(--line2); width:34px; height:34px;
  border-radius:9px; cursor:pointer; font-size:14px}
.btn-launch{background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff !important;
  padding:9px 16px; border-radius:10px; font-size:13.5px !important; box-shadow:0 6px 16px rgba(124,156,255,.35)}
.btn-launch:hover{transform:translateY(-1px)}

/* ============================================================ buttons */
.btn{display:inline-block; font-weight:700; border-radius:12px; padding:11px 20px; font-size:14px;
  border:1px solid var(--line2); background:var(--panel2); color:var(--ink); cursor:pointer; transition:.16s}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; border-color:transparent;
  box-shadow:0 10px 26px rgba(124,156,255,.4)}
.btn.ghost{background:transparent}
.btn.lg{padding:14px 26px; font-size:15px; border-radius:14px}

/* ============================================================ hero (dark banner) */
.hero{padding:82px 24px 60px; text-align:center; position:relative; overflow:hidden;
  background:radial-gradient(960px 520px at 50% -14%, rgba(124,156,255,.22) 0, transparent 60%), #0a0e1c;
  /* re-scope tokens so all hero content renders light-on-dark regardless of page theme */
  --ink:#f5f7ff; --muted:#aeb8d6; --line2:rgba(255,255,255,.22); --panel2:rgba(255,255,255,.08)}
.hero-inner{max-width:820px; margin:0 auto; position:relative; z-index:2}

/* blue-grid hero background */
.hero-grid{position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(124,156,255,.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(124,156,255,.18) 1px, transparent 1px);
  background-size:50px 50px;
  -webkit-mask:radial-gradient(ellipse 105% 115% at 50% 32%, #000 28%, transparent 82%);
  mask:radial-gradient(ellipse 105% 115% at 50% 32%, #000 28%, transparent 82%);
  animation:gridDrift 22s linear infinite}
@keyframes gridDrift{from{background-position:0 0, 0 0} to{background-position:50px 50px, 50px 50px}}
@media (prefers-reduced-motion:reduce){ .hero-grid{animation:none} }
.hero-eyebrow{display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--brand); background:rgba(124,156,255,.12); border:1px solid rgba(124,156,255,.3);
  padding:6px 14px; border-radius:20px; margin-bottom:22px}
.hero h1{font-size:clamp(34px,6vw,58px); font-weight:900; margin:0 0 20px; color:#fff; text-shadow:0 2px 24px rgba(4,7,16,.7)}
.hero-eyebrow, .hero-sub, .hero-stats{text-shadow:0 1px 14px rgba(4,7,16,.55)}
.grad{background:linear-gradient(120deg,var(--brand),#6ad6c1); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-sub{font-size:clamp(16px,2.4vw,20px); color:var(--muted); max-width:660px; margin:0 auto 30px}
.hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.hero-stats{display:flex; gap:40px; justify-content:center; margin-top:48px; flex-wrap:wrap}
.hero-stats div{display:flex; flex-direction:column}
.hero-stats b{font-size:30px; font-weight:800; color:var(--ink)}
.hero-stats span{font-size:13px; color:var(--muted)}

/* ============================================================ sections */
section{padding:56px 24px}
.section-head{max-width:760px; margin:0 auto 40px; text-align:center}
.section-head h2{font-size:clamp(26px,4vw,38px); font-weight:800; margin:0 0 10px}
.section-head p{color:var(--muted); font-size:16px; margin:0}
.live-key{display:inline-flex; align-items:center; gap:6px; font-size:13px}
.dot-live{width:8px; height:8px; border-radius:50%; background:var(--good); box-shadow:0 0 0 3px rgba(62,207,142,.2); display:inline-block}

/* how */
.how-grid{max-width:1000px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.how-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow)}
.how-num{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-weight:800; font-size:18px;
  background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; margin-bottom:16px}
.how-card h3{margin:0 0 8px; font-size:19px}
.how-card p{margin:0; color:var(--muted); font-size:14.5px}

/* algorithms */
.algorithms{max-width:1180px; margin:0 auto}
.cat-block{margin-bottom:46px}
.cat-head{margin-bottom:18px; border-left:3px solid var(--brand); padding-left:14px}
.cat-head h3{margin:0; font-size:22px; font-weight:800}
.cat-head p{margin:2px 0 0; color:var(--muted); font-size:14px}
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px}
.algo-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px; transition:.16s; display:flex; flex-direction:column; gap:8px}
.algo-card:hover{transform:translateY(-3px); border-color:var(--brand); box-shadow:var(--shadow)}
.algo-card-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.algo-name{font-weight:800; font-size:16px}
.badge-live{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--good);
  background:rgba(62,207,142,.14); border:1px solid rgba(62,207,142,.4); padding:3px 8px; border-radius:20px; white-space:nowrap}
.algo-tag{margin:0; color:var(--muted); font-size:14px; flex:1}
.algo-go{font-size:13px; font-weight:700; color:var(--brand)}

/* cta band */
.cta-band{text-align:center; background:linear-gradient(135deg,rgba(124,156,255,.12),rgba(106,214,193,.1));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.cta-band h2{font-size:30px; font-weight:800; margin:0 0 8px}
.cta-band p{color:var(--muted); margin:0 0 22px}

/* ============================================================ doc (algorithm) page */
.doc{max-width:820px; margin:0 auto; padding:30px 24px 70px}
.crumbs{font-size:13px; color:var(--muted); margin-bottom:20px}
.crumbs a:hover{color:var(--brand)} .crumbs span{margin:0 7px; color:var(--faint)}
.doc-hero{padding:26px 0 30px; border-bottom:1px solid var(--line); margin-bottom:34px}
.cat-badge{display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.8px;
  color:var(--muted); background:var(--panel2); border:1px solid var(--line2); padding:5px 12px; border-radius:20px}
.cat-badge.informed{color:var(--warn); border-color:rgba(255,180,84,.4)}
.doc-hero h1{font-size:clamp(30px,5vw,44px); font-weight:900; margin:16px 0 10px}
.doc-tag{font-size:18px; color:var(--muted); margin:0 0 22px}
.soon-pill{display:inline-block; font-size:13px; font-weight:600; color:var(--warn);
  background:rgba(255,180,84,.12); border:1px solid rgba(255,180,84,.4); padding:9px 16px; border-radius:12px}
.hero-path{margin:0 0 22px; max-width:600px}
.hero-path img{width:100%; display:block; border:1px solid var(--line); border-radius:14px; background:#141a2e; box-shadow:var(--shadow)}
.hero-path figcaption{margin-top:11px; font-size:14px; color:var(--muted); line-height:1.5}
.hero-path figcaption b{color:var(--path); font-weight:700}
.doc-sec{margin:0 0 34px}
.doc-sec h2{font-size:23px; font-weight:800; margin:0 0 12px}
.doc-sec > p{font-size:16.5px; color:var(--ink); opacity:.92; margin:0}
.steps{margin:0; padding-left:0; counter-reset:s; list-style:none}
.steps li{position:relative; padding:0 0 16px 46px; counter-increment:s; color:var(--ink); opacity:.92}
.steps li::before{content:counter(s); position:absolute; left:0; top:-2px; width:30px; height:30px; border-radius:9px;
  background:var(--panel2); border:1px solid var(--line2); color:var(--brand); font-weight:800; font-size:14px; display:grid; place-items:center}
.steps li:not(:last-child)::after{content:""; position:absolute; left:14.5px; top:30px; bottom:4px; width:2px; background:var(--line)}

/* analogy + insight callouts */
.analogy,.insight{display:flex; gap:16px; background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--brand);
  border-radius:14px; padding:20px 22px; margin:0 0 34px; box-shadow:var(--shadow)}
.insight{border-left-color:var(--good)}
.analogy-icon,.insight-icon{font-size:26px; line-height:1}
.analogy h3,.insight h3{margin:0 0 6px; font-size:16px}
.analogy p,.insight p{margin:0; color:var(--muted); font-size:15px}

/* code */
.code{background:var(--code-bg); border:1px solid var(--line); border-radius:14px; padding:20px 22px; overflow-x:auto;
  font-family:"JetBrains Mono",monospace; font-size:13.5px; line-height:1.7; color:#cdd6f4; white-space:pre; margin:0}

/* how-to-read diagram */
.how2read{max-width:900px}
.diagram{margin:8px 0 42px}
.diagram svg{width:100%; height:auto; display:block; background:var(--panel); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow); padding:6px}
.diag-frame{fill:rgba(124,156,255,.05); stroke:var(--line2); stroke-width:1.5; stroke-dasharray:6 5}
.diag-frame-tag{fill:var(--muted); font-size:12px; font-weight:700; letter-spacing:.4px; font-family:Inter,sans-serif}
.diag-edges line{stroke:var(--line2); stroke-width:2.5}
.diag-cost text{fill:var(--muted); font-size:15px; font-weight:700; text-anchor:middle; font-family:"JetBrains Mono",monospace}
.diag-node{fill:#2a3556; stroke:#5566a0; stroke-width:2.5}
.diag-node.diag-start{stroke:var(--good); stroke-width:4}
.diag-node.diag-goal{stroke:var(--warn); stroke-width:4}
.diag-node.diag-hl{stroke:var(--path); stroke-width:3.5}
.diag-letter text{fill:#fff; font-size:18px; font-weight:800; text-anchor:middle; dominant-baseline:central; font-family:Inter,sans-serif}
.diag-sub text{fill:var(--muted); font-size:11px; font-weight:800; letter-spacing:1.2px; text-anchor:middle; font-family:Inter,sans-serif}
.diag-tag rect{fill:var(--panel2); stroke:var(--path); stroke-width:1.5}
.diag-tag text{fill:var(--path); font-size:12.5px; font-weight:700; text-anchor:middle; dominant-baseline:central; font-family:"JetBrains Mono",monospace}
.diag-call .lead{fill:none; stroke:var(--brand); stroke-width:1.5; stroke-dasharray:4 4}
.diag-call text{fill:var(--ink); font-size:13.5px; font-weight:600; text-anchor:middle; font-family:Inter,sans-serif}
.diagram figcaption{margin-top:14px; font-size:14px; color:var(--muted); text-align:center; line-height:1.55}
.diagram figcaption b{color:var(--ink)}

/* glossary — reading a search problem */
.glossary{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:6px}
.gl{background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:15px 17px}
.gl.wide{grid-column:1 / -1}
.gl-term{display:inline-block; font-family:"JetBrains Mono",monospace; font-weight:700; font-size:15px;
  color:var(--brand); margin-bottom:7px}
.gl-term .gl-alt{font-family:Inter,sans-serif; font-weight:600; font-size:12px; color:var(--muted)}
.gl p{margin:0; font-size:14px; color:var(--muted); line-height:1.55}
.gl p b{color:var(--ink); font-weight:600}
.gl-note{margin-top:16px !important; background:var(--panel2); border:1px solid var(--line);
  border-radius:12px; padding:13px 16px; font-size:14px; color:var(--muted) !important}
.gl-note b{color:var(--ink)}

/* step-by-step gallery */
.stepper{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow)}
.stepper-img{background:#141a2e; border:1px solid var(--line); border-radius:12px; overflow:hidden; line-height:0}
.stepper-img img{width:100%; display:block}
.stepper-cap{font-size:14.5px; color:var(--ink); opacity:.92; padding:14px 6px 10px; line-height:1.5}
.step-data{background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:6px 14px; margin:2px 0 4px; transition:.2s}
.step-data.done{border-color:var(--good); background:rgba(62,207,142,.08)}
.sd-row{display:grid; grid-template-columns:150px 1fr; gap:12px; align-items:baseline; padding:9px 0; border-bottom:1px dashed var(--line)}
.sd-row:last-child{border-bottom:none}
.sd-row > span{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--muted)}
.sd-row > b{font-size:14px; word-break:break-word}
.sd-row .mono{font-size:13px; color:var(--ink); opacity:.9}
#spCost{color:var(--brand); font-weight:800}
.step-data.done #spCost{color:var(--good)}
.stepper-ctrl{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 4px 4px}
.stepper-ctrl .mono{font-size:13px; color:var(--muted)}
.stepper-ctrl .btn{padding:9px 16px; font-size:13.5px}
.btn:disabled{opacity:.4; pointer-events:none}

/* properties */
.props{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.prop{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.prop span{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin-bottom:4px}
.prop b{font-size:14.5px; font-weight:600}

/* two-col pros/cons */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.two-col .col{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px}
.two-col h3{margin:0 0 10px; font-size:16px}
.two-col ul{margin:0; padding-left:18px}
.two-col li{margin:6px 0; font-size:14.5px}
.col.good li{color:var(--on-good)} .col.bad li{color:var(--on-bad)}

/* try band + doc nav */
.try-band{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(124,156,255,.14),rgba(106,214,193,.1)); border:1px solid var(--line);
  border-radius:16px; padding:24px 26px; margin:10px 0 34px}
.try-band h3{margin:0 0 4px; font-size:20px}
.try-band p{margin:0; color:var(--muted); font-size:14.5px}
.doc-nav{display:flex; justify-content:space-between; gap:14px; border-top:1px solid var(--line); padding-top:24px}
.doc-nav a{display:flex; flex-direction:column; gap:3px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:14px 18px; max-width:48%; transition:.15s}
.doc-nav a:hover{border-color:var(--brand); transform:translateY(-2px)}
.doc-next{text-align:right; margin-left:auto}
.doc-nav span{font-size:12px; color:var(--muted)} .doc-nav b{font-size:14.5px}

/* ============================================================ footer */
.site-footer{border-top:1px solid var(--line); background:var(--panel); padding:40px 24px}
.foot-inner{max-width:900px; margin:0 auto; text-align:center}
.foot-brand{display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:16px; margin-bottom:10px}
.site-footer p{color:var(--muted); font-size:14px; max-width:520px; margin:0 auto 16px}
.foot-links{display:flex; gap:20px; justify-content:center}
.foot-links a{color:var(--muted); font-size:14px; font-weight:600}
.foot-links a:hover{color:var(--brand)}
.foot-credit{margin:26px auto 0 !important; padding-top:22px; max-width:430px;
  border-top:1px solid var(--line); text-align:center; font-size:13.5px; color:var(--faint)}
.foot-credit a{color:var(--brand); font-weight:700}
.foot-credit a:hover{text-decoration:underline}
.foot-credit .heart{color:#ff6b8a}

/* ============================================================ responsive */
@media (max-width:760px){
  .how-grid{grid-template-columns:1fr}
  .props,.two-col,.glossary{grid-template-columns:1fr}
  .nav-links a[href="/#how"]{display:none}
  .hero-stats{gap:26px}
  .try-band{flex-direction:column; align-items:flex-start}
  .doc-nav a{max-width:100%}
}