@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --bg: #0D1117;
  --surface: #121924;
  --surface-2: #182233;
  --line: #232E3F;
  --ink: #E9ECF1;
  --ink-dim: #8892A0;
  --amber: #F2A93B;
  --blue: #5B8DEF;
  --blue-dim: #3F6BB5;
  --danger: #D9704F;
  --mono: 'JetBrains Mono', monospace;
  --sans: 'IBM Plex Sans', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  line-height:1.5; -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--amber); color:#161200; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }

.wrap{ max-width:920px; margin:0 auto; padding:0 24px; }

.topbar{
  border-bottom:1px solid var(--line); background:rgba(13,17,23,0.9);
  backdrop-filter:blur(6px); position:sticky; top:0; z-index:50;
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; height:56px; }
.prompt{ font-family:var(--mono); font-size:13px; color:var(--blue); display:flex; align-items:center; gap:8px; }
.prompt .dot{ width:7px; height:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 8px var(--blue); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
nav{ display:flex; gap:22px; font-family:var(--mono); font-size:13px; color:var(--ink-dim); }
nav a:hover{ color:var(--amber); }

.hero{ padding:88px 0 64px; border-bottom:1px solid var(--line); }
.hero-eyebrow{ font-family:var(--mono); font-size:12px; color:var(--ink-dim); display:flex; gap:10px; align-items:center; margin-bottom:22px; }
.hero-eyebrow .tag{ border:1px solid var(--line); border-radius:3px; padding:2px 7px; color:var(--amber); }
h1{ font-family:var(--mono); font-weight:800; font-size:clamp(34px,6vw,58px); line-height:1.08; letter-spacing:-0.02em; max-width:14ch; }
h1 .glyph{ color:var(--blue); }
.hero p.sub{ margin-top:20px; max-width:52ch; font-size:17px; color:var(--ink-dim); }
.hero-actions{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.btn{ font-family:var(--mono); font-size:13px; padding:11px 18px; border-radius:4px; border:1px solid var(--line); transition:all .15s ease; display:inline-block; }
.btn.primary{ background:var(--amber); color:#161200; border-color:var(--amber); font-weight:700; }
.btn.primary:hover{ background:#ffbe5c; }
.btn.ghost:hover{ border-color:var(--blue); color:var(--blue); }

.cursor{ display:inline-block; width:.5em; height:1em; background:var(--amber); vertical-align:-0.15em; animation:blink 1s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.section{ padding:64px 0; border-bottom:1px solid var(--line); }
.section-label{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--blue); text-transform:uppercase; margin-bottom:28px; display:flex; align-items:center; gap:12px; }
.section-label::after{ content:''; flex:1; height:1px; background:var(--line); }

.about-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:48px; }
.about-grid p{ color:var(--ink-dim); margin-bottom:14px; max-width:56ch; }
.about-grid p strong{ color:var(--ink); font-weight:600; }
.stack{ display:flex; flex-wrap:wrap; gap:0 14px; font-family:var(--mono); font-size:13px; margin-top:18px; }
.stack span{ color:var(--ink-dim); }
.stack span::after{ content:'·'; margin-left:14px; color:var(--line); }
.stack span:last-child::after{ content:''; }

.avatar-box{ border:1px solid var(--line); border-radius:8px; padding:20px; background:var(--surface); text-align:center; margin-bottom:14px; }
.avatar{
  width:120px; height:120px; border-radius:8px; margin:0 auto 16px;
  background:var(--surface-2); border:1px solid var(--blue-dim);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:32px; font-weight:700; color:var(--blue);
  overflow:hidden;
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar-name{ font-family:var(--mono); font-size:14px; font-weight:700; }
.avatar-role{ font-size:12px; color:var(--ink-dim); margin-top:2px; }

.edu-records{ font-family:var(--mono); font-size:12.5px; }
.edu-record{ display:grid; grid-template-columns:56px 1fr; gap:10px; padding:10px 0; border-top:1px solid var(--line); }
.edu-record:first-child{ border-top:none; }
.edu-record .etype{ color:var(--amber); font-weight:700; }
.edu-record .eval{ color:var(--ink-dim); line-height:1.4; }
.edu-record .eval strong{ color:var(--ink); font-weight:600; }

:root{ --zone-cols:minmax(0,1.6fr) minmax(0,1.05fr) minmax(0,0.7fr) minmax(0,2.1fr) minmax(0,0.75fr); }
.zone-head{ display:grid; grid-template-columns:var(--zone-cols); gap:16px; font-family:var(--mono); font-size:11px; color:var(--ink-dim); letter-spacing:.08em; text-transform:uppercase; padding:0 18px 12px; border-bottom:1px solid var(--line); }
.zone-row{ display:grid; grid-template-columns:var(--zone-cols); align-items:center; gap:16px; padding:16px 18px; border-bottom:1px solid var(--line); transition:background .15s ease; cursor:pointer; width:100%; text-align:left; }
.zone-row:hover{ background:var(--surface); }
.zone-row:last-child{ border-bottom:none; }
.zone-row > *{ min-width:0; }
.z-domain{ font-family:var(--mono); font-size:14px; font-weight:600; line-height:1.35; }
.z-domain .root{ display:block; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.z-domain .sub{ display:block; color:var(--ink-dim); font-size:11px; font-weight:400; }
.z-type{ font-family:var(--mono); font-size:12px; color:var(--blue-dim); }
.z-status{ font-family:var(--mono); font-size:12px; display:flex; align-items:center; gap:6px; }
.z-status .d{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.z-status.online .d{ background:var(--blue); box-shadow:0 0 6px var(--blue); }
.z-status.build .d{ background:var(--amber); }
.z-desc{ font-size:13px; color:var(--ink-dim); line-height:1.45; }
.z-actions{ display:flex; gap:14px; justify-content:flex-end; font-family:var(--mono); font-size:12px; }
.zone-row:hover .z-detail{ color:var(--amber); }
.zone-row:hover .z-visit{ color:var(--blue); }
.z-actions a{ position:relative; z-index:2; }
.z-actions a:hover{ text-decoration:underline; }
.empty-state{ font-family:var(--mono); font-size:13px; color:var(--ink-dim); padding:24px 18px; }

@media (max-width:720px){
  .about-grid{ grid-template-columns:1fr; }
  .zone-head{ display:none; }
  .zone-row{ grid-template-columns:1fr; gap:6px; padding:16px 4px; }
  .z-actions{ justify-content:flex-start; margin-top:4px; }
}

.records{ font-family:var(--mono); font-size:14px; }
.record{ display:grid; grid-template-columns:70px 110px 1fr; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); align-items:center; }
.record:last-child{ border-bottom:none; }
.record .rtype{ color:var(--amber); font-weight:700; }
.record .rname{ color:var(--ink-dim); }
.record .rval:hover{ color:var(--blue); }
@media (max-width:560px){ .record{ grid-template-columns:50px 90px 1fr; font-size:12.5px; } }

footer{ padding:36px 0 60px; }
footer .wrap{ display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:12px; color:var(--ink-dim); flex-wrap:wrap; gap:10px; }

.modal-backdrop{ position:fixed; inset:0; background:rgba(6,8,11,0.75); display:none; align-items:center; justify-content:center; padding:24px; z-index:100; }
.modal-backdrop.open{ display:flex; }
.modal{ width:100%; max-width:600px; max-height:86vh; overflow-y:auto; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,0.5); animation:rise .18s ease; }
@keyframes rise{ from{ transform:translateY(12px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.modal-bar{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:12px; color:var(--ink-dim); }
.modal-bar .cmd{ color:var(--blue); }
.modal-bar .close-btn{ color:var(--ink-dim); font-size:16px; line-height:1; padding:4px 8px; }
.modal-bar .close-btn:hover{ color:var(--danger); }
.modal-body{ padding:24px; }
.modal-title{ font-family:var(--mono); font-size:20px; font-weight:700; margin-bottom:4px; }
.modal-title .root{ color:var(--ink-dim); font-weight:400; }
.modal-status{ margin-bottom:22px; }
.who-grid{ display:grid; grid-template-columns:130px 1fr; gap:12px 16px; font-size:13.5px; }
.who-grid dt{ font-family:var(--mono); color:var(--ink-dim); font-size:12px; padding-top:2px; }
.who-grid dd{ color:var(--ink); }
.who-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.who-tags span{ font-family:var(--mono); font-size:11.5px; color:var(--blue); border:1px solid var(--blue-dim); border-radius:3px; padding:2px 8px; }
.modal-actions{ display:flex; gap:12px; margin-top:26px; padding-top:20px; border-top:1px solid var(--line); }
@media (max-width:560px){ .who-grid{ grid-template-columns:100px 1fr; } }