.vex-reading { margin-block: 32px; padding: clamp(20px, 3vw, 30px); background: var(--surface-deep); border: 1px solid var(--outline-soft); border-radius: 8px; min-width: 0; }
.vex-reading h2 { margin-block: 0 18px; font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1.3; }
.vex-reading h3 { margin-block: 28px 16px; font-size: 1.35rem; line-height: 1.4; }
.vex-reading p { color: var(--text-soft); line-height: 1.8; }
.vex-reading .vex-status-table { min-width: 500px; }
.vex-reading .vex-status-table th { width: 34%; }
.vex-reading code { overflow-wrap: anywhere; color: var(--accent-strong); }
.vex-reading .vex-exercise-note, .vex-reading .vex-source { font-size: .95rem; }
.vex-reading .vex-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-block: 24px; }
.vex-reading .vex-controls label, .vex-reading output { grid-column: 1 / -1; line-height: 1.6; }
.vex-reading select { width: 100%; min-width: 0; box-sizing: border-box; min-height: 46px; padding: 10px 12px; font: inherit; background: var(--surface-raised); color: var(--text-strong); border: 1px solid var(--outline-soft); border-radius: 6px; }
.vex-reading button { min-height: 46px; padding: 10px 16px; font: inherit; font-weight: 700; color: var(--surface-deep); background: var(--accent-strong); border: 1px solid var(--accent-strong); border-radius: 6px; cursor: pointer; }
.vex-reading .vex-cases { display: grid; gap: 12px; }
.vex-reading .vex-case { min-width: 0; padding: 8px 20px; border: 1px solid var(--outline-soft); border-radius: 7px; background: var(--surface-raised); }
.vex-reading .vex-case > summary { padding-block: 12px; cursor: pointer; }
.vex-reading .vex-case > summary span { min-width: 0; }
.vex-reading .vex-case strong { display: block; color: var(--text-strong); line-height: 1.5; }
.vex-reading .vex-case code { display: inline-block; margin-top: 6px; font-size: .85rem; font-weight: 400; }
.vex-reading .vex-case[open] > summary { border-bottom: 1px solid var(--outline-soft); }
.vex-reading .vex-case h4 { margin-block: 20px 8px; line-height: 1.5; }
.vex-reading .vex-case p { margin-block: 16px 20px; }
.vex-reading :is(summary, select, button, a, .reference-table-scroll):focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 4px; }
.vex-reading [hidden] { display: none; }
@media (max-width: 600px) { .vex-reading .vex-controls { grid-template-columns: minmax(0, 1fr); } .vex-reading .vex-case { padding-inline: 16px; } }