:root{--accent:#8b3dff;--accent-hover:#7731e6;--accent-soft:#8b3dff1f;--brand-grad:linear-gradient(90deg, #00c4cc 0%, #6f4cff 55%, #8b3dff 100%);--danger:#e5484d;--ok:#12a150;--bg:#fff;--canvas:#ebecf0;--surface:#fff;--surface-2:#f4f5f7;--hover:#0d12160f;--border:#dfe1e5;--text:#0d1216;--muted:#5e6670;--shadow:0 8px 28px #0f141e24, 0 1px 3px #0f141e14;--radius:8px;--topbar-h:56px;--rail-w:72px;--panel-w:330px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.4}:root[data-theme=dark]{--accent:#9d5cff;--accent-hover:#b07cff;--accent-soft:#9d5cff33;--bg:#18191b;--canvas:#0f1012;--surface:#232427;--surface-2:#2c2e32;--hover:#ffffff14;--border:#3a3c41;--text:#eceef1;--muted:#a2a7ae;--shadow:0 10px 32px #0000008c, 0 1px 3px #0006;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;margin:0;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}button:disabled{cursor:default;opacity:.4}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.muted{color:var(--muted)}.app{flex-direction:column;height:100dvh;display:flex}.main{flex:1;min-height:0;display:flex;position:relative}.topbar{height:var(--topbar-h);padding:0 12px;padding-top:env(safe-area-inset-top);background:var(--brand-grad);color:#fff;z-index:20;flex:none;align-items:center;gap:8px;display:flex}.tb-group{align-items:center;gap:4px;display:flex}.tb-center{flex:1;justify-content:center;align-items:center;gap:6px;min-width:0;display:flex}.tb-btn,.tb-icon{border-radius:var(--radius);align-items:center;gap:6px;height:38px;padding:0 12px;font-weight:500;transition:background .15s;display:inline-flex}.tb-icon{justify-content:center;width:38px;padding:0}.tb-btn:hover:not(:disabled),.tb-icon:hover:not(:disabled){background:#ffffff2e}.tb-divider{background:#ffffff59;width:1px;height:22px;margin:0 4px}.doc-name{border-radius:var(--radius);color:#fff;width:min(320px,100%);min-width:0;height:36px;font:inherit;text-align:center;text-overflow:ellipsis;background:0 0;border:1px solid #0000;padding:0 10px;font-size:15px;font-weight:600}.doc-name:hover{border-color:#fff6}.doc-name:focus{background:#00000026;border-color:#fff9;outline:none}.unsaved-dot{opacity:.85;background:#fff;border-radius:50%;flex:none;width:7px;height:7px}.btn-export{border-radius:var(--radius);color:#3b1a79;background:#fff;align-items:center;gap:8px;height:38px;margin-left:4px;padding:0 16px;font-weight:600;transition:transform .1s,box-shadow .15s;display:inline-flex;box-shadow:0 1px 2px #00000026}.btn-export:hover{box-shadow:0 3px 10px #0003}.btn-export:active{transform:translateY(1px)}.btn{border-radius:var(--radius);background:var(--surface-2);border:1px solid var(--border);justify-content:center;align-items:center;gap:8px;height:40px;padding:0 16px;font-weight:600;transition:background .15s,border-color .15s;display:inline-flex}.btn:hover:not(:disabled){background:var(--hover)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover:not(:disabled){background:var(--accent-hover)}.btn.block{width:100%}.icon-btn{border-radius:6px;flex:none;justify-content:center;align-items:center;width:32px;height:32px;display:inline-flex}.icon-btn:hover{background:var(--hover)}.link-btn{color:var(--accent);padding:6px 0;font-weight:500}.link-btn:hover{text-decoration:underline}.rail{width:var(--rail-w);background:var(--surface);border-right:1px solid var(--border);z-index:5;flex-direction:column;flex:none;align-items:center;gap:4px;padding:8px 0;display:flex}.rail-btn{border-radius:var(--radius);width:60px;color:var(--muted);flex-direction:column;align-items:center;gap:4px;padding:8px 0 6px;font-size:11px;font-weight:500;display:flex}.rail-btn:hover{color:var(--text);background:var(--hover)}.rail-btn.on{color:var(--accent);background:var(--accent-soft)}.panel{width:var(--panel-w);background:var(--surface);border-right:1px solid var(--border);z-index:4;flex-direction:column;flex:none;display:flex}.panel-head{justify-content:space-between;align-items:center;padding:14px 16px 6px;display:flex}.panel-head h2{margin:0;font-size:16px}.panel-body{flex:1;padding:8px 16px 24px;overflow-y:auto}.panel-subtitle{margin:20px 0 10px;font-size:13px;font-weight:600}.hint{color:var(--muted);margin:8px 0 0;font-size:12px}.panel-empty{text-align:center;color:var(--muted);border:1.5px dashed var(--border);border-radius:12px;margin-top:28px;padding:24px 16px}.panel-empty p{margin:8px 0 0;font-size:13px}.asset-grid{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.asset{aspect-ratio:1;border-radius:var(--radius);background:var(--surface-2);position:relative;overflow:hidden}.asset-hit{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.asset-hit img{object-fit:cover;width:100%;height:100%;transition:transform .2s}.asset-hit:hover img{transform:scale(1.04)}.asset-badge{color:#fff;pointer-events:none;background:#000000a6;border-radius:4px;align-items:center;gap:3px;padding:2px 6px;font-size:11px;font-weight:500;display:inline-flex;position:absolute;bottom:6px;left:6px}.asset-remove{color:#fff;opacity:0;background:#0009;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;transition:opacity .15s;display:flex;position:absolute;top:6px;right:6px}.asset:hover .asset-remove,.asset-remove:focus-visible{opacity:1}@media (hover:none){.asset-remove{opacity:1}}.aspect-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.aspect-card{border:1.5px solid var(--border);border-radius:var(--radius);flex-direction:column;align-items:center;gap:4px;padding:12px 4px 10px;font-size:12px;display:flex}.aspect-card span{color:var(--muted);font-size:10.5px}.aspect-card:hover{background:var(--hover)}.aspect-card.on{border-color:var(--accent);background:var(--accent-soft)}.aspect-glyph{opacity:.8;border:2px solid;border-radius:3px;margin:0 auto 4px;display:block}.aspect-card-wrap{height:26px}.chip-row{flex-wrap:wrap;gap:6px;display:flex}.chip{border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-size:13px}.chip:hover{background:var(--hover)}.chip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}.swatches{flex-wrap:wrap;gap:8px;margin-bottom:4px;display:flex}.swatch{border:1px solid var(--border);border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;display:flex;position:relative}.swatch.on{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent)}.swatch.custom{cursor:pointer;color:#fff;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.swatch input,.ctx-swatch input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.stage-col{background:var(--canvas);flex-direction:column;flex:1;min-width:0;display:flex}.context-bar{scrollbar-width:none;background:var(--surface);max-width:calc(100% - 16px);height:48px;box-shadow:var(--shadow);z-index:3;border-radius:10px;flex:none;align-items:center;gap:4px;margin:10px auto 0;padding:0 8px;display:flex;overflow-x:auto}.ctx-label{white-space:nowrap;padding:0 8px;font-weight:600}.ctx-btn,.ctx-chip{white-space:nowrap;border-radius:6px;align-items:center;gap:6px;height:34px;padding:0 10px;font-weight:500;display:inline-flex}.ctx-btn:hover:not(:disabled),.ctx-chip:hover{background:var(--hover)}.ctx-btn.danger:hover{color:var(--danger)}.ctx-chip{border:1px solid var(--border);font-weight:600}.chip-note{color:var(--accent);font-size:11px;font-weight:500}.ctx-sep{background:var(--border);flex:none;width:1px;height:24px;margin:0 4px}.ctx-swatch{cursor:pointer;border-radius:6px;justify-content:center;align-items:center;width:34px;height:34px;display:flex;position:relative}.ctx-swatch:hover{background:var(--hover)}.ctx-swatch span{border:1px solid var(--border);border-radius:50%;width:22px;height:22px}.segmented{background:var(--surface-2);border-radius:8px;gap:2px;padding:3px;display:inline-flex}.segmented button{white-space:nowrap;height:30px;color:var(--muted);border-radius:6px;justify-content:center;align-items:center;gap:5px;padding:0 12px;font-weight:500;display:inline-flex}.segmented button:hover{color:var(--text)}.segmented button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 3px #00000026}.segmented.wide{display:flex}.segmented.wide button{flex:1;height:36px}.segmented small{color:var(--muted);font-size:11px;font-weight:400}.workspace{touch-action:none;flex:1;min-height:0;position:relative;overflow:hidden}.workspace.dropping:after{content:"";border:2px dashed var(--accent);background:var(--accent-soft);pointer-events:none;border-radius:12px;position:absolute;inset:8px}.drop-hint{background:var(--accent);color:#fff;pointer-events:none;z-index:2;border-radius:999px;padding:8px 16px;font-weight:600;position:absolute;top:24px;left:50%;transform:translate(-50%)}.empty-page{color:#6b7280;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:10px;font-size:13px;display:flex;position:absolute}.empty-page .btn{pointer-events:auto}.video-controls{background:var(--surface);height:34px;box-shadow:var(--shadow);border-radius:8px;align-items:center;gap:8px;padding:0 6px;display:flex;position:absolute}.video-controls input[type=range]{min-width:40px;accent-color:var(--accent);flex:1}.video-controls .time{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap;padding-right:4px;font-size:12px}.strip{background:var(--surface);border-top:1px solid var(--border);flex:none;align-items:center;gap:8px;height:112px;padding:0 12px;display:flex}.strip-scroll{scrollbar-width:thin;flex:1;align-items:center;gap:10px;min-width:0;height:100%;padding:0 4px;display:flex;overflow-x:auto}.thumb{outline-offset:2px;border-radius:6px;outline:2px solid #0000;flex:none;height:80px;transition:outline-color .15s;position:relative}.thumb:hover{outline-color:var(--border)}.thumb.active{outline-color:var(--accent)}.thumb.drop-target{box-shadow:-8px 0 0 -4px var(--accent)}.thumb-hit{height:100%;display:block}.slide-preview{border:1px solid var(--border);border-radius:5px;height:100%;position:relative;overflow:hidden}.preview-layer{position:absolute;overflow:hidden}.preview-layer img{object-fit:fill;pointer-events:none;max-width:none;position:absolute}.checker{background-color:#fff;background-image:linear-gradient(45deg,#c9ccd2 25%,#0000 25%),linear-gradient(-45deg,#c9ccd2 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#c9ccd2 75%),linear-gradient(-45deg,#0000 75%,#c9ccd2 75%);background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px}.thumb-num{color:#fff;pointer-events:none;background:#0009;border-radius:4px;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 4px;font-size:11px;font-weight:600;display:flex;position:absolute;bottom:4px;left:4px}.thumb-badge{color:#fff;pointer-events:none;background:#0009;border-radius:4px;justify-content:center;align-items:center;width:18px;height:18px;display:flex;position:absolute;bottom:4px;right:4px}.thumb-menu{background:var(--surface);border-radius:5px;justify-content:center;align-items:center;width:22px;height:22px;display:flex;position:absolute;top:4px;right:4px;box-shadow:0 1px 4px #00000040}.add-slide{border:1.5px dashed var(--border);width:56px;height:80px;color:var(--muted);border-radius:6px;flex:none;justify-content:center;align-items:center;display:flex}.add-slide:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.strip-count{color:var(--muted);font-variant-numeric:tabular-nums;flex:none;font-size:12px;font-weight:600}.strip-count.full{color:var(--accent)}.menu{z-index:100;background:var(--surface);min-width:220px;color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:10px;padding:6px;animation:.12s ease-out pop;position:fixed}.menu-item{text-align:left;border-radius:6px;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;display:flex}.menu-item:hover:not(:disabled){background:var(--hover)}.menu-item.danger{color:var(--danger)}.menu-icon{width:16px;display:flex}.menu-label{flex:1}.menu kbd{font:inherit;color:var(--muted);font-size:12px}.modal-backdrop{z-index:50;background:#00000073;justify-content:center;align-items:center;padding:16px;animation:.15s fade;display:flex;position:fixed;inset:0}.modal{background:var(--surface);width:min(460px,100%);max-height:100%;box-shadow:var(--shadow);border-radius:14px;padding:20px;animation:.15s ease-out pop;overflow-y:auto}.modal-head{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.modal-head h2{margin:0;font-size:18px}.modal-summary{color:var(--muted);margin:0 0 16px}.field{margin-bottom:16px}.field-label{margin-bottom:6px;font-size:13px;font-weight:600;display:block}.notice{border-radius:var(--radius);background:var(--surface-2);align-items:flex-start;gap:8px;margin:0 0 12px;padding:10px 12px;font-size:13px;display:flex}.notice svg{flex:none;margin-top:1px}.notice.error{color:var(--danger)}.modal-actions{flex-direction:column;align-items:center;gap:8px;margin-top:16px;display:flex}.progress{background:var(--surface-2);border-radius:3px;height:6px;margin:12px 0 16px;overflow:hidden}.progress div{background:var(--brand-grad);height:100%;transition:width .2s}.export-list{max-height:280px;margin:0;padding:0;list-style:none;overflow-y:auto}.export-list li{border-bottom:1px solid var(--border);align-items:center;gap:10px;height:36px;display:flex}.export-list li:last-child{border-bottom:0}.export-list a{color:var(--text);text-overflow:ellipsis;white-space:nowrap;text-decoration:none;overflow:hidden}.export-list a:hover{color:var(--accent);text-decoration:underline}.export-list .status{font-variant-numeric:tabular-nums;align-items:center;gap:6px;margin-left:auto;font-size:12px;display:flex}.export-list.files{margin-top:8px}.ok{color:var(--ok)}.spin{animation:.9s linear infinite spin}.toasts{z-index:200;pointer-events:none;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:calc(100vw - 32px);display:flex;position:fixed;bottom:128px;left:50%;transform:translate(-50%)}.toast{color:#fff;min-height:40px;box-shadow:var(--shadow);pointer-events:auto;background:#1f2023;border-radius:10px;align-items:center;gap:10px;padding:8px 8px 8px 14px;animation:.15s ease-out pop;display:flex}.toast:not(:has(button)){padding-right:14px}.toast.error{background:#b4232a}.toast.success{background:#11703f}.toast .icon-btn:hover{background:#ffffff26}.mobile-nav{height:calc(60px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--surface);border-top:1px solid var(--border);z-index:30;flex:none;display:flex}.mobile-nav button{color:var(--muted);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;font-size:11px;font-weight:500;display:flex}.mobile-nav button.on{color:var(--accent)}.sheet-backdrop{z-index:25;background:#0000004d;animation:.15s fade;position:fixed;inset:0}.sheet{left:0;right:0;bottom:calc(60px + env(safe-area-inset-bottom));z-index:26;background:var(--surface);max-height:62dvh;box-shadow:var(--shadow);border-radius:16px 16px 0 0;flex-direction:column;animation:.2s ease-out slide-up;display:flex;position:fixed}.sheet-grip{background:var(--border);border-radius:2px;width:36px;height:4px;margin:8px auto 0}@media (width<=767px){:root{--topbar-h:52px}.topbar{gap:2px;padding:0 6px}.hide-mobile{display:none!important}.tb-btn{justify-content:center;width:38px;padding:0}.doc-name{padding:0 4px;font-size:14px}.btn-export{padding:0 12px}.context-bar{height:44px;margin-top:8px}.strip{height:88px;padding:0 8px}.thumb{height:62px}.add-slide{width:46px;height:62px}.asset-grid{grid-template-columns:repeat(3,1fr)}.toasts{bottom:164px}input,select{font-size:16px}}@keyframes pop{0%{opacity:0;transform:scale(.97)}}@keyframes fade{0%{opacity:0}}@keyframes slide-up{0%{transform:translateY(100%)}}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.popover{z-index:100;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:10px;padding:12px 14px 14px;animation:.12s ease-out pop;position:fixed}.popover-head{justify-content:space-between;margin-bottom:6px;font-size:12px;font-weight:600;display:flex}.popover-head:not(:first-child){margin-top:14px}.popover input[type=range]{width:100%;accent-color:var(--accent)}.ctx-btn.primary{background:var(--accent);color:#fff}.ctx-btn.primary:hover{background:var(--accent-hover)}.ctx-hint{color:var(--muted);white-space:nowrap;padding:0 4px;font-size:12px}.crop-hint{color:#fff;pointer-events:none;background:#141418d9;border-radius:999px;padding:6px 14px;font-size:12px;font-weight:500;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.panel-banner{border-radius:var(--radius);background:var(--accent-soft);color:var(--accent);align-items:center;gap:8px;margin:12px 0 0;padding:8px 8px 8px 12px;font-size:12.5px;font-weight:500;display:flex}.panel-banner span{flex:1}.layer-list{flex-direction:column;gap:4px;margin:12px 0 0;padding:0;list-style:none;display:flex}.layer-row{border-radius:var(--radius);cursor:grab;border:1.5px solid #0000;align-items:center;gap:2px;padding:4px 6px 4px 0;display:flex}.layer-row:hover{background:var(--hover)}.layer-row.on{border-color:var(--accent);background:var(--accent-soft)}.layer-row .grip{color:var(--muted);flex:none}.layer-main{text-align:left;flex:1;align-items:center;gap:8px;min-width:0;padding:2px;display:flex}.layer-thumb{background:var(--surface-2);width:40px;height:40px;color:var(--muted);border-radius:5px;flex:none;justify-content:center;align-items:center;display:flex;overflow:hidden}.layer-thumb img{object-fit:cover;width:100%;height:100%}.layer-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:13px;overflow:hidden}.layout-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.layout-card{border:1.5px solid var(--border);border-radius:var(--radius);color:var(--muted);flex-direction:column;align-items:center;gap:5px;padding:8px 4px 6px;font-size:10.5px;display:flex}.layout-card:hover:not(:disabled){background:var(--hover);color:var(--text)}.layout-card.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.layout-glyph{width:30px;height:30px;display:block;position:relative}.layout-glyph span{opacity:.85;border:1.5px solid;border-radius:2px;position:absolute;transform:scale(.88)}.slider-row{align-items:center;gap:10px;margin-top:12px;font-size:13px;display:flex}.slider-row label{width:68px;font-weight:500}.slider-row input{min-width:0;accent-color:var(--accent);flex:1}.slider-row .muted{text-align:right;font-variant-numeric:tabular-nums;width:28px}.workspace.drawing{cursor:crosshair}.text-editor{z-index:3;border:2px solid var(--accent);resize:none;transform-origin:50%;background:#ffffff8c;border-radius:2px;outline:none;margin:0;padding:0;font-family:inherit;position:absolute;overflow:hidden;box-shadow:0 0 0 100vmax #00000005}:root[data-theme=dark] .text-editor{background:#14141859}.search-box{border:1px solid var(--border);border-radius:var(--radius);height:36px;color:var(--muted);align-items:center;gap:8px;margin-bottom:8px;padding:0 10px;display:flex}.search-box input{min-width:0;color:var(--text);font:inherit;background:0 0;border:0;outline:none;flex:1}.font-list{border:1px solid var(--border);border-radius:var(--radius);max-height:260px;margin:0;padding:0;list-style:none;overflow-y:auto}.font-row{text-align:left;justify-content:space-between;align-items:baseline;gap:8px;width:100%;padding:9px 12px;font-size:17px;display:flex}.font-row small{color:var(--muted);font-family:Inter,system-ui,sans-serif;font-size:11px}.font-row:hover{background:var(--hover)}.font-row.on{background:var(--accent-soft);color:var(--accent)}.shadow-color{justify-content:space-between;align-items:center;margin-top:12px;font-size:13px;font-weight:500;display:flex}.shadow-color input{border:1px solid var(--border);background:0 0;border-radius:6px;width:44px;height:28px;padding:0}.btn.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.btn.block+.btn.block{margin-top:8px}.panel-subtitle svg{vertical-align:-2px;margin-right:4px}.ctx-font{text-overflow:ellipsis;white-space:nowrap;max-width:130px;overflow:hidden}.ctx-number input{border:1px solid var(--border);width:58px;height:32px;color:var(--text);font:inherit;text-align:center;background:0 0;border-radius:6px;padding:0 6px}.preview-text{white-space:pre-wrap;justify-content:center;align-items:center;line-height:1.1;display:flex;overflow:hidden}.slide-preview{container-type:inline-size}.preset-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.preset{border-radius:var(--radius);color:var(--muted);border:1.5px solid #0000;flex-direction:column;align-items:center;gap:4px;padding:4px 2px 5px;font-size:10.5px;display:flex}.preset:hover{background:var(--hover);color:var(--text)}.preset.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.preset-canvas{aspect-ratio:1;background:var(--surface-2);object-fit:cover;border-radius:5px;width:100%;height:auto}.panel-actions{flex-direction:column;align-items:center;gap:4px;margin-top:18px;display:flex}.slider-row input[type=range]{cursor:ew-resize}@media (width<=767px){.preset-grid{grid-template-columns:repeat(4,1fr)}.mobile-nav button{font-size:10px}}.save-state{color:#fff;white-space:nowrap;background:#ffffff2e;border-radius:999px;flex:none;align-items:center;gap:5px;padding:2px 8px;font-size:11.5px;font-weight:600;display:inline-flex}.save-state.warn{background:#00000038}
