body{display:block flex;flex-direction:column;height:100dvh;background-color:var(--surface-color);transition:background-color .2s}body>header{--header-height: 2.5rlh;display:block flex;min-height:var(--header-height);max-height:var(--header-height);flex-direction:row-reverse;justify-content:space-between;align-items:center;padding:0 1dvw;border-bottom:1px solid var(--border-color);background-color:var(--surface-color);transition:background-color .2s;view-transition-name:none;>[aria-expanded]{width:1.5rlh;height:1.5rlh}}main{flex-grow:1;padding:0 1dvw;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border-color) transparent;scroll-behavior:smooth;view-transition-name:match-element}#main-menu{position:fixed;top:var(--header-height);right:0;z-index:1;display:block flex;flex-direction:column;box-sizing:border-box;min-width:20dvw;height:calc(100dvh - var(--header-height));padding:2dvh 2dvw 2dvh 1dvw;gap:.1rlh;overflow-y:auto;border-left:1px solid var(--border-color);background-color:var(--surface-color);scrollbar-width:thin;scrollbar-color:var(--border-color) transparent;translate:100%;transition:background-color .2s,translate .2s;view-transition-name:main-menu;>a,>.tool-box>a{color:var(--link-color);font-size:1.3rem;text-decoration:none;cursor:pointer;transition:color .2s;&:hover{color:var(--accent-color)}}>a{display:block flex;gap:.2rem;align-items:baseline}>.tool-box{flex-wrap:wrap}body:has([aria-controls=main-menu][aria-expanded=true]) &{translate:0}}button:has(+#main-menu){view-transition-name:main-menu-toggle}dialog{justify-self:center;align-self:center;max-width:80dvw;max-height:80dvh;padding:.6rem;border:1px solid var(--border-color);border-radius:8px;outline:none;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border-color) transparent}#background{position:fixed;top:0;left:0;width:100dvw;height:100dvh;z-index:-1}@view-transition{navigation:auto}:root{view-transition-name:none}::view-transition{pointer-events:none}::view-transition-image-pair(main-menu-toggle){animation-name:rotate}@keyframes rotate{0%{rotate:0deg}to{rotate:180deg}}