/* Homepage V7 — the approved “表达剧场” composition, reconstructed in HTML.
   The theatre image carries photography only. All copy and controls are HTML.
   Homepage classes are intentionally isolated from the video editor. */
.cinematic-home{
  --theatre-ink:#f5f5f7;--theatre-muted:#a8aaae;--theatre-blue:#1774fa;
  min-height:100svh;width:100%;background:#080a0c;color:var(--theatre-ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  overflow:clip;isolation:isolate;
}
.cinematic-home *{box-sizing:border-box}
.cinematic-home button{font-family:inherit;cursor:pointer}
.cinematic-home button:focus-visible{outline:2px solid #85b4ff;outline-offset:6px}
.cinematic-header{
  position:relative;z-index:3;display:flex;align-items:center;gap:50px;
  height:78px;max-width:1600px;margin:0 auto;padding:0 5%;
}
.cinematic-brand{
  display:inline-flex;align-items:center;gap:13px;padding:0;border:0;
  background:none;color:#f5f5f7;font-size:21px;letter-spacing:.05em;
  font-weight:500;white-space:nowrap;
}
.cinematic-brand-symbol{height:28px;width:25px;flex:none}
.cinematic-navigation{display:flex;align-items:center;gap:44px}
.cinematic-nav-link{
  color:#b0b1b4;background:none;border:0;font-size:14px;white-space:nowrap;
  padding:12px 0;transition:color .2s ease;
}
.cinematic-nav-link:hover{color:#fff}
.cinematic-account{
  width:33px;height:33px;margin-left:0;display:grid;place-items:center;
  flex:none;border:1px solid #ffffff05;border-radius:50%;background:#ffffff14;color:#e3e3e6;
  transition:background .2s ease;
}
.cinematic-account:hover{background:#ffffff26}
.cinematic-account svg{width:17px;height:17px;stroke-width:1.7}
.cinematic-theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;
  margin-left:auto;padding:5px 0;border:0;background:none;color:#b0b1b4;font-size:12px;
  white-space:nowrap;transition:color .2s ease;
}
.cinematic-theme-toggle:hover{color:#fff}
.cinematic-theme-toggle svg{width:18px;height:18px;flex:none}
.cinematic-header>.cinematic-account{margin-left:-28px}
.cinematic-stage{
  position:relative;z-index:0;margin-top:-78px;min-height:clamp(600px,47.7vw,810px);
  background:#090b0d;
}
.cinematic-picture,.cinematic-stage-shade{position:absolute;inset:0;overflow:hidden}
.cinematic-picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}
.cinematic-stage-shade{
  background:linear-gradient(90deg,rgba(6,8,10,.52) 0%,rgba(6,8,10,.18) 29%,transparent 47%),linear-gradient(0deg,#080a0c 0%,transparent 10%,transparent 85%,#080a0c55 100%);
  pointer-events:none;
}
.cinematic-hero-copy{
  position:relative;z-index:1;max-width:1600px;margin:0 auto;padding:clamp(122px,8.2vw,160px) 5% 120px;
}
.cinematic-hero-copy h1{
  width:max-content;max-width:45%;margin:0;color:#f5f5f7;
  font-size:clamp(56px,5.05vw,86px);line-height:1.22;letter-spacing:.035em;
  font-weight:400;text-shadow:0 2px 24px #0002;
}
.cinematic-hero-copy>p{
  margin:22px 0 0;color:#aaaeb3;letter-spacing:.015em;
  font-size:clamp(16px,1.46vw,23px);line-height:1.6;
}
.cinematic-hero-actions{display:flex;align-items:center;gap:30px;margin-top:34px}
.cinematic-create{
  min-height:48px;min-width:145px;border:1px solid #579aff33;border-radius:999px;
  padding:12px 27px;background:var(--theatre-blue);color:#fff;font-size:16px;
  font-weight:400;letter-spacing:.02em;box-shadow:0 3px 18px #0002;
  transition:background .2s ease,transform .2s ease;
}
.cinematic-create:hover{background:#2d86ff;transform:translateY(-1px)}
.cinematic-text-link{
  display:inline-flex;align-items:center;justify-content:flex-start;gap:7px;
  color:#efeff1;background:none;border:0;padding:6px 0;font-size:14px;
  line-height:1.5;white-space:nowrap;transition:color .2s ease;
}
.cinematic-text-link:hover{color:#95bdff}
.cinematic-text-link svg{width:14px;height:14px;stroke-width:1.6;transition:transform .2s ease}
.cinematic-text-link:hover svg{transform:translateX(3px)}
.cinematic-collection{
  position:relative;max-width:1600px;margin:0 auto;padding:44px 5% 48px;
  background:radial-gradient(ellipse at 58% 0%,#171b20 0%,#0b0d10 48%,#080a0c 86%);
}
.cinematic-collection h2{margin:0 0 18px;font-size:clamp(25px,2.45vw,40px);font-weight:400;line-height:1.4;letter-spacing:.015em}
.cinematic-entry-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:56px}
.cinematic-entry{
  position:relative;display:flex;align-items:center;gap:24px;min-width:0;
  padding:26px 0 0;border-top:1px solid #ffffff3b;
}
.cinematic-entry+.cinematic-entry:before{
  position:absolute;content:"";top:0;bottom:0;left:-28px;width:1px;background:#ffffff12;
}
.cinematic-entry-copy{flex:none;min-width:145px}
.cinematic-entry h3{margin:0;font-size:20px;font-weight:400;line-height:1.45}
.cinematic-entry p{margin:8px 0 13px;font-size:15px;color:#a4a7ad;line-height:1.5;white-space:nowrap}
.cinematic-entry .cinematic-text-link{font-size:14px}
.cinematic-filmstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;flex:1;min-width:0}
.cinematic-lookstrip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex:1;min-width:0;max-width:290px;margin-left:auto}
.cinematic-thumb{
  display:block;min-width:0;border-radius:2px;overflow:hidden;
  background-image:url('./assets/theatre-thumbnails.png');background-size:200% 200%;
  background-repeat:no-repeat;border:1px solid #ffffff1c;
}
.cinematic-filmstrip .cinematic-thumb{aspect-ratio:1.35}
.cinematic-lookstrip .cinematic-thumb{aspect-ratio:.94}
.cinematic-thumb-1{background-position:0 0}
.cinematic-thumb-2{background-position:100% 0}
.cinematic-thumb-3{background-position:0 100%}
.cinematic-thumb-4{background-position:100% 100%}
.cinematic-paper-note{
  position:absolute;z-index:2;left:14%;bottom:11%;margin:0;
  font-family:KaiTi,"STKaiti","Songti SC",serif;font-size:23px;line-height:1.75;
  letter-spacing:.08em;color:#41464e;transform:rotate(-7deg);pointer-events:none;
}
/* The light homepage is a separate paper-to-film composition, not an inverted theatre. */
.cinematic-home.theme-light{--theatre-ink:#14161b;--theatre-muted:#696e77;--theatre-blue:#0872ff;background:#fbfbfd;color:var(--theatre-ink)}
.theme-light .cinematic-brand{color:#13151b}.theme-light .cinematic-brand-symbol{color:#0872ff}
.theme-light .cinematic-navigation{margin-left:auto}
.theme-light .cinematic-theme-toggle{margin-left:0}
.theme-light .cinematic-nav-link,.theme-light .cinematic-theme-toggle{color:#444953}
.theme-light .cinematic-nav-link:hover,.theme-light .cinematic-theme-toggle:hover{color:#0069ec}
.theme-light .cinematic-account{background:transparent;border:1px solid #333944;color:#353a43}
.theme-light .cinematic-account:hover{background:#e9edf5}
.theme-light .cinematic-stage{background:#f5f6f9;min-height:clamp(640px,51vw,850px)}
.theme-light .cinematic-stage-shade{background:linear-gradient(90deg,#f7f8fc22 0%,#f7f8fc10 29%,transparent 47%),linear-gradient(0deg,#fbfbfd 0%,transparent 5%,transparent 91%,#fbfbfd33 100%)}
.theme-light .cinematic-hero-copy h1{color:#111319;text-shadow:none}
.theme-light .cinematic-hero-copy>p{color:#666c76}
.theme-light .cinematic-hero-actions .cinematic-text-link{color:#006bf1}
.theme-light .cinematic-text-link:hover{color:#3486ed}
.theme-light .cinematic-collection{display:grid;grid-template-columns:.9fr 2fr;gap:42px;align-items:center;padding-top:46px;padding-bottom:50px;background:#fbfbfd}
.theme-light .cinematic-collection h2{margin:0;font-size:clamp(25px,2.1vw,34px);line-height:1.6;letter-spacing:0}
.theme-light .cinematic-entry-grid{gap:32px}
.theme-light .cinematic-entry{border-top:0;border-left:1px solid #dfe2e9;padding:8px 0 8px 30px;gap:19px;min-height:120px}
.theme-light .cinematic-entry+.cinematic-entry:before{display:none}
.theme-light .cinematic-entry-copy{min-width:115px}
.theme-light .cinematic-entry h3{font-size:19px}
.theme-light .cinematic-entry p{font-size:13px;color:#6c727d}
.theme-light .cinematic-entry .cinematic-text-link{color:#006bf1;font-size:13px}
.theme-light .cinematic-thumb{border-color:#151e3120;border-radius:4px}
.theme-light .cinematic-filmstrip{grid-template-columns:1fr;max-width:152px}
.theme-light .cinematic-filmstrip .cinematic-thumb{display:none;aspect-ratio:1.35}
.theme-light .cinematic-filmstrip .cinematic-thumb:first-child{display:block}
.theme-light .cinematic-lookstrip{gap:5px}
.theme-light .cinematic-lookstrip .cinematic-thumb{aspect-ratio:.8}
@media(min-width:1700px){
  .cinematic-header{height:86px}.cinematic-stage{margin-top:-86px}
  .cinematic-hero-copy{padding-top:148px}.cinematic-entry-grid{gap:72px}
  .cinematic-entry+.cinematic-entry:before{left:-36px}
}
@media(max-width:1100px){
  .cinematic-header{gap:35px;height:68px;padding:0 4.7%}
  .cinematic-brand{font-size:19px;gap:10px}.cinematic-navigation{gap:30px}
  .cinematic-header>.cinematic-account{margin-left:-16px}
  .cinematic-stage{margin-top:-68px;min-height:545px}
  .cinematic-picture img{object-position:66% center}
  .cinematic-hero-copy{padding:119px 4.7% 100px}
  .cinematic-hero-copy h1{font-size:clamp(43px,5.15vw,57px);max-width:48%;line-height:1.25;letter-spacing:.02em}
  .cinematic-hero-copy>p{font-size:16px;margin-top:19px}
  .cinematic-hero-actions{gap:22px;margin-top:28px}
  .cinematic-create{min-width:126px;min-height:43px;padding:10px 21px;font-size:14px}
  .cinematic-hero-actions .cinematic-text-link{font-size:13px;gap:4px}
  .cinematic-collection{padding:31px 4.7% 38px}
  .cinematic-collection h2{font-size:28px;margin-bottom:19px}
  .cinematic-entry-grid{gap:36px}
  .cinematic-entry{gap:15px;align-items:flex-start;flex-direction:column;padding-top:18px}
  .cinematic-entry+.cinematic-entry:before{left:-18px}
  .cinematic-entry h3{font-size:18px}.cinematic-entry p{font-size:13px;margin:6px 0 8px}
  .cinematic-entry .cinematic-text-link{font-size:13px}
  .cinematic-filmstrip{width:100%;flex:none}
  .cinematic-lookstrip{width:100%;max-width:none;flex:none;gap:8px;margin:0}
  .cinematic-lookstrip .cinematic-thumb{aspect-ratio:1.45}
  .cinematic-paper-note{display:none}
  .theme-light .cinematic-stage{min-height:565px}
  .theme-light .cinematic-collection{display:block;padding-top:31px;padding-bottom:38px}
  .theme-light .cinematic-collection h2{font-size:28px;margin-bottom:19px}
  .theme-light .cinematic-entry-grid{gap:36px}
  .theme-light .cinematic-entry{border-left:0;border-top:1px solid #dfe2e9;padding:18px 0 0;gap:15px;min-height:0}
  .theme-light .cinematic-entry h3{font-size:18px}
  .theme-light .cinematic-filmstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
  .theme-light .cinematic-filmstrip .cinematic-thumb{display:block;aspect-ratio:1.35}
  .theme-light .cinematic-lookstrip .cinematic-thumb{aspect-ratio:1.45}
}
@media(max-width:600px){
  .cinematic-header{height:64px;padding:0 20px;gap:16px;justify-content:space-between}
  .cinematic-brand{font-size:16px;gap:8px;letter-spacing:.02em}
  .cinematic-brand-symbol{height:23px;width:21px}
  .cinematic-navigation{gap:17px;margin-left:auto}
  .cinematic-navigation .cinematic-nav-link:last-child{display:none}
  .cinematic-nav-link{font-size:11px;padding:10px 0}
  .cinematic-account{width:29px;height:29px;margin-left:0}
  .cinematic-account svg{width:15px;height:15px}
  .cinematic-header>.cinematic-account{margin-left:0}
  .cinematic-theme-toggle{margin-left:0;min-width:28px;min-height:28px}
  .cinematic-theme-toggle span{display:none}
  .cinematic-theme-toggle svg{height:18px;width:18px}
  .cinematic-stage{display:flex;flex-direction:column;min-height:0;margin-top:-64px;padding-top:64px;background:#0a0c0f}
  .cinematic-hero-copy{order:0;width:100%;padding:36px 24px 30px;margin:0;z-index:2}
  .cinematic-hero-copy h1{font-size:47px;max-width:none;line-height:1.22;letter-spacing:.025em}
  .cinematic-hero-copy>p{font-size:14px;margin-top:19px;letter-spacing:.01em}
  .cinematic-hero-actions{gap:24px;margin-top:25px}
  .cinematic-create{font-size:14px;min-width:133px;min-height:43px}
  .cinematic-hero-actions .cinematic-text-link{font-size:12px}
  .cinematic-picture{position:relative;inset:auto;order:1;width:100%;height:300px;margin:0;overflow:hidden}
  .cinematic-picture img{height:100%;width:100%;object-fit:cover;object-position:81% center}
  .cinematic-stage-shade{inset:auto 0 0;height:302px;z-index:1;background:linear-gradient(180deg,#0a0c0f 0%,transparent 14%,transparent 82%,#080a0c 100%)}
  .cinematic-collection{padding:29px 24px 35px}
  .cinematic-collection h2{font-size:25px;line-height:1.5;max-width:310px;margin-bottom:26px}
  .cinematic-entry-grid{grid-template-columns:1fr;gap:29px}
  .cinematic-entry{display:grid;grid-template-columns:1fr;gap:17px;padding-top:21px}
  .cinematic-entry+.cinematic-entry:before{display:none}
  .cinematic-entry h3{font-size:19px}.cinematic-entry p{font-size:13px;margin:7px 0 8px}
  .cinematic-entry-copy{position:relative;padding-right:80px}
  .cinematic-entry .cinematic-text-link{position:absolute;right:0;bottom:1px;font-size:12px}
  .cinematic-filmstrip{gap:7px}
  .cinematic-filmstrip .cinematic-thumb{aspect-ratio:1.05}
  .cinematic-lookstrip{gap:10px}
  .cinematic-lookstrip .cinematic-thumb{aspect-ratio:1.1}
  .theme-light .cinematic-stage{min-height:0;background:#f6f7fa}
  .theme-light .cinematic-stage-shade{height:302px;background:linear-gradient(180deg,#f6f7fa 0%,transparent 12%,transparent 85%,#fbfbfd 100%)}
  .theme-light .cinematic-picture img{object-position:78% center}
  .theme-light .cinematic-collection{padding:29px 24px 35px}
  .theme-light .cinematic-collection h2{font-size:25px;max-width:310px;line-height:1.5;margin-bottom:26px}
  .theme-light .cinematic-entry-grid{gap:29px}
  .theme-light .cinematic-entry{gap:17px;padding-top:21px}
  .theme-light .cinematic-entry h3{font-size:19px}
  .theme-light .cinematic-entry p{font-size:13px}
  .theme-light .cinematic-entry .cinematic-text-link{font-size:12px}
  .theme-light .cinematic-filmstrip .cinematic-thumb{aspect-ratio:1.05}
  .theme-light .cinematic-lookstrip .cinematic-thumb{aspect-ratio:1.1}
}
@media(max-width:360px){
  .cinematic-header{padding:0 15px;gap:10px}.cinematic-navigation{gap:12px}
  .cinematic-brand{font-size:15px;gap:5px}.cinematic-nav-link{font-size:10px}
  .cinematic-hero-copy{padding-left:20px;padding-right:20px}
  .cinematic-hero-copy h1{font-size:43px}.cinematic-hero-actions{gap:18px}
  .cinematic-collection{padding-left:20px;padding-right:20px}
}
@media(prefers-reduced-motion:reduce){.cinematic-home *{transition:none!important}}