:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#94a3b8;
  --accent:#60a5fa;
  --text:#e6eef8;
}

/* Reset page spacing and make the three container fill the viewport */
html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

#three-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: block;
  z-index: 0;
  touch-action: none;
}

/* ── 3D shimmering title ─────────────────────────────── */
.site-title {
  --shimmer-dur: 4s;
  --glint-dur: 3s;
  --float-dur: 6s;
  --float-amp: -4px;

  position: relative;
  z-index: 2;
  margin: 0;
  padding: 1.2rem 0 0.6rem;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: clamp(1rem, 3vw, 1.8rem);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(
    120deg,
    #cbd5e1 0%,
    #f0f4ff 18%,
    #60a5fa 36%,
    #a78bfa 50%,
    #60a5fa 64%,
    #f0f4ff 82%,
    #cbd5e1 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;

  text-shadow:
    0 1px 0 rgba(96,165,250,0.4),
    0 2px 0 rgba(96,165,250,0.3),
    0 3px 0 rgba(96,165,250,0.2),
    0 4px 0 rgba(96,165,250,0.15),
    0 5px 0 rgba(96,165,250,0.1),
    0 8px 20px rgba(96,165,250,0.25),
    0 0 40px rgba(96,165,250,0.12);

  animation:
    shimmer var(--shimmer-dur) ease-in-out infinite,
    float   var(--float-dur)   ease-in-out infinite;
  user-select: none;
  pointer-events: none;
}

.site-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding: inherit;
  font: inherit;
  letter-spacing: inherit;
  color: transparent;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.5) 45%,
    rgba(255,255,255,0.8) 50%,
    rgba(255,255,255,0.5) 55%,
    transparent 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: glint var(--glint-dur) ease-in-out infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0%, 100% { background-position: 100% 50%; }
  50%      { background-position: 0% 50%; }
}

@keyframes glint {
  0%, 100% { background-position: 200% 50%; }
  50%      { background-position: -100% 50%; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(var(--float-amp)); }
}

/* lil-gui — stacked in .bottom-left-hud (shortest panels above, longest GUI below) */
.lil-gui.lil-root {
  --background-color: rgba(0,0,0,0.4);
  --title-background-color: transparent;
  --title-text-color: #e6eef8;
  --font-size: 12px;
  --widget-color: rgba(255,255,255,0.15);
  --focus-color: rgba(96,165,250,0.5);
  --number-color: #60a5fa;
  --string-color: #60a5fa;
  width: auto !important;
  max-width: min(92vw, 360px);
  position: relative !important;
  align-self: flex-start;
}

.lil-gui.lil-root > .lil-title {
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  color: #e6eef8;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.lil-gui.lil-root > .lil-title:hover {
  background: rgba(255,255,255,0.15);
}

.lil-gui.lil-root > .lil-children {
  max-height: 50vh;
  overflow-y: auto;
}

/* ── Spaceship cockpit knobs (src/ui/gui-knob.js, screen-dials.js) ───────── */
.gui-knob-row .lil-widget {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.gui-knob-row .lil-name {
  font-family: "Orbitron", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(103, 232, 249, 0.55);
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.25);
}

.gui-knob-dial {
  --knob-accent: #22d3ee;
  --knob-accent-dim: rgba(34, 211, 238, 0.35);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  position: relative;
  cursor: ns-resize;
  touch-action: none;
  flex-shrink: 0;
  isolation: isolate;
  background:
    radial-gradient(ellipse 95% 90% at 50% 42%, #3d4a5c 0%, #1a222e 42%, #0c1018 100%);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.45),
    0 0 14px rgba(34, 211, 238, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.55),
    inset 0 3px 8px rgba(0, 0, 0, 0.75),
    inset 0 -2px 4px rgba(255, 255, 255, 0.04);
}

/* Outer hull ring */
.gui-knob-dial::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.9);
  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.65),
    0 0 0 1px var(--knob-accent-dim);
  pointer-events: none;
  z-index: 0;
}

/* Inner glass / instrument bezel */
.gui-knob-dial::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(56, 189, 248, 0.08) 0%, transparent 55%);
  border: 1px solid rgba(34, 211, 238, 0.18);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 0;
}

.gui-knob-dial--three {
  --knob-accent: #fbbf24;
  --knob-accent-dim: rgba(251, 191, 36, 0.4);
  background:
    radial-gradient(ellipse 95% 90% at 50% 42%, #4a4230 0%, #221c12 42%, #0c0a08 100%);
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.5),
    0 0 14px rgba(251, 191, 36, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.55),
    inset 0 3px 8px rgba(0, 0, 0, 0.75),
    inset 0 -2px 4px rgba(255, 255, 255, 0.03);
}

.gui-knob-dial:active {
  cursor: ns-resize;
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.65),
    0 0 20px rgba(34, 211, 238, 0.22),
    0 4px 12px rgba(0, 0, 0, 0.55),
    inset 0 3px 10px rgba(0, 0, 0, 0.85),
    inset 0 -2px 4px rgba(255, 255, 255, 0.05);
}

.gui-knob-dial--three:active {
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.75),
    0 0 22px rgba(251, 191, 36, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.55),
    inset 0 3px 10px rgba(0, 0, 0, 0.85),
    inset 0 -2px 4px rgba(255, 255, 255, 0.04);
}

.gui-knob-dial:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(34, 211, 238, 0.85),
    0 0 24px rgba(34, 211, 238, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.55),
    inset 0 3px 8px rgba(0, 0, 0, 0.75);
}

.gui-knob-dial--three:focus-visible {
  box-shadow:
    0 0 0 2px rgba(251, 191, 36, 0.85),
    0 0 26px rgba(251, 191, 36, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.55),
    inset 0 3px 8px rgba(0, 0, 0, 0.75);
}

/* Luminous needle */
.gui-knob-pointer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  height: 4px;
  margin-top: -2px;
  margin-left: 0;
  transform-origin: 0 50%;
  border-radius: 1px 4px 4px 1px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(34, 211, 238, 0.15) 18%,
    rgba(103, 232, 249, 0.85) 72%,
    #ecfeff 100%
  );
  box-shadow:
    0 0 10px rgba(34, 211, 238, 0.95),
    0 0 3px rgba(255, 255, 255, 0.6);
}

.gui-knob-dial--three .gui-knob-pointer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(251, 191, 36, 0.2) 18%,
    rgba(253, 224, 71, 0.9) 72%,
    #fffbeb 100%
  );
  box-shadow:
    0 0 10px rgba(251, 191, 36, 0.9),
    0 0 3px rgba(255, 250, 220, 0.5);
}

.gui-knob-readout {
  font-family: "Orbitron", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: rgba(165, 243, 252, 0.92);
  text-align: right;
  min-width: 5em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.45);
}

/* Legacy canvas knob (optional; pattern row uses select instead) */
.screen-cockpit-knob {
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  cursor: ns-resize;
  touch-action: none;
  flex-shrink: 0;
  isolation: isolate;
}

.screen-cockpit-knob:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(34, 211, 238, 0.85),
    0 0 24px rgba(34, 211, 238, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.55);
}

/* Bottom-left stack: cockpit rows (short → long), then lil-gui, then song picker (three-scene.js) */
.bottom-left-hud {
  position: absolute;
  /* Sum minimum margin + safe area so controls sit above home indicator / gesture bar */
  left: calc(12px + env(safe-area-inset-left, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  box-sizing: border-box;
  max-height: calc(100vh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  pointer-events: none;
}

.bottom-left-hud > * {
  pointer-events: auto;
}

/*
 * Fullscreen when camera is inside a planet — blue honey dripping (three-scene.js)
 * Thick viscous strands, warm amber + cyan, glossy highlights.
 */
.planet-goop-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  overflow: hidden;
}

.planet-goop-overlay--visible {
  opacity: 1;
}

/* Warm ambient tint: deep blue with golden honey undertone */
.planet-goop-overlay__wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 130% 55% at 50% -5%, rgba(186, 220, 255, 0.45) 0%, transparent 45%),
    radial-gradient(ellipse 80% 40% at 15% 20%, rgba(120, 170, 240, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse 70% 35% at 85% 35%, rgba(200, 165, 90, 0.12) 0%, transparent 55%),
    linear-gradient(
      185deg,
      rgba(25, 55, 115, 0.58) 0%,
      rgba(45, 95, 175, 0.48) 22%,
      rgba(70, 125, 205, 0.38) 48%,
      rgba(35, 75, 145, 0.52) 72%,
      rgba(18, 40, 95, 0.62) 100%
    );
}

/*
 * Main honey ropes: cylindrical highlight (left) + body + shadow edge — reads viscous.
 */
.planet-goop-overlay__drips {
  position: absolute;
  inset: -25% -5% 0 -5%;
  background-image: repeating-linear-gradient(
    92deg,
    transparent 0px,
    transparent 4px,
    rgba(230, 242, 255, 0.5) 6px,
    rgba(140, 185, 240, 0.72) 16px,
    rgba(75, 125, 205, 0.78) 26px,
    rgba(40, 85, 165, 0.82) 34px,
    rgba(55, 100, 175, 0.65) 40px,
    rgba(120, 165, 225, 0.55) 48px,
    rgba(200, 175, 95, 0.14) 52px,
    transparent 58px,
    transparent 88px
  );
  background-size: 120% 100%;
  filter: blur(0.35px) saturate(1.2);
  animation: blue-honey-ropes 5.5s ease-in-out infinite;
  mix-blend-mode: normal;
  opacity: 0.94;
}

/* Secondary thinner streams + blobby drops */
.planet-goop-overlay__streaks {
  position: absolute;
  inset: -10% 0 0 0;
  background-image:
    repeating-linear-gradient(
      93deg,
      transparent 0px,
      transparent 30px,
      rgba(255, 248, 230, 0.2) 32px,
      rgba(100, 155, 220, 0.45) 38px,
      rgba(45, 95, 175, 0.55) 46px,
      transparent 54px,
      transparent 92px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0px,
      transparent 52px,
      rgba(210, 190, 120, 0.1) 54px,
      transparent 78px
    );
  opacity: 0.88;
  animation: blue-honey-fall 4.2s ease-in infinite;
  mix-blend-mode: multiply;
}

/* Specular glints sliding along the honey */
.planet-goop-overlay__shine {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    88deg,
    transparent 0px,
    transparent 36px,
    rgba(255, 255, 255, 0) 40px,
    rgba(255, 255, 255, 0.28) 44px,
    rgba(220, 235, 255, 0.35) 48px,
    rgba(255, 255, 255, 0.12) 52px,
    transparent 58px,
    transparent 96px
  );
  animation: blue-honey-shine 3.8s ease-in-out infinite;
  mix-blend-mode: overlay;
  opacity: 0.75;
  pointer-events: none;
}

@keyframes blue-honey-ropes {
  0% {
    transform: translateY(-14%) translateX(0) scaleY(1.02);
  }
  50% {
    transform: translateY(6%) translateX(-2%) scaleY(1.08);
  }
  100% {
    transform: translateY(24%) translateX(-5%) scaleY(1);
  }
}

@keyframes blue-honey-fall {
  0% {
    transform: translateY(-18%);
    opacity: 0.75;
  }
  45% {
    opacity: 0.98;
  }
  100% {
    transform: translateY(28%);
    opacity: 0.8;
  }
}

@keyframes blue-honey-shine {
  0% {
    transform: translateY(-8%) translateX(2%);
    opacity: 0.55;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(20%) translateX(-4%);
    opacity: 0.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .planet-goop-overlay__drips,
  .planet-goop-overlay__streaks,
  .planet-goop-overlay__shine {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

/* Floating cockpit modules (screen-dials.js) */
.screen-dials {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: max-content;
  max-width: min(96vw, 420px);
  pointer-events: none;
}

.screen-dials .screen-dial {
  pointer-events: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0;
  padding: 8px 12px 8px 14px;
  position: relative;
  background:
    linear-gradient(165deg, rgba(22, 32, 48, 0.97) 0%, rgba(8, 12, 20, 0.99) 100%);
  border: 1px solid rgba(34, 211, 238, 0.28);
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 6px 28px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -12px 24px rgba(0, 0, 0, 0.35);
}

/* Corner brackets — HUD frame */
.screen-dials .screen-dial::before,
.screen-dials .screen-dial::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 1;
}

.screen-dials .screen-dial::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid rgba(34, 211, 238, 0.75);
  border-left: 2px solid rgba(34, 211, 238, 0.75);
  border-radius: 1px 0 0 0;
}

.screen-dials .screen-dial::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid rgba(34, 211, 238, 0.75);
  border-right: 2px solid rgba(34, 211, 238, 0.75);
  border-radius: 0 0 1px 0;
}

.screen-dials .screen-dial__name {
  min-width: 5.5em;
  padding-right: 10px;
  font-family: "Orbitron", system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(103, 232, 249, 0.65);
  line-height: 1.4;
  text-shadow: 0 0 12px rgba(34, 211, 238, 0.35);
}

/* Music switch — matches cockpit dial panels */
.cockpit-toggle {
  position: relative;
  width: 52px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  background: transparent;
  flex-shrink: 0;
}

.cockpit-toggle:focus-visible {
  outline: 2px solid rgba(34, 211, 238, 0.75);
  outline-offset: 2px;
}

.cockpit-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.cockpit-toggle__track {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(12, 18, 28, 0.95) 0%, rgba(6, 10, 16, 0.98) 100%);
  border: 1px solid rgba(34, 211, 238, 0.35);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.55),
    0 0 10px rgba(34, 211, 238, 0.08);
  pointer-events: none;
}

.cockpit-toggle__thumb {
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  background: linear-gradient(145deg, #67e8f9 0%, #22d3ee 45%, #0e7490 100%);
  box-shadow:
    0 0 10px rgba(34, 211, 238, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  pointer-events: none;
}

.cockpit-toggle[aria-checked="true"] .cockpit-toggle__thumb {
  transform: translateX(24px);
  background: linear-gradient(145deg, #a5f3fc 0%, #22d3ee 50%, #0891b2 100%);
  box-shadow:
    0 0 14px rgba(34, 211, 238, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.screen-dial--music-off .cockpit-toggle__track {
  border-color: rgba(100, 116, 139, 0.45);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.65);
}

.screen-dial--music-off .cockpit-toggle__thumb {
  background: linear-gradient(145deg, #475569 0%, #334155 100%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

.screen-dial--music-live .screen-dial__name {
  color: rgba(251, 191, 36, 0.55);
}

/* Shatter clock — BPM / bar / countdown (screen-dials.js) */
.screen-dials .screen-dial--shatter-clock {
  flex-direction: column;
  align-items: stretch;
  max-width: min(96vw, 28rem);
}

.screen-dials .screen-dial__shatter-clock-text {
  margin: 0;
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(226, 246, 255, 0.95);
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 1.2em;
}

.screen-dials .screen-dial--shatter-clock .screen-dial__name {
  min-width: 0;
  padding-bottom: 4px;
}

/* Pattern row — select for shatter layout mode */
.screen-dials .screen-dial--pattern {
  min-width: 12.5rem;
}

.screen-dials .cockpit-pattern-select {
  min-width: 11rem;
  max-width: min(70vw, 18rem);
  padding: 6px 8px;
  font-family: "Orbitron", system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: none;
  color: rgba(226, 246, 255, 0.95);
  cursor: pointer;
  border-radius: 2px;
  border: 1px solid rgba(34, 211, 238, 0.45);
  background: linear-gradient(180deg, rgba(12, 22, 34, 0.95) 0%, rgba(6, 12, 20, 0.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 10px rgba(34, 211, 238, 0.12);
}

.screen-dials .cockpit-pattern-select:focus-visible {
  outline: 2px solid rgba(34, 211, 238, 0.75);
  outline-offset: 2px;
}

.screen-dials .cockpit-pattern-select option {
  background: #0f172a;
  color: #e2f3ff;
}

.screen-dial--shatter-sub-off .cockpit-shatter-btn {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Shatter — momentary trigger (screen-dials.js) */
.cockpit-shatter-btn {
  min-width: 72px;
  padding: 6px 12px;
  font-family: "Orbitron", system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(254, 243, 199, 0.95);
  cursor: pointer;
  border-radius: 2px;
  border: 1px solid rgba(251, 191, 36, 0.55);
  background: linear-gradient(180deg, rgba(120, 53, 15, 0.55) 0%, rgba(69, 26, 3, 0.85) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 12px rgba(245, 158, 11, 0.25);
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.45);
  transition: filter 0.12s ease, box-shadow 0.12s ease;
}

.cockpit-shatter-btn:hover {
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 16px rgba(245, 158, 11, 0.4);
}

.cockpit-shatter-btn:active {
  filter: brightness(0.92);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45);
}

.cockpit-shatter-btn:focus-visible {
  outline: 2px solid rgba(251, 191, 36, 0.75);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .bottom-left-hud {
    left: calc(10px + env(safe-area-inset-left, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100% - 20px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    gap: 6px;
  }

  .bottom-left-hud .screen-dials .screen-dial {
    padding: 6px 10px 6px 12px;
  }

  .bottom-left-hud .screen-dials .screen-dial__name {
    min-width: 4.75em;
    font-size: 8px;
  }
}