:root {
  color: #f2f4f1;
  background: #07090d;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #07090d; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

#catalog {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  background: #07090d;
}

.brand-lockup { display: flex; align-items: center; gap: 12px; padding: 22px 28px; border-bottom: 1px solid #ffffff12; }
.brand-mark { display: grid; place-items: center; width: 94px; height: 30px; overflow: hidden; }
.brand-mark img { width: 94px; height: 30px; object-fit: contain; filter: brightness(0) invert(1); opacity: .94; }
.brand-lockup strong, .brand-lockup small { display: block; }
.brand-lockup small { margin-top: 3px; color: #8e9b9a; font-size: 11px; }

.catalog-content {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 32px 0;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.scene-list {
  display: flex;
  flex: 0 0 auto;
  gap: clamp(18px, 2vw, 32px);
  width: max-content;
  padding: 10px 0;
  transform: translate3d(var(--rail-x, 0), 0, 0);
  transition: transform 420ms cubic-bezier(.22, .78, .2, 1);
  will-change: transform;
}

.scene-card {
  flex: 0 0 clamp(420px, 54vw, 720px);
  width: clamp(420px, 54vw, 720px);
  padding: 7px;
  border: 1px solid #ffffff16;
  border-radius: 20px;
  outline: 0;
  color: #fff;
  background: #101719cc;
  box-shadow: 0 18px 52px #00000040;
  opacity: .46;
  filter: saturate(.7) brightness(.72);
  transform: scale(.91);
  transition: transform 420ms cubic-bezier(.22, .78, .2, 1), opacity 300ms ease, filter 300ms ease, border-color 220ms ease, box-shadow 300ms ease;
  will-change: transform, opacity;
}

.scene-card[data-focused="true"] {
  z-index: 1;
  opacity: 1;
  filter: none;
  transform: scale(1);
  border-color: rgba(255,255,255,.82);
  box-shadow: 0 0 0 2px rgba(255,255,255,.2), 0 0 24px rgba(255,255,255,.2), 0 28px 80px #00000070;
}

.scene-card:active { transform: scale(.985); transition-duration: 90ms; }
.scene-card img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 13px; object-fit: cover; }
.catalog-status { padding: 24px; color: #91a09e; }

#catalog footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 28px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid #ffffff12;
  color: #91a09e;
  font-size: 12px;
}

#scene { position: fixed; z-index: 10; inset: 0; width: 100%; height: 100dvh; overflow: hidden; background: #07090d; }
#scene.scene-stashed { visibility: hidden; opacity: 0; pointer-events: none; }
#viewer-host, #viewer { width: 100%; height: 100%; }
#viewer { display: block; border: 0; opacity: 0; transform: scale(1.012); transition: opacity 360ms ease, transform 520ms cubic-bezier(.22, .78, .2, 1); }
#viewer.viewer-ready { opacity: 1; transform: scale(1); }

.surface-enter { animation: surface-in 360ms cubic-bezier(.22, .78, .2, 1) both; }
.surface-exit { pointer-events: none; animation: surface-out 220ms ease-in both; }

.overlay { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; gap: 10px; background: #07090df5; text-align: center; transition: opacity 240ms ease; }
.overlay i { width: 28px; height: 28px; margin: auto; border: 2px solid #74d9c144; border-top-color: #74d9c1; border-radius: 50%; animation: spin .8s linear infinite; }
.loading-track { width: min(240px, 58vw); height: 3px; margin: 4px auto 2px; overflow: hidden; border-radius: 999px; background: #74d9c126; }
.loading-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: #8de3d0; transition: width 160ms linear; }
.loading-track.is-indeterminate span { width: 42%; animation: loading-track 1.25s cubic-bezier(.4, 0, .2, 1) infinite; }
.overlay button, .control-menu button, #help button { margin: 4px; padding: 10px; border: 1px solid #ffffff28; border-radius: 10px; color: #f1f7f5; background: #111b1bea; }

details.controls { position: absolute; z-index: 3; top: max(24px, env(safe-area-inset-top)); right: 76px; }
.controls summary {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  color: #fff;
  background: #12161d94;
  box-shadow: 0 14px 38px #00000040, inset 0 1px #ffffff14;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  cursor: pointer;
  list-style: none;
  transition: background 160ms ease, transform 160ms ease;
}
.controls summary::-webkit-details-marker { display: none; }
.controls summary:hover, .controls summary:focus-visible { background: #ffffff2e; transform: translateY(-1px); }
.controls summary:active { transform: scale(.94); transition-duration: 90ms; }
.controls summary .iconfont { font-family: iconfont !important; font-size: 18px; font-style: normal; line-height: 1; }
.control-menu { position: absolute; top: 46px; right: 0; display: grid; min-width: 0; padding: 6px; border: 1px solid #ffffff20; border-radius: 16px; background: #0c1414d9; box-shadow: 0 16px 40px #0009; backdrop-filter: blur(22px) saturate(150%); transform-origin: top right; animation: menu-in 220ms cubic-bezier(.22, .78, .2, 1) both; }
.control-menu button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; font-size: 20px; }
.control-menu button:hover, .control-menu button:focus-visible { background: #ffffff18; }
.control-menu button:active { transform: scale(.94); }
.control-menu .iconfont { font-family: iconfont !important; font-style: normal; line-height: 1; }
.control-menu button[aria-label="返回目录"] .iconfont { font-size: 21px; }

#help { position: absolute; z-index: 4; top: max(24px, env(safe-area-inset-top)); left: 50%; width: min(960px, calc(100vw - 360px)); padding: 16px 64px 16px 22px; border: 1px solid #ffffff24; border-radius: 14px; color: #f4f7f6; background: #0c1114e8; box-shadow: 0 18px 50px #0008; backdrop-filter: blur(20px) saturate(140%); text-align: center; line-height: 1.5; transform: translateX(-50%); animation: help-in 220ms cubic-bezier(.22, .78, .2, 1) both; }
#help button { position: absolute; top: 50%; right: 10px; margin: 0; transform: translateY(-50%); }
#help button:active { transform: translateY(-50%) scale(.94); }
.catalog-edge { position: fixed; left: 50%; bottom: 58px; z-index: 4; padding: 8px 13px; border: 1px solid #74d9c166; border-radius: 999px; color: #dffbf3; background: #10201ee8; box-shadow: 0 10px 30px #0008; font: 11px "DM Mono", monospace; transform: translate(-50%, 8px); opacity: 0; pointer-events: none; }
.catalog-edge--pulse { animation: catalog-edge-in 180ms ease-out forwards; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes loading-track { from { transform: translateX(-115%); } to { transform: translateX(340%); } }
@keyframes surface-in { from { opacity: 0; transform: scale(.992); } to { opacity: 1; transform: scale(1); } }
@keyframes surface-out { to { opacity: 0; transform: scale(.992); } }
@keyframes menu-in { from { opacity: 0; transform: scale(.92) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes help-in { from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.98); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes catalog-edge-in { to { transform: translate(-50%, 0); opacity: 1; } }

@media (max-width: 760px) {
  .brand-lockup { padding-left: 20px; padding-right: 20px; }
  .catalog-content { padding: 24px 0; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
  .scene-card { flex-basis: 82vw; width: 82vw; }
  #catalog footer { padding-left: 20px; padding-right: 20px; }
  #help { top: max(76px, calc(env(safe-area-inset-top) + 68px)); width: calc(100vw - 40px); }
}

@media (prefers-reduced-motion: reduce) {
  .scene-list, .scene-card, #viewer, .controls summary { transition-duration: 1ms !important; }
  .surface-enter, .surface-exit, .control-menu, #help, .catalog-edge--pulse { animation: none !important; }
  .loading-track.is-indeterminate span { width: 100%; animation: none; opacity: .7; }
  .scene-card { transform: none; }
  .scene-card[data-focused="true"] { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .controls summary, .control-menu, #help { background: #11171b; backdrop-filter: none; }
}