/* Clip the scene without allowing focus or resizing to scroll its flight lane. */
#playground { overflow: clip; }

/* Keep the original handwritten margins; darker ink adds contrast without labels. */
#playground .desktop-keepsake > span,
#playground .clip-drag-cue,
#playground .game-create-cue,
#playground .coastal-gulls > span {
  text-shadow: 0 1px 1px #fff, 0 0 5px #fffffff2, 0 0 9px #f1f8ffd9;
  font-family: "Bradley Hand", "Segoe Print", cursive;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
}

#playground .desktop-keepsake > span { display: inline-block; }
#playground .detail-note-margin {
  left: 12px;
  bottom: -34px;
  width: max-content;
  height: auto;
  color: #153b49;
}
#playground .detail-note-margin svg {
  left: auto;
  right: -24px;
  top: -12px;
  width: 36px;
}
#playground .detail-schedule-margin {
  left: 2px;
  top: -37px;
  color: #733e70;
  text-shadow: none;
  transform: rotate(-2deg);
}
#playground .detail-schedule-margin svg {
  left: auto;
  right: -34px;
  top: 2px;
  width: 43px;
  height: 24px;
}
#playground .detail-music-margin {
  left: 50%;
  top: calc(100% + 11px);
  color: #244e45;
  gap: 3px;
  transform: translateX(-50%) rotate(2deg);
}
#playground .clip-drag-cue { color: #b3412e; }
#playground .game-create-cue {
  top: calc(100% + 10px);
  color: #703ca0;
  min-height: 36px;
  transform: translateX(-50%) rotate(-3deg);
}
#playground .game-create-cue svg { right: -23px; top: -12px; width: 32px; }
#playground .desktop-keepsake svg,
#playground .clip-drag-cue svg,
#playground .game-create-cue svg {
  overflow: visible;
  opacity: 1;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 5px #e5f2ffcc);
}
#playground .desktop-keepsake svg path,
#playground .clip-drag-cue svg path,
#playground .game-create-cue svg path {
  stroke-width: 1.65px;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#playground .coastal-gulls > span {
  top: 52px;
  left: -10px;
  color: #294853;
  font-size: 15px;
  transform: rotate(-3deg);
}

/* A small helper with a real destination; face and words have separate space. */
#playground .desktop-buddy {
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: rotate(-3deg);
}
#playground .desktop-buddy-button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: auto;
  min-height: 48px;
  height: auto;
  padding: 8px 12px 8px 9px;
  border: 1px solid #fffdf2;
  border-radius: 8px 9px 12px 8px;
  color: #234652;
  background: linear-gradient(125deg, #fffcec, #f4edda);
  box-shadow: inset 0 1px #fff, 0 2px 0 #bdc0ac, 3px 10px 12px -7px #1e3b4966;
  transition: transform 160ms ease-out;
}
#playground .buddy-face {
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid #d6c59b;
  border-radius: 50%;
  background: #eedca6;
  transform: none;
}
#playground .buddy-eye { top: 8px; width: 3px; height: 4px; }
#playground .buddy-eye.left { left: 7px; }
#playground .buddy-eye.right { right: 7px; }
#playground .buddy-smile { left: 8px; top: 15px; width: 10px; height: 5px; }
#playground .buddy-caption {
  max-width: none;
  white-space: nowrap;
  font: italic 16px/1.2 "Bradley Hand", "Segoe Print", cursive;
  letter-spacing: 0;
}
#playground .buddy-caption > span { display: inline-block; margin-left: 3px; font: 16px system-ui; }
#playground .desktop-buddy-button:active { transform: translateY(1px); }
#playground .desktop-buddy-button:focus-visible,
#playground .game-create-cue:focus-visible { outline: 2px solid #315d70; outline-offset: 4px; }

/* Layer contact and cast shadows on the objects, never on their drag coordinates. */
#playground .object-music .mixtape-case {
  box-shadow: inset 1px 1px 0 #fff, inset -1px -2px 1px #9cacae,
    0 3px 0 #899b9f, 0 5px 2px #26414d2e, 5px 16px 17px -8px #183b4d70;
}
#playground .object-photo .schedule-print {
  box-shadow: inset 0 0 0 1px #fffef8, 1px 3px 0 #bbbba5,
    2px 5px 3px #25465529, 6px 17px 18px -8px #183b4d70;
}
#playground .comedy-clip {
  box-shadow: inset 0 0 0 1px #fff7df66, 1px 3px 0 #5d777769,
    2px 5px 3px #25465529, 5px 15px 17px -8px #183b4d80;
}
#space > .overlay[data-type="game"][data-size] .overlay-shell {
  box-shadow: inset 0 1px 0 #fffdf0, inset 0 -3px 0 #819b93,
    0 3px 0 #4d7075, 0 6px 2px #26414d30, 8px 22px 26px -12px #183b4d80;
}
#space > .overlay[data-type="note"][data-size] .overlay-shell {
  box-shadow: inset 0 1px #fffdf4, 1px 2px 0 #aaa387,
    2px 5px 3px #25465520, 6px 18px 22px -10px #183b4d70;
}
#space > .overlay[data-type="note"] .note-input:focus-visible {
  outline: 1px solid #8c998c;
  outline-offset: 4px;
  border-radius: 2px;
}

/* Slightly more presence for the central product and its download action. */
@media (min-width: 900px) {
  /* Keep a small walking margin on shallow laptop windows. */
  #playground { min-height: 720px; }
  #playground .macbook {
    width: min(740px, 50vw, calc((max(100svh, 650px) - 310px) * 1.46));
    max-width: none;
  }
  .hud .shortcut-demo { top: calc(100% + 12px); }
  .hud .shortcut-keys { gap: 8px; }
  .hud .shortcut-keys button { min-width: 52px; height: 28px; padding: 3px 6px; gap: 4px; }
  .hud .shortcut-keys button::after { inset: -8px -3px; }
  .hud .shortcut-keys button > span { font-size: 12px; }
  .hud .shortcut-nudge { font-size: 11px; }
  .hud .shortcut-nudge-before { right: calc(100% + 10px); }
  .hud .shortcut-nudge-after { left: calc(100% + 10px); }
  #playground .coastal-gulls { left: 4.5%; top: 156px; }
  #playground .coastal-gulls > span { top: 0; left: 0; }
  #playground .object-imagination::after { bottom: calc(100% + 12px); }
  #playground .desktop-introduction h1 { font-size: clamp(70px, 18cqw, 136px); }
  #playground .desktop-tagline { font-size: clamp(18px, 3.5cqw, 26px); margin: 12px 0 24px; }
  #playground .release-caption { font-size: clamp(12px, 1.9cqw, 14px); margin-top: 13px; }
}
@media (min-width: 1151px) and (min-height: 701px) {
  /* Move the hardware and its dock together to keep the bird's sky lane clear. */
  #playground > .device-stage { bottom: 80px; }
  #playground > .landing-dock { bottom: 7px; }
}

/* Keep the four planted-paw phases proportional to the smaller silhouette. */
#playground .ink-cat { transform: scale(.85); transform-origin: 50% 100%; }
#playground .cat-gait-motion { animation-duration: 1020ms; }
#playground .cat-gait-near-fore .cat-gait-motion { animation-delay: -.765s; }
#playground .cat-gait-far-hind .cat-gait-motion { animation-delay: -.51s; }
#playground .cat-gait-far-fore .cat-gait-motion { animation-delay: -.255s; }
#playground .cat-asides { width: 116px; height: 28px; }
#playground .cat-asides > span {
  padding: 0 8px 0 13px;
  border-color: #fffdf4;
  border-radius: 12px 12px 10px 12px;
  background: linear-gradient(140deg, #fff9e8, #e9e1cb);
  box-shadow: inset 0 1px #fffdf6, inset 0 -1px #c8bea7, 0 2px 0 #a2aba0, 0 5px 9px #1a394333;
  color: #344c52;
  font: 500 12px/1.2 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  letter-spacing: -.15px;
}
#playground .cat-asides > span::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  width: 2px;
  height: 6px;
  border-radius: 2px;
  background: #63867d;
  box-shadow: inset 0 1px #aac2ae;
}
#playground .cat-asides > span::after {
  width: 5px;
  height: 5px;
  bottom: -6px;
  right: 25px;
  border: 1px solid #fff9e8;
  border-radius: 50%;
  background: #ece3cc;
  box-shadow: 4px 5px 0 -1px #c4c2ab;
  transform: none;
}
@media (min-width: 900px) {
  #playground .cat-asides > span:nth-child(n) {
    animation-duration: var(--cat-route-duration, 54s);
    animation-delay: var(--cat-route-delay, -17s);
  }
}
#playground .desktop-introduction .mac-download {
  width: 224px;
  min-height: 56px;
  font-size: 15px;
}
@media (hover: hover) and (pointer: fine) {
  #playground .desktop-buddy-button:hover { transform: translateY(-2px); }
}
@media (max-width: 899px) {
  #playground .desktop-introduction .mac-download { width: 192px; min-height: 48px; font-size: 13px; }
}
@media (min-width: 900px) and (max-width: 1150px) {
  #playground { min-height: 740px; }
  #playground .game-create-cue {
    left: auto;
    right: 0;
    font-size: 14px;
    transform: rotate(-3deg);
  }
}
@media (max-width: 599px) {
  #playground .desktop-introduction .mac-download { width: 178px; min-height: 44px; font-size: 12px; }
  #playground .desktop-tagline { font-size: clamp(14px, 4cqw, 18px); }
  #playground .game-create-cue { min-height: 44px; }
  #playground #space > .overlay.selected[data-type="game"][data-size]:not([hidden]) { margin-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  #playground .desktop-buddy-button { transition: none; }
}