@font-face {
  font-family: 'Pebwise Newsreader';
  src: url('./assets/Newsreader-Display-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root { color-scheme: light; --sage: #E6ECE2; --ink: #16211D; --focus: #17644B; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 280px; min-height: 100%; background: var(--sage); color: var(--ink); }
body { -webkit-tap-highlight-color: transparent; }
::selection { color: #FFFEFA; background: #17644B; }
.experience { min-height: 100svh; display: grid; place-items: center; padding: 24px 8px max(24px, env(safe-area-inset-bottom)); }
.composition { width: min(840px, 100%, calc((100svh - 130px) * 1.8)); text-align: center; padding-bottom: clamp(12px, 3vh, 34px); }
.stage { display: block; width: 100%; height: auto; overflow: visible; }
h1 { margin: 18px 0 0; font: 400 clamp(24px, 3.2vw, 40px)/1.2 'Pebwise Newsreader', Georgia, serif; letter-spacing: -0.025em; white-space: nowrap; }
#dots { display: inline-block; width: 0.82em; text-align: left; }
[role='button'] { cursor: pointer; outline: none; touch-action: manipulation; }
.focus-ring { fill: none; stroke: var(--focus); stroke-width: 2; stroke-dasharray: 3 5; opacity: 0; pointer-events: none; vector-effect: non-scaling-stroke; }
[role='button']:focus-visible > .focus-ring { opacity: 1; }

.hit-target { fill: transparent; stroke: none; }
.pot-art, .sprite-art, .sprite-fx, .happy-face, .calm-heart { pointer-events: none; }
@media (max-width: 360px) { h1 { font-size: 23px; letter-spacing: -0.03em; } }
@media (orientation: landscape) and (max-height: 500px) {
  .experience { padding-block: 8px; }
  .composition { width: min(620px, 100%, calc((100svh - 85px) * 1.8)); padding-bottom: 0; }
  h1 { margin-top: 4px; font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto; } }
@media (forced-colors: active) { .focus-ring { stroke: Highlight; } }