.companion-dock{margin:0 0 4px;color:var(--muted,#668173)}
.companion-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:48px}
.companion-intro{font-size:11px;display:inline-flex;align-items:center;gap:7px;color:var(--muted,#668173)}.companion-intro>span{color:var(--accent,#63c8b9);font-size:19px}
.companion-more{display:contents}.companion-tools button{min-height:46px;min-width:46px;padding:8px 11px;border:1px solid var(--line,#b9d6cd);background:transparent;color:var(--accent-strong,#087c76);font-size:11px;border-radius:10px;box-shadow:none;touch-action:manipulation}
.companion-tools button:focus-visible{outline:3px solid var(--accent,#77ddd0);outline-offset:3px}
.companion-tools .companion-start{font-weight:650;background:var(--accent-soft,#e5f3ec)}
.companion-band{height:132px;position:relative;touch-action:pan-y;background:linear-gradient(transparent 86%,#78bdad0a);border-bottom:1px solid var(--line,#cbe1d7);border-radius:0 0 50% 50%;margin:1px 0 0}
.companion-status{font-size:11px;line-height:1.6;margin:4px 0 9px;max-width:650px;color:var(--muted,#6b8175)}.companion-status:empty{display:none}
.companion-roamer{position:fixed;left:0;top:0;width:106px;height:116px;pointer-events:none;z-index:7;contain:layout paint;will-change:transform;transform-origin:top left}
.companion-roamer canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.companion-roamer canvas{pointer-events:auto;touch-action:pan-y;cursor:pointer;border-radius:18px;-webkit-tap-highlight-color:transparent}
.companion-roamer canvas:focus-visible{outline:3px solid var(--accent,#77ddd0);outline-offset:-4px}
.companion-dock:is([data-companion=napping],[data-companion=playing]){position:relative;min-height:136px;padding-right:128px}
.companion-dock:is([data-companion=napping],[data-companion=playing]) .companion-band{position:absolute;right:0;top:4px;width:120px;height:124px;border:0;background:none;margin:0}
.companion-dock[data-companion=napping] .companion-toy{display:none}
.companion-yarn{position:fixed;left:0;top:0;width:44px!important;height:44px!important;min-width:44px;min-height:44px;margin:0;padding:0!important;border:0!important;border-radius:50%;background:transparent!important;box-shadow:none!important;pointer-events:auto;touch-action:none;cursor:grab;z-index:8;will-change:transform}
.companion-yarn::before{content:'';position:absolute;inset:10px;border-radius:50%;background:repeating-radial-gradient(ellipse at 35% 35%,#96f0dc 0 2px,#3caf9f 3px 4px,#6bd6c2 5px 7px);box-shadow:inset -3px -4px 5px #176f6e77,0 3px 5px #031b2466}
.companion-yarn::after{content:'';position:absolute;width:15px;height:10px;border-bottom:2px solid #68d5c5;border-radius:50%;right:0;bottom:8px;transform:rotate(-30deg)}
.companion-yarn:hover,.companion-yarn:active{filter:brightness(1.12)}
.companion-yarn:focus-visible{outline:3px solid var(--accent,#77ddd0);outline-offset:0}
.companion-yarn:disabled{cursor:default;opacity:.7}
.companion-roamer>svg{display:block;width:100%;height:100%}
.companion-more[hidden],.companion-band[hidden],.companion-roamer[hidden],.companion-yarn[hidden]{display:none!important}
[data-theme=dark] .companion-tools button{background:transparent;color:var(--accent,#77ddd0);border-color:var(--line,#365e53)}
[data-theme=dark] .companion-tools .companion-start{background:var(--accent-soft,#213e34)}
@media(max-width:700px){.companion-tools{gap:5px}.companion-intro{font-size:12px;margin-right:3px}.companion-tools button{font-size:12px;padding:8px 10px}.companion-dock[data-companion=playing] .companion-intro,.companion-dock[data-companion=napping] .companion-intro{width:100%;margin-top:3px}.companion-status{font-size:12px}.companion-band{height:132px}}
@media(prefers-reduced-motion:reduce){.companion-tools button{transition:none}.companion-tools button:hover{transform:none}}