:root {
  color-scheme: dark;
  --ch-bg: #050008;
  --ch-bg-raised: #120018;
  --ch-surface: #2b124c;
  --ch-primary: #00f0ff;
  --ch-accent: #f8e602;
  --ch-success: #4bff21;
  --ch-warning: #f4d5fd;
  --ch-danger: #f96363;
  --ch-text: #ddfbff;
  --ch-text-secondary: #a7dce2;
  --ch-text-muted: #7fafb6;
  --ch-line: rgb(0 240 255 / 34%);
  --ch-line-strong: rgb(0 240 255 / 78%);
  --page-width: 78rem;
  --prose-width: 72ch;
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 7rem;
  --rule: 1px solid var(--ch-line);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--ch-bg);
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  position: relative;
  min-block-size: 100vh;
  margin: 0;
  overflow-x: hidden;
  overflow-wrap: anywhere;
  background: var(--ch-bg);
  color: var(--ch-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  background-color: var(--ch-primary);
  content: "";
  -webkit-mask: url("/assets/controller-tactical-blueprint.png") center 58% / min(72rem, 90vw) auto no-repeat;
  mask: url("/assets/controller-tactical-blueprint.png") center 58% / min(72rem, 90vw) auto no-repeat;
  opacity: 0.035;
  pointer-events: none;
}

[hidden] {
  display: none !important;
}

img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

a {
  color: var(--ch-primary);
  text-decoration-color: rgb(0 240 255 / 48%);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--ch-accent);
  text-decoration-color: currentColor;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--ch-accent);
  outline-offset: 4px;
}

::selection {
  background: var(--ch-accent);
  color: var(--ch-bg-raised);
}

h1,
h2,
h3 {
  max-inline-size: 24ch;
  margin-block: 0;
  color: var(--ch-text);
  font-weight: 780;
  letter-spacing: -0.035em;
  line-height: 1.03;
  text-wrap: balance;
}

h1 {
  font-size: clamp(3rem, 1.2rem + 7vw, 7rem);
}

h2 {
  font-size: clamp(2rem, 1.25rem + 3vw, 4.4rem);
}

h3 {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.65rem);
}

p,
ul,
ol,
dl,
figure {
  margin-block: 0;
}

p + p {
  margin-block-start: 1em;
}

ul,
ol {
  padding-inline-start: 1.25rem;
}

li + li {
  margin-block-start: 0.55rem;
}

code {
  color: var(--ch-warning);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}

.visually-hidden {
  position: absolute;
  overflow: hidden;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 100;
  min-block-size: 44px;
  padding: 0.65rem 1rem;
  border: 2px solid var(--ch-accent);
  background: var(--ch-bg);
  color: var(--ch-accent);
  font-weight: 800;
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-shell {
  position: relative;
  z-index: 1;
  inline-size: min(100% - 2rem, var(--page-width));
  margin-inline: auto;
}

.site-header {
  display: flex;
  position: relative;
  z-index: 20;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  min-block-size: 5rem;
  border-block-end: var(--rule);
  background: rgb(5 0 8 / 94%);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-block-size: 44px;
  color: var(--ch-text);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.brand-mark {
  display: block;
  inline-size: 2rem;
  block-size: 2rem;
  overflow: hidden;
}

.brand-mark img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.brand-accent {
  color: var(--ch-primary);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav li + li {
  margin: 0;
}

.site-nav a {
  display: grid;
  place-items: center;
  min-block-size: 44px;
  padding-inline: 0.75rem;
  border-block-end: 2px solid transparent;
  color: var(--ch-text-secondary);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  border-block-end-color: var(--ch-accent);
  color: var(--ch-text);
}

.draft-bar {
  display: flex;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin-block-start: var(--space-3);
  padding: 0.75rem 1rem;
  border-inline-start: 3px solid var(--ch-accent);
  background: rgb(248 230 2 / 7%);
  color: var(--ch-text-secondary);
  font-size: 0.88rem;
}

.draft-bar strong {
  flex: none;
  color: var(--ch-accent);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

main {
  display: block;
}

.eyebrow,
.section-index,
.card-index,
.status-code,
.applet-type {
  color: var(--ch-accent);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-cinematic {
  display: grid;
  position: relative;
  isolation: isolate;
  align-items: end;
  inline-size: 100vw;
  min-block-size: clamp(42rem, 84vh, 60rem);
  margin-inline: calc(50% - 50vw);
  margin-block-start: var(--space-3);
  overflow: hidden;
  background: #000;
}

.hero-cinematic::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 94%) 0%, rgb(0 0 0 / 74%) 38%, rgb(0 0 0 / 12%) 72%),
    linear-gradient(0deg, rgb(0 0 0 / 88%) 0%, transparent 45%);
  content: "";
  pointer-events: none;
}

.hero-cinematic::after {
  position: absolute;
  z-index: 3;
  inset: 1.25rem;
  background:
    linear-gradient(var(--ch-primary), var(--ch-primary)) left top / 5rem 2px no-repeat,
    linear-gradient(var(--ch-primary), var(--ch-primary)) left top / 2px 5rem no-repeat,
    linear-gradient(var(--ch-primary), var(--ch-primary)) right top / 5rem 2px no-repeat,
    linear-gradient(var(--ch-primary), var(--ch-primary)) right top / 2px 5rem no-repeat,
    linear-gradient(var(--ch-primary), var(--ch-primary)) left bottom / 5rem 2px no-repeat,
    linear-gradient(var(--ch-primary), var(--ch-primary)) left bottom / 2px 5rem no-repeat,
    linear-gradient(var(--ch-primary), var(--ch-primary)) right bottom / 5rem 2px no-repeat,
    linear-gradient(var(--ch-primary), var(--ch-primary)) right bottom / 2px 5rem no-repeat;
  content: "";
  opacity: 0.72;
  pointer-events: none;
}

.hero-media {
  position: absolute;
  z-index: 0;
  inset: 0;
}

.hero-media img {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  object-position: 56% center;
}

.hero-copy {
  position: relative;
  z-index: 2;
  inline-size: min(100% - 3rem, var(--page-width));
  margin-inline: auto;
  padding-block: clamp(5rem, 12vw, 10rem) clamp(8rem, 14vw, 12rem);
}

.hero-copy h1 {
  max-inline-size: 11ch;
  margin-block-start: var(--space-3);
}

.lede {
  max-inline-size: 58ch;
  margin-block-start: var(--space-4);
  color: var(--ch-text-secondary);
  font-size: clamp(1.08rem, 0.98rem + 0.45vw, 1.34rem);
  line-height: 1.6;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
}

.button {
  --button-color: var(--ch-primary);
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  min-block-size: 48px;
  padding: 0.7rem 1.15rem;
  border: 0;
  background: rgb(0 240 255 / 8%);
  color: var(--button-color);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 140ms ease-out, color 140ms ease-out, transform 140ms ease-out;
}

.button::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--button-color), var(--button-color)) left top / 0.7rem 1px no-repeat,
    linear-gradient(var(--button-color), var(--button-color)) left top / 1px 100% no-repeat,
    linear-gradient(var(--button-color), var(--button-color)) left bottom / 0.7rem 1px no-repeat,
    linear-gradient(var(--button-color), var(--button-color)) right top / 0.7rem 1px no-repeat,
    linear-gradient(var(--button-color), var(--button-color)) right top / 1px 100% no-repeat,
    linear-gradient(var(--button-color), var(--button-color)) right bottom / 0.7rem 1px no-repeat;
  content: "";
  pointer-events: none;
}

.button:hover,
.button:focus-visible {
  --button-color: var(--ch-accent);
  background: var(--ch-accent);
  color: var(--ch-bg);
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0);
}

.button.secondary {
  --button-color: var(--ch-accent);
  background: rgb(248 230 2 / 5%);
}

.button.secondary:hover,
.button.secondary:focus-visible {
  background: rgb(248 230 2 / 16%);
  color: var(--ch-text);
}

.availability-note {
  max-inline-size: 58ch;
  margin-block-start: var(--space-4);
  padding-inline-start: var(--space-3);
  border-inline-start: 1px solid var(--ch-danger);
  color: var(--ch-text-muted);
  font-size: 0.9rem;
}

.hero-disclosure {
  position: absolute;
  z-index: 4;
  inset-inline: max(1.5rem, calc((100vw - var(--page-width)) / 2));
  inset-block-end: var(--space-4);
  max-inline-size: 70ch;
  color: var(--ch-text-secondary);
  font-size: 0.78rem;
}

.hero-disclosure strong {
  color: var(--ch-accent);
  text-transform: uppercase;
}

.section {
  position: relative;
  padding-block: clamp(5rem, 10vw, 9rem);
  border-block-start: var(--rule);
}

.tour-section {
  scroll-margin-block-start: 1rem;
}

.section-intro {
  display: grid;
  gap: var(--space-4) var(--space-7);
  align-items: end;
  margin-block-end: clamp(2.5rem, 6vw, 5rem);
}

.section-intro h2 {
  margin-block-start: var(--space-3);
}

.section-intro > p {
  max-inline-size: var(--prose-width);
  color: var(--ch-text-secondary);
  font-size: clamp(1.05rem, 0.98rem + 0.25vw, 1.2rem);
}

.section-heading {
  display: grid;
  gap: var(--space-3);
  max-inline-size: var(--prose-width);
  margin-block-end: var(--space-6);
}

.section-heading p {
  color: var(--ch-text-secondary);
  font-size: 1.08rem;
}

.proof-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 var(--space-5);
  padding: 0;
  background: var(--ch-line);
  list-style: none;
}

.proof-strip li,
.proof-strip li + li {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--ch-bg);
}

.proof-strip strong {
  color: var(--ch-primary);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
  line-height: 1;
}

.proof-strip span {
  color: var(--ch-text-muted);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.capture-panel {
  padding: clamp(0.5rem, 1.5vw, 1rem);
  background: rgb(43 18 76 / 24%);
}

.capture-tabs {
  display: none;
  flex-wrap: nowrap;
  margin: 0 0 var(--space-3);
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}

html[data-react-ready="true"] .capture-tabs {
  display: flex;
}

.capture-tabs li,
.capture-tabs li + li {
  display: flex;
  flex: 1 0 auto;
  margin: 0;
}

.capture-tabs button,
.controller-tabs button {
  --tab-color: var(--ch-primary);
  display: grid;
  place-items: center;
  flex: 1 0 auto;
  min-block-size: 44px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--tab-color);
  background: rgb(0 240 255 / 4%);
  color: var(--tab-color);
  font: inherit;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  appearance: none;
  cursor: pointer;
}

.capture-tabs button[aria-selected="true"],
.controller-tabs button[aria-selected="true"] {
  --tab-color: var(--ch-accent);
  background: var(--ch-accent);
  color: var(--ch-bg);
}

.capture-state + .capture-state {
  margin-block-start: var(--space-3);
}

html[data-react-ready="true"] .capture-state + .capture-state {
  margin-block-start: 0;
}

.capture-state[hidden] {
  display: none;
}

.capture-state:not([hidden]) .layered-capture {
  animation: capture-acquire 220ms ease-out;
}

@keyframes capture-acquire {
  from {
    opacity: 0.68;
  }
}

.capture-stage {
  margin: 0;
  overflow: hidden;
  background: #000;
  perspective: 1200px;
}

.layered-capture {
  --capture-scale: 1;
  --capture-tilt-x: 0deg;
  --capture-tilt-y: 0deg;
  position: relative;
  aspect-ratio: 16 / 9;
  min-block-size: 0;
  overflow: hidden;
  background: #000;
}

.layered-capture::before,
.capture-frame::before,
.feature-card::before,
.applet-stage::before,
.contact-card::before {
  position: absolute;
  z-index: 6;
  inset: 0.45rem;
  background:
    linear-gradient(var(--frame-color, var(--ch-line-strong)), var(--frame-color, var(--ch-line-strong))) left top / 3rem 2px no-repeat,
    linear-gradient(var(--frame-color, var(--ch-line-strong)), var(--frame-color, var(--ch-line-strong))) left top / 2px 3rem no-repeat,
    linear-gradient(var(--frame-color, var(--ch-line-strong)), var(--frame-color, var(--ch-line-strong))) right top / 3rem 2px no-repeat,
    linear-gradient(var(--frame-color, var(--ch-line-strong)), var(--frame-color, var(--ch-line-strong))) right top / 2px 3rem no-repeat,
    linear-gradient(var(--frame-color, var(--ch-line-strong)), var(--frame-color, var(--ch-line-strong))) left bottom / 3rem 2px no-repeat,
    linear-gradient(var(--frame-color, var(--ch-line-strong)), var(--frame-color, var(--ch-line-strong))) left bottom / 2px 3rem no-repeat,
    linear-gradient(var(--frame-color, var(--ch-line-strong)), var(--frame-color, var(--ch-line-strong))) right bottom / 3rem 2px no-repeat,
    linear-gradient(var(--frame-color, var(--ch-line-strong)), var(--frame-color, var(--ch-line-strong))) right bottom / 2px 3rem no-repeat;
  content: "";
  pointer-events: none;
}

.layered-capture::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 38%,
    rgb(0 0 0 / 18%) 68%,
    rgb(0 0 0 / 62%) 100%
  );
  content: "";
  pointer-events: none;
}

.capture-backdrop,
.capture-layer,
.capture-webgl {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: contain;
  pointer-events: none;
}

.capture-backdrop {
  z-index: 0;
  filter: brightness(0.42) saturate(0.82);
}

.capture-layer {
  z-index: 2;
}

.capture-layer,
.capture-webgl {
  transform: rotateX(var(--capture-tilt-x)) rotateY(var(--capture-tilt-y)) scale(var(--capture-scale));
  transform-origin: center;
  transform-style: preserve-3d;
  will-change: transform;
}

.capture-layer-status {
  z-index: 3;
}

.capture-layer-active,
.capture-webgl {
  z-index: 4;
}

.layered-capture.is-webgl-ready .capture-layer {
  visibility: hidden;
}

.evidence-note,
.permission-note {
  max-inline-size: var(--prose-width);
  margin-block-start: var(--space-3);
  color: var(--ch-text-muted);
  font-size: 0.84rem;
}

.controller-tour {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

.controller-tabs {
  display: flex;
  margin-block-end: var(--space-5);
}

.controller-capabilities {
  display: grid;
  gap: 1px;
  background: var(--ch-line);
}

.controller-capabilities article {
  padding: var(--space-4);
  background: var(--ch-bg);
}

.controller-capabilities h3 {
  margin-block-start: var(--space-2);
}

.controller-capabilities article > p:last-child {
  margin-block-start: var(--space-2);
  color: var(--ch-text-secondary);
}

.controller-phone-stage {
  display: grid;
  place-items: start center;
}

.controller-panel {
  inline-size: min(100%, 23rem);
  transition: opacity 360ms ease, transform 520ms cubic-bezier(0.25, 0, 0.15, 1), visibility 0s linear 520ms;
}

.controller-panel figcaption {
  margin-block-start: var(--space-3);
  color: var(--ch-text-muted);
  font-size: 0.82rem;
}

.controller-panel figcaption strong {
  color: var(--ch-text);
}

[data-controller-deck][data-controller-enhanced="true"] .controller-panel {
  grid-area: 1 / 1;
}

[data-controller-deck][data-controller-enhanced="true"] .controller-panel:not(.is-controller-active) {
  visibility: hidden;
  opacity: 0;
  transform: translateX(1.5rem);
}

.capture-frame {
  --frame-color: var(--ch-primary);
  position: relative;
  overflow: hidden;
  background: #000;
}

.controller-capture {
  --frame-color: var(--ch-accent);
  aspect-ratio: 1290 / 2796;
}

.controller-capture img {
  inline-size: 100%;
}

.applet-experience {
  display: grid;
  gap: var(--space-4);
}

.applet-stage-shell {
  display: grid;
  gap: var(--space-3);
}

.applet-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  background: var(--ch-line);
  list-style: none;
}

.applet-selector li,
.applet-selector li + li {
  margin: 0;
}

.applet-selector button {
  position: relative;
  inline-size: 100%;
  min-block-size: 44px;
  padding: 0.6rem 2.6rem 0.6rem 0.75rem;
  border: 0;
  background: var(--ch-bg);
  color: var(--ch-text-muted);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 750;
  text-align: start;
  cursor: pointer;
}

.applet-selector button::after,
.applet-glyph {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  background: currentColor;
  content: "";
  -webkit-mask: var(--applet-icon) center / contain no-repeat;
  mask: var(--applet-icon) center / contain no-repeat;
}

.applet-selector button::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0.8rem;
  opacity: 0.7;
  transform: translateY(-50%);
}

.applet-selector button:hover::after,
.applet-selector button[aria-pressed="true"]::after {
  color: var(--ch-accent);
  opacity: 1;
}

[data-applet-select="clock"],
[data-applet-card="clock"] { --applet-icon: url("/assets/icons/clock.svg"); }
[data-applet-select="map"],
[data-applet-card="map"] { --applet-icon: url("/assets/icons/map.svg"); }
[data-applet-select="music"],
[data-applet-card="music"] { --applet-icon: url("/assets/icons/music.svg"); }
[data-applet-select="agenda"],
[data-applet-card="agenda"] { --applet-icon: url("/assets/icons/agenda.svg"); }
[data-applet-select="rss"],
[data-applet-card="rss"] { --applet-icon: url("/assets/icons/rss.svg"); }
[data-applet-select="camera"],
[data-applet-card="camera"] { --applet-icon: url("/assets/icons/camera.svg"); }
[data-applet-select="architect"],
[data-applet-card="architect"] { --applet-icon: url("/assets/icons/architect.svg"); }
[data-applet-select="weather"],
[data-applet-card="weather"] { --applet-icon: url("/assets/icons/weather.svg"); }
[data-applet-select="checklist"],
[data-applet-card="checklist"] { --applet-icon: url("/assets/icons/checklist.svg"); }
[data-applet-select="lost-signal"],
[data-applet-card="lost-signal"] { --applet-icon: url("/assets/icons/lost-signal.svg"); }
[data-applet-select="brick"],
[data-applet-card="brick"] { --applet-icon: url("/assets/icons/brick.svg"); }
[data-applet-select="wireframe"],
[data-applet-card="wireframe"] { --applet-icon: url("/assets/icons/wireframe.svg"); }
[data-applet-select="galaxy"],
[data-applet-card="galaxy"] { --applet-icon: url("/assets/icons/galaxy.svg"); }
[data-applet-select="profile"],
[data-applet-card="profile"] { --applet-icon: url("/assets/icons/profile.svg"); }
[data-applet-select="vector-roll"],
[data-applet-card="vector-roll"] { --applet-icon: url("/assets/icons/vector-roll.svg"); }
[data-applet-select="basketball"],
[data-applet-card="basketball"] { --applet-icon: url("/assets/icons/basketball.svg"); }

.applet-selector button::before {
  position: absolute;
  inset-block: 0.55rem;
  inset-inline-start: 0;
  inline-size: 2px;
  background: var(--ch-accent);
  content: "";
  opacity: 0;
}

.applet-selector button:hover,
.applet-selector button[aria-pressed="true"] {
  background: rgb(0 240 255 / 6%);
  color: var(--ch-text);
}

.applet-selector button[aria-pressed="true"]::before {
  opacity: 1;
}

.applet-stage {
  --frame-color: var(--ch-primary);
  display: grid;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: color-mix(in srgb, var(--ch-surface) 24%, var(--ch-bg));
  box-shadow: inset 0 0 0 1px var(--ch-line);
  perspective: 700px;
}

.applet-card {
  display: grid;
  position: relative;
  z-index: 1;
  align-items: stretch;
  min-inline-size: 0;
  background: transparent;
}

.applet-card + .applet-card {
  border-block-start: var(--rule);
}

.applet-sample {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--space-2);
  min-inline-size: 0;
  margin: 0;
}

.applet-sample-viewport {
  display: grid;
  place-items: center;
  min-block-size: clamp(14rem, 48vw, 20rem);
  padding: clamp(1rem, 4vw, 2.5rem);
  overflow: hidden;
}

.applet-sample img {
  inline-size: var(--applet-relative-width, 100%);
  block-size: auto;
  max-inline-size: none;
  max-block-size: 100%;
}

[data-applet-card="map"],
[data-applet-card="profile"] {
  --applet-relative-width: 59.057%;
}

[data-applet-card="lost-signal"],
[data-applet-card="vector-roll"] {
  --applet-relative-width: 76.427%;
}

.applet-sample > figcaption {
  color: var(--ch-text-muted);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-align: end;
  text-transform: uppercase;
}

.applet-sample-pending {
  align-content: center;
  gap: var(--space-2);
  color: var(--ch-text-secondary);
  text-align: center;
}

.applet-sample-pending .applet-glyph {
  inline-size: 4rem;
  block-size: 4rem;
  margin-block-end: var(--space-2);
  color: var(--ch-primary);
  opacity: 0.76;
}

.applet-sample-pending strong {
  color: var(--ch-text);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.applet-sample-pending span:last-child {
  color: var(--ch-text-muted);
  font-size: 0.78rem;
}

.applet-copy {
  min-inline-size: 0;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: transparent;
}

.applet-copy h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.applet-copy h3 .applet-glyph {
  flex: none;
  color: var(--ch-primary);
}

.applet-card h3,
.feature-card h3 {
  margin-block-start: var(--space-3);
}

.applet-copy > p:not(.applet-type),
.feature-card > p:not(.card-index) {
  margin-block-start: var(--space-3);
  color: var(--ch-text-secondary);
}

.applet-preview-link {
  padding-block-start: var(--space-2);
  border-block-start: var(--rule);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

[data-applet-deck][data-applet-enhanced="true"] .applet-card {
  grid-area: 1 / 1;
  align-self: stretch;
  border-block-start: 0;
  visibility: hidden;
}

[data-applet-deck][data-applet-enhanced="true"] .applet-card.is-applet-active,
[data-applet-deck][data-applet-enhanced="true"] .applet-card.is-applet-entering,
[data-applet-deck][data-applet-enhanced="true"] .applet-card.is-applet-exiting {
  visibility: visible;
}

[data-applet-deck][data-applet-enhanced="true"] .applet-sample,
[data-applet-deck][data-applet-enhanced="true"] .applet-copy > * {
  opacity: 0;
  transform: translateY(0.45rem);
  transition: opacity 180ms ease-out, transform 280ms cubic-bezier(0.25, 0, 0.15, 1);
}

[data-applet-deck][data-applet-enhanced="true"] .applet-sample {
  transform: translateX(0.9rem) scale(0.985);
  transform-origin: center;
}

[data-applet-deck][data-applet-enhanced="true"] .applet-card.is-applet-active .applet-sample,
[data-applet-deck][data-applet-enhanced="true"] .applet-card.is-applet-active .applet-copy > * {
  opacity: 1;
  transform: none;
}

[data-applet-deck][data-applet-enhanced="true"] .applet-card.is-applet-exiting .applet-sample {
  opacity: 0;
  transform: translateX(-0.75rem) scale(0.985);
  transition-duration: 240ms;
  transition-timing-function: ease-in;
}

[data-applet-deck][data-applet-enhanced="true"] .applet-card.is-applet-exiting .applet-copy > * {
  opacity: 0;
  transform: translateY(-0.3rem);
  transition-duration: 150ms;
  transition-timing-function: ease-in;
}

.applet-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.applet-position {
  color: var(--ch-text-muted);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.applet-toggle {
  margin-inline-start: auto;
}

.custom-layout {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

.custom-flow {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.custom-flow li,
.custom-flow li + li {
  display: grid;
  position: relative;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding-block: var(--space-4);
  border-block-start: var(--rule);
}

.custom-flow li:last-child {
  border-block-end: var(--rule);
}

.custom-flow li > span {
  color: var(--ch-accent);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-weight: 800;
}

.custom-flow p {
  margin-block-start: var(--space-2);
  color: var(--ch-text-secondary);
}

.custom-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.custom-showcase {
  display: grid;
  gap: var(--space-4);
}

.custom-idea-terminal {
  display: grid;
  position: relative;
  grid-template-columns: minmax(0, 1fr) auto;
  min-block-size: 12rem;
  align-content: start;
  padding: var(--space-3);
  border: var(--rule);
  background: #000;
}

.custom-idea-header {
  display: flex;
  grid-column: 1 / -1;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block-end: var(--space-2);
  border-block-end: var(--rule);
  color: var(--ch-text-muted);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.custom-idea-header span:first-child {
  color: var(--ch-primary);
}

.custom-idea-text {
  grid-column: 1 / -1;
  margin-block-start: var(--space-4);
  color: var(--ch-text);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: clamp(0.94rem, 0.86rem + 0.3vw, 1.08rem);
  line-height: 1.55;
}

.custom-idea-caret {
  display: inline-block;
  inline-size: 0.52rem;
  block-size: 1em;
  margin-inline-start: 0.18rem;
  vertical-align: -0.12em;
  background: var(--ch-accent);
  animation: custom-caret 850ms steps(1, end) infinite;
  animation-play-state: paused;
}

.custom-idea-terminal[data-idea-active="true"] .custom-idea-caret {
  animation-play-state: running;
}

.custom-idea-terminal[data-idea-static="true"] .custom-idea-caret {
  animation: none;
}

@keyframes custom-caret {
  50% { opacity: 0; }
}

.custom-slots div {
  display: grid;
  position: relative;
  min-block-size: 8.5rem;
  align-content: space-between;
  padding: var(--space-3);
  border: var(--rule);
  background: rgb(43 18 76 / 24%);
}

.custom-slots strong {
  color: var(--ch-primary);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1.5rem;
}

.custom-slots span {
  color: var(--ch-text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.callout {
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-block: var(--space-5);
  border-inline-start: 3px solid var(--ch-accent);
  background: rgb(43 18 76 / 42%);
}

.callout strong {
  color: var(--ch-accent);
}

.callout.danger {
  border-inline-start-color: var(--ch-danger);
}

.callout.danger strong {
  color: var(--ch-danger);
}

.theme-gallery {
  --theme-primary: #00f0ff;
  --theme-accent: #f8e602;
  --theme-success: #4bff21;
  --theme-warning: #f4d5fd;
  --theme-danger: #f96363;
  --theme-surface: #2b124c;
}

.theme-gallery-shell {
  display: grid;
  gap: var(--space-4);
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--theme-primary) 55%, transparent);
  background: color-mix(in srgb, var(--theme-surface) 34%, var(--ch-bg));
  transition: border-color 320ms ease, background-color 320ms ease;
}

.theme-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  background: color-mix(in srgb, var(--theme-primary) 45%, transparent);
}

.theme-selector button {
  position: relative;
  min-block-size: 48px;
  padding: 0.7rem 0.85rem 0.7rem 2rem;
  border: 0;
  background: var(--ch-bg);
  color: var(--ch-text-secondary);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-align: start;
  text-transform: uppercase;
  cursor: pointer;
}

.theme-selector button::before,
.theme-selector button::after {
  position: absolute;
  inset-block: 0.75rem;
  inline-size: 0.35rem;
  content: "";
}

.theme-selector button::before {
  inset-inline-start: 0.75rem;
  background: var(--selector-primary);
}

.theme-selector button::after {
  inset-inline-start: 1.15rem;
  background: var(--selector-accent);
}

.theme-selector button:hover,
.theme-selector button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--selector-primary) 12%, var(--ch-bg));
  color: var(--ch-text);
}

.theme-palette {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
}

.theme-palette span {
  display: grid;
  place-items: center;
  min-block-size: 2.5rem;
  padding: 0.35rem;
  color: #050008;
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.theme-role-primary { background: var(--theme-primary); }
.theme-role-accent { background: var(--theme-accent); }
.theme-role-success { background: var(--theme-success); }
.theme-role-warning { background: var(--theme-warning); }
.theme-role-danger { background: var(--theme-danger); }

.theme-shot-stage {
  display: grid;
  min-inline-size: 0;
}

.theme-shot {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  transition: opacity 360ms ease, transform 560ms cubic-bezier(0.25, 0, 0.15, 1), visibility 0s linear 560ms;
}

[data-theme-gallery][data-theme-enhanced="true"] .theme-shot {
  grid-area: 1 / 1;
}

[data-theme-gallery][data-theme-enhanced="true"] .theme-shot:not(.is-theme-active) {
  visibility: hidden;
  opacity: 0;
  transform: translateY(0.75rem);
}

.theme-phone-window {
  position: relative;
  inline-size: min(100%, 29rem);
  block-size: clamp(32rem, 68vh, 44rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--theme-primary) 65%, transparent);
  background: #000;
}

.theme-phone-window::before {
  position: absolute;
  z-index: 2;
  inset: 0.5rem;
  background:
    linear-gradient(var(--theme-accent), var(--theme-accent)) left top / 2.5rem 2px no-repeat,
    linear-gradient(var(--theme-accent), var(--theme-accent)) left top / 2px 2.5rem no-repeat,
    linear-gradient(var(--theme-accent), var(--theme-accent)) right top / 2.5rem 2px no-repeat,
    linear-gradient(var(--theme-accent), var(--theme-accent)) right top / 2px 2.5rem no-repeat,
    linear-gradient(var(--theme-accent), var(--theme-accent)) left bottom / 2.5rem 2px no-repeat,
    linear-gradient(var(--theme-accent), var(--theme-accent)) left bottom / 2px 2.5rem no-repeat,
    linear-gradient(var(--theme-accent), var(--theme-accent)) right bottom / 2.5rem 2px no-repeat,
    linear-gradient(var(--theme-accent), var(--theme-accent)) right bottom / 2px 2.5rem no-repeat;
  content: "";
  pointer-events: none;
}

.theme-phone-window::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(to bottom, transparent 72%, #000 100%);
  content: "";
  pointer-events: none;
}

.theme-phone-window img {
  inline-size: 100%;
  max-inline-size: none;
}

.theme-shot figcaption {
  display: grid;
  gap: var(--space-1);
  inline-size: min(100%, 29rem);
}

.theme-shot figcaption strong {
  color: var(--theme-accent);
  font-size: 1.2rem;
}

.theme-shot figcaption span {
  color: var(--ch-text-secondary);
  font-size: 0.9rem;
}

.feature-grid,
.contact-grid,
.stat-grid {
  display: grid;
  gap: var(--space-3);
}

.feature-card,
.contact-card,
.stat-card {
  --frame-color: var(--ch-primary);
  position: relative;
  min-inline-size: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: rgb(43 18 76 / 36%);
}

.feature-card::before {
  z-index: 1;
}

.contact-card p,
.stat-card p {
  margin-block-start: var(--space-3);
  color: var(--ch-text-secondary);
}

.split {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

.prose {
  max-inline-size: var(--prose-width);
  color: var(--ch-text-secondary);
  overflow-wrap: anywhere;
}

.prose h2,
.prose h3 {
  color: var(--ch-text);
}

.prose h2:not(:first-child) {
  margin-block-start: var(--space-7);
}

.prose h3 {
  margin-block-start: var(--space-5);
}

.prose h2 + p,
.prose h3 + p,
.prose h2 + ul,
.prose h3 + ul,
.prose p + ul,
.prose p + ol,
.prose p + dl,
.prose ul + p,
.prose ol + p,
.prose .callout + p {
  margin-block-start: var(--space-3);
}

.prose dt {
  margin-block-start: var(--space-4);
  color: var(--ch-text);
  font-weight: 750;
}

.prose dd {
  margin-inline-start: 0;
  margin-block-start: var(--space-1);
}

.page-hero {
  max-inline-size: 62rem;
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem);
}

.page-hero h1 {
  margin-block-start: var(--space-3);
}

.page-body {
  padding-block-end: var(--space-7);
}

.metadata {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-block-start: var(--space-4);
  color: var(--ch-text-muted);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.steps {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  min-block-size: 3.5rem;
  margin: 0;
  padding: 0.85rem 1rem 0.85rem 4rem;
  border: var(--rule);
  color: var(--ch-text-secondary);
  counter-increment: step;
}

.steps li::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  inline-size: 3rem;
  border-inline-end: var(--rule);
  color: var(--ch-accent);
  content: counter(step, decimal-leading-zero);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-weight: 800;
}

.site-footer {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-block-start: var(--rule);
  color: var(--ch-text-muted);
  font-size: 0.82rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

html[data-reveal-enhanced="true"] [data-reveal] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 620ms ease, transform 820ms cubic-bezier(0.25, 0, 0.15, 1);
}

html[data-reveal-enhanced="true"] [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 42rem) {
  .site-shell {
    inline-size: min(100% - 3rem, var(--page-width));
  }

  .section-intro {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
  }

  .feature-grid,
  .contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .applet-selector,
  .theme-selector {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

@media (min-width: 64rem) {
  .controller-tour {
    grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 0.7fr);
  }

  .controller-phone-stage {
    position: sticky;
    inset-block-start: var(--space-4);
  }

  .applet-experience {
    grid-template-columns: minmax(13rem, 0.42fr) minmax(0, 1fr);
    grid-template-areas: "selector stage";
    align-items: start;
  }

  .applet-selector {
    grid-area: selector;
    grid-template-columns: 1fr;
  }

  .applet-stage-shell {
    grid-area: stage;
  }

  .applet-card {
    grid-template-columns: minmax(16rem, 0.92fr) minmax(15rem, 1fr);
    min-block-size: 31rem;
  }

  .applet-sample-viewport {
    min-block-size: 22rem;
  }

  .custom-layout {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.8fr);
  }

  .theme-gallery-shell {
    grid-template-columns: minmax(15rem, 0.55fr) minmax(24rem, 1fr);
    grid-template-areas:
      "selector shot"
      "palette shot";
    align-items: start;
  }

  .theme-selector {
    grid-area: selector;
    grid-template-columns: 1fr;
  }

  .theme-palette {
    grid-area: palette;
  }

  .theme-shot-stage {
    grid-area: shot;
    position: sticky;
    inset-block-start: var(--space-4);
  }

  .feature-grid,
  .compatibility-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .split {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}

@media (max-width: 55.99rem) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
    padding-block: var(--space-3);
  }

  .site-nav,
  .site-nav ul {
    inline-size: 100%;
  }

  .site-nav ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.25rem, 1fr));
  }

  .site-nav a {
    inline-size: 100%;
  }

  .hero-cinematic {
    min-block-size: 48rem;
  }

  .hero-cinematic::before {
    background:
      linear-gradient(90deg, rgb(0 0 0 / 82%), rgb(0 0 0 / 28%)),
      linear-gradient(0deg, rgb(0 0 0 / 96%) 0%, rgb(0 0 0 / 55%) 58%, transparent 100%);
  }

  .hero-media img {
    object-position: 62% center;
  }

  .hero-copy {
    align-self: end;
    padding-block-end: 11rem;
  }
}

@media (max-width: 41.99rem) {
  .draft-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-copy {
    inline-size: min(100% - 2rem, var(--page-width));
  }

  .hero-actions,
  .hero-actions .button,
  .page-hero .button-row,
  .page-hero .button {
    inline-size: 100%;
  }

  .hero-disclosure {
    inset-inline: 1rem;
  }

  .proof-strip {
    grid-template-columns: 1fr;
  }

  .capture-tabs button {
    min-inline-size: 6.5rem;
  }

  .controller-tabs {
    overflow-x: auto;
  }

  .applet-controls {
    align-items: stretch;
  }

  .applet-position {
    inline-size: 100%;
    padding-inline: 0.2rem;
  }

  .applet-toggle {
    flex: 1 1 10rem;
  }

  .custom-slots {
    grid-template-columns: 1fr;
  }

  .theme-palette span {
    writing-mode: vertical-rl;
    min-block-size: 4.5rem;
  }

  .theme-phone-window {
    block-size: 34rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .controller-phone-stage,
  .theme-shot-stage {
    position: static;
  }
}

@media (prefers-contrast: more) {
  :root {
    --ch-text-secondary: #d5f9fd;
    --ch-text-muted: #bfeef3;
    --ch-line: rgb(0 240 255 / 78%);
    --ch-line-strong: #00f0ff;
  }

  body::before {
    display: none;
  }

  .hero-cinematic::before {
    background: rgb(0 0 0 / 78%);
  }
}

@media (forced-colors: active) {
  :root {
    --ch-bg: Canvas;
    --ch-bg-raised: Canvas;
    --ch-surface: Canvas;
    --ch-primary: LinkText;
    --ch-accent: Highlight;
    --ch-danger: Mark;
    --ch-text: CanvasText;
    --ch-text-secondary: CanvasText;
    --ch-text-muted: GrayText;
    --ch-line: CanvasText;
    --ch-line-strong: CanvasText;
  }

  body,
  .feature-card,
  .applet-stage,
  .callout,
  .theme-gallery-shell {
    background: Canvas;
  }

  body::before,
  .hero-media,
  .theme-palette {
    display: none;
  }

  .applet-selector button::after,
  .applet-glyph {
    background: currentColor;
  }
}

@media print {
  body {
    background: #fff;
    color: #000;
  }

  .site-nav,
  .button-row,
  .skip-link,
  .capture-tabs,
  .controller-tabs,
  .applet-controls,
  .applet-selector,
  .theme-selector {
    display: none;
  }

  a {
    color: #000;
  }

  .site-shell {
    inline-size: 100%;
  }
}