*,*:before,*:after{box-sizing:border-box;margin:0;font-weight:400;padding:0}ul{list-style:none}a{text-decoration:none}html{font-size:10px}@media (min-width: 768px){html{font-size:10px}}@media (min-width: 1024px){html{font-size:10px}}body{min-height:100vh;transition:color .5s,background-color .5s;line-height:1.6;font-family:Comic Sans MS,Inter,cursive,sans-serif;font-size:1.5rem;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{margin:0 auto;padding:0;font-weight:400}main{width:100%;margin:0 auto;height:100vh;border:1px solid #fff;display:flex;justify-content:center;align-items:center;background-color:#f4f4f4}.icon path[data-v-f2bdc407]{fill:#ff3b30;font-weight:700}.icon:hover path[data-v-f2bdc407]{fill:tomato}.icon path[data-v-3b12c15e]{fill:#20bc69}main[data-v-15880f6b]{display:flex;flex-direction:row;width:100%;height:100vh;margin:0;background:linear-gradient(135deg,#c9ffbf,#ffafbd);overflow:hidden;padding:0}main>header[data-v-15880f6b]{position:fixed;float:left;top:50%;left:0;transform:translateY(-50%);height:auto;padding:0}header>nav[data-v-15880f6b]{background-color:#79afe8a5;margin:0 5px;border-radius:10px;align-items:center;width:4.8rem;display:flex;flex-direction:column;height:auto;opacity:.9}nav[data-v-15880f6b]{position:relative}nav ul[data-v-15880f6b]{list-style-type:none;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.2rem;padding:0;margin:1rem auto}nav ul li[data-v-15880f6b]{width:4rem;height:4rem;display:flex;justify-content:center;align-items:center;padding:.2rem;margin-bottom:.5rem;position:relative;transition:transform .3s ease}.keyup-logo[data-v-15880f6b]{width:5rem;height:5rem;margin:0 auto 10px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#6e5aff,#5a4bff,#3b2bd1);background:radial-gradient(circle at 30% 30%,#9f95ea,#6c60eb,#5f50e3);box-shadow:0 0 10px #5a4bff80,0 0 20px #5a4bff4d,inset -8px -8px 12px #6792eeb3,inset 4px 4px 8px #5a4bff33;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .3s ease,box-shadow .3s ease;cursor:pointer;position:relative;overflow:hidden}.keyup-logo[data-v-15880f6b]:before{content:"";position:absolute;width:120%;height:120%;background:radial-gradient(circle,rgba(255,255,255,.15) 0%,transparent 70%);border-radius:50%;animation:pulse-15880f6b 2.5s infinite ease-in-out;z-index:0}@keyframes pulse-15880f6b{0%,to{transform:scale(1);opacity:.7}50%{transform:scale(1.1);opacity:.3}}.keyup-logo[data-v-15880f6b]:hover{animation:spinBounce-15880f6b .9s ease-in-out 1;transform:scale(1.08);box-shadow:0 0 14px #fff6,0 0 26px #5a4bff66,inset -4px -4px 6px #fff6,inset 6px 6px 10px #5a4bff40}@keyframes spinBounce-15880f6b{0%{transform:rotate(0) scale(1)}40%{transform:rotate(160deg) scale(1.1)}70%{transform:rotate(300deg) scale(.98)}to{transform:rotate(360deg) scale(1.05)}}.logo-text[data-v-15880f6b]{color:#fff;font-weight:800;font-size:1rem;text-align:center;font-family:"Baloo 2",cursive;position:relative;z-index:1;text-shadow:0 1px 2px rgba(0,0,0,.4);transition:transform .3s ease}.logo-icon svg[data-v-15880f6b]{color:#fff;width:1.2rem;height:1.2rem;font-weight:800;position:relative;z-index:1}.logo-main[data-v-15880f6b]{font-weight:700;color:#5a4bff}nav ul li svg[data-v-15880f6b]{width:3.5rem;height:3.5rem;background-color:#fff;border-radius:5px;box-shadow:0 4px 6px #e6cccc33}nav ul li svg[data-v-15880f6b]:hover{transform:scale(1) rotate(45deg);box-shadow:0 2px 3px #0003}nav ul li div[data-v-15880f6b]{min-width:10rem;background-color:#f1eae2;position:absolute;left:4.8rem;border-radius:.5rem;padding:.2rem .5rem;line-height:3rem;text-align:center;font-size:1.4rem;opacity:8;display:none;color:#000;z-index:9999}nav ul li:hover>div[data-v-15880f6b]{display:block}section[data-v-15880f6b]{flex:1;overflow-y:auto;height:100vh;padding:1rem;margin-left:6rem}.keyup[data-v-15880f6b]{display:flex;position:fixed;top:0;left:0;justify-content:space-between;align-items:center;padding:1rem 2rem;width:15rem}.logo[data-v-15880f6b]{display:flex;align-items:center;font-family:"Baloo 2",cursive;font-size:2rem;font-weight:600;color:#5a4bff;transition:transform .3s ease;cursor:pointer}.logo[data-v-15880f6b]:link{text-decoration:none}.logo[data-v-15880f6b]:hover{transform:scale(1.05)}.logo-icon[data-v-15880f6b]{display:flex;align-items:center;justify-content:center;height:1.2em;width:1.3em;margin-right:2px;color:#5a4bff;transition:transform .3s ease}.logo-icon svg[data-v-15880f6b]{display:block;height:100%;width:100%}.logo:hover .logo-icon[data-v-15880f6b]{transform:rotate(-5deg) scale(1.1)}.logo-main[data-v-15880f6b]{color:#5a4bff;font-weight:700}.logo-sub[data-v-15880f6b]{color:#fd703c;margin-left:2px;font-size:2rem;font-weight:700}