/* The visual vocabulary of Die große Katzensache, scoped to the extra quiz.
   Detective Maxi stays left, seated calico Josephine stays right; only the parchment scrolls. */
:root {
  color-scheme: dark;
  --ink: #100e0c;
  --gold: #e5bc76;
  --gold-light: #ffe1a1;
  --paper: #f1dfbb;
  --paper-ink: #392719;
  --display: 'Cormorant Garamond', Georgia, serif;
  --text: 'Manrope', sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ink); }
body { font-family: var(--text); color: var(--paper); -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-user-select: none; user-select: none; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }
button:focus:not(:focus-visible), h1:focus, .feedback-title:focus { outline: none; }
h1, h2, p { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }
svg { display: block; }
button svg, a.gold-button svg { width: 23px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.noscript { position: fixed; inset: 0; padding: 30px; z-index: 30; background: var(--ink); }

#quiz { position: relative; isolation: isolate; width: 100%; max-width: 640px; height: 100%; height: 100svh; min-height: 360px; margin: auto; overflow: hidden; background: #17110d; }
.study-backdrop { position: absolute; inset: 0; z-index: -2; background: #151411 url('/assets/mystery/office-clock-corrected.webp') center 53% / cover no-repeat; }
.study-backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#090d1099, transparent 27% 60%, #090c0fbd), radial-gradient(ellipse, transparent 32%, #080d114d); }
.study-lamplight { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 15% 60%, #ffd59225, transparent 50%); animation: lamplight 7s ease-in-out infinite alternate; }
[data-phase=intro] .study-backdrop::after { background: linear-gradient(#060709bd, #06070915 28%, transparent 44%, #09080755 64%, #090807f2 95%), radial-gradient(ellipse, transparent 26%, #08080966); }
#quiz-ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#quiz-ui button, #quiz-ui a, .paper-scroll { pointer-events: auto; }
.game-header { position: absolute; z-index: 5; top: max(20px, env(safe-area-inset-top)); left: 22px; right: 22px; display: flex; justify-content: space-between; align-items: start; gap: 13px; pointer-events: none; }
.wordmark { display: flex; flex-direction: column; gap: 7px; text-shadow: 0 2px 9px #000; }
.wordmark small { font-size: 7px; letter-spacing: .22em; color: #c9b590; }
.wordmark strong { font: 600 clamp(19px, 6vw, 25px)/1 var(--display); color: #f0d8ad; }
.sound-toggle { flex-shrink: 0; width: 44px; height: 44px; padding: 11px; border: 1px solid #d1b47755; border-radius: 50%; background: #0c151bb0; backdrop-filter: blur(7px); color: #ead3aa; display: grid; place-items: center; pointer-events: auto; }
.sound-toggle svg { width: 19px; height: 19px; }
.sound-toggle > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sound-toggle:hover { border-color: var(--gold); background: #100e0ccc; }
[data-phase=intro] .wordmark, [data-phase=sealed] .wordmark, [data-phase=escape] .wordmark, [data-phase=opening] .wordmark, [data-phase=reveal] .wordmark { visibility: hidden; }
.game-footer { display: none; }
.eyebrow { font: 600 9px/1.5 var(--text); letter-spacing: .2em; color: #e6cd9e; text-transform: uppercase; }
.gold-button { min-height: 56px; padding: 13px 21px; border: 1px solid #f2d29b; border-radius: 3px; color: #2b1b0b; background: linear-gradient(120deg, #edca8b, #d8ab60); box-shadow: 0 2px 0 #5c3a17, inset 0 0 0 3px #4b2c0d1a, 0 0 30px #d39e4121; display: flex; align-items: center; justify-content: center; gap: 15px; font: 700 23px/1.2 var(--display); transition: transform .2s, box-shadow .2s; }
.gold-button:hover { transform: translateY(-2px); box-shadow: 0 4px 0 #5c3a17, 0 0 35px #d39e414d; }
.gold-button:active { transform: translateY(1px); }
.small-note { font-size: 10px; line-height: 1.7; color: #bba98c; }
.fine-rule { display: flex; align-items: center; justify-content: center; gap: 13px; color: var(--gold); margin: 22px auto 0; font-size: 13px; }
.fine-rule::before, .fine-rule::after { content: ''; width: 44px; height: 1px; background: linear-gradient(90deg, transparent, #d8b779); }
.fine-rule::after { transform: rotate(180deg); }

.intro-view { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 18px; padding: max(50px, 7svh) 0 max(24px, 4svh); text-align: center; }
.intro-copy { position: relative; justify-self: center; width: 95%; text-shadow: 0 2px 30px #0d0b0a; }
.intro-copy .eyebrow { font-size: 8px; letter-spacing: .19em; padding: 0 40px; }
.intro-copy h1 { color: var(--gold-light); font-size: clamp(57px, 13vw, 83px); line-height: .92; letter-spacing: -.035em; margin: 22px 0 17px; text-shadow: 0 2px 2px #251405, 0 6px 38px #000; }
.intro-copy h1 > span { display: block; font-size: .37em; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 10px; }
.intro-subtitle { font: 500 22px/1.3 var(--display); color: #f1dfbb; }
.intro-invitation { position: relative; justify-self: center; width: 90%; max-width: 440px; text-align: center; }
.intro-invitation .handwritten { color: var(--gold-light); font: italic 28px/1.1 var(--display); margin-bottom: 10px; }
.intro-invitation > p:not(.handwritten):not(.small-note) { font-size: 12px; line-height: 1.9; color: #e8decc; text-shadow: 0 1px 12px #000; }
.intro-invitation .gold-button { width: min(100%, 318px); margin: 23px auto 15px; }
.cat-stage { position: absolute; left: 7%; right: 7%; bottom: 33%; height: 30%; pointer-events: none; }
.cat-figure { position: absolute; bottom: 0; height: 100%; width: 45%; filter: drop-shadow(2px 3px 3px #07101547); }
.cat-maxi { left: 0; width: 58%; }
.cat-josephine { right: 0; width: 36%; }
.cat-figure .cat-art { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; user-select: none; -webkit-user-drag: none; }
/* Keep the original adult detective / little kitten size relationship. */
.cat-josephine .cat-art { position: absolute; bottom: 0; height: 56%; }
.cat-figure > span { position: absolute; left: 0; right: 0; bottom: -19px; color: #ead4aa; font: italic 17px var(--display); text-align: center; text-shadow: 0 1px 5px #000; }
.cat-figure::before { content: ''; position: absolute; left: 15%; right: 15%; bottom: 0; height: 10px; background: radial-gradient(ellipse, #02080b87, transparent 73%); z-index: -1; }
.intro-view > .cat-stage { position: relative; left: auto; right: auto; bottom: auto; height: 100%; max-height: 280px; width: 86%; justify-self: center; align-self: center; min-height: 0; }
.intro-view .cat-figure > span { bottom: 0; }
.intro-view .cat-figure .cat-art { height: calc(100% - 22px); }
.intro-view .cat-josephine .cat-art { bottom: 22px; height: calc(56% - 12.32px); }
.intro-view .cat-figure::before { bottom: 24px; }
.stage-secret { position: absolute; left: 50%; top: 66%; width: 230px; height: 146px; transform: translate(-50%, -50%) scale(.33); }
.stage-secret .envelope { margin: 0; }

.quiz-progress { position: absolute; z-index: 4; right: 23px; top: max(83px, calc(env(safe-area-inset-top) + 64px)); display: flex; align-items: center; gap: 9px; text-shadow: 0 2px 7px #000; }
.progress-meta { order: 2; color: #d0b98f; font-size: 8px; letter-spacing: .07em; }
.progress-meta b { font-weight: 400; }
.progress-meta > span:last-child { display: none; }
.progress-marks { display: flex; gap: 5px; align-items: center; }
.progress-marks > span { width: 4px; height: 4px; border: 1px solid #b69b665e; border-radius: 50%; background: #1f292857; }
.progress-marks > .complete { background: #e6c185; border-color: #e6c185; }
.progress-marks > .current { border-color: #e8c58b; box-shadow: 0 0 8px #e6c1854d; }
.question-view { position: absolute; inset: 120px 0 0; display: flex; flex-direction: column; justify-content: end; }
.quiz-conversation { position: relative; flex: 1 1 auto; min-height: 130px; pointer-events: none; }
.quiz-conversation .cat-narrator { position: absolute; inset: 0; --narrator-width: clamp(145px, 34vw, 190px); --narrator-height: clamp(190px, 38svh, 250px); --narrator-left: 8px; --speech-left: clamp(143px, 34vw, 188px); --speech-bottom: clamp(45px, 10svh, 92px); }
.quiz-conversation .cat-narrator__bubble { right: 22px; max-width: 310px; max-height: min(155px, calc(100% - 8px)); }
.quiz-conversation .cat-narrator__speech { font-size: 21px; line-height: 1.2; }
.quiz-conversation .cat-narrator__figure { bottom: 10px; max-height: calc(100% - 10px); }
.quiz-conversation .cat-narrator--josephine .cat-narrator__figure { left: auto; right: var(--narrator-left); width: calc(var(--narrator-width) * .7); height: calc(var(--narrator-height) * .56); max-height: calc((100% - 10px) * .56); }
.quiz-conversation .cat-narrator--josephine .cat-narrator__bubble { left: 22px; right: calc(var(--speech-left) * .7); margin-left: auto; border-radius: 13px 13px 3px 13px; }
.quiz-conversation .cat-narrator--josephine .cat-narrator__bubble::before { left: auto; right: -8px; border-left: 0; border-bottom: 0; border-right: 1px solid #d6b7799c; border-top: 1px solid #d6b7799c; }
.question-paper { position: relative; flex: 0 1 auto; max-height: 59%; min-height: 250px; display: flex; flex-direction: column; overflow: hidden; padding: 16px 25px max(18px, env(safe-area-inset-bottom)); color: #46311e; background: radial-gradient(ellipse at 15% 0, #fff1cc, #e6d0a9 85%); box-shadow: 0 -8px 55px #0007, inset 0 6px 20px #c19b5640; border-top: 1px solid #e6ca94; }
.paper-heading { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #99754844; padding-bottom: 10px; margin-bottom: 9px; }
.question-paper .eyebrow { font-size: 8px; letter-spacing: .16em; color: #8b6942; }
.paper-heading i { padding-left: 7px; letter-spacing: .1em; font-style: normal; }
.paper-number { font: italic 15px/1.2 var(--display); color: #92734b; }
.paper-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #a47e49 transparent; padding: 0 3px 4px; }
.chapter-title { font: 600 27px/1.08 var(--display); letter-spacing: -.02em; color: #46301c; margin: 2px 0 14px; }
.question-paper h1 { font: 500 24px/1.25 var(--display); color: #47301c; margin-bottom: 19px; text-wrap: pretty; }
.answer-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.answer-choice { min-width: 0; min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 9px; border: 1px solid #9f7a465b; border-radius: 2px; background: #f8eace73; color: #634524; font: 600 21px/1.1 var(--display); text-align: center; }
.answer-choice > span:nth-child(2) { flex: 1; min-width: 0; }
.answer-choice > svg { display: none; }
.choice-letter { flex-shrink: 0; width: 21px; height: 21px; border: 1px solid #a78a5b66; border-radius: 50%; display: grid; place-items: center; font: 500 11px var(--text); color: #8d7044; }
.answer-choice:not(:disabled):hover { background: #fff1cf; border-color: #977344; }
.answer-choice.is-correct { background: #dcc28e; border-color: #94703e; color: #48321b; }
.answer-choice.is-correct .choice-letter { background: #6d512d; color: #fff0cc; border-color: #6d512d; }
.answer-choice.is-selected:not(.is-correct) { background: #ccb38b44; border-color: #a07b5a; }
.answer-choice:disabled:not(.is-selected):not(.is-correct) { opacity: .55; }
.answer-choice small { font: 400 8px/1.4 var(--text); color: #80603d; }
.question-paper button:focus-visible, .question-paper a:focus-visible { outline-color: #74502a; outline-offset: 2px; }
.average-note { font-size: 10px; line-height: 1.7; color: #8c6c42; margin-top: 14px; text-align: center; }
.fact-reveal { margin-top: 18px; border-top: 1px solid #98734150; padding-top: 15px; }
.feedback-title { font: 600 25px/1.1 var(--display); color: #654524; margin-bottom: 11px; }
.fact-text { font-size: 14px; line-height: 1.7; color: #765431; }
.source-link { display: inline-flex; align-items: center; min-height: 44px; color: #88663c; font-size: 10px; line-height: 1.5; padding: 7px 0; text-underline-offset: 4px; }
.fact-reveal .gold-button { width: 100%; margin-top: 7px; }
.prediction-copy { font: 500 19px/1.3 var(--display); color: #705333; margin: -5px 0 18px; }

.ceremony-view, .reveal-view { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #957042 transparent; text-align: center; padding: max(78px, 10svh) 23px 26px; pointer-events: auto; }
.ceremony-view > *, .reveal-view > * { flex-shrink: 0; }
.ceremony-view h1 { font: 600 clamp(38px, 9vw, 55px)/1.03 var(--display); color: #f3d9a5; letter-spacing: -.02em; margin: 16px 0 14px; }
.ceremony-view h1 em { font-weight: 500; }
.score-line { font-size: 10px; line-height: 1.8; color: #e1cba5; }
.score-line > span { padding: 0 5px; }
.ceremony-view .cat-stage, .reveal-view .cat-stage { position: relative; left: auto; right: auto; bottom: auto; width: 100%; height: clamp(155px, 27svh, 240px); margin: 24px 0; }
.ceremony-view .stage-secret { transform: translate(-50%, -50%) scale(.45); }
.reveal-view .stage-secret { display: none; }
.ceremony-copy { font: 500 22px/1.3 var(--display); color: #f1e5d0; text-shadow: 0 2px 9px #000; margin: 12px 0 22px; }
.ceremony-view > .gold-button { width: 100%; max-width: 350px; }
.ceremony-view > .small-note { margin-top: 15px; }
.escape-view { overflow-x: hidden; }
.escape-view > .gold-button { text-decoration: none; }
/* Load the existing running poses while the combined quiz still shows the seated pair. */
[data-story=chase] .cat-figure::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -26%;
  translate: -50% 0;
  height: 130%;
  max-width: 120%;
  aspect-ratio: 3 / 4;
  background: url('/assets/runner/maxi-run.webp') 0 0 / 400% 200% no-repeat;
  opacity: 0;
}
[data-story=chase] .cat-josephine::after {
  bottom: -7%;
  height: 56%;
  background-image: url('/assets/runner/josephine-run-calico-v2.webp');
}
.escape-view .cat-stage { animation: cats-dash 1.35s ease-in .6s both; }
.escape-view .stage-secret {
  z-index: 1;
  left: calc(82% - 42px);
  transform: translate(-50%, -50%) rotate(-14deg) scale(.19);
  animation: snatch-envelope .6s ease-out both;
}
.escape-view .cat-art, .escape-view .cat-figure > span { animation: leave-portrait .6s step-end both; }
[data-story=chase] .escape-view .cat-figure::after {
  animation: show-runner .6s step-end both, escape-stride .32s steps(4, jump-none) .6s 5;
}
.envelope { position: relative; width: 230px; height: 146px; margin: 35px auto 22px; perspective: 800px; filter: drop-shadow(0 12px 14px #0004); }
.envelope-back { position: absolute; inset: 0; background: #c9aa72; border: 1px solid #d9bc86; border-radius: 3px; z-index: 1; }
.envelope-front { position: absolute; inset: 0; background: #e1c28d; clip-path: polygon(0 0, 50% 62%, 100% 0, 100% 100%, 0 100%); z-index: 3; border-bottom: 1px solid #e4ca98; border-radius: 3px; }
.envelope-flap { position: absolute; inset: 0; background: #ecd2a2; clip-path: polygon(0 0, 100% 0, 50% 62%); transform-origin: 50% 0; z-index: 4; }
.envelope-seal { position: absolute; width: 43px; height: 43px; border-radius: 50%; background: #8f4434; border: 3px double #bd7f5a; box-shadow: 0 2px 4px #0004; left: calc(50% - 21.5px); top: 65px; z-index: 5; display: grid; place-items: center; }
.envelope-seal > svg { width: 22px; height: 22px; fill: #e3b579; }
.letter { position: absolute; left: 14px; right: 14px; top: 12px; height: 120px; background: #fff5df; border: 1px solid #eadbbf; padding: 23px 8px; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #88724c; font: italic 19px var(--display); }
.letter i { font-size: 11px; margin-top: 11px; }
.opening-view { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 50px 20px; }
.opening-view .envelope { margin: 110px auto 55px; }
.opening-view h1 { font-size: clamp(31px, 5vw, 45px); line-height: 1.15; margin-bottom: 17px; }
.opening-view > p:last-child { font: 500 20px/1.3 var(--display); color: #e6d5b7; }
[data-phase=opening] .envelope { animation: envelope-wait 1.7s ease-in-out both; }
[data-phase=opening] .envelope-seal { animation: seal-open .7s 1.7s both; }
[data-phase=opening] .envelope-flap { animation: flap-open 1.3s 2.25s both; }
[data-phase=opening] .letter { animation: letter-rise 1.7s 3.2s both; }
[data-opening-paused=true] .opening-view * { animation-play-state: paused !important; }
.reveal-view { padding-top: max(78px, 10svh); }
.reveal-view h1 { font-size: clamp(52px, 12vw, 85px); line-height: .94; margin: 28px 0 20px; color: #f6e8cf; }
.reveal-view h1 strong { display: block; font-weight: 600; font-size: 1.32em; color: #a9dfff; margin-top: 12px; letter-spacing: -.035em; }
.reveal-message { font: 500 22px/1.35 var(--display); color: #e6ebdf; }
.reveal-signature { font: italic 21px/1.3 var(--display); color: #e7d0a0; margin: 12px 0 17px; }
.text-button { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; color: var(--gold); background: none; border: 0; font-size: 10px; padding: 10px 0; }
.reveal-view .text-button { justify-content: center; white-space: normal; }
.text-button > svg { width: 18px; }
#quiz-celebration { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; }
[data-phase=reveal] .study-backdrop::after { background: linear-gradient(#0c1920d1, #0c192099 60%, #090c0fe6); }

@keyframes lamplight { from { opacity: .5; } to { opacity: .9; } }
@keyframes snatch-envelope {
  from { left: 50%; transform: translate(-50%, -50%) scale(.45); }
}
@keyframes cats-dash {
  0% { transform: translateX(0); opacity: 1; }
  25% { transform: translate(9%, -3%); }
  50% { transform: translate(37%, -7%) scale(.94); opacity: 1; }
  100% { transform: translate(150%, -17%) scale(.72); opacity: 0; }
}
@keyframes leave-portrait { from { opacity: 1; } to { opacity: 0; } }
@keyframes show-runner { from { opacity: 0; } to { opacity: 1; } }
@keyframes escape-stride { to { background-position-x: 100%; } }
@keyframes envelope-wait { 0%, 100% { rotate: 0deg; } 25% { rotate: -3deg; } 70% { rotate: 3deg; } }
@keyframes seal-open { to { opacity: 0; transform: translateY(14px) scale(.8); } }
@keyframes flap-open { to { transform: rotateX(180deg); z-index: 0; } }
@keyframes letter-rise { to { transform: translateY(-105px); } }
@media (max-width: 420px) {
  .intro-invitation .handwritten { font-size: 26px; }
  .intro-copy .eyebrow { padding: 0 48px; font-size: 7px; }
  .intro-copy h1 { margin-top: 18px; }
  .intro-subtitle { font-size: 21px; }
  .question-paper { padding: 14px 20px max(15px, env(safe-area-inset-bottom)); }
  .chapter-title { font-size: 25px; }
  .question-paper h1 { font-size: 22px; }
  .answer-choice { font-size: 19px; gap: 6px; padding: 9px 7px; }
  .fact-text { font-size: 13px; }
  .quiz-conversation .cat-narrator__speech { font-size: 19px; }
  .quiz-conversation .cat-narrator__bubble { right: 18px; }
  .quiz-conversation .cat-narrator--josephine .cat-narrator__bubble { left: 18px; }
}
@media (max-height: 700px) {
  .game-header { top: 15px; left: 17px; right: 17px; }
  .quiz-progress { top: 72px; right: 18px; }
  .intro-view { padding-top: max(35px, 5svh); gap: 14px; }
  .intro-copy h1 { font-size: 58px; margin: 13px 0; }
  .intro-subtitle { font-size: 19px; }
  .fine-rule { margin-top: 13px; }
  .intro-invitation .handwritten { font-size: 24px; }
  .intro-invitation .gold-button { min-height: 51px; margin: 15px auto 12px; }
  .intro-invitation > p:not(.handwritten):not(.small-note) { font-size: 11px; line-height: 1.7; }
  .question-view { top: 102px; }
  .question-paper { max-height: 60%; min-height: 235px; padding: 11px 17px max(12px, env(safe-area-inset-bottom)); }
  .quiz-conversation { min-height: 110px; }
  .quiz-conversation .cat-narrator { --narrator-width: 126px; --narrator-height: 183px; --speech-left: 123px; --speech-bottom: 40px; }
  .quiz-conversation .cat-narrator__speech { font-size: 18px; }
  .quiz-conversation .cat-narrator__bubble { padding: 9px 10px; right: 15px; }
  .quiz-conversation .cat-narrator--josephine .cat-narrator__bubble { left: 15px; }
  .chapter-title { font-size: 23px; margin-bottom: 10px; }
  .question-paper h1 { font-size: 21px; margin-bottom: 15px; }
  .answer-choice { min-height: 56px; font-size: 18px; }
  .ceremony-view { padding-top: 78px; }
  .ceremony-view h1 { font-size: 37px; margin: 12px 0; }
  .ceremony-copy { font-size: 19px; }
  .ceremony-view .cat-stage { height: 160px; }
  .ceremony-view > .gold-button { min-height: 51px; font-size: 21px; padding: 11px 12px; gap: 9px; }
  .reveal-view { padding-top: 78px; }
  .reveal-view h1 { font-size: 55px; margin: 20px 0 15px; }
  .reveal-message { font-size: 20px; }
  .reveal-signature { font-size: 18px; }
}
@media (max-width: 360px) {
  .wordmark strong { font-size: 21px; }
  .intro-copy h1 { font-size: 54px; }
  .intro-copy .eyebrow { padding: 0 44px; font-size: 6.5px; }
  .intro-invitation .handwritten { font-size: 23px; }
  .cat-figure > span { font-size: 15px; }
  .quiz-conversation .cat-narrator { --narrator-width: 116px; --narrator-height: 167px; --speech-left: 112px; --speech-bottom: 32px; }
  .quiz-conversation .cat-narrator__speech { font-size: 18px; }
  .paper-heading i { display: none; }
  .paper-number { font-size: 13px; }
  .answer-choice { font-size: 17px; }
  .choice-letter { width: 18px; height: 18px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .escape-view .cat-art, .escape-view .cat-figure > span { opacity: 0; }
  [data-story=chase] .escape-view .cat-figure::after { opacity: 1; }
  [data-phase=opening] .envelope-seal { opacity: 0; }
  [data-phase=opening] .envelope-flap { transform: rotateX(180deg); z-index: 0; }
  [data-phase=opening] .letter { transform: translateY(-75px); }
}