/* Colour says direction (design/e4-office.html): the screens that take a Word file in are
   Word blue, and the screens that give the Excel file out are Excel green; the text pages are
   Word blue like the start. The tint, the ink, the line and the big pill follow the screen; the
   squares, the check and the notification stay green, the brand's colour. The name is
   two-coloured on every screen, Word to Excel in Word blue except Excel in Excel green, and the
   mark, the doc icon from Flaticon, keeps its own blue. The drag overlay is a soft Word blue
   with the ink unchanged, so they keep their colours on it. The root page, To XLSX Tools, and
   the text pages carry the site's name instead, To XLSX Tools in Word blue with XLSX in Excel
   green, and take the blue of the start screen. */
:root{--blue:#185abd;--blue-soft:#c9dcf6;--bg:#e9f0fb;--ink:#0f1f3d;--muted:#56688a;--line:#d3deef;--accent:#185abd;--accent-deep:#134999;--glow:rgba(24,90,189,.65);--green:#178a4c;--green-deep:#11703c;--green-soft:#dcefe2;--green-soft-deep:#c9e5d2;--green-bold:#b2dfc3;--green-bold-deep:#9bd2b0;--warn:#6e4b00;--warn-soft:#fff1c9;--bad:#b02a2f}
body[data-state=opening],body[data-state=converting],body[data-state=done],body[data-state=warnings],body[data-state=partial],body[data-state=batch]{--bg:#f3f8f4;--ink:#0f2d1c;--muted:#5a7565;--line:#d6e5db;--accent:var(--green);--accent-deep:var(--green-deep);--glow:rgba(23,138,76,.65)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{font-family:ui-rounded,"SF Pro Rounded","Nunito","Varela Round",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;transition:background .15s,color .15s}
body.over{background:var(--blue-soft)}

.top{height:64px;padding:0 28px;display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
body.over .top{background:transparent;border-bottom-color:rgba(24,90,189,.3)}
.brand{display:flex;align-items:center;gap:16px;font-weight:700;font-size:32px;color:var(--blue);text-decoration:none}
.brand img{width:30px;height:40px;flex:none}
.brand .excel{color:var(--green)}
/* On the tool's page the top panel also carries the site's name at its right, a small link to the
   root page; the footer carries it too, so the link is dropped on phones. */
.top .site{font-weight:700;color:var(--muted);text-decoration:none}
.top .site:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}

.big{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-width:420px;max-width:100%;padding:26px 48px;font:inherit;font-size:25px;font-weight:700;line-height:1.2;border:0;border-radius:999px;cursor:pointer;color:#fff;background:var(--accent);box-shadow:0 16px 36px -14px var(--glow);text-decoration:none;position:relative;overflow:hidden}
.big:hover{background:var(--accent-deep)}
/* The refusal is solid red, not a light red: next to the page's light green pills a light red
   is no difference to a red-green colour-blind eye. */
.big.refuse{background:var(--bad);color:#fff;box-shadow:0 16px 36px -14px rgba(176,42,47,.65);cursor:default}
.big.invert{background:#fff;color:var(--accent);box-shadow:0 16px 36px -14px var(--glow)}
.big.progress{background:var(--green-soft);color:var(--ink);box-shadow:none;cursor:default}
.big.progress i{position:absolute;left:0;top:0;bottom:0;width:0;background:#b9dec6;z-index:0}
.big.progress span{position:relative;z-index:1}
.big svg{flex:none}
.big span{min-width:0;overflow-wrap:anywhere}
/* The squares and the check are bold (design/squares.html, chosen 2026-10-10): a tile a step
   deeper and more vivid than the soft green, the icon larger and heavier in deep green. */
.actions{display:inline-flex;align-items:center;gap:12px;max-width:100%}
.squares{display:flex;flex-direction:column;justify-content:space-between;gap:6px;flex:none;align-self:stretch}
.square{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:0;border-radius:11px;cursor:pointer;color:var(--green-deep);background:var(--green-bold);text-decoration:none}
.square:hover{background:var(--green-bold-deep)}
.square span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sub{margin:22px 0 0;font-size:18px;color:var(--muted)}
.sub a{color:var(--ink)}
/* While a drag is over the start screen the hint under the button is not shown, but it keeps its
   place, so that the button does not move when the drag comes in or leaves. */
body[data-state=dragging] .drop-hint,body[data-state=refusing] .drop-hint{visibility:hidden}
.ok{width:60px;height:60px;border-radius:50%;background:var(--green-bold);color:var(--green-deep);display:inline-flex;align-items:center;justify-content:center;margin:0 0 18px}
h1{font-size:32px;font-weight:800;letter-spacing:-.01em;margin:0 0 22px;line-height:1.15;overflow-wrap:anywhere}
h1 small{display:block;font-size:17px;font-weight:500;color:var(--muted);margin-top:8px;letter-spacing:0}
.title{font-size:40px;letter-spacing:-.02em;line-height:1.05;margin:0 0 28px}
.note{margin:28px auto 0;max-width:560px;text-align:left;border-radius:18px;padding:16px 20px;background:var(--warn-soft);color:var(--warn);font-size:15px}
.note b{display:block;margin-bottom:6px}
.note ul{margin:0;padding-left:18px}
.note li{margin:3px 0}
.bad{color:var(--bad)}
/* The list of a batch's files: one compact row per file, left-aligned as wide as the note.
   A converted row is the workbook's name, its size, "incomplete" for a partial one, and its
   warnings in the warn colour; a failed row is the file's name and the message in red. */
.files{width:min(560px,100%);margin:0 auto;padding:0;list-style:none;text-align:left;font-size:15px;line-height:1.35}
.files li{padding:10px 4px;overflow-wrap:anywhere}
.files li + li{border-top:1px solid var(--line)}
.files .meta{color:var(--muted)}
.files .warn,.files .fail{display:block;margin-top:3px}
.files .warn{color:var(--warn)}
.files .fail{color:var(--bad)}
.files + .actions{margin-top:28px}
.files ~ .big{margin-top:28px}
/* Download all while the ZIP is being built: soft green with ink text, like the progress
   pill, and reading "Preparing…", so the change is not in hue alone. */
.big.zip:disabled{background:var(--green-soft);color:var(--ink);box-shadow:none;cursor:default}

/* The Copy link and Delete file dialogs. The panel's content is one block that fills it, so
   that a click whose target is the dialog itself is a click on the backdrop. */
.modal{width:min(560px,calc(100% - 32px));max-width:none;padding:0;border:0;border-radius:24px;background:#fff;color:var(--ink);text-align:center;box-shadow:0 24px 60px -24px rgba(15,45,28,.5)}
.modal::backdrop{background:rgba(15,45,28,.45)}
.modal > div{position:relative;padding:32px 28px 28px}
.modal h2{margin:0 0 20px;font-size:22px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.modal .square{position:absolute;top:14px;right:14px}
.modal .row{display:flex;align-items:center;gap:10px}
.modal input{flex:1;min-width:0;font:inherit;font-size:16px;padding:14px 18px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink)}
.modal .big{min-width:0;padding:14px 28px;font-size:17px}
.modal .big.copy:disabled{background:var(--green-soft);color:var(--green-deep);box-shadow:none;cursor:default}
.modal .sub{margin:16px 0 0;font-size:15px}
/* The Delete file dialog: the link's remaining time in big digits, after iLovePDF's "File
   available time", and the pill that deletes the file now, red as the page's one destructive
   action. */
.modal .lead{margin:0;font-size:17px;color:var(--muted)}
.countdown{display:flex;justify-content:center;gap:36px;margin:22px 0 28px}
.countdown b{display:block;font-size:48px;font-weight:500;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.countdown span{display:block;margin-top:8px;font-size:16px;font-weight:700;color:var(--muted)}
.big.delete{background:var(--bad);box-shadow:0 16px 36px -14px rgba(176,42,47,.65)}
.big.delete:hover{background:#8f2226}
/* The "Link copied" notification: a green pill that drops in at the top of the page for two
   seconds. It is in the dialog's markup so that it is painted above the backdrop; fixed, it
   sits at the page's top edge, not the panel's. */
.toast{position:fixed;inset:16px 0 auto 0;margin:0 auto;width:fit-content;max-width:calc(100% - 32px);display:flex;align-items:center;gap:10px;padding:12px 22px 12px 18px;border-radius:999px;background:var(--green);color:#fff;font-size:16px;font-weight:700;line-height:1.2;box-shadow:0 16px 36px -14px rgba(23,138,76,.65);animation:drop .22s ease-out;transition:opacity .15s}
.toast.leaving{opacity:0}
.toast svg{flex:none}
@keyframes drop{from{opacity:0;translate:0 -14px}}
@media (prefers-reduced-motion:reduce){.toast{animation:none;transition:none}}

.bottom{background:#fff;border-top:1px solid var(--line);padding:32px 28px 24px;color:var(--muted);font-size:14px;line-height:1.5}
.bottom .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px 32px;max-width:860px;margin:0 auto}
.bottom .brand{margin-bottom:10px;color:var(--blue)}
.bottom .brand:hover{color:var(--blue);text-decoration:none}
.bottom p{margin:0}
.bottom h2{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--ink)}
.bottom ul{margin:0;padding:0;list-style:none}
.bottom li{margin:0 0 8px}
.bottom a{color:inherit;text-decoration:none}
.bottom a:hover{color:var(--green-deep);text-decoration:underline;text-underline-offset:3px}
.bottom .copyright{max-width:860px;margin:24px auto 0;padding-top:16px;border-top:1px solid var(--line);font-size:13px}
.bottom .credit{max-width:860px;margin:6px auto 0;font-size:13px}
body.over .bottom{background:transparent;color:var(--ink);border-top-color:rgba(24,90,189,.3)}
body.over .bottom .copyright{border-top-color:rgba(24,90,189,.3)}

/* The root page: the headline, one line under it, and one card per tool, a white panel linking to
   the tool's page with its mark, its name, what it does, and an arrow in the squares' green tile. */
main.hub .sub{margin:0 0 36px}
.tool{display:flex;align-items:center;gap:22px;width:min(560px,100%);padding:24px 28px;border-radius:24px;background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;text-align:left;box-shadow:0 16px 36px -24px var(--glow);transition:box-shadow .15s,translate .15s}
.tool:hover{box-shadow:0 20px 40px -20px var(--glow);translate:0 -2px}
.tool img{width:45px;height:60px;flex:none}
.tool .what{flex:1;min-width:0}
.tool b{display:block;font-size:25px;font-weight:700;line-height:1.2;color:var(--blue);overflow-wrap:anywhere}
.tool b .excel{color:var(--green)}
.tool small{display:block;margin-top:4px;font-size:15px;line-height:1.4;color:var(--muted)}
.tool .go{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;border-radius:11px;background:var(--green-bold);color:var(--green-deep)}
@media (prefers-reduced-motion:reduce){.tool{transition:none}}

/* Text pages: company and legal */
main.text{justify-content:flex-start;align-items:stretch;text-align:left;padding:40px 24px 64px}
.text article{width:100%;max-width:680px;margin:0 auto;font-size:16px;line-height:1.6}
.text h1{font-size:32px;margin:0 0 6px}
.text .updated{margin:0 0 28px;font-size:15px;color:var(--muted)}
.text h2{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:32px 0 10px;line-height:1.25}
.text h3{font-size:16px;font-weight:700;margin:20px 0 6px}
.text p,.text ul,.text ol{margin:0 0 12px}
.text ul,.text ol{padding-left:24px}
.text li{margin:0 0 6px}
.text a{color:var(--green-deep)}
.text table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:15px}
.text th,.text td{text-align:left;vertical-align:top;padding:8px 10px;border-bottom:1px solid var(--line)}
.text th{color:var(--ink)}
.text mark{background:var(--warn-soft);color:var(--warn);border-radius:4px;padding:0 3px;margin:0 -3px}

@media (max-width:600px){
  .top{height:56px;padding:0 16px;gap:12px}
  .top .site{display:none}
  main{padding:20px 16px}
  main > div{width:100%}
  .big{min-width:0;width:100%;padding:20px 24px;font-size:20px;gap:10px}
  .big svg{width:24px;height:24px}
  .actions{display:flex;flex-wrap:wrap;justify-content:space-between;width:100%;gap:12px}
  .actions .big{order:-1}
  .squares{flex-direction:row;align-self:auto;gap:8px}
  .square{width:44px;height:44px;border-radius:12px}
  .sub{font-size:16px}
  h1{font-size:26px}
  h1 small{font-size:15px}
  .title{font-size:30px;margin:0 0 22px}
  .note{padding:14px 16px;font-size:14px;border-radius:14px}
  .modal > div{padding:24px 20px 20px}
  .modal .row{flex-direction:column;align-items:stretch}
  .modal .big{width:100%}
  .toast{font-size:15px}
  .bottom{padding:24px 16px 20px}
  .bottom .cols{grid-template-columns:1fr 1fr;gap:20px 16px}
  .bottom .about{grid-column:1 / -1}
  .tool{gap:16px;padding:18px 20px;border-radius:18px}
  .tool img{width:36px;height:48px}
  .tool b{font-size:20px}
  .tool small{font-size:14px}
  main.text{padding:28px 16px 48px}
  .text h1{font-size:26px}
  .text h2{font-size:18px}
}
@media (hover:none) and (pointer:coarse){.drop-hint{display:none}}