.scene{height:440px;isolation:isolate;box-shadow:0 18px 48px #183b3212}.scene canvas{will-change:auto}.scene:after{background:linear-gradient(180deg,#02111970 0%,#02111912 26%,transparent 50%,#02111910 70%,#0211198a 100%)}.scene-top small{font-size:9px;letter-spacing:2.8px}.scene-top strong{text-shadow:0 2px 18px #0005;font-size:27px;font-weight:400}.scene-buttons{align-items:center}.scene-buttons button,.scene-buttons select{min-height:34px;font-size:10px;border:1px solid #ffffff35;background:#091f2570;color:#f5f9f4;backdrop-filter:blur(14px);border-radius:22px;padding:8px 12px}.scene-buttons select{max-width:120px;cursor:pointer}.scene-buttons option{color:#eaf1ec;background:#172c32}.scene-bottom p{font-size:11px;letter-spacing:.2px;text-shadow:0 1px 7px #0008}.scene-note{letter-spacing:1.2px;text-transform:uppercase;font-size:8px}.scene-top,.scene-bottom,.immersive .player{transition:opacity .65s,transform .65s}.scene #wake-scene{position:absolute;bottom:27px;left:50%;transform:translateX(-50%);z-index:5;opacity:0;pointer-events:none;font-size:10px;background:#081a2255;backdrop-filter:blur(12px);border:1px solid #ffffff29;letter-spacing:.5px;color:#e8eeea}
.immersive .scene{height:100dvh;box-shadow:none}.immersive .scene-top{top:max(35px,env(safe-area-inset-top));left:40px;right:40px}.immersive .scene-top strong{font-size:34px}.immersive .scene-bottom{bottom:142px;left:40px;right:40px}.immersive .player{background:#0c202bb3;color:#edf4ef;border:1px solid #ffffff26;box-shadow:0 10px 45px #0003;backdrop-filter:blur(24px);bottom:max(28px,env(safe-area-inset-bottom));border-radius:19px}.immersive .player #play{background:#d7e5d9;color:#152b2a}.immersive .player .now small,.immersive .player .timer select,.immersive .player .master{color:#c1cfc7}.immersive .player .reset{color:#d8e4dd;border-color:#ffffff2a}.immersive .player .timer{border-color:#ffffff26}.immersive .player .timer option{background:#172c32;color:#edf4ef}.immersive .player input[type=range]{background:#b7c8bf40}.immersive .player input[type=range]::-webkit-slider-thumb{background:#ccdfd1}.immersive .player .bars i{background:#bfd8c6}.immersive.scene-idle .scene-top,.immersive.scene-idle .scene-bottom{opacity:0;pointer-events:none}.immersive.scene-idle .player{opacity:0;pointer-events:none;transform:translate(-50%,20px)}.immersive.scene-idle #wake-scene{opacity:.65;pointer-events:auto}.immersive.scene-idle #wake-scene:hover,.immersive.scene-idle #wake-scene:focus-visible{opacity:1}
/* Place frames sit in front of the landscape with depth, wood grain and soft light. */
.scene[data-place=cabin] .place-frame{box-shadow:inset 0 0 70px 15px #140c0cb0;background:linear-gradient(90deg,#2b201a 0%,#604334 1%,#3a2b21 1.8%,transparent 2%,transparent 49.45%,#6d4e3b 49.55%,#32241c 50%,#654a36 50.45%,transparent 50.55%,transparent 98%,#3a2b21 98.2%,#604334 99%,#2b201a 100%),linear-gradient(transparent 53.8%,#86644a 54%,#33251d 54.7%,#4c382b 55.2%,transparent 55.4%),linear-gradient(transparent 95%,#72543c 95.2%,#3a291f 97%,#211811 100%);border-top:10px solid #3b2d24;border-bottom:0}.scene[data-place=cabin] .place-frame:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(91deg,#ffffff02 0px,transparent 1px,transparent 5px);mix-blend-mode:soft-light}.scene[data-place=tent] .place-frame{background:none;box-shadow:inset 0 0 55px #0b100e70}.scene[data-place=tent] .place-frame:before,.scene[data-place=tent] .place-frame:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,#b6a88a08 0px,#00000008 2px,transparent 4px),linear-gradient(100deg,#172a24,#64715b 30%,#253a30 45%);clip-path:polygon(0 0,24% 0,4% 100%,0 100%);filter:drop-shadow(5px 0 8px #000)}.scene[data-place=tent] .place-frame:after{transform:scaleX(-1)}.scene[data-place=beach] .place-frame{background:linear-gradient(transparent 94%,#5b484153 94.5%,#cab59280 95%,#51433a9c 96%,#251f1d90 100%)}.scene[data-place=garden] .place-frame{border:0;border-radius:0;background:radial-gradient(ellipse at 0% 100%,#092d2080,transparent 35%),radial-gradient(ellipse at 100% 100%,#092d2080,transparent 35%)}
@media(max-width:700px){.scene{height:420px}.scene-top{align-items:flex-start;flex-direction:column;gap:15px;left:20px;right:20px}.scene-top strong{font-size:25px}.scene-buttons{gap:6px}.scene-buttons button,.scene-buttons select{font-size:9px;padding:8px 10px;min-height:32px}.scene-buttons select{max-width:100px}.immersive .scene-top{left:24px;right:24px;top:max(30px,env(safe-area-inset-top))}.immersive .scene-top strong{font-size:30px}.immersive .scene-bottom{left:24px;right:24px;bottom:130px}.immersive .scene-bottom p{max-width:100%}.immersive .scene #wake-scene{bottom:max(25px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.scene-top,.scene-bottom,.immersive .player{transition:none}}
.scene[data-place=hacker] .place-frame{opacity:1;background:radial-gradient(ellipse at 50% 90%,#11453214,transparent 60%);box-shadow:inset 0 0 85px #010b08a0}.scene[data-place=hacker] .scene-top small{color:#b9e4c6}.scene[data-place=hacker] .scene-note{color:#a9d6b8}

.filters{flex-wrap:wrap}.scene[data-place=sailing] .place-frame,.scene[data-place=harbor] .place-frame{opacity:1;background:linear-gradient(transparent 88%,#18383d22);box-shadow:inset 0 0 45px #061c2118}.scene[data-place=drive] .place-frame{opacity:1;background:linear-gradient(transparent 82%,#06101550);box-shadow:inset 0 0 40px #05141c40}