/* The site's whole design system. Inlined into at build time (zero render-blocking requests). Brand: the game's own material: deep space near-black, one liquid glass system, violet(268°)→gold(46°) membrane rim (hues lifted from scripts/gen-icon.mjs). Typography is the hero; nothing shouts. Every animation runs on transform/opacity only and sits behind prefers-reduced-motion. */ :root { --bg: #05060d; --bg-raise: #0a0a16; --ink: #fff; --ink-2: rgba(255, 255, 255, .78); --ink-3: rgba(255, 255, 255, .58); --violet: #8b5cf6; --violet-text: #b9a3fa; /* 6.2:1 on --bg, safe for small accent text */ --gold: #f0b429; --gold-soft: #f6c65d; --rim: linear-gradient(165deg, #a78bfa, #8b5cf6 38%, #c99035 78%, #f0b429); --grad-ink: linear-gradient(100deg, #c4b0ff 5%, #8b5cf6 38%, #f0b429 95%); --glass: rgba(255, 255, 255, .04); --glass-edge: rgba(255, 255, 255, .09); --radius: 26px; --w: 68rem; --pad: clamp(1.25rem, 5vw, 2.5rem); color-scheme: dark; } * { box-sizing: border-box; margin: 0; } html { scroll-padding-top: 5rem; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Kills the 300ms tap delay without disabling pinch-zoom (never do that). */ a, button, summary { touch-action: manipulation; } /* Long words in headings must never be the thing that forces a sideways scroll on a narrow phone. */ h1, h2, h3 { overflow-wrap: break-word; } body { background: var(--bg); color: var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } ::selection { background: rgba(139, 92, 246, .45); color: #fff; } /* ---------- the sky: space, two liquid pools, our starfield ---------- */ /* Stars are a tiny inline SVG (no request). Pools are pre-blurred radial gradients, and drift animates transform only, so the paint is done once. */ .sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(120% 85% at 70% -10%, #0b0718 0%, transparent 60%), radial-gradient(100% 70% at 12% 108%, #0a0812 0%, transparent 55%), var(--bg); } .sky::before, .sky::after { content: ""; position: absolute; width: 68vmax; height: 68vmax; border-radius: 50%; will-change: transform; } .sky::before { left: -22vmax; top: -30vmax; background: radial-gradient(circle at 50% 50%, rgba(124, 58, 237, .21), transparent 62%); } .sky::after { right: -30vmax; bottom: -34vmax; background: radial-gradient(circle at 50% 50%, rgba(240, 180, 41, .10), transparent 62%); } /* Two star layers at different scales and speeds. Real parallax: the near field crosses faster than the far field, which is what makes a flat plane read as depth. Both are oversized so drifting never exposes an edge, and both animate transform only. */ .stars { position: absolute; inset: -14%; background-repeat: repeat; background-size: cover; will-change: transform; } .stars.far { opacity: .55; background-size: 140% 140%; } .stars.near { opacity: .95; } @media (prefers-reduced-motion: no-preference) { /* Gradients: drift AND shimmer. The opacity swing is what reads as shimmer; because the periods are coprime with the drift, the pools never reach peak brightness and peak travel together. */ .sky::before { animation: pool 26s ease-in-out infinite alternate, shimmer 17s ease-in-out -6s infinite alternate; } .sky::after { animation: pool 34s ease-in-out infinite alternate-reverse, shimmer 23s ease-in-out -11s infinite alternate; } @keyframes pool { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6vmax, 4vmax, 0) scale(1.12); } } @keyframes shimmer { from { opacity: .58; } to { opacity: 1; } } .stars.far { animation: star-far 210s linear infinite; } .stars.near { animation: star-near 130s linear infinite; } @keyframes star-far { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(4%, -2.5%, 0); } } @keyframes star-near { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-7%, 4%, 0); } } } /* ---------- structure ---------- */ .wrap { max-width: var(--w); margin-inline: auto; padding-inline: var(--pad); } section { padding-block: clamp(3.5rem, 9vw, 7rem); } .skip { position: absolute; left: -999px; top: 0; z-index: 50; background: #fff; color: #0b0714; padding: .8em 1.2em; border-radius: 0 0 12px 0; font-weight: 700; text-decoration: none; } .skip:focus { left: 0; } header.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .75rem; } /* A logo is a link, so it carries the same 44px minimum as any other tap target. The gradient text-clip lives on the inner span rather than the lockup, because clipping a flex parent to its own glyphs is unreliable once that parent also contains an image. */ .wordmark { text-decoration: none; display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; } .wordmark .wm-text { font-weight: 800; font-size: 1.18rem; letter-spacing: -.02em; background: var(--grad-ink); -webkit-background-clip: text; background-clip: text; color: transparent; } .wordmark .mark { width: 34px; height: 34px; flex: none; display: block; border-radius: 30%; filter: drop-shadow(0 2px 10px rgba(139, 92, 246, .45)); transition: transform .25s ease; } .wordmark:hover .mark { transform: translateY(-1px) scale(1.04); } /* The big mark: the last thing seen before the closing call to action. Explicit width/height and lazy loading keep it out of the LCP path and out of any layout shift. */ .closing-mark { text-align: center; } .closing-mark .lede { margin-inline: auto; } .closing-mark .cta-row { justify-content: center; } .big-mark { width: clamp(150px, 34vw, 220px); height: auto; display: block; margin: 0 auto 1.8rem; border-radius: 26%; filter: drop-shadow(0 24px 60px rgba(139, 92, 246, .40)) drop-shadow(0 6px 26px rgba(240, 180, 41, .22)); } @media (prefers-reduced-motion: no-preference) { .big-mark { animation: bubble-drift 19s ease-in-out -7s infinite alternate; } } nav.site { display: flex; align-items: center; gap: clamp(.15rem, 1.5vw, 1rem); } nav.site a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .5em .8em; border-radius: 999px; transition: color .2s ease, background .2s ease; display: inline-flex; align-items: center; min-height: 44px; } /* Phones: the header becomes two honest rows rather than one cramped one. The nav spreads across the full width so every target is wide as well as tall, which is what actually prevents mis-taps. */ @media (max-width: 560px) { header.top { flex-direction: column; align-items: stretch; gap: .25rem; padding-block: .6rem .4rem; } .wordmark { justify-content: flex-start; font-size: 1.24rem; } nav.site { justify-content: space-between; gap: .25rem; } nav.site a { padding: .5em .7em; } nav.site a.play { padding: .5em 1.15em; } } nav.site a:hover { color: #fff; background: rgba(255, 255, 255, .06); } nav.site a[aria-current="page"] { color: #fff; } nav.site a.play { color: #0b0714; background: #fff; font-weight: 700; padding: .5em 1.1em; transition: transform .2s ease, box-shadow .2s ease; } nav.site a.play:hover { transform: translateY(-1px); box-shadow: 0 6px 24px -6px rgba(139, 92, 246, .55), 0 2px 12px -2px rgba(240, 180, 41, .35); } /* ---------- typography ---------- */ h1 { font-size: clamp(2.7rem, 8.2vw, 6.3rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; text-wrap: balance; } h1 .forever { background: var(--grad-ink); -webkit-background-clip: text; background-clip: text; color: transparent; } h2 { font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.08; letter-spacing: -.028em; font-weight: 800; text-wrap: balance; } h3 { font-size: 1.22rem; letter-spacing: -.015em; font-weight: 700; } .eyebrow { display: block; font-size: clamp(.82rem, 1.6vw, .95rem); font-weight: 700; letter-spacing: .34em; text-transform: uppercase; color: var(--violet-text); margin-bottom: 1.3rem; } .lede { font-size: clamp(1.08rem, 2vw, 1.3rem); color: var(--ink-2); max-width: 46em; } .dim { color: var(--ink-3); } p a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; } p a:hover { color: #fff; } /* ---------- hero ---------- */ .hero { padding-block: clamp(3rem, 8vw, 6.5rem) clamp(3rem, 7vw, 5rem); position: relative; } .hero .lede { margin-top: 1.6rem; } .cta-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; align-items: center; } .btn { display: inline-flex; align-items: center; gap: .5em; text-decoration: none; border-radius: 999px; padding: .95em 1.7em; font-weight: 700; font-size: 1.02rem; transition: transform .2s ease, box-shadow .25s ease, background .2s ease; min-height: 44px; } .btn-primary { background: #fff; color: #0b0714; } .btn-primary:hover, .btn-primary:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 38px -8px rgba(139, 92, 246, .65), 0 4px 18px -4px rgba(240, 180, 41, .45); } .btn-ghost { color: #fff; background: var(--glass); border: 1px solid var(--glass-edge); } .btn-ghost:hover { background: rgba(255, 255, 255, .08); } a:focus-visible, button:focus-visible { outline: 2px solid var(--violet-text); outline-offset: 3px; border-radius: 999px; } /* the membrane, the icon material, drawn in CSS (0 bytes of raster). Organic idle: three layers with incommensurate periods (19s drift, 13s membrane morph, 29s ambient light) plus negative delays, so the phases never resync and the shape is effectively never the same twice. Drift and light are transform-only (compositor); the morph repaints one element, slowly. Everything sits behind prefers-reduced-motion. */ .bubble { position: absolute; right: calc(-1 * var(--pad) + 1rem); top: -1rem; z-index: -1; width: clamp(15rem, 34vw, 26rem); aspect-ratio: 1; } .bubble::before { content: ""; position: absolute; inset: 0; border-radius: 51% 49% 53% 47% / 48% 53% 47% 52%; border: 1.5px solid transparent; background: linear-gradient(180deg, rgba(13, 12, 26, .92), rgba(8, 7, 18, .96)) padding-box, var(--rim) border-box; box-shadow: 0 0 110px -28px rgba(139, 92, 246, .55), 0 46px 130px -40px rgba(240, 180, 41, .30), inset 0 18px 60px -20px rgba(167, 139, 250, .38), inset 0 -24px 70px -26px rgba(240, 180, 41, .30); opacity: .92; } .bubble::after { /* ambient light behind the glass: pre-blurred gradient, no filter */ content: ""; position: absolute; inset: 10%; z-index: -1; border-radius: 50%; background: radial-gradient(circle at 38% 30%, rgba(167, 139, 250, .28), rgba(240, 180, 41, .10) 55%, transparent 72%); } @media (max-width: 900px) { .bubble { position: static; width: min(56vw, 15rem); margin: 2.4rem auto 0; display: block; } .hero { text-align: left; } } @media (prefers-reduced-motion: no-preference) { /* Namespaced: a bare `drift` collides with the word-chip marquee's @keyframes drift further down this file, and the later definition would silently win for both. Keep every bubble keyframe prefixed. */ .bubble { animation: bubble-drift 19s ease-in-out -7s infinite alternate; will-change: transform; } .bubble::before { animation: bubble-morph 13s ease-in-out -5s infinite alternate; } .bubble::after { animation: bubble-sway 29s ease-in-out -11s infinite alternate; will-change: transform; } @keyframes bubble-drift { from { transform: translate3d(0, 0, 0) rotate(-1.4deg) scale(1); } to { transform: translate3d(5px, -16px, 0) rotate(1.6deg) scale(1.018); } } @keyframes bubble-morph { 0% { border-radius: 51% 49% 53% 47% / 48% 53% 47% 52%; } 26% { border-radius: 47% 53% 49% 51% / 53% 46% 54% 47%; } 52% { border-radius: 53% 47% 46% 54% / 49% 51% 48% 52%; } 77% { border-radius: 48% 52% 52% 48% / 46% 54% 50% 50%; } 100% { border-radius: 52% 48% 47% 53% / 52% 47% 53% 48%; } } @keyframes bubble-sway { from { transform: translate3d(-12px, 7px, 0) scale(.96); } to { transform: translate3d(15px, -11px, 0) scale(1.06); } } } /* ---------- chips + the fusion demo ---------- */ .chip { display: inline-flex; align-items: center; gap: .55em; background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 999px; padding: .6em 1.15em; font-weight: 650; font-size: 1.02rem; white-space: nowrap; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .chip .e { font-size: 1.15em; line-height: 1; } .fuse { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; margin-top: 2.6rem; font-weight: 700; } .fuse .op { color: var(--ink-3); font-size: 1.3rem; } .chip.result { border: 1.5px solid transparent; background: linear-gradient(180deg, rgba(20, 17, 34, .9), rgba(13, 11, 24, .94)) padding-box, var(--rim) border-box; box-shadow: 0 0 34px -8px rgba(139, 92, 246, .5), 0 0 26px -10px rgba(240, 180, 41, .4); } /* (the result chip's motion now lives in the fusion loop further down, so it is not fighting a second animation for the same transform) */ .fuse-note { margin-top: .9rem; font-size: .9rem; color: var(--ink-3); } /* the drifting "still out there" strip: CSS marquee, masked edges */ .drift { overflow: hidden; margin-top: 1.4rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } .drift ul { display: flex; padding: .35rem 0; list-style: none; width: max-content; } /* margins, not gap: the loop translates exactly -50%, so the two halves must measure identically including trailing space */ .drift li { margin-right: .8rem; } @media (prefers-reduced-motion: no-preference) { .drift ul { animation: marquee-drift 58s linear infinite; will-change: transform; } .drift:hover ul { animation-play-state: paused; } @keyframes marquee-drift { to { transform: translate3d(-50%, 0, 0); } } } @media (prefers-reduced-motion: reduce) { .drift ul { flex-wrap: wrap; width: auto; } .drift [aria-hidden="true"] { display: none; } } /* ---------- glass cards ---------- */ .card { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 2.6rem); backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); } .card.keyline { border-top: 1.5px solid transparent; position: relative; overflow: hidden; } .card.keyline::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1.5px; background: var(--rim); } .grid-3 { display: grid; gap: 1.1rem; grid-template-columns: repeat(3, 1fr); margin-top: 2.4rem; } .grid-2 { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, 1fr); margin-top: 2.4rem; } @media (max-width: 820px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } } .step-n { font-size: .85rem; font-weight: 800; letter-spacing: .22em; color: var(--violet-text); display: block; margin-bottom: .9rem; } .card h3 + p, .step-n + h3 + p { margin-top: .6rem; color: var(--ink-2); } /* ---------- the founding season numbers: typography, not widgets ---------- */ .numbers { display: flex; flex-wrap: wrap; gap: clamp(1.6rem, 6vw, 4.5rem); margin-top: 2.6rem; font-variant-numeric: tabular-nums; } .numbers .n { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; } .numbers .n.grad { background: var(--grad-ink); -webkit-background-clip: text; background-clip: text; color: transparent; } .numbers .l { display: block; margin-top: .55rem; font-size: .95rem; color: var(--ink-3); font-weight: 600; } /* ---------- the crest (first discovery) ---------- */ .crest { text-align: center; padding: clamp(2.4rem, 6vw, 4rem) clamp(1.4rem, 5vw, 3rem); max-width: 44rem; margin-inline: auto; } .crest .word { font-size: clamp(2.2rem, 5.5vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; } .crest .who { margin-top: 1rem; color: var(--ink-2); font-size: 1.05rem; } .crest .who b { background: var(--grad-ink); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- FAQ ---------- */ .faq-list { margin-top: 2.2rem; display: grid; gap: .9rem; } details { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 18px; padding: 1.1rem 1.4rem; } details[open] { background: rgba(255, 255, 255, .055); } summary { cursor: pointer; font-weight: 700; font-size: 1.08rem; letter-spacing: -.01em; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; } summary::-webkit-details-marker { display: none; } summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--violet-text); transition: transform .25s ease; flex: none; } details[open] summary::after { transform: rotate(45deg); } details p { margin-top: .8rem; color: var(--ink-2); max-width: 60em; } details p + p { margin-top: .6rem; } /* ---------- prose pages (how-it-works) ---------- */ .prose { max-width: 46em; } .prose h2 { margin-top: clamp(2.6rem, 6vw, 4rem); } .prose h2:first-of-type { margin-top: 0; } .prose p { margin-top: 1rem; color: var(--ink-2); } .prose p strong { color: #fff; } /* ---------- footer ---------- */ footer.site { border-top: 1px solid rgba(255, 255, 255, .08); margin-top: clamp(2rem, 6vw, 4rem); padding-block: 2.6rem 3.4rem; font-size: .95rem; color: var(--ink-3); } footer.site .cols { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between; } footer.site a { color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding-inline: .1rem; } footer.site a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } footer.site nav { display: flex; flex-wrap: wrap; gap: 0 1.6rem; } .provisional { margin-top: 1.4rem; font-size: .9rem; color: rgba(255, 255, 255, .56); } @media (max-width: 560px) { /* Two comfortable columns instead of a ragged wrap, so no footer link ends up a 28px sliver on its own line. */ footer.site nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } } /* ---------- press kit ---------- */ .facts { margin-top: 2.2rem; border-top: 1px solid rgba(255, 255, 255, .08); } .facts > div { display: grid; grid-template-columns: minmax(9rem, 16rem) 1fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid rgba(255, 255, 255, .08); } .facts dt { color: var(--ink-3); font-weight: 600; font-size: .95rem; } .facts dd { color: var(--ink-2); } .facts dd b { color: #fff; } @media (max-width: 640px) { .facts > div { grid-template-columns: 1fr; gap: .15rem; } /* Stacked, the label needs to read as a label rather than as a first line of the value. */ .facts dt { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--violet-text); } } @media (max-width: 560px) { .asset-row { gap: .8rem; } .asset { width: 100%; } /* The crest word is the largest single string on the page; let it shrink rather than push the card wider than the screen. */ .crest .word { font-size: clamp(1.8rem, 9vw, 3.6rem); } .numbers { gap: 1.6rem 2.2rem; } .toc a { font-size: .84rem; padding: .5em .85em; } } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .tag { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--violet-text); border: 1px solid rgba(139, 92, 246, .35); border-radius: 999px; padding: .3em .9em; margin-bottom: 1rem; } .asset-row { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 1.6rem; } .asset { display: flex; align-items: center; gap: 1rem; } .asset img { width: 84px; height: 84px; border-radius: 22%; display: block; } .asset img.wide { width: 152px; height: 80px; border-radius: 14px; object-fit: cover; } .asset .meta { font-size: .92rem; color: var(--ink-3); } .asset .meta a { color: var(--gold-soft); display: inline-flex; align-items: center; min-height: 44px; } /* ---------- glossary ---------- */ .glossary { margin-top: 2.4rem; } .glossary section.term { padding: 1.6rem 0; border-top: 1px solid rgba(255, 255, 255, .08); scroll-margin-top: 5rem; } .glossary h2 { font-size: 1.45rem; letter-spacing: -.015em; } .glossary p { margin-top: .7rem; color: var(--ink-2); max-width: 56em; } /* Heading self-links are real tap targets (they set the URL hash people share), so they carry the same 44px minimum as any other link. */ .glossary a.anchor { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } .glossary a.anchor:hover::after { content: " #"; color: var(--violet-text); } /* ---------- byline ---------- */ .byline { margin-top: 1.4rem; color: var(--ink-3); font-size: 1.02rem; } .byline .author { color: #fff; font-weight: 700; background: var(--grad-ink); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- leaders + feed ---------- */ .lb, .feed { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .55rem; } .lb-row, .feed-row { display: grid; align-items: center; gap: .7rem; padding: .55rem .2rem; min-height: 44px; border-bottom: 1px solid rgba(255, 255, 255, .055); font-variant-numeric: tabular-nums; } /* The handle column is sized so a full "Crafter 4B7C" fits without an ellipsis: a truncated name on a leaderboard is worse than a shorter bar. */ .lb-row { grid-template-columns: 1.4rem minmax(7.2rem, auto) minmax(3rem, 1fr) auto; } .feed-row { grid-template-columns: 1.4rem minmax(5rem, 1fr) auto auto; } .lb-row:last-child, .feed-row:last-child { border-bottom: 0; } .lb-rank { color: var(--violet-text); font-weight: 800; font-size: .9rem; } .lb-who, .feed-who { color: var(--ink-2); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-num { color: #fff; font-weight: 800; } /* The bar is the only thing that says "more" at a glance, so it is width driven by real counts rather than a decorative flourish. */ .lb-track { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; } .lb-fill { display: block; height: 100%; border-radius: 999px; background: var(--rim); } .feed-emoji { font-size: 1.15rem; line-height: 1; } .feed-word { color: #fff; font-weight: 700; } .feed-who { font-size: .92rem; } .feed-when { color: var(--ink-3); font-size: .85rem; white-space: nowrap; } .live-note { margin-top: 1.1rem; font-size: .92rem; } /* Waiting state: structure with a shimmer, never invented names or numbers. The shimmer is a moving background-position on a narrow element, which is cheap, and it stops entirely under reduced motion. */ .is-waiting { border-bottom-color: rgba(255, 255, 255, .04); } .sk { display: block; height: 12px; border-radius: 999px; width: 100%; background: linear-gradient(90deg, rgba(255,255,255,.05) 8%, rgba(255,255,255,.12) 30%, rgba(255,255,255,.05) 55%); background-size: 240% 100%; } .sk-0 { max-width: 78%; } .sk-1 { max-width: 62%; } .sk-2 { max-width: 88%; } .is-waiting { grid-template-columns: 1fr; } @media (prefers-reduced-motion: no-preference) { .sk { animation: sk-sweep 2.4s ease-in-out infinite; } .sk-1 { animation-delay: -.5s; } .sk-2 { animation-delay: -1s; } @keyframes sk-sweep { from { background-position: 120% 0; } to { background-position: -40% 0; } } } /* ---------- the fusion demo, animated ---------- */ /* The core verb of the game, looping: the two ingredients lean together, the result swells as they meet, then everything resets. Transform and opacity only, so it composites; the chips remain readable text at every frame. */ @media (prefers-reduced-motion: no-preference) { .fuse-anim .chip { will-change: transform; } .fuse-anim .f-a { animation: lean-right 7s ease-in-out infinite; } .fuse-anim .f-b { animation: lean-left 7s ease-in-out infinite; } .fuse-anim .f-out { animation: bloom 7s ease-in-out infinite; } @keyframes lean-right { 0%, 55%, 100% { transform: translateX(0); } 72% { transform: translateX(10px); } } @keyframes lean-left { 0%, 55%, 100% { transform: translateX(0); } 72% { transform: translateX(-10px); } } @keyframes bloom { 0%, 60%, 100% { transform: scale(1); box-shadow: 0 0 34px -8px rgba(139, 92, 246, .5), 0 0 26px -10px rgba(240, 180, 41, .4); } 76% { transform: scale(1.075); box-shadow: 0 0 52px -6px rgba(139, 92, 246, .8), 0 0 40px -6px rgba(240, 180, 41, .7); } } } /* ---------- terms ---------- */ .toc ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .5rem; } .toc a { display: inline-flex; align-items: center; min-height: 44px; font-size: .88rem; font-weight: 600; color: var(--ink-2); text-decoration: none; background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 999px; padding: .45em 1em; } .toc a:hover { color: #fff; background: rgba(255, 255, 255, .07); } .legal p.plain { background: rgba(139, 92, 246, .07); border: 1px solid rgba(139, 92, 246, .22); border-radius: 14px; padding: .85rem 1.1rem; margin-top: .9rem; color: var(--ink-2); font-size: .97rem; } .legal p.plain span { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--violet-text); margin-bottom: .3rem; } .legal p.plain em { color: var(--ink-3); font-style: normal; font-size: .85rem; } .legal section.term ul { margin-top: .7rem; padding-left: 1.2rem; color: var(--ink-2); } .legal section.term li { margin-bottom: .5rem; } .legal section.term li a, .legal section.term p a { color: var(--gold-soft); } /* ---------- scroll reveals: progressive enhancement only ---------- */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .reveal { animation: rise both; animation-timeline: view(); animation-range: entry 0% entry 46%; } @keyframes rise { from { opacity: .001; transform: translateY(26px); } to { opacity: 1; transform: none; } } } } .stars.far { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%201000%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cg%20fill%3D%22%23fff%22%3E%3Ccircle%20cx%3D%22998%22%20cy%3D%22340%22%20r%3D%220.46%22%20opacity%3D%220.33%22%2F%3E%3Ccircle%20cx%3D%22394%22%20cy%3D%22810%22%20r%3D%220.51%22%20opacity%3D%220.43%22%2F%3E%3Ccircle%20cx%3D%221071%22%20cy%3D%22623%22%20r%3D%220.56%22%20opacity%3D%220.41%22%2F%3E%3Ccircle%20cx%3D%22188%22%20cy%3D%2284%22%20r%3D%220.65%22%20opacity%3D%220.51%22%2F%3E%3Ccircle%20cx%3D%22935%22%20cy%3D%22577%22%20r%3D%220.42%22%20opacity%3D%220.38%22%2F%3E%3Ccircle%20cx%3D%22393%22%20cy%3D%22511%22%20r%3D%220.64%22%20opacity%3D%220.30%22%2F%3E%3Ccircle%20cx%3D%221112%22%20cy%3D%22944%22%20r%3D%220.30%22%20opacity%3D%220.52%22%2F%3E%3Ccircle%20cx%3D%22224%22%20cy%3D%22152%22%20r%3D%220.43%22%20opacity%3D%220.37%22%2F%3E%3Ccircle%20cx%3D%22796%22%20cy%3D%2264%22%20r%3D%220.44%22%20opacity%3D%220.52%22%2F%3E%3Ccircle%20cx%3D%221446%22%20cy%3D%22872%22%20r%3D%220.59%22%20opacity%3D%220.54%22%2F%3E%3Ccircle%20cx%3D%22606%22%20cy%3D%22314%22%20r%3D%220.31%22%20opacity%3D%220.52%22%2F%3E%3Ccircle%20cx%3D%22690%22%20cy%3D%22251%22%20r%3D%220.68%22%20opacity%3D%220.54%22%2F%3E%3Ccircle%20cx%3D%22719%22%20cy%3D%22335%22%20r%3D%220.33%22%20opacity%3D%220.51%22%2F%3E%3Ccircle%20cx%3D%22728%22%20cy%3D%22348%22%20r%3D%220.50%22%20opacity%3D%220.41%22%2F%3E%3Ccircle%20cx%3D%22869%22%20cy%3D%22415%22%20r%3D%220.34%22%20opacity%3D%220.36%22%2F%3E%3Ccircle%20cx%3D%221222%22%20cy%3D%22708%22%20r%3D%220.61%22%20opacity%3D%220.23%22%2F%3E%3Ccircle%20cx%3D%22524%22%20cy%3D%22996%22%20r%3D%220.54%22%20opacity%3D%220.54%22%2F%3E%3Ccircle%20cx%3D%221183%22%20cy%3D%22161%22%20r%3D%220.51%22%20opacity%3D%220.38%22%2F%3E%3Ccircle%20cx%3D%221502%22%20cy%3D%22615%22%20r%3D%220.55%22%20opacity%3D%220.21%22%2F%3E%3Ccircle%20cx%3D%221269%22%20cy%3D%22307%22%20r%3D%220.40%22%20opacity%3D%220.33%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%22787%22%20r%3D%220.53%22%20opacity%3D%220.29%22%2F%3E%3Ccircle%20cx%3D%221014%22%20cy%3D%22243%22%20r%3D%220.40%22%20opacity%3D%220.26%22%2F%3E%3Ccircle%20cx%3D%2235%22%20cy%3D%22453%22%20r%3D%220.54%22%20opacity%3D%220.42%22%2F%3E%3Ccircle%20cx%3D%221192%22%20cy%3D%22241%22%20r%3D%220.56%22%20opacity%3D%220.39%22%2F%3E%3Ccircle%20cx%3D%22738%22%20cy%3D%22984%22%20r%3D%220.31%22%20opacity%3D%220.39%22%2F%3E%3Ccircle%20cx%3D%221175%22%20cy%3D%22517%22%20r%3D%220.52%22%20opacity%3D%220.36%22%2F%3E%3Ccircle%20cx%3D%221530%22%20cy%3D%22406%22%20r%3D%220.60%22%20opacity%3D%220.39%22%2F%3E%3Ccircle%20cx%3D%221537%22%20cy%3D%2257%22%20r%3D%220.53%22%20opacity%3D%220.23%22%2F%3E%3Ccircle%20cx%3D%22708%22%20cy%3D%22239%22%20r%3D%220.34%22%20opacity%3D%220.25%22%2F%3E%3Ccircle%20cx%3D%221144%22%20cy%3D%22637%22%20r%3D%220.63%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%22755%22%20cy%3D%22652%22%20r%3D%220.51%22%20opacity%3D%220.41%22%2F%3E%3Ccircle%20cx%3D%22686%22%20cy%3D%22846%22%20r%3D%220.54%22%20opacity%3D%220.22%22%2F%3E%3Ccircle%20cx%3D%221272%22%20cy%3D%2292%22%20r%3D%220.54%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22845%22%20cy%3D%2275%22%20r%3D%220.39%22%20opacity%3D%220.44%22%2F%3E%3Ccircle%20cx%3D%221576%22%20cy%3D%22160%22%20r%3D%220.40%22%20opacity%3D%220.23%22%2F%3E%3Ccircle%20cx%3D%221068%22%20cy%3D%22530%22%20r%3D%220.56%22%20opacity%3D%220.36%22%2F%3E%3Ccircle%20cx%3D%221177%22%20cy%3D%22540%22%20r%3D%220.68%22%20opacity%3D%220.24%22%2F%3E%3Ccircle%20cx%3D%221051%22%20cy%3D%22353%22%20r%3D%220.57%22%20opacity%3D%220.51%22%2F%3E%3Ccircle%20cx%3D%2231%22%20cy%3D%22513%22%20r%3D%220.35%22%20opacity%3D%220.34%22%2F%3E%3Ccircle%20cx%3D%22209%22%20cy%3D%22191%22%20r%3D%220.50%22%20opacity%3D%220.42%22%2F%3E%3Ccircle%20cx%3D%221170%22%20cy%3D%22247%22%20r%3D%220.59%22%20opacity%3D%220.30%22%2F%3E%3Ccircle%20cx%3D%221028%22%20cy%3D%22935%22%20r%3D%220.33%22%20opacity%3D%220.43%22%2F%3E%3Ccircle%20cx%3D%22185%22%20cy%3D%22881%22%20r%3D%220.37%22%20opacity%3D%220.35%22%2F%3E%3Ccircle%20cx%3D%22270%22%20cy%3D%22314%22%20r%3D%220.63%22%20opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%22583%22%20cy%3D%22117%22%20r%3D%220.54%22%20opacity%3D%220.37%22%2F%3E%3Ccircle%20cx%3D%22298%22%20cy%3D%22824%22%20r%3D%220.57%22%20opacity%3D%220.40%22%2F%3E%3Ccircle%20cx%3D%22605%22%20cy%3D%22877%22%20r%3D%220.31%22%20opacity%3D%220.31%22%2F%3E%3Ccircle%20cx%3D%22436%22%20cy%3D%22653%22%20r%3D%220.30%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%221498%22%20cy%3D%22109%22%20r%3D%220.43%22%20opacity%3D%220.30%22%2F%3E%3Ccircle%20cx%3D%221148%22%20cy%3D%22765%22%20r%3D%220.45%22%20opacity%3D%220.38%22%2F%3E%3Ccircle%20cx%3D%221094%22%20cy%3D%22767%22%20r%3D%220.67%22%20opacity%3D%220.37%22%2F%3E%3Ccircle%20cx%3D%22179%22%20cy%3D%22391%22%20r%3D%220.69%22%20opacity%3D%220.39%22%2F%3E%3Ccircle%20cx%3D%22137%22%20cy%3D%22830%22%20r%3D%220.43%22%20opacity%3D%220.22%22%2F%3E%3Ccircle%20cx%3D%22498%22%20cy%3D%22239%22%20r%3D%220.60%22%20opacity%3D%220.26%22%2F%3E%3Ccircle%20cx%3D%221408%22%20cy%3D%22860%22%20r%3D%220.44%22%20opacity%3D%220.24%22%2F%3E%3Ccircle%20cx%3D%22640%22%20cy%3D%22890%22%20r%3D%220.65%22%20opacity%3D%220.30%22%2F%3E%3Ccircle%20cx%3D%221462%22%20cy%3D%22460%22%20r%3D%220.62%22%20opacity%3D%220.41%22%2F%3E%3Ccircle%20cx%3D%221240%22%20cy%3D%22623%22%20r%3D%220.35%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22692%22%20cy%3D%22717%22%20r%3D%220.70%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%22503%22%20cy%3D%22312%22%20r%3D%220.62%22%20opacity%3D%220.54%22%2F%3E%3Ccircle%20cx%3D%221431%22%20cy%3D%22865%22%20r%3D%220.49%22%20opacity%3D%220.25%22%2F%3E%3Ccircle%20cx%3D%22479%22%20cy%3D%22751%22%20r%3D%220.58%22%20opacity%3D%220.40%22%2F%3E%3Ccircle%20cx%3D%22400%22%20cy%3D%221%22%20r%3D%220.47%22%20opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%221549%22%20cy%3D%22775%22%20r%3D%220.43%22%20opacity%3D%220.22%22%2F%3E%3Ccircle%20cx%3D%221449%22%20cy%3D%22570%22%20r%3D%220.63%22%20opacity%3D%220.22%22%2F%3E%3Ccircle%20cx%3D%22696%22%20cy%3D%22275%22%20r%3D%220.44%22%20opacity%3D%220.30%22%2F%3E%3Ccircle%20cx%3D%22534%22%20cy%3D%22425%22%20r%3D%220.44%22%20opacity%3D%220.21%22%2F%3E%3Ccircle%20cx%3D%221317%22%20cy%3D%2288%22%20r%3D%220.67%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%22275%22%20cy%3D%22200%22%20r%3D%220.59%22%20opacity%3D%220.52%22%2F%3E%3Ccircle%20cx%3D%221133%22%20cy%3D%22364%22%20r%3D%220.64%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%22283%22%20cy%3D%22268%22%20r%3D%220.34%22%20opacity%3D%220.30%22%2F%3E%3Ccircle%20cx%3D%22550%22%20cy%3D%22174%22%20r%3D%220.65%22%20opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%221108%22%20cy%3D%22360%22%20r%3D%220.42%22%20opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%221071%22%20cy%3D%22201%22%20r%3D%220.59%22%20opacity%3D%220.43%22%2F%3E%3Ccircle%20cx%3D%22771%22%20cy%3D%22801%22%20r%3D%220.59%22%20opacity%3D%220.27%22%2F%3E%3Ccircle%20cx%3D%22776%22%20cy%3D%22630%22%20r%3D%220.45%22%20opacity%3D%220.35%22%2F%3E%3Ccircle%20cx%3D%22728%22%20cy%3D%22744%22%20r%3D%220.60%22%20opacity%3D%220.33%22%2F%3E%3Ccircle%20cx%3D%22656%22%20cy%3D%22586%22%20r%3D%220.33%22%20opacity%3D%220.28%22%2F%3E%3Ccircle%20cx%3D%221088%22%20cy%3D%22678%22%20r%3D%220.60%22%20opacity%3D%220.48%22%2F%3E%3Ccircle%20cx%3D%22588%22%20cy%3D%22322%22%20r%3D%220.42%22%20opacity%3D%220.38%22%2F%3E%3Ccircle%20cx%3D%221032%22%20cy%3D%22454%22%20r%3D%220.33%22%20opacity%3D%220.38%22%2F%3E%3Ccircle%20cx%3D%22302%22%20cy%3D%22317%22%20r%3D%220.48%22%20opacity%3D%220.30%22%2F%3E%3Ccircle%20cx%3D%22207%22%20cy%3D%22316%22%20r%3D%220.66%22%20opacity%3D%220.35%22%2F%3E%3Ccircle%20cx%3D%221053%22%20cy%3D%22568%22%20r%3D%220.33%22%20opacity%3D%220.41%22%2F%3E%3Ccircle%20cx%3D%22296%22%20cy%3D%22361%22%20r%3D%220.44%22%20opacity%3D%220.54%22%2F%3E%3Ccircle%20cx%3D%221403%22%20cy%3D%22314%22%20r%3D%220.54%22%20opacity%3D%220.24%22%2F%3E%3Ccircle%20cx%3D%221499%22%20cy%3D%22159%22%20r%3D%220.48%22%20opacity%3D%220.50%22%2F%3E%3Ccircle%20cx%3D%221283%22%20cy%3D%22973%22%20r%3D%220.47%22%20opacity%3D%220.20%22%2F%3E%3Ccircle%20cx%3D%22682%22%20cy%3D%22801%22%20r%3D%220.47%22%20opacity%3D%220.51%22%2F%3E%3Ccircle%20cx%3D%22528%22%20cy%3D%22552%22%20r%3D%220.67%22%20opacity%3D%220.44%22%2F%3E%3Ccircle%20cx%3D%22996%22%20cy%3D%22817%22%20r%3D%220.41%22%20opacity%3D%220.33%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22387%22%20r%3D%220.39%22%20opacity%3D%220.21%22%2F%3E%3Ccircle%20cx%3D%22109%22%20cy%3D%22838%22%20r%3D%220.54%22%20opacity%3D%220.22%22%2F%3E%3Ccircle%20cx%3D%221139%22%20cy%3D%22218%22%20r%3D%220.63%22%20opacity%3D%220.30%22%2F%3E%3Ccircle%20cx%3D%221482%22%20cy%3D%22859%22%20r%3D%220.36%22%20opacity%3D%220.24%22%2F%3E%3Ccircle%20cx%3D%221130%22%20cy%3D%22157%22%20r%3D%220.41%22%20opacity%3D%220.49%22%2F%3E%3Ccircle%20cx%3D%221363%22%20cy%3D%22547%22%20r%3D%220.33%22%20opacity%3D%220.49%22%2F%3E%3Ccircle%20cx%3D%22231%22%20cy%3D%22216%22%20r%3D%220.34%22%20opacity%3D%220.25%22%2F%3E%3Ccircle%20cx%3D%221200%22%20cy%3D%22698%22%20r%3D%220.38%22%20opacity%3D%220.51%22%2F%3E%3Ccircle%20cx%3D%22977%22%20cy%3D%2272%22%20r%3D%220.59%22%20opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%22487%22%20r%3D%220.66%22%20opacity%3D%220.50%22%2F%3E%3Ccircle%20cx%3D%22540%22%20cy%3D%22111%22%20r%3D%220.61%22%20opacity%3D%220.22%22%2F%3E%3Ccircle%20cx%3D%22744%22%20cy%3D%22598%22%20r%3D%220.51%22%20opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%221487%22%20cy%3D%22975%22%20r%3D%220.43%22%20opacity%3D%220.51%22%2F%3E%3Ccircle%20cx%3D%221376%22%20cy%3D%22666%22%20r%3D%220.49%22%20opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%221563%22%20cy%3D%22287%22%20r%3D%220.49%22%20opacity%3D%220.24%22%2F%3E%3Ccircle%20cx%3D%221154%22%20cy%3D%22681%22%20r%3D%220.66%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%22671%22%20cy%3D%2290%22%20r%3D%220.49%22%20opacity%3D%220.39%22%2F%3E%3Ccircle%20cx%3D%22896%22%20cy%3D%22945%22%20r%3D%220.50%22%20opacity%3D%220.54%22%2F%3E%3Ccircle%20cx%3D%221531%22%20cy%3D%22865%22%20r%3D%220.63%22%20opacity%3D%220.52%22%2F%3E%3Ccircle%20cx%3D%221197%22%20cy%3D%2215%22%20r%3D%220.31%22%20opacity%3D%220.54%22%2F%3E%3Ccircle%20cx%3D%22258%22%20cy%3D%22844%22%20r%3D%220.61%22%20opacity%3D%220.42%22%2F%3E%3Ccircle%20cx%3D%22217%22%20cy%3D%22530%22%20r%3D%220.46%22%20opacity%3D%220.24%22%2F%3E%3Ccircle%20cx%3D%221145%22%20cy%3D%22140%22%20r%3D%220.44%22%20opacity%3D%220.40%22%2F%3E%3Ccircle%20cx%3D%22401%22%20cy%3D%22740%22%20r%3D%220.68%22%20opacity%3D%220.24%22%2F%3E%3Ccircle%20cx%3D%221169%22%20cy%3D%22169%22%20r%3D%220.41%22%20opacity%3D%220.26%22%2F%3E%3Ccircle%20cx%3D%221427%22%20cy%3D%22181%22%20r%3D%220.50%22%20opacity%3D%220.38%22%2F%3E%3Ccircle%20cx%3D%221275%22%20cy%3D%22533%22%20r%3D%220.37%22%20opacity%3D%220.38%22%2F%3E%3Ccircle%20cx%3D%22675%22%20cy%3D%22263%22%20r%3D%220.58%22%20opacity%3D%220.28%22%2F%3E%3Ccircle%20cx%3D%22871%22%20cy%3D%22737%22%20r%3D%220.67%22%20opacity%3D%220.36%22%2F%3E%3Ccircle%20cx%3D%22718%22%20cy%3D%22173%22%20r%3D%220.33%22%20opacity%3D%220.37%22%2F%3E%3Ccircle%20cx%3D%221328%22%20cy%3D%2297%22%20r%3D%220.69%22%20opacity%3D%220.48%22%2F%3E%3Ccircle%20cx%3D%22349%22%20cy%3D%22456%22%20r%3D%220.36%22%20opacity%3D%220.27%22%2F%3E%3Ccircle%20cx%3D%221527%22%20cy%3D%22256%22%20r%3D%220.42%22%20opacity%3D%220.46%22%2F%3E%3Ccircle%20cx%3D%221394%22%20cy%3D%2226%22%20r%3D%220.46%22%20opacity%3D%220.22%22%2F%3E%3Ccircle%20cx%3D%221162%22%20cy%3D%2267%22%20r%3D%220.48%22%20opacity%3D%220.50%22%2F%3E%3Ccircle%20cx%3D%221321%22%20cy%3D%22634%22%20r%3D%220.32%22%20opacity%3D%220.46%22%2F%3E%3Ccircle%20cx%3D%22778%22%20cy%3D%22629%22%20r%3D%220.66%22%20opacity%3D%220.30%22%2F%3E%3Ccircle%20cx%3D%221008%22%20cy%3D%22286%22%20r%3D%220.57%22%20opacity%3D%220.41%22%2F%3E%3Ccircle%20cx%3D%22370%22%20cy%3D%22499%22%20r%3D%220.54%22%20opacity%3D%220.29%22%2F%3E%3Ccircle%20cx%3D%22719%22%20cy%3D%22566%22%20r%3D%220.66%22%20opacity%3D%220.41%22%2F%3E%3Ccircle%20cx%3D%221188%22%20cy%3D%22663%22%20r%3D%220.41%22%20opacity%3D%220.34%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%22421%22%20r%3D%220.49%22%20opacity%3D%220.33%22%2F%3E%3Ccircle%20cx%3D%22692%22%20cy%3D%22298%22%20r%3D%220.44%22%20opacity%3D%220.46%22%2F%3E%3Ccircle%20cx%3D%22326%22%20cy%3D%22958%22%20r%3D%220.62%22%20opacity%3D%220.39%22%2F%3E%3Ccircle%20cx%3D%22956%22%20cy%3D%22440%22%20r%3D%220.56%22%20opacity%3D%220.39%22%2F%3E%3Ccircle%20cx%3D%221497%22%20cy%3D%22428%22%20r%3D%220.33%22%20opacity%3D%220.38%22%2F%3E%3Ccircle%20cx%3D%22542%22%20cy%3D%22734%22%20r%3D%220.69%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22361%22%20cy%3D%22216%22%20r%3D%220.50%22%20opacity%3D%220.24%22%2F%3E%3Ccircle%20cx%3D%221348%22%20cy%3D%22114%22%20r%3D%220.48%22%20opacity%3D%220.37%22%2F%3E%3Ccircle%20cx%3D%22837%22%20cy%3D%22724%22%20r%3D%220.62%22%20opacity%3D%220.23%22%2F%3E%3Ccircle%20cx%3D%221379%22%20cy%3D%22417%22%20r%3D%220.68%22%20opacity%3D%220.36%22%2F%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%22107%22%20r%3D%220.68%22%20opacity%3D%220.52%22%2F%3E%3Ccircle%20cx%3D%22753%22%20cy%3D%22285%22%20r%3D%220.63%22%20opacity%3D%220.50%22%2F%3E%3Ccircle%20cx%3D%22977%22%20cy%3D%22197%22%20r%3D%220.33%22%20opacity%3D%220.25%22%2F%3E%3Ccircle%20cx%3D%22528%22%20cy%3D%22632%22%20r%3D%220.65%22%20opacity%3D%220.31%22%2F%3E%3Ccircle%20cx%3D%22217%22%20cy%3D%22373%22%20r%3D%220.42%22%20opacity%3D%220.54%22%2F%3E%3Ccircle%20cx%3D%221010%22%20cy%3D%22500%22%20r%3D%220.41%22%20opacity%3D%220.28%22%2F%3E%3Ccircle%20cx%3D%221350%22%20cy%3D%22429%22%20r%3D%220.47%22%20opacity%3D%220.52%22%2F%3E%3Ccircle%20cx%3D%22695%22%20cy%3D%22443%22%20r%3D%220.36%22%20opacity%3D%220.35%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); } .stars.near { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%201000%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cg%20fill%3D%22%23fff%22%3E%3Ccircle%20cx%3D%22635%22%20cy%3D%22410%22%20r%3D%220.79%22%20opacity%3D%220.27%22%2F%3E%3Ccircle%20cx%3D%221366%22%20cy%3D%22982%22%20r%3D%220.89%22%20opacity%3D%220.38%22%2F%3E%3Ccircle%20cx%3D%22205%22%20cy%3D%22578%22%20r%3D%220.79%22%20opacity%3D%220.20%22%2F%3E%3Ccircle%20cx%3D%22274%22%20cy%3D%2278%22%20r%3D%220.81%22%20opacity%3D%220.40%22%2F%3E%3Ccircle%20cx%3D%221039%22%20cy%3D%22608%22%20r%3D%220.46%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%221376%22%20cy%3D%2283%22%20r%3D%220.96%22%20opacity%3D%220.44%22%2F%3E%3Ccircle%20cx%3D%22753%22%20cy%3D%22319%22%20r%3D%220.76%22%20opacity%3D%220.58%22%2F%3E%3Ccircle%20cx%3D%22933%22%20cy%3D%22902%22%20r%3D%221.03%22%20opacity%3D%220.28%22%2F%3E%3Ccircle%20cx%3D%22752%22%20cy%3D%22376%22%20r%3D%220.48%22%20opacity%3D%220.59%22%2F%3E%3Ccircle%20cx%3D%221214%22%20cy%3D%22527%22%20r%3D%220.40%22%20opacity%3D%220.37%22%2F%3E%3Ccircle%20cx%3D%22251%22%20cy%3D%22223%22%20r%3D%221.09%22%20opacity%3D%220.29%22%2F%3E%3Ccircle%20cx%3D%221042%22%20cy%3D%22287%22%20r%3D%221.03%22%20opacity%3D%220.80%22%2F%3E%3Ccircle%20cx%3D%22332%22%20cy%3D%22815%22%20r%3D%220.78%22%20opacity%3D%220.25%22%2F%3E%3Ccircle%20cx%3D%22933%22%20cy%3D%22365%22%20r%3D%220.41%22%20opacity%3D%220.69%22%2F%3E%3Ccircle%20cx%3D%22898%22%20cy%3D%22531%22%20r%3D%220.52%22%20opacity%3D%220.67%22%2F%3E%3Ccircle%20cx%3D%22947%22%20cy%3D%22544%22%20r%3D%220.99%22%20opacity%3D%220.65%22%2F%3E%3Ccircle%20cx%3D%221309%22%20cy%3D%22811%22%20r%3D%220.82%22%20opacity%3D%220.34%22%2F%3E%3Ccircle%20cx%3D%22432%22%20cy%3D%22216%22%20r%3D%220.64%22%20opacity%3D%220.77%22%2F%3E%3Ccircle%20cx%3D%2242%22%20cy%3D%22644%22%20r%3D%220.59%22%20opacity%3D%220.58%22%2F%3E%3Ccircle%20cx%3D%22536%22%20cy%3D%22348%22%20r%3D%221.07%22%20opacity%3D%220.64%22%2F%3E%3Ccircle%20cx%3D%22248%22%20cy%3D%22306%22%20r%3D%220.70%22%20opacity%3D%220.68%22%2F%3E%3Ccircle%20cx%3D%2254%22%20cy%3D%22231%22%20r%3D%220.83%22%20opacity%3D%220.57%22%2F%3E%3Ccircle%20cx%3D%221327%22%20cy%3D%226%22%20r%3D%220.58%22%20opacity%3D%220.36%22%2F%3E%3Ccircle%20cx%3D%22593%22%20cy%3D%22830%22%20r%3D%220.48%22%20opacity%3D%220.72%22%2F%3E%3Ccircle%20cx%3D%22637%22%20cy%3D%22228%22%20r%3D%220.59%22%20opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%22717%22%20cy%3D%22981%22%20r%3D%221.00%22%20opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%22437%22%20cy%3D%22977%22%20r%3D%220.65%22%20opacity%3D%220.35%22%2F%3E%3Ccircle%20cx%3D%22567%22%20cy%3D%22637%22%20r%3D%220.66%22%20opacity%3D%220.37%22%2F%3E%3Ccircle%20cx%3D%22480%22%20cy%3D%22776%22%20r%3D%220.53%22%20opacity%3D%220.68%22%2F%3E%3Ccircle%20cx%3D%221124%22%20cy%3D%22506%22%20r%3D%220.87%22%20opacity%3D%220.25%22%2F%3E%3Ccircle%20cx%3D%221423%22%20cy%3D%22873%22%20r%3D%221.09%22%20opacity%3D%220.37%22%2F%3E%3Ccircle%20cx%3D%221423%22%20cy%3D%22704%22%20r%3D%220.84%22%20opacity%3D%220.28%22%2F%3E%3Ccircle%20cx%3D%22263%22%20cy%3D%22788%22%20r%3D%220.57%22%20opacity%3D%220.39%22%2F%3E%3Ccircle%20cx%3D%221294%22%20cy%3D%22657%22%20r%3D%220.66%22%20opacity%3D%220.71%22%2F%3E%3Ccircle%20cx%3D%22546%22%20cy%3D%22431%22%20r%3D%220.94%22%20opacity%3D%220.30%22%2F%3E%3Ccircle%20cx%3D%22789%22%20cy%3D%22157%22%20r%3D%220.68%22%20opacity%3D%220.21%22%2F%3E%3Ccircle%20cx%3D%221225%22%20cy%3D%22283%22%20r%3D%220.44%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22962%22%20cy%3D%22109%22%20r%3D%220.65%22%20opacity%3D%220.64%22%2F%3E%3Ccircle%20cx%3D%221475%22%20cy%3D%2220%22%20r%3D%220.93%22%20opacity%3D%220.30%22%2F%3E%3Ccircle%20cx%3D%22235%22%20cy%3D%22577%22%20r%3D%220.88%22%20opacity%3D%220.75%22%2F%3E%3Ccircle%20cx%3D%221429%22%20cy%3D%22535%22%20r%3D%221.02%22%20opacity%3D%220.48%22%2F%3E%3Ccircle%20cx%3D%221557%22%20cy%3D%22417%22%20r%3D%220.78%22%20opacity%3D%220.70%22%2F%3E%3Ccircle%20cx%3D%22132%22%20cy%3D%22943%22%20r%3D%220.38%22%20opacity%3D%220.69%22%2F%3E%3Ccircle%20cx%3D%221562%22%20cy%3D%22710%22%20r%3D%220.38%22%20opacity%3D%220.25%22%2F%3E%3Ccircle%20cx%3D%2268%22%20cy%3D%2284%22%20r%3D%220.84%22%20opacity%3D%220.68%22%2F%3E%3Ccircle%20cx%3D%22721%22%20cy%3D%22669%22%20r%3D%220.39%22%20opacity%3D%220.64%22%2F%3E%3Ccircle%20cx%3D%221219%22%20cy%3D%22383%22%20r%3D%220.61%22%20opacity%3D%220.78%22%2F%3E%3Ccircle%20cx%3D%221467%22%20cy%3D%22698%22%20r%3D%220.53%22%20opacity%3D%220.65%22%2F%3E%3Ccircle%20cx%3D%22683%22%20cy%3D%22858%22%20r%3D%220.99%22%20opacity%3D%220.24%22%2F%3E%3Ccircle%20cx%3D%2261%22%20cy%3D%2273%22%20r%3D%220.82%22%20opacity%3D%220.46%22%2F%3E%3Ccircle%20cx%3D%221436%22%20cy%3D%22586%22%20r%3D%220.96%22%20opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%22831%22%20cy%3D%2239%22%20r%3D%220.53%22%20opacity%3D%220.78%22%2F%3E%3Ccircle%20cx%3D%22799%22%20cy%3D%22932%22%20r%3D%220.88%22%20opacity%3D%220.70%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%22669%22%20r%3D%220.73%22%20opacity%3D%220.34%22%2F%3E%3Ccircle%20cx%3D%221125%22%20cy%3D%22473%22%20r%3D%220.99%22%20opacity%3D%220.58%22%2F%3E%3Ccircle%20cx%3D%22106%22%20cy%3D%22501%22%20r%3D%220.91%22%20opacity%3D%220.70%22%2F%3E%3Ccircle%20cx%3D%2242%22%20cy%3D%2277%22%20r%3D%220.89%22%20opacity%3D%220.75%22%2F%3E%3Ccircle%20cx%3D%221094%22%20cy%3D%22820%22%20r%3D%220.82%22%20opacity%3D%220.77%22%2F%3E%3Ccircle%20cx%3D%2245%22%20cy%3D%22966%22%20r%3D%221.09%22%20opacity%3D%220.75%22%2F%3E%3Ccircle%20cx%3D%22224%22%20cy%3D%22191%22%20r%3D%220.96%22%20opacity%3D%220.26%22%2F%3E%3Ccircle%20cx%3D%22463%22%20cy%3D%22432%22%20r%3D%221.05%22%20opacity%3D%220.70%22%2F%3E%3Ccircle%20cx%3D%221306%22%20cy%3D%22188%22%20r%3D%220.81%22%20opacity%3D%220.27%22%2F%3E%3Ccircle%20cx%3D%22873%22%20cy%3D%22599%22%20r%3D%220.51%22%20opacity%3D%220.57%22%2F%3E%3Ccircle%20cx%3D%22676%22%20cy%3D%2224%22%20r%3D%220.82%22%20opacity%3D%220.50%22%2F%3E%3Ccircle%20cx%3D%22795%22%20cy%3D%22134%22%20r%3D%220.74%22%20opacity%3D%220.22%22%2F%3E%3Ccircle%20cx%3D%221085%22%20cy%3D%22372%22%20r%3D%220.55%22%20opacity%3D%220.64%22%2F%3E%3Ccircle%20cx%3D%22138%22%20cy%3D%22126%22%20r%3D%220.86%22%20opacity%3D%220.65%22%2F%3E%3Ccircle%20cx%3D%221038%22%20cy%3D%22907%22%20r%3D%221.07%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%221540%22%20cy%3D%22703%22%20r%3D%220.65%22%20opacity%3D%220.22%22%2F%3E%3Ccircle%20cx%3D%221550%22%20cy%3D%22356%22%20r%3D%220.73%22%20opacity%3D%220.66%22%2F%3E%3Ccircle%20cx%3D%22420%22%20cy%3D%22272%22%20r%3D%220.35%22%20opacity%3D%220.51%22%2F%3E%3Ccircle%20cx%3D%221340%22%20cy%3D%22707%22%20r%3D%220.80%22%20opacity%3D%220.71%22%2F%3E%3Ccircle%20cx%3D%22245%22%20cy%3D%22194%22%20r%3D%220.70%22%20opacity%3D%220.27%22%2F%3E%3Ccircle%20cx%3D%22954%22%20cy%3D%22695%22%20r%3D%220.79%22%20opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%221111%22%20cy%3D%2297%22%20r%3D%220.47%22%20opacity%3D%220.68%22%2F%3E%3Ccircle%20cx%3D%22450%22%20cy%3D%22847%22%20r%3D%220.67%22%20opacity%3D%220.52%22%2F%3E%3Ccircle%20cx%3D%22425%22%20cy%3D%22991%22%20r%3D%220.72%22%20opacity%3D%220.70%22%2F%3E%3Ccircle%20cx%3D%221203%22%20cy%3D%22397%22%20r%3D%220.67%22%20opacity%3D%220.26%22%2F%3E%3Ccircle%20cx%3D%22480%22%20cy%3D%2252%22%20r%3D%220.75%22%20opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%22221%22%20cy%3D%22217%22%20r%3D%220.61%22%20opacity%3D%220.71%22%2F%3E%3Ccircle%20cx%3D%221085%22%20cy%3D%22913%22%20r%3D%220.36%22%20opacity%3D%220.25%22%2F%3E%3Ccircle%20cx%3D%221039%22%20cy%3D%22867%22%20r%3D%220.33%22%20opacity%3D%220.22%22%2F%3E%3Ccircle%20cx%3D%22108%22%20cy%3D%22302%22%20r%3D%220.54%22%20opacity%3D%220.63%22%2F%3E%3Ccircle%20cx%3D%22458%22%20cy%3D%22220%22%20r%3D%220.96%22%20opacity%3D%220.69%22%2F%3E%3Ccircle%20cx%3D%221596%22%20cy%3D%22204%22%20r%3D%220.64%22%20opacity%3D%220.51%22%2F%3E%3Ccircle%20cx%3D%22680%22%20cy%3D%22178%22%20r%3D%220.68%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%221301%22%20cy%3D%22944%22%20r%3D%220.88%22%20opacity%3D%220.39%22%2F%3E%3Ccircle%20cx%3D%22438%22%20cy%3D%22933%22%20r%3D%221.10%22%20opacity%3D%220.36%22%2F%3E%3Ccircle%20cx%3D%22409%22%20cy%3D%22763%22%20r%3D%220.32%22%20opacity%3D%220.56%22%2F%3E%3Ccircle%20cx%3D%22606%22%20cy%3D%22111%22%20r%3D%220.65%22%20opacity%3D%220.33%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); } .wrecipes { margin-top: 1.8rem; display: grid; gap: .7rem; } .wrecipes .fuse { margin-top: 0; } .wrecipes .chip { font-size: .95rem; padding: .5em 1em; }