* { box-sizing: border-box }
  [hidden] { display: none !important }
  body { margin: 0; background: #0e0e0e; color: #cbd0d5; font: 13px Tahoma, Verdana, sans-serif; }
  .photo-stage { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center }
  .photo-frame { width: min(1536px, 100vw, calc(100vh * 4 / 3)); width: min(1536px, 100vw, calc(100dvh * 4 / 3)); aspect-ratio: 4/3; overflow: hidden }
  #photo { width: 100%; height: 100%; display: block }
  #viewer-actions { position: fixed; inset: auto 0 16px; display: flex; justify-content: center; gap: 8px }
  #status { position: fixed; inset: auto 12px 45px; text-align: center }
  .sr-only { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
  button, .fileLabel { color: #e0e5e9; font: inherit; padding: 7px 12px; border-radius: 2px; border: 1px solid #62717b; background: #303943; cursor: pointer }
  button:hover, .fileLabel:hover { background: #45525e }
  :focus-visible { outline: 2px solid #d7ecff; outline-offset: 3px }
  #forest { position: fixed; inset: 0; width: 100%; height: 100%; display: block; background: #0d1417; touch-action: none; }
  #emergence { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
  #shade { z-index: 2; position: fixed; inset: 0; pointer-events: none; opacity: 0; background: #000; transition: opacity 120ms linear; }
  #shade.forest-reveal { transition-duration: 1500ms }
  #shade.dark { opacity: 1; transition: none }
  #hint { position: fixed; bottom: 19px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 7px 10px; background: #080b0cbb; color: #d7dbd7; font: 12px Tahoma, sans-serif; transition: opacity 1s }
  #back { position: fixed; top: 12px; right: 12px; background: #080b0caa }
  #walk { position: fixed; bottom: 48px; right: 14px; touch-action: none }
  #walk:not([hidden]) { display: none }
  @media (pointer: coarse) { #walk:not([hidden]) { display: block } }

  #status a { color: #a9d7fa }

  #forest-cards { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none }
  #discover-hud { position: fixed; inset: 0; pointer-events: none; color: #eee2c4 }
  #discover-hud button { pointer-events: auto }
  #quest { position: absolute; top: 12px; left: 12px; display: grid; grid-template-columns: 1fr auto; gap: 5px 13px; padding: 8px 11px; border-left: 2px solid #b49559; background: #080b0cba; font-size: 12px }
  #quest strong { color: #e9ce8e; letter-spacing: .08em; text-transform: uppercase }
  #quest-count { font-variant-numeric: tabular-nums }
  #quest-detail { grid-column: 1 / -1; color: #c7bdab; font-size: 10px }
  #aim { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; transform: translate(-50%,-50%); border-radius: 50%; background: #d3c4a577 }
  #aim[data-target="true"] { background: #ffdf8e; box-shadow: 0 0 6px #ffd78b }
  #forest-hands { position: fixed; inset: 0; overflow: hidden; pointer-events: none }
  .forest-arm { position: absolute; bottom: -1px; width: clamp(144px, min(36vw, 34vh), 318px); aspect-ratio: 240 / 260; transform-origin: 50% 100%; }
  .arm-art { display: block; width: 100%; height: 100%; position: absolute; inset: 0 }
  #left-arm { left: clamp(0px, 6vw, 96px) }
  #right-arm { right: clamp(0px, 6vw, 96px); transform: translateY(104%) }
  #forest-hands[data-intro] #left-arm { animation: search-left var(--hand-intro-duration) ease-in-out both }
  #forest-hands[data-intro] #right-arm { animation: search-right var(--hand-intro-duration) ease-in-out both }
  .left-grip, .held-thumb, #forest-hands[data-equipped] .left-palm-open { display: none }
  #forest-hands[data-equipped] .left-grip, #forest-hands[data-equipped] .held-thumb { display: block }
  #pantlaza { position: absolute; top: 8%; left: 53%; width: 37%; padding: 0; border: 0; border-radius: 5%; background: transparent; transform: rotate(-10deg); pointer-events: auto; }
  #pantlaza:disabled { pointer-events: none }
  #pantlaza img { display: block; width: 100%; height: auto; border-radius: 5%; filter: brightness(.62); transition: filter 480ms ease-out }
  #pantlaza[aria-pressed="true"] img { filter: brightness(1.12) drop-shadow(0 0 9px #e9b862b8) }
  @keyframes search-left {
    0% { transform: translate(-5%, 94%) rotate(-12deg) }
    28% { transform: translate(4%, 12%) rotate(4deg) }
    45% { transform: translate(6%, 0) rotate(9deg) }
    65% { transform: translate(-5%, 104%) rotate(-9deg) }
    100% { transform: none }
  }
  @keyframes search-right {
    0% { transform: translate(4%, 98%) rotate(9deg) }
    32% { transform: translate(-5%, 6%) rotate(-8deg) }
    57% { transform: translate(-3%, 14%) rotate(4deg) }
    72% { transform: translate(-5%, 9%) rotate(-4deg) }
    100% { transform: translateY(104%) }
  }
  @media (prefers-reduced-motion: reduce) {
    #shade.forest-reveal { transition-duration: 320ms }
    #forest-hands[data-intro] #left-arm, #forest-hands[data-intro] #right-arm { animation-timing-function: linear }
    #pantlaza img { transition-duration: 150ms }
  }
  #discover-hud kbd { padding: 1px 3px; border: 1px solid #c5b28b70; border-radius: 2px; font: inherit }
  #discover { position: absolute; bottom: 13%; left: 50%; transform: translateX(-50%); background: #17140eeb; border-color: #a6864c; color: #ffe5ac; white-space: nowrap }
  #discovery { position: absolute; top: 23%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 11px; padding: 8px 13px 8px 8px; background: #11110ce8; border: 1px solid #aa9058; max-width: 82vw }
  #discovery img { width: 42px; height: auto }
  #discovery strong { display: block; margin-bottom: 4px; color: #e9ce8e; font-size: 10px; letter-spacing: .09em; text-transform: uppercase }
  #discovery-name { font-size: 12px }
  #hint { max-width: calc(100vw - 175px); white-space: normal; text-align: center }
  #discover-hud[data-touch="true"] kbd { display: none }
  #discover-hud[data-touch="true"] #discover { right: 14px; left: auto; bottom: 93px; transform: none }