/* nao_00 design system — the DEFAULT for every page we publish.
   Link it: <link rel="stylesheet" href="https://nchobah.com/theme.css">
   Rule (DESIGN.md): no page ships without this. Never basic, never unstyled. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap');

:root{
  --bg:#080a0e; --bg2:#0d1016; --panel:#12161f; --panel-2:#171c27;
  --line:#222a38; --line-2:#2c3645;
  --txt:#eef2f8; --dim:#94a1b4; --faint:#5d6878;
  --accent:#6d8bff; --accent-2:#8aa2ff; --accent-glow:rgba(109,139,255,.16);
  --ok:#3ddc84; --ok-bg:#0e2a1c; --bad:#ff6b7d; --bad-bg:#2e1218; --warn:#ffc14d; --warn-bg:#2c2410;
  --r:14px; --r-sm:10px; --r-pill:999px;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.28);
  --maxw:940px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--sans); color:var(--txt); font-size:15px; line-height:1.6;
  background:
    radial-gradient(1100px 520px at 78% -8%, var(--accent-glow), transparent 60%),
    radial-gradient(820px 420px at 0% 0%, rgba(61,220,132,.05), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--accent-2); text-decoration:none} a:hover{color:#b9c8ff}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.86em; color:var(--accent-2); background:rgba(109,139,255,.09); padding:1px 6px; border-radius:6px}

.wrap{max-width:var(--maxw); margin:0 auto; padding:46px 24px 90px}

/* headings */
h1{font-size:clamp(26px,4vw,34px); font-weight:800; letter-spacing:-.022em; margin:0 0 6px; line-height:1.08}
.sub{color:var(--dim); font-size:13.5px; margin-bottom:26px; max-width:62ch}
h2{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:var(--faint);
   margin:38px 0 16px; padding-bottom:10px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px}

/* hero / goal */
.goal{
  position:relative; background:linear-gradient(155deg,var(--panel-2),var(--panel)); border:1px solid var(--line-2);
  border-radius:18px; padding:26px 28px; font-family:var(--serif); font-size:clamp(19px,2.6vw,25px);
  font-weight:400; line-height:1.32; letter-spacing:.005em; box-shadow:var(--shadow);
}
.goal::before{content:""; position:absolute; inset:0; border-radius:18px; padding:1px;
  background:linear-gradient(155deg,rgba(109,139,255,.5),transparent 40%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none}

/* cards + grid (reusable) */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:17px 18px;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease}
.card:hover{border-color:var(--line-2); transform:translateY(-2px); box-shadow:var(--shadow)}
.card h3{margin:0 0 7px; font-size:16px; font-weight:650; letter-spacing:-.01em}
.card p{margin:0; font-size:13.5px; color:#c3cdda}

/* loop stepper */
.loop{display:flex; gap:7px; flex-wrap:wrap}
.step{flex:1; min-width:98px; text-align:center; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:12px 6px; font-size:11.5px; font-weight:700; letter-spacing:.04em; color:var(--faint)}
.step.on{background:linear-gradient(160deg,#1a2742,#141d31); border-color:var(--accent);
  color:#d3deff; box-shadow:0 0 0 1px var(--accent), 0 6px 22px var(--accent-glow)}

.focus{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:12px; padding:16px 18px; margin-top:14px}
.focus b{font-size:16px; font-weight:650} .focus p{margin:8px 0 0; color:#c3cdda; font-size:13.5px}

/* decisions */
.dec{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:15px 17px; margin-bottom:10px; transition:border-color .18s}
.dec:hover{border-color:var(--line-2)}
.dec.pass{border-left:3px solid var(--ok)} .dec.kill{border-left:3px solid var(--bad)}
.dh{display:flex; align-items:center; gap:10px; font-size:15px} .dt{margin-left:auto; color:var(--faint); font-size:12px; font-variant-numeric:tabular-nums}
.dec p{margin:9px 0 0; color:#c3cdda; font-size:13px}

/* badges + verdict pills */
.badge{font-size:11px; font-weight:700; padding:4px 11px; border-radius:var(--r-pill); letter-spacing:.02em}
.badge.ok,.v.pass{background:var(--ok-bg); color:var(--ok)} .badge.bad,.v.kill{background:var(--bad-bg); color:var(--bad)} .badge.warn{background:var(--warn-bg); color:var(--warn)}
.v{font-size:10.5px; font-weight:800; letter-spacing:.08em; padding:3px 9px; border-radius:var(--r-pill)}

/* stats */
.stats{display:flex; gap:26px; flex-wrap:wrap; margin-top:14px}
.stat .n{font-size:25px; font-weight:800; letter-spacing:-.02em} .stat .l{font-size:12px; color:var(--dim)}

/* nav */
nav{position:sticky; top:0; z-index:20; backdrop-filter:saturate(140%) blur(10px); background:rgba(8,10,14,.82); border-bottom:1px solid var(--line)}
nav .inner{max-width:var(--maxw); margin:0 auto; padding:11px 24px; display:flex; gap:5px; flex-wrap:wrap}
nav a{color:var(--dim); font-size:13px; font-weight:600; padding:6px 12px; border-radius:9px}
nav a:hover{background:var(--panel-2); color:var(--txt)}

footer{margin-top:40px; color:var(--faint); font-size:12px; border-top:1px solid var(--line); padding-top:18px; line-height:1.7}