:root { color-scheme: light; font-family: Helvetica, Arial, sans-serif; font-weight: 400; color: #000; background: #fff; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; background: #fff; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 2px solid #798940; outline-offset: 7px; }
button { cursor: pointer; }
.wallpaper { position: fixed; inset: 0; opacity: .03; pointer-events: none; overflow: hidden; }
.texture-strip { position: absolute; top: -480px; bottom: -480px; width: 240px; background: url('/assets/yayayi-background.jpg') repeat-y center var(--offset) / 240px 240px; transform: rotate(var(--turn)) scaleX(var(--mirror)); }
.site-shell { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 100svh; align-items: center; padding: 42px 28px 24px; }
main { width: 100%; max-width: 710px; text-align: center; margin: auto 0; padding: 43px 0 40px; outline: none; }
.portrait-wrap { display: flex; align-items: center; justify-content: center; margin-bottom: 27px; }
#portrait-restart { display: block; padding: 0; border: 0; background: none; }
.portrait { display: block; width: 104px; height: 104px; object-fit: contain; image-rendering: pixelated; filter: saturate(.68) contrast(.94); }
#story { min-height: 190px; }
.scene-index { font-size: 12px; font-weight: 400; color: #000; margin: 0 0 18px; }
.scene-text { font-weight: 400; line-height: 1.32; margin: 0; white-space: pre-wrap; text-wrap: balance; }
.scene-text + .scene-text { margin-top: 23px; }
.crunch-word { display: inline-block; vertical-align: middle; image-rendering: pixelated; image-rendering: crisp-edges; }
.crunch-space { white-space: pre; }
.choices { display: flex; align-items: center; justify-content: center; gap: 20px 44px; margin: 37px auto 0; }
.choice { position: relative; color: inherit; max-width: 100%; border: 0; border-bottom: 1px solid #afb49e; padding: 9px 13px 11px; background: transparent; font-weight: 400; line-height: 1.3; }
.choice:hover, .choice:focus-visible { background: #e5edc7; border-bottom-color: #7c8a4a; }
.choice-number { padding-left: 12px; display: inline-block; color: #000; font-size: 12px; font-weight: 400; vertical-align: middle; }
.choices.long { flex-direction: column; gap: 15px; max-width: 560px; }
.choices.long .choice { width: fit-content; }
.story-link { display: inline; background: none; border: 0; padding: 0; color: inherit; border-bottom: 2px solid #9ba974; font-size: inherit; line-height: inherit; }
.story-link:hover { background: #e5edc7; }
.ending-image { display: block; width: min(100%, 420px); max-height: 225px; object-fit: cover; margin: 29px auto 0; filter: saturate(.7); image-rendering: pixelated; }
.footer { flex-shrink: 0; text-align: center; }
.icon-button { display: grid; place-items: center; border: 0; background: none; color: #000; width: 28px; height: 28px; padding: 8px; opacity: .75; }
.icon-button:hover { opacity: 1; }
.icon-button svg { width: 12px; height: 12px; }
.sound-off { display: none; }
[aria-pressed="true"] .sound-wave { display: none; }
[aria-pressed="true"] .sound-off { display: block; }
#soundcloud-host { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; pointer-events: none; opacity: .001; }
#soundcloud-host iframe { width: 1px; height: 1px; border: 0; }
.tennis-field { position: fixed; z-index: 1; inset: 0; pointer-events: none; overflow: hidden; }
.tennis-layer { position: absolute; inset: 0; opacity: var(--layer-opacity); }
.tennis-drift { position: absolute; width: var(--size); height: var(--size); left: calc(-1 * var(--size)); top: var(--y); transform: translate3d(var(--static-x), -50%, 0); }
.tennis-ball { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; clip-path: circle(49% at 50% 50%); transform: rotate(var(--rotation)); image-rendering: pixelated; filter: saturate(.8); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (min-width: 1500px) { main { max-width: 760px; } .site-shell { padding-top: 55px; } }
@media (max-width: 720px) {
  .site-shell { padding: 27px 23px 17px; }
  main { padding: 38px 0; max-width: 520px; }
  .portrait { width: 83px; height: 83px; }
  .portrait-wrap { margin-bottom: 24px; }
  .choices { gap: 16px 25px; margin-top: 27px; }
  .choice { padding-right: 8px; padding-left: 8px; }
  .tennis-drift { width: calc(var(--size) * .68); height: calc(var(--size) * .68); }
}