:root{
  --font-display:'Orbitron',sans-serif; --font-body:'Inter',sans-serif; --font-data:'Share Tech Mono',monospace;
  --bg:#05060A; --panel:#0b0d14; --ink:#E8E6DE; --muted:#7c8696;
  --accent:#1F51FF; --accent2:#FF2D9B; --warn:#FFB000; --good:#39FF9E; --danger:#FF3B47;
  --particle:#1F51FF; --line:#1b2330;
  --head-bg:rgba(7,9,14,.78); --dd-bg:#0a0d15;
  --boxhead:linear-gradient(90deg,color-mix(in srgb,#1F51FF 26%,transparent),color-mix(in srgb,#FF2D9B 8%,transparent));
  --cardhead:color-mix(in srgb,#1F51FF 9%,transparent);
  --ann-bg:#0a0d14; --radius:10px; --chip-radius:7px;
  --logo-glow:0 0 14px color-mix(in srgb,#1F51FF 70%,transparent);
  --active-glow:0 0 16px -2px color-mix(in srgb,#1F51FF 65%,transparent);
  --panel-glow:0 0 40px -22px color-mix(in srgb,#1F51FF 70%,transparent);
}
html[data-theme="light"]{
  --bg:#E7E9ED; --panel:#f3f5f8; --ink:#10151c; --muted:#56607a;
  --accent:#1c3fd0; --accent2:#c01f73; --warn:#b87500; --good:#0a9c5c; --danger:#cc2a34;
  --particle:#1c3fd0; --line:#cfd6e0;
  --head-bg:rgba(238,240,244,.85); --dd-bg:#f1f3f7;
  --boxhead:linear-gradient(90deg,color-mix(in srgb,#1c3fd0 18%,transparent),transparent);
  --cardhead:color-mix(in srgb,#1c3fd0 8%,transparent);
  --ann-bg:#eef0f4; --logo-glow:none; --active-glow:none; --panel-glow:0 12px 30px -20px rgba(0,0,0,.3);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.6;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background .45s,color .45s}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
#bg-particles{position:fixed;inset:0;z-index:0;pointer-events:none}
.wrap{position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:0 22px}

#announcement{position:relative;z-index:60;padding:9px 0;border-bottom:1px solid var(--ann-line);background:repeating-linear-gradient(45deg,var(--ann-stripe) 0 14px,transparent 14px 28px),var(--ann-bg)}
#announcement .wrap{display:flex;align-items:center;gap:14px}
.ann-badge{font-family:var(--font-data);font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:3px 10px;border-radius:4px;color:#06070b;background:var(--ann-key);white-space:nowrap;font-weight:700}
.ann-text{font-family:var(--font-data);font-size:13px;letter-spacing:.04em;color:var(--ann-ink)}
#announcement[data-type="info"]{--ann-key:var(--good);--ann-stripe:color-mix(in srgb,var(--good) 16%,transparent);--ann-line:color-mix(in srgb,var(--good) 45%,transparent);--ann-ink:color-mix(in srgb,var(--good) 90%,var(--ink))}
#announcement[data-type="warning"]{--ann-key:var(--warn);--ann-stripe:color-mix(in srgb,var(--warn) 18%,transparent);--ann-line:color-mix(in srgb,var(--warn) 50%,transparent);--ann-ink:color-mix(in srgb,var(--warn) 92%,var(--ink))}
#announcement[data-type="critical"]{--ann-key:var(--danger);--ann-stripe:color-mix(in srgb,var(--danger) 20%,transparent);--ann-line:color-mix(in srgb,var(--danger) 55%,transparent);--ann-ink:color-mix(in srgb,var(--danger) 92%,var(--ink))}

.site-head{position:sticky;top:0;z-index:50;background:var(--head-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head-row{display:flex;align-items:center;gap:18px;height:66px}
.logo{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:.01em;white-space:nowrap;display:inline-flex;align-items:center}
.logo .tld{color:var(--accent)}
.logo .glow{text-shadow:var(--logo-glow)}
.logo-img{display:block;height:30px;width:auto}
.hero-img{display:block;height:60px;width:auto;max-width:100%;margin:0 auto}
.nav-cluster{display:flex;align-items:center;gap:14px;margin-left:auto}
.main-nav{display:flex;align-items:center;gap:4px}
.main-nav a,.dd-toggle{position:relative;font-family:var(--font-data);font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:9px 13px;border-radius:var(--chip-radius);color:var(--ink);transition:color .18s,background .18s;cursor:pointer;background:transparent;border:1px solid transparent;display:inline-flex;align-items:center;gap:6px}
.main-nav a:hover,.dd-toggle:hover{color:var(--ink)}
.main-nav a.active{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 14%,transparent);box-shadow:var(--active-glow)}
.main-nav a.active::before{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--accent);box-shadow:0 0 8px var(--accent)}
/* directional hover underline: wipes in from the right, exits to the left */
.main-nav a:not(.active)::after,.dd-toggle::after{content:"";position:absolute;left:13px;right:13px;bottom:6px;height:2px;border-radius:2px;background:var(--accent);box-shadow:0 0 8px var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.main-nav a:not(.active):hover::after,.dd-toggle:hover::after{transform:scaleX(1);transform-origin:right}

.has-dd{position:relative;perspective:900px}
.dropdown{position:absolute;top:calc(100% + 10px);right:0;width:400px;max-width:88vw;background:var(--dd-bg);border:1px solid var(--line);border-radius:var(--radius);padding:8px;opacity:0;visibility:hidden;transform-origin:top right;transform:translateY(-6px) rotateX(-16deg);transition:opacity .18s,transform .22s cubic-bezier(.2,.8,.25,1),visibility .22s;box-shadow:0 24px 60px -24px rgba(0,0,0,.85);z-index:80}
.has-dd:hover .dropdown,.has-dd.open .dropdown{opacity:1;visibility:visible;transform:translateY(0) rotateX(0)}
.dd-item{display:flex;align-items:baseline;justify-content:space-between;gap:24px;width:100%;padding:10px 13px;border-left:2px solid transparent;border-radius:calc(var(--radius) - 4px);transition:background .14s,border-color .14s;text-transform:uppercase}
.dd-item:hover{background:color-mix(in srgb,var(--accent) 14%,transparent);border-left-color:var(--accent)}
.dd-name{font-family:var(--font-data);font-size:12.5px;letter-spacing:.04em;color:var(--ink);white-space:nowrap;text-align:left}
.dd-desc{font-family:var(--font-data);font-size:11px;color:color-mix(in srgb,var(--ink) 70%,transparent);white-space:nowrap;text-align:right;margin-left:auto}
.dd-item.dead{opacity:.42;cursor:not-allowed}
.dd-item.dead:hover{background:transparent;border-left-color:transparent}
.dd-item.dead .dd-desc::after{content:" · INACTIVE";color:var(--danger);font-size:9px;letter-spacing:.14em}
.has-dd:hover .dd-item .dd-name,.has-dd.open .dd-item .dd-name{animation:glitch .5s steps(2) 1}
@keyframes glitch{0%{clip-path:inset(0 0 0 0);transform:translate(0)}20%{clip-path:inset(20% 0 40% 0);transform:translate(-1.5px,0);text-shadow:1.5px 0 var(--accent),-1.5px 0 var(--accent2)}40%{clip-path:inset(60% 0 10% 0);transform:translate(1.5px,0);text-shadow:-1.5px 0 var(--accent),1.5px 0 var(--accent2)}60%{clip-path:inset(10% 0 70% 0);transform:translate(-1px,0)}100%{clip-path:inset(0 0 0 0);transform:translate(0);text-shadow:none}}

.tool{font-family:var(--font-data);font-size:12px;letter-spacing:.1em;border:1px solid var(--line);border-radius:var(--chip-radius);padding:7px 11px;display:inline-flex;align-items:center;gap:8px;color:var(--ink);background:color-mix(in srgb,var(--ink) 4%,transparent);transition:border-color .18s,color .18s,opacity .18s;cursor:pointer;user-select:none}
.tool:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
#clock .clock-zone{color:var(--accent);font-weight:700}
#clock .clock-time{font-variant-numeric:tabular-nums;min-width:64px;text-align:right}
#theme .tt-label,#sound .snd-label{color:var(--accent);font-weight:700}
#sound.off{opacity:.45}
.burger{display:none;flex-direction:column;gap:4px;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--chip-radius);align-items:center;justify-content:center;cursor:pointer;background:transparent;margin-left:auto}
.burger span{width:18px;height:2px;background:var(--accent);transition:transform .2s,opacity .2s;box-shadow:0 0 6px var(--accent)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.hero{padding:46px 0 26px;text-align:center}
.hero .eyebrow{font-family:var(--font-data);font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:16px}
.hero .eyebrow::before,.hero .eyebrow::after{content:"";width:34px;height:1px;background:var(--accent)}
.hero h1{font-family:var(--font-display);font-weight:700;line-height:1.04;font-size:clamp(30px,5vw,52px);letter-spacing:.005em}
.hero h1 .tld{color:var(--accent)}
.hero p{max-width:560px;margin:16px auto 0;color:var(--muted);font-size:15.5px}
.divider{height:1px;border:none;margin:22px 0 0;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.55}

.wx-strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 16px;margin:18px auto 0;padding:12px 16px;max-width:720px;border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);border-radius:var(--radius);background:color-mix(in srgb,var(--accent) 6%,transparent);box-shadow:var(--panel-glow);font-family:var(--font-data);font-size:13.5px;letter-spacing:.06em}
.wx-item i{font-style:normal;color:var(--ink);margin-right:4px}
.wx-item b{font-weight:400;color:var(--accent);text-shadow:0 0 8px color-mix(in srgb,var(--accent) 45%,transparent)}
.wx-dot{color:color-mix(in srgb,var(--accent) 45%,transparent)}

.panel{margin:30px 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);overflow:hidden;box-shadow:var(--panel-glow);position:relative}
.panel-head{display:flex;align-items:center;gap:12px;padding:14px 22px;font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:var(--boxhead);border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.panel-head::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.panel-head .ph-meta{margin-left:auto;font-family:var(--font-data);font-size:11px;letter-spacing:.18em;color:var(--muted)}
.panel-body{padding:26px 22px}
.panel-body > p{color:var(--muted);font-size:14.5px}
.panel-body > p + p{margin-top:14px}
.lede{color:var(--ink) !important;font-size:16px !important}
.panel-empty{min-height:240px}
.placeholder{font-family:var(--font-data);font-size:13px;letter-spacing:.05em;color:color-mix(in srgb,var(--muted) 70%,transparent)}

.section{margin-top:30px}
.section:first-of-type{margin-top:8px}
.sec-rule{height:1px;border:none;margin:0 0 16px;background:linear-gradient(90deg,var(--accent),transparent);opacity:.5}
.section-head{display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:8px;font-family:var(--font-display);font-weight:700;font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);background:var(--boxhead);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.section-head::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--accent);box-shadow:0 0 9px var(--accent)}
.section-head .sh-meta{margin-left:auto;font-family:var(--font-data);font-size:10.5px;letter-spacing:.16em;color:var(--muted)}
.section-intro{margin:14px 2px;color:var(--muted);font-size:14px}

.svc{border:1px solid var(--line);border-radius:calc(var(--radius) - 2px);overflow:hidden;background:color-mix(in srgb,var(--ink) 3%,transparent);transition:border-color .18s}
.svc:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.svc-head{display:flex;align-items:center;gap:14px;padding:13px 16px;cursor:pointer;background:var(--cardhead);user-select:none}
.svc-name{font-family:var(--font-data);font-size:13.5px;letter-spacing:.06em;color:var(--ink)}
.svc-tag{font-family:var(--font-data);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:2px 8px}
.svc-status{margin-left:auto;display:flex;align-items:center;gap:8px;font-family:var(--font-data);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--good)}
.svc-status .dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 9px var(--good)}
.svc-status.off{color:var(--muted)}.svc-status.off .dot{background:var(--muted);box-shadow:none}
.svc-chev{margin-left:4px;color:var(--muted);transition:transform .22s;font-size:12px}
.svc.collapsed .svc-chev{transform:rotate(-90deg)}
.svc-body{max-height:1600px;transition:max-height .35s ease,padding .3s,opacity .25s;padding:14px 16px;overflow:hidden;opacity:1}
.svc.collapsed .svc-body{max-height:0;padding-top:0;padding-bottom:0;opacity:0}

.proj{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:color-mix(in srgb,var(--bg) 55%,transparent)}
.proj + .proj{margin-top:10px}
.proj-head{display:flex;align-items:center;gap:12px;padding:10px 13px;background:color-mix(in srgb,var(--accent) 6%,transparent);border-bottom:1px solid var(--line)}
.proj-name{font-family:var(--font-data);font-size:12.5px;letter-spacing:.05em;color:var(--ink)}
.proj-status{margin-left:auto;display:flex;align-items:center;gap:7px;font-family:var(--font-data);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--good)}
.proj-status .dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 8px var(--good)}
.proj-status.off{color:var(--danger)}.proj-status.off .dot{background:var(--danger);box-shadow:0 0 8px var(--danger)}
.proj-status.dead{color:var(--muted)}.proj-status.dead .dot{background:var(--muted);box-shadow:none}
.proj-body{padding:11px 13px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.proj-body p{color:var(--muted);font-size:13px;margin:0}
.fx-link{position:relative;color:var(--accent);font-family:var(--font-data);font-size:12px;letter-spacing:.08em;white-space:nowrap}
.fx-link::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--accent);box-shadow:0 0 8px var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.fx-link:hover::after{transform:scaleX(1);transform-origin:right}
.fx-link.muted{color:var(--muted);pointer-events:none}

/* ---- alternative projects layout: static 2-up cards ---- */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.pcard{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:color-mix(in srgb,var(--ink) 3%,transparent);display:flex;flex-direction:column;transition:border-color .18s}
.pcard:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.pcard.inactive{opacity:.68}
.pcard-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 14px;
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  box-shadow:var(--panel-glow);font-family:var(--font-data)}
.pc-status{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);text-shadow:0 0 8px color-mix(in srgb,var(--accent) 45%,transparent)}
.pcard.inactive .pc-status{color:var(--muted);text-shadow:none}
.pc-name{margin-left:auto;text-align:right;font-size:12.5px;letter-spacing:.04em;color:var(--ink);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard-body{padding:13px 15px;display:flex;flex-direction:column;gap:9px}
.pfield{display:flex;gap:14px;justify-content:space-between;align-items:baseline;
  border-bottom:1px dashed color-mix(in srgb,var(--line) 85%,transparent);padding-bottom:8px}
.pf-k{font-family:var(--font-data);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.pf-v{font-size:12.5px;color:var(--accent);text-align:right;font-family:var(--font-data)}
.pf-v .fx-link{color:var(--accent)}
.pv-muted{color:var(--muted)}
.pdesc{display:flex;flex-direction:column;gap:6px}
.pdesc .pf-k{margin-bottom:0}
.pdesc p{margin:0;font-size:12.5px;line-height:1.55;color:var(--muted)}
@media (max-width:680px){.pgrid{grid-template-columns:1fr}}

.site-foot{position:relative;z-index:2;margin-top:36px;border-top:1px solid var(--line);background:var(--head-bg);backdrop-filter:blur(6px)}
.foot-inner{padding:11px 0;display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center}
.foot-line{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px 10px;font-size:12px;color:var(--muted);font-family:var(--font-body)}
.foot-net{font-family:var(--font-data);font-size:12px;letter-spacing:.05em;color:var(--ink)}
.foot-net .k{color:var(--muted)}
.foot-dash{color:var(--line)}
.foot-pipe{color:var(--line);margin:0 8px}
.ip-cc .paren{color:var(--accent)}
.ip-cc .cc{color:var(--ink)}
.foot-node{font-family:var(--font-data);font-size:10px;letter-spacing:.14em;color:color-mix(in srgb,var(--muted) 70%,transparent)}

@media (max-width:860px){
  .burger{display:flex}
  .nav-cluster{position:fixed;top:0;right:0;height:100vh;width:min(300px,84vw);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;padding:88px 18px 24px;background:var(--dd-bg);border-left:1px solid var(--line);transform:translateX(105%);transition:transform .28s;margin-left:0;z-index:55}
  .nav-cluster.open{transform:translateX(0)}
  .main-nav{flex-direction:column;align-items:stretch;gap:6px}
  .main-nav a,.dd-toggle{padding:12px 14px}
  .has-dd{order:3}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;width:auto;min-width:0;max-width:none;box-shadow:none;margin-top:6px;display:none}
  .has-dd.open .dropdown{display:block}
  .tool{justify-content:space-between}
  .proj-body{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important}html{scroll-behavior:auto}}