* { box-sizing: border-box; letter-spacing: 0; }
html, body { margin: 0; min-height: 100%; background: #fff; }
body { display: flex; justify-content: center; align-items: flex-start; padding: 12px 0; font-family: Georgia, 'Times New Roman', serif; }
#viewport { position: relative; width: 1024px; height: 680px; overflow: hidden; }
#stage { position: absolute; width: 1024px; height: 680px; overflow: hidden; transform-origin: top left; background: #fff; }
#shell { position: absolute; inset: 0; pointer-events: none; }
#copyright-year { position: absolute; z-index: 10; left: 680px; top: 652px; width: 30px; height: 15px; background: #a20000; color: #fff; font: 12px/15px Georgia, 'Times New Roman', serif; text-align: center; pointer-events: none; }
nav button { position: absolute; z-index: 5; top: 65px; height: 34px; padding: 0; border: 0; color: transparent; background: transparent; border-radius: 0; cursor: pointer; }
nav button[aria-current="page"] { box-shadow: inset 0 -3px #ad3000; }
nav button:hover:not(:disabled) { background: #fff3; }
nav button:focus-visible { outline: 3px solid #005f93; outline-offset: -3px; }
nav .not-restored { background: #fffc; cursor: not-allowed; }
.panel { position: absolute; inset: 0; }
.panel[hidden] { display: none; }
.panel > svg { position: absolute; inset: 0; width: 1024px; height: 680px; overflow: hidden; pointer-events: none; }
.hit-control { position: absolute; padding: 0; border: 0; background: transparent; border-radius: 2px; pointer-events: auto; }
.hit-control[hidden] { display: none; }
a.hit-control { cursor: pointer; }
a.hit-control:focus-visible { outline: 2px solid #12639a; outline-offset: 3px; }
.ui-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.control-label { position: relative; z-index: 1; pointer-events: none; }
.source-voice { color: white; font: 12px Georgia, serif; }
.source-voice[aria-pressed="false"] { color: black; }
.original-control:hover, .original-control[aria-pressed="true"] { filter: none; }
.popup-surface { position: absolute; pointer-events: auto; }
.panel > .source-art { position: absolute; inset: 0; width: 1024px; height: 680px; pointer-events: none; }
.panel > svg > g { opacity: 0; }
[role="button"] { cursor: pointer; }
[role="button"]:hover { filter: brightness(1.08); }
[role="button"]:focus-visible { outline: 2px solid #12639a; outline-offset: 3px; }
[role="button"][aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
[aria-pressed="true"] { filter: drop-shadow(0 0 2px #9b2100); }
.dynamic { position: absolute; margin: 0; pointer-events: none; }
.initial-letter { color: #f18c08; -webkit-text-stroke: 1.5px white; text-shadow: 1px 2px 2px #bbb; font: 120px/1 Arial, sans-serif; text-align: center; }
.initial-description { color: #4e4e4e; font-size: 13.2px; line-height: 20.9px; overflow: auto; pointer-events: auto; }
.final-description { font-size: 12px; line-height: 19px; }
.final-letter { display: flex; align-items: center; justify-content: center; }
.clock { background: #d28600; color: white; font-size: 22px; font-weight: bold; text-align: center; font-variant-numeric: tabular-nums; border-radius: 3px; }
.clock[data-recording="true"] { background: #b21c00; }
.voice-choice { position: absolute; top: 576px; height: 24px; color: #fff; background: #ac0000; border: 1px solid #9a0000; border-radius: 3px; font: 12px Georgia, serif; cursor: pointer; }
.voice-choice[aria-pressed="true"] { box-shadow: 0 0 0 2px #ffac00; }
.syllable-word { color: #f58b08; -webkit-text-stroke: 1px white; text-shadow: 1px 2px 1px #aaa; font: 82px/1 Arial, sans-serif; text-align: center; }
.answer { position: absolute; color: #f15c00; background: transparent; border: 0; border-radius: 0; font: 28px Arial, sans-serif; cursor: pointer; }
.answer:disabled { opacity: .6; cursor: wait; }
.answer:focus-visible { outline: 3px solid #005f93; }
.marks { position: absolute; display: grid; grid-template-columns: repeat(10, 38px); width: 380px; height: 25px; color: #009d3c; font: bold 25px/25px Arial, sans-serif; text-align: center; }
.marks .wrong { color: #e23000; }
.question-label { position: absolute; font-size: 24px; font-weight: bold; color: #fff; background: #c7c7c7; }
.result-field { color: #686868; line-height: 1.2; }
.result-score { color: #a20000; text-align: center; }
.result-level { text-align: center; }
.source-overlay { position: absolute; inset: 0; width: 1024px; height: 680px; pointer-events: none; }
.dictation-input { position: absolute; border: 0; padding: 1px 3px; background: transparent; font-family: Arial, sans-serif; color: #000; }
.dictation-check { background: #eee; border: 1px solid #777; border-radius: 2px; font: 12px Arial, sans-serif; color: #000; }
.dictation-feedback { font: 18px/1.3 Georgia, serif; color: #900; }
#status { position: absolute; z-index: 10; bottom: 73px; left: 65px; max-width: 890px; color: #8c0000; background: #fff8e8; font: 14px/20px Arial, sans-serif; border-radius: 3px; padding: 2px 6px; }
#status:empty { display: none; }
#session-ended { position: absolute; inset: 108px 48px 70px; z-index: 10; background: #fff9e9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
#session-ended[hidden] { display: none; }
#session-ended h1 { font-size: 32px; color: #900; margin: 0; }
#session-ended button { font: 20px Georgia, serif; padding: 9px 24px; border: 1px solid #8d1800; border-radius: 4px; background: #ac0000; color: white; cursor: pointer; }
#viewport:fullscreen { background: white; }
#opening { position: absolute; inset: 0; z-index: 7; }
#opening[hidden], #opening-video[hidden] { display: none; }
#opening > img, #opening-video { position: absolute; inset: 0; width: 1024px; height: 680px; pointer-events: none; }
#opening button { z-index: 1; }
#opening button:focus-visible { outline: 3px solid #12639a; outline-offset: 2px; }
#learning-transition { z-index: 4; }
#book-transition { z-index: 4; }
#final-title { z-index: 2; }
#book-transition[hidden], #final-title[hidden] { display: none; }
#learning-transition[hidden], #original-cue[hidden] { display: none; }
#original-cue { position: absolute; z-index: 2; pointer-events: none; }
#original-cue > img { position: absolute; }
@media (max-width: 1024px) { body { padding: 0; } }