:root{color-scheme:dark;--red:#f04451;--text:#f4f3f5;--muted:#a3a5ad;--line:rgba(255,255,255,.1);font-family:"DM Sans",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:#080a0d;color:var(--text)}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #ff6b75;outline-offset:4px}.wallpaper,.wallpaper-shade{position:fixed;inset:0;pointer-events:none}.wallpaper{z-index:-3;background-position:center;background-size:cover;transition:background-image .3s,filter .5s;filter:saturate(.8)}.wallpaper-shade{z-index:-2;background:linear-gradient(115deg,rgba(4,6,10,.82),rgba(7,8,13,.56) 53%,rgba(7,8,13,.78)),linear-gradient(0deg,#07080b,transparent 37%)}.page-shell{max-width:1150px;padding:34px 28px 150px;margin:auto;min-height:100vh}.topline,.footer{display:flex;align-items:center;justify-content:space-between}.topline{height:44px}.wordmark{font-family:"Space Grotesk",sans-serif;font-size:18px;font-weight:700;letter-spacing:-.06em;display:flex;align-items:center;gap:8px}.wordmark-dot{height:8px;width:8px;border-radius:50%;background:var(--red);box-shadow:0 0 14px var(--red)}.wordmark-slash{color:var(--red);margin-left:-7px}.topline-note{color:#b0afb6;font-size:12px;letter-spacing:.15em;text-transform:uppercase}.icon-button{display:grid;place-items:center;width:34px;height:34px;color:#fff;background:rgba(255,255,255,.09);border:1px solid var(--line);border-radius:50%}.icon-button svg,.mute-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.main-area{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.85fr);gap:18px;align-items:start;margin:clamp(48px,10vh,100px) auto 0;max-width:920px}.profile-card,.music-card,.connect-card{background:rgba(11,13,18,.87);border:1px solid rgba(255,255,255,.11);box-shadow:0 30px 100px rgba(0,0,0,.46);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-radius:19px;overflow:hidden}.banner{height:134px;position:relative;background:url('assets/itzpython-banner-4k.webp') center 50%/cover}.banner-logo{position:absolute;right:25px;top:20px;width:89px;height:89px;display:grid;place-items:center;opacity:.85;filter:drop-shadow(0 8px 20px #000);transform:rotate(-9deg)}.banner-logo img{width:100%}.banner-overline{position:absolute;left:29px;top:27px;z-index:1;font-size:10px;font-weight:700;letter-spacing:.28em;color:#f0d8da}.card-content{padding:0 29px 30px}.identity-row{display:flex;align-items:end;gap:18px;margin-top:-38px;position:relative;z-index:2}.avatar{display:grid;place-items:center;flex:0 0 91px;width:91px;height:91px;border:5px solid #101217;border-radius:50%;background:radial-gradient(circle at 35% 25%,#363947,#11141b 68%);box-shadow:0 8px 20px #0008}.avatar img{width:86%;height:86%;object-fit:contain}.identity-copy{padding-bottom:2px}.eyebrow{margin:0 0 2px;color:#f86971;font-size:10px;font-weight:700;letter-spacing:.24em}.identity-copy h1{margin:0;font-family:"Space Grotesk",sans-serif;font-size:clamp(27px,3vw,35px);letter-spacing:-.06em;line-height:1.05}.period{color:var(--red)}.role{margin:8px 0 0;display:flex;align-items:center;gap:7px;font-size:12px;color:#d9d8dd}.status-dot{width:6px;height:6px;border-radius:50%;background:#79dda4;box-shadow:0 0 8px #79dda4}.intro{font-size:14px;line-height:1.7;color:#bbbac2;margin:23px 0 24px;max-width:450px}.section-divider{height:1px;background:var(--line);margin:22px 0}.section-heading{display:flex;align-items:baseline;gap:10px}.index{font-family:"Space Grotesk",sans-serif;color:var(--red);font-size:11px;font-weight:700}.section-heading h2{font-family:"Space Grotesk",sans-serif;font-size:15px;margin:0 0 15px;letter-spacing:-.02em}.skill-list{display:flex;flex-wrap:wrap;gap:7px}.skill-list span{font-family:"Space Grotesk",sans-serif;background:#191c23;border:1px solid #30333b;border-radius:7px;padding:7px 10px;font-size:11px;font-weight:600;color:#dddde3}.project-list{display:grid;gap:8px}.project{display:flex;align-items:center;gap:12px;border:1px solid #292c33;border-radius:11px;padding:10px 12px;background:#15171d;transition:background .2s,border-color .2s,transform .2s}.project:hover{background:#1e2027;border-color:#704045;transform:translateY(-2px)}.project-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;font-size:21px}.eclipse-icon{color:#f59678;background:#403039}.blitz-icon{color:#ffdc78;background:#423327;font-size:17px}.project-copy{display:grid;gap:1px}.project-copy strong{font-size:13px}.project-copy small{font-size:11px;color:#93949d}.project-arrow{margin-left:auto;color:#e9a2a8;font-size:17px}.side-column{display:grid;gap:17px}.music-card,.connect-card{padding:24px}.music-card .section-heading h2,.connect-card .section-heading h2{margin-bottom:18px}.record-art{height:162px;display:grid;place-items:center;overflow:hidden;border:1px solid #3a222b;border-radius:12px;background:radial-gradient(circle at 45% 35%,#a23543 0,#51202c 33%,#150f1b 76%),url('assets/bonsai-4k.webp') center/cover;position:relative}.record-art:after{content:"";position:absolute;inset:0;background:linear-gradient(130deg,transparent,#0a0a11aa)}.record-disc{position:relative;z-index:1;width:134px;height:134px;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(circle,#1a1b22 0 2px,#303139 3px 4px,#14151b 5px 6px);border:2px solid #43434a;box-shadow:0 10px 18px #0009;animation:spin 8s linear infinite;animation-play-state:paused}.playing .record-disc{animation-play-state:running}@keyframes spin{to{transform:rotate(360deg)}}.record-label{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#811f30;border:4px solid #15151d}.record-label img{width:37px}.track-details{display:flex;align-items:center;gap:11px;margin:17px 0 15px}.music-note{color:#fb6672;font-size:19px}.track-details div{display:grid;gap:2px}.track-details strong{font-size:13px}.track-details div span{font-size:11px;color:#aaaab2}.player-controls{display:flex;align-items:center;gap:12px}.play-button{width:34px;height:34px;flex:0 0 34px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--red);color:white}.play-button svg{width:16px;height:16px;fill:currentColor}.pause-icon{display:none}.playing .play-icon{display:none}.playing .pause-icon{display:block}.progress-group{flex:1;min-width:0}.progress-group input{width:100%;height:3px;margin:0;accent-color:var(--red);cursor:pointer}.time-row{display:flex;justify-content:space-between;color:#878892;font-size:10px;margin-top:4px}.mute-button{border:0;background:none;color:#aaaab2;padding:5px}.music-credit{font-size:10px;color:#777985;margin:14px 0 0}.music-credit a{color:#e6a0a7}.connect-link{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-top:1px solid var(--line);font-size:12px;color:#dedde3}.connect-link:hover{color:#ff818b}.wallpaper-control{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 4px;color:#dddde2;font-size:11px}.wallpaper-control button{padding:0;background:none;border:0;color:#f7b2b7;font-size:11px}.footer{margin:50px auto 0;max-width:920px;color:#8f919c;font-size:11px}.visualizer{position:fixed;bottom:0;left:0;right:0;height:84px;display:flex;align-items:end;gap:2px;pointer-events:none;opacity:.85;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}.visualizer span{flex:1;min-width:2px;height:var(--h,20px);background:linear-gradient(0deg,rgba(108,15,25,.06),rgba(234,42,63,.4) 55%,rgba(255,88,102,.83));transition:height .11s ease;border-radius:2px 2px 0 0}@media(max-width:700px){.page-shell{padding:19px 17px 116px}.topline-note{display:none}.main-area{display:block;margin-top:43px}.side-column{margin-top:16px;grid-template-columns:1fr 1fr;align-items:start}.music-card{grid-column:1/2}.connect-card{grid-column:2/3}.wallpaper-control{grid-column:1/-1}.music-card,.connect-card{padding:19px}.footer{margin-top:35px}}@media(max-width:560px){.main-area{margin-top:32px}.side-column{display:grid;grid-template-columns:1fr}.music-card,.connect-card,.wallpaper-control{grid-column:1}.banner{height:116px}.card-content{padding:0 20px 24px}.banner-overline{left:20px}.identity-row{gap:10px}.avatar{width:76px;height:76px;flex-basis:76px}.identity-copy h1{font-size:28px}.music-card{display:grid;grid-template-columns:1fr 1fr;column-gap:17px}.music-card .section-heading,.track-details,.player-controls,.music-credit{grid-column:1/-1}.record-art{grid-column:1/-1;height:158px}.footer{gap:15px;flex-wrap:wrap}.visualizer{height:53px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Profile refinements */
.main-area{margin-top:clamp(110px,18vh,200px)}
.avatar{overflow:hidden}
.avatar img{height:100%;width:100%;max-width:none;object-fit:cover;object-position:center}
.turbo-icon{color:#fba6af;background:#51272f;font-size:20px}
.track-picker{display:flex;gap:6px;margin:14px 0 5px}
.track-choice{flex:1;min-width:0;padding:8px 6px;border:1px solid #343039;border-radius:7px;background:#1a1b22;color:#aaaab2;font-family:"Space Grotesk",sans-serif;font-size:10px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-choice.active{border-color:#b94756;background:#47232c;color:#fff}
.track-choice:hover{color:#fff;border-color:#b94756}
.wallpaper-control{justify-content:flex-end}
@media(max-width:700px){.main-area{margin-top:43px}}
@media(max-width:560px){.main-area{margin-top:32px}.track-picker{grid-column:1/-1}}

/* Section icons and playlist */
.section-heading{align-items:center;gap:9px}
.section-icon{width:16px;height:16px;flex:none;margin-bottom:15px;fill:none;stroke:var(--red);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cover-stage{height:162px;display:grid;place-items:center;overflow:hidden;border:1px solid #3a222b;border-radius:12px;background:radial-gradient(circle at 50% 40%,#773240 0,#321824 46%,#120e18 100%)}
.cover-art{display:block;width:136px;height:136px;object-fit:cover;border-radius:50%;border:3px solid rgba(255,255,255,.16);box-shadow:0 13px 26px #0009,0 0 0 5px rgba(255,255,255,.035)}
.playlist{display:grid;gap:6px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.playlist-heading{display:flex;justify-content:space-between;margin:0 1px 4px;color:#e7e4e9;font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:700}
.playlist-heading span:last-child{color:#898992;font-size:10px;font-weight:500}
.playlist-item{width:100%;display:flex;align-items:center;gap:10px;padding:7px;border:1px solid transparent;border-radius:9px;background:transparent;color:#dedde3;text-align:left;font:inherit;cursor:pointer;transition:background .2s,border-color .2s}
.playlist-item:hover,.playlist-item.active{background:#211920;border-color:#5d313b}
.playlist-item img{width:38px;height:38px;flex:none;object-fit:cover;border-radius:50%}
.playlist-copy{display:grid;gap:2px;min-width:0}
.playlist-copy strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.playlist-copy small{font-size:10px;color:#9b9aa4}
.playlist-indicator{margin-left:auto;color:#ff7380;font-size:15px;opacity:0}
.playlist-item.active .playlist-indicator{opacity:1}
@media(max-width:560px){.cover-stage,.playlist{grid-column:1/-1}}

/* Motion system */
.wallpaper{opacity:1;transform:scale(1.06);transition:opacity 1.1s ease,filter .5s ease;will-change:opacity}
.wallpaper-next{opacity:0}
.wallpaper-shade{animation:shadeBreathe 13s ease-in-out infinite alternate}
.ambient-sparks{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.ambient-sparks i{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#ff8e9b;box-shadow:0 0 12px 2px #f0445166;opacity:.16;animation:sparkFloat var(--duration) ease-in-out var(--delay) infinite alternate}
.profile-card,.music-card,.connect-card{transition:border-color .35s ease,box-shadow .35s ease}
.profile-card:hover,.music-card:hover,.connect-card:hover{border-color:rgba(255,120,135,.25);box-shadow:0 34px 100px rgba(0,0,0,.5),0 0 28px rgba(240,68,81,.075)}
.profile-card{animation:cardArrive .9s cubic-bezier(.18,.75,.2,1) .05s backwards}
.music-card{animation:cardArrive .9s cubic-bezier(.18,.75,.2,1) .22s backwards}
.connect-card{animation:cardArrive .9s cubic-bezier(.18,.75,.2,1) .38s backwards}
.wallpaper-control{animation:softAppear .8s ease .7s backwards}
.banner{overflow:hidden;animation:bannerFocus 1.3s ease .1s backwards}
.banner:after{content:"";position:absolute;inset:-70% auto -70% -50%;width:42%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transform:skewX(-25deg) translateX(-160%);animation:bannerSweep 9s ease-in-out 1.6s infinite;pointer-events:none}
.avatar{animation:avatarFloat 5s ease-in-out infinite;transition:border-color .3s,box-shadow .3s}
.avatar:hover{border-color:#492c35;box-shadow:0 8px 24px #000b,0 0 20px #f0445155}
.identity-copy h1{animation:nameArrive .8s cubic-bezier(.2,.8,.2,1) .35s backwards}
.eyebrow,.role,.intro{animation:softAppear .8s ease .48s backwards}
.status-dot{animation:statusPulse 2.2s ease-in-out infinite}
.section-divider{transform-origin:left;animation:lineDraw .8s ease .45s backwards}
.section-icon{transition:transform .3s ease,stroke .3s ease}
.section-heading:hover .section-icon{transform:rotate(-12deg) scale(1.2);stroke:#ff8891}
.skill-list span{animation:chipArrive .6s ease backwards;transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease}
.skill-list span:nth-child(1){animation-delay:.55s}.skill-list span:nth-child(2){animation-delay:.63s}.skill-list span:nth-child(3){animation-delay:.71s}.skill-list span:nth-child(4){animation-delay:.79s}
.skill-list span:hover{transform:translateY(-4px);background:#302028;border-color:#bd5160;box-shadow:0 7px 18px #f0445126}
.project{position:relative;overflow:hidden;animation:rowArrive .55s ease backwards;transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease}
.project:nth-child(1){animation-delay:.65s}.project:nth-child(2){animation-delay:.75s}.project:nth-child(3){animation-delay:.85s}
.project:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--red);transform:scaleY(0);transform-origin:bottom;transition:transform .25s ease}
.project:hover{transform:translateX(5px);box-shadow:0 7px 20px #0006}
.project:hover:before{transform:scaleY(1)}
.project-icon{transition:transform .3s ease,box-shadow .3s ease}
.project-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.project:hover .project-icon{transform:rotate(-10deg) scale(1.12);box-shadow:0 0 14px #f0445135}
.project-arrow,.connect-link span:last-child{transition:transform .25s ease,color .25s ease}
.project:hover .project-arrow,.connect-link:hover span:last-child{transform:translate(3px,-3px);color:#ff8f99}
.cover-stage{position:relative;isolation:isolate;transition:border-color .35s ease,background .35s ease}
.cover-stage:before,.cover-stage:after{content:"";position:absolute;left:50%;top:50%;width:145px;height:145px;margin:-72.5px;border:1px solid #ff829256;border-radius:50%;opacity:0;pointer-events:none}
.playing .cover-stage:before{animation:coverRing 2.5s ease-out infinite}
.playing .cover-stage:after{animation:coverRing 2.5s ease-out 1.25s infinite}
.cover-art{position:relative;z-index:1;animation:coverSpin 24s linear infinite;animation-play-state:paused;transition:box-shadow .35s ease,filter .35s ease}
.playing .cover-art{animation-play-state:running;box-shadow:0 13px 30px #000a,0 0 30px #f0445155}
.cover-stage:hover .cover-art{filter:saturate(1.2)}
.cover-stage.is-switching .cover-art{animation:coverSwap .55s cubic-bezier(.2,.8,.2,1) both}
.track-details.is-switching{animation:softAppear .45s ease}
.music-note{display:inline-block;animation:noteBounce 2.8s ease-in-out infinite}
.play-button{transition:transform .2s ease,box-shadow .25s ease,background .25s ease}
.play-button:hover{transform:scale(1.13);box-shadow:0 0 0 6px #f0445129,0 0 18px #f0445166}
.play-button:active{transform:scale(.92)}
.playing .play-button{animation:playPulse 2.4s ease-in-out infinite}
.mute-button{transition:transform .2s ease,color .2s ease}
.mute-button:hover{transform:scale(1.2);color:#ff8891}
.progress-group input{appearance:none;-webkit-appearance:none;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--red) var(--progress,0%),#49434b var(--progress,0%));transition:height .2s ease}
.progress-group input:hover{height:6px}
.progress-group input::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#ff6270;box-shadow:0 0 0 4px #f044512b;transition:transform .2s ease}
.progress-group input:hover::-webkit-slider-thumb{transform:scale(1.25)}
.progress-group input::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#ff6270;box-shadow:0 0 0 4px #f044512b}
.playlist-item{position:relative;overflow:hidden;transition:transform .24s ease,background .24s ease,border-color .24s ease,box-shadow .24s ease}
.playlist-item:hover{transform:translateX(4px);box-shadow:0 6px 16px #0005}
.playlist-item:active{transform:translateX(2px) scale(.99)}
.playlist-item img{transition:transform .3s ease,filter .3s ease}
.playlist-item:hover img{transform:rotate(-8deg) scale(1.1);filter:saturate(1.25)}
.playlist-item.active .playlist-indicator{animation:noteBounce 1.8s ease-in-out infinite}
.connect-link{transition:padding .25s ease,color .25s ease,background .25s ease}
.connect-link:hover{padding-left:7px;background:#f044510b}
.wallpaper-control button{transition:color .2s ease,text-shadow .2s ease,transform .2s ease}
.wallpaper-control button:hover{color:#fff;text-shadow:0 0 14px #f04451;transform:translateY(-2px)}
.wallpaper-control button:active{transform:translateY(1px) scale(.96)}
.wallpaper-control button span{display:inline-block}
.wallpaper-control button.shuffling span{animation:shuffleArrow .6s ease}
.visualizer span{transition:height .1s ease,filter .2s ease}
@keyframes cardArrive{from{opacity:0;transform:translateY(32px) scale(.97);filter:blur(5px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes softAppear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes nameArrive{from{opacity:0;transform:translateX(-15px)}to{opacity:1;transform:translateX(0)}}
@keyframes chipArrive{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes rowArrive{from{opacity:0;transform:translateX(-15px)}to{opacity:1;transform:translateX(0)}}
@keyframes lineDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes bannerFocus{from{filter:blur(8px) brightness(.6)}to{filter:blur(0) brightness(1)}}
@keyframes bannerSweep{0%,70%{transform:skewX(-25deg) translateX(-160%);opacity:0}77%{opacity:1}90%,100%{transform:skewX(-25deg) translateX(850%);opacity:0}}
@keyframes avatarFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes statusPulse{0%,100%{box-shadow:0 0 6px #79dda4;opacity:1}50%{box-shadow:0 0 0 5px #79dda42a,0 0 16px #79dda4;opacity:.8}}
@keyframes shadeBreathe{from{opacity:.92}to{opacity:1}}
@keyframes sparkFloat{from{opacity:.05;transform:translate3d(-9px,18px,0) scale(.65)}to{opacity:.48;transform:translate3d(12px,-25px,0) scale(1.35)}}
@keyframes coverSpin{to{transform:rotate(360deg)}}
@keyframes coverRing{0%{opacity:.6;transform:scale(.85)}100%{opacity:0;transform:scale(1.48)}}
@keyframes coverSwap{from{opacity:.2;filter:blur(7px);transform:scale(.78) rotate(-12deg)}to{opacity:1;filter:blur(0);transform:scale(1) rotate(0)}}
@keyframes noteBounce{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-4px) rotate(8deg)}}
@keyframes playPulse{0%,100%{box-shadow:0 0 0 0 #f0445144}50%{box-shadow:0 0 0 7px #f0445100}}
@keyframes shuffleArrow{50%{transform:rotate(90deg) translate(2px,-2px)}100%{transform:rotate(0)}}
@media(max-width:560px){.play-button{width:42px;height:42px;flex-basis:42px}.mute-button{min-width:40px;min-height:40px}.connect-link{min-height:44px}.wallpaper-control button{min-height:44px;padding:9px 0}}
@media(prefers-reduced-motion:reduce){.wallpaper,.profile-card,.music-card,.connect-card,.wallpaper-control,.banner,.banner:after,.avatar,.identity-copy h1,.eyebrow,.role,.intro,.status-dot,.section-divider,.skill-list span,.project,.cover-art,.cover-stage:before,.cover-stage:after,.music-note,.play-button,.playlist-item.active .playlist-indicator,.wallpaper-shade,.ambient-sparks i{animation:none!important;transition:none!important}.ambient-sparks{display:none}.cover-stage.is-switching .cover-art,.track-details.is-switching{animation:none!important}}
