:root{--bg-color: rgb(205, 209, 211);--font-color: rgb(86, 88, 89)}@font-face{font-family:monto-color;src:url(./MaShanZheng-Regular.min-7fa757a1.ttf)}body{margin:0;padding:0;font-size:14px;background-color:var(--bg-color);color:var(--font-color);text-shadow:0px 0px 1px hsl(from var(--font-color) calc(h + 180) s l);will-change:background;transition:background 1s;font-family:monto-color}p{margin:0;padding:0}select,input{position:relative;height:30px;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding:4px 10px;font-size:12px;border:1px solid #ccc;border-radius:5px;background-color:#fff;box-shadow:0 0 10px #ffffff80;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:.5;animation:blurAnimation 5s infinite alternate;width:120px;outline:none;cursor:pointer}button{height:40px;appearance:none;-webkit-appearance:none;-moz-appearance:none;outline:none;padding:4px 10px;font-size:12px;border:1px solid #ccc;border-radius:5px;background-color:#fff}select:hover{border-color:#888}select:after{content:"▼";position:absolute;top:50%;right:10px;transform:translateY(-50%);pointer-events:none}select::-ms-expand{display:none}select option{background-color:#ffdc151a}select option:hover{background-color:#f1f1f1}.mr-4{margin-right:4px}@keyframes blurAnimation{0%{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:.5}to{-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);opacity:.8}}@-moz-document url-prefix(){select{padding-right:30px}}@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){select{padding-right:30px}}.convert-panel[data-v-6cc95822]{padding:36px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:.8;box-shadow:0 0 10px #ffffffd2;font-family:Times New Roman,Times,serif}.short-input[data-v-6cc95822]{width:50px}.button[data-v-6cc95822]{display:block;margin:12px 0}.color-cell[data-v-c2043967]{flex-shrink:0;width:160px;height:54px;display:flex;align-items:flex-start;flex-direction:column;font-weight:900;border-radius:1px;justify-items:center;background-color:#ffffff4d;color:inherit;position:relative;cursor:pointer;will-change:background,opacity;transition:background 1s,opacity 1s;padding:8px .8rem}.color-cell[data-v-c2043967]:hover{opacity:.6}.color-name[data-v-c2043967]{margin-bottom:8px}.color-hex[data-v-c2043967]{margin-top:4px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-weight:400;font-size:12px}.color-bar[data-v-c2043967]{position:relative;display:block;background-color:#fff6;min-height:1px;width:80%;margin:2px 0}.color-bar[data-v-c2043967]:before{content:"";position:absolute;width:calc(var(--color) / 256 * 100%);height:1px;top:0;left:0}.color-bar.red[data-v-c2043967]:before{background-color:#ff9696}.color-bar.green[data-v-c2043967]:before{background-color:#4ed126}.color-bar.blue[data-v-c2043967]:before{background-color:#8693f3}@media screen and (max-width: 600px){.color-cell[data-v-c2043967]{width:110px}}.flex-layout[data-v-9494f55c]{display:flex;justify-content:space-between}.left[data-v-9494f55c]{min-width:500px;max-width:500px;margin-right:50px;font-weight:800}.right[data-v-9494f55c]{flex:1}.main-title[data-v-9494f55c]{font-size:48px;font-weight:bolder}.main-subtitle[data-v-9494f55c]{font-size:24px;padding:12px;font-weight:bolder}.description[data-v-9494f55c]{font-family:Times New Roman,Times,serif}.sub-title[data-v-9494f55c]{display:flex;align-items:center;font-size:24px}.color-panel[data-v-9494f55c]{display:flex;flex-wrap:wrap}.color-item[data-v-9494f55c]{margin-right:.8rem;margin-bottom:1rem}select[data-v-9494f55c]{margin-left:12px}@media screen and (min-width: 1000px){.flex-layout[data-v-9494f55c]{padding:100px 50px}}@media screen and (max-width: 1000px){.flex-layout[data-v-9494f55c]{padding:20px;flex-direction:column}.color-convert[data-v-9494f55c]{display:none}}@media screen and (max-width: 600px){.left[data-v-9494f55c]{min-width:unset;max-width:unset}}