:root {
  --retro-green: #1c8f2f;
  --retro-dark: #0d3b19;
  --retro-yellow: #fff08a;
  --retro-yellow-deep: #f7df57;
  --panel-bg: #fff6cf;
  --panel-light: #fffbe8;
  --panel-shadow: #c7b26a;
  --accent-pink: #ff6bb5;
  --accent-blue: #2d5bff;
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Comic Sans MS", "Trebuchet MS", "Verdana", sans-serif;
  margin: 0;
  min-height: 100vh;
  background-color: var(--retro-green);
  background-image: radial-gradient(circle, rgba(255, 255, 190, 0.8) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px), radial-gradient(circle, rgba(255, 255, 190, 0.6) 0 1px, transparent 3px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.08));
  background-size:
    140px 140px,
    220px 220px,
    160px 160px,
    100% 100%;
  background-position:
    0 0,
    80px 40px,
    30px 100px,
    0 0;
  color: var(--retro-yellow);
  text-shadow: 1px 1px 0 rgba(13, 59, 25, 0.4);
}

a {
  color: var(--accent-blue);
}

h1,
h2,
h3 {
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  text-shadow: none;
  margin: 0 0 0.75rem;
}

.app-shell {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem clamp(1rem, 2vw, 2.5rem) 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hero {
  background: var(--panel-bg);
  padding: 1.75rem;
  border-radius: 0;
  border: 2px solid var(--panel-light);
  box-shadow:
    inset 2px 2px 0 #ffffff,
    inset -2px -2px 0 var(--panel-shadow),
    6px 6px 0 var(--retro-dark);
  color: #1d1d1d;
  text-shadow: none;
}

.eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 0.25rem;
  color: var(--accent-pink);
}

.lede {
  margin: 0.5rem 0 0;
  color: #2c2c2c;
  line-height: 1.5;
}

.panel {
  background: var(--panel-bg);
  border-radius: 0;
  border: 2px solid var(--panel-light);
  padding: 1.5rem;
  box-shadow:
    inset 2px 2px 0 #ffffff,
    inset -2px -2px 0 var(--panel-shadow),
    5px 5px 0 var(--retro-dark);
  color: #1d1d1d;
  text-shadow: none;
}

.notice-banner {
  padding: 2.25rem 1.25rem;
  text-align: center;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--retro-yellow-deep);
  text-shadow: 2px 2px 0 rgba(13, 59, 25, 0.55);
}

.notice-banner p {
  margin: 0;
  font-size: clamp(1.35rem, 3.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1.25;
}

.notice-banner a {
  color: var(--retro-yellow-deep);
  text-decoration: underline;
}

.notice-banner a:hover {
  color: var(--retro-yellow);
}

.gif-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 1rem;
}

.gif-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #fff4b6;
  border-radius: 0;
  border: 2px solid var(--panel-light);
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 var(--panel-shadow);
}

.publication-authors {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.5rem;
}

.author-block {
  white-space: nowrap;
}

.author-block a {
  color: var(--accent-blue);
  font-weight: 700;
  text-decoration: underline;
}

.publication-affiliations {
  margin-top: 0.35rem;
  text-align: center;
  color: #3b3120;
}

.action-buttons {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.btn,
.action-buttons a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 2px solid #1a2c5c;
  background: linear-gradient(180deg, #8ab0ff, #2d5bff);
  color: white;
  padding: 0.6rem 1rem;
  border-radius: 0;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow:
    inset 1px 1px 0 #cfe0ff,
    inset -1px -1px 0 #1c3f8f,
    3px 3px 0 var(--retro-dark);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  text-decoration: none;
}

.btn:hover,
.action-buttons a:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 1px 1px 0 #dfeaff,
    inset -1px -1px 0 #1c3f8f,
    4px 4px 0 var(--retro-dark);
}

.btn:active,
.action-buttons a:active {
  transform: translate(2px, 2px);
  box-shadow: inset 2px 2px 0 #1c3f8f;
}

pre {
  overflow: auto;
  background: #fff9dd;
  border: 2px solid #e7cf76;
  padding: 0.75rem;
  margin: 0.75rem 0 0;
}

.bibtex-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.copy-bibtex-btn {
  border: 2px solid #1a2c5c;
  background: linear-gradient(180deg, #8ab0ff, #2d5bff);
  color: white;
  padding: 0.55rem 0.85rem;
  border-radius: 0;
  cursor: pointer;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow:
    inset 1px 1px 0 #cfe0ff,
    inset -1px -1px 0 #1c3f8f,
    3px 3px 0 var(--retro-dark);
}

.copy-bibtex-btn.is-copied {
  border-color: #0b4f1f;
  background: linear-gradient(180deg, #62d48c, #0b9b3c);
}

.scroll-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  width: 44px;
  height: 44px;
  border-radius: 0;
  border: 2px solid #1a2c5c;
  background: linear-gradient(180deg, #8ab0ff, #2d5bff);
  color: white;
  box-shadow:
    inset 1px 1px 0 #cfe0ff,
    inset -1px -1px 0 #1c3f8f,
    3px 3px 0 var(--retro-dark);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.scroll-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.more-works-container {
  position: fixed;
  left: 1.25rem;
  top: 1.25rem;
  z-index: 60;
}

.more-works-btn {
  border: 2px solid var(--panel-light);
  background: var(--panel-bg);
  color: #1d1d1d;
  padding: 0.6rem 0.85rem;
  border-radius: 0;
  cursor: pointer;
  font-weight: 700;
  box-shadow:
    inset 2px 2px 0 #ffffff,
    inset -2px -2px 0 var(--panel-shadow),
    4px 4px 0 var(--retro-dark);
}

.more-works-dropdown {
  margin-top: 0.5rem;
  width: min(420px, calc(100vw - 2.5rem));
  background: var(--panel-bg);
  border-radius: 0;
  border: 2px solid var(--panel-light);
  box-shadow:
    inset 2px 2px 0 #ffffff,
    inset -2px -2px 0 var(--panel-shadow),
    4px 4px 0 var(--retro-dark);
  overflow: hidden;
  display: none;
}

.more-works-dropdown.is-open {
  display: block;
}

.dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.85rem;
  background: #fff4b6;
  border-bottom: 2px solid var(--panel-light);
}

.dropdown-header h4 {
  margin: 0;
  font-size: 1rem;
  color: #1d1d1d;
}

.close-btn {
  border: 2px solid #b91c1c;
  background: #ffd4d4;
  color: #7a1010;
  width: 32px;
  height: 32px;
  padding: 0;
  cursor: pointer;
  border-radius: 0;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #c07b7b;
}

.works-list {
  display: grid;
}

.work-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem;
  color: #1d1d1d;
  text-decoration: none;
  border-top: 2px solid var(--panel-light);
}

.work-item:hover {
  background: #fff4b6;
}

.work-info h5 {
  margin: 0 0 0.25rem;
  font-weight: 800;
}

.work-info p {
  margin: 0 0 0.25rem;
  color: #53441f;
  font-size: 0.95rem;
}

.work-venue {
  font-size: 0.85rem;
  color: #53441f;
}

.status-panel {
  background: var(--retro-dark);
  color: var(--retro-yellow);
  text-align: center;
  border: 2px solid #1f6d2c;
}

.status-panel a {
  color: var(--retro-yellow-deep);
}

@media (max-width: 600px) {
  .gif-grid {
    grid-template-columns: 1fr;
  }

  .action-buttons {
    justify-content: flex-start;
  }

  .more-works-container {
    left: 0.75rem;
    top: 0.75rem;
  }
}