@font-face{font-family:Anton;src:url('/assets/fonts/anton-latin.woff2') format('woff2');font-display:swap}
:root{--paper:#eef4ff;--ink:#192d50;--blue:#3576db;--violet:#7350cb;--line:#c6d3eb;--muted:#647592}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei",sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}[hidden]{display:none!important}main{max-width:1140px;margin:auto;padding:66px 32px 24px}.intro{position:relative;padding-bottom:45px}.eyebrow{color:var(--blue);font-size:12px;letter-spacing:2px;font-weight:700;margin:0 0 20px}h1{margin:0;font-size:clamp(42px,6vw,72px);font-weight:850;letter-spacing:-3px;line-height:1.18}h1 span{color:var(--violet);position:relative}h1 span:after{content:"";position:absolute;bottom:0;left:0;right:0;height:6px;background:#bca6ed;transform:rotate(-3deg)}.lead{position:absolute;bottom:48px;right:0;font-size:17px;line-height:1.9;margin:0;color:var(--muted)}.inputs{display:grid;grid-template-columns:1fr 1fr;gap:32px;position:relative}.upload-window{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 8px 0 #dce5f6}.window-title{height:53px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;border-bottom:1px solid var(--line);font-size:13px;font-weight:700}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:9px}.video-dot{background:var(--blue)}.image-dot{background:var(--violet)}.window-title button{border:0;background:none;color:var(--muted);padding:8px}.drop-zone{height:310px;display:flex;align-items:center;justify-content:center;position:relative;background:#f9fbff;cursor:pointer;transition:background .15s}.drop-zone.dragging{background:#e1eafe;outline:3px solid var(--blue);outline-offset:-3px}.drop-zone input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.drop-zone:focus-within{outline:3px solid var(--violet);outline-offset:-3px}.empty{display:flex;align-items:center;flex-direction:column;pointer-events:none;gap:12px;color:var(--muted);font-size:13px}.empty strong{font-size:20px;color:var(--ink)}.empty small{margin-top:8px;font-size:11px}.upload-symbol{width:74px;height:74px;border-radius:20px;background:#e4edff;color:var(--blue);font-size:46px;display:grid;place-items:center;margin-bottom:12px;line-height:1}.portrait{background:#eee7fc;color:var(--violet)}.drop-zone img,.drop-zone video{width:100%;height:100%;object-fit:contain;position:relative;background:#e7edf7}.drop-zone video{z-index:1}.file-caption{margin:0;padding:15px 20px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.swap-symbol{position:absolute;z-index:2;top:170px;left:50%;transform:translateX(-50%) rotate(-8deg);width:52px;height:52px;border-radius:14px;background:var(--ink);color:white;display:grid;place-items:center;font-size:30px;border:5px solid var(--paper)}.action-row{display:flex;justify-content:space-between;align-items:center;margin-top:35px;gap:20px}.action-row p{font-size:14px;margin:0;line-height:1.8}.action-row small{display:block;font-size:11px;color:var(--muted)}.generate{border:0;border-radius:12px;background:var(--violet);color:white;font-weight:700;padding:19px 30px;min-width:210px;box-shadow:0 4px 0 #543895}.generate span{margin-left:26px;font-size:22px}.generate:hover:enabled{background:#6240b9}.status-panel{display:flex;align-items:center;gap:10px;min-height:62px;color:var(--muted);font-size:13px}.status-panel p{margin:0}.status-light{flex-shrink:0;width:7px;height:7px;border-radius:50%;background:#8b9ab0}.status-light.ready{background:#299a81}.status-light.busy{background:var(--violet);animation:pulse 1.5s ease-in-out infinite}.status-panel button{background:white;border:1px solid var(--line);border-radius:6px;color:var(--blue);padding:7px 12px}.result{margin:20px 0 32px;padding:24px;border:1px solid var(--line);border-radius:18px;background:white}.result-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}.result h2{font-size:22px;margin:0}.result a{color:var(--violet);font-size:14px;font-weight:700}.result video{width:100%;max-height:600px;border-radius:8px;background:#192d50}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:20px;margin-top:22px;color:var(--muted);font-size:11px}footer span:first-child{font-weight:700}button:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:4px}@keyframes pulse{50%{opacity:.25}}@media(max-width:700px){main{padding:35px 18px 24px}.intro{padding-bottom:28px}h1{letter-spacing:-2px}.lead{position:static;font-size:14px;margin-top:20px}.inputs{grid-template-columns:1fr;gap:24px}.drop-zone{height:255px}.swap-symbol{display:none}.action-row{flex-direction:column;align-items:stretch;margin-top:28px}.generate{width:100%}.action-row p{font-size:12px}.result{padding:15px}.result h2{font-size:19px}footer{gap:12px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.sample-actions{display:flex;align-items:center;gap:12px;padding:0 20px 16px;font-size:12px;color:var(--muted)}.sample-actions button{border:1px solid var(--line);border-radius:8px;background:#f4f7ff;padding:8px 12px;color:var(--blue);font-size:12px;font-weight:700}.sample-actions a{margin-left:auto;color:var(--blue);font-size:12px;white-space:nowrap}
.template-library{margin:0 0 42px}.library-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:18px}.library-heading .eyebrow{margin:0 0 9px}.library-heading h2{font-size:26px;letter-spacing:-1px;margin:0}.library-heading>p{font-size:12px;color:var(--muted);line-height:1.7;margin:0}.template-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.template-card{background:white;border:1px solid var(--line);border-radius:14px;overflow:hidden}.template-media{position:relative;aspect-ratio:16/9;background:#14233d}.template-media video{width:100%;height:100%;object-fit:contain;display:block}.duration-badge{position:absolute;top:10px;right:10px;border-radius:5px;background:#192d50cc;color:white;padding:4px 6px;font-size:10px;pointer-events:none}.template-details{padding:12px}.template-details h3{font-size:14px;margin:0 0 5px}.template-details p{font-size:10px;color:var(--muted);margin:0 0 12px}.use-sample{width:100%;padding:9px;border:1px solid var(--line);border-radius:7px;background:#f4f7ff;color:var(--blue);font-size:12px;font-weight:700}.use-sample[aria-pressed=true]{border-color:var(--violet);background:#eee7fc;color:var(--violet)}.use-sample[aria-pressed=true]:after{content:" ✓"}.generation-progress{margin-top:22px;padding:16px 18px;background:white;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:15px}.generation-progress ol{list-style:none;display:flex;gap:22px;padding:0;margin:0;font-size:12px;color:var(--muted)}.generation-progress li[data-active=true]{color:var(--violet);font-weight:700}.generation-progress li[data-done=true]{color:#278e78}.generation-progress li[data-done=true]:before{content:"✓ ";}.generation-progress>span{font-size:11px;color:var(--muted);white-space:nowrap}@media(max-width:850px){.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.template-library{margin-bottom:28px}.library-heading{display:block}.library-heading>p{margin-top:12px}.library-heading h2{font-size:23px}.generation-progress{align-items:flex-start;flex-direction:column}.generation-progress ol{gap:15px;font-size:11px}}
.generation-progress ol{flex-wrap:wrap;row-gap:9px}main{padding-top:42px}.intro{padding-bottom:32px}h1{font-size:clamp(40px,5.2vw,60px)}.lead{bottom:35px}@media(max-width:700px){main{padding-top:30px}.lead{bottom:auto}}