:root {
  --bg0: #05070c;
  --bg1: #0c1220;
  --bg2: #0b1224;
  --fg: #cfe8ff;
  --muted: #8aa3bf;
  --neon: #5bd3ff;
  --neon2: #7cf7d4;
  --edge: #1a2436;
  --panel: #0b1324;
  --panel2: #0d172d;
  --accent: #91c8e4;
}

* {
  box-sizing: border-box;
  font-family: Consolas, monospace !important;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 28px;

  /* original gradients */
  background-image: radial-gradient(
      1600px 1100px at 20% 10%,
      #0e1a33 0%,
      var(--bg1) 55%,
      var(--bg0) 100%
    ),
    linear-gradient(180deg, #060912 0%, #02050a 100%),
    /* ultra-subtle noise tile to break banding */
      url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='2'/></filter><rect width='100%%' height='100%%' filter='url(%23n)' opacity='.06'/></svg>");

  /* tile the noise; gradients are single large layers */
  background-size: auto, auto, 64px 64px;
  background-repeat: no-repeat, no-repeat, repeat;

  /* blend noise gently with the gradients */
  background-blend-mode: normal, normal, overlay;

  /* optional: keep backgrounds stable while scrolling (often reduces artifacts) */
  background-attachment: fixed, fixed, fixed;

  color: var(--fg);
  display: grid;
  place-items: start center;
}

a svg {
  fill: white;
}

a:hover svg {
  fill: #ccc; /* lighter gray */
}

.wrap {
  width: min(900px, 100%);
  display: grid;
  gap: 16px;
}

.title {
  font-size: 22px;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-shadow: 0 0 10px rgba(91, 211, 255, 0.35),
    0 0 18px rgba(124, 247, 212, 0.18);
}

.glow-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--neon) 0%,
    #1fb2ff 60%,
    transparent 70%
  );
  box-shadow: 0 0 16px var(--neon), 0 0 36px rgba(124, 247, 212, 0.35);
}

.panel {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel2) 100%);
  border: 1px solid var(--edge);
  border-radius: 14px;
  padding: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 10px 30px rgba(9, 20, 40, 0.35), 0 0 30px rgba(91, 211, 255, 0.08);
}

.row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

@media (min-width: 800px) {
  .row {
    flex-wrap: nowrap;
  }
}

input[type="text"] {
  flex: 1 1 auto;
  min-width: 200px;
  padding: 12px 14px;
  font-size: 14px;
  letter-spacing: 0.3px;
  color: var(--fg);
  background: #0a1326;
  border: 1px solid #14223a;
  border-radius: 10px;
  outline: none;
  transition: box-shadow 0.2s, border-color 0.2s;
}

input[type="text"]::placeholder {
  color: var(--muted);
}

input[type="text"]:focus {
  border-color: #224a72;
  box-shadow: 0 0 0 3px rgba(91, 211, 255, 0.12);
}

button {
  padding: 10px 14px;
  border: 1px solid #1b2a44;
  background: #0c182f;
  color: var(--fg);
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: 0.2px;
  box-shadow: 0 0 12px rgba(91, 211, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

button:hover {
  background: #0f2041;
  box-shadow: 0 0 18px rgba(124, 247, 212, 0.18);
}

button:active {
  transform: translateY(1px) scale(0.995);
}

select {
  padding: 10px 12px;
  border: 1px solid #1b2a44;
  background: #0c182f;
  color: var(--fg);
  border-radius: 10px;
}

select:focus {
  outline: none;
  border-color: #224a72;
  box-shadow: 0 0 0 3px rgba(91, 211, 255, 0.12);
}

/* Match the scale <select> to button styling */
select#exportScale {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  padding: 10px 36px 10px 14px; /* room for chevron */
  border: 1px solid #1b2a44;
  background: linear-gradient(
    180deg,
    #0e1d3a 0%,
    #0c162c 100%
  ); /* like .primary */
  color: var(--fg);
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(91, 211, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  line-height: 1;
  white-space: nowrap;
  font-family: Consolas, monospace; /* your global choice */
  font-size: 14px;
}

/* Chevron icon */
select#exportScale {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23bfe5ff' d='M4 6l4 4 4-4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
}

select#exportScale:hover {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23d5f1ff' d='M4 6l4 4 4-4z'/></svg>");
  background-color: #0f2041; /* subtle lift */
  box-shadow: 0 0 18px rgba(124, 247, 212, 0.18);
}

select#exportScale:focus {
  outline: none;
  border-color: #224a72;
  box-shadow: 0 0 0 3px rgba(91, 211, 255, 0.12);
}

/* Options popup — limited across browsers, but helps */
select#exportScale option {
  background: #0c182f;
  color: var(--fg);
}

button,
select {
  flex: 0 0 auto;
  white-space: nowrap;
}

.primary {
  border-color: #23507d;
  background: linear-gradient(180deg, #0e1d3a 0%, #0c162c 100%);
}

.canvas-wrap {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

canvas {
  width: 512px;
  height: 512px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border-radius: 12px;
  background: #08101d;
  border: 1px solid #14223a;
  box-shadow: 0 0 24px rgba(91, 211, 255, 0.08),
    inset 0 0 40px rgba(124, 247, 212, 0.04);
}

.meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  display: grid;
  gap: 8px;
}

.badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.badge {
  padding: 3px 8px;
  border-radius: 8px;
  border: 1px solid #163356;
  background: #0a1730;
  color: #bfe5ff;
  box-shadow: 0 0 12px rgba(91, 211, 255, 0.08);
}

.palette {
  display: flex;
  gap: 8px;
  align-items: center;
}

.swatch {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid #0008;
}

.hint {
  font-size: 11px;
  opacity: 0.85;
}

/* a bit more vertical scroll room */
.wrap {
  margin-bottom: 120px;
}

/* canvas frame with subtle glow and a small gutter for ticks */
.frame {
  position: relative;
  padding: 16px; /* gutter where ticks live */
  border-radius: 16px;
  background: #08101d;
  border: 1px solid #14223a;
  box-shadow: 0 0 24px rgba(91, 211, 255, 0.08),
    inset 0 0 40px rgba(124, 247, 212, 0.04);
  width: fit-content;
}

/* keep the art crisp, cal overlays on top, no pointer events */
.frame canvas#art {
  position: relative;
  z-index: 2; /* above */
  display: block;
  width: 512px;
  height: 512px; /* your visible scale; stays pixelated */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border-radius: 12px;
}

.frame canvas#cal {
  position: absolute;
  z-index: 1; /* below art */
  inset: 0;
  pointer-events: none;
  border-radius: 16px; /* match .frame radius */
}