/* Home-page frame for the OB13 Connectome (website, 2026-11-13). The engine and map.css are used unchanged;
   this places its bar and hint around the home page, hides the documentation legend (the home map is her website),
   and draws her pearl "water on water" card. */
html, body { background: transparent; }
#bar { top: 84px; left: 36px; }
#mode { display: none; }
#key { left: auto; right: 14px; bottom: 12px; text-align: right; max-width: 46%; }
#key > div:not(.hint) { display: none; }

#pearl { position: fixed; left: 26px; top: 128px; width: min(410px, 46vw); max-height: calc(100vh - 170px); overflow: auto; z-index: 20;
  padding: 26px 28px 24px; border-radius: 28px; color: #0a2350; text-shadow: none;
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  background: radial-gradient(130% 90% at 28% -10%, rgba(255,255,255,.66), rgba(238,245,255,.44) 52%, rgba(206,226,252,.38));
  -webkit-backdrop-filter: blur(16px) saturate(1.5) brightness(1.06); backdrop-filter: blur(16px) saturate(1.5) brightness(1.06);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.98), inset 0 0 0 1.5px rgba(255,255,255,.55),        /* bright meniscus on the top curve */
    inset 18px 0 30px -22px rgba(110,190,255,.75), inset -18px 0 30px -22px rgba(110,190,255,.75),   /* thick rounded water edge */
    inset 0 -14px 26px -12px rgba(40,160,255,.5), inset 0 14px 22px -16px rgba(255,255,255,.9),
    0 34px 90px 12px rgba(1,14,52,.72), 0 10px 30px rgba(2,18,60,.45), 0 0 70px 6px rgba(40,120,255,.16);   /* sapphire shadow: it floats */
  scrollbar-width: thin; scrollbar-color: rgba(40,100,180,.35) transparent; }
#pearl::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, rgba(255,214,240,.0) 20%, rgba(214,236,255,.55) 40%, rgba(255,240,214,.35) 55%, rgba(214,255,246,.0) 75%);
  background-size: 260% 260%; animation: pearl-sheen 9s ease-in-out infinite; }
@keyframes pearl-sheen { 50% { background-position: 100% 100%; } }
#pearl.in { animation: pearl-in .62s cubic-bezier(.2,.9,.25,1.08) both, pearl-float 6s ease-in-out .62s infinite; }
#pearl.out { animation: pearl-out .4s cubic-bezier(.5,0,.75,.2) both; }
@keyframes pearl-in { from { opacity: 0; transform: scale(.06); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pearl-out { to { opacity: 0; transform: scale(.06); filter: blur(6px); } }
@keyframes pearl-float { 50% { transform: translateY(-5px); } }
#pearl .x { position: absolute; top: 12px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; font-size: 20px; line-height: 1;
  color: #0a2350; background: rgba(255,255,255,.55); box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(10,40,100,.2); }
#pearl .k { margin: 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #2a5b9a; font-weight: 600; }
#pearl h2 { margin: 6px 0 10px; font: 400 30px/1.15 Georgia, "Times New Roman", serif; color: #0a2350; padding-right: 30px; }
#pearl .t { margin: 0; color: #1f3c66; font-size: 16px; }
#pearl .btn { display: inline-flex; gap: 8px; margin-top: 18px; padding: 11px 20px; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 600; font-size: 14.5px;
  background: linear-gradient(180deg, #3d95ff, #1667e6 55%, #0b4fc4); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 6px rgba(0,30,90,.35), 0 6px 18px rgba(16,90,220,.35); }
#pearl .btn:hover { filter: brightness(1.08); }
#pearl .kids { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(40,100,180,.2); display: flex; flex-direction: column; gap: 4px; }
#pearl .kids:empty { display: none; }
#pearl .kids a { display: block; padding: 6px 10px; border-radius: 10px; color: #0c4aa6; text-decoration: none; font-size: 14.5px; line-height: 1.35; }
#pearl .kids a:hover { background: rgba(255,255,255,.45); }
@media (prefers-reduced-motion: reduce) { #pearl.in, #pearl.out, #pearl::before { animation: none; } #pearl.out { opacity: 0; } }
@media (max-width: 700px) { #pearl { left: 12px; right: 12px; width: auto; top: 150px; max-height: 58vh; } }
@media (max-width: 700px) { #key { display: none; } }   /* phone: the copyright line needs the room */