:root{color-scheme:dark;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#071a23;color:#e7e8dc}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{background:radial-gradient(ellipse at 50% 55%,#123b40,#071a23 75%)}
.scene,.harbour,canvas,.atmosphere,.edge-shade{position:absolute;inset:0;width:100%;height:100%}
.scene{overflow:hidden}
.harbour{object-fit:cover;object-position:center;filter:saturate(.9) brightness(.88);transition:filter 2s ease}
canvas,.atmosphere,.edge-shade{pointer-events:none}
.atmosphere{inset:-10%;width:120%;height:120%;opacity:.36;background:radial-gradient(ellipse at 28% 37%,#78b5ad1f,transparent 42%),radial-gradient(ellipse at 68% 68%,#dba4490c,transparent 34%);animation:drift 27s ease-in-out infinite alternate;mix-blend-mode:screen}
.edge-shade{background:linear-gradient(180deg,#04121f38,transparent 25%,transparent 75%,#04121f59),radial-gradient(ellipse,transparent 40%,#04121f2b)}
header{position:absolute;top:calc(30px + env(safe-area-inset-top));left:calc(36px + env(safe-area-inset-left));z-index:2}
header a{font-size:15px;letter-spacing:-.5px;color:#eceddf;text-decoration:none;text-shadow:0 1px 15px #04131f}
header span{color:#e8b86c}
.controls{position:absolute;z-index:2;right:calc(30px + env(safe-area-inset-right));bottom:calc(28px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;padding:7px;border:1px solid #c2dbd01f;border-radius:11px;background:#071923d9;box-shadow:0 5px 30px #0003;backdrop-filter:blur(14px)}
.controls[hidden]{display:none}
.weather{display:flex;gap:3px}
button{appearance:none;border:1px solid transparent;border-radius:6px;padding:10px 12px;background:transparent;color:#b6c7c9;font:inherit;font-size:11px;line-height:1;min-height:37px;cursor:pointer;transition:color .2s,background .2s,border-color .2s}
button[aria-pressed=true]:not(#motion){background:#cce4dc12;border-color:#bad7ce17;color:#f0e4cc}
button:hover{color:#fff;background:#cce4dc0c}
button:focus-visible,header a:focus-visible{outline:2px solid #ecc181;outline-offset:4px}
.divider{width:1px;height:18px;background:#c2dbd01f}
#motion{display:flex;align-items:center;gap:8px;min-width:85px;justify-content:center}
.motion-icon{font-family:Arial,sans-serif;font-size:12px;color:#e0bf88;width:12px}
.calm .harbour{filter:saturate(.86) brightness(1)}
.calm .atmosphere{opacity:.23}
.paused .atmosphere{animation-play-state:paused}
@keyframes drift{from{transform:translate(-1.5%,-1%)}to{transform:translate(1.5%,1%)}}
@media(max-width:600px){header{top:calc(23px + env(safe-area-inset-top));left:calc(23px + env(safe-area-inset-left))}header a{font-size:14px}.controls{right:calc(18px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));padding:6px;gap:6px}button{min-height:40px;padding:11px}.harbour{object-position:50% 50%}}
@media(prefers-reduced-motion:reduce){.atmosphere{animation:none}.harbour{transition:none}button{transition:none}}
@media(max-aspect-ratio:1/1){.harbour{object-position:65% 50%}}