* { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      min-height: 100vh;
      background: linear-gradient(135deg, #f5f0eb 0%, #e8e4df 100%);
      font-family: system-ui, -apple-system, sans-serif;
      padding: 20px;
    }
    h1 {
      text-align: center;
      color: #5a5a5a;
      font-size: 24px;
      font-weight: 300;
      margin-bottom: 8px;
      letter-spacing: 2px;
    }
    .subtitle {
      text-align: center;
      color: #999;
      font-size: 12px;
      margin-bottom: 30px;
      font-style: italic;
    }
    .gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      max-width: 1100px;
      margin: 0 auto;
    }
    .card {
      width: 240px;
      padding: 16px;
      background: white;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
      text-align: center;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      cursor: pointer;
      user-select: none;
    }
    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    }
    .terrarium {
      width: 200px;
      height: 200px;
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(245,240,235,0.95) 0%, rgba(240,235,230,0.98) 100%);
      box-shadow: 0 2px 8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.8);
      margin: 0 auto 12px;
      overflow: hidden;
      position: relative;
    }
    .terrarium::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 35%;
      background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
      border-radius: 12px 12px 0 0;
      pointer-events: none;
      z-index: 5;
    }
    .creature-svg {
      position: absolute;
      bottom: 8px; left: 0; right: 0;
      z-index: 3;
    }
    .creature-svg:hover {
      cursor: pointer;
    }

    /* ─── Eye Tracking: Invisible 3×3 Grid ─── */
    .eye-grid {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      z-index: 10;
      pointer-events: auto;
    }
    .eye-grid-cell {
      /* invisible hit areas */
    }
    .terrarium {
      --pupil-dx: 0;
      --pupil-dy: 0;
    }
    .terrarium:has(.eye-grid-cell:nth-child(1):hover) { --pupil-dx: -1.5; --pupil-dy: -2; }
    .terrarium:has(.eye-grid-cell:nth-child(2):hover) { --pupil-dx: 0; --pupil-dy: -2; }
    .terrarium:has(.eye-grid-cell:nth-child(3):hover) { --pupil-dx: 1.5; --pupil-dy: -2; }
    .terrarium:has(.eye-grid-cell:nth-child(4):hover) { --pupil-dx: -2; --pupil-dy: 0; }
    /* nth(5) is center — default 0,0 */
    .terrarium:has(.eye-grid-cell:nth-child(6):hover) { --pupil-dx: 2; --pupil-dy: 0; }
    .terrarium:has(.eye-grid-cell:nth-child(7):hover) { --pupil-dx: -1.5; --pupil-dy: 1.5; }
    .terrarium:has(.eye-grid-cell:nth-child(8):hover) { --pupil-dx: 0; --pupil-dy: 1.5; }
    .terrarium:has(.eye-grid-cell:nth-child(9):hover) { --pupil-dx: 1.5; --pupil-dy: 1.5; }

    .pupil-group {
      transition: transform 0.15s ease-out;
      transform: translate(calc(var(--pupil-dx, 0) * 1px), calc(var(--pupil-dy, 0) * 1px));
    }
    .creature-name {
      font-size: 15px;
      font-weight: 600;
      color: #444;
      margin-bottom: 2px;
    }
    .creature-species {
      font-size: 11px;
      color: #999;
      font-style: italic;
      margin-bottom: 4px;
    }
    .creature-traits {
      font-size: 10px;
      color: #aaa;
      line-height: 1.5;
    }
    .creature-seed {
      font-size: 9px;
      color: #bbb;
      font-family: 'Courier New', monospace;
      margin-top: 4px;
    }
    .verified {
      font-size: 8px;
      color: #8aaa8a;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-top: 6px;
      opacity: 0.7;
    }
    .verified::before { content: '✓ '; }
    .sound-hint {
      font-size: 10px;
      color: #bbb;
      margin-top: 2px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .card:hover .sound-hint { opacity: 0.7; }
    .controls {
      text-align: center;
      margin: 20px 0;
    }
    .discover-btn {
      background: linear-gradient(135deg, #8faa8f 0%, #6b8e6b 100%);
      color: white;
      border: none;
      padding: 12px 28px;
      border-radius: 24px;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
      box-shadow: 0 2px 8px rgba(107, 142, 107, 0.3);
      letter-spacing: 0.5px;
    }
    .discover-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(107, 142, 107, 0.4);
      background: linear-gradient(135deg, #9dba9d 0%, #7a9e7a 100%);
    }
    .discover-btn:active {
      transform: translateY(0);
      box-shadow: 0 1px 4px rgba(107, 142, 107, 0.3);
    }
    .discover-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }
    .counter {
      color: #aaa;
      font-size: 11px;
      margin-top: 8px;
      font-style: italic;
    }
    .footer {
      text-align: center;
      margin-top: 30px;
      color: #bbb;
      font-size: 11px;
      padding: 20px;
    }
    .card.new-creature {
      animation: fadeInUp 0.4s ease-out;
    }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ─── Creature Animations ─── */
    @keyframes breathe {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(var(--breath-scale, 1.02)); }
    }
    @keyframes wobble {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(var(--wobble-amount, 2deg)); }
      75% { transform: rotate(calc(var(--wobble-amount, 2deg) * -0.7)); }
    }
    @keyframes blink {
      0%, 90%, 100% { opacity: 0; }
      92%, 96% { opacity: 1; }
    }
    @keyframes blink-async-left {
      0%, 88%, 100% { opacity: 0; }
      90%, 94% { opacity: 1; }
    }
    @keyframes blink-async-right {
      0%, 86%, 100% { opacity: 0; }
      88%, 92% { opacity: 1; }
    }
    @keyframes click-bounce {
      0% { transform: scale(1); }
      30% { transform: scale(1.2); }
      50% { transform: scale(0.92); }
      70% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }
    @keyframes antenna-sway {
      0%, 100% { transform: rotate(0deg) translateY(0); }
      50% { transform: rotate(5deg) translateY(-2px); }
    }
    @keyframes wing-flutter {
      0%, 100% { transform: scaleY(1); }
      50% { transform: scaleY(0.75); }
    }
    @keyframes tail-wag {
      0%, 100% { transform: translateX(0) rotate(0deg); }
      25% { transform: translateX(3px) rotate(2deg); }
      75% { transform: translateX(-2px) rotate(-1deg); }
    }

    /* ─── Hover Reactions ─── */
    .creature-group {
      animation: breathe var(--breath-speed, 4s) ease-in-out infinite, wobble 6s ease-in-out infinite;
      transform-origin: center 60%;
      transition: transform 0.2s ease;
    }
    .card:hover .creature-group {
      --breath-scale: 1.04;
    }
    .card:hover .antennae-group {
      animation: antenna-sway 2s ease-in-out infinite;
    }
    .card:hover .wingnubs-group {
      animation: wing-flutter 0.6s ease-in-out infinite;
    }
    .card:hover .tailcurl-group {
      animation: tail-wag 1.2s ease-in-out infinite;
    }
    .eyelid {
      opacity: 0;
      animation: blink var(--blink-interval, 6s) ease-in-out infinite;
    }
    .lid-left-async {
      opacity: 0;
      animation: blink-async-left calc(var(--blink-interval, 6s) * 1.15) ease-in-out infinite;
    }
    .lid-right-async {
      opacity: 0;
      animation: blink-async-right calc(var(--blink-interval, 6s) * 1.15) ease-in-out infinite;
    }
    /* Mouth transitions for hover */
    .mouth-path {
      transition: d 0.3s ease;
    }
  
    [hidden]{display:none!important}
    body{color:#444;padding:24px 16px}
    a{color:#3e6646}button,a{touch-action:manipulation}
    button:focus-visible,a:focus-visible{outline:2px solid #45684a;outline-offset:4px}
    .subtitle{font-size:16px;color:#65605b;line-height:1.6;max-width:650px;margin:8px auto 24px}
    .creature-species,.creature-traits{font-size:14px;color:#68615c}
    .creature-seed,.counter,.footer{font-size:12px;color:#716960;overflow-wrap:anywhere}
    .creature-name{font-size:18px}.card{max-width:100%}
    .chirp-button,.inspect-button,.copy-button{font:inherit;font-size:14px;cursor:pointer;color:#365b3d;background:#eef3ec;border:1px solid #afc0aa;border-radius:18px;padding:8px 12px;margin-top:12px}
    .card-links{display:flex;justify-content:center;gap:14px;margin-top:12px;font-size:14px}
    .view-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;margin:0 auto 24px;font-size:14px}
    .view-nav a[aria-current=page]{font-weight:600;text-decoration-thickness:2px;text-underline-offset:5px}
    .creature-svg{width:100%;height:100%}
    .card:hover .sound-hint{opacity:1}
    .gallery[data-view=terrarium] .card{width:300px}
    .gallery[data-view=terrarium] .terrarium{width:100%;height:auto;aspect-ratio:1}
    .gallery[data-view=creature] .card{width:400px}
    .gallery[data-view=creature] .terrarium{width:100%;height:auto;aspect-ratio:1}
    .encounter-dialog{width:min(480px,calc(100vw - 24px));max-height:90svh;overflow:auto;border:1px solid #b5bdaa;border-radius:20px;padding:20px;background:#f5f0eb;margin:auto;color:#444}
    .encounter-dialog::backdrop{background:#111b18b3}
    .encounter-dialog .card{width:100%;box-shadow:none}
    .encounter-dialog .terrarium{width:100%;height:auto;aspect-ratio:1}
    .close-encounter{display:block;margin:0 0 12px auto;background:white;border:1px solid #a4b29f;border-radius:20px;padding:8px 14px;font:inherit;cursor:pointer}
    #copyStatus{min-height:1.5em;margin-top:12px;font-size:14px;color:#4c5948}
    @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

    @media(min-width:700px){.view-nav{position:relative}.view-nav .back-link{position:absolute;left:24px;top:0}}