:root {
  --paper: #f3f2ed;
  --ink: #202323;
  --muted: #6c716d;
  --line: #d7d9d1;
  --dark: #242726;
  --accent: #d6ed8a;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --curve: 80px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-padding-top: 80px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid #8ca855;
  outline-offset: 6px;
}
h1,
h2,
h3,
p {
  margin: 0;
}
img,
video {
  display: block;
  max-width: 100%;
}
svg {
  display: block;
  width: 22px;
  height: 22px;
  pointer-events: none;
}
button:disabled {
  cursor: wait;
  opacity: 0.65;
}
.shell {
  width: min(1080px, calc(100% - 110px));
  margin: auto;
}
.micro {
  font-size: 10px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 1.2px;
  color: var(--muted);
}
.soft {
  color: var(--muted);
}
.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skipLink {
  position: fixed;
  top: -90px;
  left: 20px;
  z-index: 300;
  background: var(--accent);
  padding: 14px 20px;
}
.skipLink:focus {
  top: 12px;
}
#page {
  outline: 0;
  min-height: 70vh;
}
.siteHeader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 25px 3%;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 20;
  color: var(--ink);
}
.siteHeader.on-dark {
  color: #fff;
}
.signature > .magnetText {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.signatureMark {
  font:
    italic 28px Georgia,
    serif;
}
.desktopNav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.navLink {
  padding: 15px 13px;
  position: relative;
  font-size: 12px;
}
.navLink:after {
  content: "";
  height: 4px;
  width: 4px;
  border-radius: 50%;
  background: currentColor;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) scale(0);
  transition: transform 0.3s var(--ease);
}
.navLink:hover:after,
.navLink:focus-visible:after,
.navLink.active:after {
  transform: translateX(-50%) scale(1);
}
.mobileMenu {
  display: none;
  background: none;
  border: 0;
  color: inherit;
  font-size: 13px;
  padding: 15px;
}
.mobileMenu > span {
  font-size: 17px;
  margin-right: 5px;
}
.magnetic {
  --magnet-x: 0px;
  --magnet-y: 0px;
  --text-x: 0px;
  --text-y: 0px;
  transform: translate3d(var(--magnet-x), var(--magnet-y), 0);
  transition: transform 0.65s var(--ease);
  position: relative;
  isolation: isolate;
}
.magnetText {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transform: translate3d(var(--text-x), var(--text-y), 0);
  transition: transform 0.6s var(--ease);
  position: relative;
  z-index: 2;
}
.magnetText svg {
  width: 18px;
  height: 18px;
}
.fill {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--accent);
  transform: translateY(105%);
  transition: transform 0.62s var(--ease);
  z-index: 1;
  pointer-events: none;
}
.magnetic:hover > .fill,
.magnetic:focus-visible > .fill {
  transform: translateY(0);
}
.pill,
.round,
.iconButton {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  font-size: 13px;
  overflow: hidden;
  color: var(--ink);
}
.pill {
  min-height: 67px;
  padding: 18px 30px;
  border-radius: 45px;
  gap: 15px;
}
.pill sup {
  align-self: flex-start;
  font-size: 9px;
  margin-top: -5px;
  margin-left: -5px;
}
.round {
  width: 156px;
  height: 156px;
  border-radius: 50%;
  background: var(--dark);
  color: #fff;
  border: 0;
  padding: 20px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
}
.round:hover,
.round:focus-visible {
  color: var(--ink);
}
.round.accent {
  background: var(--accent);
  color: var(--ink);
}
.round.accent > .fill {
  background: #e8f2ce;
}
.iconButton {
  border-radius: 50%;
  width: 67px;
  height: 67px;
}
.iconButton svg {
  width: 24px;
  height: 24px;
}
.selected {
  background: var(--dark) !important;
  color: #fff !important;
  border-color: var(--dark);
}
.selected .fill {
  background: #3b443a;
}
.textLink {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  border: 0;
  padding: 9px 0;
  background: none;
  font-size: 13px;
  position: relative;
}
.textLink:after {
  content: "";
  height: 1px;
  background: currentColor;
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.textLink:hover:after,
.textLink:focus-visible:after {
  transform: scaleX(1);
  transform-origin: left;
}
.textLink.micro {
  font-size: 10px;
}
.textLink svg {
  width: 16px;
  height: 16px;
}
.floatingMenu {
  position: fixed;
  right: 2.5%;
  top: 25px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 0;
  background: var(--dark);
  color: #fff;
  z-index: 60;
  display: grid;
  place-items: center;
  overflow: hidden;
  scale: 0;
  opacity: 0;
  transition:
    scale 0.5s var(--ease),
    opacity 0.35s,
    transform 0.6s var(--ease);
  pointer-events: none;
}
.floatingMenu.visible {
  scale: 1;
  opacity: 1;
  pointer-events: auto;
}
.floatingMenu:hover {
  color: var(--ink);
}
.hamburger {
  width: 23px;
  height: 13px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hamburger i {
  height: 1px;
  width: 23px;
  background: currentColor;
  display: block;
  transition: transform 0.35s;
}
.floatingMenu[aria-expanded="true"] .hamburger i:first-child {
  transform: translateY(6px) rotate(45deg);
}
.floatingMenu[aria-expanded="true"] .hamburger i:last-child {
  transform: translateY(-6px) rotate(-45deg);
}
.hero {
  height: 100svh;
  min-height: 740px;
  max-height: 1100px;
  background: #a2a8a3;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: white;
}
.heroFigure {
  position: absolute;
  bottom: -3%;
  left: 21%;
  height: 93%;
  width: 56%;
  z-index: -1;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}
.heroFigure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.heroNote {
  position: absolute;
  left: 6.8%;
  top: 19%;
  font-size: 13px;
  line-height: 1.9;
  color: #f0f3ed;
  max-width: 240px;
}
.heroNote .micro {
  display: block;
  font-size: 9px;
  color: #eff3eb;
  margin-bottom: 13px;
}
.heroRole {
  position: absolute;
  top: 39%;
  left: 72%;
  right: 3%;
}
.directionArrow {
  display: block;
  font-size: 36px;
  line-height: 1;
  margin-bottom: 26px;
  font-weight: 300;
}
.heroRole h1 {
  font-size: 29px;
  font-weight: 400;
  line-height: 1.5;
}
.heroRole h1 span {
  font-size: 23px;
}
.heroRole .micro {
  font-size: 9px;
  color: #f0f3eb;
  margin-top: 15px;
}
.sideBadge {
  position: absolute;
  top: 39%;
  left: 0;
  border-radius: 0 80px 80px 0;
  background: var(--dark);
  padding: 19px 19px 19px 35px;
  display: flex;
  align-items: center;
  gap: 25px;
  font-size: 12px;
  line-height: 1.6;
}
.sideBadge > span + span {
  height: 48px;
  width: 48px;
  background: #7f8981;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.globe {
  width: 37px;
  height: 37px;
  animation: globe-turn 15s linear infinite;
}
.marquee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10%;
  overflow: visible;
}
.marqueeTrack {
  display: flex;
  width: max-content;
  white-space: nowrap;
  gap: 75px;
  transform: translateX(-80px);
  font-size: clamp(80px, 11vw, 180px);
  letter-spacing: -0.05em;
  line-height: 1.1;
  font-weight: 400;
  will-change: transform;
}
.heroBottom {
  position: absolute;
  bottom: 20px;
  left: 5%;
  right: 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 1px;
}
.heroBottom .textLink {
  font-size: 10px;
}
.introduction {
  display: grid;
  grid-template-columns: 1.8fr 0.75fr;
  gap: 105px;
  padding-top: 125px;
  padding-bottom: 120px;
}
.lineReveal {
  font-weight: 400;
  letter-spacing: -1.8px;
  font-size: clamp(33px, 3.6vw, 48px);
  line-height: 1.55;
}
.lineReveal > span {
  display: block;
  overflow: hidden;
  padding-bottom: 2px;
}
.lineReveal i {
  font-style: normal;
  display: block;
  transform: translateY(115%);
  transition: transform 1s var(--ease);
  will-change: transform;
}
.lineReveal.revealed i {
  transform: none;
}
.lineReveal > span:nth-child(2) i {
  transition-delay: 0.08s;
}
.lineReveal > span:nth-child(3) i {
  transition-delay: 0.16s;
}
.introBody {
  font-size: 14px;
  line-height: 2;
  color: var(--muted);
  margin-top: 35px;
  max-width: 610px;
}
.introSide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding-top: 10px;
}
.introSide > p {
  font-size: 12px;
  line-height: 2;
  color: var(--muted);
  max-width: 210px;
}
.section {
  padding-bottom: 110px;
}
.sectionHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 28px;
}
.sectionHeading h2 {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}
.sectionHeading > span {
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--muted);
}
.focusColumns {
  border-top: 1px solid var(--line);
  padding-top: 35px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
}
.focusColumns h3 {
  font-size: 27px;
  font-weight: 400;
  letter-spacing: -0.8px;
  line-height: 1.5;
  margin: 14px 0;
}
.focusColumns p {
  font-size: 13px;
  line-height: 2;
  color: var(--muted);
  max-width: 420px;
}
.centerButton {
  display: flex;
  justify-content: center;
  margin-top: 55px;
}
.workRow {
  display: grid;
  grid-template-columns: 2fr 1.1fr 0.8fr 0.35fr;
  gap: 30px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 38px 30px;
  position: relative;
  transition:
    padding 0.5s var(--ease),
    color 0.35s,
    background 0.35s;
}
.workRow:last-child {
  border-bottom: 1px solid var(--line);
}
.workName {
  font-size: clamp(26px, 3.9vw, 52px);
  line-height: 1.35;
  letter-spacing: -1.7px;
  transition: transform 0.5s var(--ease);
}
.workKind,
.workStatus,
.workYear {
  font-size: 11px;
  line-height: 1.8;
}
.workYear {
  text-align: right;
}
.workRow:hover,
.workRow:focus-visible {
  color: #8b9289;
  background: #ebece5;
}
.workRow:hover .workName,
.workRow:focus-visible .workName {
  transform: translateX(18px);
}
.mobileArrow {
  display: none;
}
.homeWorks .workRow {
  grid-template-columns: 2fr 1.1fr 0.65fr 0.3fr;
}
.homeWorks .workStatus {
  color: var(--muted);
}
.mediaStrip {
  overflow: hidden;
  padding-bottom: 50px;
}
.stripTrack {
  display: flex;
  gap: 35px;
  width: max-content;
  transform: translateX(var(--strip-x, 0px));
  will-change: transform;
}
.stripTrack > div {
  width: 380px;
  overflow: hidden;
  background: #dfe6d8;
}
.stripTrack img {
  width: 100%;
  height: 265px;
  object-fit: cover;
  transition: scale 0.7s var(--ease);
}
.stripTrack > div:hover img {
  scale: 1.05;
}
.personalNote {
  padding: 45px 0 110px;
}
.personalNote h2 {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 18px;
}
.personalNote p {
  font-size: 14px;
  color: var(--muted);
  line-height: 2;
  margin-bottom: 20px;
}
.footerCurve {
  position: relative;
  background: var(--dark);
  color: #f3f4eb;
  padding-top: 95px;
  border-radius: 50% 50% 0 0 / var(--footer-curve, 80px)
    var(--footer-curve, 80px) 0 0;
  overflow: hidden;
}
.footerInvite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 45px;
  padding-bottom: 55px;
}
.footerInvite > div {
  display: flex;
  gap: 25px;
  align-items: flex-start;
}
.avatarMini {
  height: 65px;
  width: 65px;
  border-radius: 50%;
  background: #a0aaa1;
  overflow: hidden;
  display: block;
  flex-shrink: 0;
}
.avatarMini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 7%;
  scale: 1.45;
}
.footerInvite h2 {
  font-size: clamp(36px, 5vw, 70px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -2px;
}
.footerRound {
  background: var(--accent);
  color: var(--ink);
  position: relative;
  top: 60px;
}
.footerRound .fill {
  background: #edf5d7;
}
.footerLine {
  display: flex;
  align-items: center;
  gap: 25px;
  border-top: 1px solid #5b6657;
  padding: 30px 0 45px;
}
.footerLine .ghost {
  border-color: #68725f;
  color: #f4f4ee;
}
.footerLine .ghost:hover {
  color: var(--ink);
}
.footerBottom {
  display: flex;
  align-items: flex-end;
  gap: 40px;
  justify-content: space-between;
  border-top: 1px solid #4b5447;
  padding: 25px 0 30px;
  font-size: 10px;
  line-height: 1.8;
  color: #e5e9dd;
}
.footerBottom > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.footerBottom .micro {
  color: #a8b4a1;
  font-size: 9px;
}
.footerBottom nav {
  display: flex;
  gap: 20px;
  margin-left: auto;
}
.footerBottom a,
.footerBottom button {
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
  font-size: 10px;
  position: relative;
}
.footerBottom a:after,
.footerBottom button:after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 0.35s;
}
.footerBottom a:hover:after,
.footerBottom button:hover:after {
  transform: scaleX(1);
}
.pageTitle {
  padding-top: 180px;
  padding-bottom: 65px;
}
.pageTitle > .micro {
  display: block;
  margin-bottom: 20px;
}
.pageTitle h1 {
  font-size: clamp(45px, 6.5vw, 88px);
  line-height: 1.18;
  letter-spacing: -3px;
  max-width: 1000px;
}
.pageTitle h1 sup {
  font-size: 20px;
  vertical-align: super;
  letter-spacing: 0;
}
.workControls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  margin-bottom: 65px;
}
.filterGroup {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.filterButton {
  min-height: 65px;
  padding-inline: 25px;
}
.layoutGroup {
  display: flex;
  gap: 8px;
}
.tableHead {
  display: grid;
  grid-template-columns: 2fr 1.1fr 0.8fr 0.35fr;
  gap: 30px;
  padding: 20px 30px 25px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 1px;
}
.tableHead span:last-child {
  text-align: right;
}
.workIndex {
  padding-bottom: 110px;
}
.resultSet {
  transition:
    opacity 0.2s,
    transform 0.4s var(--ease);
  min-height: 100px;
}
.changing {
  opacity: 0.25;
  transform: translateY(7px);
  transition: opacity 0.15s;
}
.gridSet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 65px 45px;
}
.workCard {
  display: block;
}
.cardMedia {
  overflow: hidden;
  background: #dce3d6;
}
.cardMedia img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.43;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.workCard:hover .cardMedia img,
.workCard:focus-visible .cardMedia img {
  transform: scale(1.06);
}
.cardHeading {
  border-bottom: 1px solid var(--line);
  padding: 25px 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.cardHeading h2 {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -1px;
}
.cardHeading > span {
  transition: transform 0.5s var(--ease);
}
.workCard:hover .cardHeading > span {
  transform: translate(5px, -5px);
}
.cardMeta {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding-top: 14px;
  font-size: 10px;
  color: var(--muted);
}
.archiveIndex {
  padding-bottom: 110px;
}
.archiveRow {
  padding-block: 24px;
}
.archiveRow .workName {
  font-size: 27px;
  letter-spacing: -0.8px;
}
.caseTitle {
  padding-bottom: 50px;
}
.caseTitle > .textLink {
  margin-bottom: 28px;
}
.caseTitle h1 {
  margin-bottom: 60px;
  line-height: 1.2;
  font-size: clamp(50px, 7.5vw, 100px);
}
.caseMeta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 55px;
}
.caseMeta > div {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.caseMeta p {
  font-size: 13px;
  line-height: 1.9;
  margin-top: 16px;
}
.caseHeroMedia {
  width: min(1330px, calc(100% - 60px));
  margin: 25px auto 0;
  position: relative;
}
.caseCover {
  height: 650px;
  overflow: hidden;
  background: #dfe5d8;
}
.caseCover img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: translateY(var(--media-offset, 0px)) scale(1.08);
}
.caseAction {
  position: absolute;
  right: 8%;
  top: -80px;
  z-index: 3;
}
.caseAction .round {
  font-size: 11px;
}
.caseStory {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 90px;
  padding: 100px 0;
}
.caseStory h2 {
  font-size: 30px;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: -0.8px;
}
.caseStory p {
  font-size: 13px;
  line-height: 2;
  margin-bottom: 18px;
}
.caseMedia {
  padding-bottom: 100px;
}
.mediaBlock {
  margin-bottom: 65px;
}
.mediaCaption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 9px;
  color: var(--muted);
  padding-bottom: 15px;
  line-height: 1.6;
}
.mediaFrame {
  position: relative;
  background: #23352a;
  overflow: hidden;
  min-height: 220px;
}
.mediaFrame video {
  width: 100%;
  height: auto;
  aspect-ratio: 1.6;
  object-fit: cover;
}
.mediaToggle,
.mediaExpand {
  position: absolute;
  bottom: 20px;
  background: #f3f4e7;
  color: #273329;
  border: 0;
  border-radius: 40px;
  padding: 13px 20px;
  font-size: 11px;
  z-index: 3;
  transition: background 0.2s;
}
.mediaToggle {
  left: 20px;
}
.mediaExpand {
  right: 20px;
  font-size: 19px;
  padding: 9px 17px;
}
.mediaToggle:hover,
.mediaExpand:hover {
  background: var(--accent);
}
.mediaFallback {
  display: none;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.mediaError {
  display: none;
  position: absolute;
  inset: 0;
  background: #1f2b23c9;
  color: white;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  text-align: center;
  padding: 30px;
  font-size: 13px;
}
.mediaError .pill {
  background: var(--accent);
  min-height: 48px;
  border: 0;
}
.media-failed video {
  display: none;
}
.media-failed .mediaFallback {
  display: block;
}
.media-failed .mediaError {
  display: flex;
}
.media-failed .mediaToggle,
.media-failed .mediaExpand {
  display: none;
}
.secondaryMedia {
  width: 80%;
  margin-inline: auto;
}
.nextCase {
  background: #1f2221;
  color: #f3f3eb;
  padding: 85px 0 0;
  text-align: center;
  overflow: hidden;
}
.nextCase > .shell > .micro {
  color: #e9ecdf;
}
.nextCaseLink {
  display: block;
  position: relative;
  padding: 35px 0 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #56604f;
  overflow: hidden;
}
.nextCaseLink h2 {
  font-size: clamp(45px, 7vw, 95px);
  font-weight: 400;
  letter-spacing: -3px;
  transition: transform 0.7s var(--ease);
  position: relative;
  z-index: 1;
}
.nextThumb {
  width: 260px;
  height: 130px;
  overflow: hidden;
  margin: 35px auto -35px;
  transition:
    transform 0.7s var(--ease),
    margin 0.7s var(--ease);
}
.nextThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nextCaseLink:hover h2 {
  transform: translateY(-10px);
}
.nextCaseLink:hover .nextThumb {
  transform: translateY(-20px);
  margin-bottom: -15px;
}
.nextArrow {
  position: absolute;
  right: 8%;
  top: 70px;
}
.nextArrow svg {
  width: 35px;
  height: 35px;
}
.nextCase .centerButton {
  margin: 45px 0 65px;
}
.nextCase .ghost {
  color: white;
  border-color: #60695c;
}
.nextCase .ghost:hover {
  color: var(--ink);
}
.nextCase .footerBottom {
  border: 0;
  font-size: 9px;
  text-align: left;
}
.aboutRule {
  height: 1px;
  background: var(--line);
  position: relative;
  margin-top: 15px;
}
.orbBadge {
  width: 153px;
  height: 153px;
  position: absolute;
  right: 8%;
  top: -76px;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
}
.orbBadge .globe {
  height: 60px;
  width: 60px;
}
.aboutGrid {
  display: grid;
  grid-template-columns: 1fr 2.3fr;
  gap: 70px;
  padding: 110px 0 100px;
}
.aboutGrid > div:first-child {
  font-size: 13px;
  line-height: 2;
}
.aboutGrid p {
  margin-bottom: 23px;
}
.aboutGrid .micro {
  font-size: 9px;
}
.aboutPortrait {
  height: 630px;
  background: #adb5ad;
  overflow: hidden;
}
.aboutPortrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateY(var(--media-offset, 0px)) scale(1.12);
}
.subhead {
  font-size: 38px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 60px;
  letter-spacing: -1px;
}
.threeColumns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 45px;
}
.threeColumns article {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.threeColumns h3 {
  font-size: 27px;
  font-weight: 400;
  margin: 25px 0 18px;
  letter-spacing: -0.7px;
}
.threeColumns p {
  font-size: 13px;
  line-height: 2;
  color: var(--muted);
}
.aboutBanner {
  background: #e3e7dc;
  padding: 90px 0 100px;
}
.aboutBanner h2 {
  font-size: 45px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -1px;
  margin: 25px 0;
}
.aboutBanner p {
  font-size: 13px;
  color: var(--muted);
  line-height: 2;
  max-width: 530px;
  margin-bottom: 25px;
}
.writingPage {
  padding-bottom: 100px;
}
.writingStatement {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  padding: 30px 0 65px;
}
.writingStatement h2 {
  font-size: 31px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.8px;
}
.writingStatement p {
  font-size: 13px;
  color: var(--muted);
  line-height: 2;
}
.writingTopic {
  padding: 35px 0 50px;
  border-top: 1px solid var(--line);
}
.writingTopic > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 30px;
  margin: 20px 0;
}
.writingTopic p {
  font-size: 12px;
  color: var(--muted);
  line-height: 2;
}
.contactTitle {
  padding-bottom: 60px;
}
.contactGrid {
  display: grid;
  grid-template-columns: 1.8fr 0.7fr;
  gap: 105px;
  padding-bottom: 50px;
}
.formDemo {
  font-size: 11px;
  color: #c0c9b9;
  line-height: 1.9;
  margin-bottom: 27px;
  max-width: 570px;
}
.fieldRow {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 18px;
  border-top: 1px solid #596253;
  padding: 32px 0;
  position: relative;
  transition: border-color 0.3s;
}
.fieldNumber {
  font-size: 10px;
  color: #b4bfaa;
  padding-top: 7px;
}
.fieldRow label {
  display: block;
  font-size: 20px;
  line-height: 1.7;
  margin-bottom: 14px;
  transition: color 0.3s;
}
.fieldRow input,
.fieldRow textarea {
  display: block;
  width: 100%;
  resize: vertical;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: #f4f6ec;
  font-size: 19px;
  line-height: 1.8;
  outline-offset: 10px;
  min-height: 36px;
}
.fieldRow textarea {
  min-height: 100px;
}
.fieldRow input::placeholder,
.fieldRow textarea::placeholder {
  color: #8b9686;
  opacity: 1;
}
.fieldRow.focused,
.fieldRow.filled {
  border-color: #b6c6ac;
}
.fieldRow.focused label,
.fieldRow.filled label {
  color: #b1bfaa;
}
.fieldRow.invalid {
  border-color: #e8a89b;
}
.fieldError {
  color: #ffc4b6;
  font-size: 12px;
  margin-top: 12px;
}
.fieldRow [aria-invalid="true"] {
  color: #ffe5dc;
}
.formErrorSummary {
  font-size: 12px;
  line-height: 1.9;
  color: #ffc4b6;
  padding: 15px 0 25px;
}
.formSubmit {
  min-height: 240px;
  position: relative;
  border-top: 1px solid #596253;
  margin-top: 35px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.formSubmit .round {
  margin-top: -1px;
}
.formSubmit #submit-status {
  position: absolute;
  left: 0;
  bottom: 10px;
  font-size: 12px;
  line-height: 1.9;
  max-width: 65%;
  color: #c4d0b9;
}
.contactAside {
  font-size: 12px;
  line-height: 2;
  padding-top: 0;
}
.contactAvatar {
  width: 90px;
  height: 90px;
  overflow: hidden;
  border-radius: 50%;
  background: #929e93;
  margin-bottom: 55px;
}
.contactAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 5%;
  scale: 1.35;
}
.contactAside .directionArrow {
  margin-bottom: 65px;
}
.contactAside > div:not(.contactAvatar) {
  margin-bottom: 45px;
}
.contactAside .micro {
  display: block;
  color: #b5c2ac;
  font-size: 9px;
  margin-bottom: 15px;
}
.contactAside p {
  color: #eef3e7;
  margin-bottom: 10px;
}
.contactAside .textLink {
  font-size: 11px;
  color: #e8f2dc;
}
.simpleBottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  font-size: 9px;
  color: #c3d0b8;
  padding-bottom: 30px;
}
.simpleBottom button {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 9px;
}
.successPage,
.errorPage {
  padding-top: 170px;
  padding-bottom: 120px;
  min-height: 80svh;
}
.successMark {
  font-size: 40px;
  height: 90px;
  width: 90px;
  background: #e0eacb;
  display: grid;
  place-items: center;
  border-radius: 50%;
  margin-bottom: 35px;
  color: #405b32;
}
.successPage h1,
.errorPage h1 {
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1.25;
  margin: 25px 0 30px;
}
.successPage > p,
.errorPage > p {
  font-size: 15px;
  line-height: 2;
  color: var(--muted);
}
.successActions {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 40px;
}
body[data-page="contact"] {
  background: var(--dark);
  color: #f3f5ed;
}
body[data-page="contact"] .pageTitle > .micro {
  color: #bcc8b5;
}
body[data-page="contact"] .lineReveal {
  color: #f3f4ec;
}
.reveal {
  opacity: 0;
  transform: translateY(25px);
  transition:
    opacity 0.85s var(--ease),
    transform 0.85s var(--ease);
}
.reveal.revealed {
  opacity: 1;
  transform: none;
}
.curtain {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: #151917;
  color: #f4f5ed;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(110%);
  transition: transform 0.8s var(--ease);
  pointer-events: auto;
  will-change: transform;
}
.curtain:after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  height: 180px;
  bottom: -80px;
  background: #151917;
  border-radius: 0 0 50% 50%;
  transform: scaleY(1);
  transition: transform 0.8s var(--ease);
  pointer-events: none;
}
.curtain.initial,
.curtain.covering {
  transform: translateY(0);
}
.curtain.leaving {
  transform: translateY(-125%);
}
.curtain.leaving:after {
  transform: scaleY(0.45);
}
.curtain.hidden {
  visibility: hidden;
  pointer-events: none;
}
.curtainLabel {
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative;
  z-index: 1;
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 400;
  letter-spacing: -1px;
}
.curtainLabel > span:first-child {
  font-size: 24px;
}
html[data-phase="covering"] #page,
html[data-phase="intro"] #page {
  pointer-events: none;
}
.menuDialog {
  position: fixed;
  inset: 0 0 0 auto;
  height: 100dvh;
  max-height: 100dvh;
  width: min(570px, 85vw);
  max-width: none;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: #f3f5ed;
  overflow: visible;
}
.menuDialog::backdrop {
  background: #00000035;
}
.menuSurface {
  height: 100%;
  background: var(--dark);
  padding: 105px 70px 35px;
  display: flex;
  flex-direction: column;
  position: relative;
  transform: translateX(120%);
  transition: transform 0.8s var(--ease);
}
.menuSurface:before {
  content: "";
  position: absolute;
  left: -130px;
  top: -10%;
  width: 190px;
  height: 120%;
  border-radius: 50% 0 0 50%;
  background: var(--dark);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.8s var(--ease);
}
.menuDialog.entered .menuSurface {
  transform: translateX(0);
}
.menuDialog.entered .menuSurface:before {
  transform: scaleX(0);
}
.menuClose {
  position: absolute;
  right: 34px;
  top: 24px;
  border: 0;
  border-radius: 50%;
  height: 70px;
  width: 70px;
  background: var(--accent);
  color: var(--ink);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 33px;
  z-index: 3;
}
.menuClose > .fill {
  background: #eaf5d1;
}
.menuCaption {
  font-size: 9px;
  letter-spacing: 1px;
  color: #adb9a4;
  border-bottom: 1px solid #596252;
  padding-bottom: 23px;
  margin-bottom: 22px;
  position: relative;
}
.menuSurface nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.menuLink {
  display: block;
  font-size: clamp(35px, 4vw, 55px);
  line-height: 1.5;
  letter-spacing: -1.6px;
  translate: 65px 0;
  opacity: 0;
  transition:
    translate 0.85s var(--ease),
    opacity 0.5s,
    transform 0.6s var(--ease),
    color 0.3s;
}
.menuLink:nth-child(2) {
  transition-delay: 0.05s;
}
.menuLink:nth-child(3) {
  transition-delay: 0.1s;
}
.menuLink:nth-child(4) {
  transition-delay: 0.15s;
}
.menuLink:nth-child(5) {
  transition-delay: 0.2s;
}
.menuDialog.entered .menuLink {
  translate: 0 0;
  opacity: 1;
}
.menuLink.active:before {
  content: "";
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background: currentColor;
  position: absolute;
  left: -24px;
  top: 50%;
}
.menuLink:hover {
  color: var(--accent);
}
.menuBottom {
  margin-top: auto;
  padding-top: 25px;
  position: relative;
  font-size: 11px;
  line-height: 1.9;
  color: #bdcbb3;
}
.menuBottom > div {
  display: flex;
  gap: 25px;
  border-top: 1px solid #58634f;
  padding-top: 18px;
  margin-top: 25px;
}
.menuBottom button {
  font-size: 11px;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
}
.pointerPreview {
  position: fixed;
  left: 0;
  top: 0;
  width: 340px;
  aspect-ratio: 1.43;
  z-index: 80;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(
      calc(var(--pointer-x, 0px) - 50%),
      calc(var(--pointer-y, 0px) - 50%),
      0
    )
    scale(0.8);
  transition:
    opacity 0.25s,
    scale 0.5s var(--ease);
  overflow: hidden;
  scale: 0.85;
  background: #dae3cf;
  box-shadow: 0 12px 50px #00000014;
}
.pointerPreview.visible {
  opacity: 1;
  scale: 1;
}
.pointerPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pointerPreview > span {
  position: absolute;
  bottom: 15px;
  left: 18px;
  color: white;
  font-size: 11px;
  background: #1c2e2380;
  padding: 5px 10px;
  border-radius: 20px;
}
.pointerBubble {
  position: fixed;
  left: 0;
  top: 0;
  height: 78px;
  width: 78px;
  border-radius: 50%;
  background: var(--accent);
  color: #273225;
  display: grid;
  place-items: center;
  font-size: 11px;
  z-index: 85;
  pointer-events: none;
  opacity: 0;
  scale: 0.4;
  transform: translate3d(
    calc(var(--pointer-x, 0px) - 50%),
    calc(var(--pointer-y, 0px) - 50%),
    0
  );
  transition:
    opacity 0.2s,
    scale 0.5s var(--ease);
}
.pointerBubble.visible {
  opacity: 1;
  scale: 1;
}
.has-context-cursor [data-cursor],
.has-context-cursor [data-cursor] * {
  cursor: none;
}
.toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  translate: -50% 15px;
  z-index: 250;
  padding: 13px 22px;
  max-width: calc(100% - 40px);
  border-radius: 40px;
  background: #d6ed8a;
  color: #253122;
  box-shadow: 0 8px 25px #00000010;
  font-size: 12px;
  line-height: 1.7;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s,
    translate 0.4s var(--ease);
}
.toast.visible {
  opacity: 1;
  translate: -50% 0;
}
.mediaDialog,
.settingsDialog {
  width: min(1100px, 92vw);
  max-width: 92vw;
  max-height: 90dvh;
  padding: 60px 28px 28px;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  border-radius: 4px;
  overflow: auto;
}
.mediaDialog::backdrop,
.settingsDialog::backdrop {
  background: #142019db;
  backdrop-filter: blur(4px);
}
.modalClose {
  position: absolute;
  right: 23px;
  top: 19px;
  background: none;
  border: 0;
  font-size: 13px;
  padding: 7px 0;
}
.expandedMedia video {
  width: 100%;
  max-height: 70dvh;
  background: #25392c;
}
.expandedMedia p {
  font-size: 11px;
  color: var(--muted);
  margin-top: 15px;
  line-height: 1.7;
}
.resourceMode {
  width: min(650px, 92vw);
}
.resourceMessage {
  padding: 15px 20px 35px;
}
.resourceMessage h2 {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.5;
  margin: 15px 0 25px;
  letter-spacing: -1px;
}
.resourceMessage p {
  font-size: 14px;
  color: var(--muted);
  line-height: 2;
  margin-bottom: 18px;
}
.resourceMessage input {
  width: 100%;
  padding: 13px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 13px;
}
.settingsDialog {
  width: min(570px, 92vw);
  padding: 65px 35px 35px;
}
.settingsDialog h2 {
  font-size: 27px;
  font-weight: 400;
  margin-bottom: 18px;
}
.settingsDialog > p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.9;
}
.settingRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 21px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.settingRow:first-of-type {
  margin-top: 20px;
}
.settingRow input {
  accent-color: #4c6b38;
  width: 18px;
  height: 18px;
}
.settingsActions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  margin-top: 25px;
}
.settingsActions .pill {
  font-size: 12px;
  padding: 13px 20px;
  min-height: 45px;
}
.settingsDialog .settingPrivacy {
  margin-top: 23px;
}
.noScript {
  padding: 150px 40px;
  font-size: 18px;
  line-height: 2;
}
@keyframes globe-turn {
  to {
    rotate: 360deg;
  }
}
@media (min-width: 1550px) {
  .shell {
    width: 1180px;
  }
  .introduction {
    padding-top: 150px;
    gap: 130px;
  }
  .lineReveal {
    font-size: 50px;
  }
  .heroRole h1 {
    font-size: 32px;
  }
  .heroRole h1 span {
    font-size: 25px;
  }
  .heroFigure {
    left: 23%;
    width: 53%;
  }
  .pageTitle {
    padding-top: 210px;
  }
}
@media (max-width: 1000px) {
  .shell {
    width: calc(100% - 80px);
  }
  .desktopNav {
    gap: 0;
  }
  .navLink {
    padding-inline: 10px;
  }
  .introduction {
    gap: 50px;
  }
  .lineReveal {
    font-size: 35px;
  }
  .introSide .round {
    width: 140px;
    height: 140px;
  }
  .workRow,
  .tableHead {
    grid-template-columns: 1.8fr 1fr 0.7fr 0.4fr;
    gap: 20px;
    padding-inline: 18px;
  }
  .workName {
    font-size: 37px;
  }
  .caseCover {
    height: 520px;
  }
  .aboutGrid {
    gap: 40px;
    grid-template-columns: 1fr 1.7fr;
  }
  .aboutPortrait {
    height: 500px;
  }
  .contactGrid {
    gap: 60px;
    grid-template-columns: 1.6fr 0.8fr;
  }
  .heroRole {
    left: 70%;
  }
  .heroRole h1 {
    font-size: 23px;
  }
  .heroRole h1 span {
    font-size: 19px;
  }
  .cardHeading h2 {
    font-size: 27px;
  }
  .filterButton {
    padding-inline: 18px;
  }
  .workControls {
    gap: 20px;
  }
}
@media (max-width: 760px) {
  .shell {
    width: calc(100% - 42px);
  }
  .siteHeader {
    padding: 15px 20px;
    height: 77px;
  }
  .signature > .magnetText {
    font-size: 11px;
    gap: 7px;
  }
  .signatureMark {
    font-size: 25px;
  }
  .desktopNav {
    display: none;
  }
  .mobileMenu {
    display: block;
    padding-right: 0;
  }
  .floatingMenu {
    height: 62px;
    width: 62px;
    right: 17px;
    top: 17px;
  }
  .hero {
    height: 100svh;
    min-height: 720px;
    max-height: 950px;
  }
  .heroNote {
    top: 17%;
    left: 24px;
    max-width: 190px;
    font-size: 12px;
  }
  .heroNote .micro {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .heroFigure {
    left: 3%;
    height: 78%;
    width: 100%;
    bottom: 0;
  }
  .heroRole {
    left: auto;
    right: 22px;
    top: 49%;
    max-width: 185px;
  }
  .heroRole h1 {
    font-size: 20px;
  }
  .heroRole h1 span {
    font-size: 15px;
  }
  .heroRole .micro {
    font-size: 7px;
    letter-spacing: 1px;
  }
  .directionArrow {
    font-size: 29px;
    margin-bottom: 18px;
  }
  .sideBadge {
    top: 39%;
    padding: 14px 12px 14px 21px;
    gap: 15px;
    font-size: 10px;
  }
  .sideBadge > span + span {
    height: 33px;
    width: 33px;
  }
  .sideBadge .globe {
    height: 27px;
    width: 27px;
  }
  .marquee {
    bottom: 10%;
  }
  .marqueeTrack {
    font-size: 95px;
    gap: 35px;
    letter-spacing: -0.06em;
  }
  .heroBottom {
    bottom: 18px;
    left: 22px;
    right: 22px;
    font-size: 7px;
    letter-spacing: 0.6px;
  }
  .heroBottom .textLink {
    font-size: 9px;
  }
  .introduction {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 65px;
    padding-bottom: 70px;
  }
  .lineReveal {
    font-size: 27px;
    letter-spacing: -0.7px;
    line-height: 1.7;
  }
  .introBody {
    font-size: 13px;
    line-height: 2;
    margin-top: 25px;
  }
  .introSide {
    flex-direction: row;
    justify-content: space-between;
    gap: 25px;
    padding-top: 0;
  }
  .introSide > p {
    font-size: 11px;
  }
  .introSide .round {
    height: 115px;
    width: 115px;
    font-size: 11px;
    padding: 15px;
  }
  .section {
    padding-bottom: 65px;
  }
  .sectionHeading {
    padding-bottom: 22px;
  }
  .sectionHeading h2 {
    font-size: 11px;
  }
  .sectionHeading > span {
    font-size: 8px;
    letter-spacing: 0.4px;
  }
  .focusColumns {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 25px;
  }
  .focusColumns h3 {
    font-size: 23px;
    margin: 11px 0;
  }
  .focusColumns p {
    font-size: 12px;
  }
  .centerButton {
    margin-top: 35px;
  }
  .pill {
    min-height: 56px;
    padding: 15px 22px;
    font-size: 11px;
  }
  .pill sup {
    font-size: 8px;
  }
  .workRow,
  .homeWorks .workRow {
    grid-template-columns: 1fr auto;
    gap: 6px 15px;
    padding: 26px 0;
  }
  .workName {
    font-size: 29px;
    letter-spacing: -1px;
    grid-column: 1;
    grid-row: 1;
  }
  .workKind {
    font-size: 10px;
    grid-column: 1;
    grid-row: 2;
    color: var(--muted);
  }
  .workStatus {
    font-size: 10px;
    grid-column: 1;
    grid-row: 3;
    color: var(--muted);
  }
  .workYear {
    display: none;
  }
  .workRow .mobileArrow {
    display: grid;
    place-items: center;
    grid-column: 2;
    grid-row: 1/4;
    height: 36px;
    width: 36px;
    border-radius: 50%;
    background: var(--dark);
    color: var(--paper);
  }
  .workRow .mobileArrow svg {
    height: 16px;
    width: 16px;
  }
  .workRow:hover .workName {
    transform: translateX(5px);
  }
  .mediaStrip {
    padding-bottom: 30px;
  }
  .stripTrack {
    gap: 18px;
  }
  .stripTrack > div {
    width: 240px;
  }
  .stripTrack img {
    height: 170px;
  }
  .personalNote {
    padding: 25px 0 65px;
  }
  .personalNote h2 {
    font-size: 20px;
  }
  .personalNote p {
    font-size: 12px;
  }
  .footerCurve {
    padding-top: 60px;
  }
  .footerInvite {
    gap: 20px;
    align-items: flex-start;
    position: relative;
    padding-bottom: 100px;
  }
  .footerInvite > div {
    gap: 15px;
  }
  .avatarMini {
    height: 43px;
    width: 43px;
  }
  .footerInvite h2 {
    font-size: 34px;
    letter-spacing: -1.3px;
  }
  .footerRound {
    height: 105px;
    width: 105px;
    font-size: 11px;
    position: absolute;
    right: 0;
    top: 80px;
  }
  .footerLine {
    padding: 25px 0 35px;
    gap: 20px;
  }
  .footerLine .ghost {
    font-size: 10px;
    min-height: 48px;
    padding-inline: 16px;
  }
  .footerLine .textLink {
    font-size: 11px;
  }
  .footerBottom {
    gap: 22px;
    flex-wrap: wrap;
    padding: 22px 0;
    font-size: 9px;
  }
  .footerBottom .micro {
    font-size: 7px;
  }
  .footerBottom nav {
    margin-left: 0;
    width: 100%;
    gap: 22px;
  }
  .footerBottom nav a,
  .footerBottom nav button {
    font-size: 9px;
  }
  .pageTitle {
    padding-top: 135px;
    padding-bottom: 45px;
  }
  .pageTitle > .micro {
    font-size: 8px;
    letter-spacing: 1px;
    margin-bottom: 18px;
  }
  .pageTitle h1 {
    font-size: 43px;
    line-height: 1.22;
    letter-spacing: -1.6px;
  }
  .pageTitle h1 sup {
    font-size: 14px;
  }
  .workControls {
    margin-bottom: 35px;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .filterGroup {
    gap: 6px;
    flex-wrap: nowrap;
    width: 100%;
    justify-content: space-between;
  }
  .filterButton {
    font-size: 10px;
    padding: 13px 15px;
    min-height: 50px;
  }
  .filterButton sup {
    margin-left: -7px;
    font-size: 7px;
  }
  .layoutGroup {
    margin-left: auto;
    gap: 7px;
  }
  .iconButton {
    height: 47px;
    width: 47px;
  }
  .iconButton svg {
    height: 19px;
    width: 19px;
  }
  .tableHead {
    grid-template-columns: 1fr auto;
    padding: 12px 0 20px;
    font-size: 8px;
  }
  .tableHead span:nth-child(2),
  .tableHead span:nth-child(3) {
    display: none;
  }
  .tableHead span:last-child {
    display: none;
  }
  .tableHead:after {
    content: "查看";
    text-align: right;
  }
  .workIndex {
    padding-bottom: 70px;
  }
  .gridSet {
    grid-template-columns: 1fr;
    gap: 33px;
  }
  .cardHeading {
    padding: 19px 0 15px;
  }
  .cardHeading h2 {
    font-size: 28px;
  }
  .cardMeta {
    font-size: 10px;
  }
  .workCard {
    padding-bottom: 5px;
  }
  .archiveIndex {
    padding-bottom: 65px;
  }
  .archiveRow .workName {
    font-size: 24px;
  }
  .archiveRow {
    padding-block: 23px;
  }
  .caseTitle {
    padding-bottom: 40px;
  }
  .caseTitle > .textLink {
    margin-bottom: 23px;
  }
  .caseTitle h1 {
    font-size: 48px;
    margin-bottom: 35px;
  }
  .caseMeta {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .caseMeta > div {
    padding-top: 12px;
  }
  .caseMeta .micro {
    font-size: 8px;
  }
  .caseMeta p {
    font-size: 12px;
    margin-top: 7px;
  }
  .caseHeroMedia {
    width: calc(100% - 24px);
    margin-top: 25px;
  }
  .caseCover {
    height: 315px;
  }
  .caseAction {
    right: 5%;
    top: -40px;
  }
  .caseAction .round {
    height: 108px;
    width: 108px;
    padding: 14px;
    font-size: 10px;
  }
  .caseAction .magnetText {
    gap: 6px;
  }
  .caseAction svg {
    height: 14px;
    width: 14px;
  }
  .caseStory {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-top: 55px;
    padding-bottom: 40px;
  }
  .caseStory h2 {
    font-size: 25px;
    line-height: 1.6;
  }
  .caseStory p {
    font-size: 12px;
    line-height: 2;
  }
  .caseMedia {
    padding-bottom: 40px;
  }
  .mediaBlock {
    margin-bottom: 35px;
  }
  .mediaCaption {
    font-size: 7px;
    gap: 15px;
  }
  .mediaFrame {
    min-height: 170px;
  }
  .mediaToggle {
    bottom: 12px;
    left: 12px;
    padding: 10px 14px;
    font-size: 9px;
  }
  .mediaExpand {
    bottom: 12px;
    right: 12px;
    padding: 6px 12px;
    font-size: 19px;
  }
  .secondaryMedia {
    width: 100%;
  }
  .mediaError {
    font-size: 11px;
    padding: 15px;
  }
  .mediaError .pill {
    font-size: 10px;
    min-height: 40px;
    padding: 10px 17px;
  }
  .nextCase {
    padding-top: 55px;
  }
  .nextCaseLink {
    padding-top: 25px;
  }
  .nextCaseLink h2 {
    font-size: 44px;
    letter-spacing: -1.5px;
  }
  .nextThumb {
    width: 190px;
    height: 105px;
    margin-top: 28px;
  }
  .nextArrow {
    right: 0;
    top: 40px;
  }
  .nextArrow svg {
    height: 23px;
    width: 23px;
  }
  .nextCase .centerButton {
    margin: 30px 0 35px;
  }
  .nextCase .footerBottom {
    font-size: 8px;
  }
  .aboutRule {
    margin-top: 15px;
  }
  .orbBadge {
    height: 95px;
    width: 95px;
    top: -47px;
    right: 1%;
  }
  .orbBadge .globe {
    width: 43px;
    height: 43px;
  }
  .aboutGrid {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 70px 0 65px;
  }
  .aboutGrid > div:first-child {
    max-width: 300px;
    font-size: 12px;
  }
  .aboutGrid .directionArrow {
    display: none;
  }
  .aboutGrid .micro {
    font-size: 8px;
  }
  .aboutPortrait {
    height: 430px;
  }
  .subhead {
    font-size: 28px;
    margin-bottom: 35px;
  }
  .threeColumns {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .threeColumns article {
    padding-top: 15px;
  }
  .threeColumns h3 {
    font-size: 25px;
    margin: 13px 0;
  }
  .threeColumns p {
    font-size: 12px;
  }
  .aboutBanner {
    padding: 55px 0 65px;
  }
  .aboutBanner h2 {
    font-size: 31px;
    letter-spacing: -0.8px;
  }
  .aboutBanner p {
    font-size: 12px;
  }
  .writingPage {
    padding-bottom: 65px;
  }
  .writingStatement {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-top: 5px;
    padding-bottom: 35px;
  }
  .writingStatement h2 {
    font-size: 26px;
  }
  .writingStatement p {
    font-size: 12px;
  }
  .writingTopic {
    padding: 27px 0 35px;
  }
  .writingTopic > a {
    font-size: 24px;
    line-height: 1.5;
  }
  .writingTopic p {
    font-size: 11px;
  }
  .contactTitle {
    padding-bottom: 40px;
  }
  .contactGrid {
    grid-template-columns: 1fr;
    gap: 45px;
    padding-bottom: 25px;
  }
  .formDemo {
    font-size: 10px;
    line-height: 1.9;
    margin-bottom: 23px;
  }
  .fieldRow {
    grid-template-columns: 23px 1fr;
    gap: 12px;
    padding: 26px 0;
  }
  .fieldNumber {
    font-size: 8px;
    padding-top: 6px;
  }
  .fieldRow label {
    font-size: 16px;
    margin-bottom: 12px;
  }
  .fieldRow input,
  .fieldRow textarea {
    font-size: 16px;
    line-height: 1.8;
  }
  .fieldError {
    font-size: 11px;
  }
  .formErrorSummary {
    font-size: 11px;
  }
  .formSubmit {
    min-height: 190px;
    margin-top: 25px;
  }
  .formSubmit .round {
    height: 120px;
    width: 120px;
    font-size: 11px;
  }
  .formSubmit #submit-status {
    font-size: 10px;
    bottom: 0;
    max-width: 60%;
  }
  .contactAside {
    padding-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    font-size: 11px;
  }
  .contactAside .directionArrow,
  .contactAvatar {
    display: none;
  }
  .contactAside > div:not(.contactAvatar) {
    margin-bottom: 0;
  }
  .contactAside > .textLink {
    grid-column: 1/3;
  }
  .contactAside .micro {
    font-size: 8px;
    margin-bottom: 10px;
  }
  .simpleBottom {
    font-size: 8px;
    gap: 15px;
    flex-wrap: wrap;
    padding-bottom: 25px;
  }
  .simpleBottom button {
    font-size: 8px;
  }
  .successPage,
  .errorPage {
    padding-top: 135px;
    padding-bottom: 75px;
    min-height: 80svh;
  }
  .successPage h1,
  .errorPage h1 {
    font-size: 43px;
    letter-spacing: -1.5px;
  }
  .successPage > p,
  .errorPage > p {
    font-size: 13px;
    line-height: 2;
  }
  .successMark {
    height: 65px;
    width: 65px;
    font-size: 31px;
    margin-bottom: 28px;
  }
  .successActions {
    gap: 12px;
    margin-top: 30px;
  }
  .successActions .pill {
    font-size: 10px;
    padding-inline: 20px;
  }
  .menuDialog {
    width: 100vw;
    max-width: 100vw;
  }
  .menuSurface {
    padding: 105px 35px 30px;
  }
  .menuClose {
    height: 62px;
    width: 62px;
    right: 18px;
    top: 18px;
    font-size: 30px;
  }
  .menuCaption {
    font-size: 8px;
    margin-bottom: 22px;
  }
  .menuLink {
    font-size: 43px;
    letter-spacing: -1px;
    line-height: 1.45;
  }
  .menuLink.active:before {
    height: 5px;
    width: 5px;
    left: -18px;
  }
  .menuBottom {
    font-size: 10px;
    padding-top: 30px;
  }
  .menuBottom > div {
    margin-top: 20px;
    padding-top: 18px;
  }
  .menuBottom button {
    font-size: 10px;
  }
  .curtainLabel {
    font-size: 30px;
    gap: 12px;
  }
  .curtain:after {
    height: 100px;
    bottom: -45px;
  }
  .pointerPreview,
  .pointerBubble {
    display: none !important;
  }
  .mediaDialog {
    width: 96vw;
    max-width: 96vw;
    padding: 55px 15px 20px;
  }
  .expandedMedia p {
    font-size: 10px;
  }
  .modalClose {
    font-size: 12px;
    right: 19px;
    top: 15px;
  }
  .resourceMessage {
    padding: 8px 7px 15px;
  }
  .resourceMessage h2 {
    font-size: 28px;
  }
  .resourceMessage p {
    font-size: 12px;
  }
  .settingsDialog {
    padding: 62px 23px 25px;
  }
  .settingsDialog h2 {
    font-size: 24px;
  }
  .settingRow {
    font-size: 12px;
    gap: 10px;
    padding: 18px 0;
  }
  .settingsActions .pill {
    font-size: 11px;
    min-height: 43px;
  }
  .toast {
    font-size: 11px;
    bottom: 20px;
    white-space: normal;
    text-align: center;
  }
  .reveal {
    transform: translateY(18px);
  }
}
@media (pointer: coarse) {
  .magnetic,
  .magnetText {
    transform: none !important;
  }
  .pointerPreview,
  .pointerBubble {
    display: none !important;
  }
  .has-context-cursor [data-cursor],
  .has-context-cursor [data-cursor] * {
    cursor: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .lineReveal i {
    opacity: 1 !important;
    transform: none !important;
  }
  .heroFigure,
  .caseCover img,
  .aboutPortrait img,
  .stripTrack,
  .marqueeTrack,
  .magnetic,
  .magnetText {
    transform: none !important;
  }
  .pointerPreview,
  .pointerBubble {
    display: none !important;
  }
}
html[data-motion="reduced"] *,
html[data-motion="reduced"] *:before,
html[data-motion="reduced"] *:after {
  animation: none !important;
  transition: none !important;
}
html[data-motion="reduced"] .reveal,
html[data-motion="reduced"] .lineReveal i {
  opacity: 1 !important;
  transform: none !important;
}
html[data-motion="reduced"] .heroFigure,
html[data-motion="reduced"] .caseCover img,
html[data-motion="reduced"] .aboutPortrait img,
html[data-motion="reduced"] .stripTrack,
html[data-motion="reduced"] .marqueeTrack,
html[data-motion="reduced"] .magnetic,
html[data-motion="reduced"] .magnetText {
  transform: none !important;
}
html[data-motion="reduced"] .pointerPreview,
html[data-motion="reduced"] .pointerBubble {
  display: none !important;
}

/* Route headings receive focus for screen readers without a control outline. */
h1[tabindex="-1"]:focus {
  outline: none;
}

/* Personal technical content: open editorial rows, shared across home/about. */
.technicalTopics {
  border-top: 1px solid var(--line);
}
.technicalTopic {
  display: grid;
  grid-template-columns: 45px 1fr 1fr;
  gap: 28px;
  padding: 35px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.technicalTopic > .micro {
  padding-top: 4px;
}
.technicalTopic h3 {
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.7px;
  line-height: 1.5;
  margin-top: 10px;
}
.technicalTopic p {
  color: var(--muted);
  font-size: 13px;
  line-height: 2;
  padding-top: 4px;
}
.featuredContext {
  display: flex;
  gap: 60px;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
}
.featuredContext > p {
  max-width: 590px;
  color: var(--muted);
  font-size: 13px;
  line-height: 2;
}
.featuredContext > a {
  flex-shrink: 0;
}
.writingLead {
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 30px;
  color: var(--muted);
}
.noteLink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid var(--line);
  padding: 27px 0;
}
.noteLink:last-child {
  border-bottom: 1px solid var(--line);
}
.noteLink h3 {
  font-size: 25px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 9px;
  transition: transform 0.4s var(--ease);
}
.noteLink p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.9;
}
.noteLink > span {
  flex-shrink: 0;
  transition: transform 0.4s var(--ease);
}
.noteLink:hover h3,
.noteLink:focus-visible h3 {
  transform: translateX(7px);
}
.noteLink:hover > span,
.noteLink:focus-visible > span {
  transform: translate(4px, -4px);
}
.aboutLinks {
  display: flex;
  gap: 35px;
  flex-wrap: wrap;
}
.technicalNote {
  border-top: 1px solid var(--line);
  padding: 40px 0 45px;
  scroll-margin-top: 95px;
}
.technicalNote h2 {
  font-size: 31px;
  font-weight: 400;
  letter-spacing: -0.7px;
  line-height: 1.5;
  margin: 15px 0 17px;
}
.technicalNote > p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
  max-width: 760px;
}
.technicalNote ul {
  padding-left: 20px;
  margin: 22px 0 0;
  max-width: 780px;
}
.technicalNote li {
  padding-left: 5px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 2;
}
@media (max-width: 760px) {
  .technicalTopic {
    grid-template-columns: 23px 1fr;
    gap: 14px;
    padding: 25px 0;
  }
  .technicalTopic h3 {
    font-size: 23px;
  }
  .technicalTopic p {
    grid-column: 2;
    font-size: 12px;
    padding-top: 0;
  }
  .technicalTopic .micro {
    font-size: 8px;
    letter-spacing: 0.6px;
  }
  .featuredContext {
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
    margin-top: 22px;
  }
  .featuredContext > p {
    font-size: 12px;
  }
  .writingLead {
    font-size: 14px;
    margin-bottom: 23px;
  }
  .noteLink {
    gap: 15px;
    padding: 23px 0;
  }
  .noteLink h3 {
    font-size: 22px;
  }
  .noteLink p {
    font-size: 11px;
  }
  .technicalNote {
    padding: 30px 0;
  }
  .technicalNote h2 {
    font-size: 26px;
  }
  .technicalNote > p,
  .technicalNote li {
    font-size: 13px;
  }
}

/* Astarx: mechanism-led project presentation. */
.astarxTitle > .micro {
  display: block;
  margin: 10px 0 20px;
}
.astarxTitle h1 {
  font-size: clamp(90px, 15vw, 190px);
  letter-spacing: -0.065em;
  margin-bottom: 65px;
}
.capabilitiesSection {
  padding-bottom: 105px;
}
.mechanismShowcase {
  --showcase-progress: 0%;
}
.showcaseTabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  margin-bottom: 25px;
  overflow-x: auto;
  gap: 5px;
  scrollbar-width: thin;
}
.showcaseTabs button {
  white-space: nowrap;
  border: 0;
  background: transparent;
  padding: 21px 19px;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  position: relative;
}
.showcaseTabs button > span {
  font-size: 8px;
  opacity: 0.55;
}
.showcaseTabs button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 2px;
  left: 18px;
  right: 18px;
  background: var(--ink);
}
.showcaseTabs button[aria-selected="false"] {
  color: var(--muted);
}
.showcasePanel {
  color: #f1f2df;
  background: #192a21;
  overflow: hidden;
  position: relative;
}
.showcaseHeading {
  padding: 40px 42px 0;
}
.showcaseHeading .micro {
  color: #acc19a;
  font-size: 9px;
  letter-spacing: 2px;
}
.showcaseHeading h2 {
  font-size: clamp(24px, 3.5vw, 43px);
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: -1.4px;
  margin-top: 15px;
}
.showcaseDiagram {
  margin-top: 5px;
}
.mechanismSvg {
  width: 100%;
  height: auto;
  display: block;
  color: #d7e9be;
}
.sceneWindow {
  fill: #1f3428;
  stroke: #829574;
  stroke-width: 1.3;
}
.sceneWindow circle {
  fill: #91a779;
  stroke: none;
}
.sceneWindow path {
  stroke: #78906c;
}
.sceneNode rect {
  fill: #2c4634;
  stroke: #54714a;
  stroke-width: 1.3;
  transition:
    fill 0.7s,
    stroke 0.7s;
}
.sceneNode.active rect {
  fill: #d6ed8a;
  stroke: #d6ed8a;
}
.sceneLabel {
  fill: #ecf2df;
  font:
    26px Arial,
    "PingFang SC",
    sans-serif;
  transition: fill 0.7s;
}
.sceneSmall {
  fill: #a5ba98;
  font:
    14px Arial,
    "PingFang SC",
    sans-serif;
  letter-spacing: 1px;
}
.sceneNode.active .sceneLabel {
  fill: #263823;
}
.sceneNode.active .sceneSmall {
  fill: #49623d;
}
.sceneWire {
  fill: none;
  stroke: #6d8d5e;
  stroke-width: 2;
  opacity: 0.55;
}
.sceneFlow {
  fill: none;
  stroke: #d6ed8a;
  stroke-width: 5;
  stroke-dasharray: 3 45;
  stroke-linecap: round;
  animation: flow-move 3.5s linear infinite;
  opacity: 0.9;
}
.sceneCore {
  fill: #d6ed8a;
}
.sceneCoreText {
  font:
    32px Arial,
    sans-serif;
  fill: #243720;
  letter-spacing: 1px;
}
.sceneCoreSub {
  font:
    14px Arial,
    "PingFang SC",
    sans-serif;
  fill: #48613a;
}
.sceneOrbit {
  fill: none;
  stroke: #a2bd7d;
  stroke-width: 1;
  stroke-dasharray: 6 8;
  transform-origin: 600px 320px;
  animation: globe-turn 22s linear infinite;
}
.sceneLine {
  fill: none;
  stroke: #87a07b;
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.5;
}
.scenePulse circle {
  fill: #688454;
  transition: fill 0.5s;
}
.scenePulse.active circle {
  fill: #d6ed8a;
}
.scenePulse path {
  fill: none;
  stroke: #20331e;
  stroke-width: 2;
}
.sceneLayout rect {
  fill: #344c39;
  stroke: #617b53;
  stroke-width: 1;
  transition: fill 0.6s;
}
.sceneLayout.active rect {
  fill: #68834e;
}
.sceneBadge rect {
  fill: #2b4732;
  stroke: #7d9769;
}
.sceneBadge text {
  fill: #c2d6ad;
  font:
    14px Arial,
    "PingFang SC",
    sans-serif;
}
.sceneBadge.active rect {
  fill: #d6ed8a;
}
.sceneBadge.active text {
  fill: #263823;
}
.sceneTerminal text {
  fill: #809c6b;
  font:
    22px monospace,
    "PingFang SC";
  transition: fill 0.5s;
}
.sceneTerminal rect {
  fill: #577248;
  opacity: 0.3;
}
.sceneTerminal.active text {
  fill: #d6ed8a;
}
.sceneTerminal.active rect {
  fill: #d6ed8a;
  opacity: 1;
}
.showcaseTimeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 0 40px;
}
.showcaseTimeline button {
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid #465d3e;
  padding: 15px 0;
  color: #90a781;
  display: flex;
  gap: 8px;
  font-size: 11px;
  transition:
    color 0.4s,
    border-color 0.4s;
}
.showcaseTimeline button > span:first-child {
  font-size: 9px;
}
.showcaseTimeline button[aria-pressed="true"] {
  border-color: #d6ed8a;
  color: #e8f4c4;
}
.showcaseControls {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px 40px 28px;
  font-size: 10px;
}
.showcaseControls button {
  background: #edf1df;
  border: 0;
  border-radius: 50px;
  padding: 14px 20px;
  color: #2c3926;
  font-size: 11px;
}
.showcaseControls button:last-child:not(:first-child) {
  margin-left: auto;
  background: transparent;
  color: #e9f0da;
  border: 1px solid #627754;
}
.showcaseStep {
  color: #9ab086;
  font-variant-numeric: tabular-nums;
}
.showcaseProgress {
  height: 2px;
  background: #33482c;
}
.showcaseProgress > span {
  display: block;
  height: 100%;
  background: #d6ed8a;
  width: var(--showcase-progress);
}
.showcaseDescription {
  display: flex;
  align-items: flex-start;
  gap: 45px;
  justify-content: space-between;
  padding: 22px 0;
}
.showcaseDescription p {
  font-size: 13px;
  line-height: 2;
  color: var(--muted);
  max-width: 640px;
}
.showcaseDescription > span {
  font-size: 9px;
  line-height: 1.8;
  color: var(--muted);
  flex-shrink: 0;
  padding-top: 3px;
}
[data-playing="false"] .sceneFlow,
[data-playing="false"] .sceneOrbit {
  animation-play-state: paused;
}
.showcaseMode {
  width: min(1400px, 96vw);
  max-width: 96vw;
  padding: 55px 25px 20px;
}
.expandedShowcase .showcaseHeading {
  padding-top: 25px;
}
.expandedShowcase .showcaseHeading h2 {
  font-size: 30px;
}
.expandedShowcase .showcaseDiagram {
  max-width: 900px;
  margin: auto;
}
@keyframes flow-move {
  to {
    stroke-dashoffset: -192;
  }
}
/* Full Wiki articles: body text and original diagrams, no content rewriting. */
.articleTop {
  padding-top: 145px;
  padding-bottom: 45px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
.articleLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 65px;
  align-items: start;
  padding-bottom: 80px;
}
.articleBody {
  min-width: 0;
  font-size: 16px;
  line-height: 2;
  overflow-wrap: anywhere;
}
.articleBody h1 {
  font-size: 43px;
  line-height: 1.45;
  letter-spacing: -1.5px;
  margin: 0 0 45px;
  font-weight: 500;
}
.articleBody h2 {
  font-size: 28px;
  line-height: 1.55;
  margin: 55px 0 25px;
  font-weight: 500;
}
.articleBody h3 {
  font-size: 23px;
  line-height: 1.55;
  margin: 38px 0 20px;
  font-weight: 500;
}
.articleBody h4 {
  font-size: 18px;
  margin: 30px 0 15px;
}
.articleBody p {
  margin: 0 0 22px;
}
.articleBody ul,
.articleBody ol {
  padding-left: 25px;
  margin: 0 0 25px;
}
.articleBody li {
  padding-left: 3px;
  margin-bottom: 8px;
}
.articleBody a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.articleBody blockquote {
  margin: 28px 0;
  padding: 15px 22px;
  border-left: 3px solid #a5ba80;
  background: #e9ece1;
  color: #536047;
  font-size: 14px;
}
.articleBody blockquote p:last-child {
  margin: 0;
}
.articleBody code {
  font:
    0.83em ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  background: #e5e8dd;
  padding: 2px 5px;
  border-radius: 3px;
  overflow-wrap: anywhere;
}
.articleBody pre {
  background: #232b23;
  color: #e4edd8;
  padding: 25px;
  margin: 30px 0;
  overflow: auto;
  border-radius: 5px;
  line-height: 1.65;
}
.articleBody pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: 12px;
  white-space: pre;
  overflow-wrap: normal;
}
.articleBody table {
  display: block;
  max-width: 100%;
  overflow: auto;
  border-collapse: collapse;
  font-size: 13px;
  margin: 25px 0;
}
.articleBody th,
.articleBody td {
  padding: 10px 13px;
  border: 1px solid var(--line);
  text-align: left;
}
.articleBody hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 40px 0;
}
.articleFigure {
  margin: 30px 0;
}
.articleFigure button,
.articleImageButton {
  border: 0;
  padding: 0;
  display: block;
  background: white;
  width: 100%;
  cursor: zoom-in;
}
.articleFigure img,
.articleImageButton img {
  width: 100%;
  height: auto;
  max-width: 100%;
}
.articleContents {
  position: sticky;
  top: 95px;
  max-height: calc(100vh - 125px);
  overflow-y: auto;
  font-size: 10px;
}
.articleContents > .micro {
  display: block;
  margin-bottom: 18px;
}
.articleContents a {
  display: block;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 12px;
}
.articleContents a:hover {
  color: var(--ink);
}
.articleContents .tocLevel3 {
  padding-left: 12px;
  font-size: 9px;
}
.articleNext {
  padding: 35px 0 90px;
  border-top: 1px solid var(--line);
}
.articleNext > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  font-size: 26px;
  line-height: 1.6;
  margin: 18px 0;
}
.articleNext svg {
  flex-shrink: 0;
}
.articleImageMode {
  width: min(1350px, 96vw);
  max-width: 96vw;
}
.articleImageMode img {
  width: 100%;
  height: auto;
}
.curtainLabel {
  max-width: 90vw;
  text-align: center;
}
@media (max-width: 760px) {
  .astarxTitle h1 {
    font-size: 100px;
    margin-bottom: 40px;
  }
  .capabilitiesSection {
    padding-bottom: 55px;
  }
  .showcaseTabs {
    margin-bottom: 15px;
    gap: 0;
  }
  .showcaseTabs button {
    font-size: 12px;
    padding: 17px 14px;
  }
  .showcaseHeading {
    padding: 25px 20px 0;
  }
  .showcaseHeading h2 {
    font-size: 23px;
    letter-spacing: -0.5px;
  }
  .showcaseHeading .micro {
    font-size: 7px;
    letter-spacing: 1px;
  }
  .showcaseDiagram {
    overflow-x: auto;
    padding-top: 10px;
  }
  .mechanismSvg {
    min-width: 530px;
  }
  .showcaseTimeline {
    padding: 0 17px;
    gap: 7px;
  }
  .showcaseTimeline button {
    flex-direction: column;
    gap: 5px;
    font-size: 9px;
    line-height: 1.5;
    padding: 12px 0;
  }
  .showcaseControls {
    padding: 12px 17px 20px;
    gap: 12px;
  }
  .showcaseControls button {
    font-size: 10px;
    padding: 12px 15px;
    min-height: 44px;
  }
  .showcaseDescription {
    display: block;
    padding: 18px 0;
  }
  .showcaseDescription p {
    font-size: 12px;
  }
  .showcaseDescription > span {
    display: block;
    font-size: 8px;
    margin-top: 10px;
  }
  .showcaseMode {
    padding: 55px 12px 15px;
  }
  .expandedShowcase .showcaseHeading h2 {
    font-size: 23px;
  }
  .articleTop {
    padding-top: 110px;
    padding-bottom: 30px;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .articleLayout {
    display: block;
    padding-bottom: 45px;
  }
  .articleContents {
    display: none;
  }
  .articleBody {
    font-size: 15px;
    line-height: 1.95;
  }
  .articleBody h1 {
    font-size: 30px;
    letter-spacing: -0.7px;
    margin-bottom: 30px;
  }
  .articleBody h2 {
    font-size: 25px;
    margin-top: 38px;
  }
  .articleBody h3 {
    font-size: 21px;
  }
  .articleBody pre {
    padding: 17px;
  }
  .articleBody pre code {
    font-size: 11px;
  }
  .articleNext {
    padding-bottom: 55px;
  }
  .articleNext > a {
    font-size: 22px;
  }
  .curtainLabel {
    font-size: 24px;
  }
}

@media (max-width: 760px) {
  .showcaseDiagram::after {
    content: "← 横向滑动查看完整图示 →";
    display: block;
    font-size: 9px;
    letter-spacing: 1px;
    color: #a0b38e;
    text-align: center;
    padding: 6px 12px 18px;
    position: sticky;
    left: 0;
  }
}
.articleFigure img {
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}
.articleImageMode img {
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Approved personal hero artwork: preserve all four companions and the hand action. */
.heroAi {
  background: #96a4a1;
}
.heroAi .heroFigure {
  left: 0;
  bottom: 0;
  top: 80px;
  width: 100%;
  height: auto;
  display: flex;
  align-items: flex-end;
}
.heroAi .heroFigure img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: left bottom;
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 9%),
    linear-gradient(to right, #000 78%, transparent 100%);
  mask-composite: intersect;
}
.heroAi .sideBadge {
  display: none;
}
.heroAi .heroNote {
  top: 108px;
  left: 4.5%;
  max-width: 260px;
  font-size: 12px;
}
.heroAi .heroRole {
  top: 31%;
  left: 73%;
  right: 3%;
  max-width: none;
}
.heroAi .heroRole h1 {
  font-size: clamp(25px, 2.2vw, 36px);
}
.heroAi .heroRole h1 span {
  font-size: clamp(18px, 1.55vw, 25px);
}
.heroAi .marquee {
  bottom: 49px;
}
.heroAi .marqueeTrack {
  font-size: clamp(72px, 8vw, 130px);
}
.heroAi .heroBottom .textLink {
  padding: 12px 0;
}
.heroAi .heroBottom {
  bottom: 10px;
}
@media (max-width: 760px) {
  .heroAi {
    min-height: 740px;
    max-height: 950px;
  }
  .heroAi .heroNote {
    display: none;
  }
  .heroAi .heroRole {
    top: 110px;
    left: 22px;
    right: 22px;
    max-width: none;
  }
  .heroAi .heroRole .directionArrow {
    display: none;
  }
  .heroAi .heroRole h1 {
    font-size: 29px;
    line-height: 1.45;
  }
  .heroAi .heroRole h1 span {
    font-size: 18px;
  }
  .heroAi .heroRole .micro {
    margin-top: 12px;
    font-size: 8px;
  }
  .heroAi .heroFigure {
    top: 34%;
    bottom: auto;
    left: 0;
    height: auto;
    width: 100%;
    display: block;
  }
  .heroAi .heroFigure img {
    display: block;
    width: 145%;
    max-width: none;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: left top;
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 9%,
      #000 89%,
      transparent 100%
    );
    mask-composite: add;
  }
  .heroAi .marquee {
    bottom: 85px;
  }
  .heroAi .marqueeTrack {
    font-size: 62px;
  }
  .heroAi .heroBottom {
    bottom: 15px;
  }
}
@media (max-width: 760px) {
  .heroAi .heroFigure {
    width: min(100%, 460px);
    left: max(0px, calc((100% - 460px) / 2));
  }
}
@media (max-width: 760px) {
  .heroAi .heroFigure img {
    mask-image:
      linear-gradient(
        to bottom,
        transparent 0%,
        #000 9%,
        #000 89%,
        transparent 100%
      ),
      linear-gradient(
        to right,
        transparent 0%,
        #000 4%,
        #000 72%,
        transparent 100%
      );
    mask-composite: intersect;
  }
}

/* Personal homepage: an introduction, then four quiet collection entries. */
.homeIntroduction {
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: clamp(48px, 6vw, 96px);
  padding-top: 112px;
  padding-bottom: 72px;
}
.homeIntroduction .lineReveal {
  font-size: clamp(32px, 3.3vw, 46px);
  line-height: 1.55;
  letter-spacing: -0.035em;
}
.homeIntroduction .introSide {
  align-items: flex-start;
  gap: 32px;
  padding-top: 5px;
}
.homeIntroduction .introSide > p {
  max-width: 300px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink);
}
.homeIntroduction .round {
  width: 160px;
  height: 160px;
}
.portfolioSection {
  padding-bottom: 150px;
}
.portfolioSection .sectionHeading {
  padding-bottom: 35px;
}
.portfolioRow {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(180px, 0.45fr) 30px;
  align-items: center;
  gap: 24px;
  min-height: 190px;
  padding: 40px 14px;
  border-top: 1px solid var(--line);
  transition: color 0.35s;
}
.portfolioRow:last-child {
  border-bottom: 1px solid var(--line);
}
.portfolioNumber {
  color: var(--muted);
  align-self: center;
}
.portfolioRow h3 {
  font-weight: 400;
  font-size: clamp(36px, 5.3vw, 78px);
  letter-spacing: -0.045em;
  line-height: 1.35;
  transition: transform 0.5s var(--ease);
}
.portfolioKind {
  font-size: 14px;
  line-height: 1.8;
}
.portfolioArrow {
  width: 26px;
  transition: transform 0.5s var(--ease);
}
.portfolioRow:hover {
  color: var(--muted);
}
.portfolioRow:hover h3 {
  transform: translateX(16px);
}
.portfolioRow:hover .portfolioArrow {
  transform: rotate(45deg);
}
.portfolioRow:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 5px;
}
.collectionTitle .textLink {
  margin-bottom: 34px;
  display: inline-flex;
}
.collectionLead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  margin-bottom: 65px;
}
.collectionLead h2 {
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 400;
}
.collectionLead p,
.smallProjectList p,
.collectionStatus {
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
}
.smallProjectList {
  border-top: 1px solid var(--line);
}
.smallProjectList article {
  display: grid;
  grid-template-columns: 140px 1fr 210px;
  gap: 30px;
  align-items: center;
  padding: 60px 0;
  border-bottom: 1px solid var(--line);
}
.smallProjectList h2 {
  font-size: clamp(30px, 4vw, 60px);
  font-weight: 400;
  letter-spacing: -0.04em;
}
.lifeAlbum {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.albumSlot {
  background: #e5e7e1;
  min-height: 370px;
  position: relative;
  padding: 35px;
  overflow: hidden;
}
.albumSlot:last-child {
  background: #d9dfd2;
}
.albumSlot h2 {
  font-size: 38px;
  font-weight: 400;
  margin-top: 12px;
}
.albumMark {
  position: absolute;
  right: 25px;
  bottom: -55px;
  font-size: 280px;
  line-height: 1;
  font-weight: 200;
  color: #aab5a5;
}
.collectionStatus {
  margin-top: 25px;
}
@media (max-width: 1000px) {
  .homeIntroduction {
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 40px;
  }
  .homeIntroduction .introSide > p {
    font-size: 13px;
  }
  .homeIntroduction .round {
    width: 150px;
    height: 150px;
  }
  .portfolioRow {
    grid-template-columns: 25px minmax(0, 1fr) minmax(140px, 0.45fr) 24px;
    gap: 16px;
    min-height: 155px;
  }
  .portfolioKind {
    font-size: 12px;
  }
}
@media (max-width: 760px) {
  .homeIntroduction {
    grid-template-columns: 1fr;
    gap: 35px;
    padding-top: 75px;
    padding-bottom: 65px;
  }
  .homeIntroduction .lineReveal {
    font-size: clamp(27px, 5.5vw, 36px);
    line-height: 1.55;
  }
  .homeIntroduction .introSide {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding-top: 0;
  }
  .homeIntroduction .introSide > p {
    max-width: 34em;
    font-size: 14px;
  }
  .homeIntroduction .round {
    flex-shrink: 0;
    width: 112px;
    height: 112px;
    font-size: 12px;
  }
  .portfolioSection {
    padding-bottom: 90px;
  }
  .portfolioRow {
    grid-template-columns: 22px minmax(0, 1fr) 22px;
    gap: 12px;
    padding: 30px 0;
    min-height: 130px;
  }
  .portfolioRow h3 {
    grid-column: 2;
    font-size: clamp(29px, 6.8vw, 46px);
  }
  .portfolioNumber {
    grid-row: 1;
    font-size: 9px;
  }
  .portfolioKind {
    grid-column: 2;
    font-size: 11px;
  }
  .portfolioArrow {
    grid-row: 1 / 3;
    grid-column: 3;
    width: 22px;
  }
  .portfolioRow:hover h3 {
    transform: none;
  }
  .collectionLead {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 40px;
  }
  .smallProjectList article {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 35px 0;
  }
  .lifeAlbum {
    grid-template-columns: 1fr;
  }
  .albumSlot {
    min-height: 300px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .portfolioRow,
  .portfolioRow h3,
  .portfolioArrow {
    transition: none;
  }
}
html[data-motion="reduced"] .portfolioRow,
html[data-motion="reduced"] .portfolioRow h3,
html[data-motion="reduced"] .portfolioArrow {
  transition: none;
}
.personalFooter {
  background: var(--dark);
  color: var(--paper);
  padding: 65px 0 30px;
}
.personalFooter .micro {
  color: #acb6ac;
}
.personalSignoff {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  padding: 35px 0 60px;
}
.personalSignoff h2 {
  font-size: clamp(26px, 3.5vw, 50px);
  font-weight: 400;
  letter-spacing: -0.04em;
}
.personalSignoff .textLink {
  white-space: nowrap;
}
.personalFooter .footerBottom {
  border-top: 1px solid #ffffff26;
  padding-top: 25px;
  margin-top: 0;
}
@media (max-width: 760px) {
  .personalFooter {
    padding-top: 45px;
  }
  .personalSignoff {
    align-items: flex-start;
    flex-direction: column;
    padding-bottom: 40px;
  }
}

/* Full-height personal closing: a scroll-driven curve, then a quiet introduction. */
.footerFull {
  --footer-content-y: 0px;
  --footer-title-1: 0%;
  --footer-title-2: 0%;
  --footer-details: 1;
  --footer-action: 1;
  --footer-line: 1;
  --footer-meta: 1;
  min-height: 100svh;
  padding-top: 0;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  background: #202423;
}
.footerSweep {
  position: absolute;
  z-index: 2;
  top: -1px;
  left: -5%;
  width: 110%;
  height: calc(var(--footer-curve, 0px) + 1px);
  background: var(--paper);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  pointer-events: none;
}
.footerInner {
  min-height: 100svh;
  padding-top: clamp(78px, 11svh, 125px);
  padding-bottom: 26px;
  display: flex;
  flex-direction: column;
  position: relative;
  transform: translate3d(0, var(--footer-content-y), 0);
}
.footerTopline {
  display: flex;
  align-items: center;
  gap: 21px;
}
.footerPortrait {
  position: relative;
  display: block;
  overflow: hidden;
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #9ca9a3;
}
.footerPortrait img {
  position: absolute;
  width: 500%;
  max-width: none;
  height: auto;
  left: -121%;
  top: -8%;
}
.footerTopline .micro {
  font-size: 8px;
  letter-spacing: 1.5px;
  color: #9cafa2;
}
.footerTopline p {
  font-size: 12px;
  color: #d2dcce;
  line-height: 1.8;
  margin-top: 8px;
}
.footerStory {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 70px;
  align-items: end;
  margin-top: 32px;
}
.footerStory h2 {
  font-size: clamp(61px, 6.6vw, 110px);
  font-weight: 400;
  letter-spacing: -3px;
  line-height: 1.15;
}
.footerTitleMask {
  display: block;
  overflow: hidden;
  padding-bottom: 8px;
}
.footerTitleMask > span {
  display: block;
  transform: translateY(var(--footer-title-1));
}
.footerTitleMask:nth-child(2) > span {
  transform: translateY(var(--footer-title-2));
}
.footerStory > p {
  font-size: 15px;
  line-height: 2.1;
  color: #c1cfbf;
  padding-bottom: 14px;
  opacity: var(--footer-details);
  transform: translateY(calc((1 - var(--footer-details)) * 25px));
}
.footerRail {
  position: relative;
  height: 1px;
  margin-top: 70px;
}
.footerRule {
  position: absolute;
  inset: 0;
  height: 1px;
  background: #64735e;
  transform-origin: left;
  transform: scaleX(var(--footer-line));
}
.footerExploreRound {
  position: absolute;
  right: 0;
  top: -76px;
  width: 152px;
  height: 152px;
  background: var(--accent);
  color: var(--ink);
  opacity: var(--footer-action);
  translate: calc((1 - var(--footer-action)) * 80px) 0;
}
.footerExploreRound .fill {
  background: #eef5d9;
}
.footerExplore {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  max-width: calc(100% - 190px);
  margin-top: 24px;
  opacity: var(--footer-details);
}
.footerExplore .textLink {
  color: #e5eddf;
  min-height: 44px;
  font-size: 12px;
}
.footerExplore svg {
  width: 15px;
  height: 15px;
}
.footerEnd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-top: 45px;
  margin-top: auto;
  color: #b6c3b0;
  font-size: 10px;
  line-height: 1.8;
  opacity: var(--footer-meta);
}
.footerEnd > div {
  display: flex;
  align-items: center;
  gap: 11px;
  font-variant-numeric: tabular-nums;
}
.footerEnd .micro {
  font-size: 8px;
  color: #8fa28b;
}
.footerEnd button {
  color: #e1e9da;
  min-height: 44px;
  font-size: 10px;
}
.footerFull:focus-within .footerInner {
  transform: none;
}
.footerFull:focus-within .footerTitleMask > span {
  transform: none;
}
.footerFull:focus-within .footerStory > p,
.footerFull:focus-within .footerExplore,
.footerFull:focus-within .footerEnd,
.footerFull:focus-within .footerExploreRound {
  opacity: 1;
}
.footerFull:focus-within .footerExploreRound {
  translate: 0 0;
}
@media (max-width: 760px) {
  .footerInner {
    padding-top: 80px;
    padding-bottom: 20px;
  }
  .footerTopline {
    gap: 15px;
  }
  .footerPortrait {
    width: 56px;
    height: 56px;
  }
  .footerTopline p {
    font-size: 10px;
    margin-top: 4px;
  }
  .footerTopline .micro {
    font-size: 7px;
  }
  .footerStory {
    grid-template-columns: 1fr;
    gap: 23px;
    margin-top: 28px;
  }
  .footerStory h2 {
    font-size: clamp(48px, 12.7vw, 66px);
    letter-spacing: -1.8px;
  }
  .footerTitleMask {
    padding-bottom: 6px;
  }
  .footerStory > p {
    font-size: 12px;
    line-height: 2;
    padding-bottom: 0;
  }
  .footerRail {
    margin-top: 62px;
  }
  .footerExploreRound {
    width: 112px;
    height: 112px;
    top: -56px;
    font-size: 11px;
    padding: 14px;
  }
  .footerExplore {
    max-width: calc(100% - 135px);
    gap: 5px 20px;
    margin-top: 18px;
  }
  .footerExplore .textLink {
    font-size: 10px;
    min-height: 44px;
    gap: 7px;
  }
  .footerExplore svg {
    width: 12px;
    height: 12px;
  }
  .footerEnd {
    gap: 13px;
    flex-wrap: wrap;
    font-size: 8px;
    padding-top: 30px;
  }
  .footerEnd > div {
    gap: 6px;
  }
  .footerEnd .micro {
    font-size: 7px;
  }
  .footerEnd button {
    font-size: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .footerSweep {
    height: 1px;
  }
  .footerFull .footerInner,
  .footerFull .footerTitleMask > span,
  .footerFull .footerStory > p {
    transform: none;
  }
  .footerFull .footerStory > p,
  .footerFull .footerExplore,
  .footerFull .footerEnd,
  .footerFull .footerExploreRound {
    opacity: 1;
  }
  .footerFull .footerExploreRound {
    translate: 0 0;
  }
  .footerFull .footerRule {
    transform: none;
  }
}
html[data-motion="reduced"] .footerSweep {
  height: 1px;
}
html[data-motion="reduced"] .footerFull .footerInner,
html[data-motion="reduced"] .footerFull .footerTitleMask > span,
html[data-motion="reduced"] .footerFull .footerStory > p {
  transform: none;
}
html[data-motion="reduced"] .footerFull .footerStory > p,
html[data-motion="reduced"] .footerFull .footerExplore,
html[data-motion="reduced"] .footerFull .footerEnd,
html[data-motion="reduced"] .footerFull .footerExploreRound {
  opacity: 1;
}
html[data-motion="reduced"] .footerFull .footerExploreRound {
  translate: 0 0;
}
html[data-motion="reduced"] .footerFull .footerRule {
  transform: none;
}

/* Fill the current visible viewport, including mobile browser chrome changes. */
.footerFull,
.footerFull .footerInner {
  min-height: 100svh;
  min-height: 100dvh;
}

/* Quiet ending: one thought and one contact channel. */
.footerContactOnly .footerStory {
  display: block;
}
.footerContactOnly .footerStory h2 {
  max-width: 100%;
}
.footerContactOnly .footerRail {
  margin-top: 85px;
}
.footerMailRow {
  display: flex;
  align-items: center;
  margin-top: 38px;
  padding-right: 190px;
  min-height: 65px;
  opacity: var(--footer-details);
}
.footerMail {
  max-width: 100%;
  border-color: #60705d;
  color: #e8efdf;
  font-size: 14px;
}
.footerMail .magnetText {
  min-width: 0;
  overflow-wrap: anywhere;
  gap: 16px;
}
.footerCopyLabel {
  font-size: 11px;
  opacity: .75;
  white-space: nowrap;
}
.footerMail:hover,
.footerMail:focus-visible {
  color: var(--ink);
}
.footerContactOnly .footerEnd {
  padding-top: 50px;
}
.footerContactOnly:focus-within .footerMailRow {
  opacity: 1;
}
@media (max-width: 760px) {
  .footerContactOnly .footerRail {
    margin-top: 75px;
  }
  .footerMailRow {
    margin-top: 76px;
    padding-right: 0;
    min-height: 56px;
  }
  .footerMail {
    font-size: 12px;
    padding: 15px 22px;
    min-height: 56px;
  }
  .footerContactOnly .footerEnd {
    padding-top: 35px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .footerMailRow {
    opacity: 1;
  }
}
html[data-motion="reduced"] .footerMailRow {
  opacity: 1;
}

/* The role introduces the person; the moving headline expresses their approach. */
.heroAi .heroRole { top: 31%; left: 73%; right: 3%; }
.heroAi .heroRole h1 { font-size: clamp(25px, 2.2vw, 36px); line-height: 1.5; letter-spacing: -.035em; }
.heroAi .marquee { bottom: 42px; }
.heroAi .marqueeTrack { font-size: clamp(82px, 9vw, 145px); gap: 55px; line-height: 1.1; letter-spacing: -.05em; }
.heroAi .heroBottom { justify-content: flex-end; }
@media (max-width: 760px) {
  .heroAi .heroRole { top: 110px; left: 22px; right: 22px; }
  .heroAi .heroRole h1 { font-size: 30px; line-height: 1.4; }
  .heroAi .marquee { bottom: 66px; }
  .heroAi .marqueeTrack { font-size: clamp(60px, 14vw, 88px); gap: 30px; }
}

/* Notes shares one collection; original writing dates and compact reading tools. */
.notesTitle > .textLink { margin-bottom: 26px; }
.notesTitle > .micro { display: block; margin-bottom: 18px; }
.notesEntry { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 26px; border-top: 1px solid var(--line); padding: 36px 0 42px; }
.notesEntry:last-child { border-bottom: 1px solid var(--line); }
.notesNumber { padding-top: 4px; }
.notesDate { display: block; margin-bottom: 14px; }
.notesEntry h2 { max-width: 850px; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.5; font-weight: 400; letter-spacing: -.025em; }
.notesEntry h2 a:hover { color: var(--muted); }
.notesEntry p { max-width: 700px; margin-top: 15px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.notesRead { margin-top: 23px; }
.articleScope { padding-bottom: 28px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.articleMain { min-width: 0; }
.articleContents .tocLevel4, .articleMobileContents .tocLevel4 { padding-left: 24px; font-size: 10px; }
.articleMobileContents { display: none; }
.articleEndActions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 35px; margin-top: 30px; }
@media (max-width: 760px) {
  .notesEntry { grid-template-columns: 24px minmax(0, 1fr); gap: 14px; padding: 26px 0 32px; }
  .notesEntry h2 { font-size: 24px; }
  .notesEntry p { font-size: 13px; }
  .articleTop { gap: 15px; }
  .articleScope { padding-bottom: 25px; }
  .articleMobileContents { display: block; margin-bottom: 30px; border-block: 1px solid var(--line); }
  .articleMobileContents summary { display: flex; justify-content: space-between; cursor: pointer; padding: 17px 0; font-size: 13px; list-style: none; }
  .articleMobileContents summary::-webkit-details-marker { display: none; }
  .articleMobileContents[open] summary span { transform: rotate(45deg); }
  .articleMobileContents nav { max-height: 45vh; overflow-y: auto; padding-bottom: 16px; }
  .articleMobileContents nav a { display: block; font-size: 12px; line-height: 1.8; padding-block: 6px; color: var(--muted); }
  .articleMobileContents .tocLevel3 { padding-left: 12px; }
}

/* Fitness: one real application, its workflow, and the current trial boundaries. */
.fitnessProject { border-top: 1px solid var(--line); }
.fitnessProjectHeading { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 42px 0; }
.fitnessProjectHeading h2 { font-size: clamp(42px, 6vw, 76px); line-height: 1.2; font-weight: 400; letter-spacing: -.045em; margin-top: 12px; }
.fitnessAvailability { font-size: 12px; color: var(--muted); }
.fitnessLead { max-width: 720px; padding-bottom: 52px; }
.fitnessLead h3 { font-size: clamp(25px, 3vw, 38px); line-height: 1.55; font-weight: 400; letter-spacing: -.03em; }
.fitnessLead > p { margin-top: 22px; color: var(--muted); font-size: 15px; line-height: 1.95; }
.fitnessTrial { margin-top: 28px; gap: 18px; }
.fitnessTrial .magnetText { display: flex; align-items: center; gap: 18px; }
.fitnessPreview { margin: 0 0 64px; }
.fitnessPreview img { display: block; width: 100%; height: auto; background: #f4f3ef; }
.fitnessPreview figcaption { margin-top: 14px; font-size: 11px; color: var(--muted); line-height: 1.7; }
.fitnessFeature { display: grid; grid-template-columns: 40px minmax(0, .85fr) minmax(0, 1fr); gap: 32px; border-top: 1px solid var(--line); padding: 32px 0; align-items: start; }
.fitnessFeature > .micro { padding-top: 6px; }
.fitnessFeature h3 { font-size: 23px; font-weight: 400; line-height: 1.6; letter-spacing: -.02em; }
.fitnessFeature p, .fitnessEngineering p, .fitnessTrialNotes p { color: var(--muted); font-size: 14px; line-height: 1.95; }
.fitnessEngineering { border-top: 1px solid var(--line); padding: 32px 0 48px; }
.fitnessEngineering p { max-width: 760px; margin-top: 16px; }
.fitnessTrialNotes { border-top: 1px solid var(--line); padding-top: 32px; max-width: 820px; }
.fitnessTrialNotes h3 { font-size: 18px; font-weight: 400; margin-bottom: 18px; }
.fitnessTrialNotes p + p { margin-top: 12px; }
@media (max-width: 760px) {
  .fitnessProjectHeading { padding: 30px 0; align-items: flex-start; }
  .fitnessAvailability { padding-top: 5px; font-size: 11px; }
  .fitnessLead { padding-bottom: 35px; }
  .fitnessLead > p { font-size: 14px; }
  .fitnessPreview { margin-bottom: 38px; }
  .fitnessFeature { grid-template-columns: 24px minmax(0, 1fr); gap: 10px 16px; padding: 26px 0; }
  .fitnessFeature h3 { font-size: 21px; }
  .fitnessFeature p { grid-column: 2; }
}

/* A real release gets a quiet secondary action directly beside its portfolio entry. */

/* Astarx: one download action and one viewport-sized capability workspace. */
.capabilitiesSection { scroll-margin-top:0; padding-bottom:96px; }
.capabilitiesSection > .sectionHeading { margin-bottom:22px; }
.showcaseTabs { margin-bottom:16px; }
.showcaseTabs button { padding-block:17px; }
.showcasePanel { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,.36fr); grid-template-rows:auto minmax(0,1fr) auto auto 2px; height:clamp(430px,calc(100svh - 245px),660px); }
.showcaseHeading { grid-column:1 / -1; padding:26px 32px 0; }
.showcaseHeading h2 { font-size:clamp(24px,2.55vw,36px); line-height:1.45; margin-top:8px; letter-spacing:-.9px; }
.showcaseHeading .micro { font-size:8px; }
.showcaseDiagram { grid-column:1; grid-row:2; min-width:0; min-height:0; margin:0; padding:10px 0; overflow:hidden; }
.mechanismSvg { height:100%; width:100%; min-width:0; }
.showcaseDescription { grid-column:2; grid-row:2; display:flex; flex-direction:column; justify-content:center; align-items:stretch; gap:0; padding:22px 32px 22px 18px; min-width:0; min-height:0; }
.showcaseDescription p { color:#c1d0b7; font-size:13px; line-height:1.9; max-width:none; }
.showcaseFeatures { list-style:none; padding:0; margin:20px 0 0; border-top:1px solid #3d5140; }
.showcaseFeatures li { font-size:11px; line-height:1.7; padding-top:9px; color:#edf1df; }
.showcaseReading { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:18px; font-size:10px; line-height:1.8; }
.showcaseReading > span { flex-basis:100%; color:#9ab086; font-size:9px; }
.showcaseReading a { color:#d6ed8a; text-decoration:underline; text-underline-offset:4px; }
.showcaseReading a:hover { color:#fff; }
.showcaseTimeline { grid-column:1 / -1; padding-inline:32px; }
.showcaseTimeline button { padding:12px 0; }
.showcaseControls { grid-column:1 / -1; padding:6px 32px 20px; gap:16px; }
.showcaseControls button { min-height:40px; padding:11px 18px; }
.showcaseDisclaimer { color:#96aa8e; font-size:9px; margin-left:auto; }
.showcaseControls button:last-child:not(:first-child) { margin-left:12px; }
.showcaseProgress { grid-column:1 / -1; }
.showcaseMode { width:min(1450px,96vw); max-height:96svh; padding:54px 24px 18px; }
.expandedShowcase .showcasePanel { height:calc(96svh - 145px); min-height:430px; max-height:850px; }
.expandedShowcase .showcaseHeading { padding-top:25px; }
.expandedShowcase .showcaseDiagram { max-width:none; margin:0; }
.installMode { width:min(640px,calc(100vw - 36px)); max-height:calc(100svh - 36px); padding:46px 42px 28px; background:var(--paper); color:var(--ink); }
.installMode .modalClose { color:var(--ink); font-size:12px; }
.installGuide > .micro { font-size:9px; color:var(--muted); letter-spacing:1.8px; }
.installGuide h2 { font-size:clamp(28px,3vw,36px); font-weight:400; line-height:1.5; letter-spacing:-1px; margin:13px 0 8px; }
.installGuideIntro { font-size:13px; line-height:1.8; color:var(--muted); }
.installGuideSteps { padding:0; margin:18px 0 22px; list-style:none; }
.installGuideSteps li { display:grid; grid-template-columns:26px minmax(0,1fr); gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.installGuideSteps li > span { font-size:10px; padding-top:4px; color:var(--muted); }
.installGuideSteps h3 { font-size:16px; line-height:1.5; font-weight:400; margin:0 0 6px; }
.installGuideSteps p { font-size:12px; line-height:1.9; color:var(--muted); }
.installGuideActions { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:24px; }
.installGuideActions .textLink { font-size:11px; }
.installGuideActions button { display:inline-flex; align-items:center; gap:22px; border:0; border-radius:50px; background:var(--ink); color:var(--paper); font-size:12px; padding:13px 21px; }
.installGuideActions svg { width:16px; height:16px; }
@media(min-width:761px) and (max-height:760px) {
 .showcasePanel { height:clamp(410px,calc(100svh - 220px),540px); }
 .showcaseHeading { padding-top:20px; }
 .showcaseHeading h2 { font-size:27px; }
 .showcaseDescription { padding-block:12px; }
 .showcaseFeatures { margin-top:12px; }
 .showcaseFeatures li { padding-top:6px; }
 .showcaseReading { margin-top:12px; }
}
@media(max-width:1000px) and (min-width:761px) {
 .showcasePanel { grid-template-columns:minmax(0,1fr) 250px; }
 .showcaseDescription { padding-left:10px; padding-right:22px; }
}
@media(max-width:760px) {
 .capabilitiesSection { scroll-margin-top:0; padding-bottom:55px; }
 .showcaseTabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; overflow:visible; margin-bottom:14px; }
 .showcaseTabs button { padding:13px 9px; font-size:11px; gap:7px; justify-content:center; min-height:44px; }
 .showcaseTabs button[aria-selected="true"]::after { left:12px; right:12px; }
 .showcasePanel { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto auto auto 2px; height:auto; }
 .showcaseHeading { grid-column:1; padding:22px 20px 0; }
 .showcaseHeading h2 { font-size:23px; letter-spacing:-.6px; }
 .showcaseDiagram { grid-column:1; grid-row:2; height:195px; padding:5px 0; overflow:hidden; }
 .showcaseDescription { grid-column:1; grid-row:3; padding:8px 20px 22px; justify-content:flex-start; }
 .showcaseDescription p { font-size:12px; line-height:1.8; }
 .showcaseFeatures { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px; padding-top:10px; }
 .showcaseFeatures li { font-size:10px; padding:0; }
 .showcaseReading { gap:6px 14px; margin-top:13px; }
 .showcaseReading > span { flex-basis:auto; }
 .showcaseTimeline { grid-column:1; grid-row:4; padding-inline:20px; gap:8px; }
 .showcaseTimeline button { font-size:9px; min-height:60px; }
 .showcaseControls { grid-column:1; grid-row:5; padding:5px 20px 18px; gap:12px; flex-wrap:wrap; }
 .showcaseControls button { min-height:44px; }
 .showcaseControls .showcaseDisclaimer { order:5; flex-basis:100%; font-size:8px; margin-top:0; }
 .showcaseControls button:last-child:not(:first-child) { margin-left:auto; }
 .showcaseProgress { grid-column:1; grid-row:6; }
 .showcaseMode { padding:52px 12px 14px; }
 .expandedShowcase .showcasePanel { height:auto; min-height:0; max-height:none; }
 .expandedShowcase .showcaseHeading h2 { font-size:23px; }
 .installMode { padding:44px 24px 25px; }
 .installGuide h2 { font-size:29px; }
 .installGuideSteps li { gap:12px; padding-block:14px; }
}

/* Downloads follow the project story. */
.astarxTitle { padding-top:150px; padding-bottom:72px; }
.astarxTitle > .textLink { margin-bottom:28px; }
.astarxTitle > .micro { margin:0 0 28px; }
.astarxHeroContent { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:65px; margin-bottom:52px; }
.astarxHeroContent h1 { font-size:clamp(88px,11vw,152px); line-height:1.1; margin:0; }
.astarxHeroIntro h2 { font-size:clamp(23px,2.2vw,31px); line-height:1.6; font-weight:400; letter-spacing:-.7px; }
.astarxHeroIntro > p { font-size:13px; line-height:2; color:var(--muted); margin-top:18px; }
.astarxScopeNote { max-width:850px; font-size:12px; line-height:1.9; color:var(--muted); margin-top:24px; }
.astarxDownloads { border-top:1px solid var(--line); padding-top:38px; scroll-margin-top:0; }
.downloadHeading { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin:22px 0 38px; }
.downloadHeading h2 { font-size:clamp(29px,3.2vw,44px); line-height:1.45; font-weight:400; letter-spacing:-1.1px; }
.downloadHeading p { font-size:13px; line-height:1.8; color:var(--muted); padding-bottom:5px; }
.permissionPath { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:17px 16px; border-radius:8px; background:#e4e9da; font-size:12px; line-height:1.8; margin:22px 0 8px; }
.permissionPath strong { font-weight:400; background:var(--accent); padding:4px 9px; border-radius:5px; }
.permissionNote { font-size:11px; line-height:1.9; color:var(--muted); }
@media (max-width:760px) {
 .astarxTitle { padding-top:118px; padding-bottom:48px; }
 .astarxHeroContent { grid-template-columns:1fr; gap:26px; margin-bottom:33px; }
 .astarxHeroContent h1 { font-size:100px; margin:0; }
 .astarxHeroIntro h2 { font-size:24px; line-height:1.55; }
 .astarxHeroIntro > p { font-size:12px; margin-top:14px; }
 .astarxScopeNote { font-size:11px; margin-top:18px; }
 .astarxDownloads { padding-top:27px; }
 .downloadHeading { display:block; margin:12px 0 26px; }
 .downloadHeading h2 { font-size:31px; }
 .downloadHeading p { font-size:12px; margin-top:14px; }
 .permissionPath { padding:14px 12px; gap:5px 8px; font-size:11px; }
}


/* About: capabilities first, a compact personal profile, explicit career direction. */
.aboutPageTitle { padding-bottom: 48px; }
.aboutPageTitle h1 { font-size: clamp(42px, 5.3vw, 72px); line-height: 1.3; letter-spacing: -.045em; }
.aboutAvailability { display: flex; align-items: center; gap: 10px; margin-top: 30px; font-size: 14px; line-height: 1.8; color: #415747; }
.aboutAvailability > span { width: 7px; height: 7px; border-radius: 50%; background: #637d50; flex-shrink: 0; }
.aboutOverview { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: clamp(45px, 7vw, 100px); padding: 44px 0 100px; border-top: 1px solid var(--line); }
.aboutSummary > p { font-size: 17px; line-height: 2; max-width: 640px; }
.aboutSummary > p + p { margin-top: 22px; color: var(--muted); }
.aboutSummary .aboutLinks { margin-top: 32px; font-size: 13px; }
.aboutIdentity { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.aboutIdentity .aboutAvatar { width: 88px; height: 88px; margin: 0; }
.aboutFacts { list-style: none; display: grid; gap: 22px; width: 100%; margin: 0; padding: 0; }
.aboutFact { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 14px; }
.aboutFactIcon { display: grid; place-items: center; width: 38px; height: 38px; color: #556550; }
.aboutFactIcon svg { width: 34px; height: 34px; }
.aboutFactIcon img { display: block; width: 36px; height: 36px; object-fit: contain; }
.aboutFactIcon--education { border-radius: 50%; overflow: hidden; }
.aboutFactIcon--education img { object-fit: cover; object-position: left center; border-radius: 50%; }
.aboutFactText { min-width: 0; display: grid; gap: 5px; }
.aboutFactText strong { font-size: 14px; line-height: 1.6; font-weight: 500; }
.aboutFactText > span { color: var(--muted); font-size: 12px; line-height: 1.7; }
.aboutCapabilities { padding-bottom: 90px; }
.aboutCapabilities > .subhead { font-size: clamp(27px, 3vw, 36px); margin-bottom: 38px; }
.aboutStrengths { border-top: 1px solid var(--line); }
.aboutStrength { display: grid; grid-template-columns: 34px minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; align-items: start; padding: 36px 0; border-bottom: 1px solid var(--line); }
.aboutStrength > .micro { padding-top: 3px; }
.aboutStrength h3 { font-weight: 400; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.5; letter-spacing: -.035em; margin-top: 10px; }
.aboutStrength .micro { font-size: 9px; }
.aboutStrengthCopy p { font-size: 14px; color: var(--muted); line-height: 1.95; }
.aboutStrengthCopy .textLink { font-size: 12px; margin-top: 20px; }
.aboutNext { padding: 80px 0 100px; background: #e3e7dc; }
.aboutNext > .shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px 70px; }
.aboutNextHeading h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 400; line-height: 1.5; margin-top: 16px; letter-spacing: -.04em; }
.aboutNextCopy p { font-size: 15px; line-height: 1.95; color: #53604e; }
.aboutNextCopy p + p { margin-top: 18px; }
.aboutInvitation { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 45px; border-top: 1px solid #c0c9b8; padding-top: 38px; margin-top: 20px; }
.aboutInvitation h2 { font-size: clamp(24px, 2.7vw, 34px); line-height: 1.5; font-weight: 400; margin: 12px 0 14px; letter-spacing: -.035em; }
.aboutInvitation p { max-width: 650px; font-size: 14px; line-height: 1.95; color: #53604e; }
.aboutJobLink { flex-shrink: 0; border-color: #78866c; font-size: 13px; }
.aboutJobLink:hover, .aboutJobLink:focus-visible { color: var(--ink); }
@media (max-width: 1000px) {
  .aboutOverview { grid-template-columns: minmax(0, 1fr) 230px; gap: 45px; }
  .aboutSummary > p { font-size: 15px; }
  .aboutStrength { grid-template-columns: 24px minmax(0, .85fr) minmax(0, 1.15fr); gap: 23px; }
  .aboutNext > .shell { gap: 40px; }
}
@media (max-width: 760px) {
  .aboutPageTitle { padding-bottom: 32px; }
  .aboutPageTitle h1 { font-size: clamp(31px, 7vw, 47px); line-height: 1.35; letter-spacing: -.04em; }
  .aboutAvailability { font-size: 12px; margin-top: 22px; }
  .aboutOverview { grid-template-columns: 1fr; gap: 32px; padding: 30px 0 65px; }
  .aboutSummary > p { font-size: 14px; }
  .aboutIdentity { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 24px; align-items: start; }
  .aboutIdentity .aboutAvatar { width: 64px; height: 64px; margin: 0; }
  .aboutFacts { gap: 20px; }
  .aboutFact { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
  .aboutFactIcon, .aboutFactIcon img, .aboutFactIcon svg { width: 32px; height: 32px; }
  .aboutFactText strong { font-size: 13px; }
  .aboutFactText > span { font-size: 11px; }
  .aboutCapabilities { padding-bottom: 60px; }
  .aboutStrength { grid-template-columns: 22px minmax(0, 1fr); gap: 16px; padding: 28px 0; }
  .aboutStrengthCopy { grid-column: 2; }
  .aboutStrengthCopy p { font-size: 13px; }
  .aboutStrength h3 { font-size: 23px; margin-top: 7px; }
  .aboutNext { padding: 55px 0 65px; }
  .aboutNext > .shell { grid-template-columns: 1fr; gap: 28px; }
  .aboutNextCopy p { font-size: 14px; }
  .aboutInvitation { flex-direction: column; align-items: flex-start; gap: 26px; margin-top: 8px; padding-top: 30px; }
  .aboutInvitation p { font-size: 13px; }
}

/* The public download surface offers the verified Apple Silicon build only. */
.appleDownloadCard { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:34px; border:1px solid #b8c2aa; border-radius:16px; background:#e9edde; }
.appleDownloadIdentity { display:flex; align-items:center; gap:22px; min-width:0; }
.appleDownloadIcon { display:grid; place-items:center; flex-shrink:0; width:64px; height:64px; border-radius:15px; color:#304733; background:#dce3d1; }
.appleDownloadIcon svg { width:28px; height:28px; }
.appleDownloadIdentity .micro { color:#63775b; font-size:9px; letter-spacing:1.5px; }
.appleDownloadIdentity h3 { font-size:27px; line-height:1.5; font-weight:400; letter-spacing:-.5px; margin:5px 0; }
.appleDownloadIdentity p { color:var(--muted); font-size:12px; line-height:1.9; }
.appleDownloadActions { display:flex; flex-direction:column; align-items:flex-end; gap:17px; flex-shrink:0; }
.appleDownloadButton { display:flex; justify-content:center; align-items:center; gap:25px; min-height:54px; padding:16px 26px; border:0; border-radius:10px; background:#24382b; color:#f2f3e9; font-size:13px; transition:background .2s; }
.appleDownloadButton:hover { background:#354f3a; }
.appleDownloadButton:disabled { cursor:default; opacity:.6; }
.appleDownloadButton > span { font-size:20px; line-height:1; }
.appleDownloadActions .textLink { background:none; border:0; padding:0; font-size:11px; gap:9px; }
.appleDownloadActions .textLink svg { width:16px; height:16px; }
@media(max-width:760px) {
 .appleDownloadCard { flex-direction:column; align-items:stretch; padding:26px 22px; gap:25px; border-radius:14px; }
 .appleDownloadIdentity { gap:16px; }
 .appleDownloadIcon { width:52px; height:52px; border-radius:12px; }
 .appleDownloadIdentity h3 { font-size:23px; }
 .appleDownloadIdentity p { font-size:11px; }
 .appleDownloadActions { align-items:stretch; gap:18px; }
 .appleDownloadActions .textLink { align-self:center; min-height:30px; }
 .appleDownloadButton { gap:22px; font-size:12px; }
}

html[data-phase="static"] #curtain { display: none; }
html[data-phase="static"] .reveal, html[data-phase="static"] .lineReveal i { opacity: 1; transform: none; }
.motionFiling { display: flex; flex-wrap: wrap; gap: .75em; }