@font-face{
  font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/instrument-serif-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/instrument-serif-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/jetbrains-mono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/jetbrains-mono-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  color-scheme:light;

  --bg:#f6f5f2;  --bg-blur:rgba(246,245,242,.76);
  --surface:rgba(20,16,32,.028);
  --line:rgba(20,16,32,.11);
  --line-2:rgba(20,16,32,.2);
  --text:#17151f;
  --text-strong:#0c0a12;
  --muted:#5f5a6b;
  --dim:#6a6577;
  --violet:#6d28d9;
  --violet-strong:#5b21b6;
  --violet-dim:rgba(109,40,217,.28);
  --glow:rgba(109,40,217,.12);
  --glow-strong:rgba(109,40,217,.42);
  --glow-0:rgba(109,40,217,0);
  --err:#bf2742;
  --field-bg:#ffffff;  --field-line:#8a8593;
  --grain-blend:multiply;
  --grain-op:.05;

  --net-line:rgba(20,16,32,.075);
  --net-node:rgba(20,16,32,.16);
  --net-rgb:109,40,217;
  --net-alpha:.5;
  --serif:"Instrument Serif", "Iowan Old Style", Georgia, serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ease:cubic-bezier(.22,.68,.36,1);
  --fade:.42s;  --topbar:46px;
  --gut:26px;
}

:root[data-theme="dark"]{
  color-scheme:dark;

  --bg:#08080c;
  --bg-blur:rgba(8,8,12,.72);
  --surface:rgba(255,255,255,.022);
  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.16);
  --text:#e7e5ef;
  --text-strong:#ffffff;
  --muted:#8d8799;
  --dim:#7d7790;
  --violet:#a78bfa;
  --violet-strong:#8b5cf6;
  --violet-dim:rgba(167,139,250,.32);
  --glow:rgba(167,139,250,.13);
  --glow-strong:rgba(167,139,250,.5);
  --glow-0:rgba(167,139,250,0);
  --err:#ff7f97;
  --field-bg:#0d0c12;
  --field-line:#6f6a7e;

  --grain-blend:overlay;
  --grain-op:.035;

  --net-line:rgba(255,255,255,.045);
  --net-node:rgba(255,255,255,.10);
  --net-rgb:167,139,250;
  --net-alpha:.8;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:400 16px/1.72 var(--sans);
  font-feature-settings:"tnum" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

:root.theming,
:root.theming *,
:root.theming *::before,
:root.theming *::after{
  transition:background-color var(--fade) var(--ease),
             border-color     var(--fade) var(--ease),
             color            var(--fade) var(--ease),
             box-shadow       var(--fade) var(--ease),
             fill             var(--fade) var(--ease),
             stroke           var(--fade) var(--ease) !important;
}
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:var(--fade);
  animation-timing-function:var(--ease);
}

h1,h2,h3{ margin:0; line-height:1.1; font-weight:400; }
p,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
img,video{ max-width:100%; height:auto; }
b{ font-weight:500; }

.mono{ font-family:var(--mono); }
.dim{ color:var(--dim); }

:focus-visible{ outline:1.5px solid var(--violet); outline-offset:3px; border-radius:2px; }

.skip{
  position:absolute; left:-9999px; z-index:99;
  background:var(--violet); color:var(--bg);
  padding:10px 16px; font:500 13px var(--mono);
}
.skip:focus{ left:0; top:0; }

#net{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }

.grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none;
  opacity:var(--grain-op); mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.topbar{
  position:fixed; top:0; left:0; right:0; z-index:40;
  height:var(--topbar);
  display:flex; align-items:center; gap:14px;
  padding:0 var(--gut);
  font:400 11.5px/1 var(--mono);
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  background:var(--bg-blur);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.tb-name{ color:var(--text); }
.tb-mid{ display:none; }
@media (min-width:860px){ .tb-mid{ display:block; } }
.tb-cta{
  flex:none; margin-left:auto; display:inline-flex; align-items:center; gap:8px;
  padding:7px 13px; border-radius:2px;
  border:1px solid var(--line-2); color:var(--text); text-decoration:none;
  font:500 11px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase;
  white-space:nowrap;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.tb-cta:hover{ border-color:var(--violet); color:var(--violet); background:var(--glow); }
.tb-cta .arr{ transition:transform .3s var(--ease); }
.tb-cta:hover .arr{ transform:translateX(3px); }
@media (max-width:559px){ .tb-name{ display:none; } }

@keyframes pulse{
  0%  { box-shadow:0 0 0 0 var(--glow-strong); }
  70% { box-shadow:0 0 0 9px var(--glow-0); }
  100%{ box-shadow:0 0 0 0 var(--glow-0); }
}

.theme-btn{
  flex:none; width:30px; height:30px; padding:0;
  display:grid; place-items:center;
  background:transparent; color:var(--muted);
  border:1px solid var(--line); border-radius:2px; cursor:pointer;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.theme-btn{ position:relative; }
.theme-btn::after{
  content:""; position:absolute; top:50%; left:50%;
  width:44px; height:44px; transform:translate(-50%,-50%);
}
.theme-btn:hover{ border-color:var(--violet); color:var(--violet); }
.theme-btn svg{ width:14px; height:14px; display:block; }
.theme-btn .ico-sun{ display:none; }
:root[data-theme="dark"] .theme-btn .ico-sun{ display:block; }
:root[data-theme="dark"] .theme-btn .ico-moon{ display:none; }

.progress{
  position:fixed; top:var(--topbar); left:0; right:0; height:2px;
  z-index:39; background:transparent;
}
.progress i{
  display:block; height:100%; width:100%; background:var(--violet);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .1s linear;
}

.layout{
  position:relative; z-index:2;
  max-width:1240px; margin:0 auto; padding:var(--topbar) var(--gut) 0;
}
main{ min-width:0; }

.console{ display:none; }

@media (min-width:1020px){
  .progress{ display:none; }
  .layout{ display:grid; grid-template-columns:212px 1fr; gap:80px; align-items:start; }
  .layout-doc{ display:block; padding-left:calc(212px + 80px + var(--gut)); }
  .console{
    display:flex; flex-direction:column; gap:30px;
    position:sticky; top:var(--topbar);
    height:calc(100vh - var(--topbar));
    justify-content:center;
    font:400 11.5px/1.5 var(--mono);
  }
}

.prompt{ color:var(--dim); }
.caret{ color:var(--violet); }

.steps{ display:flex; flex-direction:column; }
.step{
  position:relative; display:flex; align-items:center; gap:10px;
  padding:9px 0; color:var(--dim); text-decoration:none;
  transition:color .4s var(--ease);
}
.step:hover{ color:var(--violet); }
.step:hover .mark{ border-color:var(--violet); }
.steps li:not(:last-child) .step::after{
  content:""; position:absolute; left:5px; top:26px; bottom:0;
  width:1px; background:var(--line); transition:background .5s var(--ease);
}
.step .mark{
  flex:none; width:11px; height:11px; border-radius:50%;
  border:1px solid var(--line-2); background:var(--bg);
  transition:border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.s-num{ color:var(--line-2); transition:color .4s var(--ease); }
.step.active{ color:var(--text); }
.step.active .mark{ border-color:var(--violet); box-shadow:0 0 0 3px var(--glow); }
.step.active .s-num{ color:var(--violet); }
.step.done{ color:var(--muted); }
.step.done .mark{ border-color:var(--violet-dim); background:var(--violet-dim); }
.step.done::after{ background:var(--violet-dim); }
.step.done .s-num{ color:var(--dim); }

.readout{ display:flex; flex-direction:column; gap:12px; }
.gauge-track{ height:1px; background:var(--line); overflow:hidden; }
.gauge-track i{
  display:block; height:100%; background:var(--violet);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .12s linear;
}

.kv{ display:grid; grid-template-columns:auto 1fr; gap:6px 18px; font:400 12.5px/1.65 var(--mono); }
.kv dt{ color:var(--dim); }
.kv dd{ color:var(--muted); overflow-wrap:anywhere; }

[data-reveal]{
  opacity:0; transform:translateY(10px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].in{ opacity:1; transform:none; }

.hero{ padding:clamp(80px,14vh,150px) 0 clamp(90px,13vh,140px); }
.hero-main{ display:flex; flex-direction:column; gap:32px; }

.eyebrow{
  font:400 11.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--violet);
}
h1{
  font-family:var(--serif);
  font-size:clamp(2.8rem,13vw,7rem);
  line-height:.94; letter-spacing:-.015em;
  color:var(--text-strong);
}
.lede{ color:var(--text); font-size:1.12rem; }

.cta{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 22px; border-radius:2px;
  border:1px solid var(--line-2); background:transparent;
  color:var(--text); text-decoration:none; cursor:pointer;
  font:500 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.cta .arr{ transition:transform .3s var(--ease); }
.cta:hover{ border-color:var(--violet); color:var(--violet); background:var(--glow); }
.cta:hover .arr{ transform:translateX(4px); }

section{
  padding:clamp(70px,11vh,110px) 0;
  border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--topbar) + 20px);
}
.s-head{ margin-bottom:46px; }
.tag{
  display:flex; align-items:baseline; gap:14px;
  font:400 11.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--violet); margin-bottom:22px;
}
.num{ color:var(--dim); }
h2{ font-family:var(--serif); font-size:clamp(2rem,5vw,3.1rem); letter-spacing:-.01em; }
.section-lede{ color:var(--text); margin-top:18px; }

.layers li{
  display:grid; grid-template-columns:58px 1fr; gap:6px 24px;
  padding:26px 0; border-top:1px solid var(--line);
  transition:background .35s var(--ease);
}
.layers li:first-child{ border-top:0; }
.layers li:hover{ background:var(--surface); }
@media (min-width:760px){ .layers li{ grid-template-columns:78px 1fr auto; padding:28px 4px; } }
.year{ font:400 12px/1.9 var(--mono); color:var(--violet); }
.layers h3{ font-size:1.12rem; font-weight:500; line-height:1.35; }
.where{ color:var(--muted); font:400 12.5px/1.7 var(--mono); margin-top:5px; }
.detail{ color:var(--text); margin-top:11px; }
.layer-tag{
  grid-column:2; justify-self:start; margin-top:12px;
  font:400 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); border:1px solid var(--line); border-radius:2px; padding:5px 9px;
}
@media (min-width:760px){ .layer-tag{ grid-column:3; grid-row:1; justify-self:end; align-self:start; margin-top:3px; } }

.deps{ display:grid; gap:44px; }
@media (min-width:760px){ .deps{ grid-template-columns:repeat(2,1fr); gap:48px 56px; } }
.dep-group h3{
  display:flex; gap:12px;
  font:400 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding-bottom:14px; margin-bottom:18px;
  border-bottom:1px solid var(--line);
}
.dep-note{ color:var(--text); font-size:.97rem; margin-bottom:20px; }
.chips{ display:flex; flex-wrap:wrap; gap:7px; }
.chips li{
  padding:6px 11px; border-radius:2px;
  border:1px solid var(--line); background:var(--surface);
  font:400 12.5px/1 var(--mono); color:var(--text);
  opacity:0; transform:translateY(6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), border-color .25s, color .25s;
  transition-delay:calc(var(--i,0) * 40ms);
}
.deps.in .chips li{ opacity:1; transform:none; }
.chips li:hover{ border-color:var(--violet-dim); color:var(--violet); }

.service{ padding:34px 0; border-top:1px solid var(--line); transition:background .35s var(--ease); }
.service:first-child{ border-top:0; }
.service:hover{ background:var(--surface); }
@media (min-width:760px){ .service{ padding:38px 4px; } }

.service-head{ display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; }
.dot{
  flex:none; width:7px; height:7px; border-radius:50%; background:var(--line-2);
  transition:background .6s var(--ease) .3s, box-shadow .6s var(--ease) .3s;
}
.service.in .dot{ background:var(--violet); box-shadow:0 0 0 3px var(--glow); }
.service.running.in .dot{ animation:pulse 2.6s ease-out infinite; }

.service h3{ font:500 13px/1 var(--mono); letter-spacing:.02em; }
.uptime{ margin-left:auto; font:400 12.5px/1 var(--mono); color:var(--muted); white-space:nowrap; }
.uptime b{ color:var(--muted); }
.service.in .uptime::before{ content:"✓ "; color:var(--violet); }
.service.running.in .uptime::before{ content:"▸ "; }

.role{ margin-top:18px; font-size:1.05rem; }
.service .detail{ margin-top:9px; }
.meta{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
@media (min-width:760px){ .meta{ grid-template-columns:88px 1fr; } }

.healthcheck{ padding:clamp(50px,8vh,80px) 0; }
.healthcheck .s-head{ margin-bottom:20px; }
.hc-line{
  display:flex; align-items:center; gap:14px;
  font:400 13.5px/1 var(--mono); color:var(--text); letter-spacing:.02em;
}
.hc-check{ color:var(--violet); font-size:1.25em; }

.contact-grid{ display:grid; gap:52px; }
@media (min-width:900px){ .contact-grid{ grid-template-columns:1fr 300px; gap:70px; } }

form{ display:flex; flex-direction:column; gap:22px; max-width:560px; }
.gotcha{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.field{ display:flex; flex-direction:column; gap:9px; }
label{ font:400 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
input,textarea{
  width:100%; padding:13px 15px;
  background:var(--field-bg); color:var(--text);
  border:1px solid var(--field-line); border-radius:3px;
  font:400 16px/1.55 var(--sans);  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
input::placeholder,textarea::placeholder{ color:var(--dim); }
input:hover,textarea:hover{ border-color:var(--violet-dim); }
input:focus,textarea:focus{
  outline:none; border-color:var(--violet); box-shadow:0 0 0 3px var(--glow);
}
input:focus-visible,textarea:focus-visible{ outline:none; }
textarea{ resize:vertical; min-height:132px; }
button[disabled]{ opacity:.45; cursor:progress; }

.form-status{ font:400 12.5px/1.6 var(--mono); min-height:1.6em; color:var(--muted); }
.form-status.ok{ color:var(--violet); }
.form-status.err{ color:var(--err); }

.contact-side{ display:flex; flex-direction:column; gap:22px; }
.contact-side .kv{ gap:10px 20px; }
.contact-side a{ color:var(--violet); text-decoration:none; }
.contact-side a:hover{ text-decoration:underline; }
.side-note{ color:var(--muted); font-size:.95rem; line-height:1.65; padding-top:20px; border-top:1px solid var(--line); }

footer{
  display:flex; flex-wrap:wrap; gap:18px 30px; align-items:center;
  padding:34px 0 44px; border-top:1px solid var(--line);
  font:400 11.5px/1 var(--mono); color:var(--dim);
}
.links{ display:flex; gap:24px; margin-left:auto; }
.links a{ color:var(--muted); text-decoration:none; transition:color .25s; }
.links a:hover{ color:var(--violet); }

.foot-legal{ display:flex; flex-wrap:wrap; gap:8px 20px; width:100%; align-items:center; }
.foot-legal a{ color:var(--muted); text-decoration:none; }
.foot-legal a:hover{ color:var(--violet); text-decoration:underline; }
.foot-legal .sep{ color:var(--line-2); }

@media (max-width:759px){
  footer{ flex-direction:column; align-items:flex-start; gap:28px; padding:30px 0 48px; }
  .links{ flex-direction:column; gap:16px; margin-left:0; }
  .foot-legal{ flex-direction:column; align-items:flex-start; gap:12px; }
  .foot-legal .sep{ display:none; }}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal],.chips li{ opacity:1 !important; transform:none !important; }
}

.doc{ padding:clamp(70px,12vh,120px) 0 90px; max-width:70ch; }
.doc-back{
  display:inline-flex; align-items:center; gap:9px;
  font:400 11.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--violet); text-decoration:none; margin-bottom:34px;
}
.doc-back:hover{ text-decoration:underline; }
.doc h1{ font-size:clamp(2.2rem,6vw,3.4rem); line-height:1.05; }
.doc-updated{ font:400 12px/1 var(--mono); color:var(--dim); margin-top:18px; }

.doc section{ border-top:1px solid var(--line); padding:38px 0 0; margin-top:38px; }
.doc h2{ font-size:clamp(1.35rem,3.5vw,1.8rem); margin-bottom:20px; }
.doc h3{
  font:400 11.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:28px 0 14px;
}
.doc p{ margin-bottom:16px; }
.doc p:last-child{ margin-bottom:0; }
.doc a{ color:var(--violet); text-decoration:underline; text-underline-offset:3px; }
.doc .kv{ gap:9px 22px; margin-bottom:18px; }
.doc ul{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.doc ul li{ padding-left:20px; position:relative; }
.doc ul li::before{
  content:"·"; position:absolute; left:0; color:var(--violet);
}

.form-legal{
  font-size:.88rem; line-height:1.6; color:var(--muted);
  padding-top:4px; max-width:52ch;
}
