:root{
  --bg:#0a0a0a;
  --fg:#eaeaea;
  --muted:#bdbdbd;
  --accent:#ffffff;
  --card:#111;
  --border:#2a2a2a;
}
/* light theme */
[data-theme="light"]{
  --bg:#eeeeee;
  --fg:#101010;
  --muted:#5a5a5a;
  --accent:#000000;
  --card:#ffffff;
  --border:#d0d0d0;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--fg);
  font-family: "VT323", monospace;
  letter-spacing: 0.5px;
}
a{color:var(--fg); text-decoration:none}
a:hover{opacity:.9}
.container{max-width:1200px;margin:0 auto;padding:24px}
.header{
  position:sticky;top:0;z-index:10;background:rgba(10,10,10,.9);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(6px);
}
.header[data-theme="light"], [data-theme="light"] .header{background:rgba(238,238,238,.9)}
.nav{
  display:flex;align-items:center;justify-content:space-between;
}
.logo{display:flex;gap:8px;align-items:center;font-size:22px}
.logo img{width:28px;height:28px;object-fit:cover;border-radius:4px;border:1px solid var(--border)}
.badge{border:1px solid var(--border);padding:4px 8px;border-radius:4px}
.btn{border:1px solid var(--fg);padding:8px 12px;border-radius:4px;display:inline-flex;gap:8px;align-items:center}
.btn:hover{transform:translateY(-1px)}
.hero{
  border-bottom:1px solid var(--border);
  background: repeating-linear-gradient(0deg, #0a0a0a, #0a0a0a 22px, #0d0d0d 22px, #0d0d0d 44px);
}
[data-theme="light"] .hero{background: repeating-linear-gradient(0deg,#eeeeee,#eeeeee 22px,#e8e8e8 22px,#e8e8e8 44px)}
.hero-inner{display:grid;grid-template-columns:1fr;gap:16px;padding:56px 0}
.title{font-size:72px;letter-spacing:6px;line-height:0.9;margin:0}
.subtitle{font-size:22px;color:var(--muted);max-width:900px}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.grid.cols-3{grid-template-columns:1fr}}
.card{
  background:var(--card);border:1px solid var(--border);padding:16px;border-radius:6px;position:relative;overflow:hidden
}
.card .title{font-size:28px}
.card:hover{outline:1px dashed var(--fg)}
.footer{
  margin-top:56px;border-top:1px solid var(--border);padding:24px 0;color:var(--muted)
}
.section-title{font-size:24px;margin:32px 0 16px 0}
.hr{height:1px;background:var(--border);margin:16px 0}
.kv{
  display:grid;grid-template-columns:140px 1fr;gap:8px
}
.kv .k{color:var(--muted)}
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:800px){.team{grid-template-columns:repeat(4,1fr)}}
.member{border:1px solid var(--border);padding:16px;border-radius:6px}
.member .name{font-size:20px}
.ascii-panel{
  border:1px dashed var(--border); padding:12px; color:var(--muted); font-size:14px; line-height:1.1
}
.window{border:1px solid var(--border);background:#0b0b0b;border-radius:6px}
.window .titlebar{display:flex;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border);color:var(--muted)}
.window .body{padding:16px}
.note{color:var(--muted);font-size:16px}
pre{white-space:pre-wrap}
.code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

/* moving ascii strip */
.ascii-strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;background:var(--card)}
.ascii-track{font-family:inherit;opacity:.85;animation:scroll 20s linear infinite;white-space:nowrap}
[data-theme="light"] .ascii-track{opacity:.6}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* light mode adjustments */
[data-theme="light"] .window{background:#ffffff}
[data-theme="light"] .window .titlebar{color:#6a6a6a}
[data-theme="light"] .note{color:#444}

/* color chips / blocks */
.chips{display:none}
.chip{display:none}

/* pop effects around the ascii strip */
.ascii-strip .container{position:relative}
.pop, .pop-ascii{position:absolute;pointer-events:none;opacity:0;will-change:transform,opacity}
.pop{border-radius:6px}
.pop-ascii{font-family:inherit;font-size:12px;line-height:1}
@keyframes popBlink{0%{opacity:0;transform:scale(.6) rotate(var(--rot,0deg));}
30%{opacity:1;transform:scale(1) rotate(var(--rot,0deg));}
80%{opacity:1;transform:scale(1) rotate(var(--rot,0deg));}
100%{opacity:0;transform:scale(.6) rotate(var(--rot,0deg));}}
.pop,.pop-ascii{animation:popBlink var(--dur,1.4s) ease-out forwards}

@media (prefers-reduced-motion: reduce){
  .ascii-track{animation:none}
  .pop,.pop-ascii{animation:none;display:none}
}

/* glitch overlay for ascii row */
.glitching .ascii-track{opacity:0}
.glitch-overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:flex-start;gap:16px;padding:6px 0;white-space:nowrap;overflow:hidden}
.glitching .glitch-overlay{display:flex}
.glitch-line{font-family:inherit;font-size:14px;letter-spacing:1px;opacity:.95}
.glitch-err{color:#ff3b3b}
[data-theme="light"] .glitch-err{color:#b30000}
@keyframes jitter{0%{transform:translate(0,0) skewX(0deg)}20%{transform:translate(-1px,1px) skewX(1deg)}40%{transform:translate(1px,-1px) skewX(-1deg)}60%{transform:translate(-1px,0) skewX(.5deg)}80%{transform:translate(1px,1px) skewX(-.5deg)}100%{transform:translate(0,0) skewX(0)}}
.glitch-jitter{animation:jitter .5s steps(2,end) infinite}

/* hero layout: console + tweets side-by-side on desktop */
.hero-inner{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@media(min-width: 960px){
  .hero-inner{grid-template-columns:70% 30%}
}

/* skeleton shimmer */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{position:relative;overflow:hidden;background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.06), rgba(255,255,255,0));background-size:200% 100%;animation:shimmer 1.2s linear infinite;border:1px solid var(--border)}
[data-theme="light"] .skeleton{background:linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.08), rgba(0,0,0,0))}
.card.skeleton{height:120px;border-radius:6px}
.card.skeleton .line{height:12px;margin:10px;border-radius:3px;background:currentColor;opacity:.25}
.md-skeleton{display:grid;gap:10px}
.md-skeleton .bar{height:14px;border-radius:4px}

/* bits strip (fun tech snippets) */
.bits-strip{border-top:1px dashed var(--border);border-bottom:1px dashed var(--border);background:var(--bg);overflow:hidden}
.bits-strip .container{max-width:1100px;margin:0 auto}
.bits-track{display:inline-block;white-space:nowrap;animation:scroll 28s linear infinite;color:var(--muted);padding:6px 0;font-size:12px}
[data-theme="light"] .bits-track{opacity:.7}

/* typewriter cursor */
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.title .cursor{display:inline-block;margin-left:2px;animation:blink .8s step-end infinite}

/* fun box spacing */
#fun-box-section{margin-top:10px;margin-bottom:6px}