/* OpenBI: the home page, in the language of /mac/ and /performance/ (mac.css, performance.css): dark product chapters
   that stay dark whatever the theme, light text chapters that follow the reader's theme (the site's data-theme on
   <html>, else the system's), big short headlines, key numbers in the blue-violet gradient, numbered footnotes.
   The home page's own identity, the Nordic night, lives in the hero's sky (sky.js), the aurora-lit laptop that opens
   under it, and the narration panel. The site's scripts (site.js, latest.js, gallery.js, sky.js, tangle.js,
   rowing.js, music.js, tour-timing.js, Temml) are unchanged: every id and class they hook into is styled here.
   Without script, or with reduced motion, every scene is a still and every block is visible. */

/* the site's own Inter (the CSP allows fonts from this origin only) */
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --blue: #2F6FDE;
  --blue-bright: #4C8DFF;
  --violet: #8A6CFF;
  --pink: #E58BD6;
  --grad: linear-gradient(90deg, #5B9BFF 0%, #9A7DFF 48%, #E58BD6 100%);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --wrap: 1260px;
  --nav-h: 52px;
  --ease: cubic-bezier(.25, .1, .25, 1);
  /* the dark chapters: fixed, whatever the theme */
  --d-bg: #000;
  --d-fg: #f5f5f7;
  --d-muted: #86868b;
  --d-soft: #a1a1a6;
  --d-line: #2a2a2d;
  --d-card: #161617;
  --d-link: #2997ff;
  /* the Nordic night: the hero's aurora, used as light only (glows, the eyebrow's dot, the narration) */
  --aurora-1: #3ef0a4;
  --aurora-2: #22d3ee;
  --aurora-3: #8b5cf6;
  --bad: #ff6961;
  --good: #30d158;
  /* the text chapters: light by default */
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --fg: #1d1d1f;
  --muted: #6e6e73;
  --line: #d2d2d7;
  --card: #ffffff;
  --link: #0066cc;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000; --bg-alt: #0d0d0e; --fg: #f5f5f7; --muted: #86868b; --line: #2f2f32; --card: #161617; --link: #2997ff;
  }
}
:root[data-theme="dark"] {
  --bg: #000; --bg-alt: #0d0d0e; --fg: #f5f5f7; --muted: #86868b; --line: #2f2f32; --card: #161617; --link: #2997ff;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 8px); }
body {
  margin: 0; background: var(--d-bg); color: var(--d-fg); font-family: var(--font); font-size: 17px; line-height: 1.47;
  letter-spacing: -0.022em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
img, canvas, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
code { font-family: var(--mono); font-size: .88em; }
sup { font-size: .55em; line-height: 0; vertical-align: super; letter-spacing: 0; }
.fn a { color: inherit; text-decoration: none; opacity: .8; padding: 0 1px; }
.fn a:hover, .fn a:focus-visible { text-decoration: underline; opacity: 1; }
.sr, .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(var(--wrap), 100% - 44px); margin: 0 auto; }
.wrap-narrow { width: min(980px, 100% - 44px); margin: 0 auto; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.center { text-align: center; }
@media (max-width: 734px) { .br-d { display: none; } }
@media (max-width: 480px) { .wrap, .wrap-narrow { width: calc(100% - 32px); } }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: #fff; color: #1d1d1f; padding: 8px 14px; border-radius: 8px; text-decoration: none; font-size: 14px; }
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------------------------------------- type scale */
.eyebrow { font-size: 21px; line-height: 1.19; font-weight: 600; letter-spacing: .011em; margin: 0 0 12px; color: var(--d-soft); }
.display { font-size: clamp(42px, 7vw, 96px); line-height: 1.04; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.h2 { font-size: clamp(38px, 5.6vw, 80px); line-height: 1.05; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.h3 { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.08; font-weight: 600; letter-spacing: -0.003em; margin: 0; }
.intro { font-size: clamp(19px, 1.75vw, 24px); line-height: 1.38; font-weight: 500; letter-spacing: .009em; color: var(--d-soft); margin: 24px 0 0; }
.intro b, .intro strong, .intro em { color: var(--d-fg); font-weight: 600; font-style: normal; }
.display, .h2, .h3, .hl h3, .card h3 { text-wrap: balance; }
.small { font-size: 14px; line-height: 1.43; letter-spacing: -0.016em; color: var(--d-muted); }
.body { font-size: 17px; line-height: 1.47; color: var(--d-soft); margin: 18px 0 0; }

/* ------------------------------------------------------------------------------------------- the global bar */
.gbar { position: relative; z-index: 30; height: 44px; background: rgba(0, 0, 0, .8); }
.gbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--d-fg); }
.mark { width: 22px; height: 22px; border-radius: 6px; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 700; letter-spacing: 0; }
.gbar nav { display: flex; gap: 26px; font-size: 12px; }
.gbar nav a { text-decoration: none; color: #d2d2d7; opacity: .9; }
.gbar nav a:hover { color: #fff; }
/* the bar's twelve links (Buy, the last, since 7 November 2026: measured 911 px with the name at 26 px gaps, 850 with
   the mark only, 762 / 718 / 674 at 18 / 14 / 10 px; + 44 px of margins + 15 px for a scrollbar) need the name's room below
   972 px (the chapter bar just below says "OpenBI", the BI mark stays), then tighter gaps; below 735 px they become a
   strip that swipes sideways inside the bar, faded at its right edge, so every link stays reachable on a phone and the
   page never scrolls sideways. Below 469 px the bar drops "Presentation" (a 1600 x 900 deck, made for a big screen; the
   Power BI chapter links it too). Each step keeps 20 px between the mark and the links, with 15 px to spare for a
   desktop window's scrollbar */
@media (max-width: 971px) { .gbar .brand { font-size: 0; gap: 0; } }
@media (max-width: 910px) { .gbar nav { gap: 18px; } }
@media (max-width: 822px) { .gbar nav { gap: 14px; } }
@media (max-width: 778px) { .gbar nav { gap: 10px; } }
@media (max-width: 734px) {
  /* in the strip, Buy comes first, so a phone sees it without swiping */
  .gbar nav a[href^="https://billing.querex.no/"] { order: -1; }
  .gbar .wrap { gap: 20px; }
  .gbar nav { gap: 18px; min-width: 0; align-self: stretch; align-items: center; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-right: 24px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
  .gbar nav::-webkit-scrollbar { display: none; }
  .gbar nav a { flex: none; white-space: nowrap; }
}
@media (max-width: 468px) { .gbar nav a[href="/presentation/"] { display: none; } }

/* ------------------------------------------------------------------------------------------- the chapter nav */
.chapters { position: sticky; top: 0; z-index: 40; height: var(--nav-h); background: rgba(22, 22, 23, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, .08); color: var(--d-fg); }
.chapters .wrap { display: flex; align-items: center; height: 100%; gap: 18px; }
.ch-title { font-size: 21px; font-weight: 600; letter-spacing: .011em; text-decoration: none; white-space: nowrap; margin-right: auto; }
.ch-list { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.ch-list a { font-size: 12px; text-decoration: none; color: #d2d2d7; padding: 6px 0; position: relative; white-space: nowrap; }
.ch-list a:hover { color: #fff; }
.ch-list a[aria-current="true"] { color: #fff; }
.ch-list a[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #fff; }
.ch-cta { background: #0071e3; color: #fff; text-decoration: none; font-size: 12px; line-height: 1; padding: 7px 13px; border-radius: 980px; white-space: nowrap; }
.ch-cta:hover { background: #0077ed; }
.ch-toggle { display: none; background: none; border: 0; width: 36px; height: 36px; padding: 0; cursor: pointer; }
.ch-toggle svg { width: 14px; height: 14px; margin: auto; transition: transform .3s var(--ease); }
.ch-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
/* the narration and the theme, beside the chapter bar's button */
.ch-tools { display: flex; align-items: center; gap: 4px; }
.icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: #d2d2d7; display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .2s, color .2s; }
.icon-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.icon-btn svg { width: 17px; height: 17px; }
@media (max-width: 1068px) { .ch-list { gap: 16px; } .chapters .wrap { gap: 14px; } }
@media (max-width: 900px) {
  .ch-title { font-size: 19px; }
  .ch-toggle { display: block; order: 2; }
  .ch-tools { order: 3; }
  .ch-cta { order: 4; }
  .ch-list { position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; gap: 0; padding: 6px 22px 18px;
    background: rgba(22, 22, 23, .96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, .08); visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s; }
  .ch-list.open { visibility: visible; opacity: 1; transform: none; transition: opacity .25s var(--ease), transform .25s var(--ease); }
  .ch-list a { display: block; font-size: 17px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .ch-list a[aria-current="true"]::after { display: none; }
}
@media (max-width: 420px) { .chapters .wrap { gap: 8px; } .ch-tools { gap: 0; } .ch-cta { padding: 7px 11px; } }
/* without script the chevron can't open the list: show the chapters as a sideways strip under the bar instead */
@media (max-width: 900px) {
  html:not(.js) .ch-toggle { display: none; }
  html:not(.js) .chapters { height: auto; }
  html:not(.js) .chapters .wrap { flex-wrap: wrap; padding: 8px 0; row-gap: 4px; }
  html:not(.js) .ch-list { position: static; visibility: visible; opacity: 1; transform: none; flex-direction: row; flex-wrap: wrap;
    gap: 4px 16px; padding: 0; background: none; border: 0; order: 5; width: 100%; }
  html:not(.js) .ch-list a { font-size: 13px; padding: 4px 0; border: 0; }
}
html:not(.js) .ch-tools { display: none; }

/* ------------------------------------------------------------------------------------- buttons and links */
.ctas { display: flex; gap: 22px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #0071e3; color: #fff; text-decoration: none; font-size: 17px;
  line-height: 1.18; padding: 12px 22px; border-radius: 980px; border: 0; cursor: pointer; white-space: nowrap; }
.btn:hover { background: #0077ed; }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn.secondary { background: transparent; color: var(--d-link); box-shadow: inset 0 0 0 1px var(--d-link); }
.btn.secondary:hover { background: rgba(41, 151, 255, .1); }
.light-sec .btn.secondary { color: var(--link); box-shadow: inset 0 0 0 1px var(--link); }
.btn-s { font-size: 14px; padding: 7px 14px; }
.more { color: var(--d-link); text-decoration: none; font-size: 17px; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.more:hover { text-decoration: underline; }
.more::after { content: " \203A"; }
.more svg { width: 16px; height: 16px; }
.more.play::after { content: none; }
.ctas.start { justify-content: flex-start; }
.light-sec .more { color: var(--link); }
/* on a Mac (data-os, from the <head> script) the Mac's download is the one that stands out and comes first,
   and Windows' steps back; with no Mac release in studio/latest.json, latest.js hides it */
:root[data-os="mac"] .btn.secondary[data-dl="mac"] { background: #0071e3; color: #fff; box-shadow: none; }
:root[data-os="mac"] .btn.secondary[data-dl="mac"]:hover { background: #0077ed; }
:root[data-os="mac"] .btn[data-dl="windows"]:not(.secondary) { background: transparent; color: var(--d-link); box-shadow: inset 0 0 0 1px var(--d-link); }
:root[data-os="mac"] .light-sec .btn[data-dl="windows"]:not(.secondary) { color: var(--link); box-shadow: inset 0 0 0 1px var(--link); }
:root[data-os="mac"] [data-dl="mac"] { order: -1; }
[data-dl][hidden] { display: none !important; }

/* ------------------------------------------------------------------------------------- reveals (site.js) */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------------------ scroll scenes (progressive) */
/* Without script, or with reduced motion, a scene is a plain section with a still picture. */
.scene { position: relative; background: var(--d-bg); }
.scene .sticky { position: relative; overflow: hidden; }
.scene canvas.seq { display: none; }
.scene .still { width: 100%; height: auto; margin: 0 auto; }
.motion .scene { height: var(--h, 300vh); }
.motion .scene .sticky { position: sticky; top: 0; height: 100vh; height: 100svh; }
.motion .scene canvas.seq { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.motion .scene .still { display: none; }
.motion [data-fade] { opacity: 0; will-change: opacity, transform; }
@media (max-width: 734px) { .motion .scene { height: var(--hm, var(--h, 260vh)); } }

/* ------------------------------------------------------------------- the hero: the Nordic night, then the laptop */
/* One scroll scene. Its first screen (.lead) holds the copy and the model's constellation (model-sky.js) over the
   rendered night; it scrolls away while the sticky stage behind it keeps the night (a muted loop, its still under it)
   and the laptop opens in front of it, the four numbers above. Without script or with reduced motion: the lead over
   the night's still, then the laptop's still and the numbers. */
.night { background: var(--d-bg); color: var(--d-fg); }
.night .lead { position: relative; z-index: 3; min-height: calc(100vh - 96px); min-height: calc(100svh - 96px); display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.motion .night .lead { position: absolute; top: 0; left: 0; right: 0; }
.night .lead-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; z-index: -3; }
.motion .night .lead-bg { display: none; }
.night #sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
/* the copy keeps its contrast over the aurora: a soft shade on the left */
.night .lead::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .62) 0, rgba(0, 0, 0, .38) 34%, rgba(0, 0, 0, 0) 62%); }
.night .lead .wrap { position: relative; padding: clamp(56px, 9vh, 110px) 0 clamp(96px, 15vh, 170px); }
.night .lead::after { content: ""; position: absolute; inset: auto 0 0; height: 90px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent, var(--d-bg)); }
.motion .night .lead::after { display: none; }
/* the copy on the left, the model's constellation (laid out in the right half) on the right */
.night .copy { max-width: 600px; }
.night .eyebrow { font-size: clamp(15px, min(1.3vw, 2.2vh), 19px); display: flex; align-items: center; gap: 10px; margin-bottom: 2.2vh; color: #c7c7cc; }
.night .eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--aurora-1); box-shadow: 0 0 12px var(--aurora-1); flex: none; }
.night .display { font-size: clamp(38px, min(4.1vw, 7.6vh), 58px); text-shadow: 0 2px 30px rgba(0, 0, 0, .45); }
.night .copy .intro { font-size: clamp(17px, min(1.45vw, 2.4vh), 21px); margin-top: 2.6vh; color: #c7c7cc; }
.night .copy .intro code { color: var(--d-fg); font-size: .9em; }
.night .ctas { justify-content: flex-start; gap: 14px 22px; margin-top: 3.4vh; }
/* Buy (OpenBI Server, sold by Querex AS): the hero's strongest button, larger, right above the downloads; on a phone
   it comes straight under the title, so it is in the first screen even at 320 x 568 */
.buy { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; margin-top: 3.4vh; }
.night .buy + .ctas { margin-top: 2.4vh; }
.btn.btn-buy { font-size: 21px; font-weight: 600; padding: 15px 52px; box-shadow: 0 8px 28px rgba(0, 113, 227, .45); }
.buy-note { margin: 0; font-size: 13px; line-height: 1.4; color: #c7c7cc; }
@media (max-width: 480px) {
  .night .copy { display: flex; flex-direction: column; }
  .night .copy .buy { order: 1; margin-top: 2.4vh; }
  .night .copy .intro { order: 2; }
  .night .copy .ctas { order: 3; }
  .night .copy .chips { order: 4; }
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 3vh 0 0; padding: 0; list-style: none; }
.chips li { font-size: 13px; line-height: 1; padding: 8px 12px; border-radius: 980px; background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--d-soft); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.chips li b { color: var(--d-fg); font-weight: 600; }
.night .caption { position: absolute; right: 0; bottom: clamp(28px, 6vh, 64px); margin: 0; max-width: 340px; text-align: right; color: #a1a1a6; text-shadow: 0 1px 12px #000; }
.night .caption b { color: #ff9a8b; font-weight: 600; }
@media (max-width: 899px) {
  .night .lead { align-items: flex-start; }
  .night .copy { max-width: 640px; }
  .night .caption { position: static; text-align: left; max-width: 640px; margin-top: 28px; }
  .night .lead .wrap { padding-bottom: 72px; }
  .night .lead::before { background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, .35) 60%, rgba(0, 0, 0, .55) 100%); }
}
@media (max-width: 734px) { .night .display { font-size: clamp(38px, 10.4vw, 56px); } .night .ctas { gap: 12px 18px; } }

/* the stage: the night's loop, the laptop, the numbers */
.night .night-bg { display: none; }
.motion .night .night-bg { display: block; position: absolute; inset: 0; }
.night-bg img, .night-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.night-bg video { opacity: 0; transition: opacity .8s var(--ease); }
.night-bg video.playing { opacity: 1; }
.night-dim { position: absolute; inset: 0; background: #000; opacity: 0; }
.night .sticky .still { width: 100%; height: auto; }
.night .beats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding: 24px 0 120px; }
.night .beat { text-align: left; border-top: 1px solid var(--d-line); padding-top: 20px; }
.night .num { margin: 0 0 8px; font-size: 40px; line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.night .t { margin: 0; color: var(--d-soft); font-size: 15px; line-height: 1.42; }
.night .t b { color: var(--d-fg); font-weight: 600; }
.motion .night .beats { position: static; display: block; padding: 0; }
.motion .night .beat { position: absolute; z-index: 2; left: 50%; top: calc(var(--nav-h) + 4.5vh); transform: translateX(-50%); width: min(760px, 100% - 44px);
  text-align: center; border: 0; padding: 0; }
.motion .night .num { font-size: clamp(64px, min(9vw, 13vh), 132px); line-height: 1; margin: 0 0 1.2vh; }
.motion .night .t { font-size: clamp(19px, min(1.75vw, 2.8vh), 26px); line-height: 1.32; font-weight: 500; max-width: 640px; margin: 0 auto; text-shadow: 0 1px 16px #000; }
@media (max-width: 900px) { .night .beats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 734px) { .motion .night .beat { top: calc(var(--nav-h) + 3.5vh); } }

/* ----------------------------------------------------------------------------------------- dark chapters */
.dark { background: var(--d-bg); color: var(--d-fg); }
.sec { padding: clamp(88px, 12vw, 160px) 0; }
.sec-tight { padding: clamp(64px, 8vw, 100px) 0; }
.head { max-width: 860px; }
.head.center { margin: 0 auto; }
.head.wide { max-width: 1000px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.split.top { align-items: start; }
.split.rev > :first-child { order: 2; }
@media (max-width: 920px) { .split { grid-template-columns: minmax(0, 1fr); } .split.rev > :first-child { order: 0; } }
/* a headline in half the width: the h2's weight, sized to its column */
.split .h2 { font-size: clamp(36px, 4vw, 56px); line-height: 1.06; }
.split .intro { font-size: clamp(19px, 1.5vw, 21px); }
.split.media-r { grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); align-items: start; }
.split.media-r > .frame { margin-top: 44px; }
@media (max-width: 920px) { .split.media-r { grid-template-columns: minmax(0, 1fr); } .split.media-r > .frame { margin-top: 0; } }
.light-sec .fn a { color: inherit; }
.mt-l { margin-top: clamp(48px, 6vw, 72px); }
.mt-m { margin-top: 40px; }

/* big numbers */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 64px; }
.kpis.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; margin-left: auto; margin-right: auto; }
.kpi { margin: 0; background: var(--d-card); border-radius: 28px; padding: 34px 32px 30px; display: flex; flex-direction: column; min-width: 0; }
.kpi .scale-note { margin-top: auto; }
.kpi .num { font-size: clamp(56px, 6vw, 88px); line-height: 1; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.kpi .num small { font-size: 21px; font-weight: 600; letter-spacing: .011em; color: var(--d-fg); margin-left: 10px; vertical-align: 6px; }
.kpi .what { margin: 14px 0 22px; font-size: 19px; line-height: 1.32; color: var(--d-soft); font-weight: 500; }
.kpi .what b { color: var(--d-fg); font-weight: 600; }
.kpi .ic { width: 28px; height: 28px; color: var(--d-soft); margin-bottom: 22px; }
.bars { display: grid; gap: 12px; }
.bar { display: grid; gap: 5px; }
.bar .name { font-size: 14px; color: var(--d-soft); display: flex; justify-content: space-between; gap: 12px; }
.bar .name b { color: var(--d-fg); font-weight: 600; white-space: nowrap; }
.bar .line { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.bar .fill { display: block; height: 100%; width: max(3px, calc(var(--v) * 100%)); border-radius: 4px; background: #48484a;
  transform-origin: left; transform: scaleX(var(--s, 1)); }
.bar.obi .fill { background: var(--grad); }
.motion .bars:not(.in) .fill { --s: 0; }
.motion .bars .fill { transition: transform 1.1s var(--ease); }
.motion .bars .bar:nth-child(2) .fill { transition-delay: .12s; }
.motion .bars .bar:nth-child(3) .fill { transition-delay: .24s; }
.scale-note { font-size: 12px; color: var(--d-muted); margin: 0 0 10px; }
@media (max-width: 1068px) { .kpis, .kpis.two { grid-template-columns: 1fr; max-width: 620px; margin-left: auto; margin-right: auto; } }

/* the error steps: one dot per step of the test; hollow where a step was not measured */
.esteps { display: grid; gap: 12px; }
.srow { display: grid; gap: 7px; }
.srow .name { font-size: 14px; color: var(--d-soft); display: flex; justify-content: space-between; gap: 12px; }
.srow .name b { color: var(--d-fg); font-weight: 600; white-space: nowrap; }
.dots, .sticks { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.dots i { display: block; height: 8px; border-radius: 4px; background: #48484a; }
.srow.obi .dots i.ok { background: #5B9BFF; }
.dots i.nm { background: transparent; box-shadow: inset 0 0 0 1px #48484a; }
.sticks span { font-size: 11px; color: var(--d-muted); text-align: center; font-variant-numeric: tabular-nums; }
.motion .esteps:not(.in) .dots i.ok { transform: scaleX(0); }
.motion .esteps .dots i { transform-origin: left; transition: transform .5s var(--ease); }

/* highlight cards */
.hls { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.hls.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hl { background: var(--d-card); border-radius: 24px; padding: 28px 28px 26px; min-width: 0; }
.hl h3 { margin: 0; font-size: 21px; line-height: 1.2; font-weight: 600; letter-spacing: .011em; }
.hl h3 small { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--d-muted); }
.hl p { margin: 8px 0 0; font-size: 15px; line-height: 1.47; color: var(--d-soft); }
.hl ul { margin: 14px 0 0; padding-left: 18px; color: var(--d-soft); font-size: 15px; line-height: 1.47; display: grid; gap: 6px; }
.hl .ic { width: 28px; height: 28px; color: var(--d-soft); margin-bottom: 18px; }
.hl .x { font-size: 48px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 12px; }
.light-sec .hl { background: var(--card); }
.light-sec:not(.alt) .hl { background: var(--bg-alt); }
.light-sec .hl p, .light-sec .hl ul { color: var(--muted); }
.light-sec .hl .ic { color: var(--muted); }
.light-sec .hl .x { color: var(--fg); }
@media (max-width: 1000px) { .hls, .hls.two { grid-template-columns: 1fr; max-width: 620px; margin-left: auto; margin-right: auto; } }

/* ----------------------------------------------------------------------------------- light text chapters */
.light-sec { background: var(--bg); color: var(--fg); --line-c: var(--line); --muted-c: var(--muted); --link-c: var(--link); --fg-c: var(--fg); }
.light-sec.alt { background: var(--bg-alt); }
.light-sec .eyebrow { color: var(--muted); }
.light-sec .intro { color: var(--muted); }
.light-sec .intro b, .light-sec .intro strong, .light-sec .intro em { color: var(--fg); }
.light-sec .small { color: var(--muted); }
.light-sec .body { color: var(--muted); }
.light-sec a { color: var(--link); }
.light-sec .btn { color: #fff; }
.light-sec .btn.secondary { color: var(--link); }

/* ------------------------------------------------------------------- pictures of the studio (theme-swapped) */
.frame { margin: 0; min-width: 0; }
.frame .shot { border-radius: 12px; overflow: hidden; background: #1f1f1f; box-shadow: 0 0 0 1px rgba(127, 127, 127, .25); }
.frame .shot img, .frame .shot video { width: 100%; height: auto; }
.frame figcaption { margin-top: 12px; font-size: 14px; line-height: 1.43; color: var(--d-muted); text-align: center; }
.light-sec .frame figcaption { color: var(--muted); }
.shot-swap .dark-only { display: none; }
/* text chapters follow the reader's theme; dark chapters always show the dark pictures */
:root[data-theme="dark"] .light-sec .shot-swap .dark-only { display: block; }
:root[data-theme="dark"] .light-sec .shot-swap .light-only { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .light-sec .shot-swap .dark-only { display: block; }
  :root:not([data-theme="light"]) .light-sec .shot-swap .light-only { display: none; }
}
.dark .shot-swap .dark-only { display: block; }
.dark .shot-swap .light-only { display: none; }
img.dark-only, img.light-only { width: 100%; height: auto; }

/* a render on its own: the laptop straight on */
.render { margin: 0; }
.render img { width: 100%; height: auto; }
.render figcaption { margin-top: 6px; text-align: center; }
.render-card { margin: 0; background: #000; border-radius: 28px; overflow: hidden; }
.render-card img { width: 100%; height: auto; }
.render-card figcaption { padding: 0 24px 22px; text-align: center; color: var(--d-muted); }

/* ------------------------------------------------------------------------------------------ the Mac chapter */
.mac-ch .head .meta { margin-top: 14px; }
.mac-ch .ctas { margin-top: 26px; }
.tabbar { position: relative; display: flex; justify-content: center; margin-top: clamp(56px, 7vw, 88px); }
.tabs { position: relative; display: flex; gap: 34px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; padding: 0 2px;
  border-bottom: 1px solid #2a2a2d; max-width: 100%; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; background: none; border: 0; padding: 14px 0 16px; font-size: 17px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--d-muted); cursor: pointer; white-space: nowrap; transition: color .2s; }
.tab:hover { color: #d2d2d7; }
.tab[aria-selected="true"] { color: var(--d-fg); }
.tab:focus-visible { outline-offset: -2px; }
.ink { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100px; background: var(--d-fg); border-radius: 1px;
  transform-origin: 0 0; transition: transform .45s var(--ease), width .45s var(--ease); pointer-events: none; }
.tabs-more { display: none; position: absolute; right: 0; top: 0; bottom: 1px; width: 56px; border: 0; padding: 0 0 0 18px; cursor: pointer; color: var(--d-fg);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 40%); font-size: 24px; line-height: 1; }
.tabs-more[hidden] { display: none !important; }
.tab-stage { position: relative; margin: 48px auto 0; width: min(880px, 100%); }
.tab-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(.985);
  transition: opacity .7s var(--ease), transform 1.1s var(--ease); }
.tab-stage img.on { opacity: 1; transform: none; z-index: 2; }
.tab-stage img.was { opacity: 1; transform: none; z-index: 1; transition: none; }
.tabpanel { max-width: 820px; margin: 40px auto 0; text-align: center; min-height: 4.5em; }
.tabpanel[hidden] { display: none; }
.tabpanel .lead { font-size: clamp(19px, 1.75vw, 24px); line-height: 1.38; font-weight: 500; letter-spacing: .009em; color: var(--d-soft); margin: 0; }
.tabpanel .lead b { color: var(--d-fg); font-weight: 600; }
.tabpanel.enter { animation: panel-in .5s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* without script: every view, one under the other */
html:not(.js) .tabbar { display: none; }
html:not(.js) .tabpanel[hidden] { display: block; }
.mac-ch .fine { max-width: 760px; margin: 40px auto 0; text-align: center; }
@media (max-width: 734px) {
  .tabbar { justify-content: flex-start; }
  .tabs { gap: 26px; padding-right: 56px; }
  .tabs-more { display: block; }
  .tab { font-size: 15px; }
  .tab-stage { margin-top: 28px; }
  .tabpanel { min-height: 0; margin-top: 28px; }
}

/* ------------------------------------------------------------------------------------------ why: the tangle */
.tangle-box { position: relative; aspect-ratio: 1 / .86; border-radius: 28px; background: radial-gradient(circle at 60% 50%, #12203d, #000 72%); overflow: hidden; }
.tangle-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tangle-box .legend { position: absolute; left: 22px; bottom: 16px; right: 22px; display: flex; justify-content: space-between; font-size: 13px; color: var(--d-muted); }
.quote { margin: 30px 0 0; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.22; font-weight: 600; letter-spacing: -0.003em; color: var(--fg-c, var(--d-fg)); text-wrap: balance; }

/* ------------------------------------------------------------------------------ agents: the replayed session */
.goose { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 22px; align-items: start; margin-top: 64px; }
@media (max-width: 980px) { .goose { grid-template-columns: minmax(0, 1fr); } }
.term { background: var(--d-card); border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; height: 620px; }
.term-bar { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--d-line); font-size: 14px; font-weight: 600; color: var(--d-fg); }
.term-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--aurora-1); box-shadow: 0 0 10px var(--aurora-1); flex: none; }
.term-bar button { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--d-fg); background: #2a2a2d; border: 0; border-radius: 980px; padding: 6px 12px; cursor: pointer; }
.term-bar button:hover { background: #3a3a3d; }
.term-bar button + button { margin-left: 6px; }
.term .log { flex: 1; overflow-y: auto; padding: 20px 20px 8px; scroll-behavior: smooth; }
.msg { margin: 0 0 16px; display: grid; gap: 6px; animation: msgin .35s ease both; }
@keyframes msgin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.msg .who { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--d-muted); }
.msg.you .who { color: #9bbcf6; }
.msg .text { color: var(--d-fg); font-size: 15px; line-height: 1.5; }
.msg.you .text { background: rgba(41, 151, 255, .14); padding: 10px 14px; border-radius: 16px 16px 16px 4px; }
.call { font: 13px/1.5 var(--mono); background: #000; border-radius: 12px; padding: 10px 12px; color: #d2d2d7; white-space: pre-wrap; word-break: break-word; }
.call .tool { color: #7ff5c4; font-weight: 600; }
.call .arg { color: #ffd88a; }
.call .ok { color: #7ff5c4; }
.call .err { color: #ff9a8b; }
.call .ms { color: var(--d-muted); }
.call table { border-collapse: collapse; margin-top: 6px; font: 12.5px/1.4 var(--mono); }
.call td, .call th { padding: 2px 12px 2px 0; text-align: right; color: #e8e8ed; }
.call th { color: var(--d-muted); font-weight: 500; }
.call td:first-child, .call th:first-child { text-align: left; }
.typing::after { content: "\258D"; animation: blink 1s steps(1) infinite; color: #7ff5c4; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }
.term-foot { padding: 14px 20px; border-top: 1px solid var(--d-line); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--d-muted); }
.agent-chip { padding: 5px 10px; border-radius: 980px; background: #2a2a2d; color: var(--d-soft); }
.agent-chip.on { background: rgba(62, 240, 164, .14); color: #fff; box-shadow: inset 0 0 0 1px var(--aurora-1); }
.zoombox { position: relative; border-radius: 28px; overflow: hidden; background: #1f1f1f; aspect-ratio: 2400 / 1370; }
.zoombox img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 0 0; transition: transform 1.6s cubic-bezier(.45, .05, .2, 1); }
.zoombox .tag { position: absolute; left: 14px; top: 14px; font-size: 12px; font-weight: 600; line-height: 1; color: #fff; background: rgba(22, 22, 23, .78);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 8px 12px; border-radius: 980px; }
.connect { margin-top: 26px; display: grid; gap: 10px; }
.connect p { margin: 0; }
.connect code { display: block; padding: 16px 18px; border-radius: 16px; background: var(--d-card); color: #d2d2d7; overflow-x: auto; white-space: pre; font-size: 13px; }

/* -------------------------------------------------------------------------------------- the semantic model */
.chips-l { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 0; list-style: none; }
.chips-l li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; padding: 8px 14px; border-radius: 980px; background: rgba(127, 127, 127, .12); color: var(--fg-c, var(--d-fg)); }
.chips-l svg { width: 16px; height: 16px; color: var(--muted-c, var(--d-soft)); }
.tmdl { margin-top: 22px; border-radius: 20px; background: #161617; color: #e8e8ed; padding: 20px 22px; font: 13.5px/1.7 var(--mono); overflow-x: auto; white-space: pre; }
.tmdl .k { color: #c792ea; } .tmdl .s { color: #ffcb6b; } .tmdl .c { color: #8e8e93; font-style: italic; } .tmdl .f { color: #82aaff; } .tmdl .p { color: #89ddff; }
.card { background: var(--card); border-radius: 28px; padding: 30px; min-width: 0; }
.light-sec:not(.alt) .card { background: var(--bg-alt); }
.dark .card { background: var(--d-card); }
.ask label { display: block; font-size: 14px; font-weight: 600; color: var(--muted-c, var(--d-soft)); }
.ask .row { display: flex; gap: 10px; margin: 14px 0; }
.field, .ask input, .mathplay textarea { font: 500 17px/1.3 var(--mono); padding: 13px 16px; border-radius: 12px; border: 1px solid var(--line-c, var(--d-line));
  background: var(--bg); color: var(--fg-c, var(--d-fg)); min-width: 0; }
.ask input { flex: 1; }
.ask input:focus, .mathplay textarea:focus { outline: 2px solid var(--blue-bright); outline-offset: 1px; }
.ask .answer { min-height: 104px; border-radius: 16px; padding: 18px 20px; background: var(--bg); font: 15px/1.5 var(--mono); color: var(--muted-c, var(--d-soft)); box-shadow: inset 0 0 0 1px var(--line-c, var(--d-line)); }
.ask .answer .v { font: 600 44px/1.05 var(--font); letter-spacing: -0.02em; color: var(--fg-c, var(--d-fg)); display: block; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.ask .answer.ok { box-shadow: inset 0 0 0 1px rgba(48, 209, 88, .5); }
.ask .answer.no { box-shadow: inset 0 0 0 1px rgba(255, 105, 97, .6); background: rgba(255, 105, 97, .06); }
.ask .answer.no b { color: #d70015; }
:root[data-theme="dark"] .ask .answer.no b { color: #ff6961; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ask .answer.no b { color: #ff6961; } }
.ask .sugg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ask .sugg button, .mathplay .presets button { font: 500 13px/1 var(--mono); padding: 8px 11px; border-radius: 980px; border: 0; background: rgba(127, 127, 127, .12); color: var(--fg-c, var(--d-fg)); cursor: pointer; }
.ask .sugg button:hover, .mathplay .presets button:hover { background: rgba(127, 127, 127, .22); }
.ask .sugg button.bad { color: #d70015; box-shadow: inset 0 0 0 1px rgba(255, 105, 97, .5); background: transparent; }
:root[data-theme="dark"] .ask .sugg button.bad { color: #ff6961; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ask .sugg button.bad { color: #ff6961; } }
.ask .small { margin: 16px 0 0; }

/* --------------------------------------------------------------------------------------- versions: timeline */
.timeline { list-style: none; margin: 34px 0 0; padding: 0 0 0 28px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 2px; background: var(--line); }
.timeline li { position: relative; margin: 0 0 14px; padding: 14px 18px; background: var(--card); border-radius: 18px;
  opacity: .35; transform: translateX(8px); transition: opacity .5s, transform .5s; }
.light-sec:not(.alt) .timeline li { background: var(--bg-alt); }
.timeline li.on { opacity: 1; transform: none; }
.timeline li::before { content: ""; position: absolute; left: -27px; top: 19px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 3px solid var(--blue-bright); }
.timeline li.bad::before { border-color: #ff453a; }
.timeline li.good::before { border-color: var(--good); background: var(--good); }
.timeline .id { font: 600 12.5px/1 var(--mono); color: var(--link); }
.timeline li.bad .id { color: #d70015; }
.timeline li.good .id { color: #248a3d; }
.timeline .m { font-weight: 600; margin-top: 6px; color: var(--fg); }
.timeline .d { font: 13px/1.5 var(--mono); color: var(--muted); margin-top: 4px; }
.js .timeline li:not(.on) { opacity: .35; }
html:not(.js) .timeline li { opacity: 1; transform: none; }
/* in a dark chapter */
.dark .timeline::before { background: var(--d-line); }
.dark .timeline li { background: var(--d-card); }
.dark .timeline li::before { background: #000; }
.dark .timeline .id { color: var(--d-link); }
.dark .timeline li.bad .id { color: #ff6961; }
.dark .timeline li.good .id { color: var(--good); }
.dark .timeline .m { color: var(--d-fg); }
.dark .timeline .d { color: var(--d-muted); }

/* --------------------------------------------------------------------------------------------------- trust */
.spy { width: min(300px, 80%); margin: 0 0 28px; color: #fff; }
.spy .lens { animation: glint 5s ease-in-out infinite; }
@keyframes glint { 0%, 70%, 100% { opacity: 0; } 80% { opacity: .9; } }
.spy .head { transform-origin: 50% 80%; animation: nod 6s ease-in-out infinite; }
@keyframes nod { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-2.5deg); } }
.claims-l { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 16px; }
.claims-l li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; font-size: 17px; line-height: 1.47; color: var(--muted-c, var(--d-soft)); }
.claims-l li b { color: var(--fg-c, var(--d-fg)); font-weight: 600; }
.claims-l svg { width: 22px; height: 22px; color: var(--d-soft); margin-top: 1px; }
.light-sec .claims-l svg { color: var(--muted); }
.trust-card { position: relative; max-width: 380px; margin: 0 auto; }
.badge-out { position: absolute; right: -8px; top: -14px; z-index: 2; background: var(--good); color: #000; font-size: 12px; font-weight: 600; line-height: 1; padding: 8px 12px; border-radius: 980px; }

/* ------------------------------------------------------------------------------------------------- gallery */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 48px 0 28px; }
.filters button { font-size: 14px; line-height: 1; padding: 10px 15px; border-radius: 980px; border: 0; background: rgba(127, 127, 127, .12); color: var(--fg); cursor: pointer; transition: background .2s, color .2s; }
.filters button:hover { background: rgba(127, 127, 127, .22); }
.filters button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.filters button span { opacity: .55; margin-left: 5px; font-variant-numeric: tabular-nums; }
.masonry { columns: 3 340px; column-gap: 22px; }
.tile { break-inside: avoid; margin: 0 0 22px; border-radius: 18px; overflow: hidden; background: var(--card); border: 0; cursor: zoom-in;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); display: block; width: 100%; padding: 0; text-align: left; color: inherit; font: inherit;
  box-shadow: 0 0 0 1px rgba(127, 127, 127, .18); }
.light-sec:not(.alt) .tile { background: var(--bg-alt); }
.tile:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(127, 127, 127, .18), 0 18px 40px -18px rgba(0, 0, 0, .35); }
.tile img { width: 100%; height: auto; background: var(--bg-alt); }
.tile .cap { padding: 12px 16px 14px; display: flex; gap: 10px; align-items: baseline; }
.tile .cap b { font-weight: 600; font-size: 14px; color: var(--fg); flex: 1; min-width: 0; }
.tile .cap small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.tile.hide { display: none; }
/* the gallery is a dark chapter: the visuals themselves still follow the reader's theme (site.js swaps them) */
.dark .filters button { background: #1d1d1f; color: var(--d-soft); }
.dark .filters button:hover { background: #2a2a2d; color: var(--d-fg); }
.dark .filters button[aria-pressed="true"] { background: var(--d-fg); color: #000; }
.dark .tile { background: var(--d-card); box-shadow: none; }
.dark .tile:hover { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8); }
.dark .tile img { background: #1f1f1f; }
.dark .tile .cap b { color: var(--d-fg); }
.dark .tile .cap small { color: var(--d-muted); }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: none; place-items: center; padding: 64px 76px; color: var(--d-fg); }
.lightbox.open { display: grid; }
.lightbox figure { margin: 0; max-width: min(1500px, 100%); max-height: 100%; display: grid; gap: 14px; }
.lightbox img { max-height: calc(100svh - 180px); width: auto; margin: 0 auto; border-radius: 14px; }
.lightbox figcaption { text-align: center; font-size: 17px; font-weight: 600; }
.lightbox figcaption small { display: block; color: var(--d-soft); margin-top: 4px; font-size: 14px; font-weight: 400; }
.lightbox .lb-btn, .lightbox .lb-close { position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #333336; color: #d2d2d7; cursor: pointer; display: grid; place-items: center; font-size: 22px; line-height: 1; }
.lightbox .lb-btn:hover, .lightbox .lb-close:hover { background: #424245; color: #fff; }
.lightbox .lb-btn { top: 50%; transform: translateY(-50%); }
.lightbox .lb-prev { left: 16px; } .lightbox .lb-next { right: 16px; }
.lightbox .lb-close { top: 16px; right: 16px; }
@media (max-width: 640px) { .lightbox { padding: 64px 12px 80px; } .lightbox .lb-btn { top: auto; bottom: 16px; transform: none; } }

/* -------------------------------------------------------------------------------------------- chart themes */
.themes { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 34px; margin-top: 56px; align-items: start; }
@media (max-width: 920px) { .themes { grid-template-columns: minmax(0, 1fr); } }
.theme-list { display: grid; gap: 8px; }
.theme-list button { text-align: left; padding: 14px 18px; border-radius: 18px; border: 0; background: var(--card); color: var(--fg); cursor: pointer; transition: box-shadow .2s; font: inherit; }
.light-sec:not(.alt) .theme-list button { background: var(--bg-alt); }
.theme-list button b { display: block; font-size: 17px; line-height: 1.3; font-weight: 600; }
.theme-list button span { display: block; color: var(--muted); font-size: 14px; line-height: 1.43; margin-top: 3px; }
.theme-list button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #0071e3; }
.theme-stage .frame .shot { background: #fff; }
.theme-stage img { transition: opacity .35s; }
.owl { margin-top: 22px; display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 24px; background: var(--card); }
.light-sec:not(.alt) .owl { background: var(--bg-alt); }
.owl svg { width: 54px; height: 54px; flex: none; }
.owl p { margin: 0; color: var(--muted); font-size: 15px; }
.owl p b { color: var(--fg); font-size: 17px; }
.switch { margin-left: auto; position: relative; width: 51px; height: 31px; border-radius: 980px; border: 0; background: #d2d2d7; cursor: pointer; flex: none; transition: background .25s; padding: 0; }
.switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); transition: transform .25s var(--ease); }
.switch[aria-checked="true"] { background: var(--good); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
:root[data-theme="dark"] .switch:not([aria-checked="true"]) { background: #39393d; }

/* ------------------------------------------------------------------------------------------------ finance */
.lens-wrap { position: relative; cursor: crosshair; border-radius: 16px; overflow: hidden; background: #fff; }
.lens-wrap img { width: 100%; height: auto; }
.lens { position: absolute; width: 220px; height: 220px; border-radius: 50%; pointer-events: none; border: 3px solid #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .15);
  background-repeat: no-repeat; opacity: 0; transition: opacity .2s; }
.lens-wrap:hover .lens, .lens-wrap.touch .lens { opacity: 1; }
.lens-hint { position: absolute; right: 12px; top: 12px; font-size: 12px; font-weight: 600; line-height: 1; background: rgba(22, 22, 23, .78); color: #fff; padding: 8px 12px; border-radius: 980px; }

/* ---------------------------------------------------------------------------------------------------- math */
.mathplay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--card); border-radius: 28px; overflow: hidden; margin-top: 56px; }
.light-sec:not(.alt) .mathplay { background: var(--bg-alt); }
@media (max-width: 860px) { .mathplay { grid-template-columns: minmax(0, 1fr); } }
.mathplay .src { padding: 24px; border-right: 1px solid var(--line); display: grid; gap: 12px; align-content: start; }
@media (max-width: 860px) { .mathplay .src { border-right: 0; border-bottom: 1px solid var(--line); } }
.mathplay .src .small { font-weight: 600; }
.mathplay textarea { width: 100%; min-height: 150px; resize: vertical; font: 14.5px/1.6 var(--mono); }
.mathplay .presets { display: flex; flex-wrap: wrap; gap: 8px; }
.mathplay .presets button { font-family: var(--font); font-size: 13px; }
.mathplay .out { padding: 28px; display: grid; place-items: center; min-height: 240px; font-size: 24px; overflow-x: auto; color: var(--fg); }
.mathplay .out .err { font: 14px/1.5 var(--mono); color: #d70015; }
.mathplay .out math { font-size: 1.15em; max-width: 100%; overflow-x: auto; }
@media (max-width: 600px) { .mathplay .out { font-size: 17px; padding: 18px 12px; } }

/* --------------------------------------------------------------------------------------- analytics: one tool */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; margin-top: 22px; }
.bento > * { grid-column: span 2; }
.bento .wide { grid-column: span 4; }
@media (max-width: 980px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento > *, .bento .wide { grid-column: span 2; } }
.bcard { background: var(--d-card); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.bcard img { width: 100%; height: 230px; object-fit: cover; object-position: 30% 22%; }
.bcard .in { padding: 20px 24px 24px; }
.bcard h3 { margin: 0; font-size: 21px; line-height: 1.2; font-weight: 600; letter-spacing: .011em; }
.bcard p { font-size: 15px; line-height: 1.47; margin: 8px 0 0; color: var(--d-soft); }
.lib { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--d-muted); }
.engine-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: 56px 0 0; padding: 0; list-style: none; }
.engine-row li { font: 13px/1 var(--mono); padding: 9px 13px; border-radius: 980px; background: #1d1d1f; color: var(--d-soft); }
.engine-row li b { color: var(--d-fg); font-weight: 600; }

/* ----------------------------------------------------------------------------------------------- notebooks */
.nb { margin-top: 56px; }
.nb-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 30px; margin: 0 auto 28px; border-bottom: 1px solid var(--line); width: fit-content; max-width: 100%; }
.nb-tabs [role=tab] { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 14px 0 15px; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--muted); cursor: pointer; transition: color .2s, border-color .2s; }
.nb-tabs [role=tab]:hover { color: var(--fg); }
.nb-tabs [role=tab][aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); }
.nb-tabs [role=tab]:focus-visible { outline-offset: -2px; }
.nb-panel[hidden] { display: none; }
.nb-pair > * { min-width: 0; }
.nb-switch { display: flex; width: fit-content; margin: 0 auto 18px; padding: 3px; border-radius: 980px; background: rgba(127, 127, 127, .14); }
.nb-switch button { font-size: 14px; line-height: 1; padding: 9px 16px; border-radius: 980px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.nb-switch button[aria-pressed="true"] { background: var(--card); color: var(--fg); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.nb-view { display: none; }
.nb-view.on { display: block; animation: msgin .35s ease both; }
html:not(.js) .nb-view { display: block; margin-top: 18px; }
html:not(.js) .nb-panel[hidden] { display: block; margin-top: 48px; }
html:not(.js) .nb-tabs, html:not(.js) .nb-switch { display: none; }
.nb-says { max-width: 860px; margin: 22px auto 0; text-align: center; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.42; color: var(--muted); }
.nb-says b { color: var(--fg); font-weight: 600; margin-right: 4px; }
.nb-says .lib { display: block; margin: 0 0 8px; color: var(--muted); }
.nb-render { margin-top: clamp(64px, 8vw, 96px); }
.facts { list-style: none; margin: 56px 0 0; padding: 36px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; border-top: 1px solid var(--line); }
.facts li { font-size: 15px; line-height: 1.47; color: var(--muted); }
.facts b { display: block; font-size: 32px; line-height: 1.1; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; margin-bottom: 6px; }
.facts h3 { margin: 0 0 6px; font-size: 21px; line-height: 1.2; font-weight: 600; letter-spacing: .011em; color: var(--fg); }
.facts .ic { width: 26px; height: 26px; color: var(--muted); margin-bottom: 12px; }
.facts p { margin: 0; }
@media (max-width: 860px) { .facts { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------------------------------- excel */
.xl { background: #fff; color: #1f2328; border-radius: 16px; overflow: hidden; font: 13px/1 "Segoe UI", Calibri, Arial, sans-serif; letter-spacing: 0; box-shadow: 0 0 0 1px rgba(127, 127, 127, .25); }
.xl .ribbon { background: #1f6e43; color: #fff; padding: 10px 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.xl .ribbon span { opacity: .8; font-weight: 500; }
.xl .fx { display: flex; align-items: center; border-bottom: 1px solid #d5d8dd; }
.xl .fx .ref { width: 64px; padding: 9px 8px; border-right: 1px solid #d5d8dd; color: #555; text-align: center; flex: none; }
.xl .fx .f { padding: 9px 10px; font-family: Consolas, var(--mono); font-size: 12.5px; color: #1f2328; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.xl .fx .f i { color: #2d7d46; font-style: normal; }
.xl table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.xl th { background: #f3f4f6; color: #5f6670; font-weight: 500; border: 1px solid #e1e4e8; padding: 6px; font-size: 12px; }
.xl th:first-child { width: 38px; }
.xl td { border: 1px solid #e6e8eb; padding: 8px 9px; height: 34px; color: #1f2328; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xl td.n { text-align: right; font-variant-numeric: tabular-nums; }
.xl td.h { font-weight: 700; background: #f8faf9; }
.xl td.sel { outline: 2px solid #1f6e43; outline-offset: -2px; background: #eef7f1; }
.xl tr td:first-child { background: #f3f4f6; color: #5f6670; text-align: center; font-size: 12px; }

/* ------------------------------------------------------------------------------------------- power bi: row! */
/* the crew of six at dawn (a Blender loop, its still without motion), the crew's names under their seats */
.row-box { position: relative; border-radius: 28px; overflow: hidden; background: #0b1630; aspect-ratio: 1920 / 1000; }
.row-media, .row-media img, .row-media video { position: absolute; inset: 0; width: 100%; height: 100%; }
.row-media img, .row-media video { object-fit: cover; }
.row-media video { display: none; opacity: 0; transition: opacity .6s var(--ease); }
.motion .row-media video { display: block; }
.row-media video.playing { opacity: 1; }
.row-box .ro { position: absolute; left: 24px; top: 20px; font-size: clamp(40px, 5.6vw, 80px); line-height: 1; font-weight: 600; letter-spacing: -0.015em; color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, .4); }
.row-box .ro small { display: block; font-size: 14px; line-height: 1.3; font-weight: 500; letter-spacing: -0.016em; color: #e3e6f3; margin-top: 10px; }
.crew { list-style: none; margin: 0; padding: 0; }
.crew li { position: absolute; left: var(--xd); top: calc(var(--yd) + 7%); transform: translateX(-50%); font-size: 11px; font-weight: 600; letter-spacing: .02em;
  color: rgba(245, 245, 247, .82); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); white-space: nowrap; }
.crew li.on { color: #7ff5c4; }
@media (max-width: 734px) {
  .row-box { aspect-ratio: 4 / 3; }
  /* the boat is small on a phone: every other name a line lower, so each stays under its rower */
  .crew li { left: var(--xm); top: calc(var(--ym) + 6%); font-size: 10px; }
  .crew li:nth-child(even) { top: calc(var(--ym) + 6% + 14px); }
}
.ro-steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.ro-steps li { counter-increment: s; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; }
.ro-steps li::before { content: counter(s); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 600; color: #fff; background: #0071e3; }
.ro-steps b { display: block; color: var(--fg); font-size: 19px; font-weight: 600; letter-spacing: .005em; }
.ro-steps span { display: block; color: var(--muted); font-size: 15px; line-height: 1.47; margin-top: 2px; }

/* ----------------------------------------------------------------------------------- performance: the teaser */
.perf-ch .server-pic { margin: 0 auto clamp(40px, 5vw, 64px); max-width: 1180px; }
.perf-ch .server-pic img { width: 100%; height: auto; }
.perf-ch .server-pic figcaption { text-align: center; margin-top: 2px; }

/* -------------------------------------------------------------------------------------------------- partner */
.partner-card { display: grid; gap: 22px; justify-items: center; padding: clamp(36px, 5vw, 64px) clamp(22px, 4vw, 44px); background: var(--card); border-radius: 28px;
  text-decoration: none; transition: transform .3s var(--ease); }
.light-sec:not(.alt) .partner-card { background: var(--bg-alt); }
.partner-card:hover { transform: translateY(-3px); }
.partner-card img { width: min(360px, 100%); height: auto; }
.partner-card span { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.light-sec .partner-card span { color: var(--muted); }
.partner-card .dark-only { display: none; }
:root[data-theme="dark"] .partner-card .dark-only { display: block; }
:root[data-theme="dark"] .partner-card .light-only { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .partner-card .dark-only { display: block; }
  :root:not([data-theme="light"]) .partner-card .light-only { display: none; }
}

/* -------------------------------------------------------------------------------------------------- download */
.download { position: relative; overflow: hidden; color-scheme: dark;
  background: radial-gradient(900px 420px at 50% 0%, rgba(34, 211, 238, .10), transparent 70%), radial-gradient(700px 360px at 30% 0%, rgba(62, 240, 164, .07), transparent 70%),
              radial-gradient(700px 360px at 72% 0%, rgba(139, 92, 246, .10), transparent 70%), var(--d-bg); }
/* the studio's card (its form), and OpenBI Server's beside it */
.wl { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 64px); margin: 64px auto 0; max-width: 1080px; align-items: start; }
@media (max-width: 860px) { .wl { grid-template-columns: minmax(0, 1fr); } }
.wl-name { margin: 0 0 18px; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; font-weight: 600; letter-spacing: -0.005em; color: var(--d-fg); }
.wl-server { display: grid; gap: 18px; }
.wl-server .wl-name { margin: 0; }
.wl-server .wl-gos { grid-auto-flow: row; }
.wl-server .btn-buy { font-size: 19px; padding: 13px 22px; }
.wl-card { position: relative; background: var(--d-card); border-radius: 28px; padding: clamp(22px, 3vw, 34px); container-type: inline-size; }
.wl-form { display: grid; gap: 16px; }
.wl-form[hidden], .wl-done[hidden] { display: none; }
.wl-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 520px) { .wl-two { grid-template-columns: minmax(0, 1fr); } }
.wl-field { display: grid; gap: 7px; font-size: 14px; font-weight: 600; color: var(--d-soft); }
.wl-field .opt { font-weight: 400; color: var(--d-muted); margin-left: 4px; }
.wl-field input, .wl-field select, .wl-field textarea { font: 400 17px/1.3 var(--font); letter-spacing: -0.022em; color: var(--d-fg); background: #000;
  border: 1px solid #424245; border-radius: 12px; padding: 12px 14px; width: 100%; min-width: 0; }
.wl-field textarea { resize: vertical; min-height: 88px; }
.wl-field input::placeholder, .wl-field textarea::placeholder { color: #6e6e73; }
.wl-field input:focus, .wl-field select:focus, .wl-field textarea:focus { outline: 2px solid var(--blue-bright); outline-offset: 1px; border-color: transparent; }
.wl-field select option { background: #161617; color: #f5f5f7; }
.wl-honey { position: absolute; left: -10000px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.wl-consent { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 14px; color: var(--d-soft); line-height: 1.43; cursor: pointer; }
.wl-consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0071e3; }
.wl-consent .opt { color: var(--d-muted); }
.wl-go { width: 100%; }
.wl-go:disabled { opacity: .6; cursor: progress; }
/* Windows' and the Mac's side by side when the card has room for both, else one under the other */
.wl-gos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
@container (max-width: 470px) { .wl-gos { grid-auto-flow: row; } }
.wl-os { display: grid; gap: 8px; }
.wl-os small { font-size: 12px; line-height: 1.45; color: var(--d-muted); }
.wl-status { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--d-soft); }
.wl-status.err { color: #ff9a8b; }
.wl-privacy { margin: 0; font-size: 12px; line-height: 1.5; color: var(--d-muted); }
.wl-done { text-align: center; padding: 30px 6px 10px; }
.wl-done .wl-big { font-size: clamp(32px, 4vw, 48px); line-height: 1.08; font-weight: 600; letter-spacing: -0.005em; margin: 0 0 14px; }
.wl-done p { color: var(--d-soft); font-size: 17px; }
.wl-done b { color: var(--d-fg); font-weight: 600; }
.wl-done a { color: var(--d-link); }
.wl-done i { font-style: normal; font-weight: 600; color: var(--d-fg); }
.wl-done .btn { margin-top: 10px; }
/* the human check: a checkbox that turns into a spinner while the browser solves the puzzle, then a tick */
.wl-human { display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px; background: #000; border: 1px solid #424245; transition: border-color .25s; }
.wl-human label { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 600; color: var(--d-fg); cursor: pointer; }
.wl-human-box { position: relative; width: 24px; height: 24px; display: grid; place-items: center; flex: none; }
.wl-human-box input { width: 20px; height: 20px; margin: 0; accent-color: #0071e3; cursor: pointer; }
.wl-spin { position: absolute; inset: 1px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .18); border-top-color: var(--blue-bright); animation: wl-spin .8s linear infinite; display: none; }
@keyframes wl-spin { to { transform: rotate(360deg); } }
.wl-human.busy .wl-spin { display: block; }
.wl-human.busy input { opacity: 0; }
.wl-human.busy label, .wl-human.ok label { cursor: default; }
.wl-human.ok { border-color: rgba(48, 209, 88, .6); }
.wl-human.ok input { opacity: 0; }
.wl-human.ok .wl-human-box::after { content: ""; position: absolute; inset: 1px; border-radius: 50%; background: var(--good)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.wl-human.ok label { color: var(--good); }
.wl-human.err label { color: #ff9a8b; }
.wl-human small { font-size: 12px; line-height: 1.45; color: var(--d-muted); padding-left: 36px; }
.metas { display: grid; gap: 10px; margin: 48px auto 0; max-width: var(--wrap); }
.meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--d-muted); }
.meta span { display: inline-flex; gap: 8px; align-items: center; }
.meta svg { width: 16px; height: 16px; color: var(--d-soft); }
:root[data-os="mac"] .metas .meta[data-dl="mac"] { order: -1; }

/* -------------------------------------------------------------------------------------------- footnotes */
.notes { background: var(--bg-alt); color: var(--muted); font-size: 12px; line-height: 1.5; letter-spacing: -0.01em; padding: 40px 0 64px; }
.notes ol { margin: 0; padding-left: 1.6em; display: grid; gap: 10px; }
.notes li:target { color: var(--fg); }
.notes a { color: var(--link); overflow-wrap: anywhere; }
.legal { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 18px; display: grid; gap: 8px; }
.legal p { margin: 0; }
.foot { background: var(--bg-alt); color: var(--muted); font-size: 12px; padding: 0 0 40px; }
.foot .wrap { border-top: 1px solid var(--line); padding-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px 24px; flex-wrap: wrap; }
.foot a { color: var(--fg); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot .brand { color: var(--fg); font-size: 13px; }
.foot .brand .mark { width: 20px; height: 20px; font-size: 9px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* ------------------------------------------------------------------- the narration (the night's own panel) */
.tour { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 160%); z-index: 60; width: min(800px, calc(100% - 24px)); background: rgba(22, 22, 23, .9); color: var(--d-fg);
  border-radius: 22px; padding: 12px 12px 12px 16px; display: flex; align-items: center; gap: 12px; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .08);
  visibility: hidden; transition: transform .45s cubic-bezier(.2, .8, .2, 1), visibility 0s .45s; }
/* off screen and out of the tab order until the narration starts */
.tour.on { transform: translate(-50%, 0); visibility: visible; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.tour .meter { width: 46px; height: 32px; flex: none; }
.tour p.lyric { margin: 0; flex: 1; min-width: 0; font-size: 17px; line-height: 1.45; font-weight: 600; letter-spacing: -0.01em; height: calc(1.45em * 3); overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 68%, rgba(0, 0, 0, .3)); mask-image: linear-gradient(#000 68%, rgba(0, 0, 0, .3)); color: var(--d-fg); }
.lyric-in { display: block; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.lyric .w { color: rgba(245, 245, 247, .34); transition: color .16s, text-shadow .2s; }
.lyric .w.said { color: #f5f5f7; }
.lyric .w.now { color: #7ff5c4; text-shadow: 0 0 16px rgba(127, 245, 196, .55); }
.tour button { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #333336; color: #fff; cursor: pointer;
  display: grid; place-items: center; font-size: 15px; line-height: 1; padding: 0; transition: background .2s, opacity .2s; }
.tour button:hover { background: #424245; }
.tour #tourMusic[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
@media (max-width: 640px) {
  .tour { left: 10px; right: 10px; width: auto; bottom: 10px; transform: translateY(170%); flex-wrap: wrap; gap: 8px 10px; padding: 14px 14px 10px; }
  .tour.on { transform: none; }
  .tour p.lyric { flex: 1 0 100%; order: -1; font-size: 18px; }
  .tour .meter { margin-right: auto; }
  .tour button { width: 36px; height: 36px; }
}

/* print: the copy, not the night */
@media print { .chapters, .gbar, .tour, canvas, video { display: none !important; } .dark, .night, .scene, .download { background: #fff !important; color: #000 !important; } }

/* -------------------------------------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}
.nw { white-space: nowrap; }