/* The blog's pages (website/blog/templates) share this file: Très Riches Heures. Each page is one
   vellum leaf on the home page's night sky, drawn after the calendar pages of the Duc de Berry's
   book of hours (the Limbourg brothers, c. 1412-16): navy and gilt, a lunette over the index, ivy
   corners that grow in on a post, an illuminated initial and a zodiac sign over each section.
   Ornaments are from /assets/blog-art/heures (website/blog/generate_heures_ornaments.py). Pieces
   drawn in two inks are images; one-ink marks are masks filled with the gilt. Code is coloured by
   the blog build (hl- token classes) and charts are drawn by it (dreamcoder_website/blog_charts.py).
   The design pages it was chosen from (/blog-styles.html) are not deployed. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: #ffe9e3; font-family: 'Space Grotesk', 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
  background-color: #14123a; background-attachment: fixed;
  background-image: linear-gradient(180deg, #0c1133 0%, #14123a 8%, #1f1140 18%, #2c1147 32%, #3a1546 55%, #5a1f4a 80%, #7a2950 100%);
  -webkit-font-smoothing: antialiased;
}
/* The home page's stars, set by blog.js, and the warm horizon at the foot. */
.sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sky::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30rem;
  background: radial-gradient(ellipse at 50% 110%, rgba(255,154,133,.18) 0%, transparent 60%); }
.sky .star { position: absolute; border-radius: 9999px; will-change: opacity; }
@keyframes twinkle { 0%, 100% { transform: scale(1); opacity: var(--star-o, 1); } 50% { transform: scale(1.25); opacity: calc(var(--star-o, 1) * .45); } }
.top-bar, .leaf, .site-foot { position: relative; z-index: 1; }

/* ---- top bar: the main site's bare corner links on the sky ---- */
.top-bar {
  max-width: 76rem; margin: 0 auto; padding: 1.75rem 1rem 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem;
}
@media (max-width: 78rem) { .top-bar { padding-inline: 1.5rem; } }
.brand { display: inline-flex; align-items: center; gap: .625rem; color: #ff9a85; text-decoration: none; }
.brand span { font-weight: 500; font-size: 1.125rem; letter-spacing: .02em; color: #ffe9e3; }
.top-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.corner-link {
  display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,233,227,.82);
}
.corner-link:hover, .corner-link[aria-current] { color: #ff9a85; }
.corner-link .dot { width: 4px; height: 4px; border-radius: 9999px; background: #ff9a85; opacity: .6; }
.corner-link[aria-current] .dot { opacity: 1; }

.site-foot { padding: 0 1rem 3rem; text-align: center; font: .6875rem 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .06em; color: rgba(243,238,224,.82); }
.site-foot p { margin: 0; }
.site-foot a { color: rgba(243,238,224,.85); }
.site-foot a:hover { color: #f8f4ea; }
:is(.top-bar, .site-foot) :focus-visible { outline: 2px solid #a8c8e2; outline-offset: 2px; }

/* ---- the leaf ---- */
.leaf {
  --navy: #16204a;
  --gilt: linear-gradient(180deg, #f2c445, #dba424 50%, #b98314);
  /* Gilded like the home page's gold button, top-lit, for the one-ink marks. */
  --orn: linear-gradient(180deg, #f2c445 0%, #dba424 50%, #c48d16 100%);
  /* Vellum, pale and creamy, so the blue and gold stand on it. */
  --bg: #f7f0de; --fg: #1d1a1f; --dim: #554c43; --faint: #8a7f70; --rule: rgba(22,32,74,.16);
  --accent: #b98314; --hover: #16204a;
  --code-bg: rgba(22,32,74,.07); --code-fg: #16204a;
  --head: 'Fraunces', Georgia, serif; --body: 'Newsreader', Georgia, serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
  /* The gilt and the margins need room, so the line runs to about 84 characters. */
  --size: 1.2rem; --lh: 1.7; --measure: 42rem; --wide: 58rem;
  --fig-r: 6px; --fig-shadow: 0 0 0 1px rgba(20,18,30,.08), 0 24px 48px -28px rgba(20,18,30,.45);
  --box: 76rem; --box-r: 18px; --box-shadow: 0 0 0 1px rgba(255,233,227,.16), 0 50px 110px -40px rgba(4,3,22,.85);
  display: block; padding: 2.5rem 1rem 3.5rem; overflow-x: clip;
  color: var(--fg); font-family: var(--body);
}
@media (max-width: 40rem) { .leaf { --box-r: 12px; padding: 1.5rem .5rem 2.5rem; } }
/* Resets at no weight, so any rule below wins over them. */
:where(.leaf) a { color: inherit; text-decoration: none; }
:where(.leaf) img { display: block; max-width: 100%; height: auto; }
:where(.leaf) :where(h1, h2, h3, p, ol, ul, figure, blockquote, pre) { margin: 0; }
.leaf :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* The index and the post are each one leaf, with a gold fillet inside its edge like the ruled frame
   of a manuscript page. */
.ix, .po { position: relative; max-width: var(--box); margin: 0 auto; background: var(--bg); border-radius: var(--box-r); overflow: clip;
  box-shadow: inset 0 0 0 10px var(--bg), inset 0 0 0 11px rgba(185,131,20,.55), inset 0 0 0 14px var(--bg), inset 0 0 0 14.6px rgba(22,32,74,.3), var(--box-shadow); }
@media (max-width: 40rem) { .ix, .po { box-shadow: inset 0 0 0 6px var(--bg), inset 0 0 0 7px rgba(185,131,20,.55), var(--box-shadow); } }

.leaf .btn { display: inline-block; padding: .72rem 1.3rem; border-radius: 999px; font: 600 .95rem/1 'Inter', system-ui, sans-serif;
  color: #2a1d05; background: linear-gradient(180deg, #ffd86b, #f2c14e 55%, #d9a52a);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 16px -8px rgba(160,110,10,.6); }
.leaf .feed { font: .92rem 'Inter', system-ui, sans-serif; color: var(--dim); border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.leaf .feed:hover { color: var(--fg); border-color: currentColor; }

/* One-ink marks: masks filled with the gilt. */
.ix-item + .ix-item::before, .po-body ul > li::before {
  content: ''; display: block; background: var(--orn);
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
/* Two-ink pieces: images. */
.ix-head::before, .ix-list::before, .ix::after, .po::before, .po-head::before, .po-head::after,
.po-body h2::before, .po-body hr, .po-body blockquote::before, .po-body::after {
  content: ''; display: block; background: var(--img) center / contain no-repeat;
}

/* ---------- index: the month's page, the lunette alone over the title */
.ix { padding-bottom: 4.5rem; }
.ix-head { position: relative; display: flex; flex-direction: column; padding: 3.2rem 1.25rem 3rem; text-align: center; }
.ix-head::before { --img: url(/assets/blog-art/heures/lunette.svg); align-self: center; width: min(600px, 92%); aspect-ratio: 600 / 307; margin-bottom: 2.6rem; pointer-events: none; }
.ix-words { position: relative; z-index: 1; }
.ix-kicker { font: .78rem var(--mono); color: var(--navy); letter-spacing: .04em; }
.ix-head h1 { margin-top: .5rem; font: italic 400 clamp(2.4rem, 6vw, 4.2rem)/1.02 var(--head); letter-spacing: -.01em; color: var(--navy); }
/* The title opens on an illuminated initial: gold on a blue filigree ground. */
.ix-head h1::first-letter { font-style: normal; color: #f2c445; padding: .02em .1em .06em; margin-right: .04em;
  background: url(/assets/blog-art/heures/initial-ground.svg) center / cover, var(--navy); border: 2px solid #dba424; }
.ix-lede { max-width: 30rem; margin: 1rem auto 0; line-height: 1.6; color: var(--dim); font-size: 1.08rem; }
.ix-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem 1.4rem; margin-top: 1.6rem; }
.ix-list { list-style: none; max-width: 52rem; margin: 0 auto; padding: 0 1.25rem; }
.ix-list::before { --img: url(/assets/blog-art/heures/bar-divider.svg); width: min(440px, 100%); aspect-ratio: 560 / 60; margin: 0 auto 1.2rem; }
.ix-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 9rem; gap: .35rem 1.5rem; align-items: start; align-content: start; padding: 1.6rem 0; }
.ix-item + .ix-item { padding-top: 2.6rem; }
.ix-item + .ix-item::before { --m: url(/assets/blog-art/heures/ivy-sprig.svg); position: absolute; top: .1rem; left: 50%; width: 64px; aspect-ratio: 86 / 40; transform: translateX(-50%); }
.ix-item > :not(.ix-thumb) { grid-column: 1; }
.ix-thumb { grid-column: 2; grid-row: 1 / span 3; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; box-shadow: 0 0 0 2px #dba424, 0 0 0 3px rgba(22,32,74,.4); }
.ix-date { font: .75rem var(--mono); color: var(--faint); }
.ix-title { font: 400 1.55rem/1.2 var(--head); color: var(--navy); }
/* The title is the row's one link; it stretches over the whole row. */
.ix-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.ix-item:hover .ix-title { color: var(--accent); }
.ix-sum { font-style: italic; line-height: 1.5; color: var(--dim); }
.ix-empty { text-align: center; color: var(--dim); }
.ix::after { --img: url(/assets/blog-art/heures/lunette-small.svg); width: 180px; aspect-ratio: 240 / 125; margin: 2.5rem auto 0; }
@media (max-width: 40rem) {
  .ix-head { padding-top: 2.2rem; }
  .ix-head::before { margin-bottom: 1.8rem; }
  .ix-item { grid-template-columns: minmax(0, 1fr); }
  .ix-thumb { grid-column: 1; grid-row: auto; order: -1; margin-bottom: .5rem; }
}

/* ---------- post */
.po { padding: 4.5rem 1.25rem 5rem; }
.po-head, .po-body > *, .po-end { max-width: var(--measure); margin-inline: auto; }
/* Ivy corners. blog.js marks the post with data-bloom, leaving the bare bar; once the corners have
   been in view a second it hands over a fresh copy of the growing ivy as --ivy, laid over the bar.
   Without the script, or with reduced motion, the still corner. */
.po::before, .po-head::before { --img: url(/assets/blog-art/heures/vinet-corner.svg); position: absolute; top: 20px; left: 20px; width: 128px; aspect-ratio: 1; }
.po-head::before { left: auto; right: 20px; transform: scaleX(-1); }
.po[data-bloom]::before, .po[data-bloom] .po-head::before {
  background: var(--ivy, none) center / contain no-repeat, url(/assets/blog-art/heures/vinet-bar.svg) center / contain no-repeat; }
.po > .bloom-watch { position: absolute; inset-inline: 0; top: 20px; height: 128px; pointer-events: none; }
.po-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font: .75rem var(--mono); color: var(--faint); }
.po-back { color: var(--dim); }
.po-back:hover { color: var(--fg); }
.po-title { margin-top: 1rem; font: 400 clamp(2.2rem, 5vw, 3.2rem)/1.08 var(--head); letter-spacing: -.01em; color: var(--navy); }
.po-sum { margin-top: 1rem; font: italic 400 1.3rem/1.45 var(--head); color: var(--dim); }
.po-head::after { --img: url(/assets/blog-art/heures/bar-divider.svg); width: min(440px, 100%); aspect-ratio: 560 / 60; margin: 1.8rem auto 0; }
.po-hero { max-width: var(--wide); margin: 2.5rem auto 0; }
.po-hero img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; box-shadow: 0 0 0 3px #dba424, 0 0 0 4px var(--navy), 0 24px 48px -28px rgba(20,18,30,.45); }

.po-body { margin-top: 2.5rem; font-size: var(--size); line-height: var(--lh); overflow-wrap: break-word; }
.po-body > * + * { margin-top: 1.15em; }
/* Paragraphs and lists inside a quote or a list item keep apart too. */
.po-body :is(blockquote, li) > * + * { margin-top: .8em; }
/* Each section heading under a zodiac roundel, the signs running in order through the year. */
.po-body h2 { margin-top: 2.2em; font: 500 1.5em/1.2 var(--head); letter-spacing: -.01em; color: var(--navy); }
.po-body h2::before { --img: url(/assets/blog-art/heures/sign-aries.svg); width: min(240px, 100%); aspect-ratio: 240 / 48; margin: 0 auto 1em; }
.po-body h2:nth-of-type(12n+2)::before { --img: url(/assets/blog-art/heures/sign-taurus.svg); }
.po-body h2:nth-of-type(12n+3)::before { --img: url(/assets/blog-art/heures/sign-gemini.svg); }
.po-body h2:nth-of-type(12n+4)::before { --img: url(/assets/blog-art/heures/sign-cancer.svg); }
.po-body h2:nth-of-type(12n+5)::before { --img: url(/assets/blog-art/heures/sign-leo.svg); }
.po-body h2:nth-of-type(12n+6)::before { --img: url(/assets/blog-art/heures/sign-virgo.svg); }
.po-body h2:nth-of-type(12n+7)::before { --img: url(/assets/blog-art/heures/sign-libra.svg); }
.po-body h2:nth-of-type(12n+8)::before { --img: url(/assets/blog-art/heures/sign-scorpio.svg); }
.po-body h2:nth-of-type(12n+9)::before { --img: url(/assets/blog-art/heures/sign-sagittarius.svg); }
.po-body h2:nth-of-type(12n+10)::before { --img: url(/assets/blog-art/heures/sign-capricorn.svg); }
.po-body h2:nth-of-type(12n+11)::before { --img: url(/assets/blog-art/heures/sign-aquarius.svg); }
.po-body h2:nth-of-type(12n)::before { --img: url(/assets/blog-art/heures/sign-pisces.svg); }
.po-body h3 { margin-top: 1.8em; font: 500 1.2em/1.25 var(--head); color: var(--navy); }
/* The illuminated initial: a gold letter on a blue ground with white filigree, in a gold fillet. */
.po-body > p:first-of-type::first-letter { float: left; margin: .1em .2em 0 0; padding: .14em .17em .13em; font: 500 3.15em/.8 var(--head);
  color: #f2c445; text-shadow: 0 1px 0 #8a5f00;
  background: url(/assets/blog-art/heures/initial-ground.svg) center / cover, var(--navy); border: 3px solid #dba424; }
.po-body :is(ul, ol) { padding-left: 1.3em; }
.po-body ul { list-style: none; }
.po-body ul > li { position: relative; }
.po-body ul > li::before { --m: url(/assets/blog-art/heures/ivy-leaf.svg); position: absolute; left: -1.3em; top: .45em; width: .74em; aspect-ratio: 1; }
.po-body li + li { margin-top: .3em; }
.po-body strong { font-weight: 600; }
.po-body a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.po-body code { font-family: var(--mono); font-size: .8em; padding: .12em .38em; border-radius: 4px; background: var(--code-bg); color: var(--code-fg); }
/* A *** line in a post's Markdown: the zodiac band laid straight. */
.po-body hr { --img: url(/assets/blog-art/heures/zodiac-band.svg); width: min(520px, 100%); aspect-ratio: 560 / 46; height: auto; margin: 2.4em auto; border: 0; }
/* A quotation hangs from a gold-leaf bar with an ivy sprig at its head. */
.po-body blockquote { position: relative; margin-top: 2.2em; padding-left: 1.6em; border-left: 4px solid #dba424; border-image: var(--gilt) 1; font-style: italic; color: var(--dim); }
.po-body blockquote::before { --img: url(/assets/blog-art/heures/quote-finial.svg); position: absolute; left: calc(-2px - 1.1em); top: -1.55em; width: 2.2em; aspect-ratio: 60 / 50; }
.po-body .table-scroll { overflow-x: auto; }
.po-body table { width: 100%; border-collapse: collapse; font-size: .85em; line-height: 1.5; }
.po-body :is(th, td) { padding: .6em .9em .6em 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.po-body th { font: 500 .78em var(--mono); color: var(--faint); }
.po-body > figure { max-width: var(--wide); }
.po-body figure { margin-top: 2.4em; margin-bottom: 2.4em; }
.po-body figure img { width: 100%; border-radius: var(--fig-r); box-shadow: var(--fig-shadow); }
.po-body figcaption { max-width: var(--measure); margin: .8rem auto 0; font-size: .8em; line-height: 1.5; color: var(--faint); }
.po-body::after { --img: url(/assets/blog-art/heures/lunette-small.svg); width: 170px; aspect-ratio: 240 / 125; margin: 3.5rem auto 0; }
.po-end { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2.5rem; padding-top: 2.5rem; }
.po-end img { width: 48px; height: 48px; }
.po-end p { flex: 1 1 14rem; font-size: 1.05rem; color: var(--dim); }
@media (max-width: 40rem) {
  .po { padding-top: 6rem; }
  .po::before, .po-head::before { width: 72px; top: 11px; }
  .po::before { left: 11px; }
  .po-head::before { right: 11px; }
  .po > .bloom-watch { top: 11px; height: 72px; }
  .po-body hr { width: 100%; }
}

/* ---------- code: ink on the leaf. A deeper vellum strip between gilt hairlines, inked in the
   page's own colours: navy for the language's words, madder for strings, green for numbers, azure
   for what the author names, gold for decorators. A little wider than the text, so an 80-column
   line fits; ligatures off, so -> and <= read as typed. */
.po-body > pre { max-width: min(50rem, 100%); }
.po-body pre { position: relative; padding: 1.6rem 1.4rem 1.2rem; overflow-x: auto; font-size: .8em; line-height: 1.65; color: #2a2620; font-variant-ligatures: none;
  background: #efe5cc; border-block: 1px solid rgba(185,131,20,.5); scrollbar-color: #c9a85c transparent; }
.po-body pre::before { content: attr(data-lang); position: absolute; top: .45rem; right: .9rem;
  font: italic 400 .8rem/1 var(--head); color: #b98314; letter-spacing: .02em; }
.po-body pre code { padding: 0; background: none; font-size: inherit; color: inherit; }
.po-body pre ::selection { background: rgba(219,164,36,.3); }
.po-body pre :is([class^="hl-p"], [class^="hl-o"]) { color: #7a7064; }
.po-body pre :is([class^="hl-k"], .hl-ow) { color: #16204a; font-weight: 600; }
.po-body pre .hl-kt { color: #2d4fb8; font-weight: 400; }
.po-body pre [class^="hl-s"] { color: #9b3324; }
.po-body pre :is(.hl-si, .hl-se) { color: #a8780f; }
.po-body pre .hl-sd { font-style: italic; color: #8a5a4f; }
.po-body pre [class^="hl-m"] { color: #2f6b4f; }
.po-body pre :is(.hl-nf, .hl-fm, .hl-nc, .hl-nv, .hl-vi) { color: #2d4fb8; }
.po-body pre :is(.hl-nb, .hl-bp) { color: #7a5a12; }
.po-body pre :is(.hl-nd, .hl-nn) { color: #a8780f; }
.po-body pre [class^="hl-c"] { color: #8a7f70; }
.po-body pre .hl-err { color: inherit; background: none; }
@media (max-width: 40rem) { .po-body pre { padding: 1.5rem 1rem 1rem; } }

/* ---------- charts: inked on the page between the same gilt hairlines, in navy, madder, green and
   gold. A star at every point of a line, engraved hatching beneath an area; flat bars, each crowned
   with a gold star. Figures in Fraunces' old-style numerals. They come drawn wide and narrow, and
   the figure shows the one its width suits. Once a chart is in view (blog.js sets data-play) lines
   draw themselves, the stars open as the line reaches them and the last one glints; bars rise. */
.po-body > .chart { max-width: min(50rem, 100%); margin-block: 2.6rem; container-type: inline-size; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--head); font-variant-numeric: oldstyle-nums; }
.chart .chart-narrow { display: none; max-width: 28rem; margin-inline: auto; }
.chart-plate { padding: 1.2rem 0 .8rem; color: #2a2620; border-block: 1px solid rgba(185,131,20,.5); }
.chart-title { margin: 0 0 .7rem; font: 400 1.35rem/1.2 var(--head); color: var(--navy); text-align: center; font-variant-numeric: oldstyle-nums; }
/* The key is a list, so it shrugs off the leaf's bullets; its swatch is the chart's own star. */
.po-body .chart .chart-key { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.3rem; margin: 0 0 .6rem; padding: 0; list-style: none;
  font: italic 400 .95rem/1.2 var(--head); color: #2a2620; }
.po-body .chart .chart-key > li { display: flex; align-items: center; gap: .45em; margin: 0; position: static; }
.po-body .chart .chart-key > li::before { content: ''; position: static; width: .8em; aspect-ratio: 1; -webkit-mask: none; mask: none; background: var(--ink);
  clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%); }
/* Wide lines name themselves at their ends. */
.po-body :is(.chart-line, .chart-area) .chart-key { display: none; }
.chart figcaption { text-align: center; font-style: italic; }
@container (max-width: 44rem) {
  .chart .chart-wide { display: none; }
  .chart .chart-narrow { display: block; }
  .po-body :is(.chart-line, .chart-area) .chart-key { display: flex; }
}
.chart .tick { fill: #8a7f70; font-style: italic; }
.chart .grid { stroke: #16204a; stroke-opacity: .28; }
.chart :is(.base, .axis) { stroke: #b98314; }
.chart .halo { stroke: #f7f0de; }
.chart .bar { fill: currentColor; }
.chart .finial { fill: #dba424; }
.chart :is(.end, .value) { font-style: italic; }
.chart .note { color: #b98314; }
/* The first ink a step lighter than the page's navy, so a mass of bars doesn't go black. */
.chart .ink-1 { --ink: #2c3d80; color: #2c3d80; }
.chart .ink-2 { --ink: #a3352a; color: #a3352a; }
.chart .ink-3 { --ink: #2f6b4f; color: #2f6b4f; }
.chart .ink-4 { --ink: #b98314; color: #b98314; }
.chart .star { transform-box: fill-box; transform-origin: center; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.chart .stars g:hover .star { transform: scale(1.8) rotate(45deg); }
.chart .bar { transform-box: fill-box; transform-origin: 50% 100%; }
.chart .bar.low { transform-origin: 50% 0; }
.chart-hbar .bar { transform-origin: 0 50%; }
.chart-hbar .bar.low { transform-origin: 100% 50%; }
.chart[data-wait]:not([data-play]) :is(.line, .halo, .area, .star, .bar, .value, .end, .note) { visibility: hidden; }
.chart[data-play] { --draw: 1.8s; }
/* Declared where --s is set, so each series keeps its own lead. */
.chart[data-play] :is(.series, .end, .note) { --lead: calc(.2s + var(--s, 0) * .3s); }
.chart[data-play] :is(.line, .halo) { animation: chart-draw var(--draw) cubic-bezier(.45, .05, .35, 1) var(--lead) backwards; }
.chart[data-play] .area { animation: chart-wipe var(--draw) cubic-bezier(.45, .05, .35, 1) var(--lead) backwards; }
.chart[data-play] .star { animation: chart-pop .5s cubic-bezier(.3, 1.6, .5, 1) calc(var(--lead) + var(--t) * var(--draw)) backwards; }
.chart[data-play] .stars g:last-child .star {
  animation: chart-pop .5s cubic-bezier(.3, 1.6, .5, 1) calc(var(--lead) + var(--draw)) backwards,
    chart-glint 1.1s ease-in-out calc(var(--lead) + var(--draw) + .5s); }
.chart[data-play] :is(.end, .note) { animation: chart-fade .6s ease-out calc(var(--lead) + var(--draw)) backwards; }
.chart[data-play] .bar { animation: chart-rise .9s cubic-bezier(.3, 1.3, .5, 1) calc(.2s + var(--t) * .9s) backwards; }
.chart-hbar[data-play] .bar { animation-name: chart-grow; }
.chart[data-play] .finial { animation: chart-pop .5s cubic-bezier(.3, 1.6, .5, 1) calc(.75s + var(--t) * .9s) backwards; }
.chart[data-play] .value { animation: chart-fade .5s ease-out calc(.8s + var(--t) * .9s) backwards; }
@keyframes chart-draw { from { stroke-dasharray: 1 2; stroke-dashoffset: 1.02; } to { stroke-dasharray: 1 2; stroke-dashoffset: 0; } }
@keyframes chart-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes chart-pop { from { transform: scale(0) rotate(-90deg); opacity: 0; } to { transform: scale(1) rotate(0deg); opacity: 1; } }
@keyframes chart-glint { 0%, 100% { transform: scale(1) rotate(0deg); fill: currentColor; }
  40% { transform: scale(2.2) rotate(45deg); fill: #dba424; } }
@keyframes chart-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes chart-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes chart-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }