.animation-page{padding-block:58px 44px;max-width:1120px}.animation-page:before{content:"";position:fixed;inset:80px 0 0;z-index:-1;pointer-events:none;background:linear-gradient(#ffffff02 1px,transparent 1px),linear-gradient(90deg,#ffffff02 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(#000,transparent 85%)}.animation-hero{display:grid;grid-template-columns:1.08fr 1fr;min-height:345px;gap:45px;align-items:center;margin-bottom:42px}.animation-eyebrow{font:10px monospace;letter-spacing:3px;color:#96919b;margin:0 0 20px}.animation-intro h1{font-size:clamp(40px,4.6vw,59px);letter-spacing:-2.7px;line-height:1.04;margin:0 0 20px;font-weight:800}.animation-intro h1 span{color:#fff}.animation-description{font-size:14px;line-height:1.85;color:#a8a4ad;max-width:490px;margin-bottom:24px}.output-badge{border:1px solid #424047;display:inline-flex;flex-direction:column;border-radius:14px;padding:12px 22px;gap:4px;min-width:120px;background:#ffffff03}.output-badge span{font:9px monospace;letter-spacing:2.4px;color:#aaa4ad}.output-badge strong{font-size:27px;line-height:1.2}.animation-visual{height:335px;position:relative;min-width:0;background:radial-gradient(ellipse at center,#9d6ae512,transparent 66%);border-bottom:1px solid #ffffff06}.animation-visual canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}.animation-visual canvas:active{cursor:grabbing}.preview-caption{position:absolute;bottom:9px;left:0;right:0;text-align:center;font:8px monospace;letter-spacing:2px;color:#77717e;pointer-events:none}.animation-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}.animation-steps article{background:#111113;border:1px solid #2b292e;border-radius:18px;padding:23px}.animation-steps article>span,.animation-loader label,.animation-controls legend,.animation-controls>label,.animation-source-summary span,.animation-export-row>label,.animation-setup label{display:block;font:10px monospace;letter-spacing:2px;color:#a09aa5}.animation-steps article>span{color:#726b77;margin-bottom:14px}.animation-steps h2{font-size:15px;margin:0 0 7px;letter-spacing:-.3px}.animation-steps p{font-size:12px;line-height:1.7;color:#928c98;margin:0}.animation-loader{border:1px dashed #48414a;border-radius:19px;padding:29px;background:#111113b0;transition:border-color .2s,background .2s}.animation-loader.is-dragging{border-color:#d9c3ff;background:#32263c}.animation-id-row{display:flex;gap:12px;margin:14px 0}.animation-page input:not([type=range]),.animation-setup input,.animation-page select,.animation-setup select{background:#1a191c;border:1px solid #343037;color:#f5f1f6;border-radius:11px;min-width:0;min-height:49px;padding:12px 16px;font:13px monospace;letter-spacing:0;width:100%}.animation-id-row input{flex:1;font-size:16px!important}.animation-page input::placeholder{color:#77717d}.anim-primary,.anim-secondary{min-height:45px;padding:13px 20px;border-radius:11px;font:700 11px monospace;letter-spacing:.3px;white-space:nowrap;border:1px solid transparent;transition:background .2s,opacity .2s}.anim-primary{background:#f7f5fa;color:#141217}.anim-primary:hover{background:#e5d9f8}.anim-secondary{background:#1a191d;border-color:#46404c;color:#e1dae8}.anim-secondary:hover{background:#29232e}.anim-primary:disabled,.anim-secondary:disabled{opacity:.45;cursor:wait}.animation-id-row .anim-primary{min-width:105px}.local-file-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font:11px monospace;line-height:1.8;color:#938a99}.animation-loader .file-picker{display:inline-block;position:relative;font:11px monospace;letter-spacing:0;text-decoration:underline;color:#c6b9d1;cursor:pointer}.file-picker input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;padding:0!important;min-height:0!important}.animation-feedback{margin:16px 0;padding:14px 17px;border:1px solid #40394b;background:#1c1721;border-radius:12px;font-size:13px;line-height:1.7;color:#d6c8e5}.animation-feedback.is-error{background:#2b1418;color:#ff929e;border-color:#70303d}.animation-workspace,.animation-result{margin-top:20px;border:1px solid #35303b;border-radius:18px;padding:24px;background:#111114}.animation-source-summary{display:flex;justify-content:space-between;gap:18px;align-items:center;padding-bottom:22px;border-bottom:1px solid #2c2732}.animation-source-summary strong{display:block;margin-top:10px;font-size:17px;overflow-wrap:anywhere}.animation-source-summary p{font:11px monospace;color:#b4a9be}.animation-controls{display:flex;flex-wrap:wrap;align-items:end;gap:20px;padding-top:22px}.animation-controls fieldset{padding:0;border:0;margin:0}.animation-controls legend{margin-bottom:10px}.rig-options{display:flex;padding:4px;background:#1a171e;border:1px solid #39323f;border-radius:12px}.rig-options button{background:transparent;border:0;border-radius:8px;padding:11px 21px;color:#a79bb4;font:700 14px monospace}.rig-options button[aria-pressed=true]{background:#e9e1f1;color:#17121b}.animation-controls>label{display:grid;gap:10px;min-width:130px}.animation-controls>.anim-primary{margin-left:auto}.preview-transport{display:flex;align-items:center;gap:16px;margin-top:23px}.preview-transport input{flex:1;min-width:70px;accent-color:#e9e1f1}.preview-transport output{font:11px monospace;min-width:85px;color:#b9afc2}.retarget-note{font-size:11px;line-height:1.9;color:#92889e;margin:20px 0 0}.animation-result-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;padding-bottom:20px;border-bottom:1px solid #302a36;font-size:14px}.animation-result-heading>span{font:10px monospace;color:#a89ab5}.animation-export-row{display:flex;align-items:end;gap:12px;padding-top:18px}.animation-export-row>label{flex:1;min-width:0}.animation-export-row input{margin-top:10px;font-weight:bold!important;min-height:45px!important}.animation-upload-result{display:flex;flex-wrap:wrap;gap:15px;align-items:center;margin-top:20px;padding-top:20px;border-top:1px solid #342b3d;font:12px monospace;color:#cbb0e5}.animation-setup-note{margin-top:20px;border:1px solid #302b34;border-radius:14px;background:#121113;padding:19px 24px;display:flex;gap:24px;align-items:center}.animation-setup-note p{font:11px/1.9 monospace;color:#9c939f;margin:0}.animation-setup-note strong{color:#e8e0ec}.animation-setup-note button{flex-shrink:0}.animation-footer{display:flex;justify-content:space-between;padding-block:12px 35px;color:#817787;font-size:11px}.animation-setup label{margin:16px 0 9px}.animation-setup select{margin-top:9px}.animation-setup .setup-close{position:absolute;top:18px;right:20px;background:none;border:0;font-size:24px}.setup-actions{display:flex;justify-content:end;gap:12px;margin:23px 0}.animation-setup a{font-size:12px;color:#c2a6dd;text-decoration:underline}.setup-permissions{font-size:12px!important;color:#b7a0c8!important}.animation-setup p{line-height:1.8}.animation-setup{max-width:540px;width:calc(100% - 32px)}
@media(max-width:860px){.animation-page{padding-top:35px}.animation-hero{gap:15px;min-height:300px}.animation-visual{height:290px}.animation-steps article{padding:20px 15px}.animation-export-row{flex-wrap:wrap}.animation-export-row>label{flex-basis:100%}.animation-export-row>button{flex:1}.animation-setup-note{align-items:start;flex-direction:column;gap:14px}.animation-intro h1{letter-spacing:-2px}}@media(max-width:580px){.animation-page.container,.animation-footer.container{width:calc(100% - 36px)}.animation-hero{grid-template-columns:1fr;gap:8px;margin-bottom:25px}.animation-visual{height:240px;grid-row:2}.animation-intro h1{font-size:42px}.animation-steps{grid-template-columns:1fr;gap:9px}.animation-steps article{padding:18px}.animation-steps article>span{margin-bottom:7px}.animation-loader{padding:20px}.animation-id-row{gap:8px}.animation-id-row input{font-size:12px!important;padding:12px!important}.animation-id-row .anim-primary{min-width:70px;padding:12px}.animation-source-summary{align-items:start;flex-direction:column;gap:0}.animation-workspace,.animation-result{padding:19px}.animation-controls{gap:15px}.animation-controls>.anim-primary{width:100%;margin:0}.preview-transport{flex-wrap:wrap;gap:12px}.preview-transport output{min-width:75px}.preview-transport .anim-secondary{padding:11px;font-size:10px}.animation-result-heading{align-items:start;flex-direction:column;gap:8px}.animation-export-row>button{font-size:9px;padding:13px 10px}.animation-setup-note{padding:19px}.output-badge{padding:10px 18px}.animation-description{font-size:13px}}