/* cheatsheet.life family look (Create.Websites goal 3406, Ian 2026-10-06). ONE definition of the visual language the hub
   (www.cheatsheet.life) shares with its product sites (inventory.cheatsheet.life), so they cannot drift.
   Canonical copy: buckets/TEMPLATE/css-lib/cheatsheet-life.css. A site links /css-lib/cheatsheet-life.css after Bulma and
   before its own sheet; seed_lib_files copies a missing one, and testCheatsheetFamilyLook reds on a bucket copy that is not
   byte-identical to TEMPLATE's: edit TEMPLATE, then `cp -p` it into every site that links it. A site's own sheet adds its
   page layout; it never restyles a button, tab, tile or list row defined here.
   Rulings (context: websites/life.cheatsheet.www/look.md):
   - a button's colour says what pressing it does: black (.is-primary) = the click changes data (save, sign up, sign in,
     add, delete); white (a plain .button, or a link styled as one) = it goes somewhere or only changes the page; grey =
     disabled, whatever the role. No other colour on a button (goal 3393).
   - the selected tab and every tile are #EEE, so checkboxes and white buttons stand out against them; the tab track is
     white so the #EEE tab is set apart from it (goal 3394).
   - a list draws its separator between items only, never under the last one (goal 3398).
   Monochrome after Create.Websites designs/DESIGN_Ui.md: hairline borders, pill controls, red only in an error message.
   No inline styles (CSP). Geist is not self-hosted: the stack falls back to Inter, then the system sans.
   Spacing: the root is 16px so every Bulma rem lands on a 4px grid; text stays 14px. */

:root, [data-theme=light], .theme-light {
  color-scheme: light;
  --ink: #0a0a0a; --ink-soft: #171717; --mid-gray: #737373; --hairline: #e5e5e5; --rule: #d4d4d4;
  --canvas: #f5f5f5; --paper: #ffffff; --surface-alt: #fafafa; --ember: #e7000b;
  --tile: #eeeeee;
  --card-shadow: 0 0 0 1px rgba(23, 23, 23, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);

  --bulma-family-primary: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bulma-body-size: 16px; --bulma-body-font-size: 14px; --bulma-size-normal: 0.875rem;
  --bulma-scheme-h: 0; --bulma-scheme-s: 0%;
  --bulma-scheme-main-l: 100%; --bulma-scheme-main-bis-l: 98%; --bulma-scheme-main-ter-l: 96%;
  --bulma-scheme-invert-l: 4%; --bulma-background-l: 96%;
  --bulma-body-background-color: var(--canvas);
  --bulma-text: var(--ink); --bulma-text-strong: var(--ink); --bulma-text-weak: var(--mid-gray);
  --bulma-border: var(--hairline); --bulma-border-weak: var(--hairline);
  --bulma-primary-h: 0deg; --bulma-primary-s: 0%; --bulma-primary-l: 4%; --bulma-primary-invert-l: 98%; --bulma-primary-on-scheme-l: 4%;
  --bulma-link-h: 0deg; --bulma-link-s: 0%; --bulma-link-l: 4%; --bulma-link-invert-l: 98%; --bulma-link-on-scheme-l: 4%;
  --bulma-danger-h: 357deg; --bulma-danger-s: 100%; --bulma-danger-l: 45%; --bulma-danger-invert-l: 100%; --bulma-danger-on-scheme-l: 45%;
  --bulma-radius-small: 6px; --bulma-radius: 18px; --bulma-radius-medium: 10px; --bulma-radius-large: 24px;
  --bulma-control-radius: 18px; --bulma-control-radius-small: 18px; --bulma-input-radius: 18px; --bulma-tag-radius: 18px;
  --bulma-box-radius: 24px; --bulma-notification-radius: 18px;
  --bulma-shadow: var(--card-shadow); --bulma-box-shadow: var(--card-shadow);
}

/* ── type ───────────────────────────────────────────────────────── */
body { font-weight: 400; line-height: 1.43; color: var(--ink); }
a { color: var(--ink); }
a:hover { color: var(--ink-soft); text-decoration: underline; }
p a:not(.button), .help a { text-decoration: underline; text-underline-offset: 2px; }   /* a link inside running text reads as one */
.title { font-weight: 600; color: var(--ink); font-size: 30px; line-height: 1.2; letter-spacing: -0.025em; }
.title:not(:last-child), .title:not(.is-spaced):has(+ .subtitle) { margin-bottom: 12px; }   /* one gap under a page title, whatever follows it */
h2.subtitle { font-size: 18px; line-height: 1.56; font-weight: 600; color: var(--ink); margin-top: 32px; }
h2.subtitle:not(:last-child) { margin-bottom: 12px; }
.title + h2.subtitle { margin-top: 0; }   /* a section heading right under the page title keeps the one title gap */
.subtitle.is-6 { font-size: 14px; color: var(--mid-gray); }
.subtitle.is-6:not(:last-child) { margin-bottom: 16px; }
.label { font-size: 14px; font-weight: 500; color: var(--ink); }
.caption { font-size: 12px; line-height: 1.33; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mid-gray); }
.narrow, .container.narrow:not(.is-max-desktop):not(.is-max-widescreen) { max-width: 640px; margin-left: auto; margin-right: auto; }
.section { padding-top: 32px; }

/* ── buttons: the colour is the role ────────────────────────────── */
.button { border-radius: 18px; font-size: 14px; font-weight: 500; border-color: var(--hairline); background: var(--paper); color: var(--ink); box-shadow: none; }
.button:hover { background: var(--surface-alt); border-color: var(--rule); color: var(--ink); text-decoration: none; }
.button.is-small { font-size: 13px; border-radius: 18px; }
.button.is-primary { background: var(--ink); border-color: var(--ink); color: #fafafa; }
.button.is-primary:hover, .button.is-primary:focus { background: var(--ink-soft); border-color: var(--ink-soft); color: #fafafa; }
.button[disabled], .button[disabled]:hover, .button[disabled]:focus { background: var(--ink); border-color: var(--ink); color: #fafafa; opacity: 0.5; }
.buttons { gap: 8px; }

/* ── inputs ─────────────────────────────────────────────────────── */
.input, .textarea, .select select { background: var(--canvas); border-color: transparent; box-shadow: none; color: var(--ink); font-size: 14px; }
.input, .select select { border-radius: 18px; }
.textarea { border-radius: 18px; padding: 10px 14px; }
.input::placeholder, .textarea::placeholder { color: var(--mid-gray); }
.input:hover, .textarea:hover, .select select:hover { border-color: transparent; }
.input:focus, .textarea:focus, .select select:focus { background: var(--paper); border-color: var(--hairline); box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06); }
/* On a #EEE tile an input is white with a visible border, like the white buttons beside it. */
.formCard .input, .formCard .textarea, .formCard .select select, ul.rows .input, ul.rows .select select { background: var(--paper); border-color: var(--rule); }
.formCard .input:focus, .formCard .textarea:focus, .formCard .select select:focus, ul.rows .input:focus, ul.rows .select select:focus { border-color: var(--mid-gray); }
.input:disabled, .select select:disabled { opacity: 0.6; }
.select:not(.is-multiple):not(.is-loading)::after { border-color: var(--mid-gray); }
.checkbox input[type=checkbox], input[type=checkbox] { accent-color: var(--ink); }
.help { color: var(--mid-gray); font-size: 12px; }
@media (max-width: 768px) { .input, .textarea, .select select { font-size: 16px; } } /* no iOS zoom on focus */

/* ── badges ─────────────────────────────────────────────────────── */
.tag { border-radius: 18px; font-size: 12px; font-weight: 500; background: var(--canvas); color: var(--ink-soft); padding: 2px 8px; height: auto; }
a.tag:hover { background: var(--hairline); text-decoration: none; }

/* ── messages: red text on paper, never a chromatic fill ────────── */
.notification { background: var(--paper); border: 1px solid var(--hairline); color: var(--ink); box-shadow: var(--card-shadow); }
.notification.is-warning, .notification.is-danger { background: var(--paper); color: var(--ember); }
.notification.is-danger.is-light { color: var(--ink); }
.messageError:empty { display: none; }
/* A refusal, not a panel (goals 4193, 4201; Ian 2026-10-23: no panel saying what just happened, "if they're not [successful], then
   something on the page should be highlighted as to what's wrong"). A product's js/site.js refuse(): what the member used is
   outlined red (.refused) and one red sentence (.refusal) sits beside it: under its list row, at the foot of its form field, or
   after its buttons, its tile or the title. #message holds only why a page could not be read, in the same red. */
.refusal { color: var(--ember); font-size: 14px; }
p.refusal { margin-top: 8px; }
ul.rows > li > .refusal, .fieldRow > .refusal { flex: 1 0 100%; }
#message .refusal { margin: 0 0 16px; }
.button.refused, .select select.refused, input[type="checkbox"].refused, .input.refused:not(.sneaky):not(.titleName), .textarea.refused { outline: 2px solid var(--ember); outline-offset: 1px; }

/* ── header: the site's pill tabs left, the account pills right ─── */
.breadcrumb { font-size: 14px; }
.breadcrumb a { color: var(--mid-gray); }
.breadcrumb li.is-active a, .breadcrumb li:last-child a { color: var(--ink); }
.breadcrumb li + li::before { color: var(--mid-gray); content: "\203A"; }
.headerNavs { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 24px; }
.headerNavs > .tabs.pills { margin-bottom: 0; flex: 0 1 auto; min-width: 0; }
.headerNavs > .tabs.accountTabs { margin-left: auto; }
.tabs.accountTabs { justify-content: flex-end; }
.tabs ul { border-bottom: none; }
.tabs.pills ul { display: inline-flex; flex-grow: 0; flex-wrap: wrap; flex-shrink: 1; gap: 2px; padding: 3px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 18px; }
.tabs.pills a { border: none; margin: 0; border-radius: 18px; padding: 5px 12px; color: var(--mid-gray); font-weight: 500; }
.tabs.pills a:hover { color: var(--ink); text-decoration: none; }
.tabs.pills li.is-active a { background: var(--tile); color: var(--ink); }

/* ── a link to another product (goal 4200, Ian 2026-10-23: "Add a nice arrow icon within the button to the left of the "Village" text to hint
   that it'll be navigating to a different product. Make this same icon change to any link to other products across all the products") ── */
/* <a class="button toProduct" href="https://village.cheatsheet.life/" target="_blank" rel="noopener">Village</a>: an arrow out of a box before
   the words, one em square, drawn in the link's own colour (a mask over currentColor, so it follows the ink and its hover). */
.toProduct::before {
  content: ""; display: inline-block; flex: 0 0 auto; width: 1em; height: 1em; margin-right: 6px; vertical-align: -0.125em; background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3H4.5A1.5 1.5 0 0 0 3 4.5v7A1.5 1.5 0 0 0 4.5 13h7a1.5 1.5 0 0 0 1.5-1.5V9'/%3E%3Cpath d='M8 8l5-5M9.5 3H13v3.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3H4.5A1.5 1.5 0 0 0 3 4.5v7A1.5 1.5 0 0 0 4.5 13h7a1.5 1.5 0 0 0 1.5-1.5V9'/%3E%3Cpath d='M8 8l5-5M9.5 3H13v3.5'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
}

/* ── the page's foot (goals 4383, 4386, Ian 2026-10-27: "Change the Leave a comment link to look identical to how it's displayed in the other
   products (namely, the cheatsheet.life product) ... I want it to be changed to be centered on the page across all pages and products") ── */
/* <footer class="pageFooter"><a href="{{commentUrl}}" id="leaveCommentLink" class="toProduct">Leave a comment</a></footer>, last on every page:
   14px, underlined, in the ink, centred 48px under the page. A product's own sheet may repeat the size and the gap; none sets text-align. */
.pageFooter { margin-top: 48px; font-size: 14px; text-align: center; }
.pageFooter a { text-decoration: underline; text-underline-offset: 2px; }

/* ── tiles and list rows ────────────────────────────────────────── */
.card-surface, ul.rows, .formCard {
  background: var(--tile); border: 1px solid var(--hairline); border-radius: 24px; box-shadow: var(--card-shadow);
}
.formCard { padding: 20px; }
.formCard > :last-child { margin-bottom: 0; }
.formCard + .buttons, ul.rows + .buttons { margin-top: 16px; }   /* a tile's action buttons sit under it, on their own */
.formCard > p:not(:last-child) { margin-bottom: 12px; }
.formCard + .formCard, ul.rows + .formCard, .formCard + ul.rows { margin-top: 16px; }
ul.rows { list-style: none; margin: 0; padding: 4px 20px; }
ul.rows > li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
ul.rows > li:last-child { border-bottom-color: transparent; }   /* between items only; every row keeps its height */
ul.rows > li:not(:has(~ li:not(.is-hidden))) { border-bottom-color: transparent; }   /* also the last row shown when a filter hides the rest (.is-hidden); its own rule, so no :has() keeps the one above */
.rowActions { margin-left: auto; display: inline-flex; gap: 6px; }
.where { color: var(--mid-gray); font-size: 13px; }
.empty { color: var(--mid-gray); font-style: italic; list-style: none; }

/* ── the day's colours (goal 3848, Ian 2026-10-13) ───────────────── */
/* The day bar itself (goal 3906, Ian 2026-10-14) has its own sheet, css-lib/day-bar.css, drawn by js-lib/cheatsheet-life.js; this
   sheet only names the four default colours it falls back to, and the swatch of a part beside its name below. */
:root { --day-night: #1f2a44; --day-morning: #f2c14e; --day-afternoon: #5fa8d3; --day-evening: #8e6bbf; }
/* A part's colour beside its name (schedule.cheatsheet.life's settings and day): <span class="dayPart is-morning"></span>. */
.dayPart { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; background: var(--day-night); }
.dayPart.is-morning { background: var(--day-morning); }
.dayPart.is-afternoon { background: var(--day-afternoon); }
.dayPart.is-evening { background: var(--day-evening); }

/* ── links on a thing's page (goal 4284; Ian 2026-10-25, goal 4276: "a single button will make that shortlist appear and each one can
   have a little add button next to it to create the association") ── */
/* js-lib/cheatsheet-life.js linkPanel draws it: the Links heading with Add a link on its right, the tied links in a tile (name, the open
   icon, a black x), then the shortlist under its caption (name, a black Add, the filled star). The two icons are masks over currentColor,
   as .toProduct's arrow: links' open icon and its star, 18px in a 32px round target that turns white on hover. Every rule is scoped
   to .linkPanel: the links site has a .linkName of its own. */
.linkPanel { margin-top: 32px; }
.linkPanel[hidden], .linkPanel [hidden] { display: none !important; }
.linkPanel .linkHead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.linkPanel .linkHead h2.subtitle { margin: 0; }
.linkPanel .linkFailed { color: var(--ember); font-size: 14px; }   /* why the links could not be read: .refusal's red, its own class so no product's clearRefusal takes it */
.linkPanel .linkName { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }   /* a long address wraps beside its buttons, never pushes them under it */
.linkPanel .linkShortlist { margin-top: 16px; }
.linkPanel .linkShortlist .caption { margin-bottom: 8px; }
.linkPanel .linkOpen, .linkPanel .linkStar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 18px; background: none; color: var(--mid-gray); cursor: pointer; }
.linkPanel .linkOpen:hover, .linkPanel .linkStar:hover { color: var(--ink); background: var(--paper); text-decoration: none; }
.linkPanel .linkStar { color: var(--ink); }
.linkPanel .button.linkOff { min-width: 30px; }
.linkPanel .linkGlyph { display: inline-block; width: 18px; height: 18px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.linkPanel .linkGlyph.isOpen {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
}
.linkPanel .linkGlyph.isStar {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l2.8 5.8 6.4.9-4.6 4.5 1.1 6.3L12 17.3l-5.7 3 1.1-6.3-4.6-4.5 6.4-.9z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l2.8 5.8 6.4.9-4.6 4.5 1.1 6.3L12 17.3l-5.7 3 1.1-6.3-4.6-4.5 6.4-.9z'/%3E%3C/svg%3E");
}

/* ── points (goal 4616; Ian 2026-11-04: "text like this “+<number>” That's green and glowing and it fades in and out as it moves up from whatever
   button or input element the user just interacted with. Maybe the put button turns green as well. [...] little butterflies [...] They would
   have to be little because I don't want them to be annoying [...] magical looking too, like little Tinkerbell kind of animations. maybe options
   can have a green border or a green hue to them") ── */
/* js-lib/cheatsheet-life.js draws them all under <html> (kushim draws <body> again), placed by the CSSOM, and none takes a click. Green is the one
   colour a button wears besides black, white and grey (goal 3393), and only for the moment after a write earned: .pointsEarned. */
.pointsFloat { position: fixed; z-index: 2147483000; pointer-events: none; white-space: nowrap; transform: translate(-50%, 0);
  font: 800 20px/1 var(--bulma-family-primary); letter-spacing: 0.02em; color: #22c55e;
  text-shadow: 0 0 1px #ffffff, 0 0 4px #86efac, 0 0 10px #22c55e, 0 0 20px rgba(34, 197, 94, 0.75);
  animation: pointsRise 1.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes pointsRise {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(0.6); }
  15% { opacity: 1; transform: translate(-50%, -14px) scale(1.18); }
  30% { transform: translate(-50%, -24px) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -78px) scale(0.96); }
}
.pointsEarned, .button.pointsEarned, .button.is-primary.pointsEarned, a.pointsEarned { background-color: #16a34a !important; border-color: #16a34a !important; color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35), 0 0 16px rgba(34, 197, 94, 0.8) !important; transition: background-color 0.15s, box-shadow 0.15s; }
input.pointsEarned, textarea.pointsEarned, select.pointsEarned { background-color: #f0fdf4 !important; color: inherit !important; }
.pointsInvite { outline: 2px solid rgba(34, 197, 94, 0.6); outline-offset: 2px; box-shadow: 0 0 10px rgba(34, 197, 94, 0.35); }
.pointsTip { position: fixed; z-index: 2147483001; pointer-events: none; max-width: 280px; padding: 8px 12px; border-radius: 8px;
  background: #052e16; color: #f0fdf4; font-family: var(--bulma-family-primary); font-size: 13px; line-height: 1.4; text-align: left; box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.7), 0 4px 16px rgba(0, 0, 0, 0.25); }
.pointsTip .pointsTipHow { display: block; }
.pointsTip .pointsTipPay { display: block; margin-top: 4px; font-weight: 700; color: #4ade80; text-shadow: 0 0 6px rgba(74, 222, 128, 0.6); }
/* The butterfly: 16px across (a sheet's tile is wider than 100), two glowing wings beating slowly at rest, fast in flight, leaving a few sparkles. */
.pointsButterfly { position: absolute; left: 0; top: 0; z-index: 2147482999; width: 16px; height: 12px; pointer-events: none; opacity: 0; transition: opacity 0.6s;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 5px rgba(16, 185, 129, 0.9)); will-change: transform; }
.pointsButterfly.isShown { opacity: 0.95; }
.pointsButterfly .pointsWing { position: absolute; top: 0; width: 8px; height: 7px;
  background: radial-gradient(circle at 50% 45%, #ffffff 0, #d1fae5 25%, #34d399 62%, #0d9488 100%); }
.pointsButterfly .pointsWing::after { content: ""; position: absolute; top: 6px; width: 5px; height: 5px; background: radial-gradient(circle at 50% 40%, #ffffff 0, #a7f3d0 35%, #10b981 100%); }
.pointsButterfly .pointsWing.isLeft { left: 0; border-radius: 85% 10% 40% 70%; transform-origin: 100% 50%; animation: pointsFlap 2.4s ease-in-out infinite; }
.pointsButterfly .pointsWing.isLeft::after { right: 0; border-radius: 60% 10% 50% 90%; }
.pointsButterfly .pointsWing.isRight { right: 0; border-radius: 10% 85% 70% 40%; transform-origin: 0 50%; animation: pointsFlap 2.4s ease-in-out infinite; }
.pointsButterfly .pointsWing.isRight::after { left: 0; border-radius: 10% 60% 90% 50%; }
.pointsButterfly.isFlying .pointsWing { animation-duration: 0.22s; }
.pointsButterfly .pointsBody { position: absolute; left: 7px; top: 2px; width: 2px; height: 8px; border-radius: 1px; background: #065f46; }
@keyframes pointsFlap { 0%, 30%, 100% { transform: scaleX(1); } 10% { transform: scaleX(0.2); } 20% { transform: scaleX(0.9); } }
.pointsSparkle { position: absolute; left: 0; top: 0; z-index: 2147482998; width: 3px; height: 3px; border-radius: 50%; pointer-events: none;
  background: #fefce8; box-shadow: 0 0 4px 1px rgba(134, 239, 172, 0.9), 0 0 2px rgba(253, 224, 71, 0.9); animation: pointsSparkle 0.9s ease-out forwards; }
@keyframes pointsSparkle { 0% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pointsFloat { animation: pointsFade 1.9s ease-out forwards; transform: translate(-50%, -20px); }
  .pointsButterfly, .pointsSparkle { display: none; }
}
@keyframes pointsFade { 0% { opacity: 0; } 15%, 70% { opacity: 1; } 100% { opacity: 0; } }