/* assets/css/site/tokens.css */
@layer tokens {
  :root {
    --lagoon-50: #e9f7ff;
    --lagoon-100: #d6eeff;
    --lagoon-200: #b7dfff;
    --lagoon-300: #92ccff;
    --lagoon-400: #6eb9ff;
    --lagoon-500: #49a2fe;
    --lagoon-600: #2b82d9;
    --lagoon-700: #1e65aa;
    --lagoon-800: #17497b;
    --lagoon-900: #0d2c4d;
    --lagoon-950: #031020;
    --lagoon: var(--lagoon-500);
    --abyss: var(--lagoon-950);
    --pill: #000000;
    --coral: #fb9769;
    --signal: #f45058;
    --desk: #1e1e1e;
    --stage: #242424;
    --window: #2c2c2c;
    --sand: #f3eee6;
    --ink: #ffffff;
    --ink-dim: rgba(255, 255, 255, 0.66);
    --ink-faint: rgba(255, 255, 255, 0.48);
    --fill: rgba(255, 255, 255, 0.09);
    --line: rgba(255, 255, 255, 0.09);
    --role-primary: var(--lagoon-500);
    --role-on-primary: var(--abyss);
    --role-secondary: var(--lagoon-300);
    --role-tertiary: var(--coral);
    --role-error: var(--signal);
    --role-surface: var(--desk);
    --role-surface-container: var(--stage);
    --role-surface-container-high: var(--window);
    --role-on-surface: var(--ink);
    --role-on-surface-variant: var(--ink-dim);
    --role-outline: rgba(255, 255, 255, 0.14);
    --role-pill: var(--pill);
    --heros:
      "Isla Heros",
      "TeX Gyre Heros",
      "Helvetica Neue",
      "Arial",
      sans-serif;
    --inst:
      "Isla Instrument",
      "Instrument Sans",
      "Helvetica Neue",
      "Arial",
      sans-serif;
    --glyphs: "Isla Glyphs", "JetBrainsMono Nerd Font Propo";
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --type-display-xl-family: var(--inst);
    --type-display-xl-size: 160px;
    --type-display-xl-weight: var(--font-weight-semibold);
    --type-display-xl-line: 0.92;
    --type-display-xl-tracking: -0.035em;
    --type-display-xl-stretch: 84%;
    --type-display-l-family: var(--inst);
    --type-display-l-size: 96px;
    --type-display-l-weight: var(--font-weight-semibold);
    --type-display-l-line: 0.98;
    --type-display-l-tracking: -0.03em;
    --type-display-l-stretch: 84%;
    --type-display-m-family: var(--inst);
    --type-display-m-size: 56px;
    --type-display-m-weight: var(--font-weight-semibold);
    --type-display-m-line: 1.02;
    --type-display-m-tracking: -0.025em;
    --type-display-m-stretch: 84%;
    --type-title-family: var(--inst);
    --type-title-size: 26px;
    --type-title-weight: var(--font-weight-semibold);
    --type-title-line: 1.25;
    --type-title-tracking: -0.01em;
    --type-title-stretch: 100%;
    --type-body-family: var(--inst);
    --type-body-size: 18px;
    --type-body-weight: var(--font-weight-regular);
    --type-body-line: 1.55;
    --type-body-tracking: 0em;
    --type-body-stretch: 100%;
    --type-caption-family: var(--inst);
    --type-caption-size: 14px;
    --type-caption-weight: var(--font-weight-regular);
    --type-caption-line: 1.45;
    --type-caption-tracking: 0em;
    --type-caption-stretch: 100%;
    --type-label-family: var(--heros);
    --type-label-size: 13px;
    --type-label-weight: var(--font-weight-bold);
    --type-label-line: 1;
    --type-label-tracking: 0.02em;
    --type-label-stretch: 100%;
    --type-wordmark-family: var(--heros);
    --type-wordmark-size: 1rem;
    --type-wordmark-weight: var(--font-weight-bold);
    --type-wordmark-line: 1;
    --type-wordmark-tracking: -0.02em;
    --type-wordmark-stretch: 100%;
    --type-pill-title-family: var(--heros);
    --type-pill-title-size: 15px;
    --type-pill-title-weight: var(--font-weight-bold);
    --type-pill-title-line: 1.2;
    --type-pill-title-tracking: 0em;
    --type-pill-title-stretch: 100%;
    --type-pill-body-family: var(--heros);
    --type-pill-body-size: 13px;
    --type-pill-body-weight: var(--font-weight-regular);
    --type-pill-body-line: 1.3;
    --type-pill-body-tracking: 0em;
    --type-pill-body-stretch: 100%;
    --type-pill-clock-family: var(--heros);
    --type-pill-clock-size: 14px;
    --type-pill-clock-weight: var(--font-weight-bold);
    --type-pill-clock-line: 1;
    --type-pill-clock-tracking: 0em;
    --type-pill-clock-stretch: 100%;
    --type-pill-clock-numeric: tabular-nums;
    --type-pill-ws-family: var(--heros);
    --type-pill-ws-size: 13px;
    --type-pill-ws-weight: var(--font-weight-bold);
    --type-pill-ws-line: 1;
    --type-pill-ws-tracking: 0em;
    --type-pill-ws-stretch: 100%;
    --radius-tile-18: 4.1px;
    --radius-tile-48: 10.8px;
    --radius-tile-ratio: 0.225;
    --radius-pill-rest: 16px;
    --radius-pill-peek: 26px;
    --radius-pill-open: 28px;
    --radius-lens: 10px;
    --radius-notch: 0.5;
    --shoulder-shell: 9px;
    --shoulder-mark: 6.75;
    --shoulder-ratio: 0.28125;
    --pill-state-rest-width: 68px;
    --pill-state-rest-height: 32px;
    --pill-state-rest-radius: 16px;
    --pill-state-music-width: 120px;
    --pill-state-music-height: 32px;
    --pill-state-music-radius: 16px;
    --pill-state-expanded-width: 268px;
    --pill-state-expanded-height: 32px;
    --pill-state-expanded-radius: 16px;
    --pill-state-expanded-music-width: 317px;
    --pill-state-expanded-music-height: 32px;
    --pill-state-expanded-music-radius: 16px;
    --pill-state-volume-width: 300px;
    --pill-state-volume-height: 40px;
    --pill-state-volume-radius: 20px;
    --pill-state-peek-width: 360px;
    --pill-state-peek-height: 56px;
    --pill-state-peek-radius: 26px;
    --pill-state-notification-width: 430px;
    --pill-state-notification-height: 120px;
    --pill-state-notification-radius: 28px;
    --pill-state-panel-width: 420px;
    --pill-state-panel-height: 300px;
    --pill-state-panel-radius: 28px;
    --pill-state-launcher-width: 460px;
    --pill-state-launcher-height: 270px;
    --pill-state-launcher-radius: 28px;
    --pill-state-app-width: 640px;
    --pill-state-app-height: 400px;
    --pill-state-app-radius: 28px;
    --spring-grow-width-response: 440ms;
    --spring-grow-width-damping-fraction: 0.74;
    --spring-grow-height-response: 500ms;
    --spring-grow-height-damping-fraction: 0.72;
    --spring-tuck-width-response: 380ms;
    --spring-tuck-width-damping-fraction: 0.86;
    --spring-tuck-height-response: 400ms;
    --spring-tuck-height-damping-fraction: 0.88;
    --spring-radius-response: 420ms;
    --spring-radius-damping-fraction: 0.9;
    --spring-lens-response: 360ms;
    --spring-lens-damping-fraction: 0.72;
    --spring-list-response: 300ms;
    --spring-list-damping-fraction: 0.82;
    --spring-level-response: 300ms;
    --spring-level-damping-fraction: 0.86;
    --spring-tabs-response: 320ms;
    --spring-tabs-damping-fraction: 0.84;
    --duration-reveal-out: 130ms;
    --duration-reveal-in: 300ms;
    --duration-reveal-delay: 110ms;
    --duration-reveal-stagger: 40ms;
    --duration-site: 500ms;
    --duration-wave-min: 540ms;
    --duration-wave-max: 810ms;
    --duration-signature-open: 2900ms;
    --duration-signature-close: 3200ms;
    --in-quad: cubic-bezier(0.11, 0, 0.5, 0);
    --out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
    --site-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --acc: var(--role-primary);
    --on-acc: var(--role-on-primary);
  }
}

/* assets/css/site/base.css */
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}
:root {
  --page: var(--desk);
  --line-strong: var(--role-outline);
  --page-line: rgba(255, 255, 255, 0.09);
  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.66);
  --text-faint: rgba(255, 255, 255, 0.48);
  --chip: #2a2a2a;
  --sunken: #181818;
  --surface: var(--stage);
  --accent-text: var(--lagoon-400);
  --ease: var(--site-ease);
  --wrap: 1200px;
  --gutter: 48px;
  --field: #1a1a1a;
  --field-line: rgba(255, 255, 255, 0.24);
  --dim-word: rgba(255, 255, 255, 0.28);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --page: #eef0f4;
    --surface: #ffffff;
    --page-line: rgba(14, 17, 22, 0.1);
    --line-strong: rgba(14, 17, 22, 0.18);
    --text: #0e1116;
    --text-dim: rgba(14, 17, 22, 0.7);
    --text-faint: rgba(14, 17, 22, 0.58);
    --chip: #e2e5eb;
    --sunken: #e6e9ef;
    --accent-text: var(--lagoon-700);
    --field: #ffffff;
    --field-line: rgba(14, 17, 22, 0.18);
    --dim-word: rgba(14, 17, 22, 0.24);
    color-scheme: light;
  }
  .stage,
  .ex-screen,
  .graph {
    --page-line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.14);
    --text: #ffffff;
    --text-dim: rgba(255, 255, 255, 0.66);
    --text-faint: rgba(255, 255, 255, 0.48);
    --chip: #2a2a2a;
    --sunken: #181818;
    --accent-text: var(--lagoon-400);
    color-scheme: dark;
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 64px;
}
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family:
    "Instrument Sans",
    "TeX Gyre Heros",
    "Helvetica Neue",
    sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  text-wrap: balance;
}
p {
  margin: 0;
  text-wrap: pretty;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.skip {
  position: fixed;
  left: 16px;
  top: -64px;
  z-index: 100;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus {
  top: 56px;
}
kbd {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--chip);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  font: 600 12px/16px "Instrument Sans", sans-serif;
  color: var(--text);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 0;
  border-radius: 9999px;
  font: 600 16px/24px "Instrument Sans", sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 300ms var(--ease),
    transform 300ms var(--ease),
    color 300ms var(--ease);
}
.btn:active {
  transform: scale(0.98);
}
.btn-primary {
  padding-inline: 16px;
  background: var(--accent);
  color: var(--on-accent);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 86%, #fff);
}
.btn-quiet {
  background: #2e2e2e;
  color: var(--text);
  font-size: 14px;
  line-height: 20px;
  padding: 4px 12px 4px 4px;
}
.btn-quiet kbd {
  height: 24px;
}
.btn-quiet:hover {
  background: #383838;
}
.btn-quiet[aria-pressed=true] {
  background: rgba(var(--accent-rgb), 0.24);
}
.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: 600 14px/20px "Instrument Sans", sans-serif;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-btn:hover {
  color: var(--text);
}

/* assets/css/site/hero.css */
.topisla {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 50;
  translate: -50% 0;
  transition: transform 500ms var(--ease), opacity 300ms var(--ease);
}
.topisla.is-away {
  opacity: 0;
  transform: translateY(-120%);
  pointer-events: none;
}
.bezel {
  position: absolute;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  padding-inline: 24px;
  font-size: 14px;
  line-height: 20px;
}
.bezel-mark {
  display: block;
  text-decoration: none;
}
.bezel-mark img {
  display: block;
  width: auto;
  height: 28px;
}
.bezel-link {
  color: var(--text-dim);
  text-decoration: none;
  transition: color 300ms var(--ease);
}
.bezel-link:hover {
  color: var(--text);
}
.hero {
  position: relative;
  padding: 128px 0 64px;
}
.hero-sentinel {
  position: absolute;
  top: 70%;
  left: 0;
  width: 1px;
  height: 1px;
}
.hero h1 {
  max-width: 900px;
  font-size: 72px;
  line-height: 1;
  font-weight: 600;
  font-stretch: 84%;
  letter-spacing: -0.025em;
  color: var(--text);
  padding-bottom: 4px;
}
.hero-row {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  gap: 24px 48px;
  margin-top: 32px;
}
.lede {
  max-width: 600px;
  font-size: 20px;
  line-height: 28px;
  color: var(--text-dim);
}
.hero-promise {
  margin-top: 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-faint);
}
.music-steps,
.hz,
.weigh-view,
.wall-picks {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--page-line);
  border-radius: 9999px;
  background: var(--sunken);
}
.music-steps button,
.hz button,
.weigh-view button,
.wall-picks button {
  padding: 4px 12px;
  border: 0;
  border-radius: 9999px;
  background: none;
  color: var(--text-dim);
  font: 500 14px/20px "Instrument Sans", sans-serif;
  cursor: pointer;
  transition: background-color 300ms var(--ease), color 300ms var(--ease);
}
.music-steps button:hover,
.hz button:hover,
.weigh-view button:hover,
.wall-picks button:hover {
  color: var(--text);
  background: var(--chip);
}
.music-steps button[aria-pressed=true],
.hz button[aria-checked=true],
.weigh-view button[aria-checked=true],
.wall-picks button[aria-checked=true] {
  background: var(--text);
  color: var(--page);
}

/* assets/css/site/desk/desk.css */
.ex {
  margin-top: 48px;
  overflow-anchor: none;
}
.ex-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-dim);
}
.demo-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 8px;
  border-radius: 9999px;
  background: var(--chip);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text);
  font: 700 12px/16px var(--heros);
  white-space: nowrap;
}
.demo-chip .ig {
  font-size: 14px;
  color: var(--accent-text);
}
.ex-note {
  flex: 1 1 320px;
}
.ex-acts {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.ex-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 16px;
  border: 0;
  border-radius: 9999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text);
  font: 600 14px/20px "Instrument Sans", sans-serif;
  cursor: pointer;
  transition: background-color 300ms var(--ease), transform 300ms var(--ease);
}
.ex-btn:hover {
  background: var(--chip);
}
.ex-btn:active {
  transform: scale(0.98);
}
.ex-btn kbd {
  height: 28px;
  min-width: 28px;
  border: 0;
  border-radius: 9999px;
  box-shadow: none;
  background: var(--accent);
  color: var(--on-accent);
}
.ex-btn-plain {
  padding-right: 16px;
}
.ex-btn[aria-pressed=true],
.ex-btn[aria-expanded=true] {
  background: var(--text);
  color: var(--page);
}
.ex-screen {
  position: relative;
  aspect-ratio: 1200 / 720;
  border: 1px solid var(--page-line);
  border-radius: 24px;
  background: #0d2c4d;
  overflow: hidden;
  isolation: isolate;
}
.ex-desk {
  --k: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 1200px;
  height: 720px;
  overflow: hidden;
  transform: scale(var(--k));
  transform-origin: 0 0;
}
.ex-wall {
  position: absolute;
  inset: 0;
  background-color: #0d2c4d;
  background-image:
    radial-gradient(
      circle at 12% 8%,
      #1e65aa 0,
      transparent 42%),
    radial-gradient(
      circle at 88% 92%,
      rgba(251, 151, 105, 0.5) 0,
      transparent 40%),
    radial-gradient(
      circle at 52% 58%,
      rgba(73, 162, 254, 0.42) 0,
      transparent 34%);
}
.ex-win {
  position: absolute;
  top: 72px;
  bottom: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(16, 20, 28, 0.88);
}
.ex-win-a {
  left: 24px;
  width: 564px;
}
.ex-win-b {
  right: 24px;
  width: 564px;
}
.ex-win::before {
  content: attr(data-app);
  position: absolute;
  left: 16px;
  top: 14px;
  font: 700 13px/16px "Isla Heros", sans-serif;
  color: rgba(255, 255, 255, 0.78);
}
.ex-win::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 52px;
  width: 62%;
  height: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 22px 0 -0px rgba(255, 255, 255, 0.06),
    0 44px 0 rgba(255, 255, 255, 0.06),
    0 66px 0 rgba(255, 255, 255, 0.05);
}
.ex-isla {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  translate: -50% 0;
}
.ex-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.ex-over {
  z-index: 6;
}
.ex-layer > * {
  pointer-events: auto;
}
.ex-coach {
  position: absolute;
  top: 52px;
  left: 50%;
  z-index: 5;
  display: flex;
  gap: 8px;
  translate: -50% 0;
  transition: opacity 300ms var(--ease);
}
.ex-coach[hidden] {
  display: none;
}
.ex-coach > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 9999px;
  background: #000;
  color: rgba(255, 255, 255, 0.72);
  font: 700 12px/16px "Isla Heros", sans-serif;
  white-space: nowrap;
}
.ex-coach .ig {
  font-size: 14px;
  color: #fff;
}
.ex-coach kbd {
  height: 20px;
  min-width: 20px;
  padding: 0 6px;
  border: 0;
  box-shadow: none;
  background: #2c2c2e;
  color: #fff;
  font-size: 11px;
}

/* assets/css/site/desk/caption.css */
.ex-cap {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) auto;
  align-items: center;
  gap: 16px 24px;
  margin-top: 24px;
  padding: 16px 16px 16px 24px;
  border: 1px solid var(--page-line);
  border-radius: 24px;
  background: var(--surface);
}
.ex-feat {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ig.ex-glyph {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--chip);
  color: var(--accent-text);
  font-size: 20px;
}
.ex-feat b {
  display: block;
  color: var(--text);
  font-weight: 600;
}
.ex-feat div span {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-dim);
}
.ex-try {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-dim);
}
.ex-try b {
  color: var(--text);
  font-weight: 600;
}
.ex-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 16px;
}
.ex-keys {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-faint);
}
.ex-keys > span:first-child {
  margin-right: 4px;
}
.ex-ctl {
  display: flex;
  gap: 8px;
}
.ex-ctl:empty,
.ex-list-btn {
  display: none;
}

/* assets/css/site/desk/phone.css */
.ex[data-phone] .ex-screen {
  aspect-ratio: 640 / 800;
  border-radius: 20px;
}
.ex[data-phone] .ex-desk {
  width: 640px;
  height: 800px;
}
.ex[data-phone] .ex-win-a {
  left: 24px;
  right: 24px;
  width: auto;
}
.ex[data-phone] .ex-win-b {
  display: none;
}
.ex[data-phone] .ex-coach,
.ex[data-phone] .ex-note,
.ex[data-phone] #ex-map {
  display: none;
}
.ex[data-phone] .ex-acts {
  margin-left: 0;
}
.ex[data-phone] .ex-list-btn {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 16px;
  padding: 8px 16px;
}
.ex[data-phone] .ex-cap {
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
}
.ex[data-phone] .ex-end {
  justify-content: space-between;
}
.ex[data-phone] .ex-ctl {
  width: 100%;
}
.ex[data-phone] .ex-ctl .ex-btn {
  flex: 1;
  justify-content: center;
  padding: 8px 16px;
}
.ex[data-phone][data-view=idle] .ex-cap {
  display: none;
}
.ex[data-phone]:not([data-view=idle]) .ex-list-btn {
  display: none;
}
.ex[data-phone] .ig.ex-glyph {
  font-size: 18px;
}

/* assets/css/site/features.css */
.tagline {
  padding: 96px 0;
}
.tagline-text {
  max-width: calc(880px + 2 * var(--gutter));
  font-size: 48px;
  line-height: 1;
  font-weight: 600;
  font-stretch: 84%;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.tagline-text .w {
  color: var(--dim-word);
  transition: color 800ms var(--ease);
}
.tagline-text .w.on {
  color: var(--text);
}
.feature {
  padding: 96px 0;
  border-top: 1px solid var(--page-line);
}
.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: center;
}
.feature-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 480px;
  color: var(--text-dim);
}
.feature-copy h2 {
  margin-bottom: 8px;
  font-size: 36px;
  line-height: 40px;
  font-stretch: 84%;
  letter-spacing: -0.015em;
  color: var(--text);
}
.keys {
  display: flex;
  gap: 4px;
}
.aside {
  padding: 16px;
  border: 1px solid var(--page-line);
  border-radius: 16px;
  background: var(--sunken);
  font-size: 14px;
  line-height: 20px;
}
.stage {
  --s: 1;
  position: relative;
  margin: 0;
  min-height: 440px;
  border: 1px solid var(--page-line);
  border-radius: 16px;
  background: var(--stage);
  overflow: hidden;
  isolation: isolate;
}
.stage-isla {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  translate: -50% 0;
}
.stage figcaption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-dim);
}
.stage .note {
  color: var(--text-faint);
}
.desk {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.win {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: var(--window);
}
.win::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 12px;
  width: 40%;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
}
.win-a {
  left: 6%;
  top: 34%;
  width: 46%;
  height: 52%;
}
.win-b {
  left: 56%;
  top: 22%;
  width: 38%;
  height: 34%;
}
.win-c {
  left: 56%;
  top: 60%;
  width: 38%;
  height: 26%;
}
.win-wide {
  left: 6%;
  top: 40%;
  width: 88%;
  height: 46%;
}
.stage-notification {
  min-height: calc(150px * var(--s) + 180px);
}
.stage-music {
  min-height: calc(458px * var(--s) + 120px);
}
.stage-whatsapp {
  min-height: calc(620px * var(--s) + 84px);
}
.stage-shot {
  min-height: calc(130px * var(--s) + 330px);
}
.stage-tray {
  min-height: calc(440px * var(--s) + 72px);
}
.stage-screens {
  min-height: 400px;
}
.stage-files {
  min-height: calc(680px * var(--s) + 84px);
}
.stage-attach {
  min-height: calc(722px * var(--s) + 84px);
}
.music-steps {
  justify-content: flex-start;
}

/* assets/css/site/chapters.css */
.feature-wide .feature-grid {
  grid-template-columns: 1fr;
  gap: 48px;
}
.feature-wide .feature-copy {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 16px 64px;
  max-width: none;
}
.feature-head,
.feature-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.feature-body {
  max-width: 600px;
}
.wa-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.btn-quiet:disabled {
  opacity: 0.45;
  cursor: default;
}
.btn-quiet:disabled:hover {
  background: #2e2e2e;
}
.btn-quiet:disabled:active {
  transform: none;
}
.btn-plain {
  padding-left: 6px;
}
.btn-mark {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #3a3a3a;
  font-size: 18px;
  line-height: 1;
  transition: transform 300ms var(--ease);
}
.btn-quiet[aria-pressed=true] .btn-mark {
  transform: rotate(45deg);
}
.chapters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 32px;
  margin-top: -16px;
}
.chapter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 0 12px;
  border: 0;
  border-top: 2px solid var(--line-strong);
  background: none;
  color: var(--text-dim);
  font: 400 14px/20px "Instrument Sans", sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color 300ms var(--ease), color 300ms var(--ease);
}
.chapter:hover {
  border-top-color: var(--text-faint);
  color: var(--text);
}
.chapter[aria-pressed=true] {
  border-top-color: var(--accent);
  color: var(--text);
}
.chapter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.chapter-head b {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  color: var(--text);
}
.chapter-keys {
  display: flex;
  gap: 4px;
}
.chapter-keys kbd {
  height: 22px;
  min-width: 22px;
  padding: 0 6px;
}
.icon-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px 64px;
  align-items: center;
  margin-top: 64px;
}
.icon-copy h3 {
  font-size: 20px;
  line-height: 28px;
}
.icon-copy p {
  max-width: 480px;
  margin-top: 8px;
  color: var(--text-dim);
}
.icon-grid {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.icon-grid img {
  width: 100%;
  max-width: 56px;
  height: auto;
}

/* assets/css/site/screens.css */
.freeze {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: crosshair;
  touch-action: none;
  visibility: hidden;
}
.freeze.is-on {
  visibility: visible;
  background: rgba(0, 0, 0, 0.45);
}
.freeze.is-on.has-box {
  background: none;
}
.freeze-box {
  position: absolute;
  display: none;
  border: 2px solid #fff;
  border-radius: 2px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
}
.has-box .freeze-box {
  display: block;
}
.freeze-box.is-window {
  border-color: var(--accent);
  border-radius: 12px;
}
.flash {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.flash.is-on {
  animation: flash 380ms var(--ease);
}
@keyframes flash {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 0;
  }
}
.thumb {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  background: var(--stage);
}
.thumb .win {
  background: #4a4a4a;
  border-color: rgba(255, 255, 255, 0.2);
}
.thumb .win::before {
  display: none;
}
.stage-shot .win-a {
  height: 42%;
}
.stage-shot .win-c {
  height: 18%;
}
.screens {
  position: absolute;
  inset: 24px 24px 96px;
  display: grid;
  grid-template-columns: 3fr 2fr;
  align-content: center;
  align-items: end;
  gap: 16px;
}
.screen {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #1a1a1a;
  overflow: hidden;
}
.screen .win {
  border-radius: 6px;
}
.screen .win::before {
  left: 8px;
  top: 8px;
  height: 5px;
}

/* assets/css/site/lighter.css */
.weigh-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
}
.weigh-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--text-dim);
}
.weigh-copy h2 {
  margin-bottom: 8px;
  font-size: 36px;
  line-height: 40px;
  font-stretch: 84%;
  letter-spacing: -0.015em;
  color: var(--text);
}
.weigh-chart {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.weigh-view {
  align-self: flex-start;
}
.weigh-app-head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: center;
}
.weigh-app-head img {
  border-radius: 8px;
}
.weigh-app-head h3 {
  font-size: 20px;
  line-height: 28px;
}
.weigh-app-head p {
  grid-column: 2;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-faint);
}
.weigh-bars {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.weigh-bars li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  font-size: 14px;
  line-height: 20px;
}
.weigh-bars .who {
  color: var(--text-dim);
}
.weigh-bars .num {
  display: flex;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}
.weigh-bars .num b {
  font-weight: 600;
  color: var(--text);
}
.weigh-bars .cpu {
  min-width: 72px;
  text-align: right;
  color: var(--text-faint);
}
.weigh-bars .track {
  grid-column: 1 / -1;
  display: block;
  height: 28px;
}
.weigh-bars .bar {
  display: block;
  width: var(--open);
  height: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--window);
  transition: width 500ms var(--ease);
}
.weigh-bars .is-isla .who {
  color: var(--text);
  font-weight: 600;
}
.weigh-bars .is-isla .bar {
  border-color: #000;
  border-radius: 9999px;
  background: #000;
}
.weigh-chart[data-view=bg] .bar {
  width: var(--bg);
}
.weigh-chart[data-view=open] .v-bg,
.weigh-chart[data-view=bg] .v-open {
  display: none;
}
.weigh-method {
  max-width: 640px;
  font-size: 12px;
  line-height: 18px;
  color: var(--text-faint);
}

/* assets/css/site/os/made.css */
.made {
  padding: 32px 0 0;
}
.made-row {
  display: grid;
  grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.made-part {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px;
  border: 2px dashed var(--line-strong);
  border-radius: 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-dim);
}
.made-part b {
  font: 700 16px/24px var(--heros);
  color: var(--text);
}
.made-isla {
  border: 0;
  background: #000;
  color: rgba(255, 255, 255, 0.7);
}
.made-isla b {
  color: #fff;
}
.made-os {
  border: 2px solid var(--accent);
}
.made-part .now,
.made-part .soon {
  margin-top: auto;
}
.made-op {
  align-self: center;
  text-align: center;
  font: 700 24px/1 var(--heros);
  color: var(--text-faint);
}
.made-for {
  max-width: 680px;
  margin-top: 24px;
  color: var(--text-dim);
}
.now,
.soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 9999px;
  font: 700 12px/16px var(--heros);
  font-style: normal;
  white-space: nowrap;
}
.now {
  background: var(--accent);
  color: var(--on-accent);
}
.soon {
  padding-left: 6px;
  color: var(--accent-text);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.soon::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.soon-line {
  font-size: 14px;
  line-height: 20px;
}
.soon-line .soon {
  margin-right: 8px;
}
.made-title {
  margin-bottom: 16px;
  font: 700 14px/20px var(--heros);
  color: var(--text-dim);
}

/* assets/css/site/os/image.css */
.switch-figure {
  display: grid;
  justify-items: center;
  gap: 24px;
  margin: 0;
  font-family: var(--heros);
  color: #fff;
}
.switch-pill span {
  color: #bfbfbf;
  font-weight: 400;
}
.switch-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 20px;
  border-radius: 20px;
  background: #000;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.switch-head .ig {
  color: var(--accent);
  font-size: 18px;
}
.switch-card {
  width: 100%;
  max-width: 440px;
  padding: 24px;
  border-radius: 28px;
  background: #000;
}
.switch-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.switch-head .ig {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1f1f1f;
}
.switch-head span {
  display: block;
  font-size: 12px;
  color: #bfbfbf;
}
.switch-card p {
  font-size: 14px;
  line-height: 20px;
  color: #bfbfbf;
}
.switch-btn {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 16px;
  border-radius: 9999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 700;
}
.image-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 680px;
  color: var(--text-dim);
}
.image-head h2 {
  font-size: 36px;
  line-height: 40px;
  font-stretch: 84%;
  letter-spacing: -0.015em;
  color: var(--text);
}
.image-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 48px;
}
.image-col {
  padding: 24px;
  border: 1px solid var(--page-line);
  border-radius: 24px;
  background: var(--surface);
}
.image-later {
  border: 2px dashed var(--line-strong);
  background: none;
}
.image-col h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font: 700 14px/20px var(--heros);
}
.image-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.image-col li {
  padding: 12px 0;
  border-top: 1px solid var(--page-line);
}
.image-col li:first-child {
  border-top: 0;
}
.image-col li b {
  display: block;
  font-weight: 600;
}
.image-col li span {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-dim);
}
.image-promise {
  margin-top: 24px;
  color: var(--text-dim);
}

/* assets/css/site/closing.css */
.play-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-faint);
}
.play-row span {
  margin-right: 8px;
}
.play-row button {
  padding: 4px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 9999px;
  background: none;
  color: var(--text);
  font: 600 14px/20px "Instrument Sans", sans-serif;
  cursor: pointer;
  transition: background-color 300ms var(--ease);
}
.play-row button:hover {
  background: var(--chip);
}
.outro {
  padding: 96px 0;
  border-top: 1px solid var(--page-line);
  text-align: center;
}
.outro h2 {
  font-size: 48px;
  line-height: 1;
  font-stretch: 84%;
  letter-spacing: -0.02em;
}
.outro p {
  max-width: 560px;
  margin: 24px auto 32px;
  color: var(--text-dim);
}
.foot {
  padding: 32px 0 48px;
  border-top: 1px solid var(--page-line);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-faint);
}
.foot-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.foot a {
  color: var(--text-dim);
}

/* assets/css/site/waitlist.css */
.bezel-end {
  display: flex;
  align-items: center;
  gap: 16px;
}
.bezel-cta {
  font-size: 14px;
  line-height: 20px;
  padding: 6px 14px;
}
.btn-outline {
  padding-inline: 16px;
  background: none;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--field-line);
}
.btn-outline:hover {
  background: var(--chip);
}
.waitlist {
  display: flex;
  gap: 8px;
  max-width: 460px;
  margin-top: 32px;
  padding: 4px;
  border: 1px solid var(--page-line);
  border-radius: 9999px;
  background: var(--field);
  transition: border-color 300ms var(--ease);
}
.waitlist:focus-within {
  border-color: rgba(var(--accent-rgb), 0.6);
}
.waitlist input[type=email] {
  flex: 1;
  min-width: 0;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--text);
  font: 400 16px/24px "Instrument Sans", sans-serif;
  outline: none;
}
.waitlist input[type=email]::placeholder {
  color: var(--text-faint);
}
.waitlist button:disabled {
  opacity: 0.6;
  cursor: progress;
}
.waitlist .offscreen {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.waitlist-status {
  min-height: 20px;
  margin-top: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-dim);
}
.waitlist-status:empty {
  min-height: 0;
}
.hero .hero-actions {
  margin-top: 24px;
}
.waitlist-status[data-tone=ok] {
  color: var(--accent);
}
.waitlist-status[data-tone=error] {
  color: var(--signal);
}
.outro-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 24px;
}

/* assets/css/site/demos/film.css */
.film {
  padding: 0 0 96px;
}
.film-frame {
  position: relative;
  margin: 0;
  border: 1px solid var(--page-line);
  border-radius: 16px;
  background: var(--lagoon);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.film-poster,
.film-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film-video {
  position: absolute;
  inset: 0;
  background: transparent;
}
.film-caption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  max-width: calc(100% - 32px);
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.72);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-dim);
}
.film-play {
  position: absolute;
  right: 16px;
  bottom: 16px;
}

/* assets/css/site/demos/smooth.css */
.smooth .feature-grid {
  align-items: start;
}
.graph {
  padding: 16px;
  border: 1px solid var(--page-line);
  border-radius: 16px;
  background: #000;
}
.graph canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 640 / 300;
}
.graph-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.graph-bar .hz {
  background: #141414;
}
.graph-readout {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* assets/css/site/demos/glances.css */
.stage-glances {
  min-height: calc(520px * var(--s) + 140px);
}
.glance-caption {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}
.glance-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #181818;
}
.glance-hints button {
  padding: 4px 12px;
  border: 0;
  border-radius: 9999px;
  background: none;
  color: var(--text);
  font: 500 14px/20px "Instrument Sans", sans-serif;
  cursor: pointer;
  transition: background-color 300ms var(--ease);
}
.glance-hints small {
  margin-left: 4px;
  font-size: 12px;
  color: var(--text-faint);
}
.glance-hints button:hover {
  background: #262626;
}
.glance-hints button:focus-visible {
  outline: 2px solid var(--lagoon);
  outline-offset: 1px;
}
@media (max-width: 640px) {
  .stage-glances {
    min-height: calc(520px * var(--s) + 230px);
  }
  .glance-hints small {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .glance-hints button {
    transition: none;
  }
}

/* assets/css/site/demos/notify.css */
.stage-notification {
  min-height: calc(480px * var(--s) + 130px);
}
.notify-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.notify-controls .btn-quiet {
  padding: 4px 12px;
}
.stage-notification .note {
  flex: 1 1 100%;
}
@media (max-width: 640px) {
  .stage-notification {
    min-height: calc(480px * var(--s) + 180px);
  }
}

/* assets/css/site/demos/calendar.css */
.stage-calendar {
  min-height: calc(460px * var(--s) + 150px);
}
.stage-calendar figcaption {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.calendar-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #181818;
}
.calendar-steps button {
  padding: 4px 12px;
  border: 0;
  border-radius: 9999px;
  background: none;
  color: var(--text-dim);
  font: 500 14px/20px "Instrument Sans", sans-serif;
  cursor: pointer;
  transition: background-color 300ms var(--ease), color 300ms var(--ease);
}
.calendar-steps button:hover {
  color: var(--text);
  background: #262626;
}
.calendar-steps button[aria-pressed=true] {
  background: #000;
  color: var(--text);
}
.calendar-steps .calendar-leave {
  color: var(--text);
  background: #3a1517;
}
.calendar-steps .calendar-leave:hover {
  background: #5a1d21;
}
.calendar-status {
  min-height: 40px;
}
@media (prefers-reduced-motion: reduce) {
  .calendar-steps button {
    transition: none;
  }
}

/* assets/css/site/demos/slack.css */
.stage-slack {
  min-height: calc(780px * var(--s) + 84px);
}
.slack-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.slack-controls .btn-plain {
  padding-inline: 12px;
}
.slack-controls .btn-quiet[aria-pressed=true] {
  box-shadow: inset 0 0 0 1px var(--accent);
}
@media (max-width: 640px) {
  .stage-slack {
    min-height: calc(780px * var(--s) + 300px);
  }
  .stage-slack figcaption .note {
    width: 100%;
  }
}

/* assets/css/site/demos/themes.css */
.stage-themes {
  --screen: 560px;
  --m: 1;
  min-height: 0;
  padding-top: calc(var(--screen) * var(--m));
}
.stage-themes .desk {
  bottom: auto;
  height: calc(var(--screen) * var(--m));
  background-color: #23262d;
  background-image:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.05),
      rgba(0, 0, 0, 0.16));
  transition: background-color 360ms var(--ease);
}
.stage-themes[data-mode=light] .desk {
  background-color: #dde1e8;
}
.stage-themes .win {
  transition: background-color 360ms var(--ease), border-color 360ms var(--ease);
}
.stage-themes[data-mode=light] .win {
  border-color: rgba(16, 24, 40, 0.08);
  background: #f6f7f9;
}
.stage-themes[data-mode=light] .win::before {
  background: rgba(16, 24, 40, 0.08);
}
.stage-themes figcaption {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 20px 24px;
  padding: 20px;
  border-top: 1px solid var(--page-line);
  background: var(--stage);
}
.th-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.th-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.th-label {
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  color: var(--text);
}
.th-hint,
.th-readout,
.th-status {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-faint);
}
.th-status.is-bad {
  color: var(--signal);
}
.th-seg,
.th-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.th-seg {
  align-self: flex-start;
  padding: 3px;
  border-radius: 9999px;
  background: #181818;
}
.th-seg button,
.th-chips button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 9999px;
  font: 500 14px/20px "Instrument Sans", sans-serif;
  color: var(--text-dim);
  cursor: pointer;
  transition:
    background-color 300ms var(--ease),
    color 300ms var(--ease),
    box-shadow 300ms var(--ease);
}
.th-seg button {
  padding: 4px 12px;
  background: none;
}
.th-chips button {
  padding: 5px 12px 5px 6px;
  background: #2e2e2e;
}
.th-seg button:hover,
.th-chips button:hover {
  color: var(--text);
  background: #383838;
}
.th-seg button[aria-checked=true] {
  background: #000;
  color: var(--text);
}
.th-chips button[aria-checked=true] {
  background: rgba(var(--accent-rgb), 0.18);
  box-shadow: inset 0 0 0 1.5px var(--accent);
  color: var(--text);
}
.th-seg button:focus-visible,
.th-chips button:focus-visible,
.th-code:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.th-file {
  gap: 8px;
}
.th-file .link-btn {
  align-self: flex-start;
}
.th-code {
  box-sizing: border-box;
  width: 100%;
  min-height: 236px;
  padding: 12px 14px;
  border: 1px solid var(--page-line);
  border-radius: 12px;
  background: #121212;
  color: var(--text);
  font:
    13px/18px ui-monospace,
    "JetBrains Mono",
    "SFMono-Regular",
    Menlo,
    monospace;
  tab-size: 2;
  resize: vertical;
}
.th-code[aria-invalid=true] {
  border-color: var(--signal);
}
.th-sizes {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  padding-top: 16px;
  border-top: 1px solid var(--page-line);
}
@media (max-width: 760px) {
  .stage-themes figcaption {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .stage-themes .desk,
  .stage-themes .win,
  .th-seg button,
  .th-chips button {
    transition-duration: 140ms;
  }
}

/* assets/css/site/demos/control.css */
.stage-control {
  min-height: calc(500px * var(--s) + 96px);
}
.stage-control .desk {
  transition: background-color 360ms var(--ease);
}
.stage-control[data-mode=light] .desk {
  background-color: #dde1e8;
}
.stage-control .win {
  transition: background-color 360ms var(--ease), border-color 360ms var(--ease);
}
.stage-control[data-mode=light] .win {
  border-color: rgba(16, 24, 40, 0.08);
  background: #f6f7f9;
}
.stage-control[data-mode=light] .win::before {
  background: rgba(16, 24, 40, 0.08);
}
.stage-control[data-mode=light] .note {
  color: #4b4d5d;
}
.stage-control[data-mode=light] .btn-quiet {
  background: #f6f7f9;
  color: #333547;
}
.stage-control[data-mode=light] .btn-quiet:hover {
  background: #e5e7ed;
}
.stage-control[data-mode=light] .btn-quiet kbd {
  border-color: rgba(16, 24, 40, 0.16);
  background: #eff1f5;
  box-shadow: inset 0 -2px 0 rgba(16, 24, 40, 0.12);
  color: #333547;
}
.night-tint {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #ff9d3c;
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2s var(--ease);
}
.stage-control.is-night .night-tint {
  opacity: 0.32;
}
@media (prefers-reduced-motion: reduce) {
  .night-tint,
  .stage-control .desk,
  .stage-control .win {
    transition: none;
  }
}

/* assets/css/site/demos/wallpaper.css */
.stage-wall {
  --c0: #060a13;
  --c1: #1e8c6c;
  --c2: #2a52a3;
  --c3: #5a2d79;
  min-height: 520px;
  background: var(--c0);
  transition: background-color 600ms var(--ease);
}
.stage-wall[data-wall=drift] {
  --c0: #0b0f17;
  --c1: #22487a;
  --c2: #432f78;
  --c3: #1d5a66;
}
.stage-wall[data-wall=tide] {
  --c0: #0a1424;
  --c1: #1b2541;
  --c2: #21406a;
  --c3: #5b7dac;
}
.stage-wall[data-wall=image] {
  --c0: #1d2635;
}
.wall {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.wall-blob {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.9;
  will-change: transform;
  animation: wall-a 18s ease-in-out infinite alternate;
  transition: opacity 600ms var(--ease);
}
.wall-blob-a {
  left: -14%;
  top: -30%;
  background:
    radial-gradient(
      circle,
      var(--c1) 0,
      transparent 66%);
}
.wall-blob-b {
  right: -18%;
  top: -10%;
  background:
    radial-gradient(
      circle,
      var(--c2) 0,
      transparent 66%);
  animation-name: wall-b;
  animation-duration: 23s;
}
.wall-blob-c {
  left: 18%;
  bottom: -46%;
  background:
    radial-gradient(
      circle,
      var(--c3) 0,
      transparent 66%);
  animation-duration: 27s;
  animation-direction: alternate-reverse;
}
.wall-blob-d {
  right: 4%;
  bottom: -40%;
  width: 46%;
  background:
    radial-gradient(
      circle,
      var(--c1) 0,
      transparent 66%);
  animation-name: wall-b;
  animation-duration: 31s;
  animation-direction: alternate-reverse;
}
.stage-wall[data-wall=tide] .wall-blob {
  animation-duration: 12s;
}
@keyframes wall-a {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(18%, 12%) scale(1.16);
  }
}
@keyframes wall-b {
  from {
    transform: translate(0, 0) scale(1.1);
  }
  to {
    transform: translate(-16%, 10%) scale(0.92);
  }
}
.stage-wall.is-paused .wall-blob {
  animation-play-state: paused;
}
.stage-wall[data-wall=image] .wall-blob {
  border-radius: 50% 50% 0 0;
  animation: none;
  opacity: 1;
}
.stage-wall[data-wall=image] .wall-blob-a {
  left: -20%;
  top: auto;
  bottom: -52%;
  width: 90%;
  background: #3a3550;
}
.stage-wall[data-wall=image] .wall-blob-b {
  right: -30%;
  top: auto;
  bottom: -60%;
  width: 100%;
  background: #52476a;
}
.stage-wall[data-wall=image] .wall-blob-c {
  left: 10%;
  bottom: -70%;
  width: 80%;
  background: #6e5a78;
}
.stage-wall[data-wall=image] .wall-blob-d {
  right: 14%;
  bottom: auto;
  top: 14%;
  width: 6%;
  background: #f3eee6;
}
.stage-wall .win-wall {
  left: 52%;
  top: 18%;
  width: 42%;
  height: 50%;
  transition:
    left 500ms var(--ease),
    top 500ms var(--ease),
    width 500ms var(--ease),
    height 500ms var(--ease);
}
.stage-wall.is-max .win-wall {
  left: 8px;
  top: 40px;
  width: calc(100% - 16px);
  height: calc(100% - 48px);
}
.stage-wall figcaption {
  z-index: 4;
}
@media (prefers-reduced-motion: reduce) {
  .wall-blob {
    animation-play-state: paused;
  }
  .stage-wall,
  .stage-wall .win-wall {
    transition: none;
  }
}

/* assets/css/site/responsive.css */
@media (max-width: 1080px) {
  .weigh-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .weigh-copy {
    max-width: 640px;
  }
  :root {
    --gutter: 32px;
  }
  .hero-row,
  .feature-grid,
  .image-cols {
    grid-template-columns: 1fr;
  }
  .feature-grid {
    gap: 40px;
  }
  .feature-copy {
    max-width: 640px;
  }
  .feature-wide .feature-copy,
  .icon-row {
    grid-template-columns: 1fr;
  }
  .feature-wide .feature-copy {
    max-width: 640px;
  }
  .chapters {
    grid-template-columns: 1fr 1fr;
  }
  .icon-grid {
    max-width: 640px;
  }
  .made-row {
    grid-template-columns: 1fr 1fr;
  }
  .made-op {
    display: none;
  }
  .ex-cap {
    grid-template-columns: 1fr;
  }
  .ex-end {
    justify-content: space-between;
  }
}
@media (max-width: 640px) {
  .weigh-copy h2 {
    font-size: 30px;
    line-height: 36px;
  }
  .weigh-bars .num {
    gap: 8px;
  }
  .weigh-bars .cpu {
    min-width: 0;
  }
  :root {
    --gutter: 16px;
  }
  .bezel {
    padding-inline: 16px;
  }
  .bezel-link {
    display: none;
  }
  .bezel-cta {
    font-size: 14px;
    line-height: 20px;
  }
  .hero {
    padding: 88px 0 48px;
  }
  .hero h1 {
    font-size: 48px;
    font-stretch: 78%;
  }
  .hero h1 br {
    display: none;
  }
  .lede {
    font-size: 18px;
    line-height: 28px;
  }
  .ex {
    margin-top: 32px;
  }
  .made-row {
    grid-template-columns: 1fr;
  }
  .tagline {
    padding: 64px 0;
  }
  .tagline-text {
    font-size: 30px;
    line-height: 36px;
  }
  .feature,
  .outro {
    padding: 64px 0;
  }
  .stage-whatsapp {
    min-height: calc(620px * var(--s) + 176px);
  }
  .stage-files {
    min-height: calc(680px * var(--s) + 128px);
  }
  .stage-attach {
    min-height: calc(722px * var(--s) + 128px);
  }
  .chapters {
    grid-template-columns: 1fr;
    margin-top: -24px;
  }
  .icon-row {
    margin-top: 48px;
  }
  .icon-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .stage-shot {
    min-height: calc(130px * var(--s) + 360px);
  }
  .stage-screens {
    min-height: 560px;
  }
  .screens {
    inset: 16px 16px auto;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .feature-copy h2,
  .image-head h2 {
    font-size: 30px;
    line-height: 36px;
  }
  .outro h2 {
    font-size: 36px;
    line-height: 40px;
  }
  .stage figcaption {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
  .stage-whatsapp figcaption .note {
    width: 100%;
  }
  .foot-row {
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .weigh-bars .bar {
    transition: none;
  }
  .flash.is-on {
    animation: none;
  }
  .btn,
  .ex-btn,
  .topisla,
  .tagline-text .w,
  .music-steps button,
  .hz button {
    transition: none;
  }
  .tagline-text .w {
    color: var(--text);
  }
}

/* assets/css/site.css */