.spin-axis-chart{background:#fcfcf7;border:1px solid #d6dfd1;border-radius:16px;padding:22px!important}
.spin-axis-intro{font-size:1rem;line-height:1.6;color:#4e6156;margin:4px 0 16px}
.spin-axis-chart .chart-heading h4{font-size:1.35rem;line-height:1.25}
.spin-axis-chart .chart-canvas{min-height:0;margin:0;aspect-ratio:390/272}
.spin-axis-chart .chart-canvas svg{width:100%;height:100%}
.spin-axis-chart .spin-axis-line{stroke:#be762c;stroke-width:2.8;fill:none;vector-effect:non-scaling-stroke}
.spin-axis-chart .spin-axis-tip{fill:#be762c;stroke:#fff;stroke-width:1}
.spin-axis-chart .chart-target{stroke:#85938b;stroke-width:1.2;stroke-dasharray:5 5}
.spin-axis-chart .chart-legend .legend-spin-axis{border-color:#be762c;background:#be762c}
.spin-axis-chart .chart-legend .legend-spin-band{border-color:#137c98;background:#137c98}
.spin-axis-chart .spin-playback{gap:9px;margin:0}
.spin-axis-chart .spin-playback .btn{font-size:.875rem;min-height:44px}
.spin-axis-sides{display:flex;justify-content:space-between;gap:12px;font-size:.8rem;color:#627268;margin:0 0 14px}
.spin-axis-reading{display:flex;align-items:flex-start;gap:14px;background:#edf2ec;border:1px solid #d8e1d3;border-radius:10px;padding:16px}
.spin-axis-reading>span{font-size:2rem;line-height:1.1;color:#735699}
.spin-axis-reading strong{display:block;font-size:1rem;line-height:1.45;color:#294d3e}
.spin-axis-reading p{font-size:.875rem;line-height:1.6;color:#54675b;margin:5px 0 0}
.spin-axis-chart .chart-legend{gap:8px 15px;font-size:.8rem;flex-wrap:wrap}
.spin-axis-chart .chart-note{font-size:.8rem;line-height:1.65}
.ball-practice-page .independent-controls>.spin-axis-chart{margin-top:20px}
.spin-axis-chart button:focus-visible{outline:3px solid #ad803c;outline-offset:3px}
@media(max-width:600px){.spin-axis-chart{padding:16px!important}.spin-axis-chart .chart-heading{flex-wrap:wrap;gap:8px}.spin-axis-chart .chart-value{font-size:2rem}.spin-axis-chart .chart-heading h4{font-size:1.15rem}.spin-axis-intro{font-size:.9375rem}.spin-axis-sides{font-size:.75rem}.spin-axis-reading{padding:13px;gap:9px}.spin-axis-chart .chart-meta{flex-wrap:wrap}}

.spin-axis-chart .chart-meta{flex-wrap:wrap;gap:8px}.spin-axis-chart .chart-meta>span:first-child{flex:1 1 auto}

.spin-axis-chart .chart-canvas{margin-inline:auto}

/* One shared coordinate frame: ball centre (260,151) is the centre of
   viewBox 65 15 390 272. The 192-unit canvas is square at every card width. */
.spin-axis-chart .chart-canvas.spin-axis-scene{position:relative;isolation:isolate;width:100%;max-width:520px;aspect-ratio:390/272;height:auto;min-height:0;max-height:none;overflow:hidden}
.spin-axis-chart .chart-canvas.spin-axis-scene>svg{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;pointer-events:none}
.spin-axis-scene>.spin-ball-canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;width:49.2307692308%;height:auto;aspect-ratio:1;max-width:none;padding:0;margin:0;border:0;pointer-events:none;z-index:1}
.spin-axis-chart .spin-axis-scene>.spin-axis-overlay{z-index:2}
.spin-axis-chart .chart-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;min-height:0}
.spin-axis-chart .chart-heading h4{font-size:1.2rem;line-height:1.3;min-width:0}
.spin-axis-chart .chart-heading .chart-value{font-size:2rem;line-height:1.15;white-space:nowrap}
.spin-axis-chart .chart-heading .chart-value small{display:inline-block;font-size:.55em;line-height:1;white-space:nowrap;vertical-align:top;margin:3px 0 0 3px}
@media(max-width:600px){.spin-axis-chart .chart-heading{gap:10px}.spin-axis-chart .chart-heading h4{font-size:1.1rem}.spin-axis-chart .chart-heading .chart-value{font-size:1.8rem}}