@font-face{font-family:DM Sans Variable;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_astro/dm-sans-latin-wght-normal.Xz1IZZA0.woff2)format("woff2")}.tool-nav{font-family:DM Sans Variable,sans-serif}.animation-page{--sans:"DM Sans Variable", sans-serif;font-family:var(--sans)}.tool-nav{flex-wrap:wrap;justify-content:center;gap:6px;margin:24px auto 0;display:flex}.tool-nav a{color:var(--muted);border-radius:8px;padding:9px 16px;font-size:13px;font-weight:600;text-decoration:none}.tool-nav a[aria-current=page]{background:var(--accent-soft);color:var(--accent)}.tool-nav a:hover{color:var(--text)}.animation-page{max-width:1060px}.animation-hero{text-align:center;margin:32px auto 30px}.animation-hero h1{letter-spacing:-.035em;text-wrap:balance;font-size:clamp(30px,5.8vw,58px);line-height:1.13}.animation-hero h1 span{color:var(--accent)}.animation-hero p{color:var(--muted);margin-top:16px}.animation-editor{border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:24px}.animation-heading{color:var(--muted);justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;font-size:13px;display:flex}.animation-heading button{flex-shrink:0}.animation-drop{overflow:hidden}.animation-drop.is-dragging{border-color:var(--accent)}.animation-empty{flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:300px;display:flex}.animation-empty p{color:var(--muted);font-size:13px}.frame-motif{align-items:center;gap:6px;height:70px;margin-bottom:6px;display:flex}.frame-motif span{border:1px solid var(--accent);opacity:.35;border-radius:4px;width:35px;height:58px;transform:rotate(-12deg)}.frame-motif span:nth-child(2){opacity:.7;height:68px;transform:none}.frame-motif span:nth-child(3){opacity:1;background:var(--accent-soft);transform:rotate(12deg)}.animation-preview{touch-action:pan-y;padding:18px}.animation-preview img{object-fit:contain;user-select:none;background:#151518;width:100%;height:340px;display:block}.frame-preview-controls{justify-content:center;align-items:center;gap:18px;margin-top:16px;display:flex}.frame-preview-controls output{text-align:center;min-width:65px;font:14px var(--mono);font-variant-numeric:tabular-nums}.frame-scrub-label{color:var(--muted);align-items:center;gap:16px;margin-top:16px;font-size:12px;display:flex}.frame-scrub-label input{flex:1;min-width:0}.animation-page input[type=range]{accent-color:var(--accent);cursor:pointer;height:28px}.animation-source-actions{justify-content:space-between;margin-top:10px;display:flex}.animation-status{color:var(--muted);min-height:20px;margin-top:12px;font-size:13px}.animation-progress{align-items:center;gap:16px;margin-top:12px;display:flex}.animation-progress progress{min-width:0;accent-color:var(--accent);flex:1}.animation-settings{border:0;border-top:1px solid var(--line);min-width:0;margin:16px 0 0;padding:24px 0 0}.animation-settings legend{float:left;width:100%;margin-bottom:14px;font-weight:600}.clip-thumbnails{clear:both;border-radius:6px;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;display:grid;overflow:hidden}.clip-thumbnails img{object-fit:cover;background:#1b1b20;width:100%;height:56px}.clip-ranges{grid-template-columns:1fr 1fr;gap:20px;margin:12px 0 16px;display:grid}.clip-ranges label{color:var(--muted);flex-direction:column;gap:2px;min-width:0;font-size:12px;display:flex}.clip-ranges input{width:100%;margin:0}.clip-fields{grid-template-columns:1fr 1fr 1fr;gap:20px;display:grid}.clip-fields label{align-items:center;gap:10px;font-size:13px;display:flex}.time-input{color:var(--muted);align-items:center;gap:6px;display:flex}.clip-fields input,.clip-fields select{width:90px;min-width:0;height:42px;color:var(--text);font:14px var(--sans);background:#09090b;border:1px solid #44444c;border-radius:6px;padding:8px}.clip-hint{color:var(--muted);margin:14px 0 20px;font-size:12px}.animation-settings:disabled{opacity:.5}.frames-result{border-top:1px solid var(--line);margin-top:24px;padding-top:24px}.frames-result-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.frames-result-heading h2{letter-spacing:-.02em;font-size:20px}.frames-thumbnails{scrollbar-color:var(--accent) var(--panel);gap:8px;padding:16px 2px;display:flex;overflow-x:auto}.frames-thumbnails button{color:var(--text);background:0 0;border:2px solid #0000;border-radius:6px;flex:0 0 76px;padding:3px;position:relative}.frames-thumbnails button[aria-pressed=true]{border-color:var(--accent)}.frames-thumbnails img{object-fit:contain;background:#09090b;width:66px;height:64px;display:block}.frames-thumbnails span{font-variant-numeric:tabular-nums;margin-top:4px;font-size:11px;display:block}.animation-privacy{text-align:center;color:var(--muted);margin-top:24px;font-size:12px}.animation-faq{max-width:760px;margin:30px auto 48px}@media (width<=600px){.animation-page{width:calc(100% - 24px)}.animation-editor{padding:16px}.animation-hero{margin:26px auto}.animation-hero p{font-size:13px}.animation-heading{align-items:flex-start;gap:8px;font-size:11px}.animation-preview{padding:10px}.animation-preview img{height:270px}.clip-fields{gap:10px}.clip-fields label{flex-direction:column;align-items:flex-start;gap:6px}.clip-fields input,.clip-fields select{width:68px}.clip-ranges{gap:12px}.clip-thumbnails img{height:40px}.animation-empty{min-height:260px}.frame-scrub-label{gap:8px}}.frame-action-bar{border:0;min-width:0;margin:16px 0 0;padding:0}.frame-action-bar[data-ready=false]{display:none}.frame-action-bar:disabled{opacity:.5}.generate-label-short{display:none}@media (width<=600px){.frame-action-bar,.frame-action-bar[data-ready=false]{inset-inline:0;z-index:5;padding:8px max(12px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);opacity:1;background:#101013;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;margin:0;display:grid;position:fixed;bottom:0}.frame-action-bar .clip-fields{gap:8px}.frame-action-bar .clip-fields label{gap:4px;font-size:12px}.frame-action-bar .time-input{gap:3px;width:100%;font-size:11px}.frame-action-bar .clip-fields input{width:calc(100% - 12px)}.frame-action-bar .clip-fields select{width:100%}.frame-action-bar .clip-fields input,.frame-action-bar .clip-fields select{font-variant-numeric:tabular-nums;height:44px;padding:6px;font-size:16px}.frame-action-bar .button{min-height:44px;padding:10px 12px;font-size:13px}.generate-label-long{display:none}.generate-label-short{display:inline}.animation-page+.site-footer{padding-bottom:calc(100px + env(safe-area-inset-bottom))}html:has(.animation-page){scroll-padding-bottom:calc(100px + env(safe-area-inset-bottom))}}.animation-case-image{object-fit:contain;background:#09090b;border-radius:8px;width:100%;height:300px;display:block}.animation-case-controls{grid-template-columns:auto minmax(0,1fr) 52px;align-items:end;gap:12px;margin-top:12px;display:grid}.animation-case-controls label{color:var(--muted);flex-direction:column;gap:2px;font-size:12px;display:flex}.animation-case-controls input{width:100%;margin:0}.animation-case-controls .button{min-width:64px}.animation-case-controls output{text-align:right;font-variant-numeric:tabular-nums;align-self:center;font-size:12px}.animation-case-keyframes{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px;display:grid}.animation-case-keyframes button{border:1px solid var(--line);color:var(--muted);background:#09090b;border-radius:6px;padding:5px}.animation-case-keyframes button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.animation-case-keyframes img{object-fit:contain;width:100%;height:78px;display:block}.animation-case-keyframes span{font-variant-numeric:tabular-nums;font-size:11px}@media (width<=600px){.animation-case-image{height:240px}.animation-case-controls{gap:8px}.animation-case-keyframes img{height:64px}}.animation-heading picture{flex-shrink:0;display:flex}