@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&display=swap');
:root{color-scheme:dark;font-family:Jost,'Helvetica Neue',sans-serif;color:#e8e8f4;background:#02020c}*{box-sizing:border-box}body{margin:0}main{height:100svh;min-height:560px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% -15%,#121060 0%,#07062a 36%,#02020b 74%)}.frame{position:absolute;inset:20px;border:1px solid #ffffff0c;pointer-events:none;z-index:4}.frame:before,.frame:after{content:'';position:absolute;width:9px;height:9px;border-color:#94b9d666}.frame:before{top:-1px;left:-1px;border-top:1px solid;border-left:1px solid}.frame:after{bottom:-1px;right:-1px;border-bottom:1px solid;border-right:1px solid}header{position:absolute;top:7%;left:0;width:100%;text-align:center;z-index:3;pointer-events:none}.eyebrow{font-size:12px;letter-spacing:.32em;color:#9c9abb;margin:0 0 12px}.eyebrow span{margin:0 12px;color:#797699}h1{font-weight:300;font-size:clamp(36px,4.4vw,66px);letter-spacing:-.04em;line-height:1.1;margin:0}.subtitle{font-size:14px;color:#8886a8;margin-top:15px;font-weight:300;letter-spacing:.025em}#scene{position:absolute;inset:0;cursor:grab;touch-action:none;outline:none}#scene:active{cursor:grabbing}#scene:focus-visible{outline:1px solid #91bcd6;outline-offset:-24px}canvas{display:block;width:100%;height:100%}#labels{position:absolute;inset:0;pointer-events:none}.model-label{position:absolute;font-size:12px;font-weight:300;letter-spacing:.15em;white-space:nowrap;transform:translate(-50%,-100%);color:#b2afc8}.caption{position:absolute;bottom:13%;left:50%;transform:translateX(-50%);text-align:center;z-index:3;min-width:280px;pointer-events:none}.count{color:#747692;font-size:12px;letter-spacing:.25em;margin:0 0 13px}.count span{color:#a5dcf4}h2{font-size:clamp(22px,2.4vw,32px);letter-spacing:.17em;font-weight:300;margin:0;line-height:1.4}#category{font-size:12px;letter-spacing:.23em;color:#797b98;margin:8px 0 13px}nav{display:flex;gap:8px;justify-content:center;pointer-events:auto}.dot{width:27px;height:28px;background:none;border:0;cursor:pointer;position:relative}.dot:after{content:'';position:absolute;inset:13px 8px 12px;background:#555872;border-radius:2px;transition:.4s}.dot.active:after{inset-inline:2px;background:#b7edff;box-shadow:0 0 12px #72c6fa}button{font:inherit;color:inherit}button:focus-visible{outline:1px solid #b7edff;outline-offset:3px}footer{position:absolute;bottom:36px;left:44px;right:44px;display:flex;align-items:center;justify-content:space-between;z-index:3}footer p{font-size:12px;letter-spacing:.17em;color:#75738d;flex:1}footer p:last-child{text-align:right}.arrows{display:flex;gap:15px}.arrows button{border:1px solid #aaa9c520;background:#07071660;border-radius:50%;width:40px;height:40px;font-size:19px;cursor:pointer;transition:.2s}.arrows button:hover{border-color:#aec9f0;background:#181631}#pause{font-size:13px}#loading,#failure{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);color:#a6a3bc;letter-spacing:.1em;font-size:14px;text-align:center;z-index:5}#loading span{display:block;width:100px;height:1px;background:#abc5fa;margin:20px auto;animation:pulse 1.3s infinite}#failure button{display:block;margin:20px auto;padding:8px 16px;border:1px solid #aaa;background:transparent;cursor:pointer}[hidden]{display:none!important}@keyframes pulse{50%{opacity:.2;transform:scaleX(.3)}}@media(max-width:600px){main{min-height:520px}.frame{inset:12px}header{top:9%}.eyebrow{font-size:12px;letter-spacing:.14em}.eyebrow span{margin:0 5px}.subtitle{font-size:13px;padding:0 30px}.caption{bottom:17%}footer{bottom:30px;left:27px;right:27px}footer p{font-size:12px;letter-spacing:.08em}footer p:last-child{display:none}.arrows{gap:8px}.model-label{font-size:12px;letter-spacing:.06em}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

main:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(transparent 53%,rgba(2,2,12,.25) 76%,#02020c 100%)}#labels{z-index:2}.caption{text-shadow:0 2px 12px #02020c}

#inspect{pointer-events:auto;background:none;border:0;border-bottom:1px solid #9eabc455;color:#c7d7eb;font-size:14px;letter-spacing:.08em;padding:3px 0 7px;margin:0 0 6px;cursor:pointer}#inspect span{margin-left:8px}.caption{bottom:11%}header{top:5%}.subtitle{margin-top:10px}h1{font-size:clamp(34px,3.7vw,54px)}
#product-dialog{position:fixed;inset:0;width:100%;max-width:none;height:100svh;max-height:none;margin:0;padding:0;border:0;color:#e5e5f2;background:radial-gradient(ellipse at 50% 40%,#19172e,#04040f 75%);overflow:hidden}#product-dialog::backdrop{background:#02020ddd;backdrop-filter:blur(12px)}#product-dialog[open]{animation:reveal .4s ease-out}#detail-model{position:absolute;inset:12% 12% 13%;width:76%;height:75%;--poster-color:transparent;outline:none}.detail-heading{position:absolute;top:5%;left:0;width:100%;text-align:center;pointer-events:none;z-index:2}.detail-heading p{font-size:12px;letter-spacing:.3em;color:#9290af}.detail-heading h2{font-size:25px}#close-detail,#reset-view{position:absolute;z-index:3;background:#15142799;border:1px solid #9ca2c244;border-radius:24px;color:#dce2f0;font-size:14px;padding:12px 18px;cursor:pointer}#close-detail{top:32px;left:32px}#reset-view{bottom:35px;right:35px}.detail-help{position:absolute;bottom:39px;width:100%;text-align:center;font-size:14px;letter-spacing:.05em;color:#b5b1cb;pointer-events:none}.detail-loading{color:#9693af;position:absolute;top:48%;width:100%;text-align:center;font-size:14px}@keyframes reveal{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@media(max-width:600px){#detail-model{inset:18% 0 17%;width:100%;height:65%}.detail-heading{top:11%}#close-detail{left:20px;top:20px;padding:10px 15px}.detail-help{bottom:80px;font-size:13px}#reset-view{bottom:28px;right:50%;transform:translateX(50%)}footer p{max-width:140px;line-height:1.7}.caption{bottom:15%}header{top:7%}}

/* White studio: neutral surfaces and charcoal controls preserve product contrast. */
:root{color-scheme:light;color:#30302d;background:#fff}main{background:#fff}.frame{border-color:#34342e12}.frame:before,.frame:after{color:#85857e}.eyebrow,.eyebrow span,.subtitle,.model-label,.count,#category,footer p{color:#686861}.count span{color:#35352e}.model-label{font-weight:400}.arrows button{color:#393934;border-color:#74746b40;background:#ffffff90}.arrows button:hover{background:#e7e7e1;border-color:#74746b}.dot:after{background:#bebeb4}.dot.active:after{background:#666657;box-shadow:0 0 8px #8c8c7030}.caption{text-shadow:0 1px 12px #fff,0 1px 8px #fff}#inspect{color:#414139;border-color:#77776980}#loading,#failure{color:#606058}#loading span{background:#777766}button:focus-visible,#scene:focus-visible{outline-color:#666655}main:after{background:linear-gradient(transparent 55%,rgba(255,255,255,.2) 76%,#fff 100%)}#product-dialog{color:#30302d;background:radial-gradient(ellipse at 50% 45%,#dddeda 0%,#f2f2ef 45%,#fff 80%)}#product-dialog::backdrop{background:#ffffffe0}.detail-heading p,.detail-help,.detail-loading{color:#65655d}#close-detail,#reset-view{background:#ffffffb0;border-color:#74746b50;color:#414139}#detail-model{--progress-bar-color:#99998b;--progress-mask:#f2f2ef}
#detail-model::part(default-progress-bar){display:none}

.model-label{left:0;top:0;will-change:transform;contain:layout style}#labels{contain:strict}

/* Botanical setting stays static while the real products and water animate. */
#product-dialog{background:linear-gradient(to bottom,rgba(255,255,255,.76) 55%,rgba(255,255,255,.96) 100%),url('./assets/botanical-backdrop.jpg') center/cover no-repeat}
.model-label{color:#363e30;background:#ffffffe0;padding:3px 8px;border-radius:20px}
#product-dialog:before{content:'';position:absolute;inset:0;backdrop-filter:blur(5px);pointer-events:none}
#detail-model{background:transparent}