:root {
  color-scheme:dark;
  --gold:#e0b96f;
  --gold-muted:#b99a64;
  --surface:#0d0b07;
  --line:#3c3020;
  --header:72px;
  --footer:60px;
  --stage-height:max(360px,calc(100svh - var(--header) - var(--footer)));
  --ease-out:cubic-bezier(.23,1,.32,1);
}
* { box-sizing:border-box; }
html,body { margin:0; min-width:320px; }
body { background:var(--surface); color:var(--gold); font-family:Georgia,"Times New Roman",serif; }
::selection { color:var(--surface); background:var(--gold); }
a,button,summary { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button,a,summary { color:inherit; }
button { font:inherit; }
a { text-underline-offset:5px; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid #f3d39a; outline-offset:4px; }
.page { min-height:100svh; isolation:isolate; }
.topbar {
  height:var(--header); position:relative; z-index:100; display:flex; align-items:center;
  justify-content:space-between; gap:24px; padding-inline:clamp(20px,3vw,48px);
  background:var(--surface); border-bottom:1px solid var(--line);
}
.brand { display:flex; align-items:baseline; gap:20px; white-space:nowrap; }
.brand-name { font-size:19px; font-weight:400; letter-spacing:.24em; }
.brand-sub { color:var(--gold-muted); font-size:11px; letter-spacing:.12em; }
.nav { display:flex; align-items:center; gap:clamp(12px,2vw,28px); font-size:12px; }
.nav>a,.about>summary { min-height:44px; display:flex; align-items:center; text-decoration:none; }
.nav>a,.about>summary,.sound { transition:color 160ms ease,background-color 160ms ease; }
.about>summary { cursor:pointer; list-style:none; }
.about>summary::-webkit-details-marker { display:none; }
.about-panel {
  position:absolute; top:calc(100% - 1px); right:clamp(16px,3vw,48px);
  width:min(360px,calc(100vw - 32px)); padding:28px; background:#17120c; border:1px solid var(--line);
}
.about-panel h2 { margin:0 0 16px; font-size:25px; font-weight:400; }
.about-panel p { margin:0; color:#d7bd90; font:15px/1.7 Georgia,"Times New Roman",serif; }
.about-panel a { display:inline-flex; align-items:center; min-height:44px; margin-top:16px; }
.sound { min-height:44px; min-width:44px; display:flex; align-items:center; justify-content:center; gap:9px; border:0; padding:0 8px; background:none; cursor:pointer; font-size:12px; }
.sound svg,.stage-arrow svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.sound .sound-on,.sound.playing .sound-off { display:none; }
.sound.playing .sound-on { display:block; }
.sound.playing { color:#f3d39a; }
.sound,.stage-arrow { transition:transform 140ms var(--ease-out),color 160ms ease,opacity 160ms ease; }
html:not(.using-keyboard) .sound:active,html:not(.using-keyboard) .stage-arrow:active { transform:scale(.97); }
.stage-viewport {
  position:relative; width:100%; height:var(--stage-height); overflow-x:auto; overflow-y:hidden;
  overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#74603e var(--surface);
}
.stage-viewport:focus-visible { outline:2px solid #f3d39a; outline-offset:-4px; }
.artboard {
  position:relative; margin-inline:auto; width:calc(var(--stage-height) * 1.5); height:var(--stage-height); flex-shrink:0;
  background:#120c05 url('/assets/background-clean.png') center/100% 100% no-repeat;
  background-image:image-set(url('/assets/background-clean.webp') type('image/webp'),url('/assets/background-clean.png') type('image/png'));
}
.artboard::after { content:""; position:absolute; inset:0; z-index:80; pointer-events:none; box-shadow:inset 0 8px 35px rgba(0,0,0,.5); }
.wire {
  position:absolute; z-index:20; top:5.5%; width:3px; margin-left:-1.5px; border-radius:3px;
  background:repeating-linear-gradient(0deg,#38220d 0 3px,#b37a31 3px 5px,#5c3713 5px 8px);
  box-shadow:-1px 0 rgba(238,182,76,.2),1px 0 #201206; transform-origin:50% 0; pointer-events:none;
  animation:pull-a var(--speed) ease-in-out var(--delay) infinite alternate;
}
.puppet {
  position:absolute; z-index:30; padding:0; border:0; background:none; cursor:pointer;
  transform-origin:50% 12%; animation:sway var(--speed) ease-in-out var(--delay) infinite alternate;
  filter:drop-shadow(0 6px 4px rgba(0,0,0,.3));
}
.puppet .sprite { position:absolute; inset:0; background-repeat:no-repeat; transition:transform 140ms var(--ease-out); }
.puppet.mammal .sprite { background-image:url('/assets/mammals-sprites.webp'); background-size:500% 300%; }
.puppet.bird .sprite { background-image:url('/assets/birds-sprites.webp'); background-size:400% 200%; }
.puppet.active,.puppet:focus-visible { z-index:40; }
.puppet.active .sprite { filter:brightness(1.12); }
html:not(.using-keyboard) .puppet:active .sprite { transform:scale(.97); }
.puppet:focus-visible { outline:2px solid #fff0c9; outline-offset:0; }
.puppet-label {
  position:absolute; bottom:8%; left:50%; transform:translateX(-50%); padding:7px 10px;
  background:#17120c; color:#f3d39a; font:12px/1.2 Georgia,"Times New Roman",serif;
  white-space:nowrap; pointer-events:none; opacity:0; transition:opacity 120ms ease;
}
.puppet:focus-visible .puppet-label,.puppet.active .puppet-label { opacity:1; }
@keyframes sway { from { transform:translateY(-1px) rotate(-.8deg); } to { transform:translateY(1px) rotate(.8deg); } }
@keyframes pull-a { from { transform:scaleY(.995); } to { transform:scaleY(1.005); } }
.stage-footer { min-height:var(--footer); display:flex; align-items:center; justify-content:center; gap:32px; padding:8px 20px; border-top:1px solid var(--line); }
.hint { margin:0; color:var(--gold-muted); font-size:12px; line-height:1.6; font-weight:400; letter-spacing:.08em; text-align:center; }
.stage-controls { display:none; align-items:center; gap:12px; }
.has-pan .stage-controls { display:flex; }
.stage-controls span { color:var(--gold-muted); font-size:12px; white-space:nowrap; }
.stage-arrow { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--line); border-radius:50%; background:none; cursor:pointer; }
.stage-arrow:disabled { opacity:.3; cursor:default; }
.audio-notice { position:fixed; z-index:110; left:50%; bottom:calc(var(--footer) + 16px); transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); margin:0; padding:12px 16px; background:#17120c; border:1px solid var(--line); color:#f3d39a; font:14px/1.5 Georgia,"Times New Roman",serif; }
.audio-notice[hidden] { display:none; }
.using-keyboard .puppet,.using-keyboard .wire,.stage-paused .puppet,.stage-paused .wire { animation-play-state:paused; }
.using-keyboard .puppet .sprite,.using-keyboard .puppet-label { transition:none; }
@media (hover:hover) and (pointer:fine) {
  .nav>a:hover,.about>summary:hover,.sound:hover { color:#fff0c9; }
  .puppet:hover { z-index:40; }
  .puppet:hover .puppet-label { opacity:1; }
  .stage-arrow:not(:disabled):hover { color:#fff0c9; background:#211a10; }
}
@media (max-width:760px) {
  :root { --header:64px; --footer:92px; }
  .topbar { padding-inline:18px; gap:12px; }
  .brand-name { font-size:16px; letter-spacing:.15em; }
  .brand-sub,.nav .animals-link,.nav>.credits-link,.sound-label { display:none; }
  .nav { gap:12px; }
  .about-panel { right:16px; }
  .stage-footer { flex-direction:column; justify-content:center; gap:2px; padding:6px 16px; }
  .hint { font-size:11px; letter-spacing:.06em; }
  .stage-controls { gap:18px; }
  .stage-arrow { width:44px; height:44px; }
}
@media (prefers-reduced-motion:reduce) {
  .puppet,.wire { animation:none; }
  .puppet .sprite,.sound,.stage-arrow { transition:none; }
  .puppet:active .sprite,.sound:active,.stage-arrow:active { transform:none!important; }
}