*{padding: 0;margin: 0;box-sizing:border-box;}
:root, html, body {
width: 100vw;
height: 100vh;
}
.input-range{
width: 67%; /* bisa disesuaikan, misalnya 250px atau 300px */
height: 14px;
margin: 10px 0;
appearance: none;
background: #ccc;
border-radius: 4px;
outline: none;
transition: background 0.3s ease;
}
.input-range:hover {
background: #aaa;
}
.input-range::-webkit-slider-thumb {
appearance: none;
width: 30px;
height: 30px;
background: #675f6b;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 2px rgba(0,0,0,0.3);
transition: background 0.3s ease;
}
.input-range::-webkit-slider-thumb:hover {
background: #4e454d;
}
.range-value{
display: inline-block;
margin-left: 8px;
font-weight: bold;
color: #675f6b;
}

#picker,input[type="radio"] {
display: none; /* sembunyikan radio asli biar gaya custom lebih bersih */
}
input[type="radio"] + label {
display: inline-block;
padding: 5px;
margin: 2px;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
background: #f0f0f0;
color: #333;
}
input[type="radio"]:checked + label {
background: #675f6b;
color: #ccc8ce;
}
svg { border: 1px solid #ccc; margin: 0; cursor: pointer; }
#pickerContainer { position:relative;left:0;bottom:0;
background:silver;width:100%;}
#output {width:100%;position:absolute;left:0;top:0;font-family: monospace; background:rgba(0,0,0,0.5);color:#e0e0e0; padding: 2px; border: 1px solid #bbb;z-index:-1 }
.range-group { margin-top: 10px; display: none; }
.range-value { color:red;font-weight: bold; margin-left: 10px; }
.input-range{width:100%;padding:5px;}
#svgSourceDisplay {
width:100%;height:250px;overflow:scroll;display: none; margin-top: 10px; background: #eef; padding: 10px; border: 1px dashed #99c; white-space: pre-wrap; }
button {margin: 5px; padding:5px}