:root{--bg:#f7f6f2;--surface:#fff;--text:#1d1d1f;--muted:#64646b;--border:#e2e0da;--accent:#4f46e5;--accent-soft:#e8e7fc;--result:#d9480f;--negative:#2f6fdb;--positive:#e8590c;--dots:#b9b7b0;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#131316;--surface:#1c1c21;--text:#ececf0;--muted:#a0a0aa;--border:#2e2e36;--accent:#8b85ff;--accent-soft:#2a2850;--result:#ff8a50;--negative:#5b9bff;--positive:#ff9248;--dots:#4a4a54}}*{box-sizing:border-box}body{background:var(--bg);margin:0}#root{max-width:1200px;margin:0 auto;padding:32px 16px}a{color:var(--accent)}h1,h2,h3{margin:0;line-height:1.2}.page-header{max-width:70ch;margin-bottom:32px}.page-header h1{margin-bottom:8px;font-size:2rem}.page-header p,.page-footer{color:var(--muted)}.page-footer{margin-top:40px;font-size:.85rem}.status{color:var(--muted)}.status.error{color:var(--result)}.playground{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start;gap:24px;display:grid}@media (width<=860px){.playground{grid-template-columns:minmax(0,1fr)}}.panels{grid-template-columns:minmax(0,1fr);gap:16px;display:grid}.panel,.plot{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px}.panel{transition:border-color .15s,box-shadow .15s}.panel.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.panel h2{font-size:1.15rem}.panel h3{color:var(--muted);margin:16px 0 4px;font-size:.85rem}.panel-description{color:var(--muted);margin:4px 0 16px;font-size:.9rem}.field{gap:4px;font-size:.85rem;font-weight:600;display:grid}.field input{font:inherit;border:1px solid var(--border);background:var(--bg);width:100%;min-width:0;color:var(--text);border-radius:8px;padding:8px 12px;font-size:1rem;font-weight:400}.field input:focus{outline:2px solid var(--accent);outline-offset:-1px}.field-row{grid-template-columns:1fr 1fr;gap:12px;display:grid}.hint{color:var(--muted);font-size:.9rem}.neighbours{gap:2px;margin:12px 0 0;padding:0;list-style:none;display:grid}.neighbours li{grid-template-columns:minmax(6rem,1fr) 2fr 3.5rem;align-items:center;gap:12px;display:grid}.neighbours li.top .word-button{color:var(--result);font-weight:700}.word-button{font:inherit;text-align:left;color:var(--text);cursor:pointer;text-overflow:ellipsis;background:0 0;border:none;padding:2px 0;overflow:hidden}.word-button:hover{color:var(--accent);text-decoration:underline}.bar{background:var(--border);border-radius:3px;height:6px;overflow:hidden}.bar span{background:var(--accent);height:100%;display:block}.score{font-variant-numeric:tabular-nums;text-align:right;color:var(--muted);font-size:.9rem}.big-score{color:var(--muted);margin:16px 0 0}.big-score output{color:var(--text);font-variant-numeric:tabular-nums;margin-right:4px;font-size:2rem;font-weight:700}.examples{color:var(--muted);flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 0;font-size:.85rem;display:flex}.chip{font:inherit;border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;border-radius:999px;padding:2px 10px}.chip:hover{border-color:var(--accent)}.vector-figure{margin:12px 0 0}.vector-strip{background:var(--bg);border-radius:4px;width:100%;height:20px;display:block}.vector-strip .negative{fill:var(--negative)}.vector-strip .positive{fill:var(--positive)}.vector-figure figcaption{color:var(--muted);margin-top:4px;font-size:.8rem}.plot{margin:0;position:sticky;top:16px}.plot-header{flex-wrap:wrap;justify-content:space-between;align-items:start;gap:12px;display:flex}.plot-header figcaption{font-weight:600}.toggle{border:none;gap:12px;margin:0;padding:0;font-size:.85rem;display:flex}.toggle legend{float:left;color:var(--muted);margin-right:4px}.toggle label{align-items:center;gap:4px;display:flex}.plot svg{width:100%;height:auto;margin-top:8px;display:block;overflow:visible}.background-dots{stroke:var(--dots);stroke-width:3px;stroke-linecap:round}.point circle{fill:var(--accent);stroke:var(--surface);stroke-width:2px}.point text{fill:var(--text);paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round;font-size:13px}.point.neighbour circle{fill:var(--muted)}.point.neighbour text{fill:var(--muted);font-size:12px}.point.input text{font-weight:700}.point.result circle{fill:var(--result)}.point.result text{fill:var(--result);font-size:15px;font-weight:700}.plot-note{color:var(--muted);margin:8px 0 0;font-size:.8rem}