.site-header{flex-wrap:nowrap;gap:12px;padding-inline:max(16px,env(safe-area-inset-left),calc((100% - 1120px)/2)) max(16px,env(safe-area-inset-right),calc((100% - 1120px)/2))}
.site-header .brand{max-width:none;line-height:1.5;letter-spacing:0;min-width:0}
.site-header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.site-header .site-diagnose{font-size:.875rem;min-height:44px;padding:10px 16px;margin:0}
.site-menu-toggle,.site-menu-close{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border:1px solid var(--line);border-radius:14px;background:transparent;color:var(--brown);padding:0}
.site-menu-toggle:hover,.site-menu-close:hover{background:var(--beige-light)}
.site-menu-icon,.site-menu-icon:before,.site-menu-icon:after{width:20px;height:2px;background:currentColor;border-radius:2px;display:block}
.site-menu-icon{position:relative}.site-menu-icon:before,.site-menu-icon:after{content:"";position:absolute;left:0}.site-menu-icon:before{top:-6px}.site-menu-icon:after{top:6px}
.site-header [hidden]{display:none!important}
.site-menu{position:fixed;inset:0 0 0 auto;margin:0;width:min(420px,calc(100% - 24px));max-width:none;height:100%;height:100dvh;max-height:100%;border:0;border-left:1px solid var(--line);padding:0 24px max(24px,env(safe-area-inset-bottom));background:var(--paper);color:var(--brown);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;box-shadow:-8px 0 40px #263b3512}
.site-menu::backdrop{background:rgba(36,49,44,.24)}
.site-menu[open]{animation:site-menu-enter .16s ease-out}
.site-menu-top{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--paper);padding: max(16px,env(safe-area-inset-top)) 0 16px;z-index:1;border-bottom:1px solid var(--line)}
.site-menu-top h2{font-size:1rem;margin:0;font-weight:600}.site-menu-close{font-size:1.65rem;line-height:1}
.site-menu-group{margin:26px 0 0}.site-menu-group h3{font-size:.8125rem;color:var(--brown-soft);font-weight:500;letter-spacing:.08em;margin:0 12px 8px}
.site-menu-group a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;padding:10px 12px;border-radius:10px;text-decoration:none;font-size:1rem;line-height:1.6;overflow-wrap:anywhere}
.site-menu-group a span{color:var(--brown-soft);flex-shrink:0}.site-menu-group a:hover,.site-menu-group a:active{background:var(--beige-light)}
.site-menu-group a[aria-current=page]{background:var(--green-light);color:var(--green);font-weight:700}
.site-menu-group a:focus-visible,.site-menu-close:focus-visible{outline-offset:1px}
html.site-menu-open{overflow:hidden;overscroll-behavior:none}html.site-menu-open body{position:fixed;width:100%;overflow:hidden}
@media(max-width:700px){.site-header{padding-top:max(12px,env(safe-area-inset-top));padding-bottom:12px;min-height:70px}.site-header .brand{font-size:.875rem}.site-header-actions{gap:8px}.site-header .site-diagnose{padding-inline:12px}.site-menu{padding-inline:16px max(16px,env(safe-area-inset-right))}}
@media(max-width:350px){.site-header{gap:8px;padding-inline:12px}.site-header-actions{gap:6px}.site-header .site-diagnose{padding-inline:10px}}
@keyframes site-menu-enter{from{transform:translateX(16px);opacity:.6}to{transform:translateX(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.site-menu[open]{animation:none}}

.site-menu-studio{margin-top:28px;padding-top:16px;border-top:1px solid var(--line)}
.site-menu-studio a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:10px 12px;color:var(--brown-soft);font-size:.8125rem;line-height:1.6;text-decoration:none;border-radius:10px}
.site-menu-studio a:hover,.site-menu-studio a:active{background:var(--beige-light)}
.site-menu-studio a:focus-visible{outline-offset:1px}