:root{--bg:#f6f7f9;--surface:#fff;--surface-2:#f0f1f4;--text:#15171c;--muted:#646b78;--border:#e3e5ea;--accent:#6d5efc;--accent-soft:#edeaff;--on-accent:#fff;--danger:#e5484d;--danger-soft:#fdecec;--canvas:#e9ebef;--shadow:0 1px 2px #1012180f, 0 8px 24px #10121814;--radius:12px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:#0f1115;--surface:#17191e;--surface-2:#1f2228;--text:#eceef2;--muted:#9aa1ad;--border:#2a2e36;--accent:#8b7fff;--accent-soft:#262145;--on-accent:#fff;--danger:#ff6b6b;--danger-soft:#3a1d1f;--canvas:#0b0d10;--shadow:0 1px 2px #0006, 0 8px 24px #00000059;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}html,body,#app{height:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font:14px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}button,input,textarea,select{font:inherit;color:inherit}a{color:var(--accent)}[hidden]{display:none!important}.btn{border:1px solid var(--border);background:var(--surface);cursor:pointer;white-space:nowrap;color:var(--text);border-radius:9px;justify-content:center;align-items:center;gap:6px;padding:7px 12px;font-size:13px;font-weight:600;text-decoration:none;display:inline-flex}.btn:hover:not(:disabled){background:var(--surface-2)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:var(--accent);color:var(--on-accent);border-color:#0000}.btn.primary:hover:not(:disabled){background:var(--accent);filter:brightness(1.08)}.btn.danger{color:var(--danger)}.btn.danger.armed{background:var(--danger);color:#fff;border-color:#0000}.btn.ghost{background:0 0;border-color:#0000}.btn.ghost:hover:not(:disabled){background:var(--surface-2)}.btn.icon{width:30px;height:30px;padding:6px}.btn:focus-visible,.input:focus-visible,.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.input{border:1px solid var(--border);background:var(--surface);border-radius:9px;width:100%;padding:8px 10px}.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}textarea.input{resize:vertical;min-height:84px}.label{color:var(--muted);margin:0 0 6px;font-size:12px;font-weight:600;display:block}.hint{color:var(--muted);margin:6px 0 0;font-size:12px}.brand{color:var(--text);align-items:center;gap:10px;font-size:16px;font-weight:700;text-decoration:none;display:flex}.logo{color:#fff;background:linear-gradient(135deg,#8b7fff,#5b4be0);border-radius:9px;place-items:center;width:30px;height:30px;font-size:13px;display:grid}.home{max-width:1100px;margin:0 auto;padding:28px 20px 64px}.home-top{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:28px;display:flex}.home-top .spacer{flex:1}.hero{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:16px;grid-template-columns:1.2fr 1fr;align-items:center;gap:18px;margin-bottom:28px;padding:28px;display:grid}.hero h1{letter-spacing:-.02em;margin:0 0 10px;font-size:28px;line-height:1.15}.hero p{color:var(--muted);margin:0;font-size:15px}.hero ol{counter-reset:s;gap:10px;margin:0;padding:0;list-style:none;display:grid}.hero li{counter-increment:s;align-items:flex-start;gap:12px;display:flex}.hero li:before{content:counter(s);background:var(--accent-soft);width:24px;height:24px;color:var(--accent);border-radius:50%;flex:none;place-items:center;font-size:12px;font-weight:700;display:grid}.hero .actions{flex-wrap:wrap;gap:8px;margin-top:16px;display:flex}@media (width<=760px){.hero{grid-template-columns:1fr}}.section-title{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 12px;font-size:13px;font-weight:700}.grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;display:grid}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;display:flex;overflow:hidden}.card .thumb{aspect-ratio:16/10;background:var(--canvas);cursor:pointer;border:0;width:100%;padding:0;display:block;overflow:hidden}.card .thumb img{object-fit:cover;object-position:top;width:100%;height:100%;display:block}.card .meta{align-items:center;gap:8px;padding:12px 14px;display:flex}.card .meta div{flex:1;min-width:0}.card .title{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.card .sub{color:var(--muted);font-size:12px}.empty{text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:var(--radius);padding:40px 16px}.drop{outline:2px dashed var(--accent);outline-offset:-8px}.error{background:var(--danger-soft);color:var(--danger);border-radius:9px;margin-bottom:16px;padding:10px 12px}.editor{grid-template-rows:56px 1fr;height:100%;display:grid}.topbar{background:var(--surface);border-bottom:1px solid var(--border);align-items:center;gap:10px;min-width:0;padding:0 14px;display:flex}.topbar .title-input{background:0 0;border:1px solid #0000;border-radius:8px;flex:1;min-width:120px;max-width:420px;padding:6px 8px;font-size:15px;font-weight:600}.topbar .title-input:hover{border-color:var(--border)}.topbar .title-input:focus{border-color:var(--accent);background:var(--surface);outline:none}.topbar .saved{color:var(--muted);white-space:nowrap;margin-right:auto;font-size:12px}.workspace{grid-template-columns:210px 1fr 300px;min-height:0;display:grid}@media (width<=1000px){.workspace{grid-template-columns:160px 1fr 260px}}.steps{background:var(--surface);border-right:1px solid var(--border);flex-direction:column;gap:10px;padding:12px;display:flex;overflow-y:auto}.step{background:var(--canvas);cursor:pointer;aspect-ratio:16/10;border:2px solid #0000;border-radius:10px;width:100%;padding:0;display:block;position:relative;overflow:hidden}.step img{object-fit:cover;object-position:top;pointer-events:none;width:100%;height:100%;display:block}.step.selected{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.step .num{color:#fff;background:#0f1115bf;border-radius:6px;padding:2px 6px;font-size:11px;font-weight:700;position:absolute;top:6px;left:6px}.step .dot{background:var(--accent);border-radius:50%;width:10px;height:10px;margin:-5px 0 0 -5px;position:absolute;box-shadow:0 0 0 2px #fff}.step .tools{gap:4px;display:none;position:absolute;top:4px;right:4px}.step:hover .tools,.step.selected .tools{display:flex}.step .tools span{color:#fff;background:#0f1115bf;border-radius:6px;place-items:center;width:24px;height:24px;font-size:13px;display:grid}.step .tools span:hover{background:#0f1115f2}.step.drag-over{border-color:var(--accent);border-style:dashed}.step.dragging{opacity:.4}.add-step{border:1px dashed var(--border);color:var(--muted);cursor:pointer;background:0 0;border-radius:10px;padding:12px;font-weight:600}.add-step:hover{border-color:var(--accent);color:var(--accent)}.center{background:var(--canvas);grid-template-rows:auto 1fr;min-width:0;min-height:0;display:grid}.canvas-bar{align-items:center;gap:10px;padding:10px 14px;display:flex}.seg{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:3px;display:inline-flex}.seg button{cursor:pointer;color:var(--muted);background:0 0;border:0;border-radius:7px;padding:6px 12px;font-size:13px;font-weight:600}.seg button.on{background:var(--accent-soft);color:var(--accent)}.canvas-bar .info{color:var(--muted);margin-left:auto;font-size:12px}.canvas-area{place-items:center;min-height:0;padding:8px 20px 20px;display:grid;container-type:size}.canvas-frame{width:min(100cqw - 40px, (100cqh - 28px) * var(--ratio));aspect-ratio:var(--ratio);touch-action:none;-webkit-user-select:none;user-select:none;background:#000;border-radius:8px;position:relative;overflow:hidden;box-shadow:0 12px 40px #00000040}.canvas-frame.tool-hotspot{cursor:crosshair}.canvas-frame.tool-blur{cursor:cell}.canvas-frame>img{pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.blur-box{cursor:pointer;outline:1px dashed #ffffffd9;position:absolute}.blur-box:after{content:"";pointer-events:none;background:repeating-linear-gradient(45deg,#ffffff24 0 6px,#0000001a 6px 12px);position:absolute;inset:0}.blur-fill{filter:blur(7px)saturate(.7);clip-path:inset(0);pointer-events:none;position:absolute;inset:0}.sample{margin:0 0 32px}.sample-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.sample-head .section-title{margin:0}.sample-frame{aspect-ratio:16/9.1;background:0 0;border:0;border-radius:14px;width:100%;display:block}.blur-box.selected{outline:2px solid var(--accent)}.blur-box.drawing{outline:2px dashed var(--accent);pointer-events:none}.blur-box .remove{background:var(--danger);color:#fff;cursor:pointer;border:0;border-radius:50%;place-items:center;width:22px;height:22px;font-size:13px;line-height:1;display:grid;position:absolute;top:-10px;right:-10px}.zoom-view{pointer-events:none;border:2px dashed #ffffffe6;border-radius:4px;position:absolute;box-shadow:0 0 0 9999px #00000059}.marker{background:var(--marker,var(--accent));cursor:grab;border-radius:50%;width:26px;height:26px;margin:-13px 0 0 -13px;position:absolute;box-shadow:0 0 0 4px #fffffff2,0 4px 14px #0006}.marker:after{content:"";background:inherit;opacity:.5;border-radius:50%;animation:1.8s ease-out infinite pulse;position:absolute;inset:0}.marker:active{cursor:grabbing}@keyframes pulse{to{opacity:0;transform:scale(2.8)}}.bubble{color:#15171c;pointer-events:none;white-space:pre-wrap;background:#fff;border-radius:10px;max-width:260px;padding:8px 12px;font-size:13px;position:absolute;transform:translate(-50%,22px);box-shadow:0 8px 24px #0000004d}.bubble.above{transform:translate(-50%,calc(-100% - 22px))}.bubble.card{padding:14px 16px;font-size:15px;transform:translate(-50%,-50%);top:50%!important;left:50%!important}.no-steps{color:var(--muted);text-align:center;padding:24px}.inspector{background:var(--surface);border-left:1px solid var(--border);overflow-y:auto}.panel{border-bottom:1px solid var(--border);gap:14px;padding:16px;display:grid}.panel h2{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0;font-size:13px}.switch{cursor:pointer;justify-content:space-between;align-items:center;gap:12px;font-size:13px;font-weight:600;display:flex}.switch input{appearance:none;background:var(--border);cursor:pointer;border-radius:999px;flex:none;width:36px;height:20px;margin:0;transition:background .15s;position:relative}.switch input:after{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .15s;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #0000004d}.switch input:checked{background:var(--accent)}.switch input:checked:after{transform:translate(16px)}.range{align-items:center;gap:10px;display:flex}.range input{accent-color:var(--accent);flex:1}.range output{font-variant-numeric:tabular-nums;color:var(--muted);text-align:right;width:36px;font-size:12px}.swatches{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.swatch{border:2px solid var(--surface);width:26px;height:26px;box-shadow:0 0 0 1px var(--border);cursor:pointer;border-radius:50%;padding:0}.swatch.on{box-shadow:0 0 0 2px var(--text)}.swatches input[type=color]{cursor:pointer;background:0 0;border:0;width:30px;height:30px;padding:0}.blur-list{gap:6px;display:grid}.blur-item{background:var(--surface-2);border-radius:8px;justify-content:space-between;align-items:center;padding:6px 6px 6px 10px;font-size:13px;display:flex}.url{color:var(--muted);overflow-wrap:anywhere;font-size:12px}.kbd{border:1px solid var(--border);color:var(--muted);border-bottom-width:2px;border-radius:5px;padding:2px 5px;font:11px/1 ui-monospace,monospace}.overlay{z-index:50;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0a0b0e99;place-items:center;padding:24px;animation:.15s fade;display:grid;position:fixed;inset:0}@keyframes fade{0%{opacity:0}}.modal{background:var(--surface);border-radius:16px;width:min(720px,100%);max-height:calc(100vh - 48px);overflow:auto;box-shadow:0 30px 80px #00000059}.modal-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.modal-head h2{margin:0;font-size:16px}.modal-body{gap:14px;padding:20px;display:grid}.preview-wrap{width:min(1200px,100%)}.preview-close{position:fixed;top:16px;right:16px}.option{border:1px solid var(--border);border-radius:12px;gap:10px;padding:16px;display:grid}.option h3{margin:0;font-size:15px}.option p{color:var(--muted);margin:0;font-size:13px}.option .row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.code{background:var(--surface-2);resize:none;border:1px solid var(--border);border-radius:8px;width:100%;padding:10px;font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace}.progress-note{color:var(--muted);font-size:13px}