/* Shared SSR/SPA component. Explicit dimensions reserve space before JS loads.
   Multiply merges the original light paper into cream/mint surfaces without repainting assets. */
:root{--guide-mint:#A9E9D8;--guide-cream:#FBFDFC;--guide-ink:#273735}
persona-guide{display:inline-block;width:var(--guide-size,80px);height:var(--guide-size,80px);max-width:200px;flex:none;overflow:hidden;vertical-align:middle;background:transparent;mix-blend-mode:multiply;pointer-events:none}
persona-guide[hidden]{display:none!important}persona-guide img{display:block;width:100%;height:100%;object-fit:contain}
persona-guide[size="48"]{--guide-size:48px}persona-guide[size="80"]{--guide-size:80px}persona-guide[size="160"]{--guide-size:160px}persona-guide[size="200"]{--guide-size:200px}
.guide-enter{animation:guide-enter 180ms ease-out 1 both}@keyframes guide-enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.guide-intro{display:flex;align-items:center;gap:20px}.guide-intro>div{min-width:0}.guide-hero{display:flex;align-items:center;justify-content:center;min-height:200px}.guide-caption{font-size:.875rem;color:#536661}
@media(max-width:600px){.guide-intro{gap:12px;align-items:flex-start}.guide-hero persona-guide{--guide-size:80px!important}.guide-hero{min-height:80px;justify-content:flex-end}.hero-art:has(>persona-guide){min-height:80px}.hero-art>persona-guide{--guide-size:80px!important}}
@media(prefers-reduced-motion:reduce){.guide-enter{animation:none!important}}