/* Rectangular composition, brighter common palette, finite travelling sprites. */
:root{background:#f7f8ef;color:#204654;--ink:#204654}
.scene-shell{border-radius:0;border-color:#9fc8d4;background:#6170e9;box-shadow:0 16px 40px #25638124}
.scene{--light:brightness(1.1) saturate(1.14)}
.sky-day{background:linear-gradient(165deg,#7463f4 0%,#69bafc 39%,#b9f3ff 73%,#5bcbea 100%)}
.sky-dusk{background:linear-gradient(164deg,#6856e5,#b47aea 36%,#ffd4c5 72%,#75cff1)}
.sky-night{background:linear-gradient(158deg,#33307f,#6054d3 35%,#83a3f0 74%,#3d98dc)}
[data-sky=day].scene{--star-opacity:.2;--light:brightness(1.12) saturate(1.14)}
[data-sky=dusk].scene{--star-opacity:.52;--light:brightness(1.07) saturate(1.11)}
[data-sky=night].scene{--star-opacity:.95;--light:brightness(1.01) saturate(1.1)}
.sky-grain{opacity:.04}
.ocean-plane{position:absolute;z-index:1;inset:76% 0 0;background:linear-gradient(#25b5ed,#098ed7 64%,#0468bb);filter:var(--light);transition:filter 2s}
.island-wrap{position:absolute;z-index:3;left:54%;top:66.3%;width:43%;pointer-events:none}
.island-wrap:before{content:"";position:absolute;left:-6%;width:113%;height:16%;bottom:-4%;border-radius:50%;background:#0aa7dd;border:2px solid #b2f8ff;box-shadow:0 3px 0 #006cc1,0 6px 0 -2px #83e5ff;transform:rotate(-2deg);z-index:-1}
.island-wrap>.island{width:100%;height:auto}
.coastal-ripple{position:absolute;left:0;right:-5%;height:11%;bottom:-4%;border:1px solid #d4fcff;border-top:0;border-radius:50%;transform:rotate(-1deg);animation:coastRipple 8s ease-in-out infinite alternate;opacity:.9}
.treasure-map{position:absolute;left:0;top:0;width:10.5%;z-index:2;pointer-events:none;will-change:transform;transform:translate(820%,450%)}
.ambient-particle{position:absolute;left:0;top:0;pointer-events:none;will-change:transform,opacity;filter:var(--light);opacity:0}
.ambient-particle img{width:100%;height:auto}.particle-whale{filter:var(--light) saturate(.94)}
.particle-butterfly img{animation:wing 1.7s ease-in-out infinite alternate;transform-origin:50% 55%}
.particle-cloud{filter:var(--light) saturate(1.03)}.particle-paper{transform-origin:50% 50%}
.particle-meteor{height:2px;border-radius:100%;background:linear-gradient(90deg,#fffdf3,#d5fcff 12%,#a4ecff55 43%,transparent);filter:drop-shadow(0 0 4px #b7e9ff)}
.particle-meteor:before{content:"";position:absolute;left:0;top:-1px;width:4px;height:4px;border-radius:50%;background:#fff}
.particle-fog{height:11%;background:radial-gradient(ellipse at 32% 55%,#f2fcff,transparent 65%),radial-gradient(ellipse at 70% 60%,#fff,transparent 62%);filter:blur(8px)}
/* One fixed aperture and photo; optical overlays never contain photo pixels. */
.clock{z-index:5;top:6.6%;filter:drop-shadow(0 7px 10px #17376a35);--photo-x:50%;--photo-y:47%;--photo-zoom:1}
.clock-window{inset:12.8%;background:#4a91ac;isolation:isolate}
.photo-layer{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:50%}
.photo-layer>#clockPhoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--photo-x) var(--photo-y);transform:scale(var(--photo-zoom));transform-origin:50% 50%;filter:saturate(1.04) brightness(1.03)}
.glass-effects{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .5s}
.glass-shadow{position:absolute;inset:0;box-shadow:inset 0 0 16px 5px #12518d45,inset 3px 7px 13px #113c755c;border-radius:50%}
.glass-effects>.glass-ripples{position:absolute;inset:0;width:100%;height:100%;opacity:.65;mix-blend-mode:screen;animation:glassTurn 90s linear infinite}
.glass-highlight{position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,#f3fbff30,transparent 36%,transparent 72%,#5e91ec12),radial-gradient(ellipse at 22% 17%,#fff9dd30,transparent 32%)}
.clock-frame{filter:saturate(.92) brightness(1.02)}.clock-hand{filter:saturate(.96) brightness(1.02)}.clock-hub{filter:saturate(.96)}
.scope-window{z-index:2;background:transparent;transform:none;transition:opacity .7s;pointer-events:none}
.scope-shade{box-shadow:inset 0 0 22px 7px #16253c75}.scene[data-view=scope] .glass-effects{opacity:.5}
.wave-back{z-index:2;bottom:0;height:26%}.wave-mid{z-index:8}.wave-front{z-index:9}
.voyage-group{width:76%;left:1%}.bag-anchor{position:absolute;left:27.8%;top:63.6%;width:1px;height:1px;pointer-events:none}
.lens-spark{width:5px;height:5px;box-shadow:0 0 10px #ffefa6;animation-duration:6s}
.scene-signature{color:#e5ffffda}
/* Shared, restrained UI colors and always-available photograph chooser. */
.brand svg{color:#318c91}.quiet-button{color:#4a8589}.sky-controls{border-color:#c4ddd4;margin-bottom:24px}
.sky-controls button[aria-pressed=true]{color:#287b76}.primary-button{background:#2d827c;border-color:#2d827c}.primary-button:hover{background:#206f69}.intro h1{font-size:clamp(31px,3vw,39px);line-height:1.6;margin:17px 0}.intro-copy{margin-bottom:22px;color:#73938a}.preview-letter{margin-top:28px;padding-top:18px}.panel-footer{margin-top:27px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.photo-picker{margin:0 0 25px;padding-bottom:20px;border-bottom:1px solid #c9dfd2}
.picker-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;gap:10px}
.picker-heading h2{font-size:12px;letter-spacing:.1em;font-weight:400;margin:0;color:#4d8e87}.picker-heading>span{font-size:9px;letter-spacing:.06em;color:#789b87}
.photo-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-height:186px;overflow:auto;scrollbar-width:thin;padding:2px}
.photo-choice{padding:0;background:#fff;border:2px solid transparent;border-radius:4px;overflow:hidden;position:relative;aspect-ratio:1.35;min-width:0}
.photo-choice img{display:block;width:100%;height:100%;object-fit:cover;opacity:.83;transition:opacity .3s}
.photo-choice[aria-pressed=true]{border-color:#55a79c;box-shadow:0 0 0 1px #55a79c33}.photo-choice[aria-pressed=true] img,.photo-choice:hover img{opacity:1}
.photo-choice span{position:absolute;inset:auto 0 0;padding:5px 1px;color:#fff;font-size:8px;letter-spacing:.05em;background:linear-gradient(transparent,#19413b88);text-shadow:0 1px 3px #113b3b}
.photo-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.upload-photo{display:flex;align-items:center;gap:7px;color:#4c9a8b;cursor:pointer;font-size:10px;padding:7px 0}.upload-photo:hover{color:#216c65}.upload-photo:has(+input:focus-visible){outline:2px solid #269aad;outline-offset:3px}
.photo-settings{margin-top:7px}.photo-settings summary{font-size:9px;color:#76987d;cursor:pointer;letter-spacing:.05em;padding:5px 0}
.photo-setting-fields{padding:10px 11px 7px;background:#edf5e9;border-radius:4px;margin-top:5px}.photo-setting-fields>label{font-size:9px;color:#648b71;display:flex;justify-content:space-between}.photo-setting-fields>input{display:block;width:100%;margin:7px 0 12px;accent-color:#429e8b;height:12px}
.setting-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}.glass-toggle{font-size:9px;color:#568369;display:flex;align-items:center;gap:5px}.glass-toggle input{accent-color:#429e8b;margin:0}.photo-setting-fields p{font-size:8px;color:#7f9b7d;line-height:1.8;margin:10px 0 0}
@keyframes glassTurn{to{transform:rotate(360deg)}}@keyframes coastRipple{from{transform:translateY(-1px) scale(.96);opacity:.85}to{transform:translateY(3px) scale(1.04);opacity:.5}}@keyframes wing{from{scale:1 .93}to{scale:1 1.04}}
@media(max-width:1050px){.intro h1{font-size:31px}.sky-controls{margin-bottom:22px}.photo-picker{margin-bottom:21px;padding-bottom:17px}}
@media(max-width:760px){.scene-shell{border-radius:0;box-shadow:0 12px 30px #25638124}.photo-choice{aspect-ratio:1.6}.photo-list{max-height:220px}.photo-actions{margin-top:8px}.upload-photo{padding:9px 0}.photo-setting-fields>label,.glass-toggle{font-size:10px}.photo-setting-fields>input{height:18px}.intro h1{font-size:33px}.sky-controls{max-width:none}}