*{box-sizing:border-box;margin:0;padding:0}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{color:#e6edf3;-webkit-font-smoothing:antialiased;background:#0d1117;font-family:Hiragino Sans,Noto Sans JP,Yu Gothic,sans-serif;line-height:1.6}.app{max-width:1200px;margin:0 auto;padding:24px 16px 64px}.app header{margin-bottom:24px}.app header h1{margin-bottom:4px;font-size:1.6rem}.app header p{color:#9198a1;font-size:.9rem}.app header p strong{color:#f5c542}.columns{grid-template-columns:minmax(320px,1fr) minmax(280px,420px);align-items:start;gap:20px;display:grid}@media (width<=840px){.columns{grid-template-columns:1fr}}.panel{background:#161b22;border:1px solid #2d333b;border-radius:12px;padding:20px}.panel h2{color:#f5c542;margin:18px 0 8px;font-size:1rem}.panel h2:first-child{margin-top:0}.hint{color:#9198a1;font-size:.78rem}.title-input{color:#e6edf3;background:#0d1117;border:1px solid #2d333b;border-radius:8px;width:100%;margin-top:4px;padding:10px 12px;font-family:inherit;font-size:1rem}.title-input:focus{border-color:#f5c542;outline:2px solid #f5c54280}textarea{color:#e6edf3;resize:vertical;background:#0d1117;border:1px solid #2d333b;border-radius:8px;width:100%;margin-top:8px;padding:12px;font-family:inherit;font-size:1rem}textarea:focus{border-color:#f5c542;outline:2px solid #f5c54280}.fields{grid-template-columns:1fr 1fr;gap:12px 16px;display:grid}@media (width<=520px){.fields{grid-template-columns:1fr}}.fields label{color:#c9d1d9;flex-direction:column;gap:4px;font-size:.82rem;display:flex}.fields select,.fields input[type=range]{accent-color:#f5c542}select{color:#e6edf3;background:#0d1117;border:1px solid #2d333b;border-radius:8px;padding:8px 10px;font-family:inherit;font-size:.9rem}button{cursor:pointer;font-family:inherit}button:disabled{cursor:not-allowed;opacity:.45}.export-buttons{grid-template-columns:1fr 1fr;gap:10px;display:grid}@media (width<=520px){.export-buttons{grid-template-columns:1fr}}.export-buttons button{color:#10151f;background:linear-gradient(#f7d169,#f3bc25);border:none;border-radius:10px;flex-direction:column;align-items:center;gap:2px;padding:12px 8px;font-size:.95rem;font-weight:700;transition:transform .1s;display:flex}.export-buttons button:not(:disabled):hover{transform:translateY(-1px)}.export-buttons button small{opacity:.75;font-size:.68rem;font-weight:400}.apng-fps{flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;font-size:.82rem;display:flex}.warn{color:#f0b429;background:#f0b42914;border:1px solid #f0b42959;border-radius:8px;margin-top:10px;padding:10px 12px;font-size:.8rem}.error{color:#ff7b72;background:#ff7b7214;border:1px solid #ff7b7266;border-radius:8px;margin-top:10px;padding:10px 12px;font-size:.82rem}.progress{margin-top:14px}.progress .progress-label{color:#c9d1d9;margin-bottom:4px;font-size:.8rem}.progress .progress-bar{background:#0d1117;border:1px solid #2d333b;border-radius:6px;height:10px;overflow:hidden}.progress .progress-bar div{background:linear-gradient(90deg,#f5c542,#ff9f43);height:100%;transition:width .15s}.downloads ul{list-style:none}.downloads li{border-bottom:1px solid #2d333b;flex-wrap:wrap;align-items:baseline;gap:10px;padding:8px 0;font-size:.85rem;display:flex}.downloads li a{color:#f5c542;font-weight:700;text-decoration:none}.downloads li a:hover{text-decoration:underline}.downloads li .size{color:#9198a1}.downloads li .note{color:#9198a1;font-size:.75rem}.preview{position:sticky;top:16px}@media (width<=840px){.preview{position:static}}.preview .preview-head{align-items:center;gap:12px;margin-bottom:12px;display:flex}.preview .preview-head h2{margin:0}.preview .preview-head button{color:#10151f;background:#f5c542;border:none;border-radius:8px;padding:6px 16px;font-size:.85rem;font-weight:700}.preview .preview-head .duration{color:#9198a1;margin-left:auto;font-size:.78rem}.preview .canvas-wrap{background:repeating-conic-gradient(#3a3f47 0% 25%,#22272e 0% 50%) 0 0/24px 24px;border:1px solid #2d333b;border-radius:8px;justify-content:center;display:flex;overflow:hidden}.preview .canvas-wrap canvas{width:auto;max-width:100%;display:block}.preview .canvas-wrap[data-orientation=portrait] canvas{max-height:70vh}.preview .canvas-wrap[data-orientation=landscape] canvas{width:100%}.preview .hint{text-align:center;margin-top:8px}.help{background:#161b22;border:1px solid #2d333b;border-radius:12px;margin-top:20px}.help summary{cursor:pointer;padding:14px 20px;font-weight:700}.help summary:hover{color:#f5c542}.help .help-body{padding:0 20px 20px}.help .help-body h3{color:#f5c542;margin:16px 0 6px;font-size:.92rem}.help .help-body p,.help .help-body li{color:#c9d1d9;font-size:.85rem}.help .help-body ol{margin:8px 0;padding-left:1.4em}.help .help-body pre{background:#0d1117;border:1px solid #2d333b;border-radius:8px;margin:8px 0;padding:12px 14px;font-size:.78rem;line-height:1.5;overflow-x:auto}.help .help-body code{background:#0d1117;border-radius:4px;padding:1px 5px;font-size:.82em}