:root{--night:#07392D;--pitch:#21734B;--chalk:#F2F1DE;--fresh:#B8E56A;--bg:var(--chalk);--ink:var(--night);--accent:var(--fresh);--gutter:clamp(20px,5vw,32px);--radius-control:10px;--radius-panel:16px;--motion-fast:160ms;--motion-ease:cubic-bezier(.2,.7,.2,1);font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}body{--muted:color-mix(in srgb,var(--ink) 78%,var(--bg));--rule:color-mix(in srgb,var(--ink) 22%,transparent);--control-rule:color-mix(in srgb,var(--ink) 56%,transparent);margin:0;min-width:280px;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.5}body.dark{--bg:var(--night);--ink:var(--chalk)}button,input,textarea{font:inherit}button,a,input,textarea{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.55}a{color:inherit;text-underline-offset:4px}button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--pitch);outline-offset:4px}.dark :focus-visible{outline-color:var(--fresh)}h1,h2,p{margin:0}h1{font-size:clamp(36px,9vw,52px);line-height:1.08;letter-spacing:-.035em;font-weight:700;overflow-wrap:anywhere}h1 em{font-family:Georgia,'Times New Roman',serif;font-weight:700;font-style:italic}h2{font-size:21px;line-height:1.3;letter-spacing:-.02em}p{overflow-wrap:anywhere}.small{font-size:13px;line-height:1.5}.eyebrow{text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:.1em}.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}.skip-link{position:absolute;top:-80px;left:16px;background:var(--fresh);color:var(--night);padding:12px;z-index:10}.skip-link:focus{top:12px}
#app{max-width:560px;margin:0 auto;min-height:100svh;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.site-header{margin:0 var(--gutter);padding:22px 0 16px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:16px}.brand{border:0;background:none;color:inherit;padding:4px 0;min-height:44px;max-width:75%;text-decoration:none;text-align:left}.brand-mark{display:block;font:inherit;font-size:clamp(20px,5vw,28px);font-weight:700;line-height:1.2;white-space:nowrap}.text-button{border-radius:var(--radius-control);min-height:44px;padding:10px 2px;border:0;background:transparent;color:inherit;font-size:14px;font-weight:700;text-underline-offset:4px}.text-button:hover{text-decoration:underline}.screen{padding:24px var(--gutter) 36px;flex:1;outline:none!important}.button{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;min-height:56px;padding:15px 20px;border:2px solid transparent;border-radius:var(--radius-control);background:var(--fresh);color:var(--night);font-size:18px;font-weight:700;text-align:left;line-height:1.3}.button>span[aria-hidden] svg{display:block}.button>span[aria-hidden]{font-size:24px;line-height:1;flex:none}.button:hover:not(:disabled){background:#c8ed8b}.button.secondary{min-height:52px;background:transparent;color:inherit;border:1px solid var(--control-rule);font-size:16px}.button.secondary:hover:not(:disabled){background:color-mix(in srgb,currentColor 8%,transparent)}.button+.button{margin-top:12px}.bottom-bands{height:12px;display:grid;grid-template-columns:repeat(7,1fr);flex:none}.bottom-bands i{background:var(--pitch)}.bottom-bands i:nth-child(even){background:var(--night)}.dark .bottom-bands i:nth-child(even){background:var(--fresh)}
.home>.eyebrow{margin-bottom:12px}.home h1{max-width:420px;margin-bottom:20px}.home h1 em{display:block}.stadium{border-radius:var(--radius-panel);display:block;width:100%;max-width:448px;margin:28px auto 0;height:auto;aspect-ratio:720/520}.home-copy{margin-bottom:24px}.home-copy h2{margin-bottom:8px}.home-copy p{max-width:380px;color:var(--muted)}.home-actions>.eyebrow{margin-bottom:10px}.home-actions>.small{margin-top:12px}.home-actions>.button.secondary{width:auto;max-width:100%;min-height:44px;padding:10px 2px;border:0;font-size:14px;text-decoration:underline;text-underline-offset:4px}.home-actions>.button+.button{margin-top:6px}.home-actions>.button.secondary:hover:not(:disabled){background:transparent;text-decoration-thickness:2px}.practice-note{font-size:12px;line-height:1.5;margin:18px 0 26px;color:var(--muted)}.home>.small{margin-top:12px}.replay{display:block;margin:10px auto 0;text-decoration:underline}.reset{border-top:1px solid var(--rule);margin-top:32px;padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:12px}.reset time{font-size:16px;font-variant-numeric:tabular-nums;font-weight:700}.site-footer{color:var(--muted);margin-top:24px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:11px}.site-footer nav{display:flex;gap:16px}.site-footer .text-button{font-size:12px}.ready h1{margin:20px 0}.ready>p:not(.eyebrow){max-width:44ch;margin-bottom:32px;color:var(--muted)}.progress{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;height:5px;margin:0 0 22px}.progress span{border:1px solid var(--control-rule)}.progress .done{background:var(--ink)}.progress .current{border-color:var(--ink);background:var(--fresh)}.question-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:36px}.answer-clock{text-align:right;white-space:nowrap}.timer-number{font-size:32px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}.answer-clock>span:last-child{display:block;font-size:11px;margin-top:5px;color:var(--muted)}.prompt{font-family:Arial,Helvetica,sans-serif;font-size:clamp(24px,6.1vw,30px);line-height:1.25;letter-spacing:-.025em;margin-bottom:16px}.scope{color:var(--muted);font-size:14px;line-height:1.55;margin-bottom:32px;max-width:440px}#answer-form>label{display:block;font-size:13px;font-weight:700;margin-bottom:8px}input[type=text],textarea{width:100%;min-width:0;border:2px solid var(--ink);border-radius:var(--radius-control);background:transparent;color:inherit;padding:13px 14px;font-size:20px;line-height:1.4}input[readonly]{opacity:.8}.answer-notice{min-height:44px;padding-top:10px;font-size:14px;font-weight:700;line-height:1.45}.correction{border:0;padding:0;margin:12px 0 24px;min-width:0}.correction legend{font-size:15px;font-weight:700;margin-bottom:6px}.correction>.small{margin-bottom:12px}.candidate{border-radius:var(--radius-control);display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--ink);min-height:62px;margin-bottom:8px;cursor:pointer}.candidate:has(input:checked){background:var(--fresh)}.candidate input{width:20px;height:20px;accent-color:var(--night);flex:none}.candidate strong{display:block;font-size:16px;overflow-wrap:anywhere}.candidate small{display:block;font-size:12px;font-weight:400}.pass{display:block;margin:12px auto 0;min-height:48px}.feedback>.eyebrow{margin-bottom:24px}.feedback h1{font-size:clamp(28px,7vw,38px);letter-spacing:-.025em}.earned{font-size:clamp(80px,23vw,112px);font-weight:700;line-height:1.1;letter-spacing:-.06em;color:var(--fresh);margin:24px 0 16px}.earned>span:not(.sr-only){font-size:14px;letter-spacing:0;margin-left:10px;font-weight:400}.accepted-name{font-size:24px;font-weight:700;line-height:1.3}.rarity{font-size:13px;margin-top:8px}.feedback-note{max-width:360px}.total-line{margin:32px 0;padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;font-size:15px}.total-line strong{font-size:24px}.pause-note{color:var(--muted);font-size:12px;text-align:center;margin-top:16px}.result>.eyebrow{margin-bottom:24px}.result h1{font-size:clamp(32px,8vw,44px);max-width:420px}.result h1 em{display:block}.final-score{font-size:clamp(80px,22vw,112px);line-height:1.1;font-weight:700;letter-spacing:-.055em;margin:24px 0}.final-score>span{font-size:16px;font-weight:400;letter-spacing:0;white-space:nowrap}.score-strip{list-style:none;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin:0 0 28px}.score-strip li{border-radius:var(--radius-control);background:var(--chalk);color:var(--night);text-align:center;padding:12px 2px}.score-strip li>span:first-child{display:block;font-size:10px;margin-bottom:8px}.score-strip strong{font-size:clamp(15px,4.2vw,20px)}.result-note{font-size:14px;margin-bottom:24px;max-width:380px}.result>.small{margin-top:16px}.sources{font-size:12px;margin-top:24px}.sources summary{cursor:pointer;min-height:44px;padding-block:10px;text-decoration:underline}.sources p{margin-block:12px}.sources ul{padding-left:18px}.sources li{margin-bottom:8px}.connection{border-radius:var(--radius-panel);border:2px solid currentColor;padding:16px;margin-bottom:24px;font-size:14px}.connection p{margin-bottom:12px}.connection .button{min-height:48px}.connection+.question .question-top{margin-bottom:24px}
dialog{--bg:var(--chalk);--ink:var(--night);--muted:color-mix(in srgb,var(--ink) 78%,var(--bg));--rule:color-mix(in srgb,var(--ink) 22%,transparent);--control-rule:color-mix(in srgb,var(--ink) 56%,transparent);border-radius:var(--radius-panel);width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 32px);border:1px solid var(--control-rule);padding:24px;background:var(--chalk);color:var(--night);overflow:auto}dialog::backdrop{background:rgb(7 57 45 / .72)}dialog h2{font-size:26px;line-height:1.2;margin-bottom:20px}dialog p{font-size:15px;margin-bottom:18px}dialog form[method=dialog]{margin-top:24px}dialog textarea{font-size:16px;margin:4px 0 16px;resize:vertical}.rules{padding-left:20px;font-size:15px}.rules li{padding-left:4px;margin-bottom:14px}.provider-list{display:grid;gap:12px}.provider-list .button{font-size:14px}.dark dialog :focus-visible{outline-color:var(--pitch)}
@media(min-width:768px){#app{border-inline:1px solid color-mix(in srgb,currentColor 18%,transparent)}.screen{padding-top:32px}.question-top{margin-bottom:44px}}
/* Wide screens use the pitch horizontally; smaller windows keep the mobile flow. */
@media (min-width: 1024px) {
  #app { max-width: 1200px; --gutter: 48px; }
  .site-header { padding-block: 28px 22px; }
  .screen { padding-top: 48px; }
  .home {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    column-gap: clamp(40px, 5vw, 64px);
    align-items: start;
  }
  .home > * { grid-column: 1; min-width: 0; }
  .home h1 { max-width: none; font-size: clamp(52px, 5vw, 64px); }
  .home-copy p { max-width: 40ch; }
  .home > .stadium {
    grid-column: 2;
    grid-row: 1 / span 5;
    align-self: center;
    max-width: none;
    margin: 0;
  }
  .home > .practice-note { margin-bottom: 0; }
  .home > .reset, .home > .site-footer { grid-column: 1 / -1; }
  .screen > .ready, .screen > .question, .screen > .feedback, .screen > .result {
    max-width: 640px;
    margin-inline: auto;
  }
  .connection { max-width: 640px; margin-inline: auto; }
  [data-stage-connection]:has(.connection) { padding: 24px var(--gutter) 0; }
}
@media(max-height:650px){.site-header{padding-top:12px;padding-bottom:10px}.screen{padding-top:18px}.question-top{margin-bottom:24px}.scope{margin-bottom:24px}}

/* The same lightweight shell appears before modules load and during recovery. */
.screen[data-view="loading"]{display:flex;align-items:center;justify-content:center}
.loading{width:100%;max-width:400px;margin:12px auto 40px;text-align:center}
.loading-pitch{display:block;width:min(100%,280px);height:auto;margin:0 auto 28px}
.loading-copy h1{font-size:clamp(28px,7vw,36px);line-height:1.16;letter-spacing:-.03em}
.loading-copy h1 em{display:block}
.loading-copy p{max-width:34ch;margin:16px auto 0;color:var(--muted);font-size:15px;line-height:1.6}
.loading-actions{display:flex;justify-content:center;align-items:center;gap:8px 24px;flex-wrap:wrap;margin:24px auto 0;max-width:320px}
.loading-actions>.button{flex-basis:100%}
.loading-reload{display:inline-flex;align-items:center;font-weight:400;text-decoration:underline}
.loading-details{margin:18px auto 0;max-width:34ch;font-size:12px;color:var(--muted)}
.loading-details summary{min-height:44px;padding:12px 4px;cursor:pointer;text-underline-offset:4px}
.loading-details summary:hover{text-decoration:underline}
.loading-details p{padding:10px 0;text-align:left;border-top:1px solid var(--rule);overflow-wrap:anywhere}
.loading:has(.startup-noscript) .loading-copy{display:none}
.loading:has(.startup-noscript) .loading-ball{animation:none!important}
.startup-noscript{max-width:440px;margin:24px auto;padding:0 24px;font-size:15px;color:var(--night)}
@media(max-height:650px){.loading{margin:0 auto 16px}.loading-pitch{width:210px;margin-bottom:20px}}

/* Short visual feedback only: no delay, input lock, or timed-question entrance. */
@media(prefers-reduced-motion:no-preference){
  .button,.text-button,.candidate{transition:background-color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease),transform var(--motion-fast) var(--motion-ease)}
  .button:active:not(:disabled){transform:translateY(1px)}
  .screen-enter:not([data-view="question"]):not([data-view="loading"]):not([data-view="game"]),dialog[open]{animation:settle var(--motion-fast) var(--motion-ease)}
  dialog[open]::backdrop{animation:reveal var(--motion-fast) ease-out}
  .loading[data-load-state="loading"] .loading-ball{animation:loading-roll 1.8s ease-in-out 2}
  @keyframes loading-roll{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(7px) rotate(16deg)}}
  @keyframes settle{from{opacity:.72;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
  @keyframes reveal{from{opacity:0}to{opacity:1}}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
#profile-form>label{display:block;font-size:13px;font-weight:700;margin-bottom:8px}#profile-form input{margin-bottom:12px}#profile-help{font-size:13px;line-height:1.5}dialog h3{font-size:18px;margin:24px 0 12px}.profile-history{padding-left:20px;margin:0 0 18px;font-size:14px;line-height:1.7}

/* Information links stay outside the timed answer form. */
.home-actions .demo-link{display:block;width:fit-content;margin-top:8px;text-decoration:underline;font-weight:400}
.site-footer nav{flex-wrap:wrap;gap:8px 20px}
.site-footer .service-links{flex-basis:100%;border-top:1px solid var(--rule);padding-top:12px}
.service-links a{display:inline-flex;align-items:center;min-height:44px;font-size:12px}
.report-question{display:block;width:fit-content;margin:10px auto 0;font-size:13px;font-weight:400;text-decoration:underline}
.account-information{margin-top:20px}
.button[hidden]{display:none}
.screen[data-view="loading"]{flex-direction:column}
.startup-information{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px;margin-bottom:16px;font-size:12px}
.startup-information a{display:inline-flex;align-items:center;min-height:44px}