:root {
  --steel-0: #d0d0c8;
  --steel-1: #a5a69f;
  --steel-2: #74766f;
  --steel-3: #484a46;
  --steel-4: #292b29;
  --ink: #181917;
  --lcd: #07130b;
  --lcd-deep: #030906;
  --phosphor: #74ff8b;
  --phosphor-dim: #3ea958;
  --amber: #d8a943;
  --rust: #6b3d24;
  --danger: #c84635;
  --line: #565852;
  --char-color: #74ff8b;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: #171816; }

body {
  min-height: 100vh;
  margin: 0;
  padding: 32px 18px 60px;
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 12%, rgba(102, 72, 42, .25) 0 2px, transparent 3px),
    radial-gradient(circle at 81% 73%, rgba(0, 0, 0, .5) 0 1px, transparent 2px),
    linear-gradient(115deg, transparent 0 48%, rgba(255,255,255,.025) 49%, transparent 50%),
    #171816;
  background-size: 47px 61px, 29px 37px, 100% 100%, auto;
  font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
}

button, input, textarea, summary { font: inherit; }
button, summary, label[for], .color-key, .file-key { -webkit-tap-highlight-color: transparent; }

.device {
  isolation: isolate;
  position: relative;
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 32px;
  border: 2px solid #20211f;
  border-radius: 24px 24px 17px 17px;
  background:
    radial-gradient(ellipse at 8% 27%, rgba(83, 48, 26, .18) 0 1%, transparent 9%),
    radial-gradient(ellipse at 94% 80%, rgba(30, 26, 18, .18) 0 2%, transparent 10%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, rgba(0,0,0,.025) 1px 3px),
    linear-gradient(145deg, #b9bab3 0, #868880 34%, #c0c1ba 56%, #74766f 100%);
  box-shadow:
    0 2px 0 #e6e6df inset,
    0 -4px 0 #4b4c47 inset,
    0 26px 55px rgba(0,0,0,.65),
    0 0 0 5px #0f100f;
}

.device::before,
.device::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.device::before {
  opacity: .28;
  background:
    linear-gradient(103deg, transparent 12%, rgba(28,29,26,.7) 12.2%, transparent 12.45%),
    linear-gradient(176deg, transparent 64%, rgba(245,245,236,.7) 64.1%, transparent 64.25%),
    linear-gradient(92deg, transparent 81%, rgba(38,39,35,.55) 81.1%, transparent 81.25%);
}

.device::after {
  inset: 11px;
  border: 1px solid rgba(28,29,26,.35);
}

.screw {
  position: absolute;
  z-index: 4;
  width: 17px;
  height: 17px;
  border: 1px solid #3d3e39;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #e4e4dc 0, #898a83 42%, #3b3c38 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.8), 0 1px 1px white inset;
}
.screw::after { content: ""; position: absolute; left: 3px; right: 3px; top: 7px; height: 2px; transform: rotate(-24deg); background: #353631; box-shadow: 0 1px rgba(255,255,255,.3); }
.screw-nw { top: 10px; left: 12px; }.screw-ne { top: 10px; right: 12px; }.screw-sw { bottom: 10px; left: 12px; }.screw-se { right: 12px; bottom: 10px; }

.machine-header { display: flex; align-items: stretch; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.brand-plate {
  min-width: 0;
  padding: 13px 17px 11px;
  border: 1px solid #3c3e39;
  border-radius: 4px;
  color: #d6d8ce;
  background: linear-gradient(#343632, #20221f);
  box-shadow: 0 2px 0 rgba(255,255,255,.25), 0 -2px 0 rgba(0,0,0,.65) inset;
}
.brand-plate p, .brand-plate h1, .brand-plate span { margin: 0; }
.brand-plate p { color: var(--amber); font: 700 9px/1 ui-monospace, Consolas, monospace; letter-spacing: .22em; }
.brand-plate h1 { margin: 5px 0 4px; font: 900 clamp(21px, 4vw, 34px)/.95 Impact, "Arial Black", sans-serif; letter-spacing: .045em; text-shadow: 0 -1px #000; }
.brand-plate span { color: #8f948b; font: 700 9px/1 ui-monospace, Consolas, monospace; letter-spacing: .08em; }
.limit-module {
  display: grid;
  grid-template-columns: auto 62px;
  align-items: center;
  gap: 12px;
  padding: 8px 9px 8px 15px;
  border: 2px solid #444640;
  border-radius: 7px;
  background: linear-gradient(135deg, #a6a79f, #696b65);
  box-shadow: 0 2px 0 #d8d8d1 inset, 0 -3px 0 #444641 inset, 0 3px 5px rgba(0,0,0,.35);
}
.limit-module span { font: 900 10px/1 Impact, sans-serif; letter-spacing: .12em; }
.limit-module strong {
  display: grid;
  place-items: center;
  height: 48px;
  border: 2px solid #151d17;
  border-radius: 4px;
  color: var(--phosphor);
  background: var(--lcd);
  box-shadow: 0 0 15px rgba(96,255,126,.16) inset, 0 2px 4px #000 inset;
  font: 700 24px/1 ui-monospace, Consolas, monospace;
  text-shadow: 0 0 8px rgba(116,255,139,.7);
}

.quick-console {
  padding: 18px;
  border: 2px solid #323430;
  border-radius: 9px;
  background:
    radial-gradient(circle at 4% 93%, rgba(91,52,29,.14), transparent 13%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #777972, #a4a59e 48%, #666862);
  box-shadow: 0 2px 0 #dadbd3 inset, 0 -3px 0 #41433f inset, 0 5px 9px rgba(0,0,0,.35);
}
.console-title {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin: -4px -4px 17px;
  padding: 8px 11px;
  border: 1px solid #292a27;
  color: #c8c9c0;
  background: #292b28;
  font: 700 10px/1 ui-monospace, Consolas, monospace;
  letter-spacing: .14em;
}
.ready-light { color: #8f968d; }.ready-light i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--phosphor); box-shadow: 0 0 8px var(--phosphor); }
.name-module label, .color-module legend, .module-label { display: block; margin: 0 0 8px; font: 900 11px/1 Impact, "Arial Black", sans-serif; letter-spacing: .095em; text-shadow: 0 1px rgba(255,255,255,.3); }
.name-module label b, .color-module legend b, .module-label b { margin-right: 7px; color: #f0d076; }
.lcd-input {
  width: 100%;
  height: 62px;
  padding: 0 17px;
  border: 3px solid #262a25;
  border-radius: 5px;
  outline: 1px solid #c5c6be;
  color: var(--phosphor);
  caret-color: var(--phosphor);
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(95,255,124,.025) 3px 4px),
    linear-gradient(90deg, #061009, #0b1d10 48%, #061009);
  box-shadow: 0 4px 10px #000 inset, 0 -1px rgba(102,255,127,.12) inset;
  font: 700 clamp(20px, 4vw, 29px)/1 ui-monospace, "Lucida Console", Consolas, monospace;
  letter-spacing: .035em;
  text-shadow: 0 0 8px rgba(116,255,139,.48);
  text-transform: none;
}
.lcd-input::placeholder { color: #2d683b; opacity: .8; }
.lcd-input:focus { outline: 2px solid var(--phosphor); outline-offset: 2px; }

.color-module {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 18px 0;
  padding: 13px 14px 14px;
  border: 1px solid #50524c;
  border-radius: 5px;
  background: rgba(50,52,48,.2);
  box-shadow: 0 1px rgba(255,255,255,.35) inset;
}
.color-module legend { padding: 0 6px; }
.color-key {
  display: grid;
  grid-template-columns: 35px 60px auto;
  align-items: center;
  gap: 9px;
  min-width: 190px;
  padding: 8px 11px 8px 8px;
  border: 2px solid #3e403b;
  border-radius: 6px;
  background: linear-gradient(145deg, #d0d0c8, #777972 55%, #a9aaa3);
  box-shadow: 0 3px 0 #454742, 0 4px 8px rgba(0,0,0,.4), 0 1px 0 #f0f0e9 inset;
  cursor: pointer;
}
.color-key:active { transform: translateY(2px); box-shadow: 0 1px 0 #454742, 0 2px 4px rgba(0,0,0,.4), 0 1px 0 #eee inset; }
.key-letter { display: grid; place-items: center; height: 35px; border: 1px solid #262724; border-radius: 3px; color: #d8d9d0; background: #30322f; font: 900 17px/1 Impact, sans-serif; box-shadow: 0 2px 3px #000 inset; }
.color-key input { width: 60px; height: 38px; padding: 3px; border: 2px solid #3b3d38; border-radius: 3px; background: #20221f; cursor: pointer; }
.color-key output { font: 700 11px/1 ui-monospace, Consolas, monospace; }
.signal-line { display: flex; align-items: center; justify-content: center; flex: 1; min-width: 55px; height: 18px; }
.signal-line::before { content: ""; width: 100%; height: 2px; background: #343631; box-shadow: 0 1px rgba(255,255,255,.3); }
.signal-line i { width: 4px; height: 4px; margin-left: -1px; border-radius: 50%; background: #4c4e48; }

.output-module { margin-top: 4px; }
.result-row { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 13px; align-items: stretch; }
.lcd-screen {
  position: relative;
  min-width: 0;
  min-height: 132px;
  padding: 19px 20px 14px;
  overflow: hidden;
  border: 4px solid #242722;
  border-radius: 7px;
  color: var(--phosphor);
  background: radial-gradient(ellipse at center, #102518, var(--lcd-deep) 77%);
  box-shadow: 0 5px 12px #000 inset, 0 -1px rgba(108,255,132,.13) inset, 0 1px #d1d2cb;
}
.lcd-grid { position: absolute; inset: 0; pointer-events: none; opacity: .55; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(80,255,110,.045) 3px 4px); }
.preview { position: relative; z-index: 1; display: flex; align-items: center; min-height: 60px; overflow-wrap: anywhere; font: 800 clamp(24px, 5vw, 46px)/1.05 ui-monospace, "Lucida Console", Consolas, monospace; letter-spacing: -.055em; filter: saturate(.95) brightness(1.15); text-shadow: 0 0 8px currentColor; }
.preview.empty { color: #34613e; font-size: clamp(15px, 3vw, 21px); letter-spacing: .03em; }
.readout-line { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.meter { flex: 1; height: 5px; overflow: hidden; border: 1px solid #1d4b28; background: #020604; }
.meter span { display: block; width: 0; height: 100%; background: var(--phosphor); box-shadow: 0 0 7px var(--phosphor); transition: width .18s; }
.readout-line strong { min-width: 64px; font: 700 10px/1 ui-monospace, Consolas, monospace; text-align: right; text-shadow: 0 0 6px rgba(116,255,139,.55); }
.status { position: relative; z-index: 1; margin: 7px 0 0; color: var(--phosphor-dim); font: 700 9px/1 ui-monospace, Consolas, monospace; text-transform: uppercase; letter-spacing: .05em; }
.status.error { color: #ff6a55; text-shadow: 0 0 6px rgba(255,72,50,.5); }

.copy-key, .metal-key {
  border: 2px solid #383a36;
  color: #161715;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, rgba(0,0,0,.025) 1px 3px),
    linear-gradient(145deg, #deded5 0, #8d8f87 45%, #c7c8c0 68%, #71736d 100%);
  box-shadow: 0 5px 0 #444641, 0 8px 12px rgba(0,0,0,.42), 0 2px 0 #f8f8f0 inset, 0 -2px 0 #666862 inset;
  cursor: pointer;
  text-shadow: 0 1px rgba(255,255,255,.6);
}
.copy-key { min-height: 132px; border-radius: 7px; }
.copy-key span { display: block; font: 900 28px/1 Impact, "Arial Black", sans-serif; letter-spacing: .07em; }
.copy-key small { display: block; margin-top: 7px; font: 800 8px/1 ui-monospace, Consolas, monospace; letter-spacing: .12em; }
.copy-key::before { content: ""; display: block; width: 23px; height: 5px; margin: 0 auto 14px; border: 1px solid #20211f; border-radius: 4px; background: #1d261f; box-shadow: 0 0 4px var(--phosphor) inset; }
.copy-key:hover, .metal-key:hover { filter: brightness(1.06); }
.copy-key:active, .metal-key:active { transform: translateY(4px); box-shadow: 0 1px 0 #444641, 0 3px 5px rgba(0,0,0,.42), 0 1px 0 #eee inset; }
.copy-key:disabled, .metal-key:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.7); }

.service-panel { margin-top: 18px; border: 2px solid #363833; border-radius: 7px; background: #6f716b; box-shadow: 0 2px 0 #d3d4cc inset, 0 5px 8px rgba(0,0,0,.36); }
.service-panel > summary {
  display: grid;
  grid-template-columns: 28px auto 1fr;
  align-items: center;
  gap: 10px;
  min-height: 55px;
  padding: 9px 14px;
  color: #d4d6cc;
  background: linear-gradient(#3a3c38, #262825);
  cursor: pointer;
  list-style: none;
  font: 900 13px/1 Impact, "Arial Black", sans-serif;
  letter-spacing: .08em;
  text-shadow: 0 -1px #000;
}
.service-panel > summary::-webkit-details-marker { display: none; }
.service-panel > summary small { justify-self: end; color: #777c75; font: 700 8px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .08em; text-align: right; }
.service-chevron { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #111; border-radius: 3px; background: #171917; color: var(--phosphor); box-shadow: 0 2px 3px #000 inset; font: 700 20px/1 ui-monospace, monospace; }
.service-panel[open] .service-chevron { transform: rotate(45deg); }
.service-body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(285px, .75fr); gap: 12px; padding: 14px; border-top: 2px solid #20221f; }
.service-column { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.service-section { padding: 14px; border: 1px solid #444641; border-radius: 4px; background: linear-gradient(145deg, #92948c, #686a64); box-shadow: 0 1px #d0d1ca inset, 0 -2px rgba(0,0,0,.25) inset; }
.service-head, .mini-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.service-head > div:first-child span, .mini-head strong { display: block; font: 900 11px/1 Impact, sans-serif; letter-spacing: .1em; }
.service-head small, .mini-head span { display: block; margin-top: 3px; color: #42443f; font: 700 8px/1.3 ui-monospace, Consolas, monospace; }
.edit-actions, .tool-bank { display: flex; flex-wrap: wrap; gap: 7px; }
.metal-key { min-height: 34px; padding: 8px 11px; border-radius: 4px; font: 900 9px/1 "Arial Black", sans-serif; letter-spacing: .045em; }
.small-key { padding-inline: 9px; }
.danger-key { color: #e4c7bd; background: linear-gradient(145deg, #7a3a30, #3e2420); text-shadow: 0 -1px #1e0d0a; }

.split-editor { margin: 14px 0 10px; padding: 11px; border: 2px solid #373a35; border-radius: 4px; background: #282b28; box-shadow: 0 3px 5px #111 inset; }
.split-editor .mini-head strong { color: #c3c6bb; }.split-editor .mini-head span { color: #737970; }
.split-scroller { position: relative; margin-top: 12px; padding: 7px 0 13px; overflow-x: auto; overflow-y: hidden; }
.split-track { position: relative; display: flex; width: max-content; min-width: 100%; height: 32px; padding: 0 10px; }
.split-char { display: grid; place-items: center; flex: 0 0 22px; height: 28px; border-bottom: 3px solid var(--char-color); color: var(--char-color); background: #07110a; font: 700 12px/1 ui-monospace, Consolas, monospace; text-shadow: 0 0 4px currentColor; }
.split-char.space { color: #396244; }
.split-handle { position: absolute; z-index: 2; top: 20px; width: 14px; height: 14px; margin-left: -7px; padding: 0; transform: rotate(45deg); border: 2px solid #171916; border-radius: 2px; background: #dbbd58; box-shadow: 0 0 0 1px #e8d793; cursor: ew-resize; touch-action: none; }
.split-empty { display: none; margin: 10px 0 0; color: #747a71; font: 700 9px/1.3 ui-monospace, Consolas, monospace; }.split-empty.visible { display: block; }

.segments { display: flex; flex-direction: column; gap: 7px; counter-reset: channel; }
.segment-row { display: grid; grid-template-columns: 29px 39px 77px minmax(100px,1fr) 31px 31px 31px; align-items: center; gap: 6px; padding: 7px; border: 1px solid #3f413d; border-radius: 4px; background: #555852; counter-increment: channel; box-shadow: 0 1px rgba(255,255,255,.22) inset; }
.segment-row.selected { border-color: #f2d571; box-shadow: 0 0 0 1px #947a2e, 0 1px rgba(255,255,255,.24) inset; }
.channel-number::before { content: counter(channel, decimal-leading-zero); display: grid; place-items: center; height: 28px; color: var(--phosphor); background: #111a13; border: 1px solid #292c28; font: 700 9px/1 ui-monospace, Consolas, monospace; }
.segment-row input { height: 34px; border: 2px solid #343631; border-radius: 3px; color: var(--phosphor); background: #0a150c; font: 700 11px/1 ui-monospace, Consolas, monospace; box-shadow: 0 2px 3px #000 inset; }
.segment-row .color-picker { width: 39px; padding: 3px; cursor: pointer; }.segment-row .hex-input { padding: 0 7px; text-transform: uppercase; }.segment-row .text-input { min-width: 0; padding: 0 9px; }
.move-button, .remove-button { height: 29px; padding: 0; border: 1px solid #30322e; border-radius: 3px; color: #1d1e1c; background: linear-gradient(#c6c7bf, #777972); box-shadow: 0 2px 0 #3e403b; cursor: pointer; font: 900 8px/1 Arial, sans-serif; }.remove-button { color: #efe0dc; background: linear-gradient(#8b493d, #542d27); }
.technical-note { margin: 8px 1px 0; color: #3c3e3a; font: 700 8px/1.35 ui-monospace, Consolas, monospace; }
.tool-bank { align-items: center; margin-top: 12px; }.tool-bank span { margin-left: auto; color: #184b25; font: 700 9px/1.2 ui-monospace, Consolas, monospace; }
.recent-colors { display: flex; flex-wrap: wrap; gap: 8px; min-height: 29px; margin-top: 11px; }
.recent-swatch { width: 31px; height: 31px; padding: 0; border: 3px solid #484a45; border-radius: 3px; background: var(--swatch); box-shadow: 0 3px 0 #353733, 0 1px #eee inset; cursor: pointer; }.recent-swatch:active { transform: translateY(2px); box-shadow: 0 1px 0 #353733; }.recent-empty { color: #454741; font: 700 8px/1 ui-monospace, Consolas, monospace; }

#rawOutput { width: 100%; min-height: 105px; margin-top: 12px; resize: vertical; padding: 11px; border: 3px solid #292d29; border-radius: 3px; color: var(--phosphor); background: var(--lcd); box-shadow: 0 3px 6px #000 inset; font: 700 11px/1.5 ui-monospace, Consolas, monospace; text-shadow: 0 0 5px rgba(116,255,139,.35); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; border: 1px solid #41433f; background: #5a5c56; }
.stats div { padding: 8px; border-right: 1px solid #41433f; text-align: center; }.stats div:last-child { border: 0; }.stats span, .stats strong { display: block; }.stats span { font: 800 7px/1 ui-monospace, Consolas, monospace; }.stats strong { margin-top: 4px; color: #203a25; font: 900 18px/1 ui-monospace, Consolas, monospace; }
.presets { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 11px; }.preset { min-height: 34px; padding: 7px; border: 2px solid #40423d; border-radius: 3px; color: #20211f; background: linear-gradient(#c2c3bb, #797b74); box-shadow: 0 3px 0 #3f413d, 0 1px #eee inset; cursor: pointer; font: 900 8px/1 Arial, sans-serif; text-transform: uppercase; }.preset:active { transform: translateY(2px); box-shadow: 0 1px #3f413d; }
.service-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.service-actions .danger-key { grid-column: 1 / -1; }.file-key { display: grid; place-items: center; cursor: pointer; text-align: center; }.file-key input { display: none; }
.machine-footer { display: flex; justify-content: space-between; gap: 12px; margin: 19px 4px -10px; color: #454741; font: 800 7px/1 ui-monospace, Consolas, monospace; letter-spacing: .1em; }

button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, .file-key:focus-within { outline: 2px solid var(--phosphor); outline-offset: 3px; }

@media (max-width: 820px) {
  body { padding: 16px 9px 40px; }
  .device { padding: 24px 17px; border-radius: 16px; }
  .color-module { flex-wrap: wrap; }.signal-line { flex-basis: 40px; }.color-key { flex: 1; min-width: 190px; }
  .service-body { grid-template-columns: 1fr; }
  .service-panel > summary { grid-template-columns: 28px 1fr; }.service-panel > summary small { display: none; }
}

@media (max-width: 620px) {
  .machine-header { align-items: stretch; }.brand-plate h1 { font-size: 21px; }.brand-plate span { display: none; }.limit-module { grid-template-columns: 1fr; gap: 3px; padding: 7px; text-align: center; }.limit-module strong { height: 35px; }
  .console-title { font-size: 8px; }.ready-light { letter-spacing: 0; }
  .color-module { display: grid; grid-template-columns: 1fr; }.signal-line { display: none; }.color-key { width: 100%; min-width: 0; }
  .result-row { grid-template-columns: 1fr; }.copy-key { min-height: 88px; }.copy-key::before { margin-bottom: 8px; }
  .service-head { flex-direction: column; }.segment-row { grid-template-columns: 27px 36px 70px minmax(80px,1fr) 29px; }.move-button { display: none; }.remove-button { grid-column: 5; }
  .tool-bank .metal-key { flex: 1 1 45%; }.tool-bank span { width: 100%; margin: 3px 0 0; }
  .machine-footer { flex-direction: column; align-items: center; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }

.stop-readout{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:9px;padding-top:8px;border-top:1px solid #173b20;color:var(--phosphor-dim);font:700 8px/1 ui-monospace,Consolas,monospace;letter-spacing:.06em}.stop-readout>span{white-space:nowrap}.stop-readout>strong{min-width:52px;color:var(--phosphor);font-size:9px;text-align:right;text-shadow:0 0 5px rgba(116,255,139,.55)}.stop-pips{display:flex;align-items:center;justify-content:flex-end;gap:5px;min-height:12px}.stop-pips i{display:block;width:9px;height:9px;transform:rotate(45deg);border:1px solid #071009;border-radius:1px;background:var(--stop-color);box-shadow:0 0 5px var(--stop-color)}.preview,.preview>span{white-space:pre-wrap}.color-key .quick-hex-input{width:86px;padding:0 7px;color:var(--phosphor);background:#0a150c;cursor:text;font:700 11px/1 ui-monospace,Consolas,monospace;text-transform:uppercase}.color-key .quick-hex-input:invalid{border-color:var(--danger);color:#ff8b78}