/* ------------------------------------------------ self hosted fonts */
/* Served from this site, so these pages make no third party requests. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:600 800;font-stretch:100% 125%;font-display:swap;src:url(fonts/Archivo-600_800-100_125.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/JetBrainsMono-400.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/JetBrainsMono-500.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/JetBrainsMono-700.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Manrope-400.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/Manrope-500.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/Manrope-700.woff2) format('woff2')}

:root{
  --canvas:#080F17;--canvas-2:#0B1420;--panel:#101D2B;--panel-2:#16283A;
  --line:#1E3448;--line-strong:#5B7E9C;
  --accent:#19BCFF;--accent-hover:#5BD0FF;--accent-muted:rgba(25,188,255,.16);
  --signal:#E07C1F;--text-primary:#E8F0F7;--text-secondary:#8FA6BA;--ink:#04202E;
  --display:'Archivo',system-ui,sans-serif;
  --body:'Manrope',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --pad:clamp(20px,5vw,72px);--maxw:1320px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-size:clamp(15px,1.05vw,16.5px);line-height:1.7;
  -webkit-font-smoothing:antialiased;
  opacity:0;animation:pagein .8s var(--ease) .05s forwards;
}
@keyframes pagein{to{opacity:1}}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover);text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--accent);color:var(--ink)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--ink);padding:12px 18px;font-family:var(--mono);font-size:13px;border-radius:0 0 6px 0}
.skip:focus{left:0}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

/* one quiet environment layer, the same world as the home page */
.env{position:fixed;inset:0;z-index:0;pointer-events:none}
.env::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(58% 44% at 20% 12%,rgba(25,188,255,.07),transparent 62%),
    radial-gradient(50% 40% at 84% 78%,rgba(0,134,190,.055),transparent 64%);
  animation:envdrift 96s cubic-bezier(.4,0,.2,1) -22s infinite alternate;
}
.env::after{
  content:"";position:absolute;inset:0;opacity:.045;
  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");
}
@keyframes envdrift{0%{transform:translate3d(-1.4%,-1%,0) scale(1.02)}100%{transform:translate3d(1.6%,1.6%,0) scale(1.07)}}

.nav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px var(--pad);
  background:rgba(8,15,23,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:inline-flex;align-items:center}
.brand img{height:38px;width:auto;display:block;transition:opacity .3s var(--ease)}
.brand:hover img{opacity:.82}
.back{color:var(--text-secondary);font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;transition:color .3s var(--ease)}
.back:hover{color:var(--text-primary);text-decoration:none}

main{position:relative;z-index:1;padding:clamp(52px,9vh,110px) 0 clamp(70px,10vh,130px)}
.head{max-width:70ch}
.kicker{display:inline-flex;align-items:baseline;gap:10px;font-family:var(--mono);font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:11.5px;color:var(--text-secondary)}
.kicker .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none;transform:translateY(-2px)}
h1{
  font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 108;
  font-size:clamp(32px,4.4vw,60px);line-height:1.03;letter-spacing:-.022em;margin:16px 0 0;
}
.head .lede{margin-top:20px;color:var(--text-secondary);max-width:64ch}

.doc{margin-top:clamp(44px,6vh,76px);display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.toc{position:sticky;top:96px}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.toc a{color:var(--text-secondary);font-family:var(--mono);font-size:11px;letter-spacing:.07em;line-height:1.5;display:block}
.toc a:hover{color:var(--accent);text-decoration:none}
.body{max-width:74ch}
section.blk{padding-top:clamp(28px,3.4vh,44px);scroll-margin-top:100px}
section.blk:first-child{padding-top:0}
h2{
  font-family:var(--display);font-weight:700;font-variation-settings:'wdth' 105;
  font-size:clamp(19px,1.9vw,26px);line-height:1.2;letter-spacing:-.015em;margin:0 0 12px;
}
h3{font-family:var(--display);font-weight:700;font-variation-settings:'wdth' 103;font-size:clamp(16px,1.35vw,18.5px);letter-spacing:-.01em;margin:22px 0 8px}
p{margin:0 0 14px}
p:last-child{margin-bottom:0}
ul{margin:0 0 14px;padding-left:20px}
li{margin-bottom:7px}
li::marker{color:var(--accent)}
.muted{color:var(--text-secondary)}
.rule{display:block;height:1px;background:var(--line);margin:clamp(30px,4vh,52px) 0 0}

.facts{margin:0;display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr);gap:10px 24px;background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:clamp(20px,2.4vw,30px)}
.facts dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);padding-top:3px}
.facts dd{margin:0}
@media (max-width:600px){.facts{grid-template-columns:1fr;gap:2px 0}.facts dd{margin-bottom:12px}}

.note{background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:0 5px 5px 0;padding:18px 22px;margin:20px 0}
.note p{font-size:15px}
.note b{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:7px;font-weight:700}

footer{position:relative;z-index:1;background:var(--canvas-2);border-top:1px solid var(--line);padding:clamp(40px,6vh,64px) 0 36px}
.frow{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:center}
.fnav{display:flex;gap:24px;flex-wrap:wrap}
.fnav a{color:var(--text-secondary);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.fnav a:hover{color:var(--text-primary);text-decoration:none}
.fbot{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
.fbot p{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--text-secondary);margin:0}

@media (max-width:900px){
  .doc{grid-template-columns:1fr;gap:34px}
  .toc{position:static;border-bottom:1px solid var(--line);padding-bottom:26px}
  .toc ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px 20px}
}
@media (max-width:760px){.brand img{height:30px}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  body{opacity:1}
}