.rs-app { --rs-ink: #273e35; --rs-muted: #53665b; --rs-green: #265c47; --rs-line: #b7c2b6; box-sizing: border-box; width: 100%; max-width: 62rem; min-width: 0; margin-inline: auto; padding: clamp(.75rem, 3vw, 1.75rem); border-radius: 1rem; background: #f5f2e9; color: var(--rs-ink); font: 1rem/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; color-scheme: light; overflow-wrap: break-word; }
.rs-app *, .rs-app *::before, .rs-app *::after { box-sizing: border-box; }
.rs-app [hidden] { display: none !important; }
.rs-app h2, .rs-app h3, .rs-app p { margin: 0; }
.rs-intro { display: grid; gap: .6rem; margin-bottom: 1.25rem; }
.rs-intro h2 { font-size: clamp(1.4rem, 4vw, 2rem); line-height: 1.25; }
.rs-intro p { max-width: 62ch; color: var(--rs-muted); }
.rs-controls { min-width: 0; padding: .9rem; margin: 0; border: 1px solid var(--rs-line); border-radius: .75rem; background: #fffdf8; }
.rs-controls > legend, .rs-rule-options > legend { padding-inline: .3rem; font-weight: 650; }
.rs-rule-options { min-width: 0; margin: 0 0 1rem; padding: 0; border: 0; }
.rs-rule-choices { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.rs-rule-choices label { display: flex; align-items: center; gap: .5rem; min-height: 3rem; padding: .55rem .7rem; border: 1px solid var(--rs-line); border-radius: .5rem; background: #fff; cursor: pointer; }
.rs-rule-choices input { flex: none; width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--rs-green); }
.rs-control-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: end; }
.rs-field { display: grid; gap: .35rem; min-width: 0; }
.rs-field label { font-weight: 600; }
.rs-app select, .rs-app button { width: 100%; max-width: 100%; min-height: 3rem; padding: .65rem .75rem; border: 1px solid #6e8274; border-radius: .55rem; color: var(--rs-ink); background: #fff; font: inherit; line-height: 1.3; }
.rs-app .rs-button { border: 2px solid var(--rs-green); background: var(--rs-green); color: #fff; font-weight: 650; cursor: pointer; }
.rs-app .rs-secondary { background: #fffdf8; color: var(--rs-green); }
.rs-app :is(button, select, input, summary):focus-visible { outline: 3px solid #96531e; outline-offset: 3px; }
.rs-app :disabled { cursor: default; }
.rs-app .rs-print-note { margin-top: 1rem; font-size: .9rem; font-weight: 600; }
.rs-app .rs-help { margin-top: .35rem; font-size: .875rem; color: var(--rs-muted); }
.rs-app .rs-status { padding-block: .8rem; font-size: .9rem; color: var(--rs-muted); }
.rs-app .rs-error, .rs-app .rs-notice { margin-block: .8rem; padding: .85rem; border: 1px solid #946d40; border-left-width: 4px; color: #663e1c; background: #fff7e8; }
.rs-app summary { min-height: 3rem; padding-block: .7rem; cursor: pointer; font-weight: 600; }
.rs-rule-reminder { margin-bottom: .75rem; }
.rs-rule-reminder ul { margin: .3rem 0 .5rem; padding-left: 1.5rem; }
.rs-rule-reminder p { font-size: .875rem; color: var(--rs-muted); }
.rs-paper { width: 100%; max-width: 210mm; margin-inline: auto; padding: clamp(.8rem, 3vw, 1.75rem); border: 1px solid var(--rs-line); border-radius: .25rem; background: #fff; color: #17251c; }
.rs-paper-heading { padding-bottom: .8rem; border-bottom: 1px solid #a7b4aa; }
.rs-app .rs-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .8rem; color: var(--rs-muted); font-size: .75rem; }
.rs-paper h3 { margin-top: .8rem; font-size: clamp(1.25rem, 4vw, 1.8rem); line-height: 1.25; }
.rs-app .rs-topic { margin-top: .5rem; font-size: .9rem; }
.rs-app .rs-instructions { margin-top: 1rem; font-size: .95rem; }
.rs-app .rs-name-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; font-size: .875rem; }
.rs-name-line span { flex: 1; min-width: 3rem; border-bottom: 1px solid #526456; }
.rs-task-list { margin: .5rem 0 0; padding-left: 1.5rem; }
.rs-task-list li { padding: .7rem 0 .7rem .3rem; border-bottom: 1px solid #d9dfd9; break-inside: avoid; }
.rs-task-list li::marker { font-size: .8rem; color: var(--rs-muted); }
.rs-task-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem .8rem; }
.rs-word { font-size: 1.4rem; line-height: 1.55; white-space: nowrap; }
.rs-letter-pair { font-size: .9rem; line-height: 1.5; white-space: nowrap; }
.rs-blank { display: inline-block; min-width: 1.4em; text-align: center; }
.rs-app .rs-paper-footer { margin-top: 1.25rem; font-size: .8rem; color: var(--rs-muted); }
.rs-key { margin-top: 1rem; }
.rs-key > summary span { font-size: .875rem; font-weight: 400; }
.rs-key-pages { display: grid; gap: 1rem; }
.rs-app .rs-key-intro { margin-top: 1rem; font-size: .875rem; }
.rs-answer-list { margin: .8rem 0 0; padding-left: 1.5rem; }
.rs-answer-list li { padding: .8rem 0 .8rem .25rem; border-bottom: 1px solid #d9dfd9; break-inside: avoid; }
.rs-app .rs-completed { font-size: 1.2rem; }
.rs-app .rs-explanation { margin-top: .35rem; font-size: .95rem; }
.rs-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 38rem) { .rs-control-grid { grid-template-columns: minmax(0, 1fr); } .rs-word { font-size: 1.2rem; } .rs-key > summary span { display: block; } }
@media (forced-colors: active) { .rs-app :focus-visible { outline-color: Highlight; } .rs-app .rs-button, .rs-paper, .rs-controls, .rs-rule-choices label { border-color: CanvasText; } }
@page russian-spelling { size: A4 portrait; margin: 14mm; }
@media print {
  /* CSS-only isolation also supports the SSR first variant without JavaScript. */
  body:has([data-rs-app]) :not([data-rs-app]):not([data-rs-app] *):not(:has([data-rs-app])), [data-rs-print-hidden] { display: none !important; }
  body:has([data-rs-app]), body:has([data-rs-app]) :has([data-rs-app]), [data-rs-print-ancestor] { display: block !important; width: auto !important; max-width: none !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; transform: none !important; background: #fff !important; }
  .rs-app { page: russian-spelling; width: auto; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: #fff; color: #000; font-family: Arial, sans-serif; font-size: 12pt; }
  .rs-app :is(.rs-intro, .rs-controls, .rs-status, .rs-error, .rs-notice, .rs-rule-reminder, noscript), .rs-key > summary { display: none !important; }
  .rs-preview, .rs-key, .rs-key-pages { display: block; margin: 0; padding: 0; border: 0; }
  .rs-app[data-rs-print-scope="tasks"] .rs-key { display: none !important; }
  .rs-app[data-rs-print-scope="answers"] .rs-preview { display: none !important; }
  .rs-app[data-rs-print-scope="both"] .rs-key, .rs-key-paper + .rs-key-paper { break-before: page; page-break-before: always; }
  .rs-paper { page: russian-spelling; width: auto; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: #fff; color: #000; }
  .rs-paper-heading { padding-bottom: 4mm; border-color: #000; }
  .rs-app .rs-meta { font-size: 9pt; color: #000; }
  .rs-paper h3 { margin-top: 4mm; font-size: 21pt; }
  .rs-app .rs-topic { margin-top: 2mm; font-size: 11pt; }
  .rs-app .rs-instructions { margin-top: 4mm; font-size: 12pt; line-height: 1.4; }
  .rs-app .rs-name-line { margin: 5mm 0 3mm; font-size: 10pt; }
  .rs-name-line span { border-color: #000; }
  .rs-task-list { margin: 0; padding-left: 6mm; }
  .rs-task-list li { min-height: 13mm; padding: 2mm 0 2mm 1mm; border-color: #b5b5b5; }
  .rs-task-list li::marker { font-size: 10pt; color: #000; }
  .rs-task-row { flex-wrap: nowrap; gap: 6mm; }
  .rs-word { font-size: 18pt; line-height: 1.3; }
  .rs-letter-pair { font-size: 12pt; color: #000; }
  .rs-app .rs-key-intro { margin-top: 4mm; font-size: 10pt; }
  .rs-answer-list { padding-left: 6mm; margin-top: 4mm; }
  .rs-answer-list li { padding: 3mm 0 4mm 1mm; border-color: #b5b5b5; }
  .rs-app .rs-completed { font-size: 15pt; }
  .rs-app .rs-explanation { margin-top: 2mm; font-size: 11pt; line-height: 1.45; }
  .rs-app .rs-paper-footer { margin-top: 5mm; font-size: 9pt; color: #000; }
}