/* Hallmark · shape: a white studio the lifters stand in, one idea a screen · genre: modern-minimal · theme: custom · job: buy · idea: "the page is the renders' own studio white, so every lifter stands on the page itself and is the only colour on it" · vibe: "Milo's sky, alive, product first, quiet type"
 * paper: oklch(97.5% 0.002 197) · accent: oklch(44% 0.21 269) · display: Rethink Sans (the Setz app's face, by request) · body: Rethink Sans · hero: the head under Milo's drifting sky, over a wall of 36 looping lifts drifting in columns · nav: wordmark, three links and one pill · footer: one row of links over a legal line · imagery: the product, the user's own renders (14 loops, two turntables, two cutouts) and two skeleton diagrams from its animation data · signature: a living wall of the library, every tile a looping lift
 * axes: light/grotesk-sans/chromatic-blue · posture: committed (the app's sky and glow carry the hero, the data band and the footer) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V5 · weakest: S, a pale page in a neutral grotesk could be anyone's; the ground and the one signal are sampled from the renders, and every screen holds a lift */
/* Hallmark · hero-review: fix · 5 findings · 5 resolved · finish-review: subagent · 8 findings · 7 resolved 1 partial · gap: the licence terms and prices await the owner */
/* Hallmark · waive 29 · the drifting blooms are the Setz app's own Milo sky and glow (MiloSky.swift, MiloGlowPanel.swift) · the founder asked for the app's blue-green gradient and a page that feels alive */
/* Hallmark · waive 81 · the radial blooms inside .sky and .glow__light are aria-hidden decoration behind the head and the data band · they are the app's sky, not picture frames; every picture on the page is a looping lift */
/* Hallmark · dismissed 3 · the three columns are the three packs for sale, each under the same lift as that pack delivers it */
/* Hallmark · dismissed 25 · the lines under the three feature pictures are one-sentence captions in a third-width column */
/* Hallmark · dismissed 58 · library.html is the catalogue itself: its words are the 363 exercise names, shown as a grid */
/* Hallmark · dismissed 77 · library.html is one index under its head, a catalogue and not a landing page */
/* Hallmark · answered F5 · the rounds are controls with a 44px target (pause every loop, step the rail), not ornaments */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Rethink Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/RethinkSans-Regular.woff") format("woff"); }
@font-face { font-family: "Rethink Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/RethinkSans-Medium.woff") format("woff"); }
@font-face { font-family: "Rethink Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/RethinkSans-SemiBold.woff") format("woff"); }

h1, h2, h3 { font-weight: var(--display-weight); letter-spacing: var(--tracking-display); line-height: 1.05; }
h1 { font-size: var(--text-display); line-height: 1; }
h2 { max-width: 22ch; font-size: var(--text-section); }
h3 { max-width: 30ch; font-size: var(--text-title); letter-spacing: -0.02em; line-height: 1.15; }
.lead { max-width: 34ch; color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.4; }

/* A clip has the page's own ground, so it takes no frame: its field is lifted to white and multiplied
   into the page, and its edges fade out, which leaves the lifter and the floor shadow standing on the page. */
main { background: var(--color-paper); }
.float { filter: brightness(1.05); mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(to right, transparent, var(--color-ink) 8%, var(--color-ink) 92%, transparent), linear-gradient(to bottom, transparent, var(--color-ink) 8%, var(--color-ink) 92%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, var(--color-ink) 8%, var(--color-ink) 92%, transparent), linear-gradient(to bottom, transparent, var(--color-ink) 8%, var(--color-ink) 92%, transparent); mask-composite: intersect; }

/* ---------- controls ---------- */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--s { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: color-mix(in oklab, var(--color-accent) 86%, var(--color-ink)); }
.glow .btn--quiet:hover { background: color-mix(in oklab, var(--color-on-glow) 14%, transparent); }
.btn--quiet { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.btn--quiet:hover { background: var(--color-paper-2); }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color var(--dur-short) linear; } }

.iconbtn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--color-plate); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-rule); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.iconbtn:hover { background: var(--color-paper-2); }
.iconbtn:active { background: var(--color-paper-3); }
.iconbtn:disabled { opacity: 0.55; cursor: not-allowed; }
.iconbtn .i-play, .iconbtn[aria-pressed="true"] .i-pause { display: none; }
.iconbtn[aria-pressed="true"] .i-play { display: block; }
html:not(.js) .iconbtn { display: none; }
.motion { position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: var(--z-sticky); }

.textbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--color-ink); font: inherit; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; cursor: pointer; }
.textbtn:hover { color: var(--color-accent); }
.textbtn:active { color: var(--color-ink-2); }
.textbtn:disabled { opacity: 0.55; cursor: not-allowed; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* ---------- nav: frosted, so Milo's sky shows through it at the top ---------- */

.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: color-mix(in oklab, var(--color-paper) 72%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); box-shadow: 0 var(--rule-hair) 0 color-mix(in oklab, var(--color-ink) 7%, transparent); }
.nav__in { display: flex; align-items: center; gap: var(--space-xl); min-height: var(--nav-h); }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.wordmark img { width: auto; height: 30px; }
.wordmark--l img { height: 40px; }
.nav__links { display: flex; gap: var(--space-xl); margin-left: auto; }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); font-size: var(--text-sm); white-space: nowrap; text-decoration: none; }
.nav__links a:hover { color: var(--color-accent); }
@media (max-width: 40rem) {
  .nav__in { gap: var(--space-md); }
  .nav__links { gap: var(--space-md); }
  .nav__links a:nth-child(n + 2) { display: none; }
}

/* ---------- Milo's sky: blue, cyan and mint, drifting, fading down into the page ---------- */

.sky { position: absolute; inset: 0 0 auto; z-index: 0; height: 100%; overflow: hidden; pointer-events: none; background: linear-gradient(100deg, var(--color-sky-top), var(--color-sky-cyan) 52%, var(--color-sky-mint)); }
.sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 18%, color-mix(in oklab, var(--color-paper) 70%, transparent) 46%, var(--color-paper) 74%); }
.sky i { position: absolute; display: block; width: 62vmax; aspect-ratio: 1; border-radius: 50%; will-change: transform; }
.sky__a { left: -14vmax; top: -26vmax; background: radial-gradient(closest-side, var(--color-sky-1), transparent); animation: sky-a 19s var(--ease-in-out) infinite alternate; }
.sky__b { left: 30%; top: -30vmax; background: radial-gradient(closest-side, var(--color-sky-top), transparent); animation: sky-b 23s var(--ease-in-out) infinite alternate; }
.sky__c { right: -18vmax; top: -22vmax; background: radial-gradient(closest-side, var(--color-sky-mint), transparent); animation: sky-c 29s var(--ease-in-out) infinite alternate; }
.sky__d { left: 12%; top: -8vmax; width: 40vmax; background: radial-gradient(closest-side, color-mix(in oklab, var(--color-sky-cyan) 70%, transparent), transparent); animation: sky-d 17s var(--ease-in-out) infinite alternate; }
@keyframes sky-a { to { transform: translate3d(12vmax, 6vmax, 0) scale(1.15); } }
@keyframes sky-b { to { transform: translate3d(-14vmax, 9vmax, 0) scale(0.9); } }
@keyframes sky-c { to { transform: translate3d(-10vmax, 7vmax, 0) scale(1.2); } }
@keyframes sky-d { to { transform: translate3d(20vmax, -4vmax, 0) scale(1.1); } }
.sky--rise { inset: auto 0 0; transform: scaleY(-1); }

/* ---------- hero: the head under the sky, over a wall of lifts ---------- */

.hero { position: relative; isolation: isolate; margin-top: calc(-1 * var(--nav-h)); padding-top: calc(var(--nav-h) + clamp(var(--space-xl), 7svh, var(--space-3xl))); overflow: hidden; }
.hero__in { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(var(--space-md), 2.6svh, var(--space-lg)); text-align: center; }
.hero .lead { max-width: 62ch; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-top: var(--space-xs); }

/* The wall: six columns of looping lifts drifting past, up and down in turn, slower at the edges. */
.wall { --tile-gap: var(--space-md); position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--tile-gap); max-width: 1680px; height: clamp(24rem, calc(100svh - 26rem), 40rem); margin: clamp(var(--space-xl), 6svh, var(--space-2xl)) auto 0; padding-inline: var(--space-md); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, var(--color-ink) 14%, var(--color-ink) 78%, transparent); mask-image: linear-gradient(to bottom, transparent, var(--color-ink) 14%, var(--color-ink) 78%, transparent); }
.wall__col { --dur: calc(70s + var(--i) * 9s); display: grid; align-content: start; will-change: transform; animation: wall-up var(--dur) linear infinite; }
.wall__col:nth-child(even) { animation-name: wall-down; }
.wall__col:nth-child(3n + 2) { margin-top: calc(-1 * var(--space-3xl)); }
.wall__set { display: grid; gap: var(--tile-gap); padding-bottom: var(--tile-gap); }
@keyframes wall-up { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
@keyframes wall-down { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } }
.wall:hover .wall__col { animation-play-state: paused; }
.wtile { display: block; aspect-ratio: 1; border-radius: var(--radius-tile); overflow: hidden; background: var(--color-paper-2); transition: transform var(--dur-short) var(--ease-out); }
.wtile:hover { transform: translateY(-3px); }
.wtile video { width: 100%; height: 100%; object-fit: cover; }
html.is-held .wall__col, html.is-held .sky i, html.is-held .glow__light i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .wall__col, .sky i, .glow__light i { animation: none; }
  .wtile { transition: none; }
}
@media (max-width: 60rem) {
  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wall__col:nth-child(n + 5) { display: none; }
}
@media (max-width: 40rem) {
  .hero { padding-top: calc(var(--nav-h) + var(--space-xl)); }
  .wall { --tile-gap: var(--space-xs); grid-template-columns: repeat(3, minmax(0, 1fr)); height: 24rem; padding-inline: var(--space-xs); }
  .wall__col:nth-child(n + 4) { display: none; }
  .actions { width: min(100%, 18rem); }
  .actions .btn { flex: 1 1 100%; }
}

/* ---------- the range: three lifts standing on the page ---------- */

.range { padding-block: var(--section-gap-s) var(--section-gap); }
.lineup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-xl); }
.lineup figure { margin: 0; }
.lineup video { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.lineup figcaption { margin-top: var(--space-xs); text-align: center; font-weight: 500; }
@media (max-width: 40rem) {
  .lineup { grid-template-columns: minmax(0, 1fr); }
  .lineup figure:not(:nth-child(2)) { display: none; }
}

/* ---------- three things each lift comes with ---------- */

.more { padding-bottom: var(--section-gap-l); }
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); margin-top: var(--space-xl); }
.feat { display: grid; align-content: start; justify-items: start; gap: var(--space-xs); min-width: 0; }
.feat__media { position: relative; width: 100%; aspect-ratio: 1; margin-bottom: var(--space-xs); }
.feat__media video, .feat__media img { width: 100%; height: 100%; object-fit: cover; }
.feat p { max-width: 30ch; color: var(--color-muted); }
.turn, .spin { background-repeat: no-repeat; background-size: 800% 600%; }
.turn { touch-action: pan-y; cursor: ew-resize; }
.turn.is-ready img, .spin.is-ready img { visibility: hidden; }
.turn__ctl { width: min(100%, 14rem); }
.turn__ctl input { display: block; width: 100%; height: 44px; margin: 0; accent-color: var(--color-ink); cursor: ew-resize; }
.turn__ctl input:disabled { opacity: 0.55; cursor: not-allowed; }
.cut, .crop { border-radius: var(--radius-card); overflow: hidden; }
.cut { background: var(--color-night); }
.feat[data-bg="accent"] .cut { background: var(--color-accent); }
.feat[data-bg="plate"] .cut { background: var(--color-plate); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); }
.cut img { object-fit: contain; }
.crop { background: var(--color-paper-2); }
.crop img { transform: scale(2.3); transform-origin: 51% 67%; }
.swatches { display: flex; margin: 0 0 0 calc(-1 * var(--space-xs)); padding: 0; border: 0; }
.swatches input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatches label { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }
.swatch { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 1px var(--color-muted); }
.swatch--night { background: var(--color-night); }
.swatch--accent { background: var(--color-accent); }
.swatch--plate { background: var(--color-plate); }
.swatches label:hover .swatch { box-shadow: 0 0 0 2px var(--color-muted); }
.swatches input:checked + label .swatch { box-shadow: 0 0 0 2px var(--color-paper), 0 0 0 4px var(--color-ink); }
.swatches input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.swatches input:disabled + label { opacity: 0.55; cursor: not-allowed; }
html:not(.js) .turn__ctl, html:not(.js) .swatches { display: none; }
@media (max-width: 48rem) {
  .feats { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .feat__media { max-width: 24rem; }
}

/* ---------- the skeleton, drawn from the animation data ---------- */

.rig { position: absolute; inset: 0; width: 100%; height: 100%; }
.rig path, .skel path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rig__halo { stroke: var(--color-paper); stroke-width: 10; }
.rig__bone { stroke: var(--color-accent); stroke-width: 5; }
.rig__joint { stroke: var(--color-accent); stroke-width: 13; }
.facts { margin: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.facts > div { display: grid; gap: var(--space-3xs); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.facts dt { font-weight: 500; }
.facts dd { margin: 0; color: var(--color-muted); }

/* ---------- the packs: what each one is, over its price ---------- */

.packs { padding-bottom: var(--section-gap); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-lg); }
.plan { display: grid; grid-template-rows: auto auto auto 1fr auto; justify-items: start; gap: var(--space-md); min-width: 0; }
.plan__media { position: relative; width: 100%; aspect-ratio: 1; }
.plan__media video, .plan__media img { width: 100%; height: 100%; object-fit: cover; }
.plan__price { font: 600 var(--text-display-s)/1 var(--font-display); letter-spacing: -0.04em; }
.plan__list { width: 100%; margin: 0; padding: 0; list-style: none; border-bottom: var(--rule-hair) solid var(--color-rule); }
.plan__list li { padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.plan .btn { margin-top: var(--space-xs); }
@media (max-width: 60rem) {
  .plans { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .plan__media { max-width: 22rem; }
}

/* ---------- the data licence, in Milo's glow: the skeleton alone ---------- */

.glow { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section-gap-s); background: linear-gradient(180deg, var(--color-glow-sky), var(--color-glow-azure) 45%, var(--color-glow-deep)); color: var(--color-on-glow); }
.glow :focus-visible { outline-color: var(--color-on-glow); }
.glow .container { position: relative; z-index: 1; }
.glow__light { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.glow__light i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.glow__a { left: -10%; top: -55%; width: 70%; aspect-ratio: 1; background: radial-gradient(closest-side, color-mix(in oklab, var(--color-glow-mint) 70%, transparent), transparent); animation: glow-a 21s var(--ease-in-out) infinite alternate; }
.glow__b { left: 8%; bottom: -60%; width: 50%; aspect-ratio: 1; background: radial-gradient(closest-side, color-mix(in oklab, var(--color-glow-green) 45%, transparent), transparent); animation: glow-b 17s var(--ease-in-out) infinite alternate; }
.glow__c { right: -20%; top: -40%; width: 60%; aspect-ratio: 1; background: radial-gradient(closest-side, color-mix(in oklab, var(--color-glow-peri) 80%, transparent), transparent); animation: glow-c 26s var(--ease-in-out) infinite alternate; }
@keyframes glow-a { to { transform: translate3d(18%, 8%, 0) scale(1.1); } }
@keyframes glow-b { to { transform: translate3d(30%, -12%, 0) scale(1.2); } }
@keyframes glow-c { to { transform: translate3d(-12%, 10%, 0) scale(0.9); } }
.data { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; }
.skel { grid-column: 1 / span 7; width: 100%; height: auto; }
.skel__bone { stroke: var(--color-on-glow); stroke-width: 6; }
.skel__joint { stroke: var(--color-on-glow); stroke-width: 15; }
.data__body { grid-column: 9 / span 4; display: grid; justify-items: start; gap: var(--space-lg); }
.ruled { width: 100%; margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid color-mix(in oklab, var(--color-on-glow) 35%, transparent); }
.ruled li { padding-block: var(--space-md); border-bottom: var(--rule-hair) solid color-mix(in oklab, var(--color-on-glow) 35%, transparent); font-size: var(--text-lg); }
.data__terms { color: var(--color-on-glow); }
@media (max-width: 60rem) {
  .data { row-gap: var(--space-xl); }
  .skel, .data__body { grid-column: 1 / -1; }
}

/* ---------- the order ---------- */

.order { padding-block: var(--section-gap) var(--section-gap-s); }
.order__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.order__head { grid-column: 1 / span 5; display: grid; gap: var(--space-xl); }
.fill { padding: 0 0.25em; border: 1px dashed var(--color-muted); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.request { grid-column: 7 / span 6; display: grid; gap: var(--space-xs); }
.request legend, .request > label { padding: 0; margin-bottom: var(--space-2xs); font-size: var(--text-sm); font-weight: 500; }
.cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); min-width: 0; margin: 0 0 var(--space-lg); padding: 0; border: 0; }
.cells legend { grid-column: 1 / -1; }
.cells input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cells label { display: grid; align-content: center; gap: var(--space-3xs); min-height: 76px; padding: 0 var(--space-md); border-radius: var(--radius-input); background: var(--color-plate); box-shadow: inset 0 0 0 1px var(--color-rule); font-weight: 500; cursor: pointer; }
.cells label:hover { box-shadow: inset 0 0 0 1px var(--color-muted); }
.cell__sub { color: var(--color-muted); font-size: var(--text-sm); font-weight: 400; }
.cells input:checked + label { box-shadow: inset 0 0 0 2px var(--color-ink); }
.cells input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.cells input:disabled + label { opacity: 0.55; cursor: not-allowed; }
.request input[type="email"], .lib__search input { min-height: 52px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-plate); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -3px; }
.request input[type="email"]:focus-visible, .lib__search input:focus-visible { outline-color: var(--color-focus); }
.request input[type="email"][aria-invalid] { border-color: var(--color-error); }
.request input[type="email"]:disabled, .lib__search input:disabled { opacity: 0.55; cursor: not-allowed; }
.request__help { min-height: 1lh; color: var(--color-muted); font-size: var(--text-sm); }
.request .btn { justify-self: start; margin-top: var(--space-xs); }
@media (max-width: 60rem) {
  .order__in { row-gap: var(--space-2xl); }
  .order__head, .request { grid-column: 1 / -1; }
}

/* ---------- footer ---------- */

.footer { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--space-4xl) var(--space-xl); }
.footer .container { position: relative; z-index: 1; }
.footer .sky::after { background: linear-gradient(to bottom, transparent 10%, color-mix(in oklab, var(--color-paper) 60%, transparent) 40%, var(--color-paper) 78%); }
.footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); margin: 0; padding: 0; list-style: none; }
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); white-space: nowrap; text-decoration: none; }
.footer__links a:hover { color: var(--color-accent); }
.footer__legal { max-width: none; margin-top: var(--space-xl); color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- library page ---------- */

.libhead { padding-block: var(--space-3xl); }
.libhead__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.libhead h1 { grid-column: 1 / span 7; }
.libhead__side { grid-column: 9 / span 4; display: grid; justify-items: start; gap: var(--space-md); }
.libhead .actions { justify-content: flex-start; }
.lib { padding-bottom: var(--section-gap-s); }
.lib__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.lib__search { flex: 0 1 20rem; }
.lib__search input { width: 100%; border-radius: var(--radius-pill); padding-inline: var(--space-lg); }
.chips { display: flex; flex: 1 1 auto; gap: var(--space-xs); min-width: 0; margin: 0; padding: var(--space-2xs); border: 0; overflow-x: auto; scrollbar-width: none; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); background: var(--color-paper-2); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; cursor: pointer; }
.chips label:hover { background: var(--color-paper-3); }
.chips input:checked + label { background: var(--color-ink); color: var(--color-paper); }
.chips input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chips input:disabled + label { opacity: 0.55; cursor: not-allowed; }
.lib__count { color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; }
html:not(.js) .lib__tools { display: none; }
.items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.item { min-width: 0; }
.item__play { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--radius-tile); background: none; overflow: hidden; cursor: pointer; }
.item__play:active { opacity: 0.85; }
.item__play:disabled { opacity: 0.55; cursor: not-allowed; }
.item__play img, .item__play video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.item__play video { background: var(--color-paper); }
.item__name { margin-top: var(--space-2xs); font-weight: 500; line-height: 1.3; }
.item__meta { color: var(--color-muted); font-size: var(--text-sm); }
.lib__empty { padding-block: var(--space-3xl); font-size: var(--text-lead); }
@media (max-width: 80rem) { .items { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 60rem) {
  .libhead { padding-block: var(--space-2xl) var(--space-xl); }
  .libhead__in { row-gap: var(--space-md); }
  .libhead h1, .libhead__side { grid-column: 1 / -1; }
  .items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); }
  .lib__search { flex-basis: 100%; }
}
@media (max-width: 40rem) { .items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- insights (private): the analytics page ---------- */

.ins { --color-heat: var(--color-accent); }
.ins__filters { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-left: auto; }
.ins__filters select { min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-plate); color: var(--color-ink); font-size: var(--text-sm); cursor: pointer; }
.ins__filters select:hover { border-color: var(--color-muted); }
.ins__filters select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ins__filters select:disabled { opacity: 0.55; cursor: not-allowed; }
.ins__main { display: grid; gap: var(--space-2xl); padding-block: var(--space-2xl) var(--space-3xl); }
.ins__key { max-width: 26rem; }
.ins__key h1 { margin-bottom: var(--space-lg); }
.ins__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.ins__stats > div { padding-inline: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule); }
.ins__stats > div:first-child { padding-left: 0; border-left: 0; }
.ins__stats dt { color: var(--color-muted); font-size: var(--text-sm); }
.ins__stats dd { margin: var(--space-2xs) 0 0; font: 600 var(--text-3xl)/1 var(--font-display); letter-spacing: -0.03em; }
.ins__panel { display: grid; align-content: start; gap: var(--space-md); }
.ins__panel h2 { font-size: var(--text-title); }
.ins__note { max-width: 70ch; color: var(--color-muted); font-size: var(--text-sm); }
.ins__heat { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: var(--space-sm); }
.ins__reachbar { display: grid; grid-template-rows: repeat(10, 1fr); border-radius: var(--radius-pill); overflow: hidden; }
.ins__reachbar span { background: color-mix(in oklab, var(--color-accent) calc(var(--a) * 100%), var(--color-paper-3)); }
.ins__frame { position: relative; overflow: hidden; border-radius: var(--radius-tile); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); }
.ins__frame iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
.ins__frame canvas { position: absolute; left: 0; top: 0; z-index: 1; opacity: 0.85; mix-blend-mode: multiply; pointer-events: none; }
.ins__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-xl); }
.ins__bars { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.ins__bars li { display: grid; grid-template-columns: 10rem minmax(0, 1fr) 3.5rem; align-items: center; gap: var(--space-sm); min-height: 32px; font-size: var(--text-sm); }
.ins__bar-track { height: 12px; border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: hidden; }
.ins__bar { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--color-accent); transform-origin: 0 50%; }
.ins__bar-val { text-align: right; }
.ins__table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ins__table th { padding-block: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-ink); color: var(--color-muted); font-weight: 500; text-align: left; white-space: nowrap; }
.ins__table td { padding-block: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
.ins__table td:first-child { padding-right: var(--space-md); overflow-wrap: anywhere; }
.ins__table .num { text-align: right; }
.ins__tip { position: absolute; left: 0; top: 0; z-index: var(--z-tooltip); max-width: 22rem; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-input); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); pointer-events: none; }
@media (max-width: 60rem) {
  .ins__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-lg); }
  .ins__stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .ins__grid { grid-template-columns: minmax(0, 1fr); }
  .ins__bars li { grid-template-columns: 7rem minmax(0, 1fr) 3rem; }
}

[data-report]:not([hidden]) { display: grid; gap: var(--space-3xl); }