@charset "UTF-8";iframe{border:1px solid #b7c8f3}code{word-wrap:break-word;word-break:break-all}code,img,video{max-width:100%}#content a{background:#fff;border-radius:6px;color:#f08fe6;padding:0 6px}#content a:before{content:"\1f517  "}.center{display:block;margin-left:auto;margin-right:auto}body{--swiper-theme-color:#f08fe6;background:#000;box-sizing:border-box;margin:0}a{text-decoration:none}.nav{height:40px;position:absolute;width:100vw}.nav .center{margin:0 auto;max-width:960px;padding:4px 30px 0}.nav .center div{-webkit-text-fill-color:transparent;text-fill-color:transparent;background:linear-gradient(135deg,#b491ed,#81a3fc);-webkit-background-clip:text;background-clip:text;float:right;font-size:20px;font-weight:400;line-height:36px;margin-left:20px;text-decoration:underline;text-decoration-color:linear-gradient(135deg,#b491ed,#81a3fc)}.section-wrapper{gap:120px;overflow:hidden}.section,.section-wrapper{display:flex;flex-direction:column}.section{align-items:center;gap:60px;padding:60px}.flex-col{display:flex;flex-direction:column}.node circle{fill:#fff;stroke:#8859d4;stroke-width:2px}.node text{fill:#8859d4;stroke:#fff;stroke-width:5px;font:12px sans-serif;paint-order:stroke}.link{fill:none;stroke:#81a3fc;stroke-width:1px}#app{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50;font-family:Avenir,Helvetica,Arial,sans-serif}.purple{color:#8859d4}.gradient-text{-webkit-text-fill-color:transparent;text-fill-color:transparent;background:linear-gradient(135deg,#b491ed,#81a3fc);-webkit-background-clip:text;background-clip:text}.body-title{-webkit-text-fill-color:transparent;text-fill-color:transparent;font-size:60px;text-align:center}.body-subtitle,.body-title{background:linear-gradient(135deg,#b491ed,#81a3fc);-webkit-background-clip:text;background-clip:text;font-weight:600}.body-subtitle{-webkit-text-fill-color:transparent;text-fill-color:transparent;font-size:36px;max-width:1080px;padding-left:50px;text-align:left;width:100%}.mobile-title{margin-top:0}.subtitle{-webkit-text-fill-color:transparent;text-fill-color:transparent;background:linear-gradient(135deg,#b491ed,#81a3fc);-webkit-background-clip:text;background-clip:text;font-size:32px;font-weight:600}.header-section{background:linear-gradient(135deg,#e7ecfb,#f4e5fa);padding:100px}.header-section .header-content-wrapper{display:flex;flex-direction:column;gap:48px;margin:0 auto;max-width:960px}.header-section .header-body{color:#8859d4;font-size:20px;font-weight:400;line-height:150%}.header-section .about-me-wrapper{display:flex;flex-direction:column;gap:20px}.header-section .items{color:#8859d4;font-size:20px;font-weight:400}.header-section .first-row{align-items:center;display:flex;flex-direction:row;gap:12vw}.header-section .first-row #portrait-img{border-radius:20px;height:320px;mix-blend-mode:multiply;width:240px}.header-section .first-row .header-right{display:flex;flex-direction:column;gap:8px;max-width:640px;text-align:left}.header-section .first-row .header-right .name{-webkit-text-fill-color:transparent;text-fill-color:transparent;background:linear-gradient(135deg,#b491ed,#81a3fc);-webkit-background-clip:text;background-clip:text;font-size:72px;font-weight:600}.header-section .flex-row{display:flex;flex-direction:row;flex-wrap:wrap}.header-section .tags{background:#fff;border:1px solid #8859d4;border-radius:20px;color:#8859d4;font-size:13px;font-weight:500;height:26px;line-height:26px;padding:0 10px}.header-section .tags-wrapper{gap:12px}.skill-wrapper .skill-card{background:#fff;border-radius:30px;display:flex;flex-direction:row;height:720px;margin:0 auto;max-width:1280px;overflow:hidden;width:100%}.skill-wrapper .skill-card .card-title{background:#f8f6fd;padding:20px;text-align:center}.skill-wrapper .skill-card .right-card{width:360px}.skill-wrapper .skill-card .left-card{flex-grow:1}.skill-wrapper .skill-card .card-separator{background:#000;width:2px}.skill-wrapper .skill-card #skills-graph{overflow:hidden}.skill-wrapper .tools-content{display:flex;flex-direction:column;height:calc(100% - 165px);justify-content:space-between;padding:30px 0 45px;position:relative}.skill-wrapper .tools-content .tool-img{height:44px;padding:15px;width:44px}.skill-wrapper .tools-content .imgs{display:flex;flex-wrap:wrap;justify-content:center}.skill-wrapper .tools-content .tool-detail{align-items:center;background-color:#f7f9fc;border-radius:12px;display:flex;flex-direction:row;gap:12px;margin:0 45px;padding:12px;width:calc(100% - 114px)}.skill-wrapper .tools-content .tool-detail .tool-img{padding:0}.skill-wrapper .tools-content .tool-detail .tool-detail-title{color:#2e2e48;font-size:16px;font-weight:500}.skill-wrapper .tools-content .tool-detail .tool-detail-desc{color:#79819a;font-size:14px}.edu-wrapper{padding:120px 60px}.edu-wrapper .edu-content{display:flex;flex-direction:row;gap:80px;margin:0 auto;max-width:1080px}.edu-wrapper .edu-content .left{align-items:center;display:flex;flex-direction:column;gap:12px;width:300px}.edu-wrapper .edu-content .left .edu-year{font-size:36px}.edu-wrapper .edu-content .left .edu-degree{font-size:24px}.edu-wrapper .edu-content .school-logo{align-items:center;background:#fff;border-radius:20px;display:flex;height:180px;justify-content:center;margin-bottom:12px;padding:30px;width:180px}.edu-wrapper .edu-content .date-range{font-size:32px}.edu-wrapper .edu-content .date-range,.edu-wrapper .edu-content .degree{-webkit-text-fill-color:transparent;text-fill-color:transparent;background:linear-gradient(135deg,#b491ed,#81a3fc);-webkit-background-clip:text;background-clip:text}.edu-wrapper .edu-content .degree{font-size:22px}.edu-wrapper .edu-content .right{color:#f3f3f3;display:flex;flex-direction:column;font-size:18px;gap:12px;justify-content:space-around}.edu-wrapper .edu-content .edu-detail-title{font-size:28px;font-weight:500}.project-wrapper{align-items:center;display:flex;flex-direction:column;gap:32px;padding:60px}.project-wrapper .body-title{margin-bottom:0}.dev-wrapper{align-items:center;display:flex;flex-direction:column;gap:32px;padding:60px}.dev-wrapper .body-title{margin-bottom:0}.dev-wrapper .bi-title{margin-top:0}.dev-wrapper .dev-card{align-items:center;background:linear-gradient(135deg,#e7ecfb,#f4e5fa);border-radius:30px;display:flex;justify-content:center;max-width:1080px;overflow:hidden}.dev-wrapper .dev-card .description{align-items:center;background:#f8f6fd;display:flex;flex-direction:column;gap:32px;height:100%;justify-content:center;min-width:320px;padding:24px;width:320px}.dev-wrapper .dev-card .description .desc-title{font-size:28px;font-weight:500}.dev-wrapper .dev-card .description .desc-detail{font-size:16px}.dev-wrapper .dev-card .content{align-items:center;display:flex;flex-grow:1;height:100%;justify-content:center;overflow:hidden}.dev-wrapper .dev-card .dev-card-s{background:#fff;border-radius:20px;box-shadow:0 3px 12px #7522a833;flex-basis:0;flex-grow:1;height:100%;position:relative}.dev-wrapper .dev-card .dev-card-s .s-card-content{height:calc(100% - 102px)}.dev-wrapper .dev-card .dev-card-s .s-card-content img{height:100%;-o-object-fit:contain;object-fit:contain;width:100%}.dev-wrapper .dev-card .dev-card-s #sofa_editor{padding:16px}.dev-wrapper .dev-card .dev-card-s .separaror-s{background:linear-gradient(135deg,#e7ecfb,#f4e5fa);border-radius:1px;height:2px;margin:0 20px}.dev-wrapper .dev-card .dev-card-s .s-card-title-wrapper{align-items:center;bottom:0;display:flex;height:60px;justify-content:center;margin:20px;position:absolute;width:calc(100% - 40px)}.dev-wrapper .dev-card .dev-card-s .s-card-title{-webkit-text-fill-color:transparent;text-fill-color:transparent;background:linear-gradient(135deg,#b491ed,#81a3fc);-webkit-background-clip:text;background-clip:text;font-size:20px;font-weight:600;text-align:center}.dev-wrapper .dev-card .dev-card-s .tooltip{background-color:#333333e6;border-radius:20px;bottom:0;color:#fff;display:flex;flex-direction:column;gap:24px;padding:24px;position:absolute;width:calc(100% - 48px)}.dev-wrapper .dev-card .dev-card-s .tooltip .open-demo{font-size:24px;font-weight:500;text-align:center}.dev-wrapper .other-one{height:600px;width:100%}.dev-wrapper .other-one .inside-margin{display:flex;flex-direction:row;gap:20px;height:calc(100% - 40px);margin:20px;width:100%}.dev-wrapper .other-two{display:flex;flex-direction:row;gap:20px;height:600px;padding:20px;width:100%}.dev-wrapper .app-card{flex-direction:column;gap:20px;padding:60px 0 30px;width:100%}.dev-wrapper .app-card .note-text{color:#000;display:flex;flex-direction:column;font-size:20px;font-weight:500;text-align:center}.dev-wrapper .app-card #ios-btn{background:#000;border-radius:12px}.dev-wrapper .app-card #ios-btn:hover{background:linear-gradient(135deg,#b491ed,#81a3fc)}.dev-wrapper .app-card .note-game-wrapper{display:flex;filter:drop-shadow(0 3px 6px rgba(240,143,230,.3));flex-direction:row;flex-wrap:wrap;gap:20px;justify-content:center;width:1420px}.dev-wrapper .app-card .note-game-wrapper img{border-radius:6px;width:220px}.dev-wrapper .app-card .ootd-wrapper{display:flex;filter:drop-shadow(0 3px 6px rgba(240,143,230,.3));flex-direction:row;flex-wrap:wrap;gap:16px;justify-content:center;width:1420px}.dev-wrapper .app-card .ootd-wrapper img{border-radius:6px;width:116px}.dev-wrapper .overpay-card{flex-direction:row;height:600px;width:100%}.dev-wrapper .overpay-card #overpay-cover{height:100%;-o-object-fit:cover;object-fit:cover}.design-wrapper{align-items:center;display:flex;flex-direction:column;gap:32px}.design-wrapper .body-title{margin-bottom:0}.design-card{background:linear-gradient(135deg,#e7ecfb,#f4e5fa);border-radius:30px;flex-direction:row;height:600px;max-width:1080px;min-height:480px;overflow:hidden;width:100%}.design-card,.design-card .description{align-items:center;display:flex;justify-content:center}.design-card .description{background:#f8f6fd;flex-direction:column;gap:24px;height:calc(100% - 40px);min-width:320px;padding:20px;width:320px}.design-card .description .desc-title{font-size:28px;font-weight:500}.design-card .description .desc-detail{font-size:16px}.design-card .content{height:100%;width:calc(100% - 360px)}.design-card .content .white-container{background:#fff;border-radius:18px;height:calc(100% - 24px);margin:12px;overflow:hidden}.design-card .content .white-container img{height:100%;-o-object-fit:contain;object-fit:contain;width:100%}.design-card .content iframe{height:calc(100% + 48px)}.design-card .content iframe a{visibility:collapse}.design-card .content .swiper{height:100%;width:100%}.card-btn{align-items:center;background:#fff;border-radius:50px;box-shadow:0 3px 12px #f08fe633;color:#f08fe6;cursor:pointer;display:flex;flex-direction:row;font-size:20px;font-weight:500;gap:12px;height:50px;line-height:50px;padding:0 16px;text-align:center;transition:.3s}.card-btn:hover{background:#f08fe6;box-shadow:none;color:#fff}.card-btn:hover svg path{fill:#fff;transition:fill .5s}.flex-reverse{flex-direction:row-reverse}.v-enter-active{transition:opacity .2s ease}.v-leave-active{transition:opacity .4s ease}.v-enter-from,.v-leave-to{opacity:0}@media only screen and (max-width:800px){.section-wrapper{gap:32px}.section{gap:32px;padding:32px 12px}.body-title{font-size:48px}.body-subtitle{font-size:24px}.header-section{padding:60px 30px}.header-section .tags-wrapper{gap:8px}.header-section .tags{font-size:12px;height:22px;line-height:22px}.header-section .items{font-size:16px}.header-section .first-row{align-items:center;gap:20px}.header-section .first-row #portrait-img{height:280px;width:210px}.header-section .first-row .header-right .name{font-size:48px}.header-section .header-body{font-size:16px}.subtitle{font-size:24px}.skill-wrapper .skill-card{flex-direction:column;height:-moz-fit-content;height:fit-content}.skill-wrapper .skill-card .right-card{width:100%}.skill-wrapper .skill-card .right-card .tools-content{gap:12px;padding:32px 12px}.skill-wrapper .skill-card .right-card .tools-content .tool-img{height:32px;width:32px}.skill-wrapper .skill-card .card-separator{height:1px;width:100%}.edu-wrapper .edu-content{align-items:center;flex-direction:column;gap:18px}.edu-wrapper .edu-content .edu-detail-title{font-size:20px}.edu-wrapper .edu-content .left{gap:8px}.edu-wrapper .edu-content .right{font-size:14px}.edu-wrapper .edu-content .school-logo{height:160px;width:160px}.design-card{flex-direction:column;height:-moz-fit-content;height:fit-content}.design-card .description{gap:24px;width:calc(100% - 40px)}.design-card .description .desc-title{font-size:24px}.design-card .description .desc-detail{font-size:14px}.design-card .content{width:100%}.dev-wrapper{padding:32px 12px}.dev-wrapper .dev-card .description .desc-title{font-size:24px}.dev-wrapper .dev-card .description .desc-detail{font-size:14px}.dev-wrapper .dev-card .dev-card-s .tooltip{font-size:10px}.dev-wrapper .dev-card .dev-card-s .tooltip .open-demo{font-size:18px}.dev-wrapper .overpay-card{flex-direction:column}.dev-wrapper .overpay-card .description{gap:24px;height:unset;padding:24px;width:calc(100% - 48px)}.dev-wrapper .note-card .note-text{font-size:20px}.dev-wrapper .note-card #ios-btn svg{height:45px;width:150px}.dev-wrapper .note-card .note-game-wrapper{gap:12px}.dev-wrapper .note-card .note-game-wrapper img{width:180px}.card-btn{font-size:16px;gap:8px;height:36px;line-height:36px}.card-btn svg{height:24px;width:24px}.node text{font-size:10px}}@media only screen and (max-width:640px){.subtitle{font-size:20px}.header-section{padding:64px 20px 32px}.header-section .header-content-wrapper{gap:32px}.header-section .first-row .header-right .name{font-size:36px}.header-section .first-row #portrait-img{height:160px;width:120px}.dev-wrapper .dev-card .dev-card-s .s-card-title-wrapper{position:unset}.dev-wrapper .dev-card .dev-card-s .s-card-content{height:-moz-fit-content;height:fit-content}.dev-wrapper .dev-card .dev-card-s .s-card-content img{height:400px}.dev-wrapper .other-one{background:unset;height:-moz-fit-content;height:fit-content}.dev-wrapper .other-one .inside-margin{flex-direction:column;margin:0}.design-card .content .white-container{height:360px}.dev-wrapper .app-card .ootd-wrapper{gap:8px;width:400px}.dev-wrapper .app-card .ootd-wrapper img{width:88px}}