:root {
  --ink: #ecf0e7;
  --muted: rgba(236, 240, 231, .62);
  --quiet: rgba(236, 240, 231, .52);
  --lime: #d8ff58;
  --line: rgba(236, 240, 231, .25);
  --mono: "DM Mono", ui-monospace, monospace;
  --sans: "Manrope", "Helvetica Neue", sans-serif;
  --cjk-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", sans-serif;

  /* HS / Typography — mirrors the Figma design system roles. */
  --type-heading-family: var(--sans);
  --type-heading-family-cjk: var(--cjk-sans);
  --type-heading-weight: 500;
  --type-hero-heading-weight: 400;
  --type-hero-heading-stretch: 1.08;
  --type-hero-heading-tracking: -.015em;
  --type-heading-leading: .9;
  --type-heading-tracking: -.07em;
  --type-size-meta: 10px;
  --type-size-meta-strong: 11px;
  --type-size-body: 14px;
  --type-size-body-small: 13px;
  --type-size-body-lead: 15px;
  --type-size-body-plus: 20px;
  --type-size-title-s: 28px;
  --type-size-title-xs: 36px;
  --type-size-title-m: 48px;
  --type-size-title-l: 64px;
  --type-size-title-xl: 88px;
  --type-primary-title-size: clamp(42px, 5vw, 72px);
  --type-heading-size: var(--type-primary-title-size);
  --type-body-family: var(--sans);
  --type-body-family-cjk: var(--cjk-sans);
  --type-body-size: var(--type-size-body);
  --type-body-leading: 1.9;
  --type-meta-family: var(--mono);
  --type-meta-family-cjk: var(--cjk-sans);
  --type-meta-size: var(--type-size-meta);
  --type-meta-leading: 1;
  --type-meta-tracking: .1em;
  --type-meta-strong-weight: 500;
  --type-meta-strong-size: var(--type-size-meta-strong);
  --type-meta-strong-tracking: .12em;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #0b0d0d; }
body { color: var(--ink); font-family: var(--sans); overflow: hidden; }
[lang="zh"], [lang="zh-CN"] { font-family: var(--type-body-family-cjk); }
[lang="zh"] h1, [lang="zh"] h2, [lang="zh"] h3, [lang="zh-CN"] h1, [lang="zh-CN"] h2, [lang="zh-CN"] h3 { font-family: var(--type-heading-family-cjk); }
[lang="zh"] .site-intro__meta, [lang="zh-CN"] .site-intro__meta { font-family: var(--type-meta-family-cjk); }
body.studio-ready { overflow-x: hidden; overflow-y: auto; background: #050606; }
/* Navigation state takes precedence over responsive layout rules. */
body:not(.studio-ready) { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior-y: none; touch-action: pan-x pinch-zoom; }
.page-loader { position: fixed; z-index: 20; inset: 0; display: grid; place-content: center; gap: 22px; background: #0b0d0d; opacity: 1; transition: opacity 700ms ease-out, visibility 700ms ease-out; }
.page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.page-loader__circle { position: relative; width: 84px; height: 84px; display: grid; place-items: center; margin: 0 auto; }
.page-loader__ring { position: absolute; inset: 0; border: 1px solid rgba(236,240,231,.22); border-top-color: var(--lime); border-right-color: var(--lime); border-radius: 50%; animation: loader-spin 900ms linear infinite; }
.page-loader__circle strong { color: var(--ink); font: 500 18px/1 var(--mono); letter-spacing: -.06em; }
.page-loader p { margin: 0; color: var(--quiet); font: 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
@keyframes loader-spin { to { transform: rotate(360deg); } }
button, input { font: inherit; }
button { color: inherit; }

.hero { min-height: 100svh; position: relative; isolation: isolate; overflow: hidden; background: #121616; cursor: ew-resize; }
.hero::after { content: ""; position: absolute; z-index: -1; inset: auto 0 0; height: 30%; background: linear-gradient(to bottom, rgba(5,6,6,0) 0%, rgba(5,6,6,.48) 40%, #050606 100%); opacity: 0; pointer-events: none; }
body.studio-ready .hero::after { opacity: 1; }
.hero__backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 72% 44%, #3a4540 0, #1e2926 24%, #0d1110 67%); z-index: -3; }
.hero__video { position: absolute; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.78) contrast(1.05); transition: opacity 500ms ease-out; }
.hero__video--fallback { display: none; }
.hero__video--next { display: block; opacity: 0; }
.hero__video--third { display: block; opacity: 0; }
.hero__video--fourth { display: block; opacity: 0; filter: grayscale(1) saturate(0) contrast(1.08) brightness(1.16); }
.hero__video--second-canvas { display: none; opacity: 0; }
.hero--show-second #hero-canvas, .hero--show-second .hero__video--fallback { opacity: 0; }
.hero--show-second .hero__copy { opacity: 0 !important; }
.hero--show-second .hero__video--next { opacity: 1; will-change: transform; transform: translate3d(var(--camera-sway-x, 0px), 0, 0) scale(var(--second-scale, 1)); transform-origin: 48% 50%; }
.hero--show-third .hero__video--next { opacity: 0; }
.hero--show-third .hero__video--third { opacity: 1; transform: translate3d(var(--camera-sway-x, 0px), 0, 0) scale(var(--third-scale, 1)); transform-origin: 48% 50%; }
.hero--show-fourth .hero__video--third { opacity: 0; }
.hero--show-fourth .hero__video--third, .hero--show-fourth .hero__video--fourth { transition: opacity 900ms ease-out; }
.hero--show-fourth .hero__video--fourth { opacity: 1; transform: translate3d(var(--camera-sway-x, 0px), 0, 0) scale(var(--fourth-scale, 1)); transform-origin: 48% 50%; }
.hero--show-third .hero__third-fade { opacity: var(--third-fade-opacity, 0); }
.hero--show-fourth .hero__third-fade { opacity: var(--third-fade-opacity, 1); }
.hero__star-flash { position: absolute; inset: 0; z-index: 1; background: var(--star-flash-color, #fff); opacity: 0; pointer-events: none; }
.hero--show-third .hero__star-flash { opacity: var(--star-flash-opacity, 0); }
.hero--show-fourth .hero__veil { opacity: .36; transition: opacity 500ms ease-out; }
.hero--show-second.hero--second-tail-canvas .hero__video--next { opacity: 0; }
.hero--show-second.hero--second-tail-canvas .hero__video--second-canvas { display: block; opacity: 1; transform: translate3d(var(--camera-sway-x, 0px), 0, 0) scale(var(--second-scale, 1)); transform-origin: 48% 50%; }
.hero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 10, 9, .94) 0%, rgba(7, 10, 9, .78) 29%, rgba(7, 10, 9, .12) 69%, rgba(7, 10, 9, .22) 100%), linear-gradient(0deg, rgba(7, 10, 9, .64) 0%, transparent 23%, rgba(7, 10, 9, .18) 100%); pointer-events: none; }
.hero__third-fade { position: absolute; inset: 0; z-index: -1; background: #000; opacity: 0; pointer-events: none; transition: opacity 140ms linear; }

.topbar, .footer { position: absolute; left: clamp(24px, 4vw, 64px); right: clamp(24px, 4vw, 64px); display: flex; align-items: center; justify-content: space-between; font: 500 10px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.topbar { top: 30px; }
.wordmark { color: var(--ink); text-decoration: none; font-size: 12px; letter-spacing: .16em; }
.wordmark span { color: var(--lime); }
.topbar__meta { position: absolute; left: 50%; transform: translateX(-50%); color: var(--muted); }
.topbar__meta-copy { display: inline-flex; align-items: baseline; gap: 7px; line-height: 1; white-space: nowrap; text-align: center; }
.topbar__meta-divider, .ui-bilingual-divider { color: var(--quiet); }
.live-dot { width: 6px; height: 6px; display: inline-block; margin-right: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(216,255,88,.12); }
.sound-button { display: inline-flex; align-items: center; gap: 10px; border: 0; padding: 8px 0; color: var(--muted); background: none; cursor: pointer; font: inherit; letter-spacing: inherit; }
.sound-button:hover { color: var(--ink); }
.sound-button.is-playing { color: var(--ink); }
.sound-button__bars { display: flex; height: 11px; align-items: end; gap: 2px; }
.sound-button__bars i { width: 2px; background: currentColor; display: block; transform-origin: bottom; transition: transform 80ms linear, opacity 120ms ease-out; }
.sound-button__bars i:nth-child(1) { height: 5px; }.sound-button__bars i:nth-child(2) { height: 9px; }.sound-button__bars i:nth-child(3) { height: 7px; }.sound-button__bars i:nth-child(4) { height: 11px; }

.hero__copy { position: absolute; left: clamp(24px, 9vw, 144px); top: 50%; max-width: 590px; transform: translateY(-45%); opacity: var(--copy-opacity, 1); transition: opacity 140ms linear; pointer-events: none; }
.hero__index { margin: 0 0 30px; color: var(--lime); font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.hero__index span { padding: 0 10px; color: var(--quiet); }
h1 { margin: 0; font-family: var(--type-heading-family); font-size: var(--type-heading-size); font-weight: var(--type-heading-weight); letter-spacing: var(--type-heading-tracking); line-height: var(--type-heading-leading); }
.hero__copy h1 { letter-spacing: -.035em; }
@media (min-width: 701px) {
  .hero__copy h1 {
    font-weight: var(--type-hero-heading-weight);
    letter-spacing: var(--type-hero-heading-tracking);
    transform: scaleX(var(--type-hero-heading-stretch));
    transform-origin: left center;
  }
}
h1 em { color: var(--lime); font-style: normal; }
.hero__description { max-width: 320px; margin: 34px 0 0; color: var(--muted); font-family: var(--type-body-family); font-size: var(--type-size-body-small); font-weight: 300; line-height: 1.8; }
.hero__description .subtitle-keyword { color: var(--ink); font-weight: 400; opacity: .96; }
.hero__hint { display: flex; align-items: center; gap: 12px; margin-top: 58px; color: var(--ink); font: 500 10px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.ui-bilingual-label { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.hint-line { width: 50px; height: 1px; background: var(--lime); }
.hint-arrow { font-size: 16px; color: var(--lime); }
.advance-button { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; padding: 0; border: 0; color: var(--ink); background: transparent; cursor: pointer; pointer-events: auto; font: 500 10px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.advance-button svg { width: 34px; height: 34px; padding: 8px; border: 1px solid var(--lime); border-radius: 50%; color: var(--lime); transition: background-color 160ms ease-out, color 160ms ease-out, transform 160ms ease-out; }
.advance-button path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.advance-button:hover svg { color: #0b0d0d; background: var(--lime); transform: translateX(4px); }
.advance-button:active svg { transform: translateX(4px) scale(.94); }
.site-intro { position: absolute; z-index: 2; right: clamp(24px, 9vw, 144px); top: 50%; width: min(360px, 28vw); transform: translateY(-42%) translateX(18px); opacity: 0; filter: blur(6px); pointer-events: none; transition: opacity 520ms ease-out, transform 700ms cubic-bezier(.2, 0, 0, 1), filter 700ms ease-out; }
.hero--show-second .site-intro { opacity: var(--intro-opacity, 0); transform: translateY(-42%) translateX(0); filter: blur(var(--intro-blur, 6px)); }
.hero--show-third .site-intro { opacity: var(--intro-opacity, 1); filter: blur(var(--intro-blur, 0px)); }
.site-intro__label { margin: 0 0 24px; color: var(--lime); font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.site-intro #intro-title { margin: 0; font-size: var(--type-primary-title-size); font-weight: 500; letter-spacing: -.06em; line-height: 1.16; }
.site-intro h2 em { color: var(--lime); font-style: normal; }
.site-intro__body { max-width: 320px; margin: 28px 0 0; color: var(--muted); font-family: var(--type-body-family); font-size: var(--type-size-body-small); line-height: 1.8; }
.site-intro__meta { display: flex; gap: 22px; margin-top: 34px; color: var(--quiet); font: var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-family); letter-spacing: var(--type-meta-tracking); text-transform: uppercase; }
.back-button { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; padding: 0; border: 0; color: var(--ink); background: transparent; cursor: pointer; pointer-events: auto; font: 500 10px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.back-button svg { width: 34px; height: 34px; padding: 8px; border: 1px solid var(--lime); border-radius: 50%; color: var(--lime); transition: background-color 160ms ease-out, color 160ms ease-out, transform 160ms ease-out; }
.back-button path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.back-button:hover svg { color: #0b0d0d; background: var(--lime); transform: translateX(-4px); }
.back-button:active svg { transform: translateX(-4px) scale(.94); }
.continue-button { display: inline-flex; align-items: center; gap: 12px; margin: 30px 0 0 18px; padding: 0; border: 0; color: var(--ink); background: transparent; cursor: pointer; pointer-events: auto; font: 500 10px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.continue-button svg { width: 34px; height: 34px; padding: 8px; border: 1px solid var(--lime); border-radius: 50%; color: var(--lime); transition: background-color 160ms ease-out, color 160ms ease-out, transform 160ms ease-out; }
.continue-button path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.continue-button:hover svg { color: #0b0d0d; background: var(--lime); transform: translateX(4px); }
.continue-button:active svg { transform: translateX(4px) scale(.94); }
.hero--show-third .continue-button { opacity: 0; pointer-events: none; }
.third-copy { position: absolute; z-index: 2; left: 50%; top: 50%; width: min(820px, 88vw); text-align: center; transform: translate(-50%, calc(-50% + 22px)); opacity: 0; filter: blur(8px); pointer-events: none; transition: opacity 700ms ease-out, transform 900ms cubic-bezier(.2, 0, 0, 1), filter 900ms ease-out; }
.hero--show-third .third-copy { opacity: var(--third-copy-opacity, 0); transform: translate(-50%, -50%); filter: blur(var(--third-copy-blur, 8px)); }
.hero--show-fourth .third-copy { opacity: 1; transform: translate(-50%, -50%); filter: blur(0); }
.third-copy__label { margin: 0 0 24px; color: var(--lime); font: var(--type-meta-strong-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-family); letter-spacing: var(--type-meta-strong-tracking); text-transform: uppercase; }
.third-copy h2 { margin: 0; font-size: clamp(var(--type-size-title-m), 6.2vw, var(--type-size-title-xl)); font-weight: 500; letter-spacing: -.08em; line-height: .92; white-space: nowrap; transform: scaleX(1.08); }
.hero .third-copy h2 { line-height: 1.16; }
.third-copy h2 em { color: var(--lime); font-style: normal; }
.studio-content { min-height: 100svh; background: #050606; opacity: 0; pointer-events: none; transition: opacity 700ms ease-out; }
body.studio-ready .studio-content { opacity: 1; pointer-events: auto; }
.studio-content__inner { width: min(1180px, calc(100% - 12vw)); margin: 0 auto; padding: 15vw 0 7vw; }
.studio-intro-block { display: grid; grid-template-columns: 1fr 1.25fr; column-gap: 8vw; padding-bottom: 16vw; border-bottom: 1px solid var(--line); }
.studio-kicker { margin: 0; color: var(--lime); font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.studio-intro-block h2, .work-section h3, .statement-section h3, .studio-contact h3 { margin: 0; font-size: clamp(var(--type-size-title-m), 8.5vw, var(--type-size-title-xl)); font-weight: 500; letter-spacing: -.08em; line-height: .84; }
.studio-intro-block h2 em, .statement-section h3 em, .studio-contact h3 em { color: var(--lime); font-style: normal; }
.studio-lead { max-width: 360px; margin: 2.5vw 0 0; color: var(--muted); font-family: var(--type-body-family); font-size: var(--type-size-body-lead); line-height: 1.8; }
.work-section, .statement-section, .services-section { padding: 9vw 0 12vw; border-bottom: 1px solid var(--line); }
.section-heading { display: flex; justify-content: space-between; margin-bottom: 5vw; color: var(--quiet); font: 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.section-heading span:first-child { color: var(--lime); }
.work-section h3 { margin-bottom: 8vw; }
.project-index { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4vw; }
.project-index a { display: flex; flex-direction: column; min-width: 0; color: var(--ink); text-decoration: none; transition: color 180ms ease-out, transform 220ms ease-out; }
.project-index a:hover { transform: translateY(-6px); color: var(--ink); }
.project-card__media { aspect-ratio: 16 / 9; overflow: hidden; border: 0; background: #121616; box-shadow: 5px 10px 42px rgba(236,240,231,.06); transition: box-shadow 220ms ease-out; }
.project-index a:hover .project-card__media { box-shadow: 7px 14px 48px rgba(236,240,231,.09); }
.project-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.05); transition: transform 500ms cubic-bezier(.2, 0, 0, 1), filter 300ms ease-out; }
.project-card__media iframe { display: block; width: 100%; height: 100%; margin-inline: auto; border: 0; pointer-events: none; }
.project-index a:hover .project-card__media img { transform: scale(1.04); filter: saturate(1) contrast(1.05); }
.project-card__body { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 1vw; padding-top: 18px; }
.project-index span, .project-index em { color: var(--quiet); font: 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.project-index strong { grid-column: 2; color: #b8babb; font-size: clamp(24px, 3vw, 42px); font-weight: 500; letter-spacing: -.05em; transition: color 180ms ease-out; }
.project-index a:hover strong, .project-index a:focus-visible strong { color: #ffffff; }
.project-index strong::after { content: ""; display: inline-block; width: .6em; height: .6em; margin-left: .4em; vertical-align: .06em; background-color: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19L19 5M6 5h13v13' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.project-index em { grid-column: 2; font-style: normal; text-align: left; }
.work-section .work-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; }
.work-filters, .work-views { display:flex; flex-wrap:wrap; gap:8px; }
.work-controls button { min-height:44px; padding:10px 14px; border:1px solid transparent; border-radius:4px; background:transparent; color:#aeb3b3; font:400 var(--type-size-body)/1.5 var(--type-body-family-cjk); cursor:pointer; transition:color 180ms ease,background-color 180ms ease; }
.work-controls button:hover { color:#fff; background:#ffffff0a; }
.work-controls button[aria-pressed="true"] { color:#fff; background:#ffffff12; border-color:#ffffff26; }
.work-controls button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.work-result { margin:20px 0 32px; color:#aeb3b3; font:400 var(--type-size-body-small)/1.5 var(--type-body-family-cjk); }
.project-index > a[hidden] { display:none; }
.project-index[data-view="list"] { grid-template-columns:1fr; gap:0; }
.project-index[data-view="list"] > a { padding:26px 0; border-bottom:1px solid #ffffff18; }
.project-index[data-view="list"] > a:hover { transform:none; }
.project-index[data-view="list"] .project-card__media { display:none; }
.project-index[data-view="list"] .project-card__body { padding:0; grid-template-columns:32px minmax(0,1fr) auto; column-gap:20px; row-gap:12px; }
.project-index[data-view="list"] strong { font-size:clamp(24px,2.5vw,34px); }
.project-index[data-view="list"] em { grid-column:3; }
@media(max-width:700px) { .project-index[data-view="list"] .project-card__body { grid-template-columns:24px minmax(0,1fr); }.project-index[data-view="list"] em { grid-column:2; }.work-controls button { padding-inline:10px; }.work-views { width:100%; } }
.statement-section { display: grid; grid-template-columns: 1fr 1.25fr; column-gap: 8vw; }
.statement-section .section-heading { grid-column: 1 / -1; }
.statement-section p { max-width: 360px; margin: 1vw 0 0; color: var(--muted); font-size: var(--type-size-body-lead); line-height: 1.8; }
.services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8vw; border-top: 1px solid var(--line); }
.services-grid span { padding: 22px 0; border-bottom: 1px solid var(--line); font-size: clamp(var(--type-size-body-plus), 2.5vw, var(--type-size-title-xs)); letter-spacing: -.04em; }
.studio-contact { display: grid; grid-template-columns: 1fr 1.25fr; gap: 5vw 8vw; padding-top: 10vw; }
.studio-contact h3 { grid-column: 1 / -1; }
.studio-contact a { color: var(--lime); font: 12px/1 var(--mono); letter-spacing: .08em; text-decoration: none; }
.studio-contact a:hover { text-decoration: underline; text-underline-offset: 5px; }
.third-back-button { display: inline-flex; align-items: center; gap: 12px; margin-top: 38px; padding: 0; border: 0; color: var(--ink); background: transparent; cursor: pointer; pointer-events: auto; font: 500 10px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.third-back-button svg { width: 34px; height: 34px; padding: 8px; border: 1px solid var(--lime); border-radius: 50%; color: var(--lime); transition: background-color 160ms ease-out, color 160ms ease-out, transform 160ms ease-out; }
.third-back-button path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.third-back-button:hover svg { color: #0b0d0d; background: var(--lime); transform: translateX(-4px); }
.third-back-button:active svg { transform: translateX(-4px) scale(.94); }
.hero-scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: 24px; display: grid; justify-items: center; gap: 8px; color: var(--muted); font: 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: color 180ms ease-out, opacity 700ms ease-out, transform 900ms cubic-bezier(.2, 0, 0, 1); }
body.studio-ready .hero-scroll-cue { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; animation: scroll-cue-pulse 2200ms ease-in-out 900ms infinite; }
.hero-scroll-cue:hover { color: var(--lime); }
.hero-scroll-cue svg { width: 20px; height: 30px; color: var(--lime); overflow: visible; }
.hero-scroll-cue path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.25; }
@keyframes scroll-cue-pulse { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 5px); } }

.frame-readout { position: absolute; right: clamp(24px, 4vw, 64px); bottom: 116px; width: 170px; height: 44px; display: flex; align-items: center; gap: 8px; font-family: var(--mono); }
.frame-readout__label { flex: 0 0 34px; color: var(--quiet); font-size: var(--type-size-meta); line-height: 1; letter-spacing: .1em; }
.frame-readout strong, .frame-readout > span:last-child { color: var(--lime); font-family: var(--type-body-family); font-size: var(--type-size-body); font-weight: 400; line-height: 1.9; letter-spacing: 0; white-space: nowrap; }
.frame-readout__slash { flex: 0 0 6px; color: var(--quiet); font-size: var(--type-size-meta); line-height: 1; letter-spacing: .1em; }
.frame-readout > span:last-child { color: var(--ink); }
.hero--show-second .frame-readout, .hero--show-third .frame-readout { opacity: 0; visibility: hidden; pointer-events: none; }

.timeline { display: none; position: absolute; left: clamp(24px, 4vw, 64px); right: clamp(24px, 4vw, 64px); bottom: 62px; }
.timeline__labels { display: grid; grid-template-columns: 1fr 1fr 1fr; color: var(--quiet); font: 10px/1 var(--mono); letter-spacing: .06em; }.timeline__labels span:nth-child(2) { color: var(--lime); text-align: center; }.timeline__labels span:last-child { text-align: right; }
.timeline__track { position: relative; height: 14px; margin-top: 10px; border-top: 1px solid var(--line); pointer-events: none; }.timeline__track::before { content: ""; position: absolute; inset: -3px 0 auto; height: 5px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 8.33%); opacity: .55; }
.timeline__progress { position: absolute; top: -1px; left: 0; height: 2px; width: 0; background: var(--lime); }.timeline__thumb { position: absolute; top: -5px; left: 0; width: 10px; height: 10px; border: 1px solid var(--lime); background: #0b0d0d; border-radius: 50%; transform: translateX(-50%); }
.timeline__input { position: absolute; left: 0; top: 13px; width: 100%; height: 28px; margin: 0; opacity: 0; cursor: ew-resize; }
.timeline:focus-within .timeline__track { border-color: var(--lime); }

.footer { bottom: 26px; color: var(--quiet); }.footer span:last-child { color: var(--muted); }

#studio-content { scroll-margin-top: 24px; }

button:focus-visible, input:focus-visible { outline: 1px solid var(--lime); outline-offset: 6px; }
::selection { color: #0b0d0d; background: var(--lime); }
@media (max-width: 700px) { body { overflow: auto; --type-primary-title-size: clamp(40px, 13vw, 68px); }.studio-content__inner { width: calc(100% - 48px); padding: 100px 0 60px; }.studio-intro-block, .statement-section, .studio-contact { display: block; }.studio-intro-block h2, .work-section h3, .statement-section h3, .studio-contact h3 { margin-top: 42px; font-size: clamp(var(--type-size-title-m), 16vw, var(--type-size-title-xl)); line-height: var(--type-heading-leading); }.studio-lead, .statement-section p { margin-top: 32px; }.work-section, .statement-section, .services-section { padding: 76px 0 96px; }.section-heading { margin-bottom: 44px; }.project-index { grid-template-columns: 1fr; gap: 44px; }.project-card__body { gap: 12px; }.project-index a { gap: 0; }.project-index em { text-align: left; }.services-grid { gap: 0 24px; }.services-grid span { font-size: var(--type-size-body-plus); }.studio-contact a { display: inline-block; margin-top: 36px; } .hero { min-height: 100svh; }.topbar__meta { display: none; }.hero__copy { top: 44%; }.hero__description { margin-top: 28px; }.hero__hint { margin-top: 38px; }.frame-readout { bottom: 126px; }.footer span:last-child { display: none; } h1 { font-size: var(--type-primary-title-size); line-height: var(--type-heading-leading); }.site-intro { left: clamp(24px, 9vw, 144px); right: clamp(24px, 9vw, 144px); top: 44%; bottom: auto; width: auto; transform: translateY(-45%) translateX(18px); }.hero--show-second .site-intro { transform: translateY(-45%) translateX(0); }.site-intro h2 { font-size: var(--type-primary-title-size); line-height: var(--type-heading-leading); }.third-copy h2 { white-space: normal; transform: scaleX(1); line-height: var(--type-heading-leading); } }
@media (prefers-reduced-motion: reduce) { .hero__video { filter: saturate(.7); } .hero-scroll-cue { transition: none; } body.studio-ready .hero-scroll-cue { animation: none; } }

/* Fixed media compositions: scale and speed are baked into the optimized clips. */
.hero--show-second .hero__video--next,
.hero--show-third .hero__video--third,
.hero--show-fourth .hero__video--fourth { transform: none; }
.intro-hold { opacity:0; pointer-events:none; }
.hero[data-scene="hold"] .intro-hold { opacity:1; }
.hero[data-scene="hold"] .hero__video--next { opacity:0; }
.hero[data-scene="bridge"] .site-intro,.hero[data-scene="loop"] .site-intro { opacity:0;pointer-events:none; }
.hero[data-scene="intro"] .site-intro { pointer-events:none; }
.hero[data-scene="hold"] .site-intro { pointer-events:auto; }
.hero[data-scene="loop"] .third-copy { pointer-events:auto; }
.hero__video--third { filter:none; }
.hero--show-fourth .hero__video--third,.hero--show-fourth .hero__video--fourth { transition:opacity 180ms ease-out; }
.scene-tools { position:absolute;z-index:5;right:clamp(20px,4vw,60px);bottom:28px;display:flex;align-items:center;gap:20px;font-size:12px;color:#b8babb; }
.scene-tools button { border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;padding:10px 0; }
.scene-tools button:hover { color:#d8ff70; }
.scene-tools button:focus-visible { outline:1px solid #d8ff70;outline-offset:5px; }
#scene-status { max-width:240px; }
.hero[data-scene="explore"] #restart-intro { display:none; }
.hero[data-scene="work"] { display:none; }
.hero[data-scene="work"] + .studio-content { opacity:1;pointer-events:auto; }
@media(max-width:700px){.scene-tools{bottom:38px;left:24px;right:24px;justify-content:flex-end;gap:16px;}#scene-status{font-size:11px;max-width:160px;}.hero-scroll-cue{bottom:90px;}}
@media(prefers-reduced-motion:reduce){.hero__video,.intro-hold{transition:none;}}

/* Show the copy during the shot; navigation appears only at the fixed endpoint. */
.site-intro__body { opacity:0; transition:opacity 400ms ease-out; }
.intro-body-ready .site-intro__body { opacity:1; }
.hero:not([data-scene="hold"]) .site-intro__meta,
.hero:not([data-scene="hold"]) .site-intro .back-button,
.hero:not([data-scene="hold"]) .site-intro .continue-button { visibility:hidden;pointer-events:none; }
@media(prefers-reduced-motion:reduce){.site-intro__body{transition:none;}}

/* Navigation is button-only until the final scene. */
body:not(.studio-ready) { overflow:hidden; }
.hero .site-intro__meta,.hero .site-intro .back-button,.hero .site-intro .continue-button {
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 550ms ease-out,visibility 0s linear 550ms;
}
.hero[data-scene="hold"] .site-intro__meta,.hero[data-scene="hold"] .site-intro .back-button,.hero[data-scene="hold"] .site-intro .continue-button {
  opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s;
}
.work-back { display:inline-flex;align-items:center;margin:0 0 36px;padding:10px 0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:13px;cursor:pointer; }
.work-back:hover {color:var(--lime);}
.work-back:focus-visible {outline:1px solid var(--lime);outline-offset:5px;}
@media(prefers-reduced-motion:reduce){.hero .site-intro__meta,.hero .site-intro .back-button,.hero .site-intro .continue-button{transition:none;}}

/* The opening page loader stays unchanged; this gate only belongs to Explore. */
.advance-button { min-width:160px; }
.advance-button #explore-loading-label { display:none; min-width:12ch; font-variant-numeric:tabular-nums; }
.advance-button[data-readiness="loading"] #explore-loading-label,
.advance-button[data-readiness="error"] #explore-loading-label { display:inline; }
.advance-button[data-readiness="loading"] .ui-bilingual-label,
.advance-button[data-readiness="error"] .ui-bilingual-label { display:none; }
.advance-button[data-readiness="loading"] { cursor:wait; }
.advance-button[data-readiness="loading"] svg path { opacity:0; }
.advance-button[data-readiness="loading"] svg { border-color:rgba(216,255,112,.22);border-top-color:var(--lime);animation:explore-loading-spin 900ms linear infinite;background:transparent; }
@keyframes explore-loading-spin {to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){.advance-button[data-readiness="loading"] svg{animation:none;}}

/* Keep the ZenoCore cover frame free of an outer glow. */
#project-03 .project-card__media, #project-03:hover .project-card__media { background:#050606; box-shadow:none; }