:root{--workspace-bg: #1b1b21;--surface: #24232b;--surface-light: #f7f7f9;--text: #f4f4fc;--text-inverse: #111215;--text-muted: #a7a7b5;--accent: #50505c;--hover: #7a7a8c;--danger: #ff5f5f;--border: 1px solid #3c3c43;--radius: 8px;--shadow-lg: 0 18px 28px rgba(0, 0, 0, .18);--toolbelt-width: 296px ;--font-size-body: 14px;--font-size-small: 9px}*,*:before,*:after{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{margin:0;background:var(--workspace-bg);color:var(--text);font-family:Inter,Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-body);line-height:1.5;display:flex;flex-direction:column}.hint{color:var(--text)}img{max-width:100%;display:block}button{font:inherit;background:none;color:var(--text);border:0px solid;cursor:pointer}button:disabled,.disabled{opacity:.45;pointer-events:none}input,select{font:inherit;color:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}.app-shell{position:relative;flex:1;display:flex;flex-direction:column;padding:0;gap:0;min-height:100vh}.topbar{display:flex;justify-content:space-between;align-items:flex-start;position:absolute;top:20px;left:20px;right:20px;z-index:120;gap:16px;pointer-events:none}.topbar-left{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;pointer-events:auto}.topbar-right{display:flex;flex-direction:column;align-items:flex-end;width:var(--toolbelt-width);max-width:var(--toolbelt-width);gap:12px;pointer-events:auto}.topbar-brand-stack{display:flex;flex-direction:column;gap:12px;width:var(--toolbelt-width);max-width:var(--toolbelt-width);align-items:flex-start}.brand-pill{position:relative;display:inline-flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:12px 20px;border-radius:var(--radius);background:var(--surface-light);color:var(--text);width:100%;box-sizing:border-box}.brand-lockup{display:inline-flex;align-items:flex-end;gap:12px}.brand-mark{width:32px;height:32px}.brand-text{height:24px;width:auto}.social-follow-pill{padding:10px 16px;border-radius:var(--radius);background:var(--surface);border:var(--border);color:var(--text);text-decoration:none;transition:background .2s ease,transform .2s ease;display:block;width:100%;text-align:center;box-sizing:border-box}.social-follow-pill:hover{transform:translateY(-1px)}.tip-panel{background:#00000040;border-radius:var(--radius);border:var(--border);padding:16px;color:var(--text);width:var(--toolbelt-width);max-width:var(--toolbelt-width)}.tip-panel__title{margin:0 0 8px;letter-spacing:.08em}.tip-panel__list{margin:0 0 12px 18px;padding:0;line-height:1.4}.tip-panel__list li+li{margin-top:4px}.tip-panel__note{margin:0;line-height:1.5;color:var(--text)}.tip-panel__note a{color:var(--text);text-decoration:none}.tip-panel__note a:hover{text-decoration:underline}.kbd{display:inline-block;padding:1px 5px;border-radius:4px;background:#ffffff26;border:1px solid rgba(255,255,255,.3);font-size:var(--font-size-small);letter-spacing:.08em;text-transform:uppercase}.topbar-toolbelt{background:var(--surface);border-radius:var(--radius);padding:8px;border:var(--border);width:296px;max-width:296px;display:flex;flex-direction:column;gap:8px}.toolbelt-row{display:grid;grid-template-columns:repeat(6,40px);gap:8px;justify-content:center}.topbar-toolbelt .toolbar-btn{width:40px;height:40px}.topbar-toolbelt .color-chip-btn{width:40px;height:40px;margin-left:0}.topbar-toolbelt .color-chip-btn--secondary{margin-left:0}.topbar-toolbelt .palette-dropdown{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.topbar-toolbelt .native-color-btn{margin-left:0;width:36px;height:36px}.bare-button{width:32px;height:32px;display:grid;place-items:center;transition:background .2s ease}.bare-button:hover{transform:translate3d(-1)}.bare-button img{width:16px;height:16px}.icon-button{width:32px;height:32px;border-radius:var(--radius);display:grid;place-items:center;background:#0000000d;transition:background .2s ease}.icon-button img{width:16px;height:16px}.app-main{position:relative;flex:1;display:flex;align-items:stretch;min-height:100vh}.main-layout{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 0px;align-items:stretch;height:100%;box-sizing:border-box}.workspace-wrapper{position:relative;flex:1;min-height:0;height:100%;max-width:none;display:flex;align-items:center;justify-content:center;overflow:hidden}.workspace{flex:1;width:100%;height:100%;background:var(--workspace-bg);position:relative;overflow:hidden}.workspace .stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:96px;flex-wrap:nowrap;position:relative;transform-origin:center center;background:var(--workspace-bg)}.canvas-frame{position:relative;display:inline-block}.canvas-frame canvas{display:block}.editor.artboard{background:#fff;cursor:crosshair;touch-action:none;image-rendering:pixelated;image-rendering:crisp-edges}.workspace-controls{position:absolute;left:50%;bottom:32px;transform:translate(-50%);width:min(560px,calc(100% - 48px));display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none;z-index:2000}.workspace-controls__bar{pointer-events:auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;padding:12px 18px;border-radius:var(--radius);border:var(--border);background:var(--surface);box-shadow:var(--shadow-lg)}.workspace-zoom-toast{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;padding-left:12px;padding-right:6px;border-radius:var(--radius);border:var(--border);background:var(--surface);box-shadow:var(--shadow-lg);font-size:var(--font-size-small);letter-spacing:.08em;text-transform:uppercase;color:var(--text);transition:opacity .3s ease}.workspace-zoom-toast--hidden{opacity:0;visibility:hidden;pointer-events:none}.workspace-zoom-toast__value{font-weight:600;letter-spacing:.12em}.workspace-zoom-toast__reset{width:24px;height:24px;border-radius:var(--radius);display:grid;place-items:center;transition:background .2s ease}body.preview-open .workspace-controls__bar,body.preview-open .workspace-zoom-toast{opacity:.35;filter:saturate(0);pointer-events:none}.circle-button{width:40px;height:40px;border-radius:var(--radius);background:var(--surface);border:var(--border);display:grid;place-items:center;transition:transform .2s ease}#swap{background:var(--accent);border:var(--surface)}.circle-button img{width:24px;height:24px}.circle-button:after{font-size:var(--font-size-body)}.circle-button span[aria-hidden=true]{font-size:var(--font-size-subheading);line-height:1}.circle-button:hover{transform:translateY(-2px)}.tool-context-shell{width:var(--toolbelt-width);max-width:var(--toolbelt-width)}.tool-context{width:100%;box-sizing:border-box;background:var(--surface);border:var(--border);color:var(--text);border-radius:var(--radius);padding:0 18px;overflow:hidden;opacity:0;transform:translateY(12px);pointer-events:none;max-height:0;transition:opacity .2s ease,transform .25s ease}.tool-context.tool-context--open{max-height:none;padding:12px 18px 18px;opacity:1;transform:translateY(0);pointer-events:auto;overflow:visible}.tool-context__section{display:flex;flex-direction:column;gap:12px;padding:12px 0}.tool-context__section[hidden]{display:none!important}.tool-context__header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;color:var(--text)}.tool-context__value{color:var(--text)}.tool-context__control{display:flex;align-items:center;gap:16px}.tool-context__control--stacked{flex-direction:column;align-items:stretch;gap:10px}.brush-shape-control{align-items:center;justify-content:space-between}.tool-context__label{color:var(--text)}.brush-shape-options{display:inline-flex;gap:8px}.brush-shape-btn{width:40px;height:40px;border:var(--border);border-radius:var(--radius);display:grid;place-items:center;transition:border .2s ease,background .2s ease}.brush-shape-btn.active{background:var(--accent)}.brush-shape-icon{width:18px;height:18px;display:block;background:var(--text)}.brush-shape-icon--circle{border-radius:50%}.brush-shape-icon--square{border-radius:4px}.tool-context__range{flex:1;accent-color:var(--accent)}.brush-preview{width:28px;height:28px;border-radius:var(--radius);display:grid;place-items:center;position:relative}.brush-preview:after{content:"";width:var(--brush-size, 2px);height:var(--brush-size, 2px);border-radius:50%;background:var(--text);display:block}.brush-preview--square:after{border-radius:3px}.tool-context__helper{margin:0;color:var(--text);font-size:var(--font-size-small)}.image-upload-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:var(--radius);background:var(--accent);color:var(--text);cursor:pointer;transition:background .2s ease,transform .2s ease}.image-upload-btn:hover{transform:translateY(-1px)}.toolbar-group{display:inline-flex;align-items:center;gap:12px}.toolbar-btn{width:44px;height:44px;border:var(--border);border-radius:var(--radius);background:#0000000a;display:grid;place-items:center;transition:background .2s ease,transform .2s ease}.toolbar-btn img{width:24px;height:24px}.toolbar-icon{width:20px;height:20px;display:block}.toolbar-btn:hover{transform:translateY(-1px)}.toolbar-btn.active{background:var(--accent)}.color-chip-btn{width:44px;height:44px;border:var(--border);border-radius:var(--radius);background:#000;position:relative;transition:transform .15s ease}.color-chip-btn.active{border-color:transparent}.color-chip-btn--secondary{margin-left:-16px}.color-chip-btn:hover{transform:translateY(-1px)}.palette-panel{display:none;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:6px}.palette-panel.open{display:grid}.tool-context__section--palette{margin-top:4px;padding-top:16px}.tool-context__control--palette{flex-direction:column;align-items:stretch;gap:12px}.palette-native{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.palette-native-btn{align-self:flex-start}.shape-type-buttons{display:flex;gap:8px;flex-wrap:nowrap;justify-content:flex-start}.shape-type-btn{border:var(--border);width:40px;height:40px;padding:0;border-radius:var(--radius);color:var(--text);display:grid;place-items:center;transition:background .2s ease,border-color .2s ease,transform .2s ease}.shape-type-btn:hover{transform:translateY(-1px)}.shape-type-btn.active{background:var(--accent)}.shape-type-btn svg{width:20px;height:20px}.shape-style-buttons{margin-top:16px;padding-top:16px;display:flex;gap:8px;justify-content:flex-start}.shape-style-btn{width:40px;height:40px;padding:0;border:var(--border);border-radius:var(--radius);display:grid;place-items:center;transition:background .2s ease,transform .2s ease,border-color .2s ease}.shape-style-btn svg{width:20px;height:20px}.shape-style-btn:hover{transform:translateY(-1px)}.shape-style-btn.active{background:var(--accent)}.shape-linewidth{margin-top:16px;padding-top:16px;border-top:1px solid rgba(0,0,0,.08);display:flex;flex-direction:column;gap:8px}.shape-linewidth__header{display:flex;justify-content:space-between;align-items:center}.shape-linewidth input[type=range]{width:100%}.shape-linewidth__value{text-align:right}.color-chip{width:28px;height:28px;border-radius:var(--radius);cursor:pointer;transition:transform .15s ease}.color-chip:hover{transform:translateY(-2px)}.layers-card{position:relative;z-index:40;width:var(--toolbelt-width);max-width:var(--toolbelt-width);background:var(--surface);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:12px;flex-shrink:0;border:var(--border)}.layers-card__header{display:flex;align-items:center;justify-content:space-between}.layers-card__new{width:36px;height:36px;border-radius:50%;color:var(--text);display:inline-flex;align-items:center;justify-content:center;line-height:1;transition:background .2s ease,transform .2s ease}.layers-card__new:hover{transform:translateY(-1px)}.layer-list{width:100%;border-radius:var(--radius);color:var(--text);display:flex;flex-direction:column;gap:6px;overflow-y:auto}.layer-list.layer-list--menu-open{overflow:visible}.layer-list:focus-visible{outline:2px solid rgba(255,255,255,.25);outline-offset:2px}.layer-list--disabled{opacity:.4;pointer-events:none}.layer-list__item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border-radius:var(--radius);background:transparent;color:var(--text);padding:6px 10px;text-align:left;font:inherit;cursor:pointer;transition:background .2s ease}.layer-list__item:focus{outline:none}.layer-list__item.active-layer,.layer-list__item.active-layer:hover,.layer-list__item.active-layer:focus-visible{background:var(--accent);color:var(--text)}.layer-list__name{flex:1;text-align:left}.layer-item-menu{position:relative;display:flex;align-items:center}.layer-item-menu__toggle{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--text);transition:background .2s ease,transform .2s ease}.layer-item-menu__toggle:hover{transform:translateY(-1px)}.layer-item-menu__popover{position:absolute;top:calc(100% + 6px);right:0;background:var(--workspace-bg);border:var(--border);color:var(--text);border-radius:var(--radius);padding:6px;min-width:140px;display:none;flex-direction:column;gap:4px;z-index:4000}.layer-item-menu__popover.open{display:flex}.layer-item-menu__btn{width:100%;text-align:left;padding:6px 8px;border-radius:var(--radius);background:transparent;color:var(--text);font:inherit;transition:background .2s ease}.layer-item-menu__btn.layer-item-menu__btn--danger{color:var(--danger)}.layer-item-menu__btn.layer-item-menu__btn--danger:hover:not(:disabled){background:#ff5f5f26}.layer-item-menu__btn:hover:not(:disabled){background:#00000014}.layer-item-menu__btn:disabled{opacity:.5;cursor:default}.layer-item-menu__divider{height:1px;background:var(--text);margin:4px 0}.btn{padding:8px 12px;border-radius:var(--radius);background:#ffffff1a;color:inherit;transition:background .2s ease,transform .2s ease}.btn:hover{background:#ffffff2e;transform:translateY(-1px)}.btn.primary{background:var(--accent);color:#0f172a}.btn.primary:hover{background:#6ebbff}.btn.muted{background:#ffffff14}.muted{background:#ffffff14;color:inherit}.layers-card .btn,.layers-card .btn.muted{color:var(--text)}.menu-popover{position:absolute;top:calc(100% + 20px);right:-20px;display:none;flex-direction:column;min-width:180px;padding:10px;background:var(--workspace-bg);border:var(--border);color:var(--text);border-radius:var(--radius);z-index:90}.menu-popover.open{display:flex}.menu-popover button{padding:10px 12px;border-radius:var(--radius);text-align:left;transition:background .2s ease}.menu-popover button:hover{background:#ffffff1f}.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0000008c;z-index:200;transition:opacity .2s ease}.modal.hidden{opacity:0;pointer-events:none}.modal__card{background:var(--surface);color:var(--text);padding:32px;border-radius:var(--radius);min-width:280px;max-width:360px;display:flex;flex-direction:column;gap:24px;text-align:center}.modal__card--wide{max-width:420px;text-align:left}.modal__card h2{margin:0}.modal__actions{display:flex;justify-content:flex-end;gap:12px}.size-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:8px}.size-field{display:flex;flex-direction:column;gap:6px;color:#4a4b50}.dimension-input{padding:10px;border-radius:var(--radius);color:var(--text);background:var(--surface);border:var(--border)}.size-checkbox{display:flex;align-items:center;gap:8px;grid-column:span 2;color:#4a4b50}.overlay{position:fixed;inset:0;background:#08090db8;display:none;align-items:center;justify-content:center;padding:32px;z-index:150}.overlay.open{display:flex}.preview-shell{background:var(--workspace-bg);border-radius:var(--radius);padding:24px;width:min(1200px,95vw);height:min(720px,90vh);display:flex;flex-direction:column;gap:16px}.preview-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--text)}.preview-toolbar .hint{color:#7c7f88}.preview-toolbar button{padding:8px 12px;border-radius:var(--radius);background:#ffffff14;color:inherit;transition:background .2s ease}.preview-toolbar button:hover{background:#ffffff29}.preview-toolbar .primary{background:var(--accent);color:var(--text)}.preview-canvas{flex:1;width:100%;background:#1a1d27;border-radius:var(--radius)}.hand-tool,.hand-tool .editor.artboard{cursor:grab}.hand-tool.hand-dragging,.hand-tool.hand-dragging .editor.artboard{cursor:grabbing}.brush-cursor{position:fixed;pointer-events:none;border:1px solid rgba(255,255,255,.95);border-radius:50%;mix-blend-mode:difference;opacity:0;transform:translate(-9999px,-9999px);transition:opacity .08s ease;z-index:9999}.brush-cursor.visible{opacity:1}.brush-cursor-active .editor.artboard{cursor:none}.device-warning{display:none;position:fixed;inset:0;background:#08090de6;z-index:1000;align-items:center;justify-content:center;padding:24px;text-align:center}.device-warning__card{max-width:320px;background:#666870;color:var(--text);border-radius:var(--radius);padding:24px}.device-warning__card strong{display:block;font-size:var(--font-size-subheading);margin-bottom:8px}.device-warning__card p{margin:0;font-size:var(--font-size-body);line-height:1.4;color:var(--text)}.cmp-banner{position:fixed;bottom:24px;left:50%;transform:translate(-50%);width:min(420px,calc(100% - 32px));background:var(--surface);color:var(--text);border-radius:var(--radius);border:var(--border);box-shadow:var(--shadow-lg);padding:16px;display:flex;flex-direction:column;gap:12px;z-index:3000}.cmp-banner__content p{margin:0;font-size:var(--font-size-body)}.cmp-banner__actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.cmp-banner--hidden{display:none}.cmp-preferences{margin-top:12px;display:flex;flex-direction:column;gap:12px}.cmp-toggle{display:flex;gap:12px;align-items:flex-start}.cmp-toggle input{margin-top:5px}.cmp-toggle__copy{flex:1;display:flex;flex-direction:column;gap:2px}.cmp-toggle__label{font-weight:600;color:var(--text)}.cmp-toggle__desc{color:var(--text-muted);font-size:var(--font-size-small);line-height:1.4}@media(max-width:1100px){.device-warning{display:flex}.topbar{position:static;padding:24px 16px 0;margin:0;flex-direction:column;align-items:stretch;gap:16px;pointer-events:auto}.topbar-left{flex-direction:column;align-items:stretch;pointer-events:auto}.topbar-right{width:100%;align-items:stretch;pointer-events:auto}.topbar-brand-stack{width:100%}.topbar-toolbelt,.tool-context-shell,.layers-card,.tip-panel{width:100%;max-width:100%}.app-shell{padding:0}.app-main{flex-direction:column;align-items:center;min-height:auto;padding:16px 16px 32px}.main-layout{display:flex;flex-direction:column;gap:24px;padding:0 24px 40px}.workspace-wrapper{width:100%;height:auto}.workspace{height:auto;padding:96px 32px 160px}.workspace .stage{flex-direction:column;gap:32px;height:auto}.workspace-controls{position:static;transform:none;width:100%;margin-top:16px;bottom:auto;pointer-events:auto}.workspace-controls__bar{width:100%;justify-content:center}.workspace-zoom-toast{width:100%;justify-content:space-between}.toolbar-stack{bottom:40px}.layers-card{position:static;width:100%;max-width:360px;margin:24px auto 0}.ad-panel{display:none}}.ad-panel{margin:24px auto;max-width:420px;width:100%}.ad-panel__placeholder{width:100%;border-radius:var(--radius);padding:24px;min-height:120px;background:#00000073;border:1px dashed rgba(255,255,255,.35);color:var(--text);text-align:center;text-transform:uppercase;letter-spacing:.25em;font-size:var(--font-size-small);font-weight:600;display:flex;align-items:center;justify-content:center;margin-bottom:16px}