:root {
      --bg: #0a0a0a;
      --panel: #101010;
      --panel-2: #0d0d0d;
      --panel-3: #141414;
      --text: #ffd166;
      --muted: #8f6b2b;
      --blue: #6cb2ff;
      --blue-dim: #24415f;
      --amber: #ffb000;
      --amber-soft: rgba(255, 176, 0, 0.14);
      --line: #2b2416;
      --error: #ff5c5c;
      --ok: #76d38b;
      --shadow-text: 0 0 8px rgba(255, 176, 0, 0.22);
      --shadow-blue: 0 0 16px rgba(108, 178, 255, 0.12);
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-8: 32px;
      --space-10: 40px;
      --space-12: 48px;
      --radius: 0px;
      --max-width: 1280px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      min-height: 100vh;
      font-family: 'JetBrains Mono', monospace;
      background: var(--bg);
      color: var(--text);
      text-shadow: var(--shadow-text);
      overflow-x: hidden;
      position: relative;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.02) 0,
        rgba(255, 255, 255, 0.02) 1px,
        transparent 1px,
        transparent 4px
      );
      opacity: 0.18;
      z-index: 5;
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 20% 20%, rgba(255,176,0,0.05), transparent 25%),
        radial-gradient(circle at 80% 0%, rgba(108,178,255,0.06), transparent 25%);
      z-index: 1;
    }

    #bg-canvas {
      position: fixed;
      inset: 0;
      z-index: 0;
      opacity: 0.5;
      pointer-events: none;
    }

    .wrap {
      position: relative;
      z-index: 2;
      max-width: var(--max-width);
      margin: 0 auto;
      padding: var(--space-6);
    }

    .terminal-bar {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: var(--space-4);
      border: 1px solid var(--line);
      background: linear-gradient(180deg, #111, #0c0c0c);
      padding: var(--space-3) var(--space-4);
      margin-bottom: var(--space-6);
      box-shadow: var(--shadow-blue);
    }

    .terminal-title {
      color: var(--blue);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .terminal-meta {
      color: var(--muted);
      text-align: right;
      font-size: 0.92rem;
    }

    .hero {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: var(--space-6);
      margin-bottom: var(--space-8);
    }

    .panel {
      border: 1px solid var(--line);
      background: linear-gradient(180deg, var(--panel), var(--panel-2));
      position: relative;
      overflow: hidden;
    }

    .panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      padding: var(--space-3) var(--space-4);
      border-bottom: 1px solid var(--line);
      color: var(--blue);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      background: rgba(108, 178, 255, 0.04);
    }

    .panel-body { padding: var(--space-5); }

    .ascii-logo {
      color: var(--blue);
      white-space: pre;
      font-size: clamp(0.68rem, 1.3vw, 0.95rem);
      line-height: 1.2;
      margin-bottom: var(--space-5);
      text-shadow: 0 0 10px rgba(108, 178, 255, 0.2);
    }

    .hero h1 {
      font-size: clamp(2rem, 5vw, 4.6rem);
      line-height: 1.02;
      text-transform: uppercase;
      margin-bottom: var(--space-4);
      max-width: 14ch;
    }

    .hero h1 .blue { color: var(--blue); text-shadow: var(--shadow-blue); }
    .prompt {
      color: var(--blue);
      margin-bottom: var(--space-2);
      font-size: 0.95rem;
    }

    .type-line {
      color: var(--text);
      min-height: 2.4em;
      max-width: 62ch;
      line-height: 1.7;
    }

    .cursor {
      display: inline-block;
      width: 0.65ch;
      height: 1.1em;
      vertical-align: -0.18em;
      background: var(--amber);
      box-shadow: 0 0 10px rgba(255,176,0,0.6);
      animation: blink 1s steps(1) infinite;
      margin-left: 2px;
    }

    @keyframes blink { 50% { opacity: 0; } }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-4);
    }

    .stat-card {
      border: 1px solid var(--line);
      background: var(--panel-3);
      padding: var(--space-4);
      min-height: 116px;
    }

    .stat-label {
      color: var(--blue);
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: var(--space-3);
    }

    .stat-value {
      font-size: clamp(1.5rem, 4vw, 2.8rem);
      line-height: 1;
      margin-bottom: var(--space-2);
    }

    .stat-sub {
      color: var(--muted);
      font-size: 0.88rem;
      line-height: 1.5;
    }

    .section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      margin: var(--space-8) 0 var(--space-4);
      color: var(--blue);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .section-head small { color: var(--muted); font-size: 0.88rem; }

    .leaderboard {
      display: grid;
      grid-template-columns: 1.4fr 0.9fr;
      gap: var(--space-6);
      align-items: start;
    }

    .contributors-list {
      display: grid;
      gap: var(--space-4);
    }

    .contributor-card {
      border: 1px solid var(--line);
      background: linear-gradient(180deg, #111111, #0b0b0b);
      padding: var(--space-4);
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: var(--space-4);
      align-items: center;
      position: relative;
    }

    .rank-pill {
      min-width: 64px;
      text-align: center;
      border: 1px solid var(--amber);
      color: var(--amber);
      padding: var(--space-2) var(--space-3);
      background: var(--amber-soft);
      font-weight: 800;
    }

    .contributor-main {
      display: grid;
      gap: var(--space-2);
      min-width: 0;
    }

    .contributor-name-row {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3);
      align-items: baseline;
    }

    .contributor-name {
      font-size: 1.08rem;
      color: var(--text);
      text-decoration: none;
      word-break: break-word;
    }

    .contributor-login {
      color: var(--blue);
      font-size: 0.88rem;
    }

    .contributor-title {
      color: var(--muted);
      font-size: 0.9rem;
    }

    .bar-wrap {
      display: grid;
      gap: var(--space-2);
    }

    .bar-meta {
      display: flex;
      justify-content: space-between;
      gap: var(--space-3);
      font-size: 0.82rem;
      color: var(--blue);
      flex-wrap: wrap;
    }

    .ascii-bar {
      color: var(--amber);
      font-size: 0.92rem;
      overflow-wrap: anywhere;
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
    }

    .tag {
      border: 1px dashed var(--blue-dim);
      color: var(--blue);
      padding: 4px 8px;
      font-size: 0.76rem;
      background: rgba(108, 178, 255, 0.05);
    }

    .contributor-side {
      text-align: right;
      display: grid;
      gap: var(--space-2);
      justify-items: end;
    }

    .xp {
      font-size: 1.35rem;
      color: var(--amber);
    }

    .pr-count,
    .last-activity {
      color: var(--muted);
      font-size: 0.8rem;
      max-width: 24ch;
    }

    .feed {
      display: grid;
      gap: var(--space-4);
    }

    .feed-item {
      border: 1px solid var(--line);
      background: var(--panel);
      padding: var(--space-4);
    }

    .feed-item h3 {
      color: var(--text);
      font-size: 1rem;
      margin-bottom: var(--space-2);
      line-height: 1.45;
    }

    .feed-meta {
      color: var(--blue);
      font-size: 0.82rem;
      margin-bottom: var(--space-2);
    }

    .feed-desc {
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.6;
    }

    .status-line {
      margin-top: var(--space-8);
      border-top: 1px dashed var(--line);
      padding-top: var(--space-4);
      color: var(--muted);
      font-size: 0.85rem;
      display: flex;
      justify-content: space-between;
      gap: var(--space-4);
      flex-wrap: wrap;
    }

    .loading, .empty, .error {
      border: 1px solid var(--line);
      background: var(--panel);
      padding: var(--space-5);
      color: var(--muted);
    }

    .error { color: var(--error); }

    a { color: inherit; }

    @media (max-width: 980px) {
      .hero,
      .leaderboard {
        grid-template-columns: 1fr;
      }

      .contributor-card {
        grid-template-columns: 1fr;
      }

      .contributor-side {
        justify-items: start;
        text-align: left;
      }
    }

    @media (max-width: 640px) {
      .wrap { padding: var(--space-4); }
      .stats-grid { grid-template-columns: 1fr; }
      .terminal-bar,
      .section-head,
      .status-line,
      .bar-meta,
      .contributor-name-row {
        display: block;
      }
      .terminal-meta,
      .section-head small { margin-top: var(--space-2); }
      .rank-pill { width: fit-content; }
    }