/* STRATA — stylesheet
   dark, editorial-terminal. no cards, no rounded boxes. hairlines + type. */

@property --acc { syntax: '<color>'; inherits: true; initial-value: #d9b36a; }

:root{
  --bg:#07080a;
  --bg2:#0b0d10;
  --fg:#e9e6df;
  --fg2:#b8b4aa;
  --mute:#6b6e75;
  --line:rgba(233,230,223,.13);
  --line2:rgba(233,230,223,.28);
  --acc:#d9b36a;
  --ok:#9be36a;
  --bad:#ff6b5c;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  transition: --acc .9s ease;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
[id]{scroll-margin-top:96px}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--mono);
  font-size:13px;
  line-height:1.65;
  overflow-x:hidden;
  font-feature-settings:"tnum" 1,"zero" 1;
}
::selection{background:var(--acc);color:var(--bg)}
a{color:inherit;text-decoration:none}
a:hover{color:var(--acc)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit;background:none;border:0;outline:0}
img{max-width:100%}

/* ---------- background ---------- */
#bg{position:fixed;inset:0;z-index:0;width:100%;height:100%;display:block}
#grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:160px 160px;mix-blend-mode:screen}
#scan{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.28;
  background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(0,0,0,.18) 3px 4px)}
#scrim{position:fixed;left:0;right:0;bottom:0;height:96px;z-index:19;pointer-events:none;
  background:linear-gradient(to top,var(--bg) 0%,rgba(7,8,10,.97) 42px,rgba(7,8,10,.55) 62px,transparent 100%);
  opacity:0;transition:opacity .5s}
#scrim.show{opacity:1}
#scrim::after{content:"";position:absolute;left:0;right:0;bottom:42px;height:1px;background:var(--line)}
#vig{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,transparent 58%,rgba(7,8,10,.72) 100%)}

/* ---------- chrome ---------- */
.top{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:22px 28px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;pointer-events:none}
.top>*{pointer-events:auto}
.top .brand{display:flex;gap:14px;align-items:center}
.top .brand b{font-weight:500}
.top .brand .dot{width:6px;height:6px;background:var(--acc);display:inline-block;animation:blink 2.4s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.top nav{display:flex;gap:26px;color:var(--fg2)}
.top nav a.on{color:var(--fg)}
.top .motto{color:var(--mute)}
.top .motto span{color:var(--acc)}

.rail{position:fixed;z-index:20;right:28px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:9px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;text-align:right;color:var(--mute)}
.rail a{position:relative;padding-right:18px;transition:color .3s}
.rail a::after{content:"";position:absolute;right:0;top:50%;width:6px;height:1px;background:var(--mute);transition:width .3s,background .3s}
.rail a.on{color:var(--fg)}
.rail a.on::after{width:12px;background:var(--acc)}

.hud{position:fixed;z-index:20;left:28px;bottom:14px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  display:flex;gap:0 8px;align-items:center;opacity:0;transition:opacity .5s;pointer-events:none;white-space:nowrap}
.hud.show{opacity:1}
.hud b{font-weight:500;color:var(--fg)}
.hud i.sep{font-style:normal;color:var(--line2);margin:0 4px}
.hud .bar{width:44px;height:1px;background:var(--line2);position:relative;overflow:hidden;margin-left:6px}
.hud .bar i{position:absolute;left:0;top:0;bottom:0;width:30%;background:var(--acc);animation:sweep 1.6s linear infinite}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(340%)}}

.hud-r{position:fixed;z-index:20;right:28px;bottom:14px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);text-align:right}
.hud-r a{border-bottom:1px solid var(--line2)}

/* ---------- layout ---------- */
main{position:relative;z-index:2}
.layer{position:relative;min-height:100vh;padding:20vh 8vw 14vh 8vw;max-width:1180px;overflow-wrap:anywhere}
.layer.short{min-height:60vh}
.head{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;align-items:end;margin-bottom:34px}
.mark{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);line-height:1.9}
.mark b{color:var(--acc);font-weight:500}
.mark .idx{font-size:36px;font-family:var(--serif);font-style:italic;color:var(--fg);letter-spacing:0;text-transform:none;line-height:1;display:block;margin-bottom:6px}
.hl{font-family:var(--serif);font-weight:400;font-size:clamp(38px,5.4vw,66px);line-height:.98;letter-spacing:-.01em;color:var(--fg)}
.hl em{font-style:italic;color:var(--acc)}
.lede{font-family:var(--serif);font-size:clamp(18px,1.6vw,22px);line-height:1.4;color:var(--fg2);max-width:min(62ch,100%);margin-bottom:26px}
.lede b{color:var(--fg);font-weight:400}
.body{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px}
.body>.aside{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);line-height:2}
.body>.aside b{display:block;color:var(--fg2);font-weight:500}
.body>.aside .n{font-size:22px;color:var(--fg);letter-spacing:0;line-height:1.2}
.col{max-width:min(72ch,100%);min-width:0}
.col p{color:var(--fg2);margin-bottom:14px}
.col p.small{font-size:11px;color:var(--mute)}
.rule{height:1px;background:var(--line);margin:22px 0}
.rule.strong{background:var(--line2)}
.lb{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin:18px 0 8px}
.lb b{color:var(--acc);font-weight:500}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:14vh 8vw 10vh}
.hero .num{font-family:var(--mono);font-weight:300;font-size:clamp(40px,11.6vw,190px);max-width:100%;line-height:.9;letter-spacing:-.04em;color:var(--fg);display:flex;align-items:baseline;gap:.15em}
.hero .num small{font-size:clamp(11px,1.2vw,16px);letter-spacing:.24em;color:var(--acc);font-weight:500}
.hero .sub{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 30px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.hero .sub b{color:var(--fg);font-weight:500}
.hero .claim{margin-top:9vh;font-family:var(--serif);font-size:clamp(36px,7vw,104px);line-height:.92;letter-spacing:-.015em;max-width:11ch}
.hero .claim em{font-style:italic;color:var(--acc)}
.hero .tag{margin-top:26px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.hero .tag span{color:var(--fg)}
.hero .down{position:absolute;left:8vw;bottom:9vh;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.hero .down i{display:block;width:1px;height:46px;background:var(--line2);margin-top:10px;position:relative;overflow:hidden}
.hero .down i::after{content:"";position:absolute;left:0;top:-100%;width:1px;height:100%;background:var(--acc);animation:drop 1.8s ease-in-out infinite}
@keyframes drop{to{top:100%}}

/* ---------- controls ---------- */
.field{margin:14px 0 18px}
.field label{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.in{display:block;width:100%;padding:10px 0;border-bottom:1px solid var(--line2);font-size:13px;color:var(--fg);transition:border-color .3s;letter-spacing:.02em}
.in:focus{border-color:var(--acc)}
.in::placeholder{color:var(--mute)}
textarea.in{resize:vertical;min-height:88px;line-height:1.6}
.row{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin:16px 0}
.bt{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg);padding:10px 0;position:relative;transition:color .25s;white-space:nowrap}
.bt::before{content:"[ ";color:var(--mute)}
.bt::after{content:" ]";color:var(--mute)}
.bt:hover{color:var(--acc)}
.bt:disabled{color:var(--mute);cursor:default}
.bt.pri{background:var(--fg);color:var(--bg);padding:10px 16px}
.bt.pri::before,.bt.pri::after{color:var(--bg);opacity:.5}
.bt.pri:hover{background:var(--acc);color:var(--bg)}
.bt.pri:disabled{background:var(--line2);color:var(--bg)}
.drop{border:1px dashed var(--line2);padding:26px 22px;text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);cursor:pointer;transition:border-color .3s,color .3s}
.drop:hover,.drop.over{border-color:var(--acc);color:var(--fg)}
.drop input{display:none}
.toggle{display:flex;gap:0;font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.toggle button{padding:8px 14px;color:var(--mute);border-bottom:1px solid var(--line)}
.toggle button.on{color:var(--fg);border-color:var(--acc)}

/* ---------- output ---------- */
.out{margin-top:16px}
.kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 18px;font-size:12px;padding:12px 0;border-top:1px solid var(--line)}
.kv .k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);padding-top:2px}
.kv .v{word-break:break-all;color:var(--fg)}
.kv .v.big{font-size:20px;font-weight:300;letter-spacing:-.01em;line-height:1.2}
.kv .v.acc{color:var(--acc)}
.kv .v a{border-bottom:1px solid var(--line2)}
.hex{font-family:var(--mono);word-break:break-all;color:var(--fg)}
.hex i{font-style:normal;color:var(--acc)}
.hex u{text-decoration:none;color:var(--mute)}
.status{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding:10px 0;border-top:1px solid var(--line)}
.status.ok{color:var(--ok)}
.status.bad{color:var(--bad)}
.status.wait::after{content:"…";animation:blink 1s infinite}
.verdict{font-family:var(--serif);font-size:clamp(34px,4.5vw,56px);line-height:1;margin:14px 0 8px;letter-spacing:-.01em}
.verdict.ok{color:var(--ok)}
.verdict.bad{color:var(--bad)}
.verdict.mid{color:var(--acc)}
pre{font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--fg2);white-space:pre;overflow-x:auto;max-width:100%;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
pre>*{max-width:none}
pre b{color:var(--fg);font-weight:500}
pre i{font-style:normal;color:var(--acc)}
pre u{text-decoration:none;color:var(--mute)}
.list{border-top:1px solid var(--line2);min-width:0}
.li{display:grid;grid-template-columns:44px 74px 1fr auto;gap:10px 18px;padding:12px 0;border-bottom:1px solid var(--line);font-size:11.5px;align-items:baseline}
.li .idx{color:var(--acc)}
.li .ago{color:var(--mute);letter-spacing:.06em}
.li .who{color:var(--fg2)}
.li .who b{color:var(--fg);font-weight:400}
.li .dg{grid-column:3/-1;color:var(--fg);word-break:break-all}
.li .dg u{text-decoration:none;color:var(--mute)}
.li a{border-bottom:1px solid var(--line)}
.li .tag{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line2);padding:2px 6px}
.li .tag.m{color:var(--acc);border-color:var(--acc)}
.tape{border-top:1px solid var(--line2);font-size:11.5px;overflow-x:auto}
.tape .tr{display:grid;grid-template-columns:120px 60px 100px 110px 1fr;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);align-items:baseline;animation:fadein .5s}
.tape .tr.h{color:var(--mute);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
.tape .tr .n{color:var(--fg)}
.tape .tr .m{color:var(--mute)}
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.stats{display:flex;flex-wrap:wrap;gap:22px 48px;margin:22px 0}
.stat{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.stat b{display:block;font-size:30px;font-weight:300;color:var(--fg);letter-spacing:-.02em;line-height:1.1;margin-top:4px}
.stat b small{font-size:11px;letter-spacing:.14em;color:var(--acc);margin-left:6px}
.tabs{display:flex;gap:22px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin:18px 0 0}
.tabs button{padding:6px 0;border-bottom:1px solid transparent}
.tabs button.on{color:var(--fg);border-color:var(--acc)}
.pane{display:none}.pane.on{display:block}

/* ---------- footer ---------- */
footer{position:relative;z-index:2;padding:16vh 8vw 60px;border-top:1px solid var(--line)}
footer .big{font-family:var(--serif);font-size:clamp(46px,9vw,140px);line-height:.9;letter-spacing:-.02em;margin-bottom:40px}
footer .big em{font-style:italic;color:var(--acc)}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;min-width:0;gap:30px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
footer .cols h5{font-size:10px;color:var(--mute);font-weight:500;letter-spacing:.18em;margin-bottom:10px}
footer .cols a{display:block;color:var(--fg2);line-height:2.1}
footer .cols p{color:var(--mute);text-transform:none;letter-spacing:0;font-family:var(--serif);font-size:17px;line-height:1.4;max-width:34ch}
footer .end{margin-top:60px;padding-bottom:34px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}

/* ---------- docs ---------- */
.docs{position:relative;z-index:2;display:grid;grid-template-columns:220px minmax(0,1fr);gap:60px;max-width:1180px;padding:16vh 8vw 14vh}
.toc{position:sticky;top:110px;align-self:start;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);line-height:2.3}
.toc a{display:block}
.toc a.on{color:var(--fg)}
.toc .g{margin-top:14px;color:var(--fg2);font-weight:500}
.doc h1{font-family:var(--serif);font-weight:400;font-size:clamp(46px,6vw,84px);line-height:.95;letter-spacing:-.015em;margin-bottom:28px}
.doc h1 em{font-style:italic;color:var(--acc)}
.doc h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,44px);line-height:1;margin:80px 0 18px;letter-spacing:-.01em}
.doc h2 span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);margin-bottom:12px}
.doc h3{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg);margin:34px 0 10px}
.doc{min-width:0;overflow-wrap:anywhere}
.doc p{color:var(--fg2);max-width:min(72ch,100%);margin-bottom:14px}
.doc p.lede{font-family:var(--serif);font-size:20px;line-height:1.4;color:var(--fg2)}
.doc ul,.doc ol{max-width:min(72ch,100%);margin:0 0 16px 18px;color:var(--fg2)}
.doc li{margin-bottom:6px}
.doc code{font-family:var(--mono);color:var(--fg);background:rgba(233,230,223,.06);padding:1px 5px;overflow-wrap:anywhere;word-break:break-word}
.doc pre{margin:14px 0 22px;max-width:100%}
.doc .tbl{width:100%;max-width:min(72ch,100%);border-collapse:collapse;table-layout:fixed;font-size:11.5px;margin:10px 0 20px}
.doc .tbl th{text-align:left;font-weight:500;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);padding:8px 10px 8px 0;border-bottom:1px solid var(--line2)}
.doc .tbl td{padding:8px 10px 8px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--fg2);overflow-wrap:anywhere}
.doc .tbl td:first-child{color:var(--fg)}
.doc .note{border-left:1px solid var(--acc);padding:4px 0 4px 16px;margin:18px 0;color:var(--fg2);max-width:min(70ch,100%)}
.doc .note b{color:var(--acc);font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;display:block;margin-bottom:4px}
.doc dl{max-width:min(72ch,100%);margin-bottom:20px}
.doc dt{color:var(--fg);margin-top:12px}
.doc dd{color:var(--fg2);margin-left:0}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .rail{display:none}
  .head,.body{grid-template-columns:1fr;gap:12px}
  .mark .idx{display:inline;margin-right:10px}
  .layer{padding:16vh 6vw 10vh}
  .hero{padding:16vh 6vw 10vh}
  .hero .down{left:6vw}
  .top{padding:18px 16px}
  .top .motto{display:none}
  .hud{left:16px;font-size:9px;letter-spacing:.1em}
  .hud .bar{display:none}
  .hud-r{display:none}
  footer .cols{grid-template-columns:1fr 1fr}
  footer{padding:12vh 6vw 50px}
  .docs{grid-template-columns:1fr;gap:20px;padding:14vh 6vw 10vh}
  .toc{position:static;display:flex;flex-wrap:wrap;gap:4px 18px;line-height:1.8}
  .toc .g{display:none}
  .kv{grid-template-columns:1fr;gap:2px 0}
  .tape .tr{grid-template-columns:100px 50px 1fr;}
  .tape .tr>:nth-child(4),.tape .tr>:nth-child(5){display:none}
  .li{grid-template-columns:40px 60px 1fr}
  .li>.tag{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}