*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#05070a; --panel:#0a0e15; --panel-2:#0d121b;
  --border:rgba(120,200,255,0.16); --border-soft:rgba(120,200,255,0.08);
  --grid:rgba(120,200,255,0.045);
  --text:#e6eef2; --muted:#5c6c7a; --dim:#374250;
  --accent:#4de8ff; --accent-dim:rgba(77,232,255,0.12);
  --accent2:#b98bff;
  --ok:#3dffa0; --warn:#ffb020;
  --font-d:'Space Grotesk',sans-serif; --font-m:'JetBrains Mono',monospace; --font-b:'Inter',sans-serif;
}
html{scroll-behavior:auto}
body{background:var(--bg);color:var(--text);font-family:var(--font-b);line-height:1.6;overflow-x:hidden;cursor:none}
body.touch{cursor:auto}

#bggrid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 40%,transparent 90%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 40%,transparent 90%);
}
#scanline{position:fixed;left:0;right:0;height:120px;top:-120px;z-index:9970;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(77,232,255,.05),transparent);
  animation:scanmove 9s linear infinite}
@keyframes scanmove{0%{top:-120px}100%{top:100vh}}

#cur{position:fixed;width:4px;height:4px;background:var(--accent);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);box-shadow:0 0 8px var(--accent)}
#cur-r{position:fixed;width:26px;height:26px;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s ease,height .3s ease,opacity .3s ease}
#cur-r::before,#cur-r::after{content:'';position:absolute;width:7px;height:7px;border:1px solid var(--accent);opacity:.75}
#cur-r::before{top:0;left:0;border-right:none;border-bottom:none}
#cur-r::after{bottom:0;right:0;border-left:none;border-top:none}
@media(hover:none){#cur,#cur-r{display:none}body{cursor:auto}}

#loader{position:fixed;inset:0;z-index:10000;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;transition:opacity .5s ease,visibility .5s ease}
#loader.hide{opacity:0;visibility:hidden;pointer-events:none}
.ld-row{font-family:var(--font-m);font-size:11px;letter-spacing:.18em;color:var(--accent);display:flex;gap:10px;align-items:center}
.ld-row .dim{color:var(--dim)}
.ld-bar{width:220px;height:2px;background:var(--border-soft);position:relative;overflow:hidden}
.ld-bar::after{content:'';position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:ldfill 1.1s cubic-bezier(.4,0,.2,1) forwards}
@keyframes ldfill{to{width:100%}}
.ld-pct{font-family:var(--font-m);font-size:10px;color:var(--muted)}

.wrap{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:0 40px}

#topbar{position:fixed;top:0;left:0;right:0;z-index:500;padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between;background:rgba(5,7,10,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-soft)}
.tb-id{font-family:var(--font-m);font-size:12px;letter-spacing:.08em;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:8px}
.tb-id .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px var(--ok);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.tb-mid{display:flex;gap:36px;list-style:none}
.tb-mid a{font-family:var(--font-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .3s;position:relative;padding-bottom:3px}
.tb-mid a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent);transition:width .3s ease}
.tb-mid a:hover,.tb-mid a.on{color:var(--accent)}
.tb-mid a.on::after{width:100%}
.tb-right{font-family:var(--font-m);font-size:10.5px;color:var(--muted);letter-spacing:.06em;display:flex;align-items:center;gap:14px}
#clock{color:var(--text);min-width:64px;text-align:right}
@media(max-width:900px){.tb-mid{display:none}#topbar{padding:0 22px}}

.panel{position:relative;background:var(--panel);border:1px solid var(--border-soft)}
.panel::before,.panel::after{content:'';position:absolute;width:12px;height:12px;pointer-events:none;z-index:2}
.panel::before{top:-1px;left:-1px;border-top:1px solid var(--accent);border-left:1px solid var(--accent)}
.panel::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--accent);border-right:1px solid var(--accent)}
.p-tag{position:absolute;top:-9px;left:18px;background:var(--bg);padding:0 8px;font-family:var(--font-m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);z-index:3}

main{padding-top:64px}
#hero{padding:72px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:2px;min-height:420px}
.hero-l{padding:56px 48px;display:flex;flex-direction:column;justify-content:center;gap:20px}
.hero-eyebrow{font-family:var(--font-m);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent2)}
.hero-name{font-family:var(--font-d);font-size:clamp(38px,5.4vw,74px);font-weight:600;line-height:1.03;letter-spacing:-.02em;color:var(--text)}
.hero-type{font-family:var(--font-m);font-size:14px;color:var(--muted);min-height:1.6em;max-width:480px;line-height:1.75}
.hero-type .cursor-blink{display:inline-block;width:8px;height:15px;background:var(--accent);vertical-align:middle;margin-left:2px;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.hero-cta{display:flex;gap:14px;margin-top:8px}
.hbtn{font-family:var(--font-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:12px 22px;border:1px solid var(--border);color:var(--text);text-decoration:none;transition:all .3s;background:transparent}
.hbtn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.hbtn.solid{background:var(--accent);color:#04141a;border-color:var(--accent);font-weight:600}
.hbtn.solid:hover{background:var(--text);border-color:var(--text)}
.hero-r{position:relative;min-height:340px;overflow:hidden}
#cv{position:absolute;inset:0;width:100%;height:100%}
.hero-r-tag{position:absolute;bottom:16px;left:18px;font-family:var(--font-m);font-size:9.5px;color:var(--dim);letter-spacing:.1em;z-index:2}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-l{padding:36px 24px}.hero-r{min-height:220px}}

.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:2px}
.stat{padding:26px 24px;text-align:left;background:var(--panel)}
.stat-num{font-family:var(--font-d);font-size:clamp(26px,3vw,38px);font-weight:600;color:var(--accent);letter-spacing:-.01em}
.stat-lbl{font-family:var(--font-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px}
@media(max-width:900px){.stats-row{grid-template-columns:1fr 1fr}}

section{padding:70px 0}
.sh{display:flex;align-items:baseline;gap:16px;margin-bottom:36px}
.sh-idx{font-family:var(--font-m);font-size:11px;color:var(--accent2)}
.sh-t{font-family:var(--font-d);font-size:clamp(24px,2.6vw,34px);font-weight:600;letter-spacing:-.01em;min-height:1.2em}
.sh-line{flex:1;height:1px;background:var(--border-soft)}

.log-list{list-style:none;padding:26px 8px}
.log-item{display:grid;grid-template-columns:120px 1fr auto;gap:24px;padding:20px 22px;border-bottom:1px solid var(--border-soft);position:relative;--mx:50%;--my:50%;transition:background .3s ease}
.log-item::before{content:'';position:absolute;inset:0;background:radial-gradient(280px circle at var(--mx) var(--my),var(--accent-dim),transparent 65%);opacity:0;transition:opacity .35s ease;pointer-events:none}
.log-item:hover::before{opacity:1}
.log-item:last-child{border-bottom:none}
.log-yr{font-family:var(--font-m);font-size:10.5px;color:var(--muted);padding-top:3px;letter-spacing:.04em}
.log-co{font-family:var(--font-d);font-size:19px;font-weight:600;margin-bottom:3px}
.log-ro{font-family:var(--font-m);font-size:10px;color:var(--accent);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.log-de{font-size:13.5px;color:var(--muted);max-width:520px;line-height:1.72}
.status-pill{font-family:var(--font-m);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border:1px solid var(--border);border-radius:100px;color:var(--muted);white-space:nowrap;height:fit-content;display:flex;align-items:center;gap:6px}
.status-pill .dot{width:5px;height:5px;border-radius:50%;background:var(--muted)}
.status-pill.live{color:var(--ok);border-color:rgba(61,255,160,.3)}
.status-pill.live .dot{background:var(--ok);box-shadow:0 0 6px var(--ok);animation:pulse 1.8s ease-in-out infinite}
@media(max-width:900px){.log-item{grid-template-columns:1fr;gap:6px}.log-yr{padding-top:0}}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.sys-card{padding:28px 26px;position:relative;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:14px;min-height:180px;--mx:50%;--my:50%;transition:background .3s ease;background:var(--panel);border:1px solid var(--border-soft)}
.sys-card::before{content:'';position:absolute;inset:0;background:radial-gradient(240px circle at var(--mx) var(--my),var(--accent-dim),transparent 65%);opacity:0;transition:opacity .35s ease;pointer-events:none}
.sys-card:hover{background:var(--panel-2)}
.sys-card:hover::before{opacity:1}
.sys-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.sys-name{font-family:var(--font-d);font-size:19px;font-weight:600}
.sys-desc{font-size:13px;color:var(--muted);line-height:1.68;flex:1}
.sys-meta{font-family:var(--font-m);font-size:9.5px;color:var(--dim);display:flex;justify-content:space-between;letter-spacing:.05em}
.sys-meta .go{color:var(--accent)}
.sys-card.archived{opacity:.55}
.sys-card.archived:hover{opacity:.9}
@media(max-width:900px){.grid3{grid-template-columns:1fr}.grid4{grid-template-columns:1fr 1fr}}

.divider{display:flex;align-items:center;gap:16px;margin:34px 0 20px}
.divider-line{flex:1;height:1px;background:var(--border-soft)}
.divider-lbl{font-family:var(--font-m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);white-space:nowrap}

.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.tele{padding:34px 40px}
.tele-row{display:flex;gap:18px;padding:14px 0;border-bottom:1px solid var(--border-soft);align-items:baseline}
.tele-row:last-child{border-bottom:none}
.tele-k{font-family:var(--font-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);min-width:110px;flex-shrink:0}
.tele-v{font-size:13.5px;color:var(--text)}
.bio-quote{font-family:var(--font-d);font-size:clamp(18px,1.9vw,24px);font-weight:500;line-height:1.6;color:var(--text);margin-bottom:20px}
.bio-quote em{color:var(--accent);font-style:normal}
.bio-p{font-size:13.5px;color:var(--muted);line-height:1.8}
.photo-frame{position:relative;padding:16px;display:flex;align-items:center;justify-content:center}
.photo-frame img{width:100%;display:block;border:1px solid var(--border-soft);object-fit:cover;aspect-ratio:4/3}
@media(max-width:900px){.profile-grid{grid-template-columns:1fr}.tele{padding:26px 24px}}

footer{padding:90px 0 40px}
.comms-panel{padding:56px 48px}
.comms-h{font-family:var(--font-d);font-size:clamp(34px,5vw,58px);font-weight:600;letter-spacing:-.015em;margin-bottom:36px}
.comms-h .blink{display:inline-block;width:.5em;height:.85em;background:var(--accent);vertical-align:-.08em;margin-left:6px;animation:blink 1s step-end infinite}
.chan-list{list-style:none;display:flex;flex-direction:column;gap:2px;margin-bottom:40px;max-width:460px}
.chan-list a{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;font-family:var(--font-m);font-size:13px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--border-soft);transition:color .3s,padding-left .3s}
.chan-list a:hover{color:var(--accent);padding-left:10px}
.chan-list a .arrow{color:var(--dim);transition:transform .3s}
.chan-list a:hover .arrow{transform:translateX(4px);color:var(--accent)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--border-soft);font-family:var(--font-m);font-size:10px;color:var(--dim);letter-spacing:.06em}
@media(max-width:900px){.comms-panel{padding:36px 24px}.foot-bottom{flex-direction:column;gap:10px;align-items:flex-start}}

.au{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.au.d1{transition-delay:.08s}.au.d2{transition-delay:.16s}.au.d3{transition-delay:.24s}
.au.v{opacity:1;transform:translateY(0)}

.proj-empty{grid-column:1/-1;padding:70px 20px;text-align:center;font-family:var(--font-m);font-size:12px;color:var(--muted);letter-spacing:.04em}

@media(max-width:900px){
  .wrap{padding:0 22px}
  section{padding:52px 0}
}