.shade-section { padding:44px 0; }
.shade-section > .wrap { max-width:900px; }
#select-tint-shades-v4 { width:100%; padding:0; font-family:inherit; }
    #select-tint-shades-v4 * { box-sizing:border-box; }
    #select-tint-shades-v4 .rr-component { color:var(--ink); background:#eef1f5; border-radius:20px; overflow:hidden; color-scheme:light; }
    #select-tint-shades-v4 .rr-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 26px 10px; }
    #select-tint-shades-v4 .rr-eyebrow { display:block; color:#48718f; font-size:12px; line-height:1.4; letter-spacing:.15em; font-weight:600; margin-bottom:9px; }
    #select-tint-shades-v4 .rr-title { margin:0; color:var(--ink); font-size:clamp(1.5rem,2.8vw,2.25rem); line-height:1.16; letter-spacing:-.04em; font-weight:500; }
    #select-tint-shades-v4 .rr-current { text-align:right; flex-shrink:0; }
    #select-tint-shades-v4 .rr-number { color:var(--ink); font-size:38px; line-height:1; letter-spacing:-.055em; font-weight:500; font-variant-numeric:tabular-nums; }
    #select-tint-shades-v4 .rr-number small { font-size:22px; font-weight:400; padding-left:2px; }
    #select-tint-shades-v4 .rr-vlt { display:block; margin-top:6px; color:#647280; font-size:12px; letter-spacing:.12em; }
    #select-tint-shades-v4 .rr-surface { position:relative; isolation:isolate; --divider:50%; }
    #select-tint-shades-v4 .rr-photo { fill:initial; stroke:none; display:block; width:100%; height:auto; aspect-ratio:1774/700; }
    #select-tint-shades-v4 .rr-divider { position:absolute; z-index:3; top:0; bottom:0; left:var(--divider); width:2px; transform:translateX(-50%); background:white; box-shadow:0 0 0 .5px rgba(18,34,48,.4),0 0 12px rgba(0,0,0,.12); pointer-events:none; }
    #select-tint-shades-v4 .rr-handle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(20,35,50,.1); border-radius:50%; background:#fff; box-shadow:0 3px 14px rgba(0,0,0,.14); color:#183449; font-size:23px; line-height:1; font-weight:400; }
    #select-tint-shades-v4 .rr-side-label { position:absolute; top:18px; z-index:2; color:#445563; font-size:12px; line-height:1; letter-spacing:.04em; font-weight:400; pointer-events:none; }
    #select-tint-shades-v4 .rr-side-left { left:6%; }
    #select-tint-shades-v4 .rr-side-right { right:6%; }
    #select-tint-shades-v4 .rr-compare-range { position:absolute; z-index:4; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:grab; touch-action:pan-y; }
    #select-tint-shades-v4 .rr-surface.is-dragging .rr-compare-range { cursor:grabbing; }
    #select-tint-shades-v4 .rr-surface:has(.rr-compare-range:focus-visible) { outline:2px solid var(--blue); outline-offset:-3px; }
    #select-tint-shades-v4 .rr-control { margin:4px 8% 0; position:relative; }
    #select-tint-shades-v4 .rr-film-range { display:block; position:relative; z-index:2; width:100%; height:44px; margin:0; padding:0; background:transparent; appearance:none; -webkit-appearance:none; cursor:default; }
    #select-tint-shades-v4 .rr-film-range::-webkit-slider-runnable-track { height:2px; background:#c5cdd5; }
    #select-tint-shades-v4 .rr-film-range::-moz-range-track { height:2px; background:#c5cdd5; }
    #select-tint-shades-v4 .rr-film-range::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:14px; height:14px; border:3px solid #eef1f5; border-radius:50%; background:var(--blue); margin-top:-6px; box-shadow:0 0 0 1px var(--blue); cursor:grab; }
    #select-tint-shades-v4 .rr-film-range::-moz-range-thumb { width:8px; height:8px; border:3px solid #eef1f5; border-radius:50%; background:var(--blue); box-shadow:0 0 0 1px var(--blue); cursor:grab; }
    #select-tint-shades-v4 .rr-control.is-dragging .rr-film-range,
    #select-tint-shades-v4 .rr-control.is-dragging .rr-film-range::-webkit-slider-thumb { cursor:grabbing; }
    #select-tint-shades-v4 .rr-control.is-dragging .rr-film-range::-moz-range-thumb { cursor:grabbing; }
    #select-tint-shades-v4 .rr-ticks { position:absolute; top:19px; left:7px; right:7px; height:6px; pointer-events:none; }
    #select-tint-shades-v4 .rr-ticks span { position:absolute; top:0; width:6px; height:6px; transform:translateX(-50%); border-radius:50%; background:#8d9aa6; }
    #select-tint-shades-v4 .rr-ticks span.is-covered { opacity:0; }
    #select-tint-shades-v4 .rr-scale { position:relative; height:21px; margin-inline:7px; color:#72808c; font-size:14px; line-height:1.4; font-weight:400; font-variant-numeric:tabular-nums; }
    #select-tint-shades-v4 .rr-stop { position:absolute; top:1px; min-width:14px; transform:translateX(-50%); text-align:center; pointer-events:none; user-select:none; }
    #select-tint-shades-v4 .rr-ticks span:nth-child(1), #select-tint-shades-v4 .rr-stop:nth-child(1) { left:0; }
    #select-tint-shades-v4 .rr-ticks span:nth-child(2), #select-tint-shades-v4 .rr-stop:nth-child(2) { left:25%; }
    #select-tint-shades-v4 .rr-ticks span:nth-child(3), #select-tint-shades-v4 .rr-stop:nth-child(3) { left:50%; }
    #select-tint-shades-v4 .rr-ticks span:nth-child(4), #select-tint-shades-v4 .rr-stop:nth-child(4) { left:75%; }
    #select-tint-shades-v4 .rr-ticks span:nth-child(5), #select-tint-shades-v4 .rr-stop:nth-child(5) { left:100%; }
    #select-tint-shades-v4 .rr-stop.is-active { color:var(--ink); font-weight:600; }
    #select-tint-shades-v4 .rr-help { text-align:center; padding:12px 20px 18px; font-size:14px; line-height:1.4; color:#687786; }
    #select-tint-shades-v4 .rr-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
    @media(max-width:520px) {
      #select-tint-shades-v4 { padding:0; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
      #select-tint-shades-v4 .rr-component { border-radius:14px; }
      #select-tint-shades-v4 .rr-header { padding:16px 16px 12px; gap:12px; text-align:left; }
      #select-tint-shades-v4 .rr-header > div:first-child { flex:1; min-width:0; }
      #select-tint-shades-v4 .rr-eyebrow { font-size:10px; line-height:1.4; letter-spacing:.1em; margin-bottom:6px; }
      #select-tint-shades-v4 .rr-title { font-size:clamp(20px,5.3vw,24px); line-height:1.2; letter-spacing:-.035em; max-width:none; text-wrap:balance; }
      #select-tint-shades-v4 .rr-current { width:60px; }
      #select-tint-shades-v4 .rr-number { font-size:32px; }
      #select-tint-shades-v4 .rr-number small { font-size:18px; }
      #select-tint-shades-v4 .rr-vlt { font-size:10px; line-height:1.3; letter-spacing:.06em; margin-top:4px; }
      #select-tint-shades-v4 .rr-surface { padding-top:28px; }
      #select-tint-shades-v4 .rr-divider { top:28px; }
      #select-tint-shades-v4 .rr-compare-range { top:28px; height:calc(100% - 28px); }
      #select-tint-shades-v4 .rr-handle { width:32px; height:32px; font-size:21px; }
      #select-tint-shades-v4 .rr-side-label { top:4px; font-size:12px; line-height:1.3; letter-spacing:0; }
      #select-tint-shades-v4 .rr-side-left { left:16px; }
      #select-tint-shades-v4 .rr-side-right { right:16px; }
      #select-tint-shades-v4 .rr-control { margin-top:6px; }
      #select-tint-shades-v4 .rr-scale { font-size:14px; }
      #select-tint-shades-v4 .rr-help { font-size:13px; line-height:1.4; padding:10px 16px 16px; }
    }
@media(max-width:800px) { .shade-section { padding:32px 0; } }