:root { --background: #254ee8; --foreground: #fff2c6; font-family: 'Trebuchet MS', Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #254ee8; }
button, select { font: inherit; }
.magic-page { position: relative; min-height: 100svh; isolation: isolate; background: var(--background); color: var(--foreground); transition: background-color 2s, color 2s; }
.magic-surface { position: fixed; inset: 0; z-index: -1; overflow: hidden; touch-action: none; }
.magic-surface canvas { display: block; width: 100%; height: 100%; }
.topbar { position: relative; z-index: 2; padding: 24px 32px; pointer-events: none; }
.topbar a, .topbar select { pointer-events: auto; }
.wordmark { font-size: 19px; font-weight: 800; letter-spacing: -.6px; line-height: 1.08; text-shadow: 0 1px 8px var(--background), 0 0 3px var(--background); }
.wordmark span { display: block; font-size: 26px; }
.story-picker { position: relative; display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: bold; text-shadow: 0 1px 8px var(--background), 0 0 3px var(--background); }
.story-picker::after { content: ''; position: absolute; right: 19px; top: 50%; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
select { appearance: none; -webkit-appearance: none; background: var(--background); color: var(--foreground); border: 1px solid currentColor; border-radius: 16px; min-height: 48px; padding: 8px 44px 8px 16px; max-width: 100%; cursor: pointer; text-shadow: none; font-weight: 400; }
option { background: #254ee8; color: #fff2c6; }
.story-stage { min-height: calc(100svh - 252px); display: grid; place-items: center; padding: 12px 28px 30px; pointer-events: none; touch-action: pan-y; }
.story { width: min(100%, 530px); }
.story-heading { display: flex; align-items: center; gap: 9px; width: fit-content; background: var(--background); border-radius: 10px; padding: 4px 10px; margin-left: -10px; }
#story-icon { font-size: 22px; }
#story-place { font-size: 12px; letter-spacing: .07em; margin: 0; }
h1 { font-size: 30px; margin: 4px 0 21px -10px; letter-spacing: -.7px; width: fit-content; padding: 4px 10px; border-radius: 10px; background: var(--background); }
#story-copy p { font-size: 24px; line-height: 1.45; font-weight: 400; margin: 0 0 16px; }
#story-copy p:last-child { margin-bottom: 0; }
.word { white-space: nowrap; }
.glyph { display: inline-block; }
.is-ready.is-playing #story-copy { color: transparent; }
.is-ready.is-reading #story-copy { color: transparent; }
.controls { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 20px max(24px, env(safe-area-inset-bottom)); }
.hint { font-size: 14px; margin: 0; text-align: center; background: var(--background); border-radius: 30px; padding: 7px 15px; }
.button-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
button { min-height: 54px; border: 1px solid currentColor; border-radius: 100px; padding: 12px 20px; cursor: pointer; background: var(--background); color: var(--foreground); font-size: 15px; font-weight: bold; transition: transform .2s, background-color 2s, color 2s; }
.mode-button { min-width: 198px; background: var(--foreground); color: var(--background); }
#ending-count { margin-left: 6px; font-size: 12px; opacity: .75; }
button:hover { transform: translateY(-2px); }
button:active { transform: scale(.97); }
button:disabled { opacity: .65; cursor: default; transform: none; }
button:focus-visible, select:focus-visible { outline: 3px solid var(--foreground); outline-offset: 4px; }
.collection-note { margin: 0; padding: 4px 10px; border-radius: 20px; background: var(--background); font-size: 11px; letter-spacing: .04em; text-align: center; }
.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; }
.noscript { padding: 20px; text-align: center; }
@media (min-width: 1000px) and (min-height: 850px) { .story { width: 570px; } #story-copy p { font-size: 27px; } .story-stage { padding-bottom: 45px; } }
@media (max-width: 700px) {
  .topbar { padding: 18px 20px; }
  .wordmark { font-size: 16px; } .wordmark span { font-size: 23px; }
  .story-picker { margin-top: 10px; justify-content: space-between; }
  .story-picker select { flex: 1; max-width: 245px; }
  .story-stage { min-height: calc(100svh - 360px); padding: 20px 26px 28px; }
  h1 { font-size: 26px; margin-bottom: 20px; }
  #story-copy p { font-size: 20px; line-height: 1.4; margin-bottom: 15px; }
  #story-place { font-size: 11px; }
  .controls { padding-left: 16px; padding-right: 16px; }
  .button-row { gap: 8px; } button { font-size: 14px; padding: 12px 16px; }
  .mode-button { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .is-ready.is-reading #story-copy { color: inherit; }
}