:root { --bg: #06090A; --panel: #0A0E10; --field: #050809; --panel-2: #0F181B; --teal: #379FB2; --teal-bright: #6CD6E6; --teal-dim: #2A6A76; --amber: #D6A53A; --purple: #B07CF0; --text: #F2F6F7; --text-soft: #AEC4C9; --muted: #6E8A90; --border: #17262B; --red: #ff2740; --red-bright: #ff5d70; --red-dim: #b3121f; --red-deep: #3a0a10; --red-glow: rgba(255, 39, 64, .55); --red-glow-soft: rgba(255, 39, 64, .22); --radius: 14px; --radius-sm: 8px; --maxw: 1180px; --ease: cubic-bezier(.16, .84, .44, 1); --font-mono: "Share Tech Mono", ui-monospace, "DejaVu Sans Mono", "SFMono-Regular", Menlo, Consolas, monospace; --font-sans: "DejaVu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text-soft); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1 { color: var(--text); line-height: 1.15; margin: 0; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .bg-grid, .bg-scanlines, .bg-glow { position: fixed; inset: 0; pointer-events: none; z-index: 0; } .bg-grid { background-image: linear-gradient(to right, rgba(55,159,178,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(55,159,178,.05) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 100%); } .bg-scanlines { background: repeating-linear-gradient(to bottom, rgba(255,255,255,.014) 0 1px, transparent 1px 3px); opacity: .5; } .bg-glow { background: radial-gradient(60% 45% at 50% -5%, rgba(255,39,64,.18), transparent 70%), radial-gradient(45% 40% at 85% 15%, rgba(55,159,178,.08), transparent 70%); } .site-header, main, .site-footer { position: relative; z-index: 1; } .site-header { z-index: 50; } .btn { --btn-fs: .92rem; display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--font-mono); font-size: var(--btn-fs); letter-spacing: .06em; text-transform: uppercase; padding: .78em 1.5em; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .2s; } .btn-primary { color: #fff; background: linear-gradient(135deg, var(--red) 0%, var(--red-dim) 100%); border-color: var(--red); box-shadow: 0 0 0 1px rgba(255,39,64,.3), 0 8px 26px -10px var(--red-glow), inset 0 1px 0 rgba(255,255,255,.18); text-shadow: 0 0 10px rgba(255,255,255,.25); } .btn-primary:hover { transform: translateY(-2px); background: linear-gradient(135deg, var(--red-bright) 0%, var(--red) 100%); box-shadow: 0 0 22px -2px var(--red-glow), 0 14px 34px -12px var(--red-glow), inset 0 1px 0 rgba(255,255,255,.28); } .btn-primary:active { transform: translateY(0); } .btn-ghost { color: var(--text); background: rgba(255,255,255,.02); border-color: var(--teal-dim); box-shadow: inset 0 0 0 1px rgba(55,159,178,.05); } .btn-ghost:hover { color: #fff; border-color: var(--red); transform: translateY(-2px); box-shadow: 0 0 18px -4px var(--red-glow), inset 0 0 12px -6px var(--red-glow); } .site-header { padding: 18px 0; } .header-inner { display: flex; align-items: center; gap: 16px; } .brand { display: inline-flex; align-items: center; gap: 12px; } .brand-skull { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(55,159,178,.5)) drop-shadow(0 0 18px var(--red-glow-soft)); transition: transform .25s var(--ease); } .brand:hover .brand-skull { transform: rotate(-6deg) scale(1.06); } .brand-name { font-family: var(--font-mono); font-size: 1.15rem; color: var(--text); letter-spacing: .04em; text-shadow: 0 0 14px rgba(255,39,64,.35); } .brand-forge { color: var(--red); } .header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; } [data-glitch] { position: relative; display: inline-block; } [data-glitch]::before, [data-glitch]::after { content: attr(data-glitch); position: absolute; inset: 0; clip-path: inset(0); opacity: 0; pointer-events: none; } .brand:hover [data-glitch]::before { opacity: .9; color: var(--red); animation: glitch-a .4s steps(2) 1; } .brand:hover [data-glitch]::after { opacity: .9; color: var(--teal-bright); animation: glitch-b .4s steps(2) 1; } @keyframes glitch-a { 0%{transform:translate(0)} 40%{transform:translate(-2px,-1px)} 80%{transform:translate(2px,1px)} 100%{transform:translate(0)} } @keyframes glitch-b { 0%{transform:translate(0)} 40%{transform:translate(2px,1px)} 80%{transform:translate(-2px,-1px)} 100%{transform:translate(0)} } .lang-switcher { position: relative; font-family: var(--font-mono); } .lang-btn { display: inline-flex; align-items: center; gap: .5em; background: rgba(255,255,255,.03); border: 1px solid var(--teal-dim); color: var(--text-soft); padding: .5em .8em; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: .8rem; letter-spacing: .05em; cursor: pointer; transition: border-color .2s, box-shadow .2s, color .2s; } .lang-btn:hover, .lang-switcher.open .lang-btn { color: #fff; border-color: var(--red); box-shadow: 0 0 14px -4px var(--red-glow); } .lang-btn .lang-code { color: var(--red); font-weight: 700; text-transform: uppercase; } .lang-btn .chev { transition: transform .2s var(--ease); font-size: .7em; opacity: .7; } .lang-switcher.open .lang-btn .chev { transform: rotate(180deg); } .lang-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 172px; padding: 6px; background: var(--panel); border: 1px solid var(--teal-dim); border-radius: var(--radius-sm); box-shadow: 0 18px 44px -16px #000, 0 0 22px -12px var(--red-glow); opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; transition: opacity .18s var(--ease), transform .18s var(--ease); z-index: 60; } .lang-switcher.open .lang-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .lang-option { display: flex; align-items: center; gap: .7em; width: 100%; background: none; border: 0; color: var(--text-soft); padding: .6em .7em; border-radius: 6px; cursor: pointer; font-family: var(--font-mono); font-size: .82rem; text-align: left; transition: background .15s, color .15s; } .lang-option .lang-code { color: var(--muted); font-size: .72rem; min-width: 1.6em; text-transform: uppercase; } .lang-option:hover { background: rgba(255,39,64,.1); color: #fff; } .lang-option[aria-selected="true"] { color: #fff; } .lang-option[aria-selected="true"] .lang-code { color: var(--red); } .lang-option[aria-selected="true"]::after { content: "◂"; margin-left: auto; color: var(--red); } main { flex: 1 0 auto; display: flex; } .screen { flex: 1; display: flex; align-items: center; } .screen[hidden] { display: none; } .screen-inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 24px 64px; } .eyebrow { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--teal); margin: 0 0 22px; padding: .45em 1em; border: 1px solid var(--teal-dim); border-radius: 999px; background: rgba(55,159,178,.06); } .mark { position: relative; width: 140px; height: 140px; margin-bottom: 30px; } .mark-ring { position: absolute; inset: 6px; border-radius: 50%; border: 1.5px solid rgba(55,159,178,.2); } .mark-ring-dashed { position: absolute; inset: -4px; border-radius: 50%; border: 2px dashed rgba(255,39,64,.35); animation: spin 12s linear infinite; } .mark-ring-dashed::after { content: ""; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red-glow); transform: translateX(-50%); } .mark-logo { position: absolute; inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); object-fit: contain; filter: drop-shadow(0 0 24px rgba(55,159,178,.6)) drop-shadow(0 0 48px var(--red-glow-soft)) drop-shadow(0 0 14px var(--red-glow)); animation: float 6s ease-in-out infinite; } .mark-quiet .mark-logo { filter: drop-shadow(0 0 18px rgba(55,159,178,.35)); opacity: .8; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .screen-title { font-family: var(--font-mono); font-size: clamp(1.5rem, 4.2vw, 2.4rem); color: var(--text); margin: 0 0 16px; text-shadow: 0 0 18px rgba(255,39,64,.4), 0 0 46px rgba(255,39,64,.2); } .screen-lead { font-size: 1.06rem; color: var(--text-soft); max-width: 620px; margin: 0 0 28px; line-height: 1.65; } .points { display: flex; flex-direction: column; gap: 10px; margin: 0 0 30px; text-align: left; max-width: 560px; width: 100%; } .points li { position: relative; padding: .7em 1em .7em 2.6em; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255,255,255,.015); color: var(--text-soft); font-size: .96rem; } .points li::before { content: "▸"; position: absolute; left: 1em; top: .7em; color: var(--red); text-shadow: 0 0 10px var(--red-glow); } .watch { display: inline-flex; align-items: center; gap: .7em; font-family: var(--font-mono); font-size: .86rem; color: var(--teal-bright); margin: 0 0 30px; max-width: 620px; } .watch-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px var(--red-glow); animation: blink 1.8s steps(1) infinite; } @keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } } .actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .site-footer { border-top: 1px solid var(--border); padding: 22px 0 26px; } .footer-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .footer-disclaimer { margin: 0; font-size: .82rem; color: var(--muted); max-width: 100%; } .copyright { margin: 0; font-family: var(--font-mono); font-size: .78rem; color: var(--muted); } .nl-form { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 520px; margin: 0 auto; } .nl-label { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); align-self: flex-start; } .nl-input { width: 100%; background: var(--field); border: 1px solid var(--teal-dim); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-mono); font-size: 1rem; padding: .85em 1em; transition: border-color .2s var(--ease), box-shadow .25s var(--ease); } .nl-input::placeholder { color: var(--muted); } .nl-input:hover { border-color: var(--teal); } .nl-input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 18px -6px var(--red-glow), inset 0 0 12px -8px var(--red-glow); } .nl-input.is-bad { border-color: var(--red-dim); } .nl-check { display: inline-flex; align-items: center; gap: .75em; cursor: pointer; user-select: none; font-family: var(--font-mono); font-size: .9rem; color: var(--text-soft); align-self: flex-start; } .nl-check input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .nl-box { position: relative; flex: none; width: 20px; height: 20px; border: 1px solid var(--teal-dim); border-radius: 5px; background: var(--field); transition: border-color .2s var(--ease), box-shadow .25s var(--ease), background .2s; } .nl-check:hover .nl-box { border-color: var(--red); box-shadow: 0 0 14px -5px var(--red-glow); } .nl-check input:focus-visible + .nl-box { outline: 2px solid var(--red); outline-offset: 3px; } .nl-check input:checked + .nl-box { background: linear-gradient(135deg, var(--red) 0%, var(--red-dim) 100%); border-color: var(--red); box-shadow: 0 0 16px -4px var(--red-glow), inset 0 1px 0 rgba(255,255,255,.2); } .nl-check input:checked + .nl-box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); } .nl-check input:checked ~ span:last-child { color: var(--text); } .btn[disabled] { opacity: .38; cursor: not-allowed; transform: none !important; box-shadow: none !important; filter: grayscale(.55); } .nl-note { margin: 4px 0 0; font-size: .84rem; color: var(--muted); text-align: center; } .nl-message { margin: 6px 0 0; width: 100%; padding: .8em 1em; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255,255,255,.015); font-size: .92rem; color: var(--text-soft); text-align: center; } .nl-message[hidden] { display: none; } .nl-message[data-tone="good"] { border-color: var(--teal-dim); color: var(--teal-bright); background: rgba(55,159,178,.07); } .nl-message[data-tone="bad"] { border-color: var(--red-dim); color: var(--red-bright); background: rgba(255,39,64,.07); } .nl-digits { display: flex; gap: 10px; margin: 0 0 26px; } .nl-digit { width: 48px; height: 60px; text-align: center; background: var(--field); border: 1px solid var(--teal-dim); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-mono); font-size: 1.6rem; transition: border-color .2s var(--ease), box-shadow .25s var(--ease); } .nl-digit:focus { outline: none; border-color: var(--red); box-shadow: 0 0 18px -6px var(--red-glow); } .nl-digits.is-bad .nl-digit { border-color: var(--red-dim); } .nl-debug { margin: 0 0 20px; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em; color: var(--amber); border: 1px dashed var(--amber); border-radius: var(--radius-sm); padding: .5em 1em; } .nl-debug[hidden] { display: none; } .nl-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(3, 6, 7, .82); backdrop-filter: blur(3px); } .nl-modal[hidden] { display: none; } .nl-modal-card { display: flex; flex-direction: column; width: 100%; max-width: 720px; max-height: calc(100vh - 48px); padding: 26px; background: var(--panel); border: 1px solid var(--teal-dim); border-radius: var(--radius); box-shadow: 0 30px 80px -30px #000, 0 0 40px -20px var(--red-glow); } .nl-modal-title { margin: 0 0 16px; font-family: var(--font-mono); font-size: 1.15rem; color: var(--text); letter-spacing: .04em; text-shadow: 0 0 16px rgba(255,39,64,.35); } .nl-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 8px; text-align: left; font-size: .92rem; line-height: 1.65; color: var(--text-soft); } .nl-modal-body h3 { margin: 18px 0 6px; font-family: var(--font-mono); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); } .nl-modal-body h3:first-child { margin-top: 0; } .nl-modal-body p { margin: 0 0 10px; } .nl-modal-body .nl-todo { color: var(--amber); border-bottom: 1px dashed var(--amber); } .nl-modal-actions { flex: none; display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); } @media (max-width: 560px) { .nl-digits { gap: 6px; } .nl-digit { width: 40px; height: 52px; font-size: 1.3rem; } .nl-modal { padding: 12px; } .nl-modal-card { padding: 18px; max-height: calc(100vh - 24px); } .nl-modal-actions .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .mark-ring-dashed, .mark-logo, .watch-dot { animation: none; } [data-glitch]::before, [data-glitch]::after { display: none; } .btn { transition: none; } } @media (max-width: 560px) { .screen-inner { padding: 28px 8px 44px; } .mark { width: 112px; height: 112px; } .points { max-width: 100%; } .actions .btn { width: 100%; } }