*{box-sizing:border-box}
:root{--a:#5b4cf5;--bg:#f5f6fa;--line:#e3e6ef;--r:12px}
[hidden]{display:none!important}
body{margin:0;height:100vh;display:flex;flex-direction:column;font:14px/1.4 Inter,system-ui,sans-serif;background:var(--bg);color:#1b1f33}
header{display:flex;align-items:center;gap:10px;padding:10px 18px;background:#fff;border-bottom:1px solid var(--line)}
.logo{font-size:16px;letter-spacing:-.2px}.logo::before{content:"";display:inline-block;width:12px;height:12px;border-radius:4px;background:var(--a);margin-right:8px}
.sp{flex:1}
nav{display:flex;gap:2px;background:var(--bg);padding:3px;border-radius:999px}
button,select,input{font:inherit}
button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 13px;cursor:pointer;transition:.15s}
button:hover{border-color:var(--a);color:var(--a)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--a);outline-offset:1px}
nav button{border:0;background:none;border-radius:999px;padding:6px 16px}
nav .on{background:#fff;color:var(--a);box-shadow:0 1px 4px #0002}
.pri{background:var(--a);color:#fff;border-color:var(--a)}.pri:hover{color:#fff;filter:brightness(1.1)}
main{flex:1;display:flex;gap:12px;padding:12px;min-height:0}
aside{width:210px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;overflow:auto;display:flex;flex-direction:column;gap:8px;flex-shrink:0}
#tools{display:grid;grid-template-columns:1fr 1fr;align-content:start}
#tools>*:not(button){grid-column:1/3}
#tools button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;font-size:12px}
#tools button b{font-size:18px;color:var(--a)}
#tools #rst{grid-column:1/3;flex-direction:row;justify-content:center}
#props{width:240px}
h4{margin:8px 0 2px;font-size:12px;font-weight:600;color:#7a8095}
label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:#5b6074}
input,select{padding:7px 9px;border:1px solid var(--line);border-radius:8px;width:100%;background:#fff}
input[type=color]{padding:2px;height:34px}
.mut{color:#8a90a5;margin:0}.center{text-align:center}
section{flex:1;overflow:auto;padding:24px;border-radius:var(--r);border:1px solid var(--line);background:#e9ebf3 radial-gradient(#cdd1e0 1px,transparent 1px) 0 0/20px 20px}
#page{position:relative;width:960px;margin:0 auto;box-shadow:0 10px 40px #1b1f3322;border-radius:6px;overflow:hidden;user-select:none}
.el{position:absolute;overflow:hidden;white-space:pre-wrap;line-height:1.2;text-decoration:none;cursor:move;outline:1px dashed transparent}
.el:hover{outline-color:var(--a)}
.el.sel{outline:2px solid var(--a)}
.t-b{display:flex;align-items:center;justify-content:center;cursor:pointer}
.t-b:hover{filter:brightness(1.1)}
.t-i{display:flex;align-items:center;justify-content:center;background:#e4e6ee;color:#777}
.t-i img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.rz{position:absolute;right:2px;bottom:2px;width:14px;height:14px;background:var(--a);border:2px solid #fff;border-radius:50%;cursor:nwse-resize}
[contenteditable=true]{user-select:text;cursor:text;outline:2px solid #f59e0b}
.sc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;margin:0 auto 18px;max-width:680px;display:flex;flex-direction:column;gap:10px;box-shadow:0 2px 12px #1b1f3312}
.hat{display:flex;gap:8px;align-items:center;background:#f59e0b;color:#fff;padding:10px 14px;border-radius:22px 22px 8px 8px;font-weight:600}
.hat select,.hat input{width:auto;flex:1;min-width:0;border:0;border-radius:999px;color:#222}
.hat button{padding:2px 9px;background:#fff4}
.stack{display:flex;flex-direction:column;gap:6px;padding-left:10px;min-height:8px}
.blk{--c:#8b5cf6;position:relative;display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:8px;background:var(--c);color:#fff;font-weight:500;cursor:grab;box-shadow:0 2px 0 #0003}
.blk::before{content:"";position:absolute;left:14px;top:-5px;width:18px;height:6px;background:var(--c);border-radius:3px 3px 0 0}
.blk span{white-space:nowrap}
.blk select,.blk input{width:auto;flex:1;min-width:0;background:#fff;color:#222;border:0;border-radius:999px;padding:4px 10px}
.blk input[type=color]{flex:0 0 46px;padding:0;height:26px}
.blk button{padding:0 8px;background:#fff3;color:#fff;border:0}
.pal{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:10px}
.grp{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.grp b{width:62px;font-size:12px;color:var(--c)}
.chip{--c:#888;border:0;padding:5px 12px;font-weight:500;border-radius:999px;background:color-mix(in srgb,var(--c) 14%,#fff);color:color-mix(in srgb,var(--c) 75%,#000)}
.chip:hover{background:var(--c);color:#fff}
#pv{position:fixed;inset:0;background:#0008;display:flex;align-items:center;justify-content:center;z-index:9}
#pv>div{background:#fff;border-radius:16px;padding:12px;width:min(1020px,95vw);height:90vh;display:flex;flex-direction:column;gap:8px}
#pv iframe{flex:1;border:0;border-radius:8px;background:#fff}