:root {
  color-scheme: light;
  --paper: #f5f7fa;
  --ink: #17191e;
  --muted: #626772;
  --line: #dde1e8;
  --iris: #68628e;
  --frost: #e5e9f7;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; scrollbar-gutter: stable; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1; min-width: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--iris); outline-offset: 6px; border-radius: 4px; }
img { display: block; max-width: 100%; height: auto; }
figure, p, h1, h2, h3, dl, dd { margin: 0; }
.page-width { width: min(1120px, calc(100% - 80px)); margin-inline: auto; }
.skip-link { position: fixed; left: 20px; top: -90px; background: white; padding: 14px 20px; z-index: 100; }
.skip-link:focus { top: 12px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 750; font-size: 29px; letter-spacing: -1.4px; }
.brand-icon { width: 32px; height: 32px; display: grid; place-items: center; }
.brand-icon img { width: 26px; }
.site-header a:hover, .site-footer a:hover { color: var(--iris); }
.hero { overflow: hidden; padding-top: 54px; text-align: center; }
.hero-copy { position: relative; z-index: 2; padding-inline: 24px; }
.app-icon { width: 78px; height: 78px; display: grid; place-items: center; margin: 0 auto 24px; border-radius: 23px; background: white url("assets/rex-material.png") center / cover; box-shadow: 0 1px 1px #fff inset, 0 10px 24px #3c456313, 0 0 0 1px #fff; }
.app-icon img { width: 43px; }
.platform { color: var(--muted); font-size: 14px; margin-bottom: 22px; }
h1 { font-size: clamp(44px, 6.5vw, 88px); letter-spacing: -.06em; line-height: 1.12; font-weight: 650; }
.mobile-break { display: none; }
.hero-description { margin: 28px auto 25px; color: var(--muted); font-size: 19px; line-height: 1.9; }
.primary-link { display: inline-flex; align-items: center; gap: 14px; color: white; background: var(--ink); min-height: 48px; padding: 0 24px; border-radius: 28px; font-size: 15px; font-weight: 550; transition: background .2s; }
.primary-link:hover { background: #434652; }
.primary-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature-section { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 88px; padding-block: 88px; }
.feature-copy { max-width: 420px; }
.section-label { color: var(--iris); font-size: 14px; font-weight: 550; margin-bottom: 20px; }
h2 { font-size: clamp(32px, 3.6vw, 46px); font-weight: 600; letter-spacing: -.04em; line-height: 1.35; }
.feature-copy > p:not(.section-label) { margin-top: 24px; color: var(--muted); line-height: 1.95; font-size: 17px; }
.quiet-list { list-style: none; padding: 0; margin: 27px 0 0; color: #4b5260; font-size: 14px; }
.quiet-list li { position: relative; padding-left: 22px; margin-top: 13px; }
.quiet-list li::before { content: ""; width: 5px; height: 5px; border: 1.5px solid #747b90; border-radius: 50%; position: absolute; top: 7px; left: 1px; }
.illustration { min-width: 0; }
.illustration figcaption { text-align: center; color: #717786; font-size: 12px; padding-top: 22px; }
.library-illustration { padding-block: 34px 0; }
.library-window { padding: 27px 26px 19px; border-radius: 23px; background: white url("assets/rex-material.png") center / cover; box-shadow: 0 1px 0 white inset, 0 22px 60px #333f6714; transform: rotate(-3deg); }
.window-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 21px; font-weight: 600; font-size: 19px; }
.window-count { font-size: 11px; font-weight: 400; color: #626772; }
.mini-posters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mini-posters img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 7px; box-shadow: 0 5px 10px #22263324; }
.window-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 23px; font-size: 10px; color: #555c68; }
.small-heart { font-size: 19px; vertical-align: -1px; margin-right: 3px; }
.feature-reverse { grid-template-columns: 1.05fr 1fr; padding-block: 80px 124px; }
.feature-reverse .feature-copy { justify-self: end; }
.watch-illustration { position: relative; padding: 50px 12px 20px; }
.watch-orbit { position: absolute; width: 320px; height: 320px; border-radius: 50%; top: -5px; left: calc(50% - 160px); background: #e6e9f2; }
.watch-ticket { position: relative; padding: 24px; max-width: 435px; margin-inline: auto; background: white; box-shadow: 0 18px 50px #303e5717; border-radius: 16px; transform: rotate(3deg); }
.ticket-top { display: flex; justify-content: space-between; color: #717786; font-size: 12px; margin-bottom: 24px; }
.watch-item { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 20px; }
.watch-item img { width: 76px; border-radius: 5px; }
.watch-title { font-size: 21px; font-weight: 600; letter-spacing: -.03em; }
.watch-meta { font-size: 12px; margin-top: 8px; color: #717786; }
.progress-track { height: 3px; background: #e8ebf1; border-radius: 5px; margin-top: 23px; }
.progress-track span { display: block; width: 66%; height: 100%; background: #7f85a5; border-radius: inherit; }
.watch-time { font-size: 10px; color: #717786; margin-top: 10px; }
.ticket-bottom { margin-top: 24px; padding-top: 19px; border-top: 1px dashed #d9dce4; font-size: 12px; color: #4d5564; display: flex; gap: 12px; align-items: center; }
.play-symbol { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #edeef5; font-size: 9px; padding-left: 1px; color: #535e79; }
.sources-section { background: #e9edf4; padding-block: 84px; }
.sources-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: center; }
.sources-inner > div > p:last-child { color: var(--muted); margin-top: 23px; font-size: 16px; line-height: 1.9; }
.source-list > div { padding: 24px 0; border-bottom: 1px solid #d2d8e4; }
.source-list > div:last-child { border-bottom: 0; }
.source-list dt { display: flex; align-items: center; gap: 18px; font-size: 18px; font-weight: 550; }
.source-list svg { width: 27px; height: 27px; fill: none; stroke: #646c82; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.source-list dd { padding-left: 45px; margin-top: 9px; font-size: 14px; color: var(--muted); }
.questions-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; padding-block: 110px; }
.questions-list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; list-style: none; padding: 23px 0; font-size: 16px; font-weight: 500; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary > span { font-size: 23px; font-weight: 300; color: #7b8292; flex-shrink: 0; transition: transform .15s; }
details[open] summary > span { transform: rotate(45deg); }
.answer { padding: 0 26px 23px 0; color: var(--muted); font-size: 15px; line-height: 1.9; }
.closing { text-align: center; padding: 22px 24px 90px; }
.closing-mark { width: 37px; margin: 0 auto 24px; opacity: .72; }
.closing h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.4; }
.closing p { margin-top: 22px; color: var(--muted); font-size: 14px; }
.text-link { display: inline-block; margin-top: 27px; font-size: 13px; color: var(--iris); text-decoration: underline; text-underline-offset: 5px; padding: 10px; }
@media (max-width: 900px) {
  .page-width { width: calc(100% - 48px); }
  .feature-section, .sources-inner { gap: 36px; }
  .feature-section { padding-block: 70px; }
  .window-count { display: none; }
  .library-window { padding: 20px 16px 16px; }
  .mini-posters { gap: 8px; }
  .window-bottom { font-size: 9px; }
  .watch-ticket { padding: 20px; }
  .watch-item { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; }
  .watch-title { font-size: 18px; }
  .questions-section { grid-template-columns: 1fr 1.3fr; gap: 36px; }
}
@media (max-width: 620px) {
  .brand { font-size: 27px; gap: 7px; }
  .brand-icon { width: 25px; }
  .brand-icon img { width: 22px; }
  .hero { padding-top: 40px; }
  .app-icon { width: 68px; height: 68px; border-radius: 20px; margin-bottom: 22px; }
  .app-icon img { width: 39px; }
  .platform { font-size: 12px; margin-bottom: 20px; }
  h1 { font-size: clamp(44px, 11vw, 66px); line-height: 1.16; }
  .mobile-break { display: block; }
  .hero-description { font-size: 15px; margin-block: 23px; line-height: 1.85; }
  .primary-link { font-size: 14px; min-height: 45px; }
  .feature-section, .feature-reverse { grid-template-columns: minmax(0, 1fr); padding-block: 54px; gap: 20px; }
  .feature-copy { max-width: none; }
  .feature-copy > p:not(.section-label) { font-size: 15px; margin-top: 20px; }
  .section-label { font-size: 12px; margin-bottom: 15px; }
  .quiet-list { font-size: 13px; margin-top: 20px; }
  .library-illustration { padding-inline: 9px; }
  .library-window { padding: 24px 20px 20px; }
  .window-count { display: inline; font-size: 10px; }
  .window-bottom { font-size: 10px; }
  .feature-reverse .feature-copy { order: -1; justify-self: stretch; }
  .watch-illustration { margin-top: 26px; padding-inline: 9px; }
  .watch-ticket { max-width: 390px; padding: 24px; }
  .watch-item { grid-template-columns: 72px minmax(0, 1fr); gap: 18px; }
  .watch-title { font-size: 20px; }
  .watch-orbit { width: 270px; height: 270px; left: calc(50% - 135px); top: 10px; }
  .sources-section { padding-block: 55px; margin-top: 15px; }
  .sources-inner { grid-template-columns: minmax(0, 1fr); gap: 21px; }
  .sources-inner > div > p:last-child { font-size: 15px; }
  .desktop-break { display: none; }
  .source-list dt { font-size: 16px; }
  .source-list dd { font-size: 13px; }
  .questions-section { grid-template-columns: minmax(0, 1fr); padding-block: 62px; gap: 28px; }
  summary { font-size: 15px; padding-block: 21px; }
  .answer { font-size: 14px; padding-right: 12px; }
  .closing { padding-block: 18px 62px; }
  .closing p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Original hero composition. */
.cinema-figure { margin-top: 64px; padding-bottom: 70px; }
.poster-arc { position: relative; width: 1280px; height: 350px; left: 50%; transform: translateX(-50%); }
.arc-poster { position: absolute; width: 168px; height: 252px; top: 25px; left: calc(50% - 84px); border-radius: 9px; object-fit: cover; box-shadow: 0 16px 26px #29334429, 0 2px 4px #15151e24; }
.poster-1 { transform: translate(-536px, 79px) rotate(-16deg); z-index: 1; }
.poster-2 { transform: translate(-412px, 38px) rotate(-12deg); z-index: 2; }
.poster-3 { transform: translate(-284px, 8px) rotate(-8deg); z-index: 3; }
.poster-4 { transform: translate(-147px, -9px) rotate(-4deg); z-index: 4; }
.poster-5 { transform: translate(0, -14px); z-index: 5; }
.poster-6 { transform: translate(147px, -9px) rotate(4deg); z-index: 4; }
.poster-7 { transform: translate(284px, 8px) rotate(8deg); z-index: 3; }
.poster-8 { transform: translate(412px, 38px) rotate(12deg); z-index: 2; }
.poster-9 { transform: translate(536px, 79px) rotate(16deg); z-index: 1; }
.cinema-figure figcaption { font-size: 14px; color: var(--muted); margin: 38px 24px 0; line-height: 1.7; }
/* Shared page edges, persistent navigation and a footer in document flow. */
.site-header { position: sticky; top: 0; z-index: 50; flex-shrink: 0; background: #f5f7faf5; border-bottom: 1px solid var(--line); }
.header-inner { min-height: 88px; padding-block: 14px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.header-inner > .brand { flex-shrink: 0; }
.site-header nav { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px 30px; min-width: 0; font-size: 14px; color: #505560; }
.site-header nav a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.site-footer { flex-shrink: 0; border-top: 1px solid var(--line); padding-block: 48px max(28px, env(safe-area-inset-bottom)); }
.footer-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; align-items: start; }
.footer-main > * { min-width: 0; }
.footer-brand p { font-size: 13px; color: var(--muted); line-height: 1.9; margin-top: 15px; }
.footer-group { display: flex; flex-direction: column; align-items: flex-start; }
.footer-group h2 { font-size: 13px; font-weight: 600; letter-spacing: 0; margin: 5px 0 14px; line-height: 1.6; }
.footer-group a { display: block; font-size: 12px; color: #4e5665; padding-block: 10px; line-height: 1.8; max-width: 100%; overflow-wrap: anywhere; }
.draft-label { font-size: 10px; color: #6b7080; white-space: nowrap; }
.footer-notes { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); color: #747b89; font-size: 11px; line-height: 1.8; }
@media (min-width: 1500px) { .hero { padding-top: 74px; } .cinema-figure { margin-top: 80px; } }
@media (max-width: 900px) { .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; } }
@media (max-width: 620px) {
  html { scroll-padding-top: 140px; }
  .header-inner { min-height: 112px; padding-block: 12px 6px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .site-header nav { width: 100%; justify-content: space-between; gap: 0 16px; font-size: 12px; }
  .site-footer { padding-top: 32px; }
  .footer-main { gap: 28px 20px; }
  .footer-group a { min-height: 44px; }
  .footer-notes { flex-direction: column; gap: 7px; margin-top: 28px; font-size: 10px; }
  .cinema-figure { margin-top: 48px; padding-bottom: 28px; }
  .poster-arc { width: 840px; height: 235px; }
  .arc-poster { width: 112px; height: 168px; left: calc(50% - 56px); border-radius: 6px; }
  .poster-1 { transform: translate(-360px, 55px) rotate(-16deg); }
  .poster-2 { transform: translate(-277px, 27px) rotate(-12deg); }
  .poster-3 { transform: translate(-190px, 5px) rotate(-8deg); }
  .poster-4 { transform: translate(-98px, -6px) rotate(-4deg); }
  .poster-5 { transform: translate(0, -10px); }
  .poster-6 { transform: translate(98px, -6px) rotate(4deg); }
  .poster-7 { transform: translate(190px, 5px) rotate(8deg); }
  .poster-8 { transform: translate(277px, 27px) rotate(12deg); }
  .poster-9 { transform: translate(360px, 55px) rotate(16deg); }
  .cinema-figure figcaption { font-size: 11px; margin-top: 19px; }
}

/* Minimal shell while the homepage contains only its hero. */
.site-footer-compact { padding-block: 24px max(24px, env(safe-area-inset-bottom)); }
.compact-footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 28px; font-size: 12px; color: var(--muted); line-height: 1.8; }
.compact-footer-inner nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.compact-footer-inner a { display: inline-block; padding-block: 10px; }
@media (max-width: 620px) {
  .header-inner { flex-direction: row; align-items: center; min-height: 76px; padding-block: 12px; gap: 20px; }
  .site-header nav { width: auto; justify-content: flex-end; }
  html { scroll-padding-top: 100px; }
  .compact-footer-inner { align-items: flex-start; flex-direction: column; gap: 8px; }
  .compact-footer-inner nav { gap: 6px 18px; }
}

/* Onboarding page one's projected poster sphere, scaled to a website hero. */
.hero { padding-top: 0; padding-bottom: 65px; overflow: visible; }
.sphere-scene { position: relative; isolation: isolate; width: min(100%, 1120px); height: clamp(460px, 68vh, 700px); margin-inline: auto; overflow: visible; touch-action: pan-y; cursor: grab; }
.sphere-scene:active { cursor: grabbing; }
.sphere-scene:focus-visible { outline: 3px solid var(--iris); outline-offset: -4px; }
.sphere-art { position: absolute; inset: 0; pointer-events: none; }
.sphere-poster { visibility: hidden; position: absolute; left: calc(50% + var(--x)); top: calc(50% + var(--y)); width: clamp(44px, 5.5vw, 68px); aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; transform: translate(-50%, -50%) scale(var(--scale)); z-index: var(--depth); box-shadow: 0 8px 20px #29334428; }
.sphere-logo { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; object-fit: contain; transform: translate(-50%, -50%) scale(1.12); z-index: 50; }
.sphere-scene.is-animated .sphere-poster { left: 50%; top: 50%; will-change: transform; }
.hero-description { max-width: 780px; }
@media (max-width: 620px) {
  .hero { padding-top: 0; padding-bottom: 35px; }
  .sphere-scene { height: 460px; }
}

/* Space around the scene must not reduce the sphere radius. */
.sphere-scene { margin-block: 80px; }
@media (max-width: 620px) {
  .sphere-scene { margin-block: 60px; }
}