body{&>header{z-index:100;padding:var(--nada-space-4) var(--nada-space-3);border-bottom:1px solid oklch(from var(--nada-color-neutral-300) l c h / .4);background:oklch(from var(--nada-color-neutral-700) l c h / .7);backdrop-filter:blur(12px);position:sticky;top:0;& h1{color:oklch(from var(--nada-color-light) l c h / .9);opacity:.8;font-size:24px;font-weight:800}}}body:has(input#menu-button:checked){overflow:hidden}aside#freki-floating-menu{z-index:2000;position:fixed;top:0;right:0;&:has(label input:checked){background:oklch(from var(--nada-color-neutral-100) l c h / 10%);backdrop-filter:blur(3px);width:100%;height:100%}& label{z-index:100;width:auto;font-size:var(--nada-space-4);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-self:flex-end;margin-right:1.5rem;position:absolute;top:5rem;right:0;& div.icon{font-size:var(--nada-space-4);width:1.75rem;height:1.75rem;color:oklch(from var(--nada-color-neutral-300) l c h / 70%);background:oklch(from var(--nada-color-neutral-900) l c h / 30%);border-radius:var(--nada-radius-sm);padding:var(--nada-space-2);justify-content:center;align-items:center;display:flex;font-family:var(--nada-font-mono)!important}&:active div.icon{color:oklch(from var(--nada-color-base-50) l c h / 90%);background:oklch(from var(--nada-color-base-400) l c h / 90%)}&:has(input:checked) div.icon{color:oklch(from var(--nada-color-neutral-100) l c h / 90%);background:oklch(from var(--nada-color-base-500) l c h / 40%)}}@media (hover:hover) and (pointer:fine){& label{&:hover div.icon{color:oklch(from var(--nada-color-neutral-200) l c h / 90%);background:oklch(from var(--nada-color-neutral-900) l c h / 70%)}}}& nav{z-index:50;user-select:none;min-width:280px;padding:var(--nada-space-3) 0;border:1px solid oklch(var(--nada-color-neutral-300) l c h / 50%);background:oklch(from var(--nada-color-neutral-900) l c h / 80%);border-radius:var(--nada-radius-sm);backdrop-filter:blur(12px);max-height:75vh;position:absolute;top:9rem;right:1.5rem;overflow-y:auto;& ul{& li{padding-left:var(--nada-space-4)}& a{color:var(--nada-color-neutral-200);padding:var(--nada-space-1);border-radius:.25rem;text-decoration:none;transition:color .2s,background-color .2s;display:block;&:active{color:var(--nada-color-base-200)}}@media (hover:hover) and (pointer:fine){& a:hover{color:var(--nada-color-base-300)}}& details{& summary{cursor:pointer;color:var(--nada-color-neutral-100);margin-bottom:.25rem;margin-bottom:var(--nada-space-2);font-weight:900;list-style:none;padding:0!important}@media (hover:hover) and (pointer:fine){& summary:hover{color:var(--nada-color-base-200)}}& ul{padding-left:var(--nada-space-2);margin-bottom:.25rem;margin-top:var(--nada-space-2);padding:.5rem .75rem}}}}}@media (width<=640px){aside#freki-floating-menu{bottom:0;& label{bottom:5rem;& div.icon{width:3rem;height:3rem;font-size:var(--nada-space-7);color:oklch(from var(--nada-color-neutral-100) l c h / 80%)}}@media (hover:hover) and (pointer:fine){& label:hover div.icon{color:oklch(from var(--nada-color-neutral-50) l c h / 90%)}}& nav{width:calc(100vw - 3rem);bottom:9rem}}}footer#freki-navigation-footer{& nav{margin-top:var(--nada-space-12);gap:var(--nada-space-4);overflow-wrap:break-word;flex-wrap:wrap;& a{text-decoration:none;& button{justify-content:space-between;align-items:center;gap:var(--nada-space-3);padding:var(--nada-space-4) var(--nada-space-4);border-radius:var(--nada-radius);cursor:pointer;background-color:var(--nada-color-neutral-200);color:var(--nada-color-neutral-200);background:oklch(from var(--nada-color-neutral-800) l c h / 40%);backdrop-filter:blur(12px);border:none;border:1px solid oklch(from var(--nada-color-neutral-200) l c h / 40%);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:1rem;font-weight:600;text-decoration:none;transition:all .2s;display:flex;& span.icon{opacity:.5;line-height:1;font-size:var(--nada-space-8);align-items:center;padding:0;display:flex;font-family:var(--nada-font-mono)!important}&:active{border-color:var(--nada-color-base-400);& span.icon{color:var(--nada-color-base-200)}}}@media (hover:hover) and (pointer:fine){& button:hover{border-color:var(--nada-color-neutral-400);color:var(--nada-color-light);& span.icon{opacity:.9}}}}}}@media (width<=640px){footer#freki-navigation-footer{z-index:1000;margin-left:1.5rem;position:fixed;bottom:5rem;left:0;& nav{& a{& button{justify-content:center;width:3rem;height:3rem;padding:0;& span.text{display:none}& span.icon{opacity:.7;color:var(--nada-color-neutral-100)}}}}}}