:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f4f4f1;--surface:#fcfcfb;--ink:#0b0b0b;--ink-2:#52514e;--grid:#dddcd6;--accent:#2a78d6;--on-accent:#fff;--c0:#2a78d6;--c1:#eb6834;--c2:#1baf7a;--c3:#eda100;--c4:#e87ba4;--scratch:#008300;--distil:#6250d6;--radius:10px}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#111110;--surface:#1a1a19;--ink:#f0efec;--ink-2:#c3c2b7;--grid:#34342f;--accent:#3987e5;--on-accent:#0b0b0b;--c0:#3987e5;--c1:#d95926;--c2:#199e70;--c3:#c98500;--c4:#d55181;--scratch:#008300;--distil:#9085e9}}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#111110;--surface:#1a1a19;--ink:#f0efec;--ink-2:#c3c2b7;--grid:#34342f;--accent:#3987e5;--on-accent:#0b0b0b;--c0:#3987e5;--c1:#d95926;--c2:#199e70;--c3:#c98500;--c4:#d55181;--scratch:#008300;--distil:#9085e9}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0;font:15px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}a{color:var(--accent)}h1{margin:0;font-size:1.25rem}h2{margin:0 0 4px;font-size:1rem}.sub,.hint{color:var(--ink-2);font-weight:400}.hint{margin:0 0 8px;font-size:.85rem}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.skip{position:absolute;left:-999px}.skip:focus{background:var(--surface);z-index:1;padding:4px 8px;top:8px;left:16px}button,select,input[type=number]{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--grid);border-radius:8px;min-height:36px;padding:6px 12px}button{cursor:pointer}button:hover{border-color:var(--ink-2)}button.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);min-width:6.5em}input[type=range]{width:100%;accent-color:var(--accent);margin:2px 0 0}.top{border-bottom:1px solid var(--grid);background:var(--surface);flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 16px;display:flex}.preset{flex:260px;align-items:center;gap:8px;min-width:0;display:flex}.preset select{flex:1;min-width:0;max-width:420px}.top-actions{gap:8px;display:flex}.story{background:var(--surface);border-bottom:1px solid var(--grid);margin:0;padding:10px 16px;font-size:.95rem}.layout{grid-template-columns:290px minmax(0,1fr);align-items:start;gap:16px;padding:16px;display:grid}.controls{background:var(--surface);border:1px solid var(--grid);border-radius:var(--radius);min-width:0;padding:8px 14px 14px}.controls summary{cursor:pointer;padding:4px 0;font-weight:600}fieldset{border:0;border-top:1px solid var(--grid);margin:8px 0 0;padding:8px 0 0}legend{text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);padding-right:6px;font-size:.85rem;font-weight:600}.row{grid-template-columns:1fr auto;align-items:baseline;margin:6px 0 10px;font-size:.9rem;display:grid}.row input[type=range],.row select{grid-column:1/-1}.row output{font-variant-numeric:tabular-nums;font-weight:600}.row select{margin-top:2px}.seed{grid-column:1/-1;gap:6px;display:flex}.seed input{flex:1;min-width:0}.draw{font-size:.9rem}.draw-classes{border:0;flex-wrap:wrap;gap:6px;margin:6px 0;padding:0;display:flex}.draw-classes label{border:1px solid var(--grid);cursor:pointer;border-radius:8px;align-items:center;gap:4px;padding:2px 8px;display:inline-flex}.draw-classes label:has(input:checked){border-color:var(--ink)}.draw-classes .sw{border-radius:3px;width:12px;height:12px}.toolbar{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;display:flex}.status{color:var(--ink-2);font-variant-numeric:tabular-nums;font-size:.9rem}.maps{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.map{background:var(--surface);border:1px solid var(--grid);border-radius:var(--radius);flex-direction:column;margin:0;padding:8px;display:flex}.map figcaption{flex-wrap:wrap;flex:1;align-items:baseline;gap:0 6px;margin-bottom:6px;font-size:.85rem;display:flex}.map .name{font-weight:600}.map .acc{color:var(--ink-2);font-variant-numeric:tabular-nums;flex-basis:100%}.map canvas{aspect-ratio:1;touch-action:manipulation;border-radius:6px;width:100%;display:block}.map canvas.drawing{cursor:crosshair}.sw{vertical-align:baseline;border-radius:2px;width:10px;height:10px;margin-right:5px;display:inline-block}.sw.scratch{background:var(--scratch)}.sw.distil{background:var(--distil)}#map-hint{margin-top:8px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:4px;display:grid}.card{background:var(--surface);border:1px solid var(--grid);border-radius:var(--radius);min-width:0;padding:12px}.card.wide{grid-column:1/-1}.chart{width:100%;height:220px;display:block}.chart.short{height:170px;margin-bottom:8px}.pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.explain{gap:8px;margin-top:16px;display:grid}.explain details{background:var(--surface);border:1px solid var(--grid);border-radius:var(--radius);padding:10px 14px}.explain summary{cursor:pointer;font-weight:600}.explain p{max-width:72ch}.formula{font-family:ui-serif,Georgia,serif;font-size:1.05rem;overflow-x:auto}.refs{padding-left:20px}footer{color:var(--ink-2);text-align:center;padding:16px;font-size:.85rem}@media (width<=1100px){.cards,.pair{grid-template-columns:minmax(0,1fr)}}@media (width<=860px){.layout{grid-template-columns:minmax(0,1fr)}.maps{scroll-snap-type:x mandatory;grid-template-columns:none;grid-auto-columns:82%;grid-auto-flow:column;padding-bottom:4px;overflow-x:auto}.map{scroll-snap-align:start}}.sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}
