:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: #11191a;
  color: #fffdf7;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 280px; }
body { overflow-x: hidden; }
[hidden] { display: none !important; }
.cinema { position: relative; isolation: isolate; min-height: 480px; height: 100svh; overflow: hidden; }
.visual { position: absolute; inset: 0; z-index: -1; background: #16282c; }
.poster, .film { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; object-position: center 51%; }
.film { opacity: 0; transition: opacity 800ms ease; }
.film.is-playing { opacity: 1; }
.shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(4 12 15 / .46), transparent 26%, rgb(3 12 16 / .14) 42%, rgb(3 12 16 / .16) 75%, rgb(3 12 16 / .45)), linear-gradient(90deg, rgb(3 13 19 / .08), rgb(3 13 19 / .20) 46%, transparent); }
.masthead { position: absolute; top: 0; inset-inline: 0; padding: 30px 40px; }
.brand { display: inline-flex; align-items: center; gap: 13px; white-space: nowrap; }
.brand-mark { width: 46px; height: 46px; object-fit: contain; border-radius: 12px; }
.brand-name { font-size: 29px; font-weight: 750; letter-spacing: .06em; }
h1 { position: absolute; margin: 0; inset-inline: 24px; top: 50%; transform: translateY(-50%); text-align: center; font-size: clamp(38px, 5.3vw, 84px); font-weight: 400; letter-spacing: .045em; line-height: 1.4; text-shadow: 0 3px 32px rgb(0 0 0 / .30); text-wrap: balance; }
.footline { position: absolute; right: 40px; bottom: max(28px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 16px; }
.media-state { font-size: 10px; letter-spacing: .08em; color: rgb(255 253 247 / .6); }
.motion-control { color: #fffdf7; background: rgb(255 255 255 / .09); padding: 9px 14px; border: 1px solid rgb(255 255 255 / .3); border-radius: 100px; font: inherit; font-size: 11px; cursor: pointer; }
.motion-control:focus-visible { outline: 2px solid white; outline-offset: 5px; }
@media (min-width: 1800px) { .masthead { padding: 38px 56px; } .footline { right: 56px; } }
@media (max-width: 700px) {
  .masthead { padding: 23px; }
  .brand { gap: 9px; }
  .brand-mark { width: 37px; height: 37px; }
  .brand-name { font-size: 23px; }
  .poster, .film { object-position: 62% center; }
  .shade { background: linear-gradient(180deg, rgb(3 12 16 / .40), rgb(3 12 16 / .08) 25%, rgb(3 12 16 / .25) 58%, rgb(3 12 16 / .5)); }
  h1 { inset-inline: 26px; font-size: clamp(34px, 7.9vw, 55px); letter-spacing: .035em; line-height: 1.55; }
  .footline { right: 23px; bottom: max(24px, env(safe-area-inset-bottom)); }
  .media-state { font-size: 9px; }
}
@media (max-height: 540px) and (min-width: 701px) {
  .cinema { min-height: 360px; }
  .masthead { padding: 20px 30px; }
  h1 { font-size: 48px; }
  .footline { bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) { .film { transition: none; } }