html, body { margin: 0; min-height: 100%; background: #f2c9a8; }
  body {
    overflow-x: hidden;
    font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
  }

  /* custom hand cursor: hide the system cursor except where you type text */
  html.custom-cursor, html.custom-cursor * { cursor: none !important; }
  html.custom-cursor :is(textarea, [contenteditable="true"], input:not([type=button],[type=submit],[type=reset],[type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=image],[type=hidden])) { cursor: text !important; }
  html.err, html.err * { cursor: auto !important; }
  html.err #hand { display: none !important; }

  /* ---------- the scene sits behind everything ---------- */
  #scene {
    position: fixed; inset: 0; z-index: 0;
    width: 100vw; height: 100vh; height: 100lvh;
    display: block; touch-action: none;
    -webkit-user-select: none; user-select: none;
    opacity: 0; transition: opacity 1.2s ease;
  }
  #scene.ready { opacity: 1; }

  /* ---------- your site content goes in #site (above the grass) ---------- */
  #site {
    position: relative; z-index: auto;
    min-height: 100vh;
    pointer-events: none;           /* empty areas let the pointer reach the grass */
  }
  #site > * { pointer-events: auto; } /* real content stays clickable / selectable */

  /* ---------- hand cursor ---------- */
  #hand {
    position: fixed; left: 0; top: 0; z-index: 1000;
    width: 22px; height: 22px;
    pointer-events: none;
    opacity: 0; transition: opacity .25s ease;
    will-change: transform, opacity;
  }
  #hand.on { opacity: 1; }
  #hand svg {
    position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
    transform-origin: 50% 60%;
    transition: transform .22s cubic-bezier(.3, 1.6, .5, 1), opacity .12s ease;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .22));
  }
  #hand .point { opacity: 0; }
  #hand.pointing .open { opacity: 0; }
  #hand.pointing .point { opacity: 1; }
  #hand .open { transform-origin: 23% 10%; }
  #hand.down .open { transform: scale(.86); }
  #hand.down .point { transform: scale(.9); }

  /* ---------- time-of-day pill ---------- */
  .tg-pill {
    position: fixed; z-index: 20;
    top: calc(18px + env(safe-area-inset-top, 0px));
    left: 50%; transform: translateX(-50%);
    display: flex; gap: 2px; padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .34);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 6px 24px rgba(60, 30, 20, .10), inset 0 1px 0 rgba(255, 255, 255, .4);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    transition: background .8s ease, border-color .8s ease, box-shadow .8s ease;
  }
  .tg-pill-ind {
    position: absolute; left: 0; top: 4px; bottom: 4px; width: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
    transition: transform .45s cubic-bezier(.3, 1.25, .45, 1), width .45s cubic-bezier(.3, 1.25, .45, 1), background .8s ease;
  }
  .tg-pill button {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 8px;
    padding: 9px 18px;
    border: 0; border-radius: 999px; background: none;
    font-family: inherit; font-weight: 500; font-size: 14px; line-height: 1; letter-spacing: .01em;
    color: rgba(60, 50, 50, .72);
    transition: color .35s ease;
  }
  .tg-pill button svg { width: 15px; height: 15px; flex: none; }
  .tg-pill button[aria-checked="true"] { color: #2a2420; }
  .tg-pill button:focus-visible { outline: 2px solid rgba(255, 255, 255, .9); outline-offset: 1px; }
  body[data-mode="night"] .tg-pill {
    background: rgba(30, 45, 95, .38);
    border-color: rgba(190, 205, 255, .22);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .08);
  }
  body[data-mode="night"] .tg-pill-ind { background: rgba(225, 233, 255, .92); }
  body[data-mode="night"] .tg-pill button { color: rgba(220, 230, 255, .8); }
  body[data-mode="night"] .tg-pill button[aria-checked="true"] { color: #15204a; }

  .sound {
    position: fixed; z-index: 20;
    right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    width: 40px; height: 40px; padding: 0; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .3);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    color: rgba(60, 50, 50, .78);
    transition: background .8s ease, color .3s ease, transform .2s ease;
  }
  .sound:hover { transform: scale(1.06); }
  .sound svg { width: 20px; height: 20px; }
  .sound[aria-pressed="false"] .waves, .sound[aria-pressed="true"] .mute { display: none; }
  body[data-mode="night"] .sound { background: rgba(30, 45, 95, .38); border-color: rgba(190, 205, 255, .22); color: rgba(220, 230, 255, .85); }
  #hint {
    position: fixed; left: 50%; z-index: 10;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    font-size: 12.5px; letter-spacing: .08em; text-transform: lowercase;
    color: rgba(255, 255, 255, .88);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
    pointer-events: none; white-space: nowrap;
    transition: opacity 1.2s ease;
  }
  #hint.gone { opacity: 0; }

  #err {
    position: fixed; inset: 0; display: none; place-items: center; z-index: 2000;
    padding: 24px; text-align: center; color: #fff; font-size: 15px; line-height: 1.5;
    background: #3a4a2a;
  }

  @media (max-width: 440px) {
    .tg-pill button { padding: 9px 12px; gap: 6px; font-size: 13px; }
    .tg-pill button svg { width: 13px; height: 13px; }
  }