.menu-frame { position: absolute; inset: 0; pointer-events: none; }
.menu-frame svg { position: absolute; max-width: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.menu-frame-top { top: 0; left: 5px; width: calc(100% - 10px); height: var(--space-4); }
.menu-frame-right { top: 7px; right: 0; width: var(--space-4); height: calc(100% - 14px); }
.menu-frame-bottom { bottom: 0; left: 5px; width: calc(100% - 12px); height: var(--space-4); }
.menu-frame-left { top: 3px; left: 0; width: var(--space-4); height: calc(100% - 7px); }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .menu-frame[data-motion="waiting"] path { opacity: 0; }
  .menu-frame[data-motion="playing"] path { stroke-dasharray: 1 2; animation: menu-frame-stroke cubic-bezier(.4, 0, .6, 1) backwards; animation-timing-function: var(--ease-pen-line); }
  .menu-frame[data-motion="playing"] .menu-frame-top path { animation-duration: .42s; }
  .menu-frame[data-motion="playing"] .menu-frame-right path { animation-duration: .72s; animation-delay: .42s; }
  .menu-frame[data-motion="playing"] .menu-frame-bottom path { animation-duration: .42s; animation-delay: 1.14s; }
  .menu-frame[data-motion="playing"] .menu-frame-left path { animation-duration: .72s; animation-delay: 1.56s; }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (min-width: 720px) {
  .menu-frame[data-motion="playing"] .menu-frame-top path { animation-duration: .56s; }
  .menu-frame[data-motion="playing"] .menu-frame-right path { animation-delay: .56s; }
  .menu-frame[data-motion="playing"] .menu-frame-bottom path { animation-duration: .56s; animation-delay: 1.28s; }
  .menu-frame[data-motion="playing"] .menu-frame-left path { animation-delay: 1.84s; }
}
@keyframes menu-frame-stroke { from { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } to { stroke-dashoffset: 0; } }