:root{--bg:#121216;--surface:#1b1b21;--surface-2:#232329;--border:#2c2c34;--text:#ececf1;--text-weak:#9a9aa5;--accent:#e0a83e;--accent-strong:#f0be5c;--accent-dim:#e0a83e29;--error:#e06c5f;--radius:10px;--font-body:"Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", system-ui, sans-serif;--font-mono:ui-monospace, "Cascadia Mono", "Consolas", monospace}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;line-height:1.7}#app{flex-direction:column;max-width:720px;min-height:100dvh;margin:0 auto;padding:0 20px 48px;display:flex}main{flex:1}.mono{font-family:var(--font-mono);font-weight:500}.site-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:20px 0 28px;display:flex}.brand{align-items:center;gap:10px;display:flex}.brand-mark{width:28px;height:28px;color:var(--accent);flex:none}.brand-name{letter-spacing:.02em;font-size:18px;font-weight:700}.privacy-badge{color:var(--accent);background:var(--accent-dim);border-radius:var(--radius);border:1px solid #e0a83e59;align-items:center;gap:6px;margin:0;padding:5px 12px;font-size:12.5px;display:inline-flex}.privacy-badge svg{flex:none;width:15px;height:15px}.core-status{color:var(--text-weak);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);align-items:center;gap:12px;margin-bottom:16px;padding:10px 14px;font-size:13px;display:flex}.core-status-error{color:var(--error);border-color:#e06c5f66}.core-bar{background:var(--surface-2);border-radius:2px;flex:1;min-width:60px;height:4px;overflow:hidden}.core-bar-fill{background:var(--accent);width:0%;height:100%;transition:width .15s linear;display:block}.error-banner{border-radius:var(--radius);background:#e06c5f17;border:1px solid #e06c5f73;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px;padding:14px 16px;display:flex}.error-title{color:var(--error);margin:0;font-size:14.5px;font-weight:700}.error-detail{color:var(--text-weak);margin:4px 0 0;font-size:13.5px}.btn{border-radius:var(--radius);cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:11px 20px;font-family:inherit;font-size:14.5px;font-weight:700;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s;display:inline-flex}.btn svg{flex:none;width:16px;height:16px}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--accent);color:#221a08}.btn-primary:hover:not(:disabled){background:var(--accent-strong)}.btn-primary:active:not(:disabled){transform:translateY(1px)}.btn-secondary{background:var(--surface-2);color:var(--text);border-color:var(--border)}.btn-secondary:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.btn-ghost{color:var(--text-weak);border-color:var(--border);background:0 0;min-height:38px;padding:8px 14px;font-weight:500}.btn-ghost:hover:not(:disabled){color:var(--text);border-color:var(--text-weak)}.dropzone{text-align:center;border:2px dashed var(--border);border-radius:var(--radius);background:var(--surface);cursor:pointer;flex-direction:column;align-items:center;gap:4px;padding:56px 24px;transition:border-color .15s,background-color .15s;display:flex}.dropzone:hover,.dropzone:focus-visible{border-color:var(--text-weak)}.dropzone:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.dropzone.dragover{border-color:var(--accent);background:var(--accent-dim)}.dropzone-icon{width:40px;height:40px;color:var(--text-weak);margin-bottom:8px}.dropzone.dragover .dropzone-icon{color:var(--accent)}.dropzone-lead{margin:0;font-size:16px;font-weight:700}.dropzone-or{color:var(--text-weak);margin:2px 0 10px;font-size:13px}.dropzone-note{color:var(--text-weak);margin:18px 0 0;font-size:12.5px}.file-bar{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.file-meta{align-items:baseline;gap:10px;min-width:0;margin:0;display:flex}.file-name{text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700;overflow:hidden}.file-size{color:var(--text-weak);flex:none;font-size:12.5px}.size-warning{color:var(--accent);background:var(--accent-dim);border-radius:var(--radius);border:1px solid #e0a83e59;margin-bottom:12px;padding:10px 14px;font-size:13px}.player{border:1px solid var(--border);border-radius:var(--radius);background:#000;margin-bottom:16px;overflow:hidden}.player video{background:#000;width:100%;max-height:52dvh;display:block}.timeline-holder{margin-bottom:4px}.tl-strip{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);touch-action:none;-webkit-user-select:none;user-select:none;height:64px;position:relative;overflow:hidden}.tl-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.tl-dim{pointer-events:none;background:#121216b8;position:absolute;top:0;bottom:0}.tl-dim-l{left:0}.tl-dim-r{right:0}.tl-range{border:2px solid var(--accent);cursor:grab;box-sizing:border-box;border-radius:6px;position:absolute;top:0;bottom:0}.tl-range:active{cursor:grabbing}.tl-handle{background:var(--accent);cursor:ew-resize;touch-action:none;justify-content:center;align-items:center;width:18px;display:flex;position:absolute;top:0;bottom:0}.tl-handle:before{content:"";position:absolute;inset:0 -10px}.tl-handle-s{border-radius:6px 0 0 6px;left:-2px}.tl-handle-e{border-radius:0 6px 6px 0;right:-2px}.tl-handle:hover,.tl-handle:focus-visible{background:var(--accent-strong)}.tl-handle:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}.tl-grip{background:#221a08a6;border-radius:1px;width:2px;height:22px}.tl-playhead{background:var(--text);opacity:.85;pointer-events:none;width:2px;margin-left:-1px;position:absolute;top:0;bottom:0}.tl-times{color:var(--text-weak);justify-content:space-between;gap:8px;margin-top:8px;font-size:12.5px;display:flex}.tl-times b{color:var(--text);font-weight:600}.tl-times-dur b{color:var(--accent)}.timeline-hint{color:var(--text-weak);margin:6px 0 18px;font-size:12.5px}.actions{flex-wrap:wrap;gap:12px;display:flex}.actions .btn-primary{flex:1;min-width:200px}.convert-progress{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-top:4px;padding:18px}.convert-progress-row{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.convert-progress-row p{margin:0 0 10px;font-size:14px}.bar{background:var(--surface-2);border-radius:4px;height:8px;margin-bottom:14px;overflow:hidden}.bar-fill{background:var(--accent);border-radius:4px;width:0%;height:100%;transition:width .2s;display:block}.result{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-top:24px;padding:20px}.result-title{color:var(--accent);margin:0 0 14px;font-size:16px}.result-gif{border:1px solid var(--border);border-radius:6px;max-width:100%;margin-bottom:12px;display:block}.result-meta{color:var(--text-weak);margin-bottom:16px;font-size:13px}.result-meta b{color:var(--text)}.site-footer{border-top:1px solid var(--border);color:var(--text-weak);margin-top:48px;padding-top:20px;font-size:12px}.site-footer p{margin:0 0 8px}.site-footer a{color:var(--text-weak);text-decoration:underline}.site-footer a:hover{color:var(--accent)}@media (max-width:480px){#app{padding:0 14px 40px}.site-header{padding:16px 0 20px}.brand-name{font-size:16px}.dropzone{padding:40px 16px}.file-bar{flex-direction:column;align-items:stretch}.file-bar .btn{align-self:flex-end}.tl-strip{height:56px}.tl-handle{width:22px}.actions{flex-direction:column}.actions .btn{width:100%}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}