:root{
  --bg:#fbfbfa; --panel:#fff; --ink:#16171a; --dim:#6a6d73; --line:#dcdcd6;
  --l0:#e7e7e1; --l1:#cfe0f2; --l2:#8fbde3; --l3:#4b8dc9; --l4:#1f5e9e;
  --warn:#c2410c; --accent:#1f5e9e;
  --c1:#3d7fc1; --c2:#d9822b; --c3:#4e9b72; --c4:#a668c4;
  --c5:#c65f5f; --c6:#4aa3a3; --c7:#8a8f3d; --c8:#b7639a;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#131519; --panel:#1b1e23; --ink:#e9e9e5; --dim:#9a9da4; --line:#2d3137;
  --l0:#24282e; --l1:#1e3c56; --l2:#2f6d9f; --l3:#4d9ed6; --l4:#8ccbf4;
  --warn:#f0a054; --accent:#4d9ed6;
  --c1:#63a8e6; --c2:#e8a054; --c3:#6fc498; --c4:#c08ee0;
  --c5:#e08585; --c6:#6cc7c7; --c7:#b3b85e; --c8:#d98ac0;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.wrap{max-width:1180px;margin:0 auto;padding:28px 20px 56px}
header{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:20px}
h1{font-size:20px;margin:0 0 4px}
.lede{color:var(--dim);margin:0;max-width:70ch}
a{color:var(--accent)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

.controls{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:18px}
.ctl{display:flex;flex-direction:column;gap:5px;min-width:132px}
.ctl label{font-size:11px;font-weight:650;letter-spacing:.04em;color:var(--dim);text-transform:uppercase}
.ctl .val{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--ink)}
input[type=range]{width:132px;accent-color:var(--accent)}
.radio{display:flex;gap:14px;font-size:13px}
.radio label{display:flex;align-items:center;gap:5px;cursor:pointer;text-transform:none;
  font-size:13px;font-weight:400;letter-spacing:0;color:var(--ink)}
button{font:inherit;padding:7px 15px;border-radius:7px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);cursor:pointer}
button:hover:not(:disabled){border-color:var(--accent)}
button:disabled{opacity:.45;cursor:default}

.grid2{display:grid;grid-template-columns:minmax(300px,1fr) minmax(340px,1.25fr);gap:18px}
@media (max-width:860px){.grid2{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.card h2{font-size:11px;font-weight:650;letter-spacing:.05em;color:var(--dim);
  text-transform:uppercase;margin:0 0 3px}
.card .note{font-size:11.5px;color:var(--dim);margin:0 0 10px}
#points{width:100%;aspect-ratio:1;display:block}
#grid{width:100%;height:190px;display:block}
#shared{width:100%;height:52px;display:block}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:12px 16px;margin-top:2px}
.stat .k{font-size:10.5px;font-weight:650;letter-spacing:.04em;color:var(--dim);text-transform:uppercase}
.stat .v{font-family:ui-monospace,Menlo,monospace;font-size:15px}
.playbar{display:flex;align-items:center;gap:12px;margin-top:14px}
#scrub{flex:1;accent-color:var(--accent)}
.pill{font-size:11px;padding:2px 9px;border-radius:20px;background:var(--l1);color:var(--ink)}
.warn{color:var(--warn);font-weight:650}
#busy{font-size:12px;color:var(--dim)}
footer{margin-top:30px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--dim)}

#shared{height:38px}
#sm-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:9px;font-size:11px;color:var(--dim)}
#sm-legend .lg{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
#sm-legend i{width:9px;height:9px;border-radius:2px;display:inline-block;flex:0 0 auto}
#sm-legend .mono{color:var(--ink)}

.axrow{display:flex;align-items:center;gap:9px;margin:0 0 9px}
.axlab{font-size:10.5px;font-weight:650;letter-spacing:.04em;color:var(--dim);text-transform:uppercase}
#axes{display:inline-flex;gap:5px}
.axbtn{font:inherit;font-size:11.5px;font-family:ui-monospace,Menlo,monospace;
  padding:3px 9px;border-radius:5px;border:1px solid var(--line);
  background:var(--panel);color:var(--dim);cursor:pointer;line-height:1.4}
.axbtn:hover{border-color:var(--accent);color:var(--ink)}
.axbtn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.proj{font-size:11px;color:var(--dim);margin:9px 0 0;line-height:1.45}