:root {
  color-scheme: light;
  --navy: #173154;
  --blue: #176bc1;
  --ivory: #f7f6f0;
  --surface: #fffefa;
  --muted: #475a72;
  --line: #74849a;
  --error: #a11b23;
  font: 100%/1.55 Inter, system-ui, sans-serif;
  color: var(--navy);
  background: var(--ivory);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
main { max-inline-size: 73rem; margin-inline: auto; padding: clamp(.75rem, 3vw, 2.5rem); }
.brand { margin: 0 0 1rem; font-weight: 750; letter-spacing: .025em; }
.journey { display: grid; gap: clamp(.75rem, 3vw, 2rem); align-items: start; }
.scene { --scene-light: #315981; position: relative; overflow: hidden; border-radius: 1.25rem; color: white; background: linear-gradient(145deg, var(--scene-light), #173154 76%); }
.scene[data-scene="foundation"] { --scene-light: #4a617b; }
.scene[data-scene="preparation"] { --scene-light: #3d6b78; }
.scene[data-scene="opportunity"] { --scene-light: #27618f; }
.scene[data-scene="possibilities"] { --scene-light: #655f72; }
.scene[data-scene="next-chapter"] { --scene-light: #527281; }
.scene-media { position: relative; height: clamp(7rem, 26vw, 16rem); }
.scene-media:empty::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 85% 5%, #ffffff28, transparent 70%); }
.scene-media img, .scene-media video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: inherit; }
.scene-chapter { position: absolute; margin: 0; inset: auto 0 0; padding: .75rem 1rem; background: linear-gradient(transparent, #0c203be8); font-weight: 700; }
.scene-playback { position: absolute; inset: .5rem .5rem auto auto; }
h1 { line-height: 1.15; margin: 0; font-size: clamp(1.55rem, 3vw, 2.6rem); overflow-wrap: break-word; }
.assessment { min-width: 0; padding: clamp(1rem, 4vw, 2.5rem); border-radius: 1.25rem; background: var(--surface); box-shadow: 0 12px 35px #17315415; }
.progress { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin-bottom: 1.75rem; font-weight: 650; font-size: .875rem; }
progress { grid-column: 1 / -1; width: 100%; height: .55rem; appearance: none; border: 0; background: #e2eaf3; border-radius: 1rem; overflow: hidden; }
progress::-webkit-progress-bar { background: #e2eaf3; }
progress::-webkit-progress-value { background: var(--blue); }
progress::-moz-progress-bar { background: var(--blue); }
#intro, #status, .hint { color: var(--muted); }
#status:empty, #intro:empty { display: none; }
#fields { display: grid; gap: 1rem; margin-block: 1.25rem; }
fieldset { min-inline-size: 0; margin: 0; border: 0; padding: 0; }
legend, .field-title { display: block; padding: 0; margin-bottom: .4rem; font-weight: 700; }
.choices { display: grid; gap: .45rem; }
.choice { display: flex; gap: .65rem; align-items: center; min-height: 48px; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: .65rem; background: white; cursor: pointer; }
.choice:has(input:checked) { background: #e9f3ff; border-color: var(--blue); }
input[type=radio], input[type=checkbox] { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--blue); }
input:not([type=radio]):not([type=checkbox]), select { width: 100%; min-height: 48px; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: .65rem; color: inherit; background: white; font: inherit; }
[aria-invalid=true] { outline: 1px solid var(--error); }
.error { color: var(--error); margin-block: .35rem; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; }
button { min-height: 48px; padding: .55rem 1.25rem; border: 1px solid var(--blue); border-radius: .55rem; background: var(--blue); color: white; font: inherit; font-weight: 700; cursor: pointer; }
button.secondary { color: var(--navy); background: white; border-color: var(--navy); }
button:disabled { opacity: .7; cursor: default; }
a { color: var(--blue); }
li + li { margin-top: .5rem; }
@media (min-width: 760px) {
  .scene-media { height: auto; aspect-ratio: 16 / 7; }
}
@media (min-width: 1024px) {
  .journey { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .scene-media { aspect-ratio: 4 / 5; }
}
@media (max-width: 390px) {
  .actions > button { width: 100%; }
  .progress { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .scene[data-scene] .scene-media > img { animation: scene-in .24s ease-out both; }
  button, .choice { transition: background-color .15s ease; }
}
#exam-details { display: grid; gap: .7rem; }

@keyframes scene-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }