fix(sw): refine property panel and Firefox range styles

- Property bar ends after its last field (content width, scrolls when longer)
- Remove Figma canvas layers from property tool and close SVGs
- Suppress header field hover while the field's own dropdown is open
- Gauge: Figma red fill pill, beige track, Figma thumb SVG; shared
  paint for WebKit and Gecko (::-moz-range-*) so Firefox matches Chrome
- Story buttons for gauge external value / disabled / read-only
- Browser checks: follow-up fixes, Chrome vs Firefox range, close button

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

packages/sw/src/assets/property-close-hover.svg

@@ -1,10 +1,6 @@
 <svg width="44" height="30" viewBox="0 0 44 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="44" height="30" fill="#F5F5F5"/>
 <g id="2. &#237;&#151;&#164;&#235;&#141;&#148;">
-<path d="M-2243 -4131C-2243 -4132.1 -2242.1 -4133 -2241 -4133H3016C3017.1 -4133 3018 -4132.1 3018 -4131V8497C3018 8498.1 3017.1 8499 3016 8499H-2241C-2242.1 8499 -2243 8498.1 -2243 8497V-4131Z" fill="white"/>
-<path d="M-2241 -4132H3016V-4134H-2241V-4132ZM3017 -4131V8497H3019V-4131H3017ZM3016 8498H-2241V8500H3016V8498ZM-2242 8497V-4131H-2244V8497H-2242ZM-2241 8498C-2241.55 8498 -2242 8497.55 -2242 8497H-2244C-2244 8498.66 -2242.66 8500 -2241 8500V8498ZM3017 8497C3017 8497.55 3016.55 8498 3016 8498V8500C3017.66 8500 3019 8498.66 3019 8497H3017ZM3016 -4132C3016.55 -4132 3017 -4131.55 3017 -4131H3019C3019 -4132.66 3017.66 -4134 3016 -4134V-4132ZM-2241 -4134C-2242.66 -4134 -2244 -4132.66 -2244 -4131H-2242C-2242 -4131.55 -2241.55 -4132 -2241 -4132V-4134Z" fill="black" fill-opacity="0.1"/>
 <g id="btn_close popup">
-<rect x="-19.5" y="-69.5" width="83" height="119" rx="4.5" stroke="#9747FF" stroke-dasharray="10 5"/>
 <g id="Property 1=Variant2">
 <g id="Rectangle 7347">
 <path d="M0 0H41C42.6569 0 44 1.34315 44 3V30H0V0Z" fill="url(#paint0_linear_25_48)"/>

packages/sw/src/assets/property-close.svg

@@ -1,10 +1,6 @@
 <svg width="44" height="30" viewBox="0 0 44 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="44" height="30" fill="#F5F5F5"/>
 <g id="2. &#237;&#151;&#164;&#235;&#141;&#148;">
-<path d="M-2243 -4081C-2243 -4082.1 -2242.1 -4083 -2241 -4083H3016C3017.1 -4083 3018 -4082.1 3018 -4081V8547C3018 8548.1 3017.1 8549 3016 8549H-2241C-2242.1 8549 -2243 8548.1 -2243 8547V-4081Z" fill="white"/>
-<path d="M-2241 -4082H3016V-4084H-2241V-4082ZM3017 -4081V8547H3019V-4081H3017ZM3016 8548H-2241V8550H3016V8548ZM-2242 8547V-4081H-2244V8547H-2242ZM-2241 8548C-2241.55 8548 -2242 8547.55 -2242 8547H-2244C-2244 8548.66 -2242.66 8550 -2241 8550V8548ZM3017 8547C3017 8547.55 3016.55 8548 3016 8548V8550C3017.66 8550 3019 8548.66 3019 8547H3017ZM3016 -4082C3016.55 -4082 3017 -4081.55 3017 -4081H3019C3019 -4082.66 3017.66 -4084 3016 -4084V-4082ZM-2241 -4084C-2242.66 -4084 -2244 -4082.66 -2244 -4081H-2242C-2242 -4081.55 -2241.55 -4082 -2241 -4082V-4084Z" fill="black" fill-opacity="0.1"/>
 <g id="btn_close popup">
-<rect x="-19.5" y="-19.5" width="83" height="119" rx="4.5" stroke="#9747FF" stroke-dasharray="10 5"/>
 <g id="Property 1=Default">
 <g id="Rectangle 7347">
 <path d="M41 0.5C42.3807 0.5 43.5 1.61929 43.5 3V29.5H0.5V0.5H41Z" fill="url(#paint0_linear_25_48)"/>

packages/sw/src/assets/property-range-thumb.svg

@@ -0,0 +1,11 @@
+<svg width="14" height="14" viewBox="3 3 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#paint0_angular_26_12081_clip_path)"><g transform="matrix(0 0.007 -0.007 0 10 10)"><foreignObject x="-1285.71" y="-1285.71" width="2571.43" height="2571.43"><div xmlns="http://www.w3.org/1999/xhtml" style="background:conic-gradient(from 90deg,rgba(81, 0, 0, 1) 0deg,rgba(81, 0, 0, 1) 12.8082deg,rgba(172, 29, 29, 1) 48.0519deg,rgba(121, 22, 22, 1) 92.222deg,rgba(255, 177, 177, 1) 127.031deg,rgba(228, 0, 0, 1) 157.271deg,rgba(255, 166, 166, 1) 206.171deg,rgba(190, 23, 23, 1) 252.461deg,rgba(81, 0, 0, 1) 292.192deg,rgba(81, 0, 0, 1) 327.01deg,rgba(81, 0, 0, 1) 360deg);height:100%;width:100%;opacity:1"></div></foreignObject></g></g><rect x="3" y="3" width="14" height="14" rx="7"/>
+<rect x="4" y="4" width="12" height="12" rx="6" stroke="url(#paint1_linear_26_12081)" stroke-opacity="0.4" stroke-width="2"/>
+<defs>
+<clipPath id="paint0_angular_26_12081_clip_path"><rect x="3" y="3" width="14" height="14" rx="7"/></clipPath><linearGradient id="paint1_linear_26_12081" x1="5.625" y1="4.3125" x2="10" y2="17" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF5656"/>
+<stop offset="0.681666" stop-color="#E40000"/>
+<stop offset="1" stop-color="#550000"/>
+</linearGradient>
+</defs>
+</svg>

packages/sw/src/assets/property-tool-active.svg

@@ -1,10 +1,6 @@
-<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="29" height="28" fill="#F5F5F5"/>
+<svg width="29" height="27.129" viewBox="0 0 29 27.129" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="2. &#237;&#151;&#164;&#235;&#141;&#148;">
-<path d="M-2585 -4174.26C-2585 -4175.36 -2584.1 -4176.26 -2583 -4176.26H2674C2675.1 -4176.26 2676 -4175.36 2676 -4174.26V8453.74C2676 8454.85 2675.1 8455.74 2674 8455.74H-2583C-2584.1 8455.74 -2585 8454.85 -2585 8453.74V-4174.26Z" fill="white"/>
-<path d="M-2583 -4175.26H2674V-4177.26H-2583V-4175.26ZM2675 -4174.26V8453.74H2677V-4174.26H2675ZM2674 8454.74H-2583V8456.74H2674V8454.74ZM-2584 8453.74V-4174.26H-2586V8453.74H-2584ZM-2583 8454.74C-2583.55 8454.74 -2584 8454.29 -2584 8453.74H-2586C-2586 8455.4 -2584.66 8456.74 -2583 8456.74V8454.74ZM2675 8453.74C2675 8454.29 2674.55 8454.74 2674 8454.74V8456.74C2675.66 8456.74 2677 8455.4 2677 8453.74H2675ZM2674 -4175.26C2674.55 -4175.26 2675 -4174.81 2675 -4174.26H2677C2677 -4175.91 2675.66 -4177.26 2674 -4177.26V-4175.26ZM-2583 -4177.26C-2584.66 -4177.26 -2586 -4175.92 -2586 -4174.26H-2584C-2584 -4174.81 -2583.55 -4175.26 -2583 -4175.26V-4177.26Z" fill="black" fill-opacity="0.1"/>
 <g id="Group 427322294">
-<rect x="-19.5" y="-113.758" width="68" height="160.387" rx="4.5" stroke="#9747FF" stroke-dasharray="10 5"/>
 <g id="Property 1=Variant3">
 <g id="Group 3815">
 <g id="Group 3789">

packages/sw/src/assets/property-tool-hover.svg

@@ -1,10 +1,6 @@
-<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="29" height="28" fill="#F5F5F5"/>
+<svg width="29" height="27.129" viewBox="0 0 29 27.129" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="2. &#237;&#151;&#164;&#235;&#141;&#148;">
-<path d="M-2585 -4127.13C-2585 -4128.24 -2584.1 -4129.13 -2583 -4129.13H2674C2675.1 -4129.13 2676 -4128.24 2676 -4127.13V8500.87C2676 8501.97 2675.1 8502.87 2674 8502.87H-2583C-2584.1 8502.87 -2585 8501.97 -2585 8500.87V-4127.13Z" fill="white"/>
-<path d="M-2583 -4128.13H2674V-4130.13H-2583V-4128.13ZM2675 -4127.13V8500.87H2677V-4127.13H2675ZM2674 8501.87H-2583V8503.87H2674V8501.87ZM-2584 8500.87V-4127.13H-2586V8500.87H-2584ZM-2583 8501.87C-2583.55 8501.87 -2584 8501.42 -2584 8500.87H-2586C-2586 8502.52 -2584.66 8503.87 -2583 8503.87V8501.87ZM2675 8500.87C2675 8501.42 2674.55 8501.87 2674 8501.87V8503.87C2675.66 8503.87 2677 8502.52 2677 8500.87H2675ZM2674 -4128.13C2674.55 -4128.13 2675 -4127.69 2675 -4127.13H2677C2677 -4128.79 2675.66 -4130.13 2674 -4130.13V-4128.13ZM-2583 -4130.13C-2584.66 -4130.13 -2586 -4128.79 -2586 -4127.13H-2584C-2584 -4127.69 -2583.55 -4128.13 -2583 -4128.13V-4130.13Z" fill="black" fill-opacity="0.1"/>
 <g id="Group 427322294">
-<rect x="-19.5" y="-66.6328" width="68" height="160.387" rx="4.5" stroke="#9747FF" stroke-dasharray="10 5"/>
 <g id="Property 1=Variant2">
 <g id="Group 3815">
 <g id="Group 3789">

packages/sw/src/assets/property-tool.svg

@@ -1,10 +1,6 @@
-<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="29" height="28" fill="#F5F5F5"/>
+<svg width="29" height="27.129" viewBox="0 0 29 27.129" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="2. &#237;&#151;&#164;&#235;&#141;&#148;">
-<path d="M-2585 -4080C-2585 -4081.1 -2584.1 -4082 -2583 -4082H2674C2675.1 -4082 2676 -4081.1 2676 -4080V8548C2676 8549.1 2675.1 8550 2674 8550H-2583C-2584.1 8550 -2585 8549.1 -2585 8548V-4080Z" fill="white"/>
-<path d="M-2583 -4081H2674V-4083H-2583V-4081ZM2675 -4080V8548H2677V-4080H2675ZM2674 8549H-2583V8551H2674V8549ZM-2584 8548V-4080H-2586V8548H-2584ZM-2583 8549C-2583.55 8549 -2584 8548.55 -2584 8548H-2586C-2586 8549.66 -2584.66 8551 -2583 8551V8549ZM2675 8548C2675 8548.55 2674.55 8549 2674 8549V8551C2675.66 8551 2677 8549.66 2677 8548H2675ZM2674 -4081C2674.55 -4081 2675 -4080.55 2675 -4080H2677C2677 -4081.66 2675.66 -4083 2674 -4083V-4081ZM-2583 -4083C-2584.66 -4083 -2586 -4081.66 -2586 -4080H-2584C-2584 -4080.55 -2583.55 -4081 -2583 -4081V-4083Z" fill="black" fill-opacity="0.1"/>
 <g id="Group 427322294">
-<rect x="-19.5" y="-19.5" width="68" height="160.387" rx="4.5" stroke="#9747FF" stroke-dasharray="10 5"/>
 <g id="Property 1=Default">
 <g id="Group 3815">
 <g id="Group 3789">

packages/sw/src/components/sw-header/SWHeader.tsx

@@ -454,7 +454,7 @@ export const SWHeader = forwardRef<HTMLElement, SWHeaderProps>(function SWHeader
           <SWHeaderWindowControls onWindowMoveStart={onWindowMoveStart} onMinimize={onMinimize} onClose={onClose} showWindowMove={shown("windowMove")} showMinimize={shown("minimize")} showClose={shown("close")} />
         </div>}
       </div>
-      {barOpen && barData && <div className="hm-sw-header__bar-anchor" style={{ left: barOffset, width: `calc(100% - ${barOffset}px)` }}><SWHeaderPropertyBar {...barData} disabled={disabled || propertyBar?.disabled} id={barId} /></div>}
+      {barOpen && barData && <div className="hm-sw-header__bar-anchor" style={{ left: barOffset, maxWidth: `calc(100% - ${barOffset}px)` }}><SWHeaderPropertyBar {...barData} disabled={disabled || propertyBar?.disabled} id={barId} /></div>}
       {panelOpen && propertyPanel && <SWHeaderPropertyPanel {...propertyPanel} id={panelId} anchorRef={panelAnchorRef} onClose={closePanel} />}
     </header>
   )

packages/sw/src/components/sw-header/components/SWHeaderPropertyPanel.tsx

@@ -143,6 +143,8 @@ function PropertyEditor({ property, onChange }: { property: SWHeaderProperty; on
     onChange?.(property, next)
   }
   const cancelDraft = () => setDraft(value)
+  const rangeMin = property.min ?? 0, rangeMax = property.max ?? 100, rangeValue = mixed ? rangeMin : Number(draft)
+  const rangeFill = rangeMax > rangeMin && Number.isFinite(rangeValue) ? Math.min(1, Math.max(0, (rangeValue - rangeMin) / (rangeMax - rangeMin))) : 0
   const nativeKeys = (event: React.KeyboardEvent<HTMLElement>) => {
     if (event.nativeEvent.isComposing) return
     if (event.key === "Enter") { event.preventDefault(); commit(draft) }
@@ -170,7 +172,7 @@ function PropertyEditor({ property, onChange }: { property: SWHeaderProperty; on
         {unit && type !== "slider" && <span className="hm-sw-property__unit">{unit}</span>}
         {type === "color" && <span className="hm-sw-property__swatch" aria-hidden="true"><i style={{ backgroundColor: property.swatch ?? parseSWHeaderColor(value)?.hex ?? "transparent" }} /></span>}
         {property.linePreview && <SWHeaderLinePreview pattern={property.linePattern} />}
-        {type === "slider" && <input type="range" aria-label={`${property.name} 슬라이더`} min={property.min ?? 0} max={property.max ?? 100} step={property.step ?? 1} value={mixed ? property.min ?? 0 : draft} disabled={!editable} onChange={event => setDraft(event.target.value)} onBlur={() => commit(draft)} onKeyDown={nativeKeys} />}
+        {type === "slider" && <input type="range" aria-label={`${property.name} 슬라이더`} min={property.min ?? 0} max={property.max ?? 100} step={property.step ?? 1} value={mixed ? rangeMin : draft} style={{ "--hm-sw-range-fill": rangeFill } as CSSProperties} disabled={!editable} onChange={event => setDraft(event.target.value)} onBlur={() => commit(draft)} onKeyDown={nativeKeys} />}
         {unit && type === "slider" && <span className="hm-sw-property__unit">{unit}</span>}
       </div>
     </div>

packages/sw/src/theme/sw.css

@@ -75,6 +75,14 @@
   --hm-sw-property-label: #000;
   --hm-sw-property-table: #d2c8b4;
   --hm-sw-property-inner-border: #948871;
+  /* Gauge (user-supplied Figma SVGs, 2026-10-19). Fill = Rectangle 6926: 6px pill, 1px black stroke,
+     vertical #8E0000 / #FF4242 37% / #E40000 76% / #1E0000 inside the stroke; its right end sits under
+     the thumb. Unfilled track = beige measured row by row from the user's reference image.
+     Thumb = Rectangle 6915: 14px conic + 2px 40% ring; its two drop shadows are CSS. */
+  --hm-sw-property-range-fill: linear-gradient(#000 0 1px, #8e0000 1px, #ff4242 2.46px, #e40000 3.99px, #1e0000 4.94px, #000 4.94px);
+  --hm-sw-property-range-fill-edge: #000;
+  --hm-sw-property-range-track: linear-gradient(#aea28b 0 1px, #c3b9a4 1px 2px, #c7bda9 2px 4px, #b7ac96 4px 5px, #ac9e84 5px);
+  --hm-sw-property-range-highlight: #eadec8;
 
   /* User-confirmed: document (file name) surface */
   --hm-sw-header-document-background: linear-gradient(180deg, #081813 0%, #09271e 8.69%, #0b3227 25.43%, #0e3d2f 51.25%, #0b3227 80.03%, #0a2b21 89.76%, #081813 100%);
@@ -168,13 +176,16 @@
   background: var(--hm-sw-header-background);
 }
 
-/* Figma 26:10492. Header stays 49px; host content can reserve the extra 28px when open. */
-.hm-sw-header__bar-anchor { position: absolute; top: 49px; z-index: 2; max-width: 1222px; }
+/* Figma 26:10492. Header stays 49px; host content can reserve the extra 28px when open.
+   The strip ends after its last field (user correction 2026-10-19, overrides the fixed 1222px frame):
+   it shrinks to its content, so no empty brown area, and is capped by the space right of its left
+   edge (inline max-width); longer property lists scroll inside. */
+.hm-sw-header__bar-anchor { position: absolute; top: 49px; z-index: 2; }
 .hm-sw-property-bar {
   --hm-sw-property-bar-background: #271f13;
   --hm-sw-property-bar-border: #08251c;
-  width: 100%;
-  max-width: 1222px;
+  width: max-content;
+  max-width: 100%;
   height: 28px;
   overflow-x: auto;
   overflow-y: hidden;
@@ -600,11 +611,13 @@
 
 /* Group-field hover (user request): all labels/values and the font sample inherit yellow.
    Swatches and layer-state graphics retain their data colors. Line borders and the dimension
-   SVG's black mask outline stay black; only the white foreground changes. Disabled is excluded. */
-.hm-sw-header__field:hover:not(:disabled) { color: var(--hm-sw-header-selected-color); }
-.hm-sw-header__field:hover:not(:disabled) .hm-sw-header__linetype > i { background: var(--hm-sw-header-selected-color); }
-.hm-sw-header__field:hover:not(:disabled) .hm-sw-header__dimension-icon-default { visibility: hidden; }
-.hm-sw-header__field:hover:not(:disabled) .hm-sw-header__dimension-icon-hover { visibility: visible; }
+   SVG's black mask outline stay black; only the white foreground changes. Disabled is excluded.
+   While a field's own dropdown is open (data-expanded) hover adds nothing: the expanded styling
+   stays as is and hover returns once the list closes. Focus-visible is unaffected. */
+.hm-sw-header__field:hover:not(:disabled, [data-expanded="true"]) { color: var(--hm-sw-header-selected-color); }
+.hm-sw-header__field:hover:not(:disabled, [data-expanded="true"]) .hm-sw-header__linetype > i { background: var(--hm-sw-header-selected-color); }
+.hm-sw-header__field:hover:not(:disabled, [data-expanded="true"]) .hm-sw-header__dimension-icon-default { visibility: hidden; }
+.hm-sw-header__field:hover:not(:disabled, [data-expanded="true"]) .hm-sw-header__dimension-icon-hover { visibility: visible; }
 
 /* Hover — Figma header/btn_home "hover": the 1px border turns into a yellow vertical gradient.
    Same treatment on every bordered SW Header button except the file name and 속성Bar / 속성창
@@ -635,7 +648,7 @@
 /* Popup guide: the 1px outline is inside its SVG (rect rx 1.5 + 0.5 stroke), so the ring overlays it. */
 .hm-sw-header__action--guide { border-radius: 2px; }
 .hm-sw-header__action--guide::after { inset: 0; }
-:is(.hm-sw-header__field, .hm-sw-header__more-trigger, .hm-sw-header__action):hover:not(:disabled)::after { opacity: 1; }
+:is(.hm-sw-header__field, .hm-sw-header__more-trigger, .hm-sw-header__action):hover:not(:disabled, [data-expanded="true"])::after { opacity: 1; }
 
 /* Selected: text and mono icons turn yellow; no selected background, border or shadow. */
 :is(.hm-sw-header, .hm-sw-theme) [data-selected="true"] { color: var(--hm-sw-header-selected-color); }
@@ -1483,7 +1496,7 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
 .hm-sw-property__title { position: relative; z-index: 2; flex: 1; min-width: 0; margin-left: 7px; padding-right: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; letter-spacing: .04em; color: var(--hm-sw-header-selected-color); text-shadow: var(--hm-sw-header-label-outline); }
 .hm-sw-property__tool { position: absolute; z-index: 2; right: 43px; top: 1px; width: 29px; height: 27.13px; }
 .hm-sw-property:not([data-selection-kind="single"]) .hm-sw-property__title { margin-right: 29px; }
-.hm-sw-property__tool > img { position: absolute; top: 0; left: 0; display: block; width: 29px; height: 28px; }
+.hm-sw-property__tool > img { position: absolute; top: 0; left: 0; display: block; width: 29px; height: 27.13px; }
 .hm-sw-property__tool-hover { visibility: hidden; }
 .hm-sw-property__tool:hover > .hm-sw-property__tool-default { visibility: hidden; }
 .hm-sw-property__tool:hover > .hm-sw-property__tool-hover { visibility: visible; }
@@ -1510,8 +1523,24 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
 .hm-sw-property__swatch { display: block; flex: 0 0 70px; height: 16px; padding: 1px; border: 1px solid #000; border-radius: 2px; }
 .hm-sw-property__swatch > i { display: block; height: 12px; border: 1px solid #fff; }
 .hm-sw-property__value > input[type="range"] { appearance: none; flex: 0 0 86px; width: 86px; height: 16px; margin: 0; background: transparent; cursor: pointer; }
-.hm-sw-property__value > input[type="range"]::-webkit-slider-runnable-track { height: 3px; border: 1px solid rgba(28,26,22,.4); border-radius: 8px; background: linear-gradient(#8e0000, #ff4242 37%, #e40000 76%, #1e0000); }
-.hm-sw-property__value > input[type="range"]::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; margin-top: -6px; border: 2px solid #ff5656; border-radius: 12px; background: conic-gradient(#520000, #ffb1b1 35%, #e40000 44%, #ffa7a7 57%, #520000 81%); box-shadow: 0 2px 2px rgba(28,26,22,.4), 0 0 3px #1c1a16; }
+/* --hm-sw-range-fill (0-1) is set from the value; the red ends under the thumb centre (14px thumb).
+   The 3px radius rounds the fill's left cap; the first layer is its left stroke. Track and thumb are
+   shared values, painted once per engine: WebKit/Blink track + thumb, Gecko track + thumb (Gecko's
+   ::-moz-range-progress is kept empty so the fill is never painted twice). */
+.hm-sw-property__value > input[type="range"] {
+  --hm-sw-range-fill-width: calc(7px + (100% - 14px) * var(--hm-sw-range-fill, 0));
+  --hm-sw-range-track-paint:
+    linear-gradient(90deg, var(--hm-sw-property-range-fill-edge) 0 1px, transparent 1px) 0 0 / var(--hm-sw-range-fill-width) 100% no-repeat,
+    var(--hm-sw-property-range-fill) 0 0 / var(--hm-sw-range-fill-width) 100% no-repeat,
+    var(--hm-sw-property-range-track);
+  --hm-sw-range-thumb-paint: url("../assets/property-range-thumb.svg") center / 14px 14px no-repeat;
+  --hm-sw-range-thumb-shadow: 0 0 3px #1c1a16, 0 2px 2px rgba(28, 26, 22, .4);
+}
+.hm-sw-property__value > input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--hm-sw-range-track-paint); box-shadow: 0 1px 0 var(--hm-sw-property-range-highlight); }
+.hm-sw-property__value > input[type="range"]::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--hm-sw-range-thumb-paint); box-shadow: var(--hm-sw-range-thumb-shadow); }
+.hm-sw-property__value > input[type="range"]::-moz-range-track { box-sizing: border-box; height: 6px; border: 0; border-radius: 3px; background: var(--hm-sw-range-track-paint); box-shadow: 0 1px 0 var(--hm-sw-property-range-highlight); }
+.hm-sw-property__value > input[type="range"]::-moz-range-progress { height: 0; background: transparent; }
+.hm-sw-property__value > input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--hm-sw-range-thumb-paint); box-shadow: var(--hm-sw-range-thumb-shadow); }
 .hm-sw-property__value > .hm-sw-header__line-preview { flex-basis: 68px; width: 68px; }
 .hm-sw-property__expand { display: block; width: 100%; height: 12px; overflow: hidden; }
 .hm-sw-property__expand > img { display: block; width: 296px; height: 12px; margin-left: calc((100% - 296px) / 2); }