:root {
  --bg: #fafaf8; --fg: #1c1c1a; --muted: #6b6b66; --line: #dcdcd6; --card: #fff;
  --accent: #2a5db0; --ok: #2e7d4f; --warn: #b7791f; --bad: #b3372f;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #161615; --fg: #ececE8; --muted: #9a9a93; --line: #34342f; --card: #1f1f1d; --accent: #6fa0ec; --ok: #5fbf85; --warn: #e0a84a; --bad: #e0716a; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.45 system-ui, sans-serif; }
header, main { padding: 0 16px; max-width: 1200px; margin: 0 auto; }
h1 { font-size: 1.4rem; margin: 20px 0 2px; }
h2 { font-size: 1rem; margin: 16px 0 8px; }
.sub, .hint { color: var(--muted); margin: 0; }
main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; margin-top: 16px; padding-bottom: 40px; }
@media (max-width: 860px) { main { grid-template-columns: 1fr; } }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.toolbar label { color: var(--muted); display: flex; gap: 6px; align-items: center; }
input[type=number] { width: 90px; }
button, input { font: inherit; }
button { padding: 6px 12px; border: 1px solid var(--line); background: var(--card); color: var(--fg); border-radius: 6px; cursor: pointer; }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
button:disabled { opacity: .5; cursor: default; }
.canvas-wrap { border: 1px solid var(--line); background: var(--card); border-radius: 8px; overflow: hidden; }
canvas { display: block; width: 100%; height: auto; touch-action: none; }
.points { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.points li { padding: 4px 8px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: .85rem; line-height: 1.25; }
.points li:last-child { border-bottom: 0; }
.points li.sel { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.points small { display: block; color: var(--muted); font-size: .68rem; line-height: 1.25; }
.results { border: 1px solid var(--line); border-radius: 8px; background: var(--card); padding: 12px; }
.overall { font-size: 2rem; font-weight: 600; }
.disclaimer { color: var(--warn); font-size: .85rem; margin: 6px 0; }
.warning { color: var(--warn); font-size: .9rem; margin: 4px 0; }
.error { color: var(--bad); }
table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: 8px; }
th, td { text-align: left; padding: 4px 4px; border-bottom: 1px solid var(--line); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ideal { color: var(--ok); } .acceptable { color: var(--warn); } .outside { color: var(--bad); }
code { font-size: .8rem; word-break: break-all; }
a { color: var(--accent); }