.lighthouse-mascot{position:fixed;right:20px;bottom:18px;z-index:35;width:160px;font-family:inherit;pointer-events:none}
.lighthouse-mascot [hidden]{display:none!important}
.mascot-character{position:relative;display:block;width:160px;height:240px;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;filter:drop-shadow(0 8px 10px #29285620);transition:transform .2s}
.mascot-character:hover{transform:translateY(-5px) rotate(-2deg)}
.mascot-character img{width:100%;height:100%;object-fit:contain}
.mascot-character canvas{display:block;width:100%;height:100%;object-fit:contain}
.mascot-motion-controls{display:flex;flex-wrap:wrap;gap:6px;padding-top:12px;margin-top:12px;border-top:1px solid var(--line)}
.mascot-motion-controls button{padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:11px;color:var(--muted);cursor:pointer}
.mascot-motion-controls button:hover{color:var(--accent);border-color:var(--accent-edge)}
.mascot-character.motion-ready canvas{transform-origin:50% 95%;animation:mascot-breathe 4s ease-in-out infinite}
.lighthouse-mascot.motion-paused canvas{animation-play-state:paused}
@keyframes mascot-breathe{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-2px) rotate(.5deg)}}
.mascot-character:focus-visible,.mascot-mini:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:16px}
.mascot-caption{display:block;text-align:center;font-size:11px;color:var(--muted)}
.mascot-fold{position:absolute;right:0;bottom:4px;width:26px;height:26px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--muted);cursor:pointer;pointer-events:auto}
.mascot-mini{display:flex;align-items:center;gap:5px;margin-left:auto;padding:4px 10px 4px 4px;border:1px solid var(--accent-edge);border-radius:30px;background:var(--surface);box-shadow:0 4px 18px #32337718;cursor:pointer;pointer-events:auto;color:var(--accent);font-size:12px}
.mascot-mini img{width:36px;height:36px;object-fit:cover;object-position:center 12%;border-radius:50%;background:var(--accent-soft)}
.mascot-dialog{position:absolute;bottom:255px;right:0;width:260px;padding:16px;border:1px solid var(--accent-edge);border-radius:18px 18px 4px 18px;background:var(--surface);box-shadow:0 8px 30px #34307716;pointer-events:auto;color:var(--ink)}
.mascot-dialog header{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:var(--accent)}
.mascot-dialog header button{border:0;background:none;color:var(--muted);padding:0 3px;cursor:pointer;font-size:18px}
.mascot-dialog p{font-size:13px;line-height:1.8;margin:10px 0 12px}
.mascot-links{display:flex;gap:8px}.mascot-links a{padding:7px 10px;border-radius:9px;background:var(--accent-soft);color:var(--accent);font-size:12px;text-decoration:none}
@media(max-width:1100px){.lighthouse-mascot{width:108px;right:12px}.mascot-character{width:108px;height:162px}.mascot-dialog{bottom:180px}.mascot-caption{font-size:10px}}
@media(max-width:600px){.lighthouse-mascot{bottom:max(12px,env(safe-area-inset-bottom));right:10px}.mascot-dialog{width:min(260px,calc(100vw - 40px));bottom:180px}.mascot-caption{display:none}}
@media(prefers-reduced-motion:reduce){.mascot-character{transition:none}.mascot-character:hover{transform:none}.mascot-character.motion-ready canvas{animation:none}}