/* cosmos-bar.css — vendored placeholder. Do not edit here.
   Source: cosmos-atlas/src/cosmos-bar/styles.css (PLACEHOLDER block).
   Regenerated by scripts/emit-cosmos-bar.mjs. */
:root { --cosmos-bar-h: 36px; }
@media (max-width: 640px) { :root { --cosmos-bar-h: 32px; } }

cosmos-bar,
.cosmos-bar-placeholder {
  display: block;
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--cosmos-bar-h);
  width: 100%;
  background: #02030E;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  color: #F2EDE3;
  /* layout containment is fine, but paint containment would trap fixed-positioned
     descendants (mobile sheet) inside the 36px bar. Don't use `contain: paint`. */
  contain: layout;
  /* Cosmos chrome stays cosmos chrome — never inherits page theme. */
  color-scheme: dark;
}
cosmos-bar:not(:defined),
.cosmos-bar-placeholder {
  /* Pre-JS state: a black strip with ✦ on the left telling visitors what this is. */
  background:
    linear-gradient(to right, rgba(255, 179, 71, 0.06) 0%, transparent 8%, transparent 100%)
    , #02030E;
  position: sticky;
  top: 0;
}
cosmos-bar:not(:defined)::after,
.cosmos-bar-placeholder::after {
  content: "✦ cosmos";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #FFD89A;
  opacity: 0.8;
}
@media (prefers-reduced-motion: reduce) {
  cosmos-bar, .cosmos-bar-placeholder { transition: none !important; }
}