@import"https://fonts.googleapis.com/css2?family=Bitcount+Grid+Double:wght@100..900&display=swap";html,body,#root{width:100%;height:100%;margin:0}body{background:#171a28}.star-container{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}.star-layer{position:absolute;background:transparent;top:0;left:0}.star-layer:after{content:" ";position:absolute;top:2000px;left:0;width:inherit;height:inherit;opacity:inherit;box-shadow:inherit}.slow{animation:animStar 150s linear infinite}.medium{animation:animStar 100s linear infinite}.fast{animation:animStar 50s linear infinite}@keyframes animStar{0%{transform:translateY(0)}to{transform:translateY(-2000px)}}.intro-container{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;width:100%;max-width:1450px;margin:0 auto;padding:4rem 2rem;background:transparent;gap:2rem;animation:fadeIn 1.5s ease-out;box-sizing:border-box}.intro-text-wrapper{flex:1;max-width:700px;text-align:left;margin-top:10rem;margin-left:4rem;padding-top:8px;z-index:10}.intro-name{font-family:Bitcount Grid Double,sans-serif;font-weight:700;font-size:4.5rem;line-height:1;color:#fff;margin:0;text-transform:uppercase;letter-spacing:2px;white-space:nowrap;text-shadow:0 0 10px rgba(165,180,252,.4);position:relative}.right-panel{width:500px;min-width:500px;flex-shrink:0;display:flex;flex-direction:column;gap:1.5rem}.dual-photo-wrapper{display:flex;gap:12px;height:350px;width:100%}.photo-frame{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#000}.wide-frame{flex:1.61}.tall-frame{flex:1}.photo-frame img{width:100%;height:100%;object-fit:cover;display:block}.frame-label{position:absolute;bottom:8px;left:8px;font-family:Courier New,monospace;font-size:.5rem;color:#64748b}.vinyl-player-glass{background:#ffffff08;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.1);border-radius:24px;display:flex;padding:1.2rem;gap:1.5rem;align-items:center;box-shadow:0 8px 32px #0000004d}.vinyl-disk{position:relative;width:90px;height:90px;background:#050505;border-radius:50%;border:3px solid #111;display:flex;align-items:center;justify-content:center}.spinning{animation:rotateVinyl 5s linear infinite}@keyframes rotateVinyl{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.vinyl-center-art{width:34px;height:34px;border-radius:50%;object-fit:cover}.vinyl-right{flex:1;text-align:left}.live-tag{display:flex;align-items:center;gap:6px;font-family:Courier New,monospace;font-size:.6rem;color:#1db954}.vinyl-right h3{font-family:Bitcount Grid Double,sans-serif;font-size:1.2rem;color:#fff;margin:4px 0 0}.artist-name{font-family:Courier New,monospace;font-size:.8rem;color:#94a3b8}.mini-bars{display:flex;align-items:flex-end;gap:2px;height:12px;margin-top:10px}.m-bar{width:2px;background:#1db954;animation:barGrow 1s infinite ease-in-out;transform-origin:bottom}@keyframes barGrow{0%,to{height:3px}50%{height:12px}}.intro-name:before,.intro-name:after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;clip:rect(0,0,0,0)}.intro-name:before{left:2px;text-shadow:-2px 0 #ff00c1;animation:intro-glitch-1 2s infinite linear alternate-reverse}.intro-name:after{left:-2px;text-shadow:2px 0 #00fff9;animation:intro-glitch-2 3s infinite linear alternate-reverse}@keyframes intro-glitch-1{0%{clip:rect(10px,9999px,15px,0);transform:skew(.5deg)}10%{clip:rect(45px,9999px,50px,0);transform:skew(-.5deg)}to{clip:rect(0,0,0,0)}}@keyframes intro-glitch-2{15%{clip:rect(70px,9999px,75px,0);transform:skew(-.8deg)}25%{clip:rect(25px,9999px,30px,0);transform:skew(.3deg)}to{clip:rect(0,0,0,0)}}.intro-desc{font-family:Courier New,monospace;text-align:left;font-size:1.1rem;color:#cbd5e1;margin:1.5rem 0 2.5rem;line-height:1.6}.social-links{display:flex;gap:2.5rem;justify-content:flex-start}.social-icon{font-size:2.2rem;color:#94a3b8;transition:.3s}.social-icon:hover{color:#fff;transform:translateY(-5px)}@media(max-width:1200px){.intro-container{flex-direction:column;align-items:center;text-align:center;padding:3rem 1.5rem;gap:4rem}.intro-text-wrapper{margin:0;max-width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}.intro-name{font-size:clamp(2.5rem,8vw,4rem);white-space:normal;text-align:center}.intro-desc{text-align:center;font-size:1rem;margin:1.5rem 0}.social-links{justify-content:center}.right-panel{width:100%;max-width:500px;min-width:auto}.dual-photo-wrapper{height:300px}}@media(max-width:480px){.intro-container{padding:2rem 1rem;gap:2.5rem}.intro-name{font-size:2.2rem}.dual-photo-wrapper{height:220px}.vinyl-player-glass{padding:1rem;gap:1rem}.vinyl-disk{width:70px;height:70px}.vinyl-center-art{width:28px;height:28px}.vinyl-right h3{font-size:1rem}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.work-container{padding:4rem 2rem;max-width:1000px;margin:0 auto;color:#fff;position:relative;min-height:100vh}.section-title{font-family:Bitcount Grid Double,sans-serif;font-size:clamp(2rem,8vw,3.5rem);text-transform:uppercase;margin-bottom:6rem;text-align:center;color:#a5b4fc;text-shadow:0 0 15px rgba(165,180,252,.7);position:relative;z-index:2}.work-container:before{content:"";position:absolute;left:50%;transform:translate(-50%);top:140px;bottom:5rem;width:2px;background:linear-gradient(to bottom,transparent 0%,rgba(165,180,252,.8) 15%,rgba(96,165,250,.8) 50%,transparent 100%);box-shadow:0 0 10px #60a5fa33;z-index:0}.timeline-item{position:relative;width:100%;margin-bottom:6rem;display:flex;justify-content:center;align-items:center}.glitch-card{position:relative;background:#0d1117;border:2px solid #333;width:320px;height:320px;padding:1.5rem;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;z-index:5;transition:all .3s cubic-bezier(.175,.885,.32,1.275);box-sizing:border-box}.glitch-card:hover{border-color:#60a5fa;box-shadow:0 0 25px #60a5fa66;transform:scale(1.02)}.glitch-card:hover:before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:#60a5fa99;z-index:6;animation:scanline 2s linear infinite}.role{font-family:Bitcount Grid Double,sans-serif;font-size:1.3rem;color:#fff;margin-bottom:.5rem;position:relative}.company{font-family:Courier New,monospace;font-size:.9rem;color:#94a3b8;text-transform:uppercase}.date{font-family:Courier New,monospace;font-size:.8rem;color:#64748b;margin-top:10px}.job-details{position:absolute;left:110%;top:50%;transform:translateY(-50%);width:300px;background:#0d1117fa;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(96,165,250,.5);border-left:4px solid #60a5fa;padding:1.5rem;opacity:0;visibility:hidden;pointer-events:none;transition:all .3s ease;z-index:10;text-align:left}.timeline-item:nth-child(2n) .job-details{left:auto;right:110%;border-left:none;border-right:4px solid #60a5fa}.glitch-card:hover .job-details{opacity:1;visibility:visible;animation:popup-glitch .4s ease-out forwards}.job-details li{font-family:Courier New,monospace;font-size:.8rem;color:#cbd5e1;margin-bottom:.6rem;list-style:none}.job-details li:before{content:"> ";color:#60a5fa}.system-footer{margin-top:1.5rem;padding-top:1rem;border-top:1px dashed rgba(96,165,250,.3)}.blink-text{font-family:Courier New,monospace;font-size:.7rem;color:#60a5fa;font-weight:700;animation:blink 1.5s infinite}.contact-note{font-family:Courier New,monospace;font-size:.65rem;color:#64748b;margin-top:4px}@keyframes scanline{0%{top:0%}to{top:100%}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes popup-glitch{0%{opacity:0;transform:translateY(-50%) translate(10px)}to{opacity:1;transform:translateY(-50%) translate(0)}}@media(max-width:950px){.work-container:before{left:20px;transform:none;top:120px}.timeline-item{justify-content:flex-start;padding-left:50px;margin-bottom:4rem}.glitch-card{width:100%;max-width:400px;height:auto;padding:2rem}.job-details{position:relative;left:0!important;right:0!important;top:0;transform:none;width:100%;margin-top:1rem;display:none;opacity:1;visibility:visible;border:1px solid rgba(96,165,250,.3);border-top:4px solid #60a5fa}.glitch-card:hover .job-details{display:block;animation:none}.section-title{margin-bottom:4rem}}.projects-section{padding:4rem 1rem;max-width:1300px;margin:0 auto}.projects-header{font-family:Bitcount Grid Double,sans-serif;font-size:clamp(2rem,8vw,3.5rem);color:#a5b4fc;text-align:center;margin-bottom:3rem;letter-spacing:4px}.terminal-frame{display:flex;height:650px;background:#05070a;border:1px solid #334155;box-shadow:0 0 30px #000;overflow:hidden}.terminal-nav{width:320px;background:#0a0d11;border-right:1px solid #1e293b;overflow-y:auto}.nav-row{display:flex;align-items:center;padding:1.2rem 1.5rem;cursor:pointer;border-left:4px solid transparent;font-family:Courier New,monospace}.nav-row.active{background:#60a5fa26;border-left:4px solid #00fff9}.status-dot{width:6px;height:6px;background:#1e293b;border-radius:50%;margin-right:15px}.active .status-dot{background:#00fff9;box-shadow:0 0 10px #00fff9}.row-id{color:#60a5fa;font-weight:700;margin-right:15px}.row-name{color:#64748b;text-transform:uppercase;font-size:.85rem}.active .row-name{color:#fff}.terminal-view{flex:1;padding:2rem;background:#080a0f;overflow-y:auto}.view-top-bar{font-family:Courier New,monospace;font-size:.75rem;color:#334155;margin-bottom:2rem;display:flex;justify-content:space-between}.view-main{display:flex;gap:2.5rem}.view-img-container{width:45%;height:350px;position:relative;border:1px solid #1e293b;flex-shrink:0}.view-img-container img{width:100%;height:100%;object-fit:cover;opacity:.8}.v-scanline{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(#12101000 50%,#00000040 50%);background-size:100% 4px;pointer-events:none}.view-info{flex:1;text-align:left;min-width:0}.view-title{font-family:Bitcount Grid Double,sans-serif;font-size:clamp(1.5rem,5vw,2.5rem);margin-bottom:1rem;color:#fff;word-wrap:break-word;overflow-wrap:break-word}.view-desc{font-family:Courier New,monospace;font-size:.95rem;line-height:1.5;color:#94a3b8;margin-bottom:2rem;word-wrap:break-word}.prompt-char{color:#00fff9}.view-stack{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:2rem}.tech-chip{padding:5px 12px;border:1px solid #334155;color:#60a5fa;font-family:Courier New,monospace;font-size:.7rem;background:#0f172acc}.view-action{background:#00fff9;border:none;color:#000;padding:12px 24px;font-family:Courier New,monospace;font-weight:900;cursor:pointer;text-transform:uppercase;clip-path:polygon(5% 0,100% 0,95% 100%,0% 100%)}.glitch-element{position:relative;display:block}.glitch-element:before,.glitch-element:after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;pointer-events:none}.glitch-element:before{left:2px;text-shadow:-2px 0 #ff00c1;clip:rect(44px,450px,56px,0);animation:glitch-anim-1 2s infinite linear alternate-reverse}.glitch-element:after{left:-2px;text-shadow:-2px 0 #00fff9,2px 2px #ff00c1;animation:glitch-anim-2 3s infinite linear alternate-reverse}@keyframes glitch-anim-1{0%{clip:rect(20px,9999px,21px,0);transform:translate(-2px)}20%{clip:rect(70px,9999px,71px,0);transform:translate(2px)}40%{clip:rect(10px,9999px,15px,0)}to{clip:rect(0,0,0,0)}}@keyframes glitch-anim-2{0%{clip:rect(50px,9999px,52px,0);transform:translate(2px)}25%{clip:rect(10px,9999px,12px,0);transform:translate(-2px)}to{clip:rect(0,0,0,0)}}@media(max-width:1000px){.terminal-frame{flex-direction:column;height:auto;max-height:none}.terminal-nav{width:100%;height:150px;border-right:none;border-bottom:1px solid #1e293b}.view-main{flex-direction:column;gap:1.5rem}.view-img-container{width:100%;height:200px}.view-info{padding:0}.glitch-element:before,.glitch-element:after{display:none}.glitch-element{animation:mobile-flicker 2s infinite}}@keyframes mobile-flicker{0%,to{opacity:1;transform:skew(0)}5%,15%{opacity:.8;transform:skew(1deg)}10%{opacity:1;transform:translate(-2px)}}.picks-section{padding:4rem 1rem;max-width:1300px;margin:0 auto;overflow-x:hidden}.picks-header{font-family:Bitcount Grid Double,sans-serif;font-size:clamp(1.8rem,7vw,3.5rem);color:#a5b4fc;text-align:center;margin-bottom:3rem;text-transform:uppercase;letter-spacing:2px;line-height:1.2;word-wrap:break-word;display:block;width:100%}.picks-tabs{display:flex;justify-content:center;gap:.5rem;margin-bottom:3rem;flex-wrap:wrap}.picks-tabs button{background:#0d1117;border:1px solid #1f2937;color:#64748b;padding:10px 15px;font-family:Courier New,monospace;cursor:pointer;font-size:.75rem;text-transform:uppercase}.picks-tabs button.active{color:#fff;border-color:#60a5fa;background:#60a5fa1a}.picks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2rem}.pick-card{background:#0d1117;border:1px solid #1f2937;padding:10px;transition:.3s}.pick-image-container{position:relative;width:100%;aspect-ratio:3 / 4;overflow:hidden}.pick-image-container img{width:100%;height:100%;object-fit:cover}.pick-info{margin-top:1rem;min-width:0}.pick-info h3{font-family:Bitcount Grid Double,sans-serif;font-size:1rem;color:#fff;margin-bottom:4px;line-height:1.4;word-wrap:break-word;white-space:normal}.pick-sub{font-family:Courier New,monospace;font-size:.75rem;color:#64748b}.glitch-element{position:relative;display:inline;white-space:normal}.glitch-element:before,.glitch-element:after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;pointer-events:none;visibility:visible}.glitch-element:before{left:2px;text-shadow:-2px 0 #ff00c1;clip:rect(44px,9999px,56px,0);animation:jitter-1 3s infinite linear alternate-reverse}.glitch-element:after{left:-2px;text-shadow:2px 0 #00fff9;clip:rect(0,9999px,10px,0);animation:jitter-2 2s infinite linear alternate-reverse}@keyframes jitter-1{0%{clip:rect(10px,9999px,15px,0)}5%{clip:rect(30px,9999px,35px,0)}10%{clip:rect(0,0,0,0)}to{clip:rect(0,0,0,0)}}@keyframes jitter-2{0%,80%{clip:rect(0,0,0,0)}85%{clip:rect(20px,9999px,25px,0)}90%{clip:rect(0,0,0,0)}}@media(max-width:768px){.picks-grid{grid-template-columns:1fr 1fr;gap:1rem}.picks-header{font-size:1.8rem}.glitch-element:before,.glitch-element:after{display:none}}.terminal-footer{padding:3rem 2rem 1.5rem;background:#0a0c10;border-top:1px solid #1f2937;position:relative;text-align:center}.footer-line{position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,#60a5fa,#a5b4fc,transparent);box-shadow:0 0 10px #60a5fa4d}.contact-wrapper{margin-bottom:2.5rem}.footer-heading{font-family:Bitcount Grid Double,sans-serif;font-size:2.2rem;color:#fff;margin-bottom:.5rem}.footer-sub{font-family:Courier New,monospace;color:#94a3b8;font-size:.9rem;margin-bottom:1.5rem}.reach-out-link{position:relative;display:inline-block;padding:12px 28px;background:transparent;border:1px solid #60a5fa;color:#fff;font-family:Courier New,monospace;font-size:.9rem;text-decoration:none;overflow:hidden;transition:all .3s ease}.reach-out-link:hover{background:#60a5fa1a;box-shadow:0 0 20px #60a5fa4d;letter-spacing:1px}.cmd-text{position:relative;z-index:5}.footer-bottom{max-width:1200px;margin:0 auto;border-top:1px solid #1f2937;padding-top:1.2rem;display:flex;justify-content:space-between;align-items:center}.system-logs{display:flex;gap:1.5rem;font-family:Courier New,monospace;font-size:.7rem;color:#4b5563}.log-item.pulse{color:#60a5fa;animation:log-blink 1.5s infinite alternate}@keyframes log-blink{0%{opacity:.4}to{opacity:1;text-shadow:0 0 5px #60a5fa}}.copyright-info{font-family:Courier New,monospace;color:#4b5563;font-size:.75rem}.footer-cursor{color:#60a5fa;margin-left:6px;animation:cursor-blink 1s steps(2) infinite}@keyframes cursor-blink{0%{opacity:0}to{opacity:1}}.glitch-element{position:relative}.glitch-element:before,.glitch-element:after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;background:#0a0c10;clip:rect(0,0,0,0)}.glitch-element:before{left:2px;text-shadow:-2px 0 #ff00c1;animation:f-jitter-1 4s infinite linear alternate-reverse}.glitch-element:after{left:-2px;text-shadow:2px 0 #00fff9;animation:f-jitter-2 3s infinite linear alternate-reverse}@keyframes f-jitter-1{0%,10%{clip:rect(10px,999px,15px,0)}11%,to{clip:rect(0,0,0,0)}}@keyframes f-jitter-2{0%,80%{clip:rect(0,0,0,0)}81%,85%{clip:rect(30px,999px,35px,0)}86%,to{clip:rect(0,0,0,0)}}@media(max-width:768px){.footer-bottom{flex-direction:column;gap:1rem}.system-logs{flex-direction:column;gap:.3rem}.footer-heading{font-size:1.6rem}}
