/* Fancy Text — visual system.
   Light, clean, purple-forward design system with a dark mode.
   No webfonts, no framework; every glyph you see is either system text or inline SVG. */

:root {
  --bg: #f8faff;
  --bg-2: #eef2fd;
  --surface: #ffffff;
  --surface-2: #f2f5ff;
  --ink: #1e293b;
  --ink-2: #5b657e;
  --ink-3: #5f6885;
  --line: #e7e9f5;
  --line-2: #d5daee;

  --brand: #6d4aff;
  --brand-2: #4f46e5;
  --sky: #38bdf8;
  --violet: #6d4aff;
  --pink: #8b5cf6;
  --orange: #f5960b;
  --amber: #e8a20c;
  --green: #16a34a;
  --red: #ef4444;

  --flow: linear-gradient(90deg, #8b5cf6 0%, #6d4aff 32%, #4f46e5 64%, #38bdf8 100%);
  --btn: linear-gradient(135deg, #7c5cff 0%, #6d4aff 48%, #4f46e5 100%);
  --btn-shadow: 0 10px 24px -10px rgba(109, 74, 255, .55);

  --radius: 20px;
  --radius-sm: 14px;
  --shadow-sm: 0 1px 2px rgba(30, 41, 59, .04), 0 8px 20px -14px rgba(30, 41, 59, .28);
  --shadow: 0 2px 6px rgba(30, 41, 59, .05), 0 24px 48px -28px rgba(79, 70, 229, .35);
  --shadow-pop: 0 18px 38px -20px rgba(109, 74, 255, .45);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --glyph-font: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "Noto Sans Symbols",
    "Segoe UI", "Apple Color Emoji", "Segoe UI Emoji", system-ui, sans-serif;
  --hand-font: "Segoe Script", "Bradley Hand", "Comic Sans MS", "Bradley Hand ITC", cursive;
}

[data-theme="dark"] {
  --bg: #0e1226;
  --bg-2: #121734;
  --surface: #171c38;
  --surface-2: #1d2344;
  --ink: #edf0ff;
  --ink-2: #a7b0d0;
  --ink-3: #828bb5;
  --line: #272e55;
  --line-2: #353d6c;
  --brand: #8b7cff;
  --brand-2: #7c6bff;
  --violet: #8b7cff;
  --pink: #a78bfa;
  --sky: #7dd3fc;
  --green: #34d399;
  --amber: #fbbf24;
  --orange: #fb923c;
  --btn: linear-gradient(135deg, #8b7cff 0%, #6d4aff 55%, #4f46e5 100%);
  --btn-shadow: 0 10px 26px -12px rgba(139, 124, 255, .8);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 20px -14px rgba(0, 0, 0, .9);
  --shadow: 0 2px 8px rgba(0, 0, 0, .45), 0 30px 60px -30px rgba(109, 74, 255, .5);
  --shadow-pop: 0 18px 40px -20px rgba(0, 0, 0, .8);
}

* { box-sizing: border-box; }

/* Component display rules would otherwise beat the UA rule for [hidden]. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: var(--brand); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--btn); color: #fff; padding: 10px 18px; border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease;
}
.site-header.is-scrolled { box-shadow: 0 10px 30px -22px rgba(30, 41, 59, .5); }
.site-header .wrap { display: flex; align-items: center; gap: 14px; min-height: 64px; }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; letter-spacing: -.03em; font-size: 19px;
  color: var(--ink); text-decoration: none;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.brand__name b { font-weight: 800; color: var(--ink); }
.brand__name { color: var(--brand); font-weight: 800; }

.logo {
  width: 36px; height: 36px; flex: 0 0 auto;
  filter: drop-shadow(0 6px 14px -6px rgba(109, 74, 255, .8));
  transform-origin: 50% 60%;
  animation: logoBob 5.5s ease-in-out infinite;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.brand:hover .logo { animation-play-state: paused; transform: rotate(-8deg) scale(1.1); }
.logo--lg { width: 46px; height: 46px; }
.logo-spark { transform-box: view-box; transform-origin: 47px 24px; animation: twinkle 3.2s ease-in-out infinite; }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 14.5px; }
.site-nav a {
  position: relative;
  color: var(--ink-2); text-decoration: none; font-weight: 600;
  padding: 7px 12px; border-radius: 999px;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.site-nav a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2.5px;
  border-radius: 3px; background: var(--flow);
  transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.2, .9, .3, 1);
}
.site-nav a:hover { color: var(--ink); background: var(--surface-2); transform: translateY(-1px); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--brand); }

/* dark-mode switch */
.switch {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 13px; font-weight: 700;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.switch:hover { border-color: var(--line-2); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.switch svg { width: 15px; height: 15px; flex: 0 0 auto; fill: currentColor; }
.switch__moon { display: none; }
[data-theme="dark"] .switch__sun { display: none; }
[data-theme="dark"] .switch__moon { display: inline-block; }
.switch__track {
  position: relative; width: 34px; height: 19px; flex: 0 0 auto;
  border-radius: 999px; background: var(--line-2);
  transition: background .2s ease;
}
.switch__track i {
  position: absolute; top: 2.5px; left: 3px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(30, 41, 59, .35);
  transition: transform .22s cubic-bezier(.34, 1.4, .64, 1);
}
.switch[aria-pressed="true"] .switch__track { background: var(--brand); }
.switch[aria-pressed="true"] .switch__track i { transform: translateX(14px); }

/* hamburger — the nav becomes a drop-down panel on small screens */
.nav-toggle {
  display: none;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease;
}
.nav-toggle:hover { border-color: var(--line-2); transform: translateY(-1px); }
.nav-toggle svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- breadcrumb ----------
   Visible on-page crumbs that mirror the BreadcrumbList JSON-LD: Google only
   surfaces breadcrumb rich results for breadcrumbs users can actually see. */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin: 0 0 14px;
  font-size: 13px; font-weight: 600;
  color: var(--ink-2);
  animation: heroRise .6s .02s cubic-bezier(.2, .9, .3, 1) both;
}
.crumbs a { color: var(--brand); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs__sep { color: var(--ink-3); font-weight: 500; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 700; }

/* ---------- hero ---------- */

.hero { position: relative; padding: 52px 0 8px; }
.hero__glow {
  position: absolute; inset: -80px 0 auto 0; height: 420px;
  pointer-events: none; z-index: -1;
  background:
    radial-gradient(30% 46% at 20% 34%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%),
    radial-gradient(26% 42% at 58% 16%, color-mix(in srgb, var(--sky) 20%, transparent), transparent 70%),
    radial-gradient(24% 40% at 84% 40%, color-mix(in srgb, var(--pink) 16%, transparent), transparent 70%);
  filter: blur(48px);
  animation: glowDrift 20s ease-in-out infinite alternate;
  will-change: transform;
}

.hero__grid { display: grid; gap: 34px; align-items: center; }
@media (min-width: 980px) {
  .hero__grid { grid-template-columns: 1.08fr .92fr; gap: 40px; }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 18px; padding: 6px 14px 6px 11px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  border-radius: 999px;
  animation: heroRise .6s cubic-bezier(.2, .9, .3, 1) both;
}
.eyebrow svg { width: 13px; height: 13px; fill: currentColor; animation: twinkle 2.6s ease-in-out infinite; }

.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(2.35rem, 6.2vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -.04em;
  font-weight: 840;
  animation: heroRise .7s .05s cubic-bezier(.2, .9, .3, 1) both;
}
.hero h1 .grad {
  background: var(--flow);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-right: .05em;
  animation: heroRise .7s .05s cubic-bezier(.2, .9, .3, 1) both, flowSweep 8s linear infinite;
}

/* The second word keeps its plain text for search engines and screen readers;
   only the aria-hidden copy swaps font. */
.h1-cycle { position: relative; display: inline-block; }
.h1-cycle__word {
  display: inline-block;
  transition: opacity .22s ease, transform .22s cubic-bezier(.4, 0, .2, 1), filter .22s ease;
}
.h1-cycle__word.is-swapping { opacity: 0; transform: translateY(-.14em); filter: blur(3px); }
.h1-cycle__word.is-entering { transition: none; opacity: 0; transform: translateY(.14em); filter: blur(3px); }

.hero .lede {
  margin: 0; max-width: 56ch;
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  color: var(--ink-2);
  animation: heroRise .7s .12s cubic-bezier(.2, .9, .3, 1) both;
}
.hero .lede strong { color: var(--ink); font-weight: 750; }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; animation: heroRise .7s .2s cubic-bezier(.2, .9, .3, 1) both; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 650;
  padding: 6px 13px; border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}
.pill i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cat, var(--brand));
  display: inline-block;
}

/* live preview card */
.preview-wrap { position: relative; animation: heroRise .7s .24s cubic-bezier(.2, .9, .3, 1) both; }
.preview {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  animation: floaty 6.5s ease-in-out infinite;
}
.preview__head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border: 2px solid color-mix(in srgb, var(--brand) 35%, var(--line));
  border-radius: 14px;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--brand) 7%, var(--surface-2)), var(--surface-2) 42%, color-mix(in srgb, var(--sky) 9%, var(--surface-2)));
  background-size: 220% 100%;
  animation: headSheen 6s ease-in-out infinite;
  font-family: var(--glyph-font);
  font-size: 1.35rem; font-weight: 650;
  overflow-wrap: anywhere;
  color: var(--ink);
  position: relative;
}
.preview__head:empty::before { content: "Fancy Text"; color: var(--ink-3); font-weight: 500; }
/* a caret makes the card read as a live field rather than a screenshot */
.preview__head::after {
  content: ""; flex: 0 0 auto;
  width: 2px; height: 1.15em; margin-left: 2px;
  border-radius: 2px; background: var(--brand);
  animation: caretBlink 1.15s steps(1, end) infinite;
}
.preview__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.preview__row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.preview__row:hover {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.preview__out {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--glyph-font);
  font-size: 1.15rem; line-height: 1.35;
  min-height: 1.35em;
  overflow-wrap: anywhere;
  color: var(--ink);
  transition: opacity .19s ease, transform .19s cubic-bezier(.4, 0, .2, 1), filter .19s ease;
}
/* out then in, so the row rolls to its next style instead of snapping */
.preview__out.is-swapping { opacity: 0; transform: translateY(-9px) scale(.985); filter: blur(2px); }
.preview__out.is-entering { transition: none; opacity: 0; transform: translateY(9px) scale(.985); filter: blur(2px); }

.preview__tag {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 3px 8px; border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  transition: opacity .19s ease, color .19s ease, background .19s ease;
}
.preview__row:hover .preview__tag { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.preview__tag.is-swapping, .preview__tag.is-entering { opacity: 0; }
.preview__copy {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s, transform .12s;
}
.preview__copy svg { width: 15px; height: 15px; fill: currentColor; }
.preview__copy:hover {
  background: var(--btn); color: #fff; border-color: transparent;
  transform: translateY(-1px); box-shadow: var(--btn-shadow);
}
.preview__copy[data-copied="true"] {
  background: color-mix(in srgb, var(--green) 15%, var(--surface));
  border-color: var(--green); color: var(--green);
}

.hand {
  display: none;
  position: absolute; left: -118px; top: 6px;
  width: 120px;
  color: var(--brand);
  font-family: var(--hand-font);
  font-size: 17px;
  transform: rotate(-7deg);
  pointer-events: none;
  animation: handWiggle 5s ease-in-out infinite;
}
.hand svg { display: block; width: 74px; height: 52px; margin: 2px 0 0 26px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; }
/* the little arrow draws itself once, instead of just existing */
.hand svg path { stroke-dasharray: 140; stroke-dashoffset: 140; animation: handDraw 1.5s .6s ease forwards; }
@media (min-width: 1180px) { .hand { display: block; } }

.hero-spark {
  position: absolute; color: var(--brand); opacity: .85;
  animation: twinkle 3.4s ease-in-out infinite;
  pointer-events: none;
}
.hero-spark svg { width: 100%; height: 100%; fill: currentColor; }
.hero-spark--1 { top: -14px; right: 26px; width: 22px; height: 22px; animation-delay: .2s; }
.hero-spark--2 { bottom: 34px; right: -12px; width: 15px; height: 15px; color: var(--sky); animation-delay: 1.1s; }
.hero-spark--3 { top: 40%; left: -16px; width: 12px; height: 12px; color: var(--pink); animation-delay: 1.8s; }

/* ---------- hero marquee ---------- */

.marquee {
  position: relative;
  margin: 30px 0 4px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  animation: heroRise .7s .36s cubic-bezier(.2, .9, .3, 1) both;
}
.marquee__track { display: flex; width: max-content; animation: marquee 36s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: 26px; padding-right: 26px; }
.marquee__item {
  font-family: var(--glyph-font);
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  white-space: nowrap;
  opacity: .9;
  transition: transform .2s ease, opacity .2s ease;
}
.marquee__item:hover { transform: scale(1.09); opacity: 1; }
.marquee__item:nth-child(4n + 1) { color: var(--brand); }
.marquee__item:nth-child(4n + 2) { color: var(--brand-2); }
.marquee__item:nth-child(4n + 3) { color: var(--sky); }
.marquee__item:nth-child(4n + 4) { color: var(--pink); }

/* ---------- tool card ---------- */

.tool {
  position: relative;
  margin: 30px 0 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow);
  animation: heroRise .7s .28s cubic-bezier(.2, .9, .3, 1) both;
}
.tool::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  border-radius: calc(var(--radius) + 2px) calc(var(--radius) + 2px) 0 0;
  background: var(--flow);
}
.tool__inner { padding: 22px; }

.tool label {
  display: block; margin-bottom: 8px;
  font-size: 12.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-2);
}

.tool__fields { display: grid; gap: 14px; }
@media (min-width: 860px) { .tool__fields { grid-template-columns: 1.7fr 1fr; align-items: end; } }

#input {
  width: 100%; min-height: 96px;
  padding: 16px 18px;
  resize: vertical;
  font-family: var(--glyph-font);
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  background: var(--surface-2);
  border: 2px solid var(--line);
  border-radius: 14px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
#input::placeholder { color: var(--ink-3); font-weight: 400; font-size: .85em; }
#input:focus {
  outline: none;
  background: var(--surface);
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 13%, transparent);
}

select {
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 11px 36px 11px 14px;
  width: 100%;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color .15s, box-shadow .15s;
}
select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent);
}

.gen-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  margin-top: 16px;
  padding: 15px 20px;
  font: inherit; font-size: 16px; font-weight: 750; letter-spacing: -.01em;
  color: #fff;
  background: var(--btn);
  background-size: 200% 100%;
  border: 0; border-radius: 14px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--btn-shadow);
  transition: transform .14s ease, box-shadow .18s ease, background-position .5s ease;
}
.gen-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(109, 74, 255, .65); background-position: 100% 0; }
.gen-btn:active { transform: translateY(0) scale(.99); }
.gen-btn svg { width: 19px; height: 19px; fill: currentColor; }
.gen-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 46%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg);
  animation: sheen 3.6s ease-in-out infinite;
}

.tool-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.tool-row .grow { flex: 1 1 auto; }
.tool-row select { width: auto; }

.count { font-size: 13px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.btn {
  font: inherit; font-size: 14px; font-weight: 650;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: transform .12s, border-color .12s, background .12s, box-shadow .12s;
}
.btn:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink-2); }
.btn--ghost:hover { border-color: var(--line-2); color: var(--ink); }
.btn--solid {
  background: var(--btn); color: #fff; border-color: transparent;
  box-shadow: var(--btn-shadow);
}
.btn--solid:hover { color: #fff; filter: brightness(1.05); }

.limit { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.meter {
  display: inline-block; position: relative; width: 120px; height: 7px;
  border-radius: 999px; background: var(--line); overflow: hidden; vertical-align: middle;
}
.meter i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--flow); border-radius: 999px; transition: width .14s linear; }
.meter[data-state="warn"] i { background: var(--orange); }
.meter[data-state="over"] i { background: var(--red); }
.limit[data-state="over"] { color: var(--red); }

/* ---------- section headings ---------- */

.sect-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin: 40px 0 16px;
  animation: heroRise .6s cubic-bezier(.2, .9, .3, 1) both;
}
.sect-head h2 {
  display: flex; align-items: center; gap: 9px;
  margin: 0;
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  letter-spacing: -.03em;
  font-weight: 800;
}
.sect-head h2 svg { width: 19px; height: 19px; fill: var(--brand); }
.sect-note { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.view-all {
  font-size: 14px; font-weight: 700; text-decoration: none;
  color: var(--brand);
  white-space: nowrap;
  transition: transform .16s ease;
}
.view-all:hover { transform: translateX(3px); }

/* ---------- popular style categories ---------- */

.cat-cards {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .cat-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .cat-cards { grid-template-columns: repeat(6, 1fr); } }

.cat-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 12px 15px;
  font: inherit; text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2, .9, .3, 1), box-shadow .18s ease, border-color .18s ease;
}
.cat-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
  box-shadow: var(--shadow-pop);
}
.cat-card[aria-pressed="true"] {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent), var(--shadow-sm);
}
.cat-card__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  margin-bottom: 6px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-family: var(--glyph-font);
  font-size: 1.3rem; font-weight: 700;
  color: var(--brand);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), background .2s ease, color .2s ease;
}
.cat-card:hover .cat-card__icon {
  transform: scale(1.12) rotate(-6deg);
  background: var(--btn); color: #fff; border-color: transparent;
}
.cat-card__name { font-size: 14.5px; font-weight: 750; color: var(--ink); letter-spacing: -.01em; }
.cat-card__desc { font-size: 12px; color: var(--ink-3); }
.cat-card__count {
  margin-top: 7px;
  font-size: 11px; font-weight: 750; letter-spacing: .03em;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  padding: 3px 9px; border-radius: 999px;
}

/* ---------- sample results ---------- */

.sample-row {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
  /* five across on desktop so the last card does not sit alone on a row */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 186px), 1fr));
}
@media (min-width: 1040px) {
  .sample-row { grid-template-columns: repeat(5, 1fr); }
}
.sample-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sample-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-pop);
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
}
.sample-card--plain { background: var(--surface-2); }
.sample-out {
  margin: 0; min-height: 1.5em;
  font-family: var(--glyph-font);
  font-size: 1.22rem; line-height: 1.4;
  overflow-wrap: anywhere;
  color: var(--ink);
}
.sample-card--plain .sample-out { color: var(--brand); font-weight: 650; font-family: var(--font); }
.sample-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.sample-label {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3);
}
.sample-copy {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: pointer;
  transition: background .14s, color .14s, transform .12s;
}
.sample-copy svg { width: 14px; height: 14px; fill: currentColor; }
.sample-copy:hover { background: var(--btn); color: #fff; border-color: transparent; transform: translateY(-1px); }
.sample-copy[data-copied="true"] { background: var(--green); border-color: var(--green); color: #fff; }

/* ---------- stats strip ---------- */

.stats {
  list-style: none; margin: 26px 0 8px; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.stats li {
  display: flex; align-items: center; gap: 11px;
  flex: 1 1 200px;
  padding: 13px 17px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: var(--shadow-sm);
}
.stats__icon {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: 0 0 auto;
  border-radius: 11px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
}
.stats__icon svg { width: 17px; height: 17px; fill: currentColor; }
.stats strong { display: block; font-size: 1.12rem; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); }
.stats span { font-size: 12px; font-weight: 650; color: var(--ink-3); }
.stats__quote {
  flex: 1 1 240px;
  justify-content: center;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
  border-style: dashed;
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
}

/* ---------- filters ---------- */

/* The sticky bar stops at the end of the gallery, so it never covers the FAQ. */
.gallery { position: relative; scroll-margin-top: 76px; }

.filters {
  position: sticky; top: 64px; z-index: 20;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 0 12px;
  background: var(--bg);
  box-shadow: 0 14px 18px -18px rgba(30, 41, 59, .55);
}

.search-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#search {
  flex: 1 1 240px; min-width: 0;
  font: inherit; font-size: 15px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s;
}
#search::placeholder { color: var(--ink-3); }
#search:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent);
}

.chips {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  font: inherit; font-size: 13px; font-weight: 650;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, color .12s;
}
.chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); color: var(--ink); }
.chip[aria-pressed="true"] {
  color: #fff; border-color: transparent;
  background: var(--c, var(--btn));
  box-shadow: 0 8px 18px -10px rgba(30, 41, 59, .55);
  animation: pop .32s cubic-bezier(.34, 1.56, .64, 1);
}

/* one hue per family, so the bar stays scannable */
.chip[data-cat="all"] { --c: linear-gradient(135deg, #7c5cff, #4f46e5); }
.chip[data-cat="serif"] { --c: #6d4aff; }
.chip[data-cat="script"] { --c: #9333ea; }
.chip[data-cat="blackletter"] { --c: #4c1d95; }
.chip[data-cat="sans"] { --c: #4f46e5; }
.chip[data-cat="mono"] { --c: #475569; }
.chip[data-cat="wide"] { --c: #0284c7; }
.chip[data-cat="symbol"] { --c: #d97706; }
.chip[data-cat="lookalike"] { --c: #0d9488; }
.chip[data-cat="small"] { --c: #65a30d; }
.chip[data-cat="frame"] { --c: #db2777; }
.chip[data-cat="spacing"] { --c: #7c3aed; }
.chip[data-cat="number"] { --c: #0369a1; }
.chip[data-cat="transform"] { --c: #ea580c; }

/* ---------- style gallery ---------- */

.styles {
  list-style: none; margin: 4px 0 12px; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 258px), 1fr));
}

/* Compact by design: 208 of these stack up, so the copy button sits beside the
   output instead of under it. */
.style {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  overflow: hidden;
}
.style__head { grid-column: 1 / -1; }
.style::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--flow);
  opacity: 0; transition: opacity .18s ease;
}
.style:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--line-2); }
.style:hover::before { opacity: 1; }

.style__head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.style__name {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3);
}
.style__name::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cat, var(--brand));
  flex: 0 0 auto;
}

.style__out {
  margin: 0;
  font-family: var(--glyph-font);
  font-size: clamp(1.08rem, 1.9vw, 1.24rem);
  line-height: 1.4;
  font-weight: 500;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
  min-height: 1.4em;
  color: var(--ink);
}

.style__foot { display: flex; align-items: center; gap: 6px; }
.style__copy {
  font: inherit; font-size: 12px; font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s, transform .12s, box-shadow .14s;
}
.style__copy:hover {
  background: var(--btn); color: #fff; border-color: transparent;
  transform: translateY(-1px); box-shadow: var(--btn-shadow);
}
.style__copy[data-copied="true"] {
  background: color-mix(in srgb, var(--green) 14%, var(--surface));
  border-color: var(--green); color: var(--green);
}

.tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.tag--ok { background: color-mix(in srgb, var(--green) 13%, transparent); color: color-mix(in srgb, var(--green) 72%, var(--ink)); }
.tag--mid { background: color-mix(in srgb, var(--amber) 16%, transparent); color: color-mix(in srgb, var(--amber) 58%, var(--ink)); }
.tag--low { background: color-mix(in srgb, var(--red) 12%, transparent); color: color-mix(in srgb, var(--red) 70%, var(--ink)); }
.tag--over { background: var(--red); color: #fff; }
.tag--note {
  background: var(--surface-2); color: var(--ink-3);
  width: 17px; height: 17px; padding: 0; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer; font-size: 10px;
}

/* The ? is a real button so touch can open its note; badges answer taps too. */
button.tag { font-family: inherit; }
button.tag--note { color: var(--ink-3); }
.tag[data-hint] { cursor: pointer; }
.tag:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Inline hint, opened by tapping a badge or the ?. Inline rather than a
   hover bubble: it cannot be clipped by the row or pushed off a phone screen. */
.style__hint {
  grid-column: 1 / -1;
  margin: 9px 0 1px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 12.5px; line-height: 1.5; font-weight: 500;
  letter-spacing: 0; text-transform: none; white-space: normal;
  animation: hintIn .18s ease both;
}
@keyframes hintIn { from { opacity: 0; transform: translateY(-3px); } }

/* category dots on each card */
.style[data-cat="serif"] { --cat: #6d4aff; }
.style[data-cat="script"] { --cat: #9333ea; }
.style[data-cat="blackletter"] { --cat: #4c1d95; }
.style[data-cat="sans"] { --cat: #4f46e5; }
.style[data-cat="mono"] { --cat: #475569; }
.style[data-cat="wide"] { --cat: #0284c7; }
.style[data-cat="symbol"] { --cat: #d97706; }
.style[data-cat="lookalike"] { --cat: #0d9488; }
.style[data-cat="small"] { --cat: #65a30d; }
.style[data-cat="frame"] { --cat: #db2777; }
.style[data-cat="spacing"] { --cat: #7c3aed; }
.style[data-cat="number"] { --cat: #0369a1; }
.style[data-cat="transform"] { --cat: #ea580c; }

.empty { padding: 34px; text-align: center; color: var(--ink-3); }
.styles-note { font-size: 13.5px; color: var(--ink-3); margin: 6px 0 40px; max-width: 78ch; }
.styles-note strong { color: var(--ink-2); }

/* ---------- decoder panel ---------- */

.panel {
  position: relative;
  padding: 24px;
  margin: 0 0 44px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 76px;
}
.panel::after {
  content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 3px;
  border-radius: 0 0 6px 6px;
  background: var(--flow);
}
.panel h2 { margin: 0 0 8px; font-size: clamp(1.3rem, 2.6vw, 1.6rem); letter-spacing: -.03em; }
.panel .lede { margin: 0 0 18px; color: var(--ink-2); font-size: 14.5px; max-width: 70ch; }

#decode-in, #decode-out {
  width: 100%; min-height: 88px;
  padding: 14px 16px;
  font-family: var(--glyph-font);
  font-size: 1.1rem;
  line-height: 1.5;
  border-radius: var(--radius-sm);
  border: 2px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  resize: vertical;
  transition: border-color .15s, box-shadow .15s;
}
#decode-out { background: var(--surface); border-style: dashed; }
#decode-in:focus, #decode-out:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent);
}

.decode-grid { display: grid; gap: 14px; margin-bottom: 6px; }
@media (min-width: 760px) { .decode-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- content ---------- */

article { max-width: 72ch; }
article h2 { font-size: clamp(1.4rem, 2.8vw, 1.75rem); letter-spacing: -.03em; margin: 0 0 12px; }
article h3 { font-size: 1.12rem; letter-spacing: -.01em; margin: 28px 0 8px; }
article p, article li { color: var(--ink-2); }
article p { margin: 0 0 14px; }
article ul { margin: 0 0 16px; padding-left: 22px; }
article li { margin-bottom: 8px; }
article li::marker { color: var(--brand); }

.section { padding: 8px 0 48px; scroll-margin-top: 76px; }
.section + .section {
  border-top: 1px solid var(--line);
  padding-top: 44px;
}

.table-wrap {
  overflow-x: auto;
  margin: 0 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
table { border-collapse: collapse; width: 100%; font-size: 14.5px; min-width: 420px; }
th, td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); }
th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); font-weight: 800;
  background: var(--surface-2);
}
td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
td strong { color: var(--ink); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }

details {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  background: var(--surface);
  margin-bottom: 10px;
  transition: border-color .14s, box-shadow .14s;
}
details:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
details[open] { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
details summary { cursor: pointer; font-weight: 700; color: var(--ink); list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+"; float: right; font-weight: 700; color: var(--brand); font-size: 18px; line-height: 1;
  transition: transform .2s ease;
}
details[open] summary::after { content: "–"; }
details p { margin: 12px 0 2px; font-size: 15px; }

/* ---------- share ---------- */

.share {
  position: relative;
  margin: 0 0 40px;
  padding: 30px 24px;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 55%),
    radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--sky) 12%, transparent), transparent 55%),
    var(--surface);
  border: 1px solid var(--line);
  text-align: center;
}
.share h2 { margin: 0 0 6px; font-size: 1.3rem; letter-spacing: -.02em; }
.share p { margin: 0 0 18px; color: var(--ink-2); font-size: 14.5px; }

.share-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.share-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit; font-size: 14px; font-weight: 700;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: transform .13s, filter .13s, box-shadow .13s;
  box-shadow: 0 10px 20px -14px rgba(30, 41, 59, .8);
}
.share-btn:hover { transform: translateY(-2px); filter: brightness(1.07); }
.share-btn svg { width: 17px; height: 17px; flex: 0 0 auto; fill: currentColor; }

.share-x { background: #0f1419; }
.share-wa { background: #1fa855; }
.share-fb { background: #1877f2; }
.share-tg { background: #229ed9; }
.share-rd { background: #ff4500; }
.share-copy { background: var(--btn); }

/* ---------- footer ---------- */

.site-footer {
  position: relative;
  margin-top: 46px;
  padding: 0 0 46px;
  overflow: hidden;
  background:
    radial-gradient(65% 130% at 6% 0%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 62%),
    radial-gradient(55% 120% at 94% 8%, color-mix(in srgb, var(--sky) 9%, transparent), transparent 62%),
    var(--bg-2);
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-3);
}
.foot-ribbon {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--flow); background-size: 300% 100%;
  animation: flowSweep 8s linear infinite;
}
.foot-top { display: grid; gap: 34px; padding-top: 44px; }
@media (min-width: 880px) { .foot-top { grid-template-columns: 1.05fr 1.35fr; gap: 46px; } }

.brand--big { font-size: 21px; gap: 13px; }
.brand--big:hover .logo--lg { transform: rotate(-9deg) scale(1.08); }
.foot-brand p { margin: 16px 0 0; max-width: 44ch; color: var(--ink-2); font-size: 15px; }

.foot-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; }
.foot-stats li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.foot-stats strong {
  font-size: 1.3rem; line-height: 1.1; letter-spacing: -.03em;
  background: var(--flow); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: flowSweep 8s linear infinite;
}
.foot-stats span {
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3);
}

.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 24px; }
.foot-col h3 {
  margin: 0 0 12px; font-size: 11px; font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3);
}
.foot-col > a {
  display: block; padding: 5px 0;
  color: var(--ink-2); text-decoration: none; font-weight: 600;
  transition: transform .18s ease, color .18s ease;
}
.foot-col > a:hover { color: var(--brand); transform: translateX(5px); }
.foot-mini-share { display: flex; flex-wrap: wrap; gap: 8px; }
.foot-col .foot-mini-share a {
  display: inline-flex; padding: 6px 13px;
  font-size: 13px; font-weight: 700;
  color: var(--ink-2); text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.foot-col .foot-mini-share a:hover {
  color: var(--brand); transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  box-shadow: 0 10px 20px -14px var(--brand);
}

.foot-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 34px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.foot-legal { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.foot-bottom--first { margin-top: 0; padding-top: 46px; border-top: 0; }
.foot-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: var(--ink); color: var(--bg);
  padding: 11px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 700;
  opacity: 0; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 50;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .6);
}
.toast[data-open="true"] { opacity: 1; transform: translate(-50%, 0); animation: toastIn .34s cubic-bezier(.34, 1.56, .64, 1); }

/* copy burst particles */
.burst {
  position: fixed; z-index: 70; pointer-events: none;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--burst, var(--brand));
  animation: burst .8s cubic-bezier(.2, .9, .3, 1) forwards;
}
.burst:nth-child(3n) { border-radius: 50%; }
.burst:nth-child(3n + 1) { background: var(--sky); }
.burst:nth-child(3n + 2) { background: var(--pink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- card motion ---------- */

.will-reveal { opacity: 0; transform: translateY(18px) scale(.985); }
.will-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .55s cubic-bezier(.2, .9, .3, 1);
}
.style.will-reveal.is-in:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--cat, var(--brand)) 42%, var(--line));
  box-shadow: 0 18px 34px -24px var(--cat, var(--brand)), var(--shadow-sm);
}

/* ---------- keyframes ---------- */

@keyframes flowSweep {
  from { background-position: 0% 50%; }
  to { background-position: 300% 50%; }
}
@keyframes glowDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-2.5%, 1.5%, 0) scale(1.05); }
  100% { transform: translate3d(2.5%, -1.5%, 0) scale(1.02); }
}
@keyframes logoBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(3deg); }
}
/* No rotation: a four-point star turned 45° reads as a close button. */
@keyframes twinkle {
  0%, 100% { opacity: .45; transform: scale(.78); }
  50% { opacity: 1; transform: scale(1.12); }
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes pop {
  0% { transform: scale(.94); }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 18px) scale(.94); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes sheen {
  0% { left: -60%; }
  55%, 100% { left: 120%; }
}
@keyframes handWiggle {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(-3deg); }
}
@keyframes handDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes burst {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx, 0)), calc(-50% + var(--dy, -70px))) scale(0); opacity: 0; }
}
@keyframes caretBlink {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0; }
}
@keyframes headSheen {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  .hero { padding-top: 38px; }
  .tool__inner { padding: 16px; }
  .site-header .wrap { gap: 8px; }
  .brand { font-size: 16.5px; gap: 8px; }
  .logo { width: 30px; height: 30px; }
  .switch { padding: 6px 9px; gap: 6px; }
  .switch__label { display: none; }
  .preview__tag { display: none; }
  .nav-toggle { display: grid; }
  .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch;
    gap: 2px;
    margin: 0; padding: 8px 16px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px -20px rgba(30, 41, 59, .55);
    font-size: 15px;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 11px 14px; border-radius: 10px; }
  .site-nav a::after { display: none; }
  .filters { top: 64px; }
  .sect-head { margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .will-reveal { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none !important; }
  .preview { animation: none !important; }
}

/* ---- landing-page generator (assets/page-gen.js) ---------------------------------- */

.pg { margin: 26px 0 6px; }

.pg__bar {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 14px;
  align-items: end;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 640px) {
  .pg__bar { grid-template-columns: 1fr; }
}

.pg__field { display: grid; gap: 6px; min-width: 0; }

.pg__field > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pg input[type="text"],
.pg select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 11px 12px;
  min-height: 44px;
}

.pg input[type="text"]:focus-visible,
.pg select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.pg__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--ink-2);
}

.pg__limit[data-state="warn"] { color: var(--amber); font-weight: 700; }
.pg__limit[data-state="over"] { color: var(--red); font-weight: 700; }

.pg__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.pg__search { margin-top: 14px; }

.style-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

.style-list .style { margin: 0; }
.style[hidden] { display: none !important; }

.pg__empty {
  margin: 18px 0 0;
  padding: 16px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
}

.sr-only-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}