:root {
  --bg: #0b0d10;
  --panel: #11161c;
  --panel-2: #151c24;
  --line: #24303d;
  --text: #ecf2f8;
  --muted: #9eb0c2;
  --network: #d8d8d8;
  --civility: #f2ba64;
  --inquiry: #74a8ff;
  --vitality: #ef8bc8;
  --security: #ef6a6a;
  --utility: #73d487;
  --shadow: 0 20px 40px rgba(0,0,0,.28);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: radial-gradient(circle at top, #14202f 0%, var(--bg) 45%);
  color: var(--text);
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
.gate-overlay { position: fixed; inset: 0; background: rgba(7,9,12,.92); display:flex; align-items:center; justify-content:center; z-index:99; }
.gate-overlay.hidden { display:none; }
.gate-box { width:min(420px, calc(100% - 32px)); background: linear-gradient(180deg, #161d26, #0e141b); border:1px solid var(--line); border-radius:22px; padding:28px; box-shadow: var(--shadow); }
.gate-box h1 { margin:0 0 8px; font-size: 32px; }
.gate-box p, .gate-help { color: var(--muted); }
#gate-input { width:100%; margin-top:12px; background:#0a1016; color:var(--text); border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
#gate-btn { width:100%; margin-top:12px; border:0; border-radius:14px; padding:14px 16px; background:#edf3fb; color:#0b0d10; font-weight:700; cursor:pointer; }
.gate-error { color:#ff8e8e; margin-top:10px; display:none; }
.home-shell, .page-shell { max-width: 1320px; margin: 0 auto; padding: 28px; }
.home-header, .page-header { display:flex; gap:18px; align-items:flex-start; justify-content:space-between; margin-bottom:24px; }
.eyebrow { color: var(--muted); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; margin:0 0 8px; }
.home-header h1, .page-header h1 { margin:0 0 8px; font-size: clamp(34px, 6vw, 56px); line-height: .96; }
.intro, .page-header p { max-width: 760px; color: var(--muted); margin:0; }
.back-link { padding:12px 16px; border-radius:999px; border:1px solid var(--line); background: rgba(255,255,255,.03); }
.menu-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; }
.menu-card {
  position:relative; min-height: 220px; padding:22px; border-radius:26px; border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  overflow:hidden; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.menu-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.menu-card h2 { margin:8px 0 10px; font-size: 30px; }
.card-tag { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.menu-card p { color: #d1ddeb; max-width: 34ch; }
.menu-card.network:hover { border-color: var(--network); }
.menu-card.civility:hover { border-color: var(--civility); }
.menu-card.inquiry:hover { border-color: var(--inquiry); }
.menu-card.vitality:hover { border-color: var(--vitality); }
.menu-card.security:hover { border-color: var(--security); }
.menu-card.utility:hover { border-color: var(--utility); }
.mini { position:absolute; right:20px; bottom:18px; opacity:.9; }
.mini-network { width:96px; height:96px; border:2px solid rgba(255,255,255,.14); border-radius:50%; }
.mini-network span { position:absolute; width:2px; height:46px; background: rgba(255,255,255,.28); left:50%; top:4px; transform-origin: bottom center; }
.mini-network span:nth-child(1){transform:translateX(-50%) rotate(-50deg);} .mini-network span:nth-child(2){transform:translateX(-50%) rotate(-20deg);} .mini-network span:nth-child(3){transform:translateX(-50%) rotate(10deg);} .mini-network span:nth-child(4){transform:translateX(-50%) rotate(35deg);} .mini-network span:nth-child(5){transform:translateX(-50%) rotate(60deg);} 
.mini-civility { width:110px; height:64px; }
.mini-civility span { position:absolute; inset:auto 0 12px 0; height:4px; background:var(--civility); border-radius:99px; transform: rotate(-7deg); }
.mini-civility::before, .mini-civility::after { content:''; position:absolute; bottom:10px; width:16px; height:16px; border-radius:50%; background:var(--civility); }
.mini-civility::before { left:6px; } .mini-civility::after { right:8px; }
.mini-inquiry { display:grid; grid-template-columns: repeat(2, 26px); gap:8px; }
.mini-inquiry span { width:26px; height:26px; border:1px solid rgba(116,168,255,.45); background: rgba(116,168,255,.12); border-radius:8px; }
.mini-vitality { width:92px; height:90px; position:absolute; }
.mini-vitality span { position:absolute; border-radius:999px; border:2px solid rgba(239,139,200,.65); }
.mini-vitality span:nth-child(1){ inset:0 22px 8px 22px; } .mini-vitality span:nth-child(2){ inset:18px 0 24px 0; } .mini-vitality span:nth-child(3){ inset:26px 28px 32px 28px; background: rgba(239,139,200,.12);} 
.mini-security { width:88px; height:88px; border-radius:50%; border:12px solid rgba(239,106,106,.14); border-top-color: var(--security); transform: rotate(22deg); }
.mini-utility { display:flex; gap:10px; }
.mini-utility span { width:18px; height:70px; border-radius:999px; background: linear-gradient(180deg, rgba(115,212,135,.22), rgba(115,212,135,.78)); }
.page-shell { min-height: 100vh; }
.page-grid { display:grid; grid-template-columns: 340px minmax(0,1fr); gap:20px; align-items:start; }
.left-stack, .right-stage { display:grid; gap:18px; }
.panel { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); border:1px solid var(--line); border-radius:24px; padding:18px; }
.panel h3 { margin:0 0 10px; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.word-letters { display:flex; flex-wrap:wrap; gap:10px; }
.letter-btn { min-width:48px; height:54px; padding:0 12px; border-radius:16px; border:1px solid var(--line); background:#0d1319; color:var(--text); cursor:pointer; font-weight:800; font-size:20px; transition: transform .15s ease, border-color .2s ease, background .2s ease; }
.letter-btn:hover, .letter-btn.active { transform: translateY(-2px); background: rgba(255,255,255,.06); }
.color-network .letter-btn.active, .color-network .letter-btn:hover { border-color: var(--network); box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset; }
.color-civility .letter-btn.active, .color-civility .letter-btn:hover { border-color: var(--civility); }
.color-inquiry .letter-btn.active, .color-inquiry .letter-btn:hover { border-color: var(--inquiry); }
.color-vitality .letter-btn.active, .color-vitality .letter-btn:hover { border-color: var(--vitality); }
.color-security .letter-btn.active, .color-security .letter-btn:hover { border-color: var(--security); }
.color-utility .letter-btn.active, .color-utility .letter-btn:hover { border-color: var(--utility); }
#letterMeaning { color:#d9e2ec; line-height:1.5; min-height:72px; }
#toolbox { display:grid; gap:10px; }
.chip-row, .toggle-row { display:flex; flex-wrap:wrap; gap:8px; }
.chip, .toggle, .matrix-cell, .tool-btn, .node-btn { border:1px solid var(--line); background:#0d1319; color:var(--text); border-radius:14px; padding:10px 12px; cursor:pointer; }
.matrix { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
.matrix-cell { min-height:78px; text-align:left; }
.matrix-cell small { display:block; color:var(--muted); margin-top:6px; }
.tool-btn.active, .chip.active, .toggle.active, .matrix-cell.active, .node-btn.active { background: rgba(255,255,255,.07); }
.range-wrap { display:grid; gap:10px; }
input[type="range"] { width:100%; accent-color: #edf3fb; }
.right-stage .panel { min-height: 540px; }
.stage-top { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:14px; }
.response-badges { display:flex; flex-wrap:wrap; gap:8px; }
.response-badges span { padding:8px 12px; border-radius:999px; background:#0c1218; border:1px solid var(--line); color:#d6e1ec; font-size:13px; }
.stage-canvas { position:relative; min-height:420px; border-radius:22px; border:1px dashed rgba(255,255,255,.08); overflow:hidden; background: radial-gradient(circle at 50% 20%, rgba(255,255,255,.03), rgba(255,255,255,.01)); }
.legend { display:grid; gap:6px; color:var(--muted); font-size:14px; }
.legend strong { color: var(--text); }
.footer-note { margin-top:12px; color:var(--muted); font-size:13px; }
.network-wheel { position:absolute; inset:40px auto auto 50%; width:320px; height:320px; transform: translateX(-50%); border-radius:50%; border:2px solid rgba(255,255,255,.18); }
.network-spoke { position:absolute; left:50%; top:50%; width:2px; height:140px; background:rgba(255,255,255,.25); transform-origin: top center; }
.network-fill { position:absolute; inset:14px; border-radius:50%; background: conic-gradient(from -90deg, rgba(255,255,255,.86) var(--fill), rgba(255,255,255,.08) 0); mask: radial-gradient(circle, transparent 0 52%, black 53%); -webkit-mask: radial-gradient(circle, transparent 0 52%, black 53%); }
.network-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:82px; height:82px; border-radius:50%; background:#0b0f13; border:1px solid var(--line); display:grid; place-items:center; font-weight:700; }
.seesaw { position:absolute; inset:auto 40px 110px 40px; height:180px; }
.seesaw-beam { position:absolute; left:50%; bottom:70px; width:72%; height:10px; background:linear-gradient(90deg, rgba(242,186,100,.86), rgba(242,186,100,.45)); border-radius:999px; transform-origin:center center; transition:transform .3s ease; }
.seesaw-pivot { position:absolute; left:50%; bottom:36px; width:86px; height:52px; transform:translateX(-50%); clip-path: polygon(50% 0, 100% 100%, 0 100%); background:rgba(242,186,100,.22); border:1px solid rgba(242,186,100,.35); }
.weight { position:absolute; bottom:86px; width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:#111922; border:1px solid rgba(242,186,100,.45); transition:left .3s ease; }
.activation-shell { position:absolute; inset:20px; display:grid; place-items:center; }
.body-outline { position:relative; width:250px; height:360px; }
.body-outline::before { content:''; position:absolute; inset:0; border:2px solid rgba(239,139,200,.25); border-radius:120px 120px 80px 80px / 90px 90px 80px 80px; }
.layer { position:absolute; border-radius:999px; opacity:.45; transition:transform .25s ease, opacity .25s ease, filter .25s ease; }
.layer.one{ inset:16px 80px 220px 80px; } .layer.two{ inset:88px 48px 120px 48px; } .layer.three{ inset:88px 88px 62px 88px; }
.layer.pink { border:2px solid rgba(239,139,200,.78); } .layer.red { border:2px solid rgba(239,106,106,.78); } .layer.blue { border:2px solid rgba(116,168,255,.78); } .layer.gold { border:2px solid rgba(242,186,100,.78); } .layer.green { border:2px solid rgba(115,212,135,.78); }
.layer.active { opacity:.95; filter: drop-shadow(0 0 16px currentColor); transform: scale(1.04); }
.ring-wrap { position:absolute; inset:34px; display:grid; place-items:center; }
.ring { width:300px; height:300px; border-radius:50%; background: conic-gradient(var(--security) 0deg, var(--security) var(--deg), rgba(255,255,255,.08) var(--deg) 360deg); display:grid; place-items:center; }
.ring::after { content:''; width:186px; height:186px; border-radius:50%; background:#0b1015; border:1px solid var(--line); }
.ring-label { position:absolute; text-align:center; display:grid; gap:8px; }
.tool-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
.tool-btn { min-height:84px; text-align:left; }
.tool-btn strong { display:block; margin-bottom:4px; }
.comm-field { position:absolute; inset:28px; display:grid; grid-template-columns: 1fr 320px; gap:18px; }
.ripple-zone { position:relative; border:1px solid rgba(116,168,255,.28); border-radius:24px; overflow:hidden; }
.ripple-zone::before, .ripple-zone::after { content:''; position:absolute; border-radius:50%; border:2px solid rgba(116,168,255,.35); left:50%; top:50%; transform:translate(-50%,-50%) scale(var(--ripple,1)); transition:transform .3s ease, opacity .3s ease; }
.ripple-zone::before { width:110px; height:110px; opacity:.85; } .ripple-zone::after { width:220px; height:220px; opacity:.45; }
.context-list { display:grid; gap:10px; }
.context-card { padding:12px; border-radius:16px; border:1px solid var(--line); background:#0d1319; }
.network-node-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; }
.network-node-grid .node-btn { min-height:72px; text-align:left; }
@media (max-width: 980px) {
  .menu-grid { grid-template-columns: 1fr; }
  .page-grid { grid-template-columns: 1fr; }
  .comm-field { grid-template-columns: 1fr; }
  .home-shell, .page-shell { padding:16px; }
}