.motion-tool .workspace{grid-template-columns:230px minmax(0,1fr) 265px}.motion-tool .intro p{max-width:470px}.motion-tool .mode-choices{display:grid;gap:7px;grid-template-columns:1fr 1fr}.motion-tool .mode-choices button{font-size:12px;padding:9px 4px}.motion-tool .motion-presets{display:grid;grid-template-columns:1fr 1fr;gap:8px}.motion-presets button{padding:0 0 7px;overflow:hidden}.motion-presets canvas{display:block;width:100%;aspect-ratio:4/3;background:#eff0e8}.motion-presets span{display:block;font-size:11px;margin:7px 2px 0}.motion-tool summary{cursor:pointer;min-height:40px;padding:10px 0;font-size:13px;font-weight:650}.motion-tool details{margin-top:12px}.motion-tool .project-controls button{width:100%;margin-bottom:7px}.motion-tool #source-thumb{display:block;max-height:115px;max-width:100%;object-fit:contain;margin:14px auto 0}.motion-tool #viewport{height:540px;max-height:65vh;min-height:300px;padding:16px;touch-action:pan-x pan-y}.motion-tool #stage{position:relative;line-height:0}.motion-tool #preview{display:block;width:100%;height:100%;background:#fff;touch-action:pan-x pan-y}.motion-tool #stage[data-editing=true] #preview{touch-action:none;cursor:crosshair}.motion-tool #stage[data-tool=pan] #preview{touch-action:pan-x pan-y;cursor:grab}.motion-tool #feedback{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.motion-tool .playback{display:flex;gap:10px;align-items:center;margin-top:12px}.motion-tool .scrub-label{font-size:11px;flex:1}.motion-tool .scrub-label input{display:block;width:100%;accent-color:var(--blue)}.motion-tool #time{float:none;white-space:nowrap;font-size:12px;font-variant-numeric:tabular-nums}.motion-tool .mask-tools{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.motion-tool .mask-tools button{font-size:12px;padding:7px 10px}.motion-tool .brush-controls{display:flex;gap:16px;margin:12px 0}.motion-tool .brush-controls label{flex:1;font-size:12px;min-width:0}.motion-tool .brush-controls input{display:block;width:100%;accent-color:var(--blue)}.motion-tool #status{font-size:13px;overflow-wrap:anywhere;min-height:40px}.motion-tool #status[data-error=true]{color:#a52b25}.motion-tool #progress{width:100%;accent-color:var(--blue)}.motion-tool .adjustment-panel button{width:100%;margin:5px 0}.motion-tool input[type=color]{display:block;width:100%;height:38px;border:1px solid var(--line);background:#fff;border-radius:6px;margin-top:6px}.motion-tool .back-preview{display:none}.motion-tool .related{display:flex;flex-wrap:wrap;gap:16px}.motion-tool .preview-panel{scroll-margin-top:90px}.motion-tool .privacy{line-height:1.7}.motion-tool .preview-toolbar{align-items:center}.motion-tool #crop-note[data-warning=true]{color:#8e5019;background:#fff4e4;padding:9px;border-radius:5px}.motion-tool .project-controls p{margin-top:0}
@media(max-width:1180px){.motion-tool .workspace{grid-template-columns:210px minmax(0,1fr)}.motion-tool .workspace>.adjustment-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:22px}.motion-tool .adjustment-panel fieldset{margin:0}.motion-tool #layer-settings{grid-column:1}.motion-tool #output{grid-column:2;grid-row:1/3}}
@media(max-width:680px){.motion-tool .workspace{display:flex}.motion-tool .source-panel{display:contents}.motion-tool .source-panel>h2,.motion-tool .source-panel>.drop,.motion-tool .source-panel>.sample,.motion-tool #source-thumb,.motion-tool #photo-info{order:0;width:100%}.motion-tool .source-panel>fieldset{order:2;background:white;padding:16px;border:1px solid var(--line);border-radius:10px;width:100%;margin-top:0}.motion-tool .preview-panel{order:1}.motion-tool .workspace>.adjustment-panel{order:3;display:block}.motion-tool .adjustment-panel fieldset{margin:16px 0}.motion-tool .source-panel>.project-controls{order:4;background:white;padding:10px 16px;border:1px solid var(--line);border-radius:10px;width:100%}.motion-tool #source-thumb{display:none!important}.motion-tool #viewport{height:420px;max-height:none;min-height:250px}.motion-tool .back-preview{display:block;font-size:12px;margin-top:12px}.motion-tool .motion-presets{grid-template-columns:repeat(3,1fr)}.motion-tool .privacy{font-size:12px}.motion-tool .preview-toolbar .buttons{gap:4px}.motion-tool .preview-toolbar button{padding:7px;font-size:11px}.motion-tool .brush-controls{gap:8px}.motion-tool .playback{gap:6px}.motion-tool #time{font-size:10px}.motion-tool #mask-tools>.buttons{gap:5px}.motion-tool #preview{scroll-margin-top:90px}}
@media(prefers-reduced-motion:reduce){.motion-tool *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* Once controls move below the preview, a sticky canvas must not cover them. */
@media(max-width:1180px){.motion-tool .preview-panel{position:static}}
.motion-tool .tool-update{display:block;margin-top:4px;font-weight:600}