@font-face { font-family: 'Plex Sans'; src: url(fonts/ibm-plex-sans-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex Sans'; src: url(fonts/ibm-plex-sans-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Plex Sans'; src: url(fonts/ibm-plex-sans-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url(fonts/ibm-plex-mono-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url(fonts/ibm-plex-mono-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Source Serif'; src: url(fonts/source-serif-4.woff2) format('woff2'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'Source Serif'; src: url(fonts/source-serif-4-italic.woff2) format('woff2'); font-weight: 200 900; font-style: italic; font-display: swap; }

:root {
  --bg: #080b0e;
  --panel: #0e1317;
  --raised: #141a20;
  --rule: #1f282f;
  --rule-hi: #2c3740;
  --ink: #dde4ea;
  --dim: #8592a0;
  --faint: #56636e;
  --accent: #3fc6e3;
  --accent-ink: #061015;
  --serif: 'Source Serif', Georgia, serif;
  --sans: 'Plex Sans', system-ui, sans-serif;
  --mono: 'Plex Mono', ui-monospace, monospace;
  --in: cubic-bezier(.2, .7, .1, 1);
  --move: cubic-bezier(.65, 0, .35, 1);
  --gutter: clamp(16px, 4vw, 64px);
  --max: 1440px;
  color-scheme: dark;
}

/* Light: the app's Price list palette 2 in light, following the system or the theme switch. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --bg: #f3f6f8;
    --panel: #f8fafb;
    --raised: #ffffff;
    --rule: #d9e0e5;
    --rule-hi: #b6c0c8;
    --ink: #0c1318;
    --dim: #4f5d68;
    --faint: #66727c;
    --accent: #006a86;
    --accent-ink: #ffffff;
    color-scheme: light;
  }
}
:root[data-theme='light'] {
  --bg: #f3f6f8;
  --panel: #f8fafb;
  --raised: #ffffff;
  --rule: #d9e0e5;
  --rule-hi: #b6c0c8;
  --ink: #0c1318;
  --dim: #4f5d68;
  --faint: #66727c;
  --accent: #006a86;
  --accent-ink: #ffffff;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; }
img { display: block; max-width: 100%; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Brand: the app's own wordmark, «DB» over the double total rule. */
.wm { display: inline-flex; color: var(--ink); text-decoration: none; }
.wm-svg { height: 24px; width: auto; overflow: visible; }
.wm-rule { fill: var(--accent); }
.wm.small .wm-svg { height: 20px; }

.nav { position: fixed; inset: 0 0 auto; z-index: 10; display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 var(--gutter); background: transparent; border-bottom: 1px solid transparent; transition: border-color .4s, background-color .4s; }
.nav.scrolled { border-bottom-color: var(--rule); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); }
.nav nav { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 28px); font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.nav nav a { text-decoration: none; color: var(--dim); transition: color .2s; }
.nav nav a.gh { display: inline-flex; }
.nav nav a:hover { color: var(--ink); }
/* Letter-spacing also follows the last letter: the extra left padding puts the label back in the middle of its box. */
.nav nav .lang, .theme-switch, .sound-switch { display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 7px 0 calc(7px + .14em); border: 1px solid var(--rule-hi); color: var(--dim); }
.nav nav .lang:hover { border-color: var(--dim); }
.gh { display: inline-flex; opacity: .8; transition: opacity .2s, transform .3s var(--in); }
.gh:hover { opacity: 1; transform: translateY(-1px); }
.gh img { width: 20px; height: 20px; }
@media (prefers-color-scheme: light) { :root:not([data-theme='dark']) .gh img { filter: brightness(.06); } }
:root[data-theme='light'] .gh img { filter: brightness(.06); }
.theme-switch, .sound-switch { background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transition: color .2s, border-color .2s; }
.theme-switch:hover, .sound-switch:hover { color: var(--ink); border-color: var(--dim); }
.sound-switch[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.progress { position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); }

.kicker, .fig-no, .fig-caption { font: 500 12px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.fig-no { color: var(--accent); margin: 0 0 14px; }
.fig-caption .fig-no { margin: 0 10px 0 0; }

.btn { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border: 1px solid var(--rule-hi); color: var(--ink); background: var(--panel); font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: background .2s, border-color .2s, transform .2s var(--in); }
.btn:hover { border-color: var(--dim); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Hero */
.hero { position: relative; min-height: 100svh; padding: 96px var(--gutter) 48px; display: grid; grid-template-rows: auto 1fr auto; gap: 36px; max-width: 1920px; margin: 0 auto; overflow-x: clip; }
.hero-copy { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: 'k k' 'h l' 'h c'; column-gap: clamp(32px, 5vw, 96px); align-items: end; }
.hero-copy .kicker { grid-area: k; }
.hero-copy h1 { grid-area: h; margin-bottom: 0; }
.hero-copy .lede { grid-area: l; }
.hero-copy .cta { grid-area: c; margin-top: 22px; }
@media (max-width: 900px) { .hero-copy { grid-template-columns: 1fr; grid-template-areas: 'k' 'h' 'l' 'c'; } .hero-copy h1 { margin-bottom: 20px; } }
.hero h1 { text-wrap: balance; margin: 18px 0 20px; font: 400 clamp(40px, 5.4vw, 84px)/1.02 var(--serif); letter-spacing: -.025em; }
.hero h1 em { color: var(--ink); }
.lede { margin: 0; max-width: 760px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; }
.dim { color: var(--dim); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }

.stage { perspective: 2400px; perspective-origin: 50% 30%; display: grid; place-items: center; min-height: 0; }
.rig { width: min(100%, 1320px); transform-style: preserve-3d; transform: translate(var(--rise-x, 0px), calc(var(--lift, 0px) + var(--rise, 0px))) rotateX(calc(var(--tilt, 0deg) + var(--py, 0deg))) rotateY(var(--px, 0deg)); transform-origin: 50% 0; transition: transform 1.6s var(--move); }
.hero.settled .rig { transition: transform .5s var(--in); }
.hero.measure *, .hero.measure { transition: none !important; }
.hero { --ax: 50deg; --az: -30deg; --s: .74; --gap: 72px; }
.hero.assembled { --ax: 0deg; --az: 0deg; --s: 1; --gap: 0px; }
.win { position: relative; aspect-ratio: 1440 / 900; transform-style: preserve-3d; transform: rotateX(var(--ax)) rotateZ(var(--az)) scale3d(var(--s), var(--s), var(--s)); transition: transform 1.6s var(--move); }
.js .hero:not(.ready):not(.settled) .win { visibility: hidden; }
/* Each layer flies in from its own direction and depth (--ox/--oy/--oz/--or, set per layer), one after the other. */
.win > .layer { opacity: 0; transform: translate3d(var(--ox), var(--oy), calc(var(--z) * var(--gap) + var(--oz))) rotateZ(var(--or)); transition: transform 1.3s cubic-bezier(.25, .75, .3, 1) calc(var(--i) * 100ms), opacity .5s linear calc(var(--i) * 100ms); }
.hero.in .win > .layer { opacity: 1; transform: translate3d(0, 0, calc(var(--z) * var(--gap))) rotateZ(0deg); }
.hero.assembled .win > .layer { transition: transform 1.6s var(--move); }
.win > .layer { position: absolute; background-size: 100% 100%; transform-style: preserve-3d; backface-visibility: hidden; }
.win > .layer::before { content: ''; position: absolute; inset: 0; border: 2px solid color-mix(in srgb, var(--accent) 0%, transparent); transition: border-color .6s; }
.win > .flat { position: absolute; inset: 0; background-size: 100% 100%; opacity: 0; }
.win > .frame { position: absolute; inset: -1px; border: 1px solid var(--rule-hi); pointer-events: none; opacity: 0; }
.callout { position: absolute; left: 100%; top: 50%; display: flex; align-items: center; gap: 8px; white-space: nowrap; font: 500 30px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); opacity: 0; transform: translateX(-12px); transition: opacity .5s, transform .7s var(--in); }
.callout::before { content: ''; width: 72px; border-top: 1px solid var(--accent); }
.callout.left { left: auto; right: 100%; flex-direction: row-reverse; transform: translateX(12px); }

.hero.in .layer::before { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
/* The labels come in once every layer has landed, one after the other. */
.hero.labels .callout { opacity: 1; transform: none; transition-delay: calc(var(--i) * 70ms); }
.hero.assembled .layer::before { border-color: transparent; }
.hero.assembled .callout { opacity: 0; transition-duration: .25s; transition-delay: 0s; }
.hero.settled .flat, .hero.settled .frame { opacity: 1; }
.hero.settled .layer { visibility: hidden; }
/* Once the window has closed, the exploded drawing's labels leave the page (and the reading order) for good. */
.hero.settled .callout { display: none; }
.hero.phone .win { animation: from-right 1.2s var(--in) .35s backwards; }
@keyframes from-right { from { transform: translateX(100vw); } }
.hero-cap { margin: 0; justify-self: center; text-align: center; }

.js .hero-copy > :not(h1), .js .hero h1 .line { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--in), transform 1.1s var(--in); }
.js .hero h1 .line { display: inline-block; clip-path: inset(0 0 100% 0); transform: translateY(.5em); transition: clip-path 1s var(--in), transform 1.1s var(--in), opacity .1s; }
.js .hero.assembled .hero-copy > *, .js .hero.assembled h1 .line { opacity: 1; transform: none; clip-path: inset(-.1em -.1em -.25em -.1em); }
.js .hero.assembled h1 .line:nth-child(2) { transition-delay: .64s; }
.hero.assembled .hero-copy > :nth-child(1) { transition-delay: .5s; }
.hero.assembled .hero-copy > :nth-child(2) .line:first-child { transition-delay: .52s; }
.hero.assembled .hero-copy > :nth-child(3) { transition-delay: .76s; }
.hero.assembled .hero-copy > :nth-child(4) { transition-delay: .9s; }
/* On a phone the copy is there from the first paint (the window still slides in): Chrome counts a text that fades in only once it has finished. */
@media (max-width: 900px) { .js .hero-copy > :not(h1), .js .hero h1 .line { opacity: 1; transform: none; clip-path: none; transition: none; } }

/* Tour: one window stays, the figures change around it. */
.tour { position: relative; height: calc(var(--steps, 6) * 110svh); }
.tour-sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: clamp(24px, 4vw, 72px); align-items: center; padding: 72px var(--gutter) 40px; max-width: 1920px; margin: 0 auto; }
.tour-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tour-list li { position: relative; padding: 14px 0 14px 18px; border-left: 2px solid var(--rule); color: var(--faint); cursor: pointer; transition: color .5s, border-color .5s; }
.tour-list li::before { content: ''; position: absolute; left: -2px; top: 0; width: 2px; height: 100%; background: var(--accent); transform-origin: 50% 0; transform: scaleY(0); transition: transform .2s linear; }
.tour-list li.on::before { transform: scaleY(var(--step, 0)); }
.tour-list li:hover { color: var(--dim); }
.tour-list li .fig-no { margin: 0 0 6px; color: inherit; }
.tour-list li h3 { margin: 0; font: 400 24px/1.15 var(--serif); letter-spacing: -.01em; }
.tour-list li p { display: grid; grid-template-rows: 0fr; margin: 0; overflow: hidden; color: var(--dim); font-size: 16px; transition: grid-template-rows .6s var(--move), margin .6s var(--move); }
.tour-list li p > span { min-height: 0; }
.tour-list li.on { color: var(--ink); border-left-color: var(--rule-hi); }
.tour-list li.on .fig-no { color: var(--accent); }
.tour-list li.on p { grid-template-rows: 1fr; margin-top: 8px; }
.tour-frame { min-width: 0; }
.tour-win { position: relative; aspect-ratio: 1440 / 900; overflow: hidden; border: 1px solid var(--rule-hi); background: var(--panel); }
/* The recordings sit side by side like frames on a strip: the next one pushes in from the right edge, the last one leaves to the left. */
.shot { position: absolute; inset: 0; transform: translateX(100%); transition: transform .9s var(--move); }
.shot.on { transform: none; }
.shot.out { transform: translateX(-100%); }
.shot video, .clip-box video, .tour-list .crop video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--panel); }
.tour-more { display: inline-flex; gap: 10px; margin: 26px 0 0 20px; color: var(--dim); font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: color .2s; }
.tour-more:hover { color: var(--ink); }
.tour-more span { color: var(--accent); transition: transform .3s var(--in); }
.tour-more:hover span { transform: translateX(3px); }

/* Skins */
.sec-head { max-width: 900px; margin: 0 auto 40px; padding: 0 var(--gutter); text-align: center; }
.sec-head h2, .download h2 { text-wrap: balance; margin: 0 0 14px; font: 400 clamp(34px, 4.6vw, 64px)/1.05 var(--serif); letter-spacing: -.02em; }
.sec-head h2 em { color: var(--dim); }
/* The second half of a heading wraps as one piece, never leaving its first word at the end of the line above. */
.sec-head h2 em, .download h2 em { display: inline-block; }
.sec-lede { margin: 0 auto; max-width: 640px; color: var(--dim); font-size: 18px; }
.skins { padding: 18vh 0 12vh; overflow-x: clip; }
.skin-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; padding: 0 var(--gutter); margin-bottom: 36px; }
.seg { display: inline-flex; flex-wrap: wrap; justify-content: center; padding: 1px 0 0 1px; }
.seg button { height: 34px; padding: 0 14px; margin: -1px 0 0 -1px; white-space: nowrap; border: 1px solid var(--rule-hi); background: none; color: var(--dim); font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: color .2s, background .2s; }
.seg button:hover { color: var(--ink); }
.seg button[aria-checked='true'] { background: var(--ink); color: var(--bg); }
.skin-stage { padding: 0 var(--gutter); }
.skin-win { position: relative; width: min(100%, 1320px); margin: 0 auto; aspect-ratio: 1440 / 900; }
/* The new look pushes the old one off the screen, both from edge to edge, no fade. */
.skin { position: absolute; inset: 0; background-size: 100% 100%; outline: 1px solid var(--rule-hi); transition: transform 1.1s var(--move); }
.skin.enter { transform: translateX(100vw); }
.skin.leave { transform: translateX(-100vw); }
.skin-cap { text-align: center; margin: 22px var(--gutter) 0; font: 400 13px/1.5 var(--mono); color: var(--dim); }
.skin-name { color: var(--ink); text-transform: uppercase; letter-spacing: .14em; margin-right: 10px; }

/* Engines */
.engines { padding: 12vh var(--gutter); content-visibility: auto; contain-intrinsic-size: auto 900px; }
.eng-grid { list-style: none; margin: 0 auto; padding: 0; width: min(100%, 1120px); display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1px; }
.eng-grid li { box-shadow: 0 0 0 1px var(--rule); display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 18px 20px; background: var(--bg); clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--in), background-color .3s; transition-delay: calc(var(--i) * 30ms), 0s; }
.engines.seen .eng-grid li { clip-path: inset(-1px); }
.eng-grid li:hover { background: var(--panel); }
.eng-grid svg, .eng-grid .mono { grid-row: 1 / span 2; width: 28px; height: 28px; fill: var(--dim); transition: fill .3s; }
.eng-grid li:hover svg { fill: var(--ink); }
.eng-grid .mono { display: grid; place-items: center; font: 500 12px/1 var(--mono); color: var(--dim); border: 1px solid var(--rule-hi); }
.eng-grid b { font: 500 15px/1.2 var(--sans); color: var(--ink); }
.eng-more { margin: 28px auto 0; text-align: center; color: var(--dim); font: 400 13px/1.5 var(--mono); }
.eng-grid span:not(.mono) { font: 400 13px/1.4 var(--mono); color: var(--faint); }

/* Try it */
.try { padding: 12vh 0; }
.try-frame { position: relative; width: min(100% - 2 * var(--gutter), 1320px); margin: 0 auto; aspect-ratio: 1440 / 900; border: 1px solid var(--rule-hi); background: var(--panel) center / 100% 100%; }
.try-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg); }
.try-start { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: color-mix(in srgb, var(--bg) 55%, transparent); cursor: pointer; }
.try-start:hover .btn { transform: translateY(-1px); }

.try-full { margin: 18px 0 0; text-align: center; font: 500 12px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.try-full a { color: var(--dim); text-decoration: none; transition: color .2s; }
.try-full a:hover { color: var(--ink); }

/* Demo at full size: a slim bar, then the app filling the rest of the window; the page itself never scrolls. */
.demo-page { margin: 0; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.demo-bar { display: flex; align-items: center; gap: 18px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--rule); }
.demo-bar .wm-svg { height: 18px; }
.demo-title { margin: 0; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.demo-title span { margin-left: 10px; color: var(--faint); }
.demo-bar nav { display: flex; align-items: center; gap: 16px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.demo-bar nav a { color: var(--dim); text-decoration: none; white-space: nowrap; }
.demo-bar nav a:hover { color: var(--ink); }
.demo-bar .lang { display: inline-flex; align-items: center; height: 22px; padding: 0 7px 0 calc(7px + .14em); border: 1px solid var(--rule-hi); }
.demo-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }
@media (max-width: 700px) { .demo-title span, .demo-back { display: none; } }

/* Download */
.download { padding: 14vh var(--gutter) 10vh; text-align: center; }
.download h2 em { color: var(--dim); }
.dl-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 280px)); justify-content: center; gap: 12px; padding: 0; margin: 40px 0 28px; }
/* The cards stretch to the tallest one; the mark, the name and the formats sit on the same lines in every card. */
.dl-list li { display: grid; }
.dl { display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: 10px; padding: 24px 22px 22px; border: 1px solid var(--rule-hi); text-decoration: none; text-align: left; background: var(--panel); transition: border-color .2s, transform .3s var(--in); }
.dl:hover { border-color: var(--accent); transform: translateY(-2px); }
.dl b { font: 400 26px/1 var(--serif); }
.dl-mark { width: 26px; height: 26px; fill: var(--ink); margin-bottom: 8px; }
.dl span { font: 400 12px/1.4 var(--mono); color: var(--dim); }
.dl[aria-disabled] { cursor: default; }
.dl[aria-disabled]:hover { border-color: var(--rule-hi); transform: none; }
.dl-note { color: var(--faint); font: 400 13px/1.6 var(--mono); }
.foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 28px var(--gutter); border-top: 1px solid var(--rule); color: var(--faint); font: 400 12px/1.4 var(--mono); }

/* Reveals: each line rises out of its own edge, as if from under a rule; nothing fades. */
.js .sec-head > *, .js .skin-controls, .js .dl-list li, .js .download h2, .js .feat-copy > * { clip-path: inset(0 0 100% 0); transform: translateY(.6em); transition: clip-path 1s var(--in), transform 1.1s var(--in); }
.js .seen .sec-head > *, .js .seen .skin-controls, .js .seen .dl-list li, .js .seen.download h2, .js .seen .feat-copy > * { clip-path: inset(-.2em -.2em -.3em -.2em); transform: none; }
.js .seen .sec-head > :nth-child(2) { transition-delay: .08s; }
.js .seen .sec-head > :nth-child(3) { transition-delay: .16s; }
.js .seen .dl-list li:nth-child(2) { transition-delay: .08s; }
.js .seen .dl-list li:nth-child(3) { transition-delay: .16s; }

@media (max-width: 900px) {
  .tour { height: auto; }
  .tour-sticky { position: static; height: auto; display: block; padding: 40px var(--gutter); }
  .tour-frame { display: none; }
  .tour-list { gap: 48px; }
  .tour-list li { cursor: default; color: var(--ink); border-left-color: var(--accent); }
  .tour-list li .fig-no { color: var(--accent); }
  .tour-list li p { grid-template-rows: 1fr; margin: 8px 0 16px; }
  .tour-list li .crop { aspect-ratio: 4 / 5; border: 1px solid var(--rule-hi); background: var(--panel); }
  .tour-more { margin: 40px 0 0; }
  .dl-list { grid-template-columns: 1fr; }
  .nav nav a { display: none; }
  .nav nav a.lang { display: inline-flex; }
  .hero { --s: .56; --gap: 36px; --rise-x: 0%; }
  .callout { display: none; }
}
@media (min-width: 901px) { .tour-list li .crop { display: none; } }

@media (max-width: 600px) {
  .eng-grid { grid-template-columns: 1fr 1fr; }
  .eng-grid li { grid-template-columns: 22px 1fr; column-gap: 10px; padding: 14px 12px; }
  .eng-grid svg, .eng-grid .mono { width: 22px; height: 22px; }
  .eng-grid .mono { font-size: 10px; }
  .eng-grid b { font-size: 14px; }
  .eng-grid span:not(.mono) { font: 400 12px/1.35 var(--sans); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0s !important; }
}

/* Legal links, consent banner and legal pages */
.foot > :nth-child(2) { text-align: center; }
.foot-legal { display: flex; gap: 18px; justify-self: end; }
.foot-legal a, .foot-legal button { color: var(--faint); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.foot-legal a:hover, .foot-legal button:hover { color: var(--ink); }
.consent { position: fixed; left: 50%; bottom: 20px; z-index: 20; width: min(760px, calc(100% - 32px)); display: flex; align-items: center; gap: 20px; padding: 16px 18px; background: var(--raised); border: 1px solid var(--rule-hi); box-shadow: 0 10px 30px rgb(0 0 0 / .45); font-size: 14px; color: var(--dim); transform: translate(-50%, 140%); transition: transform .9s var(--in); }
.consent.on { transform: translate(-50%, 0); }
.consent p { margin: 0; }
.consent a { color: var(--ink); }
.consent-actions { display: flex; gap: 8px; flex: none; }
@media (max-width: 700px) { .consent { flex-direction: column; align-items: stretch; } .consent-actions { justify-content: flex-end; } .foot { grid-template-columns: 1fr; justify-items: start; } .foot > :nth-child(2) { text-align: left; } .foot-legal { justify-self: start; } }
.legal .nav { position: sticky; }
.legal-body { max-width: 760px; margin: 0 auto; padding: 72px var(--gutter) 120px; color: var(--dim); }
.legal-body h1 { margin: 0 0 8px; font: 400 clamp(36px, 5vw, 56px)/1.05 var(--serif); color: var(--ink); letter-spacing: -.02em; }
.legal-body h2 { margin: 44px 0 10px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
/* 404: the address as a query that finds no rows, then the pages that exist as the rows of a second one. */
.nf { width: min(100% - 2 * var(--gutter), 960px); margin: 0 auto; padding: 14vh 0 120px; }
.nf h1 { margin: 14px 0 56px; font: 400 clamp(44px, 7vw, 104px)/1 var(--serif); letter-spacing: -.03em; text-wrap: balance; }
.nf h1 em { display: inline-block; color: var(--dim); }
.nf-win { border: 1px solid var(--rule-hi); background: var(--panel); margin-bottom: 28px; }
.nf-sql { margin: 0; padding: 22px 24px; overflow-x: auto; font: 400 clamp(14px, 1.6vw, 17px)/1.7 var(--mono); color: var(--ink); white-space: pre-wrap; word-break: break-all; }
.nf-sql b { font-weight: 500; color: var(--accent); }
.nf-sql i { font-style: normal; color: var(--dim); }
.nf-path { color: var(--ink); }
.nf-meta { margin: 0; padding: 9px 24px; border-top: 1px solid var(--rule-hi); border-bottom: 1px solid var(--rule); font: 500 12px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.nf-empty { margin: 0; padding: 28px 24px 30px; color: var(--dim); }
.nf-rows { list-style: none; margin: 0; padding: 0; counter-reset: row; }
.nf-rows li + li { border-top: 1px solid var(--rule); }
.nf-rows a { display: grid; grid-template-columns: 2.2em minmax(9em, 14em) 1fr; align-items: baseline; gap: 16px; padding: 15px 24px; text-decoration: none; color: var(--ink); transition: background-color .2s; }
.nf-rows a::before { counter-increment: row; content: counter(row); font: 400 12px/1 var(--mono); color: var(--faint); }
.nf-rows a:hover { background: var(--raised); }
.nf-rows code { font: 500 14px/1.4 var(--mono); color: var(--accent); }
.nf-rows span { color: var(--dim); }
.nf-rows a:hover span { color: var(--ink); }
@media (max-width: 600px) { .nf-rows a { grid-template-columns: 1.6em 1fr; row-gap: 4px; } .nf-rows span { grid-column: 2; } }
.legal-body p { margin: 0 0 12px; }
.legal-body a { color: var(--accent); }
.legal-date { font: 400 13px/1 var(--mono); color: var(--faint); }
.legal-body table { width: 100%; border-collapse: collapse; font-size: 14px; }
.legal-body th, .legal-body td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.legal-body th { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }

/* The film: offered over the window after the entrance, played in a modal */
.film-link { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 4px; border: 0; background: none; color: var(--dim); font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.film-link span, .film-play > span:last-child { color: var(--faint); }
.film-link:hover { color: var(--ink); }
.stage { position: relative; }
.film-play { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px 14px 18px; border: 1px solid var(--rule-hi); background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--ink); font: 500 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; opacity: 0; transform: translate(-50%, calc(-50% + 10px)); transition: opacity .35s var(--in), transform .5s var(--in), border-color .2s; pointer-events: none; }
.film-tri { width: 0; height: 0; border-left: 11px solid var(--accent); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.hero.settled .stage:hover .film-play { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.film-play:hover { border-color: var(--accent); }
.film { width: min(92vw, 1600px); padding: 0; border: 1px solid var(--rule-hi); background: #000; color: var(--ink); }
.film::backdrop { background: rgb(4 6 8 / .88); }
.film[open] { animation: film-in .45s var(--in); }
@keyframes film-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.film video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.film-close { position: absolute; right: 10px; top: 10px; z-index: 1; padding: 8px 12px; border: 1px solid #2c3740; background: rgb(8 11 14 / .8); color: #dde4ea; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
@media (hover: none) { .film-play { display: none; } }
.eng-grid li.soon b em { margin-left: 6px; font: 500 10px/1 var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }

/* Features page: an archive index, then one figure per screen, then the full list by area. */
.fpage { padding-top: 52px; }
.f-head { max-width: 1920px; margin: 0 auto; padding: 12vh var(--gutter) 6vh; }
.f-head h1 { text-wrap: balance; margin: 18px 0 22px; max-width: 18ch; font: 400 clamp(40px, 5.4vw, 84px)/1.02 var(--serif); letter-spacing: -.025em; }
.f-head .lede { max-width: 620px; }
.js .f-head > *, .js .f-head h1 .line { clip-path: inset(0 0 100% 0); transform: translateY(.5em); animation: rise 1.1s var(--in) forwards; }
.js .f-head h1 .line { display: inline-block; }
.js .f-head h1 .line:nth-child(2) { animation-delay: .14s; }
.js .f-head > .lede { animation-delay: .3s; }
.js .f-head > .f-index { animation-delay: .44s; }
@keyframes rise { to { clip-path: inset(-.1em -.1em -.25em -.1em); transform: none; } }
.f-index { list-style: none; margin: 9vh 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); column-gap: 24px; }
.f-index a { display: flex; gap: 14px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: 15px; transition: color .2s, border-color .2s; }
.f-index a:hover { border-top-color: var(--accent); }
.f-index .fig-no { margin: 0; color: var(--faint); }
.f-index a:hover .fig-no { color: var(--accent); }

.feat { max-width: 1920px; margin: 0 auto; padding: 14vh var(--gutter) 0; display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2.8fr); column-gap: clamp(28px, 4vw, 72px); align-items: end; scroll-margin-top: 40px; }
.feat-copy { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 4px; border-top: 1px solid var(--rule); padding-top: 18px; }
.feat-copy h2 { margin: 0 0 12px; font: 400 clamp(28px, 2.6vw, 40px)/1.08 var(--serif); letter-spacing: -.015em; }
.feat-copy p:last-child { margin: 0; max-width: 34ch; color: var(--ink); font-size: 17px; }
.clip { margin: 0; min-width: 0; }
.clip-box { position: relative; aspect-ratio: 1440 / 900; border: 1px solid var(--rule-hi); background: var(--panel); overflow: hidden; }
.clip-box video { position: absolute; inset: 0; }
.js .clip-box { transform: translateX(calc(100vw - 100% + 40px)); transition: transform 1.3s var(--in); }
.js .seen .clip-box { transform: none; }
.feat:last-of-type { padding-bottom: 6vh; }
/* Magnetic pages: each feature's recording comes to rest in the middle of the screen. The page follows the gesture, then the browser carries it
   to the next one past halfway (wheel, trackpad, keys, touch, scrollbar alike); the end of the head's index is a stop too. Once the full index at the
   bottom is half up the screen, scrolling is free again (html.free, site.js) until the features come back. With reduced motion, plain scrolling. */
@media (prefers-reduced-motion: no-preference) {
  html[data-page='features']:not(.free) { scroll-snap-type: y mandatory; scroll-padding-top: 52px; }
  .f-head { scroll-snap-align: start; }
  .f-index { scroll-snap-align: end; scroll-snap-stop: always; }
  .feat .clip { scroll-snap-align: center; scroll-snap-stop: always; }
  .f-all { scroll-snap-align: start; }
  [data-page='features'] .foot { scroll-snap-align: end; }
}

.f-all { padding: 18vh 0 10vh; content-visibility: auto; contain-intrinsic-size: auto 1400px; }
.f-areas { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 44px 32px; }
.f-area h3 { margin: 0 0 12px; padding-top: 12px; border-top: 1px solid var(--rule-hi); font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.f-area ul { list-style: none; margin: 0; padding: 0; }
.f-area li { padding: 5px 0; font-size: 15px; line-height: 1.4; color: var(--ink); }
.f-back { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 12vh 0 0; padding: 0 var(--gutter); }

@media (max-width: 900px) {
  .f-head { padding-top: 64px; }
  .feat { grid-template-columns: 1fr; padding-top: 72px; }
  .feat-copy { padding-bottom: 20px; }
  .clip-box { aspect-ratio: 4 / 5; }
  .js .clip-box { transform: translateX(calc(100vw - 100% + 20px)); }
  .fpage, .f-all { overflow-x: clip; }
}
@media (prefers-reduced-motion: reduce) {
  .js .f-head > *, .js .f-head h1 .line { animation: none; clip-path: none; transform: none; }
  .js .clip-box { transform: none; }
}