:root{--qj-faint:#cce0ff;--qj:#9fcaff;--qj-opa:#9fcaff50;--qj-deep:#5eaeea;--qj-dark:#0c5cae;--qj-black:#030730;--sh:1pt 1pt #335;--pinkbox:#b24777;--pinkbox-opa:#dd568bea;--awork-btn-hover:#357;--awork-bg:linear-gradient(180deg,#000,#2a4a6aca);--thisoe:#178577ce;--qj-pro-bg:#6dcdae;--qj-pro-opa:#6dcdaece;--banner-height:80px;--footer-height:72px}body,html{margin:0;padding:0;max-width:100vw;overflow-x:hidden;background-color:var(--qj-black)}a,button,hr,i,li,ol,p,q,q:after,q:before{all:unset}a,footer,header,i,main,ol{display:flex}q{display:grid}button{cursor:pointer}img{-webkit-user-select:none;-moz-user-select:none;user-select:none}::selection{background:var(--qj-opa);text-shadow:1pt 1pt #335}::-webkit-scrollbar{width:8pt}::-webkit-scrollbar-track{background-color:#222}::-webkit-scrollbar-thumb{background-color:var(--qj-dark);border-radius:3pt;-webkit-transition:background-color .2s ease;transition:background-color .2s ease}::-webkit-scrollbar-thumb:hover{background-color:var(--qj-deep)}#main-bg{z-index:-1;position:fixed;top:0;left:0;width:100vw;height:100vh;background-image:url(/bg.png);background-size:cover;background-position-x:81%;background-position-y:3%;overflow-x:hidden;overflow-y:scroll}main{flex-direction:column;width:calc(100% - 36pt);height:auto;min-height:calc(100vh - 30pt - var(--banner-height));padding:var(--banner-height) 18pt 36pt 18pt;color:#fff}h2{margin:0;padding-left:3vw;font-size:18pt;line-height:50pt;text-shadow:1px 1px 7pt #111}#skeleton{flex-direction:column;gap:12pt;&>i{width:100%;background-color:#eee2;border-radius:9pt}& i:first-child{height:16%;margin-top:12pt}& i:nth-child(2){height:39%}& i:nth-child(3){height:27%}}header{z-index:99;justify-content:space-between;position:absolute;left:0;top:0;width:calc(100vw - 42pt);height:var(--banner-height);padding:0 21pt}a#h1{align-items:center;gap:9px;margin:auto 0;color:#eee;cursor:pointer;& *{text-wrap:nowrap;transition:color .1s;cursor:pointer}&:hover *{color:var(--qj-faint)}&>i{flex-direction:column}& h1{margin:0;font-size:18pt;line-height:21pt;font-weight:777}& h1:nth-child(2){display:none;font-size:20pt;line-height:1}& label{font-family:sans-serif;font-size:9pt;line-height:12pt}}nav{flex-direction:row;flex-wrap:nowrap;& a{position:relative;padding:0 7pt;line-height:var(--banner-height);font-family:sans-serif;font-size:12pt;color:#eee;text-shadow:var(--sh);text-wrap:nowrap;cursor:pointer;transition:color .2s;&:hover{color:var(--qj)}}}#nav{flex-direction:row;flex-wrap:nowrap;&>a,&>button{width:39px;height:50px;margin:auto 0;cursor:pointer}& .svg{width:18pt;height:18pt;margin:auto}& button{display:none;margin-left:7pt;padding:0 3pt;& .svg{width:25pt;height:25pt}}}footer{flex-direction:column;justify-content:center;width:100%;height:var(--footer-height);background-color:var(--qj-black);& p,a{margin:0 auto;padding-bottom:3pt;font-size:9pt;line-height:12pt;font-family:sans-serif;color:#ccc;cursor:default}& a{cursor:pointer}}#index{min-height:calc(100vh - 30pt - 2*var(--banner-height))}ol{flex-direction:column}ol>li{position:relative;padding-left:30pt;&>i{z-index:7}}.last_line,.za_timeline{position:absolute;top:8pt;left:15pt;width:2px;height:100%;background-color:var(--pinkbox)}.last_line{background:linear-gradient(to bottom,var(--pinkbox),transparent 72%)}.pink_title{position:absolute;top:0;left:15pt;&>i{top:4pt;left:-3.6pt;width:9pt;height:9pt;background:var(--pinkbox)}&>i,&>i:after{position:absolute;border-radius:9pt}&>i:after{content:"";top:-2.2pt;left:-2.2pt;width:11pt;height:11pt;border:2px solid var(--pinkbox)}& hr{position:absolute;top:8pt;left:0;width:27pt;height:2px;background:var(--pinkbox)}& p{left:27pt;margin-right:auto;padding:0 3pt;font-size:12pt;line-height:16pt;white-space:nowrap;background:var(--pinkbox);cursor:default}& p,& p:after{position:absolute;top:0;display:block}& p:after{content:"";left:0;width:100%;height:100%;border-radius:3pt;box-shadow:0 0 18pt #1115}}#works{& ol>li{padding-bottom:30pt}& article{width:calc(100% - 36pt);padding:7pt 12pt 9pt}& .awork{max-width:810pt}}q.awork{margin:auto;grid-template-columns:auto 186.5pt 1fr 1fr;grid-template-rows:auto 180px;grid-template-areas:"thumbnail thumbnail thumbnail thumbnail" "staff bili steam weshop";gap:9pt;&>i{position:relative;flex-direction:column;& h3{margin:0 auto;font-size:15pt;line-height:2}&>a{position:relative;display:flex;flex:1 1;justify-content:center;align-items:center;margin:auto;padding:0 9pt;border-radius:9pt;font-size:12pt;line-height:1;font-weight:570;text-shadow:var(--sh);text-align:center;color:#eee;cursor:pointer;transition:scale .1s;&:hover{scale:1.03}&>.goto{width:18pt;height:72%}}& .smol{z-index:1;position:absolute;bottom:0;right:0;height:50%;aspect-ratio:1;background-size:cover;background-repeat:no-repeat;background-position:50%}&>*{z-index:5}}&>i:first-child{grid-area:thumbnail;justify-content:space-between;gap:7pt;background-color:var(--thisoe);&>div{width:100%;height:auto;aspect-ratio:840/250;background-size:cover;background-repeat:no-repeat;background-position:50%}&>i{background:var(--awork-bg);flex-direction:row;justify-content:space-between;padding:9pt 18pt;&>i{justify-content:end;flex-direction:column;font-size:12pt;line-height:16pt}&>i:nth-child(2){align-items:end}}}&>i:nth-child(2){grid-area:staff;background:var(--awork-bg);&>q{grid-template-columns:2fr 3fr;grid-auto-flow:row dense;width:100%;padding:0 1em;&>p{justify-self:end;padding-right:1em}&>q{justify-self:start}}}&>i:nth-child(3){grid-area:bili;overflow:hidden;background:var(--awork-bg);&>div{height:calc(100% - 30pt);aspect-ratio:128/72;iframe{width:100%;height:100%}}}&>i:nth-child(4){grid-area:steam;background:var(--awork-bg);align-items:center;& a:has(.steam){all:unset;&:hover{scale:1.03}z-index:5;height:calc(100% - 57pt);aspect-ratio:1;display:block;cursor:pointer;& .steam{width:100%;height:100%;border-radius:99pt;box-shadow:0 0 3pt var(--qj-deep)}}}&>i:nth-child(5){grid-area:weshop;align-items:center;background:var(--awork-bg);& .weshop{height:calc(100% - 57pt);aspect-ratio:1;background-size:contain;background-position:50%;background-repeat:no-repeat}}&:has(.manga){grid-template-rows:auto 180px 180px;grid-template-areas:"thumbnail thumbnail thumbnail thumbnail" "staff bili steam weshop" "manga manga manga manga";&>i:nth-child(6){grid-area:manga;overflow:hidden;background:var(--awork-bg)}}}#infos{& h2{transform:translateX(-16pt)}& ol{max-width:720pt;margin:0 auto}& ol>li{padding-bottom:36pt}& article{width:calc(100% - 99pt);padding-left:12pt}}i.ainfo{margin:auto;flex-direction:column;&>i{flex-direction:row;justify-content:flex-end;flex-wrap:wrap;align-self:flex-end;max-width:72%;gap:9pt;&>h3{display:flex;flex-wrap:nowrap;align-items:center;gap:3pt;margin:0;padding:0 3pt;font-size:13pt;line-height:16pt;text-shadow:var(--sh);background:var(--thisoe);&:after,&:before{content:"#";font-size:9pt}}}& ul{flex-direction:column;min-height:39pt;margin-top:7px;padding:0 12pt 16pt 27pt;background:var(--awork-bg);&>li{position:relative;display:block;margin:1em 0;&:before{content:"•";font-family:sans-serif;font-weight:900;position:absolute;left:-1em}}}}#main-bg:has(#about){background-position:18% 9%}#about{position:relative;flex-direction:column;& .bg{position:absolute;overflow:hidden;top:0;left:0;width:100%;height:100%;min-width:720pt;pointer-events:none;background:radial-gradient(ellipse 93% 180% at 48% 120%,#fff3eaac 48%,#feea 55%,#100c 63%,#000d 72%,#000c 99%)}}#tatie{top:0;left:0;width:100%;height:100%;background-image:url(/tatie.png);background-size:cover;background-repeat:no-repeat;background-position:72% 0}#about h3,#tatie{position:absolute}#about h3{bottom:9%;right:7vw;margin:0;font-size:72pt;line-height:81pt;color:var(--qj-pro-opa);text-align:right;text-shadow:0 0 18pt var(--qj-pro-bg);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}#about #tmp{z-index:9;position:relative;flex-direction:column;width:calc(90% - 36pt);max-width:152pt;margin:3vh 3vw 99pt;padding:27px 18pt;background-color:var(--qj-pro-opa);color:#000;& ::selection{text-shadow:none;background-color:var(--qj)}&>h2{all:unset;font-size:23pt;font-weight:888;line-height:30pt;padding-bottom:16pt;text-shadow:none}&>p{white-space:pre-wrap;font-size:16pt;line-height:21pt;font-weight:540;text-shadow:none;& .mark{background-color:var(--pinkbox-opa);color:#fff;&::selection{background-color:pink;color:#337}}& .para{display:block;margin-bottom:7px}}& ol{position:absolute;bottom:21pt;right:15pt;gap:9pt;& .pink_title{&>hr,&>i,&>i:after{background-color:var(--pinkbox-opa)}&>p{color:#fff;background-color:var(--pinkbox-opa);&:after{all:unset}&>a{cursor:pointer}}}&>li:nth-child(2){transform:translateY(-30pt)}&>li:nth-child(3){transform:translateY(-60pt)}&>li:nth-child(4){transform:translateY(-90pt)}&>li:nth-child(5){transform:translateY(-120pt)}}}@media only screen and (max-width:800px){#index #tmp{left:3vw!important;font-size:18pt!important}#nav button{display:flex}nav{align-items:stretch;position:absolute;top:var(--banner-height);right:0;flex-direction:column;background-color:var(--qj-black);padding:7px 9pt 10pt;border-bottom-left-radius:9pt}nav a{justify-content:center;line-height:30pt;padding:0 12pt}nav a:hover{color:var(--qj-faint)}q.awork{padding-bottom:18pt;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto 180px;grid-template-areas:"thumbnail thumbnail thumbnail" "bili bili bili" "staff steam weshop";&>i:first-child{&>i{flex-direction:column;&>i:nth-child(2){align-items:start}}}&>i:nth-child(3){&>div{width:100%;aspect-ratio:128/72}}&:has(.manga){grid-template-rows:auto auto 180px 180px;grid-template-areas:"thumbnail thumbnail thumbnail" "bili bili bili" "staff steam weshop" "manga manga manga"}}i.ainfo{&>i{max-width:63%}}#about h3{font-size:54pt;line-height:63pt}#about #tmp{max-width:133pt;&>h2{font-size:18pt;line-height:1}&>p{font-size:14pt;line-height:18pt}}#tatie{background-position:58% 0}}@media only screen and (max-width:520px){header{padding:0 9pt;width:calc(100vw - 18pt)}#nav a:has(.bili){display:none}q.awork{grid-template-columns:1fr 1fr;grid-template-rows:auto auto 180px;grid-template-areas:"thumbnail thumbnail" "bili bili" "steam weshop";&>i:nth-child(2){display:none}&:has(.manga){grid-template-rows:auto auto 180px 180px;grid-template-areas:"thumbnail thumbnail" "bili bili" "steam weshop" "manga manga"}}i.ainfo{&>i{max-width:50%}}#about{& h3{display:none}& #tmp{margin-bottom:3vh}}}@media only screen and (max-width:400px){main{height:calc(100vh - 30pt - 2 * var(--banner-height))!important}a#h1{& h1:first-child{display:none}& h1:nth-child(2){display:block}& label{display:none}}q.awork{&>i{& h3{font-size:15pt}}}}.svg{display:inline-block;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-repeat:no-repeat;background-size:100% 100%}.weibo.svg{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2399c7fa' d='M4.278 8.592c2.773-2.77 6.004-4.033 7.219-2.816c.537.537.588 1.464.244 2.572c-.178.557.524.25.524.25c2.241-.938 4.197-.994 4.91.027c.38.542.343 1.306-.008 2.19c-.163.407.048.47.36.563c1.262.392 2.668 1.336 2.668 3.004c0 2.763-3.98 6.239-9.964 6.239c-4.565 0-9.23-2.213-9.23-5.852c0-1.902 1.204-4.102 3.277-6.177m12.133 5.742c-.237-2.391-3.382-4.039-7.023-3.677c-3.64.359-6.403 2.59-6.167 4.98c.237 2.394 3.382 4.039 7.023 3.68c3.641-.362 6.401-2.592 6.167-4.983m-10.249.104c.754-1.528 2.712-2.39 4.446-1.94c1.792.463 2.707 2.154 1.976 3.799c-.744 1.683-2.883 2.58-4.695 1.994c-1.752-.566-2.493-2.295-1.727-3.853m2.715.578c-.563-.237-1.291.008-1.64.553c-.354.547-.189 1.201.371 1.456c.568.257 1.325.013 1.676-.55c.346-.568.163-1.217-.408-1.459m1.387-.578c-.216-.084-.486.018-.613.232c-.123.214-.054.458.163.547c.219.092.501-.012.628-.231c.123-.22.044-.466-.178-.548m5.694-11.514A5.83 5.83 0 0 1 21.5 4.72a5.84 5.84 0 0 1 1.22 5.704a.84.84 0 0 1-1.06.54a.844.844 0 0 1-.542-1.062a4.142 4.142 0 0 0-4.808-5.327a.845.845 0 0 1-.353-1.65m.626 2.926a2.836 2.836 0 0 1 3.29 3.648a.725.725 0 1 1-1.378-.45a1.38 1.38 0 0 0-.287-1.357a1.4 1.4 0 0 0-1.322-.426a.723.723 0 1 1-.303-1.415'/%3E%3C/svg%3E")}.bili.svg{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%2399c7fa' fill-rule='evenodd'%3E%3Cpath d='m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='99c7fa' d='M6.445 3.168a1 1 0 0 1 1.387.277L9.535 6h4.93l1.703-2.555a1 1 0 0 1 1.664 1.11L16.87 6H18a4 4 0 0 1 4 4v7a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4v-7a4 4 0 0 1 4-4h1.131l-.963-1.445a1 1 0 0 1 .277-1.387M8.986 8H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2H9.016zM9 11a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0v-2a1 1 0 0 1 1-1m6 0a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0v-2a1 1 0 0 1 1-1'/%3E%3C/g%3E%3C/svg%3E")}.steam.svg{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 65 65' fill='%23fff'%3E%3Cuse xlink:href='%23B' x='.5' y='.5'/%3E%3Cdefs%3E%3ClinearGradient id='A' x2='50%25' x1='50%25' y2='100%25' y1='0%25'%3E%3Cstop stop-color='%23111d2e' offset='0%25'/%3E%3Cstop stop-color='%23051839' offset='21.2%25'/%3E%3Cstop stop-color='%230a1b48' offset='40.7%25'/%3E%3Cstop stop-color='%23132e62' offset='58.1%25'/%3E%3Cstop stop-color='%23144b7e' offset='73.8%25'/%3E%3Cstop stop-color='%23136497' offset='87.3%25'/%3E%3Cstop stop-color='%231387b8' offset='100%25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Csymbol id='B'%3E%3Cg%3E%3Cpath d='M1.305 41.202C5.259 54.386 17.488 64 31.959 64c17.673 0 32-14.327 32-32s-14.327-32-32-32C15.001 0 1.124 13.193.028 29.874c2.074 3.477 2.879 5.628 1.275 11.328z' fill='url(%23A)'/%3E%3Cpath d='M30.31 23.985l.003.158-7.83 11.375c-1.268-.058-2.54.165-3.748.662a8.14 8.14 0 0 0-1.498.8L.042 29.893s-.398 6.546 1.26 11.424l12.156 5.016c.6 2.728 2.48 5.12 5.242 6.27a8.88 8.88 0 0 0 11.603-4.782 8.89 8.89 0 0 0 .684-3.656L42.18 36.16l.275.005c6.705 0 12.155-5.466 12.155-12.18s-5.44-12.16-12.155-12.174c-6.702 0-12.155 5.46-12.155 12.174zm-1.88 23.05c-1.454 3.5-5.466 5.147-8.953 3.694a6.84 6.84 0 0 1-3.524-3.362l3.957 1.64a5.04 5.04 0 0 0 6.591-2.719 5.05 5.05 0 0 0-2.715-6.601l-4.1-1.695c1.578-.6 3.372-.62 5.05.077 1.7.703 3 2.027 3.696 3.72s.692 3.56-.01 5.246M42.466 32.1a8.12 8.12 0 0 1-8.098-8.113 8.12 8.12 0 0 1 8.098-8.111 8.12 8.12 0 0 1 8.1 8.111 8.12 8.12 0 0 1-8.1 8.113m-6.068-8.126a6.09 6.09 0 0 1 6.08-6.095c3.355 0 6.084 2.73 6.084 6.095a6.09 6.09 0 0 1-6.084 6.093 6.09 6.09 0 0 1-6.081-6.093z'/%3E%3C/g%3E%3C/symbol%3E%3C/svg%3E")}.burger.svg{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23eee' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E")}.close.svg{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23eee' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m17 14l-5-5m0 0l-5 5'/%3E%3C/svg%3E")}.goto.svg{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23eee' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m10 17l5-5m0 0l-5-5'/%3E%3C/svg%3E")}.acme.svg{background-image:none}