:root{--bg:#e9eaed;--fg:#1d1f23;--muted:#6b7078;--panel:#fff;--border:#cfd2d8;--accent:#2f6fed;color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px}@media (prefers-color-scheme:dark){:root{--bg:#1b1c1f;--fg:#e6e7ea;--muted:#8d929b;--panel:#2a2c31;--border:#3d4047;--accent:#6c9bff}}[hidden]{display:none!important}html,body{background:var(--bg);-webkit-user-select:none;user-select:none;height:100%;margin:0;overflow:hidden}#stage{position:fixed;inset:0}#stage.panning{cursor:grab}#stage.panning.dragging{cursor:grabbing}#drop-overlay{z-index:10;pointer-events:none;opacity:0;place-items:center;transition:opacity .12s;display:grid;position:fixed;inset:0}body.drop-target #drop-overlay{opacity:1}#drop-overlay:before{content:"";background:color-mix(in srgb, var(--bg) 40%, transparent);position:absolute;inset:0}body.drop-target :is(#stage,#toolbar,#stylebar,#layers,#zoom,#status){filter:blur(6px)}#drop-overlay div{border:1px solid var(--border);background:var(--panel);border-radius:16px;flex-direction:column;align-items:center;gap:6px;padding:28px 44px;display:flex;position:relative;box-shadow:0 12px 40px #00000040}#drop-overlay svg{color:var(--accent)}#drop-overlay strong{font-size:18px}#drop-overlay span{color:var(--muted)}#empty{pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;font-size:18px;display:flex;position:fixed;inset:0}#empty p{margin:0}#empty .sub{color:var(--muted);font-size:14px}kbd{border:1px solid var(--border);background:var(--panel);font:inherit;border-bottom-width:2px;border-radius:4px;padding:1px 6px;font-size:.85em}#status,#zoom{border:1px solid var(--border);background:var(--panel);font-variant-numeric:tabular-nums;border-radius:6px;padding:4px 10px;font-size:12px;position:fixed;bottom:12px}#zoom{color:var(--muted);align-items:center;gap:6px;padding:3px 10px 3px 3px;display:flex;right:12px}#zoom button{width:24px;height:24px;color:var(--fg);cursor:pointer;background:0 0;border:0;border-radius:4px;place-items:center;padding:0;display:grid}#zoom button:hover{background:color-mix(in srgb, var(--fg) 10%, transparent)}#status{left:50%;transform:translate(-50%)}#toolbar{border:1px solid var(--border);background:var(--panel);border-radius:10px;gap:2px;padding:4px;display:flex;position:fixed;top:12px;left:50%;transform:translate(-50%);box-shadow:0 2px 10px #00000026}#toolbar button{width:34px;height:34px;color:var(--fg);cursor:pointer;background:0 0;border:0;border-radius:7px;place-items:center;padding:0;display:grid}#toolbar button:hover{background:color-mix(in srgb, var(--fg) 10%, transparent)}#toolbar hr{background:var(--border);border:0;width:1px;margin:4px 3px}#toolbar button.active{background:var(--accent);color:#fff}.menu{position:relative}.menu-items{flex-direction:column;padding-top:10px;display:none;position:absolute;top:100%;right:-4px}.menu:hover:not(.dismissed) .menu-items,.menu.open .menu-items{display:flex}.menu-items:before{content:"";z-index:-1;border:1px solid var(--border);background:var(--panel);border-radius:10px;position:absolute;inset:10px 0 0;box-shadow:0 4px 16px #0003}#toolbar .menu-items button{width:auto;height:30px;font:inherit;white-space:nowrap;justify-content:space-between;gap:24px;margin:0 4px;padding:0 10px;font-size:13px;display:flex}#toolbar .menu-items button:first-child{margin-top:4px}#toolbar .menu-items button:last-child{margin-bottom:4px}#toolbar .menu-items hr{width:auto;height:1px;margin:4px 0}.menu-items kbd{color:var(--muted);background:0 0;border:0}#toolbar button.toggle{color:var(--muted);opacity:.6}#toolbar button.toggle.active{color:var(--accent);opacity:1;background:0 0}#stylebar{border:1px solid var(--border);background:var(--panel);white-space:nowrap;border-radius:10px;align-items:center;gap:12px;padding:6px 10px;font-size:12px;display:flex;position:fixed;top:64px;left:50%;transform:translate(-50%);box-shadow:0 2px 10px #00000026}#stylebar label{color:var(--muted);align-items:center;gap:6px;display:flex}#stylebar input[type=range]{width:90px;accent-color:var(--accent)}#stylebar select,#stylebar input[type=number]{border:1px solid var(--border);background:var(--bg);height:26px;color:var(--fg);font:inherit;border-radius:6px}#stylebar input[type=number]{width:56px;padding:0 4px}.icon-choice{border:1px solid var(--border);color:var(--fg);background:0 0;border-radius:6px;padding:0;display:flex;overflow:hidden}.icon-choice button,button.icon-choice{cursor:pointer;place-items:center;width:36px;height:26px;display:grid}.icon-choice button{color:inherit;background:0 0;border:0;padding:0}.icon-choice button:hover,button.icon-choice:hover{background:color-mix(in srgb, var(--fg) 10%, transparent)}.icon-choice button.active,button.icon-choice.active{background:var(--accent);color:#fff}.well{border:1px solid var(--border);height:26px;color:var(--fg);font:inherit;cursor:pointer;background:0 0;border-radius:6px;align-items:center;gap:6px;padding:0 8px 0 4px;display:flex}.swatch{border:1px solid var(--border);background:var(--swatch);border-radius:50%;width:18px;height:18px;padding:0}.swatch.none{background:linear-gradient(to top right,#0000 45%,#e5383b 45% 55%,#0000 55%)}.palette{border:1px solid var(--border);background:var(--panel);border-radius:10px;align-items:center;gap:6px;padding:8px;display:flex;position:fixed;box-shadow:0 4px 16px #0003}.palette .swatch{cursor:pointer;width:22px;height:22px}.palette input[type=color]{cursor:pointer;background:0 0;border:0;width:28px;height:24px;padding:0}.text-editor{outline:1px dashed var(--accent);outline-offset:3px;resize:none;white-space:pre;transform-origin:0 0;background:0 0;border:0;margin:0;padding:0;position:fixed;overflow:hidden}.text-editor.boxed{outline-offset:0;background:var(--panel);text-align:center;border-radius:4px;outline-style:solid;padding:2px 6px}dialog.choice{border:1px solid var(--border);background:var(--panel);max-width:420px;color:var(--fg);-webkit-user-select:none;user-select:none;border-radius:12px;padding:20px;box-shadow:0 12px 40px #00000059}dialog.choice::backdrop{background:#00000059}dialog.choice p{margin:0 0 16px;font-size:15px}dialog.choice div{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}dialog.choice button{border:1px solid var(--border);height:32px;color:var(--fg);font:inherit;cursor:pointer;background:0 0;border-radius:7px;padding:0 14px}dialog.choice button.primary{border-color:var(--accent);background:var(--accent);color:#fff}#layers{border:1px solid var(--border);background:var(--panel);border-radius:10px;flex-direction:column;width:230px;max-height:calc(100vh - 176px);padding:10px 6px 8px;font-size:13px;display:flex;position:fixed;top:116px;right:12px;box-shadow:0 2px 10px #00000026}#layers h2{margin:0 6px 8px;font-size:13px;font-weight:600}#layers ol{flex:1;margin:0;padding:0;list-style:none;overflow:hidden auto}#layers li{border-top:2px solid #0000;border-bottom:2px solid #0000}#layers li.drop-above{border-top-color:var(--accent)}#layers li.drop-below{border-bottom-color:var(--accent)}#layers .layer{box-sizing:border-box;width:100%;height:28px;color:var(--fg);font:inherit;text-align:left;cursor:grab;-webkit-user-select:none;user-select:none;background:0 0;border:0;border-radius:6px;align-items:center;gap:8px;padding:0 8px;display:flex}#layers .layer:hover{background:color-mix(in srgb, var(--fg) 8%, transparent)}#layers .layer.selected{background:color-mix(in srgb, var(--accent) 22%, transparent)}#layers .layer .swatch{flex:none;width:12px;height:12px}#layers .label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#layers li.none{color:var(--muted);padding:6px 8px}body.drop-target #empty{visibility:hidden}