@font-face {
  font-family: "KEL Montserrat";
  src: url("../fonts/kel-montserrat.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Courier Prime";
  src: url("../fonts/kel-courier-prime.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* Shared tokens. Opt in only the question screen during the first review. */
:root:has(.kel-run) {
  --paper: #ffffff;
  --ink: #000000;
  --rose: #f5bfab;
  --bleu: #5f97d1;
  --amande: #bbcbb0;
  --ocre: #b17d1d;
  --sable: #f4f1ea;
  --line: #e6e6e6;
  --track: #eeeeee;
  --option-line: #d6d6d6;
  --kel-pill: 9999px;
  --kel-card: 32px;
  --kel-block: 40px;
  --kel-font: "KEL Montserrat", Montserrat, sans-serif;
  --kel-note: "Courier Prime", "Courier New", monospace;
  --kel-measure: 1240px;
  --kel-gutter: 24px;

  /* Bridge legacy styles for the shared dialog, player and passage renderer. */
  --blue: var(--bleu); --blue-ink: var(--ink); --blue-soft: var(--bleu);
  --ochre: var(--sable); --ochre-soft: var(--sable);
  --coral: var(--rose); --coral-ink: var(--ink); --coral-soft: var(--rose);
  --plum: var(--ink); --plum-soft: var(--rose);
  --sage: var(--amande); --green: var(--amande); --green-ink: var(--ink); --green-soft: var(--amande);
  --ink-2: var(--ink); --ink-3: var(--ink); --card: var(--paper); --line-2: var(--track);
  --radius: var(--kel-card); --radius-s: var(--kel-pill); --shadow: none;
  --font: var(--kel-font); --read: var(--kel-font);
}

body:has(.kel-run) {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--kel-font);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
}

body:has(.kel-run) :is(a, .muted, .hint, .small, .eyebrow) { color: var(--ink); }
body:has(.kel-run) :is(.hint, .kel-type) { font-family: var(--kel-note); font-weight: 400; }
body:has(.kel-run) :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

body:has(.kel-run) :is(h1, h2, h3, h4) {
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
}

body:has(.kel-run) :is(h1, h2, h3, h4)::after {
  content: "";
  display: block;
  width: 80px;
  height: 11px;
  margin-top: 14px;
  border-radius: var(--kel-pill);
  background: var(--rose);
}

.kel-brand, .kel-foot { display: none; }
body:has(.kel-run) .kel-original { display: none; }
body:has(.kel-run) .top { background: var(--paper); backdrop-filter: none; position: static; }
body:has(.kel-run) :is(.top-in, #app, .foot) {
  max-width: var(--kel-measure);
  padding-inline: var(--kel-gutter);
}
body:has(.kel-run) .top-in { padding-block: 16px; justify-content: space-between; }
body:has(.kel-run) .kel-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; min-height: 44px; }
.kel-brand b, .kel-brand small { display: block; }
.kel-brand b { font-size: 17px; font-weight: 900; letter-spacing: .04em; line-height: 1.2; }
.kel-brand small { font-family: var(--kel-note); font-size: 14px; }
.kel-brand-symbol { display: block; flex: none; }
.kel-symbol-ocre { fill: var(--ocre); }
.kel-symbol-amande { fill: var(--amande); }
.kel-symbol-rose { fill: var(--rose); }
.kel-symbol-bleu { fill: var(--bleu); }
body:has(.kel-run) .nav a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 600; }
body:has(.kel-run) .nav a.on { background: var(--bleu); color: var(--ink); }
body:has(.kel-run) #app { padding-block: 40px 96px; }
body:has(.kel-run) .kel-foot { display: flex; padding-block: 24px 40px; gap: 8px 24px; font-size: 16px; }
.kel-foot p { flex-basis: 100%; margin: 0; }
.kel-foot a { display: inline-flex; min-height: 44px; align-items: center; }

body:has(.kel-run) :is(.btn, .btn.small, .btn.big) {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--kel-pill);
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  justify-content: center;
  min-height: 44px;
  padding: 18px 30px;
  text-align: center;
}
body:has(.kel-run) .btn.primary { background: var(--bleu); border-color: var(--bleu); color: var(--ink); }
body:has(.kel-run) .btn.kel-strong { background: var(--ink); border-color: var(--ink); color: var(--paper); }
body:has(.kel-run) .btn:disabled { opacity: 1; background: var(--track); color: var(--ink); border-color: var(--line); }
body:has(.kel-run) .btn:hover:not(:disabled) { text-decoration: underline; }
body:has(.kel-run) :is(input:not([type="range"]), select, textarea) {
  border-radius: var(--kel-pill);
  color: var(--ink);
  min-height: 44px;
  font: inherit;
}
body:has(.kel-run) textarea { padding-inline: 24px; }
body:has(.kel-run) :is(.card, .modal, .doc, .player, .q, .toast) {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--kel-card);
  box-shadow: none;
}
body:has(.kel-run) .modal-bg { background: color-mix(in srgb, var(--ink) 30%, transparent); }
body:has(.kel-run) .bar { height: 10px; background: var(--track); border-radius: var(--kel-pill); }
body:has(.kel-run) .bar > i { background: var(--bleu); border-radius: var(--kel-pill); }
body:has(.kel-run) .bar.green > i { background: var(--amande); }
body:has(.kel-run) .bar.coral > i { background: var(--rose); }

.kel-run { max-width: 1080px; margin-inline: auto; }
.kel-run .runbar { position: static; border: 0; padding: 0; margin: 0 0 24px; }
.kel-run .kel-session { align-items: end; gap: 24px; }
.kel-run .kel-session h1 { font-size: clamp(1.75rem, 4vw, 2.875rem); margin: 0 0 16px; }
.kel-run .kel-subtitle { font-weight: 100; font-size: 20px; line-height: 1.25; letter-spacing: .04em; text-transform: uppercase; margin: 0; }
.kel-run .kel-actions { gap: 8px; justify-content: flex-start; }
.kel-run .kel-part, .kel-run .kel-verdict {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--kel-pill);
  background: var(--rose);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.kel-run .kel-part { white-space: nowrap; }
.kel-run .timer, .kel-run .timer.low { background: var(--sable); color: var(--ink); font-weight: 600; }
.kel-run .timer.low { background: var(--rose); }
.kel-run .kel-progress { margin-top: 24px; }
.kel-run .kel-progress-label { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; margin-bottom: 8px; }
.kel-run progress { appearance: none; display: block; width: 100%; height: 10px; overflow: hidden; border: 0; border-radius: var(--kel-pill); background: var(--track); }
.kel-run progress::-webkit-progress-bar { background: var(--track); }
.kel-run progress::-webkit-progress-value { background: var(--bleu); border-radius: var(--kel-pill); }
.kel-run progress::-moz-progress-bar { background: var(--bleu); border-radius: var(--kel-pill); }
.kel-run .qmap { gap: 8px; max-height: 110px; overflow: auto; padding: 6px; margin-inline: -6px; }
.kel-run .qmap button { width: 44px; height: 44px; font-size: 14px; border-radius: var(--kel-pill); }
.kel-run .qmap button:is(.ans,.ok,.ko) { border-color: var(--line); color: var(--ink); }
.kel-run .qmap button.flag { box-shadow: inset 0 -4px 0 var(--rose); }
.kel-run .ex { gap: 24px; }
.kel-run .ex:not(.split) { max-width: 820px; margin-inline: auto; }
.kel-run .ex.split .texts { position: static; max-height: none; overflow: visible; }
.kel-run .qs { min-width: 0; position: relative; isolation: isolate; }
.kel-run .ex:not(.split) .qs::before,
.kel-run .ex:not(.split) .qs::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.kel-run .ex:not(.split) .qs::before {
  inset: 0 -56px 48px;
  background:
    radial-gradient(circle closest-side, var(--bleu) 99%, transparent 100%) top right / 170px 170px,
    radial-gradient(ellipse 120px 108px at 50% 100%, var(--rose) 99%, transparent 100%) bottom right / 240px 108px;
  background-repeat: no-repeat;
}
.kel-run .ex:not(.split) .qs::after {
  top: 48px;
  bottom: 54px;
  left: -44px;
  width: 90px;
  background:
    radial-gradient(ellipse closest-side, var(--ocre) 99%, transparent 100%) bottom right / 90px 32px,
    linear-gradient(var(--amande), var(--amande)) 0 32px / 54px 105px,
    radial-gradient(circle closest-side, var(--amande) 99%, transparent 100%) top left / 54px 54px,
    radial-gradient(circle closest-side, var(--amande) 99%, transparent 100%) 0 110px / 54px 54px;
  background-repeat: no-repeat;
}
.kel-run .q { padding: clamp(20px, 4vw, 36px); }
.kel-run .ex:not(.split) .q { box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 6%, transparent); }
.kel-run .q.cur { border-color: var(--line); }
.kel-run .q:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.kel-run .q .qnum { font-weight: 900; font-size: 16px; letter-spacing: .02em; color: var(--ink); margin-bottom: 16px; align-items: start; flex-wrap: wrap; }
.kel-run .q .qnum > span:first-child::after { content: ""; display: block; width: 80px; height: 11px; margin-top: 8px; border-radius: var(--kel-pill); background: var(--amande); }
.kel-run .q .prompt, .kel-run .q .prompt.sentence { font: 400 clamp(1rem, 2vw, 1.25rem)/1.6 var(--kel-font); margin-bottom: 20px; }
.kel-run .opts { gap: 10px; }
@media (min-width: 700px) {
  .kel-part-5 .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kel-run .opt {
  min-height: 52px;
  align-items: center;
  background: var(--paper);
  border: 1.5px solid var(--option-line);
  border-radius: var(--kel-pill);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  padding: 9px 18px 9px 10px;
}
.kel-run .opt:hover:not(:disabled) { border-color: var(--ink); }
.kel-run .opt .l { flex-basis: 32px; height: 32px; background: var(--sable); border-color: transparent; color: var(--ink); font-weight: 600; }
.kel-run .opt .otext { min-width: 0; overflow-wrap: anywhere; }
.kel-run .opt.sel, .kel-run .opt.sel:hover:not(:disabled) { background: var(--bleu); border-color: var(--bleu); font-weight: 600; }
.kel-run .opt.right { background: var(--amande); border-color: var(--amande); }
.kel-run .opt.wrong { background: var(--rose); border-color: var(--rose); }
.kel-run .opt:is(.sel,.right,.wrong) .l { background: var(--paper); color: var(--ink); }
.kel-run .opt .obadge { color: var(--ink); background: var(--paper); font-weight: 600; }
.kel-run .opt .why { font: 400 16px/1.6 var(--kel-note); }
.kel-run .explain { border: 0; border-radius: var(--kel-card); background: var(--sable); color: var(--ink); padding: 20px; font: 400 16px/1.6 var(--kel-note); }
.kel-run .kel-verdict { font-family: var(--kel-font); margin: 0 0 8px; }
.kel-run .explain.ok .kel-verdict { background: var(--amande); }
.kel-run .explain .tag { color: var(--ink); background: var(--paper); }
.kel-run .qtools { margin-top: 20px; }
.kel-run .linkbtn { min-height: 44px; color: var(--ink); font-weight: 600; }
.kel-run .navrow { margin-top: 24px; }
.kel-run .blank { border-radius: var(--kel-pill); border-color: var(--ink); color: var(--ink); }
.kel-run .blank.cur, .kel-run .marker { border-radius: var(--kel-pill); background: var(--sable); color: var(--ink); }
.kel-run .player .acc::before { content: ""; display: inline-block; width: 14px; height: 14px; border-radius: var(--kel-pill); background: var(--amande); margin-right: 8px; }
.kel-run .player .kel-audio-icon { display: none; }
.kel-run .transcript summary { min-height: 44px; display: flex; align-items: center; }
.kel-run .transcript pre { font-family: var(--kel-note); }
.kel-run .pic img { border-radius: var(--kel-card); }

@media (max-width: 920px) {
  .kel-run .ex:not(.split) .qs::before,
  .kel-run .ex:not(.split) .qs::after { display: none; }
  .kel-run .ex:not(.split) .q { box-shadow: none; }
}
@media (max-width: 600px) {
  body:has(.kel-run) .top-in { flex-wrap: wrap; gap: 8px; }
  body:has(.kel-run) #app { padding-block: 24px 40px; }
  .kel-run .kel-session { align-items: start; }
  .kel-run .kel-session > * { width: 100%; }
  .kel-run .kel-actions { display: grid; grid-template-columns: 1fr auto; justify-items: start; }
  .kel-run .kel-actions > .timer { justify-self: end; }
  body:has(.kel-run) :is(.kel-actions, .navrow, .qtools) .btn { padding-inline: 18px; }
  .kel-run .qtools { gap: 8px; }
}