:root{
    --bg:#0B0E14;
    --panel:#161A24;
    --panel-alt:#1C212D;
    --line:#2A3040;
    --text:#D8D6D0;
    --muted:#868C9C;
    --cyan:#6EE7D8;
    --purple:#A78BFA;
    --amber:#FFB86B;
    --green:#8CFFB0;
  }

  *{ box-sizing:border-box; }

  body{
    margin:0;
    font-family:'IBM Plex Mono', monospace;
    color:var(--text);
    background:var(--bg);
    overflow-x:hidden;
    line-height:1.6;
  }

  a{ color:inherit; text-decoration:none; }

  /* links inside body text stand out in phosphor green */
  p a{
    color:var(--green);
    text-decoration:underline;
    text-decoration-color:rgba(140,255,176,.5);
    text-underline-offset:3px;
    text-shadow:0 0 4px rgba(140,255,176,.3);
  }
  p a:hover{
    text-shadow:0 0 8px rgba(140,255,176,.6);
  }

  /* ---------- CRT scanlines ---------- */
  #scanlines{
    position:fixed; inset:0; z-index:5; pointer-events:none;
    background:repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.04) 0px,
      rgba(255,255,255,.04) 1px,
      transparent 1px,
      transparent 3px
    );
    animation:flicker 7s infinite;
  }
  @keyframes flicker{
    0%,94%,100%{ opacity:1; }
    95%{ opacity:.7; }
    96%{ opacity:1; }
    97%{ opacity:.8; }
  }

  /* ---------- vignette (dark corners, old-monitor tunnel) ---------- */
  #vignette{
    position:fixed; inset:0; z-index:3; pointer-events:none;
    background:radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.6) 100%);
  }

  /* ---------- occasional tracking-line glitch ---------- */
  #trackingline{
    position:fixed; left:0; right:0; height:2px; z-index:6; pointer-events:none;
    background:rgba(255,255,255,.06);
    animation:tracksweep 13s linear infinite;
  }
  @keyframes tracksweep{
    0%{ top:-5%; opacity:0; }
    2%{ opacity:.5; }
    5%{ opacity:0; }
    100%{ top:110%; opacity:0; }
  }

  /* ---------- grain overlay ---------- */
  #grain{
    position:fixed; inset:0; z-index:4; pointer-events:none;
    opacity:.1;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  /* ---------- drifting pixels ---------- */
  #pixel-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; }
  .pixel{
    position:absolute;
    opacity:.5;
    animation:blink 3.5s ease-in-out infinite, drift 14s ease-in-out infinite;
  }
  @keyframes blink{ 0%,100%{ opacity:.15;} 50%{ opacity:.7;} }
  @keyframes drift{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-16px);} }

  /* ---------- header ---------- */
  .hero{
    position:relative; z-index:1;
    text-align:center;
    padding:70px 20px 34px;
    border-bottom:1px solid var(--line);
  }
  .hero h1{
    font-size:clamp(2.2rem, 6vw, 3.6rem);
    margin:0;
    letter-spacing:2px;
    color:#fff;
    text-shadow:2px 0 var(--cyan), -2px 0 var(--purple);
    animation:glitch 6s infinite;
  }
  @keyframes glitch{
    0%,92%,100%{ text-shadow:2px 0 var(--cyan), -2px 0 var(--purple); transform:translate(0,0); }
    93%{ text-shadow:-3px 0 var(--cyan), 3px 0 var(--purple); transform:translate(-1px,1px); }
    95%{ text-shadow:3px 0 var(--cyan), -1px 0 var(--purple); transform:translate(1px,-1px); }
    97%{ text-shadow:2px 0 var(--cyan), -2px 0 var(--purple); transform:translate(0,0); }
  }
  .hero .sub{
    margin-top:16px; font-size:.95rem; color:var(--cyan);
  }
  .hero .sub .cursor{ animation:blinkcursor 1s step-end infinite; }
  @keyframes blinkcursor{ 50%{ opacity:0; } }
  .hero .tagline{
    margin-top:10px; font-size:.85rem; color:var(--muted);
  }

  /* ---------- skyline frame ---------- */
  .skyline-frame{
    position:relative; z-index:1;
    max-width:820px; margin:28px auto 0;
    padding:16px 16px 0;
    border:2px solid var(--green);
    border-radius:8px;
    background:var(--panel);
    box-shadow:0 0 18px rgba(140,255,176,.25), inset 0 0 30px rgba(0,0,0,.4);
    overflow:hidden;
  }
  .skyline-frame svg{ display:block; width:100%; height:auto; }
  .skyline-label{
    position:absolute; top:-11px; left:18px;
    background:var(--bg);
    padding:0 8px;
    font-family:'VT323', monospace;
    font-size:.85rem;
    color:var(--green);
    letter-spacing:1px;
    text-shadow:0 0 6px rgba(140,255,176,.5);
  }

  /* ---------- layout ---------- */
  .layout{
    position:relative; z-index:1;
    max-width:1080px; margin:0 auto;
    padding:40px 20px 70px;
    display:grid;
    grid-template-columns:260px 1fr;
    gap:30px;
  }
  @media (max-width:820px){ .layout{ grid-template-columns:1fr; } }

  .sidebar{ display:flex; flex-direction:column; gap:20px; height:fit-content; }
  @media (min-width:821px){ .sidebar{ position:sticky; top:24px; } }

  .card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:6px;
    padding:18px;
  }

  .profile-card{ text-align:center; }
  .avatar-frame{
    width:88px; height:88px; margin:0 auto 12px;
    border:2px solid var(--cyan);
    background:var(--panel-alt);
    display:flex; align-items:center; justify-content:center;
    font-size:2.1rem;
    overflow:hidden;
  }
  .avatar-frame img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:center;
  }
  .profile-card h2{ margin:6px 0 4px; font-size:1.15rem; color:#fff; }
  .profile-card p{ margin:0; font-size:.78rem; color:var(--muted); }

  /* connection terminal */
  .terminal .screen{
    background:#0A0C10;
    border:1px solid var(--line);
    border-radius:4px;
    padding:14px 12px;
    min-height:48px;
    display:flex; align-items:center;
  }
  .terminal .screen span{
    font-family:'VT323', monospace;
    font-size:1rem;
    color:var(--green);
    text-shadow:0 0 6px rgba(140,255,176,.5);
  }
  .terminal .label{ font-size:.7rem; color:var(--muted); margin-bottom:8px; letter-spacing:1px; }

  /* nav directory */
  .nav-list{ display:flex; flex-direction:column; gap:2px; }
  .nav-list a{
    font-size:.82rem;
    padding:9px 10px;
    border-radius:4px;
    color:var(--text);
    display:flex; align-items:center; gap:8px;
    transition:background .15s ease, color .15s ease;
  }
  .nav-list a .arrow{ color:var(--cyan); }
  .nav-list a:hover{ background:var(--panel-alt); color:var(--cyan); }

  /* now playing */
  .now-playing{ display:flex; align-items:center; gap:12px; }
  .now-playing .eq{ display:flex; gap:3px; align-items:flex-end; height:20px; }
  .now-playing .eq span{ width:4px; background:var(--purple); border-radius:1px; animation:bounce 1s ease-in-out infinite; }
  .now-playing .eq span:nth-child(2){ animation-delay:.15s; background:var(--cyan); }
  .now-playing .eq span:nth-child(3){ animation-delay:.3s; background:var(--amber); }
  @keyframes bounce{ 0%,100%{ height:5px; } 50%{ height:18px; } }
  .now-playing .txt strong{ display:block; font-size:.8rem; color:#fff; }
  .now-playing .txt small{ color:var(--muted); font-size:.72rem; }

  /* badges */
  .badges{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
  .badges span{
    font-family:'VT323', monospace;
    font-size:.78rem;
    letter-spacing:.5px;
    padding:6px 10px;
    border:1px solid var(--line);
    border-radius:3px;
    color:var(--muted);
    background:var(--panel-alt);
  }

  /* ---------- log entries ---------- */
  .blog h2.section-title{
    font-size:.9rem; letter-spacing:2px; color:var(--muted);
    margin:0 0 20px; text-transform:uppercase;
  }
  .entry{
    background:var(--panel);
    border:1px solid var(--line);
    border-left:2px solid var(--cyan);
    border-radius:4px;
    padding:20px 22px;
    margin-bottom:22px;
  }
  .entry .ts{
    font-family:'VT323', monospace;
    font-size:.95rem;
    color:var(--amber);
  }
  .entry h3{ margin:8px 0 12px; font-size:1.15rem; color:#fff; font-weight:600; }
  .entry p{ margin:0 0 14px; font-size:.92rem; color:var(--text); line-height:1.75; }
  .tags{ display:flex; flex-wrap:wrap; gap:8px; }
  .tags span{ font-size:.72rem; color:var(--cyan); }

  /* ---------- footer ---------- */
  footer{
    position:relative; z-index:1;
    text-align:center; padding:34px 20px 50px;
    border-top:1px solid var(--line);
  }
  .footer-badges{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
  .footer-badges span{
    font-family:'VT323', monospace; font-size:.85rem;
    color:var(--muted); border:1px solid var(--line);
    padding:6px 12px; border-radius:3px;
  }
  .counter{
    font-family:'VT323', monospace; font-size:1rem;
    color:var(--green); background:#0A0C10;
    border:1px solid var(--line);
    display:inline-block; padding:8px 14px; border-radius:3px;
    text-shadow:0 0 6px rgba(140,255,176,.4);
  }
  footer small{ display:block; margin-top:12px; color:var(--muted); font-size:.75rem; }

  @media (prefers-reduced-motion:reduce){
    *{ animation:none !important; transition:none !important; }
  }