/* rill.love, the animated landing page (index.html only; the other pages keep styles.css).
   Three states, marked on <html> by home/boot.js:
     (no mark)   scripts off: plain sections, each on its own painting.
     .js         scripts on, Reduce Motion: the same plain sections on the painted canvas, with the tray.
     .js.live    the whole thing: scenes pinned and played to the scroll.
   The rules below are the plain page first; "Live" near the end adds the pinning and the motion. */

@font-face { font-family: "Inter"; src: url("assets/fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("assets/fonts/SourceSerif4-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("assets/fonts/SourceSerif4-RegularIt.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  color-scheme: light dark;
  --wall: #E6ECF2; --wall-top: #EEF2F7; --wall-deep: #DAE1E9;
  --on-wall: #0F1A2D; --on-wall-2: #37425A; --on-wall-3: #4A5569; --wall-line: rgba(15, 26, 45, .10);
  --paper: #FFFFFF; --paper-2: #F9FAFC; --paper-sunk: #EFF2F6;
  --ink: #111A27; --ink-2: #465163; --ink-3: #5A6577; --line: rgba(17, 26, 39, .10); --line-2: rgba(17, 26, 39, .16);
  --primary: #2A62A6; --primary-hover: #245793; --on-primary: #FFFFFF; --focus: #2A62A6; --brass: #B47F22; --done: #1F8A55; --needs: #A3381C;
  --plaque: #FFFFFF; --plaque-ink: #0F1B2C; --plaque-ink-3: #56637A; --plaque-edge: rgba(255, 255, 255, 0);
  --glass: rgba(238, 242, 247, .78); --glass-edge: rgba(255, 255, 255, .7);
  --shadow-card: 0 0 0 .5px rgba(15, 26, 45, .16), 0 2px 6px rgba(15, 26, 45, .05), 0 28px 64px -28px rgba(15, 26, 45, .30);
  --shadow-label: 0 1px 0 rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .10);
  --shadow-shot: 0 0 0 .5px rgba(9, 15, 26, .32), 0 2px 6px rgba(9, 15, 26, .12), 0 44px 90px -30px rgba(9, 15, 26, .6);
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", ui-sans-serif, "Helvetica Neue", Arial, sans-serif;
  --system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --wrap: 1200px; --gutter: 24px; --bar: 76px;
  --swift: cubic-bezier(.2, .65, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --wall: #0F1A2D; --wall-top: #13213A; --wall-deep: #0A1220;
    --on-wall: #DDE9F6; --on-wall-2: #A8B4C4; --on-wall-3: #97A3B4; --wall-line: rgba(221, 233, 246, .09);
    --paper: #15191F; --paper-2: #1C2128; --paper-sunk: #101318;
    --ink: #E6EBF1; --ink-2: #AAB3BF; --ink-3: #8C95A2; --line: rgba(230, 235, 241, .09); --line-2: rgba(230, 235, 241, .15);
    --primary: #9CC6EE; --primary-hover: #B4D5F3; --on-primary: #0D1726; --focus: #9CC6EE; --brass: #E8AC52; --done: #5FCB93; --needs: #F4A088;
    --plaque: #1E2A3D; --plaque-ink: #E4ECF7; --plaque-ink-3: #9AA8BA; --plaque-edge: rgba(221, 233, 246, .16);
    --glass: rgba(19, 33, 58, .74); --glass-edge: rgba(221, 233, 246, .16);
    --shadow-card: 0 0 0 .5px rgba(0, 0, 0, .6), inset 0 .5px 0 rgba(214, 232, 255, .08), 0 28px 64px -24px rgba(0, 0, 0, .55);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--wall); color: var(--on-wall);
  font: 400 17px/1.55 var(--sans); font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 600; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--primary) 22%, transparent); }
[hidden] { display: none !important; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: 12px; transform: translateY(-200%); opacity: 0; z-index: 60; padding: 8px 14px; border-radius: 8px; background: var(--paper); color: var(--ink); font-weight: 500; text-decoration: none; }
.skip:focus { transform: none; opacity: 1; }

/* The lockup keeps its colours everywhere: sea-glass leaf and dot, letters in the wall's ink. */
.lockup { display: block; width: auto; color: inherit; overflow: visible; }
.leaf-1 { stop-color: #8DC0B7; } .leaf-2 { stop-color: #4A9190; } .leaf-3 { stop-color: #2F6F73; }
.lockup-dot { fill: #5C9FB0; }
@media (prefers-color-scheme: dark) {
  .leaf-1 { stop-color: #A9D6CD; } .leaf-2 { stop-color: #6AAFAB; } .leaf-3 { stop-color: #45898B; }
  .lockup-dot { fill: #7FBCD0; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border: 0; border-radius: 10px; cursor: pointer;
  font: 500 15px/1 var(--sans); letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn--primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 1px 2px rgba(9, 15, 26, .22), 0 10px 24px -10px rgba(9, 15, 26, .55); }
.btn--primary:hover { background: var(--primary-hover); }
.btn:active { transform: translateY(1px); }
.btn--small { min-height: 34px; padding: 0 14px; border-radius: 9px; font-size: 14px; }
.btn--large { min-height: 52px; padding: 0 28px; border-radius: 13px; font-size: 17px; }
.btn--wide { width: 100%; }
.btn--glass {
  background: rgba(255, 255, 255, .17); color: #fff;
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .6), 0 10px 24px -12px rgba(9, 15, 26, .5);
}
.btn--glass:hover { background: rgba(255, 255, 255, .27); }
.btn--glass svg { width: 18px; height: 18px; margin-left: -4px; }

/* The paintings: one canvas behind the page. Without it, each section carries its own painting. */
.paint { position: fixed; inset: 0; z-index: 0; display: none; width: 100%; height: 100%; background: var(--wall); }
html.js .paint { display: block; }
html.nopaint .paint { display: none; }
main, .bar { position: relative; z-index: 1; }

html:not(.js) .stage::before, html.nopaint .stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: center / cover no-repeat; }
html:not(.js) .scene--hero .stage::before, html.nopaint .scene--hero .stage::before { background-image: url("assets/paint/hero-wide.webp"); filter: brightness(.74) saturate(1.13); }
html:not(.js) .scene--ask .stage::before, html.nopaint .scene--ask .stage::before { background-image: url("assets/paint/ask-wide.webp"); filter: brightness(1.36) saturate(1.06); }
html:not(.js) .scene--meanwhile .stage::before, html.nopaint .scene--meanwhile .stage::before { background-image: url("assets/paint/meanwhile-wide.webp"); filter: brightness(.9) saturate(1.29); }
html:not(.js) .scene--map .stage::before, html.nopaint .scene--map .stage::before { background-image: url("assets/paint/map-wide.webp"); filter: brightness(.78) saturate(1.38); }
html:not(.js) .scene--tabs .stage::before, html.nopaint .scene--tabs .stage::before { background-image: url("assets/paint/tabs-wide.webp"); filter: brightness(1.2) saturate(1.05); }
html:not(.js) .scene--history .stage::before, html.nopaint .scene--history .stage::before { background-image: url("assets/paint/history-wide.webp"); filter: brightness(.9) saturate(1.2); }
html:not(.js) .scene--talk .stage::before, html.nopaint .scene--talk .stage::before { background-image: url("assets/paint/talk-wide.webp"); filter: brightness(1.05) saturate(1.33); }
html:not(.js) .scene--free .stage::before, html.nopaint .scene--free .stage::before { background-image: url("assets/paint/free-wide.webp"); filter: brightness(1.3) saturate(.78); }

/* The bar: a pane of the wall's glass, floating over the paintings. */
.bar { position: fixed; z-index: 30; left: 0; right: 0; top: 12px; pointer-events: none; }
.bar__in {
  pointer-events: auto; display: flex; align-items: center; gap: 26px;
  width: min(1160px, 100% - 24px); height: 52px; margin-inline: auto; padding: 0 9px 0 18px; border-radius: 17px;
  background: var(--glass); color: var(--on-wall);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 0 0 .5px rgba(9, 15, 26, .18), inset 0 .5px 0 var(--glass-edge), 0 14px 34px -16px rgba(9, 15, 26, .45);
}
.bar__brand { display: inline-flex; align-items: center; margin-right: auto; border-radius: 8px; text-decoration: none; }
.bar__brand .lockup { height: 25px; margin-top: 1px; }
.bar__links { display: flex; gap: 26px; margin: 0 2px 0 0; padding: 0; list-style: none; }
.bar__links a { font-size: 14.5px; font-weight: 500; color: var(--on-wall-2); text-decoration: none; }
.bar__links a:hover { color: var(--on-wall); }
/* The three acts, in the middle of the bar. Under each, a line that fills as the act is scrolled through. */
.rail { position: absolute; left: 50%; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; transform: translateX(-50%); }
.rail li { display: flex; align-items: center; gap: 2px; }
.rail li + li::before { content: ""; width: 6px; height: 6px; margin: 0 2px 2px 0; border-top: 1.4px solid var(--on-wall-3); border-right: 1.4px solid var(--on-wall-3); opacity: .55; transform: rotate(45deg); }
.rail a { position: relative; display: block; padding: 7px 12px 10px; font-size: 14.5px; font-weight: 500; color: var(--on-wall-3); text-decoration: none; white-space: nowrap; transition: color .3s ease; }
.rail a:hover, .rail a.is-on, .rail a.is-past { color: var(--on-wall); }
.rail a::before, .rail a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 1px; }
.rail a::before { background: color-mix(in srgb, var(--on-wall) 13%, transparent); }
.rail a::after { background: var(--primary); transform: scaleX(var(--fill, 0)); transform-origin: 0 50%; }
html:not(.js) .rail a::before, html:not(.js) .rail a::after { display: none; }

/* Scenes */
.scene { position: relative; }
.stage { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-height: 100vh; min-height: 100svh; padding: calc(var(--bar) + 36px) 0 84px; overflow: hidden; overflow: clip; }
.lay { position: relative; min-width: 0; width: min(1560px, 100% - 2 * clamp(var(--gutter), 5vw, 110px)); margin-inline: auto; }
.lay--side { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.lay--stack { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lay__vis { position: relative; min-width: 0; }

/* Words on a painting are white on the darker ones and ink on the lighter ones; on the wall they are the wall's. */
.tone-light { --fg: #FFFFFF; --fg-2: rgba(255, 255, 255, .9); --veil-c: 9, 15, 26; color: var(--fg); }
.tone-ink { --fg: #0F1A2D; --fg-2: rgba(15, 26, 45, .84); --veil-c: 255, 255, 255; color: var(--fg); }
.tone-wall { --fg: var(--on-wall); --fg-2: var(--on-wall-2); color: var(--fg); }

/* The shade behind a headline: soft, and gone well before the section's edges, where the paintings meet. */
.veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse var(--veil-w, 58%) var(--veil-h, 74%) at var(--veil-x, 16%) var(--veil-y, 52%),
    rgba(var(--veil-c), var(--veil, .4)) 0%, rgba(var(--veil-c), calc(var(--veil, .4) * .6)) 42%, rgba(var(--veil-c), 0) 76%);
}
.scene--hero { --veil: .5; --veil-x: 50%; --veil-y: 30%; --veil-w: 72%; --veil-h: 50%; }
.scene--ask { --veil: .42; --veil-x: 50%; --veil-y: 24%; --veil-w: 70%; --veil-h: 40%; }
.scene--meanwhile { --veil: .46; }
.scene--map { --veil: .5; }
.scene--tabs { --veil: .6; }
.scene--history { --veil: .5; }
.scene--talk { --veil: .64; }
.scene--free { --veil: .34; --veil-x: 26%; --veil-w: 66%; }
.scene--result { --veil: .5; --veil-x: 50%; --veil-y: 16%; --veil-w: 74%; --veil-h: 34%; }
.anchor { position: absolute; top: 0; }

.hl { font: 600 clamp(32px, 3.9vw, 74px)/1.07 var(--serif); letter-spacing: -.022em; text-wrap: balance; }
.hl i { font-weight: 400; font-style: italic; letter-spacing: -.012em; }
.hl--center { text-align: center; }
.tone-light .hl, .tone-light .free__word { text-shadow: 0 2px 34px rgba(9, 15, 26, .4), 0 1px 2px rgba(9, 15, 26, .22); }
.tone-ink .hl { text-shadow: 0 1px 26px rgba(255, 255, 255, .55); }
.hl--parts .part { display: block; }
.hl--parts .part + .part { margin-top: .34em; }
.lay--stack .hl { max-width: 19em; }
.lay--result .hl { max-width: none; }

/* The thread from one scene to the next: a few words above the headline. */
.kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font: italic 400 clamp(17px, 1.5vw, 23px)/1.3 var(--serif); color: var(--fg-2); }
.kicker::before, .lay--stack .kicker::after { content: ""; flex: none; width: 30px; height: 1.5px; border-radius: 1px; background: currentColor; opacity: .55; }
.tone-light .kicker { text-shadow: 0 1px 16px rgba(9, 15, 26, .45); }
html:not(.js) .aside--demo { display: none; }
.aside { margin-top: 24px; max-width: 28em; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.5; color: var(--fg-2); text-wrap: pretty; }
.fine { margin-top: 14px; font-size: 13.5px; color: var(--fg-2); opacity: .86; }
.fine--center { text-align: center; }
.tag { display: inline-block; margin-bottom: 20px; padding: 4px 13px; border-radius: 999px; background: rgba(15, 26, 45, .88); color: #fff; font: 500 13px/1.6 var(--sans); letter-spacing: .01em; }

/* A capture, framed as a piece of the browser. */
.shot { position: relative; margin: 0; overflow: hidden; border-radius: 14px; background: #F9FBFC; box-shadow: var(--shadow-shot); }
.shot > img, .shot > picture > img { width: 100%; }

/* 1. The opening */
.scene--hero .stage { display: block; padding-bottom: 0; text-align: center; }
.hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: clamp(8px, 4vh, 56px) var(--gutter) 0; }
.hero__copy .hl { font-size: clamp(38px, 5.3vw, 94px); line-height: 1.02; letter-spacing: -.028em; max-width: 13.5em; }
.hero__sub { margin-top: 22px; font-size: clamp(17px, 1.5vw, 21px); color: var(--fg-2); text-shadow: 0 1px 16px rgba(9, 15, 26, .45); }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.hero__meta { margin-top: 16px; font-size: 14px; color: var(--fg-2); text-shadow: 0 1px 12px rgba(9, 15, 26, .5); }
.hero__window { position: relative; margin: clamp(36px, 6vh, 64px) auto 0; padding: 0 4vw; }
.win { position: relative; width: min(1400px, 100%); margin-inline: auto; aspect-ratio: 2240 / 1435; border-radius: .9375% / 1.4634%; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .34), 0 4px 10px rgba(9, 15, 26, .16), 0 60px 120px -30px rgba(9, 15, 26, .7); }
.win img { width: 100%; height: 100%; border-radius: inherit; }
/* Notes on the window for whoever stops to look. A region shows its edge and its note when hovered or focused. */
.zones { position: absolute; inset: 0; }
.zone { position: absolute; left: calc(var(--x) / 1280 * 100%); top: calc(var(--y) / 820 * 100%); width: calc(var(--zw) / 1280 * 100%); height: calc(var(--zh) / 820 * 100%); }
.zone__hit { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: default; transition: box-shadow .2s ease; }
.zone:hover .zone__hit, .zone__hit:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(42, 98, 166, .8), 0 0 0 7px rgba(42, 98, 166, .16); }
.zone__note { position: absolute; z-index: 2; left: 50%; top: calc(100% + 10px); padding: 8px 14px; border-radius: 10px; background: #fff; color: #0F1A2D; font: 600 clamp(12px, 1.1vw, 15px)/1.3 var(--sans); white-space: nowrap; box-shadow: 0 0 0 .5px rgba(9, 15, 26, .2), 0 14px 30px -10px rgba(9, 15, 26, .6); opacity: 0; transform: translate(-50%, -4px); transition: opacity .2s ease, transform .3s var(--swift); pointer-events: none; }
.zone__note i { font: italic 400 1.05em var(--serif); }
.zone[data-side="above"] .zone__note { top: auto; bottom: calc(100% + 10px); transform: translate(-50%, 4px); }
.zone[data-align="start"] .zone__note { left: 0; transform: translate(0, -4px); }
.zone[data-align="end"] .zone__note { left: auto; right: 0; transform: translate(0, -4px); }
.zone[data-side="above"][data-align] .zone__note { transform: translate(0, 4px); }
.zone:hover .zone__note, .zone__hit:focus-visible + .zone__note { opacity: 1; transform: translate(-50%, 0); }
.zone[data-align]:hover .zone__note, .zone[data-align] .zone__hit:focus-visible + .zone__note { transform: none; }

/* 2. Tell your agent */
.beats { display: grid; gap: clamp(28px, 5vh, 56px); justify-items: center; }
.beat { display: flex; flex-direction: column; align-items: center; }
.strip { align-self: stretch; min-width: 0; max-width: 100%; margin-top: clamp(24px, 4.5vh, 48px); }
.strip__track { display: grid; gap: 36px; justify-items: center; }
.strip__card { width: min(1240px, 100%); margin: 0; }
.strip__card figcaption { margin-top: 16px; font-size: clamp(15px, 1.25vw, 18px); color: var(--fg-2); text-align: center; }
.strip__card figcaption b { font-weight: 600; color: var(--fg); }
.strip__fine { margin-top: clamp(14px, 2.4vh, 26px); font-size: 14.5px; text-align: center; }
.typing, .sendhot, .sent, .hint, .finding { display: none; }      /* what only the page with scripts shows */
html.js .typing, html.js .sendhot { display: block; }
html.js .sent { display: grid; }
html.js .hint { display: flex; }
/* The words in the capture, covered from where the typing has reached to where they end. */
.typing { position: absolute; top: 27%; height: 17%; left: calc(9.64% + var(--typed, 1) * 22.9%); right: 66.3%; background: #fff; }
.typing__caret { position: absolute; left: 0; top: 16%; bottom: 16%; width: max(1.5px, .16vw); border-radius: 1px; background: #D5872B; }
.typing--talk { top: 39.4%; height: 12.4%; left: calc(7.6% + var(--typed, 1) * 77.6%); right: 14.2%; }
.typing--talk .typing__caret { background: #2A62A6; }
.sendhot { position: absolute; left: 82.1%; top: 54.6%; width: 8.9%; height: 10.2%; padding: 0; border: 0; border-radius: 22% / 50%; background: transparent; cursor: pointer; }
.sendhot:hover { background: rgba(255, 255, 255, .14); }
.sent { position: absolute; left: 82.1%; top: 54.6%; width: 8.9%; height: 10.2%; place-items: center; border-radius: 22% / 50%; background: #1F8A55; color: #fff; font: 600 clamp(9px, 1.05vw, 14px)/1 var(--system); opacity: 0; transform: scale(.8); transition: opacity .25s ease, transform .4s var(--swift); pointer-events: none; }
.scene--ask.is-sent .shot--ask .sent, .strip__card.is-sent .sent { opacity: 1; transform: none; }
.scene--ask.is-sent .sendhot { pointer-events: none; }
.scene--ask.is-sent .typing { left: 9.64%; }
.strip__card .hint { align-items: center; justify-content: center; gap: 9px; min-height: 26px; margin-top: 16px; font-size: 15px; font-weight: 500; color: var(--fg-2); opacity: 0; transition: opacity .4s ease; }
.is-ready .hint, .is-sent .hint { opacity: 1; }
.hint__key { padding: 4px 12px; border: 0; border-radius: 8px; background: #2A62A6; color: #fff; font: 600 13px/1.5 var(--system); cursor: pointer; box-shadow: 0 2px 6px rgba(9, 15, 26, .25); }
.hint__key:hover { background: #245793; }
.scene--ask:not(.is-ready) .hint__key { visibility: hidden; }

/* 3. Meanwhile */
.vis--meanwhile .shot--bleed { border-radius: .9375% / 1.4634%; }
.clip { display: block; width: 100%; height: auto; }
.shot--inset { position: absolute; left: -3%; bottom: -9%; width: 40%; border-radius: 16px; box-shadow: 0 0 0 .5px rgba(9, 15, 26, .4), 0 0 0 5px rgba(255, 255, 255, .5), 0 30px 70px -18px rgba(9, 15, 26, .7); }
.shot--inset { aspect-ratio: 500 / 400; }
.keep { position: relative; }
/* One of the agents has a question. The corner of the window, at the size it was shot: the tab of the task on the
   web, and the bubble that comes out of it over the essay. Layers are placed over the capture in its own pixels
   (1300 by 800): --x, --y, --w, --h. Plain, it shows the question; what plays to the scroll is in the Live part. */
.asking { margin-top: clamp(56px, 10vw, 120px); }
.corner { --fw: 1300; --fh: 800; position: relative; aspect-ratio: 1300 / 800; overflow: hidden; border-radius: 14px; background: #E6E8EB; box-shadow: var(--shadow-shot); }
.corner__base { display: block; width: 100%; height: 100%; }
.at { position: absolute; left: calc(var(--x) / var(--fw) * 100%); top: calc(var(--y) / var(--fh) * 100%); width: calc(var(--w) / var(--fw) * 100%); height: calc(var(--h) / var(--fh) * 100%); }
.hot, .webhint { display: none; }
.pop { display: block; max-width: none; pointer-events: none; }
.pop--morning, .pop--afternoon { display: none; }
/* The line at the edge of a tab an agent has, drawn as the app draws it (Browser: TabTaskEdge) over the one in the
   capture, so that it can travel and change colour: brass and moving, the agent is at work; red-orange, it needs
   you; green, it is done. */
.tabline { background: #E6E8EB; pointer-events: none; }
.tabline i { position: absolute; left: 21.43%; top: 13.64%; width: 42.86%; height: 72.72%; overflow: hidden; border-radius: 999px; background: var(--edge, transparent); transition: background-color .3s ease; }
.tabline i::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%; border-radius: 999px; background: var(--run, transparent); }
[data-edge="work"] .tabline { --edge: rgba(152, 104, 14, .3); --run: #98680E; }
[data-edge="work"] .tabline i::after { animation: travel .85s ease-in-out infinite alternate; }
[data-edge="needs"] .tabline { --edge: #9C3118; }
[data-edge="done"] .tabline { --edge: #1E6346; }
@keyframes travel { to { transform: translateY(122.2%); } }
@media (prefers-reduced-motion: reduce) { [data-edge="work"] .tabline i::after { animation: none; transform: translateY(61%); } }
.beats--side { justify-items: start; }
.beats--side .beat { align-items: flex-start; }

/* 4. The map */
.shot--map { border-radius: 16px; }
.ping { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; pointer-events: none; }
.ping::before, .ping::after { content: ""; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #2E9B62; opacity: 0; }

/* 5 and 6. Tabs and history: the script builds the pile and the list (home/scenes.js). */
.chips, .rawlog, .sentmark, .cue { display: none; }
.vis--history { display: grid; justify-items: center; }
.shot--history { width: min(100%, 560px); }

/* 7. The answer, hung on the wall */
.scene--result .stage::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 58% 52% at 50% 58%, rgba(255, 255, 255, .5) 0%, transparent 72%); }
.lay--result .hl { display: grid; justify-items: center; }
.frame { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: clamp(20px, 3vw, 40px); align-items: end; width: min(1320px, 100%); margin-top: clamp(28px, 5vh, 56px); text-align: left; }
.frame__mat { position: relative; padding: clamp(12px, 2vw, 28px); background: #FFFFFF; border-radius: 2px; box-shadow: 0 0 0 clamp(5px, .6vw, 9px) var(--frame, #1A2333), 0 0 0 clamp(6px, .68vw, 10px) rgba(255, 255, 255, .12), 0 3px 8px clamp(5px, .6vw, 9px) rgba(9, 15, 26, .18), 0 46px 80px -22px rgba(9, 15, 26, .55); }
.frame__pic { position: relative; }
.frame__pic img { position: relative; z-index: 1; width: 100%; }
.frame__wait { display: none; }
.plaque { padding: 26px 28px 28px; border-radius: 12px; background: var(--plaque); color: var(--plaque-ink); box-shadow: var(--shadow-label), inset 0 .5px 0 var(--plaque-edge); }
.plaque h3 { font: 600 20px/1.25 var(--serif); letter-spacing: -.008em; }
.plaque p { margin-top: 10px; font-size: 16px; color: var(--plaque-ink-3); }
.plaque--label { display: grid; gap: 5px; padding: 16px 18px 17px; border-radius: 6px; font-size: 14px; line-height: 1.4; }
.plaque--label b { font: 600 18px/1.2 var(--serif); }
.plaque__line { font-family: var(--serif); font-size: 16px; color: var(--plaque-ink-3); }
.plaque__state { margin-top: 6px; padding-top: 9px; border-top: .5px solid var(--line-2); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--done); }
.scene--result:not(.is-done) .plaque__state { color: var(--plaque-ink-3); }
html:not(.js) .scene--result .stage::before, html.nopaint .scene--result .stage::before { background-image: url("assets/paint/result-wide.webp"); filter: brightness(1.2) saturate(1); }
html:not(.js) .scene--result .plaque__state { color: var(--done); }

/* With Reduce Motion the chart is simply there once the task is done. */
html.js:not(.live) .scene--result:not(.is-done) .frame__pic img { visibility: hidden; }

/* 8. Say it */
.vis--talk { display: grid; justify-items: start; }
.shot--talk { width: 100%; }
.say { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; margin: -30px 0 0 7%; }
.key { position: relative; flex: none; width: 84px; height: 84px; border-radius: 17px; background: linear-gradient(#FDFDFE, #E7EAF0); color: #2A3342; box-shadow: 0 0 0 .5px rgba(9, 15, 26, .34), 0 4px 0 #BFC6D1, 0 5px 0 rgba(9, 15, 26, .3), 0 22px 36px -12px rgba(9, 15, 26, .55); transition: transform .12s ease, box-shadow .12s ease; }
.key b { position: absolute; right: 12px; top: 10px; font: 500 17px/1 var(--system); }
.key svg { position: absolute; left: 11px; bottom: 11px; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.plate { display: inline-flex; align-items: center; gap: 11px; height: 46px; padding: 0 20px 0 16px; border-radius: 23px; background: rgba(20, 25, 34, .9); color: #fff; font: 500 15.5px/1 var(--system); box-shadow: 0 0 0 .5px rgba(255, 255, 255, .16) inset, 0 16px 34px -12px rgba(9, 15, 26, .6); }
.plate__bars { display: flex; align-items: center; gap: 3px; height: 20px; }
.plate__bars i { width: 3px; border-radius: 2px; background: #fff; }
.plate__bars i:nth-child(1) { height: 7px; } .plate__bars i:nth-child(2) { height: 15px; } .plate__bars i:nth-child(3) { height: 19px; } .plate__bars i:nth-child(4) { height: 11px; } .plate__bars i:nth-child(5) { height: 6px; }

/* 9. Free. */
.lay--free { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 6vw, 96px); align-items: center; }
.free__word { margin: -.15em 0 -.2em -.04em; padding: .15em .08em .2em 0; font: 600 clamp(120px, 22vw, 440px)/.86 var(--serif); letter-spacing: -.045em; }
.terms { margin: clamp(20px, 3vw, 40px) 0 0; padding: 0; list-style: none; font: 600 clamp(20px, 2.15vw, 31px)/1.32 var(--serif); letter-spacing: -.01em; text-shadow: 0 1px 22px rgba(9, 15, 26, .45); }
.terms i { font-weight: 400; }
.get {
  display: flex; flex-direction: column; align-items: center; width: min(344px, 100%); padding: 34px 28px 26px; border-radius: 26px; text-align: center;
  background: var(--glass); color: var(--on-wall);
  -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: 0 0 0 .5px rgba(9, 15, 26, .2), inset 0 .5px 0 var(--glass-edge), 0 50px 90px -30px rgba(9, 15, 26, .6);
}
.get__icon { width: 132px; height: 132px; margin-bottom: 10px; filter: drop-shadow(0 14px 22px rgba(9, 15, 26, .26)); }
.get__name { margin-bottom: 20px; font: 600 29px/1.1 var(--serif); letter-spacing: -.015em; }
.get__req { margin-top: 15px; font-size: 13.5px; color: var(--on-wall-2); }
.get__fine { margin-top: 10px; max-width: 31ch; font-size: 12.5px; line-height: 1.45; color: var(--on-wall-3); }

/* 10. The rest, on the wall */
.scene--details { padding: clamp(88px, 12vw, 168px) 0 0; }
html:not(.js) .scene--details, html.nopaint .scene--details { background: #4F7F93 url("assets/paint/close-wide.webp") center / cover fixed; }
.details { display: grid; gap: clamp(56px, 8vw, 112px); }
.details h2 { font: 600 clamp(32px, 4vw, 46px)/1.08 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.eyebrow { margin-bottom: 14px; font: italic 400 18px/1.3 var(--serif); color: var(--ink-3); }
.privacy .eyebrow { color: var(--fg-2); }
.privacy h2 { text-shadow: 0 2px 30px rgba(9, 15, 26, .45); }
.privacy .more { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5); text-underline-offset: 4px; }
.finale { display: flex; flex-direction: column; align-items: center; padding: clamp(110px, 17vw, 240px) 0 clamp(40px, 6vw, 80px); text-align: center; }
.finale__sub { max-width: 30em; margin: 0 auto 34px; font: italic 400 clamp(19px, 1.9vw, 28px)/1.35 var(--serif); color: var(--fg-2); text-shadow: 0 1px 20px rgba(9, 15, 26, .5); text-wrap: balance; }
.finale__line { margin: -.4em 0 calc(22px - .45em); padding: .4em .3em .45em; font: 600 clamp(36px, 5.6vw, 96px)/1.04 var(--serif); letter-spacing: -.028em; text-shadow: 0 2px 40px rgba(9, 15, 26, .5); text-wrap: balance; }
.finale__line i { font-weight: 400; }
.finale__line span, .finale__line i { white-space: nowrap; }
.finale__meta { margin-top: 16px; font-size: 14px; color: var(--fg-2); }
.panel { padding: clamp(28px, 5vw, 72px); border-radius: 24px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-card); }
.panel--start { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.steps { display: grid; gap: 22px; margin: 32px 0 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: start; }
.steps h3 { font: 600 17px/1.35 var(--sans); }
.steps p { margin-top: 3px; font-size: 16px; color: var(--ink-2); }
.num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 27%; background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%), #2F6F73; color: #FBF3E4; font: 600 18px/1 var(--serif); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .18); }
.plain { margin-top: 28px; padding-top: 20px; border-top: .5px solid var(--line); font-size: 15.5px; color: var(--ink-2); }
.also { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; overflow: hidden; border-radius: 16px; background: var(--line); list-style: none; box-shadow: 0 0 0 .5px var(--line-2); }
.also li { padding: 22px 22px 24px; background: var(--paper-2); }
.also h3 { font: 600 17px/1.3 var(--serif); }
.also p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.privacy h2 { max-width: 16em; }
.plaques { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; list-style: none; }
.privacy__more { margin-top: 26px; }
.more { font-weight: 500; color: var(--primary); text-decoration: none; }
.more:hover { text-decoration: underline; text-underline-offset: 3px; }
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 80px); }
.faq__list { border-top: .5px solid var(--line-2); }
.faq details { border-bottom: .5px solid var(--line-2); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 2px; cursor: pointer; list-style: none; font: 500 17px/1.4 var(--sans); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3); transform: translateY(-3px) rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.faq details p { max-width: 64ch; padding: 0 2px 20px; color: var(--ink-2); }

.foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 40px; align-items: center; padding: clamp(40px, 5vw, 64px) 0 48px; color: var(--fg-2); font-size: 14.5px; }
.foot__brand { display: flex; align-items: center; gap: 14px; color: var(--fg); }
.foot__brand .lockup { height: 30px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.foot__links a { color: var(--fg); font-weight: 500; text-decoration: none; }
.foot__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot__fine { grid-column: 1 / -1; padding-top: 24px; border-top: .5px solid rgba(255, 255, 255, .28); color: var(--fg-2); font-size: 13.5px; }

/* The page's own At work tray, in the corner. */
.tray {
  position: fixed; z-index: 28; left: 20px; bottom: 20px; width: min(304px, 100vw - 76px); padding: 9px 8px 8px; border-radius: 19px;
  background: var(--glass); color: var(--on-wall);
  -webkit-backdrop-filter: blur(28px) saturate(1.7); backdrop-filter: blur(28px) saturate(1.7);
  box-shadow: 0 0 0 .5px rgba(9, 15, 26, .24), inset 0 .5px 0 var(--glass-edge), 0 30px 64px -18px rgba(9, 15, 26, .6), 0 4px 14px rgba(9, 15, 26, .14);
  opacity: 0; transform: translate3d(0, 24px, 0) scale(.93); transform-origin: 0 100%; pointer-events: none;
  transition: opacity .4s ease, transform .6s cubic-bezier(.2, .9, .25, 1.18);
}
.tray.is-open { opacity: 1; transform: none; pointer-events: auto; }
.tray.is-open.is-away { opacity: 0; transform: translate3d(0, 24px, 0) scale(.93); pointer-events: none; }
.tray__head { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 10px 7px; font-size: 12px; font-weight: 500; color: var(--on-wall-3); font-variant-numeric: tabular-nums; }
.tray__head i { font: italic 400 14.5px/1.2 var(--serif); color: var(--on-wall-2); }
.tray__row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 11px; align-items: center; width: 100%; padding: 9px 11px 9px 10px; border: 0; border-radius: 12px; background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 0 0 .5px rgba(9, 15, 26, .1), 0 1px 2px rgba(9, 15, 26, .08); }
.tray__text { display: grid; gap: 3px; min-width: 0; }
.tray__top { display: flex; align-items: baseline; gap: 8px; }
.tray__title { flex: 1; min-width: 0; overflow: hidden; font: 600 13px/1.25 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.tray__time { flex: none; font: 500 11.5px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.tray__status { display: block; overflow: hidden; font-size: 12px; line-height: 1.3; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.tray__status .ok { color: var(--done); font-weight: 600; }
.tray__foot { padding: 7px 10px 2px; font-size: 11.5px; color: var(--on-wall-3); }
/* The project's seal: a ring turns round it while the task runs, and a check lands on it when it is done. */
.seal { position: relative; display: grid; place-items: center; width: 30px; height: 30px; }
.seal__face { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 27%; background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%), #6B4250; color: #FBF3E4; font: 600 14px/1 var(--serif); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .18); }
.seal__ring { position: absolute; inset: -4px; border: 2px solid var(--brass); border-radius: 34%; animation: breathe 1.7s ease-in-out infinite; }
.seal__check { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--done); color: #fff; box-shadow: 0 0 0 1.5px var(--paper); transform: scale(0); transition: transform .5s cubic-bezier(.2, 1.4, .3, 1); }
.seal__check svg { width: 9px; height: 9px; }
.tray__row[data-state="done"] .seal__ring { display: none; }
.tray__row[data-state="done"] .seal__check { transform: none; }
.tray__row.is-stamped { animation: stamp .7s var(--swift); }
.tray__status.is-new { animation: step .4s var(--swift); }
.tray.is-done .tray__row { animation: finished 1.6s ease-out; }
@keyframes breathe { 0%, 100% { opacity: .35; transform: scale(.93); } 50% { opacity: 1; transform: none; } }
.tray__more { display: grid; gap: 1px; margin-top: 5px; }
.tray__more:empty { display: none; }
.tray__mini { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 5px 11px 5px 15px; font-size: 12.5px; color: var(--on-wall); }
.tray__mini b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tray__ministatus { max-width: 104px; overflow: hidden; font-size: 11px; color: var(--on-wall-3); text-overflow: ellipsis; white-space: nowrap; }
.tray__ministatus .ok { color: var(--done); font-weight: 600; }
.seal--s { width: 20px; height: 20px; }
.seal--s .seal__face { width: 18px; height: 18px; font-size: 9.5px; }
.seal--s .seal__ring { inset: -3px; border-width: 1.5px; }
.seal--s .seal__check { right: -5px; bottom: -4px; width: 11px; height: 11px; box-shadow: 0 0 0 1.5px var(--wall-top); }
.seal--s .seal__check svg { width: 7px; height: 7px; }
.tray__mini[data-state="needs"] .seal__ring { border-color: var(--needs); animation: none; }
.tray__mini[data-state="needs"] .tray__ministatus { color: var(--needs); font-weight: 600; }
.seal__face svg { width: 66%; height: 66%; fill: none; stroke: currentColor; stroke-width: 1.7; }
.tray__mini[data-state="done"] .seal__ring { display: none; }
.tray__mini[data-state="done"] .seal__check { transform: none; }
.tray__mini.is-stamped { animation: joined .6s var(--swift); }
@keyframes joined { from { opacity: 0; transform: translateX(-10px); } }
@keyframes stamp { 0% { transform: scale(1.09); box-shadow: 0 0 0 7px color-mix(in srgb, var(--brass) 45%, transparent), 0 1px 2px rgba(9, 15, 26, .08); } 100% { transform: none; box-shadow: 0 0 0 .5px rgba(9, 15, 26, .1), 0 1px 2px rgba(9, 15, 26, .08); } }
@keyframes step { from { opacity: 0; transform: translateY(7px); } }
@keyframes finished { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--done) 70%, transparent); } 60% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--done) 0%, transparent); } 100% { box-shadow: 0 0 0 .5px rgba(9, 15, 26, .1), 0 1px 2px rgba(9, 15, 26, .08); } }

/* The request on its way from the note to the tray. */
.slip { position: fixed; z-index: 50; margin: -7px 0 0 -12px; padding: 7px 12px; border-radius: 10px; background: #fff; color: #1D1D1F; font: 400 var(--slip, 15px)/1.3 var(--system); white-space: nowrap; pointer-events: none; transform-origin: 0 50%; box-shadow: 0 0 0 .5px rgba(9, 15, 26, .16), 0 18px 40px -10px rgba(9, 15, 26, .55); will-change: transform, opacity; }

/* The painting's label. */
.label { position: fixed; z-index: 26; right: 16px; bottom: 16px; display: none; flex-direction: row-reverse; align-items: center; gap: 8px; transition: opacity .4s ease; }
html.js .label { display: flex; }
html.nopaint .label, .label.is-none { opacity: 0; pointer-events: none; }
.label__hit { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .24); color: #fff; font: italic 400 15px/1 var(--serif); cursor: pointer; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .6), 0 2px 8px rgba(9, 15, 26, .25); }
html[data-tone="ink"] .label__hit { background: rgba(15, 26, 45, .5); }
.label__text { max-width: min(430px, 100vw - 80px); padding: 7px 12px; border-radius: 8px; background: var(--plaque); color: var(--plaque-ink); font-size: 12.5px; line-height: 1.4; box-shadow: var(--shadow-label); opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity .25s ease, transform .35s var(--swift); }
.label.is-open .label__text { opacity: 1; transform: none; }

/* The film. */
html:not(.js) [data-film] { display: none; }
dialog.film { width: min(1240px, 94vw); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; overflow: visible; }
dialog.film::backdrop { background: rgba(6, 10, 18, .84); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.film__frame { overflow: hidden; aspect-ratio: 16 / 9; border-radius: 14px; background: #0C1522; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .16), 0 50px 120px -30px #000; }
.film__frame video { width: 100%; height: 100%; }
.film__close { position: absolute; right: 0; top: -42px; padding: 6px 12px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .14); color: #fff; font: 500 14px/1.4 var(--sans); cursor: pointer; }
.film__close:hover { background: rgba(255, 255, 255, .24); }

/* ——— Live: scenes pinned, and played to the scroll ——— */
html.live { scroll-behavior: smooth; }
html.live .scene--hero { height: calc(1.9 * 100svh); }
html.live .scene--ask { height: calc(5.2 * 100svh); }
html.live .scene--meanwhile { height: calc(3.6 * 100svh); }
html.live .scene--tabs { height: calc(2.2 * 100svh); }
html.live .scene--result { height: calc(1.9 * 100svh); }
html.live .scene--history { height: calc(2.2 * 100svh); }
html.live .scene--map { height: calc(2 * 100svh); }
html.live .scene--talk { height: calc(1.6 * 100svh); }
html.live .scene--free { height: calc(1.35 * 100svh); }
html.live .stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; padding: calc(var(--bar) + 8px) 0 36px; }

/* Words come in one after another. */
html.live .w { display: inline-block; opacity: 0; transform: translate3d(0, .5em, 0) rotate(1.6deg); filter: blur(8px); transition: opacity .8s var(--swift), transform 1s var(--swift), filter .8s ease; transition-delay: calc(var(--i) * 42ms + var(--w0, 0ms)); }
html.live .is-in .w { opacity: 1; transform: none; filter: none; }
html.live .rise { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity .8s ease, transform .95s var(--swift); transition-delay: calc(var(--d, 0) * 70ms + var(--w0, 0ms) + 120ms); }
html.live .is-in .rise { opacity: 1; transform: none; }

/* The opening: the bar and the window follow the painting in. */
html.live .bar { opacity: 0; transform: translateY(-14px); transition: opacity .9s ease .5s, transform 1s var(--swift) .5s; }
html.live.is-open .bar { opacity: 1; transform: none; }
html.live .scene--hero .veil { opacity: 0; transition: opacity 1.6s ease .7s; }
html.live.is-open .scene--hero .veil { opacity: 1; }
html.live .scene--hero { --w0: 650ms; }
html.live.is-open-now .scene--hero { --w0: 0ms; }
html.live.is-open-now .bar, html.live.is-open-now .hero__window, html.live.is-open-now .scene--hero .veil { transition: none; }

html.live .scene--hero .stage { padding: 0; }
html.live .hero__copy { position: absolute; left: 0; right: 0; top: calc(var(--bar) + clamp(18px, 6.5svh, 76px)); padding-top: 0; opacity: calc(1 - var(--copy, 0) * 1.2); transform: translate3d(0, calc(var(--copy, 0) * -44px), 0); will-change: transform, opacity; }
html.live .is-deep .hero__copy { visibility: hidden; }
html.live .hero__window { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 40px 4vw 0; perspective: 1800px; pointer-events: none; opacity: 0; transform: translate3d(0, 14svh, 0); transition: opacity 1.1s ease 1s, transform 1.5s cubic-bezier(.16, .8, .2, 1) 1s; }
html.live.is-open .hero__window { opacity: 1; transform: none; }
html.live .win {
  width: min(1400px, 100%, (100svh - 138px) * 1.561);
  transform: translate3d(0, calc((1 - var(--zoom, 0)) * var(--drop, 44svh)), 0) scale(calc(.9 + var(--zoom, 0) * .1)) rotateX(calc((1 - var(--zoom, 0)) * 7deg + var(--tiltx, 0) * -2.4deg)) rotateY(calc(var(--tilty, 0) * 3.2deg));
  transform-origin: 50% 0; will-change: transform;
}
/* A capture comes up into its scene. */
html.live .lay--side .lay__vis, html.live .strip { opacity: var(--in, 1); transform: translate3d(0, calc((1 - var(--in, 1)) * 70px), 0) scale(calc(.95 + var(--in, 1) * .05)); }
html.live .lay { height: 100%; }
html.live .lay--side { align-content: center; padding-bottom: 70px; }
html.live .lay--stack { justify-content: center; }

html.live .win { pointer-events: auto; }
html.live .beats { gap: 0; }
html.live .beat { grid-area: 1 / 1; }
/* A scene with more than one headline shows them in one place, one at a time: `data-beat` on the scene says which.
   The one that leaves goes at once; the one that comes waits for it. */
html.live .has-beats .beat .w { opacity: 0; transform: translate3d(0, .5em, 0) rotate(1.6deg); filter: blur(8px); transition-duration: .3s; transition-delay: 0ms; }
html.live .has-beats.is-in[data-beat="1"] .beat--1 .w, html.live .has-beats.is-in[data-beat="2"] .beat--2 .w, html.live .has-beats.is-in[data-beat="3"] .beat--3 .w { opacity: 1; transform: none; filter: none; transition-duration: .8s, 1s, .8s; transition-delay: calc(var(--i) * 42ms + 260ms); }
html.live .has-beats.is-in[data-beat="1"] .beat--1 .w { transition-delay: calc(var(--i) * 42ms + var(--w0, 0ms)); }
html.live .beat .kicker, html.live .beat__more { transition: opacity .5s ease; }
html.live .has-beats .beat .kicker, html.live .has-beats .beat__more { opacity: 0; }
html.live .has-beats.is-in[data-beat="1"] .beat--1 .kicker, html.live .has-beats.is-in[data-beat="2"] .beat--2 .kicker, html.live .has-beats.is-in[data-beat="3"] .beat--3 .kicker { opacity: 1; transition-delay: .3s; }
html.live .has-beats.is-in[data-beat="1"] .beat--1 .beat__more, html.live .has-beats.is-in[data-beat="2"] .beat--2 .beat__more:not(.beat__more--late) { opacity: 1; transition-delay: .55s; }
/* A line that waits for its picture: it comes in once the answer is back (`is-back`, from home/scenes.js). */
html.live .has-beats.is-in.is-back[data-beat="2"] .beat--2 .beat__more--late { opacity: 1; transition-delay: .35s; }
html.live .has-beats.is-in[data-beat="1"] .beat--1 .fine.beat__more { opacity: .86; }
/* The project is found, not fixed: over the note's project the bar first says "Auto", then "Choosing a project…" for
   a moment (as the app does), then clears to show the project the capture holds, with a ring round it. */
html.live .finding { display: flex; align-items: center; position: absolute; left: 13.5%; top: 55.2%; width: 21.5%; height: 9.2%; padding-left: .6%; background: #F9FAFC; font: 500 calc(var(--cw, 1000px) * .0149)/1 var(--system); color: #465163; white-space: nowrap; transition: opacity .2s ease; }
.finding__auto::after { content: ""; display: inline-block; width: .42em; height: .42em; margin: 0 0 .22em .6em; border-right: .11em solid currentColor; border-bottom: .11em solid currentColor; transform: rotate(45deg); }
.finding__pill { position: relative; display: none; align-items: center; gap: .5em; overflow: hidden; padding: .38em .9em .38em .7em; font-size: .9em; border-radius: 999px; background: rgba(180, 127, 34, .14); color: #855D12; }
.finding__pill i { width: .52em; height: .52em; border-radius: 50%; background: #B47F22; animation: finding-dot .42s ease-in-out infinite alternate; }
.finding__pill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .8) 50%, transparent 70%); transform: translateX(-100%); animation: finding-sweep .62s linear infinite; }
.strip__card.is-finding .finding__auto { display: none; }
.strip__card.is-finding .finding__pill { display: inline-flex; }
.strip__card.is-found .finding { opacity: 0; }
.chipring { display: none; }
html.live .chipring { display: block; position: absolute; left: 13.7%; top: 55.9%; width: var(--w); height: 7.8%; border-radius: calc(var(--cw, 1000px) * .007); opacity: 0; pointer-events: none; }
html.live .strip__card.is-found .chipring { animation: found .9s ease-out; }
html.live .strip__card--web .finding { top: 44.1%; }
html.live .strip__card--web .chipring { top: 44.8%; }
.strip__card--web .sent { top: 44%; }
@keyframes finding-dot { from { transform: scale(.7); opacity: .55; } to { transform: scale(1.15); opacity: 1; } }
@keyframes finding-sweep { to { transform: translateX(100%); } }
@keyframes found { 0% { opacity: 1; box-shadow: 0 0 0 2px #B47F22, 0 0 0 9px rgba(180, 127, 34, .22); transform: scale(1.06); } 100% { opacity: 0; box-shadow: 0 0 0 2px rgba(180, 127, 34, 0), 0 0 0 14px rgba(180, 127, 34, 0); transform: none; } }

/* The strip: four notes side by side, moved along by the scroll (--at, from home/scenes.js), one in the middle. */
html.live .strip__track { display: flex; gap: var(--gap, 60px); justify-items: stretch; width: max-content; margin-left: calc(50% - var(--cw, 1000px) / 2); transform: translate3d(calc(var(--at, 0) * (var(--cw, 1000px) + var(--gap, 60px)) * -1), 0, 0); will-change: transform; }
html.live .strip__card { flex: none; width: var(--cw, 1000px); opacity: .5; transform: scale(.95); transition: opacity .45s ease, transform .6s var(--swift); }
html.live .strip__card.is-here { opacity: 1; transform: none; }
html.live .strip__card figcaption:not(.hint) { opacity: 0; transition: opacity .4s ease; }
html.live .strip__card.is-here figcaption:not(.hint) { opacity: 1; }
html.live .strip__fine { opacity: 0; transition: opacity .5s ease .4s; }
html.live [data-beat="2"] .strip__fine, html.live [data-beat="3"] .strip__fine { opacity: .9; }
html.live .typing__caret { animation: blink 1.06s steps(1) infinite; }
html.live .is-typing .typing__caret { animation: none; }
html.live .is-ready .sendhot { animation: beckon 1.5s ease-out infinite; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes beckon { 0% { box-shadow: 0 0 0 0 rgba(42, 98, 166, .65); } 100% { box-shadow: 0 0 0 16px rgba(42, 98, 166, 0); } }

html.live .vis--meanwhile .shot--bleed { width: min(124%, (100svh - 190px) * 1.561); }
html.live .shot--inset { transform: translate3d(0, calc((1 - var(--in2, 1)) * 60px), 0) scale(calc(.7 + var(--in2, 1) * .3)); opacity: calc(var(--in2, 1) * 1.6 - var(--card, 0) * 2); transform-origin: 20% 100%; }

html.live .vis--map { display: grid; justify-items: center; }
html.live .shot--map { width: min(100%, (100svh - 150px) * 1.2637); }
/* The map's areas come up one by one: its top, then six soft rounds, then all of it. */
html.live .shot--map > img {
  -webkit-mask-image: linear-gradient(#000 0 0),
    radial-gradient(ellipse calc(var(--b1, 1) * 27%) calc(var(--b1, 1) * 25%) at 20% 47%, #000 0, #000 50%, transparent 100%),
    radial-gradient(ellipse calc(var(--b2, 1) * 27%) calc(var(--b2, 1) * 25%) at 53% 47%, #000 0, #000 50%, transparent 100%),
    radial-gradient(ellipse calc(var(--b3, 1) * 27%) calc(var(--b3, 1) * 25%) at 84% 47%, #000 0, #000 50%, transparent 100%),
    radial-gradient(ellipse calc(var(--b4, 1) * 27%) calc(var(--b4, 1) * 25%) at 18% 82%, #000 0, #000 50%, transparent 100%),
    radial-gradient(ellipse calc(var(--b5, 1) * 27%) calc(var(--b5, 1) * 25%) at 52% 82%, #000 0, #000 50%, transparent 100%),
    radial-gradient(ellipse calc(var(--b6, 1) * 27%) calc(var(--b6, 1) * 25%) at 84% 82%, #000 0, #000 50%, transparent 100%),
    linear-gradient(rgba(0, 0, 0, var(--ball, 1)) 0 0);
  mask-image: linear-gradient(#000 0 0),
    radial-gradient(ellipse calc(var(--b1, 1) * 27%) calc(var(--b1, 1) * 25%) at 20% 47%, #000 0, #000 50%, transparent 100%),
    radial-gradient(ellipse calc(var(--b2, 1) * 27%) calc(var(--b2, 1) * 25%) at 53% 47%, #000 0, #000 50%, transparent 100%),
    radial-gradient(ellipse calc(var(--b3, 1) * 27%) calc(var(--b3, 1) * 25%) at 84% 47%, #000 0, #000 50%, transparent 100%),
    radial-gradient(ellipse calc(var(--b4, 1) * 27%) calc(var(--b4, 1) * 25%) at 18% 82%, #000 0, #000 50%, transparent 100%),
    radial-gradient(ellipse calc(var(--b5, 1) * 27%) calc(var(--b5, 1) * 25%) at 52% 82%, #000 0, #000 50%, transparent 100%),
    radial-gradient(ellipse calc(var(--b6, 1) * 27%) calc(var(--b6, 1) * 25%) at 84% 82%, #000 0, #000 50%, transparent 100%),
    linear-gradient(rgba(0, 0, 0, var(--ball, 1)) 0 0);
  -webkit-mask-size: 100% 27.5%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  mask-size: 100% 27.5%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
html.live .is-lit .ping::before { animation: ping 2.4s ease-out infinite; }
html.live .is-lit .ping::after { animation: ping 2.4s ease-out .8s infinite; }
@keyframes ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(3.6); opacity: 0; } }

html.live .shot--tabs { width: 134%; background: rgba(249, 251, 252, .5); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); }
html.live .shot--tabs > img { opacity: var(--cap, 1); }
/* The journal is uncovered from the top, as the addresses above gather into it. */
html.live .shot--history > img {
  -webkit-mask-image: linear-gradient(#000 calc(var(--cap, 1) * 135% - 35%), transparent calc(var(--cap, 1) * 135%));
  mask-image: linear-gradient(#000 calc(var(--cap, 1) * 135% - 35%), transparent calc(var(--cap, 1) * 135%));
}
html.live .chips { display: block; position: absolute; inset: 0; pointer-events: none; }
.chip {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: calc(var(--fw) * .0075px);
  height: calc(var(--fw) * .0293px); margin-left: calc(var(--fw) * -.008px); padding: 0 calc(var(--fw) * .008px); border-radius: calc(var(--fw) * .006px);
  background: #fff; color: #1D1D1F; font: 500 calc(var(--fw) * .0094px)/1 var(--system); white-space: nowrap;
  box-shadow: 0 0 0 .5px rgba(9, 15, 26, calc(var(--card, 1) * .2)), 0 calc(var(--fw) * .007px) calc(var(--fw) * .02px) calc(var(--fw) * -.008px) rgba(9, 15, 26, calc(var(--card, 1) * .5));
  will-change: transform, opacity;
}
.chip i { flex: none; width: calc(var(--fw) * .0115px); height: calc(var(--fw) * .0115px); border-radius: 27%; }
.chip b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; }

html.live .shot--history { width: min(100%, 760px, (100svh - 132px) * .8596); background: #fff; }
html.live .rawlog { display: block; position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.rawlog li { position: absolute; left: 8%; right: 8%; top: 0; display: flex; gap: 1.3em; align-items: baseline; font: 400 calc(var(--fw) * .0235px)/1.3 var(--mono); color: #1B55C0; transform-origin: 8% 50%; will-change: transform, opacity; }
.rawlog time { flex: none; width: 5.4em; color: #7A8494; }
.rawlog span { overflow: hidden; text-decoration: underline; text-decoration-color: rgba(27, 85, 192, .3); text-underline-offset: .2em; text-overflow: ellipsis; white-space: nowrap; }

/* The two tasks sent that day, ringed in the journal once it is whole. */
html.live .sentmark { display: block; position: absolute; left: 22.4%; right: var(--r, 4%); top: var(--y); height: 4.3%; border-radius: 9px; box-shadow: 0 0 0 2px #2A62A6, 0 0 0 7px rgba(42, 98, 166, .16); opacity: 0; transform: scale(1.04); transition: opacity .5s ease, transform .7s var(--swift); pointer-events: none; }
html.live .sentmark + .sentmark { transition-delay: .25s; }
html.live .is-told .sentmark { opacity: 1; transform: none; }

/* Under the opening, until the first scroll. */
html.live .cue { display: block; position: absolute; z-index: 3; left: 50%; bottom: 22px; margin: 0; transform: translateX(-50%); opacity: 0; transition: opacity .6s ease; pointer-events: none; }
html.live.is-open .cue { opacity: 1; transition-delay: 2.8s; }
html.live.has-scrolled .cue { opacity: 0; transition-delay: 0s; }
.cue span { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 16px; border-radius: 999px; background: rgba(15, 26, 45, .78); color: #fff; font: 500 13px/1.4 var(--sans); letter-spacing: .01em; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 24px -8px rgba(9, 15, 26, .6); }
.cue span::after { content: ""; width: 6px; height: 6px; margin-top: -4px; border-right: 1.6px solid #fff; border-bottom: 1.6px solid #fff; transform: rotate(45deg); animation: nudge 1.5s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px) rotate(45deg); } }

/* The chart is drawn across the frame once the wall is reached (--draw, from home/scenes.js); what is not drawn yet
   shimmers behind it, with a pen line at the edge. */
html.live .scene--result .frame { opacity: var(--in, 1); transform: translate3d(0, calc((1 - var(--in, 1)) * 50px), 0); }
html.live .scene--result .frame { width: min(1320px, 100%, (100svh - 350px) * 1.75 + 272px); }
html.live .frame__pic img { clip-path: inset(0 calc((1 - var(--draw, 1)) * 100%) 0 0); }
html.live .frame__wait { display: block; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(17, 26, 39, .035) 30%, rgba(17, 26, 39, .09) 50%, rgba(17, 26, 39, .035) 70%) 0 0 / 220% 100%; animation: wait 1.8s linear infinite; }
html.live .frame__wait::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: calc(var(--draw, 1) * 100%); width: 2px; margin-left: -1px; background: var(--brass); opacity: calc(var(--draw, 1) * 40); }
html.live .is-drawn .frame__wait { animation: none; background: none; }
html.live .is-drawn .frame__wait::after { opacity: 0; transition: opacity .4s ease; }
@keyframes wait { from { background-position: 120% 0; } to { background-position: -100% 0; } }
/* The headline comes in with the chart, when the wall is reached. */
html.live .scene--result:not(.is-done) .result__done .w { opacity: 0; transform: translate3d(0, .5em, 0) rotate(1.6deg); filter: blur(8px); }
/* The label takes the request from the tray. */
html.live .is-labelled .plaque--label { animation: taken .7s var(--swift); }
@keyframes taken { 0% { transform: scale(1.06); box-shadow: 0 0 0 6px color-mix(in srgb, var(--brass) 40%, transparent), var(--shadow-label); } 100% { transform: none; } }

/* Hold Fn and say it. */
html.live .plate { opacity: 0; transform: translateX(-10px) scale(.92); transform-origin: 0 50%; transition: opacity .25s ease, transform .35s var(--swift); }
html.live .is-held .plate { opacity: 1; transform: none; }
html.live .is-held .key { transform: translateY(4px); box-shadow: 0 0 0 .5px rgba(9, 15, 26, .34), 0 0 0 #BFC6D1, 0 1px 0 rgba(9, 15, 26, .3), 0 8px 16px -8px rgba(9, 15, 26, .55), 0 0 0 5px rgba(42, 98, 166, .4); }
html.live .is-held .plate__bars i { animation: speak .46s ease-in-out infinite alternate; }
html.live .is-held .plate__bars i:nth-child(2) { animation-delay: -.3s; animation-duration: .38s; }
html.live .is-held .plate__bars i:nth-child(3) { animation-delay: -.12s; animation-duration: .52s; }
html.live .is-held .plate__bars i:nth-child(4) { animation-delay: -.4s; animation-duration: .34s; }
html.live .is-held .plate__bars i:nth-child(5) { animation-delay: -.2s; }
@keyframes speak { from { height: 4px; } to { height: 20px; } }
html.live .typing--talk .typing__caret { animation: none; }
html.live .scene--talk:not(.is-held) .typing--talk .typing__caret { opacity: 0; }

/* Keep browsing, its second beat: the recording stands back and the corner of the window comes forward over it
   (--card, from home/scenes.js), where the tab of the task on the web asks. --cw2 is the corner's width on the page. */
/* While the page's tray is up with its five rows (this scene and the next), the words beside the picture are centred
   in the room above it, not in the whole stage, so they never run under it. 182px: from the tray's top, with a
   little air, down to the foot of the layout. */
@media (min-width: 900px) {
  html.live .scene--meanwhile .lay--side, html.live .scene--tabs .lay--side { grid-template-rows: 100%; }
  html.live .scene--meanwhile .lay__copy, html.live .scene--tabs .lay__copy { align-self: start; display: flex; flex-direction: column; justify-content: center; height: calc(100% - 182px); }
}
@media (max-height: 899px) and (min-width: 900px) { html.live .scene--meanwhile .fine.aside--demo { display: none; } }
html.live .keep { opacity: calc(1 - var(--card, 0) * 1.25); transform: scale(calc(1 - var(--card, 0) * .05)); transform-origin: 30% 40%; }
html.live .asking { position: absolute; left: 0; top: 6%; width: min(100%, 800px, (100svh - 250px) * 1.625); margin: 0; opacity: calc(var(--card, 0) * 1.6); transform: translate3d(0, calc((1 - var(--card, 0)) * 80px), 0) scale(calc(.94 + var(--card, 0) * .06)); transform-origin: 30% 100%; pointer-events: none; }
html.live [data-beat="2"] .asking { pointer-events: auto; }
html.live .hot { display: block; }
/* A bubble comes out of its tab: uncovered from the tab's side. */
html.live .pop { opacity: 0; -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); transition: clip-path .5s var(--swift), -webkit-clip-path .5s var(--swift), opacity .22s ease; }
html.live .pop--morning, html.live .pop--afternoon { display: block; }
html.live .corner[data-stage="1"] .pop--question, html.live .corner[data-stage="press"] .pop--question,
html.live .corner[data-stage="3"][data-answer="morning"] .pop--morning, html.live .corner[data-stage="3"][data-answer="afternoon"] .pop--afternoon { opacity: 1; -webkit-clip-path: inset(0); clip-path: inset(0); }
/* Its two options can be pressed where the capture shows them. */
.hot { padding: 0; border: 0; border-radius: calc(var(--cw2, 760px) * .011); background: transparent; cursor: pointer; pointer-events: none; transition: background-color .15s ease, box-shadow .15s ease; }
.corner[data-stage="1"] .hot { pointer-events: auto; }
.hot:hover { background: rgba(42, 98, 166, .1); box-shadow: 0 0 0 2px rgba(42, 98, 166, .45); }
.corner[data-stage="press"][data-answer="morning"] .hot[data-answer="morning"], .corner[data-stage="press"][data-answer="afternoon"] .hot[data-answer="afternoon"] { background: rgba(42, 98, 166, .2); box-shadow: 0 0 0 2px rgba(42, 98, 166, .7); }
html.live .webhint { display: grid; justify-items: center; min-height: 34px; margin: 16px 0 0; font-size: 15px; font-weight: 500; color: var(--fg-2); text-shadow: 0 1px 12px rgba(9, 15, 26, .45); }
.webhint > span { grid-area: 1 / 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.is-asking .webhint__ask, .is-answered .webhint__on { opacity: 1; visibility: visible; transition-delay: 0s; }

/* The closing section's parts come up as they are reached (home/main.js marks them). */
html.live .reveal { opacity: 0; transform: translate3d(0, 46px, 0); transition: opacity .9s ease, transform 1.1s var(--swift); }
html.live .reveal.is-seen { opacity: 1; transform: none; }
html.live .plaque.reveal:nth-child(2) { transition-delay: .09s; } html.live .plaque.reveal:nth-child(3) { transition-delay: .18s; } html.live .plaque.reveal:nth-child(4) { transition-delay: .27s; }
html.live .finale .finale__line { -webkit-mask-image: linear-gradient(100deg, #000 42%, transparent 58%); mask-image: linear-gradient(100deg, #000 42%, transparent 58%); -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; transition: -webkit-mask-position 1.8s cubic-bezier(.3, 0, .2, 1) .25s, mask-position 1.8s cubic-bezier(.3, 0, .2, 1) .25s; }
html.live .finale.is-seen .finale__line { -webkit-mask-position: 0 0; mask-position: 0 0; }

/* Free. */
html.live .lay--free { padding-bottom: 70px; }
/* The word is brushed in from the left, like the paintings. */
html.live .free__word { -webkit-mask-image: linear-gradient(100deg, #000 40%, transparent 60%); mask-image: linear-gradient(100deg, #000 40%, transparent 60%); -webkit-mask-size: 270% 100%; mask-size: 270% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; transform: translate3d(0, .08em, 0); transition: -webkit-mask-position 1.5s cubic-bezier(.3, 0, .2, 1) .1s, mask-position 1.5s cubic-bezier(.3, 0, .2, 1) .1s, transform 1.5s var(--swift) .1s; }
html.live .is-in .free__word { -webkit-mask-position: 0 0; mask-position: 0 0; transform: none; }
html.live .terms li { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .8s ease, transform .9s var(--swift); }
html.live .terms li:nth-child(1) { transition-delay: .45s; } html.live .terms li:nth-child(2) { transition-delay: .6s; } html.live .terms li:nth-child(3) { transition-delay: .75s; }
html.live .is-in .terms li { opacity: 1; transform: none; }
html.live .get { opacity: 0; transform: translate3d(0, 46px, 0) scale(.95); transition: opacity .9s ease .35s, transform 1.1s var(--swift) .35s; }
html.live .is-in .get { opacity: 1; transform: none; }

/* ——— Narrower windows ——— */
@media (max-width: 1100px) {
  .plaques { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frame { grid-template-columns: minmax(0, 1fr); }
  .plaque--label { justify-self: start; min-width: 232px; }
  html.live .scene--result .frame { width: min(900px, 100%, (100svh - 420px) * 1.75); }
}
@media (max-width: 1080px) { .bar__links { display: none; } }
@media (max-width: 899px) {
  :root { --gutter: 20px; }
  .lay--stack .kicker { justify-content: center; }
  .lay--side { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lay--free { grid-template-columns: minmax(0, 1fr); gap: 28px; justify-items: start; }
  .panel--start, .faq { grid-template-columns: minmax(0, 1fr); }
  .hl { font-size: clamp(29px, 6.4vw, 44px); }
  .scene { --veil-x: 50%; --veil-y: 26%; --veil-w: 120%; --veil-h: 44%; }
  .free__word { font-size: clamp(104px, 30vw, 220px); }
  .get { width: min(400px, 100%); padding: 22px 22px 20px; }
  .get__icon { width: 84px; height: 84px; }
  .get__name { margin-bottom: 14px; font-size: 24px; }
  .say { margin-left: 4%; }
  .key { width: 64px; height: 64px; border-radius: 13px; }
  .key b { right: 9px; top: 8px; font-size: 14px; } .key svg { left: 8px; bottom: 8px; width: 18px; height: 18px; }
  .plate { height: 40px; font-size: 14px; }
  .tray { left: 12px; bottom: 12px; }
  .ping::before, .ping::after { left: -5px; top: -5px; width: 10px; height: 10px; border-width: 1.5px; }
  .label { right: 12px; bottom: 12px; }

  html.live .stage { padding-bottom: 128px; }
  html.live .scene--hero .stage { padding-bottom: 0; }
  html.live .lay--side { align-content: start; padding: 2svh 0 0; }
  html.live .lay--stack { justify-content: flex-start; padding-top: 2svh; }
  html.live .vis--meanwhile .shot--bleed { width: 150%; }
  .asking { width: min(114%, 760px); }          /* a little wider than the column, so the bubble can be read whole */
  html.live .asking { top: 0; width: min(114%, 760px, (100svh - 380px) * 1.625); }
  html.live .webhint { justify-items: start; max-width: calc(100vw - 2 * var(--gutter)); }
  .webhint > span { justify-content: flex-start; }
  html.live .shot--inset { left: -2%; bottom: -14%; width: 52%; }
  html.live .shot--map { width: min(118%, (100svh - 400px) * 1.2637); max-width: none; }
  html.live .shot--tabs { width: 200%; }
  html.live .shot--history { width: min(100%, (100svh - 372px) * .8596); }
  html.live .strip__track { margin-left: 0; }
  .strip__card figcaption, .strip__card .hint { justify-content: flex-start; width: min(100%, 100vw - 2 * var(--gutter)); text-align: left; }
  .strip__fine { text-align: left; }
  html.live .lay--free { align-content: center; padding-bottom: 0; }
  html.live .scene--result .frame { width: min(100%, (100svh - 470px) * 1.75); }
}
@media (max-width: 760px) { .rail { display: none; } .tray__more { display: none; } }
@media (max-width: 640px) {
  body { font-size: 16px; }
  .bar__in { height: 48px; padding-left: 14px; }
  .bar__brand .lockup { height: 22px; }
  .btn--large { min-height: 48px; padding: 0 22px; font-size: 16px; }
  .hero__copy .hl { font-size: clamp(34px, 9.6vw, 46px); }
  .hero__meta { font-size: 12.5px; }
  .plaques, .also { grid-template-columns: minmax(0, 1fr); }
  .foot { grid-template-columns: minmax(0, 1fr); }
  .terms { font-size: 19px; }
  .get__fine { display: none; }
}
@media (max-height: 760px) and (min-width: 900px) {
  .hl { font-size: clamp(30px, 3.4vw, 46px); }
  .hero__copy .hl { font-size: clamp(36px, 4.6vw, 62px); }
  .free__word { font-size: clamp(110px, 18vw, 230px); }
}