:root {
  color-scheme: dark;
  --x: 0;
  --y: 0;
  --rx: 0deg;
  --ry: 0deg;
  --ink: #05080b;
  --silver: #e4edf0;
  --cyan: #84e3eb;
  --gold: #f0ce93;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: var(--ink); }
body { color: var(--silver); overflow: hidden; }
button { font: inherit; }

.scene { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; background: #05080b; touch-action: none; }
.scene__plate, .scene__shade, .scene__cold-light, .scene__warm-light { position: absolute; inset: -3%; width: 106%; height: 106%; pointer-events: none; }
.scene__plate { z-index: -5; object-fit: cover; object-position: center 60%; filter: brightness(.58) saturate(.75) contrast(1.08); transform: translate3d(calc(var(--x) * -7px), calc(var(--y) * -5px), 0) scale(1.035); }
.scene__shade { z-index: -4; background: linear-gradient(90deg, rgba(0,4,8,.2), transparent 31%, transparent 69%, rgba(0,0,0,.32)), linear-gradient(180deg, rgba(0,0,0,.12), transparent 38%, rgba(0,0,0,.12) 72%, rgba(0,0,0,.62)); }
.scene__cold-light { z-index: -3; left: -32%; width: 84%; background: linear-gradient(100deg, transparent 30%, rgba(157,221,255,.2) 52%, rgba(97,168,230,.04) 70%, transparent 82%); mix-blend-mode: screen; filter: blur(30px); transform: translateX(calc(var(--x) * 16%)) rotate(-7deg); }
.scene__warm-light { z-index: -3; left: auto; right: -30%; width: 78%; background: radial-gradient(circle at 45% 56%, rgba(240,169,79,.22), transparent 46%); mix-blend-mode: screen; filter: blur(40px); transform: translateX(calc(var(--x) * -12%)); }

.topbar { position: absolute; z-index: 20; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: flex-start; padding: max(22px, env(safe-area-inset-top)) clamp(22px, 4vw, 62px) 0; }
.identity { display: grid; gap: 6px; }
.identity span { font-family: "Songti SC", STSong, serif; font-size: 1.05rem; letter-spacing: .18em; }
.identity small { color: rgba(228,237,240,.55); font: 600 .63rem/1.1 "SFMono-Regular", Consolas, monospace; letter-spacing: .15em; }
.sensor-button { min-height: 44px; padding: 0 17px; border: 1px solid rgba(221,237,242,.33); border-radius: 999px; color: #edf6f7; background: rgba(5,10,14,.42); backdrop-filter: blur(18px); cursor: pointer; }
.sensor-button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.sensor-button.is-active { border-color: rgba(132,227,235,.65); color: var(--cyan); }

.product-stage { position: absolute; z-index: 6; left: 50%; top: 48%; width: min(68vw, 820px); aspect-ratio: 1.098 / 1; transform: translate(-46%, -48%); perspective: 1200px; cursor: grab; }
.product-stage:active { cursor: grabbing; }
.product { position: absolute; z-index: 4; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)) translate3d(calc(var(--x) * 8px), calc(var(--y) * 5px), 0); will-change: transform; }
#materialCanvas, .product__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 34px 28px rgba(0,0,0,.55)); }
#materialCanvas { z-index: 2; }
.product__fallback { z-index: 1; opacity: 0; }
.product__fallback.is-visible { opacity: 1; }
.product__caustic { position: absolute; z-index: 3; left: 31%; bottom: 1%; width: 50%; height: 17%; border-radius: 50%; background: radial-gradient(ellipse, rgba(111,220,255,.3), rgba(49,113,176,.08) 42%, transparent 72%); filter: blur(18px); mix-blend-mode: screen; transform: translate3d(calc(var(--x) * 32px), calc(var(--y) * 8px), -20px) rotate(-6deg); opacity: .7; }
.contact-shadow { position: absolute; z-index: 1; left: 25%; bottom: 4%; width: 57%; height: 11%; border-radius: 50%; background: rgba(0,0,0,.84); filter: blur(20px); transform: translateX(calc(var(--x) * -18px)); }
.reflection { position: absolute; z-index: 0; left: 0; top: 76%; width: 100%; height: 48%; object-fit: contain; object-position: center top; transform: scaleY(-1) translateY(-48%) translateX(calc(var(--x) * 8px)); opacity: .12; filter: blur(5px) saturate(.7); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent 68%); mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent 68%); }

.copy { position: absolute; z-index: 12; left: clamp(26px, 5vw, 78px); bottom: clamp(34px, 7vh, 82px); width: min(33vw, 420px); text-shadow: 0 2px 18px rgba(0,0,0,.65); }
.eyebrow { margin: 0 0 14px; color: var(--cyan); font-size: .78rem; font-weight: 650; letter-spacing: .22em; }
h1 { margin: 0; font: 400 clamp(2.7rem, 5.1vw, 5.1rem)/1.03 "Songti SC", STSong, serif; letter-spacing: -.045em; }
.instruction { margin: 22px 0 0; color: rgba(228,237,240,.72); font-size: .94rem; line-height: 1.7; }
.material-reading { position: absolute; z-index: 12; right: clamp(28px, 5vw, 76px); bottom: clamp(40px, 7vh, 84px); display: grid; min-width: 132px; gap: 8px; text-align: right; }
.material-reading__label { color: rgba(228,237,240,.53); font-size: .72rem; letter-spacing: .16em; }
.material-reading strong { color: var(--gold); font: 400 1.55rem/1 "Songti SC", STSong, serif; letter-spacing: .08em; }
.material-reading__line { justify-self: end; display: block; width: 118px; height: 1px; background: rgba(228,237,240,.2); overflow: hidden; }
.material-reading__line i { display: block; width: 38%; height: 100%; background: linear-gradient(90deg, var(--cyan), #fff, var(--gold)); transform: translateX(calc(var(--x) * 80%)); }
.drag-hint { display: none; }

@media (max-width: 700px) {
  .scene__plate { object-position: center center; filter: brightness(.6) saturate(.72) contrast(1.1); }
  .topbar { padding-inline: 20px; }
  .identity span { font-size: .9rem; }
  .identity small { font-size: .56rem; }
  .sensor-button { min-height: 42px; padding: 0 14px; font-size: .84rem; }
  .product-stage { top: 47%; width: min(122vw, 660px); transform: translate(-48%, -49%); }
  .copy { left: 22px; right: 22px; bottom: max(28px, env(safe-area-inset-bottom)); width: auto; }
  .eyebrow { margin-bottom: 9px; font-size: .68rem; }
  h1 { font-size: clamp(2.45rem, 10.8vw, 3.8rem); }
  .instruction { max-width: 73%; margin-top: 13px; font-size: .84rem; }
  .material-reading { right: 22px; bottom: max(33px, calc(env(safe-area-inset-bottom) + 5px)); min-width: 90px; }
  .material-reading__label, .material-reading__line { display: none; }
  .material-reading strong { font-size: 1rem; }
  .drag-hint { position: absolute; z-index: 14; top: 15%; left: 50%; display: grid; justify-items: center; gap: 8px; color: rgba(228,237,240,.56); font: 600 .64rem/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .14em; transform: translateX(-50%); transition: opacity .4s ease; }
  .drag-hint i { width: 62px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); animation: hint 1.8s ease-in-out infinite; }
  @keyframes hint { 0%,100% { transform: translateX(-8px); } 50% { transform: translateX(8px); } }
}

@media (max-height: 690px) and (max-width: 700px) {
  .product-stage { top: 45%; width: min(112vw, 590px); }
  .copy { bottom: max(20px, env(safe-area-inset-bottom)); }
  .instruction { display: none; }
}

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