/* ══════════════════════════════════════════════════════════════════
   PICSFIXKIT  —  shared stylesheet
   ══════════════════════════════════════════════════════════════════

   Loaded by index.html and all five tool pages.

   HOW THEMING WORKS
   Every rule below that needs an accent reads --tool / --tool-bg /
   --tool-border / --tool-rgb / --tool-ink. Those five variables are
   NOT defined here — each page sets them once in its own <style>:

       :root {
         --tool:var(--crop);  --tool-bg:var(--crop-bg);
         --tool-border:var(--crop-border); --tool-rgb:var(--crop-rgb);
         --tool-ink:#fff;
       }

   That single block is the only colour difference between the tool
   pages. Change it and the whole page re-themes.

   --tool-ink is the text colour for buttons FILLED with the accent:
   #fff everywhere except Pixel Resizer, whose gold needs dark ink.
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   SELF-HOSTED FONTS
   No Google Fonts request — the footer promises "no tracking",
   and a webfont call is a third-party request on every load.
   Only the 9 faces the pages actually use are shipped (~256 KB)
   rather than the full families.

   font-display:swap keeps text visible while they load, so a
   slow disk read never blanks the page.
   ══════════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'Geist';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('fonts/geist-sans-latin-300-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Geist';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/geist-sans-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Geist';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/geist-sans-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Geist';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/geist-sans-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Geist';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/geist-sans-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Geist Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/geist-mono-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Geist Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/geist-mono-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Serif';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Serif';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Poppins 700 — the wordmark, and the same face as the P inside the
   logo tile, so mark and name are one typeface. */
/* Poppins 700 — the wordmark only, and the same face as the P inside
   the logo tile, so the mark and the name are one typeface rather than
   two. Self-hosted like the rest: still no external request. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/poppins-latin-700-normal.woff2') format('woff2')}

/* ══════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0d1117;--surface:#161b22;--surface2:#1c2128;--surface3:#21262d;
  --border:#30363d;--border2:#484f58;
  --text:#e6edf3;--text2:#8b949e;
  /* #3d444d was 1.92:1 on --bg, far under the 4.5:1 AA floor.
     #7d8590 fixed that, but measured only 4.08:1 on --surface3 —
     where the version badge and several chips actually sit. #8b949e
     clears 4.5:1 on every surface in the ladder. */
  --text3:#8b949e;--hairline:#3d444d;
  /* Lead paragraph — the hero pitch. One step above --text2 (6.15:1)
     but well below --text (16.02:1), so it reads as body copy with a
     lift rather than a second heading. 7.76:1 here. */
  --text-lead:#9da7b3;
  --accent:#58a6ff;--accent2:#1f6feb;--accent-bg:#0c2d6b;
  --green:#3fb950;--green-bg:#0d2d1a;--green-border:#238636;
  --purple:#bc8cff;--purple-bg:#1a0d2e;--purple-border:#6e40c9;
  --yellow:#e3b341;--yellow-bg:#2b2109;--yellow-border:#9e7c17;
  --red:#f85149;

  /* ══ TOOL THEMES ══ identical block in all six PicsFixKit files.
     Semantic name per tool so markup says what it MEANS (--crop)
     rather than what it looks like (--purple). -rgb variants are
     bare channels for use inside rgba(). */
  --orange:#f08050;--orange-bg:#2d1a0d;--orange-border:#8a3a10;

  --crop:var(--purple);         --crop-bg:var(--purple-bg);
  --crop-border:var(--purple-border);   --crop-rgb:188,140,255;
  --crop-deep-rgb:111,64,201;
  --resize:var(--yellow);       --resize-bg:var(--yellow-bg);
  --resize-border:var(--yellow-border); --resize-rgb:227,179,65;
  --resize-deep-rgb:158,124,23;
  --compress:var(--green);      --compress-bg:var(--green-bg);
  --compress-border:var(--green-border);--compress-rgb:63,185,80;
  --compress-deep-rgb:35,134,54;
  --convert:var(--orange);      --convert-bg:var(--orange-bg);
  --convert-border:var(--orange-border);--convert-rgb:240,128,80;
  --convert-deep-rgb:138,58,16;
  --extract:var(--accent);      --extract-bg:var(--accent-bg);
  --extract-border:var(--accent2);      --extract-rgb:88,166,255;
  --extract-deep-rgb:31,111,235;

  --brand-grad:linear-gradient(135deg,var(--purple-border),var(--accent2));

  /* ══ BUTTON SCALE ══ fixed heights, so no button can drift by a
     pixel from font-metric or icon-size differences. */
  --btn-h-sm:36px;  --btn-px-sm:18px; --btn-fs-sm:.82rem;
  --btn-h-md:42px;  --btn-px-md:22px; --btn-fs-md:.85rem;
  --btn-h-lg:48px;  --btn-px-lg:26px; --btn-fs-lg:.9rem;
  --btn-r:10px;     --btn-min-w:200px;

  /* ══ MOTION ══ named by intent. */
  --dur-fast:.18s; --dur-base:.25s; --dur-slow:.4s; --dur-reveal:1s;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-inout:cubic-bezier(.4,0,.6,1);

  /* ══ UPLOAD ZONE ══
     One definition for all five tools. Each had drifted to its own
     hard-coded version of the same component. */
  --uz-bg:var(--surface);
  --uz-tint:rgba(var(--tool-rgb),.07);   /* faint wash of the accent */
  --uz-grid:rgba(255,255,255,.045);      /* graph-paper line          */
  --uz-border:rgba(var(--tool-rgb),.28);
  --uz-border-hover:rgba(var(--tool-rgb),.55);

  /* ══ MEDIA FRAMES ══
     Deliberately dark in BOTH themes. The screenshots and the video
     thumbnail are dark artwork; a light frame around dark artwork
     looks like a mistake, whereas a dark bezel reads as a device or a
     video player, which is normal on light sites. */
  /* The SHOWCASE follows the theme — light-mode screenshots exist, so
     a dark bezel around them would just be a dark rim. */
  --frame-bg:var(--surface2);
  --frame-line:rgba(255,255,255,.10);
  --frame-track:var(--surface3);
  /* The video frame follows the theme now that a light thumbnail
     exists. It was locked dark only because the artwork underneath
     was a dark photograph. */
  --vid-bg:var(--surface2);
  --vid-line:rgba(255,255,255,.10);
  --vid-track:var(--surface3);

  /* Scrim over the thumbnail, so the play button and caption stay
     readable. Dark artwork takes a dark scrim. */
  --vid-scrim-a:rgba(10,10,20,.55);
  --vid-scrim-b:rgba(10,10,20,.70);
  --vid-ink:#e6edf3;
  /* The crop demo dims everything outside its selection box. Black at
     55% is right on a dark panel; on a light one it turns the whole
     panel mid-grey, which is what made it look broken. */
  --crop-scrim:rgba(0,0,0,.55);
  /* Wordmark gradient. The first pass used the tile's own stops and
     "Kit" measured 7.5:1 against "PicsFix" at 16:1 — less than half the
     brightness. On a dark page that reads as less WEIGHT, not less
     colour, which is why the word looked thin. These stops sit at
     ~10.5:1, close enough that the two halves match. */
  /* Matched to .section-title em, which uses solid --purple. The
     wordmark previously ran its own gradient, so "Kit" in the nav
     and "One kit." in the headings were different colours. */
  --wm-a:var(--purple);--wm-b:var(--purple);
  /* No stroke. "Kit" is the same font at the same size and the same
     weight as "PicsFix" — the ONLY difference between them is colour.
     Any stroke, however small, makes one half physically thicker than
     the other, which is a real weight difference rather than an
     optical one. The brighter stops above already close the apparent
     gap without touching the letterforms. */
  --wm-stroke:transparent;--wm-stroke-w:0;
  /* Badges that sit ON TOP of a thumbnail. They need to contrast with
     the image beneath, not with the page, so both themes keep a dark
     scrim — but the INK must flip, which is what was missing. */
  /* Selection ring around a chosen thumbnail. On dark the accent already
     glows against the surface, so a 2px ring is enough. */
  --sel-ring-w:2px;--sel-ring-a:.65;--sel-glow-a:.22;
  /* The unchecked circle inside an overlay badge. It sits on the same
     scrim as the index number, so it flips with it. */
  --check-bg:rgba(255,255,255,.09);
  --check-line:rgba(255,255,255,.55);
  --check-bg-hover:rgba(255,255,255,.20);
  --check-line-hover:#ffffff;
  --overlay-chip:rgba(13,17,23,.78);
  --overlay-chip-ink:#e6edf3;
  --overlay-chip-line:rgba(255,255,255,.22);
  --dot-idle:rgba(255,255,255,.45);
  --dot-active:#ffffff;
  --dot-ring:rgba(0,0,0,.25);
  --frame-ring:0 0 0 0 transparent;   /* nothing extra needed on dark */

  /* ══ THEMED GRADIENTS ══
     Hard-coded gradients cannot be overridden by a token, so the four
     feature cards and the demo panels declare theirs here instead. */
  --fc1-grad:linear-gradient(145deg,#16082a 0%,#2a1260 55%,#1a0a35 100%);
  --fc2-grad:linear-gradient(145deg,#081828 0%,#0c2d5e 55%,#0a1e38 100%);
  --fc3-grad:linear-gradient(145deg,#0b2216 0%,#0e3e1a 55%,#0d2818 100%);
  --fc4-grad:linear-gradient(145deg,#231400 0%,#3e2800 55%,#2a1800 100%);
  --demo-grad:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);
  --dz-grad:linear-gradient(145deg,#1a0d08 0%,#241208 55%,#12100e 100%);

  /* ══ SURFACES THAT ASSUMED A DARK PAGE ══
     These were hard-coded rgba() literals. A light theme cannot
     override a literal, so they become tokens here. */
  --nav-bg:rgba(13,17,23,.97);          /* the near-opaque bar   */
  --overlay-bg:rgba(5,7,10,.7);         /* modal backdrop        */
  --shadow-sm:0 2px 8px rgba(0,0,0,.35);
  --shadow-md:0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 24px 70px rgba(0,0,0,.65);
  --img-bg:var(--surface2);             /* behind a loading image */

  /* 72, not 64: a 48px logo tile in a 64px bar leaves only 8px of
     breathing room above and below. */
  --nav-h:72px; --container:1400px; --gutter:2rem;

  --mono:'Geist Mono',monospace;
  --serif:'Instrument Serif',serif;
  /* Logo lockup only. Body text stays Geist and the hero
     headings stay Instrument Serif. */
  --logo:'Poppins',var(--sans);
  --sans:'Geist',sans-serif;
}

/* ══════════════════════════════════════════════════════════════════
   BASE  —  reset, focus, skip-link, animation pausing
   ══════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
.skip-link:focus{
  left:0;
}
/* Infinite loops pause once their section scrolls out of view. */
.anim-idle,.anim-idle *,.anim-idle *::before,.anim-idle *::after{
  animation-play-state:paused !important;
}
/* Visible keyboard focus — these files had none. */
:focus-visible{
  outline:2px solid var(--tool,var(--accent));
  outline-offset:3px;
  border-radius:4px;
}
/* ══ Shared behaviour layer ══ identical in all six files ════════
   Kept as one block so the later extraction into picsfixkit.css is a
   straight cut-and-paste. */

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 20px);
}
:focus:not(:focus-visible){
  outline:none;
}
body{font-family:var(--sans);background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6;overflow-x:hidden;}

/* ══════════════════════════════════════════════════════════════════
   NAV  —  the bar shared by all five tool pages
   ══════════════════════════════════════════════════════════════════ */
.nav-back{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:.82rem;
  color:var(--text2);
  text-decoration:none;
  padding:7px 16px;
  border-radius:9px;
  border:1px solid var(--border);
  background:var(--surface2);
  transition:all .2s;
  flex-shrink:0;
}
.nav-back:hover{
  color:var(--text);
  border-color:var(--border2);
  background:var(--surface3);
}
.nav-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 2rem;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}
.nav-logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex-shrink:0;
}
.nav-logo-mark{
  /* 48, not 34. The glyph inside is 55% of the tile, so 34px gave it
     18px — too little for three letters inside a diamond frame to
     resolve. 48px gives 26px, where they read. */
  /* No tile. The disc carries its own gradient and its own silhouette,
     so a gradient rounded-square behind it would be a second background
     doing nothing. */
  width:48px;
  height:48px;
  background:none;
  border-radius:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;

}
.nav-logo-name{
  font-family:var(--logo);
  font-size:1.32rem;
  color:var(--text);
  font-style:normal;font-weight:700;letter-spacing:-.015em;}
/* Keyboard-only jump past the nav. */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:500;
  background:var(--surface3);
  color:var(--text);
  border:1px solid var(--border2);
  border-radius:0 0 var(--btn-r) 0;
  padding:12px 20px;
  font-size:.85rem;
  font-weight:600;
  text-decoration:none;
}

/* ══════════════════════════════════════════════════════════════════
   HERO  —  title, icon and the 3-step strip
   ══════════════════════════════════════════════════════════════════ */
.hero h1{
  font-family:var(--serif);
  font-size:clamp(1.8rem,4vw,3rem);
  font-style:italic;
  color:var(--text);
  line-height:1.1;
  margin-bottom:0;
}
.hero h1 em{
  color:var(--tool);
  font-style:normal;
}
.hero p{
  font-size:.92rem;
  color:var(--text2);
  max-width:560px;
  margin:0 auto 1.75rem;
  line-height:1.78;
}
.hero-icon{
  width:56px;
  height:56px;
  border-radius:16px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--tool-bg);
  border:1px solid var(--tool-border);
  box-shadow:0 0 24px rgba(var(--tool-rgb),.28);
}
.hero-step{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 16px;
  transition:border-color .2s;
}
.hero-step-arrow{
  color:var(--text3);
  font-size:1rem;
  flex-shrink:0;
}
.hero-step-num{
  width:26px;
  height:26px;
  border-radius:50%;
  flex-shrink:0;
  background:var(--tool-bg);
  border:1px solid var(--tool-border);
  color:var(--tool);
  font-size:.75rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
}
.hero-step-text{
  font-size:.8rem;
  color:var(--text);
  line-height:1.4;
}
.hero-step-text span{
  font-size:.72rem;
  color:var(--text2);
}
.hero-step:hover{
  border-color:var(--tool-border);
}
.hero-title-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-bottom:.65rem;
  flex-wrap:wrap;
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════ */
footer{position:relative;overflow:hidden}

/* signature: the feedback section's animated grid, faded with a radial mask */
.footer-fx{
  position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.3;
  background-image:
    linear-gradient(var(--border) 1px,transparent 1px),
    linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 75% at 50% 50%,#000 8%,transparent 74%);
  mask-image:radial-gradient(ellipse 80% 75% at 50% 50%,#000 8%,transparent 74%);
  animation:fb-grid 40s linear infinite;
}
@media (prefers-reduced-motion:reduce){.footer-fx{animation:none}}

.footer-inner{position:relative;z-index:1;max-width:var(--container);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2rem;gap:2rem;flex-wrap:wrap}
.footer-left{display:flex;align-items:center;gap:11px}
.footer-logo-mark{width:34px;height:34px;flex-shrink:0;background:none;border-radius:0;display:flex;align-items:center;justify-content:center}
.footer-logo-name{font-family:var(--logo);font-size:1.1rem;color:var(--text);font-style:normal;line-height:1.2;font-weight:700;letter-spacing:-.015em}
.footer-logo-name .wm-kit{color:var(--purple)}
.footer-tagline{font-size:.7rem;color:var(--text2);margin-top:2px}
.footer-divider{width:1px;height:28px;background:var(--hairline);flex-shrink:0}

.footer-links{display:flex;align-items:center;justify-content:center;gap:.4rem;flex-wrap:wrap;flex:1}
.footer-link{--tool:var(--text2);position:relative;display:inline-flex;align-items:center;gap:7px;
  font-size:.82rem;color:var(--text2);text-decoration:none;padding:6px 10px 8px;border-radius:8px;white-space:nowrap;
  transition:color var(--dur-fast)}
.footer-link[data-tool="crop"]{--tool:var(--crop)}
.footer-link[data-tool="resize"]{--tool:var(--resize)}
.footer-link[data-tool="compress"]{--tool:var(--compress)}
.footer-link[data-tool="convert"]{--tool:var(--convert)}
.footer-link[data-tool="extract"]{--tool:var(--extract)}
.footer-link svg{flex-shrink:0;opacity:.85;transition:color var(--dur-fast),transform var(--dur-fast),opacity var(--dur-fast)}
.footer-link .label{position:relative;line-height:1}
.footer-link .label::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--tool);border-radius:2px;transform:scaleX(0);transform-origin:center;transition:transform .22s cubic-bezier(.4,0,.2,1)}
.footer-link:hover{color:var(--tool)}
.footer-link:hover svg{color:var(--tool);opacity:1;transform:translateY(-1px)}
.footer-link:hover .label::after{transform:scaleX(1)}
.footer-link:focus-visible{outline:2px solid var(--tool);outline-offset:2px;color:var(--tool)}
.footer-link:focus-visible .label::after{transform:scaleX(1)}
.footer-link-active{color:var(--tool);cursor:pointer}
.footer-link-active svg{color:var(--tool);opacity:1}
.footer-link-active .label{font-weight:600}
.footer-link-active .label::after{transform:scaleX(1)}

.footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.footer-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.footer-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.66rem;letter-spacing:.01em;color:var(--text2);background:var(--surface2);border:1px solid var(--border);padding:5px 10px;border-radius:999px;white-space:nowrap;transition:color var(--dur-fast),border-color var(--dur-fast),background var(--dur-fast)}
.footer-badge:hover{color:var(--text);border-color:var(--border2);background:var(--surface3)}
.footer-badge svg{opacity:.9;flex-shrink:0}
.footer-badge.badge-lock svg{color:var(--green)}
.footer-badge.badge-track svg{color:var(--text2)}
.footer-badge.badge-free svg{color:var(--yellow)}
.footer-copyright{font-family:var(--mono);font-size:.66rem;color:var(--text3)}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE  —  shared breakpoints
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:640px){.nav-inner{padding:0 1.25rem;gap:1rem}}
@media(max-width:860px){
  .footer-inner{flex-direction:column;align-items:center;text-align:center;gap:1.25rem;padding:1.75rem 1.5rem}
  .footer-divider{display:none}
  /* combine logo + PicsFixKit on one line; tagline centered beneath */
  .footer-left{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:3px 8px}
  .footer-left > div:last-child{display:contents}   /* promote name + tagline */
  .footer-tagline{flex-basis:100%;text-align:center;margin-top:0}
  .footer-links{gap:.2rem .3rem;justify-content:center}   /* tighter tool spacing */
  .footer-right{align-items:center}
  .footer-badges{justify-content:center;gap:8px}
}
@media(max-width:480px){
  .footer-link{padding:5px 9px;font-size:.72rem}
  .footer-badges{gap:8px}
  .footer-badge{font-size:.56rem}
}

/* ══════════════════════════════════════════════════════════════════
   RETURNING TO A PAGE
   ══════════════════════════════════════════════════════════════════

   picsfixkit.js adds .pk-returning to <html> when it is restoring a
   saved scroll position — i.e. you are coming BACK to this page,
   not arriving fresh.

   Entrance animations should not replay in that case. Repeating the
   hero fade-up every time you return from a tool is the thing that
   makes moving between pages feel wrong, and any reveal below the
   fold would be animating where nobody can see it.
   ══════════════════════════════════════════════════════════════════ */
.pk-returning *,.pk-returning *::before,.pk-returning *::after{
  animation:none !important;
}
/* Reveal elements start at opacity:0 and are shown by JS. With the
   transition suppressed they must be visible immediately, or the
   page comes back blank. */
.pk-returning .reveal{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

/* ══════════════════════════════════════════════════════════════════
   CROSS-DOCUMENT VIEW TRANSITIONS
   ══════════════════════════════════════════════════════════════════

   Turns a normal page load into a cross-fade. The nav bar and its
   logo are given stable names, so the browser matches them across
   the two documents and holds them still instead of fading them
   out and back in.

   Ignored entirely by browsers without support — they navigate
   the ordinary way.
   ══════════════════════════════════════════════════════════════════ */
@view-transition{ navigation: auto }

/* Named elements persist across the navigation rather than
   cross-fading with the rest of the page. */
nav{ view-transition-name: pk-nav }
.nav-logo-mark{ view-transition-name: pk-logo }
footer{ view-transition-name: pk-footer }

/* The page body cross-fades. Short, because a page transition
   that draws attention to itself gets annoying by the third use. */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.22s;
  animation-timing-function:var(--ease-out);
}

/* The persistent chrome should not slide or scale, only sit there. */
::view-transition-group(pk-nav),
::view-transition-group(pk-logo),
::view-transition-group(pk-footer){
  animation-duration:.22s;
}

/* Someone who asked for less motion should not be given a
   full-page cross-fade on every navigation. */
@media(prefers-reduced-motion:reduce){
  @view-transition{ navigation: none }
}

/* ══════════════════════════════════════════════════════════════════
   LIGHT THEME
   ══════════════════════════════════════════════════════════════════

   Applied by adding class="light" to <html>. Dark stays the default,
   so this block is purely an override layer — nothing above changes.

   These are GitHub Light values. The dark palette in this file is
   GitHub Dark, and these were designed as its partner: the accents
   measure 4.73-4.88:1 on the page, where anything derived by simply
   darkening the dark accents only just clears 4.5:1.

   ELEVATION INVERTS. In dark, cards are LIGHTER than the page
   (#161b22 on #0d1117). In light they must be WHITER (#ffffff on
   #f6f8fa). Getting this backwards is the classic light-mode mistake
   — cards end up looking sunken instead of raised.
   ══════════════════════════════════════════════════════════════════ */
:root.light{
  /* ── surfaces ── note the order flips: --surface is the LIGHTEST */
  --bg:#f6f8fa;--surface:#ffffff;--surface2:#f0f3f6;--surface3:#eaeef2;
  --border:#d0d7de;--border2:#afb8c1;

  /* ── text ── 15.8:1, 6.4:1 and 4.6:1 on --bg */
  --text:#1f2328;--text2:#656d76;
  /* #6e7781 measured 4.27:1 on --bg — just under the floor.
     #656d76 gives 4.93:1 on the page and 5.25:1 on a white card. */
  --text3:#656d76;--hairline:#d8dee4;
  /* Same relative step on light: 6.00:1, against --text2 at 4.93:1. */
  --text-lead:#57606a;

  /* ── hues ── each is the light-mode twin of the dark value above.
     Same hue family, dark enough to read on a white card. The -bg
     tints go from near-black to near-white, which is why they look
     inverted next to the dark block. */
  --accent:#0969da;--accent2:#0550ae;--accent-bg:#ddf4ff;
  --green:#1a7f37;--green-bg:#dafbe1;--green-border:#1a7f37;
  --purple:#8250df;--purple-bg:#fbefff;--purple-border:#8250df;
  --yellow:#9a6700;--yellow-bg:#fff8c5;--yellow-border:#9a6700;
  --orange:#bc4c00;--orange-bg:#fff1e5;--orange-border:#bc4c00;
  --red:#cf222e;

  /* ── channel variants, for the rgba() glows ── */
  --crop-rgb:130,80,223;      --crop-deep-rgb:99,57,177;
  --resize-rgb:154,103,0;     --resize-deep-rgb:122,82,0;
  --compress-rgb:26,127,55;   --compress-deep-rgb:17,101,42;
  --convert-rgb:188,76,0;     --convert-deep-rgb:150,61,0;
  --extract-rgb:9,105,218;    --extract-deep-rgb:5,80,174;

  /* ── every accent is now dark enough for white text ──
     In dark mode the gold button needed near-black ink; here all five
     take white, so each page's own --tool-ink is overridden centrally
     rather than per file. */
  --tool-ink:#ffffff;

  /* ── upload zone ── a near-white surface with only a 4% tint.
     A full pastel wash reads as washed-out on a light page; restraint
     plus a clearly tinted border reads as deliberate. */
  --uz-bg:#ffffff;
  --uz-tint:rgba(var(--tool-rgb),.04);
  --uz-grid:rgba(31,35,40,.05);
  --uz-border:rgba(var(--tool-rgb),.32);
  --uz-border-hover:rgba(var(--tool-rgb),.60);

  /* A light panel needs a far gentler scrim — enough to read as
     'outside the selection', not enough to grey the panel out. */
  --crop-scrim:rgba(31,35,40,.14);
  /* Matched to the light logo tile's own gradient, the same relationship
     the dark stops have to the dark tile. The deeper pair tried earlier
     (#6d28d9 -> #0550ae) read heavy and slightly muddy beside the crisp
     black of "PicsFix". */
  --wm-a:var(--purple);--wm-b:var(--purple);
  --wm-stroke:transparent;--wm-stroke-w:0;
  /* Light theme: a white scrim over the image, with dark ink. The old
     rule kept the dark scrim and let the ink follow --text, so a dark
     label sat on a dark blob and vanished. */
  /* On white the same ring measured 5.19:1 — passing, but not assertive
     enough to read as "chosen" at a glance across a grid. Thicker and
     fully opaque, with a stronger outer glow. */
  --sel-ring-w:3px;--sel-ring-a:1;--sel-glow-a:.30;
  /* On the white scrim a white circle with a white border was
     completely invisible — an unselected card looked like it had no
     checkbox at all. Dark ink on light scrim instead. */
  --check-bg:rgba(31,35,40,.06);
  --check-line:rgba(31,35,40,.45);
  --check-bg-hover:rgba(31,35,40,.12);
  --check-line-hover:#1f2328;
  --overlay-chip:rgba(255,255,255,.86);
  --overlay-chip-ink:#1f2328;
  --overlay-chip-line:rgba(31,35,40,.18);
  --dot-idle:rgba(31,35,40,.30);
  --dot-active:#1f2328;
  --dot-ring:rgba(255,255,255,.55);

  /* ── video ── a light thumbnail needs a LIGHT scrim. A dark one
     greys the whole panel out, exactly as the crop demo's black
     scrim did. The play button and caption flip to dark ink. */
  --vid-line:#d0d7de;
  /* Much lighter than the dark theme's. Measured over the light
     thumbnail, dark ink clears 13.3:1 even at 28% scrim — so a heavy
     one buys no readability and only hides the artwork. */
  --vid-scrim-a:rgba(246,248,250,.24);
  --vid-scrim-b:rgba(246,248,250,.42);
  --vid-ink:#1f2328;

  /* ── showcase frame ── a visible edge, since a white card on a
     near-white page needs a border to read as an object. */
  --frame-line:#d0d7de;

  /* ── media frames ── the bezel STAYS DARK; only the ring is added,
     so the frame reads as a deliberate object sitting on the page
     rather than a hole cut through it. */
  --frame-ring:0 0 0 1px rgba(31,35,40,.10);

  /* ── themed gradients ── light tints of the same hue. The mid stop
     is kept above 95% lightness so --text2 still clears 4.5:1 on it. */
  --fc1-grad:linear-gradient(145deg,#fbf9fe 0%,#f3ecfc 55%,#f8f5fd 100%);
  --fc2-grad:linear-gradient(145deg,#f8fbfe 0%,#ecf3fc 55%,#f5f9fd 100%);
  --fc3-grad:linear-gradient(145deg,#f8fef9 0%,#ecfcef 55%,#f5fdf7 100%);
  --fc4-grad:linear-gradient(145deg,#fefdf8 0%,#fcf8ec 55%,#fdfbf5 100%);
  --demo-grad:linear-gradient(135deg,#eef1f6,#e6ecf5,#dee8f4);
  --dz-grad:linear-gradient(145deg,#fff8f3 0%,#fff1e6 55%,#fffaf6 100%);

  /* ── surfaces that assumed a dark page ── */
  --nav-bg:rgba(255,255,255,.92);
  /* The modal backdrop stays dark — its job is to dim the page behind,
     which a light scrim cannot do. Just lighter than the dark theme's. */
  --overlay-bg:rgba(31,35,40,.45);

  /* Shadows must be far softer. rgba(0,0,0,.65) reads as a smudge on a
     white page; on light backgrounds depth comes from a crisp border
     plus a faint shadow, not a heavy one. */
  --shadow-sm:0 1px 3px rgba(31,35,40,.08);
  --shadow-md:0 4px 14px rgba(31,35,40,.10);
  --shadow-lg:0 12px 34px rgba(31,35,40,.13);
  --img-bg:#eaeef2;
}

/* The brand mark keeps its identity in both themes, but the light
   purple is darker, so the gradient is rebuilt from the light hues. */
:root.light{
  --brand-grad:linear-gradient(135deg,#8250df,#0969da);
}

/* Colour changes should not animate on every element when the theme is
   toggled — that produces a slow, muddy wipe across the whole page.
   .theme-switching is set for one frame while the class flips. */
.theme-switching *,.theme-switching *::before,.theme-switching *::after{
  transition:none !important;
}

/* ══════════════════════════════════════════════════════════════════
   THEME TOGGLE
   ══════════════════════════════════════════════════════════════════ */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--btn-h-sm);height:var(--btn-h-sm);flex-shrink:0;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--btn-r);color:var(--text2);cursor:pointer;
  transition:background var(--dur-fast),border-color var(--dur-fast),
             color var(--dur-fast);
}
.theme-toggle:hover{
  background:var(--surface3);border-color:var(--border2);color:var(--text);
}

/* Only one icon is ever shown. Dark theme offers the sun (what you
   would switch TO); light theme offers the moon. */
.theme-toggle .ti-moon{display:none}
:root.light .theme-toggle .ti-sun{display:none}
:root.light .theme-toggle .ti-moon{display:block}

/* ══════════════════════════════════════════════════════════════════
   NAV RIGHT GROUP
   ══════════════════════════════════════════════════════════════════
   The bar is two blocks: brand on the left, everything else here.
   .nav-inner is already space-between, so this needs no positioning
   of its own — only its internal spacing. */
.nav-right{
  display:flex;align-items:center;gap:1.25rem;
  margin-left:auto;flex-shrink:0;
}
@media(max-width:640px){
  .nav-right{gap:.6rem}
}

/* ══════════════════════════════════════════════════════════════════
   WORDMARK
   ══════════════════════════════════════════════════════════════════

   "Kit" carries the same violet-to-blue gradient as the logo tile,
   running in the same direction, so the mark and the name read as one
   lockup rather than two unrelated things sitting next to each other.

   Only "Kit" is coloured. Three letters is a short distance for a
   gradient, so it stays vivid; spread across all nine it goes muddy in
   the middle and the start of the word drops out.
   ══════════════════════════════════════════════════════════════════ */

/* Solid first. Gradient text needs transparent glyphs, and transparent
   text with no working background-clip renders as NOTHING — the brand
   name would vanish. This is the safe state. */
.wm-kit{color:var(--purple-border)}

/* Only once the browser has confirmed it can clip a background to text
   do we switch to the gradient. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .wm-kit{
    background:linear-gradient(135deg,var(--wm-a),var(--wm-b));
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
    /* The gradient box is the glyph box, so a descender or a tight
       line-height can clip the paint. A hair of padding avoids it. */
    padding-right:.02em;
    /* Half-pixel stroke, thickening the stems back to match "PicsFix".
       Non-standard but degrades to nothing if unsupported, so there is
       no risk in using it. */
    -webkit-text-stroke:var(--wm-stroke-w) var(--wm-stroke);
  }
}

/* The inline logo gradient is written with the dark stops. Light mode
   overrides the stop elements directly — an SVG <stop> accepts CSS, so
   no second copy of the markup is needed. */
:root.light .nav-logo-mark .lg-a,
:root.light .footer-logo-mark .lg-a{stop-color:#8250df}
:root.light .nav-logo-mark .lg-b,
:root.light .footer-logo-mark .lg-b{stop-color:#0969da}

/* ══════════════════════════════════════
   FEEDBACK
   ══════════════════════════════════════ */

/* #about has no background of its own, so the page grid ran right up to
   this block and stopped dead at its edge. The fade blends the two. */
.fb{
  position:relative;overflow:hidden;
  /* 3.5rem = 56px, the exact padding used by tools, features and
     about. The block was on 7rem/5.5rem and sat visibly further from
     its neighbours than any other section. */
  padding:3.5rem 0;
  background:var(--bg)
}
.fb::before{
  content:'';position:absolute;top:0;left:0;right:0;height:120px;
  background:linear-gradient(to bottom,transparent,var(--bg));
  pointer-events:none;z-index:0
}
.fb-grid-lines{
  position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.3;
  background-image:
    linear-gradient(var(--border) 1px,transparent 1px),
    linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 55%,#000 15%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 55%,#000 15%,transparent 72%);
  animation:fb-grid 40s linear infinite
}
@keyframes fb-grid{to{background-position:56px 56px,56px 56px}}

.fb .section-inner{position:relative;z-index:1}
.fb-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:3.5rem;align-items:start}

.fb-rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)}
.fb-rv.in{opacity:1;transform:none}
.fb-title.fb-rv{transition-delay:.08s}
.fb-sub.fb-rv{transition-delay:.16s}
.fb-reasons.fb-rv{transition-delay:.24s}
.fb-card.fb-rv{transition-delay:.14s}

/* ── left ────────────────────────────── */
.fb-side{display:flex;flex-direction:column;align-items:flex-start}
/* Identical to .section-tag, the badge used by "About Each Tool".
   Two badges on one page that differ slightly look like an oversight. */
.fb-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:.6rem;color:var(--accent);
  letter-spacing:.1em;text-transform:uppercase;
  background:var(--accent-bg);border:1px solid var(--accent2);
  padding:3px 12px;border-radius:999px;margin-bottom:.9rem
}
.fb-badge svg{width:11px;height:11px;flex-shrink:0}
/* Matches .section-title used by "Built for real workflows" — same
   serif, same italic, same clamp, so every section heading on the page
   reads as one family. */
.fb-title{
  font-family:var(--serif);font-style:italic;font-weight:700;
  font-size:clamp(1.9rem,4vw,3rem);
  line-height:1.1;color:var(--text);margin:0 0 1.1rem
}
.fb-title em{color:var(--purple);font-style:normal}
.fb-sub{color:var(--text2);font-size:.95rem;line-height:1.65;max-width:34ch;margin:0 0 1.5rem}
.fb-wm{color:var(--text)}
.fb-wm-kit{color:var(--purple)}

/* One bordered block with dividers, matching the reference. */
.fb-reasons{
  /* margin-bottom removed with the note it used to sit above. */
  list-style:none;padding:0;margin:0;width:100%;max-width:400px;
  border:1px solid var(--border);border-radius:14px;
  background:var(--surface);overflow:hidden
}
.fb-reason{
  display:flex;gap:.95rem;align-items:center;
  padding:1.1rem 1.2rem;
  transition:background .25s ease
}
.fb-reason + .fb-reason{border-top:1px solid var(--border)}
.fb-reason:hover{background:var(--surface2)}
.fb-rmark{
  flex-shrink:0;width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--crop-deep-rgb),.13);
  color:var(--purple)
}
.fb-rmark svg{width:18px;height:18px}
.fb-reason strong{display:block;color:var(--text);font-size:.94rem;font-weight:600;margin-bottom:.15rem}
.fb-reason span:not(.fb-rmark){color:var(--text3);font-size:.84rem;line-height:1.5}


/* ── right ───────────────────────────── */
.fb-card{
  background:var(--surface);
  border:1px solid var(--border);border-radius:20px;
  padding:1.6rem;
  display:flex;flex-direction:column;gap:1.1rem;
  box-shadow:0 24px 70px -34px rgba(0,0,0,.55)
}
.fb-card-title{
  font-family:var(--sans);font-size:1.12rem;font-weight:600;
  color:var(--text);margin:0;letter-spacing:-.01em
}
.fb-group{border:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
/* Present for screen readers, hidden visually: the buttons carry their
   own labels, so a visible legend would repeat them. */
.fb-sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap
}
.fb-label{
  font-family:var(--sans);font-size:.92rem;font-weight:600;
  color:var(--text);padding:0;margin:0;display:block
}
.fb-req{color:var(--orange);margin-left:.15rem}
.fb-tag{
  display:inline-block;margin-left:.35rem;
  color:var(--text3);font-size:.85rem;font-weight:400
}

.fb-seg{display:grid;grid-template-columns:repeat(2,1fr);gap:.45rem}
.fb-pill{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.68rem .8rem;border-radius:10px;
  border:1px solid var(--border);background:var(--surface2);
  color:var(--text2);
  font-family:var(--sans);font-size:.88rem;font-weight:500;
  cursor:pointer;text-align:center;
  transition:border-color .22s ease,background .22s ease,color .22s ease,transform .22s ease
}
.fb-pill svg{width:16px;height:16px;flex-shrink:0}
.fb-pill:hover{border-color:var(--purple-border);color:var(--text);transform:translateY(-2px)}
.fb-pill.is-on{
  background:var(--brand-grad);border-color:transparent;
  color:#fff;font-weight:600;
  box-shadow:0 8px 20px -8px rgba(var(--crop-deep-rgb),.6)
}
/* Light theme: a solid tint, because a translucent violet over white is
   washed out. */
:root.light .fb-pill.is-on{
  background:#f0e9ff;border-color:#c9b3f5;color:#6639b8;box-shadow:none
}
.fb-pill:focus-visible{outline:2px solid var(--purple);outline-offset:2px}

.fb-wrapper{position:relative}
.fb-input{
  width:100%;padding:.72rem .9rem;
  background:var(--surface2);
  border:1px solid var(--border);border-radius:11px;
  color:var(--text);font-family:var(--sans);font-size:.94rem;
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease
}
.fb-input::placeholder{color:var(--text3)}
.fb-input:focus{
  outline:none;border-color:var(--purple);background:var(--surface3);
  box-shadow:0 0 0 3px rgba(var(--crop-deep-rgb),.15)
}
/* 170px pushed the card to 705px, taller than a 720px laptop
   viewport, so Send sat below the fold. 118px still shows four
   lines, and the field is resizable for anyone who needs more. */
.fb-textarea{resize:vertical;min-height:118px;line-height:1.6;padding-bottom:1.9rem}
.fb-count{
  position:absolute;right:1rem;bottom:.8rem;
  font-family:var(--sans);font-size:.8rem;color:var(--text3);pointer-events:none
}

.fb-error{display:none;color:var(--orange);font-size:.85rem;line-height:1.5;margin-top:.1rem}
.fb-error.show{display:block;animation:fb-err .3s ease}
@keyframes fb-err{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.fb-input.has-error{border-color:var(--orange)}

.fb-send{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:.82rem 1.6rem;border:none;border-radius:11px;
  background:var(--brand-grad);color:#fff;
  font-family:var(--sans);font-size:1rem;font-weight:600;
  cursor:pointer;margin-top:.3rem;
  transition:transform .25s ease,box-shadow .25s ease,opacity .25s ease
}
.fb-send-icon{width:18px;height:18px;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.fb-send:hover{transform:translateY(-2px);box-shadow:0 16px 38px -14px rgba(var(--crop-deep-rgb),.75)}
.fb-send:hover .fb-send-icon{transform:translateX(4px)}
.fb-send::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transition:left .6s ease
}
.fb-send:hover::before{left:100%}
.fb-send:disabled{opacity:.5;cursor:default;transform:none}

/* ── TOAST ────────────────────────────────────────────
   Shared by the homepage feedback form and the tool pages, so status is
   communicated one way across the product. The original was green only,
   which would have shown a failure as a success. */
.toast{
  position:fixed;bottom:24px;right:24px;z-index:999;
  display:flex;align-items:flex-start;gap:.7rem;
  min-width:290px;max-width:380px;
  padding:.85rem 2.2rem .85rem .95rem;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:0 12px 40px -8px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04);
  overflow:hidden;
  transform:translateY(90px) scale(.97);opacity:0;
  transition:transform .34s cubic-bezier(.34,1.4,.64,1),opacity .28s ease
}
.toast.show{transform:translateY(0) scale(1);opacity:1}

.toast-icon{
  flex-shrink:0;width:19px;height:19px;margin-top:.05rem;
  display:flex;align-items:center;justify-content:center
}
.toast-icon svg{width:100%;height:100%}
.toast-body{display:flex;flex-direction:column;gap:.14rem;min-width:0}
.toast-title{
  font-family:var(--sans);font-size:.86rem;font-weight:600;
  line-height:1.3;color:currentColor
}
.toast-msg{
  font-family:var(--sans);font-size:.82rem;line-height:1.5;
  color:var(--text2)
}

.toast-x{
  position:absolute;top:.55rem;right:.55rem;
  width:22px;height:22px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:6px;
  color:var(--text3);cursor:pointer;
  transition:background .2s ease,color .2s ease
}
.toast-x svg{width:12px;height:12px}
.toast-x:hover{background:var(--surface3);color:var(--text)}

/* Visible countdown, so the toast does not simply vanish. */
.toast-bar{
  position:absolute;left:0;bottom:0;height:2px;width:0;
  background:currentColor;opacity:.5
}
@keyframes toast-drain{from{width:100%}to{width:0}}

.toast.is-ok{border-color:rgba(63,185,80,.45);color:var(--green)}
.toast.is-err{border-color:rgba(240,128,80,.5);color:var(--orange)}
.toast.is-busy{border-color:var(--purple-border);color:var(--purple)}
.toast.is-busy .toast-icon svg{animation:toast-spin .9s linear infinite}
@keyframes toast-spin{to{transform:rotate(360deg)}}

/* The tool pages call showToast() with no state, so a bare .toast keeps
   the original green treatment rather than rendering colourless. */
.toast:not([class*="is-"]){border-color:var(--green-border);color:var(--green)}

@media (max-width:560px){
  .toast{left:16px;right:16px;bottom:16px;min-width:0;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .toast{transition:opacity .2s ease}
  .toast-bar{display:none}
  .toast.is-busy .toast-icon svg{animation:none}
}

@media (max-width:940px){
  .fb-layout{grid-template-columns:1fr;gap:3rem}
  .fb-sub,.fb-reasons{max-width:none}
}
@media (max-width:560px){
  .fb{padding:4.5rem 0 3.5rem}
  .fb-card{padding:1.6rem}
  .fb-seg{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .fb-grid-lines{animation:none}
  .fb-rv{opacity:1;transform:none;transition:none}
  .fb-send:hover,.fb-pill:hover{transform:none}
  .fb-send::before{display:none}
}