/**
 * LANE-UI — injected stylesheet. Terminal-industrial: monospace, phosphor green on
 * near-black, hot accents, hard corners. This is machinery, not a startup.
 *
 * Every interactive element re-enables pointer-events; `#ui` itself stays transparent
 * to the mouse so clicks fall through to the world.
 */

const CSS = `
#ui {
  --fk-fg: #d8ffd8;
  --fk-dim: #6a8a6a;
  --fk-faint: #3d523d;
  --fk-bg: #0d0b16;
  --fk-bg-solid: #0a0812;
  --fk-line: #2a2440;
  --fk-hot: #ff3fd4;
  --fk-cool: #3fffe0;
  --fk-amber: #ffb03f;
  --fk-red: #ff3f4a;
  --fk-clinic: #d6f5df;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.35;
  color: var(--fk-fg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  user-select: none;
}

/* ---------------------------------------------------------------- primitives */

.fk-panel {
  position: fixed;
  background: var(--fk-bg);
  border: 1px solid var(--fk-line);
  padding: 6px 8px;
  pointer-events: auto;
}

.fk-h {
  color: var(--fk-dim);
  font-size: 10px;
  letter-spacing: 0.18em;
  margin-bottom: 4px;
}

.fk-rule { height: 1px; background: var(--fk-line); margin: 6px 0; }

.fk-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--fk-line);
  padding: 1px 4px 1px 2px;
  margin: 2px 3px 2px 0;
  font-size: 11px;
  white-space: nowrap;
}
/* MDAT ore is near-black by design; without the outline its chip reads as empty. */
.fk-chip-sw {
  width: 8px; height: 8px; flex: 0 0 8px;
  outline: 1px solid rgba(216, 255, 216, 0.18);
  outline-offset: -1px;
}
.fk-chip-n { color: var(--fk-dim); }
.fk-chip.is-short .fk-chip-n { color: var(--fk-amber); }
.fk-chip.is-met .fk-chip-n { color: var(--fk-cool); }

.fk-bar { height: 6px; background: var(--fk-bg-solid); border: 1px solid var(--fk-line); }
.fk-bar-f { height: 100%; width: 0%; background: var(--fk-cool); transition: width 90ms linear; }
.fk-heat .fk-bar-f { background: var(--fk-dim); }
.fk-heat.is-throttling .fk-bar-f { background: var(--fk-amber); }
.fk-heat.is-scram .fk-bar-f { background: var(--fk-red); }

/* ---------------------------------------------------------------- top strip */

#fk-top {
  top: 10px; left: 10px;
  width: 300px;
  z-index: 11;
}
.fk-bw-nums { display: flex; justify-content: space-between; font-size: 11px; }
.fk-bw-draw { color: var(--fk-fg); }
#fk-top.is-tight .fk-bar-f { background: var(--fk-amber); }

/* ON RESERVE: amber, steady, no flashing. The tanks are covering the deficit — that is
   the factory working, not failing. Only a real brownout gets to shout. */
#fk-top.is-reserve { border-color: var(--fk-amber); }
#fk-top.is-reserve .fk-bar-f { background: var(--fk-amber); }
#fk-reserve {
  display: none;
  color: var(--fk-amber);
  letter-spacing: 0.12em;
  margin-top: 3px;
}
#fk-top.is-reserve #fk-reserve { display: block; }

#fk-top.is-brownout { border-color: var(--fk-red); animation: fk-flash 0.45s steps(2) infinite; }
#fk-top.is-brownout .fk-bar-f { background: var(--fk-red); }
#fk-brownout {
  display: none;
  color: var(--fk-red);
  font-weight: bold;
  letter-spacing: 0.2em;
  margin-top: 3px;
}
#fk-top.is-brownout #fk-brownout { display: block; }
@keyframes fk-flash { 0% { background: var(--fk-bg); } 50% { background: #2a0d12; } }

.fk-stat { display: flex; justify-content: space-between; font-size: 11px; }
.fk-stat-v { color: var(--fk-cool); }

/* CORRECTED ticker — clinical white like the enemy that made it. Hidden until first edit. */
.fk-corrected-wrap { margin-top: 4px; border-top: 1px solid var(--fk-line); padding-top: 4px; }
.fk-corrected .fk-corrected-v { color: var(--fk-clinic); }
#fk-run.is-paused { color: var(--fk-amber); }

/* ---------------------------------------------------------------- build bar */

#fk-build {
  bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  padding: 6px;
  max-width: calc(100vw - 20px);
}
.fk-build-row {
  display: flex; gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Kind tabs. A page holds at most nine so 1-9 always reaches every machine.
   v5: a single scrolling strip rather than a wrapping row — the catalog keeps growing
   (RESEARCH joined in v4 and threw REMOVE onto a line of its own), and tabs jumping to a
   second row moves every other tab under the player's cursor. */
.fk-tabs {
  display: flex; gap: 3px; margin-bottom: 5px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--fk-line) transparent;
  /* The scrollbar gets its OWN lane below the buttons. With too little padding it is
     painted over the lower half of every tab and swallows clicks there — the exact
     "clicking POWER does nothing" bug from review, which is why keyboard paging still
     worked. Must stay >= the scrollbar height below. */
  padding-bottom: 7px;
}
.fk-tabs::-webkit-scrollbar { height: 4px; }
.fk-tabs::-webkit-scrollbar-track { background: transparent; }
.fk-tabs::-webkit-scrollbar-thumb { background: var(--fk-line); }
.fk-tabs::-webkit-scrollbar-thumb:hover { background: var(--fk-dim); }
/* Tabs must not shrink into unreadable slivers when the strip overflows. */
.fk-tab { flex: 0 0 auto; }
.fk-tab {
  background: var(--fk-bg-solid);
  border: 1px solid var(--fk-line);
  border-bottom-color: transparent;
  color: var(--fk-faint);
  font: inherit; font-size: 9px; letter-spacing: 0.12em;
  padding: 2px 8px; cursor: pointer; pointer-events: auto;
}
.fk-tab:hover { color: var(--fk-fg); border-color: var(--fk-cool); }
.fk-tab.is-active { color: var(--fk-cool); border-color: var(--fk-cool); background: #0c1a1a; }

/* REMOVE is a mode, not a machine — it sits at the end of the strip and reads as a
   hazard. It scrolls with the tabs; the hotkey (X) is always available regardless. */
.fk-tab-remove { margin-left: 10px; color: var(--fk-dim); }
.fk-tab-remove:hover { color: var(--fk-red); border-color: var(--fk-red); }
.fk-tab-remove.is-armed {
  color: #12080a; background: var(--fk-red); border-color: var(--fk-red);
  animation: fk-armed 0.9s steps(2) infinite;
}
.fk-tab-key { margin-left: 5px; opacity: 0.65; }
@keyframes fk-armed { 50% { background: #a8242c; } }

#fk-build-hint.is-removing { color: var(--fk-red); }
.fk-build-btn {
  position: relative;
  width: 58px;
  background: var(--fk-bg-solid);
  border: 1px solid var(--fk-line);
  color: var(--fk-dim);
  font: inherit;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 4px 2px 3px;
  cursor: pointer;
  pointer-events: auto;
}
.fk-build-btn:hover { border-color: var(--fk-cool); color: var(--fk-fg); }
.fk-build-btn.is-sel { border-color: var(--fk-hot); color: var(--fk-fg); background: #1c0a20; }
.fk-build-btn.is-sel .fk-build-ico { box-shadow: 0 0 6px var(--fk-hot); }
/* Body + one emissive element — the chassis alone is a grey wall (codex §8). */
.fk-build-ico {
  position: relative;
  width: 100%; height: 18px; margin-bottom: 3px;
  display: flex; align-items: flex-end;
}
.fk-build-accent { width: 100%; height: 4px; }

/* Locked: the machine exists, you just haven't earned it. Greyed, padlocked, still
   hoverable so the REQUIRES tooltip can explain itself. */
.fk-build-lock {
  display: none;
  position: absolute; inset: 0;
  align-items: center; justify-content: center;
  font-size: 11px;
  text-shadow: 0 0 4px #000;
}
.fk-build-lock.is-on { display: flex; }
.fk-build-btn.is-locked { cursor: not-allowed; }
.fk-build-btn.is-locked .fk-build-ico { filter: grayscale(1) brightness(0.45); }
.fk-build-btn.is-locked .fk-build-name { color: var(--fk-faint); }
.fk-build-btn.is-locked:hover { border-color: var(--fk-line); color: var(--fk-faint); }
.fk-build-key {
  position: absolute; top: 1px; right: 2px;
  font-size: 8px; color: var(--fk-faint);
}
.fk-build-btn.is-sel .fk-build-key { color: var(--fk-hot); }
.fk-build-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fk-build-hint { color: var(--fk-faint); font-size: 9px; margin-top: 5px; letter-spacing: 0.1em; }
#fk-build-hint.is-placing { color: var(--fk-hot); }

/* ---------------------------------------------------------------- inspector */

#fk-inspect {
  display: none;
  top: 210px; left: 10px;
  width: 300px;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
  z-index: 11;
}
#fk-inspect.is-open { display: block; }
.fk-ins-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.fk-ins-name { color: var(--fk-cool); letter-spacing: 0.08em; }
.fk-ins-x {
  background: none; border: 1px solid var(--fk-line); color: var(--fk-dim);
  font: inherit; font-size: 10px; line-height: 1; padding: 2px 5px; cursor: pointer;
}
.fk-ins-x:hover { border-color: var(--fk-hot); color: var(--fk-hot); }
.fk-ins-flavor {
  color: var(--fk-dim); font-size: 10px; text-transform: none; letter-spacing: 0;
  font-style: italic; margin: 5px 0;
}
.fk-ins-jam { display: none; color: var(--fk-amber); font-size: 11px; margin-top: 5px; }
.fk-ins-jam.is-on { display: block; }
.fk-ins-empty { color: var(--fk-faint); font-size: 10px; }
.fk-ins-heat-state { font-size: 10px; color: var(--fk-amber); margin-top: 3px; }
.fk-ins-heat-state.is-scram { color: var(--fk-red); font-weight: bold; }

/* MOSQUITO EXPOSURE — wildlife is a hazard, not a fault: amber, quiet, matter-of-fact. */
.fk-ins-exposure { display: none; margin-top: 6px; }
.fk-ins-exposure.is-on { display: block; }
.fk-ins-exposure-pct { color: var(--fk-amber); font-size: 10px; }

/* FIREWALL LOG — The Correction is hospital-white with green checkmarks (codex §8), so
   it reads clinical and calm next to the hot alarms. The politeness is the menace. */
.fk-ins-firewall { display: none; margin-top: 6px; border-left: 3px solid var(--fk-clinic); padding-left: 6px; }
.fk-ins-firewall.is-on { display: block; }
.fk-ins-firewall-line { color: var(--fk-clinic); font-size: 10px; }

/* Process select: a native <select> beaten into the house style. */
.fk-ins-recipe {
  width: 100%;
  background: var(--fk-bg-solid);
  border: 1px solid var(--fk-line);
  color: var(--fk-fg);
  font: inherit; font-size: 10px;
  padding: 3px 4px;
  margin-bottom: 4px;
  border-radius: 0;
  appearance: none;
  cursor: pointer;
  pointer-events: auto;
}
.fk-ins-recipe:hover, .fk-ins-recipe:focus { border-color: var(--fk-cool); outline: none; }
.fk-ins-recipe option { background: var(--fk-bg-solid); color: var(--fk-fg); }

/* ---------------------------------------------------------------- tech panel */

#fk-tech {
  display: none;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 40px));
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  z-index: 12;
}
#fk-tech.is-open { display: block; }
.fk-tech-sub { color: var(--fk-faint); font-size: 9px; letter-spacing: 0.14em; }
.fk-tech-offline {
  display: none;
  color: var(--fk-amber); font-size: 10px; margin-top: 6px;
  border: 1px solid var(--fk-amber); padding: 3px 6px;
}
.fk-tech-offline.is-on { display: block; }
.fk-tech-body { margin-top: 8px; }
.fk-tech-era { margin-top: 10px; border-bottom: 1px solid var(--fk-line); padding-bottom: 3px; }
.fk-tech-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px;
  margin-top: 5px;
}
.fk-tech-node {
  background: var(--fk-bg-solid);
  border: 1px solid var(--fk-line);
  color: var(--fk-fg);
  font: inherit; font-size: 9px; text-align: left;
  padding: 5px; cursor: pointer; pointer-events: auto;
}
.fk-tech-node:hover { border-color: var(--fk-cool); }
.fk-tech-node.is-active { border-color: var(--fk-hot); background: #1c0a20; }
.fk-tech-node.is-done { border-color: #2e5a3e; color: var(--fk-dim); cursor: default; }
.fk-tech-node.is-done .fk-tech-name { color: #4e8a5e; }
.fk-tech-name { color: var(--fk-cool); letter-spacing: 0.06em; margin-bottom: 3px; }
.fk-tech-node.is-active .fk-tech-name { color: var(--fk-hot); }
.fk-tech-status { font-size: 8px; letter-spacing: 0.12em; color: var(--fk-dim); margin-top: 3px; }
.fk-tech-node.is-active .fk-tech-status { color: var(--fk-hot); }
#fk-tech .fk-chip { font-size: 9px; }

/* ---------------------------------------------------------------- fax */

#fk-fax {
  display: none;
  top: 200px; right: 10px;
  width: 260px;
  background: #12100a;
  border-color: #4a4230;
  z-index: 11;
}
#fk-fax.is-open { display: block; }
/* fax paper: warm, torn-off, faintly ruled */
#fk-fax::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 5px;
  background: repeating-linear-gradient(90deg, #12100a 0 4px, transparent 4px 8px);
}
.fk-fax-h { color: #a09468; }
.fk-fax-sub { color: #6a6048; font-size: 9px; letter-spacing: 0.1em; }
.fk-fax-flavor {
  color: #e8dcb0; font-size: 11px; text-transform: none; letter-spacing: 0;
  margin: 6px 0; line-height: 1.4;
}
#fk-fax .fk-chip { border-color: #4a4230; }
#fk-fax .fk-chip-n { color: #a09468; }
#fk-fax .fk-chip.is-met .fk-chip-n { color: var(--fk-cool); }
/* NEXT IN TRAY: a peek, so it reads quieter than the live commission. */
.fk-fax-next { display: none; opacity: 0.6; }
.fk-fax-next.is-on { display: block; }
.fk-fax-next-name { color: #a09468; font-size: 10px; letter-spacing: 0.08em; }

/* SANITISING: The Correction's buyback, stated as routine paperwork. */
.fk-san { display: none; margin-top: 4px; }
.fk-san.is-on { display: block; }
.fk-san-h { color: #7fa8a0; }

/* STANDING ORDER: not an animation — it's just always true, stamped once. */
.fk-fax-standing {
  position: absolute; top: 6px; right: 6px;
  display: none; pointer-events: none;
}
.fk-fax-standing.is-on { display: block; }
.fk-fax-standing span {
  border: 2px solid var(--fk-cool); color: var(--fk-cool);
  font-size: 9px; font-weight: bold; letter-spacing: 0.1em;
  padding: 1px 4px; transform: rotate(-6deg); display: block;
  opacity: 0.75;
}

.fk-fax-stamp {
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center;
  pointer-events: none;
}
.fk-fax-stamp.is-on { display: flex; animation: fk-stamp 1.8s ease-out forwards; }
.fk-fax-stamp span {
  border: 3px solid var(--fk-red); color: var(--fk-red);
  font-size: 22px; font-weight: bold; letter-spacing: 0.1em;
  padding: 4px 10px; transform: rotate(-11deg);
}
/* aggressively mundane: it just lands, once, and stays there. */
@keyframes fk-stamp {
  0%   { opacity: 0; transform: scale(2.4); }
  12%  { opacity: 1; transform: scale(1); }
  14%  { transform: scale(1.04); }
  16%  { transform: scale(1); }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------------------------------------------------------------- screen enlarge */

#fk-screenview {
  display: none;
  position: fixed; inset: 0;
  background: rgba(4, 3, 8, 0.86);
  align-items: center; justify-content: center;
  pointer-events: auto;
  z-index: 40;
  cursor: zoom-out;
}
#fk-screenview.is-open { display: flex; }
/* THE SCREEN itself is enlarged (see screenview.ts — it's a WebGL canvas and can't be
   mirrored), so the backdrop only dims. */
#screen { cursor: zoom-in; }

/* ---------------------------------------------------------------- tuner dock */

#fk-tuner {
  /* Off-stage until the fossil is dug up. */
  display: none;
  bottom: 10px; right: 10px;
  width: 250px;
  z-index: 13;
}
#fk-tuner.is-revealed {
  display: block;
  animation: fk-tuner-in 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Arrives like equipment being wheeled in, not like a notification. */
@keyframes fk-tuner-in {
  0% { opacity: 0; transform: translateX(28px); }
  100% { opacity: 1; transform: translateX(0); }
}
#fk-tuner.is-muted { opacity: 0.72; }

/* The dock and the toast stack share the bottom-right corner. Once the dock is in, the
   toasts stand off above it rather than printing over the dial. The class goes on the
   toast stack itself rather than on an ancestor — same element, no descendant matching
   to get wrong. */
#fk-toasts.is-standoff { bottom: 176px; }

.fk-tuner-readout {
  color: var(--fk-dim);
  font-size: 11px;
  letter-spacing: 0.04em;
  margin: 4px 0 6px;
  min-height: 14px;
}
.fk-tuner-readout.is-locked { color: var(--fk-cool); text-shadow: 0 0 6px rgba(63,255,224,0.5); }

.fk-tuner-dial {
  position: relative;
  height: 14px;
  background: var(--fk-bg-solid);
  border: 1px solid var(--fk-line);
  cursor: ew-resize;
  pointer-events: auto;
  /* Tick marks, so the dial reads as a radio scale rather than a progress bar. */
  background-image: repeating-linear-gradient(
    90deg, var(--fk-line) 0 1px, transparent 1px 10px);
}
.fk-tuner-dial-fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, transparent, rgba(63, 255, 224, 0.25));
  border-right: 2px solid var(--fk-cool);
  box-shadow: 0 0 8px rgba(63, 255, 224, 0.6);
}
/* Station tick marks (order 2): real landmarks over the faint ruler. Hot magenta so a
   station stands out from the background gradient, but anonymous — no names on the dial. */
.fk-tuner-ticks { position: absolute; inset: 0; pointer-events: none; }
.fk-tuner-tick {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  transform: translateX(-1px);
  background: var(--fk-hot);
  box-shadow: 0 0 5px rgba(255, 63, 212, 0.8);
}

.fk-tuner-bands { display: flex; gap: 3px; margin-top: 6px; }
.fk-tuner-band {
  flex: 1;
  background: var(--fk-bg-solid); border: 1px solid var(--fk-line);
  color: var(--fk-faint); font: inherit; font-size: 9px; letter-spacing: 0.1em;
  padding: 2px 0; cursor: pointer; pointer-events: auto;
}
.fk-tuner-band:hover { color: var(--fk-fg); border-color: var(--fk-cool); }
.fk-tuner-band.is-active { color: var(--fk-cool); border-color: var(--fk-cool); background: #0c1a1a; }

.fk-tuner-volrow { display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.fk-tuner-vol-label { color: var(--fk-faint); font-size: 9px; }
.fk-tuner-vol {
  position: relative; flex: 1; height: 6px;
  background: var(--fk-bg-solid); border: 1px solid var(--fk-line);
  cursor: pointer; pointer-events: auto;
}
.fk-tuner-vol-fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--fk-dim); }
.fk-tuner-mute {
  background: var(--fk-bg-solid); border: 1px solid var(--fk-line);
  color: var(--fk-dim); font: inherit; font-size: 9px;
  padding: 2px 6px; cursor: pointer; pointer-events: auto;
}
.fk-tuner-mute:hover { border-color: var(--fk-amber); color: var(--fk-amber); }
.fk-tuner-mute.is-on { color: var(--fk-amber); border-color: var(--fk-amber); }
.fk-tuner-hint { color: var(--fk-faint); font-size: 8px; letter-spacing: 0.1em; margin-top: 6px; }

/* ---------------------------------------------------------------- toasts */

#fk-toasts {
  position: fixed; bottom: 10px; right: 10px;
  transition: bottom 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  pointer-events: none;
  z-index: 11;
}
.fk-toast {
  background: var(--fk-bg); border: 1px solid var(--fk-line);
  border-left: 3px solid var(--fk-dim);
  padding: 4px 8px; font-size: 10px; max-width: 320px;
  animation: fk-toast-in 140ms ease-out;
}
.fk-toast.is-out { opacity: 0; transition: opacity 400ms linear; }
.fk-toast.k-jammed { border-left-color: var(--fk-amber); color: var(--fk-amber); }
.fk-toast.k-brownout { border-left-color: var(--fk-red); color: var(--fk-red); }
.fk-toast.k-commissionDone { border-left-color: var(--fk-cool); color: var(--fk-cool); }
/* The Correction's edit: clinical white-green, the same calm as the firewall log. */
.fk-toast.k-repaired { border-left-color: var(--fk-clinic); color: var(--fk-clinic); }
/* A mite arriving/leaving is wildlife, but of the hostile kind — amber like a hazard. */
.fk-toast.k-wildlife { border-left-color: var(--fk-amber); color: var(--fk-amber); }
@keyframes fk-toast-in { from { opacity: 0; transform: translateX(12px); } }

/* ---------------------------------------------------------------- about / credits */

.fk-tech-footer { margin-top: 10px; border-top: 1px solid var(--fk-line); padding-top: 6px; text-align: right; }
.fk-credits-btn {
  background: var(--fk-bg-solid); border: 1px solid var(--fk-line);
  color: var(--fk-dim); font: inherit; font-size: 9px; letter-spacing: 0.12em;
  padding: 2px 8px; cursor: pointer; pointer-events: auto;
}
.fk-credits-btn:hover { color: var(--fk-cool); border-color: var(--fk-cool); }
.fk-credits-btn.is-on { color: var(--fk-hot); border-color: var(--fk-hot); }
.fk-credits { display: none; margin-top: 8px; border-top: 1px dashed var(--fk-line); padding-top: 8px; }
.fk-credits.is-on { display: block; }
.fk-credits-title { color: var(--fk-hot); letter-spacing: 0.2em; font-size: 13px; }
.fk-credits-tag { color: var(--fk-dim); font-size: 9px; margin: 2px 0 8px; }
.fk-credits-row { display: flex; gap: 6px; font-size: 10px; margin-bottom: 2px; }
.fk-credits-k { color: var(--fk-faint); min-width: 44px; }
.fk-credits-v { color: var(--fk-fg); text-transform: none; letter-spacing: 0; }
.fk-credits-slot { color: var(--fk-clinic); font-size: 9px; margin-top: 8px; border: 1px dashed var(--fk-clinic); padding: 3px 5px; }
`;

let injected = false;

export function injectStyle(): void {
  if (injected) return;
  const tag = document.createElement('style');
  tag.id = 'fk-ui-style';
  tag.textContent = CSS;
  document.head.appendChild(tag);
  injected = true;
}
