/* Keep the whole illustration and its hotspots in one coordinate system. */
html { overflow-y: auto; scrollbar-gutter: auto; }
body { margin: 0; background: #e8dec7; }
main { padding: 0; min-height: calc(100svh - var(--site-shell-height, 0px)); display: grid; place-items: center; }
.shore {
  width: min(100%, calc((100svh - var(--site-shell-height, 0px)) * 16 / 9));
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0;
  margin: 0 auto;
  container-type: inline-size;
  border-radius: 0;
  box-shadow: none;
}
.scene-account { position:absolute; z-index:6; display:flex; align-items:center; gap:10px; font-size:clamp(11px,1.2cqw,14px); color:#34432e; text-shadow:0 1px 1px #fff8e6,1px 0 1px #fff8e6,-1px 0 1px #fff8e6,0 0 5px #fff8e6; isolation:isolate; }
.scene-account a,.scene-account button { position:relative; isolation:isolate; }
.scene-account a::before,.scene-account button::before { content:""; position:absolute; inset:1px -4px; z-index:-1; pointer-events:none; background:radial-gradient(ellipse,#fff5dcd9 15%,#fff5dc88 55%,transparent 75%); }
.scene-account a,.scene-account button { background:transparent; border:0; border-radius:0; padding:9px 2px; color:inherit; font:inherit; text-shadow:inherit; text-decoration:none; }
.scene-account a:hover,.scene-account button:hover { text-decoration:underline; text-underline-offset:4px; }
.nav-divider { opacity:.5; font-size:11px; }
.scene-account { bottom:2%; right:3%; }
.scene-account #save-note:empty { display:none; }
.scene-account #save-note { max-width:200px; background:#fff8e3; font-size:11px; }
.shore-illustration { inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
.intro { top: 4%; left: 4%; right: auto; width: 53%; padding: 0; background: transparent; backdrop-filter: none; text-shadow:0 1px 2px #fff8e8,0 0 8px #fff5dfe6; isolation:isolate; }
.intro::before { content:""; position:absolute; inset:-1.5cqw -2cqw; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 30% 45%,#fff4dd9c,transparent 75%); }
.intro h1,.intro > p:last-child { color:#3e4a38; }
.intro h1 { font-size: clamp(15px, 3.5cqw, 44px); line-height: 1.25; letter-spacing: 0; margin: 1cqw 0 .25cqw; white-space: normal; }
.intro > p:last-child { font-size: clamp(8px, 1.1cqw, 13px); line-height: 1.7; margin: 0; }
.resident { top: 4%; left: auto; right: 3%; width: max-content; max-width: 30%; padding: .85cqw 1cqw; background:#fff8e3a8; border-color:#bfb39366; box-shadow:none; border-radius:4px; color:#627059; }
.resident strong { font-size: clamp(9px, 1.3cqw, 15px); display: block; margin: 0; }
.resident small { font-size: clamp(8px, 1.1cqw, 12px); display: block; }
.scene-object { padding: 0; gap: 0; min-width: 0; min-height: 0; }
.drifting { top: 44%; left: 44%; bottom: auto; width: 15%; height: 14%; }
.drifting .object-label { position: absolute; top: 100%; }
.desk { left: 10%; top: auto; bottom: 8%; width: 28%; height: 32%; }
.mailbox { right: 11%; top: auto; bottom: 12%; width: 16%; height: 40%; }
.object-label { padding: .8cqw 1.2cqw; font-size: clamp(11px, 1.4cqw, 16px); letter-spacing: 0; }
.object-label b { margin-left: .6cqw; }
.mode-picker { border: 0; padding: 0; margin: 0 0 22px; display: flex; gap: 18px; }
.mode-picker label { position: relative; display: block; margin: 0; cursor: pointer; }
.mode-picker input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; padding: 0; }
.mode-picker label span { display: block; padding: 8px 2px; color: #aaa18b; border-bottom: 2px solid transparent; font-size: 13px; }
.mode-picker input:checked + span { color: #526a54; border-color: #91a17d; }
.mode-picker input:focus-visible + span { outline: 2px solid #81936e; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 480px) {
  .scene-account { gap:6px; bottom:1%; }
  .scene-account a,.scene-account button { padding:8px 2px; min-height:36px; }
  .intro > p:last-child { display:block; font-size:9px; }
  .intro { width: 56%; top:4%; padding:3px 6px; }
  .resident { top: 4%; width:max-content; max-width:30%; padding:5px; }
  .drifting { width: 24%; left: 40%; }
  .scene-object { min-height: 44px; }
  .object-label { padding: 7px 6px; }
}