:root{--bg:#0a0a0a;--panel:#111213;--panel-2:#141516;--text:#f5f5f5;--muted:#c8c8c8;--red:#ef4444;--red-2:#b91c1c;--ring:#262626;--card-h:120px}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;background:var(--bg);color:var(--text);overflow-x:hidden}.grid-bg{position:fixed;inset:0;z-index:-2;opacity:.07;background-image:linear-gradient(to right,rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.18) 1px,transparent 1px);background-size:32px 32px}.glow{position:fixed;inset:0;z-index:-1;pointer-events:none}.glow::before,.glow::after{content:"";position:absolute;border-radius:9999px;filter:blur(100px);animation:breathe 6s ease-in-out infinite;will-change:transform,opacity}.glow::before{width:420px;height:420px;left:-80px;top:-60px;background:radial-gradient(closest-side,rgba(239,68,68,.6),transparent)}.glow::after{width:520px;height:520px;right:-120px;bottom:-60px;background:radial-gradient(closest-side,rgba(239,68,68,.45),transparent);animation-duration:8.5s}@keyframes breathe{0%,100%{opacity:.25;transform:scale(.88)}50%{opacity:1;transform:scale(1.32)}}.fire-particles{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}.fire-particle{position:absolute;bottom:-10px;width:4px;height:4px;background:radial-gradient(circle,rgba(239,68,68,.8),rgba(239,68,68,0));border-radius:50%;filter:blur(2px);animation:rise-up linear infinite;will-change:transform,opacity}@keyframes rise-up{0%{transform:translateY(0) translateX(0) scale(1);opacity:0}10%{opacity:.8}50%{opacity:.6}100%{transform:translateY(-100vh) translateX(var(--drift,0px)) scale(.2);opacity:0}}header{max-width:72rem;margin:0 auto;padding:6rem 1.25rem 1rem}h1{margin:0;font-size:clamp(2rem,4vw+.5rem,4rem);font-weight:900;letter-spacing:-.02em;text-align:center}.accent{color:var(--red)}.subtitle{margin:.75rem auto 0;max-width:40rem;text-align:center;color:#d6d6d6;opacity:.9}.chip{display:inline-flex;align-items:center;gap:.5rem;margin:1rem auto 0;padding:.5rem .875rem;border-radius:999px;border:1px solid rgba(239,68,68,.4);background:rgba(239,68,68,.12);color:#ffd6d6;font-size:.9rem}.dot{width:8px;height:8px;border-radius:9999px;background:#f87171;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1)}}main{max-width:72rem;margin:0 auto;padding:1rem 1.25rem 5rem}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;align-items:stretch}.card{position:relative;border-radius:18px;padding:2px;height:var(--card-h);background:radial-gradient(1200px 1200px at var(--mx,50%) var(--my,50%),rgba(239,68,68,.6),transparent 40%),linear-gradient(180deg,#1a1b1e,#0f1012);overflow:hidden;transition:transform .25s ease,box-shadow .3s ease;contain:layout style paint}.card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 8px 25px rgba(239,68,68,.4)}.card-inner{position:relative;background:linear-gradient(180deg,var(--panel),var(--panel-2));border-radius:16px;padding:16px;border:1px solid var(--ring);height:100%}.row{display:flex;align-items:center;gap:14px}.icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:#18181b;border:1px solid #2a2a2a;color:#ffbfbf;transition:transform .3s ease}.icon .i{width:24px;height:24px;display:block}.card:hover .icon{transform:scale(1.15) rotate(-5deg)}.meta{min-width:0}.name{font-weight:700;margin:0 0 4px 0}.name-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag{margin:0;color:#cfcfcf;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.arrow{margin-left:auto;display:none}@media(min-width:768px){.arrow{display:block}}.arrow svg{width:22px;height:22px;color:#ff7575;transition:transform .2s ease}.card:hover .arrow svg{transform:translateX(3px)}.underline{height:2px;background:linear-gradient(90deg,transparent,#ef4444,transparent);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;margin-top:10px}.card:hover .underline{transform:scaleX(1)}.card::after{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(120deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,0) 80%);transform:skewX(-20deg)}.card:hover::after{animation:shine .8s forwards}@keyframes shine{100%{left:125%}}footer{max-width:72rem;margin:0 auto;padding:2.5rem 1.25rem 4rem;text-align:center;color:#c9c9c9}.top{display:inline-block;margin-top:.75rem;padding:.5rem .9rem;border-radius:999px;border:1px solid #2a2a2a;background:#121214;color:#e5e5e5;text-decoration:none}.top:hover{border-color:var(--red-2);color:#ffdede}.top:focus-visible{outline:2px solid var(--red);outline-offset:2px}a.card-link{color:inherit;text-decoration:none;outline:none;display:block;height:100%}a.card-link:focus-visible .card-inner{box-shadow:0 0 0 3px rgba(239,68,68,.45)}.skip-link{position:absolute;top:-40px;left:0;background:var(--red);color:white;padding:8px 16px;text-decoration:none;z-index:100;border-radius:4px}.skip-link:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.copy-btn{position:relative;margin-left:auto;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:8px;cursor:pointer;color:#ff7575;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.copy-btn:hover{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.5);transform:scale(1.05)}.copy-btn:focus-visible{outline:2px solid var(--red);outline-offset:2px}.copy-btn.copied{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3);color:#4ade80}.card-inner:has(.copy-btn) .arrow{display:none}.badge{position:absolute;top:8px;right:8px;z-index:2;opacity:.8;transition:opacity .2s ease}.card:hover .badge{opacity:1}.badge img{display:block;height:18px;width:auto}@media (max-width:768px){.copy-btn{padding:6px}.arrow{display:none}}@media (max-width:420px){header{padding-top:4rem}}@media (prefers-reduced-motion:reduce){.glow::before,.glow::after{animation:none;opacity:.25}.dot{animation:none;opacity:1}.card{transition:none}.card::after{display:none}.arrow svg,.icon,.underline{transition:none}.fire-particles{display:none}.fire-particle{animation:none}}
