body {
  background: #050505;
  color: #8a5a00;
  font-family: "Courier New", monospace;
  margin: 0;
}

header {
  padding: 20px;
  border-bottom: 1px solid #8a5a00;
}

.logo {
  font-size: 18px;
  letter-spacing: 2px;
}

/* IMPORTANT: logo link styling */
.logo,
.logo:visited,
.logo:hover,
.logo:active {
  color: #8a5a00;
  text-decoration: none;
}

.logo:hover {
  text-shadow: 0 0 10px #8a5a00;
  cursor: pointer;
}

.research {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
}

h2 {
  margin-top: 40px;
  border-bottom: 1px solid #8a5a00;
  padding-bottom: 5px;
  font-size: 18px;
}

.meta {
  opacity: 0.7;
  font-size: 13px;
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

input[type="range"] {
  width: 100%;
  accent-color: #8a5a00;
}

#palette {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ramp {
  display: flex;
}

.color {
  width: 60px;
  height: 60px;
  border: 1px solid #8a5a00;
}

/* RESET DEFAULT LOOK */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
}

/* TRACK */
input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  border: 1px solid #8a5a00;
  background: transparent;
}

input[type="range"]::-moz-range-track {
  height: 2px;
  border: 1px solid #8a5a00;
  background: transparent;
}

/* THUMB */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 16px;
  background: #8a5a00;
  border: 1px solid #8a5a00;
  margin-top: -7px;
  cursor: pointer;
  box-shadow: 0 0 6px #8a5a00;
}

input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 16px;
  background: #8a5a00;
  border: 1px solid #8a5a00;
  cursor: pointer;
  box-shadow: 0 0 6px #8a5a00;
}

/* HOVER EFFECT */
input[type="range"]:hover::-webkit-slider-thumb {
  box-shadow: 0 0 10px #8a5a00;
}

input[type="range"]:hover::-moz-range-thumb {
  box-shadow: 0 0 10px #8a5a00;
}

/* CUSTOM CURSOR */
.custom-cursor {
  position: fixed;
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 4px #8a5a00);
}

/* GLOBAL KILL */
html, body, * {
  cursor: none !important;
}

/* FORM ELEMENTS (these ignore global rules sometimes) */
input,
button,
select,
textarea,
label {
  cursor: none !important;
}

/* RANGE SLIDER — ALL PARTS */
input[type="range"] {
  cursor: none !important;
}

input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-webkit-slider-runnable-track {
  cursor: none !important;
}

input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-track {
  cursor: none !important;
}

/* EXTRA: focus/active states */
*:hover,
*:active,
*:focus {
  cursor: none !important;
}

select {
  background: #050505;
  color: #8a5a00;
  border: 1px solid #8a5a00;
  padding: 5px;
  font-family: inherit;
}

/* === DROPDOWN BASE === */
select {
  background: #050505;
  color: #8a5a00;
  border: 1px solid #8a5a00;
  padding: 5px;
  font-family: inherit;

  /* kill default look */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* === HOVER / FOCUS === */
select:hover,
select:focus {
  box-shadow: 0 0 8px #8a5a00;
  outline: none;
}

/* === OPTIONS (limited browser control) === */
option {
  background: #050505;
  color: #8a5a00;
}

#grid {
  margin-top: 20px;
  border: 1px solid #8a5a00;
  image-rendering: pixelated;
}

.pixel {
  width: 20px;
  height: 20px;
  border: 1px solid #8a5a00;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border: 1px solid #8a5a00;
  background: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red);
}

input[type="range"]::-moz-range-track {
  height: 6px;
  border: 1px solid #8a5a00;
  background: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red);
}

/* LET SLIDERS ACTUALLY WORK */
input[type="range"] {
  pointer-events: auto;
}

input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto;
}

input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #050505;
}

::-webkit-scrollbar-thumb {
  background: #8a5a00;
  border-radius: 5px;
  box-shadow: 0 0 5px #8a5a00;
}

::-webkit-scrollbar-thumb:hover {
  background: #6c4800;
}