* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; width: 100%; min-height: 100%; }
body { min-height: 100svh; background: #10131b; color: #fff; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; display: grid; place-items: center; }
.stage { position: relative; width: 100%; aspect-ratio: 852 / 393; max-height: 100svh; overflow: hidden; container-type: inline-size; }
@media (min-aspect-ratio: 852/393) { .stage { width: calc(100svh * 852 / 393); } }
.background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--view-x, 50%) center; pointer-events: none; }
.stage { touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.stage img, .stage a { -webkit-user-drag: none; -webkit-touch-callout: none; }
.logo { pointer-events: none; -webkit-user-drag: none; }
.view-controls { display: none; }
.site-language { position: absolute; top: max(10px, env(safe-area-inset-top)); left: max(12px, calc(env(safe-area-inset-left) + 8px)); display: flex; align-items: center; gap: 5px; z-index: 2; color: white; text-shadow: 0 1px 3px #153b61; font-size: 12px; }
.site-language button { border: 0; background: none; color: white; font: inherit; width: 44px; min-height: 44px; padding: 6px; cursor: pointer; text-shadow: inherit; display: inline-flex; align-items: center; justify-content: center; }
.logo { position: absolute; left: 50%; top: 9.924%; transform: translateX(-50%); width: 42.724%; height: auto; }
.actions { position: absolute; left: 50%; top: 62.341%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; }
.download { min-width: 20cqw; height: 5.164cqw; padding: 0 2cqw .235cqw; border-radius: .939cqw; display: flex; align-items: center; justify-content: center; gap: .7cqw; white-space: nowrap; color: #fff; font-size: 1.995cqw; font-weight: 600; text-decoration: none; background: linear-gradient(180deg, #6a6a6a 6.667%, #2a2a2a 90%); box-shadow: inset 0 .235cqw .059cqw rgba(255,255,255,.28), inset 0 -.352cqw .059cqw #000; text-shadow: 0 .235cqw .117cqw #000; transition: transform .08s ease, filter .08s ease; cursor: pointer; }
.download img { width: 2.582cqw; height: 2.582cqw; filter: drop-shadow(0 .235cqw .117cqw #000); }
.download[aria-disabled="true"] { cursor: default; }
.download[href]:active { transform: translateY(.235cqw) scale(.97); filter: brightness(.9); }
.download:focus-visible { outline: 3px solid #ffcf53; outline-offset: 5px; }
.status { margin: 0; font-size: 1.408cqw; line-height: 1.5; text-shadow: 0 1px 3px #000; }
.legal { display: flex; align-items: center; justify-content: center; gap: .47cqw; font-size: 1.408cqw; white-space: nowrap; text-shadow: 0 1px 3px #000; }
.legal a { color: #ff9b35; text-decoration: none; }
.legal a:hover { text-decoration: underline; }
.legal a:focus-visible { outline: 2px solid #ffcf53; outline-offset: 3px; }
footer { position: absolute; bottom: 0; width: 100%; padding: 1.408cqw 2cqw 2.113cqw; background: linear-gradient(transparent, rgba(10,22,2,.494)); text-align: center; font-size: 1.174cqw; line-height: 1.5; -webkit-text-stroke: .235cqw #000; paint-order: stroke fill; }
@media (max-width: 900px) and (orientation: portrait), (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {
  html, body { height: 100%; min-height: 0; overflow: hidden; overscroll-behavior: none; background: #68a4ed; }
  .stage { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; min-height: 0; max-height: none; aspect-ratio: auto; background: #296fa1; }
  .stage { touch-action: none; }
  .background { inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .background, .logo { will-change: transform; backface-visibility: hidden; }
  .logo { position: absolute; left: 50%; top: max(10%, calc(env(safe-area-inset-top) + 24px)); transform: translateX(-50%); width: 78%; max-width: 380px; height: auto; z-index: 1; }
  .view-controls { display: flex; position: absolute; top: calc(max(10%, calc(env(safe-area-inset-top) + 24px)) + min(26vw, 127px) + 16px); left: 24px; right: 24px; z-index: 1; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: #fff; text-shadow: 0 1px 3px #153b61; }
  #tilt { min-height: 44px; padding: 6px 14px; border: 1px solid rgba(255,255,255,.35); border-radius: 22px; color: #fff; background: rgba(12,39,66,.28); font: inherit; cursor: pointer; }
  #tilt:focus-visible { outline: 2px solid #ffcf53; outline-offset: 3px; }
  #tilt-status { max-width: 280px; text-align: center; }
  .actions { position: absolute; left: 50%; top: auto; bottom: max(16%, calc(env(safe-area-inset-bottom) + 96px)); transform: translateX(-50%); gap: 12px; width: calc(100% - 32px); z-index: 1; }
  .download { min-width: 200px; height: 54px; border-radius: 10px; padding: 0 24px 2px; gap: 8px; font-size: 20px; box-shadow: inset 0 2px .5px rgba(255,255,255,.28), inset 0 -3px .5px #000; text-shadow: 0 2px 1px #000; }
  .download img { width: 24px; height: 24px; filter: drop-shadow(0 2px 1px #000); }
  .status { font-size: 13px; }
  .legal { font-size: 13px; gap: 4px; }
  .legal a { display: inline-flex; min-height: 44px; align-items: center; }
  footer { position: absolute; bottom: 0; padding: 24px 24px max(24px, env(safe-area-inset-bottom)); background: none; color: #dce9ef; font-size: 10px; line-height: 1.8; -webkit-text-stroke: 0; text-shadow: 0 1px 3px #061721; z-index: 1; }
}
@media (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {
  .logo { top: max(6%, calc(env(safe-area-inset-top) + 10px)); width: auto; height: 27dvh; max-width: 48vw; object-fit: contain; }
  .actions { bottom: max(12%, calc(env(safe-area-inset-bottom) + 30px)); gap: 4px; width: auto; }
  .download { min-width: 170px; height: 44px; font-size: 18px; }
  .download img { width: 22px; height: 22px; }
  .status, .legal { font-size: 11px; }
  .legal a { min-height: 32px; }
  .view-controls { top: max(10px, env(safe-area-inset-top)); left: auto; right: max(16px, calc(env(safe-area-inset-right) + 8px)); max-width: 180px; font-size: 10px; gap: 0; }
  #pan-hint { display: none; }
  #tilt { min-height: 36px; padding: 5px 10px; }
  footer { font-size: 9px; line-height: 1.4; padding: 8px max(24px, calc(env(safe-area-inset-right) + 12px)) max(8px, env(safe-area-inset-bottom)) max(24px, calc(env(safe-area-inset-left) + 12px)); }
}
@media (max-width: 900px) and (orientation: portrait) and (max-height: 650px) {
  .logo { top: max(5%, calc(env(safe-area-inset-top) + 12px)); width: 65%; }
  .view-controls { top: calc(max(5%, calc(env(safe-area-inset-top) + 12px)) + 22vw + 8px); }
  .actions { bottom: max(13%, calc(env(safe-area-inset-bottom) + 76px)); gap: 6px; }
  footer { padding-top: 8px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .download { transition: none; } }