:root{--accent:#6965db;--accent-soft:#e0dfff;--ui-bg:#fff;--ui-border:#e9ecef;--text:#1b1b1f;--text-muted:#868e96;--island-shadow:0 1px 3px #00000014, 0 6px 20px #00000012;--radius:12px;color:var(--text);font-family:Nunito,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}html,body{overscroll-behavior:none;-webkit-font-smoothing:antialiased;background:#fff;height:100%;margin:0;overflow:hidden}#canvas{touch-action:none;display:block;position:fixed;inset:0}.ui{pointer-events:none;grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr auto;align-items:start;gap:12px;padding:12px;display:grid;position:fixed;inset:0}.ui>*{pointer-events:auto}.island{background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--radius);box-shadow:var(--island-shadow);gap:2px;padding:6px;display:flex}.toolbar{flex-wrap:wrap;grid-area:1/2;justify-self:center}.actions{grid-area:1/3;justify-self:end;align-items:center;gap:4px}.panel{scrollbar-width:thin;flex-direction:column;grid-area:1/1/span 2;gap:12px;width:202px;max-height:calc(100vh - 110px);padding:12px;overflow-y:auto}.bottom-bar{pointer-events:none;grid-area:3/1;align-self:end;gap:8px;display:flex}.bottom-bar>*{pointer-events:auto}.hint{color:var(--text-muted);-webkit-user-select:none;user-select:none;pointer-events:none;background:#ffffffd9;border-radius:999px;grid-area:3/1/auto/-1;place-self:end center;padding:4px 10px;font-size:12px;transition:opacity .4s}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;display:inline-flex;position:relative}.tool-btn{width:36px;height:36px}.tool-btn:hover,.opt:hover{background:#f1f0ff}.tool-btn.active,.opt.active{background:var(--accent-soft);color:#3b37a8}.tool-btn .key{color:var(--text-muted);font-size:9px;position:absolute;bottom:1px;right:3px}.tool-btn.active .key{color:#6965db}button:disabled{opacity:.35;cursor:default}button svg{stroke:currentColor;stroke-width:1.6px;fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;width:19px;height:19px}.section>h3{letter-spacing:.02em;color:#495057;text-transform:none;margin:0 0 6px;font-size:11px;font-weight:600}.row{flex-wrap:wrap;align-items:center;gap:5px;display:flex}.swatch{cursor:pointer;border:1px solid #0000001f;border-radius:6px;width:23px;height:23px;padding:0}.swatch.active{outline:2px solid var(--accent);outline-offset:1px}.swatch.transparent{background-image:linear-gradient(45deg,#ddd 25%,#0000 25%),linear-gradient(-45deg,#ddd 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ddd 75%),linear-gradient(-45deg,#0000 75%,#ddd 75%);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px}.divider{background:var(--ui-border);align-self:center;width:1px;height:22px;margin:0 3px}.swatch-divider{background:var(--ui-border);align-self:stretch;width:1px;margin:0 2px}input[type=color]{cursor:pointer;background:0 0;border:1px solid #0000001f;border-radius:6px;width:23px;height:23px;padding:0}input[type=color]::-webkit-color-swatch-wrapper{padding:2px}input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}.opt{border-radius:8px;width:30px;height:30px}input[type=range]{width:100%;accent-color:var(--accent)}.text-btn{white-space:nowrap;border-radius:9px;gap:6px;padding:7px 12px;font-size:13px;font-weight:600}.text-btn.primary{background:var(--accent);color:#fff}.text-btn.primary:hover{background:#5b57cc}.text-btn.ghost:hover{background:#f1f0ff}.zoom-value{font-variant-numeric:tabular-nums;min-width:52px;font-size:12px;font-weight:600}#text-editor{resize:none;white-space:pre;transform-origin:50%;caret-color:var(--accent);background:0 0;border:none;outline:none;margin:0;padding:0;line-height:1.25;position:fixed;overflow:hidden}.toast{color:#fff;z-index:10;background:#1b1b1f;border-radius:10px;padding:9px 16px;font-size:13px;animation:.18s toast-in;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,6px)}}@media (width<=720px){.panel{grid-row:2;max-height:50vh}.hint{display:none}}.popover-wrap{display:flex;position:relative}.popover{background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--radius);box-shadow:var(--island-shadow);flex-direction:column;gap:2px;width:226px;padding:8px;display:flex;position:absolute;top:calc(100% + 8px);right:0}.popover label,.popover button{cursor:pointer;border-radius:8px;justify-content:flex-start;align-items:center;gap:9px;width:100%;padding:8px 9px;font-size:13px;display:flex}.popover label:hover,.popover button:hover{background:#f1f0ff}.popover input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;margin:0}.popover .danger{color:#e03131}.popover hr{border:none;border-top:1px solid var(--ui-border);margin:5px 0}.shortcut{color:var(--text-muted);margin-left:auto;font-size:11px}