:root{font-family:Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#213547;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--cream: #FFFDF5;--teal: #65B9CA;--pink: #DA87B2;--red: #c23b4d}body{display:flex;flex-direction:column;place-items:center;min-width:320px;min-height:100vh;margin:0;padding-bottom:20px;background-color:var(--cream)}h1{font-size:65px;line-height:1.1}h2{font-size:35px;line-height:1.1}.description:before,.description:after,.description-inner:after{position:absolute;left:calc(50% - var(--circle-size)/2);content:"";display:block;width:var(--circle-size);height:var(--circle-size);border-width:7px;border-style:solid;border-radius:50%;mix-blend-mode:multiply}.description{--circle-size: 302px;position:relative;display:flex;flex-direction:column;justify-content:center;max-width:550px;margin:0 2em;padding:calc(var(--circle-size) * .79) 0 40px}.description h1,.description h2,.description p{text-align:center}.description:after{top:calc(var(--circle-size) / 1.5);border-color:#c23b4d}.description:before{top:calc(var(--circle-size) / 2.6);border-color:#da87b2}.description h1{margin:0}.description h2{margin-top:calc(var(--circle-size) * .88);margin-bottom:calc(var(--circle-size) * .11)}.description-inner:after{top:calc(var(--circle-size) / 11);border-color:#65b9ca}.features{max-width:550px;padding:0 2em}.features ul{padding-left:1em}.features li{margin:.5em 0}.self{color:var(--red)}.and{color:var(--pink)}.others{color:var(--teal)}pre{box-sizing:border-box;max-width:90%;background-color:#fff8dc!important;border-radius:10px;border:3px solid #eecc64;white-space:pre-wrap;box-shadow:inset 0 0 10px #cfb35f5c}pre[class*=language-]{padding:.3em}footer{margin-top:30px}footer img{display:block;opacity:.2;width:27px}footer img:hover{opacity:.3}aside{position:absolute;left:20px;top:15px}aside ul,aside li{margin:0;padding:0;list-style:none;line-height:0}aside a{display:inline-block;opacity:.5}aside .github{width:30px;height:30px;background:url(/range-manger/assets/github-6b9fa673.svg) center top / cover no-repeat;font-size:0}@media screen and (max-width: 700px){.description{--circle-size: 30vh}.description h1{font-size:calc(var(--circle-size) * .21)}}#root{max-width:1280px;min-width:85vw;margin:0 auto;text-align:center}#root .shifts,#root .data-panel{background-color:var(--cream)}.range-manger{width:100%}.range-manger input[type=color]{background-color:transparent}.range-manger .shifts{position:relative;display:flex;height:100px;margin:0 auto}.disable-touch-drag :is(.range-manger .shifts){touch-action:none}.range-manger .ui{-webkit-user-select:none;user-select:none}.range-manger .range{--base-bg-color: 172, 220, 255;--base-bg-hsl: 0, 0, 0;display:flex;box-sizing:border-box;width:100px;height:100%;position:absolute;z-index:2;top:0;border:1px solid currentcolor;cursor:grab}.range-manger .range .body{flex:1}.range-manger .range button{position:relative}.range-manger .range .label{position:absolute}.range-manger .range .active-label{display:none;position:absolute;z-index:3;left:-50px;top:40%}.range-manger .range .active-label.size{left:44%;top:70%}.range-manger .range .active-label.right{left:auto;right:-50px}.range-manger .range.active{z-index:3}.range-manger .range.active .active-label{display:block}.range-manger .range .resize-handle{position:relative;z-index:2;width:20px;height:100%;cursor:col-resize}.range-manger .gradiation{position:absolute;z-index:1;height:100%}.range-manger .gradiation span{position:absolute;top:-1.5em;left:-.5em;min-width:4.5em}.range-manger .gradiation:after{content:"";position:absolute;left:0;height:100%;width:1px;background-color:currentcolor}.range-manger .thumb{display:inline-block;width:50px;height:30px;padding:.2em;cursor:grab}.disable-touch-drag :is(.range-manger .thumb){touch-action:none}.range-manger .data-panels{position:relative;display:flex}.range-manger .data-panels .data-panel{position:absolute;display:grid;grid-template-columns:1fr 2fr;grid-template-areas:"legend data";grid-auto-rows:auto;flex:1;visibility:hidden}.range-manger .data-panels .data-panel.active{position:absolute;visibility:visible}.range-manger .data-panels .data-panel .fieldset{display:grid;grid-template-columns:subgrid;grid-column:1/-1}.range-manger .data-panels .data-panel .no-label input,.range-manger .data-panels .data-panel button{grid-column:1/-1}.range-manger .data-panels .data-panel button.close{position:absolute;top:2px;right:2px;grid-column:unset}.range-manger.theme{--ui-border: #C0C0C0;--ui-bg: #FAFAFA;font-size:16px}.range-manger.theme input[type=color]{padding:.2em;border:1px solid var(--ui-border);border-radius:.5em;font-size:.81em}.range-manger.theme button{padding:.4em;border-radius:.5em;border:1px solid currentColor;color:#2f4f4f;cursor:pointer}.range-manger.theme fieldset label{font-size:.88em}.range-manger.theme .shifts{border:1px solid var(--ui-border);background-color:var(--ui-bg)}.range-manger.theme .range{border-color:rgba(var(--base-bg-color),.85);background-color:rgba(var(--base-bg-color),.46)}.range-manger.theme .range button{--size: 60px;top:calc(50% - var(--size)/4);width:calc(var(--size)/2);height:calc(var(--size)/2);border-radius:50%;font-size:0;background-color:rgba(var(--base-bg-color),.55);border:none}.range-manger.theme .range button:after{content:"III";display:inline-block;font-size:1rem;font-family:Helvetica,Verdana;color:#fff;transform:rotate(.25turn)}.range-manger.theme .range button:active,.range-manger.theme .range button:focus{border:none;outline:none}.range-manger.theme .range button:active{background-color:rgb(var(--base-bg-color))}@media (hover: hover){.range-manger.theme .range button{visibility:hidden}.range-manger.theme .range:hover button{visibility:visible}}.range-manger.theme .range .label{left:3px;font-size:.69em;color:hsl(var(--base-bg-hsl))}.range-manger.theme .range .active-label{padding:2px 5px;font-size:.7em;background-color:#4a4a4a;color:#fff}.range-manger.theme .range.active{background-color:rgba(var(--base-bg-color),.7)}.range-manger.theme .range .resize-handle:after{position:absolute;z-index:1;top:calc(50% - 8px);left:3px;content:"";display:block;width:2px;height:16px;border-radius:4px;background-color:rgba(var(--base-bg-color),1)}.range-manger.theme .range .resize-handle.last:after{left:auto;right:3px}.range-manger.theme .gradiation{color:#d3d3d3;font-size:.69em}.range-manger.theme .gradiation:after{background-color:#e2e2e2}.range-manger.theme .thumb{font-size:0}.range-manger.theme .thumb:after{content:"";display:inline-block;margin-top:13px;width:30px;height:5px;border-radius:4px;background-color:var(--ui-border)}.range-manger.theme .data-panels .data-panel{padding:13px;text-align:left;border-radius:10px;background-color:var(--ui-bg);border:1px solid #d8d8d8;filter:drop-shadow(0 0 4px rgba(0,0,0,.2));will-change:filter}.range-manger.theme .data-panels .data-panel:after{content:"";position:absolute;top:-15px;left:calc(50% - 10px);width:0;height:0;border-style:solid;border-width:0 10px 15px;border-color:transparent transparent white}.range-manger.theme .data-panels .data-panel h4{margin-bottom:.3em}.range-manger.theme .data-panels .data-panel input{max-width:8em}.range-manger.theme .data-panels .data-panel label{font-size:.9em}.range-manger.theme .data-panels .data-panel .fieldset{margin:0 0 5px;padding:0;border:none}.range-manger.theme .data-panels .data-panel button.close{border:none;background-color:transparent;font-weight:700;padding:.1em .4em}.range-manger.theme .data-panels .data-panel button.rm{width:100%;color:#9b2222}
