:root {
  --bg:#0a0a0a;
  --paper:#0f0f0f;
  --panel:#141414;
  --raised:#1a1a1a;
  --ink:#ededed;
  --ink-2:#c9c9c9;
  --muted:#8f8f8f;
  --faint:#7c7c7c;
  --line:#232323;
  --line-strong:#383838;
  --mark:#4a4a4a;
  --accent:#e94a32;
  --accent-ink:#ff6a50;
  --accent-soft:rgba(233,74,50,.14);
  --ok:#3fbf7f;
  --ok-soft:rgba(63,191,127,.14);
  --warn:#e8a33d;
  --warn-soft:rgba(232,163,61,.14);
  --nav-bg:rgba(10,10,10,.78);
  --hover:rgba(255,255,255,.04);
  --press:#262626;
  --shadow:0 0 0 1px var(--line), 0 24px 60px -30px rgba(0,0,0,.8);
  --btn-bg:#ededed;
  --btn-ink:#0a0a0a;
  --frame:1200px;
  --gut:24px;
  --sec:96px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  color-scheme:dark
}

html[data-theme=light] {
  --bg:#fafafa;
  --paper:#ffffff;
  --panel:#f5f5f5;
  --raised:#ffffff;
  --ink:#171717;
  --ink-2:#3d3d3d;
  --muted:#666666;
  --faint:#707070;
  --line:#e8e8e8;
  --line-strong:#d4d4d4;
  --mark:#b5b5b5;
  --accent:#e94a32;
  --accent-ink:#c93520;
  --accent-soft:rgba(226,65,42,.09);
  --ok:#1f9a5c;
  --ok-soft:rgba(31,154,92,.10);
  --warn:#b97510;
  --warn-soft:rgba(185,117,16,.10);
  --nav-bg:rgba(250,250,250,.82);
  --hover:rgba(0,0,0,.035);
  --press:#ebebeb;
  --shadow:0 0 0 1px var(--line), 0 24px 60px -34px rgba(0,0,0,.18);
  --btn-bg:#171717;
  --btn-ink:#fafafa;
  color-scheme:light
}

*,*::before,*::after { box-sizing:border-box }
[hidden] { display:none !important }

html {
  -webkit-text-size-adjust:100%;
  background:var(--bg);
  scroll-padding-top:80px
}

@media (prefers-reduced-motion:no-preference) {
  html { scroll-behavior:smooth }
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.6 "Medeo Sans",ui-sans-serif,system-ui,sans-serif;
  font-kerning:normal;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden
}

h1,h2,h3,h4,p,dl,dd,figure,ul,ol,pre,blockquote { margin:0 }
ul,ol { padding:0; list-style:none }
a { color:inherit; text-decoration:none }
button,input,select,textarea { font:inherit; color:inherit }
button { cursor:pointer; background:none; border:0; padding:0 }
img,svg,canvas { display:block; max-width:100% }
::selection { background:var(--accent); color:#fff }

:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px
}

.mono { font-family:"Medeo Mono",ui-monospace,monospace; font-feature-settings:"zero" 0 }
.pixel { font-family:"Medeo Pixel","Medeo Mono",monospace; font-weight:400 }
.sr {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0
}

.skip {
  position:fixed; left:12px; top:-60px; z-index:100;
  padding:10px 14px; border-radius:8px;
  background:var(--btn-bg); color:var(--btn-ink); font-weight:500
}
.skip:focus { top:12px }



.frame {
  position:relative;
  width:min(100% - 2*var(--gut), var(--frame));
  margin:0 auto;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line)
}

.rule {
  position:relative;
  height:0;
  border-top:1px solid var(--line)
}


.rule::before,.rule::after {
  content:"";
  position:absolute;
  top:-6px;
  width:11px;
  height:11px;
  background:
    linear-gradient(var(--mark),var(--mark)) center/11px 1px no-repeat,
    linear-gradient(var(--mark),var(--mark)) center/1px 11px no-repeat
}
.rule::before { left:-6px }
.rule::after { right:-6px }

.sec { padding:var(--sec) 64px }
.sec.tight { padding-top:72px; padding-bottom:72px }



.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font:500 12px/1 "Medeo Mono",ui-monospace,monospace;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted)
}
.eyebrow::before {
  content:"";
  width:6px; height:6px;
  background:var(--accent)
}
.eyebrow.plain::before { display:none }

.h1 {
  font-size:clamp(44px,7.4vw,92px);
  line-height:.98;
  font-weight:600;
  letter-spacing:-.03em;
  text-wrap:balance
}

.h2 {
  font-size:clamp(32px,4.4vw,56px);
  line-height:1.02;
  font-weight:600;
  letter-spacing:-.028em;
  text-wrap:balance
}

.h3 {
  font-size:20px;
  line-height:1.3;
  font-weight:600;
  letter-spacing:-.012em
}

.lede {
  font-size:clamp(17px,1.6vw,20px);
  line-height:1.5;
  color:var(--muted);
  max-width:40em;
  text-wrap:pretty
}
.lede b,.lede strong { color:var(--ink); font-weight:500 }

.dim { color:var(--muted) }
.body { color:var(--muted); text-wrap:pretty }
.body b { color:var(--ink); font-weight:500 }

.sec-head { display:grid; gap:20px; max-width:760px; margin-bottom:56px }
.sec-head.split {
  max-width:none;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:end;
  gap:24px 64px
}



.btn {
  --h:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:var(--h);
  padding:0 16px;
  border-radius:999px;
  font-size:15px;
  font-weight:500;
  letter-spacing:-.005em;
  white-space:nowrap;
  transition:background .2s,color .2s,box-shadow .2s,transform .2s var(--ease)
}
.btn:active { transform:scale(.98) }
.btn.primary { background:var(--btn-bg); color:var(--btn-ink) }
.btn.primary:hover { background:color-mix(in srgb,var(--btn-bg) 86%,var(--bg)) }
.btn.ghost { box-shadow:inset 0 0 0 1px var(--line-strong); color:var(--ink) }
.btn.ghost:hover { background:var(--hover) }
.btn.big { --h:48px; padding:0 22px; font-size:16px }
.btn svg { width:14px; height:14px; stroke:currentColor; stroke-width:1.6; fill:none }
.btn[disabled],.btn[aria-disabled=true] { opacity:.55; cursor:not-allowed }

.link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--ink);
  font-weight:500;
  border-bottom:1px solid var(--line-strong);
  padding-bottom:2px;
  transition:border-color .2s
}
.link:hover { border-color:var(--ink) }



.nav {
  position:sticky;
  top:0;
  z-index:40;
  background:var(--nav-bg);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line)
}
.nav-in {
  display:flex;
  align-items:center;
  gap:28px;
  width:min(100% - 2*var(--gut), var(--frame));
  height:64px;
  margin:0 auto;
  padding:0 20px
}

.logo {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:21px;
  font-weight:600;
  letter-spacing:-.03em
}
.logo i {
  width:14px; height:14px;
  background:var(--ink);
  position:relative
}
.logo i::after {
  content:"";
  position:absolute;
  right:0; bottom:0;
  width:6px; height:6px;
  background:var(--accent)
}

.nav-links { display:flex; gap:4px }
.nav-links a {
  padding:8px 12px;
  border-radius:999px;
  font-size:14px;
  color:var(--muted);
  transition:color .15s,background .15s
}
.nav-links a:hover { color:var(--ink); background:var(--hover) }
.nav-end { display:flex; align-items:center; gap:8px; margin-left:auto }
.nav-end .signin { font-size:14px; color:var(--muted); padding:8px 12px }
.nav-end .signin:hover { color:var(--ink) }
.nav-end .btn { --h:36px; font-size:14px; padding:0 14px }

.menu-btn {
  display:none;
  width:40px; height:40px;
  border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line-strong);
  position:relative
}
.menu-btn i {
  position:absolute;
  left:13px; right:13px;
  height:1.5px;
  background:var(--ink);
  transition:transform .3s var(--ease),top .3s var(--ease)
}
.menu-btn i:first-child { top:16px }
.menu-btn i:last-child { top:23px }
.nav.open .menu-btn i:first-child { top:19.5px; transform:rotate(45deg) }
.nav.open .menu-btn i:last-child { top:19.5px; transform:rotate(-45deg) }



.hero { padding:104px 64px 0; text-align:left }
.hero-top { display:grid; gap:28px; max-width:980px }
.hero .lede { max-width:36em }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px }
.hero-note {
  margin-top:4px;
  font:400 12px/1.5 "Medeo Mono",ui-monospace,monospace;
  color:var(--faint);
  letter-spacing:.02em
}

.badge {
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
  max-width:100%;
  padding:5px 12px 5px 5px;
  border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line-strong);
  font-size:13px;
  color:var(--muted);
  transition:background .2s
}
.badge:hover { background:var(--hover) }
.badge b {
  padding:3px 8px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent-ink);
  font:500 12px/1.2 "Medeo Mono",ui-monospace,monospace;
  letter-spacing:.04em;
  text-transform:uppercase
}



.router {
  position:relative;
  margin:72px -64px 0;
  border-top:1px solid var(--line);
  background:
    radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 1.2px) 0 0/24px 24px,
    var(--paper)
}
.router-bar {
  display:flex;
  align-items:center;
  gap:16px;
  height:44px;
  padding:0 20px;
  border-bottom:1px solid var(--line);
  background:var(--bg);
  font:500 12px/1 "Medeo Mono",ui-monospace,monospace;
  color:var(--muted);
  letter-spacing:.02em
}
.router-bar .live { display:inline-flex; align-items:center; gap:8px; color:var(--ink) }
.router-bar .live::before {
  content:"";
  width:7px; height:7px; border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 3px var(--ok-soft)
}
.router.paused .router-bar .live::before { background:var(--faint); box-shadow:none }
.router-bar .sp { flex:1 }
.router-bar .demo { color:var(--faint) }
.router-bar button {
  display:inline-flex; align-items:center; gap:6px;
  height:26px; padding:0 10px; border-radius:6px;
  box-shadow:inset 0 0 0 1px var(--line-strong);
  color:var(--muted); font:inherit
}
.router-bar button:hover { color:var(--ink); background:var(--hover) }

.router-grid {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr) minmax(0,1fr);
  gap:72px;
  padding:48px 40px 40px
}
.router-wires {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible
}
.router-wires path {
  fill:none;
  stroke:var(--line-strong);
  stroke-width:1;
  vector-effect:non-scaling-stroke
}
.router-wires path.hot { stroke:var(--accent); stroke-width:1.5 }
.router-wires path.done { stroke:var(--muted) }
.router-wires rect.pkt { fill:var(--accent) }

.col-k {
  margin-bottom:12px;
  font:500 12px/1 "Medeo Mono",ui-monospace,monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--faint)
}

.src,.out { display:grid; gap:10px; align-content:center }
.node {
  position:relative;
  z-index:1;
  display:grid;
  gap:6px;
  padding:12px 14px;
  border-radius:10px;
  background:var(--raised);
  box-shadow:0 0 0 1px var(--line);
  transition:box-shadow .35s var(--ease),background .35s
}
.node-h {
  display:flex;
  align-items:center;
  gap:8px;
  font:500 12px/1.2 "Medeo Mono",ui-monospace,monospace;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted)
}
.node-h .n {
  margin-left:auto;
  font-variant-numeric:tabular-nums;
  color:var(--faint);
  letter-spacing:0
}
.node-t {
  font-size:14px;
  line-height:1.4;
  color:var(--ink-2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-height:1.4em
}
.node-t small { color:var(--faint); font:400 12px/1 "Medeo Mono",monospace; margin-right:6px }
.node.hot { box-shadow:0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft) }
.node.hot .node-h { color:var(--ink) }
.node .dot {
  width:6px; height:6px;
  background:var(--faint);
  transition:background .3s
}
.node.hot .dot { background:var(--accent) }

.core {
  position:relative;
  z-index:1;
  align-self:center;
  border-radius:14px;
  background:var(--raised);
  box-shadow:var(--shadow);
  overflow:hidden
}
.core-h {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  font-weight:600;
  letter-spacing:-.01em
}
.core-h .logo { font-size:16px }
.core-h .logo i { width:11px; height:11px }
.core-h .logo i::after { width:5px; height:5px }
.core-h .st {
  margin-left:auto;
  font:500 12px/1 "Medeo Mono",ui-monospace,monospace;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted)
}
.core-msg {
  padding:14px 16px 12px;
  border-bottom:1px solid var(--line);
  min-height:76px
}
.core-msg .who { font:400 12px/1.4 "Medeo Mono",monospace; color:var(--faint) }
.core-msg .q { margin-top:4px; font-size:15px; line-height:1.4; color:var(--ink) }
.core-fields { display:grid; padding:6px 0 }
.core-fields div {
  display:grid;
  grid-template-columns:96px 1fr;
  gap:8px;
  padding:5px 16px;
  font:400 12.5px/1.45 "Medeo Mono",ui-monospace,monospace
}
.core-fields dt { color:var(--faint) }
.core-fields dd { color:var(--ink-2); min-height:1.45em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.core-fields dd.flag { color:var(--warn) }
.core-fields dd.good { color:var(--ok) }
.core-draft {
  margin:4px 12px 12px;
  padding:12px 12px 10px;
  border-radius:8px;
  background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line);
  min-height:92px
}
.core-draft .k {
  font:500 12px/1 "Medeo Mono",ui-monospace,monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--faint)
}
.core-draft p { margin-top:8px; font-size:14px; line-height:1.45; color:var(--ink); min-height:2.9em }
.core-draft p .caret {
  display:inline-block;
  width:7px; height:1.05em;
  margin-left:1px;
  vertical-align:-2px;
  background:var(--accent);
  animation:caret 1s steps(2) infinite
}
@keyframes caret { 50% { opacity:0 } }
.core-steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line)
}
.core-steps span {
  position:relative;
  padding:9px 0 10px;
  text-align:center;
  font:500 12px/1 "Medeo Mono",ui-monospace,monospace;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--faint);
  transition:color .3s
}
.core-steps span + span { border-left:1px solid var(--line) }
.core-steps span::after {
  content:"";
  position:absolute;
  left:0; bottom:0;
  height:2px;
  width:0;
  background:var(--accent);
  transition:width .5s var(--ease)
}
.core-steps span.on { color:var(--ink) }
.core-steps span.on::after { width:100% }

.out .node-t { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; min-height:2.8em }
.out .node.ok.hot { box-shadow:0 0 0 1px var(--ok), 0 0 0 4px var(--ok-soft) }
.out .node.ok.hot .dot { background:var(--ok) }
.out .node.person.hot { box-shadow:0 0 0 1px var(--warn), 0 0 0 4px var(--warn-soft) }
.out .node.person.hot .dot { background:var(--warn) }
.tap {
  display:inline-flex;
  gap:6px;
  margin-top:2px
}
.tap span {
  padding:4px 8px;
  border-radius:6px;
  box-shadow:inset 0 0 0 1px var(--line-strong);
  font-size:12px;
  color:var(--muted);
  transition:background .25s,color .25s,box-shadow .25s
}
.tap span.press { background:var(--ink); color:var(--bg); box-shadow:none }

.trace {
  position:relative;
  z-index:1;
  display:grid;
  border-top:1px solid var(--line);
  background:var(--bg);
  font:400 12.5px/1 "Medeo Mono",ui-monospace,monospace;
  height:calc(3 * 30px + 16px);
  padding:8px 0;
  overflow:hidden
}
.trace ol { display:grid; align-content:end }
.trace li {
  display:grid;
  grid-template-columns:110px 92px 1fr auto;
  gap:16px;
  align-items:center;
  height:30px;
  padding:0 20px;
  color:var(--muted);
  white-space:nowrap;
  animation:trace-in .45s var(--ease) both
}
.trace li time { color:var(--faint); font-variant-numeric:tabular-nums }
.trace li .ev { color:var(--ink-2) }
.trace li .ok { color:var(--ok) }
.trace li .wa { color:var(--warn) }
.trace li .ac { color:var(--accent-ink) }
.trace li .ms { color:var(--faint); font-variant-numeric:tabular-nums }
.trace li span { overflow:hidden; text-overflow:ellipsis }
@keyframes trace-in { from { opacity:0; transform:translateY(8px) } }



.facts {
  display:grid;
  grid-template-columns:repeat(4,1fr)
}
.facts > div {
  padding:36px 32px 34px;
  display:grid;
  gap:10px;
  align-content:start
}
.facts > div + div { border-left:1px solid var(--line) }
.facts dt {
  font:400 48px/1 "Medeo Pixel","Medeo Mono",monospace;
  letter-spacing:0;
  color:var(--ink)
}
.facts dt small { font:500 14px/1 "Medeo Mono",monospace; color:var(--muted); margin-left:6px; letter-spacing:.02em }
.facts dd { font-size:14px; line-height:1.5; color:var(--muted); max-width:22em }



.pipe {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:0 -64px
}
.pipe li {
  position:relative;
  display:grid;
  gap:12px;
  align-content:start;
  padding:28px 24px 32px;
  min-height:248px
}
.pipe li + li { border-left:1px solid var(--line) }
.pipe .t {
  display:flex;
  justify-content:space-between;
  font:500 12px/1 "Medeo Mono",ui-monospace,monospace;
  color:var(--faint);
  letter-spacing:.04em
}
.pipe .t b { color:var(--accent-ink); font-weight:500 }
.pipe h3 { margin-top:28px }
.pipe p { font-size:14.5px; line-height:1.55; color:var(--muted) }
.pipe code {
  display:block;
  margin-top:auto;
  padding-top:12px;
  font:400 12px/1.5 "Medeo Mono",ui-monospace,monospace;
  color:var(--faint);
  white-space:normal;
  overflow-wrap:anywhere
}
.pipe li::before {
  content:"";
  position:absolute;
  left:0; top:-1px;
  height:2px;
  width:0;
  background:var(--accent);
  transition:width .9s var(--ease)
}
.pipe.seen li::before { width:100% }
.pipe.seen li:nth-child(2)::before { transition-delay:.15s }
.pipe.seen li:nth-child(3)::before { transition-delay:.3s }
.pipe.seen li:nth-child(4)::before { transition-delay:.45s }
.pipe.seen li:nth-child(5)::before { transition-delay:.6s }



.feature {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:64px;
  align-items:center
}
.feature.rev { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) }
.feature.rev .feature-copy { order:2 }
.feature-copy { display:grid; gap:20px; align-content:start }
.points { display:grid; gap:0; margin-top:12px; border-top:1px solid var(--line) }
.points li {
  display:grid;
  grid-template-columns:28px 1fr;
  gap:8px 12px;
  padding:16px 0;
  border-bottom:1px solid var(--line)
}
.points li > span {
  font:500 12px/1.6 "Medeo Mono",ui-monospace,monospace;
  color:var(--faint)
}
.points b { display:block; font-weight:500; color:var(--ink); margin-bottom:2px }
.points p { font-size:15px; line-height:1.5; color:var(--muted) }

.panel {
  position:relative;
  border-radius:14px;
  background:var(--paper);
  box-shadow:var(--shadow);
  overflow:hidden
}
.panel-bar {
  display:flex;
  align-items:center;
  gap:10px;
  height:40px;
  padding:0 14px;
  border-bottom:1px solid var(--line);
  font:500 12px/1 "Medeo Mono",ui-monospace,monospace;
  color:var(--muted);
  letter-spacing:.02em
}
.panel-bar .dots { display:flex; gap:6px }
.panel-bar .dots i { width:9px; height:9px; border-radius:50%; background:var(--line-strong) }
.panel-bar .r { margin-left:auto; color:var(--faint) }


.tg { padding:20px; display:grid; gap:12px; background:var(--panel) }
.tg-topics { display:flex; gap:6px; flex-wrap:wrap }
.tg-topics span {
  padding:5px 10px;
  border-radius:999px;
  font-size:12.5px;
  color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--line-strong);
  background:var(--paper)
}
.tg-topics span.on { color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink) }
.tg-topics span em { font-style:normal; font-family:"Medeo Mono",monospace; color:var(--accent-ink); margin-left:6px }
.tg-card {
  max-width:440px;
  border-radius:12px;
  background:var(--paper);
  box-shadow:0 0 0 1px var(--line);
  overflow:hidden
}
.tg-msg { padding:14px 16px; display:grid; gap:10px; font-size:14px; line-height:1.5 }
.tg-msg .k { font:500 12px/1 "Medeo Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--faint) }
.tg-msg .meta { font:400 12.5px/1.5 "Medeo Mono",monospace; color:var(--muted) }
.tg-msg blockquote {
  padding-left:12px;
  border-left:2px solid var(--line-strong);
  color:var(--ink-2)
}
.tg-msg blockquote.draft { border-color:var(--accent) ; color:var(--ink) }
.tg-msg .chk { font:400 12.5px/1.5 "Medeo Mono",monospace; color:var(--ok) }
.tg-btns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border-top:1px solid var(--line)
}
.tg-btns span {
  padding:11px 8px;
  text-align:center;
  font-size:13.5px;
  background:var(--paper);
  color:var(--ink-2);
  transition:background .25s,color .25s
}
.tg-btns span.press { background:var(--ink); color:var(--bg) }
.tg-sent {
  display:flex;
  align-items:center;
  gap:8px;
  font:400 12.5px/1.5 "Medeo Mono",monospace;
  color:var(--ok);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .4s,transform .4s var(--ease)
}
.tg-sent.on { opacity:1; transform:none }


.kw { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); min-height:420px }
.kw-feed {
  position:relative;
  border-right:1px solid var(--line);
  overflow:hidden;
  height:420px
}
.kw-feed ol { display:grid; padding:6px 0 }
.kw-feed li {
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:baseline;
  padding:9px 16px;
  font-size:14px;
  border-bottom:1px solid var(--line);
  animation:feed-in .5s var(--ease) both
}
.kw-feed li .u { font:400 12.5px/1 "Medeo Mono",monospace; color:var(--faint) }
.kw-feed li .c { color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.kw-feed li mark {
  background:var(--accent-soft);
  color:var(--accent-ink);
  padding:0 3px;
  border-radius:3px
}
.kw-feed li .s { font:500 12px/1 "Medeo Mono",monospace; letter-spacing:.04em; text-transform:uppercase; color:var(--faint) }
.kw-feed li .s.ok { color:var(--ok) }
.kw-feed::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:80px;
  background:linear-gradient(transparent,var(--paper))
}
@keyframes feed-in { from { opacity:0; transform:translateY(-10px) } }
.kw-gauge { padding:20px; display:grid; gap:18px; align-content:start }
.kw-gauge .row { display:grid; gap:6px }
.kw-gauge .row .l {
  display:flex;
  justify-content:space-between;
  font:500 12px/1 "Medeo Mono",monospace;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--faint)
}
.kw-gauge .row .l b { color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:0 }
.kw-gauge .big { font:400 40px/1 "Medeo Pixel","Medeo Mono",monospace; color:var(--ink) }
.bar {
  position:relative;
  height:8px;
  border-radius:2px;
  background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line)
}
.bar i {
  position:absolute;
  left:0; top:0; bottom:0;
  width:0;
  border-radius:2px;
  background:var(--ink);
  transition:width .6s var(--ease)
}
.bar .cap {
  position:absolute;
  top:-4px; bottom:-4px;
  width:1px;
  background:var(--accent)
}
.kw-note { font-size:13px; line-height:1.5; color:var(--muted) }


.log { font:400 12.5px/1.5 "Medeo Mono",ui-monospace,monospace }
.log-filters { display:flex; gap:6px; padding:12px 14px; border-bottom:1px solid var(--line); flex-wrap:wrap }
.log-filters button {
  padding:5px 10px;
  border-radius:6px;
  box-shadow:inset 0 0 0 1px var(--line-strong);
  color:var(--muted);
  font:500 12px/1 "Medeo Mono",monospace
}
.log-filters button[aria-pressed=true] { background:var(--ink); color:var(--bg); box-shadow:none }
.log ol { height:300px; overflow:hidden; display:grid; align-content:end; padding:8px 0 }
.log li {
  display:grid;
  grid-template-columns:76px 14px 1fr;
  gap:10px;
  padding:3px 16px;
  color:var(--muted);
  animation:trace-in .4s var(--ease) both
}
.log li time { color:var(--faint); font-variant-numeric:tabular-nums }
.log li i { font-style:normal; color:var(--faint) }
.log li i.ok { color:var(--ok) }
.log li i.wa { color:var(--warn) }
.log li b { font-weight:400; color:var(--ink-2) }
.log li span { display:block; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.log-foot {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  padding:10px 16px;
  border-top:1px solid var(--line);
  color:var(--faint);
  font:400 12px/1.4 "Medeo Mono",monospace
}


.modes { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:0 -64px }
.modes > div { padding:32px 32px 36px; display:grid; gap:14px; align-content:start }
.modes > div + div { border-left:1px solid var(--line) }
.modes .k { font:500 12px/1 "Medeo Mono",monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--faint) }
.modes .k b { font-weight:500 }
.modes .k b.ok { color:var(--ok) }
.modes .k b.ac { color:var(--accent-ink) }
.modes .k b.wa { color:var(--warn) }
.modes p { color:var(--muted); font-size:15px; line-height:1.55 }
.modes ul { display:grid; gap:6px; margin-top:4px }
.modes ul li { font:400 12.5px/1.5 "Medeo Mono",monospace; color:var(--ink-2) }
.modes ul li::before { content:"— "; color:var(--faint) }


.langs {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  margin:0 -64px
}
.langs li {
  display:grid;
  gap:10px;
  padding:24px 24px 26px;
  border-bottom:1px solid var(--line)
}
.langs li:not(:nth-child(4n+1)) { border-left:1px solid var(--line) }
.langs li .c { font:500 12px/1 "Medeo Mono",monospace; letter-spacing:.06em; color:var(--faint) }
.langs li p { font-size:16px; line-height:1.45; color:var(--ink-2) }
.langs li p.q { color:var(--muted); font-size:14px }


.plans {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:0 -64px
}
.plan { padding:40px 48px 44px; display:grid; gap:20px; align-content:start }
.plan + .plan { border-left:1px solid var(--line); background:var(--paper) }
.plan-h { display:flex; align-items:baseline; justify-content:space-between; gap:12px }
.plan-h h3 { font-size:22px; font-weight:600; letter-spacing:-.015em }
.plan-h span { font:500 12px/1 "Medeo Mono",monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--faint) }
.price { display:flex; align-items:baseline; gap:10px }
.price b { font-size:64px; line-height:1; font-weight:600; letter-spacing:-.035em }
.price span { color:var(--muted); font-size:15px }
.plan > p { color:var(--muted) }
.plan ul { display:grid; gap:10px; padding-top:20px; border-top:1px solid var(--line) }
.plan li { display:grid; grid-template-columns:20px 1fr; gap:8px; font-size:15px; color:var(--ink-2) }
.plan li::before {
  content:"";
  width:12px; height:12px;
  margin-top:5px;
  background:
    linear-gradient(var(--ink),var(--ink)) 50% 50%/12px 1.5px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 50% 50%/1.5px 12px no-repeat;
  transform:rotate(45deg) scale(.0);
  display:none
}
.plan li .ck { font:500 13px/1.6 "Medeo Mono",monospace; color:var(--accent-ink) }
.plan .btn { justify-self:start }


.faq { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:64px }
.faq details { border-bottom:1px solid var(--line) }
.faq details:first-child { border-top:1px solid var(--line) }
.faq summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 0;
  font-size:17px;
  font-weight:500;
  letter-spacing:-.008em;
  cursor:pointer;
  list-style:none
}
.faq summary::-webkit-details-marker { display:none }
.faq summary::after {
  content:"";
  flex:none;
  width:12px; height:12px;
  background:
    linear-gradient(var(--muted),var(--muted)) center/12px 1.5px no-repeat,
    linear-gradient(var(--muted),var(--muted)) center/1.5px 12px no-repeat;
  transition:transform .3s var(--ease)
}
.faq details[open] summary::after { transform:rotate(45deg) }
.faq details p { padding:0 40px 22px 0; color:var(--muted); line-height:1.6 }


.apply {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:64px;
  align-items:start
}
.apply-card {
  padding:28px;
  border-radius:14px;
  background:var(--paper);
  box-shadow:var(--shadow)
}
.apply-form {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.apply-form .wide { grid-column:1/-1 }
.apply-field { display:grid; gap:6px }
.apply-form input,.apply-form select {
  width:100%;
  height:44px;
  padding:0 14px;
  border-radius:8px;
  border:0;
  background:var(--bg);
  box-shadow:inset 0 0 0 1px var(--line-strong);
  font-size:15px;
  color:var(--ink);
  transition:box-shadow .2s;
  appearance:none;
  -webkit-appearance:none
}
.apply-form select {
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 19px,calc(100% - 14px) 19px;
  background-size:5px 5px;
  background-repeat:no-repeat
}
.apply-form select:invalid { color:var(--faint) }
.apply-form input::placeholder { color:var(--faint) }
.apply-form input:hover,.apply-form select:hover { box-shadow:inset 0 0 0 1px var(--muted) }
.apply-form input:focus,.apply-form select:focus { outline:none; box-shadow:inset 0 0 0 1px var(--ink), 0 0 0 3px var(--hover) }
.apply-form input.bad,.apply-form select.bad { box-shadow:inset 0 0 0 1px var(--accent) }
.apply-form .btn { width:100% }
.apply-error { color:var(--accent-ink); font-size:13px; line-height:1.4 }
.apply-alert {
  padding:10px 12px;
  border-radius:8px;
  background:var(--accent-soft);
  color:var(--accent-ink);
  font-size:14px;
  line-height:1.45
}
.apply-form > small { color:var(--faint); font-size:13px; line-height:1.5 }
.apply-form > small a { color:var(--muted); border-bottom:1px solid var(--line-strong) }
.apply-notice { color:var(--ink-2); line-height:1.5 }
.apply-links { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; font-size:14px }
.apply-link { color:var(--ink); border-bottom:1px solid var(--line-strong); padding-bottom:1px }
.apply-link[disabled] { color:var(--faint); cursor:not-allowed }
.apply-links small { color:var(--faint); font-size:13px }
.apply-done h3 { font-size:22px; font-weight:600; letter-spacing:-.015em; outline:none }
.apply-done p { margin-top:8px; color:var(--muted) }
.apply-side { display:grid; gap:20px; align-content:start }
.apply-side ol { display:grid; gap:0; border-top:1px solid var(--line); margin-top:8px }
.apply-side ol li {
  display:grid;
  grid-template-columns:36px 1fr;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:15px
}
.apply-side ol li span { font:500 12px/1.7 "Medeo Mono",monospace; color:var(--faint) }


.close-band {
  display:grid;
  gap:28px;
  justify-items:start;
  padding:120px 64px;
  background:
    linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat
}



.foot { padding:56px 64px 40px }
.foot-grid {
  display:grid;
  grid-template-columns:1.3fr repeat(4,1fr);
  gap:32px
}
.foot h4 {
  margin-bottom:14px;
  font:500 12px/1 "Medeo Mono",monospace;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--faint)
}
.foot ul { display:grid; gap:9px }
.foot li a { font-size:14px; color:var(--muted); transition:color .15s }
.foot li a:hover { color:var(--ink) }
.foot-brand { display:grid; gap:14px; align-content:start }
.foot-brand p { font-size:14px; color:var(--muted); max-width:22em }
.foot-bottom {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 24px;
  margin-top:56px;
  padding-top:24px;
  border-top:1px solid var(--line);
  font-size:13px;
  color:var(--faint)
}
.foot-bottom a { color:var(--muted) }
.foot-bottom a:hover { color:var(--ink) }
.foot-bottom .sp { flex:1 }

.theme {
  display:inline-flex;
  padding:3px;
  border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line-strong)
}
.theme button {
  display:grid;
  place-items:center;
  width:30px; height:26px;
  border-radius:999px;
  color:var(--faint)
}
.theme button:hover { color:var(--ink) }
.theme button[aria-checked=true] { background:var(--press); color:var(--ink) }
.theme svg { width:14px; height:14px; stroke:currentColor; stroke-width:1.5; fill:none }



@media (prefers-reduced-motion:no-preference) {
  .js .rv { opacity:0; transform:translateY(14px); transition:opacity .8s var(--ease),transform .8s var(--ease) }
  .js .rv.in { opacity:1; transform:none }
}



.crumbs {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font:500 12px/1.4 "Medeo Mono",monospace;
  letter-spacing:.02em;
  color:var(--faint)
}
.crumbs a:hover { color:var(--ink) }
.crumbs span[aria-hidden] { color:var(--line-strong) }

.page-hero { padding:88px 64px 72px; display:grid; gap:24px; max-width:960px }
.prose { max-width:720px; display:grid; gap:20px; color:var(--ink-2); font-size:17px; line-height:1.7 }
.prose h2 { margin-top:28px; font-size:28px; line-height:1.15; font-weight:600; letter-spacing:-.02em; color:var(--ink); text-wrap:balance }
.prose h3 { margin-top:12px; font-size:19px; font-weight:600; letter-spacing:-.01em; color:var(--ink) }
.prose p,.prose li { color:var(--muted) }
.prose b,.prose strong { color:var(--ink); font-weight:500 }
.prose ul { display:grid; gap:10px; padding-left:0 }
.prose ul li { position:relative; padding-left:22px }
.prose ul li::before { content:""; position:absolute; left:2px; top:.72em; width:6px; height:6px; background:var(--accent) }
.prose ol { display:grid; gap:10px; counter-reset:n }
.prose ol li { position:relative; padding-left:36px; counter-increment:n }
.prose ol li::before { content:counter(n,decimal-leading-zero); position:absolute; left:0; top:.1em; font:500 13px/1.7 "Medeo Mono",monospace; color:var(--faint) }
.prose a { color:var(--ink); border-bottom:1px solid var(--line-strong) }
.prose a:hover { border-color:var(--ink) }
.prose table { width:100%; border-collapse:collapse; font-size:15px }
.prose th,.prose td { text-align:left; padding:12px 12px 12px 0; border-bottom:1px solid var(--line); vertical-align:top }
.prose th { font:500 12px/1.4 "Medeo Mono",monospace; letter-spacing:.04em; text-transform:uppercase; color:var(--faint) }
.prose td { color:var(--muted) }
.prose td:first-child { color:var(--ink-2) }
.table-wrap { overflow-x:auto; margin:0 -4px; padding:0 4px }

.page-grid { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:64px; align-items:start }
.aside { position:sticky; top:96px; display:grid; gap:16px; padding:24px; border-radius:14px; background:var(--paper); box-shadow:var(--shadow) }
.aside p { font-size:14px; color:var(--muted) }
.aside .btn { width:100% }

.cards { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); margin:0 -64px }
.cards a {
  display:grid;
  gap:10px;
  align-content:start;
  padding:28px 32px 32px;
  border-bottom:1px solid var(--line);
  transition:background .2s
}
.cards a:not(:nth-child(3n+1)) { border-left:1px solid var(--line) }
.cards a:hover { background:var(--hover) }
.cards .k { font:500 12px/1 "Medeo Mono",monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--faint) }
.cards b { font-size:18px; font-weight:600; letter-spacing:-.012em }
.cards p { font-size:14.5px; color:var(--muted); line-height:1.5 }
.cards .go { font:500 12px/1 "Medeo Mono",monospace; color:var(--muted); margin-top:6px }
.cards a:hover .go { color:var(--accent-ink) }



@media (max-width:1080px) {
  .sec,.hero,.foot,.page-hero,.close-band { padding-left:40px; padding-right:40px }
  .router { margin-left:-40px; margin-right:-40px }
  .pipe,.modes,.langs,.plans,.cards { margin-left:-40px; margin-right:-40px }
  .router-grid { gap:40px; padding:40px 24px 32px }
  .pipe { grid-template-columns:repeat(3,1fr) }
  .pipe li:nth-child(4) { border-left:0 }
  .pipe li:nth-child(n+4) { border-top:1px solid var(--line) }
  .foot-grid { grid-template-columns:repeat(3,1fr) }
  .foot-brand { grid-column:1/-1 }
  .page-grid { grid-template-columns:1fr }
  .aside { position:static }
}

@media (max-width:900px) {
  :root { --sec:88px }
  .nav-links { display:none }
  .menu-btn { display:block }
  .nav.open .nav-links {
    display:grid;
    position:absolute;
    top:64px; left:0; right:0;
    padding:12px var(--gut) 20px;
    background:var(--bg);
    border-bottom:1px solid var(--line)
  }
  .nav.open .nav-links a { padding:12px 8px; font-size:17px; color:var(--ink); border-radius:8px }
  .nav-end .signin { display:none }
  .sec-head.split,.feature,.feature.rev,.faq,.apply { grid-template-columns:1fr; gap:40px }
  .feature.rev .feature-copy { order:0 }
  .router-grid { grid-template-columns:1fr; gap:28px }
  .src { grid-template-columns:1fr 1fr }
  .out { grid-template-columns:1fr }
  .facts { grid-template-columns:1fr 1fr }
  .facts > div:nth-child(3) { border-left:0 }
  .facts > div:nth-child(n+3) { border-top:1px solid var(--line) }
  .modes { grid-template-columns:1fr }
  .modes > div + div { border-left:0; border-top:1px solid var(--line) }
  .langs { grid-template-columns:1fr 1fr }
  .langs li:not(:nth-child(4n+1)) { border-left:0 }
  .langs li:nth-child(2n) { border-left:1px solid var(--line) }
  .plans { grid-template-columns:1fr }
  .plan + .plan { border-left:0; border-top:1px solid var(--line) }
  .kw { grid-template-columns:1fr }
  .kw-feed { border-right:0; border-bottom:1px solid var(--line); height:300px }
  .cards { grid-template-columns:1fr 1fr }
  .cards a:not(:nth-child(3n+1)) { border-left:0 }
  .cards a:nth-child(2n) { border-left:1px solid var(--line) }
  .trace li { grid-template-columns:96px 1fr auto }
  .trace li .ev { display:none }
}

@media (max-width:640px) {
  :root { --gut:16px; --sec:72px }
  .frame { border-left:0; border-right:0 }
  .rule::before,.rule::after { display:none }
  .nav-in { padding:0 4px 0 2px; gap:12px }
  .sec,.hero,.foot,.page-hero,.close-band { padding-left:0; padding-right:0 }
  .router,.pipe,.modes,.langs,.plans,.cards { margin-left:calc(-1*var(--gut)); margin-right:calc(-1*var(--gut)) }
  .hero { padding-top:64px }
  .h1 { font-size:clamp(38px,11vw,52px); letter-spacing:-.025em }
  .h2 { font-size:clamp(30px,8.6vw,40px) }
  .hero-cta .btn { flex:1 1 auto }
  .router-grid { padding:24px 16px }
  .src { grid-template-columns:1fr 1fr; gap:8px }
  .src .node-t { display:none }
  .router-bar { padding:0 12px; gap:10px }
  .router-bar .demo { display:none }
  .trace li { grid-template-columns:1fr auto; padding:0 16px }
  .trace li time { display:none }
  .facts > div { padding:24px 16px }
  .facts dt { font-size:36px }
  .pipe { grid-template-columns:1fr }
  .pipe li { min-height:0; padding:24px 16px }
  .pipe li + li { border-left:0; border-top:1px solid var(--line) }
  .pipe h3 { margin-top:8px }
  .modes > div,.plan { padding:28px 16px 32px }
  .langs li { padding:20px 16px }
  .cards { grid-template-columns:1fr }
  .cards a { padding:24px 16px }
  .cards a:nth-child(2n) { border-left:0 }
  .apply-card { padding:20px 16px }
  .apply-form { grid-template-columns:1fr }
  .foot-grid { grid-template-columns:1fr 1fr }
  .log li { grid-template-columns:62px 12px 1fr; padding:3px 12px }
  .tg { padding:14px }
  .panel { border-radius:12px }
  .close-band { padding-top:80px; padding-bottom:80px }
}



.lang-sw {
  display:inline-grid;
  place-items:center;
  height:32px;
  min-width:36px;
  padding:0 8px;
  border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line-strong);
  font-size:12px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--muted);
  transition:color .15s,background .15s
}
.lang-sw:hover { color:var(--ink); background:var(--hover) }
.page-h1 { font-size:clamp(40px,5.6vw,72px); line-height:1.02 }
.case-fig {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin:8px 0 4px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.case-fig div { padding:20px 16px 20px 0; display:grid; gap:6px }
.case-fig div + div { padding-left:16px; border-left:1px solid var(--line) }
.case-fig b { font:400 40px/1 "Medeo Pixel","Medeo Mono",monospace; color:var(--ink) }
.case-fig span { font-size:14px; color:var(--muted); line-height:1.4 }
@media (max-width:640px) {
  .case-fig { grid-template-columns:1fr }
  .case-fig div + div { padding-left:0; border-left:0; border-top:1px solid var(--line) }
  .nav-end .lang-sw { display:none }
  .nav.open .nav-links .lang-sw { display:inline-grid }
}



.mono-s { display:block; margin-top:4px; font:500 12px/1.4 "Medeo Mono",monospace; letter-spacing:.04em; color:var(--faint) }
.facts dt { font-size:44px }

.kw-side { display:grid; gap:20px; align-content:start }
.chain {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--line)
}
.chain li { display:grid; gap:4px; padding:12px 14px; align-content:start }
.chain li + li { border-left:1px solid var(--line) }
.chain span { font:500 12px/1 "Medeo Mono",monospace; color:var(--accent-ink); letter-spacing:.04em }
.chain b { font-size:13.5px; font-weight:500; color:var(--ink) }
.chain em { font-style:normal; font-size:12.5px; line-height:1.4; color:var(--muted) }

.case { display:grid; gap:12px; padding:4px 2px 0 }
.case-h { font-size:22px; line-height:1.25; font-weight:600; letter-spacing:-.015em; text-wrap:balance }
.case .case-fig { margin:4px 0 }

.tg-btns.three { grid-template-columns:repeat(3,1fr) }
.tg-fold {
  padding:8px 12px;
  border-radius:8px;
  background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line);
  font:400 12.5px/1.5 "Medeo Mono",monospace;
  color:var(--muted);
  max-width:440px
}

.modes { grid-template-columns:repeat(4,1fr) }
.modes > div { padding:28px 28px 32px }
.langs-row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  padding:20px 0 0;
  font:400 13px/1.4 "Medeo Mono",monospace;
  color:var(--muted)
}
.langs-row .k { font-weight:500; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint) }
.langs-row span { padding:5px 10px; border-radius:6px; box-shadow:inset 0 0 0 1px var(--line-strong); color:var(--ink-2) }
.langs-row span b { font-weight:500; color:var(--ink) }
.langs-row .note { font-family:"Medeo Sans",sans-serif; font-size:14px; color:var(--muted) }

.out .node.notice.hot { box-shadow:0 0 0 1px var(--line-strong), 0 0 0 4px var(--hover) }
.out .node.notice.hot .dot { background:var(--ink-2) }

.heads { display:grid; gap:8px; margin-top:12px; padding-top:24px; border-top:1px solid var(--line) }
.heads .h3 { font-size:18px }
.heads .body { font-size:15px }

.report { display:grid; gap:0 }
.rep-nums { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line) }
.rep-nums div { display:grid; gap:6px; padding:18px 16px }
.rep-nums div + div { border-left:1px solid var(--line) }
.rep-nums b { font:400 28px/1 "Medeo Pixel","Medeo Mono",monospace; color:var(--ink) }
.rep-nums span { font-size:12.5px; color:var(--muted) }
.rep-hours,.rep-topics { padding:16px; border-bottom:1px solid var(--line) }
.report .k { font:500 12px/1 "Medeo Mono",monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-bottom:12px }
.hours { display:grid; grid-template-columns:repeat(24,1fr); gap:3px; align-items:end; height:72px }
.hours i { display:block; height:calc(var(--h) * 100%); min-height:2px; background:var(--line-strong); border-radius:1px }
.hours i.peak { background:var(--accent) }
.axis { display:flex; justify-content:space-between; margin-top:6px; font:400 12px/1 "Medeo Mono",monospace; color:var(--faint) }
.rep-topics ul { display:grid; gap:8px }
.rep-topics li { display:grid; grid-template-columns:110px 1fr 40px; gap:12px; align-items:center; font-size:13.5px; color:var(--ink-2) }
.rep-topics li i { display:block; height:6px; width:var(--w); background:var(--ink); border-radius:1px }
.rep-topics li b { font:400 12px/1 "Medeo Mono",monospace; color:var(--muted); text-align:right }
.rep-note { padding:10px 16px; font:400 12px/1.4 "Medeo Mono",monospace; color:var(--faint) }

@media (max-width:1080px) {
  .modes { grid-template-columns:1fr 1fr }
  .modes > div:nth-child(3) { border-left:0 }
  .modes > div:nth-child(n+3) { border-top:1px solid var(--line) }
}
@media (max-width:900px) {
  .modes { grid-template-columns:1fr }
  .modes > div + div { border-left:0; border-top:1px solid var(--line) }
}
@media (max-width:640px) {
  .chain { grid-template-columns:1fr }
  .chain li + li { border-left:0; border-top:1px solid var(--line) }
  .rep-nums { grid-template-columns:1fr 1fr }
  .rep-nums div:nth-child(3) { border-left:0 }
  .rep-nums div:nth-child(n+3) { border-top:1px solid var(--line) }
  .rep-topics li { grid-template-columns:90px 1fr 36px }
  .tg-btns.three span { font-size:12.5px; padding:10px 4px }
}


.legal hr { border:0; border-top:1px solid var(--line); margin:12px 0 }
.legal .lead { font-size:18px; color:var(--ink-2) }
.legal .pill,.hero-note .pill { padding:2px 8px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line-strong) }
.legal table { display:block; overflow-x:auto }
.legal .card { display:grid; gap:20px; margin-top:24px; padding-top:24px; border-top:1px solid var(--line) }
.legal .eyebrow::before { display:none }
.src > .col-k,.out > .col-k { grid-column:1/-1; margin-bottom:2px }
.nav-links .lang-menu { display:none }
@media (max-width:900px) {
  .nav.open .nav-links .lang-menu { display:block; margin-top:8px; border-top:1px solid var(--line); border-radius:0; padding-top:16px; color:var(--muted); font-size:15px }
}



.art { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; pointer-events:none }
.hero { position:relative; padding-top:72px }
.hero-art { height:520px; inset:0 0 auto 0; opacity:.9; -webkit-mask-image:linear-gradient(transparent, #000 30%, #000 60%, transparent); mask-image:linear-gradient(transparent, #000 30%, #000 60%, transparent) }
.hero-top { position:relative; gap:22px; max-width:900px }
.kicker {
  font:500 12px/1 "Medeo Mono",ui-monospace,monospace;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted)
}
.kicker i { font-style:normal; padding:2px 6px; margin-left:2px; border-radius:4px; box-shadow:inset 0 0 0 1px var(--line-strong); color:var(--faint); text-transform:none }
.hero .h1 { font-size:clamp(42px,6.4vw,80px); line-height:1 }
.hero .h1 > span { display:block }
.hero .lede { max-width:34em }
.router { margin-top:48px }
.router-grid { padding:36px 40px 32px; gap:64px }
.motion-btn {
  display:inline-flex; align-items:center; gap:6px;
  height:26px; padding:0 10px; border-radius:6px;
  box-shadow:inset 0 0 0 1px var(--line-strong);
  color:var(--muted); font:500 12px/1 "Medeo Mono",ui-monospace,monospace
}
.motion-btn:hover { color:var(--ink); background:var(--hover) }
.panel-bar .motion-btn { margin-left:8px; height:24px }
.tap span { font-family:"Medeo Mono",monospace; font-size:12px }
.core-fields dd.good { color:var(--ok) }
.core-fields dd.flag { color:var(--warn) }


.case-band {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:48px;
  align-items:end;
  padding:64px 64px 56px
}
.case-num { display:grid; gap:12px; justify-items:start }
.hero-num {
  font:400 clamp(88px,11vw,152px)/.9 "Medeo Pixel","Medeo Mono",monospace;
  letter-spacing:-.01em;
  color:var(--ink)
}
.case-cap { color:var(--muted); max-width:24em; text-wrap:pretty }
.flow { display:grid; gap:10px; margin:0 }
.flow-bars { display:grid; grid-template-columns:repeat(28,1fr); gap:4px; align-items:end; height:180px }
.flow-bars i {
  display:block;
  height:calc(var(--h) * 100%);
  min-height:3px;
  background:
    repeating-linear-gradient(0deg, var(--ink-2) 0 3px, transparent 3px 5px);
  opacity:.75;
  transform-origin:bottom;
  transition:transform 1.1s var(--ease)
}
.flow-bars i.peak { background:repeating-linear-gradient(0deg, var(--accent) 0 3px, transparent 3px 5px); opacity:1 }
.js .flow:not(.in) .flow-bars i { transform:scaleY(.04) }
.flow figcaption { display:flex; justify-content:space-between; gap:16px; font:500 12px/1.4 "Medeo Mono",monospace; color:var(--faint) }


.sec-head.center { margin:0 auto 48px; text-align:center; justify-items:center }
.sec-head.center .lede { max-width:34em }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px }
.chips li {
  padding:7px 12px;
  border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line-strong);
  font-size:13.5px;
  color:var(--ink-2)
}
.chips.center { justify-content:center }
.feature-copy .link { justify-self:start; margin-top:8px }
.feature { align-items:start }
.feature .panel { position:sticky; top:96px }
.panel.wide { margin:0 -24px }
.panel-bar .fig { color:var(--faint); padding-right:10px; border-right:1px solid var(--line); white-space:nowrap; flex:none }


.rules-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) }
.rule-list { display:grid; align-content:start; border-right:1px solid var(--line) }
.rc {
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  gap:4px 16px;
  align-items:center;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  transition:background .2s
}
.rc b { font-weight:500; font-size:15px }
.rc p { font-size:13.5px; color:var(--muted); line-height:1.4 }
.rc .cnt { grid-column:2; grid-row:2; justify-self:end; font:500 12px/1 "Medeo Mono",monospace; color:var(--faint) }
.rc.on .cnt { color:var(--ok) }
.tgl {
  grid-column:2; grid-row:1;
  position:relative;
  width:34px; height:20px;
  border-radius:999px;
  background:var(--line-strong);
  transition:background .25s
}
.tgl i { position:absolute; left:3px; top:3px; width:14px; height:14px; border-radius:50%; background:var(--bg); transition:transform .25s var(--ease) }
.rc.on .tgl { background:var(--ok) }
.rc.on .tgl i { transform:translateX(14px) }
.rules-grid .kw { min-height:0 }
.rules-grid .kw-feed { height:360px }


.mem { padding:20px; display:grid; gap:14px; background:var(--panel) }
.mem-q { justify-self:end; max-width:80% }
.mem-q span { display:inline-block; padding:10px 14px; border-radius:14px 14px 4px 14px; background:var(--paper); box-shadow:0 0 0 1px var(--line); font-size:14.5px }
.mem-a { padding:14px 16px; border-radius:12px; background:var(--paper); box-shadow:0 0 0 1px var(--line); display:grid; gap:8px }
.mem-a .k,.voice .k { font:500 12px/1 "Medeo Mono",monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--faint) }
.mem-a > p:not(.k) { font-size:15px; line-height:1.5; min-height:3em }
.mem-src { display:grid; gap:2px; margin-top:4px; border-top:1px solid var(--line); padding-top:10px }
.mem-src li { display:grid; grid-template-columns:62px 74px 1fr; gap:10px; padding:6px 8px; border-radius:6px; font-size:13.5px; color:var(--muted); transition:background .4s, color .4s }
.mem-src time,.mem-src b { font:500 12px/1.6 "Medeo Mono",monospace; color:var(--faint) }
.mem-src li.hit.lit,.no-js .mem-src li.hit { background:var(--accent-soft); color:var(--ink) }
.mem-src li.hit.lit b { color:var(--accent-ink) }
.mem-src li.now { color:var(--ink-2) }
.mem-strip { display:grid; grid-template-columns:repeat(32,1fr); gap:3px; align-items:end; height:36px }
.mem-strip i { display:block; height:calc(var(--h) * 100%); background:var(--line-strong); border-radius:1px }
.mem-cap { font:500 12px/1.4 "Medeo Mono",monospace; color:var(--muted) }


.tgw { background:var(--panel) }
.tg-head { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--paper) }
.tg-head .ava { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--ink); color:var(--bg); font-weight:600 }
.tg-head b { display:block; font-weight:500; font-size:14.5px }
.tg-head small { font-size:12.5px; color:var(--muted) }
.tg-head .r { margin-left:auto; font:500 12px/1 "Medeo Mono",monospace; color:var(--faint) }
.tgw .tg-topics { padding:10px 16px; border-bottom:1px solid var(--line); background:var(--paper) }
.tg-chat { padding:18px 16px 20px; display:grid; gap:10px; min-height:330px; align-content:start }
.tg-card { transition:max-height .5s var(--ease), opacity .35s; max-height:420px; overflow:hidden }
.tg-card.folded { max-height:0; opacity:0 }
.tg-done { font:400 12.5px/1.5 "Medeo Mono",monospace; color:var(--ok); padding:8px 12px; border-radius:8px; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line); max-width:440px; opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s var(--ease) }
.tg-done.on { opacity:1; transform:none }
.tg-btns span[data-tg-send].press { background:var(--ink); color:var(--bg) }


.voice-grid { display:grid; grid-template-columns:1fr 1fr; min-height:260px }
.voice-in,.voice-out { padding:24px; display:grid; gap:14px; align-content:start }
.voice-in { border-right:1px solid var(--line) }
.voice-msg { font-size:20px; line-height:1.35; letter-spacing:-.01em; min-height:2.7em }
.seg { display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; border-radius:10px; box-shadow:inset 0 0 0 1px var(--line-strong); justify-self:start }
.seg button { padding:7px 12px; border-radius:7px; font-size:13.5px; color:var(--muted) }
.seg button:hover { color:var(--ink) }
.seg button[aria-checked=true] { background:var(--ink); color:var(--bg) }
.switch { display:inline-flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-2); cursor:pointer; justify-self:start }
.switch input { width:16px; height:16px; accent-color:var(--warn) }
.voice-draft { font-size:20px; line-height:1.4; letter-spacing:-.01em; min-height:4.2em }
.voice-meta { font:500 12.5px/1.4 "Medeo Mono",monospace; color:var(--ok) }
.voice.to-person .voice-draft { color:var(--muted) }
.voice.to-person .voice-meta,.voice.to-person [data-voice-k] { color:var(--warn) }


.tk-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin:0 -24px }
.rights { width:100%; border-collapse:collapse; font-size:13.5px }
.rights th,.rights td { padding:12px 14px; border-bottom:1px solid var(--line); text-align:left }
.rights thead th { font:500 12px/1 "Medeo Mono",monospace; color:var(--faint) }
.rights tbody th b { display:block; font-weight:500 }
.rights tbody th small { font-size:12.5px; color:var(--muted) }
.rights td { font:500 12px/1 "Medeo Mono",monospace }
.rights td.y { color:var(--ok) }
.rights td.v { color:var(--ink-2) }
.rights td.n { color:var(--faint) }
.tk-grid .rep-nums { grid-template-columns:1fr 1fr }
.tk-grid .rep-nums div:nth-child(3) { border-left:0 }
.tk-grid .rep-nums div:nth-child(n+3) { border-top:1px solid var(--line) }
.rep-nums b { font:500 24px/1 "Medeo Mono",monospace; letter-spacing:-.02em }
.tk-grid .log ol { height:auto; min-height:250px; -webkit-mask-image:linear-gradient(transparent, #000 22%); mask-image:linear-gradient(transparent, #000 22%) }
.log li { grid-template-columns:64px 12px 1fr }


.faq { align-items:start }
.faq-head { display:grid; gap:16px; align-content:start; position:sticky; top:96px }
.bt-hero { position:relative; overflow:hidden }
.wl-art { opacity:.7; -webkit-mask-image:linear-gradient(90deg, transparent 30%, #000); mask-image:linear-gradient(90deg, transparent 30%, #000) }

.steps { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px }
.steps li { display:inline-flex; gap:8px; align-items:center; padding:7px 12px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line-strong); font-size:13.5px; color:var(--ink-2) }
.steps li span { font:500 12px/1 "Medeo Mono",monospace; color:var(--accent-ink) }
.apply-form > small a { border-bottom:1px solid var(--line-strong) }

@media (max-width:1080px) {
  .tk-grid { grid-template-columns:1fr 1fr; margin:0 }
  .tk-grid .log { grid-column:1/-1 }
  .case-band { padding-left:40px; padding-right:40px }
  .panel.wide { margin:0 }
}
@media (max-width:900px) {
  .router-grid { grid-template-columns:1fr; gap:16px }
  .src { grid-template-columns:repeat(4,1fr) }
  .src .node { padding:10px }
  .src .node-t { display:none }
  .src .node-h { font-size:12px; flex-wrap:wrap; gap:4px }
  .out { grid-template-columns:1fr }
  .out .node:not(.hot) .node-t,.out .node:not(.hot) .tap { display:none }
  .case-band { grid-template-columns:1fr; gap:32px }
  .rules-grid { grid-template-columns:1fr }
  .rule-list { border-right:0; border-bottom:1px solid var(--line) }
  .voice-grid { grid-template-columns:1fr }
  .voice-in { border-right:0; border-bottom:1px solid var(--line) }
  .feature .panel,.faq-head { position:static }
}
@media (max-width:640px) {
  .hero { padding-top:48px }
  .hero-art { height:420px }
  .router { margin-top:36px }
  .router-grid { padding:16px }
  .src { grid-template-columns:1fr 1fr }
  .router-bar .demo { display:inline; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1 }
  .router-bar .sp { display:none }
  .core-draft { min-height:0 }
  .case-band { padding:48px 0 40px }
  .flow-bars { height:120px; gap:2px }
  .tk-grid { grid-template-columns:1fr }
  .rc { padding:14px 16px }
  .voice-in,.voice-out { padding:18px 16px }
  .voice-msg,.voice-draft { font-size:17px }
  .mem { padding:14px }
  .mem-src li { grid-template-columns:52px 1fr; }
  .mem-src li b { display:none }
  .sec-head.center { text-align:left; justify-items:start }
  .chips.center { justify-content:flex-start }
}
.hero-top { max-width:1120px }
.hero .h1 { font-size:clamp(42px,6vw,76px) }
.hero-art { opacity:.65 }
.hero-num,.facts dt,.pixel { font-feature-settings:"zero" 0 }
.apply-side ol.steps { border-top:0; margin-top:8px }
.apply-side ol.steps li { display:inline-flex; grid-template-columns:none; padding:7px 12px; border-bottom:0 }
.tg-chat { min-height:0 }
.rules-grid .kw-feed { height:100% ; min-height:340px }

.hero-num { font-feature-settings:"ss09" 1 }
.hero-art {
  top:120px; height:520px; opacity:.8;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 74% 58%, #000 30%, transparent 72%);
  mask-image:radial-gradient(ellipse 62% 58% at 74% 58%, #000 30%, transparent 72%)
}
.chips { gap:6px 18px; margin-top:16px }
.chips li {
  padding:0;
  border-radius:0;
  box-shadow:none;
  font:500 12.5px/1.6 "Medeo Mono",ui-monospace,monospace;
  letter-spacing:.01em;
  color:var(--muted)
}
.chips li::before { content:"— "; color:var(--faint) }
.apply-side ol.steps { display:flex; flex-wrap:wrap; gap:6px 18px }
.apply-side ol.steps li { padding:0; box-shadow:none; border-radius:0; font-size:14px; color:var(--muted) }
.sec-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; margin-top:20px }
.sec-foot .chips { margin-top:0 }
.faq details p a { color:var(--ink); border-bottom:1px solid var(--line-strong) }
@media (max-width:640px) { .router-bar .demo { white-space:normal; line-height:1.3 } .router-bar { height:auto; min-height:44px; padding-top:8px; padding-bottom:8px } }

.core-fields dd { white-space:normal; overflow:visible }
.btn { max-width:100% }
.aside .btn,.hero-cta .btn { white-space:normal; height:auto; min-height:var(--h); text-align:center; line-height:1.25; padding-top:10px; padding-bottom:10px }
.rights td { white-space:nowrap }
@media (max-width:640px) {
  .hero .h1 { font-size:clamp(34px,9.6vw,44px) }
  .page-h1 { font-size:clamp(32px,9vw,42px) }
  .rules-grid .kw-feed { min-height:0; height:auto }
  .rules-grid .kw-feed li:nth-child(n+5) { display:none }
  .flow figcaption { flex-direction:column; gap:4px }
  .mem-src li { grid-template-columns:52px 64px 1fr; gap:8px }
  .mem-src li b { display:block }
  .seg { display:grid; grid-template-columns:1fr 1fr; justify-self:stretch }
  .seg button { text-align:center }
  .rights th,.rights td { padding:10px 8px }
}
.page-fig .panel.wide,.page-fig .tk-grid { margin:0 }
.case-band.page-fig { padding-top:56px; padding-bottom:48px }
.lede .tag { padding:1px 6px; border-radius:4px; box-shadow:inset 0 0 0 1px var(--line-strong); font:500 12px/1 "Medeo Mono",monospace; color:var(--faint); vertical-align:2px }
.page-fig > .panel:not(.wide) { max-width:640px; margin:0 auto; position:static }
.tk-grid { align-items:start }
.node-h .tag { font-style:normal; padding:1px 5px; border-radius:4px; box-shadow:inset 0 0 0 1px var(--line-strong); color:var(--faint); text-transform:none; letter-spacing:0 }
.hero-art { -webkit-mask-image:radial-gradient(ellipse 48% 54% at 84% 64%, #000 28%, transparent 72%); mask-image:radial-gradient(ellipse 48% 54% at 84% 64%, #000 28%, transparent 72%) }
.src .node:nth-child(6) .node-t { color:var(--muted) }
@media (max-width:900px) { .src { grid-template-columns:repeat(3,1fr) } }
@media (max-width:640px) { .hero-art { display:none } .src { grid-template-columns:1fr 1fr } .src .node:last-child { grid-column:1/-1 } }

.cta-short { display:none }
@media (max-width:640px) {
  :root { --gut:20px }
  .nav-in { padding:0; gap:10px }
  .cta-long { display:none }
  .cta-short { display:inline }
  .nav-end .btn { padding:0 16px }
  .menu-btn { width:38px; height:38px }
}
@media (max-width:640px) {
  .router-grid { padding:20px }
  .router-bar,.trace li { padding-left:20px; padding-right:20px }
}
@media (max-width:640px) {
  .router-bar { flex-wrap:wrap; row-gap:6px }
  .router-bar .sp { display:block; flex:1 }
  .router-bar .demo { order:3; flex-basis:100%; white-space:normal }
}

@media (max-width:640px) {
  .src { grid-template-columns:1fr; gap:6px }
  .src .node:last-child { grid-column:auto }
  .src .node { padding:9px 12px; border-radius:8px }
  .src .node-h { flex-wrap:nowrap; white-space:nowrap }
  .src .node-h .n { margin-left:auto }
}
@media (max-width:640px) {
  .trace { height:auto; padding:8px 0 10px }
  .trace ol { align-content:start }
  .trace li { height:auto; grid-template-columns:1fr auto; gap:4px 12px; padding-top:5px; padding-bottom:5px; white-space:normal; line-height:1.45 }
  .trace li span { overflow:visible; text-overflow:clip }
  .core-draft .k,.voice .k,.mem-a .k { letter-spacing:.04em; white-space:nowrap }
}

.h1,.hero .h1 { font-weight:450; letter-spacing:-.024em }
.h2 { font-weight:500 }

.seg-nw { white-space:nowrap }
.kw-gauge .row b { text-transform:none }
.chips + .link,.sec-foot .chips + .link { margin-top:20px }
.trace li { align-items:start }
.trace li .ok,.trace li .wa { white-space:nowrap }
.tgw .tg-topics { overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap }
.tgw .tg-topics span { flex:none }
@media (max-width:640px) {
  .core-steps span { letter-spacing:0; padding:9px 4px }
  .panel-bar > span:not(.fig):not(.r) { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .panel-bar { gap:8px }
  .mem-src li { grid-template-columns:1fr; gap:2px }
  .mem-src time,.mem-src b { display:inline; margin-right:8px }
  .mem-src li > span { grid-column:1 }
  .tg-head .r { display:none }
  .tg-head small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .tg-head > div { min-width:0 }
  .chips { flex-direction:column; gap:6px }
}

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important } }
.tgw { align-self:start }
.tg-chat { padding-bottom:16px }
@media (max-width:640px) {
  .mem-src li { display:block }
  .mem-src li > span { display:block; margin-top:2px }
}
.flow-bars { grid-template-columns:repeat(15,1fr); gap:6px }
.flow-bars i.now { background:repeating-linear-gradient(0deg, var(--accent) 0 3px, transparent 3px 5px); opacity:.45; animation:now-pulse 1.6s ease-in-out infinite }
@keyframes now-pulse { 50% { opacity:.9 } }
.src .node[role=button] { cursor:pointer }
.src .node[role=button]:hover { background:var(--hover); box-shadow:0 0 0 1px var(--line-strong) }
.src .node[role=button]:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
.router.manual .router-bar .live::before { background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }

.rule-list.grid2 { display:grid; grid-template-columns:1fr 1fr; border-right:0; border-bottom:1px solid var(--line) }
.rule-list.grid2 .rc { border-bottom:0 }
.rule-list.grid2 .rc:nth-child(2n) { border-left:1px solid var(--line) }
.rule-list.grid2 .rc:nth-child(n+3) { border-top:1px solid var(--line) }
.data-kw-wrap,.panel.wide[data-kw] .kw-feed { height:auto; min-height:0; border-right:0; overflow:hidden }
.panel.wide[data-kw] .kw-feed::after { display:none }
.kw-feed li.cm { border-bottom:0; padding-bottom:4px }
.kw-feed li.re { display:grid; grid-template-columns:auto 1fr; gap:10px; padding:2px 16px 10px 40px; border-bottom:1px solid var(--line); font-size:13.5px; animation:feed-in .5s var(--ease) both }
.kw-feed li.re .u { font:400 12px/1.6 "Medeo Mono",monospace; color:var(--accent-ink) }
.kw-feed li.re .c { color:var(--muted) }
.kw-feed li.cm:has(+ li.cm),.kw-feed li.cm:last-child { border-bottom:1px solid var(--line); padding-bottom:9px }
.kw-stats { display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; padding:12px 16px; border-top:1px solid var(--line); font:500 12px/1.4 "Medeo Mono",monospace; color:var(--faint); letter-spacing:.02em }
.kw-stats b { color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; margin-left:4px }
.kw-stats .pace { display:flex; align-items:center; gap:8px; margin-left:auto }
.kw-stats .bar { display:block; width:120px; height:6px }
.panel.wide[data-kw] > .kw-note { padding:0 16px 14px; margin:0 }
@media (max-width:640px) {
  .rule-list.grid2 { grid-template-columns:1fr }
  .rule-list.grid2 .rc:nth-child(2n) { border-left:0 }
  .rule-list.grid2 .rc:nth-child(n+2) { border-top:1px solid var(--line) }
  .kw-stats .pace { margin-left:0 }
  .kw-feed li.re { padding-left:28px }
}
.foot .foot-h { margin-bottom:14px; font:500 12px/1 "Medeo Mono",monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--faint) }
.foot-frame { margin-top:0 }


.core-msg { height:92px; min-height:0; overflow:hidden }
.core-msg .q { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.core-draft { min-height:0 }
.core-draft p[data-f=draft] { height:calc(3 * 1.45em); min-height:0; overflow:hidden }
.core-draft p.k { min-height:0 }
.core-fields dd { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
@media (max-width:900px) {
  .out .node:not(.hot) .node-t { display:-webkit-box }
  .out .node:not(.hot) .tap { display:flex }
}
@media (max-width:640px) {
  .trace { height:calc(3 * 30px + 18px); padding:8px 0 10px }
  .trace ol { align-content:end }
  .trace li { height:30px; white-space:nowrap; padding-top:0; padding-bottom:0; line-height:1 }
  .trace li span { overflow:hidden; text-overflow:ellipsis }
}

.panel.wide[data-kw] .kw-feed { height:240px; -webkit-mask-image:linear-gradient(#000 78%, transparent); mask-image:linear-gradient(#000 78%, transparent) }
@media (max-width:640px) { .panel.wide[data-kw] .kw-feed li:nth-child(n+5) { display:grid } }


.ic { flex:none; width:16px; height:16px; stroke-width:1.75 }
.eyebrow:has(.ic)::before { display:none }
.eyebrow .ic { width:14px; height:14px; color:var(--accent) }
.eyebrow.plain .ic { color:var(--faint) }
.node-h .ic { width:14px; height:14px; color:var(--faint); transition:color .25s }
.node.hot .node-h .ic { color:var(--accent) }
.out .node.ok.hot .node-h .ic { color:var(--ok) }
.out .node.person.hot .node-h .ic { color:var(--warn) }
.out .node.notice.hot .node-h .ic { color:var(--ink-2) }
.chips li.has-ic { display:inline-flex; align-items:center; gap:8px }
.chips li.has-ic::before { display:none }
.chips li .ic { width:14px; height:14px; color:var(--faint) }
.rc b { display:inline-flex; align-items:center; gap:8px }
.rc b .ic { width:15px; height:15px; color:var(--muted) }
.rc.on b .ic { color:var(--ink-2) }
.cards a .k { display:inline-flex; align-items:center; gap:8px }
.cards a .k .ic { width:14px; height:14px; color:var(--accent) }

.core-fields dd:empty::before,.core-msg .who:empty::before,.core-draft p[data-f=draft]:empty::before { content:"—"; color:var(--faint) }
html[data-theme=light] .core-draft { background:none }

.eyebrow:has(.ic) { align-items:flex-start }
.eyebrow .ic { margin-top:-1px }

@media (max-width:640px) { .trace .ctx { display:none } }

.eyebrow { text-wrap:balance }

.core-draft { transition:opacity .25s, background-color .25s }
.core-draft:has(p[data-f=draft]:empty) { opacity:.5; background:none }

.core-steps { grid-template-columns:repeat(4,auto) }
.core-steps span { min-width:0; padding-left:4px; padding-right:4px; letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.core { container-type:inline-size }
@container (max-width:320px) { .core-steps span { letter-spacing:0; padding-left:2px; padding-right:2px } }
@container (max-width:280px) {
  .core-steps { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .core-steps span:nth-child(3) { border-left:0 }
  .core-steps span:nth-child(n+3) { border-top:1px solid var(--line) }
}


.apply-card, #waitlist .apply { min-width:0 }
.bt-hero .apply { position:relative; grid-template-columns:minmax(0,1fr) 540px; gap:88px; align-items:start }
.bt-hero .apply-side { display:block; min-width:0; container-type:inline-size }
.bt-tile { display:grid; place-items:center; width:64px; height:64px; border-radius:16px; background:var(--paper); box-shadow:var(--shadow), inset 0 0 0 1px var(--line) }
.bt-tile i { position:relative; width:28px; height:28px; background:var(--ink) }
.bt-tile i::after { content:""; position:absolute; right:0; bottom:0; width:12px; height:12px; background:var(--accent) }
.bt-brand { display:flex; align-items:center; gap:10px; min-height:28px; margin:20px 0 16px }
.bt-name { font-size:18px; line-height:24px; color:var(--muted) }
.bt-badge { padding:2px 8px; border-radius:6px; box-shadow:inset 0 0 0 1px var(--line-strong); font-size:13px; line-height:20px; color:var(--muted); white-space:nowrap }
.bt-h { font-family:"Medeo Serif", Georgia, serif; font-weight:500; color:var(--ink); font-size:min(11.4cqi,60px); line-height:1.08; letter-spacing:-.02em }
.bt-h span { display:block; white-space:nowrap }
.bt-lead { margin-top:20px; font-size:20px; line-height:30px; color:var(--muted); text-wrap:pretty; max-width:34em }
.bt-terms { display:grid; gap:10px; margin-top:24px; padding-top:24px; border-top:1px solid var(--line-strong) }
.bt-terms li { display:flex; align-items:center; gap:10px; font-size:15px; line-height:22px; color:var(--ink) }
.bt-terms .ic { flex:none; width:16px; height:16px; color:var(--muted) }

.bt-hero .apply-card { padding:32px; border-radius:20px; background:color-mix(in srgb, var(--ink) 3%, var(--bg)); box-shadow:inset 0 0 0 1px var(--line); min-width:0 }

.bt-form { display:grid; gap:20px }
.bt-title { font-family:"Medeo Serif", Georgia, serif; font-size:28px; line-height:34px; font-weight:500; letter-spacing:-.015em; color:var(--ink); outline:none }
.bt-field { display:grid; gap:8px }
.bt-field label { font-size:14px; line-height:20px; font-weight:500; color:var(--ink) }
.bt-field label em { font-style:normal; color:var(--accent-ink); margin-left:2px }
.bt-field label i { font-style:normal; font-weight:400; font-size:13px; color:var(--faint) }
.bt-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start }
fieldset.bt-field { border:0; padding:0; margin:0; min-width:0 }
.bt-field legend { padding:0; margin-bottom:8px; font-size:14px; line-height:20px; font-weight:500; color:var(--ink) }
.bt-field legend em { font-style:normal; color:var(--accent-ink); margin-left:2px }
.bt-radios { display:flex; flex-wrap:wrap; gap:8px 24px }
.bt-radios label { display:inline-flex; align-items:center; gap:8px; font-size:15px; line-height:24px; font-weight:400; color:var(--ink); cursor:pointer }
.bt-radios input { appearance:none; flex:none; width:20px; height:20px; margin:0; border-radius:50%; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line-strong); cursor:pointer }
.bt-radios input:checked { background:var(--paper); box-shadow:inset 0 0 0 6px var(--ink) }
.bt-radios input:focus-visible { outline:2px solid var(--ink); outline-offset:2px }
.bt-field textarea { display:block; width:100%; min-height:96px; padding:12px 14px; border:0; border-radius:10px; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line-strong); color:var(--ink); font:400 16px/24px "Medeo Sans", sans-serif; resize:vertical }
.bt-field textarea:hover { box-shadow:inset 0 0 0 1px var(--muted) }
.bt-field textarea:focus { outline:2px solid transparent; box-shadow:inset 0 0 0 1px var(--ink), 0 0 0 3px var(--hover) }
.bt-field input:not([type="radio"]), .bt-code { width:100%; height:48px; padding:0 14px; border:0; border-radius:10px; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line-strong); color:var(--ink); font:400 16px/24px "Medeo Sans", sans-serif }
.bt-field input::placeholder, .bt-code::placeholder { color:color-mix(in srgb, var(--faint) 55%, var(--mark)) }
.bt-field input:hover, .bt-code:hover { box-shadow:inset 0 0 0 1px var(--muted) }
.bt-field input:focus, .bt-code:focus { outline:2px solid transparent; box-shadow:inset 0 0 0 1px var(--ink), 0 0 0 3px var(--hover) }
.bt-field input.bad, .bt-code.bad { box-shadow:inset 0 0 0 1px var(--accent) }
.bt-hint { display:block; font-size:13px; line-height:18px; color:var(--muted) }
.bt-bad { color:var(--accent-ink) }
.bt-submit { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 20px; border:0; border-radius:8px; background:var(--btn-bg); color:var(--btn-ink); font:500 15px/20px "Medeo Sans", sans-serif; cursor:pointer; white-space:nowrap }
.bt-submit[disabled] { opacity:.55; cursor:default }
.bt-spin { width:14px; height:14px; border-radius:50%; border:1.5px solid currentColor; border-right-color:transparent; animation:bt-spin .7s linear infinite }
@keyframes bt-spin { to { transform:rotate(360deg) } }
.bt-legal { display:block; margin-top:-4px; font-size:12px; line-height:18px; color:var(--faint); text-wrap:balance }
.bt-legal a { color:var(--muted); text-decoration:underline; text-underline-offset:2px }
.bt-alert { font-size:13px; line-height:18px; color:var(--accent-ink) }
.bt-alert[hidden] { display:none }
.bt-alert a, .bt-bad a { color:inherit; text-decoration:underline; text-underline-offset:2px }

.bt-pane { display:grid }
.bt-text { margin-top:8px; font-size:16px; line-height:24px; color:var(--muted); text-wrap:pretty }
.bt-text b { color:var(--ink); font-weight:500; overflow-wrap:anywhere }
.bt-row { display:grid; grid-template-columns:minmax(0,1fr) max-content; gap:12px; align-items:start; margin-top:24px }
.bt-code { font:500 22px/32px "Medeo Mono", monospace; letter-spacing:.2em; font-variant-numeric:tabular-nums; font-feature-settings:"ss09", "zero" 0 }
.bt-code::placeholder { color:var(--line-strong) }
.bt-links { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin-top:16px; font-size:13px; line-height:18px; color:var(--faint) }
.bt-pane > .bt-hint { margin-top:8px }
.bt-link { color:var(--ink); border-bottom:1px solid var(--line-strong); padding-bottom:1px; background:none; cursor:pointer; font:inherit }
.bt-link[disabled] { color:var(--faint); cursor:default }
.bt-clock { font:400 12px/16px "Medeo Mono", monospace; color:var(--faint) }
.bt-done { padding:24px 0; text-align:center; justify-items:center }

.bt-cta { position:relative; display:grid; justify-items:center; gap:16px; text-align:center; overflow:hidden }
.bt-cta > * { position:relative }
.bt-cta .wl-art { position:absolute }
.bt-cta-h { font-family:"Medeo Serif", Georgia, serif; font-weight:500; font-size:clamp(32px,5vw,56px); line-height:1.08; letter-spacing:-.02em; color:var(--ink); text-wrap:balance }
.bt-cta-t { font-size:18px; line-height:28px; color:var(--muted) }
.bt-cta .btn { margin-top:8px }

@media (max-width:900px) {
  .bt-hero .apply { grid-template-columns:minmax(0,1fr); gap:32px }
  .bt-hero .apply-card { max-width:480px }
}
@media (max-width:640px) {
  .bt-hero .apply-card { padding:20px; max-width:none }
  .bt-h { font-size:min(11.4cqi,40px) }
  .bt-lead { font-size:17px; line-height:26px }
  .bt-title { font-size:24px; line-height:30px }
  .bt-row { grid-template-columns:1fr }
}
@media (prefers-reduced-motion:reduce) { .bt-spin { animation:none } }
@media (max-width:900px) { .wl-art { display:none } }