:root{
  --bs-primary:#b45309;   /* burnt orange */
  --bs-secondary:#78350f; /* chestnut brown */
  --bs-info:#d97706;      /* amber */
  --bs-danger:#dc2626;    /* deep red */
  --bs-success:#15803d;   /* earthy green */
  --bs-body-bg:#fff7ed;   /* light fall cream */
  --bs-body-color:#431407;/* dark brown */
}

body{
  background:var(--bs-body-bg);
  color:var(--bs-body-color);
  min-height:100vh;
}

header{
  background:linear-gradient(120deg,var(--bs-primary),var(--bs-secondary));
}

/* Output box */
#out{
  min-height:8rem;
  background-color:#fef3c7; /* warm tan */
}

/* Hover highlight for the dblclick card (very visible) */
.hoverable{
  transition:box-shadow .15s ease, transform .05s ease, background-color .15s ease, border-color .15s ease;
}
.hoverable.activated{
  background-color:#fee2e2;            /* light red background */
  border:2px solid #dc2626;            /* deep red border */
  box-shadow:0 0 0 0.25rem rgba(220,38,38,.25);
  transform:translateY(-2px);
}

/* Hover highlight for the hover counter card */
.hover-highlight{
  background-color:#fef3c7;            /* warm amber background */
  border:2px solid #d97706;            /* amber border */
  box-shadow:0 0 0 0.25rem rgba(217,119,6,.25);
  transform:translateY(-2px);
}

/* Distinct fall-colored buttons */
#btnClick{
  background-color:#b45309; border-color:#9a3412; color:#fff;
}
#btnClick:hover{ background-color:#9a3412; }

#btnTime{
  background-color:#d97706; border-color:#b45309; color:#fff;
}
#btnTime:hover{ background-color:#b45309; }

#btnClear{
  background-color:#dc2626; border-color:#991b1b; color:#fff;
}
#btnClear:hover{ background-color:#991b1b; }

/* Keypress monitor styling */
.keybox{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:.5rem;
  padding:1rem;
  display:grid;
  gap:.5rem;
}
.kb-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.5rem .75rem;
  border:1px dashed #e5e7eb;
  border-radius:.375rem;
  background:#fffaf0; /* light warm bg */
}
.kb-label{
  text-transform:uppercase;
  font-size:.75rem;
  letter-spacing:.08em;
  color:#78350f;
}
.kb-value{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight:700;
  font-size:1.125rem;
  color:#111827;
}
.kb-hint{
  font-size:.875rem;
  color:#6b7280;
  text-align:center;
  margin-top:.25rem;
}