@font-face{font-family:Courier Prime;src:url(/assets/CourierPrime-C5P7QY1D.woff2);font-weight:400;font-style:normal}@font-face{font-family:Courier Prime;src:url(/assets/CourierPrime-Italic-TTKqlMUk.woff2);font-weight:400;font-style:italic}@font-face{font-family:Inter;src:url(/assets/Inter-Regular-COLGFB3M.woff2);font-weight:400;font-style:normal}@font-face{font-family:Inter;src:url(/assets/Inter-Italic-Bm_w1qmz.woff2);font-weight:400;font-style:italic}@font-face{font-family:Inter;src:url(/assets/Inter-Bold-BOs3KVhN.woff2);font-weight:600;font-style:normal}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}:root{--font-body: "Courier Prime", monospace;--font-text: "Inter", -apple-system, Helvetica, sans-serif;--font-mono: var(--font-body);--color-bg: #fff;--color-mid-bg: #f1f1f1;--color-mid-fg: #000;--color-border: #999;--color-fg: #000;--radius: 5px}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;padding:0!important}body{padding:1rem;font-family:var(--font-body);color:var(--color-fg);background-color:var(--color-bg);line-height:1.2;max-width:1200px;margin:auto}h1{font-size:1.2rem;font-weight:400;font-variant:all-small-caps;font-style:italic;margin:0}h2{font-size:1.2em;font-weight:400;font-style:italic;line-height:1.1;margin-block-end:0}button,input,select{font:inherit}button{appearance:none;font-size:.8em;border:none;background:none;color:var(--color-mid-fg);border-block-end:1px solid var(--color-border);cursor:pointer}button:hover{font-style:italic}pre,code{font-family:var(--font-mono)}pre{padding:.2em .3em;background-color:var(--color-mid-bg);color:var(--color-mid-fg);margin-block:.5em}header{padding-block:.5rem 5rem;font-size:.7rem;font-style:italic}header a{color:inherit}.logo-link{position:absolute;top:1.5rem;right:1rem;text-decoration:none}.logo-link img{height:1.5rem}main{display:grid;grid-template-rows:auto auto auto;grid-template-columns:1fr;gap:4rem}@media(min-width:800px){main{grid-template-rows:1fr;grid-template-columns:auto 2fr 1fr;gap:2rem}}canvas{border-radius:var(--radius)}#palette-options label{padding:.5em 0;display:flex;align-items:center;gap:1em;border-radius:var(--radius);cursor:pointer;font-size:.8em}#palette-options label:before{content:"▶";visibility:hidden}#palette-options label:has(:checked):before{visibility:visible}#palette-options label:has(:focus-visible){outline:auto}.palette{--height: 15px;height:var(--height);display:flex;flex:1}.palette.display{--height: 20px;margin-block-end:1rem}.palette .chip{--color: transparent;flex:1;background-color:var(--color)}.editor{height:500px;flex:1}.cm-editor{height:100%;background-color:var(--color-mid-bg);color:var(--color-mid-fg);border:1px solid var(--color-border);border-radius:var(--radius)}.cm-editor.cm-focused{outline-style:solid}.cm-editor .cm-content{font-family:var(--font-mono);padding:.4rem}.instructions{font-size:.75rem}.instructions :first-child{margin-block-start:0}.instructions pre{white-space:pre-line}