@font-face {
  font-family: 'Oxanium ProDyn';
  src: url('../assets/fonts/Oxanium-wght.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Departure Mono ProDyn';
  src: url('../assets/fonts/DepartureMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Progress is component data, not a new design token. */
@property --motion-progress { syntax: '<number>'; inherits: false; initial-value: 1; }
/* The canonical reduction duration must not create implicit transitions. */
* { box-sizing: border-box; transition-property: none; }
html { color-scheme: dark; background: var(--pd-field); }
body { margin: 0; background: var(--pd-field); color: var(--pd-ivory); font-family: var(--pd-font-body); font-size: var(--fs-body); line-height: var(--lh-body); }
a { color: var(--pd-signal); text-underline-offset: var(--sp-1); }
a:hover { color: var(--pd-ivory); }
button, input { font: inherit; }
button, summary, .masthead a, .footer a, nav a { min-height: calc(var(--sp-8) + var(--sp-1)); }
button { padding: var(--sp-3) var(--sp-5); border: var(--bw-hairline) solid var(--pd-signal); border-radius: var(--r-0); background: var(--pd-signal); color: var(--pd-void); cursor: pointer; font-family: var(--pd-font-hud); font-size: var(--fs-meta); line-height: var(--lh-heading); }
button:hover:not(:disabled) { background: var(--pd-ivory); border-color: var(--pd-ivory); }
button.quiet { color: var(--pd-ivory); background: transparent; border-color: var(--pd-ivory-muted); }
button.quiet:hover:not(:disabled) { color: var(--pd-void); }
button:disabled { cursor: not-allowed; color: var(--pd-ivory-muted); background: var(--pd-surface); border-color: var(--pd-line); }
:focus-visible { outline: var(--bw-signal) solid var(--pd-spark); outline-offset: var(--sp-1); }
.wrap { width: min(var(--bp-xl), calc(100% - var(--sp-7) * 2)); margin-inline: auto; }
.masthead { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-6); padding-block: var(--sp-6); border-bottom: var(--bw-hairline) solid var(--pd-line); }
.brand { display: inline-flex; align-items: center; gap: var(--sp-4); }
.brand img { width: var(--sp-8); height: var(--sp-8); object-fit: contain; }
.masthead a { display: inline-flex; align-items: center; text-decoration: none; color: var(--pd-ivory); font-family: var(--pd-font-hud); font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase; }
nav { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.eyebrow { margin: 0 0 var(--sp-5); font-family: var(--pd-font-hud); font-size: var(--fs-meta); line-height: var(--lh-body); text-transform: uppercase; letter-spacing: var(--ls-hud); color: var(--pd-signal); }
h1, h2, h3 { font-family: var(--pd-font-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display); text-wrap: balance; }
h1 { font-size: var(--fs-hero); font-weight: bold; margin: 0 0 var(--sp-7); }
h2 { font-size: var(--fs-h1); margin: 0 0 var(--sp-6); }
h3 { font-size: var(--fs-h3); }
p { margin-top: 0; }
.opening { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: var(--sp-section); padding-block: var(--sp-section-lg) var(--sp-section); }
.deck { max-width: var(--bp-sm); font-size: var(--fs-h3); line-height: var(--lh-body); color: var(--pd-ivory); margin-bottom: var(--sp-4); }
.opening-note { color: var(--pd-ivory-muted); font-size: var(--fs-lead); max-width: var(--bp-sm); }
.text-link { display: inline-flex; align-items: center; gap: var(--sp-3); min-height: calc(var(--sp-8) + var(--sp-1)); font-size: var(--fs-body-sm); }
.lead-figure { margin: 0; }
.lead-svg { width: 100%; height: auto; display: block; padding-block: var(--sp-4); }
.lead-planes path, .lead-reveal path { fill: none; stroke: var(--pd-line); stroke-width: var(--bw-hairline); vector-effect: non-scaling-stroke; }
.lead-reveal path { stroke: var(--pd-signal); }
.lead-composition .controls { padding-bottom: 0; }
.lead-composition [data-status] { width: 100%; margin: 0; }
.study-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); padding-block: var(--sp-6); border-block: var(--bw-hairline) solid var(--pd-line); }
.study-index a { display: flex; align-items: center; gap: var(--sp-3); color: var(--pd-ivory); font-family: var(--pd-font-hud); font-size: var(--fs-micro); text-decoration: none; }
.study-index a > span:first-child { color: var(--pd-signal); }
.study-index a > span:last-child { margin-left: auto; }
.study-index a:hover { color: var(--pd-signal); }
.reading-note { font-size: var(--fs-body-sm); color: var(--pd-ivory-muted); margin-block: var(--sp-5) var(--sp-8); }
.chapters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sp-section); padding-block: var(--sp-section); border-top: var(--bw-hairline) solid var(--pd-line); }
.chapter-links { display: flex; flex-direction: column; gap: 0; }
.chapter-links a { display: flex; justify-content: space-between; align-items: center; padding-block: var(--sp-5); border-bottom: var(--bw-hairline) solid var(--pd-line); text-decoration: none; color: var(--pd-ivory); }
.chapter-links a span { color: var(--pd-signal); font-family: var(--pd-font-hud); font-size: var(--fs-meta); }
.study { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sp-section); padding-block: var(--sp-section-lg); border-top: var(--bw-hairline) solid var(--pd-line); scroll-margin-top: var(--sp-7); }
.study-heading > p:not(.eyebrow) { color: var(--pd-ivory-muted); font-size: var(--fs-lead); }
.study-body { min-width: 0; }
.specimen { margin: 0; padding: var(--sp-7); background: var(--pd-void); border-block: var(--bw-hairline) solid var(--pd-line); }
.specimen-label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); color: var(--pd-ivory-muted); font-family: var(--pd-font-hud); font-size: var(--fs-meta); }
.specimen-label output { color: var(--pd-signal); }
.signal-svg { display: block; width: 100%; height: auto; margin-block: var(--sp-6); overflow: visible; }
.guide-path, .signal-path { fill: none; stroke: var(--pd-line); stroke-width: var(--bw-signal); vector-effect: non-scaling-stroke; }
.signal-path { stroke: var(--pd-signal); }
.signal-node { fill: var(--pd-ivory); }
figcaption { font-size: var(--fs-body-sm); color: var(--pd-ivory-muted); }
.controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); padding-block: var(--sp-5); }
[data-status] { color: var(--pd-ivory-muted); font-family: var(--pd-font-hud); font-size: var(--fs-micro); margin-left: auto; }
.contract { margin-block: var(--sp-4) var(--sp-7); }
.contract > div { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-6); padding-block: var(--sp-4); border-top: var(--bw-hairline) solid var(--pd-line); }
dt { font-family: var(--pd-font-hud); font-size: var(--fs-micro); color: var(--pd-ivory); }
dd { margin: 0; font-size: var(--fs-body-sm); color: var(--pd-ivory-muted); }
details { border-block: var(--bw-hairline) solid var(--pd-line); padding-block: var(--sp-2); }
summary { cursor: pointer; padding-block: var(--sp-3); font-size: var(--fs-body-sm); }
pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: var(--sp-5); background: var(--pd-section); color: var(--pd-ivory); font-family: var(--pd-font-hud); font-size: var(--fs-meta); }
code { font-family: inherit; }
details button { margin-bottom: var(--sp-4); }
.footer { padding-block: var(--sp-section) var(--sp-section-lg); border-top: var(--bw-hairline) solid var(--pd-line); }
.footer p:not(.eyebrow) { max-width: var(--bp-sm); color: var(--pd-ivory-muted); font-size: var(--fs-body-sm); }
.footer a { display: inline-flex; align-items: center; }
.skip { position: absolute; left: var(--sp-6); top: var(--sp-6); padding: var(--sp-4); background: var(--pd-ivory); color: var(--pd-void); transform: translateY(-200%); z-index: var(--z-overlay); }
.skip:focus { transform: none; }
@media (max-width: 1024px) { .study { gap: var(--sp-7); } }
@media (max-width: 768px) {
  .opening, .chapters { grid-template-columns: 1fr; gap: var(--sp-8); }
  .lead-composition { max-width: var(--bp-sm); }
  .study-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-6); }
  .study { grid-template-columns: 1fr; padding-block: var(--sp-section); }
  .study-heading { max-width: var(--bp-sm); }
  h2 br { display: none; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - var(--sp-5) * 2); }
  .masthead { align-items: flex-start; gap: var(--sp-4); }
  .masthead nav { gap: 0; flex-direction: column; }
  .brand { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .opening { padding-block: var(--sp-section); }
  .deck { font-size: var(--fs-lead); }
  .specimen { padding: var(--sp-5); }
  .contract > div { grid-template-columns: 1fr; gap: var(--sp-2); }
  [data-status] { width: 100%; margin-left: 0; }
}
.continuity-list { display: grid; list-style: none; margin: var(--sp-7) 0; padding: 0; gap: var(--sp-3); }
.continuity-list li { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-5); background: var(--pd-section); border: var(--bw-hairline) solid var(--pd-line); }
.continuity-list strong { font-size: var(--fs-lead); font-weight: normal; }
.continuity-list p { margin: 0; color: var(--pd-ivory-muted); font-size: var(--fs-body-sm); }
.continuity-list button { margin-left: auto; flex-shrink: 0; }
.item-mark { font-family: var(--pd-font-hud); font-size: var(--fs-meta); color: var(--pd-signal); }
@media (max-width: 640px) {
  .continuity-list li { flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-4); }
  .continuity-list button { margin-left: 0; width: 100%; }
}
.type-stage { position: relative; padding-block: var(--sp-8); }
.type-stage p { font-family: var(--pd-font-display); font-size: var(--fs-display); line-height: var(--lh-heading); letter-spacing: var(--ls-display); font-weight: normal; margin: 0; overflow-wrap: anywhere; }
[data-type-visual] { position: absolute; inset: var(--sp-8) 0; pointer-events: none; color: var(--pd-signal); }
.transit-svg { width: 100%; height: auto; display: block; margin-block: var(--sp-6); }
.material path { fill: none; stroke: var(--pd-signal); stroke-width: var(--bw-hairline); vector-effect: non-scaling-stroke; }
.material .material-cross { stroke: var(--pd-cyan-deep); }
.aperture-outline { fill: none; stroke: var(--pd-ivory-muted); stroke-width: var(--bw-hairline); vector-effect: non-scaling-stroke; }
.traveler { fill: var(--pd-ivory); }
.range-control { padding-top: var(--sp-6); }
.range-control label { display: flex; justify-content: space-between; font-size: var(--fs-meta); font-family: var(--pd-font-hud); }
.range-control label span { color: var(--pd-ivory-muted); }
.range-control input { display: block; width: 100%; min-height: calc(var(--sp-8) + var(--sp-1)); margin: 0; accent-color: var(--pd-signal); cursor: ew-resize; }
.range-control p { color: var(--pd-ivory-muted); font-size: var(--fs-body-sm); margin: 0; }
@media (prefers-reduced-motion: reduce) { .specimen *, .specimen { filter: none !important; } }