:root {
  --bg-void: #030304;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-heading: 'Space Grotesk', 'Inter', sans-serif;

  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-600: #52525b;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

::selection {
  background-color: #ffffff;
  color: #000000;
}

body {
  background:
    radial-gradient(ellipse 44% 34% at 50% 42%, rgba(91, 62, 157, 0.16), transparent 100%),
    radial-gradient(ellipse 30% 38% at 90% 7%, rgba(67, 46, 119, 0.1), transparent 100%),
    var(--bg-void);
  color: var(--zinc-200);
  font-family: var(--font-sans);
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.entry-pending,
html.entry-pending body {
  height: 100dvh;
  overflow: hidden;
}

.preview-banner {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 10px 18px;
  background: #16111f;
  border-bottom: 1px solid rgba(193, 159, 255, 0.35);
  color: #eee6ff;
  font: 11px var(--font-mono);
  letter-spacing: .04em;
  text-align: center;
}
.preview-banner[hidden] { display: none; }
.preview-banner button {
  border: 1px solid rgba(193, 159, 255, 0.5);
  border-radius: 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  cursor: pointer;
}

.min-h-screen { min-height: 100vh; min-height: 100dvh; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.max-w-5xl { max-width: 64rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-lg { max-width: 32rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }

.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-4 { padding-top: 1rem; }
.pl-1 { padding-left: 0.25rem; }

.mt-1 { margin-top: 0.25rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-5 { margin-top: 1.25rem; }

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-stretch { align-items: stretch; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.self-stretch { align-self: stretch; }
.flex-1 { flex: 1 1 0%; }
.shrink-0 { flex-shrink: 0; }
.min-w-0 { min-width: 0; }

.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3 { gap: 0.75rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

.fixed { position: fixed; }
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { inset: 0; }
.inset-x-6 { left: 1.5rem; right: 1.5rem; }
.inset-x-8 { left: 2rem; right: 2rem; }
.inset-x-10 { left: 2.5rem; right: 2.5rem; }
.-inset-1 { inset: -0.25rem; }
.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.right-0 { right: 0; }

.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }

.w-1\.5 { width: 0.375rem; }
.h-1\.5 { height: 0.375rem; }
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.w-8 { width: 2rem; }
.w-12 { width: 3rem; }
.w-24 { width: 6rem; }
.h-24 { height: 6rem; }
.w-80 { width: 20rem; }
.h-\[1px\] { height: 1px; }

.pointer-events-none { pointer-events: none; }
.overflow-hidden { overflow: hidden; }
.hidden { display: none; }

.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); }
.font-heading { font-family: var(--font-heading); }

.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }

.font-light { font-weight: 300; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.tracking-tight { letter-spacing: -0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.tracking-\[0\.25em\] { letter-spacing: 0.25em; }
.tracking-\[0\.4em\] { letter-spacing: 0.4em; }

.uppercase { text-transform: uppercase; }
.text-center { text-align: center; }
.break-words { word-break: break-word; }
.leading-relaxed { line-height: 1.625; }
.leading-snug { line-height: 1.375; }
.leading-none { line-height: 1; }

.text-white { color: #ffffff; }
.text-zinc-200 { color: var(--zinc-200); }
.text-zinc-300 { color: var(--zinc-300); }
.text-zinc-400 { color: var(--zinc-400); }
.text-zinc-500 { color: var(--zinc-500); }
.text-zinc-600 { color: var(--zinc-600); }

.bg-void { background-color: var(--bg-void); }
.bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/15 { background-color: rgba(255, 255, 255, 0.15); }
.bg-zinc-900\/60 { background-color: rgba(24, 24, 27, 0.6); }

.border { border-width: 1px; border-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
.border-white\/15 { border-color: rgba(255, 255, 255, 0.15); }
.border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }

.rounded-md { border-radius: 0.375rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }

.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5); }
.blur-md { filter: blur(12px); }
.grayscale { filter: grayscale(100%); }
.contrast-125 { filter: contrast(125%); }
.object-cover { object-fit: cover; }
.opacity-20 { opacity: 0.2; }

.bg-gradient-to-r { background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.25), transparent); }
.bg-gradient-to-r.via-white\/30 { background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent); }
.bg-gradient-to-r.via-white\/25 { background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.25), transparent); }

.transition-all { transition-property: all; }
.transition-transform { transition-property: transform; }
.transition-opacity { transition-property: opacity; }
.transition-colors { transition-property: color, background-color, border-color; }
.duration-500 { transition-duration: 500ms; }
.duration-700 { transition-duration: 700ms; }
.duration-800 { transition-duration: 800ms; }


@media (min-width: 640px) {
  .sm\:p-8 { padding: 2rem; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:items-start { align-items: flex-start; }
  .sm\:justify-start { justify-content: flex-start; }
  .sm\:text-left { text-align: left; }
  .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .sm\:w-28 { width: 7rem; }
  .sm\:h-28 { height: 7rem; }
  .sm\:block { display: block; }
}

@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
  .md\:items-center { align-items: center; }
  .md\:justify-end { justify-content: flex-end; }
  .md\:self-center { align-self: center; }
  .md\:pt-0 { padding-top: 0; }
  .md\:border-t-0 { border-top-width: 0; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:col-span-8 { grid-column: span 8 / span 8; }
  .lg\:col-span-4 { grid-column: span 4 / span 4; }
}

.apple-glass {
  background:
    radial-gradient(ellipse 85% 110% at 0% 0%, rgba(130, 106, 187, 0.12), transparent 75%),
    linear-gradient(145deg, rgba(30, 27, 44, 0.68), rgba(15, 14, 27, 0.66) 55%, rgba(25, 19, 39, 0.62));
  backdrop-filter: blur(30px) saturate(135%);
  -webkit-backdrop-filter: blur(30px) saturate(135%);
  border: 1px solid rgba(216, 196, 255, 0.19);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(196, 167, 255, 0.05),
    0 24px 68px rgba(0, 0, 0, 0.4),
    0 0 52px rgba(130, 93, 210, 0.07);
  transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.apple-glass:hover {
  border-color: rgba(224, 205, 255, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 30px 78px rgba(0, 0, 0, 0.48),
    0 0 60px rgba(130, 93, 210, 0.12);
  transform: translateY(-3px);
}

.apple-glass-subtle {
  background: rgba(10, 10, 12, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
}

.fill-current { fill: currentColor; }
.stroke-current { stroke: currentColor; }

#loader {
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

#loader.dismissed {
  opacity: 0;
  filter: blur(14px);
  pointer-events: none !important;
}

@keyframes loaderPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.96); }
  50% { opacity: 0.9; transform: scale(1.04); }
}

@keyframes barSlide {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(30%); }
  100% { transform: translateX(100%); }
}

.loader-pulse-glow {
  position: absolute;
  inset: -14px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 70%);
  filter: blur(12px);
  animation: loaderPulse 2.6s ease-in-out infinite;
  pointer-events: none;
}

.loader-bar-slide {
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
  animation: barSlide 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.social-link-btn {
  position: relative;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.875rem;
  background: rgba(222, 205, 255, 0.08);
  border: 1px solid rgba(222, 205, 255, 0.19);
  color: #ffffff !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}

.social-link-btn svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: #ffffff !important;
  color: #ffffff !important;
}

.social-link-btn svg.stroke-current,
.social-link-btn svg[fill="none"] {
  fill: none !important;
  stroke: #ffffff !important;
}

.social-link-btn:hover {
  background: rgba(204, 175, 255, 0.18);
  border-color: rgba(225, 208, 255, 0.6);
  transform: none !important;
  box-shadow: 0 0 20px rgba(154, 112, 232, 0.27);
}

.social-link-btn:active {
  transform: none !important;
  background: rgba(255, 255, 255, 0.18);
}

.copy-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 4px 8px;
  background: #18181b;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.copy-tooltip.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.btn-glass {
  position: relative;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.15rem;
  border-radius: 0.875rem;
  background: rgba(219, 199, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(219, 199, 255, 0.19);
  color: #e4e4e7;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: pointer !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}

.btn-glass:hover {
  background: rgba(219, 199, 255, 0.14);
  color: #ffffff;
  border-color: rgba(219, 199, 255, 0.5);
  transform: none !important;
  box-shadow: 0 0 20px rgba(154, 112, 232, 0.2);
}

.btn-glass:active {
  transform: none !important;
  background: rgba(255, 255, 255, 0.15);
}

.btn-primary {
  position: relative;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  border-radius: 0.875rem;
  background: linear-gradient(125deg, #f4ecff, #d9c7ff 68%, #c4d4ff);
  color: #1c1429;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  text-decoration: none;
  box-shadow: 0 0 24px rgba(189, 154, 255, 0.22);
}

.btn-primary:hover {
  background: linear-gradient(125deg, #fff, #e5d8ff 68%, #d6e1ff);
  color: #1c1429;
  transform: none !important;
  box-shadow: 0 0 30px rgba(189, 154, 255, 0.4);
}

.apple-glass :focus-visible {
  outline: 2px solid #d8c0ff;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .apple-glass, .reveal-item {
    animation: none !important;
    transition: none !important;
  }
  .apple-glass:hover { transform: none; }
}

body {
  background: #030304;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 48% 38% at 50% 42%, rgba(210,210,220,.045), transparent);
}
.apple-glass, .apple-glass:hover {
  isolation: isolate;
  background: rgba(255,255,255,.035);
  backdrop-filter: blur(3px) saturate(115%);
  -webkit-backdrop-filter: blur(3px) saturate(115%);
  border: 1px solid rgba(255,255,255,.085);
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
  transform: none;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
.apple-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, #ffffff30 0%, #ffffff0a 35%, transparent 70%);
  background-size: var(--light-span, 1024px) 100%;
  background-position: var(--light-offset, 0px) 0;
  background-repeat: no-repeat;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.apple-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffffff0c 0%, #ffffff03 35%, transparent 70%);
  background-size: var(--light-span, 1024px) 100%;
  background-position: var(--light-offset, 0px) 0;
  background-repeat: no-repeat;
  mask-image: linear-gradient(to bottom, #fff, #ffffff70);
  box-shadow: none;
  pointer-events: none;
}
.apple-glass-subtle {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-color: rgba(255,255,255,.17);
}
.social-link-btn, .btn-glass {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
  color: #f1f1f2;
  transform: none !important;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn-primary {
  background: #f2f2f3;
  border-color: #f2f2f3;
  box-shadow: 0 0 23px rgba(255,255,255,.14);
  color: #101011;
  transform: none !important;
  transition: background-color .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
  .social-link-btn:hover, .btn-glass:hover {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.24);
    box-shadow: none;
    color: #fff;
  }
  .btn-primary:hover {
    background: #fff;
    border-color: #fff;
    box-shadow: 0 0 29px rgba(255,255,255,.24);
    color: #101011;
  }
}
.apple-glass :focus-visible, #enter-site:focus-visible, .audio-toggle:focus-visible, .footer-contact:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.site-footer { display: flex; align-items: center; justify-content: center; gap: 9px; }
.footer-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #85858f;
  transition: color .2s ease, background-color .2s ease;
}
.footer-contact svg { width: 15px; height: 15px; }
.audio-toggle {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.19);
  border-radius: 11px;
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 4px 16px rgba(0,0,0,.2);
  color: #a1a1aa;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.audio-toggle[hidden], html.entry-pending .audio-toggle { display: none; }
.audio-toggle svg { width: 16px; height: 16px; }
.audio-toggle .audio-on, .audio-toggle[data-active="true"] .audio-off { display: none; }
.research-link {
  position: fixed;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.19);
  border-radius: 11px;
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #a1a1aa;
  font: 11px 'JetBrains Mono', monospace;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}
.research-link svg { width: 16px; height: 16px; }
.research-link { width: 36px; height: 36px; padding: 0; justify-content: center; }
.research-link:hover { color: #fff; background: rgba(255,255,255,.12); }
.research-link:focus-visible { outline: 2px solid #c4c4cc; outline-offset: 4px; }
html.entry-pending .research-link { display: none; }
@media (pointer: coarse) { .research-link { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .research-link { transition: none; } }
.audio-toggle[data-active="true"] .audio-on { display: inline; }
@media (hover: hover) {
  .footer-contact:hover { color: #fff; background: rgba(255,255,255,.06); }
  .audio-toggle:hover { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); }
}
@media (pointer: coarse) {
  .audio-toggle::before { content: ''; position: absolute; inset: -5px; }
}
@media (prefers-reduced-motion: reduce) {
  .audio-toggle, .footer-contact { transition: none; }
}

.entry-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2,2,3,.17);
  text-align: center;
  transition: opacity 650ms ease, filter 650ms ease;
}
.entry-screen[hidden] { display: none; }
.entry-screen.dismissed { opacity: 0; filter: blur(12px); pointer-events: none; }
#enter-site {
  min-width: 132px;
  padding: 15px 28px;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 12px 38px rgba(0,0,0,.35);
  color: #fff;
  font: 600 13px var(--font-mono);
  letter-spacing: .08em;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
  #enter-site:hover {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.78);
    box-shadow: inset 0 1px rgba(255,255,255,.26), 0 16px 42px rgba(0,0,0,.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .entry-screen, #enter-site, .social-link-btn, .btn-glass, .btn-primary { transition: none; }
}

.btn-primary:active {
  transform: none !important;
  background: #e4e4e7;
}

#site-content {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 850ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

#site-content.site-visible {
  opacity: 1;
  transform: none;
}

.page-loading {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.page-loading[hidden] { display: none; }
.page-loading.dismissed { opacity: 0; }
.loading-wordmark {
  color: rgba(255,255,255,.65);
  font: 500 11px var(--font-mono);
  letter-spacing: .32em;
  padding-left: .32em;
}
.loading-track {
  width: 64px;
  height: 1px;
  overflow: hidden;
  background: rgba(255,255,255,.1);
}
.loading-track::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  animation: loadingSweep 1.6s ease-in-out infinite;
}
@keyframes loadingSweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  #site-content { transform: none; transition: none; }
  .page-loading { transition: none; }
  .loading-track::after { animation: none; }
}


a[data-track^='click_project_'] { min-height: 32px; padding: .45rem .8rem; gap: .375rem; border-radius: .625rem; font-size: .6875rem; line-height: 1rem; }
a[data-track^='click_project_'] svg { width: .875rem; height: .875rem; }

html { overscroll-behavior-y: none; }
#starfield { height: 100lvh; }
.return-visit .entry-screen { display: none; }
.return-visit .page-loading { transition: opacity 160ms ease; }
.return-visit #site-content {
  transform: translateY(6px);
  transition: opacity 400ms cubic-bezier(.22,1,.36,1), transform 400ms cubic-bezier(.22,1,.36,1);
}
.return-visit #site-content.site-visible { transform: none; }
.footer-policies {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
  margin-left: 8px; padding: 4px 8px; border-radius: 8px;
  color: #aaaab4; text-decoration: none; font: 11px var(--font-sans);
  transition: color 180ms ease, background-color 180ms ease;
}
.footer-policies svg { width: 14px; height: 14px; }
.apple-glass:focus-within { border-color: rgba(255,255,255,.16); }
@media(hover:hover) {
  .apple-glass:hover { border-color: rgba(255,255,255,.14); box-shadow: 0 14px 40px rgba(0,0,0,.22); }
  .social-link-btn svg { transition: transform 180ms ease; }
  .social-link-btn:hover svg { transform: translateY(-1px); }
}
.footer-policies:hover { color: #fff; background: rgba(255,255,255,.06); }
.footer-policies:focus-visible { outline: 2px solid #d8c0ff; outline-offset: 3px; }
@view-transition { navigation: auto; }
::view-transition { pointer-events: none; }
::view-transition-old(root) { animation: scene-out 120ms ease both; }
::view-transition-new(root) { animation: scene-in 180ms ease both; }
@keyframes scene-out { to { opacity: 0; } }
@keyframes scene-in { from { opacity: 0; } }
@media(prefers-reduced-motion: reduce) {
  .return-visit #site-content, .return-visit .page-loading, .footer-policies { transition: none; }
  .return-visit #site-content { transform: none; }
  .apple-glass, .social-link-btn svg { transition: none; }
  .social-link-btn:hover svg { transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* store buttons */
.store-links { display: inline-flex; flex-wrap: wrap; gap: .75rem; }
.store-links svg { width: .875rem; height: .875rem; flex: none; }

/* entry */
.entry-stack { display: flex; flex-direction: column; align-items: center; gap: 22px; transition: opacity 260ms ease, transform 420ms cubic-bezier(.55,0,.75,.2), filter 420ms ease; }
.entry-wordmark {
  color: rgba(255,255,255,.72);
  font: 500 11px var(--font-mono);
  letter-spacing: .42em;
  padding-left: .42em;
  animation: entry-in 900ms cubic-bezier(.16,1,.3,1) both;
}
#enter-site { animation: entry-in 900ms 120ms cubic-bezier(.16,1,.3,1) both; }
.entry-screen.warping { background: transparent; transition: background-color 300ms ease; }
.entry-screen.warping .entry-stack { opacity: 0; transform: scale(.94); filter: blur(6px); }
#starfield { transition: transform 520ms cubic-bezier(.55,0,.2,1); transform-origin: 50% 50%; }
html.warp #starfield { transform: scale(1.06); }
@keyframes entry-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* card stagger */
#site-content .reveal-item { opacity: 0; }
#site-content.site-visible .reveal-item { animation: card-in 720ms cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
@keyframes card-in { from { opacity: 0; translate: 0 14px; scale: .99; } to { opacity: 1; translate: none; scale: none; } }

/* status caret */
.status-pending { color: transparent; }
.status-caret {
  display: inline-block;
  width: .42ch;
  height: .82em;
  margin-left: .08em;
  vertical-align: -.04em;
  border-radius: 1px;
  background: #c9b4e3;
  font-family: var(--font-mono);
  animation: caret-blink 1.05s steps(1) infinite;
}
.status-caret.is-typing { animation: none; }
@keyframes caret-blink { 50% { opacity: 0; } }

/* avatar ring */
@property --ring-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.avatar-ring {
  position: absolute;
  inset: -4px;
  z-index: 11;
  border-radius: calc(1rem + 4px);
  padding: 1px;
  background: conic-gradient(from var(--ring-a), transparent 0deg, rgba(201,180,227,.08) 60deg, rgba(201,180,227,.7) 150deg, rgba(255,255,255,.85) 178deg, rgba(201,180,227,.12) 230deg, transparent 300deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: .75;
  pointer-events: none;
  animation: ring-spin 14s linear infinite;
}
@keyframes ring-spin { to { --ring-a: 360deg; } }

/* meteors */
.meteor-layer { position: fixed; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; }

/* footer */
.site-footer { color: #8b8b96; }
.footer-contact { color: #9c9ca8; }
.footer-policies { color: #b4b4be; }

@media (prefers-reduced-motion: reduce) {
  .entry-stack, .entry-wordmark, #enter-site, #starfield { animation: none; transition: none; }
  html.warp #starfield { transform: none; }
  #site-content .reveal-item { opacity: 1; }
  .status-caret, .avatar-ring { animation: none; }
}

/* readable labels */
.project-badge { display: inline-flex; align-items: center; padding: 5px 11px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font: 500 12px/1 var(--font-sans); }
.site-footer, .footer-policies { font: 400 12.5px/1.6 var(--font-sans); }
.btn-glass, a[data-track^='click_project_'], .store-links a[data-track] { font: 500 13px/1 var(--font-sans); }
.loading-wordmark, .entry-wordmark { font: 600 17px/1 var(--font-heading); letter-spacing: -.01em; padding-left: 0; color: rgba(255,255,255,.82); }
#enter-site { font: 600 14px/1 var(--font-sans); letter-spacing: 0; }

/* home layout */
#site-content.home { position: relative; z-index: 10; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.home-main { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; flex: 1; }

/* hero */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(64px, 13vh, 150px) 0 clamp(72px, 12vh, 128px); }
.avatar-stage { position: relative; width: 168px; height: 168px; margin-bottom: 34px; --energy: 0; }
.avatar-img { position: relative; z-index: 2; display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: grayscale(100%) contrast(125%); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 20px 60px rgba(0,0,0,.55); cursor: default; user-select: none; -webkit-user-drag: none; }
.avatar-glow { position: absolute; inset: -60%; z-index: 0; border-radius: 50%; background: radial-gradient(circle, rgba(150,110,230,.34) 0%, rgba(110,76,190,.14) 38%, transparent 68%); filter: blur(10px); opacity: calc(.75 + var(--energy) * .5); scale: calc(1 + var(--energy) * .12); pointer-events: none; }
.avatar-viz { position: absolute; inset: -72px; z-index: 1; width: calc(100% + 144px); height: calc(100% + 144px); pointer-events: none; }
.avatar-stage .avatar-ring { inset: -7px; z-index: 3; border-radius: 50%; padding: 1.5px; opacity: .9; transition: opacity .6s ease; }
.avatar-stage.is-playing .avatar-ring { opacity: .35; }

@property --drift { syntax: '<number>'; inherits: true; initial-value: 0; }
.hero-name { margin: 0; font: 650 clamp(68px, 11vw, 136px)/.95 var(--font-heading); letter-spacing: -.055em; animation: name-drift 18s ease-in-out infinite alternate; cursor: default; }
.name-letter { display: inline-block; background: linear-gradient(100deg, #f4effb 0%, #ece3ff 20%, #c9b4e3 44%, #ab92da 62%, #ece3ff 82%, #f4effb 100%); background-size: calc(var(--name-w, 4em) * 2.4) 100%; background-position: calc(var(--drift) * var(--name-w, 4em) * -1.4 - var(--x, 0px)) 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-bottom: .06em; }
.hero-name:hover .name-letter { animation: name-wave 900ms cubic-bezier(.3,.7,.3,1) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes name-drift { to { --drift: 1; } }
@keyframes name-wave { 0%, 100% { translate: 0 0; } 35% { translate: 0 -.12em; } 65% { translate: 0 .03em; } }

.hero-tagline { margin: 18px 0 0; font: 400 clamp(18px, 2vw, 21px)/1.5 var(--font-sans); color: #d6d1de; }
.hero-status { display: inline-flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: 4px 12px; max-width: 640px; margin: 26px 0 0; padding: 10px 18px; border: 1px solid rgba(216,196,255,.16); border-radius: 999px; background: rgba(216,196,255,.05); }
.status-text { font: 600 clamp(17px, 2vw, 20px)/1.35 var(--font-heading); color: #fff; letter-spacing: -.01em; word-break: break-word; }
.hero-bio { max-width: 520px; margin: 18px 0 0; font: 400 16px/1.65 var(--font-sans); color: #a8a3b2; }
.hero-bio[hidden] { display: none; }
.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.social-pill { position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px 0 15px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.07); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #f1f1f2; font: 500 14.5px/1 var(--font-sans); text-decoration: none; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.social-pill svg { width: 17px; height: 17px; }
.social-pill:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (hover: hover) {
  .social-pill:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); box-shadow: 0 0 24px rgba(180,150,240,.18); }
}

/* bento */
.home-section { padding-bottom: 24px; }
.home-kicker { margin: 0 0 20px 4px; font: 600 15px/1.4 var(--font-sans); color: #c9b4e3; letter-spacing: 0; }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 16px; }
.tile { position: relative; overflow: hidden; border-radius: 26px; padding: 28px; color: inherit; text-decoration: none; }
.bento .tile-feature { --sh-tilt: 0; grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; padding: 34px 34px 0; background: radial-gradient(ellipse 70% 60% at 85% 100%, rgba(140,100,220,.16), transparent 70%), rgba(255,255,255,.035); }
.bento .tile-small { --sh-tilt: .8; display: flex; flex-direction: column; min-height: 230px; }
.feature-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font: 400 13.5px/1.4 var(--font-sans); color: #a7a0b3; }
.feature-version { font-family: var(--font-mono); font-size: 13px; color: #cfc8da; }
.feature-title { margin: 18px 0 8px; font: 600 clamp(30px, 3.6vw, 42px)/1.05 var(--font-heading); letter-spacing: -.035em; color: #fff; }
.feature-text { max-width: 520px; margin: 0; font: 400 16px/1.6 var(--font-sans); color: #b4aebf; }
.feature-tech { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.feature-tech span { padding: 4px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.05); font: 12.5px var(--font-mono); color: #d4d4d8; }
.feature-stats { display: flex; flex-wrap: wrap; gap: 14px 44px; margin-top: 26px; }
.feature-stats strong { display: block; font: 600 clamp(34px, 4vw, 46px)/1 var(--font-heading); letter-spacing: -.045em; color: #fff; font-variant-numeric: tabular-nums; }
.feature-stats span { display: block; margin-top: 8px; font: 400 13.5px/1.4 var(--font-sans); color: #a7a0b3; }
.feature-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.feature-actions .btn-glass { min-height: 40px; padding: 0 15px; gap: 8px; border-radius: 12px; font: 500 14px/1 var(--font-sans); }
.feature-actions .icon, .feature-actions svg { display: inline-flex; width: 16px; height: 16px; }
.feature-shot { position: relative; margin: 30px -8px 0 auto; width: 92%; perspective: 1200px; }
.feature-shot img { display: block; width: 100%; height: auto; border: 1px solid rgba(255,255,255,.14); border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -10px 60px rgba(120,80,210,.22), 0 30px 60px rgba(0,0,0,.5); transform: rotateX(8deg) rotateY(-6deg) translateY(10px); transform-origin: 50% 100%; transition: transform 900ms cubic-bezier(.16,1,.3,1); }
@media (hover: hover) { .tile-feature:hover .feature-shot img { transform: rotateX(2deg) rotateY(-2deg) translateY(0); } }

.tile-small .icon { display: inline-flex; color: #d6c3f0; }
.tile-small .icon svg { width: 30px; height: 30px; }
.tile-research .icon svg { width: 120px; height: 64px; }
.tile-research .bar { fill: rgba(201,180,227,.35); transform-box: fill-box; transform-origin: 50% 100%; transition: transform 600ms cubic-bezier(.16,1,.3,1), fill .3s ease; }
.tile-research .bar.is-top { fill: #d8c4ff; }
.tile-research:hover .bar { transform: scaleY(1.12); fill: rgba(216,196,255,.6); }
.tile-research:hover .bar.is-top { fill: #fff; }
.tile-small h3 { margin: 18px 0 6px; font: 600 23px/1.15 var(--font-heading); letter-spacing: -.025em; color: #fff; }
.tile-small p { margin: 0; font: 400 15px/1.55 var(--font-sans); color: #aea8b9; }
.tile-go { margin-top: auto; padding-top: 18px; font: 500 14px/1 var(--font-sans); color: #d6c3f0; transition: color .2s ease, translate .3s ease; }
.tile-small:hover .tile-go { color: #fff; translate: 4px 0; }
.tile-small:focus-visible { outline: 2px solid #d8c0ff; outline-offset: 3px; }

/* footer */
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; padding: 48px 24px 34px; font: 400 13.5px/1.6 var(--font-sans); color: #8b8b96; }
.footer-policies { min-height: 32px; margin: 0; padding: 4px 8px; font: inherit; }


@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento .tile-feature { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 600px) {
  .home-main { padding: 0 16px; }
  .hero { padding: 72px 0 72px; }
  .avatar-stage { width: 132px; height: 132px; margin-bottom: 28px; }
  .hero-name { font-size: 68px; }
  .hero-status { border-radius: 20px; padding: 10px 16px; }
  .bento { grid-template-columns: 1fr; gap: 12px; }
  .tile { padding: 24px; }
  .bento .tile-feature { padding: 26px 22px 0; }
  .bento .tile-small { min-height: 0; }
  .feature-actions .btn-glass { flex: 1 1 calc(50% - 5px); justify-content: center; min-height: 44px; }
  .feature-shot { width: 100%; margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-name { animation: none; }
  .hero-name:hover .name-letter { animation: none; }
  .feature-shot img, .tile-research .bar, .tile-go, .social-pill, .avatar-stage .avatar-ring { transition: none; }
  .feature-shot img { transform: none; }
  .tile-small:hover .tile-go { translate: none; }
  .avatar-viz { display: none; }
}