@font-face{font-family:Satoshi;src:url(/fonts/satoshi/Satoshi-Variable.ttf) format("truetype");font-weight:100 900;font-style:normal;font-display:swap}:root{font-size:13px;--color-text: #4a3728;--color-bg: #f5efe0;--color-link: #4a3728;--color-link-hover: #8b6914;--page-padding: 2rem}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{margin:0;color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-y:scroll;font-family:"Noto Serif SC","Source Han Serif SC",STSong,SimSun,serif}a{text-decoration:none;color:var(--color-link);outline:none;cursor:pointer;&:hover{text-decoration:none;color:var(--color-link-hover)}&:focus{outline:none;background:#d3d3d3;&:not(:focus-visible){background:transparent}&:focus-visible{outline:2px solid red;background:transparent}}}.frame{padding:1rem var(--page-padding);display:grid;z-index:1000;position:relative;grid-row-gap:1rem;grid-column-gap:2rem;pointer-events:none;justify-items:start;grid-template-columns:auto auto auto 1fr;grid-template-areas:"title title title title" "back archive github ..." "tags tags tags tags" "sponsor sponsor sponsor sponsor";#cdawrap{justify-self:start;grid-area:sponsor}a,button{pointer-events:auto}.frame__title{grid-area:title;font-size:inherit;margin:0;font-weight:700}.frame__back{grid-area:back;justify-self:start}.frame__archive{grid-area:archive;justify-self:start}.frame__github{grid-area:github}.frame__tags{grid-area:tags;display:flex;flex-wrap:wrap;gap:1rem}@media screen and (min-width:53em){grid-template-columns:auto auto auto auto 1fr;grid-template-rows:auto auto;align-content:space-between;grid-template-areas:"title back github archive demos" "tags tags tags sponsor sponsor";.frame__tags{align-self:end}.frame__title{padding-right:2rem}#cdawrap{justify-self:end;text-align:right;max-width:300px}}}#app{position:relative;z-index:10}#webgl{position:fixed;z-index:0;inset:0;pointer-events:none}#webgl.transitioning{z-index:100}h1{font-size:clamp(2rem,5vw,5rem);font-weight:400;text-transform:uppercase;line-height:100%;align-self:end;padding-bottom:1.5rem;padding-left:1rem}.container,.grid-container{display:flex;flex-direction:column}.grid{display:grid;padding:10vh var(--page-padding);column-gap:1rem;row-gap:30vh;grid-template-columns:repeat(9,1fr)}.grid__item{grid-column:var(--c) / span var(--s);grid-row:var(--r);aspect-ratio:var(--ar)}.grid__item p{padding-top:.5rem}.grid__item--svg .draw-animation-svg{width:100%;height:auto;display:block}.draw-path{stroke:#4a4948;stroke-width:2px;fill:none;stroke-linecap:round;stroke-linejoin:round}.container img{width:100%}.details{max-width:100%;padding:var(--page-padding)}.details header{padding-top:3vmax}.details-container{width:100%;height:100dvh;overflow:hidden}.details img{width:100%;height:100%;object-fit:cover}.details-data{display:grid;grid-template-columns:1fr auto auto auto;gap:2rem;padding-bottom:.5rem;align-items:end}[data-text-animation],[data-icon]{visibility:hidden}.related{container-type:inline-size;padding-top:40vh}.related p{text-align:center;padding-top:3rem}.relgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding:5rem var(--page-padding) 10vh;width:100%;max-width:800px;margin:0 auto}.relgrid__item{display:flex;flex-direction:column;text-decoration:none;color:inherit;overflow:hidden}.relgrid__item-img{width:100%;aspect-ratio:4 / 3;background-size:cover;background-position:center;filter:grayscale(1) brightness(.8);transition:all .5s ease}.relgrid__item:hover .relgrid__item-img{filter:grayscale(0) brightness(1)}.relgrid__item-title{padding:.5rem 0;font-size:1rem;font-weight:400;line-height:1.4}.relgrid__item:focus-visible{outline:2px solid #fff;outline-offset:4px}@container (max-width: 800px){.relgrid{grid-template-columns:1fr}.relgrid__item-img{display:none}.relgrid__item-title{padding:.25rem;line-height:1}}*,*:before,*:after{font-family:"Noto Serif SC","Source Han Serif SC",STSong,SimSun,serif!important}.vinyl{position:fixed;top:18px;left:18px;z-index:60;width:54px;height:54px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;opacity:.55;transition:opacity .3s ease,transform .3s ease}.vinyl:hover{opacity:1;transform:scale(1.06)}.vinyl-disc{position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,#211c16 0 1.5px,#2e2820 1.5px 3px);box-shadow:0 4px 14px #4a372859,inset 0 0 0 1px #fffdf71f;animation:vinyl-spin 5s linear infinite;animation-play-state:paused}.vinyl.is-playing .vinyl-disc{animation-play-state:running}.vinyl-label{position:absolute;inset:21%;border-radius:50%;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px #00000040}.vinyl-label:after{content:"";position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:50%;background:#f5efe0;transform:translate(-50%,-50%);box-shadow:0 0 0 1.5px #00000059}@keyframes vinyl-spin{to{transform:rotate(360deg)}}.intro-gate{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#f5efe0}.intro-gate-inner{display:flex;flex-direction:column;align-items:center;gap:1.6rem;padding:2rem}.intro-gate-vinyl{position:relative;width:92px;height:92px;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,#211c16 0 2px,#2e2820 2px 4.5px);box-shadow:0 10px 30px #4a372859,inset 0 0 0 1px #fffdf71f;animation:vinyl-spin 4s linear infinite}.intro-gate-vinyl-label{position:absolute;inset:24%;border-radius:50%;background-size:cover;background-position:center}.intro-gate-vinyl-label:after{content:"";position:absolute;top:50%;left:50%;width:7px;height:7px;border-radius:50%;background:#f5efe0;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #00000059}.intro-gate-title{font-family:"Noto Serif SC","Source Han Serif SC",STSong,SimSun,serif;font-weight:300;font-size:clamp(1.15rem,2.2vw,1.5rem);letter-spacing:.28em;color:var(--color-text)}.intro-gate-rule{width:64px;height:1px;background:linear-gradient(90deg,transparent,rgba(139,105,20,.5),transparent)}.intro-gate-play{font-family:"Noto Serif SC","Source Han Serif SC",STSong,SimSun,serif;font-size:1rem;letter-spacing:.18em;color:#fffdf7;background:#8b6914;border:none;border-radius:999px;padding:.85em 2.4em;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 8px 24px -8px #8b69148c}.intro-gate-play:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px #8b6914a6}.intro-gate-skip{font-family:"Noto Serif SC","Source Han Serif SC",STSong,SimSun,serif;font-size:.82rem;letter-spacing:.12em;color:#4a372880;background:none;border:none;border-bottom:1px solid rgba(74,55,40,.25);padding:0 2px 2px;cursor:pointer;transition:color .3s ease}.intro-gate-skip:hover{color:#4a3728cc}