/* ==========================================================
   nullzoro — shared chrome
   purple / chrome / y2k — metalheart
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Silkscreen:wght@400;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  --bg: #0a0612;
  --bg-2: #120a1f;
  --bg-3: #1a0f2e;
  --panel: rgba(24, 14, 42, .78);
  --line: rgba(167, 139, 250, .20);
  --line-2: rgba(167, 139, 250, .42);
  --line-hi: #c4b5fd;
  --violet: #8b5cf6;
  --violet-2: #a78bfa;
  --lilac: #ddd6fe;
  --pink: #f0abfc;
  --magenta: #e879f9;
  --cyan: #7dd3fc;
  --text: #ece6ff;
  --dim: #9d90c4;
  --faint: #5f5484;
  --good: #86efac;
  --bad: #fb7185;
  --warn: #fcd34d;
  --orange: #fb923c;
  --display: 'Michroma', 'Eurostile', 'Arial Black', sans-serif;
  --mono: 'Space Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --pixel: 'Silkscreen', 'Space Mono', monospace;
  --r: 8px;
  /* liquid chrome: bright sky, hard dark horizon, lilac ground */
  --chrome: linear-gradient(180deg, #ffffff 0%, #ece6ff 30%, #a898e6 48.5%, #0e0719 50%, #2a1650 58%, #7b66c4 78%, #e9e2ff 94%, #ffffff 100%);
  --chrome-side: linear-gradient(135deg, #ffffff 0%, #c9bcf6 22%, #3a2466 42%, #e9e2ff 58%, #7b66c4 76%, #f6f2ff 100%);
  --silver: #d9d0f7;
  --ink: #140a24;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
}

body {
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(139, 92, 246, .22), transparent 60%),
    radial-gradient(900px 600px at 110% 110%, rgba(232, 121, 249, .10), transparent 60%),
    radial-gradient(700px 500px at -10% 90%, rgba(125, 211, 252, .06), transparent 60%),
    var(--bg);
  overflow-x: hidden;
}

/* blueprint grid */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(167, 139, 250, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 139, 250, .07) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, transparent 80%);
}

/* crt scanlines */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
  opacity: .45;
}

::selection { background: var(--violet); color: #fff; }

* { scrollbar-width: thin; scrollbar-color: rgba(167, 139, 250, .35) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(167, 139, 250, .3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(167, 139, 250, .55); }

/* ---------- type ---------- */
.nl-label {
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}
.nl-label.faint { color: var(--faint); }

.nl-chrome {
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(167, 139, 250, .35));
}

kbd {
  font-family: var(--pixel);
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 4px;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-top-color: rgba(255, 255, 255, .55);
  background: linear-gradient(180deg, rgba(221, 214, 254, .2), rgba(139, 92, 246, .08) 55%, rgba(20, 10, 36, .5));
  color: var(--lilac);
}

/* ---------- panels ---------- */
.nl-panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 32px -14px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.nl-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .8;
  background:
    linear-gradient(var(--line-hi), var(--line-hi)) left top / 10px 1px,
    linear-gradient(var(--line-hi), var(--line-hi)) left top / 1px 10px,
    linear-gradient(var(--line-hi), var(--line-hi)) right top / 10px 1px,
    linear-gradient(var(--line-hi), var(--line-hi)) right top / 1px 10px,
    linear-gradient(var(--line-hi), var(--line-hi)) left bottom / 10px 1px,
    linear-gradient(var(--line-hi), var(--line-hi)) left bottom / 1px 10px,
    linear-gradient(var(--line-hi), var(--line-hi)) right bottom / 10px 1px,
    linear-gradient(var(--line-hi), var(--line-hi)) right bottom / 1px 10px;
  background-repeat: no-repeat;
}

/* ---------- buttons ---------- */
.nl-btn {
  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding: 9px 16px;
  border-radius: 3px;
  border: 1px solid rgba(20, 10, 36, .9);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
  background: linear-gradient(180deg, #ffffff 0%, #e4dcff 46%, #9d8ce0 50%, #b9a8f5 51%, #d9d0f7 80%, #f3eeff 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px rgba(40, 16, 90, .45), 0 0 0 1px rgba(196, 181, 253, .35), 0 3px 10px -4px rgba(0, 0, 0, .8);
  transition: transform .14s cubic-bezier(.2, 1.6, .4, 1), box-shadow .2s, border-color .2s, opacity .2s, filter .2s;
}
.nl-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08) saturate(1.15);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px rgba(40, 16, 90, .45), 0 0 0 1px rgba(221, 214, 254, .7), 0 0 16px rgba(167, 139, 250, .55);
}
.nl-btn:active { transform: translateY(1px) scale(.97); }
.nl-btn:focus-visible { outline: 2px solid var(--lilac); outline-offset: 3px; }
.nl-btn:disabled { opacity: .38; cursor: not-allowed; transform: none; box-shadow: none; }
.nl-btn.sm { padding: 6px 12px; font-size: 10px; }
.nl-btn.big { padding: 13px 26px; font-size: 13px; }
.nl-btn.primary {
  border-color: rgba(10, 4, 24, .95);
  background: linear-gradient(180deg, #c4b5fd 0%, #8b5cf6 46%, #3b1d8a 50%, #5b21b6 72%, #8b5cf6 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -2px 6px rgba(20, 0, 50, .5), 0 0 0 1px rgba(196, 181, 253, .45), 0 0 18px rgba(139, 92, 246, .4);
  color: #fff;
  text-shadow: 0 1px 0 rgba(60, 0, 100, .6);
}
.nl-btn.primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -2px 6px rgba(20, 0, 50, .5), 0 0 0 1px rgba(255, 255, 255, .7), 0 0 26px rgba(167, 139, 250, .7); }

/* ---------- pixel wipe transition ---------- */
.nl-wipe {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  pointer-events: none;
}
.nl-wipe i {
  display: block;
  background: var(--bg-3);
  animation: .26s cubic-bezier(.6, 0, .4, 1) both;
}
.nl-wipe i.hi { background: var(--violet); }
.nl-wipe.in i { transform: scale(0); animation-name: nl-wipe-in; }
.nl-wipe.out i { transform: scale(1.02); animation-name: nl-wipe-out; }
@keyframes nl-wipe-in { to { transform: scale(1.02); } }
@keyframes nl-wipe-out { to { transform: scale(0); } }

@keyframes nl-blink { 50% { opacity: .15; } }
@keyframes nl-twinkle { 0%, 100% { opacity: .2; transform: scale(.7) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}