:root{
  --bg:#faf8f3; --text:#22252a; --muted:#6b7078; --rule:#e3dfd5; --fig:#f1eee6; --ctl:#ded9cd; --knob:#ffffff;
  --link:#1d68ad;
  --court:#2f6db3; --court-dim:#7ea3cc; --ground:#dcd8cd; --line:#ffffff;
  --glass:#3d9fd0; --mesh:#70757d; --frame:#4a4f57; --net:#33373d;
  --ball:#d6de1f; --ball-edge:#7d8400;
  --path:#e2572b; --ghost:#9da2aa; --good:#1b9552; --bad:#d13c3c; --vec:#7a4fd0;
  --teamA:#e2572b; --teamB:#17988f;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#131518; --text:#e7e4dd; --muted:#9a9fa7; --rule:#2b2f35; --fig:#1b1e22; --ctl:#3a3f47; --knob:#e7e4dd;
    --link:#6db4f0;
    --court:#2a5f9c; --court-dim:#33506f; --ground:#262a30; --line:#f2f2f2;
    --glass:#5cb8e6; --mesh:#9096a0; --frame:#8a909a; --net:#c9cdd3;
    --ball:#e2ea3a; --ball-edge:#f6ffb0;
    --path:#ff7a4d; --ghost:#6b7078; --good:#3cc47c; --bad:#f06a6a; --vec:#b08cff;
    --teamA:#ff7a4d; --teamB:#3fc8bd;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#131518; --text:#e7e4dd; --muted:#9a9fa7; --rule:#2b2f35; --fig:#1b1e22; --ctl:#3a3f47; --knob:#e7e4dd;
  --link:#6db4f0;
  --court:#2a5f9c; --court-dim:#33506f; --ground:#262a30; --line:#f2f2f2;
  --glass:#5cb8e6; --mesh:#9096a0; --frame:#8a909a; --net:#c9cdd3;
  --ball:#e2ea3a; --ball-edge:#f6ffb0;
  --path:#ff7a4d; --ghost:#6b7078; --good:#3cc47c; --bad:#f06a6a; --vec:#b08cff;
  --teamA:#ff7a4d; --teamB:#3fc8bd;
  color-scheme: dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font:19px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  overflow-x:hidden}
article{max-width:700px;margin:0 auto;padding:56px 16px 96px}
h1{font-size:clamp(38px,8.4vw,72px);line-height:1;margin:0 0 .5em;letter-spacing:-.03em;font-weight:800}
h2{font-size:30px;line-height:1.2;margin:2.4em 0 .6em;letter-spacing:-.015em;font-weight:750}
p{margin:0 0 1.15em}
a{color:var(--link)}
em{font-style:italic}
.note{color:var(--muted);font-size:16px;line-height:1.55;border-left:3px solid var(--rule);padding-left:14px}
b.path{color:var(--path)} b.glass{color:var(--glass)} b.mesh{color:var(--mesh)} b.good{color:var(--good)}
b.bad{color:var(--bad)} b.vec{color:var(--vec)} b.ghost{color:var(--ghost)} b.courtc{color:var(--court)}
b.path,b.glass,b.mesh,b.good,b.bad,b.vec,b.ghost,b.courtc{font-weight:650}

.fig{margin:2.2em 0 2.4em;width:min(900px,calc(100vw - 32px));position:relative;left:50%;transform:translateX(-50%)}
.stage{position:relative;background:var(--fig);border-radius:14px;overflow:hidden}
.stage canvas{display:block;width:100%;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.chip{position:absolute;left:12px;top:12px;font-size:13px;font-weight:650;letter-spacing:.02em;
  background:color-mix(in srgb,var(--bg) 82%,transparent);color:var(--text);padding:4px 10px;border-radius:999px;pointer-events:none}
.hint{position:absolute;right:12px;bottom:12px;font-size:12px;color:var(--muted);
  background:color-mix(in srgb,var(--bg) 82%,transparent);padding:4px 10px;border-radius:999px;pointer-events:none}
.controls{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;padding:14px 4px 0}
.ctl{display:grid;grid-template-columns:auto minmax(120px,1fr) 5.6em;gap:10px;align-items:center;flex:1 1 280px;font-size:15px}
.ctl-name{color:var(--muted);white-space:nowrap}
.ctl output{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--ctl)}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--ctl)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--knob);
  border:2px solid var(--path);margin-top:-8px;box-shadow:0 1px 3px rgba(0,0,0,.25)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--knob);border:2px solid var(--path);box-shadow:0 1px 3px rgba(0,0,0,.25)}
input[type=range]:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:6px}
.seg{display:inline-flex;background:var(--ctl);border-radius:9px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{font:inherit;font-size:14px;border:0;background:transparent;color:var(--text);padding:5px 12px;border-radius:7px;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--knob);color:#22252a;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.seg button:focus-visible{outline:2px solid var(--link)}
.seg-wrap{display:flex;align-items:center;gap:10px;font-size:15px;flex-wrap:wrap}
.chk{display:inline-flex;align-items:center;gap:8px;font-size:15px;cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--path)}
.readout{margin:12px 4px 0;font-size:16px;line-height:1.45;min-height:1.45em}
.readout.good{color:var(--good)} .readout.bad{color:var(--bad)}
.readout b{font-weight:650}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:13px;height:13px;border-radius:3px;display:inline-block;flex:none}
h3{font-size:22px;line-height:1.25;margin:2em 0 .5em;letter-spacing:-.01em;font-weight:700}
figcaption{margin:10px 4px 0;font-size:14.5px;color:var(--muted);line-height:1.45}
.racket{display:flex;justify-content:center;padding:18px 0 8px}
.racket svg{max-width:100%;height:auto}
footer{margin-top:4em;padding-top:1.4em;border-top:1px solid var(--rule);font-size:15px;color:var(--muted);line-height:1.5}
@media (max-width:460px){.hint{display:none}}
@media (max-width:560px){
  .ctl{flex:1 1 100%;min-width:0;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px}
  .ctl-name{white-space:normal}
  .ctl input{grid-column:1 / -1;grid-row:2}
  .ctl output{width:auto}
}
@media (max-width:560px){body{font-size:17.5px} h2{font-size:26px} article{padding-top:36px}}

/* site chrome */
.sitebar{max-width:700px;margin:0 auto;padding:18px 16px 0;display:flex;justify-content:space-between;align-items:center;font-size:15px}
.sitebar a{color:var(--text);text-decoration:none;font-weight:650;display:inline-flex;align-items:center;gap:9px}
.sitebar a.get{font-weight:500;color:var(--muted)}
.sitebar a:hover{color:var(--link)}
.sitebar img{border-radius:7px;display:block}
.sitebar a{white-space:nowrap}

.madeby{margin-top:1.2em}