:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#172a32;--muted:#52636b;--line:#ced9dc;--plot:#f4f8f8;--prime:#157765;--empty:#82999e;--amber:#9a651a;background:#fff;font-family:system-ui,sans-serif;font-size:16px}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}*{box-sizing:border-box}body{margin:0}main{max-width:1220px;margin:0 auto;padding:28px}h1{margin:0;font-size:28px;font-weight:600}header p{color:var(--muted);margin:8px 0 24px}header .intro{max-width:76ch;margin:12px 0;line-height:1.6}.guide{max-width:90ch;color:var(--muted);margin:0 0 24px;font-size:14px;line-height:1.6}button,input,select{font:inherit;color:inherit;background:inherit;border:1px solid var(--line);min-height:40px;padding:8px 10px}button{cursor:pointer}button:hover{border-color:var(--prime)}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--prime);outline-offset:3px}input{width:112px}label{gap:6px;font-size:14px;display:grid}form,.controls,.presets{flex-wrap:wrap;align-items:end;gap:12px;display:flex}.presets{margin:16px 0 24px}.plots{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;display:grid}figure{min-width:0;margin:0}figcaption{margin-bottom:12px}h2{margin:0 0 4px;font-size:18px;font-weight:600}figcaption span{color:var(--muted);font-size:14px}.plot{aspect-ratio:1;background:var(--plot);cursor:crosshair;width:100%;display:block}.prime-dot{fill:var(--prime)}.unmarked-dot{fill:var(--empty)}.diagonal{stroke:var(--amber)}.selection{stroke:currentColor;fill:none}.prime-number{fill:var(--prime);paint-order:stroke;stroke:var(--plot);stroke-width:.09px;font-weight:600}.other-number{fill:var(--muted)}.legend,.formula{color:var(--muted);font-size:14px;line-height:1.6}.inspection{border-top:1px solid var(--line);margin-top:24px;padding-top:20px}.inspection p{margin-bottom:0;line-height:1.6}@media (width<=700px){main{padding:20px 16px}.plots{grid-template-columns:minmax(0,1fr)}.controls{gap:16px 12px}}@media (prefers-color-scheme:dark){:root{color:#e7eef5;--muted:#adbdce;--line:#3a4b58;--plot:#101c2a;--prime:#6de2cc;--empty:#75899b;--amber:#efb864;background:#101820}}