@import url(https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600&display=swap);@import url(https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=Syne+Mono&display=swap);@import url(https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;900&family=JetBrains+Mono:wght@400;600&display=swap);@import url(https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap);@import url(https://fonts.googleapis.com/css2?family=Circular+Std:wght@400;700&display=swap);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--navy:#0a1628;--navy-mid:#112240;--navy-light:#1d3461;--accent:#c8a96e;--accent-dim:#c8a96e26;--text:#e8edf5;--muted:#8892a4;--border:#c8a96e33;--card:#112240b3}html{scroll-behavior:smooth}body{background:#0a1628;background:var(--navy);color:#e8edf5;color:var(--text);font-family:DM Sans,sans-serif;font-weight:300;overflow-x:hidden}.portfolio-wrapper:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.04'/%3E%3C/svg%3E");content:"";inset:0;opacity:.4;pointer-events:none;position:fixed;z-index:999}.port-nav{align-items:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0a1628d9;border-bottom:1px solid #c8a96e33;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;left:0;padding:1.25rem 3rem;position:fixed;right:0;top:0;z-index:100}.nav-logo{color:#c8a96e;color:var(--accent);font-family:"DM Serif Display",serif;font-size:1.25rem;letter-spacing:.02em}.nav-links{display:flex;gap:2.5rem}.nav-links a{color:#8892a4;color:var(--muted);font-size:.85rem;font-weight:500;letter-spacing:.12em;text-decoration:none;text-transform:uppercase;transition:color .3s}.nav-links a:hover{color:#c8a96e;color:var(--accent)}.hero-section{align-items:center;display:flex;min-height:100vh;overflow:hidden;padding:8rem 3rem 4rem;position:relative}.hero-section:after{border:1px solid #c8a96e33;border:1px solid var(--border);border-radius:50%;content:"";height:600px;pointer-events:none;position:absolute;right:-10%;top:15%;width:600px}.hero-inner{max-width:900px;position:relative;z-index:1}.hero-tag{animation:fadeUp .7s ease .1s forwards;border:1px solid #c8a96e33;border:1px solid var(--border);border-radius:2px;color:#c8a96e;color:var(--accent);display:inline-block;font-size:.78rem;font-weight:500;letter-spacing:.2em;margin-bottom:2rem;opacity:0;padding:.4rem 1rem;text-transform:uppercase}.hero-h1{animation:fadeUp .7s ease .25s forwards;color:#e8edf5;color:var(--text);font-family:"DM Serif Display",serif;font-size:clamp(3.5rem,8vw,6.5rem);letter-spacing:-.02em;line-height:1;opacity:0}.hero-h1 em{color:#c8a96e;color:var(--accent);font-style:italic}.hero-sub{animation:fadeUp .7s ease .4s forwards;color:#8892a4;color:var(--muted);font-size:1.1rem;line-height:1.7;margin-top:1.75rem;max-width:520px;opacity:0}.hero-cta{animation:fadeUp .7s ease .55s forwards;display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.5rem;opacity:0}.btn{border:none;border-radius:2px;cursor:pointer;display:inline-block;font-size:.85rem;font-weight:500;letter-spacing:.12em;padding:.85rem 2rem;text-decoration:none;text-transform:uppercase;transition:all .3s}.btn-primary{background:#c8a96e;background:var(--accent);color:#0a1628;color:var(--navy)}.btn-primary:hover{background:#dfc07e;box-shadow:0 8px 30px #c8a96e4d;transform:translateY(-2px)}.btn-outline{background:#0000;border:1px solid #c8a96e33;border:1px solid var(--border);color:#e8edf5;color:var(--text)}.btn-outline:hover{border-color:#c8a96e;border-color:var(--accent);color:#c8a96e;color:var(--accent);transform:translateY(-2px)}.scroll-indicator{align-items:center;animation:fadeIn 1s ease 1.2s forwards;bottom:2.5rem;display:flex;flex-direction:column;gap:.5rem;left:50%;opacity:0;position:absolute;transform:translateX(-50%)}.scroll-indicator span{color:#8892a4;color:var(--muted);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase}.scroll-line{animation:scrollPulse 2s ease infinite;background:linear-gradient(180deg,#c8a96e,#0000);background:linear-gradient(to bottom,var(--accent),#0000);height:50px;width:1px}.port-section{padding:6rem 3rem}.section-label{color:#c8a96e;color:var(--accent);display:block;font-size:.75rem;font-weight:500;letter-spacing:.22em;margin-bottom:1rem;text-transform:uppercase}.section-title{color:#e8edf5;color:var(--text);font-family:"DM Serif Display",serif;font-size:clamp(2rem,4vw,3rem);line-height:1.1;margin-bottom:3rem}.about-section{background:#112240;background:var(--navy-mid);border-bottom:1px solid #c8a96e33;border-bottom:1px solid var(--border);border-top:1px solid #c8a96e33;border-top:1px solid var(--border)}.about-grid{grid-gap:5rem;align-items:center;display:grid;gap:5rem;grid-template-columns:1fr 1fr;margin:0 auto;max-width:1100px}.about-text p{color:#8892a4;color:var(--muted);font-size:1.05rem;line-height:1.85;margin-bottom:1.25rem}.about-text p strong{color:#e8edf5;color:var(--text);font-weight:500}.about-stats{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:1fr 1fr}.stat-card{background:#112240b3;background:var(--card);border:1px solid #c8a96e33;border:1px solid var(--border);border-radius:4px;overflow:hidden;padding:1.75rem;position:relative;transition:transform .3s,border-color .3s}.stat-card:hover{border-color:#c8a96e;border-color:var(--accent);transform:translateY(-4px)}.stat-card:before{background:#c8a96e;background:var(--accent);content:"";height:100%;left:0;position:absolute;top:0;width:3px}.stat-number{color:#c8a96e;color:var(--accent);font-family:"DM Serif Display",serif;font-size:2.5rem;line-height:1}.stat-label{color:#8892a4;color:var(--muted);font-size:.8rem;letter-spacing:.1em;margin-top:.4rem;text-transform:uppercase}.skills-inner{margin:0 auto;max-width:1100px}.skills-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.skill-category{background:#112240b3;background:var(--card);border:1px solid #c8a96e33;border:1px solid var(--border);border-radius:4px;padding:2rem;transition:border-color .3s,transform .3s}.skill-category:hover{border-color:#c8a96e;border-color:var(--accent);transform:translateY(-3px)}.skill-cat-title{color:#c8a96e;color:var(--accent);font-size:.75rem;font-weight:500;letter-spacing:.18em;margin-bottom:1.25rem;text-transform:uppercase}.skill-tags{display:flex;flex-wrap:wrap;gap:.6rem}.skill-tag{background:#c8a96e14;border:1px solid #c8a96e33;border:1px solid var(--border);border-radius:2px;color:#e8edf5;color:var(--text);font-size:.82rem;padding:.35rem .85rem;transition:background .2s,border-color .2s}.skill-tag:hover{background:#c8a96e26;background:var(--accent-dim);border-color:#c8a96e;border-color:var(--accent)}.projects-section{background:#112240;background:var(--navy-mid);border-bottom:1px solid #c8a96e33;border-bottom:1px solid var(--border);border-top:1px solid #c8a96e33;border-top:1px solid var(--border)}.projects-inner{margin:0 auto;max-width:1100px}.projects-grid{grid-gap:1.75rem;display:grid;gap:1.75rem;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.project-card{background:#112240b3;background:var(--card);border:1px solid #c8a96e33;border:1px solid var(--border);border-radius:4px;overflow:hidden;padding:2rem;position:relative;transition:transform .3s,border-color .3s}.project-card:hover{border-color:#c8a96e;border-color:var(--accent);transform:translateY(-5px)}.project-number{color:#c8a96e1f;font-family:"DM Serif Display",serif;font-size:3rem;line-height:1;pointer-events:none;position:absolute;right:1.5rem;top:1rem}.project-tag{color:#c8a96e;color:var(--accent);font-size:.72rem;font-weight:500;letter-spacing:.18em;margin-bottom:.75rem;text-transform:uppercase}.project-title{color:#e8edf5;color:var(--text);font-family:"DM Serif Display",serif;font-size:1.35rem;margin-bottom:.75rem}.project-desc{color:#8892a4;color:var(--muted);font-size:.9rem;line-height:1.7;margin-bottom:1.5rem}.project-links{display:flex;flex-wrap:wrap;gap:.75rem}.project-link{border-bottom:1px solid #c8a96e33;border-bottom:1px solid var(--border);color:#8892a4;color:var(--muted);font-size:.78rem;letter-spacing:.12em;padding-bottom:.1rem;text-decoration:none;text-transform:uppercase;transition:color .2s,border-color .2s}.project-link:hover{border-color:#c8a96e;border-color:var(--accent);color:#c8a96e;color:var(--accent)}.contact-section{text-align:center}.contact-inner{margin:0 auto;max-width:680px}.contact-sub{color:#8892a4;color:var(--muted);font-size:1rem;line-height:1.75;margin-bottom:2.5rem}.contact-email{border-bottom:1px solid #c8a96e33;border-bottom:1px solid var(--border);color:#c8a96e;color:var(--accent);display:inline-block;font-family:"DM Serif Display",serif;font-size:1.5rem;margin-bottom:2.5rem;padding-bottom:.25rem;text-decoration:none;transition:border-color .3s}.contact-email:hover{border-color:#c8a96e;border-color:var(--accent)}.social-links{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center}.social-link{align-items:center;border:1px solid #c8a96e33;border:1px solid var(--border);border-radius:2px;color:#8892a4;color:var(--muted);display:inline-flex;font-size:.8rem;gap:.5rem;letter-spacing:.14em;padding:.6rem 1.25rem;text-decoration:none;text-transform:uppercase;transition:color .3s}.social-link:hover{color:#c8a96e;color:var(--accent)}.project-card--featured,.social-link:hover{border-color:#c8a96e;border-color:var(--accent)}.project-card--featured{background:linear-gradient(135deg,#112240e6,#1d346080)}.project-featured-badge{background:#c8a96e;background:var(--accent);border-radius:2px;color:#0a1628;color:var(--navy);display:inline-block;font-size:.62rem;font-weight:600;letter-spacing:.18em;margin-bottom:.6rem;padding:.2rem .65rem;text-transform:uppercase}.project-link--primary{border-bottom-color:#c8a96e!important;border-bottom-color:var(--accent)!important;color:#c8a96e!important;color:var(--accent)!important;font-weight:600}.games-section{background:#0a1628;background:var(--navy);border-top:1px solid #c8a96e33;border-top:1px solid var(--border)}.games-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.game-card{align-items:center;background:#112240b3;background:var(--card);border:1px solid #c8a96e33;border:1px solid var(--border);border-radius:4px;color:#e8edf5;color:var(--text);display:flex;gap:1.25rem;padding:1.5rem;text-decoration:none;transition:transform .25s,border-color .25s,background .25s}.game-card:hover{background:#c8a96e0f;border-color:#c8a96e;border-color:var(--accent);transform:translateY(-3px)}.game-icon{font-size:1.6rem;letter-spacing:-4px;min-width:48px;text-align:center}.game-info{flex:1 1}.game-title{font-family:"DM Serif Display",serif;font-size:1.1rem;margin-bottom:.3rem}.game-desc{color:#8892a4;color:var(--muted);font-size:.8rem;line-height:1.6;margin-bottom:.5rem}.game-tag{color:#c8a96e;color:var(--accent);font-size:.65rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}.game-arrow{color:#8892a4;color:var(--muted);font-size:1.2rem;transition:color .2s,transform .2s}.game-card:hover .game-arrow{color:#c8a96e;color:var(--accent);transform:translateX(4px)}.port-footer{border-top:1px solid #c8a96e33;border-top:1px solid var(--border);color:#8892a4;color:var(--muted);font-size:.78rem;letter-spacing:.06em;padding:2rem;text-align:center}@keyframes scrollPulse{0%,to{opacity:1}50%{opacity:.3}}.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:translateY(0)}@media (max-width:768px){.port-nav{padding:1rem 1.5rem}.nav-links{gap:1.5rem}.port-section{padding:4rem 1.5rem}.hero-section{padding:7rem 1.5rem 4rem}.about-grid{gap:2.5rem;grid-template-columns:1fr}.hero-section:after{display:none}}.ttt-wrapper{--bg:#0d0d0d;--surface:#161616;--surface2:#1f1f1f;--accent:#e8ff47;--accent-dim:#e8ff471f;--accent-glow:#e8ff4759;--x-color:#e8ff47;--o-color:#ff6b6b;--o-glow:#ff6b6b59;--text:#f0f0f0;--muted:#555;--border:#2a2a2a;--win-line:#e8ff47;align-items:center;background:var(--bg);color:var(--text);display:flex;flex-direction:column;font-family:Syne,sans-serif;justify-content:center;min-height:100vh;overflow:hidden;padding:2rem 1rem;position:relative}.ttt-wrapper:before{background-image:linear-gradient(#e8ff4708 1px,#0000 0),linear-gradient(90deg,#e8ff4708 1px,#0000 0);background-size:40px 40px;content:"";inset:0;pointer-events:none;position:fixed}.ttt-header{animation:fadeDown .6s ease both;margin-bottom:2.5rem;text-align:center}.ttt-title{color:var(--text);font-size:clamp(2.5rem,6vw,4rem);font-weight:800;letter-spacing:-.04em;line-height:1}.ttt-title span{color:var(--accent)}.ttt-subtitle{color:var(--muted);font-family:Syne Mono,monospace;font-size:.72rem;letter-spacing:.22em;margin-top:.5rem;text-transform:uppercase}.score-bar{animation:fadeDown .6s ease .1s both;background:var(--border);border:1px solid var(--border);border-radius:4px;display:flex;gap:1px;margin-bottom:2rem;overflow:hidden}.score-item{background:var(--surface);flex:1 1;padding:1rem 1.5rem;text-align:center;transition:background .3s}.score-item.active{background:var(--surface2)}.score-who{color:var(--muted);font-family:Syne Mono,monospace;font-size:.65rem;letter-spacing:.2em;margin-bottom:.3rem;text-transform:uppercase}.score-num{font-size:1.8rem;font-weight:800;line-height:1}.score-item.you .score-num{color:var(--x-color)}.score-item.draws .score-num{color:var(--muted)}.score-item.ai .score-num{color:var(--o-color)}.status-bar{animation:fadeDown .6s ease .15s both;color:var(--muted);font-family:Syne Mono,monospace;font-size:.8rem;height:1.2em;letter-spacing:.15em;margin-bottom:1.5rem;text-transform:uppercase;transition:color .3s}.status-bar.your-turn{color:var(--x-color)}.status-bar.ai-turn{color:var(--o-color)}.status-bar.win{color:var(--accent)}.status-bar.lose{color:var(--o-color)}.status-bar.draw{color:var(--muted)}.board-container{animation:fadeDown .6s ease .2s both;position:relative}.board{grid-gap:3px;background:var(--border);border:3px solid var(--border);border-radius:8px;display:grid;gap:3px;grid-template-columns:repeat(3,1fr);overflow:hidden}.cell{align-items:center;background:var(--surface);cursor:pointer;display:flex;font-size:clamp(2rem,6vw,3rem);font-weight:800;height:clamp(90px,22vw,130px);justify-content:center;position:relative;transition:background .15s;-webkit-user-select:none;user-select:none;width:clamp(90px,22vw,130px)}.cell:hover:not(.filled):not(.disabled){background:var(--surface2)}.cell.disabled,.cell.filled{cursor:default}.cell-x{color:var(--x-color);text-shadow:0 0 20px var(--accent-glow)}.cell-o,.cell-x{animation:popIn .2s cubic-bezier(.34,1.56,.64,1) both}.cell-o{color:var(--o-color);text-shadow:0 0 20px var(--o-glow)}.cell.winning-cell{background:var(--accent-dim)}.cell.winning-cell .cell-o,.cell.winning-cell .cell-x{animation:winPulse .8s ease infinite alternate}.controls{animation:fadeUp .6s ease .3s both;display:flex;gap:.75rem;margin-top:2rem}.btn-ttt{border:none;border-radius:3px;cursor:pointer;font-family:Syne,sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.14em;padding:.75rem 1.75rem;text-transform:uppercase;transition:all .2s}.btn-primary-ttt{background:var(--accent);color:var(--bg)}.btn-primary-ttt:hover{box-shadow:0 6px 24px var(--accent-glow);transform:translateY(-2px)}.btn-outline-ttt{background:#0000;border:1px solid var(--border);color:var(--muted)}.btn-outline-ttt:hover{border-color:#444;color:var(--text)}.difficulty-row{animation:fadeDown .6s ease .12s both;display:flex;gap:.5rem;margin-bottom:1.5rem}.diff-btn{background:var(--surface);border:1px solid var(--border);border-radius:3px;color:var(--muted);cursor:pointer;font-family:Syne Mono,monospace;font-size:.7rem;letter-spacing:.15em;padding:.45rem 1rem;text-transform:uppercase;transition:all .2s}.diff-btn:hover{border-color:#444;color:var(--text)}.diff-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.result-overlay{align-items:center;animation:fadeIn .3s ease both;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0d0d0de0;border-radius:5px;display:flex;flex-direction:column;gap:1rem;inset:0;justify-content:center;position:absolute}.result-text{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;text-align:center}.result-emoji{font-size:3rem;line-height:1}@keyframes popIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@media (max-width:480px){.score-item{padding:.75rem .5rem}.controls{flex-wrap:wrap;justify-content:center}}.c4-wrapper{--bg:#070b14;--surface:#0e1520;--surface2:#151e2e;--board-bg:#0a3cff;--board-dark:#0830d4;--player:#ff3d3d;--player-glow:#ff3d3d80;--ai:#ffce00;--ai-glow:#ffce0080;--empty:#07111f;--empty-inner:#050d17;--text:#e8f0ff;--muted:#4a5a7a;--border:#1a2540;--accent:#00d4ff;--accent-glow:#00d4ff4d;--win-glow:#ffffffe6;align-items:center;background:var(--bg);color:var(--text);display:flex;flex-direction:column;font-family:Outfit,sans-serif;justify-content:center;min-height:100vh;overflow:hidden;padding:2rem 1rem;position:relative}.c4-wrapper:before{background:radial-gradient(circle,#003cff1f 0,#0000 70%);height:600px;left:-200px;top:-200px;width:600px}.c4-wrapper:after,.c4-wrapper:before{border-radius:50%;content:"";pointer-events:none;position:fixed}.c4-wrapper:after{background:radial-gradient(circle,#ff3d3d14 0,#0000 70%);bottom:-150px;height:500px;right:-150px;width:500px}.c4-back{align-items:center;color:var(--muted);display:flex;font-family:JetBrains Mono,monospace;font-size:.72rem;gap:.5rem;left:1.5rem;letter-spacing:.12em;position:absolute;text-decoration:none;text-transform:uppercase;top:1.5rem;transition:color .2s;z-index:10}.c4-back:hover{color:var(--accent)}.c4-header{animation:fadeDown .5s ease both;margin-bottom:1.75rem;text-align:center}.c4-title{font-size:clamp(2.2rem,5vw,3.5rem);font-weight:900;letter-spacing:-.03em;line-height:1}.c4-title .red{color:var(--player);text-shadow:0 0 30px var(--player-glow)}.c4-title .sep{color:var(--muted);font-weight:300;margin:0 .2em}.c4-title .yell{color:var(--ai);text-shadow:0 0 30px var(--ai-glow)}.c4-subtitle{color:var(--muted);font-family:JetBrains Mono,monospace;font-size:.68rem;letter-spacing:.22em;margin-top:.5rem;text-transform:uppercase}.c4-score-bar{animation:fadeDown .5s ease .08s both;background:var(--border);border:1px solid var(--border);border-radius:6px;display:flex;gap:1px;margin-bottom:1.25rem;overflow:hidden}.c4-score-item{background:var(--surface);flex:1 1;padding:.85rem 1.5rem;text-align:center;transition:background .3s}.c4-score-item.active{background:var(--surface2)}.c4-score-who{color:var(--muted);font-family:JetBrains Mono,monospace;font-size:.6rem;letter-spacing:.18em;margin-bottom:.25rem;text-transform:uppercase}.c4-score-num{font-size:1.6rem;font-weight:700;line-height:1}.c4-score-item.you .c4-score-num{color:var(--player)}.c4-score-item.draw .c4-score-num{color:var(--muted)}.c4-score-item.ai .c4-score-num{color:var(--ai)}.c4-diff-row{animation:fadeDown .5s ease .1s both;display:flex;gap:.5rem;margin-bottom:1.25rem}.c4-diff-btn{background:var(--surface);border:1px solid var(--border);border-radius:4px;color:var(--muted);cursor:pointer;font-family:JetBrains Mono,monospace;font-size:.65rem;letter-spacing:.15em;padding:.4rem 1rem;text-transform:uppercase;transition:all .2s}.c4-diff-btn:hover{border-color:#2a3a5a;color:var(--text)}.c4-diff-btn.active{background:#00d4ff1a;border-color:var(--accent);color:var(--accent)}.c4-status{animation:fadeDown .5s ease .12s both;color:var(--muted);font-family:JetBrains Mono,monospace;font-size:.75rem;height:1.2em;letter-spacing:.14em;margin-bottom:1rem;text-transform:uppercase;transition:color .3s}.c4-status.your-turn{color:var(--player)}.c4-status.ai-turn{color:var(--ai)}.c4-status.you-win{color:var(--player)}.c4-status.ai-win{color:var(--ai)}.c4-status.draw{color:var(--muted)}.col-arrows{grid-gap:4px;animation:fadeDown .5s ease .15s both;display:grid;gap:4px;grid-template-columns:repeat(7,1fr);margin-bottom:4px;max-width:504px;width:100%}.col-arrow{align-items:center;border-radius:4px;color:#0000;cursor:pointer;display:flex;font-size:1rem;height:28px;justify-content:center;transition:color .15s,background .15s}.col-arrow:hover{background:#ff3d3d14;color:var(--player)}.col-arrow.disabled{cursor:default;pointer-events:none}.c4-board-wrap{animation:fadeDown .5s ease .18s both;position:relative}.c4-board{grid-gap:4px;background:var(--board-bg);border-radius:10px;box-shadow:0 0 0 3px var(--board-dark),0 20px 60px #0028c880,0 0 80px #0028c833;display:grid;gap:4px;grid-template-columns:repeat(7,1fr);padding:8px}.c4-cell{background:var(--empty);border-radius:50%;box-shadow:inset 0 4px 10px #0009;height:clamp(52px,10vw,68px);overflow:hidden;position:relative;width:clamp(52px,10vw,68px)}.c4-cell:before{background:var(--empty-inner);border-radius:50%;content:"";inset:4px;position:absolute;transition:background .1s}.c4-cell.player:before{background:var(--player);box-shadow:0 0 16px var(--player-glow),inset 0 -4px 8px #0000004d}.c4-cell.ai-piece:before,.c4-cell.player:before{animation:dropIn .28s cubic-bezier(.33,1,.68,1) both}.c4-cell.ai-piece:before{background:var(--ai);box-shadow:0 0 16px var(--ai-glow),inset 0 -4px 8px #0000004d}.c4-cell.winning:before{animation:winPulse .6s ease infinite alternate}.c4-cell.player.winning:before{box-shadow:0 0 30px var(--player-glow),0 0 60px var(--player-glow)}.c4-cell.ai-piece.winning:before{box-shadow:0 0 30px var(--ai-glow),0 0 60px var(--ai-glow)}.c4-cell.preview-player:before{background:#ff3d3d40}.c4-overlay{align-items:center;animation:fadeIn .3s ease both;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#070b14e0;border-radius:10px;display:flex;flex-direction:column;gap:.85rem;inset:0;justify-content:center;position:absolute;z-index:10}.c4-overlay-emoji{font-size:3rem;line-height:1}.c4-overlay-text{font-size:1.3rem;font-weight:700;letter-spacing:-.01em;text-align:center}.c4-controls{animation:fadeUp .5s ease .22s both;display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:1.25rem}.c4-btn{align-items:center;border:none;border-radius:4px;cursor:pointer;display:inline-flex;font-family:Outfit,sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.1em;padding:.7rem 1.6rem;text-decoration:none;text-transform:uppercase;transition:all .2s}.c4-btn-primary{background:var(--accent);color:var(--bg)}.c4-btn-primary:hover{box-shadow:0 6px 24px var(--accent-glow);transform:translateY(-2px)}.c4-btn-ghost{background:#0000;border:1px solid var(--border);color:var(--muted)}.c4-btn-ghost:hover{border-color:#2a3a5a;color:var(--text)}@keyframes fadeDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes dropIn{0%{opacity:.4;transform:scaleY(.3) translateY(-20px)}to{opacity:1;transform:scaleY(1) translateY(0)}}@keyframes winPulse{0%{transform:scale(.92)}to{transform:scale(1.04)}}@media (max-width:520px){.c4-board{gap:3px;padding:5px}.c4-back{font-size:0}.c4-back svg{display:block}}.tesla-wrapper{--bg:#0a0a0a;--surface:#111;--surface2:#1a1a1a;--surface3:#222;--accent:#e82127;--accent2:#3a7bd5;--green:#1db954;--text:#f0f0f0;--muted:#666;--border:#2a2a2a;--glass:#ffffff0a;background:var(--bg);color:var(--text);display:flex;flex-direction:column;font-family:Rajdhani,sans-serif;min-height:100vh;overflow:hidden;-webkit-user-select:none;user-select:none}.tesla-statusbar{background:#080808;border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;padding:.6rem 2rem}.tesla-statusbar,.tsb-left{align-items:center;display:flex}.tsb-left{gap:1rem}.tsb-time{color:var(--text);font-family:Share Tech Mono,monospace;font-size:1.1rem}.tsb-date{color:var(--muted);font-size:.75rem;letter-spacing:.08em}.tsb-battery,.tsb-center{align-items:center;display:flex}.tsb-battery{gap:.6rem}.tsb-bat-pct{color:var(--green);font-family:Share Tech Mono,monospace;font-size:.85rem}.tsb-bat-bar{background:var(--border);border-radius:3px;height:6px;overflow:hidden;width:80px}.tsb-bat-fill{background:linear-gradient(90deg,var(--green),#4ade80);border-radius:3px;height:100%;transition:width .5s}.tsb-range{color:var(--muted);font-size:.75rem}.tsb-speed{color:var(--text);font-family:Share Tech Mono,monospace;font-size:1.1rem}.tsb-speed small{color:var(--muted);font-size:.6rem}.tesla-main{display:grid;flex:1 1;grid-template-columns:280px 1fr 200px;height:calc(100vh - 44px);min-height:0}.tesla-left{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;gap:1.25rem;overflow-y:auto;padding:1.5rem 1rem}.car-viz{display:flex;justify-content:center;padding:.5rem 0}.car-svg{max-width:260px;width:100%}.gear-selector{display:flex;gap:.5rem;justify-content:center}.gear-btn{background:var(--surface2);border:1px solid var(--border);border-radius:50%;color:var(--muted);cursor:pointer;font-family:Share Tech Mono,monospace;font-size:.9rem;height:44px;transition:all .2s;width:44px}.gear-btn:hover{border-color:var(--accent2);color:var(--text)}.gear-btn.active{background:var(--accent);border-color:var(--accent);box-shadow:0 0 16px #e8212766;color:#fff}.climate-panel{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:1rem}.climate-header{align-items:center;display:flex;gap:.5rem;margin-bottom:.75rem}.climate-icon{font-size:1rem}.climate-label{color:var(--muted);flex:1 1;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}.climate-toggle{background:#0000;border:1px solid var(--border);border-radius:3px;color:var(--muted);cursor:pointer;font-family:Share Tech Mono,monospace;font-size:.65rem;padding:.25rem .6rem;transition:all .2s}.climate-toggle.on{background:#3d7bd533;border-color:var(--accent2);color:var(--accent2)}.temp-control{gap:1rem}.temp-btn,.temp-control{align-items:center;display:flex;justify-content:center}.temp-btn{background:var(--surface3);border:1px solid var(--border);border-radius:50%;color:var(--text);cursor:pointer;font-size:1.2rem;height:32px;transition:all .2s;width:32px}.temp-btn:hover{border-color:var(--accent2)}.temp-display{color:var(--accent2);font-family:Share Tech Mono,monospace;font-size:1.4rem;min-width:70px;text-align:center}.tesla-center{display:flex;flex-direction:column;overflow:hidden}.center-tabs{background:#080808;border-bottom:1px solid var(--border);display:flex;flex-shrink:0}.center-tab{align-items:center;background:#0000;border:none;border-bottom:2px solid #0000;color:var(--muted);cursor:pointer;display:flex;flex:1 1;flex-direction:column;font-family:Rajdhani,sans-serif;gap:.2rem;padding:.75rem .5rem;transition:all .2s}.center-tab:hover{background:var(--glass);color:var(--text)}.center-tab.active{border-bottom-color:var(--accent);color:var(--accent)}.tab-icon{font-size:1.1rem}.tab-label{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase}.panel{flex:1 1;overflow-y:auto;padding:1.5rem}.home-grid{grid-gap:.75rem;display:grid;gap:.75rem;grid-template-columns:1fr 1fr;margin-bottom:1rem}.home-card{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:1rem;transition:border-color .2s}.home-card:hover{border-color:#3a3a3a}.hc-label{color:var(--muted);font-size:.65rem;letter-spacing:.15em;margin-bottom:.4rem;text-transform:uppercase}.hc-value{color:var(--text);font-family:Share Tech Mono,monospace;font-size:2rem;line-height:1}.hc-value span{color:var(--muted);font-size:.9rem;margin-left:2px}.hc-sub{color:var(--muted);font-size:.72rem;margin-top:.3rem}.battery-bar-full{background:var(--border);border-radius:2px;height:4px;margin:.5rem 0 .3rem;overflow:hidden}.battery-bar-fill{background:linear-gradient(90deg,var(--green),#4ade80);border-radius:2px;height:100%;transition:width .5s}.lock-icon{font-size:1.8rem;margin:.3rem 0}.bright-slider{accent-color:var(--accent2);margin:.5rem 0 .3rem;width:100%}.mini-player{align-items:center;background:var(--surface2);border:1px solid var(--border);border-radius:10px;display:flex;gap:.75rem;padding:.75rem}.mini-art{border-radius:4px;height:40px;object-fit:cover;width:40px}.mini-info{flex:1 1;min-width:0}.mini-title{font-size:.85rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mini-artist{color:var(--muted);font-size:.72rem}.mini-controls{display:flex;gap:.4rem}.mini-btn{background:#0000;border:none;border-radius:4px;color:var(--muted);cursor:pointer;font-size:1rem;padding:.2rem .4rem;transition:color .2s}.mini-btn:hover{color:var(--text)}.mini-btn.play{color:var(--green);font-size:1.1rem}.music-panel{height:100%;overflow:hidden;padding:0!important}.music-panel,.spotify-login{display:flex;flex-direction:column}.spotify-login{align-items:center;flex:1 1;gap:1rem;justify-content:center;padding:2rem;text-align:center}.spotify-logo{margin-bottom:.5rem}.spotify-title{font-size:1.4rem;font-weight:700}.spotify-desc{color:var(--muted);font-size:.85rem;line-height:1.6;max-width:260px}.spotify-btn{background:var(--green);border:none;border-radius:25px;color:#000;cursor:pointer;font-family:Rajdhani,sans-serif;font-size:.9rem;font-weight:700;letter-spacing:.08em;margin-top:.5rem;padding:.75rem 2rem;transition:all .2s}.spotify-btn:hover{box-shadow:0 4px 20px #1db95466;transform:scale(1.04)}.now-playing-full{align-items:center;display:flex;flex-direction:column;gap:1rem;padding:.5rem}.np-art-wrap{height:180px;overflow:hidden;width:180px}.np-art,.np-art-wrap{border-radius:12px;position:relative}.np-art{height:100%;object-fit:cover;width:100%;z-index:1}.np-art-glow{background-position:50%;background-size:cover;filter:blur(30px) saturate(2);inset:-20px;opacity:.4;position:absolute;z-index:0}.np-info{text-align:center}.np-title{font-size:1.1rem;font-weight:700;margin-bottom:.25rem}.np-artist{color:var(--muted);font-size:.85rem}.np-album{color:var(--muted);font-size:.75rem;margin-top:.15rem}.np-controls{gap:1rem}.np-btn,.np-controls{align-items:center;display:flex}.np-btn{background:var(--surface2);border:1px solid var(--border);border-radius:50%;color:var(--text);cursor:pointer;font-size:1rem;height:44px;justify-content:center;transition:all .2s;width:44px}.np-btn:hover{border-color:var(--green);color:var(--green)}.np-btn.np-play{background:var(--green);border-color:var(--green);color:#000;font-size:1.3rem;height:56px;width:56px}.np-btn.np-play:hover{box-shadow:0 0 20px #1db95466;transform:scale(1.05)}.volume-row{align-items:center;display:flex;gap:.75rem;width:100%}.vol-icon{font-size:.9rem}.vol-slider{accent-color:var(--green);flex:1 1}.np-idle{padding:2rem;text-align:center}.np-idle-icon{color:var(--muted);font-size:3rem;margin-bottom:.75rem}.np-idle-text{color:var(--muted);font-size:1rem}.np-idle-sub{color:var(--border);font-size:.78rem;margin-top:.4rem}.spotify-disconnect{background:#0000;border:1px solid var(--border);border-radius:4px;color:var(--muted);cursor:pointer;font-family:Rajdhani,sans-serif;font-size:.72rem;letter-spacing:.1em;padding:.4rem 1rem;text-transform:uppercase;transition:all .2s}.spotify-disconnect:hover{border-color:var(--accent);color:var(--accent)}.map-placeholder{align-items:center;background:#0a1220;border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;height:240px;justify-content:center;margin-bottom:1rem;overflow:hidden;position:relative}.map-grid{background-image:linear-gradient(#3a7bd51a 1px,#0000 0),linear-gradient(90deg,#3a7bd51a 1px,#0000 0);background-size:30px 30px;inset:0;position:absolute}.map-center-dot{background:var(--accent);border-radius:50%;box-shadow:0 0 20px var(--accent);height:12px;margin-bottom:.5rem;width:12px}.map-center-dot,.map-label{position:relative;z-index:1}.map-label{font-size:.9rem;font-weight:600}.map-sub{color:var(--muted);font-size:.72rem}.map-coords,.map-sub{position:relative;z-index:1}.map-coords{color:var(--accent2);font-family:Share Tech Mono,monospace;font-size:.65rem;margin-top:.5rem}.nav-dest{display:flex;gap:.75rem}.nav-input{background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text);flex:1 1;font-family:Rajdhani,sans-serif;font-size:.9rem;outline:none;padding:.6rem 1rem;transition:border-color .2s}.nav-input:focus{border-color:var(--accent2)}.nav-go{background:var(--accent2);border:none;border-radius:6px;color:#fff;cursor:pointer;font-family:Rajdhani,sans-serif;font-size:.9rem;font-weight:700;padding:.6rem 1.25rem;transition:all .2s}.nav-go:hover{opacity:.85}.settings-panel{display:flex;flex-direction:column;gap:0}.setting-row{align-items:center;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;padding:.9rem 0}.setting-row:last-child{border-bottom:none}.setting-label{color:var(--muted);font-size:.85rem}.setting-value{color:var(--text);font-family:Share Tech Mono,monospace;font-size:.82rem}.tesla-right{align-items:center;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem 1rem}.right-time{text-align:center}.rt-time{color:var(--text);font-family:Share Tech Mono,monospace;font-size:1.6rem;line-height:1}.rt-date{color:var(--muted);font-size:.7rem;margin-top:.25rem}.right-stats{display:flex;flex-direction:column;gap:.75rem;width:100%}.rstat{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:.75rem;text-align:center;transition:border-color .2s}.rstat:hover{border-color:#3a3a3a}.rstat-icon{font-size:1.1rem;margin-bottom:.25rem}.rstat-val{color:var(--text);font-family:Share Tech Mono,monospace;font-size:1.1rem;line-height:1}.rstat-label{color:var(--muted);font-size:.62rem;letter-spacing:.12em;margin-top:.2rem;text-transform:uppercase}.right-gear{width:100%}.gear-display{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:.75rem;text-align:center}.gear-label{color:var(--muted);display:block;font-size:.62rem;letter-spacing:.12em;margin-bottom:.25rem;text-transform:uppercase}.gear-value{color:var(--accent);font-size:2rem;line-height:1}.gear-value,.tesla-back{font-family:Share Tech Mono,monospace}.tesla-back{color:var(--muted);font-size:.7rem;letter-spacing:.1em;margin-top:auto;text-decoration:none;text-transform:uppercase;transition:color .2s}.tesla-back:hover{color:var(--text)}@media (max-width:900px){.tesla-main{grid-template-columns:1fr}.tesla-left,.tesla-right{display:none}}.nav-panel{display:flex;flex-direction:column;gap:.75rem;overflow:hidden;padding:1rem!important}.nav-search-row{display:flex;flex-shrink:0;gap:.6rem}.leaflet-map{border:1px solid var(--border);border-radius:10px;flex:1 1;min-height:340px;overflow:hidden;z-index:0}.nav-active-dest{align-items:center;background:#3a7bd51a;border:1px solid var(--accent2);border-radius:6px;display:flex;flex-shrink:0;gap:.5rem;padding:.5rem .75rem}.nav-dest-label{color:var(--muted);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase}.nav-dest-name{color:var(--accent2);flex:1 1;font-size:.82rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-clear{background:#0000;border:none;color:var(--muted);cursor:pointer;font-size:.8rem;padding:.1rem .3rem;transition:color .2s}.nav-clear:hover{color:var(--accent)}.nav-history{display:flex;flex-direction:column;flex-shrink:0;gap:.3rem}.nav-history-item{align-items:center;background:var(--surface2);border:1px solid var(--border);border-radius:5px;color:var(--muted);cursor:pointer;display:flex;font-family:Rajdhani,sans-serif;font-size:.8rem;gap:.5rem;padding:.5rem .75rem;text-align:left;transition:all .2s}.nav-history-item:hover{border-color:var(--accent2);color:var(--text)}.tesla-loading{align-items:center;display:flex;flex-direction:column;gap:1.5rem;justify-content:center}.loading-spinner{animation:spin .8s linear infinite;border:3px solid var(--border);border-radius:50%;border-top-color:var(--accent);height:48px;width:48px}.loading-text{color:var(--muted);font-family:Share Tech Mono,monospace;font-size:.85rem;letter-spacing:.15em;text-transform:uppercase}@keyframes spin{to{transform:rotate(1turn)}}.leaflet-popup-content-wrapper{border:1px solid var(--border)!important;box-shadow:0 4px 20px #00000080!important;color:var(--text)!important}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--surface2)!important}.leaflet-popup-content{font-family:Rajdhani,sans-serif!important;font-size:.85rem!important}.sp-root{--sp-bg:#121212;--sp-surface:#181818;--sp-surface2:#282828;--sp-green:#1db954;--sp-green-d:#169040;--sp-text:#fff;--sp-muted:#a7a7a7;--sp-border:#282828;background:var(--sp-bg);border-radius:8px;color:var(--sp-text);display:grid;font-family:Rajdhani,sans-serif;grid-template-columns:220px 1fr;grid-template-rows:1fr 80px;height:100%;overflow:hidden}.sp-sidebar{background:#000;border-right:1px solid var(--sp-border);display:flex;flex-direction:column;grid-row:1/2;overflow:hidden;padding:1rem .75rem}.sp-sidebar-top{flex-shrink:0}.sp-logo{align-items:center;color:var(--sp-text);display:flex;font-size:1rem;font-weight:700;gap:.5rem;margin-bottom:1rem;padding:0 .25rem}.sp-search-wrap{margin-bottom:.75rem;position:relative}.sp-search{background:var(--sp-surface2);border:none;border-radius:20px;box-sizing:border-box;color:var(--sp-text);font-family:Rajdhani,sans-serif;font-size:.78rem;outline:none;padding:.5rem 2rem .5rem .75rem;transition:background .2s;width:100%}.sp-search:focus{background:#3a3a3a}.sp-search-icon{font-size:.75rem;pointer-events:none;position:absolute;right:.6rem;top:50%;transform:translateY(-50%)}.sp-nav{display:flex;flex-direction:column;gap:.2rem;margin-bottom:.75rem}.sp-nav-btn{align-items:center;background:#0000;border:none;border-radius:4px;color:var(--sp-muted);cursor:pointer;display:flex;font-family:Rajdhani,sans-serif;font-size:.82rem;font-weight:600;gap:.6rem;padding:.4rem .5rem;text-align:left;transition:color .15s,background .15s}.sp-nav-btn.active,.sp-nav-btn:hover{color:var(--sp-text)}.sp-library{display:flex;flex:1 1;flex-direction:column;min-height:0;overflow:hidden}.sp-library-header{color:var(--sp-muted);flex-shrink:0;font-size:.65rem;font-weight:700;letter-spacing:.12em;padding:.5rem .25rem;text-transform:uppercase}.sp-playlist-list{display:flex;flex:1 1;flex-direction:column;gap:.1rem;overflow-y:auto}.sp-playlist-list::-webkit-scrollbar{width:3px}.sp-playlist-list::-webkit-scrollbar-thumb{background:#444;border-radius:2px}.sp-playlist-item{align-items:center;background:#0000;border:none;border-radius:4px;cursor:pointer;display:flex;gap:.6rem;padding:.4rem .25rem;text-align:left;transition:background .15s;width:100%}.sp-playlist-item.active,.sp-playlist-item:hover{background:var(--sp-surface2)}.sp-pl-img{border-radius:3px;flex-shrink:0;height:36px;object-fit:cover;width:36px}.sp-pl-img--empty{align-items:center;background:var(--sp-surface2);color:var(--sp-muted);display:flex;font-size:1rem;justify-content:center}.sp-pl-info{min-width:0}.sp-pl-name{color:var(--sp-text);font-size:.78rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sp-pl-meta{color:var(--sp-muted);font-size:.65rem}.sp-disconnect{background:#0000;border:1px solid #444;border-radius:20px;color:var(--sp-muted);cursor:pointer;flex-shrink:0;font-family:Rajdhani,sans-serif;font-size:.7rem;margin-top:.75rem;padding:.4rem 1rem;transition:all .2s}.sp-disconnect:hover{border-color:var(--sp-text);color:var(--sp-text)}.sp-main{background:var(--sp-surface);grid-row:1/2;overflow-y:auto;padding:1.25rem}.sp-main::-webkit-scrollbar{width:4px}.sp-main::-webkit-scrollbar-thumb{background:#444;border-radius:2px}.sp-view-header{font-size:1.4rem;font-weight:700;margin-bottom:1rem}.sp-section-title{font-size:1rem;font-weight:700;margin-bottom:.75rem;margin-top:.5rem}.sp-cards-grid{grid-gap:.75rem;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));margin-bottom:1rem}.sp-card{background:var(--sp-surface2);border:none;border-radius:6px;color:var(--sp-text);cursor:pointer;font-family:Rajdhani,sans-serif;padding:.75rem;text-align:left;transition:background .2s}.sp-card:hover{background:#333}.sp-card-img{aspect-ratio:1;border-radius:4px;display:block;margin-bottom:.5rem;object-fit:cover;width:100%}.sp-card-img--empty{background:#333;color:var(--sp-muted)}.sp-card-img--empty,.sp-card-img--liked{align-items:center;display:flex;font-size:1.5rem;justify-content:center}.sp-card-img--liked{background:linear-gradient(135deg,#450af5,#c4efd9);color:#fff}.sp-card-name{font-size:.75rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sp-playlist-header{align-items:flex-end;border-bottom:1px solid var(--sp-border);display:flex;gap:1rem;margin-bottom:1.25rem;padding-bottom:1rem}.sp-back{align-self:flex-start;background:#0000;border:none;color:var(--sp-muted);cursor:pointer;flex-shrink:0;font-family:Rajdhani,sans-serif;font-size:.8rem;transition:color .2s}.sp-back:hover{color:var(--sp-text)}.sp-playlist-hero-img{box-shadow:0 4px 20px #00000080;object-fit:cover}.sp-liked-hero,.sp-playlist-hero-img{border-radius:4px;flex-shrink:0;height:80px;width:80px}.sp-liked-hero{align-items:center;background:linear-gradient(135deg,#450af5,#c4efd9);color:#fff;display:flex;font-size:2rem;justify-content:center}.sp-playlist-hero-name{font-size:1.2rem;font-weight:700;margin-bottom:.25rem}.sp-playlist-hero-meta{color:var(--sp-muted);font-size:.75rem;margin-bottom:.5rem}.sp-play-all{background:var(--sp-green);border:none;border-radius:20px;color:#000;cursor:pointer;font-family:Rajdhani,sans-serif;font-size:.8rem;font-weight:700;padding:.4rem 1.25rem;transition:all .2s}.sp-play-all:hover{background:#1ed760;transform:scale(1.03)}.sp-track-list{display:flex;flex-direction:column}.sp-track{align-items:center;background:#0000;border:none;border-radius:4px;color:var(--sp-text);cursor:pointer;display:flex;font-family:Rajdhani,sans-serif;gap:.75rem;padding:.45rem .5rem;text-align:left;transition:background .15s;width:100%}.sp-track:hover{background:var(--sp-surface2)}.sp-track.playing .sp-track-name{color:var(--sp-green)}.sp-track-num{color:var(--sp-muted);flex-shrink:0;font-size:.75rem;text-align:center;width:20px}.sp-track.playing .sp-track-num{color:var(--sp-green)}.sp-track-img{border-radius:3px;flex-shrink:0;height:36px;object-fit:cover;width:36px}.sp-track-info{flex:1 1;min-width:0}.sp-track-name{font-size:.82rem;font-weight:600}.sp-track-artist,.sp-track-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sp-track-artist{color:var(--sp-muted);font-size:.7rem}.sp-track-duration{color:var(--sp-muted);flex-shrink:0;font-family:Share Tech Mono,monospace;font-size:.72rem}.sp-loading{color:var(--sp-muted);font-size:.85rem;padding:2rem;text-align:center}.sp-now-playing{grid-gap:1rem;align-items:center;background:#181818;border-top:1px solid var(--sp-border);display:grid;gap:1rem;grid-column:1/3;grid-row:2/3;grid-template-columns:1fr 2fr 1fr;padding:0 1rem}.sp-np-left{align-items:center;display:flex;gap:.75rem;min-width:0}.sp-np-img{border-radius:4px;flex-shrink:0;height:48px;object-fit:cover;width:48px}.sp-np-info{min-width:0}.sp-np-title{font-size:.82rem;font-weight:600}.sp-np-artist,.sp-np-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sp-np-artist{color:var(--sp-muted);font-size:.7rem}.sp-np-heart{background:#0000;border:none;color:var(--sp-green);cursor:pointer;flex-shrink:0;font-size:.9rem}.sp-np-center{flex-direction:column;gap:.4rem}.sp-np-center,.sp-np-controls{align-items:center;display:flex}.sp-np-controls{gap:1rem}.sp-ctrl-btn{background:#0000;border:none;color:var(--sp-muted);cursor:pointer;font-size:1rem;padding:.2rem .4rem;transition:color .15s}.sp-ctrl-btn:hover{color:var(--sp-text)}.sp-ctrl-play{align-items:center;background:var(--sp-text);border-radius:50%;color:#000!important;display:flex;font-size:.9rem;height:32px;justify-content:center;transition:transform .15s!important;width:32px}.sp-ctrl-play:hover{transform:scale(1.06)!important}.sp-progress-row{align-items:center;display:flex;gap:.5rem;width:100%}.sp-time{color:var(--sp-muted);flex-shrink:0;font-family:Share Tech Mono,monospace;font-size:.62rem}.sp-progress-bar{background:#4a4a4a;border-radius:2px;cursor:pointer;flex:1 1;height:4px;position:relative;transition:height .15s}.sp-progress-bar:hover{height:6px}.sp-progress-fill{background:var(--sp-text);border-radius:2px;height:100%;pointer-events:none;transition:width .3s linear}.sp-progress-bar:hover .sp-progress-fill{background:var(--sp-green)}.sp-progress-thumb{background:var(--sp-text);border-radius:50%;height:10px;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .15s;width:10px}.sp-progress-bar:hover .sp-progress-thumb{opacity:1}.sp-np-right{align-items:center;display:flex;gap:.5rem;justify-content:flex-end}.sp-vol-icon{color:var(--sp-muted);font-size:.8rem}.sp-vol-slider{accent-color:var(--sp-green);width:80px}
/*# sourceMappingURL=main.3fb9b2f3.css.map*/