nav{z-index:10;padding:var(--sup-4);box-sizing:border-box;height:100vh;padding-left:10vw;transition:transform .3s ease-in-out;position:fixed;overflow:hidden}@media (max-width:768px){nav{padding-top:var(--sup-3)}}nav .arrow{opacity:0;place-content:center;width:5vw;transition:opacity .3s ease-in-out;display:grid;position:absolute;right:0%}nav.default{transform:translate(0%)}nav.collapsed{border-right:1px solid var(--foreground);transform:translate(calc(5vw - 100%))}@media (max-width:768px){nav.collapsed{border-style:none;transform:translate(calc(7vw - 100%))}}nav.collapsed{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}nav.collapsed .arrow{opacity:1}nav.collapsed.expanded{transform:translate(0%)}nav.collapsed.expanded .arrow{opacity:0}nav.collapsed.expanded+main{transform:translateX(var(--sup-4))scale(.99);opacity:.2}nav ul{padding:0;list-style:none}nav ul .category{font-size:var(--sdw-1);margin-top:var(--sup-2);font-weight:700}nav ul>li ul li{margin:1rem var(--sup-1)}nav ul>li ul li a{padding:var(--sdw-2);box-sizing:border-box;line-height:130%;transition:color .2s cubic-bezier(1,0,0,1);display:block;position:relative}nav ul>li ul li a:before{content:"";z-index:-1;transform-origin:0;will-change:transform;background:var(--foreground);width:100%;height:100%;padding:0 var(--sup-1);margin-left:-1rem;transition:transform .1s cubic-bezier(1,0,0,1);position:absolute;top:0;left:0;transform:scaleX(.005)}nav ul>li ul li a:hover{color:var(--background)}nav ul>li ul li a:hover:before{transform:scaleX(1)}nav ul>li ul li a .title{font-weight:500}nav ul>li ul li a .caption{font-size:var(--sdw-1)}
:root{--ratio:1.618;--sup-1:round(1.618rem,1px);--sup-2:round(calc(var(--sup-1)*var(--ratio)),1px);--sup-3:round(calc(var(--sup-2)*var(--ratio)),1px);--sup-4:round(calc(var(--sup-3)*var(--ratio)),1px);--sup-5:round(calc(var(--sup-4)*var(--ratio)),1px);--sdw-1:round(.8rem,1px);--sdw-2:round(calc(var(--sdw-1)/var(--ratio)),1px);--sdw-3:round(calc(var(--sdw-2)/var(--ratio)),1px);--img-border-radius:var(--sdw-2);--abs-background:#ededed;--background:#fff;--foreground:#171717}@media (prefers-color-scheme:dark){:root{--abs-background:#000;--background:#050505;--foreground:#ededed}}::selection{color:var(--background);background-color:var(--foreground)}html{font-size:18px}@media (max-width:768px){html{font-size:16px}}body{color:var(--foreground);background:var(--abs-background);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;backface-visibility:hidden;margin:0;padding:0;font-family:DM Sans,sans-serif;line-height:round(160%,1px);transition:background-color 1s;position:relative;overflow-x:hidden}a{color:var(--foreground);text-decoration:none}header{z-index:11;font-weight:700;font-size:var(--sdw-1);text-transform:uppercase;letter-spacing:var(--sup-1);white-space:nowrap;margin:var(--sup-2)10vw;position:fixed}main{background:var(--background)repeat fixed;content-visibility:auto;transform-style:preserve-3d;backface-visibility:hidden;-webkit-overflow-scrolling:touch;transform-origin:100%;box-sizing:border-box;background-image:url(/img/bg.png);padding:10vh 10vw;transition:opacity .5s,background-color .8s,transform .5s cubic-bezier(.77,0,.175,1)}section{max-width:2560px}h1{font-size:var(--sup-5);text-transform:uppercase;margin:10vh 0;line-height:round(80%,1px)}@media (max-width:768px){h1{font-size:var(--sup-3)}}h2,h3,h4{margin:5vh 0;line-height:round(100%,1px)}h2{font-size:var(--sup-3)}@media (max-width:768px){h2{font-size:var(--sup-3)}}h3{font-size:var(--sup-2)}h4{font-size:var(--sup-1)}hr{border:0;border-top:1px solid var(--foreground);opacity:.2;margin:5vh 0}path{fill:var(--foreground)}p{max-width:720px}small{font-size:var(--sdw-1)}img,video{border-radius:var(--img-border-radius);height:auto;margin-top:10vh;animation:ease-out fade-in;animation-timeline:view();animation-range:entry}@keyframes fade-in{0%{opacity:0;transform:translateY(200px)scale(1.2)}to{opacity:1;transform:translateY(0)}}@media (prefers-color-scheme:dark){main{background-image:url(/img/bg-dark.png)}header{mix-blend-mode:difference}}
.card-btns{gap:var(--sdw-2);flex-wrap:wrap;padding:0;line-height:0;list-style:none;display:flex}.card-btns li{border:solid 1px var(--foreground);aspect-ratio:4/5;border-radius:var(--img-border-radius);place-items:center;width:200px;display:grid}@media (max-width:768px){.card-btns li{width:150px}}.card-btns li img{object-fit:cover;width:100%;height:100%}.card-btns li.non-link{border-color:var(--background)}.card-btns li.non-link:hover{box-shadow:none;filter:none}.block-btns{gap:var(--sdw-2);margin-top:var(--sup-2);grid-template-columns:1fr 1fr;display:grid}.block-btn{align-items:center;gap:var(--sup-2);border-radius:var(--img-border-radius);box-sizing:border-box;width:100%;box-shadow:inset 0 0 0 1px var(--foreground);text-transform:uppercase;margin-top:2vh;padding:3vw;font-weight:800;display:flex}.block-btn.normal-case{text-transform:none}.block-btn.reversed{justify-content:flex-end}.card-btns li,.block-btn{transition:box-shadow .15s ease-in-out,filter .15s ease-in-out}.card-btns li:hover,.block-btn:hover{box-shadow:inset 0 0 0 5px var(--foreground);filter:drop-shadow(0 10px 50px var(--foreground))}.versions{grid-template-columns:1fr 1fr;gap:5vw;padding:0;list-style:none;display:grid}@media (max-width:768px){.versions{grid-template-columns:1fr;gap:3vw}}.versions small{gap:40px;display:flex}.download-btns{gap:var(--sdw-2);margin-top:var(--sdw-2);flex-wrap:wrap;display:flex}.download-btn{font-size:var(--sdw-1);padding:var(--sdw-1)1rem;gap:var(--sdw-2);color:var(--foreground);white-space:nowrap;box-shadow:inset 0 0 0 1px var(--foreground);border-radius:50px;align-items:center;font-weight:500;line-height:0;transition:box-shadow .1s ease-in-out;display:inline-flex}.download-btn:hover{box-shadow:inset 0 0 0 3px var(--foreground)}.download-btn.filled{background:var(--foreground);color:var(--background)}.download-btn.filled path{fill:var(--background)}.download-btn.filled{box-shadow:0 0 0 1px var(--foreground)}.download-btn.filled:hover{box-shadow:0 0 0 3px var(--foreground)}.two-columns{grid-template-columns:1fr 1fr;gap:5vw;margin-top:10vh;display:grid}@media (max-width:768px){.two-columns{grid-template-columns:1fr}}.two-columns img{margin-top:5vh}.made-in{margin-top:5vw}