.glass{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.55em;border:0;border-radius:999px;padding:.85rem 2.4rem;cursor:pointer;text-decoration:none;font-weight:700;letter-spacing:.01em;--tint-hi: color-mix(in srgb, var(--x-hi) 88%, transparent);--tint-base: color-mix(in srgb, var(--x-base) 85%, transparent);--tint-lo: color-mix(in srgb, var(--x-lo) 83%, transparent);--tint-deep: color-mix(in srgb, color-mix(in srgb, var(--x-lo) 74%, black) 84%, transparent);--x-bloom: color-mix(in srgb, var(--x-base) 56%, transparent);--glint-tint: color-mix(in srgb, color-mix(in srgb, #c6ffe0 58%, white) 50%, transparent);--glass-bg: radial-gradient(ellipse 52% 70% at 76% -6%, rgba(255,255,240,.32) 0%, transparent 56%), linear-gradient(298deg, transparent 36%, rgba(255,255,255,.12) 48%, transparent 58%), radial-gradient(circle at 46% 62%, rgba(255,255,255,.42) 0%, transparent 4.2%), radial-gradient(circle at 38% 34%, rgba(240,255,248,.36) 0%, transparent 3.2%), radial-gradient(circle at 72% 12%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.49) 14%, rgba(255,255,255,0) 30%), linear-gradient(112deg, transparent 40%, rgba(255,255,255,.3) 45%, rgba(255,255,255,.06) 51%, transparent 55%, transparent 62%, rgba(198,255,238,.22) 68%, transparent 75%), radial-gradient(ellipse 34% 52% at 87% 10%, rgba(110,255,242,.2) 0%, transparent 58%), radial-gradient(ellipse 38% 50% at 80% 98%, rgba(255,110,245,.16) 0%, transparent 60%), radial-gradient(ellipse 78% 42% at 64% 108%, rgba(255,255,255,.38) 0%, rgba(255,255,255,.06) 45%, transparent 62%), radial-gradient(ellipse 100% 110% at 50% 50%, transparent 48%, color-mix(in srgb, var(--x-base) 42%, transparent) 86%, color-mix(in srgb, var(--x-lo) 52%, transparent) 100%), linear-gradient(180deg, var(--tint-hi) 0%, var(--tint-base) 46%, var(--tint-lo) 86%, var(--tint-deep) 100%);--glass-shadow: inset 0 -2px 4px rgba(255,255,255,.25), inset 0 3px 7px rgba(140,255,248,.18), inset 0 -5px 10px rgba(255,110,245,.18), inset 0 -8px 13px rgba(0,0,0,.28), inset 0 8px 11px rgba(255,255,255,.32), inset 0 0 2px 1px rgba(255,255,255,.42), 0 0 0 1px color-mix(in srgb, var(--x-lo) 55%, transparent), 0 3px 8px rgba(0,0,0,.24), 0 10px 20px -10px var(--x-bloom), 0 18px 34px -16px var(--x-bloom), 0 6px 14px -6px color-mix(in srgb, var(--x-hi) 45%, transparent);--glass-shadow-press: inset 0 -2px 3px rgba(255,255,255,.18), inset 0 -7px 12px rgba(0,0,0,.34), inset 0 12px 16px rgba(0,0,0,.24), inset 0 4px 7px rgba(255,255,255,.22), inset 0 0 3px 2px rgba(255,255,255,.38), 0 0 0 1px rgba(255,255,255,.2), 0 2px 6px rgba(0,0,0,.3), 0 9px 20px -8px var(--x-bloom), 0 15px 32px -12px var(--x-bloom), 0 5px 14px -4px color-mix(in srgb, var(--x-hi) 48%, transparent);--glass-shadow-focus: inset 0 -2px 4px rgba(255,255,255,.25), inset 0 8px 11px rgba(255,255,255,.32), inset 0 0 3px 2px rgba(255,255,255,.5), 0 0 0 3px rgba(255,255,255,.95), 0 0 0 6px color-mix(in srgb, var(--x-base) 62%, transparent), 0 12px 24px -10px var(--x-bloom), 0 7px 18px -6px color-mix(in srgb, var(--x-hi) 50%, transparent);background:var(--glass-bg);box-shadow:var(--glass-shadow);transition:transform .14s ease,box-shadow .3s ease,filter .14s ease}.glass-gold{--x-hi: #e2bb6d;--x-base: #c4933f;--x-lo: #97702a;color:#fff;text-shadow:0 1px 0 rgba(8,5,14,.85),0 -1px 0 rgba(8,5,14,.7),1px 0 0 rgba(8,5,14,.8),-1px 0 0 rgba(8,5,14,.8),1px 1px 0 rgba(8,5,14,.7),-1px 1px 0 rgba(8,5,14,.7),1px -1px 0 rgba(8,5,14,.6),-1px -1px 0 rgba(8,5,14,.6),0 2px 5px rgba(8,5,14,.55)}.glass-paper{--x-hi: #ffffff;--x-base: #ece5d8;--x-lo: #c9bda6;color:hsl(var(--warm-brown));text-shadow:0 1px 0 rgba(255,255,255,.75)}.glass-sm{--glass-shadow-sm: inset 0 -2px 3px rgba(255,255,255,.25), inset 0 2px 5px rgba(140,255,248,.2), inset 0 -4px 7px rgba(255,110,245,.16), inset 0 -5px 9px rgba(0,0,0,.26), inset 0 5px 8px rgba(255,255,255,.32), inset 0 0 1px 1px rgba(255,255,255,.38), 0 0 0 1px color-mix(in srgb, var(--x-lo) 60%, transparent), 0 1px 3px rgba(0,0,0,.28), 0 4px 9px -5px var(--x-bloom), 0 2px 5px -2px color-mix(in srgb, var(--x-hi) 40%, transparent);box-shadow:var(--glass-shadow-sm)}.glass:before{content:"";position:absolute;z-index:-1;left:28%;right:6%;top:9%;height:36%;border-radius:999px;background:linear-gradient(180deg,#ffffffb8,#ffffff08);pointer-events:none;transition:top .14s ease,height .14s ease,opacity .14s ease}.glass:after{content:"";position:absolute;inset:0;border-radius:999px;background:linear-gradient(108deg,transparent 38%,var(--glint-tint) 47%,transparent 56%);background-size:250% 100%;background-position:100% 0;opacity:0;mix-blend-mode:screen;pointer-events:none}.glass:hover{transform:translateY(-2px);filter:saturate(1.06) brightness(1.03)}.glass:active{transform:translateY(2px);filter:brightness(.97);box-shadow:var(--glass-shadow-press)}.glass:active:before{top:10%;height:34%;opacity:.78}.glass:focus-visible{outline:none;box-shadow:var(--glass-shadow-focus)}.glass .music-glyph{overflow:visible}.glass .music-glyph path{paint-order:stroke fill;stroke-linejoin:round}.glass-gold .music-glyph path{stroke:#08050ed1;stroke-width:105}.glass-paper .music-glyph path{stroke:#ffffffe6;stroke-width:90}.glass-gold svg:not(.music-glyph){filter:drop-shadow(1px 0 0 rgba(8,5,14,.8)) drop-shadow(-1px 0 0 rgba(8,5,14,.8)) drop-shadow(0 1px 0 rgba(8,5,14,.8)) drop-shadow(0 -1px 0 rgba(8,5,14,.8))}@media(prefers-reduced-motion:reduce){.glass{transition:none}.glass:hover,.glass:active{transform:none}}
