/* Mapshroom's current range-control skin, shared from src/index.css. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
input[type='range'] {
  --range-track-height: 14px;
  --range-thumb-height: 12px;
  --range-fill: #505054;
  --range-rest: #29292d;
  --range-hover-background: linear-gradient(var(--range-hover-angle, 90deg),
    transparent calc(var(--range-hover-position, -10px) - 1px),
    #d4d4d8 calc(var(--range-hover-position, -10px) - 1px) calc(var(--range-hover-position, -10px) + 1px),
    transparent calc(var(--range-hover-position, -10px) + 1px));
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  cursor: default;
  touch-action: pan-y;
}

input[type='range']::-webkit-slider-runnable-track {
  height: var(--range-track-height);
  border: 0;
  border-radius: 2px;
  background: var(--range-hover-background), linear-gradient(90deg,
    var(--range-fill) 0 var(--range-fill-position, 0%),
    var(--range-rest) var(--range-fill-position, 0%) 100%);
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 8px;
  height: var(--range-thumb-height);
  margin-top: 1px;
  border: 0;
  border-radius: 5px;
  background: #96969c;
  cursor: inherit;
}

input[type='range']::-moz-range-track {
  box-sizing: border-box;
  height: var(--range-track-height);
  border: 0;
  border-radius: 2px;
  background: var(--range-hover-background), linear-gradient(90deg,
    var(--range-fill) 0 var(--range-fill-position, 0%),
    var(--range-rest) var(--range-fill-position, 0%) 100%);
}

input[type='range']::-moz-range-progress {
  background: transparent;
}

input[type='range']::-moz-range-thumb {
  box-sizing: border-box;
  width: 8px;
  height: var(--range-thumb-height);
  border: 0;
  border-radius: 5px;
  background: #96969c;
  cursor: inherit;
}

input[type='range']:focus-visible {
  outline: 1px solid #c4c4c8;
  outline-offset: 2px;
}

input[type='range']:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* Keep a drag that starts on the track attached to the finger, including vertical ranges. */
input[type='range'][data-range-input] {
  touch-action: none;
}

@media (max-width: 960px), (pointer: coarse) {
  input[type='range'] {
    --range-track-height: 20px;
    --range-thumb-height: 18px;
    --range-fill: rgba(80, 80, 84, 0.6);
    --range-rest: rgba(41, 41, 45, 0.45);
    height: 44px;
  }
}


:root{font-family:'IBM Plex Sans',sans-serif;--panel:#141414;--border:#333;--muted:#aaa;--accent:#dedede;--warm:#bcbcbc;color:#d4d4d4;background:#000;color-scheme:dark}
header{background:#141414;border-color:#333;gap:16px}.title{font-size:16px;color:#eee}.badge{color:#bbb;border-color:#484848}.header-divider{background:#444}
.brand{font-family:'IBM Plex Sans',sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#eee;gap:9px;flex-shrink:0}.brand img{width:33px;height:33px;object-fit:contain}.brand span{display:inline}.header-actions{margin-left:auto}
.tool-rail,.panel{background:#141414}.tool-rail{border-color:#333}.panel-title h1,.panel-title h2{color:#eee}.range,.stack{color:#d4d4d4}.range output{color:#aaa}.range input[type='range']{height:24px;accent-color:auto}.range{gap:5px;margin:10px 0 12px}
.canvas-area{background:#000;background-image:none;border-color:#292929}.workspace-footer,.sample-label,.micro,.privacy-note,.tool-hint{color:#999}.brush-preview{background-color:#1b1b1b}.segments,.stack input,select{background:#1b1b1b;border-color:#484848;color:#d4d4d4}.segments .active,.primary{background:#dedede;color:#171717}.primary:hover{background:#eee}
.layer{background:#1b1b1b}.layer.active{background:#272727;border-color:#484848}.layer small,.map-preview small{color:#aaa}.layer-visible,.check,.light-color-label{color:#bbb}.full{background:#272727;border-color:#484848;color:#ddd}.samples button{background:#141414;border-color:#333}.samples button.active{border-color:#dedede}.map-preview strong{color:#ddd}button:hover{background:#333}.tool-rail button.selected{color:#171717;background:#dedede}#filename{color:#ddd}#dimensions{color:#999}#loading{background:#141414ed}dialog{background:#141414;border-color:#484848;color:#d4d4d4}dialog h2{color:#eee}.muted{color:#aaa}a{color:#ccc}
@media(max-width:960px),(pointer:coarse){.range input[type='range']{height:44px}}
@media(max-width:650px){header{gap:7px}.brand span{display:none}.brand img{width:26px;height:26px}.brand{font-size:12px}.title{font-size:13px}.header-actions{gap:1px}.badge{margin-left:3px}}