:root {
  --bg: #0B0F19; --s1: #111824; --s2: #141A2A; --s8: #212635;
  --text: #F0F3FA; --dim: #8b91a7; --border: #2b3244; --border-hi: #4E5366;
  --red: #DC244C; --violet: #6047FF; --teal: #009688; --blue: #03A9F4; --orange: #FF9800;
  --flat: var(--blue); --sphere: var(--orange); --hyper: var(--red);
  --sans: "Mona Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", "JetBrains Mono", "SF Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 18px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
canvas { display: block; width: 100%; height: 100%; cursor: grab; }
canvas.grabbing { cursor: grabbing; }

/* nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 10; height: 56px; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(11, 15, 25, .72); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(78, 83, 102, .25);
  font-size: 14px; font-weight: 600;
}
.nav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav .brand i { width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px var(--red); }
.nav ol { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.nav ol a {
  display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--border-hi);
  transition: transform .2s, background .2s; overflow: hidden; text-indent: -999px;
}
.nav ol a.on { background: var(--red); transform: scale(1.5); }

/* layout */
.wrap { max-width: 1110px; margin: 0 auto; padding: 0 24px; }
section { padding: 104px 0 40px; }
.kicker { font: 500 14px var(--mono); color: var(--red); margin: 0 0 16px; letter-spacing: .5px; }
h1, h2 { font-weight: 600; margin: 0; }
h1 { font-size: clamp(44px, 7vw, 80px); line-height: 1.05; letter-spacing: -1.8px; }
h2 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.1; letter-spacing: -1px; max-width: 16em; }
.lead { font-size: 20px; color: var(--dim); max-width: 32em; margin: 16px 0 40px; }
.lead b { color: var(--text); font-weight: 600; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s; }
.reveal.in { opacity: 1; transform: none; }

/* hero */
#hero { min-height: 100vh; padding: 88px 0 24px; display: flex; align-items: center; }
#hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
#hero .lead { margin-bottom: 32px; }
.hero-stage { aspect-ratio: 1; width: 100%; }
.btn {
  display: inline-block; background: var(--red); color: #fff; text-decoration: none; font-weight: 600;
  font-size: 16px; padding: 14px 24px; border-radius: 8px; transition: background .2s;
}
.btn:hover { background: #CC1845; }
.hint { font-size: 14px; color: var(--dim); margin-top: 16px; }
.hint::before { content: "↺ "; }

/* cards + stages */
.card { background: var(--s1); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.stage { position: relative; height: min(66vh, 540px); min-height: 360px; }
.controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 16px; }
.seg { display: inline-flex; background: var(--s2); border: 1px solid var(--border); border-radius: 999px; padding: 4px; }
.seg button {
  font: 600 14px var(--sans); color: var(--dim); background: none; border: 0; border-radius: 999px;
  padding: 8px 16px; cursor: pointer; transition: all .2s;
}
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--s8); color: var(--text); }
.seg[data-geo] button.on { box-shadow: inset 0 0 0 1px currentColor; }
#tri-tabs button[data-v="flat"].on { color: var(--flat); }
#tri-tabs button[data-v="sphere"].on { color: var(--sphere); }
#tri-tabs button[data-v="hyper"].on { color: var(--hyper); }
.caption { color: var(--dim); font-size: 16px; margin: 16px 0 0; min-height: 3em; }
.big { font: 600 clamp(48px, 8vw, 88px)/1 var(--sans); letter-spacing: -2px; }
.chips { font: 500 16px var(--mono); color: var(--dim); }
.chips b { color: var(--text); font-weight: 500; }
.chips i { font-style: normal; margin: 0 6px; }
.split { display: grid; grid-template-columns: 1fr 220px; gap: 24px; }
.side { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.side .label { font-size: 14px; color: var(--dim); }

.slider { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 240px; font: 500 14px var(--mono); color: var(--dim); }
.slider b { color: var(--text); font-weight: 500; min-width: 3ch; }
input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; height: 4px; border-radius: 2px; background: var(--border-hi); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--text); border: 4px solid var(--red); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--text); border: 4px solid var(--red); cursor: pointer; }

/* growth */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.trio figure { margin: 0; text-align: center; }
.trio .sq { aspect-ratio: 1; }
.trio figcaption { margin-top: 8px; font-size: 14px; color: var(--dim); }
.trio .n { display: block; font: 600 40px/1.2 var(--sans); letter-spacing: -1px; }
.trio .f { font: 400 14px var(--mono); color: var(--dim); }
.trio .flat .n { color: var(--flat); } .trio .sphere .n { color: var(--sphere); } .trio .hyper .n { color: var(--hyper); }

/* tree */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.duo figure { margin: 0; }
.duo .sq { aspect-ratio: 1; }
.duo figcaption { text-align: center; margin-top: 8px; font-size: 14px; color: var(--dim); }
.duo b { font-weight: 600; }

/* distance readouts */
.stat { display: flex; align-items: baseline; gap: 8px; }
.stat .v { font: 600 36px/1.1 var(--sans); letter-spacing: -1px; }
.legend { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--dim); }
.legend i { width: 24px; height: 0; border-top: 3px solid var(--red); display: inline-block; }
.legend i.dash { border-top: 2px dashed var(--blue); }
.btn2 {
  font: 600 14px var(--sans); color: var(--text); background: none; border: 1px solid var(--border-hi);
  border-radius: 8px; padding: 8px 16px; cursor: pointer; transition: border-color .2s;
}
.btn2:hover { border-color: var(--dim); }

/* specificity */
#spec-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#spec-list li {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; font-size: 15px;
  color: var(--dim); border: 1px solid transparent; cursor: default; transition: all .2s;
}
#spec-list li.on { color: var(--text); background: var(--s2); border-color: var(--border-hi); }
#spec-list em { margin-left: auto; font: 400 12px var(--mono); font-style: normal; }
.dotc { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* search */
.legend-row { display: flex; flex-wrap: wrap; gap: 16px 24px; font-size: 14px; color: var(--dim); margin: 0 0 16px; }
.legend-row span { display: inline-flex; align-items: center; gap: 8px; }
.legend-row i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.i-red { background: var(--red); } .i-blue { border: 2.5px solid var(--blue); } .i-pre { background: rgba(3, 169, 244, .55); }
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.stats3 div { background: var(--s2); border-radius: 8px; padding: 12px 16px; }
.stats3 .v { font: 600 32px/1.1 var(--sans); letter-spacing: -1px; }
.stats3 .l { font-size: 13px; color: var(--dim); line-height: 1.3; }
.rec { height: 180px; margin-top: 16px; }
.rec canvas { cursor: default; }
pre.code {
  margin: 16px 0 0; padding: 16px 20px; background: var(--s2); border-radius: 8px; overflow-x: auto;
  font: 400 14px/1.7 var(--mono); color: #ccd2e6;
}
pre.code .c { color: var(--dim); }

/* recap */
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.geo { border-top: 4px solid; border-radius: 12px; }
.geo h3 { margin: 0 0 8px; font-size: 24px; letter-spacing: -.5px; }
.geo dl { margin: 0; font-size: 15px; }
.geo dt { color: var(--dim); font-size: 12px; margin-top: 12px; text-transform: uppercase; letter-spacing: 1px; }
.geo dd { margin: 0; }
.geo.flat { border-color: var(--flat); } .geo.sphere { border-color: var(--sphere); } .geo.hyper { border-color: var(--hyper); }
.bars { display: grid; gap: 16px; margin-top: 16px; }
.bar { display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 16px; font-size: 14px; color: var(--dim); }
.bar .track { height: 32px; background: var(--s2); border-radius: 8px; overflow: hidden; }
.bar .fill { height: 100%; width: 0; border-radius: 8px; display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; font: 600 14px var(--mono); color: #fff; transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.in .bar .fill { width: var(--w); }
.bar-title { font-size: 14px; color: var(--dim); margin: 32px 0 0; }
footer { padding: 80px 0 64px; color: var(--dim); font-size: 14px; text-align: center; }
footer a { color: var(--text); }

@media (max-width: 860px) {
  body { font-size: 17px; }
  #hero .wrap { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .duo, .trio, .cols3 { grid-template-columns: 1fr; }
  .stage { height: 72vw; min-height: 300px; }
  .bar { grid-template-columns: 1fr; gap: 4px; }
  .nav ol { display: none; }
  .stats3 { grid-template-columns: 1fr; }
  .card { padding: 16px; }
}

/* taxonomy breadcrumb */
.crumbbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; margin-bottom: 16px; min-height: 40px; }
.crumb { font: 600 18px var(--sans); color: var(--text); }
.crumb.idle { color: var(--dim); font-weight: 400; }

/* gauge, specificity bar, serving steps */
.gauge { height: 110px; }
.gauge canvas { cursor: default; }
.specbar { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--dim); margin-bottom: 16px; }
.specbar .track { position: relative; flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--red), var(--violet)); }
.specbar i { position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 3px var(--bg); opacity: 0; transition: left .15s, opacity .15s; }
.steps { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
.steps div { flex: 1; min-width: 180px; background: var(--s2); border-radius: 8px; padding: 12px 16px; font-size: 15px; }
.steps b { display: block; font: 500 13px var(--mono); color: var(--red); margin-bottom: 4px; }
.steps em { align-self: center; font-style: normal; color: var(--dim); }
@media (max-width: 860px) { .steps em { display: none; } }