:root{color-scheme:dark;--bg:#151820;--panel:#1d212b;--line:#ffffff12;--text:#e9ecf5;--muted:#8e98ac;--accent:#ad95ff;--mint:#7de1c2;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:13px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);height:100dvh;display:flex;flex-direction:column;overflow:hidden}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{background:#ffffff08;border:1px solid var(--line);color:inherit;padding:7px 11px;border-radius:6px;cursor:pointer;white-space:nowrap}button:hover{background:#ffffff12}button:disabled{opacity:.3;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}a{color:var(--muted);text-decoration:none}a:hover{color:var(--text)}.primary{background:var(--accent);color:#201933;border-color:transparent;font-weight:650}.primary:hover{background:#c3afff}.topbar{height:64px;display:flex;align-items:center;padding:0 22px;gap:20px;border-bottom:1px solid var(--line);flex-shrink:0}.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:650;font-size:20px;letter-spacing:-.8px}.brand-light{font-weight:400;color:#b8c0d1}.badge{font-size:9px;letter-spacing:2px;color:var(--mint);border-left:1px solid #ffffff20;padding-left:20px}.top-actions{display:flex;align-items:center;gap:25px;margin-left:auto}.menubar{display:flex;align-items:center;gap:5px;height:44px;padding:0 16px;flex-shrink:0;border-bottom:1px solid var(--line)}.menubar button{background:none;border-color:transparent;font-size:12px}.menubar button:hover{background:#ffffff0c}.divider{width:1px;height:18px;background:var(--line);margin:0 8px}.options{height:46px;display:flex;align-items:center;gap:13px;padding:0 19px;background:var(--panel);border-bottom:1px solid var(--line);flex-shrink:0}.options label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px}.options input[type=number]{width:56px;padding:4px}.options input[type=color]{width:27px;height:26px;padding:1px;border:0;background:transparent}.option-hint{color:var(--muted);font-size:11px;margin-left:auto}.workspace{display:flex;flex:1;min-height:0}.tools{width:54px;display:flex;flex-direction:column;align-items:center;gap:9px;padding:15px 7px;border-right:1px solid var(--line);background:#191d26;flex-shrink:0}.tools button{width:38px;height:37px;padding:0;font-size:24px;border-color:transparent;background:transparent;color:#aab3c4}.tools button.selected{color:var(--accent);background:#ad95ff19;border-color:#ad95ff38}.tool-spacer{flex:1}.center{flex:1;min-width:0;display:flex;flex-direction:column}.document-tab{height:39px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:0 18px;background:#1a1e27;font-size:12px;flex-shrink:0}.dot{width:6px;height:6px;border-radius:50%;background:var(--mint)}#document-size{color:var(--muted);font-size:10px;margin-left:auto}#stage{position:relative;flex:1;overflow:auto;display:grid;place-items:center;background:radial-gradient(ellipse at 70% 20%,#302a4525,transparent 65%),#11141b;outline:none;padding:40px;min-height:0}#canvas-wrap{position:relative;box-shadow:0 6px 40px #0008;flex-shrink:0;background-color:#eee;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}#canvas-wrap[hidden]{display:none}#view{display:block}#overlay{position:absolute;inset:0;touch-action:none;cursor:crosshair}.statusbar{display:flex;justify-content:space-between;align-items:center;min-height:34px;background:#1a1e27;color:var(--muted);font-size:10px;padding:0 14px}.statusbar div{display:flex;align-items:center;gap:9px}.statusbar button{font-size:12px;padding:3px 7px;border:0;background:none}.panels{width:260px;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;flex-shrink:0}.panel{padding:18px 15px;border-bottom:1px solid var(--line)}h2{font-size:10px;font-weight:650;letter-spacing:1.5px;margin:0 0 16px;color:#bec5d5}.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.panel-grid button{font-size:11px;padding:9px}.layer-panel{display:flex;flex-direction:column;flex:1;min-height:0}.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:15px}.panel-heading h2{margin:0}.panel-heading button{font-size:18px;padding:0 8px;background:none;border:0}.layer-options{padding:0 15px 15px;border-bottom:1px solid var(--line)}.layer-options label{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);margin-top:8px}.layer-options select{flex:1;padding:5px;width:100px}.layer-options input{width:95px;min-width:0}.layer-options output{min-width:32px}#layers{flex:1;overflow:auto;padding:8px}.layer{display:flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:5px;padding:8px 6px;cursor:pointer;margin-bottom:4px}.layer.active{background:#ad95ff12;border-color:#ad95ff35}.layer>button{border:0;background:none;padding:2px;color:var(--muted)}.layer canvas{width:38px;height:30px;object-fit:contain;border:1px solid #ffffff16;background:repeating-conic-gradient(#999 0% 25%,#ddd 0% 50%) 0 0/8px 8px}.layer input{width:110px;min-width:0;padding:4px;border-color:transparent;background:transparent;font-size:11px}.layer-actions{display:flex;gap:5px;justify-content:center;padding:10px;border-top:1px solid var(--line)}.layer-actions button{font-size:11px}.empty{color:var(--muted);font-size:11px;text-align:center;padding:30px 0}.panel-foot{font-size:10px;line-height:1.8;color:#69768e;padding:15px;border-top:1px solid var(--line)}.edit-text{margin:8px 15px}.eyebrow{font-size:10px;font-weight:650;letter-spacing:3px;color:var(--mint)}#welcome{max-width:650px;width:100%;padding:0 35px}#welcome h1{font-size:clamp(42px,5vw,72px);font-weight:550;letter-spacing:-3px;line-height:1.12;margin:24px 0}#welcome em{font-style:normal;color:var(--accent)}#welcome p{line-height:1.85;color:var(--muted);font-size:15px}.welcome-actions{display:flex;gap:12px;margin:30px 0}.welcome-actions button{padding:13px 18px}.format-list{font-size:9px;letter-spacing:2px;color:#a0a8bd;border-top:1px solid var(--line);padding-top:24px;margin-top:42px}.drop-hint{color:#69768e;font-size:11px;margin-top:13px}input,select,textarea{background:#131720;border:1px solid #ffffff20;color:var(--text);border-radius:5px;padding:9px;width:100%}input[type=range]{padding:0;accent-color:var(--accent)}dialog{background:#222733;border:1px solid #ffffff20;border-radius:12px;padding:28px;color:var(--text);width:430px;max-width:95vw;box-shadow:0 30px 100px #0009}dialog::backdrop{background:#070a12b0;backdrop-filter:blur(4px)}dialog h2{font-size:21px;letter-spacing:-.4px;color:var(--text);margin-bottom:22px}dialog label{display:block;font-size:12px;color:#a8b2c6;margin-bottom:15px}dialog label input,dialog label textarea,dialog label select{margin-top:7px}dialog p{font-size:12px;line-height:1.6;color:var(--muted)}.form-row{display:flex;gap:16px}.form-row label{flex:1;min-width:0}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}#notice{position:fixed;bottom:50px;left:50%;transform:translateX(-50%);max-width:min(700px,90vw);background:#2e3444;padding:14px 18px;border:1px solid #ad95ff80;border-radius:8px;z-index:20;box-shadow:0 10px 40px #0007;line-height:1.6}#notice button{margin-left:15px;padding:0 6px;border:0;background:none}#notice.error{border-color:#edaa73}#stage.dragging{outline:2px dashed var(--accent);outline-offset:-8px}@media(max-width:950px){.panels{width:210px}.layer input{width:70px}.option-hint,.badge{display:none}.topbar{padding:0 12px}.top-actions{gap:12px}#welcome{padding:0}.menubar{overflow:auto}.panel-grid{gap:4px}.panel-grid button{font-size:10px;padding:8px 4px}}@media(max-width:650px){.panels{width:160px}.panel-grid{grid-template-columns:1fr}.layer-options{padding:0 8px 12px}.layer-options input{width:45px}.layer canvas{display:none}.layer input{width:80px}.panel-foot,.top-actions>a,.options label:nth-of-type(2){display:none}.brand{font-size:16px}.welcome-actions{flex-direction:column}#stage{padding:15px}.tools{width:44px;padding:10px 3px}.tools button{width:34px}#welcome h1{font-size:34px;letter-spacing:-1px}.layer-actions{flex-wrap:wrap}.options{padding:0 10px}.topbar{height:54px}.statusbar{font-size:9px;padding:0 6px}.document-tab{padding:0 8px}.document-tab #document-size{display:none}}
.parent-options{padding:0 15px 10px}.parent-options label{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:8px}.parent-options select{padding:5px;min-width:0}.property-actions{padding:8px 12px;display:flex;flex-direction:column;gap:6px;max-height:230px;overflow:auto;border-top:1px solid var(--line)}.property-actions button{font-size:11px;text-align:left}.property-actions button[hidden],button[hidden]{display:none}.property-actions #mask-tools{display:flex;gap:3px}.property-actions #mask-tools[hidden]{display:none}.check{display:flex;align-items:center;gap:8px}.check input{width:auto}.layer{min-height:43px}.layer input{flex:1;width:40px}.layer canvas{flex-shrink:0}.layer-options{padding-bottom:10px}.panel-foot{padding:8px 15px;font-size:9px}#layers{min-height:100px}input[type=color]{height:34px;padding:2px}

.layer:has(.layer-edit){grid-template-columns:20px 38px minmax(0,1fr) 28px}.layer .layer-edit{width:28px;height:28px;color:#c6b4ff;font-weight:700;border:1px solid #605080;border-radius:5px}

#effects-dialog [hidden]{display:none!important}#effects-dialog{max-height:90vh;overflow:auto}.layer .layer-edit{flex-shrink:0;padding:0}

.form-error{color:#ffc4b0;background:#6d2e2733;padding:10px;border:1px solid #b65f48;border-radius:5px}.form-error[hidden]{display:none}

.gradient-stop{display:flex;gap:8px;align-items:center}.gradient-stop label{flex:1;min-width:0}.gradient-stop button{padding:4px}#effects-dialog{width:560px}#effects-dialog h3{font-size:13px}

#canvas-actions{position:absolute;z-index:2;display:flex;gap:4px;background:#222733;border:1px solid #ad95ff80;padding:3px;border-radius:6px;white-space:nowrap}#canvas-actions[hidden]{display:none}#canvas-actions button{font-size:11px;padding:4px 7px}

/* Embedded API mode: preview only, with no interactive editor chrome. */
.api-only .topbar,.api-only .menubar,.api-only .options,.api-only .tools,.api-only .panels,.api-only .document-tab,.api-only .statusbar,.api-only #welcome,.api-only #overlay,.api-only #canvas-actions,.api-only #notice,.api-only dialog,.api-only button,.api-only input,.api-only select,.api-only textarea,.api-only a{display:none!important}
.api-only #stage{cursor:default;user-select:none}
.api-only #view{pointer-events:none}