/* EDIT DESIGN HERE. Text, links, avatar, media and song: Admin on celvin.rip. */
:root{
 --background:#050505; --text:#e9e8e8; --muted:#96939d; --quiet:#706d78;
 --accent:#9d5868; --accent-rgb:157,88,104; /* Try 140,125,185 for cool violet. */
 --border:rgba(255,255,255,.08); --radius:16px; --card-width:360px;
 --space:8px; --glass:rgba(15,14,18,.58); --grain-opacity:.045;
 --fog-opacity:.16; --moon-opacity:.6; --scene-media-opacity:.3;
 --beat-zoom:.022; --beat-light:.14; /* Maximum audio-driven zoom / brightness. */
 --title-font:'Grenze Gotisch','Cormorant Garamond',Georgia,serif; --display-font:'Pirata One',Georgia,serif; --subtitle-font:'Cormorant Garamond',Georgia,serif; --body-font:'Manrope',system-ui,sans-serif;
}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url('/profile/fonts/manrope-latin.woff2') format('woff2')}
@font-face{font-family:'Pirata One';font-style:normal;font-weight:400;font-display:swap;src:url('/profile/fonts/pirata-one-latin.woff2') format('woff2')}
@font-face{font-family:'Grenze Gotisch';font-style:normal;font-weight:500;font-display:swap;src:url('/profile/fonts/grenze-gotisch-500-latin.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url('/profile/fonts/cormorant-garamond-latin.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 600;font-display:swap;src:url('/profile/fonts/cormorant-garamond-latin-italic.woff2') format('woff2')}
*{box-sizing:border-box}html{color-scheme:dark;background:var(--background)}
body.clean-profile{margin:0;min-height:100svh;background:var(--background);color:var(--text);font:13px/1.65 var(--body-font);font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;isolation:isolate}
button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:disabled{cursor:wait}button,a,input{touch-action:manipulation}
:focus-visible{outline:2px solid #b3a5ba;outline-offset:5px}h1:focus{outline:none}svg{display:block}.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}[hidden]{display:none!important}
/* BACKGROUND: uploaded GIF / MP4 / image remains editable in Admin > Hintergrund. */
.ambient{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none;background:var(--scene-bg,var(--background))}
.ambient.beat-reactive{will-change:transform,filter;transform:scale(calc(1 + var(--beat-strength,0)*var(--beat-zoom)));filter:brightness(calc(1 + var(--beat-strength,0)*var(--beat-light)))}
.ambient>img,.ambient>video{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(1) brightness(.55) blur(var(--scene-blur,0px));opacity:var(--scene-media-opacity);transform:none}
.ambient:after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,var(--scene-dim,.3)),rgba(0,0,0,var(--scene-dim,.3))),radial-gradient(ellipse at 50% 65%,transparent 0%,#0505058a 100%)}
.moon{position:absolute;top:8%;left:calc(50% + 54px);width:116px;height:116px;border-radius:50%;background:url('/profile/moon.svg') center/contain;opacity:var(--moon-opacity);box-shadow:0 0 65px 10px #d2cfde0a,0 0 150px 25px #b2adca07;transform:rotate(-18deg)}
.fog{position:absolute;inset:25% -35% -20%;background:radial-gradient(ellipse at 27% 55%,#c4bbcb25,transparent 47%),radial-gradient(ellipse at 69% 30%,#c4c0ce18,transparent 40%);opacity:var(--fog-opacity);will-change:transform;animation:fog-drift 38s ease-in-out infinite alternate}
.fog-two{inset:5% -50% -30%;opacity:calc(var(--fog-opacity)*.75);animation-duration:53s;animation-direction:alternate-reverse}
.horizon{position:absolute;inset:50% 0 0;background:radial-gradient(ellipse at 50% 0,#7670800b,transparent 65%),linear-gradient(transparent,#050505)}
.vignette{position:fixed;inset:0;z-index:5;pointer-events:none;box-shadow:inset 0 0 100px 35px #0006;background:radial-gradient(ellipse at 50% 43%,transparent 30%,#0007 100%)}
.film-grain{position:fixed;inset:-10%;z-index:7;pointer-events:none;opacity:var(--grain-opacity);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E");background-size:180px;animation:grain-shift .8s steps(3) infinite;contain:strict}
#ashCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.55}
#cursorGlow{position:fixed;left:0;top:0;width:380px;height:380px;z-index:0;pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(var(--accent-rgb),.045),transparent 65%);transform:translate3d(-1000px,-1000px,0);transition:opacity .4s}
/* LAYOUT: 8px spacing scale, one width and radius for both cards. */
.site-chrome{position:absolute;top:20px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;z-index:8;transition:opacity .6s}.site-coordinate{display:flex;align-items:center;gap:10px;font-size:7px;letter-spacing:.16em;color:#74717b}.site-coordinate>span{width:14px;height:1px;background:#ffffff1c}
.quiet-button{width:36px;height:36px;display:grid;place-items:center;padding:10px;border:1px solid #ffffff0c;background:#ffffff02;border-radius:50%;color:#a7a3ac;transition:border-color .25s,color .25s,background .25s}.quiet-button svg{width:14px;height:14px}.quiet-button:hover{color:#fff;background:#ffffff05;border-color:#ffffff20}
.profile-stage{position:relative;z-index:2;min-height:100svh;display:grid;place-items:center;padding:94px 24px 82px}
.identity-card{width:min(100%,var(--card-width));text-align:center;perspective:900px}.identity{display:flex;align-items:center;flex-direction:column;gap:24px}.identity-copy{width:100%}
.portrait{position:relative;width:88px;height:88px;flex:none;border-radius:50%;padding:4px;background:linear-gradient(135deg,#ffffff32,#ffffff06);box-shadow:0 0 45px #0005}
.portrait:before{content:'';position:absolute;inset:-6px;border:1px solid rgba(var(--accent-rgb),.18);border-radius:50%;animation:avatar-breathe 5.5s ease-in-out infinite;pointer-events:none}.portrait:after{content:'';position:absolute;inset:2px;border:1px solid #ffffff1f;border-radius:50%;pointer-events:none}.portrait img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;filter:saturate(.6)}.portrait>span{display:grid;place-items:center;width:100%;height:100%;font-size:32px}
.name-line h1{position:relative;display:inline-block;font-family:var(--title-font);font-size:clamp(68px,18vw,88px);font-weight:500;line-height:1.16;letter-spacing:.012em;font-kerning:normal;margin:0;overflow-wrap:anywhere;text-wrap:balance;animation:none;text-shadow:0 2px 18px #00000059}
.name-line h1:before,.name-line h1:after{content:attr(data-title);position:absolute;inset:0;opacity:0;pointer-events:none}.name-line h1:before{color:#ae687d;clip-path:inset(21% 0 52%)}.name-line h1:after{color:#9895b8;clip-path:inset(60% 0 15%)}
.profile-subline{min-height:24px;margin:14px 0 0;color:#b8b0a9;font-family:var(--subtitle-font);font-size:18px;font-style:italic;letter-spacing:.04em;overflow-wrap:anywhere}.typewriter.typing:after{content:'';display:inline-block;width:1px;height:10px;margin-left:4px;background:#9f7c87;vertical-align:-1px;animation:caret .9s steps(1) infinite}
.badges{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}.badges:empty{display:none}.badges .badge{padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:#8c8792!important;font:8px/1.5 var(--body-font)!important;letter-spacing:.2em;text-transform:uppercase;display:inline-flex;align-items:center;gap:5px}.badge img,.badge svg{width:11px;height:11px}
/* GLASS CARDS: inexpensive transforms; blur remains fixed while tilting. */
.presence-wrap{margin-top:28px}.clean-profile .discord-presence,.soundtrack{width:100%;margin:0;border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(135deg,#ffffff04,transparent 58%),var(--glass);box-shadow:0 10px 40px #0003,inset 0 1px 0 #ffffff04;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s;position:relative}
.clean-profile .discord-presence{padding:18px;text-align:left;transform:perspective(800px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(var(--lift,0px));transform-style:preserve-3d}
.discord-presence:before,.soundtrack:before{content:'';position:absolute;top:-1px;left:18px;right:18px;height:1px;background:linear-gradient(90deg,transparent,#ffffff13,transparent);pointer-events:none}
.clean-profile .discord-presence-header{gap:12px}.clean-profile .discord-avatar-wrap{width:40px;height:40px}.clean-profile .discord-avatar-wrap>img{width:40px;height:40px}.clean-profile .discord-presence-identity strong{font-size:12px;font-weight:600}.clean-profile .discord-presence-identity>span{font-size:10px;color:var(--muted)}.clean-profile .discord-open{font-size:12px;opacity:.6}.clean-profile .discord-custom-status{margin-top:14px;color:#bbb6c1;font-size:11px;line-height:1.6}.clean-profile .discord-presence>.discord-badge-row{margin-top:10px;gap:7px}.clean-profile .discord-profile-badge img{width:22px;height:22px}.clean-profile .discord-updated{display:flex;align-items:center;gap:5px;margin-top:13px;font-size:8px;color:#7e7885;letter-spacing:.015em}.clean-profile .discord-updated:not(:empty):before{content:'';width:3px;height:3px;border-radius:50%;background:#8a7b8a}.clean-profile .discord-activity{border-color:#ffffff09}.clean-profile .discord-spotify{border-color:#ffffff09}
/* SOCIALS: icon-only row, labels remain accessible and appear on hover/focus. */
.connections{margin:16px 0 0}.socials{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.socials .link-btn{position:relative;display:grid;place-items:center;width:38px;height:38px;padding:9px!important;border:1px solid var(--border)!important;border-radius:12px!important;background:#10101445!important;color:#9d98a5!important;box-shadow:none!important;cursor:pointer!important;transition:color .25s,transform .25s,border-color .25s,box-shadow .25s}.socials .li{display:grid;place-items:center;color:inherit!important}.socials .li svg{width:18px;height:18px}.socials .link-label,.socials .arr{display:none}.socials .discord-link .li{color:inherit!important;filter:none}.socials .discord-link .li svg{width:19px;height:19px}
[data-tooltip]{position:relative}[data-tooltip]:after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 9px);left:50%;transform:translate(-50%,4px);padding:5px 8px;border:1px solid var(--border);border-radius:6px;background:#17151c;color:#d2cdd8;font:9px/1.4 var(--body-font);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:10}[data-tooltip]:hover:after,[data-tooltip]:focus-visible:after{opacity:1;transform:translate(-50%,0)}.site-chrome [data-tooltip]:after{bottom:auto;top:calc(100% + 9px);left:auto;right:0;transform:translateY(4px)}
/* PLAYER: real duration/seek/volume. Equalizer is a playback indicator. */
.player-wrap{margin-top:16px}.player-wrap:empty{display:none}.soundtrack{text-align:left;padding:16px 18px 13px;overflow:visible}.player-top,.player-bottom{display:flex;align-items:center;justify-content:space-between}.player-caption,.player-source{font-size:7px;letter-spacing:.18em;color:#918895}.player-caption{display:flex;align-items:center;gap:7px}.player-caption:before{content:'';width:3px;height:3px;border-radius:50%;background:var(--accent)}.equalizer{height:12px;display:flex;align-items:center;gap:3px;color:#a48291}.equalizer i{width:2px;height:9px;border-radius:2px;background:currentColor;transform:scaleY(.3);animation:equalize .9s ease-in-out infinite alternate;animation-play-state:paused}.equalizer i:nth-child(2){animation-delay:-.2s;height:12px}.equalizer i:nth-child(3){animation-delay:-.6s;height:7px}.equalizer i:nth-child(4){animation-delay:-.4s;height:11px}.equalizer i:nth-child(5){animation-delay:-.8s;height:8px}.playing .equalizer i{animation-play-state:running}
.player-main{display:flex;align-items:center;gap:12px;margin:13px 0 12px}.music-toggle{display:grid;place-items:center;flex:none;width:38px;height:38px;padding:10px;border:1px solid #ffffff12;background:#ffffff05;color:#ded8e3;border-radius:50%;transition:background .25s,transform .25s}.music-toggle svg{width:16px;height:16px}.music-toggle .icon-play{margin-left:2px}.music-toggle .icon-pause,.playing .music-toggle .icon-play{display:none}.playing .music-toggle .icon-pause{display:block}.music-toggle:hover{background:#ffffff0b;transform:scale(1.04)}.song-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.song-copy strong{display:block;font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#d0cad5}.song-copy [data-player-state]{font-size:9px;color:#817987}
.seek-row{display:flex;align-items:center;gap:9px;margin-bottom:7px}.seek-row>span{font:8px/1 var(--body-font);font-variant-numeric:tabular-nums;color:#8e8594;min-width:25px}.seek-row>span:last-child{text-align:right}.seek-row input{flex:1;min-width:0}.volume-control{display:flex;align-items:center;gap:8px;color:#928799}.volume-control svg{width:12px;height:12px}.volume-control input{width:62px}
input[type=range]{--progress:0%;appearance:none;-webkit-appearance:none;height:22px;background:transparent;margin:0;cursor:pointer;accent-color:#ba9aa8}input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:3px;background:linear-gradient(to right,#bfa1ae var(--progress),#ffffff16 var(--progress))}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:7px;height:7px;border-radius:50%;background:#c8b3bd;margin-top:-2.5px;box-shadow:0 0 8px #b897a144}input[type=range]::-moz-range-track{height:2px;border-radius:3px;background:#ffffff16}input[type=range]::-moz-range-progress{height:2px;background:#bfa1ae}input[type=range]::-moz-range-thumb{width:7px;height:7px;border-radius:50%;background:#c8b3bd;border:0}input[type=range]:disabled{opacity:.3;cursor:default}
.soundtrack-player iframe,.soundtrack-player audio{position:fixed;left:-10000px;top:0;width:330px;height:210px;border:0;pointer-events:none}.soundtrack-player .profile-music-label,.soundtrack-player .profile-music>a{display:none}.music-feedback{font-size:10px;color:#b9a6b0;line-height:1.6;margin:10px 0 0}.music-fallback{display:block;margin-top:6px;font-size:10px;color:#a38c9c;text-decoration:underline;text-underline-offset:3px}
.visitors{display:flex;align-items:center;justify-content:center;gap:6px;margin:20px 0 0;color:#746e7b;font-size:9px;font-variant-numeric:tabular-nums}.visitors svg{width:13px;height:13px}.site-footer{position:absolute;bottom:18px;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;font-size:6px;letter-spacing:.16em;color:#625b69;z-index:8;pointer-events:none}.footer-mark{font-size:12px;color:#96818c}.site-footer{position:relative;margin-top:-40px;bottom:auto;left:auto;right:auto;padding:0 24px 20px}
#copyStatus{position:fixed;bottom:28px;left:50%;transform:translate(-50%,8px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;border:1px solid var(--border);border-radius:10px;background:#17141dea;color:#d4cbd9;padding:10px 16px;font-size:11px;max-width:90vw;overflow-wrap:anywhere;z-index:1010}#copyStatus.visible{opacity:1;transform:translate(-50%,0)}
/* ENTRY: existing Admin settings still control GIF/MP4, text, tint and blur. */
.entry-screen{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%;height:100%;border:0;border-radius:0;background:rgba(var(--entry-rgb,5,5,5),var(--entry-opacity,.35));backdrop-filter:blur(var(--entry-blur,0px));-webkit-backdrop-filter:blur(var(--entry-blur,0px));color:var(--entry-color,#eee);overflow:hidden;padding:24px;transition:opacity .65s ease}
.entry-screen>.entry-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(var(--entry-blur,0px));opacity:.6;pointer-events:none}.entry-screen:after{content:'';position:absolute;inset:0;background:rgba(var(--entry-rgb,5,5,5),var(--entry-opacity,.35));pointer-events:none}.entry-screen span,.entry-screen small{position:relative;z-index:1}.entry-screen span{font:400 var(--entry-size,22px)/1.4 var(--display-font);letter-spacing:.05em;max-width:90vw;overflow-wrap:anywhere;transition:text-shadow .3s}.entry-screen small{font-size:6px;letter-spacing:.35em;color:#a299a4}.entry-screen:hover span{text-shadow:0 0 22px #c2b3c14d}.entry-screen.leaving{opacity:0;pointer-events:none}.entry-pending .profile-stage,.entry-pending .site-chrome,.entry-pending .site-footer{visibility:hidden;opacity:0}.entry-pending .reveal{animation:none;opacity:0}.reveal{animation:soft-reveal .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--order,0)*90ms)}
@keyframes soft-reveal{from{opacity:0;filter:blur(6px);transform:translateY(12px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes fog-drift{from{transform:translate3d(-6%,3%,0)}to{transform:translate3d(6%,-2%,0)}}
@keyframes grain-shift{0%,100%{transform:translate(0)}25%{transform:translate(1%,-1%)}50%{transform:translate(-1%,1%)}75%{transform:translate(-1%,-1%)}}
@keyframes avatar-breathe{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.8;transform:scale(1.025)}}
@keyframes title-flicker{0%,94%,96%,100%{opacity:1}95%{opacity:.92}97%{opacity:.97}}
@keyframes chromatic{0%,100%{opacity:0;transform:translateX(0)}20%,60%{opacity:.45;transform:translateX(2px)}40%,80%{opacity:.35;transform:translateX(-2px)}}
@keyframes caret{50%{opacity:0}}
@keyframes equalize{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@media(min-width:700px){.site-chrome{top:30px;left:40px;right:40px}.site-coordinate{font-size:8px}.profile-stage{padding:100px 24px 86px}.identity{gap:28px}.portrait{width:96px;height:96px}.presence-wrap{margin-top:32px}.moon{top:10%;left:calc(50% + 125px);width:156px;height:156px}.site-footer{padding:0 40px 24px;font-size:7px}.vignette{box-shadow:inset 0 0 180px 80px #0007}}
@media(hover:hover) and (pointer:fine){.name-line h1:hover:before,.name-line h1:hover:after{animation:chromatic .45s steps(2) 2}.name-line h1:hover:after{animation-direction:reverse}.socials .link-btn:hover{color:#e3d8e7!important;transform:translateY(-3px);border-color:rgba(var(--accent-rgb),.3)!important;box-shadow:0 0 20px rgba(var(--accent-rgb),.08)!important}.clean-profile .discord-presence:hover,.soundtrack:hover{border-color:#ffffff18;box-shadow:0 15px 45px #0004,0 0 24px rgba(var(--accent-rgb),.035)}.soundtrack:hover{transform:translateY(-2px)}}
@media(max-height:740px){.profile-stage{padding-top:80px;padding-bottom:65px}.identity{gap:16px}.portrait{width:76px;height:76px}.name-line h1{font-size:64px}.presence-wrap{margin-top:22px}.moon{top:5%;width:100px;height:100px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1!important;filter:none!important;transform:none!important}.clean-profile .discord-presence{transform:none!important}.film-grain{transform:none}#ashCanvas,#cursorGlow{display:none}.entry-pending .reveal{opacity:0!important}}
@media(prefers-reduced-motion:reduce){.ambient.beat-reactive{transform:none!important;filter:none!important;will-change:auto}}

.clean-profile.discord-live-enabled .connections:has(.socials>.discord-link:only-child){display:block}.clean-profile.discord-live-enabled .socials .discord-link{display:grid!important}.effects-paused *,.effects-paused *:before,.effects-paused *:after{animation-play-state:paused!important}

/* Minimal chrome: keep sharing at the right and only the small footer mark. */
.site-chrome{justify-content:flex-end}.site-footer{justify-content:center}

/* Custom backgrounds: show the selected source without the default moon, fog, grain or colour treatment. */
.native-background .ambient>img,.native-background .ambient>video{opacity:1;filter:blur(var(--scene-blur,0px))}.native-background .ambient:after{background:rgba(0,0,0,var(--scene-dim,.3))}

/* Smaller, softer Gothic title; keep the small UI readable and understated. */
.name-line h1{color:#f0eeee}.name-line h1:before,.name-line h1:after{display:none}.entry-screen span{font-style:normal;letter-spacing:.025em;font-size:calc(var(--entry-size,22px)*1.15)}.clean-profile .discord-presence{font-family:var(--body-font)}.clean-profile .discord-presence-identity strong{font-weight:500;letter-spacing:.025em}.song-copy strong{font-weight:400;letter-spacing:.015em}.profile-subline .typewriter.typing:after{height:13px;background:#b6a18d}.badges .badge{letter-spacing:.22em}