/* A pearl-edged instrument, kept inside the scene so fullscreen retains it. */
.concept-player .v-transport-zone{
  position:absolute;z-index:20;top:0;left:50%;transform:translateX(-50%);
  width:min(390px,100%);padding:14px 12px 24px;padding-top:max(14px,env(safe-area-inset-top));
  opacity:0;transition:opacity .35s ease;pointer-events:auto;
}
.concept-player:not(.film-active) .v-transport-zone{display:none}
.concept-player .v-transport-zone.is-visible,
.concept-player .v-transport-zone.is-paused,
.concept-player .v-transport-zone:hover,
.concept-player .v-transport-zone:has(:focus-visible){opacity:1}
.concept-player .v-transport{
  display:flex;align-items:center;justify-content:center;gap:5px;width:max-content;max-width:100%;margin:auto;
  padding:3px 12px;position:relative;border:1px solid transparent;border-radius:2px;
  background:linear-gradient(110deg,#11091eef,#1b1029e8) padding-box,
    linear-gradient(110deg,#9ef0ff66,#c9a6ff99,#ffb3df99,#ffe6b066) border-box;
  box-shadow:0 6px 24px #03010855,0 0 22px #b98ef40c;backdrop-filter:blur(12px);
}
.concept-player .v-transport:before,.concept-player .v-transport:after{
  content:'';position:absolute;top:50%;width:4px;height:4px;transform:translateY(-50%) rotate(45deg);
  background:#c9a6ff;box-shadow:0 0 8px #ffb3df55;
}
.concept-player .v-transport:before{left:4px}.concept-player .v-transport:after{right:4px}
.concept-player .v-control{
  width:40px;height:40px;padding:4px;border:0;background:none;color:#d9c2f7;
  display:grid;place-items:center;cursor:pointer;position:relative;transition:color .2s,background .2s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.concept-player .v-control svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.concept-player .v-control .v-cell{opacity:.24;stroke-width:.7}
.concept-player .v-control svg circle{fill:currentColor;stroke:none}
.concept-player .v-control:hover,.concept-player .v-control:focus-visible{color:#9ef0ff;background:#b98ef422}
.concept-player .v-control:focus-visible{outline:1px solid #9ef0ff;outline-offset:1px}
.concept-player .v-control[aria-pressed=true],.concept-player .v-control.is-on{color:#ffb3df}
.concept-player .v-control[aria-pressed=true]:after{
  content:'';position:absolute;bottom:0;width:3px;height:3px;transform:rotate(45deg);background:currentColor;
}
.concept-player .v-fullscreen{margin-left:7px}
.concept-player .v-tip{
  position:absolute;top:calc(100% + 13px);left:50%;transform:translateX(-50%);white-space:nowrap;
  font:9px/1.5 var(--font-mono);letter-spacing:.02em;color:#ece6f7;background:#11091ef5;
  border:1px solid #b98ef444;padding:5px 8px;pointer-events:none;opacity:0;
}
.concept-player .v-control:hover .v-tip,.concept-player .v-control:focus-visible .v-tip{opacity:1}
.concept-player .v-exit .v-tip{left:auto;right:-8px;transform:none}
.concept-player .v-now{font:9px/1.5 var(--font-mono);color:#e6d7ff;text-shadow:0 1px 5px #0a0613;margin:10px 0 0;text-align:center;letter-spacing:.04em;pointer-events:none}
.concept-player .v-transport:has(.v-control:hover) + .v-now,
.concept-player .v-transport:has(.v-control:focus-visible) + .v-now{visibility:hidden}
.concept-player .hh-transport{display:none}
.concept-player:not(.film-active) .compass.live .c-wake{display:inline-flex}
@media (orientation:portrait) and (max-width:760px){
  .concept-player .v-transport-zone{width:min(390px,100%);padding-inline:6px;opacity:1}
  .concept-player .v-transport{padding-inline:9px;gap:1px}
  .concept-player .v-control{width:44px;height:44px;padding:6px}
  .concept-player .v-fullscreen{margin-left:3px}
  .concept-player .compass{margin-top:100px}
  .concept-player:not(.film-active) .compass{margin-top:8%}
  .concept-player .v-tip{display:none}
}
@media (prefers-reduced-motion:reduce){.concept-player .v-transport-zone{transition:none}}

/* The shell theme colours the instruments without changing the live sky. */
.concept-player[data-theme='pearl'] .sigil :is(.ink, .moon, .dial-arc:not(.track)),
.concept-player[data-theme='pearl'] .lyric .mark [stroke='currentColor']{stroke:url(#shellPearl)}
.concept-player[data-theme='pearl'] .sigil :is(.dot, .helu, text),
.concept-player[data-theme='pearl'] .lyric .mark [fill='currentColor']{fill:url(#shellPearl)}
.concept-player[data-theme='pearl'] svg:is([viewBox='-20 -20 40 40'],[viewBox='-21 -21 42 42']) [stroke]{stroke:url(#shellCell)}
.concept-player[data-theme='pearl'] svg:is([viewBox='-20 -20 40 40'],[viewBox='-21 -21 42 42']) [fill='currentColor']{fill:url(#shellCell)}
.concept-player[data-theme='pearl'] .v-control svg{stroke:url(#shellControl)}