:root{--bg:#1b1b20;--card:#24242b;--line:#33333c;--text:#e6e6ec;--dim:#9a9aa8;--accent:#a78bfa;--accent-soft:rgba(167,139,250,.14);color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 ui-monospace,"JetBrains Mono","SF Mono",Menlo,Consolas,monospace}
main{max-width:600px;margin:0 auto;padding:72px 22px 40px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1{margin:0;font-size:26px;line-height:1.2}
h2{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:40px 0 12px;font-weight:600}
mark{background:var(--accent-soft);color:var(--accent);padding:1px 6px;border-radius:5px}
.nick{color:var(--dim);font-size:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px}

/* avatars */
.pfp{width:84px;height:84px;border-radius:50%;flex:none;object-fit:cover;background:linear-gradient(135deg,#7c5cd6,#a78bfa);display:grid;place-items:center;font-size:32px;font-weight:700;color:#1b1b20}
img.pfp{background:none}

/* header + cowboy hat */
header{display:flex;align-items:center;gap:18px;margin-top:34px}
.avatar{position:relative;flex:none;width:84px;height:84px}
.hat{position:absolute;left:-12px;top:-27px;width:106px;height:auto;transform:rotate(-14deg);transform-origin:50% 100%;pointer-events:none;filter:drop-shadow(0 0 1px #6b6b78) drop-shadow(0 2px 3px rgba(0,0,0,.5))}

/* discord bar */
.dc{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:999px}
.dc-av{position:relative;width:48px;height:48px;flex:none}
.dc-av .pfp{width:48px;height:48px;font-size:18px}
.dot{position:absolute;right:-1px;bottom:-1px;width:14px;height:14px;border-radius:50%;background:#747f8d;border:3px solid var(--card);transition:background .3s}
.dc-name{font-weight:700;font-size:16px;line-height:1.3}
.dc-status{color:var(--dim);font-size:13px;line-height:1.3}

/* last.fm */
.music{padding:14px 16px;display:flex;gap:14px;align-items:center;overflow:hidden}
.art{width:56px;height:56px;border-radius:8px;flex:none;background:var(--line);object-fit:cover}
.music small{color:var(--dim);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.music .t{font-weight:700;overflow-wrap:anywhere}
.music .a{color:var(--dim);font-size:14px}
.eq{display:none;gap:2px;align-items:flex-end;height:10px;margin-left:6px}
.eq i{width:3px;background:var(--accent);animation:b .9s infinite ease-in-out}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}
.live .eq{display:inline-flex}
@keyframes b{0%,100%{height:3px}50%{height:10px}}

/* details, links, clock */
dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 22px}
dt{color:var(--dim)}dd{margin:0}
.links{display:flex;flex-wrap:wrap;gap:10px}
.links a{border:1px solid var(--line);background:var(--card);padding:6px 14px;border-radius:999px;font-size:14px;color:var(--text);transition:.15s}
.links a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.clock{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
#time{font-size:30px;font-weight:700;color:var(--accent);letter-spacing:.02em}
#tzinfo{color:var(--dim);font-size:13px;text-align:right}
footer{margin-top:48px;color:var(--dim);font-size:13px}

/* background music control (top left) */
#ctl{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);left:14px;z-index:10;display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;background:var(--card);border:1px solid var(--line);border-radius:999px}
#mplay{width:30px;height:30px;border-radius:50%;border:0;background:var(--accent);color:#1b1b20;font-size:12px;cursor:pointer;display:grid;place-items:center;padding:0}
#mplay:hover{filter:brightness(1.1)}
#mvol{width:80px;accent-color:var(--accent);cursor:pointer}