:root {
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
  --white: #FFFFFF;
  --apollo: #E7E9F3;
  --moon: #83959B;
  --sky: #B8CFDF;
  --blue: #0B3D91;
  --red: #FC3D21;
  --ink: #1D1D1B;
  color: var(--ink);
  background: var(--apollo);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
.shell { max-width: 520px; margin: auto; min-height: 100svh; display: flex; flex-direction: column; padding: 0 24px; background: var(--white); border-top: 6px solid var(--red); }
header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:26px 0; }
.brand { font-size:27px; letter-spacing:-1.4px; font-weight:800; color:var(--blue); text-decoration:none; }
.edition { font-size:11px; font-weight:700; letter-spacing:1.8px; color:var(--blue); }
main { flex:1; padding:20px 0 32px; }
h1 { font-size:clamp(32px,8vw,44px); letter-spacing:-1.5px; line-height:1.12; margin:20px 0; overflow-wrap:anywhere; }
p { font-size:18px; line-height:1.55; margin:16px 0; }
.eyebrow { font-size:13px; letter-spacing:1.2px; font-weight:700; text-transform:uppercase; color:var(--blue); }
.stage-symbol { height:88px; width:88px; border-radius:50%; display:grid; place-items:center; font-size:36px; font-weight:700; margin:8px 0 28px; background:var(--sky); color:var(--blue); }
.meta { font-size:14px; margin:24px 0; font-weight:700; color:var(--blue); }
button { cursor:pointer; min-height:58px; border:0; border-radius:10px; font:700 17px Arial,sans-serif; padding:16px 22px; width:100%; background:var(--blue); color:var(--white); text-align:center; }
button:hover { background:var(--ink); }
button:disabled { opacity:.6; cursor:wait; }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid var(--red); outline-offset:4px; }
.progress { display:flex; gap:8px; margin:0 0 28px; }
.progress span { height:5px; flex:1; background:var(--apollo); border-radius:5px; }
.progress .complete { background:var(--blue); }
.hint { font-size:16px; margin:24px 0 28px; }
.notice,.storage-note { font-size:14px; line-height:1.55; background:var(--apollo); padding:14px 16px; border-radius:8px; margin:20px 0; }
.correct .stage-symbol,.finish .stage-symbol { background:var(--blue); color:var(--white); }
.wrong .stage-symbol { background:var(--red); color:var(--ink); }
label { display:block; font-weight:700; font-size:15px; margin:20px 0 8px; }
input:not([type=radio]) { width:100%; border:1px solid var(--moon); background:var(--white); border-radius:8px; min-height:54px; padding:12px; font:18px Arial,sans-serif; color:var(--ink); }
form button { margin-top:20px; }
fieldset { border:0; padding:0; margin:24px 0 0; min-width:0; }
legend { font-size:16px; margin-bottom:4px; }
.choice { display:flex; gap:14px; align-items:center; padding:16px; border:1px solid var(--moon); border-radius:10px; min-height:58px; margin:12px 0; cursor:pointer; }
.choice:has(input:checked) { border:2px solid var(--blue); background:var(--apollo); padding:15px; }
.choice input { width:22px; height:22px; margin:0; flex-shrink:0; accent-color:var(--blue); }
footer { border-top:1px solid var(--sky); padding:22px 0 24px; font-size:13px; color:var(--ink); line-height:1.7; }
footer span { display:block; }
@media(min-width:700px) { .shell { margin:32px auto; min-height:calc(100svh - 64px); padding:0 40px; border-radius:20px; overflow:hidden; } }