:root{color-scheme:dark;--ink:#f4fbff;--deep:#03111e;--ocean:#0a6686;--cyan:#65e2de;--moon:#e9efc5;--muted:#b7cbd2;--line:rgba(220,247,255,.2);--room-image:url("assets/ocean-room-base-v02.jpg")}
*{box-sizing:border-box}[hidden]{display:none!important}html{background:#03111e;scroll-behavior:smooth}body{margin:0;overflow-x:hidden;background:#03111e;color:var(--ink);font:16px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select{font:inherit}button{color:inherit}.skip-link{position:fixed;z-index:200;left:-999px;top:1rem;padding:.7rem 1rem;border-radius:999px;background:#fff;color:#071827}.skip-link:focus{left:1rem}
.ocean-experience{position:relative;min-height:100svh;background:#09131b}.experience-topbar{position:absolute;z-index:50;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:max(1.1rem,env(safe-area-inset-top)) clamp(1rem,3vw,2.8rem);pointer-events:none}.ocean-brand,.sound-control{pointer-events:auto}.ocean-brand{display:flex;align-items:baseline;gap:.65rem;color:#fff;text-decoration:none;text-shadow:0 2px 18px rgba(0,0,0,.75)}.ocean-brand strong{font:700 clamp(1.15rem,2.2vw,1.55rem)/1 Georgia,serif}.ocean-brand span{font-size:.67rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.sound-control{display:flex;align-items:center;gap:.5rem;min-height:42px;padding:0 .8rem;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(2,11,19,.42);backdrop-filter:blur(12px);cursor:pointer}.sound-control span{color:var(--cyan)}.sound-control b{font-size:.72rem}
.room-stage{position:relative;width:100%;height:100svh;min-height:620px;overflow:hidden;isolation:isolate;background:#a67754;--pointer-x:45%;--pointer-y:52%}.room-photo,.room-photo img{position:absolute;z-index:0;inset:0;width:100%;height:100%;display:block}.room-photo img{object-fit:cover;object-position:center center}.room-dusk{position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(3,15,29,.04),rgba(3,23,42,.08));transition:background 5s ease,opacity 5s ease}.first-ripple{position:absolute;z-index:3;left:36%;top:48%;width:20%;aspect-ratio:2.4;border:2px solid rgba(150,244,235,.7);border-radius:50%;opacity:0;filter:blur(.4px) drop-shadow(0 0 10px rgba(78,225,218,.6));transform:scale(.4) rotate(-8deg)}.ocean-wash{position:absolute;z-index:2;inset:0;opacity:0;background:linear-gradient(128deg,transparent 0 20%,rgba(4,84,111,.2) 39%,rgba(4,66,100,.52) 73%,rgba(1,26,48,.62));mix-blend-mode:multiply;transition:opacity 3.4s ease}.wall-caustics{position:absolute;z-index:4;inset:-30%;opacity:0;background:repeating-radial-gradient(ellipse at 55% 35%,transparent 0 24px,rgba(171,255,243,.13) 28px 31px,transparent 35px 67px);mix-blend-mode:screen;transform:rotate(-9deg) scale(1.25);transition:opacity 3s ease}.ceiling-ocean{position:absolute;z-index:5;inset:0 0 58%;overflow:hidden;opacity:0;background:radial-gradient(ellipse at 50% -10%,rgba(149,255,244,.33),rgba(8,85,116,.2) 50%,transparent 76%);clip-path:polygon(0 0,100% 0,100% 64%,26% 100%,0 64%);transition:opacity 3.5s ease}.ceiling-ocean::after{content:"";position:absolute;inset:-30%;background:repeating-radial-gradient(ellipse at 38% 0,transparent 0 27px,rgba(190,255,247,.2) 29px 32px,transparent 36px 66px);animation:ceiling-drift 18s linear infinite}.ceiling-ocean i{position:absolute;width:8rem;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.35}.ceiling-ocean i:nth-child(1){left:20%;top:35%;transform:rotate(-9deg)}.ceiling-ocean i:nth-child(2){left:58%;top:58%;transform:rotate(7deg)}.ceiling-ocean i:nth-child(3){left:70%;top:20%;transform:rotate(-4deg)}.window-depth{position:absolute;z-index:4;left:0;top:0;width:20%;height:72%;opacity:0;background:linear-gradient(90deg,rgba(8,109,139,.45),transparent);mix-blend-mode:multiply;transition:opacity 3s ease}
.fish-field{position:absolute;z-index:8;inset:0;opacity:0;transition:opacity 2s ease}.fish{position:absolute;width:clamp(24px,3.5vw,58px);height:clamp(12px,1.8vw,30px);border-radius:55% 48% 50% 54%;background:linear-gradient(135deg,rgba(187,252,242,.82),rgba(57,174,187,.72));filter:drop-shadow(0 0 12px rgba(99,239,231,.3));animation:fish-cross 14s ease-in-out infinite}.fish::before{content:"";position:absolute;right:91%;top:17%;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:15px solid rgba(98,203,205,.75)}.fish::after{content:"";position:absolute;right:20%;top:28%;width:4px;height:4px;border-radius:50%;background:#082738}.fish-a{left:13%;top:49%;animation-delay:-2s}.fish-b{left:26%;top:31%;transform:scale(.65);animation-delay:-8s}.fish-c{left:52%;top:42%;transform:scale(.45);animation-delay:-11s}.fish-d{left:75%;top:33%;transform:scale(.7);animation-delay:-5s}.fish-e{left:39%;top:61%;transform:scale(.52);animation-delay:-13s}.follow-school{position:absolute;z-index:9;left:var(--pointer-x);top:var(--pointer-y);width:90px;height:55px;opacity:0;transform:translate(-50%,-50%);transition:left 1.3s cubic-bezier(.2,.75,.2,1),top 1.3s cubic-bezier(.2,.75,.2,1),opacity 1.5s ease;pointer-events:none}.follow-school i{position:absolute;width:24px;height:11px;border-radius:55%;background:rgba(188,249,240,.72)}.follow-school i::after{content:"";position:absolute;right:90%;top:8%;border:5px solid transparent;border-right-color:rgba(188,249,240,.7)}.follow-school i:nth-child(1){left:5px;top:10px}.follow-school i:nth-child(2){left:39px;top:28px;transform:scale(.72)}.follow-school i:nth-child(3){left:67px;top:5px;transform:scale(.5)}
.milo{position:absolute;z-index:11;left:-38%;top:36%;width:min(43vw,610px);padding:0;border:0;background:transparent;opacity:0;filter:drop-shadow(0 28px 28px rgba(0,18,36,.38));cursor:pointer;transform:rotate(-3deg);transform-origin:50% 60%;will-change:left,top,transform,opacity}.milo svg{display:block;width:100%;overflow:visible}.milo-body,.milo-tail{fill:#7cb9ca;stroke:#b9f0ec;stroke-width:3}.milo-belly{fill:#c8e3dc}.milo-mark{fill:#397d9c;opacity:.75}.milo-eye{fill:#061928}.milo-eye-glint{fill:#fff}.milo-smile{fill:none;stroke:#143649;stroke-width:5;stroke-linecap:round}.milo-shadow{position:absolute;z-index:6;left:7%;top:34%;width:18%;height:9%;border-radius:50%;background:rgba(3,28,45,.42);filter:blur(18px);opacity:0}.bubble-field{position:absolute;z-index:12;left:65%;top:49%;width:180px;height:180px;opacity:0;pointer-events:none}.bubble-field i{position:absolute;bottom:0;width:15px;height:15px;border:1px solid rgba(207,255,250,.8);border-radius:50%;box-shadow:inset 2px 2px rgba(255,255,255,.3);animation:bubble-up 4s ease-in infinite}.bubble-field i:nth-child(2){left:24%;width:9px;height:9px;animation-delay:.5s}.bubble-field i:nth-child(3){left:48%;width:21px;height:21px;animation-delay:1.2s}.bubble-field i:nth-child(4){left:68%;width:12px;height:12px;animation-delay:1.8s}.bubble-field i:nth-child(5){left:86%;width:7px;height:7px;animation-delay:2.3s}.nini-glow{position:absolute;z-index:10;right:7%;top:48%;width:115px;height:115px;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff8bf 0 5%,#a8eee3 10% 20%,rgba(104,221,214,.35) 34%,transparent 69%);filter:drop-shadow(0 0 28px rgba(138,245,225,.9));pointer-events:none}.nini-glow i{position:absolute;inset:40% 18%;border-top:2px solid rgba(255,255,255,.7);border-radius:50%}.pip-discovery{position:absolute;z-index:13;left:38%;top:54%;width:70px;height:70px;opacity:0;transform:translateX(-40px) scale(.55);transition:opacity .8s ease,transform 1.5s cubic-bezier(.2,.8,.2,1);pointer-events:none}.pip-discovery i{position:absolute;inset:0;border-radius:55% 45% 48% 52%;background:linear-gradient(145deg,#ffce7a,#dd8268);box-shadow:0 0 22px rgba(255,206,122,.5)}.pip-discovery i::after{content:"";position:absolute;right:88%;top:25%;border:14px solid transparent;border-right-color:#e99870}.pip-discovery span{position:absolute;z-index:1;left:24%;top:24%;color:#25394a;font-weight:900}.moon-ray{position:absolute;z-index:7;left:-26%;top:15%;width:35%;height:16%;border-radius:60% 45% 65% 45%;opacity:0;background:radial-gradient(ellipse at 55% 50%,rgba(236,247,200,.55),rgba(153,216,211,.22) 48%,transparent 70%);filter:blur(2px) drop-shadow(0 0 20px rgba(216,243,206,.35));transform:rotate(-5deg)}.moon-reflection{position:absolute;z-index:6;right:10%;top:5%;width:22vw;aspect-ratio:1;border-radius:50%;opacity:0;background:radial-gradient(circle,#f4efbd 0 7%,rgba(230,242,194,.18) 9% 27%,transparent 60%);filter:blur(.3px);transition:opacity 5s ease}
.room-occlusion{position:absolute;z-index:14;inset:0;background-image:var(--room-image);background-size:cover;background-position:center center;pointer-events:none}.occlusion-curtain{clip-path:polygon(8% 0,20% 0,20% 85%,8% 85%)}.occlusion-shelf{clip-path:polygon(20% 46%,47% 46%,47% 86%,20% 86%)}.occlusion-bed{clip-path:polygon(29% 59%,100% 48%,100% 100%,25% 100%)}
.room-zone{position:absolute;z-index:18;border:0;background:transparent;cursor:pointer;border-radius:30px}.room-zone span{position:absolute;left:50%;top:50%;width:26px;height:26px;border:1px solid rgba(219,255,248,.85);border-radius:50%;opacity:0;transform:translate(-50%,-50%);box-shadow:0 0 0 7px rgba(111,235,224,.12),0 0 22px rgba(111,235,224,.6)}.zone-bed{left:57%;top:49%;width:40%;height:48%}.zone-lamp{right:1%;top:45%;width:12%;height:25%}.zone-shelf{left:20%;top:45%;width:27%;height:40%}.story-shells{position:absolute;z-index:17;inset:0;pointer-events:none;opacity:0;transition:opacity 1.2s}.story-shells button{position:absolute;width:56px;height:56px;border:0;border-radius:50%;background:radial-gradient(circle,rgba(255,252,207,.9),rgba(95,223,214,.2) 34%,transparent 70%);color:#fffbd1;font-size:1.4rem;cursor:pointer;pointer-events:auto;animation:shell-pulse 3s ease-in-out infinite}.story-shells button:nth-child(1){left:16%;top:33%}.story-shells button:nth-child(2){left:40%;top:51%;animation-delay:.8s}.story-shells button:nth-child(3){left:73%;top:58%;animation-delay:1.6s}.story-shells button.is-found{opacity:.15;transform:scale(.4);pointer-events:none}
.first-copy{position:absolute;z-index:20;left:clamp(1.2rem,5vw,5.5rem);bottom:clamp(7rem,14vh,9rem);text-shadow:0 3px 26px rgba(0,0,0,.72);transition:opacity 1.5s ease,transform 1.5s ease}.first-copy p{margin:0 0 .65rem;font-size:.72rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase}.first-copy h1{margin:0;font:600 clamp(3.3rem,7vw,7rem)/.86 Georgia,serif;letter-spacing:-.055em}.first-copy small{display:block;margin-top:1.1rem;font-size:.82rem;letter-spacing:.08em}.wake-control{position:absolute;z-index:22;left:50%;bottom:clamp(2rem,5vh,3.8rem);transform:translateX(-50%);min-width:180px;min-height:52px;padding:0 1.4rem;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(244,248,218,.9);color:#0b2837;font-weight:900;box-shadow:0 10px 35px rgba(2,21,35,.25);cursor:pointer;transition:opacity .8s ease,transform .8s ease}.mode-controls{position:absolute;z-index:22;left:50%;bottom:max(1rem,env(safe-area-inset-bottom));display:flex;gap:.4rem;padding:.38rem;border:1px solid rgba(255,255,255,.23);border-radius:999px;background:rgba(3,19,31,.58);backdrop-filter:blur(16px);opacity:0;transform:translate(-50%,18px);pointer-events:none;transition:opacity 1s ease,transform 1s ease}.mode-controls button{display:flex;align-items:center;gap:.4rem;min-height:44px;padding:0 1.05rem;border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.74);cursor:pointer}.mode-controls button[aria-pressed="true"]{background:rgba(226,246,221,.92);color:#0b2837}.mode-controls i{font-style:normal}.story-prompt,.rest-phrase{position:absolute;z-index:23;left:50%;top:14%;margin:0;opacity:0;transform:translateX(-50%);padding:.6rem .9rem;border-radius:999px;background:rgba(3,20,33,.52);text-align:center;font-size:.74rem;font-weight:800;letter-spacing:.08em;pointer-events:none;transition:opacity 1s ease}.rest-phrase{top:auto;bottom:5.8rem;background:transparent;color:#eef7db;font:1.25rem Georgia,serif;letter-spacing:0}.magic-moment-mark{position:absolute;z-index:24;left:50%;bottom:8%;display:flex;align-items:center;gap:.8rem;opacity:0;transform:translateX(-50%);font-size:.65rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.magic-moment-mark i{width:42px;height:1px;background:rgba(255,255,255,.65)}
body.wake-ripple .first-ripple{animation:first-ripple 2.4s ease-out forwards}body.wake-water .ocean-wash,body.wake-water .wall-caustics,body.wake-water .ceiling-ocean,body.wake-water .window-depth{opacity:1}body.wake-life .fish-field{opacity:1}body.wake-life .follow-school{opacity:.9}body.milo-entered .milo{opacity:1;left:43%;top:33%;animation:milo-entry 6s cubic-bezier(.2,.7,.2,1) both}body.milo-entered .milo-shadow{animation:shadow-pass 3.4s ease-out both}body.ocean-ready .wake-control{opacity:0;transform:translate(-50%,12px);pointer-events:none}body.ocean-ready .mode-controls{opacity:1;transform:translate(-50%,0);pointer-events:auto}body.ocean-ready .room-zone span{animation:zone-discover 4s ease-in-out 1}body.ocean-ready .first-copy{opacity:.72;transform:translateY(-12px)}
body.bed-response .milo{animation:milo-to-bed 4.8s cubic-bezier(.2,.75,.2,1) both}body.bed-response .bubble-field,body.milo-response .bubble-field{opacity:1}body.milo-response .milo{animation:milo-circle 4.8s ease-in-out both}body.lamp-response .nini-glow{animation:nini-arrive 5.5s ease-in-out both}body.lamp-response .room-dusk{background:linear-gradient(180deg,rgba(5,46,67,.08),rgba(11,73,88,.22))}body.shelf-response .pip-discovery{opacity:1;transform:translateX(0) scale(1)}body.shelf-response .fish-a,body.shelf-response .fish-b{opacity:0;transform:translateX(120px) scale(.4)}
body[data-mode="story"] .fish-field{opacity:.28}body[data-mode="story"] .wall-caustics{opacity:.55}body[data-mode="story"] .story-shells,body[data-mode="story"] .story-prompt{opacity:1}body[data-mode="story"] .milo{left:46%;top:39%;transform:scale(1.08)}body.story-complete .story-prompt span::after{content:" · Milo found them"}body.story-complete .milo{filter:drop-shadow(0 0 32px rgba(234,246,189,.7))}
body[data-mode="rest"] .room-dusk{background:linear-gradient(180deg,rgba(1,11,29,.45),rgba(1,18,42,.68))}body[data-mode="rest"] .ocean-wash{opacity:.82;background:linear-gradient(180deg,rgba(0,18,50,.2),rgba(0,18,52,.78))}body[data-mode="rest"] .fish-field,body[data-mode="rest"] .follow-school,body[data-mode="rest"] .story-shells{opacity:0}body[data-mode="rest"] .wall-caustics{opacity:.24;animation-duration:35s}body[data-mode="rest"] .ceiling-ocean{opacity:.62}body[data-mode="rest"] .milo{left:59%;top:43%;width:min(34vw,480px);transform:rotate(-7deg);transition:all 7s ease}body[data-mode="rest"] .moon-ray{opacity:.75;animation:moon-cross 13s ease-in-out infinite}body[data-mode="rest"] .moon-reflection{opacity:.8}body[data-mode="rest"] .rest-phrase{opacity:1}body.rest-complete .wall-caustics{opacity:.12}body.rest-complete .milo{opacity:.72;transform:scale(.88) rotate(-7deg)}
body.magic-moment .experience-topbar,body.magic-moment .first-copy,body.magic-moment .wake-control,body.magic-moment .mode-controls,body.magic-moment .room-zone,body.magic-moment .story-prompt,body.magic-moment .rest-phrase{opacity:0!important;pointer-events:none!important;transition:none!important}body.magic-moment .room-dusk{animation:moment-dusk 10s linear both}body.magic-moment .ocean-wash{animation:moment-water 10s ease both}body.magic-moment .wall-caustics,body.magic-moment .ceiling-ocean{animation:moment-caustics 10s ease both}body.magic-moment .fish-field{animation:moment-fish 10s ease both}body.magic-moment .milo{animation:moment-milo 10s cubic-bezier(.2,.7,.2,1) both}body.magic-moment .moon-ray{animation:moment-moon 10s ease both}
.after-magic{background:#f2eee5;color:#182637}.after-magic section{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:clamp(5rem,10vw,9rem) 0;border-bottom:1px solid rgba(21,42,55,.14)}.eyebrow{margin:0 0 1rem;color:#18728a;font-size:.7rem;font-weight:900;letter-spacing:.19em;text-transform:uppercase}.after-magic h2{max-width:900px;margin:0;font:600 clamp(2.8rem,6vw,6rem)/.93 Georgia,serif;letter-spacing:-.05em}.intro-section>p:not(.eyebrow){max-width:710px;margin:1.6rem 0 2rem;color:#5a6670;font-size:1.15rem}.moment-button,.primary-link,.secondary-link{display:inline-flex;align-items:center;justify-content:center;gap:2rem;min-height:56px;padding:0 1.5rem;border:0;border-radius:999px;background:#102d3e;color:#fff;text-decoration:none;font-weight:900;cursor:pointer}.moment-button i{font-style:normal}.respond-section>div:first-child,.next-worlds>div:first-child{display:grid;grid-template-columns:.6fr 1.4fr;align-items:end;gap:2rem}.response-grid,.mode-story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3.5rem}.response-grid article,.mode-story-grid article{min-height:290px;padding:2rem;border:1px solid rgba(21,42,55,.13);border-radius:1.8rem;background:rgba(255,255,255,.54)}.response-grid h3,.mode-story-grid h3{margin:1.5rem 0 .5rem;font:600 2rem Georgia,serif}.response-grid p,.mode-story-grid p,.ocean-first p,.pilot-section p{color:#63707a}.object-icon{display:block;position:relative;width:74px;height:56px;border:2px solid #1d6575;border-radius:13px}.bed-icon::before{content:"";position:absolute;inset:22px 5px 5px;border-radius:5px;background:#79bfc2}.lamp-icon{width:48px;border-radius:50% 50% 32% 32%}.lamp-icon::after{content:"";position:absolute;left:21px;top:54px;width:5px;height:22px;background:#1d6575}.shelf-icon{border-radius:4px;background:repeating-linear-gradient(90deg,transparent 0 12px,#79bfc2 13px 17px)}.mode-story-grid article{min-height:360px;color:#fff}.mode-story-grid article>span{font-size:.7rem;letter-spacing:.16em}.mode-story-grid p{color:rgba(255,255,255,.73)}.explore-card{background:linear-gradient(145deg,#0d7890,#0a3b61)!important}.story-card{background:linear-gradient(145deg,#516190,#2b345f)!important}.rest-card{background:linear-gradient(145deg,#122f4e,#061624)!important}.ocean-first{display:grid;grid-template-columns:1fr .75fr;align-items:center;gap:4rem}.milo-portrait{position:relative;min-height:420px;overflow:hidden;border-radius:50% 50% 42% 42%;background:radial-gradient(circle at 40% 30%,#8de4dd,#126985 54%,#061e38);box-shadow:inset 0 0 80px rgba(0,0,0,.24)}.milo-portrait i{position:absolute;left:17%;top:32%;width:75%;height:35%;border-radius:60% 42% 58% 46%;background:#86c7d4;transform:rotate(-7deg);filter:drop-shadow(0 25px 30px rgba(0,0,0,.23))}.milo-portrait i::after{content:"";position:absolute;right:18%;top:28%;width:12px;height:12px;border-radius:50%;background:#082838}.milo-portrait span{position:absolute;left:2rem;bottom:1rem;color:rgba(255,255,255,.7);font:italic 5rem Georgia,serif}.next-world-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem}.next-world-grid article{position:relative;min-height:320px;overflow:hidden;padding:2rem;border-radius:1.8rem;color:#fff}.next-world-grid span,.next-world-grid strong{position:relative;z-index:2;display:block}.next-world-grid span{text-transform:uppercase;letter-spacing:.16em;font-size:.7rem}.next-world-grid strong{margin-top:.5rem;font:2rem Georgia,serif}.forest-preview{background:linear-gradient(145deg,#345c3b,#102a25)}.space-preview{background:linear-gradient(145deg,#474279,#171839)}.next-world-grid i{position:absolute;width:260px;height:260px;right:-30px;bottom:-70px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.3),transparent 64%)}.principle-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem}.principle-grid p{display:grid;gap:.4rem;margin:0;padding:1.5rem;border-top:1px solid rgba(21,42,55,.2)}.principle-grid strong{font:1.5rem Georgia,serif}.principle-grid span{color:#63707a}.pilot-section{display:grid;grid-template-columns:1.1fr .7fr;gap:4rem;align-items:center}.pilot-actions{display:grid;gap:.8rem}.secondary-link{border:1px solid #173749;background:transparent;color:#173749}.text-link{text-align:center;color:#173749;font-weight:800;text-underline-offset:4px}footer{display:flex;justify-content:space-between;gap:1rem;padding:2rem clamp(1rem,3vw,2.5rem);background:#03111e;color:#9eb9c2;font-size:.72rem}footer a{color:#fff}
.observer-panel{position:fixed;z-index:100;inset:0 0 0 auto;width:min(540px,100%);overflow-y:auto;padding:1.3rem;background:#06131f;box-shadow:-30px 0 80px rgba(0,0,0,.55);border-left:1px solid var(--line)}.observer-head{display:flex;justify-content:space-between;gap:1rem}.observer-head h2{margin:.1rem 0;font:2.2rem Georgia,serif}.observer-head p{margin:.2rem 0;color:var(--muted)}.observer-head button{flex:0 0 auto;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:transparent;font-size:1.5rem;cursor:pointer}.privacy-note{padding:1rem;border-radius:14px;background:#0c2535;color:var(--muted);font-size:.82rem}.observer-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:.3rem;margin:1rem 0}.observer-tabs button{min-height:46px;padding:.3rem;border:1px solid var(--line);border-radius:10px;background:transparent;font-size:.72rem;cursor:pointer}.observer-tabs button[aria-selected="true"]{background:#0f8da4;color:#fff}.observer-panel form{display:grid;gap:.85rem;padding:.8rem 0 1.4rem}.observer-panel label:not(.check):not(.consent-box){display:grid;gap:.3rem;color:var(--muted);font-size:.8rem}.observer-panel select,.observer-panel input[type="number"]{width:100%;padding:.75rem;border:1px solid var(--line);border-radius:10px;background:#0b2030;color:#fff}.observer-panel fieldset{margin:0;padding:1rem;border:1px solid var(--line);border-radius:14px}.observer-panel legend{color:var(--muted);font-size:.8rem}.check{display:flex;gap:.6rem;padding:.35rem 0}.consent-box{display:flex;gap:.7rem;padding:1rem;border:1px solid var(--line);border-radius:14px;color:var(--muted);font-size:.8rem}.check input,.consent-box input{accent-color:#5ddbd3}.save-button,.export-button{min-height:48px;border:0;border-radius:999px;background:#dff3d6;color:#082330;font-weight:900;cursor:pointer}.observer-status{min-height:1.5rem;color:#9fe2d7;font-size:.8rem}.export-button{width:100%;margin-bottom:3rem;border:1px solid var(--line);background:transparent;color:#fff}
@keyframes first-ripple{0%{opacity:0;transform:scale(.4) rotate(-8deg)}30%{opacity:1}100%{opacity:0;transform:scale(3.8) rotate(-8deg)}}@keyframes ceiling-drift{to{transform:translate3d(5%,4%,0) rotate(3deg)}}@keyframes fish-cross{0%,100%{margin-left:-4%;opacity:0}12%,78%{opacity:1}86%{margin-left:16%;opacity:0}}@keyframes milo-entry{0%{left:-38%;top:37%;transform:rotate(-7deg) scale(.8);opacity:0}12%{opacity:.45}28%{left:8%;top:30%;opacity:1}54%{left:34%;top:25%;transform:rotate(2deg) scale(1)}76%{left:58%;top:33%;transform:rotate(-3deg)}100%{left:43%;top:33%;transform:rotate(-3deg)}}@keyframes shadow-pass{0%{opacity:0;left:8%}30%{opacity:.6}100%{opacity:0;left:55%}}@keyframes bubble-up{0%{opacity:0;transform:translateY(20px) scale(.4)}30%{opacity:.8}100%{opacity:0;transform:translateY(-150px) scale(1.2)}}@keyframes zone-discover{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.65)}25%,55%{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes milo-to-bed{0%{left:43%;top:33%}55%{left:59%;top:43%;transform:rotate(-9deg) scale(.9)}75%{left:62%;top:45%;transform:rotate(-5deg) scale(.92)}100%{left:43%;top:33%}}@keyframes milo-circle{0%,100%{transform:rotate(-3deg)}35%{transform:translate(-5%,-8%) rotate(-12deg) scale(.9)}65%{transform:translate(6%,5%) rotate(6deg) scale(1.04)}}@keyframes nini-arrive{0%,100%{opacity:0;transform:scale(.2)}22%,72%{opacity:1;transform:scale(1)}}@keyframes shell-pulse{50%{transform:scale(1.2);filter:drop-shadow(0 0 18px #fffbc7)}}@keyframes moon-cross{0%,100%{left:-26%;opacity:0}18%,78%{opacity:.75}92%{left:92%;opacity:0}}@keyframes moment-dusk{0%,9%{background:rgba(0,0,0,.18)}100%{background:rgba(1,18,44,.55)}}@keyframes moment-water{0%,12%{opacity:0}36%,100%{opacity:.9}}@keyframes moment-caustics{0%,18%{opacity:0}42%,100%{opacity:.75}}@keyframes moment-fish{0%,31%{opacity:0}45%,78%{opacity:1}100%{opacity:.15}}@keyframes moment-milo{0%,37%{left:-38%;top:37%;opacity:0}48%{left:5%;top:32%;opacity:1}74%{left:50%;top:25%;opacity:1}100%{left:62%;top:39%;opacity:.75;transform:scale(.86)}}@keyframes moment-moon{0%,69%{left:-25%;opacity:0}78%{opacity:.8}100%{left:75%;opacity:.5}}@keyframes moment-mark{0%,82%{opacity:0}90%,100%{opacity:1}}
@media(max-width:760px){:root{--room-image:url("assets/ocean-room-base-mobile-v02.jpg")}.room-stage{min-height:700px}.room-photo img{object-position:center}.experience-topbar{padding:1rem}.ocean-brand span{font-size:.58rem}.sound-control b{display:none}.first-copy{left:1.1rem;bottom:7.2rem}.first-copy h1{font-size:clamp(3.1rem,15vw,4.7rem)}.first-copy small{font-size:.72rem}.wake-control{bottom:2rem}.mode-controls{bottom:max(.75rem,env(safe-area-inset-bottom));width:calc(100% - 1.2rem);justify-content:center}.mode-controls button{flex:1;justify-content:center;padding:0 .55rem}.milo{width:72vw}.room-occlusion{background-size:cover;background-position:center}.occlusion-curtain{clip-path:polygon(0 8%,26% 8%,26% 69%,0 69%)}.occlusion-shelf{clip-path:polygon(22% 47%,51% 47%,51% 68%,22% 68%)}.occlusion-bed{clip-path:polygon(9% 61%,100% 52%,100% 100%,0 100%)}.zone-bed{left:23%;top:54%;width:72%;height:40%}.zone-lamp{right:0;top:49%;width:20%;height:23%}.zone-shelf{left:21%;top:45%;width:31%;height:27%}.first-ripple{left:46%;top:57%}.window-depth{width:25%;height:67%}.milo-shadow{left:3%;top:38%;width:28%}body.milo-entered .milo{left:25%;top:35%}body[data-mode="story"] .milo{left:22%;top:41%}body[data-mode="rest"] .milo{left:31%;top:48%;width:62vw}.pip-discovery{left:43%;top:55%}.nini-glow{right:2%;top:52%;width:82px;height:82px}.story-shells button:nth-child(1){left:11%;top:34%}.story-shells button:nth-child(2){left:37%;top:53%}.story-shells button:nth-child(3){left:68%;top:63%}.story-prompt{top:11%}.rest-phrase{bottom:5.3rem}.after-magic section{width:min(100% - 28px,1180px);padding:5rem 0}.respond-section>div:first-child,.next-worlds>div:first-child,.ocean-first,.pilot-section{grid-template-columns:1fr}.response-grid,.mode-story-grid,.next-world-grid,.principle-grid{grid-template-columns:1fr}.response-grid article,.mode-story-grid article{min-height:auto}.milo-portrait{min-height:330px}.pilot-section{gap:2rem}footer{display:grid;text-align:center}.observer-tabs{grid-template-columns:1fr 1fr}.observer-panel{padding:1rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.wall-caustics,.ceiling-ocean::after,.fish,.bubble-field i,.story-shells button,.moon-ray{animation:none!important}.first-ripple{display:none}.ocean-wash,.wall-caustics,.ceiling-ocean,.fish-field,.milo,.mode-controls,.room-dusk{transition-duration:1.8s!important}body.milo-entered .milo{animation:none!important;left:43%;top:33%;opacity:1}body.magic-moment .ocean-wash,body.magic-moment .wall-caustics,body.magic-moment .ceiling-ocean,body.magic-moment .fish-field,body.magic-moment .milo,body.magic-moment .moon-ray,body.magic-moment .magic-moment-mark{animation:none!important}body.magic-moment .ocean-wash,body.magic-moment .ceiling-ocean,body.magic-moment .milo{opacity:1}}

/* v0.2 scene alignment refinements: masks stay invisible until Milo needs them. */
.first-copy h1{font-size:clamp(2.9rem,5vw,5.2rem)}
.milo{top:32%;width:min(36vw,525px)}.milo-body,.milo-tail{fill:url(#miloBody);stroke:rgba(212,247,240,.75);stroke-width:2}.milo-belly{fill:url(#miloBelly)}.milo-mark{fill:#245f83;opacity:.65}
.room-occlusion{opacity:0;background-image:linear-gradient(128deg,transparent 0 20%,rgba(4,84,111,.2) 39%,rgba(4,66,100,.52) 73%,rgba(1,26,48,.62)),var(--room-image);background-blend-mode:multiply;transition:opacity 2.5s ease}.room-occlusion::after{content:"";position:absolute;inset:-30%;opacity:.55;background:repeating-radial-gradient(ellipse at 55% 35%,transparent 0 24px,rgba(171,255,243,.13) 28px 31px,transparent 35px 67px);mix-blend-mode:screen;transform:rotate(-9deg) scale(1.25)}.occlusion-curtain{clip-path:polygon(7% 2%,19% 3%,19% 83%,15% 83%,14% 12%,8% 10%,8% 78%,6% 78%)}.occlusion-shelf{clip-path:polygon(20% 55%,46% 55%,46% 86%,20% 86%)}.occlusion-bed{clip-path:polygon(64% 50%,94% 50%,100% 58%,100% 100%,29% 100%,35% 83%,49% 72%,62% 66%)}
body.wake-ripple .wake-control{opacity:0;transform:translate(-50%,12px);pointer-events:none}body.wake-water .wall-caustics{opacity:.55}body.wake-water .ceiling-ocean{opacity:.72}body.milo-entered .room-occlusion{opacity:1}body.milo-entered .milo{left:46%;top:26%}
@keyframes milo-entry{0%{left:-38%;top:34%;transform:rotate(-7deg) scale(.8);opacity:0}12%{opacity:.45}28%{left:8%;top:30%;opacity:1}54%{left:34%;top:22%;transform:rotate(2deg) scale(1)}76%{left:58%;top:27%;transform:rotate(-3deg)}100%{left:46%;top:26%;transform:rotate(-3deg)}}
@keyframes milo-to-bed{0%{left:46%;top:26%}55%{left:59%;top:39%;transform:rotate(-9deg) scale(.9)}75%{left:62%;top:41%;transform:rotate(-5deg) scale(.92)}100%{left:46%;top:26%}}
@keyframes moment-caustics{0%,18%{opacity:0}42%,100%{opacity:.62}}@keyframes moment-milo{0%,37%{left:-38%;top:34%;opacity:0}48%{left:5%;top:30%;opacity:1}74%{left:50%;top:22%;opacity:1}100%{left:62%;top:34%;opacity:.75;transform:scale(.86)}}
@media(max-width:760px){.milo{width:68vw}.occlusion-curtain{clip-path:polygon(9% 8%,25% 12%,25% 68%,18% 69%,18% 18%,11% 17%,11% 66%,7% 66%)}.occlusion-shelf{clip-path:polygon(22% 52%,51% 52%,51% 69%,22% 69%)}.occlusion-bed{clip-path:polygon(54% 54%,91% 52%,100% 60%,100% 100%,0 100%,12% 76%,35% 68%,53% 64%)}body.milo-entered .milo{left:25%;top:31%}body[data-mode="story"] .milo{left:22%;top:37%}body[data-mode="rest"] .milo{left:31%;top:44%;width:60vw}}

/* Virtual-object geometry masks: no repeated-photo rectangles are placed over the room. */
.room-occlusion{display:none}.milo{clip-path:inset(0)}body.milo-entered .milo{clip-path:polygon(0 0,100% 0,100% 72%,52% 72%,52% 100%,0 100%)}body.milo-response .milo,body[data-mode="story"] .milo{clip-path:inset(0)}body.bed-response .milo,body[data-mode="rest"] .milo{clip-path:polygon(0 0,100% 0,100% 65%,44% 65%,44% 100%,0 100%)}
body[data-mode="rest"] .first-copy{opacity:0!important;transition:none}body[data-mode="rest"] .room-zone span{animation:none;opacity:0}
@media(max-width:760px){body[data-mode="rest"] .milo{left:8%;top:44%;width:60vw}}

/* Ocean Room 001 — real room first, digital life kept low and finite. */
.room-stage{--pointer-x:45%;--pointer-y:72%}.first-copy{pointer-events:none}
.ocean-wash{inset:38% 0 0;background:linear-gradient(180deg,transparent,rgba(16,91,105,.09) 38%,rgba(5,54,69,.24));mix-blend-mode:multiply}
.wall-caustics{inset:48% -8% -20%;background:repeating-radial-gradient(ellipse at 48% 55%,transparent 0 38px,rgba(189,255,242,.1) 42px 45px,transparent 50px 102px);transform:rotate(-4deg) scale(1.08);mask-image:linear-gradient(transparent,#000 35%)}
.window-depth{opacity:0!important}.first-ripple{left:28%;top:72%;width:12%}
body.wake-water .ocean-wash{opacity:.5}body.wake-water .wall-caustics{opacity:.28}
.fish-field{transition:opacity 1.8s ease}.fish{width:clamp(18px,2.2vw,34px);height:clamp(9px,1.1vw,17px);animation:none;transition:left 1.4s cubic-bezier(.2,.72,.2,1),top 1.4s cubic-bezier(.2,.72,.2,1),opacity 1.2s ease,transform 1.4s ease}.fish::before{border-top-width:6px;border-bottom-width:6px;border-right-width:10px}.fish::after{width:3px;height:3px}.fish-a{left:12%;top:72%}.fish-b{left:27%;top:79%;transform:scale(.72)}.fish-c{left:43%;top:67%;transform:scale(.55)}.fish-d{left:63%;top:76%;transform:scale(.8)}.fish-e{left:79%;top:65%;transform:scale(.62)}
body[data-fish-state="move"] .fish{animation:fish-low-pass 6.2s ease-in-out 1 both}body[data-fish-state="move"] .fish-b{animation-delay:.35s}body[data-fish-state="move"] .fish-c{animation-delay:.8s}body[data-fish-state="move"] .fish-d{animation-delay:1.15s}body[data-fish-state="move"] .fish-e{animation-delay:1.5s}
body[data-fish-state="observe"] .fish{animation:none;opacity:.82;transform:translateY(-3px) scale(.72)}body[data-fish-state="observe"] .fish-c{transform:translateY(-5px) scale(.5)}
body[data-fish-state="hide"] .fish{animation:none;left:31%;top:77%;opacity:0;transform:scale(.25)}
body[data-fish-state="return"] .fish{animation:fish-return 2.5s ease-out 1 both}
body.fish-follow .fish{animation:none!important;left:var(--pointer-x);top:var(--pointer-y);opacity:.78}body.fish-follow .fish-a{transform:translate(-62px,-12px) scale(.7)}body.fish-follow .fish-b{transform:translate(-25px,20px) scale(.52)}body.fish-follow .fish-c{transform:translate(18px,-17px) scale(.42)}body.fish-follow .fish-d{transform:translate(52px,12px) scale(.58)}body.fish-follow .fish-e{transform:translate(76px,-8px) scale(.38)}
.milo{top:43%;width:min(29vw,410px)}body.milo-entered .milo{left:43%;top:42%;clip-path:polygon(0 0,100% 0,100% 70%,50% 70%,50% 100%,0 100%);animation:resident-arrive 5.2s cubic-bezier(.2,.7,.2,1) 1 both}body.milo-away .milo{animation:resident-leave 3s ease-in 1 both!important}body.milo-returning .milo{animation:resident-return 3.4s ease-out 1 both!important}
body[data-milo-state="notice_child"] .milo{transform:rotate(3deg) translateY(5px)}body.milo-response .milo{animation:milo-play-brief 7.2s ease-in-out 1 both!important;clip-path:inset(0)}body.plush-response .milo{animation:milo-approach-plush 5s ease-in-out 1 both!important}body.shell-response .milo{transform:rotate(4deg) translate(-3%,4%)}
.shell-event,.reef-event,.plush-glow,.sleep-breath{position:absolute;z-index:12;pointer-events:none}.shell-event{right:4.5%;top:51%;width:92px;height:92px;opacity:0}.shell-event i{position:absolute;inset:10%;border-radius:52% 48% 56% 44%;background:radial-gradient(circle at 48% 60%,#fff3bd 0 7%,rgba(243,226,168,.5) 11% 24%,rgba(102,210,201,.25) 32%,transparent 68%);filter:drop-shadow(0 0 15px rgba(255,240,177,.62))}.shell-event span{position:absolute;left:16%;top:33%;width:25px;height:12px;border-radius:60%;background:#8ed2c8;opacity:0}.shell-event span::after{content:"";position:absolute;right:88%;top:5%;border:5px solid transparent;border-right-color:#8ed2c8}
.reef-event{left:28%;top:66%;width:88px;height:78px;opacity:0;transform:translateX(-18px)}.reef-event i{position:absolute;inset:25% 5% 0;border-radius:60% 40% 20% 35%;background:linear-gradient(145deg,#c39472,#8d6256);box-shadow:0 8px 18px rgba(23,24,25,.22)}.reef-event span{position:absolute;left:43%;top:29%;width:25px;height:17px;border-radius:50%;background:#d99d7c}.reef-event span::before,.reef-event span::after{content:"";position:absolute;top:-7px;width:6px;height:9px;border-radius:50%;background:#d99d7c}.reef-event span::before{left:3px}.reef-event span::after{right:3px}
.plush-glow{left:66%;top:55%;width:15%;height:22%;border-radius:50%;opacity:0;background:radial-gradient(ellipse,rgba(235,246,199,.48),rgba(135,214,204,.14) 42%,transparent 72%);filter:blur(2px)}.sleep-breath{left:68%;top:63%;width:9%;height:8%;border-radius:50%;opacity:0;background:rgba(231,244,202,.3);filter:blur(12px)}
body.shell-response .shell-event{animation:shell-discovery 5.2s ease-in-out 1 both}body.shell-response .shell-event span{animation:creature-peek 4.2s 1s ease-in-out 1 both}body.shell-response .fish{left:75%;top:68%}
body.reef-response .reef-event{animation:reef-peek 5s ease-in-out 1 both}body.reef-response .fish-a,body.reef-response .fish-b,body.reef-response .fish-c{left:31%;top:75%;opacity:0;transform:scale(.25)}
body.plush-response .plush-glow{animation:plush-invite 5s ease-in-out 1 both}
.zone-plush{left:62%;top:50%;width:25%;height:34%}.zone-shell{right:1%;top:47%;width:13%;height:25%}.zone-reef{left:20%;top:55%;width:23%;height:32%}
body.ocean-ready .room-zone span{animation:zone-discover 2.8s ease-in-out 1}.room-zone span{width:20px;height:20px;box-shadow:0 0 0 5px rgba(111,235,224,.08),0 0 15px rgba(111,235,224,.38)}
body[data-mode="story"] .story-prompt{opacity:1}body[data-mode="story"] .fish-field{opacity:.55}body[data-mode="story"] .wall-caustics{opacity:.2}body[data-mode="story"] .milo{left:47%;top:45%;transform:scale(.96)}
body[data-mode="rest"] .first-copy{opacity:0!important;transition:none}body[data-mode="rest"] .room-zone span{animation:none;opacity:0}body[data-mode="rest"] .room-dusk{background:linear-gradient(180deg,rgba(7,13,23,.24),rgba(3,15,27,.48))}body[data-mode="rest"] .ocean-wash{opacity:.22;background:linear-gradient(180deg,transparent 38%,rgba(8,46,57,.22))}body[data-mode="rest"] .wall-caustics{opacity:.12}body[data-mode="rest"] .fish-field{opacity:0}body[data-mode="rest"] .rest-phrase{opacity:1}body[data-mode="rest"] .milo{left:45%;top:43%;width:min(29vw,410px);transform:rotate(-3deg);transition:none}
body.return-turn .milo{transform:rotate(7deg) translateY(4%);filter:drop-shadow(0 18px 22px rgba(0,18,36,.3))}body.return-travel .milo{animation:milo-return-path 4.5s cubic-bezier(.35,.1,.25,1) 1 both!important;clip-path:polygon(0 0,100% 0,100% 62%,47% 62%,47% 100%,0 100%)}body.return-transfer .milo{animation:milo-transfer 3.4s ease-in 1 both!important}body.return-transfer .plush-glow{animation:plush-transfer 3.5s ease-in-out 1 both}body.return-sleep .milo{opacity:0!important;pointer-events:none}body.return-sleep .plush-glow{opacity:.24}body.return-sleep .sleep-breath{animation:plush-breathe 6s ease-in-out 1 both}body.return-sleep .wall-caustics{opacity:.05}body.return-sleep .ocean-wash{opacity:.09}
body.magic-moment .experience-topbar,body.magic-moment .first-copy,body.magic-moment .wake-control,body.magic-moment .mode-controls,body.magic-moment .room-zone,body.magic-moment .story-prompt,body.magic-moment .rest-phrase{opacity:0!important;pointer-events:none!important;transition:none!important}body.magic-moment .ocean-wash{animation:moment-water-room001 10s ease 1 both}body.magic-moment .wall-caustics{animation:moment-caustics-room001 10s ease 1 both}body.magic-moment .fish-field{animation:moment-fish-room001 10s ease 1 both}body.magic-moment .milo{animation:moment-milo-room001 10s cubic-bezier(.2,.7,.2,1) 1 both!important;clip-path:polygon(0 0,100% 0,100% 70%,50% 70%,50% 100%,0 100%)}
.return-section>p:not(.eyebrow){max-width:720px;color:#63707a;font-size:1.12rem}.return-section ol{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:3rem 0 0;padding:1px;list-style:none;background:rgba(21,42,55,.15)}.return-section li{display:grid;gap:2rem;min-height:180px;padding:1.5rem;background:#f2eee5;font:600 1.25rem Georgia,serif}.return-section li span{color:#18728a;font:800 .68rem Inter,sans-serif;letter-spacing:.14em}.response-grid small{display:block;margin-top:1.2rem;color:#18728a;font-size:.65rem;font-weight:900;letter-spacing:.1em}.plush-icon{border-radius:55% 45% 48% 52%}.plush-icon::before{content:"";position:absolute;right:14%;top:20%;width:7px;height:7px;border-radius:50%;background:#1d6575}.shell-icon{width:58px;border-radius:55% 55% 45% 45%;background:repeating-radial-gradient(circle at 50% 100%,transparent 0 7px,rgba(121,191,194,.65) 8px 10px)}.reef-icon{border:0;border-bottom:18px solid #79bfc2;border-radius:50% 40% 25% 35%}.reef-icon::before,.reef-icon::after{content:"";position:absolute;bottom:4px;width:15px;height:42px;border:3px solid #1d6575;border-bottom:0;border-radius:50% 50% 0 0}.reef-icon::before{left:14px;transform:rotate(-18deg)}.reef-icon::after{right:13px;transform:rotate(22deg)}
@keyframes fish-low-pass{0%{margin-left:-3%;opacity:0}16%,68%{opacity:.82}48%{transform:translateY(-5px)}82%,100%{margin-left:9%;opacity:0}}@keyframes fish-return{0%{opacity:0;transform:scale(.25)}60%{opacity:.78}100%{opacity:.7;transform:scale(.7)}}
@keyframes resident-arrive{0%{left:-28%;top:52%;opacity:0;transform:rotate(-5deg) scale(.68)}24%{opacity:.85}62%{left:27%;top:43%;transform:rotate(2deg) scale(.9)}100%{left:43%;top:42%;opacity:.95;transform:rotate(-3deg)}}@keyframes resident-leave{0%{left:43%;top:42%;opacity:.95}70%{left:78%;top:51%;opacity:.55}100%{left:108%;top:55%;opacity:0;transform:scale(.75)}}@keyframes resident-return{0%{left:-24%;top:58%;opacity:0;transform:scale(.7)}45%{opacity:.8}100%{left:43%;top:42%;opacity:.95;transform:rotate(-3deg)}}
@keyframes milo-play-brief{0%,100%{left:43%;top:42%;transform:rotate(-3deg)}32%{left:34%;top:47%;transform:rotate(-9deg) scale(.9)}66%{left:53%;top:39%;transform:rotate(4deg) scale(1.02)}}@keyframes milo-approach-plush{0%,100%{left:43%;top:42%}55%{left:58%;top:49%;transform:rotate(-7deg) scale(.78)}76%{left:62%;top:52%;transform:rotate(-3deg) scale(.68)}}
@keyframes shell-discovery{0%,100%{opacity:0;transform:scale(.7)}22%,76%{opacity:1;transform:scale(1)}}@keyframes creature-peek{0%,100%{opacity:0;transform:translateX(-12px)}28%,70%{opacity:.9;transform:translateX(18px)}}@keyframes reef-peek{0%,100%{opacity:0;transform:translateX(-18px)}25%,70%{opacity:1;transform:translateX(0)}}@keyframes plush-invite{0%,100%{opacity:0}30%,70%{opacity:.65}}
@keyframes milo-return-path{0%{left:45%;top:43%;opacity:.95;transform:rotate(3deg) scale(1)}42%{left:55%;top:46%;transform:rotate(-5deg) scale(.82)}76%{left:63%;top:50%;transform:rotate(-2deg) scale(.62)}100%{left:66%;top:53%;opacity:.75;transform:scale(.48)}}@keyframes milo-transfer{0%{left:66%;top:53%;opacity:.75;transform:scale(.48)}65%{opacity:.48;filter:drop-shadow(0 0 20px rgba(230,246,197,.55))}100%{left:68%;top:58%;opacity:0;transform:scale(.12)}}@keyframes plush-transfer{0%{opacity:0;transform:scale(.82)}48%{opacity:.8;transform:scale(1.05)}100%{opacity:.24;transform:scale(.92)}}@keyframes plush-breathe{0%{opacity:0;transform:scale(.75)}45%{opacity:.5;transform:scale(1.08)}100%{opacity:.16;transform:scale(.88)}}
@keyframes moment-water-room001{0%,13%{opacity:0}40%,82%{opacity:.48}100%{opacity:.18}}@keyframes moment-caustics-room001{0%,22%{opacity:0}45%,78%{opacity:.28}100%{opacity:.08}}@keyframes moment-fish-room001{0%,26%{opacity:0}42%,72%{opacity:.82}100%{opacity:.08}}@keyframes moment-milo-room001{0%,42%{left:-28%;top:53%;opacity:0;transform:scale(.7)}58%{left:20%;top:46%;opacity:.9}80%{left:48%;top:42%;opacity:.95;transform:rotate(-2deg)}100%{left:61%;top:49%;opacity:.62;transform:scale(.7)}}
@media(max-width:760px){.first-copy h1{font-size:clamp(2.7rem,13vw,4.2rem)}.milo{width:54vw}body.milo-entered .milo{left:22%;top:48%}.fish-a{left:8%;top:78%}.fish-b{left:25%;top:72%}.fish-c{left:43%;top:81%}.fish-d{left:61%;top:70%}.fish-e{left:79%;top:78%}.zone-plush{left:50%;top:54%;width:43%;height:34%}.zone-shell{right:0;top:51%;width:19%;height:25%}.zone-reef{left:18%;top:53%;width:35%;height:30%}.shell-event{right:0;top:56%;width:76px;height:76px}.reef-event{left:27%;top:63%}.plush-glow{left:58%;top:59%;width:25%;height:21%}body[data-mode="story"] .milo{left:20%;top:49%}body[data-mode="rest"] .milo{left:22%;top:48%;width:54vw}.return-section ol{grid-template-columns:1fr 1fr}.return-section li{min-height:140px}body.return-travel .milo{animation-name:milo-return-path-mobile!important}body.return-transfer .milo{animation-name:milo-transfer-mobile!important}}
@keyframes milo-return-path-mobile{0%{left:22%;top:48%;opacity:.95;transform:rotate(3deg) scale(1)}55%{left:42%;top:52%;transform:rotate(-5deg) scale(.75)}100%{left:53%;top:58%;opacity:.75;transform:scale(.5)}}@keyframes milo-transfer-mobile{0%{left:53%;top:58%;opacity:.75;transform:scale(.5)}100%{left:62%;top:64%;opacity:0;transform:scale(.12)}}
@media(prefers-reduced-motion:reduce){.fish,.milo,.shell-event,.reef-event,.plush-glow,.sleep-breath{animation-duration:.01ms!important;animation-iteration-count:1!important}body.milo-entered .milo,body.return-travel .milo,body.return-transfer .milo{animation-duration:.01ms!important;animation-iteration-count:1!important}body.milo-entered .milo{left:43%;top:42%;opacity:.9}body.return-sleep .milo{opacity:0!important}}

/* Living Scene v0.2 — child-eye room, photographic residents, and restrained occupancy. */
:root{--room-image:url("assets/ocean-room-child-eye-desktop-v03.jpg")}
.room-stage{min-height:560px;background:#d3ad80;cursor:default}
.room-photo img{object-position:50% 50%}
.room-dusk{background:linear-gradient(180deg,rgba(25,20,16,.01),rgba(12,28,30,.025) 52%,rgba(10,35,40,.06))}
.ocean-wash{inset:58% 0 0;background:linear-gradient(180deg,transparent,rgba(22,101,111,.035) 55%,rgba(10,75,88,.09));mix-blend-mode:multiply}
.wall-caustics{inset:61% -6% -12%;opacity:0;background:repeating-radial-gradient(ellipse at 48% 54%,transparent 0 54px,rgba(193,255,241,.09) 60px 63px,transparent 69px 130px);mask-image:linear-gradient(transparent,#000 27%)}
body.wake-water .ocean-wash{opacity:.45}body.wake-water .wall-caustics{opacity:.22}
.first-ripple{left:36%;top:68%;width:9%;height:6%;border-color:rgba(107,204,198,.22)}
.first-copy{left:50%;top:37%;transform:translate(-50%,-50%);width:min(92%,780px);text-align:center;color:#20322e;text-shadow:0 1px 20px rgba(255,250,236,.86)}
.first-copy p{color:#28695f}.first-copy h1{font-size:clamp(2.5rem,5vw,4.8rem);line-height:.98}.first-copy small{color:#465d56}
body.ocean-ready .first-copy{opacity:0!important;transform:translate(-50%,-44%);pointer-events:none}
.wake-control{display:none}
.experience-topbar{padding:max(.85rem,env(safe-area-inset-top)) clamp(.85rem,2.4vw,2rem)}
.ocean-brand,.sound-control{color:#253b35;text-shadow:0 1px 14px rgba(255,255,255,.8)}
.sound-control{min-height:36px;padding:0 .65rem;border-color:rgba(28,62,55,.2);background:rgba(255,252,243,.5);color:#243d37}.sound-control span{color:#26796e}.sound-control b{font-size:.66rem}
.scene-controls{position:absolute;z-index:45;right:max(.7rem,env(safe-area-inset-right));bottom:max(.7rem,env(safe-area-inset-bottom));display:flex;gap:.35rem;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
body.ocean-ready .scene-controls{opacity:.68;pointer-events:auto}body[data-mode="rest"] .scene-controls{opacity:.82}
.scene-controls button{display:flex;align-items:center;gap:.32rem;min-height:34px;padding:.2rem .55rem;border:1px solid rgba(30,59,52,.16);border-radius:999px;background:rgba(255,253,246,.58);color:#304b44;backdrop-filter:blur(10px);cursor:pointer}.scene-controls i{font-style:normal;font-size:.86rem}.scene-controls span{font-size:.6rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}

/* Three fish are the default population; two reserved nodes keep the hard maximum at five. */
.fish-d,.fish-e{display:none!important}.fish{width:clamp(52px,5.5vw,88px);height:clamp(52px,5.5vw,88px);border:0!important;border-radius:0!important;background-image:url("assets/baby-fish-family-v01.webp")!important;background-repeat:no-repeat!important;background-size:300% 100%!important;filter:contrast(1.08) saturate(.82) drop-shadow(0 6px 7px rgba(21,49,49,.34));opacity:0;transition:left 1.5s cubic-bezier(.2,.72,.2,1),top 1.5s cubic-bezier(.2,.72,.2,1),opacity 1s ease,transform 1.5s ease}
.fish::before,.fish::after{display:none!important}.fish-a{left:35%;top:72%;background-position:0 0!important}.fish-b{left:51%;top:80%;background-position:50% 0!important;transform:scale(.78)}.fish-c{left:67%;top:70%;background-position:100% 0!important;transform:scale(.62)}
body.fish-peek:not(.wake-life) .fish-a{left:39%;top:57%;opacity:.5;transform:scale(.48)}
body[data-fish-state="move"] .fish{animation:fish-living-move 7.2s ease-in-out 1 both}
body[data-fish-state="observe"] .fish{animation:none;opacity:.88;transform:translateY(-3px) scale(.76)}body[data-fish-state="observe"] .fish-c{transform:translateY(-2px) scale(.66)}
body[data-fish-state="hide"] .fish{animation:none;left:39%;top:59%;opacity:0;transform:scale(.25)}
body[data-fish-state="return"] .fish{animation:fish-living-return 2.8s ease-out 1 both}
body.fish-follow .fish{animation:none!important;left:var(--pointer-x)!important;top:var(--pointer-y)!important;opacity:.73}body.fish-follow .fish-a{transform:translate(-54px,-10px) scale(.72)}body.fish-follow .fish-b{transform:translate(-5px,18px) scale(.58)}body.fish-follow .fish-c{transform:translate(48px,-12px) scale(.48)}

/* Milo is a transparent photographic sprite, never a room-scale vector. */
.milo{z-index:11;left:-25%;top:51%;width:min(24vw,370px);aspect-ratio:3/2;height:auto!important;padding:0;border:0;background:none!important;overflow:visible;opacity:0;filter:drop-shadow(0 15px 13px rgba(26,47,43,.2));clip-path:none!important;transition:transform 1.2s ease,filter 1.2s ease;cursor:pointer}
.milo-sprite{position:absolute;inset:0;display:block;background-image:url("assets/milo-living-cutout-v02.webp");background-repeat:no-repeat;background-size:contain;background-position:center}
.milo-contact{z-index:10;left:41%;top:53%;width:22%;height:20%;border-radius:50%;opacity:0;background:radial-gradient(ellipse,rgba(142,213,201,.12),transparent 68%);filter:blur(5px);transition:opacity 1s ease}
body.milo-entered .milo{left:39%;top:49%;opacity:.94;animation:milo-living-arrive 4.2s cubic-bezier(.2,.72,.2,1) 1 both!important;clip-path:none!important}
body.milo-entered .milo-contact{opacity:.55}body.milo-away .milo{animation:milo-living-leave 3.2s ease-in 1 both!important}body.milo-returning .milo{animation:milo-living-reenter 3.5s ease-out 1 both!important}
body[data-milo-state] .milo-sprite{background-position:center}
body[data-milo-state="notice_child"] .milo{transform:rotate(2deg) translateY(3px)}body[data-milo-state="approach"] .milo{transform:translate(6%,5%) scale(.96)}body[data-milo-state="play"] .milo{transform:translate(-2%,-2%) scale(1.02)}
body.milo-response .milo{animation:milo-living-play 6.2s ease-in-out 1 both!important}body.plush-response .milo{animation:milo-living-plush 5s ease-in-out 1 both!important}body.shell-response .milo{transform:rotate(2deg) translate(-2%,2%)}

/* Object alignment in the 16:9 child-eye master. */
.zone-shell{left:64%;right:auto;top:24%;width:11%;height:24%}.zone-reef{left:37%;top:27%;width:12%;height:26%}.zone-plush{left:80%;top:20%;width:19%;height:27%}
.shell-event{left:65%;right:auto;top:25%;width:104px;height:104px}.reef-event{left:39%;top:37%;width:78px;height:64px}.plush-glow{left:81%;top:21%;width:17%;height:25%}.sleep-breath{left:87%;top:31%;width:8%;height:7%}
.room-zone span{opacity:0!important}.shell-event i{background:radial-gradient(circle at 50% 60%,#fff8d1 0 8%,rgba(255,232,163,.36) 15% 29%,rgba(111,198,188,.13) 40%,transparent 70%)}
body.shell-response .shell-event{animation:shell-living-event 5.5s ease-in-out 1 both}body.shell-response .shell-event span{animation:creature-peek 4.2s 1s ease-in-out 1 both}body.reef-response .reef-event{animation:reef-peek 5s ease-in-out 1 both}body.plush-response .plush-glow{animation:plush-invite 5s ease-in-out 1 both}

/* The room quiets before Milo crosses to the physical plush. */
.rest-phrase{left:50%;right:auto;bottom:7%;transform:translateX(-50%);color:#344b45;text-shadow:0 1px 14px rgba(255,255,255,.9)}
body[data-mode="rest"] .room-dusk{background:linear-gradient(180deg,rgba(20,24,24,.08),rgba(12,32,35,.19))}body[data-mode="rest"] .ocean-wash{opacity:.09}body[data-mode="rest"] .wall-caustics{opacity:.04}body[data-mode="rest"] .milo{left:39%;top:49%;width:min(24vw,380px);transform:none}
body.return-turn .milo{transform:rotate(5deg) translateY(3%)}body.return-travel .milo{animation:milo-home-living 4.2s cubic-bezier(.35,.1,.25,1) 1 both!important;clip-path:none!important}body.return-transfer .milo{animation:milo-transfer-living 3.2s ease-in 1 both!important}body.return-sleep .milo{opacity:0!important}body.return-sleep .sleep-breath{animation:plush-breathe-v02 5.8s ease-in-out 2 both}.rest-complete .ocean-wash{opacity:.015!important}.rest-complete .wall-caustics{opacity:0!important}.rest-complete .milo-contact{opacity:0!important}

body.magic-moment .experience-topbar,body.magic-moment .first-copy,body.magic-moment .wake-control,body.magic-moment .scene-controls,body.magic-moment .room-zone,body.magic-moment .rest-phrase{opacity:0!important;pointer-events:none!important}body.magic-moment .ocean-wash{animation:moment-water-living 10s ease 1 both}body.magic-moment .wall-caustics{animation:moment-caustics-living 10s ease 1 both}body.magic-moment .fish-field{animation:moment-fish-living 10s ease 1 both}body.magic-moment .milo{animation:moment-milo-living 10s cubic-bezier(.2,.7,.2,1) 1 both!important;clip-path:none!important}

@keyframes fish-living-move{0%{margin-left:-3%;opacity:0}18%,69%{opacity:.72}45%{transform:translateY(-4px) scale(.76)}84%,100%{margin-left:8%;opacity:0}}
@keyframes fish-living-return{0%{opacity:0;transform:scale(.25)}65%{opacity:.7}100%{opacity:.66;transform:scale(.7)}}
@keyframes milo-living-arrive{0%{left:23%;top:56%;opacity:0;transform:scale(.7)}24%{opacity:.56}62%{left:33%;top:51%;transform:rotate(2deg) scale(.88)}100%{left:39%;top:49%;opacity:.94;transform:rotate(-2deg)}}
@keyframes milo-living-leave{0%{left:39%;top:49%;opacity:.94}70%{left:65%;top:56%;opacity:.5}100%{left:104%;top:58%;opacity:0;transform:scale(.72)}}
@keyframes milo-living-reenter{0%{left:19%;top:57%;opacity:0;transform:scale(.7)}48%{opacity:.68}100%{left:39%;top:49%;opacity:.94;transform:rotate(-2deg)}}
@keyframes milo-living-play{0%,100%{left:39%;top:49%;transform:rotate(-2deg)}34%{left:34%;top:54%;transform:rotate(-6deg) scale(.92)}67%{left:49%;top:48%;transform:rotate(3deg) scale(1)}}
@keyframes milo-living-plush{0%,100%{left:39%;top:49%}60%{left:67%;top:39%;transform:rotate(-5deg) scale(.77)}78%{left:72%;top:34%;transform:rotate(-2deg) scale(.7)}}
@keyframes shell-living-event{0%,100%{opacity:0;transform:scale(.82)}24%,72%{opacity:.72;transform:scale(1)}}
@keyframes milo-home-living{0%{left:39%;top:49%;opacity:.94;transform:rotate(3deg) scale(1)}48%{left:59%;top:42%;transform:rotate(-5deg) scale(.88)}100%{left:75%;top:29%;opacity:.68;transform:rotate(-2deg) scale(.72)}}
@keyframes milo-transfer-living{0%{left:75%;top:29%;opacity:.68;transform:scale(.72)}65%{opacity:.43;filter:drop-shadow(0 0 18px rgba(226,240,195,.45))}100%{left:84%;top:24%;opacity:0;transform:scale(.35)}}
@keyframes plush-breathe-v02{0%,100%{opacity:.03;transform:scale(.84)}48%{opacity:.35;transform:scale(1.04)}}
@keyframes moment-water-living{0%,18%{opacity:0}42%,78%{opacity:.42}100%{opacity:.04}}@keyframes moment-caustics-living{0%,28%{opacity:0}48%,74%{opacity:.2}100%{opacity:0}}@keyframes moment-fish-living{0%,25%{opacity:0}42%,70%{opacity:.76}100%{opacity:.05}}@keyframes moment-milo-living{0%,45%{left:23%;top:56%;opacity:0;transform:scale(.7)}58%{left:31%;top:52%;opacity:.72}82%{left:42%;top:49%;opacity:.94;transform:rotate(-2deg)}100%{left:57%;top:54%;opacity:.42;transform:scale(.76)}}

@media(max-width:680px){
  :root{--room-image:url("assets/ocean-room-child-eye-mobile-v03.jpg")}.room-stage{min-height:620px}.room-photo img{object-position:50% 50%}.first-copy{top:25%;width:88%}.first-copy h1{font-size:clamp(2.45rem,12.2vw,4rem)}.first-copy p{font-size:.62rem}.experience-topbar{padding-top:max(.75rem,env(safe-area-inset-top))}.ocean-brand span{display:none}.sound-control{min-height:34px}.scene-controls span{display:none}.scene-controls button{width:34px;justify-content:center;padding:0}
  .ocean-wash{inset:57% 0 0}.wall-caustics{inset:61% -20% -8%}.first-ripple{left:34%;top:74%;width:16%}
  .fish{width:68px;height:68px}.fish-a{left:22%;top:72%}.fish-b{left:45%;top:81%}.fish-c{left:69%;top:68%}body.fish-peek:not(.wake-life) .fish-a{left:39%;top:55%}
  .milo{width:54vw;top:60%}body.milo-entered .milo{left:18%;top:58%}.milo-contact{left:18%;top:62%;width:49%;height:18%}
  .zone-shell{left:15%;top:31%;width:22%;height:18%}.zone-reef{left:35%;top:33%;width:20%;height:17%}.zone-plush{left:54%;top:28%;width:45%;height:20%}.shell-event{left:15%;top:33%;width:88px;height:88px}.reef-event{left:36%;top:37%;width:70px;height:60px}.plush-glow{left:57%;top:28%;width:40%;height:22%}.sleep-breath{left:70%;top:36%;width:18%;height:8%}
  body[data-mode="rest"] .milo{left:18%;top:58%;width:54vw}body.return-travel .milo{animation-name:milo-home-mobile-living!important}body.return-transfer .milo{animation-name:milo-transfer-mobile-living!important}.rest-phrase{bottom:6.2%;width:90%;text-align:center}
  .return-section ol{grid-template-columns:1fr 1fr}
}
@keyframes milo-home-mobile-living{0%{left:18%;top:58%;opacity:.94;transform:rotate(3deg) scale(1)}50%{left:30%;top:48%;transform:rotate(-4deg) scale(.84)}100%{left:46%;top:35%;opacity:.68;transform:scale(.65)}}
@keyframes milo-transfer-mobile-living{0%{left:46%;top:35%;opacity:.68;transform:scale(.65)}100%{left:61%;top:31%;opacity:0;transform:scale(.3)}}
@media(prefers-reduced-motion:reduce){.fish,.milo,.shell-event,.reef-event,.plush-glow,.sleep-breath{animation-duration:.01ms!important}.wall-caustics{display:none}body.milo-entered .milo{left:39%;top:49%;opacity:.9}}
@media(max-width:680px) and (prefers-reduced-motion:reduce){body.milo-entered .milo{left:18%;top:58%}}

/* Lived-in Reframe v0.3 — the room arrives before any explanation. */
:root{--room-image:url("assets/ocean-room-base-v03-desktop.jpg")}
.room-stage{min-height:560px;background:#cba77d}
.room-photo img{object-position:center center}
.experience-topbar{justify-content:flex-end;opacity:0;pointer-events:none;transition:opacity 1.1s ease}
.sound-control{pointer-events:none}
.scene-controls{opacity:0!important;pointer-events:none!important;transition:opacity 1.1s ease}
body.controls-ready .experience-topbar{opacity:.62;pointer-events:auto}
body.controls-ready .sound-control,body.controls-ready .scene-controls{pointer-events:auto!important}
body.controls-ready .scene-controls{opacity:.62!important}
.first-copy,.wake-control,.ocean-brand{display:none!important}
.room-dusk{background:linear-gradient(180deg,rgba(28,23,19,.01),rgba(13,31,31,.03) 58%,rgba(12,43,44,.065))}
.ocean-wash{inset:62% 0 0;background:linear-gradient(180deg,transparent,rgba(20,101,108,.025) 54%,rgba(10,75,82,.075))}
.wall-caustics{inset:66% -8% -10%;background:repeating-radial-gradient(ellipse at 46% 50%,transparent 0 58px,rgba(193,255,241,.075) 64px 67px,transparent 73px 138px)}
body.wake-water .ocean-wash{opacity:.35}body.wake-water .wall-caustics{opacity:.16}
.first-ripple{left:9%;top:64%;width:8%;height:5%;opacity:.5}

/* One fish is discovered first, a second follows, then the small family is present. */
body.fish-peek .fish-field{opacity:1}body[data-mode="rest"] .fish-field{opacity:0!important}
body.discovery-one:not(.discovery-two) .fish-b,body.discovery-one:not(.discovery-two) .fish-c{opacity:0!important}
body.discovery-two:not(.discovery-three) .fish-c{opacity:0!important}
body.fish-peek:not(.wake-life) .fish-a{left:11%;top:55%;opacity:.76;transform:scale(.58)}
.fish-a{left:18%;top:70%}.fish-b{left:45%;top:78%}.fish-c{left:69%;top:70%}

/* Desktop art anchors are authored for the independent 16:9 master. */
.zone-reef{left:2%;top:21%;width:14%;height:27%}.zone-shell{left:21%;right:auto;top:27%;width:15%;height:28%}.zone-plush{left:54%;top:17%;width:39%;height:38%}
.reef-event{left:6%;top:30%;width:76px;height:66px}.shell-event{left:24%;right:auto;top:31%;width:104px;height:104px}.plush-glow{left:57%;top:20%;width:37%;height:34%}.sleep-breath{left:70%;top:33%;width:13%;height:8%}
.milo{width:min(22vw,340px);top:55%}.milo-contact{left:34%;top:58%;width:24%;height:18%}
body.milo-entered .milo{left:35%;top:53%;animation:milo-lived-arrive 4.2s cubic-bezier(.2,.72,.2,1) 1 both!important}
body.milo-away .milo{animation:milo-lived-leave 3.2s ease-in 1 both!important}body.milo-returning .milo{animation:milo-lived-reenter 3.5s ease-out 1 both!important}
body[data-mode="rest"] .milo{left:35%;top:53%;width:min(22vw,340px)}body.return-travel .milo{animation:milo-home-lived 4.2s cubic-bezier(.35,.1,.25,1) 1 both!important}body.return-transfer .milo{animation:milo-transfer-lived 3.2s ease-in 1 both!important}

/* Editorial explanation begins only after the room viewport. */
.night-setup{padding-top:clamp(6rem,12vw,11rem)}.night-setup>p:not(.eyebrow),.section-lede{max-width:760px;color:#63707a;font-size:clamp(1.08rem,1.7vw,1.3rem)}
.object-section .response-grid{gap:0;background:transparent}.object-section .response-grid article{min-height:0;padding:2.1rem 1.5rem 2.4rem;border:0;border-top:1px solid rgba(24,51,59,.2);border-radius:0;background:transparent}.object-section .response-grid article+article{border-left:1px solid rgba(24,51,59,.12)}
.response-story .mode-story-grid article{background:transparent;border-top:1px solid rgba(24,51,59,.18)}
.method-fold{width:min(100% - 40px,1180px);margin:0 auto 8rem;border-top:1px solid rgba(24,51,59,.2);border-bottom:1px solid rgba(24,51,59,.2);color:#18333b}.method-fold>summary{padding:1.45rem 0;cursor:pointer;font:600 clamp(1.05rem,2vw,1.35rem) Georgia,serif;list-style:none}.method-fold>summary::-webkit-details-marker{display:none}.method-fold>summary::after{content:"+";float:right;font:400 1.5rem/1 Inter,sans-serif}.method-fold[open]>summary::after{content:"−"}.method-fold .pilot-section{width:100%;padding:4rem 0 5rem;border-top:1px solid rgba(24,51,59,.12)}

@keyframes milo-lived-arrive{0%{left:14%;top:59%;opacity:0;transform:scale(.7)}30%{opacity:.58}68%{left:28%;top:55%;transform:rotate(2deg) scale(.88)}100%{left:35%;top:53%;opacity:.92;transform:rotate(-2deg)}}
@keyframes milo-lived-leave{0%{left:35%;top:53%;opacity:.92}70%{left:68%;top:58%;opacity:.46}100%{left:104%;top:60%;opacity:0;transform:scale(.72)}}
@keyframes milo-lived-reenter{0%{left:15%;top:60%;opacity:0;transform:scale(.7)}48%{opacity:.66}100%{left:35%;top:53%;opacity:.92;transform:rotate(-2deg)}}
@keyframes milo-home-lived{0%{left:35%;top:53%;opacity:.92;transform:rotate(3deg) scale(1)}48%{left:52%;top:45%;transform:rotate(-5deg) scale(.88)}100%{left:66%;top:31%;opacity:.66;transform:rotate(-2deg) scale(.72)}}
@keyframes milo-transfer-lived{0%{left:66%;top:31%;opacity:.66;transform:scale(.72)}65%{opacity:.4;filter:drop-shadow(0 0 18px rgba(226,240,195,.4))}100%{left:72%;top:28%;opacity:0;transform:scale(.35)}}

@media(max-width:680px){
  :root{--room-image:url("assets/ocean-room-base-v03-mobile.jpg")}.room-photo img{object-position:50% 50%}.ocean-wash{inset:63% 0 0}.wall-caustics{inset:68% -18% -7%}.first-ripple{left:28%;top:62%;width:14%}
  body.fish-peek:not(.wake-life) .fish-a{left:29%;top:53%;opacity:.76}.fish-a{left:20%;top:70%}.fish-b{left:45%;top:79%}.fish-c{left:70%;top:69%}
  .zone-shell{left:0;top:30%;width:23%;height:21%}.zone-reef{left:22%;top:31%;width:20%;height:20%}.zone-plush{left:58%;top:21%;width:42%;height:27%}
  .shell-event{left:2%;top:33%;width:88px;height:88px}.reef-event{left:26%;top:36%;width:68px;height:58px}.plush-glow{left:60%;top:23%;width:39%;height:24%}.sleep-breath{left:76%;top:33%;width:17%;height:8%}
  .milo{width:50vw;top:61%}body.milo-entered .milo{left:18%;top:59%}.milo-contact{left:19%;top:64%;width:46%;height:16%}
  body[data-mode="rest"] .milo{left:18%;top:59%;width:50vw}body.return-travel .milo{animation-name:milo-home-mobile-lived!important}body.return-transfer .milo{animation-name:milo-transfer-mobile-lived!important}
  .object-section .response-grid article+article{border-left:0}.method-fold{width:min(100% - 28px,1180px);margin-bottom:5rem}.method-fold .pilot-section{padding:3rem 0 4rem}
}
@keyframes milo-home-mobile-lived{0%{left:18%;top:59%;opacity:.92;transform:rotate(3deg) scale(1)}50%{left:36%;top:49%;transform:rotate(-4deg) scale(.82)}100%{left:59%;top:33%;opacity:.64;transform:scale(.64)}}
@keyframes milo-transfer-mobile-lived{0%{left:59%;top:33%;opacity:.64;transform:scale(.64)}100%{left:72%;top:29%;opacity:0;transform:scale(.3)}}
@media(prefers-reduced-motion:reduce){body.fish-peek .fish-field{transition:opacity 1.2s ease}.wall-caustics{display:none}body.milo-entered .milo{left:35%;top:53%;opacity:.9}}
@media(max-width:680px) and (prefers-reduced-motion:reduce){body.milo-entered .milo{left:18%;top:59%}}

/* Rest Night Lighting Patch v0.3.1 — Rest is a room time-of-day transition. */
.room-photo-day{z-index:0}.room-photo-night{z-index:1;opacity:0;pointer-events:none;transition:opacity 1.8s cubic-bezier(.32,.02,.24,1)}
body[data-room-light="day"] .room-photo-night{opacity:0;transition-duration:1.7s}
body[data-room-light="dusk"] .room-photo-night{opacity:.48;transition-duration:1.8s}
body[data-room-light="night"] .room-photo-night{opacity:1;transition-duration:2.3s}
body.rest-exiting[data-room-light="dusk"] .room-photo-night{opacity:.48;transition-duration:1.7s}

/* Ambient, window, water, and creature systems respond independently from the paired base art. */
body[data-room-light="day"] .room-dusk{opacity:1;background:linear-gradient(180deg,rgba(28,23,19,.01),rgba(13,31,31,.03) 58%,rgba(12,43,44,.065))}
body[data-room-light="dusk"] .room-dusk{opacity:.34;background:linear-gradient(180deg,rgba(17,26,39,.12),rgba(12,24,37,.21) 58%,rgba(8,25,34,.29));transition:background 1.8s ease,opacity 1.8s ease}
body[data-room-light="night"] .room-dusk{opacity:.12;background:linear-gradient(180deg,rgba(3,10,22,.08),rgba(4,12,23,.16));transition:background 2.3s ease,opacity 2.3s ease}
body[data-mode="rest"][data-room-light="day"] .ocean-wash{opacity:.35}
body[data-room-light="dusk"] .ocean-wash{opacity:.045!important;transition:opacity 1.8s ease}
body[data-room-light="dusk"] .wall-caustics{opacity:.025!important;transition:opacity 1.8s ease}
body[data-room-light="night"] .ocean-wash{opacity:.01!important;transition:opacity 2.3s ease}
body[data-room-light="night"] .wall-caustics,body[data-room-light="night"] .window-depth{opacity:0!important;transition:opacity 2.3s ease}
body.rest-complete[data-room-light="night"] .ocean-wash,body.rest-complete[data-room-light="night"] .wall-caustics{opacity:0!important}

/* Fish remain briefly in DAY/DUSK, then leave before Milo begins his return. */
body[data-mode="rest"][data-room-light="day"]:not(.fish-exit) .fish-field,body[data-mode="rest"][data-room-light="dusk"]:not(.fish-exit) .fish-field{opacity:1!important}
body.fish-exit .fish-field,body[data-room-light="night"] .fish-field{opacity:0!important}

/* The paired night asset supplies the practical Shell glow; no separate fantasy pulse is added. */
body[data-room-light="dusk"] .shell-event,body[data-room-light="night"] .shell-event,body.rest-complete .shell-event{opacity:0!important;animation:none!important}

@media(prefers-reduced-motion:reduce){
  .room-photo-night{transition:opacity 2s ease!important}
  body[data-room-light="dusk"] .room-dusk,body[data-room-light="night"] .room-dusk{transition:background 2s ease,opacity 2s ease!important}
}