/* Layout and measurements: Figma 2679:14748. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  color: #000000e5;
  background: #fff;
  --muted: #00000099;
  --accent: #1C1B1A;
  --accent-foreground: #FFFFFF;
  --hover-surface: #F5F5F5;
  --divider: #1462731a;
  --desktop-shell-width: 420px;
  --portfolio-header-wide-height: 72px;
  --portfolio-header-compact-height: var(--portfolio-header-wide-height);
  --portfolio-header-inline-inset: 24px;
  --portfolio-header-wide-columns: calc(var(--desktop-shell-width) - var(--portfolio-header-inline-inset) - 1px) calc(var(--portfolio-header-inline-inset) + 1px) 1px 16px minmax(0, 1fr);
}
* { box-sizing: border-box; }
body { margin: 0; }
h1, h2, p { margin: 0; }
img { display: block; }
button { font: inherit; color: inherit; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid #555; outline-offset: 3px; }
.portfolio { --preview-gap: 24px; display: grid; grid-template-columns: var(--desktop-shell-width) minmax(0, 1fr); }
.floating-nav { width: auto; height: 36px; display: flex; align-items: center; justify-content: flex-end; padding: 0; background: transparent; }
.floating-nav button, .floating-nav a { display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 14px; font-weight: 400; line-height: 24px; transition: opacity 140ms ease; }
.floating-nav-about { flex: 0 0 auto; gap: 8px; padding: 6px 10px 6px 8px; color: inherit; text-decoration: none; white-space: nowrap; }
.floating-nav img { width: 20px; height: 20px; flex-shrink: 0; }
@media (hover: hover) { .floating-nav button:hover, .floating-nav a:hover { background: var(--hover-surface); }
  .intro-scroll:hover { color: rgba(0, 0, 0, .9); }
  .project:not(.is-highlighted):hover .project-title { color: rgba(0, 0, 0, .9); }
  .project:not(.is-highlighted):hover .project-company { color: rgba(0, 0, 0, .6); } }
@media (prefers-reduced-motion: reduce) { .floating-nav button, .floating-nav a, .project, .project::before, .project-title, .project-company { transition: none; } }
.context { display: flex; flex-direction: column; gap: 0; height: 100dvh; min-height: 760px; }
.context:focus { outline: none; }
.intro-area { display: flex; flex-direction: column; gap: 16px; padding: 24px; flex: 1; min-height: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; height: 40px; flex-shrink: 0; }
.identity { display: flex; align-items: center; gap: 8px; }
.signature { width: auto; height: 20px; }
.about-button { display: grid; place-items: center; width: 44px; height: 40px; padding: 6px 12px; border-radius: 10px; }
.about-button img { width: 20px; height: 20px; }
.introduction { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
h1 { font-size: 20px; font-weight: 600; line-height: 32px; }
.introduction p { width: 360px; max-width: 100%; padding-inline: 16px; color: var(--muted); font-size: 16px; line-height: 28px; text-wrap: balance; }
.divider { position: relative; height: 0; flex-shrink: 0; }
.divider::after { content: ""; position: absolute; inset: 0; border-top: 1px solid var(--divider); }
.project-sections { flex: 0 0 auto; }
.selected-work, .micro-projects { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.selected-work { padding-bottom: 0; }
h2 { font-size: 16px; font-weight: 600; line-height: 28px; color: var(--muted); }
#work-title, #micro-title { font-size: 14px; line-height: 20px; }
.project-list { display: flex; flex-direction: column; gap: 8px; }
.project { position: relative; display: flex; flex: 0 0 auto; align-items: center; width: 100%; min-height: 50px; padding: 2px 0 2px 16px; border: 0; border-radius: 0; color: #aeaeb2; text-align: left; }
.project::before { position: absolute; inset: 4px auto 4px 0; width: 2px; background: #221f1e; content: ""; opacity: 0; transition: opacity 200ms ease; }
.project.is-highlighted::before { opacity: 1; }
.project-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 0; }
.project-title { font-size: 16px; font-weight: 500; line-height: 26px; transition: color 200ms ease; }
.project-company { color: #aeaeb2; font-size: 14px; font-weight: 400; line-height: 20px; transition: color 200ms ease; }
.project.is-highlighted .project-title { color: #000000e5; }
.project.is-highlighted .project-company { color: #00000099; }
#work-title { font-weight: 500; }
.micro-list { position: relative; display: flex; gap: 8px; }
.micro-project { display: inline-flex; align-items: center; flex-shrink: 0; padding: 6px 8px; border: 1px solid #f2f2f7; border-radius: 10px; color: #00000099; font-size: 14px; line-height: 24px; white-space: nowrap; }
a.micro-project { text-decoration: none; }
.micro-project.is-previewed { background: var(--hover-surface); }
.micro-project-arrow-slot { display: block; box-sizing: content-box; flex: 0 0 auto; width: 14px; max-width: 0; min-width: 0; height: 14px; overflow: hidden; margin-inline-start: 0; transition: max-width 200ms cubic-bezier(.22, 1, .36, 1), margin-inline-start 200ms cubic-bezier(.22, 1, .36, 1); }
.micro-project-arrow { display: block; width: 14px; height: 14px; pointer-events: none; opacity: 0; transform: translateX(-4px); transition: opacity 200ms cubic-bezier(.22, 1, .36, 1), transform 200ms cubic-bezier(.22, 1, .36, 1); }
.micro-project.is-arrow-active .micro-project-arrow-slot { max-width: 14px; margin-inline-start: 8px; }
.micro-project.is-arrow-active .micro-project-arrow { opacity: 1; transform: translateX(0); }
.micro-preview { position: absolute; left: 0; bottom: calc(100% + 8px); display: flex; box-sizing: border-box; width: 300px; height: 264px; z-index: 11; flex-direction: column; border-radius: 10px; background: #fff; color: #00000099; box-shadow: 0 0 0 1px #e1e1e1, 0 55px 24px #08090a03, 0 31px 18px #08090a05, 0 14px 14px #08090a08, 0 3px 8px #08090a0a; opacity: 0; visibility: hidden; transform: translateY(4px); transition: height 200ms cubic-bezier(.22, 1, .36, 1), opacity 140ms ease, transform 140ms ease, visibility 140ms; }
.micro-preview-surface { position: absolute; inset: 0; display: flex; box-sizing: border-box; width: 100%; height: 100%; flex-direction: column; overflow: hidden; border-radius: inherit; background: #fff; opacity: 0; visibility: hidden; transition: opacity 120ms cubic-bezier(.22, 1, .36, 1), visibility 120ms; }
.micro-preview-surface.is-current { opacity: 1; visibility: visible; }
.micro-preview::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 8px; }
.micro-preview.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.micro-preview[hidden], .micro-preview-image[hidden], .micro-preview-date[hidden] { display: none; }
.micro-preview-image { width: 300px; height: 188px; overflow: hidden; border-radius: 10px 10px 0 0; background: #f2f2f7; }
.micro-preview-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.micro-preview--design-system { height: auto; box-shadow: 0 0 0 1px #e1e1e1, 0 85px 44px #08090a03, 0 55px 30px #08090a05, 0 31px 18px #08090a08, 0 14px 14px #08090a0a, 0 3px 8px #08090a0a; }
.micro-preview-surface--design-system { gap: 8px; }
.micro-preview--design-system .micro-preview-surface--design-system.is-current { position: relative; inset: auto; height: auto; flex: 0 0 auto; }
.micro-preview-surface--design-system .micro-preview-image { flex: 0 0 163px; width: 100%; height: 163px; border-radius: 10px 10px 0 0; background: #faf9f8; }
.micro-preview-surface--design-system .micro-preview-heading { flex: 0 0 auto; width: 100%; gap: 8px; margin: 0; padding: 0 12px; }
.micro-preview-surface--design-system .micro-preview-heading p { color: #00000099; }
.micro-preview-surface--design-system .micro-preview-date { flex: 0 0 auto; margin: 0; padding: 0 12px 12px; line-height: 20px; }
.micro-preview--ai-workflow { height: 207px; }
.micro-preview-surface--ai-workflow { gap: 8px; padding-bottom: 12px; }
.micro-preview-surface--ai-workflow .micro-preview-image { flex: 0 0 163px; width: 100%; height: 163px; border-radius: 10px 10px 0 0; }
.micro-preview-surface--ai-workflow .micro-preview-heading { flex: 0 0 24px; width: 100%; margin: 0; padding: 0 12px; }
.micro-preview-heading { display: flex; gap: 8px; padding: 0 12px; margin-top: 8px; align-items: flex-start; }
.micro-preview-heading p { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 24px; }
.micro-preview-date { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 0 12px 12px; font-size: 14px; line-height: 24px; }
.micro-preview-date img { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .micro-preview { transition: none; transform: none; } }
@media (prefers-reduced-motion: reduce) { .micro-preview-surface { transition: none; } }
@media (prefers-reduced-motion: reduce) { .micro-project-arrow-slot, .micro-project-arrow { transition: none; transform: none; } }
.visual {
  position: relative;
  --preview-height: calc(min(680px, calc(100dvh - 240px)) + 60px);
  --sequence-start: 80px;
  --sequence-end: 24px;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.next-project-button,
.previous-project-button {
  position: fixed;
  z-index: 21;
  left: 50%;
  bottom: 24px;
  display: grid;
  width: 36px;
  height: 36px;
  transform: translateX(-50%);
  padding: 7px;
  place-items: center;
  border: 1px solid #E8E8E8;
  border-radius: 12px;
  background: #FFFFFF99;
  box-shadow: 0 85px 44px #08090A03, 0 55px 30px #08090A05, 0 31px 18px #08090A08, 0 14px 14px #08090A0A, 0 3px 8px #08090A0A;
}
.next-project-button { bottom: 24px; }
.previous-project-button { top: 24px; }
.next-project-button[hidden], .previous-project-button[hidden] { display: none; }
.next-project-chevron { display: block; width: 20px; height: 20px; overflow: visible; }
.next-project-button:focus-visible, .previous-project-button:focus-visible { outline: 2px solid #555; outline-offset: 3px; }
@media (hover: hover) {
  .next-project-button:hover, .previous-project-button:hover { background: #fff; }
}
.previous-project-button .next-project-chevron { transform: rotate(180deg); }
.visual::-webkit-scrollbar { display: none; }
.visual:focus-visible { outline: 2px solid #777; outline-offset: -3px; }
.preview-list { display: flex; flex-direction: column; gap: var(--preview-gap); padding-block: var(--sequence-start) var(--sequence-end); }
.preview { position: relative; box-sizing: border-box; height: var(--preview-height); margin-right: 16px; border: 1px solid rgba(0, 0, 0, .08); border-radius: 10px; overflow: hidden; flex-shrink: 0; scroll-snap-align: center; opacity: .35; transition: opacity 180ms ease; background: #fff; }
.preview:first-child { scroll-snap-align: start; scroll-margin-top: var(--sequence-start); }
.preview:last-child { scroll-snap-align: end; scroll-margin-bottom: var(--sequence-end); }
.preview.is-active { opacity: 1; }
.preview-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.preview-foreground { position: absolute; pointer-events: none; }
.preview-foreground img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.preview-foreground--dictionary { inset: clamp(24px, calc((100% - 614px) / 2), 63px) 24px; display: flex; align-items: center; justify-content: center; }
.preview-foreground--maxai { top: 0; right: 0; width: auto; height: 100%; max-width: 100%; object-fit: contain; object-position: right center; }
.preview-foreground--ios { inset: 0 clamp(24px, calc((100% - 872px) / 2), 46px); display: flex; align-items: center; justify-content: center; }
.preview-caption { position: absolute; left: 32px; right: 32px; bottom: var(--caption-bottom, 32px); color: #000000b3; }
.preview-caption span { font-size: 14px; line-height: 24px; }
.preview-caption h3 { margin: 4px 0 0; font-size: 20px; line-height: 28px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .preview { transition: none; } }
.skip-link { position: fixed; top: -80px; left: 16px; background: #fff; color: inherit; padding: 12px; z-index: 3; }
.skip-link:focus { top: 12px; }
.project-entry { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border-radius: inherit; }
.project-entry:disabled { cursor: default; }
.project-entry:focus-visible { outline-offset: -4px; }
.project-detail { position: fixed; z-index: 10; width: 380px; padding: 12px 12px 12px 16px; display: flex; flex-direction: column; justify-content: center; gap: 8px; border-radius: 10px; background: #fff; color: #000000e5; font-size: 14px; font-weight: 400; line-height: 24px; box-shadow: 0 0 0 1px #E8E8E8, 0 55px 24px #08090a03, 0 31px 18px #08090a05, 0 14px 14px #08090a08, 0 3px 8px #08090a0a; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 120ms ease, transform 120ms ease, visibility 120ms; }
.project-detail.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.detail-heading { display: flex; align-items: flex-start; gap: 10px; }
.detail-heading p { flex: 1; min-width: 0; }
.detail-heading img { flex-shrink: 0; width: 20px; height: 20px; }
.detail-row { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.detail-row[hidden] { display: none; }
.detail-row img { flex-shrink: 0; width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .project-detail { transition: none; transform: none; } }

/* One shared header; on wide screens it occupies the same grid row as the page. */
body { display: grid; grid-template-columns: minmax(0, 1fr); }
.global-header { grid-area: 1 / 1; align-self: start; position: sticky; top: 0; z-index: 20; height: var(--portfolio-header-wide-height); padding: 0 var(--portfolio-header-inline-inset) 0 0; display: grid; grid-template-columns: var(--portfolio-header-wide-columns); grid-template-rows: var(--portfolio-header-wide-height); align-items: center; pointer-events: none; }
.global-header > *, .header-controls > * { pointer-events: auto; }
.home-header-rail { grid-column: 1 / 3; grid-row: 1; display: flex; width: var(--desktop-shell-width); height: var(--portfolio-header-wide-height); align-items: center; padding: 24px; border-right: 1px solid transparent; }
.header-controls { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: var(--portfolio-header-wide-columns); align-items: center; pointer-events: none; }
.header-controls .language-control { grid-column: 1; justify-self: end; }
.floating-nav { grid-column: 5; justify-self: end; position: static; flex-shrink: 0; }
.portfolio { grid-area: 1 / 1; min-width: 0; }
.context, .project-sections { min-width: 0; }
.intro-area { padding-top: 88px; }
.intro-scroll { display: none; color: var(--muted); padding: 4px 12px; line-height: 24px; }
.selected-work { scroll-margin-top: 104px; }
.micro-anchor { position: relative; min-width: 0; }
.micro-list { flex-wrap: nowrap; overflow-x: auto; padding-inline-end: 8px; scroll-padding-inline-end: 8px; scrollbar-width: none; -ms-overflow-style: none; }
.micro-project { flex: 0 0 auto; }
.micro-list::-webkit-scrollbar { display: none; }
@media (width >= 1200px) {
  .portfolio { grid-template-columns: var(--desktop-shell-width) 1px 16px minmax(0, 1fr); }
  .portfolio::before { grid-column: 2; grid-row: 1; background: #e8e8e8; content: ""; }
  .context { grid-column: 1; }
  .visual { grid-column: 4; }
  .preview-list { width: min(calc(100% - 32px), 964px); margin-inline: auto; }
  .preview { margin-right: 0; }
}
@media (width < 1200px) {
  .portfolio::before { display: none; }
  .intro-scroll { display: block; }
  body { display: block; --page-padding: 24px; }
  .global-header { display: flex; height: var(--portfolio-header-compact-height); padding: 0 var(--portfolio-header-inline-inset) 0 var(--page-padding); background: rgba(255, 255, 255, 0.9); justify-content: flex-start; gap: 16px; }
  .global-header::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: #f5f5f5; opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
  .global-header.is-scrolled::after { opacity: 1; }
  .global-header .home-header-rail { flex: 0 0 auto; width: auto; height: 100%; padding: 0; border-right: 0; }
  .header-controls { display: flex; order: 2; align-items: center; gap: 4px; margin-left: auto; pointer-events: none; }
  .floating-nav { gap: 4px; }
  .header-controls .language-control, .floating-nav { grid-column: auto; justify-self: auto; }
  .portfolio { display: block; --preview-gap: 16px; }
  .context { height: auto; min-height: 0; gap: 0; }
  .intro-area { flex: none; min-height: 0; padding: clamp(32px, 7vw, 80px) var(--page-padding) 24px; }
  .introduction { flex: none; }
  .divider { display: block; height: 1px; margin-inline: var(--page-padding); }
  .divider::after { border-top-color: #e8e8e8; }
  .visual { flex: none; width: 100%; height: auto; margin-block-start: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; overscroll-behavior-y: auto; scroll-padding-inline: var(--page-padding); }
  .next-project-button, .previous-project-button { position: absolute; left: 0; top: 0; right: auto; bottom: auto; transform: none; }
  .next-project-chevron { transform: rotate(-90deg); }
  .previous-project-button .next-project-chevron { transform: rotate(90deg); }
  .preview-list { flex-direction: row; gap: var(--preview-gap); padding: 0 var(--page-padding); width: max-content; }
  .preview { width: calc(100vw - 2 * var(--page-padding)); height: auto; aspect-ratio: 3 / 2; margin: 0; scroll-snap-align: center; }
  .preview:first-child { scroll-snap-align: start; scroll-margin: 0; }
  .preview:last-child { scroll-snap-align: end; scroll-margin: 0; }
  .selected-work, .micro-projects { padding-inline: var(--page-padding); min-width: 0; }
  .selected-work { scroll-margin-top: 85px; }
  .project-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .project { min-width: 0; }
  .project-title { display: block; width: 100%; min-width: 0; overflow: visible; text-overflow: clip; white-space: normal; }
  .visual { scrollbar-width: none; -ms-overflow-style: none; }
  .visual::-webkit-scrollbar { display: none; }
}
@media (width < 640px) {
  body { --page-padding: 16px; }
  .global-header { gap: 8px; }
  .header-controls { gap: 4px; }
  .signature { max-width: 90px; width: auto; height: 20px; flex-shrink: 0; }
  .floating-nav { width: auto; padding: 0; height: 36px; }
  .floating-nav-about { gap: 4px; padding: 6px 10px 6px 4px; }
  .intro-area { padding-top: 32px; }
  .selected-work { scroll-margin-top: 85px; }
  .micro-preview { width: min(300px, calc(100vw - 32px)); max-width: calc(100vw - 32px); }
  .micro-preview-image { width: 100%; }
}

/* Homepage first entrance is opt-in and remains fully visible without JS. */
#portfolio .home-title-anchor { position: relative; }
.home-title-visual {
  position: absolute;
  inset: 0;
  color: inherit;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  white-space: pre;
}
.home-title-character {
  position: absolute;
  display: inline-block;
  color: inherit;
  font: inherit;
  line-height: inherit;
  white-space: pre;
}
.home-title-character::before { content: attr(data-glyph); white-space: pre; }
#portfolio[data-home-entrance="running"] #intro-title.home-title-anchor {
  color: transparent;
}
#portfolio[data-home-entrance="running"] #intro-title .home-title-visual {
  opacity: 1;
}
#portfolio[data-home-entrance="running"] #intro-title .home-title-character {
  animation: home-title-character-reveal 300ms cubic-bezier(.22, 1, .36, 1) var(--home-title-delay) backwards;
}
#portfolio[data-home-entrance="running"] .introduction > p.home-description-words > .home-description-word {
  animation: home-description-word-reveal 380ms cubic-bezier(.22, 1, .36, 1) var(--home-word-delay) backwards;
}
#portfolio[data-home-entrance="running"] #selected-work {
  animation: home-block-reveal 650ms cubic-bezier(.22, 1, .36, 1) var(--home-content-delay) backwards;
}
#portfolio .micro-projects[data-home-reveal="scheduled"] {
  opacity: 0;
}
#portfolio[data-home-entrance="running"] .micro-projects[data-home-reveal="scheduled"] {
  animation:
    home-micro-opacity-reveal 650ms cubic-bezier(.22, 1, .36, 1) calc(var(--home-content-delay) + 250ms) backwards,
    home-micro-blur-reveal 650ms cubic-bezier(.22, 1, .36, 1) calc(var(--home-content-delay) + 250ms);
}
#portfolio[data-home-entrance="running"] .preview > .preview-background,
#portfolio[data-home-entrance="running"] .preview > .preview-foreground {
  animation: home-preview-reveal 900ms cubic-bezier(.22, 1, .36, 1) var(--home-content-delay) backwards;
}
.global-header[data-home-entrance="running"] .site-logo,
.global-header[data-home-entrance="running"] .language-control,
.global-header[data-home-entrance="running"] .floating-nav {
  animation: home-header-reveal 650ms cubic-bezier(.22, 1, .36, 1) calc(var(--home-content-delay) + 250ms) backwards;
}
@media (width < 1200px) {
  #portfolio[data-home-entrance="running"] .intro-scroll {
    animation: home-header-reveal 650ms cubic-bezier(.22, 1, .36, 1) calc(var(--home-content-delay) + 250ms) backwards;
  }
}
@keyframes home-title-character-reveal {
  from { opacity: .15; filter: blur(3px); transform: translateY(4px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes home-description-word-reveal {
  from { opacity: 0; filter: blur(4px); }
  to { opacity: 1; filter: blur(0); }
}
@keyframes home-block-reveal {
  from { opacity: 0; filter: blur(5px); }
  to { opacity: 1; filter: blur(0); }
}
@keyframes home-micro-opacity-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes home-micro-blur-reveal {
  from { filter: blur(5px); }
  to { filter: blur(0); }
}
@keyframes home-preview-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes home-header-reveal {
  from { opacity: 0; filter: blur(3px); }
  to { opacity: 1; filter: blur(0); }
}

/* Homepage footer spacing follows the preview rhythm, outside the shared component. */
.portfolio > .visual > [data-home-footer],
.portfolio .project-sections > [data-home-footer] {
  margin-block-start: var(--preview-gap);
  margin-block-end: 0;
}
.portfolio > .visual > [data-home-footer] {
  scroll-margin-block-end: 0;
}