/* =========================================================================
   CoLateral - Beamy canvas buddy
   Tiny purple pixel-art I-beam mascot. Palette + motion live here so the SVG
   stays pure structure. Colours follow CoLateral purple + Dracula-dark tones.
   All movement is gated behind prefers-reduced-motion.
   ========================================================================= */

.beamy {
  /* palette */
  --beamy-body: #8a5cc9;
  --beamy-hi: #b18ee6;
  --beamy-shadow: #5a3a8f;
  --beamy-ink: #1a1622;
  --beamy-hat: #ece6d8;
  --beamy-hatsh: #a196b8;
  --beamy-accent: #5e3a8f;
  --beamy-glow: rgba(185, 139, 250, 0.35);

  /* size token, overridden by [data-size] */
  --beamy-w: 78px;

  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 45; /* above canvas cards (z 3-5), below toast (50) / modal (80) */
  margin: 0;
  /* wrapper never eats canvas interactions; only the button below opts in */
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.beamy[hidden] {
  display: none;
}
.beamy.beamy--home {
  /* perched right beside the hero CoLateral logo. beamyHome.js measures the
     logo and sets left/top so he tracks it on resize instead of floating off
     in the top-right corner. */
  position: absolute;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  z-index: 18;
  will-change: left, top;
}
/* Larger on the homepage perch so he stands eye to eye with the 88px hero
   logo tile - the sprite only fills the middle 20 of its 32 design columns,
   so the box has to be wider than the logo to read the same size. 128px is
   also an exact 4x of the 32-column grid, which keeps every pixel edge sharp.
   Higher specificity than the [data-size] tokens so this wins. */
.beamy.beamy--home[data-size] {
  --beamy-w: 128px;
}
/* Below ~1080px the hero logo drops off its 88px clamp, so step Beamy down to
   the next exact 3x multiple of the sprite grid to keep the pair matched. */
@media (max-width: 1080px) {
  .beamy.beamy--home[data-size] {
    --beamy-w: 96px;
  }
}
/* No mood sparkles on the perch: a lone "+" floating beside him next to the
   hero logo reads as a stray artifact rather than as charm. */
.beamy.beamy--home[data-mood] .b-moodfx {
  display: none;
}
.beamy.beamy--home .beamy__btn {
  animation: beamy-hover 6.5s ease-in-out infinite;
}
@keyframes beamy-hover {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-2deg);
  }
  50% {
    transform: translate3d(0, -8px, 0) rotate(2deg);
  }
}
/* On the home hero the bubble sits beside Beamy, to his right. That only works
   while there is room to his right: the hero logo he tracks is centred, so on a
   phone "Beamy's right edge + a wide bubble" lands past the viewport and
   scrolls the landing page sideways. Below 560px the override is dropped and the
   base rules apply, which hang the bubble above him and extend it leftwards. */
@media (min-width: 561px) {
  /* The home perch is a narrow absolutely positioned box (one sprite wide), so
     a bubble that only sets `left` would shrink-to-fit inside it and wrap one
     word per line.
     `width: max-content` sizes the bubble from the line itself and the
     max-width caps it at a comfortable reading measure. */
  .beamy.beamy--home .beamy__bubble {
    right: auto;
    /* The sprite only fills columns 6-26 of its 32-column grid, so offsets are
       taken from the drawn edge (0.8 of the box) rather than the box edge. */
    left: calc(var(--beamy-w) * 0.8 + 10px);
    bottom: calc(var(--beamy-w) * 0.55);
    width: max-content;
    /* he is bigger on the hero perch and his lines are longer, so give the box
       more room to run horizontally. The vw term keeps it inside the stage on
       narrow desktops, where it opens rightward from the centred logo. */
    max-width: clamp(180px, 26vw, 350px);
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
    text-wrap: balance;
    transform-origin: bottom left;
  }
  .beamy.beamy--home .beamy__bubble::after {
    right: auto;
    left: -5px;
    bottom: 10px;
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--indigo, #b98bfa) 50%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--indigo, #b98bfa) 50%, transparent);
  }
}
/* Mirrored side, used when the bubble would otherwise run off the viewport.
   beamyHome.js measures the bubble and toggles this class. */
.beamy.beamy--home .beamy__bubble.is-left {
  left: auto;
  right: calc(var(--beamy-w) * 0.8 + 10px);
  transform-origin: bottom right;
}
.beamy.beamy--home .beamy__bubble.is-left::after {
  left: auto;
  right: -5px;
  border-left: 0;
  border-right: 1px solid color-mix(in srgb, var(--indigo, #b98bfa) 50%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--indigo, #b98bfa) 50%, transparent);
}
/* Pixel art on a pale hero reads better with a soft brand-tinted shadow than
   with the dark canvas drop shadow. */
.beamy.beamy--home .beamy__btn {
  filter: drop-shadow(0 6px 10px rgba(16, 42, 67, 0.16));
}
.beamy.beamy--home .beamy__btn:hover {
  filter: drop-shadow(0 8px 14px rgba(16, 42, 67, 0.22))
    drop-shadow(0 0 8px var(--beamy-glow));
}

/* ---- sizes -------------------------------------------------------------- */
.beamy[data-size="sm"] {
  --beamy-w: 56px;
}
.beamy[data-size="md"] {
  --beamy-w: 78px;
}
.beamy[data-size="lg"] {
  --beamy-w: 108px;
}

/* ---- the clickable buddy ------------------------------------------------ */
.beamy__btn {
  pointer-events: auto;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
  transition: transform 0.15s ease, filter 0.15s ease;
  /* no blue tap flash on touch, no text selection, no double-tap zoom delay */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.beamy__btn:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 6px 9px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 6px var(--beamy-glow));
}
/* Clicking or tapping Beamy must never draw a selection rectangle around him.
   Beamy.js also blocks the focus move on mouse press; this is the belt to that
   set of braces. Keyboard users still get the ring below. */
.beamy__btn:focus {
  outline: none;
}
.beamy__btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--beamy-hi) 70%, transparent);
  outline-offset: 4px;
  border-radius: 16px;
}

.beamy__svg {
  display: block;
  width: var(--beamy-w);
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  overflow: visible;
}

/* ---- palette mapping ---------------------------------------------------- */
.beamy .b-body {
  fill: var(--beamy-body);
}
.beamy .b-hi {
  fill: var(--beamy-hi);
}
.beamy .b-shadow {
  fill: var(--beamy-shadow);
}
.beamy .b-ink {
  fill: var(--beamy-ink);
}
.beamy .b-hat {
  fill: var(--beamy-hat);
}
.beamy .b-hatsh {
  fill: var(--beamy-hatsh);
}
.beamy .b-accent {
  fill: var(--beamy-accent);
}
.beamy .b-glass {
  fill: rgba(177, 142, 230, 0.18);
  stroke: var(--beamy-ink);
  stroke-width: 1.4;
}
.beamy .b-glass-handle {
  stroke: var(--beamy-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* ---- expression: reveal only the active eyes + mouth + decoration ------- */
.beamy .b-mouth,
.beamy .b-eyes,
.beamy .b-moodfx,
.beamy .b-acc {
  display: none;
}
/* mouth, one per expression */
.beamy[data-mood="happy"] .b-mouth--happy,
.beamy[data-mood="grin"] .b-mouth--grin,
.beamy[data-mood="wink"] .b-mouth--wink,
.beamy[data-mood="cool"] .b-mouth--cool {
  display: block;
}
/* eyes - happy and grin share the open pair; wink and cool get their own */
.beamy[data-mood="happy"] .b-eyes--open,
.beamy[data-mood="grin"] .b-eyes--open,
.beamy[data-mood="wink"] .b-eyes--wink,
.beamy[data-mood="cool"] .b-eyes--cool {
  display: block;
}
/* sparkle decoration on the cheerful expressions */
.beamy[data-mood="happy"] .b-moodfx--happy,
.beamy[data-mood="grin"] .b-moodfx--grin {
  display: block;
}

/* ---- action: reveal only the active accessory -------------------------- */
.beamy[data-action="think"] .b-acc--think,
.beamy[data-action="inspect"] .b-acc--inspect,
.beamy[data-action="approve"] .b-acc--approve,
.beamy[data-action="celebrate"] .b-acc--celebrate,
.beamy[data-action="nap"] .b-acc--nap {
  display: block;
}

/* ---- speech bubble ------------------------------------------------------
   iOS-flavoured motion: a soft spring on the way in, a quicker ease on the way
   out, and a measured width/height morph when one line swaps for the next so
   the box glides between sizes instead of snapping. The durations below are
   mirrored by the timers in Beamy.js - keep the two in step.
   The box is deliberately wide: these lines are sentences, not labels, and a
   narrow column of three-word rows read badly. */
.beamy__bubble {
  pointer-events: none;
  position: absolute;
  right: 0;
  bottom: calc(var(--beamy-w) + 12px);
  box-sizing: border-box;
  width: max-content;
  max-width: clamp(210px, 26vw, 320px);
  padding: 9px 13px;
  border-radius: 13px;
  background: var(--s1, #181226);
  border: 1px solid color-mix(in srgb, var(--indigo, #b98bfa) 50%, transparent);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  color: var(--tx, #e7defb);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12.5px;
  line-height: 1.42;
  text-wrap: pretty;
  overflow-wrap: break-word;
  transform-origin: bottom right;
  transform: translateY(6px) scale(0.9);
  opacity: 0;
  transition:
    opacity 0.19s cubic-bezier(0.4, 0, 1, 1),
    transform 0.22s cubic-bezier(0.4, 0, 1, 1);
}
.beamy__bubble::after {
  /* little tail pointing down toward Beamy */
  content: "";
  position: absolute;
  right: 18px;
  bottom: -5px;
  width: 8px;
  height: 8px;
  background: var(--s1, #181226);
  border-right: 1px solid color-mix(in srgb, var(--indigo, #b98bfa) 50%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--indigo, #b98bfa) 50%, transparent);
  border-bottom-right-radius: 3px;
  transform: rotate(45deg);
}
.beamy__bubble.is-on {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.26s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.44s cubic-bezier(0.2, 1.24, 0.38, 1);
}
/* while the box travels between two line sizes (Beamy.js pins the start and
   end geometry inline, this rule supplies the easing) */
.beamy__bubble.is-morphing {
  transition:
    opacity 0.26s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.44s cubic-bezier(0.2, 1.24, 0.38, 1),
    width 0.3s cubic-bezier(0.32, 0.72, 0, 1),
    height 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.beamy__bubble-text {
  display: block;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.2s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}
.beamy__bubble.is-swapping .beamy__bubble-text {
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.13s ease-in, transform 0.13s ease-in;
}

/* ---- motion (idle breathing + per-action flourishes) ------------------- */
.beamy__btn {
  animation: beamy-bob 4.2s ease-in-out infinite;
}
@keyframes beamy-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

/* walk: a gentle lean + alternating feet, plus motion ticks */
.beamy[data-action="walk"] .beamy__foot--l {
  animation: beamy-step 0.6s steps(2) infinite;
}
.beamy[data-action="walk"] .beamy__foot--r {
  animation: beamy-step 0.6s steps(2) infinite 0.3s;
}
@keyframes beamy-fly {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-3deg);
  }
  50% {
    transform: translate3d(0, -10px, 0) rotate(4deg);
  }
}
@keyframes beamy-step {
  50% {
    transform: translateX(1px);
  }
}

/* celebrate: arms up + sparkle twinkle */
.beamy[data-action="celebrate"] .beamy__arm--l {
  transform: translate(2px, -7px) rotate(-12deg);
}
.beamy[data-action="celebrate"] .beamy__arm--r {
  transform: translate(-2px, -7px) rotate(12deg);
}
.beamy[data-action="celebrate"] .b-acc--celebrate {
  animation: beamy-twinkle 0.8s steps(2) infinite;
}
@keyframes beamy-twinkle {
  50% {
    opacity: 0.35;
  }
}

/* think / nap: drift the floaty bits upward */
.beamy[data-action="think"] .b-acc--think,
.beamy[data-action="nap"] .b-acc--nap {
  animation: beamy-drift 2.4s ease-in-out infinite;
}
@keyframes beamy-drift {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.85;
  }
  50% {
    transform: translateY(-2px);
    opacity: 1;
  }
}

/* nap: sink down a touch so he reads as resting */
.beamy[data-action="nap"] .beamy__body,
.beamy[data-action="nap"] .beamy__hat,
.beamy[data-action="nap"] .beamy__eyes,
.beamy[data-action="nap"] .beamy__mouth {
  transform: translateY(2px);
}

/* approve / inspect: a tiny nod toward the prop */
.beamy[data-action="approve"] .b-acc--approve {
  animation: beamy-bob 1.6s ease-in-out infinite;
}

.beamy__arm,
.beamy__foot {
  transition: transform 0.2s ease;
  transform-origin: center;
}

/* poke reaction: a short squash-and-stretch so a click reads as a reply. This
   sits on the SVG rather than the button, which already owns the idle bob. */
.beamy__svg {
  transform-origin: 50% 100%;
}
.beamy.is-reacting .beamy__svg {
  animation: beamy-pop 0.44s cubic-bezier(0.2, 1.16, 0.36, 1);
}
@keyframes beamy-pop {
  0% {
    transform: scale(1, 1);
  }
  32% {
    transform: scale(1.09, 0.92);
  }
  64% {
    transform: scale(0.97, 1.05);
  }
  100% {
    transform: scale(1, 1);
  }
}

/* =========================================================================
   Beam Buddy chat dock (Project Canvas)
   Beamy sits at the bottom-centre paired with a chat bar: the text box in the
   middle, Beamy right next to it. The wrapper is click-through so the canvas
   keeps panning underneath; only the input and Beamy himself are interactive.
   ========================================================================= */
.beamy-dock {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 46; /* above cards / minimap, below toast (50) and modal (80) */
  display: flex;
  align-items: flex-end;
  gap: 10px;
  /* Wider than the original chat dock: the bar is now the canvas's all-in-one
     command + search box, so it gets more horizontal room while Beamy keeps
     floating at its right-hand end untouched. */
  max-width: min(94vw, 880px);
  pointer-events: none; /* only children opt back in */
}
.beamy-dock[hidden] {
  display: none;
}

/* Beamy, when docked, sits in the flex row instead of the viewport corner. */
.beamy.beamy--dock {
  position: relative;
  right: auto;
  bottom: auto;
  z-index: auto;
  flex: 0 0 auto;
  /* Docked next to the chat bar he reads best kept close to the bar's own
     height, so shrink him here regardless of the saved size preference.
     Two classes out-specify the [data-size] tokens above, and this rule
     comes later in source order, so it wins. */
  --beamy-w: 52px;
}
.beamy.beamy--dock[data-size="sm"] {
  --beamy-w: 44px;
}
.beamy.beamy--dock[data-size="lg"] {
  --beamy-w: 60px;
}

/* ---- the chat form ------------------------------------------------------ */
.beamy-chat {
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.beamy-chat-field {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px 7px 16px;
  background: color-mix(in srgb, var(--s1, #181226) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--indigo, #b98bfa) 50%, transparent);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.beamy-chat:focus-within .beamy-chat-field {
  border-color: var(--indigo, var(--beamy-hi, #b18ee6));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5),
    0 0 0 3px color-mix(in srgb, var(--indigo, #b98bfa) 18%, transparent);
}
.beamy-chat-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 26ch;
  max-width: 60ch;
  margin: 0;
  border: 0;
  padding: 5px 0;
  background: transparent;
  color: var(--tx, #e7defb);
  font: 14px/1.3 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  outline: none;
  transition: width 0.12s ease;
}
.beamy-chat-input::placeholder {
  color: var(--tx3, rgba(231, 222, 251, 0.5));
}
.beamy-chat-send {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--indigo, var(--beamy-body, #8a5cc9));
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.beamy-chat-send:hover {
  background: color-mix(in srgb, var(--indigo, #b18ee6) 80%, #fff);
}
.beamy-chat-send:active {
  transform: scale(0.92);
}
.beamy-chat-send:focus-visible {
  outline: 2px solid var(--indigo, var(--beamy-hi, #b18ee6));
  outline-offset: 2px;
}

/* ---- suggestions / live tutorial popover (opens upward) ----------------- */
.beamy-chat-suggest {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  min-width: 320px;
  max-width: 460px;
  max-height: 340px;
  overflow-y: auto;
  padding: 6px;
  background: var(--s1, #181226);
  border: 1px solid color-mix(in srgb, var(--indigo, #b98bfa) 50%, transparent);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}
.beamy-chat-suggest[hidden] {
  display: none;
}
.beamy-chat-suggest-head {
  padding: 5px 9px 7px;
  font: 11px/1.3 "Inter", system-ui, sans-serif;
  color: var(--tx2, rgba(231, 222, 251, 0.6));
}
.beamy-chat-suggest-foot {
  margin-top: 4px;
  padding: 7px 9px 3px;
  border-top: 1px solid color-mix(in srgb, var(--indigo, #b98bfa) 18%, transparent);
  font: 10.5px/1.3 "Inter", system-ui, sans-serif;
  color: var(--tx3, rgba(231, 222, 251, 0.42));
}
.beamy-chat-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--tx, #e7defb);
  font: 12.5px/1.2 "Inter", system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.beamy-chat-opt.is-active {
  background: color-mix(in srgb, var(--indigo, #b98bfa) 16%, transparent);
}
.beamy-chat-opt-ic {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: rgba(231, 222, 251, 0.72);
}
.beamy-chat-opt.is-active .beamy-chat-opt-ic,
.beamy-chat-opt.is-auto .beamy-chat-opt-ic {
  color: #d3b5fd;
}
.beamy-chat-opt-ic svg {
  width: 16px;
  height: 16px;
}
.beamy-chat-opt-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.beamy-chat-opt-label {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.beamy-chat-opt-hint {
  font-size: 11px;
  color: var(--tx2, rgba(231, 222, 251, 0.55));
}
.beamy-chat-opt-badge {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--green, #7ac48d) 22%, transparent);
  color: var(--green, #8fe0a4);
}
.beamy-chat-opt-badge--warn {
  background: color-mix(in srgb, var(--amber, #f0b429) 20%, transparent);
  color: var(--amber, #f0c66b);
}

/* ---- light theme: darken the dropdown so icons + text stay legible ------
   The default palette is tuned for the dark canvas (pale lavender icons on a
   near-black popover). On the light theme the popover turns light, so those
   pale icons wash out - swap in darker tones that read against a light card. */
body.light .beamy-chat-opt-ic {
  color: rgba(24, 33, 48, 0.66);
}
body.light .beamy-chat-opt.is-active .beamy-chat-opt-ic,
body.light .beamy-chat-opt.is-auto .beamy-chat-opt-ic {
  color: var(--blue, #0078d4);
}

/* narrow screens: let the dock span the width and Beamy ride the end */
@media (max-width: 640px) {
  .beamy-dock {
    left: 12px;
    right: 12px;
    transform: none;
    max-width: none;
  }
  .beamy-chat {
    flex: 1 1 auto;
  }
  .beamy-chat-input {
    max-width: none;
  }
  .beamy-chat-suggest {
    max-width: none;
    right: 0;
  }
}

/* ---- reduced motion: stand still, keep every pose readable -------------- */
@media (prefers-reduced-motion: reduce) {
  .beamy__btn,
  .beamy *,
  .beamy__bubble,
  .beamy.beamy--home,
  .beamy-chat-field,
  .beamy-chat-input,
  .beamy-chat-send {
    animation: none !important;
    transition: none !important;
  }
  .beamy[data-action="celebrate"] .beamy__arm--l {
    transform: translate(2px, -7px) rotate(-12deg);
  }
  .beamy[data-action="celebrate"] .beamy__arm--r {
    transform: translate(-2px, -7px) rotate(12deg);
  }
}


/* Office Blue is the primary CoLateral appearance. Keep Beamy's original
   purple palette untouched for Dracula and the other selectable themes. */
body.light .beamy {
  --beamy-body: #0078d4;
  --beamy-hi: #5eb2f2;
  --beamy-shadow: #005a9e;
  --beamy-ink: #102a43;
  --beamy-hat: #ffffff;
  --beamy-hatsh: #a8c4de;
  --beamy-accent: #106ebe;
  --beamy-glow: rgba(0, 120, 212, 0.3);
}
body.light .beamy .b-glass {
  fill: rgba(94, 178, 242, 0.2);
}

/* The public entrance page is Office-Blue-branded regardless of the visitor's
   saved theme, so the beam buddy perched beside the CoLateral hero logo should
   always read blue to match it - not fall back to the purple canvas palette on
   the dark or other selectable themes. Scoped to the home perch only, so the
   Project Canvas mascot keeps following the active theme. */
.beamy.beamy--home {
  --beamy-body: #0078d4;
  --beamy-hi: #5eb2f2;
  --beamy-shadow: #005a9e;
  --beamy-ink: #102a43;
  --beamy-hat: #ffffff;
  --beamy-hatsh: #a8c4de;
  --beamy-accent: #106ebe;
  --beamy-glow: rgba(0, 120, 212, 0.3);
}
.beamy.beamy--home .b-glass {
  fill: rgba(94, 178, 242, 0.2);
}