:root {
  --bg-color: #f8edef !important;
  --secondary-color: #bd8295 !important;
  --text-primary: #3d3038 !important;
  --text-secondary: #6f5260 !important;
  --text-muted: #8d747e !important;
  --border-color: rgba(61, 48, 56, 0.14) !important;
  --site-surface: rgba(255, 250, 248, 0.72);
  --site-surface-strong: #fffaf8;
  --site-accent-strong: #a8657c;
  --site-shadow: rgba(123, 75, 93, 0.12);
  --site-radius: 14px;
  --site-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  background: var(--bg-color) !important;
}

body {
  background-color: var(--bg-color) !important;
  background-image:
    radial-gradient(circle at 88% 8%, rgba(189, 130, 149, 0.14), transparent 24rem),
    radial-gradient(circle at 8% 76%, rgba(165, 185, 165, 0.13), transparent 22rem) !important;
  color: var(--text-primary) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
  transition: color 220ms var(--site-ease), border-color 220ms var(--site-ease), opacity 220ms var(--site-ease) !important;
}

a:hover {
  color: var(--site-accent-strong) !important;
  border-color: var(--site-accent-strong) !important;
}

.navbar {
  background: rgba(248, 237, 239, 0.84) !important;
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px);
}

.navbar a,
.back-link {
  color: var(--text-muted) !important;
}

.navbar a:hover,
.back-link:hover {
  color: var(--site-accent-strong) !important;
}

.navbar a:not(.nav-name),
.back-link,
.links-row a,
.footer a {
  border-bottom: 1px solid transparent !important;
}

.navbar a:not(.nav-name):hover,
.back-link:hover,
.links-row a:hover,
.footer a:hover {
  border-bottom-color: rgba(168, 101, 124, 0.5) !important;
}

h1,
h2,
h3,
h4 {
  color: var(--text-primary) !important;
  text-shadow: none !important;
}

h1::after,
h2::after {
  color: var(--secondary-color) !important;
  text-shadow: none !important;
}

hr {
  border-color: var(--border-color) !important;
  background-color: var(--border-color) !important;
}

button,
.home-link,
.nav-button,
.github-link,
.download-button {
  background: transparent !important;
  border: 1px solid var(--secondary-color) !important;
  border-radius: 999px !important;
  color: var(--site-accent-strong) !important;
  box-shadow: none !important;
}

button:hover,
.home-link:hover,
.nav-button:hover,
.github-link:hover,
.download-button:hover {
  background: rgba(189, 130, 149, 0.14) !important;
  border-color: var(--site-accent-strong) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}

.project-card,
.pub-card,
.spec-card,
.diary-entry,
.approach-box,
.info-panel,
.pdf-window,
.pdf-fallback,
.media-box,
.code-block,
.popup {
  background: var(--site-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--site-radius) !important;
  box-shadow: 0 8px 24px rgba(123, 75, 93, 0.07) !important;
}

.project-card:hover,
.pub-card:hover,
.diary-entry:hover,
.approach-box:hover {
  box-shadow: 0 12px 28px rgba(123, 75, 93, 0.13) !important;
}

.project-card,
.pub-card,
.diary-entry,
.approach-box,
.info-panel,
.pdf-window,
.pdf-fallback,
.media-box,
.code-block,
.popup {
  transition: border-color 220ms var(--site-ease), background-color 220ms var(--site-ease), box-shadow 220ms var(--site-ease), transform 220ms var(--site-ease) !important;
}

.project-card:hover,
.pub-card:hover,
.diary-entry:hover,
.approach-box:hover {
  transform: translateY(-2px);
}

.project-card h2,
.project-title,
.spec-card h3,
.blog-title,
.log-title,
.venue,
.date,
.blog-date,
.log-date,
.week-info {
  color: var(--secondary-color) !important;
}

.project-card p,
.project-card li,
.project-details li,
.pub-authors,
.pub-abstract,
.diary-entry,
.log-content,
.authors,
.text-muted {
  color: var(--text-secondary) !important;
}

.project-card a,
.project-details a,
.pub-links a,
.pub-links button,
.spec-card li::before,
.current-approach li::before,
.new-approach li::before,
.entry-summary::after,
.entry-summary.active::after {
  color: var(--secondary-color) !important;
}

.project-date,
.project-tech,
.pub-venue,
.date,
.blog-date,
.log-date {
  color: var(--text-muted) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}

.project-tech {
  color: var(--text-secondary) !important;
  font-style: normal !important;
}

.pub-title,
.project-title {
  letter-spacing: -0.015em;
}

.timeline-connector,
.timeline-circle,
.status-indicator {
  background: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
  color: var(--site-surface-strong) !important;
}

.approach-header,
.progress-timeline,
.entry-details,
.log-entry {
  border-color: var(--border-color) !important;
}

pre,
.code-block,
.popup-code {
  background: rgba(61, 48, 56, 0.055) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

code,
.keyword,
.type,
.number {
  color: var(--site-accent-strong) !important;
}

input,
select,
textarea {
  background: rgba(255, 250, 248, 0.74) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(189, 130, 149, 0.35) !important;
  border-color: var(--secondary-color) !important;
}

img,
video,
iframe {
  border-color: var(--border-color) !important;
}

.error-code,
.badge {
  color: var(--secondary-color) !important;
}

.error-code {
  text-shadow: none !important;
}

.badge {
  background: rgba(189, 130, 149, 0.16) !important;
  border: 1px solid rgba(189, 130, 149, 0.36) !important;
  border-radius: 999px !important;
}

.meta-labels,
.struct-label,
.label-3d {
  color: rgba(111, 82, 96, 0.68) !important;
}

/* Quiet motion: enough to make the site feel considered, never busy. */
html {
  scroll-behavior: smooth;
}

@keyframes site-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  body > main,
  body > .main-container,
  body > .publications-section,
  body > .projects-section,
  body > .page-shell {
    animation: site-enter 520ms var(--site-ease) both;
  }

  .so100-drag-cue {
    animation: cue-breathe 2.8s ease-in-out infinite;
  }
}

@keyframes cue-breathe {
  0%,
  100% {
    opacity: 0.62;
  }
  50% {
    opacity: 0.82;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}