:root {
  font-family: 'Montserrat', sans-serif;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
}

.container {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  position: relative;
}

#viewport {
  background-color: black;
  width: 100%;
  height: 100%;
  cursor: none;
}

#menuItems {
  position: relative;
  z-index: 1000;
}

.list-item {
  font-weight: 100;
  font-size: 14px;
  color: white;
  display: flex;
  justify-content: right;
  align-items: center;
  /* Emphasis is drawn rather than re-weighted — see .selectedItem. Two
     transparent shadows so the list matches the selected state and can
     interpolate between them. */
  text-shadow: 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(255, 255, 255, 0);
  transition: text-shadow 0.18s ease-in-out, color 0.18s ease-in-out;
  cursor: pointer;
}

/* Thicken the selected label where it stands.
   Switching font-weight re-measures the text, and because the items are
   right-aligned along the arc the word grows leftward — so every letter slides
   1.5-3px sideways as the selection moves and the menu appears to breathe.
   Painting the glyph either side of itself leaves the advance widths
   untouched: the word stays exactly where it is and only gets heavier. Zero
   blur, so it stays crisp at 14px. */
.list-item.selectedItem {
  text-shadow: 0.35px 0 0 currentColor, -0.35px 0 0 currentColor;
}

#pointerDot, #pointerLine {
  transition: all 100ms ease;
}

/* The arc and the pointer are light, not paint, so they may only ever add to
   what is beneath them. Composited normally the beam's mid-blue sits over the
   arc's brighter cyan and pulls it down — the glow was dimming the very thing
   it crosses, and tinting artwork besides. screen cannot darken, so the arc
   survives the beam and covers keep their own tone.

   The cost is that over near-white artwork the beam approaches invisibility.
   That is the honest behaviour for light falling on an already-bright surface,
   and the pointer earns its keep against the menu, which is black. */
#mainArcLayer,
#anglePointer,
#pointerDot {
  mix-blend-mode: screen;
}

/* SVG filters */
#blurPointFilter {
  filter: blur(2px);
}

#exposureFilter {
  filter: brightness(2);
}

#blurPointerFilter {
  filter: blur(6px);
}


#mainMenu.slide-out #mainArc,
#mainMenu.slide-out #menuItems {
  transform: translateX(-100%);
}

/* Remove the animation from the main container */
#mainMenu {
  transition: none;
  transform: none;
}

/* Ensure volume arc stays in place */
#volumeArc {
  transition: none;
  transform: none !important;
}

/* Ensure content area stays in place */
#contentArea {
  transition: opacity 0.25s ease-in-out;
  position: absolute;
  top: 20px;
  left: 180px;
  z-index: 1;
  width: 820px;
  height: 700px;
}

.list-item:hover {
  text-shadow: 0.35px 0 0 currentColor, -0.35px 0 0 currentColor;
  color: rgba(102,153,255,1);
}

/* ── Shared media view (PLAYING + CD) ── */
.media-view {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  overflow: hidden;
}

.media-view-artwork {
  width: 60%;
  aspect-ratio: 1;
  margin: 20px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  transition: all 0.3s ease-in-out;
}

.media-view-artwork img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: opacity 0.6s ease-in-out;
}

.media-view-info {
  width: 80%;
  padding: 15px;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
}

.media-view-title,
.media-view-artist,
.media-view-album {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.2s ease;
}

.media-view-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

.media-view-artist {
  font-size: 18px;
  margin-bottom: 4px;
}

.media-view-album {
  font-size: 16px;
  opacity: 0.8;
}

/* ── Immersive PLAYING mode ──
   Pure CSS transform on artwork — no layout changes, GPU-accelerated.
   JS drives all visual state via inline styles (laser tracking = no transition,
   idle/exit = CSS transition enabled via .immersive-transitioning class).

   Artwork normal center: content-area (410, 300) = screen (590, 320)
   Immersive center:      content-area (167, 350) = screen (347, 370)
   → translate(-243px, 50px) scale(1.21)
   Result: 595×595 artwork, left edge ≈ screen x50, right ≈ x645. Within 870 cutoff.
   Overlay info at content-area left 480 = screen 660. Width 200 → ends at 860. OK.
   Overlay bottom-aligned with artwork bottom at content-area y ≈ 648 → bottom: 52px.
*/

/* Allow artwork to overflow container when transforming left */
#now-playing.immersive-active {
  overflow: visible;
}

/* Override base "transition: all" while immersive — prevents unwanted
   transitions on transform/opacity during media updates (song changes).
   Tracking/transitioning rules below override this when active. */
#now-playing.immersive-active .media-view-artwork {
  transition: none;
}
#now-playing.immersive-active .media-view-info {
  transition: none;
}

/* Short transition during laser tracking — smooths discrete hardware steps */
#now-playing.immersive-tracking .media-view-artwork {
  transition: transform 100ms ease-out;
}
#now-playing.immersive-tracking .media-view-info {
  transition: opacity 100ms ease-out;
}

/* Longer transitions when entering/exiting via idle timer */
#now-playing.immersive-transitioning .media-view-artwork {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
#now-playing.immersive-transitioning .media-view-info {
  transition: opacity 0.3s ease;
}

/* Immersive info overlay (created by immersive-mode.js) */
.immersive-info {
  position: absolute;
  left: 495px;
  bottom: 60px;
  width: 280px;
  text-align: left;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

.immersive-info-title  { font-size: 26px; font-weight: bold; margin-bottom: 12px; }
.immersive-info-artist { font-size: 18px; margin-bottom: 8px; }
.immersive-info-album  { font-size: 15px; opacity: 0.8; }

/* Canvas / music-video availability dots.
   ● before title  = Spotify Canvas found for this track.
   ● before artist = YouTube music video found for this track.
   Both animate in via the same opacity transition as the parent overlay.
   Absolute positioning keeps text at a fixed position — dot floats left. */
.immersive-info-title.has-canvas::before,
.immersive-info-artist.has-video::before {
  content: '●';
  font-size: 10px;
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
}

/* Allow the dot to render outside the element box without clipping text */
.immersive-info-title.has-canvas,
.immersive-info-artist.has-video {
  overflow: visible;
}

.immersive-info-title,
.immersive-info-artist,
.immersive-info-album {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.25s ease;
}

/* PLAYING + CD view backgrounds */
#now-playing,
#cd-view {
  background: black;
}

.slide-up-enter {
  opacity: 0;
  transform: translateY(30px);
}

.slide-up-leave {
  opacity: 0;
  transform: translateY(-30px);
}

/* Webpage iframe views (SECURITY, CLIMATE, etc.) */
.webpage-container {
  background: black;
  overflow: hidden;
  pointer-events: none !important;
}

.webpage-iframe {
  pointer-events: auto !important;
  z-index: 99 !important;
}

/* Add styles for scrollable content */
.scrollable-content {
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  height: 100%;
  width: 100%;
}

/* Optional scrollbar styling for modern browsers */
.scrollable-content::-webkit-scrollbar {
  width: 6px;
}

.scrollable-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.scrollable-content::-webkit-scrollbar-thumb {
  background: rgba(102, 153, 255, 0.6);
  border-radius: 3px;
}

/* Splash screen overlay */
#splash-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: black;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.8s ease-out;
  pointer-events: none;
}

#splash-overlay.fade-out {
  opacity: 0;
}

#splash-overlay.hidden {
  display: none;
}

#splash-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Camera Overlay Styles */
#camera-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 1024px;
  height: 768px;
  background: rgba(0, 0, 0, 0.95);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  pointer-events: none;
}

#camera-overlay.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.camera-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.camera-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.camera-live-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
}

.camera-live-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e53935;
  box-shadow: 0 0 10px #e53935, 0 0 20px rgba(229, 57, 53, 0.5);
  animation: pulse-live 1.5s ease-in-out infinite;
}

.camera-live-text {
  color: #e53935;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
}

@keyframes pulse-live {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 10px #e53935, 0 0 20px rgba(229, 57, 53, 0.5);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.85);
    box-shadow: 0 0 5px #e53935, 0 0 10px rgba(229, 57, 53, 0.3);
  }
}

.camera-feeds-dual {
  display: flex;
  flex-direction: row;
  gap: 24px;
  flex-wrap: nowrap;
}

.camera-feed-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.camera-feed-label {
  color: white;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.camera-feed-container {
  position: relative;
  width: 440px;
  height: 330px;
  background: #0a0a0a;
  border-radius: 4px;
  overflow: hidden;
}

.camera-feed {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.camera-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  letter-spacing: 1px;
}

/* Navigation hint - matches system.html nav-hint style */
.camera-nav-hint {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 20px;
  font-size: 12px;
  color: #444;
}

.camera-nav-hint > span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.camera-key {
  background: #1a1a1a;
  padding: 4px 10px;
  border-radius: 3px;
  color: #666;
  font-weight: 600;
  font-size: 13px;
  min-width: 28px;
  text-align: center;
}

/* ── CD View ── */

/* Loading state */
.cd-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: opacity 0.6s ease;
  position: absolute;
  top: 0;
  left: 0;
}

.cd-hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}

/* Spinning disc — pure CSS */
.cd-disc {
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #111 18%, transparent 19%),
    repeating-radial-gradient(circle at center, transparent 0px, transparent 3px, rgba(60,60,60,0.25) 3.5px, transparent 4px),
    radial-gradient(circle at center, #1a1a1a 20%, #222 40%, #1a1a1a 60%, #222 80%, #1a1a1a 100%);
  box-shadow: 0 0 30px rgba(0,0,0,0.6), inset 0 0 20px rgba(0,0,0,0.4);
  animation: cd-spin 3s linear infinite;
  position: relative;
}

.cd-disc::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, #444 40%, #222 100%);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 4px rgba(0,0,0,0.8);
}

@keyframes cd-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Loading text with animated dots */
.cd-loading-text {
  margin-top: 24px;
  font-size: 18px;
  color: #888;
  letter-spacing: 1px;
}

.cd-dots span {
  animation: cd-dot-blink 1.4s infinite;
  opacity: 0;
}

.cd-dots span:nth-child(1) { animation-delay: 0s; }
.cd-dots span:nth-child(2) { animation-delay: 0.2s; }
.cd-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes cd-dot-blink {
  0%, 20%  { opacity: 0; }
  40%      { opacity: 1; }
  100%     { opacity: 0; }
}

/* ── Playing View Flip (generic, used by any source's PLAYING preset) ── */

.playing-artwork-slot {
  perspective: 800px;
  overflow: visible;
}

.playing-flipper {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}

.playing-flipper-snap {
  transition: transform 150ms ease-out;
}

.playing-flipper.flipped {
  transform: rotateY(180deg);
}

.playing-face {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
}

.playing-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.playing-back {
  transform: rotateY(180deg);
}

/* ── CD Back Face Track Listing ── */
.cd-back-tracklist {
  width: 100%;
  height: 100%;
  background: #111;
  border-radius: 8px;
  padding: 16px 20px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #ccc;
  font-size: 14px;
}
.cd-back-header {
  font-size: 13px;
  color: #888;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cd-back-track {
  display: flex;
  align-items: baseline;
  padding: 2px 0;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
}
.cd-back-track-playing {
  color: #fff;
  font-weight: 600;
}
.cd-back-num {
  color: #666;
  min-width: 22px;
  text-align: right;
  flex-shrink: 0;
}
.cd-back-track-playing .cd-back-num {
  color: #aaa;
}
.cd-back-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cd-back-dur {
  color: #666;
  flex-shrink: 0;
  font-size: 12px;
}

/* ── CD Arc Track Browser (matches softarc layout exactly) ── */

.cd-arc-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Matches .arc-item: same width, gap, layout */
.cd-arc-item {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 1rem;
  pointer-events: none;
  width: 280px;
  justify-content: space-between;
  will-change: transform;
}

/* Text wrapper for name + duration/sublabel */
.cd-arc-item-text {
  text-align: right;
  flex: 1;
  min-width: 0;
}

/* Name: allow 2-line wrapping */
.cd-arc-item-name {
  font-size: 0.875rem;
  color: white;
  font-weight: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-line;
  line-height: 1.2;
}

.cd-arc-item-name.selected {
  font-size: 1.125rem;
  font-weight: bold;
}

.cd-arc-item-playing .cd-arc-item-name {
  color: rgba(102, 153, 255, 1);
}

/* Duration line under track name */
.cd-arc-item-duration {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}

/* Sublabel (artist on artwork items) */
.cd-arc-item-sublabel {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Matches .item-image: 128px square, same border-radius */
.cd-arc-item-badge {
  width: 8rem;
  height: 8rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
  overflow: hidden;
}

.cd-arc-item-selected .cd-arc-item-badge {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  font-weight: 400;
}

.cd-arc-item-playing .cd-arc-item-badge {
  background: rgba(102, 153, 255, 0.15);
  color: rgba(102, 153, 255, 1);
}

.cd-arc-item-eject .cd-arc-item-badge {
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.3);
  font-size: 2.5rem;
}

/* Badge image (for artwork submenu item) */
.cd-arc-item-badge-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}

/* Toggle active state */
.cd-arc-item-toggle-on .cd-arc-item-badge {
  background: rgba(102, 153, 255, 0.15);
  color: rgba(102, 153, 255, 1);
}

/* Back item */
.cd-arc-item-back .cd-arc-item-badge {
  font-size: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
}


/* Volume Overlay */
#volume-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 1024px;
  height: 768px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99990;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

#volume-overlay.visible {
  opacity: 1;
}

#volume-arc-svg {
  position: absolute;
  top: 0;
  left: 0;
}

#volume-device {
  position: absolute;
  bottom: 80px;
  right: 60px;
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 1px;
}

/* ── Spotify Source ── */

.spotify-arc-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.spotify-arc-item {
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 96px;
  white-space: nowrap;
  pointer-events: none;
  transform-origin: left center;
  transition: none;
  will-change: transform, opacity;
}

.spotify-arc-image {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.spotify-arc-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  background: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #666;
  flex-shrink: 0;
}

.spotify-arc-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #999;
  background: #1a1a1a;
  border-radius: 4px;
  flex-shrink: 0;
}

.spotify-arc-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 500px;
  line-height: 1.3;
}

.spotify-arc-sublabel {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 300;
}

.spotify-arc-selected .spotify-arc-label {
  color: #fff;
  font-weight: 400;
}

.spotify-arc-selected .spotify-arc-image {
  box-shadow: 0 0 20px rgba(30, 215, 96, 0.3);
}

.spotify-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #666;
  font-size: 16px;
  font-weight: 300;
  line-height: 2;
}

/* ── JOIN Source ── */

#join-arc-container .cd-arc-item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  -webkit-line-clamp: unset;
}

/* Players with no content — dimmed */
.join-no-content .cd-arc-item-name { color: rgba(255, 255, 255, 0.35); }
.join-no-content .cd-arc-item-sublabel { color: rgba(255, 255, 255, 0.15); }

/* EQ bars — playing indicator */
.join-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  margin-left: 8px;
  vertical-align: middle;
}
.join-eq span {
  display: block;
  width: 2px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 1px;
  transform-origin: bottom;
  animation: join-eq 0.8s ease-in-out infinite alternate;
}
.join-eq span:nth-child(1) { height: 4px; animation-delay: 0s; }
.join-eq span:nth-child(2) { height: 8px; animation-delay: 0.2s; }
.join-eq span:nth-child(3) { height: 6px; animation-delay: 0.4s; }
@keyframes join-eq {
  0% { transform: scaleY(0.3); }
  100% { transform: scaleY(1); }
}

/* Unjoin badge — X icon */
.join-unjoin-badge {
  color: rgba(255, 255, 255, 0.5);
}

/* Group icon */
.join-group-icon {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.5px;
}

.join-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #666;
  font-size: 16px;
  font-weight: 300;
  line-height: 2;
}

/* ── Spotify Canvas Video Panel ────────────────────────────────── */

.canvas-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 1024px;
  height: 768px;
  z-index: 99989;
  opacity: 0;
  pointer-events: none;
  transition: none;
  background: #000;
  overflow: hidden;
}

.canvas-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
}

/* Thin progress bar at bottom edge */
.canvas-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  z-index: 3;
}

.canvas-progress-fill {
  height: 100%;
  width: 0%;
  background: rgba(255, 255, 255, 0.5);
  transition: width 0.1s linear;
}