:root {
  color-scheme: dark;

  /* B32 v2 · cuatro tintas. No hay gris, blanco, azul ni mezclas suaves. */
  --xp-black: #050407;
  --xp-panel: #0b0a0e;
  --xp-pink: #e86fa4;
  --xp-violet: #b14fe0;
  --xp-green: #31d67a;
  --xp-ink: var(--xp-pink);
  --xp-muted: var(--xp-violet);

  /* Pila local de aspecto bitmap: nada remoto, nada contemporáneo de UI. */
  --xp-font-chrome: Fixedsys, "MS Gothic", "Lucida Console", "Courier New", monospace;
  --xp-font-mono: "MS Gothic", Fixedsys, "Lucida Console", "Courier New", monospace;
  --xp-font-sticker: Fixedsys, "MS Gothic", "Lucida Console", "Courier New", monospace;

  --xp-grid: 4px;
  --xp-gap: 6px;
  --xp-titlebar-height: 26px;
  --xp-titlebar-small-height: 21px;
  --xp-line: var(--xp-violet);
  --xp-line-soft: var(--xp-violet);
  --xp-titlebar: linear-gradient(
    180deg,
    var(--xp-pink) 0 48%,
    var(--xp-violet) 48% 100%
  );
  --xp-dither-pink: repeating-conic-gradient(
    from 45deg,
    var(--xp-pink) 0 25%,
    var(--xp-black) 0 50%
  ) 0 0 / 4px 4px;
  --xp-dither-violet: repeating-conic-gradient(
    from 45deg,
    var(--xp-violet) 0 25%,
    var(--xp-panel) 0 50%
  ) 0 0 / 4px 4px;
  --xp-bevel-raised:
    inset 2px 2px 0 var(--xp-pink),
    inset -2px -2px 0 var(--xp-black),
    2px 2px 0 var(--xp-violet);
  --xp-bevel-sunken:
    inset 2px 2px 0 var(--xp-black),
    inset -2px -2px 0 var(--xp-violet);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0 !important;
}

html,
body,
button,
input,
textarea,
select {
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
}

.xp-window {
  min-width: 0;
  overflow: hidden;
  border: 2px solid var(--xp-black);
  background: var(--xp-panel);
  box-shadow: var(--xp-bevel-raised);
}

.xp-titlebar {
  min-width: 0;
  min-height: var(--xp-titlebar-height);
  display: flex;
  align-items: center;
  gap: var(--xp-grid);
  padding: 3px 4px 3px 6px;
  border: 2px solid var(--xp-black);
  border-top-color: var(--xp-pink);
  border-left-color: var(--xp-pink);
  background: var(--xp-titlebar);
  color: var(--xp-black);
  font: 700 12px/1 var(--xp-font-chrome);
  letter-spacing: 0;
  user-select: none;
}

.xp-titlebar-small {
  min-height: var(--xp-titlebar-small-height);
  padding: 2px 3px 2px 5px;
  background: linear-gradient(
    90deg,
    var(--xp-violet) 0 64%,
    var(--xp-pink) 64% 100%
  );
  font: 700 10px/1 var(--xp-font-mono);
  letter-spacing: 0.04em;
}

.xp-titlebar-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xp-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--xp-black);
  background: var(--xp-green);
  color: var(--xp-black);
  font: 700 9px/1 var(--xp-font-mono);
  box-shadow: inset 1px 1px 0 var(--xp-pink), inset -1px -1px 0 var(--xp-black);
}

.xp-controls {
  margin-left: auto;
  display: inline-flex;
  gap: 2px;
  flex: 0 0 auto;
}

.xp-control,
.xp-button {
  display: inline-grid;
  place-items: center;
  border: 2px solid var(--xp-black);
  border-top-color: var(--xp-pink);
  border-left-color: var(--xp-pink);
  background: var(--xp-violet);
  color: var(--xp-black);
  box-shadow: inset -1px -1px 0 var(--xp-black);
  font: 700 10px/1 var(--xp-font-mono);
}

.xp-control {
  width: 20px;
  height: 18px;
}

.xp-button {
  min-height: 22px;
  padding: 3px 7px;
}

.xp-control:active,
.xp-button:active {
  border-color: var(--xp-black) var(--xp-pink) var(--xp-pink) var(--xp-black);
  box-shadow: inset 1px 1px 0 var(--xp-black);
  transform: translate(1px, 1px);
}

.xp-panel {
  min-width: 0;
  overflow: hidden;
  border: 2px solid var(--xp-black);
  background: var(--xp-panel);
  box-shadow: var(--xp-bevel-sunken);
}

.xp-field {
  min-width: 0;
  border: 2px solid var(--xp-black);
  border-right-color: var(--xp-violet);
  border-bottom-color: var(--xp-violet);
  background: var(--xp-black);
  box-shadow: inset 1px 1px 0 var(--xp-black);
}

.xp-statusbar {
  min-height: 22px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 3px;
  border: 2px solid var(--xp-black);
  border-top-color: var(--xp-violet);
  background: var(--xp-panel);
  color: var(--xp-pink);
  font: 9px/1 var(--xp-font-mono);
}

.xp-status-cell {
  min-width: 0;
  padding: 3px 5px;
  overflow: hidden;
  border: 1px solid var(--xp-black);
  border-top-color: var(--xp-violet);
  border-left-color: var(--xp-violet);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ascii-kicker,
.ascii-label {
  color: var(--xp-violet);
  font-family: var(--xp-font-mono);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ascii-kicker { font-size: 9px; }
.ascii-label { font-size: 8px; }

.ascii-sticker {
  display: inline-block;
  padding: 4px 7px;
  border: 2px solid var(--xp-black);
  background: var(--xp-green);
  color: var(--xp-black);
  box-shadow: 3px 3px 0 var(--xp-violet);
  font: 800 10px/1 var(--xp-font-sticker);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

.signal-live {
  color: var(--xp-green);
  text-shadow: 1px 1px 0 var(--xp-black);
}

.accent-pink { color: var(--xp-pink); }
.accent-violet { color: var(--xp-violet); }
.accent-green { color: var(--xp-green); }
.muted { color: var(--xp-violet); }

* {
  scrollbar-color: var(--xp-violet) var(--xp-black);
  scrollbar-width: auto;
}

*::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background: var(--xp-black);
}

*::-webkit-scrollbar-track {
  border: 2px solid var(--xp-black);
  background: var(--xp-dither-violet);
  box-shadow: inset 1px 1px 0 var(--xp-black);
}

*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-corner,
*::-webkit-scrollbar-button {
  border: 2px solid var(--xp-black);
  border-top-color: var(--xp-pink);
  border-left-color: var(--xp-pink);
  background: var(--xp-violet);
  box-shadow: inset -1px -1px 0 var(--xp-black);
}

*::-webkit-scrollbar-button {
  width: 16px;
  height: 16px;
  background: var(--xp-green);
}

:focus-visible {
  outline: 2px dotted var(--xp-green);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  :root {
    --xp-gap: 4px;
    --xp-titlebar-height: 24px;
    --xp-titlebar-small-height: 20px;
  }

  .xp-titlebar { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
}