:root{--bg: #f8fafc;--surface: #ffffff;--surface-soft: #f4f8fc;--surface-tint: #f0f9ff;--text: #0f172a;--text-secondary: #64748b;--text-muted: #94a3b8;--border: #dce6f0;--border-strong: rgba(37, 99, 235, .28);--blue: #2563eb;--cyan: #22d3ee;--amber: #f59e0b;--ok: #059669;--danger: #dc2626;--shadow-sm: 0 4px 16px rgba(15, 23, 42, .04);--shadow-md: 0 10px 40px rgba(15, 23, 42, .05);--shadow-lg: 0 14px 44px rgba(37, 99, 235, .1);--radius: 22px;--radius-sm: 11px;--font: "Segoe UI", "Avenir Next", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;--motion: .18s ease}@media(prefers-color-scheme:dark){:root{--bg: #07101c;--surface: #0f1b2e;--surface-soft: #122033;--surface-tint: #10243a;--text: #e8eef7;--text-secondary: #8b9bb4;--text-muted: #6b7c94;--border: rgba(255, 255, 255, .1);--border-strong: rgba(34, 211, 238, .35);--ok: #34d399;--danger: #f87171;--shadow-sm: 0 4px 16px rgba(0, 0, 0, .25);--shadow-md: 0 10px 40px rgba(0, 0, 0, .35);--shadow-lg: 0 14px 44px rgba(34, 211, 238, .12)}}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:var(--font);color:var(--text);background:radial-gradient(circle at 50% 0%,rgba(34,211,238,.08),transparent 35%),radial-gradient(circle at 80% 20%,rgba(37,99,235,.05),transparent 40%),var(--bg);background-attachment:fixed;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}.skip-link{position:absolute;left:1rem;top:0;z-index:100;transform:translateY(-120%);background:var(--blue);color:#fff;font-weight:650;text-decoration:none;padding:.65rem 1rem;border-radius:0 0 10px 10px;min-height:44px;display:inline-flex;align-items:center}.skip-link:focus{transform:translateY(0);outline:none}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:1.5rem 1.25rem 2rem;padding-top:max(1.5rem,env(safe-area-inset-top));padding-right:max(1.25rem,env(safe-area-inset-right));padding-bottom:max(2rem,env(safe-area-inset-bottom));padding-left:max(1.25rem,env(safe-area-inset-left))}.top{display:flex;align-items:center;max-width:920px;width:100%;margin:0 auto 2rem}.brand{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--text);border-radius:8px}.brand:focus-visible{outline:2px solid var(--blue);outline-offset:3px}.mark{display:block;flex-shrink:0}.wordmark{font-weight:750;letter-spacing:-.035em;font-size:1.2rem;line-height:1}.wm-drop{color:var(--text)}.wm-img{background:linear-gradient(135deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}.wm-io{color:var(--text-muted);font-weight:600;font-size:.92em}.hero{max-width:920px;width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:stretch}main{flex:1;width:100%}.tagline{margin:0 0 .75rem;font-size:clamp(2.25rem,5vw,4rem);font-weight:800;letter-spacing:-.035em;line-height:1.05;color:var(--text);max-width:16ch}.sub{margin:0 0 1.15rem;color:var(--text-secondary);font-size:1.05rem;line-height:1.55;max-width:36rem}.trust-chips{list-style:none;margin:1.15rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem;justify-content:flex-start}.trust-chips li{font-size:.78rem;font-weight:600;color:var(--text-muted);background:transparent;border:none;border-radius:0;padding:.15rem 0;letter-spacing:-.01em}.trust-chips li:not(:last-child):after{content:"·";margin-left:.45rem;color:var(--text-muted);font-weight:500}.dropzone{position:relative;border:1px dashed var(--border-strong);border-radius:var(--radius);background:linear-gradient(180deg,var(--surface),var(--surface-soft));box-shadow:var(--shadow-md);min-height:300px;padding:2.25rem 1.5rem;cursor:pointer;outline:none;transition:border-color var(--motion),background var(--motion),box-shadow var(--motion),transform var(--motion)}@media(hover:hover)and (pointer:fine){.dropzone:hover{border-color:#2563eb73;background:linear-gradient(180deg,var(--surface),var(--surface-tint));box-shadow:var(--shadow-lg);transform:translateY(-2px)}}.dropzone:focus-visible{border-color:var(--blue);box-shadow:var(--shadow-md),0 0 0 3px #2563eb33}.dropzone.is-busy,.dropzone.is-done{cursor:default}.dropzone.dragover{border-color:var(--cyan);border-style:solid;background:radial-gradient(circle at 50% 40%,rgba(34,211,238,.12),transparent 55%),linear-gradient(180deg,var(--surface),var(--surface-tint));box-shadow:var(--shadow-lg),inset 0 0 0 1px #22d3ee40;transform:translateY(-2px)}.dropzone.dragover .icon-ring{transform:scale(1.08)}.state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.85rem;min-height:240px}.state.hidden{display:none}.icon-ring{display:grid;place-items:center;width:72px;height:72px;border-radius:20px;background:linear-gradient(160deg,#2563eb14,#22d3ee24);border:1px solid rgba(37,99,235,.12);margin-bottom:.35rem;transition:transform var(--motion)}.dz-title{margin:0;font-size:1.2rem;font-weight:700;letter-spacing:-.02em;color:var(--text)}.dz-title.success{color:var(--ok)}.dz-title.error{color:var(--danger)}.dz-hint{margin:0;color:var(--text-muted);font-size:.92rem;line-height:1.45;max-width:28rem}.choose-btn{margin-top:.35rem;min-width:10.5rem}.idle-mobile{display:none}.idle-desktop,.hint-desktop{display:inline}kbd{display:inline-block;padding:.12rem .4rem;border-radius:6px;border:1px solid var(--border);background:#eef4fa;color:var(--text);font-size:.8em;font-family:inherit;font-weight:600;line-height:1.3}@media(prefers-color-scheme:dark){kbd{background:#ffffff0f}}.preview{max-width:min(280px,70vw);max-height:120px;border-radius:12px;object-fit:contain;box-shadow:var(--shadow-sm);border:1px solid var(--border);background:var(--surface)}.progress{width:min(320px,70vw);height:8px;border-radius:999px;background:#e8eef5;overflow:hidden}@media(prefers-color-scheme:dark){.progress{background:#ffffff14}}.progress-bar{height:100%;width:0%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .15s ease}.success-badge{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--ok);background:#0596691a;border:1px solid rgba(5,150,105,.2)}.url-row{display:flex;gap:.5rem;width:min(520px,100%)}.url-input{flex:1;min-width:0;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:var(--radius-sm);padding:.7rem .9rem;font:inherit;font-size:.95rem;min-height:44px}.url-input:focus{outline:2px solid rgba(37,99,235,.35);outline-offset:1px;border-color:var(--blue)}.actions{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:.25rem}.btn{appearance:none;border:1px solid transparent;border-radius:var(--radius-sm);padding:.65rem 1.05rem;min-height:44px;font:inherit;font-weight:650;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion),border-color var(--motion),box-shadow var(--motion),transform var(--motion)}.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.btn.primary{background:var(--blue);color:#fff;box-shadow:0 1px 2px #2563eb40}@media(hover:hover)and (pointer:fine){.btn.primary:hover{background:#1d4ed8}.btn.secondary:hover{border-color:#c5d4e4;background:var(--surface-soft)}.btn.danger:hover{background:#dc26260d}}.btn.secondary{background:var(--surface);border-color:var(--border);color:var(--text)}.btn.danger{background:var(--surface);border-color:#dc262647;color:var(--danger)}.btn:active{transform:scale(.98)}.recent{margin-top:2.75rem}.recent h2{margin:0 0 .85rem;font-size:.78rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}.recent ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.recent li{display:flex;align-items:center;gap:.75rem;font-size:.88rem;color:var(--text-secondary);background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.55rem .75rem;box-shadow:var(--shadow-sm)}.recent a{color:var(--text-secondary);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.recent a:hover{color:var(--blue)}.recent a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}.recent button{margin-left:auto;appearance:none;border:none;background:transparent;color:var(--text-muted);cursor:pointer;font:inherit;font-size:.82rem;font-weight:600;min-height:44px;padding:0 .35rem;border-radius:6px}.recent button:hover{color:var(--danger)}.recent button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}.below{max-width:920px;width:100%;margin:2.75rem auto 0}.howto-compact{margin:0 0 2.25rem}.howto-compact h2,.faq-compact h2{margin:0 0 .85rem;font-size:.78rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem 1.25rem;align-items:start}.flow li{position:relative;padding:0;background:none;border:none;box-shadow:none}.flow li:not(:last-child):after{content:"→";position:absolute;right:-.85rem;top:.15rem;color:var(--text-muted);font-weight:500}.flow strong{display:block;margin:0 0 .2rem;color:var(--text);font-weight:700;letter-spacing:-.02em;font-size:1rem}.flow span{color:var(--text-muted);font-size:.9rem;line-height:1.4}.faq-compact{margin:0}.faq-compact .faq-list{display:flex;flex-direction:column;gap:.35rem}.faq-compact details{background:transparent;border:none;border-bottom:1px solid var(--border);border-radius:0;padding:0;box-shadow:none}.faq-compact summary{cursor:pointer;list-style:none;padding:.7rem 0;font-weight:650;letter-spacing:-.015em;color:var(--text-secondary);font-size:.95rem}.faq-compact summary::-webkit-details-marker{display:none}.faq-compact summary:after{content:"+";float:right;color:var(--text-muted);font-weight:600}.faq-compact details[open] summary:after{content:"–"}.faq-compact details p{margin:0 0 .85rem;color:var(--text-muted);font-size:.92rem;line-height:1.5;max-width:40rem}.faq-compact summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}.foot{max-width:920px;width:100%;margin:2.25rem auto 0;display:flex;flex-direction:column;gap:.75rem;color:var(--text-muted);font-size:.82rem}.foot-legal{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .55rem}.foot-seo{display:flex;flex-wrap:wrap;gap:.55rem 1rem}.foot a{color:var(--text-muted);text-decoration:none}.foot a:hover{color:var(--text-secondary)}.foot a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}.foot-seo a{font-size:.78rem}@media(max-width:640px){.page{padding:1rem 1rem 1.75rem;padding-top:max(1rem,env(safe-area-inset-top));padding-right:max(1rem,env(safe-area-inset-right));padding-bottom:max(1.75rem,env(safe-area-inset-bottom));padding-left:max(1rem,env(safe-area-inset-left))}.top{margin-bottom:1.25rem}.tagline{font-size:clamp(1.85rem,8.5vw,2.6rem);max-width:none;margin-bottom:.65rem}.sub{font-size:.98rem;margin-bottom:1rem}.dropzone{min-height:280px;padding:1.6rem 1rem;border-radius:18px}.state{min-height:220px;gap:.75rem}.choose-btn{width:min(100%,16rem);min-width:0}.idle-desktop{display:none}.idle-mobile{display:inline}.hint-desktop{display:none}.url-row{flex-direction:column;width:100%}.url-row .btn{width:100%}.actions{width:100%;flex-direction:column}.actions .btn{flex:1 1 auto;width:100%}.flow{grid-template-columns:1fr;gap:.85rem}.flow li:not(:last-child):after{display:none}.below{margin-top:2.25rem}.foot{margin-top:2rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.dropzone:hover,.dropzone.dragover{transform:none}}