:root {
  color-scheme: light;
  --bg: #f5f6f9; --card: #fff; --ink: #172335; --muted: #52627a; --edge: #d1d9e3; --tint: #edf1f6;
  --default-link: #165ca2; --good: #187142; --good-tint: #e6f4ec; --bad: #b42d3b; --bad-tint: #fbecef;
  --primary: var(--org-primary, var(--org-brand, #374151));
  --on-primary: var(--org-on-primary, var(--org-on-brand, #fff));
  --link: var(--org-link, var(--default-link));
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101925; --card: #1b2838; --ink: #edf3fa; --muted: #b2c1d2; --edge: #46586d; --tint: #25364a;
  --default-link: #9dccff; --good: #8de0ae; --good-tint: #193d31; --bad: #ffabb5; --bad-tint: #472b36;
  --link: var(--org-link-dark, var(--default-link));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --bg: #101925; --card: #1b2838; --ink: #edf3fa; --muted: #b2c1d2; --edge: #46586d; --tint: #25364a;
    --default-link: #9dccff; --good: #8de0ae; --good-tint: #193d31; --bad: #ffabb5; --bad-tint: #472b36;
    --link: var(--org-link-dark, var(--default-link));
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--sticky-header-height, 0px) + 1rem); }
body { margin: 0; background: radial-gradient(circle at 12% -10%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 35rem), var(--bg); color: var(--ink); font: 1rem/1.6 var(--org-font, system-ui, -apple-system, "Segoe UI", sans-serif); overflow-wrap: anywhere; }
a { color: var(--link); text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; }
button, select, summary { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.site-header { display: flex; align-items: center; gap: 1.2rem; min-height: 4.25rem; padding: .75rem max(1rem, calc((100vw - 76rem) / 2)); background: linear-gradient(115deg, color-mix(in srgb, var(--primary) 80%, #000), var(--primary) 57%, color-mix(in srgb, var(--org-accent, #e5e7eb) 32%, var(--primary))); color: var(--on-primary); box-shadow: 0 2px 16px rgb(0 0 0 / .18); }
.site-header a { color: inherit; }
.site-header.search-active, .site-header.quiz-active { position: sticky; top: 0; z-index: 40; flex-wrap: wrap; }
.search-header-controls { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.quiz-header-controls { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.header-scores { display: flex; align-items: center; gap: .8rem; font-variant-numeric: tabular-nums; }
.header-score { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.header-score strong { font-size: 1.2rem; }
.search-header-controls .button, .quiz-header-controls .button { min-height: 2.3rem; padding: .4rem .65rem; font-size: .9rem; }
@media (max-width: 1000px) {
  .search-active .search-header-controls, .quiz-active .quiz-header-controls { order: 1; flex-basis: 100%; justify-content: center; }
}
.brand { flex-shrink: 0; font-size: 1.05rem; font-weight: 350; letter-spacing: .025em; text-decoration: none; }
.header-title { font-size: 1.05rem; font-weight: 750; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-links { display: flex; align-items: center; gap: 1rem; margin-left: auto; flex-shrink: 0; }
.theme-picker { display: flex; align-items: center; gap: .4rem; font-size: .85rem; }
.theme-picker select { width: auto; border: 1px solid currentColor; border-radius: .4rem; background: transparent; color: inherit; padding: .3rem .35rem; font-size: .85rem; }
.theme-picker option { background: var(--card); color: var(--ink); }
.auth-controls { display: flex; align-items: center; gap: .8rem; }
.auth-controls form { display: contents; }
.auth-button { padding: .35rem 0; background: transparent; color: inherit; border: 0; font: inherit; text-decoration: underline; text-underline-offset: .18em; }
.wrap { max-width: 76rem; margin: auto; padding: 1.3rem clamp(1rem, 3vw, 2rem) 4rem; }
.quiz-wrap { max-width: 66rem; }
.page-head { margin: clamp(1rem, 3vw, 2.5rem) 0 1.7rem; }
.eyebrow { color: var(--muted); font-size: .8rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; margin: 0 0 .65rem; }
h1 { margin: 0; font-size: clamp(2rem, 4.5vw, 3.3rem); line-height: 1.13; letter-spacing: -.035em; text-wrap: balance; }
h2 { line-height: 1.25; letter-spacing: -.015em; }
.heading-line, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.subtitle { color: var(--muted); font-size: 1.1rem; margin: .85rem 0 0; max-width: 68ch; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.65rem; padding: .55rem .95rem; border: 1px solid transparent; border-radius: .45rem; background: var(--org-brand, var(--primary)); color: var(--org-on-brand, var(--on-primary)); text-decoration: none; font-weight: 700; line-height: 1.35; }
.button:hover:not(:disabled) { filter: brightness(1.12); }
.button.subtle { background: var(--tint); color: var(--ink); border-color: var(--edge); }
.panel { background: var(--card); border: 1px solid var(--edge); border-radius: .7rem; padding: clamp(1rem, 2.5vw, 1.5rem); }
.search-panel h2 { font-size: 1.2rem; margin: 0 0 1rem; }
.search-form { display: flex; align-items: end; gap: .85rem; flex-wrap: wrap; }
.search-form label { display: grid; gap: .4rem; font-weight: 650; font-size: .9rem; }
.search-field { flex: 2 1 18rem; }
.organization-field { flex: 1 1 15rem; }
input, select, textarea { border: 1px solid var(--edge); border-radius: .4rem; background: var(--bg); color: var(--ink); padding: .6rem .7rem; width: 100%; min-width: 0; }
.search-actions, .actions, .play-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.compact { margin: .8rem 0 0; font-size: .9rem; }
.muted { color: var(--muted); }
.status { color: var(--muted); margin: 1rem 0; }
.status:empty { display: none; }
.status.error { color: var(--bad); border-left: 3px solid var(--bad); padding-left: 1rem; }
.archive-section { margin: 2.5rem 0; }
.section-heading { margin: 0 0 1rem; }
.section-heading h2 { margin: 0; font-size: 1.5rem; }
.quiz-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.quiz-grid > li { min-width: 0; }
.quiz-card { display: flex; flex-direction: column; height: 100%; padding: 1.2rem; border: 1px solid var(--edge); border-left: .35rem solid var(--primary); border-radius: .6rem; background: color-mix(in srgb, var(--primary) 7%, var(--card)); font-family: var(--org-font, inherit); }
.quiz-card, .search-result { --primary: var(--org-primary, var(--org-brand, #374151)); --on-primary: var(--org-on-primary, var(--org-on-brand, #fff)); }
.quiz-card .eyebrow { margin: 0 0 .5rem; font-size: .75rem; }
.quiz-card h3 { font-size: 1.2rem; line-height: 1.35; margin: 0 0 .5rem; }
.quiz-card h3 a { color: var(--ink); text-decoration: none; }
.quiz-card h3 a:hover { text-decoration: underline; }
.quiz-card .quiz-meta { margin: 0 0 1rem; color: var(--muted); font-size: .9rem; }
.card-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: .75rem; color: var(--muted); font-size: .85rem; }
.card-footer a { font-weight: 750; color: var(--ink); }
.setting-note { border-top: 1px solid var(--edge); padding-top: 1rem; color: var(--muted); margin-top: 3rem; }
.setting-note p { font-size: .9rem; }
.back-link { font-weight: 650; font-size: .9rem; text-decoration: none; }
.quiz-head { display: flex; align-items: center; gap: 1.25rem; }
.quiz-head > div { min-width: 0; }
.quiz-logo { max-width: 6rem; max-height: 6rem; object-fit: contain; }
.quiz-details { margin: -1rem 0 1.5rem; }
.quiz-details summary { color: var(--link); font-weight: 650; width: fit-content; }
.metadata { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; padding: 1rem; background: var(--card); border: 1px solid var(--edge); border-radius: .5rem; }
.metadata dt { color: var(--muted); }
.metadata dd { margin: 0; }
.play-toolbar { margin-bottom: 1.5rem; }
.play-toolbar .progress-count { margin-left: 0; margin-right: auto; }
.tsv-export h2 { margin: 0 0 1rem; }
.tsv-actions { margin-bottom: 1rem; }
.tsv-export label { display: block; margin-bottom: .4rem; font-weight: 650; }
.tsv-export textarea { min-height: 28rem; resize: vertical; font: .875rem/1.5 Consolas, "Courier New", monospace; overflow-wrap: normal; }
.scoreboard { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem; margin-bottom: 1rem; font-variant-numeric: tabular-nums; }
.score { display: inline-flex; align-items: center; gap: .4rem; }
.score strong { font-size: 1.65rem; line-height: 1; }
.score-label, .progress-count { font-size: .9rem; color: var(--muted); }
.progress-count { margin-left: auto; }
.questions { display: grid; gap: 1rem; }
.question-card { background: var(--card); border: 1px solid var(--edge); border-radius: .7rem; overflow: hidden; }
.question-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: .75rem 1.25rem; background: var(--org-nav, var(--tint)); color: var(--org-on-nav, var(--ink)); }
.question-top h2 { margin: 0; font-size: 1rem; font-weight: 750; letter-spacing: normal; }
.question-body { padding: 1.25rem; }
.question-text { font-size: 1.1rem; line-height: 1.75; }
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text img, .question-media img { display: block; max-width: 100%; max-height: 28rem; object-fit: contain; height: auto; margin-block: 1rem; }
.rich-text table { max-width: 100%; border-collapse: collapse; }
.rich-text td, .rich-text th { border: 1px solid var(--edge); padding: .35rem; }
.question-media { margin: 1rem 0; }
.question-media audio { width: 100%; max-width: 28rem; }
.answer-area { margin-top: 1.15rem; }
.answer { padding: 1rem 1.2rem; border-left: 3px solid var(--primary); background: var(--tint); border-radius: 0 .4rem .4rem 0; }
.answer .eyebrow { margin-bottom: .4rem; }
.answer-text { font-weight: 650; }
.answer-note { font-size: .9rem; color: var(--muted); margin-top: .7rem; }
.sender-result { margin: .8rem 0 0; padding-top: .65rem; border-top: 1px solid var(--edge); font-size: .95rem; font-weight: 650; color: var(--muted); }
.sender-result[data-result="correct"] { color: var(--good); }
.sender-result[data-result="incorrect"] { color: var(--bad); }
.mark-controls { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; padding-top: 1rem; }
.mark-controls > span { color: var(--muted); font-size: .9rem; margin-right: .25rem; }
.mark-button { padding: .45rem .75rem; border: 1px solid var(--edge); border-radius: .45rem; background: var(--card); color: var(--ink); }
.mark-button[data-mark="correct"][aria-pressed="true"] { border-color: var(--good); background: var(--good-tint); color: var(--good); }
.mark-button[data-mark="incorrect"][aria-pressed="true"] { border-color: var(--bad); background: var(--bad-tint); color: var(--bad); }
.question-card[data-result="correct"], .search-result[data-result="correct"] { border-color: var(--good); }
.question-card[data-result="incorrect"], .search-result[data-result="incorrect"] { border-color: var(--bad); }
.question-result { font-weight: 650; }
.preview-gate { margin-top: 2rem; text-align: center; background: color-mix(in srgb, var(--primary) 8%, var(--card)); border-top: .3rem solid var(--primary); padding-block: 2rem; }
.preview-gate h2 { margin: .5rem 0; font-size: 1.8rem; }
.preview-gate p:not(.eyebrow) { max-width: 55ch; margin: .8rem auto 1.3rem; }
.preview-gate .actions { justify-content: center; }
.progress-note { font-size: .85rem; }
.search-results { display: grid; gap: 1rem; }
.search-scoreboard { margin-bottom: 1rem; }
.search-result { background: var(--card); border: 1px solid var(--edge); border-left: .35rem solid var(--primary); border-radius: .6rem; padding: 1.2rem; }
.search-result h3 { margin: 0 0 .65rem; font-size: .95rem; }
.search-result .answer { margin-top: .8rem; }
.search-result .reveal-button { margin-top: .8rem; }
mark { background: #f9dd72; color: #172335; padding-inline: .1em; }
.site-footer { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem; padding: 1.5rem; border-top: 1px solid var(--edge); font-size: .85rem; }
.site-footer a { color: var(--muted); }
dialog { max-width: min(32rem, calc(100vw - 2rem)); width: 100%; border: 1px solid var(--edge); border-radius: .7rem; padding: 1.5rem; background: var(--card); color: var(--ink); }
dialog::backdrop { background: rgb(0 0 0 / .6); }
dialog textarea { min-height: 8rem; }
dialog form { margin-top: 1rem; }
.notice { background: var(--tint); padding: 1rem; border-left: 3px solid var(--primary); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -5rem; left: 1rem; z-index: 100; background: var(--card); padding: .75rem; }
.skip-link:focus { top: 1rem; }
@media (max-width: 650px) {
  .site-header { flex-wrap: wrap; gap: .6rem 1rem; }
  .header-title { flex: 1; }
  .site-links { width: 100%; justify-content: space-between; }
  .auth-controls { font-size: .9rem; }
  .page-head { margin-top: 1.25rem; }
  .quiz-logo { max-width: 3.5rem; max-height: 3.5rem; }
  .metadata { grid-template-columns: 1fr; gap: .15rem; }
  .metadata dd { margin-bottom: .6rem; }
  .scoreboard { gap: .8rem; }
  .progress-count { width: 100%; margin-left: 0; }
  .question-top, .question-body { padding-inline: 1rem; }
  .play-actions { align-items: stretch; }
  .play-actions .button { flex: 1 1 auto; }
}
.print-quiz { display: none; }
@page { size: A4 portrait; margin: 6mm; }
.rich-text ruby { white-space: nowrap; overflow-wrap: normal; word-break: normal; }

@media print {
  .sender-result, #shared-result-note { display: none !important; }
  :root { color-scheme: light !important; --bg: #fff !important; --card: #fff !important; --ink: #000 !important; --muted: #444 !important; --edge: #ccc !important; --tint: #f5f5f5 !important; }
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .back-link, .play-actions, .reveal-button, .mark-controls, .skip-link, #show-all-note, .preview-gate .actions, .progress-note, .question-result, .scoreboard, .progress-count, dialog { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  h1 { font-size: 24pt; }
  .question-card { break-inside: avoid; }
  .question-text { font-size: 11pt; }
  .answer { color: #000; }
  .play-toolbar { border: 0; padding: 0; }
  body.print-ready > :not(.print-quiz) { display: none !important; }
  .print-ready .print-quiz { display: block; columns: 1; column-gap: 4mm; column-fill: auto; font: 11pt/1.08 Tahoma, Arial, sans-serif; color: #000; }
  .print-details, .print-question { break-inside: avoid; margin: 0; padding: 0; }
  .print-title, .print-round { font-size: 11pt; line-height: inherit; letter-spacing: normal; text-wrap: wrap; }
  .print-title { margin: 0 0 3pt; }
  .print-round { margin: 7pt 0 2pt; break-after: avoid; }
  .print-line { margin: 0; }
  .print-line .rich-text, .print-line .rich-text p, .print-line .rich-text div { display: inline; }
  .print-line .rich-text p::after, .print-line .rich-text div::after { content: ' '; }
  .print-quiz p, .print-quiz figure, .print-quiz blockquote { margin: 0; }
  .print-quiz ul, .print-quiz ol { margin: 0; padding-left: 1.2em; }
  .print-quiz img { display: block; max-width: 100%; max-height: 55mm; height: auto; object-fit: contain; margin: 1pt 0; }
  .print-quiz .question-media { margin: 1pt 0; }
  .print-quiz table { width: 100%; table-layout: fixed; }
  .print-quiz td, .print-quiz th { padding: 1pt; }
  .print-quiz a { color: #000; }
}
