:root{--primary: #4f46e5;--on-primary: #ffffff;--primary-container: #e0e0ff;--on-primary-container: #1a1a5e;--secondary: #5b5d72;--tertiary: #7d5260;--background: #fbfaff;--surface: #ffffff;--surface-variant: #f1f0fa;--surface-container: #f4f3fc;--on-surface: #1b1b21;--on-surface-variant: #46464f;--outline: #c6c5d0;--outline-variant: #e3e1ec;--success: #2e7d4f;--error: #ba1a1a;--shadow: 0 0 0 1px rgba(0, 0, 0, .02);--elev-1: 0 1px 3px rgba(20, 20, 43, .08), 0 1px 2px rgba(20, 20, 43, .04);--elev-2: 0 4px 12px rgba(20, 20, 43, .1), 0 2px 4px rgba(20, 20, 43, .05);--elev-3: 0 12px 32px rgba(20, 20, 43, .14), 0 4px 8px rgba(20, 20, 43, .06);--radius-sm: 10px;--radius-md: 18px;--radius-lg: 28px;--radius-full: 999px;--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--maxw: 1080px}[data-theme=dark]{--primary: #c0c1ff;--on-primary: #1c1a5e;--primary-container: #393a8e;--on-primary-container: #e1e0ff;--secondary: #c4c5dd;--tertiary: #efb8c8;--background: #121218;--surface: #1a1a21;--surface-variant: #232330;--surface-container: #1f1f29;--on-surface: #e5e1e9;--on-surface-variant: #c7c5d0;--outline: #908f9a;--outline-variant: #36353f;--success: #7fd99a;--error: #ffb4ab;--elev-1: 0 1px 3px rgba(0, 0, 0, .4);--elev-2: 0 4px 14px rgba(0, 0, 0, .5);--elev-3: 0 14px 36px rgba(0, 0, 0, .6)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--font-sans);background:var(--background);color:var(--on-surface);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3{line-height:1.15;letter-spacing:-.02em;font-weight:700}.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}.site-header{position:sticky;top:0;z-index:10;-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);background:color-mix(in srgb,var(--background) 80%,transparent);border-bottom:1px solid var(--outline-variant)}.site-header .wrap{display:flex;align-items:center;gap:16px;height:64px}.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--on-surface);font-size:1.05rem}.brand:hover{text-decoration:none}.brand .dot{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--primary),var(--tertiary));display:inline-block}.nav{margin-left:auto;display:flex;align-items:center;gap:6px}.nav a{color:var(--on-surface-variant);padding:8px 12px;border-radius:var(--radius-full);font-size:.92rem;font-weight:500}.nav a:hover{background:var(--surface-variant);text-decoration:none}.icon-btn{border:1px solid var(--outline-variant);background:var(--surface);color:var(--on-surface);width:40px;height:40px;border-radius:var(--radius-full);cursor:pointer;font-size:1.1rem;display:inline-grid;place-items:center;transition:background .15s ease}.icon-btn:hover{background:var(--surface-variant)}.lang-select{font:inherit;font-weight:600;font-size:.85rem;padding:8px 10px;border-radius:var(--radius-full);border:1px solid var(--outline-variant);background:var(--surface);color:var(--on-surface);cursor:pointer}.lang-select:hover{background:var(--surface-variant)}.hero{text-align:center;padding:72px 0 32px;position:relative}.hero:before{content:"";position:absolute;inset:0 0 auto 0;height:420px;background:radial-gradient(60% 60% at 50% 0%,color-mix(in srgb,var(--primary) 16%,transparent),transparent 70%);z-index:-1;pointer-events:none}.pill{display:inline-flex;align-items:center;gap:8px;background:var(--primary-container);color:var(--on-primary-container);padding:7px 16px;border-radius:var(--radius-full);font-size:.85rem;font-weight:600;margin-bottom:22px}.hero h1{font-size:clamp(2.2rem,5vw,3.6rem);margin:0 0 16px;background:linear-gradient(120deg,var(--on-surface),color-mix(in srgb,var(--primary) 70%,var(--on-surface)));-webkit-background-clip:text;background-clip:text;color:transparent}.hero .sub{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--on-surface-variant);max-width:620px;margin:0 auto 26px}.badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:8px}.badge{display:inline-flex;align-items:center;gap:6px;background:var(--surface-container);border:1px solid var(--outline-variant);color:var(--on-surface-variant);padding:8px 14px;border-radius:var(--radius-full);font-size:.9rem;font-weight:500}.badge strong{color:var(--on-surface)}.tool{margin:32px auto 56px}.drop{display:grid;place-items:center;gap:8px;min-height:280px;padding:40px;border:2px dashed var(--outline);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--elev-1);cursor:pointer;text-align:center;transition:border-color .18s ease,background .18s ease,transform .18s ease;outline:none}.drop:hover,.drop:focus-visible{border-color:var(--primary);background:var(--surface-container)}.drop.is-over{border-color:var(--primary);background:var(--primary-container);transform:scale(1.005)}.drop[aria-disabled=true]{pointer-events:none;opacity:.6}.drop .big{font-size:1.25rem;font-weight:600;color:var(--on-surface)}.drop .hint{color:var(--on-surface-variant);font-size:.92rem}.drop .ic{color:var(--primary);margin-bottom:4px;line-height:0}.drop .ic svg{width:44px;height:44px}.badge svg{width:15px;height:15px;color:var(--success);flex:none}.icon-btn svg{width:20px;height:20px}.status{margin:20px auto;max-width:420px;text-align:center;background:var(--surface-container);border:1px solid var(--outline-variant);border-radius:var(--radius-md);padding:16px 20px;color:var(--on-surface-variant);font-weight:500}.result{margin-top:24px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}figure{margin:0;background:var(--surface);border:1px solid var(--outline-variant);border-radius:var(--radius-md);padding:14px;box-shadow:var(--elev-1)}figcaption{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--on-surface-variant);margin-bottom:10px}figure img{width:100%;height:auto;border-radius:var(--radius-sm);display:block}.checker{background-image:linear-gradient(45deg,#cfcfcf 25%,transparent 25%),linear-gradient(-45deg,#cfcfcf 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#cfcfcf 75%),linear-gradient(-45deg,transparent 75%,#cfcfcf 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;background-color:#fff}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px;justify-content:center}.fmt{display:inline-flex;align-items:center;gap:8px;color:var(--on-surface-variant);font-weight:500}select#fmt{font:inherit;padding:10px 14px;border-radius:var(--radius-full);border:1px solid var(--outline);background:var(--surface);color:var(--on-surface);cursor:pointer}.btn{font:inherit;font-weight:600;border:none;cursor:pointer;padding:12px 24px;border-radius:var(--radius-full);background:var(--primary);color:var(--on-primary);box-shadow:var(--elev-1);transition:filter .15s ease,transform .05s ease}.btn:hover{filter:brightness(1.06);text-decoration:none}.btn:active{transform:translateY(1px)}.btn.ghost{background:transparent;color:var(--primary);border:1px solid var(--outline);box-shadow:none}.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin:24px 0 64px}.card{background:var(--surface);border:1px solid var(--outline-variant);border-radius:var(--radius-md);padding:26px;box-shadow:var(--elev-1)}.card .ic{color:var(--primary);margin-bottom:12px;line-height:0}.card .ic svg{width:28px;height:28px}.card h3{margin:0 0 8px;font-size:1.1rem}.card p{margin:0;color:var(--on-surface-variant);font-size:.95rem}.steps{counter-reset:step;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin:24px 0 64px}.step{position:relative;padding:26px 26px 26px 64px;background:var(--surface-container);border-radius:var(--radius-md)}.step:before{counter-increment:step;content:counter(step);position:absolute;left:22px;top:24px;width:30px;height:30px;border-radius:var(--radius-full);background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-weight:700}.step h3{margin:0 0 6px;font-size:1.05rem}.step p{margin:0;color:var(--on-surface-variant);font-size:.93rem}.section-head{text-align:center;margin:56px 0 8px}.section-head h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 8px}.section-head p{color:var(--on-surface-variant);margin:0 auto;max-width:560px}.article{max-width:760px;margin:48px auto 64px}.article h1{font-size:clamp(2rem,4vw,2.8rem);margin:0 0 8px}.article .lede{color:var(--on-surface-variant);font-size:1.15rem;margin-bottom:32px}.article h2{margin:36px 0 12px;font-size:1.4rem}.article p,.article li{color:var(--on-surface)}.article ul{padding-left:22px}.faq-item{border-bottom:1px solid var(--outline-variant);padding:20px 0}.faq-item h3{margin:0 0 8px;font-size:1.1rem}.faq-item p{margin:0;color:var(--on-surface-variant)}.site-footer{border-top:1px solid var(--outline-variant);background:var(--surface);padding:40px 0;margin-top:40px}.site-footer .wrap{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}.foot-links{display:flex;flex-wrap:wrap;gap:18px}.foot-links a{color:var(--on-surface-variant);font-size:.92rem}.foot-note{color:var(--on-surface-variant);font-size:.86rem}@media (max-width: 640px){.grid{grid-template-columns:1fr}.nav a{display:none}.nav a.always{display:inline-block}}@media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto!important}}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}