::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(37,99,235,0.35); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(37,99,235,0.55); }

/* Hero rework (fold fix): tailwind-compiled.css is a pre-purged static build
   containing only classes present in the HTML when it was generated, so every
   one of these - none of them exotic, several are stock Tailwind sizes - was
   confirmed absent by grepping the compiled file directly before adding it
   here, same check this file's own conventions call for elsewhere. Values
   match Tailwind v3's real default scale (e.g. text-5xl is 3rem/1, text-6xl is
   3.75rem/1 - lg:text-7xl at 4.5rem/1 already existed in the compiled build,
   confirming the scale), so this isn't inventing a size, just restoring one
   the purge removed. (min-h-[160px] was in that list until a re-check found it
   already present in the compiled build, courtesy of the two textareas - the
   duplicate is gone rather than left to make this comment untrue.) */
.text-\[34px\] { font-size: 34px; }
.leading-\[1\.1\] { line-height: 1.1; }
.mb-8 { margin-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.pt-12 { padding-top: 3rem; }
@media (min-width: 640px) {
  .sm\:text-5xl { font-size: 3rem; line-height: 1; }
  .sm\:pt-14 { padding-top: 3.5rem; }
}
@media (min-width: 1024px) {
  .lg\:text-6xl { font-size: 3.75rem; line-height: 1; }
}
.hover\:underline:hover { text-decoration: underline; }
/* Pre-existing, found while auditing this pass rather than introduced by it:
   #diff-fallback-message has always carried this class with no rule for it. */
.italic { font-style: italic; }

/* Explicit, hand-written focus ring for the level slider. Not a Tailwind
   ring-* utility on purpose: two different attempts at that (an arbitrary-
   value class with an escaped comma, then the standard ring-2/ring-color/
   ring-offset combo) both silently failed to actually render a visible
   box-shadow, confirmed by testing real keyboard focus in a real browser,
   not just reading the compiled CSS and assuming it worked. This is a
   plain, literal box-shadow with nothing to go wrong in the cascade. */
.slider-focus-ring {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2563EB;
}

/* Visual diff panel ("What Changed"). Hand-written, not Tailwind utility
   classes: tailwind-compiled.css is a pre-purged static build that only
   contains classes already present in index.html at build time. New
   arbitrary-value classes (text-[#DC2626], line-through, etc.) generated
   or referenced only from JS/here would silently render unstyled. */
.pdfpanel-diff-toggle-group {
  display: inline-flex;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  overflow: hidden;
}
/* Same fix as .pdfpanel-diff-split.hidden / .pdfpanel-progress-row.hidden below:
   this rule and Tailwind's .hidden are equal-specificity single-class
   selectors, and this stylesheet loads after tailwind-compiled.css, so
   .hidden alone silently lost the cascade. */
.pdfpanel-diff-toggle-group.hidden { display: none; }
.pdfpanel-diff-toggle-btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  background: #fff;
  color: #6B7280;
  border: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.pdfpanel-diff-toggle-btn + .pdfpanel-diff-toggle-btn {
  border-left: 1px solid #E5E7EB;
}
.pdfpanel-diff-toggle-btn[aria-pressed="true"] {
  background: #2563EB;
  color: #fff;
}
.pdfpanel-diff-toggle-btn:not([aria-pressed="true"]):hover {
  background: #FAFBFC;
  color: #0B1220;
}

.pdfpanel-diff-panel {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #FAFBFC;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  padding: 6px 0;
}
.pdfpanel-diff-line {
  display: block;
  padding: 0 10px;
  white-space: pre-wrap;
  word-break: break-word;
  border-left: 3px solid transparent;
}
.pdfpanel-diff-line-empty {
  min-height: 1.55em;
}
.pdfpanel-diff-removed {
  background: rgba(220, 38, 38, 0.08);
  border-left-color: #DC2626;
  color: #B91C1C;
  text-decoration: line-through;
  text-decoration-color: rgba(185, 28, 28, 0.5);
}
.pdfpanel-diff-added {
  background: rgba(22, 163, 74, 0.08);
  border-left-color: #16A34A;
  color: #15803D;
}
.pdfpanel-diff-unchanged {
  color: #0B1220;
}

.pdfpanel-diff-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* Same cascade problem as .pdfpanel-progress-row above: without this,
   `display: grid` beat Tailwind's earlier-defined .hidden, so the split
   view rendered at the same time as the unified view and the
   Unified/Split toggle appeared to do nothing. */
.pdfpanel-diff-split.hidden { display: none; }
@media (max-width: 640px) {
  .pdfpanel-diff-split {
    grid-template-columns: 1fr;
  }
}

/* Worker progress row (Console card) */
.pdfpanel-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  margin-top: -2px;
}
/* Tailwind's .hidden is a single-class selector, same specificity as the
   rule above, but it's defined earlier in the cascade - so without this,
   `display: flex` silently wins and .hidden can never actually hide this
   row (it stayed permanently visible at 0%). Two classes = higher
   specificity = .hidden works as intended. */
.pdfpanel-progress-row.hidden { display: none; }
/* Cancel-only state: a slow pass under WORKER_LARGE_FILE_THRESHOLD never
   receives progress messages, so the bar would sit frozen at 0% and read as
   hung. Show the Cancel button by itself instead. */
.pdfpanel-progress-row.is-cancel-only .pdfpanel-progress-track,
.pdfpanel-progress-row.is-cancel-only .pdfpanel-progress-label { display: none; }
.pdfpanel-progress-track {
  flex: 1 1 0%;
  height: 6px;
  border-radius: 999px;
  background: #E5E7EB;
  overflow: hidden;
}
.pdfpanel-progress-fill {
  height: 100%;
  background: #2563EB;
  transition: width 0.2s ease;
}
.pdfpanel-progress-label {
  font-family: inherit;
  font-size: 10px;
  color: #6B7280;
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 2.5em;
  text-align: right;
}
.pdfpanel-progress-cancel {
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  color: #6B7280;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color .15s ease, border-color .15s ease;
}
.pdfpanel-progress-cancel:hover {
  color: #DC2626;
  border-color: rgba(220, 38, 38, 0.4);
}

/* Manual "Re-process" button: overrides the auto-process debounce */
.pdfpanel-reprocess-btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: #2563EB;
  background: #EFF4FF;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background-color .15s ease, opacity .15s ease;
}
.pdfpanel-reprocess-btn:hover {
  background: #E5EDFF;
}
.pdfpanel-reprocess-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Batch processing modal */
.pdfpanel-batch-zip-btn {
  width: 100%;
  text-align: center;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: #2563EB;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background-color .15s ease;
}
.pdfpanel-batch-zip-btn:hover {
  background: #1D4ED8;
}
.pdfpanel-batch-queue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
}
.pdfpanel-batch-queue-name {
  color: #0B1220;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.pdfpanel-batch-queue-status {
  flex-shrink: 0;
  font-size: 12px;
  color: #6B7280;
}
.pdfpanel-batch-queue-status.is-processing { color: #2563EB; }
.pdfpanel-batch-queue-status.is-done { color: #16A34A; }
.pdfpanel-batch-queue-status.is-error { color: #DC2626; }

/* Mobile: move the feedback FAB to bottom-left so it doesn't sit over
   controls (Log Collapsing toggle, etc.) that end up near the bottom-right
   of a narrow viewport. Pure repositioning, not a new component - lower
   risk than a collapsible-chip redesign for the same stated problem. */
@media (max-width: 640px) {
  #feedback-widget-button {
    right: auto;
    left: 1rem;
    bottom: 1rem;
  }
  #feedback-widget-card {
    right: auto;
    left: 1rem;
    bottom: 4.5rem;
  }
  /* Larger touch target for the level-slider dots, per spec ask */
  #dot-0, #dot-1, #dot-2 {
    width: 20px;
    height: 20px;
    margin-top: -3px;
  }
}

/* ============================================================
   Dark mode
   ============================================================
   Implemented by overriding the specific arbitrary-value colour
   classes the markup already uses (text-[#0B1220] etc.), scoped under
   a .dark class on <html>. NOT Tailwind's `dark:` variants: those
   simply aren't in tailwind-compiled.css, which is a pre-purged static
   build (verified by grepping it - zero `dark:` rules exist), so any
   dark:* class would render as nothing at all. Escaped selectors
   (\[ \# \]) are how CSS targets Tailwind's bracket syntax literally.

   Every rule is `.dark <selector>`, i.e. two classes, so it outranks
   the single-class original by specificity and wins regardless of
   source order - the exact cascade trap that broke the progress bar
   and diff toggle earlier in this project. */

.pdfpanel-theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  transition: color .15s ease;
}
.pdfpanel-theme-toggle:hover { color: #2563EB; }

html.dark body,
.dark .bg-\[\#FAF9F6\] { background-color: #0F141C; }
.dark .bg-white { background-color: #161C26; }
/* The sticky headers of the Documentation and Honest Numbers drawers use
   bg-white/95, a different literal class from bg-white, so it did not inherit
   the override above - the drawer title and close button sat on white while
   their own text had turned light. Exactly the bg-[#FAF9F6]/90 header bug,
   in a class the first audit missed by only scanning bracket-hex values.
   rgba at the same .95 alpha, since these headers are backdrop-blurred over
   scrolling content. */
.dark .bg-white\/95 { background-color: rgba(22,28,38,.95); }
.dark .bg-\[\#FAFBFC\] { background-color: #1B2230; }
.dark .bg-\[\#0B1220\] { background-color: #E6EAF2; }
.dark .bg-\[\#E5E7EB\] { background-color: #2A3242; }
.dark .bg-\[\#EFF4FF\] { background-color: #1E293B; }
.dark .bg-\[\#E5EDFF\] { background-color: #243044; }
/* The header uses bg-[#FAF9F6]/90 (with the opacity suffix), a literal
   class distinct from plain bg-[#FAF9F6] above and never covered by it -
   confirmed missing since the split-file dark mode work first landed, not
   something introduced later. Left uncovered, the header keeps its light
   background in dark mode while its own text correctly turns near-white,
   making the "pdfpanel" wordmark and nav links unreadable. rgba() at the
   same .9 alpha, not a flat hex, since the header also uses
   backdrop-blur-md and is meant to stay translucent over scrolled content. */
.dark .bg-\[\#FAF9F6\]\/90 { background-color: rgba(15,20,28,.9); }

.dark .text-\[\#0B1220\] { color: #E6EAF2; }
.dark .text-\[\#6B7280\] { color: #9AA5B4; }
.dark .placeholder-\[\#6B7280\]::placeholder { color: #7A8596; }
.dark .text-\[\#2563EB\] { color: #6BA1FF; }
/* The logo mark's rects use a literal fill="#2563EB" SVG attribute, not this
   text-[#2563EB] class, so it was never covered by the rule above. In dark
   mode "tight" correctly lightened to #6BA1FF while the icon stayed at the
   original saturated blue right next to it, two different shades of blue
   in the same lockup - confirmed by comparing computed colors in a real
   browser, not just guessing from the class list. */
.dark .pdfpanel-logo-mark rect { fill: #6BA1FF; }
/* Same gap as bg-[#FAF9F6]/90 above, same root cause: text-[#0B1220]/70 is
   the nav wrapper's own text color (Documentation, Honest Numbers, the
   theme-toggle icon via currentColor, and the mobile-menu button), a
   distinct literal class from plain text-[#0B1220]. Fixing only the header
   background above and not this would just trade one invisible-text bug
   for another - dark text on a now-dark header instead of light text on a
   still-light one. */
.dark .text-\[\#0B1220\]\/70 { color: rgba(230,234,242,.7); }

.dark .border-\[\#E5E7EB\] { border-color: #2A3242; }
.dark .border-\[\#9CA9BD\] { border-color: #3A4456; }

/* Custom components defined in this file need their own dark values,
   since they use literal colours rather than Tailwind classes. */
.dark .pdfpanel-diff-panel { background: #1B2230; border-color: #2A3242; }
.dark .pdfpanel-diff-unchanged { color: #E6EAF2; }
.dark .pdfpanel-diff-removed { background: rgba(248,113,113,.13); color: #F8A0A0; border-left-color: #F87171; }
.dark .pdfpanel-diff-added { background: rgba(74,222,128,.13); color: #86E5A6; border-left-color: #4ADE80; }
.dark .pdfpanel-diff-toggle-group { border-color: #2A3242; }
.dark .pdfpanel-diff-toggle-btn { background: #161C26; color: #9AA5B4; }
.dark .pdfpanel-diff-toggle-btn + .pdfpanel-diff-toggle-btn { border-left-color: #2A3242; }
.dark .pdfpanel-diff-toggle-btn[aria-pressed="true"] { background: #2563EB; color: #fff; }
.dark .pdfpanel-diff-toggle-btn:not([aria-pressed="true"]):hover { background: #1B2230; color: #E6EAF2; }
.dark .pdfpanel-progress-track { background: #2A3242; }
.dark .pdfpanel-progress-label { color: #9AA5B4; }
.dark .pdfpanel-progress-cancel { background: #161C26; border-color: #2A3242; color: #9AA5B4; }
.dark .pdfpanel-reprocess-btn { background: #1E293B; border-color: rgba(107,161,255,.3); color: #6BA1FF; }
.dark .pdfpanel-reprocess-btn:hover { background: #243044; }
.dark .pdfpanel-batch-queue-item { border-color: #2A3242; }
.dark .pdfpanel-batch-queue-name { color: #E6EAF2; }
.dark .pdfpanel-batch-queue-status { color: #9AA5B4; }
.dark .slider-focus-ring { box-shadow: 0 0 0 2px #0F141C, 0 0 0 4px #6BA1FF; }
.dark ::-webkit-scrollbar-thumb { background: rgba(107,161,255,.35); }

/* Footer changelog: a native <details>, not a modal, since this is meant
   to be low-ceremony ("could be a simple <details> section"). Positioned
   relative to <footer> (full viewport width, see the "relative" class
   added to it), not the inline summary/trigger: the trigger sits right of
   center in the footer row, so centering the panel under IT (rather than
   under the viewport) pushed it off the right edge on narrow screens -
   confirmed in a real headless-browser check at 390px width before this
   fix. left/right insets + margin:auto keep it inside [1rem, 100vw-1rem]
   on any screen width without needing a media query. Opens upward
   (bottom: 100%) since the footer is the last thing on the page. */
.pdfpanel-changelog summary {
  cursor: pointer;
  list-style: none;
  color: #6B7280;
}
.pdfpanel-changelog summary::-webkit-details-marker { display: none; }
.pdfpanel-changelog summary::marker { content: ''; }
.pdfpanel-changelog summary:hover,
.pdfpanel-changelog[open] summary { color: #2563EB; }
.pdfpanel-changelog-panel {
  position: absolute;
  bottom: 100%;
  left: 1rem;
  right: 1rem;
  margin: 0 auto 8px;
  width: auto;
  max-width: 340px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  text-align: left;
}
.pdfpanel-changelog-entry { margin-bottom: 10px; }
.pdfpanel-changelog-entry:last-child { margin-bottom: 0; }
.pdfpanel-changelog-date {
  display: block;
  font-weight: 600;
  color: #0B1220;
  margin-bottom: 2px;
}
.pdfpanel-changelog-text { display: block; color: #6B7280; line-height: 1.5; }
/* Matches the #6B7280 -> #9AA5B4 mapping the rest of the footer text gets;
   without it the trigger sat at ~3.9:1 on the dark background, visibly dimmer
   than the copyright line right beside it. */
.dark .pdfpanel-changelog summary { color: #9AA5B4; }
.dark .pdfpanel-changelog summary:hover,
.dark .pdfpanel-changelog[open] summary { color: #6BA1FF; }
.dark .pdfpanel-changelog-panel { background: #161C26; border-color: #2A3242; }
.dark .pdfpanel-changelog-date { color: #E6EAF2; }
.dark .pdfpanel-changelog-text { color: #9AA5B4; }

/* Honest Numbers comparison table.
   The table's intrinsic width is set by its widest single word - the
   "Hyper-Packed" column header, which cannot wrap - so at the drawer's 390px
   mobile width it needed 393px against 339px available and the last column was
   simply cut off, with `overflow-hidden` on the wrapper meaning there was no
   way to scroll to it. The wrapper is `overflow-x-auto` now so nothing is ever
   unreachable, and this makes it fit outright on a phone rather than leaving a
   horizontal scrollbar inside a vertically-scrolling drawer.

   Hand-written rather than Tailwind utilities because `text-[11px]` and
   `whitespace-nowrap` are both absent from the purged tailwind-compiled.css -
   they'd render as nothing. See CLAUDE.md on checking the compiled build for a
   literal class before assuming it exists. */
@media (max-width: 430px) {
  .pdfpanel-numbers-table th,
  .pdfpanel-numbers-table td {
    padding-left: 4px;
    padding-right: 4px;
    font-size: 11px;
  }
}


/* Header logo lockup.
   Sized here rather than with Tailwind utilities because the purged build carries
   only 10/11/13/42/46px text sizes and h-16, and none of those combinations lets
   the mark hold its own next to a 48px headline - which is what it has to do,
   since the logo is the brand and the headline is one sentence of copy.
   The whole lockup scales together at each breakpoint: grow the wordmark alone
   and the icon starts looking like an afterthought bolted to its left. */
/* Height is set by how much room the lockup needs, not the other way round. At
   96px an 81px lockup filled 84% of the bar and left 8px of clearance, which is
   what "jammed against the address bar" looks like. Headers conventionally run
   the logo at 50-60% of the bar; 128px puts this one at 63% with 23px above and
   below, which is roughly three times the air it had. */
.pdfpanel-header-bar { height: 128px; }
.pdfpanel-logo-mark { width: 56px; height: 60px; }
.pdfpanel-logo-name { font-size: 62px; }
.pdfpanel-logo-tagline { font-size: 14px; margin-top: 5px; }

@media (max-width: 1023px) {
  .pdfpanel-header-bar { height: 104px; }
  .pdfpanel-logo-mark { width: 42px; height: 45px; }
  .pdfpanel-logo-name { font-size: 46px; }
  .pdfpanel-logo-tagline { font-size: 12px; margin-top: 4px; }
}

/* A 62px wordmark plus a tagline will not fit beside a burger menu on a phone,
   so the lockup steps down rather than wrapping or overflowing the bar. */
@media (max-width: 639px) {
  .pdfpanel-header-bar { height: 80px; }
  .pdfpanel-logo-mark { width: 32px; height: 34px; }
  .pdfpanel-logo-name { font-size: 32px; }
  .pdfpanel-logo-tagline { font-size: 10px; margin-top: 2px; }
}

/* Focus rings for the header/hero's plain <button> elements (nav links, theme
   toggle, mobile menu button, CTA) - found missing during the header/hero
   accessibility audit. Same box-shadow technique as .slider-focus-ring above,
   not a Tailwind ring-* utility, for the same reason: this codebase already
   tried that twice for the slider and both attempts silently failed to render,
   confirmed in a real browser rather than assumed from the compiled CSS.
   :focus-visible rather than :focus, so a mouse click doesn't show a ring
   that's meant only for keyboard navigation. */
.pdfpanel-focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FAF9F6, 0 0 0 4px #2563EB;
  border-radius: 6px;
}
.dark .pdfpanel-focus-ring:focus-visible {
  box-shadow: 0 0 0 2px #0F141C, 0 0 0 4px #6BA1FF;
}

/* Skip link. Off-screen until focused, then jumps above the sticky header so
   a keyboard user can bypass nav straight to the hero (#main-content). Plain
   :focus, not :focus-visible - a skip link is only ever reached by keyboard
   tab order in practice, and :focus-visible support is patchier for that
   distinction than it is for the button ring above. */
.pdfpanel-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #0B1220;
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 6px 0;
  font-size: 14px;
  font-weight: 600;
}
.pdfpanel-skip-link:focus {
  left: 0;
}
.dark .pdfpanel-skip-link { background: #6BA1FF; color: #0F141C; }

/* #main-content gets tabindex="-1" (index.html) purely so activating the skip
   link above actually moves programmatic focus there, not just the scroll
   position - without it, document.activeElement stayed on <body> after the
   jump, confirmed in a real browser. It's never reached by Tab, only by the
   skip link, so a default browser outline would draw a box around the whole
   hero section with nothing to explain why - the scroll jump itself is the
   only feedback a sighted user needs. */
#main-content:focus { outline: none; }

/* Orphan-word protection on the hero's supporting sentence. text-wrap: pretty
   has no Tailwind utility in this build's purged output; it's also a pure
   progressive enhancement (unsupported browsers just get today's behavior),
   so a plain property in a named class is simpler than chasing a utility
   that isn't there. */
.pdfpanel-hero-copy { text-wrap: pretty; }

/* Hero proof chip: a compact, inline version of the same red-strikethrough/
   green diff colors the "What changed" panel uses further down the page
   (.pdfpanel-diff-removed / .pdfpanel-diff-added), not those classes directly -
   this needs a small inline pill, not a full-width block line, so it gets its
   own lightweight rule rather than inheriting that component's padding/
   border-left layout. Colors are the same values on purpose: this chip is
   meant to read as "the same thing the app's diff view does," not a new,
   unrelated shade of green. */
.pdfpanel-hero-proof {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  margin: 0 0 24px;
  padding: 10px 16px;
  background: #FAFBFC;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
}
.pdfpanel-hero-proof-removed {
  color: #B91C1C;
  text-decoration: line-through;
  text-decoration-color: rgba(185, 28, 28, .5);
}
.pdfpanel-hero-proof-arrow { color: #9CA3AF; }
.pdfpanel-hero-proof-added { color: #15803D; font-weight: 600; }

.dark .pdfpanel-hero-proof { background: #1B2230; border-color: #2A3242; }
.dark .pdfpanel-hero-proof-removed { color: #F8A0A0; text-decoration-color: rgba(248,113,113,.5); }
.dark .pdfpanel-hero-proof-arrow { color: #6B7280; }
.dark .pdfpanel-hero-proof-added { color: #86E5A6; }