:root{--ink:#464542;--muted:#86827e;--blue:#2f8cf6;--panel:#fbfaf9;--line:#e6e2df;--mask:#ff4f8b}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;overflow:hidden}body{color:var(--ink);background:#f5f3f2;font-family:DM Sans,Noto Sans SC,sans-serif}button,textarea,input{font:inherit}.editor{isolation:isolate;background:radial-gradient(circle at 39% 32%,#f5dfe5 0,#0000 34%),radial-gradient(circle at 62% 70%,#e4e0e4 0,#0000 40%),linear-gradient(135deg,#f9f8f7,#efeeee);height:100vh;position:relative}.topbar{z-index:10;align-items:center;height:92px;padding:0 30px;display:flex;position:absolute;inset:0 0 auto}.history-actions{gap:17px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.plain-icon{color:#76716c;cursor:pointer;background:0 0;border:0;padding:7px;font-size:33px;line-height:1}.plain-icon.disabled{opacity:.35;cursor:default}.history-button{color:#625e59;cursor:pointer;background:#fff;border:0;border-radius:18px;padding:8px 13px;font-size:12px;font-weight:700;box-shadow:0 4px 15px #463f3918}.new-btn{color:#67635f;cursor:pointer;background:#fff;border:0;border-radius:18px;padding:8px 15px;font-weight:700}.history-panel{z-index:30;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#fbfaf9f5;border:3px solid #fff;border-radius:20px;width:min(360px,100vw - 44px);max-height:calc(100vh - 120px);padding:14px;position:fixed;top:78px;left:22px;overflow:auto;box-shadow:0 14px 40px #463f3935}.history-panel-head{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.history-panel-head button,.history-card-info button{cursor:pointer;background:#e9e7e5;border:0;border-radius:10px;padding:5px 9px;font-size:11px}.history-empty{color:var(--muted);font-size:12px}.history-list{gap:9px;display:grid}.history-card{background:#fff;border-radius:13px;gap:10px;padding:8px;display:flex}.history-card img{object-fit:cover;background:#f1efed;border-radius:9px;width:76px;height:76px}.history-card-info{align-content:center;gap:5px;min-width:0;display:grid}.history-card-info small{color:var(--muted);font-size:10px}.history-card-info div{gap:5px;display:flex}.top-actions{gap:12px;margin-left:auto;display:flex}.export-btn,.share-btn{cursor:pointer;border:0;border-radius:28px;height:50px;padding:0 24px;font-size:16px;font-weight:700}.export-btn{color:#67635f;background:#e8e6e4}.share-btn{background:var(--blue);color:#fff}.viewport{scrollbar-width:none;place-items:start center;padding:24px 24px 310px;display:grid;position:absolute;inset:88px 0 0;overflow:auto}.zoom-controls{z-index:12;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffffd9;border:1px solid #fff;border-radius:14px;align-items:center;gap:6px;padding:6px;display:flex;position:fixed;top:104px;left:50%;transform:translate(-50%);box-shadow:0 8px 22px #463f3920}.zoom-controls button,.zoom-controls span{color:#625e59;text-align:center;background:0 0;border:0;border-radius:9px;min-width:28px;height:28px;font-size:12px;font-weight:700;line-height:28px}.zoom-controls button{cursor:pointer}.zoom-controls button:hover{background:#f0eeec}.zoom-controls .zoom-reset{width:auto;padding:0 9px;font-size:11px;font-weight:600}.viewport::-webkit-scrollbar{display:none}.artboard-scale-frame{flex:none;min-width:1px;min-height:1px;position:relative}.artboard{aspect-ratio:1;transform-origin:top;background:#fff;border-radius:11px;flex:none;width:min(70vw,100vh - 185px);position:relative;overflow:hidden;box-shadow:0 14px 44px #665f5a2d}.artboard-content{transform-origin:50%;position:absolute;inset:0}.artboard canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.artboard.mask-mode{cursor:crosshair;box-shadow:0 0 0 3px #fff,0 0 0 5px #ff4f8b,0 16px 45px #665f5a35}.artboard.layer-hover{cursor:default}.artboard.layer-hover #maskCanvas{cursor:pointer}.layer-box{box-sizing:border-box;pointer-events:none;z-index:5;border:2px solid #2f8cf6;position:absolute;box-shadow:0 0 0 1px #ffffffd9}.layer-box.hover{background:#2f8cf614;border-color:#2f8cf6}.layer-box.selected:not(.hover){border-style:solid;border-color:#2f8cf6}.layer-box-label{color:#fff;white-space:nowrap;background:#2f8cf6;border-radius:6px;height:20px;padding:0 8px;font-size:11px;font-weight:700;line-height:20px;position:absolute;top:-22px;left:0}.layer-box .h{box-sizing:border-box;background:#fff;border:1.5px solid #2f8cf6;border-radius:1px;width:8px;height:8px;position:absolute}.layer-box .tl{top:-5px;left:-5px}.layer-box .tr{top:-5px;right:-5px}.layer-box .bl{bottom:-5px;left:-5px}.layer-box .br{bottom:-5px;right:-5px}.layer-box .tm{margin-left:-4px;top:-5px;left:50%}.layer-box .bm{margin-left:-4px;bottom:-5px;left:50%}.layer-box .ml{margin-top:-4px;top:50%;left:-5px}.layer-box .mr{margin-top:-4px;top:50%;right:-5px}.box-floating-toolbar{pointer-events:auto;z-index:100;flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%)}.floating-input-bubble{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);white-space:nowrap;background:#f5f3f0f2;border:1px solid #ffffffe6;border-radius:24px;align-items:center;gap:8px;min-width:260px;padding:6px 10px 6px 12px;display:flex;position:relative;box-shadow:0 10px 25px #00000026,0 2px 6px #00000014}.floating-input-bubble .input-icon{opacity:.6;font-size:14px}.floating-input-bubble input{color:#333;background:0 0;border:none;outline:none;flex:1;min-width:140px;padding:2px 0;font-size:13px}.floating-input-bubble input::placeholder{color:#8e8984}.floating-input-bubble .check-btn{color:#fff;cursor:pointer;background:#a3a09b;border:none;border-radius:50%;justify-content:center;align-items:center;width:26px;height:26px;font-size:13px;font-weight:700;transition:all .2s;display:flex}.floating-input-bubble .check-btn:hover{background:#2f8cf6;transform:scale(1.05)}.floating-input-bubble .ai-badge{color:#fff;background:#ff5252;border-radius:10px;padding:2px 5px;font-size:9px;font-weight:800;position:absolute;bottom:-6px;right:-6px;box-shadow:0 2px 5px #ff525266}.floating-actions-bar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffffeb;border:1px solid #e6e2dfcc;border-radius:20px;align-items:center;gap:4px;padding:4px 6px;display:flex;box-shadow:0 6px 18px #0000001a}.floating-actions-bar button{color:#464542;cursor:pointer;background:0 0;border:none;border-radius:12px;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;transition:background .15s,transform .15s;display:flex}.floating-actions-bar button:hover{background:#f0ece9;transform:translateY(-1px)}.floating-actions-bar button.delete-btn:hover{color:#e53935;background:#ffebeb}.working{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#5b5753;background:#f8f5f1c9;flex-direction:column;justify-content:center;align-items:center;gap:17px;display:flex;position:absolute;inset:0}.working span{border:4px solid #d9d4cf;border-top-color:var(--blue);border-radius:50%;width:43px;height:43px;animation:.8s linear infinite spin}.working b{font-size:14px}@keyframes spin{to{transform:rotate(360deg)}}.floating-dock{z-index:20;flex-direction:column;align-items:center;gap:12px;display:flex;position:fixed;top:112px;left:auto;right:24px}.floating-dock.is-positioned{right:auto;transform:none}.floating-dock-grip{color:#8c8782;cursor:grab;touch-action:none;background:#ffffffe6;border:0;border-radius:10px;justify-content:center;align-items:center;gap:4px;width:54px;height:20px;display:flex;box-shadow:0 4px 14px #463f391f}.floating-dock-grip:active{cursor:grabbing}.floating-dock-grip span{background:currentColor;border-radius:50%;width:4px;height:4px;box-shadow:0 6px}.playground-edits-strip{scrollbar-width:none;justify-content:center;align-items:center;gap:12px;max-width:min(90vw,680px);padding:4px 8px;display:flex;overflow-x:auto}.playground-edits-strip::-webkit-scrollbar{display:none}.playground-edit-chip{cursor:pointer;flex-direction:column;align-items:center;gap:4px;transition:transform .2s;display:flex}.playground-edit-chip:hover{transform:translateY(-2px)}.chip-thumb-wrapper{background:#fff;border:2px solid #fff;border-radius:14px;place-items:center;width:52px;height:52px;display:grid;position:relative;overflow:visible;box-shadow:0 4px 12px #00000014}.chip-thumb-wrapper img{object-fit:cover;border-radius:12px;width:100%;height:100%}.chip-fallback-icon{font-size:22px}.chip-remove-btn{color:#fff;cursor:pointer;opacity:.8;background:#333;border:none;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;font-size:12px;line-height:1;transition:opacity .15s,transform .15s;display:flex;position:absolute;top:-6px;right:-6px}.chip-remove-btn:hover{opacity:1;background:#e53935;transform:scale(1.1)}.chip-info{flex-direction:column;align-items:center;max-width:90px;display:flex}.chip-title{color:#8e8984;font-size:10px;font-weight:500}.chip-prompt{color:#464542;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:11px;font-weight:600;overflow:hidden}.prompt-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffffeb;border:1px solid #fffc;border-radius:28px;width:min(92vw,560px);padding:16px 20px 12px;transition:all .2s;position:relative;box-shadow:0 12px 40px #00000014}.prompt-card textarea{resize:none;color:#222;background:0 0;border:0;outline:0;width:100%;height:42px;max-height:90px;padding:1px 8px;font-size:15px;line-height:1.55;display:block}.prompt-card textarea::placeholder{color:#aaa5a1}.playground-bottom{justify-content:space-between;align-items:center;margin-top:10px;display:flex}.playground-status-pill{color:#8e8984;align-items:center;gap:8px;font-size:12px;font-weight:500;display:flex}.playground-status-pill .dot{box-sizing:border-box;border:2px solid #bbb;border-radius:50%;width:10px;height:10px}.playground-right-actions{align-items:center;gap:10px;display:flex}.clear-btn{color:#555;cursor:pointer;background:#efedeb;border:none;border-radius:16px;padding:6px 14px;font-size:12px;font-weight:600;transition:background .15s}.clear-btn:hover{background:#e2dfdc}.send-btn.dark-circle{color:#fff;cursor:pointer;background:#222;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:16px;font-weight:700;transition:transform .15s,background .15s;display:flex}.send-btn.dark-circle.ready{background:#000;box-shadow:0 4px 12px #00000040}.send-btn.dark-circle:hover{transform:scale(1.05)}.region-edit-controls{color:#77716d;justify-content:space-between;align-items:center;gap:10px;margin:8px 8px 0;font-size:11px;display:flex}.region-edit-controls button,.region-edit-item button{color:#2878d7;cursor:pointer;background:#e8f1ff;border:0;border-radius:9px;padding:5px 9px;font-size:11px;font-weight:700}.region-edit-list{gap:5px;max-height:100px;margin:8px 8px 0;display:grid;overflow:auto}.region-edit-item{color:#77716d;background:#f1efed;border-radius:9px;grid-template-columns:auto 1fr auto;align-items:center;gap:7px;padding:6px 8px;font-size:11px;display:grid}.region-edit-item b{color:#464542;text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.region-edit-item button{color:#a25c68;background:0 0;padding:2px 4px}.region-edit-list>small{color:#99928d;font-size:10px}.round-btn,.send-btn{cursor:pointer;border:0;border-radius:50%;place-items:center;width:43px;height:43px;font-size:27px;display:grid}.round-btn{color:#4d4a47;background:#e9e7e5;font-weight:400}.model-chip{color:#44413e;cursor:pointer;background:#e9e7e5;border:0;border-radius:23px;height:43px;padding:0 16px;font-weight:650}.model-chip span{color:#76716d;margin-left:8px;font-size:19px}.send-btn{color:#fff;background:#858380;margin-left:auto;font-size:28px;line-height:1}.send-btn.ready{background:var(--blue)}.send-btn:disabled{opacity:.6;cursor:wait}.model-menu{border:1px solid var(--line);background:#fff;border-radius:17px;width:280px;max-height:280px;padding:7px;position:absolute;bottom:58px;left:58px;overflow:auto;box-shadow:0 12px 35px #332b2530}.model-menu button{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:11px;width:100%;padding:10px 12px;font-weight:650}.model-menu button:hover,.model-menu button.active{background:#f0eeec}.model-menu small{color:#9b9691;margin-top:3px;font-weight:400;display:block}.tool-row{gap:9px;display:flex;position:relative}.tool-group{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#faf9f8f2;border:3px solid #fff;border-radius:27px;align-items:center;height:54px;padding:5px 8px;display:flex;box-shadow:0 9px 28px #463f3920}.tool-group.compact{padding-inline:7px}.tool-btn{color:#504d49;cursor:pointer;background:0 0;border:0;border-radius:17px;place-items:center;width:43px;height:40px;font-size:23px;transition:all .15s;display:grid}.tool-btn:hover{background:#eae7e4}.tool-btn.active{color:#151413;background:#e3e0dd}.tool-btn[data-tool=text]{font-size:21px;font-weight:700}.brush-popover{background:#fff;border-radius:18px;align-items:center;gap:10px;height:48px;padding:0 16px;font-size:12px;display:flex;position:absolute;bottom:64px;left:50%;transform:translate(-50%);box-shadow:0 9px 28px #463f3930}.brush-popover input{accent-color:#ff4f8b;width:135px}.brush-popover b{width:24px}.mode-hint{color:#fff;white-space:nowrap;background:#34312f;border-radius:20px;margin:0;padding:8px 14px;font-size:12px;position:absolute;bottom:65px}.layers-strip{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#fbfaf9f2;border:3px solid #fff;border-radius:22px;width:min(96vw,570px);margin-top:4px;padding:12px 14px;box-shadow:0 9px 28px #463f3920}@media (width>=761px){.floating-dock{align-items:stretch;max-height:calc(100vh - 44px);inset:50% 22px auto auto;transform:translateY(-50%)}.prompt-card,.layers-strip{width:min(330px,30vw)}.layers-strip-list{max-height:min(42vh,360px)}}.layers-strip-head{color:#6a6560;align-items:center;gap:10px;margin-bottom:10px;font-size:12px;display:flex}.layers-strip-head b{color:#2f2c29;font-size:13px}.layers-strip-head button{cursor:pointer;background:#e9e7e5;border:0;border-radius:14px;margin-left:auto;padding:4px 10px;font-size:12px}.layers-strip-head .linkish{color:#2f8cf6;cursor:pointer;background:0 0;border:0;padding:0;font-size:12px}.layers-strip-list{gap:10px;padding-bottom:4px;display:flex;overflow-x:auto}.layer-thumb{background:repeating-conic-gradient(#eee 0% 25%,#fff 0% 50%) 50%/12px 12px;border:2px solid #0000;border-radius:14px;flex:none;width:96px;padding:4px}.layer-thumb.active{border-color:#2f8cf6}.layer-thumb.hidden-layer{opacity:.45}.layer-thumb-main{cursor:pointer;background:0 0;border:0;width:100%;padding:0;display:block}.layer-thumb img{aspect-ratio:1;object-fit:contain;border-radius:10px;width:100%;display:block}.layer-thumb-main span{text-align:center;color:#5b5753;margin-top:4px;font-size:11px;font-weight:650;display:block}.layer-thumb-actions{gap:4px;margin-top:4px;display:flex}.layer-thumb-actions button{cursor:pointer;color:#444;background:#e9e7e5;border:0;border-radius:8px;flex:1;padding:4px 0;font-size:11px;font-weight:700}.layer-thumb-actions button:hover{background:#dcd9d6}.toast{z-index:50;color:#fff;opacity:0;pointer-events:none;background:#272522;border-radius:20px;padding:10px 16px;font-size:13px;transition:all .2s;position:fixed;top:24px;left:50%;transform:translate(-50%,-15px)}.toast.show{opacity:1;transform:translate(-50%)}.hidden{display:none!important}@media (width<=760px){.floating-dock{max-width:calc(100vw - 20px);top:94px;right:10px}.topbar{height:70px;padding:0 13px}.history-actions{left:14px;transform:none}.plain-icon{font-size:25px}.export-btn,.share-btn{height:40px;padding:0 16px;font-size:13px}.viewport{padding:20px 10px 290px;inset:68px 0 0}.artboard{width:min(94vw,100vh - 160px)}.floating-dock{align-items:stretch;width:min(96vw,570px);max-width:calc(100vw - 20px);padding:0;inset:94px 10px auto auto;transform:none}.prompt-card{border-width:4px;width:min(96vw,570px);min-height:118px}.tool-row{scrollbar-width:none;justify-content:flex-start;max-width:96vw;overflow-x:auto}.tool-group{flex:none}.tool-btn{width:39px}.mode-hint{bottom:60px}.history-actions .disabled{display:none}}.floating-dock.is-positioned{bottom:auto;right:auto;transform:none}.floating-dock{align-items:flex-start;gap:14px;width:min(570px,100vw - 32px);inset:clamp(24px,8vh,65px) auto auto clamp(16px,9.2vw,84px)}.floating-dock:not(.is-positioned){transform:none}.floating-dock-grip{background:#fffffff2;border-radius:14px;width:74px;height:28px;box-shadow:0 7px 20px #37302b24}.prompt-card{background:#fffffff2;border-radius:36px;width:100%;min-height:168px;padding:24px 24px 18px;box-shadow:0 18px 42px #413a3521}.prompt-card textarea{height:64px;padding:0 14px;font-size:18px;font-weight:600}.playground-bottom{margin-top:12px;padding:0 10px}.playground-status-pill{color:#817d79;gap:10px;font-size:13px;font-weight:600}.playground-status-pill .dot{width:11px;height:11px}.round-btn{background:#ebe9e7;width:58px;height:58px}.send-btn.dark-circle{width:50px;height:50px;font-size:25px}.tool-row{gap:14px;width:100%}.tool-group{background:#fffffff0;border:4px solid #fff;border-radius:38px;height:72px;padding:6px 10px;box-shadow:0 10px 26px #463f391f}.tool-btn{border-radius:25px;width:51px;height:52px;font-size:26px}.layers-strip{background:#fffffff0;border-radius:30px;width:100%;margin-top:6px;padding:18px 20px;box-shadow:0 14px 34px #413a3524}@media (width>=761px){.prompt-card,.layers-strip{width:100%}}@media (width<=760px){.floating-dock{align-items:stretch;width:auto;max-width:none;top:24px;left:16px;right:16px}.floating-dock-grip{align-self:flex-start}}