/* assets/ui/tablet-refinements.css */
/* Touch-tablet landscape layout. Width alone never opts a desktop into this mode. */
@media (orientation:landscape) and (min-width:1024px) and (max-width:1366px) and (min-height:600px) and (max-height:1024px) and (pointer:coarse) {
  html:root {
    --tablet-nav-height: 72px;
    --tablet-section-top: calc(var(--tablet-nav-height) + 32px);
    --tablet-title-size: clamp(64px, 9dvh, 82px);
  }

  .topbar { height:var(--tablet-nav-height); padding-inline:var(--content-edge); }
  .topbar .brand { width:112px; }
  .topbar .burger { width:44px; height:44px; min-height:44px; }
  .topbar .burger i { width:24px; }
  .menu-inner { max-width:600px; padding:calc(var(--tablet-nav-height) + 24px) var(--content-edge) 32px; }
  .menu-list a { min-height:64px; padding-block:16px; font-size:26px; }

  #projects,#works,#experience,#about {
    min-height:100dvh;
    scroll-margin-top:0;
  }
  #projects,#about { padding-top:var(--tablet-section-top); padding-bottom:32px; }
  #projects .project-title,#about .about-title {
    margin:0 0 28px;
    font-size:var(--tablet-title-size);
    line-height:1;
  }

  #projects .project-gallery {
    --pg-card-width:min(84vw,1040px);
    --pg-inset:max(var(--content-edge),calc((100% - var(--pg-card-width))/2));
    --pg-gap:24px;
    --tablet-project-height:calc(100dvh - var(--tablet-section-top) - var(--tablet-title-size) - 28px - 32px - 76px);
    padding-top:0;
  }
  #projects .pg-card {
    --pg-media-gap:16px;
    grid-template-columns:minmax(0,min(44%,calc((var(--tablet-project-height) - 48px - 10px)/.9375))) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);
    gap:0 32px;
    height:var(--tablet-project-height);
    min-height:0;
    padding:24px;
  }
  #projects .pg-visuals { align-self:center; min-height:0; }
  #projects .pg-copy { gap:12px; min-height:0; height:100%; padding:0; overflow:hidden; }
  #projects .pg-name { flex:none; font-size:26px; line-height:1.3; }
  #projects .pg-reading {
    display:flex; flex:1; flex-direction:column; align-items:flex-start; gap:14px;
    width:100%; min-height:0; padding-right:8px;
    overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain;
    touch-action:pan-y pinch-zoom; scrollbar-width:thin; scrollbar-color:#666 transparent;
    -webkit-overflow-scrolling:touch;
  }
  #projects .pg-reading > * { flex-shrink:0; }
  #projects .pg-summary { gap:12px; }
  #projects .pg-description { max-width:100%; font-size:16px; line-height:1.8; }
  #projects .pg-contribution { margin-top:10px; font-size:14px; line-height:1.75; }
  #projects .pg-funding { font-size:13px; }
  #projects .pg-link { font-size:13px; }
  #projects .pg-controls { min-height:44px; margin-top:16px; }
  #projects .pg-autoplay { display:none; }
  #projects .pg-progress-wrap { --pg-dot-slot:44px; --pg-active-dot:34px; padding:0 8px; }
  #projects .pg-progress { top:0; left:8px; width:calc(100% - 16px); }

  /* Full-size iPad copy fits naturally; shorter browser windows retain a scroll fallback. */
}

/* assets/ui/tablet-home-about.css */
/* iPad landscape only. Mouse-driven desktop layouts keep their existing rules. */
@media (orientation:landscape) and (min-width:1024px) and (max-width:1366px) and (min-height:600px) and (max-height:1024px) and (pointer:coarse) {
  #home.stage {
    height:100dvh;
    min-height:0;
    padding:0;
    overflow:hidden;
  }

  #home .hero {
    position:absolute;
    inset:clamp(170px,27dvh,245px) auto auto var(--content-edge);
    width:min(40vw,440px);
    padding:0;
    text-align:left;
  }

  #home .hero :is(.headline,.sub,.pill-cta) {
    position:static;
    inset:auto;
  }

  #home .hero .headline {
    margin:0;
    max-width:none;
    font-size:clamp(44px,6.5dvh,58px);
    line-height:1.1;
    letter-spacing:-.02em;
    white-space:normal;
  }

  #home .hero .headline span,
  #home .hero .sub span { display:block; }
  #home .hero .headline span+span::before,
  #home .hero .sub span+span::before { content:none; }

  #home .hero .sub {
    max-width:29em;
    margin:24px 0 0;
    font-size:17px;
    line-height:1.6;
    white-space:normal;
    word-spacing:0;
  }

  #home .hero .actions {
    display:flex;
    align-items:center;
    margin-top:26px;
  }

  #home .hero .pill-cta {
    width:156px;
    height:46px;
    min-height:44px;
    font-size:16px;
  }

  #home .logos {
    position:absolute;
    top:auto;
    bottom:max(24px,calc(env(safe-area-inset-bottom,0px) + 16px));
    left:50%;
    width:min(600px,64vw);
    max-width:calc(100% - 2 * var(--content-edge));
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:28px;
    padding:0;
    transform:translateX(-50%);
  }

  #home .logos .lg {
    height:34px;
    padding:0;
    align-items:center;
    justify-content:center;
  }

  #home .logos :is(.lg1,.lg2) { --brand-width:90px; }
  #home .logos .lg3 { --brand-width:75px; }
  #home .logos .lg4 { --brand-width:108px; }

  #about .about-editorial {
    width:100%;
    max-width:1040px;
    margin-inline:auto;
    grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
    gap:clamp(36px,4.7vw,64px);
    align-items:center;
    justify-content:center;
  }

  #about .about-intro { min-width:0; align-self:center; }
  #about .about-statement {
    margin:0 0 22px;
    font-size:clamp(40px,5.7dvh,52px);
    line-height:1.2;
  }

  #about .about-description {
    max-width:100%;
    margin-bottom:0;
    font-size:17px;
    line-height:1.7;
  }

  #about .about-logo-loop {
    --logo-loop-height:34px!important;
    --logo-loop-gap:32px!important;
    height:90px;
    margin-top:18px;
  }
  #about .about-logo-loop__track { height:66px; }

  #about .about-contact {
    --tablet-card-pad:clamp(24px,4dvh,32px);
    --tablet-card-gap:clamp(12px,2.4dvh,20px);
    width:100%;
    min-width:0;
    min-height:clamp(300px,48dvh,400px);
    padding:var(--tablet-card-pad);
    border-radius:32px;
  }

  #about .about-contact .about-kicker {
    margin:0 112px var(--tablet-card-gap) 0;
    font-size:11px;
    line-height:1.4;
  }
  #about .contact-title {
    margin:0 0 var(--tablet-card-gap);
    font-size:clamp(34px,5.5dvh,48px);
    line-height:1.03;
  }
  #about .contact-sub {
    margin:0;
    font-size:16px;
    line-height:1.6;
  }
  #about .about-contact .contact-sling {
    --sl-size:48px;
    top:var(--tablet-card-pad);
    right:var(--tablet-card-pad);
  }
  #about .sling-button__hint {
    right:calc(100% + 12px);
    gap:6px;
    font-size:11px;
  }

  /* A measured gap replaces the auto margin that pushed the rail to the bottom. */
  #about .contact-effort { --effort-rail-size:40px; margin-top:clamp(20px,3.2dvh,28px); padding-top:0; }
  #about .effort-heading { margin-bottom:12px; }
  /* Preserve the existing 22px rail origin used by the particle renderer. */
  #about .effort-stage { height:84px; min-height:44px; }
  #about .contact-qr { width:min(288px,calc(100% - 48px)); }

  @media (max-height:680px) {
    #home .hero { top:148px; }
    #home .hero .sub { margin-top:18px; font-size:16px; }
    #home .hero .actions { margin-top:20px; }
    #about .about-statement { margin-bottom:14px; font-size:36px; }
    #about .about-description { font-size:15px; line-height:1.6; }
    #about .about-logo-loop { --logo-loop-height:30px!important; height:70px; margin-top:14px; }
    #about .about-logo-loop__track { height:50px; }
    #about .about-contact { --tablet-card-pad:20px; --tablet-card-gap:10px; }
    #about .contact-title { font-size:32px; }
    #about .contact-sub { font-size:14px; line-height:1.5; }
    #about .contact-effort { --effort-rail-size:32px; }
    #about .effort-heading { margin-bottom:4px; }
    #about .effort-heading label { font-size:13px; }
    #about .effort-level { font-size:18px; }
    #about .effort-stage { height:64px; }
  }
}

/* assets/ui/tablet-works.css */
/* iPad landscape only: keep the toolbar above a viewport-sized 3D scene.
   Fine-pointer desktop layouts retain their original geometry and disclosure. */
@media (orientation:landscape) and (min-width:1024px) and (max-width:1366px) and (min-height:600px) and (max-height:1024px) and (pointer:coarse) {
  #works {
    --tablet-works-title-size: clamp(64px, 9dvh, 82px);
    min-height: 100dvh;
    padding-top: calc(var(--tablet-nav-height, 72px) + 32px);
    padding-bottom: 32px;
  }

  #works .works-title {
    margin: 0 auto 32px;
    font-size: var(--tablet-works-title-size);
    line-height: 1;
  }

  #works .works-toolbar {
    margin: 0 var(--content-edge);
    gap: 24px;
    flex-wrap: nowrap;
    align-items: center;
    scroll-margin-top: calc(var(--tablet-nav-height, 72px) + 16px);
  }

  #works .wg-filter-panel {
    max-width: calc(100% - 176px);
    padding: 5px;
    gap: 4px;
  }

  #works .wg-filter {
    min-height: 44px;
    padding: 10px 17px;
    font-size: 14px;
    line-height: 24px;
  }

  #works .wg-filter sup {
    margin-left: 4px;
    font-size: 9px;
  }

  #works .wg-view-switch {
    flex: none;
    gap: 22px;
  }

  #works .wg-view-button {
    min-height: 44px;
    font-size: 14px;
  }

  #works .works-gallery {
    margin-top: 24px;
    /* Overrides the JS custom-property minimum without overwriting its value. */
    min-height: 0;
  }

  #works .wg-space {
    --wg-ring-radius-scale: 1.4;
    --wg-ring-tilt: 22deg;
    --wg-scene-height: max(240px, calc(100dvh - var(--tablet-nav-height, 72px) - 32px - var(--tablet-works-title-size) - 32px - 54px - 24px - 32px));
    --wg-focus-preview-max-height: min(430px, calc(var(--wg-scene-height) - 48px));
    height: var(--wg-scene-height);
  }

  #works .wg-space[data-view=ring] {
    --wg-scene-height: max(240px, calc(100dvh - var(--tablet-nav-height, 72px) - 32px - var(--tablet-works-title-size) - 32px - 54px - 24px - 32px));
  }

  #works .wg-space[data-view=ring] .wg-preview {
    --wg-preview-max-height: min(272px, 35.2dvh);
    width: clamp(208px, 22.4vw, 336px);
  }

  /* Preserve the previous orbit where a narrower or taller tablet needs side clearance. */
  @media (max-width:1179px), (min-height:851px) {
    #works .wg-space { --wg-ring-radius-scale:1.2; --wg-ring-tilt:24deg; }
  }

  #works .wg-space[data-view=focus] {
    top: 0;
  }

  #works .wg-space[data-view=focus] .wg-preview {
    top: 50%;
    left: var(--content-edge);
    width: 44%;
    max-width: 520px;
    transform: translateY(-50%);
  }

  #works .wg-drag-hint {
    font-size: 12px;
  }

  /* The archive remains a natural page when the visitor chooses the grid. */
  #works.wg-is-grid {
    height: auto;
    min-height: 100dvh;
    padding-bottom: 32px;
  }

  #works .wg-grid {
    padding-top: 0;
    padding-bottom: 24px;
  }
}

/* assets/ui/tablet-experience.css */
/* Landscape touch tablets only; desktop and phone rules keep their existing layout. */
@media (orientation:landscape) and (min-width:1024px) and (max-width:1366px) and (min-height:600px) and (max-height:1024px) and (pointer:coarse) {
  #experience {
    --section-title-inset: 88px;
    --exp-card-gap: 28px;
    --exp-track-padding: 20px;
    --exp-card-height: clamp(268px, calc(100dvh - 340px), 440px);
    --exp-card-width: min(calc(var(--exp-card-height) / 1.72), calc((100cqw - 2 * var(--content-edge) - 2 * var(--exp-track-padding) - 3 * var(--exp-card-gap)) / 4));
    min-height: 100dvh;
    padding-top: 88px;
    padding-bottom: 28px;
    scroll-margin-top: 0;
  }

  #experience .experience-title {
    margin: 0 var(--content-edge) 28px;
    font-size: clamp(60px, 8.6dvh, 72px);
    line-height: 1;
  }

  #experience .experience-viewport {
    margin-top: 0;
    scroll-padding-inline: var(--content-edge);
  }

  #experience .experience-track { padding-top: 18px; padding-bottom: 28px; }
  #experience .experience-rail { top: 18px; }
  #experience .experience-track > .experience-item { height: calc(var(--exp-card-height) + var(--exp-wire) * .36); }
  #experience .experience-track .experience-card { top: calc(var(--exp-wire) * .36); }
  #experience .experience-track .experience-wire { height: calc(var(--exp-wire) * .36); }

  /* Apply the same geometry to the landing clone used by the return animation. */
  #experience :is(.experience-track, .experience-return-proxy) .experience-face {
    padding: clamp(14px, 2.4dvh, 20px);
    border-radius: 24px;
  }
  #experience :is(.experience-track, .experience-return-proxy) .experience-front {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: clamp(9px, 1.45dvh, 12px);
  }
  #experience :is(.experience-track, .experience-return-proxy) .experience-front .experience-logo {
    justify-self: center;
    width: 76%;
    max-width: 160px;
    height: 100%;
    aspect-ratio: auto;
    padding: 0;
  }
  #experience :is(.experience-track, .experience-return-proxy) :is(.experience-topline, .experience-back-heading) {
    font-size: clamp(9px, 1.3dvh, 11px);
    gap: 6px;
    letter-spacing: .04em;
  }
  #experience :is(.experience-track, .experience-return-proxy) .experience-identity { padding-top: 0; gap: 6px; }
  #experience :is(.experience-track, .experience-return-proxy) .experience-position { font-size: clamp(16px, 2.5dvh, 21px); }
  #experience :is(.experience-track, .experience-return-proxy) .experience-department { font-size: clamp(11px, 1.7dvh, 14px); }
  #experience :is(.experience-track, .experience-return-proxy) .experience-period { font-size: clamp(10px, 1.45dvh, 12px); letter-spacing: 0; }
  #experience :is(.experience-track, .experience-return-proxy) .experience-cta { min-height: 44px; padding-top: 10px; font-size: 11px; }
  #experience :is(.experience-track, .experience-return-proxy) .experience-arrow { width: 28px; height: 28px; }
  #experience .experience-footer { justify-content: center; }

  /* The two detail faces share a bounded surface, with scrolling in the copy only. */
  #experience-viewer {
    padding: max(24px, env(safe-area-inset-top, 0px)) max(var(--content-edge), env(safe-area-inset-right, 0px)) max(28px, env(safe-area-inset-bottom, 0px)) max(var(--content-edge), env(safe-area-inset-left, 0px));
    overflow: hidden;
  }
  #experience-viewer .experience-viewer-surface {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: min(1080px, 100%);
    height: min(690px, 100%);
    min-height: 0;
    margin-block: auto;
  }
  #experience-viewer .experience-detail-toolbar { flex: none; height: 44px; margin: 0; }
  #experience-viewer .experience-item.is-expanded { flex: 1; min-height: 0; }
  #experience-viewer .experience-item.is-expanded :is(.experience-pendulum, .experience-card, .experience-tilt) { height: 100%; min-height: 0; }
  #experience-viewer .experience-item.is-expanded .experience-flipper {
    grid-template-columns: minmax(260px, .44fr) minmax(0, 1fr);
    gap: 28px;
    height: 100%;
    min-height: 0;
    align-items: stretch;
  }
  #experience-viewer .experience-item.is-expanded .experience-face {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 24px;
    overflow: hidden;
    border-radius: 28px;
  }
  #experience-viewer .experience-item.is-expanded .experience-front { grid-template-rows: auto minmax(0, 1fr) auto; gap: 20px; }
  #experience-viewer .experience-item.is-expanded .experience-front .experience-logo {
    align-self: center;
    justify-self: center;
    width: 88%;
    max-width: 240px;
    height: auto;
    aspect-ratio: auto;
    padding: 0;
    gap: 14px;
  }
  #experience-viewer .experience-item.is-expanded .experience-front .experience-position { font-size: clamp(24px, 3.5dvh, 29px); line-height: 1.3; }
  #experience-viewer .experience-item.is-expanded .experience-front .experience-department { margin-top: 8px; font-size: 16px; }
  #experience-viewer .experience-item.is-expanded .experience-front .experience-employer { margin-top: 18px; font-size: 14px; }
  #experience-viewer .experience-item.is-expanded .experience-front .experience-category { margin-top: 4px; font-size: 13px; }
  #experience-viewer .experience-item.is-expanded .experience-front .experience-period { margin-top: 12px; font-size: 12px; }
  #experience-viewer .experience-item.is-expanded .experience-back { gap: 20px; }
  #experience-viewer .experience-item.is-expanded .experience-details {
    display: block;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #555 transparent;
    font-size: 15px;
    line-height: 1.75;
  }
  #experience-viewer .experience-item.is-expanded .experience-details dt { margin-bottom: 12px; font-size: 16px; }
  #experience-viewer .experience-item.is-expanded .experience-details > div + div { margin-top: 20px; padding-top: 20px; }
  #experience-viewer .experience-item.is-expanded .experience-detail-copy li { grid-template-columns: 8.5em minmax(0, 1fr); column-gap: 14px; }
  #experience-viewer .experience-item.is-expanded .experience-detail-copy li + li { margin-top: 12px; }
}

/* assets/ui/typography-refinements.css */
/* Reuse the existing Kanit faces; display headings retain their own weights. */
:root {
  --text-body-weight: 200;
  --text-control-weight: 300;
  --text-small-weight: 300;
}

body { font-weight: var(--text-body-weight); }

:where(button, input, select, textarea),
.pill,
.ghost,
.pg-contribution-label {
  font-weight: var(--text-control-weight);
}

.sub,
.about-description,
.contact-sub,
.links,
.menu-list a {
  font-weight: var(--text-body-weight);
}

#works .wg-filter,
#works .wg-tool {
  font-weight: var(--text-body-weight);
}

/* Reserve the selected weight when the animated filter measures its tabs. */
#works .wg-filter[aria-pressed=true],
#works .wg-filter-measure > .wg-filter,
#works .wg-tool[aria-pressed=true] {
  font-weight: var(--text-control-weight);
}

#works .wg-category { font-weight: var(--text-body-weight); }

#works .wg-category sup,
#works .wg-grid-caption b,
#works .wg-masonry-item .wg-grid-caption b,
.experience-topline,
.experience-department,
.experience-employer,
.experience-category,
.experience-period,
.experience-cta,
.about-logo-loop__name,
.sling-button__hint,
.closing-meta {
  font-weight: var(--text-small-weight);
}

.experience-details,
.effort-level {
  font-weight: var(--text-body-weight);
}

.experience-detail-copy strong,
#experience-viewer .experience-item.is-expanded .experience-detail-copy strong {
  font-weight: var(--text-control-weight);
}

/* Compact Chinese labels keep regular strokes on phone and tablet screens. */
@media (max-width: 767px),
       (orientation: landscape) and (max-width: 1023px) and (max-height: 600px),
       (pointer: coarse) and (max-width: 1366px) {
  :root { --text-small-weight: 400; }

  .pg-contribution,
  .pg-link-note,
  .pg-links a,
  .experience-details,
  .effort-heading label,
  .quiet-motion-toggle,
  #works .wg-filter,
  #works .wg-tool {
    font-weight: var(--text-control-weight);
  }
}

/* assets/ui/visual-refinements.css */
/* Scale the artwork inside its existing slot so logo spacing stays stable. */
#home .logos .lg > img,
#home .logos .lg > .hero-logo-crop {
  scale: .9;
  transform-origin: center bottom;
}

#home .logos .lg3 > img { scale: .82; }

/* A thin variant of the site's rounded chevron marks external links. */
#projects .pg-link {
  --pg-jump-size: 13px;
  --pg-jump-gap: 8px;
  position: relative;
  gap: var(--pg-jump-gap);
  border-bottom: 0;
}
#projects .pg-link::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% - var(--pg-jump-size) - var(--pg-jump-gap));
  height: 1px;
  background: #777;
  transition: background-color 220ms;
  pointer-events: none;
}
#projects .pg-link:hover::before { background: #dedede; }
#projects .pg-link::after {
  content: '';
  display: block;
  flex: none;
  width: var(--pg-jump-size);
  height: var(--pg-jump-size);
  background: currentColor;
  -webkit-mask: url("chevron-link-thin.svg") center/contain no-repeat;
  mask: url("chevron-link-thin.svg") center/contain no-repeat;
  rotate: -45deg;
  translate: 0 -.4em;
  opacity: .75;
  pointer-events: none;
}

/* The kicker shares the QR trigger's row height, aligning both text centers. */
#about .about-contact { --contact-trigger-size: 56px; }
#about .about-contact .contact-sling { --sl-size: var(--contact-trigger-size); }
#about .about-contact .about-kicker {
  display: flex;
  align-items: center;
  min-height: var(--contact-trigger-size);
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.4;
}

#about .about-statement {
  font-size: clamp(30px, 3.05vw, 46px);
  line-height: 1.25;
}

#works .wg-category {
  font-size: clamp(12px, .8vw, 16px);
  font-weight: 200;
  color: #c4c4c4;
}
#works .wg-category sup { font-weight: 200; }

@media (min-width: 1024px) and (pointer: fine) {
  #about .about-intro { translate: 0 20px; }
  #home .hero .pill-cta {
    width: calc(154 * var(--h));
    height: calc(44 * var(--h));
    font-size: calc(18.5 * var(--h));
  }
}

@media (max-width: 767px), (pointer: coarse) and (max-width: 1366px) {
  #about .about-contact { --contact-trigger-size: 48px; }
}

@media (orientation: landscape) and (max-width: 1023px) and (max-height: 600px) {
  #about .about-contact { --contact-trigger-size: 44px; }
}

/* assets/ui/works-desktop-guides.css */
/* First-use hints sit outside the clipped category capsule and its hit areas. */
#works .works-toolbar { position: relative; }
#works .wg-desktop-guides { display: none; }

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  #works .wg-desktop-guides {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 240;
    pointer-events: none;
  }

  #works .wg-desktop-guide {
    position: absolute;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: max-content;
    margin: 0;
    color: var(--muted);
    opacity: .55;
    font-size: 14px;
    font-weight: var(--text-body-weight, 200);
    line-height: 1.5;
    letter-spacing: .04em;
    white-space: nowrap;
    pointer-events: none;
  }

  #works .wg-desktop-guide[hidden] { display: none; }
  #works .wg-guide-copy { padding-top: 18px; }
  #works .wg-guide-arrow {
    display: block;
    flex: none;
    width: 44px;
    height: 34px;
    background: currentColor;
    -webkit-mask: url("guide-bent-arrow.svg") center / contain no-repeat;
    mask: url("guide-bent-arrow.svg") center / contain no-repeat;
  }

  #works .wg-desktop-guide--grid { flex-direction: row-reverse; }
  #works .wg-desktop-guide--grid .wg-guide-arrow { scale: -1 1; }
}

/* assets/ui/menu-browser-notice.css */
.menu-browser-notice {
  display: none;
  margin: 0;
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .menu-browser-notice {
    display: block;
    margin-top: clamp(56px, 8vh, 96px);
    color: var(--ink, #ededed);
    opacity: .42;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.9;
    letter-spacing: .035em;
  }
}

.menu-browser-notice-line {
  display: block;
  white-space: nowrap;
}

/* Keep the original Chinese character widths throughout the scramble. */
.menu-notice-cell {
  position: relative;
  display: inline-block;
}

.menu-notice-ghost { visibility: hidden; }
.menu-notice-glyph {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.menu-notice-readable {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .menu-notice-cell { transition: none !important; }
}

/* assets/ui/page-appearance.css */
/* Fold Text is an arrival layer; the real text keeps its original layout and name. */
.pa-fold-host { position: relative; }
.pa-fold-host .pa-fold-source { display: inline !important; opacity: 0; }
.pa-fold-host .pa-fold-surface {
  display: block !important;
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.pa-fold-host .pa-fold-segment {
  display: block !important;
  position: absolute;
  perspective: 700px;
  white-space: pre;
}
.pa-fold-host .pa-fold-piece {
  display: inline-block !important;
  position: relative;
  white-space: pre;
  transform-origin: 50% 0%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}
.pa-fold-host .pa-fold-shade {
  display: block !important;
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(180deg,rgba(0,0,0,.58),rgba(0,0,0,.22) 42%,rgba(255,255,255,.26));
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
}
.pa-fold-source::before,.pa-fold-surface::before,.pa-fold-segment::before,
.pa-fold-piece::before,.pa-fold-shade::before { content: none !important; }
.pa-nav-label { display: inline-block; }

.experience-track>.experience-item { transform-origin: 50% 0; }
.experience-track .experience-wire { transform-origin: 50% 0; }
.experience-track>.experience-item.ac-moving { will-change: rotate; }
/* Folded menu lettering owns the movement on both touch and pointer layouts. */
.menu .menu-list li,.is-open .menu .menu-list li { translate: none; }

@media (prefers-reduced-motion:reduce) {
  .pa-fold-host .pa-fold-source { opacity: 1; }
  .pa-fold-host .pa-fold-surface { display: none !important; }
}