:root {
    --bg:      #080808;
    --bg2:     #0c0c0c;
    --bg3:     #111111;
    --text:    #f0f0f0;
    --muted:   #606060;
    --muted2:  #2e2e2e;
    --border:  rgba(255,255,255,0.06);
    --bh:      rgba(255,255,255,0.11);
    --font:    'Space Grotesk', system-ui, sans-serif;
    --mono:    'DM Mono', monospace;
    --ease:    cubic-bezier(.16,1,.3,1);
    --online:  #43b581;
    --idle:    #faa61a;
    --dnd:     #f04747;
    --offline: #747f8d;
    --adr:     #cc2222;
    --adr-dim: rgba(204,34,34,0.08);
    --adr-bdr: rgba(204,34,34,0.22);
}

* { margin: 0; padding: 0; box-sizing: border-box; cursor: none !important; }
html { scroll-padding-top: 72px; background: var(--bg); overflow-x: hidden; scrollbar-gutter: stable; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body::after {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    opacity: 0.018;
    pointer-events: none;
    z-index: 9997;
}

#cursor {
    position: fixed; top: 0; left: 0;
    width: 10px; height: 10px;
    background: #fff; border-radius: 50%;
    pointer-events: none; z-index: 99999;
    transform: translate(-50%,-50%);
    transition: width .15s var(--ease), height .15s var(--ease), opacity .2s, background .15s;
    box-shadow: 0 0 8px rgba(255,255,255,.45);
    opacity: .9;
}
#cursor.hover  { width: 20px; height: 20px; opacity: 1; }
#cursor.click  { width: 14px; height: 14px; background: #43b581; box-shadow: 0 0 12px rgba(67,181,129,.7); }
#cursor.hidden { opacity: 0; }

@media (max-width: 768px) {
    * { cursor: default !important; }
    #cursor { display: none; }
    .presence-card { flex-direction: column; }
    .pres-profile  { min-width: 0; }
    .pres-divider  { width:auto; height:1px; margin:0 20px; align-self:auto; }
    .activities    { padding:16px 20px; }
}

.wakeup-overlay {
    position: fixed; inset: 0;
    background: var(--bg);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    opacity: 1;
    transition: opacity 1.2s var(--ease);
    pointer-events: auto;
}
.wakeup-overlay.fade-out { opacity: 0; pointer-events: none; }
.wakeup-overlay.hidden   { display: none; }
.wakeup-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.wakeup-dot {
    width: 10px; height: 10px;
    background: #fff; border-radius: 50%;
    animation: wakeup-pulse 2s ease-in-out infinite;
}
.wakeup-text {
    font-family: var(--mono); font-size: 13px;
    color: var(--muted); letter-spacing: .08em;
    opacity: 0;
    animation: wake-text 2s ease-in-out .3s infinite;
}
@keyframes wakeup-pulse {
    0%,100% { transform:scale(1); opacity:.3; box-shadow:0 0 0 0 rgba(255,255,255,.5); }
    50%      { transform:scale(1.2); opacity:1; box-shadow:0 0 0 14px rgba(255,255,255,0); }
}
@keyframes wake-text {
    0%,100% { opacity:0; transform:translateY(5px); }
    50%     { opacity:.7; transform:translateY(0); }
}

.starfield {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}
.star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    animation: twinkle 4s ease-in-out infinite;
}
.star.small  { width:1px; height:1px; opacity:.35; }
.star.medium { width:2px; height:2px; opacity:.6;
               animation: twinkle 3s ease-in-out infinite, star-float 9s ease-in-out infinite; }
.star.large  { width:3px; height:3px; opacity:.9;
               box-shadow: 0 0 8px rgba(255,255,255,.7), 0 0 16px rgba(255,255,255,.3);
               animation: twinkle 2s ease-in-out infinite, star-float 13s ease-in-out infinite; }
@keyframes twinkle {
    0%,100% { opacity:.15; }
    50%     { opacity:1; }
}
@keyframes star-float {
    0%,100% { transform:translateY(0) translateX(0); }
    25%     { transform:translateY(-8px) translateX(4px); }
    75%     { transform:translateY(4px) translateX(-3px); }
}

#scroll-progress {
    position: fixed; top:0; left:0;
    height: 2px; width: 0%;
    background: rgba(255,255,255,.45);
    box-shadow: 0 0 8px rgba(255,255,255,.25);
    z-index: 9998;
    transition: width .1s linear;
}

#nav {
    position: fixed; top:0; left:0; right:0;
    z-index: 1000; padding: max(22px, env(safe-area-inset-top, 0px)) 0 22px;
    border-bottom: 1px solid transparent;
    transition: padding .35s var(--ease), background .35s, border-color .35s;
}
#nav.stuck {
    padding: max(12px, env(safe-area-inset-top, 0px)) 0 12px;
    background: rgba(13,13,13,.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-color: var(--border);
}
.nav-inner {
    max-width: 1100px; margin: 0 auto;
    padding: 0 clamp(16px,4vw,40px);
    display: flex; align-items: center; justify-content: space-between;
}
.nav-brand { font-size:16px; font-weight:700; letter-spacing:-.04em; color:var(--text); user-select:none; }
.nav-dot   { color: rgba(255,255,255,.3); }
.nav-links { display:flex; gap:4px; }
.nav-btn {
    background: none; border: none;
    color: var(--muted);
    font-family: var(--font); font-size:14px; font-weight:500;
    padding: 8px 16px; border-radius: 999px;
    cursor: pointer; letter-spacing:-.01em;
    transition: color .2s, background .2s;
    -webkit-tap-highlight-color: transparent;
}
.nav-btn:hover  { color:var(--text); background:rgba(255,255,255,.05); }
.nav-btn.active { color:var(--text); background:rgba(255,255,255,.09); }

.section {
    position: relative; z-index: 1;
    padding: 64px 0;
}
#home {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex; flex-direction: column; justify-content: center;
    padding-top: max(86px, calc(env(safe-area-inset-top, 0px) + 64px));
    padding-bottom: 64px;
}
#work, #skills, #contact { background: var(--bg2); }


.wrap {
    max-width: 1100px; margin: 0 auto;
    padding: 0 clamp(16px,4vw,40px);
    position: relative; z-index: 1;
}

.hero { padding: clamp(40px,9vh,90px) 0 clamp(36px,6vh,60px); }
.hero-meta { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.mono { font-family: var(--mono); }
.hero-loc { font-size:12px; color:var(--muted); letter-spacing:.07em; }
.status-badge {
    display: inline-flex; align-items: center; gap:7px;
    padding: 4px 12px;
    border: 1px solid var(--border); border-radius: 999px;
    font-size:11px; color:var(--muted); letter-spacing:.06em;
}
.live-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; background:var(--offline); }
.live-dot.online  { background:var(--online);  box-shadow:0 0 6px rgba(67,181,129,.7);  animation:blink-dot 2s ease-in-out infinite; }
.live-dot.idle    { background:var(--idle);    box-shadow:0 0 6px rgba(250,166,26,.7);  animation:blink-dot 2s ease-in-out infinite; }
.live-dot.dnd     { background:var(--dnd); }
.live-dot.offline { background:var(--offline); }
@keyframes blink-dot { 0%,100%{opacity:.4;} 50%{opacity:1;} }

.hero-name {
    font-size: clamp(34px,11vw,96px);
    font-weight: 700; letter-spacing:-.055em; line-height:1;
    color: var(--text); margin-bottom:22px;
    animation: fade-up .8s var(--ease) both;
}
.hero-name-dot { color: rgba(255,255,255,.15); }
.hero-tagline {
    font-size: clamp(15px,2vw,18px);
    color: var(--muted); font-weight:400; letter-spacing:-.01em;
    animation: fade-up .8s var(--ease) .12s both;
}
.hero-bio {
    font-size: clamp(13px,1.5vw,15px);
    color: var(--muted); line-height: 1.85;
    max-width: 480px; margin-top: 18px;
    letter-spacing: -.005em;
    animation: fade-up .8s var(--ease) .22s both;
}
@keyframes fade-up {
    from { opacity:0; transform:translateY(22px); }
    to   { opacity:1; transform:translateY(0); }
}

.presence-card {
    display: flex; align-items: stretch;
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: 20px; margin-bottom: 14px;
    overflow: hidden; position: relative;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.presence-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
    pointer-events:none;
}
.presence-card:hover { border-color:var(--bh); box-shadow:0 10px 44px rgba(0,0,0,.45); }

.pres-profile {
    display: flex; align-items: center; gap: 22px;
    padding: 32px 44px; flex-shrink: 0; min-width: 320px;
}
.avatar-wrap { position:relative; flex-shrink:0; }
.pres-avatar { width:76px; height:76px; border-radius:50%; display:block; }
.pres-info { display:flex; flex-direction:column; gap:4px; }
.pres-eyebrow { font-size:10px; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px; }
.pres-name   { font-size:22px; font-weight:700; letter-spacing:-.04em; color:var(--text); }
.pres-status { font-size:11px; color:var(--muted); letter-spacing:.05em; }
.pres-loc    { font-size:10px; color:var(--muted2); letter-spacing:.06em; margin-top:5px; }

.status-ring {
    position:absolute; bottom:2px; right:2px;
    width:16px; height:16px; border-radius:50%;
    border:3px solid var(--bg2);
    transition: background .3s, box-shadow .3s;
}
.status-ring.online  { background:var(--online);  box-shadow:0 0 6px rgba(67,181,129,.5); }
.status-ring.idle    { background:var(--idle);    box-shadow:0 0 6px rgba(250,166,26,.5); }
.status-ring.dnd     { background:var(--dnd);     box-shadow:0 0 6px rgba(240,71,71,.5); }
.status-ring.offline { background:var(--offline); }

.pres-divider {
    width: 1px; background: var(--border);
    flex-shrink: 0; align-self: stretch; margin: 20px 0;
}

.music-corner {
    position: fixed; bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 12px)); right: 24px; z-index: 900;
    width: 236px;
    background: rgba(9,9,9,.95);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px; overflow: hidden;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    transition: opacity .3s, transform .7s cubic-bezier(.16,1,.3,1), box-shadow .4s;
    will-change: transform;
    box-shadow: 0 4px 24px rgba(0,0,0,.4);
}
.music-corner:hover {
    box-shadow: 0 16px 48px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.1);
}
.mc-glare {
    position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; z-index: 1;
    background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), transparent 65%);
    opacity: 0; transition: opacity .25s;
}
.music-corner:hover .mc-glare { opacity: 1; }
.mc-body {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px 9px;
}
.mc-art-wrap {
    position: relative; flex-shrink: 0;
    width: 34px; height: 34px;
}
.mc-art-wrap::after {
    content: ''; position: absolute; inset: 0;
    border-radius: 50%; margin: auto;
    width: 7px; height: 7px;
    background: rgba(9,9,9,.95);
    box-shadow: 0 0 0 1.5px rgba(255,255,255,.15);
    opacity: 0; transition: opacity .3s;
    pointer-events: none; z-index: 1;
}
.music-corner.playing .mc-art-wrap::after { opacity: 1; }
.mc-art {
    width: 34px; height: 34px; border-radius: 6px;
    object-fit: cover;
    opacity: .85; transition: opacity .3s, border-radius .4s var(--ease), transform .3s;
}
.music-corner.playing .mc-art {
    opacity: 1; border-radius: 50%;
    animation: mc-vinyl 10s linear infinite;
}
@keyframes mc-vinyl { to { transform: rotate(360deg); } }
.mc-info { min-width: 0; flex: 1; }
.mc-title  { font-size: 11.5px; font-weight: 600; letter-spacing: -.02em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-artist { font-size: 9.5px; color: var(--muted); letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.mc-controls { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mc-eq {
    display: flex; align-items: flex-end; gap: 2px;
    height: 12px; opacity: 0; transition: opacity .3s;
}
.music-corner.playing .mc-eq { opacity: 1; }
.mc-eq span {
    display: block; width: 2px; border-radius: 1px;
    background: rgba(255,255,255,.4);
    animation: mc-eq 1s ease-in-out infinite;
}
.mc-eq span:nth-child(1) { animation-delay:  0s; }
.mc-eq span:nth-child(2) { animation-delay: .2s; }
.mc-eq span:nth-child(3) { animation-delay: .1s; }
.mc-eq span:nth-child(4) { animation-delay: .3s; }
@keyframes mc-eq { 0%,100%{height:2px} 50%{height:11px} }
.mc-btn {
    background: none; border: none; padding: 2px;
    color: rgba(255,255,255,.5); font-size: 11px;
    cursor: pointer; flex-shrink: 0; line-height: 1;
    transition: color .15s;
}
.mc-btn:hover  { color: var(--text); }
.mc-btn:active { opacity: .6; }
.mc-track { position: relative; z-index: 2; height: 1.5px; background: rgba(255,255,255,.05); }
.mc-fill  { height: 100%; background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.5)); width: 0%; transition: width .1s linear; }

.activities {
    display: flex; flex-direction: row; flex-wrap: wrap;
    gap: 12px; padding: 28px 32px; flex: 1; align-content: center;
}
.act-card { flex: 1; min-width: 200px; }
.act-card { background:var(--bg3); border:1px solid var(--border); border-radius:12px; padding:13px; }
.act-card.spotify { border-color:rgba(30,215,96,.2); background:rgba(30,215,96,.03); }
.act-header { display:flex; align-items:center; gap:7px; margin-bottom:9px; }
.act-icon { font-size:11px; color:var(--muted); width:14px; text-align:center; }
.act-icon.spi { color:#1ed760; }
.act-type { font-family:var(--mono); font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.act-row { display:flex; align-items:center; gap:10px; }
.act-art { width:38px; height:38px; border-radius:6px; object-fit:cover; flex-shrink:0; }
.act-title  { font-size:13px; font-weight:600; color:var(--text); margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.act-detail { font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.act-progress { margin-top:9px; height:3px; background:rgba(255,255,255,.07); border-radius:2px; overflow:hidden; }
.act-fill { height:100%; background:#1ed760; border-radius:2px; transition:width .1s linear; }
.act-times { display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:var(--muted2); margin-top:5px; }

.spo-top  { display:flex; gap:14px; align-items:center; margin-bottom:12px; }
.spo-art  { width:54px; height:54px; border-radius:8px; object-fit:cover; flex-shrink:0; box-shadow:0 6px 24px rgba(0,0,0,.55); }
.spo-info { min-width:0; flex:1; }
.spo-label  { font-family:var(--mono); font-size:10px; color:#1ed760; letter-spacing:.08em; margin-bottom:5px; display:flex; align-items:center; gap:5px; }
.spo-title  { font-size:14px; font-weight:700; letter-spacing:-.025em; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:3px; }
.spo-artist { font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.section-divider {
    position: relative; z-index: 1;
    overflow: hidden;
    padding: 22px 0;
    background: linear-gradient(to bottom, var(--bg) 0%, var(--bg2) 100%);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.marquee-track { overflow: hidden; }
.marquee-inner {
    display: flex; align-items: center; gap: 40px;
    width: max-content;
    animation: marquee-run 32s linear infinite;
}
@keyframes marquee-run {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.marquee-item {
    font-family: var(--font); font-size: 15px; font-weight: 500;
    color: var(--muted); letter-spacing: -.01em;
    white-space: nowrap; transition: color .2s;
}
.marquee-item:hover { color: var(--text); }
.marquee-sep  { font-family: var(--mono); font-size: 13px; color: var(--muted2); flex-shrink: 0; }
.marquee-fade-l, .marquee-fade-r { position: absolute; top: 0; bottom: 0; width: 120px; z-index: 1; pointer-events: none; }
.marquee-fade-l { left:  0; background: linear-gradient(to right, var(--bg), transparent); }
.marquee-fade-r { right: 0; background: linear-gradient(to left,  var(--bg), transparent); }

.meta-strip { display:flex; align-items:center; gap:20px; padding:18px 0 0; flex-wrap:wrap; }
.meta-item  { display:flex; flex-direction:column; gap:4px; }
.meta-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; }
.meta-val   { font-size:14px; font-weight:500; color:var(--text); letter-spacing:-.01em; }
.meta-sep   { width:1px; height:30px; background:var(--border); flex-shrink:0; }

.section-header { margin-bottom:44px; }
.section-title  {
    font-size: clamp(32px,5vw,52px);
    font-weight:700; letter-spacing:-.055em;
    color:var(--text); margin-bottom:10px;
}
.section-sub { font-size:15px; color:var(--muted); letter-spacing:-.01em; }

.adr-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 48px;
    position: relative;
    will-change: transform;
    transition: border-color .35s var(--ease), box-shadow .5s var(--ease);
    transform-style: preserve-3d;
}
.adr-card:hover {
    border-color: var(--adr-bdr);
    box-shadow:
        0 0 0 1px rgba(204,34,34,.08),
        0 24px 64px rgba(0,0,0,.6),
        0 0 80px rgba(204,34,34,.07),
        0 0 160px rgba(204,34,34,.03);
}

.adr-left {
    background: var(--bg2);
    padding: clamp(28px,4vw,52px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
}
.adr-badges { display:flex; flex-wrap:wrap; gap:8px; }
.adr-badge {
    display: inline-flex; align-items:center; gap:6px;
    padding: 4px 10px; border-radius:999px;
    font-family: var(--mono); font-size:10px;
    letter-spacing:.08em; text-transform:uppercase;
    border: 1px solid var(--border);
}
.adr-badge.live {
    color: #4ade80;
    border-color: rgba(74,222,128,.3);
    background: rgba(74,222,128,.05);
}
.adr-badge.cm {
    color: var(--muted);
    border-color: var(--border);
    background: rgba(255,255,255,.03);
}
.adr-badge.cm i { font-size:9px; }
.adr-live-dot {
    width:5px; height:5px; border-radius:50%;
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74,222,128,.7);
    animation: adr-blink 1.8s ease-in-out infinite;
}
@keyframes adr-blink { 0%,100%{opacity:1;} 50%{opacity:.15;} }

.adr-tech { font-size:11px; color:var(--muted); letter-spacing:.07em; margin-bottom:-6px; }
.adr-title {
    font-size: clamp(34px,5vw,52px);
    font-weight: 700; letter-spacing:-.045em; line-height:1;
    color: var(--text);
}
.adr-desc {
    font-size: 14px;
    color: rgba(240,240,240,.6);
    line-height: 1.75;
}
.adr-pricing {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 14px 16px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.adr-price-opt { display: flex; align-items: baseline; gap: 6px; }
.adr-price-amt {
    font-size: 20px; font-weight: 700; letter-spacing: -.03em; color: var(--text);
}
.adr-price-per { font-size: 11px; color: var(--muted); letter-spacing: .05em; }
.adr-price-div { font-size: 11px; color: var(--muted2); letter-spacing: .06em; }

.adr-tags { display:flex; flex-wrap:wrap; gap:7px; }
.adr-tags span {
    padding: 3px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: var(--mono); font-size:11px; color:var(--muted);
    transition: color .2s, border-color .2s, box-shadow .2s;
}
.adr-card:hover .adr-tags span:hover {
    color: var(--adr);
    border-color: var(--adr-bdr);
    box-shadow: 0 0 10px rgba(204,34,34,.12);
}
.adr-link {
    display: inline-flex; align-items:center; gap:10px;
    color: var(--text);
    font-size: 14px; font-weight:600; letter-spacing:-.01em;
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(255,255,255,.15);
    width: fit-content;
    transition: gap .25s var(--ease), border-color .2s, text-shadow .2s;
}
.adr-link:hover { gap:18px; border-color:rgba(255,255,255,.4); }
.adr-arrow { transition: transform .25s var(--ease); }

.adr-right {
    background: var(--bg3);
    border-left: 1px solid var(--border);
    display: flex; align-items:center; justify-content:center;
    padding: 32px 24px;
    overflow: hidden;
    position: relative;
    min-height: 320px;
}

.adr-right::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 60% 40%, rgba(204,34,34,.08), transparent 65%);
    pointer-events: none;
    transition: opacity .5s;
}
.adr-card:hover .adr-right::before { opacity: 1.5; }

.adr-screenshots {
    position: relative; width:100%;
    display: flex; flex-direction:column; gap:10px; align-items:flex-start;
}
.adr-img {
    display: block; border-radius:8px;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 20px 56px rgba(0,0,0,.7);
    transition: transform .35s var(--ease), box-shadow .35s;
}
.adr-img-main { width:100%; }
.adr-screenshots:hover .adr-img-main {
    transform: translateY(-4px);
    box-shadow: 0 28px 72px rgba(0,0,0,.8), 0 0 36px rgba(204,34,34,.1);
}

.adr-screenshots.no-img {
    min-height: 200px; align-items:center; justify-content:center;
}
.adr-screenshots.no-img::after {
    content: 'adrenalin.win';
    font-family: var(--mono); font-size:13px; color:var(--muted);
    letter-spacing:.08em;
}

.other-work-label {
    font-size: 11px; color:var(--muted);
    text-transform:uppercase; letter-spacing:.12em;
    margin-bottom: 4px;
    display: block;
}
#portfolio-content { display:flex; flex-direction:column; }
.pf-row {
    display: grid; grid-template-columns: 1fr auto;
    gap: 24px; padding: 28px 0;
    border-bottom: 1px solid var(--border);
    align-items: start; position: relative;
    transition: padding-left .3s var(--ease);
}
.pf-row:first-child { border-top: 1px solid var(--border); }
.pf-row::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 2px; background: var(--text);
    transform: scaleY(0); transform-origin: bottom;
    transition: transform .3s var(--ease);
}
.pf-row:hover { padding-left: 16px; }
.pf-row:hover::before { transform: scaleY(1); }
.pf-row-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.pf-row-title { font-size:18px; font-weight:700; letter-spacing:-.03em; color:var(--text); }
.pf-row-desc  { font-size:13px; color:var(--muted); line-height:1.65; max-width:580px; }
.pf-row-side  { display:flex; flex-direction:column; align-items:flex-end; gap:12px; padding-top:3px; }
.pf-row-link {
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border); border-radius:50%;
    color:var(--muted); font-size:11px; text-decoration:none;
    background:none; cursor:pointer;
    transition: color .2s, border-color .2s, transform .2s var(--ease);
}
.pf-row-link:hover { color:var(--text); border-color:var(--bh); transform:translate(2px,-2px); }
.pf-meta { display:flex; flex-wrap:wrap; gap:6px; }
.pf-meta-pill  { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border:1px solid var(--border); border-radius:999px; }
.pf-meta-label { font-family:var(--mono); font-size:10px; color:var(--muted2); text-transform:uppercase; letter-spacing:.08em; }
.pf-meta-val   { font-family:var(--mono); font-size:10px; color:var(--text); font-weight:500; }
.pf-tags { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.pf-tag  { padding:3px 10px; border:1px solid var(--border); border-radius:999px; font-family:var(--mono); font-size:11px; color:var(--muted); transition: opacity .2s; }

#work { position:relative; }
#work::before {
    content:''; position:absolute; z-index:0; pointer-events:none;
    width:600px; height:600px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.009) 0%, transparent 70%);
    top:-80px; right:-140px;
    animation:orb-drift 20s ease-in-out infinite alternate;
}
#work::after {
    content:''; position:absolute; z-index:0; pointer-events:none;
    width:380px; height:380px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.006) 0%, transparent 70%);
    bottom:60px; left:-100px;
    animation:orb-drift 15s ease-in-out 3s infinite alternate-reverse;
}
@keyframes orb-drift {
    from { transform:translate(0,0); }
    to   { transform:translate(35px,-45px); }
}

.skills-groups { display:flex; flex-direction:column; gap:0; margin-bottom:44px; border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.skills-group { display:flex; align-items:center; gap:28px; padding:20px 24px; }
.skills-group + .skills-group { border-top:1px solid var(--border); }
.skills-group-label { font-size:10px; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; flex-shrink:0; width:72px; }
.skills-row { display:flex; flex-wrap:wrap; gap:20px 28px; align-items:center; }
.skill-tile { display:flex; align-items:center; gap:7px; cursor:default; }
.skill-icon { font-size:14px; line-height:1; }
.skill-tile span { font-size:13px; font-weight:500; color:var(--muted); letter-spacing:-.01em; white-space:nowrap; transition:color .2s; }
.skill-tile:hover span { color:var(--text); }

.github-card {
    background:var(--bg2); border:1px solid var(--border); border-radius:20px; padding:28px;
    position:relative; overflow:hidden;
    transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.github-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
}
.github-card:hover { border-color:var(--bh); box-shadow:0 10px 44px rgba(0,0,0,.45); }
.github-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.github-eyebrow { font-size:10px; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; display:block; margin-bottom:5px; }
.github-uname { font-size:20px; font-weight:700; letter-spacing:-.04em; color:var(--text); }
.github-link {
    display:inline-flex; align-items:center; gap:7px;
    color:var(--muted); font-size:13px; font-weight:600; text-decoration:none;
    border:1px solid var(--border); padding:8px 16px; border-radius:999px;
    transition:color .2s, border-color .2s, background .2s;
}
.github-link:hover { color:var(--text); border-color:var(--bh); background:rgba(255,255,255,.04); }
.github-chart {
    width:100%; display:block; border-radius:10px;
    filter:brightness(.85) contrast(1.15) saturate(1.1);
}

.contact-list { display:flex; flex-direction:column; border-top:1px solid var(--border); }
.contact-row {
    display:flex; align-items:center; gap:16px;
    padding:22px 0; border-bottom:1px solid var(--border);
    text-decoration:none; color:inherit; cursor:pointer;
    position:relative;
    transition: padding-left .25s var(--ease);
}
.contact-row::before {
    content:''; position:absolute; left:0; top:0; bottom:0;
    width:2px; background:var(--text);
    transform:scaleY(0); transform-origin:bottom;
    transition: transform .25s var(--ease);
}
.contact-row:hover { padding-left:14px; }
.contact-row:hover::before { transform:scaleY(1); }
.contact-icon-wrap {
    width:40px; height:40px; display:flex; align-items:center; justify-content:center;
    background:var(--bg2); border:1px solid var(--border); border-radius:10px;
    font-size:15px; color:var(--muted); flex-shrink:0;
    transition: color .2s, border-color .2s;
}
.contact-row:hover .contact-icon-wrap { color:var(--text); border-color:var(--bh); }
.contact-body  { flex:1; display:flex; flex-direction:column; gap:3px; }
.contact-label { font-size:10px; color:var(--muted); letter-spacing:.09em; text-transform:uppercase; }
.contact-val   { font-size:16px; font-weight:600; letter-spacing:-.025em; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.contact-arrow { font-size:12px; color:var(--muted); transition:transform .2s var(--ease), color .2s; }
.contact-row:hover .contact-arrow { transform:translate(3px,-3px); color:var(--text); }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.visible { opacity:1; transform:translateY(0); }

.spinner { width:18px; height:18px; border:2px solid rgba(255,255,255,.08); border-top-color:rgba(255,255,255,.65); border-radius:50%; animation:spin 1s linear infinite; margin:0 auto; }
@keyframes spin { to{transform:rotate(360deg);} }

::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.18); }

.site-footer {
    background: var(--bg); border-top: 1px solid var(--border);
    padding: 28px 0 max(28px, calc(env(safe-area-inset-bottom, 0px) + 16px));
    position: relative; z-index: 1;
}
.footer-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
}
.footer-brand { font-size: 13px; font-weight: 700; letter-spacing: -.04em; color: var(--muted); }
.footer-links { display: flex; gap: 20px; }
.footer-link {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--muted); font-size: 13px; text-decoration: none;
    font-family: var(--mono); letter-spacing: .02em;
    transition: color .2s;
}
.footer-link:hover { color: var(--text); }
.footer-copy { font-size: 11px; color: var(--muted2); letter-spacing: .05em; }

@media (max-width: 640px) {
    .pres-profile     { padding:22px 20px 16px; }
    .music-corner     { width:calc(100vw - 32px); right:16px; bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 8px)); }
    .adr-card         { grid-template-columns:1fr; }
    .adr-right        { border-left:none; border-top:1px solid var(--border); min-height:220px; padding:24px 20px; }
    .skills-group     { flex-direction:column; align-items:flex-start; gap:12px; }
    .skills-row       { gap:14px 20px; }
    .pf-row           { grid-template-columns:1fr; }
    .pf-row-side      { align-items:flex-start; }
    .pf-tags          { justify-content:flex-start; }
    .meta-sep         { display:none; }
    .meta-strip       { gap:16px; }
    .section          { padding:50px 0; }
    .marquee-fade-l,
    .marquee-fade-r   { width:60px; }
    .footer-inner     { flex-direction:column; align-items:flex-start; gap:14px; }
    .site-footer      { padding-bottom: max(88px, calc(env(safe-area-inset-bottom, 0px) + 80px)); }
}
@media (max-width: 480px) {
    .nav-brand { display: none; }
    .nav-links { gap: 2px; }
    .nav-btn   { padding: 7px 10px; font-size: 13px; }
}
@media (max-width: 400px) {
    .nav-btn   { padding: 6px 8px; font-size: 12px; }
    .adr-title { font-size:28px; }
}
@media (prefers-reduced-motion: reduce) {
    .star, .wakeup-dot, .wakeup-text, .adr-live-dot, .live-dot, .mc-eq span, .mc-art { animation: none !important; }
    .marquee-inner { animation: none !important; }
    .reveal { transition: none !important; }
    .hero-name, .hero-tagline, .hero-bio { animation: none !important; opacity: 1 !important; transform: none !important; }
}