:root{
--blue: #24658A; --teal: #47BAB8; --cyan: #37A6BE; --bg: rgb(15 23 42);
--fg: rgb(226 232 240);
--muted: rgb(148 163 184);
--accent: rgb(94 234 212);
--accent-2: var(--cyan);
--maxw: 1100px;
--bg-1: color-mix(in oklab, var(--blue) 35%, black);
--bg-2: color-mix(in oklab, var(--blue) 10%, black);
}
.headline{
margin:clamp(16px,2.5vh,28px) 0 0; font-weight:700; line-height:1.08;
font-size:clamp(2.4rem, 1.8rem + 4vw, 4.5rem);
letter-spacing:-0.01em;
}
.headline span.accent{
color:var(--accent);
background-image: linear-gradient(108deg, #0090f7, #ba62fc 33%, #f2416b 66%, #f55600);
background-clip: text;
-webkit-text-fill-color: rgba(0, 0, 0, 0);
}
section.hero{
background:
radial-gradient(900px 600px at 20% 10%, color-mix(in oklab, var(--blue) 25%, transparent) 0%, transparent 60%),
linear-gradient(180deg, var(--bg-1), var(--bg-2) 60%),#0f172a;
} .spot{ position:absolute; 
inset:0;
pointer-events:none;
z-index:10;
background:
radial-gradient(600px 600px at var(--mx, 50%) var(--my, 30%),
color-mix(in lab, var(--accent) 20%, transparent) 0%,
rgba(255,255,255,.06) 15%,
transparent 30%);
filter:blur(0.5px); }
.ykm-infinite-grid {
position: relative;
width: 100%;
min-height: 100svh; overflow: hidden;
touch-action: none; background: var(--ykm-ig-bg, transparent); }
.ykm-infinite-grid > canvas {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
}
.ykm-ig-btn {
position: absolute;
right: 1rem;
bottom: 1rem;
z-index: 2;
padding: .5rem .8rem;
border-radius: 999px;
border: 0;
font: inherit;
cursor: pointer;
background: color-mix(in oklab, white 90%, black);
}
@media (prefers-reduced-motion: reduce) {
.ykm-infinite-grid { --ykm-ig-bg: #0b0d12; }
}
.external-link-icon {
display: inline-block;
width: 0.8em;
height: 0.8em;
vertical-align: middle;
margin-left: 3px;
fill: currentColor;
opacity: 0.7;
}