/*
 * https://yui.dev (c) All Rights Reserved.
 */
@import"https://fonts.googleapis.com/css2?family=Oregano:ital@0;1&display=swap";@import"https://fonts.googleapis.com/css2?family=SUSE:wght@100..800&display=swap";:root{--green: #5FD564;--orang: #E3B740;--red: #FEA69A;--blue: #84C5E6;--accent-900: #FCF9FD;--accent-800: #F5EAF8;--accent-700: #E6CCED;--accent-600: #D9AFE1;--accent-500: #CC90D4;--accent-400: #BD6DC5;--accent-300: hsl(296, 37%, 45%);--accent-200: hsl(300, 35%, 30%);--accent-100: hsl(303, 34%, 20%);--accent-000: hsl(306, 33%, 12%);--text-900: hsl(250, 12%, 95%);--text-800: hsl(243, 12%, 85%);--text-700: hsl(245, 12%, 70%);--text-600: hsl(243, 12%, 60%);--text-500: hsl(243, 12%, 50%);--text-400: hsl(245, 12%, 40%);--text-300: hsl(242, 12%, 30%);--text-200: hsl(238, 12%, 21%);--text-100: hsl(240, 12%, 16%);--text-000: hsl(237, 12%, 10%);--font-tiny: 1rem;--font-small: 1.25rem;--font-regular: 1.4rem;--font-large: 2rem;--font-larger: 2.5rem}.a900{color:var(--accent-900)}.a800{color:var(--accent-800)}.a700{color:var(--accent-700)}.a600{color:var(--accent-600)}.a500{color:var(--accent-500)}.a400{color:var(--accent-400)}.a300{color:var(--accent-300)}.a200{color:var(--accent-200)}.a100{color:var(--accent-100)}.a000{color:var(--accent-000)}.t900{color:var(--text-900)}.t800{color:var(--text-800)}.t700{color:var(--text-700)}.t600{color:var(--text-600)}.t500{color:var(--text-500)}.t400{color:var(--text-400)}.t300{color:var(--text-300)}.t200{color:var(--text-200)}.t100{color:var(--text-100)}.t000{color:var(--text-000)}.ft{font-size:var(--font-tiny)}.fs{font-size:var(--font-small)}.fr{font-size:var(--font-regular)}.fl{font-size:var(--font-large)}.flr{font-size:var(--font-larger)}*{box-sizing:border-box}::selection{color:var(--text-000);background:var(--text-900)}body,html{color:var(--text-900);font-family:SUSE,sans-serif;image-rendering:pixelated;background:url(/static/img/grid.png),var(--text-000);background-size:16px;padding:0;margin:0}body,html{width:100%;min-height:100%}body{display:flex;flex-direction:column;min-height:100vh}main{display:flex;flex-direction:column;margin:0 auto;max-width:895px;min-width:35vw;font-size:var(--font-regular);margin-top:8rem;padding:16px;gap:2rem;z-index:1}main>h2{margin:0 0 -16px;font-size:var(--font-large);user-select:none}header h1,header .nav,section{box-shadow:8px 8px 0 var(--text-100);background:var(--text-200);padding:1rem}section hr{border:0;margin:4px 0}header{display:flex;user-select:none;flex-direction:column;font-size:var(--font-regular);width:max-content;h1{text-shadow:4px 4px 0 var(--accent-000);width:max-content;font-weight:900;font-size:3rem;padding:0 1rem;margin:0}.nav{display:flex;flex-wrap:wrap;max-width:90vw;padding:.5rem;a{color:var(--text);text-decoration:none;padding:.5rem 1rem;outline:none;&:hover,&:focus{background:var(--text-400)}&.active{background:var(--text-300);font-weight:700}}}}input,button,textarea{color:inherit;font-size:inherit;font-family:inherit;background:0;padding:0;outline:0;margin:0;border:0}.center{text-align:center}img,.ns{user-select:none}b.b{font-weight:900}h1,h2,h3,p{margin:0}a.link{cursor:pointer;color:var(--accent-500);&:hover{text-decoration:none;color:var(--text-900);background:var(--accent-400);box-shadow:4px 4px #000}}a.link:has(.nf){text-decoration:none;span{text-decoration:solid underline}&:hover span{text-decoration:none}}mark{background:var(--accent-200);color:var(--accent-900)}.btn{user-select:none;text-decoration:none;border:2px solid var(--text-900);color:var(--text-900);cursor:pointer;padding:4px 8px;&:hover,&:focus,&.active{background:var(--text-900);color:var(--accent-400)}}.spaced-container{display:flex;gap:16px}.badge{width:88px;height:31px;image-rendering:pixelated;transition:.2s scale cubic-bezier(.075,.82,.165,1);cursor:pointer;&:hover{scale:1.3;rotate:5deg}}.toolbar{margin-left:auto;img{cursor:pointer;opacity:.2;&:hover{opacity:1}}}body.inspect{cursor:crosshair;background:#0c0c0c;main,[data-inspect-text]{background-image:repeating-linear-gradient(45deg,#e3b74020 0px 15px,#e3b74040 15px 32px)}main{position:relative;outline:2px solid var(--orang);outline-offset:-2px;&:before{content:"INSPECT MODE";background:var(--orang);position:absolute;font-weight:900;color:#000;bottom:100%;left:0}&:after{content:"";pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:99999999;background:#e3b74010}}[data-inspect-text]{outline:2px solid var(--orang);color:var(--orang);cursor:help;*{cursor:help}&:hover{outline-width:4px}}}#notebook{.open{display:none}&:hover{.closed{display:none}.open{display:unset}}}@keyframes nb-switch-page-end{0%{opacity:1}to{opacity:1;transform:scaleX(1)}}@keyframes nb-switch-page-start{0%{opacity:1}to{opacity:1;transform:scaleX(0)}}@keyframes nb-page-light-up{0%{filter:brightness(0)}}.modal_notebook{display:grid;position:relative;grid-template-columns:1fr 1fr;transform-origin:50% 50%;width:1300px;height:630px;font-size:2.5rem;.left{background-image:linear-gradient(#fff7,#fff7),url(/static/desk/notebook/overlay_left.png);padding:.5em}.right{background-image:linear-gradient(#fff7,#fff7),url(/static/desk/notebook/overlay_right.png);padding:.5em .8em}.left,.right{position:relative;background-size:cover;padding-bottom:1.5em}.animation{display:grid;position:absolute;pointer-events:none;grid-template-columns:1fr 1fr;top:0;left:0;width:100%;height:100%;z-index:999;.left,.right{opacity:0}.left{transform-origin:top right}.right{transform-origin:top left}&.next{.right{animation:.21s ease-in-out nb-switch-page-start}.left{transform:scaleX(0);animation:.21s cubic-bezier(.19,1,.22,1) .21s nb-switch-page-end}}&.prev{.left{animation:.21s ease-in-out nb-switch-page-start}.right{transform:scaleX(0);animation:.21s cubic-bezier(.19,1,.22,1) .21s nb-switch-page-end}}}h1{font-size:inherit;color:#a00;padding:0;margin:0}.c1{color:#f0a}.c2{color:#11d}.c3{color:#b0c}.c4{color:#447}a,u{text-decoration:none}.sm{font-size:.5em}hr{border:0;height:0;margin:.25em 0}a{color:#11d;cursor:pointer;&:hover{color:#88f}}h1,u,a{position:relative;width:max-content;&:after{content:"";position:absolute;background-color:currentColor;mask:url('data:image/svg+xml,<svg width="420" height="8" viewBox="0 0 420 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M-9.90874e-08 3.26685C5.5 3.26685 6.90377 2.40731 10.9354 1.91959C14.0097 1.54768 19.158 0.936803 23.0279 1.91224C25.4408 2.52042 30.7554 3.38765 35.9292 2.33134C39.9981 1.50058 43.9998 0.446634 47.2913 1.34119C50.0684 2.09596 52.0288 3.05434 54.0728 3.87537C57.5056 5.25426 62.3223 4.04448 65.2609 3.3901C68.5178 2.66484 77.9391 2.40731 83.8898 2.89503C86.5788 3.11543 89.4385 3.87782 92.8697 4.28466C98.7211 4.97847 101.046 3.55431 103.332 2.98081C106.833 2.10295 115.035 2.40732 120.488 2.97591C124.222 3.36524 126.368 4.69151 128.904 5.34588C131.248 5.95054 133.887 6.16202 146.509 6.40955C155.423 6.58437 165.013 5.05996 167.375 5.57786C171.5 6.48222 171.703 6.55819 176.188 6.48222C179.461 6.42678 183.955 7.05572 187.141 6.48222C190.455 5.88582 191 5.01685 198.5 4.26685C203.5 3.76685 203.5 3.26672 206 3.26672C208 3.26672 209 3.26685 210 3.26685" stroke="black" stroke-width="2"/><path d="M210 3.26685C215.5 3.26685 216.904 2.40731 220.935 1.91959C224.01 1.54768 229.158 0.936803 233.028 1.91224C235.441 2.52042 240.755 3.38765 245.929 2.33134C249.998 1.50058 254 0.446634 257.291 1.34119C260.068 2.09596 262.029 3.05434 264.073 3.87537C267.506 5.25426 272.322 4.04448 275.261 3.3901C278.518 2.66484 287.939 2.40731 293.89 2.89503C296.579 3.11543 299.438 3.87782 302.87 4.28466C308.721 4.97847 311.046 3.55431 313.332 2.98081C316.833 2.10295 325.035 2.40732 330.488 2.97591C334.222 3.36524 336.368 4.69151 338.904 5.34588C341.248 5.95054 343.887 6.16202 356.509 6.40955C365.423 6.58437 375.013 5.05996 377.375 5.57786C381.5 6.48222 381.703 6.55819 386.188 6.48222C389.461 6.42678 393.955 7.05572 397.141 6.48222C400.455 5.88582 401 5.01685 408.5 4.26685C413.5 3.76685 413.5 3.26672 416 3.26672C418 3.26672 419 3.26685 420 3.26685" stroke="black" stroke-width="2"/></svg>');mask-size:auto .3em;mask-repeat:no-repeat;width:100%;height:.3em;bottom:0;left:0}}.switch_page{cursor:pointer;position:absolute;background:0;border:0;outline:0;background-position:center;background-repeat:no-repeat;background-size:contain;z-index:1000;bottom:.5em;height:40px;width:85px;opacity:.5;&:hover,&:focus{opacity:1}&#prev_page{left:.5em}&#next_page{right:.5em}}canvas{position:absolute;cursor:crosshair;max-width:100%;max-height:90%;top:0;left:0}.sketch{display:flex;justify-content:center;align-content:center;align-items:center;width:100%;height:90%;img{width:80%;filter:drop-shadow(0 0 1px #000)}}.decoration{position:absolute;pointer-events:none;z-index:50;&.tl{top:0;left:0}&.tr{top:0;right:0}&.bl{bottom:0;left:0}&.br{bottom:0;right:0}}}#tictactoe{position:absolute;pointer-events:all!important;background-image:url(/static/desk/notebook/ttt/grid.png);background-repeat:no-repeat;image-rendering:auto;background-position-x:4px;bottom:50px;right:70px;rotate:-15deg;z-index:51;display:flex;flex-wrap:wrap;width:132px;height:114px;span:hover,span.x{background-image:url(/static/desk/notebook/ttt/x.png)}&.is-o span:hover,span.o{background-image:url(/static/desk/notebook/ttt/o.png)}span{display:flex;width:44px;height:36px;margin-bottom:2px;position:relative;cursor:pointer;scale:.8;&:hover{opacity:.5}&.x,&.o{pointer-events:none}&.won{z-index:100}&.won:after{content:"";background-image:url(/static/desk/notebook/ttt/line.png);background-size:100% 100%;animation:.5s ttt-grow;width:144px;height:15px;position:absolute;left:10px;top:8px}&.h:after{rotate:90deg;left:-50px;top:60px}&.d:after{rotate:42deg;width:200px;left:-20px;top:60px}&.d2:after{rotate:-42deg;width:200px;left:-20px;top:-40px}}&.ended,&.locked{pointer-events:none!important}&.ended span{animation:.5s ttt-end .6s}}@keyframes ttt-grow{0%{transform:scaleX(0)}}@keyframes ttt-end{to{opacity:0;scale:0}}#light_switch{opacity:.1}.hitbox:hover+#light_switch{opacity:1}.modal_note,.modal_notebook{font-family:Oregano,cursive;color:#000;::selection{color:unset;background:#0002}}.modal_note{font-size:1.5rem;background:url(/static/desk/sticky_note_overlay.png) no-repeat;background-size:100%;aspect-ratio:1 / 1;width:350px;padding:.5em 1.5em .5em 1em}.modal_item{display:flex;background:#0008;backdrop-filter:blur(16px);width:max-content;border-radius:.5rem;border:1px solid #fff7;overflow-y:auto;max-height:90vh;max-width:727px;padding:1rem;gap:1rem;h1{display:flex;font-size:1.5rem;margin:0 0 8px;span{flex-grow:1;margin-right:16px}button{display:flex;cursor:pointer;align-items:center;align-content:center;border-radius:100%;background:#fff2;padding:8px;margin:0;font-size:1rem;border:0;outline:0;color:#fff;&:hover,&:active{background:#fff5}}}ul,li{margin:0}ul{padding:1rem 0 1rem 1.5rem}.left{display:flex;flex-direction:column;max-width:200px;img{pointer-events:none;width:100%}}}.typing-stats{display:flex;flex-direction:column;justify-content:center;align-content:center;align-items:center;flex-grow:1;gap:8px;p{color:var(--text-700)}}#modal_sayo .typing-stats{.buttons{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px;.btn{display:flex;align-items:center;align-content:center;span{margin-left:auto;font-size:.6em}}}}#modal_keyboard{font-size:1.2rem;canvas{width:100%;height:100px;padding:4px;border-radius:4px;border:2px solid #fff}.typing-text div{width:100%;height:1ch}.left{width:180px;min-width:180px}img{margin:8px 0;width:100%}.test{user-select:none;span{color:var(--text-700);z-index:1;&.typed{color:var(--text-900)}&.mistake{background-color:#f66;color:unset!important}}&.finished span.past-mistake{color:#f66}span,.current-char{position:relative}.current-char+span:after{content:"";position:absolute;display:inline-block;bottom:-4px;left:0;height:100%;width:100%;margin-right:-100%;background-color:#fff7;border-bottom:4px solid #fff}span:empty{background-color:#777}}}#modal_tablet .left img{transform:skewY(-10deg)}#modal_coke{.choice{display:flex;gap:8px;margin:8px;font-size:1.2rem;a{flex-grow:1;text-align:center}}.left img{transform:skew(-15deg);height:100px}}body.dark{filter:brightness(10%);.object,.hitbox{pointer-events:none}#hitbox_light_switch,#light_switch{opacity:1;pointer-events:all!important}}@media screen and (max-width: 1300px){header{scale:.5;transform-origin:bottom left}.modal_notebook{width:100vw;height:100vh;max-height:630px;font-size:3vmax;.decoration{display:none!important}}.modal_note{scale:.75}.modal_item{flex-direction:column-reverse;.left{justify-content:center;align-content:center;align-items:center;max-width:unset;width:100%;img{max-height:100px;max-width:100%;width:unset}}}#modal_keyboard{.left{width:unset;min-width:100%}img{margin:8px 0;width:180px}}.modal_pc{min-width:90vw;min-height:90vh}.typing-stats{display:none}}@media (max-width: 900px) or (max-height: 900px){.desk{translate:-50% -50%!important;overflow-x:hidden}}@media (max-height: 600px) or (max-width: 600px){#draw_notice{display:none!important}}body,html{background:var(--text-000);overflow-x:hidden;max-width:100vw;max-height:100vh}@media screen and (max-width: 1000px){body,html{max-height:unset!important}}header{z-index:99;position:fixed;bottom:2vmin;left:2vmin}.c{pointer-events:none}noscript{position:absolute;left:0;top:0;width:100vw;height:100vh;z-index:99999;padding:32px;text-align:center;background:#000;color:#fff}main{height:100vh;width:100vw;overflow-x:hidden}#loading_text{margin:auto;z-index:999;text-shadow:0 0 16px #000;transition:1s opacity ease-in-out}#start_notice{text-align:center;transition:.2s opacity ease-in-out;animation:.2s start-notice-appear ease-in-out;i{font-size:8rem}p{font-size:2rem;margin-top:2rem}}@keyframes start-notice-appear{0%{opacity:0}}.desk{position:absolute;transform-origin:center center;translate:-50% -50%;left:50%;top:50%;--parallax-x: 0;--parallax-y: 0;translate:calc(-50% + (var(--parallax-x) * 16px)) calc(-50% + (var(--parallax-y) * 16px))}.desk.loading{filter:blur(128px);pointer-events:none;opacity:.5}@keyframes desk-loaded{0%{filter:blur(128px);opacity:.5}to{filter:blur(0);opacity:1}}.desk img{position:absolute;font-size:3rem;filter:contrast(110%) drop-shadow(4px 4px 0 #f007) drop-shadow(-4px -4px 0 #0ff7)}#bg{filter:contrast(110%)}.hitbox{cursor:pointer;position:absolute;background:0;outline:0;border:0}.hitbox:hover+img,.hitbox:focus+img{filter:drop-shadow(6px 6px 0 #f00) drop-shadow(-6px -6px 0 #0ff);scale:1.05}.modal-container{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;background:#000a;z-index:999}.modal{margin:auto}