/* Fonts are served from this site (fonts/, licenses in fonts/LICENSE.txt), so visitors never contact Google */
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-700.woff2) format("woff2");font-weight:700;font-display:swap}
/* Layout: one centered profile card floating over a slow-moving dusk gradient; player docked inside the card. Single dark look by choice. */
:root{
  --bg:#120d0a; --bg2:#1f1713; --card:rgba(22,15,12,.76); --line:rgba(170,178,163,.2);
  --fg:#f1eee7; --muted:#c9cbbd; --accent:#d91c1c; --accent-text:#f24848; --live:#e91916; --accent2:#aab2a3;
  --on:#23a55a; --idle:#f0b232; --dnd:#f23f43; --off:#80848e; --spotify:#1db954;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Figtree",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;margin:0;overflow-x:hidden}
.sky{position:fixed;inset:0;z-index:0;overflow:hidden;background:#000}
/* Background: the music video picked for this visit (app.js). Until it starts, its still picture shows. */
/* Computers: the video is shown whole, in its own shape (never cropped or stretched), with plain black bars around it.
   Phones and tablets (touch screens): the video fills the whole screen, so the sides are cropped. */
.cam{position:absolute;inset:0;will-change:transform} /* the video never follows the mouse or phone tilt */
.bgv,.still{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;filter:brightness(.82) saturate(1.05)}
@media (hover:none) and (pointer:coarse){.bgv{object-fit:cover}} /* same test as PHONE in app.js. The still-bg.jpg picture ("Enter without the video") is never cropped */
.still{display:none}
.sky.novid .still{display:block}.sky.novid .bgv{visibility:hidden} /* reduce motion: a still picture, the music still plays */
.sky::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,9,7,.35),rgba(14,9,7,.2) 45%,rgba(14,9,7,.6))}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html{scroll-padding-bottom:96px}
main{position:relative;z-index:2;min-height:100vh;display:grid;place-items:center;padding-inline:16px;padding-block:48px calc(96px + env(safe-area-inset-bottom,0px))}
@media (max-width:560px){main{place-items:start center;padding-top:28px}}
.card{width:fit-content;min-width:min(100%,400px);max-width:min(100%,560px);background:var(--card);border:1px solid var(--line);border-radius:28px;padding:32px 24px 22px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:flex;flex-direction:column;align-items:center;gap:18px;box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.avatar{width:104px;height:104px;border-radius:50%;padding:3px;background:conic-gradient(from 200deg,var(--accent),var(--accent2),var(--accent));animation:spin 9s linear infinite}
.avatar>div{width:100%;height:100%;border-radius:50%;background:var(--bg2) center/cover;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:38px;animation:spin 9s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.who{text-align:center;display:grid;gap:4px}
h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,8vw,38px);line-height:1;margin:0;letter-spacing:-.02em;text-wrap:balance;overflow-wrap:anywhere}
.links{width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.links .sbadge,.links .steambadge{position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--muted);cursor:default}
.links .sbadge svg,.links .steambadge svg{width:26px;height:26px;fill:currentColor}
.sbadge i,.steambadge i{position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;border-radius:50%;border:3px solid var(--bg2);background:var(--off)}
.steambadge.online i{background:#57cbde}.steambadge.ingame i{background:#90ba3c}.steambadge.away i,.steambadge.snooze i{background:#c9a43b}.steambadge.busy i{background:var(--dnd)}
.sbadge i::after{content:"";position:absolute;background:var(--bg2);border-radius:50%}
.sbadge.offline i::after{inset:2.5px}
.discordbadge.idle i::after,.steambadge.away i::after,.steambadge.snooze i::after{width:7px;height:7px;top:-1px;left:-1px}
.discordbadge.dnd i::after,.steambadge.busy i::after{width:6px;height:2px;border-radius:1px;top:4px;left:2px}
@media (forced-colors:active){.sbadge i{background:CanvasText!important}.sbadge i::after{background:Canvas}}
.discordbadge.online i{background:var(--on)}.discordbadge.idle i{background:var(--idle)}.discordbadge.dnd i{background:var(--dnd)}
.links a{position:relative;display:grid;place-items:center;width:58px;height:58px;padding:0;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--fg);text-decoration:none;font-weight:600;transition:transform .15s,background .15s,border-color .15s}
.links a:hover{transform:translateY(-2px);background:rgba(217,28,28,.16);border-color:var(--accent)}
.links a:focus-visible,button:focus-visible,.vid:focus-visible,.track:focus-visible,.vol input:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.links svg{width:26px;height:26px;fill:currentColor}
.links .go,.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.links .live{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:4px;font:700 10px var(--mono);letter-spacing:.08em;color:#fff;background:var(--live);padding:2px 6px;border-radius:999px;box-shadow:0 0 0 2px var(--bg2)}
.links .live i{width:5px;height:5px;border-radius:50%;background:#fff;animation:blink 1.4s ease-in-out infinite}
.links a.is-live{border-color:var(--live);box-shadow:0 0 0 1px var(--live),0 0 22px -4px rgba(233,25,22,.7)}
body.is-live .avatar{box-shadow:0 0 0 3px var(--live),0 0 28px rgba(233,25,22,.6)}
@keyframes blink{50%{opacity:.25}}
.player{width:100%;border-top:1px solid var(--line);padding-top:16px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
/* music player slides open/closed: the row grows from 0 while the player fades and drops into place */
.mwrap{width:100%;display:grid;grid-template-rows:0fr;margin-top:-18px;transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1),margin-top .5s cubic-bezier(.2,.8,.2,1)}
.mwrap.open{grid-template-rows:1fr;margin-top:0}
.mclip{min-height:0;overflow:hidden}
.mwrap .player{opacity:0;transform:translateY(-12px) scale(.97);filter:blur(6px);transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1),filter .3s ease}
.mwrap.open .player{opacity:1;transform:none;filter:none;transition-delay:.1s}
.mtoggle .eq{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.mtoggle[aria-expanded="true"] .eq{transform:scale(1.15)}
.row{display:flex;align-items:center;gap:12px}
.cover{width:48px;height:48px;border-radius:10px;flex:none;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center}
.cover svg{width:22px;fill:var(--bg)}
.cover{overflow:hidden}.cover img{width:100%;height:100%;object-fit:cover;display:block}
.meta{min-width:0;flex:1}
.meta b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta span{font-size:13px;color:var(--muted)}
.play{width:44px;height:44px;border-radius:50%;border:0;background:var(--fg);color:var(--bg);cursor:pointer;display:grid;place-items:center;flex:none}
.play svg{width:18px;fill:currentColor}
.skip{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--fg);cursor:pointer;display:grid;place-items:center;flex:none;transition:border-color .15s,background .15s}
.skip:hover{border-color:var(--fg);background:rgba(255,255,255,.1)}
.skip svg{width:15px;height:15px;fill:currentColor}
@media (max-width:360px){.row{gap:8px}.skip{width:32px;height:32px}}
canvas.wave{width:100%;height:44px;display:block}
.bar{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.track{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.12);position:relative;cursor:pointer}
.track i{position:absolute;inset:0;border-radius:4px;background:var(--accent);transform:scaleX(0);transform-origin:left}
.track{touch-action:none}.track::before{content:"";position:absolute;inset:-10px 0}
/* splash */
.enter{position:fixed;inset:0;z-index:5;display:grid;place-items:center;background:rgba(14,9,7,.84);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;border:0;width:100%;color:var(--fg);font:800 22px var(--display);letter-spacing:.02em;transition:opacity .5s}
.enter{align-content:center;gap:18px;padding:0 20px 60px}
.enter .go{animation:pulse 2s ease-in-out infinite}
.enter .warn{display:block;max-width:36ch;margin:0 auto;font:500 14.5px/1.5 var(--body);letter-spacing:0;color:#f3d38a;text-align:center;text-wrap:balance}
.enter .warn svg{display:inline-block;width:17px;height:17px;margin-right:6px;vertical-align:-3px;fill:currentColor}
.enter-still{position:fixed;left:50%;bottom:calc(48px + env(safe-area-inset-bottom,0px));translate:-50% 0;z-index:6;font:600 13px var(--body);color:var(--fg);background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:999px;padding:12px 18px;min-height:44px;cursor:pointer;white-space:nowrap;transition:opacity .5s,border-color .15s}
.enter-still span{color:var(--muted);font-weight:400}
.enter-still:hover{border-color:var(--fg)}
.enter-still.gone{opacity:0;pointer-events:none}
@media (max-width:420px){.enter-still span{display:none}}
@keyframes pulse{50%{opacity:.4}}
.enter.gone{opacity:0;pointer-events:none}
.enter:focus-visible{outline:none}.enter:focus-visible .go{outline:2px solid var(--fg);outline-offset:10px;border-radius:10px}
.mtoggle{flex:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--fg);cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 30px -10px rgba(0,0,0,.7);transition:border-color .15s,transform .15s}
.dock{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:4;display:flex;align-items:center;gap:8px;max-width:calc(100% - 32px)}
.vol{display:flex;align-items:center;gap:10px;height:48px;padding:0 16px 0 6px;border-radius:999px;border:1px solid var(--line);background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 30px -10px rgba(0,0,0,.7);min-width:0}
.mute{position:relative;width:36px;height:36px;border-radius:50%;border:0;background:var(--fg);color:var(--bg);cursor:pointer;display:grid;place-items:center;flex:none}
.mute::after{content:"";position:absolute;inset:-4px} /* invisible: makes the tap area 44x44 while the button looks the same */
.mute svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mute.on{background:var(--accent);color:var(--fg)}
/* The visible bar is 8 px tall; the padding makes the slider 44 px tall to touch (background-clip keeps the bar itself 8 px;
   the radius is padding + 8 so the bar's ends stay round). */
.vol input{-webkit-appearance:none;appearance:none;box-sizing:content-box;width:150px;max-width:38vw;height:8px;padding:18px 0;border-radius:26px;cursor:pointer;background:linear-gradient(90deg,var(--accent) var(--p,60%),rgba(255,255,255,.22) var(--p,60%));background-clip:content-box;background-origin:content-box;outline-offset:0}
.vol input::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--fg);border:3px solid var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.5)}
.vol input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--fg);border:3px solid var(--accent)}
.vol output{font:500 12px var(--mono);color:var(--fg);width:3ch;text-align:right;font-variant-numeric:tabular-nums}
.mtoggle:hover{border-color:var(--accent);transform:translateY(-2px)}
.mtoggle[aria-expanded="true"]{border-color:var(--accent)}
.eq{display:flex;align-items:flex-end;gap:3px;height:16px}
.eq i{width:3px;height:16px;border-radius:2px;background:var(--accent);transform:scaleY(.3);transform-origin:bottom;transition:transform .2s}
body.playing .eq i{animation:eq .9s ease-in-out infinite}
body.playing .eq i:nth-child(2){animation-delay:-.3s}
body.playing .eq i:nth-child(3){animation-delay:-.6s}
@keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.visits{position:absolute;top:16px;right:18px;display:flex;align-items:center;gap:6px;font:500 12px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;z-index:1}
.visits svg{width:15px;height:15px;fill:currentColor;opacity:.8}
.avwrap{position:relative;width:104px;height:104px}
.extras{width:calc(100% + 24px);margin-inline:-12px;border-top:1px solid var(--line);padding-top:18px;display:grid;gap:10px}
.vid{display:flex;align-items:center;gap:14px;padding:12px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--fg);text-decoration:none;transition:transform .15s,border-color .15s}
.vid:hover{transform:translateY(-2px);border-color:var(--accent)}
.vthumb{width:112px;max-width:100%;flex:none;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.06)}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block}
.vtext{min-width:0;flex:1;display:grid;gap:3px}
.vlabel{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg)}
.vtext b{font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.vtext>span:last-child{font-size:12px;color:var(--muted)}
.stream{display:grid;gap:10px;padding:12px;border-radius:16px;background:rgba(233,25,22,.08);border:1px solid var(--live);color:var(--fg);text-decoration:none;box-shadow:0 0 24px -10px rgba(233,25,22,.7);transition:transform .15s}
.stream:hover{transform:translateY(-2px)}
.stream:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.sthumb{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#2a1a3d,#120d0a)}
.sthumb img{width:100%;height:100%;object-fit:cover;display:block}
.slive{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:5px;font:700 11px var(--mono);letter-spacing:.08em;color:#fff;background:var(--live);padding:3px 8px;border-radius:6px}
.slive i{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.4s ease-in-out infinite}
.sview{position:absolute;left:8px;bottom:8px;font:500 12px var(--mono);color:#fff;background:rgba(0,0,0,.7);padding:3px 8px;border-radius:6px}
.stext{display:grid;gap:3px;min-width:0}
.stext b{font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.stext>span:not(.vlabel){font-size:13px;color:var(--muted)}
.presence{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--fg)}
.pimg{width:52px;height:52px;flex:none;border-radius:12px;background:rgba(255,255,255,.06);display:grid;place-items:center;overflow:hidden}
.pimg img{width:100%;height:100%;object-fit:cover;display:block}
.pimg svg{width:26px;height:26px;fill:var(--muted)}
.ptext{min-width:0;flex:1;display:grid;gap:2px}
.ptext b{font-weight:600;overflow-wrap:anywhere}
.ptext>span{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.ptext>span img{width:16px;height:16px;vertical-align:-3px;margin-right:4px}
.ptext>.ptime{white-space:nowrap;font:500 12px var(--mono);font-variant-numeric:tabular-nums}
.ptime:empty{display:none}
.pbar{display:block;height:4px;border-radius:4px;background:rgba(255,255,255,.12);margin-top:4px;overflow:hidden}
.presence.paused .pimg{opacity:.55;filter:grayscale(.6)}
.presence.paused .ptime{color:var(--muted);letter-spacing:.04em}
.pbar i{display:block;height:100%;width:0;background:var(--spotify)}
.psrc{align-self:flex-start;flex:none;width:16px;height:16px;fill:var(--muted);opacity:.6}
/* 3D tilt: the card leans toward the mouse (or follows the phone's tilt) */
.card{position:relative;will-change:transform;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
@media (prefers-reduced-motion:reduce){.card{transform:none!important}}
@media (prefers-reduced-motion:reduce){.mwrap,.mwrap .player,.mtoggle .eq{transition:none!important}.links .live i,.slive i,body.playing .eq i,.avatar,.avatar>div,.enter .go{animation:none}}
.credit{margin:2px 0 0;max-width:min(100%,46ch);font-size:12.5px;line-height:1.5;color:var(--muted);text-align:center;text-wrap:balance}
.credit svg{display:inline-block;width:11px;height:11px;margin-right:5px;vertical-align:-1px;fill:currentColor;opacity:.8}
.credit a{color:var(--fg);text-decoration:underline;text-decoration-color:rgba(241,238,231,.35);text-underline-offset:2px}
.credit a:hover{text-decoration-color:var(--accent)}
.credit a:focus-visible{outline:2px solid var(--fg);outline-offset:2px;border-radius:3px}
/* 404 page (public/404.html) */
.nf{text-align:center}
.nf .avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.nfcode{font:700 12px var(--mono);letter-spacing:.14em;color:var(--accent-text)}
.nf p{margin:0;max-width:34ch;color:var(--muted);line-height:1.5;text-wrap:balance}
.nf .back{display:inline-block;padding:12px 22px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--fg);text-decoration:none;font-weight:600;transition:transform .15s,background .15s,border-color .15s}
.nf .back:hover{transform:translateY(-2px);background:rgba(217,28,28,.16);border-color:var(--accent)}
.nf .back:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.nf .back{transition:none}.nf .back:hover{transform:none}}