:root { color-scheme: dark; --ink: #a7a79e; --muted: #62625d; --acid: #c7ff3d; --void: #080808; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { background: var(--void); color: var(--ink); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }
#field { position: fixed; inset: 0; width: 100%; height: 100%; opacity: .8; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 4px); mix-blend-mode: soft-light; }
main { min-height: 100%; display: grid; place-items: center; align-content: center; gap: clamp(1.1rem, 3vh, 2.6rem); padding: 2rem; isolation: isolate; }
.eyebrow, .signature { margin: 0; font-size: clamp(.6rem, .82vw, .78rem); letter-spacing: .25em; color: var(--muted); }
.signature { color: var(--acid); letter-spacing: .38em; text-shadow: 0 0 14px rgba(199,255,61,.42); animation: signal 2.8s steps(2, end) infinite; }
.mark { display: flex; align-items: center; gap: clamp(1.1rem, 4vw, 4rem); }
.monogram { width: clamp(4.8rem, 12vw, 10rem); aspect-ratio: 1; position: relative; border: 1px solid rgba(199,255,61,.65); display: grid; place-items: center; overflow: hidden; transform: rotate(-8deg); box-shadow: 0 0 0 rgba(199,255,61,0); animation: pulse 3.6s ease-in-out infinite; }
.monogram::before, .monogram::after { content: ""; position: absolute; background: var(--acid); mix-blend-mode: screen; }
.monogram::before { width: 160%; height: 1px; transform: rotate(-45deg); }
.monogram::after { width: 1px; height: 160%; transform: rotate(45deg); }
.monogram span { position: absolute; font: 700 clamp(2.4rem, 7vw, 6rem)/1 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: -.13em; z-index: 1; }
.monogram span:first-child { transform: translateX(-.1em); }.monogram span:last-child { transform: translateX(.25em); color: var(--acid); }
h1 { margin: 0; display: grid; font: 800 clamp(2.5rem, 11vw, 10rem)/.76 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: -.055em; text-transform: uppercase; }
h1 span { display: block; white-space: nowrap; text-shadow: 0 0 28px rgba(167,167,158,.08); } h1 span:last-child { color: transparent; -webkit-text-stroke: 1px rgba(199,255,61,.75); text-shadow: 0 0 18px rgba(199,255,61,.15); }
.sound { position: fixed; right: 1.4rem; bottom: 1.35rem; border: 1px solid rgba(241,238,232,.28); background: rgba(8,8,8,.4); color: var(--ink); padding: .65rem .8rem; font: 500 .62rem/1 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .13em; cursor: pointer; backdrop-filter: blur(8px); }
.sound:hover, .sound:focus-visible { border-color: var(--acid); outline: none; }.sound span { color: var(--acid); }
@keyframes pulse { 0%, 80%, 100% { box-shadow: 0 0 0 rgba(199,255,61,0); } 84% { box-shadow: 0 0 26px rgba(199,255,61,.34), inset 0 0 18px rgba(199,255,61,.13); } }
@keyframes signal { 0%, 74%, 100% { opacity: .64; } 76%, 80% { opacity: 1; } 78% { opacity: .25; } }
@media (max-width: 540px) { .mark { flex-direction: column; gap: 1.8rem; } h1 { text-align: center; font-size: clamp(3.4rem, 18vw, 6rem); } .monogram { width: 5rem; } }
@media (prefers-reduced-motion: reduce) { #field { display: none; } .monogram, .signature { animation: none; } }