.ec-bar { isolation: isolate; }
.ec-lit { transition: color 300ms ease, opacity 300ms ease, text-shadow 300ms ease, background 300ms ease; }
/* EnergySweep: pan the sheen IMAGE, so the travel is the same whatever width
   the caller picks and both exits happen while the gradient is transparent.

   THE `infinite` HERE IS A FALLBACK AND NOT THE BEHAVIOUR. EnergySweep takes
   the element over on mount and runs one traverse at a time, each at its own
   speed with its own rest after it — see the component. This rule is what
   paints between first paint and hydration, and what a document with no JS
   gets; the timing function is the part it keeps owning either way. */
@keyframes ec-sweep { 0% { background-position: -30% 0 } 100% { background-position: 130% 0 } }
.ec-sweep { animation: ec-sweep 17s ease-in-out infinite; }
@keyframes ec-tick-in { from { opacity: 0; transform: translateY(2px); letter-spacing: 0.4em } to { opacity: 1; transform: none } }
.ec-tick-in { animation: ec-tick-in 460ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@keyframes ec-pulse-dot { 0%, 100% { opacity: 1; box-shadow: 0 0 6px currentColor } 50% { opacity: 0.35; box-shadow: 0 0 1px currentColor } }
.ec-pulse-dot { animation: ec-pulse-dot 1.8s ease-in-out infinite; }

/* THE CROWN KEYS. One chassis for every control in the crown: the scope
   field's vocabulary — the same inset hairline and the same dim-to-full ink
   answer — worn by Home, Sound, the width key and the browser's fullscreen
   control alike, so the row reads as keys cut from one plate rather than
   three kits meeting in a corridor. It began as the width key alone,
   labelled because "the width button" is what the operator calls it; the
   operator then asked for the rest of the row to speak the same style. */
.ec-crownkey {
  display: inline-flex; align-items: center; gap: 6px;
  height: 21px; padding: 0 8px;
  font: inherit; font-size: 0.5625rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--theme-ink-dim);
  background: color-mix(in srgb, var(--nilla-bg) 52%, transparent);
  border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nilla-accent) 16%, transparent);
  transition: box-shadow 200ms ease, background 200ms ease, color 200ms ease;
}
.ec-crownkey:hover, .ec-crownkey:focus-visible {
  color: var(--nilla-text);
  background: color-mix(in srgb, var(--nilla-bg) 72%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-accent-2) 46%, transparent);
  outline: none;
}
.ec-crownkey[data-pressed="1"] {
  color: var(--theme-accent-2);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--theme-accent-2) 62%, transparent),
    inset 0 -2px 0 0 color-mix(in srgb, var(--theme-accent-2) 72%, transparent);
}
.ec-crownkey svg { flex: 0 0 auto; }
/* The crown is tight on narrow windows — the words yield exactly as the
   scope's CTRL K chip does at the same width, and the glyphs hold the keys. */
@media (max-width: 720px) { .ec-crownkey span { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .ec-sweep { animation: none; display: none; }
  .ec-tick-in { animation: none; }
  .ec-pulse-dot { animation: none; }
  .ec-lit { transition: none; }
  .ec-crownkey { transition: none; }
}