:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--accent:#2456c8;--bg:var(--lightningcss-light,#e9e7e2)var(--lightningcss-dark,#1c1b19);--ink:var(--lightningcss-light,#222)var(--lightningcss-dark,#e8e5df);--panel:var(--lightningcss-light,#fff)var(--lightningcss-dark,#2b2a27);--line:var(--lightningcss-light,#bcb9b2)var(--lightningcss-dark,#504d48);--on-accent:#fff;--shadow:var(--lightningcss-light,#0000002e)var(--lightningcss-dark,#0000008c)}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}html,body{background:var(--bg);height:100%;color:var(--ink);margin:0;font:14px system-ui,-apple-system,sans-serif}.surface{flex-direction:column;height:100vh;display:flex}.bar{align-items:center;gap:8px;padding:8px 12px;display:flex}.bar button{font:inherit;border:1px solid var(--line);background:var(--panel);color:inherit;cursor:pointer;border-radius:6px;padding:4px 12px}.bar .spacer{flex:1}.body{flex:1;min-height:0;display:flex}.rail{flex-direction:column;gap:6px;padding:8px;display:flex}.rail button{border:1px solid var(--line);background:var(--panel);width:36px;height:36px;color:var(--ink);cursor:pointer;border-radius:8px;place-items:center;padding:0;display:grid}.rail button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.screen{align-items:center;gap:8px;margin-left:16px;display:flex}.screen button{font:inherit;border:1px solid var(--line);background:var(--panel);color:inherit;cursor:pointer;border-radius:6px;padding:4px 12px}.screen button[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.swatches{gap:6px;display:flex}.swatch{border:2px solid var(--line);cursor:pointer;border-radius:50%;width:22px;height:22px;padding:0}.screen .swatch{border-radius:50%;padding:0}.screen .swatch[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent)}.field{align-items:center;gap:6px;display:flex}.field input{width:4em;font:inherit;border:1px solid var(--line);background:var(--panel);color:inherit;border-radius:6px;padding:3px 6px}.frame{flex:1;place-items:center;min-height:0;display:grid;overflow:hidden}.page{box-shadow:0 2px 14px var(--shadow);position:relative}.page canvas{display:block;position:absolute;inset:0}.page canvas[data-layer=ink]{touch-action:none;cursor:crosshair}.note{margin:48px}.bar .note{margin:0 0 0 8px}