/* Original video colors, with the action bar and introduction near the bottom. */
main { max-width: none; margin: 0; padding: 0; }
:root { --paper: #fff; }
.home-hero {
  --hero-shade-opacity: .8;
  position: relative;
  isolation: isolate;
  min-height: 640px;
  height: min(1000px, 100svh);
  overflow: hidden;
  background: #14242b;
  color: #fff;
}
.hero-image { position: absolute; z-index: -2; inset: 0; pointer-events: none; }
.hero-image>img,.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 58% 50%; }
.hero-video { opacity: 0; }
.hero-video.is-active { opacity: 1; }
.hero-image>.hero-slide { opacity: 0; }
.hero-image>.hero-slide.is-active { opacity: 1; }
.hero-image>.hero-final { opacity: 0; }
.is-final-frame .hero-image>.hero-final { opacity: 1; }
.hero-shade { position: absolute; z-index: -1; inset: 0; background: #000; opacity: var(--hero-shade-opacity); pointer-events: none; }
.hero-shell { position: relative; width: min(1680px, 100%); height: 100%; min-height: inherit; margin: 0 auto; padding: 112px clamp(24px, 6vw, 100px) 110px; display: flex; align-items: center; justify-content: center; }
.hero-bottom { position: absolute; bottom: clamp(38px, 6svh, 64px); left: 50%; transform: translateX(-50%); width: min(1100px, calc(100% - 64px)); text-align: center; }
.home-description { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 10px; margin-top: 20px; color: #fff; font-size: clamp(12px, 1vw, 14px); line-height: 1.8; text-shadow: 0 1px 2px #0007; }
.home-description p { margin: 0; }
.home-identity { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.home-identity>span+span { display: inline-flex; align-items: center; gap: 10px; }
.home-identity>span+span::before { content: ""; width: 1px; height: 1em; background: currentColor; opacity: .7; }
.home-actions { display: grid; grid-template-columns: 1fr 1.15fr 1.65fr 1.15fr; align-items: stretch; gap: 12px; padding: 16px; background: #00000080; }
.home-actions :is(a,button) { min-width: 0; display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 48px; padding: 11px 16px; border: 0; border-radius: 0; font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; transition: filter .2s; }
.home-actions .home-primary { background: #000; }
.home-actions .home-wechat { background: #0074d4; }
.home-actions .home-bilibili { background: #fc319d; }
.home-actions .home-email { background: #fec305; }
.home-actions :is(a,button):hover { filter: brightness(1.08); }
.home-actions .contact-label { font: inherit; }
.home-actions svg { flex-shrink: 0; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.home-actions .wechat-icon { fill: currentColor; stroke: currentColor; stroke-width: 8; }
#works { width: 100%; max-width: 1620px; margin: 0 auto; padding: 0 clamp(20px, 3vw, 44px); background: #fff; }
#works .work-tools { background: #fffffff2; border-top: 0; }
#works .project-card .card-image, #works .filters button { border-radius: 0; }
#works .filters button:hover { background: #f1f1f1; color: #111; }
#works .filters button[aria-pressed="true"] { background: #000; color: #fff; }
@media (max-width: 760px) {
  .home-hero { height: auto; min-height: max(620px, 92svh); }
  .hero-shell { height: auto; min-height: inherit; padding: 130px 22px 140px; }
  .hero-image>img,.hero-video { object-position: 62% 50%; }
  .hero-bottom { width: calc(100% - 40px); bottom: 36px; }
  .home-description { margin-top: 18px; font-size: 12px; line-height: 1.8; }
  .home-identity,.home-identity>span+span { gap: 8px; }
  .home-actions { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 12px; gap: 10px; }
  .home-actions :is(a,button) { gap: 7px; padding: 10px 8px; font-size: 12px; }
  .home-actions .home-email span { min-width: 0; white-space: normal; overflow-wrap: anywhere; font-size: 11px; line-height: 1.4; }
  .home-actions svg { width: 16px; height: 16px; }
}
@media (max-height: 580px) and (min-width: 761px) {
  .home-hero { height: auto; min-height: 480px; }
  .hero-shell { padding: 96px 40px 100px; }
  .home-description { margin-top: 12px; font-size: 12px; }
  .home-actions { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .home-actions :is(a,button) { transition: none; } }
.footer-copyright { white-space: pre-line; overflow-wrap: anywhere; }

:root{--accent:#4385f5}.filters button[aria-pressed="true"]{color:#4385f5}.project-card .card-image{border-radius:0px}