@font-face {
  font-family: Inter;
  src: url("assets/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("assets/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Poppins;
  src: url("assets/Poppins-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
:root {
  /* Grafana theme palette; sources and adaptations are in docs/design-guidance.md. */
  --bg: #fbfbfb;
  --surface: #fff;
  --ink: #24292e;
  --muted: #51555b;
  --line: #d6d7d9;
  --accent: #1f62e0;
  --accent-hover: #1a53be;
  --accent-text: #fff;
  --success: #0a764e;
  --error: #cf0e5b;
  --otel-bg: #fff3e6;
  --crash-bg: #fff0e8;
  --trace-bg: #ffece8;
  --trace-accent: #b13b21;
  --radius-default: 6px;
  --radius-lg: 10px;
  --hover: #ececed;
  --arrow-filter: none;
  --button-arrow-filter: brightness(0) invert(1);
  --brand-gradient: linear-gradient(90deg, #ff8833 0%, #f53e4c 100%);
  --display: Poppins, Inter, Helvetica, Arial, sans-serif;
  --body: Inter, Helvetica, Arial, sans-serif;
  --gutter: 20px;
  color-scheme: light dark;
  font-family: var(--body);
  color: var(--ink);
  background: var(--bg);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111217;
    --surface: #181b1f;
    --ink: #ccccdc;
    --muted: #ababaf;
    --line: #44474e;
    --accent: #6e9fff;
    --accent-hover: #8aafff;
    --accent-text: #111217;
    --success: #6ccf8e;
    --error: #ff5286;
    --otel-bg: #22252b;
    --crash-bg: #22252b;
    --trace-bg: #22252b;
    --trace-accent: #ff995d;
    --hover: #2c2f35;
    --arrow-filter: brightness(0) invert(1);
    --button-arrow-filter: none;
    --brand-gradient: linear-gradient(270deg, #f55f3e 0%, #ff8833 100%);
  }
}
* {
  box-sizing: border-box;
  letter-spacing: 0;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  line-height: 1.5;
}
h1,
h2,
h3,
p,
figure,
dl,
dd,
ol,
ul {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: var(--display);
  line-height: 1.1;
  font-weight: 600;
}
ul {
  list-style: none;
  padding: 0;
}
a {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button:disabled {
  cursor: default;
  opacity: 0.45;
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}
img {
  max-width: 100%;
  display: block;
}
[hidden] {
  display: none !important;
}
.skip {
  position: absolute;
  top: -80px;
  left: 8px;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-text);
  padding: 12px;
}
.skip:focus {
  top: 8px;
}
.store-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 max(var(--gutter), calc((100% - 1080px) / 2));
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font: 600 20px/1 var(--body);
}
.brand-product {
  color: var(--muted);
  font-weight: 400;
}
.store-crumb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}
.access-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}
.store-content,
footer {
  max-width: 1120px;
  margin: auto;
  padding: 0 var(--gutter);
}
.listing {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 18px;
  padding: 26px 0 24px;
  align-items: start;
}
.app-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 12px;
  animation: icon-arrive 0.65s ease-out both;
}
.listing-copy {
  animation: arrive 0.45s 0.06s ease-out both;
}
h1 {
  font-size: 28px;
  overflow-wrap: break-word;
}
.tagline {
  font-size: 18px;
  font-weight: 600;
  margin-top: 10px;
}
.listing-sub {
  color: var(--muted);
  font-size: 14px;
  margin-top: 8px;
  max-width: 60ch;
}
.listing-cloud {
  display: block;
}
.get-group {
  grid-column: 1/-1;
  display: grid;
  gap: 8px;
}
.get-group > span {
  font-size: 12px;
  color: var(--muted);
}
.get-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 20px;
  min-height: 48px;
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: var(--radius-default);
  color: var(--accent-text);
  font: 600 16px/1.35 var(--body);
  text-decoration: none;
  text-align: center;
  transition:
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.get-button:hover {
  background: var(--accent-hover);
}
.get-button img {
  width: 20px;
  height: 20px;
  filter: var(--button-arrow-filter);
  transition: transform 0.18s ease;
}
.get-button:active {
  transform: translateY(1px);
}
.get-wide {
  width: 100%;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  padding: 18px 0 24px;
  border-top: 1px solid var(--line);
}
.chips > li {
  display: grid;
  align-content: start;
  gap: 4px;
}
.chips > .team-pick {
  align-content: center;
}
.team-pick-badge {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 56px;
}
.team-pick-badge strong {
  max-width: 14ch;
  line-height: 1.3;
  text-align: center;
}
.team-pick-badge img {
  width: 28px;
  height: 56px;
  flex-shrink: 0;
  filter: var(--arrow-filter);
}
.laurel-right {
  transform: scaleX(-1);
}
.platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.platform-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  font-size: 13px;
  font-weight: 600;
}
.platform-name img {
  flex-shrink: 0;
  object-fit: contain;
}
.monochrome-icon {
  filter: var(--arrow-filter);
}
.chips small {
  font-size: 11px;
  color: var(--muted);
}
.chips strong {
  font-size: 13px;
  font-weight: 600;
}
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
h2 {
  font-size: 25px;
}
.small-note,
.demo-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.experience {
  padding: 24px 0 28px;
  border-top: 1px solid var(--line);
}
.carousel-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
#card-position {
  font-size: 12px;
  min-width: 34px;
  font-variant-numeric: tabular-nums;
}
.round-button {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.round-button img {
  width: 20px;
  height: 20px;
  filter: var(--arrow-filter);
}
.flip {
  transform: rotate(180deg);
}
.preview-cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(100% - 28px);
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
  padding: 6px 0 16px;
}
.preview-card {
  scroll-snap-align: start;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 26px 22px 20px;
  border-radius: var(--radius-lg);
  color: var(--ink);
  background: var(--otel-bg);
}
.trace-card {
  background: var(--trace-bg);
}
.crash-card {
  background: var(--crash-bg);
}
.preview-card h3 {
  font-size: 30px;
  margin: 0 0 12px;
  min-height: 66px;
}
.card-copy {
  font-size: 14px;
  min-height: 42px;
  max-width: 30ch;
}
.card-art {
  margin: 24px 0 16px;
  height: 270px;
  flex-shrink: 0;
  position: relative;
}
.code-art {
  background: #181b1f;
  color: #ccccdc;
  padding: 16px;
  border-radius: var(--radius-default);
  overflow: hidden;
  font:
    12px/1.8 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
}
.code-top {
  display: flex;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid #ffffff30;
  color: #ababaf;
  font-size: 10px;
}
.code-lines {
  display: grid;
  padding: 16px 0 18px;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.code-comment {
  font-size: 10px;
  color: #ababaf;
}
.code-lines strong {
  color: #fbad37;
  font-weight: 400;
  grid-area: 3/1;
}
.played .endpoint {
  animation: type-in 0.8s steps(18) both;
}
.connection {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  color: #ccccdc;
}
.connection-line {
  height: 2px;
  background: #44474e;
  flex: 1;
  position: relative;
  overflow: hidden;
}
.connection-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #ff9900;
  transform: translateX(-100%);
}
.played .connection-line::after {
  animation: connect 1.5s 0.8s both;
}
.played .connection img {
  animation: light-up 0.8s 2.3s both;
}
.investigation-art {
  display: grid;
  grid-template-rows: 22px 34px 22px 1fr;
  gap: 10px;
}
.investigation-top,
.investigation-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
}
.investigation-top {
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  font-size: 13px;
}
.investigation-top > span {
  font-size: 9px;
}
.investigation-error {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border-left: 3px solid var(--error);
  padding: 0 8px;
  background: var(--surface);
  font-size: 11px;
}
.investigation-error > span:last-child {
  font-size: 9px;
  color: var(--error);
}
.error-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--error);
  flex-shrink: 0;
}
.investigation-trace {
  display: grid;
  gap: 7px;
  align-content: start;
}
.investigation-trace > small {
  font-size: 8px;
}
.played .investigation-error,
.played .investigation-session,
.played .investigation-trace {
  opacity: 1;
  animation: arrive 0.4s ease-out both;
}
.played .investigation-session {
  animation-delay: 0.65s;
}
.played .investigation-trace {
  animation-delay: 1.3s;
}
.trace-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: start;
  position: relative;
}
.trace-row:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  height: 37px;
  width: 2px;
  background: var(--line);
}
.trace-dot {
  display: block;
  width: 10px;
  height: 10px;
  border: 2px solid var(--trace-accent);
  border-radius: 50%;
  margin-top: 4px;
  background: var(--trace-bg);
  z-index: 1;
}
.trace-row small {
  display: block;
  font-size: 8px;
}
.trace-row strong {
  display: block;
  font: 600 11px/1.5 var(--body);
}
.trace-row code {
  font-size: 9px;
  margin-top: 12px;
  text-align: right;
  white-space: nowrap;
}
.span-bar {
  display: block;
  height: 4px;
  margin-top: 3px;
  background: var(--trace-accent);
  width: 100%;
  transform-origin: left;
}
.trace-row:nth-of-type(2) .span-bar {
  width: 80%;
}
.trace-row:nth-of-type(3) .span-bar {
  width: 60%;
}
.played .span-bar {
  background: var(--trace-accent);
  animation: trace-in 0.7s 1.6s both;
}
.played .trace-row:nth-of-type(2) .span-bar {
  animation-delay: 2.2s;
}
.played .trace-row:nth-of-type(3) .span-bar {
  animation-delay: 2.8s;
}
.played .trace-dot {
  background: var(--trace-accent);
  border-color: var(--trace-accent);
  animation: light-up 0.4s 1.6s both;
}
.played .trace-row:nth-of-type(2) .trace-dot {
  animation-delay: 2.2s;
}
.played .trace-row:nth-of-type(3) .trace-dot {
  animation-delay: 2.8s;
}
.crash-art {
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.checkout-view,
.crash-fault,
.crash-reveal {
  grid-area: 1/1;
  padding: 16px;
}
.checkout-view,
.crash-fault,
.crash-reveal {
  display: grid;
  gap: 12px;
  text-align: center;
  justify-items: center;
}
.checkout-view > small {
  font-size: 10px;
}
.checkout-symbol {
  width: 40px;
  height: 40px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font: 600 26px/36px var(--body);
}
.checkout-view > strong,
.crash-fault > strong,
.crash-reveal > strong {
  font: 600 18px var(--body);
}
.crash-reveal > strong {
  font-size: 26px;
}
.crash-fault > span,
.crash-reveal > span {
  font-size: 13px;
}
.checkout-view > span:not(.checkout-symbol) {
  font-size: 12px;
}
.checkout-view b {
  margin-left: 32px;
}
.checkout-order {
  background: var(--accent);
  color: var(--accent-text);
  border-radius: var(--radius-default);
  padding: 10px 30px;
  width: 90%;
}
.crash-fault,
.crash-reveal {
  visibility: hidden;
}
.crash-receipt {
  display: flex;
  gap: 8px;
  align-items: center;
  text-align: left;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 12px;
  font-size: 12px;
}
.crash-receipt > div {
  display: grid;
  gap: 3px;
}
.crack-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  visibility: hidden;
}
.crack-layer i {
  position: absolute;
  inset: 0;
  opacity: 0.6;
  background: var(--muted);
  clip-path: polygon(
    0 21%,
    40% 36%,
    70% 43%,
    100% 20%,
    70% 44%,
    40% 37%,
    0 22%
  );
}
.crack-layer i:nth-child(2) {
  clip-path: polygon(
    55% 8%,
    40% 37%,
    48% 61%,
    62% 100%,
    61% 100%,
    47% 62%,
    39% 37%,
    54% 8%
  );
}
.crack-layer i:nth-child(3) {
  clip-path: polygon(
    0 98%,
    47% 61%,
    70% 43%,
    100% 77%,
    100% 78%,
    70% 44%,
    48% 62%,
    1% 100%
  );
}
.crash-fault {
  position: relative;
  text-shadow:
    0 0 6px var(--surface),
    0 0 3px var(--surface);
}
.played .crash-art {
  animation: shake 0.45s ease-out;
}
.played .checkout-view {
  visibility: hidden;
}
.played .crack-layer,
.played .crash-fault {
  animation: broken-screen 1.9s both;
}
.played .crash-reveal {
  visibility: visible;
  animation: arrive 0.35s 1.9s ease-out both;
}
.played #crash-result {
  animation: arrive 0.35s 1.9s ease-out both;
}
.card-result {
  font-size: 12px;
  min-height: 72px;
  margin-top: auto;
}
.card-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 14px 0 0;
  min-height: 48px;
  font: 600 14px var(--body);
  margin-top: 12px;
  text-align: left;
}
.card-action img {
  width: 20px;
  height: 20px;
  filter: var(--arrow-filter);
  transition: transform 0.18s ease;
}
.card-action:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.demo-note {
  max-width: 92ch;
  margin-top: 10px;
}
.block {
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
.join {
  background: var(--brand-gradient);
  border-top: 0;
  padding: 0;
  color: #111217;
}
.join-inner {
  display: grid;
  gap: 24px;
  max-width: 1120px;
  padding: 40px var(--gutter);
  margin: auto;
}
.join .small-note,
.join .privacy-line,
.join .signup-entry > p {
  color: #111217;
}
.join .get-button {
  background: #181b1f;
  color: #fff;
}
.join .get-button:hover {
  background: #2c2f35;
}
.join .get-button img {
  filter: brightness(0) invert(1);
}
.join a:focus-visible {
  outline-color: #111217;
}
.signup-entry {
  display: grid;
  align-content: start;
  gap: 16px;
}
.signup-entry > p:not(.privacy-line) {
  font-size: 14px;
}
.signup-grot {
  width: 200px;
  height: auto;
  aspect-ratio: 321 / 171;
  justify-self: center;
}
.form-fallback {
  font-size: 12px;
  margin-bottom: 16px;
}
.form-fallback a {
  font-weight: 600;
}
.form-fallback button {
  display: block;
  padding: 0;
  margin: 20px 0 12px;
  min-height: 44px;
  border: 0;
  background: transparent;
  text-decoration: underline;
  font-weight: 600;
}
.sheet.custom-signup {
  width: min(540px, calc(100% - 20px));
}
.waitlist-form {
  display: grid;
  gap: 20px;
}
.waitlist-field {
  display: grid;
  gap: 8px;
}
.waitlist-field label,
.waitlist-frameworks legend {
  font-weight: 600;
  font-size: 14px;
}
.waitlist-field label span,
.waitlist-frameworks legend span {
  color: var(--muted);
  font-weight: 400;
}
.waitlist-field input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  border: 1px solid var(--muted);
  border-radius: var(--radius-default);
  background: var(--surface);
}
.waitlist-frameworks {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.waitlist-frameworks legend {
  margin-bottom: 8px;
  padding: 0;
}
.framework-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}
.framework-options label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  font-size: 14px;
}
.framework-options input {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}
.waitlist-form .get-button {
  width: 100%;
  min-height: 48px;
}
.waitlist-note {
  color: var(--muted);
  font-size: 12px;
}
.waitlist-note + .waitlist-note {
  margin-top: -12px;
}
#signup-frame,
#signup-result-frame {
  display: block;
  width: 100%;
  height: 660px;
  border: 0;
  background: white;
  color-scheme: light;
}
#signup-result-frame {
  height: 520px;
  margin-top: 16px;
}
.signup-intro h2 {
  font-size: 32px;
}
.signup-intro p {
  margin-top: 14px;
  max-width: 44ch;
}
.privacy-line {
  font-size: 12px;
  color: var(--muted);
}
footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 24px;
  padding-bottom: 100px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.sticky-get {
  display: flex;
  align-items: center;
  gap: 10px;
  position: fixed;
  z-index: 30;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.sticky-get > span {
  font-size: 12px;
  flex: 1;
  min-width: 0;
}
.sticky-get .get-button {
  font-size: 14px;
  padding: 10px 14px;
}
.sticky-get > img {
  border-radius: 8px;
}
dialog {
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: 0 24px 80px #11121740;
}
dialog::backdrop {
  background: #111217aa;
}
.sheet {
  width: min(740px, calc(100% - 20px));
  max-height: calc(100dvh - 24px);
  padding: 0 20px 20px;
  margin: auto;
  overflow: auto;
  overscroll-behavior: contain;
}
.sheet[open] {
  animation: arrive 0.2s ease-out;
}
.sheet[open]::backdrop {
  animation: backdrop-in 0.2s ease-out;
}
.sheet-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.sheet-head h2 {
  font-size: 23px;
}
.sheet-head p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .get-button:hover {
    box-shadow: 0 4px 12px #11121726;
  }
  .get-button:hover img,
  .card-action:hover img {
    transform: translateX(3px);
  }
  .round-button:not(:disabled):hover {
    background: var(--hover);
  }
}
@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes icon-arrive {
  from {
    opacity: 0;
    transform: translateY(8px) rotate(-5deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
}
@keyframes backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes type-in {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}
@keyframes connect {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes light-up {
  from {
    opacity: 0.25;
  }
  to {
    opacity: 1;
  }
}
@keyframes trace-in {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-5px) rotate(-1deg);
  }
  40%,
  80% {
    transform: translateX(5px) rotate(1deg);
  }
}
@keyframes broken-screen {
  0% {
    opacity: 0;
    visibility: visible;
  }
  15%,
  75% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@media (max-width: 359px) {
  :root {
    --gutter: 16px;
  }
  .listing {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
  }
  .app-icon {
    width: 58px;
    height: 58px;
    border-radius: 14px;
  }
  h1 {
    font-size: 25px;
  }
  .preview-card {
    padding: 24px 16px 18px;
  }
  .preview-card h3 {
    font-size: 27px;
  }
  .sticky-get > span {
    display: none;
  }
  .sticky-get .get-button {
    flex: 1;
  }
  .store-crumb {
    font-size: 11px;
  }
}
@media (max-width: 540px) {
  .sheet,
  .sheet.custom-signup {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
    padding: 0 20px calc(20px + env(safe-area-inset-bottom));
  }
  .sheet-head {
    padding-top: max(18px, env(safe-area-inset-top));
  }
}
@media (min-width: 650px) {
  :root {
    --gutter: 28px;
  }
  .listing {
    grid-template-columns: 110px minmax(0, 1fr);
    padding-top: 36px;
  }
  .app-icon {
    width: 110px;
    height: 110px;
    border-radius: 26px;
  }
  h1 {
    font-size: 38px;
  }
  .get-group {
    grid-column: 2;
    justify-items: start;
  }
  .chips {
    justify-content: space-between;
  }
  .preview-cards {
    grid-auto-columns: calc((100% - 48px) / 2.5);
  }
  .preview-card {
    padding: 26px 22px 20px;
  }
  .preview-card h3 {
    font-size: 29px;
  }
  .join-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 50px;
  }
  .signup-entry {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .signup-grot {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }
  .sticky-get {
    display: none;
  }
  footer {
    padding-bottom: 30px;
  }
}
@media (min-width: 650px) and (max-width: 900px) {
  .preview-cards {
    grid-auto-columns: calc((100% - 36px) / 1.7);
  }
}
@media (min-width: 1000px) {
  .listing {
    grid-template-columns: 110px minmax(0, 1fr) 230px;
    align-items: center;
    gap: 24px;
  }
  .get-group {
    grid-column: auto;
    justify-items: stretch;
  }
  .get-group > span {
    text-align: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .get-button:active,
  .get-button:hover img,
  .card-action:hover img {
    transform: none;
  }
  .played .connection-line::after {
    transform: translateX(0);
  }
  .crack-layer,
  .crash-fault {
    display: none;
  }
}