/* Fixed-form TOEFL composition. Text surfaces share the page's dark token. */
.tf-run { max-width: 70rem; margin: auto; padding: 1.2rem; color: var(--text-primary, #e2e8f0); background: var(--reading-surface, #01040e); line-height: 1.7; overflow-wrap: anywhere; }
.tf-run h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: 1rem; }
.tf-run h2 { font-size: 1.3rem; font-weight: 600; margin: 1rem 0; }
.tf-run h3 { font-weight: 600; margin: .8rem 0; }
.tf-run p, .tf-run ul { margin: .8rem 0; }
.tf-run ul { list-style: disc; padding-inline-start: 1.4rem; }
.tf-run-toolbar, .tf-run-nav, .tf-run-chunks { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1rem 0; }
.tf-run [data-clock] { font-variant-numeric: tabular-nums; font-size: 1.3rem; }
.tf-run button, .tf-run input, .tf-run textarea { background: var(--reading-surface, #01040e); color: inherit; border: 1px solid #64748b; border-radius: .35rem; padding: .5rem .7rem; }
.tf-run button { min-height: 44px; cursor: pointer; }
.tf-run button:disabled { opacity: .55; cursor: default; }
.tf-run button[aria-current] { border: 2px solid #38bdf8; font-weight: bold; }
.tf-run :focus-visible { outline: 3px solid #38bdf8; outline-offset: 3px; }
.tf-run-source { white-space: pre-wrap; max-width: 75ch; line-height: 2; }
.tf-run-gap { display: inline-flex; white-space: nowrap; align-items: baseline; }
.tf-run-gap input { padding: .1rem; min-width: 2ch; border-radius: 0; border-width: 0 0 2px; }
.tf-run-option { display: flex; align-items: baseline; gap: .6rem; padding: .45rem 0; }
.tf-run fieldset, .tf-run details { border: 1px solid #64748b; padding: 1rem; margin: 1rem 0; }
.tf-run legend { font-weight: 600; padding-inline: .3rem; }
.tf-run textarea { display: block; width: 100%; min-height: 20rem; resize: vertical; font: inherit; }
.tf-run summary { cursor: pointer; }
.tf-run a { color: #7dd3fc; text-decoration: underline; }
.tf-run [hidden] { display: none !important; }
html[data-theme="light"] .tf-run { color: #1e293b; }
html[data-theme="light"] .tf-run a { color: #075985; }
@media (max-width: 600px) { .tf-run { padding: .7rem; } .tf-run fieldset { padding: .6rem; } }

/* ▼▼ LIGHT THEME — GENERATED by scripts/build_light_theme.py from the rules above. Do not edit by hand: run the builder. Hand tuning goes in 36-theme-light.css. ▼▼ */
html[data-theme="light"] .tf-run{color:var(--text-primary, rgb(44 63 88));background:var(--reading-surface, rgb(252 252 253))}
html[data-theme="light"] .tf-run button,html[data-theme="light"] .tf-run input,html[data-theme="light"] .tf-run textarea{background:var(--reading-surface, rgb(252 252 253));border-color:rgb(116 132 155)}
html[data-theme="light"] .tf-run fieldset,html[data-theme="light"] .tf-run details{border-color:rgb(116 132 155)}
html[data-theme="light"] .tf-run a{color:rgb(0 90 133)}
/* ▲▲ LIGHT THEME END ▲▲ */