/* KeepNothing. One token system on :root (colour, space, radius, shadow, type), redefined for dark mode. Each kind of file
   has its own colour (image teal, audio violet, video orange, document blue, spreadsheet green, PDF red), carried by --k
   into its icon tiles, glows, drop zone and progress; everything else is warm paper and one ink. */

/* ── tokens ── */
:root {
  --paper: #F6F5F1; --card: #FFFFFF; --soft: #EFEDE7; --sunk: #F9F8F5;
  --ink: #191816; --muted: #625F58; --faint: #8F8C84;
  --line: rgba(25, 24, 22, .09); --line-strong: rgba(25, 24, 22, .17);
  --image: #0E9F8E; --audio: #7C4DFF; --video: #F2600C; --document: #2563EB; --sheet: #16A34A; --slides: #D97706; --pdf: #E0244E;
  --json: #B45309; --compress: #57534E; --ok: #1F7A4D; --bad: #C81E45;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;
  --t-xs: 12px; --t-sm: 13.5px; --t-base: 15px; --t-md: 17px; --t-lg: 19px;
  --t-h1: clamp(32px, 5vw, 46px); --t-display: clamp(40px, 7.4vw, 82px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Noto Sans", "Noto Sans Gujarati", "Noto Sans Devanagari", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --sh-1: 0 1px 2px rgba(25, 24, 22, .05);
  --sh-2: 0 1px 2px rgba(25, 24, 22, .04), 0 10px 24px -12px rgba(25, 24, 22, .16);
  --sh-3: 0 2px 6px rgba(25, 24, 22, .04), 0 24px 48px -24px rgba(25, 24, 22, .24);
  --ring: color-mix(in srgb, var(--k, var(--document)) 70%, transparent);
  --ease: cubic-bezier(.2, .7, .2, 1); --out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0F0F0E; --card: #191917; --soft: #23221F; --sunk: #141413;
    --ink: #EDEBE5; --muted: #A29F97; --faint: #6E6C66;
    --line: rgba(255, 255, 255, .08); --line-strong: rgba(255, 255, 255, .16);
    --image: #2CC2AF; --audio: #9B7BFF; --video: #FF7A2E; --document: #5B8CFF; --sheet: #34C26A; --slides: #F5A524; --pdf: #FF4D6F;
    --json: #E0913A; --compress: #A8A29E; --ok: #5CC08F; --bad: #FF6B87;
    --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-2: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 28px -14px rgba(0, 0, 0, .7);
    --sh-3: 0 2px 6px rgba(0, 0, 0, .35), 0 28px 56px -26px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}
.k-image { --k: var(--image); } .k-audio { --k: var(--audio); } .k-video { --k: var(--video); } .k-document { --k: var(--document); }
.k-sheet { --k: var(--sheet); } .k-slides { --k: var(--slides); } .k-pdf { --k: var(--pdf); } .k-json { --k: var(--json); } .k-compress { --k: var(--compress); }

/* ── base ── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--font);
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
.defs { position: absolute; }
svg { width: 1em; height: 1em; flex: none; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--k, var(--audio)) 22%, transparent); }
[hidden] { display: none !important; }

/* ── header and footer ── */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--s5); height: 60px; padding: 0 clamp(16px, 4vw, 40px);
       background: color-mix(in srgb, var(--paper) 78%, transparent); backdrop-filter: saturate(1.8) blur(18px); -webkit-backdrop-filter: saturate(1.8) blur(18px);
       border-bottom: 1px solid var(--line); }
.logo { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font-weight: 680; font-size: var(--t-md); letter-spacing: -.025em; border-radius: var(--r-sm); }
.logo svg { width: 21px; height: 21px; color: var(--pdf); }
.logo b { font-weight: inherit; color: var(--pdf); }
.nav { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 550; padding: 7px 11px; border-radius: 9px; white-space: nowrap;
         transition: color .15s, background-color .15s; }
.nav a:hover { color: var(--ink); background: var(--soft); }
main { max-width: 1100px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) var(--s8); }
.foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; padding: 28px 16px 36px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); }
.foot span + span::before { content: "·"; margin-right: 10px; color: var(--faint); }

/* ── hero ── */
.hero { text-align: center; padding: clamp(48px, 9vw, 104px) 0 var(--s4); }
.hero.small { padding: var(--s7) 0 var(--s2); text-align: left; }
h1 { font-size: var(--t-display); line-height: 1.02; letter-spacing: -.045em; font-weight: 700; margin: 0 0 18px; text-wrap: balance; }
.hero h1 span { color: var(--muted); }
.hero.small h1, .tool h1 { font-size: var(--t-h1); letter-spacing: -.035em; line-height: 1.08; font-weight: 680; }
.lede { color: var(--muted); font-size: clamp(16px, 2vw, 18px); margin: 0 auto var(--s6); max-width: 560px; text-wrap: pretty; }
.hero.small .lede { margin-left: 0; }
.crumb { display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: var(--t-sm); margin: 0 0 var(--s4); }
.crumb a { text-decoration: none; color: var(--muted); border-radius: 6px; transition: color .15s; } .crumb a:hover { color: var(--ink); }

/* "Runs on your device": the promise that matters most, in a quiet green pill with a shield */
.device { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 var(--s5); padding: 6px 13px 6px 10px;
          border-radius: var(--r-full); font-size: 13px; font-weight: 600; color: var(--ok);
          background: color-mix(in srgb, var(--ok) 9%, var(--card)); border: 1px solid color-mix(in srgb, var(--ok) 24%, transparent); box-shadow: var(--sh-1); }
.device svg { width: 16px; height: 16px; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }

/* ── search and From ⇄ To ── */
.search { display: flex; align-items: center; gap: var(--s3); max-width: 600px; margin: 0 auto; padding: 0 20px; height: 58px;
          background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--sh-2);
          transition: border-color .2s, box-shadow .2s; }
.search:focus-within { border-color: color-mix(in srgb, var(--ink) 35%, transparent); box-shadow: var(--sh-2), 0 0 0 4px color-mix(in srgb, var(--ink) 7%, transparent); }
.hero.small .search { margin: 0; max-width: 440px; height: 48px; border-radius: 14px; }
.search svg { width: 20px; height: 20px; color: var(--muted); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: var(--t-md); color: var(--ink); }
.search input::placeholder { color: var(--muted); }
.search input::-webkit-search-cancel-button { filter: grayscale(1); opacity: .5; }
.quick { display: flex; align-items: center; justify-content: center; gap: var(--s2); margin-top: 14px; flex-wrap: wrap; }
.quick .or { color: var(--muted); font-size: 14px; margin-right: 4px; }
.quick select { height: 44px; font-size: 14.5px; }
.quick .btn { height: 44px; padding: 0 20px; }
.hero > * { animation: rise .7s var(--ease) both; }
.hero > :nth-child(2) { animation-delay: .06s; } .hero > :nth-child(3) { animation-delay: .12s; }
.hero > :nth-child(4) { animation-delay: .18s; } .hero > :nth-child(5) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
select { font: inherit; font-size: var(--t-base); font-weight: 600; color: var(--ink); background-color: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r);
         height: 44px; max-width: 100%; padding: 0 34px 0 14px; appearance: none; cursor: pointer; transition: border-color .15s, box-shadow .15s;
         background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
         background-position: right 16px center, right 11px center; background-size: 5px 5px; background-repeat: no-repeat; }
select:hover { border-color: color-mix(in srgb, var(--ink) 32%, transparent); box-shadow: var(--sh-1); }
.swap { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
        border: 1px solid var(--line-strong); background: var(--card); color: var(--muted); box-shadow: var(--sh-1);
        transition: color .15s, border-color .15s, transform .4s var(--out); }
.swap svg { width: 17px; height: 17px; }
.swap:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 32%, transparent); background: var(--soft); }
.swap:active { transform: rotate(180deg); }

/* ── buttons ── */
/* Primary: solid ink with a clear verb ("Convert to PDF", "Merge PDFs"). Secondary (.ghost): outlined. Both 44px or taller. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--r); color: var(--paper);
       background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 86%, var(--paper)), var(--ink));
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(0, 0, 0, .18);
       font: inherit; font-size: var(--t-base); font-weight: 640; height: 44px; padding: 0 20px; cursor: pointer; text-decoration: none; white-space: nowrap;
       transition: transform .18s var(--ease), opacity .15s, box-shadow .2s; }
.btn:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 22px -8px color-mix(in srgb, var(--ink) 55%, transparent); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); filter: brightness(.92); }
.btn:disabled { opacity: .3; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
.btn.big { height: 56px; padding: 0 32px; font-size: 17px; font-weight: 660; border-radius: 14px; min-width: 260px; }
.btn.ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: var(--sh-1); }
.btn.ghost:hover { background: var(--soft); border-color: color-mix(in srgb, var(--ink) 30%, transparent); transform: none; }
.btn.ghost:active { background: color-mix(in srgb, var(--ink) 8%, var(--soft)); }
.btn svg { width: 17px; height: 17px; }

/* ── sections ── */
.block { margin-top: var(--s8); }
.block h2 { display: flex; align-items: center; gap: 10px; font-size: var(--t-lg); font-weight: 680; letter-spacing: -.02em; margin: 0 0 var(--s4); }
.block h2 a { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; border-radius: var(--r-sm); }
.block h2 a::after { content: "→"; color: var(--faint); font-weight: 400; transition: transform .2s var(--ease), color .2s; }
.block h2 a:hover::after { color: var(--ink); transform: translateX(3px); }
.badge { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--k);
         background: linear-gradient(150deg, color-mix(in srgb, var(--k) 20%, transparent), color-mix(in srgb, var(--k) 8%, transparent));
         box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 16%, transparent); }
.badge svg { width: 17px; height: 17px; }
.sub { display: flex; align-items: center; gap: 6px; margin: var(--s5) 0 var(--s2); color: var(--muted); font-size: var(--t-sm); font-weight: 600; }
.sub svg { width: 16px; height: 16px; color: var(--video); }

/* ── the tools grid: a tinted icon tile in the tool's colour, the name, sometimes one short line ── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--s3); }
.grid.kinds { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tcard { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 13px 16px 13px 13px;
         text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
         transition: transform .3s var(--ease), border-color .25s, box-shadow .3s; }
.tcard:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--k) 30%, var(--line));
               box-shadow: 0 2px 4px rgba(0, 0, 0, .03), 0 18px 36px -18px color-mix(in srgb, var(--k) 55%, transparent); }
.tcard:active { transform: translateY(-1px) scale(.99); }
.tcard b { font-size: var(--t-base); font-weight: 640; letter-spacing: -.01em; line-height: 1.3; }
.tcard .txt { display: grid; gap: 2px; min-width: 0; }
.tcard small { color: var(--muted); font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: var(--k, var(--ink));
        background: linear-gradient(150deg, color-mix(in srgb, var(--k, var(--ink)) 20%, transparent), color-mix(in srgb, var(--k, var(--ink)) 7%, transparent));
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k, var(--ink)) 15%, transparent), inset 0 1px 0 rgba(255, 255, 255, .5);
        transition: transform .4s var(--out), box-shadow .3s; }
.tile svg { width: 24px; height: 24px; }
.tile.fmt { font-size: 11px; font-weight: 750; letter-spacing: .02em; }
.tcard:hover .tile { transform: scale(1.05); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 25%, transparent), 0 8px 18px -8px color-mix(in srgb, var(--k) 60%, transparent); }
.grid.kinds .tcard { min-height: 84px; }
.grid.kinds .tile { width: 50px; height: 50px; border-radius: 15px; }
.grid.kinds .tile svg { width: 26px; height: 26px; }
.head { display: flex; align-items: center; gap: var(--s4); margin: 0 0 18px; }
.head h1 { margin: 0; }
.head .tile { width: 58px; height: 58px; border-radius: 17px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k, var(--ink)) 18%, transparent), 0 12px 26px -14px color-mix(in srgb, var(--k, var(--ink)) 70%, transparent); }
.head .tile svg { width: 30px; height: 30px; }
.hero.small .head { margin-bottom: 22px; }
.hero.small + .block { margin-top: var(--s6); }

/* ── chips and the long directory ── */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px; text-decoration: none; font-size: var(--t-sm); font-weight: 600;
        color: var(--ink); background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1);
        transition: background-color .15s, border-color .15s, transform .2s var(--ease), box-shadow .2s; }
.chip:hover { border-color: color-mix(in srgb, var(--k, var(--ink)) 35%, var(--line)); transform: translateY(-1px); box-shadow: var(--sh-2); }
.chip.big { height: 46px; padding: 0 16px; font-size: 14.5px; border-radius: var(--r); }
.chips > .chip[class*="k-"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--k); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k) 16%, transparent); }
.chip.duo { gap: 6px; }
.chip.duo svg { width: 13px; height: 13px; color: var(--k); }
.chips > .chip.duo::before { display: none; }
.rows { display: grid; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 130px 1fr; gap: var(--s3); align-items: start; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.from { display: inline-flex; align-items: center; gap: 9px; height: 32px; font-weight: 650; font-size: 14.5px; }
.from::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--k); }
.empty { text-align: center; color: var(--muted); margin: var(--s7) 0; }
/* Every conversion: one card per kind ("Image converter / Turn any picture into"), each group of targets on its own labelled line */
.index { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--line); }
.index > h2 { display: flex; align-items: center; gap: 10px; font-size: var(--t-lg); font-weight: 680; letter-spacing: -.02em; margin: 0 0 var(--s4); }
.convs { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: var(--s3); align-items: start; }
.conv { padding: var(--s5); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-1); }
.conv-head { display: flex; align-items: center; gap: 14px; margin-bottom: var(--s3); }
.conv-head h3 { font-size: var(--t-md); font-weight: 680; letter-spacing: -.015em; margin: 0; }
.conv-head h3 a { text-decoration: none; border-radius: 6px; }
.conv-head h3 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--k) 45%, transparent); }
.conv-head p { margin: 1px 0 0; color: var(--muted); font-size: var(--t-sm); }
.grp { display: grid; grid-template-columns: 104px 1fr; gap: var(--s3); align-items: start; padding: 10px 0 2px; border-top: 1px solid var(--line); }
.lab { display: inline-flex; align-items: center; gap: 7px; height: 38px; font-size: 12.5px; font-weight: 650; color: var(--muted); white-space: nowrap; }
.lab::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--k); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k) 16%, transparent); }
.conv .chips { gap: 5px; }
.conv .chip { height: 38px; padding: 0 12px; font-size: 13px; font-weight: 600; background: var(--sunk); border-color: var(--line); box-shadow: none; }
.conv .chip:hover { background: var(--card); border-color: color-mix(in srgb, var(--k) 40%, var(--line)); box-shadow: var(--sh-1); }
.conv .chip::before { display: none; }
.grp-h { margin-bottom: var(--s3) !important; }
.grp-h .lab { font-size: var(--t-sm); height: auto; color: var(--ink); }
.block.group + .block.group { margin-top: var(--s6); }

/* ── a tool page ── */
.tool { max-width: 800px; margin: 0 auto; padding-top: 44px; }
.tool ~ .block { max-width: 800px; margin-inline: auto; margin-top: 56px; }
.tool ~ .block h2 { font-size: 13px; font-weight: 650; color: var(--muted); margin-bottom: var(--s2); }
.tool ~ .block .chips { gap: 2px; margin-left: -8px; }
.tool ~ .block .chip::before { display: none; }
.tool ~ .block .chip { height: 28px; padding: 0 8px; background: none; border-color: transparent; box-shadow: none; color: var(--muted); font-weight: 500; border-radius: 7px; transform: none; }
.tool ~ .block .chip:hover { color: var(--ink); background: var(--soft); border-color: transparent; box-shadow: none; }
.tool .head { margin-bottom: var(--s4); }
.tool .lede { margin: 0 0 var(--s5); }
.tool .device { margin-top: -4px; }
.pair { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; flex-wrap: wrap; }
.pair label { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 14px; font-weight: 550; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-3); padding: var(--s2); }
.drop { display: grid; place-items: center; gap: 4px; text-align: center; padding: clamp(40px, 8vw, 68px) 16px; cursor: pointer;
        border: 1.5px dashed color-mix(in srgb, var(--k, var(--ink)) 30%, var(--line-strong)); border-radius: var(--r-lg);
        background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--k, var(--ink)) 6%, transparent), transparent 70%);
        transition: background-color .2s, border-color .2s, transform .25s var(--ease); }
.drop:hover { border-color: color-mix(in srgb, var(--k, var(--ink)) 60%, transparent); background-color: color-mix(in srgb, var(--k, var(--ink)) 3%, transparent); }
.drop:focus-within { outline: 2px solid var(--ring); outline-offset: 3px; }
.drop.over { border-style: solid; border-color: var(--k, var(--ink)); background-color: color-mix(in srgb, var(--k, var(--ink)) 8%, transparent);
             box-shadow: 0 0 0 6px color-mix(in srgb, var(--k, var(--ink)) 12%, transparent); }
.drop-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; margin-bottom: var(--s3); color: var(--k, var(--ink));
             background: linear-gradient(150deg, color-mix(in srgb, var(--k, var(--ink)) 20%, transparent), color-mix(in srgb, var(--k, var(--ink)) 7%, transparent));
             box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k, var(--ink)) 16%, transparent), 0 14px 28px -16px color-mix(in srgb, var(--k, var(--ink)) 70%, transparent);
             transition: transform .3s var(--out); }
.drop:hover .drop-icon { transform: translateY(-4px); }
.drop.over .drop-icon { transform: translateY(-6px); }
.drop-icon svg { width: 27px; height: 27px; }
.drop strong { font-size: clamp(18px, 2.4vw, 21px); font-weight: 660; letter-spacing: -.015em; }
.drop .pick { margin-top: var(--s2); pointer-events: none; }
.drop:hover .pick { background: var(--soft); border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.hint { color: var(--muted); font-size: 14px; }
.lede.plain { color: var(--muted); font-size: var(--t-md); margin: 0 0 var(--s5); }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hint u { text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.link { display: flex; gap: 6px; margin: var(--s2) 0 0; }
.link input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; font: inherit; font-size: 14px; color: var(--ink); background: var(--sunk);
              border: 1px solid var(--line); border-radius: 11px; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.link input::placeholder { color: var(--muted); }
.link input:hover { border-color: var(--line-strong); }
.link input:focus { outline: 0; border-color: color-mix(in srgb, var(--ink) 40%, transparent); background: var(--card); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 6%, transparent); }
.link .btn { height: 44px; padding: 0 18px; }
/* What this page takes, under the drop zone */
.accepts { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: var(--s3) 4px 2px; font-size: var(--t-xs); color: var(--muted); }
.accepts span { font-weight: 600; margin-right: 4px; }
.accepts b { font-weight: 650; letter-spacing: .02em; font-size: 11px; padding: 2px 7px; border-radius: 6px; color: var(--ink);
             background: color-mix(in srgb, var(--k, var(--ink)) 8%, var(--soft)); }
.accepts em { font-style: normal; margin-left: 4px; }
.options { display: flex; flex-wrap: wrap; gap: 14px 28px; padding: 18px 12px 10px; margin-top: var(--s2); border-top: 1px solid var(--line); }
.opt { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.opt > span { color: var(--muted); font-weight: 550; font-size: 14px; }
.seg { display: inline-flex; background: var(--soft); border-radius: 11px; padding: 3px; flex-wrap: wrap; }
.seg button { border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--muted); height: 40px; padding: 0 16px; border-radius: 8px; cursor: pointer;
              transition: color .15s, background-color .15s, box-shadow .15s; }
.seg button:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.seg button:active { transform: scale(.97); }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--line); }
.target { display: inline-flex; align-items: center; gap: var(--s2); }
.field input, .field select, .target input { font: inherit; font-size: var(--t-base); font-weight: 560; height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 11px;
  background-color: var(--card); color: var(--ink); min-width: 0; transition: border-color .15s, box-shadow .15s; }
.field select { padding-right: 34px; }
.field input:focus, .target input:focus { outline: 0; border-color: color-mix(in srgb, var(--ink) 40%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 6%, transparent); }
.field input[type="text"], .field input[type="password"] { width: min(320px, 100%); }
.field input[type="number"], .target input { width: 110px; }
.field input[type="file"] { height: auto; padding: 8px 10px; font-size: var(--t-sm); font-weight: 500; border-style: dashed; }
.target em { font-style: normal; color: var(--muted); font-size: 14px; }

/* the files: chosen, working, then done (a check that pops in, a soft flash, the download on the right) */
.files { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: 6px; }
.files:empty { display: none; }
.file { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 10px 12px 10px 14px; border-radius: 13px; background: var(--soft);
        animation: in .3s var(--ease) both; }
.file:has(> .thumb) { grid-template-columns: auto 1fr auto; padding-left: 10px; }
.file .thumb { grid-column: 1; grid-row: 1 / span 2; display: block; height: 42px; width: auto; max-width: 58px; object-fit: cover; border-radius: 7px; border: 1px solid var(--line); background: #fff; }
.file:has(> .dl) { row-gap: 0; animation: done .9s var(--ease) both; }
.file:has(> .dl) .name { grid-column: 1; grid-row: 1; }
.file:has(> .dl) .name::before { content: ""; display: inline-block; width: 17px; height: 17px; margin-right: 8px; vertical-align: -3px; border-radius: 50%;
  background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
  animation: pop .5s .1s var(--out) both; }
@keyframes done { from { background: color-mix(in srgb, var(--ok) 16%, var(--soft)); } }
.file:has(> .dl) .meta { grid-column: 1; grid-row: 2; justify-content: flex-start; padding-left: 25px; }
.file:has(> .dl) .dl { grid-column: 2; grid-row: 1 / span 2; max-width: min(440px, 56vw); }
.file:has(> .thumb):has(> .dl) .name, .file:has(> .thumb):has(> .dl) .meta { grid-column: 2; }
.file:has(> .thumb):has(> .dl) .dl { grid-column: 3; }
.file .name { font-size: 14.5px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.file .meta { color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.file .meta b { font-weight: 650; color: var(--ok); }
.file .bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.file .bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--k, var(--ink)) 60%, transparent), var(--k, var(--ink))); transition: width .2s; }
.file .bar.work i { width: 40%; animation: work 1.1s ease-in-out infinite; }
@keyframes work { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes in { from { opacity: 0; transform: translateY(4px); } }
.file .dl { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.file .dl a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 650; font-size: 14px; height: 40px; padding: 0 16px; border-radius: 10px;
              color: var(--paper); background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 86%, var(--paper)), var(--ink));
              box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); transition: box-shadow .15s, transform .15s var(--ease); }
.file .dl a:hover { box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--ink) 55%, transparent); transform: translateY(-1px); }
.file .dl a svg { width: 15px; height: 15px; }
.file.err { background: color-mix(in srgb, var(--bad) 7%, var(--soft)); }
.file.err .meta { color: var(--bad); justify-content: flex-start; }
.file .x, .file .move { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 550; cursor: pointer; min-height: 36px; padding: 4px 10px; border-radius: 7px; transition: color .15s, background-color .15s; }
.file .move { width: 36px; height: 36px; padding: 0; font-weight: 650; background: var(--card); color: var(--ink); }
.file .x:hover { color: var(--ink); background: var(--card); }
.actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 18px 8px 14px; }
.note { text-align: center; color: var(--bad); font-size: 14px; font-weight: 580; margin: 0 0 var(--s2); min-height: 1em; }
.note:empty { display: none; }
.promise { list-style: none; padding: 0; margin: var(--s5) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.promise li { color: var(--muted); font-size: 13px; }
.promise b { color: var(--ink); font-weight: 650; margin-right: 5px; }

/* ── the JSON fixer ── */
.json-tool { --k: var(--json); }
.json-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 6px 6px 12px; }
.json-bar .btn { height: 38px; font-size: 14px; padding: 0 14px; }
.json-input { display: block; width: 100%; min-height: 360px; resize: vertical; padding: 14px 16px; tab-size: 2; -moz-tab-size: 2; font: 13.5px/1.6 var(--mono);
              color: var(--ink); background: var(--sunk); border: 1px solid var(--line); border-radius: 14px;
              white-space: pre; overflow: auto; overflow-wrap: normal; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.json-input::placeholder { color: var(--muted); }
.json-input:focus { outline: 0; background: var(--card); border-color: color-mix(in srgb, var(--k) 45%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--k) 12%, transparent); }
.json-status { margin: 10px 6px 0; min-height: 1.4em; font-size: 13px; color: var(--muted); }
.json-status.bad { color: var(--bad); }

/* ── dark mode details ── */
@media (prefers-color-scheme: dark) {
  .tile, .badge, .drop-icon { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k, var(--ink)) 22%, transparent); }
  .head .tile { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k, var(--ink)) 24%, transparent), 0 14px 30px -14px color-mix(in srgb, var(--k, var(--ink)) 60%, transparent); }
  .tcard:hover { box-shadow: 0 18px 38px -18px color-mix(in srgb, var(--k) 70%, transparent); }
  .file .thumb { border-color: transparent; }
}

/* ── phones ── */
@media (max-width: 640px) {
  .top { gap: 10px; height: 56px; }
  .nav a { padding: 7px 8px; font-size: var(--t-sm); }
  .nav { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); padding-right: 24px; }
  .block { margin-top: var(--s7); }
  .block h2 { font-size: var(--t-md); }
  .row { grid-template-columns: 1fr; gap: 6px; }
  .btn.big { width: 100%; }
  .file .dl a { padding: 0 10px; }
  .promise { flex-direction: column; align-items: center; gap: 4px; text-align: center; }
  .foot { flex-direction: column; align-items: center; gap: 2px; }
  .foot span + span::before { display: none; }
  .convs { grid-template-columns: 1fr; }
  .conv { padding: var(--s4); }
  .grp { grid-template-columns: 1fr; gap: 4px; }
  /* From ⇄ To on one row, Go under them, full width */
  .quick { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: var(--s2); }
  .quick .or { grid-column: 1 / -1; margin: 0; }
  .quick select { width: 100%; }
  .quick .btn { grid-column: 1 / -1; height: 48px; }
  /* The convert pickers stack: From, then the swap (now vertical), then To. */
  .pair { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 6px; }
  .pair label { width: 100%; display: grid; grid-template-columns: 44px 1fr; }
  .pair select { width: 100%; }
  .pair .swap svg { transform: rotate(90deg); }
  .grid, .grid.kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .grid.wide { grid-template-columns: 1fr; }
  .tcard { min-height: 64px; padding: 10px; gap: 10px; border-radius: 14px; }
  .tcard b { font-size: 14px; }
  .tcard small { font-size: 12.5px; }
  .tile, .grid.kinds .tile { width: 40px; height: 40px; border-radius: 12px; }
  .tile svg, .grid.kinds .tile svg { width: 21px; height: 21px; }
  .grid.kinds .tcard { min-height: 72px; }
  .grid.wide .tcard { padding: 12px; gap: 14px; }
  .grid.wide .tile { width: 44px; height: 44px; }
  .head { gap: var(--s3); }
  .head .tile { width: 46px; height: 46px; border-radius: 14px; }
  .head .tile svg { width: 25px; height: 25px; }
  .json-input { min-height: 260px; font-size: 13px; padding: 12px; }
}
/* The headline's two words turn through real conversions: "Convert MP4 to MP3." Each word in its kind's colour. */
.hero h1.turns .to { color: var(--muted); }
.hero h1 .turn { display: inline-block; color: var(--ink); transition: opacity .38s var(--ease), filter .38s var(--ease), transform .38s var(--ease), color .38s; }
.hero h1 .to .turn { color: var(--muted); }
.hero h1 .turn[class*="k-"] { color: var(--k); }
.hero h1 .turn.out { opacity: 0; filter: blur(10px); transform: translateY(-.18em); }
.hero h1 .turn.in { opacity: 0; filter: blur(10px); transform: translateY(.18em); transition: none; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* "Every conversion": folded until opened or searched */
details.index > summary { list-style: none; cursor: pointer; border-radius: var(--r); }
details.index > summary::-webkit-details-marker { display: none; }
details.index > summary h2 { display: flex; align-items: center; gap: 10px; font-size: var(--t-lg); font-weight: 680; letter-spacing: -.02em; margin: 0; }
details.index > summary .chev { width: 18px; height: 18px; color: var(--muted); transform: rotate(90deg); transition: transform .2s var(--ease); }
details.index[open] > summary .chev { transform: rotate(-90deg); }
details.index[open] > summary { margin-bottom: var(--s4); }
details.index > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* Preview before download */
.file .pv { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-strong);
            background: var(--card); color: var(--ink); font: inherit; font-size: 13px; font-weight: 620; cursor: pointer; }
.file .pv:hover { background: var(--soft); }
.file .pv svg { width: 16px; height: 16px; }
dialog.preview { width: min(980px, calc(100vw - 32px)); height: min(88vh, 1100px); padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-xl);
                 background: var(--card); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); overflow: hidden; }
dialog.preview[open] { display: flex; flex-direction: column; }
dialog.preview::backdrop { background: rgba(10, 10, 9, .55); backdrop-filter: blur(3px); }
dialog.preview header { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--line); }
dialog.preview header > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
dialog.preview header strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
dialog.preview header span { color: var(--muted); font-size: 13px; }
dialog.preview header .btn { min-height: 40px; padding: 0 14px; font-size: 14px; }
dialog.preview header .btn svg { width: 17px; height: 17px; }
.pv-body > * { flex: none; }
.pv-body { flex: 1; overflow: auto; padding: 18px; background: var(--sunk); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pv-page { width: min(100%, 860px); margin: 0; background: #fff; border-radius: 6px; box-shadow: 0 2px 12px rgba(0, 0, 0, .14); position: relative; overflow: hidden; }
.pv-page img { display: block; width: 100%; height: auto; }
.pv-page figcaption { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: var(--r-full); background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; }
.pv-image { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; background: repeating-conic-gradient(#e9e9e6 0 25%, #fff 0 50%) 0 0 / 18px 18px; }
.pv-video { max-width: 100%; max-height: 100%; border-radius: 10px; background: #000; }
.pv-audio { width: min(100%, 560px); margin-top: 18vh; }
.pv-text { align-self: stretch; margin: 0; padding: 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line);
           font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; tab-size: 2; }
.pv-doc { width: min(100%, 820px); padding: 48px 56px; background: #fff; color: #1a1a1a; border-radius: 6px; box-shadow: 0 2px 12px rgba(0, 0, 0, .14); line-height: 1.55; }
.pv-doc img { max-width: 100%; height: auto; }
.pv-doc table, .pv-sheet table { border-collapse: collapse; }
.pv-doc td, .pv-doc th { border: 1px solid #ccc; padding: 4px 8px; }
.pv-sheet { align-self: stretch; overflow: auto; }
.pv-sheet table { background: var(--card); font-size: 13px; }
.pv-sheet td { border: 1px solid var(--line-strong); padding: 4px 8px; white-space: nowrap; }
.pv-note { color: var(--muted); text-align: center; margin: 12vh auto 0; max-width: 46ch; }
@media (max-width: 640px) {
  dialog.preview { width: 100vw; height: 100dvh; max-width: none; max-height: none; border-radius: 0; border: 0; }
  dialog.preview header .btn.ghost { padding: 0 10px; }
  .pv-body { padding: 10px; }
  .pv-doc { padding: 24px 20px; }
}
@media (max-width: 560px) {   /* a finished file on a phone: name and sizes on top, Preview and Download as a full row below */
  .file:has(> .dl), .file:has(> .thumb):has(> .dl) { grid-template-columns: auto 1fr; }
  .file:has(> .dl):not(:has(> .thumb)) .name, .file:has(> .dl):not(:has(> .thumb)) .meta { grid-column: 1 / -1; }
  .file:has(> .dl) .dl, .file:has(> .thumb):has(> .dl) .dl { grid-column: 1 / -1; grid-row: 3; max-width: none; margin-top: 10px; }
  .file .dl > * { flex: 1 1 auto; justify-content: center; }
}
.file .dl .pair { display: inline-flex; gap: 4px; }
.file .dl .pair .pv { padding: 0 11px; }
@media (max-width: 560px) { .file .dl .pair { flex: 1 1 100%; } .file .dl .pair a { flex: 1; justify-content: center; } }

/* Preview settings (pictures to PDF): each change makes the PDF again and shows it */
.pv-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--card); }
.pv-settings[hidden] { display: none; }
.pv-opt { display: flex; align-items: center; gap: 9px; }
.pv-opt > span { font-size: 13px; font-weight: 640; color: var(--muted); }
.pv-opt .seg button { height: 34px; padding: 0 12px; font-size: 13px; }
.pv-opt .seg button:disabled { opacity: .38; cursor: not-allowed; }
dialog.preview.busy .pv-body { opacity: .45; transition: opacity .15s; }
@media (max-width: 640px) { .pv-settings { padding: 8px 10px; gap: 8px; } .pv-opt { width: 100%; justify-content: space-between; } .pv-opt .seg button { padding: 0 9px; } }

/* The workspace (a tool once it has files): the result on the left as you set it up, options and Download on the right */
.tool.working { max-width: 1180px; }
.tool.working .lede, .tool.working .device { display: none; }
.ws { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; margin-top: var(--s3); }
.ws[hidden] { display: none; }
.ws-main { position: relative; min-height: 62vh; padding: 22px; border-radius: var(--r-xl); background: var(--sunk); border: 1px solid var(--line); }
.ws-status { min-height: 20px; margin: -6px 0 10px; font-size: 13px; font-weight: 600; color: var(--muted); text-align: center; }
.ws-status:empty { display: none; }
.ws-view { display: flex; flex-direction: column; align-items: center; gap: 18px; transition: opacity .15s; }
.ws.busy .ws-view { opacity: .5; }
.ws-view.pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); align-items: start; gap: 22px; }
.ws-view.pages.single { grid-template-columns: minmax(0, 560px); justify-content: center; }
.ws-view .pv-page { width: 100%; margin: 0; border-radius: 6px; }
.ws-view .pv-page figcaption { left: 50%; right: auto; bottom: -26px; transform: translateX(-50%); background: none; color: var(--muted); font-weight: 600; padding: 0; }
.ws-view.pages { padding-bottom: 22px; }
.ws-view .pv-page { overflow: visible; }
.ws-view .pv-page img { border-radius: 6px; }
.ws-view .pv-image { max-width: 100%; max-height: 70vh; }
.ws-view .pv-video { max-width: 100%; max-height: 70vh; }
.ws-view .pv-audio { margin-top: 20vh; }
.ws-view .pv-doc { max-width: 100%; }
.ws-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--r-xl);
           background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-2); }
.ws-side > h2 { font-size: var(--t-md); font-weight: 700; letter-spacing: -.015em; margin: 0; }
.ws-slot { display: flex; flex-direction: column; gap: 12px; }
.ws-slot .options { flex-direction: column; flex-wrap: nowrap; gap: 14px; padding: 0; margin: 0; border: 0; }
.ws-slot .opt { flex-direction: column; align-items: stretch; gap: 6px; }
.ws-slot .opt > span { font-size: 13px; }
.ws-slot .seg { display: flex; flex-wrap: nowrap; }
.ws-slot .seg button { flex: 1; padding: 0 6px; height: 38px; font-size: 13.5px; }
.ws-slot .seg button:disabled { opacity: .38; cursor: not-allowed; }
.ws-slot .field input[type="text"], .ws-slot .field input[type="password"], .ws-slot .field select { width: 100%; }
.ws-slot .files { margin: 0; max-height: 240px; overflow: auto; }
.ws-slot .files .file { padding: 8px 10px; }
.ws-slot .files.made:empty { display: none; }
.ws-slot .files.made .file.only { background: none; padding: 0; }
.ws-slot .more { width: 100%; }
.ws-slot .actions { padding: 4px 0 0; flex-direction: column; align-items: stretch; }
.ws-slot .actions .btn { width: 100%; justify-content: center; }
.ws-slot .actions .btn svg { width: 18px; height: 18px; }
.ws-slot .note:empty { display: none; }
@media (max-width: 900px) {
  .ws { grid-template-columns: 1fr; }
  .ws-main { min-height: 0; padding: 14px; }
  .ws-side { position: static; }
  .ws-view.pages { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .ws-slot .actions { position: sticky; bottom: 10px; z-index: 2; }
}

/* Arranging pages in the workspace: drag, turn, take out */
.ws-view.arrange .pv-page { cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-y; }
.ws-view.arrange .pv-page img { transition: transform .2s var(--ease); pointer-events: none; }
.pv-page.lifted { cursor: grabbing; box-shadow: 0 22px 44px rgba(20, 20, 15, .25), 0 2px 6px rgba(20, 20, 15, .12); will-change: transform; }
.pv-holder { border: 2px dashed var(--line-strong); border-radius: 8px; }
.pv-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; opacity: 0; transition: opacity .15s; }
.pv-page:hover .pv-tools, .pv-page:focus-within .pv-tools { opacity: 1; }
@media (hover: none) { .pv-tools { opacity: 1; } }
.pv-tools button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line-strong);
                   background: var(--card); color: var(--ink); box-shadow: var(--sh-1); cursor: pointer; }
.pv-tools button:hover { background: var(--soft); }
.pv-tools svg { width: 18px; height: 18px; }

/* Continue with…: the next tool, carrying the file made here */
.ws-slot .next { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.ws-slot .next[hidden] { display: none; }
.ws-slot .next > span { font-size: 13px; font-weight: 640; color: var(--muted); }
.ws-slot .next .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-slot .next .chip { height: 32px; padding: 0 11px; font-size: 13px; }
.ws-slot .next .chip::before { display: none; }

/* The bar's PDF tools menu: a panel of tool cards under the bar (wide screens) */
.nav .chev { width: 14px; height: 14px; margin-left: 3px; vertical-align: -2px; transition: transform .2s var(--ease); opacity: .7; }
.nav [aria-expanded="true"] { color: var(--ink); background: var(--soft); }
.nav [aria-expanded="true"] .chev { transform: rotate(180deg); }
.menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: min(1080px, calc(100vw - 32px)); z-index: 30;
        padding: 14px; border-radius: 22px; background: var(--card); border: 1px solid var(--line-strong);
        box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .06); animation: menu-in .18s var(--ease) both; }
.menu[hidden] { display: none; }
.menu-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.menu-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.menu-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mgroup { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: var(--sunk); border: 1px solid var(--line);
          transition: border-color .15s, background .15s; }
.mgroup:hover { border-color: color-mix(in srgb, var(--k) 28%, var(--line)); background: color-mix(in srgb, var(--k) 4%, var(--sunk)); }
.mhead { display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--ink); border-radius: 10px; }
.mhead b { font-size: 15px; font-weight: 680; letter-spacing: -.01em; }
.mhead small { font-size: 13px; color: var(--muted); }
.mhead .art { width: 100%; height: 64px; margin-top: 12px; color: color-mix(in srgb, var(--ink) 38%, transparent); }
.mhead .art .acc { color: var(--k); stroke: var(--k); stroke-width: 1.9; }
.mhead:hover .art .acc { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--k) 45%, transparent)); }
.mlinks { display: flex; flex-wrap: wrap; gap: 4px 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.mlinks a { font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 4px 8px; border-radius: 8px; }
.mlinks a:hover, .mlinks a:focus-visible { color: var(--ink); background: color-mix(in srgb, var(--k) 10%, var(--card)); outline: 0; }
.menu-foot { display: flex; justify-content: space-between; gap: 12px; padding: 12px 6px 2px; font-size: 13.5px; font-weight: 600; }
.menu-foot a { color: var(--muted); text-decoration: none; } .menu-foot a:hover { color: var(--ink); }
@keyframes menu-in { from { opacity: 0; transform: translateX(-50%) translateY(-6px); } }
@media (max-width: 899px) { .menu { display: none !important; } .nav .chev { display: none; } }

/* The bar: logo on the left, the menu items in the middle */
.top { display: grid; grid-template-columns: 1fr auto 1fr; }
.top .logo { justify-self: start; }
.top .nav { margin-left: 0; justify-self: center; }
@media (max-width: 899px) { .top { display: flex; } .top .nav { margin-left: auto; } }
/* More tools on a tool page: the same cards as the home page */
.tool ~ .block.more-tools { max-width: 1100px; }
.tool ~ .block.more-tools h2 { font-size: var(--t-md); color: var(--ink); font-weight: 680; margin-bottom: var(--s3); }

/* The last tile of a home section: the kind's full page */
.tcard.more-tile { border-style: dashed; background: transparent; box-shadow: none; }
.tcard.more-tile:hover { background: color-mix(in srgb, var(--k) 6%, var(--card)); border-style: solid; }
.nav a[aria-current="page"] { color: var(--ink); }

/* A converter page: one line per thing you can get */
.hub-row { margin-top: var(--s4); }
.hub-row h3 { margin: 0 0 10px; font-size: 15px; font-weight: 680; letter-spacing: -.01em; }
.hub-row h3 small { margin-left: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.hub-row .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* Paste your writing (Markdown, text): a roomy box, in the workspace too */
.paste { padding: 10px 8px 0; }
.paste textarea { width: 100%; min-height: 120px; resize: vertical; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line-strong);
                  background: var(--sunk); color: var(--ink); font: 13.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; }
.paste textarea:focus { outline: 0; border-color: color-mix(in srgb, var(--ink) 40%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 6%, transparent); }
.ws-slot .paste { padding: 0; }
.ws-slot .paste textarea { min-height: 260px; max-height: 50vh; }

/* The preview's own bar: status, Pages / Large, Full screen */
.ws-bar { display: flex; align-items: center; gap: 10px; margin: -6px 0 14px; }
.ws-bar .ws-status { margin: 0 auto 0 0; text-align: left; }
.ws-bar .ws-status:empty { display: block; }
.seg.small button { height: 32px; padding: 0 12px; font-size: 13px; }
.btn.small { min-height: 34px; height: 34px; padding: 0 12px; font-size: 13px; gap: 6px; }
.btn.small svg { width: 15px; height: 15px; }
.ws-view.pages.large { grid-template-columns: minmax(0, 860px); justify-content: center; }
.ws-main:fullscreen { overflow: auto; padding: 24px clamp(16px, 4vw, 48px); background: var(--sunk); border-radius: 0; }
.ws-main:fullscreen .ws-view.pages { grid-template-columns: minmax(0, 980px); justify-content: center; }
@media (max-width: 640px) { .ws-bar [data-ws-full] { display: none; } }

/* The Edit area's colour */
.k-edit { --k: #7c3aed; }
@media (prefers-color-scheme: dark) { .k-edit { --k: #a78bfa; } }

/* Writing (Markdown, text): edit on the left, the designed PDF on the right, settings and downloads in one bar above */
.ws.writing { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "side side" "edit main"; align-items: stretch; }
.ws.writing .ws-side { grid-area: side; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 12px 16px; }
.ws.writing .ws-side > h2 { display: none; }
.ws.writing .ws-slot { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 20px; width: 100%; }
.ws.writing .ws-slot .options { flex-direction: row; flex-wrap: wrap; gap: 10px 18px; }
.ws.writing .ws-slot .opt { flex-direction: row; align-items: center; gap: 8px; }
.ws.writing .ws-slot .seg button { flex: none; padding: 0 12px; }
.ws.writing .ws-slot .files, .ws.writing .ws-slot .more, .ws.writing .ws-slot [data-made] { display: none; }
.ws.writing .ws-slot .actions { flex-direction: row; padding: 0; margin-left: auto; }
.ws.writing .ws-slot .actions .btn { width: auto; }
.ws.writing .ws-slot .next { width: 100%; flex-direction: row; align-items: center; padding-top: 10px; }
.ws.writing .paste { grid-area: edit; display: flex; padding: 0; }
.ws.writing .paste textarea { flex: 1; min-height: 72vh; max-height: none; resize: none; border-radius: var(--r-xl); background: var(--card); padding: 18px 20px; font-size: 14px; }
.ws.writing .ws-main { grid-area: main; min-height: 72vh; max-height: 80vh; overflow: auto; }
.ws.writing .ws-view.pages { grid-template-columns: minmax(0, 1fr); }
.ws.writing.only { grid-template-areas: "side side" "main main"; }
.ws.writing.only .paste { display: none; }
.ws.writing.only .ws-view.pages { grid-template-columns: minmax(0, 860px); justify-content: center; }
.ws-bar .btn[aria-pressed="true"] { background: var(--soft); color: var(--ink); }
@media (max-width: 900px) {
  .ws.writing { grid-template-columns: 1fr; grid-template-areas: "side" "edit" "main"; }
  .ws.writing.only { grid-template-areas: "side" "main"; }
  .ws.writing .paste textarea { min-height: 40vh; }
  .ws.writing .ws-main { max-height: none; }
  .ws.writing .ws-slot .actions { margin-left: 0; width: 100%; }
}
.ws.writing .ws-slot .actions .btn.big { height: 44px; min-height: 44px; font-size: 15px; padding: 0 18px; }