:root {
  --glass: rgba(255,255,255,.12);
  --glass-border: rgba(255,255,255,.38);
  --text: #f4f4f4;
  --shadow: 0 20px 55px rgba(0,0,0,.55);
}
* { box-sizing: border-box; }
html, body { margin:0; height:100%; font-family:"Noto Serif SC","Microsoft YaHei",serif; background:#000; color:var(--text); }
.page { min-height:100%; position:relative; overflow:hidden; }
.bg-video { position:fixed; inset:0; width:100%; height:100%; min-width:100%; min-height:100%; object-fit:cover; object-position:center center; z-index:-3; filter:grayscale(1) contrast(1.2) brightness(.45); transform:scale(1.08); }
.vignette { position:fixed; inset:0; z-index:-2; pointer-events:none; background:radial-gradient(circle at center, rgba(255,255,255,.08), transparent 45%),linear-gradient(120deg, rgba(0,0,0,.72), rgba(0,0,0,.4), rgba(0,0,0,.8)); }
.film-noise { position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.12; mix-blend-mode:screen; background-image:repeating-radial-gradient(circle,#fff 0 1px,transparent 1px 3px); animation:noiseMove .4s steps(2) infinite; }
@keyframes noiseMove { 0%{transform:translate(0,0);} 50%{transform:translate(1px,-1px);} 100%{transform:translate(-1px,1px);} }
.screen { min-height:100%; display:grid; place-items:center; padding:0; animation:fadeIn .8s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:translateY(0);} }
.home-box { width:min(980px,96vw); display:flex; flex-direction:column; align-items:center; gap:28px; }
.title { letter-spacing:.2em; font-size:clamp(24px,5vw,48px); text-shadow:0 3px 30px rgba(255,255,255,.2); margin:0; text-align:center; }
.subtitle { margin:0; opacity:.9; font-size:clamp(13px,2.6vw,18px); text-align:center; }
.menu { width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.glass-btn { display:block; border:1px solid var(--glass-border); background:var(--glass); backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2); border-radius:20px; overflow:hidden; height:clamp(180px,28vw,320px); position:relative; box-shadow:var(--shadow); transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease; }
.glass-btn::before { content:""; position:absolute; inset:0; background:linear-gradient(130deg, rgba(255,255,255,.35), transparent 40%, rgba(255,255,255,.16)); opacity:.32; pointer-events:none; }
.glass-btn:hover, .glass-btn:active { transform:translateY(-8px) scale(1.02); box-shadow:0 30px 70px rgba(0,0,0,.65); border-color:rgba(255,255,255,.75); }
.btn-bg { width:100%; height:100%; object-fit:cover; opacity:.42; filter:grayscale(.18) contrast(1.06); transform:scale(1.02); transition:transform .45s ease, opacity .35s ease; }
.glass-btn:hover .btn-bg { transform:scale(1.08); }
.content-card { width:100vw; min-height:100vh; background:rgba(255,255,255,.03); border:none; border-radius:0; backdrop-filter:blur(3px); padding:18px; box-shadow:none; }
.topbar { display:flex; justify-content:flex-start; margin-bottom:14px; position:relative; z-index:4; }
.back { border:1px solid rgba(0,0,0,.35); border-radius:999px; background:rgba(255,255,255,.45); color:#111; padding:8px 16px; cursor:pointer; text-decoration:none; }
.single-img { width:100%; max-height:calc(100vh - 92px); object-fit:contain; border-radius:14px; }
.pair-wrap { position:relative; min-height:calc(100vh - 92px); display:grid; place-items:center; overflow:hidden; border-radius:14px; }
.cylinder-stage { width:100%; height:100%; perspective:1300px; display:grid; place-items:center; position:relative; z-index:2; touch-action:pan-y; }
.cylinder { position:relative; width:0; height:min(420px,56vh); transform-style:preserve-3d; }
.cyl-item { position:absolute; left:50%; top:50%; width:150px; height:210px; margin-left:-75px; margin-top:-105px; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.5); box-shadow:0 18px 40px rgba(0,0,0,.48); cursor:zoom-in; background:rgba(255,255,255,.08); backface-visibility:hidden; transition:transform .2s ease; }
.cyl-item:hover { transform:translateZ(1px) scale(1.03); }
.cyl-item img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05); }
.center-glow { position:absolute; width:min(240px,44vw); height:min(240px,44vw); border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,.2) 30%, rgba(255,255,255,0) 70%); filter:blur(8px); z-index:1; pointer-events:none; }
.photo img { width:100%; height:100%; object-fit:cover; display:block; }
.particle-layer { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.88); display:none; place-items:center; z-index:30; padding:18px; }
.modal.show { display:grid; }
.modal img { max-width:min(960px,96vw); max-height:90vh; border-radius:14px; box-shadow:0 18px 60px rgba(0,0,0,.7); }

.manga-stage {
  width: min(1100px, 96vw);
  height: min(720px, 80vh);
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 78%, rgba(255,255,255,.09), rgba(0,0,0,.96) 52%, #000 86%);
  border: 1px solid rgba(255,255,255,.22);
}
.star-canvas, .beam-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.star-canvas { z-index: 1; }
.beam-canvas { z-index: 2; mix-blend-mode: screen; }
.floating-space {
  position: absolute;
  inset: 0;
  z-index: 3;
  transform-style: preserve-3d;
}
.floating-photo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 110px;
  height: 110px;
  margin-left: -55px;
  margin-top: -55px;
  border: 2px solid rgba(255,255,255,.7);
  background: #111;
  box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 10px 35px rgba(0,0,0,.65);
  overflow: hidden;
  cursor: zoom-in;
}
.floating-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.8) contrast(1.25);
}
@media (max-width:860px) {
  .menu { grid-template-columns:1fr; }
  .glass-btn { height:32vh; min-height:220px; }
  .cyl-item { width:110px; height:158px; margin-left:-55px; margin-top:-79px; }
  .floating-photo { width: 84px; height: 84px; margin-left: -42px; margin-top: -42px; }
  .bg-video { transform:scale(1.03); }
}

@media (min-width:1200px) {
  .bg-video { transform:scale(1.02); }
}