:root {
  --vo-ink: #292524;
  --vo-muted: #6b625b;
  --vo-paper: #fffdf9;
  --vo-rule: #ddd5c9;
  --vo-accent: #8b3a24;
  --vo-green: #0f766e;
  --vo-violet: #6d28d9;
}

* { box-sizing: border-box; }

body {
  background: #f6f2ea;
  color: var(--vo-ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

[hidden] { display: none !important; }

.vo-wrap { max-width: 780px; margin: 0 auto; padding: 1.4rem 1rem 5rem; }
.vo-hero { padding: 1.2rem 0 1.35rem; border-bottom: 2px solid var(--vo-accent); }
.vo-eyebrow, .vo-kicker { margin: 0 0 .35rem; color: var(--vo-accent); font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.vo-hero h1 { margin: 0; font-size: clamp(1.75rem, 5vw, 2.35rem); line-height: 1.2; }
.vo-lead { margin: .65rem 0; color: #514a44; line-height: 1.7; }
.vo-boundary { margin-top: .8rem; padding: .75rem .9rem; border-left: 4px solid #b45309; border-radius: 0 8px 8px 0; background: #fffbeb; color: #713f12; font-size: .88rem; line-height: 1.65; }
.vo-loading, .vo-error { margin: 1.2rem 0; padding: .8rem 1rem; border-radius: 8px; }
.vo-loading { background: #fff; border: 1px solid var(--vo-rule); }
.vo-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

.vo-card { margin-top: 1.25rem; padding: 1.1rem; border: 1px solid var(--vo-rule); border-radius: 12px; background: var(--vo-paper); box-shadow: 0 2px 10px rgba(73, 53, 36, .05); }
.vo-card h2, .vo-review h2 { margin: 0 0 .55rem; line-height: 1.3; }
.vo-rules, .vo-questions { padding-left: 1.3rem; line-height: 1.75; }
.vo-rules li, .vo-questions li { margin: .35rem 0; }
.vo-resume-note { margin: .8rem 0; padding: .65rem .8rem; background: #eff6ff; border-left: 4px solid #2563eb; border-radius: 0 7px 7px 0; color: #1e3a8a; }
.vo-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
.vo-actions--between { justify-content: space-between; align-items: center; }
.vo-btn {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: .65rem .9rem; border: 1px solid #b8aea2; border-radius: 9px;
  background: #fff; color: #3f3a36; font: inherit; font-weight: 750; cursor: pointer;
  text-decoration: none;
}
.vo-btn:hover { border-color: var(--vo-accent); color: var(--vo-accent); }
.vo-btn:focus-visible { outline: 3px solid rgba(139, 58, 36, .3); outline-offset: 2px; }
.vo-btn--primary { border-color: var(--vo-accent); background: var(--vo-accent); color: #fff; }
.vo-btn--primary:hover { color: #fff; background: #6f2e1d; }
.vo-btn--quiet { color: #6b625b; }
.vo-btn--link { border-color: var(--vo-green); color: var(--vo-green); }

.vo-station-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 1px solid var(--vo-rule); padding-bottom: .8rem; }
.vo-domain { margin: 0; color: var(--vo-muted); font-size: .88rem; }
.vo-timer { min-width: 5ch; padding: .45rem .65rem; border: 2px solid var(--vo-accent); border-radius: 9px; color: var(--vo-accent); background: #fff7ed; font: 800 1.45rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.vo-timer.is-expired { color: #991b1b; border-color: #dc2626; background: #fef2f2; }
.vo-warning { margin: .85rem 0; padding: .7rem .8rem; background: #f5f3ff; border-left: 4px solid var(--vo-violet); border-radius: 0 7px 7px 0; color: #5b21b6; font-size: .88rem; line-height: 1.65; }
.vo-scenario { margin: 1rem 0 .6rem; padding: .8rem .9rem; border-radius: 8px; background: #fff8e7; font-weight: 650; line-height: 1.65; }

.vo-review { margin-top: 1.5rem; }
.vo-review-head { padding: 1rem 0; border-bottom: 2px solid var(--vo-accent); }
.vo-review-head p { color: var(--vo-muted); line-height: 1.65; }
.vo-rating-summary { margin: 1rem 0; padding: .7rem .85rem; border-radius: 8px; background: #ecfdf5; color: #065f46; font-weight: 700; }
.vo-review-card { margin: 1rem 0; padding: 1rem; border: 1px solid var(--vo-rule); border-left: 5px solid var(--vo-accent); border-radius: 10px; background: #fff; scroll-margin-top: 5rem; }
.vo-review-card h3 { margin: 0 0 .35rem; font-size: 1.15rem; }
.vo-review-meta { margin: 0 0 .8rem; color: var(--vo-muted); font-size: .82rem; }
.vo-section { margin-top: .9rem; padding-top: .75rem; border-top: 1px solid #eee8df; }
.vo-section h4 { margin: 0 0 .45rem; color: #4b423c; font-size: .92rem; }
.vo-section p, .vo-section li { line-height: 1.7; }
.vo-section ul, .vo-section ol { margin: .35rem 0 0; padding-left: 1.25rem; }
.vo-followup { margin: .65rem 0; padding: .7rem .8rem; border-radius: 8px; background: #f8fafc; }
.vo-followup strong { display: block; margin-bottom: .3rem; }
.vo-trap { margin-top: .7rem; padding: .65rem .75rem; border-left: 4px solid #dc2626; border-radius: 0 7px 7px 0; background: #fef2f2; color: #881337; }
.vo-limit { margin-top: .7rem; padding: .65rem .75rem; border-left: 4px solid #7c3aed; border-radius: 0 7px 7px 0; background: #f5f3ff; color: #5b21b6; }
.vo-source-cue { background: #fff7ed; }
.vo-links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.vo-links a { padding: .28rem .55rem; border-radius: 999px; background: #eff6ff; color: #1d4ed8; text-decoration: none; font-size: .8rem; }
.vo-links a:hover { text-decoration: underline; }
.vo-rating-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; margin-top: .6rem; }
.vo-rating-row button { min-height: 44px; padding: .45rem .3rem; border: 1px solid #c8beb2; border-radius: 8px; background: #fff; font: inherit; font-size: .78rem; cursor: pointer; }
.vo-rating-row button[aria-pressed="true"] { border-color: var(--vo-green); background: #ecfdf5; color: #065f46; font-weight: 800; }
.vo-review-actions { padding-top: .6rem; }

@media (max-width: 640px) {
  .vo-wrap { padding: .8rem .75rem 4rem; }
  .vo-card, .vo-review-card { padding: .85rem; }
  .vo-station-head { align-items: center; }
  .vo-actions--between { flex-direction: column-reverse; align-items: stretch; }
  .vo-actions--between .vo-btn { width: 100%; }
  .vo-rating-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print {
  .site-header, .no-print, #oral-intro, #oral-stage, #oral-submit, .vo-review-actions, .vo-rating-row { display: none !important; }
  body { background: #fff; }
  .vo-wrap { max-width: none; padding: 0; }
  .vo-review-card { break-inside: avoid; box-shadow: none; }
}