:root { color-scheme: dark; --view-x: 0; --view-y: 0; --progress: 0; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #061419; }
body { overflow-x: hidden; color: #f3fbf8; font-family: "PingFang SC", "Noto Sans CJK SC", sans-serif; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.experience { position: relative; min-height: 100svh; overflow: hidden; background: radial-gradient(circle at 56% 32%, #163c43 0, #0a242b 28%, #061419 62%, #030b0e 100%); isolation: isolate; }
.atmosphere { position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at calc(60% + var(--view-x) * 5%) calc(29% + var(--view-y) * 3%), rgba(184,237,221,.18), transparent 28%), linear-gradient(115deg, transparent 23%, rgba(108,185,180,.07) 45%, transparent 64%); filter: blur(18px); }
.topbar { height: 92px; padding: max(22px, env(safe-area-inset-top)) 20px 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(207,242,233,.17); }
.brand { display: grid; gap: 6px; min-width: 0; }
.brand b { font-family: STSong, Songti SC, serif; font-size: 17px; font-weight: 500; letter-spacing: .18em; }
.brand span { font: 600 6.5px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: .22em; color: #9fc1bd; white-space: nowrap; }
.sensor { flex: 0 0 auto; min-height: 44px; padding: 0 13px; border: 1px solid rgba(218,245,238,.35); border-radius: 999px; background: rgba(3,16,20,.38); backdrop-filter: blur(12px); font-size: 12px; letter-spacing: .05em; }
.sensor.is-active { border-color: rgba(176,237,220,.75); background: rgba(104,190,170,.14); }
.stage { position: relative; width: min(100vw, 650px); height: min(61svh, 670px); margin: 0 auto; overflow: hidden; touch-action: none; perspective: 900px; }
.stage::after { content: ""; position: absolute; inset: auto 0 0; height: 20%; z-index: 8; background: linear-gradient(transparent, rgba(5,17,20,.86) 74%, #061419); pointer-events: none; }
.preview, .fallback, #crystalCanvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 8%; }
.preview { z-index: 0; filter: blur(18px) saturate(.76); transform: scale(1.07); }
.fallback { z-index: 1; transition: opacity .45s ease; }
.fallback.is-ready { opacity: 0; }
#crystalCanvas { z-index: 2; transform: rotateX(calc(var(--view-y) * -1.5deg)) rotateY(calc(var(--view-x) * 1.8deg)) scale(1.018); transform-origin: center 54%; filter: drop-shadow(0 25px 24px rgba(0,0,0,.42)); }
.surface-glow { position: absolute; z-index: 3; left: 20%; top: 28%; width: 60%; aspect-ratio: 1.12; border-radius: 50%; background: radial-gradient(circle at calc(48% + var(--view-x) * 11%) calc(46% + var(--view-y) * 8%), rgba(210,255,246,.14), rgba(95,213,215,.03) 47%, transparent 70%); mix-blend-mode: screen; pointer-events: none; opacity: calc(.15 + var(--progress) * .85); }
.pour { position: absolute; z-index: 7; top: -10px; left: 50%; width: 22px; height: 47%; transform: translateX(-50%); opacity: 0; transition: opacity .18s ease; pointer-events: none; }
.pour.is-active { opacity: 1; }
.pour::before { content: ""; position: absolute; left: 7px; top: 0; width: 8px; height: 94%; border-radius: 0 0 55% 55%; background: linear-gradient(90deg, rgba(221,255,252,.1), rgba(225,255,250,.72) 42%, rgba(80,196,204,.2)); filter: blur(.2px) drop-shadow(0 0 7px rgba(149,236,229,.45)); transform: skewX(calc(var(--view-x) * -2deg)); transform-origin: top; }
.pour i { position: absolute; left: 5px; bottom: calc(var(--n) * 13%); width: 12px; height: 16px; border-radius: 55% 45% 60% 40%; background: rgba(194,250,245,.56); animation: drop .82s linear infinite; }
.pour i:nth-child(1) { --n: 0; animation-delay: -.1s; }.pour i:nth-child(2) { --n: 1; animation-delay: -.38s; }.pour i:nth-child(3) { --n: 2; animation-delay: -.66s; }
@keyframes drop { from { transform: translateY(-150px) scale(.62); opacity: 0; } 24% { opacity: 1; } to { transform: translateY(95px) scale(1); opacity: 0; } }
.status { position: absolute; z-index: 9; left: 50%; top: 22px; transform: translateX(-50%); margin: 0; min-width: max-content; padding: 8px 13px; border: 1px solid rgba(210,247,239,.17); border-radius: 999px; background: rgba(3,18,22,.42); backdrop-filter: blur(12px); font-size: 11px; letter-spacing: .15em; color: #c8e4df; transition: opacity .35s ease; }
.story { position: relative; z-index: 10; margin-top: -34px; padding: 0 22px max(24px, env(safe-area-inset-bottom)); }
.reading { display: flex; align-items: center; gap: 12px; color: #8ed8d0; font-size: 11px; letter-spacing: .18em; }
.reading i { width: 50px; height: 1px; background: linear-gradient(90deg, #8ed8d0, transparent); transform: scaleX(calc(.42 + var(--progress) * .58)); transform-origin: left; }
h1 { margin: 13px 0 20px; font: 400 clamp(30px, 8.4vw, 47px)/1.14 STSong, Songti SC, serif; letter-spacing: -.035em; text-wrap: balance; }
.actions { display: flex; align-items: center; gap: 12px; }
.pour-button { flex: 0 1 210px; height: 54px; border: 1px solid rgba(202,243,234,.42); border-radius: 999px; background: linear-gradient(110deg, rgba(83,177,168,.26), rgba(166,224,210,.10)); display: flex; align-items: center; justify-content: center; gap: 10px; user-select: none; -webkit-user-select: none; }
.pour-button span { width: 12px; height: 17px; border-radius: 60% 40% 62% 38%; background: linear-gradient(145deg, #e0fff8, #5bc0c3); box-shadow: 0 0 13px rgba(123,222,216,.42); transform: rotate(20deg); }
.pour-button b { font-size: 14px; font-weight: 500; letter-spacing: .14em; }
.pour-button:active, .pour-button.is-active { transform: scale(.975); background: rgba(128,215,200,.22); }
.pour-button[disabled] { opacity: .45; }
.reset { height: 44px; padding: 0 15px; border: 0; border-bottom: 1px solid rgba(201,238,231,.44); background: transparent; color: #a9c8c3; font-size: 12px; letter-spacing: .12em; }
@media (min-width: 700px) { .experience { width: min(100%, 760px); margin: auto; min-height: 900px; box-shadow: 0 0 80px #02090b; } .stage { height: 650px; } }
@media (prefers-reduced-motion: reduce) { .pour i { animation: none; } #crystalCanvas { transform: none; } }