.court-explainer{margin-top:27px}.rule-selector{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 24px}.rule-selector button{border:1px solid #c6d2bd;color:var(--ink);border-radius:30px;padding:10px 17px;background:transparent;font-size:14px}.rule-selector button[aria-pressed=true]{background:var(--green);color:#fff;border-color:var(--green)}.rule-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:35px;align-items:center}.court-diagram{min-width:0}.court-diagram svg{display:block;width:100%;height:auto}.rule-copy h3{font-size:29px;font-weight:550;line-height:1.15;margin:14px 0 17px;letter-spacing:-.7px}.rule-copy p{font-size:15px;line-height:1.7;color:#60715d}.rule-copy .rule-callout{padding:14px;border-left:3px solid #8da346;background:#edf0de;color:#2e4c29}.court-key{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:#60745b;margin:20px 0}.court-key span{display:flex;align-items:center;gap:7px}.court-key i{width:11px;height:11px;display:inline-block}.key-net{border-left:3px dashed var(--green)}.key-ball{border-radius:50%;background:#afca43}.rule-copy .court-dimensions{font-size:12px;color:#78866f}.rule-bounds,.rule-rally,.rule-serve{display:none}[data-rule=serve] .rule-serve,[data-rule=rally] .rule-rally,[data-rule=bounds] .rule-bounds{display:inline}.score-guide{display:grid;grid-template-columns:1fr 1fr;gap:30px;border-top:1px solid var(--line);margin-top:35px;padding-top:25px}.score-guide strong{display:block;font-size:25px;font-weight:550;margin-top:12px}.score-guide p{font-size:14px;color:#697960;line-height:1.8;margin:0}

.rule-layout{align-items:start}
.court-visual{min-width:0;background:#224f42;border-radius:12px;overflow:hidden}
.court-diagram svg>g.rule-serve>path,.court-diagram svg>g.rule-rally>path{opacity:.2}
.court-diagram svg>g.rule-serve>circle[r="10"],.court-diagram svg>g.rule-rally>circle[r="11"]{opacity:.35}
.court-diagram svg>g.rule-serve>circle[r="26"],.court-diagram svg>g.rule-rally>circle[r="27"]{opacity:.25}
.court-playback{padding:0 23px 21px;color:#eef4e5}
.rule-steps{list-style:none;display:flex;gap:7px;margin:0;padding:0}
.rule-steps li{flex:1;text-align:center;font-size:12px;padding:9px 4px;border:1px solid #ffffff25;border-radius:5px;color:#c1d1c8}
.rule-steps li.is-current{background:var(--lime);border-color:var(--lime);color:#183e30}
#rule-caption{font-size:14px;line-height:1.5;min-height:42px;margin:17px 0 12px}
#rule-progress{display:block;width:100%;height:3px;border:0;appearance:none;background:#ffffff20;border-radius:3px;overflow:hidden}
#rule-progress::-webkit-progress-bar{background:#ffffff20}
#rule-progress::-webkit-progress-value{background:var(--lime)}
#rule-progress::-moz-progress-bar{background:var(--lime)}
.court-controls{display:flex;gap:8px;align-items:center;margin-top:16px;flex-wrap:wrap}
.court-controls>span{font-size:8px;letter-spacing:1.2px;margin-right:auto}
.court-controls button{font:inherit;font-size:12px;color:#eef4e5;border:1px solid #ffffff45;border-radius:24px;background:transparent;padding:9px 12px;min-height:38px}
.court-controls button:hover{background:#ffffff15}
.court-controls button:focus-visible,.rule-selector button:focus-visible{outline:3px solid #b4cb65;outline-offset:3px}
.rule-details{padding-left:19px;margin:16px 0;font-size:14px;line-height:1.65;color:#526849}
.rule-details li+li{margin-top:9px}
.rule-details li::marker{color:#8b9f46}
.score-guide{display:block;margin-top:40px;padding-top:30px}
.score-heading{margin-bottom:23px;max-width:610px}
.score-heading h3{font-size:29px;font-weight:550;letter-spacing:-.7px;margin:12px 0}
.score-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.score-cards article{border:1px solid #d7decb;border-radius:9px;padding:24px;background:#f1f3e8}
.score-index{font-size:10px;letter-spacing:1.6px;color:#65794f}
.score-cards h4{font-size:21px;font-weight:550;line-height:1.25;letter-spacing:-.4px;margin:14px 0}
.score-example{display:block;margin-top:16px;font-size:12px;line-height:1.5;color:#345638;border-top:1px solid #d7decb;padding-top:13px}
@media(max-width:1050px){.court-visual{max-width:800px;width:100%;margin:auto}}
@media(max-width:760px){.court-playback{padding:0 16px 19px}.rule-steps li{font-size:11px}.court-controls>span{flex-basis:100%;margin-bottom:5px}.court-diagram{margin:14px auto}.score-cards{grid-template-columns:1fr}.score-cards article{padding:20px}.score-heading h3{font-size:27px}}


@media(max-width:900px){.rule-layout{grid-template-columns:1fr}.court-diagram{max-width:800px}.rule-layout{gap:24px}}