:root{
  --bg:#0b1220;
  --surface:#131b2e;
  --surface-2:#1a2540;
  --border:#28345a;
  --text:#eef2fb;
  --muted:#8ea0c7;
  --circuit:#39e6b0;
  --circuit-dim:#1f8f6b;
  --circuit-2:#4f8fff;
  --spark:#ffcf5c;
  --display-font:'Chakra Petch', 'Arial Narrow', sans-serif;
  --body-font:'IBM Plex Sans', 'Segoe UI', sans-serif;
  --mono-font:'IBM Plex Mono', 'Courier New', monospace;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(79,143,255,0.14), transparent 55%),
    radial-gradient(ellipse at 85% 0%, rgba(57,230,176,0.10), transparent 50%),
    var(--bg);
  color:var(--text);
  font-family:var(--body-font);
  line-height:1.5;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:0.5;
  background-image:
    linear-gradient(rgba(57,230,176,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,230,176,0.05) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse at 50% 0%, black, transparent 75%);
}
a{ color:var(--circuit); }
.wrap{ position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:0 1.5rem; }

/* ---------- Shared top bar (hub + error pages) ---------- */
.topbar{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.5rem; border-bottom:1px solid var(--border);
  background:rgba(19,27,46,0.6); backdrop-filter:blur(6px);
}
.topbar .brand{
  font-family:var(--display-font); font-weight:700; letter-spacing:.03em;
  color:var(--text); text-decoration:none; font-size:1.05rem;
}
.topbar .brand .techs{ color:var(--circuit); }
.topbar-user{ display:flex; align-items:center; gap:.9rem; font-family:var(--mono-font); font-size:.8rem; color:var(--muted); }
.topbar-user form{ margin:0; }
.btn-ghost{
  all:unset; cursor:pointer; color:var(--muted); font-family:var(--mono-font);
  font-size:.78rem; padding:.35rem .7rem; border:1px solid var(--border); border-radius:6px;
}
.btn-ghost:hover, .btn-ghost:focus-visible{ color:var(--text); border-color:var(--circuit); }

/* ---------- Hero ---------- */
.hero{ padding:4.5rem 0 2.5rem; text-align:center; }
.logo-mark{ width:min(220px, 46vw); height:auto; margin:0 auto 1rem; display:block; }
.logo-mark .trace{
  fill:none; stroke:var(--circuit); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  pathLength:1; stroke-dasharray:1; stroke-dashoffset:1;
  animation:draw 1.1s ease forwards;
}
.logo-mark .pad{ fill:var(--circuit); opacity:0; animation:fadeIn .4s ease forwards; }
.logo-mark .chip{ fill:var(--surface-2); stroke:var(--circuit); stroke-width:4; }
.logo-mark .led{ fill:var(--spark); animation:pulse 2.2s ease-in-out infinite; }
.logo-mark .spark{ fill:var(--spark); filter:drop-shadow(0 0 4px var(--spark)); offset-rotate:0deg; }
.logo-mark .spark.s1{ offset-path:path("M85,70 L85,25 L50,25"); animation:travel 3.4s linear infinite; }
.logo-mark .spark.s2{ offset-path:path("M130,115 L175,115 L175,160"); animation:travel 4.1s linear infinite; animation-delay:1.2s; }
.logo-mark .trace:nth-child(1){ animation-delay:.05s; }
.logo-mark .trace:nth-child(2){ animation-delay:.15s; }
.logo-mark .trace:nth-child(3){ animation-delay:.25s; }
.logo-mark .trace:nth-child(4){ animation-delay:.35s; }
.logo-mark .trace:nth-child(5){ animation-delay:.45s; }
.logo-mark .trace:nth-child(6){ animation-delay:.55s; }
.logo-mark .trace:nth-child(7){ animation-delay:.65s; }
.logo-mark .trace:nth-child(8){ animation-delay:.75s; }
.logo-mark .pad{ animation-delay:1s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fadeIn{ to{ opacity:1; } }
@keyframes pulse{ 0%,100%{ filter:drop-shadow(0 0 2px var(--spark)); opacity:.85; } 50%{ filter:drop-shadow(0 0 9px var(--spark)); opacity:1; } }
@keyframes travel{ 0%{ offset-distance:0%; opacity:0; } 8%{ opacity:1; } 92%{ opacity:1; } 100%{ offset-distance:100%; opacity:0; } }

.wordmark{
  font-family:var(--display-font); font-weight:700;
  font-size:clamp(2.4rem, 7vw, 4.2rem);
  letter-spacing:0.04em;
  margin:0;
  text-wrap:balance;
}
.wordmark .techs{ color:var(--circuit); }
.tagline{
  font-family:var(--mono-font);
  color:var(--muted);
  font-size:clamp(.85rem, 2vw, 1rem);
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin:.6rem 0 0;
}
.status-line{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:1.6rem; padding:.4rem .9rem;
  border:1px solid var(--border); border-radius:999px;
  background:var(--surface);
  font-family:var(--mono-font); font-size:.78rem; color:var(--muted);
}
.status-dot{ width:8px; height:8px; border-radius:50%; background:var(--circuit); box-shadow:0 0 6px var(--circuit); animation:pulse 2s ease-in-out infinite; }

/* ---------- Sign-in / hub CTA on the landing hero ---------- */
.hero-cta{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--display-font); font-weight:600; font-size:1rem;
  color:var(--bg); background:var(--circuit);
  padding:.85rem 1.7rem; border-radius:10px; text-decoration:none;
  margin-top:1.4rem;
  box-shadow:0 0 0 rgba(57,230,176,0); transition:box-shadow .25s ease, transform .2s ease;
}
.hero-cta:hover{ box-shadow:0 0 24px rgba(57,230,176,0.45); transform:translateY(-2px); }

/* ---------- Did-you-know ticker ---------- */
.ticker{
  max-width:640px; margin:2.4rem auto 0; padding:.8rem 1.1rem;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  display:flex; align-items:baseline; gap:.6rem; text-align:left;
}
.ticker-label{ font-family:var(--mono-font); font-size:.7rem; color:var(--circuit); letter-spacing:.1em; flex:none; }
.ticker-text{ font-size:.88rem; color:var(--muted); transition:opacity .3s ease; }

/* ---------- Quote deck ---------- */
.deck-head{ text-align:center; margin:4rem 0 2rem; }
.deck-head h2{ font-family:var(--display-font); font-size:clamp(1.4rem,3.5vw,1.9rem); margin:0 0 .4rem; text-wrap:balance; }
.deck-head p{ color:var(--muted); margin:0; font-size:.92rem; }

.deck{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:1.1rem; padding-bottom:4rem;
}
.card{
  position:relative;
  background:linear-gradient(160deg, var(--surface), var(--surface-2));
  border:1px solid var(--border);
  border-radius:14px;
  padding:1.6rem 1.5rem 1.3rem;
  display:flex; flex-direction:column; gap:.9rem;
  transition:transform .25s ease, border-color .25s ease;
}
.card:hover{ transform:translateY(-3px); border-color:var(--circuit-dim); }
.card .mark{ font-family:var(--display-font); font-size:2.2rem; color:var(--circuit-dim); line-height:1; }
.card blockquote{ margin:0; font-style:italic; font-size:1.02rem; color:var(--text); }
.card cite{
  font-style:normal; font-family:var(--mono-font); font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.chip-glyph{
  position:absolute; top:.85rem; right:.9rem; width:18px; height:18px;
  opacity:.35; pointer-events:none;
}
.chip-glyph rect{ fill:none; stroke:var(--circuit); stroke-width:1.4; }
.chip-glyph line{ stroke:var(--circuit); stroke-width:1.4; }
button.chip-glyph{
  all:unset; position:absolute; top:.85rem; right:.9rem; width:18px; height:18px;
  opacity:.35; cursor:default; border-radius:3px;
}
button.chip-glyph:focus-visible{ outline:2px solid var(--spark); outline-offset:3px; opacity:1; }
button.chip-glyph svg{ width:100%; height:100%; display:block; }
button.chip-glyph rect{ fill:none; stroke:var(--circuit); stroke-width:1.4; }
button.chip-glyph line{ stroke:var(--circuit); stroke-width:1.4; }

footer{
  text-align:center; padding:1.5rem 0 2.5rem;
  color:var(--muted); font-family:var(--mono-font); font-size:.72rem; letter-spacing:.04em;
  position:relative; z-index:1;
}

@media (prefers-reduced-motion: reduce){
  .logo-mark .trace{ animation:none; stroke-dashoffset:0; }
  .logo-mark .pad{ animation:none; opacity:1; }
  .logo-mark .led, .status-dot{ animation:none; }
  .logo-mark .spark{ display:none; }
  .card{ transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Brick breaker overlay ---------- */
.game-overlay{
  position:fixed; inset:0; z-index:50;
  background:rgba(5,9,18,0.92);
  display:none; align-items:center; justify-content:center;
  padding:1.2rem;
}
.game-overlay.open{ display:flex; }
.game-panel{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:1.2rem; max-width:560px; width:100%;
  box-shadow:0 0 60px rgba(57,230,176,0.12);
}
.game-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem; }
.game-panel-head h3{
  font-family:var(--display-font); margin:0; font-size:1.05rem; letter-spacing:.03em; color:var(--circuit);
}
.game-close{
  all:unset; cursor:pointer; color:var(--muted); font-family:var(--mono-font);
  font-size:.85rem; padding:.3rem .6rem; border:1px solid var(--border); border-radius:6px;
}
.game-close:hover, .game-close:focus-visible{ color:var(--text); border-color:var(--circuit); }
.game-hud{
  display:flex; justify-content:space-between; font-family:var(--mono-font);
  font-size:.78rem; color:var(--muted); margin-bottom:.5rem;
}
.game-hud span{ color:var(--text); }
#brickCanvas{
  width:100%; height:auto; display:block; background:var(--bg);
  border:1px solid var(--border); border-radius:8px; touch-action:none;
}
.game-foot{ margin-top:.7rem; text-align:center; color:var(--muted); font-family:var(--mono-font); font-size:.72rem; }

/* ---------- Hub ---------- */
.hub-head{ padding:2.5rem 0 .5rem; position:relative; z-index:1; }
.hub-head h1{ font-family:var(--display-font); font-size:clamp(1.6rem,4vw,2.1rem); margin:0 0 .3rem; }
.hub-head p{ color:var(--muted); margin:0; }

.tool-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:1.1rem; padding:2rem 0 4rem;
}
.tool-card{
  display:flex; flex-direction:column; gap:.7rem;
  background:linear-gradient(160deg, var(--surface), var(--surface-2));
  border:1px solid var(--border); border-radius:14px; padding:1.5rem;
  text-decoration:none; color:var(--text);
  transition:transform .2s ease, border-color .2s ease;
}
.tool-card.live:hover{ transform:translateY(-3px); border-color:var(--circuit-dim); }
.tool-card.soon{ opacity:.55; cursor:default; }
.tool-emoji{ font-size:1.8rem; }
.tool-name{ font-family:var(--display-font); font-weight:600; font-size:1.05rem; }
.tool-desc{ color:var(--muted); font-size:.85rem; margin:0; }
.tool-badge{
  align-self:flex-start; font-family:var(--mono-font); font-size:.68rem; letter-spacing:.06em;
  text-transform:uppercase; padding:.2rem .55rem; border-radius:999px;
}
.tool-badge.live{ background:rgba(57,230,176,0.15); color:var(--circuit); }
.tool-badge.soon{ background:rgba(142,160,199,0.15); color:var(--muted); }

/* ---------- Error page ---------- */
.error-card{
  position:relative; z-index:1;
  max-width:520px; margin:5rem auto; text-align:center;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:2.5rem 2rem;
}
.error-card h1{ font-family:var(--display-font); margin-top:0; }
.error-card p{ color:var(--muted); }
.error-card a{ display:inline-block; margin-top:1rem; font-family:var(--mono-font); font-size:.85rem; }