/* ══════════════════════════════════════════════════════════════════════
   MARBLELENS · MARBLE AGENT — the artifact's dock, verbatim.
   A single gold-ringed mark that stays out of the way, and one tip
   bubble that only exists while it is open.
   ══════════════════════════════════════════════════════════════════════ */

.ma-dock{
  position:fixed;
  right:clamp(14px,2.5vw,28px);
  bottom:clamp(14px,2.5vw,28px);
  z-index:90;
  display:flex;flex-direction:column;align-items:flex-end;gap:11px;
  pointer-events:none;
}

.ma-btn{
  pointer-events:auto;
  width:52px;height:52px;padding:0;
  border-radius:50%;
  background:radial-gradient(120% 120% at 50% 18%,#24323A 0%,#131E24 62%,#0A1418 100%);
  border:1.5px solid rgba(201,162,87,.5);
  box-shadow:0 38px 78px -34px rgba(1,5,7,.74),0 0 0 5px rgba(201,162,87,.07);
  display:grid;place-items:center;cursor:pointer;
  transition:transform .34s cubic-bezier(.22,.7,.2,1),border-color .34s;
}
.ma-btn svg{width:32px;height:32px;display:block}
/* the real render fills the disc — she IS the button, not an icon on it */
.ma-btn .ma-face{
  width:100%;height:100%;display:block;
  border-radius:50%;object-fit:cover;object-position:50% 42%;
  /* the renders are cut out on white fringe-light; a hair of inset shadow
     seats her in the disc instead of floating on it */
  box-shadow:inset 0 0 0 1px rgba(201,162,87,.22);
}
.ma-btn:hover{transform:translateY(-3px) scale(1.04);border-color:#C9A257}
.ma-btn:focus-visible{outline:2px solid #C9A257;outline-offset:3px}

.ma-eye{animation:maBlink 6.4s infinite;transform-origin:50% 41%}
@keyframes maBlink{0%,94%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.12)}}
/* she leans in a little when her tip is open */
.ma-dock.is-open .ma-btn{transform:translateY(-2px) scale(1.05);border-color:#C9A257}

.ma-bubble{
  pointer-events:auto;
  max-width:min(320px,78vw);
  padding:13px 16px;
  border-radius:16px 16px 4px 16px;
  background:#0C171C;
  border:1px solid rgba(244,239,228,.12);
  box-shadow:0 38px 78px -34px rgba(1,5,7,.74);
  color:#DCD5C6;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.88rem;line-height:1.5;
  opacity:0;transform:translateY(8px) scale(.97);
  transition:opacity .34s cubic-bezier(.22,.7,.2,1),transform .34s cubic-bezier(.22,.7,.2,1);
}
.ma-dock.is-open .ma-bubble{opacity:1;transform:none}

.ma-who{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:#C9A257;font-weight:600;margin-bottom:5px;
  display:flex;justify-content:space-between;gap:12px;align-items:center;
}
.ma-x{
  color:#8A8377;font-size:1.05rem;line-height:1;
  min-width:44px;min-height:44px;margin:-13px -13px -13px 0;
  display:grid;place-items:center;border:0;background:none;cursor:pointer;
  border-radius:8px;
}
.ma-x:hover{color:#F4EFE4}
.ma-x:focus-visible{outline:2px solid #C9A257;outline-offset:2px}
.ma-say{margin:0}

@media (max-width:860px){
  .ma-dock{right:12px;bottom:12px}
  .ma-btn{width:48px;height:48px}
  .ma-btn svg{width:29px;height:29px}
  .ma-bubble{max-width:min(280px,68vw)}
}

@media (prefers-reduced-motion:reduce){
  .ma-eye{animation:none}
  .ma-btn,.ma-bubble{transition:none}
}

.ma-credit{display:block;border-top:1px solid #ffffff1a;padding-top:9px;margin-top:11px;color:#b8c5a9;font:11px/1.5 var(--sans,system-ui,sans-serif)}