.bone-menu-toggle {
  position: fixed; top: max(22px, env(safe-area-inset-top)); right: max(26px, env(safe-area-inset-right));
  width: 56px; height: 112px; padding: 0; border: 0; border-radius: 30px;
  background: #111; color: white; z-index: 30; cursor: pointer;
  box-shadow: inset 0 0 0 1px #ffffff16, 0 8px 24px #00000014;
}
.bone-menu-lamp { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.menu-bone { position: absolute; width: 29px; height: 16px; top: 8px; animation: bone-drop var(--duration) ease-in-out infinite; animation-delay: var(--delay); }
.menu-bone svg { display: block; width: 100%; height: 100%; transform: rotate(var(--tilt)); filter: drop-shadow(0 1px 2px #0003); }
.bone-menu-caption { position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%); font: 700 9px/1 system-ui; letter-spacing: .14em; color: #53554f; }
.bone-menu-toggle:focus-visible { outline: 2px solid #53554f; outline-offset: 6px; }
@keyframes bone-drop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(78px); } }
.bone-menu-dialog { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 20px; border: 0; background: transparent; color: #373937; }
.bone-menu-dialog::backdrop { background: #22232166; backdrop-filter: blur(6px); }
.bone-menu-card { width: min(430px, 100%); margin-left: auto; padding: 30px; border-radius: 26px; background: #f5f4ef; box-shadow: 0 24px 80px #0002; max-height: calc(100svh - 40px); overflow: auto; }
.bone-menu-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 40px; }
.bone-menu-top strong { font: 900 28px/1 system-ui; letter-spacing: -.075em; }
.bone-menu-close { width: 42px; height: 42px; border: 1px solid #37393730; border-radius: 50%; background: transparent; color: inherit; font-size: 26px; cursor: pointer; }
.bone-menu-nav { display: grid; gap: 4px; }
.bone-menu-nav a { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #37393720; color: inherit; text-decoration: none; font: 750 clamp(25px,4vw,38px)/1.1 system-ui; letter-spacing: -.045em; }
.bone-menu-nav a:hover { color: #168b78; }
.bone-menu-nav a:focus-visible, .bone-menu-close:focus-visible { outline: 2px solid #168b78; outline-offset: 4px; }
.bone-menu-note { margin: 30px 0 0; font: 600 11px/1.5 system-ui; letter-spacing: .1em; text-transform: uppercase; }
@media(max-width:600px) { .bone-menu-toggle { width: 50px; height: 100px; right: 18px; top: 18px; } .menu-bone { width: 25px; } @keyframes bone-drop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(66px); } } }
@media(prefers-reduced-motion:reduce) { .menu-bone { animation: none; top: var(--rest); } }