/* Page base + loader for the Codeo prospect demos. Brand colours come from index.html (--accent, --ink, --paper, --font). */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: #eef0f2; color: var(--ink); font-family: var(--font);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
#player-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none;
  background: radial-gradient(ellipse at 40% 45%, #ffffff 0%, #e4e7eb 70%);
  touch-action: none;
}

#loader {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, #eceef1 75%);
  transition: opacity .6s ease;
}
#loader.done { opacity: 0; pointer-events: none; }
#loader .brand { min-height: 56px; display: flex; align-items: center; justify-content: center; }
#loader .brand img { max-height: 64px; max-width: min(320px, 70vw); object-fit: contain; }
#loader .wordmark { font-size: 30px; font-weight: 700; letter-spacing: .02em; color: var(--ink); }
#loader .product { font-size: 15px; color: color-mix(in srgb, var(--ink) 65%, transparent); letter-spacing: .01em; }
#loader .bar {
  width: min(340px, 72vw); height: 4px; border-radius: 4px; overflow: hidden; margin-top: 18px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}
#loader .bar span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 4px; transition: width .25s ease; }
#loader .status {
  width: min(340px, 72vw); display: flex; justify-content: space-between;
  font-size: 12px; color: color-mix(in srgb, var(--ink) 55%, transparent); font-variant-numeric: tabular-nums;
}
#loader .message { max-width: min(420px, 86vw); text-align: center; font-size: 13px; opacity: 0; transition: opacity .3s; }
#loader .message.visible { opacity: 1; }
#loader .message.error { color: #b3261e; }
#loader .message .detail { display: block; margin-top: 6px; opacity: .6; font-size: 11px; word-break: break-word; }
#loader .credit { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); font-size: 12px; color: color-mix(in srgb, var(--ink) 45%, transparent); }