:root{--sans:system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--mono:ui-monospace, "SF Mono", Consolas, monospace;--bg:#0e1524;--panel:#151d30;--panel-2:#1b2439;--panel-3:#212c46;--line:#2a3654;--line-soft:#222c44;--text:#e7ecf6;--text-dim:#9aa8c6;--text-faint:#6b7899;--accent:#00a0e0;--accent-deep:#002060;--accent-soft:#00a0e024;--danger:#ff6b6b;--radius:12px;--radius-sm:8px;--shadow:0 12px 32px -12px #0009;--shadow-lg:0 24px 60px -18px #000000b3;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:var(--sans);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:15px}*{box-sizing:border-box}html,body,#root{height:100%}body,h1,h2,h3,p{margin:0}button{cursor:pointer;font-family:inherit}input{font-family:inherit}kbd{font-family:var(--mono);background:var(--panel-3);border:1px solid var(--line);color:var(--text-dim);border-radius:5px;padding:1px 5px;font-size:.78em}*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line);background-clip:padding-box;border:2px solid #0000;border-radius:8px}.app{flex-direction:column;height:100%;min-height:0;display:flex}.workspace{flex:1;grid-template-columns:348px 1fr;min-height:0;display:grid;position:relative}.app.sidebar-closed .workspace{grid-template-columns:1fr}.app.sidebar-closed .sidebar{display:none}.topbar{background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);border-bottom:1px solid var(--line);flex-wrap:wrap;flex:none;justify-content:space-between;align-items:center;gap:16px;padding:10px 16px;display:flex}.topbar-left{align-items:center;gap:10px;display:flex}.brand{align-items:center;gap:11px;display:flex}.brand-drop{color:var(--accent);filter:drop-shadow(0 2px 6px #00a0e080);align-items:center;display:inline-flex}.brand h1{letter-spacing:-.2px;font-size:15.5px;font-weight:650}.brand p{color:var(--text-faint);font-size:12px}.topbar-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.quick-palettes{gap:6px;display:flex}.quick-palette{color:var(--text-dim);background:var(--panel-2);border:1px solid var(--line);border-radius:999px;align-items:center;gap:7px;padding:6px 11px 6px 8px;font-size:12.5px;font-weight:550;transition:all .15s;display:inline-flex}.quick-palette:hover{color:var(--text);border-color:var(--accent)}.quick-palette.is-active{color:var(--text);border-color:var(--accent);background:var(--accent-soft)}.qp-bg{border:1px solid #ffffff40;border-radius:50%;flex:none;width:15px;height:15px}.divider{background:var(--line);width:1px;height:26px}.btn{border-radius:var(--radius-sm);color:var(--text);background:var(--panel-3);border:1px solid #0000;justify-content:center;align-items:center;gap:7px;padding:8px 14px;font-size:13px;font-weight:600;transition:all .15s;display:inline-flex}.btn svg{flex:none}.btn:hover:not(:disabled){filter:brightness(1.12)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{background:linear-gradient(180deg, #14b0ee, var(--accent));color:#04121c}.btn.subtle{background:var(--panel-2);border-color:var(--line);color:var(--text-dim);font-weight:550}.btn.subtle:hover{color:var(--text);filter:none;border-color:var(--accent)}.btn.danger{color:var(--danger);background:0 0;border-color:#ff6b6b66}.btn.danger:hover{filter:none;background:#ff6b6b1f}.btn.block{width:100%}.btn.sm{padding:5px 10px;font-size:12px}.icon-btn{width:32px;height:32px;color:var(--text-dim);background:0 0;border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;transition:all .13s;display:inline-flex}.icon-btn:hover:not(:disabled){background:var(--panel-3);color:var(--text)}.icon-btn:disabled{opacity:.35;cursor:not-allowed}.icon-btn.lg{width:34px;height:34px}.icon-btn.sm{width:26px;height:26px}.icon-btn.is-off{color:var(--text-faint)}.icon-btn.is-on{color:var(--accent)}.export{position:relative}.export-panel{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);width:268px;box-shadow:var(--shadow-lg);z-index:40;flex-direction:column;gap:12px;padding:14px;display:flex;position:absolute;top:calc(100% + 10px);right:0}.field-row{flex-direction:column;gap:6px;display:flex}.field-label{text-transform:uppercase;letter-spacing:.6px;color:var(--text-faint);font-size:11px;font-weight:600}.segmented{background:var(--bg);border:1px solid var(--line);border-radius:8px;gap:3px;padding:3px;display:flex}.segmented button{color:var(--text-dim);background:0 0;border:none;border-radius:6px;flex:1;padding:7px 6px;font-size:12.5px;font-weight:600;transition:all .13s}.segmented button:hover{color:var(--text)}.segmented button.is-active{background:var(--accent);color:#04121c}.export-meta{color:var(--text-faint);text-align:center;font-size:12px}.export-warn{color:#ffd27a;background:#ffb43c1f;border:1px solid #ffb43c52;border-radius:8px;gap:7px;padding:8px 10px;font-size:11.5px;line-height:1.45;display:flex}.export-warn svg{flex:none;margin-top:1px}.reset-btn:hover:not(:disabled){color:var(--danger);background:#ff6b6b24}.confirm-panel{gap:12px;width:280px}.confirm-head{align-items:center;gap:9px;font-size:14px;display:flex}.confirm-icon{width:30px;height:30px;color:var(--danger);background:#ff6b6b24;border-radius:8px;justify-content:center;align-items:center;display:inline-flex}.confirm-text{color:var(--text-dim);font-size:12.5px;line-height:1.5}.confirm-text strong{color:var(--text)}.confirm-actions{gap:8px;display:flex}.confirm-actions .btn{flex:1}.sidebar{background:var(--panel);border-right:1px solid var(--line);flex-direction:column;min-height:0;display:flex}.sidebar-backdrop{display:none}.tabs{border-bottom:1px solid var(--line-soft);grid-template-columns:repeat(4,1fr);gap:4px;padding:10px;display:grid}.tab{color:var(--text-dim);background:0 0;border:1px solid #0000;border-radius:9px;flex-direction:column;align-items:center;gap:4px;padding:9px 4px;font-size:11.5px;font-weight:600;transition:all .13s;display:flex}.tab:hover{color:var(--text);background:var(--panel-2)}.tab.is-active{color:var(--text);background:var(--accent-soft);border-color:#00a0e066}.tab.is-active svg{color:var(--accent)}.tab-body{flex:1;padding:16px;overflow-y:auto}.stack{flex-direction:column;gap:12px;display:flex}.hint-block{color:var(--text-dim);background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:11px 12px;font-size:12.5px;line-height:1.5}.hint-block strong{color:var(--text)}.section{border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:var(--panel-2);overflow:hidden}.section-head{align-items:stretch;display:flex}.section-toggle{color:var(--text);text-align:left;background:0 0;border:none;flex:1;align-items:center;gap:8px;padding:11px 12px;font-size:12.5px;font-weight:650;display:flex}.section-toggle:hover{background:var(--panel-3)}.section-chevron{color:var(--text-faint);flex:none;transition:transform .18s;transform:rotate(-90deg)}.section.is-open .section-chevron{transform:rotate(0)}.section-icon{color:var(--accent);flex:none}.section-title{flex:1}.section-count{color:var(--text-faint);background:var(--panel);border-radius:999px;padding:1px 8px;font-size:11px}.section-right{align-items:center;gap:4px;padding-right:8px;display:flex}.section-body{flex-direction:column;gap:10px;padding:2px 10px 12px;display:flex}.palette-card{text-align:left;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);align-items:center;gap:12px;padding:11px;transition:all .15s;display:flex;position:relative}.palette-card:hover{border-color:var(--accent);transform:translateY(-1px)}.palette-card.is-active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.palette-preview{border:1px solid #ffffff24;border-radius:9px;flex-wrap:wrap;flex:none;place-content:center;gap:4px;width:62px;height:52px;padding:8px;display:flex}.pp-dot{border:1px solid #0000002e;border-radius:50%;width:11px;height:11px;box-shadow:0 0 0 1px #ffffff14}.palette-meta{flex-direction:column;gap:3px;display:flex}.palette-meta strong{font-size:13.5px;font-weight:650}.palette-meta span{color:var(--text-faint);font-size:11.5px;line-height:1.4}.palette-check{color:var(--accent);display:inline-flex;position:absolute;top:10px;right:12px}.switch-row{color:var(--text-dim);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;font-size:13px;display:flex}.switch-row input{width:16px;height:16px;accent-color:var(--accent)}.color-field{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:9px;transition:border-color .15s,box-shadow .15s}.color-field.is-active{border-color:var(--accent);box-shadow:0 0 0 1px #00a0e080}.color-field-head{align-items:center;gap:8px;display:flex}.color-field-swatch{cursor:pointer;border:1px solid #ffffff2e;border-radius:8px;flex:none;width:38px;height:38px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #00000040}.color-field-swatch input{opacity:0;cursor:pointer;border:none;width:calc(100% + 12px);height:calc(100% + 12px);padding:0;position:absolute;inset:-6px}.color-field-info{text-align:left;min-width:0;color:inherit;background:0 0;border:none;flex-direction:column;flex:1;gap:1px;padding:0;display:flex}.color-field-label{white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600;overflow:hidden}.color-field-hint{color:var(--text-faint);white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}.color-field-hex{width:78px;font-family:var(--mono);text-align:center;color:var(--text);background:var(--bg);border:1px solid var(--line);text-transform:uppercase;border-radius:6px;flex:none;padding:7px 6px;font-size:12px}.color-field-hex:focus{border-color:var(--accent);outline:none}.swatch-row{flex-wrap:wrap;gap:5px;margin-top:9px;display:flex}.swatch{border:1px solid #ffffff29;border-radius:6px;width:22px;height:22px;transition:transform .1s}.swatch:hover{transform:scale(1.14)}.swatch.is-current{box-shadow:0 0 0 2px var(--panel-2), 0 0 0 3px var(--accent)}.layer-block{border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:var(--panel-2);overflow:hidden}.layer-head{background:var(--panel-3);align-items:center;gap:2px;padding:6px 8px 6px 6px;display:flex}.layer-head.is-active{box-shadow:inset 3px 0 0 var(--accent)}.layer-chevron .chev{transition:transform .18s;transform:rotate(-90deg)}.layer-chevron .chev.is-open{transform:rotate(0)}.layer-name{text-align:left;color:var(--text);background:0 0;border:none;flex:1;align-items:center;gap:7px;padding:0 4px;font-size:13px;font-weight:650;display:flex}.layer-count{color:var(--text-faint);background:var(--panel);border-radius:999px;padding:1px 7px;font-size:10.5px;font-weight:600}.layer-elements{border-top:1px solid var(--line-soft);flex-direction:column;padding:4px;display:flex}.element-row{border-radius:6px;align-items:center;gap:8px;padding:3px 6px;display:flex}.element-row:hover{background:var(--panel-3)}.element-row.is-active{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent)}.element-swatch{border:1px solid #fff3;border-radius:4px;flex:none;width:15px;height:15px}.element-name{text-align:left;color:var(--text-dim);background:0 0;border:none;flex:1;padding:0;font-size:12.5px}.element-row.is-active .element-name{color:var(--text)}.dim-row{gap:10px;display:flex}.dim-row label{color:var(--text-faint);flex-direction:column;flex:1;gap:5px;font-size:11.5px;display:flex}.dim-row input{color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:13px}.dim-row input:focus{border-color:var(--accent);outline:none}.btn-col{flex-direction:column;gap:8px;display:flex}.btn-col .btn{justify-content:flex-start}.canvas-area{background:radial-gradient(120% 120% at 50% 0%, #101828 0%, var(--bg) 60%);flex-direction:column;min-height:0;display:flex}.canvas-toolbar{border-bottom:1px solid var(--line-soft);flex:none;justify-content:space-between;align-items:center;padding:9px 16px;display:flex}.zoom{align-items:center;gap:4px;display:flex}.zoom-value{text-align:center;font-variant-numeric:tabular-nums;min-width:48px;color:var(--text-dim);font-size:12.5px}.canvas-dims{font-variant-numeric:tabular-nums;color:var(--text-faint);font-size:12px}.canvas-stage{flex:1;place-items:center;min-height:0;padding:36px;display:grid;overflow:auto}.logo-canvas{box-shadow:var(--shadow);touch-action:none;border-radius:6px;display:block}.canvas-stage.is-transparent .logo-canvas{background-color:#fff;background-image:linear-gradient(45deg,#c9d2e0 25%,#0000 25%),linear-gradient(-45deg,#c9d2e0 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#c9d2e0 75%),linear-gradient(-45deg,#0000 75%,#c9d2e0 75%);background-position:0 0,0 9px,9px -9px,-9px 0;background-size:18px 18px}.logo-el{cursor:move}.selection-outline rect{fill:none;stroke:var(--accent);stroke-width:1.6px;stroke-dasharray:5 3;paint-order:stroke}.guide{stroke:#ff3d87;stroke-width:1px;opacity:.9}.marquee{fill:#00a0e024;stroke:var(--accent);stroke-width:1px;stroke-dasharray:4 3}.canvas-tools{align-items:center;gap:8px;display:flex}.selection-bar{border-top:1px solid var(--line-soft);background:var(--panel);flex-wrap:wrap;flex:none;align-items:center;gap:10px;min-height:54px;padding:9px 14px;display:flex}.selection-bar.is-empty{justify-content:center}.sel-chip{color:var(--text);background:var(--accent-soft);white-space:nowrap;border:1px solid #00a0e066;border-radius:999px;align-items:center;gap:6px;padding:5px 12px;font-size:12.5px;font-weight:650;display:inline-flex}.sel-chip svg{color:var(--accent)}.sel-sub{color:var(--text-faint);font-weight:500}.sel-swatch{cursor:pointer;border:1px solid #fff3;border-radius:8px;flex:none;width:34px;height:34px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #00000040}.sel-swatch input{opacity:0;cursor:pointer;border:none;width:calc(100% + 12px);height:calc(100% + 12px);padding:0;position:absolute;inset:-6px}.sel-swatches{flex-wrap:wrap;gap:5px;display:flex}.sel-actions{align-items:center;gap:6px;margin-left:auto;display:flex}.status-hint{color:var(--text-faint);font-size:12px}.cs{flex:none;position:relative}.cs-swatch{cursor:pointer;border:1px solid #fff3;border-radius:8px;justify-content:center;align-items:center;width:34px;height:34px;padding:0;display:flex;position:relative;box-shadow:inset 0 0 0 1px #00000040}.cs.cs-lg .cs-swatch{width:38px;height:38px}.cs-pencil{color:#fff;opacity:0;mix-blend-mode:difference;transition:opacity .12s}.cs-swatch:hover .cs-pencil{opacity:.9}.color-popover{z-index:200;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);width:212px;box-shadow:var(--shadow-lg);flex-direction:column;gap:10px;padding:10px;display:flex;position:fixed}.cp-sv{cursor:crosshair;touch-action:none;border:1px solid #00000059;border-radius:8px;width:100%;height:128px;position:relative}.cp-sv-thumb{pointer-events:none;border:2px solid #fff;border-radius:50%;width:14px;height:14px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0000008c}.cp-hue{cursor:pointer;touch-action:none;border-radius:7px;width:100%;height:14px;position:relative}.cp-hue-thumb{pointer-events:none;border:2px solid #fff;border-radius:50%;width:14px;height:14px;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0000008c}.cp-foot{align-items:center;gap:8px;display:flex}.cp-preview{border:1px solid #fff3;border-radius:6px;flex:none;width:26px;height:26px}.cp-hex{min-width:0;font-family:var(--mono);text-align:center;text-transform:uppercase;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:6px;flex:1;padding:6px 8px;font-size:12px}.cp-hex:focus{border-color:var(--accent);outline:none}.cp-swatches{flex-wrap:wrap;gap:5px;display:flex}@media (width<=1080px){.qp-name{display:none}.quick-palette{padding:6px 8px}}@media (width<=880px){.workspace{grid-template-columns:1fr}.sidebar{z-index:30;border-right:1px solid var(--line);width:min(340px,86vw);box-shadow:var(--shadow-lg);transition:transform .22s;position:absolute;top:0;bottom:0;left:0;transform:translate(-100%)}.app.sidebar-open .sidebar{display:flex;transform:none}.app.sidebar-closed .sidebar{display:flex;transform:translate(-100%)}.app.sidebar-open .sidebar-backdrop{z-index:25;background:#0408108c;display:block;position:absolute;inset:0}.brand p,.btn-text{display:none}}