:root { --navy:#071a43; --orange:#c93600; --orange-dark:#962800; --blue:#1d4ed8; --line:#cbd5e1; --muted:#5a6780; --white:#fff; --focus:#2563eb; }
* { box-sizing: border-box; }
body { margin:0; background:var(--white); color:var(--navy); font-family:Arial,Helvetica,sans-serif; line-height:1.45; }
button, select { font:inherit; }
button, select, a { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:4px solid var(--focus); outline-offset:3px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:-5rem; left:1rem; z-index:100; padding:.8rem 1rem; background:var(--navy); color:#fff; }
.skip-link:focus { top:1rem; }
.coach-header { min-height:88px; display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:2.5rem; padding:1rem clamp(20px,4vw,56px); border-bottom:1px solid var(--line); }
.coach-brand { display:flex; align-items:center; gap:.55rem; color:var(--navy); text-decoration:none; font-size:1.45rem; font-weight:800; letter-spacing:-.04em; }
.coach-brand > span:last-child > span { color:var(--orange); }
.coach-ball { width:30px; height:30px; flex:0 0 30px; border-radius:50%; background:var(--orange); }
.coach-header > strong { font-size:1.35rem; }
.coach-settings { display:flex; justify-content:flex-end; align-items:center; gap:.6rem; }
.coach-settings button, .coach-settings select { min-height:48px; padding:.6rem .8rem; border:1px solid #8e9bb0; background:#fff; color:var(--navy); font-weight:700; border-radius:4px; }
.coach-settings button[aria-pressed="true"] { border-color:var(--blue); box-shadow:inset 0 -3px 0 var(--blue); }
.coach-settings a { margin-left:.5rem; color:var(--blue); font-weight:700; text-underline-offset:3px; }
.coach-main { max-width:1380px; margin:0 auto; padding:clamp(2rem,5vw,5rem) clamp(20px,4vw,56px) 3rem; }
.instruction { display:grid; grid-template-columns:1.2fr .8fr; gap:3rem; min-height:430px; align-items:center; }
.step-count { margin:0 0 1.2rem; font-size:1.35rem; font-weight:800; }
.instruction h1 { margin:0; font-size:clamp(3.2rem,6.4vw,6.5rem); line-height:.95; letter-spacing:-.065em; }
.step-instruction { max-width:760px; margin:1.7rem 0 0; font-size:clamp(1.7rem,3.4vw,3.3rem); line-height:1.2; letter-spacing:-.035em; }
.instruction-visual { height:430px; margin:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.instruction-visual img { max-height:100%; max-width:100%; object-fit:contain; mix-blend-mode:multiply; }
.coach-actions { display:grid; grid-template-columns:1fr 1.35fr 1fr; gap:1rem; margin-top:2rem; }
.coach-actions button { min-height:88px; display:flex; align-items:center; justify-content:center; gap:.8rem; border:3px solid var(--navy); border-radius:6px; font-size:clamp(1.2rem,2vw,1.65rem); font-weight:800; cursor:pointer; }
.coach-actions svg { width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.coach-actions .secondary { background:#fff; color:var(--navy); }
.coach-actions .speak, .coach-actions .primary { background:var(--orange); border-color:var(--orange); color:#fff; }
.coach-actions button:hover:not(:disabled) { filter:brightness(.92); }
.coach-actions button:disabled { opacity:.45; cursor:not-allowed; }
.seated-toggle { width:max-content; display:flex; align-items:center; gap:.8rem; margin:1.8rem 0; font-size:1.1rem; font-weight:800; cursor:pointer; }
.seated-toggle input { position:absolute; opacity:0; }
.toggle-track { width:56px; height:30px; border:2px solid var(--navy); border-radius:16px; position:relative; background:#fff; }
.toggle-track::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--navy); transition:transform .2s ease; }
.seated-toggle input:checked + .toggle-track::after { transform:translateX(26px); background:var(--orange); }
.seated-toggle input:focus-visible + .toggle-track { outline:4px solid var(--focus); outline-offset:3px; }
.sequence { margin-top:1.5rem; }
.sequence ol { display:grid; grid-template-columns:repeat(6,1fr); gap:.4rem; list-style:none; padding:0; margin:0; position:relative; }
.sequence ol::before { content:""; position:absolute; left:8%; right:8%; top:26px; height:2px; background:#9aa7bb; z-index:-1; }
.sequence button { width:100%; border:0; background:transparent; color:var(--muted); cursor:pointer; font-weight:700; }
.sequence button span { width:54px; height:54px; display:grid; place-items:center; margin:0 auto .55rem; border:2px solid #8b97a8; border-radius:50%; background:#fff; font-size:1.3rem; }
.sequence button[aria-current="step"] { color:var(--navy); }
.sequence button[aria-current="step"] span { border:5px double var(--blue); background:var(--navy); color:#fff; }
.sequence button[data-complete="true"] span { background:var(--navy); color:#fff; border-color:var(--navy); }
.privacy-note { margin:2.8rem 0 0; padding-top:1rem; border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; }
body.high-contrast { --navy:#000; --orange:#b83200; --blue:#0037ff; --line:#000; --muted:#111; }
body.high-contrast .instruction-visual img { filter:contrast(1.25); }

@media (max-width:980px) {
  .coach-header { grid-template-columns:1fr auto; gap:1rem; }
  .coach-header > strong { grid-column:1/-1; grid-row:2; }
  .coach-settings { grid-column:1/-1; grid-row:3; justify-content:flex-start; flex-wrap:wrap; }
  .coach-settings .coach-back-link { flex-basis:100%; margin:0; }
  .coach-settings .coach-atrak-link { margin:0; }
  .instruction { grid-template-columns:1fr 300px; min-height:360px; }
  .instruction-visual { height:340px; }
}
@media (max-width:700px) {
  .coach-header { display:flex; flex-wrap:wrap; }
  .coach-header > strong { order:3; flex-basis:100%; }
  .coach-settings { order:4; }
  .instruction { grid-template-columns:1fr; gap:1rem; min-height:0; }
  .instruction-visual { height:300px; }
  .coach-actions { grid-template-columns:1fr; }
  .coach-actions button { min-height:64px; }
  .sequence ol { overflow-x:auto; grid-template-columns:repeat(6,minmax(72px,1fr)); padding-bottom:.6rem; }
  .sequence ol::before { display:none; }
}
@media (prefers-reduced-motion:reduce) { * { transition-duration:.001ms !important; } }
