:root {
  color-scheme: light;
  font-family: Georgia, 'Times New Roman', serif;
  color: #304843;
  background: #f4edda;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 280px;
  min-height: 100svh;
  background:
    radial-gradient(ellipse at 50% 30%, #fffcf0 0%, #fffcf000 70%),
    #f4edda;
}

.storybook {
  width: min(100% - 48px, 820px);
  margin: 0 auto;
  padding: 42px 0 24px;
}

.heading { text-align: center; margin-bottom: 25px; }
.eyebrow {
  margin: 0 0 12px;
  color: #8b6346;
  font: 700 10px/1.4 'Courier New', monospace;
  letter-spacing: .24em;
}
h1 { margin: 0; font-size: clamp(29px, 5.4vw, 46px); font-weight: 400; letter-spacing: -.045em; }
.invitation { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: #6e7660; }

.picture-frame {
  padding: 8px 8px 0;
  background: #fffbeb;
  border: 1px solid #bcaa84;
  border-radius: 4px;
  box-shadow: 0 3px 0 #ddcdb0, 0 12px 28px #66533314;
}
.scene {
  position: relative;
  aspect-ratio: 640 / 420;
  overflow: hidden;
  background: #55b7b5;
  border: 2px solid #365651;
  isolation: isolate;
}
canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.bird-controls { position: absolute; inset: 0; }
.bird-target {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 13.2%;
  height: 17.2%;
  min-width: 44px;
  min-height: 44px;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 2px solid transparent;
  border-radius: 45%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.bird-target:hover:not([aria-disabled="true"]) { background: #fff9c814; border-color: #fff9c85c; }
.bird-target:focus-visible { outline: 3px dashed #fff5b7; outline-offset: 3px; background: #fff9c820; }
.bird-target[aria-disabled="true"] { cursor: default; }
.page-edge {
  display: flex;
  justify-content: space-between;
  padding: 10px 7px 9px;
  color: #8b8066;
  font: 10px/1 'Courier New', monospace;
  letter-spacing: .13em;
}
.controls { display: flex; gap: 16px; justify-content: space-between; align-items: center; margin-top: 22px; }
.controls p { margin: 0; font-size: 15px; font-style: italic; line-height: 1.5; }
.play-button {
  flex-shrink: 0;
  padding: 11px 16px;
  border: 1px solid #405e50;
  border-radius: 5px;
  box-shadow: 0 3px 0 #bdc2a8;
  background: #e6ead3;
  color: #304843;
  font: 700 12px/1.3 'Courier New', monospace;
  cursor: pointer;
  touch-action: manipulation;
}
.play-button span { font-size: 10px; margin-right: 6px; }
.play-button:hover:not([aria-disabled="true"]) { background: #d9e2bd; }
.play-button:active:not([aria-disabled="true"]) { transform: translateY(2px); box-shadow: 0 1px 0 #bdc2a8; }
.play-button:focus-visible { outline: 3px solid #b56744; outline-offset: 4px; }
.play-button[aria-disabled="true"] { opacity: .65; cursor: default; }
.footnote { margin: 24px 0 0; text-align: center; color: #8b8066; font: 10px/1.6 'Courier New', monospace; }
.no-script { position: absolute; inset: auto 10px 10px; padding: 12px; background: #fffbeb; text-align: center; }

@media (max-width: 540px) {
  .storybook { width: calc(100% - 24px); padding-top: 27px; }
  .heading { margin-bottom: 19px; }
  .invitation { max-width: 290px; margin: 10px auto 0; font-size: 13px; }
  .picture-frame { padding: 4px 4px 0; }
  .page-edge { font-size: 8px; padding: 9px 4px; }
  .controls { flex-direction: column; gap: 12px; text-align: center; margin-top: 18px; }
  .controls p { font-size: 14px; }
  .footnote { margin-top: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .play-button:active:not([aria-disabled="true"]) { transform: none; }
}

.play-button { min-height: 44px; }

html.embedded body { display: flex; min-height: 100svh; }
html.embedded .storybook {
  width: min(calc(100% - 24px), 820px, calc((100svh - 128px) * 1.5238));
  padding: 8px 0;
  margin: auto;
}
html.embedded .heading,
html.embedded .footnote { display: none; }
html.embedded .controls { margin-top: 12px; }