/* agenticsubstrate.org — palette from the Omarchy "Manga" theme (colour values only) */
:root{
  --bg:#020202; --fg:#d1cfcf; --border:#3C3C3C;
  --g1:#9a8e8e; --g2:#a19797; --g3:#a89e9e; --g4:#afa6a6; --g5:#9f9595; --g6:#aea5a5; --g7:#C3C3C3;
  --b1:#aca7a7; --b2:#c6bebe; --b5:#dbd6d6;
  --panel:rgba(2,2,2,.80);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:400 16px/1.68 var(--mono); letter-spacing:.005em;
  background-image:url(/_art/haikei.svg);
  background-size:cover; background-position:58% 38%;
  background-attachment:fixed; background-repeat:no-repeat;
}
@media (max-width:820px){ body{background-attachment:scroll} }

/* hero */
.hero{position:relative;border-bottom:1px solid var(--border);overflow:hidden;background:#000}
.hero img{
  display:block;width:100%;height:clamp(190px,34vw,420px);object-fit:cover;object-position:50% 42%;
  filter:grayscale(1) contrast(1.24) brightness(.82);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,2,2,.30) 0%,rgba(2,2,2,.10) 42%,rgba(2,2,2,.96) 100%);
}
.hero .cap{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:0 clamp(18px,5vw,56px) clamp(14px,2.4vw,26px);
}
.hero h1{
  margin:0;font-size:clamp(28px,5.2vw,58px);line-height:1.05;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
}
.hero .sub{margin:.5em 0 0;font-size:clamp(12px,1.5vw,15px);color:var(--b1);letter-spacing:.06em}

/* layout */
main{max-width:900px;margin:0 auto;padding:clamp(26px,5vw,60px) clamp(18px,5vw,32px) 90px}
.panel{
  background:var(--panel);border:1px solid var(--border);
  padding:clamp(20px,4vw,40px);margin:0 0 26px;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
}
h2{
  margin:0 0 .7em;font-size:15px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--g7);border-bottom:1px solid var(--border);padding-bottom:.6em;
}
h2:not(:first-child),.panel h2{margin-top:0}
p{margin:0 0 1.05em;color:var(--b1)}
p:last-child{margin-bottom:0}
strong{color:var(--fg);font-weight:600}
a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--g1)}
a:hover{color:#fff;border-bottom-color:var(--fg)}
pre{
  margin:1.1em 0;padding:14px 16px;overflow-x:auto;
  background:#000;border:1px solid var(--border);color:var(--b5);font-size:14px;
}
ul{margin:1em 0;padding:0;list-style:none}
li{padding:9px 0 9px 20px;position:relative;border-bottom:1px solid rgba(60,60,60,.42);color:var(--b1)}
li:last-child{border-bottom:0}
li::before{content:"\2500";position:absolute;left:0;color:var(--g1)}
nav ul{columns:2;column-gap:26px}
@media (max-width:640px){nav ul{columns:1}}
nav li{break-inside:avoid}
.note{font-size:14px;color:var(--g1)}
.phase{
  display:inline-block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--border);padding:5px 10px;color:var(--g7);margin:0 0 14px;
}
footer{
  max-width:900px;margin:0 auto;padding:0 clamp(18px,5vw,32px) 60px;
  font-size:13px;color:var(--g1);
}
footer .rule{height:1px;background:var(--border);margin-bottom:18px}

/* language switch */
.langs{display:flex;gap:16px;font-size:13px;letter-spacing:.08em;margin:0 0 20px}
.langs a{border-bottom:1px solid transparent;color:var(--g1)}
.langs a[aria-current]{color:var(--fg);border-bottom-color:var(--fg)}
.langs a:hover{color:var(--fg)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}