body { background: var(--bg); }
.bridge-page { max-width: 1440px; margin: 0 auto; min-height: calc(100dvh - 130px); padding: 36px clamp(18px,3vw,48px) 52px; }
.bridge-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.bridge-kicker { display:inline-block; color:var(--orange); font-size:13px; font-weight:700; letter-spacing:.09em; }
.bridge-heading h1,.bridge-summary h1 { font: 500 clamp(32px,3.4vw,48px)/1.24 var(--font-editorial); color:var(--green); margin:10px 0 12px; }
.bridge-heading p { margin:0; color:var(--body); line-height:1.7; font-size:15px; }
.bridge-counter { flex:none; width:112px; height:84px; border-radius:18px; background:var(--green); color:#fff8ec; display:grid; align-content:center; justify-items:center; }
.bridge-counter strong { font:500 30px/1.1 Georgia,serif; }.bridge-counter span { font-size:12px; margin-top:5px; }
.bridge-steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; margin-bottom:20px; }
.bridge-steps button { border:1px solid var(--line); border-radius:12px; background:var(--paper); text-align:left; color:var(--body); min-height:62px; padding:10px 14px; display:flex; align-items:center; gap:10px; cursor:pointer; }
.bridge-steps button:hover,.bridge-steps button:focus-visible { border-color:var(--green); }
.bridge-steps button[aria-current] { border-color:var(--green); background:#e9eee3; color:var(--green); }
.bridge-steps span { color:var(--orange); font:600 13px Georgia,serif; }.bridge-steps b { font-size:13px; line-height:1.35; font-weight:600; }.bridge-steps em { margin-left:auto; font-style:normal; color:var(--green); }
.bridge-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(310px,.85fr); gap:18px; align-items:stretch; }
.bridge-lab,.bridge-coach { border-radius:22px; border:1px solid var(--line); background:var(--paper); min-width:0; box-shadow:var(--shadow); }
.bridge-lab { display:flex; flex-direction:column; padding:26px; }
.lab-heading { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }.lab-heading span { color:var(--orange); font-size:12px; font-weight:700; letter-spacing:.06em; }.lab-heading h2 { font:500 clamp(24px,2.1vw,32px)/1.3 var(--font-editorial); margin:0 0 22px; color:var(--ink); }
.lab-scene { border-radius:16px; overflow:hidden; background:#edf0e7; border:1px solid #d9dfd4; }
.bridge-svg { width:100%; display:block; aspect-ratio:2/1; }
.bridge-svg .track { stroke:#8d9f8f; stroke-width:8; stroke-linecap:round; }.bridge-svg .axis { fill:none; stroke:#506d5d; stroke-width:4; stroke-linecap:round; }.bridge-svg .tick { stroke:#6b8171; stroke-width:3; }
.bridge-svg .guide { fill:none; stroke:#93a89c; stroke-width:2; stroke-dasharray:7 7; }.bridge-svg .target { fill:#fbfbf7; stroke:#a8b9ab; stroke-width:3; }.bridge-svg .target-text { fill:var(--green); font:600 26px var(--font-ui); }
.bridge-svg .axis-label,.bridge-svg .datum,.bridge-svg .measure-label,.bridge-svg .green-label,.bridge-svg .scene-overline,.bridge-svg .scene-note,.bridge-svg .scene-empty { font-family:var(--font-ui); fill:var(--ink); }
.bridge-svg .axis-label { font-size:18px; }.bridge-svg .datum { font-size:17px; font-weight:700; }.bridge-svg .scene-overline { font-size:19px; font-weight:600; }.bridge-svg .scene-note { font-size:16px; fill:var(--body); }.bridge-svg .scene-empty { font-size:19px; fill:var(--body); }
.bridge-svg .measure-arrow,.bridge-svg .force-right { stroke:var(--orange); stroke-width:6; fill:none; stroke-linecap:round; }.bridge-svg .back-arrow,.bridge-svg .force-left { stroke:var(--green); stroke-width:6; fill:none; stroke-linecap:round; }.bridge-svg .measure-label { fill:var(--orange); font-size:19px; font-weight:700; }.bridge-svg .green-label { fill:var(--green); font-size:19px; font-weight:700; }
.bridge-svg .graph-focus { fill:none; stroke:var(--orange); stroke-width:7; stroke-linecap:round; }.bridge-svg .graph-line { fill:none; stroke:#94aa9a; stroke-width:5; stroke-linecap:round; }.bridge-svg .graph-point { fill:#f5bc88; stroke:var(--green); stroke-width:2; }
.bridge-variants { display:flex; gap:9px; flex-wrap:wrap; margin-top:14px; }.bridge-variants button { min-height:44px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--green); padding:8px 15px; cursor:pointer; }.bridge-variants button[aria-pressed] { background:var(--green); border-color:var(--green); color:#fff; }
.lab-evidence { margin-top:auto; padding:18px 4px 2px; min-height:70px; }.lab-evidence p { color:var(--body); margin:0; line-height:1.65; }.evidence-line { display:flex; flex-wrap:wrap; gap:10px; }.evidence-line span { display:flex; gap:7px; align-items:baseline; border-radius:10px; background:#f0f1e9; padding:10px 13px; color:var(--body); font-size:13px; }.evidence-line b { color:var(--green); font-size:18px; white-space:nowrap; }
.bridge-coach { padding:26px; display:flex; flex-direction:column; }.coach-label { font-size:12px; letter-spacing:.1em; color:var(--orange); font-weight:700; }.coach-copy p { font-size:19px; line-height:1.65; margin:12px 0 22px; color:var(--ink); }
.bridge-main-button { width:100%; min-height:58px; background:var(--green); color:#fff; border:0; border-radius:12px; padding:12px 20px; display:flex; justify-content:space-between; align-items:center; font-size:17px; font-weight:700; cursor:pointer; }.bridge-main-button:hover { background:#173a30; }
.bridge-check { border-top:1px solid var(--line); padding-top:21px; }.bridge-check h3 { font-size:19px; line-height:1.5; margin:9px 0 16px; }.bridge-options { display:grid; gap:9px; }.bridge-options button { width:100%; min-height:48px; border:1px solid #d8ded4; border-radius:11px; background:#fafbf6; color:var(--ink); text-align:left; padding:10px 14px; line-height:1.4; cursor:pointer; }.bridge-options button:hover { border-color:var(--green); }.bridge-options button.is-correct { border-color:#3b7654; background:#e7f1e8; }.bridge-options button.is-wrong { border-color:#c37353; background:#fff0e8; }
.bridge-feedback { min-height:24px; color:var(--body); font-size:14px; line-height:1.65; margin-top:15px; }.bridge-feedback.correct { color:#276348; }.bridge-feedback.wrong { color:#8d4b32; }
.coach-footer { margin-top:auto; padding-top:22px; }.coach-footer p { margin:0 0 13px; color:var(--body); font-size:13px; line-height:1.6; }.coach-footer p a { color:var(--green); text-decoration:underline; margin-right:8px; }.coach-nav { display:flex; justify-content:space-between; gap:10px; padding-top:13px; border-top:1px solid var(--line); }.coach-nav button { min-height:48px; background:transparent; border:0; color:var(--green); font-weight:700; cursor:pointer; }.coach-nav button:disabled { color:#9ea9a0; cursor:default; }
.bridge-summary,.bridge-error { max-width:1020px; margin:30px auto; }.bridge-summary > p { color:var(--body); line-height:1.8; max-width:760px; }.summary-columns { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:30px; }.summary-columns > div { background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:25px; }.summary-columns h2 { margin:0 0 13px; font:500 24px var(--font-editorial); }.summary-columns p { min-height:85px; color:var(--body); font-size:14px; line-height:1.75; }.summary-links { display:flex; flex-direction:column; gap:12px; }.summary-links a { color:var(--green); min-height:44px; display:flex; align-items:center; border-top:1px solid var(--line); }.summary-links .bridge-primary-link { background:var(--green); color:#fff; padding:8px 15px; border-radius:10px; border:0; }.summary-actions { display:flex; flex-wrap:wrap; gap:22px; align-items:center; margin-top:26px; }.summary-actions button { min-height:48px; padding:10px 18px; border:1px solid var(--green); color:var(--green); background:transparent; border-radius:10px; cursor:pointer; }.summary-actions a { color:var(--green); }
.summary-review { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 20px; }.summary-review button { min-height:44px; border:1px solid #ccd8ca; border-radius:9px; background:#edf2eb; color:var(--green); padding:8px 12px; cursor:pointer; }
@media(max-width:950px) { .bridge-layout { grid-template-columns:1fr; }.bridge-svg { max-height:390px; }.bridge-coach { min-height:0; }.bridge-steps button { padding:10px; }.bridge-steps b { font-size:12px; } }
@media(min-width:951px) and (max-height:800px) { .bridge-page { padding-top:20px; }.bridge-heading { margin-bottom:12px; }.bridge-heading h1 { font-size:36px; margin:4px 0 5px; }.bridge-steps { margin-bottom:10px; }.bridge-steps button { min-height:50px; }.bridge-lab,.bridge-coach { padding:18px; }.lab-heading h2 { margin-bottom:9px; }.bridge-svg { aspect-ratio:2.6; }.lab-evidence { min-height:50px; padding-top:10px; }.coach-copy p { font-size:17px; margin-bottom:14px; } }
@media(min-width:700px) and (max-width:950px) and (max-height:800px) { .bridge-page { padding-top:17px; }.bridge-heading { margin-bottom:10px; }.bridge-heading h1 { font-size:34px; margin:4px 0 5px; }.bridge-steps { margin-bottom:9px; }.bridge-steps button { min-height:49px; }.bridge-layout { grid-template-columns:minmax(0,1.2fr) minmax(275px,.8fr); gap:12px; }.bridge-lab,.bridge-coach { padding:15px; }.lab-heading { display:block; }.lab-heading h2 { font-size:23px; margin:6px 0 12px; }.bridge-svg { aspect-ratio:1.75; }.bridge-svg .axis-label,.bridge-svg .datum { font-size:26px; }.bridge-svg .scene-overline,.bridge-svg .scene-empty,.bridge-svg .measure-label,.bridge-svg .green-label { font-size:28px; }.lab-evidence { min-height:55px; padding-top:10px; }.coach-copy p { font-size:16px; margin:9px 0 15px; }.bridge-check h3 { font-size:16px; }.bridge-options button { font-size:13px; min-height:44px; } }
@media(max-width:600px) { .bridge-page { padding:12px 14px 30px; }.bridge-heading { align-items:start; margin-bottom:12px; }.bridge-heading h1 { font-size:30px; margin:4px 0 6px; }.bridge-heading p { display:none; }.bridge-counter { width:72px; height:61px; border-radius:12px; }.bridge-counter strong { font-size:23px; }.bridge-steps { gap:5px; margin-bottom:10px; }.bridge-steps button { min-height:48px; justify-content:center; padding:6px; }.bridge-steps b { display:none; }.bridge-steps em { margin:0; }.bridge-lab,.bridge-coach { border-radius:15px; padding:13px; }.lab-heading { display:block; }.lab-heading h2 { margin:4px 0 10px; font-size:23px; }.bridge-svg { aspect-ratio:1.45; }.bridge-svg .axis-label,.bridge-svg .datum { font-size:29px; }.bridge-svg .scene-overline,.bridge-svg .scene-empty,.bridge-svg .measure-label,.bridge-svg .green-label { font-size:31px; }.bridge-svg .scene-note { display:none; }.lab-evidence { min-height:48px; padding:10px 2px 0; }.coach-copy p { font-size:16px; margin:8px 0 12px; }.coach-footer { padding-top:12px; }.summary-columns { grid-template-columns:1fr; }.summary-columns p { min-height:0; } }