/* Shared chrome for the text pages. design.md palette and system mono; the
   landing page stays self-contained because it carries the 3D engine. */
:root{
  --bg:#f2f2f0; --fg:#101010; --edge:#d6d6d2; --mid:#6e6e69; --hint:#8b8b86;
  --red:#e5261f; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--mono);
  -webkit-font-smoothing:antialiased}
.frame{position:fixed;inset:14px;border:1px solid var(--edge);pointer-events:none;z-index:2}
.frame i{position:absolute;width:9px;height:9px;border:1px solid var(--mid);font-style:normal}
.frame i:nth-child(1){top:-1px;left:-1px;border-right:0;border-bottom:0}
.frame i:nth-child(2){top:-1px;right:-1px;border-left:0;border-bottom:0}
.frame i:nth-child(3){bottom:-1px;left:-1px;border-right:0;border-top:0}
.frame i:nth-child(4){bottom:-1px;right:-1px;border-left:0;border-top:0}

.wrap{max-width:760px;margin:0 auto;padding:96px 40px 120px}
.back{display:inline-block;font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--fg);opacity:.62;text-decoration:none;margin-bottom:52px}
.back:hover{opacity:1}
h1{font-size:22px;letter-spacing:.05em;font-weight:500;margin:0}
.meta{margin-top:12px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--mid)}
h2{font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;
  margin:52px 0 0;padding-top:22px;border-top:1px solid var(--edge)}
p,li{font-size:12.5px;line-height:1.95;letter-spacing:.015em;color:var(--fg);opacity:.85}
p{margin:16px 0 0}
ul{margin:14px 0 0;padding-left:20px}
li{margin-top:8px}
b,strong{opacity:1;font-weight:600}
a{color:var(--fg)}
.kv{margin-top:20px;border-top:1px solid var(--edge)}
.kv div{display:grid;grid-template-columns:190px 1fr;gap:18px;padding:12px 2px;
  border-bottom:1px solid var(--edge);font-size:11.5px}
.kv b{font-weight:500}
.kv span{opacity:.8}
.note{margin-top:22px;border:1px solid var(--edge);background:#fff;padding:18px 20px}
.note p{margin:0;font-size:11.5px}
footer{max-width:760px;margin:0 auto;padding:0 40px 70px;display:flex;gap:26px;flex-wrap:wrap;
  font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mid)}
footer a{color:var(--mid);text-decoration:none}
footer a:hover{color:var(--fg)}
@media (max-width:640px){
  .wrap{padding:64px 22px 80px} footer{padding:0 22px 50px}
  .kv div{grid-template-columns:1fr;gap:4px}
}