/* ---------- Design tokens ---------- */
:root {
  --bg: #f6f7fb;
  --bg-top: #e4ebf8;
  --text: #1f2a44;
  --muted: #5f6d8a;
  --accent: #2f6fdb;
  --accent-2: #b04fe0;
  --card: #ffffff;
  --card-border: #dbe2ee;
  --dot: rgba(31, 42, 68, 0.11);
  --shadow: rgba(31, 45, 76, 0.10);
  --nav-bg: rgba(246, 247, 251, 0.78);
  --footer-bg: #eef1f7;
  --tag-bg: rgba(47, 111, 219, 0.10);
  --font: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
}
html[data-theme="dark"] {
  --bg: #171d2e;
  --bg-top: #243a56;
  --text: #e4e9f4;
  --muted: #9aa8c0;
  --accent: #66c2ff;
  --accent-2: #c79bff;
  --card: #1b2338;
  --card-border: #2d3a56;
  --dot: rgba(160, 178, 214, 0.16);
  --shadow: rgba(0, 0, 0, 0.36);
  --nav-bg: rgba(23, 29, 46, 0.78);
  --footer-bg: #121727;
  --tag-bg: rgba(102, 194, 255, 0.12);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 16px;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(var(--dot) 1px, transparent 1.3px),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 42%, var(--bg) 100%);
  background-size: 22px 22px, 100% min(92vh, 960px);
  background-repeat: repeat, no-repeat;
  background-position: 0 0, 0 0;
}
a { color: var(--accent); text-decoration: none; }
p { margin: 0 0 .75rem; }
ul, ol { margin: 0; padding-left: 1.15rem; }
li { margin: .3rem 0; }
strong { font-weight: 600; }
.skip-link { position: absolute; left: -999px; top: 0; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 2000; background: var(--card); padding: .5rem .8rem; border-radius: 8px; }

/* Animated underline for prose links */
.prose-link, .bio a, .panel-inner a:not(.card-btn), .updates a, .footer a {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size .22s ease, color .22s ease;
}
.bio a:hover, .panel-inner a:hover, .updates a:hover, .footer a:hover { background-size: 100% 1px; }

/* ---------- Navbar ---------- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--card-border);
}
.navbar-inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  height: 3.4rem;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar-avatar {
  width: 2.1rem; height: 2.1rem;
  padding: 0; border: 0; border-radius: 50%;
  overflow: hidden; cursor: pointer;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--card-border);
  transition: box-shadow .2s ease, transform .2s ease;
}
.navbar-avatar { background: linear-gradient(135deg, #5eb8ff, #6d7cff 55%, #b04fe0); }
.navbar-avatar img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 12%;
  transform: scale(1.4); transform-origin: 50% 32%;
}
.navbar-avatar:hover { box-shadow: 0 0 0 2px var(--accent); transform: translateY(-1px); }
.brand {
  position: absolute; left: 50%; transform: translateX(-50%);
  color: var(--text);
  font-size: 1.28rem;
  letter-spacing: .01em;
  white-space: nowrap;
}
.brand strong { font-weight: 600; }
.theme-toggle {
  width: 2.25rem; height: 2.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--text);
  font-size: 1.05rem; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.theme-toggle:hover { background: var(--tag-bg); color: var(--accent); }
.icon { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.theme-toggle .icon { display: none; }
html[data-theme="light"] .theme-toggle .icon[data-theme-icon="light"],
html[data-theme="dark"] .theme-toggle .icon[data-theme-icon="dark"] { display: inline-block; }

/* Theme change: crossfade the whole page (View Transitions API) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .55s; animation-timing-function: ease; }
/* Fallback for browsers without the View Transitions API */
html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after {
  transition: background-color .55s ease, color .55s ease, border-color .55s ease, box-shadow .55s ease, opacity .55s ease !important;
}
.ribbon {
  height: 3px;
  opacity: .9;
  background: linear-gradient(90deg,
    #66c2ff 0 8%, #f472b6 8% 14%, #a78bfa 14% 26%, #22d3ee 26% 32%, #66c2ff 32% 47%,
    #f9a8d4 47% 53%, #818cf8 53% 66%, #34d399 66% 71%, #66c2ff 71% 85%, #f472b6 85% 91%, #a78bfa 91% 100%);
}

/* ---------- Hero ---------- */
.hero {
  flex: 1 0 auto;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 7.4rem 1rem 3rem;
}
.identity {
  position: relative;
  height: 6.4rem;
  --hidden-offset: 2.1rem;
  --reveal-offset: 0.7rem;
}
.mascot {
  position: absolute;
  left: 50%; bottom: 0;
  width: 6.6rem; height: 6.6rem;
  padding: 0; border: 0;
  background: transparent; cursor: pointer;
  transform: translate(-50%, var(--hidden-offset));
  transition: transform .32s cubic-bezier(.2, .8, .2, 1);
  z-index: 1;
}
.mascot img {
  display: block; width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px var(--shadow));
}
.identity:hover .mascot, .identity.is-speaking .mascot { transform: translate(-50%, var(--reveal-offset)); }
.hello {
  position: absolute;
  left: 50%; bottom: calc(100% - 1.05rem);
  transform: translate(-50%, 8px) scale(.96);
  padding: .42rem .95rem;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font-size: 1.02rem;
  white-space: nowrap;
  box-shadow: 0 4px 14px var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 3;
}
.hello::before {
  content: "";
  position: absolute; left: 50%; top: 100%;
  width: .6rem; height: .6rem;
  border-right: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  background: var(--card);
  transform: translate(-50%, -50%) rotate(45deg);
}
.identity.is-speaking .hello { opacity: 1; transform: translate(-50%, 0) scale(1); }
.hello-text { display: inline-block; transition: opacity .18s ease; }
.hello-text.is-changing { opacity: 0; }

/* Prompt card */
.prompt {
  position: relative;
  z-index: 2;
  padding: 1.15rem 1.3rem 1rem;
  border: 1px solid var(--card-border);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 8px 30px var(--shadow);
}
.bio {
  margin: 0;
  font-size: 1.07rem;
  line-height: 1.74;
  min-height: 3.4em;
  transition: opacity .18s ease;
}
.bio.is-changing { opacity: 0; }
.caret {
  display: inline-block;
  width: .5em; height: 1.05em;
  margin-left: .12em;
  border-right: 2px solid var(--accent);
  vertical-align: -.18em;
  animation: caret .9s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.prompt-actions {
  --action-size: 2.25rem;
  display: flex; align-items: center; gap: .5rem;
  margin-top: .8rem;
}
.action-group { display: flex; align-items: center; gap: .35rem; margin-left: -.45rem; }
.action {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--action-size); height: var(--action-size);
  border-radius: 50%;
  color: var(--muted);
  font-size: 1.28rem;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.action:hover { background: var(--tag-bg); color: var(--accent); transform: translateY(-1px); }
.action .ai-google-scholar { font-size: 1.32em; }
.action-email { margin-right: -.45rem; }

/* Persona selector, styled like a model picker */
.model-select { position: relative; margin-left: auto; }
.model-select summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: .32rem;
  height: var(--action-size);
  padding: 0 1.7rem 0 .8rem;
  border-radius: 999px;
  color: var(--text);
  font-size: 1.02rem;
  cursor: pointer;
  position: relative;
  transition: background-color .18s ease, color .18s ease;
}
.model-select summary::-webkit-details-marker { display: none; }
.model-select summary::after {
  content: "";
  position: absolute; right: .8rem; top: 50%;
  width: .38rem; height: .38rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .18s ease;
}
.model-select[open] summary::after { transform: translateY(-20%) rotate(225deg); }
.model-select summary:hover, .model-select[open] summary { background: var(--tag-bg); color: var(--accent); }
.model-variant { font-weight: 600; }
.model-brand { color: var(--muted); }
.model-options {
  position: absolute; right: 0; bottom: calc(100% + .5rem);
  z-index: 10;
  display: grid; gap: .1rem;
  min-width: 10rem;
  padding: .36rem;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 18px 44px var(--shadow);
}
.model-options button {
  position: relative;
  display: flex; align-items: center;
  min-height: 2.2rem;
  padding: .4rem 1.9rem .4rem .7rem;
  border: 0; border-radius: 9px;
  background: transparent; color: var(--text);
  font: inherit; font-size: 1rem; text-align: left;
  cursor: pointer;
  transition: background-color .18s ease;
}
.model-options button:hover, .model-options button:focus-visible { background: var(--tag-bg); outline: 0; }
.model-options button[aria-selected="true"] { background: var(--tag-bg); color: var(--accent); }
.model-options button[aria-selected="true"]::after {
  content: "";
  position: absolute; right: .7rem; top: 50%;
  width: .62rem; height: .34rem;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-65%) rotate(-45deg);
}

/* Quick links */
.quick-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem;
  max-width: 560px;
  margin: 1.15rem auto 0;
}
.quick-link {
  display: flex; align-items: center; justify-content: center; gap: .42rem;
  min-height: 2.25rem;
  padding: .38rem .7rem;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  color: var(--text);
  font: inherit; font-size: .95rem;
  cursor: pointer;
  box-shadow: 0 2px 8px var(--shadow);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease;
}
.quick-link .icon { color: var(--accent); font-size: .95rem; }
.quick-link:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 12px var(--shadow); }
.quick-link.is-active {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), 0 4px 14px var(--shadow);
}

/* Panels */
.panel-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.2, .8, .2, 1);
}
.panel-wrap.open { grid-template-rows: 1fr; }
.panel { overflow: hidden; min-height: 0; }
.panel-inner {
  margin-top: .95rem;
  padding: 1.15rem 1.3rem 1.2rem;
  border: 1px solid var(--card-border);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 6px 22px var(--shadow);
  line-height: 1.62;
}
.panel h2, .updates h2 {
  display: flex; align-items: center; gap: .8rem;
  margin: 1.4rem 0 .8rem;
  font-size: .86rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.panel h2:first-child { margin-top: .1rem; }
.panel h2::before, .panel h2::after, .updates h2::before, .updates h2::after {
  content: ""; flex: 1 1 0; height: 1px;
}
.panel h2::before, .updates h2::before { background: linear-gradient(90deg, transparent, var(--card-border)); }
.panel h2::after, .updates h2::after { background: linear-gradient(90deg, var(--card-border), transparent); }
.entry { margin: 0 0 1.1rem; }
.entry:last-of-type { margin-bottom: .2rem; }
.entry h3, .card h3 { margin: 0 0 .15rem; font-size: 1.05rem; font-weight: 600; line-height: 1.4; }
.entry h3 a, .card h3 a { color: var(--text); }
.entry h3 a:hover, .card h3 a:hover { color: var(--accent); }
.light { color: var(--muted); font-weight: 400; }
.meta { margin: 0 0 .45rem; color: var(--muted); font-size: .94rem; }
.entry ul, .card ul { padding-left: 1.1rem; }
.entry li::marker, .card li::marker, .pubs li::marker { color: var(--accent); }
.compact { margin-bottom: .7rem; }
.skills { margin: 0; display: grid; gap: .3rem; }
.skills div { display: grid; grid-template-columns: 7.2rem 1fr; gap: .5rem; }
.skills dt { color: var(--muted); }
.skills dd { margin: 0; }

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.card {
  padding: .95rem 1.05rem .8rem;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 70%, var(--bg));
  transition: transform .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 55%, var(--card-border)); }
.card.wide { grid-column: 1 / -1; }
.card-icon { color: var(--muted); font-size: .85em; margin-left: .2rem; }
.stack { margin: 0 0 .5rem; color: var(--muted); font-size: .9rem; }
.tag {
  display: inline-block; vertical-align: middle;
  margin-left: .3rem; padding: .08rem .5rem;
  border-radius: 999px;
  background: var(--tag-bg); color: var(--accent);
  font-size: .74rem; font-weight: 400; letter-spacing: .02em;
}
.links { margin: .25rem 0 0; font-size: .94rem; }
.earlier { margin: 1rem 0 0; color: var(--muted); font-size: .95rem; }
.earlier a { color: var(--accent); }
.pubs { padding-left: 1.2rem; }
.pubs li { margin: 0 0 .9rem; }
.pub-title { margin: 0; font-weight: 600; }
.pub-title a { color: var(--text); }
.pub-title a:hover { color: var(--accent); }
.pub-authors, .pub-venue { margin: 0; color: var(--muted); font-size: .94rem; }
.oral { color: var(--accent-2); font-weight: 600; }

/* Updates */
.updates { margin-top: 2.4rem; }
.updates h2 { margin: 0 0 .6rem; }
.updates-list { list-style: none; padding: 0; margin: 0; }
.updates-list li {
  display: grid; grid-template-columns: 5.4rem 1fr; gap: .8rem;
  padding: .5rem 0;
  border-bottom: 1px dashed var(--card-border);
  line-height: 1.55;
}
.updates-list li:last-child { border-bottom: 0; }
.updates-list time { color: var(--accent); font-size: .92rem; padding-top: .08rem; }

/* Footer */
.footer {
  margin-top: 2rem;
  padding: 1.1rem 1rem;
  text-align: center;
  font-size: .9rem;
  color: var(--muted);
  background: var(--footer-bg);
  border-top: 1px solid var(--card-border);
}
.footer p { margin: 0; }

/* Sparkles */
.niji-star {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  transform: translate(-50%, -50%);
  line-height: 1;
  text-shadow: 0 0 6px currentColor;
}

/* Reveal on load */
.reveal { opacity: 0; transform: translateY(10px); animation: rise .6s ease forwards; animation-delay: var(--delay, 0ms); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .hero { padding-top: 6.4rem; }
  .brand { font-size: 1.18rem; }
  .bio { font-size: 1.02rem; line-height: 1.7; }
  .prompt { padding: 1rem 1.05rem .9rem; }
  .model-select summary { padding-left: .6rem; }
  .quick-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards { grid-template-columns: 1fr; }
  .skills div { grid-template-columns: 1fr; gap: 0; }
  .updates-list li { grid-template-columns: 1fr; gap: .1rem; }
  .panel-inner { padding: 1rem 1.05rem; }
}

@media (max-width: 440px) {
  .prompt-actions { flex-wrap: wrap; row-gap: .2rem; }
  .action-email { margin-left: auto; }
  .model-select { order: 3; flex-basis: 100%; margin-left: -.6rem; margin-top: .1rem; }
  .model-options { left: 0; right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { animation: none; opacity: 1; transform: none; }
  .caret { animation: none; }
  .panel-wrap, .mascot, .hello, .quick-link, .card, .action { transition: none; }
}