:root {
  color-scheme: dark;
  --viewport-width: 100vw;
  --viewport-height: 100vh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --logo-left: 28px;
  --logo-top: 22px;
  --logo-width: 230px;
  --language-top: 28px;
  --language-right: 28px;
  --entry-font-size: 14px;
  --language-font-size: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; background: #000000; }
body { color: #fff; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, 'PingFang SC', sans-serif; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 1px solid #ddd; outline-offset: 5px; }
#safe-area-probe { position: fixed; visibility: hidden; pointer-events: none; padding: env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px); }
#viewport-root { position: fixed; left: 0; top: 0; width: var(--viewport-width); height: var(--viewport-height); overflow: hidden; background: #000000; isolation: isolate; }
#site-header { position: absolute; inset: 0; pointer-events: none; z-index: 110; }
#brand-link { position: fixed; top: var(--logo-top); left: var(--logo-left); width: var(--logo-width); aspect-ratio: 694 / 231; display: block; transform-origin: 0 0; z-index: 110; pointer-events: auto; visibility: hidden; opacity: 0; }
#brand-svg, #brand-svg svg { display: block; width: 100%; height: 100%; }
#language-switch { position: fixed; top: var(--language-top); right: var(--language-right); display: flex; align-items: center; gap: 5px; pointer-events: auto; font-size: var(--language-font-size); white-space: nowrap; }
#language-switch button { min-width: 38px; min-height: 44px; border: 0; background: transparent; padding: 0 5px; color: #767676; font-weight: 400; letter-spacing: .11em; transition: color 150ms ease; }
#language-switch button[data-language="zh"] { min-width: 46px; letter-spacing: .08em; }
#language-switch button[aria-pressed="true"] { color: #eeeeee; }
#language-switch span { color: #454545; font-size: 13px; font-weight: 200; }
#home-view { position: absolute; inset: 0; background: #000000; }
#home-background { display: block; position: absolute; inset: 0; pointer-events: none; user-select: none; }
#home-background img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.entry { display: block; position: absolute; background: transparent; border: 0; min-width: 44px; min-height: 44px; color: #c7c9cd; --entry-color: #60e5ed; }
.entry-label { position: absolute; left: 0; top: var(--label-top, 0px); display: block; white-space: nowrap; font-family: 'Avenir Next', Avenir, 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif; font-size: var(--entry-font-size); font-weight: 300; line-height: 1.35; letter-spacing: .035em; transition: color 160ms ease; }
.entry-projects { color: #f1f3f4; }
.entry-stories { --entry-color: #88b3fb; }
.entry-studio { --entry-color: #edf4ff; }
.entry::before { content: ''; position: absolute; left: 0; bottom: 1px; width: 22px; height: 1px; background: var(--entry-color); opacity: .36; }
.entry:focus-visible .entry-label { color: var(--entry-color); }
html[lang="zh-CN"] .entry-label { font-family: 'PingFang SC', 'Helvetica Neue', sans-serif; font-weight: 300; letter-spacing: .15em; }
#home-view.home-enter .entry-label { animation: home-reveal var(--home-fade,650ms) ease-out both; }
#section-view { position: absolute; inset: 0; background: #000000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; padding: calc(var(--safe-top) + 110px) calc(var(--safe-right) + 24px) calc(var(--safe-bottom) + 36px) calc(var(--safe-left) + 24px); }
#section-name { font-family: 'Times New Roman', Georgia, 'Songti SC', serif; font-weight: 400; font-size: clamp(28px, 4vw, 60px); letter-spacing: .2em; text-align: center; margin: 0; padding-left: .2em; }
#back-home { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 12px; color: #999; font-size: 14px; font-weight: 400; letter-spacing: .07em; }
#skip-intro { position: fixed; bottom: calc(var(--safe-bottom) + 14px); left: 50%; transform: translateX(-50%); min-width: 64px; min-height: 48px; padding: 0 10px; border: 0; background: transparent; color: #a5a5a5; font-size: 26px; font-weight: 300; letter-spacing: .05em; line-height: 1; z-index: 120; }
@keyframes home-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (hover: hover) and (pointer: fine) {
  .entry:hover .entry-label { color: var(--entry-color); }
  #language-switch button:hover, #back-home:hover, #skip-intro:hover { color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}