*,*:before,*:after{box-sizing:border-box}:root{--hue: 0;--sat: 0%;--padding-l: 2.2em;--padding: 1.2em;--padding-m: .5em;--padding-s: .3em;--font-l: 1.3em;--font-m: 1.2em;--font: 1em;--font-s: .8em;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--toolbox-opacity: 20%;--surface-h: 65;--surface-l: 10%;--surface-c: .1;--surface-bg: oklch(var(--surface-l) var(--surface-c) var(--surface-h));--surface-bg-high: oklch(calc(var(--surface-l) + 20%) var(--surface-c) var(--surface-h));--surface-bg-mid: oklch(calc(var(--surface-l) + 30%) var(--surface-c) var(--surface-h) / var(--toolbox-opacity));--surface-bg-low: oklch(calc(var(--surface-l) + 15%) var(--surface-c) var(--surface-h) / var(--toolbox-opacity));--surface-line: oklch(calc(var(--surface-l) + 30%) var(--surface-c) var(--surface-h) / var(--toolbox-opacity));--ix-l-on: 80%;--ix-l-hover: 90%;--ix-text-on: oklch(var(--ix-l-on) var(--surface-c) var(--surface-h));--ix-text: color-mix(in srgb, var(--ix-text-on) 50%, transparent);--ix-text-hover: oklch(var(--ix-l-hover) var(--surface-c) var(--surface-h));--text: oklch(60% var(--surface-c) var(--surface-h));--ix-line-on:oklch(var(--ix-l-on) var(--surface-c) var(--surface-h));--ix-line: color-mix(in srgb, var(--ix-line-on) 50%, transparent);--ix-line-hover: oklch(var(--ix-l-hover) var(--surface-c) var(--surface-h));--mono-bg: black;--toolbox-bg: color-mix(in srgb, var(--surface-bg) var(--toolbox-opacity), transparent)}body.light{--mono-bg:white;--surface-l: 100%;--ix-l-on: 40%;--ix-l-hover: 0%;--surface-bg: oklch(var(--surface-l) var(--surface-c) var(--surface-h));--ix-text-on: oklch(var(--ix-l-on) var(--surface-c) var(--surface-h));--ix-text: color-mix(in srgb, var(--ix-text-on) 50%, transparent);--ix-text-hover: oklch(var(--ix-l-hover) var(--surface-c) var(--surface-h));--text: oklch(50% var(--surface-c) var(--surface-h));--ix-line-on:oklch(var(--ix-l-on) var(--surface-c) var(--surface-h));--ix-line: color-mix(in srgb, var(--ix-line-on) 50%, transparent);--ix-line-hover: oklch(var(--ix-l-hover) var(--surface-c) var(--surface-h))}html,body,canvas{margin:0;padding:0;overflow:hidden;-webkit-touch-callout:none;outline:none}html,body{height:100%;width:100%}body{background-color:var(--bg);color:var(--text);font-size:14px;font-family:Overpass Mono,monospace}.no-select{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.no-select:focus{outline:none!important}canvas{touch-action:none;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}a:link,a:visited{color:var(--fg)}.hidden{display:none}#overlay{position:absolute;top:0;left:0;z-index:1;pointer-events:none}#canvas,#buffer{position:absolute;z-index:0}#buffer{display:none;z-index:0}#canvas{z-index:0}dialog{background-color:var(--bg-low);color:var(--fg);border:.3em solid var(--fg-low);border-radius:var(--padding-m);margin-top:var(--padding-l);max-height:80vh;overflow-y:auto}dialog::backdrop{background-color:var(--bg)}dialog>section{margin:var(--padding-l)}#swatches-editor{width:50vw}.byline{margin-top:var(--padding);font-size:.8em;opacity:.6}.toast{padding:var(--padding);user-select:none;display:flex;gap:1em}.toast-icon{font-size:2em;width:1em;height:1em}.toast-icon.warning:before{content:"❗️"}.toast-icon.success:before{content:"✅"}.toast-icon.error:before{content:"❌"}.toast:last-child{margin:0}.toast h1{font-size:var(--font-m);margin:0}.toast.symbol-success{background-color:#dbf5d6}.toast.symbol-warning{background-color:#f5e7d6}.toast.symbol-error{background-color:#f5d9d6}.toast:popover-open{position:absolute;inset:unset;right:5px;bottom:5px}#hero{display:flex;padding:var(--padding);user-select:none;-webkit-user-select:none;gap:var(--padding)}#hero>h1{padding:0;margin:0}#hero>.panel{display:block}#hero:hover>.panel{display:block}#contents{padding:0 var(--padding) var(--padding) var(--padding)}#smallbox{bottom:0;right:0;display:inline-block;position:absolute;z-index:100;padding:var(--padding-m)}body.toolbox-open #smallbox{display:none}#toolbox .form{display:grid;grid-template-columns:5em 1fr;grid-auto-flow:row;gap:var(--padding-m)}#toolbox{background:var(--toolbox-bg);padding-right:var(--padding-l);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);max-width:80vw;max-height:100%;transition:background 1s ease-out;overflow-y:auto;overflow-x:hidden;z-index:100;position:absolute;scrollbar-width:none;cursor:pointer}#toolbox:has(:focus),#toolbox:hover{--toolbox-opacity: 90%;--toolbox-bg: color-mix(in srgb, var(--surface-bg) var(--toolbox-opacity), transparent);transition:background .3s ease-in}#toolbox.collapsed{font-size:var(--font-s)}#toolbox .form{padding-top:var(--padding-s);padding-bottom:var(--padding-l)}#toolbox::-webkit-scrollbar{display:none}#toolbox details{margin:0;padding:0;user-select:none;-webkit-user-select:none}#toolbox summary{cursor:pointer;font-size:var(--font-l);margin-top:var(--padding-s);margin-bottom:var(--padding-m)}