:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #090b12; color: #f3f5fa; --perf-safe-top: env(safe-area-inset-top, 0px); --perf-safe-right: env(safe-area-inset-right, 0px); --perf-safe-bottom: env(safe-area-inset-bottom, 0px); --perf-safe-left: env(safe-area-inset-left, 0px); }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #090b12; }
body { overflow-x: hidden; }
[data-perf-runtime-root] { position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; }
[data-perf-scene] { position: relative; display: grid; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; place-items: center; contain: layout paint style; background: #090b12; }
[data-perf-scene][data-canvas-mode="scroll"] { display: block; overflow-x: hidden; overflow-y: auto; place-items: initial; cursor: none; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
[data-perf-scene][data-canvas-mode="scroll"][data-perf-touch-scroll="limited-inertia"] { touch-action: pinch-zoom; }
[data-perf-scene][data-canvas-mode="scroll"][data-perf-scroll-locked="true"] { overflow-y: hidden; overscroll-behavior: none; touch-action: none; -webkit-overflow-scrolling: auto; }
[data-perf-scene][data-canvas-mode="scroll"], [data-perf-scene][data-canvas-mode="scroll"] * { user-select: none; -webkit-user-select: none; }
[data-perf-scene][data-canvas-mode="scroll"] img { -webkit-user-drag: none; }
[data-perf-scene][data-canvas-mode="scroll"]::-webkit-scrollbar { width: 0; height: 0; display: none; }
[data-perf-scene][data-perf-plane-role="active"] { z-index: 1; }
[data-perf-scene][data-lifecycle="transition-target"], [data-perf-scene][data-lifecycle="transition-source"] { position: absolute; inset: 0; }
[data-perf-scene][data-perf-plane-role="standby"] { z-index: 2; opacity: 0; pointer-events: none !important; }
[data-perf-scene][data-perf-plane-role="standby"] * { pointer-events: none !important; }
[data-perf-scene][data-perf-plane-role="transition-source"] { z-index: 1; pointer-events: none !important; }
[data-perf-scene][data-perf-plane-role="transition-source"] * { pointer-events: none !important; }
[data-perf-touch-cursor] { position: fixed; z-index: 20; width: 24px; height: 24px; border-radius: 999px; pointer-events: none; background: rgba(0,0,0,.38); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 8px 20px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.08); transform: translate(-50%,-50%) scale(1); transition: transform .08s ease, background-color .08s ease, opacity .08s ease; opacity: 0; }
[data-perf-touch-cursor][data-visible="true"] { opacity: .82; }
[data-perf-touch-cursor][data-pressed="true"] { background: rgba(0,0,0,.58); transform: translate(-50%,-50%) scale(.78); opacity: .95; }
[data-perf-scene][data-perf-flow-swipe="true"] { touch-action: pan-y; }
[data-perf-stage-shell] { position: relative; display: grid; width: 100%; height: 100%; overflow: hidden; place-items: start; }
[data-perf-scene][data-canvas-mode="scroll"] [data-perf-stage-shell] { display: block; min-height: 100%; overflow: visible; }
[data-perf-stage-pin] { position: sticky; top: 0; left: 0; width: 100%; height: 100dvh; overflow: visible; }
[data-perf-stage] { position: relative; flex: none; transform-origin: center top; contain: layout paint style; background: transparent; }
[data-perf-scene][data-canvas-mode="scroll"] [data-perf-stage] { overflow: hidden; }
[data-perf-alpha-mask-defs] { position: absolute; width: 0; height: 0; pointer-events: none; }
[data-perf-alpha-mask-source-node] { visibility: hidden !important; pointer-events: none !important; }
[data-perf-alpha-mask-surface], [data-perf-alpha-mask-content] { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
[data-perf-layer] { position: absolute; overflow: hidden; transform-origin: center center; contain: layout paint; }
[data-perf-layer][data-perf-layer-type="group"] { pointer-events: none; overflow: visible; contain: layout style; }
[data-perf-layer][data-perf-transform-motion="true"] { will-change: transform; }
[data-perf-layer][data-perf-virtualization="offscreen"] { content-visibility: auto; contain-intrinsic-size: var(--perf-intrinsic-size, 1px 1px); }
[data-perf-layer][data-perf-presence="inactive"] { display: none !important; }
[data-perf-visibility="hidden"], [data-perf-visibility="hidden"] [data-perf-layer] { visibility: hidden !important; pointer-events: none !important; }
[data-perf-layer][data-perf-pre-enter-staged="true"] { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
[data-perf-layer] > img, [data-perf-layer] > video, [data-perf-layer] > canvas { display: block; width: 100%; height: 100%; object-fit: fill; }
/* Suppress native incomplete-image outlines without changing authored geometry or hit targets. */
[data-perf-layer] img:not([src]), [data-perf-layer] img[src=""], [data-perf-layer] img[data-perf-image-state="loading"], [data-perf-layer] img[data-perf-image-state="error"] { opacity: 0; }
[data-perf-layer] > audio { display: block; width: 100%; height: 100%; min-height: 40px; }
[data-perf-layer] > img[data-object-fit="contain"], [data-perf-layer] > video[data-object-fit="contain"], [data-perf-layer] > canvas[data-object-fit="contain"] { object-fit: contain; }
[data-perf-layer] > img[data-object-fit="cover"], [data-perf-layer] > video[data-object-fit="cover"], [data-perf-layer] > canvas[data-object-fit="cover"] { object-fit: cover; }
[data-perf-packed-alpha-source] { position: fixed !important; left: -10000px !important; top: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
[data-perf-video-cover] { position: absolute; z-index: 5; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
[data-perf-video-cover][hidden] { display: none; }
[data-perf-video-play] { appearance: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; position: absolute; z-index: 6; display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 999px; background: rgba(0,0,0,.58); color: white; transform: translate(-50%,-50%); cursor: pointer; }
[data-perf-video-play][data-perf-video-play-custom] { border-radius: 0; background: transparent; box-shadow: none; }
[data-perf-video-play][hidden], [data-perf-video-unmute][hidden] { display: none; }
[data-perf-video-play] img { display: block; object-fit: contain; pointer-events: none; }
[data-perf-video-unmute] { position: absolute; z-index: 6; right: 8px; bottom: 8px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(0,0,0,.62); color: white; font: 600 12px/1 ui-sans-serif,system-ui,sans-serif; cursor: pointer; }
[data-perf-video-controls] { touch-action: none; position: absolute; z-index: 7; inset: auto 0 0; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 8px; background: rgba(15,23,42,.88); color: #fff; }
[data-perf-video-controls] button { flex: 0 0 44px; min-height: 36px; border: 0; border-radius: 4px; padding: 0; background: transparent; color: inherit; cursor: pointer; }
[data-perf-video-controls] input { min-width: 0; accent-color: #fff; }
[data-perf-video-seek] { flex: 1 1 auto; width: 0; }
[data-perf-video-volume] { flex: 0 1 64px; width: 64px; }
[data-perf-runtime-root][data-transition-locked="true"] [data-perf-scene] { pointer-events: none; }
[data-perf-layer-text] { display: block; width: 100%; height: 100%; white-space: pre-wrap; overflow: hidden; }
[data-perf-layer][data-perf-interactive="true"] { pointer-events: auto; }
[data-perf-button] { appearance: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; scale: 1; transform-origin: center center; transition: scale 90ms ease-out; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; border: 1px solid rgba(255,255,255,.24); border-radius: 20px; background: rgba(255,255,255,.16); color: #fff; font: 600 12px/1.2 Inter, ui-sans-serif, system-ui, sans-serif; box-shadow: none; }
[data-perf-button]:active:not(:disabled) { scale: var(--perf-button-press-scale,.95); }
[data-perf-button][data-perf-button-pressed="true"]:not(:disabled) { scale: var(--perf-button-press-scale,.95); }
[data-perf-button]:disabled { cursor: wait; opacity: .55; }
.h5-loading-progress {
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  background: transparent;
}
.h5-loading-progress-track {
  position: relative;
  width: 100%;
  height: var(--loading-progress-thickness, 10px);
  border-radius: var(--loading-progress-radius, 999px);
  background: var(--loading-progress-track-color, #e2e8f0);
  overflow: hidden;
}
.h5-loading-progress-fill {
  position: relative;
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--loading-progress-fill-color, #38bdf8);
  transition: width 160ms ease;
  overflow: hidden;
  will-change: width;
}
.h5-loading-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.46), transparent);
  transform: translateX(-100%);
  animation: h5-loading-progress-shine 1.4s linear infinite;
}
.h5-loading-progress[data-loading-progress-animation="none"] .h5-loading-progress-fill::after {
  display: none;
}
@keyframes h5-loading-progress-shine {
  to { transform: translateX(100%); }
}
/* Match the sandbox document's light scheme so the browser preserves its transparent canvas. */
[data-perf-code-motion-frame] { display: block; width: 100%; height: 100%; border: 0; color-scheme: only light !important; background: transparent; }
[data-perf-poster-overlay]:not([hidden]):not([data-perf-presentation-closing="true"]) { animation: perf-poster-presentation-in 180ms ease both; }
[data-perf-poster-overlay] { opacity: 1; transition: opacity 180ms ease; }
[data-perf-poster-overlay][data-perf-presentation-closing="true"] { opacity: 0; pointer-events: none; }
@keyframes perf-poster-presentation-in { from { opacity: 0; } to { opacity: 1; } }
[data-perf-poster-overlay] > [data-perf-presentation-shell] { display: flex; z-index: 1; min-width: 0; min-height: 0; pointer-events: none; }
[data-perf-poster-backdrop] { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-position: center; background-size: cover; background-repeat: no-repeat; }
[data-perf-poster-backdrop][hidden] { display: none; }
[data-perf-poster-content] { display: flex; flex: none; align-items: center; justify-content: center; overflow: hidden; pointer-events: auto; }
[data-perf-poster-content] > img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: auto; -webkit-user-select: auto; -webkit-touch-callout: default; }
[data-perf-poster-overlay] [data-perf-presentation-close] { min-width: 0; min-height: 0; padding: 0; pointer-events: auto; }
[data-perf-poster-overlay] [data-perf-presentation-close] > img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
[data-perf-presentation-overlay] { position: fixed; z-index: 92; display: grid; place-items: center; background: rgba(0,0,0,.72); box-sizing: border-box; overflow: hidden; }
[data-perf-presentation-overlay][hidden] { display: none; }
[data-perf-presentation-shell] { position: relative; display: grid; width: min(100%,960px); height: min(100%,90vh); place-items: center; overflow: hidden; }
[data-perf-presentation-shell] > img, [data-perf-presentation-shell] > video, [data-perf-presentation-shell] > canvas { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
[data-perf-presentation-shell] > video { width: 100%; height: 100%; min-width: 0; min-height: 0; background: #000; }
[data-perf-presentation-shell] > canvas[data-perf-packed-alpha-canvas] { width: 100%; height: 100%; min-width: 0; min-height: 0; background: transparent; }
[data-perf-gallery-mode] [data-perf-presentation-shell] { padding: 16px; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); }
[data-perf-gallery-mode] > [data-perf-presentation-shell] { z-index: 1; }
[data-perf-gallery-backdrop] { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-position: center; background-size: cover; background-repeat: no-repeat; }
[data-perf-gallery-backdrop][hidden] { display: none; }
[data-perf-presentation-shell] > [data-perf-gallery-media] { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; object-position: center; }
[data-perf-presentation-close] { position: absolute; z-index: 2; top: 10px; right: 10px; min-width: 36px; min-height: 36px; border: 0; border-radius: 999px; background: rgba(0,0,0,.62); color: white; font: 600 20px/1 sans-serif; }
[data-perf-carousel] { position: relative; width: 100%; height: 100%; overflow: hidden; }
[data-perf-carousel-slide] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity var(--perf-carousel-duration,300ms) ease; }
[data-perf-carousel-slide][data-active="true"] { opacity: 1; pointer-events: auto; }
[data-perf-carousel-slide] img { display: block; width: 100%; height: 100%; }
[data-perf-carousel-control] { position: absolute; z-index: 3; border: 0; background: transparent; color: white; }
[data-perf-carousel-dots] { position: absolute; z-index: 3; left: 50%; bottom: 10px; display: flex; gap: 8px; transform: translateX(-50%); }
[data-perf-carousel-dot] { width: 8px; height: 8px; border: 0; border-radius: 999px; padding: 0; background: rgba(255,255,255,.55); }
[data-perf-carousel-dot][data-active="true"] { background: #fff; }
[data-perf-sequence-frame] { position: relative; width: 100%; height: 100%; overflow: hidden; }
[data-perf-sequence-frame] > img, [data-perf-sequence-frame] > span { display: block; width: 100%; height: 100%; }
[data-perf-marquee-track] {
  position: absolute;
  inset: 0;
  overflow: visible;
  will-change: auto;
  animation-name: perf-marquee-translate;
  animation-duration: var(--perf-marquee-duration, 1s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
@keyframes perf-marquee-translate {
  from { transform: translate(0,0); }
  to { transform: translate(var(--perf-marquee-x,0px),var(--perf-marquee-y,0px)); }
}
[data-perf-hosted-form] { display: grid; gap: 10px; width: 100%; height: 100%; padding: 10px; overflow: auto; background: rgba(255,255,255,.96); color: #111827; }
[data-perf-hosted-form] label, [data-perf-hosted-form] fieldset { display: grid; gap: 5px; margin: 0; border: 0; padding: 0; }
[data-perf-hosted-form] input, [data-perf-hosted-form] textarea, [data-perf-hosted-form] select, [data-perf-hosted-form] button { min-height: 36px; font: inherit; }
[data-perf-hosted-form-status] { min-height: 20px; margin: 0; font-size: 12px; }
[data-perf-bgm-control] { position: fixed; z-index: 88; top: max(12px,env(safe-area-inset-top)); right: max(12px,env(safe-area-inset-right)); display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 0; padding: 0; background: transparent; box-shadow: none; color: white; overflow: visible; transform-origin: center center; -webkit-tap-highlight-color: transparent; }
[data-perf-bgm-control][hidden] { display: none; }
[data-perf-bgm-rotor] { position: relative; display: block; width: 100%; height: 100%; transform-origin: center center; }
[data-perf-bgm-icon] { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity 100ms ease; }
[data-perf-bgm-icon] img { display: block; width: 100%; height: 100%; object-fit: contain; }
[data-perf-bgm-icon] img[hidden], [data-perf-bgm-fallback][hidden] { display: none; }
[data-perf-bgm-fallback] { display: grid; place-items: center; width: 100%; height: 100%; font: 24px/1 system-ui, sans-serif; }
@keyframes perf-bgm-icon-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { [data-perf-bgm-rotor], [data-perf-bgm-icon] { animation: none !important; transition: none !important; } }
html[data-perf-marquee-preview-active="true"],
html[data-perf-marquee-preview-active="true"] body,
html[data-perf-marquee-preview-active="true"] [data-perf-runtime-root],
html[data-perf-marquee-preview-active="true"] [data-perf-scene] { background: transparent !important; }
html[data-perf-marquee-preview-active="true"] [data-perf-touch-cursor],
html[data-perf-marquee-preview-active="true"] [data-perf-bgm-control],
html[data-perf-marquee-preview-active="true"] [data-perf-presentation-overlay] { display: none !important; }
html[data-perf-marquee-preview-active="true"] [data-perf-layer-id]:not([data-perf-marquee-preview-resident="true"]):not([data-perf-marquee-visibility-probe]) { visibility: hidden !important; pointer-events: none !important; }