/* Five compositions. Each visible part can dismantle and reassemble. */
.scene-site {
  --chrome-ink: #f1eee6;
  --chrome-muted: #afb4a6;
  --chrome-line: #ffffff24;
  --chrome-accent: #ff795e;
  background: #10110f;
}
.scene-site[data-tone="work"] {
  --chrome-ink: #192015;
  --chrome-muted: #515e45;
  --chrome-line: #26321e30;
  --chrome-accent: #9c361e;
}
.scene-site[data-tone="insurify"] {
  --chrome-accent: #ffc1a4;
}
.scene-site[data-tone="briefsync"] {
  --chrome-accent: #b0def2;
}
.scene-header {
  width: calc(100% - 96px);
  margin: auto;
  height: 92px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--chrome-line, #3d4735);
  color: var(--chrome-ink, #f1eee6);
  position: relative;
  z-index: 50;
}
.scene-brand {
  font: 30px/1 var(--mono);
  letter-spacing: -2px;
}
.scene-brand span {
  color: var(--chrome-accent, #ff795e);
}
.header-name {
  font-size: 14px;
}
.scene-header nav {
  margin-left: auto;
  gap: 30px;
  font-size: 13px;
}
.scene-header .command-trigger {
  color: var(--chrome-muted, #b1b5aa);
  border-color: var(--chrome-line, #4d5644);
  margin-left: 24px;
  margin-right: 135px;
}
.scene-header kbd {
  border-color: var(--chrome-line, #4d5644);
  color: inherit;
}
.scene-site .motion-toggle,
.lab-page .motion-toggle {
  top: 25px;
  bottom: auto;
  right: 48px;
  z-index: 55;
  color: var(--chrome-ink, #f1eee6);
  border-color: var(--chrome-line, #4d5644);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  border-radius: 0;
  min-height: 39px;
}
.scene-site .motion-symbol {
  color: var(--chrome-accent);
}
.scene-site a:hover,
.scene-site button:hover {
  color: var(--chrome-accent);
}
.scene-site :focus-visible {
  outline-color: var(--chrome-accent);
}
.scene {
  position: relative;
  isolation: isolate;
  color: var(--ink);
  --ink: #f1eee6;
  --subtle: #b6bbaf;
  --accent: #ff795e;
  --surface: #10110f;
  --grid-line: #ffffff07;
  min-height: 100svh;
}
.scene-pareto {
  --surface: #e7ebdd;
  --ink: #172011;
  --subtle: #4d5d40;
  --accent: #9c361e;
  --grid-line: #18200e0a;
}
.scene-insurify {
  --surface: #291a16;
  --ink: #f7e4d8;
  --subtle: #c7b0a3;
  --accent: #ffb99a;
  --grid-line: #f7c9ac09;
}
.scene-briefsync {
  --surface: #13232c;
  --ink: #e5f1f5;
  --subtle: #acc4d0;
  --accent: #a3d6ed;
  --grid-line: #d1f1ff08;
}
.scene-about {
  --surface: #151a14;
  --subtle: #b7c3ad;
  --grid-line: #deffd909;
}
.scene-planes {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.scene-planes > i {
  position: absolute;
  width: calc(33.3334% + 1px);
  height: calc(50% + 1px);
  background: var(--surface);
  border-right: 1px solid var(--grid-line);
  border-bottom: 1px solid var(--grid-line);
  transform-origin: 50% 50%;
}
.scene-planes > i:nth-child(3n + 1) {
  left: 0;
}
.scene-planes > i:nth-child(3n + 2) {
  left: 33.3333%;
}
.scene-planes > i:nth-child(3n) {
  left: 66.6666%;
}
.scene-planes > i:nth-child(-n + 3) {
  top: 0;
}
.scene-planes > i:nth-child(n + 4) {
  top: 50%;
}
.scene-inner {
  width: min(1360px, calc(100% - 160px));
  margin: auto;
  min-height: 100svh;
  padding: 70px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.scene p {
  color: var(--subtle);
}
.scene-kicker {
  font: 11px/1.5 var(--mono);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--subtle);
}
.scene-title {
  color: var(--ink);
  outline: none;
}
.scene-title:focus-visible {
  outline: none;
}
.scene-title:focus-visible::after {
  content: "";
  display: block;
  width: 40px;
  border-bottom: 2px solid var(--accent);
  margin-top: 12px;
}
[data-fragment] {
  backface-visibility: hidden;
}
.intro-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.intro-composition {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 30px;
  padding-block: 22px 30px;
}
.name-title {
  font-size: clamp(100px, 14.2vw, 220px);
  line-height: 0.81;
  letter-spacing: -0.07em;
  font-weight: 800;
  margin-left: -7px;
}
.name-line {
  display: flex;
  gap: 0;
}
.name-line + .name-line {
  margin-top: 17px;
}
.name-line > span {
  display: inline-block;
}
.name-line:first-child {
  color: #b6bbaa;
}
.name-dot {
  color: var(--accent);
}
.intro-bottom {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.7fr;
  gap: 36px;
  align-items: center;
  border-top: 1px solid #a6b19730;
  padding-top: 30px;
}
.intro-statement {
  font-size: 18px;
  max-width: 390px;
  line-height: 1.6;
}
.intro-context {
  font: 11px/1.9 var(--mono);
  text-align: right;
}
.scene-cta {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  min-height: 48px;
  border-bottom: 1px solid var(--accent);
}
.scene-cta > span {
  font-size: 28px;
  font-weight: 400;
  color: var(--accent);
}
.scene a:hover {
  color: var(--accent);
}
.structure {
  height: clamp(300px, 30vw, 460px);
  position: relative;
  perspective: 1100px;
}
.structure-frame {
  position: absolute;
  width: 56%;
  height: 57%;
  border: 1px solid #88927a;
  left: 22%;
  top: 22%;
  transform: rotateX(54deg) rotateZ(-37deg);
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, #a3b19a12 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, #a3b19a12 31px 32px);
}
.frame-back {
  top: 6%;
  border-color: #627057;
}
.frame-mid {
  top: 23%;
  border-color: #abbc98;
  background-color: #1c271766;
}
.frame-front {
  top: 40%;
  border-color: #ff795e;
  background: #2c271dcc;
  box-shadow: 8px 10px 0 #ff795e0d;
}
.frame-front > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  font: 88px/1 var(--mono);
  color: #f6d1b4;
  letter-spacing: -9px;
}
.underscore {
  color: #ff795e;
}
.structure-label {
  position: absolute;
  font: 9px var(--mono);
  letter-spacing: 1px;
  z-index: 2;
  padding: 7px;
  background: #10110f;
}
.label-interface {
  top: 8%;
  left: 4%;
  color: #a4b293;
}
.label-services {
  top: 42%;
  right: 0;
  color: #c1d3b0;
}
.label-ai {
  bottom: 2%;
  left: 8%;
  color: #ffab90;
}
.structure-axis {
  position: absolute;
  height: 1px;
  background: #7182636b;
  width: 92%;
  top: 50%;
  left: 4%;
  transform: rotate(-35deg);
}
.axis-b {
  transform: rotate(35deg);
}
.axis-c {
  width: 1px;
  height: 92%;
  top: 4%;
  left: 50%;
}
.structure-cross {
  position: absolute;
  right: 4%;
  bottom: 8%;
  font: 25px var(--mono);
  color: #6e7a62;
}
.project-layout,
.about-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.scene-copy {
  min-width: 0;
}
.project-title {
  font-size: clamp(38px, 4.7vw, 73px);
  letter-spacing: -0.055em;
  line-height: 1.02;
  font-weight: 650;
  margin: 24px 0 28px;
}
.project-title > span {
  display: block;
  width: fit-content;
}
.scene-lead {
  font-size: 22px;
  line-height: 1.45;
  margin-bottom: 18px;
  max-width: 440px;
  color: var(--ink) !important;
}
.scene-description {
  font-size: 16px;
  line-height: 1.8;
  max-width: 495px;
}
.scene-skills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px 20px;
  padding: 0;
  margin: 26px 0 32px;
  font: 10px/1.7 var(--mono);
  color: var(--subtle);
}
.scene-skills li::before {
  content: "/";
  margin-right: 7px;
  color: var(--accent);
}
.scene-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 25px;
}
.scene-secondary {
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.scene-visual {
  min-width: 0;
  width: 100%;
}
.visual-overline {
  font: 10px var(--mono);
  letter-spacing: 1.5px;
  margin-bottom: 20px;
}
.visual-note {
  font: 10px/1.7 var(--mono);
  margin-top: 22px;
}
.evaluation-visual {
  padding: 28px 32px;
  border: 1px solid #7a886e;
  background: #dce4d2;
}
.evaluation-rings {
  height: 180px;
  position: relative;
  display: grid;
  place-items: center;
  margin: 0 0 24px;
}
.evaluation-rings i {
  position: absolute;
  width: 180px;
  height: 180px;
  border: 1px solid #6a8258;
  border-radius: 50%;
}
.evaluation-rings i:nth-child(2) {
  transform: rotateY(60deg) rotateX(15deg);
}
.evaluation-rings i:nth-child(3) {
  transform: rotateX(60deg) rotateY(15deg);
}
.evaluation-rings > span {
  font: 600 82px/1 var(--font);
  color: #3c522d;
}
.decision-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid #81937280;
  font: 11px var(--mono);
  color: #3c512e;
}
.decision-row strong {
  font-weight: 400;
}
.defect-row strong {
  color: #9c361e;
}
.decision-result {
  margin-top: 12px;
  padding: 16px;
  background: #25371a;
  color: #e9f2de;
  font-size: 17px;
  display: flex;
  gap: 20px;
  align-items: center;
}
.decision-result > span {
  font: 26px/1 var(--mono);
  color: #bfe09e;
}
.migration-visual {
  padding: 0 10px;
}
.migration-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  perspective: 900px;
  min-height: 270px;
  padding: 28px 0;
}
.foundation {
  width: 45%;
  min-height: 220px;
  background: #39271e;
  border: 1px solid #9b7760;
  padding: 20px 16px;
  transform: rotate(-6deg);
}
.foundation > span {
  font: 10px var(--mono);
  color: #d0ae98;
}
.foundation > strong {
  display: block;
  font-size: 26px;
  margin: 20px 0 30px;
  font-weight: 500;
  letter-spacing: -1px;
  color: #f2d7c4;
}
.foundation-lines i {
  display: block;
  width: 100%;
  height: 6px;
  margin: 10px 0;
  background: #9b7258;
}
.foundation-lines i:nth-child(2) {
  width: 65%;
}
.new-foundation {
  transform: rotate(7deg) translateY(20px);
  background: #dfb69a;
  border-color: #f1ceae;
  box-shadow: 8px 10px #150c0755;
}
.new-foundation > span {
  color: #67432c;
}
.new-foundation > strong {
  color: #372518;
}
.foundation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  height: 60px;
}
.foundation-grid i {
  background: #a77250;
}
.foundation-grid i:first-child {
  grid-row: span 2;
}
.migration-direction {
  font-size: 30px;
  color: #f5b58c;
}
.second-migration {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-block: 1px solid #97725b80;
  margin-top: 20px;
  padding: 22px 6px;
  font-size: 18px;
  color: #efccb5;
}
.second-migration > span:nth-child(2) {
  font-size: 25px;
}
.assessment-visual {
  padding: 0 12px;
}
.assessment-layer {
  padding: 23px 25px;
  border: 1px solid #6d8b9a;
  background: #19323e;
  margin-bottom: 16px;
  box-shadow: 7px 7px 0 #07192355;
}
.assessment-layer > span {
  font: 9px var(--mono);
  letter-spacing: 1px;
  color: #a7c6d5;
}
.assessment-layer > strong {
  display: block;
  font-size: 22px;
  font-weight: 500;
  margin: 8px 0 15px;
  letter-spacing: -0.6px;
}
.assessment-layer code {
  display: block;
  font: 10px/1.7 var(--mono);
  color: #a7c6d5;
}
.layer-output {
  transform: rotate(-3deg);
  margin-right: 24px;
}
.layer-service {
  margin-left: 15px;
  transform: rotate(1deg);
}
.layer-admin {
  background: #b7d1dc;
  color: #152f3c;
  transform: rotate(-1deg);
  margin-left: 32px;
  margin-right: -10px;
}
.layer-admin > span {
  color: #2f5263;
}
.service-checks,
.admin-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font: 9px var(--mono);
}
.service-checks span {
  color: #bad4df;
  border-top: 1px solid #5a8194;
  padding-top: 8px;
}
.admin-controls span {
  padding: 7px 9px;
  border: 1px solid #698e9f;
}
.about-layout {
  grid-template-columns: 1.15fr 1fr;
}
.about-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 25px;
  margin-top: 30px;
}
.personal-note {
  font-size: 12px;
  line-height: 1.8;
  margin-top: 36px;
}
.personal-note a {
  color: #dce7d1;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.experience-lines > div {
  padding: 20px 0;
  border-top: 1px solid #6f7f5f66;
}
.experience-lines span {
  display: block;
  font: 9px var(--mono);
  letter-spacing: 1px;
  color: #a8ba98;
  margin-bottom: 7px;
}
.experience-lines strong {
  font-size: 22px;
  font-weight: 500;
  color: #e7eedf;
}
.experience-lines small {
  font-size: 11px;
  font-weight: 400;
  color: #acbea0;
  margin-left: 7px;
}
.scene-credential {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 30px;
  border-top: 1px solid #6f7f5f66;
  padding-top: 25px;
}
.scene-credential .badge-inner {
  width: 132px;
  min-height: 164px;
  padding: 20px 5px 24px;
  gap: 5px;
}
.scene-credential .badge-inner > strong {
  font-size: 12px;
}
.scene-credential .badge-inner > svg:first-child {
  width: 45px;
  height: 13px;
}
.scene-credential .badge-inner > svg {
  height: 24px;
}
.scene-credential .badge-hire {
  font-size: 10px;
}
.scene-credential .badge-vetted {
  font-size: 10px;
}
.scene-credential .scene-kicker {
  font-size: 9px;
}
.scene-credential p {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
}
.scene-navigation {
  position: fixed;
  bottom: 0;
  left: 48px;
  right: 48px;
  min-height: 88px;
  border-top: 1px solid var(--chrome-line);
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
  z-index: 50;
  color: var(--chrome-ink);
}
.scene-instruction {
  color: var(--chrome-muted);
  font: 10px var(--mono);
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.scene-instruction > span {
  font-size: 20px;
}
.scene-index {
  display: flex;
  gap: 7px;
}
.scene-index a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 12px;
  font: 10px var(--mono);
  color: var(--chrome-muted);
}
.scene-index b {
  font-weight: 400;
  display: none;
}
.scene-index a[aria-current] {
  color: var(--chrome-ink);
  border-bottom: 1px solid var(--chrome-accent);
}
.scene-index a[aria-current] b {
  display: inline;
}
.scene-index a:hover {
  color: var(--chrome-accent);
}
.scene-arrows {
  display: flex;
  align-items: center;
  gap: 8px;
}
#scene-count {
  font: 10px var(--mono);
  margin-right: 15px;
  color: var(--chrome-muted);
}
.scene-arrows button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--chrome-line);
  color: var(--chrome-ink);
  background: transparent;
  font-size: 24px;
}
.scene-arrows button:disabled {
  opacity: 0.25;
}
.scene-site[data-transitioning="true"] .scene-arrows button {
  cursor: progress;
}
html[data-scenes="on"],
html[data-scenes="on"] body {
  height: 100%;
  overflow: hidden;
  scroll-behavior: auto;
  overscroll-behavior-y: none;
}
html[data-scenes="on"] .scene-header {
  position: fixed;
  left: 48px;
  right: 48px;
  top: 0;
  width: auto;
}
html[data-scenes="on"] .scene-deck {
  position: fixed;
  inset: 0;
  overflow: hidden;
  perspective: 1500px;
}
html[data-scenes="on"] .scene {
  position: absolute;
  inset: 0;
  min-height: 0;
  overflow: hidden;
}
html[data-scenes="on"] .scene-scroll {
  position: absolute;
  inset: 92px 0 88px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #748268 transparent;
}
html[data-scenes="on"] .scene-inner {
  min-height: 100%;
  padding-block: 28px;
}
html[data-scenes="on"] .scene[hidden] {
  display: none;
}
.lab-back {
  margin-top: 35px;
}
.lab-page .section {
  padding-block: 42px 90px;
}
.lab-page .section-heading h2 {
  font-size: clamp(40px, 5vw, 70px);
}
.lab-page .section-heading > p {
  font-size: 14px;
}
.lab-page .demo-console {
  max-width: 1200px;
  margin-inline: auto;
}
@media (min-width: 1700px) {
  .name-title {
    font-size: 220px;
  }
}
@media (max-height: 800px) and (min-width: 761px) {
  .name-title {
    font-size: clamp(100px, 12vw, 174px);
  }
  .structure {
    height: 330px;
  }
  .intro-composition {
    padding-block: 18px;
  }
  .intro-bottom {
    padding-top: 20px;
  }
  .project-title {
    font-size: clamp(36px, 4vw, 58px);
    margin-block: 18px 20px;
  }
  .scene-lead {
    font-size: 19px;
    margin-bottom: 14px;
  }
  .scene-description {
    font-size: 14px;
  }
  .scene-skills {
    margin-block: 20px;
  }
  .evaluation-rings {
    height: 120px;
    margin-bottom: 18px;
  }
  .evaluation-rings i {
    width: 120px;
    height: 120px;
  }
  .evaluation-rings > span {
    font-size: 60px;
  }
  .assessment-layer {
    padding-block: 16px;
    margin-bottom: 13px;
  }
  .experience-lines > div {
    padding-block: 14px;
  }
  .scene-credential {
    padding-top: 18px;
    margin-top: 18px;
  }
}
@media (max-width: 1100px) {
  .scene-inner {
    width: calc(100% - 96px);
  }
  .scene-header {
    width: calc(100% - 64px);
  }
  html[data-scenes="on"] .scene-header {
    left: 32px;
    right: 32px;
  }
  .scene-site .motion-toggle,
  .lab-page .motion-toggle {
    right: 32px;
  }
  .scene-navigation {
    left: 32px;
    right: 32px;
  }
  .scene-header .command-trigger {
    margin-left: 10px;
  }
  .scene-header nav {
    gap: 20px;
  }
  .project-layout,
  .about-layout {
    gap: 40px;
  }
  .intro-bottom {
    grid-template-columns: 1.4fr 1fr;
  }
  .intro-context {
    display: none;
  }
  .project-title {
    font-size: 43px;
  }
  .scene-lead {
    font-size: 19px;
  }
  .scene-description {
    font-size: 14px;
  }
  .evaluation-visual {
    padding: 22px;
  }
  .structure-label {
    font-size: 8px;
  }
  .frame-front > span {
    font-size: 65px;
  }
  .foundation {
    padding: 16px 12px;
    min-height: 190px;
  }
  .foundation > strong {
    font-size: 22px;
  }
  .assessment-visual {
    padding: 0;
  }
  .assessment-layer {
    padding: 20px;
  }
  .assessment-layer > strong {
    font-size: 19px;
  }
  .scene-credential {
    gap: 20px;
  }
  .scene-credential > div:last-child .scene-kicker {
    letter-spacing: 0;
  }
}
@media (max-width: 760px) {
  .scene-header {
    height: 70px;
    width: calc(100% - 40px);
    gap: 10px;
  }
  html[data-scenes="on"] .scene-header {
    left: 20px;
    right: 20px;
  }
  .scene-brand {
    font-size: 26px;
  }
  .header-name {
    display: none;
  }
  .scene-header nav {
    margin-left: 15px;
    gap: 20px;
    font-size: 12px;
  }
  .scene-header .command-trigger {
    display: none;
  }
  .scene-site .motion-toggle,
  .lab-page .motion-toggle {
    right: 20px;
    top: 20px;
    min-height: 30px;
    padding: 5px 7px;
    font-size: 8px;
  }
  .scene-site .motion-symbol,
  .lab-page .motion-symbol {
    font-size: 14px;
  }
  .scene-inner {
    width: calc(100% - 40px);
    padding-block: 45px;
  }
  html[data-scenes="on"] .scene-scroll {
    inset: 70px 0 86px;
  }
  html[data-scenes="on"] .scene-inner {
    padding-block: 25px;
  }
  .scene-kicker {
    font-size: 10px;
    letter-spacing: 0.7px;
  }
  .intro-topline > span {
    display: none;
  }
  .intro-composition {
    display: block;
    position: relative;
    padding-block: 25px 20px;
    min-height: 320px;
  }
  .name-title {
    font-size: clamp(98px, 26vw, 160px);
    position: relative;
    z-index: 2;
    margin-left: -3px;
  }
  .name-line + .name-line {
    margin-top: 12px;
  }
  .structure {
    position: absolute;
    width: 58%;
    height: 210px;
    right: -5px;
    top: 42px;
    z-index: 1;
    opacity: 0.75;
  }
  .structure-frame {
    width: 65%;
    height: 60%;
    left: 15%;
  }
  .structure-label {
    display: none;
  }
  .frame-front > span {
    font-size: 40px;
    letter-spacing: -5px;
  }
  .intro-identity {
    padding-top: 12px;
  }
  .name-line:first-child {
    position: relative;
    z-index: 3;
  }
  .name-line:last-child {
    padding-top: 55px;
  }
  .intro-bottom {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
    padding-top: 22px;
  }
  .intro-statement {
    font-size: 16px;
    max-width: 330px;
    line-height: 1.65;
  }
  .scene-cta {
    font-size: 13px;
    min-height: 44px;
    gap: 25px;
  }
  .scene-cta > span {
    font-size: 26px;
  }
  .project-layout,
  .about-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
  }
  .project-title {
    font-size: clamp(30px, 8.6vw, 48px);
    margin: 17px 0 18px;
    letter-spacing: -0.05em;
  }
  .scene-lead {
    font-size: 17px;
    margin-bottom: 14px;
  }
  .scene-description {
    font-size: 14px;
    line-height: 1.7;
  }
  .scene-skills {
    gap: 4px 14px;
    font-size: 9px;
    margin: 18px 0 20px;
  }
  .scene-actions {
    gap: 18px;
  }
  .scene-secondary {
    font-size: 11px;
  }
  .scene-visual {
    max-width: 460px;
    align-self: center;
  }
  .visual-overline {
    font-size: 9px;
    margin-bottom: 13px;
  }
  .visual-note {
    font-size: 9px;
    margin-top: 14px;
  }
  .evaluation-visual {
    position: relative;
    padding: 20px;
  }
  .evaluation-rings {
    position: absolute;
    right: 18px;
    top: 16px;
    width: 65px;
    height: 65px;
    margin: 0;
    opacity: 0.6;
  }
  .evaluation-rings i {
    width: 65px;
    height: 65px;
  }
  .evaluation-rings > span {
    font-size: 34px;
  }
  .evaluation-visual .visual-overline {
    padding: 4px 80px 18px 0;
    line-height: 1.7;
  }
  .decision-row {
    font-size: 10px;
    padding: 12px 0;
  }
  .decision-result {
    font-size: 15px;
    padding: 13px;
    margin-top: 6px;
  }
  .migration-visual {
    padding: 5px 7px;
  }
  .migration-pair {
    min-height: 160px;
    padding: 14px 0;
    gap: 12px;
  }
  .foundation {
    min-height: 135px;
    padding: 13px;
    width: 43%;
  }
  .foundation > span {
    font-size: 8px;
  }
  .foundation > strong {
    font-size: 22px;
    margin: 12px 0 16px;
  }
  .foundation-lines i {
    height: 3px;
    margin: 6px 0;
  }
  .foundation-grid {
    height: 32px;
  }
  .new-foundation {
    transform: rotate(6deg) translateY(5px);
  }
  .second-migration {
    padding-block: 14px;
    font-size: 15px;
    margin-top: 18px;
  }
  .assessment-visual {
    padding: 0 10px 0 0;
  }
  .assessment-layer {
    padding: 13px 16px;
    margin-bottom: 13px;
  }
  .assessment-layer > strong {
    font-size: 17px;
    margin: 5px 0 8px;
  }
  .assessment-layer > span {
    font-size: 8px;
  }
  .assessment-layer code {
    font-size: 9px;
  }
  .layer-output {
    margin-right: 18px;
  }
  .layer-service {
    margin-left: 12px;
  }
  .layer-admin {
    margin-left: 24px;
  }
  .service-checks,
  .admin-controls {
    font-size: 8px;
  }
  .service-checks span {
    padding-top: 5px;
  }
  .admin-controls span {
    padding: 4px 7px;
  }
  .about-links {
    gap: 22px;
    margin-top: 22px;
  }
  .personal-note {
    margin-top: 23px;
    font-size: 12px;
  }
  .experience-lines {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
  }
  .experience-lines > div {
    padding: 14px 0;
  }
  .experience-lines > div:first-child {
    grid-column: 1 / -1;
  }
  .experience-lines strong {
    font-size: 18px;
  }
  .experience-lines span {
    font-size: 8px;
  }
  .scene-credential {
    margin-top: 8px;
    padding-top: 24px;
    gap: 26px;
  }
  .scene-credential p {
    font-size: 12px;
  }
  .scene-navigation {
    left: 20px;
    right: 20px;
    min-height: 86px;
    align-items: center;
    gap: 14px;
    background: transparent;
  }
  .scene-instruction {
    display: none;
  }
  .scene-index {
    gap: 2px;
  }
  .scene-index a {
    padding: 10px 7px;
    min-width: 28px;
    font-size: 9px;
  }
  .scene-index b,
  .scene-index a[aria-current] b {
    display: none;
  }
  #scene-count {
    display: none;
  }
  .scene-arrows {
    gap: 6px;
  }
  .scene-arrows button {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
  .lab-page .container {
    width: calc(100% - 40px);
  }
  .lab-page .section-heading {
    display: block;
  }
  .lab-page .section-heading > p {
    margin-top: 18px;
  }
  .lab-page .section {
    padding-top: 32px;
  }
}
@media (max-width: 760px) and (max-height: 740px) {
  .intro-composition {
    min-height: 260px;
    padding-block: 16px 20px;
  }
  .name-title {
    font-size: 25vw;
  }
  .name-line:last-child {
    padding-top: 28px;
  }
  .structure {
    height: 170px;
    top: 30px;
  }
  .intro-bottom {
    gap: 12px;
    padding-top: 16px;
  }
  .intro-statement {
    font-size: 14px;
  }
}
@media (max-width: 359px) {
  .scene-header nav {
    margin-left: 6px;
    gap: 14px;
    font-size: 11px;
  }
  .scene-header,
  .scene-inner {
    width: calc(100% - 32px);
  }
  html[data-scenes="on"] .scene-header {
    left: 16px;
    right: 16px;
  }
  .scene-site .motion-toggle {
    right: 16px;
  }
  .scene-index a {
    padding-inline: 5px;
    min-width: 25px;
  }
  .scene-navigation {
    left: 16px;
    right: 16px;
  }
  .scene-arrows button {
    width: 36px;
  }
  .project-title {
    font-size: 29px;
  }
  .scene-lead {
    font-size: 16px;
  }
}
@media print {
  html[data-scenes="on"],
  html[data-scenes="on"] body {
    height: auto;
    overflow: visible;
  }
  html[data-scenes="on"] .scene-deck,
  html[data-scenes="on"] .scene {
    position: static;
    overflow: visible;
  }
  html[data-scenes="on"] .scene[hidden] {
    display: block !important;
  }
  html[data-scenes="on"] .scene-scroll {
    position: static;
    overflow: visible;
  }
  .scene-header,
  .scene-navigation,
  .motion-toggle {
    display: none !important;
  }
  .scene {
    break-after: page;
  }
}
@media (max-width: 760px) {
  .scene-instruction {
    display: block;
    position: absolute;
    top: 7px;
    left: 0;
    font: 8px var(--mono);
  }
  .scene-instruction > span {
    display: none;
  }
  .scene-index,
  .scene-arrows {
    margin-top: 12px;
  }
}
@media (min-width: 1101px) {
  .scene-index b {
    display: inline;
  }
}
@media (max-width: 760px) {
  .scene-index a[aria-current] b {
    display: inline;
    font-size: 8px;
  }
}
.evaluation-visual {
  position: relative;
  isolation: isolate;
  background: transparent;
  border-color: transparent;
}
.visual-surface {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #dce4d2;
  border: 1px solid #7a886e;
  pointer-events: none;
}
.scene-site[data-transitioning="true"] {
  --chrome-ink: #f1eee6;
  --chrome-muted: #afb4a6;
  --chrome-line: #ffffff24;
  --chrome-accent: #ff795e;
}
.scene-site[data-transitioning="true"] .scene-header,
.scene-site[data-transitioning="true"] .scene-navigation {
  background: #10110ff2;
}

/* Career context stays readable as secondary lines, including on narrow scenes. */
.experience-lines small { display: block; margin: 6px 0 0; line-height: 1.5; }