:root, [data-theme="dark"]{
  --app:#09090a; --panel:#131315; --panel2:#1b1b1e; --panel3:#26262a; --hover:#2c2c31; --line:#232327;
  --text:#ececef; --dim:#8b8b93; --faint:#5c5c64; --accent:#f5c8ff; --accentInk:#3a1045; --primary:#f2f2f4; --primaryInk:#0d0d0f;
  --shadow:0 10px 40px rgba(0,0,0,.45); --stage:#000; --checker1:#1a1a1d; --checker2:#222226; color-scheme:dark;
}
[data-theme="light"]{
  --app:#eeeef0; --panel:#fafafb; --panel2:#f0f0f2; --panel3:#e4e4e8; --hover:#e8e8ec; --line:#e4e4e8;
  --text:#121214; --dim:#767680; --faint:#a6a6ae; --accent:#f5c8ff; --accentInk:#3a1045; --primary:#121214; --primaryInk:#ffffff;
  --shadow:0 10px 36px rgba(20,20,30,.12); --stage:#f6f6f7; --checker1:#ececef; --checker2:#f7f7f9; color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--app);color:var(--text);font:12.5px/1.4 Inter,system-ui,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
svg{display:block}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--panel3);border-radius:8px}::-webkit-scrollbar-track{background:transparent}

.app{display:grid;grid-template-rows:52px 1fr;height:100%;padding:8px;gap:8px}
.top{display:flex;align-items:center;gap:10px;padding:0 10px 0 14px;background:var(--panel);border-radius:14px}
.brand{display:flex;align-items:center;gap:9px;font-weight:650;font-size:16px;letter-spacing:-.02em}
.brand{color:inherit;text-decoration:none}
.brand .logo{height:34px;width:auto;display:block}
.brand .dk,[data-theme="dark"] .brand .lt{display:none}
[data-theme="dark"] .brand .dk{display:block}
.brand .beta{font-size:10px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line,rgba(127,127,127,.3));border-radius:99px;padding:2px 7px}
.top .mid{flex:1;display:flex;justify-content:center;align-items:center;gap:8px;color:var(--dim)}
.top .mid input{background:transparent;border:1px solid transparent;border-radius:8px;padding:5px 8px;text-align:center;width:220px;color:var(--text)}
.top .mid input:hover{border-color:var(--line)}
.top .mid input:focus{outline:none;border-color:var(--panel3);background:var(--panel2)}
.seg2{display:flex;background:var(--panel2);border-radius:10px;padding:3px;gap:2px}
.seg2 button{border:0;background:none;border-radius:7px;width:30px;height:26px;display:grid;place-items:center;cursor:pointer;color:var(--dim)}
.seg2 button.on{background:var(--panel3);color:var(--text)}
.ib{border:0;background:var(--panel2);border-radius:10px;height:32px;min-width:32px;padding:0 9px;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;color:var(--text)}
.ib:hover{background:var(--hover)}
.ib.ghost{background:none}
.ib.ghost:hover{background:var(--panel2)}
.ib:disabled{opacity:.4;cursor:default}
.btn-primary{border:0;background:#0055ff;color:#fff;border-radius:10px;height:32px;padding:0 14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:7px}
.btn-primary:hover{filter:brightness(.92)}
.btn-primary:disabled{opacity:.5;cursor:default}

.body{display:grid;grid-template-columns:64px 292px minmax(0,1fr) 316px;gap:8px;min-height:0}
.panel{background:var(--panel);border-radius:14px;min-height:0;overflow:auto}
.rail{display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:6px}
.rail button{border:0;background:none;width:48px;border-radius:12px;padding:8px 0 6px;cursor:pointer;color:var(--dim);display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10.5px;position:relative}
.rail button svg{width:18px;height:18px}
.rail button:hover{color:var(--text)}
.rail button.on{color:var(--text)}
.rail button.on .ic{background:var(--panel3)}
.rail .ic{width:38px;height:34px;border-radius:10px;display:grid;place-items:center}
.badge{background:var(--accent);color:var(--accentInk);font-size:9.5px;font-weight:650;border-radius:6px;padding:1px 5px;letter-spacing:.01em}
.rail .badge{position:absolute;right:-6px;top:6px}

.lp{padding:12px;display:flex;flex-direction:column;gap:10px}
.lp-head{display:flex;justify-content:center;gap:10px;padding:4px 0 6px}
.bigtab{border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--dim);font-size:11px}
.bigtab .ic{width:46px;height:44px;border-radius:12px;background:var(--panel2);display:grid;place-items:center;color:var(--dim)}
.bigtab.on{color:var(--text)}.bigtab.on .ic{background:var(--panel3);color:var(--text)}
.tabs{display:flex;background:var(--panel2);border-radius:12px;padding:4px;gap:4px}
.tabs button{flex:1;border:0;background:none;padding:8px 0;border-radius:9px;color:var(--dim);cursor:pointer;font-weight:500}
.tabs button.on{background:var(--panel3);color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:0;background:var(--panel2);color:var(--dim);border-radius:8px;padding:5px 9px;cursor:pointer;font-size:11.5px;white-space:nowrap}
.chip:hover{color:var(--text)}
.chip.on{background:var(--panel3);color:var(--text)}
.search{display:flex;align-items:center;gap:8px;background:var(--panel2);border-radius:10px;padding:0 10px;height:34px;color:var(--dim)}
.search input{flex:1;border:0;background:none;outline:none;color:var(--text)}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tpl{cursor:pointer;display:flex;flex-direction:column;gap:6px}
.tpl .th{position:relative;aspect-ratio:5/4;border-radius:11px;overflow:hidden;background:var(--panel2);outline:2px solid transparent;outline-offset:-2px;transition:outline-color .15s}
.tpl .th canvas,.tpl .th img{width:100%;height:100%;display:block;object-fit:cover}
.tpl:hover .th{outline-color:var(--panel3)}
.tpl.on .th{outline-color:var(--text)}
.tpl .nm{font-size:11px;color:var(--dim);display:flex;align-items:center;gap:6px;padding:0 2px}
.tpl.on .nm{color:var(--text)}
.tpl .th .badge{position:absolute;left:7px;top:7px}
.tpl .th .sk{position:absolute;inset:0;background:linear-gradient(90deg,var(--panel2),var(--panel3),var(--panel2));background-size:200% 100%;animation:sk 1.2s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
.cat-h{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:9px 4px;border-radius:9px;cursor:pointer;color:var(--text);font-weight:600;font-size:12.5px;text-align:left}
.cat-h:hover{background:var(--panel2)}
.cat-h .chev{color:var(--dim);transition:transform .2s}
.cat-h.open .chev{transform:rotate(90deg)}
.cat-h .nm{flex:1}
.cat-h .ct{font:11px "JetBrains Mono",monospace;color:var(--dim);background:var(--panel2);border-radius:6px;padding:1px 7px}
.cat-h .dot-on{width:6px;height:6px;border-radius:50%;background:var(--accentDot,var(--accent))}
.cat-h.open+.tgrid{margin:2px 0 10px}

.stage{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0}
.view{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:70px 28px 70px;position:relative}
.canvas-wrap{position:relative;box-shadow:0 0 0 1px var(--line);border-radius:4px;overflow:hidden;background:
  repeating-conic-gradient(var(--checker1) 0 25%, var(--checker2) 0 50%) 50% / 18px 18px}
.canvas-wrap canvas{display:block;width:100%;height:100%}
.safe{position:absolute;inset:0;pointer-events:none;display:none}
.safe.on{display:block}
.safe::before,.safe::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(255,255,255,.35) calc(33.33% - .5px),rgba(255,255,255,.35) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.35) calc(66.66% - .5px),rgba(255,255,255,.35) calc(66.66% + .5px),transparent calc(66.66% + .5px))}
.safe::after{transform:rotate(90deg) scale(var(--sx,1),var(--sy,1));background:none;border:1px dashed rgba(255,255,255,.28);inset:6%;transform:none}
.toolbar{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:5px;box-shadow:var(--shadow);z-index:5}
.toolbar .ib{background:none;height:30px;min-width:30px;border-radius:9px}
.toolbar .ib:hover,.toolbar .ib.on{background:var(--panel2)}
.toolbar .sep{width:1px;height:18px;background:var(--line);margin:0 3px}
.toolbar select{background:var(--panel2);border:0;border-radius:8px;height:28px;padding:0 6px;font-size:11.5px;cursor:pointer}
.dot{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 1px var(--line) inset}
.timeline{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px 12px 6px 6px;box-shadow:var(--shadow);width:min(560px,86%);z-index:5}
.timeline .time{font:11px "JetBrains Mono",monospace;color:var(--dim);white-space:nowrap;min-width:92px;text-align:right}
.scrub{flex:1;height:22px;position:relative;cursor:pointer}
.scrub .tr{position:absolute;left:0;right:0;top:9px;height:4px;border-radius:4px;background:var(--panel3)}
.scrub .fi{position:absolute;left:0;top:9px;height:4px;border-radius:4px;background:var(--text);opacity:.75}
.scrub .hd{position:absolute;top:4px;width:3px;height:14px;border-radius:2px;background:var(--text);transform:translateX(-50%)}
.surprise{position:absolute;right:16px;bottom:16px;z-index:5}

.rp{padding:12px;display:flex;flex-direction:column;gap:8px}
.sec{background:var(--panel2);border-radius:12px}
.sec>.sh{display:flex;align-items:center;gap:10px;padding:11px 12px;cursor:pointer;user-select:none}
.sec>.sh .tt{flex:1;display:flex;flex-direction:column}
.sec>.sh .t1{font-weight:500;display:flex;align-items:center;gap:7px}
.sec>.sh .t2{font-size:11px;color:var(--dim)}
.sec>.sh .chev{color:var(--dim);transition:transform .2s}
.sec.open>.sh .chev{transform:rotate(90deg)}
.sec>.sb{display:none;padding:2px 12px 12px;flex-direction:column;gap:8px}
.sec.open>.sb{display:flex}
.sec.flat{background:none}
.sec.flat>.sh{padding:8px 2px}
.sec.flat>.sb{padding:2px 2px 10px}
.row{display:flex;align-items:center;gap:10px;min-height:28px}
.row>label{width:84px;flex:none;color:var(--dim);font-size:11.5px}
.row>.ctl{flex:1;min-width:0;display:flex;align-items:center;gap:6px}
.sl{position:relative;flex:1;height:28px;border-radius:8px;background:var(--panel3);overflow:hidden;cursor:ew-resize;touch-action:none;outline:none}
.sec .sl{background:var(--panel)}
.sl .fi{position:absolute;left:0;top:0;bottom:0;background:var(--hover)}
[data-theme="light"] .sl .fi{background:#dcdce2}
.sl .kn{position:absolute;top:7px;width:2px;height:14px;border-radius:1px;background:var(--text);opacity:.75}
.sl .vl{position:absolute;right:9px;top:0;line-height:28px;font:11px "JetBrains Mono",monospace;color:var(--dim);pointer-events:none}
.sl:focus-visible{box-shadow:0 0 0 2px var(--text) inset}
.sl input{position:absolute;right:4px;top:3px;height:22px;width:64px;border:0;border-radius:6px;background:var(--panel2);text-align:right;padding:0 6px;font:11px "JetBrains Mono",monospace;outline:none}
.sg{display:flex;gap:4px;flex:1}
.sg button{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;border:0;background:var(--panel3);color:var(--dim);border-radius:8px;height:28px;cursor:pointer;font-size:11.5px;white-space:nowrap;padding:0 6px}
.sec .sg button{background:var(--panel)}
.sg button.on{background:var(--hover);color:var(--text)}
[data-theme="light"] .sg button.on{background:#ffffff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.tg{width:30px;height:18px;border-radius:6px;background:var(--panel3);position:relative;cursor:pointer;flex:none;border:0;padding:0}
.sec .tg{background:var(--panel)}
.tg::after{content:"";position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:4px;background:var(--faint);transition:.15s}
.tg.on{background:var(--text)}
.tg.on::after{left:15px;background:var(--panel)}
.sel{flex:1;height:28px;border:0;border-radius:8px;background:var(--panel3);padding:0 8px;cursor:pointer;min-width:0}
.sec .sel{background:var(--panel)}
.txt{flex:1;height:28px;border:0;border-radius:8px;background:var(--panel3);padding:0 9px;min-width:0;outline:none}
.sec .txt{background:var(--panel)}
.col{display:flex;align-items:center;gap:6px;flex:1}
.col input[type=color]{width:28px;height:28px;border:0;padding:0;border-radius:8px;background:none;cursor:pointer}
.col input[type=color]::-webkit-color-swatch-wrapper{padding:0}.col input[type=color]::-webkit-color-swatch{border:1px solid var(--line);border-radius:8px}
.col .txt{font:11px "JetBrains Mono",monospace}
.swatches{display:flex;flex-wrap:wrap;gap:6px}
.swatch{width:30px;height:22px;border-radius:7px;border:1px solid var(--line);cursor:pointer;padding:0;overflow:hidden;display:flex}
.swatch i{flex:1;display:block}
.swatch.on{outline:2px solid var(--text);outline-offset:1px}
.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.preset{border:0;border-radius:10px;padding:8px 6px;background:var(--panel);color:var(--dim);cursor:pointer;font-size:11px;display:flex;flex-direction:column;align-items:center;gap:6px}
.preset .pv{width:100%;height:30px;border-radius:7px}
.preset:hover{color:var(--text)}
.hint{font-size:11px;color:var(--dim)}
.grp-h{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;margin-top:6px}
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mitem{position:relative;aspect-ratio:1;border-radius:9px;overflow:hidden;background:var(--panel3);cursor:grab}
.mitem img{width:100%;height:100%;object-fit:cover;display:block}
.mitem button{position:absolute;right:4px;top:4px;width:20px;height:20px;border-radius:6px;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;display:grid;place-items:center;opacity:0}
.mitem:hover button{opacity:1}
.mitem.drag{opacity:.4}
.dropzone{border:1.5px dashed var(--panel3);border-radius:12px;padding:16px;text-align:center;color:var(--dim);cursor:pointer}
.dropzone:hover{border-color:var(--faint);color:var(--text)}
.setcards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.setcard{border:0;padding:0;background:none;cursor:pointer;display:flex;flex-direction:column;gap:5px;color:var(--dim);font-size:11px;text-align:left}
.setcard .pv{aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--panel2);outline:2px solid transparent;outline-offset:-2px}
.setcard .pv canvas{width:100%;height:100%;display:block}
.setcard.on{color:var(--text)}.setcard.on .pv{outline-color:var(--text)}
.exp-big{width:100%;justify-content:center;height:38px}
.progress{height:4px;border-radius:4px;background:var(--panel3);overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--text);transition:width .1s}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(10px);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);padding:9px 14px;border-radius:12px;opacity:0;transition:.25s;pointer-events:none;z-index:60}
.toast.on{opacity:1;transform:translateX(-50%)}
.drop{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:50;font-size:18px;font-weight:600;color:#fff}
.drop.on{display:flex}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:70}
.modal.on{display:flex}
.modal .box{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;width:min(420px,92vw);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}
.modal h3{margin:0;font-size:15px}
.kbd{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:12px}
.kbd kbd{font:11px "JetBrains Mono",monospace;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:2px 6px;justify-self:start}
.tip{position:absolute;z-index:6;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px;box-shadow:var(--shadow);font-size:11.5px;display:flex;gap:8px;align-items:center;max-width:240px}
.tip .badge{flex:none}

@media (max-width: 1100px){ .body{grid-template-columns:56px 250px minmax(0,1fr) 280px} }
@media (max-width: 860px){
  html,body{overflow:auto}
  .app{height:auto}
  .body{grid-template-columns:1fr}
  .rail{flex-direction:row;justify-content:center;padding:6px}
  .view{min-height:60vh}
}

/* controls: Surface-style groups — chevron first, title turns accent when open, body in a card */
:root{--accentText:var(--accent);--accentDot:var(--accent)} [data-theme="light"]{--accentText:#a344c2;--accentDot:#d88cf0}
.lp .sec.flat>.sh{padding:10px 2px;gap:10px}
.lp .sec.flat>.sh .chev{order:-1}
.lp .sec.flat>.sh .t1{font-size:14px;font-weight:500}
.lp .sec.flat.open>.sh .t1{color:var(--accentText)}
.lp .sec.flat.mod>.sh .t1::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accentDot)}
.lp .sec.flat>.sb{padding:12px;background:var(--panel2);border-radius:14px;margin-bottom:6px}
.lp .sec.flat .sl{background:var(--panel)}
.lp .sec.flat .sg button,.lp .sec.flat .sel,.lp .sec.flat .tg{background:var(--panel)}
[data-theme="light"] .lp .sec.flat .sg button.on{background:var(--panel3)}
.grp-h2{font-weight:600;font-size:13px;margin:8px 0 0}
.ib.sm{height:26px;min-width:26px;padding:0 7px;font-size:11px}
.ib.ghost.sm{background:none;color:var(--dim)} .ib.ghost.sm:hover{color:var(--text);background:var(--panel3)}
/* export */
.xh{font-weight:600;font-size:15px;margin:10px 2px 2px}
.summary{background:var(--panel);border-radius:10px;padding:10px 12px;color:var(--dim);font-size:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* account */
.acct{font-weight:600;font-size:12px}
.acct .av{width:24px;height:24px;border-radius:50%;background:#0055ff;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700}
.acct.on{padding:0 4px}
.modal .mp{margin:0;color:var(--dim);line-height:1.5}
.modal .tin{height:38px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--text);padding:0 12px;font:inherit;font-size:13px}
.modal .tin:focus{outline:none;border-color:#0055ff}
.modal .btn-primary{height:38px}
.modal .gbtn{height:38px;justify-content:center;font-weight:600}
.modal .or{text-align:center;color:var(--faint);font-size:11px}