@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

  .converter { max-width: 760px; margin: 0 auto 40px; font-family: 'Poppins', sans-serif; }
  .copy { font-size: 14px; color: #555; margin: 6px 0 16px; text-align: center; }

  .bw {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 14px;
    align-items: center;
    justify-items: center;
    width: fit-content;
    margin: 0 auto 18px;
  }
  .corner { width: 28px; height: 1px; }
  .bit-labels {
    display: grid; grid-template-columns: repeat(6, 42px); gap: 12px; justify-content: center;
    font: 600 12px/1.2 'Poppins', sans-serif; color: #666;
  }
  .bit-labels > div { text-align:center; }
  .row-tag { width: 28px; text-align: right; font: 700 13px/1 'Poppins', sans-serif; color:#475569; padding-right:2px; }
  .led-row { display:grid; grid-template-columns: repeat(6, 42px); gap:12px; justify-content:center; }

  .year-wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: repeat(4, auto) auto;
    gap: 10px 16px;
    align-items: start;
    justify-items: center;
    width: fit-content;
    margin: 0 auto;
  }

  .y-labels {
    grid-column: 1 / 2;
    grid-row: 1 / 5;
    display: grid;
    grid-auto-rows: 36px;
    row-gap: 10px;
    font: 600 12px/1.2 'Poppins', sans-serif; color:#666;
    padding-top: 2px;
  }
  .y-labels > div { display:flex; align-items:center; height:36px; width:28px; text-align:right; }

  .year-rows {
    grid-column: 2 / 3;
    grid-row: 1 / 5;
    display: grid;
    grid-auto-rows: 36px;
    row-gap: 10px;
  }

  .bcd-row {
    display: flex;
    flex-direction: row-reverse;
    gap: 12px;
    justify-content: center;
    align-items: center;
    min-width: calc(4 * 42px + 3 * 12px);
  }

  .y-spacer {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
    height: 0;
  }

  .bit-labels-under {
    grid-column: 2 / 3;
    grid-row: 5 / 6;
    display: flex;
    flex-direction: row-reverse;
    gap: 12px;
    justify-content: center;
    font: 600 12px/1.2 'Poppins', sans-serif; color:#666;
    padding-top: 6px;
    min-width: calc(4 * 42px + 3 * 12px);
  }
  .bit-labels-under > div { width: 42px; text-align: center; }

  .led, .bcd-led {
    width: 36px; height:36px; border-radius:10px; background:#e9edf2;
    box-shadow: inset 0 0 0 2px #d1d9e6;
    transition: box-shadow 120ms linear, transform 80ms ease, background 120ms linear, opacity 120ms linear;
  }
  .led.on, .bcd-led.on {
    background:#22c55e1a;
    box-shadow: 0 0 10px rgba(34,197,94,.7), 0 0 18px rgba(34,197,94,.5), inset 0 0 0 2px #22c55e;
    transform: translateY(-1px);
  }
  .led.na, .bcd-led.na { opacity:.25; box-shadow: inset 0 0 0 2px #dfe6f0; background:#f3f6fa; }

  .date-readout { margin-top: 16px; font:700 20px/1.2 'Poppins', sans-serif; text-align:center; color:#111827; letter-spacing:.3px; }

  @media (max-width: 520px) {
    .bit-labels, .led-row { grid-template-columns: repeat(6, 36px); gap: 10px; }
    .led, .bcd-led { width:32px; height:32px; border-radius:8px; }
    .y-labels { grid-auto-rows:32px; }
    .year-rows { row-gap: 10px; }
    .bcd-row { gap: 10px; min-width: calc(4 * 36px + 3 * 10px); }
    .bit-labels-under { gap: 10px; min-width: calc(4 * 36px + 3 * 10px); }
    .bit-labels-under > div { width: 36px; }
  }