:root{
  --ink:#171a21; --muted:#8b90a0; --bg:#e9edf4;
  --p1:rgba(42,171,238,.34); --p2:rgba(124,108,240,.30); --p3:rgba(245,158,11,.26);
  --p4:rgba(52,199,138,.26); --p5:rgba(236,72,153,.24); --p6:rgba(14,181,201,.22);
  --tt-bg:rgba(255,255,255,.55); --tt-border:rgba(23,26,33,.18);
}
html[data-theme="dark"]{
  --ink:#e9edf6; --muted:#8f96a8; --bg:#0d1017;
  --p1:rgba(56,140,255,.20); --p2:rgba(134,118,255,.18); --p3:rgba(245,158,11,.12);
  --p4:rgba(52,199,138,.13); --p5:rgba(236,72,153,.14); --p6:rgba(14,181,201,.12);
  --tt-bg:rgba(255,255,255,.10); --tt-border:rgba(255,255,255,.22);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  color:var(--ink);
  font-family:"JetBrains Mono", ui-monospace, monospace;
  -webkit-font-smoothing:antialiased;
  display:grid; place-items:center;
  background:var(--bg);
  overflow-x:hidden;
  transition:background-color .3s ease, color .3s ease;
}
::selection{ background:var(--ink); color:var(--bg); }

body::before, body::after{ content:""; position:fixed; inset:-25%; z-index:-1; pointer-events:none; }
body::before{
  background:
    radial-gradient(38% 34% at 18% 26%, var(--p1), transparent 70%),
    radial-gradient(42% 36% at 82% 30%, var(--p2), transparent 70%),
    radial-gradient(40% 34% at 60% 88%, var(--p3), transparent 70%);
  animation:drift-a 26s ease-in-out infinite alternate;
}
body::after{
  background:
    radial-gradient(36% 32% at 30% 78%, var(--p4), transparent 70%),
    radial-gradient(34% 30% at 74% 66%, var(--p5), transparent 70%),
    radial-gradient(30% 28% at 46% 12%, var(--p6), transparent 70%);
  animation:drift-b 34s ease-in-out infinite alternate;
}
@keyframes drift-a{ from{ transform:translate3d(-3%,-2%,0) scale(1.02);} to{ transform:translate3d(4%,3%,0) scale(1.14);} }
@keyframes drift-b{ from{ transform:translate3d(3%,2%,0) scale(1.1);}  to{ transform:translate3d(-4%,-3%,0) scale(1.0);} }

.corner{
  position:fixed; z-index:2;
  font-size:10px; letter-spacing:.1em;
  color:var(--muted); opacity:.66;
  user-select:none;
}
.tl{ top:18px; left:22px; }
.tr{ top:14px; right:22px; display:flex; align-items:center; gap:12px; opacity:1; }
.tr .copy{ opacity:.66; }
.bl{ bottom:16px; left:22px; }
.br{ bottom:16px; right:22px; }

.tt{
  position:relative;
  width:46px; height:20px;
  border-radius:999px;
  border:1px solid var(--tt-border);
  background:var(--tt-bg);
  backdrop-filter:blur(8px) saturate(1.3);
  -webkit-backdrop-filter:blur(8px) saturate(1.3);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:space-between;
  padding:0 5px;
  transition:background-color .3s ease, border-color .3s ease;
}
.tt:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.tt-glyph{ font-size:9px; line-height:1; color:var(--muted); pointer-events:none; }
.tt-knob{
  position:absolute; top:2px; left:2px;
  width:14px; height:14px; border-radius:50%;
  background:var(--ink);
  transition:left .25s cubic-bezier(.45,0,.55,1), background-color .3s ease;
}
html[data-theme="dark"] .tt-knob{ left:28px; }

main{ padding:64px 24px; display:grid; justify-items:center; animation:rise .6s cubic-bezier(.22,.61,.36,1) both; }

.wordmark{
  font-family:"Expletus Sans", system-ui, sans-serif;
  font-weight:600;
  font-size:clamp(34px, 5.6vw, 52px);
  letter-spacing:-0.015em;
  text-align:center;
}
.tagline{
  margin-top:14px;
  font-size:11.5px; letter-spacing:.08em;
  color:var(--muted);
  text-align:center;
}

.row{
  list-style:none;
  margin-top:56px;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:28px;
}
.row li{ display:grid; justify-items:center; }
.row a{
  display:grid; justify-items:center; gap:10px;
  padding:8px 10px 6px; border-radius:22px;
  text-decoration:none;
}
.row svg, .row img{
  width:88px; height:88px;
  shape-rendering:geometricPrecision;
  transition:transform .2s ease;
}
.row a:hover svg, .row a:hover img{ transform:translateY(-4px) scale(1.05); }
.row a:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.aura{ opacity:.6; transition:opacity .2s ease; }
.row a:hover .aura{ opacity:.95; }

.lbl{
  font-size:10.5px; letter-spacing:.12em;
  color:var(--muted);
  white-space:nowrap;
  transition:color .2s ease;
}
.row a:hover .lbl{ color:var(--ink); }

.caption{
  margin-top:52px;
  font-size:12px; letter-spacing:.08em;
  color:var(--muted);
  text-align:center;
  animation:breathe 3.2s ease-in-out infinite;
}

@keyframes rise{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
@keyframes breathe{ 0%,100%{ opacity:.55;} 50%{ opacity:1;} }

@media (max-width:680px){
  .row{ gap:14px; }
  .row svg, .row img{ width:72px; height:72px; }
  .tr, .bl{ display:none; }
}
@media (max-width:420px){
  .row{ gap:8px; }
  .row svg, .row img{ width:58px; height:58px; }
  .lbl{ font-size:9px; letter-spacing:.08em; }
}
@media (prefers-reduced-motion: reduce){
  body::before, body::after, .caption, main{ animation:none; }
  .row svg, .row img{ transition:none; }
}
.lbl{text-align:center}

.row li{ width:132px; }
.row a{ width:100%; }
.lbl{ width:100%; text-align:center; }
@media (max-width:680px){ .row li{ width:104px; } }
@media (max-width:420px){ .row li{ width:92px; } }

/* optical centering: isometric icons lean left, compensate visually */
.row svg, .row img{ margin-left:8px; }