/* Max's small aside belongs to the project interaction, not to the navigation. */
.max-companion{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;width:120px;pointer-events:none;isolation:isolate;z-index:12}
.max-companion .max-sprite{pointer-events:none}
.max-bubble{position:absolute;right:0;bottom:calc(100% + 12px);width:220px;max-width:calc(100vw - 32px);margin:0;padding:12px 13px;background:var(--paper,#f4f1e8);border:3px solid var(--accent,#f86c39);color:var(--ink,#20221f);box-shadow:4px 4px 0 var(--ink,#20221f);font:400 calc(14px * var(--mono-scale,1))/1.35 var(--mono,monospace);letter-spacing:0;pointer-events:none;z-index:1}
.max-bubble[hidden]{display:none}
.max-bubble:after{content:'';position:absolute;right:20px;bottom:-10px;width:13px;height:13px;background:var(--paper,#f4f1e8);border-right:3px solid var(--accent,#f86c39);border-bottom:3px solid var(--accent,#f86c39);transform:rotate(45deg)}
.max-voice{pointer-events:auto;display:block;min-height:32px;min-width:72px;max-width:100%;padding:5px 7px;border:1px solid var(--ink,#20221f);background:var(--paper,#f4f1e8);color:var(--ink,#20221f);font:500 10px/1.2 Space,Arial,sans-serif;text-align:center;cursor:pointer;touch-action:manipulation}
.max-voice[aria-pressed=true]{background:var(--ink,#20221f);color:var(--paper,#f4f1e8)}
.max-voice:hover{border-color:var(--accent,#f86c39);box-shadow:0 0 0 1px var(--accent,#f86c39)}
.max-voice:focus-visible{outline:3px solid var(--accent,#f86c39);outline-offset:4px}
.max-companion.is-docked{position:fixed;left:38px;bottom:190px;width:120px;z-index:30}
.max-companion.is-docked .max-bubble{left:0;right:auto}
.max-companion.is-docked .max-bubble:after{left:20px;right:auto}
@media(prefers-reduced-motion:no-preference){.max-companion.is-speaking .max-bubble:not([hidden]){animation:max-aside-in 160ms cubic-bezier(.22,1,.36,1) both}}
@keyframes max-aside-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* Short desktop rails reserve navigation above and email below the companion.
   The decorative note yields its space only while Max actually docks. */
@media(min-width:851px) and (max-height:860px){
  .max-companion.is-docked{bottom:104px;width:64px}
  .mascot-slot .max-companion.is-docked .max-sprite{width:64px}
  .max-companion.is-docked .max-voice{min-width:64px;width:64px;padding-left:4px;padding-right:4px}
  body:has(.max-companion.is-docked) .rail-note{visibility:hidden}
}
/* In very short windows the rail cannot fit a sprite, quote and both controls.
   Use the adjacent page gutter instead of covering navigation or email. */
@media(min-width:851px) and (max-height:680px){
  .max-companion.is-docked{left:calc(var(--rail,196px) + 16px);bottom:64px}
  body:has(.max-companion.is-docked) .rail-note{visibility:visible}
}
@media(max-width:850px){
  .max-companion.is-docked{left:16px;bottom:64px;width:64px}
  .mascot-slot .max-companion.is-docked .max-sprite{width:64px}
  .max-companion.is-docked .max-voice{min-width:64px;width:64px;padding-left:4px;padding-right:4px}
}
@media(max-width:760px){.mascot-slot .max-companion{width:88px}.mascot-slot .max-companion.is-docked{width:64px}.max-bubble{font-size:calc(13px * var(--mono-scale,1))}}
@media(prefers-reduced-motion:reduce){.max-companion .max-bubble{animation:none}}

.secret-finale{display:grid;place-items:center;width:28px;height:28px;color:var(--accent);font-size:16px;opacity:.55;margin-left:8px;text-decoration:none!important}.secret-finale:hover,.secret-finale:focus-visible{opacity:1;transform:rotate(25deg)}
@media(prefers-reduced-motion:reduce){.secret-finale:hover,.secret-finale:focus-visible{transform:none}}