/* Midnight is the only surface (Élie 2026-10-02: the light mode is removed). */
html { color-scheme: dark; }

.nav--landing { justify-content: flex-end; gap: 20px; }
.nav--landing .nav__menu { display: none; }
.nav--landing .nav__menu-panel { background: var(--surface); border-color: var(--rule); }
.nav--landing .nav__menu-panel a { color: var(--ink); }
.nav--landing .nav__menu-panel a:hover { background: var(--terra-wash); }
@media (max-width: 620px) {
  .nav--landing .nav__menu { display: block; }
}

.hero, .maker { position: relative; isolation: isolate; }
.hero .lede[hidden] { display: none !important; }
.hero__grid, .maker__grid { position: relative; z-index: 1; }
/* Preserve the full captured app, including the Follow control. */
.hero__device .ipad3d--hero .ipad__screen > video,
.feature-detail .ipad3d__screen > video { object-fit: contain !important; transform: none !important; object-position: center; }
/* Élie 2026-10-02 (15 h 02, America/Toronto): the iOS status bar (clock, date, VPN) of a capture stays out of the screen.
   The clip is stretched by the bar's share and anchored to the bottom, so nothing is cropped on the sides. */
.hero__device .ipad3d--hero .ipad__screen > video[data-crop-top]:not(:fullscreen),
.hero__device .ipad3d--hero .ipad__screen > .hero__poster[data-crop-top],
.feature-detail .ipad3d__screen > video[data-crop-top]:not(:fullscreen) { position: absolute; left: 0; bottom: 0; height: calc(100% / (1 - var(--crop-top, 0))) !important; object-fit: fill !important; }
.hero__device, .hero__device .ipad3d, .feature-device, .feature-media { max-width: 100%; min-width: 0; }
/* Élie 2026-10-02 (20 h 01, America/Toronto): the poster covers the hero video until it plays, so the browser's play overlay never shows; a tap starts the video (app.js). */
.hero__poster { width: 100%; z-index: 1; cursor: pointer; }
.hero__poster[hidden] { display: none !important; }
.hero__device .ipad__screen > video.is-waiting { visibility: hidden; }
.feature-device--native { position: relative; }
/* Élie 2026-10-03 (00 h 18, America/Toronto): the label sits inside the white score band, bottom left, under the staves — not on the piano footage. The band ends at 18.6% of the clip height. */
.performance-capture-bar { position: absolute; bottom: calc(81.4% + 4px); left: 3%; z-index: 2; display: flex; align-items: center; gap: 6px; }
.performance-capture-label { padding: 3px 8px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 30, 56, .14); color: #101e38; font: 500 11px/1.3 var(--brand) !important; letter-spacing: 0; pointer-events: none; }
@media (max-width: 700px) { .performance-capture-bar { bottom: calc(81.4% + 2px); } .performance-capture-label { padding: 2px 6px; font-size: 9.5px !important; } }
/* The capture fits its screen; only the small-screen diagram scrolls horizontally. */
.feature-detail .feature-device.feature-device--scrollable .ipad3d__screen { overflow: hidden; }
.feature-detail .feature-device.feature-device--scrollable .ipad3d__screen > img { width: 100%; height: 100%; max-width: 100%; object-fit: contain; }
.feature-detail .score-flow--inline { border-radius: 12px; box-shadow: none; }
.feature-detail .score-flow--inline .score-flow__rail { margin: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; border: 1px solid #29415f; border-radius: 12px; box-shadow: none; }
.feature-detail .score-flow--inline .dtw__svg { width: 100%; min-width: 0; max-width: 100%; height: auto; }
.feature-detail .feature-media-footer { display: flex; gap: 10px; align-items: center; justify-content: space-between; width: 100%; min-width: 0; }
.feature-detail .feature-media-footer .feature-media-caption { flex: 1; min-width: 0; max-width: none; margin: 0; text-align: left; font-size: clamp(11px, 1.2vw, 14px); line-height: 1.4; }
.feature-detail .feature-media-footer .feature-media-caption--text { font-size: 15px; line-height: 1.55; }

/* A single performance view is available independently of feature visibility. */
.performance-demo { box-sizing: border-box; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: #000; color: #fff; box-shadow: none; }
.performance-demo::backdrop { background: #000; }
.performance-demo[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: demo-in 300ms var(--ease) both; }
.performance-demo__head { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: max(8px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); }
.performance-demo__head h2 { margin: 0; font: 600 clamp(16px, 2vw, 23px)/1.2 var(--brand); letter-spacing: -.03em; }
.performance-demo__close { min-height: 44px; padding: 0 15px; flex: 0 0 auto; border: 1px solid #ffffff40; border-radius: 12px; background: #ffffff18; color: #fff; font: 500 14px/1 var(--brand); cursor: pointer; }
.performance-demo__video { display: block; width: 100%; height: 100%; min-height: 0; max-width: 100%; max-height: none; object-fit: contain; border: 0; border-radius: 0; background: #000; }
.performance-demo__credit { margin: 0; padding: 8px 16px max(8px, env(safe-area-inset-bottom)); text-align: center; font: 500 12px/1.4 var(--brand); color: #ffffffb3; }
.performance-demo__note { display: block; margin-bottom: 4px; }
@keyframes demo-in { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.985); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
@media (max-width: 600px) {
  .nav--landing { gap: 10px; }
  .feature-detail .score-flow--inline .dtw__svg { min-width: 480px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .performance-demo[open] { animation: none; }
}