:root{
  color-scheme:dark;
  --bg:#0a0a0a;
  --text:#f2efe8;
  --dim:#8a857d;
  --muted:#b8b2a8;
  --pill-bg:#11110f;
  --pill-border:#2b2925;
  --line:#262421;
  --accent:#3547f5;
  --accent-soft:#8b96ff;
  --green:#56d364;
  --green-soft:#8fd6a9;
  --sans:'Inter', sans-serif;
  --display:'Space Grotesk', 'Inter', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(53,71,245,.45);color:#fff;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.page{max-width:760px;margin:0 auto;padding:52px 24px 64px;}
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  margin-bottom:58px;
}
.back,.site-mark{
  color:var(--dim);font-family:var(--mono);font-size:9px;line-height:1.4;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  transition:color .15s ease;
}
.back{display:inline-flex;align-items:center;gap:8px;}
.site-mark{color:var(--accent-soft);}
.back:hover,.site-mark:hover{color:var(--text);}

.case-header{padding-bottom:36px;border-bottom:1px solid var(--line);}
.eyebrow{
  color:var(--accent-soft);font-family:var(--mono);font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;
}
h1{
  font-family:var(--display);
  font-size:clamp(42px,9vw,64px);line-height:.98;
  letter-spacing:-.055em;font-weight:600;text-transform:uppercase;
}
.summary{
  max-width:620px;margin-top:20px;
  color:var(--muted);font-size:16px;line-height:1.75;
}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px;}
.tag{
  padding:4px 7px;border:1px solid var(--pill-border);border-radius:3px;
  background:var(--pill-bg);color:var(--dim);font-family:var(--mono);
  font-size:9px;line-height:1.3;letter-spacing:.03em;text-transform:uppercase;
}
.tag-status{
  color:var(--green-soft);border-color:rgba(86,211,100,.28);
  background:rgba(86,211,100,.06);
}
.links{display:flex;flex-wrap:wrap;gap:16px;margin-top:24px;}
.links a{
  color:var(--accent-soft);font-family:var(--mono);font-size:9px;
  letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .15s ease;
}
.links a:hover{border-bottom-color:var(--accent-soft);}

.case-section{padding:34px 0;border-bottom:1px solid var(--line);}
.case-section:last-of-type{border-bottom:0;padding-bottom:12px;}
h2{
  color:var(--dim);font-family:var(--mono);font-size:9px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;
}
h3{
  font-family:var(--display);font-size:16px;font-weight:500;
  line-height:1.4;margin-bottom:6px;
}
p{color:var(--muted);font-size:14px;line-height:1.8;}
p + p{margin-top:12px;}
ul{list-style:none;margin-top:4px;}
li{
  position:relative;padding-left:16px;margin-top:9px;
  color:var(--muted);font-size:14px;line-height:1.75;
}
li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:4px;height:4px;border-radius:50%;background:var(--accent-soft);
}
code{
  padding:1px 4px;border:1px solid var(--line);border-radius:3px;
  background:#141412;color:#d7d0c4;font-family:var(--mono);
  font-size:.88em;
}
.diagram{
  overflow:auto;margin-top:18px;padding:18px;
  border:1px solid var(--line);border-radius:4px;background:#10100e;
  color:#c9c2b8;font-family:var(--mono);
  font-size:12px;line-height:1.7;white-space:pre;
}
.decision{padding:17px 0;border-bottom:1px solid var(--line);}
.decision:first-of-type{padding-top:0;}
.decision:last-child{border-bottom:0;padding-bottom:0;}
.metrics{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
  margin-top:20px;
}
.metric{
  padding:14px 12px;border:1px solid var(--line);border-radius:4px;
  background:#11110f;
}
.metric strong{
  display:block;color:var(--text);font-family:var(--display);
  font-size:22px;font-weight:500;line-height:1.1;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.metric span{
  display:block;margin-top:5px;color:var(--dim);
  font-family:var(--mono);font-size:8px;line-height:1.45;
  letter-spacing:.03em;text-transform:uppercase;
}
.callout{
  margin-top:18px;padding-left:14px;border-left:2px solid var(--accent);
  color:var(--text);font-size:14px;line-height:1.75;
}

.roadmap-row{
  display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.roadmap-row:first-child{padding-top:0;}
.roadmap-row:last-child{border-bottom:0;padding-bottom:0;}
.roadmap-milestone{
  padding-top:3px;color:var(--dim);font-family:var(--mono);
  font-size:10px;letter-spacing:.05em;
}
.roadmap-copy h3{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:4px;}
.roadmap-copy p{font-size:13px;line-height:1.7;}
.roadmap-status{
  padding:3px 7px;border:1px solid var(--pill-border);border-radius:3px;
  color:var(--dim);font-family:var(--mono);font-size:8px;font-weight:500;
  letter-spacing:.06em;line-height:1.2;text-transform:uppercase;
}
.roadmap-row.done .roadmap-status{
  color:var(--green-soft);border-color:rgba(86,211,100,.3);
  background:rgba(86,211,100,.06);
}
.roadmap-row.next .roadmap-status{
  color:var(--accent-soft);border-color:rgba(139,150,255,.3);
  background:rgba(139,150,255,.06);
}

.case-footer{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  margin-top:26px;padding-top:24px;border-top:1px solid var(--line);
}
.case-footer a{
  color:var(--dim);font-family:var(--mono);font-size:9px;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  transition:color .15s ease;
}
.case-footer a:hover{color:var(--text);}
.case-footer .next{text-align:right;}

@media(max-width:600px){
  .page{padding:40px 20px 52px;}
  .topbar{margin-bottom:44px;}
  .case-header{padding-bottom:28px;}
  h1{font-size:clamp(38px,12vw,52px);}
  .summary{font-size:15px;}
  .case-section{padding:28px 0;}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr));}
  .case-footer{flex-direction:column;align-items:flex-start;gap:12px;}
  .case-footer .next{text-align:left;}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none !important;}
}