@font-face {
  font-family: 'Instrument Serif';
  src: url('../assets/fonts/instrument-serif-regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../assets/fonts/instrument-serif-italic.woff2') format('woff2');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

/*
  Design tokens: a 16-column grid, and a "screen unit" which scales the type
  with whichever is tighter, the viewport's width or its height.
*/
:root {
  --vh: 1vh;
  --display-font: 'Space Grotesk', Arial, sans-serif;
  --text-font: 'DM Sans', Arial, sans-serif;
  --mono-font: 'DM Mono', ui-monospace, monospace;
  --serif-font: 'Instrument Serif', Georgia, serif;
  --site-padding-x: 3.125vw;
  --site-row-height: calc(var(--site-padding-x) * 8 / 60);
  --site-padding-y: calc(var(--site-row-height) * 4);
  --grid-columns: 16;
  --grid-gap-scale: calc(24 / 90);
  --grid-gap-width: calc(
    (100vw - var(--site-padding-x) * 2) /
      ((var(--grid-columns) / var(--grid-gap-scale)) + var(--grid-columns) - 1)
  );
  --grid-column-width: calc(var(--grid-gap-width) / var(--grid-gap-scale));
  --grid-span-width: calc(var(--grid-gap-width) + var(--grid-column-width));
  --grid-span-1: var(--grid-column-width);
  --grid-span-2: calc(var(--grid-span-width) * 1 + var(--grid-column-width));
  --grid-span-3: calc(var(--grid-span-width) * 2 + var(--grid-column-width));
  --grid-span-4: calc(var(--grid-span-width) * 3 + var(--grid-column-width));
  --grid-span-5: calc(var(--grid-span-width) * 4 + var(--grid-column-width));
  --grid-span-6: calc(var(--grid-span-width) * 5 + var(--grid-column-width));
  --grid-span-7: calc(var(--grid-span-width) * 6 + var(--grid-column-width));
  --grid-span-8: calc(var(--grid-span-width) * 7 + var(--grid-column-width));
  --grid-span-9: calc(var(--grid-span-width) * 8 + var(--grid-column-width));
  --grid-span-10: calc(var(--grid-span-width) * 9 + var(--grid-column-width));
  --grid-span-11: calc(var(--grid-span-width) * 10 + var(--grid-column-width));
  --grid-span-12: calc(var(--grid-span-width) * 11 + var(--grid-column-width));
  --grid-span-13: calc(var(--grid-span-width) * 12 + var(--grid-column-width));
  --grid-span-14: calc(var(--grid-span-width) * 13 + var(--grid-column-width));
  --grid-span-16: calc(var(--grid-span-width) * 15 + var(--grid-column-width));

  --color-white: #f3ebdc;
  --color-white-transparent: #f3ebdc00;
  --color-black: #0f0d0a;
  /* The page's ground, behind every scene and section which doesn't paint
     its own: black, as the hand's calibration stills are (the warm
     '--color-black' stays the ink of the type and the buttons).  Script
     reads it through 'GROUND' (src/core/palette.js). */
  --color-ground: #000;
  --color-ground-rgb: 0 0 0;
  --color-black-transparent: #0f0d0a00;
  --color-grey-brown: #6f6758;
  --color-green: #3c4a33;
  --color-green-light: #56684a;
  /*
    Theme colors.  The accent (and its channels, for translucent uses; keep the
    two in step), and the back glow of the dark stage shots with the halo round
    glowing type, as channels.  Script reads these too (src/core/palette.js).
  */
  /*
    The wordmark's tracking, for the header, the lid's engraving ('etchFont' in
    scenes/desk.js, which reads this) and the features' wordmark.  At -.055em
    it was too tight.
  */
  --wordmark-tracking: -0.02em;
  --color-accent: #a97dff;
  --color-accent-rgb: 169 125 255;
  --color-accent-deep: #4b2aa8;
  --color-glow: 100 54 172;
  --color-glow-deep: 64 34 116;
  --color-halo: 176 140 255;
  --color-halo-light: 226 210 255;
  --color-brown: #262b1f;
  --color-pure-white: #fff;

  /*
    The motion curves.  'out' answers a hover or a click: it starts at once,
    93% of the way there after 100 ms of a 250 ms move.  'glide' is the slower
    settle of the page's own reveals and dims; 'drop' is the menu's fall from
    its button; 'spring' overshoots, for the magnetic controls' release.
    'roll' is the letter flippers' slow-in, fast-out word roll, kept slow on
    purpose: the word gathers before it turns over.
  */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-roll: cubic-bezier(0.7, 0, 0.2, 1);
  --ease-glide: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-drop: cubic-bezier(0.3, 0.9, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --inner-width: calc(100vw - var(--site-padding-x) * 2);
  --screen-unit: min(var(--inner-width) / (1920 - 60 * 2), calc(var(--vh) * 100) / 1024 * 1.25);
  --h1: calc(164 * var(--screen-unit));
  --h2: calc(68 * var(--screen-unit));
  --h3: calc(45 * var(--screen-unit));
  --h4: calc(32 * var(--screen-unit));
  --h5: calc(20 * var(--screen-unit));
  --sub1: calc(24 * var(--screen-unit));
  --sub2: calc(16 * var(--screen-unit));
  --body1: calc(38 * var(--screen-unit));
  --body2: calc(24 * var(--screen-unit));
  --body3: calc(18 * var(--screen-unit));
  --quote: calc(40 * var(--screen-unit));
  --btn: calc(15 * var(--screen-unit));
  --default: calc(16 * var(--screen-unit));
  --site-header: calc(21 * var(--screen-unit) * 1.4);
}
@media (max-width: 767.98px) {
  :root {
    --grid-columns: 4;
    --site-padding-x: calc(16 * 100vw / 375);
    --site-row-height: 5px;
    --site-padding-y: calc(var(--site-row-height) * 4);
    --screen-unit: calc(var(--inner-width) / (375 - 16 * 2));
    --h1: calc(76 * var(--screen-unit));
    --h2: calc(38 * var(--screen-unit));
    --h3: calc(26 * var(--screen-unit));
    --h4: calc(16 * var(--screen-unit));
    --h5: calc(14 * var(--screen-unit));
    --body1: calc(18 * var(--screen-unit));
    --body2: calc(15 * var(--screen-unit));
    --body3: calc(13 * var(--screen-unit));
    --sub1: calc(15 * var(--screen-unit));
    --sub2: calc(11 * var(--screen-unit));
    --quote: calc(24 * var(--screen-unit));
    --default: calc(12 * var(--screen-unit));
    --btn: calc(10 * var(--screen-unit));
  }
}

* {
  box-sizing: border-box;
}
/*
  Nothing may widen the page past the screen.  On phones any horizontal
  overflow makes the browser lay the page out wider and zoom out to fit,
  shrinking every fixed layer with it.  Clip, not hidden, b/c clip creates no
  scroll container, so position: sticky still works.
*/
html,
body {
  overflow-x: clip;
}
html {
  width: 100%;
  font-family: var(--display-font);
  color: var(--color-white);
  background: var(--color-ground);
  scrollbar-width: none;
  scroll-behavior: auto !important;
}
html::-webkit-scrollbar {
  display: none;
}
/*
  A set piece holding the scroll on a touch screen, or a gate taking its
  touch drags (holdScroll() and setScrollGate() in core/scroll.js).
*/
html.is-scroll-held,
html.is-scroll-gated {
  overflow: hidden;
  touch-action: none;
}
body {
  width: 100%;
  margin: 0;
  overscroll-behavior: none;
  font-weight: 500;
  font-size: var(--default);
  line-height: 1.2;
  background: var(--color-ground);
  -webkit-font-smoothing: antialiased;
}
body.is-loading {
  overflow: hidden;
}
a {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
}
img {
  display: block;
}
::selection {
  background: var(--color-accent);
  color: var(--color-black);
}
.prevent-select,
#hero,
#hero * {
  user-select: none;
  -webkit-user-select: none;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  padding: 0;
  font-weight: 500;
}
h4 {
  text-transform: uppercase;
}
/*
  Headlines speak in the wordmark's serif, in sentence case (it has one
  weight); the small uppercase grotesk is kept for labels and captions.
*/
h1,
h2,
h3 {
  font-family: var(--serif-font);
  font-weight: 400;
}
h1 {
  font-size: calc(var(--h1) * 1.16);
  line-height: 0.86;
  letter-spacing: -0.035em;
}
h2 {
  font-size: calc(var(--h2) * 1.24);
  line-height: 0.94;
  letter-spacing: -0.028em;
}
h3 {
  font-size: calc(var(--h3) * 1.2);
  line-height: 1;
  letter-spacing: -0.022em;
}
/*
  Reveal masks (SplitText's clip boxes) are a line box tall, less than the
  serif's tails and the italic's lean reach.  So pad the boxes, and take the
  padding back in the margin.
*/
:is(h1, h2, h3) :is(.char-mask, .word-mask, .line-mask, .line) {
  padding: 0.12em 0.08em 0.26em;
  margin: -0.12em -0.08em -0.26em;
}
h4 {
  font-size: var(--h4);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
h5 {
  font-size: var(--h5);
  line-height: 1.2;
  font-weight: 600;
}
.sub1,
.sub2 {
  font-weight: 500;
  line-height: 1.09;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.sub1 {
  font-size: var(--sub1);
}
.sub2 {
  font-size: var(--sub2);
}
.body1,
.body2,
.body3 {
  font-family: var(--text-font);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.body1 {
  font-size: var(--body1);
  line-height: 1.18;
  letter-spacing: -0.025em;
}
.body2 {
  font-size: var(--body2);
  line-height: 1.4;
}
.body3 {
  font-size: var(--body3);
  line-height: 1.3;
}
.quote {
  font-weight: 500;
  font-size: var(--quote);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.o-container {
  width: 100%;
  padding: 0 var(--site-padding-x);
}
.o-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  grid-column-gap: var(--grid-gap-width);
}
.o-dashline {
  --dashline-color: var(--color-white);
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--dashline-color) 0 2px, transparent 0 4px);
}
/*
  The same dashes as one 4 px tile, repeated.  Safari draws a repeating
  gradient afresh whenever the line's width changes, and the features' rules
  grow every frame as their copy comes in: that held its frames at 115 to
  130 ms through the comparison (its GPU process at a full core).  A tile is
  drawn once.
*/
html.is-safari .o-dashline {
  background: linear-gradient(90deg, var(--dashline-color) 0 2px, transparent 2px 4px) 0 0 / 4px
    100% repeat-x;
}
.mobile-only {
  display: none !important;
}
@media (max-width: 767.98px) {
  .mobile-only {
    display: block !important;
  }
  .desktop-only {
    display: none !important;
  }
}

/*
  Buttons: a pill with a color swap; the dark variant adds an inner glow ring.
*/
.btn {
  --btn-color: var(--color-white);
  --btn-active-color: var(--color-black);
  --btn-text-color: var(--color-black);
  --btn-active-text-color: var(--color-white);
  position: relative;
  display: inline-block;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  font-size: var(--btn);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 1.2em 2em;
  overflow: hidden;
  background: var(--btn-color);
  color: var(--btn-text-color);
  border: 0;
  z-index: 0;
  cursor: pointer;
  white-space: nowrap;
  pointer-events: auto;
  border-radius: 3em;
}
.btn.is-large {
  padding: 1.5em 3em;
}
.btn:hover:not(.is-active),
.btn.is-active:not(:hover) {
  transition:
    background-color 0.18s ease,
    color 0.18s;
  background: var(--btn-active-color);
  color: var(--btn-active-text-color);
}
/*
  The dark pill's glow ring is painted as a background in the border box (with
  the fill in the padding box over it), not as a CSS border.  Firefox draws a
  rounded border in pieces, and where a parent scales the pill (the plans'
  hero) the joins showed as lines of the ring's color across the pill.  The
  ring's color is registered, so it still fades.
*/
@property --glow-color {
  syntax: '<color>';
  inherits: true;
  initial-value: rgb(169 125 255 / 0);
}
.btn.is-dark {
  --glow-color: rgb(var(--color-accent-rgb) / 0);
  --btn-color: var(--color-brown);
  --btn-active-color: var(--color-brown);
  --btn-text-color: var(--color-white);
  --btn-active-text-color: var(--color-white);
  border: 2px solid transparent;
  transition: --glow-color 0.25s;
}
.btn.is-dark,
.btn.is-dark:hover:not(.is-active),
.btn.is-dark.is-active:not(:hover) {
  background:
    linear-gradient(var(--btn-color), var(--btn-color)) padding-box,
    linear-gradient(var(--glow-color), var(--glow-color)) border-box;
}
.btn.is-dark:hover,
.btn.is-dark.is-active {
  --glow-color: rgb(var(--color-accent-rgb) / 1);
}
.btn.is-dark:hover:not(.is-active),
.btn.is-dark.is-active:not(:hover) {
  transition:
    --glow-color 0.25s,
    color 0.18s;
}
.btn.is-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 2em;
  box-shadow: inset 0 0 0.75em var(--glow-color);
  transition: box-shadow 0.25s;
}
.btn.is-orange {
  --btn-color: var(--color-accent);
  --btn-active-color: var(--color-white);
  --btn-text-color: var(--color-black);
  --btn-active-text-color: var(--color-black);
}

/* Letter flippers: each glyph is masked, with a duplicate stacked below it. */
.is-flipper-target {
  display: inline-block;
}
/*
  See ui/flippers.js.  The word box is 1.3em tall and pulled back by its
  margins, so the mask doesn't cut accents; the whole word rolls together, on a
  transform transition.
*/
.fl-word {
  display: inline-block;
  white-space: nowrap;
}
.fl {
  display: inline-block;
  height: 1.3em;
  margin: -0.15em 0;
  overflow: hidden;
  vertical-align: top;
}
.fl > span {
  display: block;
  line-height: 1.3;
  transition: transform 0.45s var(--ease-roll);
}
.fl--space {
  width: 0.28em;
}
@media (hover: hover) {
  .is-flipper:hover .fl > span {
    transform: translateY(-100%);
  }
} /* A touch screen keeps :hover on after a tap. */
.is-flipper:focus-visible .fl > span,
.is-flipper:focus-within .fl > span {
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
  .fl > span {
    transition: none;
  }
}

/*
  Sections: tall scroll spacers whose content layer stays fixed to the
  viewport.
*/
.section {
  position: relative;
  width: 100%;
}
.section__inner {
  position: relative;
}
#hero .section__inner,
#statement .section__inner,
#mobile .section__inner,
#wearable .section__inner,
#features .section__inner,
#grip .section__inner {
  position: fixed;
  top: 0;
  left: 0;
  height: calc(var(--vh) * 100);
  visibility: inherit;
}
.section {
  visibility: hidden;
}

/*****************************************************************************/
/***                                                                       ***/
/***  Rendering layers.                                                    ***/
/***                                                                       ***/
/*****************************************************************************/
#behind-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/*
  The liquid glow (scenes/liquidglow.js): the bottom layer of the page, under
  everything.
*/
#liquid-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  display: block;
}
/* The opening's search page, full screen at the top of the camera's dive
   into the laptop (scenes/search-screen.js), over the scene's frame: its
   height is the frame's (set by the script). */
#search-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
  display: block;
  visibility: hidden;
}
#ui {
  position: relative;
  z-index: 2;
}
.giant-type {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  font-family: var(--serif-font);
  font-weight: 400;
  font-style: italic;
  line-height: 0.8;
  letter-spacing: -0.035em;
  color: var(--color-white);
  transform-origin: 0 0;
  visibility: hidden;
  will-change: transform, opacity;
}

/*
  Overlays: film grain, the hero's shade, and the warm atmosphere behind the
  isolated product.
*/
.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.23), transparent 43%);
  pointer-events: none;
}
#product-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 55% 85% at -5% 98%, rgb(var(--color-glow) / 0.54), transparent 79%),
    radial-gradient(ellipse 62% 35% at 44% 114%, rgb(var(--color-glow-deep) / 0.3), transparent 90%);
  mix-blend-mode: screen;
}

/*
  The post grade: a vignette from 50% to 130% of the half diagonal, and a 1.5%
  tint.
*/
#post-grade {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(ellipse 130% 130% at 50% 50%, transparent 38%, rgb(0 0 0 / 0.42) 100%),
    rgb(239 0 157 / 0.015);
}

/*
  The purple glow is off: the background stays near black.  (Desktop's
  liquid in scenes/liquidglow.js keeps only the cursor's trail.)
*/
#product-atmosphere {
  display: none;
}

/* A frosted translucent box which softens copy over busy 3D shots. */
#blur-box {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
  visibility: hidden;
}
#blur-box > div {
  position: absolute;
  top: 0;
  height: 100%;
  -webkit-backdrop-filter: blur(var(--blur, 0px)) saturate(1.1);
  backdrop-filter: blur(var(--blur, 0px)) saturate(1.1);
  background: rgb(var(--tint, 104 121 82) / var(--alpha, 0));
}
#blur-box-a {
  left: 0;
}
#blur-box-b {
  border-left: 1px solid rgb(243 235 220 / calc(var(--alpha, 0) * 2));
}
#blur-box.has-outline > div {
  outline: 1px solid rgb(243 235 220 / calc(var(--alpha, 0) * 1.5));
}
#blur-box.is-card #blur-box-a {
  border-radius: var(--radius, 0px);
  border: 1px solid rgb(243 235 220 / calc(var(--alpha, 0) * 1.6));
}
#blur-box.is-card #blur-box-b {
  display: none;
}

/*****************************************************************************/
/***                                                                       ***/
/***  The preloader.                                                       ***/
/***                                                                       ***/
/*****************************************************************************/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: var(--color-ground);
  pointer-events: none;
}
#preloader.is-started {
  background-color: transparent;
}
#preloader canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/*
  Touch devices get no full-screen blend-mode layers.  A fixed layer with
  mix-blend-mode over the WebGL canvas makes the compositor blend the whole
  screen every frame, which is costly on iOS.
*/
@media (pointer: coarse), (max-width: 767.98px) {
  .grain {
    display: none;
  }
  #product-atmosphere {
    mix-blend-mode: normal;
  }
}

/*
  The arrow badge: a disc in the accent at the button's end.  On hover its
  arrow leaves to the right, and a second one comes in from the left.
*/
/*
  The label, a gap and the disc in a row, with the button as wide as that.  The
  footer's too: as a full-width pill with the disc pinned in its end, it read
  as broken.
*/
.btn.has-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  padding: 0.45em 0.45em 0.45em 2em;
}
.btn-badge {
  position: relative;
  display: block;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-black);
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 0.45s var(--ease-glide);
}
#footer-link.has-badge {
  display: inline-flex;
  width: auto;
  justify-content: center;
}
.btn-badge svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.1em;
  height: 1.1em;
  margin: -0.55em 0 0 -0.55em;
  transition: transform 0.25s var(--ease-out);
}
.btn-badge svg + svg {
  transform: translateX(-220%);
}
.btn.has-badge:focus-visible .btn-badge svg:first-child {
  transform: translateX(220%);
}
.btn.has-badge:focus-visible .btn-badge svg + svg {
  transform: none;
}
@media (hover: hover) {
  .btn.has-badge:hover .btn-badge svg:first-child {
    transform: translateX(220%);
  }
  .btn.has-badge:hover .btn-badge svg + svg {
    transform: none;
  }
  .btn.has-badge:hover .btn-badge {
    transform: scale(1.06);
  }
} /* A touch screen keeps :hover on after a tap. */
/*
  Magnetic controls (ui/magnetic.js): quick while held, and an overshooting
  spring on release.  There is no transform in the list, b/c the header pills'
  drop-in writes it every frame.
*/
.hpill,
#footer-link,
#contact-submit,
#marquee .mq-star,
.hpill > span,
.btn .is-flipper-target {
  transition-property: translate, background-color, color, border-color, --glow-color;
  transition-duration: 0.7s, 0.25s, 0.25s, 0.25s, 0.25s;
  transition-timing-function: var(--ease-spring), ease, ease, ease, ease;
}
.is-magnet,
.is-magnet > span,
.is-magnet .is-flipper-target {
  transition-duration: 0.18s, 0.25s, 0.25s, 0.25s, 0.25s;
  transition-timing-function: ease-out, ease, ease, ease, ease;
}

/*****************************************************************************/
/***                                                                       ***/
/***  iPhone, Safari 26 and later (html.bars: index.html's inline script;  ***/
/***  core/scroll.js).                                                     ***/
/***                                                                       ***/
/*****************************************************************************/
/*
  Safari keeps fixed (and sticky) layers out from under its status bar and its
  toolbar and fills the two bands with a flat color, but lets a page's
  ordinary content run on behind them.  So here the page itself does not
  scroll: its content scrolls in a box the large viewport's height, over
  layers which are ordinary content, and the scene runs on behind the toolbar.
  The root is taller than the screen though it never scrolls (with a root the
  screen's own height Safari cuts the page off at the bands all the same), and
  held scrolled by the bleed, its content moved down as far, so the band above
  the screen (behind the clock) shows #top-band.  Found on the CVD Joint site
  (its lab/safari-bars.html).  The layers reach the bleed past the large
  viewport, to the screen's own bottom: one which ends at the large viewport's
  bottom is cut off where the toolbar begins all the same (tried in the
  simulator, iOS 26.4).
*/
html.bars {
  --bleed: 64px;
  height: 100%;
  min-height: 300vh;
  overflow: hidden;
}
html.bars body {
  height: 100%;
  min-height: 0;
  overflow: visible;
  position: relative;
  top: var(--bleed);
}
/*
  The scroller reaches the bleed past the screen's top and bottom, padded by
  as much, so its content sits where it would on the screen but scrolls on
  behind the clock and the toolbar as a page's does (#top-band shows only
  where nothing of the page covers the scene).
*/
html.bars #scroller {
  position: absolute;
  z-index: 2;
  left: 0;
  top: calc(-1 * var(--bleed));
  width: 100%;
  height: calc(100vh + 2 * var(--bleed));
  height: calc(100lvh + 2 * var(--bleed));
  box-sizing: border-box;
  padding: var(--bleed) 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  scrollbar-width: none;
}
html.bars #scroller::-webkit-scrollbar {
  display: none;
}
html.bars body.is-loading #scroller {
  overflow-y: hidden;
}
html.bars.is-scroll-held #scroller,
html.bars.is-scroll-gated #scroller {
  overflow-y: hidden;
  touch-action: none;
}
html.bars #behind-canvas,
html.bars #canvas,
html.bars .grain,
html.bars #product-atmosphere,
html.bars #post-grade,
html.bars #preloader {
  position: absolute;
  top: 0;
  bottom: auto;
  height: calc(100vh + var(--bleed));
  height: calc(100lvh + var(--bleed));
}
html.bars #blur-box,
html.bars #search-page {
  position: absolute;
}
/*
  The scene's canvas reaches the bleed over the screen's top as well: its
  frame is drawn below that, as ever, and the rows above are drawn for the
  band behind the clock (scenes/renderer.js, ui/topband.js).
*/
html.bars #canvas {
  top: calc(-1 * var(--bleed));
  height: calc(100vh + 2 * var(--bleed));
  height: calc(100lvh + 2 * var(--bleed));
  /* (those rows are drawn only when the band is, and cleared with every
     frame: never shown, only read) */
  clip-path: inset(var(--bleed) 0 0 0);
}
/*
  The pinned sections' copy which sits low is lifted clear of the toolbar
  (--foot, the screen under it: main.js).  The layers themselves still reach
  the screen's bottom: with none reaching it, or reaching it only with a clear
  border, Safari goes back to flat bands (tried in the simulator).
*/
/*
  The pinned sections' layers start a little below the screen's top edge: a
  fixed layer along it (even a clear one) makes Safari paint its status bar's
  band flat again as soon as the page scrolls.  It samples about 4 px in, so
  1 px is not enough; 6 px is (tried in the simulator).
*/
html.bars #hero .section__inner,
html.bars #statement .section__inner,
html.bars #mobile .section__inner,
html.bars #wearable .section__inner,
html.bars #features .section__inner,
html.bars #grip .section__inner,
html.bars #anatomy .section__inner {
  top: 6px;
}
/* (and the sticky panels which pin at the top, for the same reason) */
html.bars #sustainability-hero-inner,
html.bars #research-stage,
html.bars #manifesto-stage {
  top: 6px;
}
html.bars #hero-meta,
html.bars #statement-pre-side,
html.bars #anatomy-copy,
html.bars #grip-zoom-box,
html.bars #mobile-desc,
html.bars #mobile-disclaimer-wrapper {
  translate: 0 calc(-1 * var(--foot, 0px));
}
/*
  The hero's scroll prompt sits on the scroll cue's row, and the cue is fixed
  to the screen, so it also takes back the 6 px its layer starts down.
*/
html.bars #hero-scroll {
  translate: 0 calc(-1 * var(--foot, 0px) - 6px);
}
/*
  Behind the clock Safari draws no canvas, WebGL or 2D, only the page's
  ordinary content (found on the CVD Joint site, on an iPhone).  So a
  plain element above the screen, in the colors of the top row of what is on
  screen (main.js, topBand()), the scene running on up behind the clock.
*/
#top-band {
  display: none;
}
html.bars #top-band {
  display: block;
  position: absolute;
  z-index: 2; /* (over the canvases and the post grade; under the page, #scroller, later in the body) */
  left: 0;
  width: 100%;
  top: calc(-1 * var(--bleed));
  height: calc(var(--bleed) + var(--feather, 0px));
  pointer-events: none;
  background: var(--color-ground);
  /* (solid over the screen's top 6 px, where the pinned layers don't reach;
     then fading out over the screen: ui/topband.js) */
  -webkit-mask-image: linear-gradient(#000 calc(var(--bleed) + 6px), transparent);
  mask-image: linear-gradient(#000 calc(var(--bleed) + 6px), transparent);
}
/* (two pictures, the newer over the older: ui/topband.js) */
#top-band > div {
  position: absolute;
  inset: 0;
  background: 0 0 / 100% 100% no-repeat;
}