/* SPDX-License-Identifier: MIT */
:root {
  color-scheme:dark;
  --bg:#111817;
  --panel:#18211f;
  --line:#34413c;
  --text:#edf1e9;
  --muted:#b0beb5;
  --lime:#c5f277;
  --red:#ffae99;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-family:Inter,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:var(--bg)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0
}
a {
  color:inherit
}
button,select {
  font:inherit
}
button,a,select {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  cursor:default;
  opacity:.45
}
button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid var(--lime);
  outline-offset:5px
}
[hidden] {
  display:none!important
}
.skip {
  position:fixed;
  top:-100px;
  left:20px;
  background:var(--lime);
  color:var(--bg);
  padding:12px;
  z-index:10
}
.skip:focus {
  top:10px
}
.topbar {
  max-width:1320px;
  margin:auto;
  padding:28px 42px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.brand {
  font:700 12px var(--mono);
  letter-spacing:1px;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:12px
}
.brand-symbol {
  color:var(--lime);
  font:700 30px var(--mono)
}
.edition {
  font:11px var(--mono);
  letter-spacing:1px;
  color:var(--muted)
}
.text-link {
  font:12px var(--mono);
  text-underline-offset:5px
}
main {
  max-width:1236px;
  margin:auto;
  padding:0 32px
}
.hero {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:60px;
  padding:76px 0 65px;
  align-items:center
}
.eyebrow {
  font:11px var(--mono);
  letter-spacing:1.6px;
  color:var(--lime);
  line-height:1.8;
  margin:0 0 18px
}
.dot {
  display:inline-block;
  background:var(--lime);
  height:6px;
  width:6px;
  border-radius:50%;
  margin-right:7px
}
h1 {
  font-size:clamp(48px,6vw,78px);
  letter-spacing:-4px;
  line-height:1.06;
  margin:0 0 26px;
  font-weight:600
}
h1 em {
  font-style:normal;
  color:var(--lime)
}
.lede {
  font-size:16px;
  line-height:1.8;
  color:var(--muted);
  margin-bottom:28px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:14px 19px;
  border:1px solid transparent;
  border-radius:5px;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  min-height:46px
}
.primary {
  background:var(--lime);
  color:#172117
}
.primary:hover {
  background:#d4ffa0
}
.secondary {
  background:transparent;
  border-color:#58685f;
  color:var(--text)
}
.secondary:hover:not(:disabled) {
  background:#2c3931
}
.hero-note {
  font:11px var(--mono);
  color:var(--muted);
  margin-top:17px
}
.hero-demo {
  background:#1a2521;
  border:1px solid #42513d;
  border-radius:10px;
  transform:rotate(-2deg);
  box-shadow:15px 18px 0 #151d18;
  overflow:hidden
}
.window-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px;
  font:11px var(--mono);
  border-bottom:1px solid var(--line);
  color:var(--muted)
}
.live-pill {
  border:1px solid #526445;
  border-radius:20px;
  padding:5px 8px;
  color:var(--lime);
  font-size:11px
}
.diagram {
  padding:26px 25px
}
.event {
  border:1px solid #778a66;
  border-radius:4px;
  text-align:center;
  padding:13px;
  font:14px var(--mono);
  color:var(--lime);
  max-width:210px;
  margin:auto
}
.event span {
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:7px
}
.fork-lines {
  display:flex;
  justify-content:space-around;
  color:#73806f;
  margin:10px 0
}
.deliveries {
  display:flex;
  gap:12px
}
.deliveries span {
  flex:1;
  text-align:center;
  border:1px solid var(--line);
  padding:10px 5px;
  font:11px var(--mono);
  background:var(--bg);
  border-radius:3px
}
.balance {
  display:flex;
  border:1px solid var(--line);
  border-radius:5px;
  background:#111a16
}
.balance>span {
  flex:1;
  padding:17px;
  font:11px var(--mono);
  color:var(--muted)
}
.balance strong {
  display:block;
  font-size:35px;
  color:var(--text);
  margin-top:8px;
  font-weight:400
}
.balance .bad {
  border-left:1px solid var(--line)
}
.balance .bad strong {
  color:var(--red)
}
.demo-footer {
  padding:15px;
  border-top:1px solid var(--line);
  font:11px var(--mono);
  color:var(--muted)
}
.status-dot {
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--red);
  border-radius:50%;
  margin-right:8px
}
.principles {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:21px 0;
  display:flex;
  justify-content:space-between;
  font:11px var(--mono);
  color:var(--muted);
  gap:14px
}
.principles b {
  color:var(--lime);
  font-weight:400;
  margin-right:10px
}
#experiments {
  padding:55px 0 48px;
  scroll-margin-top:24px
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:26px;
  gap:20px
}
.section-heading .eyebrow {
  margin-bottom:12px
}
h2 {
  font-size:29px;
  letter-spacing:-.8px;
  font-weight:500;
  margin:0
}
.progress-area {
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:9px;
  font:11px var(--mono);
  color:var(--muted)
}
.text-button {
  border:0;
  background:transparent;
  color:var(--muted);
  font:11px var(--mono);
  text-decoration:underline;
  text-underline-offset:4px;
  padding:6px
}
.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}
.card {
  text-align:left;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:7px;
  padding:23px;
  color:var(--text);
  display:flex;
  flex-direction:column;
  transition:border-color .15s,transform .15s
}
.card:hover,.card.selected {
  border-color:var(--lime);
  transform:translateY(-3px)
}
.card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px
}
.lab-number {
  font:11px var(--mono);
  color:var(--muted);
  letter-spacing:1px
}
.card-icon {
  font:26px var(--mono);
  color:var(--lime);
  height:32px
}
.card h3 {
  font-size:20px;
  font-weight:500;
  letter-spacing:-.5px;
  margin:21px 0 10px
}
.card p {
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
  margin:0 0 22px;
  flex:1
}
.card-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  padding-top:16px;
  font:11px var(--mono);
  color:var(--muted)
}
.arrow {
  font-size:19px;
  color:var(--lime)
}
.workbench {
  border:1px solid #546447;
  background:var(--panel);
  border-radius:9px;
  padding:30px;
  margin:0 0 45px;
  scroll-margin-top:20px
}
.bench-heading {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:start
}
.bench-heading h2 {
  font-size:32px
}
.bench-heading .eyebrow {
  margin-bottom:8px
}
blockquote {
  margin:24px 0 30px;
  padding:16px 20px;
  border-left:3px solid var(--lime);
  background:#222e26;
  font-size:19px;
  line-height:1.5
}
.bench-grid {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:30px
}
h3 {
  font-size:16px
}
.controls h3 {
  margin:0 0 15px
}
.step {
  font:11px var(--mono);
  color:var(--lime);
  margin-right:9px
}
.controls p {
  font-size:14px;
  line-height:1.6;
  color:var(--muted)
}
.choices {
  display:grid;
  gap:8px
}
.choice {
  background:#111a16;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:4px;
  padding:12px;
  text-align:left;
  font-size:13px;
  min-height:44px
}
.choice[aria-pressed=true] {
  border-color:var(--lime);
  background:#2c3924
}
.controls .muted {
  font-size:11px;
  line-height:1.7
}
.controls h3:not(:first-child) {
  margin-top:27px
}
label {
  display:block;
  font:11px var(--mono);
  color:var(--muted);
  margin-bottom:10px
}
select {
  width:100%;
  background:var(--bg);
  border:1px solid #65756b;
  color:var(--text);
  padding:12px;
  border-radius:4px
}
.actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:18px 0
}
.results {
  background:#101714;
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  align-self:start;
  min-height:340px
}
.results-top {
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding:16px;
  font:11px var(--mono);
  color:var(--muted);
  gap:10px
}
.empty-state {
  text-align:center;
  padding:50px 24px;
  color:var(--muted)
}
.empty-state>span {
  font:60px var(--mono);
  color:var(--lime)
}
.empty-state p {
  font-size:13px;
  line-height:1.7
}
.verdict {
  font:12px var(--mono);
  margin:22px 22px 0
}
.pass {
  color:var(--lime)
}
.fail {
  color:var(--red)
}
.metrics {
  display:flex;
  margin:23px 22px 0;
  gap:20px
}
.metrics>div {
  flex:1
}
.metrics span {
  display:block;
  font:11px var(--mono);
  color:var(--muted);
  letter-spacing:1px
}
.metrics strong {
  font:27px var(--mono);
  display:block;
  margin-top:10px;
  overflow-wrap:anywhere
}
.metric-label {
  font:11px var(--mono);
  color:var(--muted);
  margin:12px 22px 23px
}
.trace {
  border-top:1px solid var(--line);
  padding:16px 22px 16px 40px;
  margin:0;
  font:11px/1.9 var(--mono);
  color:var(--muted)
}
.trace li {
  padding-left:3px;
  margin:6px 0;
  overflow-wrap:anywhere
}
.conflict {
  font-size:12px;
  line-height:1.7;
  color:var(--lime);
  padding:0 22px
}
.lesson-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  border-top:1px solid var(--line);
  padding-top:25px;
  margin-top:28px
}
.lesson-grid .eyebrow {
  margin-bottom:10px
}
.lesson-grid p:not(.eyebrow),.boundary p {
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
  margin:0
}
.boundary {
  padding:18px;
  background:#253026;
  border-radius:5px;
  margin:23px 0
}
.boundary b {
  font-size:12px;
  display:block;
  margin-bottom:8px
}
summary {
  font:12px var(--mono);
  cursor:pointer;
  padding:12px 0
}
pre {
  background:#0c120f;
  padding:20px;
  overflow:auto;
  font:11px/1.8 var(--mono);
  border:1px solid var(--line);
  border-radius:5px
}
.export {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  border-top:1px solid var(--line);
  margin-top:20px;
  padding-top:20px
}
.export p {
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
  max-width:530px
}
.export .button {
  white-space:nowrap
}
.closing {
  display:flex;
  align-items:center;
  gap:23px;
  border-top:1px solid var(--line);
  padding:34px 0 44px
}
.closing h2 {
  font-size:20px
}
.closing p {
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  max-width:650px;
  margin-bottom:0
}
.closing .text-link {
  margin-left:auto;
  white-space:nowrap
}
footer {
  border-top:1px solid var(--line);
  padding:24px 40px;
  display:flex;
  justify-content:space-between;
  gap:15px;
  color:var(--muted);
  font:11px/1.8 var(--mono)
}
.noscript {
  padding:20px;
  color:var(--red)
}
@media(min-width:1500px) {
  main {
    max-width:1280px
  }
  .hero {
    gap:100px
  }
}
@media(max-width:850px) {
  .edition {
    display:none
  }
  .hero {
    gap:30px;
    grid-template-columns:1.1fr 1fr
  }
  h1 {
    font-size:54px
  }
  .cards {
    grid-template-columns:repeat(2,1fr)
  }
  .principles {
    flex-wrap:wrap
  }
  .bench-grid {
    grid-template-columns:1fr
  }
  .closing {
    flex-wrap:wrap
  }
  .closing .text-link {
    margin-left:55px
  }
  .export {
    flex-direction:column;
    align-items:start
  }
}
@media(max-width:580px) {
  .topbar {
    padding:20px
  }
  .brand {
    font-size:11px
  }
  .brand-symbol {
    font-size:25px
  }
  .topbar>.text-link {
    display:none
  }
  main {
    padding:0 20px
  }
  .hero {
    grid-template-columns:1fr;
    padding:40px 0;
    gap:35px
  }
  h1 {
    font-size:54px;
    letter-spacing:-3px
  }
  .hero-demo {
    transform:none;
    box-shadow:none
  }
  .lede {
    font-size:14px
  }
  .principles {
    font-size:11px;
    justify-content:start;
    gap:15px
  }
  .principles b {
    margin-right:5px
  }
  .section-heading {
    align-items:start;
    flex-direction:column
  }
  h2 {
    font-size:26px
  }
  .progress-area {
    flex-direction:row;
    align-items:center
  }
  .cards {
    grid-template-columns:1fr
  }
  .workbench {
    padding:20px 15px
  }
  .bench-heading h2 {
    font-size:27px
  }
  .bench-heading {
    flex-wrap:wrap
  }
  .lesson-grid {
    grid-template-columns:1fr;
    gap:20px
  }
  .metrics strong {
    font-size:23px
  }
  blockquote {
    font-size:16px
  }
  .closing>.brand-symbol {
    display:none
  }
  .closing .text-link {
    margin-left:0
  }
  footer {
    flex-direction:column;
    padding:24px 20px
  }
  .trace {
    font-size:11px
  }
  .button {
    gap:14px
  }
  .export .button {
    white-space:normal
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}