.harbour-section{background:#e9efff;padding:56px 5%;color:var(--ink)}.harbour{max-width:1120px;margin:0 auto;border:1px solid #2854e826;border-radius:24px;overflow:hidden;background:#d6e8fb;position:relative}.harbour-stage{height:clamp(620px,74vw,960px);position:relative;overflow:hidden}.harbour-stage canvas{width:100%;height:100%;display:block;position:absolute;inset:0;opacity:0;cursor:grab}.harbour-stage canvas:active{cursor:grabbing}.is-ready .harbour-stage canvas{opacity:1}.harbour-poster{width:100%;height:100%;object-fit:contain;background:#506c70;display:block}.is-ready .harbour-poster{visibility:hidden}.harbour-stamp{position:absolute;top:25px;left:27px;pointer-events:none;z-index:1;font-size:.65rem;letter-spacing:.13em;font-weight:700;color:#eef1cf;display:flex;align-items:center;gap:10px}.harbour-stamp>span{font-size:1.5rem;line-height:1}.harbour-hint{position:absolute;bottom:20px;left:27px;right:27px;pointer-events:none;z-index:1;font-size:.76rem;margin:0;line-height:1.5;color:var(--ink)}.harbour-controls{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:15px 21px;background:#fbfbf8;border-top:1px solid #2854e826}.harbour-controls[hidden]{display:none}.harbour-views,.harbour-settings{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.harbour-controls button{min-height:44px;padding:9px 14px;border:1px solid #2854e833;border-radius:28px;background:transparent;color:var(--ink);font-size:.75rem;white-space:nowrap}.harbour-controls button:hover{border-color:var(--blue)}.harbour-views button[aria-pressed=true]{background:var(--blue);color:white;border-color:var(--blue)}.harbour-settings button:first-child{background:var(--yellow);border-color:transparent}.harbour.is-night .harbour-stamp,.harbour.is-night .harbour-hint{color:var(--yellow)}@media(max-width:700px){.harbour-section{padding:40px 6%}.harbour{border-radius:17px}.harbour-stage{height:540px}.harbour-stamp{top:20px;left:20px;font-size:.54rem;letter-spacing:.1em}.harbour-hint{left:20px;right:20px;bottom:17px;font-size:.7rem;max-width:250px}.harbour-controls{padding:14px;gap:11px;justify-content:center}.harbour-controls button{padding-inline:12px;font-size:.7rem}.harbour-settings{justify-content:center}}@media print{.harbour-stage canvas,.harbour-controls,.harbour-hint{display:none!important}.harbour-poster{visibility:visible!important}.harbour-stage{height:400px}}

.harbour-hint{right:auto;width:fit-content;max-width:calc(100% - 54px);background:#fbfbf8df;border-radius:20px;padding:7px 12px}.harbour.is-night .harbour-hint{background:#15234be8}

/* The public world has a quiet glass tray inside the picture. */
[data-harbour-theme=solarpunk] .harbour-stage{height:clamp(570px,56vw,720px)}
[data-harbour-theme=solarpunk] .harbour-poster{object-fit:cover;background:#aebfe6}
[data-harbour-theme=solarpunk] .harbour-controls{position:absolute;bottom:20px;right:22px;z-index:2;gap:5px;padding:6px;border:1px solid #ffffff70;border-radius:30px;background:#f4f5ff66;backdrop-filter:blur(16px);flex-wrap:nowrap}
[data-harbour-theme=solarpunk] .harbour-controls button{display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:0;border:0;background:transparent;color:#15234b}
[data-harbour-theme=solarpunk] .harbour-controls button:hover,[data-harbour-theme=solarpunk] .harbour-controls button[aria-pressed=true]{background:#effb80b8}
.harbour-controls svg{display:block;width:21px;height:21px}.icon-play{display:none}
[data-harbour-pause][aria-pressed=true] .icon-play{display:block}[data-harbour-pause][aria-pressed=true] .icon-pause{display:none}
[data-harbour-theme=solarpunk] .harbour-hint{bottom:29px;background:#f4f5ff88;color:#15234b;font-size:.65rem;padding:7px 10px;max-width:300px}
[data-harbour-theme=solarpunk] .harbour-stamp{color:#15234b}
.harbour-controls button:focus-visible{outline:2px solid #2854e8;outline-offset:2px}
@media(max-width:700px){[data-harbour-theme=solarpunk] .harbour-stage{height:580px}[data-harbour-theme=solarpunk] .harbour-controls{bottom:17px;left:50%;right:auto;transform:translateX(-50%);gap:2px;padding:5px}[data-harbour-theme=solarpunk] .harbour-controls button{width:44px;height:44px;min-height:44px}[data-harbour-theme=solarpunk] .harbour-hint{bottom:80px;left:20px;font-size:.6rem;max-width:calc(100% - 40px)}}
.harbour[data-harbour-theme=solarpunk].is-night .harbour-stamp{color:#15234b}
.harbour[data-harbour-theme=solarpunk].is-night .harbour-hint{color:#15234b;background:#f4f5ffc9}
.harbour[data-harbour-theme=solarpunk][data-weather=night] .harbour-stamp{color:#effb80}
.icon-contract{display:none}
[data-harbour-fullscreen][aria-pressed=true] .icon-expand{display:none}
[data-harbour-fullscreen][aria-pressed=true] .icon-contract{display:block}
.harbour[data-harbour-theme=solarpunk]:fullscreen,.harbour[data-harbour-theme=solarpunk].is-expanded{max-width:none;width:100vw;height:100dvh;border:0;border-radius:0}
.harbour[data-harbour-theme=solarpunk].is-expanded{position:fixed;inset:0;z-index:10000}
.harbour[data-harbour-theme=solarpunk]:fullscreen .harbour-stage,.harbour[data-harbour-theme=solarpunk].is-expanded .harbour-stage{height:100%}
.harbour-phases{display:flex;gap:2px;padding:2px;border:1px solid #15234b24;border-radius:24px;background:#ffffff30}
[data-harbour-theme=solarpunk] .harbour-phases button{width:36px;height:36px;min-height:36px}
@media(max-width:700px){[data-harbour-theme=solarpunk] .harbour-controls button{width:38px}[data-harbour-theme=solarpunk] .harbour-phases button{width:34px;height:40px;min-height:40px}.harbour-phases{gap:0;padding:1px}}
@media(max-width:360px){[data-harbour-theme=solarpunk] .harbour-controls button{width:32px}[data-harbour-theme=solarpunk] .harbour-phases button{width:30px}}

.harbour-sound{position:absolute;top:22px;right:22px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #ffffff70;border-radius:50%;background:#f4f5ff66;backdrop-filter:blur(16px);color:#15234b}.harbour-sound[hidden]{display:none}.harbour-sound svg{display:block;width:21px;height:21px}.harbour-sound:hover,.harbour-sound[aria-pressed=true]{background:#effb80b8}.harbour-sound:focus-visible{outline:2px solid #2854e8;outline-offset:2px}.icon-sound-on{display:none}[data-harbour-sound][aria-pressed=true] .icon-sound-on{display:block}[data-harbour-sound][aria-pressed=true] .icon-sound-off{display:none}
@media(max-width:700px){.harbour-sound{top:17px;right:17px}[data-harbour-theme=solarpunk] .harbour-stamp{max-width:calc(100% - 90px);font-size:.49rem;letter-spacing:.07em}}