:root {
 /* Shared header: common CSS for homepage, Blog and Prompt Library. */
 --max:77.5rem;
 --text-2:var(--ink2);
 --nav-active-fg:#fff;--cyan:#49c9f2;--radius-pill:var(--radius-round);
 --space-1:var(--size-1);--space-2:var(--size-2);--space-3:var(--size-3);--space-4:var(--size-4);
 --apple-font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
 --apple-glass-blur:18px;--apple-glass-saturate:145%;
 --apple-glass-bg-ultra-thin:rgba(245,250,253,.58);--apple-glass-bg-regular:rgba(249,252,255,.71);
 --apple-glass-bg-thick:rgba(252,254,255,.86);--apple-glass-border:rgba(255,255,255,.78);
 --apple-glass-sheen:rgba(255,255,255,.54);
 --apple-glass-inner-rim:inset 0 1px 0 rgba(255,255,255,.94),inset 0 -1px 0 rgba(38,74,99,.13);
 --apple-glass-shadow:0 16px 36px rgba(29,55,70,.11),0 3px 10px rgba(29,55,70,.04);
}
:root[data-theme="dark"]{
 --apple-glass-bg-ultra-thin:rgba(32,44,53,.61);--apple-glass-bg-regular:rgba(36,49,59,.7);
 --apple-glass-bg-thick:rgba(38,53,63,.9);--apple-glass-border:rgba(227,244,255,.28);
 --apple-glass-sheen:rgba(245,253,255,.12);
 --apple-glass-inner-rim:inset 0 1px 0 rgba(240,250,255,.21),inset 0 -1px 0 rgba(0,0,0,.22);
 --apple-glass-shadow:0 16px 36px rgba(0,0,0,.27),0 3px 10px rgba(0,0,0,.13);
}
.apple-glass-base {
  border: 1px solid var(--apple-glass-border);
  box-shadow: var(--apple-glass-shadow), var(--apple-glass-inner-rim);
  backdrop-filter: blur(var(--apple-glass-blur)) saturate(var(--apple-glass-saturate));
  -webkit-backdrop-filter: blur(var(--apple-glass-blur)) saturate(var(--apple-glass-saturate));
  transform: translateZ(0);
}
.apple-glass-ultra-thin { background: var(--apple-glass-bg-ultra-thin); }
.apple-glass-regular { background: var(--apple-glass-bg-regular); }
.apple-glass-thick { background: var(--apple-glass-bg-thick); }

/* ───────────────────────── Header / floating capsule */
.site-header {
  position: fixed;
  top: .875rem;
  left: 0;
  right: 0;
  z-index: 80;
  width: min(var(--max), calc(100% - 2.625rem));
  margin: 0 auto;
  border-radius: var(--radius-pill);
  /* The leading highlight catches light without an optical distortion shader. */
  background:
    linear-gradient(122deg, var(--apple-glass-sheen), rgba(255,255,255,0) 58%),
    var(--apple-glass-bg-ultra-thin);
  box-shadow: 0 15px 42px rgba(25,56,81,.15), var(--apple-glass-inner-rim);
}
.site-header .shell { width: 100%; }
.site-header .nav {
  min-height: 4.375rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) .625rem var(--space-2) .875rem;
}
.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  flex-shrink: 0;
}
.site-header .brand img {
  width: 2.375rem;
  height: 2.375rem;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255,255,255,.88);
  box-shadow: 0 3px 12px rgba(0,0,0,.08);
}
.site-header .brand span { display: flex; flex-direction: column; line-height: 1; }
.site-header .brand strong { font-size: .8125rem; letter-spacing: .08em; }
.site-header .brand small { margin-top: var(--space-1); color: var(--muted); font: 700 .5625rem/1 var(--apple-font-family); letter-spacing: .13em; }

.site-header .nav-links {
  --nav-indicator-x: .1875rem;
  --nav-indicator-w: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .1875rem;
  min-width: 0;
  padding: .1875rem;
  /* Four primary links fit: allow the AI child menu to escape the capsule. */
  overflow: visible;
  scroll-behavior: smooth;
}
.site-header .nav-links::-webkit-scrollbar { display: none; }

.site-header .nav-indicator {
  position: absolute;
  z-index: 0;
  top: .1875rem;
  left: 0;
  width: var(--nav-indicator-w);
  height: calc(100% - .375rem);
  border-radius: var(--radius-pill);
  background: var(--text);
  box-shadow:
    0 6px 18px rgba(0,0,0,.13),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.14);
  opacity: 0;
  transform: translate3d(var(--nav-indicator-x),0,0);
  pointer-events: none;
  will-change: transform, width;
  transition:
    transform .46s cubic-bezier(.16,1,.3,1),
    width .46s cubic-bezier(.16,1,.3,1),
    opacity .18s ease,
    background-color .3s cubic-bezier(.16,1,.3,1);
}
.site-header .nav-links.nav-ready .nav-indicator { opacity: 1; }
.site-header .nav-links.nav-instant .nav-indicator { transition: none; }

.site-header .nav-pill {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .625rem .9375rem;
  border-radius: var(--radius-pill);
  color: var(--text-2);
  background: transparent;
  font-size: .8125rem;
  font-weight: 620;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transition:
    color .32s cubic-bezier(.16,1,.3,1),
    transform .25s ease,
    opacity .25s ease;
}
.site-header .nav-pill > span {
  width: var(--space-1);
  height: var(--space-1);
  border-radius: 50%;
  background: currentColor;
  opacity: .38;
  transition: opacity .25s ease, background-color .25s ease, transform .25s ease;
}
.site-header .nav-pill:hover { transform: translateY(-1px); }
.site-header .nav-pill.active { color: var(--nav-active-fg); }
.site-header .nav-pill.active > span {
  opacity: 1;
  background: var(--cyan);
  transform: scale(1.15);
}

/* AI is one primary navigation item with two accessible child links. */
.site-header .nav-group {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.site-header .nav-group .nav-pill { padding-right: .375rem; }
.site-header .nav-submenu-trigger {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: .75rem;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.site-header .nav-group:has(.nav-pill.active) .nav-submenu-trigger { color: var(--nav-active-fg); }
.site-header .nav-submenu-trigger svg { width: .875rem; height: .875rem; transition: transform .2s ease; }
.site-header .nav-submenu-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.site-header .nav-submenu-trigger:focus-visible,
.site-header .ai-subnav a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.site-header .ai-subnav {
  position: absolute;
  z-index: 90;
  top: 100%;
  left: 0;
  min-width: 10.5rem;
  display: grid;
  gap: .1875rem;
  padding: .5rem;
  border-radius: 1rem;
  /* The shared GlassSurface owns tint and refraction; no opaque white wash. */
  background: transparent;
  border: 1px solid var(--apple-glass-border);
  box-shadow: 0 12px 30px rgba(16, 35, 52, .17), var(--apple-glass-inner-rim);
}
.site-header .ai-subnav[hidden] { display: none; }
.site-header .ai-subnav > a {
  position: relative;
  z-index: 5;
  display: block;
  white-space: nowrap;
  padding: .6875rem .875rem;
  border-radius: .7rem;
  color: var(--text);
  font-size: .8125rem;
  font-weight: 650;
}
.site-header .ai-subnav > a:hover,
.site-header .ai-subnav > a[aria-current="page"] {
  background: var(--apple-glass-bg-ultra-thin);
  box-shadow: inset 0 0 0 1px var(--apple-glass-border);
}
@media (max-width: 760px) {
  .site-header .nav-group .nav-pill { padding-right: .125rem; }
  .site-header .nav-submenu-trigger { width: 1.375rem; height: 2.25rem; }
  .site-header .ai-subnav { min-width: 9rem; }
}

.site-header .nav-actions { display: flex; align-items: center; gap: var(--space-2); }

.site-header .theme-toggle {
  width: 2.625rem;
  height: 2.625rem;
  flex: 0 0 2.625rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--apple-glass-border);
  border-radius: 50%;
  color: var(--text);
  background:
    linear-gradient(130deg, var(--apple-glass-sheen), transparent 66%),
    var(--apple-glass-bg-regular);
  box-shadow: 0 6px 18px rgba(29,55,70,.10), var(--apple-glass-inner-rim);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  cursor: pointer;
  transform: translateZ(0);
  transition:
    background-color .3s cubic-bezier(.16,1,.3,1),
    color .3s cubic-bezier(.16,1,.3,1),
    border-color .3s cubic-bezier(.16,1,.3,1),
    box-shadow .3s cubic-bezier(.16,1,.3,1);
}
.site-header .theme-toggle:hover {
  background:
    linear-gradient(130deg, var(--apple-glass-sheen), transparent 66%),
    var(--apple-glass-bg-thick);
  box-shadow: 0 9px 21px rgba(29,55,70,.14), var(--apple-glass-inner-rim);
}
.site-header .theme-toggle-track {
  position: relative;
  width: 1.1875rem;
  height: 1.1875rem;
  display: block;
}
.site-header .theme-icon {
  position: absolute;
  inset: 0;
  width: 1.1875rem;
  height: 1.1875rem;
  transition:
    opacity .28s cubic-bezier(.16,1,.3,1),
    transform .42s cubic-bezier(.16,1,.3,1);
}
.site-header .theme-icon-sun { opacity: 1; transform: rotate(0deg) scale(1); }
.site-header .theme-icon-moon { opacity: 0; transform: rotate(-55deg) scale(.55); }
:root[data-theme="dark"] .site-header .theme-icon-sun { opacity: 0; transform: rotate(55deg) scale(.55); }
:root[data-theme="dark"] .site-header .theme-icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }

.site-header .lang {
  display: inline-flex;
  padding: .1875rem;
  border: 1px solid var(--apple-glass-border);
  border-radius: var(--radius-pill);
  background: var(--apple-glass-bg-regular);
  box-shadow: inset 0 1px 0 var(--apple-glass-sheen), 0 2px 7px rgba(29,55,70,.06);
}
.site-header .lang a {
  min-width: 2.125rem;
  padding: var(--space-2) .5625rem;
  border-radius: var(--radius-pill);
  color: var(--muted);
  text-align: center;
  font-size: .6875rem;
  font-weight: 750;
}
.site-header .lang a[aria-current="page"] {
  color: #fff;
  background: var(--text);
  box-shadow: 0 3px 10px rgba(18,34,47,.19), inset 0 1px 0 rgba(255,255,255,.25);
}
.site-header .github-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: .3125rem .3125rem .3125rem .875rem;
  border: 1px solid var(--apple-glass-border);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(125deg, var(--apple-glass-sheen), transparent 66%),
    var(--apple-glass-bg-regular);
  box-shadow: 0 5px 18px rgba(29,55,70,.10), var(--apple-glass-inner-rim);
  font-size: .8125rem;
  font-weight: 650;
}
.site-header .github-mark { width: var(--space-3); height: var(--space-3); }
.site-header .github-cta b {
  width: 2.125rem;
  height: 2.125rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--text);
  font-size: var(--space-3);
}

@media (max-width:1050px){
 .site-header{border-radius:1.75rem}
 .site-header .nav{grid-template-columns:1fr auto;row-gap:.1875rem;padding-bottom:.5625rem}
 .site-header .nav-links{grid-column:1/-1;grid-row:2;justify-content:flex-start;width:100%;padding:.1875rem}
}
@media (max-width:760px){
 .site-header{top:.625rem;width:calc(100% - 1.25rem);border-radius:1.5rem}
 .site-header .nav{min-height:3.875rem;padding:.4375rem .5rem .5625rem .6875rem;row-gap:var(--space-1)}
 .site-header .brand img{width:2.125rem;height:2.125rem}
 .site-header .nav-links{margin-top:.125rem;padding-inline:.1875rem;scroll-padding-inline:34%}
 .site-header .nav-pill{padding:.5625rem .8125rem;font-size:.75rem}
 .site-header .theme-toggle{width:2.375rem;height:2.375rem;flex-basis:2.375rem}
 .site-header .theme-toggle-track,.site-header .theme-icon{width:1.0625rem;height:1.0625rem}
 .site-header .github-cta span,.site-header .github-mark{display:none}
 .site-header .github-cta{padding:var(--space-1);background:transparent;box-shadow:none}
 .site-header .lang a{min-width:1.875rem;padding:.4375rem}
}
.prompts-page #main{padding-top:clamp(110px,12vw,150px)}
.prompts-page .site-header .brand span{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.prompts-page .site-header .nav-links{scrollbar-width:none}
.prompts-page .site-header .nav-links a{white-space:nowrap}
.prompts-page .site-header .github-cta b{font-size:var(--space-3)}
@media(max-width:760px){.prompts-page #main{padding-top:132px}}
@media(max-width:430px){.prompts-page .site-header .brand span{display:none}}