.mi-companion-shell {
  --companion-red: #e6333b;
  position: relative;
  width: 180px;
  color: #f4f5f8;
  font-family: inherit;
  isolation: isolate;
  user-select: none;
}
.mi-companion-shell[hidden], .mi-companion-bubble[hidden] { display: none !important; }
.mi-companion-stage { position: relative; height: 190px; width: 100%; pointer-events: none; }
.mi-companion-trigger { position: absolute; inset: 0; z-index: 4; width: 100%; border: 1px solid transparent; border-radius: 20px; background: transparent; cursor: pointer; pointer-events: auto; color: #d5d8df; font: inherit; }
.mi-companion-trigger:hover { background: radial-gradient(ellipse at 50% 68%, #e6333b10, transparent 65%); }
.mi-companion-trigger:focus-visible { outline: 2px solid #ff737a; outline-offset: 3px; }
.mi-companion-trigger-hint { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 3px 9px; border: 1px solid #ffffff1f; border-radius: 20px; background: #13151be6; font-size: 9px; letter-spacing: .02em; opacity: .8; }
.mi-companion-trigger:hover .mi-companion-trigger-hint, .mi-companion-trigger:focus-visible .mi-companion-trigger-hint { border-color: #e6333b80; color: #fff; opacity: 1; }
.mi-companion-expression { position: absolute; z-index: 2; top: 5%; left: 68%; color: #ff747c; font-size: 27px; text-shadow: 0 0 20px #e6333b55; pointer-events: none; opacity: 0; }
.mi-companion-shell:is([data-emote="heart"], [data-emote="celebrate"], [data-emote="surprise"], [data-emote="think"], [data-emote="applaud"]) .mi-companion-expression { opacity: 1; animation: mi-expression-rise 3.4s ease both; }
@keyframes mi-expression-rise { 0%, 100% { opacity: 0; transform: translateY(8px) scale(.7); } 20%, 75% { opacity: 1; transform: translateY(-2px) scale(1); } }
.mi-companion-stage canvas { display: block; width: 100%; height: 100%; filter: drop-shadow(0 10px 20px rgb(0 0 0 / 15%)); }
.mi-companion-nameplate {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin: -6px 0 9px;
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.mi-companion-code { color: #fc6970; font-variant-numeric: tabular-nums; }
.mi-companion-name { color: #aab0ba; }
.mi-companion-actions {
  display: flex;
  gap: 3px;
  padding: 5px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 14px;
  background: rgb(15 17 23 / 86%);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 32px rgb(0 0 0 / 18%);
}
.mi-companion-wheel-button { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 36px; border: 0; border-radius: 9px; background: transparent; color: #d5d8df; font: inherit; font-size: 11px; cursor: pointer; }
.mi-companion-wheel-button > span:first-child { font-size: 25px; color: #ff7178; }
.mi-companion-wheel-button kbd { padding: 2px 5px; border: 1px solid #ffffff1f; border-radius: 4px; color: #9297a2; font: inherit; font-size: 9px; }
.mi-companion-wheel-button:hover { background: #ffffff0a; color: #fff; }
.mi-companion-wheel-button:focus-visible { outline: 2px solid #ff737a; outline-offset: 2px; }
.mi-companion-emote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 1;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #bec3ce;
  font: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.mi-companion-emote:hover { background: rgb(255 255 255 / 9%); color: #fff; transform: translateY(-2px); }
.mi-companion-emote[aria-pressed="true"] { color: #fff; background: rgb(230 51 59 / 25%); }
.mi-companion-emote:focus-visible, .mi-companion-collapse:focus-visible, .mi-transition-skip:focus-visible { outline: 2px solid #ff737a; outline-offset: 3px; }
.mi-companion-collapse { display: none; position: absolute; top: 8px; right: 0; z-index: 6; width: 32px; height: 32px; padding: 0; border: 1px solid rgb(255 255 255 / 15%); border-radius: 50%; background: #17191f; color: #bdc2cd; font-family: inherit; font-size: 18px; line-height: 1; cursor: pointer; place-items: center; }
.mi-companion-collapse:hover { color: #fff; background: #262932; }
.companion-host.expanded .mi-companion-collapse { display: grid; }
.companion-host.expanded .mi-companion-shell { border-radius: 20px; background: linear-gradient(180deg, #15171e80, #13151bf2 70%); box-shadow: 0 12px 38px #00000024; }
.companion-host.expanded .mi-companion-trigger-hint { display: none; }
.companion-host.expanded .mi-companion-trigger:focus-visible { outline-offset: -5px; }
.companion-host.expanded .mi-companion-nameplate { margin-top: 2px; }
/* In the slide workspace the resting guide stays discreet. The intentional
   expanded state and the cinematic transition retain the full character. */
.companion-host .mi-companion-shell { max-width: 100%; margin-left: auto; }
.companion-host:not(.expanded) { pointer-events: none; }
.companion-host:not(.expanded) .mi-companion-shell { width: 110px; }
.companion-host:not(.expanded) .mi-companion-stage { height: 90px; }
.companion-host:not(.expanded) .mi-companion-nameplate,
.companion-host:not(.expanded) .mi-companion-actions { display: none; }
.companion-host:not(.expanded) .mi-companion-bubble { width: 220px; max-width: calc(100vw - 32px); }
.companion-host:not(.expanded) .mi-companion-fallback { top: 5px; transform: translateX(-50%) scale(.5); transform-origin: top center; animation: none; }
.mi-companion-bubble {
  position: absolute;
  z-index: 2;
  right: 9px;
  bottom: calc(100% - 22px);
  width: 230px;
  box-sizing: border-box;
  padding: 15px 17px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-left: 2px solid #e6333b;
  border-radius: 13px 13px 3px 13px;
  background: rgb(20 22 29 / 96%);
  box-shadow: 0 14px 44px rgb(0 0 0 / 25%);
  color: #e7e9ee;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  animation: mi-bubble-in .22s ease-out both;
  pointer-events: none;
  user-select: text;
}
@keyframes mi-bubble-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* CSS fallback retains personality when WebGL is unavailable. */
.mi-companion-fallback { position: absolute; left: 50%; top: 26px; width: 100px; height: 145px; transform: translateX(-50%); animation: mi-robot-float 3s ease-in-out infinite; }
.mi-robot-head { position: absolute; top: 18px; left: 4px; width: 92px; height: 63px; box-sizing: border-box; padding: 10px 7px; border: 1px solid #fff; border-radius: 23px; background: linear-gradient(130deg, #fff 8%, #d0d5dc 65%, #939aa7); box-shadow: inset -4px -4px 9px rgb(0 0 0 / 15%), 0 7px 12px rgb(0 0 0 / 20%); }
.mi-robot-face { height: 100%; border-radius: 14px; background: linear-gradient(135deg, #25303e, #080d16); display: flex; align-items: center; justify-content: space-evenly; box-shadow: inset 0 2px 6px #000; }
.mi-robot-face::after { content: ''; position: absolute; bottom: 14px; left: calc(50% - 6px); width: 12px; height: 2px; border-radius: 4px; background: #ff7178; }
.mi-robot-face i { width: 7px; height: 12px; border-radius: 5px; background: #f5f9ff; box-shadow: 0 0 10px rgb(238 248 255 / 25%); }
.mi-robot-antenna { position: absolute; top: 5px; left: 48px; width: 3px; height: 17px; background: #8b97a8; }
.mi-robot-antenna::before { content: ''; position: absolute; top: -5px; left: -3px; width: 9px; height: 9px; border-radius: 50%; background: #f34b55; box-shadow: 0 0 14px rgb(230 51 59 / 50%); }
.mi-robot-body { position: absolute; left: 23px; top: 86px; width: 54px; height: 46px; border-radius: 13px 13px 19px 19px; background: linear-gradient(120deg, #f7f9fc, #9da7b6); box-shadow: inset -4px -3px 7px rgb(0 0 0 / 14%); }
.mi-robot-core { display: block; width: 24px; height: 17px; border: 4px solid #19202b; border-radius: 5px; box-sizing: border-box; margin: 11px auto; background: #e6333b; box-shadow: 0 0 14px rgb(230 51 59 / 20%); }
.mi-robot-arm { position: absolute; top: 90px; width: 13px; height: 35px; border-radius: 8px; background: linear-gradient(#cbd1dc 55%, #d92d37 55%); transform-origin: center 4px; }
.mi-robot-arm-left { left: 7px; transform: rotate(12deg); }
.mi-robot-arm-right { right: 7px; transform: rotate(-12deg); }
.mi-robot-hover { position: absolute; top: 147px; left: 13px; width: 74px; height: 9px; border: 1px solid rgb(230 51 59 / 45%); border-radius: 50%; box-shadow: 0 0 15px rgb(230 51 59 / 12%); }
.mi-companion-shell[data-emote="wave"] .mi-robot-arm-right { animation: mi-robot-wave .6s ease-in-out 4; }
.mi-companion-shell[data-emote="celebrate"] .mi-robot-arm-right, .mi-companion-shell[data-emote="highfive"] .mi-robot-arm-right { transform: rotate(-145deg); }
.mi-companion-shell[data-emote="celebrate"] .mi-robot-arm-left { transform: rotate(145deg); }
.mi-companion-shell[data-emote="think"] .mi-robot-head { transform: rotate(-9deg); }
.mi-companion-shell[data-emote="dance"] .mi-companion-fallback { animation: mi-robot-dance .5s ease-in-out 7; }
.mi-companion-shell[data-emote="surprise"] .mi-robot-face i { transform: scale(1.4); border-radius: 50%; }
.mi-companion-shell[data-emote="surprise"] .mi-robot-face::after { transform: scale(.6, 3); }
.mi-companion-shell[data-emote="surprise"] .mi-robot-head { transform: translateY(-7px) rotate(5deg); }
.mi-companion-shell[data-emote="surprise"] .mi-robot-arm-left { transform: rotate(105deg); }
.mi-companion-shell[data-emote="surprise"] .mi-robot-arm-right { transform: rotate(-105deg); }
.mi-companion-shell:is([data-emote="celebrate"], [data-emote="heart"], [data-emote="applaud"]) .mi-robot-face i { height: 5px; border-radius: 50% 50% 0 0; }
.mi-companion-shell[data-emote="heart"] .mi-robot-head { transform: rotate(-10deg); }
.mi-companion-shell[data-emote="heart"] .mi-robot-arm-left { transform: rotate(-57deg); }
.mi-companion-shell[data-emote="heart"] .mi-robot-arm-right { transform: rotate(57deg); }
.mi-companion-shell[data-emote="applaud"] .mi-robot-arm-left { transform: rotate(-65deg); animation: mi-robot-clap-left .5s ease-in-out 7; }
.mi-companion-shell[data-emote="applaud"] .mi-robot-arm-right { transform: rotate(65deg); animation: mi-robot-clap-right .5s ease-in-out 7; }
.mi-fallback-partner { display: none; }
.mi-companion-shell[data-emote="highfive"] .mi-companion-fallback { left: 27%; transform: translateX(-50%) scale(.72); animation: none; }
.mi-companion-shell[data-emote="highfive"] .mi-fallback-partner { display: block; left: 74%; }
.mi-companion-shell[data-emote="highfive"] .mi-fallback-partner .mi-robot-arm-left { transform: rotate(145deg); }
.mi-companion-shell[data-emote="highfive"] .mi-fallback-partner .mi-robot-arm-right { transform: rotate(-12deg); }
@keyframes mi-robot-clap-left { 50% { transform: rotate(-82deg); } }
@keyframes mi-robot-clap-right { 50% { transform: rotate(82deg); } }
@keyframes mi-robot-float { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -5px); } }
@keyframes mi-robot-wave { 0%, 100% { transform: rotate(-130deg); } 50% { transform: rotate(-160deg); } }
@keyframes mi-robot-dance { 0%, 100% { transform: translate(-50%, 0) rotate(-5deg); } 50% { transform: translate(-50%, -3px) rotate(5deg); } }

.mi-idea-transition {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  background: #0b0c10;
  color: #f5f5f7;
  font-family: inherit;
  animation: mi-transition-enter .22s ease-out both;
  isolation: isolate;
}
.mi-idea-transition::before {
  position: absolute;
  content: '';
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgb(255 255 255 / 2%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 2%) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: linear-gradient(90deg, transparent, #000);
}
.mi-idea-transition::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #0b0c10 2%, rgb(11 12 16 / 65%) 38%, transparent 80%); z-index: -1; }
.mi-transition-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.mi-transition-grain { position: absolute; inset: 0; z-index: -1; opacity: .05; background-image: repeating-linear-gradient(0deg, transparent 0, transparent 2px, #aaa 3px, transparent 4px); pointer-events: none; }
.mi-transition-top, .mi-transition-bottom { position: absolute; left: 7vw; right: 7vw; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.mi-transition-top { top: 7vh; }
.mi-transition-brand { font-size: 13px; font-weight: 800; letter-spacing: .14em; }
.mi-transition-brand::before { content: ''; display: inline-block; margin-right: 12px; width: 8px; height: 8px; background: #e6333b; }
.mi-transition-series { font-size: 10px; letter-spacing: .24em; color: #9196a1; }
.mi-transition-content { width: min(780px, 75vw); margin-left: 10vw; position: relative; z-index: 1; }
.mi-transition-kicker { display: block; margin-bottom: 24px; color: #f45c64; font-size: 11px; font-weight: 600; letter-spacing: .27em; animation: mi-transition-rise .8s .08s both; }
.mi-transition-title { font-size: clamp(34px, 5.2vw, 78px); font-weight: 500; line-height: 1.07; letter-spacing: -.045em; text-wrap: balance; margin: 0; max-width: 830px; animation: mi-transition-rise .9s .2s both; }
.mi-transition-detail { display: flex; align-items: center; gap: 17px; margin-top: 34px; color: #858b97; font-size: 9px; letter-spacing: .19em; animation: mi-transition-rise .9s .42s both; }
.mi-transition-detail-line { width: 40px; height: 1px; background: linear-gradient(90deg, #e6333b, rgb(230 51 59 / 12%)); }
.mi-transition-bottom { bottom: 7vh; }
.mi-transition-meta { color: #6f7580; font-size: 9px; letter-spacing: .2em; }
.mi-transition-skip { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; padding: 8px 13px; border: 1px solid rgb(255 255 255 / 13%); border-radius: 8px; background: rgb(17 19 25 / 85%); color: #b5bac4; font: inherit; font-size: 11px; cursor: pointer; }
.mi-transition-skip:hover { color: #fff; border-color: rgb(255 255 255 / 35%); }
.mi-transition-skip kbd { display: inline-block; border: 1px solid rgb(255 255 255 / 15%); border-radius: 4px; padding: 3px 5px; color: #8d939e; font-family: inherit; font-size: 9px; }
.mi-transition-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: rgb(255 255 255 / 5%); }
.mi-transition-progress i { display: block; width: 100%; height: 100%; background: #e6333b; transform-origin: left; animation: mi-transition-progress var(--transition-duration, 4000ms) linear both; }
.mi-transition-companion { position: absolute; right: 8vw; bottom: 15vh; z-index: 2; width: 220px; pointer-events: none; opacity: .92; animation: mi-transition-rise 1s .45s both; }
.mi-transition-companion .mi-companion-shell { width: 220px; }
.mi-transition-companion .mi-companion-stage { height: 260px; }
.mi-transition-companion .mi-companion-actions, .mi-transition-companion .mi-companion-bubble { display: none !important; }
.mi-transition-companion .mi-companion-trigger, .mi-transition-companion .mi-companion-collapse { display: none !important; }
.mi-transition-companion .mi-companion-expression { top: 12%; left: 70%; font-size: 35px; }
.mi-idea-transition[data-reaction="highfive"] .mi-transition-companion { width: 300px; right: 5vw; }
.mi-idea-transition[data-reaction="highfive"] .mi-companion-shell { width: 300px; }
.mi-transition-companion .mi-companion-nameplate { opacity: .6; }
@keyframes mi-transition-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes mi-transition-rise { from { opacity: 0; transform: translateY(20px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes mi-transition-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.mi-companion-shell[data-motion="reduced"] *, .mi-motion-reduced *, .mi-motion-reduced { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .mi-companion-shell *, .mi-idea-transition, .mi-idea-transition * { animation: none !important; transition: none !important; }
}
@media (max-width: 800px) {
  .mi-companion-shell { width: 146px; }
  .mi-companion-stage { height: 156px; }
  .mi-companion-fallback { top: 8px; }
  .mi-companion-emote { height: 27px; font-size: 15px; }
  .mi-companion-bubble { width: 215px; font-size: 11px; }
  .mi-transition-content { margin-left: 7vw; width: 84vw; }
  .mi-transition-companion { right: 6vw; bottom: 15vh; width: 146px; }
  .mi-transition-companion .mi-companion-shell { width: 146px; }
  .mi-transition-companion .mi-companion-stage { height: 170px; }
  .mi-transition-title { max-width: 90%; }
}
@media (max-width: 520px) {
  .companion-host:not(.expanded) { display: block; width: 88px; }
  .companion-host:not(.expanded) .mi-companion-shell { width: 88px; }
  .companion-host:not(.expanded) .mi-companion-stage { height: 86px; }
  .mi-transition-top { top: 5vh; }
  .mi-transition-series { font-size: 8px; letter-spacing: .14em; }
  .mi-transition-title { font-size: clamp(32px, 9vw, 46px); max-width: 100%; }
  .mi-transition-content { transform: translateY(-5vh); }
  .mi-transition-kicker { margin-bottom: 18px; font-size: 9px; }
  .mi-transition-detail { gap: 10px; font-size: 8px; margin-top: 25px; }
  .mi-transition-detail-line { width: 26px; }
  .mi-transition-meta { max-width: 130px; font-size: 8px; line-height: 1.6; }
  .mi-transition-companion { bottom: 15vh; right: 4vw; }
  .mi-idea-transition[data-reaction="highfive"] .mi-transition-companion { width: 200px; right: 1vw; }
  .mi-idea-transition[data-reaction="highfive"] .mi-companion-shell { width: 200px; }
}
@media print { .mi-companion-shell, .mi-idea-transition { display: none !important; } }