@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, ul, ol { margin: 0; }
  ul, ol { padding: 0; }
  button, input, select, textarea { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
  img, svg { display: block; max-width: 100%; }
}

@layer base {
  :root {
    color-scheme: light;
    --ink: #07111f;
    --navy: #0b1830;
    --navy-2: #10264a;
    --paper: #f5f8fc;
    --white: #fff;
    --text: #12213a;
    --muted: #61718a;
    --line: #dce4ef;
    --line-dark: #263b5c;
    --blue: #4d8dff;
    --blue-dark: #286ee5;
    --mint: #4ee8d2;
    --orange: #ff9d5c;
    --violet: #9b84ff;
    --danger: #dc3952;
    --success: #168f75;
    --shadow-sm: 0 10px 28px rgba(7, 17, 31, .08);
    --shadow-lg: 0 34px 90px rgba(7, 17, 31, .18);
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 30px;
    --shell: min(1160px, calc(100vw - 36px));
    --header-h: 72px;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #07111f;
    --white: #0d1b31;
    --text: #edf4ff;
    --muted: #a2b0c4;
    --line: #243650;
    --shadow-sm: 0 10px 28px rgba(0, 0, 0, .2);
    --shadow-lg: 0 34px 90px rgba(0, 0, 0, .35);
  }

  body {
    min-width: 320px;
    overflow-x: hidden;
    background: var(--paper);
    color: var(--text);
    line-height: 1.55;
    text-rendering: optimizeLegibility;
  }

  body::selection { color: var(--ink); background: var(--mint); }
  a { color: inherit; text-decoration: none; }
  button { border: 0; cursor: pointer; }
  button:disabled { cursor: not-allowed; opacity: .48; }
  :focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
  .shell { width: var(--shell); margin-inline: auto; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  [hidden] { display: none !important; }
}

@layer components {
  .skip-link {
    position: fixed; z-index: 1000; top: 10px; left: 10px; padding: 10px 14px;
    color: var(--ink); background: var(--mint); border-radius: 9px; font-weight: 800;
    transform: translateY(-150%); transition: transform .2s;
  }
  .skip-link:focus { transform: translateY(0); }

  .site-header {
    position: sticky; z-index: 100; top: 0; height: var(--header-h);
    color: #edf4ff; background: rgba(7, 17, 31, .88); border-bottom: 1px solid rgba(255,255,255,.09);
    backdrop-filter: blur(18px) saturate(140%);
  }
  .header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
  .brand { flex: 0 1 258px; min-width: 188px; }
  .brand img { width: 100%; height: auto; }
  .desktop-nav { display: none; align-items: center; gap: 30px; font-size: 14px; font-weight: 700; color: #b8c5d8; }
  .desktop-nav a { transition: color .2s; }
  .desktop-nav a:hover { color: var(--mint); }
  .header-actions { display: flex; align-items: center; gap: 8px; }
  .icon-button { width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 50%; color: inherit; background: transparent; border: 1px solid currentColor; opacity: .82; }
  .icon-button:hover { opacity: 1; background: rgba(255,255,255,.08); }
  .icon-button svg { width: 19px; height: 19px; }
  .small-cta { display: none; padding: 10px 17px; border-radius: 12px; color: var(--ink); background: var(--mint); font-size: 14px; font-weight: 850; }
  .mobile-nav { position: fixed; inset: var(--header-h) 0 auto; padding: 14px 18px 22px; background: #07111f; border-bottom: 1px solid var(--line-dark); box-shadow: var(--shadow-lg); }
  .mobile-nav a { display: block; padding: 14px 6px; color: #eaf2ff; border-bottom: 1px solid rgba(255,255,255,.08); font-weight: 750; }

  .hero {
    position: relative; min-height: 730px; padding-block: 62px 54px; display: grid; align-items: center; gap: 52px;
    color: #f5f9ff;
  }
  .hero::before {
    content: ""; position: absolute; z-index: -2; top: calc(-1 * var(--header-h)); bottom: 0;
    left: calc((100vw - 100%) / -2); right: calc((100vw - 100%) / -2);
    background:
      radial-gradient(circle at 82% 24%, rgba(77,141,255,.25), transparent 27%),
      radial-gradient(circle at 12% 93%, rgba(78,232,210,.1), transparent 30%),
      linear-gradient(145deg, #07111f 0%, #091830 57%, #0c2242 100%);
  }
  .hero::after {
    content: ""; position: absolute; z-index: -1; inset: 0 calc((100vw - 100%) / -2);
    opacity: .16; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 46px 46px; mask-image: linear-gradient(to bottom, black, transparent 88%);
  }
  .hero-copy { position: relative; z-index: 3; }
  .trust-pill { width: fit-content; display: flex; align-items: center; gap: 9px; margin-bottom: 23px; padding: 8px 12px; border: 1px solid rgba(78,232,210,.25); border-radius: 999px; color: #aeece3; background: rgba(78,232,210,.08); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
  .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(78,232,210,.12); }
  .hero h1 { max-width: 700px; font-size: clamp(48px, 12vw, 88px); line-height: .94; letter-spacing: -.062em; font-weight: 900; }
  .hero h1 span { color: transparent; background: linear-gradient(90deg, var(--blue), var(--mint)); -webkit-background-clip: text; background-clip: text; }
  .hero-lede { max-width: 650px; margin-top: 25px; color: #aebed3; font-size: clamp(17px, 2.2vw, 20px); line-height: 1.65; }
  .tool-search-wrap { position: relative; max-width: 620px; margin-top: 28px; }
  .tool-search-wrap > svg { position: absolute; z-index: 2; top: 50%; left: 17px; width: 20px; height: 20px; color: #7890ac; transform: translateY(-50%); }
  .tool-search-wrap input { width: 100%; min-height: 61px; padding: 15px 52px 15px 49px; color: #12213a; background: #fff; border: 2px solid transparent; border-radius: 16px; box-shadow: 0 20px 56px rgba(0,0,0,.22); font-size: 16px; outline: none; }
  .tool-search-wrap input:focus { border-color: var(--mint); }
  .tool-search-wrap kbd { position: absolute; top: 50%; right: 13px; padding: 4px 7px; color: #738198; background: #eff3f8; border: 1px solid #d8e0ea; border-radius: 7px; font: 600 11px/1.2 ui-monospace, monospace; transform: translateY(-50%); }
  .search-results { position: absolute; z-index: 50; top: calc(100% + 10px); inset-inline: 0; max-height: 330px; overflow: auto; padding: 8px; color: var(--text); background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); }
  .search-results li { list-style: none; }
  .search-result { width: 100%; padding: 12px; display: flex; align-items: center; gap: 11px; color: var(--text); background: transparent; border-radius: 11px; text-align: left; }
  .search-result:hover, .search-result[aria-selected="true"] { background: color-mix(in srgb, var(--blue) 10%, var(--white)); }
  .search-result b { min-width: 44px; padding: 6px; border-radius: 8px; color: var(--blue-dark); background: color-mix(in srgb, var(--blue) 12%, transparent); font-size: 10px; text-align: center; }
  .search-result span { flex: 1; font-weight: 760; }
  .quick-links { margin-top: 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #8296b0; font-size: 12px; }
  .quick-links button { padding: 6px 10px; color: #dbe7f7; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; font-size: 11px; font-weight: 700; }
  .quick-links button:hover { color: var(--mint); border-color: rgba(78,232,210,.4); }
  .hero-proof { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 17px; color: #9cadc3; font-size: 12px; font-weight: 650; }
  .hero-proof li { display: flex; align-items: center; gap: 6px; }
  .hero-proof svg { width: 14px; height: 14px; color: var(--mint); stroke-width: 3; }

  .format-stage { position: relative; min-height: 420px; max-width: 540px; width: 100%; margin-inline: auto; }
  .stage-glow { position: absolute; inset: 15% 10%; border-radius: 50%; background: rgba(77,141,255,.22); filter: blur(65px); }
  .converter-orb { position: absolute; z-index: 4; top: 43%; left: 50%; width: 126px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: #05101e; background: linear-gradient(145deg, #79ffe9, #4d8dff); box-shadow: 0 0 0 14px rgba(77,141,255,.08), 0 25px 60px rgba(39,105,226,.42); transform: translate(-50%, -50%); }
  .converter-orb svg { width: 49px; height: 49px; stroke-width: 1.6; }
  .orb-ring { position: absolute; inset: -31px; border: 1px dashed rgba(140,207,255,.36); border-radius: 50%; animation: spin 18s linear infinite; }
  .orb-ring::before, .orb-ring::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
  .orb-ring::before { top: 5px; left: 28px; }.orb-ring::after { bottom: 6px; right: 26px; background: var(--blue); }
  .file-card { position: absolute; z-index: 3; width: 124px; min-height: 128px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(255,255,255,.18); border-radius: 19px; background: rgba(16,38,74,.78); box-shadow: 0 22px 50px rgba(0,0,0,.24); backdrop-filter: blur(12px); }
  .file-card::before { content: ""; position: absolute; top: 18px; left: 18px; width: 40px; height: 47px; border: 2px solid currentColor; border-radius: 7px; opacity: .55; }
  .file-card::after { content: ""; position: absolute; top: 26px; left: 27px; width: 21px; height: 2px; background: currentColor; box-shadow: 0 7px currentColor, 0 14px currentColor; opacity: .35; }
  .file-card span { font-size: 20px; font-weight: 900; letter-spacing: .02em; }.file-card small { color: #8fa1b9; font-size: 10px; }
  .file-card-a { top: 5%; left: 3%; color: #7fb0ff; transform: rotate(-8deg); animation: floatA 6s ease-in-out infinite; }
  .file-card-b { top: 0; right: 4%; color: #ff9d7a; transform: rotate(7deg); animation: floatB 7s ease-in-out infinite; }
  .file-card-c { right: 1%; bottom: 20%; color: #b9a9ff; transform: rotate(4deg); animation: floatA 8s ease-in-out infinite reverse; }
  .output-card { position: absolute; z-index: 5; bottom: 0; left: 3%; width: min(330px, 88%); padding: 16px; display: flex; align-items: center; gap: 13px; border: 1px solid rgba(78,232,210,.28); border-radius: 17px; background: rgba(10,30,51,.9); box-shadow: 0 22px 55px rgba(0,0,0,.28); backdrop-filter: blur(14px); }
  .success-ring { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; color: var(--mint); background: rgba(78,232,210,.12); border-radius: 50%; }.success-ring svg { width: 21px; height: 21px; stroke-width: 3; }
  .output-card strong, .output-card span { display: block; }.output-card strong { font-size: 13px; }.output-card span { color: #8fa3bd; font-size: 10px; }
  .privacy-chip { position: absolute; z-index: 5; left: 30%; top: 15%; padding: 8px 11px; display: flex; align-items: center; gap: 7px; border-radius: 999px; color: #aef4e8; background: rgba(7,17,31,.75); border: 1px solid rgba(78,232,210,.22); font-size: 10px; font-weight: 800; backdrop-filter: blur(10px); }.privacy-chip svg { width: 13px; height: 13px; }
  @keyframes floatA { 0%,100%{translate:0 0}50%{translate:0 -12px} }
  @keyframes floatB { 0%,100%{translate:0 0}50%{translate:8px 12px} }
  @keyframes spin { to { transform: rotate(360deg); } }

  .ad-shell { padding-block: 22px; }
  .ad-unit { min-height: 92px; display: grid; place-items: center; align-content: center; color: color-mix(in srgb, var(--muted) 65%, transparent); background: color-mix(in srgb, var(--white) 72%, transparent); border: 1px dashed var(--line); border-radius: 14px; text-align: center; }
  .ad-unit span { font-size: 8px; letter-spacing: .18em; text-transform: uppercase; }.ad-unit p { margin-top: 3px; font-size: 11px; }
  .ad-unit.is-live { min-height: 110px; border-style: solid; }

  .converter-section { padding-block: 70px 92px; scroll-margin-top: 86px; }
  .section-kicker { display: inline-block; color: var(--blue-dark); font-size: 11px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
  .section-heading-row { margin-top: 9px; display: flex; flex-direction: column; gap: 20px; }
  .section-heading-row h2, .center-heading h2, .how-copy h2, .faq-intro h2 { max-width: 760px; font-size: clamp(34px, 6.5vw, 55px); line-height: 1.04; letter-spacing: -.045em; }
  .section-heading-row p, .center-heading p { margin-top: 11px; color: var(--muted); font-size: 16px; }
  .local-badge { width: fit-content; padding: 10px 13px; display: flex; align-items: center; gap: 9px; border: 1px solid color-mix(in srgb, var(--success) 25%, var(--line)); border-radius: 12px; color: var(--success); background: color-mix(in srgb, var(--success) 7%, var(--white)); }
  .local-badge svg { width: 22px; height: 22px; }.local-badge span { display: flex; flex-direction: column; line-height: 1.25; }.local-badge strong { font-size: 11px; }.local-badge span span { color: var(--muted); font-size: 9px; }

  .workbench { margin-top: 31px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
  .tool-rail { min-width: 0; padding: 15px; overflow: hidden; background: color-mix(in srgb, var(--paper) 73%, var(--white)); border-bottom: 1px solid var(--line); }
  .rail-label { display: none; padding: 8px 10px 15px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
  #category-list { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }#category-list::-webkit-scrollbar{display:none}
  .category-button { flex: 0 0 auto; padding: 9px 13px; display: flex; align-items: center; gap: 8px; color: var(--muted); background: var(--white); border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 750; }
  .category-button span:first-child { width: 8px; height: 8px; border-radius: 3px; background: var(--cat-color, var(--blue)); }
  .category-button[aria-pressed="true"] { color: #fff; background: var(--navy-2); border-color: var(--navy-2); }
  .category-button small { display: none; margin-left: auto; opacity: .55; }
  .rail-foot { display: none; }
  .converter-panel { min-width: 0; padding: 24px 17px; }
  .converter-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
  .format-badge { display: inline-flex; padding: 5px 8px; color: var(--blue-dark); background: color-mix(in srgb, var(--blue) 11%, transparent); border-radius: 6px; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
  .converter-topline h3 { margin-top: 8px; font-size: clamp(23px, 5vw, 34px); line-height: 1.12; letter-spacing: -.035em; }.converter-topline p { max-width: 650px; margin-top: 7px; color: var(--muted); font-size: 13px; }
  .share-tool { flex: 0 0 auto; color: var(--muted); border-color: var(--line); }
  .tool-selector-row { margin-top: 17px; padding: 9px 11px; display: flex; align-items: center; gap: 10px; color: var(--muted); background: color-mix(in srgb, var(--paper) 72%, var(--white)); border: 1px solid var(--line); border-radius: 12px; }
  .tool-selector-row label { flex: 0 0 auto; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
  .tool-selector-row select { min-width: 0; width: 100%; padding: 6px 9px; color: var(--text); background: var(--white); border: 0; border-radius: 8px; font-size: 11px; font-weight: 750; outline: none; }

  .drop-zone { position: relative; margin-top: 25px; min-height: 250px; padding: 35px 16px; display: grid; place-items: center; align-content: center; color: var(--text); background: linear-gradient(145deg, color-mix(in srgb, var(--blue) 4%, var(--white)), color-mix(in srgb, var(--mint) 5%, var(--white))); border: 2px dashed color-mix(in srgb, var(--blue) 45%, var(--line)); border-radius: 20px; text-align: center; transition: border .2s, transform .2s, background .2s; }
  .drop-zone:hover, .drop-zone.is-dragover { background: color-mix(in srgb, var(--blue) 8%, var(--white)); border-color: var(--blue); transform: translateY(-2px); }
  .drop-visual { position: relative; width: 66px; height: 66px; margin-bottom: 16px; display: grid; place-items: center; color: var(--blue-dark); background: var(--white); border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line)); border-radius: 19px; box-shadow: var(--shadow-sm); }.drop-visual svg { position: relative; z-index: 2; width: 29px; height: 29px; }.pulse-ring { position: absolute; inset: -8px; border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent); border-radius: 24px; }
  .drop-zone > strong { font-size: 18px; }.drop-browse { margin-top: 5px; color: var(--muted); font-size: 13px; }.drop-browse span { color: var(--blue-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }.drop-zone > small { margin-top: 13px; color: var(--muted); font-size: 9px; }
  .drop-zone.is-disabled { pointer-events: none; opacity: .55; }

  .file-queue, .conversion-settings, .progress-card, .result-panel, .converter-error { margin-top: 18px; border: 1px solid var(--line); border-radius: 16px; }
  .file-queue { padding: 13px; }.queue-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 11px; }.queue-head button { display: flex; align-items: center; gap: 5px; color: var(--muted); background: transparent; font-size: 10px; }.queue-head svg { width: 13px; height: 13px; }
  #file-list { list-style: none; display: grid; gap: 7px; max-height: 220px; overflow: auto; }
  .file-row { padding: 9px; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 9px; background: color-mix(in srgb, var(--paper) 82%, var(--white)); border-radius: 10px; }
  .file-kind { width: 36px; height: 36px; display: grid; place-items: center; color: var(--blue-dark); background: var(--white); border: 1px solid var(--line); border-radius: 9px; font-size: 8px; font-weight: 900; overflow: hidden; }.file-kind img { width: 100%; height: 100%; object-fit: cover; }
  .file-meta { min-width: 0; }.file-meta strong, .file-meta span { display: block; }.file-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }.file-meta span { color: var(--muted); font-size: 9px; }
  .file-controls { display: flex; align-items: center; gap: 2px; }.move-file, .remove-file { width: 27px; height: 30px; display: grid; place-items: center; color: var(--muted); background: transparent; border-radius: 8px; font-size: 11px; font-weight: 900; }.move-file:hover:not(:disabled) { color: var(--blue-dark); background: color-mix(in srgb, var(--blue) 8%, transparent); }.remove-file:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }.remove-file svg { width: 14px; height: 14px; }
  .conversion-settings { padding: 15px; display: grid; gap: 14px; background: color-mix(in srgb, var(--paper) 72%, var(--white)); }
  .setting-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }.setting { min-width: 0; }.setting label { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; color: var(--muted); font-size: 10px; font-weight: 750; }.setting label output { color: var(--text); font-weight: 850; }.setting input[type="number"], .setting input[type="text"], .setting select, .setting textarea { width: 100%; min-height: 43px; padding: 9px 11px; color: var(--text); background: var(--white); border: 1px solid var(--line); border-radius: 10px; outline: none; }.setting textarea { min-height: 130px; resize: vertical; font-family: ui-monospace, monospace; font-size: 12px; }.setting input:focus, .setting select:focus, .setting textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(77,141,255,.1); }
  .setting input[type="range"] { width: 100%; accent-color: var(--blue-dark); }.setting-check { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 11px; }.setting-check input { accent-color: var(--blue-dark); }
  .setting-note { padding: 9px 11px; color: var(--muted); background: var(--white); border-left: 3px solid var(--mint); border-radius: 8px; font-size: 10px; }
  .convert-actions { margin-top: 17px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .primary-button { min-height: 50px; padding: 12px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: #06111f; background: linear-gradient(115deg, var(--mint), #82f1e2); border-radius: 13px; box-shadow: 0 10px 24px rgba(31,173,153,.2); font-size: 13px; font-weight: 900; transition: transform .2s, box-shadow .2s; }.primary-button:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 15px 30px rgba(31,173,153,.28); }.primary-button svg { width: 18px; height: 18px; }
  .convert-actions > p { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 9px; }.convert-actions > p svg { width: 13px; height: 13px; color: var(--orange); }
  .progress-card { padding: 16px; background: color-mix(in srgb, var(--blue) 4%, var(--white)); }.progress-copy { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; }.progress-copy span { color: var(--blue-dark); font-weight: 850; }.progress-track { height: 8px; margin-top: 10px; overflow: hidden; background: color-mix(in srgb, var(--blue) 12%, var(--paper)); border-radius: 99px; }.progress-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--blue), var(--mint)); border-radius: inherit; transition: width .2s; }.progress-card p { margin-top: 8px; color: var(--muted); font-size: 9px; }
  .result-panel { padding: 16px; background: color-mix(in srgb, var(--success) 5%, var(--white)); border-color: color-mix(in srgb, var(--success) 22%, var(--line)); }.result-celebration { display: flex; align-items: center; gap: 11px; }.result-celebration > span { width: 42px; height: 42px; display: grid; place-items: center; color: var(--success); background: color-mix(in srgb, var(--success) 11%, transparent); border-radius: 50%; }.result-celebration svg { width: 21px; height: 21px; stroke-width: 3; }.result-celebration strong { font-size: 13px; }.result-celebration p { color: var(--muted); font-size: 10px; }
  #result-list { margin-top: 13px; display: grid; gap: 7px; }.result-row { padding: 9px 10px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; }.result-row strong, .result-row span { display: block; }.result-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }.result-row span { color: var(--muted); font-size: 8px; }.download-button { padding: 8px 10px; display: inline-flex; align-items: center; gap: 5px; color: #fff; background: var(--blue-dark); border-radius: 8px; font-size: 9px; font-weight: 850; }.download-button svg { width: 13px; height: 13px; }
  .download-all-button { width: 100%; min-height: 41px; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--ink); background: var(--mint); border-radius: 10px; font-size: 10px; font-weight: 900; }.download-all-button svg { width: 15px; height: 15px; }
  .secondary-button { margin-top: 12px; padding: 10px 13px; color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: 10px; font-size: 10px; font-weight: 800; }
  .converter-error { padding: 12px 14px; color: color-mix(in srgb, var(--danger) 80%, var(--text)); background: color-mix(in srgb, var(--danger) 7%, var(--white)); border-color: color-mix(in srgb, var(--danger) 22%, var(--line)); font-size: 11px; }

  .privacy-ribbon { padding-block: 75px; color: #eaf3ff; background: var(--ink); overflow: hidden; }.ribbon-inner { display: grid; gap: 24px; align-items: center; }.ribbon-lock { width: 65px; height: 65px; display: grid; place-items: center; color: var(--mint); background: rgba(78,232,210,.08); border: 1px solid rgba(78,232,210,.17); border-radius: 20px; }.ribbon-lock svg { width: 30px; height: 30px; }.privacy-ribbon .section-kicker { color: var(--mint); }.privacy-ribbon h2 { max-width: 680px; margin-top: 8px; font-size: clamp(27px, 5vw, 44px); line-height: 1.08; letter-spacing: -.04em; }.ribbon-flow { display: flex; align-items: center; gap: 6px; color: #aebed3; font-size: 9px; font-weight: 750; white-space: nowrap; list-style: none; }.ribbon-flow li { position: relative; padding: 8px 9px; border: 1px solid #27405f; border-radius: 8px; }.ribbon-flow li:not(:last-child) { margin-right: 16px; }.ribbon-flow li:not(:last-child)::after { content: "→"; position: absolute; left: calc(100% + 7px); top: 50%; color: var(--mint); transform: translateY(-50%); }

  .popular-section, .use-cases, .trust-section { padding-block: 88px; }.section-heading-row.compact { flex-direction: column; }.section-heading-row.compact > a { color: var(--blue-dark); font-size: 12px; font-weight: 850; }.section-heading-row.compact > a span { margin-left: 4px; }
  .popular-grid { margin-top: 30px; display: grid; grid-template-columns: 1fr; gap: 12px; }.tool-card { position: relative; min-height: 174px; padding: 18px; display: flex; flex-direction: column; align-items: flex-start; color: var(--text); background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); text-align: left; overflow: hidden; transition: transform .22s, border .22s, box-shadow .22s; }.tool-card::after { content: "→"; position: absolute; right: 17px; bottom: 15px; color: var(--blue-dark); font-size: 20px; transition: translate .2s; }.tool-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--blue) 40%, var(--line)); box-shadow: 0 18px 40px rgba(7,17,31,.12); }.tool-card:hover::after { translate: 4px 0; }.tool-card-icon { min-width: 47px; height: 47px; padding: 0 8px; display: grid; place-items: center; color: var(--tool-color, var(--blue-dark)); background: color-mix(in srgb, var(--tool-color, var(--blue)) 11%, transparent); border-radius: 12px; font-size: 9px; font-weight: 900; }.tool-card h3 { margin-top: 14px; font-size: 15px; letter-spacing: -.015em; }.tool-card p { margin-top: 4px; max-width: 85%; color: var(--muted); font-size: 10px; line-height: 1.5; }
  .ad-middle { padding-block: 0 35px; }
  .center-heading { max-width: 760px; margin-inline: auto; text-align: center; }.center-heading p { font-weight: 700; }
  .use-case-grid { margin-top: 34px; display: grid; gap: 14px; }.use-case-grid article { position: relative; min-height: 255px; padding: 22px; color: var(--text); background: var(--white); border: 1px solid var(--line); border-radius: 21px; }.case-number { position: absolute; top: 18px; right: 19px; color: color-mix(in srgb, var(--muted) 45%, transparent); font-size: 11px; font-weight: 850; }.case-icon { min-width: 56px; width: fit-content; height: 52px; padding: 0 10px; display: grid; place-items: center; border-radius: 14px; font-size: 10px; font-weight: 950; }.case-icon.blue { color: var(--blue-dark); background: rgba(77,141,255,.11); }.case-icon.mint { color: #087e6e; background: rgba(78,232,210,.14); }.case-icon.orange { color: #bd5b1b; background: rgba(255,157,92,.15); }.case-icon.violet { color: #7157df; background: rgba(155,132,255,.14); }.use-case-grid h3 { margin-top: 25px; font-size: 18px; letter-spacing: -.025em; }.use-case-grid p { margin-top: 8px; color: var(--muted); font-size: 12px; }.use-case-grid button { margin-top: 18px; padding: 0; color: var(--blue-dark); background: transparent; font-size: 11px; font-weight: 850; }
  .how-section { padding-block: 20px 95px; }.how-card { padding: 30px 20px; color: #eef5ff; background: linear-gradient(145deg, #0b1830, #102b50); border-radius: 27px; box-shadow: var(--shadow-lg); }.how-copy .section-kicker { color: var(--mint); }.how-copy p { margin-top: 14px; color: #9eb0c8; font-size: 13px; }.steps { margin-top: 30px; list-style: none; display: grid; gap: 12px; }.steps li { padding: 15px; display: flex; align-items: center; gap: 13px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 15px; }.steps li > span { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; color: var(--ink); background: var(--mint); border-radius: 50%; font-size: 13px; font-weight: 900; }.steps strong { font-size: 13px; }.steps p { color: #93a6c0; font-size: 10px; }
  .trust-grid { margin-top: 33px; display: grid; gap: 13px; }.trust-grid article { padding: 21px; background: color-mix(in srgb, var(--white) 82%, transparent); border: 1px solid var(--line); border-radius: 19px; }.trust-grid svg { width: 29px; height: 29px; color: var(--blue-dark); }.trust-grid h3 { margin-top: 17px; font-size: 15px; }.trust-grid p { margin-top: 8px; color: var(--muted); font-size: 11px; }
  .faq-section { padding-block: 25px 100px; display: grid; gap: 31px; }.faq-intro a { display: inline-block; margin-top: 19px; color: var(--blue-dark); font-size: 11px; font-weight: 850; }.accordion { display: grid; gap: 8px; }.accordion details { background: var(--white); border: 1px solid var(--line); border-radius: 14px; }.accordion summary { padding: 15px; display: flex; justify-content: space-between; align-items: center; gap: 12px; list-style: none; cursor: pointer; font-size: 12px; font-weight: 800; }.accordion summary::-webkit-details-marker{display:none}.accordion summary svg { width: 17px; height: 17px; color: var(--muted); transition: transform .2s; }.accordion details[open] summary svg { transform: rotate(180deg); }.accordion details p { padding: 0 15px 16px; color: var(--muted); font-size: 11px; line-height: 1.7; }
  .final-cta { padding-block: 80px; color: #f2f7ff; background: linear-gradient(120deg, #132f58, #09172c); }.final-cta-inner { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; justify-content: space-between; }.final-cta span { color: var(--mint); font-size: 9px; font-weight: 900; letter-spacing: .15em; }.final-cta h2 { margin-top: 9px; font-size: clamp(38px, 9vw, 68px); line-height: .98; letter-spacing: -.05em; }.cta-button { min-height: 54px; padding: 13px 18px; display: inline-flex; align-items: center; gap: 10px; color: var(--ink); background: var(--mint); border-radius: 14px; font-size: 12px; font-weight: 900; }.cta-button svg { width: 18px; height: 18px; }

  .site-footer { padding-top: 55px; color: #b2c0d4; background: #050d18; }.footer-grid { display: grid; gap: 36px; }.footer-brand img { width: min(290px, 100%); }.footer-brand p { max-width: 360px; margin-top: 17px; font-size: 12px; }.footer-brand > span { display: block; margin-top: 9px; color: var(--mint); font-size: 9px; font-weight: 800; }.footer-grid > div:not(.footer-brand) { display: grid; align-content: start; gap: 9px; }.footer-grid h2 { margin-bottom: 3px; color: #eef4ff; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }.footer-grid a, .footer-grid button { width: fit-content; padding: 0; color: #90a1b8; background: transparent; font-size: 11px; }.footer-grid a:hover, .footer-grid button:hover { color: var(--mint); }.footer-bottom { margin-top: 42px; padding-block: 20px; display: flex; flex-direction: column; gap: 7px; border-top: 1px solid rgba(255,255,255,.08); color: #71839c; font-size: 9px; }

  .cookie-panel { position: fixed; z-index: 300; inset: auto 14px 14px; max-width: 900px; margin-inline: auto; padding: 16px; align-items: center; gap: 17px; color: var(--text); background: var(--white); border: 1px solid var(--line); border-radius: 17px; box-shadow: var(--shadow-lg); }.cookie-panel:not([hidden]) { display: flex; flex-direction: column; }.cookie-panel strong { font-size: 13px; }.cookie-panel p { margin-top: 4px; color: var(--muted); font-size: 10px; }.cookie-actions { width: 100%; display: flex; flex-direction: column; gap: 8px; }.text-button { min-height: 42px; padding: 9px 13px; color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: 11px; font-size: 10px; font-weight: 800; }.compact-button { min-height: 42px; font-size: 10px; white-space: nowrap; }
  .toast { position: fixed; z-index: 400; right: 16px; bottom: 16px; max-width: min(360px, calc(100vw - 32px)); padding: 12px 15px; color: #fff; background: #11233f; border: 1px solid #294566; border-radius: 12px; box-shadow: var(--shadow-lg); font-size: 11px; }
  .noscript { position: fixed; z-index: 999; bottom: 0; inset-inline: 0; padding: 12px; color: #fff; background: var(--danger); text-align: center; font-weight: 750; }

  .route-page { min-height: 65vh; padding-block: 55px 90px; }.route-hero { padding: 34px 0 40px; border-bottom: 1px solid var(--line); }.route-hero .breadcrumbs { display: flex; gap: 7px; color: var(--muted); font-size: 10px; }.route-hero .breadcrumbs a { color: var(--blue-dark); }.route-hero h1 { max-width: 840px; margin-top: 17px; font-size: clamp(42px, 9vw, 73px); line-height: .98; letter-spacing: -.055em; }.route-hero > p { max-width: 750px; margin-top: 18px; color: var(--muted); font-size: 16px; }.route-body { padding-top: 38px; }.route-body.narrow { max-width: 790px; }.prose h2 { margin-top: 38px; font-size: 26px; letter-spacing: -.03em; }.prose h2:first-child { margin-top: 0; }.prose h3 { margin-top: 25px; font-size: 18px; }.prose p, .prose li { margin-top: 11px; color: var(--muted); font-size: 13px; line-height: 1.8; }.prose ul, .prose ol { margin: 10px 0 0 20px; }.prose a { color: var(--blue-dark); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }.legal-meta { margin-top: 15px; color: var(--muted); font-size: 10px; }.route-card-grid, .all-tools-grid { display: grid; gap: 13px; }.route-card { padding: 21px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; }.route-card h2, .route-card h3 { font-size: 17px; }.route-card p { margin-top: 8px; color: var(--muted); font-size: 11px; }.route-card a, .route-card button { display: inline-block; margin-top: 15px; padding: 0; color: var(--blue-dark); background: transparent; font-size: 11px; font-weight: 850; }
  .tools-toolbar { margin-bottom: 25px; display: flex; flex-direction: column; gap: 11px; }.tools-toolbar input { min-height: 48px; padding: 11px 14px; color: var(--text); background: var(--white); border: 1px solid var(--line); border-radius: 12px; }.tool-category-section { margin-top: 38px; }.tool-category-section h2 { font-size: 24px; }.tool-category-section > p { margin-top: 4px; color: var(--muted); font-size: 11px; }.all-tools-grid { margin-top: 16px; }.all-tool-card { padding: 16px; display: flex; align-items: center; gap: 12px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; transition: transform .2s, border .2s; }.all-tool-card:hover { transform: translateY(-2px); border-color: var(--blue); }.all-tool-card b { min-width: 42px; height: 42px; padding: 0 7px; display: grid; place-items: center; color: var(--cat-color, var(--blue-dark)); background: color-mix(in srgb, var(--cat-color, var(--blue)) 11%, transparent); border-radius: 10px; font-size: 8px; }.all-tool-card strong, .all-tool-card span { display: block; }.all-tool-card strong { font-size: 12px; }.all-tool-card span { color: var(--muted); font-size: 9px; }
  .tool-route-hero { padding-bottom: 25px; }.tool-route-layout { padding-top: 20px; display: grid; gap: 25px; }.tool-route-layout .workbench { margin-top: 0; }.tool-seo-copy { display: grid; gap: 14px; }.tool-seo-copy article { padding: 20px; background: var(--white); border: 1px solid var(--line); border-radius: 17px; }.tool-seo-copy h2 { font-size: 18px; }.tool-seo-copy p, .tool-seo-copy li { margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.7; }.tool-seo-copy ol { margin-left: 18px; }
  .contact-form { margin-top: 22px; display: grid; gap: 13px; }.contact-form .form-row { display: grid; gap: 13px; }.contact-form label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 750; }.contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: 11px 12px; color: var(--text); background: var(--white); border: 1px solid var(--line); border-radius: 11px; outline: none; }.contact-form textarea { min-height: 150px; resize: vertical; }.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: var(--blue); }.honeypot { position: absolute !important; left: -9999px !important; }
}

@layer utilities {
  .reveal { animation: revealUp .65s both; }.reveal:nth-child(2){animation-delay:.12s}@keyframes revealUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .is-loading { cursor: progress; }
}

@media (min-width: 520px) {
  :root { --shell: min(1160px, calc(100vw - 56px)); }
  .small-cta { display: inline-flex; }
  .popular-grid, .trust-grid, .all-tools-grid { grid-template-columns: repeat(2, 1fr); }
  .setting-grid, .contact-form .form-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .convert-actions { flex-direction: row; align-items: center; }.convert-actions .primary-button { min-width: 220px; }.convert-actions > p { justify-content: flex-start; }
  .cookie-panel { inset-inline: 28px; }.cookie-actions { width: auto; flex-direction: row; }
}

@media (min-width: 760px) {
  :root { --header-h: 80px; }
  .mobile-menu-button { display: none; }.desktop-nav { display: flex; }
  .hero { padding-block: 78px 68px; min-height: 760px; }
  .hero h1 { font-size: clamp(69px, 9vw, 94px); }
  .section-heading-row { flex-direction: row; align-items: flex-end; justify-content: space-between; }.section-heading-row.compact { flex-direction: row; }
  .workbench { grid-template-columns: 220px 1fr; }.tool-rail { padding: 19px 13px; border-right: 1px solid var(--line); border-bottom: 0; }.rail-label { display: block; }#category-list { display: grid; overflow: visible; padding: 0; }.category-button { width: 100%; padding: 11px; border: 0; border-radius: 10px; background: transparent; text-align: left; }.category-button small { display: block; }.rail-foot { margin-top: 24px; padding: 12px 9px; display: flex; align-items: flex-start; gap: 8px; color: var(--muted); border-top: 1px solid var(--line); }.rail-foot svg { width: 16px; height: 16px; color: var(--violet); }.rail-foot p { display: flex; flex-direction: column; }.rail-foot strong { font-size: 9px; }.rail-foot span { margin-top: 2px; font-size: 8px; }.converter-panel { padding: 31px; }
  .drop-zone { min-height: 280px; }.setting-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .ribbon-inner { grid-template-columns: auto minmax(0,1.4fr) minmax(280px,.8fr); }
  .popular-grid { grid-template-columns: repeat(3, 1fr); }.use-case-grid { grid-template-columns: repeat(2, 1fr); }
  .how-card { padding: 46px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 45px; align-items: center; }.steps { margin-top: 0; }
  .trust-grid { grid-template-columns: repeat(4, 1fr); }.faq-section { grid-template-columns: .8fr 1.2fr; }
  .final-cta-inner { flex-direction: row; align-items: center; }.site-footer { padding-top: 70px; }.footer-grid { grid-template-columns: minmax(250px,2fr) repeat(3,1fr); }.footer-bottom { flex-direction: row; justify-content: space-between; }
  .cookie-panel:not([hidden]) { flex-direction: row; justify-content: space-between; }.cookie-actions { flex: 0 0 auto; }
  .route-card-grid { grid-template-columns: repeat(3, 1fr); }.all-tools-grid { grid-template-columns: repeat(3, 1fr); }.tools-toolbar { flex-direction: row; }.tools-toolbar input { min-width: 350px; }
}

@media (min-width: 980px) {
  .hero { grid-template-columns: minmax(0,1.15fr) minmax(390px,.85fr); gap: 35px; }
  .format-stage { min-height: 510px; }.file-card { width: 142px; min-height: 148px; }.file-card-a { top: 10%; }.file-card-b { top: 3%; }.privacy-chip { top: 22%; }.output-card { bottom: 5%; }
  .popular-grid { grid-template-columns: repeat(6, 1fr); }.tool-card { min-height: 190px; }.tool-card p { max-width: 95%; }
  .use-case-grid { grid-template-columns: repeat(4, 1fr); }.use-case-grid article { min-height: 285px; }
  .tool-route-layout { grid-template-columns: minmax(0,1.55fr) minmax(280px,.45fr); align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .site-header, .site-footer, .ad-shell, .cookie-panel, .final-cta { display: none !important; }
  body { background: #fff; color: #000; }.route-page { padding: 0; }
}