<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script>
    /* Low-power fast path. Weak hardware — little device memory, few CPU
       cores, or an explicit data-saver / reduced-data request — gets the
       heaviest ALWAYS-ON GPU work trimmed (large backdrop-filter blurs +
       decorative glow loops; see the `.low-power` rules in style.css).
       Set on <html> here, before first paint, so there's no flash of the
       full-strength effects. Full-power devices never get the class and
       keep everything. Wrapped in try/catch so a missing API can never
       break boot. */
    (function () {
      try {
        var n = navigator, mm = window.matchMedia;
        /* Manual override for QA / sharing: ?lowpower=1 forces the path
           ON, ?lowpower=0 forces it OFF, regardless of hardware. */
        var forced = null;
        try {
          var q = new URLSearchParams(location.search).get('lowpower');
          if (q === '1' || q === 'true') forced = true;
          else if (q === '0' || q === 'false') forced = false;
        } catch (e2) {}
        var lowMem  = typeof n.deviceMemory === 'number' && n.deviceMemory <= 4;
        var fewCpu  = typeof n.hardwareConcurrency === 'number' && n.hardwareConcurrency <= 4;
        var saveData = !!(n.connection && n.connection.saveData);
        var reduceData = !!(mm && mm('(prefers-reduced-data: reduce)').matches);
        var on = forced !== null
          ? forced
          : (lowMem || fewCpu || saveData || reduceData);
        if (on) document.documentElement.classList.add('low-power');
      } catch (e) {}
    })();
  </script>
  <title>Chris Makarsky — SUPER CMAK WORLD</title>
  <meta name="description" content="Head of Product · GSD Commander · Crossword Puzzle Solver Extraordinaire.">

  <!-- Favicon -->
  <link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
  <link rel="apple-touch-icon" href="assets/apple-touch-icon.png">

  <!-- Open Graph (Slack, LinkedIn, Facebook, iMessage) -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://chrismakarsky.com/">
  <meta property="og:title" content="Chris Makarsky — SUPER CMAK WORLD">
  <meta property="og:description" content="Head of Product · GSD Commander · Crossword Puzzle Solver Extraordinaire.">
  <meta property="og:image" content="https://chrismakarsky.com/assets/og-image.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Chris Makarsky — SUPER CMAK WORLD">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Chris Makarsky — SUPER CMAK WORLD">
  <meta name="twitter:description" content="Head of Product · GSD Commander · Crossword Puzzle Solver Extraordinaire.">
  <meta name="twitter:image" content="https://chrismakarsky.com/assets/og-image.png">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Inter:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css?v=226">
  <!-- Eager-fetch the hero-monster stomp SFX so the bytes are in HTTP
       cache before main.js decodes them. Pairs with the Web Audio
       decode-once-at-load in main.js so the first stomp is zero-latency. -->
  <link rel="preload" as="audio" type="audio/mpeg" href="assets/sounds/stomp.mp3">
  <!-- Same idea for the SMW SFX scattered across the page (coin +
       break-block on merlons, jump on the hero A button + W01 hills,
       swimming in W04, etc). Listed verbosely so each sound is one
       line — easy to add/remove. -->
  <link rel="preload" as="audio" type="audio/mpeg"  href="assets/sounds/smw_coin.mp3">
  <link rel="preload" as="audio" type="audio/mpeg"  href="assets/sounds/smw_break_block.mp3">
  <link rel="preload" as="audio" type="audio/mpeg"  href="assets/sounds/smw_swimming.mp3">
  <link rel="preload" as="audio" type="audio/mpeg"  href="assets/sounds/smw_jump.mp3">
  <link rel="preload" as="audio" type="audio/mpeg"  href="assets/sounds/smw_save_menu.mp3">
  <link rel="preload" as="audio" type="audio/mpeg"  href="assets/sounds/smw_swooper.mp3">
  <link rel="preload" as="audio" type="audio/mpeg"  href="assets/sounds/smw_yoshi_runs_away.mp3">
  <link rel="preload" as="audio" type="audio/mpeg"  href="assets/sounds/smw_thunder.mp3">
  <link rel="preload" as="audio" type="audio/mpeg"  href="assets/sounds/smw_yellow_yoshi_stomp.mp3">
  <link rel="preload" as="audio" type="audio/mpeg"  href="assets/sounds/smw_castle_clear.mp3">
  <link rel="preload" as="audio" type="audio/mpeg"  href="assets/sounds/smw_stomp.mp3">
  <link rel="preload" as="audio" type="audio/mpeg"  href="assets/sounds/smw_power-up.mp3">
  <link rel="preload" as="audio" type="audio/mpeg"  href="assets/sounds/smw_pause.mp3">
  <link rel="preload" as="audio" type="audio/mpeg"  href="assets/sounds/smw_hit_while_flying.mp3">
  <link rel="preload" as="audio" type="audio/mpeg"  href="assets/sounds/smb3_nspade_match.mp3">
  <link rel="preload" as="audio" type="audio/mpeg"  href="assets/sounds/smw_power-up_appears.mp3">
  <link rel="preload" as="audio" type="audio/mpeg"  href="assets/sounds/smw_stomp_bones.mp3">
  <link rel="preload" as="audio" type="audio/mpeg"  href="assets/sounds/smw2_stomp_2.mp3">
  <link rel="preload" as="audio" type="audio/mpeg"  href="assets/sounds/smb3_map_travel.mp3">
  <link rel="preload" as="audio" type="audio/mpeg"  href="assets/sounds/smb3_airship_moves.mp3">
  <link rel="preload" as="audio" type="audio/mpeg"  href="assets/sounds/smw_pipe.mp3">
  <link rel="preload" as="audio" type="audio/mpeg"  href="assets/sounds/smw_yoshi_swallow.mp3">
  <!-- First-world theme only. Plays seconds after the START click (on
       entering #tutorial), so it's warmed statically here to be ready
       in time. Every OTHER world/boss/credits/secret theme is warmed
       just-in-time from main.js (see "Just-in-time BGM cache warming"):
       an IntersectionObserver injects each theme's <link rel=preload>
       ~1.5 viewports before its section, so the soundtrack streams in
       a screen or two ahead of the player instead of all ~14MB landing
       on first paint. Keeps iOS instant-playback (Safari honors a
       JS-injected rel=preload; it ignores rel=prefetch) without the
       mobile-data hit of preloading tracks most visitors never reach. -->
  <link rel="preload" as="audio" type="audio/mpeg" href="assets/sounds/overworld-intro.mp3">
</head>
<body class="pre-start">
  <script>
    // Skip the START gate ONLY when the URL hash points at a deep
    // section below the hero (deep link, HUD/nav click, or a reload
    // after the scroll-spy updated the hash to a non-hero section).
    // Reloading at the hero (hash empty or #hero) re-shows the gate
    // so the user always re-enters through START — by design, the
    // hero is the "press start to continue" screen, not part of the
    // scrollable game. Evaluated synchronously right after <body>
    // opens so the gate CSS never visibly applies when skipping.
    (function() {
      var h = window.location.hash;
      if (h && h !== '#' && h !== '#hero') {
        document.body.classList.remove('pre-start');
      }
    })();
  </script>

  <!-- ░░ STAGE CURTAIN ░░ -->
  <div class="stage-curtain" aria-hidden="true"></div>

  <!-- ░░ WORLD HUD ░░ -->
  <div id="world-hud" aria-hidden="true">
    <div class="hud-xp" data-level="1">
      <span class="hud-xp-label">XP</span>
      <div class="hud-xp-bar">
        <div class="hud-xp-fill"></div>
        <div class="hud-xp-value-tip" aria-hidden="true">LV.1
0 / 200</div>
      </div>
      <span class="hud-xp-total" aria-live="polite">0</span>
      <!-- Level badge — desktop renders this at the TOP of the bar (the
           .hud-xp wrapper is flex column-reverse, so the last DOM child
           is visually highest); mobile flips it to the LEFT of the bar
           via flex `order` in the @media block. The stat tooltip
           (.hud-level-tip) is anchored to the badge and reveals on
           hover (desktop) / tap (mobile). -->
      <span class="hud-level" aria-live="polite">
        <!-- JS writes just the digits into .hud-level-num; the "LV"
             prefix comes from a CSS ::before so the JS stays
             breakpoint-agnostic and the label reads consistently. -->
        <span class="hud-level-num">1</span>
        <span class="hud-level-tip" aria-hidden="true">ATK 1–3 · CRIT 0%</span>
      </span>
    </div>
    <div class="hud-track">
      <!-- World 00 = hero + tutorial preamble. Click jumps to #hero;
           the .current state lights up while the user is reading the
           tutorial (the HUD is hidden in the hero itself). Excluded
           from the index-based world tracker (XP claims, fish-warned,
           etc.) via the .hud-node-hero / .hud-segment-hero marker
           classes — see hudNodes / hudSegments selectors in main.js. -->
      <a href="#tutorial" class="hud-node hud-node-hero" data-section="tutorial">
        <span class="hud-dot"><span class="hud-glyph"><span class="hud-glyph-flip"><img class="world-icon" src="assets/images/world-00.png" alt="" aria-hidden="true"></span></span><span class="hud-secret-pip" aria-hidden="true"></span><span class="hud-secret2-pip" aria-hidden="true"></span><span class="hud-completionist-pip" aria-hidden="true"></span></span>
        <span class="hud-label">World 00</span>
        <div class="hud-world-tip" data-tip-for="tutorial" aria-hidden="true">Back to the start!</div>
      </a>
      <div class="hud-segment hud-segment-hero"></div>
      <a href="#about-zone-tag" class="hud-node" data-section="about">
        <span class="hud-dot"><span class="hud-glyph"><span class="hud-glyph-flip"><img class="world-icon" src="assets/images/world-01.png" alt="" aria-hidden="true"></span></span><span class="hud-secret-pip" aria-hidden="true"></span><span class="hud-secret2-pip" aria-hidden="true"></span><span class="hud-completionist-pip" aria-hidden="true"></span></span>
        <span class="hud-label">World 01</span>
        <div class="hud-world-tip" data-tip-for="about" aria-hidden="true">Select your character!</div>
      </a>
      <div class="hud-segment"></div>
      <a href="#pack-zone-tag" class="hud-node" data-section="pack">
        <span class="hud-dot"><span class="hud-glyph"><span class="hud-glyph-flip"><img class="world-icon" src="assets/images/world-02-palm-sun.png" alt="" aria-hidden="true"></span></span><span class="hud-secret-pip" aria-hidden="true"></span><span class="hud-secret2-pip" aria-hidden="true"></span><span class="hud-completionist-pip" aria-hidden="true"></span></span>
        <span class="hud-label">World 02</span>
        <div class="hud-world-tip" data-tip-for="pack" aria-hidden="true">Give each good girl a pat on her head</div>
      </a>
      <div class="hud-segment"></div>
      <a href="#skills-zone-tag" class="hud-node" data-section="skills">
        <span class="hud-dot"><span class="hud-glyph"><span class="hud-glyph-flip"><img class="world-icon" src="assets/images/world-03.png" alt="" aria-hidden="true"></span></span><span class="hud-secret-pip" aria-hidden="true"></span><span class="hud-secret2-pip" aria-hidden="true"></span><span class="hud-completionist-pip" aria-hidden="true"></span></span>
        <span class="hud-label">World 03</span>
        <div class="hud-world-tip" data-tip-for="skills" aria-hidden="true">Spend some skill coins!</div>
      </a>
      <div class="hud-segment"></div>
      <a href="#work-zone-tag" class="hud-node" data-section="work">
        <span class="hud-dot"><span class="hud-glyph"><img class="world-icon" src="assets/images/world-04.png" alt="" aria-hidden="true"></span><span class="hud-secret-pip" aria-hidden="true"></span><span class="hud-secret2-pip" aria-hidden="true"></span><span class="hud-completionist-pip" aria-hidden="true"></span></span>
        <span class="hud-label">World 04</span>
        <div class="hud-world-tip" data-tip-for="work" aria-hidden="true">Explore the depths but don't poke the fish!</div>
      </a>
      <div class="hud-segment"></div>
      <a href="#consuming-zone-tag" class="hud-node" data-section="consuming" data-scroll-target="consuming-zone-tag">
        <span class="hud-dot"><span class="hud-glyph"><span class="hud-glyph-flip"><img class="world-icon" src="assets/images/world-05.png" alt="" aria-hidden="true"></span></span><span class="hud-secret-pip" aria-hidden="true"></span><span class="hud-secret2-pip" aria-hidden="true"></span><span class="hud-completionist-pip" aria-hidden="true"></span></span>
        <span class="hud-label">World 05</span>
        <div class="hud-world-tip" data-tip-for="consuming" aria-hidden="true">Catch the sneaky UFO!</div>
      </a>
      <div class="hud-segment"></div>
      <a href="#boss-zone-tag" class="hud-node hud-boss" data-section="contact" data-scroll-target="boss-zone-tag">
        <span class="hud-dot"><span class="hud-glyph"><span class="hud-glyph-flip"><img class="world-icon" src="assets/images/world-06.png" alt="" aria-hidden="true"></span></span><span class="hud-secret-pip" aria-hidden="true"></span><span class="hud-secret2-pip" aria-hidden="true"></span><span class="hud-completionist-pip" aria-hidden="true"></span></span>
        <span class="hud-label">World 06 · FINAL BOSS</span>
      </a>
    </div>
  </div>

  <!-- ░░ NAV ░░ -->
  <nav class="site-nav" id="site-nav">
    <button class="nav-toggle" aria-label="Toggle menu" aria-expanded="false" aria-controls="primary-nav"><span></span><span></span><span></span></button>
    <a href="#hero" class="nav-logo">SUPER CMAK WORLD</a>
    <ul class="nav-links" id="primary-nav">
      <li><a href="#about-eyebrow" data-section="about"><span class="nav-emoji">🎮</span> MAIN CHARACTER</a></li>
      <li><a href="#pack-eyebrow" data-section="pack"><span class="nav-emoji">🐾</span> PARTY MEMBERS</a></li>
      <li><a href="#skills-eyebrow" data-section="skills"><span class="nav-emoji">✨</span> ABILITIES</a></li>
      <li><a href="#work-eyebrow" data-section="work"><span class="nav-emoji">📜</span> QUEST LOG</a></li>
      <li><a href="#consuming-eyebrow" data-section="consuming"><span class="nav-emoji">📡</span> NOW EXPLORING</a></li>
      <!-- ░░ AUDIO TOGGLES ░░ -->
      <!-- The MUSIC + SFX controls sit as the last group in the
           hamburger menu, separated from the page-nav links by a
           divider (border-top on the first item, .is-group-start).
           MUSIC mutes/plays every background theme (world BGMs, boss
           BGM, credits, W06 dungeon loop); SFX mutes/plays every
           one-shot effect (coin, stomp, menu blips, boss-hit stings,
           victory fanfare). Each persists independently in localStorage.
           They're <button>s (not <a>s) so clicking toggles audio WITHOUT
           closing the menu — the close-on-click handler in main.js only
           targets the nav's <a> links. The 🔊 / 🔇 glyph and the label
           text both swap off aria-pressed (glyph via CSS, label via
           wireAudioToggle() in main.js). -->
      <li class="nav-audio-li is-group-start">
        <button id="music-toggle" class="nav-audio-toggle" type="button"
                aria-label="Mute music" aria-pressed="false" title="Mute music">
          <span class="nav-emoji audio-glyph" aria-hidden="true">🎵<span class="audio-x">❌</span></span> <span class="nav-audio-label">MUSIC: ON</span>
        </button>
      </li>
      <li class="nav-audio-li">
        <button id="sfx-toggle" class="nav-audio-toggle" type="button"
                aria-label="Mute sound effects" aria-pressed="false" title="Mute sound effects">
          <span class="nav-emoji audio-glyph" aria-hidden="true">🔊<span class="audio-x">❌</span></span> <span class="nav-audio-label">SFX: ON</span>
        </button>
      </li>
      <!-- MOTION: self-select reduced motion regardless of the OS
           setting. Shares the .nav-audio-toggle shape so it lines up with
           MUSIC/SFX; "OFF" (aria-pressed → ❌ over the 🌀) means reduced
           motion is ON. Wired by wireAudioToggle('motion-toggle', …) in
           main.js, which reflects isReducedMotion() — the OS preference
           until the visitor picks — and persists the choice. -->
      <li class="nav-audio-li is-group-start">
        <button id="motion-toggle" class="nav-audio-toggle" type="button"
                aria-label="Reduce motion" aria-pressed="false" title="Reduce motion">
          <span class="nav-emoji audio-glyph" aria-hidden="true">🌀<span class="audio-x">❌</span></span> <span class="nav-audio-label">MOTION: ON</span>
        </button>
      </li>
    </ul>
  </nav>

  <!-- ░░ HERO ░░ -->
  <section id="hero">
    <div class="hero-grid-overlay"></div>
    <div class="hills hero-hills" aria-hidden="true">
      <span class="hill" style="--w:9%;--h:140px;--x:7%;--c:#48a01e;"></span>
      <span class="hill" style="--w:11%;--h:185px;--x:14%;--c:#3e9018;z-index:1;"></span>
      <span class="hill" style="--w:8%;--h:150px;--x:21%;--c:#52a828;"></span>
      <span class="hill" style="--w:8%;--h:150px;--x:79%;--c:#52a828;"></span>
      <span class="hill" style="--w:11%;--h:185px;--x:86%;--c:#3e9018;z-index:1;"></span>
      <span class="hill" style="--w:9%;--h:140px;--x:93%;--c:#48a01e;"></span>
    </div>
    <div class="hero-inner">
      <div class="hero-frame-wrap">
        <div class="hero-frame">
          <span class="frame-corner tl"></span>
          <span class="frame-corner tr"></span>
          <span class="frame-corner bl"></span>
          <span class="frame-corner br"></span>
          <img src="assets/images/chris-profile.webp" alt="Chris Makarsky" class="hero-photo" width="1200" height="901" fetchpriority="high" decoding="async">
        </div>
      </div>
      <div class="hero-text">
        <p class="hero-eyebrow">A New Production from</p>
        <h1 class="hero-name">Chris<br>Makarsky</h1>
        <ul class="hero-class">
          <li>Head of Product</li>
          <li>GSD Commander</li>
          <li>Crossword Puzzle Solver Extraordinaire</li>
        </ul>
      </div>
    </div>
    <div class="hero-floor" aria-hidden="true"></div>
    <div class="hero-monsters" aria-hidden="true">
      <div class="monster-group monster-group-1">
        <img src="assets/images/grass-monster-walking.gif" alt="" class="hero-monster">
      </div>
      <div class="monster-group monster-group-2">
        <img src="assets/images/grass-monster-walking.gif" alt="" class="hero-monster">
        <img src="assets/images/grass-monster-walking.gif" alt="" class="hero-monster">
        <img src="assets/images/grass-monster-walking.gif" alt="" class="hero-monster">
        <img src="assets/images/grass-monster-walking.gif" alt="" class="hero-monster">
      </div>
      <div class="monster-group monster-group-3">
        <img src="assets/images/grass-monster-walking.gif" alt="" class="hero-monster">
        <img src="assets/images/grass-monster-walking.gif" alt="" class="hero-monster">
      </div>
      <div class="monster-group monster-group-4">
        <img src="assets/images/grass-monster-walking.gif" alt="" class="hero-monster">
        <img src="assets/images/grass-monster-walking.gif" alt="" class="hero-monster">
        <img src="assets/images/grass-monster-walking.gif" alt="" class="hero-monster">
      </div>
    </div>
    <div class="scroll-hint">
      <span class="scroll-hint-text">▼ PRESS START TO CONTINUE ▼</span>
      <div class="hero-controls">
        <button type="button" class="select-btn" aria-label="Select button">SELECT</button>
        <a href="#hero-pipe-target" class="start-btn">START</a>
        <button type="button" class="nes-btn nes-btn-b" aria-label="B button">B</button>
        <button type="button" class="nes-btn nes-btn-a" aria-label="A button">A</button>
      </div>
    </div>
  </section>

  <!-- ░░ TUTORIAL ░░ -->
  <!-- "How to Play" interstitial between #hero and #about. The pipe
       drops out of the top edge of this section on START click and
       drops the player into the tutorial room (instead of straight
       into World 01). Background gradient goes navy → sky-blue so the
       bottom edge bleeds seamlessly into #about's sky. -->
  <section id="tutorial" class="section-tutorial">
    <!-- Floor strip — continuation of the hero's checker tile floor
         "into the distance". Sits flush against the hero's bottom
         edge, with straight (parallel) column lines suggesting tiles
         viewed from far away where the perspective convergence has
         flattened out. Fades to transparent at the bottom so the
         imaginary tiles dissolve into the night-sky navy. -->
    <div class="tutorial-floor-strip" aria-hidden="true"></div>

    <!-- Pipe + beer (relocated from #about — see comments in CSS).
         scroll-margin-top:0 on the frame puts #tutorial's top at the
         viewport top so the full pipe is in view after START. -->
    <div class="hero-pipe-frame" id="hero-pipe-target" aria-hidden="true">
      <img src="assets/images/pipe.webp" alt="" class="hero-pipe" width="320" height="600">
    </div>
    <span class="hero-pipe-beer" aria-hidden="true">🍻</span>
    <img src="assets/images/chris-profile.webp" alt="" class="hero-pipe-profile" aria-hidden="true" width="128" height="128" decoding="async">


    <!-- Drifting pixel clouds in the lower sky band — click to poof
         for +XP (same interaction as the W01 clouds). The split into
         .tut-cloud-drift (outer, runs the translateX drift) and
         .tut-cloud (inner, owns the click + poof) mirrors the W01
         .cloud-drift / .cloud-puff-elem layering so the poof's scale
         + blur don't snap the cloud back to its base CSS position. -->
    <div class="tutorial-clouds" aria-hidden="true">
      <div class="tut-cloud-drift variant-1"><span class="tut-cloud tut-cloud-1"></span></div>
      <div class="tut-cloud-drift variant-2"><span class="tut-cloud tut-cloud-2"></span></div>
      <div class="tut-cloud-drift variant-3"><span class="tut-cloud tut-cloud-3"></span></div>
    </div>

    <!-- World 00 zone tag. Dark navy biome → dark pill (.zone-tag-light).
         Special-cased in JS: hidden on the first pass down, only appears
         when the user scrolls back UP to the tutorial. -->
    <div class="zone-tag zone-tag-light" id="hero-zone-tag">
      <span class="zone-id"><span class="zone-emoji"><img class="world-icon" src="assets/images/world-00.png" alt="" aria-hidden="true"></span><span class="zone-text">WORLD<span class="zone-level">00</span></span></span>
    </div>

    <div class="container tutorial-container">
      <!-- Frame wraps the flip stage so the Shiggy portrait (a sibling of
           the rotating card) can overflow past the card's clip-path edge,
           and so the page-flip nav can sit beneath the card. -->
      <div class="tutorial-card-frame">
        <!-- 3D flipbook: WELCOME (page 1) flips to HUD GUIDE (page 2). The
             stage is the offset parent for the Shiggy portrait and carries
             the perspective; .tutorial-flip is the element that rotates. -->
        <div class="tutorial-flipbook" data-page="1">
          <div class="tutorial-flip">
            <!-- Page 1 (front): welcome + rules + Shiggy quote. -->
            <div class="tutorial-card flip-face flip-front fade-in">
              <div class="tutorial-card-header">
                <h2 class="tutorial-title">WELCOME TO<br>SUPER CMAK WORLD</h2>
              </div>
              <ul class="tutorial-rules">
                <li style="--rule-i:0"><span class="rule-arrow">►</span><span class="rule-text">ENJOY YOUR TIME</span></li>
                <li style="--rule-i:1" class="tutorial-rule-interact" tabindex="0" role="button" aria-label="Interact with everything — click to earn 10 XP"><span class="rule-arrow">►</span><span class="rule-text">INTERACT WITH EVERYTHING</span></li>
                <li style="--rule-i:2"><span class="rule-arrow">►</span><span class="rule-text">LIVE LAUGH <s>LOVE</s> LEVEL UP</span></li>
              </ul>
              <blockquote class="tutorial-quote">
                <p class="tutorial-quote-text">&ldquo;A delayed website may eventually be good,<br>a rushed website is bad forever.&rdquo;</p>
                <p class="tutorial-quote-author">— <span class="shiggy-attr" tabindex="0" role="button" aria-label="Shiggy M. — click to summon">Shiggy M.</span></p>
              </blockquote>
            </div>
            <!-- Page 2 (back): legend for the world-progress HUD pips. -->
            <div class="tutorial-card flip-face flip-back">
              <div class="tutorial-card-header">
                <h2 class="tutorial-title">HUD GUIDE</h2>
              </div>
              <ul class="tutorial-rules">
                <li style="--rule-i:0"><span class="rule-icon" aria-hidden="true">💠</span><span class="rule-text">SCROLLED THROUGH THE WORLD</span></li>
                <li style="--rule-i:1"><span class="rule-icon" aria-hidden="true">✅</span><span class="rule-text">COMPLETED MAIN TASK</span></li>
                <li style="--rule-i:2"><span class="rule-icon" aria-hidden="true">⭐</span><span class="rule-text">FOUND A SECRET INTERACTION</span></li>
                <li style="--rule-i:3"><span class="rule-icon" aria-hidden="true">🌟</span><span class="rule-text">FOUND A SECRET-ER ONE</span></li>
                <li style="--rule-i:4"><span class="rule-icon" aria-hidden="true">🏆</span><span class="rule-text">COMPLETED A SERIES OF.... SOMETHING</span></li>
              </ul>
            </div>
          </div>
          <img src="assets/images/shiggy.webp" alt="" class="shiggy-img" aria-hidden="true" width="56" height="56" decoding="async">
          <!-- Prev/next arrows flank the card, vertically centered. On
               narrow mobile they overlap the card edges (no room outside). -->
          <button type="button" class="flip-arrow flip-prev" aria-label="Previous page" disabled>◄</button>
          <button type="button" class="flip-arrow flip-next" aria-label="Next page">►</button>
        </div>
        <!-- Page dots sit centered beneath the card. -->
        <nav class="flip-nav" aria-label="Tutorial pages">
          <span class="flip-dots">
            <button type="button" class="flip-dot is-active" aria-label="Welcome page"></button>
            <button type="button" class="flip-dot" aria-label="HUD guide page"></button>
          </span>
        </nav>
      </div>
    </div>
  </section>

  <!-- ░░ ABOUT ░░ -->
  <section id="about" class="section-parchment">
    <div class="hills" aria-hidden="true">
      <span class="hill" style="--w:34%;--h:420px;--x:8%;--c:#48a01e;--d:0s;z-index:9"></span>
      <span class="hill" style="--w:44%;--h:330px;--x:30%;--c:#3e9018;--d:.4s;z-index:9"></span>
      <span class="hill" style="--w:38%;--h:350px;--x:54%;--c:#52a828;--d:.8s;z-index:9"></span>
      <span class="hill" style="--w:42%;--h:340px;--x:76%;--c:#3e9018;--d:1.2s;z-index:9"></span>
      <span class="hill" style="--w:30%;--h:410px;--x:97%;--c:#48a01e;--d:1.6s;z-index:9"></span>
    </div>
    <!-- World 01 focal tree. A single big cartoony tree whose trunk
         rises from behind the hills on the left and grows into a lush
         canopy that meets the clouds at the top of the section. Pure
         inline SVG (scales to span the full section height) styled to
         match the hills' flat-green-with-soft-shading look. z-index
         sits below the hill spans (z:2) so the trunk base reads as
         "planted behind the hills"; the centered .container content is
         far to the right of this left-anchored tree so they don't
         overlap. Decorative only → aria-hidden. -->
    <div class="world-tree" aria-hidden="true">
      <svg viewBox="0 0 600 1600" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <!-- Rounded-cylinder bark shading: lit on the left, shadowed
               on the right — same light direction as the canopy. -->
          <linearGradient id="wt-bark" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0"   stop-color="#9a6638"/>
            <stop offset="0.45" stop-color="#7c4a26"/>
            <stop offset="1"   stop-color="#583316"/>
          </linearGradient>
        </defs>

        <!-- ── Trunk + branches ─────────────────────────────────── -->
        <!-- Trunk planted on the LEFT. Its base stops well up inside the
             hill band (~y1400, NOT the section floor at y1600) so the
             root never peeks out below the hills as the tree sways. The
             limbs fan out from the crotch to support the broad crown. -->
        <g class="wt-trunk">
          <!-- Left-side limbs drawn BEFORE the trunk so they tuck behind
               it and read as emerging from behind the trunk. -->
          <path d="M192 742 C 140 690, 86 626, 44 556
                   C 58 558, 78 574, 96 598
                   C 140 656, 184 706, 226 748 Z" fill="#5f3818"/>
          <path d="M212 732 C 168 672, 132 596, 120 520
                   C 134 522, 148 540, 158 566
                   C 174 634, 206 690, 246 736 Z" fill="#6b3f20"/>
          <!-- Trunk (paints over the two left limbs above). -->
          <path d="M150 1400
                   C 150 1280, 135 1120, 178 980
                   C 205 860, 200 770, 198 690
                   C 250 730, 300 720, 350 680
                   C 322 780, 322 880, 306 1000
                   C 296 1180, 296 1300, 292 1400 Z" fill="url(#wt-bark)"/>
          <!-- Right + center limbs, in FRONT of the trunk; their lower
               stretches show beneath the dome. -->
          <path d="M320 706 C 420 612, 540 500, 644 392
                   C 652 406, 652 424, 644 440
                   C 548 532, 446 632, 352 720
                   C 338 730, 324 724, 320 706 Z" fill="#5f3818"/>
          <path d="M298 712 C 380 628, 470 500, 556 332
                   C 568 346, 570 366, 562 386
                   C 480 512, 412 612, 332 726
                   C 318 740, 302 736, 298 712 Z" fill="#6b3f20"/>
          <path d="M268 716 C 280 620, 296 540, 306 460
                   C 318 470, 322 500, 320 540
                   C 316 612, 304 668, 300 730 Z" fill="#6b3f20"/>
          <path d="M474 462 C 506 420, 526 372, 532 330
                   C 544 356, 540 400, 518 452 Z" fill="#74462a"/>
          <!-- Bark detail: left-edge highlight, a shadow groove, a knot. -->
          <path d="M150 1380 C 168 1260, 156 1110, 196 980
                   C 214 1140, 196 1300, 178 1380 Z"
                fill="#b07c4a" opacity="0.55"/>
          <path d="M262 1380 C 252 1240, 262 1060, 286 940
                   C 276 1120, 288 1300, 290 1380 Z"
                fill="#41260f" opacity="0.5"/>
          <ellipse cx="232" cy="1140" rx="20" ry="30" fill="#41260f" opacity="0.45"/>
          <ellipse cx="232" cy="1140" rx="9" ry="15" fill="#74462a"/>
        </g>

        <!-- ── Canopy (broad poofy dome) ─────────────────────────── -->
        <!-- A wide, symmetric, billowing crown centered ~x320 (well to
             the right of the left-planted trunk so the trunk reads as
             off to one side, like the reference). It spreads far past
             BOTH viewBox edges — the left side deliberately runs off
             the browser — and stays fairly shallow in height. Built
             from many overlapping clumps for a bumpy silhouette, then
             stippled with little leaf-poof dots for texture. -->
        <g class="wt-canopy">
          <!-- Back layer (deepest green) — broad dome + edge poofs that
               make the silhouette bumpy all the way around. -->
          <g fill="#2f7a14">
            <circle cx="320" cy="250" r="250"/>
            <circle cx="140" cy="300" r="175"/>
            <circle cx="500" cy="300" r="180"/>
            <circle cx="-10" cy="330" r="135"/>
            <circle cx="650" cy="330" r="145"/>
            <circle cx="225" cy="140" r="150"/>
            <circle cx="420" cy="140" r="150"/>
            <circle cx="320" cy="80"  r="130"/>
            <circle cx="60"  cy="250" r="115"/>
            <circle cx="590" cy="250" r="120"/>
            <circle cx="740" cy="332" r="90"/>
            <circle cx="-130" cy="340" r="80"/>
            <circle cx="180" cy="70"  r="70"/>
            <circle cx="280" cy="52"  r="60"/>
            <circle cx="380" cy="58"  r="66"/>
            <circle cx="472" cy="80"  r="72"/>
            <circle cx="110" cy="178" r="78"/>
            <circle cx="540" cy="168" r="78"/>
            <circle cx="30"  cy="292" r="72"/>
            <circle cx="612" cy="300" r="72"/>
            <circle cx="694" cy="362" r="70"/>
            <circle cx="-72" cy="360" r="66"/>
            <!-- extra right-side reach -->
            <circle cx="760" cy="298" r="132"/>
            <circle cx="824" cy="362" r="92"/>
            <circle cx="704" cy="216" r="106"/>
            <circle cx="700" cy="430" r="86"/>
            <circle cx="860" cy="320" r="64"/>
            <!-- bottom-left lobe — buries the far-left branch tip -->
            <circle cx="96"  cy="496" r="134"/>
            <circle cx="24"  cy="500" r="90"/>
            <circle cx="172" cy="512" r="102"/>
            <circle cx="58"  cy="566" r="80"/>
          </g>
          <!-- Mid layer (base green, matches the hills). -->
          <g fill="#48a01e">
            <circle cx="320" cy="262" r="212"/>
            <circle cx="150" cy="305" r="145"/>
            <circle cx="495" cy="305" r="150"/>
            <circle cx="5"   cy="335" r="108"/>
            <circle cx="635" cy="335" r="118"/>
            <circle cx="232" cy="158" r="125"/>
            <circle cx="415" cy="158" r="125"/>
            <circle cx="322" cy="108" r="108"/>
            <circle cx="80"  cy="255" r="95"/>
            <circle cx="575" cy="250" r="100"/>
            <circle cx="715" cy="338" r="78"/>
            <circle cx="-100" cy="346" r="70"/>
            <circle cx="186" cy="96"  r="58"/>
            <circle cx="300" cy="80"  r="56"/>
            <circle cx="400" cy="86"  r="58"/>
            <circle cx="470" cy="112" r="58"/>
            <circle cx="120" cy="206" r="62"/>
            <circle cx="525" cy="196" r="60"/>
            <!-- extra right-side reach -->
            <circle cx="752" cy="310" r="112"/>
            <circle cx="810" cy="362" r="80"/>
            <circle cx="702" cy="228" r="86"/>
            <circle cx="694" cy="424" r="72"/>
            <!-- bottom-left lobe -->
            <circle cx="102" cy="494" r="112"/>
            <circle cx="36"  cy="500" r="78"/>
            <circle cx="168" cy="506" r="88"/>
            <circle cx="64"  cy="560" r="66"/>
          </g>
          <!-- Light layer (sun-struck clumps across the upper dome). -->
          <g fill="#6cc23a">
            <circle cx="250" cy="160" r="86"/>
            <circle cx="400" cy="160" r="86"/>
            <circle cx="175" cy="240" r="68"/>
            <circle cx="465" cy="235" r="70"/>
            <circle cx="320" cy="126" r="78"/>
            <circle cx="110" cy="285" r="58"/>
            <circle cx="545" cy="280" r="60"/>
            <circle cx="320" cy="236" r="70"/>
            <circle cx="40"  cy="300" r="50"/>
            <circle cx="615" cy="300" r="52"/>
            <!-- extra right-side sun clumps -->
            <circle cx="700" cy="250" r="62"/>
            <circle cx="766" cy="306" r="52"/>
            <!-- bottom-left highlight clumps -->
            <circle cx="96"  cy="452" r="58"/>
            <circle cx="150" cy="476" r="46"/>
          </g>
          <!-- Brightest specks. -->
          <g fill="#8ad657">
            <circle cx="230" cy="134" r="28"/>
            <circle cx="362" cy="130" r="26"/>
            <circle cx="300" cy="90"  r="22"/>
            <circle cx="190" cy="206" r="20"/>
            <circle cx="440" cy="150" r="20"/>
            <circle cx="150" cy="266" r="18"/>
          </g>
          <!-- Leaf-poof texture: pale stipple scattered like the
               reference's little bubbles. -->
          <g fill="#7ecb44" opacity="0.7">
            <circle cx="200" cy="180" r="14"/><circle cx="270" cy="150" r="12"/>
            <circle cx="340" cy="176" r="14"/><circle cx="410" cy="200" r="12"/>
            <circle cx="160" cy="300" r="12"/><circle cx="250" cy="262" r="14"/>
            <circle cx="330" cy="290" r="12"/><circle cx="420" cy="262" r="14"/>
            <circle cx="480" cy="192" r="12"/><circle cx="500" cy="262" r="14"/>
            <circle cx="540" cy="310" r="12"/><circle cx="110" cy="240" r="12"/>
            <circle cx="580" cy="222" r="12"/><circle cx="300" cy="212" r="10"/>
            <circle cx="372" cy="120" r="10"/><circle cx="232" cy="230" r="12"/>
            <circle cx="452" cy="300" r="12"/><circle cx="150" cy="182" r="10"/>
            <circle cx="392" cy="300" r="12"/><circle cx="290" cy="330" r="12"/>
            <circle cx="522" cy="240" r="10"/><circle cx="610" cy="330" r="12"/>
            <circle cx="80"  cy="300" r="10"/><circle cx="642" cy="302" r="10"/>
            <circle cx="700" cy="298" r="12"/><circle cx="744" cy="342" r="12"/>
            <circle cx="668" cy="258" r="12"/><circle cx="788" cy="358" r="10"/>
            <circle cx="724" cy="404" r="12"/><circle cx="810" cy="332" r="10"/>
            <circle cx="92" cy="470" r="12"/><circle cx="142" cy="500" r="12"/>
            <circle cx="48" cy="494" r="10"/><circle cx="112" cy="540" r="10"/>
          </g>
          <!-- Darker stipple for depth between the poofs. -->
          <g fill="#1f5e0d" opacity="0.4">
            <circle cx="292" cy="200" r="12"/><circle cx="380" cy="232" r="12"/>
            <circle cx="200" cy="262" r="12"/><circle cx="462" cy="250" r="12"/>
            <circle cx="332" cy="252" r="12"/><circle cx="140" cy="262" r="12"/>
            <circle cx="540" cy="262" r="12"/><circle cx="252" cy="312" r="12"/>
            <circle cx="424" cy="322" r="12"/><circle cx="600" cy="300" r="12"/>
            <circle cx="100" cy="282" r="10"/><circle cx="190" cy="140" r="10"/>
            <circle cx="470" cy="172" r="10"/>
            <circle cx="726" cy="322" r="12"/><circle cx="768" cy="360" r="10"/>
            <circle cx="688" cy="300" r="10"/>
            <circle cx="120" cy="486" r="12"/><circle cx="66" cy="510" r="10"/>
          </g>
          <!-- Underside shadow where the dome sits on the branches. -->
          <g fill="#1f5e0d" opacity="0.38">
            <circle cx="220" cy="460" r="120"/>
            <circle cx="380" cy="460" r="125"/>
            <circle cx="520" cy="420" r="100"/>
            <circle cx="120" cy="420" r="95"/>
            <circle cx="600" cy="402" r="85"/>
            <circle cx="702" cy="404" r="82"/>
            <circle cx="776" cy="384" r="70"/>
          </g>
        </g>
      </svg>
    </div>
    <!-- Cloud elements are spawned by JS so each cloud is its own DOM
         node — needed so hover/click target individual clouds instead
         of the whole tiled strip. -->
    <div class="clouds" aria-hidden="true"></div>
    <!-- Single flying koopa hovers in the upper-half of the section.
         Click → spiral out of the viewport + smb3_kick SFX + 100 XP,
         then returns after ~10s for the cycle to repeat. JS in main.js
         owns the click + animation-cycle behavior. data-source-idx
         tells the XP toast which HUD dot to anchor to (0 = W01). -->
    <button type="button" class="koopa-floater koopa-floater-left" data-source-idx="0" aria-label="Knock down the koopa">
      <img src="assets/images/koopa-green.webp" alt="" draggable="false">
      <span class="koopa-bubble" aria-hidden="true"></span>
    </button>
    <div class="zone-tag" id="about-zone-tag">
      <span class="zone-id"><span class="zone-emoji"><img class="world-icon" src="assets/images/world-01.png" alt="" aria-hidden="true"></span><span class="zone-text">WORLD<span class="zone-level">01</span></span></span>
    </div>
    <div class="container">
      <div class="section-header">
        <span class="section-eyebrow" id="about-eyebrow"><span class="eyebrow-row"><span class="eyebrow-emoji">🎮</span><span class="eyebrow-text">Main character</span></span></span>
        <h2>About Chris</h2>
      </div>
      <div class="about-layout">
        <div class="about-text fade-in">
          <p>Reluctant internet user, bike-lane crusader, smart-home tinkerer, occasional marathon runner, Young Link main. Carries strong opinions about city development &amp; the folly of sushi-centric burritos.</p>
          <p>Currently engaged as Director &amp; Head of Product at <strong>Wisdom Panel</strong>, a pet genomics company that helps people understand what makes their animals so wonderfully, uniquely them. This is an awesome role that grants him +200 in both technology and dog-specific relations.</p>
          <!-- Both the location and its flavor note are character-
               dependent — JS rewrites .about-location and
               .about-location-note on every selection change. Initial
               values match CHARACTERS[0] (profile). -->
          <p><strong class="about-label">Last-known location</strong><span class="about-location">Long Beach, CA</span> — <span class="about-location-note">sun reliably good, street tacos abundant.</span></p>
          <p><strong class="about-label">Ongoing side quest</strong>Nightly boss fight against two large, hairy adversaries for the right to a non-zero share of the bed. Progress: limited.</p>
          <br>
        </div>
        <!-- The frame wraps the card so per-card layout vars (--tilt
             / --shift-y / max-width) can target a single container
             without leaking into the card's own transform. The reset
             link sits as a sibling of the card (below), absolute-
             positioned to the frame's top-right edge — above the
             card so it's discoverable without competing with the
             card's photo or selector controls. -->
        <div class="char-card-frame">
        <div class="char-card fade-in no-fade">
          <!-- Character selector — < steps to the previous photo in
               CHARACTERS order, > steps to the next (wraps at either
               end); CONFIRM CHARACTER commits the current selection
               (photo flips from grayscale → color, persists to
               localStorage, awards a one-time +1000 XP bonus per
               session). JS in main.js owns all behavior. -->
          <div class="char-selector">
            <button type="button" class="select-btn char-prev-btn" aria-label="Previous character">&lt;</button>
            <button type="button" class="select-btn char-confirm-btn" aria-label="Confirm character">CONFIRM</button>
            <button type="button" class="select-btn char-next-btn" aria-label="Next character">&gt;</button>
          </div>
          <div class="char-photo-wrap">
            <!-- Inline background-image matches the initial selection
                 (CHARACTERS[0] = chris-profile) so first paint doesn't
                 flicker between the CSS default and the JS-rendered
                 photo. JS swaps both background-image and position on
                 every render. -->
            <div class="char-photo cmak-photo" role="img" aria-label="cmak" style="background-image: url('assets/images/chris-profile.webp'); background-position: 25% 2%;"></div>
            <!-- Level = the character's age. JS rewrites this on every
                 character change; initial value matches CHARACTERS[0]
                 (profile = 40) so first paint doesn't flash. -->
            <div class="char-level">LV. 40</div>
          </div>
          <div class="char-info">
            <div class="char-header">
              <h3 class="char-name">cmak</h3>
            </div>
            <!-- Single descriptor line — the current character's 3
                 descriptors (each CHARACTERS entry owns its own set).
                 JS overwrites this text on every character change;
                 initial content matches CHARACTERS[0] and the hero's
                 first-paint list so the UIs are in sync at load. -->
            <p class="char-descriptors">Head of Product · GSD Commander · Crossword Puzzle Solver Extraordinaire</p>
            <!-- Initial stat values match CHARACTERS[0] (chris-profile)
                 so first paint doesn't flash a different number before
                 JS hydrates. renderSelection() rewrites data-width and
                 .stat-val text on every character change. -->
            <div class="stats">
              <div class="stat-row">
                <span class="stat-label">STR</span>
                <div class="stat-bar"><div class="stat-fill" data-width="85"></div></div>
                <span class="stat-val">85</span>
              </div>
              <div class="stat-row">
                <span class="stat-label">WIS</span>
                <div class="stat-bar"><div class="stat-fill" data-width="90"></div></div>
                <span class="stat-val">90</span>
              </div>
              <div class="stat-row">
                <span class="stat-label">CHR</span>
                <div class="stat-bar"><div class="stat-fill" data-width="96"></div></div>
                <span class="stat-val">96</span>
              </div>
              <div class="stat-row">
                <span class="stat-label">ZZZ</span>
                <div class="stat-bar"><div class="stat-fill" data-width="41"></div></div>
                <span class="stat-val">41</span>
              </div>
            </div>
            <p class="char-bio">Opinionated product person. Crunchy taco devotee. On the internet since the dial-up era and still not sold on this whole social engagement online thing.</p>
          </div>
        </div>
        <!-- Reset link sits ABOVE the card on its top-right edge.
             Anchored to the frame's top-right via position:absolute
             (the frame has position:relative); DOM-placed AFTER the
             card so it tabs LAST inside the frame — primary card
             controls (< / CONFIRM / >) come first in tab order,
             with the destructive RESET as the final stop. Hidden
             by default (display:none in CSS) — only revealed once
             the card is in a COMMITTED state (CSS uses :has() to
             match .char-card.is-committed; the JS layer toggles
             that class on CONFIRM and clears it on RESET). -->
        <button type="button" class="char-reset-link" aria-label="Reset character selection">reset</button>
        </div>
      </div>
    </div>
  </section>

  <!-- ░░ THE PACK ░░ -->
  <section id="pack" class="section-parchment">
    <div class="desert-sun-track" aria-hidden="true">
      <div class="desert-sun-rail">
        <div class="desert-sun-flight">
          <div class="desert-sun">
            <div class="desert-sun-rays"></div>
            <div class="desert-sun-body">
              <div class="desert-sun-brow desert-sun-brow-l"></div>
              <div class="desert-sun-brow desert-sun-brow-r"></div>
              <div class="desert-sun-eye desert-sun-eye-l"></div>
              <div class="desert-sun-eye desert-sun-eye-r"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="sand-particles" aria-hidden="true"><span></span><span></span></div>
    <div class="zone-tag" id="pack-zone-tag">
      <span class="zone-id"><span class="zone-emoji"><img class="world-icon" src="assets/images/world-02-palm-sun.png" alt="" aria-hidden="true"></span><span class="zone-text">WORLD<span class="zone-level">02</span></span></span>
    </div>
    <div class="container">
      <div class="section-header">
        <span class="section-eyebrow" id="pack-eyebrow"><span class="eyebrow-row"><span class="eyebrow-emoji">🐾</span><span class="eyebrow-text">Party members</span></span></span>
        <h2>Who I'm With</h2>
        <p class="pack-sub">Two GSDs — one is a shy princess, the other is everyone's best friend. Both of them would love some more cheese. And both will be following you around no matter what.</p>
      </div>
      <div class="pack-grid">

        <!-- LANA -->
        <div class="char-card fade-in no-fade">
          <div class="char-photo-wrap">
            <div class="char-photo lana-photo"><img src="assets/images/dog-desk.webp" alt="Lana" draggable="false" loading="lazy" decoding="async"></div>
            <div class="char-level">LV. 6</div>
          </div>
          <div class="char-info">
            <div class="char-header">
              <h3 class="char-name">Lana</h3>
              <span class="char-class">Head of Security</span>
            </div>
            <div class="stats">
              <div class="stat-row">
                <span class="stat-label">STR</span>
                <div class="stat-bar"><div class="stat-fill" data-width="55"></div></div>
                <span class="stat-val">55</span>
              </div>
              <div class="stat-row">
                <span class="stat-label">WIS</span>
                <div class="stat-bar"><div class="stat-fill" data-width="60"></div></div>
                <span class="stat-val">60</span>
              </div>
              <div class="stat-row">
                <span class="stat-label">CHR</span>
                <div class="stat-bar"><div class="stat-fill" data-width="90"></div></div>
                <span class="stat-val">90</span>
              </div>
              <div class="stat-row">
                <span class="stat-label">ZZZ</span>
                <div class="stat-bar"><div class="stat-fill" data-width="82"></div></div>
                <span class="stat-val">82</span>
              </div>
            </div>
            <p class="char-bio">Veteran of countless couch standoffs and unsolicited performance reviews. Maintains an impeccable deadpan.</p>
          </div>
        </div>

        <!-- POTATO -->
        <div class="char-card fade-in no-fade">
          <div class="char-photo-wrap">
            <div class="char-photo potato-photo"><img src="assets/images/dog-potato.webp" alt="Potato" draggable="false" loading="lazy" decoding="async"></div>
            <div class="char-level">LV. 1</div>
          </div>
          <div class="char-info">
            <div class="char-header">
              <h3 class="char-name">Potato</h3>
              <span class="char-class">Junior Associate, Chaos</span>
            </div>
            <div class="stats">
              <div class="stat-row">
                <span class="stat-label">STR</span>
                <div class="stat-bar"><div class="stat-fill" data-width="25"></div></div>
                <span class="stat-val">25</span>
              </div>
              <div class="stat-row">
                <span class="stat-label">WIS</span>
                <div class="stat-bar"><div class="stat-fill" data-width="40"></div></div>
                <span class="stat-val">40</span>
              </div>
              <div class="stat-row">
                <span class="stat-label">CHR</span>
                <div class="stat-bar"><div class="stat-fill" data-width="99"></div></div>
                <span class="stat-val">99</span>
              </div>
              <div class="stat-row">
                <span class="stat-label">ZZZ</span>
                <div class="stat-bar"><div class="stat-fill" data-width="90"></div></div>
                <span class="stat-val">90</span>
              </div>
            </div>
            <p class="char-bio">Boundless. Enthusiastic. Forgets she already ate breakfast. Frequently distracted by birds, squirrels, and her own reflection.</p>
          </div>
        </div>

        <!-- Oasis palms — decorative trees flanking the card pair.
             Placed AFTER the cards in DOM so .pack-grid's
             :nth-child(1) / :nth-child(2) rules still target
             Lana / Potato (tilt, z-stacking, shift offsets).
             Each .pack-palm sits absolutely-positioned; z-index:-1
             (within pack-grid's `isolation: isolate` stacking
             context) keeps them BEHIND the cards so trunk bases
             vanish behind the card frames. The inner pair stands
             tall above the cards; the outer pair peeks from beside
             the photos at mid-card height. -->
        <div class="pack-palm pack-palm--outer-left"  aria-hidden="true"></div>
        <div class="pack-palm pack-palm--inner-left"  aria-hidden="true"></div>
        <div class="pack-palm pack-palm--inner-right" aria-hidden="true"></div>
        <div class="pack-palm pack-palm--outer-right" aria-hidden="true"></div>

      </div>

      <!-- ▰▰▰ ASSETS ARCHIVE ▰▰▰ -->
      <div class="recon-archive">
        <div class="recon-header">
          <h3 class="recon-title">Archives</h3>
          <p class="recon-sub">Earlier dispatches from forward observers documenting these party members in their natural habitats. Threat level assessed as <b>stinkers</b>.</p>
        </div>
        <div class="recon-grid">
          <figure class="recon-card fade-in">
            <div class="recon-photo-wrap">
              <img src="assets/images/dogs/IMG_3249.webp" alt="Lana perched alert on an ottoman, ears up, looking sideways at the camera." class="recon-photo p-3249" loading="lazy" width="1600" height="1066">
            </div>
            <figcaption class="recon-cap"><span class="recon-file">MEMORY/1638</span><span class="recon-tag">PERIMETER CHECK</span></figcaption>
          </figure>
          <figure class="recon-card fade-in">
            <div class="recon-photo-wrap">
              <img src="assets/images/dogs/IMG_5060.webp" alt="Lana and Potato lounging on a couch over a binary-pattern blanket." class="recon-photo p-5060" loading="lazy" width="1600" height="1066">
            </div>
            <figcaption class="recon-cap"><span class="recon-file">MEMORY/3728</span><span class="recon-tag">BINARY OPS</span></figcaption>
          </figure>
          <figure class="recon-card fade-in">
            <div class="recon-photo-wrap">
              <img src="assets/images/dogs/IMG_5155.webp" alt="Lana barking with mouth wide while Potato looks on, a Mario Kart game running on the TV behind them." class="recon-photo p-5155" loading="lazy" width="1600" height="1066">
            </div>
            <figcaption class="recon-cap"><span class="recon-file">MEMORY/3785</span><span class="recon-tag">KART INCURSION</span></figcaption>
          </figure>
          <figure class="recon-card fade-in">
            <div class="recon-photo-wrap">
              <img src="assets/images/dogs/IMG_5328.webp" alt="Close-up of Lana and Potato side-by-side, sitting against a terracotta-tiled corner." class="recon-photo p-5328" loading="lazy" width="1600" height="1066">
            </div>
            <figcaption class="recon-cap"><span class="recon-file">MEMORY/3924</span><span class="recon-tag">CORNER DEBRIEF</span></figcaption>
          </figure>
          <figure class="recon-card fade-in">
            <div class="recon-photo-wrap">
              <img src="assets/images/dogs/IMG_5771.webp" alt="Potato lounging on a sunlit patch of artificial turf, ears alert." class="recon-photo p-5771" loading="lazy" width="1600" height="1066">
            </div>
            <figcaption class="recon-cap"><span class="recon-file">MEMORY/4593</span><span class="recon-tag">SUN POST</span></figcaption>
          </figure>
          <figure class="recon-card fade-in">
            <div class="recon-photo-wrap">
              <img src="assets/images/dogs/IMG_5910.webp" alt="Lana and Potato charging through a turquoise pool, water splashing around them." class="recon-photo p-5910" loading="lazy" width="1600" height="1066">
            </div>
            <figcaption class="recon-cap"><span class="recon-file">MEMORY/4909</span><span class="recon-tag">POOL RAID</span></figcaption>
          </figure>
          <figure class="recon-card fade-in">
            <div class="recon-photo-wrap">
              <img src="assets/images/dogs/IMG_4325.webp" alt="A German Shepherd lounging on a black leather recliner, ears up and wearing a red collar, looking directly at the camera." class="recon-photo p-4325" loading="lazy" width="1600" height="1066">
            </div>
            <figcaption class="recon-cap"><span class="recon-file">MEMORY/2671</span><span class="recon-tag">RECLINER COMMAND</span></figcaption>
          </figure>
          <figure class="recon-card fade-in">
            <div class="recon-photo-wrap">
              <img src="assets/images/dogs/IMG_5644.webp" alt="Two German Shepherds in a dusty outdoor clearing — one standing alert, one lying in the dirt behind." class="recon-photo p-5644" loading="lazy" width="1600" height="1066">
            </div>
            <figcaption class="recon-cap"><span class="recon-file">MEMORY/4344</span><span class="recon-tag">DUSTY OUTPOST</span></figcaption>
          </figure>
          <figure class="recon-card fade-in">
            <div class="recon-photo-wrap">
              <img src="assets/images/dogs/IMG_5763.webp" alt="Lana sniffing the grass while Potato walks past in a sunlit park lawn." class="recon-photo p-5763" loading="lazy" width="1600" height="1066">
            </div>
            <figcaption class="recon-cap"><span class="recon-file">MEMORY/4581</span><span class="recon-tag">FIELD RECON</span></figcaption>
          </figure>
          <figure class="recon-card fade-in">
            <div class="recon-photo-wrap">
              <img src="assets/images/dogs/IMG_2289.webp" alt="A German Shepherd lying in shallow rippling river water with sunlight on the surface." class="recon-photo p-2289" loading="lazy" width="1600" height="1066">
            </div>
            <figcaption class="recon-cap"><span class="recon-file">MEMORY/40</span><span class="recon-tag">SHALLOWS RECON</span></figcaption>
          </figure>
          <figure class="recon-card fade-in">
            <div class="recon-photo-wrap">
              <img src="assets/images/dogs/IMG_3198.webp" alt="A German Shepherd flopped on its back across a black leather couch, belly up." class="recon-photo p-3198" loading="lazy" width="1600" height="1066">
            </div>
            <figcaption class="recon-cap"><span class="recon-file">MEMORY/1455</span><span class="recon-tag">BELLY DEPLOY</span></figcaption>
          </figure>
          <figure class="recon-card fade-in">
            <div class="recon-photo-wrap">
              <img src="assets/images/dogs/IMG_5807.webp" alt="Lana and Potato curled up together asleep on a long black couch in front of a bookshelf." class="recon-photo p-5807" loading="lazy" width="1600" height="1066">
            </div>
            <figcaption class="recon-cap"><span class="recon-file">MEMORY/4682</span><span class="recon-tag">OPERATION CUDDLE</span></figcaption>
          </figure>
          <figure class="recon-card fade-in">
            <div class="recon-photo-wrap">
              <img src="assets/images/dogs/IMG_5927.webp" alt="A German Shepherd curled up asleep under a wooden desk, head tucked between paws." class="recon-photo p-5927" loading="lazy" width="1600" height="1066">
            </div>
            <figcaption class="recon-cap"><span class="recon-file">MEMORY/4985</span><span class="recon-tag">DESK BUNKER</span></figcaption>
          </figure>

          <!-- Oasis palms — extends the pack-grid grove down into the
               recon photo pile so the whole #pack section reads as one
               continuous desert clearing. Placed AFTER the 12
               recon-cards in DOM so .recon-grid's :nth-child(12n+N)
               tilt rules (which target the photos by position) still
               match the right cards. -->
          <div class="recon-palm recon-palm--outer-left"  aria-hidden="true"></div>
          <div class="recon-palm recon-palm--inner-left"  aria-hidden="true"></div>
          <div class="recon-palm recon-palm--inner-right" aria-hidden="true"></div>
          <div class="recon-palm recon-palm--outer-right" aria-hidden="true"></div>
        </div>
        <div class="recon-nav-bar">
          <button class="recon-nav recon-nav-prev" type="button" aria-label="Previous photo"><span class="recon-nav-label">&lt;PREV</span></button>
          <button class="recon-nav recon-nav-next" type="button" aria-label="Next photo"><span class="recon-nav-label">NEXT&gt;</span></button>
        </div>
        <!-- Mobile-only close affordance for a zoomed photo. Desktop
             closes via Escape / click-away; on a phone an explicit ✕
             is clearer than tapping the photo again. CSS keeps it
             hidden until a card is zoomed and only on mobile widths. -->
        <button class="recon-close" type="button" aria-label="Close enlarged photo"><span class="recon-close-x">&#10005;</span></button>
      </div>

    </div>
    <!-- Detailed PNG palm pairs standing along the dune ridge, in FRONT
         of the distant SVG silhouette grove (z-index in CSS). The pairs
         are spawned by the grove JS — one per silhouette clump, so each
         foreground pair lines up with a background cluster. Within a
         pair the two palms tilt away from each other. Decorative only. -->
    <div class="pack-grove" aria-hidden="true"></div>
  </section>

  <!-- ░░ SKILLS ░░ -->
  <section id="skills" class="section-forest">
    <!-- Ambient 🌮 "feed the bats" cursor — scoped to the top 20% of the
         cave (where the bats cluster) so the taco cursor doesn't bleed down
         over the skill tree + pool below. Sits behind all content (z:0), so
         stalactites, bats, and the skill tree keep their own cursors and
         interactivity. CSS: .cave-taco-zone. -->
    <div class="cave-taco-zone" aria-hidden="true"></div>
    <div class="cave-drips" aria-hidden="true"><span></span><span></span></div>
    <!-- Drips that fall through the open descent at the bottom of the
         caves and splash into World 04's water at the section's bottom
         edge (the waterline). JS: initSurfaceDrips. -->
    <div class="surface-drips" aria-hidden="true"></div>
    <div class="bat-cave" aria-hidden="true">
      <!-- Top cluster — dense traffic weaving through the stalactites -->
      <div class="bat-track bt-1"><div class="bat-bob"><div class="bat"><span class="bat-frame spread"></span><span class="bat-frame tucked"></span></div></div></div>
      <div class="bat-track bt-2 leftward"><div class="bat-bob"><div class="bat"><span class="bat-frame spread"></span><span class="bat-frame tucked"></span></div></div></div>
      <div class="bat-track bt-8 leftward"><div class="bat-bob"><div class="bat"><span class="bat-frame spread"></span><span class="bat-frame tucked"></span></div></div></div>
      <div class="bat-track bt-9"><div class="bat-bob"><div class="bat"><span class="bat-frame spread"></span><span class="bat-frame tucked"></span></div></div></div>
      <div class="bat-track bt-10 leftward"><div class="bat-bob"><div class="bat"><span class="bat-frame spread"></span><span class="bat-frame tucked"></span></div></div></div>
      <div class="bat-track bt-11"><div class="bat-bob"><div class="bat"><span class="bat-frame spread"></span><span class="bat-frame tucked"></span></div></div></div>
      <div class="bat-track bt-12 leftward"><div class="bat-bob"><div class="bat"><span class="bat-frame spread"></span><span class="bat-frame tucked"></span></div></div></div>
      <div class="bat-track bt-13"><div class="bat-bob"><div class="bat"><span class="bat-frame spread"></span><span class="bat-frame tucked"></span></div></div></div>
      <!-- Mid + lower cave — sparser stragglers -->
      <div class="bat-track bt-3"><div class="bat-bob"><div class="bat"><span class="bat-frame spread"></span><span class="bat-frame tucked"></span></div></div></div>
      <div class="bat-track bt-4 leftward"><div class="bat-bob"><div class="bat"><span class="bat-frame spread"></span><span class="bat-frame tucked"></span></div></div></div>
      <div class="bat-track bt-5"><div class="bat-bob"><div class="bat"><span class="bat-frame spread"></span><span class="bat-frame tucked"></span></div></div></div>
      <div class="bat-track bt-6 leftward"><div class="bat-bob"><div class="bat"><span class="bat-frame spread"></span><span class="bat-frame tucked"></span></div></div></div>
      <div class="bat-track bt-7"><div class="bat-bob"><div class="bat"><span class="bat-frame spread"></span><span class="bat-frame tucked"></span></div></div></div>
      <!-- Deep cave — rare drifters past the mid zone; ensures bat presence
           all the way down to the Professional Skills branch -->
      <div class="bat-track bt-14 leftward"><div class="bat-bob"><div class="bat"><span class="bat-frame spread"></span><span class="bat-frame tucked"></span></div></div></div>
      <div class="bat-track bt-15"><div class="bat-bob"><div class="bat"><span class="bat-frame spread"></span><span class="bat-frame tucked"></span></div></div></div>
      <div class="bat-track bt-16 leftward"><div class="bat-bob"><div class="bat"><span class="bat-frame spread"></span><span class="bat-frame tucked"></span></div></div></div>
      <div class="bat-track bt-17"><div class="bat-bob"><div class="bat"><span class="bat-frame spread"></span><span class="bat-frame tucked"></span></div></div></div>
      <div class="bat-track bt-18 leftward"><div class="bat-bob"><div class="bat"><span class="bat-frame spread"></span><span class="bat-frame tucked"></span></div></div></div>
      <div class="bat-track bt-19"><div class="bat-bob"><div class="bat"><span class="bat-frame spread"></span><span class="bat-frame tucked"></span></div></div></div>
    </div>
    <div class="zone-tag zone-tag-light" id="skills-zone-tag">
      <span class="zone-id"><span class="zone-emoji"><img class="world-icon" src="assets/images/world-03.webp" alt="" aria-hidden="true" loading="lazy"></span><span class="zone-text">WORLD<span class="zone-level">03</span></span></span>
    </div>
    <div class="container">
      <div class="section-header light">
        <span class="section-eyebrow" id="skills-eyebrow"><span class="eyebrow-row"><span class="eyebrow-emoji">✨</span><span class="eyebrow-text">Abilities</span></span></span>
        <h2>What I'm Into</h2>
        <p class="section-sub">Here are the powers &amp; abilities with the most skill coins invested during this current playthrough. Feel free to invest more coins or re-spec&mdash; but unfortunately these can't be fully reset outside of re-starting the play file.</p>
      </div>
      <div class="powers-tree">

        <!-- ─── Branch 1 · Hobbies & Obsessions ─── -->
        <div class="power-branch fade-in">
          <button class="branch-header" type="button" aria-expanded="true" aria-controls="branch-1-list">
            <span class="branch-icon">🎮</span>
            <span class="branch-name">Hobbies &amp; Obsessions</span>
            <span class="branch-pts">87 PTS</span>
            <span class="branch-toggle" aria-hidden="true">▾</span>
          </button>
          <div class="powers-panel" id="branch-1-list">
          <div class="powers-list">

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🚴</span>
                <span class="power-name">Biking</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="40"></div></div></div>
                <span class="power-val">4</span>
              </div>
              <p class="power-desc">Two wheels &gt; four when the route allows. Most errands handled by bike.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">✏️</span>
                <span class="power-name">Crosswords</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="90"></div></div></div>
                <span class="power-val">9</span>
              </div>
              <p class="power-desc">Daily. Non-negotiable. NYT Thursday is the sweet spot — hard enough to hurt, solvable enough to feel like a genius.</p>
            </div>

            <div class="power-item hated">
              <div class="power-header">
                <span class="power-icon">🎰</span>
                <span class="power-name">Crypto</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="50"></div></div></div>
                <span class="power-val">-5</span>
              </div>
              <p class="power-desc">Read the white papers. Lived through three bubbles. Owns zero JPEGs. Net negative on the species.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🤔</span>
                <span class="power-name">Emoji Usage</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="100"></div></div></div>
                <span class="power-val">10</span>
              </div>
              <p class="power-desc">Unceasing &amp; relentless; present in every group chat and each moment of mild contemplation. 🤔</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🐕</span>
                <span class="power-name">GSDs</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="100"></div></div></div>
                <span class="power-val">10</span>
              </div>
              <p class="power-desc">The best dog breed, and not up for debate. Lana and Potato are living proof of that.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🪴</span>
                <span class="power-name">House Plants</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="50"></div></div></div>
                <span class="power-val">5</span>
              </div>
              <p class="power-desc">Slowly becoming the kind of person who has opinions about light levels and watering schedules.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🎵</span>
                <span class="power-name">Indie Rock</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="70"></div></div></div>
                <span class="power-val">7</span>
              </div>
              <p class="power-desc">Strokes, Interpol, Yeah Yeah Yeahs, Arcade Fire, LCD. The era when guitars came back and skinny jeans took over.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🎸</span>
                <span class="power-name">Jam Bands</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="60"></div></div></div>
                <span class="power-val">6</span>
              </div>
              <p class="power-desc">YEM. Slave. Divided Sky. Tweezer. Buds. Hell yes.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🧱</span>
                <span class="power-name">LEGO</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="80"></div></div></div>
                <span class="power-val">8</span>
              </div>
              <p class="power-desc">Building official sets and MOCs for over four decades. System brick love forever.</p>
            </div>

            <div class="power-item unspent">
              <div class="power-header">
                <span class="power-icon">🖌️</span>
                <span class="power-name">Painting</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="20"></div></div></div>
                <span class="power-val">2</span>
              </div>
              <p class="power-desc">Tried it. Discovered I'm an appreciator, not a practitioner. The easel sits patiently.</p>
            </div>

            <div class="power-item unspent">
              <div class="power-header">
                <span class="power-icon">🏓</span>
                <span class="power-name">Pickleball</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="10"></div></div></div>
                <span class="power-val">1</span>
              </div>
              <p class="power-desc">Plays when invited. Doesn't pretend to enjoy it. Will not be wearing the visor.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🚇</span>
                <span class="power-name">Public Transit</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="80"></div></div></div>
                <span class="power-val">8</span>
              </div>
              <p class="power-desc">Subways, buses, trams, ferries — all of it. The faster, the more frequent, the better. Cars should be the backup plan.</p>
            </div>

            <div class="power-item unspent">
              <div class="power-header">
                <span class="power-icon">🧩</span>
                <span class="power-name">Puzzles</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="40"></div></div></div>
                <span class="power-val">4</span>
              </div>
              <p class="power-desc">Jigsaw or nothing. Will start one, lose interest at 60% complete.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🏃</span>
                <span class="power-name">Running</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="80"></div></div></div>
                <span class="power-val">8</span>
              </div>
              <p class="power-desc">Marathoner. Not just "occasional" anymore — logs the miles, rain or shine.</p>
            </div>

            <div class="power-item unspent">
              <div class="power-header">
                <span class="power-icon">🏂</span>
                <span class="power-name">Snowboarding</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="20"></div></div></div>
                <span class="power-val">2</span>
              </div>
              <p class="power-desc">Goes when the powder lines up. Knees haven't quit, but they file complaints.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🏙</span>
                <span class="power-name">Urban development</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="80"></div></div></div>
                <span class="power-val">8</span>
              </div>
              <p class="power-desc">Infrastructure &amp; urban development nerd. Believes cities should be less car-centric and not shy about saying so.</p>
            </div>

          </div>
          </div>
        </div>

        <!-- ─── Branch 2 · Food & Drink ─── -->
        <div class="power-branch fade-in no-fade">
          <button class="branch-header" type="button" aria-expanded="false" aria-controls="branch-2-list">
            <span class="branch-icon">🍔</span>
            <span class="branch-name">Food &amp; Drink</span>
            <span class="branch-pts">65 PTS</span>
            <span class="branch-toggle" aria-hidden="true">▾</span>
          </button>
          <div class="powers-panel" id="branch-2-list">
          <div class="powers-list">

            <div class="power-item unspent">
              <div class="power-header">
                <span class="power-icon">🥑</span>
                <span class="power-name">Avocado</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="20"></div></div></div>
                <span class="power-val">2</span>
              </div>
              <p class="power-desc">Toast trend got out of hand. Will eat in guac form.</p>
            </div>

            <div class="power-item unspent">
              <div class="power-header">
                <span class="power-icon">🥓</span>
                <span class="power-name">Bacon</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="20"></div></div></div>
                <span class="power-val">2</span>
              </div>
              <p class="power-desc">Smells better than it tastes after the first bite. Sausage outranks it.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">☕</span>
                <span class="power-name">Coffee</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="50"></div></div></div>
                <span class="power-val">5</span>
              </div>
              <p class="power-desc">Drip. Black. No theatrics. Two cups before noon, then we're done.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🍺</span>
                <span class="power-name">Craft Beer</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="80"></div></div></div>
                <span class="power-val">8</span>
              </div>
              <p class="power-desc">Freelance maven. Currently surveying the Long Beach scene after years of rigorous Bay Area fieldwork.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🌮</span>
                <span class="power-name">Crunchy Tacos</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="100"></div></div></div>
                <span class="power-val">10</span>
              </div>
              <p class="power-desc">Critic. Enthusiast. Evangelist. The crunch matters. Softshell fans are welcome to be wrong quietly.</p>
            </div>

            <div class="power-item unspent">
              <div class="power-header">
                <span class="power-icon">🍹</span>
                <span class="power-name">Fruity Drinks</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="10"></div></div></div>
                <span class="power-val">1</span>
              </div>
              <p class="power-desc">Vacation umbrella drinks only. Sweet, sticky, and over in three sips.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🍗</span>
                <span class="power-name">K(orean) FC</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="80"></div></div></div>
                <span class="power-val">8</span>
              </div>
              <p class="power-desc">Double-fried deliciousness recharges the sense. Sets a bar that American fried chicken rarely clears.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🍄‍🟫</span>
                <span class="power-name">Mushrooms</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="60"></div></div></div>
                <span class="power-val">6</span>
              </div>
              <p class="power-desc">Texture-forward. Earthy fans only. Portobello on a burger, please.</p>
            </div>

            <div class="power-item unspent">
              <div class="power-header">
                <span class="power-icon">🥞</span>
                <span class="power-name">Pancakes</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="30"></div></div></div>
                <span class="power-val">3</span>
              </div>
              <p class="power-desc">Weekend brunch only. Eggs over easy would win every other day.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🍕</span>
                <span class="power-name">Pizza</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="70"></div></div></div>
                <span class="power-val">7</span>
              </div>
              <p class="power-desc">NY thin-fold. Detroit corners. Chicago tavern-cut. All shapes welcome at the table.</p>
            </div>

            <div class="power-item unspent">
              <div class="power-header">
                <span class="power-icon">🎃</span>
                <span class="power-name">Pumpkin Spice</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="0"></div></div></div>
                <span class="power-val">0</span>
              </div>
              <p class="power-desc">Not interested in the seasonal psy-op. The squash is fine. The latte is suspicious.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🍣</span>
                <span class="power-name">Sushi</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="80"></div></div></div>
                <span class="power-val">8</span>
              </div>
              <p class="power-desc">Omakase counter &gt; printed menu. Spicy tuna on principle. Nigiri over rolls.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🥦</span>
                <span class="power-name">Veggies</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="40"></div></div></div>
                <span class="power-val">4</span>
              </div>
              <p class="power-desc">Aware that they exist. Will eat them if hidden inside something more delicious.</p>
            </div>

            <div class="power-item unspent">
              <div class="power-header">
                <span class="power-icon">🍷</span>
                <span class="power-name">Wine</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="10"></div></div></div>
                <span class="power-val">1</span>
              </div>
              <p class="power-desc">Will drink it politely. Tasting notes max out at "red" and "grape." That's all I've got.</p>
            </div>

          </div>
          </div>
        </div>

        <!-- ─── Branch 3 · Brand Loyalty ─── -->
        <div class="power-branch fade-in no-fade">
          <button class="branch-header" type="button" aria-expanded="false" aria-controls="branch-3-list">
            <span class="branch-icon">🏷️</span>
            <span class="branch-name">Brand Loyalty</span>
            <span class="branch-pts">38 PTS</span>
            <span class="branch-toggle" aria-hidden="true">▾</span>
          </button>
          <div class="powers-panel" id="branch-3-list">
          <div class="powers-list">

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">👟</span>
                <span class="power-name">Adidas</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="70"></div></div></div>
                <span class="power-val">7</span>
              </div>
              <p class="power-desc">Three stripes for life. Sambas, Gazelles, Superstars — the rotation never quits.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🖥️</span>
                <span class="power-name">Apple</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="90"></div></div></div>
                <span class="power-val">9</span>
              </div>
              <p class="power-desc">All in. Mac, iPhone, iPad, Watch, AirPods. The walled garden is comfortable and I'm not leaving.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">💡</span>
                <span class="power-name">Hue ecosystem</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="70"></div></div></div>
                <span class="power-val">7</span>
              </div>
              <p class="power-desc">Has opinions about lighting automation and voice assistant integrations. Strong, specific, unprompted opinions.</p>
            </div>

            <div class="power-item unspent">
              <div class="power-header">
                <span class="power-icon">🍟</span>
                <span class="power-name">McDonalds</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="20"></div></div></div>
                <span class="power-val">2</span>
              </div>
              <p class="power-desc">Fries on a road trip. Otherwise the menu lives off-limits.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🎮</span>
                <span class="power-name">Nintendo</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="100"></div></div></div>
                <span class="power-val">10</span>
              </div>
              <p class="power-desc">Young Link main. Korok fanatic. Kirby worshipper. Switch exclusively in handheld mode.</p>
            </div>

            <div class="power-item hated">
              <div class="power-header">
                <span class="power-icon">🤖</span>
                <span class="power-name">OpenAI</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="20"></div></div></div>
                <span class="power-val">-2</span>
              </div>
              <p class="power-desc">Built ChatGPT. The room got bigger. I switched teams.</p>
            </div>

            <div class="power-item hated">
              <div class="power-header">
                <span class="power-icon">⚡</span>
                <span class="power-name">Tesla</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="90"></div></div></div>
                <span class="power-val">-9</span>
              </div>
              <p class="power-desc">Negative loyalty, maximum magnitude. The cars, the man, the panel gaps — all of it. Hard pass.</p>
            </div>

            <div class="power-item unspent">
              <div class="power-header">
                <span class="power-icon">🪩</span>
                <span class="power-name">TikTok</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="10"></div></div></div>
                <span class="power-val">1</span>
              </div>
              <p class="power-desc">Account exists. Algorithm has correctly profiled me as "tired."</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🚗</span>
                <span class="power-name">Toyota Motors</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="70"></div></div></div>
                <span class="power-val">7</span>
              </div>
              <p class="power-desc">Boring and indestructible — exactly what a car should be. Brand loyalty earned the hard way.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">📺</span>
                <span class="power-name">YouTube</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="60"></div></div></div>
                <span class="power-val">6</span>
              </div>
              <p class="power-desc">The only streaming service that actually matters.</p>
            </div>

          </div>
          </div>
        </div>

        <!-- ─── Branch 4 · Locales ─── -->
        <div class="power-branch fade-in no-fade">
          <button class="branch-header" type="button" aria-expanded="false" aria-controls="branch-4-list">
            <span class="branch-icon">🌎</span>
            <span class="branch-name">Locales</span>
            <span class="branch-pts">26 PTS</span>
            <span class="branch-toggle" aria-hidden="true">▾</span>
          </button>
          <div class="powers-panel" id="branch-4-list">
          <div class="powers-list">

            <div class="power-item unspent">
              <div class="power-header">
                <span class="power-icon">🌵</span>
                <span class="power-name">Arizona</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="10"></div></div></div>
                <span class="power-val">1</span>
              </div>
              <p class="power-desc">Statistically a habitat. Functionally a hairdryer.</p>
            </div>

            <div class="power-item unspent">
              <div class="power-header">
                <span class="power-icon">🍁</span>
                <span class="power-name">Canada</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="0"></div></div></div>
                <span class="power-val">0</span>
              </div>
              <p class="power-desc">Crossed the border twice. Both times for a flight transfer.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">⛱️</span>
                <span class="power-name">LA &amp; LBC</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="60"></div></div></div>
                <span class="power-val">6</span>
              </div>
              <p class="power-desc">New home base. Sunsets over the Pacific, palm trees, and a craft beer scene that keeps surprising me.</p>
            </div>

            <div class="power-item unspent">
              <div class="power-header">
                <span class="power-icon">🗽</span>
                <span class="power-name">NYC</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="10"></div></div></div>
                <span class="power-val">1</span>
              </div>
              <p class="power-desc">Great for a long weekend. Brutal for a Tuesday.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🌁</span>
                <span class="power-name">San Francisco</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="100"></div></div></div>
                <span class="power-val">10</span>
              </div>
              <p class="power-desc">City of sea lions, foggy hills, and tech dorks; my home for over 16 years and always in my heart.</p>
            </div>

            <div class="power-item hated">
              <div class="power-header">
                <span class="power-icon">🏘️</span>
                <span class="power-name">Suburbs</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="40"></div></div></div>
                <span class="power-val">-4</span>
              </div>
              <p class="power-desc">Strip malls, stroads, and silence. The opposite of a city, by design.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🤠</span>
                <span class="power-name">Texas</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="40"></div></div></div>
                <span class="power-val">4</span>
              </div>
              <p class="power-desc">Brisket and BBQ buy a lot of forgiveness. The summers do not.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🎓</span>
                <span class="power-name">UVA</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="80"></div></div></div>
                <span class="power-val">8</span>
              </div>
              <p class="power-desc">Wahoowa. Grounds, The Lawn, The Rotunda, The University.</p>
            </div>

          </div>
          </div>
        </div>

        <!-- ─── Branch 5 · Professional Skills ─── -->
        <div class="power-branch fade-in no-fade">
          <button class="branch-header" type="button" aria-expanded="false" aria-controls="branch-5-list">
            <span class="branch-icon">💼</span>
            <span class="branch-name">Pro Skills</span>
            <span class="branch-pts">34 PTS</span>
            <span class="branch-toggle" aria-hidden="true">▾</span>
          </button>
          <div class="powers-panel" id="branch-5-list">
          <div class="powers-list">

            <div class="power-item unspent">
              <div class="power-header">
                <span class="power-icon">🏦</span>
                <span class="power-name">Finance</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="10"></div></div></div>
                <span class="power-val">1</span>
              </div>
              <p class="power-desc">Read the 10-Ks. Forgot most of it by lunch. Defers to the people who didn't.</p>
            </div>

            <div class="power-item unspent">
              <div class="power-header">
                <span class="power-icon">🔧</span>
                <span class="power-name">Hardware Engineering</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="10"></div></div></div>
                <span class="power-val">1</span>
              </div>
              <p class="power-desc">Can tell a resistor from a capacitor. That's the ceiling. Software pays the bills.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🚀</span>
                <span class="power-name">Product Management</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="90"></div></div></div>
                <span class="power-val">9</span>
              </div>
              <p class="power-desc">Two decades of shipping product. Roadmaps, strategy, hard tradeoffs. Still my favorite kind of problem to solve.</p>
            </div>

            <div class="power-item unspent">
              <div class="power-header">
                <span class="power-icon">🗣️</span>
                <span class="power-name">Public Speaking</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="30"></div></div></div>
                <span class="power-val">3</span>
              </div>
              <p class="power-desc">Will do it. Will overprepare. Will then complain about it for a week.</p>
            </div>

            <div class="power-item unspent">
              <div class="power-header">
                <span class="power-icon">💰</span>
                <span class="power-name">Sales</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="30"></div></div></div>
                <span class="power-val">3</span>
              </div>
              <p class="power-desc">Can do the demo. Cannot do the close. Built teams of people who can instead.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">📈</span>
                <span class="power-name">Stonks</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="30"></div></div></div>
                <span class="power-val">3</span>
              </div>
              <p class="power-desc">Index funds and prayer. Occasionally rage-checks the portfolio. Mostly tries not to look.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🎨</span>
                <span class="power-name">UI/X design</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="90"></div></div></div>
                <span class="power-val">9</span>
              </div>
              <p class="power-desc">Wireframes to high-fidelity. Strong opinions on type, spacing, and CTAs. Design is product.</p>
            </div>

            <div class="power-item">
              <div class="power-header">
                <span class="power-icon">🪄</span>
                <span class="power-name">Vibe Coding</span>
                <div class="power-bar-wrap"><div class="power-bar"><div class="power-fill" data-width="50"></div></div></div>
                <span class="power-val">5</span>
              </div>
              <p class="power-desc">Recent convert turned daily driver. Agents handle the keys, I steer the strategy. Leveling up fast.</p>
            </div>

          </div>
          </div>
        </div>

      </div>
    </div>
  </section>

  <!-- ░░ WORLD 04: WATER ░░ -->
  <!-- Water now precedes space: you dive in from the caves (World 03)
       through the wave band at this section's top, then surface into
       the night sky (#consuming / World 05) below. -->
  <section id="work" class="section-dark">
    <!-- Music sentinel for the underwater portion. The wave band sits
         at top:0 (the dive-in surface from the caves above); the
         underwater quest log follows. __waterBgm observes this. -->
    <div class="water-music-sentinel" aria-hidden="true"></div>
    <div class="bubbles" aria-hidden="true"><span></span><span></span></div>
    <div class="fish-school" aria-hidden="true">
      <!-- School formation, swimming right -->
      <div class="fish-track ft-1"><div class="fish-bob"><div class="fish red"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <div class="fish-track ft-2"><div class="fish-bob"><div class="fish red"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <div class="fish-track ft-3"><div class="fish-bob"><div class="fish red"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <div class="fish-track ft-13"><div class="fish-bob"><div class="fish blue"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <div class="fish-track ft-14"><div class="fish-bob"><div class="fish red"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <div class="fish-track ft-15"><div class="fish-bob"><div class="fish blue"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <!-- Loners and stragglers -->
      <div class="fish-track ft-4 leftward"><div class="fish-bob"><div class="fish gold flip"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <div class="fish-track ft-11 leftward"><div class="fish-bob"><div class="fish gold flip"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <div class="fish-track ft-12 leftward"><div class="fish-bob"><div class="fish blue flip"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <div class="fish-track ft-5"><div class="fish-bob"><div class="fish red"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <div class="fish-track ft-6 leftward"><div class="fish-bob"><div class="fish gold flip"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <div class="fish-track ft-7 leftward"><div class="fish-bob"><div class="fish blue flip"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <div class="fish-track ft-8 leftward"><div class="fish-bob"><div class="fish gold flip"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <div class="fish-track ft-9 leftward"><div class="fish-bob"><div class="fish gold flip"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <div class="fish-track ft-10 leftward"><div class="fish-bob"><div class="fish gold flip"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <!-- Density boost: ~13 more fish across all three depth bands -->
      <div class="fish-track ft-16"><div class="fish-bob"><div class="fish red"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <div class="fish-track ft-17"><div class="fish-bob"><div class="fish red"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <div class="fish-track ft-18 leftward"><div class="fish-bob"><div class="fish gold flip"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <div class="fish-track ft-19 leftward"><div class="fish-bob"><div class="fish gold flip"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <div class="fish-track ft-20"><div class="fish-bob"><div class="fish blue"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <div class="fish-track ft-21 leftward"><div class="fish-bob"><div class="fish gold flip"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <div class="fish-track ft-22 leftward"><div class="fish-bob"><div class="fish gold flip"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <div class="fish-track ft-23"><div class="fish-bob"><div class="fish red"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <div class="fish-track ft-24 leftward"><div class="fish-bob"><div class="fish gold flip"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <div class="fish-track ft-25 leftward"><div class="fish-bob"><div class="fish gold flip"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <div class="fish-track ft-26 leftward"><div class="fish-bob"><div class="fish blue flip"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <div class="fish-track ft-27 leftward"><div class="fish-bob"><div class="fish gold flip"><span class="fin"></span><span class="dorsal"></span></div></div></div>
      <div class="fish-track ft-28 leftward"><div class="fish-bob"><div class="fish gold flip"><span class="fin"></span><span class="dorsal"></span></div></div></div>
    </div>
    <div class="zone-tag zone-tag-light" id="work-zone-tag">
      <span class="zone-id"><span class="zone-emoji"><img class="world-icon" src="assets/images/world-04.webp" alt="" aria-hidden="true" loading="lazy"></span><span class="zone-text">WORLD<span class="zone-level">04</span></span></span>
    </div>
    <div class="container">
      <div class="section-header light">
        <span class="section-eyebrow" id="work-eyebrow"><span class="eyebrow-row"><span class="eyebrow-emoji">📜</span><span class="eyebrow-text">Quest log</span></span></span>
        <h2>What I've Done</h2>
        <p class="section-sub">Note: due to  the limited status of current energy stocks as well as updated game of life requirements, only one [1] primary quest is allowed to be activated at any given time.</p>
      </div>
      <div class="quest-log">

        <div class="quest-item active fade-in">
          <div class="quest-marker">
            <div class="quest-dot active-dot"></div>
            <div class="quest-line"></div>
          </div>
          <div class="quest-meta">
            <span class="quest-status">ACTIVE QUEST</span>
            <span class="quest-date">Still making progress · 4+ years</span>
          </div>
          <div class="quest-card">
            <h3>Director &amp; Head of Product</h3>
            <p class="quest-org"><img class="quest-logo" src="assets/images/logos/wisdom-panel.png" alt="Wisdom Panel">Wisdom Panel · Kinship</p>
            <p class="quest-desc">Navigating the frontier of pet genomics. Building products that help pet parents, breeders &amp; vets understand their animals at a genetic level, because knowing is half the battle (the other half is getting them to leave some room on the couch).</p>
          </div>
        </div>

        <div class="quest-item fade-in no-fade">
          <div class="quest-marker">
            <div class="quest-dot"></div>
            <div class="quest-line"></div>
          </div>
          <div class="quest-meta">
            <span class="quest-status">✔️ COMPLETED</span>
          </div>
          <div class="quest-card">
            <h3>VP Product → Sr. Advisor</h3>
            <p class="quest-org"><img class="quest-logo" src="assets/images/logos/dealpath.png" alt="Dealpath">Dealpath</p>
            <p class="quest-desc">Joined as an early team member. Owned roadmap, strategy, execution, and team. Part of the core exec team that built the leading deal management platform for commercial real estate from the ground up.</p>
            <span class="quest-date">Completed on Dec 2021 · 6+ years to complete</span>
          </div>
        </div>

        <div class="quest-item fade-in no-fade">
          <div class="quest-marker">
            <div class="quest-dot"></div>
            <div class="quest-line"></div>
          </div>
          <div class="quest-meta">
            <span class="quest-status">✔️ COMPLETED</span>
          </div>
          <div class="quest-card">
            <h3>Head of Product</h3>
            <p class="quest-org"><img class="quest-logo" src="assets/images/logos/klout.png" alt="Klout">Klout</p>
            <p class="quest-desc">Led the product roadmap and execution that drove more than 10x user and revenue growth. Oversaw strategy and launch of mobile and business platforms back when social influence scores were a whole thing.</p>
            <span class="quest-date">Completed on Dec 2012 · 2 years to complete</span>
          </div>
        </div>

        <div class="quest-item fade-in no-fade">
          <div class="quest-marker">
            <div class="quest-dot"></div>
            <div class="quest-line last"></div>
          </div>
          <div class="quest-meta">
            <span class="quest-status">✔️ COMPLETED</span>
          </div>
          <div class="quest-card">
            <h3>Senior PM → Lead PM</h3>
            <p class="quest-org"><img class="quest-logo" src="assets/images/logos/zynga.png" alt="Zynga">Zynga</p>
            <p class="quest-desc">Grew Zynga Poker more than 10x, making it the industry standard in social gaming and defining its sustainable growth mechanics. Also created Poker Blitz, "the best poker game you'll never get to play."</p>
            <span class="quest-date">Completed on Feb 2011 · 2+ years to complete</span>
          </div>
        </div>

      </div>
    </div>
  </section>

  <!-- ░░ WORLD 05: SPACE ░░ -->
  <!-- The night sky, a full registered world (W05 in hudSectionIds,
       index 4). Now sits AFTER the water world — you surface out of the
       ocean into space, then approach the boss below. Hosts the
       night-sky backdrop (moon, planet, twinkling stars) plus the
       clickable shooting stars and the darting UFO — its easter-egg
       "grabs". __spaceBgm observes this section directly as its music
       territory. As the last scroll-based world before the boss, it
       carries the XP lookahead fill (see getCurrentLookahead). -->
  <section id="consuming" class="section-dark">
    <div class="ocean-sky" aria-hidden="true">
      <div class="ocean-moon" aria-hidden="true"></div>
      <div class="ocean-planet" aria-hidden="true"></div>
    </div>
    <div class="zone-tag zone-tag-light" id="consuming-zone-tag">
      <span class="zone-id"><span class="zone-emoji"><img class="world-icon" src="assets/images/world-05.webp" alt="" aria-hidden="true" loading="lazy"></span><span class="zone-text">WORLD<span class="zone-level">05</span></span></span>
    </div>
    <div class="container">
      <div class="section-header light">
        <span class="section-eyebrow" id="consuming-eyebrow"><span class="eyebrow-row"><span class="eyebrow-emoji">📡</span><span class="eyebrow-text">Now exploring</span></span></span>
        <h2>What I'm Consuming</h2>
        <p class="section-sub">A live transmission from orbit — the things currently pulling my attention. Catch a shooting star or the passing UFO while you're up here.</p>
      </div>
      <ul class="now-panel">
        <!-- Building category hidden for now — remove `hidden` to restore. -->
        <li class="now-cat" hidden>
          <div class="now-cat-head"><span class="now-icon" aria-hidden="true">🛠️</span><span class="now-label">Building</span></div>
          <div class="now-grid">
            <a class="now-card" href="https://wisdompanel.com/" target="_blank" rel="noopener noreferrer"><img class="now-thumb now-thumb--logo" src="assets/images/now/wisdom-panel.png" alt="" aria-hidden="true"><span class="now-card-name">Wisdom Panel</span></a>
          </div>
        </li>
        <li class="now-cat">
          <div class="now-cat-head"><span class="now-icon" aria-hidden="true">🎧</span><span class="now-label">Listening</span></div>
          <div class="now-grid">
            <a class="now-card" href="https://podcasts.apple.com/us/podcast/the-weekly-planet/id718158767" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/now/thumbs/pod-weeklyplanet.jpg" alt="" aria-hidden="true"><span class="now-card-name">Weekly Planet</span></a>
            <a class="now-card" href="https://podcasts.apple.com/us/podcast/chapo-trap-house/id1097417804" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/now/thumbs/pod-chapo.jpg" alt="" aria-hidden="true"><span class="now-card-name">Chapo</span></a>
            <a class="now-card" href="https://podcasts.apple.com/us/podcast/true-anon-truth-feed/id1474001390" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/now/thumbs/pod-trueanon.jpg" alt="" aria-hidden="true"><span class="now-card-name">True Anon</span></a>
            <a class="now-card" href="https://podcasts.apple.com/us/podcast/some-more-news/id1364825229" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/now/thumbs/pod-somemorenews.jpg" alt="" aria-hidden="true"><span class="now-card-name">Some More News</span></a>
            <a class="now-card" href="https://podcasts.apple.com/us/podcast/game-of-thrones-abridged-alt-schwift-x/id1372802252" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/now/thumbs/pod-altschwiftx.jpg" alt="" aria-hidden="true"><span class="now-card-name">Alt Schwift X</span></a>
          </div>
        </li>
        <li class="now-cat">
          <div class="now-cat-head"><span class="now-icon" aria-hidden="true">📺</span><span class="now-label">Watching</span></div>
          <div class="now-grid">
            <a class="now-card" href="https://www.youtube.com/@wallstreetmillennial" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/now/thumbs/yt-wallstreetmillennial.jpg" alt="" aria-hidden="true"><span class="now-card-name">Wall Street Millennial</span></a>
            <a class="now-card" href="https://www.youtube.com/@AntsCanada" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/now/thumbs/yt-antscanada.jpg" alt="" aria-hidden="true"><span class="now-card-name">AntsCanada</span></a>
            <a class="now-card" href="https://www.youtube.com/@DigitalFoundry" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/now/thumbs/yt-digitalfoundry.jpg" alt="" aria-hidden="true"><span class="now-card-name">Digital Foundry</span></a>
            <a class="now-card" href="https://www.youtube.com/@TopicArlo" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/now/thumbs/yt-arlo.jpg" alt="" aria-hidden="true"><span class="now-card-name">Arlo</span></a>
            <a class="now-card" href="https://www.youtube.com/@KyleBosman" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/now/thumbs/yt-kylebosman.jpg" alt="" aria-hidden="true"><span class="now-card-name">Kyle Bosman</span></a>
            <a class="now-card" href="https://www.youtube.com/@RedLetterMedia" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/now/thumbs/yt-redlettermedia.jpg" alt="" aria-hidden="true"><span class="now-card-name">RedLetterMedia</span></a>
            <a class="now-card" href="https://www.youtube.com/@kurzgesagt" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/now/thumbs/yt-kurzgesagt.jpg" alt="" aria-hidden="true"><span class="now-card-name">Kurzgesagt</span></a>
            <a class="now-card" href="https://www.youtube.com/@BobbyBroccoli" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/now/thumbs/yt-bobbybroccoli.jpg" alt="" aria-hidden="true"><span class="now-card-name">BobbyBroccoli</span></a>
            <a class="now-card" href="https://www.youtube.com/@nerrel" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/now/thumbs/yt-nerrel.jpg" alt="" aria-hidden="true"><span class="now-card-name">Nerrel</span></a>
            <a class="now-card" href="https://www.youtube.com/@GMTK" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/now/thumbs/yt-gmtk.jpg" alt="" aria-hidden="true"><span class="now-card-name">Game Maker's Toolkit</span></a>
            <a class="now-card" href="https://www.youtube.com/@FoldingIdeas" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/now/thumbs/yt-foldingideas.jpg" alt="" aria-hidden="true"><span class="now-card-name">Folding Ideas</span></a>
            <a class="now-card" href="https://www.youtube.com/@CeaveGaming" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/now/thumbs/yt-ceave.jpg" alt="" aria-hidden="true"><span class="now-card-name">Ceave</span></a>
            <a class="now-card" href="https://www.youtube.com/@MattMcMuscles" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/now/thumbs/yt-mattmcmuscles.jpg" alt="" aria-hidden="true"><span class="now-card-name">Matt McMuscles</span></a>
            <a class="now-card" href="https://www.youtube.com/@KingKlonoa" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/now/thumbs/yt-kingk.jpg" alt="" aria-hidden="true"><span class="now-card-name">KingK</span></a>
            <a class="now-card" href="https://www.youtube.com/@Coffeezilla" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/now/thumbs/yt-coffeezilla.jpg" alt="" aria-hidden="true"><span class="now-card-name">Coffeezilla</span></a>
          </div>
        </li>
        <li class="now-cat">
          <div class="now-cat-head"><span class="now-icon" aria-hidden="true">🎮</span><span class="now-label">Playing</span></div>
          <div class="now-grid">
            <a class="now-card" href="https://www.nintendo.com/us/store/products/mina-the-hollower-nintendo-switch-2-edition-switch-2/" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/now/thumbs/game-mina.jpg" alt="" aria-hidden="true"><span class="now-card-name">Mina the Hollower</span></a>
            <a class="now-card" href="https://www.nintendo.com/us/store/products/pokemon-pokopia-switch-2/" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/now/thumbs/game-pokopia.jpg" alt="" aria-hidden="true"><span class="now-card-name">Pokémon Pokopia</span></a>
            <a class="now-card" href="https://www.nintendo.com/us/store/products/hollow-knight-silksong-nintendo-switch-2-edition-switch-2/" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/now/thumbs/game-silksong.jpg" alt="" aria-hidden="true"><span class="now-card-name">Hollow Knight: Silksong</span></a>
          </div>
        </li>
        <li class="now-cat">
          <div class="now-cat-head"><span class="now-icon" aria-hidden="true">💬</span><span class="now-label">Posting</span></div>
          <div class="now-grid">
            <a class="now-card" href="https://www.reddit.com/r/germanshepherds/" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/r-germanshepherds.webp" alt="" aria-hidden="true"><span class="now-card-name">/germanshepherds</span></a>
            <a class="now-card" href="https://www.reddit.com/r/longbeach/" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/r-longbeach.webp" alt="" aria-hidden="true"><span class="now-card-name">/longbeach</span></a>
            <a class="now-card" href="https://www.reddit.com/r/wallstreetbets/" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/r-wallstreetbets.webp" alt="" aria-hidden="true"><span class="now-card-name">/wallstreetbets</span></a>
            <a class="now-card" href="https://www.reddit.com/r/sanfranciscocirclejerk/" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/r-sanfranciscocirclejerk.webp" alt="" aria-hidden="true"><span class="now-card-name">/sfcirclejerk</span></a>
            <a class="now-card" href="https://www.reddit.com/r/tomorrow/" target="_blank" rel="noopener noreferrer"><img class="now-thumb" src="assets/images/r-tomorrow.webp" alt="" aria-hidden="true"><span class="now-card-name">/tomorrow</span></a>
          </div>
        </li>
        <!-- Reading category hidden for now — restore by uncommenting. -->
        <!--
        <li class="now-cat">
          <div class="now-cat-head"><span class="now-icon" aria-hidden="true">📖</span><span class="now-label">Reading</span></div>
          <div class="now-grid">
            <a class="now-card" href="https://www.amazon.com/Project-Hail-Mary/dp/B08GB58KD5" target="_blank" rel="noopener noreferrer"><img class="now-thumb now-thumb--cover" src="assets/images/now/thumbs/book-phm.jpg" alt="" aria-hidden="true"><span class="now-card-name">Project Hail Mary</span></a>
          </div>
        </li>
        -->
      </ul>
    </div>
  </section>

  <!-- ░░ PRE-BOSS APPROACH ░░ -->
  <div id="boss-approach" aria-hidden="true">
    <div class="approach-inner">
      <span class="approach-line"></span>
      <span class="approach-text">
        <span class="approach-emoji">⚠️</span>
        <span class="approach-words">BOSS APPROACHING</span>
        <span class="approach-emoji">⚠️</span>
      </span>
      <span class="approach-line"></span>
    </div>
    <!-- Zone tag sits at the bottom of the approach banner so it
         visually displays ABOVE the battlement merlons below. -->
    <div class="zone-tag zone-tag-boss" id="boss-zone-tag">
      <span class="zone-id"><span class="zone-emoji"><img class="world-icon" src="assets/images/world-06.webp" alt="" aria-hidden="true" loading="lazy"></span><span class="zone-text">WORLD<span class="zone-level">06</span></span></span>
    </div>
    <!-- Two extra red koopas orbit on either side of the "BOSS
         APPROACHING" banner. Same click → kick + 100 XP + return-
         after-24s loop as the in-arena pair. data-source-idx=5
         routes the XP toast to the W06 HUD dot. The .koopa-bubble
         span is populated by JS with rotating lackey phrases. -->
    <button type="button" class="koopa-floater koopa-floater-right" data-source-idx="5" aria-label="Knock down the koopa">
      <img src="assets/images/koopa-red.webp" alt="" draggable="false">
      <span class="koopa-bubble" aria-hidden="true"></span>
    </button>
    <button type="button" class="koopa-floater koopa-floater-left" data-source-idx="5" aria-label="Knock down the koopa">
      <img src="assets/images/koopa-red.webp" alt="" draggable="false">
      <span class="koopa-bubble" aria-hidden="true"></span>
    </button>
  </div>

  <!-- Soft boss-approach gate: pops in over the viewport the first
       time an under-level player enters the boss approach. Hidden
       by default and toggled by JS via .is-visible. "Fight anyway"
       dismisses it for the rest of the session. See Phase 3 in
       docs/leveling-system.md. -->
  <div class="boss-gate-warning" role="dialog" aria-live="polite" aria-hidden="true">
    <div class="boss-gate-inner">
      <span class="boss-gate-icon" aria-hidden="true">⚠️ ⚠️ ⚠️</span>
      <p class="boss-gate-text">
        You should explore more before facing the boss.
      </p>
      <button type="button" class="boss-gate-dismiss">Fight anyway</button>
    </div>
  </div>

  <!-- Music sentinel: sits between the approach banner and the battlements
       so the boss theme only kicks in once the user has actually scrolled
       up to the arena, not just past the "BOSS APPROACHING" banner. -->
  <div id="boss-music-trigger" aria-hidden="true"></div>

  <!-- ░░ STORM WALL ░░
       Own container, 100vh tall, sits between the BOSS APPROACHING
       banner and the boss arena. Contains the lightning flash and
       the battlement merlons. Merlons are pinned to the BOTTOM of
       this container so the bottom of the crenel gaps lines up with
       the container's bottom edge — guaranteeing the lightning paints
       through every crenel gap top-to-bottom. JS injects the
       individual .castle-merlon elements here on load (see main.js,
       merlon IIFE). -->
  <div class="boss-wall" aria-hidden="true">
    <!-- Lightning-flash overlay synced with the random thunder SFX
         (see js/main.js → playThunderSfx). Fills .boss-wall via
         position:absolute inset:0 so the flash covers the entire
         container; merlons sit on top at z-index 1. -->
    <div class="boss-lightning" aria-hidden="true"></div>
  </div>

  <!-- ░░ CONTACT / FINAL BOSS ░░ -->
  <section id="contact" class="section-boss">
    <!-- Red koopa pair circles over the boss arena. Click → spiral
         out + smb3_kick + 100 XP, returns after ~24s.
         data-source-idx=5 routes the XP toast to the W06 HUD dot. -->
    <button type="button" class="koopa-floater koopa-floater-right" data-source-idx="5" aria-label="Knock down the koopa">
      <img src="assets/images/koopa-red.webp" alt="" draggable="false">
    </button>
    <button type="button" class="koopa-floater koopa-floater-left" data-source-idx="5" aria-label="Knock down the koopa">
      <img src="assets/images/koopa-red.webp" alt="" draggable="false">
    </button>
    <!-- Two gold-framed shepherd portraits hung on the battlement wall. -->
    <div class="castle-portraits" aria-hidden="true">
      <div class="castle-portrait castle-portrait--lana">
        <svg viewBox="0 0 60 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <defs>
            <!-- Clip extended from 50×50 to 50×60 so the photo fills the
                 entire inner brown area (top to just above the bottom
                 wooden border). The plaque overlays the bottom slice of
                 the photo via HTML positioning rather than reserving
                 wooden-frame space below the image. -->
            <clipPath id="lana-portrait-clip"><rect x="5" y="5" width="50" height="60" rx="5"/></clipPath>
          </defs>
          <!-- Rounded wooden frame backing — visible only as a thin
               rim around the now-full-height photo. -->
          <rect x="0" y="0" width="60" height="70" rx="6" fill="#7a4818"/>
          <!-- photo, cropped to a rounded inner rect, with sepia for
               an aged "castle painting" feel — see CSS. Extended
               height to fill the inner frame so the brown only shows
               as the outer border. -->
          <image href="assets/images/dog-desk.webp" x="5" y="5" width="50" height="60" preserveAspectRatio="xMidYMid slice" clip-path="url(#lana-portrait-clip)"/>
          <!-- gold bevel highlights — outer/inner -->
          <rect x="0.5" y="0.5" width="59" height="69" rx="5.5" fill="none" stroke="#3a2008" stroke-width="1"/>
          <rect x="2"   y="2"   width="56" height="66" rx="4.5" fill="none" stroke="#e8c977" stroke-width="1.2"/>
          <rect x="3.5" y="3.5" width="53" height="63" rx="4"   fill="none" stroke="#c79a3a" stroke-width="2"/>
        </svg>
        <span class="castle-portrait-plaque">LANA</span>
      </div>
      <div class="castle-portrait castle-portrait--potato">
        <svg viewBox="0 0 60 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <defs>
            <clipPath id="potato-portrait-clip"><rect x="5" y="5" width="50" height="60" rx="5"/></clipPath>
          </defs>
          <rect x="0" y="0" width="60" height="70" rx="6" fill="#7a4818"/>
          <!-- preserveAspectRatio "xMinYMid slice": anchor the photo's
               LEFT edge to the frame's left edge so the visible window
               shifts left within the source image — Potato's face is
               on the left side of the original shot (the previous
               "xMax" attempt cropped her face off and showed her
               back/tail instead). -->
          <image href="assets/images/dog-potato.webp" x="5" y="5" width="50" height="60" preserveAspectRatio="xMinYMid slice" clip-path="url(#potato-portrait-clip)"/>
          <rect x="0.5" y="0.5" width="59" height="69" rx="5.5" fill="none" stroke="#3a2008" stroke-width="1"/>
          <rect x="2"   y="2"   width="56" height="66" rx="4.5" fill="none" stroke="#e8c977" stroke-width="1.2"/>
          <rect x="3.5" y="3.5" width="53" height="63" rx="4"   fill="none" stroke="#c79a3a" stroke-width="2"/>
        </svg>
        <span class="castle-portrait-plaque">POTATO</span>
      </div>
    </div>
    <div class="boss-embers" aria-hidden="true"><span></span><span></span></div>
    <div class="container">
      <div class="boss-hp-wrap" id="final-boss">
        <span class="boss-hp-icon" aria-hidden="true">💀</span>
        <div class="boss-hp-bar"><div class="boss-hp-fill"></div></div>
        <span class="boss-hp-val">0</span>
      </div>
      <div class="section-header light boss-header">
        <span class="zone-boss-label" id="contact-eyebrow">Contact me</span>
        <h2>Get in Touch</h2>
      </div>
      <div class="contact-wrap fade-in">
        <a href="/cdn-cgi/l/email-protection#64070c160d172409050f0516170f1d4a070b09" class="contact-email-cta">
          <span><span class="__cf_email__" data-cfemail="97f4ffe5fee4d7faf6fcf6e5e4fceeb9f4f8fa">[email&#160;protected]</span></span>
          <span class="contact-arrow">→</span>
        </a>
      </div>
    </div>
    <button type="button" class="boss-monster" aria-label="Attack the boss">
      <span class="boss-bubble" aria-hidden="true">Time is money!</span>
      <!-- Bowser sprite driven by bowser-sprites.webp — a clean 11×1
           grid: cols 0..9 = 10-frame walk cycle, col 10 = defeated
           pose (Bowser on his back). Walk cycle runs via CSS while
           alive; defeat jumps to col 10. -->
      <div class="boss-monster-sprite" aria-hidden="true"></div>
      <!-- Stars orbit defeated Bowser's head — lives INSIDE the
           .boss-monster button so it inherits the button's positioning
           context (400×400 desktop / 260×260 mobile). With `top: 15%`
           in CSS, the orbit centre lands on the shell's head on every
           viewport size without any pixel-level re-tuning. Alternates
           ✦ / 🐣 so the stars share their orbit with the GSDs' new
           hatchling neighbors — a tiny easter egg. -->
      <!-- Glyph wrapped in an inner span: the outer .boss-star carries the
           orbit transform, the inner .boss-star__glyph carries an independent
           throb (scale pulse) so the two transforms don't collide. -->
      <div class="boss-knockout-stars" aria-hidden="true">
        <span class="boss-star boss-star--1"><span class="boss-star__glyph">✦</span></span>
        <span class="boss-star boss-star--2"><span class="boss-star__glyph">🐣</span></span>
        <span class="boss-star boss-star--3"><span class="boss-star__glyph">✦</span></span>
        <span class="boss-star boss-star--4"><span class="boss-star__glyph">🐣</span></span>
        <span class="boss-star boss-star--5"><span class="boss-star__glyph">✦</span></span>
        <span class="boss-star boss-star--6"><span class="boss-star__glyph">🐣</span></span>
      </div>
    </button>
    <button type="button" class="boss-rematch" aria-label="Fight the boss again">Fight again</button>
    <div class="boss-floor" aria-hidden="true"></div>
  </section>

  <!-- ░░ CREDITS ░░ Celebration / credits roll. Hidden until the boss
       falls; revealed by JS removing the [hidden] attribute alongside
       the sunburst class on contact. -->
  <section id="credits" class="section-credits" hidden>
    <div class="credits-stage" id="credits-stage">
      <div class="credits-roll" id="credits-roll">
        <header class="credits-title">
          <p class="credits-eyebrow">A chrismakarsky.com production</p>
          <h2>SUPER CMAK WORLD</h2>
        </header>

        <ul class="credits-block">
          <li><span class="role">Director</span><span class="who">Chris Makarsky</span></li>
          <li><span class="role">Lead Programmer</span><span class="who">Chris Makarsky</span></li>
          <li><span class="role">Co-Programmer</span><span class="who">Claude (Anthropic)</span></li>
          <li><span class="role">Lead Designer</span><span class="who">Chris Makarsky</span></li>
          <li><span class="role">UI / UX Design</span><span class="who">Chris Makarsky</span></li>
          <li><span class="role">Visual Effects</span><span class="who">Chris Makarsky &amp; Claude</span></li>
          <li><span class="role">Story &amp; Worldbuilding</span><span class="who">Chris Makarsky</span></li>
          <li><span class="role">Additional Writing</span><span class="who">Claude</span></li>
          <li><span class="role">Sound Design</span><span class="who">Chris Makarsky</span></li>
          <li><span class="role">Music</span><span class="who">Koji Kondo</span></li>
          <li><span class="role">Quality Assurance</span><span class="who">Chris Makarsky</span></li>
        </ul>

        <h3 class="credits-heading">— THE PACK —</h3>
        <ul class="credits-block">
          <li><span class="role">Loyal Companion #1</span><span class="who">Lana 🐕</span></li>
          <li><span class="role">Loyal Companion #2</span><span class="who">Potato 🐕</span></li>
          <li><span class="role">Casting (Dog Division)</span><span class="who">Chris Makarsky</span></li>
        </ul>

        <h3 class="credits-heading">— INSPIRED BY —</h3>
        <p class="credits-prose">
          Shigeru Miyamoto<br>
          The team at Nintendo<br>
          Every Mario level, every Zelda dungeon,<br>
          every star that ever exploded into confetti.
        </p>

        <h3 class="credits-heading">— SPECIAL THANKS —</h3>
        <p class="credits-prose">
          Family, friends, and the good dogs who let<br>
          us pet them on long walks.
        </p>

        <ul class="credits-block credits-block--producers">
          <li><span class="role">Producer</span><span class="who">Chris Makarsky</span></li>
          <li><span class="role">Executive Producer</span><span class="who">Chris Makarsky</span></li>
        </ul>

        <!-- Playthrough recap — reuses each world's zone-tag display (icon,
             "WORLD 0X" label, and the five achievement pips) as an end-of-game
             summary. The tags + totals are injected by buildCreditsSummary()
             when the credits first appear, so every pip reflects final state. -->
        <h3 class="credits-heading">— YOUR PLAYTHROUGH —</h3>
        <div class="credits-summary" id="credits-summary">
          <div class="credits-summary-list" id="credits-summary-list"></div>
          <div class="credits-summary-totals" id="credits-summary-totals"></div>
        </div>

        <h3 class="credits-heading">— CONTACT ME —</h3>
        <a href="/cdn-cgi/l/email-protection#3c5f544e554f7c515d575d4e4f5745125f5351" class="credits-cta">
          <span><span class="__cf_email__" data-cfemail="fe9d968c978dbe939f959f8c8d9587d09d9193">[email&#160;protected]</span></span>
        </a>

        <p class="credits-end">THANKS FOR VISITING!</p>

        <!-- Secret portal — placed at the very end of the credits roll
             so it scrolls into view AFTER everything else. The user has
             read all the way through; the portal is the very last
             thing they see. -->
        <a href="#world06" class="credits-portal" id="credits-portal" aria-label="Enter the secret World 07">
          <span class="credits-portal-arrow" aria-hidden="true">▶</span>
          <span class="credits-portal-text">ENTER WORLD 07</span>
        </a>
      </div>
    </div>

    <!-- Happy German Shepherds (moved here from the boss arena) — they
         are the audience to the credits roll. The three middle dogs are
         omitted so the playback controls can sit in the centre of the band. -->
    <div class="credits-celebration" aria-hidden="true">
      <div class="celebration-dog dog-1"><span class="dog-bubble">Thank you!</span><span class="dog-heart">❤️</span><img src="assets/images/german-shepherd.webp" alt="" class="dog-img" loading="lazy" decoding="async"></div>
      <div class="celebration-dog dog-2"><span class="dog-bubble">Thank you!</span><span class="dog-heart">❤️</span><img src="assets/images/german-shepherd.webp" alt="" class="dog-img" loading="lazy" decoding="async"></div>
      <div class="celebration-dog dog-3"><span class="dog-bubble">Thank you!</span><span class="dog-heart">❤️</span><img src="assets/images/german-shepherd.webp" alt="" class="dog-img" loading="lazy" decoding="async"></div>
      <div class="celebration-dog dog-7"><span class="dog-bubble">Thank you!</span><span class="dog-heart">❤️</span><img src="assets/images/german-shepherd.webp" alt="" class="dog-img" loading="lazy" decoding="async"></div>
      <div class="celebration-dog dog-8"><span class="dog-bubble">Thank you!</span><span class="dog-heart">❤️</span><img src="assets/images/german-shepherd.webp" alt="" class="dog-img" loading="lazy" decoding="async"></div>
      <div class="celebration-dog dog-9"><span class="dog-bubble">Thank you!</span><span class="dog-heart">❤️</span><img src="assets/images/german-shepherd.webp" alt="" class="dog-img" loading="lazy" decoding="async"></div>
    </div>

    <!-- Playback controls, sitting in the centre of the dogs band. Auto-scroll
         stays the default. Rewind / pause / fast-forward / replay (⏪ rewinds at
         4×, ⏩ fast-forwards at 8× — tap to engage, tap again for normal; ↺
         jumps to the top and plays from the start). Wired in
         setupCreditsRoll(). -->
    <div class="credits-controls" id="credits-controls" role="group" aria-label="Credits playback controls">
      <div class="credits-controls-row">
        <button type="button" class="credits-ctrl credits-ctrl-rew" id="credits-ctrl-rew" aria-pressed="false" aria-label="Rewind at 4× speed">⏪</button>
        <button type="button" class="credits-ctrl credits-ctrl-pause" id="credits-ctrl-pause" aria-pressed="false" aria-label="Pause auto-scroll">
          <span class="credits-ctrl-icon-pause" aria-hidden="true">❚❚</span>
          <span class="credits-ctrl-icon-play" aria-hidden="true">▶</span>
        </button>
        <button type="button" class="credits-ctrl credits-ctrl-ff" id="credits-ctrl-ff" aria-pressed="false" aria-label="Fast-forward at 8× speed">⏩</button>
        <button type="button" class="credits-ctrl credits-ctrl-replay" id="credits-ctrl-replay" aria-label="Replay credits from the start">↺</button>
      </div>
    </div>
  </section>

  <!-- ░░ WORLD 07 — Secret Zelda mini-game ░░
       Modal overlay (fixed position) so the credits screen stays in
       place underneath. The credits portal opens this without scrolling
       the page; the close button (X) or Esc returns the user to credits.
       The room + sprites + HUD are JS-driven (see main.js).               -->
  <section id="world06" class="section-world06" hidden aria-modal="true" role="dialog" aria-label="World 07">
    <button type="button" class="w06-close" id="w06-close" aria-label="Close World 07 and return to credits">✕</button>
    <div class="w06-frame">
      <div class="w06-stage" id="w06-stage" tabindex="-1"></div>
      <div class="w06-hud">
        <div class="w06-hearts" id="w06-hearts" aria-label="Hearts"></div>
        <div class="w06-scores">
          <span class="w06-score-label">SLASHES</span>
          <span class="w06-score-val" id="w06-score">0</span>
          <span class="w06-score-divider">·</span>
          <span class="w06-score-label">BEST</span>
          <span class="w06-score-val" id="w06-best">0</span>
        </div>
      </div>
      <div class="w06-message" id="w06-message" aria-live="polite"></div>
      <div class="w06-touch" id="w06-touch" aria-hidden="true">
        <div class="w06-dpad">
          <button class="w06-dpad-btn w06-dpad-up"    data-dir="up"    aria-label="Move up">▲</button>
          <button class="w06-dpad-btn w06-dpad-left"  data-dir="left"  aria-label="Move left">◀</button>
          <button class="w06-dpad-btn w06-dpad-right" data-dir="right" aria-label="Move right">▶</button>
          <button class="w06-dpad-btn w06-dpad-down"  data-dir="down"  aria-label="Move down">▼</button>
        </div>
        <button class="w06-slash-btn" id="w06-slash-btn" aria-label="Slash">⚔️</button>
      </div>
    </div>
    <p class="w06-hint" aria-live="polite">
      Arrows / WASD to move · Space or click to slash · Find the secret in the north wall · Esc to exit
    </p>
  </section>

  <!-- ░░ FOOTER ░░ -->
  <footer>
    <div class="footer-inner">
      <p class="footer-name">Chris Makarsky · chrismakarsky.com</p>
    </div>
  </footer>

  <!-- ░░ STAGE CLEAR OVERLAY ░░ -->
  <div id="stage-clear-overlay" aria-hidden="true">
    <h2 class="stage-clear-title">THANK YOU SO MUCH FOR VISITING MY WEBSITE!</h2>
  </div>

  <!-- Confetti canvas hoisted to body level so the rain draws over the
       credits section too. When nested inside #contact (overflow:clip),
       some browsers clipped the fixed-position canvas against the
       contact section's box despite the spec saying fixed escapes
       ancestor clipping — visually the confetti vanished the moment
       the page scrolled to credits. -->
  <canvas id="confetti-canvas" aria-hidden="true"></canvas>

  <!-- canvas-confetti is loaded on-demand by main.js the first time the boss is defeated. -->
  <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="js/main.js?v=226"></script>
</body>
</html>
