/*! © 2026 CipherChow LLC. All rights reserved. SigilSmith website; not licensed for reuse. */
@font-face { font-family: "Inter"; src: url("fonts/InterVariable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; } @property --e { syntax: "<number>"; inherits: true; initial-value: 0; } :root { color-scheme: dark; --bg: #05080d; --bg-2: #080c13; --surface: #0d121a; --surface-2: #121824; --raised: #182131; --text: #e8eef5; --text-2: #94a1b2; --text-3: #5d6a7c; --accent: #78c6ff; --accent-ink: #04121f; --accent-soft: rgba(120, 198, 255, .12); --spark: #ffb43c; --spark-soft: rgba(255, 180, 60, .14); --ok: #78dc96; --warn: #ebc878; --err: #f06864; --se: #b8a6ff; --os: #6fe0c8; --glass: linear-gradient(180deg, rgba(160, 205, 255, .085), rgba(160, 205, 255, .02) 55%, rgba(160, 205, 255, .035)), rgba(11, 16, 24, .58); --glass-blur: blur(26px) saturate(160%); --glass-shadow: 0 50px 100px -40px rgba(0, 0, 0, .85), 0 0 80px -30px rgba(120, 198, 255, .12); --well: rgba(0, 0, 0, .3); --max: 1200px; --wide: 1440px; --gap-y: clamp(56px, 9vh, 96px); --sec: calc(var(--wide) + 2 * var(--gutter)); --gutter: clamp(16px, 4vw, 40px); --font: "Inter", system-ui, sans-serif; --ease: cubic-bezier(.2, .7, .1, 1); --glide: cubic-bezier(.65, 0, .25, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; } } body { position: relative; z-index: 0; margin: 0; background: var(--bg); color: var(--text); font: 17px/1.55 var(--font); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; overflow-x: hidden; } main { overflow-x: clip; } a { color: inherit; text-decoration: none; } h1, h2, h3 { margin: 0; font-weight: 700; } @keyframes sheen { from { background-position: 100% 0, 0 0; } to { background-position: 0% 0, 0 0; } } .lede { margin: 20px 0 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--text-2); max-width: 34em; letter-spacing: -.01em; } .aura { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .aura i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; will-change: transform; } .aura i:nth-child(1) { left: -30vmax; top: -10vmax; background: radial-gradient(closest-side, rgba(120, 198, 255, .13), transparent); animation: drift-a 26s ease-in-out infinite alternate; } .aura i:nth-child(2) { right: -35vmax; top: 20vh; background: radial-gradient(closest-side, rgba(125, 120, 255, .10), transparent); animation: drift-b 32s ease-in-out infinite alternate; } .aura i:nth-child(3) { left: 10vw; bottom: -45vmax; background: radial-gradient(closest-side, rgba(255, 180, 60, .07), transparent); animation: drift-c 38s ease-in-out infinite alternate; } @keyframes drift-a { to { transform: translate(35vw, 30vh) scale(1.15); } } @keyframes drift-b { to { transform: translate(-30vw, 25vh) scale(.9); } } @keyframes drift-c { to { transform: translate(30vw, -25vh) scale(1.2); } } .btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 999px; font: 600 16px var(--font); letter-spacing: -.01em; border: 0; cursor: pointer; transition: transform .2s var(--ease), background .2s, box-shadow .3s; white-space: nowrap; } .btn:active { transform: scale(.97); } .btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 0 rgba(120, 198, 255, 0), 0 8px 30px rgba(120, 198, 255, .25); } .btn-primary:hover { background: #92d2ff; box-shadow: 0 0 0 6px rgba(120, 198, 255, .14), 0 10px 40px rgba(120, 198, 255, .35); } .btn-ghost { background: rgba(216, 226, 236, .07); color: var(--text); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .btn-ghost:hover { background: rgba(216, 226, 236, .12); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; } .nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, backdrop-filter .3s; } .nav-in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); height: 64px; display: flex; align-items: center; gap: 32px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -.02em; } .brand-mark { flex: none; overflow: visible; } .brand-mark * { transform-box: fill-box; } .bm-hammer { transform-origin: 50% 100%; } .bm-sparks path { transform-origin: 50% 100%; } .go .bm-sparks path { animation: spark .5s calc(.46s + var(--i) * 60ms) cubic-bezier(.2, 1.4, .4, 1) both; } @keyframes spark { from { opacity: 0; transform: translateY(40%) scale(.2); } to { opacity: 1; transform: none; } } .forge { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 70; pointer-events: none; } .lvh { position: absolute; top: 0; left: 0; width: 0; height: 100lvh; visibility: hidden; pointer-events: none; } .molten { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 56svh; z-index: -1; pointer-events: none; transition: opacity 1.1s var(--ease); background: radial-gradient(90% 100% at 50% 100%, rgba(255, 128, 44, .2), rgba(255, 96, 30, .06) 45%, transparent 75%); } .molten.gl { background: none; } @keyframes pulse { 50% { box-shadow: 0 0 2px var(--spark); opacity: .6; } } @keyframes rise { from { opacity: 0; transform: translateY(24px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } } @keyframes shot-in { from { opacity: 0; transform: translateX(80px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } } .burn { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 70; pointer-events: none; } @property --rc { syntax: "<color>"; inherits: false; initial-value: transparent; } @keyframes row-cool { 0% { --rc: rgba(255, 214, 150, .75); } 25% { --rc: rgba(255, 140, 50, .45); } 60% { --rc: rgba(120, 198, 255, .3); } 100% { --rc: rgba(120, 198, 255, 0); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes row-in { from { opacity: 0; transform: translateY(-12px); } } :root { --peek: clamp(96px, 13svh, 160px); } @keyframes flip { 0% { transform: scale(1); } 40% { transform: scale(.4) rotate(45deg); } 100% { transform: none; } } @keyframes pop { from { opacity: 0; transform: translateY(10px); } } @keyframes dk-go { 30% { filter: brightness(1.25); transform: scale(.97); } } @keyframes blink { 50% { opacity: 0; } } @keyframes bk-in { from { opacity: 0; transform: translateY(-14px); background: rgba(120, 220, 150, .16); } } @keyframes alert { 50% { background: rgba(240, 104, 100, .24); box-shadow: 0 0 16px rgba(240, 104, 100, .25); } } .foot { background: rgba(0, 0, 0, .35); } .foot-base { max-width: var(--sec); margin: 0 auto; padding: 24px var(--gutter) 40px; display: flex; justify-content: space-between; gap: 24px; font-size: 12.5px; color: var(--text-3); } .foot-base p { margin: 0; max-width: 60em; } @media (max-width: 760px) { body { font-size: 16px; } .nav-in { justify-content: space-between; } .molten { position: absolute; bottom: auto; top: calc(var(--screen-h, 100lvh) - 56lvh); height: 56lvh; } .forge, .burn { position: absolute; inset: 0 auto auto 0; height: var(--screen-h, 100lvh); } .foot-base { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; } html { scroll-behavior: auto; } }