/* Keep Korean phrases readable while preserving horizontal scrolling for math. */
article.bd-article :is(h1, h2, h3, h4, p, li) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

article.bd-article p {
  line-height: 1.85;
}

@media (max-width: 575px) {
  article.bd-article h1 {
    font-size: 1.85rem;
    line-height: 1.4;
  }
  article.bd-article h2 {
    font-size: 1.5rem;
    line-height: 1.45;
  }
  article.bd-article h3 {
    font-size: 1.2rem;
    line-height: 1.5;
  }
}

/* The introduction uses the same grid-and-vector language as the book mark. */
:root {
  --la-navy: #102a43;
  --la-ink: #17324d;
  --la-cyan: #31b9aa;
  --la-coral: #ef6a7a;
  --la-gold: #e8b44f;
  --la-paper: #f7fafc;
  --la-muted: #61758a;
}

article.bd-article:has(.la-intro-hero) > h1:first-of-type,
article.bd-article:has(.la-intro-hero) > section:first-child > h1:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

article.bd-article:has(.la-intro-hero) {
  container-type: inline-size;
}

.la-intro-hero {
  --la-pointer-x: 0;
  --la-pointer-y: 0;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: min(720px, 78vh);
  margin: 0 0 clamp(3.5rem, 9vw, 7rem);
  padding: clamp(1.75rem, 5cqw, 4rem);
  overflow: hidden;
  color: #f8fafc;
  background:
    radial-gradient(circle at 82% 18%, rgba(49, 185, 170, .18), transparent 29%),
    radial-gradient(circle at 72% 86%, rgba(239, 106, 122, .14), transparent 27%),
    linear-gradient(145deg, #071a2c 0%, #102a43 54%, #17405f 100%);
  border-radius: clamp(1.25rem, 3vw, 2.5rem);
  box-shadow: 0 30px 80px rgba(16, 42, 67, .22);
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
  align-items: center;
  gap: clamp(1rem, 5vw, 4rem);
}

.la-intro-hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .16;
  background-image:
    linear-gradient(rgba(226, 232, 240, .18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226, 232, 240, .18) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(110deg, transparent 0%, #000 48%, #000 100%);
}

.la-intro-hero__copy { position: relative; z-index: 2; }
.la-intro-hero__eyebrow {
  margin: 0 0 1.35rem !important;
  color: #74e4d8;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.4 !important;
  letter-spacing: .16em;
}

.la-intro-hero__title {
  margin: 0;
  color: #f8fafc;
  font-size: clamp(2.45rem, 7cqw, 4.6rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.055em;
}

.la-intro-hero__title span { color: #d7f8f3; }
.la-intro-hero__lead {
  margin: 1.6rem 0 0 !important;
  color: #cbd9e6;
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  line-height: 1.8 !important;
}

.la-intro-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.3rem; }
.la-button {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .82rem 1.1rem;
  color: #f8fafc !important;
  border: 1px solid rgba(226, 232, 240, .35);
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.la-button:hover { border-color: rgba(255, 255, 255, .8); transform: translateY(-2px); }
.la-button--primary { color: #0b263b !important; background: #69ded1; border-color: #69ded1; }

.la-intro-hero__figure {
  transform: perspective(900px) rotateY(calc(var(--la-pointer-x) * 2.8deg)) rotateX(calc(var(--la-pointer-y) * -2.8deg));
  transition: transform .18s ease-out;
}
.la-intro-hero__figure svg { display: block; width: 100%; filter: drop-shadow(0 28px 26px rgba(1, 10, 20, .28)); }
.la-cover-grid { fill: none; stroke: #b8cad8; stroke-width: 1.3; opacity: .28; transform: skewY(-7deg); transform-origin: center; }
.la-cover-ellipse { fill: rgba(232, 180, 79, .06); stroke: #f5cb76; stroke-width: 3; opacity: .9; }
.la-cover-vector { fill: none; stroke-width: 7; stroke-linecap: round; }
.la-cover-vector--a { stroke: #5eead4; }
.la-cover-vector--b { stroke: #fb7185; }
.la-cover-arrow--a { fill: #5eead4; }
.la-cover-arrow--b { fill: #fb7185; }
.la-cover-origin { fill: #fff; }
.la-cover-matrix { fill: none; stroke: #dbeafe; stroke-width: 3; opacity: .85; }
.la-cover-matrix text { fill: #dbeafe; stroke: none; font: 28px ui-monospace, SFMono-Regular, Menlo, monospace; text-anchor: middle; }
.la-intro-hero__index {
  position: absolute;
  right: 1.8rem;
  bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  color: #a9bdcc;
  font: 600 .65rem ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
}
.la-intro-hero__index i { display: block; width: 52px; height: 1px; background: rgba(203, 213, 225, .45); }

.la-journey {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 3rem 0 clamp(4rem, 10vw, 8rem);
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(300px, .72fr);
  gap: clamp(2rem, 7vw, 6rem);
  align-items: start;
}
.la-journey__visual-wrap { position: sticky; top: 5.5rem; }
.la-journey__visual {
  overflow: hidden;
  color: var(--la-ink);
  background: linear-gradient(145deg, #f9fcfd, #edf5f8);
  border: 1px solid rgba(83, 120, 145, .16);
  border-radius: 2rem;
  box-shadow: 0 24px 60px rgba(27, 67, 92, .13);
}
.la-journey__visual-head {
  min-height: 4rem;
  padding: 1.25rem 1.5rem .2rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--la-muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.la-journey__counter { color: var(--la-cyan); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.la-journey__visual svg { display: block; width: 100%; }
.la-viz-bg { fill: transparent; }
.la-viz-grid { fill: none; stroke: #87a3b5; stroke-width: 1; opacity: .22; }
.la-viz-axes { fill: none; stroke: #456b82; stroke-width: 1.5; opacity: .35; }
.la-viz-layer { opacity: 0; transform: scale(.95); transform-origin: center; transition: opacity .52s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.la-journey[data-scene="0"] .la-viz-layer--0,
.la-journey[data-scene="1"] .la-viz-layer--1,
.la-journey[data-scene="2"] .la-viz-layer--2,
.la-journey[data-scene="3"] .la-viz-layer--3,
.la-journey[data-scene="4"] .la-viz-layer--4,
.la-journey[data-scene="5"] .la-viz-layer--5,
.la-journey[data-scene="6"] .la-viz-layer--6,
.la-journey[data-scene="7"] .la-viz-layer--7,
.la-journey[data-scene="8"] .la-viz-layer--8 { opacity: 1; transform: scale(1); }
.la-viz-vector { fill: none; stroke-width: 6; stroke-linecap: round; }
.la-viz-vector.la-cyan { color: #31b9aa; stroke: #31b9aa; }
.la-viz-vector.la-coral { color: #ef6a7a; stroke: #ef6a7a; }
.la-viz-node { fill: #17324d; }
.la-viz-math { fill: #17324d; font: 600 24px ui-monospace, SFMono-Regular, Menlo, monospace; }
.la-viz-plane { fill: rgba(49,185,170,.09); stroke: #31b9aa; stroke-width: 3; }
.la-viz-block { stroke-width: 2.5; }
.la-viz-block--1 { fill: rgba(49,185,170,.18); stroke: #31b9aa; }
.la-viz-block--2 { fill: rgba(239,106,122,.12); stroke: #ef6a7a; }
.la-viz-block--3 { fill: rgba(232,180,79,.15); stroke: #d19b31; }
.la-viz-block--4 { fill: rgba(115,145,199,.13); stroke: #6f8fc8; }
.la-viz-ellipse { fill: rgba(232,180,79,.09); stroke: #d9a73f; stroke-width: 3.5; }
.la-viz-signal { fill: none; stroke: #31b9aa; stroke-width: 5; stroke-linecap: round; }
.la-viz-signal--error { stroke: #ef6a7a; stroke-width: 2; stroke-dasharray: 8 9; opacity: .9; }
.la-viz-region { fill: rgba(49,185,170,.15); stroke: #31b9aa; stroke-width: 3; }
.la-viz-contours { fill: none; stroke: #d09a34; stroke-width: 2; stroke-dasharray: 8 7; opacity: .75; }
.la-viz-target { fill: #ef6a7a; stroke: #fff; stroke-width: 4; }
.la-viz-points { fill: #31b9aa; opacity: .88; }
.la-viz-fit { stroke: #17324d; stroke-width: 4; }
.la-viz-function { fill: none; stroke: #31b9aa; stroke-width: 5; }
.la-viz-basis { fill: none; stroke: #ef6a7a; stroke-width: 5; stroke-linecap: round; opacity: .85; }
.la-viz-orbit { fill: none; stroke: #d9a73f; stroke-width: 2; stroke-dasharray: 7 11; opacity: .65; }
.la-viz-network { fill: #31b9aa; stroke: #617d91; stroke-width: 3; }
.la-journey__progress { height: 4px; background: rgba(100, 126, 143, .14); }
.la-journey__progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--la-cyan), var(--la-coral)); transform: scaleX(1/9); transform-origin: left; transition: transform .5s ease; }

.la-journey__steps { padding: 15vh 0 20vh; }
.la-journey-step {
  min-height: 62vh;
  padding: clamp(1.25rem, 3vw, 2rem);
  opacity: .35;
  border-left: 2px solid rgba(97, 117, 138, .2);
  transition: opacity .35s ease, border-color .35s ease, transform .35s ease;
}
.la-journey-step.is-active { opacity: 1; border-color: var(--la-cyan); transform: translateX(.35rem); }
.la-journey-step > span { color: var(--la-cyan); font: 700 .75rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.la-journey-step h3 { margin: .8rem 0 1rem; color: var(--la-ink); font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.42; letter-spacing: -.025em; }
.la-journey-step p { margin: 0; color: var(--la-muted); font-size: .98rem; line-height: 1.9 !important; }
.la-journey-step a { display: inline-block; margin-top: 1.25rem; color: #168f83; font-size: .88rem; font-weight: 750; text-decoration: none; }
.la-journey-step a:hover { text-decoration: underline; text-underline-offset: .25em; }

html[data-theme="dark"] .la-journey__visual,
html[data-mode="dark"] .la-journey__visual { background: linear-gradient(145deg, #112b3e, #0b2233); border-color: rgba(160,200,216,.16); }
html[data-theme="dark"] .la-journey-step h3,
html[data-mode="dark"] .la-journey-step h3,
html[data-theme="dark"] .la-viz-math,
html[data-mode="dark"] .la-viz-math { color: #e7f2f7; fill: #e7f2f7; }
html[data-theme="dark"] .la-journey-step p,
html[data-mode="dark"] .la-journey-step p,
html[data-theme="dark"] .la-journey__visual-head,
html[data-mode="dark"] .la-journey__visual-head { color: #adc1cf; }

@container (max-width: 760px) {
  .la-intro-hero { min-height: auto; grid-template-columns: 1fr; padding-bottom: 2.5rem; }
  .la-intro-hero__figure { width: min(92%, 520px); margin: -1rem auto 0; }
  .la-journey { grid-template-columns: 1fr; gap: 1.5rem; }
  .la-journey__visual-wrap { position: sticky; top: 4.2rem; z-index: 4; width: min(100%, 520px); margin: 0 auto; }
  .la-journey__visual svg { max-height: 44vh; }
  .la-journey__steps { position: relative; z-index: 3; padding: 0 0 5vh; }
  .la-journey-step {
    min-height: 100vh;
    margin: 0;
    padding: 56vh 1.25rem 8vh;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(97,117,138,.15);
    scroll-margin-top: 4rem;
  }
  .la-journey-step.is-active { transform: none; }
}

@media (max-width: 575px) {
  .la-intro-hero { width: 100%; margin-top: 0; padding: 2rem 1.35rem 1.5rem; border-radius: 1.25rem; }
  .la-intro-hero__title { font-size: clamp(2.35rem, 12vw, 3.4rem); line-height: 1.18; }
  .la-intro-hero__eyebrow { font-size: .62rem; }
  .la-intro-hero__actions { align-items: stretch; flex-direction: column; }
  .la-button { justify-content: center; }
  .la-intro-hero__figure { width: 100%; margin-top: -.5rem; }
  .la-intro-hero__index { display: none; }
  .la-journey { width: 100%; }
  .la-journey__visual-wrap { top: 3.8rem; }
  .la-journey__visual { border-radius: 1.35rem; }
  .la-journey__visual-head { min-height: 3rem; padding: .85rem 1rem 0; }
  .la-journey__steps { padding-top: 0; }
  .la-journey-step { min-height: 100vh; padding-top: 52vh; }
}

@media (prefers-reduced-motion: reduce) {
  .la-intro-hero__figure,
  .la-button,
  .la-viz-layer,
  .la-journey-step,
  .la-journey__progress i { transition: none !important; }
}

@media print {
  .la-intro-hero { width: 100%; min-height: 0; break-after: page; }
  .la-journey { width: 100%; display: block; }
  .la-journey__visual-wrap { position: static; }
  .la-journey__steps { padding: 2rem 0; }
  .la-journey-step { min-height: 0; opacity: 1; break-inside: avoid; }
}