/* nucifera components. Every value comes from tokens.css; add new components here, not one-off styles. */

*, *::before, *::after { box-sizing: border-box; }
.app { background: var(--bg-0); color: var(--fg-1); font: var(--t-body); letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100%; position: relative; }
.app :where(h1, h2, h3, p, ul, ol, li, figure) { margin: 0; padding: 0; list-style: none; }
/* a night window resolves its own text colour; inherited colour would come from the light parent (dark on dark) */
.night { color: var(--fg-1); }
.pad { padding-inline: var(--pad-screen); }
.stack > * + * { margin-top: var(--s-6); }

/* type */
.t-display { font: var(--t-display); letter-spacing: var(--ls-display); }
.t-title { font: var(--t-title); letter-spacing: var(--ls-title); }
.t-headline { font: var(--t-headline); letter-spacing: var(--ls-headline); }
.t-body-lg { font: var(--t-body-lg); }
.t-small { font: var(--t-small); }
.fg-2 { color: var(--fg-2); } .fg-3 { color: var(--fg-3); } .accent { color: var(--accent); }
.t-time { font: var(--t-time); color: var(--fg-2); }   /* timestamps only; all other secondary text is .t-small */
.link { color: var(--link); text-decoration: var(--link-line); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.price, .counter { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lead { margin-top: var(--s-2); color: var(--fg-2); font: var(--t-body-lg); }

/* buttons: filled main action, quiet secondary, text-only ghost */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--tap);
  padding: 0 var(--s-5); border-radius: var(--r-md); border: 0; font: var(--t-label); cursor: pointer;
  transition: transform var(--dur-exit) var(--ease-out), background-color var(--dur-exit) var(--ease-color); }
.btn:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
.btn:focus-visible, .chip:focus-visible, .row:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn--primary { background: var(--cta-bg); color: var(--cta-fg); min-height: var(--btn-h); width: 100%; }
.btn--secondary { background: var(--bg-2); color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--ghost { background: transparent; color: var(--link); padding: 0 var(--s-3);
  text-decoration: var(--link-line); text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* chips: filters and choices; selected = lighter, not more colourful */
.chips { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; padding-inline: var(--pad-screen); }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--bg-1); color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-2); font: var(--t-label); font-size: 14px;
  position: relative; }
.chip::after { content: ""; position: absolute; inset: -4px 0; } /* 44px touch area */
.chip[aria-pressed="true"] { background: var(--bg-3); color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--line-3); }
.chip { transition: background-color var(--dur-exit) var(--ease-color), color var(--dur-exit) var(--ease-color), transform var(--dur-exit) var(--ease-out); }
.chip:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
/* action and status chips: wrap onto a second row instead of being cut at the edge; full 44px */
.chips--wrap { flex-wrap: wrap; overflow: visible; padding-inline: 0; }
.chips--wrap .chip { height: var(--tap); color: var(--fg-1); font-size: 15px; }
.chips--wrap .chip::after { display: none; }

/* fields */
.field { display: flex; align-items: center; gap: var(--s-3); min-height: var(--field-h); padding: 0 var(--s-4);
  border-radius: var(--r-md); background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-2); }
.field input, .field textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--fg-1);
  font: var(--t-body-lg); font-size: 16px; }
.field input::placeholder { color: var(--fg-3); }
.field:focus-within { box-shadow: inset 0 0 0 1px var(--focus); }
.field--error { box-shadow: inset 0 0 0 1px var(--err); }
.field-msg { margin-top: 6px; font: var(--t-small); color: var(--err); }

/* query summary: the user's request as one readable block with an edit action */
.query { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  border-radius: var(--r-md); background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-1), var(--shadow-card); }
.query__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.query__main { font: var(--t-label); }
.query__sub { font: var(--t-small); color: var(--fg-2); }

/* raised panel: at most one per screen, for the signature; .card--edge adds the top-left edge highlight (Linear corner light) */
.card { position: relative; border-radius: var(--r-lg); background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-1), var(--shadow-card); }
.card--edge::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(75% 55% at 0% 0%, var(--edge-hi), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* hero: the one main object of the screen; media is full-bleed and keeps its clarity */
.hero { position: relative; border-radius: var(--r-xl); background: var(--bg-1); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line-1), var(--shadow-card); }
.hero__media { position: relative; aspect-ratio: 16 / 10; background: var(--bg-2); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--photo-fx); }
.hero__media::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; pointer-events: none;
  background: linear-gradient(transparent, var(--bg-1)); }
[data-theme="light"] .hero:not(.night) .hero__media::after { display: none; } /* in light theme photos never fade into white */
.hero__body { padding: var(--s-4); }
.hero__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.hero__name, .hero__price { font: var(--t-title); letter-spacing: var(--ls-title); }

/* badge: opaque, no dot, one per media at most */
.badge { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--bg-2); color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--line-2); font: var(--t-small); font-weight: 500; }
.hero__media .badge { position: absolute; left: var(--s-3); top: var(--s-3); z-index: 1; }

/* list rows: flat, separated by hairlines */
.rows > .row + .row { border-top: 1px solid var(--line-1); }
.row { display: flex; align-items: center; gap: var(--s-3); min-height: 64px; padding: var(--s-3) 0; }
.row__thumb { flex: none; width: 88px; height: 64px; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-2); }
.row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.row__main { flex: 1; min-width: 0; }
.row__title { font: var(--t-label); font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row__meta { margin-top: 2px; font: var(--t-small); color: var(--fg-2); }
.row__aside { flex: none; text-align: right; }
.row__value { font: var(--t-label); font-size: 16px; font-variant-numeric: tabular-nums; }
.row__note { font: var(--t-small); color: var(--fg-2); font-variant-numeric: tabular-nums; }

/* stat: a number as the object, label beside it */
.stat { display: flex; align-items: center; gap: var(--s-3); }
.stat__num { font: 600 52px/0.95 var(--font-sans); letter-spacing: -0.03em; }
.stat__unit { font: 600 24px/1 var(--font-sans); color: var(--fg-2); margin-left: 2px; }
.stat__label { font: var(--t-label); }
.stat__sub { font: var(--t-small); color: var(--fg-2); }

/* key-value list on the canvas (specs, summary, receipt): label left, value right, a hairline between rows.
   No box and no grid of cells: data cut into boxes is hard to read. */
.kv { margin: 0; }
.kv__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); min-height: var(--tap); padding: 10px 0; }
.kv__row + .kv__row { border-top: 1px solid var(--line-1); }
.kv__k { color: var(--fg-2); }
.kv__v { color: var(--fg-1); font-weight: var(--w-medium); text-align: right; }
.kv__total { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s-4) 0; border-top: 1px solid var(--line-2); }
.kv__total .price { font: 600 28px/1 var(--font-sans); letter-spacing: -0.02em; }

/* section head */
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin: var(--s-8) 0 var(--s-2); }
.section-head h2 { font: var(--t-headline); letter-spacing: var(--ls-headline); }
.section-head .btn--ghost { min-height: var(--tap); margin: -12px -12px -12px 0; }

/* sticky glass bar (one of at most two glass details) */
.glassbar { position: sticky; top: 0; z-index: 2; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx);
  border-bottom: 1px solid var(--line-1); }

/* states */
.skeleton { border-radius: var(--r-sm); background: var(--bg-2); animation: pulse 1.8s var(--ease) infinite; }
@keyframes pulse { 0%, 100% { opacity: .4 } 50% { opacity: .7 } }
.empty { padding: var(--s-12) var(--pad-screen); text-align: center; color: var(--fg-2); }
.empty h2 { font: var(--t-headline); color: var(--fg-1); margin-bottom: var(--s-2); }
.status { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); font: var(--t-small); font-weight: 500; }
.status--ok { color: var(--ok); background: var(--ok-tint); }
.status--warn { color: var(--warn); background: var(--warn-tint); }
.status--err { color: var(--err); background: var(--err-tint); }

/* landing only: one soft light behind the hero */
.wash { position: absolute; inset: 0 0 auto; height: 520px; background: var(--wash); pointer-events: none; }

/* ============================ motion recipes ============================
   Durations and curves are roles from tokens.css; behaviour that needs a script is in assets/motion.js.
   When and why to use each one: references/motion.md. */

/* the theme switches without transitions: add .nu-no-tx to <html> for two frames (motion.js setTheme does it) */
.nu-no-tx *, .nu-no-tx *::before, .nu-no-tx *::after { transition: none !important; }

/* press and highlight: the highlight appears at once and fades out; hover only where a real pointer exists */
.tap, .menu__item { transition: background-color var(--dur-exit) var(--ease-color); -webkit-tap-highlight-color: transparent; }
.tap:active, .menu__item:active { background: var(--bg-3); transition-duration: 0s; }
@media (hover: hover) and (pointer: fine) {
  .tap:hover, .menu__item:hover { background: var(--bg-2); transition-duration: 0s; }
  .btn--secondary:hover { background: var(--bg-3); transition-duration: 0s; }
}

/* menu and popover: grow from the trigger (set --origin to the trigger's side), leave faster */
.pop { position: absolute; z-index: 20; transform-origin: var(--origin, top left);
  opacity: 0; transform: scale(var(--scale-menu)); visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-exit) var(--ease-out), transform var(--dur-exit) var(--ease-out), visibility 0s linear var(--dur-exit); }
.pop.open { opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out), visibility 0s; }
.menu { min-width: 220px; padding: var(--s-1); border-radius: var(--r-md); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-float); }
[data-theme="light"] .menu { background: var(--bg-1); }
.menu__item { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; min-height: var(--tap);
  padding: 0 var(--s-3); border: 0; border-radius: var(--r-sm); background: none; color: var(--fg-1); font: var(--t-body); text-align: left; cursor: pointer; }

/* tooltip: put .tip inside a trigger with [data-tip]; the first one waits, neighbours open at once (motion.js) */
[data-tip] { position: relative; }
.tip { position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 0; z-index: 30; padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--fg-1); color: var(--bg-0); font: var(--t-small); font-weight: 500; white-space: nowrap; pointer-events: none;
  transform-origin: bottom center; opacity: 0; transform: scale(var(--scale-tip));
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.tip.open { opacity: 1; transform: none; transition-duration: var(--dur-exit); }
.tip.instant { transition: none; }

/* dialog from the centre with a scrim; bottom sheet from below (motion.js moves it with a spring and lets it be dragged down) */
.scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); opacity: 0; visibility: hidden;
  transition: opacity var(--dur-exit) var(--ease-out), visibility 0s linear var(--dur-exit); }
.scrim.open { opacity: 1; visibility: visible; transition: opacity var(--dur-enter) var(--ease-out), visibility 0s; }
.dialog { position: fixed; left: 50%; top: 50%; translate: -50% -50%; z-index: 50; width: min(360px, calc(100% - 32px)); padding: var(--s-5);
  border-radius: var(--r-lg); background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-float);
  opacity: 0; transform: scale(var(--scale-dialog)); visibility: hidden;
  transition: opacity var(--dur-exit) var(--ease-out), transform var(--dur-exit) var(--ease-out), visibility 0s linear var(--dur-exit); }
.dialog.open { opacity: 1; transform: none; visibility: visible;
  transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out), visibility 0s; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-height: 85svh; overflow: auto; overscroll-behavior: contain;
  border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--bg-1); box-shadow: inset 0 1px 0 var(--line-2), var(--shadow-float);
  transform: translateY(105%); visibility: hidden; }
.sheet.open { visibility: visible; }
.sheet__grab { padding: var(--s-3) var(--pad-screen) var(--s-2); touch-action: none; cursor: grab; }
.sheet__grab::before { content: ""; display: block; width: 40px; height: 5px; margin: 0 auto var(--s-3); border-radius: 3px; background: var(--line-3); }

/* selection: one pill or underline slides to the chosen option (set --i, the index, and --n, the count) */
.seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; border-radius: var(--r-md);
  background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-2); --i: 0; --n: 2; }
[data-theme="light"] .seg { background: var(--bg-2); }
.seg__pill { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / var(--n)); border-radius: calc(var(--r-md) - 2px);
  background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-3); transform: translateX(calc(var(--i) * 100%));
  transition: transform var(--dur-enter) var(--ease-spring); }
[data-theme="light"] .seg__pill { background: var(--bg-1); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line-2); }
.seg__opt { position: relative; z-index: 1; min-height: var(--tap); padding: 0 var(--s-3); border: 0; background: none; color: var(--fg-2);
  font: var(--t-label); font-size: 15px; white-space: nowrap; cursor: pointer; transition: color var(--dur-exit) var(--ease-color); }
.seg__opt[aria-checked="true"] { color: var(--fg-1); }
.tabs { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid var(--line-2); --i: 0; --n: 3; }
.tabs__tab { min-height: var(--tap); border: 0; background: none; color: var(--fg-2); font: var(--t-label); cursor: pointer;
  transition: color var(--dur-exit) var(--ease-color); }
.tabs__tab[aria-selected="true"] { color: var(--fg-1); }
.tabs__ink { position: absolute; left: 0; bottom: -1px; width: calc(100% / var(--n)); height: 2px; border-radius: 1px; background: var(--accent);
  transform: translateX(calc(var(--i) * 100%)); transition: transform var(--dur-enter) var(--ease-spring); }

/* toasts: newest in front, older ones behind and smaller (motion.js keeps --i); at the top, clear of a bottom main button */
.toasts { position: fixed; top: calc(var(--s-3) + env(safe-area-inset-top, 0px)); left: 50%; translate: -50% 0; z-index: 60;
  width: min(420px, calc(100% - 24px)); height: 0; }
.toast { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: var(--s-3); min-height: 52px;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-float);
  font: var(--t-label); transform-origin: top center; z-index: calc(10 - var(--i, 0));
  transform: translateY(calc(var(--i, 0) * 10px)) scale(calc(1 - var(--i, 0) * .05)); opacity: calc(1 - var(--i, 0) * .3);
  transition: transform var(--dur-sheet) var(--ease-out), opacity var(--dur-enter) var(--ease-out); }
[data-theme="light"] .toast { background: var(--bg-1); }
.toast.in { transform: translateY(calc(-120% * var(--travel))); opacity: 0; }
.toast.out { transform: translateY(calc(var(--i, 0) * 10px - var(--move-md))); opacity: 0; transition-duration: var(--dur-exit); }

/* new content: wrap a row as .grow > .grow__in; it grows in and collapses out, the rows around it follow smoothly */
.grow { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-enter) var(--ease-out), opacity var(--dur-exit) var(--ease-out); }
.grow.gone { grid-template-rows: 0fr; opacity: 0; }
.grow__in { min-height: 0; overflow: hidden; }

/* accordion: height through grid rows, no script */
.fold + .fold { border-top: 1px solid var(--line-1); }
.fold__head { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 52px; padding: 0; border: 0; background: none;
  color: var(--fg-1); font: var(--t-label); text-align: left; cursor: pointer; }
.fold__chev { flex: none; color: var(--fg-2); transition: transform var(--dur-enter) var(--ease-out); }
.fold.open .fold__chev { transform: rotate(90deg); }
.fold__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-enter) var(--ease-out); }
.fold.open .fold__body { grid-template-rows: 1fr; }
.fold__in { min-height: 0; overflow: hidden; }
.fold__content { padding-bottom: var(--s-3); opacity: 0; transition: opacity var(--dur-exit) var(--ease-color); }
.fold.open .fold__content { opacity: 1; transition-duration: var(--dur-enter); }

/* number roll (motion.js roll): changed digits move in the direction of the change */
.roll { font-variant-numeric: tabular-nums; white-space: nowrap; }
.roll .digit { position: relative; display: inline-block; }
.roll .ghost { position: absolute; left: 0; top: 0; }

/* success: draw the check (pathLength="1" on the circle and the path); inline loader inside a button */
.check-draw circle, .check-draw path { fill: none; stroke: var(--ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: nu-draw var(--dur-moment) var(--ease-out) forwards; }
.check-draw path { stroke-width: 2.6; animation-duration: calc(var(--dur-moment) * .7); animation-delay: calc(var(--dur-moment) * .4); }
@keyframes nu-draw { to { stroke-dashoffset: 0; } }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: nu-spin .7s linear infinite; }
@keyframes nu-spin { to { transform: rotate(360deg); } }

/* landing pages only: hero lines rise once on load (set --i per line); the header hairline appears on scroll (motion.js hairline) */
.rise { animation: nu-rise var(--dur-hero) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger-hero)); }
@keyframes nu-rise { from { opacity: 0; transform: translateY(var(--move-md)); } }
.glassbar--quiet { border-bottom-color: transparent; transition: border-color var(--dur-exit) var(--ease-color); }
.glassbar--quiet.scrolled { border-bottom-color: var(--line-1); }

/* landing pages on phones: the main action follows the reader once the hero button has scrolled away (nuMotion.ctaBar) */
.cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background: var(--bg-0); box-shadow: inset 0 1px 0 var(--line-1); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-exit) var(--ease-out), visibility 0s linear var(--dur-exit); }
.cta-bar.show { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--dur-exit) var(--ease-out), visibility 0s; }
@media (min-width: 641px) { .cta-bar { display: none; } }

/* moments (references/motion.md, section 5): rare, once, on an event; motion.js plays them and shows the end state on weak devices */
/* shared element: one named pair travels from the list into the detail (nuMotion.morph); the rest changes plainly */
::view-transition-group(nu-morph) { animation-duration: var(--dur-moment); animation-timing-function: var(--ease-out); }
:root.nu-back::view-transition-group(nu-morph) { animation-duration: calc(var(--dur-moment) * .75); }
::view-transition-old(nu-morph), ::view-transition-new(nu-morph) { animation: none; mix-blend-mode: normal; height: 100%; object-fit: cover; overflow: clip; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-exit); }
/* main button sheen: one pass of light when the button becomes available (nuMotion.sheen); never a loop, never a look */
.btn--sheen { position: relative; overflow: hidden; }
.btn--sheen::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, var(--sheen) 50%, transparent 70%); }
.btn--sheen.shine::after { animation: nu-sheen var(--dur-sheen) var(--ease-out) 1; }
@keyframes nu-sheen { to { transform: translateX(120%); } }
/* a calm scope: recipes inside it (a landing's live product window) take the moment tempo */
.tempo-calm { --dur-enter: var(--dur-moment); }

/* materiality, still: .lit gives the one raised surface a 1px light top edge; .grain lays a fixed grain over a large dark gradient so it does not band */
.lit { box-shadow: inset 0 1px 0 var(--edge-top), inset 0 0 0 1px var(--line-1), var(--shadow-card); }
.grain { position: relative; isolation: isolate; }
.grain::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: var(--grain-alpha);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  .grow, .fold__body { transition-property: opacity; }
  .seg__pill, .tabs__ink { transition-duration: 0s; }
}