:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#172033;background:#f8f6fc;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:4px}button{cursor:pointer;border:1px solid #e2deed;border-radius:10px;background:#fff;color:#172033;padding:.75rem 1rem;font-weight:650}button:hover{border-color:#6d38e8}button:disabled{opacity:.45;cursor:default}.primary{background:#6d38e8;border-color:#6d38e8}.dark{background:#172033;color:#fff;border-color:#172033}a{color:inherit}header{max-width:1250px;margin:auto;padding:22px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e2deed}.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:800;text-decoration:none}.brand img{width:36px}header span{font-size:13px;color:#667085}main{max-width:1250px;margin:0 auto;padding:30px 28px}.intro{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:26px}.eyebrow{font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:750;color:#6d38e8}h1{font-size:clamp(30px,4vw,48px);letter-spacing:-.045em;line-height:1.08;margin:10px 0}p{color:#667085;line-height:1.6;margin:8px 0}.tag{padding:8px 12px;border-radius:20px;border:1px solid #e2deed;font-size:12px;white-space:nowrap}.workspace{display:grid;grid-template-columns:minmax(320px,1fr) minmax(310px,430px);gap:24px;align-items:start}.stage{background:#eee8ff;border:1px solid #d8ccef;border-radius:20px;padding:22px}.stage-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-size:13px}.preview{position:relative;max-width:300px;margin:auto;box-shadow:0 16px 35px #17203322;border-radius:12px;overflow:hidden;background:#4720a4;aspect-ratio:9/16}canvas{width:100%;height:100%;display:block}.guides{position:absolute;inset:14% 14% 23% 10%;border:1px dashed #f5b94280;pointer-events:none;display:none}.guides span{position:absolute;top:6px;left:8px;color:#f5b942;font-size:10px}.stage-controls{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:18px}.stage-controls button{padding:8px 12px;font-size:13px}.hint{font-size:12px;text-align:center;margin-top:12px}.panel{background:#fff;border:1px solid #e2deed;border-radius:16px;padding:20px;margin-bottom:14px}.panel h2{display:flex;align-items:center;font-size:17px;line-height:1.4;margin:-20px -20px 18px;padding:14px 20px;border-radius:15px 15px 0 0;border-bottom:1px solid #d8ccef;background:#eee8ff;color:#4720a4}.step{display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;height:32px;border-radius:50%;background:#6d38e8;color:#fff;font-size:13px;font-weight:750;font-variant-numeric:tabular-nums;margin-inline-end:10px}.title-panel{min-width:0;margin:8px 0 18px;padding:14px 12px 0;border:1px solid #d8ccef;border-radius:12px;background:#f8f6fc}.title-panel legend{padding:0 8px;color:#4720a4;font-size:15px;font-weight:750}.title-panel textarea{background:#fff}.title-panel .row{flex-wrap:wrap}.title-panel .row>*{flex-basis:140px}.title-panel .row button{margin-bottom:12px}.row{display:flex;gap:10px;align-items:end}.row>*{flex:1;min-width:0}label{display:block;font-size:12px;font-weight:650;margin-bottom:12px}input:not([type=checkbox]),textarea,select{display:block;width:100%;margin-top:6px;padding:10px;border:1px solid #d8ccef;border-radius:8px;background:#faf8ff;color:#172033}textarea{resize:vertical;min-height:67px}input[type=checkbox]{accent-color:#6d38e8}.check{display:flex;align-items:center;gap:8px}input[type=color]{height:42px;padding:4px}small{display:block;color:#667085;font-size:11px;line-height:1.5}.file{display:inline-block;text-align:center;margin:0;padding:.75rem 1rem;background:#fff;border:1px solid #e2deed;border-radius:10px;font-size:14px;cursor:pointer}.file input{display:none!important}.source-name{word-break:break-word;font-size:12px;margin:12px 0}.export{width:100%;margin-top:10px}progress{width:100%;accent-color:#6d38e8;margin-top:12px}#status{font-size:13px;min-height:22px;overflow-wrap:anywhere}#download{display:none;margin-top:12px}.notice{font-size:12px}.details{margin-top:25px;border-top:1px solid #e2deed;padding-top:20px;font-size:13px}.details p{max-width:820px}footer{padding:20px 28px;text-align:center;font-size:12px;color:#667085}video.source{position:fixed;width:2px;height:2px;left:-10px;bottom:0;opacity:.01}#cancel{display:none}#recording{color:#aa352e;font-weight:700}@media(max-width:760px){header{padding:16px}header span{display:none}main{padding:20px 16px}.intro{display:block}.intro .tag{display:inline-block;margin-top:8px}.workspace{grid-template-columns:1fr}.stage{padding:16px}.preview{max-width:250px}.panel{padding:17px}h1{max-width:420px}}.primary{color:#fff}.dark{background:#4720a4;border-color:#4720a4}:focus-visible{outline:3px solid #f5b942}.brand{gap:8px}.brand img{width:44px;height:44px}.brand sup{font-size:.5em;align-self:start;margin-top:6px}.header-actions{display:flex;gap:16px;align-items:center}.language-control{margin:0}.language-control select{min-height:44px;margin:0;max-width:155px}[dir=rtl] .guides span{left:auto;right:8px}@media(max-width:760px){header{flex-wrap:wrap;gap:12px}.header-actions{gap:10px}.header-actions a{font-size:12px}.brand{font-size:21px}}.brand,#dimensions,input[type=number]{direction:ltr}.step{margin-right:0;margin-inline-end:8px}.panel-image-controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.panel-image-controls button{padding:9px 12px;font-size:13px}.panel-image-details{display:flex;align-items:center;gap:10px;margin-bottom:10px}.panel-image-details img{width:64px;height:64px;object-fit:contain;border:1px solid #d8ccef;border-radius:8px;background:#fff}.panel-image-details span{min-width:0;overflow-wrap:anywhere;font-size:12px;color:#4720a4}.panel-image-controls [hidden],.panel-image-details[hidden]{display:none}.image-hint{margin-bottom:14px}.preview-column{min-width:0;display:grid;gap:20px}.timeline-editor{min-width:0;padding:20px;background:#fff;border:1px solid #d8ccef;border-radius:16px}.timeline-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.timeline-heading h2{margin:0;color:#4720a4;font-size:20px}.timeline-actions{display:flex;flex-wrap:wrap;gap:8px}.timeline-actions button{padding:9px 12px;font-size:13px}#timeline-delete{background:#6d38e8;color:#fff;border-color:#6d38e8}.timeline-composition{display:flex;gap:10px;align-items:end;margin:20px 0;direction:ltr}.timeline-bookend{display:flex;align-items:center;justify-content:center;width:100px;min-height:74px;padding:10px;background:#eee8ff;color:#4720a4;border:1px solid #d8ccef;border-radius:8px;font-size:12px;font-weight:700;text-align:center}.timeline-bookend[hidden]{display:none}.timeline-video{flex:1;min-width:0}.timeline-ruler{display:flex;justify-content:space-between;font-size:11px;color:#667085;margin-bottom:8px}.timeline-track{position:relative;height:74px;border:1px solid #d8ccef;border-radius:8px;background:#f8f6fc;overflow:hidden;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}.timeline-track[aria-disabled=true]{opacity:.5;cursor:default}.timeline-track:focus-visible{outline:3px solid #f5b942;outline-offset:3px}.timeline-segments{height:100%;display:flex;pointer-events:none}.timeline-segment{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;justify-content:center;padding:0 8px;color:#fff;background:#6d38e8;border-inline-end:2px solid white;font-size:12px}.timeline-segment:nth-child(2n){background:#4720a4}.timeline-selection{position:absolute;top:0;bottom:0;background:#f5b94288;border:2px solid #f5b942;pointer-events:none}.timeline-playhead{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 0 1px #172033;pointer-events:none;transform:translate(-1px)}.timeline-fields{display:flex;gap:12px;flex-wrap:wrap}.timeline-fields label{flex:1 1 160px;min-width:0}.timeline-fields .timeline-scrub{flex:2 1 240px}#timeline-position{accent-color:#6d38e8;padding:0;height:40px;direction:ltr}#selection-start,#selection-end{direction:ltr}@media(max-width:760px){.timeline-editor{padding:16px}.timeline-composition{flex-wrap:wrap}.timeline-video{flex:1 1 100%;order:2}.timeline-bookend{width:auto;min-height:38px;flex:1}.timeline-fields label{flex-basis:120px}.timeline-actions button{font-size:12px}}@media(min-width:761px)and (max-width:1000px){.timeline-composition{flex-wrap:wrap}.timeline-video{flex:1 1 100%;order:2}.timeline-bookend{width:auto;min-height:38px;flex:1}}#image-cards-file[hidden]{display:none}#image-cards-list{margin-top:18px}.extra-image-card>button{margin-bottom:14px}.extra-image-card input[type=file][hidden]{display:none}.extra-image-card .row{flex-wrap:wrap}.extra-image-card .row>*{flex-basis:140px}.timeline-sequence{margin-bottom:18px}.timeline-sequence[hidden]{display:none}.timeline-sequence>strong{font-size:12px;color:#4720a4}#timeline-sequence-items{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;direction:ltr}.sequence-item{padding:7px 9px;border:1px solid #d8ccef;border-radius:8px;background:#eee8ff;font-size:11px}.sequence-item.card{display:flex;align-items:center;gap:6px;background:#fff5da}.sequence-item img{width:32px;height:32px;object-fit:contain;border-radius:4px}.text-overlay{position:absolute;inset:0;pointer-events:none}.text-overlay button{position:absolute;pointer-events:auto;touch-action:none;cursor:move;background:transparent;border:1px dashed transparent;border-radius:4px;padding:0;min-height:0;box-shadow:none}.text-overlay button:hover,.text-overlay button.selected,.text-overlay button:focus-visible{border-color:#f5b942;outline:1px solid #4720a4;background:transparent}.text-toolbar{margin-top:18px;padding:14px;background:#faf8ff;border:1px solid #d9cdf8;border-radius:12px;text-align:left}.text-toolbar small{display:block;margin:8px 0}.text-toolbar .row{margin-top:10px}.text-toolbar[hidden],.text-overlay[hidden]{display:none}.workflow-step{padding:0;overflow:hidden}.workflow-step>summary{position:relative;display:block;list-style:none;cursor:pointer;padding:17px 42px 15px 20px;background:#eee8ff}.workflow-step>summary::-webkit-details-marker{display:none}.workflow-step>summary:after{content:"▾";position:absolute;right:18px;top:22px;color:#6d38e8}.workflow-step[open]>summary:after{content:"▴"}.workflow-step>summary h2{margin:0;padding:0;background:none;border:0;font-size:18px}.workflow-step>summary:focus-visible{outline:3px solid #f5b942;outline-offset:-3px}.workflow-step .step-summary{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;margin:7px 0 0 34px;color:#64708b;font-weight:400}.step-body{padding:20px}.workflow-step[open]>summary{border-bottom:1px solid #ded5f4}#settings,.workflow-step{min-width:0}.workflow-step>summary{min-width:0}.step-body select{max-width:100%}@media(max-width:760px){.workspace{grid-template-columns:minmax(0,1fr)}}.text-format-actions{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0}.text-format-actions>div{display:flex;gap:5px}.text-format-actions button{width:44px;height:44px;min-height:44px;padding:8px;display:flex;align-items:center;justify-content:center;color:#4720a4;background:#fff}.text-format-actions button[aria-pressed=true]{background:#6d38e8;color:#fff;border-color:#6d38e8}.text-format-actions svg{flex-shrink:0}:focus-visible{outline:3px solid #4720a4;outline-offset:3px}.workflow-step>summary:focus-visible{outline:3px solid #4720a4;outline-offset:-4px}.timeline-track:focus-visible{outline-color:#4720a4}.text-overlay button:focus-visible{outline:3px solid #fff;box-shadow:0 0 0 5px #4720a4}.hint,.source-name,.workflow-step .step-summary{color:#526078}.skip-link{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:100;padding:12px 18px;border-radius:8px;color:#fff;background:#4720a4;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}button,.file,.panel-image-controls button,.timeline-actions button,.sequence-item.card{min-height:44px}input[type=file][hidden]{display:none}.text-toolbar{text-align:start}[dir=rtl] .workflow-step>summary{padding:17px 20px 15px 42px}[dir=rtl] .workflow-step>summary:after{right:auto;left:18px}[dir=rtl] .workflow-step .step-summary{margin-left:0;margin-right:34px}@media(forced-colors:active){.text-format-actions button[aria-pressed=true],.text-overlay button.selected{border:3px solid Highlight}:focus-visible{outline-color:Highlight}}