.container {
	max-width: 700px;
	margin: auto;
	padding: 2rem;
}

h1 { 
	font-size: 1.8rem; 
	color: var(--ink);
	margin: 0 0 0.5rem 0;
}

h2 {
	font-size: 1.2rem;
	color: var(--ink);
	margin: 0 0 1rem 0;
}

.section { 
	margin-bottom: 2.5rem; 
}

label {
  font-weight: 500;
  display:block;
  margin:6px 0;
  color: var(--ink);
}

textarea {
  width:100%;
  padding:10px;
  font-size:1rem;
  min-height:200px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: monospace;
  background: var(--white);
  color: var(--ink);
}

input[type="text"] {
  width:100%;
  padding:10px;
  font-size:1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: var(--white);
  color: var(--ink);
}

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

input[type="number"] {
  width:80px;
  padding:8px;
  font-size:1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: var(--white);
  color: var(--ink);
}

button {
  padding:8px 14px;
  background:#050643;
  color:#fff;
  border:none;
  border-radius: 4px;
  cursor:pointer;
  font-weight: 500;
}

button:hover {
  background:#0f0d5f;
}

button.copied {
  background: #059669;
}

button.copied:hover {
  background: #047857;
}

.checkbox-inline {
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:500;
  color: var(--ink);
}

input[type="checkbox"] {
  width: auto;
  margin: 0;
  cursor: pointer;
}

.small {
  font-size:.9rem;
  color:var(--muted);
}
}