*{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:
      radial-gradient(var(--slot-line) 1.2px, transparent 1.4px) 0 0/34px 34px,
      var(--bg);
    color:var(--ink);
    font-family:"Nunito Sans",system-ui,sans-serif;font-size:16px;line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:640px;margin:0 auto;padding:48px 22px 64px;text-align:center}
  .hero-row{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:12px}
  .pup{width:104px;height:104px}
  .hero-box{
    width:58px;height:58px;border-radius:13px;display:grid;place-items:center;font-size:1.7rem;
    border:3px solid;box-shadow:inset 0 -4px 0 rgba(0,0,0,.12), var(--shadow);position:relative;overflow:hidden;
  }
  .hero-box::after{content:"";position:absolute;left:8%;right:8%;top:5%;height:38%;
    border-radius:9px 9px 45% 45%;background:linear-gradient(var(--gloss),transparent);pointer-events:none}
  .hb1{background:var(--starter-soft);border-color:var(--starter);transform:rotate(-7deg)}
  .hb2{background:var(--dino-soft);border-color:var(--dino);transform:rotate(6deg)}
  .hb3{background:var(--world-soft);border-color:var(--world);transform:rotate(-5deg)}
  .hb4{background:var(--acc-soft);border-color:var(--acc);transform:rotate(8deg)}
  .stars{font-size:1.1rem;letter-spacing:.4em;color:#E8C63F;margin:6px 0 18px;text-shadow:0 1px 2px rgba(0,0,0,.12)}
  .wall{
    background:var(--surface-2);border:1px dashed var(--line);border-radius:16px;
    padding:20px 24px;margin:26px 0 0;
  }
  .wall h2{font-family:"Fredoka",sans-serif;font-weight:500;font-size:1.15rem;margin:0 0 8px}
  .wall p{text-align:center;font-size:.88rem;margin-bottom:0}
  .eye{transform-box:fill-box;transform-origin:center;animation:blink 4.6s infinite}
  @keyframes blink{0%,93.5%,100%{transform:scaleY(1)}95.5%,97.5%{transform:scaleY(.08)}}
  h1{
    font-family:"Fredoka",sans-serif;font-weight:600;font-size:2.3rem;margin:0 0 14px;
    letter-spacing:.01em;text-wrap:balance;
  }
  p{color:var(--ink-soft);max-width:52ch;margin:0 auto 14px;text-align:left}
  p strong{color:var(--ink)}
  .card{
    background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
    padding:26px 26px 28px;margin:34px 0 0;
  }
  .card h2{font-family:"Fredoka",sans-serif;font-weight:500;font-size:1.35rem;margin:0 0 10px}
  .btn{
    display:inline-block;font-family:"Fredoka",sans-serif;font-weight:500;font-size:1.02rem;
    text-decoration:none;border-radius:999px;padding:12px 28px;margin:10px 0 4px;
    background:var(--cta);color:var(--cta-text);transition:transform .1s ease;
  }
  .btn:hover{transform:translateY(-2px);background:var(--cta-deep);color:var(--cta-text)}
  .btn:focus-visible{outline:3px solid var(--cta);outline-offset:3px}
  .small{font-size:.78rem;color:var(--ink-soft);margin:8px auto 0;text-align:center}
  .credits{
    margin-top:40px;padding-top:20px;border-top:1px solid var(--line);
    font-size:.82rem;color:var(--ink-soft);
  }
  .credits .heart{color:var(--starter)}
  @media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}