/* Dark by default, like the rest of the site. The switch at the top sets data-theme="light". */
:root{
  --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;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70;
  color-scheme: dark;
}
:root[data-theme="light"]{
  --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;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a;
  color-scheme: light;
}
*{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;position:relative}
/* light / dark switch: sun on the left, moon on the right, and a knob behind whichever is on */
.theme{position:absolute;top:16px;right:16px;width:60px;height:30px;box-sizing:border-box;padding:0 7px;display:inline-flex;align-items:center;
  justify-content:space-between;background:var(--fig);border:1px solid var(--rule);border-radius:999px;cursor:pointer;color:var(--muted)}
.theme:hover{border-color:var(--muted)}
.theme:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.theme svg{width:14px;height:14px;position:relative;z-index:1;display:block;transition:color .2s}
.theme .knob{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:var(--text);transform:translateX(30px);transition:transform .2s}
.theme .moon{color:var(--bg)}
:root[data-theme="light"] .theme .knob{transform:none}
:root[data-theme="light"] .theme .moon{color:var(--muted)}
:root[data-theme="light"] .theme .sun{color:var(--bg)}
@media (prefers-reduced-motion:reduce){.theme .knob,.theme svg{transition:none}}
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:62px} .theme{top:14px}}
.tip{position:absolute;pointer-events:none;font-size:13px;line-height:1.4;background:color-mix(in srgb,var(--bg) 92%,transparent);color:var(--text);
  border:1px solid var(--rule);border-radius:8px;padding:6px 9px;white-space:nowrap;display:none;z-index:2}
.tip b{font-weight:650}
.legend{padding:10px 4px 0}
.legend i.dot{border-radius:50%}
.legend i.s1{background:var(--s1)} .legend i.s2{background:var(--s2)} .legend i.s3{background:var(--s3)}
.tree{list-style:none;margin:0;padding:6px 0 0;display:grid;gap:6px}
.tree li{display:grid;grid-template-columns:3.2em 1fr auto;gap:10px 14px;align-items:center;background:var(--fig);border-radius:10px;padding:10px 14px;font-size:16px;line-height:1.35}
.tree .mark{font-weight:700;font-size:14px;text-align:center;border-radius:999px;padding:2px 0;background:var(--ctl);color:var(--text)}
.tree .yes .mark{background:var(--good);color:var(--bg)}
.tree .m{color:var(--muted);font-size:14.5px;text-align:right;font-variant-numeric:tabular-nums}
.tree .skip{opacity:.45}
.tree .verdict{background:transparent;padding:6px 14px}
.tree .verdict .mark{background:transparent}
.tree .verdict .q{font-size:24px;font-weight:750;letter-spacing:-.01em}
@media (max-width:560px){.tree li{grid-template-columns:3em 1fr;font-size:15px}.tree .m{grid-column:2;text-align:left}}
.appshots{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:end;margin:2em auto 2.2em;max-width:560px}
.appshots.one{grid-template-columns:1fr;max-width:270px}
.appshots figure{margin:0;text-align:center}
.appshots img{display:block;width:100%;height:auto;border-radius:26px;border:1px solid var(--rule);background:#050607}
.appshots img.watch{border-radius:34px;max-width:200px;margin:0 auto}
.appshots figcaption{margin-top:10px}
.getrow{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:1.4em}
.getrow span{color:var(--muted);font-size:15px}
.getapp{display:inline-block;background:#d3ee45;color:#15191a;font-weight:650;text-decoration:none;padding:12px 20px;border-radius:12px}
.getapp:hover{background:#e7fa6d}
@media (max-width:560px){.appshots{gap:16px}}
.weights{display:flex;gap:3px;margin:1.8em 0;border-radius:12px;overflow:hidden;font-size:14.5px}
.weights span{background:var(--fig);padding:14px 10px 12px;color:var(--muted);min-width:0}
.weights b{display:block;color:var(--text);font-size:22px;font-weight:750;letter-spacing:-.01em}
.weights .w30{flex:30} .weights .w25{flex:25} .weights .w20{flex:20}
@media (max-width:560px){.weights{font-size:12px}.weights span{padding:12px 7px 10px}.weights b{font-size:18px}}
.draftnote{border:1px dashed var(--rule);border-radius:10px;padding:12px 14px;color:var(--muted);font-size:16px}
.btn{font:inherit;font-size:14px;border:0;background:var(--ctl);color:var(--text);padding:6px 12px;border-radius:8px;cursor:pointer}

/* 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;white-space:nowrap}
.sitebar a.get{font-weight:500;color:var(--muted)}
.sitebar a:hover{color:var(--link)}
.sitebar img{border-radius:7px;display:block}
.sitebar .theme{position:relative;top:auto;right:auto;flex:none}
.bar-right{display:inline-flex;align-items:center;gap:16px}
@media (max-width:560px){article{padding-top:30px}}