@font-face {
  font-family: 'ScrollYa Menu';
  src: url('../fonts/SpaceGrotesk-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

html.sy-demo-root { --sy-demo-menu-height: 52px; scroll-padding-top: 68px; overscroll-behavior-y: contain; }
html.sy-demo-root body.sy-demo-page { margin: 0; padding-top: var(--sy-demo-menu-height); overscroll-behavior-y: contain; }
.sy-demo-menu { --sy-demo-accent: #d6cfff; position: fixed; z-index: 10000; inset: 0 0 auto; height: var(--sy-demo-menu-height); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 12px; box-sizing: border-box; background: #0b0c10; border-bottom: 1px solid #ffffff1a; color: #f5f3f7; font-family: 'ScrollYa Menu'; }
.sy-demo-menu[data-story='abyss'] { --sy-demo-accent: #75f6e3; }
.sy-demo-menu[data-story='beyond'] { --sy-demo-accent: #d9ff43; }
.sy-demo-menu .sy-demo-brand { color: #f5f3f7; font-size: 17px; font-weight: 700; letter-spacing: -.065em; line-height: 1; text-decoration: none; white-space: nowrap; }
.sy-demo-menu ul { display: flex; align-items: center; gap: 3px; padding: 0; margin: 0; list-style: none; }
.sy-demo-menu li { margin: 0; padding: 0; }
.sy-demo-menu li a { display: block; padding: 9px 8px; border-radius: 6px; color: #b3b3c0; font-size: 11px; font-weight: 600; letter-spacing: .025em; line-height: 1; text-decoration: none; white-space: nowrap; }
.sy-demo-menu li a[aria-current='page'] { color: var(--sy-demo-accent); background: color-mix(in srgb, var(--sy-demo-accent) 12%, transparent); }
.sy-demo-menu li a:hover { color: #fff; background: #ffffff12; }
.sy-demo-menu a:focus-visible { outline: 2px solid var(--sy-demo-accent); outline-offset: 3px; }
body.sy-demo-forma .forma-scene [data-sy-layer] { padding-top: 80px; }

@media (max-width: 767px) {
  html.sy-demo-root { --sy-demo-menu-height: 60px; scroll-padding-top: 76px; }
  .sy-demo-menu { gap: 8px; padding-inline: 12px; }
  .sy-demo-menu .sy-demo-brand { display: inline-flex; align-items: center; min-height: 44px; font-size: 19px; }
  .sy-demo-menu ul { gap: 2px; }
  .sy-demo-menu li a { display: flex; align-items: center; min-height: 44px; padding: 12px 9px; font-size: 14px; letter-spacing: 0; }
}

@media (min-width: 768px) {
  html.sy-demo-root { --sy-demo-menu-height: 56px; scroll-padding-top: 72px; }
  .sy-demo-menu { padding-inline: 28px; }
  .sy-demo-menu .sy-demo-brand { font-size: 20px; }
  .sy-demo-menu ul { gap: 6px; }
  .sy-demo-menu li a { padding: 10px 13px; font-size: 12px; }
}