:root {
  --bg: #080e1c;
  --surface: #0f1829;
  --surface2: #162038;
  --border: #1e2e52;
  --accent: #4f7fff;
  --accent2: #7c5cff;
  --text: #dce6ff;
  --muted: #7a8db8;
  --green: #22d3a0;
  --orange: #f59e0b;
  --red: #f87171;
  --blue: #60a5fa;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
header{background:linear-gradient(135deg,#0d1530,#090f1d)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;border-bottom:1px solid var(--border)}
.logo{font-weight:700;font-size:18px;color:var(--accent);letter-spacing:.04em}
nav a{color:var(--muted);margin-left:20px;font-size:14px;transition:color .2s}
nav a:hover{color:var(--text)}
.hero{padding:52px 32px 44px;text-align:center}
.hero h1{font-size:clamp(28px,4vw,52px);font-weight:800;background:linear-gradient(120deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero p{color:var(--muted);margin-top:10px;font-size:16px}
.hero .sub{font-size:14px;margin-top:4px}
main{max-width:1160px;margin:0 auto;padding:32px 24px}
section{margin-bottom:56px}
section h2{font-size:22px;font-weight:700;margin-bottom:18px;padding-bottom:8px;border-bottom:1px solid var(--border);color:var(--text)}
section h3{font-size:16px;font-weight:600;margin:18px 0 8px;color:var(--accent)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px}
.card h3{margin-top:0;color:var(--accent)}
.card p,.card li{color:var(--muted);font-size:14px}
.card ul,.card ol{padding-left:18px;margin-top:6px}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;margin:2px}
.pill-blue{background:#1a2f5a;color:var(--blue)}
.pill-green{background:#0d2e24;color:var(--green)}
.pill-orange{background:#2d1f06;color:var(--orange)}
.pill-red{background:#2a0f0f;color:var(--red)}
.pill-purple{background:#1e1040;color:#b197fc}
table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:10px;overflow:hidden;font-size:14px}
th,td{border:1px solid var(--border);padding:10px 14px;text-align:left;vertical-align:top}
th{background:var(--surface2);font-weight:600;color:var(--text)}
td{color:var(--muted)}
td b{color:var(--text)}
.loop-steps{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.loop-step{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px 18px;flex:1;min-width:140px}
.loop-step .num{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.loop-step .label{font-size:15px;font-weight:700;margin-top:4px;color:var(--text)}
.loop-step .desc{font-size:12px;color:var(--muted);margin-top:4px}
.domain-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:16px}
.domain-card{border-radius:12px;padding:16px;border:1px solid var(--border)}
.domain-clear{background:#0c1d12;border-color:#1a4a2a}
.domain-complicated{background:#0d1b33;border-color:#1a3166}
.domain-complex{background:#1d1207;border-color:#4a2d0a}
.domain-chaotic{background:#1d0808;border-color:#4a1010}
.domain-confused{background:#1a1020;border-color:#3a2060}
.domain-card h3{margin:0 0 8px;font-size:15px}
.domain-card p{font-size:13px;color:var(--muted);margin-bottom:6px}
.domain-card .action{font-size:12px;font-weight:600;color:var(--text);margin-top:8px}
.archetype-row{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:10px}
.archetype-row h3{margin:0 0 4px;font-size:15px;color:var(--text)}
.archetype-row p{font-size:13px;color:var(--muted);margin:2px 0}
.archetype-row .resp{font-size:13px;color:var(--green);margin-top:6px}
.cheatsheet{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px}
.cheatsheet pre{background:#050b14;border:1px solid var(--border);border-radius:10px;padding:18px;font-size:12px;overflow-x:auto;color:var(--text);line-height:1.7}
footer{text-align:center;padding:28px;color:var(--muted);font-size:13px;border-top:1px solid var(--border);margin-top:40px}
@media(max-width:640px){nav{display:none}.hero h1{font-size:26px}}