:root { color-scheme: dark; --ink: #f2ede4; --dim: #f2ede499; --line: #f2ede424; font: 13px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #080706; color: var(--ink); -webkit-font-smoothing: antialiased; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
#scene.is-pointer { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 返回首页：悬浮在左上角 */
.back-home { position: fixed; left: max(14px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top)); z-index: 50; padding: 6px 12px; border-radius: 999px; background: #14110fcc; border: 1px solid #f2ede424; color: #f2ede499; text-decoration: none; white-space: nowrap; font-size: 13px; backdrop-filter: blur(4px); }
.back-home:hover { color: #fff; background: #26221f; }

/* Light box: the chosen slide held up to the lamp. */
.box { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: none; color: inherit; place-items: center; overflow: hidden; }
.box[open] { display: grid; }
.box::backdrop { background: radial-gradient(60% 55% at 50% 46%, #fff3dc2e, #070605f0 70%); }
.box figure { margin: 0; padding: clamp(14px, 4.5vmin, 44px) clamp(14px, 4.5vmin, 44px) clamp(10px, 2.6vmin, 24px); border-radius: clamp(8px, 1.6vmin, 16px); background: linear-gradient(#1c1a17, #11100e); box-shadow: 0 30px 80px #000c; animation: lift .45s cubic-bezier(.2, .8, .2, 1); }
.box img { display: block; width: min(80vw, 1100px, 64vh * var(--a, 1.5)); aspect-ratio: var(--a, 1.5); object-fit: cover; border-radius: 2px; box-shadow: 0 0 70px #fff1d62e; }
.box figcaption { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; color: var(--dim); }
.box strong { color: var(--ink); font-weight: 500; }
.box a { margin-left: auto; color: inherit; text-underline-offset: 3px; }
.box button { position: absolute; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: #1c1a1799; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.box button:hover { background: #2c2925; }
.box .close { top: 16px; right: 16px; }
.box .prev, .box .next { top: calc(50% - 20px); }
.box .prev { left: 16px; }
.box .next { right: 16px; }
@media (max-width: 640px) { .box .prev, .box .next { top: auto; bottom: 18px; } .box .prev { left: calc(50% - 48px); } .box .next { right: calc(50% - 48px); } }
@keyframes lift { from { transform: var(--from, scale(.9)); opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .box figure { animation: none; } }