:root {
  --camera-detail-scale:4;
  --paper: #f5f5f2;
  --ink: #0a0a0a;
  --muted: #8c8c86;
  --acid: #f1ff45;
  --orange: #ff4d00;
  --mx: 0;
  --my: 0;
  --title-x: 0px;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--paper); color: var(--ink); }
body { font-family: "Noto Sans SC", Arial, sans-serif; cursor: crosshair; }
button, a { color: inherit; font: inherit; }
button { cursor: pointer; }

.noise {
  position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.scene { position: fixed; inset: 0; overflow: hidden; }
.scene--lobby { background: var(--paper); transition: opacity .5s ease, visibility .5s; }
.scene--lobby.is-hidden { opacity: 0; visibility: hidden; }

.topbar, .gallery-nav {
  position: absolute; z-index: 30; top: 0; left: 0; width: 100%; height: 72px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 28px;
  font: 700 10px/1 "Space Mono", monospace; letter-spacing: .05em;
}
.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; text-decoration: none; }
.brand__name { display: grid; gap: 5px; font-size: 12px; }
.brand__name span { font-size: 9px; }
.brand__mark { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid; border-radius: 50%; font-size: 9px; }
.topbar__note { margin: 0; }
.topbar__note span { color: #777; }
.sound-toggle { justify-self: end; border: 1px solid; border-radius: 999px; background: transparent; padding: 8px 11px; display: flex; gap: 8px; align-items: center; font-size: 9px; }
.sound-toggle__bars { display: flex; height: 10px; gap: 2px; align-items: center; }
.sound-toggle__bars i { display: block; width: 2px; height: 4px; background: currentColor; }
.sound-toggle__bars i:nth-child(2) { height: 9px; }
.sound-toggle__bars i:nth-child(3) { height: 6px; }
.sound-toggle[aria-pressed="true"] i { animation: sound .6s ease-in-out infinite alternate; }
.sound-toggle[aria-pressed="true"] i:nth-child(2) { animation-delay: -.2s; }
.sound-toggle[aria-pressed="true"] i:nth-child(3) { animation-delay: -.4s; }
@keyframes sound { to { height: 2px; } }

.hero-copy { position: absolute; z-index: 1; left: 50%; top: 14%; width: min(1200px, 92vw); transform: translateX(-50%); text-align: center; pointer-events: none; }
.eyebrow { margin: 0 0 1.2vh; font: 700 9px/1 "Space Mono", monospace; letter-spacing: .28em; }
.hero-copy h1 { margin: 0; font: 400 clamp(58px, 11vw, 172px)/.78 "Archivo Black", sans-serif; letter-spacing: -.075em; white-space: nowrap; }
.hero-copy h1 span { display: inline-block; transform: translateY(-.08em) scaleX(.8); color: transparent; -webkit-text-stroke: 1px var(--ink); }

.edge-copy { position: absolute; z-index: 15; bottom: 28px; font: 700 9px/1.45 "Space Mono", monospace; letter-spacing: .08em; }
.edge-copy--left { left: 28px; }
.edge-copy--right { right: 28px; text-align: right; }
.pixel-text { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .9; }

.orbital-stage { position: absolute; z-index: 10; left: 50%; top: 55%; width: min(900px, 88vw); height: min(520px, 58vh); transform: translate(-50%, -50%); perspective: 1000px; }
.orbit-line { position: absolute; left: 50%; top: 50%; width: 84%; height: 48%; transform: translate(-50%, -50%) rotate(-7deg); border: 1px solid rgba(0,0,0,.12); border-radius: 50%; }
.orbit-line--b { width: 66%; height: 35%; transform: translate(-50%, -50%) rotate(10deg); border-style: dashed; opacity: .45; }

.camera-rig { position: absolute; z-index: 6; left: 50%; top: 50%; width: 310px; height: 250px; transform: translate(-50%, -44%); transform-style: preserve-3d; transition: transform 1.25s cubic-bezier(.76,0,.24,1), opacity .45s; }
.camera-rig.is-entering { transform: translate(-50%, -45%) scale(5.5) rotateX(-4deg) !important; }
.camera-shadow { position: absolute; left: 12%; bottom: -8%; width: 76%; height: 19%; background: rgba(0,0,0,.25); filter: blur(18px); border-radius: 50%; transform: translateZ(-60px) rotateX(68deg); }
.camera { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(calc(var(--my) * -5deg)) rotateY(calc(var(--mx) * 8deg)); animation: float 4.2s ease-in-out infinite; transition: transform .15s ease-out; }
@keyframes float { 0%,100% { translate: 0 -5px; } 50% { translate: 0 8px; } }
.camera__body { position: absolute; left: 22px; top: 58px; width: 266px; height: 150px; border-radius: 15px 18px 25px 22px; background: linear-gradient(145deg,#333 0 8%,#111 34%,#050505 100%); box-shadow: inset 0 1px 1px #777, inset -16px -18px 30px #000, 0 24px 40px rgba(0,0,0,.25); border: 1px solid #050505; transform: translateZ(20px); }
.camera__body::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 11px 14px 20px 16px; }
.camera__top { position: absolute; z-index: 2; left: 74px; top: 36px; width: 165px; height: 50px; border-radius: 10px 10px 2px 2px; background: linear-gradient(180deg,#3f3f3f,#101010 75%); transform: translateZ(14px); box-shadow: inset 0 1px #888; }
.dial { position: absolute; top: -8px; width: 44px; height: 15px; border-radius: 4px; background: repeating-linear-gradient(90deg,#191919 0 3px,#585858 3px 4px); border: 1px solid #050505; }
.dial--left { left: 4px; }
.hot-shoe { position: absolute; left: 67px; top: -6px; width: 37px; height: 12px; background: #0a0a0a; border: 1px solid #777; }
.shutter { position: absolute; right: 8px; top: -9px; width: 30px; height: 11px; border-radius: 50%; background: #111; border: 1px solid #777; }
.camera__grip { position: absolute; right: -1px; top: 24px; width: 51px; height: 105px; border-radius: 16px 14px 23px 12px; background: repeating-linear-gradient(115deg,#171717 0 2px,#101010 2px 4px); border-left: 1px solid #454545; }
.camera__brand { position: absolute; left: 27px; top: 25px; color: #d8d8d8; font: 700 8px/.9 "Space Mono", monospace; letter-spacing: .12em; }
.camera__sensor-dot { position: absolute; left: 29px; top: 64px; width: 7px; height: 7px; border: 1px solid #aaa; border-radius: 50%; }
.camera__badge { position: absolute; left: 23px; bottom: 18px; color: #777; font: 700 6px/1 "Space Mono", monospace; letter-spacing: .1em; }
.camera__slot { position: absolute; right: 24px; top: 34px; width: 7px; height: 67px; border-radius: 4px; background: #000; box-shadow: inset 1px 0 #555; overflow: visible; }
.camera__slot i { display: block; width: 2px; height: 52px; margin: 7px 0 0 2px; background: #1b1b1b; }
.lens { position: absolute; z-index: 5; left: 72px; top: 25px; width: 128px; height: 128px; border-radius: 50%; transform: translateZ(36px); background: radial-gradient(circle,#222 0 35%,#080808 36% 62%,#3a3a3a 63% 69%,#0b0b0b 70%); box-shadow: 0 10px 20px rgba(0,0,0,.45), inset 0 0 0 1px #777; }
.lens__ring { position: absolute; border-radius: 50%; border: 1px solid #555; }
.lens__ring--outer { inset: 6px; border-style: dashed; }
.lens__ring--mid { inset: 17px; border: 4px solid #111; box-shadow: inset 0 0 0 1px #777; }
.lens__glass { position: absolute; inset: 27px; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 38% 34%,#517b78 0 4%,#102323 18%,#071316 50%,#000 75%); box-shadow: inset 0 0 20px #000; }
.lens__glass span { position: absolute; width: 35px; height: 12px; left: 11px; top: 10px; border-radius: 50%; background: rgba(187,234,222,.34); transform: rotate(-24deg); filter: blur(1px); }
.lens__glass i { position: absolute; right: 16px; bottom: 13px; width: 12px; height: 8px; border-radius: 50%; background: rgba(73,78,213,.35); }
.lens small { position: absolute; left: 50%; bottom: 9px; translate: -50% 0; color: #aaa; font: 400 5px/1 "Space Mono", monospace; white-space: nowrap; }

.cards { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
.sd-card { --scale: 1; position: absolute; left: 50%; top: 50%; width: 91px; height: 112px; margin: -56px 0 0 -45px; border: 0; padding: 0; background: none; pointer-events: auto; transform-style: preserve-3d; will-change: transform; }
.sd-card__face { position: absolute; inset: 0; color: white; text-align: left; padding: 17px 10px 9px; background: linear-gradient(145deg,#272727,#050505 60%); clip-path: polygon(0 14%,15% 0,100% 0,100% 100%,0 100%); border-radius: 3px 7px 7px 7px; box-shadow: 0 12px 24px rgba(0,0,0,.22); transition: box-shadow .28s, filter .28s, scale .28s; overflow: hidden; }
.sd-card__face::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: repeating-linear-gradient(180deg,#101010 0 9px,#535353 9px 12px); opacity: .8; }
.sd-card__face::after { content: ""; position: absolute; inset: 34px 9px 9px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 2px; }
.sd-card:hover .sd-card__face, .sd-card.is-near .sd-card__face { box-shadow: 0 0 0 3px white, 0 0 0 4px #111, 0 18px 32px rgba(0,0,0,.28); filter: brightness(1.15); scale: 1.1; }
.sd-card.is-selected { z-index: 50; transition: transform 1.1s cubic-bezier(.76,0,.24,1) !important; }
.sd-card.is-selected .sd-card__face { box-shadow: 0 0 0 3px white, 0 0 0 4px #111; }
.sd-card.is-sphere-launching {
  pointer-events:none;
  transition:transform .82s cubic-bezier(.2,.82,.22,1),opacity .42s ease,filter .42s ease !important;
}
.sd-card.is-sphere-launching .sd-card__face { box-shadow:0 0 0 2px white,0 26px 48px rgba(0,0,0,.34); }
.sd-card.is-sphere-bursting { opacity:0 !important; filter:brightness(4) blur(5px) !important; }
.sd-card.is-sphere-loading .sd-card__face { animation:sphereLoadingPulse 1.4s ease-in-out infinite; }
@keyframes sphereLoadingPulse { 50% { filter:brightness(1.35); scale:1.035; } }
.sphere-load-status {
  position:fixed; z-index:71; left:50%; top:calc(50% + 105px);
  translate:-50% 0; margin:0; font:500 12px/1.5 "Space Mono","Noto Sans SC",monospace;
  color:#555; opacity:0; visibility:hidden; transition:opacity .25s ease;
  pointer-events:none; white-space:nowrap;
}
.sphere-load-status.is-visible { opacity:1; visibility:visible; }
@media (prefers-reduced-motion:reduce) { .sd-card.is-sphere-loading .sd-card__face { animation:none; } }
.sd-card__micro { display: block; margin-left: 5px; color: #bfbfbf; font: 700 5px/1.2 "Space Mono", monospace; letter-spacing: .1em; }
.sd-card__label { display: block; position: relative; z-index: 2; margin: 21px 0 0 5px; font: 900 17px/1 "Noto Sans SC", sans-serif; letter-spacing: -.08em; }
.sd-card__en { display: block; position: relative; z-index: 2; margin: 4px 0 0 5px; font: 700 7px/1 "Space Mono", monospace; }
.sd-card__capacity { position: absolute; z-index: 2; right: 9px; bottom: 10px; font: 700 15px/1 "Space Mono", monospace; }

.category-readout { position: absolute; z-index: 20; left: 50%; bottom: 22px; translate: -50% 0; display: flex; gap: 13px; align-items: end; min-width: 250px; justify-content: center; }
.category-readout > span { font: 700 10px/1 "Space Mono", monospace; color: #777; padding-bottom: 4px; }
.category-readout strong { display: block; font: 900 23px/1 "Noto Sans SC", sans-serif; }
.category-readout small { display: block; margin-top: 6px; font: 400 7px/1 "Space Mono", monospace; letter-spacing: .08em; }
.scroll-hint { position: absolute; z-index: 20; left: 50%; bottom: 86px; translate: -50% 0; font: 700 7px/1 "Space Mono", monospace; letter-spacing: .12em; display: flex; align-items: center; gap: 7px; }
.scroll-hint span { width: 20px; height: 1px; background: #111; animation: hint 1.5s ease infinite; transform-origin: left; }
@keyframes hint { 50% { scale: .45 1; opacity: .3; } }

.transition-flash { position: fixed; z-index: 80; inset: 0; pointer-events: none; display: grid; place-items: center; opacity: 0; visibility: hidden; background: #090909; }
.transition-flash span { width: 12vmax; aspect-ratio: 1; border-radius: 50%; background: white; transform: scale(.01); }
.transition-flash.is-active { visibility: visible; animation: flashBg 1.35s cubic-bezier(.65,0,.35,1) forwards; }
.transition-flash.is-active span { animation: flashLens 1.35s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes flashBg { 0%,35% { opacity: 0; } 50%,100% { opacity: 1; } }
@keyframes flashLens { 0%,28% { transform: scale(.01); } 70%,100% { transform: scale(16); } }

.scene--sphere {
  z-index:48;
  color:#0a0a0a;
  background:rgba(245,245,242,.58);
  backdrop-filter:blur(22px) saturate(.72);
  -webkit-backdrop-filter:blur(22px) saturate(.72);
  opacity:0;
  visibility:hidden;
  transition:opacity .46s ease,visibility .46s;
}
.scene--sphere.is-visible { opacity:1; visibility:visible; }
.scene--sphere.is-returning { pointer-events:none; }
.sphere-webgl { position:absolute; inset:0; width:100%; height:100%; }
.has-webgl .sphere-items { width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.has-webgl .sphere-photo { opacity:1; }
.sphere-nav {
  position:absolute;
  z-index:40;
  inset:0 0 auto;
  height:72px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 28px;
  border-bottom:1px solid rgba(0,0,0,.18);
  background:rgba(245,245,242,.5);
  backdrop-filter:blur(14px);
  font:700 9px/1 "Space Mono",monospace;
  letter-spacing:.1em;
}
.sphere-nav p { margin:0; }
.sphere-nav p:last-child { justify-self:end; color:#666; }
.sphere-back { border:0; padding:0; color:#0a0a0a; background:transparent; font:inherit; letter-spacing:inherit; }
.sphere-back span { display:inline-block; margin-right:8px; transition:transform .2s ease; }
.sphere-back:hover span,.sphere-back:focus-visible span { transform:translateX(-5px); }
.sphere-viewport {
  position:absolute;
  z-index:2;
  inset:72px 0 54px;
  overflow:hidden;
  outline:none;
  cursor:grab;
  touch-action:none;
  perspective:1100px;
  user-select:none;
}
.sphere-viewport.is-dragging { cursor:grabbing; }
.sphere-items { position:absolute; inset:0; transform-style:preserve-3d; }
.sphere-photo {
  position:absolute;
  left:50%;
  top:50%;
  margin:0;
  padding:0;
  border:1px solid rgba(0,0,0,.22);
  background:#f5f5f2;
  opacity:0;
  box-shadow:0 22px 55px rgba(0,0,0,.28);
  transform:translate3d(-50%,-50%,0) scale(.08);
  transform-origin:center;
  will-change:transform,opacity,filter;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.sphere-photo--portrait { width:clamp(108px,12vw,188px); }
.sphere-photo--landscape { width:clamp(160px,18vw,286px); }
.sphere-photo img { display:block; width:100%; height:auto; object-fit:contain; pointer-events:none; }
.sphere-photo span {
  position:absolute;
  right:7px;
  bottom:7px;
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border-radius:50%;
  color:#0a0a0a;
  background:white;
  font:700 7px/1 "Space Mono",monospace;
}
.sphere-photo strong {
  position:absolute;
  z-index:2;
  left:7px;
  bottom:7px;
  max-width:calc(100% - 46px);
  overflow:hidden;
  padding:7px 9px;
  color:#0a0a0a;
  background:rgba(255,255,255,.9);
  font:700 8px/1 "Noto Sans SC",sans-serif;
  letter-spacing:.02em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sphere-photo:hover,.sphere-photo:focus-visible {
  border-color:#0a0a0a;
  box-shadow:0 0 0 2px #0a0a0a,0 28px 65px rgba(0,0,0,.34);
  outline:none;
}
.sphere-burst {
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  width:1px;
  height:1px;
  pointer-events:none;
}
.sphere-burst::before,.sphere-burst::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:8px;
  aspect-ratio:1;
  border:1px solid rgba(10,10,10,.8);
  border-radius:50%;
  translate:-50% -50%;
  opacity:0;
}
.sphere-burst.is-active::before { animation:sphereRing .9s cubic-bezier(.15,.75,.24,1) forwards; }
.sphere-burst.is-active::after { animation:sphereRing 1.15s .08s cubic-bezier(.15,.75,.24,1) forwards; }
.sphere-burst i {
  --ray:0deg;
  position:absolute;
  left:0;
  top:0;
  width:1px;
  height:min(24vh,190px);
  background:linear-gradient(to top,transparent,rgba(10,10,10,.72));
  transform-origin:50% 100%;
  transform:translate(-50%,-100%) rotate(var(--ray)) scaleY(.04);
  opacity:0;
}
.sphere-burst i:nth-child(2){--ray:30deg}.sphere-burst i:nth-child(3){--ray:60deg}.sphere-burst i:nth-child(4){--ray:90deg}
.sphere-burst i:nth-child(5){--ray:120deg}.sphere-burst i:nth-child(6){--ray:150deg}.sphere-burst i:nth-child(7){--ray:180deg}
.sphere-burst i:nth-child(8){--ray:210deg}.sphere-burst i:nth-child(9){--ray:240deg}.sphere-burst i:nth-child(10){--ray:270deg}
.sphere-burst i:nth-child(11){--ray:300deg}.sphere-burst i:nth-child(12){--ray:330deg}
.sphere-burst.is-active i { animation:sphereRay .82s cubic-bezier(.12,.68,.2,1) forwards; }
@keyframes sphereRing { 0%{opacity:1;scale:.1} 100%{opacity:0;scale:38} }
@keyframes sphereRay { 0%{opacity:1;transform:translate(-50%,-100%) rotate(var(--ray)) scaleY(.04)} 100%{opacity:0;transform:translate(-50%,-100%) rotate(var(--ray)) scaleY(1)} }
.sphere-footer {
  position:absolute;
  z-index:40;
  inset:auto 28px 0;
  height:54px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  border-top:1px solid rgba(0,0,0,.18);
  font:700 8px/1 "Space Mono",monospace;
  letter-spacing:.12em;
}
.sphere-footer span:first-child { font:900 22px/1 "Noto Sans SC",sans-serif; letter-spacing:-.06em; }
.sphere-footer span:nth-child(2) { color:#666; }
.sphere-footer span:last-child { justify-self:end; }

.series-viewer {
  position:fixed;
  z-index:82;
  inset:0;
  overflow:hidden;
  color:#0a0a0a;
  display:grid;
  place-items:center;
  padding:clamp(18px,4vw,62px);
  background:rgba(10,10,10,.38);
  backdrop-filter:blur(26px) saturate(.58);
  -webkit-backdrop-filter:blur(26px) saturate(.58);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .48s ease,visibility .48s;
}
.series-viewer.is-open { opacity:1; visibility:visible; pointer-events:auto; }
.series-viewer__panel {
  position:relative;
  width:min(1120px,92vw);
  height:min(760px,84vh);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.76);
  border-radius:clamp(24px,3vw,44px);
  background:rgba(246,246,242,.94);
  box-shadow:0 42px 120px rgba(0,0,0,.35);
}
.series-viewer__header {
  position:absolute;
  z-index:20;
  top:clamp(34px,6vh,72px);
  left:50%;
  width:min(680px,76%);
  translate:-50% 0;
  text-align:center;
}
.series-viewer__header p { margin:0 0 10px; color:#626262; font:700 9px/1 "Space Mono",monospace; letter-spacing:.17em; }
.series-viewer__header h2 { margin:0; font:900 clamp(34px,5vw,76px)/.94 "Noto Sans SC",sans-serif; letter-spacing:-.07em; }
.series-viewer__header > span { display:block; margin-top:12px; color:#666; font:700 8px/1 "Space Mono",monospace; letter-spacing:.14em; }
.series-viewer__header > button {
  position:absolute;
  top:-18px;
  right:-15%;
  padding:8px 12px;
  border:1px solid rgba(0,0,0,.45);
  border-radius:999px;
  background:rgba(245,245,242,.86);
  font:700 8px/1 "Space Mono",monospace;
}
.series-viewer__stage {
  position:absolute;
  z-index:5;
  inset:auto 0 clamp(62px,10vh,92px);
  height:min(40vh,350px);
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  cursor:grab;
  touch-action:pan-y;
  overscroll-behavior:contain;
}
.series-viewer__stage::-webkit-scrollbar { display:none; }
.series-viewer__stage.is-dragging { cursor:grabbing; }
.series-viewer__track {
  display:flex;
  align-items:center;
  gap:clamp(12px,1.5vw,22px);
  width:max-content;
  min-width:100%;
  height:100%;
  padding:28px max(24px,calc(50% - 110px));
}
.series-viewer__tile {
  position:relative;
  flex:0 0 auto;
  height:82%;
  width:clamp(150px,calc(min(40vh,350px) * .82 * var(--series-ratio,1)),460px);
  overflow:hidden;
  padding:5px;
  border:1px solid rgba(0,0,0,.16);
  border-radius:18px;
  background:#fff;
  box-shadow:0 18px 42px rgba(0,0,0,.18);
  transform:translateY(0) rotate(var(--series-tilt,0deg)) scale(.96);
  transition:transform .36s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,filter .3s ease;
}
.series-viewer__tile:nth-child(4n + 1) { --series-tilt:-1.2deg; }
.series-viewer__tile:nth-child(4n + 2) { --series-tilt:.8deg; }
.series-viewer__tile:nth-child(4n + 3) { --series-tilt:-.5deg; }
.series-viewer__tile:nth-child(4n) { --series-tilt:1.1deg; }
.series-viewer__tile img { display:block; width:100%; height:100%; object-fit:contain; border-radius:13px; pointer-events:none; }
.series-viewer__tile span {
  position:absolute;
  right:10px;
  bottom:10px;
  display:grid;
  place-items:center;
  min-width:28px;
  height:28px;
  padding:0 7px;
  border-radius:999px;
  color:#0a0a0a;
  background:rgba(255,255,255,.9);
  font:700 8px/1 "Space Mono",monospace;
}
.series-viewer__tile:hover,
.series-viewer__tile:focus-visible,
.series-viewer__tile.is-current {
  z-index:3;
  outline:none;
  box-shadow:0 28px 58px rgba(0,0,0,.26);
  transform:translateY(-16px) rotate(0deg) scale(1.04);
}
.series-viewer__hint {
  position:absolute;
  left:50%;
  bottom:28px;
  translate:-50% 0;
  white-space:nowrap;
  color:#686868;
  font:700 8px/1 "Space Mono",monospace;
  letter-spacing:.12em;
}
.series-viewer__hint span { color:#0a0a0a; }

.scene--gallery { z-index: 2; background: #0a0a0a; color: white; opacity: 0; visibility: hidden; transition: opacity .55s ease .1s, visibility .55s; }
.scene--gallery.is-visible { opacity: 1; visibility: visible; }
.gallery-nav { border-bottom: 1px solid rgba(255,255,255,.16); background: rgba(10,10,10,.72); backdrop-filter: blur(12px); }
.back-button { justify-self: start; color: white; border: 0; background: transparent; padding: 0; font: 700 9px/1 "Space Mono", monospace; letter-spacing: .06em; }
.back-button span { display: inline-block; margin-right: 7px; transition: transform .2s; }
.back-button:hover span { transform: translateX(-4px); }
.category-nav { display: flex; gap: 6px; }
.category-nav button { border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: transparent; color: #aaa; padding: 8px 12px; font: 700 8px/1 "Space Mono", monospace; transition: .25s; }
.category-nav button:hover, .category-nav button.is-active { color: #0a0a0a; background: white; border-color: white; }
.gallery-nav__meta { justify-self: end; margin: 0; }
.gallery-title { position: absolute; z-index: 1; left: 2.8vw; top: 95px; display: flex; align-items: start; pointer-events: none; }
.gallery-title span { font: 700 10px/1 "Space Mono", monospace; color: #777; margin: 1.2vw 1vw 0 0; }
.gallery-title h2 { margin: 0; font: 900 clamp(66px, 12vw, 180px)/.8 "Noto Sans SC", sans-serif; letter-spacing: -.1em; transform: translateX(var(--title-x)); transition: transform .2s ease-out; }
.gallery-title em { margin: 1.25vw 0 0 1.2vw; font: 400 10px/1 "Space Mono", monospace; color: #999; writing-mode: vertical-rl; letter-spacing: .14em; }

.film-window { position: absolute; z-index: 3; left: 0; top: 25vh; width: 100%; height: 58vh; overflow: visible; }
.film-track { --track-x: 0px; display: flex; align-items: center; gap: clamp(22px, 3vw, 48px); width: max-content; height: 100%; padding: 0 22vw; transform: translate3d(var(--track-x),0,0); will-change: transform; }
.frame { position: relative; flex: none; width: clamp(260px, 31vw, 520px); height: 76%; margin-top: var(--lift); transform: rotate(var(--tilt)) scale(var(--focus, .88)); opacity: var(--fade, .58); transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s, filter .35s; filter: saturate(var(--sat,.6)); }
.frame:nth-child(3n+1) { height: 91%; width: clamp(260px, 27vw, 450px); }
.frame:nth-child(3n+2) { height: 65%; width: clamp(320px, 38vw, 630px); }
.frame.is-active { --focus: 1; --fade: 1; --sat: 1; z-index: 4; }
.frame__button { display: block; width: 100%; height: 100%; border: 0; padding: 0; background: #151515; overflow: hidden; }
.frame__button::after { content: "VIEW"; position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; border: 1px solid white; border-radius: 50%; width: 65px; aspect-ratio: 1; display: grid; place-items: center; color: white; font: 700 8px/1 "Space Mono", monospace; opacity: 0; transform: scale(.6); transition: .25s; backdrop-filter: blur(6px); }
.frame__button:hover::after { opacity: 1; transform: scale(1); }
.frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08) translateX(var(--parallax,0px)); transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .35s; }
.frame__meta { position: absolute; left: 0; bottom: -28px; right: 0; display: flex; justify-content: space-between; align-items: center; font: 400 8px/1 "Space Mono", monospace; color: #aaa; }
.frame__meta strong { color: white; font-weight: 700; }

.gallery-footer { position: absolute; z-index: 10; left: 28px; right: 28px; bottom: 24px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 24px; }
.gallery-footer p { margin: 0; max-width: 320px; font-size: 10px; line-height: 1.6; color: #aaa; }
.gallery-progress { display: flex; align-items: center; gap: 10px; font: 700 8px/1 "Space Mono", monospace; }
.gallery-progress i { position: relative; display: block; width: 130px; height: 1px; background: #444; overflow: hidden; }
.gallery-progress b { position: absolute; inset: 0; transform-origin: left; background: white; transform: scaleX(.2); transition: transform .25s; }
.drag-hint { justify-self: end; text-align: right; font-family: "Space Mono", monospace !important; letter-spacing: .08em; }

.lightbox { position: fixed; z-index: 90; inset: 0; display: grid; grid-template-columns: minmax(0,1fr) 160px; align-items: center; gap: clamp(24px,4vw,72px); padding: 72px 6vw; background: rgba(245,245,242,.34); backdrop-filter: blur(26px) saturate(.68); -webkit-backdrop-filter: blur(26px) saturate(.68); opacity: 0; visibility: hidden; transition: opacity .42s ease,visibility .42s; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { justify-self: center; min-width: 0; max-width: 100%; max-height: calc(100dvh - 144px); object-fit: contain; transform: scale(.92); box-shadow:0 26px 72px rgba(0,0,0,.3); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.lightbox.is-open img { transform: scale(1); }
.lightbox__close { position: absolute; top: 24px; right: 28px; color: #0a0a0a; background: rgba(245,245,242,.45); border: 1px solid rgba(0,0,0,.48); border-radius: 999px; padding: 8px 12px; font: 700 8px/1 "Space Mono", monospace; }
.lightbox__settings { margin: 0; display: grid; gap: 30px; color: #111; }
.lightbox__settings dt { font-size: 14px; line-height: 1.5; color: #555; }
.lightbox__settings dt span { display: block; font: 400 12px/1.5 "Space Mono", monospace; letter-spacing: .04em; }
.lightbox__settings dd { margin: 7px 0 0; font: 400 22px/1.3 "Space Mono", monospace; }
@media (max-width: 600px) {
  .lightbox { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; gap: 24px; padding: 72px 6vw 28px; }
  .lightbox img { max-height: calc(100dvh - 245px); }
  .lightbox__settings { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
  .lightbox__settings dt span { display: none; }
  .lightbox__settings dd { font-size: 14px; overflow-wrap: anywhere; }
}

@media (max-width: 760px) {
  .topbar, .gallery-nav { height: 60px; padding: 0 16px; }
  .topbar { grid-template-columns: 1fr auto; }
  .topbar__note, .gallery-nav__meta, .edge-copy, .sound-toggle { display: none; }
  .hero-copy { top: 15%; }
  .hero-copy h1 { font-size: clamp(42px, 12vw, 64px); letter-spacing: -.085em; }
  .hero-copy h1 span { display: none; }
  .orbital-stage { top: 57%; width: 100vw; height: 64vh; }
  .camera-rig { scale: .78; }
  .orbit-line { width: 98%; height: 44%; }
  .sd-card { scale: .76; }
  .category-readout { bottom: 13px; }
  .scroll-hint { bottom: 69px; }
  .gallery-nav { grid-template-columns: auto 1fr; gap: 12px; }
  .category-nav { justify-self: end; }
  .category-nav button { padding: 7px 9px; font-size: 0; }
  .category-nav button::after { content: attr(data-short); font-size: 9px; }
  .gallery-title { top: 86px; }
  .film-window { top: 23vh; height: 58vh; }
  .film-track { padding: 0 15vw; gap: 26px; }
  .frame { width: 72vw !important; height: 78% !important; }
  .gallery-footer { left: 16px; right: 16px; bottom: 16px; grid-template-columns: 1fr auto; }
  .gallery-progress { grid-column: 2; }
  .drag-hint { display: none; }
  .sphere-nav { height:60px; padding:0 16px; grid-template-columns:1fr auto; }
  .sphere-nav p:last-child { display:none; }
  .sphere-viewport { inset:60px 0 48px; }
  .sphere-photo--portrait { width:27vw; }
  .sphere-photo--landscape { width:40vw; }
  .sphere-footer { inset:auto 16px 0; height:48px; }
  .sphere-footer span:nth-child(2) { display:none; }
  .series-viewer { padding:10px; }
  .series-viewer__panel { width:96vw; height:88vh; border-radius:24px; }
  .series-viewer__header { top:32px; width:78%; }
  .series-viewer__header > button { top:-18px; right:-10%; }
  .series-viewer__stage { bottom:64px; height:46vh; }
  .series-viewer__track { padding-inline:max(24px,calc(50% - 100px)); }
  .series-viewer__tile { width:min(72vw,calc(46vh * .82 * var(--series-ratio,1))); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* v2 — true 3D camera, color-only cards, contact-sheet level */
.pixel-text { z-index: 3; }
.hero-copy { z-index: 2; }
.hero-copy h1 { transition: opacity .3s ease, filter .3s ease; }
.scene--lobby.category-hover .hero-copy h1 { opacity: .06; filter: blur(1px); }

.camera-rig { transform-style: preserve-3d; }
.camera-rig.is-entering { transform: translate(-50%, -44%); }
.camera-motion { position: absolute; inset: 0; transform-style: preserve-3d; animation: cameraFloat 4.2s ease-in-out infinite; }
.camera-model {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(calc(var(--my) * -8deg - 5deg)) rotateY(calc(var(--mx) * 18deg + var(--camera-auto, 0deg)));
  transition: transform .16s ease-out;
}
@keyframes cameraFloat { 0%,100% { transform: translateY(-5px); } 50% { transform: translateY(9px); } }
.camera--front { animation: none; transform: translateZ(55px); }
.camera--front .camera__body { transform: none; }
.camera--front .camera__top { transform: none; }
.camera--front .lens { transform: translateZ(35px); }
.camera-back {
  position: absolute; left: 22px; top: 58px; width: 266px; height: 150px; border-radius: 18px 16px 22px 20px;
  background: linear-gradient(145deg,#343434,#080808 58%,#151515); border: 1px solid #050505;
  box-shadow: inset 0 1px #777, inset 12px -15px 25px #000; transform: rotateY(180deg) translateZ(55px); backface-visibility: visible;
}
.camera-back::before { content:""; position:absolute; inset:8px; border:1px solid rgba(255,255,255,.1); border-radius:12px 10px 17px 14px; }
.camera-back__viewfinder { position:absolute; left:91px; top:-33px; width:79px; height:45px; border-radius:10px 10px 3px 3px; background:linear-gradient(#333,#090909); border:1px solid #555; }
.camera-back__viewfinder i { position:absolute; inset:10px 18px 7px; border-radius:5px 5px 10px 10px; background:radial-gradient(circle at 55% 50%,#766f37,#111 36%,#000 68%); }
.camera-back__screen { position:absolute; left:18px; top:28px; width:156px; height:103px; border-radius:4px; border:6px solid #171717; background:radial-gradient(circle at 30% 20%,#364d55,#081116 48%,#020303); box-shadow:0 0 0 1px #555; overflow:hidden; }
.camera-back__screen::after { content:""; position:absolute; inset:-30% 46% -30% -15%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent); rotate:20deg; }
.camera-back__screen span { position:absolute; left:10px; bottom:9px; color:#9fb0ad; font:700 5px/1 "Space Mono",monospace; letter-spacing:.1em; }
.camera-back__screen i { position:absolute; right:8px; top:8px; width:5px; height:5px; border-radius:50%; background:#eaff54; box-shadow:0 0 6px #eaff54; }
.camera-back__buttons { position:absolute; right:17px; top:25px; width:58px; height:112px; }
.camera-back__buttons i { position:relative; display:block; width:12px; height:12px; margin:0 auto 6px; border-radius:50%; background:radial-gradient(circle at 40% 35%,#555,#0b0b0b 55%); border:1px solid #666; }
.camera-back__buttons b { position:absolute; left:7px; bottom:4px; width:44px; height:44px; border-radius:50%; border:7px solid #191919; box-shadow:0 0 0 1px #666,inset 0 0 0 1px #555; }
.camera-back__grip { position:absolute; right:-1px; top:14px; width:35px; height:124px; border-radius:14px 14px 21px 7px; background:repeating-linear-gradient(115deg,#171717 0 2px,#0b0b0b 2px 4px); }
.camera-plane { position:absolute; left:22px; top:58px; background:linear-gradient(145deg,#343434,#0b0b0b); border:1px solid #454545; transform-style:preserve-3d; }
.camera-plane--top { width:266px; height:110px; transform:rotateX(90deg) translateZ(55px); transform-origin:center center; border-radius:12px; }
.camera-plane--bottom { width:266px; height:110px; transform:rotateX(-90deg) translateZ(95px); border-radius:12px; }
.camera-plane--left { width:110px; height:150px; transform:rotateY(-90deg) translateZ(55px); border-radius:14px; }
.camera-plane--right { left:178px; width:110px; height:150px; transform:rotateY(90deg) translateZ(55px); border-radius:14px; }
.top-dial,.top-screen,.top-shutter { position:absolute; display:block; background:#0a0a0a; border:1px solid #666; }
.top-dial { left:27px; top:38px; width:52px; height:32px; border-radius:50%; background:repeating-conic-gradient(#777 0 3deg,#111 3deg 12deg); }
.top-screen { left:104px; top:36px; width:59px; height:35px; border-radius:4px; background:#15201e; box-shadow:inset 0 0 0 5px #111; }
.top-shutter { right:23px; top:38px; width:32px; height:27px; border-radius:50%; background:radial-gradient(circle,#333 0 40%,#050505 43%); }
.camera-rig.is-spinning .camera-model { animation: cameraSpin 1.8s cubic-bezier(.18,.68,.23,1) forwards; }
@keyframes cameraSpin {
  0% { transform:rotateX(-6deg) rotateY(0deg); }
  68% { transform:rotateX(-4deg) rotateY(1080deg); }
  84% { transform:rotateX(-2deg) rotateY(1195deg); }
  100% { transform:rotateX(0deg) rotateY(1260deg); }
}
.camera-rig.is-zooming { transform:translate(-50%,-44%) scale(5.6); transition:transform .8s cubic-bezier(.76,0,.24,1); }

.sd-card__face { background:linear-gradient(145deg,color-mix(in srgb,var(--card-color) 82%,white),var(--card-color) 58%,color-mix(in srgb,var(--card-color) 62%,black)); box-shadow:0 13px 26px rgba(0,0,0,.24); }
.sd-card__face::before { width:9px; background:repeating-linear-gradient(180deg,rgba(0,0,0,.5) 0 8px,rgba(255,255,255,.2) 8px 11px); }
.sd-card__face::after { inset:28px 10px 10px 15px; border:1px solid rgba(255,255,255,.45); background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 46%); }
.sd-card__notch { position:absolute; z-index:2; left:18px; top:17px; width:34px; height:5px; border-radius:5px; background:rgba(255,255,255,.78); box-shadow:0 11px 0 rgba(255,255,255,.24),0 22px 0 rgba(0,0,0,.16); }
.sd-card__dot { position:absolute; z-index:2; right:12px; bottom:12px; width:13px; height:13px; border-radius:50%; border:2px solid rgba(255,255,255,.8); }

.scene--collection { z-index:2; background:var(--paper); color:var(--ink); opacity:0; visibility:hidden; overflow-y:auto; transition:opacity .48s ease,visibility .48s; }
.scene--collection.is-visible { opacity:1; visibility:visible; }
.collection-nav { position:sticky; z-index:20; top:0; height:70px; padding:0 28px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid rgba(0,0,0,.18); background:rgba(245,245,242,.88); backdrop-filter:blur(14px); font:700 9px/1 "Space Mono",monospace; letter-spacing:.08em; }
.collection-nav p { margin:0; }
.collection-nav p:last-child { justify-self:end; }
.back-button--dark { color:var(--ink); }
.collection-heading { display:grid; grid-template-columns:auto minmax(200px,1fr) minmax(220px,360px); gap:20px; align-items:end; padding:48px 3vw 34px; }
.collection-heading > span { align-self:start; margin-top:13px; color:#777; font:700 10px/1 "Space Mono",monospace; }
.collection-heading h2 { margin:0; font:900 clamp(72px,12vw,172px)/.78 "Noto Sans SC",sans-serif; letter-spacing:-.11em; }
.collection-heading p { margin:0 0 4px; font-size:11px; line-height:1.8; }
.collection-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:0 3vw 34px; }
.collection-tile { --rx:0deg; --ry:0deg; position:relative; aspect-ratio:4/3; border:0; padding:0; background:#ddd; overflow:hidden; transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1); transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s; transform-style:preserve-3d; }
.collection-tile:hover,.collection-tile:focus-visible { transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.055); z-index:3; box-shadow:0 24px 42px rgba(0,0,0,.24); }
.collection-tile img { width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .3s; }
.collection-tile:hover img { transform:scale(1.07); }
.collection-tile__meta { position:absolute; inset:auto 0 0; padding:42px 13px 12px; display:flex; justify-content:space-between; color:white; background:linear-gradient(transparent,rgba(0,0,0,.72)); font:700 8px/1 "Space Mono",monospace; text-shadow:0 1px 5px #000; }
.collection-tile__index { position:absolute; z-index:2; top:12px; left:12px; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#111; background:white; font:700 8px/1 "Space Mono",monospace; }
.collection-footer { display:flex; justify-content:space-between; padding:0 3vw 30px; color:#555; font:700 8px/1 "Space Mono",monospace; letter-spacing:.08em; }

@media (max-width:760px) {
  .camera-plane--top,.camera-plane--bottom,.camera-plane--left,.camera-plane--right { display:block; }
  .collection-nav { height:60px; padding:0 16px; grid-template-columns:1fr auto; }
  .collection-nav p:first-of-type { display:none; }
  .collection-heading { grid-template-columns:auto 1fr; padding:35px 16px 25px; }
  .collection-heading p { grid-column:1 / -1; }
  .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:0 8px 22px; }
  .collection-tile { aspect-ratio:3/4; }
  .collection-footer { padding:0 12px 22px; gap:20px; font-size:6px; }
  .camera-rig.is-zooming { transform:translate(-50%,-44%) scale(5.2); }
}

/* v3 — approved camera renders, labeled memory cards, kinetic contact sheet */
.camera-motion { animation:cameraFloat 4.8s ease-in-out infinite; }
.camera-product {
  position:absolute; left:50%; top:50%; width:430px; height:320px;
  transform:translate(-50%,-50%) rotateX(calc(var(--my) * -3deg)) rotateY(calc(var(--mx) * 5deg + var(--camera-auto,0deg)));
  transform-style:preserve-3d; transition:transform .2s ease-out; will-change:transform;
}
.camera-product__face { position:absolute; inset:0; display:grid; place-items:center; backface-visibility:hidden; transform-style:preserve-3d; }
.camera-product__face img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 24px 20px rgba(0,0,0,.18)); }
.camera-product__face--front { transform:translateZ(12px); }
.camera-product__face--back { transform:rotateY(180deg) translateZ(12px); }
.camera-product__depth { position:absolute; background:linear-gradient(90deg,#090909,#333 48%,#0b0b0b); opacity:.96; }
.camera-product__depth--side { left:50%; top:20%; width:24px; height:62%; transform:rotateY(90deg) translateZ(192px); border-radius:8px; }
.camera-product__depth--top { left:19%; top:50%; width:62%; height:24px; transform:rotateX(90deg) translateZ(96px); border-radius:8px; }
.camera-product__slot { position:absolute; left:18%; top:43%; width:7px; height:55px; border-radius:5px; background:#020202; box-shadow:0 0 0 1px #555; transform:translateZ(17px); }
.camera-rig.is-spinning .camera-product { animation:cameraProductSpin 2.2s cubic-bezier(.11,.63,.16,1) forwards; }
@keyframes cameraProductSpin {
  from { transform:translate(-50%,-50%) rotateX(-2deg) rotateY(0deg); }
  to { transform:translate(-50%,-50%) rotateX(0deg) rotateY(540deg); }
}
.camera-rig.is-zooming { transform:translate(-50%,-44%) scale(5.8); transition:transform .78s cubic-bezier(.7,0,.22,1); }

.sd-card__face {
  color:white; padding:17px 10px 9px;
  background:linear-gradient(145deg,#292929,#050505 62%) !important;
  box-shadow:0 13px 26px rgba(0,0,0,.25); transition:box-shadow .2s,filter .2s,scale .2s,opacity .32s;
}
.sd-card__face::before { width:8px; background:repeating-linear-gradient(180deg,#111 0 8px,#505050 8px 11px); }
.sd-card__face::after { inset:35px 9px 9px 14px; border:1px solid rgba(255,255,255,.22); background:none; }
.sd-card__color-tab { position:absolute; z-index:4; right:10px; top:0; width:13px; height:38px; background:var(--card-color); box-shadow:0 1px 5px rgba(0,0,0,.3); }
.sd-card__micro { display:block; position:relative; z-index:3; margin-left:5px; color:#bfbfbf; font:700 5px/1.2 "Space Mono",monospace; letter-spacing:.1em; }
.sd-card__en { display:block; position:relative; z-index:3; margin:33px 0 0 5px; color:white; font:700 7px/1 "Space Mono",monospace; }
.sd-card__capacity { position:absolute; z-index:3; right:9px; bottom:10px; color:white; font:700 15px/1 "Space Mono",monospace; }
.sd-card__capacity small { font-size:7px; }
.sd-card.is-selected { z-index:5 !important; transition:transform .62s cubic-bezier(.62,0,.18,1),opacity .32s !important; }
.sd-card.is-inserted { opacity:0; }

.scene--collection { overflow:hidden; }
.marquee-wall { position:absolute; z-index:2; left:0; right:0; top:70px; bottom:50px; display:grid; grid-template-rows:repeat(4,minmax(0,1fr)); gap:8px; padding:8px 0; overflow:hidden; }
.marquee-row { min-height:0; overflow:hidden; }
.marquee-row__track { display:flex; width:max-content; height:100%; animation:marqueeLeft var(--marquee-duration,34s) linear infinite; will-change:transform; }
.marquee-row--reverse .marquee-row__track { animation-name:marqueeRight; }
.marquee-row:hover .marquee-row__track { animation-play-state:paused; }
.marquee-group { display:flex; flex:none; align-items:stretch; gap:8px; padding-right:8px; }
.marquee-photo { position:relative; flex:none; width:clamp(190px,22vw,330px); height:100%; border:0; padding:0; overflow:hidden; border-radius:22px; background:#ddd; transform:scale(1); transition:transform .25s cubic-bezier(.2,.8,.2,1),filter .25s; }
.marquee-photo:hover,.marquee-photo:focus-visible { z-index:4; transform:scale(1.06) rotate(.7deg); filter:saturate(1.12); }
.marquee-photo img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.marquee-photo:hover img { transform:scale(1.045); }
.marquee-photo > span { position:absolute; right:11px; bottom:9px; display:grid; place-items:center; width:25px; height:25px; border-radius:50%; color:#111; background:white; font:700 7px/1 "Space Mono",monospace; }
.marquee-word { flex:none; width:clamp(210px,24vw,360px); height:100%; display:flex; align-items:center; justify-content:center; gap:12px; color:#101010; background:#dfe1ff; border-radius:22px; overflow:hidden; }
.marquee-row:nth-child(2n) .marquee-word { background:#e6f5c8; }
.marquee-row:nth-child(3n) .marquee-word { background:#ffd8c5; }
.marquee-word strong { font:900 clamp(54px,7vw,102px)/.8 "Noto Sans SC",sans-serif; letter-spacing:-.12em; }
.marquee-word span { writing-mode:vertical-rl; font:700 8px/1 "Space Mono",monospace; letter-spacing:.12em; }
@keyframes marqueeLeft { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes marqueeRight { from { transform:translateX(-50%); } to { transform:translateX(0); } }
.collection-footer { position:absolute; z-index:5; left:0; right:0; bottom:0; height:50px; padding:0 28px; align-items:center; background:var(--paper); border-top:1px solid rgba(0,0,0,.15); }
.collection-footer span:first-child { max-width:520px; font-family:"Noto Sans SC",sans-serif; font-weight:500; line-height:1.4; }

@media (max-width:760px) {
  .camera-product { width:390px; height:290px; }
  .camera-rig.is-zooming { transform:translate(-50%,-44%) scale(5.4); }
  .marquee-wall { top:60px; bottom:50px; grid-template-rows:repeat(4,minmax(0,1fr)); gap:6px; padding:6px 0; }
  .marquee-group { gap:6px; padding-right:6px; }
  .marquee-photo { width:44vw; border-radius:14px; }
  .marquee-word { width:48vw; border-radius:14px; gap:8px; }
  .marquee-word strong { font-size:54px; }
  .collection-footer { height:50px; padding:0 12px; }
  .collection-footer span:first-child { max-width:62vw; }
}

/* v4 — geometric camera: every visible surface exists in 3D space */
.camera-3d {
  position:absolute;
  left:50%;
  top:50%;
  width:300px;
  height:170px;
  transform-style:preserve-3d;
  transform:translate(-50%,-50%) rotateX(calc(var(--my) * -7deg - 6deg)) rotateY(calc(var(--mx) * 14deg + var(--camera-auto,0deg)));
  transition:transform .17s ease-out;
  will-change:transform;
}
.camera-3d__face {
  position:absolute;
  display:block;
  transform-style:preserve-3d;
  background:#111;
  border:1px solid #050505;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), inset 0 -16px 26px rgba(0,0,0,.7);
  backface-visibility:hidden;
}
.camera-3d__front,
.camera-3d__back {
  inset:0;
  border-radius:20px 18px 27px 22px;
}
.camera-3d__front {
  transform:translateZ(45px);
  background:
    linear-gradient(90deg,transparent 0 68%,rgba(255,255,255,.05) 68.4%,transparent 69%),
    linear-gradient(148deg,#484848 0 5%,#212121 23%,#080808 76%,#151515 100%);
}
.camera-3d__front::after {
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:13px 12px 21px 16px;
  pointer-events:none;
}
.camera-3d__back {
  transform:rotateY(180deg) translateZ(45px);
  background:linear-gradient(145deg,#353535 0,#121212 38%,#050505 78%,#1b1b1b 100%);
}
.camera-3d__top,
.camera-3d__bottom {
  left:0;
  top:40px;
  width:300px;
  height:90px;
  border-radius:15px;
  background:linear-gradient(90deg,#111,#3d3d3d 36%,#151515 75%,#060606);
}
.camera-3d__top { transform:rotateX(90deg) translateZ(85px); }
.camera-3d__bottom { transform:rotateX(-90deg) translateZ(85px); }
.camera-3d__left,
.camera-3d__right {
  left:105px;
  top:0;
  width:90px;
  height:170px;
  border-radius:16px;
  background:linear-gradient(155deg,#353535,#0a0a0a 66%,#1b1b1b);
}
.camera-3d__left { transform:rotateY(-90deg) translateZ(150px); }
.camera-3d__right { transform:rotateY(90deg) translateZ(150px); }
.camera-3d__left::before {
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:27px;
  height:48px;
  border:1px solid #3f3f3f;
  border-radius:7px;
  background:linear-gradient(145deg,#171717,#080808);
  box-shadow:inset 0 0 0 2px #111,0 1px 0 rgba(255,255,255,.08);
}
.camera-3d__left::after {
  content:"";
  position:absolute;
  left:15px;
  right:15px;
  top:87px;
  height:43px;
  border-top:1px solid #3e3e3e;
  border-bottom:1px solid #050505;
  border-radius:5px;
  background:repeating-linear-gradient(90deg,#151515 0 3px,#0d0d0d 3px 6px);
}
.camera-3d__right::before {
  content:"";
  position:absolute;
  inset:10px 7px;
  border-radius:12px;
  background:repeating-linear-gradient(125deg,rgba(255,255,255,.035) 0 2px,rgba(0,0,0,.16) 2px 5px);
  border:1px solid rgba(255,255,255,.06);
}

.camera-3d__front-plate {
  position:absolute;
  left:46px;
  right:44px;
  top:22px;
  height:128px;
  border-radius:58% 45% 45% 50%;
  background:radial-gradient(circle at 47% 47%,#272727 0 46%,#111 47% 65%,transparent 66%);
  box-shadow:inset 0 0 25px #000;
  transform:translateZ(2px);
}
.camera-3d__prism {
  position:absolute;
  z-index:2;
  left:92px;
  top:-37px;
  width:116px;
  height:54px;
  clip-path:polygon(16% 100%,24% 24%,37% 0,70% 0,83% 24%,91% 100%);
  background:linear-gradient(145deg,#4b4b4b,#171717 55%,#070707);
  box-shadow:inset 0 1px rgba(255,255,255,.35);
  transform:translateZ(1px);
}
.camera-3d__prism i {
  position:absolute;
  left:43px;
  top:6px;
  width:34px;
  height:9px;
  background:#090909;
  border:1px solid #666;
}
.camera-3d__grip {
  position:absolute;
  z-index:3;
  right:-1px;
  top:13px;
  width:61px;
  height:145px;
  border-radius:21px 17px 27px 12px;
  background:repeating-linear-gradient(122deg,#202020 0 2px,#0c0c0c 2px 4px);
  border-left:1px solid #454545;
  box-shadow:inset 10px 0 16px rgba(255,255,255,.035),-5px 0 12px rgba(0,0,0,.5);
  transform:translateZ(7px);
}
.camera-3d__grip i {
  position:absolute;
  right:12px;
  top:10px;
  width:30px;
  height:13px;
  border-radius:50%;
  background:radial-gradient(circle,#353535 0 45%,#080808 49%);
  border:1px solid #5b5b5b;
}
.camera-3d__af-light {
  position:absolute;
  left:28px;
  top:64px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:radial-gradient(circle at 38% 35%,#ff8d72,#9e1508 43%,#240300 70%);
  box-shadow:0 0 0 2px #111,0 0 0 3px #555;
  transform:translateZ(3px);
}
.camera-3d__mark {
  position:absolute;
  left:25px;
  top:27px;
  color:#eee;
  font:800 12px/1 "Space Mono",monospace;
  letter-spacing:.05em;
  transform:translateZ(3px);
}

.camera-3d__lens {
  position:absolute;
  z-index:6;
  left:83px;
  top:27px;
  width:122px;
  height:122px;
  border-radius:50%;
  transform-style:preserve-3d;
}
.camera-3d__lens-ring,
.camera-3d__glass {
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  transform-style:preserve-3d;
}
.camera-3d__lens-ring--1 {
  width:132px;
  height:132px;
  background:repeating-conic-gradient(#131313 0 3deg,#4c4c4c 3.5deg 4.5deg,#090909 5deg 9deg);
  border:7px solid #0b0b0b;
  box-shadow:0 9px 17px rgba(0,0,0,.45),inset 0 0 0 2px #555;
  transform:translate(-50%,-50%) translateZ(12px);
}
.camera-3d__lens-ring--2 {
  width:116px;
  height:116px;
  background:repeating-conic-gradient(#3f3f3f 0 1deg,#0c0c0c 1deg 7deg);
  border:8px solid #161616;
  box-shadow:inset 0 0 0 1px #626262;
  transform:translate(-50%,-50%) translateZ(27px);
}
.camera-3d__lens-ring--3 {
  width:99px;
  height:99px;
  background:radial-gradient(circle,#0a0a0a 0 58%,#343434 59% 67%,#090909 68%);
  border:5px solid #080808;
  box-shadow:inset 0 0 0 1px #777,0 5px 12px #000;
  transform:translate(-50%,-50%) translateZ(41px);
}
.camera-3d__glass {
  width:73px;
  height:73px;
  overflow:hidden;
  background:radial-gradient(circle at 35% 30%,#608a83 0 4%,#1b4444 10%,#0a2025 37%,#030809 70%);
  border:2px solid #0b0b0b;
  box-shadow:inset 0 0 18px #000,0 0 0 3px #252525;
  transform:translate(-50%,-50%) translateZ(49px);
}
.camera-3d__glass span {
  position:absolute;
  left:12px;
  top:12px;
  width:35px;
  height:12px;
  border-radius:50%;
  background:rgba(199,244,231,.38);
  filter:blur(1px);
  transform:rotate(-26deg);
}
.camera-3d__glass i {
  position:absolute;
  right:13px;
  bottom:12px;
  width:13px;
  height:8px;
  border-radius:50%;
  background:rgba(86,74,226,.34);
}

.camera-3d__eyecup {
  position:absolute;
  left:104px;
  top:-32px;
  width:92px;
  height:52px;
  border-radius:18px 18px 7px 7px;
  background:linear-gradient(#343434,#060606 72%);
  border:1px solid #545454;
  transform:translateZ(3px);
}
.camera-3d__eyecup i {
  position:absolute;
  inset:10px 19px 8px;
  border-radius:9px 9px 16px 16px;
  background:radial-gradient(ellipse at 54% 45%,#948247 0 6%,#262718 13%,#050505 64%);
  box-shadow:inset 0 0 0 3px #111,0 0 0 1px #5c5c5c;
}
.camera-3d__screen {
  position:absolute;
  left:17px;
  top:31px;
  width:184px;
  height:119px;
  overflow:hidden;
  border:7px solid #111;
  border-radius:5px;
  background:radial-gradient(circle at 27% 20%,#2f4d56,#091418 47%,#010202 78%);
  box-shadow:0 0 0 1px #5b5b5b,inset 0 0 24px #000;
  transform:translateZ(3px);
}
.camera-3d__screen::after {
  content:"";
  position:absolute;
  inset:-35% 47% -35% -15%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  transform:rotate(20deg);
}
.camera-3d__screen span {
  position:absolute;
  left:9px;
  bottom:8px;
  width:23px;
  height:2px;
  background:rgba(205,229,222,.4);
  box-shadow:31px 0 rgba(205,229,222,.22),62px 0 rgba(205,229,222,.13);
}
.camera-3d__controls {
  position:absolute;
  right:14px;
  top:24px;
  width:72px;
  height:133px;
  transform:translateZ(4px);
}
.camera-3d__controls i {
  display:block;
  width:12px;
  height:12px;
  margin:0 auto 7px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#5a5a5a,#080808 62%);
  border:1px solid #676767;
}
.camera-3d__controls i:nth-child(2) { margin-left:9px; }
.camera-3d__controls i:nth-child(3) { margin-right:7px; }
.camera-3d__controls b {
  position:absolute;
  left:13px;
  bottom:2px;
  width:48px;
  height:48px;
  border-radius:50%;
  border:8px solid #171717;
  box-shadow:0 0 0 1px #656565,inset 0 0 0 1px #555;
}
.camera-3d__controls b::after {
  content:"OK";
  position:absolute;
  inset:5px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#0c0c0c;
  color:#aaa;
  font:700 5px/1 "Space Mono",monospace;
}
.camera-3d__back-grip {
  position:absolute;
  right:0;
  top:11px;
  width:49px;
  height:151px;
  border-radius:17px 17px 26px 10px;
  background:repeating-linear-gradient(122deg,rgba(255,255,255,.025) 0 2px,rgba(0,0,0,.22) 2px 4px);
  border-left:1px solid #414141;
}

.camera-3d__dial,
.camera-3d__hotshoe,
.camera-3d__top-display,
.camera-3d__shutter { position:absolute; display:block; }
.camera-3d__dial {
  left:28px;
  top:28px;
  width:55px;
  height:35px;
  border-radius:50%;
  background:repeating-conic-gradient(#747474 0 2deg,#121212 2.5deg 11deg);
  border:5px solid #0b0b0b;
  box-shadow:0 0 0 1px #626262;
}
.camera-3d__hotshoe {
  left:119px;
  top:26px;
  width:48px;
  height:31px;
  border:5px solid #111;
  background:linear-gradient(90deg,#777 0 8%,#1b1b1b 10% 90%,#777 92%);
  box-shadow:0 0 0 1px #656565;
}
.camera-3d__top-display {
  right:50px;
  top:25px;
  width:55px;
  height:34px;
  border-radius:4px;
  background:linear-gradient(145deg,#33413d,#111817);
  border:5px solid #0b0b0b;
  box-shadow:0 0 0 1px #626262;
}
.camera-3d__shutter {
  right:13px;
  top:30px;
  width:27px;
  height:27px;
  border-radius:50%;
  background:radial-gradient(circle,#545454 0 37%,#0b0b0b 42%);
  border:1px solid #777;
}
.camera-3d__slot {
  position:absolute;
  left:35px;
  top:48px;
  width:8px;
  height:76px;
  border-radius:5px;
  background:#010101;
  box-shadow:inset -1px 0 #5c5c5c,0 0 0 1px #111;
}

.camera-rig.is-spinning .camera-3d {
  animation:camera3dSpin 2.2s cubic-bezier(.11,.63,.16,1) forwards;
}
@keyframes camera3dSpin {
  0% { transform:translate(-50%,-50%) rotateX(-6deg) rotateY(0deg); }
  58% { transform:translate(-50%,-50%) rotateX(-4deg) rotateY(445deg); }
  82% { transform:translate(-50%,-50%) rotateX(-1.5deg) rotateY(520deg); }
  100% { transform:translate(-50%,-50%) rotateX(0deg) rotateY(540deg); }
}

@media (max-width:760px) {
  .camera-3d { width:300px; height:170px; }
}

/* v5 — continuous shell treatment: shallow depth, overlapping joins and a compact lens barrel */
.camera-3d {
  /* Filters flatten preserve-3d descendants, so depth and shadow stay on physical layers. */
}
.camera-3d__face {
  border-color:#0b0b0b;
  box-shadow:
    0 0 0 1.5px #121212,
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -13px 24px rgba(0,0,0,.58);
}
.camera-3d__front,
.camera-3d__back {
  left:-2px;
  right:-2px;
  top:-2px;
  bottom:-2px;
  border-radius:21px 19px 27px 23px;
}
.camera-3d__front *,
.camera-3d__back *,
.camera-3d__front::before,
.camera-3d__front::after,
.camera-3d__back::before,
.camera-3d__back::after {
  backface-visibility:hidden;
}
.camera-3d__front { transform:translateZ(31px); }
.camera-3d__back { transform:rotateY(180deg) translateZ(31px); }
.camera-3d__top,
.camera-3d__bottom {
  top:54px;
  width:300px;
  height:62px;
  border-radius:7px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,.12) 37%,transparent 71%),
    linear-gradient(180deg,#262626,#0a0a0a);
}
.camera-3d__top { transform:rotateX(90deg) translateZ(85px); }
.camera-3d__bottom { transform:rotateX(-90deg) translateZ(85px); }
.camera-3d__left,
.camera-3d__right {
  left:119px;
  width:62px;
  border-radius:7px;
  background:
    repeating-linear-gradient(120deg,rgba(255,255,255,.025) 0 2px,transparent 2px 5px),
    linear-gradient(145deg,#2c2c2c,#0a0a0a 68%,#181818);
}
.camera-3d__left { transform:rotateY(-90deg) translateZ(150px); }
.camera-3d__right { transform:rotateY(90deg) translateZ(150px); }
.camera-3d__front::before,
.camera-3d__back::before {
  content:"";
  position:absolute;
  inset:2px;
  z-index:-1;
  border-radius:18px 16px 24px 20px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.035);
  pointer-events:none;
}
.camera-3d__front::after { inset:8px; }

.camera-3d__lens {
  transform-style:preserve-3d;
}
.camera-3d__lens::before {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:144px;
  height:144px;
  border-radius:50%;
  background:radial-gradient(circle,#171717 0 57%,#2f2f2f 58% 64%,#090909 65% 71%,transparent 72%);
  box-shadow:0 7px 14px rgba(0,0,0,.45),inset 0 0 0 1px #555;
  transform:translate(-50%,-50%) translateZ(3px);
}
.camera-3d__lens::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:124px;
  height:124px;
  border-radius:50%;
  border:9px solid #111;
  box-shadow:inset 0 0 0 1px #565656,0 0 0 2px #080808;
  transform:translate(-50%,-50%) translateZ(10px);
}
.camera-3d__lens-ring--1 {
  width:128px;
  height:128px;
  border-width:6px;
  transform:translate(-50%,-50%) translateZ(8px);
}
.camera-3d__lens-ring--2 {
  width:112px;
  height:112px;
  border-width:7px;
  transform:translate(-50%,-50%) translateZ(16px);
}
.camera-3d__lens-ring--3 {
  width:96px;
  height:96px;
  border-width:5px;
  transform:translate(-50%,-50%) translateZ(23px);
}
.camera-3d__glass {
  width:72px;
  height:72px;
  transform:translate(-50%,-50%) translateZ(28px);
}
.camera-3d__grip,
.camera-3d__back-grip {
  transform:translateZ(4px);
  box-shadow:inset 8px 0 14px rgba(255,255,255,.025),-3px 0 8px rgba(0,0,0,.35);
}
.camera-3d__prism,
.camera-3d__eyecup {
  transform:translateZ(1px);
}

/* v6 — restore the original camera silhouette approved in the first concept */
.camera-model--classic .camera--front,
.camera-model--classic .camera--front *,
.camera-model--classic .camera-back,
.camera-model--classic .camera-back * {
  backface-visibility:hidden;
}
.camera-model--classic .camera__brand {
  left:27px;
  top:25px;
  font-size:8px;
  line-height:.82;
}
.camera-model--classic .camera__badge {
  display:block;
}
.camera-rig.is-spinning .camera-model--classic {
  animation:classicCameraSpin 2.2s cubic-bezier(.11,.63,.16,1) forwards;
}
@keyframes classicCameraSpin {
  0% { transform:rotateX(-5deg) rotateY(0deg); }
  58% { transform:rotateX(-3deg) rotateY(445deg); }
  82% { transform:rotateX(-1deg) rotateY(520deg); }
  100% { transform:rotateX(0deg) rotateY(540deg); }
}

/* v7 — real-time WebGL camera. The CSS camera remains only as a no-WebGL fallback. */
.camera-webgl {
  position:absolute;
  z-index:3;
  left:-78px;
  right:-78px;
  top:-54px;
  bottom:-54px;
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
}
.camera-webgl canvas {
  display:block;
  width:100%;
  height:100%;
}
.camera-rig.webgl-ready .camera-webgl { opacity:1; }
.camera-fallback { display:none; }
.camera-rig.webgl-unavailable .camera-fallback { display:block; }
.camera-rig.webgl-ready .camera-fallback { display:none; opacity:0; visibility:hidden; }
.camera-rig.webgl-ready.is-spinning .camera-fallback { animation:none; }

/* v8 — card insertion depth, dark contact sheet and continuous spin handoff */
.cards.is-inserting { z-index:5; }
.sd-card.is-selected {
  z-index:5 !important;
  transition:transform .68s cubic-bezier(.55,0,.18,1),opacity .24s ease .44s !important;
}

.scene--collection {
  background:#080808;
  color:#f4f4f0;
}
.collection-nav {
  color:#f4f4f0;
  border-bottom-color:rgba(255,255,255,.16);
  background:rgba(8,8,8,.88);
}
.back-button--dark { color:#f4f4f0; }
.marquee-wall { background:#080808; }
.marquee-photo { background:#151515; }
.collection-footer {
  color:#aaa;
  background:#080808;
  border-top-color:rgba(255,255,255,.16);
}
.scene--gallery { background:#080808; }

/* v9 — the camera back is the second level; its LCD opens the film view. */
.camera-rig.is-zooming {
  transform:translate(-50%,-44%) scale(2);
  transition:transform .52s cubic-bezier(.18,.7,.22,1);
}
.camera-rig.webgl-ready.is-spinning .camera-fallback { animation:none; }
.camera-rig.is-spinning .camera-model--classic {
  animation:classicCameraHalfSpin 1.05s cubic-bezier(.08,.72,.26,1) forwards;
}
@keyframes classicCameraHalfSpin {
  from { transform:rotateX(-3deg) rotateY(0deg); }
  to { transform:rotateX(0deg) rotateY(180deg); }
}
.cards { transition:opacity .34s ease; }
.camera-rig.is-screen-ready + .cards {
  opacity:0;
  pointer-events:none;
}
.orbital-stage.screen-mode .orbit-line { opacity:0; transition:opacity .3s ease; }
.scene--lobby.screen-mode .hero-copy,
.scene--lobby.screen-mode .category-readout,
.scene--lobby.screen-mode .scroll-hint,
.scene--lobby.screen-mode .edge-copy {
  opacity:0;
  visibility:hidden;
  transition:opacity .28s ease,visibility .28s;
}
.camera-screen-action {
  position:absolute;
  z-index:12;
  left:84px;
  top:54px;
  width:208px;
  height:117px;
  border:1px solid transparent;
  border-radius:3px;
  padding:0;
  color:white;
  background:transparent;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,opacity .25s ease;
}
.camera-photo-stack {
  position:absolute;
  z-index:11;
  left:84px;
  top:54px;
  width:208px;
  height:117px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease,visibility .28s;
}
.camera-rig.is-screen-ready .camera-photo-stack {
  opacity:1;
  visibility:visible;
}
.camera-photo-slide {
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  border-radius:3px;
  background:#151515;
  opacity:0;
  filter:grayscale(1) saturate(.2) brightness(1.18);
  transform:translateY(0) scale(.28);
  transition:
    transform .56s cubic-bezier(.2,.78,.2,1),
    opacity .42s ease,
    filter .5s ease;
  will-change:transform,opacity,filter;
}
.camera-photo-slide img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  user-select:none;
}
.camera-photo-slide span {
  position:absolute;
  right:7px;
  bottom:6px;
  color:white;
  font:700 5px/1 "Space Mono",monospace;
  text-shadow:0 1px 4px #000;
}
.camera-photo-slide.is-active {
  z-index:4;
  opacity:1;
  filter:none;
  transform:translateY(0) scale(1);
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
.camera-photo-slide.is-prev {
  z-index:2;
  opacity:.28;
  transform:translateY(-130px) scale(.48);
}
.camera-photo-slide.is-next {
  z-index:2;
  opacity:.28;
  transform:translateY(130px) scale(.48);
}
.camera-photo-slide.is-away {
  opacity:0;
  transform:translateY(0) scale(.25);
}
.camera-screen-action::after {
  content:"OPEN FILM";
  position:absolute;
  left:50%;
  top:50%;
  translate:-50% -50%;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  background:rgba(0,0,0,.34);
  font:700 6px/1 "Space Mono",monospace;
  letter-spacing:.12em;
  opacity:0;
  transition:opacity .2s ease;
}
.camera-rig.is-screen-ready .camera-screen-action {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.camera-screen-action:hover,
.camera-screen-action:focus-visible {
  border-color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.04);
  outline:none;
}
.camera-screen-action:hover::after,
.camera-screen-action:focus-visible::after { opacity:1; }
.camera-eject {
  position:absolute;
  z-index:30;
  left:28px;
  top:92px;
  border:0;
  padding:0;
  color:var(--ink);
  background:transparent;
  font:700 8px/1 "Space Mono",monospace;
  letter-spacing:.08em;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease;
}
.camera-eject.is-visible {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.camera-eject span { display:inline-block; margin-right:7px; transition:transform .2s; }
.camera-eject:hover span { transform:translateX(-4px); }

@media (max-width:760px) {
  .camera-rig.is-zooming { transform:translate(-50%,-44%) scale(1.22); }
  .camera-screen-action { left:84px; top:57px; width:202px; height:113px; }
  .camera-photo-stack { left:84px; top:57px; width:202px; height:113px; }
  .camera-photo-slide.is-prev { transform:translateY(-118px) scale(.44); }
  .camera-photo-slide.is-next { transform:translateY(118px) scale(.44); }
  .camera-eject { left:16px; top:76px; }
  .camera-webgl { left:-68px; right:-68px; top:-48px; bottom:-48px; }
}

/* v10 — 6×6 contact matrix with a hollow camera-back cursor. */
.matrix-grid {
  position:absolute;
  z-index:2;
  inset:70px 0 50px;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-rows:repeat(6,minmax(0,1fr));
  gap:4px;
  padding:4px;
  overflow:hidden;
  background:#050505;
  cursor:none;
}
.matrix-grid * { cursor:none; }
.matrix-tile {
  position:relative;
  min-width:0;
  min-height:0;
  border:0;
  padding:0;
  overflow:hidden;
  background:#141414;
  filter:grayscale(.82) saturate(.45) brightness(.48);
  transform:scale(1);
  transition:filter .3s ease,transform .38s cubic-bezier(.16,.8,.2,1),opacity .3s ease;
  will-change:transform,filter;
}
.matrix-tile::after {
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(255,255,255,.08);
  pointer-events:none;
}
.matrix-tile img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.035);
  transition:transform .5s cubic-bezier(.16,.8,.2,1);
}
.matrix-tile > span {
  position:absolute;
  z-index:2;
  right:6px;
  bottom:5px;
  color:rgba(255,255,255,.5);
  font:700 6px/1 "Space Mono",monospace;
  transition:opacity .2s ease;
}
.matrix-tile.is-captured {
  z-index:4;
  filter:none;
  transform:scale(1.08);
  box-shadow:0 0 0 1px white,0 18px 46px rgba(0,0,0,.72);
}
.matrix-tile.is-captured img { transform:scale(1.16); }
.matrix-tile.is-captured > span { opacity:0; }

.matrix-camera-cursor {
  position:fixed;
  z-index:45;
  left:0;
  top:0;
  width:278px;
  height:184px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  filter:drop-shadow(0 20px 24px rgba(0,0,0,.48));
  transition:opacity .2s ease,visibility .2s;
  will-change:transform;
}
.matrix-camera-cursor.is-visible { opacity:1; visibility:visible; }
.matrix-camera-cursor__top,
.matrix-camera-cursor__left,
.matrix-camera-cursor__right,
.matrix-camera-cursor__bottom {
  position:absolute;
  z-index:2;
  background:#1b1d1f;
  border-color:#3d4043;
  border-style:solid;
}
.matrix-camera-cursor__top {
  left:0;
  top:0;
  width:100%;
  height:50px;
  border-width:1px 1px 0;
  border-radius:20px 20px 0 0;
  background:linear-gradient(180deg,#292b2e,#1a1c1e);
}
.matrix-camera-cursor__top::before {
  content:"";
  position:absolute;
  left:91px;
  top:-15px;
  width:96px;
  height:27px;
  border:1px solid #3d4043;
  border-bottom:0;
  border-radius:11px 11px 0 0;
  background:#1b1d1f;
}
.matrix-camera-cursor__top i {
  position:absolute;
  z-index:2;
  left:119px;
  top:-8px;
  width:41px;
  height:18px;
  border:5px solid #0b0c0d;
  border-radius:6px;
  background:#26383c;
}
.matrix-camera-cursor__top b {
  position:absolute;
  right:27px;
  top:17px;
  width:34px;
  height:8px;
  border-radius:50%;
  background:#0b0c0d;
  box-shadow:inset 0 1px #4b4d50;
}
.matrix-camera-cursor__left {
  left:0;
  top:50px;
  bottom:0;
  width:58px;
  border-width:0 0 1px 1px;
  border-radius:0 0 0 20px;
}
.matrix-camera-cursor__right {
  right:0;
  top:50px;
  bottom:0;
  width:26px;
  border-width:0 1px 1px 0;
  border-radius:0 0 20px 0;
  background:repeating-linear-gradient(110deg,#17191b 0 4px,#202326 4px 7px);
}
.matrix-camera-cursor__bottom {
  left:58px;
  right:26px;
  bottom:0;
  height:30px;
  border-width:0 0 1px;
}
.matrix-camera-cursor__left span {
  display:block;
  width:14px;
  height:14px;
  margin:9px auto 0;
  border-radius:50%;
  background:#474a4e;
  box-shadow:inset 0 1px rgba(255,255,255,.22),0 1px 2px #000;
}
.matrix-camera-cursor__left span:last-child {
  width:32px;
  height:32px;
  margin-top:8px;
  border:5px solid #4d5054;
  background:#111315;
}
.matrix-camera-cursor__bottom i {
  position:absolute;
  right:6px;
  bottom:6px;
  width:16px;
  height:16px;
  border:3px solid #4b4e52;
  border-radius:50%;
}
.matrix-camera-cursor__bottom b {
  position:absolute;
  left:9px;
  bottom:8px;
  color:#7f8387;
  font:700 5px/1 "Space Mono",monospace;
  letter-spacing:.12em;
}
.matrix-camera-cursor__screen {
  position:absolute;
  z-index:3;
  left:58px;
  top:50px;
  width:194px;
  height:104px;
  overflow:hidden;
  border:2px solid #55595e;
  border-radius:3px;
  background:transparent;
  box-shadow:0 0 0 5px #101214;
}
.matrix-camera-cursor__screen::after {
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(255,255,255,.1);
  opacity:.6;
}
.matrix-camera-cursor__screen img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(.72);
  filter:saturate(.65) brightness(.75);
  transition:opacity .18s ease,transform .42s cubic-bezier(.12,.8,.16,1),filter .34s ease;
}
.matrix-camera-cursor.has-capture .matrix-camera-cursor__screen img {
  opacity:1;
  transform:scale(1.15);
  filter:none;
}

@media (max-width:760px) {
  .matrix-grid { inset:60px 0 50px; gap:2px; padding:2px; }
  .matrix-camera-cursor { scale:.7; transform-origin:center; }
  .matrix-tile > span { display:none; }
  .collection-footer span:first-child { display:none; }
  .collection-footer { justify-content:center; }
}

@media (hover:none), (pointer:coarse) {
  .matrix-grid,.matrix-grid * { cursor:auto; }
  .matrix-camera-cursor { display:none; }
  .matrix-tile:active { filter:none; transform:scale(1.06); }
}

/* v11 — square LCD portal and uncropped editorial contact sheet. */
.camera-rig.is-lcd-zooming {
  transform:translate(-50%,-44%) scale(4.8);
  transition:transform .92s cubic-bezier(.08,.72,.12,1);
}
.lcd-portal {
  position:fixed;
  z-index:74;
  left:49%;
  top:50%;
  width:208px;
  height:117px;
  transform:translate(-50%,-50%);
  overflow:hidden;
  border:7px solid #0e1012;
  border-radius:5px;
  color:#f2f2ee;
  background:#080808;
  box-shadow:0 0 0 1px #50545a,0 22px 60px rgba(0,0,0,.56),inset 0 0 0 1px rgba(255,255,255,.06);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    width .92s cubic-bezier(.08,.72,.12,1),
    height .92s cubic-bezier(.08,.72,.12,1),
    left .92s cubic-bezier(.08,.72,.12,1),
    top .92s cubic-bezier(.08,.72,.12,1),
    border-width .92s cubic-bezier(.08,.72,.12,1),
    border-radius .7s ease,
    opacity .2s ease;
}
.lcd-portal::before {
  content:"";
  position:absolute;
  inset:0;
  opacity:.35;
  background:
    linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.08) 50%,transparent 50.2%),
    linear-gradient(0deg,transparent 49.8%,rgba(255,255,255,.08) 50%,transparent 50.2%);
}
.lcd-portal.is-active { opacity:1; visibility:visible; }
.lcd-portal.is-expanding {
  left:50%;
  top:50%;
  width:102vw;
  height:102vh;
  border-width:0;
  border-radius:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.lcd-portal.is-revealing {
  opacity:0;
  transition:opacity .46s cubic-bezier(.4,0,.2,1);
}
.lcd-portal__status {
  position:absolute;
  z-index:2;
  right:10px;
  bottom:8px;
  color:#7d8287;
  font:700 5px/1 "Space Mono",monospace;
  letter-spacing:.13em;
  transition:opacity .25s ease;
}
.lcd-portal.is-expanding .lcd-portal__status { opacity:0; }
.lcd-portal__corner {
  position:absolute;
  z-index:2;
  width:17px;
  height:13px;
  border-color:var(--portal-color,#fff);
  border-style:solid;
  transition:opacity .2s ease;
}
.lcd-portal__corner--a { left:10px; top:10px; border-width:1px 0 0 1px; }
.lcd-portal__corner--b { right:10px; top:10px; border-width:1px 1px 0 0; }
.lcd-portal__corner--c { right:10px; bottom:10px; border-width:0 1px 1px 0; }
.lcd-portal__corner--d { left:10px; bottom:10px; border-width:0 0 1px 1px; }
.lcd-portal.is-expanding .lcd-portal__corner { opacity:0; }

.contact-grid {
  position:absolute;
  z-index:2;
  inset:70px 0 50px;
  display:grid;
  grid-template-columns:repeat(var(--contact-columns,12),minmax(0,1fr));
  grid-template-rows:repeat(var(--contact-rows,8),minmax(0,1fr));
  gap:8px;
  padding:12px 18px;
  overflow:hidden;
  background:#080808;
  cursor:none;
}
.contact-grid * { cursor:none; }
.contact-photo {
  position:relative;
  min-width:0;
  min-height:0;
  display:grid;
  place-items:center;
  border:0;
  border-radius:0;
  padding:0;
  overflow:visible;
  color:white;
  background:transparent;
  box-shadow:none;
  transition:transform .3s cubic-bezier(.16,.8,.2,1),box-shadow .3s ease,filter .3s ease;
}
.contact-photo img {
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain !important;
  transform:none !important;
  border-radius:0;
  transition:filter .3s ease;
}
.contact-photo > span {
  position:absolute;
  z-index:2;
  right:8px;
  bottom:7px;
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border:1px solid rgba(255,255,255,.38);
  border-radius:50%;
  color:white;
  background:rgba(0,0,0,.34);
  backdrop-filter:blur(7px);
  font:700 6px/1 "Space Mono",monospace;
  transition:opacity .2s ease;
}
.contact-photo.is-focused {
  z-index:4;
  transform:scale(1.018);
  box-shadow:none;
}
.contact-photo.is-focused img { filter:brightness(1.06); }
.contact-photo.is-focused > span { opacity:0; }

.contact-type {
  position:relative;
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  overflow:hidden;
  border-radius:12px;
  color:#080808;
  background:#f2f2ee;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);
}
.contact-type:nth-of-type(3n) { color:#f3f3ef; background:#202327; }
.contact-type:nth-of-type(4n) { background:#dfe1ff; }
.contact-type strong {
  display:block;
  max-width:100%;
  font:900 clamp(18px,3.4vw,62px)/.8 "Archivo Black","Noto Sans SC",sans-serif;
  letter-spacing:-.08em;
  white-space:nowrap;
}
.contact-type span {
  font:700 6px/1 "Space Mono",monospace;
  letter-spacing:.1em;
  opacity:.55;
  white-space:nowrap;
}
.contact-type--vertical { flex-direction:column; }
.contact-type--vertical strong {
  writing-mode:vertical-rl;
  font-size:clamp(16px,2.2vw,38px);
  letter-spacing:-.04em;
}
.contact-type--vertical span { writing-mode:vertical-rl; }

.focus-cursor {
  position:fixed;
  z-index:48;
  left:0;
  top:0;
  width:66px;
  height:48px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.56));
  transition:opacity .15s ease,visibility .15s;
  will-change:transform;
}
.focus-cursor.is-visible { opacity:1; visibility:visible; }
.focus-cursor i {
  position:absolute;
  width:18px;
  height:14px;
  border-color:white;
  border-style:solid;
  transition:width .18s ease,height .18s ease,border-color .18s ease;
}
.focus-cursor i:nth-child(1) { left:0; top:0; border-width:2px 0 0 2px; }
.focus-cursor i:nth-child(2) { right:0; top:0; border-width:2px 2px 0 0; }
.focus-cursor i:nth-child(3) { right:0; bottom:0; border-width:0 2px 2px 0; }
.focus-cursor i:nth-child(4) { left:0; bottom:0; border-width:0 0 2px 2px; }
.focus-cursor b {
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  translate:-50% -50%;
  border:1px solid white;
  border-radius:50%;
  background:transparent;
  transition:background .18s ease,scale .18s ease;
}
.focus-cursor.is-locked i { width:22px; height:17px; border-color:#f1ff45; }
.focus-cursor.is-locked b { background:#f1ff45; border-color:#f1ff45; scale:.72; }

.scene--gallery .frame__button {
  display:grid;
  place-items:center;
  overflow:visible;
  background:transparent;
}
.scene--gallery .frame img {
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain !important;
  transform:none !important;
}
.scene--gallery .frame--portrait { width:clamp(220px,24vw,390px); }
.scene--gallery .frame--landscape { width:clamp(340px,38vw,650px); }

@media (max-width:760px) {
  .camera-rig.is-lcd-zooming { transform:translate(-50%,-44%) scale(3.1); }
  .lcd-portal { width:202px; height:113px; }
  .contact-grid { inset:60px 0 50px; gap:4px; padding:6px; }
  .contact-photo { border-radius:0; }
  .contact-type { border-radius:7px; }
  .contact-type strong { font-size:clamp(11px,5vw,28px); }
  .contact-type span { display:none; }
}

@media (hover:none), (pointer:coarse) {
  .contact-grid,.contact-grid * { cursor:auto; }
  .focus-cursor { display:none; }
}

/* v15 — the enlarged camera back remains on screen; the contact sheet lives inside its LCD. */
.scene--collection {
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 48%,#34373b 0,#17191c 46%,#050506 100%);
}
.collection-camera-back {
  position:relative;
  width:min(96vw,calc(92vh * 1.63));
  aspect-ratio:1.63;
  border:1px solid #08090a;
  border-radius:clamp(18px,2.5vw,42px);
  background:linear-gradient(145deg,#2b2e31 0,#1b1d20 48%,#101214 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset -24px -26px 46px rgba(0,0,0,.36),
    0 34px 75px rgba(0,0,0,.55);
  opacity:0;
  transform:scale(.92);
  transition:opacity .42s ease,transform .8s cubic-bezier(.12,.72,.16,1);
}
.scene--collection.is-visible .collection-camera-back {
  opacity:1;
  transform:scale(1);
}
.collection-camera-back::before {
  content:"";
  position:absolute;
  left:43%;
  top:-5.8%;
  width:20%;
  height:10%;
  border-radius:12px 12px 3px 3px;
  background:#17191b;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.collection-camera__eyecup {
  position:absolute;
  z-index:3;
  left:46%;
  top:-2.8%;
  width:14%;
  height:9%;
  border-radius:30% 30% 12% 12%;
  background:#0b0c0d;
  box-shadow:inset 0 0 0 2px #303338,0 3px 8px rgba(0,0,0,.5);
}
.collection-camera__eyecup i {
  position:absolute;
  inset:24% 19%;
  border-radius:30%;
  background:#101a1e;
  box-shadow:inset 0 0 12px #000;
}
.collection-camera__buttons {
  position:absolute;
  z-index:3;
  left:4.7%;
  top:12%;
  display:grid;
  gap:clamp(9px,1.5vw,22px);
}
.collection-camera__buttons i {
  display:block;
  width:clamp(22px,4vw,60px);
  aspect-ratio:1;
  border-radius:50%;
  background:#4a4d52;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.2),0 4px 7px rgba(0,0,0,.65);
}
.collection-camera__wheel {
  position:absolute;
  z-index:3;
  left:2.2%;
  bottom:5.5%;
  width:clamp(76px,14vw,205px);
  aspect-ratio:1;
  border:clamp(6px,.8vw,12px) solid #676b70;
  border-radius:50%;
  background:#181a1c;
  box-shadow:inset 0 0 0 3px #0b0c0d,0 5px 8px rgba(0,0,0,.55);
}
.collection-camera__wheel i {
  position:absolute;
  left:50%;
  top:-8%;
  width:24%;
  aspect-ratio:1;
  translate:-50% 0;
  border-radius:50%;
  background:#55595e;
}
.collection-camera__lcd-bezel {
  position:absolute;
  z-index:4;
  left:20.5%;
  top:7.5%;
  width:75.5%;
  height:78%;
  padding:clamp(8px,1.2vw,18px);
  border-radius:clamp(10px,1.5vw,24px);
  background:#090a0b;
  box-shadow:
    inset 0 0 0 2px #303237,
    inset 0 -10px 20px rgba(0,0,0,.72),
    7px 9px 12px rgba(0,0,0,.48);
}
.collection-camera__lcd {
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:3px;
  color:#f4f4f0;
  background:#080808;
  box-shadow:inset 0 0 24px rgba(0,0,0,.58);
}
.collection-camera__lcd::after {
  content:"";
  position:absolute;
  z-index:20;
  inset:0;
  pointer-events:none;
  opacity:.11;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.08) 3px 4px);
  mix-blend-mode:screen;
}
.collection-camera__lcd .collection-nav {
  position:absolute;
  z-index:15;
  inset:0 0 auto;
  height:clamp(24px,3.2vw,43px);
  padding:0 clamp(7px,1.1vw,16px);
  grid-template-columns:1fr auto 1fr;
  border-bottom-color:rgba(255,255,255,.13);
  background:rgba(8,8,8,.92);
  font-size:clamp(5px,.58vw,8px);
}
.collection-camera__lcd .contact-grid {
  position:absolute;
  inset:clamp(24px,3.2vw,43px) 0 clamp(22px,2.8vw,38px);
  gap:clamp(2px,.35vw,5px);
  padding:clamp(3px,.45vw,7px);
  background:#080808;
}
.collection-camera__lcd .collection-footer {
  position:absolute;
  z-index:15;
  inset:auto 0 0;
  height:clamp(22px,2.8vw,38px);
  padding:0 clamp(7px,1.1vw,16px);
  background:rgba(8,8,8,.94);
  font-size:clamp(4px,.5vw,7px);
}
.collection-camera__lcd .collection-footer span:first-child {
  max-width:68%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.collection-camera__lcd .contact-type { border-radius:clamp(2px,.5vw,7px); }
.collection-camera__lcd .contact-type strong { font-size:clamp(8px,2.2vw,34px); }
.collection-camera__lcd .contact-type--vertical strong { font-size:clamp(7px,1.45vw,22px); }
.collection-camera__lcd .contact-photo > span {
  right:4px;
  bottom:4px;
  width:clamp(11px,1.5vw,21px);
  height:clamp(11px,1.5vw,21px);
  font-size:clamp(3px,.4vw,6px);
}

@media (max-width:760px) {
  .collection-camera-back { width:98vw; }
  .collection-camera__buttons { gap:7px; }
  .collection-camera__lcd-bezel { left:20%; width:76.5%; top:7%; height:80%; padding:6px; }
  .collection-camera__lcd .collection-nav { grid-template-columns:1fr auto; }
  .collection-camera__lcd .collection-nav p:first-of-type { display:none; }
  .collection-camera__lcd .collection-footer span:first-child { display:none; }
  .collection-camera__lcd .collection-footer { justify-content:center; }
}

/* v16 — matched-position handoff from the live 3D camera to the LCD contact sheet. */
.scene--lobby,
.orbital-stage,
.hero-copy,
.category-readout,
.scroll-hint,
.edge-copy,
.pixel-text,
.orbit-line,
.cards {
  transition-property:opacity,visibility,top,background-color;
  transition-duration:.55s;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
}
.scene--lobby.is-camera-transition .orbital-stage { top:50%; }
.scene--lobby.is-camera-transition .hero-copy,
.scene--lobby.is-camera-transition .category-readout,
.scene--lobby.is-camera-transition .scroll-hint,
.scene--lobby.is-camera-transition .edge-copy,
.scene--lobby.is-camera-transition .pixel-text,
.scene--lobby.is-camera-transition .orbit-line,
.scene--lobby.is-camera-transition .cards .sd-card:not(.is-selected) {
  opacity:0;
  visibility:hidden;
}
.scene--lobby.is-handoff {
  background:#0b0c0e;
}
.scene--lobby.is-handoff .camera-rig {
  opacity:0;
  transition:transform .92s cubic-bezier(.08,.72,.12,1),opacity .62s cubic-bezier(.4,0,.2,1);
}
.camera-rig.is-lcd-zooming {
  transform:translate(-50%,-50%) scale(4.45);
}
.scene--collection {
  background:transparent;
  pointer-events:none;
}
.scene--collection::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  opacity:0;
  background:radial-gradient(circle at 50% 48%,#34373b 0,#17191c 46%,#050506 100%);
  transition:opacity .72s cubic-bezier(.4,0,.2,1);
}
.scene--collection.is-entering {
  opacity:1;
  visibility:visible;
}
.scene--collection.is-visible { pointer-events:auto; }
.scene--collection.is-visible::before { opacity:1; }
.collection-camera-back {
  z-index:1;
  transform:scale(.84);
  transition:opacity .66s cubic-bezier(.4,0,.2,1),transform .86s cubic-bezier(.12,.72,.16,1);
}
.scene--collection.is-visible .collection-camera-back { transform:scale(1); }
.scene--collection.is-entering:not(.is-visible) .collection-camera-back {
  opacity:0;
  transform:scale(.84);
}

@media (max-width:760px) {
  .camera-rig.is-lcd-zooming { transform:translate(-50%,-50%) scale(3.25); }
}

/* v17 — keep the live WebGL camera as level two; only its LCD receives DOM content. */
.scene--lobby.is-camera-transition .topbar,
.scene--lobby.is-camera-transition .hero-copy,
.scene--lobby.is-camera-transition .category-readout,
.scene--lobby.is-camera-transition .scroll-hint,
.scene--lobby.is-camera-transition .edge-copy,
.scene--lobby.is-camera-transition .pixel-text,
.scene--lobby.is-camera-transition .orbit-line,
.scene--lobby.is-camera-transition .cards .sd-card:not(.is-selected) {
  opacity:.22;
  visibility:visible;
  filter:blur(11px);
  transition:opacity .72s ease,filter .82s cubic-bezier(.4,0,.2,1),visibility .72s;
}
.scene--lobby.is-camera-transition .topbar { opacity:.34; }
.scene--lobby.is-camera-transition .orbit-line { opacity:.16; }
.scene--lobby.is-camera-transition .cards .sd-card:not(.is-selected) { opacity:.12; }
.scene--lobby.is-camera-screen {
  opacity:1;
  visibility:visible;
  background:var(--paper);
}
.scene--lobby.is-camera-screen .camera-rig { opacity:1; }
.camera-rig.is-lcd-zooming {
  transform:translate(-50%,-50%) scale(3);
  transition:transform .92s cubic-bezier(.08,.72,.12,1),opacity .45s ease;
}
.scene--collection,
.scene--collection.is-entering,
.scene--collection.is-visible {
  background:transparent;
}
.scene--collection::before,
.scene--collection.is-visible::before { opacity:0; }
.collection-camera-back,
.scene--collection.is-entering:not(.is-visible) .collection-camera-back,
.scene--collection.is-visible .collection-camera-back {
  position:fixed;
  z-index:1;
  left:50%;
  top:50%;
  width:310px;
  height:250px;
  aspect-ratio:auto;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform:translate(-50%,-50%) scale(3);
  pointer-events:auto;
  transition:opacity .42s ease;
}
.collection-camera-back::before,
.collection-camera__eyecup,
.collection-camera__buttons,
.collection-camera__wheel { display:none; }
.collection-camera__lcd-bezel {
  left:84px;
  top:54px;
  width:208px;
  height:117px;
  padding:3px;
  border-radius:4px;
  background:#070809;
  box-shadow:inset 0 0 0 1px #313439,0 2px 5px rgba(0,0,0,.7);
}
.collection-camera__lcd {
  border:0;
  border-radius:1px;
}
.collection-camera__lcd .collection-nav {
  height:12px;
  padding:0 4px;
  font-size:2px;
  letter-spacing:.07em;
}
.collection-camera__lcd .back-button { font-size:2px; }
.collection-camera__lcd .back-button span { margin-right:2px; }
.collection-camera__lcd .contact-grid {
  inset:12px 0 10px;
  gap:1px;
  padding:1px;
}
.collection-camera__lcd .collection-footer {
  height:10px;
  padding:0 4px;
  justify-content:flex-end;
  font-size:2px;
}
.collection-camera__lcd .collection-footer span:first-child { display:none; }
.collection-camera__lcd .contact-type { border-radius:1px; }
.collection-camera__lcd .contact-type strong { font-size:9px; }
.collection-camera__lcd .contact-type--vertical strong { font-size:6px; }
.collection-camera__lcd .contact-type span { font-size:2px; }
.collection-camera__lcd .contact-photo > span {
  right:1px;
  bottom:1px;
  width:7px;
  height:7px;
  font-size:2px;
  border-width:.5px;
}
.collection-camera__lcd::after { opacity:.07; }

@media (max-width:760px) {
  .camera-rig.is-lcd-zooming { transform:translate(-50%,-50%) scale(2); }
  .collection-camera-back,
  .scene--collection.is-entering:not(.is-visible) .collection-camera-back,
  .scene--collection.is-visible .collection-camera-back {
    width:310px;
    height:250px;
    transform:translate(-50%,-50%) scale(2);
  }
  .collection-camera__lcd-bezel { left:84px; top:54px; width:208px; height:117px; padding:3px; }
}

/* v18 — high-resolution 3.5× camera and a text-free, draggable LCD film strip. */
.camera-rig.is-lcd-zooming {
  transform:translate(-50%,-50%) scale(3.5);
}
.camera-rig.is-lcd-zooming .camera-motion {
  animation:none;
  transform:none;
}
.collection-camera-back,
.scene--collection.is-entering:not(.is-visible) .collection-camera-back,
.scene--collection.is-visible .collection-camera-back {
  transform:translate(-50%,-50%) scale(3.5);
}
.collection-camera__lcd-bezel {
  left:84px;
  top:80px;
  width:207px;
  height:114px;
  padding:0;
  border-radius:0;
  background:#080808;
  box-shadow:none;
}
.collection-camera__lcd .collection-nav,
.collection-camera__lcd .collection-footer { display:none; }
.collection-camera__lcd .contact-grid {
  position:absolute;
  inset:0;
  display:flex;
  align-items:stretch;
  grid-template-columns:none;
  grid-template-rows:none;
  gap:1px;
  padding:0;
  overflow-x:hidden;
  overflow-y:hidden;
  touch-action:none;
  overscroll-behavior:contain;
  scrollbar-width:none;
  background:#080808;
}
.collection-camera__lcd .contact-grid::-webkit-scrollbar { display:none; }
.collection-camera__lcd .contact-photo {
  flex:0 0 auto;
  width:auto;
  height:100%;
  min-width:0;
  min-height:0;
  border:0;
  border-radius:0;
  overflow:hidden;
  background:#080808;
  transform:none;
  box-shadow:none;
}
.collection-camera__lcd .contact-photo img {
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain !important;
  transform:none !important;
  user-select:none;
  pointer-events:none;
}
.collection-camera__lcd .contact-photo.is-focused {
  transform:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.72);
  filter:brightness(1.06);
}
.collection-camera__lcd::after { display:none; }

@media (max-width:760px) {
  .camera-rig.is-lcd-zooming { transform:translate(-50%,-50%) scale(2); }
  .collection-camera-back,
  .scene--collection.is-entering:not(.is-visible) .collection-camera-back,
  .scene--collection.is-visible .collection-camera-back {
    transform:translate(-50%,-50%) scale(2);
  }
  .collection-camera__lcd-bezel { left:84px; top:80px; width:207px; height:114px; padding:0; }
}

/* v19 — right-side camera controls, idle film motion and 1–3 LCD rows. */
.collection-camera__lcd-bezel {
  left:18px;
  top:80px;
}
.collection-camera__buttons {
  position:absolute;
  z-index:12;
  left:261px;
  top:75px;
  display:grid;
  gap:11px;
  pointer-events:auto;
}
.collection-camera__buttons button {
  display:block;
  width:18px;
  height:18px;
  padding:0;
  border:1px solid transparent;
  border-radius:50%;
  color:transparent;
  background:transparent;
  box-shadow:none;
  transition:border-color .18s ease,background .18s ease,transform .12s ease;
}
.collection-camera__buttons button:hover,
.collection-camera__buttons button:focus-visible {
  outline:none;
  border-color:rgba(241,255,69,.9);
  background:rgba(241,255,69,.1);
}
.collection-camera__buttons button:active { transform:scale(.82); }
.collection-camera__buttons button:disabled { pointer-events:none; }
.collection-camera__lcd .contact-grid {
  display:flex;
  flex-flow:column wrap;
  align-content:flex-start;
  align-items:flex-start;
  gap:0;
}
.collection-camera__lcd .contact-photo {
  flex:0 0 calc(100% / var(--lcd-rows,1));
  width:auto;
  height:calc(100% / var(--lcd-rows,1));
  max-height:100%;
  border-right:1px solid #080808;
  border-bottom:1px solid #080808;
  transform-origin:center;
  transition:transform .24s cubic-bezier(.2,.8,.2,1),filter .2s ease;
}
.collection-camera__lcd .contact-photo.is-focused {
  z-index:4;
  transform:scale(1.035);
  box-shadow:none;
  filter:brightness(1.06);
}

@media (max-width:760px) {
  .collection-camera__lcd-bezel { left:18px; top:80px; }
  .collection-camera__buttons { left:261px; top:75px; gap:11px; }
}

/* v20 — labeled LCD controls, mechanical shutter feedback and true orbit depth. */
.collection-camera__buttons button {
  display:grid;
  place-items:center;
  color:#f4f4f0;
  font:700 9px/1 "Space Mono",monospace;
  text-shadow:0 1px 2px #000;
}
#lcdZoomIn::before { content:"+"; }
#lcdZoomOut::before { content:"−"; }
.collection-camera__buttons button:disabled { opacity:.34; }

.cards { z-index:auto; }

/* v21 — selectable shutter sound character; sound starts enabled. */
.audio-controls {
  justify-self:end;
  display:flex;
  align-items:center;
  gap:8px;
}
.shutter-presets {
  display:flex;
  align-items:center;
  padding:2px;
  border:1px solid currentColor;
  border-radius:999px;
}
.shutter-presets button {
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  padding:0;
  border:0;
  border-radius:50%;
  color:#777;
  background:transparent;
  font:700 7px/1 "Space Mono",monospace;
  transition:color .18s ease,background .18s ease,transform .12s ease;
}
.shutter-presets button:hover { color:var(--ink); }
.shutter-presets button:active { transform:scale(.86); }
.shutter-presets button.is-active { color:var(--paper); background:var(--ink); }
.audio-controls .sound-toggle { justify-self:auto; }

@media (max-width:760px) {
  .audio-controls { display:none; }
}

/* v23 — tactile SD cards: water-drop contact, drag and spring return. */
.sd-card {
  cursor:grab;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}
.sd-card.is-dragging {
  z-index:40 !important;
  cursor:grabbing;
}
.sd-card.is-returning {
  transition:transform .72s cubic-bezier(.18,1.42,.3,1),filter .42s ease !important;
}
.sd-card:hover .sd-card__face,
.sd-card.is-near .sd-card__face {
  scale:1.045;
  filter:brightness(1.07);
  box-shadow:0 18px 34px rgba(0,0,0,.3);
}
.sd-card.is-selected .sd-card__face {
  z-index:1;
  box-shadow:0 16px 34px rgba(0,0,0,.3);
}

/* v27 — tumbling camera landing and tangent-matched SD-card docking. */
.camera-rig:not(.is-lcd-zooming) {
  transform:
    translate(calc(-50% + var(--story-camera-x,0vw)),calc(-44% + var(--story-camera-y,0vh)))
    rotate(var(--story-camera-roll,0deg))
    scale(var(--story-camera-scale,1));
  transition:opacity .45s ease;
}
.scroll-story {
  position:absolute;
  z-index:4;
  inset:0;
  pointer-events:none;
  visibility:hidden;
}
.scene--lobby.is-scroll-story .scroll-story { visibility:visible; }
.story-image {
  position:absolute;
  z-index:1;
  margin:0;
  opacity:0;
  overflow:hidden;
  will-change:opacity,transform,clip-path;
}
.story-image img { display:block; width:100%; height:auto; }
.story-image--top { top:18%; right:2.5vw; width:min(390px,22vw); }
.story-image--bottom { left:8vw; bottom:5%; width:min(300px,18vw); }
.scroll-story__scene {
  position:absolute;
  z-index:2;
  left:50%;
  top:17%;
  width:min(1060px,88vw);
  translate:-50% 0;
  text-align:center;
  opacity:0;
  will-change:opacity,transform;
}
.scroll-story__scene span {
  display:block;
  margin-bottom:14px;
  font:700 8px/1 "Space Mono",monospace;
  letter-spacing:.28em;
}
.scroll-story__scene strong {
  display:block;
  font:400 clamp(56px,9.5vw,144px)/.78 "Archivo Black",sans-serif;
  letter-spacing:-.075em;
}
.scroll-story__scene small {
  display:block;
  margin-top:22px;
  font:500 10px/1 "Noto Sans SC",sans-serif;
  letter-spacing:.22em;
}
.story-about { width:min(520px,44vw); margin:26px auto 0; text-align:left; }
.story-about p { margin:0 0 14px; font:400 14px/1.65 "Inter",Arial,sans-serif; letter-spacing:0; color:#545454; }
.story-about .story-about__anchor { font-weight:600; color:#111; }
.story-about dl { margin:20px 0 0; padding-top:16px; border-top:1px solid #ccc; }
.story-about dl > div { display:grid; grid-template-columns:72px 1fr; gap:12px; margin:0 0 10px; }
.story-about dt { font:700 12px/1.65 "Space Mono",monospace; letter-spacing:.08em; }
.story-about dd { margin:0; font:400 13px/1.65 "Inter",Arial,sans-serif; overflow-wrap:anywhere; }
.story-about a { color:inherit; text-decoration:underline; text-underline-offset:3px; pointer-events:auto; }
.scene--lobby.is-scroll-story .hero-copy { opacity:var(--story-intro-opacity); filter:blur(calc(var(--story-progress) * 8px)); }
.scene--lobby.is-scroll-story .category-readout { opacity:var(--story-intro-opacity); }
.scene--lobby.is-scroll-story .edge-copy { opacity:calc(1 - var(--story-progress)); }
.scene--lobby.is-scroll-story .orbit-line { opacity:calc(.45 - var(--story-progress)); transform:translate(-50%,-50%) translateY(var(--story-orbit-y,0vh)) rotate(calc(-7deg + var(--story-progress) * 34deg)) scale(calc(1 - var(--story-progress) * .42)); }
.scene--lobby.is-scroll-story .orbit-line--b { transform:translate(-50%,-50%) translateY(var(--story-orbit-y,0vh)) rotate(calc(10deg - var(--story-progress) * 40deg)) scale(calc(1 - var(--story-progress) * .5)); }
.scene--lobby.is-scroll-story .pixel-text { opacity:0; }
.scene--lobby.is-scroll-story .sd-card { pointer-events:none; }
.scene--lobby.is-scroll-story .scroll-hint { opacity:var(--story-intro-opacity); }
.spring-trail {
  position:absolute;
  z-index:5;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  opacity:0;
  pointer-events:none;
}
.spring-trail path {
  fill:none;
  stroke:rgba(10,10,10,.48);
  stroke-width:1.2;
  stroke-dasharray:4 7;
  vector-effect:non-scaling-stroke;
}

.scroll-menu {
  position:absolute;
  z-index:18;
  top:30vh;
  right:5vw;
  width:min(610px,47vw);
  opacity:0;
  pointer-events:none;
  will-change:opacity,transform;
}
.scroll-menu.is-ready { pointer-events:auto; }
.scroll-menu > header {
  display:flex;
  justify-content:space-between;
  padding:0 2px 12px 96px;
  border-bottom:1px solid rgba(0,0,0,.25);
  font:700 8px/1 "Space Mono",monospace;
  letter-spacing:.16em;
}
.scroll-menu > header small { color:#777; font:inherit; }
.scroll-menu__list button {
  position:relative;
  display:grid;
  grid-template-columns:42px 1fr auto 30px;
  align-items:center;
  width:100%;
  height:13vh;
  min-height:78px;
  padding:0 4px 0 96px;
  border:0;
  border-bottom:1px solid rgba(0,0,0,.25);
  background:transparent;
  text-align:left;
  transition:background .22s ease,color .22s ease,padding .28s cubic-bezier(.2,.8,.2,1);
}
.scroll-menu__list button span {
  color:#777;
  font:700 9px/1 "Space Mono",monospace;
}
.scroll-menu__list button strong {
  font:900 clamp(25px,3.2vw,48px)/1 "Noto Sans SC",sans-serif;
  letter-spacing:-.08em;
}
.scroll-menu__list button em {
  font:700 8px/1 "Space Mono",monospace;
  letter-spacing:.12em;
  font-style:normal;
}
.scroll-menu__list button i { font-style:normal; font-size:18px; transition:transform .22s ease; }
.scroll-menu__list button:hover,
.scroll-menu__list button:focus-visible { color:var(--paper); background:var(--ink); padding-left:106px; outline:none; }
.scroll-menu__list button:hover span,
.scroll-menu__list button:focus-visible span { color:#aaa; }
.scroll-menu__list button:hover i,
.scroll-menu__list button:focus-visible i { transform:translate(5px,5px); }
.scene--lobby.is-menu-ready .scroll-story__scene { opacity:0 !important; }
.scene--lobby.is-menu-ready .sd-card.is-menu-target .sd-card__face {
  scale:1.09;
  filter:brightness(1.16);
  box-shadow:0 22px 34px rgba(0,0,0,.3);
}
.scene--lobby.is-menu-ready .scroll-hint { opacity:0; }

@media (max-width:760px) {
  .story-image--top { top:8%; right:3vw; width:20vw; }
  .story-image--bottom { left:3vw; bottom:3%; width:20vw; }
  .scroll-story__scene { top:16%; width:92vw; }
  .scroll-story__scene strong { font-size:clamp(42px,12vw,78px); }
  .scroll-story__scene small { font-size:8px; }
  .story-about { width:min(480px,78vw); margin-top:20px; }
  .story-about p { font-size:14px; line-height:1.5; margin-bottom:10px; }
  .story-about dl { margin-top:14px; padding-top:12px; }
  .story-about dl > div { grid-template-columns:60px 1fr; gap:8px; margin-bottom:7px; }
  .scroll-menu { top:28vh; right:4vw; width:68vw; }
  .scroll-menu > header { padding-left:60px; }
  .scroll-menu__list button { min-height:64px; padding-left:60px; grid-template-columns:28px 1fr; }
  .scroll-menu__list button em,
  .scroll-menu__list button i { display:none; }
  .scroll-menu__list button:hover,
  .scroll-menu__list button:focus-visible { padding-left:66px; }
}

/* v49 — projected LCD coordinates, compact vertical contact sheets. */
.camera-rig.is-lcd-zooming {
  scale:1;
  transform:translate(-50%,-50%) translate(var(--lcd-center-x,0px),var(--lcd-center-y,0px)) scale(var(--camera-detail-scale,4));
}
.collection-camera-back,
.scene--collection.is-entering:not(.is-visible) .collection-camera-back,
.scene--collection.is-visible .collection-camera-back {
  transform:none;
  scale:1;
  pointer-events:auto;
  transition:opacity .42s ease;
}
.collection-camera__lcd-bezel {
  padding:0;
  border:0;
  border-radius:0;
  overflow:hidden;
}
.collection-camera__lcd .contact-grid {
  display:flex;
  flex-flow:column nowrap;
  align-items:stretch;
  gap:5px;
  overflow-x:hidden;
  overflow-y:auto;
  touch-action:pan-y;
  cursor:grab;
}
.collection-camera__lcd .contact-grid.is-dragging { cursor:grabbing; }
.contact-row { display:flex; flex:0 0 auto; gap:5px; width:100%; }
.collection-camera__lcd .contact-photo {
  flex:0 0 auto;
  max-height:none;
  border:0;
  overflow:visible;
  background:transparent;
  cursor:inherit;
}
.collection-camera__lcd .contact-photo img {
  width:100%; height:100%; object-fit:contain;
}
.collection-camera__buttons button { width:36px; height:36px; font-size:20px; }
.lightbox.is-open { z-index:95; }
@media (prefers-reduced-motion:reduce) {
  .camera-rig.is-lcd-zooming { transition:none; }
}