:root { --accent:#1ebea5; --bg:#0b1117; --panel:#10161c; --border:#1d2731; --text:#e6eef6; --muted:#9fb0be; }











html, body {





  margin: 0; padding: 0;





  background: var(--bg); color: var(--text);





  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;





}











a { color:#a1b7ff; text-decoration:none; }











.wrap { max-width:960px; margin:24px auto; padding:0 16px; }





.muted { color: var(--muted); }











.card {





  background: var(--panel);





  border: 1px solid var(--border);





  border-radius: 12px;





  padding: 18px 20px;





  margin: 14px 0;





}











h1, h2 { margin: 0 0 8px; }





ol { padding-left: 20px; margin: 14px 0; }





li { margin: 10px 0; }











input[type="range"] {





  width: 52%;





  vertical-align: middle;





  accent-color: var(--accent);





}











.val {





  display: inline-block;





  width: 3.2em;





  text-align: right;





  margin-left: .5em;





  color: var(--accent);





}











.btn {





  display: inline-block;





  background: var(--accent);





  color: #01231e;





  border: 0;





  border-radius: 10px;





  padding: 10px 14px;





  margin: 6px 6px 0 0;





  cursor: pointer;





}





.btn.gray { background:#8b939b; color:#0b0f12; }











.center { display:flex; gap:8px; flex-wrap:wrap; }