/* ============================================================
   PocketPDF — house stylesheet
   Clean, light, calm: white surfaces, one warm accent, soft
   depth. Light is the default; dark is one click away.
   Written by hand — no framework, no build step.

   Tool scripts write inline styles against these variables:
   --ink, --muted, --accent, --paper, --line, --mono, --bad.
   Keep them defined.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  /* surfaces */
  --page:    #fbf7f3;
  --page-solid: #fbf7f3;
  --mesh-light:
    radial-gradient(1150px 780px at 8% -12%, rgb(255 122 74 / 26%) 0%, transparent 56%),
    radial-gradient(950px 720px at 94% -8%, rgb(255 176 32 / 21%) 0%, transparent 56%),
    radial-gradient(1000px 900px at 104% 46%, rgb(123 69 255 / 18%) 0%, transparent 60%),
    radial-gradient(880px 820px at -10% 86%, rgb(10 168 154 / 14%) 0%, transparent 60%),
    radial-gradient(720px 620px at 56% 108%, rgb(255 61 127 / 9%) 0%, transparent 62%),
    linear-gradient(166deg, #fffaf5 0%, #fbf7f3 44%, #f6f4fd 100%);
  /* dusk/night sky, driven by scroll progress (--sky-p) rather than the theme.
     Night keeps a *glance* of the sunset — warm orange glow low in the sky — instead of a flat black. */
  --sky-night: linear-gradient(180deg, #0a0818 0%, #1d1030 42%, #47204a 66%, #8a3a2c 84%, #c96a3b 100%);
  --paper:   #ffffff;   /* cards, inputs, anything you touch */
  --paper-2: #fbfafc;
  --paper-3: #ffffff;

  /* ink */
  --ink:     #0f1220;
  --ink-2:   #3f4454;
  --muted:   #4a5166;   /* darkened for WCAG AA contrast (4.5:1+) */

  /* lines */
  --line:        #e8ebf1;
  --line-strong: #d5dae5;
  --rule:        var(--line);

  /* the one strong accent — the old shop sign, polished */
  --accent:      #ed4426;
  --accent-2:    #c7300f;
  --accent-3:    #7b45ff;   /* violet — gradient partner, never body text */
  --accent-4:    #0aa89a;   /* teal   — status and background only      */
  --rose:        #ff3d7f;
  --amber:       #ffab1f;
  --accent-soft: #fef0ea;
  --hl:          #fff0e4;

  --good:      #15803d;
  --good-soft: #ecfdf3;
  --bad:       #d92d20;
  --bad-soft:  #fef2f1;

  /* category grading — cool blue for documents, violet for images, teal for
     media, amber for text, green for everyday tools. Alarm red is separate
     and only used by destructive tools. */
  /* light mode: toned down toward the calm pastel family (the dark theme
     already sits at the softer end of the scale) so tool colours stay calm
     on light surfaces too */
  --cat-pdf:      #4a6fd8;
  --cat-pdf-btn:  #274db8;
  --cat-pdf-soft: #eaf0ff;
  --cat-image:      #6d5ce0;
  --cat-image-btn:  #6d28d9;
  --cat-image-soft: #f3ecff;
  --cat-media:      #0f8f83;
  --cat-media-btn:  #0b726a;
  --cat-media-soft: #e6f7f4;
  --cat-text:      #a16207;
  --cat-text-btn:  #854d0e;
  --cat-text-soft: #fff7e6;
  --cat-util:      #4d7c0f;
  --cat-util-btn:  #3f6212;
  --cat-util-soft: #f1f8e4;
  --danger:      #c62828;
  --danger-btn:  #b3261e;
  --danger-soft: #fdecea;

  /* soft, modern depth */
  --sh-sm: 0 1px 1px rgb(15 18 32 / .02), 0 1px 2px rgb(15 18 32 / .04);
  --sh-md: 0 10px 30px -12px rgb(15 18 32 / .16), 0 2px 8px -4px rgb(15 18 32 / .08);
  --sh-lg: 0 30px 60px -24px rgb(15 18 32 / .22), 0 12px 28px -14px rgb(15 18 32 / .12);

  --r:    12px;
  --r-sm: 9px;
  --r-lg: 16px;

  --f-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serif:   "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-hand:    "Caveat", cursive;

  --mono: var(--f-mono);   /* alias kept for tool scripts     */
  --wrap: 1180px;
}

html[data-theme="dark"] {
  --page:    #0b0d13;
  --page-solid: #0b0d13;
  --paper:   #14171f;
  --paper-2: #191d26;
  --paper-3: #1a1e28;

  --ink:     #e9ebef;
  --ink-2:   #c6cbd4;
  --muted:   #a8b0bc;   /* lightened for WCAG AA contrast on dark bg */

  --line:        color-mix(in srgb, #262b34 88%, #fff 12%);
  --line-strong: #363d49;

  --accent:      #ff6b47;
  --accent-2:    #ff8f72;
  --accent-3:    #a98bff;
  --accent-4:    #32d6c3;
  --rose:        #ff5c95;
  --amber:       #ffc046;
  --accent-soft: rgb(255 107 71 / .13);
  --hl:          rgb(255 107 71 / .2);

  --good:      #4ade80;
  --good-soft: rgb(74 222 128 / .12);
  --bad:       #ff7b70;
  --bad-soft:  rgb(255 123 112 / .12);

  --cat-pdf:      #9db2ff;
  --cat-pdf-btn:  #3d56c9;
  --cat-pdf-soft: rgb(157 178 255 / .13);
  --cat-image:      #c9a7ff;
  --cat-image-btn:  #6d3fd1;
  --cat-image-soft: rgb(201 167 255 / .13);
  --cat-media:      #4fe0d0;
  --cat-media-btn:  #0f7c72;
  --cat-media-soft: rgb(79 224 208 / .12);
  --cat-text:      #f6c453;
  --cat-text-btn:  #9a5f05;
  --cat-text-soft: rgb(246 196 83 / .12);
  --cat-util:      #b4e86a;
  --cat-util-btn:  #4d7c0f;
  --cat-util-soft: rgb(180 232 106 / .12);
  --danger:      #ff9a91;
  --danger-btn:  #b3261e;
  --danger-soft: rgb(255 154 145 / .12);

  --sh-sm: 0 1px 2px rgb(0 0 0 / .45);
  --sh-md: 0 8px 22px -10px rgb(0 0 0 / .65), 0 2px 8px -2px rgb(0 0 0 / .4);
  --sh-lg: 0 30px 60px -24px rgb(0 0 0 / .8), 0 12px 28px -14px rgb(0 0 0 / .5);

  --mesh-light:
    radial-gradient(1000px 760px at 8% -10%, rgb(255 107 71 / 33%) 0%, transparent 56%),
    radial-gradient(880px 720px at 96% -6%, rgb(123 69 255 / 31%) 0%, transparent 56%),
    radial-gradient(900px 800px at 100% 52%, rgb(255 61 127 / 19%) 0%, transparent 60%),
    radial-gradient(820px 740px at -8% 92%, rgb(10 168 154 / 20%) 0%, transparent 60%),
    linear-gradient(166deg, #0d0f17 0%, #0b0d13 52%, #0c0a16 100%);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }   /* the hero glow may peek, but never scrolls */
[data-cat="pdf"]   { --cat: var(--cat-pdf);   --cat-btn: var(--cat-pdf-btn);   --cat-soft: var(--cat-pdf-soft); }
[data-cat="image"] { --cat: var(--cat-image); --cat-btn: var(--cat-image-btn); --cat-soft: var(--cat-image-soft); }
[data-cat="media"] { --cat: var(--cat-media); --cat-btn: var(--cat-media-btn); --cat-soft: var(--cat-media-soft); }
[data-cat="text"]  { --cat: var(--cat-text);  --cat-btn: var(--cat-text-btn);  --cat-soft: var(--cat-text-soft); }
[data-cat="util"]  { --cat: var(--cat-util);  --cat-btn: var(--cat-util-btn);  --cat-soft: var(--cat-util-soft); }

html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
body {
  font: 400 16px/1.72 var(--f-body);
  background: var(--mesh-light);
  background-attachment: fixed;
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -.01em;
  overflow-x: clip;
  isolation: isolate;   /* keeps the ambient background layer behind content */
}
/* scroll-driven night sky (body.sky-night) - the day/night theme stays independent */
/* night backdrop - fades in over the day sky (the day/night *theme* stays independent) */
.bg-anim .sky-night {
  position: absolute; inset: 0; background: var(--sky-night); opacity: 0;
  transition: opacity 2s ease; pointer-events: none; z-index: -1;
}
body.sky-night .bg-anim .sky-night { opacity: 1; }
/* a whisper of paper grain / dot grid so the colour never looks like a flat fill */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ink) 30%, transparent) .8px, transparent 1.1px);
  background-size: 24px 24px;
  opacity: .09;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 80%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 80%);
}
html[data-theme="dark"] body::after { opacity: .14; }

/* ---------- theme switch fade line ---------- */
.theme-fade {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 3000;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  transform: scaleX(0); transform-origin: left center; pointer-events: none;
}
html[data-theme="dark"] .theme-fade { background: linear-gradient(90deg, transparent, #93a5ff, #7c8cf0, transparent); }
.theme-fade.go { animation: themeSweep .9s cubic-bezier(.2, .8, .25, 1) both; }
@keyframes themeSweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- animation keyframes ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulseSoft {
  0%, 100% { opacity: .6; transform: scale(1); }
  50%      { opacity: .9; transform: scale(1.04); }
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(1deg); }
}
@keyframes glowMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  @keyframes fadeInUp { from,to { opacity: 1; transform: none; } }
  @keyframes fadeIn   { from,to { opacity: 1; } }
  @keyframes pulseSoft, float, glowMove { from,to { transform: none; opacity: 1; } }
}

/* ---------- reveal utilities (.js is set by an inline head script) ----------
   Every block stays hidden until JS adds .in. The data-anim attribute picks
   a different entrance, and JS assigns the top-to-bottom delays, so the page
   does not read as one long uniform fade. */
.js .reveal { opacity: 0; }
.js .reveal.in {
  animation: dpUp .82s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: var(--d, 0ms);
}
.js .reveal.in[data-anim="up"]    { animation-name: dpUp; }
.js .reveal.in[data-anim="down"]  { animation-name: dpDown; }
.js .reveal.in[data-anim="left"]  { animation-name: dpLeft; }
.js .reveal.in[data-anim="right"] { animation-name: dpRight; }
.js .reveal.in[data-anim="zoom"]  { animation-name: dpZoom; }
.js .reveal.in[data-anim="pop"]   { animation-name: dpPop; }
.js .reveal.in[data-anim="blur"]  { animation-name: dpBlur; }
.js .reveal.in[data-anim="mask"]  { animation-name: dpMask; }
.js .reveal.in[data-anim="tilt"]  { animation-name: dpTilt; }
/* once the entrance has played (or if it never could), lock the final state */
.js .reveal.in.shown {
  opacity: 1 !important;
  filter: none !important; clip-path: none !important;
  animation: none !important;
}

/* quick re-entry when scrolling back up into a block that was already read.
   The long first entrance would feel sluggish in reverse, so these are short,
   snappy and directional. */
.js .reveal.in.back { animation: dpBackTop .34s cubic-bezier(.16, 1, .3, 1) both; }
.js .reveal.in.back[data-anim="left"]  { animation: dpBackLeft .36s cubic-bezier(.16, 1, .3, 1) both; }
.js .reveal.in.back[data-anim="right"] { animation: dpBackRight .36s cubic-bezier(.16, 1, .3, 1) both; }
.js .reveal.in.back[data-anim="zoom"],
.js .reveal.in.back[data-anim="pop"]   { animation: dpBackZoom .34s cubic-bezier(.16, 1, .3, 1) both; }
.js .reveal.in.back[data-anim="mask"]  { animation: dpBackMask .38s cubic-bezier(.16, 1, .3, 1) both; }
.js .reveal.in.back[data-anim="blur"]  { animation: dpBackBlur .36s cubic-bezier(.16, 1, .3, 1) both; }
.js .reveal.in.back[data-anim="tilt"]  { animation: dpBackTilt .36s cubic-bezier(.16, 1, .3, 1) both; }

@keyframes dpBackTop {
  from { opacity: 0; transform: translate3d(0, -24px, 0) scale(.985); filter: blur(3px); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes dpBackLeft {
  from { opacity: 0; transform: translate3d(-32px, 0, 0) scale(.99); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
@keyframes dpBackRight {
  from { opacity: 0; transform: translate3d(32px, 0, 0) scale(.99); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
@keyframes dpBackZoom {
  from { opacity: 0; transform: translate3d(0, -8px, 0) scale(.94); filter: blur(4px); }
  65%  { opacity: 1; }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes dpBackMask {
  from { opacity: .25; transform: translate3d(0, -10px, 0); clip-path: inset(0 0 94% 0); }
  65%  { opacity: 1; }
  to   { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
@keyframes dpBackBlur {
  from { opacity: 0; transform: translate3d(0, -14px, 0); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes dpBackTilt {
  from { opacity: 0; transform: translate3d(-22px, -14px, 0) rotate(-.9deg) scale(.99); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

@keyframes dpUp    { from { opacity: 0; transform: translate3d(0, 34px, 0); } to { opacity: 1; transform: none; } }
@keyframes dpDown  { from { opacity: 0; transform: translate3d(0, -26px, 0); } to { opacity: 1; transform: none; } }
@keyframes dpLeft  { from { opacity: 0; transform: translate3d(-46px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes dpRight { from { opacity: 0; transform: translate3d(46px, 0, 0); }  to { opacity: 1; transform: none; } }
@keyframes dpZoom  { from { opacity: 0; transform: scale(.9); }  to { opacity: 1; transform: none; } }
@keyframes dpPop   { 0% { opacity: 0; transform: translate3d(0, 22px, 0) scale(.94); }
                     70% { opacity: 1; transform: translate3d(0, -3px, 0) scale(1.008); }
                     100% { opacity: 1; transform: none; } }
@keyframes dpBlur  { from { opacity: 0; filter: blur(14px); transform: scale(1.03); }
                     to   { opacity: 1; filter: blur(0); transform: none; } }
@keyframes dpMask  { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate3d(0, 12px, 0); }
                     to   { opacity: 1; clip-path: inset(0 0 -2% 0); transform: none; } }
@keyframes dpTilt  { from { opacity: 0; transform: perspective(900px) rotateX(-10deg) translate3d(0, 24px, 0); }
                     to   { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.in {
    opacity: 1 !important; transform: none !important;
    animation: none !important; filter: none !important; clip-path: none !important;
  }
}

/* word-by-word heading reveal (Batch 5). The words only hide once the
   .split-in class is added, so a failed observer can never leave a heading
   invisible. */
.split .w {
  display: inline-block; transform-origin: 0 80%;
}
.split.split-in .w {
  animation: dpWordUp .62s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 42ms + 40ms);
}
.split.split-in .w--unit { animation-name: dpWordPop; }
@keyframes dpWordUp {
  0% { opacity: 0; transform: translate3d(0, .42em, 0) rotate(1.2deg); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes dpWordPop {
  0% { opacity: 0; transform: none; }
  70% { opacity: 1; transform: none; }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .split .w { opacity: 1 !important; transform: none !important; animation: none !important; }
}

::selection { background: var(--hl); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); }
a:hover { text-decoration-color: var(--accent); }

.ic { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic--sm { width: 15px; height: 15px; }
.ic--lg { width: 34px; height: 34px; }

/* ---------- layout ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.section { padding-block: 56px; }
.section--tight { padding-block: 34px; }
.muted { color: var(--muted); }
.mono { font-family: var(--f-mono); }
.hand { font-family: var(--f-hand); font-size: 1.25em; }
.center { text-align: center; }
.hidden { display: none !important; }
.skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--page);
  padding: 10px 16px; border-radius: 0 0 var(--r) 0;
  text-decoration: none; font-weight: 600;
}
.skip:focus { left: 0; }

.label {
  font: 700 11px/1 var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--muted);
}
.label--block { display: block; margin-bottom: 8px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--page-solid, var(--page)) 76%, transparent);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  transition: background .25s ease, box-shadow .25s ease;
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent 2%, color-mix(in srgb, var(--accent) 55%, transparent) 24%,
    color-mix(in srgb, var(--rose) 45%, transparent) 48%, color-mix(in srgb, var(--accent-3) 45%, transparent) 74%, transparent 98%);
  opacity: .55; pointer-events: none;
}
.site-header.is-stuck {
  background: color-mix(in srgb, var(--page-solid, var(--page)) 90%, transparent);
  box-shadow: 0 12px 34px -22px rgb(38 24 60 / .45), 0 2px 10px -6px rgb(38 24 60 / .2);
}
.header-in { display: flex; align-items: center; gap: 26px; min-height: 66px; }
.brand {
  display: flex; align-items: center; gap: 11px;
  font: 750 19px/1 var(--f-display); letter-spacing: -.02em;
  text-decoration: none; flex: none;
}
.brand:hover { text-decoration: none; }
.brand .brand__mark {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 94%, #fff) 0%, var(--accent) 100%);
  color: #fff;
  border-radius: 11px;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / .12), 0 1px 2px rgb(232 72 43 / 10%), var(--sh-sm);
  font: 700 17px/1 var(--f-display);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, #fff);
}
.brand .brand__sub {
  font: 500 9.5px/1.3 var(--f-mono); text-transform: uppercase;
  letter-spacing: .13em; color: var(--muted); margin-top: 2px;
}
.nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.nav a {
  font: 570 13.5px/1 var(--f-body);
  text-decoration: none; padding: 9px 12px; border-radius: var(--r-sm);
}
.nav a:hover { background: var(--paper); color: var(--accent-2); }
.nav a[aria-current="page"] { background: var(--paper); color: var(--accent-2); box-shadow: var(--sh-sm); }
.nav-drop { position: relative; }
/* keeps the pointer inside the menu while it crosses the gap to the panel */
.nav-drop.is-open::after {
  content: ""; position: absolute; left: -12px; right: -12px; top: 100%;
  height: 14px; z-index: 55;
}
.nav-drop__btn {
  font: 570 13.5px/1 var(--f-body); color: var(--ink);
  background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  padding: 9px 11px; border-radius: var(--r-sm);
}
.nav-drop__btn:hover, .nav-drop.is-open > .nav-drop__btn { background: var(--paper); color: var(--accent-2); }
.nav-drop__caret {
  width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 4.5px solid currentColor; opacity: .65; transition: transform .2s ease;
}
.nav-drop.is-open .nav-drop__caret { transform: rotate(180deg); }
.nav-drop__panel {
  display: none; position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  width: min(700px, calc(100vw - 40px));
  max-height: calc(100dvh - 96px);
  overflow-y: auto; overscroll-behavior: contain;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--paper) 94%, transparent), var(--paper));
  border: 1px solid color-mix(in srgb, var(--line-strong) 75%, transparent);
  border-radius: 18px;
  box-shadow: 0 36px 80px -28px rgb(42 22 64 / .34), 0 14px 34px -20px rgb(42 22 64 / .22),
    inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent);
  padding: 20px 20px 14px; z-index: 60;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong)) transparent;
}
.nav-drop__panel::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--rose), var(--accent-3));
  border-radius: 18px 18px 0 0; opacity: .85;
}
.nav-drop__panel--small { width: min(680px, calc(100vw - 40px)); }
.nav-drop.is-open .nav-drop__panel { display: block; animation: navDropIn .18s ease-out; }
.nav-drop__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 20px; }
.nav-drop__panel--small .nav-drop__grid { grid-template-columns: repeat(3, 1fr); }
.nav-drop__col { display: grid; align-content: start; gap: 1px; }
.nav-drop__label {
  font: 700 10px/1 var(--f-mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); padding: 2px 9px 7px;
}
.nav-drop__col a {
  font: 550 13px/1.25 var(--f-body); padding: 7px 9px; border-radius: 8px;
  text-decoration: none; position: relative;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.nav-drop__col a:hover, .nav-drop__col a:focus-visible {
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
  color: var(--accent-2); transform: translateX(2px); text-decoration: none;
}
.nav-drop__all {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 13px; padding: 11px 10px 9px; border-top: 1px solid var(--line);
  font: 650 12.5px/1 var(--f-body) !important; color: var(--accent-2);
}
.nav-drop__all span { font-size: 15px; transition: transform .2s ease; }
.nav-drop__all:hover span { transform: translateX(3px); }
@keyframes navDropIn { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.nav-contact { margin-left: 4px; }
.nav-actions { display: flex; align-items: center; gap: 6px; }
.sound-btn, .theme-btn, .nav-toggle {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer;
}
.sound-btn:hover, .theme-btn:hover, .nav-toggle:hover { border-color: var(--line-strong); }
.sound-btn .ic, .theme-btn .ic { width: 17px; height: 17px; color: var(--muted); }
.sound-btn:hover .ic, .theme-btn:hover .ic, .nav-toggle:hover .ic { color: var(--accent); }
.sound-btn .i-volume { display: none; }
.sound-btn .i-volume-off { display: block; }
.sound-btn[aria-pressed="true"] { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.sound-btn[aria-pressed="true"] .ic { color: var(--accent); }
.sound-btn[aria-pressed="true"] .i-volume { display: block; }
.sound-btn[aria-pressed="true"] .i-volume-off { display: none; }
html[data-theme="dark"] .theme-btn .i-moon { display: none; }
html[data-theme="dark"] .theme-btn .i-sun { display: block; }
.theme-btn .i-sun { display: none; }
.nav-toggle { display: none; }

@media (max-width: 940px) {
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--page); border-bottom: 1px solid var(--line);
    padding: 12px 16px 18px; box-shadow: var(--sh-md);
  }
  .nav--open { display: flex; }
  .nav a { padding: 13px 12px; }
  .nav-actions { margin-top: 6px; }
  .nav-actions .theme-btn { margin-top: 0; }
  .nav-toggle { display: grid; }
  .header-in { position: relative; }
  .nav-drop { width: 100%; }
  .nav-drop__btn { width: 100%; justify-content: space-between; padding: 13px 12px; text-align: left; }
  .nav-drop__panel,
  .nav-drop__panel--small {
    display: none; position: static; transform: none; width: 100%;
    border: 0; box-shadow: none; background: var(--paper);
    padding: 6px 4px 10px; margin: 2px 0 6px; border-radius: var(--r-sm);
    max-height: none; overflow: visible;
  }
  .nav-drop.is-open .nav-drop__panel { display: block; animation: none; }
  .nav-drop.is-open::after { display: none; }
  .nav-drop__grid, .nav-drop__panel--small .nav-drop__grid { grid-template-columns: 1fr; gap: 4px; }
  .nav-drop__col a { padding: 9px 12px; }
  .nav-drop__all { margin-top: 6px; padding: 10px 12px 6px; }
  .nav-contact { margin-left: 0; }
}

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); margin-top: 64px; background: var(--paper); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; padding: 46px 0 30px; }
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; gap: 22px; } }
.footer-grid h3 { font: 700 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: 14px; }
.footer-grid ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.footer-grid a { text-decoration: none; font-size: 13.5px; color: var(--ink-2); }
.footer-grid a:hover { color: var(--accent-2); text-decoration: underline; }
.brand--footer { margin-bottom: 14px; }
.footer-blurb { font-size: 13.5px; color: var(--muted); max-width: 300px; }
.footer-note { border-top: 1px solid var(--line); padding: 18px 0 26px; display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; justify-content: space-between; }
.footer-note p { font: 400 11.5px/1.7 var(--f-mono); color: var(--muted); }
.running { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; }
.running i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 20%, transparent); animation: pulse 2.4s infinite; }
@keyframes pulse { 50% { opacity: .45; } }

/* ---------- buttons & controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 14px/1 var(--f-body);
  padding: 12px 18px; cursor: pointer;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: var(--sh-sm);
  text-decoration: none; user-select: none;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.btn:hover { background: var(--paper-2); border-color: var(--muted); text-decoration: none; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn--primary { background: radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, #fff 14%, var(--accent)) 0%, var(--accent) 100%); border-color: color-mix(in srgb, var(--accent) 40%, #fff); color: #fff; box-shadow: inset 0 -1px 0 rgb(0 0 0 / .14), 0 1px 2px rgb(232 72 43 / 10%), var(--sh-sm); }
.btn--primary:hover { background: radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, #fff 10%, var(--accent-2)) 0%, var(--accent-2) 100%); border-color: color-mix(in srgb, var(--accent-2) 40%, #fff); }
.btn--ghost { box-shadow: none; border-color: color-mix(in srgb, var(--line-strong) 70%, transparent); background: color-mix(in srgb, var(--paper) 96%, #fff); backdrop-filter: blur(6px) saturate(1.04); }
.btn--ghost:hover { background: var(--paper); border-color: var(--line-strong); box-shadow: var(--sh-sm); }
.btn--sm { padding: 8px 12px; font-size: 12.5px; border-radius: var(--r-sm); }
.btn--danger { color: var(--bad); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 6px 0 18px; }
.btn-row--center { justify-content: center; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); overflow: hidden; padding: 3px; gap: 3px; }
.seg button {
  padding: 7px 13px; background: transparent; border: 0; cursor: pointer;
  border-radius: 7px; color: var(--muted);
  font: 600 12.5px/1.2 var(--f-body);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--accent-2); box-shadow: var(--sh-sm); }

.field { display: grid; gap: 7px; }
.field > label, .field > .label { font: 700 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.field .hint { font: 400 12.5px/1.55 var(--f-body); color: var(--muted); }
.input, .select, textarea.input {
  width: 100%; padding: 10px 12px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 10px;
  font: 400 14px/1.5 var(--f-body);
  transition: border-color .15s, box-shadow .15s;
}
.input:hover, .select:hover { border-color: var(--muted); }
.input:focus, .select:focus, textarea.input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea.input { resize: vertical; min-height: 90px; font-family: var(--f-mono); font-size: 13px; line-height: 1.6; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235e6572' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
input[type="range"] { accent-color: var(--accent); width: 100%; }
.check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; margin-top: 2px; flex: none; }
.inline-num { display: flex; align-items: center; gap: 10px; }
.inline-num .input { width: 92px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- type ---------- */
h1, h2 { font-family: var(--f-serif); font-weight: 600; letter-spacing: -.022em; line-height: 1.1; }
h3 { font-family: var(--f-display); font-weight: 650; letter-spacing: -.018em; line-height: 1.3; }
h1 { font-size: clamp(32px, 4.4vw, 48px); font-weight: 600; letter-spacing: -.03em; }
h2 { font-size: clamp(25px, 3vw, 34px); }
h3 { font-size: 18.5px; }
mark, .hl {
  background: var(--accent-soft); color: var(--accent-2);
  padding: 0 7px; border-radius: 7px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.dek { font: 400 17px/1.6 var(--f-body); color: var(--muted); max-width: 640px; }
.rule-d { position: relative; height: 1px; background: var(--line); margin: 0; border: 0; }
.rule-d--first { margin: 44px 0 0; }
.rule-d::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  transform: translate(-50%,-50%);
  box-shadow: 0 0 0 4px var(--page);
}

/* ---------- hero ---------- */
.hero { padding-block: 72px 56px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 960px) { .hero { grid-template-columns: 1fr; gap: 44px; padding-top: 44px; } }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--paper) 78%, transparent); box-shadow: var(--sh-sm), inset 0 1px 0 #fff; backdrop-filter: blur(10px) saturate(1.2); }
.hero__eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-4); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-4) 18%, transparent); flex: none; animation: pulseSoft 3s ease-in-out infinite; }
.hero h1 { font-size: clamp(40px, 5.6vw, 68px); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; margin: 0 0 18px; }
.hero h1 mark { white-space: nowrap; padding: 0; box-shadow: none; }
.hero__dek { margin: 0 0 28px; font-size: 17.5px; max-width: 540px; color: var(--muted); line-height: 1.8; }
.hero__stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.hero__stats span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--paper) 76%, transparent); backdrop-filter: blur(8px) saturate(1.1); font-size: 12.5px; }
.hero__stats b { color: var(--ink); font-weight: 700; }

/* hero visual — a real glimpse of a tool running locally, not an empty box */
.hero > * { min-width: 0; }
.hero-visual { position: relative; min-width: 0; width: 100%; max-width: 560px; margin-inline: auto; min-height: 390px; display: flex; align-items: center; justify-content: center; isolation: isolate; }
.hero__blob {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background:
    radial-gradient(520px 420px at 26% 28%, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 62%),
    radial-gradient(480px 420px at 82% 74%, color-mix(in srgb, var(--accent-3) 22%, transparent) 0%, transparent 62%),
    radial-gradient(360px 300px at 70% 20%, color-mix(in srgb, var(--amber) 18%, transparent) 0%, transparent 62%);
  opacity: .7; pointer-events: none; z-index: -1; filter: blur(52px) saturate(1.5);
  animation: float 9s ease-in-out infinite;
}
.hero-visual::before {
  content: ""; position: absolute; inset: -10% -10%; z-index: -1;
  background: radial-gradient(55% 55% at 70% 30%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
  filter: blur(34px); opacity: .7;
}

/* the local-tool window */
.hv {
  --scene: var(--cat-pdf);
  position: relative; width: 100%; max-width: 430px;
  border-radius: 22px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--paper) 96%, #fff), var(--paper));
  border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
  box-shadow: 0 42px 90px -32px rgb(44 25 66 / .34), 0 16px 40px -24px rgb(44 25 66 / .22),
    inset 0 1px 0 #fff;
  transform: rotate(-1.4deg);
  overflow: hidden;
  animation: hvFloat 7.5s ease-in-out infinite;
}
.hv::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--scene), color-mix(in srgb, var(--scene) 50%, var(--rose)));
  transition: background .4s ease;
}
.hv[data-scene="image"] { --scene: var(--cat-image); }
.hv[data-scene="video"] { --scene: var(--cat-media); }
.hv[data-scene="qr"]    { --scene: var(--cat-util); }
/* each scene keeps its own accent while it slides out */
.hv__scene[data-scene="merge"] { --scene: var(--cat-pdf); }
.hv__scene[data-scene="image"] { --scene: var(--cat-image); }
.hv__scene[data-scene="video"] { --scene: var(--cat-media); }
.hv__scene[data-scene="qr"]    { --scene: var(--cat-util); }
@keyframes hvFloat { 0%,100% { transform: rotate(-1.4deg) translateY(0); } 50% { transform: rotate(-.7deg) translateY(-7px); } }
.hv__bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper-2) 82%, transparent); }
.hv__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.hv__dot:first-child { background: #ff6b5c; }
.hv__dot:nth-child(2) { background: #ffc14d; }
.hv__dot:nth-child(3) { background: #43c98a; }
.hv__url { margin-left: 8px; font: 500 10.5px/1 var(--f-mono); color: var(--muted); letter-spacing: .01em; }
.hv__local { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font: 600 9.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--good); }
.hv__local i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 18%, transparent); animation: pulseSoft 2.6s ease-in-out infinite; }
.hv__body { display: grid; grid-template-areas: "scene" "pager"; }
.hv__scene {
  grid-area: scene; padding: 16px 16px 0;
  opacity: 0; visibility: hidden; transform: translateX(44px);
  transition: opacity .34s ease, transform .46s cubic-bezier(.16, 1, .3, 1), visibility 0s .46s;
  will-change: transform, opacity;
}
.hv__scene.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .34s ease, transform .46s cubic-bezier(.16, 1, .3, 1), visibility 0s; }
.hv__scene.is-out {
  visibility: visible; opacity: 0; transform: translateX(-44px);
  transition: opacity .3s ease, transform .42s cubic-bezier(.4, 0, .2, 1), visibility 0s .42s;
}
.hv__scene.is-out .hv__progress i { width: var(--fill, 82%); animation: none; }
.hv__scene .hv__drop { animation: none; }
.hv__scene.is-on .hv__drop { animation: hvDropIn .5s cubic-bezier(.16, 1, .3, 1) both; }
.hv__drop { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 13px; border-radius: 13px; border: 1px dashed color-mix(in srgb, var(--scene) 34%, var(--line)); background: color-mix(in srgb, var(--scene) 5%, var(--paper)); }
.hv__file { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background: var(--paper); border: 1px solid var(--line); font: 550 11px/1 var(--f-body); color: var(--ink-2); box-shadow: var(--sh-sm); }
.hv__file .ic { width: 13px; height: 13px; color: var(--scene); }
.hv__add { display: inline-flex; align-items: center; padding: 6px 9px; border-radius: 8px; font: 600 11px/1 var(--f-body); color: var(--scene); background: color-mix(in srgb, var(--scene) 11%, transparent); }
.hv__row { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 2px 7px; font: 600 11.5px/1 var(--f-body); color: var(--ink-2); }
.hv__pct { font: 600 10.5px/1 var(--f-mono); color: var(--scene); }
.hv__progress { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 7%, transparent); overflow: hidden; }
.hv__progress i { display: block; height: 100%; width: 6%; border-radius: inherit; background: linear-gradient(90deg, var(--scene), color-mix(in srgb, var(--scene) 48%, var(--rose))); background-size: 220% 100%; }
.hv__scene.is-on .hv__progress i { animation: hvLoad 3s cubic-bezier(.2, .8, .2, 1) .12s both, glowMove 5s linear infinite; }
.hv__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; font: 500 10.5px/1 var(--f-mono); color: var(--muted); }
.hv__foot span { display: inline-flex; align-items: center; gap: 5px; }
.hv__foot .ic { color: var(--good); }
.hv__out { color: var(--scene); }
.hv__pager { grid-area: pager; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px 12px; }
.hv__pager span { width: 5px; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 22%, transparent); transition: width .3s ease, background .3s ease; }
.hv__pager span.is-on { width: 16px; background: var(--scene); }
@keyframes hvLoad { from { width: 6%; } to { width: var(--fill, 82%); } }
@keyframes hvDropIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.hv-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px; border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--line-strong) 65%, transparent);
  box-shadow: 0 14px 30px -16px rgb(44 25 66 / .3), inset 0 1px 0 #fff;
  backdrop-filter: blur(12px) saturate(1.3);
  font: 600 11px/1 var(--f-body); color: var(--ink-2); white-space: nowrap;
  animation: float 6.5s ease-in-out infinite;
}
.hv-chip .ic { width: 14px; height: 14px; color: var(--accent); }
.hv-chip--a { top: 4%; left: -1%; animation-delay: -1.6s; }
.hv-chip--b { right: -2%; top: 1%; animation-delay: -3.8s; }
.hv-chip--c { bottom: 2%; left: 2%; animation-delay: -2.6s; }
@media (max-width: 640px) { .hv-chip { display: none; } .hero-visual { min-height: 330px; } }

/* ---------- strip & panels ---------- */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 32px 0; }
.strip__item { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 20px; background: var(--paper); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 18px; box-shadow: var(--sh-sm); backdrop-filter: saturate(1.02); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.strip__item:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: color-mix(in srgb, var(--accent) 25%, var(--line-strong)); }
.strip__item .ic { color: var(--accent); width: 23px; height: 23px; margin-top: 0; }
.strip__item .ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 10%, var(--paper)); border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 12%, transparent); transition: all .22s ease; }
.strip__item:hover .ico { transform: translateY(-1px); box-shadow: 0 4px 10px color-mix(in srgb, var(--accent) 20%, transparent); }
.strip__item b { display: block; font: 650 15.5px/1.3 var(--f-body); letter-spacing: -.015em; margin-bottom: 6px; color: var(--ink); }
.strip__item p { font-size: 13px; color: var(--muted); line-height: 1.62; margin: 0; }
@media (max-width: 900px) { .strip { grid-template-columns: 1fr; } }

/* ---------- panel ---------- */
.panel { border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); background: var(--paper); border-radius: 18px; box-shadow: var(--sh-sm); padding: 24px; position: relative; backdrop-filter: saturate(1.02); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.panel:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: color-mix(in srgb, var(--accent) 25%, var(--line-strong)); }
.adv { padding: 0; }
.adv:hover { transform: none; }
.adv > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; font: 650 11.5px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.adv > summary::-webkit-details-marker { display: none; }
.adv > summary::after { content: "+"; font: 500 18px/1 var(--f-body); color: var(--accent); }
.adv[open] > summary { border-bottom: 1px solid var(--line); }
.adv[open] > summary::after { content: "—"; }
.adv__body { padding: 16px 18px 18px; }
.panel > .adv { border-top: 1px solid var(--line); margin-top: 14px; }
.panel > .adv > summary { padding: 12px 0 0; }
.panel > .adv[open] > summary { border-bottom: 0; padding-bottom: 2px; }
.panel > .adv > p, .panel > .adv > div { padding: 8px 0 0; }
.entity-ref { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.entity-ref code { font-family: var(--mono); color: var(--ink); font-size: 11.5px; }
.panel > .label { display: block; margin-bottom: 14px; font: 650 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.panel-note { font-size: 13.5px; color: var(--muted); }
.panel .fields { display: grid; gap: 16px; }
.panel hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

/* ---------- callout ---------- */
.callout { border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-left: 3px solid var(--accent); background: radial-gradient(600px 200px at 50% 0%, color-mix(in srgb, var(--accent) 6%, var(--paper)) 0%, var(--paper) 100%); border-radius: 16px; box-shadow: var(--sh-sm); padding: 20px 22px; font-size: 14.5px; line-height: 1.8; backdrop-filter: saturate(1.02); }
.callout p, .prose .callout p { margin: 0; }
@media (max-width: 760px) { .floatchip { display: none; } }

/* ---------- tool cards & grids ---------- */
.cat-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.cat-head h2 { display: flex; align-items: center; gap: 12px; letter-spacing: -.02em; }
.cat-head h2 .ic { color: var(--cat, var(--accent)); width: 24px; height: 24px; }
.sec-head { margin-bottom: 18px; }
.sec-head h2 { letter-spacing: -.02em; }
.sec-head .cat-dek { margin: 8px 0 0; }
.count-chip { font: 600 11px/1 var(--f-mono); letter-spacing: .04em; border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; background: var(--paper); color: var(--muted); }
[data-cat] .count-chip { color: var(--cat); border-color: color-mix(in srgb, var(--cat) 22%, var(--line)); background: var(--cat-soft); }
.cat-dek { color: var(--muted); font-size: 14.5px; max-width: 680px; margin: 10px 0 24px; }
.cat-dek--center { margin: 14px auto 24px; }

.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 14px; }
.tcard {
  position: relative; display: block; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); background: var(--paper);
  padding: 18px 18px 16px; border-radius: 18px;
  box-shadow: var(--sh-sm);
  --rx: 0deg; --ry: 0deg;
  transform: none;
  transform-origin: 50% 56%;
  transform-style: preserve-3d;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
  backdrop-filter: saturate(1.02);
  isolation: isolate;
}
.tcard.is-tilting { transition: box-shadow .22s ease, border-color .22s ease, background-color .22s ease; }
.tcard::before {
  content: ""; position: absolute; inset: 0; border-radius: 18px;
  padding: 1px; background: linear-gradient(135deg, var(--cat, var(--accent)), color-mix(in srgb, var(--cat, var(--accent)) 55%, var(--rose)));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out; mask-composite: exclude;
  pointer-events: none; opacity: 0; transition: opacity .22s ease;
}
.tcard:hover {
  transform: perspective(760px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-5px) scale(1.012);
  box-shadow: var(--sh-md), inset 0 1px 0 rgb(255 255 255 / .32), 0 0 0 1px color-mix(in srgb, var(--cat, var(--accent)) 25%, transparent);
  border-color: color-mix(in srgb, var(--cat, var(--accent)) 35%, var(--line-strong));
  background:
    radial-gradient(130% 90% at 15% 0%, color-mix(in srgb, var(--cat, var(--accent)) 11%, transparent), transparent 56%),
    linear-gradient(180deg, color-mix(in srgb, var(--paper) 92%, #fff) 0%, color-mix(in srgb, var(--paper) 94%, var(--cat, var(--accent)) 4%) 100%);
  text-decoration: none;
}
[data-theme="dark"] .tcard:hover { box-shadow: var(--sh-md), inset 0 1px 0 rgb(255 255 255 / .06), 0 0 0 1px color-mix(in srgb, var(--cat, var(--accent)) 28%, transparent); }
.tcard:hover::before { opacity: .82; }
.tcard__ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--cat, var(--accent)) 11%, var(--paper)); color: var(--cat, var(--accent)); border: 1px solid color-mix(in srgb, var(--cat, var(--accent)) 16%, transparent); box-shadow: 0 2px 6px color-mix(in srgb, var(--cat, var(--accent)) 12%, transparent); transition: transform .22s ease, box-shadow .22s ease; }
.tcard:hover .tcard__ico { transform: translateY(-4px) scale(1.08); box-shadow: 0 9px 18px color-mix(in srgb, var(--cat, var(--accent)) 28%, transparent); }
.tcard__ico .ic { width: 21px; height: 21px; transition: transform .22s ease; }
.tcard:hover .tcard__ico .ic { transform: scale(1.1); }
/* destructive tools keep the one alarm colour, even inside a calm category */
.tcard-wrap[data-tone="danger"] .tcard__ico {
  color: var(--danger);
  background: linear-gradient(145deg, color-mix(in srgb, var(--danger) 16%, var(--paper)), color-mix(in srgb, var(--danger) 4%, var(--paper)));
  border-color: color-mix(in srgb, var(--danger) 22%, transparent);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--danger) 14%, transparent);
}
.tcard-wrap[data-tone="danger"] .tcard:hover .tcard__ico { box-shadow: 0 4px 10px color-mix(in srgb, var(--danger) 22%, transparent); }
.tcard-wrap[data-tone="danger"] .tcard::before { background: linear-gradient(135deg, var(--danger), color-mix(in srgb, var(--danger) 55%, var(--rose))); }
.tcard-wrap[data-tone="danger"] .tcard:hover { border-color: color-mix(in srgb, var(--danger) 34%, var(--line-strong)); box-shadow: var(--sh-md), 0 0 0 1px color-mix(in srgb, var(--danger) 24%, transparent); }
.tcard-wrap[data-tone="danger"] .tcard:hover .tcard__t { color: var(--danger); }
.tcard-wrap[data-tone="danger"] .tcard:hover .tcard__go { background: var(--danger); }
.tcard__t { display: block; font: 650 15.5px/1.3 var(--f-body); letter-spacing: -.015em; margin-top: 12px; color: var(--ink); transition: color .22s ease; }
.tcard:hover .tcard__t { color: var(--cat, var(--accent-2)); }
.tcard__d { display: block; font: 400 13px/1.55 var(--f-body); color: var(--muted); margin-top: 5px; transition: color .22s ease; }
.tcard:hover .tcard__d { color: var(--ink-2); }
.tcard__go { position: absolute; right: 16px; top: 16px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--paper-2); color: var(--muted); transition: all .22s ease; }
.tcard:hover .tcard__go { background: var(--cat, var(--accent)); color: #fff; transform: translateX(2px); box-shadow: 0 2px 6px color-mix(in srgb, var(--cat, var(--accent)) 30%, transparent); }
.tcard__go .ic { width: 14px; height: 14px; stroke-width: 1.8; transition: transform .22s ease; }
.tcard:hover .tcard__go .ic { transform: translateX(1px); }
.tcard__d { display: block; font: 400 13px/1.55 var(--f-body); color: var(--muted); margin-top: 5px; }
.tcard__go { position: absolute; top: 16px; right: 16px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--cat, var(--accent)); color: #fff; opacity: 0; transition: opacity .14s, transform .14s; transform: translateX(-4px); }
.tcard__go .ic { width: 13px; height: 13px; stroke-width: 2.2; }
.tcard:hover .tcard__go { opacity: 1; transform: none; }
.tcard--wide { grid-column: span 2; }
@media (max-width: 620px) { .tcard--wide { grid-column: span 1; } }

/* ---------- tool page ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 500 12.5px/1.4 var(--f-body); color: var(--muted); padding-top: 30px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent-2); text-decoration: underline; }
.crumbs .sep { opacity: .5; }
.tool-head {
  padding: 20px 0 6px;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(300px, .78fr);
  gap: clamp(24px, 4.5vw, 64px);
  align-items: center;
}
.tool-head__copy { max-width: 760px; min-width: 0; }

/* tool-head h1: slightly looser word stagger than the generic split system
   (js/core.js splits headings; words stay visible until .split-in lands) */
.tool-head h1 {
  font-size: clamp(34px, 4.6vw, 52px);
  letter-spacing: -.032em;
  line-height: 1.05;
}
.tool-head h1.split.split-in .w {
  animation-delay: calc(var(--i, 0) * 55ms + 30ms);
}
/* the dek rises just after the heading; gated on html.js so a failed
   script load can never leave the description blank */
.js .tool-head .dek {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
  transition-delay: .22s;
}
.js .tool-head .dek.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .tool-head .dek { opacity: 1; transform: none; transition: none; }
}

.tool-kicker {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 11px;
  font: 700 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--cat, var(--accent));
}
.tool-kicker > span:last-child { color: var(--muted); font-weight: 600; letter-spacing: .07em; }
.tool-kicker__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cat, var(--accent));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat, var(--accent)) 15%, transparent);
}
@media (max-width: 900px) {
  .tool-head { grid-template-columns: 1fr; gap: 28px; }
  .tdemo { max-width: 470px; }
}
.trust { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); padding: 7px 13px;
  font: 650 11px/1 var(--f-body); text-transform: uppercase; letter-spacing: .06em;
}
.pill .ic { width: 13px; height: 13px; color: var(--muted); }
.pill--ok { border-color: color-mix(in srgb, var(--good) 35%, var(--line)); background: var(--good-soft); color: var(--good); }
.pill--ok .ic { color: var(--good); }
.pill--bad { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); background: var(--bad-soft); color: var(--bad); }
.pill--bad .ic { color: var(--bad); }

/* a small film of this exact tool's job: files drop in, the real option
   changes, the tool works, then Done. Decorative, so it is hidden from
   assistive tech. */
.tdemo {
  position: relative; width: 100%; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
  border-radius: 18px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--paper) 94%, var(--cat, var(--accent)) 3%), var(--paper));
  box-shadow: 0 26px 52px -30px rgb(44 25 66 / .3), var(--sh-sm), inset 0 1px 0 #fff;
  transform: rotate(.55deg);
  transition: transform .3s ease, box-shadow .3s ease;
}
.tdemo:hover { transform: rotate(0); box-shadow: 0 32px 58px -30px rgb(44 25 66 / .35), var(--sh-md), inset 0 1px 0 #fff; }
.tdemo::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--cat, var(--accent)), color-mix(in srgb, var(--cat, var(--accent)) 45%, var(--rose)));
}
html[data-theme="dark"] .tdemo {
  box-shadow: 0 26px 52px -30px rgb(0 0 0 / .7), var(--sh-sm), inset 0 1px 0 rgb(255 255 255 / .05);
}
html[data-theme="dark"] .tdemo:hover {
  box-shadow: 0 32px 58px -30px rgb(0 0 0 / .8), var(--sh-md), inset 0 1px 0 rgb(255 255 255 / .07);
}
.tdemo__bar { display: flex; align-items: center; gap: 6px; padding: 11px 13px; border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent); background: color-mix(in srgb, var(--paper-2) 78%, transparent); }
.tdemo__dots { display: inline-flex; gap: 4px; }
.tdemo__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.tdemo__dots i:first-child { background: #ff6b5c; }
.tdemo__dots i:nth-child(2) { background: #ffc14d; }
.tdemo__dots i:nth-child(3) { background: #43c98a; }
.tdemo__url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 9.5px/1 var(--f-mono); color: var(--muted); letter-spacing: .01em; }
.tdemo__local { display: inline-flex; align-items: center; gap: 4px; font: 600 8.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--good); }
.tdemo__local i { width: 5px; height: 5px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 16%, transparent); animation: pulseSoft 2.8s ease-in-out infinite; }
.tdemo__scene {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px 78px 14px minmax(0, 1fr);
  grid-template-areas: "drop flow core flowout result" "opts opts opts opts opts";
  align-items: center;
  gap: 7px 2px;
  padding: 15px 13px 12px;
}
.tdemo__drop { grid-area: drop; }
.tdemo__flow { grid-area: flow; }
.tdemo__core { grid-area: core; }
.tdemo__flow--out { grid-area: flowout; }
.tdemo__result { grid-area: result; }
.tdemo__opts { grid-area: opts; }

.tdemo__node {
  min-width: 0;
  position: relative;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--cat, var(--accent)) 15%, var(--line));
  background: var(--paper);
  box-shadow: var(--sh-sm);
  transition: opacity .3s ease, filter .3s ease, transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.tdemo__drop {
  display: grid;
  gap: 7px;
  align-content: start;
  min-height: 116px;
  padding: 8px 7px 9px;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--cat, var(--accent)) 30%, var(--line));
  background: color-mix(in srgb, var(--cat-soft, var(--paper-2)) 30%, var(--paper));
  overflow: hidden;
}
.tdemo__drop-head { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.tdemo__ico {
  flex: 0 0 auto;
  width: 24px; height: 24px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--cat-soft); color: var(--cat);
  border: 1px solid color-mix(in srgb, var(--cat) 18%, transparent);
}
.tdemo__ico .ic { width: 12px; height: 12px; }
.tdemo__drop-copy { display: grid; gap: 2px; min-width: 0; }
.tdemo__drop-copy b {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  font: 650 9.5px/1.25 var(--f-body); letter-spacing: -.01em; color: var(--ink);
}
.tdemo__drop-copy small {
  font: 600 7px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.tdemo__files { display: grid; gap: 4px; min-width: 0; position: relative; z-index: 2; }
.tdemo__file {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  padding: 4px 5px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--paper);
  box-shadow: 0 1px 0 rgb(255 255 255 / .5);
  font: 600 8.5px/1.2 var(--f-body); color: var(--ink);
}
html[data-theme="dark"] .tdemo__file { box-shadow: none; }
.tdemo__file .ic { flex: 0 0 auto; width: 11px; height: 11px; color: var(--cat); }
.tdemo__file > span { display: grid; gap: 1px; min-width: 0; }
.tdemo__file b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.tdemo__file small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 7px/1.2 var(--f-mono); color: var(--muted); }
.tdemo__pointer {
  position: absolute; right: 12px; bottom: 10px; z-index: 3;
  width: 17px; height: 21px; color: var(--ink); pointer-events: none;
  opacity: 0; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .35));
}
.tdemo__pointer::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  background: color-mix(in srgb, var(--cat, var(--accent)) 14%, transparent);
}
.tdemo__pointer svg {
  position: relative; width: 100%; height: 100%;
  fill: currentColor; stroke: var(--paper); stroke-width: 1.5; paint-order: stroke;
}
.tdemo__flow { display: flex; align-items: center; justify-content: center; gap: 3px; }
.tdemo__flow i {
  width: 3px; height: 3px; border-radius: 50%; background: var(--cat, var(--accent)); opacity: .25;
}
.tdemo__core {
  position: relative; display: grid; justify-items: center; gap: 3px; padding: 1px 0;
}
.tdemo__halo {
  position: absolute; top: -9px; width: 58px; height: 58px; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--cat, var(--accent)) 38%, transparent);
}
.tdemo__core-ico {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; position: relative; z-index: 1;
  background: var(--cat-btn, var(--accent)); color: #fff;
  box-shadow: 0 7px 16px -7px color-mix(in srgb, var(--cat-btn, var(--accent)) 80%, transparent), inset 0 1px 0 rgb(255 255 255 / .22);
}
.tdemo__core-ico .ic { width: 20px; height: 20px; }
.tdemo__core b {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  max-width: 84px; font: 700 8.5px/1.2 var(--f-body); letter-spacing: -.01em; color: var(--ink); text-align: center;
}
.tdemo__status {
  max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 7px/1.2 var(--f-mono); letter-spacing: .03em; color: var(--muted);
}
.tdemo__meter { position: relative; width: 70px; height: 3px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.tdemo__meter i { display: block; width: 5%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cat, var(--accent)), var(--rose)); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.tdemo__frame {
  display: none; position: absolute; inset: -5px; z-index: 0; pointer-events: none;
  border: 1.5px dashed color-mix(in srgb, var(--cat, var(--accent)) 55%, transparent);
  border-radius: 10px;
}
.tdemo__result {
  display: grid; justify-items: center; align-content: center; gap: 4px;
  min-height: 116px; padding: 9px 7px;
  border-style: solid;
  opacity: 1; transform: none;
}
.tdemo__result::before {
  content: "Output";
  display: none;
  font: 700 7px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.tdemo__result-ico {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: var(--cat-soft); color: var(--cat);
  border: 1px solid color-mix(in srgb, var(--cat) 18%, transparent);
}
.tdemo__result-ico .ic { width: 15px; height: 15px; }
.tdemo__result b {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  max-width: 100%; font: 700 9px/1.2 var(--f-body); color: var(--ink); text-align: center; overflow-wrap: anywhere;
}
.tdemo__result small {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 7.5px/1.2 var(--f-mono); color: var(--muted); text-align: center;
}
.tdemo__done {
  display: inline-flex; align-items: center; gap: 3px; margin-top: 1px;
  padding: 3px 6px; border-radius: 999px;
  background: var(--good-soft); color: var(--good);
  font: 700 7.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em;
  opacity: 1;
}
.tdemo__done .ic { width: 9px; height: 9px; }
.tdemo__opts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  min-height: 24px; padding: 1px 1px 0;
  opacity: .35; transition: opacity .3s ease;
}
.tdemo__opts-label {
  font: 700 7px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
}
.tdemo__opt {
  display: inline-flex; align-items: baseline; gap: 4px; min-width: 0;
  max-width: 100%; padding: 3px 6px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper);
  font: 600 8px/1.2 var(--f-body); color: var(--ink);
}
.tdemo__opt small {
  font: 600 6.5px/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.tdemo__opt b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.tdemo__opt-to { display: none; }
.tdemo[data-opt="to"] .tdemo__opt-from { display: none; }
.tdemo[data-opt="to"] .tdemo__opt-to { display: inline; }
.tdemo[data-opt="to"] .tdemo__opt { animation: tdemoOpt .45s ease; }
.tdemo__spark {
  position: absolute; top: 8px; right: 11px;
  color: var(--cat, var(--accent)); font-size: 11px; line-height: 1;
  opacity: .45;
}
.tdemo__steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; padding: 0 13px 8px; }
.tdemo__steps span {
  display: inline-flex; align-items: center; gap: 4px;
  font: 600 9px/1.25 var(--f-body); color: var(--muted); opacity: .6;
  transition: opacity .25s ease, color .25s ease;
}
.tdemo__steps b {
  display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--muted);
  font: 700 8px/1 var(--f-mono); transition: background .25s ease, color .25s ease;
}
.tdemo__steps span.is-active { opacity: 1; color: var(--ink); }
.tdemo__steps span.is-active b { background: var(--cat-btn, var(--accent)); color: #fff; }
.tdemo__steps span.is-done { opacity: .85; }
.tdemo__steps span.is-done b { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.tdemo__caption {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 0; padding: 0 13px 9px;
  font: 500 9px/1.45 var(--f-body); color: var(--ink);
}
.tdemo__caption b {
  flex: 0 0 auto; font: 700 7px/1.5 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--cat, var(--accent));
}
.tdemo__caption span { min-width: 0; opacity: .9; }
.tdemo__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 13px 10px; border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  font: 500 8.5px/1.2 var(--f-mono); letter-spacing: .02em; color: var(--muted);
}
.tdemo__foot span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.tdemo__foot .ic { width: 10px; height: 10px; color: var(--good); }
.tdemo__ctrl { display: none; align-items: center; justify-content: flex-end; gap: 6px; padding: 0 12px 10px; }
.js .tdemo__ctrl { display: flex; }
.tdemo__btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 80%, transparent);
  background: var(--paper); color: var(--muted);
  font: 600 10px/1 var(--f-body); cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.tdemo__btn:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--cat, var(--accent)) 40%, var(--line));
  background: color-mix(in srgb, var(--cat-soft, var(--paper-2)) 45%, var(--paper));
}
.tdemo__btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--cat, var(--accent)) 65%, transparent); outline-offset: 2px; }
.tdemo__btn .ic { width: 11px; height: 11px; }
.tdemo__btn:disabled { opacity: .4; cursor: default; }
.tdemo__btn:disabled:hover { color: var(--muted); border-color: color-mix(in srgb, var(--line-strong) 80%, transparent); background: var(--paper); }

/* the four-stage sequence: drop -> option -> working -> done */
.js .tdemo[data-phase] .tdemo__drop,
.js .tdemo[data-phase] .tdemo__core,
.js .tdemo[data-phase] .tdemo__result { transition: opacity .3s ease, filter .3s ease, transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.js .tdemo[data-phase] .tdemo__drop { opacity: .55; filter: saturate(.7); }
.js .tdemo[data-phase] .tdemo__core { opacity: .55; }
.js .tdemo[data-phase] .tdemo__result { opacity: 0; transform: translateY(7px) scale(.96); }
.js .tdemo[data-phase]:not([data-phase="4"]) .tdemo__result {
  opacity: .42; transform: none; border-style: dashed;
}
.js .tdemo[data-phase]:not([data-phase="4"]) .tdemo__result > * { opacity: 0; }
.js .tdemo[data-phase]:not([data-phase="4"]) .tdemo__result::before { display: block; }
.js .tdemo[data-phase] .tdemo__done { opacity: 0; }
.js .tdemo[data-phase] .tdemo__opts { opacity: .35; }
.js .tdemo[data-phase] .tdemo__meter i { width: 8%; }
.js .tdemo[data-phase="1"] .tdemo__drop {
  opacity: 1; filter: none; transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--cat, var(--accent)) 52%, var(--line));
  box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--cat, var(--accent)) 70%, transparent), var(--sh-sm);
}
.js .tdemo[data-phase="1"] .tdemo__core { opacity: .55; }
.js .tdemo[data-phase="2"] .tdemo__drop { opacity: .78; filter: none; }
.js .tdemo[data-phase="2"] .tdemo__core { opacity: 1; }
.js .tdemo[data-phase="2"] .tdemo__opts { opacity: 1; }
.js .tdemo[data-phase="2"] .tdemo__meter i { width: 26%; }
.js .tdemo[data-phase="2"] .tdemo__core-ico { animation: tdemoWork 1.1s ease-in-out infinite; }
.js .tdemo[data-phase="2"] .tdemo__halo { animation: tdemoRing 1.8s linear infinite; }
.js .tdemo[data-phase="3"] .tdemo__drop { opacity: .78; filter: none; }
.js .tdemo[data-phase="3"] .tdemo__core { opacity: .95; }
.js .tdemo[data-phase="3"] .tdemo__opts { opacity: 1; }
.js .tdemo[data-phase="3"] .tdemo__meter i { width: 78%; }
.js .tdemo[data-phase="4"] .tdemo__drop { opacity: .82; filter: none; }
.js .tdemo[data-phase="4"] .tdemo__core { opacity: .95; }
.js .tdemo[data-phase="4"] .tdemo__opts { opacity: 1; }
.js .tdemo[data-phase="4"] .tdemo__meter i { width: 100%; }
.js .tdemo[data-phase="4"] .tdemo__result {
  opacity: 1; transform: none;
  border-color: color-mix(in srgb, var(--cat, var(--accent)) 38%, var(--line));
  box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--cat, var(--accent)) 70%, transparent), var(--sh-sm);
}
.js .tdemo[data-phase="4"] .tdemo__done { opacity: 1; animation: tdemoDone .45s ease-out both; }
.js .tdemo[data-phase="4"] .tdemo__spark { opacity: 1; animation: tdemoSpark .7s ease-out both; }
.js .tdemo[data-phase="1"] .tdemo__file { animation: tdemoFileIn .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * .16s + .08s); }
.js .tdemo[data-phase="0"] .tdemo__file { opacity: 0; }
.js .tdemo[data-phase="1"] .tdemo__pointer { animation: tdemoPointer 1.05s cubic-bezier(.2, .8, .2, 1) both; }
.js .tdemo[data-phase="1"] .tdemo__flow:not(.tdemo__flow--out) i { animation: tdemoPhaseFlow .8s ease-in-out infinite; }
.js .tdemo[data-phase="3"] .tdemo__flow--out i { animation: tdemoPhaseFlow .8s ease-in-out infinite; }
.js .tdemo[data-phase="3"] .tdemo__core-ico { animation: tdemoWork 1.1s ease-in-out infinite; }
body[data-cat="pdf"] .tdemo[data-phase="3"] .tdemo__core-ico { animation: tdemoPageFlip 1.15s cubic-bezier(.4, 0, .2, 1); }
body[data-cat="image"] .tdemo[data-phase="3"] .tdemo__frame { display: block; animation: tdemoCrop 1.2s ease-in-out infinite; }
body[data-cat="media"] .tdemo[data-phase="3"] .tdemo__meter::after {
  content: ""; position: absolute; top: 0; left: 0; width: 6px; height: 100%; border-radius: 99px;
  background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--cat, var(--accent)) 70%, transparent);
  animation: tdemoPlayhead 1.35s linear infinite;
}
body[data-cat="text"] .tdemo[data-phase="3"] .tdemo__status::after {
  content: ""; display: inline-block; width: 1px; height: 8px; margin-left: 2px; vertical-align: -1px;
  background: var(--cat, var(--accent)); animation: tdemoCaret .8s steps(1) infinite;
}
body[data-cat="util"] .tdemo[data-phase="3"] .tdemo__core-ico { animation: tdemoGear 1.8s linear infinite; }

@keyframes tdemoFileIn { 0% { opacity: 0; transform: translate(18px, 12px) scale(.92); } 70% { opacity: 1; transform: translate(-2px, -1px) scale(1.02); } 100% { opacity: 1; transform: none; } }
@keyframes tdemoPointer { 0% { opacity: 0; transform: translate(18px, 14px) scale(.9); } 15% { opacity: 1; } 55% { opacity: 1; transform: translate(-18px, -18px) scale(1); } 78% { opacity: 1; transform: translate(-28px, -26px) scale(.95); } 100% { opacity: 0; transform: translate(-34px, -32px) scale(.9); } }
@keyframes tdemoOpt { 0% { transform: scale(.96); border-color: color-mix(in srgb, var(--cat, var(--accent)) 45%, var(--line)); } 100% { transform: scale(1); } }
@keyframes tdemoPhaseFlow { 0%, 100% { opacity: .18; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.35); } }
@keyframes tdemoWork { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes tdemoDone { 0% { opacity: 0; transform: scale(.4) rotate(-20deg); } 60% { opacity: 1; transform: scale(1.25) rotate(8deg); } 100% { opacity: 1; transform: none; } }
@keyframes tdemoSpark { 0% { opacity: 0; transform: scale(.4) rotate(-20deg); } 60% { opacity: 1; transform: scale(1.25) rotate(8deg); } 100% { opacity: 1; transform: none; } }
@keyframes tdemoPageFlip { 0%, 100% { transform: perspective(180px) rotateY(0); } 45% { transform: perspective(180px) rotateY(-38deg); } 55% { transform: perspective(180px) rotateY(38deg); } }
@keyframes tdemoCrop { 0%, 100% { inset: -3px; opacity: .5; } 50% { inset: -7px; opacity: 1; } }
@keyframes tdemoPlayhead { from { left: 0; } to { left: calc(100% - 6px); } }
@keyframes tdemoCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes tdemoGear { to { transform: rotate(360deg); } }
@keyframes tdemoRing { to { transform: rotate(360deg); } }

@media (max-width: 620px) {
  .tdemo__scene {
    grid-template-columns: 1fr;
    grid-template-areas: "drop" "core" "result" "opts";
    gap: 8px;
    padding: 13px 11px 10px;
  }
  .tdemo__flow { display: none; }
  .tdemo__drop, .tdemo__result { min-height: 0; }
  .tdemo__drop { padding: 9px 8px; }
  .tdemo__result { min-height: 86px; }
  .tdemo__core { padding: 4px 0 2px; }
  .tdemo__caption { font-size: 9.5px; }
  .tdemo__opt b { max-width: 210px; }
}

/* category grade on the working parts of a tool page */
body[data-cat] .board .panel:hover { border-color: color-mix(in srgb, var(--cat) 28%, var(--line-strong)); }
body[data-cat] .board .panel > .label { color: var(--cat); }
body[data-cat] .howto li:hover { border-color: color-mix(in srgb, var(--cat) 30%, var(--line)); }
body[data-cat] .howto__n {
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--cat) 22%, var(--paper)), var(--cat-soft));
  color: var(--cat); border-color: color-mix(in srgb, var(--cat) 26%, transparent);
}
body[data-cat] #app .btn--primary {
  background: linear-gradient(135deg, color-mix(in srgb, var(--cat-btn) 72%, #fff) 0%, var(--cat-btn) 58%, color-mix(in srgb, var(--cat-btn) 82%, #000) 100%);
  border-color: color-mix(in srgb, #fff 22%, transparent);
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--cat-btn) 80%, transparent), inset 0 1px 0 rgb(255 255 255 / .28);
}
body[data-cat] #app .btn--primary:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--cat-btn) 82%, #fff) 0%, color-mix(in srgb, var(--cat-btn) 92%, #000) 58%, color-mix(in srgb, var(--cat-btn) 68%, #000) 100%);
  box-shadow: 0 18px 36px -16px color-mix(in srgb, var(--cat-btn) 82%, transparent), inset 0 1px 0 rgb(255 255 255 / .32);
}
body[data-tone="danger"] #app .btn--primary {
  background: linear-gradient(135deg, color-mix(in srgb, var(--danger-btn) 72%, #fff) 0%, var(--danger-btn) 58%, color-mix(in srgb, var(--danger-btn) 76%, #000) 100%);
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--danger-btn) 78%, transparent), inset 0 1px 0 rgb(255 255 255 / .25);
}
body[data-tone="danger"] #app .btn--primary:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--danger-btn) 82%, #fff) 0%, color-mix(in srgb, var(--danger-btn) 90%, #000) 58%, color-mix(in srgb, var(--danger-btn) 62%, #000) 100%);
}
/* the settings panel is outside #app, so grade the whole working board */
body[data-cat] .board .input:focus, body[data-cat] .board .select:focus, body[data-cat] .board textarea.input:focus {
  border-color: var(--cat);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat) 14%, transparent);
}
body[data-cat] .board .check input,
body[data-cat] .board input[type="range"] { accent-color: var(--cat); }
body[data-cat] .board input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--cat) var(--fill, 0%), color-mix(in srgb, var(--line) 90%, transparent) var(--fill, 0%));
}
body[data-cat] .board input[type="range"]::-webkit-slider-thumb { border-color: var(--cat); }
body[data-cat] .board input[type="range"]::-moz-range-progress { background: var(--cat); }
body[data-cat] .board input[type="range"]::-moz-range-thumb { border-color: var(--cat); }
body[data-cat] .board .seg button[aria-pressed="true"] {
  color: var(--cat);
  background: color-mix(in srgb, var(--cat) 7%, var(--paper));
  box-shadow: var(--sh-sm), inset 0 0 0 1px color-mix(in srgb, var(--cat) 15%, transparent);
}
.tool-warning {
  display: flex; align-items: flex-start; gap: 9px;
  max-width: 660px; margin: 18px 0 0; padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--danger) 34%, var(--line));
  border-left: 3px solid var(--danger); border-radius: 12px;
  background: var(--danger-soft); color: color-mix(in srgb, var(--danger) 74%, var(--ink));
  font: 500 12.5px/1.55 var(--f-body);
}
.tool-warning .ic { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; color: var(--danger); }
body[data-cat] .dz:hover, body[data-cat] .dz:focus-within { border-color: var(--cat); background: color-mix(in srgb, var(--cat) 5%, var(--paper)); }
body[data-cat] .dz--over { border-color: var(--cat); background: var(--cat-soft); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat) 11%, transparent); }
body[data-cat] .dz__icon {
  color: var(--cat);
  background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--cat) 26%, var(--paper)), var(--cat-soft));
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--cat) 55%, transparent);
}
body[data-cat] .dz__icon::after { border-color: color-mix(in srgb, var(--cat) 40%, transparent); }
body[data-cat] .dz__browse { color: var(--cat); text-decoration-color: color-mix(in srgb, var(--cat) 45%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .tdemo, .tdemo:hover { transform: none; }
  .tdemo, .tdemo * { animation: none !important; transition: none !important; }
  .tdemo__pointer { display: none !important; }
  .tdemo__meter i { width: 100% !important; }
  .tdemo__frame, .tdemo__meter::after, .tdemo__status::after { display: none !important; }
  .js .tdemo[data-phase] .tdemo__drop,
  .js .tdemo[data-phase] .tdemo__core,
  .js .tdemo[data-phase] .tdemo__result,
  .js .tdemo[data-phase] .tdemo__done,
  .js .tdemo[data-phase] .tdemo__opts,
  .js .tdemo[data-phase] .tdemo__spark,
  .tdemo__file { opacity: 1 !important; filter: none !important; transform: none !important; }
  .js .tdemo[data-phase]:not([data-phase="4"]) .tdemo__result { opacity: 1 !important; border-style: solid; }
  .js .tdemo[data-phase]:not([data-phase="4"]) .tdemo__result > * { opacity: 1 !important; }
  .js .tdemo[data-phase]:not([data-phase="4"]) .tdemo__result::before { display: none !important; }
  .tdemo__steps span { opacity: 1 !important; }
}

.board { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr); gap: 28px; align-items: start; padding: 30px 0 10px; }
@media (max-width: 960px) { .board { grid-template-columns: 1fr; } }
.board__side { position: sticky; top: 88px; display: grid; gap: 16px; }
@media (max-width: 960px) { .board__side { position: static; } }

.panel { border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); background: var(--paper); border-radius: 16px; box-shadow: var(--sh-sm); padding: 20px; position: relative; backdrop-filter: saturate(1.02); }
.panel > .label { display: block; margin-bottom: 14px; }
.panel-note { font-size: 13.5px; color: var(--muted); }
.panel .fields { display: grid; gap: 16px; }
.panel hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

/* dropzone */
.dz {
  position: relative; min-height: 270px; width: 100%;
  border: 2px dashed var(--line-strong); border-radius: 18px;
  background: var(--paper);
  display: grid; place-items: center; text-align: center;
  padding: 44px 26px 34px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.dz:hover, .dz:focus-within { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 45%, var(--paper)); }
.dz--over { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent); }
.dz--compact { min-height: 190px; padding: 30px 20px 24px; }
.dz__scissors, .dz__corner { display: none; }   /* the paper props retired with the old theme */
.dz__inner { display: grid; gap: 10px; justify-items: center; max-width: 460px; }
.dz__icon { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 4px; }
.dz__icon .ic { width: 28px; height: 28px; stroke-width: 1.6; }
.dz__t { font: 650 18px/1.3 var(--f-body); letter-spacing: -.01em; }
.dz__hint { font: 400 12.5px/1.6 var(--f-mono); color: var(--muted); }
.dz__browse { color: var(--accent-2); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-decoration-thickness: 2px; }
.dz input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* file chips */
.files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.filechip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--paper); border-radius: 10px; padding: 7px 10px; font: 500 12px/1 var(--f-mono); max-width: 100%; box-shadow: var(--sh-sm); }
.filechip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filechip b { color: var(--muted); font-weight: 500; }
.filechip button { border: 0; background: none; cursor: pointer; padding: 2px; color: var(--muted); display: grid; place-items: center; border-radius: 6px; }
.filechip button:hover { color: var(--bad); background: var(--bad-soft); }
.filechip--thumb img { width: 26px; height: 26px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }

/* results */
.results { display: grid; gap: 10px; margin-top: 18px; }
.rcard { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); background: var(--paper); border-radius: 12px; box-shadow: var(--sh-sm); padding: 12px 14px; }
.rcard__thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 9px; border: 1px solid var(--line); background: var(--paper-2); flex: none; }
.rcard__body { min-width: 0; flex: 1; }
.rcard__name { font: 600 14px/1.35 var(--f-body); word-break: break-all; }
.rcard__meta { font: 500 11px/1.5 var(--f-mono); color: var(--muted); margin-top: 3px; }
.rcard__actions { display: flex; gap: 8px; flex: none; }
@media (max-width: 560px) { .rcard { flex-wrap: wrap; } .rcard__actions { width: 100%; justify-content: flex-end; } }
.result-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 2px; }
.result-head h3 { font-size: 19px; }

/* shared before — after proof */
.size-proof { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 6px 0 16px; animation: proofIn .35s cubic-bezier(.2,.8,.2,1) both; }
.size-proof__values { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: var(--sh-sm); }
.size-proof__values b { font: 600 13px/1 var(--f-mono); color: var(--ink); }
.size-proof__arrow { color: var(--muted); font-size: 12px; }
.size-proof__badge { padding: 7px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper-2); color: var(--muted); font: 600 10.5px/1 var(--f-mono); letter-spacing: .03em; }
.size-proof__badge.is-good { color: var(--good); background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 32%, var(--line)); }
.size-proof__badge.is-bad { color: var(--bad); background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 32%, var(--line)); }
.size-proof__note { font: 500 11.5px/1.4 var(--f-mono); color: var(--muted); }
@keyframes proofIn { from { opacity: 0; transform: translateY(4px); } }

.strength { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 10px 0 14px; }
.strength__bar { height: 6px; flex: 1; min-width: 140px; max-width: 320px; border-radius: 999px; background: var(--line); overflow: hidden; }
.strength__fill { display: block; height: 100%; border-radius: 999px; background: var(--good); transition: width .35s cubic-bezier(.2,.8,.2,1); }
.strength__label { font: 600 11px/1.3 var(--f-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* progress */
.prog { border: 0; background: var(--line); height: 8px; border-radius: 999px; overflow: hidden; }
.prog__bar { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .18s ease; }
.prog-wrap { display: grid; gap: 8px; margin-top: 16px; }
.prog__label { font: 500 12px/1.5 var(--f-mono); color: var(--muted); }
.spinner { width: 15px; height: 15px; border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; border-radius: 50%; animation: spin .7s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* text output + log */
.tout { border: 1px solid var(--line); background: var(--paper); border-radius: 12px; padding: 14px; font: 400 12.5px/1.6 var(--f-mono); white-space: pre-wrap; word-break: break-word; max-height: 460px; overflow: auto; }
.log { font: 400 11.5px/1.7 var(--f-mono); color: var(--muted); white-space: pre-wrap; max-height: 170px; overflow: auto; border: 1px solid var(--line); padding: 10px 12px; border-radius: 10px; background: var(--paper-2); }

/* empty state / errors */
.empty { border: 1.5px dashed var(--line-strong); border-radius: 12px; padding: 24px; text-align: center; color: var(--muted); font-size: 14px; }
.err-box { border: 1px solid color-mix(in srgb, var(--bad) 40%, var(--line)); color: var(--bad); background: var(--bad-soft); border-radius: 12px; padding: 13px 15px; font-size: 14px; }
.callout { border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-left: 3px solid var(--accent); background: radial-gradient(600px 200px at 50% 0%, color-mix(in srgb, var(--accent) 5%, var(--paper)) 0%, var(--paper) 100%); border-radius: 14px; box-shadow: var(--sh-sm); padding: 18px 20px; font-size: 14.5px; line-height: 1.8; backdrop-filter: saturate(1.02); }
.callout p, .prose .callout p { margin: 0; }
.callout .contact-mail, .prose .callout .contact-mail { margin: 0; font-size: 17px; }
.callout .contact-note, .prose .callout .contact-note { margin: 8px 0 0; font-size: 14px; color: var(--muted); }

/* how-it-works steps */
.steps { counter-reset: s; list-style: none; padding: 0; display: grid; gap: 18px; margin-top: 26px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-2);
  border-radius: 50%; font: 700 12.5px/1 var(--f-mono);
  margin-top: 1px;
}
.steps b { display: block; font-weight: 650; margin-bottom: 3px; }
.steps p { color: var(--muted); font-size: 14.5px; }

/* faq */
.faq { display: grid; gap: 10px; margin-top: 24px; }
.faq-more { margin-top: 18px; }
.faq details { border: 1px solid var(--line); background: var(--paper); border-radius: 14px; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; cursor: pointer; font: 650 15px/1.45 var(--f-body); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { transition: transform .18s ease; color: var(--accent); }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq .a { padding: 14px 18px 17px; font-size: 14.5px; color: var(--ink-2); }
.faq .a p + p { margin-top: 10px; }

/* prose pages */
.prose { max-width: 780px; }
.prose h2 { margin: 40px 0 14px; }
.prose h3 { margin: 26px 0 10px; }
.prose p { margin: 0 0 14px; font-size: 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 7px; font-size: 15.5px; }
.prose li::marker { color: var(--accent); font-weight: 700; }
.prose .updated { display: inline-block; margin-bottom: 26px; }
.prose blockquote { border-left: 3px solid var(--accent); margin: 0 0 18px; padding: 4px 0 4px 18px; font-size: 17px; color: var(--muted); }
.prose code { font-family: var(--f-mono); font-size: .9em; background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }

/* toast */
.toasts { position: fixed; right: 18px; bottom: 78px; z-index: 200; display: grid; gap: 10px; max-width: 340px; }
.toast {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  background: var(--paper); color: var(--ink);
  padding: 12px 15px; border-radius: 12px; font: 500 13px/1.5 var(--f-body);
  box-shadow: var(--sh-lg);
  display: flex; gap: 10px; align-items: flex-start;
  animation: toast-in .18s ease;
}
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }
.toast--err { border-left-color: var(--bad); }
.toast--err span { color: var(--bad); }
.toast__x { border: 0; background: none; color: var(--muted); cursor: pointer; opacity: .8; padding: 0; }
.toast__x:hover { opacity: 1; color: var(--ink); }

/* 404 */
.lost { text-align: center; padding: 70px 0 40px; }
.lost .code { font: 780 clamp(88px, 17vw, 160px)/1 var(--f-display); letter-spacing: -.05em; }
.lost .cutline { border-top: 2px dashed var(--line-strong); margin: 8px auto 26px; max-width: 460px; position: relative; }
.lost .cutline .ic { position: absolute; top: -15px; left: 12%; background: var(--page); padding: 0 8px; width: 30px; height: 30px; color: var(--accent); }
.lost h1 { font-size: clamp(22px, 3vw, 30px); }
.lost .dek { margin: 14px auto 26px; }
.lost .code__spark { color: var(--accent); }

/* utilities page */
.util-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 26px 0; }
.util-bar .input { max-width: 380px; }

/* home page bits */
.brand__text { display: flex; flex-direction: column; line-height: 1.08; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 32px 0; }
.strip__item { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 18px; background: var(--paper); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 16px; box-shadow: var(--sh-sm); backdrop-filter: saturate(1.02); }
.strip__item .ic { color: var(--accent); width: 23px; height: 23px; margin-top: 0; }
.strip__item .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 10%, var(--paper)); border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent); }
.strip__item b { display: block; font: 650 15.5px/1.3 var(--f-body); margin-bottom: 5px; }
.strip__item p { font-size: 13px; color: var(--muted); line-height: 1.62; }
@media (max-width: 900px) { .strip { grid-template-columns: 1fr; } }

.stamp {
  width: 108px; height: 108px; border-radius: 50%;
  display: grid; place-items: center; text-align: center; padding: 16px;
  font: 700 10px/1.55 var(--f-mono); text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent-2); background: var(--accent-soft);
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
  transform: rotate(-7deg);
}
.stamp--ink { color: var(--ink); background: var(--paper); border-color: var(--line-strong); }
.stamp--sm { width: 86px; height: 86px; font-size: 8.5px; }
.stamp--inline { display: inline-grid; margin-bottom: 26px; }
.h-lg { font-size: clamp(28px, 4vw, 40px); }

section[id], h2[id], div[id] { scroll-margin-top: 88px; }

/* ============================================================
   INTERACTIVE EFFECTS LAYER
   cursor spotlights · tilt · shine · marquee · progress
   All GPU-friendly: transform + opacity only.
   ============================================================ */

/* ---------- scroll progress bar ---------- */
.progress-bar {
  position: fixed; top: 0; left: 0; z-index: 100;
  height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), #ffb199, var(--accent));
  background-size: 300% 100%;
  animation: glowMove 4s linear infinite;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: transform .15s ease-out;
  pointer-events: none;
}

/* ---------- card cursor spotlight + animated category tint ---------- */
.tcard {
  --mx: 50%; --my: 50%;
}
.tcard::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background:
    radial-gradient(340px circle at var(--mx) var(--my),
      color-mix(in srgb, var(--cat, var(--accent)) 17%, transparent) 0%, transparent 64%),
    radial-gradient(150px circle at var(--mx) var(--my),
      rgb(255 255 255 / .16) 0%, transparent 70%);
  opacity: 0; transition: opacity .3s ease; pointer-events: none; z-index: 1;
}
.tcard:hover::after { opacity: 1; }
.tcard.is-tint-live::after {
  opacity: .5;
  animation: cardTint 4s ease-in-out infinite;
  will-change: transform, opacity;
}
.tcard.is-tint-live:hover::after { opacity: .85; }
@keyframes cardTint {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: .5;
  }
  25% {
    transform: translate(4%, -3%) scale(1.05);
    opacity: .6;
  }
  50% {
    transform: translate(-3%, 4%) scale(1.02);
    opacity: .55;
  }
  75% {
    transform: translate(2%, 2%) scale(1.08);
    opacity: .65;
  }
}

/* 3D depth layers for icon, title, arrow */
.tcard__ico { transform: translateZ(30px); transition: transform .22s ease, box-shadow .22s ease; }
.tcard__t { transform: translateZ(20px); transition: color .22s ease, transform .22s ease; }
.tcard__go { transform: translateZ(26px); transition: all .22s ease; }
.tcard:hover .tcard__ico { transform: translateZ(40px) translateY(-6px) scale(1.12); }
.tcard:hover .tcard__t { transform: translateZ(28px); }
.tcard:hover .tcard__go { transform: translateZ(36px) translateX(4px); }

/* ---------- 3D card hand-off + category hover choreography ---------- */
@keyframes cardPdfFlip {
  0% { transform: scale(1); }
  48% { transform: perspective(140px) rotateY(-17deg) scale(1.1); }
  100% { transform: scale(1.1); }
}
@keyframes cardImagePop {
  0% { transform: scale(1); }
  55% { transform: scale(1.2) rotate(-4deg); }
  100% { transform: scale(1.1); }
}
@keyframes cardMediaSlide {
  0% { transform: scale(1); }
  50% { transform: translateX(3px) scale(1.12); }
  100% { transform: scale(1.1); }
}
@keyframes cardTextRise {
  0% { transform: scale(1); }
  50% { transform: translateY(-3px) scale(1.1); }
  100% { transform: scale(1.1); }
}
@keyframes cardUtilTurn {
  0% { transform: scale(1) rotate(0); }
  55% { transform: scale(1.12) rotate(14deg); }
  100% { transform: scale(1.1) rotate(0); }
}
@keyframes cardDangerPulse {
  0%, 100% { transform: scale(1.1) rotate(0); }
  50% { transform: scale(1.12) rotate(-7deg); }
}
.tcard-wrap[data-cat="pdf"]:hover .tcard__ico .ic { animation: cardPdfFlip .52s cubic-bezier(.2, .8, .2, 1); }
.tcard-wrap[data-cat="image"]:hover .tcard__ico .ic { animation: cardImagePop .52s cubic-bezier(.2, .8, .2, 1); }
.tcard-wrap[data-cat="media"]:hover .tcard__ico .ic { animation: cardMediaSlide .52s cubic-bezier(.2, .8, .2, 1); }
.tcard-wrap[data-cat="text"]:hover .tcard__ico .ic { animation: cardTextRise .52s cubic-bezier(.2, .8, .2, 1); }
.tcard-wrap[data-cat="util"]:hover .tcard__ico .ic { animation: cardUtilTurn .52s cubic-bezier(.2, .8, .2, 1); }
.tcard-wrap[data-tone="danger"]:hover .tcard__ico .ic { animation: cardDangerPulse .52s ease; }
.tcard:hover .tcard__ico {
  background: linear-gradient(145deg, color-mix(in srgb, var(--cat, var(--accent)) 26%, var(--paper)), color-mix(in srgb, var(--cat, var(--accent)) 8%, var(--paper)));
  border-color: color-mix(in srgb, var(--cat, var(--accent)) 30%, transparent);
}
.tcard-wrap[data-cat="text"] .tcard__t { display: inline-block; position: relative; }
.tcard-wrap[data-cat="text"] .tcard__t::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 2px;
  border-radius: 2px; background: var(--cat, var(--accent));
  transform: scaleX(0); transform-origin: left; transition: transform .26s ease;
}
.tcard-wrap[data-cat="text"]:hover .tcard__t::after { transform: scaleX(1); }

/* the card presses/opens for a beat before navigation */
.tcard.is-opening {
  transform: perspective(760px) rotateX(0deg) rotateY(0deg) translateY(-2px) scale(1.028);
  border-color: var(--cat, var(--accent));
  box-shadow: var(--sh-md), inset 0 1px 0 rgb(255 255 255 / .4), 0 16px 34px -16px color-mix(in srgb, var(--cat, var(--accent)) 55%, transparent);
}
.tcard.is-opening::before { opacity: .9; }
.tcard.is-opening::after { opacity: 1; }
.tcard.is-opening .tcard__ico { transform: translateY(-4px) scale(1.12); }
.tcard.is-opening .tcard__go { opacity: 1; transform: none; background: var(--cat, var(--accent)); color: #fff; }

/* ---------- tool-page opening ---------- */
@keyframes tdemoOpen {
  from { opacity: 0; clip-path: inset(0 0 22% 0 round 18px); }
  to { opacity: 1; clip-path: inset(0 0 0 0 round 18px); }
}
@keyframes toolAppOpen {
  from { opacity: 0; transform: translateY(10px) scale(.995); }
  to { opacity: 1; transform: none; }
}
body[data-cat] .tdemo { animation: tdemoOpen .6s cubic-bezier(.16, 1, .3, 1); transform-origin: 50% 100%; }
body[data-cat] #app:not(:empty) { animation: toolAppOpen .5s .05s cubic-bezier(.16, 1, .3, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .tcard, .tcard.is-opening { transform: none !important; }
  .tcard__ico, .tcard__ico .ic, .tcard__t::after { animation: none !important; transition: none !important; }
  .tcard:hover .tcard__ico, .tcard:hover .tcard__ico .ic { transform: none !important; }
  body[data-cat] .tdemo, body[data-cat] #app:not(:empty) { animation: none !important; }
}

/* ---------- button shine sweep ---------- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 45%) 50%, transparent 80%);
  transform: skewX(-18deg);
  transition: left .55s ease;
  pointer-events: none;
}
.btn:hover::after { left: 150%; }
.btn--ghost::after { display: none; }
.btn--primary {
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / .14), 0 1px 2px rgb(232 72 43 / 10%), var(--sh-sm), 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent);
}
.btn--primary:hover {
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / .14), var(--sh-md),
    0 0 24px 2px color-mix(in srgb, var(--accent) 35%, transparent);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(1px) scale(.99); }

/* ---------- hero 3D tilt + parallax ---------- */
.hero-visual { transform-style: preserve-3d; will-change: transform; transition: transform .25s ease-out; }
.hero__blob { will-change: transform; }

/* ---------- animated gradient text ---------- */
.hero h1 mark, .hl-anim {
  background: linear-gradient(100deg, var(--accent) 0%, var(--rose) 34%, var(--accent-3) 68%, var(--accent) 100%);
  background-size: 280% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: glowMove 9s linear infinite;
  box-shadow: none;
}

/* ---------- marquee strip ----------
   A native scroll container: the strip drifts on its own, pauses on hover or
   focus, and can be dragged, wheel-scrolled or arrow-keyed while paused. */
.marquee {
  position: relative;
  overflow-x: auto; overflow-y: hidden;
  border-block: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: color-mix(in srgb, var(--paper) 64%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  padding: 14px 0; margin: 8px 0 0;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
  overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}
.marquee::-webkit-scrollbar { display: none; }
.marquee.is-dragging { cursor: grabbing; }
.marquee:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.marquee__track { display: flex; width: max-content; padding-inline: 4px; }
.marquee__item {
  margin-right: 10px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  border-radius: 999px; background: color-mix(in srgb, var(--paper) 92%, transparent);
  font: 550 13px/1 var(--f-body); color: var(--ink-2); white-space: nowrap;
  box-shadow: var(--sh-sm); text-decoration: none; user-select: none;
  transition: border-color .2s ease, color .2s ease, transform .2s ease, background .2s ease;
}
.marquee__item:hover, .marquee__item:focus-visible { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--accent-2); transform: translateY(-2px); background: var(--paper); text-decoration: none; }
.marquee__item .ic { width: 14px; height: 14px; color: var(--accent); }
.marquee__hint {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  z-index: 2; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  font: 600 9.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); background: color-mix(in srgb, var(--page-solid) 86%, transparent);
  border: 1px solid var(--line); opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.marquee:hover .marquee__hint, .marquee:focus-within .marquee__hint { opacity: 1; }
.marquee__hint .ic { width: 12px; height: 12px; }
@media (max-width: 640px) { .marquee__hint { display: none; } }
/* keep the strip's icons on the same category palette as the cards */
.marquee__item:has(use[href="#i-pdf"]) .ic { color: var(--cat-pdf); }
.marquee__item:has(use[href="#i-image"]) .ic { color: var(--cat-image); }
.marquee__item:has(use[href="#i-media"]) .ic { color: var(--cat-media); }
.marquee__item:has(use[href="#i-code"]) .ic,
.marquee__item:has(use[href="#i-type"]) .ic { color: var(--cat-text); }
.marquee__item:has(use[href="#i-qr"]) .ic,
.marquee__item:has(use[href="#i-eye"]) .ic,
.marquee__item:has(use[href="#i-ruler"]) .ic { color: var(--cat-util); }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- floating hero shapes ---------- */
.float-shape {
  position: absolute; border-radius: 22%; z-index: -1; pointer-events: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent-2) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  backdrop-filter: blur(2px);
  animation: float 9s ease-in-out infinite;
}
.float-shape--a { width: 90px; height: 90px; top: 6%; left: 6%; animation-delay: -1s; border-radius: 28%; }
.float-shape--b { width: 54px; height: 54px; bottom: 14%; left: 16%; animation-delay: -4s; border-radius: 38%; }
.float-shape--c { width: 68px; height: 68px; top: 18%; right: 8%; animation-delay: -2.5s; border-radius: 30%; }
.float-shape--d { width: 40px; height: 40px; bottom: 8%; right: 20%; animation-delay: -5.5s; border-radius: 50%; }

/* ---------- count-up number ---------- */
.count-up { font-variant-numeric: tabular-nums; }

/* ---------- click ripple ---------- */
.ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgb(255 255 255 / 45%); pointer-events: none;
  animation: rippleOut .6s ease-out forwards;
}
.btn--ghost .ripple, .btn:not(.btn--primary) .ripple { background: color-mix(in srgb, var(--accent) 22%, transparent); }
@keyframes rippleOut {
  to { transform: scale(3.2); opacity: 0; }
}

/* ---------- nav active underline ---------- */
.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- logo spin on hover ---------- */
.brand .brand__mark { transition: transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }
.brand:hover .brand__mark { transform: rotate(90deg) scale(1.08); box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 -1px 0 rgb(0 0 0 / .12); }

/* ---------- theme button rotation ---------- */
.theme-btn .ic { transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.theme-btn:hover .ic { transform: rotate(40deg) scale(1.1); }

/* ---------- quiet idle motion in the header ---------- */
.site-header::after {
  background-size: 200% 100%;
  background-repeat: repeat-x;
  animation: headerLine 12s linear infinite;
  opacity: .85;
}
.site-header.is-stuck::after {
  opacity: 1;
  height: 2px;
}
@keyframes headerLine { to { background-position: 200% 0; } }
.brand .brand__mark { position: relative; animation: brandPulse 3s ease-in-out infinite; }
@keyframes brandPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 30%, transparent), inset 0 -1px 0 rgb(0 0 0 / .12); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent), inset 0 -1px 0 rgb(0 0 0 / .12); }
}
.brand .brand__mark i { display: block; font-style: normal; animation: brandGlint 4s ease-in-out infinite; }
.brand .brand__mark::after {
  content: ""; position: absolute; inset: -4px; border-radius: 15px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
  opacity: 0; pointer-events: none;
  animation: brandPing 3s cubic-bezier(.2, .7, .3, 1) infinite;
}
@keyframes brandGlint {
  0%, 100% { transform: rotate(-4deg) scale(1); }
  45% { transform: rotate(10deg) scale(1.06); }
  70% { transform: rotate(4deg) scale(1.02); }
}
@keyframes brandPing {
  0% { opacity: 0; transform: scale(.86); }
  28% { opacity: .55; }
  100% { opacity: 0; transform: scale(1.3); }
}
.nav a:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--accent) 6%, var(--paper));
}
.nav a::after {
  animation: navShimmer 3.6s linear infinite;
  opacity: 0;
  transition: opacity .2s ease;
}
.nav a:hover::after, .nav a[aria-current="page"]::after {
  opacity: 1;
}
@keyframes navShimmer { to { background-position: 220% 0; } }

/* ---------- sky background - scroll-driven day -> night (progress --sky-p) ----------
   Day = top of the page, night = bottom of the page. --sky-p runs 0 (day) to 1
   (night); the body.sky-night class is what actually paints the night sky. */
.bg-anim .sky {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.bg-anim .sky__sun,
.bg-anim .sky__moon {
  position: absolute; top: 14%; left: 78%;
  width: 320px; height: 320px;
  display: grid; place-items: center;
  will-change: transform, opacity;
}
.bg-anim .sky__sun {
  opacity: calc(1 - var(--sky-p, 0));
  transform: translateY(calc(var(--sky-p, 0) * 38vh));
  transition: opacity 2s ease;
}
.bg-anim .sky__sun::after {
  content: ""; position: absolute; inset: -60%; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 196 128 / .30) 0%, transparent 55%);
  animation: skyBeam 6s ease-in-out infinite; pointer-events: none;
}
@keyframes skyBeam { 0%, 100% { opacity: .3; } 50% { opacity: .85; } }
.bg-anim .sky__sun i {
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff8e0 0%, #ffd97a 38%, #ff9e3b 72%, #ff6b2b 100%);
  box-shadow: 0 0 80px 36px rgb(255 178 84 / .45), 0 0 180px 100px rgb(255 158 59 / .2), 0 0 300px 160px rgb(255 122 74 / .08);
}
.bg-anim.is-day-rise .bg-anim .sky__sun i { animation: sunRise 2.4s cubic-bezier(.2, .8, .25, 1) both; }
@keyframes sunRise {
  from { opacity: 0; transform: scale(.94); box-shadow: 0 0 60px 24px rgb(255 178 84 / .2); }
  to   { opacity: 1; transform: scale(1); box-shadow: 0 0 60px 24px rgb(255 178 84 / .28), 0 0 130px 72px rgb(255 158 59 / .14), 0 0 220px 110px rgb(255 122 74 / .05); }
}
/* the sun only exists in day; night keeps it below the horizon */
body.sky-night .bg-anim .sky__sun { opacity: 0; }
.bg-anim .sky__moon {
  width: 110px; height: 110px; border-radius: 50%;
  /* travels down as you scroll deeper into the night, fading as it sinks */
  opacity: 0; transform: translateY(calc(var(--sky-p, 0) * 38vh));
  transition: opacity 2.2s ease, transform 2.2s ease;
  background: radial-gradient(circle at 36% 32%, #ffffff 0%, #e7ebf7 40%, #b9c2e0 70%, #8a96c0 100%);
  box-shadow: 0 0 60px 24px rgb(214 222 245 / .35), 0 0 150px 80px rgb(170 184 226 / .18), 0 0 280px 140px rgb(138 150 192 / .08);
}
.bg-anim .sky__moon::after {
  content: ""; position: absolute; inset: -60%; border-radius: 50%;
  background: radial-gradient(circle, rgb(205 220 250 / .30) 0%, transparent 55%);
  animation: skyBeam 7s ease-in-out infinite; pointer-events: none;
}
@keyframes skyBeam { 0%, 100% { opacity: .3; } 50% { opacity: .9; } }
body.sky-night .bg-anim .sky__moon { opacity: calc(1 - (var(--sky-p, 1) - 0.8) * 1.6); }
html[data-theme="dark"] .bg-anim .sky__moon { opacity: calc(1 - (var(--sky-p, 1) - 0.8) * 1.6); }
html[data-theme="dark"] .bg-anim .sky__sun { opacity: 0; }
html[data-theme="dark"] .bg-anim .sky__stars { opacity: .85; }
.bg-anim .sky__moon i.m1,
.bg-anim .sky__moon i.m2,
.bg-anim .sky__moon i.m3 {
  position: absolute; border-radius: 50%;
  background: rgb(35 45 80 / .15); box-shadow: none;
}
.bg-anim .sky__moon i.m1 { width: 18px; height: 18px; top: 25%; left: 20%; }
.bg-anim .sky__moon i.m2 { width: 11px; height: 11px; top: 55%; left: 45%; }
.bg-anim .sky__moon i.m3 { width: 8px; height: 8px; top: 20%; left: 55%; }
.bg-anim .sky__stars {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 2s ease;
}
body.sky-night .bg-anim .sky__stars { opacity: 1; }
html[data-theme="dark"] .bg-anim .sky__stars { opacity: .85; }
.bg-anim .sky__stars i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px 1px rgb(255 255 255 / .4);
  animation: starTwinkle 3.6s ease-in-out infinite;
}
.bg-anim .sky__stars i:nth-child(1) { top: 8%; left: 12%; }
.bg-anim .sky__stars i:nth-child(2) { top: 18%; left: 34%; animation-delay: -.4s; }
.bg-anim .sky__stars i:nth-child(3) { top: 6%; left: 58%; animation-delay: -.9s; }
.bg-anim .sky__stars i:nth-child(4) { top: 22%; left: 76%; animation-delay: -1.3s; }
.bg-anim .sky__stars i:nth-child(5) { top: 36%; left: 8%; animation-delay: -1.8s; }
.bg-anim .sky__stars i:nth-child(6) { top: 44%; left: 26%; animation-delay: -2.2s; }
.bg-anim .sky__stars i:nth-child(7) { top: 38%; left: 52%; animation-delay: -2.7s; }
.bg-anim .sky__stars i:nth-child(8) { top: 52%; left: 70%; animation-delay: -3.1s; }
.bg-anim .sky__stars i:nth-child(9) { top: 64%; left: 16%; animation-delay: -.6s; }
.bg-anim .sky__stars i:nth-child(10) { top: 70%; left: 40%; animation-delay: -1.1s; }
.bg-anim .sky__stars i:nth-child(11) { top: 62%; left: 64%; animation-delay: -1.6s; }
.bg-anim .sky__stars i:nth-child(12) { top: 78%; left: 82%; animation-delay: -2.1s; }
.bg-anim .sky__stars i:nth-child(13) { top: 88%; left: 24%; animation-delay: -2.6s; }
.bg-anim .sky__stars i:nth-child(14) { top: 84%; left: 56%; animation-delay: -3.0s; }
.bg-anim .sky__horizon {
  position: absolute; bottom: 0; left: 0; right: 0; height: 140px;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--ink) 7%, transparent) 100%);
  opacity: .5;
  transition: opacity 2s ease;
}
body.sky-night .bg-anim .sky__horizon {
  background: linear-gradient(180deg, transparent 0%, rgb(8 10 22 / .9) 100%);
  opacity: .9;
}
@keyframes starTwinkle {
  0%, 100% { opacity: .25; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .bg-anim .sky__stars i { animation: none; opacity: .6; }
}

/* ---------- night sky: keep the copy readable on the dusk backdrop ----------
   When the scroll-driven dusk sky takes over, text sitting straight on the
   backdrop (hero, section heads, steps, prose, tool heads, crumbs) is dark ink
   in light mode and used to sink into the night. Flip it to light ink while the
   night sky is up. Text on paper surfaces (cards, faq, panels, pills, stats
   chips, steps-list tiles) keeps its own background, so it is not touched here. */
body.sky-night .hero h1,
body.sky-night .tool-head h1,
body.sky-night .section h2,
body.sky-night .sec-head h2,
body.sky-night .cat-head h2,
body.sky-night .prose h2,
body.sky-night .steps h2,
body.sky-night .faq h2,
body.sky-night .cta h2,
body.sky-night .band h2,
body.sky-night .closing h2,
body.sky-night .hero h2 {
  color: #f6f4ff;
}
body.sky-night .hero__dek,
body.sky-night .tool-head .dek,
body.sky-night .tool-kicker > span:last-child,
body.sky-night .cat-dek,
body.sky-night .sec-head .cat-dek,
body.sky-night .prose p,
body.sky-night .prose li,
body.sky-night .prose blockquote,
body.sky-night .steps p,
body.sky-night .crumbs,
body.sky-night .section > p {
  color: #c6c3e8;
}
body.sky-night .steps li b {
  color: #f6f4ff;
}

.nav a::after {
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent));
  background-size: 220% 100%;
}
.nav a:hover::after, .nav a[aria-current="page"]::after { animation: navShimmer 3.6s linear infinite; }
@keyframes navShimmer { to { background-position: 220% 0; } }
@media (prefers-reduced-motion: reduce) {
  .site-header::after, .brand .brand__mark i, .brand .brand__mark::after, .nav a::after { animation: none !important; }
  .brand .brand__mark::after { opacity: 0 !important; }
}

/* ---------- tool card entrance ripple ---------- */
.tgrid .tcard { height: 100%; }

/* ---------- headings gradient underline ---------- */
.section h2 { position: relative; }
.cat-head h2::after {
  content: ""; position: absolute; left: 0; right: 30%; bottom: -8px; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 2px; opacity: .35;
}

/* ---------- glow divider dot pulse ---------- */
.rule-d::after { animation: pulseSoft 3.2s ease-in-out infinite; }

/* ---------- FAQ hover ---------- */
.faq details { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.faq details:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line-strong)); box-shadow: var(--sh-md); transform: translateY(-1px); }
.faq details[open] summary svg { transform: rotate(135deg); }
.faq summary svg { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }

/* ---------- footer link hover slide ---------- */
.footer-col a, .site-footer a { transition: color .2s ease, transform .2s ease; display: inline-block; }
.footer-col a:hover, .site-footer a:hover { color: var(--accent-2); transform: translateX(3px); }

/* ---------- scrollbar styling ---------- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--page-solid); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 50%, var(--line-strong)), var(--line-strong));
  border-radius: 8px; border: 3px solid var(--page-solid);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ---------- selection pulse ---------- */
.hero__stats span { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.hero__stats span:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong)); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 18%, transparent); }

/* ---------- reduced motion: kill the heavy stuff ---------- */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .float-shape { animation: none; }
  .btn::after { display: none; }
  .hero-visual { transform: none !important; }
  .cursor-glow, .spark { display: none; }
  .rcard { animation: none; }
}

/* reduced chrome on print */
@media print {
  .site-header, .site-footer, .board__side, .dz, .toasts { display: none !important; }
}

/* ============================================================
   COMMAND PALETTE · PINS · QUICK BAR · BACK-TO-TOP · GLOW
   ============================================================ */

/* ---------- card wrapper + pin star ---------- */
.tcard-wrap { position: relative; display: grid; }
.tcard-wrap[hidden] { display: none; }
.tcard-wrap > .tcard { height: 100%; }
.tcard__star {
  position: absolute; right: 10px; bottom: 10px; z-index: 4;
  width: 44px; height: 44px; border-radius: 11px; cursor: pointer;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  color: var(--muted);
  backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(4px) scale(.9);
  transition: opacity .18s ease, transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease;
}
.tcard-wrap:hover .tcard__star, .tcard__star:focus-visible { opacity: 1; transform: none; }
.tcard__star:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.tcard__star .ic { width: 15px; height: 15px; }
.tcard__star.is-fav {
  opacity: 1; transform: none; color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
}
.tcard__star.is-fav .ic, .pal__star.is-fav .ic { fill: var(--accent); }
.tcard__star.is-pop .ic { animation: starPop .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes starPop { 50% { transform: scale(1.4) rotate(14deg); } }

/* ---------- header search button ---------- */
.nav-search {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; white-space: nowrap;
  padding: 8px 11px; margin-left: 4px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); color: var(--muted); cursor: pointer;
  font: 550 13px/1 var(--f-body);
  transition: border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.nav-search:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); color: var(--ink-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
  transform: translateY(-1px);
}
.nav-search:active { transform: translateY(0); }
.nav-search .ic { width: 14px; height: 14px; color: var(--accent); }
.nav-search kbd {
  font: 600 10px/1 var(--f-mono); color: var(--muted);
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px;
  padding: 3px 5px; background: var(--paper-2);
}
@media (max-width: 880px) {
  .nav-search { width: 38px; height: 38px; justify-content: center; padding: 0; }
  .nav-search span, .nav-search kbd { display: none; }
}

/* ---------- command palette ---------- */
html.pal-open, html.pal-open body { overflow: hidden; }
.pal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: start center; padding: 12vh 16px 16px; }
.pal[hidden] { display: none; }
.pal__back { position: absolute; inset: 0; background: rgb(10 12 18 / 44%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fadeIn .2s ease both; }
.pal__box {
  position: relative; width: min(640px, 100%);
  background: color-mix(in srgb, var(--paper) 97%, #fff);
  border: 1px solid var(--line-strong); border-radius: 18px;
  box-shadow: 0 26px 70px -22px rgb(10 12 18 / 38%), var(--sh-md);
  overflow: hidden;
  animation: palIn .28s cubic-bezier(.22,1,.36,1) both;
}
@keyframes palIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.pal__top { display: flex; align-items: center; gap: 11px; padding: 15px 16px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.pal__top .ic { width: 18px; height: 18px; color: var(--muted); flex: none; }
.pal__input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 500 15.5px/1.3 var(--f-body); color: var(--ink); }
@media (max-width: 640px) { .pal__input { font-size: 16px; } }
.pal__input::placeholder { color: var(--muted); opacity: .8; }
.pal__kbd {
  flex: none; font: 600 10.5px/1 var(--f-mono); color: var(--muted);
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px;
  padding: 4px 7px; background: var(--paper-2);
}
.pal__list { max-height: min(52vh, 430px); overflow: auto; padding: 8px; }
.pal__sec { font: 700 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 6px; }
.pal__row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; cursor: pointer; }
.pal__row.active { background: color-mix(in srgb, var(--accent) 9%, var(--paper)); }
.pal__row.active .pal__ic { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.pal__ic { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 10%, var(--paper)); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 13%, transparent); }
.pal__ic .ic { width: 16px; height: 16px; }
.pal__t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pal__t b { font: 600 14px/1.35 var(--f-body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal__t small { font: 400 12px/1.45 var(--f-body); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal__cat { flex: none; font: 600 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border: 1px solid var(--line); padding: 4px 7px; border-radius: 999px; }
.pal__star { width: 28px; height: 28px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; flex: none; transition: color .15s ease, background .15s ease; }
.pal__star:hover { color: var(--accent); background: var(--paper-2); }
.pal__star.is-fav { color: var(--accent); }
.pal__star .ic { width: 15px; height: 15px; }
.pal__row mark { background: color-mix(in srgb, var(--accent) 24%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
.pal__empty { padding: 26px 16px; text-align: center; color: var(--muted); font-size: 13.5px; }
.pal__hint { display: flex; gap: 14px; align-items: center; padding: 10px 16px; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); color: var(--muted); font: 500 11.5px/1 var(--f-body); }
.pal__hint b { font-weight: 650; color: var(--ink-2); }
.pal__count { margin-left: auto; font: 600 10.5px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }

/* ---------- quick bar (pins + recents) ---------- */
.quickbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 22px 0 8px; padding: 12px 14px;
  border: 1px dashed color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 4%, var(--paper));
  animation: fadeInUp .4s ease both;
}
.quickbar[hidden] { display: none; }
.quickbar .label { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-2); }
.quickbar .label + .label { margin-left: 10px; }
.quickbar .label .ic { width: 12px; height: 12px; }
.qb-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper);
  color: var(--ink-2); text-decoration: none;
  font: 550 12.5px/1 var(--f-body); box-shadow: var(--sh-sm);
  transition: transform .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.qb-chip:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); color: var(--accent-2); text-decoration: none; box-shadow: var(--sh-md); }
.qb-chip .ic { width: 13px; height: 13px; color: var(--accent); }

/* ---------- back to top ---------- */
.totop {
  position: fixed; right: 18px; bottom: 18px; z-index: 120;
  width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border: 1px solid var(--line-strong); color: var(--ink-2);
  box-shadow: var(--sh-md); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(14px) scale(.92); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, border-color .2s ease, color .2s ease;
}
.totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-2px); }
.totop .ic { width: 18px; height: 18px; }

/* ---------- cursor glow ---------- */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 420px; height: 420px;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 62%);
  opacity: 0; transition: opacity .6s ease;
  will-change: transform;
}
.cursor-glow.on { opacity: 1; }

/* ---------- custom cursor (dot + lagging ring) ---------- */
html.dp-cursor-on { cursor: none; }
html.dp-cursor-on a, html.dp-cursor-on button, html.dp-cursor-on summary, html.dp-cursor-on label, html.dp-cursor-on [role="button"], html.dp-cursor-on select { cursor: none; }
.dp-cursor {
  position: fixed; top: 0; left: 0; width: 14px; height: 14px;
  border-radius: 50%; pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  background: var(--cursor-cat, var(--accent));
  box-shadow: 0 0 0 2px rgb(255 255 255 / .8), 0 0 12px 2px var(--cursor-cat, var(--accent));
  will-change: transform;
  transition: background .2s ease, width .2s ease, height .2s ease, border-radius .2s ease, opacity .18s ease, box-shadow .2s ease;
  opacity: 0;
}
.dp-cursor.is-on { opacity: 1; }
.dp-cursor.is-text {
  width: 2px; height: 18px; border-radius: 1px;
}
.dp-cursor-ring {
  position: fixed; top: 0; left: 0; width: 36px; height: 36px;
  border-radius: 50%; pointer-events: none; z-index: 9998;
  transform: translate(-50%, -50%);
  border: 1.5px solid var(--cursor-cat, var(--accent));
  opacity: 0;
  will-change: transform;
  transition: border-color .2s ease, width .2s ease, height .2s ease, opacity .2s ease;
}
.dp-cursor-ring.is-on { opacity: .6; }
.dp-cursor-ring.is-hot {
  width: 48px; height: 48px; opacity: .8;
  border-width: 2px;
}
.dp-cursor-ring.is-text { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.dp-cursor-on { cursor: auto; }
  .dp-cursor, .dp-cursor-ring { display: none; }
}

/* ---------- success sparks ---------- */
.spark {
  position: fixed; z-index: 250; width: 7px; height: 7px; border-radius: 2px;
  pointer-events: none;
  animation: sparkFly var(--dur, .85s) cubic-bezier(.18,.62,.3,1) forwards;
}
@keyframes sparkFly {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, -60px)) scale(.35) rotate(var(--rot, 90deg)); opacity: 0; }
}

/* ---------- results cascade in ---------- */
.rcard { animation: fadeInUp .45s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 70ms); }

/* ---------- filter helpers ---------- */
.filter-empty { margin: 18px 0; }
.util-bar + .filter-empty { margin-top: -8px; }

/* ============================================================
   TOOL PAGES — how-to strip · friendlier dropzone
   ============================================================ */

.board__main { min-width: 0; }

.howto { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.howto li {
  display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: start;
  background: var(--paper); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 14px; padding: 13px 14px; box-shadow: var(--sh-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.howto li:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.howto__n {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--accent) 22%, var(--paper)), color-mix(in srgb, var(--accent) 8%, var(--paper)));
  color: var(--accent-2); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  font: 700 12.5px/1 var(--f-mono);
}
.howto b { display: block; font: 650 13.5px/1.35 var(--f-body); letter-spacing: -.01em; }
.howto p { margin: 3px 0 0; font: 400 12.5px/1.5 var(--f-body); color: var(--muted); }
@media (max-width: 900px) { .howto { grid-template-columns: 1fr; } }

.dz__safety {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 2px; padding: 6px 11px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--good) 26%, var(--line));
  background: color-mix(in srgb, var(--good-soft) 60%, var(--paper));
  color: var(--good); font: 550 11px/1 var(--f-mono);
}
.dz__safety .ic { width: 12px; height: 12px; }
html[data-theme="dark"] .dz__safety { background: color-mix(in srgb, var(--good) 12%, var(--paper)); }
.dz__icon {
  position: relative;
  background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--accent) 26%, var(--paper)), var(--accent-soft));
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: transform .25s ease;
}
.dz:hover .dz__icon, .dz--over .dz__icon { transform: translateY(-2px) scale(1.04); }
.dz__icon::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  animation: dzRing 2.8s ease-out infinite; pointer-events: none;
}
@keyframes dzRing { 0% { transform: scale(.82); opacity: .7; } 70%, 100% { transform: scale(1.22); opacity: 0; } }
.dz--over { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent); }
.dz--has-files { min-height: 132px; padding: 22px 20px 18px; }
.dz--has-files .dz__icon { width: 46px; height: 46px; }
.dz--has-files .dz__icon .ic { width: 21px; height: 21px; }
.dz--has-files .dz__t { font-size: 15.5px; }
.dz--has-files .dz__inner { gap: 7px; }
@media (prefers-reduced-motion: reduce) { .dz__icon::after { animation: none; opacity: .4; } }

/* ============================================================
   AMBIENT BACKGROUND — a full-page aurora, not a single top glow
   ============================================================ */
.bg-anim { position: fixed; inset: 0; height: 100dvh; overflow: hidden; pointer-events: none; z-index: -1; }
.bg-anim i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.bg-anim__b--1 {
  width: 720px; height: 620px; left: -8%; top: -200px; opacity: .62;
  background: radial-gradient(circle at 42% 42%, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 66%);
  filter: blur(64px); animation: bgDrift1 26s ease-in-out infinite alternate;
}
.bg-anim__b--2 {
  width: 640px; height: 560px; right: -8%; top: -220px; opacity: .58;
  background: radial-gradient(circle at 55% 40%, color-mix(in srgb, var(--accent-3) 30%, transparent) 0%, transparent 66%);
  filter: blur(70px); animation: bgDrift2 30s ease-in-out infinite alternate;
}
.bg-anim__b--3 {
  width: 560px; height: 500px; left: 34%; top: -140px; opacity: .55;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--amber) 28%, transparent) 0%, transparent 66%);
  filter: blur(72px); animation: bgDrift3 34s ease-in-out infinite alternate;
}
.bg-anim__b--4 {
  width: 620px; height: 560px; right: -10%; bottom: -240px; opacity: .5;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent-4) 26%, transparent) 0%, transparent 66%);
  filter: blur(78px); animation: bgDrift2 38s ease-in-out infinite alternate-reverse;
}
.bg-anim__b--5 {
  width: 540px; height: 480px; left: -8%; bottom: -220px; opacity: .42;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--rose) 26%, transparent) 0%, transparent 66%);
  filter: blur(80px); animation: bgDrift1 42s ease-in-out infinite alternate-reverse;
}
.bg-anim__sweep {
  top: -30%; left: 0; width: 26%; height: 160%; border-radius: 0;
  background: linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--accent) 12%, transparent) 45%, transparent 90%);
  filter: blur(30px); opacity: .75;
  transform: rotate(12deg) translateX(-60vw);
  animation: bgSweep 18s ease-in-out infinite;
}
@keyframes bgDrift1 { to { transform: translate3d(140px, 80px, 0) scale(1.16); } }
@keyframes bgDrift2 { to { transform: translate3d(-150px, 70px, 0) scale(1.12); } }
@keyframes bgDrift3 { to { transform: translate3d(90px, 110px, 0) scale(1.2); } }
@keyframes bgSweep { 0% { transform: rotate(12deg) translateX(-60vw); } 55%, 100% { transform: rotate(12deg) translateX(130vw); } }
html[data-theme="dark"] .bg-anim__b--1 { opacity: .58; }
html[data-theme="dark"] .bg-anim__b--2 { opacity: .54; }
html[data-theme="dark"] .bg-anim__b--3 { opacity: .46; }
html[data-theme="dark"] .bg-anim__b--4 { opacity: .5; }
html[data-theme="dark"] .bg-anim__b--5 { opacity: .44; }
html[data-theme="dark"] .bg-anim__sweep { opacity: .62; }
html[data-theme="dark"] .bg-anim__sweep {
  background: linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--accent-3) 18%, transparent) 38%, color-mix(in srgb, var(--accent-4) 14%, transparent) 58%, transparent 92%);
}
html[data-theme="dark"] .bg-anim__b--1 { background: radial-gradient(circle at 42% 42%, color-mix(in srgb, var(--accent) 42%, transparent) 0%, transparent 66%); }
html[data-theme="dark"] .bg-anim__b--2 { background: radial-gradient(circle at 55% 40%, color-mix(in srgb, var(--accent-3) 44%, transparent) 0%, transparent 66%); }
html[data-theme="dark"] .bg-anim__b--3 { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--amber) 36%, transparent) 0%, transparent 66%); }
html[data-theme="dark"] .bg-anim__b--4 { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent-4) 40%, transparent) 0%, transparent 66%); }
html[data-theme="dark"] .bg-anim__b--5 { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--rose) 38%, transparent) 0%, transparent 66%); }
@media (prefers-reduced-motion: reduce) { .bg-anim { display: none; } }

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 28px; }
@media (max-width: 860px) { .reviews { grid-template-columns: 1fr; } }
.review {
  position: relative; overflow: hidden;
  background: var(--paper); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 18px; padding: 22px 22px 20px; box-shadow: var(--sh-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.review:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.review::before {
  content: "—"; position: absolute; right: 16px; top: 2px;
  font: 700 96px/1 var(--f-display); color: color-mix(in srgb, var(--accent) 12%, transparent);
  pointer-events: none;
}
.review__stars { display: flex; gap: 3px; color: #f5a623; margin-bottom: 12px; }
.review__stars .ic { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.review blockquote { margin: 0 0 16px; font: 400 14.5px/1.75 var(--f-body); color: var(--ink-2); }
.review figcaption { display: flex; align-items: center; gap: 12px; }
.review__pic { width: 46px; height: 46px; border-radius: 13px; border: 1px solid var(--line); box-shadow: var(--sh-sm); background: var(--paper-2); flex: none; }
.review figcaption b { display: block; font: 650 13.5px/1.35 var(--f-body); }
.review figcaption span { font: 500 11.5px/1.4 var(--f-mono); color: var(--muted); }

/* ============================================================
   PREVIEWS — file chips with thumbnails, shared lightbox,
   result thumbnails, nicer sliders and a reset control
   ============================================================ */

/* file chips get a preview tile + eye button */
.filechip__pv {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  display: grid; place-items: center; overflow: hidden;
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--paper-2));
  color: var(--accent-2); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}
.filechip__pv img, .filechip__pv video { width: 100%; height: 100%; object-fit: cover; display: block; }
.filechip--has-pv { cursor: pointer; }
.filechip--has-pv:hover { border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 40%, var(--paper)); }
.filechip__nm { max-width: min(46vw, 260px); }
.filechip__pvbtn, .filechip__rm { border: 0; background: none; cursor: pointer; padding: 2px; color: var(--muted); display: grid; place-items: center; border-radius: 6px; }
.filechip__pvbtn:hover { color: var(--accent-2); background: var(--accent-soft); }
.filechip__rm:hover { color: var(--bad); background: var(--bad-soft); }
.files__sum { align-self: center; font: 500 11.5px/1 var(--f-mono); color: var(--muted); padding: 0 2px; }

/* result thumbnails that arrive asynchronously */
.rcard__thumb.is-wait { opacity: .35; }

/* the shared preview lightbox */
.lb { position: fixed; inset: 0; z-index: 340; display: grid; place-items: center; padding: 22px; opacity: 0; transition: opacity .18s ease; }
.lb--in { opacity: 1; }
.lb__back { position: absolute; inset: 0; background: rgb(10 12 18 / 55%); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.lb__card {
  position: relative; width: min(960px, 94vw); max-height: min(90vh, 920px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 18px; box-shadow: var(--sh-lg);
  transform: translateY(10px) scale(.985); transition: transform .2s cubic-bezier(.2, .7, .2, 1);
}
.lb--in .lb__card { transform: none; }
.lb__head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.lb__title { min-width: 0; flex: 1; }
.lb__title b { display: block; font: 650 13.5px/1.45 var(--f-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb__meta { font: 500 11px/1.4 var(--f-mono); color: var(--muted); }
.lb__tools { display: flex; align-items: center; gap: 8px; flex: none; }
.lb__x { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--paper); border-radius: 10px; cursor: pointer; color: var(--muted); transition: background .15s ease, color .15s ease, border-color .15s ease; }
.lb__x:hover { color: var(--bad); background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.lb__body { padding: 14px; overflow: auto; display: grid; place-items: center; min-height: 180px; background: color-mix(in srgb, var(--paper-2) 65%, var(--paper)); }
.lb__img { max-width: 100%; max-height: 70vh; border-radius: 10px; box-shadow: var(--sh-sm); background: #fff; }
.lb__media { max-width: 100%; max-height: 70vh; border-radius: 10px; background: #000; }
.lb__frame { width: 100%; height: 70vh; border: 0; border-radius: 10px; background: var(--paper); }
.lb__audio { display: grid; gap: 16px; justify-items: center; padding: 30px 20px; width: 100%; }
.lb__audio audio { width: min(460px, 100%); }
.lb__audio-ic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-2); }
.lb__audio-ic .ic { width: 30px; height: 30px; }
.lb__pre { margin: 0; max-height: 70vh; width: 100%; overflow: auto; white-space: pre-wrap; word-break: break-word; font: 400 12.5px/1.65 var(--f-mono); color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.lb__none { padding: 30px; color: var(--muted); text-align: center; }
html.lb-open { overflow: hidden; }

/* hide custom cursor when modal dialogs are open */
body.tp-open .dp-cursor,
body.tp-open .dp-cursor-ring,
body.fb-open .dp-cursor,
body.fb-open .dp-cursor-ring,
html.lb-open .dp-cursor,
html.lb-open .dp-cursor-ring {
  opacity: 0 !important;
}
body.tp-open, body.fb-open, html.lb-open {
  cursor: auto;
}
body.tp-open a, body.tp-open button, body.tp-open label, body.tp-open summary,
body.fb-open a, body.fb-open button, body.fb-open label, body.fb-open summary,
html.lb-open a, html.lb-open button, html.lb-open label, html.lb-open summary {
  cursor: auto;
}

/* disable custom cursor on touch devices */
@media (hover: none), (pointer: coarse) {
  html.dp-cursor-on { cursor: auto; }
  .dp-cursor, .dp-cursor-ring { display: none !important; }
  html.dp-cursor-on a, html.dp-cursor-on button, html.dp-cursor-on summary,
  html.dp-cursor-on label, html.dp-cursor-on [role="button"], html.dp-cursor-on select {
    cursor: auto;
  }
}
@media (prefers-reduced-motion: reduce) { .lb, .lb__card { transition: none; } }
@media (max-width: 620px) {
  .lb { padding: 0; }
  .lb__card { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; border: 0; }
  .lb__body { align-content: start; }
  .lb__img, .lb__media { max-height: 62dvh; }
  .lb__frame { height: 64dvh; }
}

/* sliders: filled track + hover thumb */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) var(--fill, 0%), color-mix(in srgb, var(--line) 90%, transparent) var(--fill, 0%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px;
  border-radius: 50%; background: var(--paper); border: 2px solid var(--accent);
  box-shadow: var(--sh-sm); transition: transform .15s ease;
}
input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus-visible::-webkit-slider-thumb { transform: scale(1.18); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--line) 90%, transparent); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent); }
input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--paper); border: 2px solid var(--accent); }
html[data-theme="dark"] input[type="range"]::-webkit-slider-thumb,
html[data-theme="dark"] input[type="range"]::-moz-range-thumb { background: var(--paper-2); }

/* reset control under a settings group */
.opts-reset-row { display: flex; justify-content: flex-end; margin-top: -2px; }
.opts-reset {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; cursor: pointer; padding: 5px 8px; border-radius: 8px;
  font: 550 12px/1 var(--f-body); color: var(--muted);
  transition: color .15s ease, background .15s ease;
}
.opts-reset:hover { color: var(--accent-2); background: var(--accent-soft); }
.opts-reset .ic { width: 13px; height: 13px; }

/* ---------- shared PDF page grid ---------- */
.pgrid-wrap { margin-top: 18px; }
.pgrid-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pgrid-bar__text { font: 500 12.5px/1.5 var(--f-mono); color: var(--muted); }
.pgrid-bar__actions { display: flex; gap: 7px; flex-wrap: wrap; }
.pgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px;
  margin-top: 12px; max-height: 560px; overflow: auto; padding: 2px; scrollbar-width: thin;
}
.pgrid__tile {
  position: relative; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--paper); padding: 6px; cursor: pointer; outline: none;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.pgrid__tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.pgrid__tile:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212, 160, 23, .22); }
.pgrid__tile.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.pgrid__tile.is-del { border-color: var(--bad); background: rgba(248, 81, 73, .06); }
.pgrid__tile.is-dragging { opacity: .45; }
.pgrid__tile.is-over { border-color: var(--accent); transform: scale(1.02); }
.pgrid__tile.is-error { border-color: var(--bad); }
.pgrid__thumb {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 150px; border-radius: 6px; background: var(--paper-2); overflow: hidden;
}
.pgrid__thumb canvas { display: block; max-width: 100%; max-height: 100%; }
.pgrid__num {
  position: absolute; top: 5px; left: 5px; min-width: 18px; padding: 1px 5px;
  border-radius: 20px; background: var(--paper); border: 1px solid var(--line);
  font: 600 10px/1.4 var(--f-mono); color: var(--muted); text-align: center;
}
.pgrid__pos {
  position: absolute; top: 5px; right: 5px; min-width: 18px; padding: 1px 5px;
  border-radius: 20px; background: var(--accent); color: #fff;
  font: 600 10px/1.4 var(--f-mono); text-align: center;
}
.pgrid__check {
  position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px;
  display: grid; place-items: center; border-radius: 50%; background: var(--accent);
  color: #fff; font: 700 12px/1 var(--f-body); opacity: 0; transform: scale(.6);
  transition: opacity .15s ease, transform .15s ease;
}
.pgrid__tile.is-on .pgrid__check, .pgrid__tile.is-del .pgrid__check { opacity: 1; transform: scale(1); }
.pgrid__tile.is-del .pgrid__check { background: var(--bad); }
.pgrid__foot { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 6px 2px 1px; }
.pgrid__label { font: 600 11px/1.4 var(--f-mono); color: var(--muted); }
.pgrid__move { display: flex; gap: 3px; }
.pgrid__arrow {
  width: 22px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 6px;
  background: var(--paper); color: var(--ink); font: 700 12px/1 var(--f-body); cursor: pointer;
}
.pgrid__arrow:hover { border-color: var(--accent); color: var(--accent); }
.pgrid__tile.is-wait .pgrid__thumb { animation: pgridPulse 1.4s ease-in-out infinite; }
@keyframes pgridPulse { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
.pgrid-error { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--bad); border-radius: 9px; color: var(--bad); font-size: 13px; }
@media (max-width: 560px) {
  .pgrid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); max-height: 460px; }
  .pgrid__thumb { height: 128px; }
}
@media (prefers-reduced-motion: reduce) {
  .pgrid__tile, .pgrid__check { transition: none; }
  .pgrid__tile.is-wait .pgrid__thumb { animation: none; }
}

/* ---------- sortable file list (drag or arrows) ---------- */
.sortable { display: grid; gap: 8px; }
.sortable__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 2px; font: 500 11.5px/1.4 var(--f-mono); color: var(--muted);
}
.sortable__row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); background: var(--paper); border-radius: 12px;
  box-shadow: var(--sh-sm); padding: 10px 12px; cursor: grab;
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
}
.sortable__row:hover { border-color: var(--accent); }
.sortable__row:active { cursor: grabbing; }
.sortable__row.is-dragging { opacity: .45; transform: scale(.985); }
.sortable__row.is-over { border-color: var(--accent); transform: translateY(3px); box-shadow: var(--sh-sm); }
.sortable__row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sortable__num { width: 22px; flex: none; text-align: right; font: 600 12px/1 var(--f-mono); color: var(--muted); }
.sortable__grip { flex: none; color: var(--muted); opacity: .55; font-size: 15px; line-height: 1; letter-spacing: -1px; }
.sortable__thumb {
  width: 44px; height: 44px; flex: none; object-fit: cover;
  border: 1px solid var(--line); border-radius: 9px; background: var(--paper-2);
}
.sortable__body { min-width: 0; flex: 1; }
.sortable__name { font: 600 13.5px/1.35 var(--f-body); word-break: break-all; }
.sortable__meta { margin-top: 2px; font: 500 11px/1.5 var(--f-mono); color: var(--muted); }
.sortable__actions { display: flex; gap: 6px; flex: none; }
@media (max-width: 560px) {
  .sortable__grip { display: none; }
  .sortable__thumb { width: 38px; height: 38px; }
  .sortable__name { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .sortable__row, .sortable__row.is-over { transition: none; transform: none; }
}

/* ---------- live preview (canvas stage) ---------- */
.preview {
  display: grid; place-items: center; align-content: center; min-height: 96px; padding: 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  background-image: repeating-conic-gradient(var(--paper-2) 0% 25%, transparent 0% 50%);
  background-size: 18px 18px; background-position: 50% 50%;
}
.preview canvas { max-width: 100%; border-radius: 6px; box-shadow: var(--sh-sm); }
.preview__empty { font: 500 12px/1.4 var(--f-mono); color: var(--muted); }
.preview__row { display: flex; align-items: flex-end; justify-content: center; gap: 14px; flex-wrap: wrap; }
.preview__item { text-align: center; }
.preview__item canvas { display: block; margin: 0 auto; box-shadow: var(--sh-sm); border-radius: 4px; }
.preview__item span { display: block; margin-top: 5px; font: 500 10.5px/1.4 var(--f-mono); color: var(--muted); }

/* ---------- media scrubber ---------- */
.scrub { display: grid; gap: 12px; margin-top: 18px; }
.scrub__media { width: 100%; max-height: 340px; background: #000; border: 1.5px solid var(--ink); border-radius: 10px; }
audio.scrub__media { max-height: none; height: 46px; background: transparent; border-radius: 8px; }
.scrub__timeline { position: relative; height: 46px; cursor: pointer; touch-action: none; user-select: none; }
.scrub--wave .scrub__timeline { height: 80px; }
.scrub__wave { position: absolute; left: 8px; right: 8px; top: 0; bottom: 0; width: calc(100% - 16px); height: 100%; pointer-events: none; }
.scrub__track { position: absolute; left: 8px; right: 8px; top: 50%; height: 4px; margin-top: -2px; background: var(--line); border-radius: 2px; }
.scrub__fill { position: absolute; top: 50%; height: 4px; margin-top: -2px; background: var(--accent); border-radius: 2px; }
.scrub__head { position: absolute; top: 8px; bottom: 8px; width: 1.5px; margin-left: -0.75px; background: var(--ink); opacity: .55; pointer-events: none; }
.scrub__handle { position: absolute; top: 50%; width: 16px; height: 26px; margin-left: -8px; margin-top: -13px; padding: 0; background: var(--paper); border: 2px solid var(--ink); border-radius: 4px; box-shadow: var(--sh-sm); cursor: ew-resize; }
.scrub__handle::after { content: ""; position: absolute; inset: 5px 4px; border-left: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); opacity: .45; }
.scrub__handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.scrub__bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.scrub__btns { display: flex; gap: 6px; flex-wrap: wrap; }
.scrub__btns .btn { padding: 6px 10px; font-size: 12px; border-radius: var(--r-sm); }
.scrub__readout { font-size: 12px; color: var(--muted); }
.scrub__readout b { color: var(--ink); font-weight: 600; }
@media (max-width: 620px) { .scrub__readout { width: 100%; } }

/* ============================================================
   SITE PAGES, GUIDES, CONTACT & FOOTER
   ============================================================ */

/* footer: five real columns instead of four */
.footer-grid { grid-template-columns: 1.55fr repeat(4, 1fr); gap: 26px; }
.footer-brand__mail { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font: 600 12.5px/1 var(--f-mono); color: var(--accent-2); text-decoration: none; }
.footer-brand__mail:hover { text-decoration: underline; }
.footer-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.footer-badges span { font: 600 10px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: 6px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--paper); }
.footer-note__right { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.footer-note__right a { font: 500 11.5px/1 var(--f-mono); color: var(--muted); text-decoration: none; }
.footer-note__right a:hover { color: var(--accent-2); text-decoration: underline; }
@media (max-width: 1100px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; gap: 22px; } }

/* reading progress + article layout */
.reading-progress { position: fixed; top: 0; left: 0; z-index: 90; width: 100%; height: 3px; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 1px 6px color-mix(in srgb, var(--accent) 35%, transparent); transition: transform .1s linear; }
.article { max-width: 1100px; margin: 0 auto; padding-bottom: 20px; }
.article-head { max-width: 820px; padding: 22px 0 6px; }
.article-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 16px; font: 500 11.5px/1.5 var(--f-mono); color: var(--muted); }
.article-head h1 { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.08; letter-spacing: -.035em; margin: 0 0 16px; }
.article-head .dek { font-size: 17.5px; line-height: 1.75; color: var(--muted); max-width: 720px; margin: 0 0 10px; }
.article-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 30px; }
.article-side { position: sticky; top: 86px; display: grid; gap: 18px; }
.toc { border-left: 2px solid var(--line); padding-left: 14px; display: grid; gap: 2px; }
.toc .label { padding: 0 0 6px; }
.toc a { font: 500 12px/1.35 var(--f-body); color: var(--muted); text-decoration: none; padding: 5px 0; }
.toc a:hover, .toc a.is-active { color: var(--accent-2); }
.toc a.is-active { font-weight: 650; }
.share-row { display: flex; flex-wrap: wrap; gap: 6px; }
.article-body { max-width: 760px; }
.article-body h2 { scroll-margin-top: 88px; }
.article-body h3 { scroll-margin-top: 88px; }
.article-body a { color: var(--accent-2); text-underline-offset: 2px; }
.article-body table { width: 100%; border-collapse: collapse; margin: 22px 0 24px; font-size: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.article-body th, .article-body td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.article-body th { font: 700 11px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); background: var(--paper-2); }
.article-body tr:last-child td { border-bottom: 0; }
.article-body code { white-space: nowrap; }
.article-body .table-wrap { overflow-x: auto; }
.takeaways { max-width: 820px; margin: 24px 0 0; padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 4%, var(--paper)); }
.takeaways ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; font-size: 14.5px; color: var(--ink-2); }
.takeaways li::marker { color: var(--accent); }
.article-related { max-width: 820px; padding-top: 38px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.related-link { display: grid; gap: 4px; position: relative; padding: 15px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); text-decoration: none; color: var(--ink); transition: border-color .2s, transform .2s, box-shadow .2s; }
.related-link:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); transform: translateY(-1px); box-shadow: var(--sh-sm); text-decoration: none; }
.related-link b { font-size: 14px; }
.related-link span { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.related-link span:last-child { position: absolute; right: 14px; top: 13px; color: var(--accent); font-size: 16px; }
.author-box { display: flex; gap: 16px; align-items: flex-start; max-width: 820px; margin-top: 42px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.author-box__mark { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--accent); color: #fff; font: 700 20px/1 var(--f-display); }
.author-box b { font-size: 14px; }
.author-box p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.article-nav { display: flex; justify-content: space-between; gap: 14px; max-width: 820px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.article-nav__item { display: grid; gap: 5px; max-width: 48%; text-decoration: none; color: var(--ink); padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.article-nav__item span { font: 600 10px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.article-nav__item b { font-size: 13px; line-height: 1.4; }
.article-nav__item:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); text-decoration: none; }
.article-nav__item--next { text-align: right; }

/* blog index */
.post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.post-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); text-decoration: none; color: var(--ink); transition: border-color .2s, transform .2s, box-shadow .2s; }
.post-card:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); transform: translateY(-2px); box-shadow: var(--sh-md); text-decoration: none; }
.post-card--featured { grid-column: span 2; padding: 26px; background: radial-gradient(700px 200px at 10% 0%, color-mix(in srgb, var(--accent) 7%, var(--paper)) 0%, var(--paper) 100%); }
.post-card__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font: 500 10.5px/1.4 var(--f-mono); color: var(--muted); }
.post-card__cat { display: inline-flex; align-items: center; padding: 4px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-2); font: 700 10px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.post-card__title { font: 720 20px/1.25 var(--f-display); letter-spacing: -.02em; }
.post-card--featured .post-card__title { font-size: clamp(23px, 3vw, 30px); }
.post-card__dek { font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.post-card__more { margin-top: auto; padding-top: 6px; font: 650 12px/1 var(--f-body); color: var(--accent-2); display: inline-flex; gap: 6px; align-items: center; }
.post-card:hover .post-card__more span { transform: translateX(3px); }
.post-card__more span { transition: transform .2s; }
@media (max-width: 700px) { .post-grid { grid-template-columns: 1fr; } .post-card--featured { grid-column: span 1; } }

/* contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; align-items: start; margin-top: 24px; }
.contact-card { border: 1px solid var(--line); border-radius: 16px; background: var(--paper); padding: 22px; box-shadow: var(--sh-sm); }
.contact-card h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.02em; }
.contact-card > p { color: var(--muted); font-size: 14px; line-height: 1.65; }
.contact-form { display: grid; gap: 14px; margin-top: 18px; }
.contact-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-form textarea.input { min-height: 140px; resize: vertical; }
.contact-form .btn { justify-self: start; }
.form-status { min-height: 20px; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--good); }
.form-status.is-err { color: var(--bad); }
.contact-aside { display: grid; gap: 12px; }
.contact-mini { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.contact-mini b { display: block; font-size: 13.5px; margin-bottom: 4px; }
.contact-mini p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }

/* ---------- feedback dialog ---------- */
body.fb-open { overflow: hidden; }
#feedback { scroll-margin-top: 96px; }
.field > label span { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); }
.field-note { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fb {
  width: min(600px, calc(100vw - 32px)); max-width: 600px; margin: auto; padding: 0; border: 0;
  background: transparent; color: var(--ink);
}
.fb::backdrop { background: rgb(10 12 18 / .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fb__card {
  max-height: min(88vh, 760px); overflow: auto; padding: 24px;
  background: var(--paper); border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  border-radius: 18px; box-shadow: var(--sh-lg);
}
.fb[open] .fb__card { animation: fbIn .24s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes fbIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.fb__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.fb__head h2 { margin: 5px 0 0; font-size: 22px; letter-spacing: -.02em; }
.fb__close {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2);
  color: var(--muted); cursor: pointer;
}
.fb__close:hover { color: var(--ink); border-color: var(--line-strong); }
.fb__close .ic { width: 16px; height: 16px; }
.fb__intro { margin: 10px 0 16px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.fb__rating-row { display: flex; flex-wrap: wrap; gap: 8px; }
.fb__rate { position: relative; display: inline-flex; cursor: pointer; }
.fb__rate input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fb__rate span {
  display: grid; place-items: center; width: 46px; height: 40px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2);
  font: 600 13px/1 var(--f-mono); color: var(--ink-2); transition: background .15s, color .15s, border-color .15s;
}
.fb__rate input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.fb__rate input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.fb__fallback {
  padding: 12px; border: 1px dashed var(--line-strong); border-radius: 12px;
  background: var(--paper-2);
}
.fb__fallback p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.fb__fallback .btn-row { margin: 0; }
@media (max-width: 640px) {
  .fb { width: 100%; max-width: none; margin: auto 0 0; }
  .fb__card { max-height: 88dvh; padding: 20px; border-radius: 18px 18px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .fb[open] .fb__card { animation: none; } }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } .contact-form .row2 { grid-template-columns: 1fr; } }

/* trust / about / security blocks */
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 8px; }
.trust-card { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.trust-card b { display: block; font-size: 14px; margin-bottom: 5px; }
.trust-card p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.trust-card .ic { width: 20px; height: 20px; color: var(--accent); margin-bottom: 10px; }
@media (max-width: 760px) { .trust-grid { grid-template-columns: 1fr; } }
.steps-list { display: grid; gap: 10px; margin: 20px 0; counter-reset: step; }
.steps-list li { list-style: none; display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.steps-list li::before { counter-increment: step; content: counter(step); width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-2); font: 700 12px/1 var(--f-mono); }
.steps-list b { display: block; font-size: 13.5px; margin-bottom: 3px; }
.steps-list p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.legal-toc { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 14px 0 0; border-top: 1px solid var(--line); margin: 8px 0 26px; }
.legal-toc a { font: 500 12px/1.4 var(--f-mono); color: var(--muted); text-decoration: none; }
.legal-toc a:hover { color: var(--accent-2); text-decoration: underline; }
.updated { font: 500 11px/1.5 var(--f-mono); color: var(--muted); }
.notice { border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-left: 3px solid var(--accent); border-radius: 10px; padding: 14px 16px; background: color-mix(in srgb, var(--accent) 3%, var(--paper)); font-size: 14px; line-height: 1.65; }
.notice b { color: var(--ink); }

/* sitemap */
.sitemap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 30px; margin-top: 26px; }
.sitemap-group h2 { font-size: 17px; margin: 0 0 10px; }
.sitemap-group ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.sitemap-group a { font-size: 13px; color: var(--ink-2); text-decoration: none; }
.sitemap-group a:hover { color: var(--accent-2); text-decoration: underline; }
@media (max-width: 820px) { .sitemap-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .sitemap-grid { grid-template-columns: 1fr; } }

/* faq filter */
.faq-filter { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 20px 0 8px; }
.faq-filter .input { max-width: 380px; }
.faq-filter .label { color: var(--muted); }
.faq details[hidden] { display: none; }
.faq-empty { display: none; padding: 14px 0; color: var(--muted); font-size: 14px; }
.faq-empty.is-on { display: block; }

/* 404 helpers */
.lost-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px 0 0; }
.lost-links a { font: 600 12px/1 var(--f-body); padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); text-decoration: none; color: var(--ink-2); }
.lost-links a:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); color: var(--accent-2); }

/* article sidebar responsive */
@media (max-width: 920px) {
  .article-layout { grid-template-columns: 1fr; gap: 18px; }
  .article-side { position: static; order: -1; }
  .toc { display: none; }
  .share-row { margin-bottom: 4px; }
  .related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .article-head { padding-top: 10px; }
  .article-head h1 { font-size: clamp(27px, 8vw, 36px); }
  .author-box { flex-direction: column; }
  .article-nav { flex-direction: column; }
  .article-nav__item { max-width: 100%; }
  .article-nav__item--next { text-align: left; }
}

.use-title { display: block; margin: 4px 0 8px; font: 720 17px/1.3 var(--f-display); letter-spacing: -.015em; color: var(--ink); }
.panel p:last-child { margin-bottom: 0; }

/* ============================================================
   2026 VISUAL REFRESH
   boot screen · saturated controls · card depth · glass chrome
   ============================================================ */

/* ---------- boot / loading screen ---------- */
.boot {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background:
    radial-gradient(700px 500px at 22% 18%, color-mix(in srgb, var(--accent) 16%, #fff) 0%, transparent 62%),
    radial-gradient(620px 520px at 82% 78%, color-mix(in srgb, var(--accent-3) 12%, #fff) 0%, transparent 62%),
    radial-gradient(520px 420px at 70% 10%, color-mix(in srgb, var(--amber) 14%, #fff) 0%, transparent 62%),
    var(--page-solid);
  animation: bootOut .55s ease 3.2s forwards;
}
html[data-theme="dark"] .boot {
  background:
    radial-gradient(700px 500px at 22% 18%, color-mix(in srgb, var(--accent) 16%, #0b0d13) 0%, transparent 62%),
    radial-gradient(620px 520px at 82% 78%, color-mix(in srgb, var(--accent-3) 18%, #0b0d13) 0%, transparent 62%),
    radial-gradient(520px 420px at 70% 10%, color-mix(in srgb, var(--amber) 8%, #0b0d13) 0%, transparent 62%),
    var(--page-solid);
}
.boot.is-done { animation: bootOut .5s cubic-bezier(.4, 0, .2, 1) forwards; }
.boot__inner { display: grid; justify-items: center; gap: 14px; }
.boot__mark {
  position: relative; width: 64px; height: 64px;
  display: grid; place-items: center; border-radius: 20px;
  color: #fff; font: 700 27px/1 var(--f-display);
  background: conic-gradient(from 210deg at 50% 50%, var(--accent), var(--rose), var(--accent-3), var(--amber), var(--accent));
  box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--accent) 75%, transparent), inset 0 1px 0 rgb(255 255 255 / .35);
  animation: bootPulse 1.5s ease-in-out infinite;
}
.boot__mark::after {
  content: ""; position: absolute; inset: -9px; border-radius: 28px;
  background: conic-gradient(from 0deg, transparent 0 52%, color-mix(in srgb, var(--accent) 80%, transparent) 72%, var(--rose) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: bootSpin 1s linear infinite;
}
.boot__word { font: 700 21px/1 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
.boot__word span { color: var(--accent); }
.boot__track { width: 172px; height: 3px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.boot__track i { display: block; width: 45%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--rose), var(--accent-3)); animation: bootBar 1.15s cubic-bezier(.4, 0, .2, 1) infinite; }
.boot__note { font: 600 9.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
@keyframes bootSpin { to { transform: rotate(1turn); } }
@keyframes bootPulse { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.04); } }
@keyframes bootBar { 0% { transform: translateX(-120%); } 100% { transform: translateX(330%); } }
@keyframes bootOut { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .boot { animation: bootOut .01s linear forwards; }
  .boot__mark, .boot__mark::after, .boot__track i { animation: none; }
}

/* ---------- brand + header depth ---------- */
.brand .brand__mark {
  background: conic-gradient(from 210deg at 50% 50%, var(--accent), var(--rose), var(--accent-3), var(--amber), var(--accent));
  border-color: color-mix(in srgb, #fff 35%, transparent);
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 1px 0 rgb(255 255 255 / .3);
}
.brand__text { display: inline-flex; flex-direction: column; gap: 3px; }
.nav a:hover { transform: translateY(-1px); }
.nav a { transition: background .16s ease, color .16s ease, transform .16s ease; }
.nav-drop__panel::-webkit-scrollbar { width: 8px; }
.nav-drop__panel::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 34%, var(--line-strong)); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }

/* ---------- saturated buttons ---------- */
.btn { border-radius: 11px; }
.btn--primary {
  background: linear-gradient(135deg, #ff7a47 0%, var(--accent) 46%, var(--rose) 100%);
  border-color: color-mix(in srgb, #fff 22%, transparent);
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--accent) 85%, transparent), inset 0 1px 0 rgb(255 255 255 / .3);
}
.btn--primary:hover {
  background: linear-gradient(135deg, #ff8a5a 0%, #f34322 46%, #ff2d72 100%);
  box-shadow: 0 18px 36px -16px color-mix(in srgb, var(--accent) 85%, transparent), inset 0 1px 0 rgb(255 255 255 / .34);
  transform: translateY(-1px);
}
.btn--ghost {
  background: color-mix(in srgb, var(--paper) 66%, transparent);
  backdrop-filter: blur(10px) saturate(1.15);
  border-color: color-mix(in srgb, var(--line-strong) 75%, transparent);
}
.btn--ghost:hover { background: var(--paper); border-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong)); }

/* ---------- section rhythm ---------- */
.sec-head h2 { font-size: clamp(28px, 3.2vw, 38px); line-height: 1.08; }
.sec-head h2::before {
  content: ""; display: block; width: 46px; height: 3px; border-radius: 3px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, var(--accent), var(--rose) 55%, var(--accent-3));
}
.sec-head .cat-dek { font-size: 15px; line-height: 1.75; }
.cat-head h2 { font-size: clamp(24px, 2.6vw, 31px); }
.tool-head h1 { font-size: clamp(34px, 4.6vw, 52px); letter-spacing: -.032em; }
.article-head h1 { font-size: clamp(32px, 4.8vw, 50px); }
.crumbs { font-size: 12px; }

/* ---------- cards: softer depth, graded by category ---------- */
.tcard {
  background:
    radial-gradient(130% 90% at 15% 0%, color-mix(in srgb, var(--cat, var(--accent)) 8%, transparent), transparent 56%),
    linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--paper) 95%, var(--cat, var(--accent)) 3%) 100%);
  border-color: color-mix(in srgb, var(--line) 82%, var(--cat, var(--accent)) 6%);
  box-shadow: 0 1px 0 #fff inset, var(--sh-sm);
}
html[data-theme="dark"] .tcard { background: radial-gradient(130% 90% at 15% 0%, color-mix(in srgb, var(--cat, var(--accent)) 12%, transparent), transparent 56%), linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 93%, var(--cat, var(--accent)) 5%) 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .04), var(--sh-sm); }
.tcard:hover {
  transform: perspective(760px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px) scale(1.018);
  box-shadow: 0 30px 58px -26px color-mix(in srgb, var(--cat, var(--accent)) 52%, transparent), 0 14px 28px -16px rgb(30 20 50 / .3), 0 0 0 1px color-mix(in srgb, var(--cat, var(--accent)) 26%, transparent);
}
.tcard__ico { background: linear-gradient(145deg, color-mix(in srgb, var(--cat, var(--accent)) 18%, var(--paper)), color-mix(in srgb, var(--cat, var(--accent)) 5%, var(--paper))); }
.panel, .strip__item, .contact-card, .trust-card, .post-card, .related-link, .author-box {
  background: linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 97%, var(--accent) 1.5%) 100%);
}
html[data-theme="dark"] .panel, html[data-theme="dark"] .strip__item, html[data-theme="dark"] .post-card { background: var(--paper); }
.panel:hover, .strip__item:hover { box-shadow: 0 22px 44px -26px rgb(35 22 55 / .28); }

/* ---------- footer ---------- */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 62%, transparent) 0%, var(--paper) 40%);
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.site-footer::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 4%, color-mix(in srgb, var(--accent) 50%, transparent) 30%,
    color-mix(in srgb, var(--rose) 40%, transparent) 52%, color-mix(in srgb, var(--accent-3) 45%, transparent) 74%, transparent 96%);
  opacity: .6;
}

/* ---------- progress + reading bars ---------- */
.progress-bar, .reading-progress {
  background: linear-gradient(90deg, var(--accent), var(--rose) 35%, var(--accent-3) 70%, var(--accent-4));
  background-size: 300% 100%;
  animation: glowMove 6s linear infinite;
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ---------- small screens ---------- */
@media (max-width: 880px) {
  .nav {
    /* fully opaque: a 4% bleed was enough for the huge hero headline to
       ghost through the open menu on phones */
    background: var(--page-solid);
    backdrop-filter: none;
    max-height: calc(100dvh - 66px); overflow-y: auto; overscroll-behavior: contain;
    box-shadow: 0 30px 60px -30px rgb(30 20 50 / .4);
  }
}
@media (max-width: 640px) {
  .hero { padding-top: 36px; }
  .sec-head h2::before { margin-bottom: 12px; }
}
@media (max-width: 430px) {
  .hero__eyebrow { padding: 8px 12px; }
  .hero__eyebrow .label { letter-spacing: .08em; }
  .hero__stats { gap: 6px; }
  .hero__stats span { padding: 7px 10px; font-size: 12px; }
}

/* ---------- tool preview card ---------- */
.footer-preview-toggle { display: flex; align-items: center; width: max-content; min-height: 32px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.footer-preview-toggle[aria-pressed="false"] { color: var(--muted); }
.footer-sound { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
.footer-sound__toggle {
  position: relative; display: inline-flex; align-items: center; min-height: 34px; padding: 4px 12px 4px 5px;
  background: color-mix(in srgb, var(--accent) 8%, var(--paper)); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: 999px; cursor: pointer; transition: border-color .2s ease, background .2s ease;
}
.footer-sound__toggle:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); }
.footer-sound__toggle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line-strong); box-shadow: 0 2px 6px rgb(23 18 48 / .18);
  transform: translate(-50%, -50%) scale(0); transition: transform .28s cubic-bezier(.34, 1.56, .64, 1);
}
.footer-sound__toggle[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 14%, var(--paper)); border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); }
.footer-sound__toggle[aria-pressed="true"]::after { transform: translate(-50%, -50%) scale(1); }
.footer-sound__toggle[aria-pressed="false"] { opacity: .72; }
.footer-sound__vol { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font: 500 11px/1 var(--f-mono); }
.footer-sound__vol input { -webkit-appearance: none; appearance: none; width: 96px; height: 20px; background: transparent; cursor: pointer; }
.footer-sound__vol input::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: var(--line-strong); }
.footer-sound__vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent-2); margin-top: -5px; box-shadow: 0 1px 4px rgb(23 18 48 / .3); }
.footer-sound__vol input::-moz-range-track { height: 4px; border-radius: 99px; background: var(--line-strong); }
.footer-sound__vol input::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--accent-2); }
.footer-sound__vol b { min-width: 30px; color: var(--ink-2); font-weight: 600; }
body.tp-open { overflow: hidden; }
.tp {
  width: min(560px, calc(100vw - 32px)); max-width: 560px; margin: auto; padding: 0;
  border: 0; background: transparent; color: var(--ink);
}
.tp::backdrop { background: rgb(10 12 18 / .52); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tp__card {
  position: relative; max-height: min(88vh, 720px); overflow: auto; overscroll-behavior: contain;
  padding: 24px; background: var(--paper); border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 18px; box-shadow: var(--sh-lg);
}
.tp__card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, var(--cat, var(--accent)), color-mix(in srgb, var(--cat, var(--accent)) 25%, var(--accent-3)));
}
.tp[open] .tp__card { animation: tpIn .24s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes tpIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.tp__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tp__cat {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--cat, var(--accent)) 32%, transparent);
  border-radius: 999px; background: var(--cat-soft, var(--paper-2));
  color: var(--cat, var(--accent)); font: 700 10.5px/1 var(--f-mono);
  letter-spacing: .08em; text-transform: uppercase;
}
.tp__cat .ic { width: 13px; height: 13px; }
.tp__close {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2);
  color: var(--muted); cursor: pointer;
}
.tp__close:hover { color: var(--ink); border-color: var(--line-strong); }
.tp__close .ic { width: 16px; height: 16px; }
.tp__body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 20px; }
.tp__icon {
  width: 58px; height: 58px; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--cat, var(--accent)) 22%, var(--line));
  border-radius: 15px;
  background: linear-gradient(145deg, var(--cat-soft, var(--paper-2)), color-mix(in srgb, var(--cat, var(--accent)) 7%, var(--paper)));
  color: var(--cat, var(--accent));
  animation: tpIconPulse 2s ease-in-out infinite;
}
@keyframes tpIconPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--cat, var(--accent)) 30%, transparent); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 8px color-mix(in srgb, var(--cat, var(--accent)) 0%, transparent); }
}
.tp[open] .tp__icon {
  animation: tpIconIn .4s cubic-bezier(.16, 1, .3, 1) both, tpIconPulse 2s ease-in-out 0.4s infinite;
}
@keyframes tpIconIn {
  from { transform: scale(.6) rotate(-10deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}
.tp__icon .ic { width: 28px; height: 28px; }
.tp__title { margin: 0; font-size: 25px; line-height: 1.08; letter-spacing: -.025em; }
.tp__desc { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.tp__note {
  display: flex; align-items: flex-start; gap: 8px; margin: 18px 0 0; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2);
  color: var(--muted); font-size: 12px; line-height: 1.5;
}
.tp__note .ic { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--cat, var(--accent)); }
.tp__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.tp__actions .btn:first-child { flex: 1 1 160px; }
.tp__skip { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--muted); font-size: 12px; cursor: pointer; }
.tp__skip input { width: 15px; height: 15px; accent-color: var(--cat, var(--accent)); }
@media (max-width: 640px) {
  .tp { width: 100%; max-width: none; margin: auto 0 0; }
  .tp__card { max-height: 88dvh; padding: 20px; border-radius: 18px 18px 0 0; }
  .tp__body { grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
  .tp__icon { width: 48px; height: 48px; border-radius: 13px; }
  .tp__icon .ic { width: 24px; height: 24px; }
  .tp__title { font-size: 23px; }
  .tp__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .tp__actions .btn:first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .tp[open] .tp__card { animation: none; } }

/* ============================================================
   SHOWCASE — three illustrated before/after loops
   ============================================================ */
.showcase { padding-top: 30px; }
.showcase .sec-head { max-width: 720px; }
.showcase__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.show-card {
  --cat: var(--accent);
  --cat-soft: var(--accent-soft);
  position: relative; display: flex; flex-direction: column;
  padding: 18px; border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 18px; background: var(--paper);
  box-shadow: var(--sh-sm); overflow: hidden; isolation: isolate;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease, border-color .22s ease;
}
.show-card--pdf { --cat: var(--cat-pdf); --cat-soft: var(--cat-pdf-soft); }
.show-card--image { --cat: var(--cat-image); --cat-soft: var(--cat-image-soft); }
.show-card--media { --cat: var(--cat-media); --cat-soft: var(--cat-media-soft); }
.show-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--cat), color-mix(in srgb, var(--cat) 30%, var(--rose)));
  opacity: .8;
}
.show-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--cat) 30%, var(--line-strong));
  box-shadow: var(--sh-md), 0 0 0 1px color-mix(in srgb, var(--cat) 18%, transparent);
}
[data-theme="dark"] .show-card:hover { box-shadow: var(--sh-md), 0 0 0 1px color-mix(in srgb, var(--cat) 24%, transparent); }
.show-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.show-card__cat { display: inline-flex; align-items: center; gap: 6px; color: var(--cat); font: 700 10.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.show-card__cat .ic { width: 14px; height: 14px; }
.show-card__tag { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-2); color: var(--muted); font: 600 10px/1 var(--f-mono); white-space: nowrap; }
.show-stage {
  position: relative; margin: 15px 0 14px; min-height: 168px;
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  border-radius: 14px; overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--cat) 8%, transparent), transparent 70%),
    color-mix(in srgb, var(--paper-2) 70%, transparent);
}
.show-card__foot { margin-top: auto; }
.show-card__result { margin: 0; color: var(--ink); font: 650 14px/1.35 var(--f-body); letter-spacing: -.012em; }
.show-card__foot p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.show-card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--cat); font: 650 12.5px/1 var(--f-body); text-decoration: none; }
.show-card__link .ic { width: 14px; height: 14px; transition: transform .2s ease; }
.show-card__link:hover { text-decoration: underline; }
.show-card__link:hover .ic { transform: translateX(3px); }

/* merge */
.show-stage--merge { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); align-items: center; gap: 8px; padding: 16px 12px; }
.show-merge__in { display: grid; gap: 8px; min-width: 0; }
.show-file {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto; column-gap: 7px; align-items: center;
  min-width: 0; padding: 8px 9px; border: 1px solid color-mix(in srgb, var(--cat) 22%, var(--line));
  border-radius: 10px; background: var(--paper); box-shadow: var(--sh-sm);
}
.show-file > .ic { grid-row: 1 / 3; width: 17px; height: 17px; color: var(--cat); }
.show-file b { overflow: hidden; color: var(--ink); font: 650 10.5px/1.2 var(--f-body); text-overflow: ellipsis; white-space: nowrap; }
.show-file small { color: var(--muted); font: 500 9.5px/1 var(--f-mono); }
.show-file--out { border-color: color-mix(in srgb, var(--cat) 38%, var(--line)); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--cat) 45%, transparent); }
.show-check { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--good); color: #fff; }
.show-check .ic { width: 11px; height: 11px; color: #fff; }
.show-merge__mid { display: grid; justify-items: center; gap: 8px; }
.show-merge__ring { width: 28px; height: 28px; display: grid; place-items: center; border: 1px dashed color-mix(in srgb, var(--cat) 45%, transparent); border-radius: 50%; background: var(--cat-soft); color: var(--cat); }
.show-merge__ring .ic { width: 13px; height: 13px; }
.show-merge__track { width: 36px; height: 3px; overflow: hidden; border-radius: 3px; background: var(--line); }
.show-merge__track i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--cat), var(--rose)); transform-origin: left; }

/* image */
.show-stage--image { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px 14px 38px; }
.show-img { position: relative; display: grid; justify-items: center; gap: 3px; min-width: 0; }
.show-img b { max-width: 108px; overflow: hidden; color: var(--ink); font: 650 10px/1.2 var(--f-body); text-overflow: ellipsis; white-space: nowrap; }
.show-img small { color: var(--muted); font: 600 10px/1 var(--f-mono); }
.show-img--before small { color: var(--bad); }
.show-img--after small { color: var(--good); }
.show-thumb { display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--cat) 25%, var(--line)); border-radius: 10px; background: linear-gradient(145deg, color-mix(in srgb, var(--cat) 20%, var(--paper)), color-mix(in srgb, var(--rose) 12%, var(--paper))); color: var(--cat); }
.show-thumb--big { width: 64px; height: 64px; }
.show-thumb--small { width: 44px; height: 44px; }
.show-thumb .ic { width: 22px; height: 22px; }
.show-arrow { color: var(--muted); }
.show-arrow .ic { width: 16px; height: 16px; }
.show-badge { position: absolute; top: -7px; right: -10px; padding: 4px 6px; border: 1px solid color-mix(in srgb, var(--good) 40%, transparent); border-radius: 999px; background: var(--good-soft); color: var(--good); font: 700 9.5px/1 var(--f-mono); }
.show-meter { position: absolute; left: 18px; right: 18px; bottom: 16px; height: 4px; overflow: hidden; border-radius: 4px; background: var(--line); }
.show-meter i { display: block; width: 17%; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--good), color-mix(in srgb, var(--good) 55%, var(--cat))); transform-origin: left; }

/* video */
.show-stage--video { display: grid; align-content: center; gap: 12px; padding: 18px 14px; }
.show-film { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; height: 58px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--cat) 20%, var(--line)); border-radius: 10px; }
.show-film i { display: block; background: linear-gradient(135deg, color-mix(in srgb, var(--cat) 24%, var(--paper)), color-mix(in srgb, var(--accent-3) 18%, var(--paper))); }
.show-film i:nth-child(2) { background: linear-gradient(160deg, color-mix(in srgb, var(--cat) 16%, var(--paper)), color-mix(in srgb, var(--rose) 18%, var(--paper))); }
.show-film i:nth-child(3) { background: linear-gradient(120deg, color-mix(in srgb, var(--accent-3) 20%, var(--paper)), color-mix(in srgb, var(--cat) 14%, var(--paper))); }
.show-film i:nth-child(4) { background: linear-gradient(145deg, color-mix(in srgb, var(--rose) 16%, var(--paper)), color-mix(in srgb, var(--cat) 22%, var(--paper))); }
.show-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .16) 50%, transparent 70%); transform: translateX(-100%); }
.show-film__play { position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--page-solid) 70%, transparent); color: #fff; backdrop-filter: blur(4px); }
.show-film__play .ic { width: 14px; height: 14px; }
.show-timeline { position: relative; height: 8px; border-radius: 6px; background: var(--line); }
.show-timeline__base { position: absolute; inset: 0; border-radius: 6px; background: color-mix(in srgb, var(--line-strong) 55%, transparent); }
.show-timeline__pick { position: absolute; left: 0; top: 0; bottom: 0; width: 43%; border-radius: 6px; background: linear-gradient(90deg, var(--cat), var(--accent-2)); transform-origin: left; }
.show-timeline__pick i { position: absolute; top: 50%; right: 0; width: 8px; height: 14px; border-radius: 3px; background: #fff; transform: translate(50%, -50%); box-shadow: 0 1px 4px rgb(0 0 0 / .25); }
.show-timeline__head { position: absolute; top: -4px; bottom: -4px; left: 43%; width: 2px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cat) 30%, transparent); }
.show-times { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font: 600 10px/1 var(--f-mono); }
.show-times b { color: var(--cat); font-weight: 700; }

/* the loops run only while the card is in view */
.show-card.is-live .show-file--out { animation: showOut 6.4s ease both infinite; }
.show-card.is-live .show-merge__track i { animation: showTrack 6.4s ease-in-out both infinite; }
.show-card.is-live .show-merge__ring { animation: showRing 6.4s ease-in-out both infinite; }
.show-card.is-live .show-img--after { animation: showAfter 6.4s ease both infinite; }
.show-card.is-live .show-badge { animation: showBadge 6.4s cubic-bezier(.2, .8, .2, 1) both infinite; }
.show-card.is-live .show-meter i { animation: showMeter 6.4s ease-in-out both infinite; }
.show-card.is-live .show-timeline__pick { animation: showPick 6.4s ease-in-out both infinite; }
.show-card.is-live .show-timeline__head { animation: showHead 6.4s ease-in-out both infinite; }
.show-card.is-live .show-film::after { animation: showSweep 6.4s ease-in-out both infinite; }
.show-card.is-paused .show-stage *,
.show-card.is-paused .show-stage { animation-play-state: paused !important; }
@keyframes showOut {
  0%, 22% { opacity: 1; transform: none; }
  26%, 55% { opacity: 0; transform: translateY(6px) scale(.9); }
  62%, 100% { opacity: 1; transform: none; }
}
@keyframes showTrack {
  0%, 22% { transform: scaleX(1); }
  26% { transform: scaleX(0); }
  55%, 100% { transform: scaleX(1); }
}
@keyframes showRing {
  0%, 22% { transform: scale(1); }
  26% { transform: scale(.9); }
  42% { transform: scale(1.12); }
  55%, 100% { transform: scale(1); }
}
@keyframes showAfter {
  0%, 22% { opacity: 1; transform: none; }
  26%, 55% { opacity: 0; transform: scale(.82); }
  62%, 100% { opacity: 1; transform: none; }
}
@keyframes showBadge {
  0%, 22% { opacity: 1; transform: none; }
  26%, 60% { opacity: 0; transform: scale(.7) rotate(-6deg); }
  70%, 100% { opacity: 1; transform: none; }
}
@keyframes showMeter {
  0%, 22% { transform: scaleX(1); }
  26% { transform: scaleX(5.88); }
  55%, 100% { transform: scaleX(1); }
}
@keyframes showPick {
  0%, 22% { transform: scaleX(1); }
  26% { transform: scaleX(0); }
  55%, 100% { transform: scaleX(1); }
}
@keyframes showHead {
  0%, 22% { left: 43%; }
  26% { left: 0; }
  55%, 100% { left: 43%; }
}
@keyframes showSweep {
  0%, 22% { transform: translateX(100%); }
  26% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}

@media (max-width: 900px) {
  .showcase__grid { grid-template-columns: 1fr; }
  .show-stage { min-height: 150px; }
}
@media (max-width: 620px) {
  .showcase { padding-top: 10px; }
  .show-stage { min-height: 140px; }
  .show-stage--merge { grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr); gap: 6px; padding: 12px 10px; }
  .show-file { padding: 7px 8px; }
  .show-file b { font-size: 10px; }
  .show-file small { font-size: 9px; }
  .show-card__tag { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .show-card .show-stage *,
  .show-card .show-stage { animation: none !important; }
  .show-card .show-film::after { display: none !important; }
  .show-card .show-file--out,
  .show-card .show-img--after,
  .show-card .show-badge,
  .show-card .show-meter i,
  .show-card .show-timeline__pick,
  .show-card .show-timeline__head { opacity: 1 !important; transform: none !important; }
  .show-card .show-timeline__head { left: 43% !important; }
}

/* ---------- brand mark: the favicon logo (red square + white asterisk) ---------- */
.brand .brand__mark,
.boot__mark { background: #e8482b; }
.brand .brand__mark i { width: 100%; height: 100%; display: grid; place-items: center; }
.brand .brand__mark svg,
.boot__mark svg { width: 100%; height: 100%; display: block; }


/* ---------- flat mark: no border, no shadow, no rings ---------- */
.brand .brand__mark,
.brand:hover .brand__mark,
.brand:focus-visible .brand__mark,
.boot__mark {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background-image: none !important;
  animation: none !important;
}
.brand .brand__mark::before,
.brand .brand__mark::after,
.boot__mark::before,
.boot__mark::after { display: none !important; content: none !important; }

/* ============================================================
   header + footer: colour, depth, motion
   ============================================================ */

/* ---------- header: tinted glass with a moving colour edge ---------- */
.site-header {
  background:
    radial-gradient(460px 130px at 6% -20%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 72%),
    radial-gradient(420px 130px at 94% -10%, color-mix(in srgb, var(--accent-3) 14%, transparent) 0%, transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--page-solid, var(--page)) 86%, transparent) 0%,
      color-mix(in srgb, var(--page-solid, var(--page)) 70%, transparent) 100%);
  backdrop-filter: blur(20px) saturate(1.75);
  -webkit-backdrop-filter: blur(20px) saturate(1.75);
}
.site-header.is-stuck {
  background:
    radial-gradient(480px 140px at 6% -20%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 72%),
    radial-gradient(440px 140px at 94% -10%, color-mix(in srgb, var(--accent-3) 18%, transparent) 0%, transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--page-solid, var(--page)) 96%, transparent) 0%,
      color-mix(in srgb, var(--page-solid, var(--page)) 90%, transparent) 100%);
  box-shadow:
    0 18px 44px -32px color-mix(in srgb, var(--accent) 55%, transparent),
    0 1px 0 color-mix(in srgb, var(--accent) 12%, transparent);
}
.site-header::after {
  height: 2px;
  opacity: .95;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent) 18%,
    var(--rose) 38%,
    var(--accent-3) 60%,
    var(--accent-4) 80%,
    transparent 100%);
  background-size: 220% 100%;
  animation: headerLine 9s linear infinite;
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 42%, transparent);
}

/* nav pills */
.nav a {
  border-radius: 9px;
  border: 1px solid transparent;
}
.nav a:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent-2);
}
.nav a[aria-current="page"] {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 20%, var(--paper)) 0%,
    color-mix(in srgb, var(--accent) 9%, var(--paper)) 100%);
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--accent-2);
  box-shadow: 0 6px 18px -12px color-mix(in srgb, var(--accent) 70%, transparent);
}

/* icon buttons */
.sound-btn:hover, .theme-btn:hover, .nav-toggle:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}


/* ---------- footer: colour block, glow, watermark ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-top: 0;
  margin-top: 76px;
  background:
    radial-gradient(720px 340px at 4% -14%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 68%),
    radial-gradient(600px 320px at 94% -6%, color-mix(in srgb, var(--accent-3) 16%, transparent) 0%, transparent 68%),
    radial-gradient(700px 380px at 62% 112%, color-mix(in srgb, var(--rose) 11%, transparent) 0%, transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--paper) 90%, var(--accent) 10%) 0%,
      var(--paper) 58%);
}
html[data-theme="dark"] .site-footer {
  background:
    radial-gradient(760px 360px at 4% -14%, rgb(255 107 71 / 22%) 0%, transparent 68%),
    radial-gradient(640px 340px at 94% -6%, rgb(169 139 255 / 20%) 0%, transparent 68%),
    radial-gradient(720px 400px at 62% 112%, rgb(255 92 149 / 14%) 0%, transparent 70%),
    linear-gradient(180deg, #12141d 0%, #0b0d13 100%);
}
.site-footer::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,
    var(--accent), var(--rose) 26%, var(--accent-3) 54%, var(--accent-4) 78%, var(--amber) 100%);
  background-size: 220% 100%;
  animation: glowMove 9s linear infinite;
  box-shadow: 0 3px 20px color-mix(in srgb, var(--accent) 40%, transparent);
  opacity: 1;
}
.site-footer::after {
  content: "PocketPDF";
  position: absolute; right: 14px; bottom: -22px; z-index: 0;
  font: 800 clamp(54px, 8.6vw, 116px)/1 var(--f-display);
  letter-spacing: -.055em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 30%, transparent);
  opacity: .55; pointer-events: none; user-select: none;
}
.site-footer > .wrap { position: relative; z-index: 1; }
@media (max-width: 760px) { .site-footer::after { display: none; } }

.footer-grid { padding-top: 54px; }
.footer-grid h3 {
  display: flex; align-items: center; gap: 8px;
  color: var(--accent-2);
}
.footer-grid h3::before {
  content: ""; width: 16px; height: 2px; border-radius: 2px; flex: none;
  background: linear-gradient(90deg, var(--accent), var(--rose));
}
.footer-grid a {
  position: relative;
  text-decoration: none;
  transition: color .18s ease, transform .18s ease;
}
.footer-grid a:hover {
  color: var(--accent);
  text-decoration: none;
  transform: translateX(4px);
}

.brand--footer .brand__text {
  font-size: 20px;
  background: linear-gradient(100deg, var(--ink) 0%, var(--accent-2) 55%, var(--accent-3) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.footer-blurb { color: color-mix(in srgb, var(--ink-2) 78%, var(--muted)); }

a.footer-brand__mail {
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
a.footer-brand__mail:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  text-decoration: none;
  transform: translateY(-1px);
}

.footer-badges span:nth-child(1) {
  color: var(--accent-2);
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.footer-badges span:nth-child(2) {
  color: color-mix(in srgb, var(--good) 82%, var(--ink));
  border-color: color-mix(in srgb, var(--good) 34%, var(--line));
  background: color-mix(in srgb, var(--good) 10%, transparent);
}
.footer-badges span:nth-child(3) {
  color: color-mix(in srgb, var(--accent-3) 82%, var(--ink));
  border-color: color-mix(in srgb, var(--accent-3) 34%, var(--line));
  background: color-mix(in srgb, var(--accent-3) 10%, transparent);
}

.footer-note {
  border-top-color: color-mix(in srgb, var(--accent) 20%, var(--line));
}
.footer-note__right a {
  padding: 5px 9px; border-radius: 7px;
  transition: background .18s ease, color .18s ease;
}
.footer-note__right a:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-2);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-header::after, .site-footer::before { animation: none !important; }
}

/* ---------- footer settings card ---------- */
.footer-prefs {
  display: grid; gap: 0;
  margin-top: 18px; padding: 5px;
  max-width: 340px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 14px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--paper) 93%, var(--accent) 7%) 0%,
      color-mix(in srgb, var(--paper) 99%, transparent) 100%);
  box-shadow:
    0 12px 26px -22px color-mix(in srgb, var(--accent) 65%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
}
html[data-theme="dark"] .footer-prefs {
  box-shadow:
    0 14px 30px -24px rgb(0 0 0 / .8),
    inset 0 1px 0 rgb(255 255 255 / .05);
}
.pref {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 9px 10px; border-radius: 10px;
  transition: background .18s ease;
}
.pref:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.pref + .pref { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.pref__label {
  font: 600 10.5px/1 var(--f-mono);
  text-transform: uppercase; letter-spacing: .11em;
  color: var(--muted);
}
.pref__switch {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 600 10.5px/1 var(--f-mono);
  color: var(--muted);
  transition: color .18s ease;
}
.pref__switch:hover { color: var(--ink); }
.pref__switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 999px; }
.pref__track {
  position: relative; width: 40px; height: 22px; flex: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .2);
  transition: background .22s ease, box-shadow .22s ease;
}
.pref__track i {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / .3);
  transition: transform .24s cubic-bezier(.34, 1.56, .64, 1);
}
.pref__switch[aria-pressed="true"] .pref__track {
  background: linear-gradient(135deg, var(--accent), var(--rose));
  box-shadow:
    0 0 12px color-mix(in srgb, var(--accent) 45%, transparent),
    inset 0 1px 0 rgb(255 255 255 / .25);
}
.pref__switch[aria-pressed="true"] .pref__track i { transform: translateX(18px); }
.pref__state { min-width: 20px; }
.pref__switch[aria-pressed="true"] .pref__state { color: var(--accent-2); }

.pref--vol {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 10px;
}
.pref--vol input[type="range"] {
  width: 100%; height: 22px; margin: 0; cursor: pointer;
  accent-color: var(--accent);
}
.pref--vol b {
  min-width: 34px; text-align: right;
  font: 600 10.5px/1 var(--f-mono); color: var(--ink-2);
}