@font-face{font-family:DM Sans;src:url(/assets/DMSans-Variable-C28UsNIo.woff2) format("woff2");font-style:normal;font-weight:100 1000;font-display:swap}:root{font-family:DM Sans,sans-serif;font-synthesis:none;color:#111;background:#fff;--line: #111;--left-accent: #4c74ee;--right-accent: #00b807;--cell: #fff;--brush-row: 144px;--square: 44px;--brush-column: 240px;--control-column: 272px}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,select{font:inherit;color:inherit;border-radius:0}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:1px solid var(--line);outline-offset:-4px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}.studio-grid{--brush-width: var(--brush-column);--control-width: var(--control-column);display:grid;grid-template-columns:var(--square) var(--brush-width) minmax(0,1fr) var(--control-width) var(--square);height:100dvh;border:1px solid var(--line);border-image:linear-gradient(to right,var(--left-accent) 50%,var(--right-accent) 50%) 1;background:#fff}.studio-grid.panel-collapsed{--control-width: 0px}.studio-grid.brushes-collapsed{--brush-width: 0px}.brush-list,.brush-rail,.top-left,.bottom-left{--line: var(--left-accent);color:var(--line)}.settings-panel,.panel-rail,.top-right,.bottom-right{--line: var(--right-accent);color:var(--line)}.brush-list{grid-column:2;grid-row:1;display:grid;grid-auto-rows:var(--brush-row);align-content:start;min-width:0;min-height:0;overflow:auto;background:var(--cell);border-right:1px solid var(--line);scrollbar-width:none}.brush-list::-webkit-scrollbar{display:none}.brush-stroke{position:relative;display:grid;place-items:center;width:100%;min-width:0;min-height:0;padding:20px;border:0;border-bottom:1px solid var(--line);background:var(--cell);overflow:hidden}.brush-empty{border-bottom:1px solid var(--line);background:#fff;pointer-events:none}.brush-preview{display:block;width:100%;height:auto;object-fit:contain;opacity:1;pointer-events:none;transform:none}.brush-stroke:hover,.brush-stroke:focus-visible{outline:none;z-index:1}.brush-stroke:hover:after,.brush-stroke:focus-visible:after{content:"";position:absolute;inset:0 0 -1px;pointer-events:none;box-shadow:inset 0 0 0 1.5px var(--line)}.brush-stroke.selected{background:#fff;outline:2px solid var(--line);outline-offset:-1px;z-index:1}.brush-stroke.selected:after{display:none}.canvas-section{grid-column:3;grid-row:1;position:relative;min-width:0;min-height:0;margin-block:-1px;border-block:1px solid #b8b8b8;overflow:visible;background:#fff}.canvas-surround{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;scrollbar-width:none;padding:0;background:#fff}.canvas-surround::-webkit-scrollbar{display:none}.artboard{flex-shrink:0;position:relative;padding:0;width:var(--display-width, 1200px);height:var(--display-height, 840px);background:#fff}.fixed-aspect .artboard{outline:1px solid var(--line)}#canvas-host{width:100%;height:100%}#canvas-host .p5Canvas{display:block!important;width:100%!important;height:100%!important;touch-action:none;cursor:none}#canvas-host .p5Canvas:focus{outline:none}#canvas-host .p5Canvas:focus-visible{outline:1px solid #111;outline-offset:-1px}.corner-tools{position:absolute;z-index:5;display:flex;background:#fff}.top-left{top:-1px;left:0}.top-right{top:-1px;right:0}.bottom-left{bottom:-1px;left:0}.bottom-right{bottom:-1px;right:0}.icon-button{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--square);height:var(--square);padding:13px;background:#fff;border:1px solid var(--line);font-size:16px;line-height:1}.corner-tools .icon-button+.icon-button{border-left:0}.icon-button svg{display:block;width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:square;stroke-linejoin:miter}.icon-button:hover:not(:disabled){background:var(--line);color:#fff}.icon-button.active{background:var(--line);border-color:var(--line);color:#fff}.icon-button:disabled{color:var(--line)}.icon-button:disabled svg{opacity:.35}.aspect-control{position:relative;width:var(--square);height:var(--square);border:1px solid var(--line);border-left:0}.aspect-control select{appearance:none;-webkit-appearance:none;width:100%;height:100%;padding:0 0 7px;border:0;background:#fff;text-align:center;text-align-last:center;font-size:10px;font-weight:700;cursor:pointer}.aspect-control:after{content:"";position:absolute;bottom:7px;left:calc(50% - 3px);width:6px;height:6px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg);pointer-events:none}.top-left .icon-button:first-child{border-left:0}.top-right .icon-button:last-child,.bottom-right .icon-button:last-child{border-right:0}.settings-panel{grid-column:4;grid-row:1;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:auto;background:#fff;border-left:1px solid var(--line);scrollbar-width:thin;scrollbar-color:var(--line) #fff}.panel-rail{grid-column:5;grid-row:1;z-index:25;border-left:1px solid var(--line);background:#fff}.brush-rail{--line: var(--left-accent);grid-column:1;color:var(--line);border-left:0;border-right:1px solid var(--line)}.panel-toggle{width:100%;height:auto;min-height:var(--square);flex-direction:column;gap:18px;padding:14px 0 18px;border:0;border-bottom:1px solid var(--line)}.panel-toggle span{writing-mode:vertical-rl;font-size:10px;font-weight:400;letter-spacing:.15em;text-transform:uppercase}.panel-toggle[aria-expanded=false] svg{transform:rotate(180deg)}.brush-rail .panel-toggle[aria-expanded=true] svg{transform:rotate(180deg)}.brush-rail .panel-toggle[aria-expanded=false] svg{transform:none}.panel-backdrop{display:none}.panel-heading{display:flex;align-items:center;justify-content:space-between;min-height:calc(var(--square) - 1px);border-bottom:1px solid var(--line);padding:0 24px;flex-shrink:0}.panel-heading h1{margin:0;font-size:12px;font-weight:400;letter-spacing:.3px;text-transform:uppercase}.sliders{display:grid}.slider-control{padding:23px 24px 18px;border-bottom:1px solid var(--line)}.slider-caption{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px}.slider-label{font-size:11px;line-height:1.5}.slider-value{font-size:10px;color:inherit}.line-slider{appearance:none;-webkit-appearance:none;display:block;width:100%;height:20px;margin:0;padding:0;background:transparent;cursor:ew-resize;touch-action:pan-y}.line-slider::-webkit-slider-runnable-track{height:1px;background:var(--line)}.line-slider::-moz-range-track{height:1px;background:var(--line)}.line-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;box-sizing:border-box;width:14px;height:18px;margin-top:-8.5px;border:1px solid var(--line);border-radius:0;background:#fff}.line-slider::-moz-range-thumb{box-sizing:border-box;width:14px;height:18px;border:1px solid var(--line);border-radius:0;background:#fff}.control{padding:23px 24px;border-bottom:1px solid var(--line)}.control-heading{margin-bottom:16px;font-size:11px}.palette{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.color-button{position:relative;width:100%;aspect-ratio:1;padding:0;border:1px solid var(--line);background:var(--color)}.color-button[aria-pressed=true]{outline:1px solid var(--line);outline-offset:3px}.color-button.mix{background:#fff;border-color:var(--line)}.color-button.mix:before{content:"×";position:absolute;inset:0;display:grid;place-items:center;font-size:18px;color:inherit}.palette-value{font-size:10px;color:inherit;margin:12px 0 0}.select-control{width:100%;padding:9px;border:1px solid var(--line);background:#fff;font-size:11px}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;cursor:pointer}.toggle-row input{appearance:none;-webkit-appearance:none;width:14px;height:14px;margin:0;border:1px solid var(--line);background:#fff;cursor:pointer}.toggle-row input:checked{background:var(--line);border-color:var(--line)}.panel-actions{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}.panel-actions button{min-height:48px;padding:8px;font-size:10px;background:#fff;border:0}.panel-actions button+button{border-left:1px solid var(--line)}.panel-actions button:hover{background:var(--line);color:#fff}.brush-cursor{position:fixed;z-index:60;pointer-events:none;width:5px;height:5px;border-radius:50%;background:#111;transform:translate(-50%,-50%)}.brush-cursor.eraser{background:#fff4;border:1px solid #555}.toast{position:fixed;z-index:80;bottom:60px;left:50%;transform:translate(-50%);padding:12px 16px;background:#fff;border:1px solid #111;font-size:11px;max-width:calc(100vw - 32px)}dialog{width:min(370px,90vw);padding:24px;border:1px solid #111;background:#fff;color:#111}dialog::backdrop{background:#fffa}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialog-heading h2{font-size:12px;font-weight:400;text-transform:uppercase;margin:0}.dialog-heading .icon-button{width:28px;height:28px;padding:7px;border:0}dialog dl{display:grid;grid-template-columns:1fr auto;gap:14px;font-size:11px;margin:24px 0}dialog dd{margin:0;color:#111}dialog p{font-size:10px;line-height:1.7;color:#111}@media(min-width:1700px){:root{--brush-column: 280px;--brush-row: 160px;--control-column: 280px}}@media(max-width:1100px){:root{--brush-column: 176px;--brush-row: 112px;--control-column: 240px;--square: 40px}.brush-stroke{padding:14px}.panel-heading{padding:0 20px}.slider-control,.control{padding-left:20px;padding-right:20px}.palette{gap:8px}}@media(max-width:820px){:root{--brush-column: 0px;--brush-drawer: 132px;--brush-row: 88px;--control-column: 0px}.brush-list{position:absolute;z-index:20;top:1px;left:calc(var(--square) + 1px);bottom:1px;width:var(--brush-drawer);max-width:calc(100vw - var(--square) * 2 - 2px);border-right:1px solid var(--line)}.panel-backdrop{display:block;position:absolute;z-index:15;inset:1px calc(var(--square) + 1px) 1px calc(var(--square) + var(--brush-width) + 1px);background:#fff9;touch-action:none}.brush-backdrop{right:calc(var(--square) + 1px);left:calc(var(--square) + var(--brush-drawer) + 1px)}.settings-panel{position:absolute;z-index:20;top:1px;right:calc(var(--square) + 1px);bottom:1px;width:264px;max-width:calc(100vw - var(--brush-width) - var(--square) * 2 - 2px)}.brush-stroke{padding:8px}}@media(max-width:500px){:root{--brush-column: 0px;--brush-drawer: 120px;--brush-row: 72px;--square: 36px}.brush-stroke{padding:5px}.icon-button{padding:10px}.panel-toggle{padding:11px 0 18px}.aspect-control select{font-size:9px}.icon-button svg{width:14px;height:14px}.settings-panel{width:250px}.palette{gap:9px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}