*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'Inter',sans-serif;
  background:#f3f3f3;
  color:#111;
}

/* GRID BACKGROUND */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:linear-gradient(#ddd 1px, transparent 1px),
                   linear-gradient(90deg,#ddd 1px, transparent 1px);
  background-size:40px 40px;
  opacity:.5;
  z-index:-1;
}

.container{padding:40px}

.badge{
  background:#facc15;
  padding:6px 12px;
  border:2px solid #000;
  display:inline-block;
  margin-bottom:20px;
}

h1{
  font-size:64px;
  font-weight:800;
  line-height:1.05;
}

.highlight{background:#ff7a59}

.layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  margin-top:40px;
}

.card{
  background:#fff;
  border:2px solid #000;
  border-radius:10px;
  padding:22px;
  box-shadow:8px 8px 0 #000;
}

.dark{
  background:#1c1512;
  color:#fff;
}

.section-title{
  font-weight:700;
  display:flex;
  justify-content:space-between;
}

.small{font-size:12px;opacity:.6}

.input-wrap{position:relative;margin:15px 0}

.input{
  width:100%;
  padding:14px 40px;
  border:2px solid #000;
  border-radius:8px;
  background:#1c1512;
  color:#fff;
}

.slash{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  color:#aaa;
}

.left{left:10px}
.right{right:10px}

.group-label{
  font-size:12px;
  margin-top:15px;
  letter-spacing:2px;
}

.palette button{
  border:2px solid #000;
  padding:8px 12px;
  margin:5px;
  border-radius:8px;
  cursor:pointer;
}

.palette button:hover{
  background:#000;
  color:#fff;
}

.controls{margin-top:15px}

.btn{
  border:2px solid #000;
  padding:10px 14px;
  margin-right:10px;
  cursor:pointer;
}

.primary{
  background:#000;
  color:#fff;
}

.output{
  margin-top:15px;
  font-family:monospace;
}

.range{width:100%;margin-top:10px}

.result-box{
  margin-top:15px;
  padding:12px;
  border:2px solid #000;
  background:#cfe7d6;
}

.note{
  font-size:12px;
  margin-top:10px;
}