*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    user-select:none;
    -webkit-user-select:none;
}

img,
a,
button{
    -webkit-user-drag:none;
    user-drag:none;
}

html,
body{
    width:100%;
    min-height:100%;
    background-image:url('images/BLACK.png');
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    font-family:'Inter',sans-serif;
    color:#fff;
    cursor: url('assets/Alternate.ani') 0 0, url('assets/Alternate.cur') 0 0, auto !important;
}

html{
    overflow-x:hidden;
}

body{
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:32px 16px;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}

#background{
    position:fixed;
    inset:0;

    background-image:url("images/BLACK.png");
    background-size:cover;
    background-position:center;
    transform-origin:center;
    will-change:transform;

    z-index:-3;
}

#overlay{
    position:fixed;
    inset:0;

    z-index:-2;
}

.container{
    width:min(100%,850px);
    perspective:1500px;
    perspective-origin:center center;
}

.profile-card{
    width:100%;

    transform-origin:center center;
    will-change:transform;

    padding:45px;

    text-align:center;

    transition:
    background .35s,
    border-color .35s;

}

.glow{

    box-shadow:
    0 18px 60px rgba(0,0,0,.24),
    0 0 24px rgba(255,255,255,.04);

}

.avatar-wrapper{

    position:relative;

    width:130px;

    margin:auto;

}



#avatar{

    width:130px;

    height:130px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid rgba(255,255,255,.12);

}

.status-dot{

    --status-glow-rgb:128,132,142;

    position:absolute;

    z-index:3;

    right:-1px;

    bottom:-1px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#80848e;

    border:3px solid rgba(38,38,38,.95);

    overflow:hidden;

    box-shadow:
        0 0 8px rgba(var(--status-glow-rgb),.46),
        0 0 18px rgba(var(--status-glow-rgb),.18);

    transition:
        background .25s ease,
        box-shadow .25s ease;

}

.status-dot::before,
.status-dot::after{
    content:"";
    position:absolute;
}

.status-online{
    --status-glow-rgb:35,165,90;
    background:#23a55a;
}

.status-idle{
    --status-glow-rgb:240,178,50;
    background:#f0b232;
}

.status-idle::before{
    left:-2px;
    top:-2px;
    width:9.5px;
    height:9.5px;
    border-radius:50%;
    background:rgba(38,38,38,.95);
}

.status-idle::after{
    display:none;
}

.status-dnd{
    --status-glow-rgb:242,63,67;
    background:#f23f43;
}

.status-dnd::before{
    left:1px;
    right:1px;
    top:50%;
    height:3px;
    border-radius:999px;
    background:#2e2e2e;
    transform:translateY(-50%);
}

.status-offline{
    --status-glow-rgb:128,132,142;
    background:#80848e;
}

.status-offline::before{
    inset:3px;
    border-radius:50%;
    background:rgba(38,38,38,.95);
}

h1{

    margin-top:22px;

    font-size:42px;

    font-weight:700;

}

#bio{

    margin-top:10px;

    opacity:.75;

    min-height:1.35em;

    line-height:1.35;

}

#bio::after{

    content:"";

    display:inline-block;

    width:2px;

    height:1em;

    margin-left:4px;

    vertical-align:-.12em;

    background:currentColor;

    animation:caretBlink 1s steps(1,end) infinite;

}

#song.is-typewriting::after,
#artist.is-typewriting::after,
#discordActivity.is-typewriting::after{

    content:"";

    display:inline-block;

    width:2px;

    height:1em;

    margin-left:4px;

    vertical-align:-.12em;

    background:currentColor;

    animation:caretBlink 1s steps(1,end) infinite;

}

.cards{

    display:grid;

    grid-template-columns:minmax(0,1fr) minmax(0,1fr);

    gap:18px;

    margin-top:35px;

}

.cards.spotify-title-wide{
    grid-template-columns:1fr;
}

.cards.is-layout-animating{
    transition:height .42s cubic-bezier(.22,1,.36,1);
}

.glass{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:18px;

    text-align:left;

    min-width:0;

}

.discord-card,
.spotify-card{
    min-width:0;
}

.discord-card{
    --discord-status-rgb:128,132,142;
    position:relative;
    overflow:hidden;
    border-color:rgba(var(--discord-status-rgb),.18);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.1),
        inset 0 -34px 78px rgba(var(--discord-status-rgb),.13);
    isolation:isolate;
    transition:
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.cards .discord-card,
.cards .spotify-card{
    transform:perspective(900px)
        rotateX(var(--card-tilt-y, 0deg))
        rotateY(var(--card-tilt-x, 0deg));
    transform-style:preserve-3d;
    transition:transform .16s cubic-bezier(.22,1,.36,1);
    will-change:transform;
}

.cards.is-layout-animating .discord-card,
.cards.is-layout-animating .spotify-card{
    transition:
        transform .42s cubic-bezier(.22,1,.36,1),
        opacity .24s ease;
    will-change:transform;
}

.card-title{

    font-weight:600;

    margin-bottom:15px;

}

.discord-user{

    display:flex;

    align-items:center;

    gap:12px;

}

.discord-user img{

    width:52px;

    height:52px;

    border-radius:50%;

}

.discord-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
    flex:1;
    min-width:0;
}

.discord-name-row{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
}

#discordName{
    font-size:20px;
    font-weight:600;
    flex:0 1 auto;
    min-width:0;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

#discordGuildTag{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

#discordBadges{
    display:flex;
    align-items:center;
    gap:5px;
    flex-shrink:0;
    min-width:0;
    max-width:100%;
    margin-top:3px;
    overflow:hidden;
}

.discord-guild-tag{
    display:inline-flex;
    align-items:center;
    gap:3px;
    max-width:98px;
    height:18px;
    padding:0 5px;
    border-radius:5px;
    background:rgba(88,101,242,.22);
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
    font-size:10.5px;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
}

.discord-guild-tag img{
    width:13px;
    height:13px;
    flex-shrink:0;
    border-radius:0;
    object-fit:contain;
}

.discord-badge{
    width:16px;
    height:16px;
    flex-shrink:0;
    border-radius:0;
    object-fit:contain;
}

#discordBadges img{
    width:16px;
    height:16px;
    border-radius:0;
}

.discord-guild-tag span{
    overflow:hidden;
    text-overflow:ellipsis;
}
/*
.discord-badge{
    display:block;
}
*/
#discordStatus{
    margin-top:3px;
    color:#bdbdbd;
}

.discord-avatar{

    --discord-avatar-size:64px;

    position:relative;

    width:var(--discord-avatar-size);

    height:var(--discord-avatar-size);

    flex:0 0 var(--discord-avatar-size);

}



#discordAvatar{

    position:relative;

    z-index:1;

    width:100%;

    height:100%;

    flex-shrink:0;

    border-radius:50%;

    object-fit:cover;

}

#discordDecoration{

    position:absolute;

    left:50%;

    top:50%;

    z-index:2;

    width:118%;

    height:118%;

    max-width:none;

    border-radius:0;

    object-fit:contain;

    pointer-events:none;

    /* Keep the decoration centered on the avatar at every size. */
    transform:translate(-50%,-50%);

}

#discordDecoration[src=""]{

    display:none;

}



#discordStatus{

    opacity:.7;

    font-size:14px;

}

#discordActivity{

    margin-top:15px;

    font-size:14px;

    opacity:.8;

}

.spotify-main{

    display:flex;

    gap:14px;

    align-items:center;

}

.spotify-art-cluster{

    display:flex;

    align-items:center;

    gap:7px;

    flex-shrink:0;

}

.spotify-equalizer{

    position:relative;

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    width:16px;

    height:44px;

}

.spotify-equalizer::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:50%;

    height:2px;

    border-radius:999px;

    background:rgb(var(--spotify-accent-strong, var(--spotify-accent)));

    box-shadow:0 0 8px rgba(var(--spotify-accent-strong, var(--spotify-accent)),.72);

    opacity:1;

    transform:translateY(-50%) scaleX(1);

    transform-origin:center;

    transition:
        opacity .35s ease,
        transform .35s ease;

}

.spotify-equalizer__bar{

    position:relative;

    z-index:1;

    width:2px;

    height:var(--spotify-equalizer-height, 60%);

    flex:0 0 2px;

    border-radius:999px;

    background:rgb(var(--spotify-accent-strong, var(--spotify-accent)));

    box-shadow:0 0 7px rgba(var(--spotify-accent-strong, var(--spotify-accent)),.7);

    opacity:0;

    transform:scaleY(.25);

    transform-origin:bottom center;

    transition:
        opacity .35s ease,
        transform .35s ease;

}

.spotify-equalizer__bar:nth-child(1){
    --spotify-equalizer-height:42%;
    --spotify-equalizer-delay:-.12s;
}

.spotify-equalizer__bar:nth-child(2){
    --spotify-equalizer-height:68%;
    --spotify-equalizer-delay:-.34s;
}

.spotify-equalizer__bar:nth-child(3){
    --spotify-equalizer-height:92%;
    --spotify-equalizer-delay:-.56s;
}

.spotify-equalizer__bar:nth-child(4){
    --spotify-equalizer-height:58%;
    --spotify-equalizer-delay:-.78s;
}

.spotify-equalizer__bar:nth-child(5){
    --spotify-equalizer-height:76%;
    --spotify-equalizer-delay:-.24s;
}

.spotify-card.is-playing .spotify-equalizer::before{

    opacity:0;

    transform:translateY(-50%) scaleX(.25);

}

.spotify-card.is-playing .spotify-equalizer__bar{

    opacity:1;

    animation:
        spotify-equalizer-pump 1s ease-in-out infinite alternate;

    animation-delay:var(--spotify-equalizer-delay);

}

@keyframes spotify-equalizer-pump{

    from{
        transform:scaleY(.25);
    }

    to{
        transform:scaleY(1);
    }

}

.spotify-info{

    flex:1;

    min-width:0;

}

#song{

    font-size:18px;

    font-weight:700;

    white-space:normal;

    overflow-wrap:anywhere;

    word-break:break-word;

    line-height:1.25;

}

#artist{

    margin-top:4px;

    color:#bdbdbd;

    font-size:14px;

}

.spotify-progress{

    margin-top:18px;

    display:flex;

    align-items:center;

    gap:10px;

}

.spotify-progress span{

    width:45px;

    font-size:12px;

    color:#aaa;

}

.progress{

    flex:1;

    height:5px;

    background:#3d3d3d;

    border-radius:999px;

    overflow:hidden;

}

#progressBar{

    width:0%;

    height:100%;

    background:#1DB954;

}

.spotify-controls{

    margin-top:18px;

}

#spotifyOpen{

    width:100%;

    min-height:48px;

    padding:10px 20px;

    border:2px solid #00c768;

    border-radius:999px;

    background:rgba(170, 178, 188, .18);

    color:#008f48;

    cursor:pointer;

    font-weight:700;

    font-size:16px;

    line-height:1.2;

    text-shadow:0 1px 1px rgba(255,255,255,.3);

    box-shadow:
        0 0 0 1px rgba(0,199,104,.18),
        0 0 12px rgba(0,199,104,.3),
        inset 0 0 10px rgba(0,199,104,.08);

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease,
        transform .15s ease;

}

#spotifyOpen:hover{

    background:rgba(170, 178, 188, .28);

    border-color:#00d875;

    color:#007f40;

    box-shadow:
        0 0 0 1px rgba(0,216,117,.24),
        0 0 18px rgba(0,216,117,.46),
        inset 0 0 12px rgba(0,216,117,.12);

}

#spotifyOpen:active{

    transform:scale(.99);

}

#spotifyOpen:focus-visible{

    outline:3px solid rgba(0, 199, 104, .35);

    outline-offset:3px;

}
#cover{

    width:60px;

    height:60px;

    border-radius:12px;

    object-fit:cover;

}

#song{

    font-weight:600;

}

#artist{

    font-size:14px;

    opacity:.75;

}

.progress{

    margin-top:18px;

    height:5px;

    background:rgba(255,255,255,.1);

    border-radius:999px;

    overflow:hidden;

}

#progressBar{

    width:35%;

    height:100%;

    background:#ffffff;

}

.spotify-card{
    --spotify-accent:29,185,84;
    --spotify-accent-strong:54,224,112;
    position:relative;
    overflow:hidden;
    border-radius:24px;
    background:rgba(6, 8, 12, 0);
    border-color:rgba(255,255,255,.14);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -36px 90px rgba(var(--spotify-accent),.22);
    isolation:isolate;
}

.spotify-card::before,
.spotify-card::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
}

.spotify-card::before{
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05) 0%,
            rgba(255,255,255,.04) 28%,
            rgba(0,0,0,.10) 58%,
            rgba(0,0,0,.06) 72%,
            rgba(0,0,0,0) 100%
        ),
        radial-gradient(
            circle at 50% 84%,
            rgba(255,255,255,.34),
            rgba(255,255,255,.05) 18%,
            rgba(255,255,255,0) 34%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(var(--spotify-accent),.72),
            rgba(var(--spotify-accent),.34) 35%,
            rgba(var(--spotify-accent),0) 72%
        ),
        linear-gradient(
            180deg,
            rgba(var(--spotify-accent),0) 34%,
            rgba(var(--spotify-accent),.28) 100%
        );
}

.spotify-card::after{
    background:
        radial-gradient(
            circle at var(--card-light-x, 50%) var(--card-light-y, 50%),
            rgba(255,255,255,.18),
            rgba(255,255,255,0) 84%
        );
    mix-blend-mode:screen;
    opacity:var(--card-light-opacity, 0);
    transition:opacity .28s ease;
}

.spotify-card > *{
    position:relative;
    z-index:1;
}

.spotify-card .progress{
    position:relative;
    overflow:visible;
    height:6px;
    background:rgba(255,255,255,.16);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

.spotify-card #progressBar{
    position:relative;
    min-width:0;
    border-radius:999px;
    background:rgba(255,255,255,.92);
    box-shadow:0 0 12px rgba(255,255,255,.28);
}

.spotify-card #progressBar.has-progress::after{
    content:"";
    position:absolute;
    right:-18px;
    top:50%;
    width:40px;
    height:18px;
    border-radius:999px;
    background:linear-gradient(
        90deg,
        rgba(255,255,255,0),
        rgba(255,255,255,.85),
        rgba(255,255,255,0)
    );
    transform:translateY(-50%);
    filter:blur(7px);
    box-shadow:
        0 0 22px rgba(255,255,255,.62),
        0 0 38px rgba(var(--spotify-accent),.5);
}

@media (prefers-reduced-motion: reduce){

    .spotify-card.is-playing .spotify-equalizer__bar{
        animation:none;
        transform:scaleY(.65);
    }

}

.socials{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-top:35px;

    flex-wrap:wrap;

}

.socials a{

    color:white;

    text-decoration:none;

    padding:10px 16px;

    border-radius:12px;

    transition:.25s;

    background:rgba(255,255,255,.05);

}

.socials a:hover{

    background:rgba(255,255,255,.13);

    transform:translateY(-2px);

}

@keyframes caretBlink{

0%,
49%{
opacity:1;
}

50%,
100%{
opacity:0;
}

}

@media(max-width:980px){

.cards{
grid-template-columns:1fr;
}

}

@keyframes deviceStatusRefreshPulse{
    50%{ opacity:.45; }
}

/* Final device-status polish. */
.device-status-card{
    position:relative;
    overflow:hidden;
}

.device-status-card .card-title{
    margin:0 0 15px;
    color:rgba(255,255,255,.78);
    font-size:16px;
    font-weight:600;
    letter-spacing:.01em;
}

.device-status-row{
    transition:background .2s ease, border-color .2s ease, transform .2s ease;
}

.device-status-row:hover{
    border-color:rgba(255,255,255,.2);
    background:rgba(255,255,255,.08);
    transform:translateY(-1px);
}

.device-status-dot{
    width:7px;
    height:7px;
    border:1px solid rgba(255,255,255,.14);
}

.device-status-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:13px;
}

.device-status-updated{
    min-width:0;
    overflow:hidden;
    color:rgba(255,255,255,.42);
    font-size:9px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.device-status-refresh{
    appearance:none;
    flex:0 0 auto;
    border:1px solid rgba(255,255,255,.2) !important;
    border-radius:999px !important;
    padding:6px 11px !important;
    background:rgba(255,255,255,.09) !important;
    color:rgba(255,255,255,.82) !important;
    cursor:pointer;
    font-family:inherit;
    font-size:10px;
    font-weight:500;
    line-height:1;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
    transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, opacity .2s ease;
}

.device-status-refresh:hover{
    border-color:rgba(255,255,255,.38) !important;
    background:rgba(255,255,255,.18) !important;
    color:#fff !important;
    transform:translateY(-1px);
}

.device-status-refresh:active{
    transform:translateY(0) scale(.97);
}

.device-status-refresh:disabled{
    cursor:wait;
    opacity:.5;
}

.device-status-refresh.is-refreshing{
    animation:deviceStatusRefreshPulse 1s ease-in-out infinite;
}

@media(max-width:760px){

body{
align-items:flex-start;
padding:76px 12px 28px;
background-attachment:scroll;
}

.cards{
grid-template-columns:1fr;
gap:14px;
margin-top:24px;
}

.profile-card{
padding:24px 16px;
}

.avatar-wrapper,
#avatar{
width:104px;
height:104px;
}

h1{
font-size:30px;
margin-top:16px;
}

#bio{
margin-top:8px;
}

.socials{
gap:8px;
margin-top:24px;
}

.glass{
padding:14px;
border-radius:14px;
}

.discord-avatar{
--discord-avatar-size:54px;
}

.status-dot{
width:16px;
height:16px;
}

#discordName{
font-size:18px;
}

.spotify-main{
gap:12px;
}

#cover{
width:54px;
height:54px;
border-radius:10px;
}

#song{
font-size:16px;
}

.spotify-progress{
gap:8px;
}

.spotify-progress span{
width:38px;
font-size:11px;
}

.socials a{
padding:9px 12px;
border-radius:10px;
font-size:14px;
}

}

@media(max-width:420px){

body{
padding-left:10px;
padding-right:10px;
}

.profile-card{
padding:20px 12px;
}

h1{
font-size:28px;
}

.spotify-progress span{
width:34px;
}

}


/* Guestbook */
.guestbook{
    width:100%;
    margin:34px 0 0;
    padding:28px 0 0;
    background:transparent;
    border:0;
    border-top:1px solid rgba(255,255,255,.08);
    border-radius:0;
    box-shadow:none;
    text-align:left;
}

.guestbook-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding:0 2px 14px;
}

.guestbook h2{
    font-size:16px;
    font-weight:700;
    color:rgba(255,255,255,.74);
}

.guestbook h2 span{
    margin-left:8px;
    color:rgba(255,255,255,.3);
    font-size:11px;
    font-weight:500;
}

.guestbook-heading p{
    margin-top:8px;
    color:rgba(255,255,255,.34);
    font-size:12px;
}

.guestbook-scroll-hint{
    color:rgba(255,255,255,.22);
    font-size:15px;
}

.guestbook-list{
    max-height:430px;
    padding-right:12px;
    overflow-y:auto;
    scrollbar-color:rgba(255,255,255,.14) transparent;
    scrollbar-width:thin;
}

.guestbook-list::-webkit-scrollbar{
    width:5px;
}

.guestbook-list::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:rgba(255,255,255,.14);
}

.guestbook-entry{
    padding:13px 0 15px;
    border-bottom:1px solid rgba(255,255,255,.035);
}

.guestbook-entry-meta,
.guestbook-entry-row,
.guestbook-submit-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.guestbook-entry-meta{
    justify-content:flex-start;
    gap:9px;
}

.guestbook-entry-meta strong{
    color:rgba(255,255,255,.54);
    font-size:11px;
    letter-spacing:.06em;
}

.guestbook-entry-meta span{
    color:rgba(255,255,255,.28);
    font-size:10px;
}

.guestbook-entry-row{
    align-items:flex-start;
    margin-top:8px;
}

.guestbook-entry-row p{
    flex:1;
    color:rgba(255,255,255,.58);
    font-size:13px;
    line-height:1.65;
}

.guestbook-like{
    flex-shrink:0;
    padding:0;
    border:0;
    background:none;
    color:rgba(255,255,255,.23);
    font-size:11px;
}

.guestbook-like:hover,
.guestbook-like.is-liked{
    color:#db526d;
}

.guestbook-reply{
    margin:10px 0 0 2px;
    padding:4px 0 2px 11px;
    border-left:2px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.32);
    font-size:11px;
    line-height:1.7;
}

.guestbook-reply span{
    color:#aa4059;
    font-size:10px;
}

.guestbook-form{
    margin-top:12px;
}

.guestbook-form-actions{
    min-height:34px;
}

.guestbook-cancel{
    padding:8px 14px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:9px;
    background:rgba(255,255,255,.07);
    color:rgba(255,255,255,.48);
    font-size:12px;
}

.guestbook-form input,
.guestbook-form textarea{
    width:100%;
    margin-top:10px;
    padding:11px 13px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:9px;
    outline:none;
    background:rgba(255,255,255,.045);
    color:rgba(255,255,255,.7);
    font:inherit;
    font-size:12px;
    resize:vertical;
}

.guestbook-form textarea{
    min-height:60px;
}

.guestbook-form input::placeholder,
.guestbook-form textarea::placeholder{
    color:rgba(255,255,255,.35);
}

.guestbook-form input:focus,
.guestbook-form textarea:focus{
    border-color:rgba(255,255,255,.2);
    background:rgba(255,255,255,.065);
}

.guestbook-submit-row{
    justify-content:flex-start;
    margin-top:9px;
}

.guestbook-submit-row #guestbookRemaining{
    margin-left:auto;
}

#guestbookSubmit{
    padding:9px 14px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:9px;
    background:rgba(255,255,255,.055);
    color:rgba(255,255,255,.34);
    font-size:12px;
    transition:background .2s, color .2s, border-color .2s;
}

#guestbookSubmit:not(:disabled){
    border-color:rgba(255,255,255,.16);
    background:rgba(255,255,255,.12);
    color:rgba(255,255,255,.72);
}

#guestbookSubmit:not(:disabled):hover{
    background:rgba(255,255,255,.18);
}

#guestbookRemaining{
    color:rgba(255,255,255,.23);
    font-size:10px;
}

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

@media(max-width:760px){
    .guestbook{
        padding:18px 14px 16px;
    }

    .guestbook-list{
        max-height:360px;
        padding-right:7px;
    }
}


/* 使用 Alternate 游標影格；表情標籤仍以自訂元素跟隨滑鼠 */
a,
button,
input,
textarea,
select {
    cursor: url('assets/Alternate.ani') 0 0, url('assets/Alternate.cur') 0 0, auto;
}

#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    pointer-events: none;
}

/* 名字標籤 */
.cursor-label {
    position: fixed;
    top: 0;
    left: 10px;

    padding: 5px 11px;

    background: white;
    color: black;

    border-radius: 999px;

    font-size: 13px;
    font-weight: 600;
    font-family: Arial, sans-serif;

    white-space: nowrap;

    pointer-events: none;

    opacity: 0;

    transform-origin: left center;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.08);
}

/* 滑鼠進入網站後顯示 */
body.cursor-active .cursor-label {
    opacity: 1;
}
html,
body,
body * {
    cursor: url('assets/Alternate.ani') 0 0, url('assets/Alternate.cur') 0 0, auto !important;
}
@media (pointer: coarse) {
    #custom-cursor {
        display: none !important;
    }
}

/* -------------------------------------------------------------------------- */
/* Liquid Glass UI                                                            */
/* -------------------------------------------------------------------------- */
:root{
    --glass-blue:156,198,255;
    --glass-violet:181,157,255;
    --glass-border:rgba(255,255,255,.18);
    --glass-shadow:0 28px 80px rgba(0,0,0,.42), 0 10px 26px rgba(0,0,0,.18);
}

html,
body{
    background-color:#080d18;
}

body{
    position:relative;
    isolation:isolate;
    color:rgba(255,255,255,.94);
}

#background{
    filter:saturate(1.18) brightness(.7);
    transform:translate3d(0,0,0) scale(1.1);
}

.profile-card{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.profile-card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
}

.profile-card > *{
    position:relative;
    z-index:1;
}

.avatar-wrapper{
    padding:5px;
    border-radius:50%;
    background:linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.08) 45%, rgba(var(--glass-blue),.5));
    box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 14px 30px rgba(0,0,0,.26), 0 0 30px rgba(var(--glass-blue),.14);
}

#avatar{
    display:block;
    border:2px solid rgba(255,255,255,.3);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}

h1{
    letter-spacing:-.04em;
    text-shadow:0 2px 18px rgba(0,0,0,.28);
}

#bio{
    color:rgba(255,255,255,.7);
}

.card-title{
    color:rgba(255,255,255,.78);
    letter-spacing:.01em;
}

#discordStatus,
#artist,
.spotify-progress span{
    color:rgba(255,255,255,.56);
}

.discord-guild-tag{
    background:rgba(124,161,255,.2);
    border-color:rgba(255,255,255,.2);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}

.status-dot{
    border-color:rgba(16,22,36,.8);
}

#cover{
    border:1px solid rgba(255,255,255,.24);
    box-shadow:0 8px 20px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.22);
}

.spotify-card .progress{
    background:rgba(255,255,255,.13);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 0 0 1px rgba(255,255,255,.04);
}

.spotify-card #progressBar{
    background:linear-gradient(90deg, rgba(117,255,213,.78), rgba(255,255,255,.98));
    box-shadow:0 0 14px rgba(117,255,213,.42), 0 0 8px rgba(255,255,255,.34);
}

#spotifyOpen,
.socials a,
.guestbook-cancel,
#guestbookSubmit{
    border:1px solid rgba(255,255,255,.2);
    background:
        linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06)),
        rgba(255,255,255,.07);
    color:rgba(255,255,255,.86);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 8px 18px rgba(0,0,0,.12);
}

#spotifyOpen:hover,
.socials a:hover,
.guestbook-cancel:hover,
#guestbookSubmit:not(:disabled):hover{
    border-color:rgba(255,255,255,.4);
    background:
        linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,.1)),
        rgba(255,255,255,.1);
    color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 12px 24px rgba(0,0,0,.18), 0 0 22px rgba(150,196,255,.12);
}

.socials{
    gap:12px;
}

.socials a{
    border-radius:14px;
    padding:10px 17px;
}

.socials a:active,
#spotifyOpen:active,
#guestbookSubmit:not(:disabled):active,
.guestbook-cancel:active{
    transform:translateY(1px) scale(.98);
}

.guestbook{
    margin-top:32px;
    padding:22px 22px 20px;
}

.guestbook-heading{
    padding:0 0 14px;
}

.guestbook-form input,
.guestbook-form textarea{
    color:rgba(255,255,255,.9);
}

#guestbookSubmit:not(:disabled){
    border-color:rgba(255,255,255,.3);
    background:linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
    color:rgba(255,255,255,.9);
}

#guestbookSubmit:disabled{
    opacity:.55;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
    outline:2px solid rgba(163,204,255,.78);
    outline-offset:3px;
}

.cursor-label{
    background:rgba(255,255,255,.14);
    color:rgba(255,255,255,.9);
    border:1px solid rgba(255,255,255,.22);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 8px 20px rgba(0,0,0,.2);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
}

@media(max-width:760px){
    .guestbook{
        padding:18px 14px 16px;
    }
}

/* -------------------------------------------------------------------------- */
/* Refined liquid glass                                                       */
/* -------------------------------------------------------------------------- */
#spotifyOpen,
.guestbook-cancel,
#guestbookSubmit,
.guestbook-form input,
.guestbook-form textarea{
    -webkit-backdrop-filter:blur(5px) saturate(145%);
    backdrop-filter:blur(5px) saturate(145%);
}

.avatar-wrapper{
    width:140px;
    height:140px;
    padding:5px;
    display:grid;
    place-items:center;
    overflow:visible;
}

.avatar-wrapper #avatar{
    width:130px;
    height:130px;
}

.guestbook-cancel:disabled,
#guestbookSubmit:disabled{
    opacity:.42;
    filter:saturate(.45);
    cursor:not-allowed !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 5px 12px rgba(0,0,0,.08);
}

.guestbook-cancel:disabled:hover,
#guestbookSubmit:disabled:hover{
    border-color:rgba(255,255,255,.2);
    background:
        linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06)),
        rgba(255,255,255,.07);
    color:rgba(255,255,255,.86);
    transform:none;
}

@media(max-width:760px){
    .avatar-wrapper{
        width:114px;
        height:114px;
    }

.avatar-wrapper #avatar{
    width:104px;
    height:104px;
}
}

/* Keep the avatar centered while aligning the profile text to the left. */
#username,
#bio{
    text-align:left;
}

/* Place the avatar on the left and the profile text beside it. */
.profile-intro{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:32px;
    text-align:left;
}

.profile-intro .avatar-wrapper{
    flex:0 0 auto;
    margin:0;
}

.profile-copy{
    min-width:0;
    flex:0 1 260px;
}

.profile-copy h1{
    margin-top:0;
}

.profile-eyebrow{
    margin:0 0 5px;
    color:rgba(255,255,255,.56);
    font-size:18px;
    font-weight:500;
    letter-spacing:-.025em;
    line-height:1.1;
}

.profile-copy #username{
    margin:0;
    font-size:clamp(38px, 5vw, 52px);
    font-weight:800;
    letter-spacing:-.055em;
    line-height:1.18;
    min-height:1.18em;
    padding-bottom:.14em;
    overflow:visible;
    background:linear-gradient(
        115deg,
        #f8fbff 0%,
        #aab9d8 23%,
        #ffffff 43%,
        #c4bde6 63%,
        #9fb5dc 82%,
        #f8fbff 100%
    );
    background-size:260% 100%;
    background-position:0% 50%;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    text-shadow:0 0 18px rgba(190,211,255,.12);
    animation:profile-name-shimmer 6s ease-in-out infinite;
}

/* Show the cutout as a larger, dimmer character without the avatar frame. */
.avatar-wrapper{
    background:transparent;
    box-shadow:none;
    overflow:visible;
}

.avatar-wrapper #avatar{
    border:0 !important;
    border-radius:0;
    object-fit:cover;
    object-position:center center;
    transform-origin:center bottom;
    transform:scale(1.22);
    filter:brightness(.76) saturate(.92);
}

@media(max-width:760px){
    .avatar-wrapper #avatar{
        transform:scale(1.16);
    }
}

@keyframes profile-name-shimmer{
    0%, 100%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }
}

@media(prefers-reduced-motion:reduce){
    .profile-copy #username{
        animation:none;
    }
}

@media(max-width:520px){
    .profile-intro{
        flex-direction:column;
        align-items:center;
        gap:16px;
        text-align:center;
    }

    .profile-copy{
        flex:0 1 auto;
        width:100%;
    }

    .profile-copy #username,
    .profile-copy #bio{
        text-align:center;
    }

    .profile-eyebrow{
        text-align:center;
    }
}

/* Improve contrast for the Spotify glass button. */
#spotifyOpen{
    -webkit-backdrop-filter:blur(5px) saturate(145%);
    backdrop-filter:blur(5px) saturate(145%);
}

#spotifyOpen:hover{
    border-color:rgba(104,244,194,.86);
    color:#42dfa8;
    background:
        linear-gradient(135deg, rgba(40,222,157,.2), rgba(86,242,185,.12)),
        rgba(24,132,96,.12);
    box-shadow:
        inset 0 1px 0 rgba(170,255,222,.36),
        0 0 18px rgba(65,222,165,.2);
}

#spotifyOpen:active{
    border-color:rgba(126,250,204,.95);
    color:#7af5c2;
    background:
        linear-gradient(135deg, rgba(50,229,165,.24), rgba(109,247,196,.16)),
        rgba(24,145,103,.16);
    box-shadow:
        inset 0 1px 0 rgba(201,255,234,.42),
        0 0 20px rgba(65,222,165,.28);
}

#spotifyOpen{
    background:rgba(255,255,255,.045);
}

#spotifyOpen:hover{
    background:rgba(255,255,255,.075);
}

#spotifyOpen:active{
    background:rgba(255,255,255,.095);
}

/* CodePen-style liquid glass layer: distort only the backdrop, never the text. */
.profile-card,
.discord-card,
.spotify-card,
.device-status-card,
.guestbook{
    background:transparent;
}

.profile-card::before,
.discord-card::before,
.spotify-card::before,
.device-status-card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:rgba(255,255,255,.1);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        inset 6px 6px 16px rgba(255,255,255,.12),
        0 10px 28px rgba(0,0,0,.35);
    opacity:1;
}

.discord-card::before,
.spotify-card::before,
.device-status-card::before{
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
}

.profile-card > *,
.discord-card > *,
.spotify-card > *,
.device-status-card > *,
.guestbook > *{
    position:relative;
    z-index:1;
}

.profile-card,
.discord-card,
.spotify-card,
.device-status-card{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
}

.guestbook{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

/* Keep every liquid-glass surface and its filter layer on the same radius. */
:root{
    --liquid-surface-radius:24px;
    --liquid-control-radius:14px;
}

.profile-card,
.glass,
.discord-card,
.spotify-card,
.device-status-card,
.guestbook{
    border-radius:var(--liquid-surface-radius);
}

.profile-card::before,
.discord-card::before,
.spotify-card::before,
.device-status-card::before{
    border-radius:inherit;
}

/* Keep Discord and Spotify equal-height in the desktop card row. */
@media(min-width:981px){
    .cards > .spotify-card,
    .cards > .discord-card{
        align-self:stretch;
    }
}

.socials a,
.guestbook-cancel,
#guestbookSubmit,
.guestbook-form input,
.guestbook-form textarea{
    border-radius:var(--liquid-control-radius);
}

#spotifyOpen{
    border-radius:999px;
}

@media(max-width:760px){
    :root{
        --liquid-surface-radius:20px;
    }
}

/* Match the progress highlight to the brightest color found in the album art. */
.spotify-card #progressBar{
    background:linear-gradient(
        90deg,
        rgba(var(--spotify-accent-strong),.96),
        rgba(var(--spotify-accent),.62)
    );
    box-shadow:0 0 12px rgba(var(--spotify-accent-strong),.46);
}

.spotify-card #progressBar.has-progress::after{
    background:linear-gradient(
        90deg,
        rgba(var(--spotify-accent-strong),0),
        rgba(var(--spotify-accent-strong),.9),
        rgba(var(--spotify-accent-strong),0)
    );
    box-shadow:
        0 0 22px rgba(var(--spotify-accent-strong),.62),
        0 0 38px rgba(var(--spotify-accent),.32);
}

/* Restore the original simple avatar frame. */
.avatar-wrapper{
    width:130px;
    height:130px;
    padding:0;
    display:block;
    background:transparent;
    box-shadow:none;
}

.avatar-wrapper #avatar{
    width:130px;
    height:130px;
    border:3px solid rgba(255,255,255,.12);
    box-shadow:none;
}

@media(max-width:760px){
    .avatar-wrapper{
        width:104px;
        height:104px;
    }

    .avatar-wrapper #avatar{
        width:104px;
        height:104px;
    }
}

/* Subtle glass edges: keep the outline visible only on close inspection. */
.profile-card,
.discord-card,
.spotify-card,
.device-status-card,
.guestbook{
    border-color:rgba(255,255,255,.09) !important;
    box-shadow:0 10px 28px rgba(0,0,0,.28) !important;
}

.profile-card::before,
.discord-card::before,
.spotify-card::before,
.device-status-card::before{
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 6px 6px 16px rgba(255,255,255,.035),
        0 10px 28px rgba(0,0,0,.28);
}

.socials a,
.guestbook-cancel,
#guestbookSubmit,
.guestbook-form input,
.guestbook-form textarea,
#cover{
    border-color:rgba(255,255,255,.09) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 6px 14px rgba(0,0,0,.1) !important;
}

.avatar-wrapper #avatar{
    border-color:rgba(255,255,255,.07) !important;
}

/* Use the original simple separators inside the guestbook. */
.guestbook-entry{
    padding:13px 0 15px;
    border-bottom:1px solid rgba(255,255,255,.035);
    border-radius:0;
}

.guestbook-entry:hover{
    background:transparent;
}

/* Remove the guestbook's outer glass box; use light separators for structure. */
.guestbook{
    padding-inline:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
}

.guestbook::before{
    display:none;
}

.guestbook-heading{
    border-bottom:1px solid rgba(255,255,255,.045);
}

.guestbook-form{
    border-top:1px solid rgba(255,255,255,.045);
    padding-top:14px;
}

/* Let the original background show without the dark page-wide overlay. */
#overlay{
    background:transparent !important;
}

/* Add a very light neutral tint to the main panel only. */
.profile-card{
    background:rgba(0, 0, 0, 0.1) !important;
}

/* Keep the guestbook fields on the same dark glass surface as the main panel. */
.guestbook-form input,
.guestbook-form textarea{
    background:rgba(0, 0, 0, 0.1) !important;
    box-shadow:none !important;
}

.guestbook-form input:focus,
.guestbook-form textarea:focus{
    border-color:rgba(255,255,255,.09) !important;
    outline:none !important;
    box-shadow:none !important;
}

.guestbook-form input:focus-visible,
.guestbook-form textarea:focus-visible{
    border-color:rgba(255,255,255,.09) !important;
    outline:none !important;
    box-shadow:none !important;
}

.guestbook-cancel,
#guestbookSubmit{
    box-shadow:none !important;
}

.profile-card::before{
    background:rgba(0, 0, 0, 0.08);
    -webkit-backdrop-filter:blur(1px);
    backdrop-filter:blur(1px);
}

/* Spotify button: follow the brightest readable color sampled from the cover. */
#spotifyOpen{
    color:rgb(var(--spotify-accent-strong, var(--spotify-accent))) !important;
    font-weight:700;
    text-shadow:0 1px 2px rgba(0,0,0,.22), 0 0 7px rgba(var(--spotify-accent-strong, var(--spotify-accent)),.18);
    border-color:rgba(var(--spotify-accent-strong, var(--spotify-accent)),.78) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 0 14px rgba(var(--spotify-accent-strong, var(--spotify-accent)),.2) !important;
}

#spotifyOpen:hover{
    color:rgb(var(--spotify-accent-strong, var(--spotify-accent))) !important;
    text-shadow:0 1px 2px rgba(0,0,0,.24), 0 0 8px rgba(var(--spotify-accent-strong, var(--spotify-accent)),.24);
    border-color:rgba(var(--spotify-accent-strong, var(--spotify-accent)),.98) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.24),
        0 0 20px rgba(var(--spotify-accent-strong, var(--spotify-accent)),.3) !important;
}

/* Discord loading skeleton: a soft two-hundred-percent shimmer sweep. */
.discord-content-stage{
    position:relative;
}

.discord-real-content{
    position:relative;
    z-index:1;
    transition:
        opacity .34s ease,
        transform .34s cubic-bezier(.22,1,.36,1);
}

.discord-skeleton{
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    align-items:flex-start;
    gap:12px;
    pointer-events:none;
    opacity:1;
    transform:translateY(0);
    transition:
        opacity .28s ease,
        transform .34s cubic-bezier(.22,1,.36,1),
        visibility .28s ease;
}

.discord-skeleton-avatar,
.discord-skeleton-bar{
    background:
        linear-gradient(
            105deg,
            rgba(255,255,255,.06) 25%,
            rgba(255,255,255,.23) 50%,
            rgba(255,255,255,.06) 75%
        );
    background-size:200% 100%;
    animation:shimmer-sweep 1.7s ease-in-out infinite alternate;
}

.discord-skeleton-avatar{
    width:64px;
    height:64px;
    flex:0 0 64px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;
}

.discord-skeleton-copy{
    display:flex;
    flex:1;
    flex-direction:column;
    gap:10px;
    padding-top:8px;
}

.discord-skeleton-bar{
    display:block;
    height:12px;
    border-radius:999px;
}

.discord-skeleton-bar-name{
    width:min(170px, 72%);
}

.discord-skeleton-bar-meta{
    width:min(112px, 48%);
    height:9px;
    opacity:.82;
}

.discord-card.is-discord-loading .discord-real-content{
    opacity:0;
    transform:translateY(8px);
    pointer-events:none;
}

.discord-card:not(.is-discord-loading) .discord-skeleton{
    visibility:hidden;
    opacity:0;
    transform:translateY(-8px);
}

@keyframes shimmer-sweep{
    from{ background-position:0% 50%; }
    to{ background-position:100% 50%; }
}

@media (prefers-reduced-motion: reduce){
    .discord-skeleton-avatar,
    .discord-skeleton-bar{
        animation:none;
    }
}

/* Guestbook loading skeleton uses the same shimmer and delayed reveal. */
.guestbook-list{
    position:relative;
    min-height:112px;
}

.guestbook-real-list{
    position:relative;
    z-index:1;
    transition:
        opacity .34s ease,
        transform .34s cubic-bezier(.22,1,.36,1);
}

.guestbook-loading-layer{
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:13px 0 15px;
    pointer-events:none;
    opacity:1;
    transform:translateY(0);
    transition:
        opacity .28s ease,
        transform .34s cubic-bezier(.22,1,.36,1),
        visibility .28s ease;
}

.guestbook-skeleton-avatar,
.guestbook-skeleton-bar{
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.03) 0%,
            rgba(255,255,255,.08) 22%,
            rgba(255,255,255,.34) 45%,
            rgba(255,255,255,.08) 68%,
            rgba(255,255,255,.03) 100%
        );
    background-size:200% 100%;
    animation:guestbook-shimmer-sweep 1.4s ease-in-out infinite;
    animation-delay:-.35s;
}

.guestbook-skeleton-avatar{
    width:48px;
    height:48px;
    flex:0 0 48px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;
}

.guestbook-skeleton-copy{
    display:flex;
    flex:1;
    flex-direction:column;
    gap:10px;
    padding-top:6px;
}

.guestbook-skeleton-bar{
    display:block;
    height:11px;
    border-radius:999px;
}

.guestbook-skeleton-bar-name{
    width:min(160px, 68%);
}

.guestbook-skeleton-bar-meta{
    width:min(108px, 46%);
    height:9px;
    opacity:.82;
}

.guestbook-list.is-loading .guestbook-real-list{
    opacity:0;
    transform:translateY(8px);
    pointer-events:none;
}

.guestbook-list:not(.is-loading) .guestbook-loading-layer{
    visibility:hidden;
    opacity:0;
    transform:translateY(-8px);
}

@keyframes guestbook-shimmer-sweep{
    from{ background-position:200% 0; }
    to{ background-position:-200% 0; }
}

@media (prefers-reduced-motion: reduce){
    .guestbook-skeleton-avatar,
    .guestbook-skeleton-bar{
        animation:none;
    }
}

/* Guestbook uses line-only placeholders, unlike the Discord avatar skeleton. */
.guestbook-loading-layer{
    flex-direction:column;
    align-items:flex-start;
    gap:11px;
    padding:13px 0 15px;
}

.guestbook-skeleton-bar{
    height:12px;
    border-radius:999px;
    background:
        linear-gradient(
            90deg,
            rgba(17,18,23,.72) 0%,
            rgba(30,31,37,.78) 22%,
            rgba(52,53,60,.9) 45%,
            rgba(30,31,37,.78) 68%,
            rgba(17,18,23,.72) 100%
        );
    background-size:200% 100%;
}

.guestbook-skeleton-bar-name{
    width:min(220px, 76%);
}

.guestbook-skeleton-bar-meta{
    width:min(220px, 76%);
    height:12px;
}

.guestbook-skeleton-bar-detail{
    width:min(132px, 46%);
    height:12px;
}

/* Keep the three guestbook lines, but match Discord's lighter skeleton look. */
.guestbook-skeleton-bar{
    background:
        linear-gradient(
            105deg,
            rgba(255,255,255,.06) 25%,
            rgba(255,255,255,.23) 50%,
            rgba(255,255,255,.06) 75%
        );
    background-size:200% 100%;
    animation:shimmer-sweep 1.7s ease-in-out infinite alternate;
    animation-delay:0s;
}

/* Restore Discord's cursor-following light without replacing the glass layer. */
.discord-card::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        radial-gradient(
            circle at var(--card-light-x, 50%) var(--card-light-y, 50%),
            rgba(255,255,255,.16),
            rgba(255,255,255,0) 84%
        );
    opacity:var(--card-light-opacity, 0);
    transition:opacity .28s ease;
}

/* Final layout overrides: stacked cards and separator-style social links. */
.profile-card{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(280px, 356px);
    column-gap:32px;
    align-items:start;
}

.profile-intro,
.guestbook{
    grid-column:1 / -1;
}

.cards{
    grid-column:1;
    grid-row:2;
    grid-template-columns:1fr !important;
    gap:14px;
    width:100%;
    margin-top:35px;
}

.socials{
    grid-column:2;
    grid-row:2;
    width:100%;
    margin:35px auto 0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    transform:rotateY(-5deg);
    transform-origin:left center;
    transition:transform .6s cubic-bezier(.22,1,.36,1);
}

.socials:hover{
    transform:rotateY(-10deg);
}

.socials a{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    min-height:48.65px;
    padding:11px 0;
    border:0 !important;
    border-top:1px solid rgba(255,255,255,.1) !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:rgb(243,244,245) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    font-size:16px;
    font-weight:400;
    letter-spacing:normal;
    text-decoration:none;
    opacity:.5;
    transition:opacity .2s ease;
}

.socials a:last-child{
    border-bottom:1px solid rgba(255,255,255,.04) !important;
}

.socials a:hover{
    opacity:1;
    background:transparent !important;
    color:rgb(243,244,245) !important;
    transform:none;
}

.social-icon{
    color:#fff;
    width:14px;
    height:14px;
    display:block;
    flex:0 0 14px;
    text-align:left;
    object-fit:contain;
}

.social-platform{
    color:#fff;
    font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size:11px;
    font-weight:400;
    letter-spacing:.12em;
    text-transform:lowercase;
    min-width:68px;
}

.social-divider{
    color:rgba(255,255,255,.2);
    font-size:11px;
    text-align:center;
}

.social-handle{
    color:rgba(255,255,255,.75);
    font-size:15px;
    font-weight:300;
    flex:1;
    text-align:left;
}

.social-arrow{
    color:rgba(255,255,255,.2);
    font-size:11px;
    opacity:0;
    transform:translateX(-4px);
    transition:opacity .2s ease, transform .2s ease;
}

.socials a:hover .social-arrow{
    opacity:1;
    transform:translateX(0);
}

@media(max-width:980px){
    .profile-card{
        display:block;
    }

    .cards{
        width:100%;
        margin-top:24px;
    }

    .socials{
        width:min(100%, 356px);
        margin:24px auto 0;
        transform:none;
    }

    .socials:hover{
        transform:none;
    }
}

/* Device status card placement and appearance. */
.device-status-card{
    grid-column:2;
    grid-row:3;
    width:100%;
    margin:14px auto 0;
    padding:18px;
    background:rgba(255,255,255,.045);
    border-color:rgba(255,255,255,.1);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 14px 34px rgba(0,0,0,.14);
}

.device-status-list{
    display:grid;
    gap:8px;
    margin-top:12px;
}

.device-status-row{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:46px;
    padding:9px 10px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    background:rgba(0,0,0,.12);
}

.device-status-icon{
    width:26px;
    font-size:19px;
    text-align:center;
}

.device-status-icon img{
    display:block;
    width:26px;
    height:26px;
    object-fit:contain;
    filter:drop-shadow(0 0 2px rgba(255,255,255,.24));
}

.device-status-copy{
    display:grid;
    gap:2px;
    min-width:0;
    flex:1;
}

.device-status-copy strong{
    font-size:13px;
    font-weight:500;
}

.device-status-copy small{
    overflow:hidden;
    color:rgba(255,255,255,.52);
    font-size:11px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.device-status-state{
    display:flex;
    align-items:center;
    gap:6px;
    color:rgba(255,255,255,.58);
    font-size:11px;
}

.device-status-state strong{
    min-width:28px;
    text-align:right;
    font-weight:500;
}

.device-status-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#80848e;
    box-shadow:0 0 8px rgba(128,132,142,.34);
}

.device-status-dot.is-online{
    background:#23a55a;
    box-shadow:0 0 9px rgba(35,165,90,.8);
}

.device-status-dot.is-sleeping{
    background:#f2c94c;
    box-shadow:0 0 9px rgba(242,201,76,.9);
}

.device-status-updated{
    margin:11px 0 0;
    color:rgba(255,255,255,.4);
    font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size:10px;
    text-align:right;
}

@media(max-width:980px){
    .device-status-card{
        grid-column:auto;
        grid-row:auto;
        width:min(100%, 356px);
        margin:18px auto 0;
    }
}
/* Final desktop placement: Device status stays in the lower-right column. */
@media(min-width:981px){
    .profile-card{
        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
    }

    .cards{
        grid-column:1 !important;
        grid-row:2 / span 2 !important;
    }

    .socials{
        grid-column:2 !important;
        grid-row:2 !important;
    }

    .device-status-card{
        grid-column:2;
        grid-row:3;
        justify-self:end;
        width:100% !important;
        max-width:none;
        margin:18px 0 0 !important;
    }
}

/* Fixed card placement and hover motion. */
.device-status-card{
    min-width:0;
    cursor:default;
    border:1px solid rgba(255,255,255,.17);
    isolation:isolate;
    transition:transform .16s cubic-bezier(.22,1,.36,1);
}

.device-status-card:hover{
    border-color:rgba(255,255,255,.3);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.3),
        0 18px 42px rgba(0,0,0,.24),
        0 0 28px rgba(159,194,255,.1);
}

.cards > .device-status-card{
    transform:perspective(900px)
        rotateX(var(--card-tilt-y, 0deg))
        rotateY(var(--card-tilt-x, 0deg));
    transform-style:preserve-3d;
    will-change:transform;
}

.cards.is-layout-animating > .device-status-card{
    transition:
        transform .42s cubic-bezier(.22,1,.36,1),
        opacity .24s ease;
    will-change:transform;
}

@media(min-width:981px){
    .cards{
        display:contents !important;
    }

    .cards > .device-status-card{
        grid-column:1;
        grid-row:2;
        width:100%;
        max-width:none;
        margin:35px 0 0 !important;
    }

    .cards > .spotify-card{
        grid-column:1;
        grid-row:3;
        width:100%;
    }

    .cards > .discord-card{
        grid-column:2;
        grid-row:3;
        width:100%;
    }
}

@media(max-width:980px){
    .cards{
        display:grid !important;
    }

    .cards > .device-status-card,
    .cards > .spotify-card,
    .cards > .discord-card{
        grid-column:auto !important;
        grid-row:auto !important;
        width:100%;
        margin:0;
    }
}

/* Device status uses the same transparent liquid-glass surface as Discord and Spotify. */
.device-status-card{
    background:transparent;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    border-color:rgba(255,255,255,.09);
    box-shadow:0 10px 28px rgba(0,0,0,.28);
    padding:18px;
}

.device-status-card::before{
    background:rgba(255,255,255,.1);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 6px 6px 16px rgba(255,255,255,.035),
        0 10px 28px rgba(0,0,0,.28);
    opacity:1;
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
    border-radius:inherit;
}