:root {
  --application-navy: oklch(0.19 0.055 251);
  --application-ink: oklch(0.22 0.045 248);
  --application-cobalt: oklch(0.48 0.15 250);
  --application-blue: oklch(0.6 0.13 237);
  --application-ice: oklch(0.955 0.024 218);
  --application-mist: oklch(0.925 0.032 218);
  --application-white: oklch(0.985 0.008 218);
  --application-celadon: oklch(0.79 0.075 205);
  --application-line: oklch(0.67 0.045 224 / 0.52);
  --application-muted: oklch(0.47 0.04 238);
  --application-display: "Chakra Petch", "Aptos Display", "Segoe UI Variable", sans-serif;
  --application-body: "Manrope", "Segoe UI Variable", "Microsoft YaHei UI", sans-serif;
  --application-tech: "JetBrains Mono", "Cascadia Mono", monospace;
}

html { scroll-behavior: smooth; }

.application-page-body {
  margin: 0;
  color: var(--application-ink);
  background: var(--application-ice);
  font-family: var(--application-body);
  font-kerning: normal;
}

.application-page-body *,
.application-page-body *::before,
.application-page-body *::after { box-sizing: border-box; }

.application-page img,
.application-footer img { display: block; max-width: 100%; }
.application-page a,
.application-footer a { color: inherit; text-decoration: none; }

.application-shell {
  width: min(100% - 3rem, 82rem);
  margin-inline: auto;
}

.application-hero {
  min-height: min(58rem, 100svh);
  display: grid;
  align-items: center;
  padding: clamp(9rem, 13vw, 12rem) 0 clamp(5rem, 8vw, 8rem);
  color: var(--application-white);
  background: var(--application-navy);
}

.application-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(32rem, 1.05fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}

.application-breadcrumb {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin: 0 0 2.2rem;
  color: oklch(0.82 0.03 218);
  font-family: var(--application-tech);
  font-size: 0.75rem;
}

.application-breadcrumb a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.application-breadcrumb a:hover { color: var(--application-celadon); }

.application-hero-label {
  max-width: 38rem;
  margin: 0 0 1.2rem;
  color: var(--application-celadon);
  font-family: var(--application-tech);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.application-hero h1 {
  max-width: 9.5ch;
  margin: 0;
  font-family: var(--application-display);
  font-size: clamp(3.8rem, 6.8vw, 6rem);
  font-weight: 600;
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.application-hero h1 em { color: var(--application-celadon); font-style: normal; }

.application-hero-lede {
  max-width: 42rem;
  margin: 2rem 0 0;
  color: oklch(0.87 0.025 218);
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.76;
  letter-spacing: 0.01em;
  text-wrap: pretty;
}

.application-hero-actions,
.application-chapter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.2rem;
}

.application-action,
.application-chapter-actions a {
  min-height: 3.25rem;
  display: inline-flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1rem;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-family: var(--application-tech);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.application-action-primary { color: var(--application-navy); background: var(--application-celadon); border-color: var(--application-celadon); }
.application-action-quiet { color: var(--application-white); background: transparent; border-color: oklch(0.9 0.02 218 / 0.55); }
.application-action-light { color: var(--application-navy); background: var(--application-white); border-color: var(--application-white); }

.application-action:hover,
.application-chapter-actions a:hover { transform: translateY(-2px); }
.application-action-primary:hover { background: var(--application-white); border-color: var(--application-white); }
.application-action-quiet:hover { color: var(--application-navy); background: var(--application-white); border-color: var(--application-white); }

.application-hero-mosaic {
  position: relative;
  min-height: 38rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  gap: 1px;
  padding: 1px;
  background: oklch(0.72 0.04 220 / 0.48);
}

.application-hero-image { margin: 0; overflow: hidden; background: oklch(0.15 0.04 250); }
.application-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.application-hero-image-main { grid-column: 1 / 9; grid-row: 1 / 13; }
.application-hero-image-top { grid-column: 9 / 13; grid-row: 1 / 7; }
.application-hero-image-bottom { grid-column: 9 / 13; grid-row: 7 / 13; }

.application-hero-caption {
  position: absolute;
  inset-inline-end: 1.25rem;
  bottom: 1.25rem;
  max-width: 18rem;
  padding: 1rem 1.1rem;
  border: 1px solid oklch(0.9 0.02 218 / 0.5);
  color: var(--application-white);
  background: oklch(0.16 0.05 251 / 0.88);
  backdrop-filter: blur(10px);
}

.application-hero-caption span,
.application-hero-caption strong { display: block; }
.application-hero-caption span { margin-bottom: 0.45rem; color: var(--application-celadon); font-family: var(--application-tech); font-size: 0.65rem; letter-spacing: 0.06em; }
.application-hero-caption strong { font-size: 0.92rem; line-height: 1.45; }

.application-market-nav {
  position: sticky;
  z-index: 20;
  top: 6.4rem;
  border-bottom: 1px solid var(--application-line);
  background: oklch(0.975 0.014 218 / 0.94);
  backdrop-filter: blur(16px);
}

.application-market-nav-track {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.application-market-nav a {
  position: relative;
  min-height: 4.9rem;
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding: 0.75rem 0.9rem;
  border-inline-end: 1px solid var(--application-line);
  color: var(--application-muted);
  font-family: var(--application-display);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  transition: color 220ms ease, background-color 220ms ease;
}

.application-market-nav a:first-child { border-inline-start: 1px solid var(--application-line); }
.application-market-nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--application-cobalt); transform: scaleX(0); transform-origin: left; transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1); }
[dir="rtl"] .application-market-nav a::after { transform-origin: right; }
.application-market-nav a span { color: var(--application-cobalt); font-family: var(--application-tech); font-size: 0.65rem; }
.application-market-nav a:hover,
.application-market-nav a[aria-current="true"] { color: var(--application-cobalt); background: oklch(0.94 0.028 218); }
.application-market-nav a[aria-current="true"]::after { transform: scaleX(1); }

.application-chapter {
  scroll-margin-top: 11rem;
  padding: clamp(6rem, 10vw, 9rem) 0;
  border-bottom: 1px solid var(--application-line);
  background: var(--application-ice);
}

.application-chapter-alt { background: var(--application-white); }
.application-chapter-dark { color: var(--application-white); background: var(--application-navy); }
.application-chapter-electric { color: var(--application-white); background: oklch(0.32 0.115 248); }

.application-chapter-grid {
  display: grid;
  grid-template-columns: minmax(24rem, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}

.application-chapter-grid-reverse .application-chapter-media { order: 2; }
.application-chapter-grid-reverse .application-chapter-copy { order: 1; }

.application-chapter-media {
  position: sticky;
  top: 12.5rem;
  margin: 0;
  border: 1px solid var(--application-line);
  background: var(--application-white);
}

.application-chapter-media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.application-chapter-media figcaption { display: grid; gap: 0.55rem; padding: 1.15rem 1.25rem 1.3rem; color: var(--application-ink); background: var(--application-white); }
.application-chapter-media figcaption span { color: var(--application-cobalt); font-family: var(--application-tech); font-size: 0.67rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.application-chapter-media figcaption strong { font-size: 0.98rem; line-height: 1.45; }

.application-chapter-dark .application-chapter-media,
.application-chapter-electric .application-chapter-media { border-color: oklch(0.78 0.04 218 / 0.45); background: oklch(0.21 0.055 250); }
.application-chapter-dark .application-chapter-media figcaption,
.application-chapter-electric .application-chapter-media figcaption { color: var(--application-white); background: oklch(0.21 0.055 250); }
.application-chapter-dark .application-chapter-media figcaption span,
.application-chapter-electric .application-chapter-media figcaption span { color: var(--application-celadon); }

.application-chapter-copy { padding-top: clamp(0rem, 2vw, 1.5rem); }
.application-chapter-copy header { max-width: 48rem; }

.application-chapter-code {
  display: block;
  margin-bottom: 1.25rem;
  color: var(--application-cobalt);
  font-family: var(--application-tech);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.application-chapter-dark .application-chapter-code,
.application-chapter-electric .application-chapter-code { color: var(--application-celadon); }

.application-chapter h2 {
  max-width: 13ch;
  margin: 0;
  color: var(--application-ink);
  font-family: var(--application-display);
  font-size: clamp(2.8rem, 5vw, 4.7rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.application-chapter-dark h2,
.application-chapter-electric h2 { color: var(--application-white); }

.application-chapter-lede {
  max-width: 67ch;
  margin: 2rem 0 0;
  color: var(--application-ink);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.7;
  text-wrap: pretty;
}

.application-chapter-copy > p:not(.application-chapter-lede) {
  max-width: 70ch;
  margin: 1.2rem 0 0;
  color: var(--application-muted);
  font-size: 1rem;
  line-height: 1.78;
  text-wrap: pretty;
}

.application-chapter-dark .application-chapter-lede,
.application-chapter-electric .application-chapter-lede { color: var(--application-white); }
.application-chapter-dark .application-chapter-copy > p:not(.application-chapter-lede),
.application-chapter-electric .application-chapter-copy > p:not(.application-chapter-lede) { color: oklch(0.84 0.025 220); }

.application-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 2.25rem;
  border: 1px solid var(--application-line);
  background: var(--application-line);
}

.application-detail-grid > div { padding: 1.5rem; background: var(--application-white); }
.application-detail-grid h3 { margin: 0 0 1rem; color: var(--application-cobalt); font-family: var(--application-tech); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.application-detail-grid ul { display: grid; gap: 0.72rem; margin: 0; padding: 0; list-style: none; }
.application-detail-grid li { position: relative; padding-inline-start: 1rem; color: var(--application-ink); font-size: 0.9rem; line-height: 1.5; }
.application-detail-grid li::before { content: ""; position: absolute; top: 0.62em; inset-inline-start: 0; width: 0.34rem; height: 0.34rem; background: var(--application-cobalt); }

.application-chapter-dark .application-detail-grid,
.application-chapter-electric .application-detail-grid { border-color: oklch(0.74 0.04 220 / 0.45); background: oklch(0.74 0.04 220 / 0.45); }
.application-chapter-dark .application-detail-grid > div,
.application-chapter-electric .application-detail-grid > div { background: oklch(0.235 0.06 249); }
.application-chapter-electric .application-detail-grid > div { background: oklch(0.285 0.1 248); }
.application-chapter-dark .application-detail-grid h3,
.application-chapter-electric .application-detail-grid h3 { color: var(--application-celadon); }
.application-chapter-dark .application-detail-grid li,
.application-chapter-electric .application-detail-grid li { color: oklch(0.9 0.018 220); }
.application-chapter-dark .application-detail-grid li::before,
.application-chapter-electric .application-detail-grid li::before { background: var(--application-celadon); }

.application-chapter-actions a:first-child { color: var(--application-white); background: var(--application-cobalt); border-color: var(--application-cobalt); }
.application-chapter-actions a:last-child { color: var(--application-cobalt); background: transparent; border-color: var(--application-cobalt); }
.application-chapter-actions a:first-child:hover { background: var(--application-navy); border-color: var(--application-navy); }
.application-chapter-actions a:last-child:hover { color: var(--application-white); background: var(--application-cobalt); }
.application-chapter-dark .application-chapter-actions a:first-child,
.application-chapter-electric .application-chapter-actions a:first-child { color: var(--application-navy); background: var(--application-celadon); border-color: var(--application-celadon); }
.application-chapter-dark .application-chapter-actions a:last-child,
.application-chapter-electric .application-chapter-actions a:last-child { color: var(--application-white); border-color: oklch(0.9 0.02 218 / 0.62); }
.application-chapter-dark .application-chapter-actions a:hover,
.application-chapter-electric .application-chapter-actions a:hover { color: var(--application-navy); background: var(--application-white); border-color: var(--application-white); }

.application-note { border-bottom: 1px solid var(--application-line); background: var(--application-mist); }
.application-note-grid { display: grid; grid-template-columns: minmax(10rem, 0.3fr) minmax(0, 1fr); gap: 2rem; align-items: start; padding-top: 2.25rem; padding-bottom: 2.25rem; }
.application-note span { color: var(--application-cobalt); font-family: var(--application-tech); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.application-note p { max-width: 76ch; margin: 0; color: var(--application-muted); font-size: 0.9rem; line-height: 1.65; }

.application-cta { padding: clamp(5rem, 9vw, 8rem) 0; color: var(--application-white); background: var(--application-cobalt); }
.application-cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.52fr); gap: clamp(3rem, 9vw, 9rem); align-items: end; }
.application-cta-grid > div:first-child > p { margin: 0 0 1.1rem; color: var(--application-celadon); font-family: var(--application-tech); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.application-cta h2 { max-width: 14ch; margin: 0; font-family: var(--application-display); font-size: clamp(3rem, 5.8vw, 5.4rem); font-weight: 600; line-height: 0.92; letter-spacing: -0.04em; text-wrap: balance; }
.application-cta-copy > p { max-width: 38rem; margin: 0; color: oklch(0.91 0.02 218); font-size: 1rem; line-height: 1.72; }
.application-cta-copy .application-action { margin-top: 1.8rem; }

.application-footer { padding: 4.5rem 0 2rem; color: oklch(0.86 0.02 220); background: var(--application-navy); }
.application-footer-grid { display: grid; grid-template-columns: minmax(18rem, 1.6fr) repeat(3, minmax(8rem, 0.55fr)); gap: 3rem; }
.application-footer-brand img { width: 11rem; filter: brightness(0) invert(1); }
.application-footer-brand p { max-width: 34rem; margin: 1.5rem 0 0; font-size: 0.9rem; line-height: 1.7; }
.application-footer-grid h2 { margin: 0 0 1rem; color: var(--application-white); font-family: var(--application-display); font-size: 1rem; font-weight: 600; }
.application-footer-grid > div:not(.application-footer-brand) { display: flex; flex-direction: column; align-items: flex-start; }
.application-footer-grid a:not(:first-child) { min-height: 2.45rem; display: inline-flex; align-items: center; font-size: 0.86rem; }
.application-footer-grid a:hover { color: var(--application-celadon); }
.application-footer-base { display: flex; justify-content: space-between; gap: 2rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid oklch(0.7 0.03 220 / 0.3); font-family: var(--application-tech); font-size: 0.67rem; }

.application-page-body a:focus-visible,
.application-page-body button:focus-visible { outline: 2px solid var(--application-celadon); outline-offset: 3px; }

@media (max-width: 1100px) {
  .application-hero { min-height: auto; }
  .application-hero-grid { grid-template-columns: 1fr; }
  .application-hero-copy { max-width: 48rem; }
  .application-hero-mosaic { min-height: 34rem; }
  .application-market-nav-track { width: 100%; display: flex; overflow-x: auto; scrollbar-width: thin; }
  .application-market-nav a { flex: 0 0 10.5rem; }
  .application-chapter-grid { grid-template-columns: minmax(20rem, 0.75fr) minmax(0, 1.25fr); gap: 3rem; }
  .application-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .application-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .application-shell { width: min(100% - 2rem, 42rem); }
  .application-hero { padding: 7.5rem 0 4.5rem; }
  .application-hero-grid { gap: 3rem; }
  .application-breadcrumb { margin-bottom: 1.4rem; }
  .application-hero h1 { max-width: 10ch; font-size: clamp(3.2rem, 15vw, 4.8rem); line-height: 0.92; }
  .application-hero-lede { font-size: 1rem; line-height: 1.68; }
  .application-hero-actions,
  .application-chapter-actions { flex-direction: column; align-items: stretch; }
  .application-hero-actions a,
  .application-chapter-actions a { width: 100%; }
  .application-hero-mosaic { min-height: 28rem; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
  .application-hero-image-main { grid-column: 1 / 3; grid-row: 1; }
  .application-hero-image-top { grid-column: 1; grid-row: 2; }
  .application-hero-image-bottom { grid-column: 2; grid-row: 2; }
  .application-hero-caption { inset-inline-end: 0.75rem; bottom: 0.75rem; max-width: 14rem; padding: 0.75rem; }
  .application-market-nav { top: 4.9rem; }
  .application-market-nav-track { width: 100%; }
  .application-market-nav a { min-width: 9.4rem; min-height: 4.4rem; padding: 0.7rem; font-size: 0.75rem; }
  .application-chapter { scroll-margin-top: 9.5rem; padding: 4.75rem 0; }
  .application-chapter-grid,
  .application-chapter-grid-reverse { grid-template-columns: 1fr; gap: 2.5rem; }
  .application-chapter-grid-reverse .application-chapter-media,
  .application-chapter-grid-reverse .application-chapter-copy { order: initial; }
  .application-chapter-media { position: static; }
  .application-chapter h2 { font-size: clamp(2.55rem, 12vw, 3.75rem); }
  .application-chapter-lede { margin-top: 1.5rem; font-size: 1.05rem; }
  .application-detail-grid { grid-template-columns: 1fr; }
  .application-note-grid { grid-template-columns: 1fr; gap: 0.8rem; }
  .application-cta-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .application-cta h2 { font-size: clamp(2.75rem, 13vw, 4rem); }
  .application-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
  .application-footer-brand { grid-column: 1 / -1; }
  .application-footer-grid > div:last-child { grid-column: 1 / -1; }
  .application-footer-base { flex-direction: column; gap: 0.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .application-page-body *,
  .application-page-body *::before,
  .application-page-body *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}