.direction-page .bridge-steps { grid-template-columns:repeat(4,minmax(0,1fr)); }
.direction-page .data-scene { flex-shrink:0; min-height:0; }
.direction-page .data-scene svg { width:100%; height:auto; }
.direction-page .force-readout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
.direction-page .force-readout span { border-radius:10px; background:#edf1e9; padding:10px 12px; color:var(--green); font-size:14px; line-height:1.4; font-weight:650; font-variant-numeric:tabular-nums; }
.direction-page .force-readout b { font-size:17px; }
.direction-page .direction-note { color:var(--body); font-size:14px; line-height:1.65; margin:12px 1px 0; }
.direction-page .direction-note strong { color:var(--green); }
.direction-page .bridge-variants button { flex:1; text-align:center; }
.direction-page .motion-vector { stroke-width:6; stroke-linecap:round; fill:none; }
.direction-page .motion-vector.dashed { stroke-dasharray:9 7; }
.direction-page .data-scene { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.direction-page .direction-legend { align-self:stretch; display:flex; flex-wrap:wrap; justify-content:center; gap:5px 11px; padding:4px 8px 10px; font-size:14px; font-weight:700; line-height:1.25; }
.direction-page .direction-legend span::before { content:'●'; margin-right:5px; }
.direction-page .direction-legend .weight { color:#a95733; }.direction-page .direction-legend .weight::before { content:'◆'; }
.direction-page .direction-legend .normal { color:#28654f; }.direction-page .direction-legend .friction { color:#456996; }
@media(min-width:951px) and (max-height:800px){
  .direction-page .bridge-lab { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,.85fr); grid-template-rows:auto auto auto auto; align-items:start; gap:5px 12px; overflow:hidden; }
  .direction-page .lab-heading { grid-column:1/-1; grid-row:1; }
  .direction-page .data-scene { grid-column:1; grid-row:2; width:100%; }
  .direction-page .data-scene svg { width:100%; max-height:none; }
  .direction-page .bridge-variants { grid-column:1; grid-row:3; margin:0; }
  .direction-page .force-readout { grid-column:2; grid-row:2/4; grid-template-columns:1fr; margin:0; gap:6px; }
  .direction-page .force-readout span { padding:7px 8px; font-size:13px; }
  .direction-page .force-readout b { font-size:15px; }
  .direction-page .data-formula,.direction-page .direction-note { grid-column:1/-1; grid-row:4; margin:0; padding:8px 10px; font-size:14px; line-height:1.35; }
}
@media(min-width:700px) and (max-width:950px) and (max-height:800px){
  .direction-page .bridge-layout { height:auto; grid-template-columns:1fr; }
  .direction-page .bridge-lab,.direction-page .bridge-coach { overflow:visible; }
  .direction-page .bridge-lab { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,.85fr); grid-template-rows:auto auto auto auto; gap:6px 12px; }
  .direction-page .lab-heading { grid-column:1/-1; grid-row:1; }
  .direction-page .data-scene { grid-column:1; grid-row:2; width:100%; }
  .direction-page .data-scene svg { width:100%; max-height:none; }
  .direction-page .bridge-variants { grid-column:1; grid-row:3; }
  .direction-page .force-readout { grid-column:2; grid-row:2/4; grid-template-columns:1fr; margin:0; }
  .direction-page .data-formula,.direction-page .direction-note { grid-column:1/-1; grid-row:4; margin:0; }
}
@media(max-width:600px){ .direction-page .force-readout { grid-template-columns:1fr 1fr; }.direction-page .force-readout span { padding:8px; font-size:12px; }.direction-page .force-readout b { font-size:15px; }.direction-page .bridge-variants button { padding:8px 7px; font-size:13px; } }