/* Loaded only for the narrow layout on the six project pages. */
header:has(.skills-nav) {
  height: 66px;
  min-height: 66px;
  padding: 0 5%;
  flex-wrap: nowrap;
  align-items: center;
}
header:has(.skills-nav) nav { width: auto; gap: 8px; }
header .skills-nav summary, header .language { min-height: 44px; }
header:has(.skills-nav) .nav-buy {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
}
header .nav-buy span:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
header nav>a.nav-github { display: none; }
.skills-dropdown { top: 62px; max-height: calc(100svh - 78px); overflow-y: auto; }
.skills-dropdown a { min-height: 44px; }
.hero.chart-fan-hero, .type-flight, .diagram-hero-scroll, .code-hero-scroll {
  height: auto;
  min-height: 0;
}
.chart-fan-hero > .orbit-stage, .type-flight > .flight-stage { display: none; }
.phone-intro[hidden] {
  display: grid;
  justify-items: start;
  padding: 106px 6% 42px;
  text-align: left;
  background: var(--paper, #f4f3ee);
}
.phone-intro h1, html[lang="zh-CN"] .phone-intro h1 {
  margin: 0;
  font: 450 clamp(38px, 10vw, 64px)/1.03 var(--sans, Arial), sans-serif;
  letter-spacing: -.055em;
}
.phone-intro p { margin: 14px 0 24px; max-width: 34em; color: #596153; font-size: 16px; line-height: 1.5; }
.phone-intro figure { margin: 0; width: min(100%, 520px); }
.phone-intro img { display: block; width: 100%; height: auto; max-height: 38svh; object-fit: contain; object-position: left; }
.phone-intro .art-zh, html[lang="zh-CN"] .phone-intro .art-en { display: none; }
html[lang="zh-CN"] .phone-intro .art-zh { display: block; }
.research-reading-stage .research-reading-paragraph { color: #424a40; }
.diagram-hero-scroll .diagram-hero, .code-hero-scroll .code-hero {
  position: relative;
  height: auto;
  min-height: 0;
  padding: 100px 0 32px;
}
.diagram-hero .diagram-gallery-heading, .code-hero .code-hero-heading {
  position: static;
  width: auto;
  margin: 0 6% 24px;
  text-align: left;
  transform: none !important;
}
.diagram-hero .diagram-gallery-heading h1 { white-space: normal; }
.diagram-gallery-heading p, .code-hero-heading>p:last-child { font-size: 15px; }
.diagram-hero-scroll .diagram-rail {
  position: relative;
  inset: auto;
  height: auto;
  padding: 0 6% 14px;
  gap: 12px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 6%;
}
.diagram-hero-scroll .diagram-rail-item { flex: 0 0 84%; height: clamp(240px, 65vw, 360px); scroll-snap-align: start; transform: none !important; }
.diagram-rail-item figcaption a { min-height: 44px; min-width: 44px; }
.diagram-gallery-footer, .code-hero-foot { display: none; }
.code-hero .showreel-shell { position: relative; inset: auto; margin: auto; width: 92%; transform: none !important; }
.showreel-controls button { min-width: 44px; min-height: 44px; }
.diagram-collection, .code-lens { height: auto; }
.diagram-collection .collection-stage { position: static; height: auto; min-height: 0; padding: 36px 5%; overflow: visible; }
.diagram-deck { display: grid; gap: 18px; flex: auto; perspective: none; }
.diagram-deck .diagram-view { position: static; height: auto; min-height: 0; transform: none !important; opacity: 1 !important; will-change: auto; }
.diagram-deck .diagram-view iframe { flex: none; min-height: 0; height: clamp(230px,65vw,380px); }
.code-lens .lens-media { flex: none; padding: 0; }
.code-lens .lens-media img { width: 100%; height: auto; max-height: none; }
.viewer-bottom a, .viewer-top button { display: inline-flex; align-items: center; min-height: 44px; }
.offer-stage, .plan-grid { grid-template-columns: minmax(0, 1fr); }
.plan-card, .plans-panel, .plans-heading { min-width: 0; max-width: 100%; }
.plan-card { padding-inline: clamp(16px, 4vw, 27px); }
.plan-card .plan-amount { font-size: clamp(64px, 21vw, 112px); }
.cross-projects-layout { grid-template-columns: minmax(0, 1fr); }