:root{--ink:#f5f5f5;--dim:#4a4a4a;--faint:#222;--night:#000;--gutter:16px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--night);height:100%;color:var(--dim);margin:0;font:14px/1.4 Verdana,DejaVu Sans,system-ui,sans-serif;overflow-x:hidden}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}:focus-visible{outline:1px solid var(--ink);outline-offset:3px}main{flex-direction:column;height:100dvh;display:flex;overflow:hidden}.stage{flex:auto;min-height:140px;position:relative}canvas{cursor:pointer;width:100%;height:100%;display:block}canvas:focus-visible{outline:none}.ground{pointer-events:none;height:50px;position:absolute;inset:auto 0 0}.ground:before,.ground:after{content:"";background:url(/wanderer.png) bottom no-repeat;transition:opacity .25s;position:absolute;inset:0}.ground:after{opacity:0;background-image:url(/wanderer-raised.png)}.creating .ground:before{opacity:0}.creating .ground:after{opacity:1}#wanderer{pointer-events:auto;width:75px;height:50px;position:absolute;bottom:0;left:50%;translate:-50%}.bar{padding:18px var(--gutter);flex-wrap:wrap;flex:none;align-items:center;gap:12px 24px;display:flex}.logo{background:url(/logo.png) no-repeat;flex:none;width:92px;height:35px;padding:3px 0 0 7px;display:inline-flex}.logo a{width:40px;height:30px;display:block}.logo a+a{width:30px}.presets{flex-wrap:wrap;flex:1;justify-content:center;gap:4px 10px;display:flex}.preset,.actions button{color:var(--dim);transition:color .15s}.preset:hover,.actions button:hover,.preset[aria-pressed=true]{color:var(--ink)}.preset.own{font-style:italic}.actions{flex:none;gap:12px;display:flex}.drawer{flex:none;grid-template-rows:0fr;transition:grid-template-rows .45s;display:grid}.creating .drawer{grid-template-rows:1fr}.create{overscroll-behavior:contain;width:100%;max-width:1100px;min-height:0;max-height:55dvh;padding:0 var(--gutter);opacity:0;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px 40px;margin:0 auto;transition:opacity .3s,padding .45s;display:grid;overflow-y:auto}.creating .create{opacity:1;padding-block:8px 24px}fieldset{border:0;min-width:0;margin:0;padding:0}legend{letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:10px;padding:0;font-size:11px}label,.label{color:var(--dim);justify-content:space-between;gap:8px;font-size:11px;display:flex}output{color:#777;font-variant-numeric:tabular-nums}.modes{grid-template-columns:repeat(5,1fr);gap:4px;margin:6px 0 14px;display:grid}.mode{aspect-ratio:1;border:1px solid var(--faint);color:var(--dim);place-items:center;transition:color .15s,border-color .15s;display:grid}.mode:hover{color:#999}.mode[aria-checked=true]{color:var(--ink);border-color:var(--ink)}.mode svg{width:70%;height:70%;overflow:visible}.control[hidden]{display:none}.stops{flex-wrap:wrap;align-items:center;gap:6px 10px;margin:6px 0 14px;display:flex}.stop{align-items:center;gap:2px;display:inline-flex}.stops input[type=color]{appearance:none;border:1px solid var(--faint);cursor:pointer;background:0 0;width:18px;height:18px;padding:0}.stops input[type=color]::-webkit-color-swatch-wrapper{padding:0}.stops input[type=color]::-webkit-color-swatch{border:0}.stops input[type=color]::-moz-color-swatch{border:0}.stops button{color:var(--dim);padding:2px;font-size:12px;line-height:1}.stops button:hover{color:var(--ink)}.stops .pipette{padding:2px;display:inline-flex}.stops .add{font-size:15px}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:20px;margin:2px 0 14px;display:block}input[type=range]::-webkit-slider-runnable-track{background:var(--faint);height:1px}input[type=range]::-moz-range-track{background:var(--faint);height:1px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--ink);border:0;border-radius:0;width:9px;height:9px;margin-top:-4px}input[type=range]::-moz-range-thumb{background:var(--ink);border:0;border-radius:0;width:9px;height:9px}input[type=range]:focus-visible{outline:none}input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--night), 0 0 0 4px var(--ink)}.toast{background:var(--ink);color:var(--night);opacity:0;pointer-events:none;padding:6px 12px;font-size:12px;transition:opacity .2s;position:fixed;bottom:24px;left:50%;translate:-50%}.toast.show{opacity:1}@media (width<=720px){.bar{justify-content:space-between}.presets{flex-basis:100%;order:3}}@media (prefers-reduced-motion:reduce){.drawer,.create{transition:none}}