*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#602f43;background:#d99aab;font-family:Georgia,serif;background-image:radial-gradient(ellipse at 50% 15%,#f2cbd3 0%,transparent 45%),radial-gradient(ellipse at 0 55%,#a65e7970,transparent 55%),radial-gradient(ellipse at 100% 90%,#edc4c7,transparent 50%)}.texture{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.19;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.6 .08' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}body:before{content:'';position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 160px #602f4320;z-index:10}header{position:absolute;top:30px;left:36px;right:36px;display:flex;align-items:baseline;justify-content:space-between;z-index:5}.brand{font-size:27px;font-style:italic;letter-spacing:-1px}.note,.eyebrow,.enter,footer,button{font-family:Arial,sans-serif;text-transform:uppercase;font-size:10px;letter-spacing:2px}.note{opacity:.6}section{text-align:center}.welcome{min-height:100svh;display:grid;place-items:center;padding:100px 20px 65px}.intro-stage{width:100%}.eyebrow{opacity:.7;margin:0 0 28px}.oracle{width:150px;margin:0 auto;filter:drop-shadow(0 20px 20px #602f431c)}.oracle img{width:100%}h1,h2{font-weight:normal;letter-spacing:-2px;line-height:1.06}h1{font-size:clamp(48px,6vw,76px);margin:30px 0 24px}em{font-weight:normal}.value,.breathe,.ready-copy{font-size:17px;line-height:1.65;opacity:.75}.enter{display:inline-flex;color:inherit;text-decoration:none;padding:20px 0;gap:22px;align-items:center;margin-top:24px}.enter span{font-size:20px}.ritual{min-height:150svh}.ritual-stage{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px 20px}h2{font-size:clamp(36px,5vw,58px);margin:10px 0 22px}.breathe{margin:12px 0 25px}.count{display:flex;gap:40px;align-items:center;justify-content:center;margin:8px 0 25px;position:relative}.count:before{content:'';position:absolute;width:190px;height:190px;border:1px solid #fff1e740;border-radius:100%;z-index:-1}.count span{font-size:43px;font-style:italic;opacity:.35}.ready-copy{margin:16px 0 0;font-size:15px}.choose{min-height:100svh;padding:80px 20px 50px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.choose .eyebrow{margin-bottom:12px}.choose-title{font-size:35px;letter-spacing:-1px;margin-bottom:26px}.sphere{position:relative;width:min(520px,85vw);aspect-ratio:1;border-radius:100%;isolation:isolate;background:radial-gradient(circle at 32% 22%,#fff6ee55,transparent 23%),radial-gradient(circle at 66% 78%,#f5e9e32b,transparent 42%),radial-gradient(circle at 50% 48%,#fff4ee05 48%,#ffffff26 70%,#682f4926 77%,#fff1e766 92%);box-shadow:inset 2px 3px 7px #fff5edaa,inset -8px -8px 20px #67344824,0 30px 45px -20px #67344850,0 1px 1px #fff4ed77}.glass-rim{position:absolute;inset:2%;border:1px solid #fff1e749;border-radius:50%;box-shadow:inset 0 0 14px #fff4ef22;pointer-events:none}.glass-light{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at 28% 18%,#fff9ef88 0%,#fff9ef18 7%,transparent 19%);z-index:5}.sphere:after{content:'';position:absolute;width:50%;height:12%;bottom:-8%;left:25%;border-radius:50%;background:#67344822;filter:blur(18px);z-index:-1}.deck{position:absolute;inset:10%;perspective:900px}.pick{position:absolute;width:27%;aspect-ratio:.68;padding:8px;border:1px solid #f4d4d877;border-radius:4px;background:#743c51;box-shadow:0 9px 18px #572b4933;cursor:pointer;color:#e8b8c4;display:grid;place-items:center;transition:box-shadow .2s;transform-style:preserve-3d}.pick span,.back span{font:italic 28px/.85 Georgia,serif;text-transform:none;letter-spacing:-2px;border:1px solid #f3d9dd44;border-radius:50%;padding:23px 9px;pointer-events:none}.pick:hover{box-shadow:0 12px 25px #572b4966,0 0 0 2px #fff1e780}.p0{left:9%;top:22%;transform:rotate(-18deg)}.p1{left:41%;top:7%;transform:rotate(12deg)}.p2{left:62%;top:36%;transform:rotate(21deg)}.p3{left:30%;top:48%;transform:rotate(-7deg)}.p4{left:8%;top:58%;transform:rotate(-25deg) scale(.7)}.choose-hint{font-size:15px;opacity:.7;margin-top:45px}.result[hidden]{display:none}.result{width:100%;display:flex;flex-direction:column;align-items:center}.card-wrap{width:min(310px,78vw);perspective:1000px}.card{aspect-ratio:.68;position:relative;transform-style:preserve-3d;filter:drop-shadow(0 20px 23px #67344830)}.face{position:absolute;inset:0;backface-visibility:hidden;border-radius:4px;overflow:hidden}.front canvas{display:block;width:100%;height:100%}.back{transform:rotateY(180deg);background:#743c51;display:grid;place-items:center;border:9px solid #d895a8;color:#e8b8c4}.back span{font-size:55px;padding:65px 20px}.actions{display:flex;justify-content:center;gap:22px;margin-top:24px}button{min-height:44px}button:focus-visible,a:focus-visible{outline:2px solid #602f43;outline-offset:5px}.actions button{background:transparent;border:0;border-bottom:1px solid #67344844;letter-spacing:1px;color:#602f43;cursor:pointer;padding:5px;font-size:10px}#status{min-height:20px;margin-top:12px;font:12px Arial,sans-serif}footer{text-align:center;font-size:9px;opacity:.55;padding:15px 20px 28px}body.revealed .choose-title{display:none}body.revealed .choose .eyebrow{margin-bottom:24px}@media(max-width:600px){header{left:24px;right:24px;top:25px}.note{font-size:8px;letter-spacing:1px}.brand{font-size:24px}.oracle{width:125px}h1{font-size:52px}.value{font-size:16px}.pick span{font-size:22px;padding:17px 6px}.choose{padding-top:65px}.choose-title{font-size:30px}.choose-hint{font-size:13px}.card-wrap{width:min(280px,77vw)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}.ritual{min-height:100svh}.count span{opacity:1}}
/* One continuous room: scroll advances its contents, never its position. */
html{scroll-behavior:auto;scrollbar-width:none}html::-webkit-scrollbar{display:none}body{overscroll-behavior-y:none}header{position:fixed}footer{position:fixed;bottom:16px;left:0;right:0;padding:0;z-index:5;pointer-events:none}.room{position:fixed;inset:0;height:100svh;overflow:hidden}.keeper{position:absolute;left:50%;top:clamp(78px,13svh,130px);margin:0 0 0 -65px;width:130px;z-index:4}.scene-area{position:absolute;top:clamp(178px,29svh,265px);bottom:78px;left:0;right:0}.scene{position:absolute;inset:0;min-height:0;padding:15px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;visibility:hidden;opacity:0}.scene.welcome{visibility:visible;opacity:1}.scene .eyebrow{margin-bottom:18px}.scene h1{font-size:clamp(42px,5.5vw,66px);margin:8px 0 20px}.scene h2{font-size:clamp(34px,4.5vw,54px)}.scene .enter{border:0;background:transparent;color:inherit;cursor:pointer;margin-top:12px}.scene .value{margin:0}.scene .count{margin:38px 0 30px}.scene .count:before{z-index:0;pointer-events:none}.count span{position:relative}.scene.choose{padding-top:0;padding-bottom:0}.sphere{width:min(390px,43svh,82vw);flex-shrink:0}.choose-hint{margin:26px 0 0}.room-guide{position:absolute;bottom:43px;left:35px;right:35px;display:flex;justify-content:space-between;font:9px Arial,sans-serif;letter-spacing:1.4px;text-transform:uppercase;opacity:.65}.scroll-journey{height:420svh;pointer-events:none}.result{position:absolute;left:0;right:0;top:35px;bottom:0;justify-content:center}.card-wrap{width:min(280px,32svh,72vw)}.actions{margin-top:15px;gap:20px}#status{position:absolute;bottom:0;left:0;right:0}body.revealed .choose .eyebrow{position:absolute;top:0;margin:0}.pick span{font-size:23px;padding:18px 7px}body.revealed .scroll-hint{visibility:hidden}@media(max-width:600px){.keeper{width:100px;margin-left:-50px;top:90px}.scene-area{top:185px;bottom:90px}.scene h1{font-size:43px}.scene h2{font-size:35px}.scene .eyebrow{font-size:8px}.scene .value{font-size:15px}.room-guide{left:24px;right:24px;font-size:8px}.sphere{width:min(350px,42svh,83vw)}.pick span{font-size:20px;padding:14px 5px}.result{top:30px}.card-wrap{width:min(260px,33svh,70vw)}}@media(max-height:650px){.keeper{top:65px;width:75px;margin-left:-37.5px}.scene-area{top:135px;bottom:65px}.scene h1{font-size:35px}.scene h2{font-size:30px}.scene .eyebrow{margin-bottom:10px}.scene .enter{padding:10px 0}.scene .count{margin:20px 0}.room-guide{bottom:30px}footer{bottom:10px;font-size:7px}.sphere{width:min(300px,40svh)}.choose-hint{margin-top:16px}.actions{margin-top:8px}.card-wrap{width:29svh}}
body{background-attachment:fixed}.scene[inert]{pointer-events:none}.scene:not([inert]){pointer-events:auto}@media(prefers-reduced-motion:reduce){.scroll-journey{height:420svh}.count span{transition:none}}

.keeper{width:245px;margin-left:-122.5px;top:62px;filter:drop-shadow(0 10px 12px #67344813)}.keeper svg{display:block;width:100%;overflow:visible}.scene-area{top:300px}body{background-color:#e9b5b0;background-image:radial-gradient(ellipse at 50% 25%,#f4d1bf88,transparent 58%),radial-gradient(ellipse at 0 100%,#be859055,transparent 65%)}.pick span{font-size:19px;letter-spacing:-1px}.back span{font-size:44px;letter-spacing:-2px}@media(max-width:600px){.keeper{width:195px;margin-left:-97.5px;top:58px}.scene-area{top:258px}.scene h1{font-size:38px}.scene h2{font-size:32px}.sphere{width:min(300px,35svh,80vw)}.card-wrap{width:min(240px,29svh,65vw)}.pick span{font-size:16px}}@media(max-height:650px){.keeper{width:145px;margin-left:-72.5px;top:45px}.scene-area{top:185px}.sphere{width:32svh}.card-wrap{width:26svh}.scene .value{font-size:13px}.scene h1{font-size:30px}.scene h2{font-size:28px}.scene .eyebrow{font-size:7px}}
/* Warm cream velvet: broad changes in nap direction under a fine pile. */
body{background-color:#e9dfcb;background-image:radial-gradient(ellipse at 49% 28%,#fff8e4bb 0%,#f5ebd677 28%,transparent 61%),radial-gradient(ellipse at -10% 72%,#a68c6540 0%,transparent 55%),radial-gradient(ellipse at 105% 24%,#bca37c44,transparent 53%),linear-gradient(115deg,#d9c9ab55 0%,#f6ecd65c 39%,#c7b49133 64%,#f4ead400 85%);background-attachment:fixed}.texture{opacity:.68;mix-blend-mode:multiply;background-image:url('assets/cream-fibers.svg');background-size:360px 360px}.texture:before{content:'';position:absolute;inset:0;opacity:.24;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 320 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.48 .09' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E");background-size:260px 260px}.texture:after{content:'';position:absolute;inset:0;opacity:.18;background-image:repeating-linear-gradient(93deg,#fff7df33 0px,#fff7df33 .7px,transparent .7px,transparent 3.5px)}body:before{box-shadow:inset 0 0 150px #80624322}.keeper{filter:drop-shadow(0 14px 17px #82604922)}.sphere{background:radial-gradient(circle at 32% 22%,#fffef377,transparent 23%),radial-gradient(circle at 66% 78%,#fffbe82b,transparent 42%),radial-gradient(circle at 50% 48%,#fff4ee05 48%,#ffffff26 70%,#92785120 77%,#fff9e877 92%);box-shadow:inset 2px 3px 7px #fffdf0aa,inset -8px -8px 20px #84654724,0 30px 45px -20px #84654740,0 1px 1px #fff9ea77}
/* Pale rose velvet, retaining the fine pile and diffuse nap lighting. */
body{background-color:#efd0d5;background-image:radial-gradient(ellipse at 49% 28%,#fff0e8aa 0%,#f6dce077 28%,transparent 61%),radial-gradient(ellipse at -10% 72%,#b97d9240 0%,transparent 55%),radial-gradient(ellipse at 105% 24%,#c192a144,transparent 53%),linear-gradient(115deg,#dcabb955 0%,#f8e0e55c 39%,#cea0ae33 64%,#f4dbe000 85%);background-attachment:fixed}.texture{filter:sepia(.25) hue-rotate(305deg)}.texture:after{background-image:repeating-linear-gradient(93deg,#fff0ed33 0px,#fff0ed33 .7px,transparent .7px,transparent 3.5px)}body:before{box-shadow:inset 0 0 150px #94596f20}.keeper{filter:drop-shadow(0 14px 17px #67344822)}.sphere{background:radial-gradient(circle at 32% 22%,#fff6ee77,transparent 23%),radial-gradient(circle at 66% 78%,#fce9ed2b,transparent 42%),radial-gradient(circle at 50% 48%,#fff4ee05 48%,#ffffff26 70%,#9c627b20 77%,#fff1e777 92%);box-shadow:inset 2px 3px 7px #fff5edaa,inset -8px -8px 20px #67344824,0 30px 45px -20px #67344840,0 1px 1px #fff4ed77}
/* Photographic velvet replaces the procedural paper-like grain. */
body{background:#e5bcc2}.texture{z-index:0;opacity:1;mix-blend-mode:normal;filter:none;background-image:linear-gradient(#f8e2e342,#f8e2e342),url('assets/blush-velvet.webp');background-size:cover;background-position:center;background-repeat:no-repeat}.texture:before,.texture:after{display:none}header,.room,footer{z-index:2}body:before{z-index:1;box-shadow:inset 0 0 150px #67344814}
body{background:#e8ddc5}.texture{background-image:linear-gradient(#fff8e62e,#fff8e62e),url('assets/cream-velvet.webp')}.sphere{background:radial-gradient(circle at 32% 22%,#fffef377,transparent 23%),radial-gradient(circle at 66% 78%,#fffbe82b,transparent 42%),radial-gradient(circle at 50% 48%,#fff4ee05 48%,#ffffff26 70%,#92785120 77%,#fff9e877 92%);box-shadow:inset 2px 3px 7px #fffdf0aa,inset -8px -8px 20px #84654724,0 30px 45px -20px #84654740,0 1px 1px #fff9ea77}
/* Quiet warm cotton paper, with fine fibers and restrained grain. */
body{background:#f3ecdf}.texture{background-image:url('assets/cream-fibers.svg');background-size:440px 440px;background-repeat:repeat;background-position:0 0;opacity:.3;mix-blend-mode:multiply;filter:none}.texture:before{display:block;opacity:.12;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");background-size:220px 220px}.texture:after{display:none}body:before{box-shadow:inset 0 0 160px #9e82670b}
/* One thought per state, two text levels, consistent typography. */
.note,.scene .eyebrow,.room-guide,footer{display:none}.brand{font-style:normal;font-size:22px;letter-spacing:-.6px}.scene h1,.scene h2{font-size:clamp(38px,4.6vw,58px);font-style:normal;font-weight:normal;line-height:1.12;letter-spacing:-1.4px;margin:0 0 24px}.scene .value,.choose-hint{font:15px/1.5 Georgia,serif;opacity:.7}.scene .enter,.actions button{font:15px Georgia,serif;text-transform:none;letter-spacing:0}.scene .enter{margin-top:25px;gap:16px}.count span{font-style:normal}.scene-area{bottom:50px}.choose-hint{margin-top:24px}.result{top:0}.actions{margin-top:22px}.scene h1 em,.scene h2 em{font-style:normal}@media(max-width:600px){.scene h1,.scene h2{font-size:38px}.scene-area{bottom:40px}.scene .value{font-size:14px}.scene .enter{margin-top:20px}}@media(max-height:650px){.scene h1,.scene h2{font-size:31px}.scene .enter{margin-top:12px}.scene .value{font-size:13px}}

/* Editorial serif with warm, sculptural letterforms. */
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url('assets/DMSerifDisplay-Regular.ttf') format('truetype')}
.brand,.scene h1,.scene h2,.count span{font-family:'DM Serif Display',Georgia,serif;font-weight:400}
.brand{letter-spacing:-.3px}.scene h1,.scene h2{letter-spacing:-.8px;line-height:1.12}
.scene .value,.choose-hint,.scene .enter,.actions button{font-family:Arial,sans-serif;font-weight:400}

/* The velvet threshold opens into the paper room. */
.scroll-journey{height:520svh}
.entrance{position:fixed;inset:0;z-index:40;overflow:hidden;pointer-events:auto;background:transparent}
/* The photograph carries all fabric, lighting and sequin detail. */
.curtain-lift{position:absolute;inset:-2% -2% -12%;transform-origin:50% 0%;will-change:transform,opacity;--hem-fade:100%;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 var(--hem-fade),transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 var(--hem-fade),transparent 100%)}
.curtain-stage{position:absolute;inset:0;transform-origin:50% 25%}
.curtain-stage picture,.curtain-stage img{display:block;width:100%;height:100%}
.curtain-stage img{object-fit:cover;object-position:50% 50%}



.fiber-cloud{position:absolute;z-index:3;pointer-events:none;will-change:transform,opacity}
.fiber-drift img{display:block;width:100%;height:auto}
.fiber-cloud-near{width:clamp(210px,25vw,460px);left:-6%;top:48%;opacity:.9;transform:rotate(-12deg)}
.fiber-cloud-far{width:clamp(150px,19vw,330px);right:-5%;top:62%;opacity:.65;transform:rotate(10deg)}
.entrance-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff1e7;text-align:center;padding:24px;z-index:5}
.entrance-copy h1{font:400 clamp(48px,7vw,86px)/1.05 'DM Serif Display',Georgia,serif;letter-spacing:-1.5px;margin:0 0 30px;text-shadow:0 2px 28px #301322aa}
.open-room{font:14px Arial,sans-serif;color:inherit;background:transparent;border:0;padding:14px 20px;cursor:pointer}.open-room span{display:block;margin-top:18px;font-size:24px}
.cloud-rise{opacity:0;transform:translateY(220px)}
.scene-area{opacity:0}header{opacity:0}
@media(max-width:600px){.cloud-rise{transform:translateY(180px)}.entrance-copy h1{font-size:52px}}
@media(prefers-reduced-motion:reduce){.scroll-journey{height:520svh}.curtain-lift,.fiber-cloud,}

/* Supplied card-back art, framed to the physical card rather than its backdrop. */
.pick,.back{background-color:#f3ecdf;background-image:url('assets/card-back-pink.jpeg');background-repeat:no-repeat;background-size:117.2% 113.2%;background-position:50% 43.6%;border:0;padding:0;border-radius:6%}
.pick{aspect-ratio:.645}.back{overflow:hidden}

/* Convex glass, with a tightly spaced lattice rolling beneath its surface. */
.sphere{width:min(480px,49svh,86vw);overflow:hidden;border-radius:50%;border:1px solid #ffffffd9;background:radial-gradient(circle at 33% 24%,#ffffffa0,transparent 35%),radial-gradient(circle at 50% 48%,#ecf5f421 46%,#d2e2e545 69%,#9db7c264 88%,#fffffff0 99%);box-shadow:inset 3px 5px 12px #ffffffaa,inset -12px -16px 30px #8dabb447,0 14px 28px -15px #67344825;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);isolation:isolate}
.sphere:before{content:'';position:absolute;left:17%;top:12%;width:38%;height:14%;border-top:5px solid #ffffffbb;border-radius:50%;transform:rotate(-28deg);filter:blur(2px);z-index:140;pointer-events:none}
.sphere:after{content:'';display:block;position:absolute;inset:3%;width:auto;height:auto;left:3%;bottom:3%;border-radius:50%;border:1px solid #ffffff6b;background:none;filter:none;z-index:130;pointer-events:none}
.glass-light{background:radial-gradient(circle at 50% 48%,transparent 48%,#eff5f255 76%,#e3eeebd0 97%),radial-gradient(ellipse at 72% 84%,#ffffff85,transparent 23%);z-index:130;pointer-events:none}.glass-rim{inset:0;border:0;z-index:130;pointer-events:none;box-shadow:inset 0 0 15px #ffffff77}
.deck{position:absolute;inset:0;border-radius:50%;perspective:none;-webkit-mask-image:none;mask-image:none;transform:none}
.pick{position:absolute;left:50%;top:50%;min-width:0;min-height:0;translate:-50% -50%;transform-origin:50% 50%;border-radius:6%;box-shadow:0 2px 5px #67344818;transition:filter .25s;transform-style:flat;will-change:transform;cursor:pointer}
.pick:hover,.pick:focus-visible{filter:brightness(1.065);box-shadow:0 3px 10px #67344825}.pick:focus-visible{outline:2px solid #673448;outline-offset:2px}.choose-hint{margin-top:22px}
@media(max-height:650px){.sphere{width:min(340px,38svh,86vw)}}

/* Filters flatten a preserve-3d card and can expose both faces. */
.card{filter:none;transform-style:preserve-3d;overflow:visible}
.face{backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 20px 23px #67344830}
.front{transform:rotateY(0deg)}
.back{transform:rotateY(180deg)}

/* Mobile uses its own portrait composition and smaller foreground layers. */
@media(max-width:700px),(orientation:portrait){
 .curtain-lift{inset:-1% -1% -10%}
 .curtain-stage img{object-position:50% 48%}
 
 .fiber-cloud-near{width:53vw;left:-23%;top:62%;opacity:.8}
 .fiber-cloud-far{width:41vw;right:-18%;top:36%;opacity:.6}
 .entrance-copy h1{font-size:clamp(43px,10.8vw,68px);max-width:90%;margin-bottom:24px}
}
@media(max-height:650px) and (orientation:landscape){.entrance-copy h1{font-size:clamp(42px,6vw,68px)}}

/* Supplied paper-fiber dreamscape, behind the unchanged oracle and ritual. */
body{background:#c7deeb}
body:before{box-shadow:none}
.dream-sky{position:fixed;inset:-1.5%;z-index:0;overflow:hidden;pointer-events:none}
.dream-sky picture,.dream-sky img{display:block;width:100%;height:100%}
.dream-sky picture{will-change:transform}
.dream-sky img{object-fit:cover;object-position:50% 50%}
.texture{z-index:1;opacity:.08;mix-blend-mode:multiply;background-image:url('assets/cream-fibers.svg');background-size:440px 440px;filter:none}
.texture:before,.texture:after{display:none}
.scene-area{z-index:1}
@media(max-width:700px),(orientation:portrait){.dream-sky img{object-position:50% 50%}}
@media(prefers-reduced-motion:reduce){.dream-sky{inset:0}.dream-sky picture{will-change:auto}}

/* Fewer large drapes, with a little more floating silk fiber. */
.fiber-cloud-middle{width:clamp(170px,22vw,350px);left:4%;top:70%;opacity:.68;transform:rotate(7deg)}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url('assets/PlayfairDisplay.ttf') format('truetype')}
.brand,.entrance-copy h1,.scene h1,.scene h2{font-family:'Playfair Display',Georgia,serif;font-weight:400;font-style:normal;letter-spacing:-.5px}
.brand{font-size:27px;line-height:1.2}
.entrance-copy h1{font-size:clamp(52px,6.5vw,88px);line-height:1.16;letter-spacing:-1px}
.scene h1{font-size:clamp(36px,4.5vw,52px);line-height:1.18}
.scene h2{font-size:clamp(34px,4vw,46px);line-height:1.18}
.count span{font-family:Arial,sans-serif;font-style:normal}
.fiber-cloud-near{top:37%}
@media(max-width:700px),(orientation:portrait){
 .fiber-cloud-middle{width:45vw;left:-16%;top:16%;opacity:.75}
 .fiber-cloud-near{top:62%}
 .brand{font-size:23px}
 .entrance-copy h1{font-size:clamp(42px,11vw,62px);max-width:95%;line-height:1.18}
 .scene h1{font-size:38px}.scene h2{font-size:35px}
}
@media(max-height:650px){.scene h1{font-size:31px}.scene h2{font-size:29px}.entrance-copy h1{font-size:54px}}

/* Oracle and copy form one close composition after the curtain opens. */
.room{--oracle-top:clamp(100px,13svh,130px)}
.keeper{top:var(--oracle-top)}
.scene-area{top:calc(var(--oracle-top) + 223px)}
.scene.welcome,.scene.question,.scene.breathing{justify-content:flex-start;padding-top:0}
.cloud-rise{position:relative}
.cloud-rise>svg{position:relative;z-index:2}
.room-fiber{position:absolute;top:43%;width:78%;z-index:1;pointer-events:none;opacity:.74}
.room-fiber img{display:block;width:100%;height:auto}
.room-fiber-left{left:-60%;transform:rotate(-8deg)}
.room-fiber-right{right:-60%;top:37%;transform:rotate(9deg);opacity:.65}
@media(max-width:700px),(orientation:portrait){
 .room{--oracle-top:clamp(82px,12svh,108px)}
 .keeper{width:195px;margin-left:-97.5px}
 .scene-area{top:calc(var(--oracle-top) + 180px)}
 .room-fiber{width:65%;opacity:.7}
 .room-fiber-left{left:-45%}.room-fiber-right{right:-45%}
}
@media(max-height:650px){
 .room{--oracle-top:66px}
 .keeper{width:145px;margin-left:-72.5px}
 .scene-area{top:calc(var(--oracle-top) + 134px)}
 .sphere{width:min(340px,38svh,86vw,calc(100svh - 285px))}
}

/* Larger oracle, with the quieter supplied paper sky. */
.room{--oracle-top:70px;--oracle-size:416px}
.keeper{width:var(--oracle-size);margin-left:calc(var(--oracle-size) / -2)}
.scene-area{top:calc(var(--oracle-top) + var(--oracle-size) * .88)}
.room-fiber{width:48%;opacity:.6}
.room-fiber-left{left:-30%}.room-fiber-right{right:-30%}
.room:has(.choose[aria-hidden="false"]){--oracle-size:300px}
@media(max-width:700px),(orientation:portrait){
 .room{--oracle-top:64px;--oracle-size:min(332px,86vw)}
 .room-fiber{width:43%;opacity:.58}
 .room-fiber-left{left:-20%}.room-fiber-right{right:-20%}
 .room:has(.choose[aria-hidden="false"]){--oracle-size:234px}
 .dream-sky img{object-position:50% 50%}
}
@media(max-height:650px){
 .room{--oracle-top:48px;--oracle-size:232px}
 .room:has(.choose[aria-hidden="false"]){--oracle-size:200px}
 .sphere{width:min(340px,38svh,86vw,calc(100svh - 285px))}
}

.keeper{transition:width .7s ease,margin-left .7s ease}
.scene-area{transition:top .7s ease}
@media(prefers-reduced-motion:reduce){.keeper,.scene-area{transition:none}}


/* Reference sketch: one broad low cloud at left, one higher cloud at right. */
.room-fiber-left{width:90%;left:-65%;top:55%;transform:none;opacity:.82;z-index:1}
.room-fiber-right{width:87%;right:-60%;top:21%;transform:none;opacity:.78;z-index:1}
.room-fiber-right img{scale:-1 1}
@media(max-width:700px),(orientation:portrait){
 .room-fiber-left{width:78%;left:-48%;top:56%;transform:none}
 .room-fiber-right{width:75%;right:-46%;top:22%;transform:none}
}

/* Sketch overlap: low left foreground, high right background. */
.room-fiber-left{width:95%;left:-44%;top:54%;z-index:3;opacity:.86}
.room-fiber-right{width:88%;right:-52%;top:19%;z-index:1;opacity:.82}
@media(max-width:700px),(orientation:portrait){
 .room-fiber-left{width:84%;left:-33%;top:55%;z-index:3}
 .room-fiber-right{width:79%;right:-43%;top:20%;z-index:1}
}

/* Calm translation-only clouds and a slightly smaller oracle. */
.room{--oracle-size:354px}
@media(max-width:700px),(orientation:portrait){.room{--oracle-size:min(282px,73vw)}}
@media(max-height:650px){.room{--oracle-size:200px}.room:has(.choose[aria-hidden="false"]){--oracle-size:180px}}
.room-fiber,.room-fiber img{rotate:none}
@font-face{font-family:'Advercase Demo';src:url('assets/Advercase-Demo-Regular.otf') format('opentype');font-style:normal;font-weight:400;font-display:swap}
.brand,.entrance-copy h1,.scene h1,.scene h2{font-family:'Advercase Demo','Playfair Display',Georgia,serif;font-weight:400;letter-spacing:0}

.room-fiber-right img{scale:none}

/* One type family throughout the live ritual, using its lightest supplied cut. */
body,.scene .value,.choose-hint,.scene .enter,.actions button,.open-room,.count span,.note,.eyebrow,.room-guide,footer,#status,button{font-family:'Advercase Demo','Playfair Display',Georgia,serif;font-weight:400;font-style:normal;font-synthesis:none}
.scene .value,.choose-hint{font-size:18px;line-height:1.45;opacity:.72}
.scene .enter,.actions button,.open-room{font-size:18px;letter-spacing:0;text-transform:none}
@media(max-width:700px),(orientation:portrait){.scene .value,.choose-hint,.scene .enter,.actions button,.open-room{font-size:17px}}
@media(max-height:650px){.scene .value,.choose-hint,.scene .enter,.actions button,.open-room{font-size:15px}}

/* The oracle speaks, with one quiet prompt at a time. */
.scene h1,.scene h2{max-width:560px;text-wrap:balance}
.scene .value{max-width:490px;text-wrap:balance}
.question .enter{max-width:100%;gap:14px;min-height:50px;margin-top:30px}
.question-window{display:block;overflow:hidden;width:280px;padding:7px 0}
.question-example{display:block;font-size:19px;line-height:1.35}
.breath-next{visibility:hidden;opacity:0;pointer-events:none;transition:opacity .5s ease}
.breath-next.ready{visibility:visible;opacity:1;pointer-events:auto}
.scene .count{margin:25px 0 18px}
.choose-heading{font-size:32px!important;margin:0 0 10px!important}
.choose-subtitle{margin:0 0 20px!important}
.room:has(.choose[aria-hidden="false"]){--oracle-size:240px}
body.revealed .choose-heading,body.revealed .choose-subtitle{display:none}
@media(max-width:700px),(orientation:portrait){
 .room:has(.choose[aria-hidden="false"]){--oracle-size:190px}
 .choose-heading{font-size:28px!important}
 .question-window{width:255px}.question-example{font-size:18px}
 .scene h1,.scene h2{max-width:340px}
}
@media(max-height:650px){
 .room:has(.choose[aria-hidden="false"]){--oracle-size:145px}
 .choose-heading{font-size:25px!important}
 .choose-subtitle{margin-bottom:12px!important}
 .question .enter{margin-top:18px}
}
@media(prefers-reduced-motion:reduce){.breath-next{transition:none}}

/* Shared type and spacing tokens for every reading stop. */
.room{--title-subtitle-gap:16px;--cloud-title-gap:24px;--subtitle-size:18px}
.scene-area{top:calc(var(--oracle-top) + var(--oracle-size) * .88 + var(--cloud-title-gap))}
.scene,.scene.welcome,.scene.question,.scene.breathing,.scene.choose{justify-content:flex-start;padding-top:0}
.scene h1,.scene h2,.scene .choose-heading{margin:0 0 var(--title-subtitle-gap)!important}
.scene .value,.choose-hint,.question-example{font-family:'Advercase Demo','Playfair Display',Georgia,serif;font-size:var(--subtitle-size);font-weight:400;font-style:normal;line-height:1.45;letter-spacing:0;text-transform:none}
.scene .value,.question .enter{opacity:.72}
.question-window{width:min(340px,calc(100vw - 86px));min-height:66px;display:grid;place-items:center;padding:7px 0}
.question-example{width:100%;text-wrap:balance}
@media(max-width:700px),(orientation:portrait){.room{--subtitle-size:17px}}
@media(max-height:650px){.room{--subtitle-size:15px}}

/* Frosted, milky crystal: pastel color lives inside the glass, with diffuse light. */
.sphere{
 border:1px solid #fffaf980;
 background:
  radial-gradient(ellipse at 28% 22%,#fffdfbea 0%,#fffdfb77 18%,transparent 52%),
  radial-gradient(ellipse at 22% 66%,#f5d7eaa6 0%,transparent 60%),
  radial-gradient(ellipse at 78% 34%,#d0eaf5b8 0%,transparent 59%),
  radial-gradient(ellipse at 65% 83%,#ded7efbd 0%,transparent 61%),
  radial-gradient(circle at 46% 44%,#f9f6f2a8 38%,#e7e8f2b8 73%,#d4daecb5 91%,#faf9f3df 100%);
 box-shadow:inset 8px 10px 32px #fffcf7b8,inset -10px -14px 32px #b5b6d54d,inset 0 0 38px #fff7fb8c,0 18px 32px -24px #7e799966,0 0 30px #e6def32b;
 backdrop-filter:blur(16px) saturate(.85);-webkit-backdrop-filter:blur(16px) saturate(.85);
}
.sphere:before{
 left:13%;top:9%;width:56%;height:26%;border:0;
 background:radial-gradient(ellipse,#fffdfb94 0%,#fffdfb33 42%,transparent 72%);
 transform:rotate(-24deg);filter:blur(10px);opacity:.8;
}
.sphere:after{
 inset:0;left:0;bottom:0;border:0;
 background:radial-gradient(circle at 46% 43%,transparent 52%,#eef0fa24 66%,#d9d7ef60 85%,#fff9fbb3 100%);
 box-shadow:inset 0 0 20px #fffdfb70;
}
.glass-light{
 background:
  radial-gradient(ellipse at 23% 72%,#f6dce730 0%,transparent 54%),
  radial-gradient(ellipse at 76% 24%,#e1f2fa35 0%,transparent 51%),
  radial-gradient(circle at 47% 43%,#fffdf40d 28%,transparent 47%,#f2edf626 66%,#ddd9ed70 88%,#faf7f1b8 100%);
 box-shadow:inset 0 0 38px #fffaf84d;
}
.glass-rim{
 background-image:url('assets/crystal-frost.svg');background-size:180px 180px;
 opacity:.36;mix-blend-mode:soft-light;box-shadow:none;border:0;
}

/* Explicit circular compositing boundary, including Safari transformed children. */
.sphere{overflow:hidden;clip-path:circle(50% at 50% 50%);-webkit-clip-path:circle(50% at 50% 50%)}
.sphere .deck{overflow:hidden;border-radius:50%;clip-path:circle(49% at 50% 50%);-webkit-clip-path:circle(49% at 50% 50%);-webkit-mask-image:radial-gradient(circle,#000 69%,transparent 70.7%);mask-image:radial-gradient(circle,#000 69%,transparent 70.7%)}
.sphere,.sphere .deck,.sphere .pick{touch-action:none;user-select:none;-webkit-user-select:none}

/* The same tactile emblem travels from the opening title to the wordmark. */
header{justify-content:flex-start;align-items:center;gap:10px}
.header-logo-slot{display:block;width:44px;height:48px;flex:none}
.entrance-logo-slot{width:142px;height:206px;margin-bottom:22px;flex:none}
.brand-home{position:fixed;z-index:60;left:calc(50% - 71px);top:calc(50% - 215px);width:142px;height:206px;min-height:44px;margin:0;padding:0;border:0;background:transparent;cursor:pointer;touch-action:manipulation;line-height:0;will-change:left,top,width,height}
.brand-home img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.brand-home:focus-visible{outline:2px solid #f5c6d9;outline-offset:5px;border-radius:10px}
@media(max-width:700px),(orientation:portrait){.entrance-logo-slot{width:112px;height:168px;margin-bottom:20px}}
@media(max-height:650px){.entrance-logo-slot{width:90px;height:126px;margin-bottom:14px}}

/* Original heart artwork, lightly sized with a generous touch target. */
.entrance-logo-slot{width:96px;height:70px;margin-bottom:22px}
.header-logo-slot{width:44px;height:44px}
.brand-home{width:96px;height:70px}
.brand-home svg{display:block;width:100%;height:100%;pointer-events:none}
@media(max-width:700px),(orientation:portrait){.entrance-logo-slot{width:80px;height:60px;margin-bottom:18px}}
@media(max-height:650px){.entrance-logo-slot{width:68px;height:50px;margin-bottom:16px}}

/* Approved rose hand emblem: upright and restrained. */
.entrance-logo-slot{width:64px;height:96px;margin-bottom:20px}
.brand-home{width:64px;height:96px}
@media(max-width:700px),(orientation:portrait){.entrance-logo-slot{width:54px;height:82px;margin-bottom:18px}}
@media(max-height:650px){.entrance-logo-slot{width:48px;height:72px;margin-bottom:16px}}

/* Opening lockup: title, larger emblem, invitation. */
.entrance-copy h1{margin-bottom:24px}
.entrance-logo-slot{width:110px;height:164px;margin-bottom:18px}
@media(max-width:700px),(orientation:portrait){.entrance-logo-slot{width:90px;height:134px;margin-bottom:16px}.entrance-copy h1{margin-bottom:22px}}
@media(max-height:650px){.entrance-logo-slot{width:72px;height:108px;margin-bottom:12px}.entrance-copy h1{margin-bottom:18px}}

/* Compact header lockup; account for the icon's transparent touch padding. */
header{gap:0}
header .brand{font-size:18px;line-height:1.15;letter-spacing:0;margin-left:-8px}
@media(max-width:700px),(orientation:portrait){header .brand{font-size:17px}}

/* The header emblem and wordmark share a centered flex row and real icon block. */
header{align-items:center;gap:4px}
.header-logo-slot{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px}
header .brand{margin:0;line-height:24px;white-space:nowrap}
.brand-icon-art{display:grid;place-items:center;width:100%;height:100%;pointer-events:none}
.brand-home.is-docked{position:relative;inset:auto!important;width:44px!important;height:44px!important;min-height:44px;padding:4px!important;flex:none;will-change:auto}

/* Shared subtitle treatment for every next-step cue, including nested questions. */
:root{--subtitle-size:18px}
@media(max-width:700px),(orientation:portrait){:root{--subtitle-size:17px}}
@media(max-height:650px){:root{--subtitle-size:15px}}
header{gap:0}
header .brand{border:0;background:transparent;padding:0;color:inherit;text-transform:none;cursor:pointer;font-family:inherit;font-weight:400;min-height:44px}
.entrance-copy h1{margin-bottom:28px}
.scene .enter,.open-room{font-size:var(--subtitle-size);font-weight:400;line-height:1.45;letter-spacing:0;text-transform:none}
.scene .enter .question-window,.scene .enter .question-example{font-size:inherit;font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit}
.scroll-nudge{display:inline-block;animation:scroll-nudge 2.8s ease-in-out infinite;will-change:transform}
.scene .enter .scroll-nudge,.open-room .scroll-nudge{font-size:var(--subtitle-size)}
.breath-next:disabled .scroll-nudge{animation:none}
@keyframes scroll-nudge{0%,18%,100%{transform:translateY(0)}45%{transform:translateY(6px)}65%{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.scroll-nudge{animation:none;will-change:auto}}

/* Give the rotating questions their own centered line above the scroll cue. */
.question .enter{flex-direction:column;align-items:center;justify-content:center;gap:12px}
.question .enter .scroll-nudge{flex:none;align-self:center}

/* A single generous breathing count, with stable space for each numeral. */
.scene .count{display:grid;place-items:center;gap:0;width:100%;height:112px;margin:25px 0 18px}
.scene .count:before{display:none}
.scene .count span{font-size:clamp(76px,12vw,104px);line-height:1;font-variant-numeric:tabular-nums}
@media(max-height:650px){.scene .count{height:88px;margin:16px 0 12px}.scene .count span{font-size:76px}}

#card-art,#card-art>svg{display:block;width:100%;height:100%}
.front #art[hidden]{display:none}

/* Let the revealed print use the available viewport instead of a tiny thumbnail. */
.result{top:0;justify-content:flex-start}
body.revealed .choose .eyebrow{display:none}
.card-wrap{width:min(410px,88vw,calc((100svh - var(--oracle-top) - var(--oracle-size)*.88 - 110px)*.68))}
body.revealed .actions{margin-top:14px;gap:20px}

/* Landscape printed oracle face, with portrait back fitting inside during flip. */
.card{aspect-ratio:1324/900}.card-wrap{width:min(690px,92vw,calc((100svh - var(--oracle-top) - var(--oracle-size)*.88 - 110px)*1.471))}.back{background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#f7e4e5;border:0}.face{border-radius:22px}

.back{background-image:none}.back:before{content:"";position:absolute;left:50%;top:50%;width:68%;height:147.1%;transform:translate(-50%,-50%) rotate(90deg);background:url(assets/card-back-pink.jpeg) 50% 43.6% / 117.2% 113.2% no-repeat;border-radius:6%}

/* Unified stacked action cues and tighter heading rhythm. */
.room{--title-subtitle-gap:8px}
.scene .enter,.open-room{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-transform:uppercase;letter-spacing:.045em}
.scene .enter .scroll-nudge,.open-room .scroll-nudge{display:block;align-self:center;flex:none}
.scene .enter .question-example,.scene .enter .question-window{text-transform:none;letter-spacing:0}
.actions button{text-transform:uppercase;letter-spacing:.045em;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.action-arrow{display:block;text-align:center}

/* Keep restart reachable above the full-viewport room hit surface. */
header{z-index:65;pointer-events:none}header .brand{pointer-events:auto;touch-action:manipulation}