*{box-sizing:border-box;margin:0;padding:0}body{color:#eee;background:#1a1a2e;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow-x:hidden}:root{--bg:#1a1a2e;--bg-card:#252540;--text:#f3f4f6;--text-muted:#9ca3af;--text-dim:#6b7280;--border:#2d2d4d;--border-hover:#4b4b6c;--blue:#3b82f6}header{border-bottom:1px solid var(--border);background:var(--bg);z-index:100;justify-content:space-between;align-items:center;padding:20px 40px;display:flex;position:sticky;top:0}.logo-header{align-items:center;gap:12px;text-decoration:none;display:flex}.logo-header span{color:var(--text);font-size:24px;font-weight:600}nav{align-items:center;gap:30px;display:flex}nav a{color:var(--text-muted);font-size:15px;text-decoration:none;transition:color .2s}nav a:hover,nav a.active{color:var(--text)}.nav-dropdown{position:relative}.nav-dropdown-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;align-items:center;gap:4px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:15px;transition:color .2s;display:flex}.nav-dropdown-btn:hover{color:var(--text)}.dropdown-arrow{font-size:10px}.nav-dropdown-menu{background:var(--bg-card);border:1px solid var(--border-hover);z-index:200;border-radius:8px;min-width:160px;margin-top:8px;padding:6px 0;display:none;position:absolute;top:100%;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0000004d}.nav-dropdown.is-open .nav-dropdown-menu{display:block}.nav-dropdown-menu a{color:var(--text-muted);padding:8px 16px;font-size:14px;text-decoration:none;transition:all .15s;display:block}.nav-dropdown-menu a:hover{background:var(--border);color:var(--text)}.nav-dropdown-menu a:focus{background:var(--border);color:var(--text);outline:none}.github-link{background:var(--bg-card);border-radius:8px;align-items:center;gap:8px;padding:8px 16px;transition:background .2s;display:flex;color:var(--text)!important}.github-link:hover{background:var(--border)}.brand-kit-container{padding:40px}footer{border-top:1px solid var(--border);text-align:center;max-width:960px;color:var(--text-dim);margin:0 auto 40px;padding:40px 40px 20px;font-size:14px}footer a{color:var(--blue);text-decoration:none}footer a:hover{text-decoration:underline}h1{text-align:center;color:#f3f4f6;margin-bottom:10px;font-family:Inter,sans-serif;font-size:2.5rem;font-weight:600}.subtitle{text-align:center;color:#888;margin-bottom:50px}.section{max-width:1200px;margin:0 auto 60px}.section-title{color:#f97316;border-bottom:1px solid #333;margin-bottom:25px;padding-bottom:10px;font-size:1.3rem}.logo-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:30px;display:flex}.logo-card{text-align:center;background:#252540;border-radius:16px;padding:30px}.logo-card.light{background:#fff}.logo-card.dark{background:#0a0a14}.logo-card h4{color:#999;margin-top:15px;font-size:.9rem;font-weight:500}.favicon-grid{flex-wrap:wrap;justify-content:center;align-items:end;gap:20px;display:flex}.favicon-item{text-align:center}.favicon-item span{color:#666;margin-top:8px;font-size:.75rem;display:block}.preview-box{border-radius:12px;padding:30px;display:inline-block}.preview-box.on-white{background:#fff}.preview-box.on-dark{background:#0a0a14}.animation-container{flex-wrap:wrap;justify-content:center;gap:40px;display:flex}.animation-card{text-align:center;background:#252540;border-radius:16px;padding:40px;overflow:hidden}.animation-card h4{color:#999;margin-top:20px;font-weight:400}.replay-btn{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:6px;margin-top:15px;padding:8px 20px;font-size:.85rem;transition:background .2s}.replay-btn:hover{background:#2563eb}@media (width<=768px){header{flex-wrap:wrap;gap:16px;padding:16px 20px}nav{flex-wrap:wrap;justify-content:center;gap:16px}nav a:not(.github-link){font-size:14px}.github-link{padding:6px 12px;font-size:14px}.brand-kit-container{padding:20px}h1{font-size:2rem}.section-title{font-size:1.1rem}.logo-row{gap:20px}.logo-card{width:100%;max-width:100%;padding:20px}.logo-card svg{max-width:100%;height:auto}.animation-container{gap:20px}.animation-card{width:100%;padding:24px}.preview-box{width:100%;padding:20px;overflow-x:auto}.favicon-grid{gap:15px}}@media (width<=480px){header{padding:12px 16px}nav{gap:12px}.logo-header span{font-size:20px}.brand-kit-container{padding:16px}h1{font-size:1.75rem}.subtitle{margin-bottom:30px;font-size:.9rem}.section{margin-bottom:40px}.logo-card{padding:16px}.animation-card{padding:20px}.preview-box{padding:16px}}