:root { color-scheme: light; font-family: ui-rounded, "Avenir Next", "Trebuchet MS", sans-serif; color: #242721; background: #f5f1e8; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(100% - 48px, 1060px); margin: 0 auto; padding: 38px 0 40px; text-align: center; }
h1 { margin: 0 0 28px; font-size: clamp(1.65rem, 3.5vw, 2.8rem); line-height: 1.18; font-weight: 800; letter-spacing: -.045em; }
h1 span { white-space: nowrap; }
h1 svg { width: .7em; height: .7em; fill: #60704a; margin-left: .3em; transform: rotate(18deg); }
.scene { position: relative; text-align: left; }
.scene img { display: block; width: 100%; height: auto; border: 2px solid #242721; border-radius: 22px; }
.bubble { position: absolute; top: 6%; right: 4%; width: 40%; padding: 25px 27px; background: #fffefa; border: 3px solid #242721; border-radius: 45% 40% 38% 25% / 20% 25% 22% 25%; box-shadow: 5px 6px 0 #242721; }
.bubble::after { content: ""; position: absolute; left: 22px; bottom: -22px; width: 28px; height: 36px; background: #fffefa; border-right: 3px solid #242721; border-bottom: 3px solid #242721; transform: skew(-30deg) rotate(25deg); }
#joke { position: relative; z-index: 1; margin: 0; font-weight: 650; font-size: clamp(1.1rem, 2vw, 1.45rem); line-height: 1.42; }
#joke.reveal { animation: reveal 200ms ease-out; }
button { display: block; margin: 28px auto 0; min-height: 56px; padding: 15px 30px; border: 2px solid #242721; border-radius: 100px; background: #dae58e; color: #242721; box-shadow: 3px 4px 0 #242721; font: 750 1.05rem/1.3 ui-rounded, "Avenir Next", "Trebuchet MS", sans-serif; cursor: pointer; transition: transform 150ms, box-shadow 150ms, background 150ms; }
button:hover:not([aria-disabled="true"]) { background: #e6efa9; transform: translateY(-2px); }
button:active:not([aria-disabled="true"]) { transform: translate(2px, 3px); box-shadow: 1px 1px 0 #242721; }
button:focus-visible { outline: 3px solid #486630; outline-offset: 6px; }
button[aria-disabled="true"], button:disabled { cursor: default; background: #e5e4d9; }
@keyframes reveal { from { opacity: .3; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) {
  main { width: min(100% - 32px, 540px); padding-top: 26px; }
  h1 { max-width: 340px; margin: 0 auto 22px; font-size: 2rem; }
  h1 span { display: block; }
  .scene img { border-radius: 16px; }
  .bubble { position: relative; top: auto; right: auto; width: calc(100% - 12px); margin: 22px auto 0; padding: 22px 24px; min-height: 146px; display: flex; align-items: center; border-radius: 24px; box-shadow: 3px 4px 0 #242721; }
  .bubble::after { top: -18px; bottom: auto; left: 32%; width: 22px; height: 28px; border: 0; border-left: 3px solid #242721; border-top: 3px solid #242721; transform: skew(25deg) rotate(30deg); }
  #joke { font-size: 1.15rem; }
  button { margin-top: 25px; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }