*{box-sizing:border-box}body{margin:0;background:#121a19;color:#eee9df;font-family:system-ui,sans-serif}.experience{min-height:100svh;position:relative;overflow:hidden;background:radial-gradient(ellipse at 72% 24%,#80715a55,transparent 60%),linear-gradient(140deg,#27312c,#101916 75%)}.atmosphere{display:none}.topbar{position:relative;display:flex;justify-content:space-between;align-items:center;padding:24px 28px;z-index:2}.brand b{display:block;font-size:18px;letter-spacing:.2em;font-weight:500}.brand span{display:block;font-size:9px;letter-spacing:.22em;margin-top:8px;opacity:.55}button{color:inherit;background:#ffffff08;border:1px solid #ffffff30;border-radius:30px;padding:12px 18px;font-size:13px;cursor:pointer}.stage{position:relative;width:min(760px,100vw);height:min(760px,100vw);margin:-14px auto -25px;touch-action:pan-y}.stage canvas,.fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.stage canvas{opacity:0}.fallback[hidden]{display:none}.preview,.pour,.surface-glow{display:none}.status{position:absolute;bottom:1%;width:100%;text-align:center;font-size:12px;letter-spacing:.12em;opacity:.65}.story{position:relative;width:min(680px,100%);margin:auto;padding:30px 28px 36px;display:flex;justify-content:space-between;align-items:center;gap:20px}.reading{display:none}h1{font-size:clamp(20px,3vw,30px);line-height:1.6;font-weight:400;margin:0}.actions{flex-shrink:0}.pour-button b{font-weight:400}button:disabled{opacity:.5}@media(max-width:600px){.topbar{padding:22px 20px}.stage{margin:15px auto 0;width:110vw;height:110vw;left:-5vw}.story{padding:25px 22px;align-items:flex-end}h1{font-size:21px}.brand span{font-size:8px}.sensor{padding:10px 12px;font-size:11px}}
/* Same stone/daylight palette as silver-thread, different crop and lighting. */
.experience{isolation:isolate;background:#343e40}
.atmosphere{display:block;position:absolute;inset:-4%;z-index:-2;pointer-events:none;background:linear-gradient(115deg,rgba(35,52,59,.24),rgba(83,65,44,.22)),url('./assets/crystal-stone-v5.webp') 65% 48%/cover no-repeat;transform:scaleX(-1);filter:brightness(1.34) saturate(.68)}
.experience::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 28% 35%,rgba(255,209,144,.25),transparent 52%),linear-gradient(180deg,rgba(17,29,34,.18),transparent 52%,rgba(16,27,31,.32))}
.sensor,button{background:rgba(20,31,33,.28);backdrop-filter:blur(12px)}
button:focus-visible{outline:2px solid #e0c596;outline-offset:4px}
/* Keep the approved bowl's photographic aspect ratio; no square stretching. */
.stage{width:min(960px,96vw,calc(78svh * 1.2));height:auto;aspect-ratio:1.2;margin:8px auto 0;left:auto}
.stage::before{content:'';position:absolute;width:65%;height:9%;left:18%;bottom:9%;border-radius:50%;background:rgba(9,20,22,.34);filter:blur(22px);pointer-events:none}
.status{bottom:0;font-size:11px}
.story{padding-top:18px}
.fallback{clip-path:polygon(35.66% 12.66%,65.21% 12.66%,66.67% 13.19%,89.52% 27.25%,91.19% 29.52%,96.07% 51.18%,95.85% 53.1%,94.4% 55.46%,87.7% 64.98%,79.33% 73.01%,73.07% 78.17%,66.81% 82.97%,64.34% 84.45%,58.81% 85.94%,54.88% 87.86%,47.82% 88.3%,42.14% 87.34%,36.39% 86.2%,30.64% 83.67%,26.27% 80.79%,19.36% 75.02%,13.54% 68.91%,8.95% 62.53%,5.53% 56.68%,3.71% 53.28%,3.64% 51.09%,7.86% 29.17%,9.03% 27.42%,34.21% 13.19%)}
@media(max-width:600px){.stage{width:100vw;height:auto;aspect-ratio:1.2;margin:35px auto 20px;left:auto}.story{gap:12px;padding-top:22px}.status{bottom:-2%}h1{font-size:19px}.topbar{padding-bottom:10px}}
/* v9: stone stays visible, but reflective crystal is the brightest surface. */
.experience{background:#202c2e}
.atmosphere{filter:brightness(.70) saturate(.62)}
.experience::before{background:radial-gradient(ellipse at 20% 18%,rgba(230,185,118,.12),transparent 43%),radial-gradient(ellipse at 52% 48%,rgba(12,24,28,.30),transparent 68%),linear-gradient(180deg,rgba(15,25,29,.25),rgba(19,29,31,.08) 46%,rgba(12,22,25,.50))}
.stage::before{background:rgba(7,17,20,.48)}
@media(max-width:600px){.stage{margin:22px auto 16px}.story{padding-top:18px}.status{font-size:10px}}
/* v17: bilingual editorial hierarchy; material remains the focal point. */
.story{display:flex;flex-direction:column;text-align:center;gap:14px;width:min(720px,100%);padding-top:20px}
.headline h1{font-family:"Songti SC","Noto Serif CJK SC",serif;font-size:clamp(25px,4vw,34px);letter-spacing:.08em;font-weight:400}
.slogan-en{font-family:Georgia,serif;font-size:14px;letter-spacing:.035em;color:#cfc7b7;margin:5px 0 0}
.guidance,.gesture-note{margin:0;font-size:12px;color:#d2d0c6;line-height:1.65}
.guidance span,.gesture-note span{display:block;font-size:10px;color:#a4b0ac;letter-spacing:.01em;max-width:380px}
.actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.actions button span{display:block;font-size:10px;letter-spacing:.04em;margin-top:4px;opacity:.75}
.primary{background:#d6c49c;color:#182725;border-color:#d6c49c;min-width:172px;font-size:14px;padding:12px 24px}
.secondary{background:transparent;color:#bbbfb5;border-color:#889b8e45;font-size:12px;padding:9px 18px}
.gesture-note{color:#a9b3ad;font-size:10px}
.stage{touch-action:pan-y}.stage.is-touch-exploring{touch-action:none}
.status{letter-spacing:.02em;line-height:1.5;padding:0 20px;bottom:-4%}
@media(max-width:600px){.topbar{padding:22px 22px 6px}.brand span{font-size:9px}.story{gap:12px;padding:25px 20px 32px}.stage{margin:18px auto 16px}.headline h1{font-size:26px}.guidance span{max-width:320px}.status{font-size:9px}}