/* ── Config ────────────────────────────────────────────────
       To enable the network dashboard, create a public status
       page in Uptime Kuma (Status Pages > New Status Page),
       add your monitors, then set KUMA_SLUG below to match.
    ─────────────────────────────────────────────────────────── */

    /* ── Design tokens ─────────────────────────────────────── */
    :root {
      --bg:             #0A0A0B;
      --surface:        #161618;
      --surface-2:      #1E1E21;
      --text-primary:   #EDEDED;
      --text-secondary: #8A8A93;
      --accent:         #fe640b;
      --accent-text:    var(--accent);
      --accent-2:       #04a5e5;
      --accent-3:       #04a5e5;
      --border:         #27272A;
      --radius:         4px;
      --font-display:   'Metropolis', sans-serif;
      --font-mono:      'JetBrains Mono', monospace;
      --transition:     300ms cubic-bezier(0.25, 1, 0.5, 1);
      --max-w:          520px;
    }

    :root[data-mode-init="play"] {
      --bg:             #F4F0EB;
      --surface:        rgba(255,255,255,0.75);
      --surface-2:      #EDE9E3;
      --text-primary:   #1C1C19;
      --text-secondary: #6B6B67;
      --border:         rgba(28,28,25,0.15);
      --radius:         12px;
    }

    [data-mode="play"] {
      --bg:             #F4F0EB;
      --surface:        #FFFFFF;
      --surface-2:      #EDE9E3;
      --text-primary:   #1C1C19;
      --text-secondary: #6B6B67;
      --accent:         #fe640b;
      --accent-text:    #B83D0F;
      --accent-2:       #04a5e5;
      --accent-3:       #FFFFFF;
      --border:         #1C1C19;
      --radius:         20px;
    }

    /* ── Reset ─────────────────────────────────────────────── */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      background: var(--bg);
      color: var(--text-primary);
      font-family: var(--font-display);
      min-height: 100vh;
      transition: background var(--transition), color var(--transition);
      overflow-x: hidden;
    }

    /* ── Animated background ───────────────────────────────── */
    #vanta-bg, #vanta-play-bg {
      position: fixed;
      inset: 0;
      z-index: -1;
      opacity: 0;
      transition: opacity 1s ease;
    }
    #vanta-bg.visible, #vanta-play-bg.visible { opacity: 1; }

    /* Play mode: CSS animated gradient blobs */
    #play-bg {
      position: fixed;
      inset: 0;
      z-index: 0; /* Render strictly over Vanta Birds */
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.6s ease;
      overflow: hidden;
      mix-blend-mode: multiply; /* Ensures blobs heavily tint the background and birds */
      transform: translateZ(0); /* Fixes WebGL compositing bug in Chromium */
    }
    #play-bg.visible { opacity: 1; }

    .blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      animation: float-blob 8s ease-in-out infinite alternate;
      will-change: transform;
      opacity: 0.6; /* Explicit opacity to guarantee visibility */
    }
    @media (prefers-reduced-motion: reduce) {
      .blob { display: none !important; animation: none !important; }
    }
    .blob-1 {
      width: 500px; height: 500px;
      background: #fe640b;
      top: -100px; left: -100px;
      animation-duration: 9s;
    }
    .blob-2 {
      width: 400px; height: 400px;
      background: #04a5e5;
      bottom: -80px; right: -80px;
      animation-duration: 11s;
      animation-delay: -3s;
    }
    .blob-3 {
      width: 300px; height: 300px;
      background: #fe640b;
      top: 50%; left: 50%;
      margin-top: -150px; margin-left: -150px;
      animation-duration: 7s;
      animation-delay: -5s;
    }

    @keyframes float-blob {
      0%   { transform: translate(0, 0) scale(1); }
      100% { transform: translate(40px, 30px) scale(1.1); }
    }

    /* ── Top accent bar ────────────────────────────────────── */
    #accent-bar {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--accent);
      z-index: 300;
      transition: background var(--transition);
    }

    /* ── Custom cursor ─────────────────────────────────────── */
    @media (pointer: fine) {
      body { cursor: none; }
      #cursor {
        position: fixed;
        top: 0; left: 0;
        width: 8px; height: 8px;
        background: var(--accent);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999;
        transform: translate(-50%, -50%);
        transition: width 0.15s, height 0.15s, border-radius 0.15s, opacity 0.15s;
        mix-blend-mode: normal;
      }
      #cursor.hovering {
        width: 36px;
        height: 36px;
        background: var(--text-primary);
        mix-blend-mode: difference;
      }
    }

    /* ── Toggle ────────────────────────────────────────────── */
    #toggle-wrap {
      position: fixed;
      top: 1rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 200;
    }

    #toggle {
      display: flex;
      align-items: center;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 4px;
      cursor: pointer;
      transition: background var(--transition), border-color var(--transition);
      font-family: var(--font-display);
      backdrop-filter: blur(12px);
    }

    .toggle-opt {
      padding: 0.3rem 1.1rem;
      border-radius: 999px;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-secondary);
      transition: background var(--transition), color var(--transition);
      user-select: none;
    }

    .toggle-opt.active {
      background: var(--accent);
      color: #0A0A0B;
    }
    [data-mode="play"] .toggle-opt.active {
      background: var(--accent);
      color: #FFFFFF;
    }

    /* ── Main layout ───────────────────────────────────────── */
    main {
      position: relative;
      z-index: 1;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 5.5rem 1.5rem 3rem;
      gap: 0;
    }

    /* ── Scroll-in animation ───────────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: none;
    }

    /* ── Hero ──────────────────────────────────────────────── */
    .hero {
      width: 100%;
      max-width: var(--max-w);
      margin-bottom: 2.5rem;
      position: relative;
      overflow: hidden;
    }



    .hero h1 {
      font-size: clamp(3rem, 10vw, 5rem);
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 0.95;
      transition: color var(--transition);
    }

    .accent-dot {
      color: var(--accent);
      display: inline-block;
      animation: pulse-dot 2.5s ease-in-out infinite;
      transition: color var(--transition);
    }

    @keyframes pulse-dot {
      0%, 100% { opacity: 1;   transform: scale(1); }
      50%       { opacity: 0.4; transform: scale(0.8); }
    }

    .hero-sub {
      margin-top: 0.8rem;
      font-family: var(--font-mono);
      font-size: 0.78rem;
      color: var(--text-secondary);
      letter-spacing: 0.02em;
      display: flex;
      align-items: center;
      gap: 1rem;
      transition: color var(--transition);
    }

    #clock {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      color: var(--text-secondary);
      transition: color var(--transition);
    }

    /* ── Section label ─────────────────────────────────────── */
    .section-label {
      width: 100%;
      max-width: var(--max-w);
      font-family: var(--font-mono);
      font-size: 0.6rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-secondary);
      margin-bottom: 0.7rem;
      margin-top: 1.8rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid var(--border);
      transition: border-color var(--transition), color var(--transition);
    }

    /* ── Cards grid ────────────────────────────────────────── */
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 0.55rem;
      width: 100%;
      max-width: var(--max-w);
    }

    .card {
      display: block;
      position: relative;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 1rem 1.1rem;
      text-decoration: none;
      color: var(--text-primary);
      transition: background var(--transition), border-color var(--transition),
                  border-radius var(--transition), transform 0.15s ease, box-shadow 0.12s;
      backdrop-filter: blur(8px);
    }

    [data-mode="work"] .card:hover {
      border-color: var(--accent-2);
      transform: perspective(800px) scale(1.04) translateZ(0);
      box-shadow: 0 0 15px 2px rgba(255, 255, 255, 0.4);
      transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
      animation: stirplate-wobble 2.5s linear infinite;
    }

    @keyframes stirplate-wobble {
      0%   { translate: 1.5px 1.5px; rotate: 1 0 0 4deg; }
      25%  { translate: -1.5px 1.5px; rotate: 0 1 0 4deg; }
      50%  { translate: -1.5px -1.5px; rotate: -1 0 0 4deg; }
      75%  { translate: 1.5px -1.5px; rotate: 0 -1 0 4deg; }
      100% { translate: 1.5px 1.5px; rotate: 1 0 0 4deg; }
    }

    [data-mode="play"] .card {
      background: rgba(255, 255, 255, 0.14);
      backdrop-filter: url(#lg-filter) blur(22px) saturate(1.7) brightness(1.06);
      -webkit-backdrop-filter: blur(22px) saturate(1.7) brightness(1.06);
      border: 1px solid rgba(255, 255, 255, 0.45);
      border-top-color: rgba(255, 255, 255, 0.75);
      box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.05),
        0 8px 24px rgba(0, 0, 0, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.80),
        inset 0 -1px 0 rgba(0, 0, 0, 0.03);
      position: relative;
      overflow: hidden;
    }

    [data-mode="play"] .card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(
        148deg,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.06) 38%,
        rgba(255, 255, 255, 0.00) 60%,
        rgba(255, 255, 255, 0.08) 100%
      );
      pointer-events: none;
      z-index: 0;
    }

    [data-mode="play"] .card > * {
      position: relative;
      z-index: 1;
    }

    [data-mode="play"] .card:hover {
      box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.07),
        0 14px 36px rgba(0, 0, 0, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.90),
        inset 0 -1px 0 rgba(0, 0, 0, 0.04);
      border-color: rgba(255, 255, 255, 0.60);
      border-top-color: rgba(255, 255, 255, 0.85);
      transform: translateY(-2px);
      transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    }

    .card-label {
      font-family: var(--font-mono);
      font-size: 0.58rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-secondary);
      margin-bottom: 0.3rem;
      transition: color var(--transition);
    }

    .card-name {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.92rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      word-break: break-word;
    }
    .card-name svg {
      flex-shrink: 0;
      opacity: 0.6;
    }

    /* Full-width single-column grid */
    .grid-single {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.55rem;
      width: 100%;
      max-width: var(--max-w);
    }

    /* card-desc for Writing excerpts */
    .card-desc {
      font-size: 0.75rem;
      color: var(--text-secondary);
      line-height: 1.6;
      margin-top: 0.4rem;
      transition: color var(--transition);
    }

    /* Keyboard focus states */
    .card:focus-visible,
    #toggle:focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 4px;
      border-radius: var(--radius);
    }

    /* Minimum touch target size */
    .card {
      min-height: 44px;
    }

    /* Play: alternate label colors */
    [data-mode="play"] .grid .card:nth-child(odd)  .card-label { color: var(--accent);   }
    [data-mode="play"] .grid .card:nth-child(even) .card-label { color: var(--accent-2); }

    /* ── Network status dashboard ──────────────────────────── */
    #status-panel {
      width: 100%;
      max-width: var(--max-w);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      transition: background var(--transition), border-color var(--transition);
    }

    #status-panel .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.7rem 1rem;
      border-bottom: 1px solid var(--border);
      transition: border-color var(--transition);
    }

    #status-panel .panel-title {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }

    #status-updated {
      font-family: var(--font-mono);
      font-size: 0.55rem;
      color: var(--text-secondary);
      opacity: 0.6;
    }

    .status-row {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.6rem 1rem;
      border-bottom: 1px solid var(--border);
      transition: border-color var(--transition), background 0.1s;
      font-family: var(--font-mono);
      font-size: 0.72rem;
    }

    .status-row:last-child { border-bottom: none; }
    .status-row:hover { background: var(--surface-2); }

    .status-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
      animation: status-pulse 2s ease-in-out infinite;
    }

    .status-dot.up   { background: #FFFFFF; }
    .status-dot.down { background: #FF4B3E; animation: none; }
    .status-dot.pending { background: #8A8A93; }

    @keyframes status-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.6; transform: scale(0.85); }
    }

    .status-name {
      flex: 1;
      color: var(--text-primary);
      transition: color var(--transition);
    }

    .status-badge {
      font-size: 0.6rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 0.15rem 0.5rem;
      border-radius: 999px;
      background: var(--surface-2);
    }
    .status-badge.up   { color: #FFFFFF; }
    .status-badge.down { color: #FF4B3E; }

    .status-ms {
      color: var(--text-secondary);
      font-size: 0.6rem;
      min-width: 3rem;
      text-align: right;
    }

    .status-loading {
      padding: 1.2rem 1rem;
      font-family: var(--font-mono);
      font-size: 0.65rem;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .spinner {
      width: 10px; height: 10px;
      border: 1.5px solid var(--border);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── About card ────────────────────────────────────────── */
    .about-card {
      display: flex;
      flex-direction: column;
      gap: 0.9rem;
    }

    .about-inner {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
    }

    .avatar {
      width: 60px;
      height: 60px;
      flex-shrink: 0;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1rem;
      color: var(--accent-3);
      letter-spacing: -0.02em;
      transition: border-color var(--transition), color var(--transition);
    }

    .about-bio {
      font-size: 0.82rem;
      color: var(--text-secondary);
      line-height: 1.65;
      transition: color var(--transition);
    }

    .about-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }

    .about-tag {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      padding: 0.2rem 0.55rem;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--text-secondary);
      letter-spacing: 0.04em;
      transition: border-color var(--transition), color var(--transition);
    }


    /* ── Mode visibility ───────────────────────────────────── */
    [data-mode="work"] .play-only { display: none; }
    [data-mode="play"] .work-only { display: none; }

    /* ── Easter egg ────────────────────────────────────────── */
    #easter-egg {
      position: fixed;
      inset: 0;
      background: rgba(10, 10, 11, 0.97);
      backdrop-filter: blur(20px);
      z-index: 9998;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s;
      font-family: var(--font-mono);
      padding: 2rem;
    }

    #easter-egg.active { opacity: 1; pointer-events: all; }

    #easter-egg h2 {
      font-size: 1.2rem;
      color: #FFFFFF;
      margin-bottom: 0.4rem;
      letter-spacing: -0.02em;
    }

    #easter-egg .ee-sub {
      font-size: 0.7rem;
      color: #8A8A93;
      margin-bottom: 1.5rem;
    }

    #easter-egg pre {
      font-size: 0.65rem;
      line-height: 1.9;
      color: #FFFFFF;
      text-align: left;
      border-left: 2px solid #27272A;
      padding-left: 1rem;
      max-width: 500px;
    }

    #easter-egg pre .dim { color: #8A8A93; }
    #easter-egg pre .hi  { color: #EDEDED; }

    #easter-egg .close {
      margin-top: 1.5rem;
      font-size: 0.7rem;
      color: #8A8A93;
      cursor: pointer;
      text-decoration: underline;
      background: none;
      border: none;
      font-family: var(--font-mono);
    }

    /* ── Footer ────────────────────────────────────────────── */
    footer {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: var(--max-w);
      margin-top: 2.5rem;
      font-family: var(--font-mono);
      font-size: 0.6rem;
      color: var(--text-secondary);
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: color var(--transition);
    }

    /* ── Responsive ────────────────────────────────────────── */
    @media (max-width: 480px) {
      .grid { grid-template-columns: 1fr; }
      .hero h1 { font-size: clamp(2.5rem, 12vw, 3.5rem); }
    }

    @media (prefers-reduced-motion: reduce) {
      *, ::before, ::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
      }
      #play-bg, .blob {
        animation: none !important;
        transform: none !important;
      }
    }

    .stat-row {
      display: flex;
      gap: 2.5rem;
      margin: 1.5rem 0 2.5rem;
      padding: 0 1.5rem;
    }
    .stat-item {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }
    .stat-number {
      font-family: var(--font-mono);
      font-size: 1.1rem;
      font-weight: 500;
      color: var(--text-primary);
    }
    .stat-label {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-secondary);
    }
    
    .live-dot {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #00E599;
      margin-right: 5px;
      vertical-align: middle;
      animation: pulse-live-dot 2.4s ease-in-out infinite;
    }
    @keyframes pulse-live-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.35; transform: scale(0.7); }
    }


    .uptime-badge {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-top: 0.75rem;
    }
    .uptime-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--text-secondary);
      flex-shrink: 0;
    }
    .uptime-dot.up { background: #4ADE80; }
    .uptime-dot.degraded { background: var(--accent); }
    .uptime-dot.down { background: #EF4444; }
    .uptime-text {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      color: var(--text-secondary);
    }



    /* ── Task 7: Play Mode Entrance Animation ───────────── */
    [data-mode="play"] .play-only.reveal.visible {
      animation: none;
    }

    @keyframes slide-in-left  { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
    @keyframes slide-in-right { from { opacity: 0; transform: translateX( 24px); } to { opacity: 1; transform: none; } }
    @keyframes slide-in-up    { from { opacity: 0; transform: translateY( 16px); } to { opacity: 1; transform: none; } }

    .play-enter {
      animation-duration: 0.4s;
      animation-fill-mode: both;
      animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    }
    .play-enter-left  { animation-name: slide-in-left; }
    .play-enter-right { animation-name: slide-in-right; }
    .play-enter-up    { animation-name: slide-in-up; }

    /* ── Sci-Fi Glitch Transition ───────────────────────── */
    @keyframes scifi-glitch-overlay {
      0%   { backdrop-filter: blur(0px) contrast(1); background-color: rgba(0,0,0,0); }
      10%  { backdrop-filter: blur(4px) contrast(1.5) hue-rotate(90deg); background-color: rgba(255,107,43,0.1); }
      20%  { backdrop-filter: blur(2px) contrast(2) invert(0.8); background-color: rgba(67,98,238,0.1); }
      30%  { backdrop-filter: blur(8px) contrast(1.2) hue-rotate(-90deg); background-color: rgba(255,255,255,0.2); }
      40%  { backdrop-filter: blur(2px) contrast(1.5); background-color: rgba(0,0,0,0.2); }
      50%  { backdrop-filter: blur(12px) contrast(2) invert(1); background-color: rgba(255,255,255,0.1); } /* SWAP */
      60%  { backdrop-filter: blur(8px) contrast(1.5) hue-rotate(180deg); background-color: rgba(255,107,43,0.1); }
      70%  { backdrop-filter: blur(4px) contrast(2) invert(0.5); background-color: rgba(67,98,238,0.1); }
      80%  { backdrop-filter: blur(2px) contrast(1.2); background-color: rgba(0,0,0,0.1); }
      90%  { backdrop-filter: blur(1px) contrast(1.1); background-color: rgba(255,255,255,0.05); }
      100% { backdrop-filter: blur(0px) contrast(1); background-color: rgba(0,0,0,0); }
    }
    .glitch-overlay {
      position: fixed;
      inset: -10px;
      z-index: 9999;
      pointer-events: none;
      animation: scifi-glitch-overlay 0.5s cubic-bezier(0.25, 1, 0.5, 1) both;
      background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1) 2px, transparent 2px, transparent 4px);
    }
  
    @view-transition { navigation: auto; }

    :focus-visible {
      outline: 2px solid #fe640b;
      outline-offset: 3px;
      border-radius: 2px;
    }

    #type-cursor {
      display: inline-block;
      font-weight: 400;
      color: var(--accent);
      animation: blink 0.53s step-end infinite;
      margin-left: 1px;
    }
    @keyframes blink {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0; }
    }
    [data-mode="work"] #type-cursor { display: none; }

    .currently-card { display: flex; flex-direction: column; gap: 0.75rem; }
    .currently-row  { display: flex; align-items: baseline; gap: 1rem; }
    .currently-label {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-secondary);
      min-width: 70px;
      flex-shrink: 0;
    }
    .currently-value { font-size: 0.9rem; font-weight: 500; color: var(--text-primary); }
    
    .photo-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 0.5rem;
      padding: 0 1.5rem;
    }
    .photo-item {
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover;
      border-radius: var(--radius, 4px);
      border: 1px solid var(--border);
      display: block;
    }
    @media (max-width: 480px) {
      .photo-grid { grid-template-columns: repeat(2, 1fr); }
    }

    #cli-overlay {
      position: fixed;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
      width: min(480px, 90vw);
      background: rgba(10,10,11,0.96);
      border: 1px solid var(--accent);
      border-radius: 6px;
      padding: 0.75rem 1rem;
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: #EDEDED;
      z-index: 9999;
      display: none;
      box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    }
    #cli-overlay.active { display: block; }
    #cli-prompt { color: var(--accent-text); }
    #cli-cursor {
      display: inline-block;
      color: var(--accent);
      animation: blink 0.53s step-end infinite;
    }
    #cli-output {
      margin-top: 0.5rem;
      color: var(--text-secondary);
      min-height: 1.2em;
      white-space: pre-wrap;
      max-height: 200px;
      overflow-y: auto;
    }

    /* Custom scrollbar */
    ::-webkit-scrollbar       { width: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--accent); }
    /* Firefox */
    * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

    .cli-hint {
      font-family: var(--font-mono);
      font-size: 0.58rem;
      color: transparent;
      letter-spacing: 0.06em;
      transition: color 0.4s ease;
      user-select: none;
      pointer-events: none;
      margin-left: 1rem;
    }
    footer:hover .cli-hint {
      color: var(--text-secondary);
    }
    /* Terminal mode */
    body.terminal-mode {
      --bg:             #010b01;
      --surface:        #010b01;
      --surface-2:      #0a1a0a;
      --text-primary:   #00FF41;
      --text-secondary: #00aa2b;
      --accent:         #00FF41;
      --accent-2:       #00cc33;
      --border:         rgba(0, 255, 65, 0.25);
      --font-display:   var(--font-mono);
      --radius:         0px;
    }
    body.terminal-mode #vanta-bg,
    body.terminal-mode #vanta-play-bg,
    body.terminal-mode #play-bg { opacity: 0 !important; transition: none; }

    body.terminal-mode::after {
      content: '';
      position: fixed;
      inset: 0;
      background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 3px,
        rgba(0, 0, 0, 0.06) 3px,
        rgba(0, 0, 0, 0.06) 4px
      );
      pointer-events: none;
      z-index: 9990;
      animation: crt-roll 12s linear infinite;
    }
    @keyframes crt-roll {
      from { background-position: 0 0; }
      to   { background-position: 0 200px; }
    }