:root{--c-bg:#08080b;--c-panel:#0e0e13;--c-panel2:#141419;--c-line:#22222c;--c-txt:#ececf1;--c-mut:#8e8e9c;--c-dim:#5f5f6d;--c-acc:#7c6cff;--c-acc2:#22d3ee;--c-ok:#34d399;--c-err:#fb7185;--c-warn:#fbbf24;--r:11px;--topbar:56px;--bottombar:64px;--ff:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}*,:before,:after{box-sizing:border-box}html,body{height:100%}body{background:var(--c-bg);color:var(--c-txt);font-family:var(--ff);-webkit-font-smoothing:antialiased;margin:0;font-size:14px;overflow:hidden}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#2b2b36;border-radius:9px}::-webkit-scrollbar-thumb:hover{background:#3a3a48}.btn{border:1px solid var(--c-line);background:var(--c-panel2);cursor:pointer;white-space:nowrap;border-radius:9px;justify-content:center;align-items:center;gap:7px;padding:8px 14px;font-size:13.2px;font-weight:550;transition:background .15s,border-color .15s,opacity .15s;display:inline-flex}.btn:hover:not(:disabled){background:#1c1c24;border-color:#30303c}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.pri{color:#fff;background:linear-gradient(#8a7bff,#6d5efc);border-color:#0000;box-shadow:0 8px 22px -10px #7c6cfce6}.btn.pri:hover:not(:disabled){background:linear-gradient(#9d90ff,#7c6cff)}.btn.ghost{background:0 0}.btn.sm{border-radius:7px;padding:5px 9px;font-size:12.2px}.btn.icon{width:30px;height:30px;padding:6px}.btn.danger:hover{color:#ffb4c0;background:#2a1118;border-color:#5a2230}.inp,.sel,textarea.inp{border:1px solid var(--c-line);width:100%;color:var(--c-txt);background:#0b0b10;border-radius:9px;padding:8px 11px;font-size:13.4px;transition:border-color .15s,box-shadow .15s}.inp:focus,.sel:focus,textarea.inp:focus{border-color:var(--c-acc);outline:none;box-shadow:0 0 0 3px #7c6cfc2b}textarea.inp{resize:vertical;min-height:62px;line-height:1.5}.sel{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--c-mut) 50%),linear-gradient(135deg,var(--c-mut) 50%,transparent 50%);background-position:calc(100% - 17px) 54%,calc(100% - 12px) 54%;background-repeat:no-repeat;background-size:5px 5px;padding-right:32px}.lbl{color:var(--c-mut);letter-spacing:.015em;margin-bottom:5px;font-size:11.4px;font-weight:600;display:block}.hint{color:var(--c-dim);margin-top:4px;font-size:11.2px;line-height:1.45}.sw{appearance:none;cursor:pointer;background:#272731;border-radius:99px;flex:0 0 34px;width:34px;height:20px;transition:background .18s;position:relative}.sw:after{content:"";background:#8b8b99;border-radius:50%;width:16px;height:16px;transition:transform .18s,background .18s;position:absolute;top:2px;left:2px}.sw:checked{background:var(--c-acc)}.sw:checked:after{background:#fff;transform:translate(14px)}.row{align-items:center;gap:9px;display:flex}.col{flex-direction:column;gap:9px;display:flex}.sp{flex:1}.chip{border:1px solid var(--c-line);color:var(--c-mut);background:var(--c-panel2);border-radius:99px;align-items:center;gap:5px;padding:3px 8px;font-size:11px;display:inline-flex}.chip.ok{color:var(--c-ok);background:#0d2019;border-color:#1d4435}.chip.warn{color:var(--c-warn);background:#241c08;border-color:#4a3a16}.chip.err{color:var(--c-err);background:#250f16;border-color:#4d2230}.app{flex-direction:column;height:100vh;display:flex;overflow:hidden}.topbar{height:var(--topbar);flex:0 0 var(--topbar);border-bottom:1px solid var(--c-line);background:var(--c-panel);align-items:center;gap:10px;padding:0 12px;display:flex}.brand{letter-spacing:-.02em;align-items:center;gap:9px;font-size:14.5px;font-weight:700;display:flex}.brand .mark{background:linear-gradient(135deg,var(--c-acc),var(--c-acc2));color:#fff;border-radius:7px;place-items:center;width:24px;height:24px;font-size:13px;font-weight:800;display:grid}.main{flex:1;grid-template-columns:260px 1fr 320px;min-height:0;display:grid}.pane{background:var(--c-panel);flex-direction:column;min-height:0;display:flex;overflow:hidden}.pane.left{border-right:1px solid var(--c-line)}.pane.right{border-left:1px solid var(--c-line)}.pane__h{border-bottom:1px solid var(--c-line);letter-spacing:.1em;text-transform:uppercase;color:var(--c-dim);flex:none;align-items:center;gap:8px;padding:10px 12px;font-size:11.5px;font-weight:700;display:flex}.pane__b{flex:1;padding:10px;overflow-y:auto}.pane__f{border-top:1px solid var(--c-line);flex:none;padding:10px}.blk{cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #0000;border-radius:9px;align-items:center;gap:8px;padding:7px 9px;transition:background .13s,border-color .13s;display:flex}.blk:hover{background:var(--c-panel2)}.blk.sel{background:#7c6cfc24;border-color:#7c6cfc73}.blk.off{opacity:.42}.blk.drag{opacity:.35}.blk.over{border-top:2px solid var(--c-acc)}.blk__i{background:#1b1b23;border-radius:6px;flex:0 0 22px;place-items:center;width:22px;height:22px;font-size:11.5px;display:grid}.blk__n{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:13px;font-weight:550;overflow:hidden}.blk__v{color:var(--c-dim);text-transform:lowercase;font-size:10.5px}.blk__a{opacity:0;gap:2px;transition:opacity .13s;display:flex}.blk:hover .blk__a,.blk.sel .blk__a{opacity:1}.blk__a button{all:unset;cursor:pointer;width:22px;height:22px;color:var(--c-dim);border-radius:5px;place-items:center;font-size:12px;display:grid}.blk__a button:hover{color:var(--c-txt);background:#26262f}.grp{letter-spacing:.11em;text-transform:uppercase;color:var(--c-dim);margin:12px 4px 5px;font-size:10.5px;font-weight:700}.grp:first-child{margin-top:2px}.canvas{background:radial-gradient(900px 400px at 50% -10%,#7c6cfc1a,#0000 70%),#0a0a0e;flex-direction:column;min-width:0;display:flex;position:relative}.canvas__bar{border-bottom:1px solid var(--c-line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0e0e13b3;flex:none;align-items:center;gap:8px;padding:8px 12px;display:flex}.canvas__stage{flex:1;padding:24px;position:relative;overflow:hidden}.frame{transform-origin:top;background:#fff;border:1px solid #1e1e28;border-radius:14px;transition:width .22s cubic-bezier(.2,.8,.2,1);position:absolute;top:24px;left:50%;overflow:hidden;box-shadow:0 30px 80px -24px #000000d9}.frame iframe{background:#fff;border:0;width:100%;height:100%;display:block}.zoomchip{border:1px solid var(--c-line);color:var(--c-mut);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;background:#0a0a0ed1;border-radius:999px;padding:4px 9px;font-size:11.5px;font-weight:600;position:absolute;bottom:12px;right:12px}.seg{border:1px solid var(--c-line);background:#101016;border-radius:9px;gap:2px;padding:2px;display:inline-flex}.seg button{all:unset;cursor:pointer;color:var(--c-mut);border-radius:7px;padding:5px 10px;font-size:12.2px;font-weight:550}.seg button[aria-pressed=true]{color:var(--c-txt);background:#25252f}.aibar{border-top:1px solid var(--c-line);background:var(--c-panel);flex:none;padding:10px 12px}.aibar__in{align-items:center;gap:8px;max-width:1100px;margin:0 auto;display:flex}.aibar input{flex:1}.aibar__log{flex-direction:column;gap:5px;max-width:1100px;max-height:92px;margin:0 auto 8px;display:flex;overflow-y:auto}.aibar__m{border-radius:8px;max-width:85%;padding:6px 10px;font-size:12.3px;line-height:1.45}.aibar__m.user{background:#7c6cfc2b;border:1px solid #7c6cfc4d;align-self:flex-end}.aibar__m.ai{background:var(--c-panel2);border:1px solid var(--c-line);color:var(--c-mut);align-self:flex-start}.sugg{flex-wrap:wrap;gap:6px;max-width:1100px;margin:7px auto 0;display:flex}.sugg button{all:unset;cursor:pointer;color:var(--c-mut);border:1px solid var(--c-line);background:var(--c-panel2);border-radius:99px;padding:3px 9px;font-size:11.4px}.sugg button:hover{color:var(--c-txt);border-color:#34343f}.tabs{border-bottom:1px solid var(--c-line);background:var(--c-panel);gap:2px;padding:7px;display:flex}.tabs button{all:unset;text-align:center;cursor:pointer;color:var(--c-mut);border-radius:7px;flex:1;padding:6px 4px;font-size:12px;font-weight:600}.tabs button[aria-selected=true]{color:var(--c-txt);background:#1e1e26}.fld{margin-bottom:13px}.sect{border:1px solid var(--c-line);background:#0b0b10;border-radius:10px;margin-bottom:10px;overflow:hidden}.sect>summary{cursor:pointer;background:var(--c-panel2);align-items:center;gap:7px;padding:9px 11px;font-size:12.3px;font-weight:650;list-style:none;display:flex}.sect>summary::-webkit-details-marker{display:none}.sect>summary:before{content:"▸";color:var(--c-dim);font-size:10px;transition:transform .16s}.sect[open]>summary:before{transform:rotate(90deg)}.sect__b{padding:11px}.item{border:1px solid var(--c-line);background:#0b0b10;border-radius:9px;margin-bottom:8px;padding:9px}.item__h{align-items:center;gap:6px;margin-bottom:8px;display:flex}.item__t{color:var(--c-mut);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:12px;font-weight:600;overflow:hidden}.colorrow{align-items:center;gap:7px;display:flex}.colorrow input[type=color]{border:1px solid var(--c-line);cursor:pointer;background:0 0;border-radius:7px;flex:0 0 30px;width:30px;height:30px;padding:0}.presets{grid-template-columns:1fr 1fr;gap:7px;display:grid}.preset{cursor:pointer;border:1px solid var(--c-line);text-align:left;background:#0b0b10;border-radius:9px;padding:8px;transition:border-color .15s}.preset:hover{border-color:#34343f}.preset[aria-pressed=true]{border-color:var(--c-acc);background:#7c6cfc1a}.preset__sw{gap:3px;margin-bottom:6px;display:flex}.preset__sw i{border-radius:4px;width:13px;height:13px;display:block}.preset__n{font-size:12px;font-weight:650}.preset__h{color:var(--c-dim);margin-top:2px;font-size:10.3px;line-height:1.35}.lib{z-index:200;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#050508b8;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.lib__p{background:var(--c-panel);border:1px solid var(--c-line);border-radius:16px;flex-direction:column;width:min(880px,100%);max-height:84vh;display:flex;overflow:hidden;box-shadow:0 40px 100px -30px #000}.lib__h{border-bottom:1px solid var(--c-line);align-items:center;gap:10px;padding:14px 16px;display:flex}.lib__b{padding:14px 16px;overflow-y:auto}.lib__g{grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:9px;margin-bottom:16px;display:grid}.lib__c{cursor:pointer;border:1px solid var(--c-line);text-align:left;background:#0b0b10;border-radius:10px;padding:11px;transition:border-color .15s,transform .15s}.lib__c:hover{border-color:var(--c-acc);transform:translateY(-1px)}.lib__c b{margin:6px 0 2px;font-size:12.8px;display:block}.lib__c span{color:var(--c-dim);font-size:10.8px;line-height:1.35;display:block}.toast{z-index:300;border:1px solid var(--c-line);background:#15151c;border-radius:10px;max-width:min(520px,92vw);padding:10px 16px;font-size:13px;position:fixed;bottom:18px;left:50%;transform:translate(-50%);box-shadow:0 18px 44px -14px #000}.toast.ok{color:#9ff0cd;border-color:#1d4435}.toast.err{color:#ffb4c0;border-color:#4d2230}.dash{background:radial-gradient(1100px 520px at 50% -8%,#7c6cfc2b,transparent 68%),var(--c-bg);height:100vh;overflow-y:auto}.dash__w{max-width:1040px;margin:0 auto;padding:46px 22px 70px}.hero-h{letter-spacing:-.035em;background:linear-gradient(135deg,#fff 28%,#9d90ff);color:#0000;-webkit-background-clip:text;background-clip:text;margin:0 0 10px;font-size:clamp(1.9rem,4.4vw,2.9rem);font-weight:750;line-height:1.05}.dash p.sub{color:var(--c-mut);max-width:620px;margin:0 0 26px;font-size:15.5px;line-height:1.6}.promptbox{border:1px solid var(--c-line);background:var(--c-panel);border-radius:15px;padding:13px;box-shadow:0 22px 60px -26px #000000e6}.promptbox textarea{resize:vertical;background:0 0;border:0;outline:none;width:100%;min-height:92px;padding:6px;font-size:15px;line-height:1.55}.promptbox textarea::placeholder{color:var(--c-dim)}.promptbox__f{border-top:1px solid var(--c-line);flex-wrap:wrap;align-items:center;gap:9px;padding-top:9px;display:flex}.examples{grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:9px;margin-top:14px;display:grid}.ex{cursor:pointer;text-align:left;border:1px solid var(--c-line);background:var(--c-panel);border-radius:11px;padding:11px 13px;transition:border-color .15s,transform .15s}.ex:hover{border-color:var(--c-acc);transform:translateY(-1px)}.ex b{margin-bottom:3px;font-size:12.6px;display:block}.ex span{color:var(--c-dim);font-size:11.6px;line-height:1.45;display:block}.cards{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:11px;margin-top:14px;display:grid}.card2{border:1px solid var(--c-line);background:var(--c-panel);border-radius:12px;flex-direction:column;gap:8px;padding:14px;transition:border-color .15s,transform .15s;display:flex}.card2:hover{border-color:#32323e;transform:translateY(-1px)}.card2 h3{letter-spacing:-.015em;margin:0;font-size:14.6px;font-weight:650}.sec-h{letter-spacing:.11em;text-transform:uppercase;color:var(--c-dim);align-items:center;gap:9px;margin:40px 0 4px;font-size:12px;font-weight:700;display:flex}.sec-h:after{content:"";background:var(--c-line);flex:1;height:1px}@media (max-width:1180px){.main{grid-template-columns:220px 1fr 290px}}@media (max-width:980px){.main{grid-template-columns:1fr}.pane.left,.pane.right{display:none}body.show-left .pane.left,body.show-right .pane.right{top:var(--topbar);z-index:150;width:280px;display:flex;position:fixed;bottom:0}body.show-left .pane.left{left:0}body.show-right .pane.right{right:0}}