@font-face {
  font-family: "OffBitTrialBold";
  src: url("./assets/fonts/OffBitTrial-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "OffBit101Bold";
  src: url("./assets/fonts/OffBit-101Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "OffBitTiltBold";
  src: url("./assets/fonts/OffBit-TiltBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "OffBitBarBold";
  src: url("./assets/fonts/OffBit-BarBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "OffBitBar";
  src: url("./assets/fonts/OffBit-Bar.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "OffBitStackBold";
  src: url("./assets/fonts/OffBit-StackBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "OffBit";
  src: url("./assets/fonts/OffBit-Regular.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Zpix";
  src: url("./assets/fonts/zpix.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --page-bg: #121212;
  --page-bg-rgb: 18, 18, 18;
  --theme-fg: #ffffff;
  --theme-copy: rgba(213, 213, 213, 0.69);
  --theme-muted: rgba(255, 255, 255, 0.56);
  --theme-panel: #282828;
  --theme-panel-active: #2a1a14;
  --theme-panel-fg: #ffffff;
  --theme-corner: #ffffff;
  --theme-text-glow: rgba(255, 255, 255, 0.6);
  --theme-icon-filter: brightness(0) invert(1);
  --theme-control-inactive: rgba(255, 255, 255, 0.9);
  --accent: #ff6523;
  --accent-rgb: 255, 101, 35;
  --paper-blend-mode: difference;
  --paper-opacity: 0.4;
  --paper-saturation: 1;
  --paper-brightness: 1;
  --paper-contrast: 1;
  --layout-left: clamp(4.25rem, 4.48vw, 6.4rem);
  --title-top: 10.83vh;
  --copy-top: 50vh;
  --detail-copy-top: 50vh;
  --title-width: clamp(27rem, 34vw, 44rem);
  --copy-width: clamp(31rem, 34.5vw, 43.5rem);
  --page-title-size: clamp(5rem, 6.5vw, 7.75rem);
  --detail-title-size: clamp(3.5rem, min(6.5vw, 6.5vh), 7.75rem);
  --body-copy-size: clamp(1.125rem, 1.38vw, 1.625rem);
  --scroll-arrow-size: clamp(1.05rem, 0.98vw, 1.35rem);
  --nav-icon-size: clamp(3.5rem, 3.42vw, 4.75rem);
  --nav-icon-track: clamp(3.85rem, 3.76vw, 5.1rem);
  --nav-label-size: clamp(0.95rem, 0.88vw, 1.2rem);
  --thesis-overview-top-fade-height: clamp(4.6rem, 8.2vh, 6.25rem);
  --nav-active-filter: brightness(0) saturate(100%) invert(54%) sepia(98%) saturate(2751%) hue-rotate(346deg) brightness(102%) contrast(101%);
  font-family: "OffBitTrialBold", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="light"] {
  color-scheme: light;
  --page-bg: #919592;
  --page-bg-rgb: 145, 149, 146;
  --theme-fg: #121212;
  --theme-copy: rgba(18, 18, 18, 0.66);
  --theme-muted: rgba(18, 18, 18, 0.54);
  --theme-panel: #282828;
  --theme-panel-active: rgb(202 242 134 / 15%);
  --theme-panel-fg: #ffffff;
  --theme-corner: #121212;
  --theme-text-glow: rgba(18, 18, 18, 0.2);
  --theme-icon-filter: brightness(0);
  --theme-control-inactive: rgba(18, 18, 18, 0.52);
  --accent: #d3ff87;
  --accent-rgb: 211, 255, 135;
  --nav-active-filter: brightness(0) saturate(100%) invert(95%) sepia(42%) saturate(761%) hue-rotate(28deg) brightness(106%) contrast(102%);
  --paper-blend-mode: multiply;
  --paper-opacity: 0.18;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--page-bg);
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Block the trackpad two-finger swipe-to-go-back / forward across the whole app
     (the per-page handlers only cover the deck). Horizontal-only, so vertical
     section scrolling is untouched. */
  overscroll-behavior-x: none;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--page-bg);
  color: var(--theme-fg);
  font-weight: 700;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: none;
}

/* Text selection uses the theme accent (orange in dark, green in light). */
::selection {
  background: var(--accent);
  color: #121212;
}

::-moz-selection {
  background: var(--accent);
  color: #121212;
}

.site-header-meta {
  position: fixed;
  right: max(clamp(8.25rem, 8.2vw, 11.75rem), env(safe-area-inset-right));
  top: max(clamp(1.35rem, 1.35vw, 1.9rem), env(safe-area-inset-top));
  z-index: 2147483645;
  display: grid;
  grid-template-columns:
    clamp(9.5rem, 12vw, 15rem)
    clamp(12rem, 14.5vw, 18rem)
    clamp(13rem, 16vw, 21rem);
  column-gap: clamp(2.5rem, 4.6vw, 6.5rem);
  align-items: start;
  pointer-events: none;
}

.site-header-meta__block {
  margin: 0;
  color: color-mix(in srgb, var(--theme-fg) 86%, transparent);
  font-family: "OffBit101Bold", "OffBit", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(0.66rem, 0.64vw, 0.9rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: none;
}

.site-header-meta__block--haiku {
  font-family: "Zpix", "OffBit101Bold", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(0.62rem, 0.62vw, 0.86rem);
  font-weight: 400;
  line-height: 1.25;
  text-transform: none;
}

.site-top-controls {
  position: fixed !important;
  right: max(clamp(1rem, 1vw, 1.4rem), env(safe-area-inset-right));
  top: max(clamp(1rem, 1vw, 1.4rem), env(safe-area-inset-top));
  z-index: 2147483646;
  display: flex;
  align-items: center;
  gap: clamp(0.45rem, 0.55vw, 0.75rem);
}

.site-top-controls__icon {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: clamp(1.5rem, 1.46vw, 1.9rem);
  height: clamp(1.5rem, 1.46vw, 1.9rem);
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  background: var(--theme-control-inactive);
  cursor: pointer;
  opacity: 0.46;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  transition:
    background-color 180ms ease,
    opacity 180ms ease,
    filter 180ms ease;
}

.site-top-controls__icon:hover,
.site-top-controls__icon:focus-visible,
.site-top-controls__icon.is-active,
html[data-theme="light"] .site-theme-toggle[data-theme-target="light"],
html[data-theme="dark"] .site-theme-toggle[data-theme-target="dark"] {
  background: var(--accent);
  opacity: 1;
  outline: none;
}

.site-top-controls__icon.is-active,
html[data-theme="light"] .site-theme-toggle[data-theme-target="light"],
html[data-theme="dark"] .site-theme-toggle[data-theme-target="dark"] {
  filter:
    drop-shadow(0 0 0.08rem rgba(var(--accent-rgb), 0.72))
    drop-shadow(0 0 0.26rem rgba(var(--accent-rgb), 0.34));
}

.site-top-controls__icon--triangle-outline {
  mask-image: url("./assets/ui/triangleoutline.svg");
  -webkit-mask-image: url("./assets/ui/triangleoutline.svg");
}

.site-top-controls__icon--triangle-shape {
  mask-image: url("./assets/ui/triangleshape.svg");
  -webkit-mask-image: url("./assets/ui/triangleshape.svg");
}

.site-audio-toggle {
  position: fixed !important;
  right: max(clamp(1rem, 1vw, 1.4rem), env(safe-area-inset-right));
  top: max(clamp(1rem, 1vw, 1.4rem), env(safe-area-inset-top));
  z-index: 2147483646;
  width: clamp(2rem, 1.95vw, 2.6rem);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: color-mix(in srgb, var(--theme-fg) 88%, transparent);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 180ms ease;
}

.site-top-controls .site-audio-toggle {
  position: relative !important;
  right: auto;
  top: auto;
  z-index: 1;
  flex: 0 0 auto;
  margin-left: clamp(0.9rem, 1.15vw, 1.55rem);
}

.site-audio-toggle:hover,
.site-audio-toggle:focus-visible,
.site-audio-toggle.is-muted {
  opacity: 1;
  outline: none;
}

.site-audio-toggle__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72%;
  height: 72%;
  object-fit: contain;
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: opacity 160ms ease, filter 160ms ease;
  filter: var(--theme-icon-filter);
}

.site-audio-toggle:not(.is-muted) .site-audio-toggle__icon--sound {
  filter:
    var(--theme-icon-filter)
    drop-shadow(0 0 0.12rem color-mix(in srgb, var(--theme-fg) 84%, transparent))
    drop-shadow(0 0 0.36rem color-mix(in srgb, var(--theme-fg) 56%, transparent))
    drop-shadow(0 0 0.72rem color-mix(in srgb, var(--theme-fg) 26%, transparent));
}

html[data-theme="light"] .site-audio-toggle:not(.is-muted) .site-audio-toggle__icon--sound {
  filter: var(--theme-icon-filter);
}

.site-audio-toggle__icon--nosound {
  opacity: 0;
}

.site-audio-toggle.is-muted .site-audio-toggle__icon--sound {
  opacity: 0;
}

.site-audio-toggle.is-muted .site-audio-toggle__icon--nosound {
  opacity: 1;
  filter: var(--theme-icon-filter);
}

@media (max-width: 70rem) {
  .site-header-meta {
    right: max(clamp(7.2rem, 18vw, 9rem), env(safe-area-inset-right));
    grid-template-columns:
      clamp(8.5rem, 25vw, 12rem)
      clamp(11rem, 32vw, 16rem);
    column-gap: clamp(1.6rem, 7vw, 4.6rem);
  }

  .site-header-meta__block--haiku {
    display: none;
  }
}

body::before {
  content: none;
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.035) 0,
      rgba(255, 255, 255, 0.035) 0.0625rem,
      rgba(0, 0, 0, 0.12) 0.125rem,
      rgba(0, 0, 0, 0.12) 0.25rem
    );
  opacity: 0.42;
  mix-blend-mode: soft-light;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.intro-only {
  min-height: 100vh;
  background: var(--page-bg);
}

#introCanvas {
  position: fixed;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  background: #000000;
  transition: opacity 520ms ease, visibility 520ms ease;
}

.tile-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 520ms ease, visibility 520ms ease;
}

.tile-layer--back {
  z-index: 10;
}

.tile-layer--front {
  z-index: 30;
}

.z-label-layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 320ms ease, visibility 320ms ease;
}

.intro-only.is-landing-active #introCanvas,
.intro-only.is-landing-active .tile-layer,
.intro-only.is-landing-active .z-label-layer {
  opacity: 0;
  visibility: hidden;
}

.z-label {
  position: absolute;
  left: 0;
  top: 0;
  padding: 2px 5px;
  border-radius: 4px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.72);
  font: 11px/1.2 "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  white-space: nowrap;
  transform: translate3d(-9999px, -9999px, 0);
}

.depth-tile {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  border-radius: 12%;
  background: linear-gradient(135deg, var(--tile-a), var(--tile-b) 48%, var(--tile-c));
  will-change: transform, filter, opacity;
}

.depth-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.34) 0 12%, transparent 13%),
    radial-gradient(ellipse at 55% 62%, rgba(15, 19, 42, 0.34) 0 23%, transparent 24%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 42%);
}

.depth-tile::after {
  content: "";
  position: absolute;
  left: 18%;
  bottom: 18%;
  width: 52%;
  height: 4%;
  min-height: 2px;
  background: rgba(255, 255, 255, 0.22);
}

.tile-mark {
  position: absolute;
  right: 18%;
  bottom: 28%;
  width: 22%;
  aspect-ratio: 1;
  border: 2px solid rgba(255, 255, 255, 0.28);
  transform: rotate(45deg);
}

.intro-title {
  position: fixed;
  left: 50%;
  top: 54%;
  z-index: 20;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  color: #f7f7f4;
  font-family: "OffBitTiltBold", "OffBit101Bold", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(32px, 3.9vw, 58px);
  font-weight: 700;
  line-height: 1.08;
  text-align: center;
  pointer-events: none;
  will-change: transform, opacity;
  text-shadow: none;
  transition: left 900ms cubic-bezier(0.16, 1, 0.3, 1), top 900ms cubic-bezier(0.16, 1, 0.3, 1), font-size 900ms cubic-bezier(0.16, 1, 0.3, 1), filter 250ms ease;
}

.intro-title.is-docked {
  left: 4.64vw;
  top: 8.8vh;
  justify-items: start;
  font-size: clamp(58px, 4.69vw, 90px);
  line-height: 0.82;
  text-align: left;
}

.intro-title.is-docked .title-line--x {
  max-height: 0;
  opacity: 0;
  transform: translateY(-0.24em);
}

.title-line {
  display: block;
  max-height: 1.15em;
  opacity: 1;
  transform: translateY(0);
  transition: max-height 720ms cubic-bezier(0.16, 1, 0.3, 1), opacity 520ms ease, transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

.intro-title:not(.is-expanded) .title-line--x,
.intro-title:not(.is-expanded) .title-line--antidote {
  max-height: 0;
  opacity: 0;
  transform: translateY(-0.32em);
}

.focus-control,
.shape-control,
.texture-debug {
  position: fixed;
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(9.4rem, 11vw) clamp(3rem, 2.65vw, 3.6rem);
  align-items: center;
  gap: clamp(0.5rem, 0.5vw, 0.75rem);
  padding: clamp(0.55rem, 0.55vw, 0.75rem) clamp(0.65rem, 0.65vw, 0.9rem);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: clamp(0.35rem, 0.4vw, 0.55rem);
  color: rgba(255, 255, 255, 0.88);
  background: rgba(0, 0, 0, 0.56);
  backdrop-filter: blur(12px);
  font-size: clamp(0.75rem, 0.64vw, 0.9rem);
  transition: opacity 420ms ease, transform 420ms ease, visibility 420ms ease;
}

.focus-control {
  left: clamp(1rem, 1vw, 1.4rem);
  bottom: clamp(1rem, 1vw, 1.4rem);
}

.shape-control {
  right: clamp(1rem, 1vw, 1.4rem);
  top: clamp(1rem, 1vw, 1.4rem);
}

.texture-debug {
  right: clamp(1rem, 1vw, 1.4rem);
  top: clamp(1rem, 1vw, 1.4rem);
  z-index: 70;
  grid-template-columns: auto minmax(9.4rem, 10.4vw) clamp(3.15rem, 2.83vw, 3.85rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.texture-debug.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.focus-control.is-hidden,
.shape-control.is-hidden,
.texture-debug.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
}

.final-board {
  position: fixed;
  inset: 0;
  z-index: 18;
  isolation: isolate;
  overflow: hidden;
  color: #dadbd1;
  background: var(--page-bg);
  opacity: 0;
  pointer-events: none;
  transform: scale(1.02);
  transition: opacity 800ms ease, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.final-board::before,
.final-board::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.final-board::before {
  display: none;
}

.final-board::after {
  display: none;
}

.final-board.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.final-board__grid {
  display: none;
}

.final-board__nav {
  position: absolute;
  left: clamp(1.5rem, 1.46vw, 2.1rem);
  top: clamp(6.2rem, 9.83vh, 8rem);
  z-index: 3;
  display: grid;
  gap: clamp(1rem, 1.08vw, 1.55rem);
  width: clamp(12rem, 12.2vw, 17rem);
  padding-top: 0;
  color: rgba(255, 255, 255, 0.72);
  font-family: "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase;
}

.final-board__mark {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: clamp(2.2rem, 2.05vw, 3rem);
  height: clamp(2.2rem, 2.05vw, 3rem);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  background: #202020;
  font-size: clamp(1.25rem, 1.17vw, 1.65rem);
}

.final-board__nav strong {
  display: none;
  font-size: 13px;
  letter-spacing: 0;
}

.final-board__nav nav {
  display: none;
  gap: 18px;
}

.final-board__nav a {
  color: rgba(255, 255, 255, 0.28);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.final-board__nav a:first-child,
.final-board__nav a:hover {
  color: rgba(255, 255, 255, 0.82);
}

.micro-nav {
  position: absolute;
  left: var(--layout-left);
  top: 79.5vh;
  z-index: 5;
  display: grid;
  grid-template-columns:
    var(--nav-icon-track)
    var(--nav-icon-track)
    clamp(4.2rem, 4.05vw, 5.65rem)
    clamp(7.75rem, 7.81vw, 10.9rem);
  column-gap: clamp(0.2rem, 0.3vw, 0.45rem);
  align-items: start;
  padding: 0;
  overflow: visible;
  font-family: "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
}

.micro-nav__item {
  display: grid;
  grid-template-rows: var(--nav-icon-track) auto;
  row-gap: clamp(0.25rem, 0.24vw, 0.38rem);
  justify-items: center;
  min-width: 0;
  overflow: visible;
  color: color-mix(in srgb, var(--theme-fg) 82%, transparent);
  text-align: center;
  text-decoration: none;
}

.micro-nav__graphic {
  position: relative;
  display: grid;
  place-items: end center;
  width: 100%;
  height: var(--nav-icon-track);
  background: transparent;
  border: 0;
  overflow: visible;
}

.micro-nav__graphic::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 0;
  width: var(--micro-nav-glow-width, var(--nav-icon-size));
  height: var(--nav-icon-size);
  background-image: var(--micro-nav-glow-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  filter:
    var(--nav-active-filter)
    drop-shadow(0 0 0.1rem rgba(var(--accent-rgb), 0.84))
    drop-shadow(0 0 0.32rem rgba(var(--accent-rgb), 0.5))
    drop-shadow(0 0 0.62rem rgba(var(--accent-rgb), 0.28))
    drop-shadow(0 0 0.88rem rgba(var(--accent-rgb), 0.14));
  transition: opacity 180ms ease;
}

.micro-nav__graphic::after {
  content: none;
}

.micro-nav__item:nth-child(1) .micro-nav__graphic {
  --micro-nav-glow-image: url("./assets/micrographics/component-110.png");
}

.micro-nav__item:nth-child(2) .micro-nav__graphic {
  --micro-nav-glow-image: url("./assets/micrographics/component-109.png");
}

.micro-nav__item:nth-child(3) .micro-nav__graphic {
  --micro-nav-glow-image: url("./assets/micrographics/component-112.png");
  --micro-nav-glow-width: calc(var(--nav-icon-size) * 1.155);
}

.micro-nav__item:nth-child(4) .micro-nav__graphic {
  --micro-nav-glow-image: url("./assets/micrographics/component-74.png");
  --micro-nav-glow-width: clamp(7.75rem, 7.81vw, 10.9rem);
}

.micro-nav__item.is-active .micro-nav__graphic::before {
  opacity: 0.8;
}

.micro-nav__item--wide .micro-nav__graphic {
  width: 100%;
  overflow: visible;
}

.micro-nav__graphic img {
  position: relative;
  z-index: 2;
  width: auto;
  height: var(--nav-icon-size);
  max-width: 100%;
  object-fit: contain;
  opacity: 0.95;
  filter: var(--theme-icon-filter);
}

.micro-nav__item.is-active .micro-nav__graphic img {
  opacity: 1;
  filter:
    var(--nav-active-filter)
    drop-shadow(0 0 0.08rem rgba(var(--accent-rgb), 0.78))
    drop-shadow(0 0 0.24rem rgba(var(--accent-rgb), 0.44));
}

.micro-nav__item--wide .micro-nav__graphic img {
  width: clamp(7.75rem, 7.81vw, 10.9rem);
  height: auto;
  max-height: var(--nav-icon-size);
}

.micro-nav__label {
  margin-top: 0;
  color: var(--theme-fg);
  font-size: var(--nav-label-size);
  line-height: 1.2;
  letter-spacing: 0;
  text-shadow: none;
}

.terrain-field {
  position: absolute;
  left: 37.45vw;
  top: 4.8vh;
  width: 57.76vw;
  height: 89vh;
  z-index: 2;
  overflow: visible;
  opacity: 0.98;
  border: 0;
  box-shadow: none;
}

.vc-formation-field,
.agentic-model-field {
  position: absolute;
  left: 42.8vw;
  top: 4.8vh;
  z-index: 3;
  width: 55vw;
  height: 88vh;
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 420ms ease, visibility 420ms ease;
}

.vc-formation-field::after,
.agentic-model-field::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 360ms ease, visibility 360ms ease;
}

.vc-formation-field::after,
.agentic-model-field::after {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(235, 250, 255, 0.24), transparent 40%),
    radial-gradient(ellipse at 44% 46%, rgba(255, 72, 54, 0.12), transparent 48%),
    radial-gradient(ellipse at 56% 50%, rgba(65, 230, 255, 0.16), transparent 54%),
    radial-gradient(ellipse at 50% 52%, rgba(88, 154, 255, 0.2), transparent 64%),
    linear-gradient(90deg, rgba(255, 70, 34, 0.09), transparent 20%, transparent 80%, rgba(35, 124, 255, 0.12));
}

.vc-formation-canvas,
.agentic-model-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  position: relative;
  z-index: 1;
  filter: none;
}

/* Holographic flame-ring emitter that replaces the depth "brain" on the
   agentic-vc intro scene. Sits above the (now hidden) WebGL canvas and owns the
   drag-to-rotate gesture. Toggled live from the render loop (.is-live). */
.agentic-holo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: grab;
  touch-action: none;
  transition: opacity 420ms ease, visibility 420ms ease;
}

.agentic-holo.is-live {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.agentic-holo.is-dragging {
  cursor: grabbing;
}

.scene-crt-canvas.scene-crt-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  cursor: default;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.scene-bloom-canvas.scene-bloom-canvas {
  z-index: 0;
  mix-blend-mode: screen;
  filter: blur(9px) saturate(1.3);
  transform: translateZ(0) scale(1.008);
}

.scene-chroma-canvas.scene-chroma-canvas {
  z-index: 2;
  mix-blend-mode: screen;
  filter: none;
}

.scene-chroma-canvas--red.scene-chroma-canvas--red {
  transform: translate3d(0.55px, 0, 0);
}

.scene-chroma-canvas--cyan.scene-chroma-canvas--cyan {
  transform: translate3d(-0.55px, 0, 0);
}

.intro-only.is-yvc-depth-active .vc-formation-field,
.intro-only.is-agentic-vc-active .agentic-model-field,
.intro-only.is-about-active .agentic-model-field {
  -webkit-mask-image:
    radial-gradient(ellipse at 50% 52%, #000 0%, #000 42%, rgba(0, 0, 0, 0.52) 70%, transparent 96%);
  mask-image:
    radial-gradient(ellipse at 50% 52%, #000 0%, #000 42%, rgba(0, 0, 0, 0.52) 70%, transparent 96%);
}

.intro-only.is-why-vc-active:not(.is-yvc-depth-active) .vc-formation-field {
  -webkit-mask-image:
    radial-gradient(ellipse at 50% 52%, #000 0%, #000 48%, rgba(0, 0, 0, 0.58) 73%, transparent 96%);
  mask-image:
    radial-gradient(ellipse at 50% 52%, #000 0%, #000 48%, rgba(0, 0, 0, 0.58) 73%, transparent 96%);
}

.intro-only.is-yvc-depth-active .vc-formation-field::after,
.intro-only.is-agentic-vc-active .agentic-model-field::after,
.intro-only.is-about-active .agentic-model-field::after {
  opacity: 0.62;
  visibility: visible;
}

.intro-only.is-why-vc-active:not(.is-yvc-depth-active) .vc-formation-field::after {
  background:
    radial-gradient(ellipse at 49% 48%, rgba(255, 72, 52, 0.08), transparent 32%),
    radial-gradient(ellipse at 52% 50%, rgba(60, 224, 255, 0.1), transparent 36%),
    radial-gradient(ellipse at 50% 49%, rgba(246, 255, 222, 0.08), transparent 30%);
  opacity: 0.36;
  visibility: visible;
}

.intro-only.is-yvc-depth-active .vc-formation-canvas,
.intro-only.is-agentic-vc-active .agentic-model-canvas,
.intro-only.is-about-active .agentic-model-canvas {
  filter: none;
  image-rendering: pixelated;
}

.intro-only.is-why-vc-active:not(.is-yvc-depth-active) .vc-formation-canvas {
  filter: none;
  image-rendering: pixelated;
}

.intro-only.is-yvc-depth-active.is-vc-depth-color .vc-formation-canvas,
.intro-only.is-agentic-vc-active.is-agentic-depth-color .agentic-model-canvas,
.intro-only.is-about-active .agentic-model-canvas {
  filter: none;
}

.intro-only.is-yvc-depth-active.is-vc-depth-color .vc-formation-field::after,
.intro-only.is-agentic-vc-active.is-agentic-depth-color .agentic-model-field::after,
.intro-only.is-about-active .agentic-model-field::after {
  background:
    radial-gradient(ellipse at 47% 46%, rgba(255, 76, 54, 0.1), transparent 38%),
    radial-gradient(ellipse at 53% 50%, rgba(69, 244, 255, 0.12), transparent 44%),
    radial-gradient(ellipse at 50% 54%, rgba(104, 255, 151, 0.08), transparent 52%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.08), transparent 58%);
  opacity: 0.46 !important;
}

.intro-only.is-agentic-thesis-active .agentic-model-field::after {
  opacity: 0.58;
  visibility: visible;
}

.vc-formation-field.is-dragging .vc-formation-canvas,
.agentic-model-canvas.is-dragging {
  cursor: grabbing;
}

.about-depth-debug,
.vc-depth-debug,
.agentic-depth-debug {
  position: absolute;
  right: clamp(1rem, 1vw, 1.4rem);
  top: clamp(1rem, 1vw, 1.4rem);
  z-index: 8;
  display: grid;
  grid-template-columns: auto minmax(9.4rem, 10.4vw) clamp(3rem, 2.73vw, 3.7rem);
  gap: clamp(0.5rem, 0.49vw, 0.7rem) clamp(0.6rem, 0.59vw, 0.85rem);
  align-items: center;
  max-width: min(22vw, calc(100vw - 2rem));
  padding: clamp(0.7rem, 0.68vw, 0.95rem);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.76);
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(12px);
  font-family: "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(0.75rem, 0.64vw, 0.9rem);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  cursor: grab;
  transition: opacity 240ms ease, visibility 240ms ease, transform 240ms ease;
}

.about-depth-debug.is-dragging,
.vc-depth-debug.is-dragging,
.agentic-depth-debug.is-dragging {
  cursor: grabbing;
}

.depth-debug-minimize {
  grid-column: 3;
  justify-self: end;
  width: clamp(1.25rem, 1.17vw, 1.6rem);
  height: clamp(1.15rem, 1.07vw, 1.45rem);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.08);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.depth-debug-minimize:hover,
.depth-debug-minimize:focus-visible {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.48);
  outline: none;
}

.about-depth-debug.is-minimized,
.vc-depth-debug.is-minimized,
.agentic-depth-debug.is-minimized {
  display: flex;
  width: auto;
  min-width: 0;
  padding: clamp(0.4rem, 0.39vw, 0.55rem);
}

.about-depth-debug.is-minimized > :not(.depth-debug-minimize),
.vc-depth-debug.is-minimized > :not(.depth-debug-minimize),
.agentic-depth-debug.is-minimized > :not(.depth-debug-minimize) {
  display: none;
}

.about-depth-debug input,
.vc-depth-debug input,
.agentic-depth-debug input,
.about-depth-debug .checkbox-control,
.vc-depth-debug .checkbox-control,
.agentic-depth-debug .checkbox-control,
.depth-debug-minimize {
  cursor: auto;
}

.about-depth-debug > label:not(.checkbox-control),
.vc-depth-debug > label:not(.checkbox-control),
.agentic-depth-debug > label:not(.checkbox-control) {
  cursor: grab;
}

.intro-only.is-about-active .about-depth-debug,
.intro-only.is-yvc-depth-active .vc-depth-debug,
.intro-only.is-agentic-vc-active .agentic-depth-debug {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.about-depth-debug,
.vc-depth-debug,
.agentic-depth-debug {
  display: none !important;
}

.about-depth-debug input[type="range"],
.vc-depth-debug input[type="range"],
.agentic-depth-debug input[type="range"] {
  width: 100%;
}

.about-depth-debug output,
.vc-depth-debug output,
.agentic-depth-debug output {
  min-width: clamp(2.4rem, 2.15vw, 3rem);
  text-align: right;
}

.about-depth-debug .checkbox-control,
.vc-depth-debug .checkbox-control,
.agentic-depth-debug .checkbox-control {
  grid-column: 1 / -1;
  justify-self: start;
}

.intro-only.is-thesis-active .terrain-field {
  opacity: 0;
  visibility: hidden;
}

.intro-only.is-content-active .terrain-field {
  opacity: 0.98;
  visibility: visible;
}

.intro-only.is-about-active .terrain-field {
  opacity: 0;
  visibility: hidden;
}

.intro-only.is-why-vc-active .terrain-field {
  opacity: 0;
  visibility: hidden;
}

.intro-only.is-yvc-depth-active .terrain-field {
  opacity: 0;
  visibility: hidden;
}

.intro-only.is-agentic-vc-active .terrain-field {
  opacity: 0;
  visibility: hidden;
}

.intro-only.is-why-vc-active .vc-formation-field,
.intro-only.is-yvc-depth-active .vc-formation-field {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.intro-only.is-agentic-vc-active .agentic-model-field {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.intro-only.is-about-active .agentic-model-field {
  left: 39vw;
  top: 4.8vh;
  width: 58vw;
  height: 88vh;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.intro-only.is-agentic-orbit-active .agentic-model-field {
  left: 37.5vw;
  top: 1.5vh;
  width: 62vw;
  height: 96vh;
  -webkit-mask-image: none;
  mask-image: none;
}

.intro-only.is-agentic-orbit-active .agentic-model-field::after {
  background:
    radial-gradient(ellipse at 50% 56%, rgba(235, 250, 255, 0.22), transparent 36%),
    radial-gradient(ellipse at 48% 56%, rgba(83, 156, 255, 0.18), transparent 48%),
    radial-gradient(ellipse at 54% 58%, rgba(56, 226, 255, 0.08), transparent 58%),
    radial-gradient(ellipse at 50% 64%, rgba(255, 255, 255, 0.08), transparent 66%);
  opacity: 0.58;
  visibility: visible;
}

.intro-only.is-agentic-evidence-active .agentic-model-field::after {
  opacity: 0;
  visibility: hidden;
}

.intro-only.is-agentic-orbit-active .agentic-model-canvas {
  filter:
    drop-shadow(1px 0 0 rgba(255, 72, 52, 0.32))
    drop-shadow(-1px 0 0 rgba(65, 230, 255, 0.36))
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.34))
    drop-shadow(0 0 11px rgba(210, 250, 255, 0.16));
  image-rendering: pixelated;
}

html[data-theme="light"] .vc-formation-canvas,
html[data-theme="light"] .agentic-model-canvas,
html[data-theme="light"] .thesis-cartridge-canvas {
  filter:
    brightness(0.82)
    contrast(1.12)
    saturate(1.08)
    drop-shadow(0 0 4px rgba(18, 18, 18, 0.12))
    drop-shadow(0 0 12px rgba(18, 18, 18, 0.06));
}

html[data-theme="light"] .intro-only.is-yvc-depth-active .vc-formation-canvas,
html[data-theme="light"] .intro-only.is-agentic-vc-active .agentic-model-canvas,
html[data-theme="light"] .intro-only.is-about-active .agentic-model-canvas,
html[data-theme="light"] .intro-only.is-why-vc-active:not(.is-yvc-depth-active) .vc-formation-canvas,
html[data-theme="light"] .intro-only.is-yvc-depth-active.is-vc-depth-color .vc-formation-canvas,
html[data-theme="light"] .intro-only.is-agentic-vc-active.is-agentic-depth-color .agentic-model-canvas {
  filter:
    brightness(0.82)
    contrast(1.12)
    saturate(1.08)
    drop-shadow(0 0 4px rgba(18, 18, 18, 0.12))
    drop-shadow(0 0 12px rgba(18, 18, 18, 0.06));
  image-rendering: pixelated;
}

html[data-theme="light"] .intro-only.is-agentic-orbit-active .agentic-model-canvas {
  filter:
    brightness(0.84)
    contrast(1.12)
    saturate(1.08)
    drop-shadow(1px 0 0 rgba(18, 18, 18, 0.12))
    drop-shadow(-1px 0 0 rgba(18, 18, 18, 0.1))
    drop-shadow(0 0 4px rgba(18, 18, 18, 0.12))
    drop-shadow(0 0 12px rgba(18, 18, 18, 0.06));
}

html[data-theme="light"] .scene-bloom-canvas.scene-bloom-canvas,
html[data-theme="light"] .scene-chroma-canvas.scene-chroma-canvas {
  mix-blend-mode: normal;
}

html[data-theme="light"] .scene-bloom-canvas.scene-bloom-canvas {
  filter: blur(7px) brightness(0.86) contrast(1.04) saturate(1.02);
}

.intro-only.is-agentic-orbit-active .agentic-depth-debug {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.why-vc-scroll-cue {
  position: absolute;
  left: var(--layout-left);
  top: 74vh;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: var(--copy-width);
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms ease, visibility 260ms ease, transform 260ms ease;
}

.why-vc-scroll-cue__text {
  color: rgba(255, 255, 255, 0.64);
  font-family: "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.3rem, 1.37vw, 1.85rem);
  line-height: 1;
  letter-spacing: 0;
}

.content-page--why-vc.is-active .why-vc-scroll-cue {
  opacity: 0.82;
  visibility: visible;
}

.intro-only.is-yvc-depth-active .why-vc-scroll-cue,
.intro-only.is-agentic-vc-active .why-vc-scroll-cue {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}

.content-page--why-vc.is-layer-blockchain-active .why-vc-scroll-cue,
.content-page--why-vc.is-layer-ai-active .why-vc-scroll-cue,
.content-page--why-vc.is-layer-ar-active .why-vc-scroll-cue,
.content-page--why-vc.is-layer-ce1-active .why-vc-scroll-cue {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}

.why-vc-scroll-indicator {
  display: flex;
  align-items: center;
  gap: clamp(0.45rem, 0.49vw, 0.7rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.why-vc-scroll-cue.is-cue-ready .why-vc-scroll-indicator {
  opacity: 1;
  visibility: visible;
}

.mobile-progress-cue {
  display: none;
}

.mobile-progress-overlay {
  display: none;
}

.why-vc-scroll-indicator img,
.why-vc-layer-scroll-indicator img,
.agentic-vc-scroll-cue img {
  width: var(--scroll-arrow-size);
  height: var(--scroll-arrow-size);
  object-fit: contain;
  opacity: 0.025;
  filter:
    invert(1)
    brightness(0.92)
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.06));
  animation: why-vc-scroll-glow 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.why-vc-scroll-indicator img:nth-child(2),
.why-vc-layer-scroll-indicator img:nth-child(2),
.agentic-vc-scroll-cue img:nth-child(2) {
  animation-delay: 0.24s;
}

.why-vc-scroll-indicator img:nth-child(3),
.why-vc-layer-scroll-indicator img:nth-child(3),
.agentic-vc-scroll-cue img:nth-child(3) {
  animation-delay: 0.48s;
}

@keyframes why-vc-scroll-glow {
  0%,
  100% {
    opacity: 0.025;
    filter:
      invert(1)
      brightness(0.9)
      drop-shadow(0 0 1px rgba(255, 255, 255, 0.04));
  }

  18% {
    opacity: 1;
    filter:
      invert(1)
      brightness(2.25)
      drop-shadow(0 0 2px rgba(255, 255, 255, 0.82))
      drop-shadow(0 0 9px rgba(255, 255, 255, 0.58))
      drop-shadow(0 0 18px rgba(255, 255, 255, 0.34));
  }

  44% {
    opacity: 0.025;
    filter:
      invert(1)
      brightness(0.9)
      drop-shadow(0 0 1px rgba(255, 255, 255, 0.04));
  }
}

.content-page--why-vc .content-page__title,
.content-page--why-vc .content-page__copy {
  transition:
    opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 520ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.content-page--why-vc.is-layer-blockchain-active .content-page__title,
.content-page--why-vc.is-layer-blockchain-active .content-page__copy,
.content-page--why-vc.is-layer-ai-active .content-page__title,
.content-page--why-vc.is-layer-ai-active .content-page__copy,
.content-page--why-vc.is-layer-ar-active .content-page__title,
.content-page--why-vc.is-layer-ar-active .content-page__copy,
.content-page--why-vc.is-layer-ce1-active .content-page__title,
.content-page--why-vc.is-layer-ce1-active .content-page__copy {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-18px);
}

.why-vc-layer-detail {
  position: absolute;
  inset: 0;
  z-index: 7;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(20px);
  transition:
    opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 620ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.content-page--why-vc.is-layer-blockchain-active .why-vc-layer-detail--blockchain,
.content-page--why-vc.is-layer-ai-active .why-vc-layer-detail--ai,
.content-page--why-vc.is-layer-ar-active .why-vc-layer-detail--ar,
.content-page--why-vc.is-layer-ce1-active .why-vc-layer-detail--ce1 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.why-vc-layer-detail__title {
  position: absolute;
  left: var(--layout-left);
  top: var(--title-top);
  width: var(--title-width);
  margin: 0;
  color: #ffffff;
  font-family: "OffBitBar", "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--detail-title-size);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: 0;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}

.why-vc-layer-detail__title-accent {
  color: #ED9142;
  text-shadow:
    0 0 4px rgba(237, 145, 66, 0.62),
    0 0 14px rgba(237, 145, 66, 0.24);
}

.why-vc-layer-detail__title-accent--interface {
  color: #38E2FF;
  text-shadow:
    0 0 4px rgba(56, 226, 255, 0.62),
    0 0 14px rgba(56, 226, 255, 0.24);
}

.why-vc-layer-detail__title-accent--productivity {
  color: #4AB281;
  text-shadow:
    0 0 4px rgba(74, 178, 129, 0.62),
    0 0 14px rgba(74, 178, 129, 0.24);
}

.why-vc-layer-detail__copy {
  position: absolute;
  left: var(--layout-left);
  top: var(--detail-copy-top);
  width: var(--copy-width);
  margin: 0;
  color: var(--theme-copy);
  font-family: "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--body-copy-size);
  font-weight: 500;
  line-height: 1.13;
  letter-spacing: 0;
  transform: translateY(-50%);
}

.why-vc-layer-scroll-indicator {
  position: absolute;
  left: var(--layout-left);
  top: 72vh;
  display: flex;
  align-items: center;
  gap: clamp(0.45rem, 0.49vw, 0.7rem);
}

.intro-only.is-thesis-active .intro-title {
  opacity: 0 !important;
  visibility: hidden;
}

.intro-only.is-content-active .intro-title {
  opacity: 0 !important;
  visibility: hidden;
}

.content-page {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 420ms ease, visibility 420ms ease;
}

.intro-only.is-content-active .content-page.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

.thesis-page {
  position: absolute;
  inset: 0;
  z-index: 4;
  --thesis-card-transition-ms: 640ms;
  overflow: hidden;
  /* Belt-and-suspenders with the wheel handler: stop the horizontal trackpad
     swipe from triggering Safari's swipe-to-go-back while browsing the deck. */
  overscroll-behavior-x: none;
  background: var(--page-bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 420ms ease, visibility 420ms ease;
}

.thesis-page:focus {
  outline: none;
}

.thesis-page::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 26;
  display: block;
  height: var(--thesis-overview-top-fade-height);
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(var(--page-bg-rgb), 0.98) 0%,
    rgba(var(--page-bg-rgb), 0.78) 46%,
    rgba(var(--page-bg-rgb), 0) 100%
  );
}

.intro-only.is-thesis-active .thesis-page {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.content-page__title,
.thesis-page__title {
  position: absolute;
  left: var(--layout-left);
  top: var(--title-top);
  width: var(--title-width);
  margin: 0;
  color: var(--theme-fg);
  font-family: "OffBitBar", "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--page-title-size);
  font-weight: 500;
  line-height: 0.82;
  text-shadow: 0 0 4px var(--theme-text-glow);
}

.content-page__copy,
.thesis-page__copy {
  position: absolute;
  left: var(--layout-left);
  top: var(--copy-top);
  width: var(--copy-width);
  margin: 0;
  color: var(--theme-copy);
  font-family: "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(20px, 1.56vw, 30px);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: 0;
  transform: translateY(-50%);
}

.intro-only.is-thesis-active .thesis-page__copy {
  opacity: 0;
  pointer-events: none;
}

.content-page--agentic-vc .content-page__copy {
  width: var(--copy-width);
  font-size: var(--body-copy-size);
  line-height: 1.13;
}

.content-page--why-vc .content-page__copy {
  width: var(--copy-width);
  font-size: var(--body-copy-size);
  line-height: 1.13;
}

.about-socials {
  position: absolute;
  left: var(--layout-left);
  top: min(
    calc(var(--copy-top) + clamp(12.5rem, 18vh, 16rem)),
    calc(79.5vh - clamp(5.25rem, 10.3vh, 6.75rem))
  );
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.55rem, 1vw, 0.82rem);
  width: max-content;
  max-width: min(42vw, 16rem);
  padding: clamp(0.58rem, 1vw, 0.76rem) 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  --about-social-y: 0.45rem;
  transform: translateY(var(--about-social-y));
  transition:
    opacity 360ms ease,
    visibility 360ms ease,
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.about-socials.is-socials-ready {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  --about-social-y: 0;
}

.about-socials__link {
  display: grid;
  place-items: center;
  width: clamp(1.85rem, 2.9vw, 2.38rem);
  height: clamp(1.85rem, 2.9vw, 2.38rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition:
    filter 180ms ease,
    transform 180ms ease;
}

.about-socials__link:hover,
.about-socials__link:focus-visible {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.22));
  transform: translateY(-1px);
  outline: none;
}

.about-socials__link img {
  display: block;
  width: 62%;
  height: 62%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.14))
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.08));
}

.vip-letter--value {
  color: #B27A4A;
}

.vip-letter--interface {
  color: #38E2FF;
}

.vip-letter--productivity {
  color: #4AB281;
}

.agentic-vc-scroll-cue {
  position: absolute;
  left: var(--layout-left);
  top: 75vh;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: clamp(0.45rem, 0.49vw, 0.7rem);
  opacity: 0.82;
  visibility: visible;
}

.agentic-vc-layer-detail {
  position: absolute;
  inset: 0;
  z-index: 7;
  font-family: "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(20px);
  transition:
    opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 620ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.agentic-vc-layer-detail__title {
  position: absolute;
  left: var(--layout-left);
  top: var(--title-top);
  width: var(--title-width);
  margin: 0;
  color: #fff;
  font-family: "OffBitBar", "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--page-title-size);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: 0;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}

.agentic-vc-layer-detail__copy {
  position: absolute;
  left: var(--layout-left);
  top: var(--detail-copy-top);
  width: var(--copy-width);
  margin: 0;
  color: var(--theme-copy);
  font-family: "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--body-copy-size);
  font-weight: 500;
  line-height: 1.13;
  letter-spacing: 0;
  transform: translateY(-50%);
}

.agentic-evidence-preview {
  position: absolute;
  right: 3.4vw;
  top: 50%;
  width: min(55vw, 980px);
  min-height: 520px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.96;
  perspective: 1100px;
  transform: translateY(-50%);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  --evidence-rot-x: 4deg;
  --evidence-rot-y: -12deg;
  filter:
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.1))
    drop-shadow(2px 0 0 rgba(56, 226, 255, 0.28))
    drop-shadow(-2px 0 0 rgba(255, 76, 66, 0.2));
}

.agentic-evidence-preview.is-dragging {
  cursor: grabbing;
}

.agentic-evidence-preview__scene {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(22px, 3vw, 54px);
  transform:
    rotateX(var(--evidence-rot-x))
    rotateY(var(--evidence-rot-y))
    rotateZ(1.2deg);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transition: transform 180ms ease-out;
}

.agentic-evidence-preview.is-dragging .agentic-evidence-preview__scene {
  transition: none;
}

.agentic-evidence-preview__frame {
  width: min(31vw, 550px);
  max-width: 550px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.3);
  box-shadow:
    0 0 0 1px rgba(56, 226, 255, 0.08),
    0 0 32px rgba(255, 255, 255, 0.08);
  clip-path: inset(0 round 16px);
  contain: paint;
  transform: translateZ(32px);
  transform-style: preserve-3d;
}

.agentic-evidence-preview__note {
  position: relative;
  width: clamp(230px, 17vw, 340px);
  min-height: 210px;
  padding: 24px 24px 22px;
  color: rgba(255, 255, 255, 0.78);
  font-family: "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  background: transparent;
  transform: translateZ(-18px) translateY(26px);
  transform-style: preserve-3d;
  --detail-line-color: #ff6e66;
  --detail-glow: 0 0 12px rgba(255, 110, 102, 0.42);
  --detail-filter:
    drop-shadow(0 0 2px rgba(255, 110, 102, 0.72))
    drop-shadow(0 0 7px rgba(255, 82, 72, 0.48))
    drop-shadow(0 0 16px rgba(255, 64, 52, 0.34));
}

.agentic-evidence-preview__note::before,
.agentic-evidence-preview__note::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  height: 1px;
  background: rgba(255, 110, 102, 0.46);
  box-shadow: var(--detail-glow);
  filter: var(--detail-filter);
}

.agentic-evidence-preview__note::before {
  top: 0;
}

.agentic-evidence-preview__note::after {
  bottom: 0;
}

.agentic-evidence-preview__corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--detail-line-color);
  filter: var(--detail-filter);
  pointer-events: none;
}

.agentic-evidence-preview__corner--top-left {
  top: 0;
  left: 0;
  border-top: 1.5px solid;
  border-left: 1.5px solid;
}

.agentic-evidence-preview__corner--top-right {
  top: 0;
  right: 0;
  border-top: 1.5px solid;
  border-right: 1.5px solid;
}

.agentic-evidence-preview__corner--bottom-left {
  bottom: 0;
  left: 0;
  border-bottom: 1.5px solid;
  border-left: 1.5px solid;
}

.agentic-evidence-preview__corner--bottom-right {
  right: 0;
  bottom: 0;
  border-right: 1.5px solid;
  border-bottom: 1.5px solid;
}

.agentic-evidence-preview__eyebrow,
.agentic-evidence-preview__meta {
  display: block;
  color: #ff6e66;
  font-family: "OffBitBarBold", "OffBit", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(18px, 1.35vw, 25px);
  line-height: 0.9;
  text-transform: uppercase;
  text-shadow: 0 0 7px rgba(255, 110, 102, 0.56);
}

.agentic-evidence-preview__note p {
  margin: 22px 0 20px;
  color: rgba(229, 229, 229, 0.72);
  font-size: clamp(16px, 1.08vw, 21px);
  line-height: 1.16;
  letter-spacing: 0;
}

.agentic-evidence-preview__meta {
  color: rgba(255, 255, 255, 0.56);
  font-family: "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(14px, 0.9vw, 18px);
  text-shadow: none;
}

.agentic-evidence-preview .twitter-tweet {
  width: 100% !important;
  max-width: 550px !important;
  margin: 0 !important;
}

.agentic-evidence-preview iframe {
  display: block !important;
  width: 100% !important;
  max-width: 550px !important;
  border-radius: 16px !important;
  pointer-events: none !important;
}

.agentic-evidence-preview blockquote {
  margin: 0;
  pointer-events: none;
}

.agentic-evidence-preview blockquote a {
  display: block;
  padding: 24px;
  color: rgba(255, 255, 255, 0.82);
  font-family: "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-size: 22px;
  text-decoration: none;
}

.intro-only.is-agentic-orbit-active .content-page--agentic-vc .content-page__title,
.intro-only.is-agentic-orbit-active .content-page--agentic-vc .content-page__copy,
.intro-only.is-agentic-orbit-active .content-page--agentic-vc .agentic-vc-scroll-cue {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
}

.intro-only.is-agentic-orbit-active .content-page--agentic-vc.is-agentic-layer-architecture-active .agentic-vc-layer-detail--architecture,
.intro-only.is-agentic-orbit-active .content-page--agentic-vc.is-agentic-layer-data-active .agentic-vc-layer-detail--data,
.intro-only.is-agentic-orbit-active .content-page--agentic-vc.is-agentic-layer-thesis-active .agentic-vc-layer-detail--thesis,
.intro-only.is-agentic-orbit-active .content-page--agentic-vc.is-agentic-layer-evidence-active .agentic-vc-layer-detail--evidence {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transform: translateY(0);
}

.agentic-thesis-graphic {
  position: absolute;
  right: 4.4vw;
  top: 8vh;
  z-index: 6;
  width: min(46vw, 820px);
  height: 82vh;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 26px, 0) perspective(900px) rotateY(-4deg) rotateX(2deg);
  transform-style: preserve-3d;
  transition:
    opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 620ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

.intro-only.is-agentic-thesis-active .agentic-thesis-graphic {
  opacity: 0;
  visibility: hidden;
}

.intro-only.is-agentic-thesis-active .agentic-model-field {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.intro-only.is-agentic-evidence-active .agentic-model-field {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.agentic-thesis-document {
  position: absolute;
  left: 22%;
  top: 5%;
  width: 44%;
  height: 78%;
  transform: rotateZ(3deg) skewY(1deg);
  transform-style: preserve-3d;
}

.agentic-thesis-document::before,
.agentic-thesis-document::after,
.agentic-thesis-document__page {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.06);
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.18),
    0 0 20px rgba(56, 226, 255, 0.05);
}

.agentic-thesis-document::before {
  transform: translate3d(-18px, 18px, -28px);
  opacity: 0.72;
}

.agentic-thesis-document::after {
  transform: translate3d(18px, -18px, 28px);
  opacity: 0.5;
}

.agentic-thesis-document__page {
  padding: 10% 8%;
}

.agentic-thesis-document__page h3 {
  margin: 0 0 14%;
  color: rgba(255, 255, 255, 0.92);
  font-family: "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(28px, 3.2vw, 58px);
  font-weight: 500;
  line-height: 0.95;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.54),
    2px 0 0 rgba(255, 72, 52, 0.14),
    -2px 0 0 rgba(65, 230, 255, 0.18);
}

.agentic-thesis-document__page span {
  display: block;
  height: 1px;
  margin: 0 0 9%;
  background: rgba(255, 255, 255, 0.32);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.18);
}

.agentic-thesis-document__page span:nth-child(3) { width: 74%; }
.agentic-thesis-document__page span:nth-child(4) { width: 94%; }
.agentic-thesis-document__page span:nth-child(5) { width: 58%; }
.agentic-thesis-document__page span:nth-child(6) { width: 86%; }

.agentic-thesis-badge {
  position: absolute;
  min-width: 12.4vw;
  padding: 18px 28px 20px;
  border: 1px solid rgba(237, 145, 66, 0.8);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.92);
  color: rgba(255, 255, 255, 0.94);
  font-family: "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(26px, 3vw, 58px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: 0;
  text-shadow:
    0 0 5px rgba(255, 255, 255, 0.42),
    2px 0 0 rgba(255, 72, 52, 0.18),
    -2px 0 0 rgba(65, 230, 255, 0.22);
  box-shadow:
    0 0 10px rgba(237, 145, 66, 0.16),
    inset 0 0 18px rgba(237, 145, 66, 0.04);
  transform-style: preserve-3d;
}

.agentic-thesis-badge--conviction {
  right: 3%;
  top: 18%;
  transform: rotateZ(4deg) translateZ(52px);
}

.agentic-thesis-badge--signals {
  right: 0;
  top: 46%;
  transform: rotateZ(5deg) translateZ(72px);
}

.agentic-thesis-badge--counter {
  left: -2%;
  top: 58%;
  transform: rotateZ(3deg) translateZ(64px);
}

.agentic-thesis-badge--supporting {
  left: -2%;
  bottom: 13%;
  border-color: rgba(155, 108, 255, 0.82);
  box-shadow:
    0 0 10px rgba(155, 108, 255, 0.18),
    inset 0 0 18px rgba(155, 108, 255, 0.04);
  color: rgba(216, 204, 255, 0.96);
  transform: rotateZ(-3deg) translateZ(58px);
}

.agentic-thesis-badge--market {
  right: 3%;
  bottom: 9%;
  transform: rotateZ(5deg) translateZ(48px);
}

.agentic-orbit-label,
.agentic-flow-copy {
  position: absolute;
  z-index: 4;
  font-family: "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  line-height: 1.08;
  letter-spacing: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 420ms ease, visibility 420ms ease;
}

.agentic-orbit-label h3 {
  margin: 0 0 8px;
  font-family: "OffBitBarBold", "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(20px, 1.28vw, 28px);
  font-weight: 900;
  line-height: 1;
}

.agentic-orbit-label p {
  margin: 0;
  color: rgba(225, 231, 236, 0.7);
  font-size: clamp(17px, 1.05vw, 22px);
  font-weight: 500;
}

.agentic-orbit-label--data {
  left: 0.5%;
  top: 49%;
  color: #7cecff;
  text-shadow: 0 0 10px rgba(124, 236, 255, 0.42);
}

.agentic-orbit-label--thesis {
  left: 51%;
  top: 3%;
  color: #ffd85a;
  text-shadow: 0 0 10px rgba(255, 216, 90, 0.38);
}

.agentic-orbit-label--evidence {
  right: 1.5%;
  top: 46%;
  color: #baff70;
  text-shadow: 0 0 10px rgba(186, 255, 112, 0.4);
}

.agentic-orbit-label--opportunities {
  left: 54%;
  bottom: 1%;
  color: #b887ff;
  text-shadow: 0 0 10px rgba(184, 135, 255, 0.38);
}

.agentic-orbit-label--brain {
  left: 50%;
  top: 50%;
  color: #ffffff;
  text-align: center;
  text-shadow:
    0 0 5px rgba(255, 255, 255, 0.7),
    0 0 18px rgba(255, 255, 255, 0.2);
}

.agentic-flow-copy {
  color: rgba(227, 232, 236, 0.62);
  font-size: clamp(17px, 1.02vw, 21px);
  font-weight: 500;
  text-shadow: 0 0 9px rgba(255, 255, 255, 0.2);
}

.agentic-flow-copy--questions {
  left: 21%;
  top: 30%;
  color: rgba(124, 236, 255, 0.78);
  text-shadow: 0 0 9px rgba(124, 236, 255, 0.3);
}

.agentic-flow-copy--seeks {
  right: 15.5%;
  top: 31%;
  color: rgba(255, 216, 90, 0.76);
  text-shadow: 0 0 9px rgba(255, 216, 90, 0.26);
}

.agentic-flow-copy--mutates {
  left: 52%;
  top: 43%;
}

.agentic-flow-copy--actions {
  left: 38%;
  bottom: 27%;
}

.agentic-flow-copy--drives {
  left: 18%;
  bottom: 18%;
  color: rgba(184, 135, 255, 0.76);
  text-shadow: 0 0 9px rgba(184, 135, 255, 0.3);
}

.agentic-flow-copy--informs {
  right: 14%;
  bottom: 17%;
  color: rgba(186, 255, 112, 0.76);
  text-shadow: 0 0 9px rgba(186, 255, 112, 0.28);
}

.intro-only.is-agentic-orbit-active .agentic-orbit-label,
.intro-only.is-agentic-orbit-active .agentic-flow-copy {
  opacity: 1;
  visibility: visible;
}

.intro-only.is-agentic-data-active .agentic-orbit-label,
.intro-only.is-agentic-data-active .agentic-flow-copy,
.intro-only.is-agentic-thesis-active .agentic-orbit-label,
.intro-only.is-agentic-thesis-active .agentic-flow-copy {
  opacity: 0;
  visibility: hidden;
}

.thesis-page__status {
  display: none;
}

.thesis-cartridge-canvas {
  position: absolute;
  left: 36.5vw;
  top: 13vh;
  z-index: 4;
  display: none;
  width: 58vw;
  height: 75vh;
  pointer-events: auto;
  cursor: default;
}

/* WebGL coverflow canvas (Three.js). Fills the section; the DOM rack is hidden. */
.thesis-coverflow-3d {
  position: absolute;
  inset: 0;
  z-index: 22;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease;
}

.thesis-page.is-webgl-coverflow .thesis-grid {
  display: none;
}

/* The WebGL canvas is an opaque backdrop (z 22); keep the heading above it. */
.thesis-page.is-webgl-coverflow .thesis-page__title {
  z-index: 23;
}

/* Intro copy just under the heading, over the coverflow: a full-size frosted panel
   framed by glowing white corner brackets that launch in like the article legend. */
.thesis-page.is-webgl-coverflow .thesis-page__copy {
  opacity: 1;
  z-index: 23;
  pointer-events: none;
  top: calc(var(--title-top) + var(--page-title-size) * 0.82 + 1.4rem);
  transform: none;
  padding: 1.05rem 1.2rem;
  background: rgba(var(--page-bg-rgb), 0.42);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition:
    opacity 360ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 360ms ease;
  --cc: #ffffff;
  --ccs: 18px;
  --ccw: 1.5px;
  --cglow:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.72))
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.42))
    drop-shadow(0 0 16px rgba(255, 255, 255, 0.24));
}

/* Collapsed: the deck has scrolled off its home cover. The copy lifts away and
   fades so the covers below have unobstructed room (eases back at home). */
.thesis-page.is-webgl-coverflow.is-copy-collapsed .thesis-page__copy {
  opacity: 0;
  transform: translateY(-14px) scale(0.98);
  filter: blur(2px);
  pointer-events: none;
}

/* Four corner brackets. Default = full (end state); they draw in during launch. */
.thesis-page.is-webgl-coverflow .thesis-page__copy::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--cc), var(--cc)) left top no-repeat,
    linear-gradient(var(--cc), var(--cc)) left top no-repeat,
    linear-gradient(var(--cc), var(--cc)) right top no-repeat,
    linear-gradient(var(--cc), var(--cc)) right top no-repeat,
    linear-gradient(var(--cc), var(--cc)) left bottom no-repeat,
    linear-gradient(var(--cc), var(--cc)) left bottom no-repeat,
    linear-gradient(var(--cc), var(--cc)) right bottom no-repeat,
    linear-gradient(var(--cc), var(--cc)) right bottom no-repeat;
  background-size:
    var(--ccs) var(--ccw), var(--ccw) var(--ccs),
    var(--ccs) var(--ccw), var(--ccw) var(--ccs),
    var(--ccs) var(--ccw), var(--ccw) var(--ccs),
    var(--ccs) var(--ccw), var(--ccw) var(--ccs);
  filter: var(--cglow);
}

/* Seed scan line (legend-style): only shown during launch. */
.thesis-page.is-webgl-coverflow .thesis-page__copy::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--ccw);
  background: var(--cc);
  filter: var(--cglow);
  transform: scaleX(0);
  opacity: 0;
  pointer-events: none;
}

/* Launch sequence, driven from JS (the .is-launching class is added on the exact
   entry frame, so it stays in sync with the deck wave and never plays off-screen):
   the seed line sweeps across, then the corner brackets draw in. The copy itself
   then types in letter-by-letter (handled by the JS typewriter, after a hold). */
.thesis-page.is-webgl-coverflow .thesis-page__copy.is-launching::after {
  animation: thesisCopySeed 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.thesis-page.is-webgl-coverflow .thesis-page__copy.is-launching::before {
  animation: thesisCopyCorners 560ms cubic-bezier(0.16, 1, 0.3, 1) 380ms both;
}

@keyframes thesisCopySeed {
  0% { opacity: 1; transform: scaleX(0); }
  45% { opacity: 1; transform: scaleX(1); }
  70% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(0.02); }
}

@keyframes thesisCopyCorners {
  from {
    background-size:
      0 var(--ccw), var(--ccw) 0,
      0 var(--ccw), var(--ccw) 0,
      0 var(--ccw), var(--ccw) 0,
      0 var(--ccw), var(--ccw) 0;
  }
  to {
    background-size:
      var(--ccs) var(--ccw), var(--ccw) var(--ccs),
      var(--ccs) var(--ccw), var(--ccw) var(--ccs),
      var(--ccs) var(--ccw), var(--ccw) var(--ccs),
      var(--ccs) var(--ccw), var(--ccw) var(--ccs);
  }
}

.thesis-grid {
  --thesis-cover-width: clamp(10rem, 16vw, 21rem);
  --thesis-cover-depth: clamp(0.5rem, 0.92vw, 1.2rem);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 22;
  display: block;
  width: 100vw;
  height: 100vh;
  perspective: 1500px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  pointer-events: none;
}

.thesis-card {
  --cover-x: 30vw;
  --cover-y: 50vh;
  --cover-z: 0px;
  --cover-ry: -18deg;
  --cover-rz: 0deg;
  --cover-scale: 1;
  --cover-blur: 0px;
  --cover-opacity: 1;
  --cover-z-index: 1;
  --cover-spine-left: auto;
  --cover-spine-right: 100%;
  --cover-spine-origin: right center;
  --cover-spine-rotate: -90deg;
  --cover-spine-shadow: inset 16px 0 20px rgba(0, 0, 0, 0.34);
  --cover-bg: #131313;
  --cover-fg: #f4f4ec;
  --cover-side: #34342f;
  --cover-accent: var(--accent);
  position: absolute;
  left: 0;
  top: 0;
  z-index: var(--cover-z-index);
  display: block;
  min-width: 0;
  width: var(--thesis-cover-width);
  height: auto;
  aspect-ratio: 0.44;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: var(--cover-opacity);
  color: var(--cover-fg);
  text-decoration: none;
  transform:
    translate3d(var(--cover-x), var(--cover-y), var(--cover-z))
    translate(-50%, -50%)
    rotateY(var(--cover-ry))
    rotateZ(var(--cover-rz))
    scale(var(--cover-scale));
  transform-origin: center center;
  transform-style: preserve-3d;
  container-type: inline-size;
  cursor: pointer;
  pointer-events: auto;
  transition:
    opacity 540ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 560ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 540ms cubic-bezier(0.16, 1, 0.3, 1);
  /* NB: do not put `opacity` in will-change — it forces a flattened rendering
     context that breaks backface-visibility culling on the front/back faces. */
  will-change: transform;
}

/* While the rAF/drag is driving the rack, JS supplies the smoothing per frame —
   the CSS transform transition must step aside or it lags a frame behind. */
.thesis-grid.is-coverflow-driving .thesis-card {
  transition:
    opacity 540ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 540ms cubic-bezier(0.16, 1, 0.3, 1);
}

.thesis-card::before,
.thesis-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Back panel of the cover. Hidden from the back so it doesn't occlude the face
   content when a cover turns around. */
.thesis-card::before {
  content: "";
  inset: 0;
  z-index: -1;
  display: block;
  background: color-mix(in srgb, var(--cover-side) 86%, black);
  box-shadow: none;
  overflow: hidden;
  transform: translateZ(calc(var(--thesis-cover-depth) * -1));
  mix-blend-mode: normal;
  backface-visibility: hidden;
}

/* Front face (gradient + accent + solid base). Coplanar with the art/text so the
   layers don't reorder when a cover is seen from the back. */
.thesis-card::after {
  z-index: 1;
  /* Overlap the side spines by 1px (left/right only) to kill the hairline seam
     where the face meets the perpendicular spine. No vertical overlap, so the
     face doesn't poke out past the top/bottom. */
  inset: 0 -1px;
  background:
    radial-gradient(circle at 24% 24%, color-mix(in srgb, var(--cover-accent) 32%, transparent) 0 18%, transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--cover-bg) 82%, white), var(--cover-bg) 58%, color-mix(in srgb, var(--cover-bg) 72%, black)),
    var(--cover-bg);
  filter: var(--cover-face-filter, none);
  opacity: 1;
  transform: translateZ(0.1px);
}

.thesis-card__edge {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: block;
  width: var(--thesis-cover-depth);
  height: 100%;
  pointer-events: none;
  background: color-mix(in srgb, var(--cover-side) 90%, black);
  box-shadow: none;
  backface-visibility: visible;
}

.thesis-card__edge--top,
.thesis-card__edge--bottom {
  width: var(--thesis-cover-depth);
  height: 100%;
}

.thesis-card__edge--top {
  left: 0;
  transform: rotateY(90deg);
  transform-origin: left center;
}

.thesis-card__edge--bottom {
  right: 0;
  transform: rotateY(-90deg);
  transform-origin: right center;
}

/* Front content is only drawn on the front (backface hidden); the back face only
   on the back. Each side shows the correct face with no occlusion guesswork.
   (Sharp covers carry no filter, so backface culling works; far blurred covers
   flatten, but the blur hides any imperfection.) */
.thesis-card::after,
.thesis-card img,
.thesis-card__title,
.thesis-card__number {
  backface-visibility: hidden;
}

/* The back face: an opaque copy at the back, turned to face backward (rotateY
   180) so it's only visible when the cover is flipped, and reads correctly. */
.thesis-card__back {
  position: absolute;
  inset: 0 -1px;
  overflow: hidden;
  pointer-events: none;
  backface-visibility: hidden;
  background:
    radial-gradient(circle at 24% 24%, color-mix(in srgb, var(--cover-accent) 32%, transparent) 0 18%, transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--cover-bg) 82%, white), var(--cover-bg) 58%, color-mix(in srgb, var(--cover-bg) 72%, black)),
    var(--cover-bg);
  transform: translateZ(calc(var(--thesis-cover-depth) * -1)) rotateY(180deg);
}

.thesis-card.is-expanded {
  opacity: 1;
  outline: none;
  box-shadow:
    -1.2rem 1.5rem 2.4rem rgba(0, 0, 0, 0.22),
    0 0 1.4rem color-mix(in srgb, var(--cover-accent) 18%, transparent);
}

.thesis-card.is-expanded::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--cover-side) 72%, var(--cover-accent)), var(--cover-side) 48%, color-mix(in srgb, var(--cover-side) 74%, black)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 9px);
}

.thesis-card.is-expanded .thesis-card__title,
.thesis-card.is-expanded .thesis-card__number {
  color: var(--cover-fg);
}

.thesis-card:nth-child(1) { --cover-bg: #22231f; --cover-fg: #f3f0df; --cover-side: #48473c; --cover-accent: #c8ff62; }
.thesis-card:nth-child(2) { --cover-bg: #1f3f83; --cover-fg: #f5f8ff; --cover-side: #24447d; --cover-accent: #7fc7ff; }
.thesis-card:nth-child(3) { --cover-bg: #e6dfce; --cover-fg: #151817; --cover-side: #b6b09e; --cover-accent: #ff5a3a; }
.thesis-card:nth-child(4) { --cover-bg: #2f2520; --cover-fg: #f5eadd; --cover-side: #4a3930; --cover-accent: #efc16c; }
.thesis-card:nth-child(5) { --cover-bg: #f4efe6; --cover-fg: #171717; --cover-side: #c9c3b7; --cover-accent: #51e35f; }
.thesis-card:nth-child(6) { --cover-bg: #efb59f; --cover-fg: #211916; --cover-side: #c88976; --cover-accent: #ff4e3a; }
.thesis-card:nth-child(7) { --cover-bg: #263036; --cover-fg: #f1f6f7; --cover-side: #5d6870; --cover-accent: #76dde7; }
.thesis-card:nth-child(8) { --cover-bg: #0d0d0f; --cover-fg: #f6f1e8; --cover-side: #2d2e34; --cover-accent: #ff5fcb; }
.thesis-card:nth-child(9) { --cover-bg: #ede9d6; --cover-fg: #171817; --cover-side: #beb9a7; --cover-accent: #8bd0ff; }

.thesis-card img {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  opacity: 0.26;
  mix-blend-mode: screen;
  transform: translateZ(0.2px);
}

.thesis-card__title {
  position: absolute;
  left: 7.7%;
  top: 9.4%;
  z-index: 4;
  width: 80%;
  color: var(--theme-panel-fg);
  font-family: "OffBitBar", "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(18px, 12.45cqw, 84px);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: 0;
  text-shadow: none;
  pointer-events: none;
  transform: translateZ(0.3px);
}

/* Number sits at the bottom-right of the cover (the more readable side given the
   fan tilt). */
.thesis-card__number {
  position: absolute;
  right: 8.2%;
  bottom: 6.4%;
  z-index: 4;
  color: var(--theme-panel-fg);
  font-family: "OffBitBar", "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(84px, 39cqw, 320px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: 0;
  text-shadow: none;
  overflow: visible;
  pointer-events: none;
  transform: translateZ(0.3px);
}

/* The number goes on the cover edge nearest the viewer. The back face is rotated
   180deg, so its near edge is the opposite CSS side from the front — front sits
   right, back sits left, and both end up on the near edge on screen. */
.thesis-card__back .thesis-card__number {
  left: 8.2%;
  right: auto;
}

.thesis-page__rule {
  display: none;
}

.thesis-page.is-article-open .thesis-page__title,
.thesis-page.is-article-open .thesis-page__copy,
.thesis-page.is-article-open .thesis-page__status,
.thesis-page.is-article-open .thesis-grid,
.thesis-page.is-article-open .thesis-card,
.thesis-page.is-article-open .thesis-page__rule {
  opacity: 0;
  pointer-events: none;
}

/* While a picked cover is flying to the article, fade the intro UI out FAST so the
   cover doesn't pass through the heading/copy panel on its way. */
.thesis-page.is-cover-flying .thesis-page__title,
.thesis-page.is-cover-flying .thesis-page__copy,
.thesis-page.is-cover-flying .thesis-page__status,
.thesis-page.is-cover-flying .thesis-grid,
.thesis-page.is-cover-flying .thesis-page__rule,
.thesis-page.is-cover-flying .thesis-status {
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.thesis-page.is-cover-detail-open {
  background: #39b8b1;
  color: #102420;
}

.thesis-page.is-cover-detail-open::before {
  opacity: 0;
}

.thesis-page.is-cover-detail-open .thesis-page__title,
.thesis-page.is-cover-detail-open .thesis-grid {
  opacity: 0;
  pointer-events: none;
}

.thesis-cover-detail {
  position: absolute;
  inset: 0;
  z-index: 24;
  display: grid;
  grid-template-columns: minmax(16rem, 38vw) minmax(22rem, 42vw);
  column-gap: clamp(3.5rem, 8vw, 9rem);
  align-items: center;
  justify-content: center;
  padding: clamp(4.4rem, 10vh, 7.4rem) clamp(4rem, 7vw, 7rem) clamp(5.2rem, 10vh, 8rem);
  color: #102420;
  opacity: 0;
  pointer-events: none;
  transform: translateY(1.4rem);
  transition:
    opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 680ms cubic-bezier(0.16, 1, 0.3, 1);
}

.thesis-page.is-cover-detail-open .thesis-cover-detail {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.thesis-cover-detail__close {
  position: absolute;
  top: clamp(1.6rem, 3.4vh, 2.8rem);
  right: clamp(1.8rem, 3.4vw, 3rem);
  z-index: 3;
  padding: 0.5rem 1.15rem;
  border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-family: "OffBitBar", "OffBit", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 220ms ease, border-color 220ms ease;
}

.thesis-cover-detail__close:hover,
.thesis-cover-detail__close:focus-visible {
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-color: color-mix(in srgb, currentColor 62%, transparent);
  outline: none;
}

.thesis-cover-detail__art {
  position: relative;
  width: min(38vw, 32rem);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 38% 34%, rgba(255, 255, 255, 0.28), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(0, 0, 0, 0.05)),
    #27a8a5;
  box-shadow: 0 1.35rem 2.5rem rgba(18, 63, 61, 0.18);
  overflow: hidden;
}

.thesis-cover-detail__art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    repeating-linear-gradient(0deg, rgba(16, 36, 32, 0.07) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 18px);
  opacity: 0.5;
  pointer-events: none;
}

.thesis-cover-detail__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  mix-blend-mode: screen;
}

.thesis-cover-detail__art-title,
.thesis-cover-detail__art-number {
  position: absolute;
  z-index: 3;
  color: rgba(255, 255, 255, 0.88);
  font-family: "OffBitBar", "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  pointer-events: none;
}

.thesis-cover-detail__art-title {
  left: 7.5%;
  top: 8%;
  width: 74%;
  font-size: clamp(1.85rem, 4.4vw, 4.8rem);
  line-height: 0.84;
}

.thesis-cover-detail__art-number {
  left: 7.5%;
  bottom: 7%;
  font-size: clamp(4.3rem, 10.8vw, 11rem);
  line-height: 0.7;
}

.thesis-cover-detail__kicker {
  margin-bottom: clamp(0.9rem, 2vh, 1.35rem);
  font-family: "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(0.72rem, 0.82vw, 0.92rem);
  font-weight: 800;
}

.thesis-cover-detail__title {
  max-width: 36rem;
  margin: 0 0 clamp(1.9rem, 4.5vh, 3.4rem);
  font-family: "OffBitBar", "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2rem, 3.8vw, 4.6rem);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: 0;
}

.thesis-cover-detail__tracklist {
  display: grid;
  gap: clamp(0.82rem, 1.75vh, 1.22rem);
  width: min(39vw, 36rem);
  margin: 0 0 clamp(3.2rem, 8.8vh, 6.8rem);
  padding: 0;
  list-style: none;
  font-family: "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
}

.thesis-cover-detail__track {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) 3.8rem;
  gap: clamp(0.65rem, 1.2vw, 1.1rem);
  align-items: baseline;
  color: rgba(16, 36, 32, 0.88);
  font-size: clamp(0.9rem, 1.08vw, 1.13rem);
  font-weight: 800;
  line-height: 1;
}

.thesis-cover-detail__track-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thesis-cover-detail__track-duration {
  justify-self: end;
}

.thesis-cover-detail__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(9.5rem, 13.2rem));
  gap: clamp(1rem, 1.7vw, 1.45rem);
}

.thesis-cover-detail__open {
  min-width: 0;
  padding: 0.72rem 1.5rem 0.78rem;
  border: 2px solid rgba(16, 36, 32, 0.54);
  border-radius: 999px;
  background: transparent;
  color: #102420;
  font-family: "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(0.95rem, 1.05vw, 1.12rem);
  font-weight: 800;
  letter-spacing: 0;
  cursor: pointer;
}

.thesis-cover-detail__open:hover,
.thesis-cover-detail__open:focus-visible {
  background: rgba(16, 36, 32, 0.12);
  outline: none;
}

.thesis-article {
  --thesis-article-content-left: 18.59vw;
  --thesis-article-content-top: 20.56vh;
  --thesis-article-content-width: 65vw;
  --thesis-article-dots-gap: clamp(78px, 7vh, 104px);
  --thesis-article-dots-height: 109px;
  --thesis-article-body-gap: clamp(38px, 4.8vh, 64px);
  --thesis-article-top-fade-height: clamp(7rem, 13vh, 10rem);
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding: var(--thesis-article-content-top) 0 18vh var(--thesis-article-content-left);
  background: rgb(18, 18, 18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 420ms ease, visibility 420ms ease;
}

.thesis-article::before {
  display: none;
}

.thesis-article::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 315;
  display: none;
  height: var(--thesis-article-top-fade-height);
  background: linear-gradient(
    180deg,
    rgba(var(--page-bg-rgb), 0.96) 0%,
    rgba(var(--page-bg-rgb), 0.78) 46%,
    rgba(var(--page-bg-rgb), 0) 100%
  );
  pointer-events: none;
}

.thesis-page.is-article-open .thesis-article {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.thesis-page.is-article-open .thesis-article::after {
  display: block;
}

.thesis-page.is-article-open .thesis-article.is-evidence-view-open::after {
  display: block;
}

.thesis-article__back {
  position: fixed;
  left: clamp(18px, 1.55vw, 30px);
  top: max(clamp(1rem, 1vw, 1.4rem), env(safe-area-inset-top));
  z-index: 320;
  width: 54px;
  height: 54px;
  padding: 12px;
  border: 0;
  background:
    linear-gradient(var(--theme-corner), var(--theme-corner)) left top / 14px 1.5px no-repeat,
    linear-gradient(var(--theme-corner), var(--theme-corner)) left top / 1.5px 14px no-repeat,
    linear-gradient(var(--theme-corner), var(--theme-corner)) right top / 14px 1.5px no-repeat,
    linear-gradient(var(--theme-corner), var(--theme-corner)) right top / 1.5px 14px no-repeat,
    linear-gradient(var(--theme-corner), var(--theme-corner)) left bottom / 14px 1.5px no-repeat,
    linear-gradient(var(--theme-corner), var(--theme-corner)) left bottom / 1.5px 14px no-repeat,
    linear-gradient(var(--theme-corner), var(--theme-corner)) right bottom / 14px 1.5px no-repeat,
    linear-gradient(var(--theme-corner), var(--theme-corner)) right bottom / 1.5px 14px no-repeat;
  color: color-mix(in srgb, var(--theme-fg) 72%, transparent);
  font-size: 0;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  filter:
    drop-shadow(0 0 2px color-mix(in srgb, var(--theme-fg) 52%, transparent))
    drop-shadow(0 0 10px color-mix(in srgb, var(--theme-fg) 20%, transparent));
}

.thesis-article__back-x {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: var(--theme-icon-filter);
}

.thesis-article__minimize {
  display: none;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
  pointer-events: none;
}

.thesis-article__minimize img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: var(--theme-icon-filter);
}

.thesis-article__minimize-part--top-left {
  transform: none;
}

.thesis-article__minimize-part--top-right {
  transform: scaleX(-1);
}

.thesis-article__minimize-part--bottom-left {
  transform: scaleY(-1);
}

.thesis-article__minimize-part--bottom-right {
  transform: scaleX(-1) scaleY(-1);
}

.thesis-article.is-evidence-view-open .thesis-article__back {
  padding: 10px;
}

.thesis-article.is-evidence-view-open .thesis-article__back-x {
  display: none;
}

.thesis-article.is-evidence-view-open .thesis-article__minimize {
  display: grid;
}

.thesis-article.is-evidence-view-open .thesis-article__minimize-part--top-right,
.thesis-article.is-evidence-view-open .thesis-article__minimize-part--bottom-left {
  visibility: hidden;
}

.thesis-article__back:hover,
.thesis-article__back:focus-visible {
  color: var(--theme-fg);
  outline: none;
  filter:
    drop-shadow(0 0 2px color-mix(in srgb, var(--theme-fg) 78%, transparent))
    drop-shadow(0 0 12px color-mix(in srgb, var(--theme-fg) 38%, transparent));
}

.thesis-article__legend {
  position: fixed;
  left: 1.72vw;
  top: 22.5vh;
  z-index: 6;
  box-sizing: border-box;
  display: grid;
  align-content: start;
  gap: 16px;
  width: min(13.2vw, 270px);
  min-width: 185px;
  min-height: 54vh;
  padding: 28px 26px;
  overflow: visible;
  color: rgba(255, 255, 255, 0.4);
  font-family: "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  pointer-events: none;
  opacity: 0;
  /* Theme accent (orange in dark, greenish in light) — matches the light-mode
     legend, replacing the old fixed red. */
  --legend-line-color: var(--accent);
  --legend-line-size: 1.5px;
  --legend-corner-size: 18px;
  --legend-glow: 0 0 12px rgba(var(--accent-rgb), 0.42);
  --legend-highlight-filter:
    drop-shadow(0 0 2px rgba(var(--accent-rgb), 0.72))
    drop-shadow(0 0 7px rgba(var(--accent-rgb), 0.48))
    drop-shadow(0 0 16px rgba(var(--accent-rgb), 0.34));
}

.thesis-page.is-article-open.is-legend-visible .thesis-article__legend {
  animation: thesisLegendShell 1180ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
  pointer-events: auto;
}

.thesis-page.is-article-open.is-legend-visible.is-legend-collapsing .thesis-article__legend {
  animation: thesisLegendCollapse 360ms cubic-bezier(0.7, 0, 0.84, 0) both;
  pointer-events: none;
}

@keyframes thesisLegendShell {
  0%,
  100% {
    opacity: 1;
  }
}

@keyframes thesisLegendCollapse {
  from {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }

  to {
    opacity: 0;
    transform: translateY(-8px) scaleY(0.96);
  }
}

.thesis-article__legend-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.thesis-article__legend-cue {
  display: none;
}

.thesis-article__legend-seed {
  position: absolute;
  top: 50%;
  width: 50%;
  height: var(--legend-line-size);
  background: var(--legend-line-color);
  box-shadow: var(--legend-glow);
  filter: var(--legend-highlight-filter);
  opacity: 0;
  will-change: opacity, transform;
}

.thesis-article__legend-seed--left {
  left: 0;
  transform: scaleX(0);
  transform-origin: left center;
}

.thesis-article__legend-seed--right {
  right: 0;
  transform: scaleX(0);
  transform-origin: left center;
}

/* Line/collapse phase removed: the corners now slide in on their own. The seed
   elements stay hidden via their base opacity: 0 (no animation applied). */

@keyframes thesisLegendSeedToPoint {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }

  28% {
    opacity: 1;
    transform: scaleX(1);
  }

  42% {
    opacity: 1;
    transform: scaleX(1);
  }

  58% {
    opacity: 1;
    transform: scaleX(0.012);
  }

  64%,
  100% {
    opacity: 0;
    transform: scaleX(0.012);
  }
}

.thesis-article__legend-corner {
  position: absolute;
  width: var(--legend-corner-size);
  height: var(--legend-corner-size);
  opacity: 0;
  top: calc(50% - var(--legend-corner-size) * 0.5);
  will-change: opacity, top;
}

.thesis-article__legend-corner::before,
.thesis-article__legend-corner::after {
  content: "";
  position: absolute;
  background: var(--legend-line-color);
  box-shadow: var(--legend-glow);
  filter: var(--legend-highlight-filter);
}

.thesis-article__legend-corner::before {
  width: var(--legend-corner-size);
  height: var(--legend-line-size);
  transform: scaleX(0);
}

.thesis-article__legend-corner::after {
  width: var(--legend-line-size);
  height: var(--legend-corner-size);
  transform: scaleY(0);
}

.thesis-article__legend-corner--top-left {
  left: 0;
  transform-origin: left top;
}

.thesis-article__legend-corner--top-left::before,
.thesis-article__legend-corner--top-left::after {
  left: 0;
  top: 0;
}

.thesis-article__legend-corner--top-left::before {
  transform-origin: left center;
}

.thesis-article__legend-corner--top-left::after {
  transform-origin: center top;
}

.thesis-article__legend-corner--top-right {
  right: 0;
  transform-origin: right top;
}

.thesis-article__legend-corner--top-right::before,
.thesis-article__legend-corner--top-right::after {
  right: 0;
  top: 0;
}

.thesis-article__legend-corner--top-right::before {
  transform-origin: right center;
}

.thesis-article__legend-corner--top-right::after {
  transform-origin: center top;
}

.thesis-article__legend-corner--bottom-left {
  left: 0;
  transform-origin: left bottom;
}

.thesis-article__legend-corner--bottom-left::before,
.thesis-article__legend-corner--bottom-left::after {
  left: 0;
  bottom: 0;
}

.thesis-article__legend-corner--bottom-left::before {
  transform-origin: left center;
}

.thesis-article__legend-corner--bottom-left::after {
  transform-origin: center bottom;
}

.thesis-article__legend-corner--bottom-right {
  right: 0;
  transform-origin: right bottom;
}

.thesis-article__legend-corner--bottom-right::before,
.thesis-article__legend-corner--bottom-right::after {
  right: 0;
  bottom: 0;
}

.thesis-article__legend-corner--bottom-right::before {
  transform-origin: right center;
}

.thesis-article__legend-corner--bottom-right::after {
  transform-origin: center bottom;
}

.thesis-page.is-article-open.is-legend-visible .thesis-article__legend-corner--top-left,
.thesis-page.is-article-open.is-legend-visible .thesis-article__legend-corner--top-right {
  animation: thesisLegendCornerTravelTop 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

.thesis-page.is-article-open.is-legend-visible .thesis-article__legend-corner--bottom-left,
.thesis-page.is-article-open.is-legend-visible .thesis-article__legend-corner--bottom-right {
  animation: thesisLegendCornerTravelBottom 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

.thesis-page.is-article-open.is-legend-visible .thesis-article__legend-corner::after {
  animation: thesisLegendCornerVertical 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

.thesis-page.is-article-open.is-legend-visible .thesis-article__legend-corner::before {
  animation: thesisLegendCornerHorizontal 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

@keyframes thesisLegendCornerTravelTop {
  0% {
    opacity: 0;
    top: calc(50% - var(--legend-corner-size) * 0.5);
  }

  14% {
    opacity: 1;
    top: calc(50% - var(--legend-corner-size) * 0.5);
  }

  62%,
  100% {
    opacity: 1;
    top: 0;
  }
}

@keyframes thesisLegendCornerTravelBottom {
  0% {
    opacity: 0;
    top: calc(50% - var(--legend-corner-size) * 0.5);
  }

  14% {
    opacity: 1;
    top: calc(50% - var(--legend-corner-size) * 0.5);
  }

  62%,
  100% {
    opacity: 1;
    top: calc(100% - var(--legend-corner-size));
  }
}

@keyframes thesisLegendCornerVertical {
  0% {
    transform: scaleY(0);
  }

  14% {
    transform: scaleY(0.12);
  }

  60%,
  100% {
    transform: scaleY(1);
  }
}

@keyframes thesisLegendCornerHorizontal {
  0%,
  58% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
  }
}

.thesis-article__legend-item {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  color: rgba(255, 255, 255, 0.4);
  background: transparent;
  font: inherit;
  font-size: clamp(17px, 1.1vw, 22px);
  line-height: 1.05;
  text-align: left;
  letter-spacing: 0;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-8px);
  transition: color 260ms ease;
}

/* The marker box lives on a pseudo-element so it can wipe in from the left behind
   the text when an item becomes active (text sits above via the item's z-index). */
.thesis-article__legend-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.thesis-page.is-article-open.is-legend-visible .thesis-article__legend-item {
  animation: thesisLegendItemReveal 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(1380ms + var(--legend-index, 0) * 64ms);
}

@keyframes thesisLegendItemReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.thesis-article__legend-item--h3 {
  padding-left: 10px;
  font-size: clamp(15px, 0.94vw, 19px);
}

.thesis-article__legend-item.is-active,
.thesis-article__legend-item:hover,
.thesis-article__legend-item:focus-visible {
  /* Same marker as the article h2 chapters: a box hugging the text. The negative
     margin cancels the padding so activating an item doesn't shift the layout. */
  width: auto;
  justify-self: start;
  /* Box extends by its own horizontal padding (0.34em × 2) so the TEXT keeps the
     full column width — same wrap/line-count as when inactive (no jitter). The
     negative margin already reserves that space, so neighbours don't move. */
  max-width: calc(100% + 0.68em);
  padding: 0.16em 0.34em 0.1em;
  margin: -0.16em -0.34em -0.1em;
  color: #111111;
  text-shadow: none;
  outline: none;
}

/* Expand the marker box behind the text. */
.thesis-article__legend-item.is-active::before,
.thesis-article__legend-item:hover::before,
.thesis-article__legend-item:focus-visible::before {
  transform: scaleX(1);
}

/* Masthead: the cover (left) + a column of dot-matrix over the EVIDENCE DATABASE
   stats (right), wrapped by one corner-bracket frame. Frame vars live here now
   because .thesis-article__evidence-frame is a direct child of the masthead. */
.thesis-article__masthead {
  --evidence-frame-color: #ffffff;
  --evidence-frame-line-size: 1.5px;
  --evidence-frame-corner-size: 18px;
  --evidence-frame-glow: 0 0 12px rgba(255, 255, 255, 0.42);
  --evidence-frame-filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.72))
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.48))
    drop-shadow(0 0 16px rgba(255, 255, 255, 0.34));
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(28px, 2.8vw, 54px);
  width: fit-content; /* shrink to the cover + dots + stats so the frame corners hug them */
  max-width: calc(100vw - var(--thesis-article-content-left) - 7vw);
  margin-top: clamp(20px, 2.6vh, 44px);
}

.thesis-article__cover {
  position: relative;
  flex: 0 0 auto;
  width: clamp(240px, 25vw, 384px);
  height: clamp(240px, 25vw, 384px);
}

.thesis-article__cover-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.thesis-article__evidence-strip {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 2vh, 28px);
}

/* In the vertical column the dots/stats size to content, not to a horizontal basis. */
.thesis-article__masthead .thesis-article__dots { flex: 0 0 auto; }
.thesis-article__masthead .thesis-article__evidence-stats { flex: 0 0 auto; width: 100%; }

/* The mockup uses the cover + dot-matrix as the heading, so hide the big streamed
   title (kept in the DOM for streaming/legend hooks). Hidden UNCONDITIONALLY so the
   masthead sits at the same spot whether the article is measured (closed) or open —
   otherwise the flown cover targets the wrong Y. */
.thesis-article__title { display: none; }

.thesis-article__evidence-frame {
  position: absolute;
  inset: -22px -28px;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}

.thesis-page.is-article-open .thesis-article__evidence-frame {
  animation: thesisLegendShell 1180ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

.thesis-article__evidence-seed {
  position: absolute;
  top: 50%;
  width: 50%;
  height: var(--evidence-frame-line-size);
  background: var(--evidence-frame-color);
  box-shadow: var(--evidence-frame-glow);
  filter: var(--evidence-frame-filter);
  opacity: 0;
  will-change: opacity, transform;
}

.thesis-article__evidence-seed--left {
  left: 0;
  transform: scaleX(0);
  transform-origin: left center;
}

.thesis-article__evidence-seed--right {
  right: 0;
  transform: scaleX(0);
  transform-origin: left center;
}

/* Line/collapse phase removed: corners slide in on their own; seeds stay hidden. */

.thesis-article__evidence-frame-corner {
  position: absolute;
  width: var(--evidence-frame-corner-size);
  height: var(--evidence-frame-corner-size);
  opacity: 0;
  top: calc(50% - var(--evidence-frame-corner-size) * 0.5);
  will-change: opacity, top;
}

.thesis-article__evidence-frame-corner::before,
.thesis-article__evidence-frame-corner::after {
  content: "";
  position: absolute;
  background: var(--evidence-frame-color);
  box-shadow: var(--evidence-frame-glow);
  filter: var(--evidence-frame-filter);
}

.thesis-article__evidence-frame-corner::before {
  width: var(--evidence-frame-corner-size);
  height: var(--evidence-frame-line-size);
  transform: scaleX(0);
}

.thesis-article__evidence-frame-corner::after {
  width: var(--evidence-frame-line-size);
  height: var(--evidence-frame-corner-size);
  transform: scaleY(0);
}

.thesis-article__evidence-frame-corner--top-left {
  left: 0;
  transform-origin: left top;
}

.thesis-article__evidence-frame-corner--top-left::before,
.thesis-article__evidence-frame-corner--top-left::after {
  left: 0;
  top: 0;
}

.thesis-article__evidence-frame-corner--top-left::before {
  transform-origin: left center;
}

.thesis-article__evidence-frame-corner--top-left::after {
  transform-origin: center top;
}

.thesis-article__evidence-frame-corner--top-right {
  right: 0;
  transform-origin: right top;
}

.thesis-article__evidence-frame-corner--top-right::before,
.thesis-article__evidence-frame-corner--top-right::after {
  right: 0;
  top: 0;
}

.thesis-article__evidence-frame-corner--top-right::before {
  transform-origin: right center;
}

.thesis-article__evidence-frame-corner--top-right::after {
  transform-origin: center top;
}

.thesis-article__evidence-frame-corner--bottom-left {
  left: 0;
  transform-origin: left bottom;
}

.thesis-article__evidence-frame-corner--bottom-left::before,
.thesis-article__evidence-frame-corner--bottom-left::after {
  left: 0;
  bottom: 0;
}

.thesis-article__evidence-frame-corner--bottom-left::before {
  transform-origin: left center;
}

.thesis-article__evidence-frame-corner--bottom-left::after {
  transform-origin: center bottom;
}

.thesis-article__evidence-frame-corner--bottom-right {
  right: 0;
  transform-origin: right bottom;
}

.thesis-article__evidence-frame-corner--bottom-right::before,
.thesis-article__evidence-frame-corner--bottom-right::after {
  right: 0;
  bottom: 0;
}

.thesis-article__evidence-frame-corner--bottom-right::before {
  transform-origin: right center;
}

.thesis-article__evidence-frame-corner--bottom-right::after {
  transform-origin: center bottom;
}

.thesis-page.is-article-open .thesis-article__evidence-frame-corner--top-left,
.thesis-page.is-article-open .thesis-article__evidence-frame-corner--top-right {
  animation: thesisEvidenceFrameTravelTop 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

.thesis-page.is-article-open .thesis-article__evidence-frame-corner--bottom-left,
.thesis-page.is-article-open .thesis-article__evidence-frame-corner--bottom-right {
  animation: thesisEvidenceFrameTravelBottom 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

.thesis-page.is-article-open .thesis-article__evidence-frame-corner::after {
  animation: thesisLegendCornerVertical 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

.thesis-page.is-article-open .thesis-article__evidence-frame-corner::before {
  animation: thesisLegendCornerHorizontal 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

@keyframes thesisEvidenceFrameTravelTop {
  0% {
    opacity: 0;
    top: calc(50% - var(--evidence-frame-corner-size) * 0.5);
  }

  14% {
    opacity: 1;
    top: calc(50% - var(--evidence-frame-corner-size) * 0.5);
  }

  62%,
  100% {
    opacity: 1;
    top: 0;
  }
}

@keyframes thesisEvidenceFrameTravelBottom {
  0% {
    opacity: 0;
    top: calc(50% - var(--evidence-frame-corner-size) * 0.5);
  }

  14% {
    opacity: 1;
    top: calc(50% - var(--evidence-frame-corner-size) * 0.5);
  }

  62%,
  100% {
    opacity: 1;
    top: calc(100% - var(--evidence-frame-corner-size));
  }
}

.thesis-article__dots {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(50, 1fr);
  grid-template-rows: repeat(8, 1fr);
  flex: 0 0 min(var(--thesis-article-content-width), 690px);
  gap: 0;
  width: min(var(--thesis-article-content-width), 690px);
  height: var(--thesis-article-dots-height);
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.thesis-page.is-evidence-content-ready .thesis-article__dots {
  opacity: 1;
  pointer-events: auto;
}

.thesis-article__dots:focus-visible {
  outline: 1.5px solid rgba(var(--accent-rgb), 0.82);
  outline-offset: 10px;
}

.thesis-dot {
  align-self: center;
  justify-self: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, var(--dot-alpha, 0));
  transition: background 420ms ease;
}

html[data-theme="light"] .thesis-dot {
  background: rgba(18, 18, 18, var(--dot-alpha, 0));
}

.thesis-article__evidence-stats {
  --evidence-stats-green: #67ff2e;
  --evidence-stats-glow:
    0 0 2px rgba(103, 255, 46, 0.8),
    0 0 11px rgba(103, 255, 46, 0.34),
    0 0 22px rgba(103, 255, 46, 0.2);
  position: relative;
  flex: 1 1 430px;
  min-width: 360px;
  max-width: 540px;
  height: var(--thesis-article-dots-height);
  min-height: 0;
  padding: 12px 34px 12px 28px;
  color: rgba(255, 255, 255, 0.86);
  font-family: "OffBit", "Courier New", monospace;
  font-weight: 500;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 260ms ease,
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.thesis-page.is-evidence-content-ready .thesis-article__evidence-stats {
  opacity: 1;
  transform: translateY(0);
}

.thesis-article__evidence-stats::after {
  display: none;
}

.thesis-article__evidence-stats-inner {
  position: relative;
  z-index: 1;
}

.thesis-article__evidence-stats h3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 18px;
  margin: 0 0 10px;
  font: 500 clamp(14px, 0.91vw, 18px) / 1 "OffBit", "Courier New", monospace;
  letter-spacing: 0;
}

.thesis-article__evidence-label {
  color: #ffffff;
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.7),
    0 0 8px rgba(255, 255, 255, 0.36),
    0 0 18px rgba(255, 255, 255, 0.2);
}

.thesis-article__evidence-status {
  color: #ff8a35;
  text-align: right;
  white-space: nowrap;
  text-shadow:
    0 0 2px rgba(255, 138, 53, 0.84),
    0 0 10px rgba(255, 114, 34, 0.44),
    0 0 22px rgba(255, 92, 18, 0.24);
}

.thesis-article__evidence-stats.is-live .thesis-article__evidence-status {
  color: var(--evidence-stats-green);
  text-shadow: var(--evidence-stats-glow);
}

.thesis-article__evidence-status-dot {
  display: inline-block;
  margin-left: 7px;
  font-size: 1.35em;
  line-height: 0.5;
  vertical-align: -0.06em;
}

.thesis-article__evidence-stats.is-live .thesis-article__evidence-status-dot {
  animation: evidenceStatusDotBlink 920ms steps(1, end) infinite;
}

@keyframes evidenceStatusDotBlink {
  0%,
  48% {
    opacity: 1;
  }

  49%,
  100% {
    opacity: 0.18;
  }
}

.thesis-article__evidence-stats dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.thesis-article__evidence-stats dl div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 28px;
}

.thesis-article__evidence-stats dt,
.thesis-article__evidence-stats dd {
  margin: 0;
  font-size: clamp(14px, 0.91vw, 18px);
  line-height: 1;
  letter-spacing: 0;
}

.thesis-article__evidence-stats dt {
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 0 7px rgba(255, 255, 255, 0.16);
}

.thesis-article__evidence-stats dd {
  min-width: 58px;
  color: var(--evidence-stats-green);
  text-align: right;
  opacity: 0;
  text-shadow: var(--evidence-stats-glow);
  transition: opacity 220ms ease;
}

.thesis-article__evidence-stats.is-live dd {
  opacity: 1;
}

.thesis-article__evidence-corner {
  display: none;
}

.thesis-article__evidence-corner::before,
.thesis-article__evidence-corner::after {
  content: "";
  position: absolute;
  background: var(--evidence-stats-green);
  box-shadow: var(--evidence-stats-glow);
}

.thesis-article__evidence-corner::before {
  width: 22px;
  height: 2px;
}

.thesis-article__evidence-corner::after {
  width: 2px;
  height: 22px;
}

.thesis-article__evidence-corner--top-left {
  left: 0;
  top: 0;
}

.thesis-article__evidence-corner--top-left::before,
.thesis-article__evidence-corner--top-left::after {
  left: 0;
  top: 0;
}

.thesis-article__evidence-corner--top-right {
  right: 0;
  top: 0;
}

.thesis-article__evidence-corner--top-right::before,
.thesis-article__evidence-corner--top-right::after {
  right: 0;
  top: 0;
}

.thesis-article__evidence-corner--bottom-left {
  left: 0;
  bottom: 0;
}

.thesis-article__evidence-corner--bottom-left::before,
.thesis-article__evidence-corner--bottom-left::after {
  left: 0;
  bottom: 0;
}

.thesis-article__evidence-corner--bottom-right {
  right: 0;
  bottom: 0;
}

.thesis-article__evidence-corner--bottom-right::before,
.thesis-article__evidence-corner--bottom-right::after {
  right: 0;
  bottom: 0;
}

.thesis-article__dots.is-booting .thesis-dot {
  animation: thesisDotBoot 820ms steps(1, end) 3 both;
  animation-delay: var(--dot-boot-delay, 0ms);
  transition: none;
}

@keyframes thesisDotBoot {
  0%,
  22% {
    background: rgba(255, 255, 255, 0);
    transform: scale(0.45);
  }

  30% {
    background: rgba(255, 255, 255, 0.96);
    transform: scale(1.45);
  }

  38% {
    background: rgba(255, 255, 255, 0.18);
    transform: scale(0.78);
  }

  47% {
    background: rgba(255, 255, 255, 0.78);
    transform: scale(1.12);
  }

  66%,
  100% {
    background: rgba(255, 255, 255, var(--dot-alpha, 0.58));
    transform: scale(1);
  }
}

.thesis-article__title {
  position: relative;
  z-index: 2;
  width: var(--thesis-article-content-width);
  margin: 0;
  color: var(--theme-fg);
  font-family: "OffBitBar", "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(96px, 8vw, 154px);
  font-weight: 500;
  line-height: 0.82;
  letter-spacing: 0;
  text-shadow: none;
}

.thesis-page.is-article-open + .micro-nav,
.thesis-page.is-cover-detail-open + .micro-nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.thesis-article__body {
  position: relative;
  z-index: 2;
  width: var(--thesis-article-content-width);
  margin-top: var(--thesis-article-body-gap);
  color: var(--theme-copy);
  font-family: "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(20px, 1.56vw, 30px);
  font-weight: 500;
  line-height: 1.03;
}

.thesis-article__body p {
  margin: 0 0 24px;
}

/* Source links resolved from the vault: shown in the theme accent (orange in dark,
   green in light), underlined, with a stronger underline on hover. */
.thesis-article__body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.16em;
  text-decoration-color: rgba(var(--accent-rgb), 0.5);
  transition: text-decoration-color 180ms ease;
}

.thesis-article__body a:hover,
.thesis-article__body a:focus-visible {
  text-decoration-color: var(--accent);
}

.thesis-article__body h2,
.thesis-article__body h3 {
  margin: 42px 0 18px;
  color: var(--theme-fg);
  font-family: "OffBitBar", "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: 0;
  text-shadow: none;
}

.thesis-article__body h2 {
  display: inline-block;
  font-size: clamp(34px, 3.55vw, 68px);
  background: #ffffff;
  color: #111111;
  line-height: 1;
  padding: 0.24em 0.3em 0.1em;
}

.thesis-article__body h3 {
  font-family: "OffBitBar", "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(26px, 2.45vw, 48px);
}

.thesis-article__body h2:first-child,
.thesis-article__body h3:first-child {
  margin-top: 0;
}

.evidence-preload-host {
  position: fixed;
  top: 0;
  left: -200vw;
  width: 1400px;
  min-height: 900px;
  overflow: hidden;
  opacity: 0.01;
  pointer-events: none;
  z-index: -1;
}

.evidence-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0 42px;
}

.evidence-tile {
  position: relative;
  display: grid;
  gap: 14px;
  min-height: 210px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(7, 8, 10, 0.82);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 18px 34px rgba(0, 0, 0, 0.28);
  opacity: 0;
  color: inherit;
  text-decoration: none;
  transform: translateY(10px);
  animation: evidenceTileReveal 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--evidence-index, 0) * 42ms);
}

.evidence-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.5), transparent 28%),
    radial-gradient(circle at 92% 12%, rgba(var(--accent-rgb), 0.18), transparent 34%);
  opacity: 0.42;
}

.evidence-tile__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.evidence-tile__avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #101010;
  background: #ffffff;
  font-family: "OffBitBar", "OffBit", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.42);
}

.evidence-tile__identity {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.evidence-tile__identity strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 21px;
  line-height: 0.9;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evidence-tile__identity span,
.evidence-tile__footer {
  color: rgba(255, 255, 255, 0.44);
  font-size: 15px;
  line-height: 1;
}

.evidence-tile__title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #ffffff;
  font-family: "OffBitBar", "OffBit", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(24px, 2vw, 38px);
  line-height: 0.88;
  letter-spacing: 0;
}

.evidence-tile__description {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(229, 229, 229, 0.72);
  font-size: clamp(17px, 1.1vw, 22px);
  line-height: 1.03;
}

.evidence-tile__footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-self: end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
}

@keyframes evidenceTileReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.thesis-evidence-view {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 58%, rgba(255, 255, 255, 0.08), transparent 38%),
    rgb(12, 12, 12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 460ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

.thesis-article.is-evidence-view-open .thesis-evidence-view {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.thesis-article.is-evidence-view-open .thesis-article__body,
.thesis-article.is-evidence-view-open .thesis-article__title,
.thesis-article.is-evidence-view-open .thesis-article__legend,
.thesis-article.is-evidence-view-open .thesis-article__evidence-strip {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Hide the bottom-right flame-ring emitter while the evidence dot-matrix view is
   open. display:none also makes the canvas fail checkVisibility(), so its render
   loop early-returns and it stops animating entirely (not just hidden). */
.thesis-article.is-evidence-view-open .thesis-article__holo-frame {
  display: none;
}

.thesis-evidence-view__header {
  display: none;
}

.thesis-evidence-view__close {
  display: none;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(7, 7, 7, 0.62);
  color: #ffffff;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.18);
}

.thesis-evidence-view__close:hover,
.thesis-evidence-view__close:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.48) inset,
    0 0 14px rgba(255, 255, 255, 0.34);
}

.thesis-evidence-view__viewport {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 94vh;
  overflow-y: auto;
  overflow-x: auto;
  overscroll-behavior: contain;
  scroll-behavior: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
  perspective: 1050px;
  perspective-origin: 50% 47%;
  transform: translate(-50%, -50%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 3.5%, #000 96.5%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 3.5%, #000 96.5%, transparent 100%);
}

.thesis-evidence-view__loader {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 6;
  display: none;
  width: min(70vw, 320px);
  color: rgba(255, 255, 255, 0.86);
  font-family: "OffBitBar", "OffBit", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.thesis-evidence-view__loader-label {
  margin-bottom: 14px;
  font-size: clamp(20px, 6vw, 30px);
  line-height: 0.9;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.72),
    0 0 16px rgba(255, 255, 255, 0.28);
}

.thesis-evidence-view__loader-track {
  position: relative;
  height: 10px;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.16) 0,
      rgba(255, 255, 255, 0.16) 5px,
      transparent 5px,
      transparent 10px
    );
}

.thesis-evidence-view__loader-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--evidence-load-progress, 0%);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.95) 0,
      rgba(255, 255, 255, 0.95) 5px,
      rgba(255, 255, 255, 0.18) 5px,
      rgba(255, 255, 255, 0.18) 10px
    );
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.72),
    0 0 22px rgba(255, 255, 255, 0.34);
  transition: width 180ms ease-out;
}

.thesis-evidence-view.is-mobile-loading .thesis-evidence-view__loader {
  display: block;
}

.thesis-evidence-view.is-mobile-loading .thesis-evidence-view__viewport {
  opacity: 0;
  visibility: hidden;
}

.thesis-evidence-view.is-mobile-loading .thesis-evidence-minimap {
  opacity: 0;
  pointer-events: none;
}

.thesis-evidence-view__viewport::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.thesis-evidence-view__viewport::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.thesis-evidence-minimap {
  position: fixed;
  right: clamp(20px, 2.7vw, 42px);
  bottom: clamp(18px, 2.7vw, 40px);
  z-index: 4;
  width: clamp(206px, 15.6vw, 298px);
  aspect-ratio: 16 / 10;
  padding: 8px;
  border: 0;
  border-radius: 0;
  background: rgba(8, 8, 8, 0.12);
  backdrop-filter: blur(28px) saturate(1.22);
  -webkit-backdrop-filter: blur(28px) saturate(1.22);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.52);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 260ms ease-out,
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.thesis-evidence-minimap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(var(--accent), var(--accent)) left top / 18px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left top / 1.5px 18px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right top / 18px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right top / 1.5px 18px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left bottom / 18px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left bottom / 1.5px 18px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 18px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 1.5px 18px no-repeat;
  filter:
    drop-shadow(0 0 2px rgba(var(--accent-rgb), 0.72))
    drop-shadow(0 0 9px rgba(var(--accent-rgb), 0.34));
  pointer-events: none;
}

.thesis-article.is-evidence-view-open .thesis-evidence-minimap {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.thesis-evidence-minimap__field {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.075) 1px, transparent 1px);
  background-size: 18px 18px;
  cursor: grab;
  touch-action: none;
}

.thesis-evidence-minimap.is-dragging .thesis-evidence-minimap__field {
  cursor: grabbing;
}

.thesis-evidence-minimap__tile {
  position: absolute;
  min-width: 2px;
  min-height: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
}

.thesis-evidence-minimap__view {
  position: absolute;
  border: 1px solid rgba(var(--accent-rgb), 0.72);
  border-radius: 2px;
  background: rgba(var(--accent-rgb), 0.07);
  box-shadow: 0 0 2px rgba(var(--accent-rgb), 0.42) inset;
  transition:
    left 120ms ease-out,
    top 120ms ease-out,
    width 120ms ease-out,
    height 120ms ease-out;
}

.evidence-tile-grid--floating {
  --evidence-tile-size: clamp(360px, 32vw, 550px);
  --evidence-gap: clamp(14px, 1.75vw, 26px);
  --evidence-edge-x: clamp(92px, 6vw, 144px);
  --evidence-edge-top: clamp(96px, 12vh, 156px);
  --evidence-edge-bottom: clamp(140px, 18vh, 260px);
  --evidence-rubber-left: 0px;
  --evidence-rubber-right: 0px;
  position: relative;
  z-index: 2;
  display: block;
  align-items: initial;
  gap: 0;
  width: max-content;
  min-height: 145vh;
  margin: 0 auto;
  padding: 0;
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 42%;
  transform-style: flat;
}

.evidence-tile-grid--floating::before,
.evidence-tile-grid--floating::after {
  content: "";
  position: absolute;
  top: 0;
  height: 1px;
  pointer-events: none;
}

.evidence-tile-grid--floating::before {
  left: calc(-1 * var(--evidence-rubber-left));
  width: var(--evidence-rubber-left);
}

.evidence-tile-grid--floating::after {
  left: 100%;
  width: var(--evidence-rubber-right);
}

.thesis-evidence-view .evidence-tile {
  position: absolute;
  width: var(--evidence-tile-size);
  align-self: start;
  min-height: 0;
  align-content: start;
  gap: clamp(9px, 0.8vw, 13px);
  padding: clamp(15px, 1.15vw, 20px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.13), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    rgba(4, 5, 7, 0.91);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.055) inset,
    0 18px 42px rgba(0, 0, 0, 0.48);
  opacity: var(--tile-opacity, 1);
  transform: translate3d(calc(var(--tile-edge-inset-x, 0px) + var(--tile-pull-x, 0px) + var(--tile-selected-push-x, 0px) + var(--tile-detail-group-x, 0px)), calc(var(--tile-pull-y, 0px) + var(--tile-selected-push-y, 0px) + var(--tile-detail-flow-y, 0px)), 0) scale(var(--tile-scale, 1));
  transform-origin: center center;
  transform-style: flat;
  will-change: opacity, transform, filter;
  transition:
    transform 430ms cubic-bezier(0.18, 1.45, 0.22, 1),
    opacity 260ms ease-out;
  animation: evidenceFloatingTileReveal 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--evidence-index, 0) * 22ms);
}

.thesis-evidence-view .evidence-tile.is-selected {
  z-index: 240 !important;
  outline: none;
  outline-offset: 0;
  filter:
    drop-shadow(0 0 2px rgba(var(--accent-rgb), 0.7))
    drop-shadow(0 0 18px rgba(var(--accent-rgb), 0.28));
}

.evidence-tile__select-hit {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: transparent;
  cursor: pointer;
}

.evidence-selection-panel {
  position: absolute;
  z-index: 230;
  width: clamp(250px, 19vw, 360px);
  min-height: 184px;
  padding: 25px 24px 21px;
  border: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.78);
  font-family: "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  transform: translate3d(var(--detail-enter-x, 0px), var(--detail-enter-y, 0px), 0);
  --detail-line-color: var(--accent);
  --detail-line-size: 1.5px;
  --detail-corner-size: 18px;
  --detail-glow: 0 0 12px rgba(var(--accent-rgb), 0.42);
  --detail-filter:
    drop-shadow(0 0 2px rgba(var(--accent-rgb), 0.72))
    drop-shadow(0 0 7px rgba(var(--accent-rgb), 0.48))
    drop-shadow(0 0 16px rgba(var(--accent-rgb), 0.34));
  transition:
    opacity 260ms ease-out,
    transform 360ms cubic-bezier(0.18, 1.28, 0.22, 1),
    left 430ms cubic-bezier(0.18, 1.45, 0.22, 1),
    top 430ms cubic-bezier(0.18, 1.45, 0.22, 1);
  pointer-events: none;
}

.evidence-selection-panel__frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.evidence-selection-panel__seed {
  position: absolute;
  top: 50%;
  width: 50%;
  height: var(--detail-line-size);
  background: var(--detail-line-color);
  box-shadow: var(--detail-glow);
  filter: var(--detail-filter);
  opacity: 0;
  will-change: opacity, transform;
}

.evidence-selection-panel__seed--left {
  left: 0;
  transform: scaleX(0);
  transform-origin: left center;
}

.evidence-selection-panel__seed--right {
  right: 0;
  transform: scaleX(0);
  transform-origin: left center;
}

.evidence-selection-panel.is-visible .evidence-selection-panel__seed--left,
.evidence-selection-panel.is-visible .evidence-selection-panel__seed--right {
  animation: evidencePanelSeedToPoint 1180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes evidencePanelSeedToPoint {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }

  28%,
  42% {
    opacity: 1;
    transform: scaleX(1);
  }

  58% {
    opacity: 1;
    transform: scaleX(0.012);
  }

  64%,
  100% {
    opacity: 0;
    transform: scaleX(0.012);
  }
}

.evidence-selection-panel__corner {
  position: absolute;
  top: calc(50% - var(--detail-corner-size) * 0.5);
  width: var(--detail-corner-size);
  height: var(--detail-corner-size);
  opacity: 0;
  will-change: opacity, top;
}

.evidence-selection-panel__corner::before,
.evidence-selection-panel__corner::after {
  content: "";
  position: absolute;
  background: var(--detail-line-color);
  box-shadow: var(--detail-glow);
  filter: var(--detail-filter);
}

.evidence-selection-panel__corner::before {
  width: var(--detail-corner-size);
  height: var(--detail-line-size);
  transform: scaleX(0);
}

.evidence-selection-panel__corner::after {
  width: var(--detail-line-size);
  height: var(--detail-corner-size);
  transform: scaleY(0);
}

.evidence-selection-panel__corner--top-left,
.evidence-selection-panel__corner--bottom-left {
  left: 0;
}

.evidence-selection-panel__corner--top-right,
.evidence-selection-panel__corner--bottom-right {
  right: 0;
}

.evidence-selection-panel__corner--top-left::before,
.evidence-selection-panel__corner--top-left::after {
  left: 0;
  top: 0;
}

.evidence-selection-panel__corner--top-left::before,
.evidence-selection-panel__corner--bottom-left::before {
  transform-origin: left center;
}

.evidence-selection-panel__corner--top-left::after {
  transform-origin: center top;
}

.evidence-selection-panel__corner--top-right::before,
.evidence-selection-panel__corner--top-right::after {
  right: 0;
  top: 0;
}

.evidence-selection-panel__corner--top-right::before,
.evidence-selection-panel__corner--bottom-right::before {
  transform-origin: right center;
}

.evidence-selection-panel__corner--top-right::after {
  transform-origin: center top;
}

.evidence-selection-panel__corner--bottom-left::before,
.evidence-selection-panel__corner--bottom-left::after {
  left: 0;
  bottom: 0;
}

.evidence-selection-panel__corner--bottom-left::after {
  transform-origin: center bottom;
}

.evidence-selection-panel__corner--bottom-right::before,
.evidence-selection-panel__corner--bottom-right::after {
  right: 0;
  bottom: 0;
}

.evidence-selection-panel__corner--bottom-right::after {
  transform-origin: center bottom;
}

.evidence-selection-panel.is-visible .evidence-selection-panel__corner--top-left,
.evidence-selection-panel.is-visible .evidence-selection-panel__corner--top-right {
  animation: evidencePanelCornerTravelTop 1180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.evidence-selection-panel.is-visible .evidence-selection-panel__corner--bottom-left,
.evidence-selection-panel.is-visible .evidence-selection-panel__corner--bottom-right {
  animation: evidencePanelCornerTravelBottom 1180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.evidence-selection-panel.is-visible .evidence-selection-panel__corner::after {
  animation: evidencePanelCornerVertical 1180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.evidence-selection-panel.is-visible .evidence-selection-panel__corner::before {
  animation: evidencePanelCornerHorizontal 1180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes evidencePanelCornerTravelTop {
  0%,
  56% {
    opacity: 0;
    top: calc(50% - var(--detail-corner-size) * 0.5);
  }

  62% {
    opacity: 1;
    top: calc(50% - var(--detail-corner-size) * 0.5);
  }

  82%,
  100% {
    opacity: 1;
    top: 0;
  }
}

@keyframes evidencePanelCornerTravelBottom {
  0%,
  56% {
    opacity: 0;
    top: calc(50% - var(--detail-corner-size) * 0.5);
  }

  62% {
    opacity: 1;
    top: calc(50% - var(--detail-corner-size) * 0.5);
  }

  82%,
  100% {
    opacity: 1;
    top: calc(100% - var(--detail-corner-size));
  }
}

@keyframes evidencePanelCornerVertical {
  0%,
  56% {
    transform: scaleY(0);
  }

  62% {
    transform: scaleY(0.08);
  }

  72%,
  100% {
    transform: scaleY(1);
  }
}

@keyframes evidencePanelCornerHorizontal {
  0%,
  80% {
    transform: scaleX(0);
  }

  94%,
  100% {
    transform: scaleX(1);
  }
}

.evidence-selection-panel.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.evidence-selection-panel[data-side="left"] {
  --detail-enter-x: 18px;
}

.evidence-selection-panel[data-side="right"] {
  --detail-enter-x: -18px;
}

.evidence-selection-panel__eyebrow,
.evidence-selection-panel__label {
  color: rgba(255, 255, 255, 0.74);
  font-family: "OffBitBar", "OffBit", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(13px, 0.8vw, 16px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.evidence-selection-panel__id {
  margin: 0.45rem 0 0.18rem;
  color: #ffffff;
  font-family: "OffBitBar", "OffBit", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(2.25rem, 4.2vw, 4.9rem);
  line-height: 0.9;
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.62),
    0 0 9px rgba(255, 255, 255, 0.28);
}

.evidence-selection-panel__date {
  margin: 0 0 0.65rem;
  color: rgba(255, 255, 255, 0.52);
  font-family: "OffBitBar", "OffBit", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(0.88rem, 0.88vw, 1.08rem);
  font-weight: 500;
  line-height: 1;
}

.evidence-selection-panel__meta {
  margin: 0 0 0.9rem;
  color: rgba(255, 255, 255, 0.5);
  font-family: "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(0.8rem, 0.78vw, 1rem);
  line-height: 1.12;
}

.evidence-selection-panel__description {
  margin: 0 0 1rem;
  color: rgba(255, 255, 255, 0.7);
  font-family: "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1rem, 1.02vw, 1.32rem);
  font-weight: 500;
  line-height: 1.16;
}

.evidence-selection-panel__comment {
  margin: 0.85rem 0 0;
  color: rgba(255, 255, 255, 0.58);
  font-family: "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(0.88rem, 0.92vw, 1.12rem);
  font-weight: 500;
  line-height: 1.16;
}

.evidence-selection-panel__strength {
  display: grid;
  gap: 7px;
}

.evidence-selection-panel__meter {
  position: relative;
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.evidence-selection-panel__meter span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--signal-strength, 62%);
  border-radius: inherit;
  background: var(--accent);
  box-shadow:
    0 0 8px rgba(var(--accent-rgb), 0.5),
    0 0 18px rgba(var(--accent-rgb), 0.28);
}

.evidence-selection-panel__value {
  color: var(--accent);
  font-family: "OffBitBar", "OffBit", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(0.94rem, 0.9vw, 1.12rem);
  line-height: 1;
  text-shadow:
    0 0 2px rgba(var(--accent-rgb), 0.72),
    0 0 9px rgba(var(--accent-rgb), 0.3);
}

.thesis-evidence-view .evidence-tile--tweet,
.thesis-evidence-view .evidence-tile--threads {
  display: block;
  overflow: hidden;
  clip-path: inset(0 round 16px);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  contain: paint;
}

.thesis-evidence-view .evidence-tile--tweet::before,
.thesis-evidence-view .evidence-tile--threads::before {
  content: none;
}

.thesis-evidence-view .twitter-tweet {
  width: 100% !important;
  max-width: 550px !important;
  margin: 0 !important;
}

.thesis-evidence-view .evidence-social-target,
.thesis-evidence-view .evidence-tweet-target,
.thesis-evidence-view .evidence-threads-target {
  width: 100%;
  max-width: 550px;
  overflow: hidden;
  border-radius: 16px;
  background: #000000;
  clip-path: inset(0 round 16px);
  contain: paint;
}

.thesis-evidence-view .evidence-tile--tweet iframe,
.thesis-evidence-view .evidence-tile--threads iframe {
  display: block !important;
  width: 100% !important;
  max-width: 550px !important;
  border-radius: 16px !important;
}

.thesis-evidence-view .text-post-media {
  max-width: 550px !important;
  margin: 0 !important;
  background: #000000 !important;
}

.thesis-evidence-view .evidence-threads-target {
  font-size: 0 !important;
  line-height: 0 !important;
}

.thesis-evidence-view .evidence-threads-target a,
.thesis-evidence-view .text-post-media > a {
  display: none !important;
}

.thesis-evidence-view .evidence-tile__avatar {
  width: clamp(28px, 2.4vw, 36px);
  height: clamp(28px, 2.4vw, 36px);
  font-size: clamp(19px, 1.7vw, 25px);
}

.thesis-evidence-view .evidence-tile__identity strong {
  font-family: "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(15px, 1.05vw, 19px);
  line-height: 0.9;
}

.thesis-evidence-view .evidence-tile__identity span,
.thesis-evidence-view .evidence-tile__footer {
  font-size: clamp(11px, 0.72vw, 13px);
}

.thesis-evidence-view .evidence-tile__title {
  display: -webkit-box;
  overflow: hidden;
  font-family: "OffBitBar", "OffBit", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(23px, 1.95vw, 36px);
  line-height: 0.9;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.thesis-evidence-view .evidence-tile__description {
  display: -webkit-box;
  overflow: hidden;
  padding-top: clamp(6px, 0.55vw, 10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(229, 229, 229, 0.62);
  font-size: clamp(12px, 0.85vw, 16px);
  line-height: 1.02;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.thesis-evidence-view .evidence-tile__media {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  aspect-ratio: 1.72 / 1;
  background: rgba(255, 255, 255, 0.055);
}

.thesis-evidence-view .evidence-tile__media img,
.thesis-evidence-view .evidence-tile__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.88;
  filter: saturate(0.92) contrast(1.08);
}

.thesis-evidence-view .evidence-tile__footer {
  margin-top: auto;
  justify-content: space-between;
  padding-top: clamp(6px, 0.6vw, 10px);
  color: rgba(255, 255, 255, 0.38);
  text-transform: lowercase;
}

.evidence-mobile-preview {
  display: none;
}

@keyframes evidenceFloatingTileReveal {
  from {
    opacity: 0;
    filter: blur(5px);
  }

  to {
    opacity: var(--tile-opacity, 1);
    filter: blur(0);
  }
}

.is-title-typing::after,
.is-copy-typing::after,
.is-extra-typing::after,
.thesis-article__title.is-typing::after,
.thesis-article__body.is-typing .is-streaming::after {
  content: "";
  display: inline-block;
  width: 0.52em;
  height: 0.72em;
  margin-left: 0.12em;
  border-right: 2px solid rgba(255, 255, 255, 0.72);
  transform: translateY(0.08em);
  animation: thesisTypeCursor 760ms steps(1, end) infinite;
}

@keyframes thesisTypeCursor {
  50% {
    opacity: 0;
  }
}

.terrain-field::before,
.terrain-field::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.terrain-field::before {
  display: none;
}

.terrain-field::after {
  display: none;
}

.terrain-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 360ms ease;
  user-select: none;
}

.terrain-canvas {
  z-index: 1;
  cursor: grab;
  filter:
    brightness(1.38)
    contrast(1.08)
    saturate(2.35)
    drop-shadow(1px 0 0 rgba(92, 154, 255, 0.38))
    drop-shadow(-2px 0 0 rgba(0, 115, 255, 0.46))
    drop-shadow(0 0 10px rgba(38, 137, 255, 0.68))
    drop-shadow(0 0 26px rgba(0, 83, 255, 0.42));
  image-rendering: pixelated;
  touch-action: pan-y;
}

html[data-theme="light"] .terrain-canvas {
  filter:
    brightness(0.86)
    contrast(1.12)
    saturate(1.55)
    drop-shadow(1px 0 0 rgba(18, 18, 18, 0.1))
    drop-shadow(-1px 0 0 rgba(18, 18, 18, 0.08))
    drop-shadow(0 0 7px rgba(18, 18, 18, 0.14))
    drop-shadow(0 0 18px rgba(18, 18, 18, 0.06));
}

.terrain-canvas.is-dragging {
  cursor: grabbing;
}

.terrain-shimmer {
  display: none;
  pointer-events: none;
}

.paper-overlay {
  display: none;
}

.intro-only.is-landing-active .paper-overlay {
  display: none;
}

@keyframes terrainShimmer {
  0% { transform: translateX(-55%) skewX(-8deg); }
  100% { transform: translateX(55%) skewX(-8deg); }
}

.focus-control input,
.shape-control input,
.texture-debug input,
.texture-debug select {
  width: 100%;
  accent-color: #ffffff;
}

.texture-debug select,
.texture-debug input[type="color"] {
  min-height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(0, 0, 0, 0.42);
  font: inherit;
}

.texture-debug input[type="color"] {
  padding: 1px;
}

.focus-control output,
.shape-control output,
.texture-debug output {
  color: rgba(255, 255, 255, 0.68);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.checkbox-control {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.72);
}

.checkbox-control input {
  width: 15px;
  height: 15px;
  accent-color: #ffffff;
}

.scroll-space {
  height: 340vh;
}

html[data-theme="light"] .final-board,
html[data-theme="light"] .thesis-page {
  background-color: var(--page-bg);
}

html[data-theme="light"] .content-page {
  background-color: transparent;
}

html[data-theme="light"] .thesis-article {
  background: var(--page-bg);
}

html[data-theme="light"] .thesis-article__back,
html[data-theme="light"] .thesis-article__back:hover,
html[data-theme="light"] .thesis-article__back:focus-visible {
  filter: none;
}

html[data-theme="light"] .thesis-evidence-view {
  background:
    radial-gradient(circle at 76% 58%, rgba(18, 18, 18, 0.06), transparent 38%),
    var(--page-bg);
}

html[data-theme="light"] .thesis-article__legend {
  --legend-line-color: #d3ff87;
  --legend-glow:
    0 0 0.18rem rgba(211, 255, 135, 0.84),
    0 0 0.78rem rgba(211, 255, 135, 0.44),
    0 0 1.65rem rgba(211, 255, 135, 0.22);
  --legend-highlight-filter:
    drop-shadow(0 0 2px rgba(211, 255, 135, 0.72))
    drop-shadow(0 0 7px rgba(211, 255, 135, 0.42))
    drop-shadow(0 0 16px rgba(211, 255, 135, 0.26));
}

html[data-theme="light"] .thesis-article__legend-item,
html[data-theme="light"] .thesis-article__evidence-stats,
html[data-theme="light"] .evidence-tile__identity span,
html[data-theme="light"] .evidence-tile__footer {
  color: color-mix(in srgb, var(--theme-fg) 56%, transparent);
}

html[data-theme="light"] .thesis-article__legend-item::before {
  background: #121212;
}

html[data-theme="light"] .thesis-article__legend-item.is-active,
html[data-theme="light"] .thesis-article__legend-item:hover,
html[data-theme="light"] .thesis-article__legend-item:focus-visible {
  color: #b8b8b8;
  text-shadow: none;
}

html[data-theme="light"] .thesis-article__evidence-stats h3,
html[data-theme="light"] .thesis-article__evidence-stats dl,
html[data-theme="light"] .evidence-tile__identity strong,
html[data-theme="light"] .evidence-tile__title {
  color: var(--theme-fg);
}

html[data-theme="light"] .evidence-tile__description {
  color: var(--theme-copy);
}

html[data-theme="light"] .evidence-tile {
  border-color: rgba(18, 18, 18, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.24)),
    rgba(222, 219, 211, 0.86);
  box-shadow:
    0 0 0 1px rgba(18, 18, 18, 0.045) inset,
    0 14px 28px rgba(18, 18, 18, 0.1);
}

html[data-theme="light"] .focus-control,
html[data-theme="light"] .shape-control,
html[data-theme="light"] .texture-debug {
  border-color: rgba(18, 18, 18, 0.16);
  color: color-mix(in srgb, var(--theme-fg) 82%, transparent);
  background: rgba(242, 240, 234, 0.68);
}

html[data-theme="light"] .why-vc-layer-detail__title-accent--productivity,
html[data-theme="light"] .vip-letter--productivity {
  color: #3effc8;
  text-shadow:
    0 0 4px rgba(62, 255, 200, 0.48),
    0 0 14px rgba(62, 255, 200, 0.2);
}

html[data-theme="light"] .content-page__title,
html[data-theme="light"] .thesis-page__title,
html[data-theme="light"] .thesis-article__title,
html[data-theme="light"] .thesis-article__body h3 {
  color: #ffffff;
  text-shadow: none;
}

/* Light mode: flip the chapter marker to a dark box with grey text. */
html[data-theme="light"] .thesis-article__body h2 {
  background: #121212;
  color: #b8b8b8;
}

html[data-theme="light"] .agentic-orbit-label--opportunities {
  color: #7a32db;
  text-shadow: 0 0 9px rgba(122, 50, 219, 0.24);
}

html[data-theme="light"] .agentic-flow-copy--drives {
  color: rgba(122, 50, 219, 0.9);
  text-shadow: 0 0 8px rgba(122, 50, 219, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .intro-only,
  .scroll-space {
    min-height: 100vh;
    height: 100vh;
  }

  .evidence-tile-grid--floating,
  .thesis-evidence-view .evidence-tile {
    animation: none;
  }
}

@media (max-width: 35rem) {
  :root {
    --layout-left: clamp(1.5rem, 6.4vw, 1.9rem);
    --title-top: clamp(5.4rem, 14vh, 6.2rem);
    --copy-top: clamp(11rem, 25vh, 12.5rem);
    --detail-copy-top: clamp(12.8rem, 29vh, 14.4rem);
    --title-width: calc(100vw - var(--layout-left) * 2);
    --copy-width: min(68vw, 20rem);
    --page-title-size: clamp(4rem, 16vw, 5.6rem);
    --detail-title-size: clamp(4rem, 16vw, 5.6rem);
    --body-copy-size: clamp(1.12rem, 4.8vw, 1.24rem);
    --scroll-arrow-size: clamp(1rem, 4.8vw, 1.2rem);
    --nav-icon-size: clamp(2.25rem, 10vw, 2.5rem);
    --nav-icon-track: clamp(2.45rem, 10.8vw, 2.75rem);
    --nav-label-size: clamp(0.82rem, 3.6vw, 0.9rem);
  }

  .intro-title.is-docked {
    left: var(--layout-left);
    top: clamp(1.5rem, 7vw, 1.9rem);
    font-size: clamp(1.55rem, 7vw, 1.8rem);
  }

  .final-board__nav {
    left: var(--layout-left);
    top: clamp(7rem, 26vw, 7.8rem);
    width: clamp(8.5rem, 40vw, 9.5rem);
    gap: clamp(0.9rem, 4vw, 1.15rem);
  }

  .final-board__nav nav {
    gap: 0.94rem;
  }

  .final-board__nav strong,
  .final-board__nav a {
    font-size: 0.69rem;
    line-height: 1.28;
  }

  .terrain-field {
    left: 58vw;
    top: 22vh;
    width: 92vw;
    height: 58vh;
    opacity: 0.64;
  }

  .vc-formation-field,
  .agentic-model-field {
    left: 34vw;
    top: 26vh;
    width: 78vw;
    height: 52vh;
    transform: none;
  }

  .vc-depth-debug {
    left: clamp(0.9rem, 4vw, 1.15rem);
    right: clamp(0.9rem, 4vw, 1.15rem);
    top: clamp(0.8rem, 3.6vw, 1rem);
    grid-template-columns: auto minmax(0, 1fr) 3rem;
    font-size: 0.75rem;
  }

  .content-page__title {
    left: var(--layout-left);
    top: var(--title-top);
    width: var(--title-width);
    font-size: var(--page-title-size);
  }

  .content-page__copy {
    left: var(--layout-left);
    top: var(--copy-top);
    width: min(54vw, 15.5rem);
    font-size: var(--body-copy-size);
    line-height: 1.1;
  }

  .about-socials {
    left: var(--layout-left);
    top: calc(var(--copy-top) + clamp(11.65rem, 18.8vh, 14.1rem));
    transform: translateY(var(--about-social-y));
  }

  .content-page--agentic-vc .content-page__copy {
    width: var(--copy-width);
    font-size: var(--body-copy-size);
    line-height: 1.12;
  }

  .content-page--why-vc .content-page__copy {
    width: var(--copy-width);
    font-size: var(--body-copy-size);
    line-height: 1.12;
  }

  .agentic-vc-scroll-cue {
    left: var(--layout-left);
    top: 78vh;
    gap: clamp(0.45rem, 2.2vw, 0.65rem);
  }

  .why-vc-scroll-cue {
    left: var(--layout-left);
    top: 72vh;
    width: var(--copy-width);
    gap: clamp(0.45rem, 2.2vw, 0.65rem);
  }

  .why-vc-scroll-cue__text {
    font-size: 1.25rem;
  }

  .why-vc-scroll-indicator {
    gap: 0.63rem;
  }

  .why-vc-scroll-indicator img,
  .why-vc-layer-scroll-indicator img,
  .agentic-vc-scroll-cue img {
    width: var(--scroll-arrow-size);
    height: var(--scroll-arrow-size);
  }

  .why-vc-layer-scroll-indicator {
    left: var(--layout-left);
    top: 74vh;
    gap: clamp(0.45rem, 2.2vw, 0.65rem);
  }

  .agentic-vc-layer-scroll-indicator {
    left: var(--layout-left);
    top: 74vh;
    gap: clamp(0.45rem, 2.2vw, 0.65rem);
  }

  .why-vc-layer-detail__title {
    left: var(--layout-left);
    top: var(--title-top);
    width: var(--title-width);
    font-size: var(--detail-title-size);
  }

  .agentic-vc-layer-detail__title {
    left: var(--layout-left);
    top: var(--title-top);
    width: var(--title-width);
    font-size: var(--detail-title-size);
  }

  .why-vc-layer-detail__copy {
    left: var(--layout-left);
    top: var(--detail-copy-top);
    width: min(58vw, 16.9rem);
    font-size: var(--body-copy-size);
    line-height: 1.12;
  }

  .agentic-vc-layer-detail__copy {
    left: var(--layout-left);
    top: var(--detail-copy-top);
    width: min(58vw, 16.9rem);
    font-size: var(--body-copy-size);
    line-height: 1.12;
  }

  .agentic-thesis-graphic {
    right: 1.13rem;
    top: 18vh;
    width: 58vw;
    height: 68vh;
    transform: translate3d(0, 1.13rem, 0) perspective(47.5rem) rotateY(-5deg) rotateX(2deg) scale(0.86);
    transform-origin: 100% 20%;
  }

  .intro-only.is-agentic-thesis-active .agentic-thesis-graphic {
    transform: translate3d(0, 0, 0) perspective(47.5rem) rotateY(-5deg) rotateX(2deg) scale(0.86);
  }

  .agentic-thesis-document {
    left: 8%;
    top: 12%;
    width: 56%;
    height: 64%;
  }

  .agentic-thesis-badge {
    min-width: 7.5rem;
    padding: 0.63rem 0.88rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 1.5rem;
  }

  .micro-nav {
    left: clamp(0.8rem, 3.4vw, 1rem);
    top: auto;
    bottom: clamp(3.8rem, 16vh, 4.3rem);
    grid-template-columns: minmax(3.25rem, 1fr) minmax(3.63rem, 1fr) minmax(3.63rem, 1fr) minmax(5.88rem, 1.55fr);
    column-gap: 0;
    width: calc(100% - 2rem);
  }

  .micro-nav__item {
    grid-template-rows: var(--nav-icon-track) auto;
    row-gap: clamp(0.45rem, 2vw, 0.58rem);
  }

  .micro-nav__graphic {
    width: 100%;
    height: var(--nav-icon-track);
  }

  .micro-nav__item--wide .micro-nav__graphic {
    width: 100%;
  }

  .micro-nav__graphic img {
    height: var(--nav-icon-size);
  }

  .micro-nav__graphic::before {
    filter:
      var(--nav-active-filter)
      drop-shadow(0 0 0.12rem rgba(var(--accent-rgb), 0.88))
      drop-shadow(0 0 0.36rem rgba(var(--accent-rgb), 0.56))
      drop-shadow(0 0 0.68rem rgba(var(--accent-rgb), 0.32))
      drop-shadow(0 0 0.96rem rgba(var(--accent-rgb), 0.16));
  }

  .micro-nav__item--wide .micro-nav__graphic img {
    width: 100%;
    max-height: var(--nav-icon-size);
  }

  .micro-nav__label {
    font-size: var(--nav-label-size);
    margin-top: 0;
  }

  .thesis-page__title {
    left: 1.5rem;
    top: 5.5rem;
    width: calc(100% - 3rem);
    font-size: 3.38rem;
  }

  .thesis-page__copy {
    left: 1.5rem;
    top: 10.63rem;
    width: var(--copy-width);
    font-size: var(--body-copy-size);
    line-height: 1.12;
  }

  .thesis-page__status {
    left: auto;
    right: 1.13rem;
    top: 4.63rem;
    width: 8.63rem;
  }

  .thesis-article {
    --mobile-article-control-left: clamp(1.125rem, 4.8vw, 1.875rem);
    --thesis-article-content-left: 9vw;
    --thesis-article-content-top: 10.375rem;
    --thesis-article-content-width: min(82vw, 28.75rem);
    --thesis-article-dots-gap: 3.5rem;
    --thesis-article-dots-height: 4.5rem;
    --thesis-article-body-gap: 2.125rem;
    --thesis-article-top-fade-height: var(--mobile-top-fade-height);
    padding-bottom: var(--mobile-article-bottom-reserve);
    scroll-padding-bottom: var(--mobile-article-bottom-reserve);
  }

  .thesis-page.is-article-open .thesis-article::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--mobile-browser-bottom, 0px);
    z-index: 20;
    display: block;
    height: clamp(5.75rem, 13vh, 8.5rem);
    background: linear-gradient(
      180deg,
      rgba(var(--page-bg-rgb), 0) 0%,
      rgba(var(--page-bg-rgb), 0.58) 48%,
      rgba(var(--page-bg-rgb), 0.94) 100%
    );
    pointer-events: none;
  }

  .thesis-page.is-article-open .thesis-article.is-evidence-view-open::before {
    display: block;
  }

  .thesis-article__back {
    left: var(--mobile-article-control-left);
    top: max(clamp(1rem, 1vw, 1.4rem), env(safe-area-inset-top));
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.625rem;
    background-color: rgba(255, 255, 255, 0.001);
    backdrop-filter: blur(0.875rem);
    -webkit-backdrop-filter: blur(0.875rem);
  }

  .thesis-article__back::before {
    content: none;
  }

  /* Sit the (now vertical) dot matrix directly beside the cover and size it to its
     own content instead of the full column width, so it fits on screen. */
  .thesis-article__masthead {
    gap: clamp(0.75rem, 3.5vw, 1.5rem);
  }

  .thesis-article__evidence-strip {
    display: grid;
    gap: 1.5rem;
    width: auto;
    justify-items: start;
  }

  .thesis-article__evidence-frame {
    inset:
      -1.125rem
      calc(var(--mobile-article-control-left) - var(--thesis-article-content-left))
      -1.125rem
      calc(var(--mobile-article-control-left) - var(--thesis-article-content-left));
  }

  /* Flipped vertical: 8 columns tall so it reads as a slim dot column beside the
     cover, matching the cover's height. (Desktop keeps the wide 50x8 band.) */
  .thesis-article__dots {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(50, 1fr);
    flex-basis: auto;
    gap: 0;
    width: 2.5rem;
    height: 15rem;
  }

  /* Evidence-database stats don't fit the narrow screen — omit on mobile. */
  .thesis-article__evidence-stats {
    display: none;
  }

  .thesis-dot {
    width: 0.09rem;
    height: 0.09rem;
  }

  .thesis-article__title {
    font-size: 3.13rem;
  }

  .thesis-article__body {
    font-size: var(--body-copy-size);
    line-height: 1.12;
  }

  .thesis-article__body h2 {
    font-size: 2rem;
  }

  .thesis-article__body h3 {
    font-size: 1.5rem;
  }

  .evidence-tile-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .evidence-tile {
    min-height: 11rem;
    padding: 0.94rem;
  }

  .evidence-tile__title {
    font-size: 1.5rem;
  }

  .evidence-tile__description {
    font-size: 1rem;
  }

  .thesis-evidence-view__header {
    top: 1.5rem;
    right: 1.13rem;
    font-size: 1rem;
  }

  .thesis-evidence-view__viewport {
    left: 50%;
    top: 52%;
    width: 100vw;
    height: 82vh;
    transform: translate(-50%, -50%);
  }

  .evidence-tile-grid--floating {
    --evidence-tile-size: clamp(8.88rem, 42vw, 11.5rem);
    --evidence-edge-x: clamp(1.5rem, 7vw, 3rem);
    --evidence-edge-top: clamp(4.5rem, 12vh, 6rem);
    --evidence-edge-bottom: clamp(6rem, 22vh, 10rem);
    gap: 0.88rem;
  }

  .thesis-evidence-view .evidence-tile {
    border-radius: 0.94rem;
  }

  .thesis-evidence-view .evidence-tile__title {
    font-size: 1.5rem;
  }

  .thesis-evidence-view .evidence-tile__description {
    font-size: 0.81rem;
    -webkit-line-clamp: 3;
  }

  .thesis-cartridge-canvas {
    left: 24vw;
    top: 42vh;
    width: 80vw;
    height: 30vh;
  }

  .thesis-grid {
    --thesis-cover-width: clamp(8.9rem, 22vw, 15.5rem);
    --thesis-cover-depth: clamp(0.95rem, 2.2vw, 1.42rem);
    perspective: 1050px;
    perspective-origin: 48% 56%;
  }

  .thesis-card__title {
    font-size: clamp(0.56rem, 11cqw, 2.13rem);
  }

  .thesis-card__number {
    font-size: clamp(1.38rem, 25.3cqw, 5.25rem);
  }

  .thesis-page__rule {
    top: 54vh;
    width: 34vw;
  }

  .focus-control {
    right: 0.88rem;
    bottom: 0.88rem;
    left: 0.88rem;
    grid-template-columns: auto 1fr 3.13rem;
  }

  .shape-control {
    right: 0.88rem;
    top: 0.88rem;
    left: 0.88rem;
    grid-template-columns: auto 1fr 3.13rem;
  }

  .texture-debug {
    right: 0.88rem;
    top: 0.88rem;
    left: 0.88rem;
    grid-template-columns: auto 1fr 3.63rem;
  }
}

@media (max-width: 47.5rem), (max-aspect-ratio: 3 / 4) {
  :root {
    --layout-left: 8vw;
    --title-top: clamp(7.3rem, 12.2vh, 9.7rem);
    --copy-top: clamp(12.7rem, 20.8vh, 15.8rem);
    --detail-copy-top: clamp(13.4rem, 22vh, 17rem);
    --mobile-layer-content-top: calc(var(--title-top) - clamp(0.9rem, 2.2vh, 1.5rem));
    --mobile-layer-copy-gap: clamp(1.1rem, 2.6vh, 1.8rem);
    --mobile-active-scene-top: var(--agentic-mobile-scene-top);
    --mobile-active-scene-height: var(--agentic-mobile-scene-height);
    --mobile-active-copy-bottom: calc(var(--mobile-active-scene-top) + var(--mobile-active-scene-height));
    --mobile-scene-copy-gap: clamp(1.1rem, 2.64vh, 2.2rem);
    --mobile-copy-under-scene-top: calc(var(--mobile-active-scene-top) + var(--mobile-active-scene-height) + var(--mobile-scene-copy-gap));
    --mobile-layer-scene-copy-gap: calc(var(--mobile-active-scene-height) + var(--mobile-scene-copy-gap) + clamp(0.9rem, 2.2vh, 1.75rem));
    --mobile-scene-bottom-margin: clamp(3rem, 6.5vh, 5rem);
    --title-width: 84vw;
    --copy-width: 84vw;
    --page-title-size: clamp(4.4rem, 12vw, 6.3rem);
    --detail-title-size: clamp(4.4rem, 12vw, 6.3rem);
    --body-copy-size: clamp(1.12rem, 2.8vw, 1.48rem);
    --scroll-arrow-size: clamp(0.95rem, 2.6vw, 1.3rem);
    --nav-icon-size: clamp(3rem, 8vw, 4.4rem);
    --nav-icon-track: clamp(3.3rem, 8.8vw, 4.8rem);
    --nav-label-size: clamp(0.9rem, 2.4vw, 1.25rem);
    --agentic-mobile-scene-top: clamp(32rem, 54vh, 49rem);
    --agentic-mobile-scene-height: clamp(18rem, 54vw, 31rem);
    --mobile-visual-height: 100dvh;
    --mobile-browser-bottom: 0px;
    --mobile-nav-bottom: max(clamp(1.4rem, 3vh, 2.6rem), env(safe-area-inset-bottom));
    --mobile-nav-width: min(88vw, 39rem);
    --mobile-nav-pad-x: clamp(0.75rem, 2vw, 1.25rem);
    --mobile-nav-pad-top: clamp(0.7rem, 1.6vh, 1rem);
    --mobile-nav-pad-bottom: clamp(0.65rem, 1.4vh, 0.95rem);
    --mobile-nav-row-gap: clamp(0.28rem, 0.85vw, 0.55rem);
    --mobile-nav-height: calc(var(--mobile-nav-pad-top) + var(--nav-icon-track) + var(--mobile-nav-row-gap) + var(--nav-label-size) * 1.2 + var(--mobile-nav-pad-bottom));
    --mobile-top-fade-height: clamp(5.75rem, 12vh, 8.25rem);
    --mobile-top-controls-offset: clamp(0.45rem, 1.2vh, 0.9rem);
    --mobile-bottom-chrome-clearance: calc(max(clamp(4.75rem, 11vh, 7.5rem), var(--mobile-browser-bottom)) + env(safe-area-inset-bottom));
    --mobile-page-bottom-reserve: calc(var(--mobile-nav-height) + var(--mobile-nav-bottom) + var(--mobile-bottom-chrome-clearance) + clamp(2.75rem, 7vh, 5.5rem));
    --mobile-nav-fade-height: calc(var(--mobile-nav-height) + var(--mobile-nav-bottom) + clamp(3.1rem, 9vh, 5.2rem));
    --mobile-article-bottom-reserve: calc(var(--mobile-bottom-chrome-clearance) + clamp(8rem, 20vh, 13rem));
    --mobile-evidence-bottom-clearance: calc(max(clamp(5.5rem, 14vh, 9rem), var(--mobile-browser-bottom)) + env(safe-area-inset-bottom));
    --mobile-page-scroll-height: calc(max(var(--mobile-active-copy-bottom), var(--mobile-copy-under-scene-top)) + var(--mobile-scene-bottom-margin) + var(--mobile-nav-height) + var(--mobile-nav-bottom) + var(--mobile-page-bottom-reserve));
    --mobile-thesis-grid-gap: clamp(0.5rem, 1.25vw, 0.8rem);
    --mobile-thesis-tile-width: calc((84vw - var(--mobile-thesis-grid-gap) * 2) / 3);
    --mobile-thesis-tile-height: var(--mobile-thesis-tile-width);
    --mobile-thesis-grid-top: clamp(16rem, 25vh, 23rem);
    --mobile-thesis-index-height: calc(var(--mobile-thesis-grid-top) + var(--mobile-thesis-tile-height) * 3 + var(--mobile-thesis-grid-gap) * 2 + var(--mobile-nav-height) + var(--mobile-nav-bottom) + clamp(2rem, 5vh, 4rem));
  }

  .site-header-meta {
    left: var(--layout-left);
    right: auto;
    top: calc(max(clamp(1rem, 1vw, 1.4rem), env(safe-area-inset-top)) + var(--mobile-top-controls-offset) + clamp(2rem, 1.95vw, 2.6rem) / 2);
    display: block;
    transform: translateY(-50%);
  }

  .site-top-controls {
    top: calc(max(clamp(1rem, 1vw, 1.4rem), env(safe-area-inset-top)) + var(--mobile-top-controls-offset));
  }

  .site-header-meta__block--places,
  .site-header-meta__block--haiku {
    display: none;
  }

  html.is-thesis-article-open .site-header-meta {
    left: 50%;
    transform: translate(-50%, -50%);
  }

  html.is-thesis-article-open .site-header-meta__block--identity {
    text-align: center;
  }

  .content-page__title,
  .thesis-page__title,
  .why-vc-layer-detail__title,
  .agentic-vc-layer-detail__title {
    left: 50%;
    top: calc(var(--title-top) - clamp(0.9rem, 2.2vh, 1.5rem));
    width: var(--title-width);
    font-size: var(--page-title-size);
    text-align: center;
    transform: translateX(-50%);
  }

  .content-page__copy,
  .thesis-page__copy,
  .content-page--agentic-vc .content-page__copy,
  .content-page--why-vc .content-page__copy {
    left: 50%;
    top: calc(var(--copy-top) - clamp(1.55rem, 4.2vh, 2.6rem));
    width: var(--copy-width);
    font-size: clamp(1.24rem, 3.18vw, 1.64rem);
    line-height: 1.12;
    text-align: center;
    transform: translateX(-50%);
  }

  /* Mobile: the intro copy sits as a compact block ABOVE the coverflow (which
     fills the lower screen) instead of the desktop frosted panel that floats over
     the deck. Same specificity as the desktop webgl rule so it actually overrides
     it inside this query. */
  .thesis-page.is-webgl-coverflow .thesis-page__copy {
    left: 50%;
    top: calc(var(--title-top) + var(--page-title-size) * 0.92 + 0.4rem);
    width: min(calc(100% - 2.2rem), 33rem);
    transform: translateX(-50%);
    text-align: center;
    padding: 0.85rem 1rem;
  }

  /* On mobile the copy DOES scroll-collapse (same as desktop) so it stops overlapping
     the deck as soon as you browse the tiles; it returns when you scroll back to home.
     Keep the mobile centring transform while fading/sliding it up. */
  .thesis-page.is-webgl-coverflow.is-copy-collapsed:not(.is-article-open):not(.is-cover-detail-open) .thesis-page__copy {
    opacity: 0 !important;
    filter: blur(2px);
    transform: translateX(-50%) translateY(-12px) scale(0.98);
    pointer-events: none;
  }

  .about-socials {
    left: 50%;
    top: calc(var(--copy-top) + clamp(12.2rem, 21vh, 13.6rem));
    max-width: calc(100vw - 2rem);
    padding: clamp(0.7rem, 2.4vw, 0.9rem) clamp(0.82rem, 2.7vw, 1rem);
    transform: translate(-50%, var(--about-social-y));
  }

  .why-vc-layer-detail__copy,
  .agentic-vc-layer-detail__copy {
    left: 50%;
    top: var(--mobile-layer-copy-top);
    width: var(--copy-width);
    font-size: clamp(1.24rem, 3.18vw, 1.64rem);
    line-height: 1.12;
    text-align: center;
    transform: translateX(-50%);
  }

  .thesis-article__body {
    font-size: clamp(1.24rem, 3.18vw, 1.64rem);
    line-height: 1.12;
  }

  .content-page--why-vc.is-layer-blockchain-active .content-page__title,
  .content-page--why-vc.is-layer-blockchain-active .content-page__copy,
  .content-page--why-vc.is-layer-ai-active .content-page__title,
  .content-page--why-vc.is-layer-ai-active .content-page__copy,
  .content-page--why-vc.is-layer-ar-active .content-page__title,
  .content-page--why-vc.is-layer-ar-active .content-page__copy,
  .content-page--why-vc.is-layer-ce1-active .content-page__title,
  .content-page--why-vc.is-layer-ce1-active .content-page__copy,
  .intro-only.is-agentic-orbit-active .content-page--agentic-vc .content-page__title,
  .intro-only.is-agentic-orbit-active .content-page--agentic-vc .content-page__copy,
  .intro-only.is-agentic-orbit-active .content-page--agentic-vc .agentic-vc-scroll-cue {
    transform: translate(-50%, -1.13rem);
  }

  .why-vc-layer-detail,
  .agentic-vc-layer-detail {
    box-sizing: border-box;
    padding-top: var(--mobile-layer-content-top);
    transform: none !important;
    transition:
      opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
      visibility 620ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .why-vc-layer-detail__title,
  .agentic-vc-layer-detail__title {
    position: relative;
    left: auto;
    top: auto;
    width: var(--title-width);
    margin: 0 auto;
    transform: none;
  }

  .why-vc-layer-detail__copy,
  .agentic-vc-layer-detail__copy {
    position: relative;
    left: auto;
    top: auto;
    width: var(--copy-width);
    margin: var(--mobile-layer-copy-gap) auto 0;
    transform: none;
  }

  .intro-only.is-about-active .content-page--about .content-page__copy,
  .intro-only.is-why-vc-active .content-page--why-vc .content-page__copy,
  .intro-only.is-agentic-vc-active:not(.is-agentic-orbit-active) .content-page--agentic-vc .content-page__copy {
    top: var(--mobile-copy-under-scene-top);
  }

  .intro-only.is-about-active .content-page--about .about-socials {
    top: calc(var(--mobile-copy-under-scene-top) + clamp(12.2rem, 21vh, 13.6rem));
  }

  .intro-only.is-about-active {
    --mobile-page-scroll-height: calc(var(--mobile-about-content-bottom, var(--mobile-active-copy-bottom)) + var(--mobile-nav-height) + var(--mobile-nav-bottom) + var(--mobile-bottom-chrome-clearance) + clamp(0.75rem, 2.8vh, 1.6rem));
  }

  .content-page--why-vc.is-layer-blockchain-active .why-vc-layer-detail--blockchain .why-vc-layer-detail__copy,
  .content-page--why-vc.is-layer-ai-active .why-vc-layer-detail--ai .why-vc-layer-detail__copy,
  .content-page--why-vc.is-layer-ar-active .why-vc-layer-detail--ar .why-vc-layer-detail__copy,
  .content-page--why-vc.is-layer-ce1-active .why-vc-layer-detail--ce1 .why-vc-layer-detail__copy,
  .intro-only.is-agentic-orbit-active .content-page--agentic-vc.is-agentic-layer-architecture-active .agentic-vc-layer-detail--architecture .agentic-vc-layer-detail__copy,
  .intro-only.is-agentic-orbit-active .content-page--agentic-vc.is-agentic-layer-data-active .agentic-vc-layer-detail--data .agentic-vc-layer-detail__copy,
  .intro-only.is-agentic-orbit-active .content-page--agentic-vc.is-agentic-layer-thesis-active .agentic-vc-layer-detail--thesis .agentic-vc-layer-detail__copy {
    margin-top: var(--mobile-layer-scene-copy-gap);
  }

  .intro-only.is-agentic-orbit-active:not(.is-agentic-evidence-active) .content-page--agentic-vc.is-agentic-layer-architecture-active .agentic-vc-layer-detail--architecture .agentic-vc-layer-detail__copy,
  .intro-only.is-agentic-orbit-active:not(.is-agentic-evidence-active) .content-page--agentic-vc.is-agentic-layer-data-active .agentic-vc-layer-detail--data .agentic-vc-layer-detail__copy,
  .intro-only.is-agentic-orbit-active:not(.is-agentic-evidence-active) .content-page--agentic-vc.is-agentic-layer-thesis-active .agentic-vc-layer-detail--thesis .agentic-vc-layer-detail__copy {
    margin-top: calc(var(--agentic-mobile-scene-height) + var(--mobile-scene-copy-gap) + clamp(1.25rem, 3.2vh, 2.5rem));
  }

  .intro-only.is-agentic-orbit-active .content-page--agentic-vc.is-agentic-layer-evidence-active .agentic-vc-layer-detail--evidence .agentic-vc-layer-detail__copy {
    margin-top: calc(var(--mobile-layer-scene-copy-gap) + clamp(4.2rem, 11vh, 7rem));
  }

  .content-page--why-vc.is-layer-blockchain-active .why-vc-layer-detail--blockchain .why-vc-layer-detail__title,
  .content-page--why-vc.is-layer-blockchain-active .why-vc-layer-detail--blockchain .why-vc-layer-detail__copy,
  .content-page--why-vc.is-layer-ai-active .why-vc-layer-detail--ai .why-vc-layer-detail__title,
  .content-page--why-vc.is-layer-ai-active .why-vc-layer-detail--ai .why-vc-layer-detail__copy,
  .content-page--why-vc.is-layer-ar-active .why-vc-layer-detail--ar .why-vc-layer-detail__title,
  .content-page--why-vc.is-layer-ar-active .why-vc-layer-detail--ar .why-vc-layer-detail__copy,
  .content-page--why-vc.is-layer-ce1-active .why-vc-layer-detail--ce1 .why-vc-layer-detail__title,
  .content-page--why-vc.is-layer-ce1-active .why-vc-layer-detail--ce1 .why-vc-layer-detail__copy {
    pointer-events: auto;
    touch-action: pan-y;
  }

  .terrain-field,
  .vc-formation-field,
  .agentic-model-field,
  .intro-only.is-agentic-orbit-active .agentic-model-field {
    left: 50%;
    top: clamp(18.5rem, 36vh, 34rem);
    width: 100vw;
    height: min(64vw, 34vh, 40rem);
    transform: translateX(-50%);
    opacity: 0.86;
  }

  .intro-only.is-why-vc-active .vc-formation-field {
    top: calc(var(--mobile-active-scene-top) + clamp(1.2rem, 3.4vh, 2.05rem));
    width: 100vw;
    height: var(--mobile-active-scene-height);
  }

  .intro-only.is-agentic-orbit-active .agentic-model-field {
    top: var(--mobile-active-scene-top);
    width: 116vw;
    height: var(--mobile-active-scene-height);
  }

  .intro-only.is-agentic-orbit-active:not(.is-agentic-evidence-active) .agentic-model-field {
    height: var(--agentic-mobile-scene-height);
  }

  .intro-only.is-yvc-depth-active .vc-formation-field {
    top: var(--mobile-active-scene-top);
    width: 100vw;
    height: var(--mobile-active-scene-height);
  }

  .intro-only.is-about-active .agentic-model-field {
    top: var(--mobile-active-scene-top);
    width: min(96vw, 40rem);
    height: min(64vw, 44vh, 28rem);
  }

  .intro-only.is-agentic-vc-active:not(.is-agentic-orbit-active) .agentic-model-field {
    top: var(--mobile-active-scene-top);
    width: 100vw;
    height: var(--mobile-active-scene-height);
  }

  .intro-only.is-agentic-evidence-active .agentic-evidence-preview {
    left: 50%;
    right: auto;
    top: var(--mobile-active-scene-top);
    width: min(96vw, 38rem);
    min-height: 0;
    height: clamp(20rem, 54vh, 30rem);
    align-items: flex-start;
    opacity: 0.96;
    transform: translateX(-50%);
    touch-action: pan-y;
  }

  .intro-only.is-content-active.is-agentic-evidence-active .final-board::before {
    height: calc(var(--mobile-page-scroll-height) + clamp(9rem, 22vh, 15rem));
  }

  .intro-only.is-agentic-evidence-active .agentic-evidence-preview__scene {
    position: relative;
    width: 100%;
    justify-content: center;
    gap: clamp(0.35rem, 1.2vw, 0.75rem);
    transform:
      rotateX(var(--evidence-rot-x))
      rotateY(var(--evidence-rot-y))
      rotateZ(1.2deg)
      scale(0.8);
    transform-origin: 50% 0;
  }

  .intro-only.is-agentic-evidence-active .agentic-evidence-preview__note {
    position: absolute;
    left: clamp(0.6rem, 2.4vw, 1.1rem);
    top: clamp(1rem, 4.2vh, 2rem);
    z-index: 5;
    width: min(36vw, 13rem);
    min-height: 10rem;
    padding: 0.9rem 0.85rem 0.85rem;
    background: rgba(4, 4, 4, 0.18);
    backdrop-filter: blur(14px) saturate(1.05);
    -webkit-backdrop-filter: blur(14px) saturate(1.05);
    transform: translateZ(76px);
  }

  .intro-only.is-agentic-evidence-active .agentic-evidence-preview__note::before,
  .intro-only.is-agentic-evidence-active .agentic-evidence-preview__note::after {
    display: none;
  }

  .intro-only.is-agentic-evidence-active .agentic-evidence-preview__note p {
    margin: 0.8rem 0 0.75rem;
    font-size: clamp(0.76rem, 2.35vw, 0.96rem);
    line-height: 1.08;
  }

  .intro-only.is-agentic-evidence-active .agentic-evidence-preview__eyebrow {
    font-size: clamp(0.9rem, 3vw, 1.1rem);
  }

  .intro-only.is-agentic-evidence-active .agentic-evidence-preview__meta {
    font-size: clamp(0.72rem, 2.3vw, 0.9rem);
  }

  .intro-only.is-agentic-evidence-active .agentic-evidence-preview__frame,
  .intro-only.is-agentic-evidence-active .agentic-evidence-preview .twitter-tweet,
  .intro-only.is-agentic-evidence-active .agentic-evidence-preview iframe {
    z-index: 1;
    width: min(62vw, 22rem) !important;
    max-width: min(62vw, 22rem) !important;
  }

  .intro-only.is-agentic-evidence-active .agentic-evidence-preview__frame {
    transform:
      translateX(clamp(2rem, 12vw, 4.5rem))
      translateY(clamp(1.8rem, 5.8vh, 3.1rem))
      translateZ(32px);
  }

  .intro-only.is-agentic-evidence-active .agentic-evidence-preview__frame {
    height: clamp(14rem, 36vh, 21rem);
    max-height: clamp(14rem, 36vh, 21rem);
  }

  .intro-only.is-content-active .final-board,
  .intro-only.is-thesis-active .final-board {
    bottom: auto;
    height: max(var(--mobile-visual-height, 100dvh), 100dvh);
    overflow-y: auto;
    overflow-x: hidden;
    transform: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .intro-only.is-content-active .content-page.is-active {
    bottom: auto;
    min-height: max(var(--mobile-page-scroll-height), var(--mobile-visual-height, 100dvh));
    overflow: visible;
  }

  .intro-only.is-thesis-active .thesis-page {
    bottom: auto;
    min-height: max(var(--mobile-thesis-index-height), var(--mobile-visual-height, 100dvh));
    overflow: visible;
  }

  .intro-only.is-mobile-layer-scroll-locked .final-board,
  .intro-only.is-thesis-deck-scroll-locked .final-board {
    overflow-y: hidden;
    -webkit-overflow-scrolling: auto;
    touch-action: none;
  }

  .intro-only.is-content-active .final-board::-webkit-scrollbar,
  .intro-only.is-thesis-active .final-board::-webkit-scrollbar {
    display: none;
  }

  .intro-only.is-content-active .final-board::before,
  .intro-only.is-thesis-active .final-board::before {
    content: "";
    position: relative;
    inset: auto;
    display: block;
    width: 1px;
    background: none;
    pointer-events: none;
  }

  .intro-only.is-content-active .final-board::before {
    height: var(--mobile-page-scroll-height);
  }

  .intro-only.is-thesis-active .final-board::before {
    height: max(var(--mobile-thesis-index-height), var(--mobile-visual-height, 100dvh));
  }

  .intro-only.is-landing-active .content-page.is-active::after,
  .intro-only.is-thesis-active .thesis-page::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    z-index: 19;
    display: block;
    height: var(--mobile-nav-fade-height);
    background: linear-gradient(
      180deg,
      rgba(var(--page-bg-rgb), 0) 0%,
      rgba(var(--page-bg-rgb), 0.7) 48%,
      rgba(var(--page-bg-rgb), 0.98) 100%
    );
    pointer-events: none;
  }

  .intro-only.is-landing-active .content-page.is-active::before,
  .intro-only.is-thesis-active .thesis-page::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 19;
    display: block;
    height: var(--mobile-top-fade-height);
    background: linear-gradient(
      180deg,
      rgba(var(--page-bg-rgb), 0.96) 0%,
      rgba(var(--page-bg-rgb), 0.78) 46%,
      rgba(var(--page-bg-rgb), 0) 100%
    );
    pointer-events: none;
  }

  .intro-only.is-yvc-depth-active .vc-formation-field,
  .intro-only.is-agentic-vc-active .agentic-model-field,
  .intro-only.is-why-vc-active .vc-formation-field {
    opacity: 0.9;
    visibility: visible;
  }

  .intro-only.is-agentic-evidence-active .agentic-model-field {
    opacity: 0;
    visibility: hidden;
  }

  .why-vc-scroll-cue,
  .why-vc-scroll-indicator,
  .agentic-vc-scroll-cue,
  .why-vc-layer-scroll-indicator,
  .agentic-vc-layer-scroll-indicator {
    left: 50%;
    top: clamp(25.5rem, 48vh, 45rem);
    justify-content: center;
    width: var(--copy-width);
    transform: translateX(-50%);
  }

  .why-vc-layer-scroll-indicator,
  .agentic-vc-layer-scroll-indicator {
    top: clamp(42rem, 83vh, 74rem);
  }

  .why-vc-scroll-indicator,
  .why-vc-layer-scroll-indicator,
  .agentic-vc-scroll-cue {
    gap: clamp(0.5rem, 1.7vw, 0.85rem);
  }

  .why-vc-scroll-cue__text {
    display: none;
  }

  .why-vc-scroll-cue,
  .why-vc-scroll-indicator,
  .agentic-vc-scroll-cue,
  .why-vc-layer-scroll-indicator,
  .agentic-vc-layer-scroll-indicator {
    position: fixed;
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(var(--mobile-nav-bottom) + var(--mobile-nav-height) + clamp(0.35rem, 1.1vw, 0.7rem));
    z-index: 21;
    width: auto;
    padding: 0;
    border-radius: 0;
    background: rgba(4, 4, 4, 0.18);
    backdrop-filter: blur(16px) saturate(1.05);
    -webkit-backdrop-filter: blur(16px) saturate(1.05);
    box-shadow: none;
    transform: translateX(-50%);
  }

  .why-vc-scroll-cue .why-vc-scroll-indicator {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
    transform: none;
  }

  .has-mobile-progress-cue > img {
    display: none;
  }

  .mobile-progress-cue {
    position: relative;
    z-index: 22;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.11rem, 0.45vw, 0.18rem);
  }

  .mobile-progress-overlay {
    position: fixed;
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(var(--mobile-nav-bottom) + var(--mobile-nav-height) + clamp(0.35rem, 1.1vw, 0.7rem));
    z-index: 22;
    display: flex;
    justify-content: center;
    width: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity 160ms ease, visibility 160ms ease;
  }

  .mobile-progress-overlay.is-visible {
    opacity: 1;
    visibility: visible;
  }

  .content-page .has-mobile-progress-cue > .mobile-progress-cue {
    display: none;
  }

  .mobile-progress-cue__segment {
    position: relative;
    display: block;
    width: clamp(0.16rem, 0.72vw, 0.26rem);
    height: clamp(0.78rem, 2.6vw, 1.08rem);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.32);
    box-shadow: 0 0 0.34rem rgba(255, 255, 255, 0.2);
    transition:
      background-color 130ms ease,
      opacity 130ms ease,
      box-shadow 130ms ease;
  }

  .mobile-progress-cue.is-reading .mobile-progress-cue__segment.is-filled {
    background: #ffffff;
    box-shadow:
      0 0 0.32rem rgba(255, 255, 255, 0.9),
      0 0 0.86rem rgba(255, 255, 255, 0.58);
  }

  .thesis-article__legend-cue .mobile-progress-cue.is-reading .mobile-progress-cue__segment.is-current {
    animation: thesis-article-progress-blink 1.8s ease-in-out infinite;
  }

  @keyframes thesis-article-progress-blink {
    0%,
    100% {
      opacity: 1;
      box-shadow:
        0 0 0.32rem rgba(255, 255, 255, 0.9),
        0 0 0.86rem rgba(255, 255, 255, 0.58);
    }

    50% {
      opacity: 0.34;
      box-shadow:
        0 0 0.18rem rgba(255, 255, 255, 0.42),
        0 0 0.5rem rgba(255, 255, 255, 0.24);
    }
  }

  .mobile-progress-cue.is-boundary-forward.is-boundary-pushing .mobile-progress-cue__segment {
    background: #ffffff;
    box-shadow:
      0 0 0.26rem rgba(255, 255, 255, 0.78),
      0 0 0.72rem rgba(255, 255, 255, 0.42);
  }

  .mobile-progress-cue.is-boundary-pushing .mobile-progress-cue__segment.is-filled {
    background: rgba(235, 153, 78, 0.98);
    box-shadow:
      0 0 0.25rem rgba(235, 153, 78, 0.75),
      0 0 0.75rem rgba(235, 153, 78, 0.48);
  }

  .mobile-progress-cue.is-boundary-ready .mobile-progress-cue__segment.is-filled {
    background: rgba(86, 200, 147, 0.98);
    box-shadow:
      0 0 0.25rem rgba(86, 200, 147, 0.78),
      0 0 0.78rem rgba(86, 200, 147, 0.52);
  }

  .micro-nav {
    position: fixed;
    left: 50%;
    top: auto;
    bottom: var(--mobile-nav-bottom);
    z-index: 20;
    width: var(--mobile-nav-width);
    grid-template-columns: 1fr 1fr 1fr 1.6fr;
    column-gap: clamp(0.08rem, 0.55vw, 0.38rem);
    padding: var(--mobile-nav-pad-top) var(--mobile-nav-pad-x) var(--mobile-nav-pad-bottom);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    overflow: visible;
    transform: translateX(-50%);
  }

  .micro-nav::before,
  .micro-nav::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    filter:
      drop-shadow(0 0 0.16rem rgba(255, 255, 255, 0.95))
      drop-shadow(0 0 0.55rem rgba(255, 255, 255, 0.72))
      drop-shadow(0 0 1.15rem rgba(255, 255, 255, 0.54))
      drop-shadow(0 0 1.85rem rgba(255, 255, 255, 0.28));
  }

  .micro-nav::before {
    background:
      linear-gradient(#ffffff, #ffffff) left top / clamp(0.95rem, 3vw, 1.35rem) 0.095rem no-repeat,
      linear-gradient(#ffffff, #ffffff) left top / 0.095rem clamp(0.95rem, 3vw, 1.35rem) no-repeat,
      linear-gradient(#ffffff, #ffffff) right top / clamp(0.95rem, 3vw, 1.35rem) 0.095rem no-repeat,
      linear-gradient(#ffffff, #ffffff) right top / 0.095rem clamp(0.95rem, 3vw, 1.35rem) no-repeat;
  }

  .micro-nav::after {
    background:
      linear-gradient(#ffffff, #ffffff) left bottom / clamp(0.95rem, 3vw, 1.35rem) 0.095rem no-repeat,
      linear-gradient(#ffffff, #ffffff) left bottom / 0.095rem clamp(0.95rem, 3vw, 1.35rem) no-repeat,
      linear-gradient(#ffffff, #ffffff) right bottom / clamp(0.95rem, 3vw, 1.35rem) 0.095rem no-repeat,
      linear-gradient(#ffffff, #ffffff) right bottom / 0.095rem clamp(0.95rem, 3vw, 1.35rem) no-repeat;
  }

  .micro-nav__item {
    grid-template-rows: var(--nav-icon-track) auto;
    row-gap: var(--mobile-nav-row-gap);
    overflow: visible;
  }

  .micro-nav__graphic {
    height: var(--nav-icon-track);
    overflow: visible;
  }

  .micro-nav__graphic img {
    height: var(--nav-icon-size);
  }

  .micro-nav__item--wide .micro-nav__graphic img {
    width: 100%;
    max-height: var(--nav-icon-size);
  }

  .micro-nav__label {
    white-space: nowrap;
  }

  .thesis-page.is-article-open.is-legend-rail {
    --thesis-legend-cue-bottom: calc(max(clamp(0.7rem, 2.4vh, 1.25rem), env(safe-area-inset-bottom)) + var(--mobile-browser-bottom, 0px));
  }

  .thesis-page.is-article-open.is-legend-rail .thesis-article__legend {
    --thesis-legend-panel-gap: clamp(0.72rem, 2.4vh, 1.15rem);
    --thesis-legend-cue-height: 2.25rem;
    left: 50%;
    right: auto;
    top: auto;
    bottom: var(--thesis-legend-cue-bottom);
    z-index: 21;
    display: block;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: visible;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    animation: none;
    transform: translateX(-50%);
  }

  .thesis-page.is-article-open.is-legend-rail .thesis-article__legend::before {
    display: none;
  }

  .thesis-page.is-article-open.is-legend-rail .thesis-article__legend::after {
    display: none;
  }

  .thesis-page.is-article-open.is-legend-rail .thesis-article__legend-cue {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: var(--thesis-legend-cue-bottom);
    z-index: 23;
    display: block;
    min-height: 2.25rem;
    padding: 0.48rem 0.28rem;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
    transform: translateX(-50%);
  }

  .thesis-page.is-article-open.is-legend-rail .thesis-article__legend-cue .mobile-progress-cue {
    pointer-events: none;
  }

  .thesis-page.is-article-open.is-legend-rail .thesis-article__legend-frame,
  .thesis-page.is-article-open.is-legend-rail .thesis-article__legend-item {
    display: none;
  }

  .thesis-page.is-article-open.is-legend-rail.is-legend-expanded .thesis-article__legend {
    --legend-line-color: #ffffff;
    --legend-glow:
      0 0 0.18rem rgba(255, 255, 255, 0.92),
      0 0 0.78rem rgba(255, 255, 255, 0.5),
      0 0 1.65rem rgba(255, 255, 255, 0.26);
    --legend-highlight-filter:
      none;
    left: 50%;
    top: auto;
    bottom: calc(var(--thesis-legend-cue-bottom) + var(--thesis-legend-cue-height) + var(--thesis-legend-panel-gap));
    z-index: 22;
    width: min(78vw, 20rem);
    min-height: min(24vh, 16rem);
    max-height: min(52vh, 30rem);
    padding: 1.35rem 1.15rem 1.25rem 1.55rem;
    overflow: visible;
    border-radius: 0;
    background: rgba(8, 8, 8, 0.48);
    backdrop-filter: blur(1rem) saturate(1.16);
    -webkit-backdrop-filter: blur(1rem) saturate(1.16);
    box-shadow:
      0 14px 36px rgba(0, 0, 0, 0.5),
      0 0 2.2rem rgba(255, 255, 255, 0.08);
    transform: translateX(-50%);
    animation: thesisMobileLegendPanelReveal 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .thesis-page.is-article-open.is-legend-rail.is-legend-expanded .thesis-article__legend-cue {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: var(--thesis-legend-cue-bottom);
    z-index: 23;
    display: block;
    transform: translateX(-50%);
  }

  .thesis-page.is-article-open.is-legend-rail.is-legend-expanded .thesis-article__legend::before {
    display: none;
  }

  .thesis-page.is-article-open.is-legend-rail.is-legend-expanded .thesis-article__legend::after {
    display: none;
  }

  .thesis-page.is-article-open.is-legend-rail.is-legend-expanded .thesis-article__legend-frame {
    display: block;
  }

  .thesis-page.is-article-open.is-legend-rail.is-legend-expanded .thesis-article__legend-seed {
    display: none;
  }

  .thesis-page.is-article-open.is-legend-rail.is-legend-expanded .thesis-article__legend-corner {
    opacity: 0;
    animation: thesisMobileLegendCornerPop 620ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
  }

  .thesis-page.is-article-open.is-legend-rail.is-legend-expanded .thesis-article__legend-corner--top-left,
  .thesis-page.is-article-open.is-legend-rail.is-legend-expanded .thesis-article__legend-corner--top-right {
    top: -0.22rem;
  }

  .thesis-page.is-article-open.is-legend-rail.is-legend-expanded .thesis-article__legend-corner--bottom-left,
  .thesis-page.is-article-open.is-legend-rail.is-legend-expanded .thesis-article__legend-corner--bottom-right {
    top: calc(100% - var(--legend-corner-size) + 0.22rem);
  }

  .thesis-page.is-article-open.is-legend-rail.is-legend-expanded .thesis-article__legend-corner--top-left,
  .thesis-page.is-article-open.is-legend-rail.is-legend-expanded .thesis-article__legend-corner--bottom-left {
    left: -0.22rem;
  }

  .thesis-page.is-article-open.is-legend-rail.is-legend-expanded .thesis-article__legend-corner--top-right,
  .thesis-page.is-article-open.is-legend-rail.is-legend-expanded .thesis-article__legend-corner--bottom-right {
    right: -0.22rem;
  }

  .thesis-page.is-article-open.is-legend-rail.is-legend-expanded .thesis-article__legend-corner::before,
  .thesis-page.is-article-open.is-legend-rail.is-legend-expanded .thesis-article__legend-corner::after {
    filter: none;
    transform: scale(1);
    animation: thesisMobileLegendCornerLine 520ms cubic-bezier(0.16, 1, 0.3, 1) 170ms both;
  }

  .thesis-page.is-article-open.is-legend-rail.is-legend-expanded .thesis-article__legend-item {
    display: block;
    padding-left: 0.8rem;
    color: rgba(255, 255, 255, 0.56);
    font-size: clamp(1rem, 3.6vw, 1.25rem);
    line-height: 1.06;
    opacity: 0;
    transform: translateY(0.35rem);
    animation: thesisMobileLegendItemReveal 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(180ms + var(--legend-index, 0) * 42ms);
  }

  .thesis-page.is-article-open.is-legend-rail.is-legend-expanded .thesis-article__legend-item + .thesis-article__legend-item {
    margin-top: 0.72rem;
  }

  @keyframes thesisMobileLegendPanelReveal {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(0.7rem) scale(0.96);
    }

    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0) scale(1);
    }
  }

  @keyframes thesisMobileLegendCornerPop {
    0% {
      opacity: 0;
    }

    45% {
      opacity: 1;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes thesisMobileLegendCornerLine {
    from {
      transform: scale(0.16);
    }

    to {
      transform: scale(1);
    }
  }

  @keyframes thesisMobileLegendItemReveal {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .thesis-evidence-view__viewport {
    top: 0;
    bottom: 0;
    height: auto;
    box-sizing: border-box;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 3.5%, #000 96.5%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 3.5%, #000 96.5%, transparent 100%);
  }

  .evidence-tile-grid--floating {
    --evidence-tile-size: min(94vw, 38rem);
    --evidence-gap: clamp(1rem, 4vw, 1.5rem);
    --evidence-edge-x: 7vw;
    --evidence-edge-top: 20vh;
    --evidence-edge-bottom: calc(56vh + var(--mobile-evidence-bottom-clearance));
  }

  .thesis-evidence-view .evidence-tile {
    width: var(--evidence-tile-size);
    border-radius: 16px;
    content-visibility: auto;
    contain-intrinsic-size: 28rem 32rem;
  }

  .thesis-evidence-view .evidence-tile.is-selected {
    z-index: 240 !important;
  }

  .thesis-evidence-view .evidence-selection-panel {
    position: fixed;
    left: clamp(0.8rem, 3vw, 1.3rem) !important;
    right: clamp(0.8rem, 3vw, 1.3rem);
    top: auto !important;
    bottom: calc(var(--mobile-evidence-bottom-clearance) + clamp(5rem, 14vh, 7rem));
    z-index: 3000 !important;
    box-sizing: border-box;
    width: auto;
    height: auto;
    overflow: visible;
    overscroll-behavior: contain;
    min-height: 0;
    padding: 1.2rem 1.1rem 1.05rem;
    border: 0;
    border-radius: 0;
    background:
      linear-gradient(180deg, rgba(12, 12, 12, 0.82), rgba(4, 4, 4, 0.92));
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55);
    --detail-enter-x: 0px;
    --detail-enter-y: 16px;
    --detail-line-color: var(--accent);
    --detail-glow:
      0 0 4px rgba(var(--accent-rgb), 0.42),
      0 0 12px rgba(var(--accent-rgb), 0.24),
      0 0 22px rgba(var(--accent-rgb), 0.12);
    --detail-filter:
      drop-shadow(0 0 2px rgba(var(--accent-rgb), 0.58))
      drop-shadow(0 0 9px rgba(var(--accent-rgb), 0.3))
      drop-shadow(0 0 16px rgba(var(--accent-rgb), 0.14));
    transform: translate3d(0, var(--detail-enter-y, 0px), 0);
  }

  .thesis-evidence-view .evidence-selection-panel__description,
  .thesis-evidence-view .evidence-selection-panel__comment {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .thesis-evidence-view .evidence-selection-panel__corner {
    filter: var(--detail-filter);
  }

  .thesis-evidence-view .evidence-selection-panel.is-visible {
    transform: translate3d(0, 0, 0);
  }

  .thesis-evidence-view .evidence-selection-panel__id {
    font-size: clamp(2.7rem, 16vw, 4.5rem);
  }

  .thesis-evidence-view .evidence-selection-panel__description {
    font-size: clamp(1.1rem, 5vw, 1.45rem);
  }

  .thesis-evidence-view .evidence-selection-panel__comment {
    font-size: clamp(1rem, 4.6vw, 1.28rem);
  }

  .thesis-evidence-view .evidence-social-target > .twitter-tweet,
  .thesis-evidence-view .evidence-social-target > .text-post-media {
    display: none !important;
  }

  .thesis-evidence-view .evidence-tile--tweet,
  .thesis-evidence-view .evidence-tile--threads {
    overflow: visible;
    clip-path: none;
    -webkit-mask-image: none;
    mask-image: none;
    border-radius: 22px;
    background: #000000;
  }

  .thesis-evidence-view .evidence-mobile-preview {
    display: grid;
    gap: clamp(0.8rem, 2.8vw, 1.1rem);
    padding: clamp(1rem, 4vw, 1.35rem);
    border-radius: 22px;
    color: rgba(255, 255, 255, 0.9);
    background: #000000;
    font-family: "OffBitTrialBold", "OffBit", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(1.34rem, 6.4vw, 2rem);
    font-weight: 700;
    line-height: 1.18;
  }

  .thesis-evidence-view .evidence-mobile-preview__body {
    margin: 0;
    white-space: pre-line;
  }

  .thesis-evidence-view .evidence-mobile-preview__media {
    display: grid;
    place-items: center;
    width: 100%;
    height: min(44vh, 28rem);
    overflow: hidden;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
  }

  .thesis-evidence-view .evidence-mobile-preview__media a {
    color: rgba(255, 255, 255, 0.76);
    font-family: "OffBit", "Courier New", monospace;
    font-size: clamp(1rem, 4.8vw, 1.36rem);
    text-decoration: none;
  }

  .thesis-evidence-view .evidence-mobile-preview__media img,
  .thesis-evidence-view .evidence-mobile-preview__media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.92;
    filter: saturate(0.92) contrast(1.08);
  }

  .thesis-evidence-view .evidence-mobile-preview__footer {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
    color: rgba(255, 255, 255, 0.68);
    font-family: "OffBit", "Courier New", monospace;
    font-size: clamp(1.06rem, 4.8vw, 1.46rem);
    font-weight: 500;
    line-height: 1.05;
  }

  .thesis-evidence-view .evidence-mobile-preview__footer span,
  .thesis-evidence-view .evidence-mobile-preview__footer a {
    min-width: 0;
  }

  .thesis-evidence-view .evidence-mobile-preview__footer a {
    display: inline !important;
    color: rgba(184, 178, 255, 0.92);
    text-decoration: underline;
    text-underline-offset: 0.12em;
  }

  .thesis-evidence-view .evidence-tile.is-mobile-hydrated .evidence-mobile-preview {
    display: none;
  }

  .thesis-evidence-view .evidence-tile.is-mobile-hydrating .evidence-social-target,
  .thesis-evidence-view .evidence-tile.is-mobile-hydrated .evidence-social-target {
    display: block;
    max-width: none;
    min-height: 8rem;
    overflow: hidden;
    border-radius: 16px;
    clip-path: inset(0 round 16px);
    contain: paint;
  }

  .thesis-evidence-view .evidence-tile.is-mobile-hydrating .evidence-social-target > .twitter-tweet,
  .thesis-evidence-view .evidence-tile.is-mobile-hydrating .evidence-social-target > .text-post-media,
  .thesis-evidence-view .evidence-tile.is-mobile-hydrated .evidence-social-target > .twitter-tweet,
  .thesis-evidence-view .evidence-tile.is-mobile-hydrated .evidence-social-target > .text-post-media {
    display: block !important;
  }

  .thesis-evidence-view .evidence-tile.is-mobile-hydrating .evidence-threads-target a,
  .thesis-evidence-view .evidence-tile.is-mobile-hydrating .text-post-media > a,
  .thesis-evidence-view .evidence-tile.is-mobile-hydrated .evidence-threads-target a,
  .thesis-evidence-view .evidence-tile.is-mobile-hydrated .text-post-media > a {
    display: inline !important;
  }

  .thesis-grid {
    --thesis-cover-width: clamp(7.7rem, 39vw, 11.2rem);
    --thesis-cover-depth: clamp(0.76rem, 3.5vw, 1.06rem);
    left: 0;
    top: 0;
    z-index: 18;
    width: 100vw;
    height: 100vh;
    perspective: 880px;
    perspective-origin: 42% 58%;
    transform: none;
  }

  .thesis-cover-detail {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: clamp(1.25rem, 3.6vh, 2rem);
    align-content: center;
    justify-items: center;
    padding: clamp(4.6rem, 10vh, 6rem) clamp(1.4rem, 6vw, 2rem) clamp(6.5rem, 13vh, 7.4rem);
    text-align: center;
  }

  .thesis-cover-detail__art {
    width: min(68vw, 18rem);
  }

  .thesis-cover-detail__title {
    max-width: 20rem;
    font-size: clamp(2rem, 10vw, 3.45rem);
  }

  .thesis-cover-detail__tracklist {
    max-width: 21rem;
    margin-bottom: clamp(1.1rem, 3vh, 1.7rem);
    gap: clamp(0.58rem, 1.8vh, 0.82rem);
  }

  .thesis-cover-detail__track {
    grid-template-columns: 1.8rem minmax(0, 1fr) 2.8rem;
    gap: 0.5rem;
    font-size: clamp(0.78rem, 3.35vw, 0.98rem);
    text-align: left;
  }

  .thesis-cover-detail__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(78vw, 21rem);
    gap: 0.8rem;
  }

  .thesis-cover-detail__open {
    padding-inline: 0.8rem;
  }
}

/* Holographic AI feedback emitter (thesis page, lower-left corner, above the nav) */
.thesis-holo-frame {
  position: absolute;
  /* Lower-right corner, vertically centred on the About/Tech/VC.ai/Theses nav
     icon row (the ring sits on the right, the status feed on its left). The
     vertical centring is baked into `top` (rather than a translateY(-50%)
     transform) so the `transform` property stays free for app.js to drive
     the FLIP morph into the article view without fighting this element's
     own resting-position transform. */
  right: clamp(1rem, 1.8vw, 2.5rem);
  top: calc(83.475vh + var(--nav-icon-track) / 2 - clamp(5.12rem, 6.08vw, 7.94rem) / 2);
  width: clamp(7.04rem, 8.32vw, 10.88rem);
  height: clamp(5.12rem, 6.08vw, 7.94rem);
  z-index: 30;
  pointer-events: none;
  opacity: 1;
  transition: opacity 360ms ease;
}

/* Full frame, NOT a shorter box: the canvas needs its whole backing store to
   let the ring's bloom/glow taper off softly instead of hitting a hard edge.
   The ring itself is lifted within this full-height canvas (ringCenterY in
   thesis-holo.js) to clear the VC.ai label sitting below it. */
.thesis-holo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Wrapper handles the static centering (left/right + text-align) and is
   NEVER transformed. The label itself is `display: inline-block`, so it
   shrink-wraps to the actual "VC.ai" text -- that's what keeps its
   getBoundingClientRect() equal to the text's real visual footprint, which
   app.js's FLIP-morph measurement depends on. Splitting these two is the
   point: centering an element via left:0;right:0;text-align:center only
   works if its own width is auto (i.e. stretches to fill that space), which
   would make the morph measure the whole frame's width instead of the
   text's -- so the fill-to-center behaviour lives on the wrapper, and the
   shrink-to-fit + transform lives on the inner label. */
.thesis-holo-label-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(0.15rem, 0.5vw, 0.4rem);
  text-align: center;
  pointer-events: none;
}

.thesis-holo-label {
  display: inline-block;
  white-space: nowrap;
  font: 400 clamp(0.65rem, 0.95vw, 0.95rem) / 1 "OffBitBar", "OffBit", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff; /* white on the dark theme; grey in light theme (below) */
}

html[data-theme="light"] .thesis-holo-label {
  color: #1f1f1f;
}

/* Agentic status feed: the AI's live research actions. Three rows sit next to
   the ring -- the bottom row is sharp and each new action types itself out
   there, then the stack is pushed up as the next spawns. Middle row is
   blurred, top row blurred more, so lines are only fully legible at the
   bottom. Uses the main body font (OffBit, weight 500 -- not bold). */
.thesis-status {
  /* Tight per-line height so a status that wraps reads as ONE block; the
     larger gap BETWEEN statuses comes from the row padding below. */
  --lh: clamp(0.64rem, 0.71vw, 0.845rem);
  --gap: clamp(0.35rem, 0.56vw, 0.6rem);
  position: absolute;
  /* Sits to the LEFT of the ring in the lower-right corner: its right edge is
     one ring-width + gap in from the page's right margin. Text is right-aligned
     so short lines hug the ring, and the block's bottom lines up with the ring's
     vertical centre (the nav icon row). */
  right: calc(clamp(1rem, 1.8vw, 2.5rem) + clamp(7.04rem, 8.32vw, 10.88rem) + clamp(0.6rem, 1.1vw, 1.4rem));
  bottom: calc(20.5vh - var(--nav-icon-track) / 2 - 4.17rem);
  width: clamp(17rem, 30vw, 38rem);
  /* Room for three messages of up to three wrapped lines each; the stack is
     anchored to the bottom, so short lines just leave the top area empty. */
  height: calc(var(--lh) * 6 + var(--gap) * 3);
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transition: opacity 360ms ease;
  text-align: right;
  font-family: "OffBit", "OffBitTrialBold", ui-sans-serif, system-ui, sans-serif;
}

/* Bottom-anchored: the newest (sharp) line sits at the bottom, older lines
   stack upward and clip off the top. */
.thesis-status__track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  will-change: transform;
}

.thesis-status__row {
  /* Plain block layout, NOT display:-webkit-box + -webkit-line-clamp: that
     combo internally re-centers its content based on how many lines it
     thinks it needs, so even with the row's own height locked by JS, the
     text visibly shifts the instant the typing cursor (which was forcing an
     extra wrapped line) disappears. A block always top-aligns wrapped text,
     so max-height alone caps it at 3 lines with no realignment on cursor
     add/remove. */
  display: block;
  max-height: calc(var(--lh) * 3);
  overflow: hidden;
  line-height: var(--lh);
  padding-top: var(--gap); /* space BETWEEN statuses (larger than line-height) */
  font-size: clamp(0.85rem, 0.95vw, 1.1rem);
  font-weight: 500;
  color: var(--theme-copy);
  transition:
    filter 520ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 520ms cubic-bezier(0.4, 0, 0.2, 1);
}

.thesis-status__text {
  display: inline;
}

/* Blinking caret on the line currently typing out. Height is capped to the
   (very tight) line-height, not 1em: an inline-block taller than its line's
   line-height forces that line's box to grow to fit it, which shoves the
   text down while the caret is present -- then the text visibly jumps back
   up the instant typing finishes and the caret disappears. Matching the
   caret's height to line-height keeps it from perturbing the line box at
   all, so appearing/disappearing never shifts the text. */
.thesis-status__row.is-typing .thesis-status__text::after {
  content: "";
  display: inline-block;
  width: 0.48ch;
  height: var(--lh);
  margin-left: 0.12em;
  vertical-align: top;
  background: currentColor;
  animation: thesis-status-caret 900ms steps(1) infinite;
}

@keyframes thesis-status-caret {
  0%,
  50% {
    opacity: 0.85;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}

/* Depth tiers: sharp focused bottom, softening + fading upward. */
.thesis-status__row[data-tier="focus"] {
  filter: none;
  opacity: 1;
  color: var(--theme-fg);
}
.thesis-status__row[data-tier="near"] {
  filter: blur(1.4px);
  opacity: 0.52;
}
.thesis-status__row[data-tier="far"] {
  filter: blur(3.2px);
  opacity: 0.24;
}
.thesis-status__row[data-tier="exit"] {
  filter: blur(4.5px);
  opacity: 0;
}

/* Stay visible while the coverflow deck is engaged or a cover's detail view
   is open -- only fade for the article view, where app.js plays the FLIP
   morph (see .is-holo-morphing below) instead of a plain fade. */
.thesis-page.is-article-open .thesis-holo-frame,
.thesis-page.is-article-open .thesis-status {
  opacity: 0;
}

/* While app.js is FLIP-morphing the ring into (or out of) the article's small
   emitter, keep it visible and let JS drive transform/filter directly --
   overrides the opacity:0 rule above (same specificity, declared later) so
   the ring doesn't just vanish instead of shrinking/desaturating/sliding. */
.thesis-page .thesis-holo-frame.is-holo-morphing {
  opacity: 1;
}

@media (max-width: 47.5rem), (max-aspect-ratio: 3 / 4) {
  .thesis-holo-frame,
  .thesis-status {
    display: none;
  }
}

/* Square emitter tucked into the lower-left of an opened article, framed by
   four thin white corner brackets with a VC.ai label. Black-and-white at rest;
   on hover the emitter colorizes + scales up while the corners slide outward to
   frame the enlarged emitter (their stroke width stays constant). */
.thesis-article__holo-frame {
  /* --holo-size drives the square footprint; --holo-grow is how far the emitter
     expands on hover (equal to the size => the emitter doubles to 2x). */
  --holo-size: clamp(3.75rem, 5vw, 5.5rem);
  --holo-grow: var(--holo-size);
  position: fixed;
  right: clamp(1rem, 1.8vw, 2.5rem);
  bottom: clamp(1rem, 2.5vh, 2.25rem);
  width: var(--holo-size);
  height: var(--holo-size);
  z-index: 320;
  cursor: pointer;
}

/* The emitter itself: grows via a GPU-composited transform (not width/height)
   so the flames scale smoothly without the canvas re-rasterising each frame.
   Anchored to the bottom-right so it expands up and to the left, in place.
   Full square, NOT a shorter box: the canvas needs its whole backing store so
   the bloom/glow tapers off softly instead of hitting a hard edge. The ring
   is lifted within this full-height canvas (ringCenterY in thesis-holo.js)
   to clear the VC.ai label sitting below it. */
.thesis-article__holo {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.72;
  filter: grayscale(1) contrast(1.08) brightness(0.92);
  transform: scale(1);
  transform-origin: bottom right;
  will-change: transform, filter;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 520ms ease, opacity 520ms ease;
}

.thesis-article__holo-frame:hover .thesis-article__holo {
  transform: scale(2);
  opacity: 1;
  filter: grayscale(0);
}

/* L-shaped white corner brackets hugging the emitter box. The 1.5px stroke
   matches the other HUD corner brackets on the page and never thickens; on
   hover the corners only translate outward to frame the 2x emitter. */
.thesis-article__holo-corner {
  --arm: clamp(0.55rem, 0.8vw, 0.85rem);
  --line: 0.09375rem; /* 1.5px, matching the page's other corner brackets */
  --pad: clamp(0.13rem, 0.3vw, 0.28rem);
  position: absolute;
  width: var(--arm);
  height: var(--arm);
  pointer-events: none;
  opacity: 0; /* corners are hidden at rest, revealed on hover */
  will-change: transform, opacity;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 320ms ease;
}

.thesis-article__holo-frame:hover .thesis-article__holo-corner {
  opacity: 1;
}

.thesis-article__holo-corner::before,
.thesis-article__holo-corner::after {
  content: "";
  position: absolute;
  background: #ffffff;
  box-shadow: 0 0 0.35rem rgba(255, 255, 255, 0.5);
}

.thesis-article__holo-corner::before {
  width: var(--arm);
  height: var(--line);
}

.thesis-article__holo-corner::after {
  width: var(--line);
  height: var(--arm);
}

.thesis-article__holo-corner--tl {
  top: calc(-1 * var(--pad));
  left: calc(-1 * var(--pad));
}
.thesis-article__holo-corner--tl::before,
.thesis-article__holo-corner--tl::after {
  top: 0;
  left: 0;
}

.thesis-article__holo-corner--tr {
  top: calc(-1 * var(--pad));
  right: calc(-1 * var(--pad));
}
.thesis-article__holo-corner--tr::before,
.thesis-article__holo-corner--tr::after {
  top: 0;
  right: 0;
}

.thesis-article__holo-corner--bl {
  bottom: calc(-1 * var(--pad));
  left: calc(-1 * var(--pad));
}
.thesis-article__holo-corner--bl::before,
.thesis-article__holo-corner--bl::after {
  bottom: 0;
  left: 0;
}

.thesis-article__holo-corner--br {
  bottom: calc(-1 * var(--pad));
  right: calc(-1 * var(--pad));
}
.thesis-article__holo-corner--br::before,
.thesis-article__holo-corner--br::after {
  bottom: 0;
  right: 0;
}

/* On hover the emitter doubles from its bottom-right anchor, so each corner
   slides out to hug the enlarged box: bottom-right stays put, the others move
   up and/or left by one emitter width. */
.thesis-article__holo-frame:hover .thesis-article__holo-corner--tr {
  transform: translateY(calc(-1 * var(--holo-grow)));
}
.thesis-article__holo-frame:hover .thesis-article__holo-corner--tl {
  transform: translate(calc(-1 * var(--holo-grow)), calc(-1 * var(--holo-grow)));
}
.thesis-article__holo-frame:hover .thesis-article__holo-corner--bl {
  transform: translateX(calc(-1 * var(--holo-grow)));
}

/* VC.ai label sitting inside the square, below the ring, horizontally centered;
   on hover it stays centered under the enlarged emitter (which grows leftward
   from the bottom-right anchor). */
.thesis-article__holo-label {
  position: absolute;
  left: 50%;
  bottom: clamp(0.15rem, 0.5vw, 0.4rem);
  transform: translateX(-50%);
  white-space: nowrap;
  font: 400 clamp(0.55rem, 0.85vw, 0.74rem) / 1 "OffBitBar", "OffBit", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff; /* white on the dark theme; grey in light theme (below) */
  pointer-events: none;
  will-change: transform;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-theme="light"] .thesis-article__holo-label {
  color: #1f1f1f;
}

.thesis-article__holo-frame:hover .thesis-article__holo-label {
  transform: translateX(calc(-50% - var(--holo-grow) / 2));
}

@media (hover: none), (max-width: 47.5rem), (max-aspect-ratio: 3 / 4) {
  .thesis-article__holo-frame {
    display: none;
  }
}