@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=JetBrains+Mono:wght@500;700;800&display=swap');
                /* ── Design System Variables ────────────────────────────────────────────── */
  .devmind-loader.svelte-1oy3gf1 {
    --loader-bg:          #F6F2E9;
    --loader-ink:         #0A0A0A;
    --loader-border:      #0A0A0A;
    --loader-shadow:      #0A0A0A;
    --loader-card-bg:     #FFFFFF;
    --loader-dot:         rgba(10, 10, 10, 0.75);
    --loader-wm-shadow:   #F472B6;
    --loader-coral:       #FF5C38;
    --loader-teal:        #2DD4BF;
    --loader-pink:        #F472B6;
    --loader-yellow:      #FFD23F;
    --loader-dino:        #0A0A0A;
    --loader-ground:      #0A0A0A;
    --loader-chip-text:   #0A0A0A;
    --loader-chip-border: #0A0A0A;
    --loader-chip-shadow: #0A0A0A;
    --loader-obs-text:    #0A0A0A;

    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--loader-bg);
    color: var(--loader-ink);
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    overflow: hidden;
    transition: background-color 0.25s ease, color 0.25s ease;
  }

  [data-theme='neoDark'] .devmind-loader.svelte-1oy3gf1,
  .dark .devmind-loader.svelte-1oy3gf1 {
    --loader-bg:          #121316;              /* Matches global.css --bg-main */
    --loader-ink:         #D1D5DB;              /* Soft calm light gray */
    --loader-border:      #2E323D;              /* Graphite gray border - zero white borders */
    --loader-shadow:      #000000;              /* Pure black shadow - zero white outline */
    --loader-card-bg:     #1A1D24;              /* Matches global.css --bg-card-main */
    --loader-dot:         rgba(255, 255, 255, 0.05); /* Faint matte noise dots */
    --loader-wm-shadow:   #702D47;              /* Deep matte dusty mulberry shadow */
    --loader-coral:       #A33928;              /* Matte terracotta */
    --loader-teal:        #167C74;              /* Matte deep teal */
    --loader-pink:        #8C385B;              /* Matte dusty rose */
    --loader-yellow:      #C9972E;              /* Matte warm amber */
    --loader-dino:        #CBD5E1;              /* Soft chalk-slate dino */
    --loader-ground:      #2E323D;              /* Dark graphite ground bar */
    --loader-chip-text:   #F8FAFC;              /* Crisp readable chip text */
    --loader-chip-border: #2E323D;              /* Graphite border */
    --loader-chip-shadow: #000000;              /* Black shadow */
    --loader-obs-text:    #F8FAFC;              /* Clean readable obstacle label */
  }

  .loader-backdrop.svelte-1oy3gf1 {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(var(--loader-dot) 1.2px, transparent 1.2px);
    background-size: 26px 26px;
  }

  /* ── Decorative Code Chips ──────────────────────────────────────────────── */
  .code-chip.svelte-1oy3gf1 {
    position: absolute;
    z-index: 1;
    padding: 0.35rem 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--loader-chip-text);
    border: 2px solid var(--loader-chip-border);
    border-radius: 6px;
    box-shadow: 3px 3px 0 0 var(--loader-chip-shadow);
    pointer-events: none;
    transition: background-color 0.25s ease, border-color 0.25s ease;
  }

  /* ── Center Content Box ─────────────────────────────────────────────────── */
  .loader-content.svelte-1oy3gf1 {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 680px;
    padding: 2rem 1.5rem;
  }

  /* ── 1. Wordmark ────────────────────────────────────────────────────────── */
  .wordmark-container.svelte-1oy3gf1 {
    margin-bottom: 2.8rem;
    text-align: center;
  }

  .wordmark.svelte-1oy3gf1 {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(1.5rem, 5.6vw, 3rem);
    line-height: 1.1;
    color: var(--loader-ink);
    text-shadow: 4px 4px 0 var(--loader-wm-shadow);
    letter-spacing: 0.08em;
    margin: 0;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    transition: color 0.25s ease, text-shadow 0.25s ease;
  }

  .wordmark-letter.svelte-1oy3gf1 {
    display: inline-block;
    will-change: transform, opacity;
  }

  .blinking-cursor.svelte-1oy3gf1 {
    display: inline-block;
    color: var(--loader-pink);
    margin-left: 0.15em;
    animation: svelte-1oy3gf1-cursorBlink 0.8s steps(1) infinite;
  }

  @keyframes svelte-1oy3gf1-cursorBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }

  /* ── 2 & 3. Progress Track & Dino ───────────────────────────────────────── */
  .track-wrapper.svelte-1oy3gf1 {
    width: 100%;
    margin-bottom: 2rem;
  }

  .track.svelte-1oy3gf1 {
    position: relative;
    width: 100%;
    height: 72px;
  }

  /* Dino positioning */
  .sprite-track-positioner.svelte-1oy3gf1 {
    position: absolute;
    bottom: 8px; /* sits right on ground line */
    left: 0;
    will-change: transform;
    z-index: 4;
  }

  .sprite-jump-box.svelte-1oy3gf1 {
    will-change: transform;
  }

  /* 9x8 Pixel Dino Grid */
  .pixel-dino.svelte-1oy3gf1 {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 2px;
  }

  .dino-row.svelte-1oy3gf1 {
    display: flex;
    gap: 0;
  }

  .pixel.svelte-1oy3gf1 {
    width: 4px;
    height: 4px;
    background: transparent;
  }

  .pixel--solid.svelte-1oy3gf1 {
    background-color: var(--loader-dino);
    transition: background-color 0.25s ease;
  }

  /* Ground Line */
  .ground-line.svelte-1oy3gf1 {
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    height: 4px;
    background-color: var(--loader-ground);
    border-radius: 2px;
    z-index: 2;
    transition: background-color 0.25s ease;
  }

  /* Obstacles */
  .obstacle-node.svelte-1oy3gf1 {
    position: absolute;
    bottom: 8px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
    pointer-events: none;
  }

  .obstacle-chip.svelte-1oy3gf1 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--loader-obs-text);
    border: 2px solid var(--loader-border);
    border-radius: 3px;
    padding: 0.1rem 0.35rem;
    margin-bottom: 3px;
    white-space: nowrap;
    box-shadow: 2px 2px 0 0 var(--loader-shadow);
    transition: background-color 0.25s ease, border-color 0.25s ease;
  }

  .obstacle-bar.svelte-1oy3gf1 {
    width: 14px;
    height: 20px;
    border: 2.5px solid var(--loader-border);
    border-radius: 3px 3px 0 0;
    box-shadow: 2px 0 0 0 var(--loader-shadow);
    transition: background-color 0.25s ease, border-color 0.25s ease;
  }

  /* Checkpoints */
  .checkpoints-row.svelte-1oy3gf1 {
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    height: 16px;
    pointer-events: none;
    z-index: 2;
  }

  .checkpoint-diamond.svelte-1oy3gf1 {
    position: absolute;
    bottom: 0;
    width: 12px;
    height: 12px;
    background-color: var(--loader-bg);
    border: 2.5px solid var(--loader-border);
    transform: translateX(-50%) rotate(45deg);
    transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.25s ease;
  }

  .checkpoint--active.svelte-1oy3gf1 {
    background-color: var(--loader-yellow);
    transform: translateX(-50%) rotate(45deg) scale(1.15);
  }

  /* ── 4. Readout ─────────────────────────────────────────────────────────── */
  .readout-box.svelte-1oy3gf1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
  }

  .percentage-display.svelte-1oy3gf1 {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(2.5rem, 6.5vw, 4rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--loader-ink);
    letter-spacing: -0.04em;
    display: flex;
    align-items: baseline;
    transition: color 0.25s ease;
  }

  .pct-sign.svelte-1oy3gf1 {
    font-size: 0.48em;
    margin-left: 0.1em;
    color: var(--loader-coral);
    transition: color 0.25s ease;
  }

  .glitch-shake.svelte-1oy3gf1 {
    transform: translate(0.8px, -0.8px);
  }

  .status-line.svelte-1oy3gf1 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--loader-ink);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--loader-card-bg);
    border: 2.5px solid var(--loader-border);
    border-radius: 6px;
    padding: 0.45rem 1rem;
    box-shadow: 3px 3px 0 0 var(--loader-shadow);
    max-width: 90%;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  }

  .prompt-symbol.svelte-1oy3gf1 {
    color: var(--loader-pink);
    font-weight: 800;
  }

  .status-text.svelte-1oy3gf1 {
    color: var(--loader-ink);
    letter-spacing: -0.01em;
  }

  .terminal-cursor.svelte-1oy3gf1 {
    color: var(--loader-teal);
    font-weight: 800;
    animation: svelte-1oy3gf1-cursorBlink 0.6s steps(1) infinite;
  }