:root{--ink:#100e0b;--cream:#f9f0df;--gold:#d4aa6c}*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:var(--ink);color:var(--cream);font-family:Arial,Helvetica,sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button{touch-action:manipulation}header{position:fixed;z-index:20;top:0;left:0;width:100%;padding:30px 4vw;display:flex;justify-content:space-between;align-items:center;pointer-events:none}header>*{pointer-events:auto}.wordmark{font-family:Georgia,serif;font-size:43px;letter-spacing:5px;line-height:1}.wordmark span{display:block;font-family:Arial,sans-serif;font-size:10px;letter-spacing:5px;line-height:2.7;text-align:center;margin-left:4px}.chapter-count{font-size:12px;letter-spacing:2px;color:#e4ceb0;position:absolute;left:50%;transform:translateX(-50%)}.menu-button{color:var(--cream);background:#211b1480;border:1px solid #d4aa6c50;border-radius:30px;padding:13px 18px;font-size:14px;display:flex;gap:22px;backdrop-filter:blur(15px)}#menu{position:fixed;z-index:35;right:4vw;top:104px;background:#1a1510f5;backdrop-filter:blur(24px);border:1px solid #d4aa6c50;border-radius:12px;padding:16px 28px;width:min(370px,92vw);max-height:calc(100svh - 125px);overflow:auto;box-shadow:0 20px 70px #0008}#menu a{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid #d4aa6c25;font-family:Georgia,serif;font-size:24px}#menu a span{font:12px Arial;color:var(--gold)}#menu .install{border:0;background:none;color:var(--gold);padding:22px 0 8px;font-size:14px}#journey{height:1000svh;position:relative}#stage{height:100svh;position:sticky;top:0;isolation:isolate;overflow:hidden;background:#100e0b}.chapter-anchor{position:absolute;width:1px;height:1px;pointer-events:none}.ambient{position:absolute;inset:0;background:radial-gradient(ellipse at 68% 45%,#80512880,transparent 62%)}.media-layer{position:absolute;left:36%;top:0;width:64%;height:100%;opacity:0;will-change:transform,opacity;transform-origin:50% 65%}#drop-photo img{width:100%;height:100%;object-fit:cover;filter:brightness(.75) saturate(.8)}#drop-photo{mask-image:linear-gradient(to right,transparent,black 25%)}#hair-group{background:#100e0b}.hair-panel{position:absolute;inset:0;background-image:url('/assets/hair-atlas.png');background-size:200% 100%;background-repeat:no-repeat}.hair-panel.rough{background-position:left center}.hair-panel.smooth{background-position:right center}#smooth-reveal{position:absolute;inset:0;clip-path:inset(100% 0 0 0)}#root-view{background:url('/assets/follicle.png') center center/100% 100% no-repeat}#bottle-actor{position:absolute;width:min(48vw,53svh);height:79svh;z-index:3;transform-origin:center center;will-change:transform,opacity;overflow:hidden}.bottle-sprite{position:absolute;inset:0;background:url('/assets/bottle-drop-atlas.png') left center/200% 100% no-repeat}#drop-actor{position:absolute;z-index:6;opacity:0;will-change:transform,opacity,left,top;filter:drop-shadow(0 0 14px #e3a84955);pointer-events:none}.drop-sprite{position:absolute;inset:-20%;background:url('/assets/bottle-drop-atlas.png') right center/200% 100% no-repeat}#root-light{position:absolute;z-index:5;width:135px;height:135px;transform:translate(-50%,-50%);opacity:0;background:radial-gradient(circle,#ffe7a266,#daa54c22 30%,transparent 70%);mix-blend-mode:screen;pointer-events:none}.legibility{position:absolute;z-index:7;inset:0;background:linear-gradient(90deg,#100e0b 0%,#100e0ba8 24%,transparent 55%),linear-gradient(0deg,#100e0bed,transparent 28%,transparent 85%,#100e0b65);pointer-events:none}.story-copy{position:absolute;z-index:9;left:6%;top:29%;max-width:37%;pointer-events:none}.eyebrow{font-size:12px;letter-spacing:2.3px;line-height:1.6;font-weight:500;margin:0 0 23px;color:var(--gold)}h1,h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(46px,5.5vw,88px);font-weight:400;line-height:1.06;letter-spacing:-2.5px;margin:0}em{color:#daba87;font-weight:400}p{font-size:18px;line-height:1.65}#story-caption{max-width:310px;color:#e1d7c7;margin-top:28px}#visual-note{position:absolute;z-index:9;left:6%;bottom:222px;font-size:12px;color:#c4b298;max-width:290px;margin:0;line-height:1.5}.story-controls{position:absolute;z-index:12;bottom:124px;left:6%;right:6%;max-width:430px}.control-row{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px;color:#d4bd9a}.control-row button{font-size:14px;border:0;background:transparent;color:var(--cream);padding:10px 0}.control-row button span{color:var(--gold);padding-left:12px}#story-progress{appearance:none;width:100%;height:22px;background:transparent;cursor:ew-resize;margin:5px 0 0;accent-color:var(--gold)}#story-progress::-webkit-slider-runnable-track{height:1px;background:#d4aa6c75}#story-progress::-moz-range-track{height:1px;background:#d4aa6c75}#story-progress::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:var(--gold);border:1px solid #f3e0be;border-radius:50%;margin-top:-5px}#story-progress::-moz-range-thumb{width:12px;height:12px;background:var(--gold);border:1px solid #f3e0be;border-radius:50%}.chapter-dots{display:flex;justify-content:space-between;margin-top:-10px}.chapter-dots button{width:32px;height:28px;border:0;background:transparent;position:relative}.chapter-dots button:after{content:'';position:absolute;left:50%;top:50%;width:4px;height:4px;border:1px solid #cfac7890;border-radius:50%}.chapter-dots button[aria-current]:after{background:var(--gold)}.product-bar{position:fixed;z-index:22;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(500px,calc(100% - 32px));display:flex;align-items:center;gap:14px;padding:12px;background:#241d15d9;backdrop-filter:blur(20px);border:1px solid #cba26655;box-shadow:0 8px 32px #0004;border-radius:12px}.product-bar img{width:43px;height:52px;object-fit:cover;border-radius:5px}.product-bar strong{display:block;font-size:15px;font-weight:500}.product-bar div>span{display:block;font-size:12px;margin-top:7px;color:#cbbb9f}.product-bar button,.back{margin-left:auto;background:#d7b682;color:#21180d;border:0;border-radius:6px;padding:16px 19px;font-size:14px;white-space:nowrap}.product-bar button span{margin-left:10px}.progress{position:fixed;left:0;top:0;width:100%;height:2px;z-index:40}.progress span{display:block;height:100%;width:0;background:var(--gold)}dialog{border:1px solid #cba26655;border-radius:18px;padding:0;background:#1c1711;color:var(--cream);width:min(860px,92vw);max-height:90svh;box-shadow:0 20px 90px #0008}dialog::backdrop{background:#080604ad;backdrop-filter:blur(8px)}#product[open]{display:grid;grid-template-columns:1fr 1fr}.close{position:absolute;right:16px;top:16px;width:40px;height:40px;border:0;color:var(--cream);background:#211a12d9;border-radius:50%;z-index:2;font-size:20px}.product-image img{width:100%;height:100%;max-height:720px;object-fit:cover}.product-copy{padding:65px 35px 35px}.product-copy h2{font-size:50px;letter-spacing:-2px}.product-copy>p{font-size:16px}dl{margin:28px 0}dl div{border-top:1px solid #cba26630;padding:14px 0;font-size:14px;line-height:1.6}dt{color:#cbbb9f}dd{margin:2px 0 0}.product-copy .fine{font-size:12px;color:#cbbb9f}.back{margin:15px 0 0;width:100%}#install{padding:65px 30px 35px;max-width:480px}#install h2{font-size:45px;letter-spacing:-2px}#install p{font-size:16px}.no-script{position:absolute;z-index:50;background:#1c1711;padding:30px;top:30%;left:10%;right:10%}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}body.modal-open{overflow:hidden}@media(max-width:899px){header{padding:24px 24px}.wordmark{font-size:31px;letter-spacing:4px}.wordmark span{font-size:8px;letter-spacing:4px}.menu-button{font-size:12px;padding:10px 13px;gap:14px}.chapter-count{font-size:11px;left:53%}.media-layer{left:0;width:100%}#bottle-actor{width:min(84vw,54svh);height:77svh}.legibility{background:linear-gradient(0deg,#100e0b 0%,#100e0bb3 22%,transparent 48%,#100e0b30 76%,#100e0b99 100%)}.story-copy{left:25px;top:auto;bottom:245px;max-width:calc(100% - 50px)}h1{font-size:clamp(38px,9.5vw,57px);letter-spacing:-1.8px}.eyebrow{font-size:11px;letter-spacing:1.8px;margin-bottom:14px}#story-caption{font-size:16px;max-width:260px;margin:15px 0 0;line-height:1.55}#stage[data-chapter="0"] .story-copy{top:123px;bottom:auto;max-width:210px}#stage[data-chapter="0"] h1{font-size:34px}#stage[data-chapter="0"] #story-caption{font-size:14px;max-width:140px}#stage[data-chapter="0"] .eyebrow{font-size:10px}#stage[data-chapter="1"] .story-copy{top:130px;bottom:auto}#stage[data-chapter="1"] h1{font-size:40px}#stage[data-chapter="2"] .story-copy,#stage[data-chapter="3"] .story-copy,#stage[data-chapter="4"] .story-copy,#stage[data-chapter="5"] .story-copy{top:130px;bottom:auto;max-width:75%}#stage[data-chapter="2"] h1,#stage[data-chapter="3"] h1,#stage[data-chapter="4"] h1,#stage[data-chapter="5"] h1{font-size:40px}#stage[data-chapter="2"] #story-caption,#stage[data-chapter="3"] #story-caption,#stage[data-chapter="4"] #story-caption,#stage[data-chapter="5"] #story-caption{max-width:190px;font-size:14px;text-shadow:0 1px 10px #000}#visual-note{left:25px;bottom:208px;font-size:11px;max-width:240px;color:#cfc0a6}#drop-photo{mask-image:linear-gradient(black,black 85%,transparent)}.story-controls{bottom:113px;left:25px;right:25px;max-width:none}.control-row{font-size:11px}.product-bar{gap:10px;padding:10px}.product-bar div>span{font-size:11px;max-width:150px;line-height:1.4;margin-top:4px}.product-bar button{font-size:12px;padding:15px 14px}.product-bar strong{font-size:14px}.product-bar button span{margin-left:5px}#product[open]{display:block}.product-image{height:245px;background:#e4e3e4}.product-image img{object-fit:contain}.product-copy{padding:28px}.product-copy h2{font-size:43px}#menu{right:16px;top:90px}}@media(max-height:650px){header{padding-top:14px}.story-copy,#stage[data-chapter] .story-copy{top:100px;bottom:auto}#stage[data-chapter] h1{font-size:32px}#story-caption,#stage[data-chapter] #story-caption{font-size:14px;margin-top:10px}#visual-note{bottom:195px}.eyebrow{margin-bottom:9px}#bottle-actor{height:76svh}}@media(prefers-reduced-motion:reduce){#play-story{display:none}#journey{height:700svh}}@media(min-width:900px){.product-bar{left:auto;right:4vw;transform:none;bottom:28px;width:470px}.story-controls{bottom:35px}#visual-note{bottom:138px}#bottle-actor{filter:drop-shadow(25px 25px 45px #0006)}}

/* Pixel-aligned sprite windows preserve the source bottle and drop proportions. */
#bottle-actor{height:79svh;width:24.92svh;overflow:visible}.bottle-sprite{background-size:533.333% 112.158%;background-position:23.077% 51.35%;background-repeat:no-repeat}.drop-sprite{inset:0;background-size:512% 341.333%;background-position:78.883% 59.25%;background-repeat:no-repeat}
@media(max-width:899px){#bottle-actor{height:77svh;width:24.29svh}#stage[data-chapter="0"] .story-copy{max-width:135px}#stage[data-chapter="0"] h1{font-size:30px}#stage[data-chapter="0"] #story-caption{font-size:14px}}
@media(max-width:380px){#stage[data-chapter="0"] h1{font-size:27px}}

/* Native, intra-frame encoded video is the single source of animation frames. */
#story-video{z-index:2;object-fit:contain;background:#100e0b;transform:none;will-change:opacity}
#video-status{position:absolute;z-index:15;top:50%;left:50%;transform:translate(-50%,-50%);padding:14px 20px;border-radius:8px;background:#100e0be8;color:var(--cream);font-size:14px;text-align:center}
#retry-video{position:absolute;z-index:16;top:60%;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--ink);border:0;border-radius:6px;padding:14px 20px}
@media(max-width:899px){#story-video{object-fit:cover}#stage:not([data-chapter="0"]) .story-copy{top:118px;max-width:70%;text-shadow:0 2px 15px #000a}#stage:not([data-chapter="0"]) h1{font-size:32px}#stage:not([data-chapter="0"]) #story-caption{display:none}.legibility{background:linear-gradient(0deg,#100e0b 0%,#100e0b99 23%,transparent 40%,transparent 68%,#100e0ba6 100%)}}

#gif-scene{z-index:3;object-fit:contain;background:#100e0b;will-change:opacity;pointer-events:none}
@media(max-width:899px){#gif-scene{left:0;width:100%;object-fit:contain}#stage[data-chapter="2"] .legibility,#stage[data-chapter="3"] .legibility{background:linear-gradient(0deg,#100e0b,transparent 38%,transparent 68%,#100e0b80)}}

#bottle-actor.bottle-opening{inset:0 0 0 36%;width:64%;height:100%;transform:none;filter:none;overflow:hidden}
.bottle-opening img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:899px){#bottle-actor.bottle-opening{inset:0;width:100%;height:100%}.bottle-opening img{object-fit:cover}.opening-scene header{color:#21180d}.opening-scene .chapter-count{color:#483723}.opening-scene .menu-button{color:#21180d;background:#fff7e9a0}.opening-scene #stage[data-chapter="0"] .story-copy{top:110px;max-width:220px;color:#21180d}.opening-scene #stage[data-chapter="0"] h1{font-size:27px}.opening-scene #stage[data-chapter="0"] em,.opening-scene #stage[data-chapter="0"] .eyebrow{color:#624726}.opening-scene #stage[data-chapter="0"] #story-caption{display:none}.opening-scene .legibility{background:linear-gradient(0deg,#100e0b 0%,#100e0b88 20%,transparent 42%)}}

/* Every story scene uses the same full-height portrait stage. */
#bottle-actor.bottle-opening{display:none}
#gif-scene,#story-video{inset:0;width:100%;height:100%;object-fit:cover;background:#100e0b}
#stage{width:100%;max-width:56.25svh;margin:0 auto}
#journey{background:#100e0b;height:1200svh}
#stage .story-copy{left:22px;top:110px;bottom:auto;max-width:70%;text-shadow:0 2px 12px #0008}
#stage h1,#stage[data-chapter] h1{font-size:30px;letter-spacing:-1px}
#stage #story-caption{display:none}
#stage .story-controls{left:22px;right:22px;bottom:115px;max-width:none}
#stage #visual-note{left:22px;bottom:215px;font-size:11px;max-width:260px}
#stage .legibility{background:linear-gradient(0deg,#100e0b 0%,#100e0b88 20%,transparent 40%,transparent 70%,#100e0b66)}
.opening-scene #stage .story-copy{color:#21180d;text-shadow:none}
.opening-scene #stage em,.opening-scene #stage .eyebrow{color:#624726}
@media(max-width:899px){#stage{max-width:none;width:100%}#gif-scene,#story-video{object-fit:cover}.opening-scene #stage[data-chapter="0"] .story-copy{top:110px;max-width:70%}}
@media(min-width:900px){.product-bar{left:50%;right:auto;transform:translateX(-50%);width:min(460px,52svh)}.opening-scene header{color:var(--cream)}.opening-scene .chapter-count{color:var(--cream)}}

#strand-scene{inset:0;width:100%;height:100%;object-fit:cover;background:#100e0b;z-index:4;pointer-events:none;will-change:opacity}

/* Supplied MARI mark, preserved in its original gold-and-black colours. */
.wordmark{display:block;width:128px;line-height:0;letter-spacing:normal;background:#fff;padding:7px 9px;border-radius:3px}
.wordmark img{display:block;width:100%;height:auto}
#stage #story-caption,#stage[data-chapter] #story-caption{display:block;font-size:14px;line-height:1.5;max-width:270px;margin:14px 0 0;color:#f4e8d5;text-shadow:0 1px 9px #000}
.opening-scene #stage #story-caption,.opening-scene #stage[data-chapter] #story-caption{display:block;color:#382719;text-shadow:none}
#stage h1,#stage[data-chapter] h1{font-size:clamp(27px,6.6vw,35px);line-height:1.12;letter-spacing:-1px}
#stage .story-copy,#stage[data-chapter] .story-copy{max-width:calc(100% - 44px)}
#stage #scroll-hint{max-width:190px;text-align:right;font-size:11px;line-height:1.4}
.benefit-list{padding:0;list-style:none;margin:25px 0}.benefit-list li{font-size:15px;line-height:1.6;border-top:1px solid #cba26630;padding:14px 0}.benefit-list strong{display:block;color:#daba87;font-weight:500}
@media(max-width:380px){.wordmark{width:109px}#stage #story-caption{max-width:240px;font-size:14px}}

#shine-scene{inset:0;width:100%;height:100%;object-fit:cover;background:#100e0b;z-index:5;pointer-events:none;will-change:opacity}
#journey{height:1700svh}.chapter-dots button{width:28px;min-width:24px}

#final-scene{inset:0;width:100%;height:100%;z-index:6;opacity:0;overflow:hidden;pointer-events:none}
#final-scene img{width:100%;height:100%;object-fit:cover;transform-origin:center;will-change:transform}
#journey-cta{position:absolute;z-index:13;left:22px;right:22px;bottom:249px;width:calc(100% - 44px);border:1px solid #edcc99;background:#dcc092;color:#271a0e;border-radius:7px;padding:17px 14px;font-size:16px;box-shadow:0 6px 25px #0003}
#journey-cta span{padding-left:12px}#journey-cta:hover{background:#edcca0}
#stage[data-chapter="9"] .story-copy,#stage[data-chapter="10"] .story-copy{top:auto;bottom:325px;max-width:calc(100% - 44px)}
#stage[data-chapter="9"] .legibility,#stage[data-chapter="10"] .legibility{background:linear-gradient(0deg,#100e0bf5 5%,#100e0bb5 35%,transparent 72%,#100e0b60)}
#stage[data-chapter="9"] #visual-note,#stage[data-chapter="10"] #visual-note{display:none}
.chapter-dots button{width:24px;min-width:20px}#journey{height:2100svh}
@media(max-height:700px){#journey-cta{bottom:224px}#stage[data-chapter="9"] .story-copy,#stage[data-chapter="10"] .story-copy{bottom:288px}#stage[data-chapter="9"] h1,#stage[data-chapter="10"] h1{font-size:27px}}

canvas#final-scene{object-fit:cover;background:#100e0b;will-change:opacity}