@font-face { font-family: "NaN SuperX"; src: url("/assets/fonts/NaNSuperXSansDisplay-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }

@font-face { font-family: "NaN SuperX"; src: url("/assets/fonts/NaNSuperXSansDisplay-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: block; }

@font-face { font-family: "NaN SuperX"; src: url("https://www.vuyanziglorious.com/uploads/NaNSuperXSansDisplay-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: block; }

@font-face { font-family: Nohemi; src: url("https://www.vuyanziglorious.com/uploads/Nohemi-Light.woff2") format("woff2"), url("https://www.vuyanziglorious.com/uploads/Nohemi-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; }

@font-face { font-family: Nohemi; src: url("/assets/fonts/Nohemi-Regular.woff2") format("woff2"), url("https://www.vuyanziglorious.com/uploads/Nohemi-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }

@font-face { font-family: Nohemi; src: url("/assets/fonts/Nohemi-Medium.woff2") format("woff2"), url("https://www.vuyanziglorious.com/uploads/Nohemi-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }

@font-face { font-family: Nohemi; src: url("https://www.vuyanziglorious.com/uploads/Nohemi-SemiBold.woff2") format("woff2"), url("https://www.vuyanziglorious.com/uploads/Nohemi-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }

@font-face { font-family: Nohemi; src: url("/assets/fonts/Nohemi-Bold.woff2") format("woff2"), url("https://www.vuyanziglorious.com/uploads/Nohemi-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: "Nohemi Fallback"; src: local("Arial"); size-adjust: 107.6%; ascent-override: 74%; descent-override: 19%; line-gap-override: 0%; }

@font-face { font-family: "NaN SuperX Fallback"; src: local("Arial"); size-adjust: 99.3%; ascent-override: 88%; descent-override: 16%; line-gap-override: 0%; }

:root { --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --grid-gutter: var(--space-6); --radius-md: 0.5rem; --radius-xl: 0.75rem; }

.navroot { --rail-pad: 19.25px; --chip-pad-x: 10px; --frame-x: clamp(16px,1.4vw,20px); --frame-top: clamp(16px,2vh,20px); --frame-bottom: clamp(16px,2vh,20px); --type-caption: 700 14px/20px 'Nohemi','Nohemi Fallback',Helvetica,Arial,sans-serif; --type-body: 400 18px/28px 'NaN SuperX','NaN SuperX Fallback',Helvetica,Arial,sans-serif; --type-ui: 600 16px/24px 'NaN SuperX','NaN SuperX Fallback',Helvetica,Arial,sans-serif; --type-nav: 500 14px/20px 'Nohemi','Nohemi Fallback',Helvetica,Arial,sans-serif; --type-nav-sub: 500 14px/20px 'Nohemi','Nohemi Fallback',Helvetica,Arial,sans-serif; position: fixed; inset: 0px; z-index: 6; pointer-events: none; font-family: "NaN SuperX", "NaN SuperX Fallback", Helvetica, Arial, sans-serif; color: rgb(36, 36, 36); }

.rail { position: absolute; left: var(--frame-x,20px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 20px; width: var(--nav-w,210px); }

.brandbadge { position: fixed; top: var(--frame-top,80px); left: var(--frame-x,20px); z-index: 2; display: flex; align-items: center; text-decoration: none; pointer-events: auto; user-select: none; }

.brandbadge img { display: block; height: 38px; width: auto; -webkit-user-drag: none; transition: transform .1s var(--ease,ease); }

.brandbadge:active img { transform: scale(0.97); }

.brandbadge:focus-visible { outline: rgb(36, 36, 36) solid 2px; outline-offset: 3px; border-radius: 4px; }

.brandbadge::after { content: ""; position: absolute; inset: -7px -8px; }

@media (min-width: 1280px) {
  .brandbadge img { height: 54px; }
}

.thesis { pointer-events: none; padding-left: calc(var(--rail-pad) + var(--chip-pad-x)); }

.thlbl { margin: 0px; width: max-content; max-width: 100%; font-family: Nohemi, "Nohemi Fallback", Helvetica, Arial, sans-serif; font-size: 10px; line-height: 14px; text-transform: uppercase; letter-spacing: 0.08em; text-align: left; color: rgb(36, 36, 36); white-space: nowrap; }

.thbold { font-weight: 700; }

.thcore { color: rgb(36, 36, 36); }

.thlight { font-weight: 300; }

.ntrk { position: relative; display: flex; flex-direction: column; gap: 4px; padding-left: var(--rail-pad); }

.tdot { position: absolute; left: 3px; top: 0px; width: 6px; height: 6px; border-radius: 50%; background: rgb(36, 36, 36); z-index: 2; transform-origin: center center; pointer-events: none; }

.chip { position: relative; align-self: flex-start; display: inline-flex; align-items: center; padding: 5px var(--chip-pad-x); font: var(--type-nav); letter-spacing: 0.01em; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: var(--radius-md); overflow: hidden; background: none; color: rgb(36, 36, 36); text-decoration: none; pointer-events: auto; transition: background .25s var(--ease-out-quint,cubic-bezier(.22,1,.36,1)),color .25s var(--ease-out-quint,cubic-bezier(.22,1,.36,1)); }

.chip:hover { color: rgb(36, 36, 36); }

.chip.on { background: rgb(36, 36, 36); color: rgb(255, 255, 255); font-weight: 500; backdrop-filter: none; }

@keyframes pillin { 
  0% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

.chip.on, .subchip.on { animation: pillin .25s var(--ease-out-quint,cubic-bezier(.22,1,.36,1)); }

.chip:focus-visible { outline: none; }

.workrow { display: flex; flex-direction: column; gap: 0px; }

.subwrap { overflow: hidden; max-height: 0px; display: flex; flex-direction: column; gap: 4px; padding-left: var(--space-4); transition: max-height .3s var(--ease,ease),margin-top .3s var(--ease,ease); }

.subwrap.open { max-height: 420px; margin-top: var(--space-1); }

.subchip { position: relative; align-self: flex-start; display: inline-flex; align-items: center; padding: 3px 8px; font: var(--type-nav-sub); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: var(--radius-md); overflow: hidden; background: none; color: rgb(36, 36, 36); text-decoration: none; pointer-events: auto; transition: background .25s var(--ease-out-quint,cubic-bezier(.22,1,.36,1)),color .25s var(--ease-out-quint,cubic-bezier(.22,1,.36,1)); }

.subchip:hover { color: rgb(36, 36, 36); }

.subchip.on { background: rgb(36, 36, 36); color: rgb(255, 255, 255); font-weight: 500; backdrop-filter: none; }

.subchip:focus-visible { outline: none; }

.chip::after { content: ""; position: absolute; inset: -9px -4px; }

.subchip::after { content: ""; position: absolute; inset: -12px -4px; }

.chip .t, .subchip .t { position: relative; z-index: 1; }

.chip .bsfill, .subchip .bsfill { color: var(--brush-color,#F1BE48); }

.subchip .bsfill { height: 5px; bottom: -1px; }

.chip:hover .bsfill, .chip:focus-visible .bsfill, .subchip:hover .bsfill, .subchip:focus-visible .bsfill { clip-path: inset(0px); transition: clip-path .35s var(--ease-brush-draw,cubic-bezier(.2,.7,.3,1)); }

.navroot.mob .chip .bsfill, .navroot.mob .subchip .bsfill { display: none; }

@supports ((-webkit-backdrop-filter:blur(13px)) or (backdrop-filter:blur(13px))) {
  .chip::before, .subchip::before { display: none; }
  .chip.on::before, .subchip.on::before { display: none; }
  .navroot.mob .chip::before, .navroot.mob .subchip::before { display: none; }
}

.toast { position: fixed; left: 50%; bottom: var(--frame-bottom,40px); transform: translateX(-50%) translateY(6px); background: rgb(36, 36, 36); color: rgb(255, 255, 255); font: var(--type-ui); padding: 8px 16px; border-radius: 4px; opacity: 0; pointer-events: none; white-space: nowrap; z-index: 7; transition: opacity .3s var(--ease,ease),transform .3s var(--ease,ease); }

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0px); }

.navroot.mob .thesis { display: none; }

.navroot.mob .rail { gap: 0px; width: auto; left: calc(var(--frame-x,20px) - 14.8px); }

.navroot.mob .ntrk { gap: 0px; padding-left: 0px; }

.navroot.mob .tdot { display: none; }

.navroot.mob .chip { width: 44px; height: 44px; padding: 0px; background: none; box-shadow: none; backdrop-filter: none; color: transparent; font-size: 0px; justify-content: center; position: relative; }

.navroot.mob .subwrap { padding-left: 0px; }

.navroot.mob .subchip { width: 44px; height: 34px; padding: 0px; background: none; box-shadow: none; backdrop-filter: none; color: transparent; font-size: 0px; justify-content: center; position: relative; }

.btn-sec, .cta.navcta { position: relative; overflow: hidden; align-items: center; justify-content: center; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: var(--radius-md); font: 500 14px / 20px Nohemi, "Nohemi Fallback", Helvetica, Arial, sans-serif; letter-spacing: 0.02em; padding: 13px 18px; pointer-events: auto; -webkit-tap-highlight-color: transparent; }

.btn-sec { display: inline-flex; }

.btn-sec { background: var(--btn-fill,#F1BE48); color: var(--btn-ink,#242424); }

.cta.navcta { background: var(--btn-fill,#242424); color: var(--btn-ink,#FFFFFF); }

.btn-sec:focus-visible, .cta.navcta:focus-visible { outline: none; }

.btn-sec::after, .cta.navcta::after { content: ""; position: absolute; inset: 0px; z-index: 3; pointer-events: none; border-radius: var(--radius-md); opacity: 0; }

.btn-sec:focus-visible::after, .cta.navcta:focus-visible::after { opacity: 1; }

.bsfill, .cta.navcta .bfill { position: absolute; left: -4px; right: -4px; bottom: -2px; height: 6px; z-index: -1; clip-path: inset(0px 100% 0px 0px); transition: clip-path .2s var(--ease-brush-retract,cubic-bezier(.4,0,.6,1)); }

.bsfill { color: var(--btn-brush,#242424); }

.cta.navcta .bfill { color: var(--btn-brush,#F1BE48); }

.btn-sec.tap .bsfill { clip-path: inset(0px); transition: clip-path .35s var(--ease-brush-draw,cubic-bezier(.2,.7,.3,1)); }

.bsfill svg, .cta.navcta .bfill svg { display: block; width: 100%; height: 100%; }

.bsfill path, .cta.navcta .bfill path { fill: currentcolor; }

.navcta { display: none; z-index: 8; }

.navcta.navcta { position: fixed; top: var(--frame-top,20px); right: var(--frame-x,20px); bottom: auto; left: auto; }

a.navcta, a.navcta:link, a.navcta:visited { text-decoration: none; }

@media (min-width: 800px) {
  .navcta { display: inline-flex; }
}

@media (min-width: 800px) {
  .brandbadge { transform-origin: left top; }
  .navcta.navcta { transform-origin: right top; }
}

.readprog { position: fixed; left: 0px; right: 0px; top: calc(var(--header-clearance,96px) - 2px); height: 2px; z-index: 3; pointer-events: none; background: rgb(241, 190, 72); transform-origin: 0px 50%; transform: scaleX(0); }

@media (max-width: 799px) {
  .readprog { left: calc(var(--frame-x,16px) + 16px); right: calc(var(--frame-x,16px) + 16px); }
}

.iconbtn { appearance: none; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; margin: 0px; padding: 0px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; pointer-events: auto; color: rgb(36, 36, 36); -webkit-tap-highlight-color: transparent; border-radius: 8px; }

.iconbtn svg { display: block; width: 24px; height: 24px; }

.iconbtn path { fill: currentcolor; }

.iconbtn:focus-visible { outline: rgb(36, 36, 36) solid 2px; outline-offset: 2px; }

.menubtn { position: fixed; top: var(--frame-top,80px); right: var(--frame-x,20px); z-index: 8; display: none; }

.mn-ov { position: fixed; inset: 0px; z-index: 9; background: rgb(255, 255, 255); opacity: 0; visibility: hidden; pointer-events: none; display: flex; flex-direction: column; transition: opacity .4s var(--ease,ease),visibility .4s var(--ease,ease); }

.mn-ov.open { opacity: 1; visibility: visible; pointer-events: auto; }

.navroot.menuopen { z-index: 9999; }

.mn-close { position: fixed; top: var(--frame-top,80px); right: var(--frame-x,20px); z-index: 10; display: flex; }

.mn-inner { flex: 1 1 auto; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; overflow: hidden auto; padding: calc(var(--frame-top,20px) + 64px) var(--frame-x,20px) calc(var(--frame-bottom,20px) + 8px); }

.mn-links { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }

.mn-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }

.mn-link { position: relative; display: inline-flex; align-items: center; color: rgb(36, 36, 36); text-decoration: none; font: 500 clamp(30px, 8vw, 44px) / 1.12 Nohemi, "Nohemi Fallback", Helvetica, Arial, sans-serif; letter-spacing: -0.015em; padding: 2px 0px; pointer-events: auto; --brush-color: #F1BE48; -webkit-tap-highlight-color: transparent; transition: transform .35s var(--ease-brush-draw,cubic-bezier(.2,.7,.3,1)); }

.mn-link .t { position: relative; z-index: 1; }

.mn-link:hover { transform: translateX(10px); }

.mn-link:focus-visible { outline: none; }

.mn-link .bstroke-lg { position: absolute; left: -6px; right: -6px; bottom: 0.08em; height: 0.78em; z-index: 0; color: var(--brush-color,#F1BE48); clip-path: inset(0px 100% 0px 0px); transition: clip-path .2s var(--ease-brush-retract,cubic-bezier(.4,0,.6,1)); }

.mn-link:hover .bstroke-lg, .mn-link:focus-visible .bstroke-lg { clip-path: inset(0px); transition: clip-path .35s var(--ease-brush-draw,cubic-bezier(.2,.7,.3,1)); }

.mn-link .bstroke-lg svg { display: block; width: 100%; height: 100%; }

.mn-link .bstroke-lg path { fill: currentcolor; }

.mn-sub { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 2px 0px 6px; padding-left: clamp(20px, 6vw, 28px); }

.mn-sublink { position: relative; display: inline-flex; align-items: center; color: rgb(36, 36, 36); text-decoration: none; font: 500 clamp(19px, 5.4vw, 22px) / 1.3 Nohemi, "Nohemi Fallback", Helvetica, Arial, sans-serif; letter-spacing: -0.01em; padding: 2px 0px; pointer-events: auto; --brush-color: #F1BE48; -webkit-tap-highlight-color: transparent; transition: transform .35s var(--ease-brush-draw,cubic-bezier(.2,.7,.3,1)); }

.mn-sublink::after { content: ""; position: absolute; inset: -7px -8px; }

.mn-sublink .t { position: relative; z-index: 1; }

.mn-sublink:hover { transform: translateX(8px); }

.mn-sublink:focus-visible { outline: none; }

.mn-sublink .bstroke-lg { position: absolute; left: -4px; right: -4px; bottom: 0.1em; height: 0.65em; z-index: 0; color: var(--brush-color,#F1BE48); clip-path: inset(0px 100% 0px 0px); transition: clip-path .2s var(--ease-brush-retract,cubic-bezier(.4,0,.6,1)); }

.mn-sublink:hover .bstroke-lg, .mn-sublink:focus-visible .bstroke-lg { clip-path: inset(0px); transition: clip-path .35s var(--ease-brush-draw,cubic-bezier(.2,.7,.3,1)); }

.mn-sublink .bstroke-lg svg { display: block; width: 100%; height: 100%; }

.mn-sublink .bstroke-lg path { fill: currentcolor; }

.mn-foot { margin-top: auto; display: flex; padding-top: 40px; color: rgb(36, 36, 36); --brush-color: #F1BE48; }

@keyframes mnrise { 
  0% { opacity: 0; transform: translateY(12px); }
}

.mn-ov.open .mn-nav > * { animation: mnrise .45s var(--ease-out-quint,cubic-bezier(.22,1,.36,1)) backwards; }

.mn-ov.open .mn-nav > :nth-child(1) { animation-delay: 60ms; }

.mn-ov.open .mn-nav > :nth-child(2) { animation-delay: 95ms; }

.mn-ov.open .mn-nav > :nth-child(3) { animation-delay: 130ms; }

.mn-ov.open .mn-nav > :nth-child(4) { animation-delay: 165ms; }

.mn-ov.open .mn-nav > :nth-child(5) { animation-delay: 200ms; }

.mn-ov.open .mn-nav > :nth-child(6) { animation-delay: 235ms; }

.mn-ov.open .mn-links > :not(.mn-nav) { animation: mnrise .45s var(--ease-out-quint,cubic-bezier(.22,1,.36,1)) 270ms backwards; }

.mn-ov.open .mn-foot { animation: mnrise .45s var(--ease-out-quint,cubic-bezier(.22,1,.36,1)) 300ms backwards; }

@media (prefers-reduced-motion: reduce) {
  .mn-ov.open .mn-nav > *, .mn-ov.open .mn-links > :not(.mn-nav), .mn-ov.open .mn-foot { animation: auto ease 0s 1 normal none running none; }
}

.navroot.norail .rail { display: none; }

@media (max-width: 799px) {
  .rail { display: none; }
  .toast { display: none; }
  .menubtn { display: flex; }
}

.bandsurf, .barsurf { --frame-x: clamp(16px,1.4vw,20px); --frame-top: clamp(16px,2vh,20px); position: fixed; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .2s var(--ease-sine,ease); }

.bandsurf { display: none; top: 0px; left: 0px; right: 0px; height: var(--header-clearance,calc(var(--frame-top,20px) + 78px)); mask-image: linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) calc(100% - 22px), transparent 100%); }

@media (min-width: 800px) {
  .bandsurf { display: block; }
}

.barsurf { display: none; top: var(--frame-top,16px); left: var(--frame-x,16px); right: var(--frame-x,16px); height: 44px; border-radius: 16px; transition: opacity .2s var(--ease-sine,ease),height .2s var(--ease-sine,ease); }

@media (max-width: 799px) {
  .barsurf { display: block; }
}

.bandsurf.solid, .barsurf.solid { opacity: 1; }

.barsurf.solid { height: 64px; }

@media (prefers-reduced-motion: reduce) {
  .bandsurf, .barsurf { transition: none; }
}

.mtopbar { display: contents; }

@media (max-width: 799px) {
  .mtopbar { display: flex; position: fixed; top: var(--frame-top,16px); left: var(--frame-x,16px); right: var(--frame-x,16px); z-index: 8; box-sizing: border-box; align-items: center; justify-content: flex-end; gap: 12px; padding: 0px; border-radius: 16px; transition: background-color .2s var(--ease,ease),padding .2s var(--ease,ease),-webkit-backdrop-filter .2s var(--ease,ease),backdrop-filter .2s var(--ease,ease); }
  .mtopbar.solid { padding: 10px 14px; }
  .brandbadge { position: relative; top: auto; left: auto; flex: 0 1 auto; min-width: 0px; transform: translateY(-7px); transition: transform .2s var(--ease,ease); }
  .mtopbar.solid .brandbadge { transform: none; }
  .brandbadge img { height: 30px; }
  .menubtn { position: static; top: auto; right: auto; flex: 0 0 auto; margin-right: 0px; transform: translate(10px, -10px); transition: transform .2s var(--ease,ease); }
  .mtopbar.solid .menubtn { transform: translate(4px, 0px); }
}

@media (max-width: 360px) {
  .mtopbar { gap: 8px; }
  .mtopbar.solid { padding: 10px 12px; }
  .brandbadge { transform: translateY(-8px); }
  .mtopbar.solid .brandbadge { transform: none; }
  .brandbadge img { height: 28px; }
}

.sndtog { position: fixed; left: var(--frame-x); bottom: var(--frame-bottom); z-index: 8; width: 44px; height: 44px; display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 12px 0px; box-sizing: border-box; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; pointer-events: auto; -webkit-tap-highlight-color: transparent; transition: transform .3s var(--ease,ease); }

.sndtog .bar { width: 2.5px; height: 18px; background: rgb(36, 36, 36); border-radius: 1.5px; transform-origin: center bottom; transform: scaleY(0.16); transition: transform .4s var(--ease,ease); }

.sndtog.playing .bar { animation: 1s ease-in-out 0s infinite normal none running eqbar; }

.sndtog.playing .bar:nth-child(1) { animation-duration: 0.72s; animation-delay: -0.2s; }

.sndtog.playing .bar:nth-child(2) { animation-duration: 0.96s; animation-delay: -0.5s; }

.sndtog.playing .bar:nth-child(3) { animation-duration: 0.64s; animation-delay: -0.1s; }

.sndtog.playing .bar:nth-child(4) { animation-duration: 1.1s; animation-delay: -0.35s; }

@keyframes eqbar { 
  0%, 100% { transform: scaleY(0.26); }
  50% { transform: scaleY(1); }
}

.sndtog:hover { transform: translateY(-2px); }

.sndtog:focus-visible { outline: rgb(36, 36, 36) solid 2px; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .sndtog .bar { animation: auto ease 0s 1 normal none running none !important; transform: scaleY(0.6) !important; }
}