/* A live sculpture beside the playfield; a full scene on demand. */
#clarityCompanion[hidden]{display:block!important;visibility:hidden!important;pointer-events:none!important}
#clarityCompanion{position:fixed;right:20px;top:calc(50% - 72px);width:176px;z-index:48;background:#060c0a;color:#eef4dc;border:1px solid #a8b59255;box-shadow:0 9px 26px #0009;font-family:inherit;isolation:isolate}
#clarityCompanion .stream-viewport{height:112px;position:relative;overflow:hidden;background:#000}
#clarityCompanion iframe{width:100%;height:100%;border:0;display:block;pointer-events:none}
#clarityCompanion button{font-family:inherit;font-size:10px;font-weight:600;line-height:1.2;letter-spacing:.03em;border:0;border-radius:0;color:#edf5d4;background:#111c16;cursor:pointer;min-height:32px;padding:8px;box-shadow:none;transition:background-color 150ms,transform 150ms}
#clarityCompanion button:hover{background:#35492e}
#clarityCompanion button:active{transform:translateY(1px)}
#clarityCompanion button:focus-visible{outline:2px solid #dcf2a7;outline-offset:2px}
#clarityCompanion .stream-open{position:absolute;inset:0;background:transparent;display:flex;align-items:flex-start;justify-content:flex-end;padding:9px;width:100%}
#clarityCompanion .stream-open:hover{background:#b8da8112}
#clarityCompanion svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
#clarityCompanion .stream-bar{display:flex;align-items:center;justify-content:space-between;padding-left:9px;border-top:1px solid #a8b59233;gap:3px}
#clarityCompanion .stream-bar>span{font-size:9px;letter-spacing:.07em;white-space:nowrap}
#clarityCompanion .stream-status{position:absolute;inset:45% 8px auto;margin:0;font-size:11px;text-align:center;color:#d9e7c6;pointer-events:none}
#clarityCompanion .stream-cinema{display:none}
#clarityCompanion .stream-retry{position:absolute;inset:65% 18% auto}
#clarityCompanion.expanded{inset:0;width:auto;z-index:500;border:0;animation:stream-arrive 420ms cubic-bezier(.16,1,.3,1)}
#clarityCompanion.expanded .stream-viewport{height:100%}
#clarityCompanion.expanded .stream-open{display:none}
#clarityCompanion.expanded .stream-bar{position:absolute;inset:22px 28px auto;border:0;background:transparent;padding:0}
#clarityCompanion.expanded .stream-bar>span{font-size:12px}
#clarityCompanion.expanded .stream-pause{min-width:80px;min-height:44px}
#clarityCompanion.expanded .stream-cinema{display:block;position:absolute;left:6%;bottom:7%;right:6%;pointer-events:none}
#clarityCompanion.expanded h2{font-size:clamp(32px,6vw,76px);font-weight:500;letter-spacing:-.035em;line-height:1;margin:0 0 18px}
#clarityCompanion.expanded .stream-cinema p{font-size:11px;color:#d9e7c6;margin:0 0 22px;max-width:48ch;line-height:1.5}
#clarityCompanion.expanded .stream-close{pointer-events:auto;background:#dbe7aa;color:#152216;padding:16px 25px;min-height:48px;font-size:12px}
@keyframes stream-arrive{from{clip-path:inset(7% 7%);opacity:.65}to{clip-path:inset(0);opacity:1}}
@media(max-width:700px){#clarityCompanion{top:94px;right:12px;width:124px}#clarityCompanion .stream-viewport{height:78px}#clarityCompanion .stream-bar{padding-left:6px;flex-wrap:wrap}#clarityCompanion .stream-bar>span{font-size:8px}#clarityCompanion .stream-pause{min-height:32px;width:100%;text-align:left}#clarityCompanion.expanded .stream-bar{inset:14px 18px auto;flex-wrap:nowrap}#clarityCompanion.expanded .stream-pause{width:auto;text-align:center}#clarityCompanion.expanded .stream-cinema{bottom:6%}}
@media(max-height:500px){#clarityCompanion{top:80px;width:128px}#clarityCompanion .stream-viewport{height:70px}}
@media(prefers-reduced-motion:reduce){#clarityCompanion.expanded{animation:none}#clarityCompanion button{transition:background-color 120ms;transform:none!important}}

#clarityCompanion:not(.expanded) iframe{width:720px;height:456px;transform:scale(.244444);transform-origin:top left}
#clarityCompanion.expanded iframe{width:100%;height:100%;transform:none}
@media(max-width:700px){#clarityCompanion:not(.expanded) iframe{transform:scale(.172222)}}
@media(max-height:500px){#clarityCompanion:not(.expanded) iframe{transform:scale(.177777)}}

/* spin18: keep the stream off chrome that the player needs */
@media(max-width:920px){
  body.playing #clarityCompanion:not(.expanded),
  body[data-world-view]:not([data-world-view='entrance']) #clarityCompanion:not(.expanded){
    top:auto;bottom:88px;right:12px;width:110px;z-index:30
  }
  #clarityCompanion:not(.expanded) .stream-viewport{height:70px}
  #clarityCompanion:not(.expanded) iframe{transform:scale(.152778)}
  #clarityCompanion:not(.expanded) .stream-bar{flex-wrap:wrap;padding-left:6px}
  #clarityCompanion:not(.expanded) .stream-bar>span{font-size:8px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  #clarityCompanion:not(.expanded) .stream-pause{width:100%;text-align:left}
}
@media(max-width:560px){
  body.playing #clarityCompanion:not(.expanded){visibility:hidden;pointer-events:none}
}