/* Shared look of the project player pages (projects/<slug>.html). */
html, body { margin: 0; height: 100%; background: #0F172A; }
body {
  display: flex; flex-direction: column; height: 100vh; height: 100dvh;
  font: 500 14px/1 Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.bar {
  flex: none; display: flex; align-items: center; gap: 0.75rem;
  height: 40px; padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
  background: #0F172A; color: #CBD5E1;
}
.bar a { color: inherit; text-decoration: none; }
.logo { font-weight: 700; color: #06B6D4; letter-spacing: 0.02em; }
.title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #94A3B8; }
.back { padding: 7px 12px; border-radius: 999px; background: rgba(6, 182, 212, 0.15); color: #67E8F9 !important; white-space: nowrap; }
.back:hover, .back:focus-visible { background: rgba(6, 182, 212, 0.3); }
iframe { flex: 1; width: 100%; border: 0; background: #fff; }