/* hellpdf — one stylesheet, no framework. Tokens first. */

@font-face { font-family: "Geist"; src: url("/static/fonts/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/static/fonts/geist-mono-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/static/fonts/bricolage-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Great Vibes"; src: url("/static/fonts/great-vibes-latin.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Dancing Script"; src: url("/static/fonts/dancing-script-latin.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Caveat"; src: url("/static/fonts/caveat-latin.woff2") format("woff2"); font-display: block; }

:root {
  --fire: #E5381C;        /* Hellfire: brand, primary buttons */
  --fire-text: #C42D14;   /* Brimstone: links and red text on light */
  --fire-deep: #8F200E;
  --fire-tint: #FDEBE7;
  --ember: #FF6A47;       /* red on dark */
  --ink: #1B1513;
  --ink-2: #4F4744;
  --ash: #5E5652;         /* secondary text, 6.5:1 on white */
  --line: #EAE3DE;
  --line-2: #DED5CF;
  --smoke: #F2EDE9;
  --smoke-2: #F7F3F0;
  --ground: #FAF8F6;
  --paper: #FFFFFF;
  --ok: #0B5E41;
  --ok-tint: #E3F3EC;

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bricolage Grotesque", var(--font);
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --shadow: 0 1px 2px rgba(27, 21, 19, .08);
  --shadow-lg: 0 12px 40px rgba(27, 21, 19, .18);
}

/* Category colours: icon on a 10% tint */
.cat-org  { --c: #E5381C; --t: #FDEBE7; }
.cat-opt  { --c: #0F7A55; --t: #E3F3EC; }
.cat-to   { --c: #2457D6; --t: #E6EDFC; }
.cat-from { --c: #B45309; --t: #FBEFDF; }
.cat-edit { --c: #7C3AED; --t: #F0E9FD; }
.cat-sec  { --c: #0E6E86; --t: #E1F1F5; }
.cat-ai   { --c: #C0266F; --t: #FBE6F0; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, svg, canvas { display: block; }
a { color: var(--fire-text); }
a:hover { color: var(--fire-deep); }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--fire); outline-offset: 2px; border-radius: 6px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: var(--r-sm); background: var(--ink); color: #fff; }
.skip:focus { top: 12px; }
.container { max-width: 1240px; margin: 0 auto; padding-inline: 24px; }
.muted { color: var(--ash); }
.mono { font-family: var(--mono); font-size: 13px; }
.display { font-family: var(--display); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; margin: 0; }
.h2 { font-size: clamp(32px, 4vw, 52px); }
.h3 { font-size: 28px; }
.lede { margin: 0; max-width: 640px; font-size: 19px; color: var(--ink-2); }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.mark-doc, .mark-core { fill: var(--fire); }
.mark-fold { fill: var(--ink); fill-opacity: .28; }
.mark-flame { fill: #fff; }
.wordmark { font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--ink); }
.wordmark-sm { font-size: 20px; }
.wordmark-pdf { color: var(--fire); }

/* Header & footer */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding-block: 12px; }
.nav { display: flex; flex-wrap: wrap; gap: 2px; }
.nav a { padding: 10px 14px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav a:hover { background: var(--smoke); color: var(--ink); }
.site-footer { background: var(--paper); border-top: 1px solid var(--line); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 28px; }
.footer-brand .muted { font-family: var(--font); font-size: 14px; }
.footer-nav { display: flex; gap: 20px; font-size: 14px; }
.footer-nav a { color: var(--ink-2); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: var(--r-sm); border: 1px solid transparent; background: none; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, transform .05s; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--fire); color: #fff; }
.btn-primary:hover { background: #CC2F15; color: #fff; }
.btn-outline { border-color: var(--line-2); background: var(--paper); color: var(--ink); }
.btn-outline:hover { background: var(--smoke-2); color: var(--ink); }
.btn-ghost { color: var(--fire-text); }
.btn-ghost:hover { background: var(--fire-tint); }
.btn-sm { min-height: 40px; padding: 8px 12px; font-size: 14px; font-weight: 500; }
.btn-xl { min-height: 60px; padding: 16px 28px; border-radius: var(--r); font-size: 18px; font-weight: 700; }
.btn-block { width: 100%; }
.btn-dashed { border: 1px dashed #C9BEB7; color: var(--ink); }
.btn-dashed:hover { background: var(--smoke-2); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-sm); border: 0; background: none; color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { background: var(--smoke); color: var(--ink); }

/* Pills, badges, tiles */
.pill { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--fire-tint); color: var(--fire-deep); font-size: 13px; font-weight: 600; }
.pill-ok { background: var(--ok-tint); color: var(--ok); }
.pill-lock { background: #E1F1F5; color: #0B5A6E; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; background: var(--smoke); color: var(--ash); font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge-device { background: var(--ok-tint); color: var(--ok); }
.badge-soon { background: var(--smoke); color: var(--ash); }
.tile { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; background: var(--t, var(--smoke)); color: var(--c, var(--ink)); }
.tile .icon { width: 26px; height: 26px; }
.tile-lg { width: 72px; height: 72px; border-radius: 20px; }
.tile-lg .icon { width: 38px; height: 38px; }
.tile-ok { background: var(--ok-tint); color: var(--ok); }

/* Home */
.hero { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-block: 72px 40px; text-align: center; }
.hero-title { max-width: 900px; font-size: clamp(40px, 6vw, 76px); line-height: .98; letter-spacing: -.04em; }
.hot { color: var(--fire); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.chip { min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper); font-size: 14px; font-weight: 600; cursor: pointer; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tools-section { padding-bottom: 72px; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 16px; }
.tool-grid-sm { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.card { display: flex; flex-direction: column; gap: 6px; min-height: 168px; padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--paper); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.card:hover { color: var(--ink); border-color: #D5C9C2; box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.card-name { font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.card-desc { font-size: 14px; line-height: 1.45; color: var(--ash); }

.dark { background: var(--ink); color: #fff; }
.dark-inner { display: flex; flex-direction: column; gap: 40px; padding-block: 72px; }
.ember { color: var(--ember); }
.promise-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.promise { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--r-lg); background: #2A2220; }
.promise svg { color: var(--ember); }
.promise h3 { margin: 0; font-size: 18px; font-weight: 650; }
.promise p { margin: 0; font-size: 14px; color: #CFC6C1; }

/* Tool page: intro / dropzone */
.intro { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-block: 64px 56px; text-align: center; }
.intro-title { font-size: clamp(40px, 5vw, 64px); }
.dropzone { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(100%, 640px); margin-top: 8px; padding: 40px 24px; border-radius: 24px; border: 2px dashed #D5C9C2; background: var(--paper); transition: border-color .15s, background-color .15s; }
.dropzone .btn-xl { min-width: 280px; }
.dz-hint { margin: 0; color: var(--ash); font-size: 14px; }
body.dragging .dropzone { border-color: var(--fire); background: var(--fire-tint); }
.drop-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(229, 56, 28, .1); border: 4px dashed var(--fire); pointer-events: none; font-family: var(--display); font-size: 40px; font-weight: 800; color: var(--fire-deep); }
.notice { max-width: 640px; padding: 16px 20px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); }
.notice-soon strong { color: var(--ink); }
.howto { display: flex; flex-direction: column; gap: 20px; padding-block: 24px 72px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin: 0 0 24px; padding: 0; list-style: none; counter-reset: s; }
.steps li { position: relative; padding: 20px 20px 20px 64px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); counter-increment: s; }
.steps li::before { content: counter(s); position: absolute; left: 20px; top: 18px; width: 30px; height: 30px; border-radius: 999px; background: var(--fire-tint); color: var(--fire-deep); font-weight: 700; text-align: center; line-height: 30px; }
.steps strong { color: var(--ink); }

/* Workspace */
.ws { display: flex; flex-wrap: wrap; align-items: stretch; min-height: calc(100vh - 66px); background: var(--smoke); border-bottom: 1px solid var(--line); }
.ws-main { flex: 999 1 560px; min-width: 0; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.ws-side { flex: 1 1 340px; max-width: 100%; padding: 24px; display: flex; flex-direction: column; gap: 22px; background: var(--paper); border-left: 1px solid var(--line); }
.ws-title { font-size: 30px; }
.ws-options { display: flex; flex-direction: column; gap: 14px; }
.ws-cta { margin-top: auto; display: flex; flex-direction: column; gap: 10px; position: sticky; bottom: 0; padding-top: 12px; background: var(--paper); }
.ws-note { margin: 0; font-size: 12px; color: var(--ash); text-align: center; }
.ws-error { margin: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--fire-tint); color: var(--fire-deep); font-size: 14px; }
.ws-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.file-meta { display: flex; align-items: center; gap: 12px; min-width: 0; }
.file-meta .tile { width: 40px; height: 40px; border-radius: 12px; }
.file-meta .tile .icon { width: 22px; height: 22px; }
.file-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.bar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hint { margin: 0; font-size: 14px; color: var(--ink-2); }
.summary { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--smoke-2); font-size: 14px; }

/* Form controls */
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ash); }
.input { min-width: 0; min-height: 44px; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--paper); font-size: 15px; color: var(--ink); }
.input:focus { outline: 2px solid var(--fire); outline-offset: 0; border-color: var(--fire); }
.input[aria-invalid="true"] { border-color: var(--fire); background: var(--fire-tint); }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 4px 0; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--fire); }
.seg { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: 12px; background: var(--smoke); }
.seg button { min-height: 40px; padding: 8px 6px; border: 0; border-radius: 9px; background: transparent; color: var(--ash); font-size: 13px; font-weight: 600; cursor: pointer; }
.seg button[aria-selected="true"], .seg button[aria-checked="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(27, 21, 19, .12); }
.range-box { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r); border: 1px solid var(--line); }
.range-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper .btn { width: 44px; padding: 0; font-size: 20px; }
.stepper output { min-width: 84px; text-align: center; font-size: 18px; font-weight: 600; color: var(--ink); }

.field-row { display: flex; justify-content: space-between; gap: 8px; }
.field-row output { font-family: var(--mono); color: var(--ink); }
.field-end { justify-content: flex-end; }
.input-color { width: 100%; padding: 4px; cursor: pointer; }
select.input { cursor: pointer; }
.slider { width: 100%; min-height: 32px; accent-color: var(--fire); cursor: pointer; }
.pos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 132px; padding: 8px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--paper); }
.pos-grid button { display: flex; align-items: center; justify-content: center; height: 36px; border: 0; border-radius: 6px; background: var(--smoke-2); cursor: pointer; }
.pos-grid.rows-2 { row-gap: 52px; }
.pos-grid button span { width: 12px; height: 12px; border-radius: 3px; background: #CFC4BD; }
.pos-grid button:hover span { background: var(--ash); }
.pos-grid button[aria-checked="true"] { background: var(--fire-tint); }
.pos-grid button[aria-checked="true"] span { background: var(--fire); }

/* Page thumbnails */
.thumb { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: var(--ar, .7727); width: 100%; background: var(--paper); border: 1px solid var(--line-2); border-radius: 5px; box-shadow: var(--shadow); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: contain; transform: rotate(var(--rot, 0deg)) scale(var(--rs, 1)); transition: transform .2s; user-select: none; }
.thumb.loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%) var(--smoke-2); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .thumb.loading::after { animation: none; } .card, .btn, .thumb img { transition: none; } }
.page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 14px; }
.page { position: relative; }
.page-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 8px; border-radius: 12px; border: 2px solid transparent; background: transparent; cursor: pointer; text-align: center; }
.page-btn:hover { background: rgba(255, 255, 255, .7); }
.page-num { font-family: var(--mono); font-size: 12px; color: var(--ash); }
.page-btn[aria-pressed="true"] { background: var(--fire-tint); border-color: var(--fire); }
.page.turned .page-btn { border-color: #C9BEB7; background: rgba(255, 255, 255, .7); }
.page-check, .page-x { position: absolute; top: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: var(--fire); color: #fff; pointer-events: none; }
.page.removed .thumb { opacity: .35; }
.page.removed .thumb::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--fire) calc(50% - 1.5px), var(--fire) calc(50% + 1.5px), transparent calc(50% + 1.5px)), linear-gradient(to top left, transparent calc(50% - 1.5px), var(--fire) calc(50% - 1.5px), var(--fire) calc(50% + 1.5px), transparent calc(50% + 1.5px)); opacity: .7; }
.page-tools { position: absolute; left: 50%; top: 40%; z-index: 3; display: flex; gap: 6px; transform: translate(-50%, -50%); opacity: 0; transition: opacity .15s; }
.page:hover .page-tools, .page:focus-within .page-tools, .page-tools:focus-within { opacity: 1; }
.page-tools .icon-btn { background: var(--ink); color: #fff; width: 36px; height: 36px; }
.zoom-btn { position: absolute; left: 12px; top: 12px; z-index: 3; width: 32px; height: 32px; opacity: 0; background: var(--paper); box-shadow: var(--shadow); }
.page:hover .zoom-btn, .zoom-btn:focus-visible, .file-card:hover .zoom-btn { opacity: 1; }
@media (hover: none) { .page-tools, .zoom-btn { opacity: 1; } }
.group-title { display: flex; align-items: center; gap: 10px; margin: 6px 0 -4px; font-size: 14px; font-weight: 600; }
.group-title .badge { font-family: var(--mono); }

.page.skipped .thumb { opacity: .45; }

/* Stamp previews (page numbers, watermark): sized in page proportions */
.thumb.stamped { container-type: inline-size; }
.stamp-layer { position: absolute; inset: 0; z-index: 1; display: flex; padding: var(--m); pointer-events: none; overflow: hidden; }
.at-tl, .at-tc, .at-tr { align-items: flex-start; }
.at-ml, .at-mc, .at-mr { align-items: center; }
.at-bl, .at-bc, .at-br { align-items: flex-end; }
.at-tl, .at-ml, .at-bl { justify-content: flex-start; }
.at-tc, .at-mc, .at-bc { justify-content: center; }
.at-tr, .at-mr, .at-br { justify-content: flex-end; }
.stamp-layer.tiled { display: block; padding: 0; }
.stamp-layer.tiled .stamp { position: absolute; transform: translate(-50%, -50%) rotate(var(--sr, 0deg)); }
.stamp { display: block; flex-shrink: 0; font-family: var(--ff); font-size: calc(var(--fs) * 100cqw); line-height: 1; white-space: nowrap; color: var(--sc); opacity: var(--so, 1); transform: rotate(var(--sr, 0deg)); }
.stamp.bold { font-weight: 700; }
.stamp-img { width: var(--sw); height: auto; }
.stamps-under .stamp { mix-blend-mode: multiply; }

/* Organize */
.org-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.org-card .file-card-tools .icon-btn { width: 30px; height: 30px; }
.org-card .file-card-tools .icon svg, .org-card .file-card-tools svg { width: 16px; height: 16px; }
.thumb-blank { color: #A39892; font-size: 13px; font-weight: 600; }
.org-card .add-card, .org-grid .add-card { min-height: 200px; }

/* JPG to PDF: the card shows the page the image will become */
.img-page { display: flex; align-items: center; justify-content: center; aspect-ratio: var(--ar, .7071); width: 100%; padding: var(--pad, 0); background: var(--paper); border: 1px solid var(--line-2); border-radius: 5px; overflow: hidden; }
.img-page img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; }

/* Crop */
.crop-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.crop-nav { display: flex; align-items: center; gap: 12px; }
.crop-stage { position: relative; width: min(100%, 720px, calc((100vh - 200px) * var(--ar, .7071))); overflow: hidden; border-radius: 4px; box-shadow: var(--shadow-lg); touch-action: none; user-select: none; }
.crop-stage.loading { aspect-ratio: .7071; background: var(--paper); }
.crop-canvas { width: 100%; height: auto; background: #fff; }
.crop-box { position: absolute; border: 2px solid var(--fire); box-shadow: 0 0 0 9999px rgba(27, 21, 19, .55); cursor: move; }
.crop-box:focus-visible { outline: 3px solid #fff; outline-offset: 0; border-radius: 0; }
.crop-h { position: absolute; width: 18px; height: 18px; margin: -9px; border-radius: 4px; background: #fff; border: 2px solid var(--fire); }
.crop-h::after { content: ""; position: absolute; inset: -12px; } /* bigger touch target */
.h-nw { left: 0; top: 0; cursor: nwse-resize; }
.h-n { left: 50%; top: 0; cursor: ns-resize; }
.h-ne { left: 100%; top: 0; cursor: nesw-resize; }
.h-e { left: 100%; top: 50%; cursor: ew-resize; }
.h-se { left: 100%; top: 100%; cursor: nwse-resize; }
.h-s { left: 50%; top: 100%; cursor: ns-resize; }
.h-sw { left: 0; top: 100%; cursor: nesw-resize; }
.h-w { left: 0; top: 50%; cursor: ew-resize; }

.hint.small { font-size: 12px; color: var(--ash); }

/* Page editor (Sign, Edit PDF, Forms) */
.ed-doc { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.ed-sheet { display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(100%, 860px); }
.ed-page { position: relative; width: 100%; aspect-ratio: var(--ar, .7727); container-type: inline-size; box-shadow: var(--shadow-lg); background: #fff; }
.ed-page .thumb { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }
.ed-layer { position: absolute; inset: 0; z-index: 1; touch-action: none; user-select: none; }
.ed-layer:not([data-mode="select"]) { cursor: crosshair; }
.ed-layer[data-mode="text"] { cursor: text; }
.ed-label { font-size: 12px; }
.ed-obj { position: absolute; opacity: var(--o, 1); cursor: move; }
.ed-obj.sel { outline: 2px solid var(--fire); outline-offset: 2px; z-index: 2; }
.ed-text { font-family: var(--ff); font-size: var(--fs); line-height: 1.2; color: var(--c); white-space: pre; padding: 0; outline: none; }
.ed-text.bold { font-weight: 700; }
.ed-text[contenteditable="true"], .ed-text[contenteditable="plaintext-only"] { cursor: text; user-select: text; background: rgba(229, 56, 28, .06); min-width: 1em; }
.kind-image img { width: 100%; height: 100%; display: block; pointer-events: none; }
.kind-rect, .kind-ellipse { border: var(--sw) solid var(--c); background: var(--f); }
.kind-ellipse { border-radius: 50%; }
.kind-highlight { background: var(--c); opacity: .45; mix-blend-mode: multiply; }
.kind-ink svg, .kind-line svg, .ed-live { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ed-live { color: var(--c); }
.kind-ink path, .kind-line path, .ed-live path { fill: none; stroke: var(--c); stroke-width: var(--sw); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.kind-field-text, .kind-field-check { border: 1.5px dashed #7C3AED; background: rgba(124, 58, 237, .08); }
.ed-field-name { position: absolute; left: 2px; bottom: 100%; font: 600 10px/1.4 var(--mono); color: #7C3AED; white-space: nowrap; }
.ed-h { position: absolute; right: -9px; bottom: -9px; width: 16px; height: 16px; border-radius: 4px; background: #fff; border: 2px solid var(--fire); cursor: nwse-resize; }
.ed-h::after { content: ""; position: absolute; inset: -10px; }
.ed-bar { position: absolute; left: 0; bottom: calc(100% + 8px); display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--ink); box-shadow: var(--shadow-lg); cursor: default; }
.ed-bar .icon-btn { width: 34px; height: 34px; color: #fff; }
.ed-bar .icon-btn:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.ed-obj.bar-below .ed-bar { bottom: auto; top: calc(100% + 8px); }
.ed-input { position: absolute; z-index: 1; margin: 0; padding: 0 .3em; border: 1px solid rgba(36, 87, 214, .45); border-radius: 2px; background: rgba(230, 237, 252, .7); font-family: Helvetica, Arial, sans-serif; font-size: var(--fs); color: #000; }
.ed-input:focus { outline: 2px solid #2457D6; background: #fff; }
textarea.ed-input { resize: none; line-height: 1.2; padding-top: .2em; }
.ed-input.type-check, .ed-input.type-radio { padding: 0; accent-color: #2457D6; cursor: pointer; }
.ed-doc.creating .ed-input { pointer-events: none; opacity: .6; }
.tool-palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tool-palette-3 { grid-template-columns: repeat(3, 1fr); }
.tool-palette button { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 60px; padding: 8px 4px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--paper); font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.tool-palette button:hover { border-color: var(--ink); }
.tool-palette button[aria-pressed="true"] { border-color: var(--fire); background: var(--fire-tint); color: var(--fire-deep); }
.btn[aria-pressed="true"] { border-color: var(--fire); background: var(--fire-tint); color: var(--fire-deep); }

/* Sign */
.sig-slot { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--paper); }
.sig-slot.empty { justify-content: center; gap: 8px; min-height: 64px; border-style: dashed; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.sig-slot.empty:hover { border-color: var(--fire); color: var(--fire-text); }
.sig-slot.armed { border-color: var(--fire); background: var(--fire-tint); }
.sig-slot-main { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 6px; border: 0; border-radius: 8px; background: none; font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.sig-slot-main img { max-width: 100%; max-height: 52px; object-fit: contain; }
.sig-dialog, .scan-dialog { width: min(96vw, 680px); max-height: 94vh; overflow: auto; padding: 20px; border: 0; border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-lg); }
.sig-dialog[open], .scan-dialog[open] { display: flex; flex-direction: column; gap: 14px; }
.sig-dialog::backdrop, .scan-dialog::backdrop { background: rgba(27, 21, 19, .6); }
.sig-head, .sig-foot, .sig-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sig-body { display: flex; flex-direction: column; gap: 12px; min-height: 230px; }
.sig-pad-wrap { position: relative; border-radius: 12px; border: 1px solid var(--line-2); background: var(--smoke-2); overflow: hidden; }
.sig-pad { width: 100%; aspect-ratio: 3; touch-action: none; cursor: crosshair; }
.sig-line { position: absolute; left: 8%; right: 8%; bottom: 24%; border-bottom: 1.5px dashed #C9BEB7; pointer-events: none; }
.sig-pad-wrap.checker { background: repeating-conic-gradient(#f3eeea 0% 25%, #fff 0% 50%) 0 0 / 16px 16px; display: flex; justify-content: center; padding: 12px; }
.sig-upload-preview { max-width: 100%; max-height: 180px; }
.sig-hands { display: grid; gap: 8px; }
.sig-hand { min-height: 64px; padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper); font-family: var(--hand); font-size: 36px; color: var(--swatch); text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.sig-hand[aria-checked="true"] { border-color: var(--fire); box-shadow: 0 0 0 2px var(--fire-tint); }
.sig-inks { display: flex; gap: 8px; }
.sig-ink { width: 32px; height: 32px; border-radius: 999px; border: 3px solid var(--paper); background: var(--swatch); box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; }
.sig-ink[aria-checked="true"] { box-shadow: 0 0 0 2px var(--fire); }

/* Compare */
.cmp-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 0; }
.cmp-files { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 12px; width: 100%; }
.cmp-slot { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; width: min(100%, 280px); min-height: 120px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); }
.cmp-slot.add-card { align-items: center; min-height: 120px; }
.cmp-vs { align-self: center; font-family: var(--display); font-weight: 800; color: var(--ash); }
.cmp-rows { display: flex; flex-direction: column; gap: 16px; }
.cmp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.cmp-head { position: sticky; top: 0; z-index: 3; padding: 8px 0; background: var(--smoke); font-size: 13px; font-weight: 600; }
.cmp-head div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-sheet { position: relative; }
.cmp-mark { position: absolute; z-index: 1; border-radius: 2px; mix-blend-mode: multiply; pointer-events: none; }
.cmp-mark.del { background: rgba(229, 56, 28, .35); box-shadow: 0 0 0 1px rgba(229, 56, 28, .6); }
.cmp-mark.ins { background: rgba(15, 122, 85, .3); box-shadow: 0 0 0 1px rgba(15, 122, 85, .6); }
.cmp-missing { display: flex; align-items: center; justify-content: center; aspect-ratio: .7727; border: 2px dashed var(--line-2); border-radius: 6px; color: var(--ash); font-size: 13px; }
.cmp-list { display: flex; flex-direction: column; gap: 4px; max-height: 360px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.cmp-item { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-left: 3px solid; border-radius: 6px; background: var(--smoke-2); font-size: 13px; text-align: left; cursor: pointer; }
.cmp-item.ins { border-color: #0F7A55; } .cmp-item.del { border-color: var(--fire); }
.cmp-item span:nth-child(2) { font-weight: 600; }
.cmp-item q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.cmp-ins-text { color: #0B5E41; } .cmp-del-text { color: var(--fire-text); }
.cmp-overlays { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cmp-overlay-wrap { width: min(100%, 760px); min-height: 200px; }
.cmp-overlay-wrap.loading { aspect-ratio: .7727; background: var(--paper); }
.cmp-overlay { width: 100%; height: auto; box-shadow: var(--shadow-lg); }
.cmp-label { margin-top: 6px; font-size: 12px; color: var(--ash); text-align: center; }

/* Scan */
.scan-page { border: 1px solid var(--line-2); cursor: pointer; }
.scan-stage { position: relative; align-self: center; max-width: 100%; touch-action: none; user-select: none; }
.scan-stage img { display: block; max-width: 100%; max-height: max(220px, 94vh - 330px); }
.scan-quad { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scan-quad polygon { fill: rgba(229, 56, 28, .12); stroke: var(--fire); stroke-width: 2; vector-effect: non-scaling-stroke; }
.scan-h { position: absolute; width: 28px; height: 28px; margin: -14px; border-radius: 999px; border: 3px solid var(--fire); background: rgba(255, 255, 255, .85); cursor: grab; touch-action: none; }
.scan-h::after { content: ""; position: absolute; inset: -10px; }
.scan-controls { display: flex; flex-direction: column; gap: 10px; }

/* Markdown */
.md-preview { margin: 0; padding: 20px 24px; max-height: 75vh; overflow: auto; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper); font: 13px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; }

/* Content for people and search engines */
.crumbs ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ash); }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: #B3A7A0; }
.crumbs a { color: var(--ash); text-decoration: none; }
.crumbs a:hover { color: var(--fire-text); text-decoration: underline; }
.seo { display: flex; flex-direction: column; gap: 20px; padding-block: 48px 72px; }
.seo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 32px 48px; margin-bottom: 16px; }
.seo-text { display: flex; flex-direction: column; gap: 12px; }
.seo-text p { margin: 0; max-width: 68ch; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.ticks { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 999px; background: var(--ok-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5E41' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat; }
.faq { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.faq details { border-radius: var(--r); border: 1px solid var(--line); background: var(--paper); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 14px 20px; font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex-shrink: 0; font-size: 22px; font-weight: 400; color: var(--ash); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0; padding: 0 20px 18px; max-width: 75ch; line-height: 1.6; color: var(--ink-2); }
.ember-link { color: #FFB4A3; font-weight: 600; }
.ember-link:hover { color: #fff; }
.dark-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; }
.footer-dir { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 28px 24px; padding-block: 40px 8px; }
.footer-head { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--ink); }
.footer-col ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.footer-col a { color: var(--ink-2); font-size: 14px; text-decoration: none; }
.footer-col a:hover { color: var(--fire-text); text-decoration: underline; }
.doc-page { display: flex; flex-direction: column; gap: 16px; max-width: 760px; padding-block: 56px 80px; }
.doc-page .crumbs ol { justify-content: flex-start; }
.doc-page section { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.doc-page p { margin: 0; line-height: 1.65; color: var(--ink-2); }

/* Converters: document preview */
.doc-preview { max-width: 760px; margin: 0 auto; padding: 48px 56px; border-radius: 4px; background: var(--paper); box-shadow: var(--shadow-lg); font-family: "Times New Roman", Georgia, serif; font-size: 16px; line-height: 1.55; color: #222; }
.doc-preview h2, .doc-preview h3, .doc-preview h4 { margin: 1.2em 0 .4em; font-family: Calibri, var(--font); color: #1F3864; line-height: 1.2; }
.doc-preview h2 { font-size: 26px; } .doc-preview h3 { font-size: 20px; } .doc-preview h4 { font-size: 17px; }
.doc-preview p { margin: 0 0 .8em; }
.doc-break { border: 0; border-top: 1px dashed var(--line-2); margin: 24px 0; }
.doc-table { max-width: 100%; overflow-x: auto; margin: 0 0 1em; }
.doc-table table { border-collapse: collapse; font-family: var(--font); font-size: 13px; }
.doc-table th, .doc-table td { padding: 6px 10px; border: 1px solid var(--line-2); text-align: left; white-space: nowrap; }
.doc-table th { background: var(--smoke-2); }
.xl-list { display: flex; flex-direction: column; gap: 16px; }
.xl-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); }
.xl-head { display: flex; justify-content: space-between; gap: 12px; }
@media (max-width: 600px) { .doc-preview { padding: 24px 20px; } }

/* 404 */
.nf { display: flex; flex-direction: column; align-items: center; gap: 28px; padding-block: 72px 88px; text-align: center; }
.nf-code { display: flex; align-items: center; gap: clamp(8px, 2vw, 20px); font-family: var(--display); font-size: clamp(120px, 20vw, 220px); font-weight: 800; letter-spacing: -.06em; line-height: .85; color: var(--ink); }
.nf-mark { width: .62em; height: .68em; transform: rotate(-8deg); }
.nf-copy { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.nf-title { font-size: clamp(36px, 5vw, 60px); }
.nf-search { display: flex; flex-direction: column; gap: 8px; width: min(100%, 520px); text-align: left; }
.nf-search label { font-size: 13px; font-weight: 600; color: var(--ash); }
.nf-input { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--paper); color: var(--ash); }
.nf-input:focus-within { outline: 3px solid var(--fire); outline-offset: 2px; }
.nf-input input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 17px; color: var(--ink); }
.nf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; width: 100%; max-width: 920px; }
.nf-tool { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 15px; font-weight: 600; text-align: left; text-decoration: none; }
.nf-tool:hover { color: var(--ink); border-color: #D5C9C2; box-shadow: var(--shadow); }
.nf-tool .tile { width: 40px; height: 40px; border-radius: 12px; }
.nf-tool .tile .icon { width: 22px; height: 22px; }
.nf-none { margin: 0; font-size: 15px; color: var(--ash); }

/* Server tools */
.turnstile { position: relative; z-index: 61; display: flex; justify-content: center; } /* above the busy overlay, in case it asks for a click */
.turnstile:empty { display: none; }
.url-form { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.url-form .input-xl { flex: 1 1 320px; min-height: 60px; padding: 14px 18px; border-radius: var(--r); font-size: 18px; }
.url-form .dz-hint { flex-basis: 100%; text-align: center; }
.choices { display: flex; flex-direction: column; gap: 8px; }
.choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper); text-align: left; cursor: pointer; }
.choice strong { font-size: 15px; color: var(--ink); }
.choice span { font-size: 13px; color: var(--ash); }
.choice:hover { border-color: var(--ink); }
.choice[aria-checked="true"] { border-color: var(--fire); box-shadow: 0 0 0 2px var(--fire-tint); }
.server-card { display: flex; align-items: center; gap: 14px; min-width: 0; }
.server-thumb { width: 56px; border-radius: 4px; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.server-explain { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 560px; margin: 40px auto; padding: 32px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); text-align: center; }
.server-explain h3 { margin: 0; font-size: 20px; }
.server-steps { display: flex; flex-direction: column; gap: 10px; margin: 0; padding-left: 20px; text-align: left; color: var(--ink-2); font-size: 15px; }
.check.small { font-size: 13px; color: var(--ash); padding: 0; }

/* Split range cards */
.range-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; align-items: start; }
.range-card { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 18px; border: 2px solid var(--fire); background: var(--paper); }
.range-card.invalid { border-color: var(--line-2); }
.range-card-head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; }
.range-pair { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 8px; border-radius: 12px; background: var(--smoke-2); }
.range-pair .page { width: 124px; }
.range-pair .page-btn, .range-pages .page-btn { padding: 2px; cursor: zoom-in; }
.ellipsis { font-size: 20px; font-weight: 700; color: #A39892; letter-spacing: .1em; }
.range-pages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.link-btn { align-self: flex-start; min-height: 40px; padding: 8px 4px; border: 0; background: none; color: var(--fire-text); font-size: 14px; font-weight: 600; cursor: pointer; }

/* Merge / rotate file cards */
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 16px; }
.file-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); cursor: grab; }
.file-card.dragging { opacity: .4; }
.file-card.drop-before { box-shadow: -4px 0 0 var(--fire); }
.file-card.drop-after { box-shadow: 4px 0 0 var(--fire); }
.file-card .thumb { box-shadow: none; }
.file-card-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card-meta { font-family: var(--mono); font-size: 11px; color: var(--ash); }
.file-card-tools { display: flex; justify-content: space-between; gap: 2px; }
.file-card-tools .icon-btn { width: 34px; height: 34px; }
.order-num { position: absolute; top: -8px; left: -8px; z-index: 3; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: #fff; font-family: var(--mono); font-size: 12px; line-height: 26px; text-align: center; }
.add-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 230px; border-radius: 16px; border: 2px dashed #D5C9C2; background: transparent; color: var(--ink-2); font-weight: 600; cursor: pointer; }
.add-card:hover { border-color: var(--fire); color: var(--fire-text); }

/* Busy & done */
.busy { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: rgba(250, 248, 246, .92); font-size: 18px; font-weight: 600; }
.spinner { width: 48px; height: 48px; border-radius: 50%; border: 4px solid var(--fire-tint); border-top-color: var(--fire); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.done { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-block: 72px; text-align: center; }
.done-title { font-size: clamp(36px, 5vw, 56px); }
.done-title:focus { outline: none; }
.done-files { display: flex; flex-direction: column; gap: 6px; width: min(100%, 520px); margin: 0; padding: 0; list-style: none; }
.done-files li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--paper); border: 1px solid var(--line); font-size: 14px; }
.done-files a { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Preview dialog */
.preview { width: min(96vw, 1100px); height: min(94vh, 1200px); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--smoke); box-shadow: var(--shadow-lg); color: var(--ink); }
.preview[open] { display: flex; flex-direction: column; }
.preview::backdrop { background: rgba(27, 21, 19, .6); }
.pv-head, .pv-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--paper); }
.pv-head { border-bottom: 1px solid var(--line); }
.pv-foot { border-top: 1px solid var(--line); }
.pv-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-tools { display: flex; align-items: center; gap: 4px; }
.pv-zoom { min-width: 52px; text-align: center; font-family: var(--mono); font-size: 13px; }
.pv-stage { flex: 1; overflow: auto; padding: 24px; }
.pv-page { position: relative; margin: 0 auto; background: #fff; box-shadow: var(--shadow-lg); }
.pv-page canvas { width: 100%; height: 100%; }

/* pdf.js text layer (selectable text over the canvas), from pdfjs-dist/web/pdf_viewer.css.
   The page element sets --total-scale-factor. */
.textLayer { color-scheme: only light; position: absolute; text-align: initial; inset: 0; overflow: clip; opacity: 1; line-height: 1; letter-spacing: normal; word-spacing: normal; -webkit-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; caret-color: CanvasText; z-index: 0;
  --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size)); }
.textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; user-select: text; }
.textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) { z-index: 1; --font-height: 0; font-size: calc(var(--text-scale-factor) * var(--font-height)); --scale-x: 1; --rotate: 0deg; transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.textLayer .markedContent { display: contents; }
.textLayer span[role="img"] { user-select: none; cursor: default; }
.textLayer ::selection { background: rgba(229, 56, 28, .3); color: transparent; }
.textLayer br::selection { background: transparent; }
.textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; user-select: none; }
.textLayer.selecting .endOfContent { top: 0; }

@media (max-width: 720px) {
  .header-privacy { display: none; }
  .ws-side { border-left: 0; border-top: 1px solid var(--line); }
  .hero { padding-block: 48px 24px; }
  .intro { padding-block: 40px; }
  .dropzone .btn-xl { min-width: 0; width: 100%; }
}