:root{font-family:'Instrument Sans',Arial,sans-serif;color:#fff;background:#111111;font-synthesis:none;color-scheme:dark;--ease:cubic-bezier(.2,.7,.2,1);--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--profile-width:640px;--profile-gutter:22px}
html{min-height:100%;overflow-x:clip}
body{min-height:100svh;min-height:100dvh;overflow-x:clip;overscroll-behavior-y:none}
#glass-root{min-height:100svh;min-height:100dvh;transition:opacity 760ms cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}body{margin:0;min-width:280px}button,a,input{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid white;outline-offset:6px}button{cursor:pointer}svg{display:block} [hidden]{display:none!important}
.backdrop{position:fixed;inset:0;background:url('./assets/rhyno-poster-cdn.webp?v=83a25724d443') center center/cover no-repeat;z-index:-3;transform:scale(1.025);transition:transform 1.2s var(--ease)}
.shade{position:fixed;inset:0;background:linear-gradient(180deg,rgba(4,9,24,.37),rgba(2,9,28,.25) 55%,rgba(2,9,28,.47));z-index:-2}
.stage{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:90px 22px;perspective:1200px}
.profile-card{position:relative;width:var(--profile-width);min-height:512px;padding:35px 30px 42px;border-radius:96px;border:1px solid rgba(168,190,255,.17);background:linear-gradient(150deg,rgba(36,58,222,.79),rgba(13,28,231,.81) 42%,rgba(8,38,104,.76) 83%,rgba(48,57,185,.79));backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);box-shadow:0 20px 90px #0018471a,inset 0 1px 0 #ffffff0b;text-align:center;transform:translateY(24px) scale(.985);transition:transform .8s var(--ease),box-shadow .5s;will-change:transform}
.identity{display:flex;align-items:center;flex-direction:column}.avatar{height:118px;width:118px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 28% 18%,#ebf0ff,#b8c6f8 65%,#8196e4);color:#2030a4;box-shadow:inset 0 0 0 1px #ffffff55,0 4px 35px #07165f26;overflow:hidden}.avatar span{font-size:83px;font-weight:700;letter-spacing:-8px;margin:-13px 6px 0 0}.avatar img{width:100%;height:100%;object-fit:cover}.name-wrap{margin-top:14px;position:relative;padding:0 12px;background:url('./assets/sparkle.gif?v=157a6bd87b0c') center/cover}.name-wrap h1{font-size:36px;line-height:1.4;font-weight:700;letter-spacing:-1.1px;margin:0;text-shadow:0 0 16px #ffffffaa;overflow-wrap:anywhere}.description{font-size:19px;font-weight:700;margin:3px 0 0;line-height:1.5}.domain{font-size:14px;display:flex;align-items:center;gap:6px;margin:15px 0 0;color:#f0f2ff;text-shadow:0 0 8px #ffffff99}.domain svg{height:15px;width:15px;filter:drop-shadow(0 0 4px #ffffff77)}
.contact-card{width:min(100%,384px);min-height:98px;margin:24px auto 0;padding:12px;display:flex;align-items:center;gap:12px;text-align:left;border-radius:999px;background:rgba(14,91,235,.26);border:1px solid #70a6ff12;box-shadow:inset 0 0 20px #3c81ff0a;transition:background .15s,transform .3s var(--ease),border-color .15s}.contact-card:hover{background:#2e72fb55;transform:translateY(-3px);border-color:#ffffff30}.contact-card:active{transform:scale(.98)}.contact-avatar{width:72px;height:72px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:linear-gradient(145deg,#e7edff,#8097ef);color:#2339ad}.contact-avatar span{font-size:30px;letter-spacing:-2px;font-weight:700}.contact-copy{min-width:0}.contact-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.contact-title strong{font-size:18px;line-height:1.4;overflow-wrap:anywhere}.platform{padding:2px 5px;background:#497cff33;border-radius:8px;font-size:12px;color:#e0e8ff}.contact-subtitle{display:block;font:14px/1.5 'Instrument Sans',Arial,sans-serif;color:#e3e9ff;margin-top:2px}.contact-arrow{width:18px;height:18px;flex-shrink:0;margin-left:auto;opacity:.65;transition:transform .2s}.contact-card:hover .contact-arrow{transform:translate(2px,-2px)}
.socials{margin:25px auto 0;display:flex;justify-content:center;align-items:center;gap:16px}.social-link{position:relative;width:44px;height:44px;display:grid;place-items:center;transition:transform .2s var(--ease)}.social-link>svg{width:35px;height:35px;filter:drop-shadow(0 0 9px #fff9)}.social-link:hover{transform:translateY(-3px) scale(1.08)}.tooltip{position:absolute;top:calc(100% + 8px);bottom:auto;left:50%;transform:translate(-50%,4px);font-size:13px;padding:5px 9px;border-radius:6px;background:#08143ed9;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s}.social-link:hover .tooltip,.social-link:focus-visible .tooltip{opacity:1;transform:translate(-50%,0)}.card-signature{position:absolute;bottom:13px;left:18px;font-size:12px;color:#dce5ffb3;letter-spacing:.2px}
.sound-control{position:fixed;top:15px;left:15px;z-index:5;display:flex;align-items:center;height:60px;padding-right:0;border-radius:999px;background:linear-gradient(145deg,#343de2db,#164278d9);border:1px solid #c0d1ff26;backdrop-filter:blur(12px);box-shadow:0 0 16px #0b74ff1c}.sound-button{width:58px;height:58px;display:grid;place-items:center;padding:0;border:0;background:none;border-radius:999px}.sound-button svg{width:29px;height:29px;filter:drop-shadow(0 0 6px #ffffff55)}.sound-cross{display:block}.sound-waves{display:none}.sound-button[aria-pressed=true] .sound-waves{display:block}.sound-button[aria-pressed=true] .sound-cross{display:none}.volume-wrap{max-width:0;opacity:0;overflow:hidden;transition:max-width .3s var(--ease),opacity .2s}html[data-input-mode=keyboard] .sound-control:has(:focus-visible) .volume-wrap,.sound-control:has(input:active) .volume-wrap,.sound-control[data-volume-open=true] .volume-wrap{max-width:130px;opacity:1}@media(hover:hover){.sound-control:hover .volume-wrap{max-width:130px;opacity:1}}.volume-wrap input{display:block;width:100px;margin:0 20px 0 4px;accent-color:white;height:24px;cursor:pointer}
.entrance{position:fixed;inset:0;width:100%;height:100%;z-index:20;border:0;background:#030915b8;backdrop-filter:blur(5px);display:grid;place-items:center;transition:opacity .5s ease,backdrop-filter .6s;cursor:pointer}.entrance>span{font-size:30px;font-weight:700;letter-spacing:-.7px;text-shadow:0 0 22px #ffffff33;transition:transform .5s var(--ease)}.entrance:hover>span{transform:scale(1.04)}.entered .entrance{opacity:0;pointer-events:none;backdrop-filter:blur(0)}.entered .entrance>span{transform:translateY(-10px)}.entered .profile-card{transform:translateY(0) scale(1)}.entered .backdrop{transform:scale(1)}.entered .identity,.entered .contact-card,.entered .socials{animation:reveal .7s var(--ease) both}.entered .contact-card{animation-delay:.08s}.entered .socials{animation-delay:.16s}@keyframes reveal{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
.notice{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);margin:0;border-radius:16px;padding:12px 18px;background:#081337e8;font-size:14px;z-index:30;text-align:center;max-width:calc(100% - 32px)}.notice:empty{display:none}.noscript-message{position:fixed;bottom:10px;left:0;right:0;text-align:center}
.entrance>small{position:absolute;top:calc(50% + 38px);left:50%;transform:translateX(-50%);width:calc(100% - 48px);font-size:14px;font-weight:400;line-height:1.5;color:#ffffffb3;animation:image-arrive 480ms ease both}
@media(max-width:600px){.stage{padding:100px 18px 60px}.profile-card{padding:30px 20px 42px;min-height:500px;border-radius:96px}.avatar{width:108px;height:108px}.avatar span{font-size:76px}.name-wrap h1{font-size:34px}.contact-card{padding:11px;gap:10px;border-radius:999px}.contact-avatar{width:58px;height:58px}.contact-title strong{font-size:16px}.contact-title{gap:4px}.contact-subtitle{font-size:13px}.platform{font-size:12px}.sound-control{height:50px;top:16px;left:18px}.sound-button{height:48px;width:48px}.sound-button svg{width:25px}.entrance>span{font-size:27px}}
.sticker-decorations{position:absolute;inset:0;pointer-events:none;user-select:none;z-index:2;border-radius:inherit}
.glass-scene{min-height:100svh;min-height:100dvh;background:#101b38}
#glass-background-source{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:50% 50%;pointer-events:none;z-index:0}
.glass-scene>.liquid-backdrop__source--dynamic{display:none}
.glass-scene>.liquid-backdrop__source,.glass-scene>.liquid-backdrop__gpu{filter:none}
.glass-scene .stage{position:relative;z-index:2;isolation:isolate;perspective:none;min-height:100svh;min-height:100dvh}
.profile-card.liquid-glass,.sound-control.liquid-glass{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;overflow:visible}
.profile-card>.liquid-glass__content{display:block;position:static}
.profile-card.liquid-glass{padding:0;min-height:0;min-width:0;max-width:100%;border-radius:96px;transform:none;will-change:auto;perspective:1200px;transition:none}
.profile-content{position:relative;display:flex;flex-direction:column;align-items:center;gap:24px;min-height:0;padding:36px;transform-origin:50% 50%;transition:transform .28s var(--ease);will-change:transform}
.profile-widgets{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px}
.decorations-host{position:absolute;inset:0;pointer-events:none}
.identity-region{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px}
.identity-region .identity{gap:16px}
.identity-region .name-wrap{margin-top:0}
.identity-region .name-wrap h1{line-height:1.2}
.team-badge.liquid-glass{display:flex;align-items:center;padding:2px 12px 2px 4px;min-height:34px;border-radius:17px;font-size:12px;font-weight:500;line-height:1;white-space:nowrap}
.team-badge>.liquid-glass__content{display:flex;align-items:center;gap:5px}
.team-badge-animation{display:block;width:30px;height:30px;flex:none}
.team-badge-animation svg,.team-badge-animation canvas{display:block;width:100%;height:100%}
.team-badge.liquid-glass:not([data-refraction-ready=true]){background:rgba(255,255,255,.055);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px #ffffff30}
.identity-region .socials{margin:0;gap:24px}
.sound-control>.liquid-glass__content,.sound-content{display:flex;align-items:center}
.sound-control.liquid-glass{position:fixed;z-index:5}
.profile-card.liquid-glass:not([data-refraction-ready=true]){background:rgba(255,255,255,.075);backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15)}
.sound-control.liquid-glass:not([data-refraction-ready=true]){background:rgba(8,9,12,.38);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.profile-card .contact-card{background:#ffffff16;border-color:#ffffff26;box-shadow:inset 0 1px 0 #ffffff18}
.profile-card .contact-card:hover{background:#ffffff28;border-color:#ffffff4d}
.platform{background:#ffffff1f;color:#fff}
.contact-subtitle,.domain,.card-signature{color:#ffffffe6}
.identity,.contact-copy{text-shadow:0 1px 3px #00000045}
.channel-card{padding:16px 24px;width:min(100%,430px);min-height:120px;gap:12px;margin:0 auto}
.profile-card .channel-card.liquid-glass{background:none;border:0;backdrop-filter:none;box-shadow:none;transform:none;transition:none;overflow:visible}
.channel-card.liquid-glass>.liquid-glass__content{display:block;width:100%}
.channel-content{width:100%;display:flex;align-items:center;gap:12px}
.channel-card.liquid-glass:not([data-refraction-ready=true]){background:rgba(255,255,255,.055);backdrop-filter:blur(20px)}
.identity{transition:transform .28s var(--ease);transform-origin:center}
.avatar-glass.liquid-glass{width:144px;height:144px;flex:none;display:grid;place-items:center;border-radius:50%;background:none;border:0;isolation:isolate;overflow:visible}
.avatar-glass>.liquid-glass__content{width:100%;height:100%;display:grid;place-items:center}
.avatar-glass .avatar{background:transparent;box-shadow:0 2px 6px #00000020}
.avatar-glass .avatar img{display:block;border-radius:50%}
.avatar-glass.liquid-glass:not([data-refraction-ready=true]){background:#ffffff04;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 24px #00000020}
.identity-details{display:flex;align-items:center;flex-direction:column;transition:transform .28s var(--ease);transform-origin:center}
.entered .identity{animation:none}
.social-link.social-glass{width:52px;height:52px;border-radius:50%;background:none;border:0;overflow:visible;transform:none;transition:none}
.social-glass>.liquid-glass__content{width:100%;height:100%;display:grid;place-items:center;position:static}
.social-icon{display:grid;place-items:center;width:100%;height:100%}
.social-icon svg{width:27px;height:27px;filter:drop-shadow(0 0 7px #ffffff70);transform:none;transition:transform .18s var(--ease)}
.social-action{position:relative;width:52px;height:52px;flex:none}
.social-tooltip.liquid-glass{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);transform-origin:center top;width:80px;height:24px;display:grid;place-items:center;border:0;background:none;border-radius:12px;font-size:12px;line-height:1;font-weight:500;text-align:center;white-space:nowrap;pointer-events:none}
.social-tooltip>.liquid-glass__content{display:grid;place-items:center;width:100%;height:100%}
.social-action[data-network=twitter] .social-icon svg{width:24px;height:24px}
.social-tooltip.liquid-glass:not([data-refraction-ready=true]){background:#ffffff12;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 .5px #ffffff30}
.social-glass.liquid-glass:not([data-refraction-ready=true]){background:#ffffff0e;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 6px 18px #00000020}
.entered .socials{animation:none}
@media(max-width:600px){.avatar-glass.liquid-glass{width:132px;height:132px}}
.profile-content{transform:none;will-change:auto;transition:none}
.spotify-card.liquid-glass{border-radius:999px;display:block;width:min(100%,430px);margin:0 auto;min-height:120px;padding:16px 24px;border:0;background:none;overflow:visible;--spotify-recent-size:60px;--spotify-recent-gap:12px;--spotify-recent-rows:3;--spotify-recent-h:calc(var(--spotify-recent-rows) * var(--spotify-recent-size) + (var(--spotify-recent-rows) - 1) * var(--spotify-recent-gap) + 34px)}
.spotify-card[data-recent-rows="1"]{--spotify-recent-rows:1}
.spotify-card[data-recent-rows="2"]{--spotify-recent-rows:2}
.spotify-card>.liquid-glass__content{display:block;width:100%;position:static}
.spotify-card.liquid-glass:not([data-refraction-ready=true]){background:rgba(255,255,255,.055);backdrop-filter:blur(20px)}
.spotify-content{--spotify-cover-size:64px;display:flex;align-items:center;gap:12px;text-align:left;min-height:88px}
.spotify-cover{width:var(--spotify-cover-size);height:var(--spotify-cover-size);flex:none;background:#ffffff0a;border-radius:16px;overflow:hidden;position:relative}
.spotify-cover::before{content:'♪';position:absolute;inset:0;display:grid;place-items:center;font-size:26px;color:#ffffff80}
.spotify-cover img{width:100%;height:100%;display:block;object-fit:contain;border-radius:inherit;position:relative}
.spotify-copy{display:flex;flex-direction:column;min-width:0;flex:1;gap:2px;position:relative;transform:translateY(0);transition:transform 440ms cubic-bezier(.22,1,.36,1)}
.spotify-card[data-has-position=true] .spotify-copy{transform:translateY(calc(var(--spotify-cover-size) / 2 - 50% - 20px))}
.spotify-copy strong,.spotify-copy>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spotify-copy strong{font-size:15px;line-height:1.4}
.spotify-label{display:flex;align-items:baseline;flex-wrap:nowrap;min-width:0;gap:2px 4px;font-size:11px;color:#ffffffb8}.spotify-label #spotify-state{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}.spotify-brand,#spotify-time{flex:none}.spotify-brand{margin-left:0}.spotify-label #spotify-time{white-space:nowrap}
#spotify-artist{font-size:13px;color:#ffffffe0}#spotify-time{font-size:12px;color:#ffffffa6}
.spotify-logo{width:40px;height:40px;flex:none;color:#fff;translate:0 0;transition:translate 440ms cubic-bezier(.22,1,.36,1)}
#spotify-position{position:absolute;top:calc(100% + 2px);left:0;max-width:100%;font-size:12px;line-height:1.5;color:#ffffffe0;font-variant-numeric:tabular-nums;letter-spacing:.2px;opacity:0;filter:blur(4px);transform:translateY(4px);visibility:hidden;transition:opacity 200ms ease,filter 240ms ease,transform 240ms var(--ease),visibility 0s 240ms}
.spotify-card[data-has-position=true] #spotify-position{opacity:1;filter:blur(0);transform:translateY(0);visibility:visible;transition:opacity 300ms ease 60ms,filter 360ms ease 60ms,transform 400ms cubic-bezier(.22,1,.36,1) 60ms,visibility 0s}
.spotify-progress{position:absolute;left:40px;right:40px;top:103px;height:3px;border-radius:3px;overflow:hidden;background:#ffffff24;pointer-events:none;opacity:0;filter:blur(5px);transform:translateY(5px) scaleX(.96);visibility:hidden;transition:opacity 200ms ease,filter 240ms ease,transform 240ms var(--ease),visibility 0s 240ms}
.spotify-card[data-has-progress=true] .spotify-progress{opacity:1;filter:blur(0);transform:translateY(0) scaleX(1);visibility:visible;transition:opacity 320ms ease 70ms,filter 400ms ease 70ms,transform 440ms cubic-bezier(.22,1,.36,1) 70ms,visibility 0s}
#spotify-progress-fill{display:block;width:100%;height:100%;border-radius:inherit;background:#fffffff0;transform:scaleX(0);transform-origin:left center}
.spotify-card[data-playing=true] #spotify-progress-fill{transition:transform 250ms linear}
.channel-card .contact-copy{flex:1;min-width:0;overflow:hidden}
.channel-card .contact-avatar{overflow:hidden;width:64px;height:64px}
.contact-avatar img{width:100%;height:100%;object-fit:cover}
.channel-preview{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px;font-size:14px;line-height:25px;min-height:25px}
.channel-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:#ffffffb8;font-size:12px;line-height:1.5;margin-top:3px}
.channel-meta time:not([hidden])::before{content:'·';margin-right:9px}
.post-emoji{display:inline-block;position:relative;width:1.3em;height:1.3em;vertical-align:-.27em;line-height:1.3;flex:none}
.post-emoji-render{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.post-emoji svg{width:100%;height:100%}
@media(max-width:600px){.channel-card{padding:16px 20px}.spotify-card.liquid-glass{padding:16px 20px;--spotify-recent-size:48px;--spotify-recent-gap:10px}.spotify-content,.channel-content{gap:10px}.spotify-content{--spotify-cover-size:48px}.spotify-logo{width:32px;height:32px}.spotify-progress{left:36px;right:36px}.channel-card{gap:10px}.channel-card .contact-avatar{width:48px;height:48px}.channel-card .contact-arrow{width:15px}.channel-meta{gap:3px 7px}.channel-meta time:not([hidden])::before{margin-right:7px}.channel-preview{font-size:13px}}
.edge-sticker{position:absolute;width:128px;height:128px;pointer-events:none;filter:drop-shadow(0 7px 12px #06113d40)}
.edge-sticker svg{width:100%;height:100%;overflow:visible;pointer-events:none}
.sticker-top-left{top:-51px;left:-43px;transform:rotate(-14deg)}
.sticker-top-right{top:-48px;right:-42px;transform:rotate(12deg)}
.sticker-right{top:40%;right:-65px;width:112px;height:112px;transform:rotate(8deg)}
.sticker-bottom-left{bottom:-47px;left:-44px;transform:rotate(-10deg)}
.sticker-bottom-right{bottom:-46px;right:-43px;transform:rotate(13deg)}
.card-signature{left:50%;transform:translateX(-50%);white-space:nowrap}
@media(min-width:601px) and (max-width:800px){.stage{padding-inline:66px}.edge-sticker{width:112px;height:112px}.sticker-right{right:-53px}}
@media(max-width:600px){.profile-content{min-height:0;padding:28px 16px}.social-link.social-glass,.social-action{width:48px;height:48px}.social-icon svg{width:25px;height:25px}.social-action[data-network=twitter] .social-icon svg{width:22px;height:22px}.edge-sticker{width:82px;height:82px}.sticker-top-left{top:-32px;left:-6px}.sticker-top-right{top:-32px;right:-6px}.sticker-right{top:40%;right:-6px;width:62px;height:62px}.sticker-bottom-left{bottom:-30px;left:-6px}.sticker-bottom-right{bottom:-30px;right:-6px}}
/* Move content inside stationary Glasswave lenses so highlights stay aligned. */
:root{--motion-settle:cubic-bezier(.22,1,.36,1);--motion-soft:cubic-bezier(.4,0,.2,1);--motion-fast:180ms;--motion-normal:420ms;--motion-slow:620ms}
.entrance{transition:opacity 560ms var(--motion-soft),backdrop-filter 560ms var(--motion-soft)}
.entrance>span{transition:transform 520ms var(--motion-settle),opacity 320ms ease}
.entered .entrance>span{opacity:0;transform:translateY(-8px)}
.entered .channel-card{animation:none}
@keyframes content-arrive{from{opacity:0;translate:0 10px;filter:blur(2px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes image-arrive{from{opacity:0}to{opacity:1}}
@keyframes cover-arrive{from{opacity:0;transform:scale(1.035);filter:blur(2px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
.entered .avatar-glass>.liquid-glass__content{animation:content-arrive 600ms var(--motion-settle) 40ms backwards}
.entered .identity-details{animation:content-arrive 600ms var(--motion-settle) 90ms backwards}
.entered .team-badge>.liquid-glass__content{animation:content-arrive 580ms var(--motion-settle) 130ms backwards}
.entered .social-icon{animation:content-arrive 620ms var(--motion-settle) 170ms backwards}
.entered .social-action:nth-child(2) .social-icon{animation-delay:210ms}
.entered .social-action:nth-child(3) .social-icon{animation-delay:250ms}
.entered .channel-content{animation:content-arrive 620ms var(--motion-settle) 250ms backwards}
.entered .spotify-content{animation:content-arrive 620ms var(--motion-settle) 310ms backwards}
.entered .decorations-host{animation:image-arrive 700ms ease 120ms backwards}
.identity-details{transition:transform 520ms var(--motion-settle)}
.channel-content,.spotify-content,.team-badge>.liquid-glass__content{transition:transform var(--motion-normal) var(--motion-settle)}
.avatar-glass .avatar img{transition:transform var(--motion-slow) var(--motion-settle)}
#spotify-state{display:inline-block}
.site-music-cover{transition:transform var(--motion-normal) var(--motion-settle)}
.social-icon svg,.spotify-logo,.sound-button>svg{transition:transform var(--motion-normal) var(--motion-settle),translate var(--motion-normal) var(--motion-settle),opacity var(--motion-fast) ease}
.spotify-card[data-playing=true] .spotify-logo{translate:0 -14px}
.contact-arrow{transition:transform var(--motion-normal) var(--motion-settle),opacity var(--motion-normal) ease}
.sound-button:active>svg{transform:scale(.92);transition-duration:120ms}
.spotify-card:active .spotify-logo{transform:scale(.94);transition-duration:120ms}
.volume-wrap{transition:max-width 440ms var(--motion-settle),opacity 240ms ease}
.volume-wrap input{opacity:inherit}
.sound-button .sound-waves,.sound-button .sound-cross,.sound-button[aria-pressed=true] .sound-cross{display:block;transition:opacity 220ms ease}
.sound-button .sound-waves,.sound-button[aria-pressed=true] .sound-cross{opacity:0}
.sound-button .sound-cross,.sound-button[aria-pressed=true] .sound-waves{opacity:1}
.spotify-cover img:not([hidden]),.contact-avatar img:not([hidden]){animation:cover-arrive 420ms var(--motion-settle)}
.notice:not(:empty){animation:content-arrive 320ms var(--motion-settle)}
@media(hover:hover) and (pointer:fine){
  .channel-card:hover .contact-arrow{opacity:1;transform:translate(2px,-2px)}
  .avatar-glass:hover .avatar img{transform:scale(1.035)}
  .site-music-card:hover .site-music-cover{transform:scale(1.035)}
  .spotify-card:hover .spotify-logo{transform:scale(1.07)}
  .spotify-card:active .spotify-logo{transform:scale(.94)}
  .sound-button:hover>svg{transform:scale(1.06)}
  .sound-button:active>svg{transform:scale(.92)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.name-wrap{background:none}.backdrop{transform:none}.profile-card{will-change:auto}}

/* The backdrop reaches unsafe screen edges; only interactive content is inset. */
.glass-scene .stage{padding-top:calc(90px + var(--safe-top));padding-bottom:calc(90px + var(--safe-bottom));padding-left:calc(var(--profile-gutter) + var(--safe-left));padding-right:calc(var(--profile-gutter) + var(--safe-right))}
.sound-control.liquid-glass{top:calc(15px + var(--safe-top));left:calc(15px + var(--safe-left))}
.entrance{height:100svh;height:100dvh;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}
.notice{bottom:calc(20px + var(--safe-bottom))}
@media(min-width:601px) and (max-width:800px){:root{--profile-gutter:66px}}
@media(max-width:600px){:root{--profile-gutter:18px}.glass-scene .stage{padding-top:calc(96px + var(--safe-top));padding-bottom:calc(48px + var(--safe-bottom))}.sound-control.liquid-glass{top:calc(16px + var(--safe-top));left:calc(18px + var(--safe-left))}}

/* The local soundtrack stays beside its volume control, separate from Spotify. */
html:not([data-input-mode=keyboard]) :is(button,a,input,[tabindex]):focus{outline:none!important}
html[data-input-mode=keyboard] :is(button,a,input):focus-visible{outline:1px solid #ffffffc9;outline-offset:3px}
.glass-scene .stage{padding-top:calc(170px + var(--safe-top))}
.music-dock{position:fixed;top:calc(15px + var(--safe-top));left:calc(15px + var(--safe-left));z-index:5;display:flex;align-items:center;gap:12px;max-width:calc(100% - 30px - var(--safe-left) - var(--safe-right))}
.music-dock .sound-control.liquid-glass{position:relative;top:auto;left:auto;flex:none}
.music-dock .dock-glass.liquid-glass{color:#fff;border:1px solid #ffffff24;background:rgba(255,255,255,.055);backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15);box-shadow:0 6px 24px #00000024;border-radius:999px;isolation:isolate}
.music-dock .dock-glass::before{content:"";position:absolute;inset:-1px;padding:1px;border-radius:inherit;pointer-events:none;background:linear-gradient(var(--dock-light-angle,-45deg),#ffffffc9 0%,#ffffff1a 35%,#ffffff0a 60%,#ffffff80 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
.sound-button{flex:0 0 58px;min-width:58px;min-height:58px}
.sound-button svg{flex:none;min-width:29px;min-height:29px}
.site-music-card.liquid-glass{--site-music-cover-size:64px;position:relative;width:290px;min-width:0;min-height:120px;padding:16px 24px;border-radius:999px;color:#fff}
.site-music-card>.liquid-glass__content{position:static}
.site-music-content{display:flex;align-items:center;gap:12px;text-align:left;min-height:88px}
.site-music-cover{width:var(--site-music-cover-size);height:var(--site-music-cover-size);flex:none;object-fit:cover;border-radius:15px}
.site-music-copy{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;transform:translateY(calc(var(--site-music-cover-size) / 2 - 50%))}
.site-music-copy>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-music-copy strong{font-size:15px;line-height:1.3}
.site-music-label{font-size:11px;line-height:1.4;color:#ffffffb3}
.site-music-artist,.site-music-position{font-size:12px;line-height:1.4;color:#ffffffe0}
.site-music-position{font-variant-numeric:tabular-nums}
.site-music-wave{display:flex;align-items:center;justify-content:center;gap:3px;width:27px;height:26px;flex:none;opacity:.45;transition:opacity 240ms ease}
.site-music-wave[data-active=true]{opacity:1}
.site-music-wave>i{display:block;width:3px;height:100%;border-radius:3px;background:#fff;transform:scaleY(.16)}
/* site-music.js glides the bars while the meter runs; CSS only eases them to rest. */
.site-music-wave:not([data-active=true])>i{transition:transform 80ms linear}
.spotify-wave{position:absolute;right:30px;top:68px;display:flex;align-items:center;justify-content:center;gap:3px;width:28px;height:12px;opacity:0;visibility:hidden;transition:opacity 240ms ease,visibility 0s 240ms}
.spotify-wave>i{width:3px;height:100%;background:#fff;border-radius:3px;transform:scaleY(.18)}
.entered .spotify-card[data-playing=true] .spotify-wave{opacity:1;visibility:visible;transition:opacity 240ms ease,visibility 0s}
.entered .spotify-card[data-playing=true] .spotify-wave>i{animation:spotify-wave 860ms ease-in-out infinite alternate}
.entered .spotify-card[data-playing=true] .spotify-wave>i:nth-child(2){animation-duration:620ms;animation-delay:-330ms}
.entered .spotify-card[data-playing=true] .spotify-wave>i:nth-child(3){animation-duration:740ms;animation-delay:-570ms}
.entered .spotify-card[data-playing=true] .spotify-wave>i:nth-child(4){animation-duration:940ms;animation-delay:-240ms}
.entered .spotify-card[data-playing=true] .spotify-wave>i:nth-child(5){animation-duration:680ms;animation-delay:-410ms}
@keyframes spotify-wave{0%{transform:scaleY(.22)}45%{transform:scaleY(.85)}70%{transform:scaleY(.4)}100%{transform:scaleY(1)}}
.site-music-progress{position:absolute;left:40px;right:40px;bottom:14px;margin:0;height:3px;background:#ffffff30;border-radius:2px;overflow:hidden}
.site-music-progress>span{display:block;width:100%;height:100%;background:#fff;border-radius:inherit;transform:scaleX(0);transform-origin:left;transition:transform 250ms linear}
.entered .site-music-content{animation:content-arrive 620ms var(--motion-settle) 180ms backwards}
@media(max-width:600px){
  .music-dock{top:calc(16px + var(--safe-top));left:calc(18px + var(--safe-left));width:calc(100% - 36px - var(--safe-left) - var(--safe-right));max-width:none;gap:10px;align-items:flex-start}
  .sound-button{flex-basis:48px;min-width:48px;min-height:48px}
  .sound-button svg{width:25px;height:25px;min-width:25px;min-height:25px;max-width:25px;max-height:25px}
  .site-music-card.liquid-glass{--site-music-cover-size:48px;width:auto;flex:1;padding:16px 20px;border-radius:999px}
  .site-music-content{gap:10px}
  .site-music-cover{border-radius:12px}
  .site-music-progress{left:36px;right:36px}
  .site-music-copy strong{font-size:14px}
  .site-music-label{font-size:10px}
  .spotify-wave{right:22px}
  .site-music-artist,.site-music-position{font-size:11px}
  .music-dock .volume-wrap{position:absolute;top:calc(100% + 8px);left:0;background:#101318e6;border-radius:16px;backdrop-filter:blur(12px)}
  .music-dock .volume-wrap input{margin:8px 12px}
  .glass-scene .stage{padding-top:calc(160px + var(--safe-top))}
}

/* Keep the mobile page and browser UI surfaces white behind the backdrop. */
@media(max-width:600px),(pointer:coarse){
  :root{background:#fff;color-scheme:light}
  body{background:#fff}
  .sound-control{color:#fff}
  .sound-button svg{filter:none}
  .volume-wrap input{accent-color:#fff}
}

/* One speaker button becomes the left end of the expanded volume capsule. */
.music-controls{--control-size:60px;--volume-width:230px;display:flex;align-items:center;flex:none}
.music-dock .music-controls .sound-control.liquid-glass{width:var(--control-size);height:var(--control-size);transition:width 420ms var(--motion-settle)}
.music-dock .music-controls[data-volume-open=true] .sound-control{width:var(--volume-width)}
.music-controls .sound-control>.liquid-glass__content,.music-controls .sound-content{position:relative;width:100%;height:100%;min-width:0}
.music-dock .music-controls .sound-button{position:absolute;inset:0 auto 0 0;display:grid;place-items:center;width:calc(var(--control-size) - 2px);height:100%;min-width:0;min-height:0;flex:none;padding:0;border:0;border-radius:999px;background:none;color:#fff;z-index:1;transition:background 180ms ease}
.music-dock .music-controls .sound-button:active{background:#ffffff16}
.music-dock .music-controls .sound-button svg{width:25px;height:25px;min-width:25px;min-height:25px;flex:none;transition:transform 240ms var(--motion-settle)}
.music-dock .music-controls .sound-button:active svg{transform:scale(.9)}
.music-dock .music-controls .sound-button .sound-waves{opacity:1}
.music-dock .music-controls .sound-button .sound-cross{opacity:0}
.music-dock .music-controls .sound-button[aria-pressed=true] .sound-waves{opacity:0}
.music-dock .music-controls .sound-button[aria-pressed=true] .sound-cross{opacity:1}
html .music-dock .music-controls .sound-control .volume-wrap{position:absolute;inset:0 0 0 calc(var(--control-size) - 2px);display:flex;align-items:center;width:auto;max-width:none;min-width:0;padding:0 20px 0 2px;opacity:0;overflow:hidden;background:none;backdrop-filter:none;border-radius:0;pointer-events:none;transform:translateX(6px);filter:blur(3px);transition:opacity 140ms ease,transform 260ms var(--motion-settle),filter 180ms ease}
html .music-dock .music-controls[data-volume-open=true] .sound-control .volume-wrap{opacity:1;pointer-events:auto;transform:none;filter:blur(0);transition:opacity 240ms ease 80ms,transform 360ms var(--motion-settle),filter 240ms ease 80ms}
.music-dock .music-controls .volume-wrap input{width:100%;min-width:0;height:44px;margin:0;opacity:1}

/* On phones and touch tablets the soundtrack is a footer, not an overlay. */
@media(max-width:600px),(pointer:coarse){
  .profile-card,.profile-card.liquid-glass{border-radius:40px}
  .glass-scene .stage{min-height:0;padding-top:calc(64px + var(--safe-top));padding-bottom:56px}
  .music-dock{position:relative;top:auto;left:calc((var(--safe-left) - var(--safe-right)) / 2);display:flex;flex-direction:column;width:calc(100% - 2 * var(--profile-gutter) - var(--safe-left) - var(--safe-right));max-width:var(--profile-width);margin:0 auto;padding-bottom:calc(24px + var(--safe-bottom));gap:10px;align-items:stretch}
  .music-controls{--control-size:50px;--volume-width:100%;width:100%;order:1;justify-content:center}
  .music-dock .site-music-card{width:100%;flex:none}
}

/* React to the real soundtrack inside stationary glass, sharing the meter's
   30 Hz sample, which audio-panel-motion.js glides between on each frame.
   Individual transforms leave hover/press feedback independent. */
/* Perspective belongs to the positioned card, never its static content wrapper. */
:is(.avatar-glass,.team-badge,.social-glass,.channel-card,.spotify-card,.site-music-card):has(.audio-reactive-plane){perspective:900px}
/* Non-inherited, so the 30 Hz values restyle only each moving plane rather than
   every icon path, cover and label inside it. */
@property --audio-tilt{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --audio-lift{syntax:'<length>';inherits:false;initial-value:0px}
@property --audio-scale{syntax:'<number>';inherits:false;initial-value:1}
.audio-reactive-plane{
  rotate:1 .65 0 var(--audio-tilt,0deg);
  translate:0 var(--audio-lift,0px);
  scale:var(--audio-scale,1);
  transform-origin:50% 50%;
  transition:transform var(--motion-normal) var(--motion-settle);
}
[data-audio-reactive=rest] .audio-reactive-plane{
  transition:transform var(--motion-normal) var(--motion-settle),rotate 620ms var(--motion-settle),translate 620ms var(--motion-settle),scale 620ms var(--motion-settle);
}
@media(prefers-reduced-motion:reduce){.audio-reactive-plane{rotate:none;translate:none;scale:none}}

/* Glasswave-style spring motion follows the complete lens and its content. */
.social-action[data-network=lottieplugins] .social-icon svg{width:34px;height:34px}

.elastic-trigger{touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.profile-card .elastic-control.liquid-glass,.music-dock .elastic-control.liquid-glass,body:not(.entered) .entrance>.elastic-control{
  transform:translate3d(var(--elastic-pull-x,0px),var(--elastic-pull-y,0px),0) scale(var(--elastic-scale-x,1),var(--elastic-scale-y,1));
  transition:width 420ms var(--motion-settle);
}
.elastic-control.liquid-glass::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;background:#fff;opacity:0;pointer-events:none;transition:opacity 240ms ease}
html[data-input-mode=keyboard] .elastic-control:has(:focus-visible)::after,html[data-input-mode=keyboard] .elastic-control:focus-visible::after{opacity:.11}
@media(hover:hover) and (pointer:fine){.elastic-control:hover::after{opacity:.11}}
.elastic-control[data-elastic-pressed=true]::after{opacity:.15;transition-duration:100ms}
/* The hover wash would grow with the recents reveal into a large white panel;
   the expansion itself is the hover feedback. Presses still flash. */
@media(hover:hover) and (pointer:fine){.spotify-card[data-recent-ready=true][data-recent-open=true]:hover:not([data-elastic-pressed=true])::after{opacity:0}}

/* The recent-tracks reveal: the card itself grows via a min-height transition
   so its own lens tracks the layout change at display refresh rate. The open
   state carries a fixed 60px radius — exactly the pill's effective corner at
   the collapsed 120px height — so the player stays pixel-identical and the
   expanded card is a rounded column, never an oval. */
.profile-card .spotify-card.liquid-glass{transition:width 420ms var(--motion-settle),min-height 420ms var(--motion-settle),border-radius 420ms var(--motion-settle)}
.spotify-card[data-recent-ready=true][data-recent-open=true]{min-height:calc(120px + var(--spotify-recent-h));border-radius:60px}
.spotify-card[data-recent-ready=true][data-recent-open=true] .spotify-recent{height:var(--spotify-recent-h);opacity:1}
.spotify-card[data-recent-ready=true][data-recent-open=true] .spotify-recent-item{opacity:1;transform:none;filter:blur(0);transition-delay:calc(110ms + var(--i) * 28ms),calc(110ms + var(--i) * 28ms),calc(110ms + var(--i) * 28ms)}
.spotify-recent{height:0;opacity:0;overflow:hidden;transition:height 420ms var(--motion-settle),opacity 280ms ease}
.spotify-recent-grid{display:grid;grid-template-columns:repeat(3,var(--spotify-recent-size));gap:var(--spotify-recent-gap);justify-content:center;padding:18px 0 16px}
.spotify-recent-item{position:relative;width:var(--spotify-recent-size);height:var(--spotify-recent-size);border-radius:18px;overflow:hidden;background:#ffffff0a;opacity:0;transform:translateY(-8px);filter:blur(2px);transition:opacity 320ms var(--motion-settle),transform 320ms var(--motion-settle),filter 320ms var(--motion-settle)}
.spotify-recent-item[hidden]{display:none}
.spotify-recent-item img{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit;transition:transform 240ms var(--motion-settle)}
.spotify-recent-item img:not([hidden]){animation:cover-arrive 420ms var(--motion-settle)}
.spotify-recent-caption{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;gap:1px;padding:5px 7px 4px;background:linear-gradient(to top,#000000c9 20%,#00000000);color:#fff;font-size:9.5px;line-height:1.25;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity 200ms ease,transform 240ms var(--motion-settle)}
.spotify-recent-caption strong{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spotify-recent-caption span{opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(hover:hover) and (pointer:fine){
  .spotify-recent-item:hover img{transform:scale(1.04)}
  .spotify-recent-item:hover .spotify-recent-caption{opacity:1;transform:none}
}

@media(max-width:600px){.social-action[data-network=lottieplugins] .social-icon svg{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){.profile-card .elastic-control.liquid-glass,.music-dock .elastic-control.liquid-glass,body:not(.entered) .entrance>.elastic-control{transform:none}}

/* One tooltip moves between buttons; outgoing labels cannot overlap incoming ones. */
.identity-region .socials{position:relative;width:max-content;--social-button-size:52px;margin-bottom:12px}
.social-tooltip-shared.liquid-glass{left:calc(var(--social-button-size) / 2 + var(--tooltip-index,0) * (var(--social-button-size) + 24px));top:calc(100% + 6px);transition:left 260ms var(--motion-settle),width 240ms var(--motion-settle)}
.social-tooltip-label{animation:tooltip-label-arrive 180ms ease both}
@keyframes tooltip-label-arrive{from{filter:blur(2px);translate:0 2px}to{filter:blur(0);translate:0 0}}
@media(max-width:600px){.identity-region .socials{--social-button-size:48px}}
@media(prefers-reduced-motion:reduce){.social-tooltip-shared.liquid-glass{transition:none}.social-tooltip-label{animation:none}}

/* Tint only the animated particles, leaving the name white. */
.name-wrap{background:none}
.name-wrap::before{content:"";position:absolute;inset:0;background:#dfc3ff;-webkit-mask:url('./assets/sparkle.gif?v=157a6bd87b0c') center/cover;mask:url('./assets/sparkle.gif?v=157a6bd87b0c') center/cover;pointer-events:none}
.name-wrap h1{position:relative}

/* The sticker's authored rotation stays independent of the elastic gesture. */
.edge-sticker.elastic-control{pointer-events:auto;cursor:grab;translate:var(--elastic-pull-x,0px) var(--elastic-pull-y,0px);scale:var(--elastic-scale-x,1) var(--elastic-scale-y,1)}
.edge-sticker .sticker-light{filter:brightness(0) invert(1);opacity:0;pointer-events:none;transition:opacity 280ms ease}
@media(hover:hover) and (pointer:fine){.edge-sticker.elastic-control:hover .sticker-light{opacity:.18}}
.edge-sticker.elastic-control[data-elastic-pressed=true]{cursor:grabbing}
.edge-sticker.elastic-control[data-elastic-pressed=true] .sticker-light{opacity:.26;transition-duration:140ms}
@media(prefers-reduced-motion:reduce){.edge-sticker.elastic-control{translate:none;scale:none}.edge-sticker .sticker-light{transition:none}}

/* Keep a native range for touch/keyboard, with an independently animated rail. */
.volume-slider{position:relative;width:100%;height:44px;flex:none;--volume-slide-duration:620ms}
.volume-track{position:absolute;left:7px;right:7px;top:50%;height:6px;transform:translateY(-50%);border-radius:999px;background:#ffffff30;pointer-events:none}
.volume-fill{position:absolute;inset:0 auto 0 0;width:var(--volume-position,12%);border-radius:inherit;background:#fff;transition:width var(--volume-slide-duration) var(--motion-settle),background 260ms ease}
.volume-thumb{position:absolute;left:var(--volume-position,12%);top:50%;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0003;transform:translate(-50%,-50%) scale(1);opacity:1;transition:left var(--volume-slide-duration) var(--motion-settle),opacity 220ms ease,transform 320ms var(--motion-settle)}
.volume-slider[data-muted=true] .volume-fill{background:#989a9f}
.volume-slider[data-muted=true] .volume-thumb{opacity:0;transform:translate(-50%,-50%) scale(.35)}
.music-dock .music-controls .volume-slider input{position:absolute;inset:0;appearance:none;-webkit-appearance:none;background:transparent;border:0;border-radius:999px;box-shadow:none;outline:none;cursor:pointer}
.music-dock .volume-slider input::-webkit-slider-runnable-track{height:6px;background:transparent;border:0}
.music-dock .volume-slider input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;margin-top:-4px;border:0;border-radius:50%;background:transparent;box-shadow:none}
.music-dock .volume-slider input::-moz-range-track,.music-dock .volume-slider input::-moz-range-progress{height:6px;background:transparent;border:0}
.music-dock .volume-slider input::-moz-range-thumb{width:14px;height:14px;border:0;background:transparent;box-shadow:none}
.music-dock .volume-slider input:disabled{cursor:default}
.volume-slider:has(input:active) :is(.volume-fill,.volume-thumb){transition-duration:0ms}
html[data-input-mode=keyboard] .volume-slider:has(input:focus-visible) .volume-track{outline:2px solid #dfc3ff;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.volume-fill,.volume-thumb{transition:none}}

/* Native touch selection/callouts must not interrupt the elastic gesture.
   A press held on glass lands on the lens, not on the trigger inside it, so the
   whole scene opts out: otherwise iOS selects the name or the track title and
   shows its blue handles and Copy / Look Up menu over the profile. */
:is(.elastic-trigger,.elastic-trigger *,.name-wrap,.name-wrap *){-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
:is(#glass-root,.stage,.profile-card,#glass-root *,.music-dock,.music-dock *){-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
:is(input,textarea,select,[contenteditable]){-webkit-user-select:auto;user-select:auto}
:is(.avatar,.contact-avatar,.site-music-cover,.spotify-cover,.spotify-recent-item) img,.avatar img{-webkit-user-drag:none;pointer-events:none}
/* Safari can lose overflow clipping when a round child has a 3D transform. */
.avatar-glass .avatar{clip-path:circle(50%);-webkit-mask-image:radial-gradient(white,black)}
.avatar-glass .avatar img{border-radius:50%;clip-path:circle(50%)}