@font-face { font-family: "Hider UI"; font-weight: 400; font-display: swap; src: url("fonts/inter-400.ttf") format("truetype"); }
@font-face { font-family: "Hider UI"; font-weight: 500; font-display: swap; src: url("fonts/inter-500.ttf") format("truetype"); }
@font-face { font-family: "Hider UI"; font-weight: 600; font-display: swap; src: url("fonts/inter-600.ttf") format("truetype"); }

:root {
  --cyb: "CYB{n3p0z3r4j_s3m_732v8a}";
  color-scheme: dark;
  --bg: #0c1322;
  --surface: #111a2c;
  --stroke: rgba(255, 255, 255, .08);
  --text: #e8edf7;
  --text-2: #c0cadb;
  --accent: #3563e9;
  --accent-hover: #4270f3;
  --accent-pressed: #2d58d6;
  --accent-text: #9dbbff;
  --focus: #fff;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, "Hider UI", sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, "Hider UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 14px/20px var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, p { margin: 0; }
svg { display: block; flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.page {
  --u: min(1px, calc((100vw - 32px) / 680), calc((100svh - 48px) / 1000));
  min-height: 100vh; min-height: 100svh; padding: 24px 16px;
  animation: page-in 600ms cubic-bezier(.2,.7,.25,1) both;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
h1 { font: 600 calc(155 * var(--u))/.9 var(--font-display); letter-spacing: -.035em; }

.collab {
  margin-top: calc(18 * var(--u)); display: flex; align-items: center; justify-content: center;
  color: var(--text-2); font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
.collab i { margin: 0 .7em 0 .5em; color: var(--accent-text); font-size: 1.75em; font-style: normal; font-weight: 300; letter-spacing: 0; transform: translateY(calc(-1 * var(--u))); }

.media {
  position: relative; margin-top: calc(40 * var(--u)); width: calc(680 * var(--u)); aspect-ratio: 16 / 10;
  border-radius: calc(16 * var(--u)); overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 var(--u) var(--stroke);
}
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.button {
  position: relative; margin-top: calc(36 * var(--u)); display: inline-flex; align-items: center; justify-content: center; gap: calc(12 * var(--u));
  height: calc(68 * var(--u)); padding: 0 calc(48 * var(--u)); border-radius: calc(14 * var(--u)); white-space: nowrap; text-decoration: none;
  border: 0; background: var(--accent); color: #fff; font-size: calc(20 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 600;
  box-shadow: inset 0 var(--u) 0 rgba(255, 255, 255, .18), 0 var(--u) calc(3 * var(--u)) rgba(0, 0, 0, .35);
  transition: background 140ms, transform 140ms var(--ease);
}
.button svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.button::after { content: ''; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; min-width: 44px; min-height: 44px; transform: translate(-50%, -50%); }
.button:hover { background: var(--accent-hover); }
.button:active { background: var(--accent-pressed); box-shadow: none; transform: translateY(var(--u)); }

@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }