@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: light;

  --exam-paper: #f5f2e9;
  --exam-paper-raised: #faf8f2;
  --exam-sheet: #fffefa;
  --exam-inset: #ece9df;
  --exam-ink: #1d2822;
  --exam-ink-secondary: #536159;
  --exam-ink-tertiary: #748078;
  --exam-ink-disabled: #9aa39d;

  --pen-blue: #315f88;
  --pen-blue-strong: #244866;
  --pen-blue-wash: #e5edf3;
  --pen-blue-quiet: #d4e1ea;

  --mark-correct: #2f7650;
  --mark-correct-wash: #e4f0e8;
  --mark-wrong: #a94742;
  --mark-wrong-wash: #f6e7e4;
  --mark-warning: #916a28;
  --mark-warning-wash: #f6edda;

  --podium-surface: #fff7cf;
  --podium-gold: #e4be55;
  --podium-silver: #d9dde0;
  --podium-copper: #d79a70;
  --podium-ink: #171717;

  --exam-line: rgba(29, 40, 34, .13);
  --exam-line-soft: rgba(29, 40, 34, .08);
  --exam-line-strong: rgba(29, 40, 34, .22);
  --exam-focus: rgba(49, 95, 136, .28);
  --exam-overlay: rgba(18, 25, 21, .54);

  --exam-shadow-float: 0 0 0 1px rgba(29, 40, 34, .08), 0 18px 48px rgba(29, 40, 34, .16);
  --exam-shadow-soft: 0 0 0 1px rgba(29, 40, 34, .06), 0 2px 8px rgba(29, 40, 34, .04);

  --student-paper: #f1efec;
  --student-paper-raised: #f9f8f6;
  --student-sheet: #fffefd;
  --student-inset: #e9e5e1;
  --student-ink: #302b28;
  --student-ink-secondary: #665e59;
  --student-ink-tertiary: #827973;
  --student-ink-disabled: #a39b95;
  --student-clay: #795c50;
  --student-clay-strong: #5c453b;
  --student-clay-wash: #f0e6e0;
  --student-clay-quiet: #e1d1c8;
  --student-correct: #4c765b;
  --student-correct-wash: #e3eee6;
  --student-wrong: #a94f4b;
  --student-wrong-wash: #f6e7e5;
  --student-warning: #896b33;
  --student-warning-wash: #f6eedc;
  --student-line: rgba(48, 43, 40, .14);
  --student-line-soft: rgba(48, 43, 40, .08);
  --student-line-strong: rgba(48, 43, 40, .22);
  --student-focus: rgba(121, 92, 80, .28);
  --student-overlay: rgba(30, 26, 24, .54);
  --student-shadow-float: 0 0 0 1px rgba(48, 43, 40, .08), 0 18px 48px rgba(48, 43, 40, .14);
  --student-shadow-soft: 0 0 0 1px rgba(48, 43, 40, .06), 0 2px 8px rgba(48, 43, 40, .035);

  --radius-control: 6px;
  --radius-panel: 10px;
  --radius-dialog: 14px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);

  --z-base: 0;
  --z-sticky: 20;
  --z-toast: 40;
  --z-dialog: 50;
}

[data-theme="dark"] {
  color-scheme: dark;

  --exam-paper: #111612;
  --exam-paper-raised: #161d18;
  --exam-sheet: #1b231d;
  --exam-inset: #0d120f;
  --exam-ink: #eef2ed;
  --exam-ink-secondary: #b4beb7;
  --exam-ink-tertiary: #8e9a92;
  --exam-ink-disabled: #68736c;

  --pen-blue: #8ab2d1;
  --pen-blue-strong: #b3cee1;
  --pen-blue-wash: #1d3444;
  --pen-blue-quiet: #27475d;

  --mark-correct: #78bd91;
  --mark-correct-wash: #173527;
  --mark-wrong: #e3938b;
  --mark-wrong-wash: #402321;
  --mark-warning: #d4ae68;
  --mark-warning-wash: #392e1d;

  --podium-surface: #3a331c;
  --podium-gold: #d7b652;
  --podium-silver: #b8bec4;
  --podium-copper: #bd805c;
  --podium-ink: #171717;

  --exam-line: rgba(255, 255, 255, .11);
  --exam-line-soft: rgba(255, 255, 255, .07);
  --exam-line-strong: rgba(255, 255, 255, .2);
  --exam-focus: rgba(138, 178, 209, .34);
  --exam-overlay: rgba(0, 0, 0, .66);
  --exam-shadow-float: 0 0 0 1px rgba(255, 255, 255, .1);
  --exam-shadow-soft: 0 0 0 1px rgba(255, 255, 255, .08);

  --student-paper: #181514;
  --student-paper-raised: #211d1b;
  --student-sheet: #292321;
  --student-inset: #120f0e;
  --student-ink: #f2eeeb;
  --student-ink-secondary: #c5bab4;
  --student-ink-tertiary: #9e918a;
  --student-ink-disabled: #786e68;
  --student-clay: #bf9788;
  --student-clay-strong: #dfbeb1;
  --student-clay-wash: #452f28;
  --student-clay-quiet: #5a3c32;
  --student-correct: #88b697;
  --student-correct-wash: #1c3826;
  --student-wrong: #e1968f;
  --student-wrong-wash: #402421;
  --student-warning: #d8b572;
  --student-warning-wash: #3b301e;
  --student-line: rgba(255, 255, 255, .11);
  --student-line-soft: rgba(255, 255, 255, .07);
  --student-line-strong: rgba(255, 255, 255, .2);
  --student-focus: rgba(191, 151, 136, .34);
  --student-overlay: rgba(0, 0, 0, .66);
  --student-shadow-float: 0 0 0 1px rgba(255, 255, 255, .1);
  --student-shadow-soft: 0 0 0 1px rgba(255, 255, 255, .08);
}

html {
  scroll-behavior: smooth;
}

body,
button,
input,
select,
textarea {
  font-family: "Be Vietnam Pro", "Trebuchet MS", sans-serif;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  letter-spacing: -.025em;
  text-wrap: balance;
}

p,
li,
figcaption {
  text-wrap: pretty;
}

button,
input,
select,
textarea,
[tabindex] {
  -webkit-tap-highlight-color: transparent;
}

:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--exam-focus);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: calc(var(--z-dialog) + 1);
  padding: 10px 14px;
  border-radius: var(--radius-control);
  background: var(--exam-ink);
  color: var(--exam-sheet);
  font-size: 14px;
  font-weight: 700;
  transform: translateY(-150%);
  transition: transform 160ms var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.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;
}

.required-mark {
  color: var(--mark-wrong);
}

.text-center {
  text-align: center;
}

.measure-narrow {
  max-width: 65ch;
}

.skeleton {
  min-height: 16px;
  border-radius: var(--radius-control);
  background: var(--exam-inset);
  opacity: .72;
  animation: skeleton-pulse 1.2s var(--ease-out) infinite alternate;
}

@keyframes skeleton-pulse {
  to { opacity: .38; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}