:root{--g:rgba(0,0,0,.07);--g2:rgba(0,0,0,.28);--pg:#fafafa;--card:#fff;--line:#e5e5e5;--ink:#0a0a0a}
@media (prefers-color-scheme:dark){:root{--g:rgba(255,255,255,.07);--g2:rgba(255,255,255,.3);--pg:#080808;--card:#0f0f0f;--line:#262626;--ink:#f5f5f5}}
html{background-color:var(--pg);background-image:linear-gradient(var(--g) 1px,transparent 1px),linear-gradient(90deg,var(--g) 1px,transparent 1px);background-size:40px 40px;background-position:-1px -1px;min-height:100%}
body{background:transparent!important;color:var(--ink)!important;position:relative;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(var(--g2) 1px,transparent 1px),linear-gradient(90deg,var(--g2) 1px,transparent 1px);background-size:40px 40px;background-position:-1px -1px;-webkit-mask-image:radial-gradient(240px circle at var(--mx,50%) var(--my,35%),#000,transparent 70%);mask-image:radial-gradient(240px circle at var(--mx,50%) var(--my,35%),#000,transparent 70%);opacity:0;animation:grid-in 1.2s ease .2s forwards}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 0,transparent 0,var(--pg) 78%);opacity:.55}
main{position:relative;z-index:1;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:32px 28px!important;margin:56px auto!important;box-shadow:0 1px 2px rgba(0,0,0,.04),0 18px 50px rgba(0,0,0,.06);animation:card-in .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes grid-in{to{opacity:1}}@keyframes card-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){body::before{animation:none;opacity:1}main{animation:none}}
@media (max-width:520px){main{margin:20px 12px!important;padding:24px 18px!important}}