/* Common page frame and navigation for every page. Load after page styles. */
:root{--page-width:1180px;--page-gutter:clamp(1.25rem,4vw,3rem)}
.page,.page.build-page{width:min(var(--page-width),100%);max-width:var(--page-width);min-height:100svh;margin:0 auto;padding:max(1.25rem,env(safe-area-inset-top)) max(var(--page-gutter),env(safe-area-inset-right)) max(1.25rem,env(safe-area-inset-bottom)) max(var(--page-gutter),env(safe-area-inset-left));display:flex;flex-direction:column}
.content-page{width:100%;max-width:none}
.page>header{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:2.7rem;padding:.35rem 0;animation:none}
.icon-button[data-menu-toggle]{width:2rem;height:2rem;min-width:2rem;min-height:2rem;flex:0 0 2rem;padding:0;line-height:0;display:grid;place-items:center;border:1px solid var(--line);border-radius:.9rem;color:var(--text);background:rgba(255,255,255,.07);font:inherit;cursor:pointer;transition:.25s;text-decoration:none}
.icon-button[data-menu-toggle]:hover,.icon-button[data-menu-toggle]:focus-visible{border-color:rgba(167,139,250,.75);background:rgba(167,139,250,.18);transform:translateY(-2px);outline:none}
.icon-button .hamburger-icon{width:1.15rem;height:1rem;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch}
.icon-button .hamburger-icon i{display:block;width:100%;height:2px;border-radius:999px;background:#f7f7ff;flex:none}
.menu{position:fixed;inset:0;z-index:10;display:grid;place-items:start;padding:4rem 0 0;background:rgba(9,11,26,.72);backdrop-filter:none;opacity:0;pointer-events:none;transition:opacity .25s}
.menu.is-open{opacity:1;pointer-events:auto}
.menu-panel{width:min(20rem,calc(100vw - 2.5rem));margin-left:calc(max(0px,(100vw - var(--page-width))/2) + max(var(--page-gutter),env(safe-area-inset-left)));padding:.75rem;border:1px solid var(--line);border-radius:1.25rem;background:rgba(22,24,50,.97);backdrop-filter:blur(16px);box-shadow:0 1.5rem 5rem rgba(0,0,0,.35);transform:translateY(-1rem);transition:transform .25s}
.menu.is-open .menu-panel{transform:translateY(0)}
.menu-link{display:block;padding:1rem 1.1rem;border-radius:.85rem;color:var(--text);text-decoration:none;font-size:1rem;transition:.25s}
.menu-link:hover,.menu-link:focus-visible{background:rgba(167,139,250,.16);outline:none}
@media(max-width:720px){:root{--page-gutter:1.1rem}}
@media(prefers-reduced-motion:reduce){.icon-button,.menu,.menu-panel,.menu-link{transition:none}}