.transition-tool{color-scheme:dark;--ink:#f4f7fb;--ink-muted:#aeb9cd;--ink-dim:#8492aa;--ink-faint:#6f809d;--accent:#8fb3ff;--accent-b:#8de2c2;--danger:#ff9a9a;--page:#10131a;--card:#161c28d1;--card-edge:#2c3547;--field:#151c29;--field-edge:#45536d;background:var(--page);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.transition-tool *{box-sizing:border-box}.transition-tool{background:radial-gradient(circle at 80% -15%, #24355f 0, transparent 31rem), var(--page);min-width:320px;margin:0}.transition-tool .app-shell{width:min(1120px,100% - 2rem);margin:0 auto;padding:3.5rem 0 4rem}.transition-tool header{max-width:720px;margin-bottom:2.25rem}.transition-tool .eyebrow{color:var(--accent);letter-spacing:.13em;margin:0 0 .6rem;font-size:.75rem;font-weight:750}.transition-tool h1{letter-spacing:-.055em;margin:0;font-size:clamp(2.25rem,5vw,4.3rem);line-height:.98}.transition-tool .intro{color:var(--ink-muted);margin:1rem 0 0;line-height:1.55}.transition-tool .source-grid{grid-template-columns:repeat(2,1fr);gap:1rem;display:grid}.transition-tool .source-card,.transition-tool .controls,.transition-tool .output-controls{border:1px solid var(--card-edge);background:var(--card);border-radius:.9rem}.transition-tool .source-card{padding:1.15rem}.transition-tool .source-heading{align-items:center;gap:.6rem;display:flex}.transition-tool h2{margin:0;font-size:.95rem}.transition-tool .badge{background:var(--accent);color:#111827;border-radius:50%;place-items:center;width:1.45rem;height:1.45rem;font-size:.75rem;font-weight:800;display:grid}.transition-tool .badge-b{background:var(--accent-b)}.transition-tool .file-picker{cursor:pointer;color:#d4def1;border:1px dashed #4b5a75;border-radius:.55rem;place-items:center;min-height:4.2rem;margin-top:1rem;font-size:.88rem;transition:border-color .12s,background .12s,transform .12s;display:grid}.transition-tool .file-picker:hover,.transition-tool .file-picker.is-dragging{border-color:var(--accent);background:#1d2941}.transition-tool .file-picker.is-dragging{border-style:solid;transform:scale(1.01)}.transition-tool .file-picker input{display:none}.transition-tool .image-duration{color:var(--ink-muted);grid-template-columns:1fr auto;align-items:center;gap:.4rem;margin-top:.9rem;font-size:.78rem;display:grid}.transition-tool .image-duration input{width:100%;accent-color:var(--accent);grid-column:1/-1}.transition-tool .image-duration output{color:var(--ink);font-variant-numeric:tabular-nums}.transition-tool .media-status{min-height:1.3em;color:var(--ink-faint);text-overflow:ellipsis;white-space:nowrap;margin:.55rem 0 0;font-size:.75rem;overflow:hidden}.transition-tool .media-status.is-error{color:var(--danger);white-space:normal}.transition-tool .controls{grid-template-columns:1.6fr 1.2fr 1fr .8fr 1fr auto;align-items:end;gap:1rem;margin:1rem 0;padding:1.1rem;display:grid}.transition-tool .output-controls{grid-template-columns:repeat(4,1fr) auto;align-items:end;gap:1rem;margin:0 0 1rem;padding:1.1rem;display:grid}.transition-tool .controls label,.transition-tool .output-controls label{color:var(--ink-muted);gap:.45rem;font-size:.75rem;display:grid}.transition-tool .controls output{float:right;color:var(--ink);font-variant-numeric:tabular-nums}.transition-tool .controls select,.transition-tool .controls input[type=text],.transition-tool .controls input[type=search],.transition-tool .output-controls select,.transition-tool .output-controls input[type=number],.transition-tool button{border:1px solid var(--field-edge);background:var(--field);color:var(--ink);min-height:2.5rem;font:inherit;border-radius:.45rem;padding:.5rem .65rem}.transition-tool .controls input[type=range]{width:100%;accent-color:var(--accent)}.transition-tool .controls select{min-width:0}.transition-tool button{background:var(--accent);color:#101522;cursor:pointer;white-space:nowrap;border:0;font-weight:750}.transition-tool button:disabled{opacity:.45;cursor:not-allowed}.transition-tool #cancel{border:1px solid var(--field-edge);color:var(--ink-muted);background:0 0;font-weight:600}.transition-tool .output-actions{align-items:end;gap:.5rem;display:flex}.transition-tool .hint{min-height:1.1em;color:var(--ink-faint);text-overflow:ellipsis;white-space:nowrap;font-size:.7rem;overflow:hidden}.transition-tool .hint.is-error{color:var(--danger);white-space:normal}.transition-tool [aria-invalid=true]{border-color:var(--danger)!important}.transition-tool .output-summary{color:var(--ink-faint);font-variant-numeric:tabular-nums;grid-column:1/-1;margin:0;font-size:.75rem}.transition-tool #export-progress{appearance:none;background:#2b3548;border:0;border-radius:9px;grid-column:1/-1;width:100%;height:.35rem;overflow:hidden}.transition-tool #export-progress::-webkit-progress-bar{background:#2b3548}.transition-tool #export-progress::-webkit-progress-value{background:linear-gradient(90deg, var(--accent), var(--accent-b))}.transition-tool #export-progress::-moz-progress-bar{background:var(--accent)}.transition-tool .stage-wrap{aspect-ratio:16/9;border:1px solid var(--card-edge);background:#07090d;border-radius:.9rem;position:relative;overflow:hidden}.transition-tool .stage-wrap canvas{object-fit:contain;width:100%;height:100%;display:block}.transition-tool .stage-empty{color:var(--ink-dim);pointer-events:none;place-items:center;font-size:.9rem;display:grid;position:absolute;inset:0}.transition-tool .stage-empty[hidden]{display:none}.transition-tool .timeline{background:#2b3548;border-radius:9px;height:.35rem;margin-top:1rem;position:relative;overflow:hidden}.transition-tool .timeline i{background:linear-gradient(90deg, var(--accent), var(--accent-b));width:0;height:100%;display:block}.transition-tool .timeline b{background:#eff5ff;border-radius:50%;width:.8rem;height:.8rem;position:absolute;top:50%;left:0;translate:-50% -50%;box-shadow:0 1px 7px #0009}.transition-tool .playback-meta{color:var(--ink-dim);font-variant-numeric:tabular-nums;justify-content:space-between;gap:1rem;margin-top:.65rem;font-size:.75rem;display:flex}.transition-tool .playback-meta .is-error{color:var(--danger)}.transition-tool .privacy-note{color:#74819a;margin-top:2rem;font-size:.75rem}@media (width<=900px){.transition-tool .controls,.transition-tool .output-controls{grid-template-columns:1fr 1fr}}@media (width<=720px){.transition-tool .app-shell{padding-top:2rem}.transition-tool .source-grid,.transition-tool .controls,.transition-tool .output-controls{grid-template-columns:1fr}.transition-tool .controls{align-items:stretch}.transition-tool .controls button,.transition-tool .output-actions{width:100%}.transition-tool .playback-meta{flex-direction:column;gap:.25rem}}