*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;padding:0}body{overflow:hidden}.editor{--accent:#1a1a1a;--accent-soft:#f1f1f1;--panel-border:#e4e4e7;--ink:#3f3f46;--ink-muted:#a1a1aa;width:100vw;height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;position:relative;overflow:hidden}.panel{z-index:10;border:1px solid var(--panel-border);background:#fff;border-radius:12px;position:absolute;box-shadow:0 4px 16px #00000012,0 1px 2px #0000000a}.icon-btn,.tool-btn{color:var(--ink);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;display:flex;position:relative}.icon-btn:hover:not(:disabled),.tool-btn:hover:not(.active){background:#f4f4f5}.icon-btn:disabled{color:#d4d4d8;cursor:default}.tool-btn.active{background:var(--accent);color:#fff}[data-tip]{position:relative}[data-tip]:hover:after{content:attr(data-tip);white-space:nowrap;color:#fff;pointer-events:none;z-index:100;background:#27272a;border-radius:6px;padding:4px 8px;font-size:11px;font-weight:500;position:absolute}.tool-btn[data-tip]:hover:after{top:50%;left:calc(100% + 10px);transform:translateY(-50%)}.tip-bottom[data-tip]:hover:after{top:calc(100% + 8px);left:50%;transform:translate(-50%)}.tip-top[data-tip]:hover:after{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.topbar{align-items:center;gap:2px;padding:6px;display:flex;top:14px;left:50%;transform:translate(-50%)}.topbar .icon-btn{width:32px;height:32px}.wordmark{color:var(--accent);-webkit-user-select:none;user-select:none;flex-shrink:0;padding:4px 10px;font-family:Kranky,cursive;font-size:24px;line-height:1}.title-input{width:180px;color:var(--ink);background:0 0;border:1px solid #0000;border-radius:8px;padding:6px 8px;font-size:13.5px;font-weight:600}.title-input:hover{background:#f4f4f5}.title-input:focus{border-color:var(--accent);background:#fff;outline:none}.topbar-divider{background:var(--panel-border);flex-shrink:0;width:1px;height:20px;margin:0 6px}.share-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;align-items:center;gap:6px;margin-left:6px;padding:7px 14px;font-size:12.5px;font-weight:600;display:flex}.share-btn:hover{background:#333}.history-controls{gap:2px;padding:6px;display:flex;top:14px;right:14px}.history-controls .icon-btn{width:32px;height:32px}.toolbar{flex-direction:column;align-items:center;gap:2px;padding:6px;display:flex;top:50%;left:14px;transform:translateY(-50%)}.tool-btn{flex-shrink:0;width:34px;height:34px}.toolbar-group{flex-direction:column;align-items:center;gap:2px;display:flex}.toolbar-divider{background:var(--panel-border);flex-shrink:0;width:22px;height:1px;margin:4px 0}.toolbar-frames{position:relative}.frames-popover{z-index:20;width:190px;padding:6px;position:absolute;top:-6px;left:calc(100% + 14px)}.popover-title{text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted);padding:4px 8px 6px;font-size:10.5px;font-weight:600}.frame-item{width:100%;color:var(--ink);cursor:pointer;background:0 0;border:none;border-radius:8px;align-items:center;gap:8px;padding:7px 8px;font-size:12.5px;font-weight:500;display:flex}.frame-item:hover{background:#f4f4f5}.frame-item.active{background:var(--accent-soft);color:var(--accent)}.frame-item svg{flex-shrink:0}.frame-size{color:var(--ink-muted);font-variant-numeric:tabular-nums;margin-left:auto;font-size:11px}.shapes-popover{width:140px}.icons-popover{width:204px}.icon-search{border:1px solid var(--panel-border);width:calc(100% - 8px);color:var(--ink);box-sizing:border-box;border-radius:7px;outline:none;margin:4px 4px 6px;padding:6px 8px;font-size:12.5px}.icon-search:focus{border-color:var(--accent)}.icon-grid{grid-template-columns:repeat(6,1fr);gap:2px;max-height:248px;padding:0 2px 2px;display:grid;overflow-y:auto}.icon-empty,.icon-count{color:var(--ink-muted);padding:6px 8px 4px;font-size:11px}.icon-cell{width:30px;height:30px;color:var(--ink);cursor:pointer;background:0 0;border:none;border-radius:7px;justify-content:center;align-items:center;display:flex}.icon-cell:hover{background:#f4f4f5}.icon-cell.active{background:var(--accent);color:#fff}.selection-menu{z-index:15;align-items:center;gap:2px;padding:4px;display:flex;transform:translate(-50%)translateY(-100%)}.selection-menu .icon-btn{width:28px;height:28px}.selection-menu .icon-btn.menu-active{color:var(--accent);background:var(--accent-soft)}.selection-menu .icon-btn.danger:hover{color:#dc2626;background:#fef2f2}.menu-divider{background:var(--panel-border);flex-shrink:0;width:1px;height:18px;margin:0 3px}.font-size-label{text-align:center;min-width:26px;color:var(--ink);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;font-size:12.5px;font-weight:600}.color-popover{z-index:20;width:148px;padding:6px;top:calc(100% + 8px);left:50%;transform:translate(-50%)}.color-swatches{gap:8px;padding:2px 6px 4px;display:flex}.color-swatch{border:1px solid var(--panel-border);cursor:pointer;border-radius:50%;width:22px;height:22px;padding:0}.color-swatch:hover{transform:scale(1.08)}.color-swatch.active{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--accent)}.topbar-filemenu{position:relative}.topbar-filemenu .icon-btn.menu-active{background:var(--accent-soft);color:var(--accent)}.filemenu-popover{z-index:20;width:180px;padding:6px;position:absolute;top:calc(100% + 8px);left:0}.filemenu-item{width:100%;color:var(--ink);cursor:pointer;background:0 0;border:none;border-radius:8px;align-items:center;gap:9px;padding:7px 8px;font-size:12.5px;font-weight:500;display:flex}.filemenu-item:hover{background:#f4f4f5}.filemenu-item svg{color:var(--ink-muted);flex-shrink:0}.topbar-recents{position:relative}.topbar-recents .icon-btn{width:32px;height:32px}.topbar-recents .icon-btn.menu-active{background:var(--accent-soft);color:var(--accent)}.recents-popover{z-index:20;width:280px;padding:6px;position:absolute;top:calc(100% + 8px);right:0}.recents-header{justify-content:space-between;align-items:center;padding:2px 6px 4px;display:flex}.recents-clear{color:var(--ink-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:2px 4px;font-size:11px;font-weight:600}.recents-clear:hover{color:var(--ink);background:#f4f4f5}.recents-empty{color:var(--ink-muted);margin:0;padding:10px 8px 12px;font-size:12px;line-height:1.4}.recents-list{max-height:320px;margin:0;padding:0;list-style:none;overflow-y:auto}.recents-item{border-radius:8px;align-items:center;gap:4px;padding:2px 4px 2px 8px;display:flex}.recents-item:hover{background:#f4f4f5}.recents-link{flex-direction:column;flex:1;gap:1px;min-width:0;padding:5px 0;text-decoration:none;display:flex}.recents-title{color:var(--ink);white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:500;overflow:hidden}.recents-date{color:var(--ink-muted);font-size:11px}.recents-actions{opacity:0;flex-shrink:0;align-items:center;gap:1px;display:flex}.recents-item:hover .recents-actions{opacity:1}.recents-actions .icon-btn{width:26px;height:26px}.recents-actions .icon-btn.danger:hover{color:#dc2626;background:#fef2f2}.topbar-drive{position:relative}.topbar-drive .icon-btn{width:32px;height:32px}.topbar-drive .icon-btn.menu-active{background:var(--accent-soft);color:var(--accent)}.drive-popover{z-index:20;width:280px;padding:6px;position:absolute;top:calc(100% + 8px);right:0}.recents-clear{align-items:center;gap:4px;display:inline-flex}.drive-connect{padding:2px 6px 6px}.google-btn{color:#3c4043;cursor:pointer;background:#fff;border:1px solid #dadce0;border-radius:8px;justify-content:center;align-items:center;gap:10px;width:100%;height:40px;padding:0 12px;font-family:Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:500;transition:background-color .15s,border-color .15s,box-shadow .15s;display:flex}.google-btn:hover{background:#f7fafe;border-color:#d2e3fc;box-shadow:0 1px 2px #3c404340}.google-btn:active{background:#eef3fd}.google-btn-icon{flex-shrink:0;display:flex}.drive-save-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:6px;padding:8px 12px;font-size:12.5px;font-weight:600;display:inline-flex}.drive-save-btn:hover{background:#333}.drive-save-btn:disabled{opacity:.6;cursor:default}.drive-folder{align-items:center;gap:8px;padding:2px 6px 8px;display:flex}.drive-folder-label{color:var(--ink-muted);flex-shrink:0;font-size:11px;font-weight:600}.drive-folder-input{border:1px solid var(--panel-border);min-width:0;color:var(--ink);background:#fff;border-radius:6px;flex:1;padding:5px 8px;font-size:12px}.drive-folder-input:focus{border-color:var(--accent);outline:none}.drive-actions{align-items:center;gap:4px;padding:2px 6px 6px;display:flex}.drive-save-btn{flex:1;min-width:0}.drive-save-btn svg{flex-shrink:0}.drive-open{cursor:pointer;text-align:left;background:0 0;border:none}.drive-open .recents-title{align-items:center;gap:5px;display:flex}.drive-open .recents-title svg{color:var(--ink-muted);flex-shrink:0}.drive-current{background:var(--accent-soft)}.zoom-controls{align-items:center;gap:2px;padding:4px;display:flex;bottom:14px;left:14px}.zoom-controls .icon-btn{width:28px;height:28px}.zoom-pct{text-align:center;min-width:42px;color:var(--ink);font-variant-numeric:tabular-nums;font-size:12px;font-weight:500}.toast{color:#fff;z-index:50;background:#27272a;border-radius:10px;align-items:center;gap:12px;max-width:80vw;padding:10px 16px;font-size:13px;display:flex;position:fixed;bottom:18px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0003}.toast a{color:#d4d4d8;word-break:break-all}.toast button{color:#fff;cursor:pointer;background:0 0;border:1px solid #52525b;border-radius:6px;padding:3px 10px;font-size:12px}.toast button:hover{border-color:#a1a1aa}