:root{--color-label: #ffffff;--color-label-gray: #ededed;--color-label-darker: #ccc;--color-label-disable: #7c7c7c;--color-disable: #919191;--color-keycap: #353535;--color-pop: #242424;--color-side: #1e1e1e;--color-bg: #121212;--color-side-gray: #1c1d1f;--color-danger: #cc0000;--color-success: #00a000;--color-orange: #ff8000;--color-primary: #4f81ff;--color-grad-primary-white: #abc3ff;--color-grad-primary-blue: #85a7ff;--color-primary-blue-grad: linear-gradient( 270deg, var(--color-primary) 0%, var(--color-grad-primary-blue) 100% );--color-secondary: #00d8d0;--trans-key: none;--fade-function: cubic-bezier(.23, 1, .32, 1);--anim-fade-in: fade-in .3s var(--fade-function) forwards;--anim-fade-out: fade-out .3s var(--fade-function) forwards;--anim-fade-in-down: fade-in-down .3s var(--fade-function) forwards;--anim-fade-out-up: fade-out-up .3s var(--fade-function) forwards;--anim-fade-in-zoom: fade-in-zoom .3s var(--fade-function) forwards;--anim-fade-out-zoom: fade-out-zoom .3s var(--fade-function) forwards}html{--color-keyboard-bg: var(--color-pop);--color-keycap-face: var(--color-keycap);--color-keycap-a-face: var(--color-keycap-face);--color-keycap-h-face: var(--color-keycap-face);--color-keycap-side: var(--color-disable);--color-keycap-a-side: var(--color-primary);--color-keycap-h-side: var(--color-primary);--color-menu-icon-a-bg: none;--color-pane-bg: #1c1d1f;--color-select-bg: #1c1d1f;--color-button-hover-bg: var(--color-keycap)}@keyframes home-keyboard{0%{background:var(--color-disable)}39%{background:var(--color-disable)}40%{background:var(--color-label)}60%{background:var(--color-label)}61%{background:var(--color-disable)}to{background:var(--color-disable)}}@keyframes home-cable{0%{transform:translateY(-40px)}26%{transform:translateY(-40px)}80%{transform:translateY(-5px)}to{transform:translateY(-5px)}}@keyframes rotate{0%{rotate:0deg}to{rotate:360deg}}@keyframes hueRotate{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:scaleY(.8)}70%{opacity:1}to{opacity:1;transform:scaleY(1)}}@keyframes fade-out-up{0%{opacity:1;transform:scaleY(1)}70%{opacity:0}to{opacity:0;transform:scaleY(.8)}}@keyframes fade-in-zoom{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes fade-out-zoom{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}@font-face{font-family:FiraCode-Medium;src:url(/fonts/FiraCode-Medium.ttf) format("opentype")}html,body{height:100%}body{position:relative;color:#fff;overflow:hidden;margin:0;padding:0;-webkit-user-select:none;user-select:none;color:var(--color-label)}body,body *{font-family:Noto Sans SC,Noto Sans KR,Noto Sans JP,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;font-weight:700}button{font-weight:700}li{list-style:none}svg{display:block}*:focus{outline:none}#root{background:var(--color-bg);height:100%;width:100%;display:flex;position:relative}.custom-scrollbar::-webkit-scrollbar{width:5px;height:5px}.custom-scrollbar::-webkit-scrollbar-track{width:5px;height:5px;border-radius:5px;-webkit-box-shadow:none}.custom-scrollbar::-webkit-scrollbar-thumb{cursor:pointer;border-radius:5px;background:var(--color-disable)}.custom-scrollbar::-webkit-scrollbar-corner{background:transparent}img{pointer-events:none}.spin{transform-origin:center;animation:spin 1s infinite linear;will-change:transform}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}