/* t3k.us -> X Networks transition notice + banner (t_39c17729, 2026-10-26).
   Overlay: shown once per visitor (cookie xn_notice) for 5 s, decided by the inline <head> script in index.html.
   Banner: always shown at the top of the fixed header, with a button to https://xnet.ax/. Sharp corners only. */
@font-face { font-family: "XN Saira Condensed"; src: url("https://xnet.ax/assets/fonts/SairaCondensed-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
:root { --xn-bg: #0F0A1C; --xn-panel: #1A1330; --xn-line: #2E2550; --xn-ink: #F3EFFA; --xn-muted: #A79FBE; --xn-lime: #C8F135; --xn-violet: #8A5CF5; --xn-banner-h: 44px; }

/* ---------- banner (inside .site-header, so it rides with the fixed header) ---------- */
.xn-banner { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: var(--xn-banner-h); padding: 6px 16px;
  background: linear-gradient(90deg, #140E25, #1F1440 55%, #140E25); border-bottom: 1px solid var(--xn-line);
  color: var(--xn-ink); font: 500 .9rem/1.3 Inter, system-ui, sans-serif; text-align: center; }
.xn-banner .xn-mark { width: 18px; height: 19px; flex: none; }
.xn-banner b { color: var(--xn-lime); font-weight: 700; }
.xn-banner a.xn-go { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--xn-lime); color: var(--xn-bg);
  font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); transition: background .2s; }
.xn-banner a.xn-go:hover, .xn-banner a.xn-go:focus-visible { background: #E6FF8F; }
/* the header got taller: push the page and in-page anchor targets down by the banner height */
body.xn-has-banner { padding-top: var(--xn-banner-h); }
html { scroll-padding-top: calc(var(--xn-banner-h) + 80px); }
@media (max-width: 640px) {
  :root { --xn-banner-h: 58px; }
  .xn-banner { gap: 10px; font-size: .8rem; padding: 6px 10px; text-align: left; }
  .xn-banner .xn-mark { display: none; }
  .xn-banner a.xn-go { padding: 7px 10px; font-size: .74rem; }
}

/* ---------- one-time notice overlay ---------- */
.xn-notice { display: none; }
html.xn-notice-on .xn-notice { display: flex; }
html.xn-notice-on body { overflow: hidden; }
.xn-notice { position: fixed; inset: 0; z-index: 100000; align-items: center; justify-content: center; padding: 20px;
  background: var(--xn-bg); background-image: radial-gradient(ellipse at 50% 0%, rgba(138,92,245,.30), transparent 60%), radial-gradient(ellipse at 50% 110%, rgba(200,241,53,.10), transparent 55%);
  color: var(--xn-ink); font-family: Inter, system-ui, sans-serif; opacity: 1; transition: opacity .45s ease; }
.xn-notice.xn-out { opacity: 0; pointer-events: none; }
.xn-card { position: relative; width: min(620px, 100%); padding: 40px 36px 30px; background: var(--xn-panel); border: 1px solid var(--xn-line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%); text-align: center; }
.xn-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #22E3FF, #8B5CF6, #C8F135); }
.xn-swap { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.xn-old { font-family: Sora, Inter, sans-serif; font-weight: 800; letter-spacing: .1em; font-size: 1.05rem; color: var(--xn-muted); }
.xn-arrow { width: 34px; height: 14px; color: var(--xn-lime); }
.xn-new { display: inline-flex; align-items: center; gap: 4px; font-family: "XN Saira Condensed", "Saira Condensed", Sora, sans-serif; font-weight: 800; font-size: 2.1rem; letter-spacing: .06em; line-height: 1; }
.xn-new svg { width: 34px; height: 36px; }
.xn-card h1 { margin: 0 0 12px; font-family: Sora, Inter, sans-serif; font-size: clamp(1.35rem, 3.6vw, 1.8rem); line-height: 1.25; color: #fff; }
.xn-card p { margin: 0 auto 10px; max-width: 480px; color: #CFC8E3; font-size: 1rem; line-height: 1.6; }
.xn-card p b { color: var(--xn-lime); font-weight: 600; }
.xn-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 24px 0 20px; }
.xn-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border: 1px solid var(--xn-line); background: transparent;
  color: var(--xn-ink); font: 600 .92rem Inter, system-ui, sans-serif; letter-spacing: .02em; text-decoration: none; cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.xn-btn:hover, .xn-btn:focus-visible { border-color: var(--xn-violet); background: rgba(138,92,245,.12); }
.xn-btn.xn-primary { background: var(--xn-lime); border-color: var(--xn-lime); color: var(--xn-bg); }
.xn-btn.xn-primary:hover, .xn-btn.xn-primary:focus-visible { background: #E6FF8F; }
.xn-count { font: 500 .78rem/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--xn-muted); }
.xn-bar { height: 3px; margin-top: 12px; background: var(--xn-line); overflow: hidden; }
.xn-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--xn-violet), var(--xn-lime)); transform-origin: left; animation: xn-shrink 5s linear forwards; }
@keyframes xn-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 520px) { .xn-card { padding: 32px 20px 24px; } .xn-new { font-size: 1.7rem; } .xn-actions .xn-btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .xn-bar i { animation: none; } .xn-notice { transition: none; } }
.xn-card h1 { text-wrap: balance; } .xn-card p { text-wrap: pretty; }