/* ============================================================
   LIBERATED WAVEFORMS — STANDARD HEADER CHROME  (chrome.css)
   THE one header used on EVERY page. Self-contained (literal
   colors) so it renders identically with or without system.css.
   Markup (identical on every page):
     <div class="tool-chrome">
       <a class="tc-logo" href="/" aria-label="Liberated Waveforms"><img src="/assets/favicon-64.png" alt="LW"></a>
       <a class="tc-icon tc-cta" href="/join.html" data-lw-event="cta:bridge" aria-label="Enter Oracle"><svg .../></a>
     </div>
   ============================================================ */
.tool-chrome {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 12px; background: none; border: none; pointer-events: none;
}
.tool-chrome > * { pointer-events: auto; }
.tc-logo { pointer-events: auto; display: flex; align-items: center; text-decoration: none; }
.tc-logo img { height: 36px; width: auto; object-fit: contain; opacity: .8; transition: opacity 0.2s; }
.tc-logo:hover img { opacity: 1; }
.tc-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,0.5); border: 1px solid rgba(245,245,220,0.18);
  backdrop-filter: blur(6px); transition: transform 0.2s, border-color 0.2s, background 0.2s;
  text-decoration: none;
}
.tc-cta {
  width: 52px; height: 52px; background: #A3FF12; border-color: #A3FF12;
  box-shadow: 0 0 18px rgba(163,255,18,0.4); animation: tc-pulse 2.4s infinite;
}
.tc-cta svg { width: 26px; height: 26px; fill: #000; }
.tc-cta:hover { transform: scale(1.07); }
@keyframes tc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(163,255,18,0.5); }
  70%  { box-shadow: 0 0 0 16px rgba(163,255,18,0); }
  100% { box-shadow: 0 0 0 0 rgba(163,255,18,0); }
}
.has-tool-chrome { padding-top: 60px; }