/* ===== Base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Core palette (monolith + fog + distant neon) */
  --ink: #e9eef5;
  --muted: rgba(233, 238, 245, 0.62);

  --bg: #07090c;
  --bg2: #05070a;

  --hairline: rgba(233, 238, 245, 0.10);
  --innerline: rgba(233, 238, 245, 0.06);

  /* Blade-runner hint (kept subtle) */
  --accent: rgba(120, 255, 214, 0.65);
  --accent-hot: rgba(255, 60, 90, 0.55);

  /* Fog / glow */
  --glow: rgba(120, 255, 214, 0.12);
  --glow2: rgba(255, 60, 90, 0.08);

  --radius: 12px;
}

html, body { height: 100%; }

body {
  color: var(--ink);
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Fog + distant neon (no obvious gradients, just atmosphere) */
  background:
    radial-gradient(1200px 700px at 18% 12%, var(--glow), transparent 55%),
    radial-gradient(900px 520px at 82% 18%, var(--glow2), transparent 60%),
    radial-gradient(1100px 900px at 50% 90%, rgba(120, 255, 214, 0.06), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));

  background-attachment: fixed;
}

/* ===== Atmosphere layers (noise + scanlines) ===== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* soft scanlines */
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(233, 238, 245, 0.04) 0px,
      rgba(233, 238, 245, 0.04) 1px,
      transparent 2px,
      transparent 6px
    );

  opacity: 0.07;
  mix-blend-mode: overlay;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* subtle imperfection: cheap noise (no external assets) */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.06) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,0.05) 0 1px, transparent 2px);
  background-size: 180px 180px;

  opacity: 0.045;
  filter: blur(0.2px);
}

/* App content above atmosphere */
.site-header,
.deck,
footer {
  position: relative;
  z-index: 1;
}

/* ===== Header / Status + Tabs ===== */
.site-header {
  padding: 0.5rem 0.85rem;
  font-size: 0.82rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-height: 44px;

  background: linear-gradient(
    180deg,
    rgba(12,14,18,0.45),
    rgba(12,14,18,0)
  );
}

.status { display: flex; align-items: center; gap: 0.4rem; }
.status-word { color: var(--muted); }

/* Right cluster: nav + small LA clock */
.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

[role=tablist] {
  display: flex;
  gap: 0.65rem;
  align-items: center;
}

[role=tab] {
  font: inherit;
  letter-spacing: 0.08em;
  padding: 0.18rem 0.4rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  min-height: 1.85rem;
  line-height: 1;
  border-radius: 999px;
  opacity: 0.9;
  transition:
    color 0.15s ease,
    opacity 0.15s ease,
    text-shadow 0.15s ease;
}

[role=tab][aria-selected=true] {
  color: var(--ink);
  text-shadow: 0 0 10px rgba(120,255,214,0.10);
}

[role=tab]:focus-visible {
  outline: none;
  text-shadow: 0 0 6px rgba(159,179,200,0.35);
}

[role=tabpanel] { display: contents; }
[role=tabpanel][hidden] { display: none; }

/* ===== Deck Grid ===== */
.deck {
  --gap: clamp(10px, 2vw, 18px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--gap);
}

.panel {
  position: relative;
  background: linear-gradient(180deg, rgba(16, 20, 26, 0.52), rgba(10, 14, 18, 0.68));
  border: 1px solid rgba(233, 238, 245, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(233, 238, 245, 0.035),
    0 18px 60px rgba(0,0,0,0.55);
  overflow: hidden;
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* internal “monolith edge” */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 18% 16%, rgba(120, 255, 214, 0.05), transparent 60%),
    radial-gradient(980px 560px at 84% 18%, rgba(120, 160, 255, 0.035), transparent 62%),
    linear-gradient(180deg, rgba(233,238,245,0.055), transparent 18%);
  opacity: 0.82;
}

/* ===== Layout ===== */
.panel--title {
  grid-column: span 12;
  min-height: 190px;
  display: grid;
  place-content: center;
  text-align: center;
  position: relative;
  padding-top: 18px;
  padding-bottom: 24px;
}

/* HUD clock inside the title panel */
.hud-clock {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: center;

  line-height: 1;
  z-index: 2;

  /* no bubble */
  background: none;
  border: none;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hud-clock-time {
  color: rgba(233, 238, 245, 0.62);
  font-size: 0.88rem;
  letter-spacing: 0.12em;
}

.hud-clock-sub {
  color: rgba(233, 238, 245, 0.40);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

/* Title typography: cleaner + more “terminal signage” */
.panel--title h1 {
  font-family: 'IBM Plex Mono','Space Grotesk', ui-monospace, monospace;
  font-weight: 300;
  font-size: clamp(1.35rem, 3.6vw, 2.1rem);
  color: rgba(233,238,245,0.92);
  margin-bottom: 0.45rem;
  letter-spacing: 0.18em;
  text-transform: lowercase;
}

.panel--title .subtitle {
  color: rgba(233,238,245,0.45);
  font-size: 0.72rem;
  margin-bottom: 0.55rem;
  letter-spacing: 0.14em;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ===== Section screens (Terminal / Grid) ===== */
#panel-data .panel--title,
#panel-map .panel--title {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding-top: 18px;
  padding-bottom: 22px;
}

#panel-data .panel--title h2,
#panel-map .panel--title h2 {
  font-family: 'Space Grotesk','Inter', ui-sans-serif, system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  font-size: clamp(0.85rem, 1.8vw, 1.05rem);
  margin-bottom: 0.35rem;
  opacity: 0.65;
}

#panel-data .panel--title .subtitle,
#panel-map .panel--title .subtitle {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.10em;
  opacity: 0.45;
  margin-bottom: 0.3rem;
}

#panel-data,
#panel-map {
  filter: saturate(0.92) contrast(1.02);
}

.panel--clock {
  grid-column: span 6;
  aspect-ratio: 4 / 3;
  min-height: 160px;
  display: grid;
  place-content: center;
}

.panel--cam { grid-column: span 4; aspect-ratio: 4 / 3; }

.panel--cam--preview {
  grid-column: span 6;
  display: grid;
  place-content: center;
  aspect-ratio: 4 / 3;
  min-height: 160px;
}

.panel--log {
  grid-column: span 6;
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 160px;

  background: linear-gradient(
    180deg,
    rgba(7, 9, 12, 0.72),
    rgba(5, 7, 10, 0.88)
  );

  border: 1px solid rgba(233,238,245,0.045);
  box-shadow:
    inset 0 0 0 1px rgba(233,238,245,0.025),
    inset 0 14px 36px rgba(0,0,0,0.55),
    0 16px 44px rgba(0,0,0,0.45);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ===== Clock ===== */
.clock-time {
  font-size: clamp(1.6rem, 4.2vw, 2.6rem);
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--ink);
}

.clock-sub {
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  margin-top: 0.35rem;
  opacity: 0.9;
}

/* ===== Boot Log ===== */
.log {
  list-style: none;
  padding: 10px;
  font-size: 0.8rem;
  color: rgba(233,238,245,0.52);
  line-height: 1.32;
  overflow: auto;
}

/* ===== Desktop log: reduce empty presence without breaking mobile ===== */
@media (min-width: 701px) {
  .panel--log {
    aspect-ratio: auto;
    min-height: 200px;
    max-height: 280px;
  }

  .panel--log .log {
    position: static;
    inset: auto;
    max-height: 240px;
    padding: 12px 12px 14px;
  }
}

/* Reserve a few lines of presence so the log doesn’t start as a 1-line box */
#bootlog {
  min-height: calc(5 * 1.45em);
}

.log li + li { margin-top: 0.25rem; }

/* pinned boot header line */
.log .log-pin {
  color: rgba(233,238,245,0.55);
  letter-spacing: 0.18em;
  font-size: 0.64rem;
  text-align: center;
  opacity: 0.55;
}

/* separation between pinned block and cycling lines */
.log .log-pin:last-of-type { margin-bottom: 0.35rem; }

.panel--log .log {
  position: absolute;
  inset: 5px;
  overflow: auto;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 64%,
    rgba(0,0,0,0.55) 78%,
    rgba(0,0,0,0)
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 64%,
    rgba(0,0,0,0.55) 78%,
    rgba(0,0,0,0)
  );
}

/* ===== Links / preview ===== */
.panel--link a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.panel--link img { transition: transform 0.25s ease; }
.panel--link:hover img { transform: scale(1.02); }

/* ===== Cam tiles ===== */
.panel--cam img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.cam-label {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-size: 0.75rem;
  letter-spacing: 1px;
  color: rgba(233, 238, 245, 0.9);
  background: rgba(0, 0, 0, 0.45);
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(233, 238, 245, 0.16);
  box-shadow: 0 0 0 1px rgba(120,255,214,0.10);
}

.panel--link:hover .cam-label { background: rgba(120,255,214,0.20); }

/* ===== CAMERA (image-only grid) ===== */
.panel--monitors {
  grid-column: span 12;
  padding: clamp(10px, 1.8vw, 16px);
}

.monitors-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(10px, 1.6vw, 14px);
  margin: 0;
  padding: 0;
}

.monitor-item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
  border: 1px solid rgba(233, 238, 245, 0.08);
  box-shadow: 0 10px 26px rgba(0,0,0,0.30);
  background: rgba(0,0,0,0.18);
}

.monitor-item::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(420px 260px at 16% 18%, rgba(120,255,214,0.10), transparent 60%),
    radial-gradient(460px 260px at 82% 18%, rgba(255,60,90,0.07), transparent 62%);
  opacity: 0.5;
}

.monitor-item a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.monitor-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: filter 0.25s ease;
  filter: saturate(0.98) contrast(1.04) brightness(0.94);
}

.monitor-item:hover img {
  filter: saturate(1.02) contrast(1.08) brightness(0.98);
}

/* ===== CTA ===== */
.transmit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.28rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(233,238,245,0.16);
  background: rgba(8,10,14,0.42);
  color: rgba(233,238,245,0.75);
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  text-transform: lowercase;
  min-width: 96px;
  text-decoration: none;
  box-shadow:
    inset 0 0 0 1px rgba(233,238,245,0.04),
    0 0 18px rgba(120,255,214,0.06);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease;
}

.transmit-button:hover {
  background: rgba(14,18,24,0.58);
  border-color: rgba(120,255,214,0.28);
  box-shadow:
    inset 0 0 0 1px rgba(233,238,245,0.06),
    0 0 22px rgba(120,255,214,0.12);
  transform: translateY(-1px);
}

/* ===== Footer ===== */
footer {
  text-align: center;
  font-size: 0.75rem;
  padding: 0.6rem 0.4rem;
  color: rgba(233, 238, 245, 0.35);
}

/* ===== Glitch line ===== */
.glitch-line {
  position: relative;
  color: rgba(233, 238, 245, 0.92);
  overflow: hidden;
  animation: glitch-text 3.2s infinite;
}

@keyframes glitch-text {
  0%   { text-shadow:  1px  0px rgba(120,255,214,0.55), -1px  0px rgba(255,60,90,0.45); }
  25%  { text-shadow: -1px -1px rgba(120,255,214,0.50),  1px  1px rgba(255,60,90,0.40); }
  50%  { text-shadow:  1px -1px rgba(120,255,214,0.55), -1px  1px rgba(255,60,90,0.45); }
  75%  { text-shadow: -1px  1px rgba(120,255,214,0.50),  1px -1px rgba(255,60,90,0.40); }
  100% { text-shadow:  1px  0px rgba(120,255,214,0.55), -1px  0px rgba(255,60,90,0.45); }
}

/* ===== Responsive ===== */
@media (max-width: 700px) {
  .monitors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .deck { --gap: 12px; padding: var(--gap); }
  .deck { padding-bottom: 8px; }
  .site-header { padding: 0.5rem 0.7rem; min-height: unset; }

  .site-header { align-items: flex-start; }

  .header-right {
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .hud-clock { top: 18px; left: 50%; right: auto; transform: translateX(-50%); }
  .hud-clock-time { font-size: 0.82rem; }
  .hud-clock-sub  { font-size: 0.70rem; }

  .panel--log {
    grid-column: span 6;

    /* stop forcing a tall box when there are only a few lines */
    aspect-ratio: auto;
    min-height: 0;
  }

  [role=tablist] {
    justify-content: center;
    column-gap: 0.75rem;
    row-gap: 0.35rem;
  }

  [role=tab] { font-size: 0.78rem; letter-spacing: 0.06em; min-height: 2.0rem; }

  .panel--title {
    min-height: unset;
    place-content: start center;
    /* slightly tighter on top so the title panel doesn’t feel hollow */
    padding-top: 34px;
    padding-bottom: 14px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .panel--title h1 {
    font-size: clamp(1.05rem, 4.8vw, 1.55rem);
    margin-bottom: 0.40rem;
    letter-spacing: 0.12em;
    opacity: 0.88;
  }
  .panel--title .subtitle {
    font-size: 0.64rem;
    margin-bottom: 0.28rem;
    letter-spacing: 0.10em;
    opacity: 0.42;
  }
  .panel--title .transmit-button {
    margin-top: 0.32rem;
    font-size: 0.72rem;
    padding: 0.22rem 0.7rem;
    min-width: 88px;
    opacity: 0.82;
  }
  .panel {
    border-radius: 10px;
    box-shadow:
      inset 0 0 0 1px rgba(233,238,245,0.03),
      0 10px 36px rgba(0,0,0,0.45);
  }

  .log {
    font-size: 0.72rem;
    line-height: 1.35;
    opacity: 0.62;
  }

  [role=tab] {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    opacity: 0.75;
  }

  #panel-data .panel--title h2,
  #panel-map .panel--title h2 {
    font-size: 1.05rem;
    margin-bottom: 0.55rem;
  }

  #panel-data .panel--title .subtitle,
  #panel-map .panel--title .subtitle {
    font-size: 0.75rem;
  }

  .panel--clock,
  .panel--cam--preview {
    grid-column: span 6;
    min-height: 120px;
    aspect-ratio: 4 / 3;
  }

  .log { padding: 6px; line-height: 1.25; }
  .panel--log .log {
    /* let content define height; keep a soft cap so it never gets huge */
    position: static;
    inset: auto;
    padding: 10px 10px 12px;
    max-height: 11.5rem;
    min-height: calc(6 * 1.25em);
    overflow: auto;

    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 78%, rgba(0,0,0,0));
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 78%, rgba(0,0,0,0));
  }

  footer { padding: 0.55rem 0.10rem; }
}

@media (max-width: 520px) {
  .panel--cam,
  .panel--cam--preview,
  .panel--log,
  .panel--clock { grid-column: span 12; }
}

@media (max-width: 420px) {
  .monitors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 360px) {
  .glitch-line { font-size: 0.75rem; animation: glitch-text 1.2s infinite; }
  .monitors-grid { grid-template-columns: 1fr; }
}

/* ===== Spectator Viewer (in-page lightbox) ===== */
.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: grid;
  place-items: center;

  /* safe breathing room so the image never “sinks” to the bottom */
  padding: 14px;
}

.image-viewer[hidden] { display: none; }

.image-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.image-viewer-img {
  position: relative;
  z-index: 1;

  width: min(980px, calc(100vw - 28px));
  max-height: calc(100vh - 120px);

  display: block;
  object-fit: contain;

  border-radius: 14px;
  border: 1px solid rgba(233, 238, 245, 0.12);
  background: linear-gradient(180deg, rgba(18,22,28,0.55), rgba(9,11,14,0.72));
  box-shadow:
    inset 0 0 0 1px rgba(233, 238, 245, 0.05),
    0 30px 90px rgba(0,0,0,0.65);
}

.image-viewer-close {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 2;

  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(233, 238, 245, 0.18);
  background: rgba(10, 12, 16, 0.45);
  color: rgba(233, 238, 245, 0.85);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(233, 238, 245, 0.06);
}

.image-viewer-close:hover {
  background: rgba(16, 20, 26, 0.62);
  border-color: rgba(120, 255, 214, 0.30);
}

/* Prevent background scroll when viewer is open */
body.is-viewer-open { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .image-viewer {
    animation: viewer-fade 160ms ease-out;
  }
  @keyframes viewer-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

@media (max-width: 600px) {
  .image-viewer {
    padding: 12px;
  }

  .image-viewer-close {
    width: 36px;
    height: 36px;
    font-size: 20px;
    top: 12px;
    right: 12px;
  }

  /* tighter max-height so it stays centered and doesn’t feel bottom-heavy */
  .image-viewer-img {
    max-height: calc(100vh - 120px);
  }
}



/* ===== BASELINE (restricted / glass / hostile) ===== */

.panel--baseline {
  background: linear-gradient(
    180deg,
    rgba(6, 8, 12, 0.78),
    rgba(4, 6, 9, 0.92)
  );
  border: 1px solid rgba(233, 238, 245, 0.06);
  box-shadow:
    inset 0 0 0 1px rgba(233, 238, 245, 0.035),
    0 20px 70px rgba(0,0,0,0.65);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.panel--baseline::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(120,255,214,0.06),
      transparent 38%
    ),
    radial-gradient(
      600px 420px at 50% 110%,
      rgba(120,255,214,0.05),
      transparent 70%
    );
  opacity: 0.35;
}

/* Gate container */
.baseline-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

/* Input as scan slit */
.baseline-input {
  width: 190px;
  height: 26px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(233,238,245,0.25);
  color: rgba(233,238,245,0.9);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-align: center;
  outline: none;
}

.baseline-input::placeholder {
  color: transparent;
}

.baseline-input:focus {
  border-bottom-color: rgba(120,255,214,0.45);
  box-shadow: 0 1px 0 rgba(120,255,214,0.28);
}

/* Directive button */
.baseline-enter {
  background: transparent;
  border: 1px solid rgba(233,238,245,0.18);
  padding: 4px 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: rgba(233,238,245,0.55);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.baseline-enter:hover {
  border-color: rgba(120,255,214,0.35);
  color: rgba(233,238,245,0.85);
}

/* Access denied (hidden by default; JS can reveal later) */
.baseline-status {
  margin-top: 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: rgba(255,90,110,0.75);
  text-align: center;
  opacity: 0;
}

@media (max-width: 600px) {
  .panel--log {
    opacity: 0.92;
  }

  .log {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
  }
}