:root{--bg:#0a0a0f;--bg2:#111118;--bg3:#1a1a24;--border:#ffffff0f;--border-hover:#ffffff24;--text:#e8e8f0;--muted:#889;--accent1:#7c6dfa;--accent2:#fa6d7c;--accent3:#6dfac2;--accent4:#fac96d;--pixel:"Silkscreen", monospace;--body:"DM Sans", sans-serif}[data-theme=light]{--bg:#e8dcc8;--bg2:#f2e9d8;--bg3:#ddd0b8;--border:#0000001f;--border-hover:#00000038;--text:#4a3f2f;--muted:#7a6a54}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:var(--body);min-height:100vh;transition:background .3s,color .3s;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:9999;background:repeating-linear-gradient(0deg,#0000,#0000 2px,#00000012 2px 4px);position:fixed;inset:0}body:after{content:"";pointer-events:none;z-index:0;background-image:linear-gradient(#7c6dfa0a 1px,#0000 1px),linear-gradient(90deg,#7c6dfa0a 1px,#0000 1px);background-size:48px 48px;position:fixed;inset:0}nav{z-index:100;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);background:#0a0a0fd9;justify-content:space-between;align-items:center;height:64px;padding:0 3rem;transition:background .3s;display:flex;position:fixed;top:0;left:0;right:0}[data-theme=light] nav{background:#e8dcc8f2}.nav-logo{align-items:center;gap:.5rem;text-decoration:none;display:flex}.nav-logo img{width:auto;height:36px}.nav-logo-text{font-family:var(--pixel);letter-spacing:1px;color:var(--text);font-size:16px}.nav-logo-text span{color:var(--accent1)}@media (width<=480px){.nav-logo-text{display:none}}.nav-links{gap:2rem;list-style:none;display:flex}.nav-links a{letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-size:13px;font-weight:300;text-decoration:none;transition:color .2s}.nav-links a:hover{color:var(--text)}.theme-toggle{cursor:pointer;background:0 0;border:none;align-items:center;padding:4px;display:flex}.toggle-track{border-radius:14px;align-items:center;width:52px;height:28px;transition:background .3s;display:flex;position:relative}.toggle-track.dark{background:linear-gradient(135deg,#2a2a3a,#1a1a28);border:1px solid #7c6dfa4d}.toggle-track.light{background:linear-gradient(135deg,#ddd0b8,#ccc0a8);border:1px solid #00000014}.toggle-thumb{border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;transition:transform .3s,background .3s,box-shadow .3s;display:flex;position:absolute;top:2px;left:3px}.toggle-track.dark .toggle-thumb{background:#1a1a28;transform:translate(24px);box-shadow:0 2px 8px #0006}.toggle-track.light .toggle-thumb{box-shadow:none;background:0 0;transform:translate(0)}.toggle-thumb svg{width:12px;height:12px}.toggle-track.dark .toggle-thumb svg{color:#7c6dfa}.toggle-track.light .toggle-thumb svg{color:#4a3f2f}.hero{z-index:1;text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:6rem 2rem 4rem;display:flex;position:relative}.hero-eyebrow{font-family:var(--pixel);letter-spacing:4px;color:var(--accent1);opacity:0;margin-bottom:2rem;font-size:11px;animation:.6s .2s forwards fadeUp}.hero-title{font-family:var(--pixel);letter-spacing:-1px;opacity:0;margin-bottom:1.5rem;font-size:clamp(40px,8vw,88px);line-height:1.1;animation:.6s .4s forwards fadeUp}.hero-title .line1{color:var(--text);display:block}.hero-title .line2{background:linear-gradient(90deg, var(--accent1), var(--accent2));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;display:block}.hero-sub{color:var(--muted);opacity:0;max-width:420px;margin-bottom:3rem;font-size:16px;font-weight:300;line-height:1.8;animation:.6s .6s forwards fadeUp}.hero-cta{opacity:0;flex-wrap:wrap;justify-content:center;gap:1rem;animation:.6s .8s forwards fadeUp;display:flex}.btn-primary{font-family:var(--pixel);letter-spacing:1px;background:var(--accent1);color:#fff;cursor:pointer;clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);border:none;padding:14px 28px;font-size:12px;text-decoration:none;transition:transform .15s,box-shadow .15s}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px #7c6dfa66}.btn-ghost{font-family:var(--pixel);letter-spacing:1px;color:var(--muted);border:1px solid var(--border-hover);cursor:pointer;clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);background:0 0;padding:13px 28px;font-size:12px;text-decoration:none;transition:color .2s,border-color .2s}.btn-ghost:hover{color:var(--text);border-color:var(--accent1)}.scroll-hint{opacity:0;flex-direction:column;align-items:center;gap:8px;animation:.6s 1.2s forwards fadeUp;display:flex;position:absolute;bottom:2.5rem;left:50%;transform:translate(-50%)}.scroll-hint span{font-family:var(--pixel);letter-spacing:3px;color:var(--muted);font-size:9px}.scroll-dot{background:linear-gradient(to bottom, var(--accent1), transparent);width:1px;height:40px;animation:1.8s ease-in-out infinite scrollPulse}@keyframes scrollPulse{0%,to{opacity:.3;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.2)}}section{z-index:1;max-width:1280px;margin:0 auto;padding:6rem 2rem;position:relative}.section-header{align-items:baseline;gap:1.5rem;margin-bottom:3rem;display:flex}.section-tag{font-family:var(--pixel);letter-spacing:3px;color:var(--accent1);opacity:.7;font-size:10px}.section-title{font-family:var(--pixel);color:var(--text);font-size:clamp(22px,3vw,32px)}.cat-tabs{flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem;display:flex}.cat-tab{font-family:var(--pixel);letter-spacing:1px;color:var(--muted);border:1px solid var(--border);cursor:pointer;background:0 0;padding:7px 14px;font-size:10px;transition:all .2s}.cat-tab:hover,.cat-tab.active{color:var(--text);border-color:var(--accent1);background:#7c6dfa1a}.card-grid{background:var(--border);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5px;display:grid}.app-card{background:var(--bg2);cursor:pointer;padding:0;text-decoration:none;transition:background .2s;display:block;position:relative;overflow:hidden}.app-card:hover{background:var(--bg3)}.card-thumb{aspect-ratio:16/9;justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}.card-icon{opacity:.9;width:64px;height:64px;transition:transform .3s,opacity .3s}.card-icon svg{width:100%;height:100%}.app-card:hover .card-icon{opacity:1;transform:scale(1.1)}.card-body{border-top:1px solid var(--border);padding:1.25rem 1.5rem 1.5rem}.card-meta{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.card-tag{font-family:var(--pixel);letter-spacing:2px;border:1px solid;padding:3px 8px;font-size:9px}.tag-game{color:var(--accent1);background:#7c6dfa14;border-color:#7c6dfa66}.tag-tool{color:var(--accent3);background:#6dfac214;border-color:#6dfac266}.tag-fun{color:var(--accent2);background:#fa6d7c14;border-color:#fa6d7c66}.tag-new{color:var(--accent4);background:#fac96d14;border-color:#fac96d66}.card-status{font-family:var(--pixel);letter-spacing:1px;color:var(--muted);align-items:center;gap:5px;font-size:9px;display:flex}.status-dot{background:#3a3a3a;border-radius:50%;width:6px;height:6px}.status-dot.live{background:var(--accent3);box-shadow:0 0 6px var(--accent3)}.status-dot.wip{background:var(--accent4)}.status-dot.soon{background:var(--muted)}.card-title{font-family:var(--pixel);color:var(--text);margin-bottom:.5rem;font-size:16px;line-height:1.3}.card-desc{color:var(--muted);margin-bottom:1rem;font-size:13px;font-weight:300;line-height:1.7}.card-footer{justify-content:space-between;align-items:center;display:flex}.card-url{font-family:var(--pixel);letter-spacing:1px;color:#7c6dfa80;font-size:9px}.card-arrow{color:var(--muted);font-size:18px;transition:transform .2s,color .2s}.app-card:hover .card-arrow{color:var(--accent1);transform:translate(3px,-3px)}.card-placeholder{background:var(--bg2);aspect-ratio:auto;cursor:default;opacity:.4;border:1px dashed var(--border-hover);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:3rem;display:flex}.card-placeholder-icon{font-size:32px;line-height:1}.card-placeholder-text{font-family:var(--pixel);letter-spacing:2px;color:var(--muted);font-size:11px}.about-strip{z-index:1;background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);transition:background .3s;position:relative}.about-inner{grid-template-columns:1fr 1fr;align-items:center;gap:4rem;max-width:1280px;margin:0 auto;padding:5rem 2rem;display:grid}.about-left h2{font-family:var(--pixel);margin-bottom:1.5rem;font-size:clamp(20px,3vw,30px);line-height:1.4}.about-left h2 em{color:var(--accent2);font-style:normal}.about-left p{color:var(--muted);font-size:15px;font-weight:300;line-height:1.9}.about-right{background:var(--border);grid-template-columns:1fr 1fr;gap:1px;display:grid}.stat-cell{background:var(--bg);padding:1.5rem;transition:background .3s}.stat-num{font-family:var(--pixel);color:var(--accent1);margin-bottom:.25rem;font-size:32px}.stat-label{color:var(--muted);letter-spacing:1px;text-transform:uppercase;font-size:12px;font-weight:300}.marquee-wrap{z-index:1;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#7c6dfa0a;padding:14px 0;position:relative;overflow:hidden}.marquee-track{white-space:nowrap;animation:20s linear infinite marquee;display:flex}.marquee-item{font-family:var(--pixel);letter-spacing:2px;color:var(--muted);align-items:center;gap:2rem;padding:0 2rem;font-size:11px;display:inline-flex}.marquee-item:after{content:"◆";color:var(--accent1);font-size:8px}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}footer{z-index:1;border-top:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem;max-width:100%;padding:3rem 2rem;display:flex;position:relative}.footer-logo{font-family:var(--pixel);letter-spacing:2px;color:var(--muted);font-size:14px;text-decoration:none}.footer-logo span{color:var(--accent1)}.footer-copy{color:#88889980;letter-spacing:.5px;font-size:12px;font-weight:300}.footer-links{gap:1.5rem;display:flex}.footer-links a{font-family:var(--pixel);letter-spacing:1px;color:var(--muted);opacity:.6;font-size:9px;text-decoration:none;transition:opacity .2s}.footer-links a:hover{opacity:1}.donate-btn{background:linear-gradient(135deg,#7c6dfa,#6dfac2);-webkit-text-fill-color:transparent;border:1px solid var(--accent1);-webkit-background-clip:text;background-clip:text;padding:4px 10px;opacity:1!important;font-weight:500!important}.donate-btn:hover{background:linear-gradient(135deg,#6dfac2,#7c6dfa)}.kofi-widget{z-index:9999;position:fixed;bottom:20px;right:20px}.kofi-btn img{border:0;display:block}.kofi-popup{background:#f9f9f9;border-radius:8px;width:300px;padding:4px;position:absolute;bottom:50px;right:0;box-shadow:0 4px 20px #0003}.kofi-popup iframe{border-radius:4px}.kofi-close{color:#666;cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:12px;display:flex;position:absolute;top:8px;right:8px}.kofi-close:hover{background:#f0f0f0}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (width<=768px){nav{height:56px;padding:0 1rem}.nav-links{display:none}.nav-right{align-items:center;gap:.5rem;display:flex}.hero{padding:5rem 1rem 3rem}.hero-sub{padding:0 1rem;font-size:14px}.hero-cta{flex-direction:column;width:100%;max-width:280px}.btn-primary,.btn-ghost{text-align:center;width:100%}section{padding:3rem 1rem}.card-grid{gap:1px}.about-inner{grid-template-columns:1fr;gap:2rem;padding:3rem 1rem}.about-right{grid-template-columns:1fr 1fr}footer{text-align:center;flex-direction:column;gap:1rem}.footer-links{justify-content:center}.scroll-hint{bottom:1.5rem}.scroll-dot{height:30px}}.mobile-menu-btn{border:1px solid var(--border);color:var(--muted);cursor:pointer;background:0 0;padding:8px 10px;font-size:18px;display:none}@media (width<=768px){.mobile-menu-btn{display:block}}.mobile-menu{background:var(--bg2);border-bottom:1px solid var(--border);flex-direction:column;gap:1rem;padding:1rem;display:none;position:fixed;top:56px;left:0;right:0}.mobile-menu.open{display:flex}.mobile-menu a{font-family:var(--pixel);letter-spacing:1px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border);padding:.5rem 0;font-size:12px;text-decoration:none}.mobile-menu a:hover{color:var(--text)}
