/* Neuralignition portfolio: same palette and type as the Labs hub. Dark by default, light via theme.js. */
:root {
  color-scheme: dark;
  --bg: #000;
  --text: #fff;
  --muted: #8d8d8d;
  --line: rgba(255, 255, 255, 0.08);
  --tile: 260px;
  --focus: #fff;
  --sel-bg: #fff;
  --sel-fg: #000;
  --rule: rgba(255, 255, 255, 0.12);
  --section-title: #f4f4f4;
  --accent-glow: rgba(124, 100, 235, 0.55);
  --count-bg: rgba(255, 255, 255, 0.07);
  --count-fg: #8f8f8f;
  --cat: #8a8a8a;
  --thumb-bg: #141414;
  --thumb-ring: rgba(255, 255, 255, 0.06);
  --thumb-shadow: none;
  --thumb-shadow-hover: none;
  --thumb-inner-ring: rgba(255, 255, 255, 0.07);
  --thumb-hover-filter: brightness(1.12);
  --toggle-border: rgba(255, 255, 255, 0.16);
  --toggle-bg: rgba(255, 255, 255, 0.04);
  --toggle-bg-hover: rgba(255, 255, 255, 0.1);
  --blurb-bg: linear-gradient(to top, rgba(8, 8, 12, 0.95), rgba(8, 8, 12, 0.9) 72%, rgba(8, 8, 12, 0));
  --blurb-fg: #f2f2f5;
  --chip-bg: rgba(255, 255, 255, 0.04);
  --chip-bg-hover: rgba(255, 255, 255, 0.08);
  --chip-ring: rgba(255, 255, 255, 0.08);
  --chip-shadow: none;
  --panel-bg: rgba(255, 255, 255, 0.03);
  --panel-ring: rgba(255, 255, 255, 0.08);
  --bar: #8b74ff;
  --bar-today: #c9bcff;
  --track: rgba(255, 255, 255, 0.07);
  /* Sign in */
  --auth-glow: rgba(98, 78, 196, 0.22);
  --card-ring: linear-gradient(165deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.05) 38%, rgba(150, 120, 255, 0.45));
  --card-shadow: 0 0 90px rgba(120, 96, 230, 0.16), 0 40px 80px rgba(0, 0, 0, 0.55);
  --card-bg: linear-gradient(180deg, rgba(22, 22, 24, 0.96), rgba(8, 8, 10, 0.98));
  --label: #9a9a9a;
  --input-border: #2c2c2c;
  --input-bg: #0b0b0c;
  --input-fg: #fff;
  --btn-bg: #fff;
  --btn-fg: #000;
  --alert-bg: rgba(255, 90, 90, 0.1);
  --alert-fg: #ffb4b4;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f3f5;
  --text: #141418;
  --muted: #62626b;
  --line: rgba(20, 20, 30, 0.08);
  --focus: #141418;
  --sel-bg: #141418;
  --sel-fg: #fff;
  --rule: rgba(20, 20, 30, 0.13);
  --section-title: #141418;
  --accent-glow: rgba(111, 88, 224, 0.32);
  --count-bg: rgba(20, 20, 30, 0.07);
  --count-fg: #5d5d66;
  --cat: #6a6a73;
  --thumb-bg: #e4e4e8;
  --thumb-ring: rgba(20, 20, 30, 0.1);
  --thumb-shadow: 0 1px 2px rgba(20, 20, 40, 0.1), 0 8px 22px rgba(20, 20, 50, 0.12);
  --thumb-shadow-hover: 0 2px 4px rgba(20, 20, 40, 0.12), 0 14px 30px rgba(20, 20, 50, 0.18);
  --thumb-inner-ring: rgba(0, 0, 0, 0.1);
  --thumb-hover-filter: brightness(1.04);
  --toggle-border: rgba(20, 20, 30, 0.16);
  --toggle-bg: #fff;
  --toggle-bg-hover: #ececf0;
  --blurb-bg: linear-gradient(to top, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.93) 72%, rgba(255, 255, 255, 0));
  --blurb-fg: #18181c;
  --chip-bg: #fff;
  --chip-bg-hover: #fafafc;
  --chip-ring: rgba(20, 20, 30, 0.09);
  --chip-shadow: 0 1px 2px rgba(20, 20, 40, 0.06), 0 4px 12px rgba(20, 20, 50, 0.06);
  --panel-bg: #fff;
  --panel-ring: rgba(20, 20, 30, 0.08);
  --bar: #6f58e0;
  --bar-today: #4a35c4;
  --track: rgba(20, 20, 30, 0.07);
  --auth-glow: rgba(124, 100, 235, 0.16);
  --card-ring: linear-gradient(165deg, rgba(20, 20, 30, 0.14), rgba(20, 20, 30, 0.04) 38%, rgba(124, 100, 235, 0.42));
  --card-shadow: 0 0 80px rgba(124, 100, 235, 0.12), 0 30px 60px rgba(30, 24, 70, 0.14);
  --card-bg: linear-gradient(180deg, #ffffff, #fafafc);
  --label: #6a6a73;
  --input-border: #d4d4dc;
  --input-bg: #fff;
  --input-fg: #141418;
  --btn-bg: #141418;
  --btn-fg: #fff;
  --alert-bg: rgba(210, 40, 40, 0.08);
  --alert-fg: #a42323;
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--toggle-border);
  border-radius: 999px;
  background: var(--toggle-bg);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.theme-toggle:hover {
  color: var(--text);
  background: var(--toggle-bg-hover);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.theme-toggle svg {
  display: block;
  flex: 0 0 auto;
}

/* Show the mode the button switches to. */
.theme-toggle .icon-moon,
.theme-toggle .theme-label-dark,
:root[data-theme="light"] .theme-toggle .icon-sun,
:root[data-theme="light"] .theme-toggle .theme-label-light {
  display: none;
}

:root[data-theme="light"] .theme-toggle .icon-moon {
  display: block;
}

:root[data-theme="light"] .theme-toggle .theme-label-dark {
  display: inline;
}

:root {
  --pf-glow: radial-gradient(1200px 520px at 50% -140px, rgba(124, 100, 235, 0.26), rgba(124, 100, 235, 0) 70%);
  --pf-card: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  --pf-card-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  --pf-ring: rgba(255, 255, 255, 0.09);
  --pf-ring-hover: rgba(160, 140, 255, 0.55);
  --pf-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  --pf-cta-bg: #fff;
  --pf-cta-fg: #000;
  --pf-cat-bg: rgba(0, 0, 0, 0.62);
  --pf-cat-fg: #f2f2f5;
}
:root[data-theme="light"] {
  --pf-glow: radial-gradient(1200px 520px at 50% -140px, rgba(111, 88, 224, 0.16), rgba(111, 88, 224, 0) 70%);
  --pf-card: #fff;
  --pf-card-hover: #fff;
  --pf-ring: rgba(20, 20, 30, 0.08);
  --pf-ring-hover: rgba(111, 88, 224, 0.5);
  --pf-shadow: 0 1px 2px rgba(20, 20, 40, 0.06), 0 18px 40px -18px rgba(20, 20, 50, 0.22);
  --pf-cta-bg: #141418;
  --pf-cta-fg: #fff;
  --pf-cat-bg: rgba(255, 255, 255, 0.86);
  --pf-cat-fg: #141418;
}

[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
body.pf {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--pf-glow), var(--bg);
  background-repeat: no-repeat;
  color: var(--text);
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--sel-bg); color: var(--sel-fg); }

.pf-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 22px 40px 0;
  padding-top: max(22px, env(safe-area-inset-top));
}
.pf-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.pf-mark:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
.pf-glyph {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: conic-gradient(from 210deg, #8b74ff, #c9bcff, #5ad1ff, #8b74ff);
  box-shadow: 0 0 18px var(--accent-glow);
}

.pf-main {
  flex: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px 40px;
}
.pf-hero { max-width: 760px; margin: 0 auto; padding: 64px 0 46px; text-align: center; }
.pf-eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--chip-bg);
  box-shadow: inset 0 0 0 1px var(--chip-ring);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pf-hero h1 {
  margin: 0;
  color: var(--section-title);
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.pf-lede { margin: 16px auto 0; max-width: 560px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.pf-empty { margin: 30px 0 0; color: var(--muted); text-align: center; }

.pf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
}
.pf-grid.is-few { grid-template-columns: repeat(auto-fit, minmax(300px, 470px)); justify-content: center; }

.pf-card { min-width: 0; }
.pf-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 18px;
  background: var(--pf-card);
  box-shadow: inset 0 0 0 1px var(--pf-ring), var(--pf-shadow);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
a.pf-link:hover { transform: translateY(-3px); background: var(--pf-card-hover); box-shadow: inset 0 0 0 1px var(--pf-ring-hover), 0 0 60px -20px var(--accent-glow), var(--pf-shadow); }
a.pf-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.pf-shot {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 10px 10px 0;
  border-radius: 11px;
  background: var(--thumb-bg);
  box-shadow: inset 0 0 0 1px var(--thumb-inner-ring);
  overflow: hidden;
}
.pf-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease, filter 0.3s ease; }
a.pf-link:hover .pf-shot img { transform: scale(1.025); filter: var(--thumb-hover-filter); }
.is-preview .pf-shot img { filter: saturate(0.85); }
.pf-noshot { display: grid; place-items: center; width: 100%; height: 100%; color: var(--muted); font-size: 48px; font-weight: 700; }
.pf-cat {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--pf-cat-bg);
  color: var(--pf-cat-fg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pf-body { display: flex; flex: 1; flex-direction: column; padding: 18px 22px 22px; }
.pf-kicker { margin: 0; color: var(--cat); font-size: 12px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; }
.pf-name { margin: 6px 0 0; font-size: 24px; font-weight: 720; letter-spacing: -0.01em; }
.pf-blurb { flex: 1; margin: 10px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.pf-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--pf-cta-bg);
  color: var(--pf-cta-fg);
  font-size: 13.5px;
  font-weight: 700;
}
.pf-cta svg { transition: transform 0.2s ease; }
a.pf-link:hover .pf-cta svg { transform: translate(2px, -2px); }
.pf-badge {
  align-self: flex-start;
  display: inline-flex;
  flex-direction: column;
  margin-top: 18px;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--chip-bg);
  box-shadow: inset 0 0 0 1px var(--chip-ring);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.pf-badge span { color: var(--muted); font-size: 11.5px; font-weight: 500; }

.pf-foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 18px 40px 26px;
  padding-bottom: max(26px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
}

@media (max-width: 760px) {
  .pf-top { padding: 16px 18px 0; padding-top: max(16px, env(safe-area-inset-top)); }
  .pf-main { padding: 0 18px 28px; }
  .pf-hero { padding: 38px 0 28px; }
  .pf-lede { font-size: 15.5px; }
  .pf-grid, .pf-grid.is-few { grid-template-columns: 1fr; gap: 18px; }
  .pf-name { font-size: 21px; }
  .pf-body { padding: 16px 18px 18px; }
  .pf-foot { flex-direction: column; gap: 4px; padding: 16px 18px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-link, .pf-shot img, .pf-cta svg { transition: none; }
  a.pf-link:hover { transform: none; }
}