/* Colors are the portal's tokens (web/src/index.css); keep them in step. */
:root {
  --text: #5b6660;
  --text-h: #333b36;
  --bg: #f7f8f5;
  --surface: #ffffff;
  --border: #dde1d7;
  --border-strong: #87918a;
  --accent: #1f5c8b;
  --accent-hover: #1a4e76;
  --accent-bg: rgba(31, 92, 139, 0.08);
  --on-accent: #ffffff;
  --gold: #c08a2e;
  --shadow: rgba(51, 59, 54, 0.08) 0 10px 30px -10px;
  --sans: system-ui, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #a8b0aa;
    --text-h: #e7eae4;
    --bg: #14181a;
    --surface: #1d2224;
    --border: #2e363a;
    --border-strong: #66727a;
    --accent: #6fa8cb;
    --accent-hover: #85b5d3;
    --accent-bg: rgba(111, 168, 203, 0.15);
    --on-accent: #14181a;
    --gold: #d9a54b;
    --shadow: rgba(0, 0, 0, 0.4) 0 10px 30px -10px;
  }
}

* { box-sizing: border-box; }

/* In-page links land below the sticky header (its height is set by the page script). */
[id] { scroll-margin-top: calc(var(--header-h, 72px) + 8px); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font: 16px/1.55 var(--sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--text-h); line-height: 1.2; margin: 0 0 12px; }
h1 { font-size: 44px; letter-spacing: -0.5px; }
h2 { font-size: 30px; }
h3 { font-size: 20px; }
p { margin: 0 0 16px; }
a { color: var(--accent); }
a:focus-visible, .button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.narrow > * { max-width: 760px; }

.top { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--border); }
.top__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; flex-wrap: wrap; }
.top__nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.top__nav a:not(.button) {
  color: var(--text-h); text-decoration: none; font-weight: 500;
  padding: 6px 0; border-bottom: 2px solid transparent; transition: color 120ms ease, border-color 120ms ease;
}
.top__nav a:not(.button):hover { color: var(--accent); }
/* The section in view, or the page you're on. */
.top__nav a.is-current, .top__nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.top__nav { margin-left: auto; }
/* Support and Sign in leave this page, so they sit apart from the on-page links. */
.top__account { display: flex; align-items: center; gap: 16px; padding-left: 20px; border-left: 1px solid var(--border); }
.top__support { color: var(--text); text-decoration: none; font-weight: 500; transition: color 120ms ease; }
.top__support:hover, .top__support[aria-current="page"] { color: var(--accent); }
/* "Free trial" stands in for "Start free trial" on phones. */
.top__short { display: none; }
@media (prefers-reduced-motion: reduce) {
  .top__nav a:not(.button), .top__support { transition: none; }
}

.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo__mark { width: 32px; height: 32px; }
/* Colors set here, not with var() in the SVG attributes (not valid SVG). */
.logo__tile { fill: var(--accent); }
.logo__bar--gold { fill: var(--gold); }
.logo__text { font-size: 21px; font-weight: 600; color: var(--text-h); letter-spacing: -0.2px; }
.logo__accent { color: var(--accent); }

.button {
  display: inline-block; padding: 11px 18px; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; min-height: 44px;
}
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button--secondary { background: transparent; color: var(--text-h); border-color: var(--border-strong); }
.button--secondary:hover { background: transparent; color: var(--accent); border-color: var(--accent); }

.hero { padding: 56px 0; }
.hero__grid { display: grid; grid-template-columns: 5fr 6fr; gap: 48px; align-items: center; }
.lead { font-size: 18px; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.hero__note { margin: 12px 0 0; font-size: 14px; }
.hero__legal { margin: 4px 0 0; font-size: 13px; }
.hero__signin { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: 15px; }
.hero__signin a { font-weight: 600; }

.shot { margin: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); background: var(--surface); }
.shot img { display: block; width: 100%; height: auto; }

.section { padding: 64px 0; }
.section--tinted { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section__intro { margin-bottom: 40px; }

.feature { display: grid; grid-template-columns: 4fr 7fr; gap: 40px; align-items: center; }
/* A thin rule between features, so each reads as its own unit. */
.feature + .feature { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--border); }
.feature--flip { grid-template-columns: 7fr 4fr; }
.feature--flip .feature__text { order: 2; }

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 24px; }
.plan { border: 1px solid var(--border); border-radius: 12px; padding: 28px; background: var(--surface); display: flex; flex-direction: column; }
.plan--main { border-color: var(--accent); box-shadow: var(--shadow); }
.plan__price { font-size: 16px; }
.plan__price span { font-size: 36px; font-weight: 700; color: var(--text-h); }
.plan ul { padding-left: 20px; margin: 0 0 24px; flex: 1; }
.plan li { margin-bottom: 6px; }
.plan ul:last-child { margin-bottom: 0; }
.note { margin-top: 24px; max-width: 760px; }

/* Closing call to action: the end of the page. */
.cta { padding: 56px 0; background: var(--accent-bg); border-top: 1px solid var(--border); text-align: center; }
.cta .wrap > * { max-width: 640px; margin-left: auto; margin-right: auto; }
.cta__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }

.foot { padding: 32px 0; font-size: 14px; background: var(--surface); border-top: 1px solid var(--border); }
.foot__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); gap: 24px 64px; padding-bottom: 24px; margin-bottom: 24px;
  /* A rule the width of the text, not of the padded box. */
  background: linear-gradient(var(--border), var(--border)) center bottom / calc(100% - 2 * var(--gutter, 24px)) 1px no-repeat; }
.foot__title { font-size: 15px; margin: 0 0 8px; }
.foot__block p { margin: 0 0 6px; }
.foot__row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .hero__grid, .feature, .feature--flip { grid-template-columns: 1fr; gap: 24px; }
  .feature--flip .feature__text { order: 0; }
  .plans { grid-template-columns: 1fr; }
  h1 { font-size: 34px; }
}

@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  /* Phones: the links in a small strip above, then the logo, Sign in and Start free trial.
     /site.js lets the strip scroll away and pins the logo row. */
  .top__row { min-height: 56px; gap: 0 12px; padding-top: 6px; padding-bottom: 8px; justify-content: flex-start; }
  .top__account { display: contents; }
  .top__nav { order: 0; gap: 2px 16px; margin-left: 0; font-size: 14px; }
  .top__nav a:not(.button) { padding: 4px 0; }
  .top__support { order: 1; font-size: 14px; padding: 4px 0; margin-left: 4px; }
  .top__row::after { content: ""; order: 2; flex-basis: 100%; height: 6px; }
  .logo { order: 3; gap: 8px; }
  .logo__mark { width: 28px; height: 28px; }
  .logo__text { font-size: 18px; }
  .top__signin, .top__trial { order: 4; font-size: 15px; }
  .top__signin { margin-left: auto; padding: 6px 0; min-height: 0; border: 0; color: var(--text-h); }
  .top__trial { padding: 7px 12px; min-height: 36px; }
  .top__trial .top__long { display: none; }
  .top__trial .top__short { display: inline; }
  .foot__grid { grid-template-columns: 1fr; --gutter: 16px; }
  .hero, .section, .cta { padding: 40px 0; }
  .feature + .feature { margin-top: 32px; padding-top: 32px; }
  h1 { font-size: 30px; }
  h2 { font-size: 24px; }
}

/* Terms and Privacy */
.legal section { margin-top: 32px; }
.legal h2 { font-size: 22px; }
.legal ul { padding-left: 22px; margin: 0 0 16px; }
.legal li { margin-bottom: 8px; }
.legal__updated { font-size: 14px; }

/* Help center (site/help/) */
.help { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
.help__nav { position: sticky; top: calc(var(--header-h, 72px) + 24px); font-size: 15px; }
.help__nav-title { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); margin: 20px 0 6px; }
.help__nav-title:first-child { margin-top: 0; }
.help__nav ul { list-style: none; padding: 0; margin: 0; }
.help__nav li { margin: 0; }
.help__nav a { display: block; padding: 4px 0 4px 10px; color: var(--text-h); text-decoration: none; border-left: 2px solid transparent; }
.help__nav a:hover { color: var(--accent); }
.help__nav a[aria-current="page"] { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
.help__article { max-width: 720px; }
.help__article h1, .help h1, .section > .wrap > h1 { font-size: 34px; }
.help__article section { margin-top: 40px; }
.help__article h2 { font-size: 22px; }
.help__article ul, .help__article ol { padding-left: 22px; margin: 0 0 16px; }
.help__article li { margin-bottom: 8px; }
.help__crumb { font-size: 14px; margin-bottom: 8px; }
.help__open { margin: 0 0 8px; }
.help__toc { margin-top: 24px; padding: 16px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.help__toc-title { font-size: 15px; margin: 0 0 8px; }
.help__article .help__toc ul { margin: 0; }
.help__article .help__toc li { margin-bottom: 4px; }
.help__related { padding-top: 32px; border-top: 1px solid var(--border); }
.help__contact { margin-top: 32px; }
.help__draft { margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 15px; }
.help__sources { padding-top: 32px; border-top: 1px solid var(--border); font-size: 15px; }
.help__checked, .help__disclaimer { font-size: 14px; color: var(--text); }
.help__lead { max-width: 760px; }
.help-group { margin-top: 40px; }
.help-group h2 { font-size: 22px; }
.help-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.help-card { border: 1px solid var(--border); border-radius: 12px; padding: 20px; background: var(--surface); }
.help-card a { font-weight: 600; font-size: 17px; }
.help-card p { margin: 6px 0 0; font-size: 15px; }

@media (max-width: 860px) {
  .help { grid-template-columns: 1fr; gap: 24px; }
  .help__nav { position: static; order: 2; padding-top: 24px; border-top: 1px solid var(--border); }
}
@media (max-width: 480px) {
  .help__article h1, .help h1, .section > .wrap > h1 { font-size: 28px; }
}

/* Pages for small nonprofits (site/nonprofits/, built by docs/area-pages/build.py) */
.np-hero { padding: 64px 0 48px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
.np-cards { list-style: none; counter-reset: np; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.np-card { counter-increment: np; border: 1px solid var(--border); border-radius: 12px; padding: 24px; background: var(--bg); }
.np-card::before { content: counter(np); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); font-weight: 600; margin-bottom: 12px; }
.np-card h3 { font-size: 18px; }
.np-card p { margin: 0; }
.np-split { display: grid; grid-template-columns: 4fr 7fr; gap: 48px; align-items: start; }
.np-points { margin: 0; }
.np-points dt { color: var(--text-h); font-weight: 600; font-size: 18px; }
.np-points dd { margin: 4px 0 24px; }
.np-points dd:last-child { margin-bottom: 0; }
.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__item summary { cursor: pointer; padding: 16px 0; color: var(--text-h); font-weight: 600; list-style-position: outside; }
.faq__item p { margin: 0 0 16px; }
@media (max-width: 860px) {
  .np-cards, .np-split { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 480px) {
  .np-hero { padding: 40px 0 32px; }
}
.area__h2 { font-size: 22px; margin-top: 40px; }
.area__method { margin-top: 24px; font-size: 14px; }
.area-table { width: 100%; max-width: 560px; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; font-size: 15px; }
.area-table th, .area-table td { text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.area-table tr:last-child td { border-bottom: 0; }
.area-table th { color: var(--text-h); font-weight: 600; }
.area-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.area-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 24px; }
.area-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.area-list__n { font-variant-numeric: tabular-nums; color: var(--text-h); }
.np-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 24px 0 8px; }
.np-stat { border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: var(--surface); }
.np-stat__n { margin: 0; font-size: 22px; font-weight: 600; color: var(--text-h); font-variant-numeric: tabular-nums; }
.np-stat__label { margin: 2px 0 0; font-size: 14px; }
.givers { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
.giver { border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; background: var(--surface); }
.giver__name { font-size: 17px; margin: 0 0 2px; }
.giver__place { margin: 0 0 8px; font-size: 14px; }
.giver__giving { margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.giver__areas { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.giver__areas li { font-size: 12px; padding: 2px 10px; border-radius: 999px; background: var(--accent-bg); color: var(--text-h); }
.area__more { margin-top: 20px; }
@media (max-width: 640px) {
  .np-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* "Get started in minutes": text beside the setup animation (tools/site_setup_demo.py). */
.setup { display: grid; grid-template-columns: 5fr 6fr; gap: 48px; align-items: center; }
.setup__text p:last-child { margin-bottom: 0; }
.np-cards + .setup, .setup + .np-cards { margin-top: 40px; }

.setup-demo { margin: 0; }
.setup-demo figcaption { margin-top: 10px; font-size: 13px; }
.sd-window { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); background: var(--surface); font-size: 14px; }
.sd-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg); }
.sd-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.sd-bar p { margin: 0 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text-h); }
.sd-body { display: grid; grid-template-columns: 1fr 1.25fr; gap: 16px; padding: 16px; }
.sd-drop { position: relative; align-self: start; border: 2px dashed var(--border-strong); border-radius: 10px; padding: 14px; background: var(--accent-bg); }
.sd-drop__title, .sd-profile__name { margin: 0 0 10px; font-weight: 600; color: var(--text-h); }
.sd-files, .sd-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sd-file { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-h); overflow-wrap: anywhere; }
.sd-file__kind { flex: none; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 5px; border-radius: 4px; background: var(--accent); color: var(--on-accent); }
.sd-status { margin: 10px 0 0; font-size: 13px; }
.sd-fact { display: grid; grid-template-columns: 18px 1fr; gap: 2px 8px; padding: 8px 10px; border-radius: 8px; background: var(--accent-bg); }
.sd-fact__text { color: var(--text-h); }
.sd-fact__text strong { white-space: nowrap; }
.sd-fact__from { grid-column: 2; font-size: 12px; }
.sd-tick { width: 18px; height: 18px; margin-top: 1px; border-radius: 4px; background: var(--accent); position: relative; }
.sd-tick::after { content: ""; position: absolute; left: 6px; top: 2px; width: 4px; height: 9px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sd-done { margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--accent); }

/* The cursor and the files it drags in; only seen while the demo plays. */
.sd-drag { position: absolute; left: 22%; top: 42%; z-index: 2; opacity: 0; pointer-events: none; }
.sd-drag__files { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--accent); border-radius: 8px; background: var(--surface); color: var(--text-h); font-size: 13px; box-shadow: var(--shadow), 4px 4px 0 -1px var(--surface), 4px 4px 0 0 var(--border); }
.sd-cursor { position: absolute; right: -10px; bottom: -16px; fill: #1d2224; stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; }

/* /site.js adds is-ready (start hidden), then restarts is-playing every few seconds while the demo is in view.
   About 2.5 seconds: the cursor drags the files in, they land, then each answer appears. */
@media (prefers-reduced-motion: no-preference) {
  .setup-demo.is-ready .sd-step { opacity: 0; }
  .setup-demo.is-playing .sd-drag { animation: sd-drag 900ms cubic-bezier(0.3, 0.7, 0.3, 1) 150ms both; }
  .setup-demo.is-playing .sd-drop { animation: sd-over 700ms ease 450ms both; }
  .setup-demo.is-playing .sd-step { animation: sd-in 160ms ease forwards; }
  .setup-demo.is-playing .sd-file { animation-name: sd-drop; animation-delay: calc(1000ms + var(--i) * 80ms); }
  .setup-demo.is-playing .sd-status { animation-delay: 1300ms; }
  .setup-demo.is-playing .sd-fact { animation-delay: calc(1450ms + (var(--i) - 4) * 180ms); }
  .setup-demo.is-playing .sd-done { animation-delay: 2400ms; }
}
@keyframes sd-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sd-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes sd-drag {
  0% { opacity: 0; transform: translate(260px, -40px); }
  15% { opacity: 1; transform: translate(220px, -32px); }
  75% { opacity: 1; transform: none; }
  85% { opacity: 1; transform: scale(0.94); }
  100% { opacity: 0; transform: scale(0.94); }
}
@keyframes sd-over { 0%, 100% { border-color: var(--border-strong); } 30%, 80% { border-color: var(--accent); } }

@media (max-width: 860px) {
  .setup { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 480px) {
  .sd-body { grid-template-columns: 1fr; padding: 12px; }
}

/* Writing animation (tools/site_writing_demo.py): a sentence is typed with details filling in, a saved
   statistic is dragged in from the Text library, then the annual budget from Your data. The page and
   panel copy the real editor (white page, blue detail chips, blue drop line, panel cards). */
/* The first feature: the animation gets more room than a screenshot. */
@media (min-width: 861px) { .feature--writing { grid-template-columns: 8fr 4fr; } }
.writing-demo { margin: 0; }
.writing-demo figcaption { margin-top: 10px; font-size: 13px; }
.wd-body { position: relative; display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; padding: 16px; background: var(--bg); }
.wd-page { padding: 18px 20px; border-radius: 4px; background: #fff; color: #1d2224; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); font-size: 13px; line-height: 1.55; }
.wd-page p { margin: 0 0 10px; }
.wd-page p:last-child { margin-bottom: 0; }
.wd-heading { font-weight: 700; font-size: 15px; }
.wd-slot { position: relative; min-height: 3.1em; }
.wd-chip { padding: 0 4px; border-radius: 4px; background: #e3edf5; color: #1f5c8b; white-space: nowrap; }
.wd-line { position: absolute; left: 0; right: 0; top: -5px; height: 2px; background: #1f5c8b; opacity: 0; }
.wd-inline { position: relative; display: inline-block; min-width: 4.5em; }
.wd-caret { position: absolute; left: 0; top: 1px; bottom: 1px; width: 2px; background: #1f5c8b; opacity: 0; }
.wd-panel { align-self: start; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.wd-tabs { display: flex; gap: 2px; margin: 0 0 10px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; }
.wd-tab { flex: 1; padding: 4px 2px; border-radius: 6px; text-align: center; white-space: nowrap; color: var(--text-h); }
.wd-tab--data { background: var(--accent-bg); color: var(--accent); }
.wd-views { display: grid; }
.wd-view { grid-area: 1 / 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.wd-view--lib { opacity: 0; }
.wd-card { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 12px; }
.wd-card p { margin: 0; }
.wd-card__title { font-weight: 600; color: var(--text-h); }
.wd-card__kind { font-weight: 400; font-size: 11px; white-space: nowrap; padding: 0 6px; border: 1px solid var(--border-strong); border-radius: 999px; }
.wd-card__body { margin-top: 4px !important; }
.wd-group { margin: 0 0 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.wd-tag { display: flex; flex-direction: column; margin: 0 0 4px; padding: 4px 8px; border: 1px solid transparent; border-radius: 6px; background: var(--accent-bg); font-size: 12px; line-height: 1.35; }
.wd-tag__label { font-weight: 600; color: var(--accent); }
.wd-tag__value { color: var(--text-h); }
.wd-pointer { position: absolute; left: 70%; top: 60%; z-index: 2; opacity: 0; pointer-events: none; }
.wd-cursor { position: absolute; left: 0; top: 0; fill: #1d2224; stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; }
.wd-label { position: absolute; left: 14px; top: 16px; padding: 3px 8px; border: 1px solid var(--accent); border-radius: 6px; background: var(--surface); color: var(--text-h); font-size: 12px; white-space: nowrap; box-shadow: var(--shadow); opacity: 0; }

/* Times count from --drag (when typing ends): drop 1 at +1300ms, Your data at +2100ms, drop 2 at +3650ms. */
@media (prefers-reduced-motion: no-preference) {
  .writing-demo.is-ready .wd-k, .writing-demo.is-ready .wd-dropped, .writing-demo.is-ready .wd-dropped2, .writing-demo.is-ready .wd-view--data { opacity: 0; }
  .writing-demo.is-ready .wd-view--lib { opacity: 1; }
  .writing-demo.is-ready .wd-tab--data { background: none; color: var(--text-h); }
  .writing-demo.is-ready .wd-tab--lib { background: var(--accent-bg); color: var(--accent); }
  .writing-demo.is-playing .wd-k { animation: sd-in 1ms linear var(--t) forwards; }
  .writing-demo.is-playing .wd-chip.wd-k { animation-duration: 160ms; }
  .writing-demo.is-playing .wd-pointer { animation: wd-move 4200ms ease-in-out var(--drag) both; }
  .writing-demo.is-playing [data-wd="lib"] { animation: wd-pick 1300ms ease var(--drag) both; }
  .writing-demo.is-playing .wd-label--text { animation: wd-show 1100ms linear calc(var(--drag) + 200ms) both; }
  .writing-demo.is-playing .wd-line { animation: wd-show 400ms linear calc(var(--drag) + 900ms) both; }
  .writing-demo.is-playing .wd-dropped { animation: sd-drop 220ms ease calc(var(--drag) + 1300ms) forwards; }
  .writing-demo.is-playing .wd-view--lib { animation: wd-out 150ms ease calc(var(--drag) + 2100ms) both; }
  .writing-demo.is-playing .wd-view--data { animation: sd-in 150ms ease calc(var(--drag) + 2100ms) forwards; }
  .writing-demo.is-playing .wd-tab--lib { animation: wd-tab-off 1ms linear calc(var(--drag) + 2100ms) forwards; }
  .writing-demo.is-playing .wd-tab--data { animation: wd-tab-on 1ms linear calc(var(--drag) + 2100ms) forwards; }
  .writing-demo.is-playing [data-wd="data"] { animation: wd-pick 1100ms ease calc(var(--drag) + 2600ms) both; }
  .writing-demo.is-playing .wd-label--data { animation: wd-show 1000ms linear calc(var(--drag) + 2650ms) both; }
  .writing-demo.is-playing .wd-caret { animation: wd-show 400ms linear calc(var(--drag) + 3250ms) both; }
  .writing-demo.is-playing .wd-dropped2 { animation: sd-in 160ms ease calc(var(--drag) + 3650ms) forwards; }
}
/* The cursor: library card, drop, the Your data tab (click), the budget, drop. */
@keyframes wd-move {
  0% { opacity: 0; left: var(--lib-x); top: var(--lib-y); }
  5% { opacity: 1; left: var(--lib-x); top: var(--lib-y); }
  26%, 31% { left: var(--slot-x); top: var(--slot-y); }
  48% { left: var(--tab-x); top: var(--tab-y); transform: none; }
  50% { left: var(--tab-x); top: var(--tab-y); transform: scale(0.85); }
  52% { left: var(--tab-x); top: var(--tab-y); transform: none; }
  62%, 64% { left: var(--data-x); top: var(--data-y); }
  86%, 92% { opacity: 1; left: var(--inline-x); top: var(--inline-y); }
  100% { opacity: 0; left: var(--inline-x); top: var(--inline-y); }
}
@keyframes wd-show { 0%, 100% { opacity: 0; } 10%, 90% { opacity: 1; } }
@keyframes wd-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes wd-pick { 0%, 100% { border-color: var(--border); } 10%, 85% { border-color: var(--accent); } }
@keyframes wd-tab-on { to { background: var(--accent-bg); color: var(--accent); } }
@keyframes wd-tab-off { to { background: none; color: var(--text-h); } }

@media (max-width: 480px) {
  .wd-body { grid-template-columns: 1fr; padding: 12px; }
  .wd-card:not([data-wd]), .wd-more { display: none; }
}