@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500&family=Noto+Serif+SC:wght@300;500;700&display=swap");
@font-face {
  font-family: "DIN 1451 Fette Breitschrift 1936";
  src: url("../fonts/DIN1451-36breit.ttf") format("truetype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

/* Mechanical training curriculum */
.mechanical-curriculum-page {
  --mechanical-accent: #c7a251;
  --mechanical-accent-rgb: 199, 162, 81;
}

.mechanical-curriculum-main {
  width: min(1180px, calc(100% - 80px));
  margin: 0 auto;
  padding: 18px 0 88px;
}

body.mechanical-curriculum-page .mechanical-curriculum-hero {
  width: 100%;
  margin: 0 0 22px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
}

.mechanical-curriculum-hero .page-label {
  color: var(--mechanical-accent);
}

body.mechanical-curriculum-page .mechanical-curriculum-hero h1 {
  font-size: clamp(1.9rem, 2.25vw, 2.55rem);
}

body.mechanical-curriculum-page .mechanical-curriculum-hero > p {
  max-width: 620px;
  font-size: clamp(.9rem, 1vw, 1rem);
  line-height: 1.65;
}

body.mechanical-curriculum-page .mechanical-curriculum-hero .page-label {
  margin-bottom: 6px;
}

.mechanical-curriculum-version {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  border-left: 2px solid var(--mechanical-accent);
  padding: 3px 0 3px 9px;
  color: var(--muted);
  font-family: "DIN 1451 Fette Breitschrift 1936", sans-serif;
  font-size: .68rem;
  letter-spacing: .08em;
}

.mechanical-curriculum-version strong {
  color: var(--mechanical-accent);
  font-weight: 700;
}

body.mechanical-curriculum-page > .page-back-nav {
  position: fixed;
  top: 128px;
  left: max(18px, calc(50vw - 650px));
  transform: none;
}

.mechanical-curriculum-shell {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}

.mechanical-course-catalog {
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 116px);
  overflow: auto;
  border: 1px solid var(--line);
  background: var(--surface);
  scrollbar-width: thin;
}

.mechanical-catalog-heading {
  display: grid;
  gap: 5px;
  padding: 23px 22px 19px;
  border-bottom: 1px solid var(--line);
}

.mechanical-catalog-heading > span,
.mechanical-panel-header p {
  color: var(--mechanical-accent);
  font-family: "DIN 1451 Fette Breitschrift 1936", sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
}

.mechanical-catalog-heading strong {
  font-size: 1.35rem;
  font-weight: 500;
}

.mechanical-catalog-heading small {
  color: var(--muted);
  font-size: .78rem;
}

.mechanical-course-tree {
  padding: 10px;
}

.mechanical-nav-tone--lead {
  --mechanical-nav-tone: #c7a251;
}

.mechanical-nav-tone--training {
  --mechanical-nav-tone: #4f91bd;
}

.mechanical-nav-tone--progress {
  --mechanical-nav-tone: #4ca46d;
}

.mechanical-nav-tone--elective {
  --mechanical-nav-tone: #956fc5;
}

.mechanical-course-tree details + details {
  border-top: 0;
  margin-top: 0;
  padding-top: 1px;
}

.mechanical-course-tree > details,
.mechanical-course-tree > .mechanical-course-link--stage {
  position: relative;
  margin-top: 0;
  padding-top: 1px;
}

.mechanical-course-tree > details::before,
.mechanical-course-tree > .mechanical-course-link--stage::before {
  content: "";
  position: absolute;
  top: 0;
  right: 4px;
  left: 4px;
  height: 1px;
  background: var(--line);
}

.mechanical-course-tree summary,
.mechanical-course-link {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 9px;
  color: var(--text);
  text-align: left;
}

.mechanical-course-tree summary {
  min-height: 50px;
  padding: 7px 10px;
  cursor: pointer;
  list-style: none;
}

.mechanical-course-tree summary::-webkit-details-marker {
  display: none;
}

.mechanical-course-tree summary::after {
  content: "\F0140";
  margin-left: auto;
  font-family: "Material Design Icons";
  color: var(--mechanical-nav-tone, var(--muted));
  transition: transform .2s ease;
}

.mechanical-course-tree details[open] > summary::after {
  transform: rotate(180deg);
}

.mechanical-course-tree details > summary:hover,
.mechanical-course-tree details > summary:focus-visible,
.mechanical-course-tree details[open] > summary {
  color: var(--mechanical-nav-tone, var(--mechanical-accent));
}

.mechanical-course-tree details[open] > summary::after {
  color: var(--mechanical-nav-tone, var(--mechanical-accent));
}

.mechanical-course-tree summary > span:last-child,
.mechanical-course-link > span:not(.mechanical-course-index) {
  display: grid;
  gap: 3px;
}

.mechanical-course-tree summary strong,
.mechanical-course-link strong {
  font-size: .94rem;
  font-weight: 600;
}

.mechanical-stage-star {
  display: inline-block;
  margin-left: 6px;
  color: #ffd43b;
  font-size: .72em;
  line-height: 1;
  vertical-align: .08em;
}

.mechanical-course-tree summary small,
.mechanical-course-link small {
  color: var(--muted);
  font-size: .7rem;
}

.mechanical-course-index {
  flex: 0 0 25px;
  color: var(--mechanical-nav-tone, var(--mechanical-accent));
  font-family: "DIN 1451 Fette Breitschrift 1936", sans-serif;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .09em;
}

.mechanical-course-nav-icon {
  flex: 0 0 20px;
  color: var(--mechanical-nav-tone, var(--mechanical-accent));
  font-size: 1.05rem;
  line-height: 1;
  text-align: center;
}

.mechanical-course-link {
  min-height: 40px;
  border: 0;
  border-left: 2px solid transparent;
  padding: 8px 12px;
  background: transparent;
  font: inherit;
  font-size: .86rem;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.mechanical-course-link:hover,
.mechanical-course-link:focus-visible,
.mechanical-course-link.is-active {
  border-left-color: var(--mechanical-nav-tone, var(--mechanical-accent));
  background: color-mix(in srgb, var(--mechanical-nav-tone, var(--mechanical-accent)) 12%, transparent);
  color: var(--mechanical-nav-tone, var(--mechanical-accent));
}

.mechanical-course-branch {
  margin-left: 24px;
  padding: 0 0 8px 9px;
  border-left: 1px solid var(--line);
}

.mechanical-course-branch--lessons .mechanical-course-link {
  padding-top: 7px;
  padding-bottom: 7px;
}

.mechanical-course-branch--lessons .mechanical-course-link > span {
  gap: 2px;
  line-height: 1.45;
}

.mechanical-course-branch--lessons .mechanical-course-link small {
  display: block;
  color: var(--mechanical-nav-tone, var(--mechanical-accent));
  font-family: "DIN 1451 Fette Breitschrift 1936", sans-serif;
  letter-spacing: .08em;
}

.mechanical-course-link--stage {
  min-height: 50px;
  margin-top: 0;
}

.mechanical-course-tree > .mechanical-course-link {
  min-height: 50px;
  padding: 7px 10px;
}

.mechanical-course-tree > .mechanical-course-link strong,
.mechanical-course-tree > details > summary strong {
  color: var(--mechanical-nav-tone, var(--text));
  white-space: nowrap;
}

.mechanical-course-month {
  margin: 11px 10px 4px;
  color: var(--muted);
  font-family: "DIN 1451 Fette Breitschrift 1936", sans-serif;
  font-size: .65rem;
  letter-spacing: .08em;
}

.mechanical-course-reader {
  min-width: 0;
}

.mechanical-course-panel {
  min-height: 620px;
  border: 1px solid var(--line);
  padding: clamp(24px, 2.4vw, 36px);
  background: var(--surface);
}

.mechanical-course-panel[hidden] {
  display: none;
}

.mechanical-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
  padding-bottom: 25px;
  border-bottom: 1px solid var(--line);
}

.mechanical-panel-header > div {
  display: grid;
  max-width: 820px;
  gap: 10px;
}

.mechanical-panel-header h2 {
  margin: 0;
  font-size: clamp(1.45rem, 1.8vw, 2.05rem);
  font-weight: 500;
  line-height: 1.15;
}

.mechanical-panel-header div > span {
  color: var(--muted);
  font-size: .96rem;
  line-height: 1.8;
}

.mechanical-course-badge {
  flex: 0 0 auto;
  border: 1px solid rgba(var(--mechanical-accent-rgb), .58);
  padding: 7px 11px;
  color: var(--mechanical-accent);
  font-size: .72rem;
  white-space: nowrap;
}

.mechanical-course-badge.is-ready {
  background: rgba(var(--mechanical-accent-rgb), .13);
}

.mechanical-course-badge.is-draft {
  border-style: dashed;
  color: var(--muted);
}

.mechanical-panel-meta {
  display: flex;
  align-items: stretch;
  margin-bottom: 22px;
  border: 1px solid var(--line);
}

.mechanical-panel-meta > span {
  display: grid;
  min-width: 150px;
  gap: 4px;
  padding: 14px 18px;
  border-right: 1px solid var(--line);
}

.mechanical-panel-meta small {
  color: var(--muted);
  font-size: .68rem;
}

.mechanical-panel-meta strong {
  font-size: .9rem;
}

.mechanical-panel-meta a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 14px 20px;
  color: var(--mechanical-accent);
  font-size: .82rem;
}

.mechanical-course-pdf {
  height: min(75vh, 900px);
  min-height: 560px;
}

.mechanical-timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.mechanical-timeline article {
  min-height: 250px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.mechanical-timeline article > span,
.mechanical-outline-grid article > span,
.mechanical-outline-stack article > span {
  color: var(--mechanical-accent);
  font-family: "DIN 1451 Fette Breitschrift 1936", sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.mechanical-timeline h3,
.mechanical-outline-grid h3,
.mechanical-outline-stack h3 {
  margin: 18px 0 10px;
  font-size: 1.12rem;
  font-weight: 550;
}

.mechanical-timeline p,
.mechanical-outline-grid p,
.mechanical-outline-stack p,
.mechanical-outline-grid li {
  color: var(--muted);
  font-size: .87rem;
  line-height: 1.75;
}

.mechanical-outline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.mechanical-outline-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mechanical-outline-grid article {
  min-height: 190px;
  padding: 25px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.mechanical-outline-grid ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.1em;
}

.mechanical-outline-grid li::marker {
  color: var(--mechanical-accent);
}

.mechanical-outline-stack {
  border-top: 1px solid var(--line);
}

.mechanical-outline-stack article {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 18px;
  padding: 21px 6px;
  border-bottom: 1px solid var(--line);
}

.mechanical-outline-stack h3 {
  margin: 0 0 7px;
}

.mechanical-outline-stack p {
  margin: 0;
}

.mechanical-outline-stack ul,
.mechanical-markdown-outline ul {
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
  padding-left: 1.15em;
}

.mechanical-outline-stack li,
.mechanical-markdown-outline li {
  color: var(--muted);
  font-size: .87rem;
  line-height: 1.7;
}

.mechanical-outline-stack li::marker,
.mechanical-markdown-outline li::marker {
  color: var(--mechanical-accent);
}

.mechanical-markdown-outline {
  border-top: 1px solid var(--line);
}

.mechanical-markdown-outline > section {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 18px;
  padding: 24px 6px 26px;
  border-bottom: 1px solid var(--line);
}

.mechanical-outline-number {
  color: var(--mechanical-accent);
  font-family: "DIN 1451 Fette Breitschrift 1936", sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
}

.mechanical-markdown-outline h3 {
  margin: 0 0 18px;
  font-size: 1.2rem;
  font-weight: 550;
}

.mechanical-markdown-outline h4 {
  margin: 20px 0 6px;
  font-size: .94rem;
  font-weight: 550;
}

.mechanical-course-note,
.mechanical-empty-courseware {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 25px;
  border: 1px solid var(--line);
  padding: 20px 22px;
  background: rgba(var(--mechanical-accent-rgb), .055);
}

.mechanical-course-note > i,
.mechanical-empty-courseware > i {
  color: var(--mechanical-accent);
  font-size: 1.5rem;
}

.mechanical-course-note p,
.mechanical-empty-courseware p {
  display: grid;
  gap: 4px;
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.65;
}

.mechanical-course-note strong,
.mechanical-empty-courseware strong {
  color: var(--text);
  font-size: .9rem;
}

@media (max-width: 1120px) {
  .mechanical-curriculum-main {
    width: min(100% - 48px, 1180px);
  }

  .mechanical-curriculum-shell {
    grid-template-columns: 320px minmax(0, 1fr);
  }

  .mechanical-timeline,
  .mechanical-outline-grid.compact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .mechanical-curriculum-main {
    width: min(100% - 28px, 1180px);
    padding-top: 24px;
  }

  .mechanical-curriculum-shell {
    grid-template-columns: 1fr;
  }

  .mechanical-course-catalog {
    position: relative;
    top: auto;
    max-height: none;
  }

  .mechanical-course-branch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  .mechanical-course-month {
    grid-column: 1 / -1;
  }

  .mechanical-course-panel {
    min-height: 0;
  }

  .mechanical-outline-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  body.mechanical-curriculum-page .mechanical-curriculum-hero h1 {
    font-size: 2rem;
  }

  body.mechanical-curriculum-page > .page-back-nav {
    top: 88px;
    left: 10px;
  }

  .mechanical-course-tree > .mechanical-course-link strong,
  .mechanical-course-tree > details > summary strong {
    white-space: normal;
  }

  .mechanical-course-branch {
    grid-template-columns: 1fr;
  }

  .mechanical-course-panel {
    padding: 22px 18px;
  }

  .mechanical-panel-header {
    display: grid;
  }

  .mechanical-course-badge {
    justify-self: start;
  }

  .mechanical-panel-meta {
    display: grid;
  }

  .mechanical-panel-meta > span {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .mechanical-panel-meta a {
    margin-left: 0;
  }

  .mechanical-course-pdf {
    min-height: 430px;
  }
}
@font-face {
  font-family: "Qianli Couplet";
  src: url("../fonts/qianli-couplet.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root{--bg:#fff;--header-bg:rgba(255,255,255,.97);--surface:#fafafa;--card-bg:#fff;--text:#111;--muted:#565656;--subtle:#7a7a7a;--line:#d8d8d8;--soft-line:#ececec;--accent:#ed2174;--green:#5cfc90;--accent-soft:#fae8f0;--max-width:1180px;--nav-width:1320px;--brand-divider:var(--green)}
:root[data-theme="dark"]{--bg:#101011;--header-bg:rgba(16,16,17,.96);--surface:#1a1a1d;--card-bg:#171719;--text:#f4f4f4;--muted:#c9c9c9;--subtle:#999;--line:#333338;--soft-line:#25252a;--accent:#5cfc90;--green:#5cfc90;--accent-soft:#173822;--brand-divider:#ed2174}
*{box-sizing:border-box}html{overflow-y:scroll;scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:"Lora","Noto Serif SC","Source Han Serif SC","Songti SC",serif;font-size:16px;font-weight:300;line-height:1.75;transition:background .2s,color .2s}a{color:inherit;text-decoration:none}p{margin:0;color:var(--muted);text-wrap:pretty}img{display:block;max-width:100%}.site-header{position:sticky;top:0;z-index:20;background:var(--header-bg);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}.nav{width:min(var(--nav-width),calc(100% - 32px));min-height:82px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:inline-flex;align-items:center;gap:14px;flex:0 0 auto}.brand-logos img{width:38px;height:38px;object-fit:contain}:root[data-theme="dark"] .brand-logos img{filter:invert(1) grayscale(1) contrast(1.18)}.brand-text{display:inline-flex;align-items:baseline;gap:12px;line-height:1.2;white-space:nowrap}.brand-text strong,.brand-text small{font-family:"Noto Serif SC","Source Han Serif SC",serif;font-size:19px;font-weight:500;letter-spacing:.02em}.brand-text strong{display:inline-flex;align-items:baseline;gap:13px}.brand-text strong:after{content:"";display:inline-block;width:3px;height:18px;background:var(--brand-divider);transform:translateY(2px)}.brand-text small{color:var(--accent)}.nav-links{display:flex;align-items:center;justify-content:flex-end;gap:clamp(10px,1vw,16px);font-size:15px;white-space:nowrap}.nav-menu{position:relative;display:inline-flex;align-items:center}.nav-links>a,.nav-menu>a{position:relative;padding:28px 0 25px;color:var(--text);font-size:15px;transition:color .16s,font-size .16s}.nav-links>a.is-active,.nav-menu>a.is-active{font-size:16px;font-weight:500}.nav-links>a:after,.nav-menu>a:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .18s}.nav-links>a.is-active:after,.nav-menu>a.is-active:after{transform:scaleX(1)}.nav-dropdown{position:absolute;top:100%;left:50%;min-width:200px;padding:18px;background:var(--card-bg);border:1px solid var(--line);box-shadow:0 18px 48px rgba(0,0,0,.12);transform:translate(-50%,8px);opacity:0;visibility:hidden;display:grid;gap:10px;transition:.18s}.nav-menu:hover .nav-dropdown,.nav-menu:focus-within .nav-dropdown{opacity:1;visibility:visible;transform:translate(-50%,0)}.nav-dropdown a{padding:6px 10px;border-left:3px solid var(--green);color:var(--muted)}.nav-dropdown a:hover{color:var(--text);background:var(--surface)}.nav-toggle,.theme-toggle{border:1px solid var(--line);background:var(--card-bg);color:var(--text)}.nav-toggle{display:none;width:42px;height:42px;align-items:center;justify-content:center;gap:4px;flex-direction:column}.nav-toggle span{width:18px;height:2px;background:currentColor}.theme-toggle{width:78px;height:42px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:7px}.theme-icon{width:22px;height:22px;fill:currentColor}.theme-icon-sun{color:#ed2174}.theme-icon-moon{color:#666}:root[data-theme="dark"] .theme-icon-sun{color:#777}:root[data-theme="dark"] .theme-icon-moon{color:#5cfc90}main{min-height:70vh}.home-hero{width:min(1440px,calc(100% - 48px));margin:38px auto 0;display:grid;grid-template-columns:minmax(340px,.86fr) minmax(460px,1.14fr);gap:38px;align-items:center}.home-hero-copy h1{margin:0;font-size:clamp(56px,8vw,118px);line-height:.98;font-weight:500;letter-spacing:0}.home-hero-copy h1 span,.home-hero-copy h1 small{display:block}.home-hero-copy h1 small{margin-top:8px;color:var(--accent);font-size:clamp(26px,3.2vw,48px)}.home-hero-copy>p{max-width:620px;margin-top:28px;font-size:18px}.hero-actions{display:flex;flex-wrap:wrap;gap:18px;margin-top:32px}.text-link,.inline-link{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-weight:500}.text-link:after,.inline-link:after{content:">";color:var(--accent)}.hero-media{overflow:hidden;border:1px solid var(--line);background:var(--surface)}.brand-poster img{width:100%;height:min(58vw,620px);object-fit:cover}.home-quote{width:min(var(--max-width),calc(100% - 40px));margin:42px auto 0;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}.home-quote p{font-size:clamp(26px,4vw,54px);color:var(--text);letter-spacing:.08em}.home-quote span{display:block;margin-top:8px;color:var(--accent)}.section-block{width:min(var(--max-width),calc(100% - 40px));margin:74px auto}.page-hero{width:min(var(--max-width),calc(100% - 40px));margin:72px auto 0;display:grid;grid-template-columns:1fr minmax(260px,520px);gap:36px;align-items:end;border-bottom:1px solid var(--line);padding-bottom:34px}.page-label{margin:0 0 10px;color:var(--accent);text-transform:uppercase;letter-spacing:.16em;font-size:13px;font-weight:500}.page-hero h1{margin:0;font-size:clamp(44px,7vw,96px);line-height:1.04;font-weight:500}.page-hero>p{font-size:18px}.intro-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}.intro-grid article{background:var(--bg);padding:36px}.intro-grid h2,.section-heading h2,.text-stack h2,.detail-panel h2,.process-grid h2{margin:0 0 12px;font-size:28px;line-height:1.25;font-weight:500}.entry-grid,.group-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.group-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.entry-card{min-height:220px;border:1px solid var(--line);background:var(--card-bg);padding:22px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .18s,border-color .18s,box-shadow .18s}.entry-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 18px 48px rgba(0,0,0,.1)}.entry-card figure{height:150px;margin:-6px -6px 18px;display:grid;place-items:center;background:var(--surface);overflow:hidden}.entry-card figure img{width:100%;height:100%;object-fit:contain}.entry-card span{color:var(--accent);font-size:12px;text-transform:uppercase;letter-spacing:.12em}.entry-card strong{margin-top:6px;font-size:24px;line-height:1.25;font-weight:500}.entry-card small{margin-top:10px;color:var(--muted);font-size:14px;line-height:1.6}.split-section,.group-detail,.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);gap:28px;align-items:center}.split-section p,.text-stack p,.contact-layout p{margin-top:12px}.media-frame,.group-symbol{border:1px solid var(--line);background:var(--surface);overflow:hidden}.media-frame img{width:100%;height:420px;object-fit:cover}.group-symbol{display:grid;place-items:center;min-height:360px}.group-symbol img{width:70%;max-height:300px;object-fit:contain}:root[data-theme="dark"] .group-symbol img,:root[data-theme="dark"] .entry-card figure img:not([src*="鎴愪负"]):not([src*="鏆楄壊"]){filter:invert(1) grayscale(1) contrast(1.1)}.detail-panel{align-self:stretch;border:1px solid var(--line);padding:32px;background:var(--card-bg);display:flex;flex-direction:column;justify-content:center;gap:24px}.tag-cloud{display:flex;flex-wrap:wrap;gap:10px}.tag-cloud span{padding:8px 12px;border:1px solid var(--line);background:var(--surface);color:var(--text)}.process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}.process-grid article{background:var(--bg);padding:28px;min-height:210px}.process-grid article>span{display:block;margin-bottom:20px;color:var(--accent);font-size:28px}.timeline{display:grid;gap:0;border-left:1px solid var(--line)}.timeline article{position:relative;padding:0 0 34px 34px}.timeline article span{position:absolute;left:-7px;top:8px;width:13px;height:13px;border-radius:50%;background:var(--accent)}.timeline h2{margin:0 0 8px;font-size:28px;font-weight:500}.text-stack{max-width:860px}.contact-card,address{font-style:normal;border:1px solid var(--line);background:var(--card-bg);padding:30px}.site-footer{margin-top:90px;padding:34px 20px;border-top:1px solid var(--line);text-align:center}.site-footer p{font-size:14px;color:var(--subtle)}@media (max-width:1100px){.brand-text small{display:none}.nav-links{gap:10px}.group-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.home-hero{grid-template-columns:1fr}.page-hero{grid-template-columns:1fr}.process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:860px){.nav{min-height:72px}.nav-toggle{display:inline-flex}.nav-links{position:absolute;left:0;right:0;top:72px;background:var(--header-bg);border-bottom:1px solid var(--line);padding:16px 24px;display:none;flex-direction:column;align-items:stretch;white-space:normal}.nav-links.is-open{display:flex}.nav-links>a,.nav-menu>a{padding:10px 0}.nav-menu{display:block}.nav-dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;margin:6px 0 10px;padding:10px;background:var(--surface)}.theme-toggle{width:54px}.theme-icon-moon{display:none}.brand-text strong{font-size:17px}.home-hero{width:min(100% - 28px,720px);margin-top:28px}.home-hero-copy h1{font-size:52px}.section-block,.page-hero{width:calc(100% - 28px);margin-top:48px}.intro-grid,.entry-grid,.group-grid,.split-section,.group-detail,.contact-layout,.process-grid{grid-template-columns:1fr}.media-frame img{height:300px}.entry-card{min-height:auto}.group-symbol{min-height:260px}}
/* First visual tuning pass after content review */
.home-hero {
  width: min(1260px, calc(100% - 56px));
  grid-template-columns: minmax(300px, 0.74fr) minmax(520px, 1.26fr);
  gap: 46px;
  margin-top: 54px;
}
.home-hero-copy h1 {
  font-size: clamp(42px, 5.4vw, 82px);
  line-height: 1.08;
}
.home-hero-copy h1 small {
  font-size: clamp(22px, 2.3vw, 34px);
}
.home-hero-copy > p {
  max-width: 560px;
  font-size: 17px;
}
.hero-media.brand-poster {
  border: 0;
  background: #070707;
}
.brand-poster img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: contain;
}
.page-hero {
  margin-top: 62px;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.82fr);
  gap: 44px;
}
.page-hero h1 {
  max-width: 820px;
  font-size: clamp(40px, 4.65vw, 72px);
  line-height: 1.08;
}
.page-hero > p {
  max-width: 560px;
  font-size: 17px;
}
.group-grid {
  gap: 20px;
}
.group-grid .entry-card {
  min-height: 330px;
}
.group-grid .entry-card figure {
  height: 138px;
  margin: -2px -2px 20px;
}
.group-grid .entry-card figure img {
  width: 82%;
  height: 82%;
}
.entry-card strong {
  font-size: 22px;
}
.entry-card small {
  font-size: 14px;
  line-height: 1.7;
}
@media (max-width: 1200px) {
  .home-hero {
    grid-template-columns: 1fr;
  }
  .brand-poster img {
    max-height: none;
  }
}
@media (max-width: 860px) {
  .home-hero {
    width: calc(100% - 28px);
    gap: 28px;
  }
  .home-hero-copy h1 {
    font-size: clamp(40px, 12vw, 56px);
  }
  .page-hero h1 {
    font-size: clamp(36px, 11vw, 52px);
  }
  .group-grid .entry-card {
    min-height: auto;
  }
}

.method-list {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.method-list article {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 34px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
}
.method-list article:first-child {
  border-top: 0;
}
.method-list span {
  color: var(--accent);
  font-size: 30px;
  line-height: 1.1;
  font-weight: 500;
}
.method-list h2 {
  margin: 0;
  max-width: 980px;
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.24;
  font-weight: 500;
}
.method-list p {
  max-width: 820px;
  margin-top: 14px;
  font-size: 16px;
}
@media (max-width: 860px) {
  .method-list article {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 0;
  }
  .method-list h2 {
    font-size: 24px;
  }
}


/* Reused organization visualization from the mechanical group site */
.qianli-hero > p {
  max-width: 520px;
}

.organization-section {
  padding-top: 52px;
}

.organization-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(360px, 1fr);
  align-items: end;
  gap: 72px;
  margin-bottom: 28px;
}

.organization-intro h1,
.organization-intro h2 {
  margin: 2px 0 0;
  font-size: 38px;
  font-weight: 500;
  line-height: 1.3;
}

.organization-intro > p {
  max-width: 660px;
  padding-bottom: 5px;
  font-size: 17px;
  line-height: 1.8;
}

.organization-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(680px, 100%);
  margin: 0 auto 24px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.organization-tabs button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 18px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  outline: none;
  cursor: pointer;
  transition:
    background-color 180ms ease,
    color 180ms ease;
}

.organization-tabs button svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: currentColor;
}

.organization-tabs button:last-child {
  border-right: 0;
}

.organization-tabs button::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: -1px;
  left: 18px;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(0.35);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.organization-tabs button:hover,
.organization-tabs button:focus-visible,
.organization-tabs button.is-active {
  background: var(--card-bg);
  color: var(--text);
}

.organization-tabs button.is-active {
  font-weight: 500;
}

.organization-tabs button.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.organization-tabs button:focus-visible {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.organization-stage {
  min-height: 590px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.org-lane {
  display: grid;
  grid-template-columns: minmax(190px, 0.28fr) minmax(0, 1fr);
  gap: 34px;
  padding: 26px 0;
  border-bottom: 1px solid var(--soft-line);
}

.org-lane:last-child {
  border-bottom: 0;
}

.org-lane-label {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-content: start;
  gap: 10px;
  padding-top: 4px;
}

.org-lane-label > span {
  color: var(--accent);
  font-family: "Lora", serif;
  font-size: 13px;
  font-weight: 500;
}

.org-lane-label h2 {
  margin: 0 0 7px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.35;
}

.org-lane-label p {
  font-size: 13px;
  line-height: 1.65;
}

.org-lane-track {
  display: grid;
  align-items: stretch;
  gap: 14px;
}

.org-lane-track--single {
  grid-template-columns: minmax(0, 1fr);
}

.org-lane-track--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.org-lane-track--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.org-lane-track--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.org-lane-track--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.org-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  min-height: 142px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card-bg);
  color: inherit;
  text-decoration: none;
  outline: none;
  transition:
    opacity 160ms linear,
    transform 160ms ease,
    border-color 160ms ease,
    background-color 240ms ease,
    box-shadow 160ms ease;
}

.org-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--soft-line);
  transition: background-color 160ms ease;
}

.org-card:hover,
.org-card:focus-visible,
.org-card.is-focused {
  z-index: 2;
  border-color: var(--accent);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}

.org-card:hover::before,
.org-card:focus-visible::before,
.org-card.is-focused::before {
  background: var(--accent);
}

.organization-stage.has-focus .org-card {
  opacity: 0.48;
}

.organization-stage.has-focus .org-card.is-focused {
  opacity: 1;
}

.org-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* Mechanical group case page: merged group-site content and recruitment pathway. */
.mechanical-page {
  --mechanical-tone: #c59a4b;
}

.mechanical-page-hero {
  align-items: end;
  grid-template-columns: minmax(320px, .78fr) minmax(560px, 1.22fr);
  gap: 28px;
}

.mechanical-page-hero > p {
  width: 100%;
  max-width: none;
}

.mechanical-title-lockup {
  display: flex;
  align-items: center;
  gap: 24px;
}

.mechanical-title-lockup h1 {
  flex: 0 1 auto;
}

.mechanical-title-lockup img {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: brightness(0);
}

:root[data-theme="dark"] .mechanical-title-lockup img {
  filter: none;
}

.mechanical-section-nav {
  position: sticky;
  z-index: 12;
  top: 82px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(var(--max-width), calc(100% - 40px));
  margin: 24px auto 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--header-bg) 94%, transparent);
  backdrop-filter: blur(12px);
}

.mechanical-section-nav button {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 10px 16px;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}

.mechanical-section-nav button:first-child {
  border-left: 0;
}

.mechanical-section-nav button span {
  margin-right: 8px;
  color: var(--mechanical-tone);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}

.mechanical-section-nav button > i {
  margin-right: 9px;
  color: var(--muted);
  font-size: 19px;
  line-height: 1;
  transition: color 160ms ease, transform 160ms ease;
}

.mechanical-section-nav button:hover,
.mechanical-section-nav button:focus-visible,
.mechanical-section-nav button[aria-selected="true"] {
  background: color-mix(in srgb, var(--mechanical-tone) 9%, var(--surface));
  color: var(--mechanical-tone);
  outline: 0;
}

.mechanical-section-nav button[aria-selected="true"] {
  box-shadow: inset 0 -3px 0 var(--mechanical-tone);
}

.mechanical-section-nav button:hover > i,
.mechanical-section-nav button:focus-visible > i,
.mechanical-section-nav button[aria-selected="true"] > i {
  color: var(--mechanical-tone);
  transform: translateY(-1px);
}

.mechanical-page > [data-mechanical-panel="section"][hidden] {
  display: none !important;
}

.mechanical-page > [data-mechanical-panel="section"] {
  min-height: 560px;
  margin-top: 34px;
  margin-bottom: 64px;
}

.mechanical-page > .mechanical-stack[data-mechanical-panel="section"],
.mechanical-page > .mechanical-practice[data-mechanical-panel="section"],
.mechanical-page > .mechanical-growth[data-mechanical-panel="section"],
.mechanical-page > .mechanical-career[data-mechanical-panel="section"] {
  padding-top: 0;
  border-top: 0;
}

.mechanical-section-heading h2 {
  margin: 5px 0 14px;
  font-size: clamp(30px, 3.5vw, 48px);
  font-weight: 500;
  line-height: 1.2;
}

.mechanical-section-heading > p:last-child {
  max-width: 700px;
  font-size: 16px;
  line-height: 1.85;
}

.mechanical-section-heading--wide {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, .7fr);
  gap: 12px 64px;
  align-items: end;
}

.mechanical-section-heading--wide .page-label {
  grid-column: 1 / -1;
}

.mechanical-section-heading--wide h2 {
  margin-bottom: 0;
}

.mechanical-section-heading--wide > p:last-child {
  padding-bottom: 4px;
}

.mechanical-work {
  display: grid;
  grid-template-columns: minmax(360px, .82fr) minmax(0, 1.18fr);
  gap: 54px;
  align-items: start;
}

.mechanical-work-visual {
  position: sticky;
  top: 158px;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--surface);
}

.mechanical-work-visual img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.mechanical-work-visual figcaption,
.mechanical-project-strip figcaption {
  padding: 10px 13px;
  border-top: 1px solid var(--line);
  color: var(--subtle);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
}

.mechanical-number-list {
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.mechanical-number-list li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 16px;
  padding: 19px 0;
  border-bottom: 1px solid var(--line);
}

.mechanical-number-list li > span,
.mechanical-practice-list article > span,
.mechanical-growth-path li > span,
.mechanical-stack-grid article > span {
  color: var(--mechanical-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
}

.mechanical-number-list h3,
.mechanical-practice-list h3,
.mechanical-growth-path h3,
.mechanical-stack-grid h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
}

.mechanical-number-list p,
.mechanical-practice-list p,
.mechanical-growth-path p,
.mechanical-stack-grid p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.75;
}

.mechanical-stack,
.mechanical-growth {
  padding-top: 56px;
  border-top: 1px solid var(--line);
}

.mechanical-delivery-chain {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 34px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.mechanical-delivery-chain article {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 14px;
  min-height: 158px;
  padding: 24px 22px;
  border-left: 1px solid var(--line);
  background: var(--card-bg);
}

.mechanical-delivery-chain article:first-child {
  border-left: 0;
}

.mechanical-delivery-chain article > span {
  position: absolute;
  top: 15px;
  right: 16px;
  color: color-mix(in srgb, var(--mechanical-tone) 68%, var(--muted));
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}

.mechanical-delivery-chain article > i {
  grid-row: 1 / 3;
  margin-top: 2px;
  color: var(--mechanical-tone);
  font-size: 27px;
}

.mechanical-delivery-chain h3 {
  margin: 0 34px 0 0;
  font-size: 17px;
  font-weight: 500;
}

.mechanical-delivery-chain p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.mechanical-capability-heading {
  display: grid;
  grid-template-columns: minmax(280px, .7fr) minmax(380px, 1.3fr);
  gap: 44px;
  align-items: end;
  margin-top: 54px;
}

.mechanical-capability-heading h3,
.mechanical-industry-capabilities > header h3,
.mechanical-career-mapping > header h3,
.mechanical-beyond-tools > header h3,
.mechanical-career-actions > div > h3 {
  margin: 5px 0 0;
  font-size: 27px;
  font-weight: 500;
  line-height: 1.35;
}

.mechanical-capability-heading > p,
.mechanical-industry-capabilities > header > p:last-child,
.mechanical-career-mapping > header > p:last-child {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

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

.mechanical-capability-grid article {
  display: flex;
  flex-direction: column;
  min-height: 270px;
  padding: 25px 26px 21px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.mechanical-capability-grid article > header {
  display: grid;
  grid-template-columns: 34px 32px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
}

.mechanical-capability-grid article > header > i {
  color: var(--mechanical-tone);
  font-size: 26px;
  line-height: 1;
}

.mechanical-capability-grid article > header > span {
  padding-top: 4px;
  color: var(--mechanical-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
}

.mechanical-capability-grid h4 {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.45;
}

.mechanical-capability-grid article > p {
  margin: 20px 0 0 77px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

.mechanical-capability-grid article > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 0 77px;
  padding: 0;
  list-style: none;
}

.mechanical-capability-grid article > ul li,
.mechanical-career-tags span {
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--mechanical-tone) 42%, var(--line));
  color: var(--muted);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
}

.mechanical-capability-grid article > footer {
  margin: auto 0 0 77px;
  padding-top: 18px;
  color: var(--subtle);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
}

.mechanical-capability-grid article > footer i {
  margin-right: 6px;
  color: var(--mechanical-tone);
  font-size: 15px;
}

.mechanical-capability-card--wide {
  grid-column: 1 / -1;
  min-height: 220px !important;
}

.mechanical-project-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.mechanical-project-strip figure {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--surface);
}

.mechanical-project-strip img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.mechanical-practice {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  gap: 36px 74px;
  align-items: start;
  padding-top: 56px;
  border-top: 1px solid var(--line);
}

.mechanical-practice-list {
  border-top: 1px solid var(--line);
}

.mechanical-practice-list article {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.mechanical-principle {
  position: relative;
  grid-column: 1 / -1;
  margin: 0;
  padding: 30px 42px 30px 96px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--mechanical-tone) 8%, var(--card-bg));
}

.mechanical-principle i {
  position: absolute;
  top: 21px;
  left: 34px;
  color: var(--mechanical-tone);
  font-size: 40px;
}

.mechanical-principle p {
  color: var(--text);
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.55;
}

.mechanical-growth-path {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 38px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.mechanical-growth-path li {
  min-height: 276px;
  padding: 24px;
  border-left: 1px solid var(--line);
}

.mechanical-growth-path li:first-child {
  border-left: 0;
}

.mechanical-growth-path li > span {
  display: block;
  margin-bottom: 40px;
}

.mechanical-growth-path small {
  color: var(--mechanical-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
}

.mechanical-growth-path h3 {
  margin-top: 4px;
  font-size: 21px;
}

.mechanical-growth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 24px;
}

.mechanical-training-version {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 12px 18px;
  align-items: center;
  margin-top: 30px;
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--mechanical-tone) 46%, var(--line));
  background: color-mix(in srgb, var(--mechanical-tone) 7%, var(--card-bg));
  font-family: Arial, "Microsoft YaHei", sans-serif;
}

.mechanical-training-version > span {
  color: var(--mechanical-tone);
  font-size: 12px;
}

.mechanical-training-version > span i {
  margin-right: 5px;
}

.mechanical-training-version strong {
  color: var(--text);
  font-size: 13px;
  letter-spacing: .08em;
}

.mechanical-training-version small {
  color: var(--subtle);
  font-size: 11px;
  text-align: right;
}

.mechanical-training-shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--mechanical-tone) 58%, var(--line));
  background: color-mix(in srgb, var(--mechanical-tone) 8%, var(--card-bg));
}

.mechanical-training-shortcut > div,
.mechanical-training-shortcut > div > span,
.mechanical-training-shortcut a {
  display: flex;
  align-items: center;
}

.mechanical-training-shortcut > div {
  gap: 12px;
}

.mechanical-training-shortcut > div > i {
  color: var(--mechanical-tone);
  font-size: 1.35rem;
}

.mechanical-training-shortcut > div > span {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}

.mechanical-training-shortcut strong {
  font-size: .9rem;
  font-weight: 600;
}

.mechanical-training-shortcut small {
  color: var(--muted);
  font-size: .75rem;
}

.mechanical-training-shortcut a {
  flex: 0 0 auto;
  gap: 8px;
  border: 1px solid var(--mechanical-tone);
  padding: 9px 13px;
  color: var(--mechanical-tone);
  font-size: .8rem;
}

.mechanical-training-shortcut a:hover,
.mechanical-training-shortcut a:focus-visible {
  background: var(--mechanical-tone);
  color: #111;
}

@media (max-width: 720px) {
  .mechanical-training-shortcut {
    align-items: flex-start;
    flex-direction: column;
  }
}

.mechanical-training-framework,
.mechanical-long-term-growth {
  margin-top: 52px;
  padding-top: 44px;
  border-top: 1px solid var(--line);
}

.mechanical-training-framework > header,
.mechanical-long-term-growth > header {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(360px, 1.2fr);
  gap: 48px;
  align-items: end;
}

.mechanical-training-framework > header > p,
.mechanical-long-term-growth > header > p {
  padding-bottom: 6px;
  font-size: 14px;
  line-height: 1.8;
}

.mechanical-training-framework h3,
.mechanical-long-term-growth h3 {
  margin: 4px 0 0;
  font-size: clamp(27px, 3vw, 39px);
  font-weight: 500;
  line-height: 1.28;
}

.mechanical-training-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 30px;
  border: 1px solid var(--line);
  background: var(--line);
  gap: 1px;
}

.mechanical-training-principles article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 12px;
  padding: 18px 20px;
  background: var(--card-bg);
}

.mechanical-training-principles span {
  grid-row: 1 / 3;
  color: var(--mechanical-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}

.mechanical-training-principles strong {
  font-size: 16px;
  font-weight: 500;
}

.mechanical-training-principles p {
  font-size: 12px;
  line-height: 1.65;
}

.mechanical-training-framework-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
  border: 1px solid var(--line);
  background: var(--line);
  gap: 1px;
}

.mechanical-training-framework-grid > article {
  min-height: 224px;
  padding: 24px;
  background: var(--card-bg);
}

.mechanical-training-framework-grid > article > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.mechanical-training-framework-grid i {
  color: var(--mechanical-tone);
  font-size: 23px;
}

.mechanical-training-framework-grid div > span {
  color: var(--mechanical-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}

.mechanical-training-framework-grid h4 {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
}

.mechanical-training-framework-grid p {
  margin-top: 13px;
  font-size: 13px;
  line-height: 1.72;
}

.mechanical-training-framework-grid ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.mechanical-training-framework-grid li {
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--mechanical-tone) 32%, var(--line));
  color: var(--text);
  font-size: 11px;
  line-height: 1.4;
}

.mechanical-training-framework > aside {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 15px;
  border-left: 2px solid var(--mechanical-tone);
  background: color-mix(in srgb, var(--mechanical-tone) 6%, var(--card-bg));
}

.mechanical-training-framework > aside i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--mechanical-tone);
  font-size: 18px;
}

.mechanical-training-framework > aside p {
  font-size: 12px;
  line-height: 1.7;
}

.mechanical-first-year-position {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
  gap: 54px;
  align-items: start;
  margin-top: 52px;
}

.mechanical-first-year-position h3,
.mechanical-training-map > header h3 {
  margin: 4px 0 16px;
  font-size: clamp(27px, 3vw, 39px);
  font-weight: 500;
  line-height: 1.28;
}

.mechanical-first-year-position > div:first-child > p:not(.page-label) {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.9;
}

.mechanical-growth-lanes {
  display: grid;
  gap: 12px;
}

.mechanical-growth-lanes article {
  position: relative;
  min-height: 182px;
  padding: 24px 26px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.mechanical-growth-lanes article::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--mechanical-tone);
}

.mechanical-growth-lanes article > span,
.mechanical-panel-intro > span,
.mechanical-parallel-work > header > span {
  color: var(--mechanical-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
}

.mechanical-growth-lanes h4 {
  margin: 8px 0 9px;
  font-size: 22px;
  font-weight: 500;
}

.mechanical-growth-lanes p {
  font-size: 14px;
  line-height: 1.75;
}

.mechanical-growth-lane--accelerated {
  background: color-mix(in srgb, var(--mechanical-tone) 7%, var(--card-bg)) !important;
}

.mechanical-training-map {
  margin-top: 62px;
  padding-top: 46px;
  border-top: 1px solid var(--line);
}

.mechanical-long-term-growth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 30px;
  border: 1px solid var(--line);
  background: var(--line);
  gap: 1px;
}

.mechanical-long-term-growth-grid > article {
  min-height: 220px;
  padding: 26px;
  background: var(--card-bg);
}

.mechanical-long-term-growth-grid article > header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.mechanical-long-term-growth-grid header > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--mechanical-tone) 62%, var(--line));
  color: var(--mechanical-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
}

.mechanical-long-term-growth-grid small {
  display: block;
  margin-bottom: 2px;
  color: var(--mechanical-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  letter-spacing: .04em;
}

.mechanical-long-term-growth-grid h4 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.mechanical-long-term-growth-grid article > p {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.72;
}

.mechanical-long-term-growth-grid p strong {
  color: var(--text);
  font-weight: 500;
}

.mechanical-training-map > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .75fr);
  gap: 50px;
  align-items: end;
}

.mechanical-training-map > header > p {
  padding-bottom: 6px;
  font-size: 14px;
  line-height: 1.75;
}

.mechanical-phase-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 30px;
}

.mechanical-phase-tabs::before {
  content: "";
  position: absolute;
  top: 31px;
  right: 5%;
  left: 5%;
  z-index: 0;
  height: 1px;
  background: var(--line);
}

.mechanical-phase-tabs button {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 2px 12px;
  min-height: 126px;
  padding: 20px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.mechanical-phase-tabs button:hover,
.mechanical-phase-tabs button:focus-visible {
  border-color: color-mix(in srgb, var(--mechanical-tone) 68%, var(--line));
  transform: translateY(-2px);
  outline: 0;
}

.mechanical-phase-tabs button[aria-selected="true"] {
  border-color: var(--mechanical-tone);
  background: color-mix(in srgb, var(--mechanical-tone) 9%, var(--card-bg));
  box-shadow: inset 0 -3px 0 var(--mechanical-tone);
}

.mechanical-phase-tabs button > span {
  grid-row: 1 / 4;
  display: grid;
  place-items: center;
  align-self: start;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--mechanical-tone) 68%, var(--line));
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--mechanical-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
}

.mechanical-phase-tabs button small,
.mechanical-phase-tabs button em {
  color: var(--subtle);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-style: normal;
}

.mechanical-phase-tabs button strong {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}

.mechanical-phase-panels {
  margin-top: 14px;
}

.mechanical-phase-panel {
  padding: 34px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.mechanical-phase-panel[hidden],
.mechanical-course-panels > [hidden] {
  display: none;
}

.mechanical-panel-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .85fr);
  gap: 8px 50px;
  align-items: end;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.mechanical-panel-intro > span {
  grid-column: 1 / -1;
}

.mechanical-panel-intro h4,
.mechanical-parallel-work h4 {
  margin: 0;
  font-size: 27px;
  font-weight: 500;
  line-height: 1.35;
}

.mechanical-panel-intro > p {
  font-size: 14px;
  line-height: 1.75;
}

.mechanical-course-browser {
  display: grid;
  grid-template-columns: minmax(280px, .74fr) minmax(0, 1.26fr);
  gap: 16px;
  margin-top: 28px;
}

.mechanical-course-directory {
  display: grid;
  align-content: start;
  gap: 6px;
}

.mechanical-course-directory button {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.mechanical-course-directory button:hover,
.mechanical-course-directory button:focus-visible {
  border-color: color-mix(in srgb, var(--mechanical-tone) 68%, var(--line));
  transform: translateX(3px);
  outline: 0;
}

.mechanical-course-directory button[aria-selected="true"] {
  border-color: var(--mechanical-tone);
  background: color-mix(in srgb, var(--mechanical-tone) 10%, var(--card-bg));
  box-shadow: inset 3px 0 0 var(--mechanical-tone);
}

.mechanical-course-directory button span {
  color: var(--mechanical-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
}

.mechanical-course-directory button strong {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.mechanical-course-panels {
  min-height: 442px;
}

.mechanical-course-panels > article {
  position: relative;
  height: 100%;
  min-height: 442px;
  padding: 38px 40px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mechanical-tone) 44%, var(--line));
  background: color-mix(in srgb, var(--mechanical-tone) 6%, var(--surface));
}

.mechanical-course-panels > article::after {
  content: attr(id);
  position: absolute;
  right: -8px;
  bottom: -34px;
  color: color-mix(in srgb, var(--mechanical-tone) 9%, transparent);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 66px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}

.mechanical-course-panels article > span {
  color: var(--mechanical-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}

.mechanical-course-panels h5 {
  max-width: 600px;
  margin: 18px 0 16px;
  font-size: clamp(25px, 2.7vw, 36px);
  font-weight: 500;
  line-height: 1.35;
}

.mechanical-course-panels p {
  max-width: 650px;
  font-size: 15px;
  line-height: 1.85;
}

.mechanical-course-panels ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.mechanical-course-panels li {
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--mechanical-tone) 42%, var(--line));
  color: var(--muted);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
}

.mechanical-parallel-work {
  margin-top: 34px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.mechanical-parallel-work > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr);
  gap: 6px 48px;
  align-items: end;
}

.mechanical-parallel-work > header > span {
  grid-column: 1 / -1;
}

.mechanical-parallel-work > header > p {
  font-size: 13px;
}

.mechanical-parallel-work > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.mechanical-phase-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.mechanical-parallel-work article,
.mechanical-phase-card-grid article {
  min-height: 205px;
  padding: 22px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.mechanical-parallel-work article > i {
  display: block;
  margin-bottom: 24px;
  color: var(--mechanical-tone);
  font-size: 28px;
}

.mechanical-parallel-work article small,
.mechanical-phase-card-grid article > span,
.mechanical-spring-route article > span,
.mechanical-evaluation-flow article small {
  color: var(--mechanical-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  letter-spacing: .08em;
}

.mechanical-parallel-work h5,
.mechanical-phase-card-grid h5,
.mechanical-spring-route h5,
.mechanical-evaluation-flow h5 {
  margin: 7px 0 9px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
}

.mechanical-parallel-work article p,
.mechanical-phase-card-grid article p,
.mechanical-spring-route article p,
.mechanical-evaluation-flow article p {
  font-size: 13px;
  line-height: 1.72;
}

.mechanical-phase-card-grid article > span {
  display: block;
  margin-bottom: 26px;
}

.mechanical-phase-note,
.mechanical-future-opportunity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--mechanical-tone) 44%, var(--line));
  background: color-mix(in srgb, var(--mechanical-tone) 7%, var(--card-bg));
}

.mechanical-phase-note strong,
.mechanical-future-opportunity strong {
  color: var(--text);
  font-weight: 500;
}

.mechanical-phase-note p,
.mechanical-future-opportunity p {
  font-size: 13px;
  line-height: 1.7;
}

.mechanical-spring-route {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.mechanical-spring-route article {
  min-height: 218px;
  padding: 28px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.mechanical-spring-route article:last-child {
  border-color: color-mix(in srgb, var(--mechanical-tone) 58%, var(--line));
  background: color-mix(in srgb, var(--mechanical-tone) 7%, var(--surface));
}

.mechanical-lock-date {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  margin-top: 18px;
  padding: 22px 26px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.mechanical-lock-date > span {
  color: var(--mechanical-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .06em;
}

.mechanical-lock-date strong {
  color: var(--text);
  font-weight: 500;
}

.mechanical-lock-date p {
  margin-top: 3px;
  font-size: 13px;
}

.mechanical-evaluation-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  margin-top: 28px;
}

.mechanical-evaluation-flow > i {
  align-self: center;
  color: var(--mechanical-tone);
  font-size: 24px;
}

.mechanical-evaluation-flow article {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 14px;
  min-height: 196px;
  padding: 22px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.mechanical-evaluation-flow article > span {
  color: var(--mechanical-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
}

.mechanical-evaluation-result {
  border-color: var(--mechanical-tone) !important;
  background: color-mix(in srgb, var(--mechanical-tone) 9%, var(--surface)) !important;
}

.mechanical-future-opportunity {
  margin-top: 20px;
}

.mechanical-future-opportunity > i {
  color: var(--mechanical-tone);
  font-size: 26px;
}

.mechanical-career {
  display: block;
  padding-top: 56px;
  border-top: 1px solid var(--line);
}

.mechanical-industry-signal {
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
  gap: 18px 48px;
  margin-top: 34px;
  padding: 26px 28px;
  border: 1px solid color-mix(in srgb, var(--mechanical-tone) 44%, var(--line));
  background: color-mix(in srgb, var(--mechanical-tone) 7%, var(--card-bg));
}

.mechanical-industry-signal > div:first-child {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 3px 10px;
  align-content: start;
}

.mechanical-industry-signal > div:first-child > i {
  grid-row: 1 / 3;
  color: var(--mechanical-tone);
  font-size: 24px;
}

.mechanical-industry-signal > div:first-child > span {
  color: var(--mechanical-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}

.mechanical-industry-signal > div:first-child > strong {
  margin-top: 5px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}

.mechanical-industry-signal > p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.85;
}

.mechanical-recruitment-dialog {
  width: min(1120px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--mechanical-tone) 52%, var(--line));
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .36);
}

.mechanical-recruitment-dialog:not([open]) {
  display: none;
}

.mechanical-recruitment-dialog::backdrop {
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(5px);
}

.mechanical-recruitment-dialog-close {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--card-bg);
  color: var(--text);
  font-size: 20px;
  place-items: center;
  cursor: pointer;
}

.mechanical-recruitment-dialog-close:hover,
.mechanical-recruitment-dialog-close:focus-visible {
  border-color: var(--mechanical-tone);
  color: var(--mechanical-tone);
  outline: 0;
}

.mechanical-recruitment-board {
  margin: 0;
  padding: 30px;
}

.mechanical-recruitment-board > header {
  display: flex;
  gap: 36px;
  align-items: end;
  justify-content: space-between;
  padding-right: 54px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.mechanical-recruitment-board > header > div:first-child {
  max-width: 760px;
}

.mechanical-recruitment-board > header h3 {
  margin: 5px 0 0;
  font-size: 27px;
  font-weight: 500;
  line-height: 1.35;
}

.mechanical-recruitment-board > header p:last-child {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.mechanical-recruitment-controls {
  display: grid;
  grid-template-columns: 42px 72px 42px;
  align-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
}

.mechanical-recruitment-controls button {
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  place-items: center;
  cursor: pointer;
}

.mechanical-recruitment-controls button:hover,
.mechanical-recruitment-controls button:focus-visible {
  background: color-mix(in srgb, var(--mechanical-tone) 10%, var(--surface));
  color: var(--mechanical-tone);
  outline: 0;
}

.mechanical-recruitment-controls button:first-child {
  border-right: 1px solid var(--line);
}

.mechanical-recruitment-controls button:last-child {
  border-left: 1px solid var(--line);
}

.mechanical-recruitment-controls output {
  color: var(--mechanical-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  letter-spacing: .08em;
}

.mechanical-recruitment-viewport {
  margin-top: 20px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.mechanical-recruitment-case {
  display: grid;
  grid-template-columns: minmax(230px, .58fr) minmax(0, 1.42fr);
  min-height: 458px;
  animation: mechanical-case-enter 220ms ease both;
}

.mechanical-recruitment-case[hidden] {
  display: none;
}

@keyframes mechanical-case-enter {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .mechanical-recruitment-case {
    animation: none;
  }
}

.mechanical-recruitment-company {
  padding: 32px 28px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--mechanical-tone) 8%, var(--surface));
}

.mechanical-recruitment-company > span {
  color: var(--mechanical-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
}

.mechanical-recruitment-company h4 {
  margin: 54px 0 0;
  font-size: 29px;
  font-weight: 500;
  line-height: 1.25;
}

.mechanical-recruitment-company > p {
  margin-top: 9px;
  color: var(--muted);
  font-size: 14px;
}

.mechanical-recruitment-company > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 30px;
}

.mechanical-recruitment-company em {
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--mechanical-tone) 38%, var(--line));
  color: var(--muted);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-style: normal;
}

.mechanical-recruitment-requirements {
  padding: 30px 34px 24px;
}

.mechanical-recruitment-requirements h5 {
  margin: 0;
  color: var(--mechanical-tone);
  font-size: 13px;
  font-weight: 500;
}

.mechanical-recruitment-requirements ol {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: recruitment-requirement;
}

.mechanical-recruitment-requirements li {
  position: relative;
  padding: 11px 0 11px 42px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  counter-increment: recruitment-requirement;
}

.mechanical-recruitment-requirements li::before {
  position: absolute;
  top: 12px;
  left: 0;
  color: var(--mechanical-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
  content: "0" counter(recruitment-requirement);
}

.mechanical-recruitment-case > aside {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 28px auto;
  gap: 12px;
  align-items: start;
  padding: 18px 26px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--mechanical-tone) 5%, var(--card-bg));
}

.mechanical-recruitment-case > aside > i {
  color: var(--mechanical-tone);
  font-size: 22px;
}

.mechanical-recruitment-case > aside span {
  color: var(--mechanical-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
}

.mechanical-recruitment-case > aside p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.mechanical-recruitment-board > footer {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  margin-top: 12px;
  color: var(--subtle);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  line-height: 1.65;
}

.mechanical-recruitment-board > footer span {
  color: var(--mechanical-tone);
  font-weight: 700;
}

.mechanical-industry-capabilities,
.mechanical-career-mapping,
.mechanical-beyond-tools,
.mechanical-career-actions {
  margin-top: 56px;
}

.mechanical-industry-capabilities > header,
.mechanical-career-mapping > header {
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  gap: 10px 54px;
  align-items: end;
}

.mechanical-industry-capabilities > header .page-label,
.mechanical-career-mapping > header .page-label {
  grid-column: 1 / -1;
}

.mechanical-industry-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 24px;
  border: 1px solid var(--line);
  background: var(--line);
}

.mechanical-industry-capabilities article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 14px;
  align-content: start;
  align-items: center;
  min-height: 164px;
  padding: 19px 20px;
  background: var(--card-bg);
}

.mechanical-industry-capabilities article > i {
  color: var(--mechanical-tone);
  font-size: 24px;
}

.mechanical-industry-capabilities article h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
}

.mechanical-industry-capabilities article p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.mechanical-industry-case-entry {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--mechanical-tone) 6%, var(--card-bg));
}

.mechanical-industry-case-entry > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
}

.mechanical-industry-case-entry > div > i {
  grid-row: 1 / 3;
  color: var(--mechanical-tone);
  font-size: 23px;
}

.mechanical-industry-case-entry > div > span {
  color: var(--mechanical-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
}

.mechanical-industry-case-entry > div > p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.mechanical-industry-case-entry > button {
  display: inline-flex;
  gap: 18px;
  align-items: center;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid color-mix(in srgb, var(--mechanical-tone) 52%, var(--line));
  background: transparent;
  color: var(--text);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 12px;
  cursor: pointer;
}

.mechanical-industry-case-entry > button:hover,
.mechanical-industry-case-entry > button:focus-visible {
  background: var(--mechanical-tone);
  color: var(--bg);
  outline: 0;
}

.mechanical-career-flip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.mechanical-career-flip-card {
  position: relative;
  min-height: 182px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  perspective: 1200px;
  cursor: pointer;
}

.mechanical-career-flip-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.mechanical-career-flip-card.is-flipped .mechanical-career-flip-inner {
  transform: rotateY(180deg);
}

.mechanical-career-flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  backface-visibility: hidden;
  transition: border-color .2s ease, background-color .2s ease;
}

.mechanical-career-flip-card:hover .mechanical-career-flip-face,
.mechanical-career-flip-card:focus-visible .mechanical-career-flip-face {
  border-color: color-mix(in srgb, var(--mechanical-tone) 66%, var(--line));
}

.mechanical-career-flip-card:focus-visible {
  outline: 2px solid var(--mechanical-tone);
  outline-offset: 3px;
}

.mechanical-career-flip-front > i {
  margin: 0;
  color: var(--mechanical-tone);
  font-size: 24px;
}

.mechanical-career-flip-front {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 10px 11px;
  align-items: center;
}

.mechanical-career-flip-front > strong {
  margin: 0;
}

.mechanical-career-flip-front > span:not(.mechanical-career-flip-index) {
  grid-column: 1 / -1;
  align-self: start;
}

.mechanical-career-flip-index,
.mechanical-career-flip-back > span:first-child {
  color: var(--mechanical-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
}

.mechanical-career-flip-face strong {
  display: block;
  margin-bottom: 11px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
}

.mechanical-career-flip-face > span:not(.mechanical-career-flip-index):not(:first-child) {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.mechanical-career-flip-face small {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-top: auto;
  padding-top: 10px;
  color: var(--mechanical-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 12px;
  letter-spacing: .08em;
}

.mechanical-career-flip-front > small {
  grid-column: 1 / -1;
  justify-self: end;
  padding-top: 0;
}

.mechanical-career-flip-back {
  justify-content: flex-start;
  border-color: color-mix(in srgb, var(--mechanical-tone) 58%, var(--line));
  background: color-mix(in srgb, var(--mechanical-tone) 10%, var(--card-bg));
  transform: rotateY(180deg);
}

.mechanical-career-flip-back > strong {
  margin-top: 14px;
  font-size: 18px;
  line-height: 1.4;
}

.mechanical-alumni-bridge {
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  gap: 34px;
  margin-top: 18px;
  padding: 30px;
  border: 1px solid color-mix(in srgb, var(--mechanical-tone) 48%, var(--line));
  background: color-mix(in srgb, var(--mechanical-tone) 7%, var(--card-bg));
}

.mechanical-alumni-bridge > div:first-child {
  position: relative;
  padding-left: 52px;
}

.mechanical-alumni-bridge > div:first-child > i {
  position: absolute;
  top: 2px;
  left: 0;
  color: var(--mechanical-tone);
  font-size: 34px;
}

.mechanical-alumni-bridge h3 {
  margin: 8px 0 12px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.45;
}

.mechanical-alumni-bridge > div:first-child > p:last-child,
.mechanical-alumni-support-list article p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.72;
}

.mechanical-alumni-support-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.mechanical-alumni-support-list article {
  padding: 20px;
  background: var(--card-bg);
}

.mechanical-alumni-support-list article > span {
  color: var(--mechanical-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}

.mechanical-alumni-support-list article strong {
  display: block;
  margin: 15px 0 9px;
  font-size: 15px;
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .mechanical-career-flip-inner {
    transition: none;
  }
}

.mechanical-beyond-tools > header {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.mechanical-beyond-tools > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.mechanical-beyond-tools article {
  position: relative;
  padding: 26px 28px 26px 78px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.mechanical-beyond-tools article > i {
  position: absolute;
  top: 26px;
  left: 27px;
  color: var(--mechanical-tone);
  font-size: 31px;
}

.mechanical-beyond-tools article > span {
  color: var(--mechanical-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}

.mechanical-beyond-tools article h4 {
  margin: 5px 0 14px;
  font-size: 20px;
  font-weight: 500;
}

.mechanical-beyond-tools article ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mechanical-beyond-tools article li {
  position: relative;
  padding-left: 13px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.mechanical-beyond-tools article li::before {
  position: absolute;
  top: .68em;
  left: 0;
  width: 4px;
  height: 4px;
  background: var(--mechanical-tone);
  content: "";
}

.mechanical-career-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 14px;
  align-items: stretch;
}

.mechanical-career-actions > div {
  padding: 32px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.mechanical-career-actions > div > p:not(.page-label) {
  max-width: 700px;
  margin: 14px 0 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

.mechanical-recruit-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0;
  padding: 34px;
  border: 1px solid color-mix(in srgb, var(--mechanical-tone) 46%, var(--line));
  background: color-mix(in srgb, var(--mechanical-tone) 9%, var(--card-bg));
}

.mechanical-recruit-panel > p:not(.page-label) {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.mechanical-recruit-panel h2 {
  margin: 8px 0 16px;
  font-size: 29px;
  font-weight: 500;
  line-height: 1.38;
}

.mechanical-recruit-panel > a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--mechanical-tone) 48%, var(--line));
  color: var(--mechanical-tone);
  font-weight: 500;
}

@media (max-width: 1100px) {
  .mechanical-parallel-work > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mechanical-page-hero {
    grid-template-columns: 1fr;
  }

  .mechanical-section-heading--wide {
    grid-template-columns: 1fr;
  }

  .mechanical-first-year-position,
  .mechanical-training-map > header,
  .mechanical-training-framework > header,
  .mechanical-long-term-growth > header,
  .mechanical-panel-intro,
  .mechanical-parallel-work > header {
    grid-template-columns: 1fr;
  }

  .mechanical-training-framework-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mechanical-panel-intro > span,
  .mechanical-parallel-work > header > span {
    grid-column: auto;
  }

  .mechanical-phase-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mechanical-evaluation-flow {
    grid-template-columns: 1fr;
  }

  .mechanical-evaluation-flow > i {
    display: none;
  }

  .mechanical-delivery-chain,
  .mechanical-growth-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mechanical-delivery-chain article:nth-child(3) {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .mechanical-delivery-chain article:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .mechanical-industry-capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mechanical-career-flip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mechanical-alumni-bridge {
    grid-template-columns: 1fr;
  }

  .mechanical-growth-path li:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .mechanical-growth-path li:nth-child(4) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 860px) {
  .mechanical-title-lockup {
    gap: 16px;
  }

  .mechanical-title-lockup img {
    width: 54px;
    height: 54px;
  }

  .mechanical-section-nav {
    top: 72px;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    width: calc(100% - 28px);
  }

  .mechanical-section-nav button {
    min-width: 142px;
  }

  .mechanical-page > [data-mechanical-panel="section"] {
    min-height: 0;
    margin-top: 28px;
    margin-bottom: 48px;
  }

  .mechanical-work,
  .mechanical-practice,
  .mechanical-career,
  .mechanical-first-year-position {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .mechanical-work-visual {
    position: static;
  }

  .mechanical-principle {
    grid-column: auto;
  }

  .mechanical-phase-panel {
    padding: 24px;
  }

  .mechanical-course-browser {
    grid-template-columns: 1fr;
  }

  .mechanical-course-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mechanical-training-principles,
  .mechanical-training-framework-grid,
  .mechanical-long-term-growth-grid {
    grid-template-columns: 1fr;
  }

  .mechanical-training-framework-grid > article,
  .mechanical-long-term-growth-grid > article {
    min-height: 0;
  }

  .mechanical-course-directory button:hover,
  .mechanical-course-directory button:focus-visible {
    transform: translateY(-2px);
  }

  .mechanical-parallel-work > div,
  .mechanical-phase-card-grid {
    grid-template-columns: 1fr;
  }

  .mechanical-parallel-work article,
  .mechanical-phase-card-grid article {
    min-height: 0;
  }

  .mechanical-capability-heading,
  .mechanical-industry-signal,
  .mechanical-industry-capabilities > header,
  .mechanical-career-mapping > header,
  .mechanical-career-actions {
    grid-template-columns: 1fr;
  }

  .mechanical-recruitment-case {
    grid-template-columns: minmax(200px, .55fr) minmax(0, 1.45fr);
  }

  .mechanical-beyond-tools > div {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .mechanical-recruitment-dialog {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
  }

  .mechanical-recruitment-dialog-close {
    top: 10px;
    right: 10px;
  }

  .mechanical-recruitment-board {
    padding: 18px;
  }

  .mechanical-recruitment-board > header {
    padding-top: 44px;
    padding-right: 0;
  }

  .mechanical-title-lockup {
    align-items: flex-end;
  }

  .mechanical-title-lockup img {
    width: 46px;
    height: 46px;
    margin-bottom: 2px;
  }

  .mechanical-section-heading h2 {
    font-size: 30px;
  }

  .mechanical-delivery-chain,
  .mechanical-capability-grid,
  .mechanical-project-strip,
  .mechanical-growth-path {
    grid-template-columns: 1fr;
  }

  .mechanical-delivery-chain article,
  .mechanical-delivery-chain article:nth-child(2),
  .mechanical-delivery-chain article:nth-child(3),
  .mechanical-delivery-chain article:nth-child(4) {
    min-height: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .mechanical-delivery-chain article:first-child {
    border-top: 0;
  }

  .mechanical-capability-card--wide {
    grid-column: auto;
  }

  .mechanical-capability-grid article,
  .mechanical-capability-card--wide {
    min-height: 0 !important;
    padding: 22px 20px 18px;
  }

  .mechanical-capability-grid article > p,
  .mechanical-capability-grid article > ul,
  .mechanical-capability-grid article > footer {
    margin-left: 0;
  }

  .mechanical-industry-capability-grid {
    grid-template-columns: 1fr;
  }

  .mechanical-career-flip-grid {
    grid-template-columns: 1fr;
  }

  .mechanical-career-flip-card {
    min-height: 218px;
  }

  .mechanical-industry-case-entry {
    align-items: stretch;
    flex-direction: column;
  }

  .mechanical-industry-case-entry > button {
    justify-content: space-between;
    width: 100%;
  }

  .mechanical-recruitment-board > header {
    align-items: start;
    flex-direction: column;
  }

  .mechanical-recruitment-controls {
    align-self: flex-end;
  }

  .mechanical-recruitment-case {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .mechanical-recruitment-company {
    padding: 24px 22px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .mechanical-recruitment-company h4 {
    margin-top: 24px;
  }

  .mechanical-recruitment-requirements {
    padding: 25px 22px 18px;
  }

  .mechanical-recruitment-case > aside {
    grid-column: auto;
    padding: 17px 20px;
  }

  .mechanical-recruitment-board > footer {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .mechanical-alumni-bridge {
    padding: 22px;
  }

  .mechanical-alumni-bridge > div:first-child {
    padding-top: 48px;
    padding-left: 0;
  }

  .mechanical-alumni-support-list {
    grid-template-columns: 1fr;
  }

  .mechanical-industry-capabilities article {
    min-height: 0;
  }

  .mechanical-beyond-tools article {
    padding: 70px 22px 22px;
  }

  .mechanical-beyond-tools article > i {
    top: 21px;
    left: 22px;
  }

  .mechanical-beyond-tools article ul {
    grid-template-columns: 1fr;
  }

  .mechanical-training-version {
    grid-template-columns: 1fr;
  }

  .mechanical-training-version small {
    text-align: left;
  }

  .mechanical-phase-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mechanical-phase-tabs::before {
    display: none;
  }

  .mechanical-phase-tabs button {
    grid-template-columns: 28px minmax(0, 1fr);
    min-height: 118px;
    padding: 14px;
  }

  .mechanical-phase-tabs button > span {
    width: 28px;
    height: 28px;
  }

  .mechanical-phase-tabs button strong {
    font-size: 15px;
  }

  .mechanical-course-directory {
    grid-template-columns: 1fr;
  }

  .mechanical-course-panels,
  .mechanical-course-panels > article {
    min-height: 0;
  }

  .mechanical-course-panels > article {
    padding: 28px 24px;
  }

  .mechanical-spring-route {
    grid-template-columns: 1fr;
  }

  .mechanical-lock-date {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-right: 0;
    padding-left: 0;
  }

  .mechanical-evaluation-flow article {
    grid-template-columns: 52px minmax(0, 1fr);
    min-height: 0;
  }

  .mechanical-growth-path li,
  .mechanical-growth-path li:nth-child(2),
  .mechanical-growth-path li:nth-child(3),
  .mechanical-growth-path li:nth-child(4) {
    min-height: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .mechanical-growth-path li:first-child {
    border-top: 0;
  }

  .mechanical-principle {
    padding: 68px 24px 26px;
  }

  .mechanical-principle i {
    top: 18px;
    left: 22px;
  }

  .mechanical-recruit-panel {
    padding: 26px 22px;
  }
}

@media (max-width: 430px) {
  .mechanical-phase-tabs {
    grid-template-columns: 1fr;
  }
}

/* Vision algorithm: project-led perception, planning and decision systems. */
.vision-page {
  --vision-tone: #8976b2;
  width: min(var(--max-width), calc(100% - 40px));
  margin: 0 auto;
}

.vision-page .page-label {
  color: var(--vision-tone);
}

.vision-page-hero {
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(480px, 1.1fr);
  gap: 28px;
  align-items: stretch;
  margin-top: 38px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.vision-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 27px 0;
}

.vision-title-lockup {
  display: flex;
  gap: 22px;
  align-items: flex-end;
}

.vision-title-lockup h1 {
  margin: 0;
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 500;
  line-height: 1.05;
}

.vision-title-lockup img {
  width: 62px;
  height: 62px;
  margin-bottom: 5px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(55%) sepia(17%) saturate(1122%) hue-rotate(216deg) brightness(90%) contrast(83%);
}

.vision-hero-copy > p:last-child {
  width: calc(100% + 46px);
  max-width: none;
  margin-top: 24px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.85;
}

.vision-hero-visual {
  position: relative;
  width: 95%;
  min-height: 332px;
  margin: 0;
  justify-self: end;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #090a0e;
}

.vision-hero-visual > img {
  width: 100%;
  height: 100%;
  min-height: 332px;
  object-fit: cover;
}

.vision-hero-visual::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, .82));
  pointer-events: none;
}

.vision-hero-visual figcaption {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 20px;
  left: 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 22px;
  color: #fff;
}

.vision-hero-visual figcaption > span,
.vision-hero-visual figcaption > small {
  color: #c8bddf;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
}

.vision-hero-visual figcaption > strong {
  grid-row: 2;
  font-size: 18px;
  font-weight: 500;
}

.vision-hero-visual figcaption > small {
  grid-row: 2;
  align-self: end;
}

.vision-section {
  margin: 52px 0 0;
}

.vision-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .72fr);
  gap: 22px 38px;
  align-items: end;
  margin-bottom: 24px;
}

.vision-section-heading h2,
.vision-stack h2 {
  margin: 0;
  font-size: clamp(30px, 3.5vw, 44px);
  font-weight: 500;
  line-height: 1.18;
}

.vision-section-heading > p,
.vision-stack > div:first-child > p:last-child {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

.vision-pipeline-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.vision-pipeline-grid article {
  position: relative;
  min-height: 164px;
  padding: 19px;
  background: var(--card-bg);
}

.vision-pipeline-grid article > span {
  color: var(--vision-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}

.vision-pipeline-grid article > i {
  position: absolute;
  top: 17px;
  right: 18px;
  color: var(--vision-tone);
  font-size: 24px;
}

.vision-pipeline-grid article > strong {
  display: block;
  margin: 22px 0 7px;
  font-size: 17px;
  font-weight: 500;
}

.vision-pipeline-grid article > p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.68;
}

.vision-project-browser {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.vision-project-directory {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.vision-project-directory button {
  display: grid;
  grid-template-columns: 28px 28px minmax(0, 1fr);
  gap: 4px 9px;
  align-items: center;
  min-height: 74px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

.vision-project-directory button:last-child {
  border-bottom: 0;
}

.vision-project-directory button:hover,
.vision-project-directory button:focus-visible,
.vision-project-directory button[aria-selected="true"] {
  background: color-mix(in srgb, var(--vision-tone) 13%, var(--card-bg));
  outline: 0;
}

.vision-project-directory button[aria-selected="true"] {
  box-shadow: inset 3px 0 var(--vision-tone);
}

.vision-project-directory button > span {
  color: var(--vision-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
}

.vision-project-directory button > i {
  color: var(--vision-tone);
  font-size: 22px;
}

.vision-project-directory button > strong {
  font-size: 16px;
  font-weight: 500;
}

.vision-project-directory button > small {
  grid-column: 3;
  color: var(--muted);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  line-height: 1.45;
}

.vision-project-stage {
  min-width: 0;
}

.vision-project-panel[hidden] {
  display: none;
}

.vision-project-panel {
  padding: 24px;
}

.vision-project-panel > header {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 30px;
  align-items: start;
  margin-bottom: 18px;
}

.vision-project-panel > header > .page-label {
  grid-column: 1 / -1;
}

.vision-project-panel h3 {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
}

.vision-project-panel > header > p:not(.page-label) {
  grid-column: 1 / -1;
  grid-row: 3;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.vision-project-panel > header > ul {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-self: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vision-project-panel > header > ul li {
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--vision-tone) 48%, var(--line));
  color: var(--text);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
}

.vision-project-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.vision-project-media-grid--balanced img,
.vision-project-media-grid--balanced video {
  height: auto;
}

.vision-project-media-grid--engineering {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.33fr);
}

.vision-project-media-grid--navigation {
  grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr);
}

.vision-project-media-grid--radar {
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr);
}

.vision-project-media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #090a0e;
}

.vision-project-media img,
.vision-project-media video {
  width: 100%;
  height: clamp(220px, 24vw, 360px);
  object-fit: contain;
  background: #090a0e;
}

.vision-project-media-grid--balanced {
  align-items: start;
}

.vision-project-media-grid--balanced .vision-project-media img,
.vision-project-media-grid--balanced .vision-project-media video {
  height: auto;
}

.vision-project-media--single img {
  height: clamp(280px, 32vw, 460px);
}

.vision-project-media figcaption {
  padding: 10px 13px;
  border-top: 1px solid var(--line);
  color: #c9c9cf;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
  line-height: 1.5;
}

.vision-project-media-grid--contain img {
  image-rendering: auto;
}

.vision-project-matrix-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.vision-project-matrix-grid article {
  min-height: 150px;
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.vision-project-matrix-grid article > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}

.vision-project-matrix-grid article > header i {
  color: var(--vision-tone);
  font-size: 24px;
}

.vision-project-matrix-grid article > header strong {
  font-size: 16px;
  font-weight: 500;
}

.vision-project-matrix-grid article > header span {
  color: var(--vision-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 9px;
  letter-spacing: .08em;
}

.vision-project-matrix-grid article > ul {
  display: grid;
  gap: 5px;
  margin: 13px 0 0;
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  list-style: none;
}

.vision-project-matrix-grid article > ul li::before {
  margin-right: 8px;
  color: var(--vision-tone);
  content: "·";
}

.vision-project-matrix-card--wide {
  grid-column: span 2;
}

.vision-project-matrix-card--wide > ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vision-project-matrix-note {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-top: 13px;
  color: var(--subtle);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
}

.vision-project-matrix-note i {
  color: var(--vision-tone);
  font-size: 17px;
}

.vision-stack {
  display: grid;
  grid-template-columns: minmax(340px, .82fr) minmax(0, 1.18fr);
  gap: 38px;
  align-items: start;
  margin-bottom: 84px;
  padding: 30px;
  border: 1px solid color-mix(in srgb, var(--vision-tone) 46%, var(--line));
  background: color-mix(in srgb, var(--vision-tone) 7%, var(--card-bg));
}

.vision-stack > div:first-child > p:last-child {
  margin-top: 16px;
}

.vision-stack h2 > span {
  display: block;
}

.vision-stack-groups {
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.vision-stack-groups article {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 18px;
  padding: 17px 19px;
  background: var(--card-bg);
}

.vision-stack-groups article > span {
  color: var(--vision-tone);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
  font-weight: 700;
}

.vision-stack-groups article > p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

@media (max-width: 980px) {
  .vision-page-hero,
  .vision-section-heading,
  .vision-project-panel > header,
  .vision-stack {
    grid-template-columns: 1fr;
  }

  .vision-page-hero {
    gap: 24px;
  }

  .vision-hero-copy {
    padding-bottom: 0;
  }

  .vision-pipeline-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vision-project-matrix-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vision-project-panel > header > p:not(.page-label),
  .vision-project-panel > header > ul {
    grid-column: 1;
  }

  .vision-project-panel > header > ul {
    grid-row: 3;
    justify-content: flex-start;
  }

  .vision-project-panel > header > p:not(.page-label) {
    grid-row: 4;
  }
}

@media (max-width: 860px) {
  .vision-page {
    width: calc(100% - 28px);
  }

  .vision-page-hero {
    margin-top: 34px;
  }

  .vision-hero-copy > p:last-child,
  .vision-hero-visual {
    width: 100%;
  }

  .vision-title-lockup img {
    width: 54px;
    height: 54px;
  }

  .vision-hero-visual,
  .vision-hero-visual > img {
    min-height: 330px;
  }

  .vision-section {
    margin-top: 48px;
  }

  .vision-project-browser {
    grid-template-columns: 1fr;
  }

  .vision-project-panel > header {
    grid-template-columns: 1fr;
  }

  .vision-project-panel h3 {
    grid-column: 1;
    white-space: normal;
  }

  .vision-project-panel > header > ul {
    grid-column: 1;
    grid-row: 4;
    justify-content: flex-start;
  }

  .vision-project-directory {
    grid-auto-columns: minmax(168px, 1fr);
    grid-auto-flow: column;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    scrollbar-width: thin;
  }

  .vision-project-directory button {
    min-width: 168px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .vision-project-directory button[aria-selected="true"] {
    box-shadow: inset 0 -3px var(--vision-tone);
  }

  .vision-project-media-grid,
  .vision-project-matrix-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vision-project-media-grid--engineering,
  .vision-project-media-grid--navigation,
  .vision-project-media-grid--radar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .vision-title-lockup {
    gap: 15px;
    align-items: center;
  }

  .vision-title-lockup h1 {
    font-size: 42px;
  }

  .vision-title-lockup img {
    width: 42px;
    height: 42px;
    margin-bottom: 0;
  }

  .vision-hero-copy > p:last-child {
    font-size: 15px;
  }

  .vision-hero-visual,
  .vision-hero-visual > img {
    min-height: 250px;
  }

  .vision-hero-visual figcaption {
    right: 16px;
    bottom: 14px;
    left: 16px;
    grid-template-columns: 1fr;
  }

  .vision-hero-visual figcaption > small {
    display: none;
  }

  .vision-section-heading h2,
  .vision-stack h2 {
    font-size: 32px;
  }

  .vision-pipeline-grid,
  .vision-project-media-grid,
  .vision-project-matrix-grid {
    grid-template-columns: 1fr;
  }

  .vision-pipeline-grid article {
    min-height: 0;
  }

  .vision-project-panel {
    padding: 22px 18px;
  }

  .vision-project-panel h3 {
    font-size: 23px;
  }

  .vision-project-media img,
  .vision-project-media video,
  .vision-project-media--single img {
    height: 250px;
  }

  .vision-project-matrix-card--wide {
    grid-column: auto;
  }

  .vision-project-matrix-card--wide > ul {
    grid-template-columns: 1fr;
  }

  .vision-stack {
    gap: 28px;
    padding: 24px 20px;
  }

  .vision-stack-groups article {
    grid-template-columns: 1fr;
    gap: 7px;
  }
}

/* Management and collaboration: team-scale operations system. */
.management-page {
  --management-cyan: #37b8d5;
  --management-yellow: #e8b84a;
  --management-magenta: #d26ca7;
}

.management-page-hero {
  align-items: end;
}

.management-page .management-page-hero h1 {
  font-size: clamp(50px, 4.8vw, 64px);
}

.management-page-hero > p {
  max-width: 560px;
}

.management-kicker {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.management-opening {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr);
  gap: clamp(48px, 7vw, 104px);
  align-items: start;
}

.management-opening-copy h2,
.management-section-heading h2,
.management-platform-head h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(30px, 2.8vw, 38px);
  font-weight: 500;
  line-height: 1.16;
}

.management-opening-copy > p:not(.management-kicker) {
  max-width: 820px;
  margin-top: 20px;
  font-size: 17px;
}

.management-outcomes {
  border-top: 1px solid var(--line);
}

.management-outcomes article {
  position: relative;
  min-height: 144px;
  padding: 24px 48px 24px 54px;
  border-bottom: 1px solid var(--line);
}

.management-outcomes article > span {
  position: absolute;
  top: 26px;
  left: 0;
  color: var(--subtle);
  font-size: 10px;
}

.management-outcomes article > i {
  position: absolute;
  top: 22px;
  right: 0;
  color: var(--accent);
  font-size: 32px;
}

.management-outcomes article:nth-child(2) > i {
  color: var(--management-yellow);
}

.management-outcomes article:nth-child(3) > i {
  color: var(--management-cyan);
}

.management-outcomes strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 20px;
  font-weight: 500;
}

.management-section-heading {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(380px, 1.08fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 30px;
}

.management-section-heading > p {
  font-size: 16px;
}

.management-layer-list {
  border-top: 1px solid var(--line);
}

.management-layer {
  position: relative;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 80px;
  gap: 34px;
  align-items: center;
  min-height: 170px;
  padding: 28px 8px;
  border-bottom: 1px solid var(--line);
}

.management-layer::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(.32);
  transition: transform .2s ease;
}

.management-layer--process::before {
  background: var(--management-yellow);
}

.management-layer--culture::before {
  background: var(--management-magenta);
}

.management-layer:hover::before {
  transform: scaleY(1);
}

.management-layer-index {
  padding-left: 30px;
}

.management-layer-index span,
.management-layer-index small {
  display: block;
}

.management-layer-index span {
  color: var(--text);
  font-size: 34px;
  line-height: 1;
}

.management-layer-index small {
  margin-top: 10px;
  color: var(--subtle);
  font-size: 9px;
  letter-spacing: .14em;
}

.management-layer h3 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 23px;
  font-weight: 500;
}

.management-layer > i {
  color: var(--accent);
  font-size: 40px;
  text-align: center;
}

.management-layer--process > i {
  color: var(--management-yellow);
}

.management-layer--culture > i {
  color: var(--management-magenta);
}

.management-responsibility-note {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 20px;
  max-width: 940px;
  margin: 30px 0 0 auto;
  padding: 22px 26px;
  border-left: 3px solid var(--management-yellow);
  background: color-mix(in srgb, var(--management-yellow) 8%, var(--surface));
}

.management-responsibility-note > i {
  color: var(--management-yellow);
  font-size: 30px;
}

.management-responsibility-note strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-size: 20px;
  font-weight: 500;
}

.management-loop-track {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.management-loop-track article {
  position: relative;
  min-height: 272px;
  padding: 26px 22px;
  border-left: 1px solid var(--line);
}

.management-loop-track article:last-child {
  border-right: 1px solid var(--line);
}

.management-loop-track article::after {
  content: "";
  position: absolute;
  top: 52px;
  right: -6px;
  z-index: 1;
  width: 11px;
  height: 11px;
  border-top: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  background: var(--bg);
  transform: rotate(45deg);
}

.management-loop-track article:last-child::after {
  display: none;
}

.management-loop-track span {
  color: var(--subtle);
  font-size: 10px;
}

.management-loop-track i {
  display: block;
  margin: 28px 0 34px;
  color: var(--accent);
  font-size: 27px;
}

.management-loop-track article:nth-child(3n + 2) i {
  color: var(--management-yellow);
}

.management-loop-track article:nth-child(3n) i {
  color: var(--management-cyan);
}

.management-loop-track h3 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 18px;
  font-weight: 500;
}

.management-loop-track p {
  font-size: 14px;
  line-height: 1.65;
}

.management-mechanism-table {
  border: 1px solid var(--line);
}

.management-mechanism-table article {
  display: grid;
  grid-template-columns: 48px 42px minmax(180px, .5fr) minmax(320px, 1.5fr) minmax(190px, .6fr);
  gap: 22px;
  align-items: center;
  min-height: 114px;
  padding: 20px 26px;
  background: var(--card-bg);
}

.management-mechanism-table article + article {
  border-top: 1px solid var(--line);
}

.management-mechanism-table article > span {
  color: var(--subtle);
  font-size: 10px;
}

.management-mechanism-table article > i {
  color: var(--accent);
  font-size: 22px;
}

.management-mechanism-table article:nth-child(even) > i {
  color: var(--management-cyan);
}

.management-mechanism-table h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 500;
}

.management-mechanism-table small {
  color: var(--accent);
  font-size: 12px;
  letter-spacing: .06em;
  text-align: right;
}

.management-routing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.management-route {
  min-height: 380px;
  padding: 34px;
  background: var(--card-bg);
}

.management-route header {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 28px;
}

.management-route header > i {
  color: var(--accent);
  font-size: 34px;
}

.management-route--ticket header > i {
  color: var(--management-cyan);
}

.management-route small {
  color: var(--subtle);
  font-size: 11px;
  letter-spacing: .14em;
}

.management-route h3 {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 24px;
  font-weight: 500;
}

.management-route > p {
  min-height: 58px;
  font-size: 17px;
}

.management-route ul {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.management-route li {
  padding: 12px 14px;
  border-left: 2px solid var(--accent);
  background: var(--surface);
  color: var(--muted);
}

.management-ticket-samples {
  display: grid;
  gap: 10px;
  margin-top: 26px;
}

.management-ticket-samples span {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 11px 14px;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
}

.management-ticket-samples i {
  color: var(--management-cyan);
  font-size: 19px;
}

.management-platform {
  padding: clamp(34px, 5vw, 64px);
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.management-platform-head {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(34px, 6vw, 84px);
  align-items: center;
}

.management-platform-head h2 {
  font-size: clamp(30px, 3vw, 42px);
}

.management-platform-head > div:last-child > p:last-child {
  max-width: 850px;
  margin-top: 16px;
  font-size: 17px;
}

.management-feishu-mark {
  display: grid;
  place-items: center;
  min-height: 184px;
  border-right: 1px solid var(--line);
}

.management-feishu-mark img {
  width: 88px;
  height: 88px;
  object-fit: contain;
}

.management-feishu-mark span {
  color: var(--text);
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
}

.management-platform-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 42px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.management-platform-grid article {
  min-height: 184px;
  padding: 24px 20px;
  border-left: 1px solid var(--line);
}

.management-platform-grid article:last-child {
  border-right: 1px solid var(--line);
}

.management-platform-grid i {
  color: var(--accent);
  font-size: 23px;
}

.management-platform-grid article:nth-child(even) i {
  color: var(--management-yellow);
}

.management-platform-grid strong {
  display: block;
  margin: 28px 0 8px;
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
}

.management-platform-grid p {
  font-size: 13px;
  line-height: 1.65;
}

.management-automation-demo {
  max-width: 920px;
  margin: 42px auto 0;
  border: 1px solid var(--line);
  background: var(--bg);
}

.management-automation-demo header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.management-automation-demo header span {
  color: var(--text);
  font-weight: 500;
}

.management-automation-demo header i {
  margin-right: 8px;
  color: var(--accent);
}

.management-automation-demo header small {
  color: var(--subtle);
  font-family: Arial, sans-serif;
  font-size: 10px;
  letter-spacing: .12em;
}

.management-automation-demo > div {
  display: grid;
  grid-template-columns: 16px 100px minmax(0, 1fr) 260px;
  gap: 16px;
  align-items: center;
  padding: 15px 18px;
}

.management-automation-demo > div + div {
  border-top: 1px solid var(--line);
}

.management-automation-demo strong,
.management-automation-demo p {
  color: var(--text);
}

.management-automation-demo small {
  color: var(--subtle);
  text-align: right;
}

.management-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}

.management-status--late {
  background: #ef5b6d;
  box-shadow: 0 0 0 4px rgba(239, 91, 109, .12);
}

.management-status--soon {
  background: var(--management-yellow);
  box-shadow: 0 0 0 4px rgba(232, 184, 74, .12);
}

.management-group-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 70px;
  padding-top: 28px;
}

.management-group-timeline::before {
  content: "";
  position: absolute;
  top: 53px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}

.management-group-timeline article {
  position: relative;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 24px;
}

.management-group-timeline article::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 98px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px var(--bg);
}

.management-group-timeline article:last-child::before {
  background: var(--management-yellow);
}

.management-group-timeline time {
  color: var(--text);
  font-size: 23px;
}

.management-group-timeline article > div {
  padding: 68px 0 0 24px;
}

.management-group-timeline span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
}

.management-group-timeline article:last-child span {
  color: var(--management-yellow);
}

.management-group-timeline h3 {
  margin: 8px 0 14px;
  color: var(--text);
  font-size: 24px;
  font-weight: 500;
}

.management-group-timeline .inline-link {
  margin-top: 22px;
}

.management-evidence-primary {
  width: min(100%, 880px);
  margin: 0 auto;
  border: 1px solid var(--line);
  background: #061225;
}

.management-evidence-primary img {
  width: 100%;
  max-height: 480px;
  object-fit: contain;
}

.management-evidence-primary figcaption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
  padding: 18px 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  background: #0a1628;
}

.management-evidence-primary figcaption > div {
  display: grid;
  gap: 2px;
}

.management-evidence-primary figcaption strong {
  color: #fff;
  font-weight: 500;
}

.management-evidence-primary figcaption span {
  color: rgba(255, 255, 255, .65);
}

.management-sop-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .18s, color .18s, transform .18s;
}

.management-sop-link:hover,
.management-sop-link:focus-visible {
  background: var(--accent);
  color: #07121e;
  transform: translateY(-2px);
}

.management-evidence-secondary {
  display: grid;
  grid-template-columns: minmax(360px, .82fr) minmax(0, 1.18fr);
  gap: clamp(38px, 7vw, 100px);
  align-items: center;
  margin-top: 38px;
}

.management-evidence-secondary figure {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--line);
  background: #101923;
}

.management-evidence-secondary img {
  width: 100%;
  max-height: 560px;
  object-fit: contain;
}

.management-evidence-secondary h3 {
  margin: 0 0 18px;
  color: var(--text);
  font-size: clamp(28px, 2.8vw, 38px);
  font-weight: 500;
  line-height: 1.2;
}

.management-evidence-secondary > div > p:not(.management-kicker) {
  margin-top: 16px;
  font-size: 17px;
}

.management-closing {
  padding: clamp(42px, 7vw, 92px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.management-closing p {
  max-width: 1180px;
  margin: 0 auto;
  color: var(--text);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.5;
}

.management-closing span {
  display: block;
  margin-top: 24px;
  color: var(--accent);
  font-size: 15px;
}

@media (max-width: 1160px) {
  .management-opening {
    grid-template-columns: 1fr;
  }

  .management-section-heading {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .management-outcomes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .management-outcomes article {
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }

  .management-outcomes article:last-child {
    border-right: 1px solid var(--line);
  }

  .management-loop-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .management-loop-track article:nth-child(3) {
    border-right: 1px solid var(--line);
  }

  .management-loop-track article:nth-child(3)::after,
  .management-loop-track article:last-child::after {
    display: none;
  }

  .management-loop-track article:nth-child(n + 4) {
    border-top: 1px solid var(--line);
  }

  .management-mechanism-table article {
    grid-template-columns: 38px 38px minmax(150px, .5fr) minmax(280px, 1.5fr);
  }

  .management-mechanism-table small {
    display: none;
  }

  .management-platform-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .management-platform-grid article:nth-child(3) {
    border-right: 1px solid var(--line);
  }

  .management-platform-grid article:nth-child(n + 4) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 780px) {
  .management-page .management-page-hero h1 {
    font-size: 42px;
  }

  .management-section-heading,
  .management-platform-head,
  .management-routing-grid,
  .management-group-timeline,
  .management-evidence-secondary {
    grid-template-columns: 1fr;
  }

  .management-section-heading {
    gap: 18px;
  }

  .management-opening-copy h2,
  .management-section-heading h2,
  .management-platform-head h2 {
    font-size: 30px;
  }

  .management-outcomes {
    grid-template-columns: 1fr;
  }

  .management-outcomes article {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 34px;
    gap: 5px 10px;
    align-items: start;
    min-height: 0;
    padding: 20px 16px;
    border-right: 1px solid var(--line);
  }

  .management-outcomes article > span {
    position: static;
    grid-column: 1;
    grid-row: 1 / span 2;
    padding-top: 5px;
  }

  .management-outcomes article > i {
    position: static;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    font-size: 30px;
    line-height: 1;
  }

  .management-outcomes strong {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
  }

  .management-outcomes article > p {
    grid-column: 2 / 4;
    grid-row: 2;
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
  }

  .management-layer {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 16px;
    min-height: 0;
    padding: 26px 8px;
  }

  .management-layer-index {
    align-self: start;
    padding-left: 14px;
  }

  .management-layer-index span {
    font-size: 26px;
  }

  .management-layer-index small,
  .management-layer > i {
    display: none;
  }

  .management-layer h3 {
    font-size: 20px;
  }

  .management-responsibility-note {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 18px;
  }

  .management-loop-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .management-loop-track article {
    min-height: 236px;
    padding: 22px 18px;
  }

  .management-loop-track article:nth-child(2n) {
    border-right: 1px solid var(--line);
  }

  .management-loop-track article:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .management-loop-track article::after {
    display: none;
  }

  .management-loop-track i {
    margin: 24px 0;
  }

  .management-mechanism-table article {
    grid-template-columns: 30px 32px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 20px 16px;
  }

  .management-mechanism-table article > p {
    grid-column: 3;
  }

  .management-route {
    min-height: 0;
    padding: 26px 22px;
  }

  .management-route > p {
    min-height: 0;
  }

  .management-platform {
    padding: 26px 18px;
  }

  .management-feishu-mark {
    grid-template-columns: 64px auto;
    justify-content: start;
    gap: 18px;
    min-height: auto;
    padding-bottom: 24px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .management-feishu-mark img {
    width: 64px;
    height: 64px;
  }

  .management-platform-grid {
    grid-template-columns: 1fr;
  }

  .management-platform-grid article,
  .management-platform-grid article:nth-child(3),
  .management-platform-grid article:last-child {
    min-height: 0;
    border-right: 1px solid var(--line);
    border-top: 1px solid var(--line);
  }

  .management-platform-grid strong {
    margin-top: 16px;
  }

  .management-automation-demo > div {
    grid-template-columns: 14px 88px minmax(0, 1fr);
    gap: 10px;
  }

  .management-automation-demo > div small,
  .management-automation-demo header small {
    display: none;
  }

  .management-group-timeline {
    gap: 42px;
    padding-left: 18px;
    border-left: 1px solid var(--line);
  }

  .management-group-timeline::before {
    display: none;
  }

  .management-group-timeline article {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 18px;
  }

  .management-group-timeline article::before {
    top: 14px;
    left: -24px;
  }

  .management-group-timeline time {
    font-size: 20px;
  }

  .management-group-timeline article > div {
    padding: 46px 0 0;
  }

  .management-evidence-primary figcaption {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .management-sop-link {
    justify-self: start;
  }

  .management-evidence-secondary {
    gap: 28px;
  }

  .management-closing p {
    font-size: 24px;
  }
}

@media (max-width: 460px) {
  .management-loop-track {
    grid-template-columns: 1fr;
  }

  .management-loop-track article,
  .management-loop-track article:nth-child(2n),
  .management-loop-track article:nth-child(3) {
    min-height: 0;
    border-right: 1px solid var(--line);
    border-top: 1px solid var(--line);
  }

  .management-loop-track i {
    margin: 18px 0;
  }

  .management-mechanism-table article {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .management-mechanism-table article > i {
    display: none;
  }

  .management-mechanism-table article > p {
    grid-column: 2;
  }

  .management-automation-demo > div {
    grid-template-columns: 14px minmax(0, 1fr);
  }

  .management-automation-demo > div strong {
    grid-column: 2;
  }

  .management-automation-demo > div p {
    grid-column: 2;
  }
}

/* Mechanical group introduction article */
.mechanical-intro-article .intro-making-figure {
  overflow: hidden;
}

.intro-making-stages {
  display: grid;
  grid-template-columns: repeat(7, auto);
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  padding: clamp(20px, 4vw, 34px);
}

.intro-making-stages > article {
  display: grid;
  grid-template-rows: auto auto 1fr;
  justify-items: center;
  width: 142px;
  min-height: 170px;
  padding: 22px 16px 18px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 4%, var(--bg));
  text-align: center;
}

.intro-making-stages > article > i {
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 34px;
}

.intro-making-stages > article > span {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.intro-making-stages > article > p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.intro-making-stages > .mdi-arrow-right {
  align-self: center;
  color: var(--subtle);
  font-size: 20px;
}

.intro-solution-controls {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.journal-segmented-control.intro-solution-controls button {
  border-top: 1px solid var(--line);
  text-align: center;
}

.journal-segmented-control.intro-solution-controls button + button {
  border-left: 0;
}

.intro-solution-readout {
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.intro-solution-readout > div {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 54px;
  padding: 12px 16px;
  background: var(--bg);
}

.intro-solution-readout span,
.intro-diagnosis-path span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.intro-solution-readout strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.65;
}

.intro-diagnosis-symptom {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  padding: 16px 18px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg));
}

.intro-diagnosis-symptom i {
  color: var(--accent);
  font-size: 24px;
}

.intro-diagnosis-symptom span {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.intro-diagnosis-symptom strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.intro-diagnosis-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.intro-diagnosis-controls button {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.intro-diagnosis-controls button:hover,
.intro-diagnosis-controls button:focus-visible,
.intro-diagnosis-controls button.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text);
}

.intro-diagnosis-path {
  display: grid;
  grid-template-columns: repeat(7, auto);
  align-items: stretch;
  gap: 8px;
}

.intro-diagnosis-path article {
  display: grid;
  align-content: start;
  width: 148px;
  min-height: 178px;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--bg);
}

.intro-diagnosis-path article p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.intro-diagnosis-path > i {
  align-self: center;
  color: var(--subtle);
}

.intro-daily-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.intro-daily-grid article {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 150px;
  padding: 16px 10px;
  border: 1px solid var(--line);
  outline: none;
  text-align: center;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.intro-daily-grid article:hover,
.intro-daily-grid article:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.intro-daily-grid i {
  margin-bottom: 14px;
  color: var(--accent);
  font-size: 30px;
}

.intro-daily-grid strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.intro-daily-grid span {
  margin-top: 8px;
  color: var(--subtle);
  font-size: 10px;
  line-height: 1.45;
  opacity: .2;
  transform: translateY(3px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.intro-daily-grid article:hover span,
.intro-daily-grid article:focus-visible span {
  opacity: 1;
  transform: translateY(0);
}

.intro-season-scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.intro-season-timeline {
  width: 840px;
  padding: 28px 26px 34px;
}

.intro-season-timeline ol {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  margin: 0;
  padding: 0 0 18px;
  list-style: none;
}

.intro-season-timeline li {
  position: relative;
  padding-top: 18px;
  color: var(--muted);
  font-size: 9px;
  text-align: center;
}

.intro-season-timeline li::before {
  position: absolute;
  top: 0;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  content: "";
}

.intro-season-timeline li::after {
  position: absolute;
  top: 3px;
  left: calc(50% + 4px);
  width: calc(100% - 8px);
  border-top: 1px solid var(--line);
  content: "";
}

.intro-season-timeline li:last-child::after {
  display: none;
}

.intro-season-track {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-top: 12px;
}

.intro-season-track span {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.intro-season-track i {
  height: 8px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.intro-season-track--mechanical i {
  width: 100%;
}

.intro-season-track--control i {
  width: 61%;
  margin-left: 28%;
  background: color-mix(in srgb, #4c93d8 28%, transparent);
}

.intro-reasons-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.intro-reasons-grid article:last-child {
  grid-column: 1 / -1;
}

@media (max-width: 800px) {
  .intro-making-stages {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .intro-making-stages > article {
    width: auto;
  }

  .intro-making-stages > .mdi-arrow-right {
    display: none;
  }

  .intro-solution-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journal-segmented-control.intro-solution-controls button:nth-child(3) {
    border-left: 1px solid var(--line);
  }

  .journal-segmented-control.intro-solution-controls button:nth-child(even) {
    border-left: 0;
  }

  .intro-diagnosis-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intro-diagnosis-path article {
    width: auto;
    min-height: 0;
  }

  .intro-diagnosis-path > i {
    display: none;
  }

  .intro-daily-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intro-daily-grid article:last-child {
    grid-column: 1 / -1;
  }

  .intro-daily-grid span {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 520px) {
  .intro-making-stages,
  .intro-reasons-grid {
    grid-template-columns: 1fr;
  }

  .intro-making-stages > article {
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    justify-items: start;
    min-height: 0;
    text-align: left;
  }

  .intro-making-stages > article > i {
    grid-row: 1 / 3;
    margin: 2px 12px 0 0;
  }

  .intro-making-stages > article > p {
    margin-top: 5px;
  }

  .intro-solution-readout > div,
  .intro-diagnosis-symptom {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .intro-diagnosis-symptom i {
    display: none;
  }

  .intro-diagnosis-path,
  .intro-daily-grid {
    grid-template-columns: 1fr;
  }

  .intro-daily-grid article:last-child,
  .intro-reasons-grid article:last-child {
    grid-column: auto;
  }
}

/* Qianli Journal: compact editorial index */
body.journal-index-page main {
  width: min(1360px, calc(100% - clamp(48px, 8vw, 144px)));
}

body.journal-article-page main {
  width: min(1280px, calc(100% - clamp(40px, 6vw, 88px)));
}

body.journal-article-page > .page-back-nav {
  display: none;
}

body.journal-index-page > .page-back-nav {
  left: max(12px, calc((100vw - 1360px) / 2 - 64px));
}

/* Season frontline: compact five-destination hub. */
.frontline-hub-hero h1 {
  font-size: clamp(44px, 5.5vw, 76px);
}

.frontline-hub-section {
  margin-top: 34px;
}

.frontline-entry-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.frontline-entry-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto minmax(74px, 1fr) auto;
  gap: 16px 12px;
  min-width: 0;
  min-height: 260px;
  padding: 24px 22px 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--card-bg);
  transition: background-color 180ms ease, color 180ms ease;
}

.frontline-entry-card > span {
  align-self: center;
  color: var(--accent);
  font-family: Arial, sans-serif;
  font-size: 11px;
  letter-spacing: .12em;
}

.frontline-entry-card > i {
  justify-self: end;
  color: var(--accent);
  font-size: 30px;
  line-height: 1;
}

.frontline-entry-card h2,
.frontline-entry-card p,
.frontline-entry-card b {
  grid-column: 1 / -1;
}

.frontline-entry-card h2 {
  margin: 8px 0 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
}

.frontline-entry-card p {
  font-size: 14px;
  line-height: 1.75;
}

.frontline-entry-card b {
  align-self: end;
  color: var(--accent);
  font-family: Arial, "Noto Sans SC", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
}

.frontline-entry-card:hover,
.frontline-entry-card:focus-visible {
  background: color-mix(in srgb, var(--accent) 8%, var(--card-bg));
  outline: 0;
}

@media (max-width: 1100px) {
  .frontline-entry-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .frontline-hub-section {
    margin-top: 24px;
  }

  .frontline-entry-grid {
    grid-template-columns: 1fr;
  }

  .frontline-entry-card {
    grid-template-rows: auto auto auto auto;
    min-height: 0;
    padding: 20px;
  }
}

.journal-index-page .journal-hero {
  grid-template-columns: 200px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(32px, 4vw, 56px);
  padding: 28px 0 24px;
}

.journal-index-page .journal-hero h1 {
  margin-top: 7px;
  font-size: clamp(35px, 3.2vw, 44px);
  letter-spacing: -.035em;
}

.journal-index-page .journal-hero .journal-search {
  width: min(500px, 100%);
  min-height: 44px;
  align-self: end;
  justify-self: center;
}

.journal-index-page .journal-hero .journal-results-actions {
  align-self: end;
  justify-self: end;
}

.journal-index-page .journal-browser {
  padding: 24px 0 76px;
}

.journal-browser-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 4vw, 56px);
}

.journal-sidebar {
  position: sticky;
  top: 96px;
}

.journal-sidebar h2 {
  margin: 0;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  font-weight: 500;
}

.journal-sort {
  display: grid;
  gap: 9px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.journal-sort select {
  width: 100%;
  min-height: 38px;
  padding: 6px 30px 6px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.journal-sort select:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.journal-sort option {
  background: var(--bg);
  color: var(--text);
}

.journal-filter-group {
  padding-top: 17px;
}

.journal-filter-group > p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
}

.journal-sidebar .journal-filter-list {
  display: grid;
  gap: 0;
  overflow: visible;
}

.journal-sidebar .journal-filter-list button {
  position: relative;
  width: 100%;
  min-height: 38px;
  padding: 8px 22px 8px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.journal-sidebar .journal-filter-list button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: translateY(-50%);
}

.journal-sidebar .journal-filter-list button:hover,
.journal-sidebar .journal-filter-list button:focus-visible,
.journal-sidebar .journal-filter-list button.is-active {
  background: transparent;
}

.journal-sidebar .journal-filter-list button.is-active::after {
  opacity: 1;
}

.journal-results {
  min-width: 0;
}

.journal-index-page .journal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.journal-index-page .journal-search {
  width: min(380px, 100%);
  min-height: 44px;
}

.journal-results-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.journal-view-toggle {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card-bg) 68%, transparent);
}

.journal-view-toggle button {
  display: grid;
  width: 36px;
  height: 32px;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
}

.journal-view-toggle button:hover,
.journal-view-toggle button:focus-visible,
.journal-view-toggle button.is-active {
  background: color-mix(in srgb, var(--accent) 10%, var(--card-bg));
  color: var(--accent);
}

.journal-index-page .journal-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.journal-index-page .journal-card--featured {
  grid-column: auto;
}

.journal-index-page .journal-card-cover {
  aspect-ratio: 16 / 9;
}

.journal-index-page .journal-card-body {
  min-height: 142px;
  padding: 18px;
}

.journal-index-page .journal-card h2 {
  margin: 14px 0 0;
  overflow: visible;
  font-size: 18px;
  line-height: 1.35;
  white-space: nowrap;
}

.journal-grid.is-list {
  grid-template-columns: 1fr;
}

.journal-grid.is-list .journal-card {
  display: grid;
  grid-template-columns: minmax(220px, 30%) minmax(0, 1fr);
}

.journal-grid.is-list .journal-card-cover {
  height: clamp(108px, 7vw, 126px);
  min-height: 0;
  aspect-ratio: auto;
  border-right: 1px solid var(--line);
  border-bottom: 0;
}

.journal-grid.is-list .journal-card-cover img {
  object-fit: cover;
}

.journal-grid.is-list .journal-card-body {
  min-height: 0;
}

.journal-card-inline-reading {
  display: none;
}

@media (min-width: 901px) {
  .journal-grid.is-list .journal-card-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 14px;
    row-gap: 12px;
    padding: 11px 22px;
  }

  .journal-grid.is-list .journal-card-meta {
    display: contents;
  }

  .journal-grid.is-list .journal-card-classification {
    grid-row: 1;
    grid-column: 1;
  }

  .journal-grid.is-list .journal-card-meta time {
    grid-row: 1;
    grid-column: 3;
    align-self: center;
  }

  .journal-grid.is-list .journal-card-series {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    min-width: 0;
    margin-top: 0;
  }

  .journal-index-page .journal-grid.is-list .journal-card h2 {
    grid-row: 2;
    grid-column: 1 / 3;
    align-self: center;
    min-width: 0;
    margin: 0;
  }

  .journal-grid.is-list .journal-card-inline-reading {
    display: inline-flex;
    grid-row: 2;
    grid-column: 3;
    align-items: center;
    align-self: center;
    justify-self: end;
    gap: 6px;
    color: var(--muted);
    font: 500 12px/1.4 "Noto Sans SC", "Microsoft YaHei", sans-serif;
    white-space: nowrap;
  }

  .journal-grid.is-list .journal-card-cover-reading {
    display: none;
  }
}

.journal-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 28px;
}

.journal-pagination[hidden] {
  display: none;
}

.journal-pagination button {
  display: inline-grid;
  min-width: 36px;
  height: 36px;
  padding: 0 9px;
  place-items: center;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card-bg) 76%, transparent);
  color: var(--muted);
  font: 500 12px/1 "Noto Sans SC", "Microsoft YaHei", sans-serif;
  cursor: pointer;
}

.journal-pagination button:hover,
.journal-pagination button:focus-visible,
.journal-pagination button.is-active {
  border-color: var(--accent);
  color: var(--accent);
}

.journal-pagination button.is-active {
  background: color-mix(in srgb, var(--accent) 11%, var(--card-bg));
}

.journal-pagination button:disabled {
  border-color: var(--line);
  color: var(--subtle);
  cursor: not-allowed;
  opacity: .42;
}

.journal-pagination-ellipsis {
  min-width: 24px;
  color: var(--subtle);
  text-align: center;
}

.journal-index-page .journal-principle {
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  margin-bottom: 86px;
  padding: 34px 0;
}

.journal-index-page .journal-principle > p:last-child {
  max-width: none;
  font-size: clamp(18px, 1.3vw, 20px);
  line-height: 1.7;
  text-wrap: balance;
}

.journal-article-page .journal-article-hero {
  display: grid;
  grid-template-columns: 220px minmax(0, 760px);
  justify-content: center;
  column-gap: 64px;
  row-gap: 0;
  max-width: none;
  padding: 100px 0 34px;
}

.journal-article-page .journal-article-hero .page-label {
  margin-top: 24px;
}

.journal-article-page .journal-article-hero > * {
  grid-column: 2;
}

.journal-article-page .journal-article-hero h1 {
  max-width: 760px;
  font-size: clamp(34px, 3.8vw, 48px);
  line-height: 1.22;
}

.journal-article-page .journal-article-hero h1 span {
  display: block;
}

.journal-article-page .journal-article-hero h1 .journal-title-sequence {
  display: inline;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: .84em;
  font-weight: 400;
}

.journal-article-page .journal-article-dek {
  max-width: 720px;
  margin-top: 18px;
  font-size: clamp(16px, 1.5vw, 19px);
  text-wrap: balance;
}

.journal-article-page .journal-article-layout {
  grid-template-columns: 220px minmax(0, 760px);
  justify-content: center;
  gap: 64px;
  padding-top: 38px;
}

.journal-article-page .journal-article-content {
  font-size: 16px;
  line-height: 1.9;
}

.journal-article-page .journal-article-opening {
  padding-bottom: 30px;
  font-size: 16px;
}

.journal-article-page .journal-article-opening p:first-child {
  font-size: 1.08em;
}

.journal-article-page .journal-article-content h2 {
  font-size: clamp(25px, 2.5vw, 34px);
}

@media (max-width: 1180px) {
  .journal-index-page .journal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journal-article-page .journal-article-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .journal-article-page .journal-article-hero {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }

  .journal-article-page .journal-article-hero > * {
    grid-column: 1;
  }

  .journal-article-page .journal-article-toc {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .journal-article-page .journal-article-toc ol {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 900px) {
  .journal-browser-layout,
  .journal-index-page .journal-principle {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .journal-index-page .journal-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
  }

  .journal-index-page .journal-hero > div:first-child {
    grid-column: 1 / -1;
  }

  .journal-index-page .journal-hero .journal-search {
    width: 100%;
    justify-self: stretch;
  }

  .journal-sidebar {
    position: static;
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .journal-sidebar h2 {
    padding-bottom: 10px;
  }

  .journal-sort {
    grid-template-columns: auto minmax(150px, 220px);
    align-items: center;
  }

  .journal-filter-group {
    padding-top: 14px;
  }

  .journal-sidebar .journal-filter-list {
    display: flex;
    gap: 7px;
    max-width: 100%;
    overflow-x: auto;
  }

  .journal-sidebar .journal-filter-list button {
    width: auto;
    padding: 7px 12px;
    border: 1px solid var(--line);
    text-align: center;
  }

  .journal-sidebar .journal-filter-list button::after {
    display: none;
  }

  .journal-sidebar .journal-filter-list button.is-active {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }
}

@media (max-width: 680px) {
  body.journal-index-page main,
  body.journal-article-page main {
    width: calc(100% - 28px);
  }

  .journal-index-page .journal-hero {
    padding: 38px 0 24px;
  }

  .journal-index-page .journal-hero h1 {
    font-size: 36px;
  }

  .journal-index-page .journal-hero {
    grid-template-columns: 1fr;
  }

  .journal-index-page .journal-hero .journal-search,
  .journal-index-page .journal-hero .journal-results-actions {
    grid-column: 1;
  }

  .journal-index-page .journal-hero .journal-results-actions {
    width: 100%;
    justify-content: space-between;
  }

  .journal-index-page .journal-browser {
    padding-top: 26px;
  }

  .journal-index-page .journal-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .journal-index-page .journal-search {
    width: 100%;
  }

  .journal-results-actions {
    justify-content: space-between;
  }

  .journal-index-page .journal-grid {
    grid-template-columns: 1fr;
  }

  .journal-grid.is-list .journal-card {
    grid-template-columns: 1fr;
  }

  .journal-grid.is-list .journal-card-cover {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .journal-grid.is-list .journal-card-cover img {
    object-fit: contain;
  }

  .journal-grid.is-list .journal-card-body {
    min-height: 142px;
  }

  .journal-article-page .journal-article-hero {
    padding: 82px 0 28px;
  }

  .journal-article-page .journal-article-hero h1 {
    font-size: 32px;
  }

  .journal-article-page .journal-article-content,
  .journal-article-page .journal-article-opening {
    font-size: 16px;
  }
}

/* Recruitment schedule and application details. */
.join-entry-open,
.join-entry-open body {
  overflow: hidden;
}

.join-entry-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #050607;
  visibility: visible;
  transform: translateY(0);
  transition: transform 1.05s cubic-bezier(.76, 0, .24, 1), visibility 0s linear 1.05s;
  will-change: transform;
}

.join-entry-screen.is-leaving {
  pointer-events: none;
  transform: translateY(-100%);
  visibility: hidden;
}

.join-entry-screen > img,
.join-entry-screen > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.join-entry-screen > video {
  display: block;
  background: #050607;
  transform: translate3d(0, -8vh, 0);
  backface-visibility: hidden;
  will-change: opacity;
}

.join-entry-screen.is-playing > video {
  animation: join-entry-image-in 1s ease forwards;
}

.join-entry-reveal {
  position: absolute;
  left: 50%;
  bottom: clamp(30px, 6vh, 68px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 0;
  background: rgba(5, 6, 7, .66);
  color: #fff;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  z-index: 2;
  opacity: 1;
  transform: translateX(-50%);
  transition: background .2s, border-color .2s;
}

.join-entry-screen.is-playing .join-entry-reveal {
  opacity: 1;
}

.join-entry-reveal:hover,
.join-entry-reveal:focus-visible {
  border-color: #fff;
  background: rgba(5, 6, 7, .84);
}

.join-entry-reveal i {
  font-size: 20px;
}

.join-entry-credit {
  position: absolute;
  right: 12px;
  bottom: 10px;
  color: rgba(255, 255, 255, .72);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 10px;
  line-height: 1.4;
  opacity: 0;
}

.join-entry-screen.is-playing .join-entry-credit {
  animation: join-entry-controls-in .45s ease .62s forwards;
}

@keyframes join-entry-image-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes join-entry-controls-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.recruit-section {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 328px);
  gap: clamp(30px, 4vw, 52px);
  align-items: stretch;
}

.poster-with-credit {
  position: relative;
}

.poster-with-credit figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 2px 6px;
  background: rgba(15, 15, 17, .44);
  color: #fff;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.45;
  white-space: nowrap;
}

.recruit-main-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.recruit-main-poster {
  width: 100%;
  min-height: 0;
  margin: 0;
}

.recruit-page-hero + .recruit-section--announcement {
  margin-top: 44px;
}

.recruit-announcement {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 3vw, 42px);
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%),
    var(--card-bg);
}

.recruit-announcement::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--accent);
  z-index: 2;
}

.recruit-announcement::after {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(28px, 6vw, 96px);
  z-index: 0;
  width: min(48vw, 680px);
  aspect-ratio: 1;
  background: url("../images/brand/千里马头logo.PNG") center / contain no-repeat;
  filter: grayscale(1);
  opacity: .035;
  pointer-events: none;
  transform: translateY(-50%);
}

:root[data-theme="dark"] .recruit-announcement::after {
  filter: invert(1) grayscale(1);
  opacity: .045;
}

.recruit-announcement > * {
  position: relative;
  z-index: 1;
}

.recruit-announcement-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.recruit-announcement-heading h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--text);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.25;
}

.recruit-announcement-heading h2 > span {
  padding: 4px 9px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.4;
}

.recruit-announcement-batch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  background: var(--accent);
  color: #101311;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

.recruit-announcement-window {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  margin-top: 20px;
}

.recruit-announcement-window-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 13px 20px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg));
}

.recruit-announcement-window-track > div {
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: baseline;
  justify-content: start;
  column-gap: 18px;
  row-gap: 1px;
}

.recruit-announcement-window-track small {
  grid-column: 1 / -1;
  color: var(--accent);
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
}

.recruit-announcement-window-track span {
  color: color-mix(in srgb, var(--text) 88%, var(--bg));
  font-size: 12px;
}

.recruit-announcement-window-track strong {
  color: var(--text);
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
}

.recruit-announcement-window-track > i {
  color: var(--accent);
  font-size: 24px;
}

.recruit-announcement-details {
  display: grid;
  gap: 0;
  margin-top: 26px;
  border-top: 1px solid var(--line);
}

.recruit-announcement-details section {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 22px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.recruit-announcement h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

.recruit-announcement h3 i {
  margin-right: 7px;
  color: var(--accent);
}

.recruit-announcement-details p {
  margin: 0;
  color: color-mix(in srgb, var(--text) 88%, var(--bg));
  font-size: 14px;
  line-height: 1.85;
}

.recruit-announcement a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent);
  text-underline-offset: 4px;
}

.recruit-announcement a:hover,
.recruit-announcement a:focus-visible {
  text-decoration-color: currentColor;
}

.recruit-announcement-notes {
  margin-top: 28px;
}

.recruit-announcement-notes > h3 {
  font-size: 19px;
}

.recruit-announcement-notes ol {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: recruit-note;
}

.recruit-announcement-notes li {
  position: relative;
  padding: 15px 0 15px 42px;
  border-top: 1px solid var(--line);
  color: color-mix(in srgb, var(--text) 86%, var(--bg));
  font-size: 13px;
  line-height: 1.82;
  counter-increment: recruit-note;
}

.recruit-announcement-notes li::before {
  content: counter(recruit-note, decimal-leading-zero);
  position: absolute;
  top: 16px;
  left: 0;
  color: var(--accent);
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

.recruit-announcement-notes li strong {
  color: var(--text);
  font-weight: 600;
}

.recruit-announcement-notes .recruit-highlight {
  padding: 1px 4px 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.recruit-announcement-notes .recruit-highlight--invert {
  background: color-mix(in srgb, var(--accent) 28%, #fff);
  color: #101011;
}

.recruit-announcement-notes .recruit-highlight--blue {
  background: #b9dcff;
  color: #101011;
}

.recruit-announcement-notes .recruit-highlight--orange {
  background: #ffd0a8;
  color: #101011;
}

.recruit-announcement-notes .recruit-highlight--yellow {
  background: #f4df79;
  color: #101011;
}

:root[data-theme="dark"] .recruit-announcement-notes .recruit-highlight--invert {
  background: color-mix(in srgb, var(--accent) 34%, #101011);
  color: #fff;
}

:root[data-theme="dark"] .recruit-announcement-notes .recruit-highlight--blue {
  background: #184d7d;
  color: #fff;
}

:root[data-theme="dark"] .recruit-announcement-notes .recruit-highlight--orange {
  background: #7a3d18;
  color: #fff;
}

:root[data-theme="dark"] .recruit-announcement-notes .recruit-highlight--yellow {
  background: #66560e;
  color: #fff;
}

.recruit-qr-trigger {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent);
  text-underline-offset: 4px;
  cursor: pointer;
}

.recruit-qr-trigger:hover,
.recruit-qr-trigger:focus-visible {
  text-decoration-color: currentColor;
}

.recruit-qr-dialog {
  width: min(430px, calc(100% - 32px));
  max-width: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
}

.recruit-qr-dialog::backdrop {
  background: rgb(0 0 0 / 72%);
  backdrop-filter: blur(8px);
}

.recruit-qr-dialog-card {
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 62%, var(--line));
  background: var(--surface);
  box-shadow: 0 24px 80px rgb(0 0 0 / 42%);
}

.recruit-qr-dialog-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.recruit-qr-dialog-card .page-label {
  margin: 0 0 5px;
}

.recruit-qr-dialog-card h2 {
  margin: 0;
  color: var(--text);
  font-size: 21px;
  font-weight: 500;
}

.recruit-qr-dialog-card header > button {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-size: 22px;
  place-items: center;
  cursor: pointer;
}

.recruit-qr-dialog-card header > button:hover,
.recruit-qr-dialog-card header > button:focus-visible {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg);
}

.recruit-qr-dialog-card img {
  display: block;
  width: 100%;
  max-height: 64vh;
  object-fit: contain;
  background: #fff;
}

.recruit-qr-dialog-card > p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.recruit-qr-dialog-card > p strong {
  color: var(--text);
}

.recruit-announcement code {
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--text);
  font: 500 12px/1.7 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  overflow-wrap: anywhere;
}

.recruit-overview {
  padding-top: 38px;
  border-top: 1px solid var(--line);
}

#groups {
  scroll-margin-top: 104px;
}

.recruit-info-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.recruit-info-heading h2 {
  margin: 0;
  font-size: 32px;
  font-weight: 500;
}

.recruit-guide-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 190px;
  min-height: 52px;
  padding: 10px 20px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.recruit-guide-link i {
  font-size: 20px;
  transition: transform 180ms ease;
}

.recruit-guide-link:hover,
.recruit-guide-link:focus-visible {
  color: #101311;
  background: var(--accent);
  outline: 0;
  transform: translateY(-2px);
}

.recruit-guide-link:hover i,
.recruit-guide-link:focus-visible i {
  transform: translateX(4px);
}

.recruit-info-block {
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.recruit-info-block h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
}

.recruit-info-block p {
  margin: 0;
}

.recruit-info-block a {
  color: var(--accent);
  overflow-wrap: anywhere;
}

.recruit-schedule {
  margin: 0;
}

.recruit-schedule > div {
  display: grid;
  grid-template-columns: 150px 138px minmax(0, 1fr);
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.recruit-schedule > div:last-child {
  border-bottom: 0;
}

.recruit-schedule dt {
  color: var(--text);
  font-weight: 500;
}

.recruit-schedule dd {
  margin: 0;
  color: var(--muted);
}

.recruit-schedule-month {
  white-space: nowrap;
}

@media (max-width: 560px) {
  .join-entry-screen > video {
    object-fit: contain;
    object-position: center;
    transform: none;
  }

  .join-entry-reveal {
    bottom: max(54px, calc(env(safe-area-inset-bottom) + 20px));
  }

  .poster-with-credit figcaption {
    font-size: 9px;
  }

  .recruit-info-block {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .recruit-announcement {
    padding: 24px 18px;
  }

  .recruit-announcement::after {
    right: -24%;
    width: 118vw;
  }

  .recruit-announcement-heading {
    flex-direction: column;
    gap: 14px;
  }

  .recruit-announcement-window {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .recruit-announcement-window-track {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .recruit-announcement-window-track > i {
    justify-self: start;
    transform: rotate(90deg);
  }

  .recruit-announcement-window-track > div {
    grid-template-columns: minmax(0, 1fr) max-content;
    width: 100%;
  }

  .recruit-announcement-details section {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .recruit-announcement-notes li {
    padding-left: 34px;
  }

  .recruit-info-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
  }

  .recruit-guide-link {
    width: 100%;
  }

  .recruit-schedule > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .recruit-schedule-position {
    margin-top: 2px;
  }
}

@media (max-width: 860px) {
  .recruit-section {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  .recruit-main-poster {
    width: min(100%, 420px);
    justify-self: center;
    aspect-ratio: 975 / 1280;
  }
}

/* Join guide: pre-application preparation and interview checklist. */
.learn-rm-body {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(7, 8, 9, .66), rgba(7, 8, 9, .78)),
    url("../images/join/rm-arena-2026.jpg");
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

:root[data-theme="light"] .learn-rm-body {
  background-image:
    linear-gradient(rgba(250, 250, 250, .84), rgba(250, 250, 250, .9)),
    url("../images/join/rm-arena-2026.jpg");
}

.learn-rm-page .page-hero {
  margin-top: 58px;
}

.learn-rm-hero {
  padding: 0 0 24px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  backdrop-filter: none;
}

.join-guide-page .page-hero {
  margin-top: 58px;
}

.join-guide-overview {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
  gap: 1px;
  padding: 1px;
  background: var(--line);
}

.join-guide-intro,
.join-guide-ready {
  padding: clamp(28px, 4vw, 46px);
  background: var(--card-bg);
}

.join-guide-intro h2,
.join-guide-section h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.25;
  font-weight: 500;
}

.join-guide-intro-copy > p:not(.page-label) {
  margin-top: 16px;
  max-width: 650px;
}

.join-guide-ready {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  align-content: center;
}

.join-guide-ready > i {
  color: var(--accent);
  font-size: 44px;
  line-height: 1;
}

.join-guide-ready strong {
  display: block;
  font-size: 22px;
  font-weight: 500;
}

.join-guide-ready p {
  margin-top: 8px;
}

.join-guide-overview--awareness {
  display: block;
  margin-top: clamp(10px, 1.5vw, 18px);
  padding: 0;
  border: 0;
  background: transparent;
}

.join-guide-overview--awareness .join-guide-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  align-items: center;
  column-gap: clamp(28px, 4vw, 56px);
  row-gap: 26px;
  padding-top: clamp(12px, 1.6vw, 20px);
  padding-bottom: 30px;
  background: transparent;
}

.join-guide-overview--awareness .join-guide-intro-copy > p:not(.page-label) {
  max-width: 980px;
  font-size: 16px;
  line-height: 1.85;
}

.join-guide-team-photo {
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: 16 / 10;
  margin: 0;
  overflow: hidden;
  justify-self: end;
  border: 1px solid var(--line);
  background: var(--surface);
}

.join-guide-team-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}

.join-guide-team-photo figcaption {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 4px 7px;
  color: #fff;
  background: rgba(6, 8, 9, 0.66);
  font: 500 10px/1.4 "Noto Sans SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0.04em;
}

@media (max-width: 900px) {
  .join-guide-overview--awareness .join-guide-intro {
    grid-template-columns: minmax(0, 1fr);
  }

  .join-guide-team-photo {
    width: min(100%, 420px);
    justify-self: start;
  }
}

.join-answer-nav {
  --answer-pellet: #9dff45;
  position: fixed;
  z-index: 46;
  top: 55%;
  left: clamp(18px, 4.3vw, 88px);
  width: 64px;
  padding: 12px 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: translateY(-50%);
}

.join-answer-nav::before {
  position: absolute;
  z-index: -1;
  top: 20px;
  bottom: 20px;
  left: 50%;
  width: 1px;
  background: color-mix(in srgb, var(--answer-pellet) 24%, transparent);
  content: "";
  transform: translateX(-50%);
}

.join-answer-nav-list {
  display: grid;
  justify-items: center;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.join-answer-nav-list li {
  display: grid;
  min-height: 17px;
  place-items: center;
}

.join-answer-nav-list li:nth-child(9) {
  margin-top: 8px;
}

.join-answer-nav button {
  position: relative;
  display: grid;
  width: 17px;
  height: 17px;
  padding: 0;
  overflow: visible;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--answer-pellet) 68%, white);
  border-radius: 50%;
  color: #0c1110;
  background:
    radial-gradient(circle at 34% 27%, rgba(255, 255, 255, 0.72) 0 8%, transparent 23%),
    var(--answer-pellet);
  box-shadow: 0 0 9px color-mix(in srgb, var(--answer-pellet) 48%, transparent), inset 0 -2px 4px rgba(73, 98, 0, 0.28);
  cursor: pointer;
  transition: width 180ms ease, height 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.join-answer-nav button img {
  width: 25px;
  height: auto;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.45);
  transition: opacity 130ms ease 40ms, transform 180ms ease;
}

.join-answer-nav button::after {
  position: absolute;
  top: 50%;
  left: calc(100% + 14px);
  width: max-content;
  max-width: 250px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
  content: attr(data-label);
  font: 500 12px/1.45 "Noto Sans SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
  transform: translate(6px, -50%);
  transition: opacity 140ms ease, transform 140ms ease;
}

.join-answer-nav button:hover:not(.is-active) {
  transform: scale(1.15);
}

.join-answer-nav button:hover::after,
.join-answer-nav button:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}

.join-answer-nav button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.join-answer-nav button.is-active {
  width: 42px;
  height: 42px;
  border-color: rgba(255, 255, 255, 0.96);
  background:
    radial-gradient(circle at 34% 27%, #fff 0 8%, transparent 25%),
    #f4f4f1;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--answer-pellet) 24%, transparent), 0 0 20px rgba(255, 255, 255, 0.26), inset 0 -4px 7px rgba(0, 0, 0, 0.16);
}

.join-answer-nav button.is-active img {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 1180px) {
  .join-answer-nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .join-answer-nav button,
  .join-answer-nav button img,
  .join-answer-nav button::after {
    transition: none;
  }
}

.join-awareness-path {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  margin-top: 28px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.join-awareness-path > span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 12px;
  min-height: 92px;
  padding: 18px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.join-awareness-path b {
  grid-row: 1 / 3;
  color: var(--accent);
  font: 700 12px/1.4 "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.join-awareness-path strong {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
}

.join-awareness-path small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.join-awareness-path > i {
  display: grid;
  place-items: center;
  width: 44px;
  border-bottom: 1px solid var(--line);
  color: var(--accent);
  background: var(--card-bg);
  font-size: 20px;
}

.join-awareness-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  width: min(1320px, calc(100% - clamp(32px, 8vw, 120px)));
  margin: clamp(24px, 3vw, 38px) auto 0;
  padding: 22px 24px 18px;
  border: 1px solid var(--line);
  border-bottom: 0;
}

.join-awareness-heading h3 {
  margin: 0;
  font-size: clamp(25px, 2.6vw, 34px);
  font-weight: 500;
  line-height: 1.25;
}

.join-awareness-list {
  display: grid;
  grid-template-columns: 1fr;
  width: min(1320px, calc(100% - clamp(32px, 8vw, 120px)));
  margin: 0 auto clamp(28px, 4vw, 46px);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  counter-reset: awareness-item;
}

.join-awareness-item {
  --awareness-heat: #43d884;
  --awareness-icon: "🎮";
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(180px, auto);
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 98px;
  padding: 15px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--awareness-heat) 11%, var(--card-bg));
  box-shadow: inset 3px 0 color-mix(in srgb, var(--awareness-heat) 48%, transparent);
  transition: background 160ms ease, box-shadow 160ms ease;
  counter-increment: awareness-item;
}

.join-awareness-item:nth-child(2) {
  --awareness-heat: #75d66f;
  --awareness-icon: "🗓️";
}

.join-awareness-item:nth-child(3) {
  --awareness-heat: #a8d25f;
  --awareness-icon: "🏛️";
}

.join-awareness-item:nth-child(4) {
  --awareness-heat: #d2ca55;
  --awareness-icon: "🧩";
}

.join-awareness-item:nth-child(5) {
  --awareness-heat: #e3b851;
  --awareness-icon: "📣";
}

.join-awareness-item:nth-child(6) {
  --awareness-heat: #e69a4f;
  --awareness-icon: "📬";
}

.join-awareness-item:nth-child(7) {
  --awareness-heat: #df7955;
  --awareness-icon: "🧭";
}

.join-awareness-item:nth-child(8) {
  --awareness-heat: #d85d60;
  --awareness-icon: "📚";
}

.join-awareness-item::before {
  content: counter(awareness-item, decimal-leading-zero);
  color: var(--accent);
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1;
}

.join-awareness-item:hover {
  background: color-mix(in srgb, var(--awareness-heat) 17%, var(--card-bg));
  box-shadow: inset 3px 0 color-mix(in srgb, var(--awareness-heat) 70%, transparent);
}

.join-awareness-item label {
  display: grid;
  grid-column: 2;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 13px;
  cursor: pointer;
}

.join-awareness-item input {
  width: 19px;
  height: 19px;
  margin: 3px 0 0;
  accent-color: var(--accent);
}

.join-awareness-item strong,
.join-awareness-item small {
  display: block;
}

.join-awareness-item strong {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
}

.join-awareness-item strong::before {
  content: var(--awareness-icon);
  display: inline-block;
  margin-right: 9px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.05em;
  line-height: 1;
  vertical-align: -0.05em;
}

.join-awareness-item small {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.join-awareness-item > div {
  display: flex;
  grid-column: 3;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  max-width: 470px;
  margin: 0;
}

.join-awareness-item > div a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  color: var(--accent);
  font-size: 12px;
  line-height: 1.4;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.join-awareness-item > div a:hover,
.join-awareness-item > div a:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--text);
}

.join-guide-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  color: var(--accent);
  font-size: 14px;
}

.join-video-guide {
  --join-video-accent-soft: color-mix(in srgb, var(--accent) 10%, var(--card-bg));
}

.learn-rm-page .page-hero + .join-video-guide {
  margin-top: 26px;
}

.join-video-guide-heading h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.25;
  font-weight: 500;
}

.join-video-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.join-video-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 66px;
  padding: 12px 10px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--card-bg);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.join-video-tabs button i {
  color: var(--accent);
  font-size: 22px;
}

.join-video-tabs button:hover,
.join-video-tabs button:focus-visible,
.join-video-tabs button.is-active {
  background: var(--join-video-accent-soft);
  color: var(--text);
}

.join-video-tabs button.is-active {
  box-shadow: inset 0 -3px var(--accent);
}

.join-video-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .72fr);
  border-left: 1px solid var(--line);
}

.join-video-frame {
  aspect-ratio: 16 / 9;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #050607;
  overflow: hidden;
}

.join-video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.join-video-external {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: #050607;
  color: #fff;
}

.join-video-external i {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  padding-left: 5px;
  border: 1px solid rgba(255, 255, 255, .76);
  border-radius: 50%;
  background: rgba(0, 0, 0, .52);
  font-size: 48px;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.join-video-external:hover i,
.join-video-external:focus-visible i {
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(1.05);
}

.join-video-placeholder {
  display: grid;
  place-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 26px;
  color: var(--muted);
  text-align: center;
}

.join-video-placeholder i {
  color: var(--accent);
  font-size: 42px;
}

.join-video-placeholder strong,
.join-video-placeholder span {
  display: block;
}

.join-video-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(26px, 3vw, 40px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--card-bg);
}

.learn-rm-page .join-video-tabs button,
.learn-rm-page .join-video-copy,
.learn-rm-page .join-video-episodes button {
  background: color-mix(in srgb, var(--card-bg) 58%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  backdrop-filter: blur(18px) saturate(1.18);
}

.learn-rm-page .join-video-tabs button:hover,
.learn-rm-page .join-video-tabs button:focus-visible,
.learn-rm-page .join-video-tabs button.is-active,
.learn-rm-page .join-video-episodes button:hover,
.learn-rm-page .join-video-episodes button:focus-visible,
.learn-rm-page .join-video-episodes button.is-active {
  background: color-mix(in srgb, var(--accent) 13%, color-mix(in srgb, var(--card-bg) 60%, transparent));
}

.join-video-copy > h3 {
  margin: 8px 0 10px;
  font-size: clamp(25px, 2.4vw, 34px);
  line-height: 1.2;
  font-weight: 500;
}

.join-video-category-summary {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.join-video-now-playing {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.join-video-now-playing > span {
  display: block;
  color: var(--accent);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 12px;
  letter-spacing: .1em;
}

.join-video-now-playing > strong {
  display: block;
  margin-top: 8px;
  font-size: 19px;
  line-height: 1.45;
  font-weight: 500;
}

.join-video-now-playing > p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.join-video-now-playing > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 15px;
  color: var(--accent);
  font-size: 14px;
}

.join-video-now-playing > a[hidden] {
  display: none;
}

.join-video-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.join-video-actions button {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  font-size: 20px;
  cursor: pointer;
}

.join-video-actions button:disabled {
  opacity: .4;
  cursor: default;
}

.join-video-episodes {
  display: grid;
  grid-template-columns: repeat(var(--episode-columns, 3), minmax(0, 1fr));
  border-left: 1px solid var(--line);
}

.join-video-episodes button {
  min-height: 110px;
  padding: 18px 22px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--card-bg);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease;
}

.join-video-episodes button:hover,
.join-video-episodes button:focus-visible,
.join-video-episodes button.is-active {
  background: var(--join-video-accent-soft);
}

.join-video-episodes button.is-active {
  box-shadow: inset 0 3px var(--accent);
}

.join-video-episodes span,
.join-video-episodes strong,
.join-video-episodes small {
  display: block;
}

.join-video-episodes span {
  color: var(--accent);
  font-size: 12px;
  letter-spacing: .05em;
}

.join-video-episodes strong {
  margin-top: 8px;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 500;
}

.join-video-episodes small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.join-guide-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.join-guide-section-heading > p {
  max-width: 640px;
  text-align: right;
}

.join-check-progress {
  flex: 0 0 auto;
  min-width: 116px;
  padding: 8px 12px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  text-align: center;
}

.join-check-progress.is-complete {
  background: var(--accent);
  color: var(--bg);
}

.join-checklist {
  display: grid;
  grid-template-columns: 1fr;
  width: min(1320px, calc(100% - clamp(32px, 8vw, 120px)));
  margin: 0 auto;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  counter-reset: application-check-item;
}

.join-guide-section--checklist .join-guide-section-heading {
  width: min(1320px, calc(100% - clamp(32px, 8vw, 120px)));
  margin-bottom: 0;
  margin-right: auto;
  margin-left: auto;
  padding: 22px 24px 18px;
  border: 1px solid var(--line);
  border-bottom: 0;
}

.join-check-item {
  --check-heat: #4f75d9;
  --check-icon: "🧭";
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(180px, auto);
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 98px;
  padding: 15px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--check-heat) 10%, var(--card-bg));
  box-shadow: inset 3px 0 color-mix(in srgb, var(--check-heat) 46%, transparent);
  transition: background 160ms ease, box-shadow 160ms ease;
  counter-increment: application-check-item;
}

.join-check-item:nth-child(2) {
  --check-heat: #477fdd;
  --check-icon: "🎓";
}

.join-check-item:nth-child(3) {
  --check-heat: #3d91da;
  --check-icon: "🪞";
}

.join-check-item:nth-child(4) {
  --check-heat: #32a2d0;
  --check-icon: "⏱️";
}

.join-check-item:nth-child(5) {
  --check-heat: #2eb4bd;
  --check-icon: "📅";
}

.join-check-item:nth-child(6) {
  --check-heat: #35c0a4;
  --check-icon: "🤝";
}

.join-check-item:nth-child(7) {
  --check-heat: #41c88c;
  --check-icon: "✍️";
}

.join-check-item:nth-child(8) {
  --check-heat: #4fce79;
  --check-icon: "✅";
}

.join-check-item::before {
  content: counter(application-check-item, decimal-leading-zero);
  color: color-mix(in srgb, var(--check-heat) 82%, var(--text));
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1;
}

.join-check-item:hover {
  background: color-mix(in srgb, var(--check-heat) 16%, var(--card-bg));
  box-shadow: inset 3px 0 color-mix(in srgb, var(--check-heat) 68%, transparent);
}

.join-check-item input {
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
  accent-color: var(--accent);
}

.join-check-item label {
  display: grid;
  grid-column: 2;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 13px;
  cursor: pointer;
}

.join-check-item strong {
  display: block;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
}

.join-check-item strong::before {
  content: var(--check-icon);
  display: inline-block;
  margin-right: 9px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.05em;
  line-height: 1;
  vertical-align: -0.05em;
}

.join-check-item small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.join-check-item > div {
  display: flex;
  grid-column: 3;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  max-width: 470px;
}

.join-check-item > div a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--check-heat) 54%, var(--line));
  color: color-mix(in srgb, var(--check-heat) 78%, var(--text));
  font-size: 12px;
  line-height: 1.4;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.join-check-item > div a:hover,
.join-check-item > div a:focus-visible {
  border-color: var(--check-heat);
  background: color-mix(in srgb, var(--check-heat) 11%, transparent);
  color: var(--text);
}

.join-interview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.join-interview-card {
  padding: 26px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--card-bg);
}

.join-interview-card > i {
  display: block;
  margin-bottom: 16px;
  color: var(--accent);
  font-size: 30px;
}

.join-interview-card h3 {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 500;
}

.join-interview-card ul {
  margin: 0;
  padding-left: 1.2em;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.join-interview-card li + li {
  margin-top: 7px;
}

.join-interview-followup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 12px;
  padding: 0 2px;
  color: var(--subtle);
  font-size: 13px;
  line-height: 1.65;
}

.join-interview-followup a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 500;
}

.join-interview-followup a:hover,
.join-interview-followup a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (min-width: 1451px) {
  .join-interview-card li {
    white-space: nowrap;
  }
}

.learn-rm-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 30px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card-bg) 58%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  backdrop-filter: blur(18px) saturate(1.18);
}

.learn-rm-practical {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card-bg) 58%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  backdrop-filter: blur(18px) saturate(1.18);
}

.learn-rm-practical .join-guide-section-heading {
  margin-bottom: 20px;
}

.learn-rm-practical h2 {
  margin: 0;
  font-size: clamp(27px, 3vw, 38px);
  font-weight: 500;
  line-height: 1.25;
}

.learn-rm-practical-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.learn-rm-practical-grid > a {
  position: relative;
  display: grid;
  min-height: 190px;
  padding: 25px 80px 24px 25px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--card-bg) 66%, transparent);
  transition: background 160ms ease, color 160ms ease;
}

.learn-rm-practical-grid > a:hover,
.learn-rm-practical-grid > a:focus-visible {
  background: color-mix(in srgb, var(--accent) 11%, color-mix(in srgb, var(--card-bg) 64%, transparent));
}

.learn-rm-practical-grid > a > i {
  position: absolute;
  top: 25px;
  right: 25px;
  color: var(--accent);
  font-size: 34px;
}

.learn-rm-practical-grid small,
.learn-rm-practical-grid strong,
.learn-rm-practical-grid span,
.learn-rm-practical-grid em {
  display: block;
}

.learn-rm-practical-grid small {
  color: var(--accent);
  font: 700 11px/1.4 Arial, "Microsoft YaHei", sans-serif;
  letter-spacing: .12em;
}

.learn-rm-practical-grid strong {
  margin-top: 10px;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.35;
}

.learn-rm-practical-grid span {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.learn-rm-practical-grid em {
  align-self: end;
  margin-top: 18px;
  color: var(--accent);
  font-size: 13px;
  font-style: normal;
}

.learn-rm-next h2 {
  margin: 0;
  font-size: 27px;
  font-weight: 500;
}

.learn-rm-next p:not(.page-label) {
  max-width: 740px;
  margin-top: 7px;
}

.learn-rm-more {
  padding: 0;
}

.learn-rm-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 24px;
}

.learn-rm-section-heading h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.25;
  font-weight: 500;
}

.learn-rm-section-heading > p {
  max-width: 680px;
  margin: 0;
  text-align: right;
}

.learn-rm-documentary {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(250px, .52fr);
  min-height: 330px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card-bg) 58%, transparent);
  color: var(--text);
  overflow: hidden;
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  backdrop-filter: blur(18px) saturate(1.18);
}

.learn-rm-documentary-posters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-width: 0;
  background: #111;
  overflow: hidden;
}

.learn-rm-documentary-posters img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: cover;
  object-position: center;
  filter: saturate(.86) contrast(1.02);
  transition: filter 180ms ease, transform 180ms ease;
}

.learn-rm-documentary:hover .learn-rm-documentary-posters img,
.learn-rm-documentary:focus-visible .learn-rm-documentary-posters img {
  filter: saturate(1) contrast(1.05);
  transform: scale(1.015);
}

.learn-rm-documentary-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(22px, 2.4vw, 32px);
  border-left: 1px solid var(--line);
}

.learn-rm-documentary-copy small,
.learn-rm-resource-grid small {
  color: var(--accent);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 12px;
  letter-spacing: .08em;
}

.learn-rm-documentary-copy strong {
  margin-top: 9px;
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.3;
  font-weight: 500;
}

.learn-rm-documentary-copy > span {
  margin-top: 11px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.learn-rm-documentary-copy em {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  color: var(--accent);
  font-size: 14px;
  font-style: normal;
}

.learn-rm-resource-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-left: 1px solid var(--line);
}

.learn-rm-resource-grid a {
  position: relative;
  min-height: 206px;
  padding: 28px 26px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--card-bg) 58%, transparent);
  color: var(--text);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  backdrop-filter: blur(18px) saturate(1.18);
  transition: background 160ms ease, color 160ms ease;
}

.learn-rm-resource-grid a:hover,
.learn-rm-resource-grid a:focus-visible {
  background: color-mix(in srgb, var(--accent) 13%, color-mix(in srgb, var(--card-bg) 60%, transparent));
}

.learn-rm-resource-grid i {
  position: absolute;
  top: 25px;
  right: 24px;
  color: var(--accent);
  font-size: 31px;
}

.learn-rm-resource-grid strong,
.learn-rm-resource-grid span {
  display: block;
}

.learn-rm-resource-grid strong {
  margin-top: 23px;
  padding-right: 25px;
  font-size: 21px;
  font-weight: 500;
}

.learn-rm-resource-grid span {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.learn-rm-page .learn-rm-related-links {
  width: min(var(--max-width), calc(100% - 40px));
  margin: clamp(64px, 8vw, 104px) auto 0;
}

@media (max-width: 900px) {
  .join-guide-overview,
  .join-interview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .join-guide-overview {
    grid-template-columns: 1fr;
  }

  .join-awareness-path {
    grid-template-columns: 1fr;
  }

  .join-awareness-path > i {
    width: auto;
    min-height: 34px;
    border-right: 1px solid var(--line);
    transform: none;
  }

  .join-awareness-path > i::before {
    display: inline-block;
    transform: rotate(90deg);
  }

  .join-awareness-item {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
  }

  .join-awareness-item::before {
    grid-row: 1 / 3;
    padding-top: 5px;
  }

  .join-awareness-item > div {
    grid-column: 2;
    justify-content: flex-start;
    max-width: none;
    margin-left: 37px;
  }

  .join-check-item {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
  }

  .join-check-item::before {
    grid-row: 1 / 3;
    padding-top: 5px;
  }

  .join-check-item > div {
    grid-column: 2;
    justify-content: flex-start;
    max-width: none;
    margin-left: 37px;
  }

  .learn-rm-next {
    align-items: flex-start;
    flex-direction: column;
  }

  .join-video-tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .join-video-tabs::-webkit-scrollbar {
    display: none;
  }

  .join-video-tabs button {
    flex: 0 0 168px;
  }

  .join-video-stage {
    grid-template-columns: 1fr;
  }

  .join-video-copy {
    min-height: 330px;
  }

  .join-video-episodes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .learn-rm-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .learn-rm-section-heading > p {
    max-width: 720px;
    text-align: left;
  }

  .learn-rm-documentary {
    grid-template-columns: 1fr;
  }

  .learn-rm-documentary-posters {
    min-height: 360px;
  }

  .learn-rm-documentary-copy {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .learn-rm-resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .learn-rm-body {
    background-attachment: scroll;
    background-position: center top;
  }

  .learn-rm-hero {
    padding: 0 0 20px;
  }

  .join-checklist,
  .join-interview-grid,
  .join-awareness-list,
  .learn-rm-practical-grid {
    grid-template-columns: 1fr;
  }

  .join-awareness-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .join-awareness-item {
    min-height: 0;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    padding: 15px 16px;
  }

  .join-awareness-item > div {
    margin-left: 33px;
  }

  .join-check-item {
    min-height: 0;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    padding: 15px 16px;
  }

  .join-check-item > div {
    margin-left: 33px;
  }

  .learn-rm-practical {
    padding: 20px;
  }

  .join-guide-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .join-guide-section-heading > p {
    text-align: left;
  }

  .join-video-guide-heading {
    margin-bottom: 18px;
  }

  .join-video-tabs button {
    flex-basis: 148px;
    min-height: 58px;
    font-size: 14px;
  }

  .join-video-copy {
    min-height: 0;
    padding: 24px 20px;
  }

  .join-video-now-playing {
    margin-top: 22px;
  }

  .join-video-episodes {
    grid-template-columns: 1fr;
  }

  .join-video-episodes button {
    min-height: 88px;
  }

  .learn-rm-documentary {
    min-height: 0;
  }

  .learn-rm-documentary-posters {
    grid-template-columns: repeat(5, 42%);
    min-height: 280px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .learn-rm-documentary-posters img {
    scroll-snap-align: start;
  }

  .learn-rm-resource-grid {
    grid-template-columns: 1fr;
  }

  .learn-rm-resource-grid a {
    min-height: 168px;
  }

  .learn-rm-page .learn-rm-related-links {
    width: calc(100% - 28px);
  }
}

/* About hub cards stay on one desktop row. */
@media (min-width: 861px) {
  .about-entry-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .about-entry-grid .entry-card {
    min-height: 0;
    aspect-ratio: auto;
  }

  .about-entry-grid .entry-card strong {
    font-size: 22px;
  }
}

.about-entry-card {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0 0 72px;
  isolation: isolate;
}

.about-entry-card figure {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  margin: 0;
  background: var(--surface);
}

.about-entry-card figure img,
:root[data-theme="dark"] .about-entry-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none !important;
  transition: transform 320ms ease;
}

.about-entry-card:hover figure img,
.about-entry-card:focus-visible figure img {
  transform: scale(1.035);
}

.about-entry-card-title {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.about-entry-card-title i {
  color: var(--accent);
  font-size: 28px;
  line-height: 1;
}

.about-entry-card-title strong {
  margin: 0;
}

.about-entry-card-body {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  min-height: 164px;
  padding: 20px;
  background: var(--card-bg);
  transform: translateY(calc(100% - 72px));
  transition: transform 300ms ease, background-color 220ms ease;
}

.about-entry-card-body small {
  display: block;
  margin: 14px 0 0 42px;
  color: var(--muted);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 180ms ease, transform 260ms ease;
}

@media (hover: hover) and (min-width: 861px) {
  .about-entry-card:hover .about-entry-card-body,
  .about-entry-card:focus-visible .about-entry-card-body {
    background: color-mix(in srgb, var(--card-bg) 80%, transparent);
    transform: translateY(0);
    backdrop-filter: blur(8px);
  }

  .about-entry-card:hover .about-entry-card-body small,
  .about-entry-card:focus-visible .about-entry-card-body small {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 80ms;
  }
}

@media (max-width: 860px) {
  .about-entry-card {
    min-height: auto;
    aspect-ratio: auto;
    padding-bottom: 0;
  }

  .about-entry-card figure {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 10;
  }

  .about-entry-card-body {
    position: relative;
    min-height: 0;
    transform: none;
  }

  .about-entry-card-body small {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-entry-card figure img,
  .about-entry-card-body,
  .about-entry-card-body small {
    transition: none;
  }
}

/* About introduction: a concise recruitment narrative paired with a real team scene. */
.about-page-hero {
  grid-template-columns: 1fr;
}

.about-page-title {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.18em;
  white-space: nowrap;
}

.about-page-title span {
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 500;
}

.about-introduction {
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.94fr);
  column-gap: clamp(28px, 4vw, 54px);
  row-gap: 16px;
  align-items: start;
}

.about-introduction-copy {
  position: relative;
  isolation: isolate;
}

.about-introduction-copy::before {
  content: "";
  position: absolute;
  inset: 4% 0;
  z-index: 0;
  background: url("../images/brand/千里马头logo.PNG") center 60% / 60% auto no-repeat;
  opacity: 0.08;
  pointer-events: none;
}

:root[data-theme="dark"] .about-introduction-copy::before {
  filter: invert(1) grayscale(1);
}

.about-introduction-copy > * {
  position: relative;
  z-index: 1;
}

.about-introduction-copy p {
  margin-top: 0;
  line-height: 1.86;
  text-indent: 2em;
}

.about-introduction-copy p + p {
  margin-top: 16px;
}

.about-introduction-figure {
  margin: 0;
}

.about-introduction-figure img {
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.about-introduction strong {
  color: var(--text);
  font-weight: 600;
}

.about-introduction-highlight {
  padding: 0 0.16em;
  background: linear-gradient(transparent 58%, var(--accent-soft) 58%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.about-introduction > .about-introduction-conclusion {
  grid-column: 1 / -1;
  margin: 0;
  line-height: 1.86;
  text-indent: 2em;
}

@media (max-width: 860px) {
  .about-page-title {
    display: block;
    white-space: normal;
  }

  .about-page-title span {
    display: block;
    margin-top: 6px;
    font-size: clamp(17px, 4.7vw, 22px);
    white-space: nowrap;
  }

  .about-introduction {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .about-introduction-figure img {
    height: auto;
  }

  .about-introduction > .about-introduction-conclusion {
    grid-column: auto;
  }
}

/* Mobile primary navigation owns vertical gestures while open. */
@media (max-width: 860px) {
  html.nav-open,
  html.nav-open body {
    overflow: hidden;
  }

  .nav-links.is-open {
    position: absolute;
    inset: 72px 0 auto;
    z-index: 21;
    width: 100%;
    height: calc(100dvh - 72px);
    max-width: 100vw;
    max-height: calc(100dvh - 72px);
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .nav-links.is-open .nav-menu,
  .nav-links.is-open .nav-dropdown {
    min-width: 0;
    max-width: 100%;
  }

  .nav-links.is-open .nav-menu:hover .nav-dropdown,
  .nav-links.is-open .nav-menu:focus-within .nav-dropdown {
    transform: none;
  }

  .nav-links.is-open > a,
  .nav-links.is-open > .nav-menu {
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .join-entry-screen,
  .join-entry-screen > img,
  .join-entry-screen > video,
  .join-entry-reveal,
  .join-entry-credit {
    transition-duration: .01ms;
    animation-duration: .01ms;
    animation-delay: 0s;
  }
}

/* Design archive and merchandise showcase */
.design-photo-grid .team-photo-item > img {
  object-fit: contain;
  background: #f1f1ef;
}

.team-photo-credit,
.gallery-lightbox-credit {
  position: absolute;
  right: 10px;
  z-index: 1;
  padding: 4px 7px;
  background: rgba(10, 10, 11, 0.66);
  color: #fff;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 10px;
  font-style: normal;
  line-height: 1.25;
}

.team-photo-credit {
  bottom: 79px;
}

.gallery-lightbox-credit {
  right: 34px;
  bottom: 34px;
}

.gallery-lightbox-credit[hidden] {
  display: none;
}

.gallery-lightbox-counter {
  top: 34px;
  bottom: auto;
}

.shop-page {
  padding-bottom: 96px;
}

.shop-current,
.shop-access,
.shop-archive {
  width: min(var(--max-width), calc(100% - 40px));
  margin-right: auto;
  margin-left: auto;
}

.shop-current {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(360px, 0.84fr);
  align-items: stretch;
  margin-top: 46px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.shop-current-visual {
  position: relative;
  min-width: 0;
  min-height: 520px;
  margin: 0;
  padding: 34px;
  background: #f1f1ef;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.shop-current-visual img {
  width: 100%;
  height: 100%;
  max-height: 560px;
  object-fit: contain;
}

.shop-current-visual figcaption,
.shop-archive-card em {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 4px 7px;
  background: rgba(10, 10, 11, 0.62);
  color: #fff;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 10px;
  font-style: normal;
  line-height: 1.2;
}

.shop-current-copy {
  padding: 54px 48px;
  border-left: 1px solid var(--line);
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.shop-current-copy h2,
.shop-section-heading h2 {
  margin: 5px 0 0;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.22;
}

.shop-current-copy > p:not(.page-label) {
  margin-top: 24px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.85;
}

.shop-product-facts {
  width: 100%;
  margin: 28px 0 0;
  border-top: 1px solid var(--line);
}

.shop-product-facts > div {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 13px;
}

.shop-product-facts dt {
  color: var(--muted);
}

.shop-product-facts dd {
  margin: 0;
  color: var(--text);
}

.shop-product-link {
  margin-top: 28px;
}

.shop-product-link i {
  margin-left: 5px;
  font-size: 17px;
}

.shop-access,
.shop-archive {
  margin-top: 94px;
}

.shop-section-heading {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(380px, 1.18fr);
  align-items: end;
  gap: 56px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.shop-section-heading > p {
  padding-bottom: 4px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}

.shop-access-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.64fr) minmax(420px, 1.36fr);
  gap: 1px;
  margin-top: 28px;
  border: 1px solid var(--line);
  background: var(--line);
}

.shop-qr-figure,
.shop-order-figure {
  margin: 0;
  background: var(--card-bg);
}

.shop-qr-figure {
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.shop-qr-figure img {
  width: min(100%, 330px);
  max-height: 520px;
  object-fit: contain;
}

.shop-qr-figure figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
}

.shop-order-figure {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  min-height: 560px;
}

.shop-order-figure > img {
  width: 100%;
  height: 100%;
  max-height: 680px;
  object-fit: contain;
  background: #f1f1ef;
}

.shop-order-figure figcaption {
  padding: 26px 22px;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
}

.shop-order-figure figcaption span {
  color: var(--text);
  font-size: 17px;
}

.shop-order-figure figcaption small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.shop-archive-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.shop-archive-card {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.shop-archive-card > div {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #f1f1ef;
  overflow: hidden;
}

.shop-archive-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 220ms ease;
}

.shop-archive-slides {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.shop-archive-slides > img {
  display: none;
  grid-area: 1 / 1;
}

.shop-archive-slides > img.is-active {
  display: block;
}

.shop-archive-controls {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 5px;
  transform: translateX(-50%);
  background: rgba(10, 10, 11, 0.7);
  color: #fff;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 10px;
}

.shop-archive-controls button {
  display: grid;
  width: 24px;
  height: 24px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.shop-archive-controls button:hover,
.shop-archive-controls button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.shop-archive-card--postcards img {
  object-fit: contain;
}

.shop-archive-card--stickers .shop-archive-slides {
  position: relative;
  overflow: hidden;
}

.shop-archive-card--stickers .shop-archive-slides > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.shop-archive-card--stickers .shop-archive-slides > img:first-child {
  object-position: center 50%;
}

.shop-archive-card--stickers .shop-archive-slides > img:nth-child(2) {
  object-position: center 64%;
}

.shop-archive-card:hover img {
  transform: scale(1.018);
}

.shop-archive-card--zoom-medium img {
  object-fit: contain;
  transform: scale(2.8);
}

.shop-archive-card--zoom-medium:hover img {
  transform: scale(2.84);
}

.shop-archive-card--zoom-large img {
  object-fit: contain;
  transform: scale(4.4);
}

.shop-archive-card--zoom-large:hover img {
  transform: scale(4.46);
}

.shop-archive-card figcaption {
  position: relative;
  min-height: 92px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  gap: 4px 12px;
}

.shop-archive-card figcaption span {
  grid-column: 1 / -1;
  color: var(--accent);
  font-family: var(--brand-font);
  font-size: 11px;
  letter-spacing: 0.05em;
}

.shop-archive-card figcaption strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

.shop-archive-card figcaption small {
  align-self: center;
  padding: 3px 7px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 10px;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .shop-current,
  .shop-section-heading,
  .shop-access-layout {
    grid-template-columns: 1fr;
  }

  .shop-current-copy {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .shop-section-heading {
    gap: 18px;
  }

  .shop-access-layout {
    gap: 1px;
  }

  .shop-order-figure {
    border-top: 1px solid var(--line);
  }

  .shop-archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Expanded group card: keep the compact five-card entry grid, enrich only the opened dialog. */
.group-letter-dialog .group-letter-shell {
  padding: 0;
}

.group-letter-layout {
  display: grid;
  grid-template-columns: minmax(310px, .62fr) minmax(0, 1.38fr);
  min-height: min(760px, calc(90dvh - 2px));
}

.group-letter-poster {
  position: sticky;
  top: 0;
  align-self: start;
  height: calc(90dvh - 2px);
  margin: 0;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: #f3f3f1;
}

.group-letter-poster > a {
  display: block;
  width: 100%;
  height: 100%;
}

.group-letter-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.group-letter-poster figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 4px 8px;
  background: rgba(15, 15, 17, .66);
  color: #fff;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 10px;
}

.group-letter-profile {
  min-width: 0;
  padding: 42px 54px 50px;
}

.group-letter-profile .group-letter-header > img {
  background: transparent;
  filter: brightness(0) saturate(100%);
}

:root[data-theme="dark"] .group-letter-profile .group-letter-header > img {
  filter: none;
}

.group-letter-profile-lead {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.85;
}

.group-letter-work,
.group-letter-training-plan {
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}

.group-letter-work h3,
.group-letter-training-plan h3 {
  margin: 7px 0 18px;
  font-size: clamp(27px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.25;
}

.group-letter-work-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.group-letter-work-list li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.group-letter-work-list span {
  color: var(--accent);
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
}

.group-letter-work-list p,
.group-letter-training-plan > p:not(.group-letter-kicker) {
  margin: 0;
  color: var(--muted);
  line-height: 1.82;
}

.group-letter-profile .group-letter-lesson {
  padding-top: 32px;
}

@media (max-width: 860px) {
  .group-letter-dialog .group-letter-shell {
    padding: 0;
  }

  .group-letter-layout {
    grid-template-columns: 1fr;
  }

  .group-letter-poster {
    position: relative;
    height: auto;
    aspect-ratio: 16 / 9;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .group-letter-profile {
    padding: 34px 28px 40px;
  }
}

@media (max-width: 560px) {
  .group-letter-dialog .group-letter-shell {
    padding: 0;
  }

  .group-letter-poster {
    aspect-ratio: 4 / 3;
  }

  .group-letter-profile {
    padding: 28px 18px 34px;
  }

  .group-letter-work-list li {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
  }
}

/* Competition photo archive */
.competition-filter-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(118px, 1fr)) auto;
  align-items: end;
  gap: 10px;
  padding-bottom: 3px;
}

.competition-filter-bar label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.competition-filter-bar label > span {
  color: var(--muted);
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 11px;
}

.competition-filter-bar select {
  width: 100%;
  min-height: 38px;
  padding: 0 34px 0 11px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.competition-filter-bar select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.competition-filter-bar output {
  min-width: 64px;
  padding: 0 0 10px 8px;
  color: var(--accent);
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 12px;
  white-space: nowrap;
}

.gallery-single-filter-bar {
  width: min(100%, 340px);
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: end;
  padding-bottom: 0;
}

.gallery-single-filter-bar output {
  min-width: 58px;
}

.gallery-filter-empty {
  margin-top: 30px;
}

.gallery-filter-empty[hidden] {
  display: none;
}

.competition-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
}

.competition-photo-item {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: zoom-in;
  transition: border-color 180ms ease, transform 180ms ease;
}

.competition-photo-item:hover,
.competition-photo-item:focus-visible {
  border-color: var(--accent);
  transform: translateY(-3px);
}

.competition-photo-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.competition-photo-item > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface);
  transition: transform 220ms ease;
}

.competition-photo-item:hover > img,
.competition-photo-item:focus-visible > img {
  transform: scale(1.02);
}

.competition-photo-caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2px 10px;
  min-height: 72px;
  padding: 11px 13px 12px;
  border-top: 1px solid var(--line);
}

.competition-photo-caption small {
  grid-column: 1 / -1;
  color: var(--accent);
  font-family: var(--brand-font);
  font-size: 10px;
  line-height: 1.35;
}

.competition-photo-caption strong {
  min-width: 0;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
}

.competition-photo-caption > span {
  color: var(--muted);
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 10px;
  line-height: 1.35;
  white-space: nowrap;
}

.competition-gallery-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.competition-load-more {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.competition-load-more:hover,
.competition-load-more:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.competition-gallery-footer > span {
  color: var(--muted);
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 12px;
}

.competition-empty {
  margin-top: 28px;
}

.competition-gallery-footer[hidden],
.competition-load-more[hidden],
.competition-empty[hidden] {
  display: none;
}

@media (max-width: 1180px) {
  .competition-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .competition-filter-bar output {
    grid-column: 1 / -1;
    padding: 0;
  }

  .competition-photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .competition-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .competition-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .competition-filter-bar {
    grid-template-columns: 1fr;
  }

  .competition-photo-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .shop-page {
    padding-bottom: 70px;
  }

  .shop-current,
  .shop-access,
  .shop-archive {
    width: min(var(--max-width), calc(100% - 24px));
  }

  .shop-current {
    margin-top: 30px;
  }

  .shop-current-visual {
    min-height: 310px;
    padding: 20px;
  }

  .shop-current-copy {
    padding: 32px 22px 36px;
  }

  .shop-current-copy > p:not(.page-label),
  .shop-section-heading > p {
    font-size: 14px;
  }

  .shop-access,
  .shop-archive {
    margin-top: 68px;
  }

  .shop-access-layout,
  .shop-archive-grid {
    grid-template-columns: 1fr;
  }

  .shop-order-figure {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .shop-order-figure > img {
    max-height: 620px;
  }

  .shop-order-figure figcaption {
    padding: 17px 18px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .team-photo-credit {
    bottom: 78px;
  }
}

.shop-hero {
  grid-template-columns: minmax(0, 1fr) 190px;
  align-items: center;
}

.shop-hero-qr {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0;
  justify-self: end;
}

.shop-hero-qr img {
  width: 92px;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
}

.shop-hero-qr figcaption {
  width: 6em;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.shop-current {
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.92fr);
  margin-top: 30px;
}

.shop-current-visual {
  min-height: 340px;
  padding: 24px 34px 48px;
}

.shop-product-slides {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 268px;
  place-items: center;
}

.shop-product-slides > img {
  display: none;
  grid-area: 1 / 1;
  width: 100%;
  height: 268px;
  object-fit: contain;
}

.shop-product-slides > img.is-active {
  display: block;
}

.shop-carousel-controls {
  position: absolute;
  left: 50%;
  bottom: 11px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 11px;
  transform: translateX(-50%);
  color: #171719;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 11px;
}

.shop-carousel-controls button {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(16, 16, 18, 0.24);
  background: rgba(255, 255, 255, 0.72);
  color: #171719;
  cursor: pointer;
}

.shop-carousel-controls button:hover,
.shop-carousel-controls button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.shop-current-visual > figcaption {
  top: 12px;
  bottom: auto;
}

.shop-current-copy {
  padding: 31px 42px;
}

.shop-current-copy h2 {
  font-size: clamp(27px, 2.5vw, 36px);
  line-height: 1.2;
}

.shop-current-copy h2 span {
  display: block;
  white-space: nowrap;
}

.shop-current-copy h2 span + span {
  margin-top: 2px;
}

.shop-current-copy > p:not(.page-label) {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.75;
  text-wrap: balance;
}

.shop-product-facts {
  margin-top: 20px;
}

.shop-archive {
  margin-top: 58px;
}

.shop-section-heading {
  grid-template-columns: minmax(250px, 0.72fr) minmax(330px, 1.28fr);
  gap: 38px;
  padding-bottom: 18px;
}

.shop-section-heading h2 {
  font-size: clamp(26px, 2.6vw, 36px);
}

.shop-section-heading > p {
  white-space: nowrap;
}

@media (max-width: 980px) {
  .shop-hero {
    grid-template-columns: minmax(0, 1fr) 190px;
  }

  .shop-current {
    grid-template-columns: 1fr;
  }

  .shop-current-copy {
    border-top: 1px solid var(--line);
  }

  .shop-section-heading {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .shop-hero {
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 16px;
  }

  .shop-hero-qr {
    display: block;
  }

  .shop-hero-qr img {
    width: 82px;
  }

  .shop-hero-qr figcaption {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .shop-current-visual {
    min-height: 300px;
    padding: 18px 18px 46px;
  }

  .shop-product-slides {
    min-height: 236px;
  }

  .shop-product-slides > img {
    height: 236px;
  }

  .shop-current-copy h2 {
    font-size: 23px;
  }

  .shop-current-copy h2 span {
    white-space: normal;
  }

  .shop-archive {
    margin-top: 50px;
  }

  .shop-section-heading > p {
    white-space: normal;
  }
}

.org-card-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.org-card-head h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
}

.org-lane-track--five .org-card-head h3 {
  font-size: 17px;
  white-space: nowrap;
}

.org-card-title > span {
  color: var(--accent);
  font-size: 12px;
  line-height: 1.5;
}

.org-card-logo {
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--accent);
  font-size: 30px;
  line-height: 1;
}

.org-card-logo img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: brightness(0) saturate(100%);
}

.org-card-logo--pair {
  grid-template-columns: repeat(2, 1fr);
  width: 56px;
  flex-basis: 56px;
}

.org-card-logo--pair img {
  width: 27px;
  height: 27px;
}

:root[data-theme="dark"] .org-card-logo img {
  filter: brightness(0) saturate(100%) invert(1);
}

:root[data-theme="dark"] .org-card-logo--pair img {
  filter: none;
}

.org-card-detail {
  font-size: 13px;
  line-height: 1.65;
}

.org-card-tags,
.org-child-units {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.org-card-tag {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
}

.org-child-units .org-card-tag {
  flex: 1 1 100px;
  justify-content: center;
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}

.org-card--management {
  min-height: 188px;
  border-color: var(--accent);
  background: var(--accent-soft);
}

.org-card--management::before,
.org-card--global::before {
  background: var(--brand-divider);
}

.org-card--tone-blue {
  background: color-mix(in srgb, var(--card-bg) 91%, #6e9dca);
}

.org-card--tone-blue::before {
  background: #6e9dca;
}

.org-card--tone-teal {
  background: color-mix(in srgb, var(--card-bg) 91%, #64aaa0);
}

.org-card--tone-teal::before {
  background: #64aaa0;
}

.org-card--tone-green {
  background: color-mix(in srgb, var(--card-bg) 91%, #62a66f);
}

.org-card--tone-green::before {
  background: #62a66f;
}

.org-card--tone-amber {
  background: color-mix(in srgb, var(--card-bg) 91%, #c59a4b);
}

.org-card--tone-amber::before {
  background: #c59a4b;
}

.org-card--tone-violet {
  background: color-mix(in srgb, var(--card-bg) 91%, #8976b2);
}

.org-card--tone-violet::before {
  background: #8976b2;
}

.org-card--tone-rose {
  background: color-mix(in srgb, var(--card-bg) 91%, #bd6f84);
}

.org-card--tone-rose::before {
  background: #bd6f84;
}

.org-management-sections {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 18px;
}

.org-management-sections > div {
  display: grid;
  align-content: start;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.org-management-sections strong {
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
}

.org-card--advisor::before {
  background: #9a6bbd;
}

.org-card--core::before {
  background: #c49a36;
}

.org-card--formal::before {
  background: #9aa1aa;
}

.org-card--trainee::before {
  background: #b9784b;
}

.organization-context {
  display: grid;
  grid-template-columns: minmax(120px, 0.22fr) minmax(0, 1fr);
  gap: 22px;
  min-height: 72px;
  padding: 17px 0 0;
}

.organization-context strong {
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
}

.organization-context span {
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 1080px) {
  .about-subpage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .organization-intro {
    grid-template-columns: minmax(0, 0.8fr) minmax(320px, 1fr);
    gap: 36px;
  }

  .org-lane {
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 24px;
  }

  .org-lane-track--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .org-lane-track--five {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .organization-section {
    padding-top: 36px;
  }

  .organization-intro {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 22px;
  }

  .organization-intro h1,
  .organization-intro h2 {
    font-size: 29px;
  }

  .organization-intro > p {
    min-width: 0;
    font-size: 15px;
  }

  .organization-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .organization-tabs button:nth-child(2) {
    border-right: 0;
  }

  .organization-tabs button:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .organization-stage {
    min-height: 0;
  }

  .org-lane {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 0;
  }

  .org-lane-label {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .org-lane-track--two,
  .org-lane-track--three,
  .org-lane-track--four,
  .org-lane-track--five {
    grid-template-columns: 1fr;
  }

  .org-card {
    min-height: 0;
  }

  .org-management-sections,
  .organization-context {
    grid-template-columns: 1fr;
  }

  .organization-context {
    gap: 4px;
    min-height: 94px;
  }
}

/* Polished technical group cards: normalized icon canvas and fixed baselines */
.group-grid {
  align-items: stretch;
}
.group-grid .entry-card {
  display: grid;
  grid-template-rows: 174px 42px 52px minmax(112px, 1fr);
  align-content: start;
  justify-content: stretch;
  min-height: 438px;
  padding: 26px 22px 28px;
}
.group-grid .entry-card figure {
  width: 100%;
  height: 174px;
  margin: 0;
  display: grid;
  place-items: center;
  background: var(--surface);
}
.group-grid .entry-card figure img {
  width: 142px;
  height: 142px;
  object-fit: contain;
}
.group-grid .entry-card span {
  display: flex;
  align-items: end;
  min-height: 42px;
  margin: 0;
  line-height: 1.35;
}
.group-grid .entry-card strong {
  display: flex;
  align-items: start;
  min-height: 52px;
  margin-top: 0;
  font-size: 23px;
  line-height: 1.28;
}
.group-grid .entry-card small {
  display: block;
  margin-top: 0;
  line-height: 1.72;
}
.group-grid .entry-card figure img {
  filter: brightness(0) saturate(100%);
}

/* Global recruitment letter. */
html.has-recruit-letter {
  overflow: hidden;
}

.recruit-letter-trigger {
  position: fixed;
  top: 50%;
  right: clamp(30px, 3.2vw, 58px);
  bottom: auto;
  z-index: 19;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, var(--line));
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--accent);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}

.recruit-letter-trigger i {
  font-size: 25px;
  line-height: 1;
}

.recruit-letter-trigger:hover,
.recruit-letter-trigger:focus-visible {
  background: var(--accent);
  color: #111;
  transform: translate(-4px, -50%);
  outline: 0;
}

body[data-page="home"] .home-side-shortcuts {
  position: fixed;
  top: 50%;
  right: calc(clamp(30px, 3.2vw, 58px) - 5px);
  z-index: 19;
  display: grid;
  gap: 12px;
  transform: translateY(-50%);
}

body[data-page="home"] .home-side-shortcut {
  position: relative;
  display: grid;
  place-items: center;
  width: 49px;
  height: 49px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, var(--line));
  border-radius: 11px;
  background: var(--card-bg);
  color: var(--accent);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
  text-decoration: none;
  cursor: pointer;
  transform: none;
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}

body[data-page="home"] .home-side-shortcut i {
  font-size: 25px;
  line-height: 1;
}

body[data-page="home"] .home-side-shortcut:hover,
body[data-page="home"] .home-side-shortcut:focus-visible {
  background: var(--accent);
  color: #111;
  transform: translateX(-4px);
  outline: 0;
}

body[data-page="home"] .recruit-letter-trigger {
  position: relative;
  inset: auto;
  animation: recruit-letter-attention 5s ease-out infinite;
}

body[data-page="home"] .recruit-letter-trigger:hover,
body[data-page="home"] .recruit-letter-trigger:focus-visible {
  animation-play-state: paused;
}

@media (hover: hover) and (pointer: fine) {
  body[data-page="home"] .home-side-shortcut::before {
    position: absolute;
    top: 50%;
    right: calc(100% + 15px);
    width: max-content;
    padding: 8px 13px;
    border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
    border-radius: 4px;
    content: attr(data-shortcut-label);
    background: var(--card-bg);
    color: var(--text);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.04em;
    opacity: 0;
    pointer-events: none;
    transform: translate(10px, -50%);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  body[data-page="home"] .home-side-shortcut::after {
    position: absolute;
    top: 50%;
    right: calc(100% + 8px);
    width: 12px;
    height: 12px;
    border-top: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
    border-right: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
    content: "";
    background: var(--card-bg);
    opacity: 0;
    pointer-events: none;
    transform: translate(10px, -50%) rotate(45deg);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  body[data-page="home"] .home-side-shortcut:hover::before,
  body[data-page="home"] .home-side-shortcut:hover::after,
  body[data-page="home"] .home-side-shortcut:focus-visible::before,
  body[data-page="home"] .home-side-shortcut:focus-visible::after {
    opacity: 1;
  }

  body[data-page="home"] .home-side-shortcut:hover::before,
  body[data-page="home"] .home-side-shortcut:focus-visible::before {
    transform: translate(0, -50%);
  }

  body[data-page="home"] .home-side-shortcut:hover::after,
  body[data-page="home"] .home-side-shortcut:focus-visible::after {
    transform: translate(0, -50%) rotate(45deg);
  }
}

@keyframes recruit-letter-attention {
  0%, 72%, 100% {
    border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18), 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
  }
  80% {
    border-color: var(--accent);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18), 0 0 0 7px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 58%, transparent);
  }
  90% {
    border-color: var(--accent);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18), 0 0 0 2px color-mix(in srgb, var(--accent) 8%, transparent), 0 0 12px color-mix(in srgb, var(--accent) 32%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .recruit-letter-trigger {
    animation: none;
  }
}

.recruit-letter-dialog {
  width: min(1080px, calc(100% - 32px));
  max-width: none;
  max-height: min(88dvh, 900px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card-bg);
  color: var(--text);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
}

.recruit-letter-dialog::backdrop {
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(3px);
}

.recruit-letter-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(88dvh, 900px);
}

.recruit-letter-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 238px;
  min-height: 0;
}

.recruit-letter-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--card-bg);
}

.recruit-letter-header .page-label {
  margin-bottom: 5px;
  font-size: 10px;
}

.recruit-letter-header h2 {
  margin: 0;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0;
}

.recruit-letter-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.recruit-letter-close:hover,
.recruit-letter-close:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: 0;
}

.recruit-letter-close i {
  font-size: 21px;
  line-height: 1;
}

.recruit-letter-content {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 28px 36px;
  scrollbar-color: var(--accent) var(--surface);
}

.recruit-letter-content > * {
  width: min(100%, 68ch);
  margin-right: auto;
  margin-left: auto;
}

.recruit-letter-content p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.9;
  text-indent: 2em;
}

.recruit-letter-content p + p {
  margin-top: 10px;
}

.recruit-letter-content strong {
  color: var(--text);
  font-weight: 600;
}

.recruit-letter-content .recruit-letter-lead,
.recruit-letter-content .recruit-letter-closing {
  color: var(--text);
}

.recruit-letter-content .recruit-letter-lead {
  margin-bottom: 15px;
}

.recruit-letter-content .recruit-letter-closing {
  margin-top: 18px;
}

.recruit-letter-opening {
  padding: 30px 0 26px;
}

.recruit-letter-opening p:first-child,
.recruit-letter-opening p:last-child {
  color: var(--text);
}

.recruit-letter-content section {
  padding: 30px 0 28px;
  border-top: 1px solid var(--line);
}

.recruit-letter-content h3 {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  margin: 0 0 18px;
  font-size: 21px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 0;
}

.recruit-letter-content h3 span {
  color: var(--accent);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 13px;
  font-weight: 500;
}

.recruit-letter-content h4 {
  margin: 27px 0 13px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: 0;
}

.recruit-letter-lines,
.recruit-letter-questions {
  margin: 16px 0;
  padding: 13px 16px;
  border-left: 2px solid var(--accent);
  background: var(--surface);
}

.recruit-letter-lines p,
.recruit-letter-questions p {
  color: var(--text);
  text-indent: 0;
}

.recruit-letter-lines p + p,
.recruit-letter-questions p + p {
  margin-top: 3px;
}

.recruit-letter-content blockquote {
  margin: 22px 0;
  padding: 17px 20px;
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  color: var(--text);
  font-size: 20px;
  text-align: center;
}

.recruit-letter-content .recruit-letter-callout {
  padding: 15px 18px;
  border: 0;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  font-size: 16px;
  line-height: 1.8;
  text-align: left;
  text-indent: 0;
}

.recruit-letter-content .recruit-letter-warning {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.recruit-letter-content .recruit-letter-dialogue {
  width: min(100%, 30em);
  margin-right: auto;
  margin-left: auto;
  font-size: 18px;
  font-style: italic;
}

.recruit-letter-signature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 0 4px;
  border-top: 1px solid var(--line);
  color: var(--text);
}

.recruit-letter-signature a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
}

.recruit-letter-toc {
  min-height: 0;
  overflow-y: auto;
  padding: 28px 20px;
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 74%, var(--card-bg));
  scrollbar-width: none;
}

.recruit-letter-toc::-webkit-scrollbar {
  display: none;
}

.recruit-letter-toc > p {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}

.recruit-letter-toc ol,
.recruit-letter-toc li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.recruit-letter-toc li + li {
  margin-top: 3px;
}

.recruit-letter-toc button {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 7px;
  width: 100%;
  padding: 9px 9px 9px 10px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  line-height: 1.55;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.recruit-letter-toc button span {
  color: var(--accent);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  line-height: 1.85;
}

.recruit-letter-toc button:hover,
.recruit-letter-toc button:focus-visible,
.recruit-letter-toc button.is-active {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text);
  outline: 0;
}

@media (max-width: 820px) {
  .recruit-letter-dialog {
    width: min(760px, calc(100% - 24px));
  }

  .recruit-letter-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .recruit-letter-toc {
    display: none;
  }
}

@media (max-width: 620px) {
  .recruit-letter-trigger {
    top: 50%;
    right: 12px;
    bottom: auto;
    width: 48px;
    height: 48px;
    transform: translateY(-50%);
  }

  body[data-page="home"] .home-side-shortcuts {
    right: 7px;
    gap: 10px;
  }

  body[data-page="home"] .home-side-shortcut {
    width: 43px;
    height: 43px;
    border-radius: 10px;
  }

  body[data-page="home"] .recruit-letter-trigger {
    top: auto;
    right: auto;
    transform: none;
  }

  body[data-page="home"] .home-side-shortcut:hover,
  body[data-page="home"] .home-side-shortcut:focus-visible {
    transform: translateX(-3px);
  }

  .recruit-letter-dialog {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
  }

  .recruit-letter-shell {
    max-height: calc(100dvh - 16px);
  }

  .recruit-letter-header {
    gap: 14px;
    padding: 18px 18px 16px;
  }

  .recruit-letter-header h2 {
    font-size: 20px;
  }

  .recruit-letter-content {
    padding: 0 18px 28px;
  }

  .recruit-letter-opening {
    padding-top: 24px;
  }

  .recruit-letter-content section {
    padding: 25px 0 23px;
  }

  .recruit-letter-content h3 {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 7px;
    font-size: 18px;
  }

  .recruit-letter-content p {
    font-size: 14px;
    line-height: 1.85;
  }

  .recruit-letter-signature {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}

:root[data-theme="dark"] .group-grid .entry-card figure img {
  filter: none;
}

/* Technical group selection colors mirror the organization diagram. */
.group-grid .entry-card:nth-child(1) {
  --group-tone: #c59a4b;
}

.group-grid .entry-card:nth-child(2) {
  --group-tone: #6e9dca;
}

.group-grid .entry-card:nth-child(3) {
  --group-tone: #8976b2;
}

.group-grid .entry-card:nth-child(4) {
  --group-tone: #62a66f;
}

.group-grid .entry-card:nth-child(5) {
  --group-tone: #bd6f84;
}

.group-grid .entry-card:hover,
.group-grid .entry-card:focus-visible,
.group-grid .entry-card:active,
.group-grid .entry-card.is-active {
  border-color: var(--group-tone);
  background: color-mix(in srgb, var(--card-bg) 91%, var(--group-tone));
  box-shadow: 0 14px 34px color-mix(in srgb, transparent 82%, var(--group-tone));
}

.group-grid .entry-card:hover figure,
.group-grid .entry-card:focus-visible figure,
.group-grid .entry-card:active figure,
.group-grid .entry-card.is-active figure {
  background: color-mix(in srgb, var(--surface) 91%, var(--group-tone));
}

.group-grid .entry-card:focus-visible {
  outline: 2px solid var(--group-tone);
  outline-offset: 3px;
}

@media (max-width: 1100px) {
  .group-grid .entry-card {
    grid-template-rows: 160px 38px 48px auto;
    min-height: 400px;
  }
  .group-grid .entry-card figure {
    height: 160px;
  }
  .group-grid .entry-card figure img {
    width: 132px;
    height: 132px;
  }
}
@media (max-width: 860px) {
  .group-grid .entry-card {
    grid-template-rows: 148px auto auto auto;
    min-height: auto;
  }
  .group-grid .entry-card figure {
    height: 148px;
  }
}

/* Compact method list with image slots */
.method-list {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.method-list article {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(220px, 300px);
  gap: 28px;
  align-items: center;
  min-height: 168px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.method-list article:first-child {
  border-top: 0;
}
.method-list span {
  color: var(--accent);
  font-size: 22px;
  line-height: 1.1;
  font-weight: 500;
}
.method-list h2 {
  margin: 0;
  max-width: 820px;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.28;
  font-weight: 500;
}
.method-list p {
  max-width: 780px;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.7;
}
.method-media {
  align-self: stretch;
  min-height: 124px;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.method-media span {
  color: var(--subtle);
  font-size: 13px;
  letter-spacing: 0.08em;
}
.method-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 980px) {
  .method-list article {
    grid-template-columns: 54px minmax(0, 1fr);
  }
  .method-media {
    grid-column: 2;
    min-height: 150px;
  }
}
@media (max-width: 680px) {
  .method-list article {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px 0;
  }
  .method-list h2 {
    font-size: 22px;
  }
  .method-media {
    grid-column: auto;
  }
}

/* Smaller method typography refinement */
.method-list article {
  min-height: 150px;
  padding: 18px 0;
}
.method-list span {
  font-size: 19px;
}
.method-list h2 {
  font-size: clamp(19px, 1.55vw, 24px);
  line-height: 1.32;
}
.method-list p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.65;
}
.method-media {
  min-height: 110px;
}
@media (max-width: 680px) {
  .method-list h2 {
    font-size: 20px;
  }
}

/* Match mechanical subsite dropdown menu typography */
.nav-dropdown a {
  font-size: 14px;
  line-height: 1.4;
}

/* Home quote and acknowledgements reused from the mechanical group site */
.home-quote {
  position: relative;
  min-height: 136px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  border-top: 0;
  border-bottom: 0;
  padding: 16px 108px 16px 128px;
  text-align: initial;
}

.home-quote::before {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 80%;
  height: 3px;
  border-radius: 999px;
  content: "";
  background: linear-gradient(90deg, rgba(197, 154, 75, 0) 0%, rgba(197, 154, 75, .28) 15%, rgba(217, 177, 98, .78) 38%, #e4bd70 50%, rgba(217, 177, 98, .78) 62%, rgba(197, 154, 75, .28) 85%, rgba(197, 154, 75, 0) 100%);
  filter: drop-shadow(0 0 7px rgba(213, 172, 91, .28));
  transform: translateX(-50%);
  pointer-events: none;
}

.home-quote::after {
  position: absolute;
  right: 0;
  bottom: -10px;
  left: 0;
  height: 3px;
  border-radius: 999px;
  content: "";
  background: linear-gradient(
    90deg,
    #ff3f4c 0%,
    rgba(255, 63, 76, .86) 20%,
    rgba(255, 63, 76, 0) 48%,
    rgba(47, 101, 255, 0) 52%,
    rgba(47, 101, 255, .86) 80%,
    #2f65ff 100%
  );
  filter: drop-shadow(-10px 0 7px rgba(255, 63, 76, .18)) drop-shadow(10px 0 7px rgba(47, 101, 255, .18));
  pointer-events: none;
}

.quote-stage {
  min-width: 0;
  min-height: 102px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 360ms ease, transform 360ms ease;
}

.quote-stage.is-switching {
  opacity: 0;
  transform: translateY(4px);
}

.quote-stage p {
  color: var(--text);
  font-size: 24px;
  font-style: italic;
  line-height: 1.55;
  letter-spacing: 0;
  text-wrap: balance;
}

.quote-stage span {
  display: block;
  margin-top: 2px;
  color: var(--subtle);
  font-size: 14px;
}

.quote-robomaster-link {
  position: absolute;
  top: 50%;
  left: 50px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--text);
  opacity: 0.68;
  transform: translateY(-50%);
  transition: color 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.quote-robomaster-link:hover,
.quote-robomaster-link:focus-visible {
  color: var(--accent);
  opacity: 1;
  transform: translateY(-50%) scale(1.06);
}

.home-link-mark {
  position: absolute;
  top: 24px;
  right: 26px;
  width: 30px;
  height: 30px;
  display: block;
  background: currentColor;
  -webkit-mask: var(--home-link-mask) center / contain no-repeat;
  mask: var(--home-link-mask) center / contain no-repeat;
  -webkit-mask-image: var(--home-link-mask);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--home-link-mask);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.home-quote .quote-robomaster-link .home-link-mark {
  position: static;
  width: 42px;
  height: 40px;
  display: block;
  margin: 0;
  color: inherit;
  background-color: currentColor;
}

.home-link-mark--robomaster {
  --home-link-mask: url("../images/brand/group-icons/robomaster.svg");
}

.home-link-mark--schedule {
  --home-link-mask: url("../images/brand/external/rm-schedule.png");
  -webkit-mask-size: 165%;
  mask-size: 165%;
}

.home-link-mark--ladder {
  --home-link-mask: url("../images/brand/external/rm-ladder-logo.svg");
}

.home-link-logo {
  position: absolute;
  top: 50%;
  right: 22px;
  width: 44px;
  height: 44px;
  display: block;
  overflow: visible;
  color: var(--text);
  fill: currentColor;
  object-fit: contain;
  opacity: 0.78;
  transform: translateY(-50%);
  transition: color 160ms ease, filter 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.home-link-logo--image {
  filter: brightness(0);
}

:root[data-theme="dark"] .home-link-logo--image {
  filter: brightness(0) invert(1);
}

.home-related-grid a:hover .home-link-logo,
.home-related-grid a:focus-visible .home-link-logo {
  color: var(--accent);
  opacity: 1;
  transform: translateY(-50%) scale(1.06);
}

.home-related-grid a:hover .home-link-logo--image,
.home-related-grid a:focus-visible .home-link-logo--image {
  filter: brightness(0) saturate(100%) invert(25%) sepia(95%) saturate(3907%) hue-rotate(322deg) brightness(94%) contrast(96%);
}

:root[data-theme="dark"] .home-related-grid a:hover .home-link-logo--image,
:root[data-theme="dark"] .home-related-grid a:focus-visible .home-link-logo--image {
  filter: brightness(0) saturate(100%) invert(89%) sepia(34%) saturate(1018%) hue-rotate(75deg) brightness(102%) contrast(98%);
}

.home-quote .quote-robomaster-link .home-link-logo {
  position: static;
  width: 42px;
  height: 40px;
  color: inherit;
  opacity: 1;
  transform: none;
}

.quote-random-button {
  transform: translateX(20px);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--accent);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.quote-random-button:hover,
.quote-random-button:focus-visible {
  border-color: var(--accent);
  transform: translateX(20px) rotate(18deg);
}

.quote-random-button svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.quote-golden-rain-button {
  position: absolute;
  top: 50%;
  right: 17px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #d1a556;
  opacity: 0;
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.quote-golden-rain-button:hover,
.quote-golden-rain-button:focus-visible,
.quote-golden-rain-button.is-active {
  border-color: color-mix(in srgb, #d1a556 72%, var(--line));
  background: color-mix(in srgb, #d1a556 9%, var(--card-bg));
  color: #e4bd70;
  opacity: 1;
  box-shadow: 0 0 18px rgba(213, 172, 91, .18);
  outline: 0;
}

.quote-golden-rain-button:hover,
.quote-golden-rain-button:focus-visible {
  transform: translateY(-50%) scale(1.06);
}

.quote-golden-rain-button i {
  font-size: 20px;
  line-height: 1;
}

.golden-rain-canvas {
  position: fixed;
  z-index: 60;
  inset: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.golden-rain-canvas.is-active {
  opacity: 1;
}

@media (min-width: 861px) {
  .home-quote {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 128px;
  }

  .quote-random-button {
    position: absolute;
    top: 50%;
    right: 65px;
    transform: translateY(-50%);
  }

  .quote-random-button:hover,
  .quote-random-button:focus-visible {
    transform: translateY(-50%) rotate(18deg);
  }
}

@media (hover: none) {
  .quote-golden-rain-button {
    border-color: color-mix(in srgb, #d1a556 42%, var(--line));
    background: color-mix(in srgb, #d1a556 6%, var(--card-bg));
    opacity: 0.48;
  }
}

@media (max-width: 860px) {
  .quote-golden-rain-button {
    right: 40px;
    width: 32px;
    height: 32px;
    border-color: color-mix(in srgb, #d1a556 42%, var(--line));
    background: color-mix(in srgb, #d1a556 6%, var(--card-bg));
    opacity: 0.48;
    z-index: 2;
  }

  .quote-golden-rain-button i {
    font-size: 18px;
  }
}

.acknowledgements {
  padding-bottom: 76px;
}

/* Culture inheritance and standalone talent portrait */
.culture-page-hero > p,
.persona-page-hero > p {
  max-width: 520px;
}

.culture-kicker {
  margin: 0 0 10px;
  color: var(--accent);
  font-family: var(--font-sans, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.culture-manifesto {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.2fr);
  column-gap: clamp(48px, 7vw, 110px);
  row-gap: 18px;
  align-items: start;
  padding: 0 0 42px;
  border-bottom: 1px solid var(--line);
}

.culture-manifesto .culture-kicker {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.culture-manifesto h2 {
  margin: 0;
  font-size: clamp(24px, 2.05vw, 32px);
  font-weight: 500;
  line-height: 1.38;
  text-align: left;
  white-space: nowrap;
}

.culture-manifesto > p:not(.culture-kicker) {
  color: var(--text);
  font-size: 17px;
  line-height: 2;
}

.culture-manifesto blockquote {
  grid-column: 1 / -1;
  margin: 18px 0 0;
  padding: 24px 30px;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  color: var(--text);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.75;
}

.culture-section-heading {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr);
  gap: clamp(40px, 7vw, 110px);
  align-items: end;
  margin-bottom: 30px;
}

.culture-section-heading h2,
.culture-contract-intro h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.25;
}

.culture-section-heading > p {
  max-width: 620px;
  padding-bottom: 4px;
  font-size: 16px;
}

.culture-motive-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.culture-motive-grid article {
  min-height: 230px;
  padding: 28px 24px;
  border-right: 1px solid var(--line);
}

.culture-motive-grid article:last-child {
  border-right: 0;
}

.culture-motive-grid span,
.culture-pathway-list > li > span {
  color: var(--accent);
  font-family: var(--font-sans, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.culture-motive-grid h3,
.culture-pathway-list h3,
.culture-contract-list h3 {
  margin: 36px 0 10px;
  font-size: 22px;
  font-weight: 500;
}

.culture-motive-grid p,
.culture-pathway-list p,
.culture-contract-list p {
  font-size: 15px;
  line-height: 1.85;
}

.culture-pathway-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.culture-pathway-list li {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 18px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.culture-pathway-list > li > span {
  padding-top: 7px;
  font-size: 16px;
}

.culture-pathway-list h3 {
  margin: 0 0 8px;
}

.culture-pathway-list p {
  max-width: 980px;
}

.culture-contract {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(480px, 1.2fr);
  gap: clamp(44px, 7vw, 110px);
  padding: 42px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.culture-contract-intro > p:not(.culture-kicker) {
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.95;
}

.culture-contract-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.culture-contract-list article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  min-height: 170px;
  padding: 24px;
  background: var(--bg);
}

.culture-contract-list i {
  color: var(--accent);
  font-size: 26px;
}

.culture-contract-list h3 {
  margin: 0 0 8px;
  font-size: 20px;
}

.culture-pillar-list {
  border-top: 1px solid var(--line);
}

.culture-pillar {
  --pillar-tone: var(--accent);
  display: grid;
  grid-template-columns: minmax(230px, 0.42fr) minmax(0, 1.58fr);
  gap: clamp(38px, 6vw, 96px);
  padding: 38px 0 42px;
  border-bottom: 1px solid var(--line);
}

.culture-pillar--equal {
  --pillar-tone: #5ce092;
}

.culture-pillar--inheritance {
  --pillar-tone: #68a9ed;
}

.culture-pillar--engineering {
  --pillar-tone: #e9a85f;
}

.culture-pillar-head {
  position: relative;
  align-self: start;
  min-height: 150px;
  padding: 12px 20px 16px 0;
  border-right: 2px solid var(--pillar-tone);
}

.culture-pillar-head > span {
  display: inline-block;
  margin-bottom: 28px;
  color: var(--pillar-tone);
  font-family: var(--font-sans, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.culture-pillar-head > i {
  position: absolute;
  top: 6px;
  right: 18px;
  color: var(--pillar-tone);
  font-size: 31px;
  line-height: 1;
  opacity: 0.82;
}

.culture-pillar-head > p {
  margin: 0 0 8px;
  color: var(--pillar-tone);
  font-family: var(--font-sans, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
}

.culture-pillar-head h3 {
  margin: 0;
  font-size: clamp(28px, 2.7vw, 40px);
  font-weight: 500;
  line-height: 1.25;
}

.culture-pillar-copy {
  min-width: 0;
}

.culture-pillar-lead {
  max-width: 980px;
  margin: 0 0 28px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.9;
}

.culture-pillar-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.culture-pillar-points > div {
  min-height: 150px;
  padding: 22px 22px 8px 0;
}

.culture-pillar-points > div + div {
  padding-left: 22px;
  border-left: 1px solid var(--line);
}

.culture-pillar-points strong {
  display: block;
  margin-bottom: 10px;
  color: var(--text);
  font-size: 17px;
  font-weight: 500;
}

.culture-pillar-points p {
  font-size: 14px;
  line-height: 1.85;
}

.culture-practice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.culture-practice-grid article {
  position: relative;
  min-height: 210px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.culture-practice-grid i {
  position: absolute;
  top: 25px;
  right: 26px;
  color: var(--accent);
  font-size: 28px;
  line-height: 1;
  opacity: 0.78;
}

.culture-practice-grid span {
  color: var(--accent);
  font-family: var(--font-sans, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.culture-practice-grid h3 {
  margin: 34px 0 10px;
  font-size: 21px;
  font-weight: 500;
}

.culture-practice-grid p {
  max-width: 420px;
  font-size: 14px;
  line-height: 1.85;
}

.culture-closing {
  max-width: 980px;
  text-align: center;
}

.culture-closing p {
  color: var(--text);
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.75;
}

.culture-closing small {
  display: inline;
  color: var(--subtle);
  font-size: 13px;
}

.culture-report-source {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.culture-report-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.culture-report-open i {
  color: var(--accent);
  font-size: 18px;
}

.culture-report-open:hover,
.culture-report-open:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent);
  outline: 0;
}

html.has-culture-report {
  overflow: hidden;
}

.culture-report-dialog {
  width: min(1120px, calc(100% - 32px));
  max-width: none;
  max-height: min(90dvh, 920px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card-bg);
  color: var(--text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}

.culture-report-dialog::backdrop {
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(4px);
}

.culture-report-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(90dvh, 920px);
}

.culture-report-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: start;
  padding: 28px 30px 24px;
  border-bottom: 1px solid var(--line);
}

.culture-report-label,
.culture-report-section-label {
  margin: 0 0 7px;
  color: var(--accent);
  font-family: var(--font-sans, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
}

.culture-report-header h2 {
  margin: 0;
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 500;
  line-height: 1.28;
}

.culture-report-header > div > p:last-child {
  max-width: 760px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.culture-report-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 21px;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.culture-report-close:hover,
.culture-report-close:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: 0;
  transform: rotate(5deg);
}

.culture-report-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  min-height: 0;
}

.culture-report-content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) transparent;
  scrollbar-width: thin;
  padding: 0 34px 38px;
}

.culture-report-content > section {
  max-width: 780px;
  margin: 0 auto;
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 24px;
}

.culture-report-content > section:last-child {
  border-bottom: 0;
}

.culture-report-content h3 {
  margin: 0 0 18px;
  font-size: clamp(24px, 2.1vw, 32px);
  font-weight: 500;
  line-height: 1.35;
}

.culture-report-content p,
.culture-report-content li {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.9;
}

.culture-report-content p {
  margin: 0 0 14px;
}

.culture-report-content strong {
  color: var(--text);
  font-weight: 600;
}

.culture-report-lead {
  color: var(--text) !important;
  font-size: 17px !important;
}

.culture-report-cards,
.culture-report-mechanisms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.culture-report-cards > div,
.culture-report-mechanisms > div {
  padding: 18px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 74%, transparent);
}

.culture-report-cards p,
.culture-report-mechanisms p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.75;
}

.culture-report-mechanisms i {
  display: block;
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 24px;
}

.culture-report-content blockquote {
  margin: 24px 0 0;
  padding: 18px 22px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--text);
  font-size: 17px;
  line-height: 1.85;
}

.culture-report-list {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.culture-report-list li {
  padding: 10px 0 10px 16px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 48%, var(--line));
}

.culture-report-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.culture-report-compare > div {
  padding: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.culture-report-compare span {
  color: var(--text);
  font-weight: 600;
}

.culture-report-compare ul {
  margin: 14px 0 0;
  padding-left: 1.2em;
}

.culture-report-note {
  padding: 14px 16px;
  border: 1px dashed color-mix(in srgb, var(--accent) 46%, var(--line));
  color: var(--subtle) !important;
  font-size: 13px !important;
}

.culture-report-toc {
  min-height: 0;
  overflow-y: auto;
  padding: 28px 18px;
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 74%, var(--card-bg));
}

.culture-report-toc > p {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.culture-report-toc button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  padding: 10px 9px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.culture-report-toc button span {
  color: var(--accent);
  font-family: var(--font-sans, sans-serif);
  font-size: 10px;
  line-height: 1.9;
}

.culture-report-toc button:hover,
.culture-report-toc button:focus-visible,
.culture-report-toc button.is-active {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text);
  outline: 0;
}

@media (max-width: 820px) {
  .culture-report-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .culture-report-toc {
    display: none;
  }
}

@media (max-width: 620px) {
  .culture-report-source {
    flex-direction: column;
    gap: 10px;
  }

  .culture-report-dialog {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
  }

  .culture-report-shell {
    max-height: calc(100dvh - 16px);
  }

  .culture-report-header {
    gap: 14px;
    padding: 22px 18px 18px;
  }

  .culture-report-close {
    width: 38px;
    height: 38px;
  }

  .culture-report-content {
    padding: 0 18px 28px;
  }

  .culture-report-content > section {
    padding: 28px 0;
  }

  .culture-report-cards,
  .culture-report-mechanisms,
  .culture-report-compare {
    grid-template-columns: 1fr;
  }
}

.join-persona {
  display: grid;
  gap: 42px;
}

.persona-page {
  --trait-self: #edb858;
  --trait-team: #68a9ed;
  --trait-work: #e86b72;
}

.join-lead {
  max-width: 1180px;
  margin: 0;
  color: var(--text);
  font-size: 19px;
  line-height: 1.95;
  text-wrap: pretty;
}

.trait-group {
  --trait-tone: var(--accent);
  display: grid;
  gap: 18px;
  scroll-margin-top: 112px;
}

.trait-group--self {
  --trait-tone: var(--trait-self);
}

.trait-group--team {
  --trait-tone: var(--trait-team);
}

.trait-group--work {
  --trait-tone: var(--trait-work);
}

.trait-group-heading {
  display: grid;
  grid-template-columns: max-content minmax(280px, 1fr);
  gap: clamp(34px, 6vw, 96px);
  align-items: end;
}

.trait-heading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
}

.trait-heading-icon {
  width: 28px;
  color: var(--trait-tone);
  font-size: 27px;
  line-height: 1;
  text-align: center;
}

.trait-intro {
  width: min(100%, 820px);
  margin: 0;
  justify-self: end;
  padding-bottom: 2px;
  text-align: right;
}

.trait-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.trait-card {
  position: relative;
  min-height: 144px;
  padding: 24px;
  border: 1px solid var(--line);
  outline: none;
  background: var(--card-bg);
  overflow: hidden;
  transition: border-color 300ms ease, background-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.trait-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--trait-tone);
  content: "";
  opacity: 0.72;
  transform: scaleY(0.34);
  transition: opacity 300ms ease, transform 300ms ease;
}

.trait-card-icon {
  position: absolute;
  top: 21px;
  right: 22px;
  color: var(--trait-tone);
  font-size: 27px;
  line-height: 1;
  opacity: 0.72;
  transition: opacity 300ms ease, transform 300ms ease;
}

.trait-card:hover,
.trait-card:focus-visible,
.trait-card:focus-within {
  border-color: var(--trait-tone);
  background: color-mix(in srgb, var(--trait-tone) 8%, var(--card-bg));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--trait-tone) 12%, transparent);
  transform: translateY(-2px);
}

.trait-card:is(:hover, :focus-visible, :focus-within)::before {
  opacity: 1;
  transform: scaleY(1);
}

.trait-card:is(:hover, :focus-visible, :focus-within) .trait-card-icon {
  opacity: 1;
  transform: translateY(-2px) scale(1.06);
}

.trait-card h3 {
  padding-right: 42px;
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
}

.trait-summary,
.trait-detail {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.trait-detail {
  max-height: 0;
  line-height: 1.75;
  opacity: 0;
  overflow: hidden;
  transition: max-height 300ms ease, margin-top 300ms ease, opacity 300ms ease;
}

.trait-card:hover .trait-detail,
.trait-card:focus-visible .trait-detail,
.trait-card:focus-within .trait-detail {
  max-height: 280px;
  margin-top: 16px;
  opacity: 1;
}

.member-section-rail button.persona-rail-self {
  --accent: #edb858;
}

.member-section-rail button.persona-rail-team {
  --accent: #68a9ed;
}

.member-section-rail button.persona-rail-work {
  --accent: #e86b72;
}

@media (max-width: 980px) {
  .culture-manifesto,
  .culture-section-heading,
  .culture-contract {
    grid-template-columns: 1fr;
  }

  .culture-motive-grid,
  .culture-contract-list,
  .culture-practice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .culture-pillar {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .culture-pillar-head {
    min-height: 0;
    padding-right: 0;
    padding-bottom: 22px;
    border-right: 0;
    border-bottom: 2px solid var(--pillar-tone);
  }

  .culture-pillar-head > i {
    right: 2px;
  }

  .trait-group-heading {
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
  }

  .trait-intro {
    width: 100%;
    justify-self: start;
    text-align: left;
  }

  .culture-motive-grid article:nth-child(2) {
    border-right: 0;
  }

  .culture-motive-grid article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .trait-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .culture-manifesto {
    padding: 0 0 28px;
  }

  .culture-manifesto blockquote {
    padding: 20px;
  }

  .culture-motive-grid,
  .culture-contract-list,
  .culture-practice-grid,
  .culture-pillar-points,
  .trait-grid {
    grid-template-columns: 1fr;
  }

  .culture-pillar-points > div {
    min-height: 0;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
  }

  .culture-pillar-points > div + div {
    padding-left: 0;
    border-left: 0;
  }

  .culture-pillar-points > div:last-child {
    border-bottom: 0;
  }

  .culture-motive-grid article {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .culture-motive-grid article:last-child {
    border-bottom: 0;
  }

  .culture-pathway-list li {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .culture-contract-list article {
    min-height: 0;
  }

  .join-persona {
    gap: 34px;
  }

  .join-lead {
    font-size: 17px;
  }

  .trait-card {
    min-height: 0;
    padding: 20px;
  }

  .trait-card-icon {
    top: 18px;
    right: 18px;
  }
}

/* Interactive team meme archive */
.has-meme-dialog {
  overflow: hidden;
}

.meme-page-hero {
  align-items: end;
}

.meme-page-hero h1 {
  font-size: clamp(42px, 5vw, 70px);
}

@media (min-width: 861px) {
  .meme-page-hero {
    grid-template-columns: max-content minmax(620px, 1fr);
  }

  .meme-hero-copy {
    max-width: none;
    white-space: nowrap;
  }
}

.meme-stage {
  margin-top: 34px;
}

.meme-stage-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
}

.meme-stage-actions,
.meme-year-filters {
  display: flex;
  align-items: center;
}

.meme-stage-actions {
  gap: 10px;
}

.meme-year-filters {
  border: 1px solid var(--line);
}

.meme-year-filters button,
.meme-season-picker summary,
.meme-random-button {
  min-height: 42px;
  border: 0;
  background: var(--card-bg);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background .18s, color .18s, transform .18s;
}

.meme-year-filters button {
  padding: 0 15px;
  border-right: 1px solid var(--line);
}

.meme-year-filters button:last-child {
  border-right: 0;
}

.meme-year-filters button:hover,
.meme-year-filters button.is-active,
.meme-season-picker.is-active > summary {
  background: var(--accent);
  color: var(--bg);
}

.meme-season-picker {
  position: relative;
}

.meme-season-picker summary {
  display: flex;
  min-width: 126px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  list-style: none;
  border-left: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
}

.meme-season-picker summary::-webkit-details-marker {
  display: none;
}

.meme-season-picker summary i {
  font-size: 17px;
  transition: transform .18s;
}

.meme-season-picker[open] summary i {
  transform: rotate(180deg);
}

.meme-season-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: -1px;
  z-index: 8;
  display: grid;
  width: 142px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
}

.meme-season-menu button {
  width: 100%;
  border-right: 0;
  border-bottom: 1px solid var(--soft-line);
  text-align: left;
}

.meme-season-menu button:last-child {
  border-bottom: 0;
}

.meme-random-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid var(--line);
}

.meme-random-button:hover {
  border-color: var(--accent);
  color: var(--text);
  transform: translateY(-2px);
}

.meme-random-button i {
  color: var(--accent);
  font-size: 18px;
}

.meme-stream-shell {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.meme-stream-corner {
  position: absolute;
  top: 20px;
  right: 22px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--subtle);
  font-family: Arial, sans-serif;
  line-height: 1.05;
  pointer-events: none;
}

.meme-stream-corner span {
  color: var(--accent);
  font-size: 9px;
  letter-spacing: .18em;
  writing-mode: vertical-rl;
}

.meme-stream-corner strong {
  font-size: 11px;
  letter-spacing: .12em;
}

.meme-stream-corner--toolbar {
  position: static;
  flex: 0 0 auto;
  min-width: 116px;
}

.meme-streams {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 18px 0;
}

.meme-particle {
  position: absolute;
  left: 0;
  z-index: 1;
  width: max-content;
  max-width: none;
  will-change: transform;
}

.meme-particle.is-static {
  transform: none;
}

.meme-barrage-word {
  position: relative;
  display: inline-flex;
  width: max-content;
  max-width: none;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 12px;
  min-width: 164px;
  padding: 13px 18px;
  border: 1px solid color-mix(in srgb, var(--meme-color) 48%, var(--line));
  border-radius: 3px;
  background: color-mix(in srgb, var(--meme-color) 10%, var(--card-bg));
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transform: rotate(var(--meme-tilt, 0deg));
  transition: border-color .18s, background .18s, color .18s, transform .18s, box-shadow .18s;
}

.meme-barrage-word strong {
  display: block;
  font-size: calc(18px + var(--meme-weight) * 2px);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.meme-barrage-word.is-long-term {
  gap: 10px;
  padding-inline: 16px;
}

.meme-barrage-word.is-long-term strong {
  font-size: calc(16px + var(--meme-weight) * 1.6px);
}

.meme-barrage-word span {
  color: var(--subtle);
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .08em;
  white-space: nowrap;
}

.meme-barrage-word:hover,
.meme-barrage-word:focus-visible {
  z-index: 1;
  border-color: var(--meme-color);
  background: color-mix(in srgb, var(--meme-color) 22%, var(--card-bg));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--meme-color) 18%, transparent);
  outline: 0;
  transform: translateY(-4px) rotate(0deg) scale(1.025);
}

.meme-barrage-word--amber,
.meme-dialog[data-tone="amber"] {
  --meme-color: #efb85b;
}

.meme-barrage-word--rose,
.meme-dialog[data-tone="rose"] {
  --meme-color: #e66c91;
}

.meme-barrage-word--blue,
.meme-dialog[data-tone="blue"] {
  --meme-color: #65aee8;
}

.meme-barrage-word--cyan,
.meme-dialog[data-tone="cyan"] {
  --meme-color: #48c6ca;
}

.meme-barrage-word--violet,
.meme-dialog[data-tone="violet"] {
  --meme-color: #a88be8;
}

.meme-barrage-word--mint,
.meme-dialog[data-tone="mint"] {
  --meme-color: #71cf9b;
}

.meme-stage-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 15px 2px 0;
  font-size: 11px;
}

.meme-stage-footer > span {
  color: var(--accent);
  font-family: Arial, sans-serif;
  letter-spacing: .04em;
}

.meme-stage-footer p {
  max-width: 540px;
  font-size: 11px;
  text-align: right;
}

.meme-dialog {
  width: min(1220px, calc(100vw - 48px));
  max-width: none;
  height: min(760px, calc(100vh - 48px));
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--card-bg);
  color: var(--text);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .34);
}

.meme-dialog::backdrop {
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(5px);
}

.meme-dialog-shell {
  position: relative;
  display: grid;
  grid-template-columns: 497px minmax(560px, 1fr);
  height: 100%;
}

.meme-dialog-controls {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  display: grid;
  gap: 10px;
}

.meme-dialog-controls button {
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
}

.meme-dialog-controls .meme-dialog-close {
  border-radius: 50%;
}

.meme-dialog-controls button:hover {
  border-color: var(--meme-color);
  color: var(--meme-color);
}

.meme-dialog-media {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
}

.meme-dialog-image {
  display: grid;
  min-height: 0;
  padding: 32px;
  place-items: center;
}

.meme-dialog-image > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.meme-image-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 380px;
  max-height: 620px;
  place-content: center;
  border: 1px solid color-mix(in srgb, var(--meme-color) 60%, var(--line));
  color: var(--muted);
  text-align: center;
}

.meme-image-placeholder i {
  margin-bottom: 18px;
  color: var(--meme-color);
  font-size: 46px;
}

.meme-image-placeholder strong {
  max-width: 300px;
  font-size: 20px;
  font-weight: 500;
}

.meme-image-placeholder span {
  margin-top: 8px;
  color: var(--subtle);
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .2em;
}

.meme-image-arrow {
  position: absolute;
  top: 50%;
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
  transform: translateY(-50%);
}

.meme-image-arrow--previous { left: 16px; }
.meme-image-arrow--next { right: 16px; }
.meme-image-arrow:hover { border-color: var(--meme-color); color: var(--meme-color); }

.meme-image-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  gap: 20px;
  padding: 13px 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.meme-image-footer > div {
  display: flex;
  gap: 7px;
}

.meme-image-footer button {
  width: 18px;
  height: 3px;
  padding: 0;
  border: 0;
  background: var(--line);
  cursor: pointer;
}

.meme-image-footer button.is-active {
  background: var(--meme-color);
}

.meme-dialog-copy {
  min-width: 0;
  padding: 42px 48px 30px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--meme-color) 48%, var(--line)) transparent;
}

.meme-dialog-copy::-webkit-scrollbar {
  width: 8px;
}

.meme-dialog-copy::-webkit-scrollbar-track {
  background: transparent;
}

.meme-dialog-copy::-webkit-scrollbar-thumb {
  border: 2px solid var(--card-bg);
  border-radius: 8px;
  background: color-mix(in srgb, var(--meme-color) 48%, var(--line));
}

.meme-dialog-copy > header {
  display: block;
  padding-bottom: 28px;
  padding-right: 58px;
  border-bottom: 1px solid var(--line);
}

.meme-dialog-copy .page-label {
  color: var(--meme-color);
}

.meme-dialog-season {
  margin-top: 18px;
  color: var(--subtle);
  font-family: Arial, sans-serif;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.meme-dialog-copy h2 {
  width: max-content;
  max-width: 100%;
  margin: 4px 0 0;
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 500;
  line-height: 1.05;
  white-space: nowrap;
}

.meme-dialog.is-long-term .meme-dialog-copy h2 {
  font-size: clamp(34px, 3.25vw, 46px);
  line-height: 1.08;
}

.meme-dialog.is-extra-long-term .meme-dialog-copy h2 {
  font-size: clamp(31px, 2.9vw, 42px);
}

.meme-dialog-summary {
  margin-top: 14px;
  color: var(--text);
  font-size: 17px;
}

.meme-definition-list {
  margin: 0;
}

.meme-definition-list > div {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--soft-line);
}

.meme-definition-list dt {
  color: var(--meme-color);
  font-family: Arial, sans-serif;
  font-size: 10px;
  letter-spacing: .08em;
}

.meme-definition-list dd {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.85;
}

.meme-definition-list dd.is-redacted {
  width: 100%;
  min-height: calc(1.85em * 4);
  background: var(--card-bg);
  color: var(--card-bg);
  user-select: none;
}

.meme-definition-list .meme-example {
  margin-top: 18px;
  padding: 15px 17px;
  border-bottom: 0;
  border-left: 3px solid var(--meme-color);
  background: color-mix(in srgb, var(--meme-color) 8%, var(--card-bg));
}

.meme-example dd {
  color: var(--text);
  font-size: 14px;
}

.meme-dialog-note {
  display: flex;
  gap: 8px;
  margin-top: 22px;
  color: var(--subtle);
  font-size: 10px;
  line-height: 1.6;
}

.meme-dialog-note i {
  flex: 0 0 auto;
  color: var(--meme-color);
  font-size: 15px;
}

@media (max-width: 900px) {
  .meme-stage-toolbar {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px 18px;
  }

  .meme-stage-actions {
    flex: 1 1 420px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .meme-dialog-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(280px, 42%) minmax(0, 58%);
  }

  .meme-dialog-media {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .meme-dialog-image {
    padding: 24px;
  }

  .meme-image-placeholder {
    min-height: 210px;
  }

  .meme-dialog-copy {
    padding: 30px 28px;
  }
}

@media (max-width: 620px) {
  .meme-stage {
    margin-top: 38px;
  }

  .meme-year-filters {
    flex: 1 1 auto;
  }

  .meme-year-filters > button,
  .meme-season-picker {
    flex: 1 1 0;
  }

  .meme-season-picker summary {
    min-width: 0;
  }

  .meme-random-button {
    flex: 0 0 auto;
    justify-content: center;
  }

  .meme-stream-shell {
    min-height: 410px;
  }

  .meme-streams {
    padding-top: 42px;
  }

  .meme-barrage-word {
    min-width: 142px;
    padding: 11px 13px;
  }

  .meme-barrage-word strong {
    font-size: calc(16px + var(--meme-weight) * 1.5px);
  }

  .meme-stage-footer {
    flex-direction: column;
    gap: 5px;
  }

  .meme-stage-footer p {
    text-align: left;
  }

  .meme-dialog {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border: 0;
  }

  .meme-dialog-shell {
    grid-template-rows: minmax(230px, 36%) minmax(0, 64%);
  }

  .meme-dialog-controls {
    top: 10px;
    right: 10px;
    gap: 7px;
  }

  .meme-dialog-controls button {
    width: 38px;
    height: 38px;
  }

  .meme-dialog-copy {
    padding: 24px 20px 30px;
  }

  .meme-dialog-copy h2 {
    width: auto;
    font-size: 40px;
    white-space: normal;
  }

  .meme-dialog.is-long-term .meme-dialog-copy h2 {
    font-size: 30px;
  }

  .meme-dialog.is-extra-long-term .meme-dialog-copy h2 {
    font-size: 27px;
  }

  .meme-definition-list > div {
    grid-template-columns: 1fr;
    gap: 7px;
  }
}

/* Team history: alternating central timeline and archival letter dialog. */
.history-page-hero {
  grid-template-columns: minmax(320px, 0.66fr) minmax(420px, 1.34fr);
  gap: 36px;
}

.history-page-hero h1 {
  font-size: clamp(42px, 5.8vw, 76px);
}

.history-page-hero > p {
  max-width: none;
  justify-self: end;
  font-size: 14px;
  white-space: nowrap;
}

.history-experience {
  width: min(var(--max-width), calc(100% - 48px));
  margin: 62px auto 100px;
}

.history-timeline-list {
  display: grid;
  gap: 82px;
}

.history-phase {
  scroll-margin-top: 104px;
}

.history-phase-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 36px;
  align-items: end;
  margin-bottom: 34px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--line);
}

.history-phase-header > div > span,
.history-phase-header > div > p {
  font-family: Arial, "Microsoft YaHei", sans-serif;
}

.history-phase-header > div > span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.history-phase-header > div > p {
  display: inline-block;
  margin-left: 12px;
  color: var(--subtle);
  font-size: 11px;
}

.history-phase-header h2 {
  margin: 5px 0 0;
  max-width: none;
  font-size: clamp(23px, 2vw, 31px);
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}

.history-phase-header > p {
  max-width: 360px;
  justify-self: end;
  font-size: 14px;
  line-height: 1.8;
}

.history-phase-nodes {
  position: relative;
  display: grid;
  gap: 24px;
}

.history-phase-nodes::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line) 4%, var(--line) 96%, transparent);
  transform: translateX(-50%);
}

.history-node {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
  min-height: 198px;
  align-items: center;
}

.history-node-card {
  position: relative;
  grid-row: 1;
  width: min(100%, 500px);
  min-height: 178px;
  padding: 24px 28px 22px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--card-bg) 94%, var(--accent));
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.history-node:nth-child(odd) .history-node-card {
  grid-column: 1;
  justify-self: end;
}

.history-node:nth-child(even) .history-node-card {
  grid-column: 3;
  justify-self: start;
}

.history-node-cover {
  position: relative;
  grid-row: 1;
  width: min(100%, 500px);
  min-height: 178px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
}

.history-node:nth-child(odd) .history-node-cover {
  grid-column: 3;
  justify-self: start;
}

.history-node:nth-child(even) .history-node-cover {
  grid-column: 1;
  justify-self: end;
}

.history-node-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.history-node:hover .history-node-cover img {
  transform: scale(1.025);
}

.history-node-cover figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 22px 16px 11px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.76), transparent);
  color: #fff;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  line-height: 1.5;
}

.history-node-cover.is-placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: var(--subtle);
  background:
    linear-gradient(135deg, transparent 49.7%, color-mix(in srgb, var(--line) 72%, transparent) 50%, transparent 50.3%),
    color-mix(in srgb, var(--surface) 88%, #aeb2b8);
}

.history-node-cover.is-placeholder i {
  font-size: 34px;
}

.history-node-cover.is-placeholder span {
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
}

.history-node-card::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  opacity: 0.7;
  transition: opacity 180ms ease;
}

.history-node:nth-child(odd) .history-node-card::after {
  right: 0;
}

.history-node:nth-child(even) .history-node-card::after {
  left: 0;
}

.history-node-card:hover,
.history-node-card:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
  background: color-mix(in srgb, var(--card-bg) 88%, var(--accent));
  box-shadow: 0 18px 42px color-mix(in srgb, #000 14%, transparent);
  transform: translateY(-3px);
  outline: 0;
}

.history-node-card:hover::after,
.history-node-card:focus-visible::after {
  opacity: 1;
}

.history-node-era,
.history-node-years,
.history-node-open {
  font-family: Arial, "Microsoft YaHei", sans-serif;
}

.history-node-era {
  display: block;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.history-node-years {
  display: block;
  margin-top: 9px;
  color: var(--muted);
  font-size: 12px;
}

.history-node-card > strong {
  display: block;
  margin-top: 3px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.35;
}

.history-node-card > p {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.75;
}

.history-node-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  color: var(--accent);
  font-size: 11px;
}

.history-node-open i {
  font-size: 16px;
  transition: transform 180ms ease;
}

.history-node-card:hover .history-node-open i,
.history-node-card:focus-visible .history-node-open i {
  transform: translate(2px, -2px);
}

.history-node-marker {
  position: relative;
  z-index: 1;
  display: grid;
  grid-column: 2;
  grid-row: 1;
  place-items: center;
  width: 58px;
  height: 58px;
  justify-self: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 8px var(--bg);
}

.history-node-marker b {
  color: var(--accent);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.history-node-marker.is-range {
  height: 86px;
  border-radius: 29px;
}

.history-node-marker.is-range b {
  display: grid;
  gap: 5px;
  place-items: center;
}

.history-node-marker.is-range b span {
  display: block;
}

.history-node-marker.is-range b i {
  color: color-mix(in srgb, var(--accent) 72%, var(--muted));
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 0.55;
}

.history-phase-rail {
  position: fixed;
  z-index: 18;
  top: 50%;
  left: clamp(30px, 3.2vw, 58px);
  display: grid;
  gap: 8px;
  transform: translateY(-50%);
}

.history-phase-rail button {
  position: relative;
  display: grid;
  grid-template-columns: 4px;
  place-items: center;
  width: 24px;
  height: 50px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.history-phase-rail button > span {
  width: 3px;
  height: 38px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 46%, transparent);
  transition: height 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.history-phase-rail button > b {
  position: absolute;
  left: 19px;
  color: var(--subtle);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 8px;
  font-weight: 500;
  opacity: 0;
  transition: opacity 160ms ease;
}

.history-phase-rail button > em {
  position: absolute;
  left: 32px;
  width: max-content;
  padding: 3px 7px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  color: var(--text);
  font-size: 10px;
  font-style: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-5px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.history-phase-rail button:hover > span,
.history-phase-rail button:focus-visible > span,
.history-phase-rail button.is-active > span {
  height: 46px;
  background: var(--accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 72%, transparent);
}

.history-phase-rail button:hover > b,
.history-phase-rail button:focus-visible > b,
.history-phase-rail button.is-active > b {
  opacity: 1;
}

.history-phase-rail button:hover > em,
.history-phase-rail button:focus-visible > em {
  opacity: 1;
  transform: translateX(0);
}

.history-phase-rail button:focus-visible {
  outline: 0;
}

.has-history-dialog {
  overflow: hidden;
}

.history-dialog {
  width: min(1180px, calc(100vw - 48px));
  max-width: none;
  height: min(780px, calc(100vh - 48px));
  max-height: none;
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card-bg);
  color: var(--text);
  overflow: hidden;
  box-shadow: 0 28px 88px rgba(0, 0, 0, 0.32);
}

.history-dialog::backdrop {
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(5px);
}

.history-dialog-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
  height: 100%;
}

.history-dialog-close {
  position: absolute;
  z-index: 5;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: color-mix(in srgb, var(--card-bg) 88%, transparent);
  color: var(--text);
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.history-dialog-close i {
  font-size: 21px;
}

.history-dialog-media {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 58px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 82%, #aeb2b8);
}

.history-carousel {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.history-carousel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.history-carousel-placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  color: color-mix(in srgb, var(--muted) 74%, transparent);
  background:
    linear-gradient(135deg, transparent 49.7%, color-mix(in srgb, var(--line) 70%, transparent) 50%, transparent 50.3%),
    color-mix(in srgb, var(--surface) 80%, #aeb2b8);
}

.history-carousel-placeholder i {
  font-size: 46px;
}

.history-carousel-placeholder span {
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.history-carousel-arrow {
  position: absolute;
  z-index: 2;
  top: calc(50% - 29px);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--text) 24%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  color: var(--text);
  cursor: pointer;
  transform: translateY(-50%);
  backdrop-filter: blur(7px);
}

.history-carousel-arrow i {
  font-size: 25px;
}

.history-carousel-arrow--previous {
  left: 18px;
}

.history-carousel-arrow--next {
  right: 18px;
}

.history-carousel-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-width: 0;
  padding: 0 20px;
  border-top: 1px solid var(--line);
  background: var(--card-bg);
}

.history-carousel-footer > span {
  min-width: 0;
  color: var(--muted);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-carousel-dots {
  display: flex;
  gap: 6px;
}

.history-carousel-dots button {
  width: 18px;
  height: 3px;
  padding: 0;
  border: 0;
  background: var(--line);
  cursor: pointer;
  transition: background-color 160ms ease, width 160ms ease;
}

.history-carousel-dots button.is-active {
  width: 28px;
  background: var(--accent);
}

.history-letter {
  min-width: 0;
  overflow-y: auto;
  padding: 50px 42px 42px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.history-letter-header > span {
  color: var(--accent);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.history-letter-header > p {
  margin-top: 15px;
  color: var(--muted);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 12px;
}

.history-letter-header h2 {
  margin: 3px 0 0;
  font-size: clamp(28px, 3.3vw, 42px);
  font-weight: 500;
  line-height: 1.25;
}

.history-letter-facts {
  display: grid;
  margin: 28px 0 0;
  border-bottom: 1px solid var(--line);
}

.history-letter-facts > div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

.history-letter-facts dt,
.history-letter-facts dd {
  margin: 0;
}

.history-letter-facts dt {
  color: var(--accent);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
}

.history-letter-facts dd {
  color: var(--text);
  font-size: 13px;
  line-height: 1.65;
}

.history-letter-copy {
  margin-top: 28px;
}

.history-letter-copy p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.95;
  text-indent: 2em;
}

.history-letter-copy p + p {
  margin-top: 16px;
}

@media (max-width: 900px) {
  .history-page-hero {
    grid-template-columns: 1fr;
  }

  .history-page-hero > p {
    justify-self: start;
    white-space: normal;
  }

  .history-phase-header {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .history-phase-header > p {
    justify-self: start;
    max-width: 650px;
  }

  .history-phase-header h2 {
    white-space: normal;
    text-wrap: balance;
  }

  .history-phase-rail {
    display: none;
  }

  .history-dialog-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(250px, 42vh) minmax(0, 1fr);
  }

  .history-dialog-media {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .history-letter {
    padding: 34px 30px;
  }
}

@media (max-width: 680px) {
  .history-experience {
    width: calc(100% - 28px);
    margin-top: 42px;
  }

  .history-timeline-list {
    gap: 58px;
  }

  .history-phase-nodes {
    gap: 16px;
  }

  .history-phase-nodes::before {
    left: 20px;
  }

  .history-node {
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 0;
  }

  .history-node:nth-child(n) .history-node-card {
    grid-column: 2;
    justify-self: stretch;
    width: 100%;
    min-height: 0;
    padding: 19px 20px 18px;
  }

  .history-node:nth-child(n) .history-node-cover {
    grid-column: 2;
    grid-row: 2;
    justify-self: stretch;
    width: 100%;
    min-height: 0;
    height: 156px;
    margin-top: 8px;
  }

  .history-node:nth-child(n) .history-node-card::after {
    right: auto;
    left: 0;
  }

  .history-node-marker {
    grid-column: 1;
    width: 40px;
    height: 40px;
    box-shadow: 0 0 0 5px var(--bg);
  }

  .history-node-marker b {
    font-size: 9px;
  }

  .history-node-marker.is-range {
    height: 64px;
    border-radius: 20px;
  }

  .history-node-marker.is-range b {
    gap: 3px;
  }

  .history-node-card > strong {
    font-size: 20px;
  }

  .history-dialog {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
  }

  .history-dialog-shell {
    grid-template-rows: minmax(220px, 36vh) minmax(0, 1fr);
  }

  .history-dialog-close {
    top: 10px;
    right: 10px;
  }

  .history-carousel-arrow {
    width: 36px;
    height: 36px;
  }

  .history-carousel-arrow--previous {
    left: 10px;
  }

  .history-carousel-arrow--next {
    right: 10px;
  }

  .history-letter {
    padding: 28px 20px 34px;
  }

  .history-letter-header h2 {
    padding-right: 34px;
    font-size: 27px;
  }

  .history-letter-facts > div {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .history-node-card,
  .history-node-open i,
  .history-carousel-dots button {
    transition: none;
  }

  .history-node-cover img,
  .history-phase-rail button > span,
  .history-phase-rail button > em {
    transition: none;
  }
}

.partner-heading {
  margin-top: 54px;
  padding-top: 46px;
  border-top: 1px solid var(--line);
}

.thanks-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.thanks-card {
  min-height: 136px;
  display: grid;
  grid-template-rows: 66px auto;
  align-items: center;
  justify-items: center;
  gap: 10px;
  padding: 18px 18px 14px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  text-align: center;
  transition: border-color 160ms ease, transform 160ms ease;
}

.thanks-card:hover,
.thanks-card:focus-visible {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.thanks-logo-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 66px;
}

.thanks-card img {
  width: auto;
  max-width: 88%;
  max-height: 58px;
  object-fit: contain;
  object-position: center;
}

.thanks-card strong {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  color: inherit;
  line-height: 1.45;
}

.sponsor-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sponsor-card .thanks-logo-frame {
  height: 72px;
  padding: 10px 16px;
  background: var(--surface);
  overflow: hidden;
}

.sponsor-card img {
  max-width: 86%;
  max-height: 52px;
}

.sponsor-card--cubemars img {
  transform: scale(2.55);
}

:root:not([data-theme="dark"]) .sponsor-card--cubemars img,
:root:not([data-theme="dark"]) .partner-marquee-item--cubemars img {
  filter: brightness(0);
}

.logo-cqu img {
  max-width: 80%;
  max-height: 54px;
}

.logo-sxic img {
  max-width: 92%;
  max-height: 42px;
}

.logo-pivot img {
  max-height: 69px;
}

.logo-rm img {
  max-height: 30px;
  filter: invert(1);
}

:root[data-theme="dark"] .logo-sxic img,
:root[data-theme="dark"] .logo-pivot img {
  filter: invert(1) brightness(1.08);
}

:root[data-theme="dark"] .logo-rm img {
  filter: none;
}

@media (max-width: 860px) {
  .home-quote {
    min-height: 82px;
    grid-template-columns: minmax(0, 1fr) 74px;
    gap: 14px;
    padding: 14px 0;
  }

  .quote-stage {
    padding-left: 54px;
    text-align: left;
  }

  .quote-stage p {
    font-size: 19px;
  }

  .quote-random-button {
    transform: none;
    width: 34px;
    height: 34px;
    justify-self: end;
  }

  .quote-random-button:hover,
  .quote-random-button:focus-visible {
    transform: rotate(18deg);
  }

  .thanks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .thanks-card {
    min-height: 124px;
    padding: 14px 12px 12px;
  }

  .thanks-card strong {
    font-size: 14px;
  }
}

@media (max-width: 420px) {
  .thanks-grid {
    grid-template-columns: 1fr;
  }
}

/* Keep two-word group labels intentionally split into two lines */
.group-grid .entry-card span {
  display: block;
  min-height: 42px;
  line-height: 1.25;
  white-space: normal;
}

/* Archive video carousel and message wall */
.video-feature {
  border-top: 0;
  padding-top: 0;
}

.video-carousel {
  display: grid;
  grid-template-columns: minmax(620px, 1fr) minmax(300px, 380px);
  gap: 28px;
  align-items: stretch;
}

.video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}

.video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-placeholder {
  height: 100%;
  min-height: 320px;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

.video-placeholder strong,
.video-placeholder span {
  display: block;
}

.video-copy {
  border: 1px solid var(--line);
  background: var(--card-bg);
  padding: 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.video-subtitle {
  margin: 14px 0 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
}

.video-copy h3 {
  margin: 4px 0 14px;
  font-size: clamp(26px, 2vw, 34px);
  line-height: 1.2;
  font-weight: 500;
}

.video-copy > p:not(.page-label):not(.video-subtitle) {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.62;
}

.video-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.video-actions button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.video-actions button:disabled {
  color: var(--muted);
  cursor: default;
  opacity: 0.45;
}

.video-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 26px;
}

.video-list button {
  min-height: 104px;
  padding: 16px 24px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.video-list button:hover,
.video-list button:focus-visible,
.video-list button.is-active {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.video-list button.is-active {
  background: var(--surface);
}

.video-list span {
  display: block;
  margin-bottom: 9px;
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: none;
}

.video-list strong {
  display: block;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 500;
}

.video-list small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

@media (max-width: 1120px) {
  .video-carousel {
    grid-template-columns: 1fr;
  }

  .video-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .video-copy {
    min-height: 300px;
  }
}

@media (max-width: 760px) {
  .video-list {
    grid-template-columns: 1fr;
  }
}

/* Desktop technical cards reveal their summary as a fixed-stage transition. */
@media (hover: hover) and (min-width: 861px) {
  .group-grid .entry-card {
    position: relative;
    display: block;
    min-height: 312px;
    overflow: hidden;
  }

  .group-grid .entry-card figure {
    position: absolute;
    top: 20px;
    left: 22px;
    width: calc(100% - 44px);
    height: 170px;
    margin: 0;
    transition:
      top 280ms ease,
      left 280ms ease,
      width 280ms ease,
      height 280ms ease,
      background-color 220ms ease;
  }

  .group-grid .entry-card figure img {
    width: 132px;
    height: 132px;
    transition:
      width 280ms ease,
      height 280ms ease;
  }

  .group-grid .entry-card span,
  .group-grid .entry-card strong,
  .group-grid .entry-card small {
    position: absolute;
    right: 22px;
    left: 22px;
    margin: 0;
  }

  .group-grid .entry-card span {
    top: 196px;
    min-height: 42px;
    transition:
      top 280ms ease,
      right 280ms ease;
  }

  .group-grid .entry-card strong {
    top: 236px;
    min-height: 52px;
    transition:
      top 280ms ease,
      font-size 280ms ease;
  }

  .group-grid .entry-card:nth-child(5) strong {
    top: 218px;
  }

  .group-grid .entry-card small {
    top: 112px;
    opacity: 0;
    transform: translateY(56px);
    pointer-events: none;
    transition:
      opacity 180ms ease,
      transform 300ms ease;
  }

  .group-grid .entry-card:is(:hover, :focus-visible, :active, .is-active) figure {
    top: 26px;
    left: calc(100% - 84px);
    width: 62px;
    height: 62px;
  }

  .group-grid .entry-card:is(:hover, :focus-visible, :active, .is-active) figure img {
    width: 46px;
    height: 46px;
  }

  .group-grid .entry-card:is(:hover, :focus-visible, :active, .is-active) span {
    top: 30px;
    right: 94px;
  }

  .group-grid .entry-card:is(:hover, :focus-visible, :active, .is-active) strong {
    top: 70px;
    min-height: 34px;
    font-size: 20px;
  }

  .group-grid .entry-card:nth-child(5):is(:hover, :focus-visible, :active, .is-active) strong {
    top: 54px;
  }

  .group-grid .entry-card:is(:hover, :focus-visible, :active, .is-active) small {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 70ms;
  }
}

@media (hover: hover) and (min-width: 861px) and (max-width: 1100px) {
  .group-grid .entry-card {
    min-height: 312px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .group-grid .entry-card,
  .group-grid .entry-card figure,
  .group-grid .entry-card figure img,
  .group-grid .entry-card span,
  .group-grid .entry-card strong,
  .group-grid .entry-card small {
    transition: none;
  }
}
/* Compact subpage heroes and avoid duplicate divider lines */
.page-hero {
  margin-top: 46px;
  gap: 36px;
  padding-bottom: 24px;
}

.page-hero h1 {
  font-size: clamp(34px, 3.65vw, 56px);
  line-height: 1.12;
}

.page-hero > p {
  font-size: 15px;
  line-height: 1.62;
}

.page-hero + .section-block {
  margin-top: 54px;
}

.page-hero + .meme-stage {
  margin-top: 26px;
}

.video-feature {
  border-top: 0;
  padding-top: 0;
}

@media (max-width: 860px) {
  .page-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    margin-top: 34px;
    padding-bottom: 22px;
  }

  .page-hero h1 {
    font-size: clamp(32px, 9vw, 44px);
  }

  .page-hero + .section-block {
    margin-top: 38px;
  }

  .page-hero + .meme-stage {
    margin-top: 24px;
  }
}

/* Group logos in the technical-groups dropdown. */
.nav-dropdown a[href="group-mechanical.html"],
.nav-dropdown a[href="group-control.html"],
.nav-dropdown a[href="group-vision.html"],
.nav-dropdown a[href="group-hardware.html"],
.nav-dropdown a[href="group-operations.html"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  transition:
    color 160ms ease,
    background-color 160ms ease;
}

.nav-dropdown a[href="group-mechanical.html"] {
  --nav-group-tone: #c59a4b;
}

.nav-dropdown a[href="group-control.html"] {
  --nav-group-tone: #6e9dca;
}

.nav-dropdown a[href="group-vision.html"] {
  --nav-group-tone: #8976b2;
}

.nav-dropdown a[href="group-hardware.html"] {
  --nav-group-tone: #62a66f;
}

.nav-dropdown a[href="group-operations.html"] {
  --nav-group-tone: #bd6f84;
}

.nav-dropdown a[href="group-mechanical.html"]::after,
.nav-dropdown a[href="group-control.html"]::after,
.nav-dropdown a[href="group-vision.html"]::after,
.nav-dropdown a[href="group-hardware.html"]::after,
.nav-dropdown a[href="group-operations.html"]::after {
  content: "";
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 25px 25px;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.nav-dropdown a[href="group-mechanical.html"]::after {
  background-image: url("../images/brand/group-icons/mechanical.png");
}

.nav-dropdown a[href="group-control.html"]::after {
  background-image: url("../images/brand/group-icons/control.png");
}

.nav-dropdown a[href="group-vision.html"]::after {
  background-image: url("../images/brand/group-icons/vision.png");
}

.nav-dropdown a[href="group-hardware.html"]::after {
  background-image: url("../images/brand/group-icons/hardware.png");
}

.nav-dropdown a[href="group-operations.html"]::after {
  background-image: url("../images/brand/group-icons/operations.png");
}

.nav-dropdown a[href^="group-"]:hover::after,
.nav-dropdown a[href^="group-"]:focus-visible::after {
  border-color: var(--nav-group-tone);
  background-color: color-mix(in srgb, #fff 90%, var(--nav-group-tone));
  transform: translateX(-1px);
}

/* Brand wordmark and shared dropdown icon system. */
.brand-text {
  align-items: center;
  line-height: 1;
}

.brand-text strong {
  align-items: center;
  line-height: 1;
}

.brand-text strong::after {
  transform: none;
}

.brand-text small {
  font-family:
    "DIN 1451 Fette Breitschrift 1936",
    "Arial Black",
    sans-serif;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.brand-text small.brand-flip {
  position: relative;
  display: inline-block;
  width: 154px;
  height: 40px;
  overflow: hidden;
  line-height: 1;
  perspective: 560px;
}

.brand-flip-inner {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  transform: rotateX(0deg);
  transform-origin: 50% 50%;
  transition: transform 460ms cubic-bezier(0.22, 0.72, 0.2, 1);
}

.brand-flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 6px;
  backface-visibility: hidden;
}

.brand-flip-face--front {
  transform: rotateX(0deg) translateZ(20px);
}

.brand-flip-face--back {
  transform: rotateX(-90deg) translateZ(20px);
}

.brand-flip-face--back img {
  width: 78px;
  height: auto;
  max-height: 38px;
  object-fit: contain;
}

.brand:hover .brand-flip-inner,
.brand:focus-visible .brand-flip-inner {
  transform: rotateX(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .brand-flip-inner {
    transition: none;
  }
}

@media (max-width: 1100px) {
  .brand-text small.brand-flip {
    display: none;
  }
}

.home-wordmark {
  font-family:
    "DIN 1451 Fette Breitschrift 1936",
    "Arial Black",
    sans-serif;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.nav-dropdown {
  min-width: 148px;
  gap: 3px;
  padding: 10px;
}

.nav-dropdown a {
  position: relative;
  border-left: 0;
}

.nav-dropdown a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 80%;
  background: var(--accent);
  transform: translateY(-50%);
}

.nav-dropdown a.nav-item-with-icon {
  display: grid;
  grid-template-columns: minmax(80px, max-content) 24px;
  justify-content: start;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 3px 6px 3px 10px;
  transition:
    color 160ms ease,
    background-color 160ms ease;
}

.nav-dropdown a.nav-item-with-icon::after {
  content: none;
}

.nav-item-label {
  min-width: 0;
}

.nav-item-logo,
.nav-item-mdi {
  position: relative;
  display: grid;
  grid-column: 2;
  grid-row: 1;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
}

.nav-item-logo img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0) saturate(100%);
}

.nav-dropdown a.nav-item-with-icon--unit {
  grid-template-columns: minmax(80px, max-content) 48px;
}

.nav-item-logo-pair {
  display: inline-flex;
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  width: 48px;
  height: 24px;
}

.nav-item-logo-pair img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0) saturate(100%);
}

.nav-item-mdi {
  font-size: 20px;
  font-style: normal;
  line-height: 1;
}

.nav-dropdown a.nav-item-with-icon.is-current {
  --nav-current-tone: var(--accent);
  color: var(--nav-current-tone);
  background: color-mix(in srgb, var(--nav-current-tone) 12%, var(--card-bg));
}

.nav-dropdown a.nav-item-with-icon.is-current::before {
  background: var(--nav-current-tone);
  box-shadow: 0 0 10px color-mix(in srgb, var(--nav-current-tone) 44%, transparent);
}

.nav-dropdown a.nav-item-with-icon.is-current .nav-item-mdi {
  color: var(--nav-current-tone);
}

:root[data-theme="dark"] .nav-item-logo,
:root[data-theme="dark"] .nav-item-mdi {
  background: transparent;
  color: var(--text);
}

:root[data-theme="dark"] .nav-item-logo img {
  filter: brightness(0) saturate(100%) invert(1);
}

:root[data-theme="dark"] .nav-item-logo-pair img {
  filter: none;
}

.org-card[id] {
  scroll-margin-top: 112px;
}

/* Primary navigation icon watermarks and spacing. */
.nav-links {
  gap: clamp(15px, 1.35vw, 22px);
}

.nav-utilities {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

@media (min-width: 1101px) {
  .nav-utilities {
    position: relative;
    right: clamp(24px, 1.8vw, 30px);
  }
}

.nav-map-link {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  color: var(--muted);
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}

.nav-map-link:hover,
.nav-map-link:focus-visible {
  border-color: var(--accent);
  background: var(--surface);
  color: var(--accent);
  outline: none;
}

.nav-map-link .mdi {
  font-size: 22px;
  line-height: 1;
}

@media (min-width: 1101px) and (max-width: 1300px) {
  .nav-links {
    transform: translateX(1em);
  }
}

@media (min-width: 1301px) {
  .nav-links {
    transform: translateX(clamp(80px, 4.5vw, 92px));
  }
}

@media (max-width: 860px) {
  .nav-utilities {
    gap: 0;
  }

  .nav-map-link {
    display: none;
  }
}

/* Hierarchical page return control */
.page-back-nav {
  position: fixed;
  top: clamp(170px, 19vh, 210px);
  left: max(12px, calc((100vw - var(--max-width)) / 2 - 74px));
  z-index: 19;
  width: 46px;
  height: 46px;
  transform: translateY(-50%);
}

.page-back-link {
  display: grid;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, var(--line));
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--accent);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.1);
  line-height: 1;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.page-back-link .mdi {
  font-size: 22px;
  line-height: 1;
}

.page-back-link:hover,
.page-back-link:focus-visible {
  border-color: var(--accent);
  background: var(--accent);
  color: #111;
  transform: translateX(4px);
  outline: none;
}

@media (min-width: 861px) and (max-width: 1300px) {
  body:has(.page-back-nav) .page-hero,
  body:has(.page-back-nav) .history-experience {
    width: calc(100% - 130px);
    margin-right: 40px;
    margin-left: 90px;
  }
}

@media (max-width: 860px) {
  .page-back-nav {
    top: 142px;
    left: 12px;
    width: 41px;
    height: 41px;
  }

  .page-back-link {
    width: 41px;
    height: 41px;
  }

  .page-back-link .mdi {
    font-size: 20px;
  }

  body:has(.page-back-nav) .page-hero {
    width: calc(100% - 92px);
    margin-right: 16px;
    margin-left: 76px;
  }
}

.nav-links > a,
.nav-menu > a {
  isolation: isolate;
}

.nav-link-label {
  position: relative;
  z-index: 1;
  display: inline-block;
  transform: translateY(0);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-link-label::before,
.nav-link-label::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2px;
  height: 24px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--accent) 72%, transparent) 24%,
    var(--accent) 50%,
    color-mix(in srgb, var(--accent) 72%, transparent) 76%,
    transparent 100%
  );
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 52%, transparent);
  opacity: 0;
  transform: translateY(-50%) scaleY(0.35);
  transition: opacity 180ms ease, transform 220ms ease;
}

.nav-link-label::before {
  left: -12px;
}

.nav-link-label::after {
  right: -12px;
}

.nav-links > a:hover .nav-link-label::before,
.nav-links > a:hover .nav-link-label::after,
.nav-links > a:focus-visible .nav-link-label::before,
.nav-links > a:focus-visible .nav-link-label::after,
.nav-menu > a:hover .nav-link-label::before,
.nav-menu > a:hover .nav-link-label::after,
.nav-menu > a:focus-visible .nav-link-label::before,
.nav-menu > a:focus-visible .nav-link-label::after {
  opacity: 0.72;
  transform: translateY(-50%) scaleY(1);
}

.nav-link-watermark {
  position: absolute;
  z-index: 0;
  top: auto;
  bottom: 11px;
  left: 50%;
  color: currentColor;
  font-size: 18px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 5px) scale(0.72);
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-links > a:hover .nav-link-label,
.nav-links > a:focus-visible .nav-link-label,
.nav-links > a.is-active .nav-link-label,
.nav-menu > a:hover .nav-link-label,
.nav-menu > a:focus-visible .nav-link-label,
.nav-menu > a.is-active .nav-link-label {
  transform: translateY(-0.48em);
}

.nav-links > a:hover .nav-link-watermark,
.nav-links > a:focus-visible .nav-link-watermark,
.nav-links > a.is-active .nav-link-watermark,
.nav-menu > a:hover .nav-link-watermark,
.nav-menu > a:focus-visible .nav-link-watermark,
.nav-menu > a.is-active .nav-link-watermark {
  opacity: 0.8;
  transform: translate(-50%, 0) scale(1);
}

/* Recruitment reminder: follow the theme accent (pink by day, green by night). */
.nav-menu--join > a::before {
  content: "";
  position: absolute;
  top: 0;
  right: -11px;
  bottom: 0;
  left: -11px;
  z-index: 0;
  background:
    linear-gradient(
      to top,
      transparent 0%,
      color-mix(in srgb, var(--accent) 5%, transparent) 34%,
      color-mix(in srgb, var(--accent) 30%, transparent) 42%,
      color-mix(in srgb, var(--accent) 54%, transparent) 47%,
      color-mix(in srgb, var(--accent) 72%, white 8%) 50%,
      color-mix(in srgb, var(--accent) 50%, transparent) 54%,
      color-mix(in srgb, var(--accent) 24%, transparent) 62%,
      transparent 70%
    );
  background-repeat: no-repeat;
  background-position: center 100%;
  background-size: 100% 300%;
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--accent) 22%, transparent);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.22) 8%,
    #000 24%,
    #000 76%,
    rgba(0, 0, 0, 0.22) 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.22) 8%,
    #000 24%,
    #000 76%,
    rgba(0, 0, 0, 0.22) 92%,
    transparent 100%
  );
  opacity: 0;
  pointer-events: none;
  animation: nav-recruit-metal-sweep 3s linear infinite;
}

.nav-menu--join.is-sweep-held > a::before {
  animation: none;
  opacity: 0;
}

@keyframes nav-recruit-metal-sweep {
  0%,
  60% {
    background-position: center 100%;
    opacity: 0;
  }

  64% {
    opacity: 0.9;
  }

  88% {
    background-position: center 0%;
    opacity: 0.9;
  }

  94%,
  100% {
    background-position: center 0%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu--join > a::before {
    animation: none;
    opacity: 0;
  }
}

/* Organization mega menu: technical, responsibility and robot-unit groups. */
.nav-dropdown--organization {
  width: max-content;
  max-width: calc(100vw - 32px);
  min-width: 0;
  grid-template-columns: 150px 174px 150px 150px;
  gap: 0;
  padding: 0;
}

.nav-dropdown-column {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
  padding: 10px;
}

.nav-dropdown-column + .nav-dropdown-column {
  border-left: 1px solid var(--line);
}

.nav-dropdown-column-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  margin-bottom: 2px;
  padding: 2px 6px 7px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

.nav-dropdown-column-title i {
  color: var(--accent);
  font-size: 17px;
  line-height: 1;
}

.nav-dropdown-column-title strong {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}

.nav-dropdown--organization a.nav-item-with-icon {
  width: 100%;
  grid-template-columns: minmax(80px, max-content) 24px;
}

.nav-dropdown--organization a.nav-item-with-icon--unit {
  grid-template-columns: minmax(80px, max-content) 48px;
}

.nav-dropdown--museum {
  width: max-content;
  min-width: 0;
  grid-template-columns: repeat(2, 154px);
  gap: 0;
  padding: 0;
}

.nav-dropdown--museum a.nav-item-with-icon {
  width: 100%;
  grid-template-columns: minmax(76px, max-content) 24px;
}

.nav-dropdown--contact {
  width: max-content;
  min-width: 0;
  grid-template-columns: repeat(2, 158px);
  gap: 0;
  padding: 0;
}

.nav-dropdown--contact a.nav-item-with-icon {
  width: 100%;
  grid-template-columns: minmax(88px, max-content) 24px;
}

/* Dedicated robot-unit pages. */
.unit-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.unit-role-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 24px;
  align-items: center;
  min-height: 230px;
  padding: 30px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.unit-role-card .page-label {
  margin-bottom: 6px;
}

.unit-role-card h2 {
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 500;
}

.unit-role-card p {
  font-size: 15px;
}

.unit-role-logo {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin: 0;
  background: var(--surface);
}

.unit-role-logo img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  filter: brightness(0) saturate(100%);
}

:root[data-theme="dark"] .unit-role-logo img {
  filter: none;
}

.unit-page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 24px;
}

@media (max-width: 860px) {
  .nav-link-watermark {
    left: 50%;
    bottom: 7px;
    font-size: 15px;
  }

  .nav-link-label {
    padding-left: 0;
  }

  .unit-role-grid {
    grid-template-columns: 1fr;
  }

  .nav-dropdown--organization {
    width: auto;
    grid-template-columns: 1fr;
  }

  .nav-dropdown--museum {
    width: auto;
    grid-template-columns: 1fr;
  }

  .nav-dropdown--contact {
    width: auto;
    grid-template-columns: 1fr;
  }

  .nav-dropdown-column {
    padding: 10px 8px;
  }

  .nav-dropdown-column + .nav-dropdown-column {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .unit-role-card {
    grid-template-columns: minmax(0, 1fr) 80px;
    gap: 16px;
    padding: 22px;
  }

  .unit-role-logo {
    width: 80px;
    height: 80px;
  }

  .unit-role-logo img {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 860px) {
  .nav-dropdown {
    gap: 3px;
    padding: 10px;
  }
}

/* Contact hub and cooperation pages. */
.contact-hub {
  display: grid;
  gap: 26px;
}

.contact-hub-heading {
  align-items: end;
}

.contact-hub-heading .page-label,
.partner-section .page-label,
.partnership-history .page-label,
.sponsor-contact .page-label,
.outreach-programs .page-label,
.contact-cta .page-label,
.social-directory .page-label {
  margin-bottom: 7px;
}

.contact-entry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.contact-entry-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.contact-entry-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-entry {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 2px 14px;
  min-height: 136px;
  padding: 26px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--text);
  background: var(--card-bg);
  transition: background 180ms ease, color 180ms ease;
}

.contact-entry::after {
  content: "\F0054";
  position: absolute;
  right: 20px;
  bottom: 16px;
  color: var(--accent);
  font: normal normal normal 18px/1 "Material Design Icons";
  transform: translateX(-4px);
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
}

.contact-entry:hover,
.contact-entry:focus-visible {
  background: color-mix(in srgb, var(--accent) 8%, var(--card-bg));
}

.contact-entry:hover::after,
.contact-entry:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

.contact-entry > i {
  grid-row: 1 / span 2;
  color: var(--accent);
  font-size: 25px;
  line-height: 1.2;
}

.contact-entry strong {
  align-self: end;
  font-size: 21px;
  font-weight: 500;
}

.contact-entry span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.contact-address {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--muted);
  font-style: normal;
  font-size: 14px;
}

.contact-address i {
  color: var(--accent);
  font-size: 20px;
}

.contact-address-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
}

.contact-address-list a:hover,
.contact-address-list a:focus-visible {
  color: var(--text);
}

.contact-channel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.contact-channel-card {
  min-width: 0;
  min-height: 126px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card-bg);
  color: var(--text);
  overflow: hidden;
}

.contact-channel-card--qr {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 86px;
  align-items: center;
  gap: 12px;
  padding: 18px;
}

.contact-qr-preview {
  width: 86px;
  height: 86px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  cursor: zoom-in;
  transition: border-color 180ms ease, transform 180ms ease;
}

.contact-qr-preview:hover,
.contact-qr-preview:focus-visible {
  border-color: var(--accent);
  outline: none;
  transform: translateY(-2px);
}

.contact-qr-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.contact-channel-card--qr > div,
.contact-channel-card--direct > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.contact-channel-card--qr > i {
  font-size: 24px;
}

.contact-channel-card i {
  color: var(--accent);
  font-size: 20px;
  line-height: 1;
}

.contact-channel-card strong {
  min-width: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
}

.contact-channel-card span,
.contact-channel-card em {
  min-width: 0;
  color: var(--muted);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
  font-style: normal;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.contact-channel-card--linked {
  grid-template-columns: minmax(0, 1fr) 86px;
}

.contact-channel-main-link {
  align-self: stretch;
  margin: -18px 0 -18px -18px;
  padding: 18px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  transition: background 180ms ease;
}

.contact-channel-main-link > i {
  font-size: 24px;
}

.contact-channel-main-link > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.contact-channel-main-link em {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.contact-channel-main-link em i {
  font-size: 14px;
}

.contact-channel-main-link:hover,
.contact-channel-main-link:focus-visible {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  outline: none;
}

.contact-channel-main-link:hover em,
.contact-channel-main-link:focus-visible em {
  color: var(--accent);
}

.contact-channel-card--direct {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px 12px;
  padding: 18px;
  transition: border-color 180ms ease, background 180ms ease;
}

.contact-channel-card--direct > i {
  grid-row: 1 / span 2;
  font-size: 24px;
}

.contact-channel-card--direct > em {
  grid-column: 2;
}

.contact-channel-card--lab {
  grid-template-columns: 30px minmax(0, 1fr) 68px;
}

.contact-channel-card--lab > .contact-guide-preview {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.contact-guide-preview {
  align-self: center;
  width: 68px;
  aspect-ratio: 3 / 4;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  cursor: zoom-in;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.contact-guide-preview:hover,
.contact-guide-preview:focus-visible {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
  transform: translateY(-2px);
}

.contact-guide-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

a.contact-channel-card--direct:hover,
a.contact-channel-card--direct:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--card-bg));
}

.contact-qr-lightbox {
  width: min(520px, calc(100% - 32px));
  max-width: none;
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
}

.contact-qr-lightbox[open] {
  display: grid;
}

.contact-qr-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(5px);
}

.contact-qr-lightbox__panel {
  position: relative;
  padding: 40px;
}

.contact-qr-lightbox__close {
  position: absolute;
  z-index: 1;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
}

.contact-qr-lightbox figure {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 18px;
}

.contact-qr-lightbox figure img {
  width: min(360px, 100%);
  aspect-ratio: 1;
  padding: 12px;
  border-radius: 4px;
  background: #fff;
  object-fit: contain;
}

.contact-qr-lightbox figcaption {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}

.contact-qr-lightbox.is-guide-preview {
  width: min(760px, calc(100% - 24px));
}

.contact-qr-lightbox.is-guide-preview .contact-qr-lightbox__panel {
  padding: 52px 30px 28px;
}

.contact-qr-lightbox.is-guide-preview figure img {
  width: min(620px, 100%);
  height: auto;
  max-height: calc(100vh - 150px);
  aspect-ratio: auto;
  padding: 0;
}

.partner-section,
.partnership-history {
  display: grid;
  gap: 24px;
}

.partner-marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--card-bg);
}

.partner-marquee-track {
  display: flex;
  width: max-content;
  animation: partner-marquee 16s linear infinite;
}

.partner-marquee:hover .partner-marquee-track {
  animation-play-state: paused;
}

.partner-marquee-item {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 330px;
  min-width: 330px;
  height: 124px;
  padding: 16px 18px;
  border-right: 1px solid var(--line);
  color: var(--text);
}

.partner-marquee-item img {
  width: 132px;
  height: 68px;
  object-fit: contain;
}

.partner-marquee-item b {
  font-size: 17px;
  font-weight: 500;
}

.partnership-history .partner-marquee-item {
  display: flex;
  justify-content: center;
}

.partner-marquee-logo {
  display: grid;
  flex: 0 1 auto;
  place-items: center;
  max-width: 132px;
  height: 68px;
}

.partnership-history .partner-marquee-logo img {
  grid-area: 1 / 1;
  width: auto;
  max-width: 132px;
  height: auto;
  max-height: 68px;
}

.partnership-history .partner-marquee-item b {
  flex: 0 0 auto;
  white-space: nowrap;
}

:root[data-theme="dark"] .partner-marquee-item--dark-contrast img {
  filter: brightness(0) invert(1);
}

.thanks-marquee .partner-marquee-item {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 78px auto;
  justify-items: center;
  align-content: center;
  gap: 10px;
  min-width: 300px;
  text-align: center;
}

.thanks-marquee .partner-marquee-item img {
  max-width: 170px;
}

.thanks-marquee .partner-marquee-item--eie {
  min-width: 380px;
}

.thanks-marquee .partner-marquee-item--eie img {
  width: min(196px, 100%);
  height: auto;
  max-width: 196px;
}

:root:not([data-theme="dark"]) .thanks-marquee .partner-marquee-item--eie img {
  filter: invert(1);
}

:root:not([data-theme="dark"]) .thanks-marquee .partner-marquee-item--rm img {
  filter: invert(1);
}

.partner-logo-dark {
  display: none;
}

:root[data-theme="dark"] .partner-logo-light {
  display: none;
}

:root[data-theme="dark"] .partner-logo-dark {
  display: block;
}

.partner-marquee-item--xnlm img {
  box-sizing: border-box;
  padding: 4px 8px;
  background: #fff;
}

.thanks-marquee .partner-marquee-item--xnlm img {
  width: 68px;
  height: 68px;
  padding: 4px;
}

:root[data-theme="dark"] .thanks-marquee .partner-marquee-item--cqu img {
  filter: brightness(0) invert(1);
}

:root[data-theme="dark"] .thanks-marquee .partner-marquee-item--pivot img {
  filter: invert(1) brightness(1.08);
}

:root[data-theme="dark"] .thanks-marquee .partner-marquee-item--rm img {
  filter: none;
}

@keyframes partner-marquee {
  to { transform: translateX(-50%); }
}

.sponsor-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 0.42fr);
  gap: 48px;
  align-items: end;
}

.sponsor-contact h2,
.contact-cta h2 {
  margin: 0 0 12px;
  font-size: 30px;
  font-weight: 500;
}

.sponsor-contact address {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 20px;
  padding: 22px 24px;
  border-block: 1px solid var(--line);
  font-style: normal;
}

.sponsor-contact address span {
  grid-row: 1 / span 2;
  color: var(--accent);
  font-size: 13px;
}

.sponsor-contact address strong {
  font-size: 20px;
  font-weight: 500;
}

.sponsor-contact address a {
  color: var(--text);
  font-family: Arial, sans-serif;
  font-size: 17px;
}

.outreach-programs,
.social-directory {
  display: grid;
  gap: 28px;
}

.outreach-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.outreach-list article {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 230px;
  padding: 22px 24px 25px;
  border: 0;
  background: var(--card-bg);
  box-shadow: inset 0 2px 0 transparent;
  transition: box-shadow .18s ease, background .18s ease;
}

.outreach-list article:hover {
  background: var(--surface);
  box-shadow: inset 0 2px 0 var(--accent);
}

.outreach-list article > span {
  padding-top: 0;
  color: var(--accent);
  font: 14px/1 Arial, sans-serif;
}

.outreach-list article > div {
  position: relative;
  padding: 38px 0 0;
}

.outreach-list i {
  position: absolute;
  right: 0;
  top: 0;
  color: var(--accent);
  font-size: 30px;
}

.outreach-list h3 {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 500;
}

.outreach-list p {
  max-width: none;
  font-size: 14px;
  line-height: 1.8;
}

.outreach-cases {
  display: grid;
  gap: 28px;
}

.outreach-case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.outreach-case-card {
  min-width: 0;
  background: var(--card-bg);
}

.outreach-case-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.outreach-case-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.outreach-case-media:hover img,
.outreach-case-media:focus-visible img {
  transform: scale(1.025);
}

.outreach-case-media > span {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  background: rgba(10, 10, 12, .72);
  color: #fff;
  font-size: 11px;
  backdrop-filter: blur(8px);
}

.outreach-case-copy {
  display: grid;
  gap: 12px;
  padding: 24px 26px 28px;
}

.outreach-case-meta {
  color: var(--accent);
  font: 12px/1.4 Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.outreach-case-meta span {
  margin-right: 8px;
}

.outreach-case-copy h3 {
  margin: 0;
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 500;
  line-height: 1.5;
}

.outreach-case-copy > p:last-child {
  font-size: 14px;
  line-height: 1.8;
}

.outreach-gallery-link {
  justify-self: end;
}

@media (max-width: 760px) {
  .outreach-list {
    grid-template-columns: 1fr;
  }

  .outreach-list article {
    min-height: 0;
  }

  .outreach-case-grid {
    grid-template-columns: 1fr;
  }

  .outreach-case-copy {
    padding: 20px;
  }
}

.contact-cta {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
}

.social-platform-list {
  border-top: 1px solid var(--line);
}

.find-qianli-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.find-qianli-card {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.find-qianli-qr {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: clamp(18px, 2.4vw, 34px);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.find-qianli-qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.find-qianli-card-copy {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 18px 20px 20px;
}

.find-qianli-card-copy > i {
  color: var(--accent);
  font-size: 27px;
}

.find-qianli-card-copy > div {
  display: grid;
  gap: 4px;
}

.find-qianli-card-copy strong {
  font-size: 19px;
  font-weight: 500;
}

.find-qianli-card-copy span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.social-platform-list--direct {
  margin-top: 8px;
}

.social-platform-list > a,
.social-platform-list > article {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) max-content;
  gap: 18px;
  align-items: center;
  min-height: 122px;
  padding: 22px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

.social-platform-list > a {
  transition: background 180ms ease;
}

.social-platform-list > a:hover,
.social-platform-list > a:focus-visible {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.social-platform-list i {
  color: var(--accent);
  font-size: 31px;
}

.social-platform-list div {
  display: grid;
  gap: 5px;
}

.social-platform-list strong {
  font-size: 22px;
  font-weight: 500;
}

.social-platform-list span,
.social-platform-list em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}

@media (max-width: 980px) {
  .contact-entry-grid,
  .contact-entry-grid--four,
  .contact-entry-grid--two,
  .contact-channel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .find-qianli-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .contact-entry-grid,
  .contact-entry-grid--four,
  .contact-entry-grid--two,
  .contact-channel-grid,
  .sponsor-contact {
    grid-template-columns: 1fr;
  }

  .contact-entry {
    min-height: 112px;
    padding: 22px;
  }

  .partner-marquee-item {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 12px;
    width: 276px;
    min-width: 276px;
    height: 106px;
    padding: 14px 16px;
  }

  .partner-marquee-item img {
    width: 104px;
    height: 58px;
  }

  .partner-marquee-logo {
    max-width: 104px;
    height: 58px;
  }

  .partnership-history .partner-marquee-logo img {
    width: auto;
    max-width: 104px;
    height: auto;
    max-height: 58px;
  }

  .contact-cta {
    align-items: start;
    flex-direction: column;
  }

  .find-qianli-grid {
    grid-template-columns: 1fr;
  }

  .find-qianli-card {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(150px, 1fr);
    align-items: stretch;
  }

  .find-qianli-qr {
    border-right: 1px solid var(--line);
    border-bottom: 0;
    padding: 14px;
  }

  .social-platform-list > a,
  .social-platform-list > article {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .social-platform-list em {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .partner-marquee-track {
    animation: none;
  }
}

/* Museum landing: eight entrances in one compact 4 x 2 index. */
.page-hero + .video-feature {
  margin-top: 28px;
}

.museum-entry-section {
  margin-top: 54px;
}

.museum-entry-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.museum-entry-grid .entry-card {
  min-height: 164px;
  padding: 20px;
}

.museum-entry-grid .entry-card strong {
  font-size: 20px;
}

.museum-entry-grid .entry-card small {
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 860px) {
  .page-hero + .video-feature {
    margin-top: 24px;
  }
}

/* Team member archive. */
.team-members-hero h1 {
  font-size: clamp(34px, 3.65vw, 56px);
  line-height: 1.12;
}

.team-member-section {
  scroll-margin-top: 112px;
}

.member-archive-jump {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin: 8px 0 62px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card-bg) 92%, var(--accent) 8%);
  color: var(--text);
  transition: border-color 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.member-archive-jump:hover,
.member-archive-jump:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  background: color-mix(in srgb, var(--card-bg) 86%, var(--accent) 14%);
  transform: translateY(-2px);
  outline: none;
}

.member-archive-jump > i:first-child {
  color: var(--accent);
  font-size: 34px;
}

.member-archive-jump > i:last-child {
  color: var(--accent);
  font-size: 22px;
}

.member-archive-jump span {
  display: grid;
  gap: 3px;
}

.member-archive-jump small {
  color: var(--accent);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  letter-spacing: .14em;
}

.member-archive-jump strong {
  font-size: 20px;
  font-weight: 500;
}

.member-archive-jump em {
  color: var(--muted);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 13px;
  font-style: normal;
}

.group-member-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 18px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  color: var(--text);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 13px;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.group-member-link i:first-child,
.group-member-link i:last-child {
  color: var(--accent);
}

.group-member-link:hover,
.group-member-link:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  outline: none;
}

.team-member-section-head {
  display: grid;
  grid-template-columns: minmax(250px, 0.48fr) minmax(620px, 1.52fr);
  gap: 42px;
  align-items: end;
  margin-bottom: 32px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.team-member-section-head h2 {
  margin: 0;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.2;
}

.member-department-tabs-slot {
  align-self: end;
  min-width: 0;
}

.current-member-groups {
  display: block;
}

.member-department-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.member-department-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  height: 52px;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}

.member-department-tab:last-child {
  border-right: 0;
}

.member-department-tab::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 0;
  left: 16px;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(0.45);
  transition: opacity 160ms ease, transform 160ms ease;
}

.member-department-tab i {
  flex: 0 0 auto;
  color: var(--subtle);
  font-size: 18px;
  line-height: 1;
  transition: color 160ms ease;
}

.member-department-tab:is(:hover, :focus-visible, .is-active) {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.member-department-tab:is(:hover, :focus-visible, .is-active) i {
  color: var(--accent);
}

.member-department-tab.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.member-department-tab:focus-visible {
  z-index: 1;
  outline: 1px solid var(--accent);
  outline-offset: -2px;
}

.member-department-stage {
  margin-top: 24px;
}

.member-department-panel[hidden] {
  display: none;
}

.member-department-intro {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.member-department-intro h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
}

.member-department-intro p {
  font-size: 13px;
}

.member-department-panel {
  display: grid;
  gap: 34px;
}

.member-department-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-height: 178px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  text-align: left;
}

.member-department-empty > i {
  color: var(--accent);
  font-size: 28px;
}

.member-department-empty strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
}

.member-department-empty p {
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 12px;
}

.current-member-group > header {
  display: flex;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 13px;
}

.current-member-group > header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.current-member-group > header p {
  font-size: 13px;
}

.current-member-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 18px 12px;
}

.current-member-card {
  min-width: 0;
  padding: 8px 4px 9px;
  border-radius: 4px;
  text-align: center;
  transition: background-color 180ms ease, transform 180ms ease;
}

.current-member-card:hover {
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.current-member-card figure {
  width: min(100%, 112px);
  aspect-ratio: 35 / 49;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface);
}

.current-member-card figure.is-placeholder {
  display: grid;
  place-content: center;
  gap: 5px;
  border: 1px dashed color-mix(in srgb, var(--accent) 36%, var(--line));
  background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
  color: color-mix(in srgb, var(--muted) 78%, var(--accent) 22%);
}

.current-member-card figure.is-placeholder i {
  font-size: 30px;
  line-height: 1;
}

.current-member-card figure.is-placeholder span {
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
}

.current-member-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(0.2);
  transition: filter 180ms ease, transform 260ms ease;
}

.current-member-card:hover img {
  filter: grayscale(0);
  transform: scale(1.025);
}

.current-member-card > div {
  min-height: 48px;
  padding: 8px 2px 0;
}

.current-member-card h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

.current-member-card p {
  margin-top: 3px;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  line-height: 1.4;
}

.past-member-archive {
  display: grid;
  gap: 24px;
}

.past-member-season {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  border-top: 1px solid var(--line);
  padding-top: 26px;
}

.past-member-season:first-child {
  border-top: 0;
  padding-top: 0;
}

.past-member-season > header {
  padding-right: 26px;
}

.past-member-season > header span {
  color: var(--accent);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
}

.past-member-season > header h3 {
  margin: 5px 0 8px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
}

.past-member-season > header p {
  font-size: 12px;
  line-height: 1.6;
}

.past-member-groups {
  display: grid;
  gap: 18px;
}

.past-member-pending {
  width: fit-content;
  margin: 0;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--muted);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 12px;
}

.past-member-group {
  --member-tone: var(--accent);
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 16px;
}

.past-member-group h4 {
  margin: 0;
  color: var(--member-tone);
  font-size: 14px;
  font-weight: 500;
}

.past-member-group h4 small {
  display: block;
  margin-top: 2px;
  color: color-mix(in srgb, var(--member-tone) 62%, var(--muted));
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 400;
}

.past-member-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.past-member-group > div span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--member-tone) 44%, var(--line));
  background: color-mix(in srgb, var(--member-tone) 8%, var(--surface));
  color: color-mix(in srgb, var(--member-tone) 76%, var(--text));
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.past-member-group[data-member-kind="member"] {
  --member-tone: #e5a44b;
}

.past-member-group[data-member-kind="trainee"] {
  --member-tone: #5aa9f8;
}

.past-member-group[data-member-kind="advisor"] {
  --member-tone: #a78bfa;
}

.past-member-group[data-member-kind="teacher"] {
  --member-tone: #57d68d;
}

.past-member-season[data-season="2026"] .past-member-group[data-member-kind="teacher"] {
  --member-tone: #ef4444;
}

.member-section-rail {
  position: fixed;
  z-index: 18;
  top: 50%;
  left: clamp(30px, 3.2vw, 58px);
  display: grid;
  gap: 8px;
  transform: translateY(-50%);
}

.member-section-rail button {
  position: relative;
  display: grid;
  grid-template-columns: 4px;
  place-items: center;
  width: 24px;
  height: 58px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.member-section-rail button > span {
  width: 3px;
  height: 42px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 46%, transparent);
  transition: height 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.member-section-rail button > b {
  position: absolute;
  left: 19px;
  color: var(--subtle);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 8px;
  font-weight: 500;
  opacity: 0;
  transition: opacity 160ms ease;
}

.member-section-rail button > em {
  position: absolute;
  left: 32px;
  width: max-content;
  padding: 3px 7px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  color: var(--text);
  font-size: 10px;
  font-style: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-5px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.member-section-rail button:is(:hover, :focus-visible, .is-active) > span {
  height: 52px;
  background: var(--accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 72%, transparent);
}

.member-section-rail button:is(:hover, :focus-visible, .is-active) > b,
.member-section-rail button:is(:hover, :focus-visible) > em {
  opacity: 1;
}

.member-section-rail button:is(:hover, :focus-visible) > em {
  transform: translateX(0);
}

.member-section-rail button:focus-visible {
  outline: 0;
}

@media (max-width: 1100px) {
  .museum-entry-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .current-member-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .museum-entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-member-section-head,
  .past-member-season {
    grid-template-columns: 1fr;
  }

  .team-member-section-head {
    gap: 14px;
  }

  .member-department-tabs-slot {
    width: 100%;
  }

  .member-department-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .member-department-tab:nth-child(3n) {
    border-right: 0;
  }

  .member-department-tab:nth-child(-n + 3) {
    border-bottom: 1px solid var(--line);
  }

  .current-member-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .past-member-season > header {
    padding: 0 0 18px;
  }

  .member-section-rail {
    display: none;
  }
}

@media (max-width: 520px) {
  .museum-entry-grid {
    grid-template-columns: 1fr;
  }

  .current-member-group > header {
    display: block;
  }

  .member-department-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .member-department-tab {
    height: 46px;
    font-size: 12px;
  }

  .member-department-tab:nth-child(3n) {
    border-right: 1px solid var(--line);
  }

  .member-department-tab:nth-child(2n) {
    border-right: 0;
  }

  .member-department-tab:nth-child(-n + 4) {
    border-bottom: 1px solid var(--line);
  }

  .member-department-intro {
    display: block;
  }

  .member-department-intro p {
    margin-top: 5px;
  }

  .current-member-group > header p {
    margin-top: 6px;
  }

  .current-member-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 8px;
  }

  .current-member-card > div {
    min-height: 44px;
    padding: 7px 2px 0;
  }

  .current-member-card h4 {
    font-size: 13px;
  }

  .past-member-group {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Photo wall */
.gallery-shell {
  width: min(var(--max-width), calc(100% - 40px));
  margin: 52px auto 0;
}

.gallery-tabs {
  position: sticky;
  top: 82px;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: var(--card-bg);
  scrollbar-width: none;
}

.gallery-tabs::-webkit-scrollbar {
  display: none;
}

.gallery-tabs button {
  position: relative;
  min-width: 0;
  min-height: 58px;
  padding: 10px 14px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: color 160ms ease, background-color 160ms ease;
}

.gallery-tabs button:last-child {
  border-right: 0;
}

.gallery-tabs button i {
  font-size: 20px;
  line-height: 1;
}

.gallery-tabs button:hover,
.gallery-tabs button:focus-visible {
  color: var(--text);
  background: var(--surface);
}

.gallery-tabs button.is-active {
  color: #101011;
  background: var(--accent);
  font-weight: 500;
}

.gallery-tabs button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.gallery-panel {
  padding-top: 42px;
}

.gallery-section-heading {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(320px, 1.28fr);
  align-items: end;
  gap: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.gallery-section-heading h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
  font-weight: 500;
}

.gallery-season-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 5px;
}

.gallery-season-switch {
  display: inline-grid;
  grid-auto-flow: column;
  border: 1px solid var(--line);
  background: var(--surface);
}

.gallery-season-switch button {
  min-width: 78px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.gallery-season-switch button:last-child {
  border-right: 0;
}

.gallery-season-switch button:hover,
.gallery-season-switch button:focus-visible {
  color: var(--text);
}

.gallery-season-switch button.is-active {
  background: var(--accent);
  color: #101011;
}

.gallery-season-switch button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.robot-gallery-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 30px auto 0;
  border: 1px solid var(--line);
  background: var(--line);
}

.robot-gallery-item {
  position: relative;
  min-width: 0;
  aspect-ratio: 1 / 1.16;
  padding: 0;
  border: 0;
  background: #f1f1ef;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
  overflow: hidden;
}

.robot-gallery-item:hover,
.robot-gallery-item:focus-visible {
  background: #fff;
}

.robot-gallery-item:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.robot-gallery-visual {
  position: absolute;
  inset: 0 0 66px;
  display: grid;
  place-items: center;
  padding: 24px;
}

.robot-gallery-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translate(var(--robot-x, 0%), var(--robot-y, 0%)) scale(var(--robot-scale, 1));
  transition: transform 220ms ease;
}

.robot-gallery-item:hover .robot-gallery-visual img,
.robot-gallery-item:focus-visible .robot-gallery-visual img {
  transform: translate(var(--robot-x, 0%), var(--robot-y, 0%)) scale(var(--robot-scale-hover, 1.025));
}

.robot-gallery-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 66px;
  padding: 10px 14px;
  background: rgba(18, 18, 20, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.robot-gallery-caption strong {
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
}

.robot-gallery-caption small {
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  color: #c9c9c9;
  font-size: 11px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.team-photo-heading > p {
  padding-bottom: 5px;
  font-size: 16px;
}

.design-filter {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--surface);
}

.design-filter button {
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  cursor: pointer;
}

.design-filter button:last-child {
  border-right: 0;
}

.design-filter button:hover,
.design-filter button:focus-visible {
  color: var(--text);
}

.design-filter button.is-active {
  background: var(--accent);
  color: #101011;
}

.design-filter button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.team-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.team-photo-item {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: zoom-in;
  transition: border-color 180ms ease, transform 180ms ease;
}

.team-photo-item:hover,
.team-photo-item:focus-visible {
  border-color: var(--accent);
  transform: translateY(-3px);
}

.team-photo-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.team-photo-item > img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 220ms ease;
}

.team-photo-item:hover > img,
.team-photo-item:focus-visible > img {
  transform: scale(1.018);
}

.team-photo-count {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(10, 10, 11, 0.78);
  color: #fff;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 11px;
  line-height: 1.2;
}

.team-photo-caption {
  display: flex;
  min-height: 78px;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 12px 15px 13px;
  border-top: 1px solid var(--line);
}

.team-photo-caption small {
  color: var(--accent);
  font-family: var(--brand-font);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.05em;
}

.team-photo-caption strong {
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
}

.gallery-empty {
  min-height: 420px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 20px;
}

.gallery-empty i {
  margin-bottom: 16px;
  color: var(--accent);
  font-size: 40px;
}

.gallery-empty h2 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 500;
}

.gallery-lightbox {
  width: min(1120px, calc(100% - 40px));
  max-width: none;
  height: min(82vh, 720px);
  max-height: none;
  padding: 0;
  border: 1px solid #35353a;
  border-radius: 0;
  background: #101011;
  color: #fff;
  overflow: hidden;
}

.gallery-lightbox[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.gallery-lightbox[open].has-navigation {
  grid-template-columns: 48px minmax(0, 1fr) 48px;
}

.gallery-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.82);
}

.gallery-lightbox-content {
  grid-column: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(320px, 0.84fr);
}

.gallery-lightbox.has-navigation .gallery-lightbox-content {
  grid-column: 2;
}

.gallery-lightbox figure {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 24px;
  background: #f1f1ef;
  display: grid;
  place-items: center;
}

.gallery-lightbox figure img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background: #f1f1ef;
}

.gallery-lightbox-counter {
  position: absolute;
  right: 34px;
  bottom: 34px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(10, 10, 11, 0.76);
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 1;
}

.gallery-lightbox-counter[hidden],
.gallery-lightbox-nav[hidden] {
  display: none;
}

.gallery-robot-record {
  min-width: 0;
  min-height: 0;
  padding: 30px 28px;
  border-left: 1px solid #303035;
  background: #171719;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.gallery-record-heading > span {
  color: var(--accent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.gallery-record-heading > strong {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid #3a3a3f;
  color: #c9c9c9;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
}

.gallery-record-heading > strong[hidden] {
  display: none;
}

.gallery-record-heading h2 {
  margin: 8px 0 0;
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1.18;
  font-weight: 500;
}

.gallery-record-summary {
  color: #d0d0d0;
  font-size: 14px;
  line-height: 1.75;
}

.gallery-record-service {
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid #303035;
  border-bottom: 1px solid #303035;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 13px;
}

.gallery-record-service dt {
  color: #8f8f94;
}

.gallery-record-service dd {
  margin: 0;
  color: #f4f4f4;
}

.gallery-record-contributors h3 {
  margin: 0 0 10px;
  color: #f4f4f4;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.gallery-record-contributors > div {
  display: grid;
  gap: 8px;
}

.gallery-record-contributors > div > div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.55;
}

.gallery-record-contributors span {
  color: #8f8f94;
}

.gallery-record-contributors strong {
  color: #f4f4f4;
  font-weight: 400;
}

.gallery-lightbox-nav,
.gallery-lightbox-close {
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.gallery-lightbox-nav {
  font-size: 36px;
}

.gallery-lightbox-nav:hover,
.gallery-lightbox-nav:focus-visible,
.gallery-lightbox-close:hover,
.gallery-lightbox-close:focus-visible {
  color: var(--accent);
  background: #1b1b1e;
}

.gallery-lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border: 1px solid #3a3a3f;
  background: rgba(10, 10, 11, 0.82);
  font-size: 24px;
}

.organization-page .organization-section {
  margin-top: 0;
}

.match-archive {
  --match-red: #d95353;
  --match-blue: #438fc7;
  --match-gold: #a97a3c;
  --match-win-rate: #8f62b5;
  --match-loss: #66666c;
  padding-top: 44px;
}

.records-page .match-archive {
  margin-top: 28px;
  padding-top: 18px;
}

:root[data-theme="dark"] .match-archive {
  --match-red: #ef6a6a;
  --match-blue: #65aee1;
  --match-gold: #bf9251;
  --match-win-rate: #bc8be0;
  --match-loss: #73737a;
}

.match-archive-heading {
  display: grid;
  grid-template-columns: max-content minmax(240px, 1fr) minmax(430px, 0.95fr);
  align-items: end;
  gap: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.match-archive-heading h2 {
  margin: 2px 0 0;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.2;
}

.match-archive-heading > p {
  padding-bottom: 5px;
  color: var(--muted);
  font-size: 16px;
}

.match-filter-bar {
  grid-template-columns: repeat(2, minmax(180px, 1fr)) auto;
  justify-self: end;
  width: 100%;
  padding: 0;
}

@media (max-width: 1180px) {
  .match-archive-heading {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .match-filter-bar {
    grid-column: 1 / -1;
    justify-self: start;
    max-width: 620px;
  }
}

.match-season-tabs {
  display: inline-grid;
  grid-auto-flow: column;
  justify-self: start;
  margin-top: 0;
  border: 1px solid var(--line);
  background: var(--surface);
}

.match-season-tabs button {
  min-width: 88px;
  height: 42px;
  padding: 0 18px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.match-season-tabs button:last-child {
  border-right: 0;
}

.match-season-tabs button:hover,
.match-season-tabs button:focus-visible {
  color: var(--text);
}

.match-season-tabs button.is-active {
  background: var(--accent);
  color: #101011;
}

.match-season-tabs button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.match-season-summary {
  display: grid;
  grid-template-columns: minmax(190px, 0.7fr) minmax(260px, 1.3fr) auto;
  align-items: center;
  gap: 32px;
  margin-top: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.match-summary-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.match-summary-title span {
  color: var(--accent);
  font-family: var(--brand-font);
  font-size: 14px;
  letter-spacing: 0.08em;
}

.match-summary-title strong {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  font-size: 26px;
  font-weight: 500;
}

.match-summary-title strong .is-wins,
.match-summary-facts .is-wins strong {
  color: var(--accent);
}

.match-summary-title strong .is-losses,
.match-summary-facts .is-losses strong {
  color: var(--match-loss);
}

.match-summary-title strong .is-draws,
.match-summary-facts .is-draws strong {
  color: var(--muted);
}

.match-season-summary > p {
  color: var(--muted);
  line-height: 1.7;
  white-space: pre-line;
}

.match-summary-facts {
  display: flex;
  gap: 24px;
}

.match-summary-facts > span {
  display: flex;
  flex-direction: column;
  min-width: 48px;
  gap: 2px;
}

.match-summary-facts small {
  color: var(--muted);
  font-size: 11px;
}

.match-summary-facts strong {
  font-size: 22px;
  font-weight: 500;
}

.match-summary-facts .is-matches strong {
  color: var(--match-gold);
}

.match-summary-facts .is-win-rate strong {
  color: var(--match-win-rate);
}

.match-list {
  border-bottom: 1px solid var(--line);
}

.match-record {
  display: grid;
  grid-template-columns: 48px 170px minmax(350px, 0.9fr) minmax(330px, 1.1fr);
  align-items: center;
  gap: 20px;
  min-height: 142px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.match-record:first-child {
  border-top: 0;
}

.match-record-index {
  align-self: start;
  padding-top: 4px;
  color: var(--accent);
  font-family: var(--brand-font);
  font-size: 14px;
}

.match-record-context,
.match-record-outcome {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.match-record-context span {
  color: var(--muted);
  font-size: 13px;
}

.match-record-context strong {
  font-size: 17px;
  font-weight: 500;
}

.match-scoreboard {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 44px minmax(130px, 1fr);
  align-items: center;
  gap: 12px;
}

.match-team {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  line-height: 1.35;
}

.match-team__school,
.match-team__name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-team__school {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.76;
}

.match-team__name {
  font-size: 14px;
  font-weight: 500;
}

.match-scoreboard .match-team--red,
.match-score .match-score--red {
  color: var(--match-red);
}

.match-scoreboard .match-team--blue,
.match-score .match-score--blue {
  color: var(--match-blue);
}

.match-scoreboard > .match-team:last-child {
  align-items: flex-end;
  text-align: right;
}

.match-scoreboard .match-team.is-qianli .match-team__name {
  font-weight: 600;
}

.match-scoreboard > strong {
  min-width: 44px;
  font-family: var(--brand-font);
  font-size: 24px;
  font-weight: 400;
  text-align: center;
}

.match-score {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
}

.match-score b {
  color: var(--muted);
  font-weight: 400;
}

.match-record-outcome {
  padding-left: 20px;
  border-left: 2px solid var(--line);
}

.match-record-outcome > strong {
  color: var(--muted);
  font-size: 21px;
  font-weight: 500;
}

.match-record--win .match-record-outcome {
  border-left-color: var(--accent);
}

.match-record--win .match-record-outcome > strong {
  color: var(--accent);
}

.match-record-outcome p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-line;
}

.match-record-outcome small {
  color: var(--accent);
  font-size: 11px;
}

.match-record-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 7px;
}

.match-media-trigger {
  display: inline-grid;
  grid-template-columns: 42px auto;
  align-items: center;
  min-width: 112px;
  height: 42px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: zoom-in;
}

.match-media-trigger:hover,
.match-media-trigger:focus-visible,
.match-video-link:hover,
.match-video-link:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.match-media-trigger:focus-visible,
.match-video-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.match-media-trigger > img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-right: 1px solid var(--line);
}

.match-media-trigger > span {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.match-media-trigger b {
  font-weight: 500;
}

.match-media-trigger small {
  color: var(--subtle);
  font-size: 10px;
}

.match-video-link {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 24px;
  transition: border-color 0.16s, color 0.16s;
}

.match-list-empty {
  padding: 36px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  text-align: center;
}

.has-match-lightbox {
  overflow: hidden;
}

.match-media-lightbox {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(8, 8, 9, 0.94);
  color: #f4f4f4;
}

.match-media-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.72);
}

.match-media-lightbox__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: center;
  padding: 34px 24px 24px;
}

.match-media-lightbox figure {
  grid-column: 2;
  width: fit-content;
  max-width: min(1120px, 100%);
  margin: 0 auto;
}

.match-media-lightbox figure img {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 122px);
  margin: 0 auto;
  object-fit: contain;
  background: #111;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

.match-media-lightbox figcaption {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 12px;
  color: #dedede;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 13px;
}

.match-media-lightbox figcaption small {
  color: #9d9d9d;
}

.match-media-lightbox__close,
.match-media-lightbox__arrow {
  border: 1px solid #4a4a4f;
  background: #171719;
  color: #f4f4f4;
  cursor: pointer;
}

.match-media-lightbox__close:hover,
.match-media-lightbox__arrow:hover,
.match-media-lightbox__close:focus-visible,
.match-media-lightbox__arrow:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.match-media-lightbox__close {
  position: absolute;
  z-index: 2;
  top: 20px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 22px;
}

.match-media-lightbox__arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  justify-self: center;
  font-size: 28px;
}

.match-media-lightbox__arrow--prev {
  grid-column: 1;
}

.match-media-lightbox__arrow--next {
  grid-column: 3;
}

.has-gallery-lightbox {
  overflow: hidden;
}

@media (max-width: 1180px) {
  .match-record {
    grid-template-columns: 42px 145px minmax(300px, 0.92fr) minmax(255px, 1.08fr);
    gap: 18px;
  }

  .robot-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .match-archive-heading,
  .match-season-summary {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .match-summary-facts {
    justify-content: flex-start;
  }

  .match-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  }

  .match-record {
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    gap: 12px 16px;
    padding: 20px 0;
  }

  .match-record-context,
  .match-scoreboard,
  .match-record-outcome {
    grid-column: 2;
  }

  .match-scoreboard {
    width: 100%;
    gap: 10px;
  }

  .match-record-outcome {
    padding: 10px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .match-record--win .match-record-outcome {
    border-left-color: transparent;
  }

  .match-media-lightbox__inner {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    padding-inline: 10px;
  }

  .match-media-lightbox__arrow {
    width: 40px;
    height: 40px;
  }

  .gallery-page .page-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 18px;
  }

  .gallery-shell {
    width: calc(100% - 28px);
    margin-top: 34px;
  }

  .gallery-tabs {
    top: 72px;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(148px, 1fr);
    overflow-x: auto;
  }

  .gallery-tabs button {
    min-height: 52px;
  }

  .gallery-section-heading {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .robot-gallery-grid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-lightbox {
    width: calc(100% - 20px);
    height: min(90vh, 860px);
  }

  .gallery-lightbox[open] {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery-lightbox[open].has-navigation {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery-lightbox-content {
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(240px, 0.8fr) minmax(0, 1.2fr);
  }

  .gallery-lightbox figure {
    padding: 14px;
  }

  .gallery-robot-record {
    padding: 22px 20px;
    border-top: 1px solid #303035;
    border-left: 0;
  }

  .gallery-lightbox-nav {
    position: absolute;
    z-index: 2;
    top: 28%;
    width: 46px;
    height: 58px;
    background: rgba(10, 10, 11, 0.72);
    transform: translateY(-50%);
  }

  .gallery-lightbox-prev {
    left: 0;
  }

  .gallery-lightbox-next {
    right: 0;
  }
}

@media (max-width: 520px) {
  .match-filter-bar {
    grid-template-columns: 1fr;
  }

  .match-filter-bar output {
    padding: 0;
  }

  .match-season-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }

  .match-season-tabs button {
    min-width: 0;
  }

  .match-team__school {
    font-size: 11px;
  }

  .match-team__name {
    font-size: 12px;
  }

  .match-media-lightbox__inner {
    display: block;
    padding: 74px 14px 18px;
  }

  .match-media-lightbox figure img {
    max-height: calc(100vh - 142px);
  }

  .match-media-lightbox__arrow {
    position: absolute;
    z-index: 2;
    bottom: 18px;
  }

  .match-media-lightbox__arrow--prev {
    left: 14px;
  }

  .match-media-lightbox__arrow--next {
    right: 14px;
  }

  .robot-gallery-grid {
    grid-template-columns: 1fr;
  }

  .team-photo-grid {
    grid-template-columns: 1fr;
  }

  .robot-gallery-item {
    aspect-ratio: 1.05 / 1;
  }
}

/* Frontline news and preparation calendar. */
.frontline-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, 0.55fr);
  gap: 18px;
  align-items: stretch;
}

.frontline-panel {
  border: 1px solid var(--line);
  background: var(--card-bg);
  padding: 26px;
}

.frontline-panel--primary {
  min-height: 300px;
}

.frontline-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.frontline-panel-head .page-label {
  margin-bottom: 5px;
}

.frontline-panel-head h2,
.calendar-phases .section-heading h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 500;
}

.frontline-panel-head > span {
  flex: 0 0 auto;
  color: var(--subtle);
  font-size: 13px;
}

.calendar-status {
  padding: 3px 8px;
  border: 1px solid var(--line);
  color: var(--accent) !important;
}

.frontline-empty {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding-top: 42px;
}

.frontline-empty > i {
  color: var(--accent);
  font-size: 44px;
  line-height: 1;
}

.frontline-empty h3 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 500;
}

.frontline-empty p {
  max-width: 650px;
}

.moment-list {
  display: grid;
}

.moment-entry {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 156px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  transition: color 180ms ease, background-color 180ms ease;
}

.moment-entry:last-child {
  border-bottom: 0;
}

.moment-entry:hover,
.moment-entry:focus-visible {
  background: var(--surface);
  outline: 0;
}

.moment-entry-icon {
  color: var(--accent);
  font-size: 40px;
  line-height: 1;
}

.moment-entry-copy {
  min-width: 0;
}

.moment-entry-meta {
  margin-bottom: 5px;
  color: var(--accent);
  font-family: Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.moment-entry h3 {
  margin: 0 0 7px;
  font-size: 21px;
  line-height: 1.35;
  font-weight: 500;
}

.moment-entry-copy > p:last-child {
  max-width: 620px;
  font-size: 14px;
}

.moment-entry-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 14px;
  white-space: nowrap;
}

.frontline-meta-list {
  margin: 0;
}

.frontline-meta-list > div {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 16px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}

.frontline-meta-list > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.frontline-meta-list dt {
  color: var(--subtle);
  font-size: 13px;
}

.frontline-meta-list dd {
  margin: 0;
  color: var(--text);
  line-height: 1.55;
}

/* Qianli news: current records, archive records and shared entry dialog. */
.has-news-dialog {
  overflow: hidden;
}

.qianli-news-hero > p {
  max-width: 720px;
}

.news-home-section {
  margin-top: 34px;
}

.news-home-section--archive {
  margin-top: 54px;
}

.news-section-heading {
  display: grid;
  grid-template-columns: minmax(220px, 0.65fr) minmax(300px, 1fr) auto;
  gap: 28px;
  align-items: end;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.news-section-heading .page-label {
  margin-bottom: 5px;
}

.news-section-heading h2 {
  margin: 0;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 500;
}

.news-section-heading > p {
  padding-bottom: 2px;
  font-size: 15px;
}

.news-more-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.news-more-link:hover,
.news-more-link:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  outline: 0;
}

.news-record-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 20px;
}

/* Aerial robot content */
.air-dart-aerial {
  scroll-margin-top: 110px;
  width: min(1080px, calc(100% - 48px));
  margin: 42px auto 74px;
}

.aerial-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: 38px;
  align-items: center;
  padding: 42px 0 46px;
  border-bottom: 1px solid var(--line);
}

.aerial-hero-copy .air-dart-section-index {
  width: fit-content;
  margin-bottom: 18px;
}

.aerial-hero h2 {
  max-width: 620px;
  margin: 0;
  font-size: clamp(38px, 4.4vw, 54px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.aerial-hero-lead {
  margin-top: 18px;
  max-width: 620px;
  font-size: 15px;
  line-height: 1.9;
}

.aerial-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 22px;
}

.aerial-tag-row span {
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--dart-cyan) 48%, var(--line));
  color: var(--dart-cyan);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.aerial-rule-media {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
}

.aerial-rule-media img {
  width: 100%;
  height: 310px;
  object-fit: cover;
}

.aerial-rule-media figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 3px;
  padding: 30px 18px 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.86));
  color: #fff;
  font-size: 11px;
}

.aerial-rule-media figcaption span {
  color: var(--dart-cyan);
  letter-spacing: 0.12em;
}

.aerial-rule-media figcaption strong {
  font-weight: 400;
}

.aerial-evolution,
.aerial-proof {
  margin-top: 72px;
}

.aerial-era-grid {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.aerial-era-card {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(420px, 1.06fr);
  min-height: 390px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.aerial-era-card--future {
  grid-template-columns: minmax(420px, 1.06fr) minmax(0, 0.94fr);
}

.aerial-era-copy {
  padding: 34px;
}

.aerial-era-copy > span {
  color: var(--dart-cyan);
  font-family: "Space Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
}

.aerial-era-card--future .aerial-era-copy > span {
  color: var(--dart-cyan);
}

.aerial-era-copy h3 {
  margin: 9px 0 14px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
}

.aerial-era-copy p {
  font-size: 14px;
  line-height: 1.9;
}

.aerial-era-copy ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.aerial-era-copy li {
  position: relative;
  padding-left: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.aerial-era-copy li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 4px;
  height: 4px;
  background: var(--dart-cyan);
}

.aerial-era-card--future .aerial-era-copy li::before {
  background: var(--dart-cyan);
}

.aerial-era-card > figure {
  position: relative;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid var(--line);
  background: #f7f7f7;
}

.aerial-era-card > figure img {
  width: 100%;
  height: 100%;
  min-height: 390px;
  object-fit: contain;
}

.aerial-era-card > figure figcaption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  padding: 10px 12px;
  background: rgba(8, 9, 10, 0.84);
  color: #fff;
  font-size: 11px;
}

.aerial-rule-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-right: 1px solid var(--line);
  background: var(--line);
}

.aerial-rule-notes > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  background: color-mix(in srgb, var(--dart-cyan) 5%, var(--bg));
}

.aerial-rule-notes span {
  color: var(--dart-cyan);
  font-family: "Space Mono", monospace;
  font-size: 11px;
}

.aerial-rule-notes strong {
  margin: 14px 0 8px;
  font-size: 18px;
  font-weight: 500;
}

.aerial-rule-notes p {
  font-size: 12px;
  line-height: 1.75;
}

.aerial-neo-reference {
  position: relative;
  grid-column: 1 / -1;
  min-height: 238px;
  margin: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #dce7ef;
}

.aerial-neo-reference img {
  width: 100%;
  height: 238px;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}

.aerial-neo-reference figcaption {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 9px;
  background: rgba(7, 12, 16, 0.76);
  color: #fff;
  font-size: 10px;
}

.aerial-proof {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(480px, 1.18fr);
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.aerial-proof-copy {
  padding: 38px 34px;
}

.aerial-proof-copy h2 {
  margin: 0 0 16px;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.28;
}

.aerial-proof-copy > p:not(.page-label) {
  font-size: 14px;
  line-height: 1.9;
}

.aerial-proof-copy dl {
  display: grid;
  gap: 0;
  margin: 24px 0 0;
  border-top: 1px solid var(--line);
}

.aerial-proof-copy dl > div {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.aerial-proof-copy dt {
  color: var(--dart-cyan);
  font-size: 12px;
}

.aerial-proof-copy dd {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.aerial-fpv-media {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-left: 1px solid var(--line);
  background: #050607;
}

.aerial-fpv-media video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 390px;
  object-fit: contain;
}

.aerial-fpv-media figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 18px 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.88));
  color: #fff;
  font-size: 11px;
  pointer-events: none;
}

.aerial-fpv-media figcaption span {
  color: var(--dart-cyan);
}

.aerial-fpv-media figcaption strong {
  font-weight: 400;
}

.aerial-transition-note {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 28px;
  margin-top: 18px;
  padding: 22px 26px;
  border-left: 3px solid var(--dart-cyan);
  background: color-mix(in srgb, var(--dart-cyan) 5%, var(--card-bg));
}

.aerial-transition-note span {
  color: var(--dart-cyan);
  font-family: "Space Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
}

.aerial-transition-note p {
  font-size: 13px;
  line-height: 1.8;
}

@media (max-width: 980px) {
  .aerial-hero,
  .aerial-era-card,
  .aerial-era-card--future,
  .aerial-proof {
    grid-template-columns: 1fr;
  }

  .aerial-era-card--future .aerial-era-copy {
    order: 1;
  }

  .aerial-era-card--future .aerial-rule-notes {
    order: 2;
  }

  .aerial-era-card > figure,
  .aerial-fpv-media {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .aerial-era-card > figure img {
    height: 360px;
    min-height: 0;
  }

  .aerial-fpv-media video {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 820px) {
  .air-dart-aerial {
    width: calc(100% - 28px);
    margin-top: 34px;
  }

  .aerial-hero {
    gap: 24px;
    padding: 34px 0 38px;
  }

  .aerial-hero h2 {
    font-size: 38px;
  }

  .aerial-rule-media img {
    height: 270px;
  }

  .aerial-evolution,
  .aerial-proof {
    margin-top: 52px;
  }

  .aerial-era-copy,
  .aerial-proof-copy {
    padding: 28px 24px;
  }

  .aerial-transition-note {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (max-width: 560px) {
  .aerial-hero h2 {
    font-size: 34px;
  }

  .aerial-rule-media img {
    height: 220px;
  }

  .aerial-era-copy ul,
  .aerial-rule-notes {
    grid-template-columns: 1fr;
  }

  .aerial-era-copy h3 {
    font-size: 24px;
  }

  .aerial-era-card > figure img {
    height: 260px;
  }

  .aerial-proof-copy h2 {
    font-size: 28px;
  }

  .aerial-fpv-media figcaption {
    position: static;
    display: grid;
    padding: 10px 12px;
    background: #050607;
  }
}

.news-record-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 390px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--text);
  background: var(--card-bg);
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition: border-color 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.news-record-card:hover,
.news-record-card:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, var(--card-bg));
  transform: translateY(-3px);
  outline: 0;
}

.news-record-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.news-record-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 280ms ease, filter 280ms ease;
}

.news-record-card--archive .news-record-card-media img {
  filter: saturate(0.78) contrast(1.02);
}

.news-record-card:hover .news-record-card-media img,
.news-record-card:focus-visible .news-record-card-media img {
  transform: scale(1.025);
  filter: none;
}

.news-record-card-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 19px 20px 18px;
}

.news-record-card-meta {
  display: block;
  margin-bottom: 9px;
  color: var(--accent);
  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.news-record-card-meta time,
.news-entry-dialog-meta time {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.news-entry-relative-days {
  display: inline-flex;
  align-items: center;
  margin-left: 0.62rem;
  padding: 0.18rem 0.46rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 0.72em;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.news-record-card-copy > strong {
  display: block;
  margin-bottom: 9px;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 500;
}

.news-record-card-summary {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.news-record-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 16px;
  color: var(--subtle);
  font-size: 12px;
}

.news-record-card-footer > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
  white-space: nowrap;
}

.news-record-empty {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 150px;
  padding: 26px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.news-record-empty > i {
  color: var(--accent);
  font-size: 34px;
}

.news-record-empty strong,
.news-record-empty span {
  display: block;
}

.news-record-empty strong {
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 500;
}

.news-record-empty span {
  color: var(--subtle);
  font-size: 13px;
}

.news-index-shell {
  margin-top: 32px;
}

.news-index-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 54px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.news-filter-list {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.news-filter-list button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-right: 0;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.news-filter-list button:last-child {
  border-right: 1px solid var(--line);
}

.news-filter-list button:hover,
.news-filter-list button:focus-visible,
.news-filter-list button.is-active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--card-bg));
  outline: 0;
}

.news-index-toolbar > span,
.news-index-toolbar-side > span {
  flex: 0 0 auto;
  color: var(--subtle);
  font-size: 13px;
}

.news-index-toolbar-side {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
}

.news-index-toolbar-side a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 13px;
}

.news-index-toolbar-side a:hover,
.news-index-toolbar-side a:focus-visible {
  color: var(--accent);
}

.news-entry-dialog {
  width: min(1180px, calc(100vw - 48px));
  max-width: none;
  height: min(760px, calc(100vh - 48px));
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--text);
  background: var(--card-bg);
}

.news-entry-dialog:not([open]) {
  display: none;
}

.news-entry-dialog::backdrop {
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(5px);
}

.news-entry-dialog-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  height: 100%;
}

.news-entry-dialog-controls {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 7px;
}

.news-entry-dialog-controls button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  color: var(--text);
  background: color-mix(in srgb, var(--card-bg) 88%, transparent);
  font-size: 18px;
  cursor: pointer;
}

.news-entry-dialog-controls button:hover,
.news-entry-dialog-controls button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: 0;
}

.news-entry-dialog-media {
  position: relative;
  min-width: 0;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: #08090a;
}

.news-entry-dialog-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-entry-dialog[data-news-type="archive"] .news-entry-dialog-media img {
  filter: saturate(0.82) contrast(1.02);
}

.news-entry-dialog-media-nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  background: rgba(0, 0, 0, 0.64);
  font-size: 22px;
  cursor: pointer;
  transform: translateY(-50%);
}

.news-entry-dialog-media-nav:hover,
.news-entry-dialog-media-nav:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: 0;
}

.news-entry-dialog-media-nav--previous {
  left: 14px;
}

.news-entry-dialog-media-nav--next {
  right: 14px;
}

.news-entry-dialog-media-nav[hidden],
.news-entry-dialog-media-dots[hidden] {
  display: none;
}

.news-entry-dialog-media-dots {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 50%;
  display: flex;
  gap: 7px;
  padding: 7px 9px;
  background: rgba(0, 0, 0, 0.58);
  transform: translateX(-50%);
}

.news-entry-dialog-media-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.news-entry-dialog-media-dots button[aria-current="true"] {
  border-color: var(--accent);
  background: var(--accent);
}

.news-entry-dialog-media figcaption {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 14px;
  max-width: calc(100% - 28px);
  padding: 6px 9px;
  color: #fff;
  background: rgba(0, 0, 0, 0.64);
  font-size: 11px;
  line-height: 1.45;
}

.news-entry-dialog-copy {
  min-width: 0;
  padding: 52px 44px 34px;
  overflow-y: auto;
}

.news-entry-dialog-copy .page-label {
  margin-bottom: 9px;
}

.news-entry-dialog-meta {
  margin-bottom: 10px;
  color: var(--subtle);
  font-size: 12px;
}

.news-entry-dialog-copy h2 {
  max-width: 620px;
  margin: 0 0 14px;
  padding-right: 90px;
  font-size: 38px;
  line-height: 1.2;
  font-weight: 500;
}

.news-entry-dialog-summary {
  max-width: 650px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 16px;
  line-height: 1.75;
}

.news-entry-dialog-body {
  margin-top: 20px;
}

.news-entry-dialog-body p {
  margin: 0 0 13px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.9;
  text-indent: 2em;
}

.news-entry-dialog-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 22px 0 0;
  border: 1px solid var(--line);
}

.news-entry-dialog-facts > div {
  min-width: 0;
  padding: 15px;
  border-right: 1px solid var(--line);
}

.news-entry-dialog-facts > div:last-child {
  border-right: 0;
}

.news-entry-dialog-facts dt {
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 11px;
}

.news-entry-dialog-facts dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.news-entry-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
}

.news-entry-dialog-footer > span {
  color: var(--subtle);
  font-size: 12px;
}

.news-entry-dialog-footer > div {
  display: flex;
  gap: 9px;
}

.news-entry-dialog-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 12px;
}

.news-entry-dialog-action:hover,
.news-entry-dialog-action:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: 0;
}

.story-archive-callout {
  display: grid;
  grid-template-columns: minmax(210px, 0.55fr) minmax(360px, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin-bottom: -30px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.story-archive-callout .page-label {
  margin-bottom: 4px;
}

.story-archive-callout h2 {
  margin: 0;
  font-size: 27px;
  line-height: 1.25;
  font-weight: 500;
}

.story-archive-callout > p {
  font-size: 14px;
  line-height: 1.75;
}

@media (max-width: 980px) {
  .news-section-heading {
    grid-template-columns: minmax(190px, 0.7fr) minmax(260px, 1fr) auto;
    gap: 18px;
  }

  .news-record-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .news-entry-dialog-shell {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  }

  .news-entry-dialog-copy {
    padding: 50px 30px 28px;
  }

  .news-entry-dialog-facts {
    grid-template-columns: 1fr;
  }

  .news-entry-dialog-facts > div,
  .news-entry-dialog-facts > div:last-child {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .news-entry-dialog-facts > div:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 760px) {
  .news-section-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .news-section-heading > p {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .news-entry-dialog {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
  }

  .news-entry-dialog-shell {
    display: block;
    height: 100%;
    overflow-y: auto;
  }

  .news-entry-dialog-media {
    height: min(42vh, 330px);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .news-entry-dialog-copy {
    overflow: visible;
  }

  .story-archive-callout {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .story-archive-callout > p {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 620px) {
  .qianli-news-list-hero > p {
    max-width: none;
  }

  .news-home-section,
  .news-home-section--archive,
  .news-index-shell {
    margin-top: 28px;
  }

  .news-section-heading {
    gap: 12px;
    padding-bottom: 14px;
  }

  .news-section-heading h2 {
    font-size: 27px;
  }

  .news-more-link {
    min-height: 36px;
    padding-inline: 10px;
    font-size: 12px;
  }

  .news-record-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 16px;
  }

  .news-record-card {
    min-height: 0;
  }

  .news-record-card-copy {
    min-height: 210px;
    padding: 17px 18px 16px;
  }

  .news-index-toolbar,
  .news-index-toolbar--archive {
    display: grid;
    gap: 12px;
  }

  .news-filter-list {
    width: 100%;
  }

  .news-index-toolbar-side {
    justify-content: space-between;
  }

  .news-entry-dialog-controls {
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    right: 10px;
  }

  .news-entry-dialog-copy {
    padding: 28px 20px calc(28px + env(safe-area-inset-bottom));
  }

  .news-entry-dialog-copy h2 {
    padding-right: 0;
    font-size: 30px;
  }

  .news-entry-dialog-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .news-entry-dialog-footer > div {
    width: 100%;
    flex-wrap: wrap;
  }

  .story-archive-callout {
    gap: 14px;
    margin-top: 28px;
    margin-bottom: -16px;
    padding: 20px;
  }

  .story-archive-callout h2 {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .news-record-card,
  .news-record-card-media img {
    transition: none;
  }

  .news-record-card:hover,
  .news-record-card:focus-visible {
    transform: none;
  }
}

.calendar-phases {
  margin-top: -20px;
}

.calendar-phases .section-heading {
  margin-bottom: 20px;
}

.calendar-phase-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line);
}

.calendar-phase-grid article {
  min-width: 0;
  padding: 22px;
  border-right: 1px solid var(--line);
  background: var(--card-bg);
}

.calendar-phase-grid article:last-child {
  border-right: 0;
}

.calendar-phase-grid i {
  color: var(--accent);
  font-size: 24px;
}

.calendar-phase-grid h3 {
  margin: 14px 0 4px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
}

.calendar-phase-grid p {
  font-size: 13px;
}

@media (max-width: 980px) {
  .frontline-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-phase-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .calendar-phase-grid article:nth-child(3) {
    border-right: 0;
  }

  .calendar-phase-grid article:nth-child(n + 4) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 620px) {
  .frontline-panel {
    padding: 20px;
  }

  .frontline-panel-head {
    gap: 12px;
  }

  .frontline-empty {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    padding-top: 30px;
  }

  .frontline-empty > i {
    font-size: 34px;
  }

  .moment-entry {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    padding: 22px 0;
  }

  .moment-entry-icon {
    font-size: 32px;
  }

  .moment-entry-action {
    grid-column: 2;
    justify-self: start;
  }

  .calendar-phase-grid {
    grid-template-columns: 1fr;
  }

  .calendar-phase-grid article,
  .calendar-phase-grid article:nth-child(3) {
    border-top: 1px solid var(--line);
    border-right: 0;
  }

  .calendar-phase-grid article:first-child {
    border-top: 0;
  }
}

/* Technical group SVGs are authored in white: darken them only on light surfaces. */
.group-grid .entry-card figure img[src$=".svg"] {
  filter: brightness(0) saturate(100%) !important;
}

:root[data-theme="dark"] .group-grid .entry-card figure img[src$=".svg"] {
  filter: none !important;
}

/* 2027 autumn recruitment quotas inside the role cards. */
.group-grid .entry-card-quota {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid color-mix(in srgb, var(--group-tone) 48%, var(--line));
  font-family: Arial, "Microsoft YaHei", sans-serif;
}

.group-grid .entry-card-quota-label {
  margin: 0 0 7px;
  color: var(--group-tone);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.1em;
}

.group-grid .entry-card-quota dl {
  display: grid;
  gap: 3px;
  margin: 0;
}

.group-grid .entry-card-quota dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 9px;
}

.group-grid .entry-card-quota dt,
.group-grid .entry-card-quota dd {
  font-size: 12px;
  line-height: 1.45;
}

.group-grid .entry-card-quota dt {
  color: var(--subtle);
}

.group-grid .entry-card-quota dd {
  margin: 0;
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}

.group-grid .entry-card-quota-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

@media (hover: hover) and (min-width: 861px) {
  .group-grid .entry-card {
    min-height: 400px;
  }

  .group-grid .entry-card-quota {
    position: absolute;
    right: 22px;
    bottom: 22px;
    left: 22px;
    margin-top: 0;
    pointer-events: none;
  }
}

@media (max-width: 860px) {
  .group-grid .entry-card {
    grid-template-rows: 148px auto auto auto auto;
  }
}

/* Data-driven season calendar. */
.season-calendar-hero {
  margin-top: 48px;
  padding-bottom: 26px;
}

.season-calendar-hero h1 {
  font-size: clamp(38px, 4.2vw, 62px);
}

.season-calendar {
  margin-top: 38px;
}

.season-calendar button {
  font-family: Arial, "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

.season-calendar-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.season-calendar-head h2,
.season-overview-intro h3 {
  margin: 0;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 500;
}

.season-calendar-note {
  max-width: 720px;
  margin-top: 9px;
  font-size: 14px;
}

.season-view-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(132px, 1fr));
  flex: 0 0 auto;
  border: 1px solid var(--line);
}

.season-view-switch button {
  min-height: 50px;
  padding: 0 18px;
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--card-bg);
  color: var(--muted);
  cursor: pointer;
}

.season-view-switch button:last-child {
  border-right: 0;
}

.season-view-switch button i {
  margin-right: 7px;
  font-size: 19px;
}

.season-view-switch button.is-active {
  background: var(--accent);
  color: #111;
}

:root:not([data-theme="dark"]) .season-view-switch button.is-active {
  color: #fff;
}

.season-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.season-category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.season-category-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--subtle);
  font-family: Arial, "Microsoft YaHei", sans-serif !important;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.season-category-filter i {
  color: var(--category-color);
  font-size: 17px;
}

.season-category-filter.is-active {
  border-color: color-mix(in srgb, var(--category-color) 60%, var(--line));
  background: color-mix(in srgb, var(--category-color) 12%, var(--card-bg));
  color: var(--text);
}

.season-status-key {
  display: flex;
  gap: 15px;
  flex: 0 0 auto;
  color: var(--subtle);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 12px;
}

.season-status-key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.season-status-sample {
  display: inline-block;
  width: 25px;
  height: 7px;
  background: var(--accent);
}

.season-status-sample--tentative {
  border: 1px dashed var(--accent);
  background: transparent;
}

.season-status-sample--derived {
  background: repeating-linear-gradient(135deg, var(--accent) 0 3px, transparent 3px 6px);
}

.season-view {
  padding-top: 28px;
}

.season-view[hidden],
.season-tooltip[hidden] {
  display: none !important;
}

.season-month-toolbar {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  gap: 18px;
  align-items: center;
  padding: 0 0 22px;
}

.season-icon-button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--card-bg);
  color: var(--text);
  font-size: 25px;
  cursor: pointer;
}

.season-icon-button:disabled {
  opacity: 0.32;
  cursor: default;
}

.season-month-heading {
  text-align: center;
}

.season-month-heading p {
  color: var(--accent);
  font-family: Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
}

.season-month-heading h3 {
  margin: 2px 0 4px;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 500;
}

.season-month-heading span {
  color: var(--muted);
  font-size: 14px;
}

.season-month-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 18px;
  align-items: stretch;
}

.season-month-scroll,
.season-overview-scroll {
  min-width: 0;
  border: 1px solid var(--line);
}

.season-month-scroll {
  overflow-x: auto;
  scrollbar-color: var(--accent) var(--surface);
}

.season-overview-scroll {
  overflow-x: hidden;
}

.season-month-calendar {
  min-width: 720px;
  background: var(--line);
}

.season-weekdays,
.season-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
}

.season-weekdays span {
  display: grid;
  place-items: center;
  height: 34px;
  background: var(--surface);
  color: var(--subtle);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 12px;
}

.season-day {
  min-width: 0;
  min-height: 104px;
  padding: 7px;
  background: var(--card-bg);
}

.season-day.is-outside {
  background: color-mix(in srgb, var(--surface) 70%, var(--bg));
}

.season-day-number {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 12px;
}

.season-day.is-outside .season-day-number {
  color: var(--line);
}

.season-day.is-today .season-day-number {
  background: var(--accent);
  color: #111;
  border-radius: 50%;
  font-weight: 700;
}

.season-day-events {
  display: grid;
  gap: 3px;
  margin-top: 5px;
}

.season-day-event {
  width: 100%;
  min-width: 0;
  height: 15px;
  overflow: hidden;
  padding: 0 4px;
  border: 0;
  background: var(--event-color);
  color: #111;
  font-family: Arial, "Microsoft YaHei", sans-serif !important;
  font-size: 9px;
  line-height: 15px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.season-event--tentative {
  border: 1px dashed var(--event-color) !important;
  background: color-mix(in srgb, var(--event-color) 18%, var(--card-bg)) !important;
  color: var(--text) !important;
}

.season-event--derived {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--event-color) 58%, transparent) 0 4px, color-mix(in srgb, var(--event-color) 20%, var(--card-bg)) 4px 8px) !important;
  color: var(--text) !important;
}

.season-event--major {
  outline: 1px solid var(--text);
  outline-offset: 1px;
  font-weight: 700 !important;
}

.season-day-more {
  color: var(--subtle);
  font-family: Arial, sans-serif;
  font-size: 10px;
  line-height: 1;
}

.season-event-detail {
  min-height: 100%;
  padding: 24px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--event-color, var(--accent));
  background: var(--card-bg);
}

.season-detail-meta {
  color: var(--event-color, var(--accent));
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.season-event-detail h4 {
  margin: 8px 0 4px;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 500;
}

.season-detail-range {
  color: var(--text);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 12px;
}

.season-detail-description {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.8;
}

.season-detail-source {
  margin-top: 16px;
  color: var(--subtle);
  font-size: 12px;
  line-height: 1.6;
}

.season-detail-related {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.season-detail-related > p {
  flex-basis: 100%;
  margin-bottom: 4px;
  font-size: 12px;
}

.season-detail-related button {
  padding: 4px 7px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
  cursor: pointer;
}

.season-detail-related button.is-active {
  border-color: var(--event-color);
  color: var(--text);
}

.season-detail-empty {
  display: grid;
  place-items: center;
  min-height: 230px;
  text-align: center;
}

.season-detail-empty i {
  color: var(--subtle);
  font-size: 34px;
}

.season-overview-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.season-overview-intro p:last-child {
  max-width: 620px;
  font-size: 14px;
}

.season-overview {
  width: 100%;
  min-width: 0;
  background: var(--card-bg);
}

.season-overview-ruler,
.season-overview-row {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
}

.season-overview-corner,
.season-overview-label {
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-right: 1px solid var(--line);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 12px;
}

.season-overview-corner {
  height: 42px;
  color: var(--accent);
  letter-spacing: 0.08em;
}

.season-overview-months {
  display: flex;
  min-width: 0;
}

.season-overview-months span {
  display: grid;
  place-items: center;
  height: 42px;
  border-right: 1px solid var(--line);
  color: var(--subtle);
  font-family: Arial, sans-serif;
  font-size: 11px;
}

.season-overview-row {
  min-height: 76px;
  border-top: 1px solid var(--line);
}

.season-overview-label {
  color: var(--muted);
}

.season-overview-track {
  position: relative;
  min-height: 76px;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(8.333% - 1px), var(--soft-line) calc(8.333% - 1px) 8.333%);
}

.season-overview-bar {
  position: absolute;
  z-index: 1;
  height: 21px;
  overflow: hidden;
  padding: 0 6px;
  border: 0;
  background: var(--event-color);
  color: #111;
  font-family: Arial, "Microsoft YaHei", sans-serif !important;
  font-size: 10px;
  line-height: 21px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.season-overview-marker {
  position: absolute;
  top: 7px;
  bottom: 7px;
  width: 2px;
  padding: 0;
  border: 0;
  background: var(--event-color);
  color: var(--event-color);
  cursor: pointer;
}

.season-overview-marker i {
  position: absolute;
  top: -3px;
  left: 50%;
  font-size: 14px;
  transform: translateX(-50%);
}

.season-event-detail--overview {
  display: grid;
  grid-template-columns: minmax(170px, 0.55fr) minmax(180px, 0.55fr) minmax(280px, 1.4fr) minmax(200px, 0.8fr);
  gap: 18px;
  min-height: 0;
  margin-top: 14px;
  padding: 18px 20px;
  border-top-width: 2px;
}

.season-event-detail--overview .season-detail-meta,
.season-event-detail--overview h4,
.season-event-detail--overview .season-detail-range,
.season-event-detail--overview .season-detail-description,
.season-event-detail--overview .season-detail-source {
  margin: 0;
  align-self: center;
}

.season-event-detail--overview h4 {
  font-size: 18px;
}

.season-calendar-source {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 18px;
  color: var(--subtle);
  font-size: 12px;
}

.season-calendar-source i {
  margin-top: 2px;
  color: var(--accent);
  font-size: 17px;
}

.season-tooltip {
  position: fixed;
  z-index: 100;
  display: grid;
  width: min(280px, calc(100vw - 24px));
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
  color: var(--text);
  pointer-events: none;
}

.season-tooltip strong {
  font-size: 14px;
  font-weight: 500;
}

.season-tooltip span,
.season-tooltip small {
  color: var(--muted);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
}

@media (max-width: 980px) {
  .season-calendar-head,
  .season-legend {
    align-items: stretch;
    flex-direction: column;
  }

  .season-view-switch {
    width: min(100%, 420px);
  }

  .season-status-key {
    justify-content: flex-start;
  }

  .season-month-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .season-event-detail {
    min-height: 0;
  }

  .season-event-detail--overview {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .season-calendar-hero {
    margin-top: 36px;
  }

  .season-calendar {
    margin-top: 28px;
  }

  .season-calendar-head h2 {
    font-size: 24px;
  }

  .season-view-switch {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .season-view-switch button {
    min-width: 0;
    padding: 0 8px;
    font-size: 13px;
  }

  .season-legend {
    padding: 14px 0;
  }

  .season-category-filter {
    flex: 1 1 calc(33.333% - 8px);
    justify-content: center;
  }

  .season-status-key {
    flex-wrap: wrap;
    gap: 8px 13px;
  }

  .season-month-toolbar {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 8px;
  }

  .season-icon-button {
    width: 38px;
    height: 38px;
  }

  .season-month-heading h3 {
    font-size: 22px;
  }

  .season-month-heading span {
    display: block;
    font-size: 12px;
    line-height: 1.55;
  }

  .season-event-detail {
    padding: 20px;
  }

  .season-overview-intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .season-event-detail--overview {
    display: block;
  }

  .season-event-detail--overview > * + * {
    margin-top: 8px;
  }
}

/* Season calendar view hierarchy and continuous progress treatment. */
.season-calendar-hero {
  grid-template-columns: minmax(0, 1.05fr) minmax(440px, 0.95fr);
  align-items: end;
}

.season-calendar-hero h1 {
  font-size: clamp(32px, 2.8vw, 44px);
  white-space: nowrap;
}

.season-calendar-hero-side {
  display: grid;
  gap: 18px;
}

.season-calendar-hero-side > p {
  max-width: 560px;
  font-size: 13px;
}

.season-calendar-hero + .season-calendar {
  margin-top: 12px;
}

.season-view-switch {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
}

.season-view-switch button {
  min-height: 40px;
  padding: 0 11px;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 12px;
  line-height: 1;
}

.season-view-switch button i {
  margin-right: 5px;
  font-size: 15px;
}

.season-view-switch button.is-active,
:root:not([data-theme="dark"]) .season-view-switch button.is-active {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--accent) 27%, var(--card-bg));
  color: var(--text);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 70%, transparent);
}

.season-legend {
  padding: 12px 0;
}

.season-category-filter {
  min-height: 30px;
  padding: 3px 8px;
  font-size: 11px;
}

.season-category-filter i {
  font-size: 14px;
}

.season-status-key {
  font-size: 11px;
}

.season-status-sample {
  background: #aeb6c2;
}

.season-status-sample--tentative {
  border-color: #aeb6c2;
  background: transparent;
}

.season-status-sample--derived {
  background: repeating-linear-gradient(135deg, #aeb6c2 0 3px, transparent 3px 6px);
}

.season-view {
  padding-top: 22px;
}

.season-progress-zoom-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 26px;
}

.season-progress-zoom-head h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 500;
}

.season-progress-zoom-head > p {
  max-width: 540px;
  font-size: 12px;
}

.season-progress-master {
  overflow-x: auto;
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  scrollbar-color: var(--text) var(--surface);
}

.season-progress-months,
.season-progress-track,
.season-progress-range,
.season-progress-window-label {
  min-width: 920px;
}

.season-progress-months {
  display: flex;
}

.season-progress-month,
.season-overview-months button {
  display: grid;
  place-items: center;
  height: 32px;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--subtle);
  font-family: Arial, "Microsoft YaHei", sans-serif !important;
  font-size: 10px;
  cursor: pointer;
}

.season-progress-month:hover,
.season-progress-month:focus-visible,
.season-overview-months button:hover,
.season-overview-months button:focus-visible {
  background: var(--surface);
  color: var(--text);
  outline: 0;
}

.season-progress-track {
  position: relative;
  height: 68px;
  margin-top: 3px;
  overflow: hidden;
  background: var(--surface);
}

.season-progress-segment {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  padding: 11px 8px 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--progress-color) 72%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--progress-color) 72%, transparent);
  border-right: 1px solid color-mix(in srgb, #101011 38%, transparent);
  background: color-mix(in srgb, var(--progress-color) 70%, var(--card-bg));
  color: var(--text);
  font-family: Arial, "Microsoft YaHei", sans-serif !important;
  font-size: 10px;
  line-height: 1.2;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}

.season-progress-segment--pause {
  color: var(--muted);
}

.season-progress-highlight {
  position: absolute;
  z-index: 2;
  bottom: 5px;
  min-width: max-content;
  height: 28px;
  overflow: visible;
  padding: 0 9px;
  border: 0;
  background: color-mix(in srgb, var(--highlight-color) 66%, var(--card-bg));
  color: var(--text);
  font-family: Arial, "Microsoft YaHei", sans-serif !important;
  font-size: 9px;
  line-height: 28px;
  white-space: nowrap;
  cursor: help;
  box-shadow: none;
}

.season-progress-window {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  border: 1px solid color-mix(in srgb, var(--text) 78%, transparent);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  box-shadow: none;
  pointer-events: none;
  transition: left 160ms ease, width 160ms ease;
}

.season-progress-range {
  display: block;
  width: 100%;
  height: 22px;
  margin: 12px 0 0;
  accent-color: var(--text);
  cursor: ew-resize;
}

.season-progress-window-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 2px;
  color: var(--muted);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
}

.season-progress-zoom-head {
  margin: 28px 0 14px;
}

.season-progress-zoom {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.season-progress-zoom-ruler,
.season-progress-zoom-row {
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr);
  min-width: 720px;
}

.season-progress-zoom-corner,
.season-progress-zoom-label {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
}

.season-progress-zoom-ruler {
  height: 40px;
}

.season-progress-zoom-months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.season-progress-zoom-months button {
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
  cursor: pointer;
}

.season-progress-zoom-months button:hover,
.season-progress-zoom-months button:focus-visible {
  background: var(--surface);
  color: var(--accent);
  outline: 0;
}

.season-progress-zoom-row {
  min-height: 68px;
  border-top: 1px solid var(--line);
}

.season-progress-zoom-track {
  position: relative;
  min-height: 68px;
  background-image: linear-gradient(90deg, transparent calc(33.333% - 1px), var(--line) calc(33.333% - 1px) 33.333%, transparent 33.333% calc(66.666% - 1px), var(--line) calc(66.666% - 1px) 66.666%, transparent 66.666%);
}

.season-progress-zoom-bar {
  position: absolute;
  height: 21px;
  overflow: hidden;
  padding: 0 7px;
  border: 0;
  background: var(--event-color);
  color: #111;
  font-family: Arial, "Microsoft YaHei", sans-serif !important;
  font-size: 10px;
  line-height: 21px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.season-day-event:not(.season-event--tentative):not(.season-event--derived),
.season-overview-bar:not(.season-event--tentative):not(.season-event--derived),
.season-progress-zoom-bar:not(.season-event--tentative):not(.season-event--derived) {
  border-top: 1px solid color-mix(in srgb, var(--event-color) 68%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--event-color) 68%, transparent);
  background: color-mix(in srgb, var(--event-color) 64%, var(--card-bg));
  color: var(--text);
}

.season-progress-detail {
  margin-top: 12px;
}

.season-calendar.is-memo-view .season-legend {
  display: none;
}

.season-memo-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.season-memo-head h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.season-memo-head > p {
  max-width: 620px;
  font-size: 12px;
}

.season-memo-list {
  border-bottom: 1px solid var(--line);
}

.season-memo-item {
  display: grid;
  grid-template-areas: "number icon title date status note";
  grid-template-columns: 28px 34px minmax(210px, 0.75fr) minmax(210px, 0.72fr) 70px minmax(280px, 1.35fr);
  gap: 12px;
  align-items: center;
  min-height: 68px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.season-memo-item:first-child {
  border-top: 0;
}

.season-memo-number {
  grid-area: number;
  color: var(--accent);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.season-memo-icon {
  grid-area: icon;
  color: var(--accent);
}

.season-memo-icon i {
  font-size: 23px;
  line-height: 1;
}

.season-memo-title {
  grid-area: title;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}

.season-memo-date,
.season-memo-note,
.season-memo-status {
  font-family: Arial, "Microsoft YaHei", sans-serif;
}

.season-memo-date {
  grid-area: date;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.season-memo-status {
  grid-area: status;
  justify-self: start;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, #a9c4e8 70%, var(--line));
  background: color-mix(in srgb, #a9c4e8 16%, var(--card-bg));
  color: var(--text);
  font-size: 10px;
}

.season-memo-item--pending .season-memo-status {
  border-style: dashed;
  color: var(--muted);
}

.season-memo-note {
  grid-area: note;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.season-overview-months button {
  flex: 0 0 auto;
}

.season-month-grid {
  gap: 0;
}

.season-day {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.season-day:nth-child(7n) {
  border-right: 0;
}

.season-day-events {
  margin-right: -7px;
  margin-left: -7px;
}

.season-day-event {
  padding-right: 7px;
  padding-left: 7px;
}

.season-day-event.season-event--tentative {
  border-right: 0 !important;
  border-left: 0 !important;
}

@media (max-width: 980px) {
  .season-calendar-hero {
    grid-template-columns: 1fr;
  }

  .season-calendar-hero h1 {
    white-space: normal;
  }

  .season-calendar-hero-side {
    gap: 14px;
  }

  .season-progress-zoom-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .season-memo-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .season-memo-item {
    grid-template-areas:
      "number icon title date status"
      ". . note note note";
    grid-template-columns: 26px 32px minmax(180px, 0.8fr) minmax(190px, 0.85fr) 70px;
    row-gap: 7px;
  }

  .season-memo-note {
    grid-column: auto;
  }
}

@media (max-width: 620px) {
  .season-calendar-hero + .season-calendar {
    margin-top: 10px;
  }

  .season-calendar-hero h1 {
    font-size: clamp(28px, 8.5vw, 34px);
  }

  .season-view-switch {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .season-view-switch button {
    min-height: 38px;
    padding: 0 3px;
    font-size: 10px;
  }

  .season-view-switch button i {
    margin-right: 2px;
    font-size: 14px;
  }

  .season-progress-zoom-head h3 {
    font-size: 18px;
  }

  .season-progress-master {
    padding: 12px;
  }

  .season-memo-item {
    grid-template-areas:
      "number icon title status"
      ". . date date"
      ". . note note";
    grid-template-columns: 24px 30px minmax(0, 1fr) auto;
    gap: 7px 10px;
    min-height: 0;
    padding: 12px 0;
  }

  .season-progress-months,
  .season-progress-track,
  .season-progress-range,
  .season-progress-window-label {
    min-width: 760px;
  }
}






/* Training lesson library and group introduction letter */
.resource-tabs {
  width: min(860px, calc(100vw - 48px));
  margin: 22px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.resource-tabs button {
  min-height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
}

.resource-tabs button:last-child {
  border-right: 0;
}

.resource-tabs button.is-active {
  color: #111;
  background: var(--accent);
}

.resource-tabs button:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.resource-panel[hidden] {
  display: none;
}

.page-hero ~ .resource-panel {
  margin-top: 54px;
}

.resource-file-list {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.resource-file-sections {
  display: grid;
  gap: 36px;
  margin-top: 28px;
}

.resource-file-group {
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.resource-file-group:first-child {
  padding-top: 0;
  border-top: 0;
}

.resource-file-group-heading {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(280px, 1.2fr);
  gap: 36px;
  align-items: end;
}

.resource-file-group-heading h3 {
  margin: 0;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.3;
}

.resource-file-group .resource-file-list {
  margin-top: 14px;
}

.resource-construction {
  min-height: 360px;
  padding: 42px 24px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.page-hero > .resource-tabs {
  width: 100%;
  margin: 0;
}

.resource-construction > i {
  margin-bottom: 20px;
  color: var(--accent);
  font-size: 72px;
  line-height: 1;
}

.resource-construction h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 500;
  line-height: 1.25;
}

.resource-construction > p:last-child {
  max-width: 620px;
}

.resource-file-card {
  min-height: 92px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  background: var(--card-bg);
  border: 1px solid var(--line);
  transition: border-color 180ms ease, background 180ms ease;
}

.resource-file-card:hover,
.resource-file-card:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}

.resource-file-card > i {
  color: var(--accent);
  font-size: 34px;
}

.resource-file-card span {
  min-width: 0;
}

.resource-file-card small,
.resource-file-card em {
  color: var(--subtle);
  font-size: 12px;
  font-style: normal;
}

.resource-file-card strong {
  display: block;
  margin-top: 5px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.35;
}

.resource-file-card em {
  color: var(--accent);
}
html.has-group-letter {
  overflow: hidden;
}

.training-library-heading,
.hall-panel-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(280px, 1.15fr);
  gap: 48px;
  align-items: end;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.training-library-heading h2,
.hall-panel-heading h2 {
  margin: 8px 0 0;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.18;
}

.training-library-heading > p,
.hall-panel-heading > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}

.hall-page-hero {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  align-items: end;
}
@media (min-width: 1181px) {
  .hall-page-hero {
    grid-template-columns: minmax(340px, 0.68fr) max-content minmax(312px, 0.48fr);
    column-gap: 48px;
  }

  .hall-page-hero > p {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    margin: 0 0 4px;
    white-space: nowrap;
  }

  .hall-page-hero .hall-tabs {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin: 0;
  }

  .hall-alumni-toolbar .hall-panel-heading {
    grid-template-columns: max-content max-content;
    gap: clamp(28px, 4vw, 64px);
  }

  .hall-alumni-toolbar .hall-panel-heading > p {
    white-space: nowrap;
  }
}

.training-library-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}

.training-card {
  --training-tone: var(--accent);
  position: relative;
  display: flex;
  min-height: 350px;
  padding: 20px;
  overflow: hidden;
  flex-direction: column;
  color: var(--text);
  text-decoration: none;
  background: var(--card-bg);
  border: 1px solid var(--line);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.training-card:nth-child(1) {
  --training-tone: #c59a4b;
}

.training-card:nth-child(2) {
  --training-tone: #6e9dca;
}

.training-card:nth-child(3) {
  --training-tone: #8976b2;
}

.training-card:nth-child(4) {
  --training-tone: #62a66f;
}

.training-card::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 0;
  left: 20px;
  height: 2px;
  background: var(--training-tone);
  opacity: 0.72;
}

.training-card:hover,
.training-card:focus-visible {
  z-index: 1;
  transform: translateY(-5px);
  border-color: var(--training-tone);
  background: color-mix(in srgb, var(--card-bg) 92%, var(--training-tone));
  box-shadow: 0 14px 34px color-mix(in srgb, transparent 84%, var(--training-tone));
  outline: none;
}

.training-card.is-ready {
  background: var(--card-bg);
}

.training-card img {
  box-sizing: border-box;
  width: 100%;
  height: 128px;
  margin: 0 0 20px;
  padding: 18px;
  object-fit: contain;
  background: var(--surface);
}

[data-theme="dark"] .training-card img {
  filter: none;
}

[data-theme="light"] .training-card img {
  filter: brightness(0) saturate(100%);
}

[data-theme="dark"] .group-letter-header img {
  filter: invert(1);
}

.training-card-state,
.training-card small,
.group-letter-kicker,
.group-letter-lesson-label,
.hall-kicker,
.alumni-period-index {
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.training-card-state {
  position: absolute;
  top: 30px;
  right: 30px;
  padding: 5px 8px;
  color: var(--training-tone);
  background: color-mix(in srgb, var(--card-bg) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--training-tone) 55%, var(--line));
}

.training-card h3 {
  margin: 8px 0 12px;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.25;
}

.training-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.training-card small {
  display: block;
  margin-bottom: 7px;
  color: var(--training-tone);
}

.group-letter-dialog {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  padding: 22px;
  place-items: center;
  color: var(--text);
  background: rgb(0 0 0 / 72%);
  backdrop-filter: blur(6px);
}

.group-letter-dialog[hidden] {
  display: none !important;
}

.group-letter-shell {
  position: relative;
  width: min(1220px, calc(100vw - 44px));
  max-height: 90dvh;
  padding: 42px 54px 50px;
  overflow: auto;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 28px 90px rgb(0 0 0 / 35%);
  scrollbar-color: var(--accent) var(--surface);
  scrollbar-width: thin;
}

.group-letter-close {
  position: absolute;
  z-index: 2;
  top: 22px;
  right: 22px;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}

.group-letter-close:hover,
.group-letter-close:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}

.group-letter-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 28px;
  align-items: start;
  padding: 4px 64px 28px 0;
  border-bottom: 1px solid var(--line);
}

.group-letter-header h2 {
  margin: 8px 0 6px;
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 500;
  line-height: 1.12;
}

.group-letter-header p {
  margin: 0;
  color: var(--muted);
}

.group-letter-header img {
  width: 96px;
  height: 96px;
  padding: 12px;
  object-fit: contain;
  background: var(--surface);
}

.group-letter-recruitment,
.group-letter-lesson {
  padding-top: 28px;
}

.group-letter-recruitment {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.group-letter-recruitment > p,
.group-letter-summary,
.group-letter-outcome p,
.group-letter-topic-list li,
.group-letter-stage-list li {
  color: var(--muted);
  line-height: 1.85;
}

.group-letter-direction-list,
.group-letter-tools {
  display: flex;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  flex-wrap: wrap;
  list-style: none;
}

.group-letter-direction-list li,
.group-letter-tools li,
.group-letter-tools span {
  padding: 7px 11px;
  color: var(--text);
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.group-letter-detail,
.group-letter-source {
  display: inline-flex;
  min-height: 42px;
  margin-top: 20px;
  padding: 0 16px;
  align-items: center;
  gap: 7px;
  color: var(--text);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--line);
}

.group-letter-detail:hover,
.group-letter-source:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.group-letter-lesson-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
}

.group-letter-lesson h3 {
  margin: 7px 0 0;
  font-size: clamp(27px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.25;
}

.group-letter-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 24px 0;
}

.group-letter-gallery img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--surface);
  border: 1px solid var(--line);
}

.group-letter-outcome {
  margin: 22px 0;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-left: 3px solid var(--accent);
}

.group-letter-outcome strong {
  display: block;
  margin-bottom: 5px;
}

.group-letter-outcome > span {
  display: block;
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0;
}

.group-letter-outcome p {
  margin: 0;
}

.group-letter-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
  margin-top: 24px;
}

.group-letter-columns h4 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 500;
}

.group-letter-topic-list,
.group-letter-stage-list {
  margin: 0;
  padding-left: 20px;
}

.group-letter-pending {
  margin-top: 22px;
  padding: 22px;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--line);
}

.group-letter-author {
  margin: 18px 0 0;
  color: var(--subtle);
  font-size: 14px;
}

.group-letter-author i {
  margin-right: 6px;
  color: var(--accent);
}

/* Training reader */
.training-reader-page {
  padding-bottom: 72px;
}

.training-reader-hero {
  min-height: 0;
  margin-top: 48px;
}

.training-document-shell {
  width: min(1120px, calc(100vw - 48px));
  margin: 0 auto;
  background: var(--card-bg);
  border: 1px solid var(--line);
}

.training-document-meta {
  display: flex;
  min-height: 74px;
  padding: 18px 22px;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.training-document-meta > div {
  min-width: 150px;
}

.training-document-meta span {
  display: block;
  margin-bottom: 5px;
  color: var(--subtle);
  font-size: 12px;
}

.training-document-meta strong {
  font-weight: 500;
}

.training-download-link,
.training-source-link {
  display: inline-flex;
  min-height: 42px;
  margin-left: auto;
  padding: 0 15px;
  align-items: center;
  gap: 7px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--line);
}

.training-source-link + .training-download-link {
  margin-left: 0;
}

.training-download-link:hover,
.training-source-link:hover,
.training-download-link:focus-visible,
.training-source-link:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}

.training-markdown {
  max-width: 880px;
  margin: 0 auto;
  padding: 46px 42px 58px;
  color: var(--text);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.training-markdown h2,
.training-markdown h3,
.training-markdown h4,
.training-markdown h5 {
  margin: 34px 0 14px;
  font-weight: 500;
  line-height: 1.28;
}

.training-markdown h2 {
  font-size: clamp(28px, 3vw, 42px);
}

.training-markdown h3 {
  font-size: 26px;
}

.training-markdown h4 {
  font-size: 21px;
}

.training-markdown p,
.training-markdown li,
.training-markdown blockquote {
  color: var(--muted);
  line-height: 1.95;
}

.training-markdown p {
  margin: 0 0 16px;
}

.training-markdown ul,
.training-markdown ol {
  margin: 0 0 22px;
  padding-left: 22px;
}

.training-markdown a {
  color: var(--accent);
  overflow-wrap: anywhere;
  word-break: break-all;
  text-underline-offset: 4px;
}

.training-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 28px;
}

.training-link-grid a {
  display: grid;
  min-height: 96px;
  padding: 17px 18px;
  align-content: center;
  gap: 7px;
  color: var(--text);
  text-decoration: none;
  word-break: normal;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  transition: border-color 180ms ease, transform 180ms ease;
}

.training-link-grid a:hover,
.training-link-grid a:focus-visible {
  transform: translateY(-2px);
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}

.training-link-grid strong {
  font-size: 16px;
  font-weight: 500;
}

.training-link-grid span {
  color: var(--subtle);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
}

@media (max-width: 720px) {
  .training-link-grid {
    grid-template-columns: 1fr;
  }
}

.training-markdown blockquote {
  margin: 24px 0;
  padding: 16px 18px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border-left: 3px solid var(--accent);
}

.training-markdown blockquote p:last-child {
  margin-bottom: 0;
}

.training-markdown img {
  display: block;
  width: 100%;
  max-height: 520px;
  margin: 22px 0;
  object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--line);
}

.training-markdown table {
  width: 100%;
  margin: 0 0 24px;
  border-collapse: collapse;
}

.training-markdown th,
.training-markdown td {
  padding: 10px 12px;
  color: var(--muted);
  text-align: left;
  border: 1px solid var(--line);
}

.training-markdown code {
  padding: 2px 5px;
  color: var(--text);
  background: var(--surface);
}

.training-markdown pre {
  overflow: auto;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.training-loading,
.training-document-fallback {
  color: var(--subtle);
}

.training-pdf-frame {
  height: min(78vh, 820px);
  min-height: 520px;
  background: var(--surface);
}

.training-pdf-frame object {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.training-pdf-frame p {
  margin: 0;
  padding: 28px;
  color: var(--muted);
}

/* Join Q&A */
.qa-page-hero + .qa-section {
  margin-top: 20px;
}

@media (min-width: 1101px) {
  .qa-page-hero {
    grid-template-columns: minmax(250px, .55fr) minmax(0, 1.45fr);
  }

  .qa-page-hero > p {
    max-width: none;
    white-space: nowrap;
  }
}

.qa-controls-row {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  align-items: end;
  gap: 18px;
  width: min(100%, 1180px);
  margin: 0 auto 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.qa-view-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 0 0 auto;
  width: 248px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.qa-view-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 7px 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.qa-view-switch button + button {
  border-left: 1px solid var(--line);
}

.qa-view-switch button:hover,
.qa-view-switch button:focus-visible,
.qa-view-switch button.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}

.qa-view-switch button i {
  font-size: 18px;
}

.qa-heading {
  display: flex;
  justify-content: stretch;
}

.qa-filter-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 230px)) minmax(250px, 1fr);
  gap: 14px;
  align-items: end;
  justify-content: stretch;
}

.qa-filter-set {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.qa-filter-name {
  color: var(--subtle);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
}

.qa-filter {
  min-width: 0;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  color: var(--muted);
  background: var(--card-bg);
  border: 1px solid var(--line);
}

.qa-filter > i:first-child {
  color: var(--accent);
  font-size: 18px;
}

.qa-filter select {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  background: transparent;
  border: 0;
  outline: 0;
  appearance: none;
  cursor: pointer;
  text-align: center;
}

.qa-filter select option {
  color: var(--text);
  background: var(--card-bg);
}

.qa-filter-chevron {
  color: var(--muted);
  pointer-events: none;
}

.qa-filter-meta {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  white-space: nowrap;
}

.qa-search-hint,
.qa-filter-result {
  color: var(--subtle);
  font-size: 12px;
}

.qa-search-hint kbd {
  padding: 1px 5px;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.qa-list {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.qa-list[hidden],
.qa-draw-view[hidden],
.qa-draw-card[hidden] {
  display: none;
}

.qa-item {
  background: var(--card-bg);
  border: 1px solid var(--line);
}

.qa-item[hidden] {
  display: none;
}

.qa-item summary {
  min-height: 78px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.qa-item summary::-webkit-details-marker {
  display: none;
}

.qa-item summary > span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.qa-item summary strong {
  font-size: clamp(16px, 1.55vw, 20px);
  font-weight: 500;
  line-height: 1.35;
}

.qa-item summary strong::before {
  content: attr(data-qa-emoji);
  display: inline-block;
  margin-right: 10px;
  font-size: 0.95em;
  line-height: 1;
  vertical-align: 0.02em;
}

.qa-item summary i {
  color: var(--muted);
  transition: transform 180ms ease;
}

.qa-item[open] summary i {
  transform: rotate(180deg);
}

.qa-answer {
  padding: 0 22px 24px 152px;
}

.qa-answer p {
  max-width: 900px;
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.9;
}

.qa-answer ol,
.qa-draw-answer ol {
  display: grid;
  gap: 10px;
  margin: 4px 0 18px;
  padding-left: 1.5em;
  color: var(--muted);
  line-height: 1.85;
}

.qa-answer li::marker,
.qa-draw-answer li::marker {
  color: var(--accent);
  font-weight: 700;
}

.qa-empty {
  margin: 20px 0 0;
  padding: 28px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
}

.qa-draw-view {
  position: relative;
  width: min(100%, 760px);
  margin: 22px auto 0;
}

.qa-draw-deck {
  position: relative;
}

.qa-draw-card {
  display: flex;
  width: 100%;
  min-height: 440px;
  flex-direction: column;
  padding: 28px 30px 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.qa-draw-card--active {
  position: relative;
  z-index: 2;
  transform: translateY(0);
}

.qa-draw-card--underlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .78;
  pointer-events: none;
  transform: translateY(12px) scale(.985);
}

.qa-draw-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--accent);
}

.qa-draw-card--active.is-drawing-away {
  pointer-events: none;
  animation: qa-card-draw-away 440ms cubic-bezier(.55, .06, .68, .19) forwards;
}

.qa-draw-card--active.is-resetting {
  animation: none;
  opacity: 1;
  transform: translateY(0);
}

.qa-draw-card--active.is-resetting .qa-draw-card-inner {
  transition: none;
}

.qa-draw-card--underlay.is-revealing {
  animation: qa-card-reveal 440ms cubic-bezier(.22, .72, .2, 1) forwards;
}

.qa-draw-card--underlay.is-returning {
  z-index: 3;
  animation: qa-card-return 440ms cubic-bezier(.22, .72, .2, 1) forwards;
}

.qa-draw-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  color: var(--subtle);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
}

.qa-draw-card-head > span:first-child {
  color: var(--accent);
}

.qa-draw-question {
  display: grid;
  min-height: 292px;
  flex: 1;
  align-content: center;
  justify-items: start;
  padding: 28px 0;
}

.qa-draw-stage {
  position: relative;
  height: 292px;
  perspective: 1400px;
  transition: height 520ms cubic-bezier(.22, .72, .2, 1);
}

.qa-draw-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 560ms cubic-bezier(.22, .72, .2, 1);
}

.qa-draw-card[data-side="answer"] .qa-draw-card-inner {
  transform: rotateY(-180deg);
}

.qa-draw-face {
  position: absolute;
  inset: 0;
  width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.qa-draw-face--front {
  transform: rotateY(0deg);
}

.qa-draw-face--back {
  transform: rotateY(180deg);
}

.qa-draw-emoji {
  display: block;
  margin-bottom: 18px;
  font-size: 34px;
  line-height: 1;
}

.qa-draw-question .page-label,
.qa-draw-answer-side .page-label {
  margin-bottom: 10px;
  font-size: 11px;
}

.qa-draw-question h2 {
  max-width: none;
  margin: 0;
  font-size: clamp(25px, 2.6vw, 32px);
  font-weight: 500;
  line-height: 1.42;
  text-wrap: balance;
}

.qa-draw-question > p:last-child {
  max-width: none;
  margin-top: 16px;
  font-size: 14px;
}

.qa-draw-answer-side {
  padding: 28px 0 18px;
}

.qa-draw-answer p {
  max-width: none;
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.9;
}

.qa-draw-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.qa-draw-actions button,
.qa-draw-actions .qa-draw-flip {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.qa-draw-actions--placeholder {
  visibility: hidden;
}

.qa-draw-actions button:hover,
.qa-draw-actions button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.qa-draw-actions .qa-draw-flip {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.qa-draw-next,
.qa-draw-history {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 180ms ease, color 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.qa-draw-next {
  right: -68px;
}

.qa-draw-history {
  left: -68px;
}

.qa-draw-next i,
.qa-draw-history i {
  font-size: 23px;
}

.qa-draw-next span,
.qa-draw-history span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.qa-draw-next:hover,
.qa-draw-next:focus-visible,
.qa-draw-history:hover,
.qa-draw-history:focus-visible {
  background: var(--accent);
  color: var(--bg);
  transform: translateY(-50%);
}

.qa-draw-next:disabled,
.qa-draw-history:disabled {
  cursor: wait;
  opacity: .45;
}

.qa-draw-status {
  margin-top: 10px;
  color: var(--subtle);
  font-size: 12px;
  text-align: right;
}

@keyframes qa-card-draw-away {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  72% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(calc(100% + 34px));
  }
}

@keyframes qa-card-reveal {
  from {
    opacity: .78;
    transform: translateY(12px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes qa-card-return {
  from {
    opacity: 0;
    transform: translateY(calc(100% + 34px));
  }
  28% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .qa-draw-card--active.is-drawing-away {
    animation: none;
  }

  .qa-draw-card--underlay.is-revealing,
  .qa-draw-card--underlay.is-returning {
    animation: none;
  }

  .qa-draw-stage,
  .qa-draw-card-inner {
    transition: none;
  }
}

@media (max-width: 1040px) {
  .qa-controls-row {
    grid-template-columns: 1fr;
    align-items: stretch;
    width: min(100%, 920px);
  }

  .qa-view-switch {
    width: 248px;
  }

  .qa-draw-next {
    right: 10px;
  }

  .qa-draw-history {
    left: 10px;
  }
}

/* Hall of fame */
.hall-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(312px, 100%);
  margin: 22px auto 0;
}

.hall-tabs button {
  min-height: 36px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  cursor: pointer;
}

.hall-tabs button + button {
  border-left: 0;
}

.hall-tabs button.is-active {
  color: #111;
  background: var(--accent);
}

.hall-tabs button:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.hall-panel[hidden] {
  display: none;
}

.hall-panel {
  margin-top: 26px;
}

.legacy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.legacy-grid > article {
  min-height: 220px;
  padding: 26px;
  background: var(--card-bg);
  border: 1px solid var(--line);
}

.legacy-grid > article h3 {
  margin: 48px 0 12px;
  font-size: 25px;
  font-weight: 500;
}

.legacy-grid > article > p:not(.page-label) {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.legacy-grid > article > i {
  color: var(--accent);
  font-size: 28px;
}

.legacy-grid > article > span {
  display: inline-block;
  margin-top: 24px;
  color: var(--muted);
  font-size: 12px;
}

.hall-alumni-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
}

.hall-alumni-toolbar .hall-panel-heading {
  margin: 0;
}

.alumni-filter {
  min-width: 210px;
  height: 44px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  color: var(--muted);
  background: var(--card-bg);
  border: 1px solid var(--line);
}

.alumni-filter > i:first-child {
  color: var(--accent);
  font-size: 18px;
}

.alumni-filter select {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  background: transparent;
  border: 0;
  outline: 0;
  appearance: none;
  cursor: pointer;
}

.alumni-filter select option {
  color: var(--text);
  background: var(--card-bg);
}

.alumni-filter-chevron {
  color: var(--muted);
  pointer-events: none;
}

.hall-alumni-board {
  padding-top: 40px;
}

.alumni-period + .alumni-period {
  margin-top: 54px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}

.alumni-period .section-heading {
  max-width: none;
  margin-bottom: 24px;
  display: flex;
  align-items: flex-end;
  gap: 18px;
}

.alumni-period .section-heading h2 {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.alumni-period .section-heading p {
  max-width: none;
  padding-bottom: 13px;
  color: var(--subtle);
  font-size: 15px;
  line-height: 1.6;
}

.alumni-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.alumni-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
  min-height: 0;
  padding: 8px 18px 4px;
  background: var(--card-bg);
  border: 1px solid var(--line);
}

.alumni-card[hidden],
.alumni-period[hidden],
.alumni-empty[hidden] {
  display: none !important;
}

.alumni-card-main {
  min-width: 0;
}

.alumni-card-head {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: baseline;
  column-gap: 16px;
  row-gap: 0;
  margin-bottom: 6px;
}

.alumni-card-head h3,
.alumni-card-head p {
  margin: 0;
}

.alumni-card-head h3 {
  color: var(--text);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}

.alumni-card-head > span {
  grid-column: 3;
  justify-self: end;
  color: var(--subtle);
  font-size: 14px;
  line-height: 1.45;
  text-align: right;
  white-space: nowrap;
}

.alumni-seasons {
  grid-column: 2;
  margin: 0;
  min-width: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alumni-role {
  display: inline;
  margin-left: 18px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: inherit;
  white-space: nowrap;
}

.alumni-timeline {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  margin-top: 0;
}

.alumni-experience {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) max-content;
  gap: 12px;
  align-items: center;
  min-height: 52px;
  padding: 0;
  background: transparent;
  border: 0;
}

.alumni-experience + .alumni-experience {
  border-top: 0;
}

.alumni-logo-square {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--soft-line);
}

.alumni-logo-square img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 50px;
  padding: 0;
  object-fit: contain;
}

.alumni-logo-square.logo-nus img {
  padding: 2px;
}

.alumni-experience strong {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alumni-experience small {
  justify-self: end;
  color: var(--subtle);
  font-size: 14px;
  line-height: 1.5;
  text-align: right;
  white-space: nowrap;
}

.alumni-stage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 20px;
  margin-right: 7px;
  padding: 0 7px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  vertical-align: 1px;
}

.stage-phd {
  color: #8a2345;
  background: rgba(199, 53, 99, 0.14);
}

.stage-master {
  color: #1f5d66;
  background: rgba(52, 156, 166, 0.14);
}

.stage-work {
  color: #5d4a12;
  background: rgba(194, 153, 38, 0.18);
}

:root[data-theme="dark"] .stage-phd {
  color: #ff9ec1;
  background: rgba(255, 78, 153, 0.18);
}

:root[data-theme="dark"] .stage-master {
  color: #8fffe1;
  background: rgba(87, 255, 178, 0.16);
}

:root[data-theme="dark"] .stage-work {
  color: #ffe58a;
  background: rgba(255, 218, 95, 0.16);
}

.alumni-empty {
  margin: 32px 0 0;
  padding: 36px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
}

@media (max-width: 1180px) {
  .training-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 820px) {
  .page-hero ~ .resource-panel {
    margin-top: 40px;
  }

  .training-library-heading,
  .resource-file-group-heading,
  .hall-panel-heading,
  .group-letter-columns {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .training-library-grid,
  .legacy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .group-letter-shell {
    padding: 34px 28px 38px;
  }

  .group-letter-header {
    grid-template-columns: minmax(0, 1fr) 74px;
    padding-right: 52px;
  }

  .group-letter-header img {
    width: 74px;
    height: 74px;
  }

  .group-letter-gallery {
    grid-template-columns: 1fr;
  }

  .hall-alumni-toolbar {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }

  .alumni-filter {
    width: min(220px, 100%);
  }

  .hall-page-hero,
  .qa-heading {
    grid-template-columns: 1fr;
  }

  .hall-tabs {
    margin-right: 0;
    margin-left: 0;
  }

  .training-document-shell {
    width: min(100% - 28px, 1120px);
  }

  .training-document-meta {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .training-download-link,
  .training-source-link {
    margin-left: 0;
  }

  .training-markdown {
    padding: 34px 24px 42px;
  }

  .qa-filter-grid {
    max-width: 760px;
  }

  .qa-controls-row {
    grid-template-columns: 1fr;
    align-items: stretch;
    width: min(100%, 760px);
  }

  .qa-view-switch {
    width: 248px;
  }

  .qa-filter {
    width: 100%;
  }

  .qa-item summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
  }

  .qa-item summary span {
    grid-column: 1 / -1;
  }

  .qa-answer {
    padding-left: 22px;
  }

  .alumni-period .section-heading {
    align-items: flex-start;
  }

  .alumni-card-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    margin-bottom: 8px;
  }

  .alumni-card-head > span,
  .alumni-seasons {
    grid-column: 1;
    justify-self: start;
    text-align: left;
    white-space: normal;
    overflow: visible;
  }

  .alumni-role {
    display: block;
    margin: 2px 0 0;
  }

  .alumni-experience {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
  }

  .alumni-logo-square {
    width: 52px;
    height: 52px;
  }

  .alumni-experience small {
    grid-column: 2;
    justify-self: start;
    text-align: left;
    white-space: normal;
  }
}

@media (max-width: 700px) {
  .resource-tabs {
    grid-template-columns: 1fr;
  }

  .resource-tabs button {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .resource-tabs button:last-child {
    border-bottom: 0;
  }

  .resource-file-card {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .resource-file-card em {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .training-library-grid,
  .legacy-grid {
    grid-template-columns: 1fr;
  }

  .training-card {
    min-height: 230px;
  }

  .group-letter-dialog {
    padding: 10px;
  }

  .group-letter-shell {
    width: 100%;
    max-height: calc(100dvh - 20px);
    padding: 26px 18px 30px;
  }

  .group-letter-close {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
  }

  .group-letter-header {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-right: 42px;
  }

  .group-letter-header img {
    width: 64px;
    height: 64px;
  }

  .group-letter-lesson-head {
    grid-template-columns: 1fr;
  }

  .hall-tabs {
    width: min(256px, 100%);
  }

  .hall-tabs button {
    min-height: 32px;
    padding: 0 8px;
    font-size: 12px;
  }

  .training-document-meta {
    display: grid;
    grid-template-columns: 1fr;
  }

  .training-markdown {
    padding: 28px 18px 36px;
  }

  .training-pdf-frame {
    min-height: 420px;
  }

  .qa-filter-grid {
    grid-template-columns: 1fr;
    width: min(100%, 360px);
  }

  .qa-controls-row {
    width: min(100%, 360px);
    gap: 10px;
  }

  .qa-view-switch {
    width: 100%;
  }

  .qa-filter-meta {
    min-height: 24px;
    justify-content: space-between;
    white-space: normal;
  }

  .qa-item summary {
    padding: 16px;
  }

  .qa-answer {
    padding: 0 16px 20px;
  }

  .qa-draw-card {
    min-height: 410px;
    padding: 22px 18px 18px;
  }

  .qa-draw-card-head {
    padding-bottom: 14px;
  }

  .qa-draw-question {
    min-height: 270px;
    padding: 24px 0;
  }

  .qa-draw-deck {
    min-height: 410px;
  }

  .qa-draw-stage {
    min-height: 270px;
  }

  .qa-draw-question h2 {
    font-size: 24px;
  }

  .qa-draw-actions {
    align-items: stretch;
  }

  .qa-draw-actions button {
    flex: 0 1 auto;
    padding: 8px 10px;
  }

  .qa-draw-next {
    top: 50%;
    right: 8px;
    width: 44px;
    height: 44px;
  }

  .alumni-period .section-heading {
    display: block;
  }

  .alumni-period .section-heading p {
    margin-top: 8px;
    padding-bottom: 0;
  }

  .alumni-card {
    padding: 10px 12px 8px;
  }

  .alumni-experience strong {
    white-space: normal;
  }
}

.resource-detail-list {
  display: grid;
  gap: 0;
}

.resource-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 56px;
  align-items: center;
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
}

.resource-detail:first-child {
  padding-top: 0;
}

.resource-detail:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.resource-detail > div {
  min-width: 0;
}

.resource-detail h2 {
  margin: 0 0 14px;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.3;
}

.resource-detail p {
  max-width: 720px;
}

.plain-list {
  margin: 22px 0 0;
  padding-left: 1.2em;
  color: var(--muted);
}

.plain-list li + li {
  margin-top: 8px;
}

.resource-detail .inline-link {
  margin-top: 22px;
}

.resource-detail-figure {
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}

.resource-detail-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 920px) {
  .resource-detail {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px 0;
  }

  .resource-detail-figure {
    width: 100%;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 560px) {
  .resource-detail {
    padding: 34px 0;
  }

  .resource-detail h2 {
    font-size: 25px;
  }
}

/* Training and construction project archive */
.project-library {
  margin-top: 44px;
}

.project-library-heading {
  display: grid;
  grid-template-columns: minmax(220px, 0.65fr) minmax(560px, 1fr);
  gap: 28px;
  align-items: end;
  margin-bottom: 28px;
}

.project-library-heading h2 {
  margin: 0;
  font-size: 38px;
  font-weight: 500;
  line-height: 1.25;
}

.project-filter {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.project-filter button {
  min-width: 0;
  min-height: 42px;
  padding: 0 10px;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
}

.project-filter button:last-child {
  border-right: 0;
}

.project-filter button:hover,
.project-filter button:focus-visible,
.project-filter button.is-active {
  color: #111;
  background: var(--accent);
  outline: none;
}

.project-accordion-list {
  display: grid;
  gap: 18px;
}

.project-group-heading {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
}

.project-group-heading[hidden],
.project-accordion[hidden] {
  display: none;
}

.project-group-heading h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.25;
}

.project-group-heading h2::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 10px;
  background: var(--accent);
}

.project-group-heading p {
  max-width: 760px;
}

.project-accordion {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.project-accordion summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 92px;
  padding: 22px 68px 22px 26px;
  cursor: pointer;
  list-style: none;
}

.project-accordion summary::-webkit-details-marker {
  display: none;
}

.project-accordion summary::after {
  content: "";
  position: absolute;
  right: 28px;
  top: 50%;
  width: 13px;
  height: 13px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: translateY(-65%) rotate(45deg);
  transition: transform 160ms ease;
}

.project-accordion[open] summary::after {
  transform: translateY(-35%) rotate(225deg);
}

.project-summary-number {
  flex: 0 0 auto;
  align-self: flex-start;
  padding-top: 8px;
  color: var(--accent);
  font-family: "Lora", serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
}

.project-summary-title {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 6px;
}

.project-summary-title strong {
  color: var(--text);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.25;
}

.project-summary-title em {
  color: var(--accent);
  font-family: "Lora", serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-accordion summary small {
  display: block;
  max-width: 780px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.project-carousel-shell {
  position: relative;
  min-width: 0;
}

.project-carousel-shell:not(.is-ready) .project-carousel-button {
  opacity: 0;
  pointer-events: none;
}

.project-carousel {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-auto-columns: minmax(236px, 300px);
  grid-auto-flow: column;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 0 62px 24px;
  scroll-padding-inline: 62px;
  scroll-snap-type: inline mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.project-carousel::-webkit-scrollbar {
  display: none;
}

.project-carousel-button {
  position: absolute;
  top: calc(50% - 12px);
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

.project-carousel-button::before {
  content: "";
  width: 11px;
  height: 11px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}

.project-carousel-button:hover {
  border-color: var(--accent);
}

.project-carousel-button:disabled {
  opacity: 0.28;
  cursor: default;
}

.project-carousel-prev {
  left: 18px;
}

.project-carousel-prev::before {
  transform: translateX(2px) rotate(135deg);
}

.project-carousel-next {
  right: 18px;
}

.project-carousel-next::before {
  transform: translateX(-2px) rotate(-45deg);
}

.project-card {
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: 158px minmax(188px, 1fr);
  min-height: 362px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.project-card-media {
  display: grid;
  place-items: center;
  position: relative;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: var(--surface);
  color: var(--subtle);
  font-size: 14px;
}

.project-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-card-media img + span {
  display: none;
}

.project-card-body {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px 16px 42px;
}

.project-card-meta {
  color: var(--accent);
  font-family: "Lora", serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-card h2 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.project-card p {
  font-size: 13px;
  line-height: 1.55;
}

.project-people {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.person-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.badge-lead {
  border-color: #d4a734;
  background: #fff4cd;
  color: #7a5600;
}

.badge-member {
  border-color: #b9c0c7;
  background: #f2f4f6;
  color: #4d5963;
}

.badge-trainee {
  border-color: #c0834e;
  background: #f8e6d4;
  color: #7c4316;
}

:root[data-theme="dark"] .badge-lead {
  border-color: rgba(255, 211, 92, 0.48);
  background: rgba(255, 207, 76, 0.16);
  color: #ffd36f;
}

:root[data-theme="dark"] .badge-member {
  border-color: rgba(211, 219, 228, 0.34);
  background: rgba(210, 220, 230, 0.12);
  color: #d6dee7;
}

:root[data-theme="dark"] .badge-trainee {
  border-color: rgba(224, 148, 84, 0.42);
  background: rgba(218, 128, 58, 0.15);
  color: #eda56c;
}

.project-card-year {
  position: absolute;
  right: 16px;
  bottom: 14px;
  color: var(--subtle);
  font-family: "Lora", serif;
  font-size: 13px;
}

.project-empty-state {
  min-height: 210px;
  padding: 36px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.project-empty-state[hidden] {
  display: none;
}

.project-empty-state > i {
  color: var(--accent);
  font-size: 34px;
}

.project-empty-state strong,
.project-empty-state span {
  display: block;
}

.project-empty-state strong {
  color: var(--text);
  font-size: 22px;
  font-weight: 500;
}

.project-empty-state span {
  margin-top: 4px;
  color: var(--muted);
}

@media (max-width: 960px) {
  .project-library-heading {
    grid-template-columns: 1fr;
  }

  .project-filter {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .project-filter button:nth-child(4) {
    border-right: 0;
  }

  .project-filter button:nth-child(-n + 4) {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 620px) {
  .project-library {
    margin-top: 36px;
  }

  .project-library-heading h2 {
    font-size: 30px;
  }

  .project-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-filter button,
  .project-filter button:nth-child(4) {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .project-filter button:nth-child(even),
  .project-filter button:last-child {
    border-right: 0;
  }

  .project-filter button:last-child {
    border-bottom: 0;
  }

  .project-accordion summary {
    gap: 14px;
    min-height: 84px;
    padding: 18px 48px 18px 16px;
  }

  .project-accordion summary::after {
    right: 20px;
  }

  .project-summary-title {
    display: grid;
    gap: 2px;
  }

  .project-summary-title strong {
    font-size: 21px;
  }

  .project-summary-number {
    padding-top: 6px;
  }

  .project-carousel {
    grid-auto-columns: minmax(224px, 82vw);
    padding: 0 18px 20px;
    scroll-padding-inline: 18px;
  }

  .project-carousel-button {
    display: none;
  }

  .project-card {
    grid-template-rows: 150px minmax(184px, 1fr);
  }

  .project-empty-state {
    min-height: 170px;
    padding: 24px;
  }
}

/* Archive primary navigation */
.archive-page-hero {
  grid-template-columns: minmax(230px, 0.55fr) minmax(390px, 1fr) max-content;
  column-gap: 24px;
  align-items: end;
}

.archive-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 500px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.archive-tabs a {
  min-height: 42px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  border-right: 1px solid var(--line);
}

.archive-tabs a:last-child {
  border-right: 0;
}

.archive-tabs a:hover,
.archive-tabs a:focus-visible,
.archive-tabs a.is-active {
  color: #111;
  background: var(--accent);
  outline: none;
}

.project-card[hidden] {
  display: none;
}

.project-carousel-shell.is-empty .project-carousel,
.project-carousel-shell.is-empty .project-carousel-button {
  display: none;
}

.project-category-empty {
  min-height: 148px;
  padding: 28px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  color: var(--muted);
  border-top: 1px solid var(--soft-line);
}

.project-category-empty[hidden] {
  display: none;
}

.project-category-empty i {
  color: var(--accent);
  font-size: 26px;
}

.project-category-empty p {
  color: var(--muted);
}

.archive-empty-state {
  min-height: 230px;
  margin-top: 28px;
  padding: 38px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.archive-empty-state > i {
  color: var(--accent);
  font-size: 36px;
}

.archive-empty-state strong,
.archive-empty-state span {
  display: block;
}

.archive-empty-state strong {
  color: var(--text);
  font-size: 23px;
  font-weight: 500;
}

.archive-empty-state span {
  margin-top: 5px;
  color: var(--muted);
}

.honor-archive {
  padding-bottom: 72px;
}

.honor-overview {
  margin-top: 30px;
  display: grid;
  grid-template-columns: minmax(190px, 0.28fr) minmax(0, 1fr);
  align-items: stretch;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.honor-overview > p {
  min-height: 74px;
  padding: 13px 22px 12px 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  column-gap: 10px;
  border-right: 1px solid var(--line);
}

.honor-overview > p strong {
  grid-row: 1 / 3;
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
}

.honor-overview > p span {
  align-self: end;
  color: var(--text);
  font-size: 14px;
}

.honor-overview > p small {
  align-self: start;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0;
}

.honor-filters {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.honor-filters button {
  min-width: 0;
  padding: 0 12px;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease;
}

.honor-filters button:last-child {
  border-right: 0;
}

.honor-filters button:hover,
.honor-filters button:focus-visible {
  color: var(--text);
  background: var(--surface);
}

.honor-filters button[aria-pressed="true"] {
  color: #08110c;
  background: var(--accent);
}

.honor-groups {
  display: grid;
  gap: 62px;
  margin-top: 50px;
}

.honor-year-group > header {
  min-height: 56px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.honor-year-group > header > div {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.honor-year-group > header span {
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 37px;
  line-height: 1;
}

.honor-year-group > header small {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0;
}

.honor-year-group > header p {
  color: var(--muted);
  font-size: 13px;
}

.honor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-left: 1px solid var(--line);
}

.honor-card {
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-align: left;
  background: var(--card-bg);
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.honor-card__figure {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #ededed;
}

.honor-card__figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 24%;
  transition: transform 0.26s ease, filter 0.26s ease;
}

.honor-card__view {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #fff;
  font-size: 13px;
  background: rgba(5, 8, 7, 0.56);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.honor-card__view i {
  font-size: 21px;
}

.honor-card:hover .honor-card__figure img,
.honor-card:focus-visible .honor-card__figure img {
  transform: scale(1.025);
  filter: saturate(0.82);
}

.honor-card:hover .honor-card__view,
.honor-card:focus-visible .honor-card__view {
  opacity: 1;
}

.honor-card__body {
  min-height: 146px;
  padding: 18px 19px 20px;
  display: flex;
  flex-direction: column;
}

.honor-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--accent);
  font-size: 11px;
}

.honor-card__meta b {
  font-weight: 500;
}

.honor-card__meta small {
  color: var(--muted);
  font-size: inherit;
}

.honor-card__body > strong {
  margin-top: 13px;
  color: var(--text);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
}

.honor-card__award {
  margin-top: auto;
  padding-top: 15px;
  color: var(--muted);
  font-size: 13px;
}

.has-honor-lightbox {
  overflow: hidden;
}

.honor-lightbox {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 0;
  color: #f4f4f4;
  background: rgba(8, 8, 9, 0.96);
  border: 0;
}

.honor-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.76);
}

.honor-lightbox__inner {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 24px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 58px;
  align-items: center;
}

.honor-lightbox figure {
  grid-column: 2;
  width: fit-content;
  max-width: min(980px, 100%);
  margin: 0 auto;
}

.honor-lightbox figure img {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 112px);
  display: block;
  margin: 0 auto;
  object-fit: contain;
  background: #efefef;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
}

.honor-lightbox figcaption {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-top: 10px;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
}

.honor-lightbox figcaption span,
.honor-lightbox figcaption small,
.honor-lightbox figcaption strong {
  display: block;
}

.honor-lightbox figcaption small {
  color: var(--accent);
  font-size: 11px;
}

.honor-lightbox figcaption strong {
  margin-top: 3px;
  color: #f4f4f4;
  font-size: 13px;
  font-weight: 500;
}

.honor-lightbox figcaption b {
  flex: 0 0 auto;
  color: #9d9d9d;
  font-size: 12px;
  font-weight: 400;
}

.honor-lightbox__close,
.honor-lightbox__arrow {
  display: grid;
  place-items: center;
  color: #f4f4f4;
  background: #171719;
  border: 1px solid #4a4a4f;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.honor-lightbox__close:hover,
.honor-lightbox__close:focus-visible,
.honor-lightbox__arrow:hover,
.honor-lightbox__arrow:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}

.honor-lightbox__close {
  position: absolute;
  z-index: 2;
  top: 20px;
  right: 22px;
  width: 42px;
  height: 42px;
  font-size: 22px;
}

.honor-lightbox__arrow {
  width: 44px;
  height: 44px;
  justify-self: center;
  font-size: 27px;
}

.honor-lightbox__arrow--prev {
  grid-column: 1;
}

.honor-lightbox__arrow--next {
  grid-column: 3;
}

@media (max-width: 1180px) {
  .honor-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .honor-overview {
    grid-template-columns: 1fr;
  }

  .honor-overview > p {
    padding-inline: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .honor-filters {
    min-height: 52px;
  }

  .honor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .honor-lightbox__inner {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    padding-inline: 8px;
  }

  .honor-lightbox__arrow {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 560px) {
  .honor-filters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .honor-filters button {
    min-height: 44px;
    border-bottom: 1px solid var(--line);
  }

  .honor-groups {
    gap: 48px;
    margin-top: 38px;
  }

  .honor-grid {
    grid-template-columns: 1fr;
  }

  .honor-card__figure {
    aspect-ratio: 16 / 11;
  }

  .honor-card__body {
    min-height: 132px;
  }

  .honor-lightbox__inner {
    grid-template-columns: 1fr;
    padding: 64px 12px 76px;
  }

  .honor-lightbox figure {
    grid-column: 1;
  }

  .honor-lightbox figure img {
    max-height: calc(100vh - 190px);
  }

  .honor-lightbox__arrow {
    position: absolute;
    bottom: 20px;
  }

  .honor-lightbox__arrow--prev {
    left: calc(50% - 52px);
  }

  .honor-lightbox__arrow--next {
    right: calc(50% - 52px);
  }
}

@media (max-width: 1180px) {
  .archive-page-hero {
    grid-template-columns: minmax(260px, 0.8fr) minmax(260px, 1fr);
  }

  .archive-tabs {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .archive-page-hero {
    grid-template-columns: 1fr;
  }

  .archive-tabs {
    grid-column: 1;
    width: min(100%, 500px);
  }
}

@media (max-width: 460px) {
  .archive-tabs {
    width: 100%;
  }

  .archive-tabs a {
    padding: 0 7px;
    font-size: 12px;
  }

  .archive-tabs a i {
    display: none;
  }

  .archive-empty-state {
    min-height: 180px;
    padding: 24px;
  }
}

/* Upcoming team events */
.event-preview {
  margin-top: 44px;
}

.event-preview-heading {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(560px, 1fr) auto;
  gap: 24px;
  align-items: end;
}

.event-preview-heading > .inline-link {
  margin-bottom: 8px;
  white-space: nowrap;
}

.event-preview-heading h2 {
  margin: 0;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.25;
}

.event-preview-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.event-preview-filters button {
  min-width: 106px;
  min-height: 42px;
  padding: 0 14px;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
}

.event-preview-filters button:last-child {
  border-right: 0;
}

.event-preview-filters button:hover,
.event-preview-filters button:focus-visible,
.event-preview-filters button.is-active {
  color: #111;
  background: var(--accent);
  outline: none;
}

.event-preview-list {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.event-preview-card {
  display: grid;
  grid-template-columns: minmax(350px, 0.36fr) minmax(0, 1fr);
  min-height: 188px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--event-tone);
  background: var(--card-bg);
}

.event-preview-date {
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--soft-line);
}

.event-preview-range {
  display: grid;
  justify-items: start;
  gap: 2px;
  width: max-content;
  max-width: 100%;
  color: var(--text);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  letter-spacing: 0.035em;
  white-space: nowrap;
}

.event-preview-range time,
.event-preview-range i {
  display: block;
}

.event-preview-range i {
  color: var(--event-tone);
  font-size: 12px;
  font-style: normal;
  line-height: 1;
}

.event-preview-date em {
  width: fit-content;
  color: var(--event-tone);
  font-size: 12px;
  font-style: normal;
}

.event-preview-date--with-media {
  display: grid;
  grid-template-columns: minmax(118px, 1fr) auto;
  grid-template-rows: auto minmax(20px, 1fr) auto;
  gap: 16px 20px;
  align-items: start;
}

.event-preview-date--with-media > .event-preview-range {
  grid-column: 1;
  grid-row: 1;
}

.event-preview-date--with-media > em {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
}

.event-preview-media {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  width: min(148px, 100%);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--soft-line);
  background: var(--surface);
}

.event-preview-media--portrait {
  aspect-ratio: 975 / 1280;
}

.event-preview-media--logo {
  width: min(132px, 100%);
  aspect-ratio: 1;
}

.event-preview-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.event-preview-copy {
  padding: 26px 30px;
}

.event-preview-copy .page-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--event-tone);
}

.event-preview-copy h2 {
  margin: 0 0 8px;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.35;
}

.event-preview-copy small {
  display: block;
  margin-top: 14px;
  color: var(--subtle);
}

.event-preview-subevents {
  display: grid;
  gap: 7px;
  margin-top: 16px;
}

.event-preview-subevent {
  min-height: 48px;
  padding: 9px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border-left: 2px solid var(--event-tone);
  background: var(--surface);
}

.event-preview-subevent span,
.event-preview-subevent strong,
.event-preview-subevent em {
  min-width: 0;
}

.event-preview-subevent strong,
.event-preview-subevent em {
  display: inline;
}

.event-preview-subevent strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}

.event-preview-subevent em {
  margin-left: 9px;
  color: var(--event-tone);
  font-size: 11px;
  font-style: normal;
}

.event-preview-subevent small {
  margin: 0;
  white-space: nowrap;
}

.season-detail-subevents {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.season-detail-subevents > p {
  color: var(--subtle);
  font-size: 12px;
}

.season-detail-subevent {
  padding: 8px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-left: 2px solid var(--event-color);
  background: var(--surface);
}

.season-detail-subevent strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

.season-detail-subevent em {
  margin-left: 8px;
  color: var(--event-color);
  font-size: 10px;
  font-style: normal;
}

.season-detail-subevent small {
  color: var(--subtle);
  font-size: 11px;
  white-space: nowrap;
}

.event-preview-empty {
  min-height: 190px;
  margin-top: 22px;
  padding: 32px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.event-preview-empty[hidden] {
  display: none;
}

.event-preview-empty > i {
  color: var(--accent);
  font-size: 34px;
}

.event-preview-empty strong,
.event-preview-empty span {
  display: block;
}

.event-preview-empty strong {
  color: var(--text);
  font-size: 21px;
  font-weight: 500;
}

.event-preview-empty span {
  margin-top: 4px;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .event-preview-heading {
    grid-template-columns: 1fr;
  }

  .event-preview-heading > .inline-link {
    margin-bottom: 0;
  }

  .event-preview-filters {
    max-width: 720px;
  }
}

@media (max-width: 720px) {
  .event-preview-filters {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .event-preview-filters button {
    min-width: 0;
    border-bottom: 1px solid var(--line);
  }

  .event-preview-filters button:nth-child(even) {
    border-right: 0;
  }

  .event-preview-filters button:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .event-preview-filters button:last-child {
    border-right: 0;
    border-bottom: 0;
  }

  .event-preview-card {
    grid-template-columns: 1fr;
  }

  .event-preview-date {
    min-height: 96px;
    padding: 20px;
    border-right: 0;
    border-bottom: 1px solid var(--soft-line);
  }

  .event-preview-date--with-media {
    grid-template-columns: minmax(0, 1fr) 88px;
    grid-template-rows: auto auto;
    gap: 12px 18px;
  }

  .event-preview-date--with-media > em {
    grid-row: 2;
  }

  .event-preview-media,
  .event-preview-media--logo {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 88px;
    max-height: 112px;
  }

  .event-preview-copy {
    padding: 22px 20px;
  }

  .event-preview-subevent,
  .season-detail-subevent {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* Homepage section navigation, snap layout, and fixed-frame media carousel */
html:has(body[data-page="home"]) {
  scroll-padding-top: 82px;
  scroll-snap-type: y mandatory;
}

body[data-page="home"] .site-footer {
  width: 100vw;
  margin-top: 0;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 9px 20px 10px;
  background: var(--bg);
}

body[data-page="home"] .site-footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

body[data-page="home"] .site-footer p {
  font-size: 12px;
  line-height: 1.55;
}

body[data-page="home"] .site-footer p + p::before {
  content: "·";
  margin: 0 10px;
  color: var(--line);
}

body[data-page="home"] .site-footer a {
  transition: color 160ms ease;
}

body[data-page="home"] .site-footer a:hover,
body[data-page="home"] .site-footer a:focus-visible {
  color: var(--accent);
}

.home-main {
  overflow: clip;
}

.home-snap-section {
  min-height: calc(100svh - 82px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.home-snap-section--overview {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 0;
}

.home-scroll-cue {
  position: absolute;
  bottom: 18px;
  left: 50%;
  z-index: 2;
  display: grid;
  width: 56px;
  height: 38px;
  place-items: center;
  color: var(--green);
  transform: translateX(-50%);
}

.home-scroll-cue i {
  font-size: 48px;
  line-height: 1;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .32) 28%, #000 62%, #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .32) 28%, #000 62%, #000 100%);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .home-scroll-cue i {
    background: linear-gradient(180deg, #38f886 0%, #dfff3f 34%, #5cfc90 68%, #38f886 100%);
    background-position: 50% 100%;
    background-size: 100% 260%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: home-scroll-cue-gradient 1.5s linear infinite;
  }
}

@keyframes home-scroll-cue-gradient {
  from { background-position: 50% 100%; }
  to { background-position: 50% 0%; }
}

@media (prefers-reduced-motion: reduce) {
  .home-scroll-cue i {
    animation: none;
    background-position: 50% 50%;
  }
}

.home-snap-section--overview .home-hero {
  margin-top: 0;
  align-items: start;
  transform: translateY(15px);
}

.home-snap-section--overview .home-wordmark {
  transform: translateY(-28px);
}

.home-snap-section--overview .home-quote {
  min-height: 94px;
  margin-top: 43px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.home-snap-section--overview .quote-stage {
  min-height: 70px;
}

@media (min-width: 861px) and (min-height: 900px) {
  .home-snap-section--overview .home-hero,
  .home-snap-section--overview .home-quote {
    transform: translateY(-15px);
  }

  .home-snap-section--overview .home-hero {
    transform: translateY(0);
  }

  .home-snap-section--overview .home-quote {
    margin-top: 73px;
  }
}

.home-section-nav {
  position: fixed;
  top: 50%;
  left: 8px;
  z-index: 12;
  display: grid;
  gap: 10px;
  transform: translateY(-50%);
}

.home-section-nav button {
  position: relative;
  width: 24px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.home-section-nav button::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 10px;
  width: 3px;
  background: rgba(92, 252, 144, .28);
  transition: width 180ms ease, background 180ms ease, transform 180ms ease;
}

.home-section-nav button:hover::before,
.home-section-nav button:focus-visible::before {
  background: var(--subtle);
}

.home-section-nav button.is-active::before {
  width: 4px;
  background: var(--accent);
  transform: scaleY(1.16);
}

.home-section-nav button span {
  display: none;
}

.home-carousel {
  min-width: 0;
  width: 95%;
  justify-self: center;
  background: transparent;
}

.home-carousel-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #080809;
}

.home-carousel-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
}

.home-carousel-slide.is-active {
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
}

.home-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.home-carousel-slide img.home-carousel-image--contain {
  object-fit: contain;
}

.home-carousel-slide img.home-carousel-image--resources {
  object-position: center 52%;
}

.home-carousel-footer {
  position: relative;
  min-height: 58px;
}

.home-carousel-action {
  position: absolute;
  top: 15px;
  left: calc(33.333% - 30px);
  min-width: 156px;
  min-height: 36px;
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  transform: translateX(-50%);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.home-carousel-action:hover,
.home-carousel-action:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.home-carousel-action i {
  color: var(--accent);
  font-size: 18px;
}

.home-carousel-dots {
  position: absolute;
  top: 34px;
  left: calc(66.667% + 30px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transform: translate(-50%, -50%);
}

.home-hero-copy {
  position: relative;
}

.home-hero-copy h1,
.home-hero-copy > p,
.home-group-links {
  position: relative;
  z-index: 1;
}

.home-cqu-seal {
  position: absolute;
  top: -7px;
  right: -2px;
  z-index: 2;
  width: clamp(136px, 11vw, 156px);
  aspect-ratio: 1;
  object-fit: contain;
  opacity: .3;
  pointer-events: none;
}

:root[data-theme="dark"] .home-cqu-seal {
  filter: brightness(0) invert(1);
}

.home-group-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 26px);
  width: min(100%, 400px);
  margin-top: 24px;
}

.home-group-link {
  --home-group-tone: var(--text);
  --home-group-filter: none;
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: var(--text);
  transition: color 160ms ease, transform 160ms ease;
}

.home-group-link:hover,
.home-group-link:focus-visible {
  color: var(--home-group-tone);
  transform: translateY(-2px);
}

.home-group-link img {
  grid-area: 1 / 1;
  width: 52px;
  height: 52px;
  object-fit: contain;
  transition: filter 160ms ease, transform 160ms ease;
}

:root[data-theme="dark"] .home-group-link img {
  filter: invert(1);
}

.home-group-link:hover img,
.home-group-link:focus-visible img {
  filter: var(--home-group-filter) !important;
  transform: scale(1.04);
}

.home-group-link > span {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  min-width: 3em;
  color: var(--home-group-tone);
  font: 500 11px/1.2 "Noto Sans SC", "Microsoft YaHei", sans-serif;
  letter-spacing: .08em;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 5px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.home-group-link:hover > span,
.home-group-link:focus-visible > span {
  opacity: 1;
  transform: translate(-50%, 0);
}

.home-group-link--mechanical {
  --home-group-tone: #c59a4b;
  --home-group-filter: brightness(0) saturate(100%) invert(64%) sepia(46%) saturate(703%) hue-rotate(359deg) brightness(92%) contrast(86%);
}

.home-group-link--control {
  --home-group-tone: #6e9dca;
  --home-group-filter: brightness(0) saturate(100%) invert(63%) sepia(22%) saturate(858%) hue-rotate(168deg) brightness(92%) contrast(87%);
}

.home-group-link--vision {
  --home-group-tone: #8976b2;
  --home-group-filter: brightness(0) saturate(100%) invert(55%) sepia(17%) saturate(1122%) hue-rotate(216deg) brightness(90%) contrast(83%);
}

.home-group-link--hardware {
  --home-group-tone: #62a66f;
  --home-group-filter: brightness(0) saturate(100%) invert(61%) sepia(25%) saturate(748%) hue-rotate(78deg) brightness(89%) contrast(84%);
}

.home-group-link--operations {
  --home-group-tone: #bd6f84;
  --home-group-filter: brightness(0) saturate(100%) invert(58%) sepia(21%) saturate(926%) hue-rotate(292deg) brightness(91%) contrast(84%);
}

/* Advisor layer: alumni experience, resources and continued team connection. */
.advisor-page {
  width: min(var(--max-width), calc(100% - 40px));
  margin: 0 auto;
}

.advisor-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr);
  gap: 30px;
  align-items: stretch;
  margin-top: 42px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}

.advisor-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 0;
}

.advisor-hero h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(40px, 3.7vw, 56px);
  font-weight: 500;
  line-height: 1.1;
}

.advisor-hero h1 span {
  display: block;
  white-space: nowrap;
}

.advisor-hero-copy > p:not(.page-label) {
  max-width: 590px;
  margin-top: 22px;
  font-size: 15px;
  line-height: 1.82;
}

.advisor-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.advisor-hero-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 24px;
}

.advisor-hero-tags span {
  padding: 6px 10px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface);
  font: 500 12px/1.3 "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.advisor-primary-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--accent);
  font-size: 14px;
}

.advisor-primary-link i {
  color: var(--accent);
}

.advisor-hero-media,
.advisor-path-media {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #090a0c;
}

.advisor-hero-media {
  width: min(100%, 520px);
  height: 340px;
  align-self: center;
  justify-self: end;
}

.advisor-hero-media img,
.advisor-path-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.advisor-hero-media img {
  object-position: center 48%;
}

.advisor-hero-media::after,
.advisor-path-media::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 46%, rgba(0, 0, 0, .84));
  pointer-events: none;
}

.advisor-hero-media figcaption,
.advisor-path-media figcaption {
  position: absolute;
  z-index: 1;
  right: 22px;
  bottom: 18px;
  left: 22px;
  display: grid;
  gap: 3px;
  color: #fff;
}

.advisor-hero-media figcaption span,
.advisor-path-media figcaption span {
  color: var(--green);
  font: 700 10px/1.4 Arial, "Microsoft YaHei", sans-serif;
  letter-spacing: .12em;
}

.advisor-hero-media figcaption strong,
.advisor-path-media figcaption strong {
  font-size: 17px;
  font-weight: 500;
}

.advisor-section-nav {
  position: fixed;
  top: 50%;
  left: max(16px, calc((100vw - var(--max-width)) / 2 - 192px));
  z-index: 18;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 164px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background: color-mix(in srgb, var(--card-bg) 96%, transparent);
  box-shadow: 0 18px 52px rgba(0, 0, 0, .16);
  backdrop-filter: blur(14px);
  transform: translateY(-42%);
}

.advisor-section-nav::before {
  display: block;
  padding: 10px 13px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--accent);
  content: "SECTION INDEX";
  font: 700 9px/1.2 Arial, "Microsoft YaHei", sans-serif;
  letter-spacing: .14em;
}

.advisor-section-nav::after {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 18px;
  height: 18px;
  border-left: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background: linear-gradient(135deg, var(--bg) 49%, var(--surface) 50%);
  content: "";
  pointer-events: none;
}

.advisor-section-nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: transparent;
  font-size: 14px;
  transition: color 160ms ease, background 160ms ease;
}

.advisor-section-nav a:first-of-type {
  border-top: 0;
}

.advisor-section-nav a:hover,
.advisor-section-nav a:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  outline: 0;
}

.advisor-section-nav span {
  color: var(--accent);
  font: 700 12px/1 Arial, sans-serif;
}

.advisor-section-nav i {
  width: 20px;
  color: var(--muted);
  font-size: 20px;
  text-align: center;
}

.advisor-section-nav a:hover i,
.advisor-section-nav a:focus-visible i {
  color: var(--accent);
}

.advisor-section {
  margin-top: 66px;
  scroll-margin-top: 108px;
}

.advisor-section-heading {
  display: grid;
  grid-template-columns: minmax(300px, .88fr) minmax(360px, 1.12fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 24px;
}

.advisor-section-heading h2,
.advisor-path-copy h2,
.advisor-contact-copy h2 {
  margin: 0;
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 500;
  line-height: 1.16;
}

.advisor-section-heading > p {
  padding-bottom: 5px;
  font-size: 15px;
}

.advisor-duty-grid,
.advisor-resource-grid,
.advisor-benefit-grid {
  display: grid;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.advisor-duty-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.advisor-duty-grid article,
.advisor-resource-grid article,
.advisor-benefit-grid article {
  position: relative;
  min-width: 0;
  padding: 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--card-bg);
}

.advisor-duty-grid article {
  min-height: 250px;
}

.advisor-duty-grid article > span,
.advisor-benefit-number {
  color: var(--accent);
  font: 700 11px/1 Arial, sans-serif;
}

.advisor-duty-grid article > i,
.advisor-resource-grid article > i,
.advisor-benefit-grid article > i {
  position: absolute;
  top: 22px;
  right: 22px;
  color: var(--accent);
  font-size: 29px;
  line-height: 1;
}

.advisor-duty-grid h3,
.advisor-resource-grid h3,
.advisor-benefit-grid h3 {
  margin: 42px 0 10px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.35;
}

.advisor-duty-grid p,
.advisor-resource-grid p,
.advisor-benefit-grid p {
  font-size: 14px;
  line-height: 1.78;
}

.advisor-path {
  display: grid;
  grid-template-columns: minmax(360px, .8fr) minmax(0, 1.2fr);
  gap: 40px;
  align-items: stretch;
}

.advisor-path-media {
  min-height: 510px;
}

.advisor-path-media img {
  object-position: center 28%;
}

.advisor-path-copy {
  padding: 18px 0 0;
}

.advisor-path-copy > p:not(.page-label):not(.advisor-note) {
  margin-top: 18px;
  font-size: 15px;
}

.advisor-path-list {
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.advisor-path-list li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.advisor-path-list li > span {
  padding-top: 4px;
  color: var(--accent);
  font: 700 11px/1 Arial, sans-serif;
}

.advisor-path-list strong {
  display: block;
  margin-bottom: 4px;
  font-size: 17px;
  font-weight: 500;
}

.advisor-path-list p {
  font-size: 13px;
  line-height: 1.65;
}

.advisor-note {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  color: var(--subtle);
  font-size: 12px;
}

.advisor-note i {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 17px;
}

.advisor-resource-grid,
.advisor-benefit-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.advisor-resource-grid article {
  min-height: 188px;
}

.advisor-benefit-grid article {
  min-height: 210px;
}

.advisor-benefit-number {
  display: block;
}

.advisor-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 40px;
  align-items: center;
  padding: 34px 38px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.advisor-contact-copy > p:not(.page-label):not(.advisor-contact-tip) {
  max-width: 680px;
  margin-top: 18px;
  font-size: 15px;
}

.advisor-contact-points {
  display: grid;
  gap: 9px;
  margin-top: 24px;
}

.advisor-contact-points span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
}

.advisor-contact-points i {
  color: var(--accent);
  font-size: 19px;
}

.advisor-contact-tip {
  max-width: 690px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.advisor-qr-card {
  width: min(100%, 280px);
  margin: 0;
  overflow: hidden;
  justify-self: end;
  border: 1px solid var(--line);
  background: #fff;
}

.advisor-qr-card img {
  width: 100%;
  aspect-ratio: 920 / 1127;
  object-fit: cover;
}

.advisor-qr-card figcaption {
  display: grid;
  gap: 3px;
  padding: 14px 16px 16px;
  border-top: 1px solid #e2e2e2;
  color: #111;
  background: #fff;
}

.advisor-qr-card figcaption strong {
  font-size: 14px;
  font-weight: 600;
}

.advisor-qr-card figcaption span {
  color: #666;
  font-size: 12px;
}

@media (max-width: 1380px) {
  .advisor-section-nav {
    position: sticky;
    top: 82px;
    left: auto;
    z-index: 8;
    grid-template-columns: none;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    width: 100%;
    margin-top: 22px;
    overflow-x: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    transform: none;
  }

  .advisor-section-nav::before,
  .advisor-section-nav::after {
    display: none;
  }

  .advisor-section-nav a {
    min-width: 150px;
    min-height: 52px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .advisor-section-nav a:first-of-type {
    border-left: 0;
  }
}

@media (max-width: 980px) {
  .advisor-hero,
  .advisor-path,
  .advisor-contact {
    grid-template-columns: 1fr;
  }

  .advisor-hero-media {
    width: 100%;
    height: 360px;
    justify-self: stretch;
  }

  .advisor-section-heading {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .advisor-duty-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .advisor-path-media {
    min-height: 420px;
  }

  .advisor-qr-card {
    width: min(100%, 260px);
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .advisor-page {
    width: calc(100% - 28px);
  }

  .advisor-hero {
    margin-top: 30px;
    gap: 24px;
  }

  .advisor-hero h1 {
    font-size: 34px;
  }

  .advisor-hero-media {
    height: 270px;
  }

  .advisor-section-nav a {
    min-height: 52px;
    font-size: 12px;
  }

  .advisor-section {
    margin-top: 52px;
  }

  .advisor-section-heading h2,
  .advisor-path-copy h2,
  .advisor-contact-copy h2 {
    font-size: 34px;
  }

  .advisor-duty-grid,
  .advisor-resource-grid,
  .advisor-benefit-grid {
    grid-template-columns: 1fr;
  }

  .advisor-duty-grid article,
  .advisor-resource-grid article,
  .advisor-benefit-grid article {
    min-height: 0;
  }

  .advisor-path-media {
    min-height: 360px;
  }

  .advisor-contact {
    gap: 30px;
    padding: 24px 20px;
  }
}

.nav-item-with-icon--mechanical {
  --nav-group-tone: #c59a4b;
  --nav-group-filter: brightness(0) saturate(100%) invert(64%) sepia(46%) saturate(703%) hue-rotate(359deg) brightness(92%) contrast(86%);
}

.nav-item-with-icon--control {
  --nav-group-tone: #6e9dca;
  --nav-group-filter: brightness(0) saturate(100%) invert(63%) sepia(22%) saturate(858%) hue-rotate(168deg) brightness(92%) contrast(87%);
}

.nav-item-with-icon--vision {
  --nav-group-tone: #8976b2;
  --nav-group-filter: brightness(0) saturate(100%) invert(55%) sepia(17%) saturate(1122%) hue-rotate(216deg) brightness(90%) contrast(83%);
}

.nav-item-with-icon--hardware {
  --nav-group-tone: #62a66f;
  --nav-group-filter: brightness(0) saturate(100%) invert(61%) sepia(25%) saturate(748%) hue-rotate(78deg) brightness(89%) contrast(84%);
}

.nav-item-with-icon--operations {
  --nav-group-tone: #bd6f84;
  --nav-group-filter: brightness(0) saturate(100%) invert(58%) sepia(21%) saturate(926%) hue-rotate(292deg) brightness(91%) contrast(84%);
}

.nav-dropdown--organization a.nav-item-with-icon:is(
  .nav-item-with-icon--mechanical,
  .nav-item-with-icon--control,
  .nav-item-with-icon--vision,
  .nav-item-with-icon--hardware,
  .nav-item-with-icon--operations
)::before {
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.nav-dropdown--organization a.nav-item-with-icon:is(
  .nav-item-with-icon--mechanical,
  .nav-item-with-icon--control,
  .nav-item-with-icon--vision,
  .nav-item-with-icon--hardware,
  .nav-item-with-icon--operations
):is(:hover, :focus-visible) {
  color: var(--nav-group-tone);
  background: color-mix(in srgb, var(--nav-group-tone) 10%, var(--card-bg));
}

.nav-dropdown--organization a.nav-item-with-icon:is(
  .nav-item-with-icon--mechanical,
  .nav-item-with-icon--control,
  .nav-item-with-icon--vision,
  .nav-item-with-icon--hardware,
  .nav-item-with-icon--operations
):is(:hover, :focus-visible)::before {
  background: var(--nav-group-tone);
  box-shadow: 0 0 10px color-mix(in srgb, var(--nav-group-tone) 44%, transparent);
}

.nav-dropdown--organization a.nav-item-with-icon:is(
  .nav-item-with-icon--mechanical,
  .nav-item-with-icon--control,
  .nav-item-with-icon--vision,
  .nav-item-with-icon--hardware,
  .nav-item-with-icon--operations
) .nav-item-logo img {
  transition: filter 160ms ease, transform 160ms ease;
}

.nav-dropdown--organization a.nav-item-with-icon:is(
  .nav-item-with-icon--mechanical,
  .nav-item-with-icon--control,
  .nav-item-with-icon--vision,
  .nav-item-with-icon--hardware,
  .nav-item-with-icon--operations
):is(:hover, :focus-visible) .nav-item-logo img {
  filter: var(--nav-group-filter) !important;
  transform: scale(1.06);
}

.nav-item-logo--robomaster img {
  width: 21px;
  height: 21px;
}

.home-discover {
  position: relative;
  display: grid;
  align-items: center;
  padding: 48px 0 68px;
  border-top: 1px solid var(--line);
  overflow: hidden;
}

.home-discover-inner {
  position: relative;
  z-index: 1;
  width: min(var(--max-width), calc(100% - 72px));
  margin: 0 auto;
}

.home-discover-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: auto;
  height: 113svh;
  max-width: 92vw;
  object-fit: contain;
  opacity: .15;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

:root:not([data-theme="dark"]) .home-discover-watermark {
  filter: brightness(0);
}

.home-access-heading {
  margin-bottom: 26px;
}

.home-access-heading,
.home-access-grid {
  transform: translateY(-14px);
}

.home-access-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.home-access-grid a {
  position: relative;
  min-width: 0;
  min-height: 166px;
  padding: 26px 28px;
  display: grid;
  align-content: center;
  gap: 8px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 34%, transparent);
  transition: color 160ms ease, background 160ms ease;
}

.home-access-grid a:hover,
.home-access-grid a:focus-visible {
  color: var(--accent);
  background: color-mix(in srgb, var(--surface) 52%, transparent);
}

.home-access-grid i {
  position: absolute;
  top: 50%;
  right: 26px;
  color: var(--accent);
  font-size: 38px;
  transform: translateY(-50%);
}

.home-access-grid strong {
  font-size: 23px;
  font-weight: 500;
}

.home-access-grid span {
  color: var(--muted);
  font-size: 14px;
}

.home-related-links {
  margin-top: 26px;
}

.home-related-heading {
  margin-bottom: 16px;
}

.home-related-heading h2 {
  font-size: 25px;
}

.home-related-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  transform: none;
}

.home-related-grid a {
  min-height: 112px;
  padding: 18px 22px;
}

.home-related-grid i {
  top: 50%;
  right: 22px;
  font-size: 41px;
  transform: translateY(-50%);
}

.home-related-grid .home-link-mark {
  top: 19px;
  right: 22px;
  width: 29px;
  height: 29px;
  color: var(--accent);
}

.home-related-grid strong {
  padding-right: 28px;
  font-size: 18px;
}

.home-related-grid span:last-child {
  font-size: 13px;
}

.home-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.home-section-heading .page-label {
  margin-bottom: 4px;
}

.home-section-heading h2 {
  margin: 0;
  color: var(--text);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.25;
}

.home-section-heading > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 14px;
}

.home-section-heading > a i {
  color: var(--accent);
  font-size: 18px;
}

.home-news-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(220px, .75fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.home-news-feature,
.home-news-link {
  min-width: 0;
  min-height: 146px;
  padding: 24px;
  border-right: 1px solid var(--line);
  transition: background 160ms ease, color 160ms ease;
}

.home-news-feature:hover,
.home-news-feature:focus-visible,
.home-news-link:hover,
.home-news-link:focus-visible {
  background: var(--surface);
}

.home-news-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home-news-feature > span,
.home-news-link small {
  color: var(--accent);
  font-size: 12px;
}

.home-news-feature strong {
  margin-top: 5px;
  color: var(--text);
  font-size: 25px;
  font-weight: 500;
}

.home-news-feature small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 14px;
}

.home-news-feature > i {
  position: absolute;
  top: 22px;
  right: 22px;
  color: var(--accent);
  font-size: 20px;
}

.home-news-link {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 14px;
}

.home-news-link:last-child {
  border-right: 0;
}

.home-news-link > i:first-child {
  color: var(--accent);
  font-size: 26px;
}

.home-news-link > i:last-child {
  color: var(--subtle);
  font-size: 18px;
}

.home-news-link span {
  display: grid;
}

.home-news-link strong {
  color: var(--text);
  font-size: 19px;
  font-weight: 500;
}

.home-directory {
  margin-top: 38px;
}

.home-directory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.home-directory-grid section {
  min-width: 0;
  padding: 22px 26px;
  border-right: 1px solid var(--line);
}

.home-directory-grid section:last-child {
  border-right: 0;
}

.home-directory-grid h3 {
  margin: 0 0 15px;
  color: var(--text);
  font-size: 19px;
  font-weight: 500;
}

.home-directory-grid section > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.home-directory-grid a {
  position: relative;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
  transition: color 160ms ease;
}

.home-directory-grid a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease;
}

.home-directory-grid a:hover,
.home-directory-grid a:focus-visible {
  color: var(--text);
}

.home-directory-grid a:hover::after,
.home-directory-grid a:focus-visible::after {
  transform: scaleX(1);
}

.home-snap-section--thanks {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 0;
}

.home-snap-section--thanks > :not(.site-footer) {
  transform: translateY(16px);
}

.home-snap-section--thanks > .section-heading:first-child,
.home-snap-section--thanks > .thanks-marquee {
  transform: translateY(31px);
}

.home-snap-section--thanks > .section-heading {
  display: grid;
  grid-template-columns: minmax(190px, .38fr) minmax(0, 1fr);
  align-items: end;
  gap: 34px;
  margin-bottom: 20px;
}

.home-snap-section--thanks > .section-heading > p {
  max-width: 760px;
  justify-self: end;
  text-align: right;
}

.home-snap-section--thanks > .section-heading .page-label {
  margin-bottom: 2px;
}

.home-snap-section--thanks .thanks-marquee .partner-marquee-item {
  grid-template-rows: 54px auto;
  height: 98px;
  padding: 9px 16px;
  gap: 5px;
}

.home-snap-section--thanks .thanks-marquee .partner-marquee-item img {
  max-height: 48px;
}

.home-snap-section--thanks .partner-heading {
  margin-top: auto;
  padding-top: 20px;
}

.home-snap-section--thanks .thanks-card {
  min-height: 108px;
  grid-template-rows: 52px auto;
  padding: 10px 16px 9px;
  gap: 5px;
}

.home-snap-section--thanks .sponsor-card .thanks-logo-frame {
  height: 52px;
  padding-block: 5px;
}

.home-snap-section--thanks .sponsor-card img {
  max-height: 42px;
}

.home-friendly-links {
  display: grid;
  grid-template-columns: minmax(180px, .28fr) minmax(0, 1fr);
  margin-top: auto;
  border-block: 1px solid var(--line);
}

.home-friendly-links-heading {
  display: grid;
  align-content: center;
  min-height: 70px;
  padding: 10px 20px;
  border-right: 1px solid var(--line);
}

.home-friendly-links-heading .page-label {
  margin-bottom: 1px;
}

.home-friendly-links-heading h2 {
  margin: 0;
  color: var(--text);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
}

.home-friendly-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  min-height: 70px;
  padding: 10px 22px;
  transition: color 160ms ease, background 160ms ease;
}

.home-friendly-link:hover,
.home-friendly-link:focus-visible {
  color: var(--accent);
  background: var(--surface);
}

.home-friendly-link > i:first-child {
  color: var(--accent);
  font-size: 28px;
}

.home-friendly-link > i:last-child {
  color: var(--muted);
  font-size: 18px;
}

.home-friendly-link span {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.home-friendly-link strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 500;
}

.home-friendly-link small {
  color: var(--muted);
  font-size: 13px;
}

body[data-page="home"] .home-snap-section--thanks > .site-footer {
  flex: 0 0 auto;
  margin-top: auto;
}

.home-carousel-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid var(--subtle);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.home-carousel-dots button:hover,
.home-carousel-dots button:focus-visible {
  border-color: var(--accent);
  transform: scale(1.18);
}

.home-carousel-dots button.is-active {
  border-color: var(--accent);
  background: var(--accent);
}

@media (max-width: 860px) {
  html:has(body[data-page="home"]) {
    scroll-padding-top: 72px;
    scroll-snap-type: y proximity;
  }

  .home-snap-section {
    min-height: calc(100svh - 72px);
  }

  .home-snap-section--overview {
    padding: 18px 0 28px;
  }

  .home-section-nav {
    left: -6px;
  }

  .home-section-nav button span {
    display: none;
  }

  .home-carousel {
    width: 100%;
  }

  .home-discover {
    padding: 38px 0 58px;
  }

  .home-discover-inner {
    width: calc(100% - 44px);
  }

  .home-access-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-news-feature {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .home-directory-grid {
    grid-template-columns: 1fr;
  }

  .home-directory-grid section,
  .home-directory-grid section:last-child {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .home-directory-grid section:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 560px) {
  .home-carousel-footer {
    min-height: 54px;
  }

  .home-carousel-action {
    top: 13px;
    left: calc(33.333% - 26px);
    min-width: 144px;
    min-height: 34px;
    font-size: 13px;
  }

  .home-carousel-dots {
    top: 32px;
    left: calc(66.667% + 26px);
    gap: 9px;
  }

  .home-cqu-seal {
    top: 2px;
    right: -4px;
    width: 108px;
  }

  .home-group-links {
    justify-content: space-between;
    gap: 8px;
    width: min(100%, 320px);
    margin-top: 20px;
  }

  .home-group-link {
    width: 48px;
    height: 48px;
  }

  .home-group-link img {
    width: 42px;
    height: 42px;
  }

  .home-discover-watermark {
    height: 113svh;
    max-width: 110vw;
  }

  .home-access-grid {
    grid-template-columns: 1fr;
  }

  .home-access-grid a {
    min-height: 98px;
    padding: 18px 20px;
  }

  .home-access-grid i {
    top: 50%;
    right: 20px;
  }

  .quote-robomaster-link {
    left: 4px;
    width: 30px;
    height: 30px;
  }

  .home-quote .quote-robomaster-link .home-link-mark,
  .home-quote .quote-robomaster-link .home-link-logo {
    width: 28px;
    height: 27px;
  }

  .home-snap-section--overview .home-quote {
    min-height: 88px;
    margin-top: 24px;
    gap: 8px;
    padding-block: 8px;
  }

  .home-snap-section--overview .quote-stage {
    min-height: 64px;
    padding-left: 38px;
  }

  .home-snap-section--overview .quote-stage p {
    font-size: 17px;
    line-height: 1.5;
  }

  .home-snap-section--overview .quote-stage span {
    margin-top: 3px;
    font-size: 12px;
  }

  .home-snap-section--overview .quote-random-button {
    width: 32px;
    height: 32px;
  }

  .home-related-links {
    margin-top: 24px;
  }

  .home-related-grid {
    grid-template-columns: 1fr;
  }

  .home-related-grid a {
    min-height: 92px;
  }

  .home-carousel-dots button {
    width: 9px;
    height: 9px;
  }

  .home-section-heading {
    align-items: start;
  }

  .home-section-heading h2 {
    font-size: 25px;
  }

  .home-section-heading > a {
    margin-top: 22px;
    font-size: 12px;
  }

  .home-news-grid {
    grid-template-columns: 1fr;
  }

  .home-news-feature,
  .home-news-link {
    grid-column: auto;
    min-height: 112px;
    padding: 18px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .home-news-link:last-child {
    border-bottom: 0;
  }

  .home-directory {
    margin-top: 30px;
  }

  .home-directory-grid section {
    padding: 18px;
  }

  .home-snap-section--thanks {
    padding-top: 36px;
    padding-bottom: 0;
  }

  .home-snap-section--thanks > .section-heading {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .home-snap-section--thanks > .section-heading > p {
    justify-self: start;
    text-align: left;
  }

  .home-friendly-links {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }

  .home-friendly-links-heading {
    min-height: 58px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-carousel-slide,
  .home-carousel-action,
  .home-carousel-dots button,
  .home-section-nav button::before {
    transition: none;
  }

  html:has(body[data-page="home"]) {
    scroll-snap-type: none;
  }
}

.gallery-lightbox .gallery-lightbox-counter {
  top: 34px;
  bottom: auto;
}

/* Photo wall category navigation shares the hero row with the page title. */
.gallery-page .page-hero {
  grid-template-columns: minmax(240px, 0.36fr) minmax(0, 1.64fr);
  align-items: end;
}

.gallery-page .page-hero .gallery-tabs {
  position: relative;
  top: auto;
  z-index: auto;
  width: 100%;
  align-self: end;
}

.gallery-page .page-hero .gallery-tabs button {
  min-height: 54px;
  padding-inline: 10px;
  font-size: 14px;
  white-space: nowrap;
}

.gallery-page .gallery-shell {
  margin-top: 0;
}

@media (max-width: 720px) {
  .design-filter {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(104px, 1fr);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
}

@media (max-width: 980px) {
  .gallery-page .page-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 20px;
  }

  .gallery-page .page-hero .gallery-tabs {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(148px, 1fr);
    overflow-x: auto;
  }
}

/* Control and hardware group pages: project-led engineering profiles. */
.engineering-group-page {
  --engineering-tone: var(--accent);
  width: min(1320px, calc(100% - 48px));
  margin: 34px auto 0;
}

.control-page {
  --engineering-tone: #65aee8;
}

.hardware-page {
  --engineering-tone: #62a66f;
}

.engineering-group-hero {
  display: grid;
  grid-template-columns: minmax(440px, .9fr) minmax(500px, 1.1fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
  min-height: 420px;
  padding: 36px 0 48px;
  border-bottom: 1px solid var(--line);
}

.engineering-group-hero-copy {
  max-width: 660px;
}

.engineering-group-hero-copy .page-label,
.engineering-section-heading .page-label,
.engineering-project-copy .page-label {
  color: var(--engineering-tone);
}

.engineering-title-lockup {
  display: flex;
  align-items: center;
  gap: 24px;
}

.engineering-title-lockup h1 {
  margin: 0;
  font-size: clamp(54px, 6vw, 86px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: .01em;
  white-space: nowrap;
}

.engineering-title-lockup img {
  width: clamp(56px, 6vw, 82px);
  height: clamp(56px, 6vw, 82px);
  object-fit: contain;
}

:root[data-theme="dark"] .engineering-title-lockup img {
  filter: invert(1) grayscale(1) brightness(1.3);
}

.engineering-group-hero-copy > p:last-child {
  max-width: 650px;
  margin-top: 24px;
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.9;
}

.engineering-group-hero-visual {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #090a0c;
}

.engineering-group-hero-visual > img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.engineering-group-hero-visual--contain > img {
  object-fit: contain;
  padding: 22px;
}

.engineering-group-hero-visual figcaption {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 16px;
  align-items: baseline;
  padding: 15px 18px 16px;
  background: var(--card-bg);
}

.engineering-group-hero-visual figcaption span {
  grid-row: 1 / span 2;
  color: var(--engineering-tone);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
}

.engineering-group-hero-visual figcaption strong {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
}

.engineering-group-hero-visual figcaption small {
  color: var(--subtle);
  font-size: 12px;
}

.engineering-section {
  padding: 70px 0;
  border-bottom: 1px solid var(--line);
}

.engineering-section:last-child {
  border-bottom: 0;
}

.engineering-section-heading {
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(440px, 1.18fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: end;
  margin-bottom: 32px;
}

.engineering-section-heading .page-label {
  margin-bottom: 6px;
}

.engineering-section-heading h2 {
  margin: 0;
  font-size: clamp(34px, 3.5vw, 50px);
  font-weight: 500;
  line-height: 1.15;
}

.engineering-section-heading > p {
  max-width: 680px;
  font-size: 16px;
  line-height: 1.8;
}

.engineering-pipeline-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line);
}

.engineering-pipeline-grid article {
  position: relative;
  min-width: 0;
  min-height: 220px;
  padding: 24px 22px 22px;
  background: var(--card-bg);
  border-left: 1px solid var(--line);
}

.engineering-pipeline-grid article:first-child {
  border-left: 0;
}

.engineering-pipeline-grid article > span {
  color: var(--engineering-tone);
  font: 600 12px/1 sans-serif;
  letter-spacing: .12em;
}

.engineering-pipeline-grid article > i {
  display: block;
  margin: 18px 0 12px;
  color: var(--engineering-tone);
  font-size: 29px;
  line-height: 1;
}

.engineering-pipeline-grid strong {
  display: block;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
}

.engineering-pipeline-grid p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.75;
}

.control-project-grid,
.hardware-project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.engineering-project-card,
.hardware-project-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.engineering-project-card--wide,
.hardware-project-card--featured,
.hardware-project-card--support {
  grid-column: 1 / -1;
}

.engineering-project-card--wide,
.hardware-project-card--featured,
.hardware-project-card--support {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
}

.engineering-project-card--reverse,
.hardware-project-card--reverse {
  grid-template-columns: minmax(340px, .85fr) minmax(0, 1.15fr);
}

.engineering-project-card--reverse .engineering-project-media-grid,
.hardware-project-card--reverse .hardware-project-media-grid {
  order: 2;
}

.engineering-project-media,
.hardware-project-media,
.engineering-project-media-grid figure,
.hardware-project-media-grid figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #08090b;
}

.engineering-project-media > img,
.hardware-project-media > img,
.engineering-project-media-grid img,
.hardware-project-media-grid img {
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
}

.engineering-project-media,
.hardware-project-media {
  display: grid;
  grid-template-rows: minmax(250px, 1fr) auto;
}

.engineering-project-media-grid,
.hardware-project-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.engineering-project-media-grid figure,
.hardware-project-media-grid figure {
  display: grid;
  grid-template-rows: minmax(300px, 1fr) auto;
}

.engineering-project-media figcaption,
.hardware-project-media figcaption,
.engineering-project-media-grid figcaption,
.hardware-project-media-grid figcaption {
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  background: var(--card-bg);
  color: var(--subtle);
  font-size: 12px;
  line-height: 1.45;
}

.engineering-media--contain > img,
figure.engineering-media--contain img {
  object-fit: contain;
  padding: 14px;
}

.engineering-project-copy,
.hardware-project-copy {
  padding: clamp(24px, 3vw, 38px);
}

.engineering-project-copy h3,
.hardware-project-copy h3 {
  margin: 0;
  font-size: clamp(25px, 2.3vw, 34px);
  font-weight: 500;
  line-height: 1.25;
}

.engineering-project-copy > p:not(.page-label),
.hardware-project-copy > p {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.82;
}

.engineering-project-copy ul,
.hardware-project-copy ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.engineering-project-copy li,
.hardware-project-copy li {
  padding: 5px 9px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.hardware-project-copy header {
  display: flex;
  align-items: center;
  gap: 11px;
}

.hardware-project-copy header > span {
  color: var(--engineering-tone);
  font: 600 12px/1 sans-serif;
  letter-spacing: .12em;
}

.hardware-project-copy header > i {
  color: var(--engineering-tone);
  font-size: 27px;
  line-height: 1;
}

.hardware-project-card--text .hardware-project-copy {
  min-height: 280px;
}

.control-integration-grid,
.engineering-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
}

.control-integration-grid article,
.engineering-capability-grid article {
  min-width: 0;
  padding: 28px;
  border-left: 1px solid var(--line);
  background: var(--card-bg);
}

.control-integration-grid article:first-child,
.engineering-capability-grid article:first-child {
  border-left: 0;
}

.control-integration-grid i,
.engineering-capability-grid i {
  color: var(--engineering-tone);
  font-size: 30px;
  line-height: 1;
}

.control-integration-grid span {
  display: block;
  margin-top: 15px;
  color: var(--engineering-tone);
  font: 600 11px/1 sans-serif;
  letter-spacing: .12em;
}

.control-integration-grid h3,
.engineering-capability-grid h3 {
  margin: 9px 0 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
}

.control-integration-grid p,
.engineering-capability-grid p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.75;
}

.engineering-capability-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.engineering-capability-grid article {
  padding: 24px 20px;
}

.engineering-stack {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  margin-top: 18px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.engineering-stack span,
.engineering-stack p {
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.engineering-stack span:nth-child(-n + 2),
.engineering-stack p:nth-child(-n + 2) {
  border-top: 0;
}

.engineering-stack span {
  color: var(--engineering-tone);
  font-weight: 500;
}

.engineering-stack p {
  border-left: 1px solid var(--line);
}

.hardware-growth-route {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
  border: 1px solid var(--line);
}

.hardware-growth-route article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 22px;
  border-left: 1px solid var(--line);
  background: var(--card-bg);
}

.hardware-growth-route article:first-child {
  border-left: 0;
}

.hardware-growth-route article > span {
  color: var(--engineering-tone);
  font: 600 13px/1 sans-serif;
}

.hardware-growth-route small {
  color: var(--engineering-tone);
  font: 600 10px/1 sans-serif;
  letter-spacing: .12em;
}

.hardware-growth-route h3 {
  margin: 7px 0 0;
  font-size: 18px;
  font-weight: 500;
}

.hardware-growth-route p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.7;
}

.engineering-note {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 14px;
  color: var(--subtle);
  font-size: 12px;
}

.engineering-note i {
  color: var(--engineering-tone);
  font-size: 17px;
}

@media (max-width: 1100px) {
  .engineering-group-hero {
    grid-template-columns: minmax(340px, .8fr) minmax(420px, 1.2fr);
    gap: 32px;
  }

  .engineering-pipeline-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .engineering-pipeline-grid article:nth-child(4) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .engineering-pipeline-grid article:nth-child(5) {
    border-top: 1px solid var(--line);
  }

  .engineering-capability-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .engineering-capability-grid article:nth-child(4) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .engineering-capability-grid article:nth-child(5) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 860px) {
  .engineering-group-page {
    width: calc(100% - 28px);
    margin-top: 18px;
  }

  .engineering-group-hero,
  .engineering-section-heading,
  .engineering-project-card--wide,
  .hardware-project-card--featured,
  .hardware-project-card--support,
  .engineering-project-card--reverse,
  .hardware-project-card--reverse {
    grid-template-columns: minmax(0, 1fr);
  }

  .engineering-group-hero {
    min-height: 0;
    padding: 24px 0 34px;
  }

  .engineering-title-lockup {
    gap: 14px;
  }

  .engineering-title-lockup h1 {
    font-size: clamp(40px, 12vw, 58px);
  }

  .engineering-title-lockup img {
    width: 54px;
    height: 54px;
  }

  .engineering-group-hero-copy > p:last-child {
    margin-top: 16px;
    font-size: 16px;
  }

  .engineering-group-hero-visual > img {
    aspect-ratio: 4 / 3;
  }

  .engineering-section {
    padding: 48px 0;
  }

  .engineering-section-heading {
    gap: 12px;
    margin-bottom: 24px;
  }

  .engineering-section-heading h2 {
    font-size: clamp(30px, 9vw, 42px);
  }

  .control-project-grid,
  .hardware-project-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .engineering-project-card--wide,
  .hardware-project-card--featured,
  .hardware-project-card--support {
    grid-column: auto;
  }

  .engineering-project-card--reverse .engineering-project-media-grid,
  .hardware-project-card--reverse .hardware-project-media-grid {
    order: 0;
  }

  .control-integration-grid,
  .engineering-capability-grid,
  .hardware-growth-route {
    grid-template-columns: minmax(0, 1fr);
  }

  .control-integration-grid article,
  .engineering-capability-grid article,
  .hardware-growth-route article,
  .engineering-capability-grid article:nth-child(4),
  .engineering-capability-grid article:nth-child(5) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .control-integration-grid article:first-child,
  .engineering-capability-grid article:first-child,
  .hardware-growth-route article:first-child {
    border-top: 0;
  }
}

@media (max-width: 600px) {
  .engineering-title-lockup h1 {
    font-size: clamp(35px, 10.8vw, 48px);
  }

  .engineering-title-lockup img {
    width: 46px;
    height: 46px;
  }

  .engineering-group-hero-visual figcaption {
    grid-template-columns: 1fr;
  }

  .engineering-group-hero-visual figcaption span {
    grid-row: auto;
  }

  .engineering-pipeline-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .engineering-pipeline-grid article,
  .engineering-pipeline-grid article:nth-child(4),
  .engineering-pipeline-grid article:nth-child(5) {
    min-height: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .engineering-pipeline-grid article:first-child {
    border-top: 0;
  }

  .engineering-project-media-grid,
  .hardware-project-media-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .engineering-project-media-grid figure,
  .hardware-project-media-grid figure {
    grid-template-rows: minmax(230px, 1fr) auto;
  }

  .engineering-project-copy,
  .hardware-project-copy {
    padding: 23px 20px;
  }

  .engineering-stack {
    grid-template-columns: minmax(0, 1fr);
  }

  .engineering-stack span,
  .engineering-stack p {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .engineering-stack span:first-child {
    border-top: 0;
  }
}

/* Control / hardware refinement: align density and media treatment with the vision page. */
.engineering-group-page {
  width: min(var(--max-width), calc(100% - 40px));
  margin: 0 auto;
}

.engineering-group-hero {
  grid-template-columns: minmax(360px, .9fr) minmax(480px, 1.1fr);
  gap: 28px;
  align-items: stretch;
  min-height: 0;
  margin-top: 38px;
  padding: 0 0 26px;
}

.engineering-group-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: none;
  padding: 27px 0;
}

.engineering-title-lockup {
  gap: 22px;
  align-items: flex-end;
}

.engineering-title-lockup h1 {
  font-size: clamp(48px, 5vw, 72px);
}

.engineering-title-lockup img {
  width: 62px;
  height: 62px;
  margin-bottom: 5px;
}

.control-page .engineering-title-lockup img,
:root[data-theme="dark"] .control-page .engineering-title-lockup img {
  filter: brightness(0) saturate(100%) invert(69%) sepia(37%) saturate(1049%) hue-rotate(174deg) brightness(95%) contrast(91%);
}

.operations-page {
  --engineering-tone: #bd6f84;
}

.operations-page .engineering-group-hero-copy {
  padding-left: 46px;
}

.operations-page .engineering-title-lockup img,
:root[data-theme="dark"] .operations-page .engineering-title-lockup img {
  filter: brightness(0) saturate(100%) invert(58%) sepia(21%) saturate(926%) hue-rotate(292deg) brightness(91%) contrast(84%);
}

.operations-hero-visual > img {
  object-position: center 38%;
}

.hardware-page .engineering-title-lockup img,
:root[data-theme="dark"] .hardware-page .engineering-title-lockup img {
  filter: brightness(0) saturate(100%) invert(61%) sepia(25%) saturate(748%) hue-rotate(78deg) brightness(89%) contrast(84%);
}

.engineering-group-hero-copy > p:last-child {
  width: calc(100% + 46px);
  max-width: none;
  margin-top: 24px;
  font-size: 15px;
  line-height: 1.85;
}

.engineering-group-hero-visual {
  width: 95%;
  min-height: 332px;
  justify-self: end;
}

.engineering-group-hero-visual > img {
  width: 100%;
  height: 100%;
  min-height: 332px;
  aspect-ratio: auto;
  object-fit: cover;
}

.engineering-group-hero-visual--contain > img {
  padding: 18px;
  object-fit: contain;
}

.engineering-group-hero-visual::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, .82));
  pointer-events: none;
}

.engineering-group-hero-visual figcaption {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 20px;
  left: 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 22px;
  padding: 0;
  background: transparent;
  color: #fff;
}

.engineering-group-hero-visual figcaption span {
  grid-row: auto;
  color: color-mix(in srgb, var(--engineering-tone) 72%, #fff);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
}

.engineering-group-hero-visual figcaption strong {
  grid-row: 2;
  font-size: 18px;
}

.engineering-group-hero-visual figcaption small {
  grid-row: 2;
  align-self: end;
  color: color-mix(in srgb, var(--engineering-tone) 72%, #fff);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
}

.engineering-section {
  margin: 52px 0 0;
  padding: 0;
  border-bottom: 0;
}

.engineering-section-heading {
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .72fr);
  gap: 22px 38px;
  margin-bottom: 24px;
}

.engineering-section-heading h2 {
  font-size: clamp(30px, 3.5vw, 44px);
}

.engineering-section-heading > p {
  font-size: 14px;
  line-height: 1.8;
}

.engineering-pipeline-grid {
  gap: 1px;
  background: var(--line);
}

.engineering-pipeline-grid article {
  min-height: 164px;
  padding: 19px;
  border: 0;
}

.engineering-pipeline-grid article > span {
  font-size: 10px;
}

.engineering-pipeline-grid article > i {
  position: absolute;
  top: 17px;
  right: 18px;
  margin: 0;
  font-size: 24px;
}

.engineering-pipeline-grid strong {
  margin-top: 22px;
  font-size: 17px;
}

.engineering-pipeline-grid p {
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.68;
}

.engineering-project-browser {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.engineering-project-directory {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.engineering-project-directory button {
  display: grid;
  grid-template-columns: 28px 28px minmax(0, 1fr);
  gap: 4px 9px;
  align-items: center;
  min-height: 68px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

.engineering-project-directory button:last-child {
  border-bottom: 0;
}

.engineering-project-directory button:hover,
.engineering-project-directory button:focus-visible,
.engineering-project-directory button[aria-selected="true"] {
  background: color-mix(in srgb, var(--engineering-tone) 13%, var(--card-bg));
  outline: 0;
}

.engineering-project-directory button[aria-selected="true"] {
  box-shadow: inset 3px 0 var(--engineering-tone);
}

.engineering-project-directory button > span {
  color: var(--engineering-tone);
  font: 700 10px/1 Arial, "Microsoft YaHei", sans-serif;
}

.engineering-project-directory button > i {
  color: var(--engineering-tone);
  font-size: 22px;
}

.engineering-project-directory button > strong {
  font-size: 16px;
  font-weight: 500;
}

.engineering-project-directory button > small {
  grid-column: 3;
  color: var(--muted);
  font: 10px/1.45 Arial, "Microsoft YaHei", sans-serif;
}

.engineering-project-stage {
  min-width: 0;
}

.engineering-project-panel[hidden] {
  display: none;
}

.engineering-project-panel {
  padding: 24px;
}

.engineering-project-panel > header {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 30px;
  align-items: start;
  margin-bottom: 18px;
}

.engineering-project-panel > header > .page-label {
  grid-column: 1 / -1;
  color: var(--engineering-tone);
}

.engineering-project-panel h3 {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
}

.engineering-project-panel > header > p:not(.page-label) {
  grid-column: 1 / -1;
  grid-row: 3;
  font-size: 13px;
  line-height: 1.75;
}

.engineering-project-panel > header > ul {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-self: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.engineering-project-panel > header > ul li {
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--engineering-tone) 48%, var(--line));
  font: 10px/1.4 Arial, "Microsoft YaHei", sans-serif;
}

.engineering-project-panel .engineering-project-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.engineering-project-panel .engineering-project-media {
  display: block;
  margin: 0;
  border: 1px solid var(--line);
  background: #090a0e;
}

.engineering-project-panel .engineering-project-media img {
  width: 100%;
  height: clamp(200px, 22vw, 300px);
  min-height: 0;
  object-fit: contain;
  background: #090a0e;
}

.engineering-project-panel .engineering-project-media--single img {
  height: clamp(240px, 27vw, 340px);
}

.operations-page .engineering-project-media--cover img {
  object-fit: cover;
}

.engineering-project-panel .engineering-project-media--contain img {
  padding: 12px;
  object-fit: contain;
}

.engineering-project-panel .engineering-project-media figcaption {
  padding: 10px 13px;
  border-top: 1px solid var(--line);
  color: #c9c9cf;
  font: 11px/1.5 Arial, "Microsoft YaHei", sans-serif;
}

.engineering-project-context {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 190px;
  padding: 30px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--engineering-tone) 6%, var(--surface));
}

.engineering-project-context i {
  color: var(--engineering-tone);
  font-size: 52px;
}

.engineering-project-context p {
  max-width: 560px;
  font-size: 14px;
}

.control-integration-grid article,
.engineering-capability-grid article {
  min-height: 150px;
  padding: 18px;
}

.operations-integration-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
}

.operations-integration-grid article {
  min-width: 0;
  min-height: 150px;
  padding: 18px;
  border-left: 1px solid var(--line);
  background: var(--card-bg);
}

.operations-integration-grid article:first-child {
  border-left: 0;
}

.operations-integration-grid i {
  color: var(--engineering-tone);
  font-size: 24px;
}

.operations-integration-grid span {
  display: block;
  margin-top: 10px;
  color: var(--engineering-tone);
  font: 600 9px/1 sans-serif;
  letter-spacing: .12em;
}

.operations-integration-grid h3 {
  margin-top: 6px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
}

.operations-integration-grid p {
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.6;
}

.operations-growth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
}

.operations-growth-grid article {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 18px;
  min-width: 0;
  padding: 28px;
  border-left: 1px solid var(--line);
  background: var(--card-bg);
}

.operations-growth-grid article:first-child {
  border-left: 0;
}

.operations-growth-grid article > span,
.operations-growth-grid article > i,
.operations-growth-grid small {
  color: var(--engineering-tone);
}

.operations-growth-grid article > span {
  font: 700 10px/1 Arial, sans-serif;
}

.operations-growth-grid article > i {
  font-size: 28px;
  line-height: 1;
}

.operations-growth-grid small {
  font: 700 9px/1.4 Arial, sans-serif;
  letter-spacing: .12em;
}

.operations-growth-grid h3 {
  margin-top: 7px;
  font-size: 20px;
  font-weight: 500;
}

.operations-growth-grid p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.7;
}

.control-integration-grid i,
.engineering-capability-grid i {
  font-size: 24px;
}

.control-integration-grid span {
  margin-top: 10px;
  font-size: 9px;
}

.control-integration-grid h3,
.engineering-capability-grid h3 {
  margin-top: 6px;
  font-size: 17px;
}

.control-integration-grid p,
.engineering-capability-grid p {
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.6;
}

.engineering-stack,
.hardware-growth-route {
  margin-top: 12px;
}

.engineering-group-page > .engineering-section:last-child {
  margin-bottom: 84px;
}

@media (max-width: 980px) {
  .engineering-group-hero,
  .engineering-section-heading,
  .engineering-project-panel > header {
    grid-template-columns: 1fr;
  }

  .engineering-group-hero {
    gap: 24px;
  }

  .engineering-group-hero-copy {
    padding-bottom: 0;
  }

  .engineering-group-hero-copy > p:last-child,
  .engineering-group-hero-visual {
    width: 100%;
  }

  .engineering-project-panel h3,
  .engineering-project-panel > header > p:not(.page-label),
  .engineering-project-panel > header > ul {
    grid-column: 1;
  }

  .engineering-project-panel h3 {
    white-space: normal;
  }

  .engineering-project-panel > header > ul {
    grid-row: 3;
    justify-content: flex-start;
  }

  .engineering-project-panel > header > p:not(.page-label) {
    grid-row: 4;
  }
}

@media (max-width: 860px) {
  .engineering-group-page {
    width: calc(100% - 28px);
    margin-top: 0;
  }

  .engineering-group-hero {
    margin-top: 34px;
    padding-top: 0;
  }

  .engineering-group-hero-visual,
  .engineering-group-hero-visual > img {
    min-height: 300px;
  }

  .engineering-section {
    margin-top: 48px;
  }

  .engineering-project-browser {
    grid-template-columns: 1fr;
  }

  .engineering-project-directory {
    display: grid;
    grid-auto-columns: minmax(168px, 1fr);
    grid-auto-flow: column;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    scrollbar-width: thin;
  }

  .engineering-project-directory button {
    min-width: 168px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .engineering-project-directory button[aria-selected="true"] {
    box-shadow: inset 0 -3px var(--engineering-tone);
  }

  .operations-integration-grid,
  .operations-growth-grid {
    grid-template-columns: 1fr;
  }

  .operations-integration-grid article,
  .operations-growth-grid article {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .operations-integration-grid article:first-child,
  .operations-growth-grid article:first-child {
    border-top: 0;
  }
}

@media (max-width: 620px) {
  .engineering-title-lockup {
    gap: 15px;
    align-items: center;
  }

  .engineering-title-lockup h1 {
    font-size: 42px;
  }

  .engineering-title-lockup img {
    width: 42px;
    height: 42px;
    margin-bottom: 0;
  }

  .engineering-group-hero-visual,
  .engineering-group-hero-visual > img {
    min-height: 250px;
  }

  .engineering-group-hero-visual figcaption {
    right: 16px;
    bottom: 14px;
    left: 16px;
    grid-template-columns: 1fr;
  }

  .engineering-group-hero-visual figcaption small {
    display: none;
  }

  .engineering-section-heading h2 {
    font-size: 32px;
  }

  .operations-page .engineering-projects .engineering-section-heading h2 {
    font-size: clamp(24px, 7.5vw, 30px);
  }

  .engineering-project-panel {
    padding: 22px 18px;
  }

  .engineering-project-panel h3 {
    font-size: 23px;
  }

  .engineering-project-panel .engineering-project-media-grid {
    grid-template-columns: 1fr;
  }

  .engineering-project-panel .engineering-project-media img,
  .engineering-project-panel .engineering-project-media--single img {
    height: 230px;
  }

  .operations-growth-grid article {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 22px 18px;
  }

  .operations-growth-grid article > div {
    grid-column: 1 / -1;
  }
}

/* Homepage recruitment notice: a pale Qianli green with high-contrast dark text. */
.home-recruitment-notice {
  position: sticky;
  top: 82px;
  z-index: 19;
  height: 32px;
  overflow: hidden;
  border-bottom: 1px solid #69c98a;
  background: #c4f3d0;
  color: #101411;
}

.home-recruitment-notice[hidden] {
  display: none;
}

.home-recruitment-notice__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: min(var(--max-width), calc(100% - 40px));
  height: 32px;
  margin: 0 auto;
  padding: 0;
}

.home-recruitment-notice__inner > i {
  font-size: 19px;
}

.home-recruitment-notice p {
  margin: 0;
  color: #101411;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
}

.home-recruitment-notice strong {
  font-weight: 700;
}

.home-recruitment-notice a {
  margin-left: .2em;
  color: #101411;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.home-recruitment-notice a:hover,
.home-recruitment-notice a:focus-visible {
  text-decoration-thickness: 2px;
}

.home-recruitment-notice button {
  display: grid;
  width: 26px;
  height: 26px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: #101411;
  cursor: pointer;
}

.home-recruitment-notice button:hover,
.home-recruitment-notice button:focus-visible {
  background: rgba(0, 0, 0, .08);
  outline: 1px solid rgba(0, 0, 0, .35);
}

.home-recruitment-notice button i {
  font-size: 19px;
}

.home-mobile-advisory {
  display: none;
}

.home-mobile-advisory[hidden] {
  display: none;
}

@media (max-width: 860px) {
  .home-mobile-advisory:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: max(22px, env(safe-area-inset-top)) 22px max(22px, env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(8px);
  }

  .home-mobile-advisory__card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px 16px;
    width: min(100%, 390px);
    padding: 24px;
    border: 1px solid var(--accent);
    background: var(--card-bg);
    background: color-mix(in srgb, var(--card-bg) 94%, transparent);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
  }

  .home-mobile-advisory__card > i {
    color: var(--accent);
    font-size: 30px;
    line-height: 1;
  }

  .home-mobile-advisory__card .page-label {
    margin-bottom: 4px;
    font-size: 10px;
  }

  .home-mobile-advisory__card h2 {
    margin: 0 0 10px;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 500;
  }

  .home-mobile-advisory__card p:last-child {
    font-size: 14px;
    line-height: 1.8;
  }

  .home-mobile-advisory__card button {
    grid-column: 1 / -1;
    min-height: 44px;
    margin-top: 4px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #101011;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
  }

  .home-mobile-advisory__card button:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 3px;
  }
}

@media (max-width: 700px) {
  .home-recruitment-notice__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    width: calc(100% - 28px);
    gap: 8px;
    height: 36px;
    padding: 0;
  }

  .home-recruitment-notice__inner > i {
    display: none;
  }

  .home-recruitment-notice p {
    font-size: 9px;
    line-height: 1.3;
    text-align: left;
  }

  .home-recruitment-notice,
  .home-recruitment-notice__inner {
    height: 36px;
  }

  .home-recruitment-notice button {
    width: 26px;
    height: 26px;
  }
}

@media (max-width: 860px) {
  .home-recruitment-notice {
    top: 72px;
  }

  .operations-page .engineering-group-hero-copy {
    padding-left: 48px;
  }
}

/* History node media follows the content card height on alternating desktop rows. */
@media (min-width: 681px) {
  .history-node {
    min-height: 0;
    align-items: stretch;
  }

  .history-node-card {
    height: auto;
    align-self: stretch;
  }

  .history-node-cover {
    min-height: 0;
    height: auto;
    align-self: stretch;
  }

  .history-node-cover img {
    position: absolute;
    inset: 0;
  }

  .history-node-marker {
    align-self: center;
  }
}

/* Technical group hero alignment and mechanical page side navigation. */
.vision-hero-visual,
.engineering-group-hero-visual,
.mechanical-hero-visual {
  height: 300px;
  min-height: 300px;
}

.vision-hero-visual > img,
.engineering-group-hero-visual > img,
.mechanical-hero-visual > img {
  height: 100%;
  min-height: 0;
}

.mechanical-page {
  width: min(var(--max-width), calc(100% - 40px));
  margin: 0 auto;
}

.mechanical-page .page-label {
  color: var(--mechanical-tone);
}

.mechanical-page-hero {
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(480px, 1.1fr);
  gap: 28px;
  align-items: stretch;
  margin-top: 38px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.mechanical-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 27px 0;
}

.mechanical-title-lockup {
  gap: 22px;
  align-items: flex-end;
}

.mechanical-title-lockup h1 {
  margin: 0;
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 500;
  line-height: 1.05;
  white-space: nowrap;
}

.mechanical-title-lockup img,
:root[data-theme="dark"] .mechanical-title-lockup img {
  width: 62px;
  height: 62px;
  margin-bottom: 5px;
  filter: brightness(0) saturate(100%) invert(66%) sepia(37%) saturate(776%) hue-rotate(358deg) brightness(91%) contrast(86%);
}

.mechanical-hero-copy > p:last-child {
  width: calc(100% + 46px);
  margin-top: 24px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.85;
}

.mechanical-hero-visual {
  position: relative;
  width: 95%;
  margin: 0;
  justify-self: end;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #090a0e;
}

.mechanical-hero-visual > img {
  width: 100%;
  object-fit: cover;
  object-position: center 60%;
}

.mechanical-hero-visual::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, .82));
  pointer-events: none;
}

.mechanical-hero-visual figcaption {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 20px;
  left: 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 22px;
  color: #fff;
}

.mechanical-hero-visual figcaption > span,
.mechanical-hero-visual figcaption > small {
  color: #d8ba81;
  font: 700 10px/1.4 Arial, "Microsoft YaHei", sans-serif;
  letter-spacing: .13em;
}

.mechanical-hero-visual figcaption > strong {
  grid-row: 2;
  font-size: 18px;
  font-weight: 500;
}

.mechanical-hero-visual figcaption > small {
  grid-row: 2;
  align-self: end;
}

.mechanical-page-shell {
  display: block;
  position: relative;
  margin-top: 32px;
}

.mechanical-section-nav {
  position: fixed;
  top: 50%;
  left: max(16px, calc((100vw - var(--max-width)) / 2 - 212px));
  z-index: 18;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 152px;
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mechanical-tone) 28%, var(--line));
  background: color-mix(in srgb, var(--card-bg) 96%, transparent);
  box-shadow: 0 18px 52px rgba(0, 0, 0, .16);
  backdrop-filter: blur(14px);
  transform: translateY(-42%);
}

.mechanical-section-nav::before {
  content: "SECTION INDEX";
  display: block;
  padding: 10px 13px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--mechanical-tone);
  font: 700 9px/1.2 Arial, "Microsoft YaHei", sans-serif;
  letter-spacing: .14em;
}

.mechanical-section-nav::after {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 18px;
  height: 18px;
  content: "";
  border-left: 1px solid color-mix(in srgb, var(--mechanical-tone) 28%, var(--line));
  border-bottom: 1px solid color-mix(in srgb, var(--mechanical-tone) 28%, var(--line));
  background: linear-gradient(135deg, var(--bg) 49%, var(--surface) 50%);
  pointer-events: none;
}

.mechanical-section-nav button {
  min-height: 50px;
  padding: 9px 12px;
  border-left: 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.mechanical-section-nav button:first-child {
  border-top: 0;
}

.mechanical-section-nav button[aria-selected="true"] {
  box-shadow: inset 3px 0 0 var(--mechanical-tone);
}

.mechanical-panel-stage {
  width: 100%;
  min-width: 0;
}

.mechanical-panel-stage > [data-mechanical-panel="section"][hidden] {
  display: none !important;
}

.mechanical-panel-stage > [data-mechanical-panel="section"] {
  width: 100%;
  min-height: 560px;
  margin: 0 0 64px;
}

.mechanical-panel-stage > .mechanical-stack[data-mechanical-panel="section"],
.mechanical-panel-stage > .mechanical-practice[data-mechanical-panel="section"],
.mechanical-panel-stage > .mechanical-growth[data-mechanical-panel="section"],
.mechanical-panel-stage > .mechanical-career[data-mechanical-panel="section"] {
  padding-top: 0;
  border-top: 0;
}

.mechanical-work {
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  gap: 38px;
}

.mechanical-work-visual {
  top: 104px;
}

.mechanical-project-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .mechanical-page-hero {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .mechanical-hero-copy {
    padding-bottom: 0;
  }

  .mechanical-hero-copy > p:last-child,
  .mechanical-hero-visual {
    width: 100%;
  }

  .mechanical-page-shell {
    display: block;
  }

  .mechanical-work {
    grid-template-columns: 1fr;
  }

  .mechanical-work-visual {
    position: static;
  }
}

@media (max-width: 1380px) {
  .mechanical-section-nav {
    position: sticky;
    top: 82px;
    left: auto;
    grid-template-columns: none;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    width: 100%;
    overflow-x: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    transform: none;
  }

  .mechanical-section-nav::before,
  .mechanical-section-nav::after {
    display: none;
  }

  .mechanical-section-nav button {
    min-width: 142px;
    min-height: 52px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .mechanical-section-nav button:first-child {
    border-left: 0;
  }

  .mechanical-section-nav button[aria-selected="true"] {
    box-shadow: inset 0 -3px 0 var(--mechanical-tone);
  }

  .mechanical-panel-stage {
    margin-top: 28px;
  }
}

@media (max-width: 860px) {
  .vision-hero-visual,
  .engineering-group-hero-visual,
  .mechanical-hero-visual {
    height: 280px;
    min-height: 280px;
  }

  .mechanical-page {
    width: calc(100% - 28px);
  }

  .mechanical-page-hero {
    margin-top: 34px;
  }

  .mechanical-page-shell {
    display: block;
    margin-top: 24px;
  }

  .mechanical-section-nav {
    top: 72px;
    grid-template-columns: none;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    width: 100%;
    overflow-x: auto;
  }

  .mechanical-section-nav button {
    min-width: 142px;
    min-height: 52px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .mechanical-section-nav button:first-child {
    border-left: 0;
  }

  .mechanical-section-nav button[aria-selected="true"] {
    box-shadow: inset 0 -3px 0 var(--mechanical-tone);
  }

  .mechanical-panel-stage {
    margin-top: 28px;
  }

  .mechanical-panel-stage > [data-mechanical-panel="section"] {
    min-height: 0;
    margin-bottom: 48px;
  }
}

@media (max-width: 620px) {
  .vision-hero-visual,
  .engineering-group-hero-visual,
  .mechanical-hero-visual {
    height: 240px;
    min-height: 240px;
  }

  .mechanical-title-lockup {
    gap: 15px;
    align-items: center;
  }

  .mechanical-title-lockup h1 {
    font-size: 42px;
  }

  .mechanical-title-lockup img,
  :root[data-theme="dark"] .mechanical-title-lockup img {
    width: 42px;
    height: 42px;
    margin-bottom: 0;
  }

  .mechanical-hero-visual figcaption {
    right: 16px;
    bottom: 14px;
    left: 16px;
    grid-template-columns: 1fr;
  }

  .mechanical-hero-visual figcaption > small {
    display: none;
  }

  .mechanical-project-strip {
    grid-template-columns: 1fr;
  }
}

/* Homepage site statistics: count all pages, keep the readout compact and optional. */
.site-stats-panel {
  position: fixed;
  left: 18px;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 17;
  display: flex;
  flex-direction: column;
  width: 152px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: color-mix(in srgb, var(--card-bg) 92%, transparent);
  color: var(--text);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .12);
  backdrop-filter: blur(12px);
}

.site-stats-panel summary {
  order: 3;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 15px;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 8px 10px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.site-stats-panel summary::-webkit-details-marker {
  display: none;
}

.site-stats-summary-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--line));
  color: var(--accent);
}

.site-stats-summary-icon i {
  font-size: 17px;
  line-height: 1;
}

.site-stats-summary-copy {
  display: grid;
  min-width: 0;
  line-height: 1.2;
}

.site-stats-summary-copy strong {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
}

.site-stats-summary-copy small {
  overflow: hidden;
  margin-top: 3px;
  color: var(--subtle);
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-stats-chevron {
  color: var(--subtle);
  font-size: 17px;
  transition: transform .18s ease;
}

.site-stats-panel:not([open]) .site-stats-chevron {
  transform: rotate(180deg);
}

.site-stats-grid {
  order: 1;
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--line);
}

.site-stats-grid > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  gap: 10px;
  min-height: 43px;
  padding: 7px 11px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.site-stats-grid > span:last-child {
  border-bottom: 0;
}

.site-stats-grid strong {
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
  color: var(--accent);
  font-family: "DIN 1451 Fette Breitschrift 1936", Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.15;
  text-overflow: ellipsis;
}

.site-stats-grid small {
  grid-column: 1;
  grid-row: 1;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.site-stats-source {
  order: 2;
  display: block;
  padding: 5px 9px 6px;
  color: var(--subtle);
  font-family: Arial, sans-serif;
  font-size: 8px;
  line-height: 1.4;
  letter-spacing: .08em;
  text-align: right;
}

.site-stats-source:hover,
.site-stats-source:focus-visible {
  color: var(--accent);
}

.site-stats-panel.is-unavailable .site-stats-grid strong,
.site-stats-panel.is-unavailable .site-stats-summary-icon {
  color: var(--subtle);
}

@media (max-width: 860px) {
  .site-stats-panel {
    left: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: min(152px, calc(100vw - 24px));
  }

  .site-stats-panel:not([open]) summary {
    grid-template-columns: 30px minmax(0, 1fr) 15px;
    min-height: 52px;
    padding: 7px 9px;
  }

  .site-stats-panel:not([open]) .site-stats-summary-icon {
    width: 30px;
    height: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-stats-chevron {
    transition: none;
  }
}

/* Operations has four workflow stages; do not leave the shared five-column slot empty. */
.engineering-pipeline-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .engineering-pipeline-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .engineering-pipeline-grid--four {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Theme-switch easter egg: the first dark-to-light request asks for confirmation. */
.theme-toggle {
  position: relative;
}

.theme-easter-egg-bubble {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 2;
  width: max-content;
  max-width: min(220px, calc(100vw - 110px));
  padding: 8px 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
  border-radius: 4px;
  background: var(--card-bg);
  color: var(--text);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.04em;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.theme-easter-egg-bubble::after {
  position: absolute;
  top: -7px;
  right: 17px;
  width: 12px;
  height: 12px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
  border-left: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
  content: "";
  background: var(--card-bg);
  transform: rotate(45deg);
}

.theme-toggle.is-light-theme-confirming .theme-easter-egg-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (min-width: 1600px) {
  .theme-easter-egg-bubble {
    top: 50%;
    right: auto;
    left: calc(100% + 15px);
    transform: translate(-10px, -50%);
  }

  .theme-easter-egg-bubble::after {
    top: 50%;
    right: auto;
    left: -7px;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
    border-left: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
    transform: translateY(-50%) rotate(45deg);
  }

  .theme-toggle.is-light-theme-confirming .theme-easter-egg-bubble {
    transform: translate(0, -50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-easter-egg-bubble {
    transition: none;
  }
}

/* Homepage idle easter egg. */
html.is-home-idle-resting {
  overflow: hidden;
}

/* Homepage mascot experiment: low-distraction idle motion with click-to-talk bubbles. */
.home-mascot-widget {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 18;
  width: clamp(112px, 9vw, 154px);
  pointer-events: none;
}

.home-mascot-button {
  position: relative;
  isolation: isolate;
  display: block;
  width: 95%;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  pointer-events: auto;
  transform-origin: 50% 100%;
}

.home-mascot-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 18px;
}

.home-mascot-figure {
  position: relative;
  z-index: 1;
  display: block;
  animation: home-mascot-idle 4.8s ease-in-out infinite;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .28));
  transform-origin: 50% 100%;
}

.home-mascot-figure img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.home-mascot-base {
  position: relative;
  z-index: 1;
}

.home-mascot-blink-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transform: translateY(-.3%) scale(1.105);
  transform-origin: 50% 50%;
  clip-path: ellipse(15% 17% at 62% 52%);
  -webkit-mask-image: radial-gradient(ellipse 15% 17% at 62% 52%, #000 58%, transparent 78%);
  mask-image: radial-gradient(ellipse 15% 17% at 62% 52%, #000 58%, transparent 78%);
  animation: home-mascot-blink 4s linear 3s infinite;
}

.home-mascot-heat-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  transform: translateY(-.3%) scale(1.108);
  transform-origin: 50% 50%;
  transition: opacity .12s linear;
}

.home-mascot-button:hover .home-mascot-figure,
.home-mascot-button:focus-visible .home-mascot-figure {
  animation-play-state: paused;
  transform: translateY(-4px) rotate(-1.5deg);
}

.home-mascot-button.is-hopping {
  animation: home-mascot-hop .46s ease;
}

.home-mascot-prompt {
  position: absolute;
  top: 10%;
  right: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 30px;
  height: 22px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 56%, var(--line));
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--accent);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
  transition: opacity .18s, transform .18s;
}

.home-mascot-prompt > span {
  display: block;
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.home-mascot-button[aria-expanded="true"] .home-mascot-prompt {
  opacity: 0;
  transform: scale(.7);
}

.home-mascot-bubble {
  position: absolute;
  right: 24%;
  bottom: calc(100% - 10px);
  width: min(279px, calc(100vw - 34px));
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--card-bg) 65%, transparent);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .25);
  color: var(--text);
  opacity: 0;
  pointer-events: auto;
  transform: translate(12px, 10px) scale(.96);
  transform-origin: 88% 100%;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}

.home-mascot-bubble[hidden] {
  display: none;
}

.home-mascot-bubble.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  visibility: visible;
}

.home-mascot-bubble::after {
  position: absolute;
  right: 17%;
  bottom: -7px;
  width: 12px;
  height: 12px;
  border-right: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
  content: "";
  background: color-mix(in srgb, var(--card-bg) 65%, transparent);
  transform: rotate(45deg);
}

.home-mascot-target-pointer {
  position: fixed;
  inset: 0;
  z-index: 17;
  width: 100vw;
  height: 100vh;
  color: var(--accent);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}

.home-mascot-target-pointer[hidden] {
  display: none;
}

.home-mascot-target-pointer.is-visible {
  opacity: 1;
  visibility: visible;
}

.home-mascot-target-pointer svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.home-mascot-target-pointer path[data-home-mascot-pointer-path] {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 7 8;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .28));
}

.home-mascot-message {
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
}

.home-mascot-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
}

.home-mascot-link[hidden] {
  display: none;
}

@keyframes home-mascot-idle {
  0%, 100% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(-5px) rotate(-.7deg); }
  55% { transform: translateY(-5px) rotate(.7deg); }
}

@keyframes home-mascot-hop {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-13px) scale(1.03, .97); }
  68% { transform: translateY(2px) scale(.98, 1.02); }
}

@keyframes home-mascot-blink {
  0%, 3%, 74%, 77% { opacity: 1; }
  4%, 73%, 78%, 100% { opacity: 0; }
}

@media (max-width: 720px) {
  .home-mascot-widget {
    right: max(8px, env(safe-area-inset-right));
    width: 98px;
  }

  .home-mascot-bubble {
    position: fixed;
    right: 8px;
    bottom: 112px;
    width: min(270px, calc(100vw - 24px));
    transform-origin: 88% 100%;
  }

  .home-mascot-bubble::after {
    right: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-mascot-figure,
  .home-mascot-button.is-hopping {
    animation: none;
  }

  .home-mascot-blink-layer {
    animation: none;
    opacity: 0;
  }

  .home-mascot-bubble,
  .home-mascot-prompt,
  .home-mascot-target-pointer {
    transition: none;
  }
}

.home-idle-rest-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(22px, 4vh, 46px) 24px;
  overflow: hidden;
  background: #020304;
  color: #f4f4f4;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 1s ease;
}

.home-idle-rest-overlay[hidden] {
  display: none;
}

.home-idle-rest-overlay.is-visible {
  opacity: 1;
}

.home-idle-rest-card {
  display: grid;
  justify-items: center;
  gap: 18px;
  width: min(520px, calc(100vw - 48px));
  max-height: calc(100dvh - 44px);
  margin: 0;
}

.home-idle-rest-card img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 118px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  object-fit: contain;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
}

.home-idle-rest-card figcaption {
  color: #f4f4f4;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .home-idle-rest-overlay {
    transition: none;
  }
}

/* Operations project cases: brand language first, then a true multi-poster matrix. */
.engineering-project-panel .operations-content-poster-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.engineering-project-panel .operations-content-poster-grid img {
  height: clamp(250px, 26vw, 340px);
}

@media (max-width: 720px) {
  .engineering-project-panel .operations-content-poster-grid {
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    overflow-x: auto;
    padding-bottom: 5px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .operations-content-poster-grid > figure {
    scroll-snap-align: start;
  }
}

/* Management responsibility page: role ownership from direction to delivery. */
.management-page .management-section {
  width: min(var(--max-width), calc(100% - 40px));
  margin: 58px auto;
}

.management-hero > p {
  max-width: 540px;
}

.management-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 42px;
  align-items: end;
  margin-bottom: 24px;
}

.management-section-heading h2,
.management-safety h2 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(30px, 3.2vw, 48px);
  font-weight: 500;
  line-height: 1.22;
}

.management-section-heading > p {
  font-size: 16px;
}

.management-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: var(--line);
  gap: 1px;
}

.management-principles article {
  min-height: 188px;
  padding: 28px;
  background: var(--bg);
}

.management-principles span,
.management-chain-grid span,
.management-cycle span {
  color: var(--accent);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
}

.management-principles h3,
.management-chain-grid h3,
.management-cycle h3 {
  margin: 22px 0 8px;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.3;
}

.management-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: var(--line);
  gap: 1px;
}

.management-role-card {
  min-height: 350px;
  padding: 28px 30px 26px;
  background: var(--card-bg);
}

.management-role-card--lead {
  background: color-mix(in srgb, var(--card-bg) 92%, var(--accent));
}

.management-role-card header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 20px;
}

.management-role-card header > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--accent);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.management-role-card header p {
  color: var(--accent);
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
}

.management-role-card h3 {
  margin: 3px 0 0;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.25;
}

.management-role-summary {
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
}

.management-role-card ul {
  display: grid;
  gap: 7px;
  margin: 17px 0 0;
  padding-left: 1.2em;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.management-role-card li::marker {
  color: var(--accent);
}

.management-role-output {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.management-role-output strong {
  color: var(--text);
  font-weight: 500;
}

.management-chain-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: var(--line);
  gap: 1px;
}

.management-chain-grid article {
  min-height: 220px;
  padding: 25px 22px;
  background: var(--bg);
}

.management-cycle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.management-cycle article {
  min-height: 210px;
  padding: 28px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.management-safety {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: 42px;
  align-items: end;
  padding: 34px;
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.management-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: min(var(--max-width), calc(100% - 40px));
  margin: 0 auto;
}

.management-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 230px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  color: var(--text);
  font-weight: 500;
  transition: border-color .18s, color .18s;
}

.management-actions a:hover,
.management-actions a:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 1100px) {
  .management-section-heading,
  .management-safety {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .management-chain-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .management-page .management-section {
    width: calc(100% - 28px);
    margin: 46px auto;
  }

  .management-principles,
  .management-role-grid,
  .management-cycle {
    grid-template-columns: 1fr;
  }

  .management-role-card {
    min-height: 0;
    padding: 24px 20px;
  }

  .management-chain-grid {
    grid-template-columns: 1fr;
  }

  .management-chain-grid article,
  .management-principles article,
  .management-cycle article {
    min-height: 0;
  }

  .management-safety {
    padding: 26px 20px;
  }

  .management-actions {
    width: calc(100% - 28px);
  }

  .management-actions a {
    width: 100%;
  }
}

/* Infrastructure responsibility group */
.infrastructure-page {
  --infrastructure-accent: #6cbf8d;
  padding-bottom: 40px;
}

[data-theme="light"] .infrastructure-page {
  --infrastructure-accent: #d65d8c;
}

.infrastructure-hero,
.infrastructure-section-nav,
.infrastructure-section {
  width: min(1540px, calc(100% - 48px));
  margin-right: auto;
  margin-left: auto;
}

.infrastructure-hero {
  display: grid;
  grid-template-columns: minmax(360px, 0.82fr) minmax(520px, 1.18fr);
  min-height: 540px;
  margin-top: 34px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.infrastructure-hero-copy {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  padding: 54px 58px;
}

.infrastructure-hero-copy .page-label,
.infrastructure-section-heading .page-label,
.infrastructure-cta .page-label {
  color: var(--infrastructure-accent);
}

.infrastructure-hero-copy h1 {
  display: grid;
  gap: 4px;
  margin: 16px 0 22px;
  font-size: clamp(42px, 4.3vw, 68px);
  font-weight: 400;
  line-height: 1.12;
}

.infrastructure-hero-copy > p:not(.page-label) {
  max-width: 620px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.9;
}

.infrastructure-internal-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--infrastructure-accent) 58%, var(--line));
  color: var(--infrastructure-accent);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 11px;
}

.infrastructure-internal-badge i {
  font-size: 17px;
}

.infrastructure-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.infrastructure-hero-actions a,
.infrastructure-cta > a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 13px;
}

.infrastructure-hero-actions a:first-child,
.infrastructure-cta > a {
  border-color: color-mix(in srgb, var(--infrastructure-accent) 68%, var(--line));
}

.infrastructure-hero-actions i,
.infrastructure-cta > a i {
  color: var(--infrastructure-accent);
  font-size: 18px;
}

.infrastructure-hero-media {
  position: relative;
  min-height: 540px;
  margin: 0;
  overflow: hidden;
  border-left: 1px solid var(--line);
  background: #101312;
}

.infrastructure-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 57%;
}

.infrastructure-hero-media figcaption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  background: color-mix(in srgb, #090b0a 82%, transparent);
  color: #fff;
}

.infrastructure-hero-media figcaption span,
.infrastructure-project-gallery figcaption span,
.infrastructure-role-grid article > span {
  color: var(--infrastructure-accent);
  font-family: Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
}

.infrastructure-hero-media figcaption strong {
  font-size: 15px;
  font-weight: 500;
}

.infrastructure-section-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
  border: 1px solid var(--line);
}

.infrastructure-section-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 58px;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

.infrastructure-section-nav a:last-child {
  border-right: 0;
}

.infrastructure-section-nav a:hover,
.infrastructure-section-nav a:focus-visible {
  background: color-mix(in srgb, var(--infrastructure-accent) 12%, var(--card-bg));
  color: var(--text);
}

.infrastructure-section-nav span {
  color: var(--infrastructure-accent);
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
}

.infrastructure-section-nav i {
  font-size: 19px;
}

.infrastructure-section {
  scroll-margin-top: 108px;
  margin-top: 72px;
}

.infrastructure-section-heading {
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) minmax(360px, 1.15fr);
  gap: 54px;
  align-items: end;
  margin-bottom: 26px;
}

.infrastructure-section-heading h2 {
  max-width: 760px;
  margin: 12px 0 0;
  font-size: clamp(32px, 3.2vw, 50px);
  font-weight: 400;
  line-height: 1.2;
}

.infrastructure-section-heading > p {
  max-width: 720px;
  margin: 0 0 5px auto;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.85;
}

.infrastructure-scope-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.infrastructure-scope-grid article {
  position: relative;
  min-height: 210px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--card-bg);
}

.infrastructure-scope-grid article > span {
  color: var(--infrastructure-accent);
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
}

.infrastructure-scope-grid article > i {
  position: absolute;
  top: 24px;
  right: 25px;
  color: var(--infrastructure-accent);
  font-size: 29px;
}

.infrastructure-scope-grid h3,
.infrastructure-project-lines h3,
.infrastructure-space-zones h3,
.infrastructure-role-grid h3 {
  margin: 28px 0 10px;
  font-size: 20px;
  font-weight: 500;
}

.infrastructure-scope-grid p,
.infrastructure-project-lines p,
.infrastructure-space-zones p,
.infrastructure-role-grid p,
.infrastructure-workflow-steps p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.infrastructure-project-gallery {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  grid-template-rows: repeat(2, minmax(220px, 1fr));
  gap: 12px;
}

.infrastructure-project-gallery figure {
  position: relative;
  min-height: 220px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.infrastructure-project-gallery__lead {
  grid-row: 1 / span 2;
}

.infrastructure-project-gallery img {
  width: 100%;
  height: 100%;
  transition: transform 260ms ease;
  object-fit: cover;
}

.infrastructure-project-gallery figure:hover img {
  transform: scale(1.018);
}

.infrastructure-project-gallery figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  background: color-mix(in srgb, #090b0a 84%, transparent);
  color: #fff;
}

.infrastructure-project-gallery figcaption strong {
  font-size: 15px;
  font-weight: 500;
}

.infrastructure-project-gallery figcaption p,
.infrastructure-project-gallery figcaption span:last-child {
  margin: 0;
  color: #c4cbc7;
  font-size: 11px;
  line-height: 1.55;
}

.infrastructure-project-lines {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 14px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.infrastructure-project-lines article {
  min-height: 195px;
  padding: 23px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.infrastructure-project-lines i {
  color: var(--infrastructure-accent);
  font-size: 25px;
}

.infrastructure-project-lines h3 {
  margin-top: 18px;
  font-size: 17px;
}

.infrastructure-project-lines p {
  font-size: 12px;
}

.infrastructure-space-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
  border: 1px solid var(--line);
}

.infrastructure-space-layout > figure {
  display: grid;
  grid-template-rows: minmax(400px, 1fr) auto;
  margin: 0;
  border-right: 1px solid var(--line);
}

.infrastructure-space-layout > figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.infrastructure-space-layout > figure figcaption {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.infrastructure-space-zones {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
}

.infrastructure-space-zones article {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 26px;
  border-bottom: 1px solid var(--line);
}

.infrastructure-space-zones article:last-child {
  border-bottom: 0;
}

.infrastructure-space-zones article > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--infrastructure-accent) 60%, var(--line));
  color: var(--infrastructure-accent);
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
}

.infrastructure-space-zones h3 {
  margin: 3px 0 8px;
  font-size: 18px;
}

.infrastructure-material-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.infrastructure-material-grid figure {
  display: grid;
  grid-template-rows: 190px auto;
  margin: 0;
  border: 1px solid var(--line);
}

.infrastructure-material-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.infrastructure-material-grid figcaption {
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.infrastructure-workflow-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  list-style: none;
}

.infrastructure-workflow-steps li {
  min-height: 185px;
  padding: 22px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.infrastructure-workflow-steps li > span {
  color: var(--infrastructure-accent);
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
}

.infrastructure-workflow-steps strong {
  display: block;
  margin: 25px 0 10px;
  font-size: 17px;
  font-weight: 500;
}

.infrastructure-role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.infrastructure-role-grid article {
  position: relative;
  min-height: 230px;
  padding: 28px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.infrastructure-role-grid article > i {
  position: absolute;
  top: 24px;
  right: 25px;
  color: var(--infrastructure-accent);
  font-size: 28px;
}

.infrastructure-role-grid h3 {
  margin-top: 34px;
}

.infrastructure-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 34px;
  align-items: center;
  margin-top: 16px;
  padding: 30px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--infrastructure-accent);
}

.infrastructure-cta h2 {
  margin: 10px 0 8px;
  font-size: 25px;
  font-weight: 500;
}

.infrastructure-cta p:not(.page-label) {
  max-width: 820px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

@media (max-width: 1120px) {
  .infrastructure-hero {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .infrastructure-hero-copy {
    padding: 42px;
  }

  .infrastructure-scope-grid,
  .infrastructure-role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .infrastructure-project-lines,
  .infrastructure-workflow-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .infrastructure-material-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .infrastructure-hero,
  .infrastructure-section-nav,
  .infrastructure-section {
    width: calc(100% - 28px);
  }

  .infrastructure-hero {
    grid-template-columns: 1fr;
    margin-top: 18px;
  }

  .infrastructure-hero-copy {
    padding: 34px 26px;
  }

  .infrastructure-hero-copy h1 {
    font-size: 42px;
  }

  .infrastructure-hero-media {
    min-height: 420px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .infrastructure-section-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .infrastructure-section-nav a:nth-child(2) {
    border-right: 0;
  }

  .infrastructure-section-nav a:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .infrastructure-section {
    margin-top: 52px;
  }

  .infrastructure-section-heading {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .infrastructure-section-heading > p {
    margin-left: 0;
  }

  .infrastructure-project-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 360px repeat(2, 220px);
  }

  .infrastructure-project-gallery__lead {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .infrastructure-space-layout {
    grid-template-columns: 1fr;
  }

  .infrastructure-space-layout > figure {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .infrastructure-material-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .infrastructure-project-lines,
  .infrastructure-workflow-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .infrastructure-cta {
    grid-template-columns: 1fr;
  }

  .infrastructure-cta > a {
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .infrastructure-hero-copy h1 {
    font-size: 35px;
  }

  .infrastructure-hero-actions,
  .infrastructure-hero-actions a {
    width: 100%;
  }

  .infrastructure-section-nav a {
    min-height: 52px;
    font-size: 12px;
  }

  .infrastructure-section-heading h2 {
    font-size: 30px;
  }

  .infrastructure-scope-grid,
  .infrastructure-project-lines,
  .infrastructure-workflow-steps,
  .infrastructure-role-grid,
  .infrastructure-material-grid {
    grid-template-columns: 1fr;
  }

  .infrastructure-scope-grid article,
  .infrastructure-project-lines article,
  .infrastructure-workflow-steps li,
  .infrastructure-role-grid article {
    min-height: 0;
  }

  .infrastructure-project-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: 320px repeat(3, 230px);
  }

  .infrastructure-project-gallery__lead {
    grid-column: auto;
  }

  .infrastructure-space-layout > figure {
    grid-template-rows: 300px auto;
  }

  .infrastructure-space-zones article {
    padding: 22px 18px;
  }
}

/* Dedicated missing-page response */
.not-found-page {
  width: min(var(--max-width), calc(100% - 40px));
  min-height: calc(100vh - 260px);
  margin: 44px auto 0;
  display: grid;
  align-items: center;
}
.not-found-panel {
  position: relative;
  min-height: 440px;
  padding: clamp(34px, 6vw, 76px);
  border: 1px solid var(--line);
  background: var(--card-bg);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.48fr);
  gap: clamp(28px, 6vw, 84px);
  align-items: center;
  overflow: hidden;
}
.not-found-copy {
  position: relative;
  z-index: 1;
  max-width: 680px;
}
.not-found-code {
  margin: 0 0 4px;
  color: var(--accent);
  font-family: "DIN 1451 Fette Breitschrift 1936", sans-serif;
  font-size: clamp(72px, 12vw, 148px);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: 0.02em;
}
.not-found-copy h1 {
  margin: 28px 0 14px;
  font-size: clamp(34px, 4.5vw, 58px);
  font-weight: 500;
  line-height: 1.12;
}
.not-found-copy > p:last-of-type {
  max-width: 620px;
  font-size: 17px;
}
.not-found-actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.not-found-actions a {
  min-height: 48px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 500;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.not-found-actions a:hover,
.not-found-actions a:focus-visible {
  border-color: var(--accent);
}
.not-found-primary {
  background: var(--accent);
  border-color: var(--accent) !important;
  color: #071109;
}
:root:not([data-theme="dark"]) .not-found-primary {
  color: #fff;
}
.not-found-mark {
  position: relative;
  min-height: 280px;
  border-left: 1px solid var(--line);
  display: grid;
  place-items: center;
}
.not-found-mark::before,
.not-found-mark::after {
  content: "";
  position: absolute;
  background: var(--line);
}
.not-found-mark::before {
  width: 1px;
  height: 140%;
  transform: rotate(24deg);
}
.not-found-mark::after {
  width: 140%;
  height: 1px;
  transform: rotate(-18deg);
}
.not-found-mark img {
  position: relative;
  z-index: 1;
  width: min(172px, 62%);
  opacity: 0.13;
}
:root[data-theme="dark"] .not-found-mark img {
  filter: invert(1) grayscale(1) contrast(1.18);
}
.not-found-mark span {
  position: absolute;
  right: 16px;
  bottom: 8px;
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.18em;
}
@media (max-width: 760px) {
  .not-found-page {
    width: calc(100% - 28px);
    margin-top: 28px;
  }
  .not-found-panel {
    min-height: 0;
    padding: 30px 24px;
    grid-template-columns: 1fr;
  }
  .not-found-mark {
    min-height: 120px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .not-found-mark img {
    width: 96px;
  }
}

/* Cooperation landing and 2027 sponsorship details. */
.cooperation-hero {
  grid-template-columns: minmax(300px, 0.82fr) minmax(400px, 1.18fr);
  gap: clamp(28px, 4vw, 58px);
  align-items: center;
  padding-bottom: 34px;
}

.cooperation-hero-copy {
  align-self: center;
  padding: 34px 0;
}

.cooperation-hero-copy > p:last-child {
  max-width: 500px;
  margin-top: 24px;
  color: var(--muted);
  font-size: 17px;
}

.cooperation-hero-media {
  min-width: 0;
  width: min(100%, 620px);
  height: clamp(260px, 28vw, 360px);
  margin: 0;
  justify-self: end;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}

.cooperation-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

.cooperation-entry {
  min-height: 176px;
  grid-template-rows: auto auto 1fr;
}

.cooperation-entry > i {
  grid-row: 1 / span 3;
}

.cooperation-entry em {
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  color: var(--accent);
  font-size: 13px;
  font-style: normal;
}

.sponsorship-brief,
.sponsorship-tiers,
.sponsorship-benefits,
.sponsorship-scope {
  display: grid;
  gap: 26px;
}

.sponsor-audience-grid,
.sponsor-tier-grid,
.sponsor-benefit-grid,
.sponsor-scope-grid {
  display: grid;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.sponsor-audience-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sponsor-audience-grid article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 18px;
  min-height: 190px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--card-bg);
}

.sponsor-audience-grid article > i,
.sponsor-benefit-grid article > i,
.sponsor-scope-grid article > i {
  color: var(--accent);
  font-size: 34px;
  line-height: 1;
}

.sponsor-audience-grid span,
.sponsor-benefit-grid span,
.sponsor-tier-top span {
  color: var(--accent);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 12px;
  letter-spacing: .08em;
}

.sponsor-audience-grid h3,
.sponsor-benefit-grid h3,
.sponsor-scope-grid h3 {
  margin: 7px 0 9px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.35;
}

.sponsor-industry-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sponsor-industry-list span {
  padding: 7px 12px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface);
  font-size: 13px;
}

.sponsor-tier-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sponsor-tier-card {
  min-height: 370px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--card-bg);
}

.sponsor-tier-card--primary {
  background: color-mix(in srgb, var(--accent) 8%, var(--card-bg));
}

.sponsor-tier-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sponsor-tier-top i {
  color: var(--accent);
  font-size: 28px;
}

.sponsor-tier-card h3 {
  margin: 24px 0 4px;
  font-size: 27px;
  font-weight: 500;
}

.sponsor-tier-card > strong {
  color: var(--accent);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  font-weight: 500;
}

.sponsor-tier-card ul {
  margin: 22px 0 0;
  padding-left: 1.25em;
  color: var(--muted);
  font-size: 14px;
}

.sponsor-tier-card li + li {
  margin-top: 8px;
}

.sponsor-tier-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
}

.sponsor-tier-note i {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 18px;
}

.sponsor-benefit-grid,
.sponsor-scope-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sponsor-benefit-grid article {
  min-height: 220px;
  padding: 26px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--card-bg);
}

.sponsor-benefit-grid article > i {
  display: block;
  margin-bottom: 18px;
}

.sponsor-scope-grid article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 16px;
  min-height: 180px;
  padding: 26px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--card-bg);
}

.sponsor-scope-grid article > i {
  font-size: 28px;
}

.sponsor-scope-grid h3 {
  margin-top: 0;
}

.sponsor-contact .sponsor-contact-card {
  grid-template-columns: 1fr;
  gap: 7px;
}

.sponsor-contact .sponsor-contact-card > span,
.sponsor-contact .sponsor-contact-card > strong,
.sponsor-contact .sponsor-contact-card > a,
.sponsor-contact .sponsor-contact-card > small {
  grid-row: auto;
}

.sponsor-contact .sponsor-contact-card > span:first-child {
  color: var(--accent);
  font-size: 13px;
}

.sponsor-contact .sponsor-contact-card > strong {
  margin-bottom: 6px;
  font-size: 22px;
}

.sponsor-contact .sponsor-contact-card > a,
.sponsor-contact .sponsor-contact-card .sponsor-contact-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-family: Arial, "Noto Sans SC", sans-serif;
  font-size: 14px;
}

.sponsor-contact .sponsor-contact-card i {
  color: var(--accent);
  font-size: 17px;
}

.sponsor-contact .sponsor-contact-card > small {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 980px) {
  .cooperation-hero {
    grid-template-columns: minmax(250px, 0.82fr) minmax(330px, 1.18fr);
  }

  .sponsor-tier-grid,
  .sponsor-benefit-grid,
  .sponsor-scope-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .cooperation-hero {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-bottom: 24px;
  }

  .cooperation-hero-copy {
    padding: 18px 0 26px;
  }

  .cooperation-hero-media {
    width: 100%;
    height: min(50vw, 240px);
    justify-self: stretch;
  }

  .cooperation-entry {
    min-height: 144px;
  }

  .sponsor-audience-grid,
  .sponsor-tier-grid,
  .sponsor-benefit-grid,
  .sponsor-scope-grid {
    grid-template-columns: 1fr;
  }

  .sponsor-audience-grid article,
  .sponsor-tier-card,
  .sponsor-benefit-grid article,
  .sponsor-scope-grid article {
    min-height: 0;
    padding: 22px;
  }

  .sponsor-contact .sponsor-contact-card {
    padding: 20px;
  }
}

/* Recruitment hero: keep the consultation QR visible beside the introduction. */
.recruit-page-hero {
  position: relative;
  grid-template-columns: minmax(320px, .82fr) minmax(360px, 1fr);
  gap: clamp(24px, 2.6vw, 42px);
  align-items: end;
  padding-right: 128px;
}

.recruit-page-hero > p {
  max-width: 500px;
  justify-self: start;
}

.recruit-hero-qr {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 104px;
  padding: 0;
  border: 0;
  background: transparent;
  transition: filter 160ms ease, transform 160ms ease;
}

.recruit-hero-qr img {
  width: 104px;
  height: 104px;
  object-fit: cover;
}

.recruit-hero-qr:hover,
.recruit-hero-qr:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.recruit-hero-qr:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

@media (min-width: 861px) and (max-width: 1100px) {
  .recruit-page-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}

@media (max-width: 860px) {
  .recruit-page-hero {
    grid-template-columns: minmax(0, 1fr);
    padding-right: 92px;
  }

  .recruit-hero-qr {
    width: 76px;
  }

  .recruit-hero-qr img {
    width: 76px;
    height: 76px;
  }
}

/* Join guide: compact, readable mobile layout. */
@media (max-width: 620px) {
  body:has(.join-guide-page) {
    overflow-x: clip;
  }

  body:has(.join-guide-page) .site-header .nav {
    width: calc(100% - 20px);
    min-height: 64px;
    gap: 8px;
  }

  body:has(.join-guide-page) .site-header .brand {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
  }

  body:has(.join-guide-page) .site-header .brand-logos img {
    width: 32px;
    height: 32px;
  }

  body:has(.join-guide-page) .site-header .brand-text {
    min-width: 0;
    gap: 7px;
  }

  body:has(.join-guide-page) .site-header .brand-text strong {
    gap: 7px;
    font-size: clamp(14px, 4.1vw, 16px);
    white-space: nowrap;
  }

  body:has(.join-guide-page) .site-header .brand-text strong::after {
    width: 2px;
    height: 15px;
  }

  body:has(.join-guide-page) .site-header .nav-toggle {
    width: 38px;
    height: 38px;
  }

  body:has(.join-guide-page) .site-header .theme-toggle {
    width: 44px;
    height: 38px;
  }

  body:has(.join-guide-page) .site-header .nav-links {
    top: 64px;
  }

  body:has(.join-guide-page) .page-back-nav {
    position: relative;
    top: auto;
    left: auto;
    width: calc(100% - 28px);
    height: 38px;
    margin: 14px auto 0;
    transform: none;
  }

  body:has(.join-guide-page) .page-back-link {
    width: 38px;
    height: 38px;
  }

  body:has(.join-guide-page) .join-guide-page {
    overflow: hidden;
  }

  body:has(.join-guide-page) .join-guide-page .page-hero {
    width: calc(100% - 28px);
    margin: 16px auto 0;
    gap: 14px;
    padding-bottom: 22px;
  }

  .join-guide-page .page-hero h1 {
    font-size: clamp(38px, 12vw, 48px);
  }

  .join-guide-page .page-hero > p {
    font-size: 14px;
    line-height: 1.75;
  }

  .join-guide-page .section-block {
    width: calc(100% - 28px);
    margin-top: 38px;
    margin-bottom: 38px;
  }

  .join-guide-overview--awareness {
    margin-top: 20px;
  }

  .join-guide-overview--awareness .join-guide-intro {
    padding: 4px 0 24px;
  }

  .join-guide-intro h2,
  .join-guide-section h2 {
    font-size: 28px;
    line-height: 1.3;
  }

  .join-guide-overview--awareness .join-guide-intro-copy > p:not(.page-label) {
    margin-top: 13px;
    font-size: 14px;
    line-height: 1.75;
  }

  .join-guide-team-photo {
    width: 100%;
    max-height: 190px;
  }

  .join-guide-team-photo figcaption {
    right: 6px;
    bottom: 6px;
    font-size: 9px;
  }

  .join-awareness-path {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 20px;
    border: 0;
  }

  .join-awareness-path > span {
    min-height: 0;
    padding: 14px 15px;
    border: 1px solid var(--line);
  }

  .join-awareness-path > i {
    width: 100%;
    min-height: 28px;
    border: 0;
    background: transparent;
    transform: none;
  }

  .join-awareness-path > i::before {
    display: inline-block;
    transform: rotate(90deg);
  }

  .join-awareness-path strong {
    font-size: 17px;
  }

  .join-awareness-path small {
    font-size: 12px;
  }

  .join-awareness-heading,
  .join-awareness-list,
  .join-checklist,
  .join-guide-section--checklist .join-guide-section-heading {
    width: 100%;
  }

  .join-awareness-heading,
  .join-guide-section--checklist .join-guide-section-heading {
    flex-direction: row;
    align-items: flex-end;
    gap: 12px;
    margin-top: 28px;
    padding: 17px 15px 14px;
  }

  .join-awareness-heading h3 {
    font-size: 27px;
  }

  .join-check-progress {
    min-width: 98px;
    padding: 6px 8px;
    font-size: 11px;
  }

  .join-awareness-list {
    margin-bottom: 34px;
  }

  .join-awareness-item,
  .join-check-item {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 8px;
    min-height: 0;
    padding: 14px 12px;
  }

  .join-awareness-item::before,
  .join-check-item::before {
    padding-top: 5px;
    font-size: 11px;
  }

  .join-awareness-item label,
  .join-check-item label {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 9px;
    min-width: 0;
  }

  .join-awareness-item input,
  .join-check-item input {
    width: 17px;
    height: 17px;
  }

  .join-awareness-item strong,
  .join-check-item strong {
    font-size: 15px;
    line-height: 1.5;
  }

  .join-awareness-item strong::before,
  .join-check-item strong::before {
    margin-right: 6px;
  }

  .join-awareness-item small,
  .join-check-item small {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.6;
  }

  .join-awareness-item > div,
  .join-check-item > div {
    grid-column: 2;
    max-width: 100%;
    margin-left: 29px;
    gap: 6px;
    justify-content: flex-start;
  }

  .join-awareness-item > div a,
  .join-check-item > div a {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 11px;
  }

  .join-guide-section--checklist .join-guide-section-heading {
    margin: 0;
  }

  .join-guide-section-heading {
    gap: 13px;
    margin-bottom: 18px;
  }

  .join-interview-card {
    padding: 20px 18px;
  }

  .join-interview-card > i {
    margin-bottom: 10px;
    font-size: 27px;
  }

  .join-interview-card h3 {
    margin-bottom: 9px;
    font-size: 19px;
  }

  .join-interview-card ul {
    font-size: 13px;
    line-height: 1.7;
  }

  .join-interview-followup {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
  }

  body:has(.join-guide-page) .recruit-letter-trigger {
    top: auto;
    right: 8px;
    bottom: max(92px, calc(env(safe-area-inset-bottom) + 92px));
    width: 42px;
    height: 42px;
    transform: none;
  }

  body:has(.join-guide-page) .home-mascot-widget {
    right: max(4px, env(safe-area-inset-right));
    bottom: max(5px, env(safe-area-inset-bottom));
    width: 76px;
  }

  body:has(.join-guide-page) .home-mascot-prompt {
    width: 25px;
    height: 18px;
    gap: 3px;
  }

  body:has(.join-guide-page) .home-mascot-prompt > span {
    width: 3px;
    height: 3px;
  }

  body:has(.join-guide-page) .site-footer {
    padding-bottom: 96px;
  }
}

/* Qianli Journal */
.journal-index-page main,
.journal-article-page main {
  width: min(1360px, calc(100% - clamp(32px, 8vw, 120px)));
  margin-inline: auto;
}

.journal-hero {
  display: grid;
  grid-template-columns: minmax(280px, .7fr) minmax(360px, 1fr);
  align-items: end;
  gap: clamp(36px, 7vw, 100px);
  padding: clamp(96px, 12vw, 150px) 0 clamp(38px, 5vw, 66px);
  border-bottom: 1px solid var(--line);
}

.journal-hero h1 {
  margin: 8px 0 0;
  font-size: clamp(50px, 7vw, 94px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
}

.journal-hero > p:last-child {
  max-width: 720px;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: clamp(17px, 1.6vw, 23px);
  line-height: 1.75;
}

.journal-browser {
  padding: clamp(34px, 5vw, 64px) 0 clamp(70px, 9vw, 120px);
}

.journal-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 390px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.journal-search {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 48px;
  padding: 0 15px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card-bg) 70%, transparent);
}

.journal-search .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.journal-search:focus-within {
  border-color: var(--accent);
}

.journal-search i {
  color: var(--muted);
  font-size: 21px;
}

.journal-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.journal-search input::placeholder {
  color: var(--subtle);
}

.journal-filter-list {
  display: flex;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.journal-filter-list button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.journal-filter-list button:hover,
.journal-filter-list button:focus-visible,
.journal-filter-list button.is-active {
  border-color: var(--accent);
  color: var(--accent);
}

.journal-filter-list button.is-active {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.journal-sidebar .journal-filter-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.journal-filter-list button small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--subtle);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.journal-department-tag {
  --department-tone: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--department-tone) 58%, var(--line));
  background: color-mix(in srgb, var(--department-tone) 9%, transparent);
  color: var(--department-tone);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 10px;
  line-height: 1.45;
  white-space: nowrap;
}

.journal-department-tag--team {
  --department-tone: var(--accent);
}

.journal-department-tag--amber {
  --department-tone: #c59a4b;
}

.journal-department-tag--blue {
  --department-tone: #6e9dca;
}

.journal-department-tag--violet {
  --department-tone: #8976b2;
}

.journal-department-tag--green {
  --department-tone: #62a66f;
}

.journal-department-tag--rose {
  --department-tone: #bd6f84;
}

.journal-filter-list button small .journal-department-tag {
  padding: 1px 5px;
  font-size: 9px;
}

.journal-card .journal-department-tag.is-active {
  background: color-mix(in srgb, var(--department-tone) 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--department-tone) 32%, transparent);
}

.journal-filter-select {
  display: grid;
  gap: 9px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.journal-filter-select-control {
  --department-tone: var(--subtle);
  display: flex;
  align-items: center;
  gap: 9px;
}

.journal-filter-select-control::before {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--department-tone);
  content: "";
}

.journal-filter-select-control[data-department-tone="team"] {
  --department-tone: var(--accent);
}

.journal-filter-select-control[data-department-tone="amber"] {
  --department-tone: #c59a4b;
}

.journal-filter-select-control[data-department-tone="blue"] {
  --department-tone: #6e9dca;
}

.journal-filter-select-control[data-department-tone="violet"] {
  --department-tone: #8976b2;
}

.journal-filter-select-control[data-department-tone="green"] {
  --department-tone: #62a66f;
}

.journal-filter-select-control[data-department-tone="rose"] {
  --department-tone: #bd6f84;
}

.journal-filter-select-control select {
  width: 100%;
  min-height: 38px;
  padding: 6px 30px 6px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.journal-filter-select-control:focus-within {
  color: var(--department-tone);
}

.journal-filter-select-control option {
  background: var(--bg);
  color: var(--text);
}

.journal-clear-filters {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.journal-clear-filters:hover,
.journal-clear-filters:focus-visible {
  color: var(--accent);
}

.journal-clear-filters[hidden] {
  display: none;
}

.journal-sidebar .journal-filter-group--tags .journal-filter-list {
  display: grid;
  max-height: 250px;
  padding-right: 5px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.journal-sidebar .journal-filter-group--tags .journal-filter-list button {
  width: 100%;
  min-height: 36px;
  padding: 7px 22px 7px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  text-align: left;
}

.journal-sidebar .journal-filter-group--tags .journal-filter-list button::after {
  display: block;
}

.journal-count {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.journal-card {
  --journal-card-chamfer: 10px;
  position: relative;
  display: block;
  min-width: 0;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card-bg) 82%, transparent);
  color: inherit;
  cursor: pointer;
  clip-path: polygon(
    0 0,
    calc(100% - var(--journal-card-chamfer)) 0,
    100% var(--journal-card-chamfer),
    100% 100%,
    var(--journal-card-chamfer) 100%,
    0 calc(100% - var(--journal-card-chamfer))
  );
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.journal-card--coming-soon {
  cursor: default;
}

.journal-card::before,
.journal-card::after {
  content: "";
  position: absolute;
  z-index: 4;
  width: 14px;
  height: 1px;
  background: var(--line);
  pointer-events: none;
  transform: rotate(45deg);
  transition: background-color 180ms ease;
}

.journal-card::before {
  top: 4px;
  right: -2px;
}

.journal-card::after {
  bottom: 4px;
  left: -2px;
}

.journal-card:hover,
.journal-card:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
  box-shadow: 0 14px 34px color-mix(in srgb, #000 13%, transparent);
  transform: translateY(-2px);
}

.journal-card:hover::before,
.journal-card:hover::after,
.journal-card:focus-visible::before,
.journal-card:focus-visible::after {
  background: var(--accent);
}

.journal-card:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.journal-card--featured {
  grid-column: span 2;
}

.journal-card-cover {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid var(--line);
  background: #050505;
  overflow: hidden;
}

.journal-card-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 260ms ease, filter 260ms ease;
}

.journal-card:hover .journal-card-cover img,
.journal-card:focus-visible .journal-card-cover img {
  filter: blur(4px) brightness(.68) saturate(.86);
  transform: scale(1.045);
}

.journal-card-cover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(18px, 2vw, 26px);
  background: rgba(8, 10, 11, .34);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition: opacity 220ms ease;
}

.journal-card:hover .journal-card-cover-overlay,
.journal-card:focus-visible .journal-card-cover-overlay {
  opacity: 1;
}

.journal-card-cover-summary {
  display: -webkit-box;
  overflow: hidden;
  max-width: 34em;
  font-size: clamp(13px, 1.15vw, 15px);
  line-height: 1.75;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .42);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.journal-card-cover-reading {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .48);
  font: 500 12px/1.2 "Noto Sans SC", "Microsoft YaHei", sans-serif;
  letter-spacing: .04em;
}

.journal-card-body {
  display: flex;
  flex-direction: column;
  min-height: 288px;
  padding: clamp(22px, 3vw, 34px);
}

.journal-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--muted);
  font-size: 12px;
}

.journal-card-status {
  color: var(--accent);
  font-size: 12px;
  white-space: nowrap;
}

.journal-card-inline-reading--soon {
  color: var(--accent);
}

.journal-card-meta span:first-child {
  color: var(--accent);
}

.journal-card-classification {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.journal-card-category {
  color: var(--accent);
}

.journal-card-classification button.journal-department-tag {
  font: 500 10px/1.45 "Noto Sans SC", "Microsoft YaHei", sans-serif;
  cursor: pointer;
}

.journal-card-series {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin-top: 13px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
}

.journal-card h2 {
  max-width: 820px;
  margin: 24px 0 12px;
  font-size: clamp(25px, 2.8vw, 40px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.28;
}

.journal-card h2 a:hover,
.journal-card h2 a:focus-visible {
  color: var(--accent);
}

.journal-card-body > p {
  max-width: 740px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}

.journal-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 13px;
}

.journal-card-tags button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--subtle);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.journal-card-tags button:hover,
.journal-card-tags button:focus-visible,
.journal-card-tags button.is-active {
  color: var(--accent);
}

.journal-card footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 28px;
  color: var(--subtle);
  font-size: 12px;
}

.journal-card footer a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  font-size: 13px;
  white-space: nowrap;
}

.journal-empty {
  padding: 70px 24px;
  border: 1px solid var(--line);
  color: var(--muted);
  text-align: center;
}

.journal-empty i {
  color: var(--accent);
  font-size: 34px;
}

.journal-empty h2 {
  margin: 14px 0 8px;
  color: var(--text);
  font-size: 22px;
  font-weight: 500;
}

.journal-empty p {
  margin: 0;
}

.journal-empty button {
  margin-top: 18px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.journal-empty button:hover,
.journal-empty button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.journal-principle {
  display: grid;
  grid-template-columns: minmax(180px, .36fr) minmax(0, 1fr);
  gap: 40px;
  margin-bottom: clamp(70px, 9vw, 120px);
  padding: clamp(28px, 4vw, 50px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.journal-principle > p:last-child {
  max-width: 850px;
  margin: 0;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(21px, 2.5vw, 34px);
  line-height: 1.65;
}

.journal-reading-progress {
  position: fixed;
  z-index: 1200;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
}

.journal-index-page .recruit-letter-trigger,
.journal-article-page .recruit-letter-trigger,
.journal-article-page .home-mascot-widget {
  display: none;
}

.journal-index-page .home-mascot-widget {
  width: clamp(90px, 7.2vw, 123px);
}

@media (max-width: 720px) {
  .journal-index-page .home-mascot-widget {
    width: 78px;
  }
}

.journal-reading-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.journal-article-hero {
  max-width: 1060px;
  padding: clamp(100px, 13vw, 165px) 0 clamp(44px, 6vw, 76px);
}

.journal-article-kicker,
.journal-article-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  color: var(--muted);
  font-size: 13px;
}

.journal-article-kicker a {
  color: var(--accent);
}

.journal-article-kicker > * + *::before {
  content: "·";
  margin-right: 18px;
  color: var(--subtle);
}

.journal-article-kicker a.journal-department-tag {
  color: var(--department-tone);
}

.journal-article-kicker > .journal-department-tag::before {
  content: none;
}

.journal-article-hero .page-label {
  margin-top: clamp(34px, 5vw, 58px);
}

.journal-article-hero h1 {
  max-width: 1000px;
  margin: 13px 0 0;
  font-size: clamp(40px, 6vw, 78px);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.12;
  text-wrap: balance;
}

.journal-article-dek {
  max-width: 820px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.7;
}

.journal-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.journal-article-tags a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card-bg) 72%, transparent);
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
}

.journal-article-tags a:hover,
.journal-article-tags a:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.journal-article-byline {
  justify-content: space-between;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.journal-article-byline button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.journal-article-byline button:hover,
.journal-article-byline button:focus-visible {
  color: var(--accent);
}

.journal-article-layout {
  display: grid;
  grid-template-columns: minmax(210px, 270px) minmax(0, 800px);
  justify-content: space-between;
  gap: clamp(50px, 8vw, 130px);
  padding: clamp(44px, 7vw, 86px) 0;
  border-top: 1px solid var(--line);
}

.journal-article-toc {
  position: sticky;
  top: 100px;
  align-self: start;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}

.journal-article-toc > p {
  margin: 0 0 14px;
  color: var(--subtle);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
}

.journal-article-toc ol,
.journal-article-toc li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.journal-article-toc a {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 10px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.journal-article-toc a span {
  color: var(--subtle);
  font: 700 10px/1.8 Arial, sans-serif;
}

.journal-article-toc a:hover,
.journal-article-toc a:focus-visible,
.journal-article-toc a.is-active {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--text);
}

.journal-article-toc a.is-active span {
  color: var(--accent);
}

.journal-article-content {
  min-width: 0;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 17px;
  line-height: 2;
}

.journal-article-content p {
  margin: 0;
}

.journal-article-content p + p {
  margin-top: 1.15em;
}

.journal-article-opening {
  padding-bottom: clamp(26px, 4vw, 36px);
  font-size: 18px;
}

.journal-article-opening p:first-child {
  font-size: 1.22em;
  line-height: 1.85;
}

.journal-article-content section {
  scroll-margin-top: 105px;
  padding: clamp(30px, 4vw, 42px) 0;
  border-top: 1px solid var(--line);
}

.journal-article-content h2 {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  margin: 0 0 18px;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(27px, 3.2vw, 40px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.35;
  text-wrap: balance;
}

.journal-article-content h2 span {
  padding-top: .65em;
  color: var(--accent);
  font: 700 11px/1 Arial, sans-serif;
  letter-spacing: .12em;
}

.journal-article-content strong {
  color: var(--text);
  font-weight: 600;
}

.journal-article-lead {
  margin-bottom: 1.1em !important;
  font-size: 1.08em;
}

.journal-article-closing {
  margin-top: 1.4em !important;
}

.journal-article-content blockquote {
  margin: 24px 0;
  padding: 20px 24px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--card-bg));
  color: var(--text);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 17px;
  line-height: 1.8;
}

.journal-article-content .journal-article-warning {
  border-left-color: #d06363;
  background: color-mix(in srgb, #d06363 10%, var(--card-bg));
}

.journal-article-content .journal-article-quote {
  border-left: 0;
  background: transparent;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(22px, 3vw, 32px);
  text-align: center;
}

.journal-article-table-wrap {
  margin: 30px 0;
  overflow-x: auto;
  border: 1px solid var(--line);
}

.journal-article-table-wrap table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.65;
}

.journal-article-table-wrap th,
.journal-article-table-wrap td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.journal-article-table-wrap thead th {
  background: color-mix(in srgb, var(--accent) 9%, var(--card-bg));
  color: var(--text);
  font-weight: 600;
}

.journal-article-table-wrap tbody th {
  width: 130px;
  color: var(--text);
  font-weight: 500;
}

.journal-article-table-wrap tbody tr:last-child > * {
  border-bottom: 0;
}

.journal-article-content .journal-article-equation {
  margin: 28px 0;
  color: var(--text);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.65;
  text-align: center;
}

.journal-article-content .journal-article-equation--boxed {
  padding: 20px 24px;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--accent) 6%, var(--card-bg));
}

.journal-article-process,
.journal-article-comparison,
.journal-article-failure-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin: 30px 0;
  padding: 22px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card-bg) 78%, transparent);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.journal-article-process span,
.journal-article-process strong {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}

.journal-article-process strong {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

.journal-article-process i {
  color: var(--subtle);
  font-size: 14px;
}

.journal-article-comparison {
  gap: 22px;
}

.journal-article-comparison span {
  color: var(--text);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 500;
}

.journal-article-comparison b {
  color: var(--subtle);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
}

.journal-article-failure-path {
  flex-direction: column;
  gap: 8px;
  color: var(--muted);
  font-size: 15px;
}

.journal-article-failure-path i {
  color: var(--subtle);
}

.journal-article-failure-path strong {
  color: var(--accent);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
}

.journal-article-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 26px 0;
  padding: 0;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  list-style: none;
}

.journal-article-list li {
  position: relative;
  padding: 10px 12px 10px 28px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
}

.journal-article-list li::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.journal-article-questions {
  display: grid;
  gap: 12px;
  margin: 28px 0;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.journal-article-questions > div {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid var(--line);
}

.journal-article-questions dt {
  color: var(--text);
  font-weight: 600;
}

.journal-article-questions dd {
  margin: 0;
  color: var(--muted);
}

/* Designer's Perspective: long-form engineering visual grammar. */
.journal-designer-article h3 {
  margin: 24px 0 12px;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}

.journal-principle-box {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin: 22px 0;
  padding: 24px 26px;
  border: 1px solid color-mix(in srgb, var(--accent) 62%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--card-bg));
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.journal-principle-box > span {
  padding-top: 3px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.journal-principle-box > p {
  color: var(--text);
  font-size: clamp(18px, 2.2vw, 23px);
  font-weight: 600;
  line-height: 1.65;
}

.journal-principle-box--compact > p {
  font-size: 19px;
}

.journal-article-bullets,
.journal-keyword-grid,
.journal-question-list,
.journal-action-list,
.journal-function-pairs ul,
.journal-review-grid ul {
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

.journal-article-bullets {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.journal-article-bullets li {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.journal-article-bullets li strong {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
}

.journal-article-bullets li strong::before {
  position: absolute;
  top: .72em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  content: "";
}

.journal-article-bullets li span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.journal-article-bullets--two-column,
.journal-article-bullets--decisions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
}

.journal-article-bullets--two-column li,
.journal-article-bullets--decisions li {
  grid-template-columns: 72px minmax(0, 1fr);
}

.journal-keyword-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.journal-keyword-grid li {
  padding: 10px 12px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.journal-visual-module,
.journal-technical-figure,
.journal-case-card,
.journal-next-article {
  margin: clamp(24px, 3.5vw, 36px) 0;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card-bg) 82%, transparent);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.journal-visual-module {
  padding: clamp(22px, 4vw, 32px);
}

.journal-visual-module > header,
.journal-technical-figure > header {
  margin: 0 0 16px;
}

.journal-visual-module > header > span,
.journal-technical-figure > header > span,
.journal-next-article > span {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
}

.journal-visual-module > header h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(20px, 2.6vw, 26px);
}

.journal-visual-module > header p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.journal-visual-module > footer {
  margin-top: 24px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.journal-priority-layout {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 30px;
}

.journal-segmented-control {
  display: grid;
  align-content: start;
}

.journal-segmented-control button,
.journal-function-controls button,
.journal-delete-controls button {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.journal-segmented-control button + button {
  border-top: 0;
}

.journal-segmented-control button:hover,
.journal-segmented-control button:focus-visible,
.journal-segmented-control button.is-active,
.journal-function-controls button:hover,
.journal-function-controls button:focus-visible,
.journal-function-controls button.is-active,
.journal-delete-controls button:hover,
.journal-delete-controls button:focus-visible,
.journal-delete-controls button.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text);
}

.journal-priority-matrix > p {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 11px;
}

.journal-priority-matrix > p strong {
  color: var(--text);
  font-size: 14px;
}

.journal-priority-matrix ol {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.journal-priority-matrix li {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 38px;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.journal-priority-matrix li i {
  position: relative;
  height: 5px;
  overflow: hidden;
  background: var(--line);
}

.journal-priority-matrix li i::after {
  position: absolute;
  inset: 0;
  width: var(--priority);
  background: var(--accent);
  content: "";
}

.journal-priority-matrix li b {
  color: var(--text);
  font-weight: 500;
  text-align: right;
}

.journal-flow-comparison {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 30px 0;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.journal-flow-comparison > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--line);
}

.journal-flow-comparison > div > span {
  color: var(--subtle);
  font-size: 11px;
}

.journal-flow-comparison p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.journal-flow-comparison p b {
  color: var(--text);
  font-weight: 500;
}

.journal-flow-comparison p i {
  color: var(--accent);
  font-size: 13px;
}

.journal-technical-figure {
  overflow: hidden;
}

.journal-technical-figure > header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 22px 24px 0;
}

.journal-technical-figure > header > span {
  margin: 0;
}

.journal-technical-figure > header > strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
}

.journal-technical-figure figcaption {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.journal-bearing-diagrams {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.journal-tech-svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg);
}

.journal-tech-svg text {
  fill: var(--muted);
  font: 11px Arial, sans-serif;
  letter-spacing: .02em;
}

.journal-tech-svg .svg-structure {
  fill: color-mix(in srgb, #71879a 52%, var(--surface));
  stroke: color-mix(in srgb, #71879a 78%, var(--text));
  stroke-width: 2;
}

.journal-tech-svg .svg-structure--secondary {
  fill: color-mix(in srgb, #8fa2b2 40%, var(--surface));
}

.journal-tech-svg .svg-bearing {
  fill: none;
  stroke: var(--text);
  stroke-width: 9;
}

.journal-tech-svg .svg-shaft,
.journal-tech-svg .svg-hardware,
.journal-tech-svg .svg-wall {
  fill: color-mix(in srgb, var(--text) 74%, var(--surface));
}

.journal-tech-svg .svg-load-path,
.journal-tech-svg .svg-eliminated-arrow {
  fill: none;
  stroke: #d08a48;
  stroke-width: 3;
}

.journal-tech-svg .svg-cable {
  fill: none;
  stroke: #7b91a4;
  stroke-width: 7;
}

.journal-tech-svg .svg-protection {
  fill: color-mix(in srgb, #71879a 56%, var(--surface));
}

.journal-tech-svg .svg-cutout {
  fill: var(--bg);
  stroke: color-mix(in srgb, var(--text) 42%, transparent);
  stroke-width: 1.5;
}

.journal-tech-svg .svg-neutral-axis {
  fill: none;
  stroke: var(--subtle);
  stroke-width: 1.5;
  stroke-dasharray: 7 6;
}

.journal-figure-comparison {
  display: grid;
  grid-template-columns: minmax(90px, .8fr) repeat(2, minmax(0, 1fr));
  font-size: 12px;
}

.journal-figure-comparison > * {
  padding: 10px 14px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.journal-figure-comparison > *:nth-child(3n) {
  border-right: 0;
}

.journal-figure-comparison b,
.journal-figure-comparison strong {
  color: var(--text);
  font-weight: 600;
}

.journal-scroll-hint {
  display: none;
}

.journal-coupling-grid {
  display: grid;
  gap: 8px;
  margin: 30px 0;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.journal-coupling-grid > div {
  display: grid;
  grid-template-columns: minmax(100px, .7fr) 30px minmax(0, 1.3fr);
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.journal-coupling-grid span {
  color: var(--text);
}

.journal-coupling-grid i {
  color: var(--accent);
  text-align: center;
}

.journal-coupling-grid b {
  color: var(--muted);
  font-weight: 500;
}

.journal-logic-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 30px 0;
  padding: 22px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 5%, var(--card-bg));
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.journal-logic-flow span,
.journal-logic-flow strong {
  padding: 6px 9px;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

.journal-logic-flow strong {
  color: var(--accent);
}

.journal-logic-flow i {
  color: var(--subtle);
}

.journal-logic-flow--short {
  justify-content: flex-start;
}

.journal-anti-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: -18px 0 30px;
  color: var(--subtle);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 12px;
}

.journal-anti-flow span {
  color: #d06363;
  font-weight: 600;
}

.journal-budget-status {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 12px;
}

.journal-budget-status strong {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.journal-tradeoff-controls {
  display: grid;
  gap: 19px;
}

.journal-tradeoff-controls label {
  display: grid;
  gap: 8px;
}

.journal-tradeoff-controls label > span {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
}

.journal-tradeoff-controls label b {
  color: var(--text);
  font-weight: 500;
}

.journal-tradeoff-controls output {
  font-variant-numeric: tabular-nums;
}

.journal-tradeoff-controls input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.journal-tradeoff-insight {
  margin-top: 22px !important;
  padding: 15px 17px;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.journal-function-pairs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 28px 0;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.journal-function-pairs article {
  padding: 18px;
  border: 1px solid var(--line);
}

.journal-function-pairs article > span {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.journal-function-pairs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 0;
}

.journal-function-pairs li {
  padding: 4px 7px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.journal-integration-svg {
  border: 1px solid var(--line);
}

.journal-integration-svg .svg-eliminated-arrow {
  stroke: #d08a48;
}

.journal-integration-svg .svg-function-region {
  fill: transparent;
  stroke: transparent;
  stroke-width: 4;
  transition: fill 180ms ease, stroke 180ms ease;
}

.journal-integration-svg .svg-function-region--line {
  fill: none;
  stroke-width: 11;
}

.journal-integration-svg [data-function-region].is-active .svg-function-region {
  fill: color-mix(in srgb, var(--accent) 32%, transparent);
  stroke: var(--accent);
}

.journal-integration-svg [data-function-region].is-active .svg-function-region--line {
  fill: none;
}

.journal-function-controls {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 14px;
}

.journal-function-controls button {
  min-height: 54px;
  text-align: center;
}

.journal-function-controls button + button {
  border-left: 0;
}

.journal-function-caption {
  margin-top: 15px !important;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.journal-question-list {
  display: grid;
  gap: 9px;
}

.journal-question-list li {
  position: relative;
  padding: 13px 16px 13px 38px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.65;
}

.journal-question-list li::before {
  position: absolute;
  top: 13px;
  left: 10px;
  color: var(--accent);
  content: "?";
  font: 700 14px/1.6 Arial, sans-serif;
}

.journal-decision-test {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 28px 0;
  padding: 20px;
  border: 1px solid var(--line);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
}

.journal-decision-test i {
  color: var(--accent);
}

.journal-decision-test strong {
  color: var(--text);
}

.journal-case-card {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  overflow: hidden;
}

.journal-case-index {
  display: grid;
  place-content: center;
  gap: 9px;
  min-height: 100%;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  text-align: center;
}

.journal-case-index i {
  font-size: 32px;
}

.journal-case-index span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}

.journal-case-card > div:last-child {
  padding: 24px 26px;
}

.journal-case-card h3 {
  margin: 0 0 9px;
}

.journal-case-card p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

.journal-case-card a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  color: var(--accent);
  font-size: 12px;
  line-height: 1.6;
}

.journal-action-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.journal-action-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px auto;
  gap: 8px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.journal-action-list i {
  color: var(--subtle);
}

.journal-action-list strong {
  color: var(--text);
  font-weight: 600;
}

.journal-causal-list {
  display: grid;
  gap: 1px;
  margin: 28px 0;
  background: var(--line);
  border: 1px solid var(--line);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.journal-causal-list p {
  display: grid;
  grid-template-columns: minmax(110px, .8fr) 26px minmax(0, 1.2fr);
  gap: 12px;
  align-items: center;
  padding: 13px 16px;
  background: var(--bg);
  color: var(--muted);
  font-size: 13px;
}

.journal-causal-list p + p {
  margin: 0;
}

.journal-causal-list i {
  color: var(--accent);
}

.journal-causal-list b {
  color: var(--text);
  font-weight: 500;
}

.journal-delete-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 22px;
}

.journal-delete-controls {
  display: grid;
  align-content: start;
  gap: 7px;
}

.journal-delete-question {
  display: grid;
  align-content: center;
  min-height: 210px;
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--bg);
}

.journal-delete-question span {
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
}

.journal-delete-question p {
  color: var(--text);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
}

.journal-math-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 28px 0;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.journal-math-stack p {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
}

.journal-math-stack p + p {
  margin: 0;
}

.journal-math-stack span {
  color: var(--subtle);
  font-size: 10px;
}

.journal-math-stack b {
  color: var(--text);
  font: 500 18px/1.4 "Times New Roman", serif;
}

.journal-beam-figure .journal-tech-svg {
  padding: 10px 14px 0;
  border-top: 1px solid var(--line);
}

.journal-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.journal-review-grid article {
  position: relative;
  padding: 20px;
  border: 1px solid var(--line);
}

.journal-review-grid article > span {
  position: absolute;
  top: 18px;
  right: 18px;
  color: var(--accent);
  font: 700 10px/1 Arial, sans-serif;
}

.journal-review-grid h3 {
  margin: 0;
  font-size: 17px;
}

.journal-review-grid ul {
  display: grid;
  gap: 8px;
  margin-bottom: 0;
}

.journal-review-grid li {
  position: relative;
  padding-left: 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.journal-review-grid li::before {
  position: absolute;
  top: .7em;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  content: "";
}

/* Designer's Perspective 02: stability diagrams and interaction modules. */
.journal-output-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 24px 0;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.journal-output-grid article {
  padding: 18px 20px;
  border: 1px solid var(--line);
}

.journal-output-grid h3 {
  margin: 0 0 11px;
  color: var(--text);
  font-size: 15px;
}

.journal-output-grid ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.journal-output-grid li {
  padding: 4px 7px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.journal-builder-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.journal-builder-controls label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
}

.journal-builder-controls select {
  width: 100%;
  min-height: 44px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.journal-builder-controls select:focus-visible {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.journal-builder-result {
  margin-top: 18px;
  padding: 18px 20px;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg));
}

.journal-builder-result span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}

.journal-builder-result p {
  margin-top: 7px;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
}

.journal-time-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 24px 0;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  list-style: none;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.journal-time-list li {
  position: relative;
  display: grid;
  gap: 7px;
  padding: 17px 14px 17px 20px;
}

.journal-time-list li + li {
  border-left: 1px solid var(--line);
}

.journal-time-list li::before {
  position: absolute;
  top: 23px;
  left: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  content: "";
}

.journal-time-list li:first-child::before {
  left: 0;
}

.journal-time-list span {
  color: var(--muted);
  font-size: 11px;
}

.journal-time-list strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.journal-drift-figure .journal-tech-svg {
  border-top: 1px solid var(--line);
}

.journal-tech-svg .svg-structure-line {
  fill: none;
  stroke: color-mix(in srgb, #71879a 84%, var(--text));
  stroke-width: 16;
  stroke-linecap: square;
  stroke-linejoin: round;
}

.journal-tech-svg .svg-cable-thin {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-dasharray: 5 4;
}

.journal-tech-svg .svg-cable-thin--drift {
  stroke: #d08a48;
}

.journal-tech-svg .svg-target {
  fill: none;
  stroke: var(--subtle);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.journal-tech-svg .svg-endpoint {
  fill: var(--accent);
}

.journal-tech-svg .svg-clamp {
  fill: color-mix(in srgb, var(--accent) 14%, var(--surface));
  stroke: var(--accent);
  stroke-width: 3;
}

.journal-tech-svg .svg-clamp--relaxed {
  fill: color-mix(in srgb, #d08a48 13%, var(--surface));
  stroke: #d08a48;
}

.journal-tech-svg .svg-tube {
  fill: var(--bg);
  stroke: color-mix(in srgb, var(--text) 65%, transparent);
  stroke-width: 4;
}

.journal-response-tabs,
.journal-foreign-controls,
.journal-case-actions {
  display: grid;
  margin-bottom: 18px;
}

.journal-response-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.journal-foreign-controls {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.journal-case-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
  margin-bottom: 0;
}

.journal-response-tabs button,
.journal-foreign-controls button,
.journal-case-actions button,
.journal-tree-root button,
.journal-tree-branches button,
.journal-test-steps button {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.journal-response-tabs button + button,
.journal-foreign-controls button + button,
.journal-case-actions button + button {
  border-left: 0;
}

.journal-response-tabs button:hover,
.journal-response-tabs button:focus-visible,
.journal-response-tabs button.is-active,
.journal-foreign-controls button:hover,
.journal-foreign-controls button:focus-visible,
.journal-foreign-controls button.is-active,
.journal-case-actions button:hover,
.journal-case-actions button:focus-visible,
.journal-case-actions button.is-active,
.journal-tree-root button:hover,
.journal-tree-root button:focus-visible,
.journal-tree-root button.is-active,
.journal-tree-branches button:hover,
.journal-tree-branches button:focus-visible,
.journal-tree-branches button.is-active,
.journal-test-steps button:hover,
.journal-test-steps button:focus-visible,
.journal-test-steps button.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text);
}

.journal-response-lab [data-response-panel][hidden] {
  display: none;
}

.journal-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: var(--bg);
}

.journal-chart-svg text {
  fill: var(--subtle);
  font: 11px Arial, sans-serif;
}

.journal-chart-svg .chart-axis {
  fill: none;
  stroke: var(--subtle);
  stroke-width: 1.5;
}

.journal-chart-svg .chart-band {
  fill: color-mix(in srgb, var(--accent) 11%, transparent);
}

.journal-chart-svg .chart-line {
  fill: none;
  stroke-width: 3;
}

.journal-chart-svg .chart-line--a {
  stroke: var(--accent);
}

.journal-chart-svg .chart-line--b {
  stroke: #d08a48;
}

.journal-chart-svg .chart-line--warmup {
  stroke: color-mix(in srgb, var(--accent) 76%, #79a7c6);
}

.journal-chart-svg .chart-task-line,
.journal-chart-svg .chart-threshold {
  fill: none;
  stroke: var(--text);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
}

.journal-chart-svg .chart-threshold {
  stroke: #d08a48;
}

.journal-chart-svg .chart-label-a {
  fill: var(--accent);
}

.journal-chart-svg .chart-label-b {
  fill: #d08a48;
}

.journal-cycle-control {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.journal-cycle-control span,
.journal-gap-slider span {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
}

.journal-cycle-control output {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.journal-cycle-control input,
.journal-gap-slider input {
  width: 100%;
  accent-color: var(--accent);
}

.journal-response-verdict,
.journal-concept-note,
.journal-case-reveal,
.journal-gap-result {
  margin-top: 14px !important;
  padding: 13px 15px;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.journal-concept-note {
  border-left-color: var(--subtle);
}

.journal-assembly-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.journal-assembly-results article {
  padding: 14px;
  border: 1px solid var(--line);
}

.journal-assembly-results article > span,
.journal-thermal-grid article > span,
.journal-failure-comparison article > span {
  display: block;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
}

.journal-assembly-results article > p {
  margin-top: 9px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.journal-spread {
  position: relative;
  height: 150px;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, transparent 49.6%, var(--line) 50%, transparent 50.4%),
    linear-gradient(transparent 49.6%, var(--line) 50%, transparent 50.4%);
}

.journal-spread::before,
.journal-spread::after {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid var(--line);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  content: "";
}

.journal-spread::before {
  width: 80px;
  height: 80px;
}

.journal-spread::after {
  width: 34px;
  height: 34px;
}

.journal-spread i {
  position: absolute;
  z-index: 1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  transition: top 280ms ease, left 280ms ease;
}

.journal-spread i:nth-child(1) { top: 42%; left: 44%; }
.journal-spread i:nth-child(2) { top: 49%; left: 51%; }
.journal-spread i:nth-child(3) { top: 55%; left: 46%; }
.journal-spread i:nth-child(4) { top: 47%; left: 57%; }
.journal-spread i:nth-child(5) { top: 59%; left: 54%; }
.journal-spread i:nth-child(6) { top: 38%; left: 52%; }
.journal-spread--b i:nth-child(1) { top: 18%; left: 26%; }
.journal-spread--b i:nth-child(2) { top: 32%; left: 70%; }
.journal-spread--b i:nth-child(3) { top: 72%; left: 22%; }
.journal-spread--b i:nth-child(4) { top: 64%; left: 77%; }
.journal-spread--b i:nth-child(5) { top: 48%; left: 56%; }
.journal-spread--b i:nth-child(6) { top: 78%; left: 48%; }
.journal-assembly-case.is-located .journal-spread--b i:nth-child(1) { top: 43%; left: 45%; }
.journal-assembly-case.is-located .journal-spread--b i:nth-child(2) { top: 50%; left: 52%; }
.journal-assembly-case.is-located .journal-spread--b i:nth-child(3) { top: 55%; left: 47%; }
.journal-assembly-case.is-located .journal-spread--b i:nth-child(4) { top: 47%; left: 56%; }
.journal-assembly-case.is-located .journal-spread--b i:nth-child(5) { top: 58%; left: 53%; }
.journal-assembly-case.is-located .journal-spread--b i:nth-child(6) { top: 39%; left: 51%; }

.journal-thermal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid var(--line);
  background: var(--line);
}

.journal-thermal-grid article {
  min-height: 250px;
  padding: 22px;
  background: var(--bg);
}

.journal-thermal-grid article > p {
  margin-top: 20px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.journal-bearing-states,
.journal-pulley-states {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 135px;
  color: var(--subtle);
}

.journal-bearing-states > div {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.journal-bearing-states b {
  color: var(--text);
  font-size: 11px;
}

.journal-bearing-states small {
  color: var(--muted);
  font-size: 9px;
}

.thermal-bearing {
  display: block;
  width: 64px;
  height: 64px;
  border: 11px double color-mix(in srgb, #71879a 74%, var(--text));
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px var(--bg);
}

.journal-bearing-states .is-hot .thermal-bearing {
  border-color: #d08a48;
  box-shadow: inset 0 0 0 4px var(--bg), 0 0 18px color-mix(in srgb, #d08a48 34%, transparent);
}

.thermal-motor {
  width: 64px;
  height: 50px;
  border: 3px solid color-mix(in srgb, #71879a 74%, var(--text));
  background: repeating-linear-gradient(90deg, transparent 0 7px, color-mix(in srgb, #71879a 34%, transparent) 7px 10px);
}

.thermal-pulley {
  width: 58px;
  height: 58px;
  border: 10px dotted color-mix(in srgb, var(--accent) 72%, var(--text));
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--line);
}

.thermal-pulley--failed {
  border-color: #d06363;
  border-radius: 43% 57% 49% 51%;
  transform: skewX(-9deg);
}

.journal-tree-root {
  display: flex;
  justify-content: center;
}

.journal-tree-root button {
  min-width: 180px;
  color: var(--text);
  text-align: center;
}

.journal-tree-branches {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  margin: 28px auto 0;
  padding-top: 24px;
}

.journal-tree-branches[hidden] {
  display: none;
}

.journal-tree-branches::before {
  position: absolute;
  top: 0;
  right: 25%;
  left: 25%;
  height: 24px;
  border-top: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  border-left: 1px solid var(--accent);
  content: "";
}

.journal-tree-outcome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 82px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  font-size: 11px;
}

.journal-tree-outcome strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
}

.journal-tree-outcome i {
  color: #d08a48;
}

.journal-test-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.journal-test-steps button + button {
  border-left: 0;
}

.journal-test-steps button span {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 9px;
}

.journal-envelope-status {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 42px;
  gap: 12px;
  align-items: center;
  margin-top: 20px;
  color: var(--muted);
  font-size: 10px;
}

.journal-envelope-status > i {
  position: relative;
  height: 7px;
  overflow: hidden;
  background: var(--line);
}

.journal-envelope-status > i::after {
  position: absolute;
  inset: 0;
  width: var(--envelope);
  background: var(--accent);
  transition: width 220ms ease;
  content: "";
}

.journal-envelope-status strong {
  color: var(--text);
  font-size: 11px;
  text-align: right;
}

.journal-disturbance-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 50px;
  margin-top: 14px;
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
}

.journal-disturbance-list span {
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  color: var(--muted);
  font-size: 10px;
}

.journal-failure-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid var(--line);
  background: var(--line);
}

.journal-failure-comparison article {
  padding: 24px;
  background: var(--bg);
}

.journal-failure-comparison p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 90px;
  margin: 12px 0 16px;
  color: var(--muted);
  font-size: 12px;
}

.journal-failure-comparison b {
  color: var(--text);
  font-weight: 500;
}

.journal-failure-comparison i {
  color: var(--subtle);
}

.journal-failure-comparison article > strong {
  display: block;
  padding: 9px 11px;
  font-size: 11px;
  font-weight: 600;
}

.journal-failure-comparison .is-risk {
  border-left: 2px solid #d06363;
  background: color-mix(in srgb, #d06363 8%, transparent);
  color: #d06363;
}

.journal-failure-comparison .is-safe {
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
}

.journal-gap-stage {
  --ball-position: 0%;
  position: relative;
  height: 190px;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, transparent 0 70%, color-mix(in srgb, var(--accent) 5%, transparent) 70%),
    var(--bg);
}

.journal-gap-stage > span,
.journal-gap-stage > strong {
  position: absolute;
  bottom: 12px;
  color: var(--subtle);
  font-size: 10px;
}

.journal-gap-stage > span {
  left: 14px;
}

.journal-gap-stage > strong {
  right: 14px;
  color: var(--text);
  font-weight: 500;
}

.journal-gap-wall {
  position: absolute;
  right: 8%;
  left: 30%;
  height: 38px;
  background: color-mix(in srgb, #71879a 62%, var(--surface));
  border: 1px solid color-mix(in srgb, #71879a 76%, var(--text));
  transition: clip-path 220ms ease, left 220ms ease;
}

.journal-gap-wall--top {
  top: 26px;
}

.journal-gap-wall--bottom {
  bottom: 38px;
}

.journal-gap-ball {
  position: absolute;
  top: 82px;
  left: clamp(7%, var(--ball-position), 88%);
  z-index: 2;
  width: 30px;
  height: 30px;
  border: 3px solid color-mix(in srgb, #cf9146 78%, var(--text));
  border-radius: 50%;
  background: #f3b85d;
  box-shadow: inset -5px -5px 0 rgba(0, 0, 0, .13);
  transform: translateX(-50%);
  transition: top 160ms ease, left 80ms linear;
}

.journal-gap-stage[data-gap-stage="block"] .journal-gap-wall {
  left: 24%;
}

.journal-gap-stage[data-gap-stage="block"] .journal-gap-ball {
  left: min(var(--ball-position), 21%);
}

.journal-gap-stage[data-gap-stage="escape"] .journal-gap-wall--top {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 18% 100%);
}

.journal-gap-stage[data-gap-stage="escape"] .journal-gap-wall--bottom {
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}

.journal-gap-stage[data-gap-stage="escape"] .journal-gap-ball {
  top: 112px;
}

.journal-gap-slider {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.journal-review-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.journal-next-article {
  padding: 24px 26px;
}

.journal-next-article p {
  color: var(--muted);
  font-size: 13px;
}

.journal-next-article strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.55;
}

.journal-next-article > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: var(--text);
}

.journal-next-article > a i {
  color: var(--accent);
  transition: transform 180ms ease;
}

.journal-next-article > a:hover i,
.journal-next-article > a:focus-visible i {
  transform: translateX(4px);
}

.journal-article-end {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 22px;
  padding: clamp(26px, 4vw, 40px);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card-bg) 76%, transparent);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.journal-article-end span {
  color: var(--accent);
  font-size: 13px;
}

.journal-article-end p {
  max-width: 540px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.journal-article-return {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0 clamp(70px, 9vw, 120px);
  border-top: 1px solid var(--line);
}

.journal-article-return a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
}

.journal-article-return a:hover,
.journal-article-return a:focus-visible {
  color: var(--accent);
}

/* Technical Group Introduction 02: long-form learning-route diagrams. */
.technical-intro-article section {
  padding-block: clamp(26px, 3.4vw, 36px);
}

.technical-intro-article h3,
.technical-intro-article h4 {
  margin: 24px 0 12px;
  color: var(--text);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-weight: 600;
  line-height: 1.55;
}

.technical-intro-article h3 {
  font-size: 19px;
}

.technical-intro-article h4 {
  font-size: 16px;
}

.technical-intro-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.journal-process-diagram {
  margin: 24px 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card-bg) 82%, transparent);
}

.journal-process-diagram pre {
  min-width: max-content;
  margin: 0;
  padding: 22px 24px;
  color: var(--text);
  font: 500 14px/1.85 "Noto Sans SC", "Microsoft YaHei", sans-serif;
  text-align: center;
  white-space: pre;
}

.intro-learning-visual > figcaption,
.intro-capability-visual > figcaption,
.intro-spiral-visual > figcaption {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}

.intro-learning-visual__stages {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.intro-learning-visual__stages article {
  min-height: 150px;
  padding: 18px;
  border: 1px solid var(--line);
}

.intro-learning-visual__stages article > span {
  display: block;
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
}

.intro-learning-visual__stages article > strong {
  display: block;
  margin-top: 18px;
  font-size: 18px;
}

.intro-learning-visual__stages article > p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.intro-learning-visual__stages > i,
.intro-capability-path > i {
  color: var(--accent);
}

.intro-capability-pyramid {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.intro-capability-pyramid > div {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 14px;
  width: var(--level-width);
  max-width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.intro-capability-pyramid > div:nth-child(1) { --level-width: 70%; }
.intro-capability-pyramid > div:nth-child(2) { --level-width: 85%; }
.intro-capability-pyramid > div:nth-child(3) { --level-width: 100%; }

.intro-capability-pyramid span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.intro-capability-pyramid strong {
  font-size: 13px;
  font-weight: 500;
  text-align: right;
}

.intro-capability-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin-top: 22px;
  padding: 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.intro-capability-path strong {
  color: var(--accent);
}

.intro-spiral-visual {
  position: relative;
  overflow: hidden;
}

.intro-spiral-visual__core {
  display: grid;
  place-content: center;
  width: 148px;
  height: 148px;
  margin: 0 auto 22px;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  text-align: center;
}

.intro-spiral-visual__core span {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .12em;
}

.intro-spiral-visual__core strong {
  display: block;
  margin-top: 8px;
  color: var(--accent);
  font-size: 25px;
}

.intro-spiral-visual ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.intro-spiral-visual li {
  min-width: 0;
  padding: 14px 10px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
  text-align: center;
}

.intro-spiral-visual li + li {
  border-left: 1px solid var(--line);
}

.intro-spiral-visual li span {
  display: block;
  margin-bottom: 5px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
}

/* Designer's Perspective 03: reading open-source design. */
.journal-open-source-article h4 {
  margin: 20px 0 10px;
  color: var(--text);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
}

.journal-emphasis-line {
  margin: 22px 0;
  padding-left: 15px;
  border-left: 2px solid var(--accent);
  color: var(--text);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 17px;
  line-height: 1.75;
}

.journal-question-stack {
  display: grid;
  gap: 8px;
  margin: 22px 0;
  padding: 0;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  list-style: none;
}

.journal-question-stack li {
  padding: 11px 14px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

.open-source-language-map,
.open-source-continuum,
.open-source-reverse-stack {
  display: grid;
  gap: 22px;
}

.open-source-language-map > figcaption,
.open-source-continuum > figcaption,
.open-source-reverse-stack > figcaption {
  grid-column: 1 / -1;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}

.open-source-language-map {
  grid-template-columns: minmax(0, 1fr) 144px minmax(0, 1fr);
  align-items: center;
}

.open-source-language-map__column {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-height: 230px;
  padding: 24px 18px;
  border: 1px solid var(--line);
  text-align: center;
}

.open-source-language-map__column span,
.open-source-continuum__paths article > span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
}

.open-source-language-map__column strong,
.open-source-continuum__paths article > strong {
  color: var(--text);
  font-size: 22px;
}

.open-source-language-map__column i {
  color: var(--subtle);
}

.open-source-language-map__column p {
  color: var(--muted);
  font-size: 12px;
}

.open-source-language-map__column b {
  align-self: end;
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
}

.open-source-language-map__bridge {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
  text-align: center;
}

.open-source-continuum__scale {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) auto;
  gap: 12px;
  align-items: center;
  color: var(--muted);
  font-size: 10px;
}

.open-source-continuum__scale i {
  position: relative;
  height: 1px;
  background: var(--line);
}

.open-source-continuum__scale i::after {
  position: absolute;
  top: -3px;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  transform: rotate(45deg);
  content: "";
}

.open-source-continuum__paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.open-source-continuum__paths article {
  display: grid;
  justify-items: center;
  gap: 14px;
  min-height: 250px;
  padding: 26px 20px;
  background: var(--bg);
  text-align: center;
}

.open-source-continuum__paths article > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.open-source-continuum__paths article b {
  padding: 7px 9px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}

.open-source-continuum__paths article > i {
  color: var(--subtle);
}

.open-source-continuum__paths article > p {
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}

.open-source-reverse-stack__label {
  display: flex;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
}

.open-source-reverse-stack ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.open-source-reverse-stack li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: calc(100% - var(--stack-inset, 0px));
  margin-left: var(--stack-inset, 0px);
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-bottom: 0;
  color: var(--muted);
  font-size: 12px;
}

.open-source-reverse-stack li:nth-child(1) { --stack-inset: 0px; }
.open-source-reverse-stack li:nth-child(2) { --stack-inset: 12px; }
.open-source-reverse-stack li:nth-child(3) { --stack-inset: 24px; }
.open-source-reverse-stack li:nth-child(4) { --stack-inset: 36px; }
.open-source-reverse-stack li:nth-child(5) { --stack-inset: 48px; }
.open-source-reverse-stack li:nth-child(6) { --stack-inset: 60px; }
.open-source-reverse-stack li:nth-child(7) { --stack-inset: 72px; }

.open-source-reverse-stack li:last-child {
  border-bottom: 1px solid var(--line);
}

.open-source-reverse-stack li span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
}

.open-source-reverse-stack li strong {
  color: var(--text);
  font-size: 13px;
}

.open-source-question-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 22px;
}

.open-source-question-tabs button {
  min-height: 48px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: 600 10px/1.3 "Noto Sans SC", "Microsoft YaHei", sans-serif;
  letter-spacing: .07em;
}

.open-source-question-tabs button + button {
  border-left: 0;
}

.open-source-question-tabs button span {
  display: block;
  margin-bottom: 2px;
  color: var(--subtle);
  font-size: 8px;
}

.open-source-question-tabs button:hover,
.open-source-question-tabs button:focus-visible,
.open-source-question-tabs button.is-active {
  border-color: var(--accent);
  color: var(--accent);
}

.open-source-question-tabs button.is-active {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.open-source-question-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(200px, .8fr);
  gap: 1px;
  margin-top: 1px;
  background: var(--line);
}

.open-source-question-stage svg {
  display: block;
  width: 100%;
  min-height: 270px;
  background: var(--bg);
}

.open-source-part {
  color: var(--subtle);
  fill: color-mix(in srgb, currentColor 8%, transparent);
  stroke: currentColor;
  stroke-width: 2;
  transition: color 180ms ease, fill 180ms ease;
}

.open-source-part.is-active {
  color: var(--accent);
  fill: color-mix(in srgb, var(--accent) 12%, transparent);
}

.open-source-part.is-affected {
  color: #d08a48;
  fill: color-mix(in srgb, #d08a48 13%, transparent);
}

.open-source-question-labels {
  fill: var(--muted);
  font: 600 9px "Noto Sans SC", "Microsoft YaHei", sans-serif;
  letter-spacing: .08em;
}

.open-source-question-stage aside {
  display: grid;
  align-content: center;
  gap: 10px;
  min-height: 270px;
  padding: 24px;
  background: var(--bg);
}

.open-source-question-stage aside span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
}

.open-source-question-stage aside strong {
  color: var(--text);
  font-size: 21px;
}

.open-source-question-stage aside p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.75;
}

.open-source-question-slider {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 11px;
}

.open-source-question-slider output {
  color: var(--accent);
  font-weight: 700;
}

.open-source-question-slider input {
  width: 100%;
  accent-color: var(--accent);
}

@media (min-width: 1051px) {
  .journal-article-toc--long ol {
    max-height: calc(100vh - 190px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

.recruit-letter-signature-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 18px;
}

@media (max-width: 1050px) {
  .journal-toolbar {
    grid-template-columns: minmax(250px, 1fr) auto;
  }

  .journal-filter-list {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .journal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journal-article-layout {
    grid-template-columns: 1fr;
  }

  .journal-article-toc {
    position: static;
    max-height: none;
    padding: 18px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .journal-article-toc ol {
    display: flex;
    gap: 6px;
    overflow-x: auto;
  }

  .journal-article-toc li {
    flex: 0 0 auto;
  }

  .journal-article-toc a {
    display: flex;
    min-height: 40px;
    border: 1px solid var(--line);
    white-space: nowrap;
  }

  .journal-time-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journal-time-list li:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .journal-time-list li:nth-child(4) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 720px) {
  .journal-index-page main,
  .journal-article-page main {
    width: min(100% - 28px, 1360px);
  }

  .technical-intro-list,
  .intro-learning-visual__stages,
  .intro-spiral-visual ol {
    grid-template-columns: 1fr;
  }

  .intro-learning-visual__stages > i {
    transform: rotate(90deg);
    justify-self: center;
  }

  .intro-learning-visual__stages article {
    min-height: 0;
  }

  .intro-capability-pyramid > div {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .intro-capability-pyramid strong {
    text-align: left;
  }

  .intro-spiral-visual li + li {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .journal-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 92px;
  }

  .journal-hero h1 {
    font-size: 48px;
  }

  .journal-toolbar {
    grid-template-columns: 1fr auto;
    gap: 12px;
  }

  .journal-search {
    grid-column: 1 / -1;
  }

  .journal-grid {
    grid-template-columns: 1fr;
  }

  .journal-card--featured {
    grid-column: auto;
  }

  .journal-card-body {
    min-height: 300px;
  }

  .journal-card h2 {
    font-size: 28px;
  }

  .journal-index-page .journal-card h2 {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .journal-card footer,
  .journal-principle,
  .journal-article-end {
    align-items: flex-start;
    flex-direction: column;
  }

  .journal-index-page .journal-card footer {
    align-items: flex-start;
  }

  .journal-principle {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .journal-article-hero {
    padding-top: 96px;
  }

  .journal-article-hero h1 {
    font-size: 40px;
  }

  .journal-article-dek {
    font-size: 18px;
  }

  .journal-article-layout {
    gap: 28px;
    padding-top: 34px;
  }

  .journal-article-content,
  .journal-article-opening {
    font-size: 16px;
    line-height: 1.95;
  }

  .journal-article-content section {
    padding: 26px 0;
  }

  .journal-article-table-wrap {
    margin-right: -14px;
  }

  .journal-article-process {
    justify-content: flex-start;
    padding: 18px;
  }

  .journal-article-list {
    grid-template-columns: 1fr;
  }

  .journal-article-questions > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .journal-principle-box {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px;
  }

  .journal-principle-box > p,
  .journal-principle-box--compact > p {
    font-size: 18px;
  }

  .journal-article-bullets--two-column,
  .journal-article-bullets--decisions,
  .journal-function-pairs,
  .journal-action-list,
  .journal-math-stack,
  .journal-review-grid {
    grid-template-columns: 1fr;
  }

  .journal-article-bullets li,
  .journal-article-bullets--two-column li,
  .journal-article-bullets--decisions li {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .journal-keyword-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journal-visual-module {
    padding: 20px 18px;
  }

  .open-source-language-map,
  .open-source-continuum__paths,
  .open-source-question-stage {
    grid-template-columns: 1fr;
  }

  .open-source-language-map__column {
    min-height: 190px;
  }

  .open-source-language-map__bridge {
    padding: 2px 0;
  }

  .open-source-question-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .open-source-question-tabs button + button {
    border-left: 1px solid var(--line);
  }

  .open-source-question-tabs button:nth-child(even) {
    border-left: 0;
  }

  .open-source-question-tabs button:nth-child(n + 3) {
    border-top: 0;
  }

  .open-source-question-stage svg {
    min-height: 0;
  }

  .open-source-question-stage aside {
    min-height: 150px;
  }

  .open-source-reverse-stack li:nth-child(n) {
    --stack-inset: 0px;
  }

  .journal-priority-layout,
  .journal-delete-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .journal-segmented-control {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journal-segmented-control button + button {
    border-top: 1px solid var(--line);
  }

  .journal-segmented-control button:nth-child(even) {
    border-left: 0;
  }

  .journal-flow-comparison > div {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .journal-bearing-diagrams {
    grid-template-columns: 1fr;
  }

  .journal-coupling-grid > div,
  .journal-causal-list p {
    grid-template-columns: minmax(90px, .8fr) 22px minmax(0, 1.2fr);
    padding-inline: 10px;
  }

  .journal-logic-flow {
    justify-content: flex-start;
    padding: 18px 14px;
  }

  .journal-function-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journal-function-controls button + button {
    border-left: 1px solid var(--line);
  }

  .journal-function-controls button:nth-child(even) {
    border-left: 0;
  }

  .journal-integration-svg,
  .journal-beam-figure .journal-tech-svg {
    width: 680px;
    max-width: none;
  }

  .journal-figure-scroll {
    overflow-x: auto;
  }

  .journal-drift-figure .journal-tech-svg {
    width: 760px;
    max-width: none;
  }

  .journal-output-grid,
  .journal-builder-controls,
  .journal-assembly-results,
  .journal-thermal-grid,
  .journal-failure-comparison,
  .journal-review-grid--three {
    grid-template-columns: 1fr;
  }

  .journal-time-list {
    grid-template-columns: 1fr;
  }

  .journal-time-list li + li,
  .journal-time-list li:nth-child(4) {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .journal-time-list li::before,
  .journal-time-list li:first-child::before {
    top: -4px;
    left: 20px;
  }

  .journal-chart-svg {
    min-width: 620px;
  }

  .journal-response-lab [data-response-panel] {
    overflow-x: auto;
  }

  .journal-cycle-control,
  .journal-response-verdict,
  .journal-concept-note {
    min-width: 0;
  }

  .journal-thermal-grid article {
    min-height: 0;
  }

  .journal-test-steps {
    display: flex;
    overflow-x: auto;
  }

  .journal-test-steps button {
    flex: 0 0 124px;
  }

  .journal-test-steps button + button {
    border-left: 0;
  }

  .journal-envelope-status {
    grid-template-columns: 1fr 40px;
  }

  .journal-envelope-status > span {
    grid-column: 1 / -1;
  }

  .journal-foreign-controls {
    grid-template-columns: 1fr;
  }

  .journal-foreign-controls button + button {
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .journal-tree-branches {
    gap: 12px;
  }

  .journal-gap-stage {
    height: 170px;
  }

  .journal-scroll-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0 !important;
    color: var(--subtle);
    font-size: 10px;
  }

  .journal-case-card {
    grid-template-columns: 1fr;
  }

  .journal-case-index {
    grid-template-columns: auto auto;
    min-height: 78px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .journal-delete-question {
    min-height: 170px;
  }

  .journal-article-kicker > * + *::before {
    content: none;
  }

  .journal-article-content h2 {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 16px;
    font-size: 27px;
  }

  .journal-article-content blockquote {
    margin: 26px 0;
    padding: 18px;
    font-size: 15px;
  }

  .journal-article-return {
    align-items: flex-start;
    flex-direction: column;
  }

  .recruit-letter-signature-links {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journal-card,
  .journal-card-cover-overlay,
  .journal-card-cover img {
    transition: none;
  }
}

@media (max-width: 390px) {
  .site-header .nav {
    gap: 6px;
  }

  .site-header .brand {
    gap: 9px;
  }

  .site-header .brand-logos img {
    width: 30px;
    height: 30px;
  }

  .site-header .brand-text strong {
    gap: 8px;
    font-size: 14px;
  }

  .site-header .brand-text strong::after {
    height: 15px;
  }

  .site-header .nav-toggle {
    width: 36px;
    height: 36px;
  }

  .site-header .theme-toggle {
    width: 40px;
    height: 36px;
  }

  body:has(.join-guide-page) .site-header .brand-text strong {
    font-size: 14px;
  }

  body:has(.join-guide-page) .site-header .brand-logos img {
    width: 30px;
    height: 30px;
  }

  body:has(.join-guide-page) .site-header .nav-toggle {
    width: 36px;
    height: 36px;
  }

  body:has(.join-guide-page) .site-header .theme-toggle {
    width: 40px;
    height: 36px;
  }

  .join-awareness-heading,
  .join-guide-section--checklist .join-guide-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* 2027 armored unit */
.unit-heavy-page {
  --heavy-green: #20c96b;
  --heavy-green-rgb: 32, 201, 107;
  --heavy-amber: #e17734;
  --heavy-cyan: #287fa0;
  --heavy-panel: #f5f6f5;
}

:root[data-theme="dark"] .unit-heavy-page {
  --heavy-green: #7dff58;
  --heavy-green-rgb: 125, 255, 88;
  --heavy-amber: #ff9a56;
  --heavy-cyan: #62d9ff;
  --heavy-panel: #151817;
}

.heavy-main {
  overflow: clip;
}

.unit-heavy-page .page-label {
  font-size: 11px;
}

.heavy-main .section-block,
.heavy-hero {
  width: min(1080px, calc(100% - 48px));
}

.heavy-main .section-block {
  margin-top: 62px;
  margin-bottom: 62px;
}

.heavy-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(360px, 1.06fr);
  gap: clamp(28px, 4vw, 54px);
  align-items: center;
  margin: 54px auto 0;
  padding-bottom: 38px;
  border-bottom: 1px solid var(--line);
}

.heavy-hero-copy h1 {
  margin: 0;
  font-size: clamp(46px, 5.6vw, 72px);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.04em;
}

.heavy-hero-lead {
  max-width: 560px;
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.82;
}

.heavy-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.heavy-tags li {
  padding: 5px 9px;
  border: 1px solid rgba(var(--heavy-green-rgb), 0.55);
  color: var(--heavy-green);
  font-family: "DIN 1451 Fette Breitschrift 1936", "Noto Serif SC", serif;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.heavy-hero-media {
  position: relative;
  min-height: 330px;
  margin: 0;
  overflow: hidden;
  background: #0d1010;
}

.heavy-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 48%, rgba(3, 7, 5, 0.92) 100%);
}

.heavy-hero-media img {
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
  object-position: center 48%;
  filter: saturate(0.82) contrast(1.06);
}

.heavy-hero-media figcaption {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 22px;
  left: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  line-height: 1.6;
}

.heavy-hero-media figcaption span {
  flex: 0 0 auto;
  color: var(--heavy-green);
  font-family: "DIN 1451 Fette Breitschrift 1936", sans-serif;
  letter-spacing: 0.14em;
}

.heavy-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.74fr);
  gap: 36px;
  align-items: end;
  margin-bottom: 28px;
}

.heavy-section-heading h2,
.heavy-closing h2 {
  margin: 0;
  font-size: clamp(30px, 3.5vw, 46px);
  line-height: 1.16;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.heavy-section-heading > p {
  max-width: 500px;
  font-size: 14px;
}

.heavy-phase-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
  border: 1px solid var(--line);
  background: var(--line);
  gap: 1px;
}

.heavy-phase-card {
  min-height: 235px;
  padding: 26px;
  background:
    linear-gradient(135deg, rgba(var(--heavy-green-rgb), 0.1), transparent 58%),
    var(--card-bg);
}

.heavy-phase-card--fire {
  background:
    linear-gradient(135deg, rgba(255, 142, 74, 0.12), transparent 58%),
    var(--card-bg);
}

.heavy-phase-card > i {
  display: block;
  margin: 26px 0 14px;
  color: var(--heavy-green);
  font-size: 38px;
  line-height: 1;
}

.heavy-phase-card--fire > i {
  color: var(--heavy-amber);
}

.heavy-phase-index,
.heavy-domain-no {
  color: var(--heavy-green);
  font-family: "DIN 1451 Fette Breitschrift 1936", sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
}

.heavy-phase-card h3,
.heavy-domain-row h3,
.heavy-challenge-grid h3 {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 500;
}

.heavy-transform-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bg);
  text-align: center;
}

.heavy-transform-node span {
  color: var(--subtle);
  font-family: "DIN 1451 Fette Breitschrift 1936", sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
}

.heavy-transform-node strong {
  margin-top: 5px;
  font-size: 20px;
  font-weight: 500;
}

.heavy-transform-node i {
  margin-top: 14px;
  color: var(--heavy-green);
  font-size: 27px;
}

.heavy-spec-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 14px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.heavy-spec-rail div {
  padding: 18px 20px;
  border-left: 1px solid var(--line);
}

.heavy-spec-rail div:first-child {
  border-left: 0;
}

.heavy-spec-rail dt {
  color: var(--subtle);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.heavy-spec-rail dd {
  margin: 8px 0 0;
  color: var(--text);
  font-family: "DIN 1451 Fette Breitschrift 1936", "Noto Serif SC", serif;
  font-size: clamp(22px, 2.4vw, 31px);
  line-height: 1;
}

.heavy-spec-rail small {
  color: var(--heavy-green);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.heavy-domain-list {
  border-top: 1px solid var(--line);
}

.heavy-domain-row {
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr);
  min-height: 330px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--card-bg);
}

.heavy-domain-row--reverse {
  grid-template-columns: minmax(0, 1.22fr) minmax(320px, 0.78fr);
}

.heavy-domain-row--reverse .heavy-domain-media {
  order: 2;
}

.heavy-domain-row--reverse .heavy-domain-copy {
  order: 1;
}

.heavy-domain-row--control .heavy-domain-media {
  align-self: center;
  width: calc(100% - 48px);
  height: 240px;
  min-height: 0;
  margin: 24px;
}

.heavy-domain-row--control figure.heavy-domain-media img {
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.heavy-domain-row--vision .heavy-domain-media {
  align-self: center;
  height: 330px;
  min-height: 0;
}

.heavy-domain-media,
.heavy-domain-media figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #0d0f0e;
}

figure.heavy-domain-media img,
.heavy-vision-pair img {
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: contain;
  filter: saturate(0.86) contrast(1.04);
  transition: transform 0.4s ease, filter 0.4s ease;
}

.heavy-domain-row:hover figure.heavy-domain-media img,
.heavy-vision-pair figure:hover img,
.heavy-reference-card:hover img {
  transform: scale(1.018);
  filter: saturate(1) contrast(1.03);
}

.heavy-domain-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 30px 34px;
}

.heavy-domain-copy h3 {
  margin-top: 8px;
}

.heavy-domain-copy > p {
  margin-top: 9px;
  font-size: 13.5px;
  line-height: 1.78;
}

.heavy-domain-copy ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 18px;
  margin: 18px 0 0;
  padding: 15px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.heavy-domain-copy li {
  position: relative;
  padding-left: 13px;
  color: var(--muted);
  font-size: 12px;
}

.heavy-domain-copy li::before {
  content: "";
  position: absolute;
  top: 0.78em;
  left: 0;
  width: 4px;
  height: 4px;
  background: var(--heavy-green);
}

.heavy-vision-pair {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  min-height: 330px;
}

.heavy-vision-pair figure {
  position: relative;
  min-height: 0;
  height: 165px;
}

.heavy-vision-pair img {
  min-height: 0;
  object-fit: cover;
}

.heavy-vision-pair figure:first-child img {
  object-position: center top;
}

.heavy-vision-pair figure:last-child img {
  object-position: center bottom;
}

.heavy-vision-pair figcaption {
  position: absolute;
  right: 10px;
  bottom: 9px;
  left: 10px;
  padding: 5px 7px;
  background: rgba(5, 9, 7, 0.78);
  color: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  text-align: center;
}

.heavy-challenge-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.heavy-challenge-grid article {
  min-height: 205px;
  padding: 24px;
  border-left: 1px solid var(--line);
}

.heavy-challenge-grid article:first-child {
  border-left: 0;
}

.heavy-challenge-grid span {
  display: block;
  margin-bottom: 28px;
  color: var(--heavy-green);
  font-family: "DIN 1451 Fette Breitschrift 1936", sans-serif;
  font-size: 18px;
}

.heavy-reference-sequences {
  border-top: 1px solid var(--line);
}

.heavy-reference-series {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 34px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.heavy-reference-series > header span {
  color: var(--heavy-green);
  font-family: "DIN 1451 Fette Breitschrift 1936", sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
}

.heavy-reference-series > header h3 {
  margin: 7px 0 8px;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 500;
}

.heavy-reference-series > header p {
  font-size: 12px;
  line-height: 1.7;
}

.heavy-reference-track {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.heavy-reference-track--vision {
  display: flex;
}

.heavy-reference-card {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--card-bg);
  overflow: hidden;
}

.heavy-reference-card img {
  width: 100%;
  height: 108px;
  object-fit: contain;
  background: #0c0d0d;
  transition: transform 0.32s ease, filter 0.32s ease;
}

.heavy-reference-card figcaption {
  display: block;
  min-height: 50px;
  padding: 7px 8px;
}

.heavy-reference-card figcaption strong,
.heavy-reference-card figcaption span {
  display: block;
}

.heavy-reference-card figcaption strong {
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
}

.heavy-reference-card figcaption span {
  margin-top: 2px;
  color: var(--subtle);
  font-size: 8.5px;
  line-height: 1.4;
}

.heavy-closing {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.6fr);
  gap: 48px;
  align-items: end;
  padding: 34px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.heavy-closing > div:first-child > p:last-child {
  max-width: 820px;
  margin-top: 20px;
  font-size: 14px;
}

.heavy-closing-actions {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding-left: 28px;
  border-left: 2px solid var(--heavy-green);
}

/* Heavy-unit page easter egg: a concealed trigger opposite the recruitment letter. */
.heavy-couplet-trigger {
  position: fixed;
  top: 50%;
  left: clamp(18px, 2vw, 32px);
  z-index: 19;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 2px solid #e52a32;
  border-radius: 50%;
  background: color-mix(in srgb, #b50917 12%, transparent);
  color: #ff3441;
  cursor: pointer;
  opacity: 0.035;
  transform: translateY(-50%) scale(0.72);
  transition: opacity 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.heavy-couplet-trigger::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: inherit;
  background: currentColor;
  box-shadow: 0 0 18px color-mix(in srgb, #ff3441 70%, transparent);
}

.heavy-couplet-trigger:hover,
.heavy-couplet-trigger:focus-visible,
.heavy-couplet-trigger[aria-expanded="true"] {
  opacity: 1;
  outline: 0;
  transform: translateY(-50%) scale(1);
}

.heavy-couplet-trigger[aria-expanded="true"] {
  background: #b50917;
  color: #ffd6b7;
}

.heavy-couplet {
  position: fixed;
  top: 27%;
  z-index: 18;
  display: grid;
  place-items: center;
  width: clamp(54px, 4.1vw, 72px);
  min-height: min(500px, 58vh);
  margin: 0;
  padding: 22px 10px;
  border: 1px solid #ff6a58;
  background:
    linear-gradient(90deg, rgba(255, 214, 183, 0.08), transparent 22%, transparent 78%, rgba(255, 214, 183, 0.08)),
    #a80814;
  color: #ffe1bd;
  box-shadow: 0 20px 54px rgba(83, 0, 5, 0.32);
  font-family: "Qianli Couplet", "STKaiti", "KaiTi", serif;
  font-size: clamp(22px, 1.55vw, 30px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.11em;
  writing-mode: vertical-rl;
  opacity: 0;
  pointer-events: none;
  transform: scaleY(0.04);
  transform-origin: top center;
  transition: opacity 120ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.heavy-couplet--left {
  left: max(76px, calc((100vw - 1080px) / 2 - 116px));
}

.heavy-couplet--right {
  right: max(76px, calc((100vw - 1080px) / 2 - 116px));
}

html.has-heavy-couplet .heavy-couplet {
  opacity: 1;
  transform: scaleY(1);
}

html.has-heavy-couplet .heavy-couplet--right {
  transition-delay: 90ms;
}

@media (prefers-reduced-motion: reduce) {
  .heavy-couplet,
  .heavy-couplet-trigger {
    transition-duration: 1ms;
  }
}

@media (max-width: 1280px) {
  .heavy-couplet-trigger,
  .heavy-couplet {
    display: none;
  }
}

@media (max-width: 1080px) {
  .heavy-hero {
    grid-template-columns: 1fr;
  }

  .heavy-hero-media {
    min-height: 340px;
  }

  .heavy-hero-media img {
    min-height: 340px;
  }

}

@media (max-width: 760px) {
  .heavy-main .section-block,
  .heavy-hero {
    width: calc(100% - 28px);
  }

  .heavy-hero {
    gap: 28px;
    margin-top: 46px;
    padding-bottom: 34px;
  }

  .heavy-hero-copy h1 {
    font-size: clamp(44px, 15vw, 58px);
  }

  .heavy-hero-lead {
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.8;
  }

  .heavy-hero-media,
  .heavy-hero-media img {
    min-height: 260px;
  }

  .heavy-hero-media figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .heavy-section-heading,
  .heavy-closing {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .heavy-section-heading h2,
  .heavy-closing h2 {
    font-size: clamp(28px, 9vw, 38px);
  }

  .heavy-phase-flow {
    grid-template-columns: 1fr;
  }

  .heavy-phase-card {
    min-height: auto;
    padding: 26px 22px;
  }

  .heavy-phase-card > i {
    margin: 28px 0 16px;
  }

  .heavy-transform-node {
    flex-direction: row;
    gap: 10px;
    padding: 14px 20px;
  }

  .heavy-transform-node strong {
    margin: 0;
  }

  .heavy-transform-node i {
    margin: 0 0 0 auto;
    transform: rotate(90deg);
  }

  .heavy-spec-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .heavy-spec-rail div:nth-child(3) {
    border-left: 0;
  }

  .heavy-spec-rail div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .heavy-domain-row,
  .heavy-domain-row--reverse {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .heavy-domain-row--reverse .heavy-domain-media,
  .heavy-domain-row--reverse .heavy-domain-copy {
    order: initial;
  }

  .heavy-domain-media,
  figure.heavy-domain-media img {
    min-height: 0;
    height: 230px;
  }

  .heavy-domain-row--control .heavy-domain-media {
    width: calc(100% - 36px);
    height: 190px;
    margin: 18px;
  }

  .heavy-domain-row--control figure.heavy-domain-media img {
    height: 100%;
  }

  .heavy-domain-row--vision .heavy-domain-media {
    height: 220px;
  }

  .heavy-domain-row--vision .heavy-domain-media figure {
    height: 110px;
  }

  .heavy-vision-pair {
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: 220px;
  }

  .heavy-domain-copy {
    padding: 24px 22px 28px;
  }

  .heavy-domain-copy ul {
    grid-template-columns: 1fr;
  }

  .heavy-challenge-grid {
    grid-template-columns: 1fr;
  }

  .heavy-challenge-grid article {
    min-height: auto;
    padding: 24px 4px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .heavy-challenge-grid article:first-child {
    border-top: 0;
  }

  .heavy-challenge-grid span {
    margin-bottom: 20px;
  }

  .heavy-reference-series {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 24px 0;
  }

  .heavy-reference-series > header {
    max-width: 480px;
  }

  .heavy-reference-track,
  .heavy-reference-track--vision {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 0 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  .heavy-reference-card {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }

  .heavy-closing {
    padding: 34px 0;
  }

  .heavy-closing-actions {
    padding: 18px 0 0;
    border-top: 2px solid var(--heavy-green);
    border-left: 0;
  }
}

@media (max-width: 430px) {
  .heavy-reference-track,
  .heavy-reference-track--vision {
    display: flex;
  }

  .heavy-reference-card {
    flex-basis: 84%;
  }

  .heavy-vision-pair {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    height: 320px;
  }

  .heavy-vision-pair figure {
    height: auto;
  }

  .heavy-spec-rail div {
    padding: 18px 14px;
  }
}

/* Aerial and dart unit page */
.unit-aerial-dart-page {
  --dart-orange: #ff8d58;
  --dart-orange-rgb: 255, 141, 88;
  --dart-cyan: #58cfff;
  --dart-panel: #f6f6f5;
}

:root[data-theme="dark"] .unit-aerial-dart-page {
  --dart-orange: #ff965f;
  --dart-orange-rgb: 255, 150, 95;
  --dart-cyan: #63d7ff;
  --dart-panel: #161718;
}

.air-dart-main {
  overflow: clip;
}

.air-dart-main .section-block,
.air-dart-overview,
.air-dart-dart {
  width: min(1080px, calc(100% - 48px));
  margin-right: auto;
  margin-left: auto;
}

.air-dart-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.75fr);
  gap: 48px;
  align-items: end;
  margin-top: 54px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}

.air-dart-overview h1 {
  margin: 0;
  font-size: clamp(46px, 5.5vw, 68px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.air-dart-overview > p {
  font-size: 15px;
  line-height: 1.85;
}

.air-dart-rail {
  position: fixed;
  top: 50%;
  left: max(72px, calc(50% - 610px));
  z-index: 13;
  display: grid;
  width: 62px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card-bg) 91%, transparent);
  backdrop-filter: blur(12px);
  transform: translate(-100%, -50%);
}

.air-dart-aerial,
.air-dart-dart {
  scroll-margin-top: 104px;
}

.air-dart-rail a {
  position: relative;
  min-height: 112px;
  padding: 10px 7px;
  display: grid;
  grid-template-rows: auto 30px 1fr;
  place-items: center;
  gap: 5px;
  color: var(--subtle);
  border-bottom: 1px solid var(--line);
  transition: color 160ms ease, background-color 160ms ease;
}

.air-dart-rail a:last-child {
  border-bottom: 0;
}

.air-dart-rail a::before {
  content: "";
  position: absolute;
  left: -1px;
  width: 3px;
  height: 0;
  background: var(--dart-orange);
  transition: height 180ms ease;
}

.air-dart-rail a.is-active,
.air-dart-rail a:hover,
.air-dart-rail a:focus-visible {
  color: var(--text);
  background: var(--surface);
  outline: 0;
}

.air-dart-rail a[data-air-dart-nav="aerial"].is-active {
  background: color-mix(in srgb, var(--dart-cyan) 9%, var(--card-bg));
}

.air-dart-rail a[data-air-dart-nav="dart"].is-active {
  background: color-mix(in srgb, var(--dart-orange) 9%, var(--card-bg));
}

.air-dart-rail a[data-air-dart-nav="aerial"]::before {
  background: var(--dart-cyan);
}

.air-dart-rail a.is-active::before {
  height: 56px;
}

.air-dart-rail span {
  font-size: 9px;
  letter-spacing: 0.12em;
}

.air-dart-rail img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: brightness(0);
}

:root[data-theme="dark"] .air-dart-rail img {
  filter: none;
}

.air-dart-rail strong {
  align-self: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
}

.air-dart-aerial-placeholder {
  scroll-margin-top: 112px;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin-top: 42px;
  margin-bottom: 52px;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--dart-cyan);
  background: var(--card-bg);
}

.air-dart-section-index {
  display: grid;
  grid-template-columns: auto 38px;
  gap: 12px;
  align-items: center;
  color: var(--dart-cyan);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.air-dart-section-index--dart {
  width: fit-content;
  margin-bottom: 18px;
  color: var(--dart-orange);
}

.air-dart-section-index img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: brightness(0);
}

:root[data-theme="dark"] .air-dart-section-index img {
  filter: none;
}

.air-dart-aerial-placeholder h2 {
  margin: 0 0 7px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.25;
}

.air-dart-aerial-placeholder p:last-child {
  max-width: 760px;
  font-size: 14px;
}

.air-dart-pending {
  padding: 7px 10px;
  color: var(--dart-cyan);
  border: 1px solid color-mix(in srgb, var(--dart-cyan) 55%, var(--line));
  font-size: 11px;
  white-space: nowrap;
}

.air-dart-dart {
  scroll-margin-top: 110px;
}

.dart-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr);
  gap: 38px;
  align-items: center;
  padding: 42px 0 46px;
  border-bottom: 1px solid var(--line);
}

.dart-hero h2 {
  margin: 0;
  font-size: clamp(42px, 5vw, 62px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.dart-hero-lead {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.85;
}

.dart-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 22px;
}

.dart-tag-row span {
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--dart-orange) 48%, var(--line));
  color: var(--dart-orange);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.dart-hero-media {
  position: relative;
  min-height: 320px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}

.dart-hero-media img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

.dart-hero-media figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 24px 20px 15px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.84));
  color: #fff;
  font-size: 11px;
}

.dart-hero-media figcaption span {
  color: var(--dart-orange);
  letter-spacing: 0.12em;
}

.dart-hero-media figcaption strong {
  font-weight: 400;
}

.dart-mission,
.dart-specs,
.dart-mechanical,
.dart-domain-list,
.dart-testing {
  margin: 58px 0;
}

.dart-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.65fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 24px;
}

.dart-section-heading h2 {
  margin: 0;
  font-size: clamp(30px, 3.5vw, 40px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.025em;
}

.dart-section-heading > p {
  font-size: 14px;
  line-height: 1.8;
}

.dart-mission-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.dart-impact-media {
  position: relative;
  min-height: 420px;
  margin: 0;
  overflow: hidden;
  background: #090a0c;
}

.dart-impact-media img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

.dart-impact-media figcaption,
.dart-media-card figcaption,
.dart-testing figure figcaption {
  color: var(--subtle);
  font-size: 10px;
  line-height: 1.5;
}

.dart-impact-media figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 28px 16px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.84));
  color: #ddd;
}

.dart-mission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.dart-mission-grid article {
  min-height: 210px;
  padding: 24px 20px;
  background: var(--card-bg);
}

.dart-mission-grid span,
.dart-spec-grid article > div > span,
.dart-body-copy article > span {
  color: var(--dart-orange);
  font-size: 10px;
  letter-spacing: 0.14em;
}

.dart-mission-grid h3 {
  margin: 24px 0 8px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
}

.dart-mission-grid p {
  font-size: 13px;
  line-height: 1.72;
}

.dart-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dart-spec-grid > article {
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr);
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.dart-spec-grid article > div:first-child {
  padding: 24px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--dart-orange) 6%, var(--surface));
}

.dart-spec-grid h3 {
  margin: 40px 0 0;
  font-size: 28px;
  font-weight: 500;
}

.dart-spec-grid dl {
  margin: 0;
  display: grid;
}

.dart-spec-grid dl > div {
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  border-bottom: 1px solid var(--soft-line);
}

.dart-spec-grid dl > div:last-child {
  border-bottom: 0;
}

.dart-spec-grid dt {
  color: var(--subtle);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 12px;
  line-height: 1.45;
}

.dart-spec-grid dd {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  align-items: baseline;
  column-gap: 9px;
  row-gap: 3px;
  margin: 0;
  color: var(--text);
  font-family: "DIN 1451 Fette Breitschrift 1936", sans-serif;
  font-size: clamp(17px, 1.25vw, 20px);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  letter-spacing: 0.025em;
  white-space: normal;
}

.dart-spec-value {
  white-space: nowrap;
}

.dart-spec-grid dd small {
  flex: 0 1 auto;
  color: var(--dart-orange);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.dart-mechanical {
  padding-top: 50px;
  border-top: 1px solid var(--line);
}

.dart-route-layout,
.dart-body-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 24px;
  margin-top: 24px;
}

.dart-route-copy,
.dart-body-copy {
  padding: 26px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.dart-route-copy > h3,
.dart-body-copy > h3,
.dart-testing-intro h3 {
  margin: 0 0 12px;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.35;
}

.dart-route-copy > p,
.dart-body-copy > p,
.dart-testing-intro p {
  font-size: 14px;
  line-height: 1.8;
}

.dart-route-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 22px;
  border: 1px solid var(--line);
  background: var(--line);
}

.dart-route-list article {
  padding: 15px;
  background: var(--surface);
}

.dart-route-list span {
  color: var(--dart-orange);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}


.dart-route-list p {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.65;
}

.dart-launcher-media {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(180px, 0.75fr);
  gap: 10px;
}

.dart-media-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}

.dart-media-card img {
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
}

.dart-media-card figcaption {
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--card-bg);
}

.dart-launcher-media .dart-media-card:last-child img {
  object-fit: contain;
  padding: 12px;
}

.dart-body-layout {
  margin-top: 24px;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

.dart-body-copy article {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--soft-line);
}

.dart-body-copy h4 {
  margin: 4px 0 7px;
  font-size: 18px;
  font-weight: 500;
}

.dart-body-copy article p {
  font-size: 13px;
  line-height: 1.75;
}

.dart-body-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dart-body-media .dart-media-card:first-child {
  grid-row: 1 / span 2;
}

.dart-body-media .dart-media-card img {
  min-height: 190px;
}

.dart-body-media .dart-media-card:not(:first-child) img {
  object-fit: contain;
  padding: 8px;
}

.dart-domain-list {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
}

.dart-domain-row {
  display: grid;
  grid-template-columns: minmax(340px, 0.82fr) minmax(0, 1.18fr);
  min-height: 390px;
  border-bottom: 1px solid var(--line);
  background: var(--card-bg);
}

.dart-domain-row:last-child {
  border-bottom: 0;
}

.dart-domain-row--reverse {
  grid-template-columns: minmax(0, 1.18fr) minmax(340px, 0.82fr);
}

.dart-domain-row--reverse figure {
  order: 2;
}

.dart-domain-row--reverse > div {
  order: 1;
}

.dart-domain-row figure {
  margin: 0;
  overflow: hidden;
  background: #08090a;
}

.dart-domain-row figure img {
  width: 100%;
  height: 100%;
  min-height: 390px;
  object-fit: cover;
}

.dart-domain-row:first-child figure img {
  object-fit: contain;
  padding: 20px;
}

.dart-domain-row--reverse figure img {
  object-fit: contain;
  padding: 16px;
  background: #f6f6f5;
}

.dart-domain-row > div {
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dart-domain-row h2 {
  margin: 0 0 15px;
  font-size: 29px;
  font-weight: 500;
  line-height: 1.3;
}

.dart-domain-row > div > p:not(.page-label) {
  margin-top: 11px;
  font-size: 14px;
  line-height: 1.82;
}

.dart-member-profile {
  margin: 48px 0 58px;
  padding: 26px 30px;
  border-top: 2px solid var(--dart-orange);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--dart-orange) 6%, var(--card-bg));
}

.dart-member-profile span {
  color: var(--dart-orange);
  font-size: 10px;
  letter-spacing: 0.16em;
}

.dart-member-profile p {
  max-width: 960px;
  margin-top: 11px;
  color: var(--text);
  font-size: 14px;
  font-style: italic;
  line-height: 1.9;
}

.dart-testing {
  padding-top: 50px;
  border-top: 1px solid var(--line);
}

.dart-testing-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1.2fr);
  gap: 26px;
  align-items: stretch;
}

.dart-testing-intro > div {
  padding: 30px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.dart-testing-intro figure,
.dart-testing-media figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}

.dart-testing-intro figure img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.dart-testing figure figcaption {
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  background: var(--card-bg);
}

.dart-testing-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.dart-testing-media img,
.dart-testing-media video {
  width: 100%;
  height: 300px;
  object-fit: cover;
  background: #08090a;
}

.dart-test-video video {
  display: block;
}

.air-dart-closing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: end;
  margin-top: 64px;
  margin-bottom: 64px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.air-dart-closing h2 {
  margin: 0 0 12px;
  font-size: 31px;
  font-weight: 500;
}

.air-dart-closing > div:last-child {
  display: grid;
  justify-items: start;
  gap: 10px;
  min-width: 190px;
  padding-left: 24px;
  border-left: 2px solid var(--dart-orange);
}

@media (max-width: 1480px) {
  .dart-spec-grid {
    grid-template-columns: 1fr;
  }

  .air-dart-rail {
    position: sticky;
    top: 82px;
    left: auto;
    z-index: 12;
    width: min(1080px, calc(100% - 48px));
    margin: 16px auto 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    transform: none;
  }

  .air-dart-rail a {
    min-height: 48px;
    grid-template-columns: auto 25px auto;
    grid-template-rows: 1fr;
    justify-content: center;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .air-dart-rail a:last-child {
    border-right: 0;
  }

  .air-dart-rail a::before {
    right: 0;
    bottom: -1px;
    left: 0;
    width: auto;
    height: 3px;
    transform: scaleX(0);
  }

  .air-dart-rail a.is-active::before {
    height: 3px;
    transform: scaleX(1);
  }

  .air-dart-rail img {
    width: 25px;
    height: 25px;
  }

  .air-dart-rail strong {
    writing-mode: initial;
  }

  .air-dart-aerial,
  .air-dart-dart {
    scroll-margin-top: 154px;
  }
}

@media (max-width: 820px) {
  .air-dart-main .section-block,
  .air-dart-overview,
  .air-dart-dart,
  .air-dart-rail {
    width: calc(100% - 28px);
  }

  .air-dart-rail {
    top: 72px;
  }

  .air-dart-overview,
  .dart-section-heading,
  .dart-hero,
  .dart-route-layout,
  .dart-body-layout,
  .dart-testing-intro,
  .air-dart-closing {
    grid-template-columns: 1fr;
  }

  .air-dart-overview {
    gap: 18px;
    margin-top: 40px;
  }

  .air-dart-aerial-placeholder {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px;
  }

  .air-dart-pending {
    width: fit-content;
  }

  .dart-hero {
    gap: 24px;
    padding: 36px 0;
  }

  .dart-hero-media,
  .dart-hero-media img {
    min-height: 0;
    height: 270px;
  }

  .dart-section-heading {
    gap: 12px;
  }

  .dart-mission-layout,
  .dart-spec-grid,
  .dart-domain-row,
  .dart-domain-row--reverse,
  .dart-testing-media {
    grid-template-columns: 1fr;
  }

  .dart-impact-media,
  .dart-impact-media img {
    min-height: 280px;
  }

  .dart-spec-grid > article {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .dart-launcher-media {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 0.55fr);
  }

  .dart-domain-row figure,
  .dart-domain-row > div,
  .dart-domain-row--reverse figure,
  .dart-domain-row--reverse > div {
    order: initial;
  }

  .dart-domain-row figure img {
    min-height: 0;
    height: 300px;
  }

  .dart-domain-row > div {
    padding: 28px 24px;
  }

  .dart-testing-intro {
    gap: 12px;
  }

  .air-dart-closing {
    gap: 22px;
  }

  .air-dart-closing > div:last-child {
    padding: 18px 0 0;
    border-top: 2px solid var(--dart-orange);
    border-left: 0;
  }
}

@media (max-width: 520px) {
  .air-dart-rail a {
    grid-template-columns: 24px auto;
  }

  .air-dart-rail a > span {
    display: none;
  }

  .dart-mission-grid,
  .dart-route-list,
  .dart-body-media {
    grid-template-columns: 1fr;
  }

  .dart-mission-grid article {
    min-height: auto;
  }

  .dart-spec-grid > article {
    grid-template-columns: 1fr;
  }

  .dart-spec-grid article > div:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .dart-spec-grid h3 {
    margin: 0;
  }

  .dart-launcher-media {
    grid-template-columns: 1fr;
  }

  .dart-body-media {
    grid-template-rows: none;
  }

  .dart-body-media .dart-media-card:first-child {
    grid-row: auto;
  }

  .dart-testing-media img,
  .dart-testing-media video {
    height: 230px;
  }
}

/* Infantry & sentry unit page */
.unit-sentry-page {
  --infantry-accent: #177ca8;
  --infantry-accent-rgb: 23, 124, 168;
  --sentry-accent: #bd642f;
  --sentry-accent-rgb: 189, 100, 47;
  --ground-panel: #f5f6f6;
}

:root[data-theme="dark"] .unit-sentry-page {
  --infantry-accent: #62cfff;
  --infantry-accent-rgb: 98, 207, 255;
  --sentry-accent: #ff9859;
  --sentry-accent-rgb: 255, 152, 89;
  --ground-panel: #151719;
}

.ground-main {
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
}

.ground-main .page-label {
  color: var(--infantry-accent);
}

.ground-overview {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(420px, 1.08fr);
  gap: 64px;
  align-items: end;
  padding: 54px 0 30px;
  border-bottom: 1px solid var(--line);
}

.ground-overview h1 {
  margin: 0;
  font-size: clamp(46px, 5.2vw, 68px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.ground-overview-copy > p {
  max-width: 720px;
  font-size: 15px;
  line-height: 1.85;
}

.ground-overview-pairs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

.ground-overview-pairs span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  color: var(--text);
  font-size: 12px;
}

.ground-overview-pairs span:first-child {
  border-color: color-mix(in srgb, var(--infantry-accent) 48%, var(--line));
}

.ground-overview-pairs span:last-child {
  border-color: color-mix(in srgb, var(--sentry-accent) 48%, var(--line));
}

.ground-overview-pairs img,
.ground-unit-index img,
.ground-rail img {
  object-fit: contain;
  filter: brightness(0);
}

:root[data-theme="dark"] .ground-overview-pairs img,
:root[data-theme="dark"] .ground-unit-index img,
:root[data-theme="dark"] .ground-rail img {
  filter: none;
}

.ground-overview-pairs img {
  width: 22px;
  height: 22px;
}

.ground-rail {
  position: fixed;
  top: 50%;
  left: max(72px, calc(50% - 610px));
  z-index: 13;
  display: grid;
  width: 62px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card-bg) 91%, transparent);
  backdrop-filter: blur(12px);
  transform: translate(-100%, -50%);
}

.ground-rail a {
  position: relative;
  display: grid;
  min-height: 112px;
  grid-template-rows: auto 30px 1fr;
  place-items: center;
  gap: 5px;
  padding: 10px 7px;
  border-bottom: 1px solid var(--line);
  color: var(--subtle);
  transition: color 160ms ease, background-color 160ms ease;
}

.ground-rail a:last-child {
  border-bottom: 0;
}

.ground-rail a::before {
  content: "";
  position: absolute;
  left: -1px;
  width: 3px;
  height: 0;
  background: var(--infantry-accent);
  transition: height 180ms ease;
}

.ground-rail a[data-ground-nav="sentry"]::before {
  background: var(--sentry-accent);
}

.ground-rail a.is-active,
.ground-rail a:hover,
.ground-rail a:focus-visible {
  color: var(--text);
  outline: 0;
}

.ground-rail a[data-ground-nav="infantry"].is-active {
  background: color-mix(in srgb, var(--infantry-accent) 10%, var(--card-bg));
}

.ground-rail a[data-ground-nav="sentry"].is-active {
  background: color-mix(in srgb, var(--sentry-accent) 10%, var(--card-bg));
}

.ground-rail a.is-active::before {
  height: 56px;
}

.ground-rail span {
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 0.12em;
}

.ground-rail img {
  width: 28px;
  height: 28px;
}

.ground-rail strong {
  align-self: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
}

.ground-unit {
  scroll-margin-top: 104px;
  padding-top: 46px;
}

.ground-unit + .ground-unit {
  margin-top: 68px;
  padding-top: 64px;
  border-top: 1px solid var(--line);
}

.ground-unit--sentry .page-label,
.ground-unit--sentry .ground-unit-index,
.ground-unit--sentry .ground-heading .page-label {
  color: var(--sentry-accent);
}

.ground-unit-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(360px, 0.84fr);
  gap: 38px;
  align-items: center;
  padding-bottom: 42px;
  border-bottom: 1px solid var(--line);
}

.ground-unit-hero--sentry {
  grid-template-columns: minmax(0, 1.16fr) minmax(360px, 0.84fr);
}

.ground-unit-copy {
  min-width: 0;
}

.ground-unit-index {
  display: grid;
  grid-template-columns: auto 36px;
  width: fit-content;
  gap: 11px;
  align-items: center;
  margin-bottom: 18px;
  color: var(--infantry-accent);
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.ground-unit-index img {
  width: 36px;
  height: 36px;
}

.ground-unit-copy h2 {
  max-width: 660px;
  margin: 0;
  font-size: clamp(34px, 3.3vw, 46px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.ground-unit-lead {
  max-width: 700px;
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.9;
}

.ground-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.ground-tag-row span {
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--infantry-accent) 50%, var(--line));
  color: var(--infantry-accent);
  font-size: 11px;
}

.ground-unit--sentry .ground-tag-row span {
  border-color: color-mix(in srgb, var(--sentry-accent) 50%, var(--line));
  color: var(--sentry-accent);
}

.ground-hero-media {
  position: relative;
  height: 330px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ground-panel);
}

.ground-hero-media::after {
  content: "";
  position: absolute;
  inset: 46% 0 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.76), transparent);
  pointer-events: none;
}

.ground-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ground-unit--infantry .ground-hero-media img {
  object-position: 50% 62%;
}

.ground-unit--sentry .ground-hero-media img {
  object-position: 50% 54%;
}

.ground-hero-media figcaption {
  position: absolute;
  right: 22px;
  bottom: 18px;
  left: 22px;
  z-index: 1;
  display: flex;
  gap: 20px;
  align-items: baseline;
  justify-content: space-between;
  color: #fff;
  font-size: 12px;
}

.ground-hero-media figcaption span {
  color: var(--infantry-accent);
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.ground-unit--sentry .ground-hero-media figcaption span {
  color: var(--sentry-accent);
}

.ground-hero-media figcaption strong {
  font-weight: 400;
  text-align: right;
}

.ground-armor-note {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
  width: fit-content;
  margin: 18px 0 0;
  padding: 7px 12px 7px 7px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.ground-armor-note img {
  width: 72px;
  height: 48px;
  object-fit: cover;
}

.ground-armor-note figcaption {
  color: var(--muted);
  font-size: 11px;
}

.ground-mission,
.ground-domains,
.ground-growth {
  padding-top: 54px;
}

.ground-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  gap: 48px;
  align-items: end;
  padding-bottom: 24px;
}

.ground-heading h2,
.ground-closing h2 {
  margin: 0;
  font-size: clamp(27px, 3.2vw, 39px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.ground-heading > p {
  font-size: 14px;
  line-height: 1.8;
}

.ground-mission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.ground-mission-grid article {
  position: relative;
  min-height: 190px;
  padding: 26px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--card-bg);
}

.ground-mission-grid article > span,
.ground-domain-card > div > span,
.ground-tactic-grid article > div > span,
.sentry-domain-list article > div:last-child > span {
  color: var(--infantry-accent);
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.ground-mission-grid i {
  position: absolute;
  top: 24px;
  right: 26px;
  color: var(--infantry-accent);
  font-size: 29px;
}

.ground-mission-grid h3 {
  margin: 32px 0 9px;
  font-size: 22px;
  font-weight: 500;
}

.ground-mission-grid p,
.ground-domain-card p,
.ground-tactic-grid p,
.sentry-domain-list p,
.ground-growth-grid p {
  font-size: 13px;
  line-height: 1.78;
}

.ground-domain-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ground-domain-card {
  display: grid;
  grid-template-columns: minmax(180px, 0.76fr) minmax(0, 1.24fr);
  min-height: 272px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.ground-domain-card figure {
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: var(--ground-panel);
}

.ground-domain-card figure img {
  width: 100%;
  height: 100%;
  min-height: 270px;
  object-fit: cover;
  transition: transform 220ms ease;
}

.ground-domain-card:nth-child(1) figure img {
  object-position: 52% 50%;
}

.ground-domain-card:nth-child(3) figure img {
  object-position: 52% 50%;
}

.ground-domain-card:hover figure img,
.ground-tactic-grid article:hover figure img,
.sentry-domain-list article:hover figure img {
  transform: scale(1.025);
}

.ground-domain-card > div {
  padding: 24px 22px;
}

.ground-domain-card h3,
.ground-tactic-grid h3,
.sentry-domain-list h3,
.ground-growth-grid h3 {
  margin: 11px 0 9px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
}

.ground-domain-card ul,
.sentry-domain-list ul {
  display: grid;
  gap: 5px;
  margin: 14px 0 0;
  padding: 13px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.ground-domain-card li,
.sentry-domain-list li {
  position: relative;
  padding-left: 13px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.ground-domain-card li::before,
.sentry-domain-list li::before {
  content: "";
  position: absolute;
  top: 0.64em;
  left: 0;
  width: 4px;
  height: 4px;
  background: var(--infantry-accent);
}

.ground-tactic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.ground-tactic-grid article {
  display: grid;
  grid-template-columns: minmax(360px, 0.86fr) minmax(0, 1.14fr);
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.ground-tactic-grid article + article {
  border-top: 0;
}

.ground-tactic-grid figure {
  width: 100%;
  min-height: 0;
  margin: 0;
  display: grid;
  place-items: center;
  align-self: start;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: var(--ground-panel);
}

.ground-tactic-grid figure img {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  transition: transform 220ms ease;
}

.ground-tactic-grid article:first-child figure img {
  object-position: 54% 50%;
}

.ground-tactic-grid article:last-child figure img {
  object-position: 44% 50%;
}

.ground-tactic-grid article > div {
  padding: 24px 22px;
}

.ground-tactic-grid article > div > span,
.sentry-domain-list article > div:last-child > span {
  color: var(--sentry-accent);
}

.ground-caption {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--subtle);
  font-size: 10px !important;
}

.ground-tactic-grid .text-link {
  margin-top: 13px;
  font-size: 11px;
}

.sentry-domain-list {
  display: grid;
  gap: 14px;
}

.sentry-domain-list article {
  display: grid;
  grid-template-columns: minmax(300px, 0.76fr) minmax(0, 1.24fr);
  min-height: 250px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.sentry-domain-list figure,
.sentry-domain-icon {
  min-height: 250px;
  margin: 0;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--sentry-accent) 7%, var(--ground-panel));
}

.sentry-domain-list figure img {
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
  transition: transform 220ms ease;
}

.sentry-domain-card--mechanical figure img {
  object-position: 50% 62%;
}

.sentry-domain-icon {
  display: grid;
  place-items: center;
}

.sentry-domain-icon i {
  color: var(--sentry-accent);
  font-size: 82px;
}

.sentry-domain-list article > div:last-child {
  align-self: center;
  padding: 28px 32px;
}

.sentry-domain-list li::before {
  background: var(--sentry-accent);
}

.ground-growth-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.ground-growth-grid article {
  position: relative;
  min-height: 220px;
  padding: 23px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--card-bg);
}

.ground-growth-grid article > span {
  color: var(--sentry-accent);
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
}

.ground-growth-grid article > i {
  position: absolute;
  top: 20px;
  right: 20px;
  color: var(--sentry-accent);
  font-size: 27px;
}

.ground-growth-grid h3 {
  margin-top: 43px;
}

.ground-closing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 52px;
  align-items: center;
  margin: 72px 0 0;
  padding: 34px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.ground-closing > div:first-child > p:last-child {
  max-width: 820px;
  margin-top: 11px;
  font-size: 14px;
  line-height: 1.8;
}

.ground-closing > div:last-child {
  display: grid;
  gap: 12px;
  padding-left: 28px;
  border-left: 2px solid var(--sentry-accent);
}

.ground-closing .text-link {
  font-size: 14px;
  white-space: nowrap;
}

@media (max-width: 1480px) {
  .ground-rail {
    position: sticky;
    top: 82px;
    z-index: 12;
    width: 100%;
    margin-top: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    transform: none;
  }

  .ground-rail a {
    min-height: 48px;
    grid-template-columns: auto 25px auto;
    grid-template-rows: none;
    justify-content: center;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .ground-rail a:last-child {
    border-right: 0;
  }

  .ground-rail a::before {
    right: 0;
    bottom: -1px;
    left: 0;
    width: auto;
    height: 3px;
    transform: scaleX(0);
  }

  .ground-rail a.is-active::before {
    height: 3px;
    transform: scaleX(1);
  }

  .ground-rail img {
    width: 25px;
    height: 25px;
  }

  .ground-rail strong {
    writing-mode: initial;
  }

  .ground-unit {
    scroll-margin-top: 154px;
  }
}

@media (max-width: 1120px) {
  .ground-overview,
  .ground-unit-hero,
  .ground-unit-hero--sentry,
  .ground-heading {
    grid-template-columns: 1fr;
  }

  .ground-overview {
    gap: 18px;
  }

  .ground-unit-hero {
    gap: 28px;
  }

  .ground-hero-media {
    height: 380px;
  }

  .ground-domain-card,
  .ground-tactic-grid article {
    grid-template-columns: 1fr;
  }

  .ground-domain-card figure,
  .ground-tactic-grid figure {
    min-height: 190px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .ground-tactic-grid figure {
    aspect-ratio: 16 / 9;
  }

  .ground-domain-card figure img,
  .ground-tactic-grid figure img {
    min-height: 190px;
    height: 190px;
  }

  .ground-tactic-grid figure img {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .ground-tactic-grid article {
    min-height: 0;
  }

  .ground-growth-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .ground-main {
    width: calc(100% - 28px);
  }

  .ground-overview {
    padding-top: 34px;
  }

  .ground-overview h1 {
    font-size: 44px;
  }

  .ground-rail {
    top: 72px;
  }

  .ground-unit {
    padding-top: 34px;
  }

  .ground-unit + .ground-unit {
    margin-top: 46px;
    padding-top: 42px;
  }

  .ground-unit-copy h2 {
    font-size: 35px;
  }

  .ground-hero-media {
    height: 310px;
  }

  .ground-hero-media figcaption {
    display: grid;
    gap: 2px;
  }

  .ground-hero-media figcaption strong {
    text-align: left;
  }

  .ground-mission-grid,
  .ground-domain-grid,
  .ground-tactic-grid {
    grid-template-columns: 1fr;
  }

  .ground-mission,
  .ground-domains,
  .ground-growth {
    padding-top: 42px;
  }

  .ground-heading {
    gap: 10px;
    padding-bottom: 18px;
  }

  .ground-heading h2,
  .ground-closing h2 {
    font-size: 29px;
  }

  .sentry-domain-list article {
    grid-template-columns: 1fr;
  }

  .sentry-domain-list figure,
  .sentry-domain-icon {
    min-height: 210px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .sentry-domain-list figure img {
    min-height: 210px;
    height: 210px;
  }

  .ground-closing {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 52px;
  }

  .ground-closing > div:last-child {
    padding: 18px 0 0;
    border-top: 2px solid var(--sentry-accent);
    border-left: 0;
  }
}

@media (max-width: 520px) {
  .ground-overview-pairs,
  .ground-tag-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ground-overview-pairs span {
    justify-content: center;
  }

  .ground-rail a {
    grid-template-columns: 24px auto;
  }

  .ground-rail a > span {
    display: none;
  }

  .ground-hero-media {
    height: 250px;
  }

  .ground-domain-card > div,
  .ground-tactic-grid article > div,
  .sentry-domain-list article > div:last-child {
    padding: 22px 18px;
  }

  .ground-growth-grid {
    grid-template-columns: 1fr;
  }

  .ground-growth-grid article {
    min-height: 180px;
  }
}

/* Active member and trainee layer pages */
.position-layer-page {
  --position-tone: #357db5;
  --position-tone-rgb: 53, 125, 181;
  --position-panel: #f5f6f7;
}

.position-member-page {
  --position-tone: #a87528;
  --position-tone-rgb: 168, 117, 40;
}

:root[data-theme="dark"] .position-trainee-page {
  --position-tone: #5aa9f8;
  --position-tone-rgb: 90, 169, 248;
  --position-panel: #151719;
}

:root[data-theme="dark"] .position-member-page {
  --position-tone: #e5a44b;
  --position-tone-rgb: 229, 164, 75;
  --position-panel: #181714;
}

.position-layer-main {
  width: min(var(--max-width), calc(100% - 40px));
  margin: 0 auto;
}

.position-layer-main .page-label {
  color: var(--position-tone);
}

.position-layer-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
  grid-template-rows: auto 1fr;
  gap: 18px 38px;
  align-items: start;
  padding: 48px 0 28px;
  border-bottom: 1px solid var(--line);
}

.position-layer-hero > div:first-child {
  grid-column: 1;
  grid-row: 1;
}

.position-layer-hero h1 {
  margin: 0;
  font-size: clamp(42px, 4.8vw, 60px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.position-layer-hero-copy strong {
  display: block;
  color: var(--text);
  font-size: clamp(23px, 2.6vw, 33px);
  font-weight: 500;
  line-height: 1.45;
}

.position-layer-hero-copy {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
}

.position-layer-hero-copy p {
  max-width: 700px;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.8;
}

.position-layer-hero-media {
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 2;
  height: 330px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}

.position-layer-hero-media::after {
  content: "";
  position: absolute;
  inset: 42% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(7, 8, 9, 0.8));
  pointer-events: none;
}

.position-layer-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.position-trainee-page .position-layer-hero-media img {
  object-position: 50% 54%;
}

.position-member-page .position-layer-hero-media img {
  object-position: 50% 48%;
}

.position-layer-hero-media figcaption {
  position: absolute;
  right: 18px;
  bottom: 16px;
  left: 18px;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  color: #fff;
}

.position-layer-hero-media figcaption span {
  color: var(--position-tone);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
}

.position-layer-hero-media figcaption strong {
  font-size: 13px;
  font-weight: 500;
}

.position-layer-nav {
  position: fixed;
  top: 50%;
  left: max(16px, calc((100vw - var(--max-width)) / 2 - 192px));
  z-index: 18;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 164px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card-bg) 92%, transparent);
  box-shadow: 0 18px 48px rgb(0 0 0 / 20%);
  backdrop-filter: blur(12px);
  transform: translateY(-42%);
}

.position-layer-nav::before {
  content: "SECTION INDEX";
  display: block;
  padding: 12px 13px 10px;
  color: var(--position-tone);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.position-layer-nav::after {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 25px;
  height: 25px;
  border-bottom: 1px solid color-mix(in srgb, var(--position-tone) 38%, var(--line));
  border-left: 1px solid color-mix(in srgb, var(--position-tone) 38%, var(--line));
  background: linear-gradient(135deg, transparent 49%, color-mix(in srgb, var(--position-tone) 13%, var(--card-bg)) 50%);
  content: "";
  pointer-events: none;
}

.position-layer-nav a {
  display: grid;
  grid-template-columns: 22px 24px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 52px;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  transition: color 160ms ease, background-color 160ms ease;
}

.position-layer-nav a:first-of-type {
  border-top: 0;
}

.position-layer-nav a:hover,
.position-layer-nav a:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--position-tone) 9%, var(--card-bg));
  outline: 0;
}

.position-layer-nav span {
  color: var(--position-tone);
  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.position-layer-nav i {
  color: var(--position-tone);
  font-size: 20px;
}

.position-layer-section {
  scroll-margin-top: 104px;
  padding-top: 66px;
}

.position-layer-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  gap: 48px;
  align-items: end;
  padding-bottom: 22px;
}

.position-layer-heading h2,
.position-layer-closing h2 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.position-layer-heading > p {
  font-size: 14px;
  line-height: 1.8;
}

.position-expectation-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(520px, 1.14fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.position-expectation-copy {
  display: grid;
  align-content: center;
  gap: 16px;
  min-height: 260px;
  padding: 30px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--card-bg);
}

.position-expectation-copy p {
  font-size: 14px;
  line-height: 1.86;
}

.position-expectation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.position-expectation-grid article {
  display: flex;
  min-height: 260px;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--position-tone) 6%, var(--card-bg));
}

.position-expectation-grid i {
  margin-bottom: auto;
  color: var(--position-tone);
  font-size: 34px;
}

.position-expectation-grid strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 500;
}

.position-expectation-grid span {
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}

.position-hours-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.position-hours-grid--member {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.position-hours-grid article {
  min-height: 220px;
  padding: 26px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.position-hours-grid article > span {
  color: var(--position-tone);
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.position-hours-grid article > strong {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-top: 40px;
  color: var(--text);
  font-family: Arial, sans-serif;
  font-size: clamp(38px, 4vw, 54px);
  font-weight: 500;
  line-height: 1;
}

.position-hours-grid article > strong small {
  color: var(--position-tone);
  font-family: "Noto Serif SC", "Source Han Serif SC", serif;
  font-size: 12px;
  font-weight: 500;
}

.position-hours-grid p {
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.7;
}

.position-hours-baseline {
  border-top: 2px solid var(--position-tone) !important;
  background: color-mix(in srgb, var(--position-tone) 7%, var(--card-bg)) !important;
}

.position-definition-note {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 12px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  background: var(--position-panel);
}

.position-definition-note i {
  color: var(--position-tone);
  font-size: 31px;
}

.position-definition-note strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
}

.position-definition-note p {
  margin-top: 4px;
  font-size: 12px;
}

.position-standard-list {
  border-top: 1px solid var(--line);
}

.position-standard-list article {
  --standard-tone: var(--position-tone);
  display: grid;
  grid-template-columns: 44px 44px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 108px;
  padding: 17px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--card-bg);
}

.position-standard-list article[data-tone="mechanical"] { --standard-tone: #c08a2f; }
.position-standard-list article[data-tone="control"] { --standard-tone: #4c95d9; }
.position-standard-list article[data-tone="hardware"] { --standard-tone: #4aaf6c; }
.position-standard-list article[data-tone="vision"] { --standard-tone: #8b69c6; }
.position-standard-list article[data-tone="operations"] { --standard-tone: #d3577f; }

.position-standard-list article > span {
  color: var(--standard-tone);
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
}

.position-standard-list article > i {
  color: var(--standard-tone);
  font-size: 28px;
}

.position-standard-list h3 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 500;
}

.position-standard-list p {
  max-width: 960px;
  font-size: 13px;
  line-height: 1.68;
}

.position-standard-warning {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 12px;
  padding: 18px 22px;
  border: 1px solid color-mix(in srgb, var(--position-tone) 55%, var(--line));
  background: color-mix(in srgb, var(--position-tone) 8%, var(--card-bg));
}

.position-standard-warning i {
  color: var(--position-tone);
  font-size: 25px;
}

.position-standard-warning strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
}

.position-advice-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.position-advice-list li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 28px;
  min-height: 150px;
  padding: 26px 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--card-bg);
}

.position-advice-list li > span {
  color: var(--position-tone);
  font-family: Arial, sans-serif;
  font-size: 25px;
  line-height: 1.1;
}

.position-advice-list h3 {
  margin: 0 0 7px;
  font-size: 21px;
  font-weight: 500;
}

.position-advice-list p {
  font-size: 13px;
  line-height: 1.8;
}

.member-responsibility-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.member-responsibility-grid article {
  position: relative;
  min-height: 208px;
  padding: 22px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--card-bg);
}

.member-responsibility-grid article > span {
  color: var(--position-tone);
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
}

.member-responsibility-grid article > i {
  position: absolute;
  top: 19px;
  right: 23px;
  color: var(--position-tone);
  font-size: 30px;
}

.member-responsibility-grid h3 {
  margin: 42px 0 8px;
  font-size: 22px;
  font-weight: 500;
}

.member-responsibility-grid p {
  font-size: 13px;
  line-height: 1.8;
}

.member-legacy-quote {
  margin: 12px 0 0;
  padding: 22px 28px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--position-tone);
  background: color-mix(in srgb, var(--position-tone) 7%, var(--card-bg));
  color: var(--text);
  font-size: 17px;
  line-height: 1.7;
}

.member-contribution-framework {
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.member-contribution-heading {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
}

.member-contribution-chapter {
  display: grid;
  grid-template-columns: 158px minmax(0, 1fr);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--card-bg);
}

.member-contribution-index {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 27px 22px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--position-tone) 4%, var(--card-bg));
}

.member-contribution-index span,
.member-contribution-index small,
.member-quota-principle span {
  color: var(--position-tone);
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.member-contribution-index i {
  color: var(--position-tone);
  font-size: 31px;
}

.member-contribution-index small {
  max-width: 108px;
  font-size: 8px;
  line-height: 1.55;
}

.member-contribution-body {
  padding: 27px 31px 25px;
}

.member-contribution-body h3 {
  margin: 0 0 9px;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.4;
}

.member-quota-principle h3 {
  margin: 32px 0 12px;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.4;
}

.member-contribution-lead {
  max-width: 920px;
  font-size: 13px;
  line-height: 1.75;
}

.member-contribution-points {
  display: grid;
  margin: 19px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.member-contribution-points li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 13px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.member-contribution-points li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.member-contribution-points li > span {
  padding-top: 3px;
  color: var(--position-tone);
  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.member-contribution-points h4 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
}

.member-contribution-points p {
  font-size: 13px;
  line-height: 1.75;
}

.member-contribution-chapter--belief {
  background: color-mix(in srgb, var(--position-tone) 5%, var(--card-bg));
}

.member-contribution-quote {
  margin: 17px 0 0;
  padding: 17px 20px;
  border: 1px solid color-mix(in srgb, var(--position-tone) 34%, var(--line));
  border-left: 3px solid var(--position-tone);
  background: color-mix(in srgb, var(--position-tone) 7%, var(--position-panel));
  color: var(--text);
  font-size: 15px;
  line-height: 1.75;
}

.member-contribution-principle {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 17px;
  align-items: center;
  margin-top: 12px;
  padding: 19px 24px;
  border: 1px solid color-mix(in srgb, var(--position-tone) 42%, var(--line));
  background: color-mix(in srgb, var(--position-tone) 8%, var(--position-panel));
}

.member-contribution-principle > i {
  color: var(--position-tone);
  font-size: 32px;
}

.member-contribution-principle strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
}

.member-contribution-principle p {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.7;
}

.member-system-limit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.member-system-limit article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 20px;
  align-items: center;
  min-height: 132px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.member-system-limit article > span {
  align-self: end;
  color: var(--position-tone);
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.member-system-limit article > strong {
  grid-row: 1 / 3;
  grid-column: 2;
  display: flex;
  gap: 7px;
  align-items: baseline;
  color: var(--text);
  font-family: Arial, sans-serif;
  font-size: 44px;
  font-weight: 500;
}

.member-system-limit strong small {
  color: var(--position-tone);
  font-family: "Noto Serif SC", "Source Han Serif SC", serif;
  font-size: 11px;
  font-weight: 500;
}

.member-system-limit p {
  max-width: 390px;
  font-size: 11px;
  line-height: 1.65;
}

.member-quota-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 12px;
  align-items: start;
  margin-top: 12px;
}

.member-quota-table {
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.member-quota-table > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  min-height: 52px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--card-bg);
}

.member-quota-table > div > span,
.member-quota-table > div > strong {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 16px;
}

.member-quota-table > div > strong {
  justify-content: center;
  border-left: 1px solid var(--line);
  color: var(--position-tone);
  font-family: Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
}

.member-quota-table i {
  color: var(--position-tone);
  font-size: 19px;
}

.member-quota-head {
  min-height: 44px !important;
  background: var(--position-panel) !important;
}

.member-quota-head span {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.member-quota-principle {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  min-height: 220px;
  padding: 28px;
  border: 1px solid color-mix(in srgb, var(--position-tone) 55%, var(--line));
  background: color-mix(in srgb, var(--position-tone) 7%, var(--card-bg));
}

.member-quota-principle > i {
  color: var(--position-tone);
  font-size: 42px;
}

.member-quota-principle h3 {
  margin-top: 12px;
  font-size: 21px;
}

.member-quota-principle p {
  font-size: 13px;
  line-height: 1.8;
}

.position-layer-closing {
  margin: 72px 0 0;
  padding: 34px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.position-layer-closing p:last-child {
  max-width: 830px;
  margin-top: 11px;
  font-size: 14px;
  line-height: 1.8;
}

@media (max-width: 1580px) {
  .position-layer-nav {
    position: sticky;
    top: 82px;
    left: auto;
    z-index: 12;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    margin-top: 16px;
    overflow: visible;
    box-shadow: none;
    transform: none;
  }

  .position-layer-nav::before,
  .position-layer-nav::after {
    display: none;
  }

  .position-layer-nav a {
    grid-template-columns: 22px auto auto;
    justify-content: center;
    min-height: 48px;
    padding: 8px 12px;
    border-top: 0;
    border-right: 1px solid var(--line);
    font-size: 12px;
  }

  .position-layer-nav a:last-child {
    border-right: 0;
  }

  .position-layer-section {
    scroll-margin-top: 148px;
  }
}

@media (max-width: 1020px) {
  .position-layer-hero,
  .position-layer-heading,
  .position-expectation-layout,
  .member-quota-layout {
    grid-template-columns: 1fr;
  }

  .position-layer-hero {
    grid-template-rows: auto;
    gap: 18px;
  }

  .position-layer-hero > div:first-child,
  .position-layer-hero-copy,
  .position-layer-hero-media {
    grid-column: auto;
    grid-row: auto;
  }

  .position-layer-hero-media {
    height: 320px;
  }

  .position-layer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .position-layer-nav a:nth-child(2) {
    border-right: 0;
  }

  .position-layer-nav a:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .position-expectation-copy {
    min-height: 0;
  }

  .position-hours-grid,
  .member-responsibility-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .position-hours-grid--member {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .position-hours-grid article:last-child,
  .member-responsibility-grid article:last-child {
    grid-column: 1 / -1;
  }

  .member-quota-principle {
    min-height: 240px;
  }
}

@media (max-width: 720px) {
  .position-layer-main {
    width: calc(100% - 28px);
  }

  .position-layer-hero {
    padding-top: 34px;
  }

  .position-layer-hero h1 {
    font-size: 42px;
  }

  .position-layer-hero-copy strong {
    font-size: 23px;
  }

  .position-layer-hero-media {
    height: 260px;
  }

  .position-layer-hero-media figcaption {
    right: 13px;
    bottom: 12px;
    left: 13px;
  }

  .position-layer-nav {
    top: 72px;
  }

  .position-layer-nav a {
    grid-template-columns: 20px auto;
  }

  .position-layer-nav a > span {
    display: none;
  }

  .position-layer-section {
    scroll-margin-top: 178px;
    padding-top: 48px;
  }

  .position-layer-heading {
    gap: 10px;
    padding-bottom: 18px;
  }

  .position-layer-heading h2,
  .position-layer-closing h2 {
    font-size: 28px;
  }

  .member-contribution-chapter {
    grid-template-columns: 1fr;
  }

  .member-contribution-index {
    grid-template-columns: auto 34px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .member-contribution-index i {
    font-size: 27px;
  }

  .member-contribution-index small {
    max-width: none;
  }

  .member-contribution-body {
    padding: 22px 18px 20px;
  }

  .member-contribution-body h3 {
    font-size: 21px;
  }

  .member-contribution-points li {
    gap: 8px;
    padding: 13px 0;
  }

  .member-contribution-principle {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 17px 18px;
  }

  .member-contribution-principle > i {
    font-size: 28px;
  }

  .position-expectation-grid,
  .position-hours-grid,
  .position-hours-grid--member,
  .member-responsibility-grid,
  .member-system-limit {
    grid-template-columns: 1fr;
  }

  .position-expectation-grid article {
    min-height: 190px;
  }

  .position-hours-grid article:last-child,
  .member-responsibility-grid article:last-child {
    grid-column: auto;
  }

  .position-standard-list article {
    grid-template-columns: 34px 34px minmax(0, 1fr);
    gap: 10px;
    min-height: 100px;
    padding: 16px 18px;
  }

  .position-advice-list li {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    padding: 22px 18px;
  }

  .member-responsibility-grid article {
    min-height: 190px;
  }

  .member-system-limit article {
    grid-template-columns: 1fr auto;
  }

  .member-quota-principle {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .position-layer-closing {
    margin-top: 52px;
  }
}

@media (max-width: 460px) {
  .position-layer-nav a {
    padding: 7px 6px;
    font-size: 11px;
  }

  .position-expectation-grid {
    grid-template-columns: 1fr;
  }

  .position-standard-list article {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .position-standard-list article > i {
    display: none;
  }

  .position-hours-grid article > strong {
    font-size: 39px;
  }

  .member-system-limit article {
    display: block;
  }

  .member-system-limit article > strong {
    margin: 22px 0 12px;
  }
}

/* Designer's Perspective 05: evidence and theory toolbox. */
.journal-evidence-article h4,
.journal-evidence-article h5 {
  margin: 26px 0 12px;
  color: var(--text);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-weight: 600;
  line-height: 1.55;
}

.journal-evidence-article h4 {
  font-size: 18px;
}

.journal-evidence-article h5 {
  font-size: 15px;
}

.journal-article-content .journal-article-resource {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 13px;
}

.journal-article-resource i,
.journal-article-resource a:hover,
.journal-article-resource a:focus-visible {
  color: var(--accent);
}

.journal-evidence-conclusion {
  border-top-color: color-mix(in srgb, var(--accent) 64%, var(--line));
}

.journal-theory-toolbox {
  margin: 38px 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card-bg);
}

.theory-toolbox-heading {
  padding: 26px 28px 22px;
  border-bottom: 1px solid var(--line);
}

.theory-toolbox-heading > span,
.theory-toolbox-panel > header > span,
.journal-evidence-aside > header > span {
  color: var(--accent);
  font: 700 10px/1.2 Arial, sans-serif;
  letter-spacing: .14em;
}

.theory-toolbox-heading h3,
.theory-toolbox-panel > header h3 {
  margin: 9px 0 0;
}

.theory-toolbox-heading p,
.theory-toolbox-panel > header p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.theory-toolbox-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.theory-toolbox-tabs button {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 126px;
  padding: 18px 15px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  text-align: left;
  cursor: pointer;
}

.theory-toolbox-tabs button:last-child {
  border-right: 0;
}

.theory-toolbox-tabs button > span {
  color: var(--accent);
  font: 700 10px/1 Arial, sans-serif;
  letter-spacing: .12em;
}

.theory-toolbox-tabs button > strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.theory-toolbox-tabs button > small {
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.55;
}

.theory-toolbox-tabs button:hover,
.theory-toolbox-tabs button:focus-visible,
.theory-toolbox-tabs button.is-active {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text);
}

.theory-toolbox-tabs button:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -3px;
}

.theory-toolbox-tabs button.is-active {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.theory-toolbox-panel {
  padding: 28px;
}

.theory-toolbox-panel[hidden] {
  display: none;
}

.theory-toolbox-panel > header {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.journal-theory-toolbox figcaption {
  padding: 14px 28px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
  text-align: center;
}

.journal-evidence-aside {
  margin: 48px 0 8px;
  padding: 30px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--card-bg));
}

.journal-evidence-aside > header {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.journal-article-content .journal-evidence-aside > header h2 {
  display: block;
  margin: 10px 0 0;
  font-size: clamp(23px, 3vw, 32px);
  line-height: 1.42;
}

.journal-evidence-aside > header p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.journal-evidence-aside h3 {
  margin-top: 34px;
}

@media (max-width: 900px) {
  .theory-toolbox-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .theory-toolbox-tabs button {
    min-height: 108px;
    border-bottom: 1px solid var(--line);
  }

  .theory-toolbox-tabs button:nth-child(2n) {
    border-right: 0;
  }

  .theory-toolbox-tabs button:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 640px) {
  .theory-toolbox-heading,
  .theory-toolbox-panel,
  .journal-evidence-aside {
    padding: 22px 18px;
  }

  .theory-toolbox-tabs {
    grid-template-columns: 1fr;
  }

  .theory-toolbox-tabs button {
    min-height: 0;
    border-right: 0;
  }

  .journal-theory-toolbox figcaption {
    padding-inline: 18px;
  }
}

/* Keep the journal index return control clear of its wider editorial canvas. */
@media (min-width: 861px) and (max-width: 1500px) {
  body.journal-index-page main {
    width: calc(100% - 130px);
    margin-right: 40px;
    margin-left: 90px;
  }

  body.journal-index-page > .page-back-nav {
    left: 18px;
  }
}

@media (max-width: 860px) {
  body.journal-index-page main {
    width: calc(100% - 92px);
    margin-right: 16px;
    margin-left: 76px;
  }
}