.black-hole{--bh-size:min(118vmin, 1080px);--bh-warm:#f6d9a8;isolation:isolate;min-height:clamp(560px,86vh,960px);padding:clamp(48px, 8vh, 96px) var(--pad,20px);color:#fff;background:radial-gradient(#0b1430 0%,#05070e 55%,#020309 100%);place-items:center;display:grid;position:relative;overflow:hidden}.black-hole .bh-stage{z-index:-1;pointer-events:none;position:absolute;inset:0}.black-hole .bh-stage>div{border-radius:50%;position:absolute;top:50%;left:50%;translate:-50% -50%}.black-hole .bh-stars{opacity:.55;background-image:radial-gradient(1.5px 1.5px at 20px 30px,#fffc 50%,#0000 51%),radial-gradient(1px 1px at 90px 120px,#fff9 50%,#0000 51%),radial-gradient(1.5px 1.5px at 160px 60px,#cfe8f5aa 50%,#0000 51%),radial-gradient(1px 1px at 130px 170px,#ffffff80 50%,#0000 51%);background-size:200px 200px;width:170vmax;height:170vmax;animation:240s linear infinite bh-spin}.black-hole .bh-stars-far{opacity:.3;background-size:120px 120px;animation-duration:420s;animation-direction:reverse}.black-hole .bh-disk{width:var(--bh-size);height:var(--bh-size);background:conic-gradient(from 0deg, transparent 0deg, var(--sky,#6fb8d9) 50deg, var(--bh-warm) 95deg, transparent 150deg, var(--depth,#4e94b8) 200deg, var(--bh-warm) 250deg, var(--sky,#6fb8d9) 300deg, transparent 360deg);filter:blur(14px);opacity:.8;will-change:rotate;animation:28s linear infinite bh-spin;-webkit-mask:radial-gradient(circle,#0000 22%,#000 27% 40%,#0000 70%);mask:radial-gradient(circle,#0000 22%,#000 27% 40%,#0000 70%)}.black-hole .bh-arms{width:calc(var(--bh-size) * .9);height:calc(var(--bh-size) * .9);filter:blur(3px);opacity:.45;will-change:rotate;background:repeating-conic-gradient(#ffffff8c 0deg 2deg,#0000 2deg 14deg);animation:16s linear infinite bh-spin;-webkit-mask:radial-gradient(circle,#0000 24%,#000 28% 36%,#0000 62%);mask:radial-gradient(circle,#0000 24%,#000 28% 36%,#0000 62%)}.black-hole .bh-ring{width:calc(var(--bh-size) * .5);height:calc(var(--bh-size) * .5);border:2px solid #f6d9a8bf;animation:6s ease-in-out infinite bh-pulse;box-shadow:0 0 24px 4px #f6d9a873,0 0 80px 12px #6fb8d940}.black-hole .bh-horizon{width:calc(var(--bh-size) * .48);height:calc(var(--bh-size) * .48);background:radial-gradient(circle,#000 62%,#02040a 100%);box-shadow:inset 0 0 60px 10px #000}@keyframes bh-spin{to{rotate:360deg}}@keyframes bh-pulse{50%{opacity:.7;scale:1.015}}@media (prefers-reduced-motion:reduce){.black-hole .bh-stage>div{animation:none}}.black-hole .bh-content{border-radius:var(--r,16px);text-align:center;background:#05070ee0;border:1px solid #ffffff24;width:min(100%,620px);padding:clamp(28px,5vw,44px) clamp(20px,4vw,40px);position:relative;box-shadow:0 0 80px 40px #0009}@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.black-hole .bh-content{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}.black-hole .bh-code{font-family:var(--font-geist-mono), monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--sky,#6fb8d9);margin:0 0 14px;font-size:12px}.black-hole h1{letter-spacing:-.035em;color:#fff;margin:0 0 16px;font-size:clamp(30px,5vw,52px);font-weight:500;font-stretch:108%;line-height:1.05}.black-hole .bh-sub{color:#ffffffe0;max-width:44ch;margin:0 auto 28px;font-size:clamp(16px,1.4vw,18px);line-height:1.5}.black-hole .bh-search{gap:10px;display:flex}.black-hole .bh-search input{min-width:0;color:var(--ink,#0e1a33);font-family:var(--font-inter), sans-serif;background:#fff;border:2px solid #fff;border-radius:999px;outline:0;flex:1;padding:14px 20px;font-size:16px}.black-hole .bh-search input::placeholder{color:var(--ink-60,#5a6272);opacity:1}.black-hole .bh-search input:focus-visible{border-color:var(--sky,#6fb8d9);box-shadow:0 0 0 3px #6fb8d999}.black-hole .bh-search button{border:2px solid var(--sky,#6fb8d9);background:var(--sky,#6fb8d9);color:var(--ink,#0e1a33);font-family:var(--font-geist-mono), monospace;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border-radius:999px;padding:14px 26px;font-size:13px;font-weight:600}.black-hole .bh-search button:hover{background:#fff;border-color:#fff}.black-hole .bh-search button:focus-visible{outline-offset:3px;outline:3px solid #fff}@media (max-width:480px){.black-hole .bh-search{flex-direction:column}}
