:root {
  color-scheme: light dark;
  --hosted-bg: #1d1d1d;
  --hosted-fg: #f4f4f4;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--hosted-bg);
  color: var(--hosted-fg);
  font:
    14px/1.5 -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
}

#rive-stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

canvas[data-src] {
  display: block;
  width: 100%;
  height: 100%;
  /* The scene draws its own background; until it loads this stays flat. */
  outline: none;
}

#rive-status {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  transition: opacity 200ms ease;
}

#rive-status[hidden] {
  display: none;
}

#rive-status .spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(244, 244, 244, 0.25);
  border-top-color: var(--hosted-fg);
  border-radius: 50%;
  animation: rive-spin 700ms linear infinite;
}

#rive-status .message {
  max-width: 32ch;
  text-align: center;
  opacity: 0.75;
}

#rive-status.error .spinner {
  display: none;
}

@keyframes rive-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #rive-status .spinner {
    animation-duration: 2s;
  }
}

/* Parked off its edge with only the handle showing. Hover opens it with a
   mouse, focus with a keyboard, and the handle toggles .open for touch.
   Dragging the handle sets --drawer-top and data-side. */
#rive-drawer {
  --drawer-handle: 20px;
  --drawer-surface: rgba(30, 30, 30, 0.92);
  --drawer-edge: rgba(244, 244, 244, 0.1);
  --drawer-accent: #3b8eea;
  --drawer-parked: calc(100% - var(--drawer-handle));
  position: fixed;
  top: var(--drawer-top, 66%);
  right: 0;
  display: flex;
  align-items: stretch;
  /* Or a touch drag scrolls the page or selects the link's text instead of
     moving the drawer. */
  touch-action: none;
  user-select: none;
  transform: translate(var(--drawer-parked), -50%);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

#rive-drawer:focus-within,
#rive-drawer.open,
#rive-drawer.intro,
#rive-drawer.dragging {
  transform: translate(0, -50%);
}

/* A touch browser leaves :hover stuck on after a tap, which would hold the
   drawer open against the handle's toggle. */
@media (hover: hover) {
  #rive-drawer:hover {
    transform: translate(0, -50%);
  }
}

#rive-drawer.offstage {
  transform: translate(100%, -50%);
}

#rive-drawer[data-side='left'] {
  --drawer-parked: calc(var(--drawer-handle) - 100%);
  right: auto;
  left: 0;
  flex-direction: row-reverse;
}

#rive-drawer.dragging {
  transition: none;
}

#rive-drawer.dragging,
#rive-drawer.dragging * {
  cursor: grabbing;
}

#rive-drawer button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: rgba(244, 244, 244, 0.7);
  cursor: pointer;
  border: 0;
  border-radius: 6px;
  background: none;
  transition:
    color 120ms ease,
    background-color 120ms ease;
}

#rive-drawer button:hover {
  color: var(--hosted-fg);
  background: rgba(244, 244, 244, 0.1);
}

/* An accent rather than a lighter grey, which reads as a hover that stuck. */
#rive-drawer button[aria-pressed='true'] {
  color: #fff;
  background: var(--drawer-accent);
}

#rive-drawer button:focus-visible {
  outline: 2px solid var(--hosted-fg);
  outline-offset: 1px;
}

#rive-drawer button[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  /* Clears the handle, which sits where a tooltip would otherwise land. */
  right: calc(100% + var(--drawer-handle) + 14px);
  top: 50%;
  padding: 3px 8px;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  text-transform: capitalize;
  color: var(--hosted-fg);
  border: 1px solid var(--drawer-edge);
  border-radius: 5px;
  background: var(--drawer-surface);
  opacity: 0;
  transform: translate(4px, -50%);
  pointer-events: none;
  transition:
    opacity 120ms ease,
    transform 120ms ease;
}

#rive-drawer button[data-tip]:hover::after,
#rive-drawer button[data-tip]:focus-visible::after,
#rive-drawer button[data-tip].flash::after {
  opacity: 1;
  transform: translate(0, -50%);
}

#rive-drawer .panel > button[data-tip]::after {
  top: auto;
  right: auto;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, 4px);
}

#rive-drawer .panel > button[data-tip]:hover::after,
#rive-drawer .panel > button[data-tip]:focus-visible::after,
#rive-drawer .panel > button[data-tip].flash::after {
  transform: translate(-50%, 0);
}

#rive-drawer .handle {
  width: var(--drawer-handle);
  height: auto;
  color: rgba(244, 244, 244, 0.5);
  border: 1px solid var(--drawer-edge);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: var(--drawer-surface);
  backdrop-filter: blur(8px);
  cursor: grab;
}

#rive-drawer .handle:hover {
  background: var(--drawer-surface);
}

#rive-drawer[data-side='left'] .handle {
  border-right: 1px solid var(--drawer-edge);
  border-left: 0;
  border-radius: 0 8px 8px 0;
}

/* The bar mirrors too, so fit stays beside the handle and the link at the
   window edge. */
#rive-drawer[data-side='left'] .panel {
  flex-direction: row-reverse;
  border-right: 1px solid var(--drawer-edge);
  border-left: 0;
}

#rive-drawer[data-side='left'] .fits {
  padding-right: 0;
  padding-left: 6px;
  margin-right: 0;
  margin-left: 4px;
  border-right: 0;
  border-left: 1px solid var(--drawer-edge);
}

#rive-drawer[data-side='left'] .fits .current::before {
  right: 3px;
  left: auto;
  border-right-color: currentColor;
  border-left-color: transparent;
}

#rive-drawer[data-side='left'] .options {
  right: -6px;
  left: auto;
}

#rive-drawer[data-side='left'] .promo {
  margin-right: 4px;
  margin-left: 0;
  padding: 0 12px 0 8px;
  border-right: 1px solid var(--drawer-edge);
  border-left: 0;
}

/* On the left the window edge is where these would open. */
#rive-drawer[data-side='left'] .options button[data-tip]::after {
  right: auto;
  left: calc(100% + var(--drawer-handle) + 14px);
  transform: translate(-4px, -50%);
}

#rive-drawer[data-side='left'] .options button[data-tip]:hover::after,
#rive-drawer[data-side='left'] .options button[data-tip]:focus-visible::after {
  transform: translate(0, -50%);
}

#rive-drawer:hover .handle,
#rive-drawer.open .handle,
#rive-drawer.intro .handle,
#rive-drawer:focus-within .handle {
  color: rgba(244, 244, 244, 0.8);
}

#rive-drawer .panel {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border: 1px solid var(--drawer-edge);
  border-right: 0;
  background: var(--drawer-surface);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

#rive-drawer .fits {
  position: relative;
  padding-right: 6px;
  margin-right: 4px;
  border-right: 1px solid var(--drawer-edge);
}

/* Hovering it opens the options, and lighting up as well would promise a click
   that does nothing more. */
#rive-drawer .fits .current:hover {
  background: none;
}

/* Marks the one button that opens into more. */
#rive-drawer .fits .current::before {
  content: '';
  position: absolute;
  left: 3px;
  bottom: 3px;
  border: 2px solid transparent;
  border-left-color: currentColor;
  border-bottom-color: currentColor;
  opacity: 0.6;
}

/* Stacked above the bar, over the button that opened them. The padding
   bridges the gap between them, so the pointer can cross from the button to the
   options without them closing. */
#rive-drawer .options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  bottom: 100%;
  left: -6px;
  padding: 6px 6px 18px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity 120ms ease,
    transform 120ms ease,
    visibility 120ms;
}

#rive-drawer .options::before {
  content: '';
  position: absolute;
  inset: 0 0 12px;
  border: 1px solid var(--drawer-edge);
  border-radius: 10px;
  background: var(--drawer-surface);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Too near the top of the window for the options to fit above the bar. */
#rive-drawer.options-below .options {
  top: 100%;
  bottom: auto;
  padding: 18px 6px 6px;
  transform: translateY(-4px);
}

#rive-drawer.options-below .options::before {
  inset: 12px 0 0;
}

#rive-drawer .fits:focus-within .options,
#rive-drawer .fits.open .options {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (hover: hover) {
  #rive-drawer .fits:hover .options {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

#rive-drawer .promo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  padding: 0 8px 0 12px;
  color: rgba(244, 244, 244, 0.7);
  font-size: 12px;
  line-height: 28px;
  white-space: nowrap;
  text-decoration: none;
  border-left: 1px solid var(--drawer-edge);
  transition: color 120ms ease;
}

#rive-drawer .promo:hover {
  color: var(--hosted-fg);
}

#rive-drawer .promo:focus-visible {
  outline: 2px solid var(--hosted-fg);
  outline-offset: -2px;
  border-radius: 6px;
}

#rive-drawer .promo .wordmark {
  color: var(--hosted-fg);
}

#rive-drawer .promo .arrow {
  opacity: 0.6;
  transition: transform 120ms ease;
}

#rive-drawer .promo:hover .arrow {
  transform: translate(1px, -1px);
}

@media (prefers-reduced-motion: reduce) {
  #rive-drawer .promo,
  #rive-drawer .promo .arrow,
  #rive-drawer,
  #rive-drawer button,
  #rive-drawer .options,
  #rive-drawer button[data-tip]::after {
    transition: none;
  }
}