/* Direction studies only. No palette is presented as Winning+'s approved brand. */
body[data-direction="a"] {
  --page: #efedf7;
  --surface: #fbfaff;
  --surface-soft: #f0ebff;
  --surface-muted: #e6e0f5;
  --ink: #242136;
  --secondary: #625c75;
  --border: #d6cfee;
  --border-strong: #9a87c7;
  --focus: #30205d;
  --accent: #6040df;
  --accent-dark: #4729b8;
  --lime: #e0f7a7;
  --radius: 20px;
}
body[data-direction="a"] .wordmark > span { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 3px; padding: 0; border-radius: 50%; background: var(--lime); color: var(--accent-dark); }
body[data-direction="a"] .home-intro { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding-block: var(--space-2) var(--space-4); }
body[data-direction="a"] .home-intro h1 { order: 0; font-weight: 750; font-size: 36px; line-height: 1.35; margin: 0; text-wrap: pretty; }
body[data-direction="a"] .home-intro .description { order: 1; margin-top: var(--space-4); }
body[data-direction="a"] .listen-icon { order: 2; width: 160px; height: 160px; padding: 38px; align-self: center; margin-block: var(--space-12) var(--space-4); border-radius: 50%; background: var(--lime); stroke: var(--accent-dark); stroke-width: 2.5; box-shadow: 0 0 0 14px #efebfc, 0 0 0 15px #ddd4f6; }
body[data-direction="a"] .button-primary { background: var(--accent); border-color: var(--accent); }
body[data-direction="a"] .button-primary:hover { background: var(--accent-dark); }
body[data-direction="a"] .button { border-radius: 28px; }
body[data-direction="a"] .button-outline { background: white; border-color: var(--accent); color: var(--accent-dark); }
body[data-direction="a"] .progress-track li { border-radius: 4px; }
body[data-direction="a"] .progress-track li.current { background: var(--accent); }
body[data-direction="a"] .progress-track li.complete { background: #b7a7e8; }
body[data-direction="a"] .audio-comparison { gap: var(--space-3); }
body[data-direction="a"] .audio-comparison > .audio-choice { background: var(--surface-soft); border-radius: var(--radius); padding: var(--space-4) var(--space-2); }
body[data-direction="a"] .audio-comparison .audio-control { padding-bottom: var(--space-2); }
body[data-direction="a"] .play-placeholder { background: white; border-color: #cec1f4; color: #8e78c3; }
body[data-direction="a"] .answer-option { border-radius: 16px; background: white; }
body[data-direction="a"] .answer-option:hover { background: var(--surface-soft); border-color: var(--accent); }
body[data-direction="a"] .results-card { background: var(--lime); border: 0; padding: var(--space-6) var(--space-5) var(--space-3); }
body[data-direction="a"] .result-score-block .eyebrow { color: #494d37; font-weight: 600; }
body[data-direction="a"] .score strong { color: var(--accent-dark); }
body[data-direction="a"] .score-caption, body[data-direction="a"] .results-card .supporting, body[data-direction="a"] .results-card .score-details { color: #4c513c; }
body[data-direction="a"] .share-reward { border-color: #bdcf94; }
body[data-direction="a"] .reward-copy { font-weight: 500; }
body[data-direction="a"] .takeaway h2 { color: var(--accent-dark); }
body[data-direction="a"] .reveal-status strong, body[data-direction="a"] .station-answer { color: var(--accent-dark); }
body[data-direction="b"] {
  --page: #ede8de;
  --surface: #fffaf0;
  --surface-soft: #f2ecde;
  --surface-muted: #e9e2d3;
  --ink: #203e34;
  --secondary: #626458;
  --border: #d2cdbc;
  --border-strong: #8b9b88;
  --focus: #173e35;
  --accent: #244d40;
  --accent-dark: #173e35;
  --clay: #a84b31;
  --radius: 3px;
  --heading-font: "Songti TC", "Noto Serif TC", "PMingLiU", Georgia, serif;
}
body[data-direction="b"] .site-header { border-bottom: 1px solid var(--border); margin-inline: var(--space-6); padding-inline: 0; }
body[data-direction="b"] .wordmark { font-family: Georgia, serif; letter-spacing: -.6px; }
body[data-direction="b"] .wordmark > span { color: var(--clay); }
body[data-direction="b"] h1, body[data-direction="b"] .takeaway h2 { font-family: var(--heading-font); }
body[data-direction="b"] .home-intro { text-align: left; }
body[data-direction="b"] .home-intro h1 { font-size: 36px; line-height: 1.5; font-weight: 600; margin: 0; text-wrap: pretty; }
body[data-direction="b"] .listen-icon { width: 96px; height: 96px; padding: var(--space-4); border: 1px solid var(--border); stroke: var(--clay); margin-bottom: var(--space-6); }
body[data-direction="b"] .home-intro .description { margin-top: var(--space-6); }
body[data-direction="b"] .button { font-weight: 500; }
body[data-direction="b"] .button-primary { background: var(--accent); border-color: var(--accent); }
body[data-direction="b"] .button-primary:hover { background: var(--accent-dark); }
body[data-direction="b"] .button-outline { border-color: var(--accent); background: transparent; }
body[data-direction="b"] .progress-track li.current { background: var(--clay); }
body[data-direction="b"] .audio-comparison > .audio-choice + .audio-choice { border-left: 1px solid var(--border); }
body[data-direction="b"] .audio-label { font-family: var(--heading-font); font-size: var(--text-lg); }
body[data-direction="b"] .play-placeholder { background: transparent; border-color: var(--border-strong); color: #738873; }
body[data-direction="b"] .answer-option { background: transparent; border-color: var(--border-strong); }
body[data-direction="b"] .answer-option:hover { background: var(--surface-soft); border-color: var(--accent); }
body[data-direction="b"] .results-card { border-top: 4px solid var(--accent); border-radius: 0; background: #fffef8; }
body[data-direction="b"] .score strong { font-family: Georgia, serif; font-weight: 400; }
body[data-direction="b"] .result-score-block .eyebrow { font-family: var(--heading-font); color: var(--clay); font-size: var(--text-base); }
body[data-direction="b"] .takeaway h2 { font-size: 21px; }
@media (max-height: 700px) {
  body[data-direction="a"] .listen-icon { width: 112px; height: 112px; padding: 24px; margin-block: var(--space-6) var(--space-3); }
  body[data-direction="a"] .home-intro h1, body[data-direction="b"] .home-intro h1 { font-size: 32px; }
  body[data-direction="b"] .listen-icon { width: 72px; height: 72px; }
}