/* A quiet doorway to other projects, separate from the scene itself. */
.elsewhere { position:fixed; right:24px; bottom:calc(5px + env(safe-area-inset-bottom)); z-index:40; font-family:Arial,sans-serif; }
.elsewhere-toggle { min-height:44px; padding:0 8px; border:0; background:transparent; color:rgba(235,232,217,.65); font:12px monospace; letter-spacing:.04em; cursor:pointer; }
.elsewhere-toggle:hover,.elsewhere-toggle[aria-expanded="true"] { color:#fff9eb; }
.elsewhere-panel { position:absolute; right:0; bottom:52px; width:min(310px,calc(100vw - 46px)); padding:25px; box-sizing:border-box; border:1px solid rgba(237,234,213,.16); border-radius:18px; background:rgba(17,24,26,.88); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); box-shadow:0 18px 60px #0005; color:#e8e4d8; animation:elsewhere-in .2s ease-out; }
.elsewhere-panel[hidden] { display:none; }
.elsewhere-panel h2 { margin:0 0 19px; font:italic 21px Georgia,serif; font-weight:normal; color:#c9c7ba; }
.elsewhere-panel a { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 0; color:#f1ecdf; text-decoration:none; font-size:16px; border-top:1px solid #ffffff12; }
.elsewhere-panel a span { color:#999f96; }
.elsewhere-panel a:hover { color:#fff; }
.elsewhere :focus-visible { outline:2px solid #c2cfc2; outline-offset:5px; border-radius:4px; }
@keyframes elsewhere-in { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .elsewhere-panel { animation:none; } }

/* Shared site identity stays outside the fading scene layers. */
.site-domain { position:fixed; z-index:40; left:38px; top:max(24px,env(safe-area-inset-top)); color:#f1eee5; font:15px Arial,Helvetica,sans-serif; letter-spacing:-.4px; pointer-events:none; }
@media(max-width:520px) { .site-domain { left:23px; } }
@media(max-height:480px) { .site-domain { top:12px; } }

/* Leave a dedicated right-hand slot for Elsewhere beside the cradle controls. */
#site .sp-cradle footer {
  right: max(7%, 150px);
  flex-wrap: wrap;
}
#site .sp-cradle .cradle-actions { flex-shrink: 0; }

/* Desktop landscape controls share a row with Elsewhere; reserve its space. */
@media (min-width: 521px) {
  #site .sp-world footer { right: 150px; }
}

.doorway-links { display:flex; align-items:center; white-space:nowrap; }
.doorway-divider { color:#ebe8d950; font:12px monospace; padding:0 3px; }
.elsewhere-panel { position:fixed; right:24px; bottom:var(--panel-bottom,80px); max-height:calc(100dvh - 110px); overflow-y:auto; }
.about-panel { width:min(370px,calc(100vw - 46px)); padding:27px; }
.about-panel h2 { padding-right:28px; margin-bottom:20px; }
.about-panel p { font:15px/1.65 Arial,sans-serif; margin:0 0 16px; color:#e8e4d8; }
.about-panel p:last-child { margin-bottom:0; }
.about-panel p a { display:inline; font:inherit; padding:0; border:0; text-decoration:underline; text-decoration-color:#a9b6ac88; text-underline-offset:3px; }
.panel-close { position:absolute; right:12px; top:10px; width:44px; height:44px; background:none; border:0; color:#d2d0c5; font:25px Arial; cursor:pointer; }
.elsewhere.compact .doorway-links { flex-direction:column; align-items:flex-end; }
.elsewhere.compact .doorway-divider { display:none; }
@media(max-width:520px) { .elsewhere, .elsewhere-panel { right:18px; } }
/* Keep the panel below the top navigation, including short landscape screens. */
.elsewhere-panel { max-height:calc(100dvh - var(--panel-bottom,80px) - 80px); }

/* One stable shared navigation strip for every scene. */
.elsewhere { bottom:calc(8px + env(safe-area-inset-bottom)); }
.elsewhere-panel { --panel-bottom:calc(60px + env(safe-area-inset-bottom)); }

/* Landscape controls mirror the shared links, with the interaction hint above. */
#site .sp-world footer { position:fixed; left:38px; right:auto; bottom:calc(8px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding:0; translate:none; }
#site .sp-world footer .sp-dawn { min-height:44px; padding:0; }
#site .sp-world footer .sp-world-label { line-height:1.7; }
.parallax-gesture-hint { font-size:10px; opacity:.7; }
#site .sp-world { touch-action:none; }
@media(max-width:520px) { #site .sp-world footer { left:23px; } }
#site .sp-tools .sp-wave { width:72px; height:72px; flex:none; border-radius:50%; border:1px solid #72b397; background:radial-gradient(circle at 35% 25%,#214839,#101d17); color:#d9f7e3; font:11px Arial,sans-serif; cursor:pointer; }
#site .sp-tools .sp-wave:hover { border-color:#c1ffdc; box-shadow:0 0 24px #8ee3ac25; }
#site .sp-tools .sp-wave:disabled { opacity:.65; cursor:default; }
@media(max-width:600px) {
  #site .sp-machine footer { flex-direction:column; flex-wrap:nowrap; align-items:flex-start; gap:12px; }
  #site .sp-machine footer nav { flex-wrap:nowrap; gap:23px; }
  #site .sp-machine footer nav a { font-size:13px; }
  #site .sp-machine .sp-tools { align-self:flex-end; gap:12px; }
  #site .sp-machine .sp-tools button { width:64px; height:44px; font-size:12px; }
  #site .sp-machine-caption { top:auto; bottom:240px; }
}

/* Compact controls retain a full 44px touch target. */
#site .sp-tools :is(.sp-scatter, .sp-wave) { width:64px; height:44px; min-height:44px; padding:0; border-radius:22px; font-size:12px; }

/* Typography contact links belong beneath the name, separate from effect controls. */
#site .sp-machine .typography-contacts {
  position:absolute;
  left:50%;
  top:72%;
  transform:translateX(-50%);
  justify-content:center;
  flex-wrap:nowrap;
  gap:23px;
  white-space:nowrap;
}
#site .sp-machine footer { justify-content:flex-end; }
@media(max-width:600px) {
  #site .sp-machine .typography-contacts { top:auto; bottom:186px; }
}