*{box-sizing:border-box}:root{color-scheme:light dark;--fg: black;--bg: #f8f8f8}@media (prefers-color-scheme: dark){:root{--fg: #eee;--bg: #222}}html{--gray-1: color-mix(in srgb, var(--fg) 8%, Canvas);--gray-2: color-mix(in srgb, var(--fg) 16%, Canvas);--gray-3: color-mix(in srgb, var(--fg) 24%, Canvas);--gray-4: color-mix(in srgb, var(--fg) 32%, Canvas);--gray-5: color-mix(in srgb, var(--fg) 40%, Canvas);--gray-6: color-mix(in srgb, var(--fg) 50%, Canvas);--gray-7: color-mix(in srgb, var(--fg) 62%, Canvas);--gray-8: color-mix(in srgb, var(--fg) 74%, Canvas);--gray-9: color-mix(in srgb, var(--fg) 86%, Canvas);--map-empty-cell-stroke: color-mix(in srgb, var(--fg) 7%, transparent);--map-filled-cell-stroke: color-mix(in srgb, var(--fg) 40%, transparent);--map-filled-cell-text-color: var(--bg);--map-empty-cell-text-color: var(--gray-5);--map-frontier-cell-stroke: color-mix(in srgb, var(--fg) 50%, transparent);background-color:var(--bg)}body{margin:0;font-family:sans-serif;text-align:center}h1{margin-block:.4rem 0rem;font-size:clamp(1rem,.45rem + 2.75vw,1.8rem)}button{margin:10px;padding:8px 16px;font-size:16px}input[type=range]{width:300px;margin:10px}label{display:block;margin:5px 0}.settings{padding:1ch;row-gap:1ch;max-width:80ch;margin-inline:auto;grid-template-columns:max-content 4ch 1fr;display:grid;gap:1ch}:is(.settings,.settings>.conditional-setting-group)>*{grid-column:1 / -1}:is(.settings,.settings>.conditional-setting-group)>.setting{display:grid;grid-template-columns:subgrid}:is(.settings,.settings>.conditional-setting-group)>.setting>label{grid-column:1;text-align:right}:is(.settings,.settings>.conditional-setting-group)>.setting>select{padding:.1em 1em;border-radius:5px;grid-column:2 / -1;border:1px solid var(--gray-3);background-color:var(--gray-2);font-size:1em}:is(.settings,.settings>.conditional-setting-group)>.setting>select:hover{border-color:var(--gray-4)}@media (width < 50ch){:is(.settings,.settings>.conditional-setting-group)>.setting{grid-template-columns:minmax(14ch,max-content) 4ch minmax(8ch,1fr);column-gap:1ch}:is(.settings,.settings>.conditional-setting-group)>.setting>label{font-size:.9rem;text-align:left}}.settings>.conditional-setting-group:not([hidden]){display:contents}.setting{padding:.1em 1em;background-color:var(--gray-1);border:1px solid var(--gray-3);border-radius:5px}.setting>label:after{content:":"}@media (width < 50ch){.setting{padding-inline:1ch}}better-slider{display:grid;gap:1ch;grid-template-columns:max-content 4ch 1fr;align-items:center}.settings better-slider{grid-template-columns:subgrid}better-slider>input[type=range]{width:100%;padding:0;margin:0}better-slider .slider-value{grid-column:2;font-weight:700;color:var(--fg);text-align:right}.display-container{display:flex;flex-direction:column;align-items:center}.display-container>canvas{background:Canvas;max-width:calc(100svw - 1em)}.display-container .animation-controls{display:grid;grid-template-columns:5fr minmax(max-content,3fr);text-align:left;width:min(100%,800px + 2ch);padding-inline:1ch;align-items:center;gap:1em;margin-bottom:8px}.display-container .animation-controls p{margin:0}.display-container .animation-controls .animation-step-slider{width:100%}@media (width < 50ch){.display-container .animation-controls{display:flex;flex-direction:column;gap:4px}}body:has(.settings option[value=none]:checked) .animation-controls{display:none}#status{display:block}#status.error{color:color-mix(in srgb,red 80%,var(--fg));background-color:color-mix(in srgb,red 7%,var(--bg));padding:1rem;border:1px solid color-mix(in srgb,red 30%,var(--bg))}
