/* Product Updates: the hub and each rewritten update (scripts/sahi-site/updates.mjs).
   Built on learn.css (hero, reading column, contents list, callouts, framed screenshots).
   An update reads like a page of the SAHI user guide: a numbered summary in the hero,
   then one section per feature with where to find it, a picture, numbered steps, a worked
   example and a tip. The hub is a timeline by month with search and area filters.
   Colours are the Sahi tokens only. */

/* ---- Shared parts ---------------------------------------------------------------- */
.pu-num { display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 6px; border-radius: 8px; font: 600 13px/1 var(--sans);
  font-variant-numeric: tabular-nums; color: var(--brand-ink); background: var(--brand-wash); border: 1px solid var(--brand-line); }
.pu-tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: 999px; font: 500 13px/1 var(--sans);
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap; }
.pu-tag svg { width: 15px; height: 15px; flex: none; color: var(--brand-ink); }

/* ---- Update hero: the numbered summary ---------------------------------------------- */
.pu-hero .eyebrow { font-variant-numeric: tabular-nums; }
.pu-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; max-width: 920px; margin: clamp(28px, 4vw, 44px) auto 0; padding: 0; list-style: none; text-align: left; }
.pu-summary a { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px 10px; height: 100%; padding: 16px 18px 18px;
  border: 1px solid var(--stage-line); border-radius: var(--radius-sm); background: var(--stage-surface); color: var(--stage-ink); text-decoration: none;
  transition: border-color .2s, transform .2s; }
.pu-summary a:hover { border-color: color-mix(in srgb, var(--accent) 70%, transparent); transform: translateY(-2px); }
.pu-summary .pu-num { color: var(--stage-ink); background: color-mix(in srgb, #66033C 55%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.pu-summary .pu-tag { justify-self: start; color: var(--stage-ink-2); background: transparent; border-color: var(--stage-line); }
.pu-summary .pu-tag svg { color: var(--stage-ink); }
.pu-summary b { grid-column: 1 / -1; font: 500 17px/1.3 var(--sans); padding-right: 22px; }
.pu-summary__go { position: absolute; right: 16px; bottom: 18px; width: 16px; height: 16px; color: var(--stage-ink-2); }
.pu-summary__go svg { width: 16px; height: 16px; }

/* ---- One feature ------------------------------------------------------------------- */
.pu-body > .pu-intro:first-child { font-size: 19px; color: var(--ink); }
.pu-feature { margin-top: 3.2em; padding-top: 2.4em; border-top: 1px solid var(--line); scroll-margin-top: 100px; }
.pu-body > .pu-feature:first-of-type { margin-top: 1.6em; }
.pu-feature > * + * { margin-top: 1.1em; }
.pu-feature__head { display: flex; align-items: center; gap: 10px; }
.lesson__body .pu-feature h2 { margin-top: .6em; }
.pu-where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; line-height: 1.3; }
.pu-where__label { margin-right: 4px; font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pu-where__step { padding: 5px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); font-weight: 500; }
.pu-where__sep { color: var(--ink-3); }
.pu-sub { font-size: 19px !important; }
.pu-steps { counter-reset: step; padding: 0 !important; list-style: none; }
.pu-steps li { counter-increment: step; position: relative; min-height: 32px; padding: 3px 0 0 46px; }
.pu-steps li + li { margin-top: .8em; }
.pu-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font: 600 14px/1 var(--sans); color: var(--surface); background: var(--ink); }
.pu-limits { padding: 16px 20px; border-radius: var(--radius-sm); border: 1px dashed var(--hairline); }
.pu-limits__title { display: block; font: 600 13px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pu-limits ul { margin-top: .5em; }

/* sahi.com's own phone screenshots: already framed, shown side by side */
.pu-phones { display: grid; gap: 14px; margin-inline: 0; }
.pu-phones--1 { grid-template-columns: minmax(0, 280px); justify-content: center; }
.pu-phones--2 { grid-template-columns: repeat(2, minmax(0, 260px)); justify-content: center; }
.pu-phones--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pu-phones--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pu-phone { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; }
.pu-phone img { width: 100%; height: auto; border-radius: 22px; }
.pu-phone span { font-size: 14px; line-height: 1.35; text-align: center; color: var(--ink-2); }
.pu-phone span b { color: var(--ink); }
.pu-phones figcaption, .pu-code figcaption { grid-column: 1 / -1; font-size: 14px; color: var(--ink-3); text-align: center; }
@media (max-width: 640px) {
  .pu-phones--3, .pu-phones--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pu-phones--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* code */
.pu-code { margin-inline: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--stage-surface); border: 1px solid var(--stage-line); }
.pu-code__bar { display: flex; align-items: center; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--stage-line); font: 500 13px/1 var(--sans); color: var(--stage-ink-2); }
.pu-code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font: 14px/1.65 var(--sans); font-variant-numeric: tabular-nums; white-space: pre; color: var(--stage-ink); }
.pu-code figcaption { padding: 10px 14px 12px; border-top: 1px solid var(--stage-line); text-align: left; color: var(--stage-ink-2); }
.lesson__body code { padding: 1px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); font: .88em var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.pu-code code { padding: 0; border: 0; background: none; color: inherit; font: inherit; }

/* newer / older */
.pu-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 2.6em; }
.pu-pager__link { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  text-decoration: none !important; color: var(--ink-2) !important; font-size: 14px; line-height: 1.35; transition: border-color .2s; }
.pu-pager__link b { font: 500 16px/1.3 var(--sans); color: var(--ink); }
.pu-pager__link--older { text-align: right; }
.pu-pager__link:hover { border-color: var(--brand-line); }
@media (max-width: 640px) { .pu-pager { grid-template-columns: 1fr; } .pu-pager__link--older { text-align: left; } }

/* ---- Hub: the Courses night sky, a lifted panel, a spotlight and image cards ---------------- */
.pu-hero--hub .lead { margin-inline: auto; }

/* nearly as wide as the floating nav (owner): the nav keeps 24px a side, the panel a little more */
.courses-panel.pu-panel { max-width: 1540px; width: calc(100% - 2 * clamp(16px, 2.8vw, 40px)); padding-top: clamp(16px, 1.8vw, 24px); }

/* Spotlight: the newest update, large */
.pu-spot { margin-bottom: clamp(24px, 3vw, 36px); }
.pu-spot__link { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 40px); color: inherit; text-decoration: none; }
.pu-spot__media { position: relative; display: block; aspect-ratio: 2 / 1; border-radius: 16px; overflow: hidden; background: var(--bg-alt); box-shadow: var(--shadow-2); }
.pu-spot__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.pu-spot__link:hover .pu-spot__media img { transform: scale(1.03); }
.pu-spot__body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pu-spot__eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink); }
.pu-spot__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--brand-soft); }
html.motion .pu-spot__dot { animation: pu-pulse 2s ease-in-out infinite; }
@keyframes pu-pulse { 50% { box-shadow: 0 0 0 8px transparent; } }
.pu-spot__title { font: 500 clamp(24px, 2.6vw, 34px)/1.15 var(--disp); color: var(--ink); }
.pu-spot__sum { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.pu-spot__cta { margin-top: 4px; gap: 8px; }
.pu-spot__cta svg { width: 16px; height: 16px; }
@media (max-width: 860px) { .pu-spot__link { grid-template-columns: minmax(0, 1fr); } }

/* Filter bar: one row (search · area chips · count), stuck just under the floating nav */
.pu-filter { --pu-stick: calc(var(--nav-h) + 6px); position: sticky; top: var(--pu-stick); z-index: 3; display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) auto;
  align-items: center; gap: 10px; margin: 0 0 30px; padding: 6px; border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: box-shadow .25s, border-color .25s; }
.pu-filter.is-stuck { border-color: var(--hairline); box-shadow: var(--shadow-2); }
.pu-search { position: relative; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px 0 16px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid transparent; color: var(--ink-3); transition: border-color .2s, background .2s; }
.pu-search:focus-within { border-color: var(--accent); background: var(--surface); }
.pu-search > svg { width: 16px; height: 16px; flex: none; }
.pu-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 15px var(--sans); color: var(--ink); }
.pu-search input::-webkit-search-cancel-button { display: none; }
.pu-search input::placeholder { color: var(--ink-3); }
.pu-search__key { flex: none; display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--hairline); font: 500 12px/1 var(--sans); color: var(--ink-3); }
.pu-search:focus-within .pu-search__key, .pu-search.has-text .pu-search__key { display: none; }
.pu-search__clear { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--line); color: var(--ink); cursor: pointer; }
.pu-search__clear svg { width: 14px; height: 14px; }
.pu-search__clear[hidden] { display: none; }
.pu-chips { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  mask-image: linear-gradient(90deg, var(--stage) calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(90deg, var(--stage) calc(100% - 28px), transparent); }
.pu-chips::-webkit-scrollbar { display: none; }
.pu-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid transparent; background: none;
  font: 500 14px/1 var(--sans); color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.pu-chip:last-child { margin-right: 24px; }
.pu-chip:hover { background: var(--surface-2); }
.pu-chip svg { width: 15px; height: 15px; color: var(--accent); }
.pu-chip i { font-style: normal; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pu-chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.pu-chip[aria-pressed="true"] svg, .pu-chip[aria-pressed="true"] i { color: inherit; }
.pu-count { padding: 0 16px 0 4px; font-size: 14px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pu-count b { font-weight: 600; color: var(--ink); }
.pu-empty .link { padding: 0; border: 0; background: none; font: inherit; color: var(--brand-ink); text-decoration: underline; cursor: pointer; }
.pu-empty { padding: 40px 0; text-align: center; color: var(--ink-3); }

/* Timeline */
.pu-month { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 28px; }
.pu-month + .pu-month { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--line); }
.pu-month__name { position: sticky; top: calc(var(--nav-h) + 80px); align-self: start; display: flex; flex-direction: column; margin: 0; font: 500 26px/1.05 var(--disp); color: var(--ink); }
.pu-month__name span { font-size: 16px; color: var(--ink-3); }
.pu-month__name i { margin-top: 10px; font: 500 13px/1 var(--sans); font-style: normal; color: var(--brand-ink); }
.pu-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.pu-card a { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface);
  text-decoration: none; color: var(--ink-2); transition: border-color .2s, transform .25s var(--ease), box-shadow .25s; }
.pu-card a:hover { border-color: var(--hairline); transform: translateY(-3px); box-shadow: var(--shadow-1); }
.pu-card--new a { border-color: var(--brand-line); }
.pu-card__media { position: relative; display: block; aspect-ratio: 2 / 1; overflow: hidden; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.pu-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .45s var(--ease); }
.pu-card a:hover .pu-card__media img { transform: scale(1.04); }
.pu-blank { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 18px 20px; color: var(--stage-ink);
  background: radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, #66033C 80%, transparent), transparent 62%), var(--stage); }
.pu-blank svg { width: 30px; height: 30px; color: var(--stage-ink); opacity: .9; }
.pu-blank b { font: 500 19px/1.2 var(--disp); max-width: 18ch; }
.pu-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 16px 18px 18px; }
.pu-card__date { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pu-card__badge { padding: 4px 8px; border-radius: 999px; font: 600 12px/1 var(--sans); color: var(--on-brand); background: var(--brand); }
.pu-card__ext { font-size: 12px; color: var(--ink-3); }
.pu-card__title { font: 500 17px/1.35 var(--sans); color: var(--ink); }
.pu-card__list { margin: 0; padding-left: 1.1em; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.pu-card__list li + li { margin-top: 3px; }
.pu-card__list li::marker { color: var(--accent); }
.pu-card__more { list-style: none; margin-left: -1.1em; color: var(--ink-3); }
.pu-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.pu-card[hidden], .pu-month[hidden], .pu-spot[hidden] { display: none; }
@media (max-width: 860px) {
  .pu-month { grid-template-columns: minmax(0, 1fr); }
  .pu-month__name { position: static; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; font-size: 22px; }
  .pu-month__name i { margin: 0 0 0 auto; }
}

/* ---- Converted updates (updates-convert.mjs): sahi.com's words in our layout -------------------- */
.pu-img { margin-inline: 0; }
.pu-img img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-alt); }
.pu-img--phone { display: flex; justify-content: center; }
.pu-img--phone img { width: min(100%, 300px); border-radius: 22px; }
/* two or more phone shots in a row sit side by side */
.pu-body p.pu-img--phone + p.pu-img--phone { margin-top: 1.1em; }
.pu-body h4 { margin-top: 1.6em; font: 600 13px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pu-body h4 + * { margin-top: .6em; }
.pu-yt a { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
  font-weight: 500; color: var(--ink) !important; text-decoration: none !important; }
.pu-yt a::before { content: ""; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--brand)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4.5v7l5.5-3.5Z' fill='white'/%3E%3C/svg%3E") center / 20px no-repeat; }
.pu-yt a:hover { border-color: var(--brand-line); }
.pu-body .table-wrap { margin-inline: 0; }

/* ---- Hub: deep dives under the timeline ----------------------------------------------------- */
.pu-deep { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--line); }
.pu-deep__head { margin-bottom: 20px; }
.pu-deep__head .eyebrow { color: var(--brand-ink); }
.pu-deep__head h2 { margin-top: 6px; font: 500 clamp(24px, 2.6vw, 32px)/1.15 var(--disp); color: var(--ink); }
.pu-cards--deep { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Full-size view of a screenshot (updates.js) */
.pu-zoomable { cursor: zoom-in; }
.pu-zoom { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 24px; border: 0; background: transparent; display: none; place-items: center; }
.pu-zoom[open] { display: grid; }
.pu-zoom::backdrop { background: var(--scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pu-zoom img { max-width: min(100%, 1400px); max-height: calc(100dvh - 48px); width: auto; height: auto; border-radius: 16px; box-shadow: var(--shadow-3); cursor: zoom-out; }
.pu-zoom img.is-tall { border-radius: 28px; }
.pu-zoom__close { position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); font: 400 26px/1 var(--sans); cursor: pointer; box-shadow: var(--shadow-1); }

/* ---- Indicator cards (an update that adds many indicators) ------------------------------------ */
.pu-inds { display: grid; gap: 14px; }
.pu-ind { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.pu-ind--text { grid-template-columns: minmax(0, 1fr); }
.pu-ind__media img { width: 100%; height: auto; border-radius: 14px; }
.pu-ind__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 15px; line-height: 1.55; }
.lesson__body .pu-ind__body > * + * { margin-top: 0; }
.pu-ind__abbr { align-self: flex-start; padding: 3px 8px; border-radius: 6px; font: 600 12px/1.2 var(--sans); letter-spacing: .06em; color: var(--accent); background: var(--brand-wash); border: 1px solid var(--brand-line); }
.lesson__body .pu-ind h3 { margin: 0; font-size: 19px; }
.pu-ind__row b { display: block; font: 600 12px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pu-ind__guide { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-weight: 500; }
.pu-ind__guide svg { width: 14px; height: 14px; }
@media (max-width: 560px) { .pu-ind { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; } }

/* tables */
.pu-table { margin-inline: 0; }
.pu-table figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-3); }
.pu-table th[scope="row"] { font-weight: 600; color: var(--ink); }

/* ---- Video walkthrough card (opens YouTube) -------------------------------------------------- */
.pu-vid { margin-inline: 0; }
.pu-vid a { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 18px; padding: 12px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); text-decoration: none !important; color: var(--ink-2) !important; transition: border-color .2s, box-shadow .2s; }
.pu-vid a:hover { border-color: var(--hairline); box-shadow: var(--shadow-1); }
.pu-vid__media { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--bg-alt); }
.pu-vid__media img { width: 100%; height: 100%; object-fit: cover; }
.pu-vid__play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--brand);
  box-shadow: var(--shadow-2); transition: transform .2s var(--ease); }
.pu-vid__play::after { content: ""; position: absolute; left: 22px; top: 18px; border-left: 16px solid var(--on-brand); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.pu-vid a:hover .pu-vid__play { transform: scale(1.08); }
.pu-vid__meta { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.pu-vid__meta b { font: 500 18px/1.3 var(--disp); color: var(--ink); }
@media (max-width: 560px) { .pu-vid a { grid-template-columns: minmax(0, 1fr); } }
.pu-img--fig { display: block; }
.pu-img--fig figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-3); }

/* Hub hero (owner, 25 Oct 2026): tight above and around the title, but the full Courses horizon
   underneath: a wide bright ellipse the panel rises into, under a fuller sky (a faint second star
   layer, a third shooting star, and a Capital Purple nebula behind the title). */
.page-updates { --lift: clamp(96px, 10vw, 150px); }
.courses-hero.pu-hero--hub { padding-top: calc(var(--nav-h) + clamp(4px, 1vw, 16px)); padding-bottom: calc(var(--lift) + clamp(72px, 8vw, 128px)); }
.pu-hero--hub .crumbs { margin-bottom: 4px; }
.pu-hero--hub .lead { margin-top: 12px; }
.courses-hero.pu-hero--hub { border-bottom: 0; }
/* the curved horizon, plus a vertical fade inside it: its centre line sits on the hero's foot, so by
   that line the whole width is page colour and the sides never stop in a hard edge */
.courses-hero.pu-hero--hub::after { bottom: calc(-1 * (var(--lift) + 170px)); width: max(1800px, 180vw); height: calc(2 * (var(--lift) + 170px));
  background: linear-gradient(to bottom, transparent 12%, color-mix(in srgb, var(--bg) 40%, transparent) 30%, var(--bg) 46%), radial-gradient(closest-side, var(--bg) 38%, color-mix(in srgb, var(--bg) 55%, transparent) 62%, transparent); }
.courses-hero.pu-hero--hub::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(42% 46% at 50% 34%, color-mix(in srgb, #66033C 42%, transparent), transparent 72%),
              radial-gradient(30% 34% at 18% 22%, color-mix(in srgb, #66033C 18%, transparent), transparent 70%),
              radial-gradient(28% 30% at 84% 30%, color-mix(in srgb, #66033C 16%, transparent), transparent 70%); }
.star--dust { width: 1.5px; height: 1.5px; opacity: .45; box-shadow: none; }
.streak--c { left: 46%; top: 8%; width: clamp(70px, 8vw, 120px); }
html.motion .streak--c { animation-delay: 2s; animation-duration: 10s; }

/* Narrow screens: search on top, the chips one swipeable row under it, the count inside the search box */
@media (max-width: 860px) {
  .pu-filter { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 6px; border-radius: 22px; }
  .pu-count { display: none; }
  .pu-chip { height: 40px; padding: 0 12px; }
}

/* Update pages: a wider title (owner), so it sits on two lines instead of three */
.lesson-hero.pu-hero .h1 { max-width: min(100%, 30ch); }
.lesson-hero.pu-hero .lead { max-width: 760px; }

/* Hub, dark theme: courses.css styles the horizon with a more specific dark-theme rule, so it needs
   its own to keep the vertical fade (otherwise its sides stop in a hard edge at the hero's foot) */
:root[data-theme="dark"] .courses-hero.pu-hero--hub::after {
  background: linear-gradient(to bottom, transparent 12%, color-mix(in srgb, var(--bg) 40%, transparent) 30%, var(--bg) 46%),
              radial-gradient(closest-side, var(--bg) 40%, color-mix(in srgb, #66033C 34%, #0A0A0A) 66%, transparent); }
/* the hero's foot can land on a fractional pixel, where its black background bleeds into a faint line:
   its own background fades to the page colour by then */
.courses-hero.pu-hero--hub { background: linear-gradient(to bottom, var(--stage) calc(100% - 160px), var(--bg)); }

/* Update pages after our option-chain guide (owner, 25 Oct 2026): fact chips and a byline bar with share
   links in the hero, a contents rail on the left with reading progress, and an accent rule under each h2. */
.pu-chipline { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.pu-chipline li { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--stage-ink) 16%, transparent); background: color-mix(in srgb, var(--stage-ink) 6%, transparent);
  font-size: 13px; color: var(--stage-ink-2); }
.pu-chipline b { font-weight: 600; color: var(--stage-ink); font-variant-numeric: tabular-nums; }
.pu-chipline svg { width: 14px; height: 14px; color: var(--stage-accent); }
.pu-byline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; width: min(100%, 880px); margin: 26px auto 0;
  padding: 12px 14px 12px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--stage-ink) 14%, transparent);
  background: color-mix(in srgb, var(--stage-ink) 5%, transparent); }
.pu-byline__who { display: inline-flex; align-items: center; gap: 10px; text-align: left; }
.pu-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex: none; background: var(--stage-accent); color: var(--stage);
  font: 600 14px/1 var(--sans); letter-spacing: .02em; }
.pu-byline__who > span:last-child { display: grid; line-height: 1.25; }
.pu-byline__who b { font-weight: 600; font-size: 15px; color: var(--stage-ink); }
.pu-byline__who b + span { font-size: 13px; color: var(--stage-ink-2); }
.pu-byline__when { display: inline-flex; gap: 8px; margin: 0; font-size: 14px; color: var(--stage-ink-2); font-variant-numeric: tabular-nums; }
.pu-share { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.pu-share__label { margin-right: 4px; font-size: 13px; color: var(--stage-ink-2); }
.pu-share__btn { position: relative; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--stage-ink) 16%, transparent); background: none; color: var(--stage-ink); transition: background .2s, border-color .2s, color .2s; }
.pu-share__btn:hover, .pu-share__btn:focus-visible { background: var(--stage-ink); border-color: var(--stage-ink); color: var(--stage); }
.pu-share__btn svg { width: 18px; height: 18px; }
.pu-share__done { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 4px 9px; border-radius: 6px; white-space: nowrap;
  background: var(--stage-ink); color: var(--stage); font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.pu-share__done:not(:empty) { opacity: 1; }
@media (max-width: 760px) {
  .pu-byline { border-radius: 22px; justify-content: flex-start; }
  .pu-share { margin-left: 0; width: 100%; }
}

/* the article with its contents rail on the left */
.pu-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; width: min(100% - 2 * var(--gut), 1180px); margin-inline: auto; }
.pu-layout .lesson__body { max-width: 760px; }
@media (min-width: 1024px) {
  .pu-layout { grid-template-columns: 268px minmax(0, 1fr); gap: clamp(36px, 4vw, 64px); }
  .pu-layout--single { grid-template-columns: minmax(0, 760px); justify-content: center; }
  .pu-layout > .pu-toc { grid-column: 1; grid-row: 1; }
  .pu-layout > .lesson__body { grid-column: 2; grid-row: 1; }   /* learn.css pins .lesson__body to column 1 */
  .pu-layout--single > .lesson__body { grid-column: 1; }
}
/* wide screens: the rail lines up with the navbar's left edge (nav-inner spans the same 1600px track) and widens */
@media (min-width: 1280px) {
  .pu-layout:not(.pu-layout--single) { width: min(100% - 48px, 1600px); grid-template-columns: 304px minmax(0, 1fr); gap: 48px; }
  /* the article fills the track beside the rail (owner: no empty gutters either side) */
  .pu-layout:not(.pu-layout--single) > .lesson__body { justify-self: stretch; width: 100%; max-width: none; }
}
.pu-toc { align-self: start; padding: 18px 16px 14px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface); }
@media (min-width: 1024px) { .pu-toc { position: sticky; top: calc(var(--nav-h) + 20px); max-height: calc(100dvh - var(--nav-h) - 40px); overflow: hidden; display: flex; flex-direction: column; } }
.pu-toc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 6px; }
.pu-toc__title { font: 600 12px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pu-toc__pct { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pu-toc__pct b { font-weight: 600; color: var(--brand-ink); }
.pu-toc__bar { height: 3px; margin: 10px 6px 12px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pu-toc__bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .15s linear; }
.pu-toc__filter { display: flex; align-items: center; gap: 8px; height: 36px; margin: 0 2px 10px; padding: 0 8px 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-3); }
.pu-toc__filter:focus-within { border-color: var(--accent); background: var(--surface); }
.pu-toc__filter svg { width: 14px; height: 14px; flex: none; }
.pu-toc__filter input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 14px var(--sans); color: var(--ink); }
.pu-toc__filter input::-webkit-search-cancel-button { display: none; }
.pu-toc__filter kbd { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--hairline); font: 500 11px/1 var(--sans); color: var(--ink-3); }
.pu-toc__filter:focus-within kbd { display: none; }
.pu-toc__nav { display: grid; gap: 2px; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.pu-toc__nav::-webkit-scrollbar { display: none; }
.pu-toc__link { display: flex; gap: 10px; align-items: flex-start; padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid transparent; font-size: 14px; line-height: 1.4; color: var(--ink-2); text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.pu-toc__link:hover { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); transform: translateX(2px); }
.pu-toc__link:active { transform: translateX(1px) scale(.99); }
@media (prefers-reduced-motion: reduce) { .pu-toc__link, .pu-toc__link:hover { transition: none; transform: none; } }
.pu-toc__num { flex: none; min-width: 20px; font-size: 12px; line-height: 1.7; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pu-toc__link.is-active { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--ink); font-weight: 500; }
.pu-toc__link.is-active .pu-toc__num { color: var(--brand-ink); font-weight: 600; }
.pu-toc__link[hidden] { display: none; }
.pu-toc__empty { margin: 6px 10px; font-size: 13px; color: var(--ink-3); }
/* phones and tablets: the rail becomes one swipeable row of section chips, stuck under the nav */
@media (max-width: 1023px) {
  .pu-toc { position: sticky; top: calc(var(--nav-h) + 4px); z-index: 3; padding: 6px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .pu-toc__head, .pu-toc__filter, .pu-toc__empty { display: none; }
  .pu-toc__bar { position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px; margin: 0; }
  .pu-toc__nav { display: flex; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; }
  .pu-toc__link { flex: none; align-items: center; padding: 0 14px; height: 38px; border-radius: 999px; white-space: nowrap; }
  .pu-toc__link:hover { transform: none; }
  .pu-toc__num { line-height: 1; }
  .pu-toc__link > span:last-child { max-width: 58vw; overflow: hidden; text-overflow: ellipsis; }
  .pu-body [id] { scroll-margin-top: calc(var(--nav-h) + 72px); }   /* land below the stuck section strip */
  .pu-toc__item { display: contents; }
  .pu-toc__item[hidden], .pu-toc__subs { display: none; }
}

/* desktop rail: every section a soft capsule row with a number capsule (a tick once read); the section being
   read is a tinted capsule and its Where / What / How it helps parts open under it as small chips */
@media (min-width: 1024px) {
  .pu-toc__nav { gap: 4px; }
  .pu-toc__item[hidden] { display: none; }
  .pu-toc__link { align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border: 1px solid transparent; border-radius: 22px; transform: none; }
  .pu-toc__link:hover { transform: none; background: color-mix(in srgb, var(--accent) 5%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 12%, var(--hairline)); }
  .pu-toc__num { display: inline-grid; place-items: center; min-width: 32px; height: 22px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--surface-2, var(--surface));
    font: 600 11px/1 var(--sans); color: var(--ink-3); transition: background .2s ease, border-color .2s ease, color .2s ease; }
  .pu-toc__item.is-done .pu-toc__link { color: var(--ink-3); }
  .pu-toc__item.is-done .pu-toc__num { position: relative; color: transparent; border-color: color-mix(in srgb, var(--accent) 30%, var(--hairline)); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
  .pu-toc__item.is-done .pu-toc__num::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 4px; margin: -3px 0 0 -4px; border-left: 2px solid var(--brand-ink); border-bottom: 2px solid var(--brand-ink); transform: rotate(-45deg); }
  .pu-toc__link.is-active { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 26%, var(--hairline)); color: var(--ink); font-weight: 600; }
  .pu-toc__link.is-active .pu-toc__num { border-color: var(--accent); background: var(--accent); color: var(--surface); }
  .pu-toc__subs { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
  .pu-toc__subs > div { overflow: hidden; display: flex; flex-wrap: wrap; gap: 5px; padding-left: 8px; }
  .pu-toc__item.is-open .pu-toc__subs { grid-template-rows: 1fr; }
  .pu-toc__item.is-open .pu-toc__subs > div { padding-top: 6px; padding-bottom: 6px; }
  .pu-toc__sub { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--surface);
    font: 500 12px/1 var(--sans); color: var(--ink-3); text-decoration: none; white-space: nowrap; transition: color .18s ease, background .18s ease, border-color .18s ease; }
  .pu-toc__sub:hover { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 30%, var(--hairline)); }
  .pu-toc__sub.is-active { color: var(--brand-ink); font-weight: 600; border-color: color-mix(in srgb, var(--accent) 40%, var(--hairline)); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) { .pu-toc__subs, .pu-toc__num { transition: none; } }

/* section headings: a short accent rule under each, as in the guide */
.pu-body h2::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 14px; border-radius: 3px; background: var(--accent); }

/* Update pages: a light hero after sahi.com's course pages (owner, 25 Oct 2026). A warm panel set in from the
   screen edges with a deep rounded foot, soft pink washes, an illustration on the right (below), and a dotted patch at the lower left. Title, lead and byline sit left-aligned; Share sits
   at the right of the byline row. The byline and chip rules above read --stage-* tokens, remapped here. */
.pu-phero {
  --stage-ink: var(--ink); --stage-ink-2: var(--ink-2); --stage-accent: var(--accent); --stage: var(--surface);
  position: relative; isolation: isolate; overflow: hidden; text-align: left;
  margin-inline: clamp(0px, 2.6vw, 40px);
  padding: calc(var(--nav-h) + clamp(8px, 1.2vw, 16px)) 0 clamp(36px, 4vw, 56px);   /* owner: no gap under the nav */
  border-radius: 0 0 clamp(32px, 5vw, 80px) clamp(32px, 5vw, 80px);
  background: var(--bg);   /* owner: blend with the page; the dots carry the colour */
  color: var(--ink);
}
/* Kyro's background (kyro.sahi.com), in our palette: a 5px grid of fine dots on the panel, densest at the top
   right and gone under the text, and a diagonal band of brighter dots that drifts slowly across while the
   dots themselves stay put (the mask moves, not the grid). Nothing else is drawn. */
.pu-phero::before, .pu-phero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, var(--pu-dot) .7px, transparent 1.05px) 0 0 / 5px 5px; }
.pu-phero { --pu-dot: color-mix(in srgb, var(--accent) 34%, transparent); --pu-dot-hi: color-mix(in srgb, var(--accent) 80%, transparent); }
:root[data-theme="dark"] .pu-phero { --pu-dot: color-mix(in srgb, #FEA3E5 40%, transparent); --pu-dot-hi: color-mix(in srgb, #FEA3E5 80%, transparent); }
.pu-phero::before {
  -webkit-mask: radial-gradient(130% 120% at 100% 0%, black 0%, rgba(0, 0, 0, .5) 40%, transparent 78%);
          mask: radial-gradient(130% 120% at 100% 0%, black 0%, rgba(0, 0, 0, .5) 40%, transparent 78%); }
.pu-phero::after { --pu-dot: var(--pu-dot-hi); opacity: 0;
  -webkit-mask: linear-gradient(120deg, transparent 42%, black 50%, transparent 58%) 100% 100% / 300% 300% no-repeat;
          mask: linear-gradient(120deg, transparent 42%, black 50%, transparent 58%) 100% 100% / 300% 300% no-repeat; }
html.motion .pu-phero::after { opacity: .55; animation: pu-sweep 14s linear infinite; }
@keyframes pu-sweep { from { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; } to { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; } }
@media (prefers-reduced-motion: reduce) { .pu-phero::after { animation: none !important; opacity: 0 !important; } }
.pu-phero .wrap { width: min(100% - 2 * var(--gut), 1180px); }
.pu-phero .crumbs { justify-content: flex-start; color: var(--ink-3); }
.pu-phero .crumbs [aria-current="page"], .pu-phero .crumbs a:hover { color: var(--ink); }
.lesson-hero.pu-phero .h1 { margin-inline: 0; max-width: min(100%, 24ch); color: var(--ink); }
.lesson-hero.pu-phero .lead { margin-inline: 0; max-width: 720px; color: var(--ink-2); }
.pu-phero .pu-chipline { justify-content: flex-start; }
.pu-phero .pu-chipline li { background: color-mix(in srgb, var(--surface) 70%, transparent); border-color: color-mix(in srgb, var(--ink) 12%, transparent); }
.pu-phero .pu-chipline svg { color: var(--accent); }
/* the byline is one quiet row on the panel, not a pill: who · when ........ share */
/* the author row is a capsule again (owner): who · when on the left, the share group in its own inner capsule */
.pu-phero .pu-byline { width: fit-content; max-width: 100%; margin: 30px 0 0; padding: 7px 7px 7px 7px; gap: 10px 18px; justify-content: flex-start;
  border: 1px solid var(--hairline); border-radius: 999px; background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent), 0 14px 32px -22px color-mix(in srgb, var(--accent) 45%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pu-phero .pu-avatar { width: 42px; height: 42px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); }
.pu-phero .pu-byline__who { padding-right: 18px; border-right: 1px solid var(--line); }
.pu-phero .pu-byline__when { padding-right: 4px; }
.pu-phero .pu-share { margin-left: 0; gap: 4px; padding: 4px 4px 4px 14px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 5%, var(--bg)); }
.pu-phero .pu-share__label { font-weight: 500; color: var(--ink-2); }
.pu-phero .pu-share__btn { width: 36px; height: 36px; background: var(--surface); border-color: var(--line); transition: background .18s, color .18s, border-color .18s, transform .18s; }
.pu-phero .pu-share__btn:hover, .pu-phero .pu-share__btn:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--surface); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .pu-phero .pu-share__btn:hover { transform: none; } }
@media (max-width: 760px) {
  .pu-phero { margin-inline: 0; }
  .pu-phero .pu-byline { width: 100%; border-radius: 22px; padding: 10px; }
  .pu-phero .pu-byline__who { border-right: 0; padding-right: 0; }
  .pu-phero .pu-share { width: 100%; justify-content: space-between; }
}


/* Hero frame (owner, 25 Oct 2026): a hairline border down the sides and round the foot, a soft accent glow in
   the top corner, a short purple-to-pink line on the bottom curve, and the title's subject in the accent. */
.pu-phero { border: 1px solid var(--hairline); border-top: 0;
  background:
    linear-gradient(90deg, transparent, var(--accent) 35%, #FEA3E5 65%, transparent) 50% 100% / min(60%, 520px) 2px no-repeat,
    radial-gradient(50% 75% at 100% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 72%),
    radial-gradient(40% 60% at 0% 100%, color-mix(in srgb, #FEA3E5 10%, transparent), transparent 70%),
    var(--bg);
  box-shadow: 0 40px 80px -60px color-mix(in srgb, var(--accent) 55%, transparent); }
:root[data-theme="dark"] .pu-phero { border-color: var(--line); }
.pu-phero .h1 { letter-spacing: -.015em; }
.pu-h1-key { color: var(--accent); }
@media (max-width: 760px) { .pu-phero { border-inline: 0; } }

/* Annotated screens, styled as our user guide's anatomy pages: the picture on a dark dotted panel, labels on
   elbow wires, a glowing teal spotlight on the picked part. Inline, a wide picture has a row of labels above
   and below it; a tall one has labels on either side. Full screen, labels sit beside a large picture. */
.pu-anat { margin: 1.8em 0 0; display: grid; gap: 10px; }
.pu-anat figcaption { font-size: 14px; color: var(--ink-3); }
.pu-ana { position: relative; display: flex; flex-direction: column; gap: 16px; padding: clamp(14px, 2vw, 22px); border-radius: 18px; border: 1px solid #272727; color: #FAFAFA;
  background: radial-gradient(60% 55% at 50% 50%, color-mix(in srgb, #28BCD0 10%, transparent), transparent 70%), radial-gradient(#272727 1px, transparent 1.2px) 0 0 / 18px 18px, #0A0A0A;
  box-shadow: 0 28px 60px -40px color-mix(in srgb, #0A0A0A 90%, transparent); }
.pu-ana__bar { position: relative; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.pu-ana__hint { margin: 0; font-size: 13px; color: #A3A3A3; }
.pu-ana__tour { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 16px 0 7px; border-radius: 999px; border: 0; background: #FAFAFA; color: #0F0F0F; font: 600 13.5px var(--sans); cursor: pointer; white-space: nowrap; }
.pu-ana__play { position: relative; width: 22px; height: 22px; border-radius: 50%; background: #28BCD0; }
.pu-ana__play::after { content: ""; position: absolute; left: 8px; top: 6px; border: 5px solid transparent; border-left: 8px solid #FFFFFF; border-right: 0; }
.pu-ana__tour[aria-pressed="true"] .pu-ana__play::after { left: 7px; top: 7px; width: 3px; height: 8px; border: 0; border-left: 3px solid #FFFFFF; border-right: 3px solid #FFFFFF; }
.pu-anat__eye, .pu-ana__full { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid #404040; background: none; color: #FAFAFA; font: 500 13px var(--sans); cursor: pointer; }
.pu-anat__eye { margin-left: auto; }
.pu-anat__eye:hover, .pu-ana__full:hover { background: #272727; }
.pu-anat__eye svg, .pu-ana__full svg { width: 16px; height: 16px; }
.pu-anat__eye[aria-pressed="true"] .pu-anat__eye-off { display: none; }
.pu-ana button:focus-visible, .pu-ana__label:focus-visible { outline: 2px solid #5ACFE0; outline-offset: 2px; }
.pu-ana__grid { position: relative; z-index: 1; display: grid; gap: clamp(28px, 3.4vw, 46px) 0; }
.pu-ana--tb .pu-ana__grid { grid-template-rows: auto auto auto; }
.pu-ana--lr .pu-ana__grid { grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr); gap: 0 clamp(28px, 3vw, 48px); align-items: start; }
.pu-ana__wrap { display: flex; justify-content: center; }
.pu-ana__stage { position: relative; width: 100%; aspect-ratio: var(--ar); border-radius: 10px; overflow: hidden; background: #0A0A0A; cursor: pointer;
  box-shadow: 0 0 0 1px color-mix(in srgb, #FFFFFF 6%, transparent), 0 0 0 6px color-mix(in srgb, #28BCD0 8%, transparent), 0 24px 50px -24px #0A0A0A; }
.pu-ana--lr .pu-ana__stage { width: 230px; }
.pu-ana__stage img { display: block; width: 100%; height: 100%; }
.pu-ana__stage .pu-anat__hs { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: 6px; cursor: pointer; transition: box-shadow .35s ease; }
.pu-ana__stage .pu-anat__hs:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #5ACFE0 80%, transparent); }
.pu-ana__stage .pu-anat__hs.on { z-index: 1; box-shadow: 0 0 0 2px #5ACFE0, 0 0 26px 4px color-mix(in srgb, #5ACFE0 60%, transparent), 0 0 0 9999px color-mix(in srgb, #0A0A0A 62%, transparent); animation: pu-glow 2.2s ease-in-out infinite; }
@keyframes pu-glow { 50% { box-shadow: 0 0 0 2px #5ACFE0, 0 0 38px 8px color-mix(in srgb, #5ACFE0 75%, transparent), 0 0 0 9999px color-mix(in srgb, #0A0A0A 62%, transparent); } }
.pu-ana__col { position: relative; list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; }
.pu-ana--tb .pu-ana__col { flex-direction: row; }
.pu-ana--lr .pu-ana__col { flex-direction: column; }
.pu-ana__col.placed { display: block; }
.pu-ana--tb .pu-ana__col.placed .pu-ana__label { position: absolute; top: 0; }
.pu-ana--lr .pu-ana__col.placed .pu-ana__label { position: absolute; left: 0; right: 0; }
.pu-ana--tb .pu-ana__col--b.placed .pu-ana__label { top: 0; }
.pu-ana__label { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 12px; cursor: pointer; background: color-mix(in srgb, #171717 94%, transparent);
  border: 1px solid #272727; box-shadow: 0 10px 24px -16px #0A0A0A; transition: border-color .25s ease, box-shadow .25s ease, opacity .25s ease; }
.pu-ana__label + .pu-ana__label { margin-top: 0; }
.pu-ana--lr .pu-ana__col--a .pu-ana__label { flex-direction: row-reverse; text-align: right; }
.pu-ana__col.tight .pu-ana__label { flex-direction: column; gap: 6px; padding: 9px 10px; }
.pu-ana__label b { display: block; font-size: 13.5px; line-height: 1.3; color: #FAFAFA; font-weight: 600; }
.pu-ana__label p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: #A3A3A3; }
.pu-ana__label p b { display: inline; font-size: inherit; }
.pu-ana__label .pu-anat__badge, .lesson__body .pu-ana__label .pu-anat__badge { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #0D464F; color: #A9E7F0; border: 1px solid #14697A; font: 700 11px/1 var(--sans); }
.pu-ana__label:hover { border-color: #14697A; }
.pu-ana__label.on { border-color: #5ACFE0; box-shadow: 0 0 0 3px color-mix(in srgb, #5ACFE0 18%, transparent), 0 12px 30px -12px color-mix(in srgb, #5ACFE0 45%, transparent); }
.pu-ana__label.on .pu-anat__badge, .lesson__body .pu-ana__label.on .pu-anat__badge { background: #5ACFE0; color: #052A30; border-color: #5ACFE0; }
.pu-ana.active .pu-ana__label:not(.on) { opacity: .55; }
.pu-ana__wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.pu-ana__wires path { fill: none; stroke: #8C8C8C; stroke-width: 1.2; opacity: .55; transition: stroke .25s ease, opacity .25s ease; }
.pu-ana__wires circle { fill: #0A0A0A; stroke: #8C8C8C; stroke-width: 1.2; opacity: .8; }
.pu-ana__wires .on path { stroke: #28BCD0; stroke-width: 2; opacity: 1; filter: drop-shadow(0 0 4px color-mix(in srgb, #5ACFE0 80%, transparent)); }
.pu-ana__wires .on circle { fill: #5ACFE0; stroke: #FFFFFF; stroke-width: 2; opacity: 1; }
.pu-ana.active .pu-ana__wires g:not(.on) path { opacity: .18; }
/* eye off: just the picture */
.pu-ana.is-off .pu-ana__col, .pu-ana.is-off .pu-ana__wires, .pu-ana.is-off .pu-ana__tour, .pu-ana.is-off .pu-ana__hint { display: none; }
.pu-ana.is-off .pu-ana__grid { display: block; }
.pu-ana--lr.is-off .pu-ana__stage { margin-inline: auto; }
@media (prefers-reduced-motion: reduce) { .pu-ana__stage .pu-anat__hs.on { animation: none; } }

/* full screen */
.pu-viewer { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0A0A0A; color: #FAFAFA; }
.pu-viewer::backdrop { background: color-mix(in srgb, #0A0A0A 80%, transparent); }
.pu-ana--big { height: 100%; overflow-y: auto; border: 0; border-radius: 0; padding: 20px clamp(16px, 2.4vw, 36px) 24px; }
.pu-ana--big .pu-ana__grid { flex: 1; grid-template-columns: minmax(200px, 290px) minmax(0, 1fr) minmax(200px, 290px); }
.pu-ana--big .pu-ana__stage { width: min(100%, calc((100dvh - 150px) * var(--ar))); }
.pu-ana--big.pu-ana--tall .pu-ana__stage { width: min(100%, 320px); }
.pu-ana--big .pu-ana__bar .pu-viewer__x { margin-left: auto; }
.pu-viewer__x { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid #404040; background: none; color: #FAFAFA; cursor: pointer; }
.pu-viewer__x:hover { background: #272727; }
.pu-ana__cap { position: relative; z-index: 2; margin: 0; text-align: center; font-size: 14px; color: #A3A3A3; }
html.pu-viewer-open { overflow: hidden; }

/* narrow screens: the picture first, then every label in one list; no wires */
@media (max-width: 760px) {
  .pu-ana__grid, .pu-ana--lr .pu-ana__grid, .pu-ana--big .pu-ana__grid { display: flex; flex-direction: column; gap: 10px; }
  .pu-ana__wrap { order: -1; }
  .pu-ana__col { display: contents; }
  .pu-ana--lr .pu-ana__col--a .pu-ana__label { flex-direction: row; text-align: left; }
  .pu-ana__wires { display: none; }
  .pu-ana--lr .pu-ana__stage { width: min(100%, 260px); }
  .pu-ana__hint { display: none; }
}

/* concept diagram: the annotated screens' dark dotted panel; teal = the anchor's buyers in profit, coral = at a loss */
.pu-dia { margin: 1.8em 0 0; display: grid; gap: 10px; }
.pu-dia__panel { position: relative; display: grid; gap: 14px; padding: clamp(14px, 2vw, 22px); border-radius: 18px; border: 1px solid #272727; color: #FAFAFA;
  background: radial-gradient(60% 55% at 60% 40%, color-mix(in srgb, #FC6AD0 9%, transparent), transparent 70%), radial-gradient(#272727 1px, transparent 1.2px) 0 0 / 18px 18px, #0A0A0A;
  box-shadow: 0 28px 60px -40px color-mix(in srgb, #0A0A0A 90%, transparent); }
.pu-dia__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pu-dia__seg { display: inline-flex; padding: 3px; border-radius: 999px; background: #1A1A1A; border: 1px solid #272727; }
.pu-dia__seg button { height: 32px; padding: 0 14px; border-radius: 999px; border: 0; background: none; color: #A3A3A3; font: 500 13.5px var(--sans); cursor: pointer; transition: background .2s, color .2s; }
.pu-dia__seg button[aria-pressed="true"] { background: #FAFAFA; color: #0F0F0F; }
.pu-dia__replay { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid #404040; background: none; color: #FAFAFA; font: 500 13px var(--sans); cursor: pointer; }
.pu-dia__replay svg { width: 15px; height: 15px; }
.pu-dia__replay:hover { background: #272727; }
.pu-dia button:focus-visible, .pu-dia__legend li:focus-visible { outline: 2px solid #FEA3E5; outline-offset: 2px; }
.pu-dia__panel > svg { display: block; width: 100%; height: auto; overflow: visible; }
.pu-dia__mode[hidden], .pu-dia__side[hidden] { display: none; }
.pu-dia__grid line { stroke: #1F1F1F; }
.pu-dia__candles line { stroke-width: 1; }
.pu-dia__candles .up line { stroke: #5ACFE0; }
.pu-dia__candles .up rect { fill: #0D464F; stroke: #5ACFE0; stroke-width: 1; }
.pu-dia__candles .dn line { stroke: #EE807B; }
.pu-dia__candles .dn rect { fill: #EE807B; }
.pu-dia__gap .gain { fill: color-mix(in srgb, #5ACFE0 22%, transparent); }
.pu-dia__gap .loss { fill: color-mix(in srgb, #EE807B 26%, transparent); }
.pu-dia__vwap { fill: none; stroke: url(#pu-dia-line); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.pu-dia__glow { fill: none; stroke: #FC6AD0; stroke-width: 9; stroke-linejoin: round; opacity: .25; filter: blur(5px); }
.pu-dia__anchor { fill: #FFFFFF; stroke: #FC6AD0; stroke-width: 3; }
.pu-dia__pin { cursor: pointer; }
.pu-dia__pin circle { fill: #FECCF1; stroke: #0A0A0A; stroke-width: 2; }
.pu-dia__pin .halo { fill: color-mix(in srgb, #FEA3E5 30%, transparent); stroke: none; opacity: 0; transition: opacity .25s; }
.pu-dia__pin text { font: 700 11px var(--sans); fill: #15020B; }
.pu-dia__pin.on circle:not(.halo) { fill: #FFFFFF; }
.pu-dia__pin.on .halo { opacity: 1; animation: pu-dia-pulse 1.8s ease-in-out infinite; }
@keyframes pu-dia-pulse { 50% { opacity: .35; } }
.pu-dia__note { font: 11px var(--sans); fill: #727272; }
/* the line draws itself in, then the gap and the pins appear */
.pu-dia.is-drawing .pu-dia__vwap, .pu-dia.is-drawing .pu-dia__glow { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pu-dia-draw 2.2s cubic-bezier(.4, .1, .2, 1) forwards; }
.pu-dia.is-drawing .pu-dia__gap, .pu-dia.is-drawing .pu-dia__pin { opacity: 0; animation: pu-dia-in .6s ease 2s forwards; }
@keyframes pu-dia-draw { to { stroke-dashoffset: 0; } }
@keyframes pu-dia-in { to { opacity: 1; } }
/* readout and labels under the chart */
.pu-dia__side { display: grid; gap: 12px; }
.pu-dia__read { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; border-radius: 12px; overflow: hidden; background: #272727; border: 1px solid #272727; }
.pu-dia__read div { padding: 10px 12px; background: #0F0F0F; }
.pu-dia__read dt { font: 600 10.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #8C8C8C; }
.pu-dia__read dd { margin: 4px 0 0; font: 600 18px/1.1 var(--sans); color: #FAFAFA; font-variant-numeric: tabular-nums; }
.pu-dia__read dd.v { color: #FEA3E5; }
.pu-dia__read dd.gain { color: #5ACFE0; }
.pu-dia__read dd.loss { color: #EE807B; }
.pu-dia__legend { list-style: none; margin: 0; padding: 0 !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pu-dia__legend li { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 12px; background: #171717; border: 1px solid #272727; cursor: pointer; transition: border-color .2s, box-shadow .2s, opacity .2s; }
.pu-dia__legend li + li { margin-top: 0; }
.pu-dia__legend li:hover { border-color: #8A1157; }
.pu-dia__legend li.on { border-color: #FEA3E5; box-shadow: 0 0 0 3px color-mix(in srgb, #FEA3E5 18%, transparent); }
.pu-dia__side.active .pu-dia__legend li:not(.on) { opacity: .55; }
.pu-dia__no { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #FECCF1; color: #15020B; font: 700 11px/1 var(--sans); }
.pu-dia__legend b, .lesson__body .pu-dia__legend b { display: block; font-size: 13.5px; line-height: 1.3; color: #FAFAFA; font-weight: 600; }
.pu-dia__legend p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: #A3A3A3; }
.pu-dia figcaption { font-size: 14px; color: var(--ink-3); }
@media (max-width: 760px) {
  .pu-dia__read, .pu-dia__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .pu-dia.is-drawing .pu-dia__vwap, .pu-dia.is-drawing .pu-dia__glow, .pu-dia.is-drawing .pu-dia__gap, .pu-dia.is-drawing .pu-dia__pin { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .pu-dia__pin.on .halo { animation: none; }
}

/* How to use it: a step card; numbered dots joined by a line, the controls you click as chips */
.pu-howto { margin-top: 1.6em; padding: 18px 20px 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 14px 30px -26px color-mix(in srgb, var(--accent) 50%, transparent); }
.lesson__body .pu-howto__head, .pu-howto__head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 600 12px/1.2 var(--sans); scroll-margin-top: 0; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink); }
.pu-howto__head small { margin-left: auto; font: 500 12px var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.pu-howto .pu-steps { margin: 0; }
.pu-howto .pu-steps li { position: relative; min-height: 34px; padding: 5px 0 0 50px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.pu-howto .pu-steps li + li { margin-top: 14px; }
.pu-howto .pu-steps li::before { left: 0; top: 0; width: 34px; height: 34px; font: 700 14px/1 var(--sans); color: var(--surface);
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #FC6AD0)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.pu-howto .pu-steps li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 40px; bottom: -12px; width: 2px; border-radius: 2px;
  background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 15%, transparent)); opacity: .5; }
.pu-howto .pu-steps b { display: inline-block; padding: 0 8px; border-radius: 7px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); color: var(--ink); font-weight: 600; line-height: 1.5; }



/* Byline times (owner): published with its IST time, updated date, and how long ago each was */
.pu-phero .pu-byline__when { display: flex; align-items: center; gap: 16px; margin: 0; padding-right: 2px; font-size: 13px; color: var(--ink-2); }
.pu-when { display: grid; gap: 3px; }
.pu-when__row { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pu-when__k { min-width: 62px; font: 600 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pu-when__row time { color: var(--ink); font-weight: 500; }
.pu-when__ago { color: var(--accent); font-weight: 500; }
.pu-when__ago:empty { display: none; }
.pu-when__ago::before { content: "· "; color: var(--ink-3); font-weight: 400; }
.pu-when__read { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 6%, var(--bg)); white-space: nowrap; color: var(--ink-2); }
.pu-when__read svg { width: 14px; height: 14px; color: var(--accent); }
.pu-phero .pu-byline__when { border-right: 1px solid var(--line); padding-right: 16px; }
/* brand-coloured share marks: the circle carries the colour, the button only lifts on hover */
.pu-phero .pu-share__btn img { display: block; width: 22px; height: 22px; }
.pu-phero .pu-share__btn--whatsapp:hover, .pu-phero .pu-share__btn--x:hover, .pu-phero .pu-share__btn--linkedin:hover, .pu-phero .pu-share__btn--telegram:hover,
.pu-phero .pu-share__btn--whatsapp:focus-visible, .pu-phero .pu-share__btn--x:focus-visible, .pu-phero .pu-share__btn--linkedin:focus-visible, .pu-phero .pu-share__btn--telegram:focus-visible {
  background: var(--surface); border-color: var(--hairline); color: inherit; transform: translateY(-2px); box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--ink) 45%, transparent); }
:root[data-theme="dark"] .pu-phero .pu-share__btn--x img { filter: invert(1); }
@media (max-width: 760px) {
  .pu-phero .pu-byline__when { border-right: 0; padding-right: 0; flex-wrap: wrap; gap: 8px 12px; }
}


.pu-ana--tb .pu-ana__label:not(.on) p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pu-ana--tb .pu-ana__label.on { z-index: 2; }

/* Tip, worked example and Good to know (owner: branded, no left strip): a soft accent-tinted card with a full
   hairline, a round icon badge in the title. The example carries the most colour, Good to know the least. */
.pu-body .pu-co { position: relative; padding: 18px 20px 18px; border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line)); border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface) 70%); color: var(--ink);
  box-shadow: 0 14px 30px -26px color-mix(in srgb, var(--accent) 60%, transparent); }
.pu-body .pu-co .callout__title, .pu-body .pu-co .pu-limits__title { display: flex; align-items: center; gap: 10px; font: 600 12px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink); }
.pu-co__ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }
.pu-co__ic svg { width: 16px; height: 16px; }
.pu-body .pu-co > p { margin-top: .7em; font-size: 16.5px; line-height: 1.65; }
.pu-body .pu-example { border-color: color-mix(in srgb, var(--accent) 26%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), color-mix(in srgb, #FECCF1 12%, var(--surface)) 100%); }
.pu-body .pu-example .pu-co__ic { background: var(--accent); color: var(--surface); }
.pu-body .pu-tip .pu-co__ic { background: color-mix(in srgb, #FECCF1 70%, var(--surface)); color: var(--accent); }
.pu-body .pu-limits.pu-co { border-style: solid; background: var(--surface); box-shadow: none; }
.pu-body .pu-limits.pu-co .pu-limits__title { color: var(--ink-3); }
.pu-body .pu-limits.pu-co .pu-co__ic { background: var(--surface-2); color: var(--ink-2); }
.pu-body .pu-limits.pu-co ul { margin-top: .7em; }

/* White theme for the annotated screens, the concept diagram and the full-screen view (owner: follow the
   site's light and dark themes, no black panels in light). The dark look above stays for the dark theme;
   the screenshots themselves are SAHI's dark UI in both. */
:root:not([data-theme="dark"]) .pu-ana, :root:not([data-theme="dark"]) .pu-dia__panel {
  color: #0F0F0F; border-color: #E6E6E6; box-shadow: 0 24px 50px -40px color-mix(in srgb, #66033C 45%, transparent);
  background: radial-gradient(60% 55% at 55% 45%, color-mix(in srgb, #FEA3E5 12%, transparent), transparent 70%), radial-gradient(#E6E6E6 1px, transparent 1.2px) 0 0 / 18px 18px, #FFFFFF; }
:root:not([data-theme="dark"]) .pu-ana--big { border: 0; }
:root:not([data-theme="dark"]) .pu-viewer { background: #FFFFFF; color: #0F0F0F; }
:root:not([data-theme="dark"]) .pu-viewer::backdrop { background: color-mix(in srgb, #0F0F0F 40%, transparent); }
:root:not([data-theme="dark"]) .pu-ana__hint, :root:not([data-theme="dark"]) .pu-ana__cap { color: #6E6E6E; }
:root:not([data-theme="dark"]) .pu-ana__tour { background: #0F0F0F; color: #FFFFFF; }
:root:not([data-theme="dark"]) .pu-ana__play { background: #2096A6; }
:root:not([data-theme="dark"]) .pu-anat__eye, :root:not([data-theme="dark"]) .pu-ana__full, :root:not([data-theme="dark"]) .pu-viewer__x,
:root:not([data-theme="dark"]) .pu-dia__replay { border-color: #D3D3D3; color: #0F0F0F; }
:root:not([data-theme="dark"]) .pu-anat__eye:hover, :root:not([data-theme="dark"]) .pu-ana__full:hover, :root:not([data-theme="dark"]) .pu-viewer__x:hover,
:root:not([data-theme="dark"]) .pu-dia__replay:hover { background: #F5F5F5; }
:root:not([data-theme="dark"]) .pu-ana__stage { box-shadow: 0 0 0 1px #E6E6E6, 0 0 0 6px color-mix(in srgb, #28BCD0 10%, transparent), 0 24px 50px -28px color-mix(in srgb, #0F0F0F 45%, transparent); }
:root:not([data-theme="dark"]) .pu-ana__label { background: #FFFFFF; border-color: #E6E6E6; box-shadow: 0 10px 24px -18px color-mix(in srgb, #0F0F0F 35%, transparent); }
:root:not([data-theme="dark"]) .pu-ana__label b { color: #0F0F0F; }
:root:not([data-theme="dark"]) .pu-ana__label p { color: #535353; }
:root:not([data-theme="dark"]) .pu-ana__label .pu-anat__badge { background: #ECFAFC; color: #14697A; border-color: #A9E7F0; }
:root:not([data-theme="dark"]) .pu-ana__label:hover { border-color: #A9E7F0; }
:root:not([data-theme="dark"]) .pu-ana__label.on { border-color: #2096A6; box-shadow: 0 0 0 3px color-mix(in srgb, #28BCD0 16%, transparent), 0 12px 30px -14px color-mix(in srgb, #2096A6 40%, transparent); }
:root:not([data-theme="dark"]) .pu-ana__label.on .pu-anat__badge { background: #2096A6; color: #FFFFFF; border-color: #2096A6; }
:root:not([data-theme="dark"]) .pu-ana__wires path { stroke: #A3A3A3; }
:root:not([data-theme="dark"]) .pu-ana__wires circle { fill: #FFFFFF; stroke: #A3A3A3; }
:root:not([data-theme="dark"]) .pu-ana__wires .on path { stroke: #2096A6; }
:root:not([data-theme="dark"]) .pu-ana__wires .on circle { fill: #28BCD0; stroke: #FFFFFF; }
/* diagram */
:root:not([data-theme="dark"]) .pu-dia__seg { background: #F5F5F5; border-color: #E6E6E6; }
:root:not([data-theme="dark"]) .pu-dia__seg button { color: #535353; }
:root:not([data-theme="dark"]) .pu-dia__seg button[aria-pressed="true"] { background: #0F0F0F; color: #FFFFFF; }
:root:not([data-theme="dark"]) .pu-dia__grid line { stroke: #F5F5F5; }
:root:not([data-theme="dark"]) .pu-dia__candles .up line { stroke: #2096A6; }
:root:not([data-theme="dark"]) .pu-dia__candles .up rect { fill: #ECFAFC; stroke: #2096A6; }
:root:not([data-theme="dark"]) .pu-dia__candles .dn line { stroke: #E35650; }
:root:not([data-theme="dark"]) .pu-dia__candles .dn rect { fill: #E35650; }
:root:not([data-theme="dark"]) .pu-dia__gap .gain { fill: color-mix(in srgb, #28BCD0 16%, transparent); }
:root:not([data-theme="dark"]) .pu-dia__gap .loss { fill: color-mix(in srgb, #E35650 15%, transparent); }
:root:not([data-theme="dark"]) .pu-dia__panel stop:first-child { stop-color: #A50F66; }
:root:not([data-theme="dark"]) .pu-dia__panel stop:last-child { stop-color: #E61C9A; }
:root:not([data-theme="dark"]) .pu-dia__glow { stroke: #FC6AD0; opacity: .18; }
:root:not([data-theme="dark"]) .pu-dia__anchor { fill: #FFFFFF; stroke: #A50F66; }
:root:not([data-theme="dark"]) .pu-dia__pin circle { fill: #66033C; stroke: #FFFFFF; }
:root:not([data-theme="dark"]) .pu-dia__pin .halo { fill: color-mix(in srgb, #E61C9A 25%, transparent); }
:root:not([data-theme="dark"]) .pu-dia__pin text { fill: #FFFFFF; }
:root:not([data-theme="dark"]) .pu-dia__pin.on circle:not(.halo) { fill: #A50F66; }
:root:not([data-theme="dark"]) .pu-dia__note { fill: #8C8C8C; }
:root:not([data-theme="dark"]) .pu-dia__read { background: #E6E6E6; border-color: #E6E6E6; }
:root:not([data-theme="dark"]) .pu-dia__read div { background: #FAFAFA; }
:root:not([data-theme="dark"]) .pu-dia__read dt { color: #6E6E6E; }
:root:not([data-theme="dark"]) .pu-dia__read dd { color: #0F0F0F; }
:root:not([data-theme="dark"]) .pu-dia__read dd.v { color: #A50F66; }
:root:not([data-theme="dark"]) .pu-dia__read dd.gain { color: #14697A; }
:root:not([data-theme="dark"]) .pu-dia__read dd.loss { color: #C4342E; }
:root:not([data-theme="dark"]) .pu-dia__legend li { background: #FFFFFF; border-color: #E6E6E6; }
:root:not([data-theme="dark"]) .pu-dia__legend li:hover { border-color: #FEA3E5; }
:root:not([data-theme="dark"]) .pu-dia__legend li.on { border-color: #C80E7D; box-shadow: 0 0 0 3px color-mix(in srgb, #E61C9A 14%, transparent); }
:root:not([data-theme="dark"]) .pu-dia__legend b { color: #0F0F0F; }
:root:not([data-theme="dark"]) .pu-dia__legend p { color: #535353; }
:root:not([data-theme="dark"]) .pu-dia__no { background: #66033C; color: #FFFFFF; }
:root:not([data-theme="dark"]) .pu-dia button:focus-visible, :root:not([data-theme="dark"]) .pu-dia__legend li:focus-visible { outline-color: #C80E7D; }

/* Hub cards, trimmed (owner, 25 Oct 2026): the picture carries the date and the area icons; below it only the
   title, one line of summary and a read link. The features list and the text tags are gone. */
.pu-card a { border-radius: 18px; }
.pu-card__pic { position: relative; display: block; }
.pu-card__pic .pu-card__media { border-bottom: 1px solid var(--line); }
.pu-card__pic::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 55%, color-mix(in srgb, #0F0F0F 28%, transparent)); }
.pu-card__pic .pu-card__date { position: absolute; z-index: 1; top: 10px; left: 10px; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink); font: 600 12px/1 var(--sans); font-variant-numeric: tabular-nums; box-shadow: 0 2px 8px -4px color-mix(in srgb, #0F0F0F 40%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pu-card__icons { position: absolute; z-index: 1; left: 10px; bottom: 10px; display: flex; gap: 5px; }
.pu-card__ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--surface) 94%, transparent); color: var(--accent);
  box-shadow: 0 2px 8px -4px color-mix(in srgb, #0F0F0F 45%, transparent); }
.pu-card__ic svg { width: 15px; height: 15px; }
.pu-card .pu-card__body { gap: 8px; padding: 16px 18px 16px; }
.pu-card .pu-card__title { font: 600 17px/1.35 var(--sans); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pu-card__sum { font-size: 14px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pu-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font: 500 13px var(--sans); color: var(--ink-3); }
.pu-card__foot .pu-card__badge { padding: 0; background: none; color: var(--brand-ink); font: 600 13px var(--sans); }
.pu-card__go { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); color: var(--ink); transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.pu-card__go svg { width: 14px; height: 14px; }
.pu-card a:hover .pu-card__go { background: var(--brand); color: var(--on-brand); transform: translateX(2px); }

/* area icons sit in the footer, so the picture's own artwork stays clear */
.pu-card__pic::after { display: none; }
.pu-card__foot .pu-card__icons { position: static; display: flex; gap: 4px; }
.pu-card__foot .pu-card__ic { width: 26px; height: 26px; background: var(--surface-2); box-shadow: none; }
.pu-card__foot .pu-card__ic svg { width: 14px; height: 14px; }
.pu-card__foot > :nth-child(2) { margin-left: auto; }

/* Card borders (owner): a gradient hairline, accent at the top left and pink at the bottom right, through the
   theme's own line colour; on hover it brightens and the card lifts on a soft accent glow. Both themes read
   the same tokens, so the edge follows light and dark. */
.pu-card a, .pu-card--new a {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 38%, var(--line)), var(--line) 38%, var(--line) 62%, color-mix(in srgb, #FEA3E5 55%, var(--line))) border-box;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #FFFFFF 6%, transparent), 0 1px 2px color-mix(in srgb, #0F0F0F 5%, transparent);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); }
.pu-card a:hover, .pu-card a:focus-visible {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 30%, var(--line)) 45%, color-mix(in srgb, #FEA3E5 40%, var(--line)) 70%, #FEA3E5) border-box;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #FFFFFF 8%, transparent), 0 22px 44px -26px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 0 4px color-mix(in srgb, var(--accent) 7%, transparent); }
.pu-card__pic .pu-card__media { border-bottom-color: color-mix(in srgb, var(--accent) 12%, var(--line)); }

/* Cards like the Options page carousel (owner, 25 Oct 2026): no hairline, a soft grey rounded panel, the picture
   in its own lighter inset, the text on the panel. Dark: the same in dark greys. Replaces the gradient edge. */
.pu-card a, .pu-card--new a, .pu-card a:hover, .pu-card a:focus-visible {
  border: 0; border-radius: 24px; padding: 10px; background: #F5F5F5; box-shadow: none; }
.pu-card a:hover, .pu-card a:focus-visible { background: #E6E6E6; transform: translateY(-2px); }
.pu-card a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pu-card__pic { border-radius: 18px; overflow: hidden; background: #FAFAFA; }
.pu-card__pic .pu-card__media { border-bottom: 0; background: #FAFAFA; }
.pu-card .pu-card__body { padding: 14px 8px 4px; }
.pu-card .pu-card__title { font-weight: 500; font-size: 18px; letter-spacing: -.005em; }
.pu-card__foot { border-top: 0; padding-top: 6px; }
.pu-card__foot .pu-card__ic, .pu-card__go { background: #FFFFFF; }
.pu-card__pic .pu-card__date { background: #FFFFFF; }
:root[data-theme="dark"] .pu-card a, :root[data-theme="dark"] .pu-card--new a { background: #171717; }
:root[data-theme="dark"] .pu-card a:hover, :root[data-theme="dark"] .pu-card a:focus-visible { background: #1F1F1F; }
:root[data-theme="dark"] .pu-card__pic, :root[data-theme="dark"] .pu-card__pic .pu-card__media { background: #242424; }
:root[data-theme="dark"] .pu-card__foot .pu-card__ic, :root[data-theme="dark"] .pu-card__go, :root[data-theme="dark"] .pu-card__pic .pu-card__date { background: #272727; color: #FAFAFA; }
:root[data-theme="dark"] .pu-card__foot .pu-card__ic { color: #FEA3E5; }
/* dark: the panel behind the cards is #171717 too, so the card steps up a shade and carries a faint ring */
:root[data-theme="dark"] .pu-card a, :root[data-theme="dark"] .pu-card--new a { background: #242424; box-shadow: inset 0 0 0 1px #272727; }
:root[data-theme="dark"] .pu-card a:hover, :root[data-theme="dark"] .pu-card a:focus-visible { background: #272727; box-shadow: inset 0 0 0 1px #404040; }
:root[data-theme="dark"] .pu-card__pic, :root[data-theme="dark"] .pu-card__pic .pu-card__media { background: #1A1A1A; }
:root[data-theme="dark"] .pu-card__foot .pu-card__ic, :root[data-theme="dark"] .pu-card__go { background: #1A1A1A; }
:root[data-theme="dark"] .pu-card a:hover .pu-card__go { background: #FAFAFA; color: #0F0F0F; }

/* a tall picture may ask for a wider stage (anat.stageW) */
.pu-ana--lr .pu-ana__stage { width: var(--sw, 230px); }
@media (max-width: 760px) { .pu-ana--lr .pu-ana__stage { width: min(100%, var(--sw, 260px)); } }

/* the sticky section chips stay above the annotated screens' own bars as they scroll under */
@media (max-width: 1023px) { .pu-toc { z-index: 6; } }
.pu-ana__bar { z-index: 2; }

/* inline, every label shows two lines until it is picked */
.pu-ana--inline .pu-ana__label:not(.on) p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pu-ana--inline .pu-ana__label.on { z-index: 2; }

/* SAHI's own screen in the visitor's theme: a capture in each of SAHI's themes (anat.srcLight), one shown */
.pu-ana__stage .pu-shot--dark { display: none; }
:root[data-theme="dark"] .pu-ana__stage .pu-shot--light { display: none; }
:root[data-theme="dark"] .pu-ana__stage .pu-shot--dark { display: block; }

/* Where it is · What it is · How it helps: three numbered parts per feature, joined by a thin rail */
.pu-feature--3 .pu-part { position: relative; margin-top: 1.6em; padding-left: 46px; }
.pu-feature--3 .pu-part::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: -1.4em; width: 2px; border-radius: 2px;
  background: linear-gradient(color-mix(in srgb, var(--accent) 40%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)); }
.pu-feature--3 .pu-part:last-child::before { display: none; }
.lesson__body .pu-part__h, .pu-part__h { display: flex; align-items: center; gap: 10px; margin: 0 0 .5em -46px; font: 600 13px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink); }
.pu-part__n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none; font: 700 14px/1 var(--sans); letter-spacing: 0; color: var(--surface);
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #FC6AD0)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, var(--bg)); }
.pu-part__ic { display: grid; place-items: center; width: 22px; height: 22px; color: var(--accent); }
.pu-part__ic svg { width: 16px; height: 16px; }
.pu-part__body > * + * { margin-top: 1em; }
.pu-part__body > p { margin: 0; }
.pu-part__body > p + p { margin-top: .9em; }
.pu-part__body .pu-where { margin-top: 0; }
.pu-part__body .pu-anat, .pu-part__body .pu-dia, .pu-part__body .pu-howto, .pu-part__body .pu-table { margin-top: 1.2em; }
.pu-helps { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: 10px; }
.pu-helps li { position: relative; margin: 0; padding: 12px 14px 12px 44px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 5%, var(--surface)), var(--surface) 70%); font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.pu-helps li + li { margin-top: 0; }
.pu-helps li::before { content: ""; position: absolute; left: 14px; top: 14px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); }
.pu-helps li::after { content: ""; position: absolute; left: 20px; top: 19px; width: 8px; height: 5px; border-left: 2px solid var(--surface); border-bottom: 2px solid var(--surface); transform: rotate(-45deg); }
.lesson__body .pu-helps b { color: var(--ink); }
@media (max-width: 640px) {
  .pu-feature--3 .pu-part { padding-left: 0; }
  .pu-feature--3 .pu-part::before { display: none; }
  .lesson__body .pu-part__h, .pu-part__h { margin-left: 0; }
}

/* our posters (scripts/sahi-site/update-posters.mjs): the light one in the light theme, the dark one in the dark;
   the card's date chip moves to the top right so it never covers the poster's SAHI mark */
.pu-poster { display: block; }
.pu-poster img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.pu-poster .pu-poster--dark { display: none; }
:root[data-theme="dark"] .pu-poster .pu-poster--light { display: none; }
:root[data-theme="dark"] .pu-poster .pu-poster--dark { display: block; }
.pu-card__pic:has(.pu-poster)::after { display: none; }
.pu-card__pic:has(.pu-poster) .pu-card__date { left: auto; right: 10px; }
.pu-card__media.pu-poster { aspect-ratio: 1200 / 630; }

/* ---- SAHI Web Terminal course (terminal-course.mjs): course hero meta, lesson cards, clips, gallery, shortcuts ---- */
.tc-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 7px 14px 7px 11px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--hairline)); background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink); }
.tc-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.tc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.tc-meta li { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--hairline);
  background: var(--surface); font: 500 14px/1 var(--sans); color: var(--ink-2); }
.tc-meta li b { font-weight: 600; color: var(--ink); }
.tc-meta svg { width: 16px; height: 16px; color: var(--brand-ink); }
.tc-how { padding: clamp(20px, 3vw, 32px); border-radius: 24px; background: var(--surface-2); }
.tc-how .h2 { margin: 0 0 18px; }
.tc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: tcs; }
.tc-steps li { position: relative; padding: 16px 16px 16px 58px; border-radius: 18px; background: var(--surface); border: 1px solid var(--hairline);
  font-size: 15px; line-height: 1.5; color: var(--ink-2); counter-increment: tcs; }
.tc-steps li::before { content: counter(tcs); position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: var(--surface); font: 700 14px/1 var(--sans); }
.tc-steps b { display: block; margin-bottom: 4px; font-weight: 600; color: var(--ink); }
.tc-overview h2 { margin-top: 0; }
.tc-overview > p { margin: 0 0 1em; }

/* a short screen recording */
.pu-clip { margin: 1.2em 0 0; }
.pu-clip video { display: block; width: 100%; height: auto; border-radius: 16px; background: #0F0F0F; border: 1px solid var(--hairline); }
.pu-clip figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; color: var(--ink-3); }
.pu-clip__tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--hairline)); font: 600 12px/1 var(--sans); color: var(--brand-ink); }

/* more pictures of one feature */
.pu-gallery { margin-top: 1.4em; }
.lesson__body .pu-gallery__h, .pu-gallery__h { margin: 0 0 12px; font: 600 13px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.pu-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pu-gallery__item { margin: 0; padding: 8px; border-radius: 18px; background: var(--surface-2); }
.pu-gallery__pic { display: block; border-radius: 12px; overflow: hidden; background: #0F0F0F; }
.pu-gallery__pic img { display: block; width: 100%; height: 170px; object-fit: contain; object-position: center; transition: transform .3s ease; }
.pu-gallery__pic:hover img { transform: scale(1.03); }
.pu-gallery__item figcaption { padding: 10px 4px 2px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.pu-gallery__t { display: block; margin-bottom: 3px; color: var(--ink); font-weight: 600; }
.pu-gallery__item figcaption b { font-weight: 600; color: var(--ink); }

/* keyboard shortcuts */
.pu-keys kbd { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 7px; border: 1px solid var(--hairline);
  border-bottom-width: 2px; background: var(--surface); font: 600 12px/1 var(--sans); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .tc-ch__pic img, .pu-gallery__pic img { transition: none; } }
.tc-lesson__lit { position: absolute; border-radius: 6px; outline: 2px solid var(--accent); outline-offset: 1px;
  box-shadow: 0 0 0 9999px color-mix(in srgb, #0F0F0F 38%, transparent), 0 0 24px 4px color-mix(in srgb, var(--accent) 55%, transparent); pointer-events: none; }
:root[data-theme="dark"] .tc-lesson__lit { outline-color: #FEA3E5; }
.pu-keys li { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pu-keys ul { padding-left: 0 !important; }
.pu-keys__d { margin-left: 8px; color: var(--ink-2); }

/* the course page's chapter sections (.tc-quote, .tc-ch …) live in learn.css: every course page uses them */

/* ---- The hub timeline, in motion (updates.js): a rail down the month column that fills as you scroll,
   a dot for each month that lights while its updates are on screen, cards that rise in as they arrive,
   and dates told relative to today ("Last month", "2 weeks ago"). Without script or with reduced motion,
   everything is simply there. */
@media (min-width: 861px) {
  .pu-timeline { position: relative; }
  .pu-timeline::before, .pu-timeline::after { content: ""; position: absolute; left: 5px; top: 8px; width: 2px; border-radius: 2px; pointer-events: none; }
  .pu-timeline::before { bottom: 8px; background: var(--line); }
  .pu-timeline::after { height: calc(var(--pu-p, 0) * (100% - 16px)); background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 40%, transparent)); transition: height .15s linear; }
  .pu-month__name { padding-left: 26px; }
  .pu-month__name::before { content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--hairline); box-sizing: border-box; transition: background-color .3s, border-color .3s, box-shadow .3s; }
  .pu-month.is-on .pu-month__name::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px var(--brand-soft); }
  .pu-month + .pu-month { border-top-color: transparent; }
}
.pu-month__name { transition: color .3s; }
html.js .pu-month:not(.is-on) .pu-month__name { color: var(--ink-2); }
.pu-month__ago { margin-top: 6px; font: 500 13px/1.2 var(--sans); color: var(--ink-3); }
@media (max-width: 860px) { .pu-month__ago { flex-basis: 100%; margin-top: 0; } }

/* cards rise in as they reach the screen, one after another within a month */
html.js.motion .pu-timeline .pu-card { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
html.js.motion .pu-timeline .pu-card.is-in { opacity: 1; transform: none; }

/* a fresh update (two weeks or less) carries a live dot on its date */
.pu-card__date.is-fresh::before { content: ""; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 55%, transparent); }
html.js.motion .pu-card__date.is-fresh::before { animation: pu-fresh 2.2s ease-out infinite; }
@keyframes pu-fresh { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
.pu-spot__ago { font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .pu-timeline::after, .pu-month__name, .pu-month__name::before { transition: none; } }