/* One set of type, spacing and materials in both the opening and overview. */
.scroll-overview {position:absolute;z-index:3;bottom:24px;left:var(--gutter);width:max-content;white-space:nowrap;display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-height);padding:0;color:var(--quiet);font-size:var(--type-meta);letter-spacing:.04em}
.scroll-overview svg {width:13px;height:16px;transition:transform .25s var(--ease-settle)}
.scroll-overview:hover {color:var(--paper)}.scroll-overview:hover svg {transform:translateY(3px)}
.overview {position:relative;padding:96px var(--gutter);min-height:660px;display:flex;align-items:center;justify-content:center;background:var(--canvas);scroll-margin-top:24px}
.overview-inner {width:100%;max-width:880px}
.overview-heading-row {display:flex;align-items:center;justify-content:center;margin-bottom:28px}
.overview h2 {font-size:clamp(28px,3vw,36px);font-weight:450;line-height:1.2;letter-spacing:-.025em;margin:0;color:var(--paper)}
/* A single prominent reading and two supporting instruments. The whitespace
   groups related figures; the enclosure belongs to the mechanism itself. */
.split-board {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;row-gap:32px;max-width:736px;margin-inline:auto}
.board-row {min-width:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.board-primary {grid-column:1 / -1}
.board-label {margin:0;font-size:13px;font-weight:450;line-height:1.5;letter-spacing:.04em;color:var(--muted)}
.flap-counter {
  --digits:6;--groups:1;--cell-height:66px;--digit-font:44px;--digit-width:44px;--cell-gap:4px;--group-gap:6px;--bezel:7px;
  container-type:inline-size;display:flex;gap:var(--cell-gap);padding:var(--bezel);max-width:100%;border-radius:11px;
  width:min(100%,calc(var(--digits)*var(--digit-width) + (var(--digits) - 1)*var(--cell-gap) + var(--groups)*var(--group-gap) + var(--bezel)*2 + 2px));
}
.flap-counter.glass-surface {--glass-fill:rgba(15,18,23,.78);box-shadow:0 16px 40px #0007,inset 0 1px 0 #ffffff06}
.flap-counter:empty::before {content:'—';display:block;flex:1;min-height:var(--cell-height);line-height:var(--cell-height);font-size:var(--digit-font);text-align:center;color:var(--quiet)}
.board-primary .flap-counter {--cell-height:108px;--digit-font:78px;--digit-width:88px;--cell-gap:6px;--group-gap:10px;--bezel:9px;border-radius:14px}
.flap-cell {position:relative;flex:1 1 0;min-width:0;height:var(--cell-height);perspective:480px;font-family:var(--font-ui);font-size:var(--digit-font);font-size:max(1px,min(var(--digit-font),calc(((100cqw - (var(--digits) - 1)*var(--cell-gap) - var(--groups)*var(--group-gap)) / var(--digits) - 2px)*1.4)));font-weight:500;font-variant-numeric:tabular-nums;color:#dce2eb;filter:drop-shadow(0 2px 1px #0008)}
.flap-cell.group-start {margin-inline-start:var(--group-gap)}
.board-primary .flap-cell {color:var(--paper)}
.flap-face {position:absolute;left:0;right:0;height:50%;overflow:hidden;background:var(--surface);backface-visibility:hidden;border:1px solid #ffffff07}
.flap-face span {position:absolute;left:0;right:0;top:calc(var(--cell-height) * -.065);height:var(--cell-height);line-height:var(--cell-height);text-align:center}
.flap-top {top:0;border-radius:var(--cell-radius) var(--cell-radius) 0 0;background:linear-gradient(#24272c,#1b1e23);transform-origin:center bottom}
.flap-bottom {bottom:0;border-radius:0 0 var(--cell-radius) var(--cell-radius);background:linear-gradient(#181b20,#1d2025);transform-origin:center top}
.flap-bottom span {top:calc(var(--cell-height) * -.565)}
.flap-cell::after {content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#030405;box-shadow:0 1px 1px #000a;z-index:5}
.flap-cell::before {content:"";position:absolute;left:0;right:0;top:calc(50% - 2px);height:4px;border-left:2px solid #53585f;border-right:2px solid #53585f;z-index:6;opacity:.45}
.flap-moving-top {z-index:4}.flap-moving-bottom {z-index:3;transform:rotateX(90deg)}
.flap-reading {display:none}
.flap-cell.is-flipping .flap-moving-top {animation:flap-top .24s cubic-bezier(.5,0,.85,.35) var(--delay,0ms) both}
.flap-cell.is-flipping .flap-moving-bottom {animation:flap-bottom .3s cubic-bezier(.15,.6,.35,1) calc(var(--delay,0ms) + .24s) both}
@keyframes flap-top {to {transform:rotateX(-90deg);filter:brightness(.55)}}
@keyframes flap-bottom {from {transform:rotateX(90deg);filter:brightness(.5)}to {transform:rotateX(0);filter:brightness(1)}}
/* At phone scale, a dark hinge must not cut through the number itself. Keep
   the material seam behind one complete resting glyph, then use the same
   baseline for the two physical halves during a flip. */
html[data-scene-mode="phone-video"] .flap-cell {font-weight:550;color:var(--paper);filter:drop-shadow(0 1px 1px #0005)}
html[data-scene-mode="phone-video"] .flap-face {border:0;box-shadow:inset 0 0 0 .5px #ffffff06}
html[data-scene-mode="phone-video"] .flap-cell::after {height:1px;transform:scaleY(.5);background:#03040566;box-shadow:none;z-index:1}
html[data-scene-mode="phone-video"] .flap-cell::before {height:3px;top:calc(50% - 1.5px);border-width:1px;opacity:.25}
html[data-scene-mode="phone-video"] .flap-reading {display:block;position:absolute;left:0;right:0;top:calc(var(--cell-height) * -.065);height:var(--cell-height);line-height:var(--cell-height);text-align:center;z-index:2;pointer-events:none}
html[data-scene-mode="phone-video"] .flap-cell:not(.is-flipping) .flap-face span,
html[data-scene-mode="phone-video"] .flap-cell:not(.is-flipping) .flap-moving-top,
html[data-scene-mode="phone-video"] .flap-cell:not(.is-flipping) .flap-moving-bottom,
html[data-scene-mode="phone-video"] .flap-cell.is-flipping .flap-reading {visibility:hidden}
.overview-footer {display:flex;align-items:center;justify-content:space-between;gap:24px;margin:32px auto 0;max-width:736px;padding-top:24px;border-top:1px solid var(--line)}
.overview-actions {justify-content:flex-end;flex-wrap:nowrap;margin-top:0}
.overview-meta {display:flex;align-items:center;justify-content:center;gap:var(--space-1);min-height:24px;margin:0;color:var(--quiet);font-size:var(--type-meta);line-height:1.6;text-align:center;font-variant-numeric:tabular-nums}
.overview-meta::before {content:"";width:4px;height:4px;border-radius:50%;background:var(--quiet);flex:0 0 auto}
.overview-meta.demo-replay {padding:0;border:0;background:transparent;color:#b6c6de;cursor:pointer;text-decoration:underline;text-decoration-color:#b6c6de55;text-underline-offset:4px}
.overview-meta.demo-replay::before {background:#b6c6de}
.overview-meta[data-state="current"]::before {background:#b2bdb4;box-shadow:0 0 5px #c9e3d429}
.overview-meta[data-state="stale"]::before,.overview-meta[data-state="error"]::before {background:#a89879}
.sr-only {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:600px) {
  .overview {padding-block:72px;min-height:560px}
  .overview-heading-row {justify-content:flex-start;margin-bottom:22px}
  .overview h2 {font-size:27px}
  .split-board {grid-template-columns:minmax(0,1fr);row-gap:16px}
  .board-row {display:grid;grid-template-columns:minmax(72px,1fr) minmax(0,62%);align-items:center;gap:12px}
  .board-primary {display:flex;align-items:stretch;gap:10px;margin-bottom:4px}
  .board-label {font-size:12px;letter-spacing:.02em;text-align:left}
  .flap-counter {--cell-height:40px;--digit-width:31px;--cell-gap:3px;--group-gap:4px;--bezel:5px;border-radius:9px;justify-self:end}
  .board-primary .flap-counter {--cell-height:66px;--digit-width:43px;--cell-gap:3px;--group-gap:5px;--bezel:6px;border-radius:11px;width:100%}
  .flap-counter {--digit-font:29px}.board-primary .flap-counter {--digit-font:46px}
  .overview-footer {margin-top:22px;padding-top:0;border-top:0;align-items:stretch;flex-direction:column;gap:14px}
  .overview-meta {justify-content:flex-start;text-align:left}
  .overview-actions {justify-content:center;width:100%;gap:10px}
  .overview-actions a {flex:1;min-height:48px;padding-inline:12px}
}
@media (max-width:360px) {
  .overview h2 {font-size:25px}.board-label {font-size:11px}
  .flap-counter {--digit-font:26px}.board-primary .flap-counter {--digit-font:38px}
  .overview-actions {gap:8px}.overview-actions a {padding-inline:10px}
}
@media (min-width:601px) and (max-height:800px) {
  .overview h2 {font-size:28px}.overview-heading-row {margin-bottom:22px}
  .split-board {row-gap:24px}
  .flap-counter {--cell-height:52px;--digit-width:36px;--bezel:6px}
  .board-primary .flap-counter {--cell-height:82px;--digit-width:66px;--bezel:8px}
  .flap-counter {--digit-font:36px}.board-primary .flap-counter {--digit-font:60px}
  .overview-footer {margin-top:24px;padding-top:20px}
}
@media (max-height:660px) {
  .overview-heading-row {margin-bottom:18px}.split-board {row-gap:18px}.board-row {gap:8px}
  .board-primary .flap-counter {--cell-height:50px;--digit-width:38px;--bezel:5px}
  .flap-counter {--cell-height:34px;--digit-width:24px;--bezel:4px}
  .board-primary .flap-counter {--digit-font:36px}.flap-counter {--digit-font:23px}
  .overview-footer {margin-top:18px;padding-top:16px;gap:12px}
}
@media (max-width:600px) and (max-height:660px) {
  .board-row {gap:10px}.board-primary {gap:8px;margin-bottom:0}
  .split-board {row-gap:12px}
  .overview-footer {padding-top:0}.overview-actions a {min-height:44px}
}
@media (prefers-reduced-motion:reduce) {.scroll-overview svg {transition:none}.flap-cell.is-flipping .flap-moving-top,.flap-cell.is-flipping .flap-moving-bottom {animation:none}}