/* ============================================================================
   CS PDF — design system
   Loaded after tw.css. Tailwind utilities stay available because pdftools.js
   injects them into the tool workspace at runtime; everything authored by hand
   uses the cs- classes below.
   ========================================================================== */

:root {
  /* neutrals — warm graphite, calmer than pure slate */
  --cs-0:   #ffffff;
  --cs-25:  #fbfaf9;
  --cs-50:  #f6f5f3;
  --cs-100: #edebe8;
  --cs-200: #e0ddd9;
  --cs-300: #c9c4bf;
  --cs-400: #9a938d;
  --cs-500: #6f6863;
  --cs-600: #514b47;
  --cs-700: #3a3532;
  --cs-800: #262220;
  --cs-900: #171412;

  /* accent — a deeper sibling of the CodeSala coral, right for a document tool */
  --cs-a:      #c8402c;
  --cs-a-600:  #b03724;
  --cs-a-700:  #8f2c1d;
  --cs-a-300:  #e8a294;
  --cs-a-100:  #f7ddd7;
  --cs-a-50:   #fdf4f2;

  --cs-ok:   #15803d;
  --cs-ok-50:#f0f9f2;
  --cs-warn: #b45309;
  --cs-info: #1d4ed8;

  --cs-bg:      var(--cs-25);
  --cs-surface: var(--cs-0);
  --cs-raised:  var(--cs-0);
  --cs-line:    var(--cs-200);
  --cs-line-soft: var(--cs-100);
  --cs-text:    var(--cs-900);
  --cs-text-2:  var(--cs-600);
  --cs-text-3:  var(--cs-500);

  /* one radius ladder, used consistently */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* two shadows only */
  --sh-1: 0 1px 2px rgba(23,20,18,.06), 0 1px 1px rgba(23,20,18,.04);
  --sh-2: 0 12px 32px -12px rgba(23,20,18,.28), 0 2px 8px rgba(23,20,18,.06);

  --cs-max: 1140px;
  --cs-header: 60px;
  --ease: cubic-bezier(.2, .6, .3, 1);
}

.dark {
  --cs-bg:      #131110;
  --cs-surface: #1a1716;
  --cs-raised:  #201c1b;
  --cs-line:    #332e2c;
  --cs-line-soft: #272322;
  --cs-text:    #f4f2f1;
  --cs-text-2:  #bdb6b1;
  --cs-text-3:  #8d8680;
  --cs-a:       #e4614a;
  --cs-a-600:   #ef7259;
  --cs-a-300:   #b03724;
  --cs-a-100:   #3a201a;
  --cs-a-50:    #241614;
  --cs-ok:      #4ade80;
  --cs-ok-50:   #16251b;
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 16px 40px -16px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.3);
}

/* ---------- base ---------- */
body.cs {
  margin: 0;
  background: var(--cs-bg);
  color: var(--cs-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1, "ss01" 1;
}
.cs *, .cs *::before, .cs *::after { box-sizing: border-box; }
.cs h1, .cs h2, .cs h3, .cs h4 { margin: 0; font-weight: 640; letter-spacing: -.021em; line-height: 1.2; color: var(--cs-text); }
.cs p { margin: 0; }
.cs a { color: inherit; text-decoration: none; }
.cs img, .cs svg { display: block; max-width: 100%; }
.cs ul, .cs ol { margin: 0; padding: 0; list-style: none; }
.cs button, .cs input, .cs select, .cs textarea { font: inherit; color: inherit; }
.cs :focus-visible { outline: 2px solid var(--cs-a); outline-offset: 2px; border-radius: var(--r-xs); }
.cs ::selection { background: var(--cs-a); color: #fff; }

.cs-wrap { width: 100%; max-width: var(--cs-max); margin-inline: auto; padding-inline: 20px; }
.cs-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cs-skip { position: absolute; left: -9999px; z-index: 100; }
.cs-skip:focus { left: 16px; top: 12px; background: var(--cs-surface); border: 1px solid var(--cs-line); padding: 10px 14px; border-radius: var(--r-md); }

/* ---------- type scale ---------- */
.cs-display { font-size: clamp(2rem, 1.35rem + 2.1vw, 2.9rem); font-weight: 680; letter-spacing: -.03em; line-height: 1.08; }
.cs-h1 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.25rem); letter-spacing: -.026em; }
.cs-h2 { font-size: clamp(1.25rem, 1.1rem + .55vw, 1.5rem); }
.cs-h3 { font-size: 1.0625rem; font-weight: 620; }
.cs-body { font-size: .9375rem; color: var(--cs-text-2); }
.cs-lead { font-size: 1.0625rem; line-height: 1.6; color: var(--cs-text-2); }
.cs-sm { font-size: .8125rem; color: var(--cs-text-3); }
.cs-label { font-size: .6875rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--cs-text-3); }
.cs-mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: .8125rem; }

/* ---------- section rhythm ---------- */
.cs-section { padding: 56px 0; }
.cs-section--tight { padding: 36px 0; }
.cs-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.cs-section__head p { margin-top: 5px; }
.cs-rule { height: 1px; background: var(--cs-line-soft); border: 0; margin: 0; }

/* ---------- buttons ---------- */
.cs-btn {
  --btn-h: 38px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--btn-h); padding: 0 14px;
  border-radius: var(--r-sm); border: 1px solid transparent;
  font-size: .875rem; font-weight: 550; white-space: nowrap; cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.cs-btn svg { width: 16px; height: 16px; flex: none; }
.cs-btn--primary { background: var(--cs-a); color: #fff; }
.cs-btn--primary:hover { background: var(--cs-a-600); }
.cs-btn--primary:active { background: var(--cs-a-700); }
.cs-btn--secondary { background: var(--cs-surface); color: var(--cs-text); border-color: var(--cs-line); box-shadow: var(--sh-1); }
.cs-btn--secondary:hover { border-color: var(--cs-300); background: var(--cs-25); }
.dark .cs-btn--secondary:hover { background: var(--cs-raised); }
.cs-btn--ghost { background: transparent; color: var(--cs-text-2); }
.cs-btn--ghost:hover { background: var(--cs-100); color: var(--cs-text); }
.dark .cs-btn--ghost:hover { background: var(--cs-line-soft); }
.cs-btn--lg { --btn-h: 44px; padding: 0 20px; font-size: .9375rem; }
.cs-btn--block { width: 100%; }
.cs-btn[disabled], .cs-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.cs-link { color: var(--cs-a); font-weight: 520; }
.cs-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- icon tile ---------- */
.cs-tile {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--cs-a-50); color: var(--cs-a);
  border: 1px solid var(--cs-a-100);
}
.cs-tile svg { width: 17px; height: 17px; }
.cs-tile--lg { width: 44px; height: 44px; border-radius: var(--r-md); }
.cs-tile--lg svg { width: 22px; height: 22px; }
.cs-tile--neutral { background: var(--cs-100); color: var(--cs-text-2); border-color: var(--cs-line); }
.dark .cs-tile--neutral { background: var(--cs-line-soft); }

/* ---------- header ---------- */
.cs-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--cs-surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--cs-line-soft);
}
.cs-header__bar { display: flex; align-items: center; gap: 10px; height: var(--cs-header); }
.cs-brand { display: inline-flex; align-items: center; gap: 9px; margin-right: 6px; }
.cs-brand__logo { height: 22px; width: auto; }
.cs .cs-brand__logo--dark { display: none; }
.dark .cs .cs-brand__logo--light, .dark.cs .cs-brand__logo--light { display: none; }
.dark .cs .cs-brand__logo--dark, .dark.cs .cs-brand__logo--dark { display: block; }
.cs-brand__div { width: 1px; height: 18px; background: var(--cs-line); }
.cs-brand__name { font-size: .9375rem; font-weight: 640; letter-spacing: -.015em; }
.cs-brand__name em { font-style: normal; color: var(--cs-a); }

.cs-nav { display: flex; align-items: center; gap: 2px; }
.cs-nav__item { position: relative; }
.cs-nav__link {
  display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 11px;
  border-radius: var(--r-sm); font-size: .875rem; font-weight: 500; color: var(--cs-text-2);
  background: none; border: 0; cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.cs-nav__link:hover, .cs-nav__item[aria-expanded="true"] .cs-nav__link { background: var(--cs-100); color: var(--cs-text); }
.dark .cs-nav__link:hover { background: var(--cs-line-soft); }
.cs-nav__link[aria-current="page"] { color: var(--cs-text); }
.cs-nav__link svg { width: 12px; height: 12px; opacity: .7; transition: transform .18s var(--ease); }
.cs-nav__item.is-open .cs-nav__link svg { transform: rotate(180deg); }

.cs-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 470px; padding: 8px;
  background: var(--cs-raised); border: 1px solid var(--cs-line); border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.cs-nav__item.is-open .cs-menu { opacity: 1; visibility: visible; transform: none; }
.cs-menu__link { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: var(--r-sm); }
.cs-menu__link:hover { background: var(--cs-50); }
.dark .cs-menu__link:hover { background: var(--cs-line-soft); }
.cs-menu__t { font-size: .875rem; font-weight: 560; }
.cs-menu__d { font-size: .75rem; color: var(--cs-text-3); line-height: 1.4; margin-top: 1px; }
.cs-menu__foot { grid-column: 1 / -1; margin-top: 4px; padding: 9px 10px 4px; border-top: 1px solid var(--cs-line-soft); display: flex; justify-content: space-between; align-items: center; }

.cs-header__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cs-searchbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 9px 0 10px;
  background: var(--cs-50); border: 1px solid var(--cs-line); border-radius: var(--r-sm);
  color: var(--cs-text-3); font-size: .8125rem; cursor: pointer; min-width: 190px;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.dark .cs-searchbtn { background: var(--cs-line-soft); }
.cs-searchbtn:hover { border-color: var(--cs-300); }
.cs-searchbtn svg { width: 14px; height: 14px; }
.cs-kbd {
  margin-left: auto; display: inline-flex; align-items: center; gap: 1px;
  font-family: inherit; font-size: .6875rem; font-weight: 600; color: var(--cs-text-3);
  border: 1px solid var(--cs-line); border-radius: var(--r-xs); padding: 1px 5px; background: var(--cs-surface);
}
.cs-iconbtn {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: var(--r-sm); border: 1px solid transparent; background: none; color: var(--cs-text-2); cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.cs-iconbtn:hover { background: var(--cs-100); color: var(--cs-text); }
.dark .cs-iconbtn:hover { background: var(--cs-line-soft); }
.cs-iconbtn svg { width: 17px; height: 17px; }
.cs-only-dark { display: none; }
.dark .cs-only-dark { display: block; }
.dark .cs-only-light { display: none; }
.cs-burger { display: none; }

/* mobile drawer */
.cs-drawer { display: none; border-top: 1px solid var(--cs-line-soft); background: var(--cs-surface); padding: 10px 0 16px; }
.cs-drawer.is-open { display: block; }
.cs-drawer__group + .cs-drawer__group { margin-top: 14px; }
.cs-drawer__links { display: grid; gap: 2px; margin-top: 6px; }
.cs-drawer__links a { padding: 9px 10px; border-radius: var(--r-sm); font-size: .9375rem; }
.cs-drawer__links a:hover { background: var(--cs-50); }

/* ---------- hero ---------- */
.cs-hero { padding: 54px 0 20px; position: relative; overflow: hidden; }
.cs-hero::before {
  content: ""; position: absolute; inset: -140px 0 auto 0; height: 420px; z-index: 0;
  background: radial-gradient(52% 60% at 50% 0%, var(--cs-a-50), transparent 72%);
  pointer-events: none;
}
.dark .cs-hero::before { background: radial-gradient(52% 60% at 50% 0%, rgba(228,97,74,.10), transparent 72%); }
.cs-hero > * { position: relative; z-index: 1; }
.cs-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 52px; align-items: center; }
.cs-hero__copy { max-width: 33rem; }
.cs-hero__eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 5px; border: 1px solid var(--cs-line); border-radius: 100px; background: var(--cs-surface); font-size: .75rem; font-weight: 520; color: var(--cs-text-2); }
.cs-hero__eyebrow b { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 100px; background: var(--cs-a-50); color: var(--cs-a); font-weight: 600; font-size: .6875rem; }
.cs-hero h1 { margin-top: 16px; }
.cs-hero__sub { margin-top: 14px; max-width: 30rem; }
.cs-hero__actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cs-hero__note { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.cs-hero__note span { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--cs-text-3); }
.cs-hero__note svg { width: 14px; height: 14px; color: var(--cs-ok); }

/* the hero search is the real tool finder, not decoration */
.cs-finder { position: relative; margin-top: 4px; }
.cs-finder__field { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 8px 0 14px; background: var(--cs-surface); border: 1px solid var(--cs-line); border-radius: var(--r-md); box-shadow: var(--sh-1); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.cs-finder__field:focus-within { border-color: var(--cs-a); box-shadow: 0 0 0 3px var(--cs-a-100); }
.cs-finder__field > svg { width: 18px; height: 18px; color: var(--cs-text-3); flex: none; }
.cs-finder input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font-size: .9375rem; }
.cs-finder input::placeholder { color: var(--cs-text-3); }
.cs-chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.cs-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 100px; border: 1px solid var(--cs-line); background: var(--cs-surface); font-size: .8125rem; color: var(--cs-text-2); transition: border-color .15s var(--ease), color .15s var(--ease); }
.cs-chip:hover { border-color: var(--cs-a-300); color: var(--cs-a); }
.cs-chip svg { width: 13px; height: 13px; }

/* results list shared by hero finder and command palette */
.cs-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; background: var(--cs-raised); border: 1px solid var(--cs-line); border-radius: var(--r-md); box-shadow: var(--sh-2); padding: 6px; max-height: 340px; overflow-y: auto; }
.cs-results[hidden] { display: none; }
.cs-result { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; }
.cs-result[aria-selected="true"], .cs-result:hover { background: var(--cs-50); }
.dark .cs-result[aria-selected="true"], .dark .cs-result:hover { background: var(--cs-line-soft); }
.cs-result__t { font-size: .875rem; font-weight: 550; }
.cs-result__d { font-size: .75rem; color: var(--cs-text-3); margin-top: 1px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.cs-result__cat { margin-left: auto; font-size: .6875rem; color: var(--cs-text-3); border: 1px solid var(--cs-line); border-radius: var(--r-xs); padding: 1px 6px; flex: none; }
.cs-results__empty { padding: 22px 14px; text-align: center; }
.cs-results__empty p { font-size: .875rem; color: var(--cs-text-2); }
.cs-results__empty span { display: block; margin-top: 4px; font-size: .8125rem; color: var(--cs-text-3); }
.cs-results__head { padding: 8px 10px 4px; }

/* command palette */
.cs-palette { position: fixed; inset: 0; z-index: 90; display: none; }
.cs-palette.is-open { display: block; }
.cs-palette__scrim { position: absolute; inset: 0; background: rgba(23,20,18,.42); backdrop-filter: blur(2px); }
.dark .cs-palette__scrim { background: rgba(0,0,0,.6); }
.cs-palette__panel { position: relative; width: min(620px, calc(100vw - 32px)); margin: 12vh auto 0; background: var(--cs-raised); border: 1px solid var(--cs-line); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; }
.cs-palette__field { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 50px; border-bottom: 1px solid var(--cs-line-soft); }
.cs-palette__field svg { width: 17px; height: 17px; color: var(--cs-text-3); }
.cs-palette__field input { flex: 1; border: 0; background: none; outline: none; font-size: .9375rem; }
.cs-palette .cs-results { position: static; border: 0; box-shadow: none; max-height: 54vh; border-radius: 0; }
.cs-palette__foot { display: flex; gap: 14px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--cs-line-soft); font-size: .75rem; color: var(--cs-text-3); }
.cs-palette__foot b { font-weight: 500; }

/* ---------- workspace visual (hero right) ---------- */
.cs-ws { border: 1px solid var(--cs-line); border-radius: var(--r-lg); background: var(--cs-surface); box-shadow: var(--sh-2); overflow: hidden; }
.cs-ws__bar { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-bottom: 1px solid var(--cs-line-soft); background: var(--cs-25); }
.dark .cs-ws__bar { background: var(--cs-surface); }
.cs-ws__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cs-200); }
.dark .cs-ws__dot { background: var(--cs-line); }
.cs-ws__file { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--cs-text-2); margin-left: 6px; }
.cs-ws__file svg { width: 13px; height: 13px; color: var(--cs-a); }
.cs-ws__badge { margin-left: auto; font-size: .6875rem; color: var(--cs-ok); background: var(--cs-ok-50); border-radius: var(--r-xs); padding: 2px 7px; font-weight: 550; }
.cs-ws__body { display: grid; grid-template-columns: 82px 1fr 150px; min-height: 290px; }
.cs-ws__rail { border-right: 1px solid var(--cs-line-soft); padding: 12px 10px; display: grid; gap: 8px; align-content: start; background: var(--cs-25); }
.dark .cs-ws__rail { background: rgba(255,255,255,.015); }
.cs-ws__thumb { position: relative; aspect-ratio: 3/4; border: 1px solid var(--cs-line); border-radius: var(--r-xs); background: var(--cs-0); display: grid; align-content: start; gap: 3px; padding: 6px 5px; }
.dark .cs-ws__thumb { background: var(--cs-raised); }
.cs-ws__thumb i { display: block; height: 2px; border-radius: 1px; background: var(--cs-200); }
.dark .cs-ws__thumb i { background: var(--cs-line); }
.cs-ws__thumb i:nth-child(3) { width: 72%; }
.cs-ws__thumb i:nth-child(6) { width: 54%; }
.cs-ws__thumb--active { border-color: var(--cs-a); box-shadow: 0 0 0 2px var(--cs-a-100); }
.cs-ws__thumb span { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); font-size: .5625rem; color: var(--cs-text-3); background: var(--cs-25); padding: 0 4px; }
.dark .cs-ws__thumb span { background: var(--cs-surface); }
.cs-ws__page { padding: 18px 20px; display: grid; gap: 7px; align-content: start; }
.cs-ws__page b { display: block; height: 9px; width: 58%; border-radius: 2px; background: var(--cs-300); margin-bottom: 5px; }
.dark .cs-ws__page b { background: var(--cs-500); }
.cs-ws__page i { display: block; height: 5px; border-radius: 2px; background: var(--cs-100); }
.dark .cs-ws__page i { background: var(--cs-line-soft); }
.cs-ws__page i:nth-child(4) { width: 92%; }
.cs-ws__page i:nth-child(6) { width: 84%; }
.cs-ws__page i:nth-child(8) { width: 66%; }
.cs-ws__sel { position: relative; border-radius: var(--r-xs); background: var(--cs-a-50); box-shadow: 0 0 0 1px var(--cs-a-300) inset; height: 22px; display: flex; align-items: center; padding: 0 8px; font-size: .6875rem; color: var(--cs-a); }
.cs-ws__side { border-left: 1px solid var(--cs-line-soft); padding: 12px; display: grid; gap: 7px; align-content: start; }
.cs-ws__act { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid var(--cs-line); border-radius: var(--r-sm); font-size: .75rem; color: var(--cs-text-2); background: var(--cs-surface); }
.cs-ws__act svg { width: 14px; height: 14px; color: var(--cs-text-3); }
.cs-ws__act--on { border-color: var(--cs-a-300); background: var(--cs-a-50); color: var(--cs-a); }
.cs-ws__act--on svg { color: var(--cs-a); }
.cs-ws__meter { margin-top: 4px; padding: 9px 10px; border: 1px solid var(--cs-line); border-radius: var(--r-sm); }
.cs-ws__meter div { display: flex; justify-content: space-between; font-size: .6875rem; color: var(--cs-text-3); }
.cs-ws__meter u { text-decoration: none; color: var(--cs-ok); font-weight: 600; }
.cs-ws__track { height: 4px; border-radius: 2px; background: var(--cs-100); margin-top: 6px; overflow: hidden; }
.dark .cs-ws__track { background: var(--cs-line-soft); }
.cs-ws__track span { display: block; height: 100%; width: 34%; background: var(--cs-ok); border-radius: 2px; }


/* ---------- hero workspace: a short, looping product demo ----------
   One 14s story told four ways: a page is dragged to the top of the document,
   the selected page follows it, the action rail steps through the four jobs and
   the compress meter fills while Compress is the active one.
   Motion is CSS-only (transform/opacity), and it stops entirely for anyone who
   asks for reduced motion — the still frame below is the design's resting state. */
.cs-ws__rail { position: relative; }
.cs-ws__thumb { position: relative; z-index: 1; will-change: transform; }

@media (prefers-reduced-motion: no-preference) {
  /* page 3 lifts out, travels to the top, then settles back */
  .cs-ws__thumb:nth-child(3) { animation: cs-page-lift 14s var(--ease) infinite; }
  .cs-ws__thumb:nth-child(1),
  .cs-ws__thumb:nth-child(2) { animation: cs-page-shift 14s var(--ease) infinite; }

  /* the highlighted page keeps its highlight while it moves */
  .cs-ws__thumb.cs-ws__thumb--active { animation: cs-page-shift 14s var(--ease) infinite; }

  /* the rail steps through the four actions */
  .cs-ws__act { animation: cs-act 14s steps(1, end) infinite; }
  .cs-ws__act:nth-of-type(1) { animation-delay: 0s; }
  .cs-ws__act:nth-of-type(2) { animation-delay: 3.5s; }
  .cs-ws__act:nth-of-type(3) { animation-delay: 7s; }
  .cs-ws__act:nth-of-type(4) { animation-delay: 10.5s; }
  .cs-ws__act--on { animation-name: cs-act-first; }

  /* the meter only moves while Compress is the active job */
  .cs-ws__track span { animation: cs-meter 14s var(--ease) infinite; }
  .cs-ws__sel { animation: cs-sel 14s var(--ease) infinite; }
}

@keyframes cs-page-lift {
  0%, 8%      { transform: none; box-shadow: none; }
  14%         { transform: translateY(-6px) scale(1.04); box-shadow: var(--sh-2); }
  26%, 56%    { transform: translateY(calc(-200% - 16px)) scale(1.04); box-shadow: var(--sh-2); }
  64%         { transform: translateY(calc(-200% - 16px)) scale(1); box-shadow: none; }
  76%, 100%   { transform: none; box-shadow: none; }
}
@keyframes cs-page-shift {
  0%, 14%     { transform: none; }
  26%, 64%    { transform: translateY(calc(100% + 8px)); }
  76%, 100%   { transform: none; }
}
@keyframes cs-act {
  0%, 25%   { border-color: var(--cs-a-300); background: var(--cs-a-50); color: var(--cs-a); }
  25.01%, 100% { border-color: var(--cs-line); background: var(--cs-surface); color: var(--cs-text-2); }
}
@keyframes cs-act-first {
  0%, 25%   { border-color: var(--cs-a-300); background: var(--cs-a-50); color: var(--cs-a); }
  25.01%, 100% { border-color: var(--cs-line); background: var(--cs-surface); color: var(--cs-text-2); }
}
@keyframes cs-meter {
  0%, 6%    { width: 100%; }          /* original size */
  22%, 72%  { width: 34%; }           /* compressed, and it stays compressed */
  82%, 100% { width: 100%; }          /* resets with the page order, so the loop reads as one demo */
}
@keyframes cs-sel {
  0%, 30%   { opacity: 1; transform: none; }
  38%, 62%  { opacity: .35; transform: translateX(-2px); }
  70%, 100% { opacity: 1; transform: none; }
}

/* ---------- tool cards ---------- */
.cs-grid { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-tool {
  display: flex; gap: 11px; align-items: flex-start; padding: 13px;
  background: var(--cs-surface); border: 1px solid var(--cs-line); border-radius: var(--r-md);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.cs-tool:hover { border-color: var(--cs-a-300); box-shadow: var(--sh-1); }
.cs-tool:active { transform: translateY(1px); }
.cs-tool__b { min-width: 0; }
.cs-tool__n { font-size: .875rem; font-weight: 570; display: flex; align-items: center; gap: 6px; }
.cs-tool__n svg { width: 13px; height: 13px; opacity: 0; color: var(--cs-a); transition: opacity .15s var(--ease), transform .15s var(--ease); transform: translateX(-2px); }
.cs-tool:hover .cs-tool__n svg { opacity: 1; transform: none; }
.cs-tool__d { font-size: .8125rem; color: var(--cs-text-3); line-height: 1.45; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-tool__tag { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: .6875rem; color: var(--cs-text-3); }
.cs-tool__tag i { width: 5px; height: 5px; border-radius: 50%; background: var(--cs-ok); display: block; }
.cs-tool__tag--ai i { background: var(--cs-info); }
.cs-tool__tag--server i { background: var(--cs-warn); }

/* category filter bar */
.cs-filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.cs-filters::-webkit-scrollbar { display: none; }
.cs-filter {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; flex: none;
  border: 1px solid var(--cs-line); border-radius: var(--r-sm); background: var(--cs-surface);
  font-size: .8125rem; font-weight: 520; color: var(--cs-text-2); cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease);
}
.cs-filter svg { width: 14px; height: 14px; }
.cs-filter:hover { border-color: var(--cs-300); color: var(--cs-text); }
.cs-filter[aria-pressed="true"] { background: var(--cs-900); border-color: var(--cs-900); color: #fff; }
.dark .cs-filter[aria-pressed="true"] { background: var(--cs-0); border-color: var(--cs-0); color: var(--cs-900); }
.cs-filter[aria-pressed="true"] svg { color: currentColor; }
.cs-count { font-size: .6875rem; color: var(--cs-text-3); }
.cs-filter[aria-pressed="true"] .cs-count { color: rgba(255,255,255,.65); }
.dark .cs-filter[aria-pressed="true"] .cs-count { color: rgba(0,0,0,.5); }

/* ---------- panels / cards ---------- */
.cs-card { background: var(--cs-surface); border: 1px solid var(--cs-line); border-radius: var(--r-lg); }
.cs-card__pad { padding: 20px; }
.cs-note { display: flex; gap: 11px; padding: 14px 16px; border: 1px solid var(--cs-line); border-radius: var(--r-md); background: var(--cs-surface); }
.cs-note svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--cs-ok); }
.cs-note--info svg { color: var(--cs-info); }
.cs-note--warn svg { color: var(--cs-warn); }

/* ---------- breadcrumb ---------- */
.cs-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: .8125rem; color: var(--cs-text-3); }
.cs-crumb a:hover { color: var(--cs-a); }
.cs-crumb svg { width: 12px; height: 12px; opacity: .55; }
.cs-crumb [aria-current] { color: var(--cs-text-2); }

/* ---------- tool page ---------- */
.cs-toolhead { display: flex; gap: 14px; align-items: flex-start; margin: 18px 0 20px; }
.cs-toolhead h1 { font-size: clamp(1.55rem, 1.25rem + 1.1vw, 2rem); }
.cs-toolhead p { margin-top: 6px; max-width: 52ch; }
.cs-workspace { background: var(--cs-surface); border: 1px solid var(--cs-line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.cs-workspace__head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--cs-line-soft); background: var(--cs-25); }
.dark .cs-workspace__head { background: rgba(255,255,255,.02); }
.cs-workspace__head h2 { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--cs-text-2); }
.cs-workspace__engine { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--cs-text-3); }
.cs-workspace__engine i { width: 6px; height: 6px; border-radius: 50%; background: var(--cs-ok); display: block; }
.cs-workspace__engine--server i { background: var(--cs-warn); }
.cs-workspace__engine--ai i { background: var(--cs-info); }
.cs-workspace__body { padding: 18px; }

/* dropzone — the ids stay, the look changes */
#drop-zone, #ed-drop {
  display: grid; place-items: center; gap: 4px; padding: 40px 20px; cursor: pointer; text-align: center;
  border: 1.5px dashed var(--cs-300); border-radius: var(--r-md); background: var(--cs-25);
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.dark #drop-zone, #ed-drop { background: rgba(255,255,255,.02); border-color: var(--cs-line); }
#drop-zone:hover, #ed-drop:hover { border-color: var(--cs-a); background: var(--cs-a-50); }
#drop-zone.is-drag, #ed-drop.is-drag { border-color: var(--cs-a); background: var(--cs-a-50); border-style: solid; }
.cs-dz__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--cs-a); color: #fff; margin-bottom: 10px; }
.cs-dz__icon svg { width: 20px; height: 20px; }
#dz-title { font-size: .9375rem; font-weight: 570; }
#dz-sub { font-size: .8125rem; color: var(--cs-text-3); }
.cs-dz__hint { margin-top: 12px; font-size: .75rem; color: var(--cs-text-3); }

.cs-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; counter-reset: s; }
.cs-step { display: flex; gap: 10px; padding: 13px 14px; border: 1px solid var(--cs-line); border-radius: var(--r-md); background: var(--cs-surface); }
.cs-step__n { flex: none; width: 21px; height: 21px; border-radius: 50%; background: var(--cs-100); color: var(--cs-text-2); font-size: .6875rem; font-weight: 640; display: grid; place-items: center; }
.dark .cs-step__n { background: var(--cs-line-soft); }
.cs-step p { font-size: .8125rem; color: var(--cs-text-2); line-height: 1.5; }

/* long-form content */
.cs-prose { max-width: 68ch; }
.cs-prose h2 { font-size: 1.3125rem; margin-top: 34px; }
.cs-prose h2:first-child { margin-top: 0; }
.cs-prose h3 { margin-top: 22px; }
.cs-prose p { margin-top: 11px; color: var(--cs-text-2); line-height: 1.68; }
.cs-prose a { color: var(--cs-a); }
.cs-prose a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cs-prose ul { margin-top: 12px; display: grid; gap: 7px; }
.cs-prose ul li { position: relative; padding-left: 18px; color: var(--cs-text-2); font-size: .9375rem; }
.cs-prose ul li::before { content: ""; position: absolute; left: 3px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--cs-a-300); }

/* FAQ */
.cs-faq { display: grid; gap: 8px; }
.cs-faq details { border: 1px solid var(--cs-line); border-radius: var(--r-md); background: var(--cs-surface); }
.cs-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; cursor: pointer; font-size: .9375rem; font-weight: 540; list-style: none; }
.cs-faq summary::-webkit-details-marker { display: none; }
.cs-faq summary svg { width: 15px; height: 15px; flex: none; color: var(--cs-text-3); transition: transform .18s var(--ease); }
.cs-faq details[open] summary svg { transform: rotate(45deg); color: var(--cs-a); }
.cs-faq p { padding: 0 16px 15px; font-size: .875rem; color: var(--cs-text-2); line-height: 1.62; }

/* ---------- footer ---------- */
.cs-footer { border-top: 1px solid var(--cs-line-soft); background: var(--cs-surface); margin-top: 40px; }
.cs-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 34px; padding: 40px 0 28px; }
.cs-footer h4 { font-size: .75rem; font-weight: 620; letter-spacing: .06em; text-transform: uppercase; color: var(--cs-text-3); margin-bottom: 11px; }
.cs-footer a { display: block; padding: 4px 0; font-size: .875rem; color: var(--cs-text-2); }
.cs-footer a:hover { color: var(--cs-a); }
.cs-footer__bar { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; padding: 14px 0 22px; border-top: 1px solid var(--cs-line-soft); font-size: .8125rem; color: var(--cs-text-3); }
.cs-footer__bar a { display: inline; padding: 0; }

/* ---------- workspace controls injected by pdftools.js ----------
   The JS writes Tailwind utilities; these rules only align them to the
   design system (height, radius, colour) without changing the markup. */
#controls input[type="text"], #controls input[type="number"], #controls input[type="password"], #controls select, #controls textarea,
#file-list input, #controls .cs-input {
  border-radius: var(--r-sm) !important; border-color: var(--cs-line) !important; background: var(--cs-surface) !important;
}
#controls input:focus, #controls select:focus, #controls textarea:focus { border-color: var(--cs-a) !important; box-shadow: 0 0 0 3px var(--cs-a-100) !important; outline: none !important; }
#run-btn { background: var(--cs-a) !important; border-radius: var(--r-sm) !important; height: 44px !important; font-weight: 580 !important; }
#run-btn:hover { background: var(--cs-a-600) !important; }
#file-list > div { border-radius: var(--r-sm) !important; border-color: var(--cs-line) !important; }
#status, #result { font-size: .875rem; }
.bg-brand-500 { background-color: var(--cs-a) !important; }
.text-brand-500, .text-brand-600 { color: var(--cs-a) !important; }
.border-brand-500 { border-color: var(--cs-a) !important; }
.bg-brand-50 { background-color: var(--cs-a-50) !important; }

.cs-readable { max-width: 940px; margin-inline: auto; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .cs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-hero__grid { gap: 34px; }
  .cs-ws__body { grid-template-columns: 72px 1fr 132px; }
}
@media (max-width: 900px) {
  .cs-nav, .cs-searchbtn { display: none; }
  .cs-burger { display: grid; }
  .cs-hero { padding-top: 34px; }
  .cs-hero__grid { grid-template-columns: 1fr; gap: 30px; }
  .cs-hero__copy { max-width: none; }
  .cs-grid, .cs-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-steps { grid-template-columns: 1fr; }
  .cs-footer__grid { grid-template-columns: 1fr 1fr; gap: 26px; padding-top: 30px; }
  .cs-section { padding: 40px 0; }
  .cs-palette__panel { margin-top: 8vh; }
}
@media (max-width: 620px) {
  .cs-grid, .cs-grid--3 { grid-template-columns: 1fr; }
  .cs-ws__body { grid-template-columns: 62px 1fr; min-height: 230px; }
  .cs-ws__side { display: none; }
  .cs-footer__grid { grid-template-columns: 1fr; }
  .cs-section__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cs-toolhead { gap: 11px; }
  .cs-finder__field { height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs *, .cs *::before, .cs *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media print {
  .cs-header, .cs-footer, .cs-palette, .cs-hero__actions { display: none !important; }
}