*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color-scheme:light dark;background:#d9d8d1}@media(prefers-color-scheme:dark){:root{background:#0b1626}}body,#app{height:100dvh;overflow:hidden}:root{--table: #d9d8d1;--table-edge: #b5b3a8;--panel: #fbfaf6;--panel-inset: #f3f1e9;--paper: #faf6e8;--ink: #1a2230;--ink-soft: #4f5a6b;--ink-mute: #8a93a1;--rule: #c7c5ba;--rule-soft: #dedbcf;--rule-hard: #1a2230;--grid-major: rgba(40, 90, 160, .16);--grid-minor: rgba(40, 90, 160, .07);--grid-cell: 24px;--grid-subdivisions: 4;--accent: #1f4ea8;--accent-soft: #e6edf8;--accent-fore: #ffffff;--danger: #b14747;--disabled: #b5b9c0;--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace}@media(prefers-color-scheme:dark){:root{--table: #0b1626;--table-edge: #050a14;--panel: #0f1b2e;--panel-inset: #0a1525;--paper: #0f3661;--ink: #eaf2ff;--ink-soft: #9fb5d2;--ink-mute: #6c83a3;--rule: #1d2f4a;--rule-soft: #15263f;--rule-hard: #eaf2ff;--grid-major: rgba(225, 240, 255, .28);--grid-minor: rgba(225, 240, 255, .1);--accent: #6ea8ff;--accent-soft: rgba(110, 168, 255, .18);--accent-fore: #0b1626;--danger: #ff8a8a;--disabled: #475569}}.sketchpad{display:flex;flex-direction:column;height:100dvh;overflow:hidden;background:var(--table);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.toolbar{display:flex;align-items:stretch;gap:0;padding:0;background:var(--panel);border-bottom:1px solid var(--ink);box-shadow:0 1px 0 var(--panel),0 2px 0 var(--ink-mute),0 3px 6px #00000014;flex-shrink:0;flex-wrap:wrap;-webkit-user-select:none;user-select:none;min-height:3.25rem;position:relative;z-index:2}.toolbar:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--rule-soft)}.toolbar-section{display:flex;align-items:center;gap:.375rem;padding:.5rem .75rem;border-right:1px solid var(--rule-soft)}.toolbar-section.no-border{border-right:none;margin-left:auto}.tool-btn,.action-btn{display:inline-flex;align-items:center;justify-content:center;height:2rem;padding:0 .75rem;background:var(--panel);color:var(--ink);border:1px solid var(--ink-mute);border-radius:2px;cursor:pointer;font-family:var(--font-mono);font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;white-space:nowrap;transition:background 80ms ease,border-color 80ms ease,color 80ms ease,box-shadow 80ms ease,transform 80ms ease}.tool-btn:hover,.action-btn:hover:not(:disabled){background:var(--panel-inset);border-color:var(--ink-soft);color:var(--ink)}.tool-btn:active:not(:disabled),.action-btn:active:not(:disabled){transform:translateY(1px)}.tool-btn:focus-visible,.action-btn:focus-visible,.custom-color-btn:focus-visible,.swatch:focus-visible{outline:none;box-shadow:0 0 0 2px var(--panel),0 0 0 3.5px var(--accent)}.tool-btn.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}.action-btn:disabled{color:var(--disabled);border-color:var(--rule-soft);background:var(--panel);cursor:not-allowed}.action-btn.primary{background:var(--accent);color:var(--accent-fore);border-color:var(--accent)}.action-btn.primary:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:var(--paper)}.swatches{gap:.3rem;flex-wrap:wrap}.swatch{width:1.125rem;height:1.125rem;border-radius:1px;border:1px solid var(--ink-mute);cursor:pointer;background-color:var(--swatch-color);padding:0;flex-shrink:0;box-shadow:0 1px #00000014;transition:transform 80ms ease,box-shadow 80ms ease,border-color 80ms ease}.swatch:hover{transform:translateY(-1px);border-color:var(--ink)}.swatch.active{border-color:var(--ink);box-shadow:0 0 0 2px var(--panel),0 0 0 3px var(--ink)}.custom-color-btn{display:inline-flex;align-items:center;gap:.5rem;height:2rem;padding:0 .625rem;background:var(--panel);color:var(--ink);border:1px solid var(--ink-mute);border-radius:2px;cursor:pointer;font-family:var(--font-mono);font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;white-space:nowrap;transition:background 80ms ease,border-color 80ms ease,box-shadow 80ms ease}.custom-color-btn:hover{background:var(--panel-inset);border-color:var(--ink-soft)}.custom-color-btn.active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.custom-color-swatch{width:.75rem;height:.75rem;border-radius:1px;border:1px solid var(--ink-mute);flex-shrink:0}.custom-color-input-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.size-section{gap:.625rem}.size-preview{display:block;border-radius:50%;background:var(--ink);flex-shrink:0;transition:width 80ms ease,height 80ms ease;box-shadow:0 0 0 1px var(--ink-mute)}.size-slider{width:96px;cursor:pointer;accent-color:var(--ink)}.show-toolbar-btn{position:absolute;top:12px;right:12px;z-index:5;display:inline-flex;align-items:center;gap:.5rem;height:2.25rem;padding:0 .875rem;background:var(--panel);color:var(--ink);border:1px solid var(--ink);border-radius:2px;cursor:pointer;font-family:var(--font-mono);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;box-shadow:0 1px 0 var(--panel-inset),0 2px 4px #0000001f;transition:background 80ms ease,color 80ms ease,transform 80ms ease}.show-toolbar-btn:hover{background:var(--ink);color:var(--paper)}.show-toolbar-btn:active{transform:translateY(1px)}.show-toolbar-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--accent)}.show-toolbar-icon{width:.875rem;height:.875rem;display:inline-block;background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);background-size:100% 2px;background-position:0 0,0 50%,0 100%;background-repeat:no-repeat}.sketchpad.toolbar-collapsed .canvas-area{height:100dvh}.toolbar-label{font-family:var(--font-mono);font-size:.625rem;font-weight:700;color:var(--ink-soft);white-space:nowrap;letter-spacing:.18em;text-transform:uppercase;padding-right:.125rem}.canvas-area{flex:1;overflow:hidden;position:relative;background:var(--paper);box-shadow:inset 0 1px #ffffff80,inset 0 0 0 1px var(--rule-soft),0 1px #0000000a}.canvas-area:before,.canvas-area:after{content:"";position:absolute;pointer-events:none;width:14px;height:14px;z-index:1}.canvas-area:before{top:10px;left:10px;border-top:1.5px solid var(--rule-hard);border-left:1.5px solid var(--rule-hard)}.canvas-area:after{bottom:10px;right:10px;border-bottom:1.5px solid var(--rule-hard);border-right:1.5px solid var(--rule-hard)}.canvas-area.background-none{background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.55),transparent 60%),var(--paper)}.canvas-area.background-grid{background-color:var(--paper);background-image:linear-gradient(var(--grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),linear-gradient(var(--grid-minor) 1px,transparent 1px),linear-gradient(90deg,var(--grid-minor) 1px,transparent 1px);background-size:var(--grid-cell) var(--grid-cell),var(--grid-cell) var(--grid-cell),calc(var(--grid-cell) / var(--grid-subdivisions)) calc(var(--grid-cell) / var(--grid-subdivisions)),calc(var(--grid-cell) / var(--grid-subdivisions)) calc(var(--grid-cell) / var(--grid-subdivisions));background-position:0 0,0 0,0 0,0 0}.canvas-area.background-ruled{background-color:var(--paper);background-image:linear-gradient(90deg,transparent 47px,var(--grid-major) 47px,var(--grid-major) 48px,transparent 48px),linear-gradient(var(--grid-minor) 1px,transparent 1px);background-size:100% 100%,100% 28px;background-position:0 0,0 4px}.drawing-canvas{display:block;position:absolute;inset:0;width:100%;height:100%}.drawing-canvas.tool-pen,.drawing-canvas.tool-line,.drawing-canvas.tool-rectangle,.drawing-canvas.tool-circle{cursor:crosshair}.drawing-canvas.tool-eraser{cursor:cell}@media(max-width:600px){.toolbar{min-height:0}.toolbar-section{padding:.375rem .5rem;gap:.25rem}.toolbar-section.no-border{margin-left:0}.tool-btn,.action-btn,.custom-color-btn{height:1.75rem;padding:0 .5rem;font-size:.625rem;letter-spacing:.1em}.size-section{flex:1 1 100%;border-right:none;border-top:1px solid var(--rule-soft);padding:.5rem .75rem}.size-slider{flex:1 1 auto;width:auto;min-width:0;height:1.75rem}.toolbar-label{font-size:.5625rem}.swatch{width:1rem;height:1rem}.canvas-area:before,.canvas-area:after{width:10px;height:10px}.canvas-area:before{top:6px;left:6px}.canvas-area:after{bottom:6px;right:6px}.show-toolbar-btn{top:8px;right:8px;height:2rem;padding:0 .625rem;font-size:.625rem}}