:root {
  --interface-bg: #050608;
  --interface-panel: #08090c;
  --interface-panel-soft: rgba(8, 9, 12, .86);
  --interface-line: #1c2430;
  --interface-text: #c8d0d8;
  --interface-dim: #697581;
  --interface-cyan: #3dffd2;
  --interface-magenta: #ff2d95;
  --interface-mono: ui-monospace, Menlo, Consolas, monospace;
  --interface-reading: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.media-language-site {
  --paper: var(--interface-bg);
  --paper-deep: var(--interface-panel);
  --ink: var(--interface-text);
  --ink-soft: var(--interface-text);
  --muted: var(--interface-dim);
  --line: var(--interface-line);
  --line-soft: rgba(61, 255, 210, .12);
  --grid: var(--interface-line);
  --grid-line: rgba(61, 255, 210, .09);
  --teal: var(--interface-cyan);
  --teal-dark: var(--interface-cyan);
  --red: var(--interface-magenta);
  --gold: var(--interface-magenta);
  --gold-soft: rgba(255, 45, 149, .1);
  --surface: rgba(8, 9, 12, .74);
  --surface-strong: rgba(8, 9, 12, .94);
  --case-study-surface: rgba(8, 9, 12, .88);
  --shadow: rgba(0, 0, 0, .5);
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 12%, rgba(61, 255, 210, .055), transparent 30%),
    radial-gradient(circle at 88% 25%, rgba(255, 45, 149, .05), transparent 28%),
    var(--interface-bg);
  color: var(--interface-text);
  font-family: var(--interface-reading);
  font-size: 11px;
}

/* Keep the site's generated interference field moving behind every surface. */
.media-language-site .site-interference-field {
  display: block;
  mix-blend-mode: screen;
  opacity: .25;
}

.media-language-site a { text-underline-offset: 3px; }
.media-language-site a:hover,
.media-language-site a:focus-visible { color: var(--interface-cyan); }

.media-language-site .topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  gap: clamp(16px, 3vw, 42px);
  height: var(--nav-height);
  padding: 0 clamp(14px, 3vw, 42px);
  border-bottom: 1px solid var(--interface-line);
  background: rgba(5, 6, 8, .94);
  backdrop-filter: blur(12px);
}

.media-language-site .brand {
  flex: 0 0 auto;
  color: var(--interface-cyan);
  font: 500 9px/1 var(--interface-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.media-language-site .nav-links {
  flex: 1 1 auto;
  align-items: center;
  gap: clamp(10px, 1.7vw, 24px);
  min-width: 0;
}

.media-language-site .nav-links a {
  flex: 0 0 auto;
  padding: 5px 0;
  border: 0;
  color: var(--interface-dim);
  font: 500 9px/1 var(--interface-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.media-language-site .nav-links a:hover,
.media-language-site .nav-links a:focus-visible,
.media-language-site .nav-links a[aria-current="page"] {
  color: var(--interface-cyan);
  background: transparent;
  box-shadow: none;
}

.media-language-site .nav-links a[aria-current="page"] { color: var(--interface-magenta); }
.media-language-site .theme-control { display: none; }
.media-language-site .nav-menu-toggle {
  border: 1px solid var(--interface-line);
  color: var(--interface-text);
  font: 500 9px/1 var(--interface-mono);
  letter-spacing: .1em;
}

.media-language-site .eyebrow,
.media-language-site .kicker {
  color: var(--interface-cyan);
  font: 500 8px/1.4 var(--interface-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.media-language-site .button.primary,
.media-language-site .button.secondary {
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid var(--interface-line);
  border-radius: 0;
  background: transparent;
  color: var(--interface-text);
  font: 500 8px/1 var(--interface-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.media-language-site .button.primary:hover,
.media-language-site .button.primary:focus-visible,
.media-language-site .button.secondary:hover,
.media-language-site .button.secondary:focus-visible {
  border-color: var(--interface-cyan);
  color: var(--interface-cyan);
  filter: none;
  outline: 0;
}

.media-language-site .site-footer {
  margin-top: 0;
  padding: 18px clamp(14px, 3vw, 42px);
  border-top: 1px solid var(--interface-line);
  background: rgba(5, 6, 8, .93);
  color: var(--interface-dim);
  font: 500 8px/1.4 var(--interface-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.media-language-site .site-footer a { color: var(--interface-cyan); }

/* Contact */
.contact-page main {
  min-height: calc(100vh - 58px);
  padding-top: var(--nav-height);
}

.contact-page .contact-section {
  align-items: start;
  width: min(1320px, calc(100% - 16px));
  min-height: calc(100vh - var(--nav-height) - 58px);
  margin: 0 auto;
  padding: clamp(44px, 8vw, 94px) 8px 72px;
  border: 0;
  background: transparent;
}

.contact-page .contact-intro {
  max-width: 620px;
  padding: 14px 0 26px;
  border-top: 1px solid var(--interface-line);
}

.contact-page .contact-intro h1 {
  margin: 9px 0 16px;
  color: var(--interface-text);
  font: 500 clamp(18px, 2.6vw, 28px)/1.1 var(--interface-mono);
  letter-spacing: -.04em;
  text-transform: none;
}

.contact-page .contact-intro p:not(.eyebrow) {
  max-width: 590px;
  margin: 0;
  color: var(--interface-dim);
  font: 10px/1.6 var(--interface-mono);
}

.contact-page .contact-forms {
  width: 100%;
  max-width: 680px;
  gap: 14px;
}

.contact-page .site-form {
  gap: 15px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--interface-line);
  background: rgba(8, 9, 12, .87);
}

.contact-page .site-form.compact-form { background: rgba(5, 6, 8, .68); }
.contact-page .form-heading h2 {
  margin: 6px 0 2px;
  color: var(--interface-text);
  font: 500 clamp(14px, 1.7vw, 18px)/1.15 var(--interface-mono);
  letter-spacing: -.035em;
}

.contact-page .site-form label span {
  color: var(--interface-cyan);
  font: 500 7px/1.3 var(--interface-mono);
  letter-spacing: .12em;
}

.contact-page .site-form input,
.contact-page .site-form textarea {
  padding: 11px 12px;
  border: 1px solid var(--interface-line);
  border-radius: 0;
  background: rgba(5, 6, 8, .9);
  color: var(--interface-text);
  font: 10px/1.5 var(--interface-mono);
}

.contact-page .site-form input:focus,
.contact-page .site-form textarea:focus {
  border-color: var(--interface-cyan);
  outline: 0;
}

.contact-page .site-form textarea::placeholder { color: #46515b; }
.contact-page .site-form .button { justify-self: start; }

/* Books */
.books-page .book-landing-main {
  align-items: stretch;
  display: block;
  width: min(1320px, calc(100% - 16px));
  min-height: calc(100vh - 58px);
  margin: 0 auto;
  padding: calc(var(--nav-height) + 44px) 8px 72px;
}

.books-page .book-landing-main > .section-heading {
  max-width: 920px;
  margin: 0 0 18px;
  padding: 14px 0 20px;
  border-top: 1px solid var(--interface-line);
  border-bottom: 1px solid var(--interface-line);
}

.books-page .section-heading h1 {
  margin: 8px 0 0;
  color: var(--interface-text);
  font: 500 clamp(18px, 2.6vw, 28px)/1.1 var(--interface-mono);
  letter-spacing: -.04em;
  text-transform: none;
}

.books-page .book-landing-feature {
  align-items: stretch;
  gap: 0;
  grid-template-columns: minmax(190px, 340px) minmax(0, 1fr);
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--interface-line);
  background: rgba(5, 6, 8, .5);
  box-shadow: none;
}

.books-page .book-landing-feature:first-of-type { border-top: 1px solid var(--interface-line); }
.books-page .book-landing-feature:hover { background: rgba(8, 9, 12, .9); }
.books-page .book-landing-visual {
  display: grid;
  width: 100%;
  max-width: none;
  min-height: 340px;
  margin: 0;
  padding: clamp(20px, 3vw, 34px);
  place-items: center;
  border-right: 1px solid var(--interface-line);
  background: rgba(0, 0, 0, .32);
}

.books-page .book-cover-image {
  width: auto;
  max-width: min(100%, 250px);
  max-height: 360px;
  border: 1px solid var(--interface-line);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .5);
  object-fit: contain;
  animation: none;
}

.books-page .book-landing-copy {
  align-self: center;
  max-width: 760px;
  padding: clamp(28px, 5vw, 62px);
}

.books-page .book-landing-copy h2 {
  margin: 8px 0 14px;
  color: var(--interface-text);
  font: 500 clamp(16px, 2vw, 22px)/1.12 var(--interface-mono);
  letter-spacing: -.04em;
}

.books-page .book-landing-copy > p:not(.eyebrow) {
  max-width: 670px;
  margin: 0;
  color: var(--interface-dim);
  font: 10px/1.6 var(--interface-mono);
}

.books-page .book-landing-copy .book-actions { margin-top: 22px; }

/* Output trace */
.trace-page .trace-header,
.trace-page .trace-main {
  width: min(1320px, calc(100% - 16px));
  margin-inline: auto;
}

.trace-page .trace-header {
  padding: calc(var(--nav-height) + 44px) 8px 32px;
  border-bottom: 1px solid var(--interface-line);
  background: rgba(5, 6, 8, .32);
}

.trace-page .trace-header h1 {
  max-width: 960px;
  margin: 9px 0 14px;
  color: var(--interface-text);
  font: 500 clamp(18px, 2.6vw, 28px)/1.1 var(--interface-mono);
  letter-spacing: -.04em;
  text-transform: none;
}

.trace-page .lede {
  max-width: 780px;
  color: var(--interface-dim);
  font: 10px/1.6 var(--interface-mono);
}

.trace-page .metrics {
  width: min(1304px, calc(100% - 16px));
  margin: 0 auto;
  border-bottom: 1px solid var(--interface-line);
  background: rgba(8, 9, 12, .74);
}

.trace-page .metric {
  padding: 18px;
  border-right: 1px solid var(--interface-line);
}

.trace-page .metric span,
.trace-page th {
  color: var(--interface-cyan);
  font: 500 8px/1.3 var(--interface-mono);
  letter-spacing: .12em;
}

.trace-page .metric strong {
  color: var(--interface-text);
  font: 500 clamp(17px, 2.4vw, 26px)/1 var(--interface-mono);
}

.trace-page .recent-output {
  width: min(1304px, calc(100% - 16px));
  margin: 0 auto;
  padding: 34px 8px;
  border-bottom: 1px solid var(--interface-line);
  background: transparent;
}

.trace-page .recent-output h2 {
  color: var(--interface-text);
  font: 500 clamp(14px, 1.7vw, 18px)/1.15 var(--interface-mono);
  letter-spacing: -.035em;
}

.trace-page .recent-output-list { gap: 0; }
.trace-page .recent-output article {
  padding: 12px 14px;
  border-left: 1px solid var(--interface-line);
  border-bottom: 1px solid var(--interface-line);
  background: rgba(5, 6, 8, .48);
}

.trace-page .recent-output article:hover { background: rgba(8, 9, 12, .9); }
.trace-page .recent-output time {
  color: var(--interface-cyan);
  font: 500 8px/1.3 var(--interface-mono);
  letter-spacing: .1em;
}

.trace-page .recent-output h3 {
  color: var(--interface-text);
  font: 500 12px/1.3 var(--interface-mono);
}

.trace-page .recent-output p {
  color: var(--interface-dim);
  font: 10px/1.55 var(--interface-mono);
}

.trace-page .trace-main { padding: 38px 8px 64px; }
.trace-page .toolbar a,
.trace-page .trace-footer-link {
  color: var(--interface-cyan);
  font: 500 8px/1.4 var(--interface-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.trace-page .segments { border-color: var(--interface-line); }
.trace-page .segments button {
  min-height: 36px;
  padding: 0 13px;
  border-color: var(--interface-line);
  color: var(--interface-text);
  font: 500 9px/1 var(--interface-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.trace-page .segments button:hover { color: var(--interface-cyan); }
.trace-page .segments button[aria-pressed="true"] {
  background: rgba(255, 45, 149, .1);
  color: var(--interface-magenta);
}

.trace-page .chart-shell {
  min-height: 510px;
  padding: 18px;
  border: 1px solid var(--interface-line);
  background: rgba(8, 9, 12, .88);
}

.trace-page .grid-line { stroke: var(--interface-line); }
.trace-page .axis-line { stroke: var(--interface-dim); }
.trace-page .axis-label {
  fill: var(--interface-dim);
  font: 9px var(--interface-mono);
}
.trace-page .average-line { stroke: var(--interface-magenta); }
.trace-page .frame-point { stroke: var(--interface-panel); }
.trace-page .tooltip {
  border: 1px solid var(--interface-line);
  background: rgba(5, 6, 8, .96);
  color: var(--interface-text);
  font: 9px/1.45 var(--interface-mono);
}

.trace-page .tooltip strong { font-size: 11px; }

.trace-page .caption {
  color: var(--interface-dim);
  font: 10px/1.55 var(--interface-mono);
}

.trace-page .table-wrap { border-top: 1px solid var(--interface-line); }
.trace-page th,
.trace-page td { border-color: var(--interface-line); }
.trace-page td {
  color: var(--interface-dim);
  font: 10px/1.5 var(--interface-mono);
}

.trace-page tbody tr:hover { background: rgba(8, 9, 12, .9); }
.trace-page td.number { color: var(--interface-text); }

@media (max-width: 1040px) {
  .contact-page .contact-section { grid-template-columns: 1fr; }
  .contact-page .contact-intro,
  .contact-page .contact-forms { max-width: 820px; }
}

@media (max-width: 720px) {
  .media-language-site .topbar { justify-content: space-between; }
  .media-language-site .nav-menu-toggle { display: inline-flex; margin-left: auto; }
  .media-language-site .nav-links {
    display: none;
    inset: var(--nav-height) 0 auto;
    max-height: calc(100vh - var(--nav-height));
    padding: 8px;
    border-bottom: 1px solid var(--interface-line);
    background: rgba(5, 6, 8, .98);
  }
  .media-language-site .topbar.nav-open .nav-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .media-language-site .nav-links a {
    min-height: 36px;
    padding: 13px 10px;
    border: 1px solid var(--interface-line);
  }
  .books-page .book-landing-feature { grid-template-columns: minmax(150px, 230px) minmax(0, 1fr); }
  .books-page .book-landing-visual { min-height: 280px; padding: 18px; }
  .books-page .book-cover-image { max-height: 280px; }
  .books-page .book-landing-copy { padding: 25px; }
  .trace-page .trace-header { padding-top: calc(var(--nav-height) + 34px); }
}

@media (max-width: 560px) {
  .books-page .book-landing-feature { grid-template-columns: 1fr; }
  .books-page .book-landing-visual {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--interface-line);
  }
  .books-page .book-cover-image { max-height: 320px; }
  .trace-page .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trace-page .recent-output { grid-template-columns: 1fr; }
  .trace-page .recent-output article { border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .media-language-site .site-interference-field { display: none; }
}