/* ========== FOOTER SOCIAL ICONS ========== */

.footer-social {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}
.footer-social .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--accent);
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  margin-left: 0.1rem;
  margin-right: 0.1rem;
  box-shadow: none;
}
.footer-social .social-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: fill 0.18s;
}
.footer-social .social-icon:hover {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(52,121,247,0.10);
}
@media (max-width: 640px) {
  .footer-social {
    gap: 0.2rem;
  }
  .footer-social .social-icon {
    width: 2rem;
    height: 2rem;
    margin-left: 0.05rem;
    margin-right: 0.05rem;
  }
  .footer-social .social-icon svg {
    width: 16px;
    height: 16px;
  }
}

/* ========== CSS RESET (subset) ========== */
/* Minimal reset for consistent cross-browser rendering */
* { box-sizing: border-box; } /* Include padding/border in width calculations */
html, body { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; } /* Prevent images from overflowing containers */
a {
  color: var(--accent);
  text-decoration-thickness: .1rem;
  text-underline-offset: .2rem;
} /* Consistent link underlines */
a:visited { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Visible focus indicators for keyboard nav */
/* Skip link for accessibility - hidden off-screen until focused */
.skip-link { position: absolute; left: -9999px; top: auto; }
.skip-link:focus { left: 12px; top: 12px; background: var(--surface-2); padding: .5rem .75rem; border-radius: .5rem; }

/* ========== THEME ========== */
/* CSS custom properties for theme system - all colors defined as variables
   for easy theme switching. Light mode is the default. */
:root {
  --bg: #ffffff;         /* Page background */
  --text: #1f2937;       /* Body text color */
  --muted: #e5e7eb;      /* Borders, subtle UI elements */
  --surface-1: #ffffff;  /* Card backgrounds, primary surfaces */
  --surface-2: #f3f4f6;  /* Hover states, secondary surfaces */
  --accent: #3479F7;     /* Primary blue for light mode (R:52 G:121 B:247) - links, highlights */
  --accent-2: #3479F7;   /* Secondary accent (currently same as primary) */
  --link: #603FEF;       /* Link color (purple) */
  --brand-title: #1f2937; /* Site title color for light theme */
  --nav-sep: #e5e7eb;    /* Navigation separator lines */
  --shadow: 0 1px 1px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06); /* Subtle shadows for cards */
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* System-first sans stack */
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace; /* Crisp mono stack */
}

/* Default to user's OS preference for dark mode
   If user's OS is set to dark mode, use these colors by default */
@media (prefers-color-scheme: dark) {
  :root{
    --bg:#0f1216;        /* Dark background */
    --text:#e5e7eb;      /* Light text */
    --muted:#27303a;     /* Darker borders */
    --surface-1:#14181d; /* Slightly lighter than background */
    --surface-2:#1a1f25; /* Even lighter for hover states */
    --accent:#51ABF2;      /* Lighter blue for dark mode (R:81 G:171 B:242) - better contrast */
    --accent-2:#51ABF2;
    --link:#b026ff;        /* Brighter purple for dark backgrounds */
    --brand-title:#ffffff; /* Site title color for dark theme */
    --nav-sep:#2a323c;
    --shadow: 0 1px 1px rgba(0,0,0,0.3), 0 4px 20px rgba(0,0,0,0.35); /* More pronounced shadows */
  }
}

/* CSS-only theme toggle using :has() selector
   When #theme-toggle checkbox is checked, flip all theme variables
   If OS preference is light, checking the box gives you dark mode
   If OS preference is dark, checking the box gives you light mode (see below)
   NOTE: :has() requires modern browsers (Safari 15.4+, Chrome 105+, Firefox 103+) */
:root:has(#theme-toggle:checked) {
  --bg:#0f1216;
  --text:#e5e7eb;
  --muted:#27303a;
  --surface-1:#14181d;
  --surface-2:#1a1f25;
  --accent:#51ABF2;
  --accent-2:#51ABF2;
  --link:#b026ff;
  --brand-title:#ffffff;
  --nav-sep:#2a323c;
  --shadow: 0 1px 1px rgba(0,0,0,0.3), 0 4px 20px rgba(0,0,0,0.35);
}
@media (prefers-color-scheme: dark) {
  :root:has(#theme-toggle:checked) {
    --bg: #ffffff;
    --text: #1f2937;
    --muted: #e5e7eb;
    --surface-1: #ffffff;
    --surface-2: #f3f4f6;
    --accent: #3479F7;
    --accent-2: #3479F7;
    --link: #603FEF;
    --brand-title: #1f2937;
    --nav-sep: #e5e7eb;
    --shadow: 0 1px 1px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
  }
}

/* ========== LAYOUT ========== */
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
}

/* ========== HEADER ========== */
.site-header {
  display: grid;
  grid-template-columns: 1fr auto auto; /* Brand takes available space, nav and actions are auto-sized */
  align-items: center;
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.25rem 1rem;
}

.brand { display: flex; align-items: center; gap: .9rem; }
.brand .logo img {
  display: block;
  width: clamp(3.75rem, 6vw, 4.5rem);
  height: clamp(3.75rem, 6vw, 4.5rem);
  object-fit: contain;
}
.site-title {
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--brand-title);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.site-title:visited { color: var(--brand-title); }
.site-subtitle {
  font-size: .78rem;
  opacity: .7;
  margin-top: .2rem;
  text-transform: uppercase;
  letter-spacing: .28em;
}

.site-nav a {
  position: relative;
  color: var(--text);
  text-decoration: none;
  margin: 0 .45rem;
  padding: .4rem .45rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .78rem;
}
.site-nav a:visited { color: var(--text); }
/* Adjacent sibling selector - adds vertical separator between nav links
   Uses ::before pseudo-element positioned absolutely */
.site-nav a + a::before {
  content: "";
  position: absolute;
  left: -0.35rem;
  top: 25%;        /* Start 1/4 down */
  height: 50%;     /* Take up middle 50% of height */
  width: 1px;
  background: var(--nav-sep);
}
.site-nav a:hover { color: var(--accent); }
/* Current page indicator - added by JavaScript via aria-current attribute */
.site-nav a[aria-current="page"] {
  color: var(--accent);
  font-weight: 800;
}

/* Header action (theme toggle button) */
.actions { display: flex; align-items: center; gap: .35rem; }
/* Hide the actual checkbox - we style the label instead for CSS-only toggle */
#theme-toggle { position: absolute; opacity: 0; pointer-events: none; }

.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: .2rem;
}

.theme-toggle__track {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 3.4rem;
  height: 1.7rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--muted);
  box-shadow: inset 0 1px 3px rgba(15,18,22,0.16);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
  color: var(--text);
}

.theme-toggle__thumb {
  position: absolute;
  top: .18rem;
  left: .35rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--surface-1);
  box-shadow: 0 3px 8px rgba(15,18,22,0.25);
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}

.theme-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--text);
  opacity: .5;
  transition: opacity .3s ease, transform .3s ease;
  user-select: none;
}

.theme-toggle__icon svg {
  width: 100%;
  height: 100%;
}

.theme-toggle__icon--sun {
  opacity: .95;
  transform: translateY(-1px) scale(1.05);
}

.theme-toggle__icon--moon {
  transform: translateY(1px);
}

:root:has(#theme-toggle:checked) .theme-toggle__thumb {
  transform: translateX(1.3rem);
}

:root:has(#theme-toggle:checked) .theme-toggle__icon--sun {
  opacity: .5;
  transform: translateY(-1px);
}

:root:has(#theme-toggle:checked) .theme-toggle__icon--moon {
  opacity: .95;
  transform: translateY(1px) scale(1.05);
}

:root:has(#theme-toggle:checked) .theme-toggle__track {
  box-shadow: inset 0 1px 3px rgba(15,18,22,0.25);
}

@media (prefers-color-scheme: dark) {
  :root:not(:has(#theme-toggle:checked)) .theme-toggle__thumb {
    transform: translateX(1.3rem);
  }

  :root:not(:has(#theme-toggle:checked)) .theme-toggle__icon--sun {
    opacity: .5;
    transform: translateY(-1px);
  }

  :root:not(:has(#theme-toggle:checked)) .theme-toggle__icon--moon {
    opacity: .95;
    transform: translateY(1px) scale(1.05);
  }

  :root:not(:has(#theme-toggle:checked)) .theme-toggle__track {
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.35);
  }

  :root:has(#theme-toggle:checked) .theme-toggle__thumb {
    transform: translateX(0);
  }

  :root:has(#theme-toggle:checked) .theme-toggle__icon--sun {
    opacity: .95;
    transform: translateY(-1px) scale(1.05);
  }

  :root:has(#theme-toggle:checked) .theme-toggle__icon--moon {
    opacity: .5;
    transform: translateY(1px);
  }
}

.site-main { max-width: 900px; margin: 0 auto; padding: 1rem; }

.hero { margin-top: 1rem; }
.hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 1rem 0 .2rem;
  font-weight: 900;
}
.hero-subtitle {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.intro { margin: 1rem 0 2rem; max-width: 75ch; }
.intro p { margin: .25rem 0; }

/* Intro with profile thumbnail - used on homepage */
.intro-with-thumb { display: flex; align-items: center; gap: 1rem; }
.profile-link { display: block; flex: 0 0 auto; text-decoration: none; } /* Don't grow or shrink */
.profile-thumb {
  display: block;
  width: 220px;
  height: auto;
  object-fit: cover;
  border-radius: 26px; /* Heavily rounded rectangle (not fully circular) */
  border: 1px solid var(--muted);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
/* Subtle lift effect on hover */
.profile-link:hover .profile-thumb { transform: translateY(-4px) scale(1.01); box-shadow: 0 10px 28px rgba(0,0,0,0.12); }
.intro-copy { max-width: 60ch; }

.projects-group { margin: 2.5rem 0; }
.projects-group > h2 {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--accent-2);
  letter-spacing: .04em;
}
.projects-group > h2 a { color: inherit; text-decoration: none; }
.projects-group > h2 a:visited { color: inherit; }
.projects-group > h2 a:hover { text-decoration: underline; }

.section-description {
  margin: 0 0 1.5rem;
  color: var(--text);
  opacity: 0.82;
}

/* Flexible card grid - use with .grid-2, .grid-3, or .grid-4 modifiers */
.card-grid { display: grid; gap: 1rem; }
/* minmax(0,1fr) prevents overflow issues with long content */
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* ========== RESPONSIVE BREAKPOINTS ========== */

/* Tablet breakpoint - 980px and below */
@media (max-width: 980px) {
  /* Stack nav below brand and actions on tablet */
  .site-header { grid-template-columns: 1fr auto; grid-template-areas: "brand actions" "nav nav"; }
  .brand { grid-area: brand; }
  .site-nav { grid-area: nav; display: flex; flex-wrap: wrap; }
  .actions { grid-area: actions; }
  /* Reduce grid columns on tablet */
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Mobile breakpoint - 640px and below */
@media (max-width: 640px) {
  /* All grids become single column on mobile */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  /* Stack intro content vertically */
  .intro-with-thumb { flex-direction: column; align-items: center; }
  .profile-link { margin: 0 auto; }
  .profile-thumb { width: min(70vw, 240px); border-radius: 18px; }
  .site-header {
    justify-items: center;
    text-align: center;
  }
  .brand {
    justify-content: center;
    text-align: center;
    width: 100%;
  }
  .site-nav {
    justify-content: center;
    width: 100%;
  }
  .actions { justify-self: center; }
  .site-footer {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .footer-meta {
    justify-content: center;
    text-align: center;
    width: 100%;
  }
}

/* ========== CARD COMPONENTS ========== */

/* Project card - two column layout (thumbnail + content) */
.card { 
  display: grid;
  grid-template-columns: 120px 1fr; /* Fixed width thumbnail, flexible content */
  gap: .75rem;
  background: var(--surface-1);
  border: 1px solid var(--muted);
  border-radius: .75rem;
  padding: .75rem;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform .1s ease, box-shadow .1s ease, border-color .1s ease;
}
.card:visited { color: inherit; }
/* Subtle lift and accent border on hover */
.card:hover { transform: translateY(-1px); border-color: var(--accent); }
.card .thumb {
  border-radius: .6rem;
  width: 100%;
  max-width: 120px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.card-body {
  min-width: 0;
}

.card.card-full {
  grid-template-columns: 1fr;
}

.card.card-full iframe {
  width: 100%;
  min-height: 750px;
  border-radius: .5rem;
}

.card.card-static {
  box-shadow: none;
  transition: none;
}

.card.card-static:hover {
  transform: none;
  border-color: var(--muted);
}
.card h3 { margin: .15rem 0 .3rem; font-size: 1.05rem; }
.card p { margin: 0; opacity: .8; }

.card-list { display: grid; gap: .5rem; }
.row-link {
  display: block; padding: .65rem .8rem; border: 1px solid var(--muted); border-radius: .6rem;
  background: var(--surface-1); color: inherit; text-decoration: none;
}
.row-link:visited { color: inherit; }
.row-link:hover { border-color: var(--accent); }

.page-header h1 {
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  margin: .5rem 0 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.2;
}

.prose { max-width: 75ch; }
.prose p { margin: .75rem 0; }

/* Project media helpers keep imagery proportional and breathing with copy */
.project-media { margin: 2.25rem 0; }
.project-media img {
  width: 100%;
  border-radius: .75rem;
  box-shadow: var(--shadow);
}
.project-media figcaption {
  margin-top: .65rem;
  font-size: .95rem;
  color: var(--text);
  opacity: .75;
}

.cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0.65rem;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .1s ease, box-shadow .1s ease, background .1s ease;
}

.cta-button:visited { color: #fff; }

.cta-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(52,121,247,0.28);
  background: var(--accent-2);
}

.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  margin: 2rem 0;
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-container {
  position: relative;
  min-height: 16rem;
}

.embed-container iframe {
  width: 100%;
  border: 0;
}

.embed-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1rem;
  text-align: center;
  font-weight: 500;
  color: var(--text);
  background: var(--surface-1);
  border: 1px dashed var(--muted);
  border-radius: .75rem;
  pointer-events: auto;
  transition: opacity .3s ease, visibility .3s ease;
}

.embed-loading a {
  color: var(--accent);
  text-decoration: underline;
}

.embed-container[data-state="loaded"] .embed-loading {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.project-media-grid {
  display: grid;
  gap: 1.5rem;
  margin: 2.25rem 0;
}

.project-media-grid .project-media { margin: 0; }

@media (min-width: 768px) {
  .project-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}

.simple-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; padding-left: 0; list-style: none; }
.simple-grid a { display:block; padding:.75rem .9rem; border:1px solid var(--muted); border-radius:.6rem; text-decoration:none; color:inherit; background: var(--surface-1); }
.simple-grid a:visited { color: inherit; }
.simple-grid a:hover { border-color: var(--accent); }

.post-list { list-style: none; padding: 0; }
.post-list li { display: grid; grid-template-columns: 130px 1fr; gap: .5rem; padding: .35rem 0; border-bottom: 1px dashed var(--muted); }
.post-list time { color: var(--link); opacity: .7; }
.post-list a:visited { color: inherit; }

.site-footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; max-width: 1100px; margin: 4rem auto 2rem; padding: 0 1rem;
  opacity: .85; font-size: .95rem;
  flex-wrap: wrap;
}
.site-footer a { color: inherit; text-decoration: none; margin: 0 .35rem; }
.site-footer a:visited { color: inherit; }
.site-footer a:hover { color: var(--accent); }

.footer-meta {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  font-weight: 600;
}

.footer-divider {
  color: var(--muted);
  font-size: .9em;
  margin: 0 .1rem;
}

/* ========== TIMELINE ========== */
.timeline-section {
  margin-top: 3rem;
}

.timeline-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  border-left: 2px solid var(--muted);
}

.timeline-item {
  position: relative;
  margin: 0 0 1.75rem 1.5rem;
  padding-left: 1.5rem;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -1.6rem;
  top: 0.35rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
}

.timeline-title {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text);
  text-decoration: none;
}

a.timeline-title:visited {
  color: var(--text);
}

a.timeline-title:hover {
  color: var(--accent);
}

.timeline-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.timeline-tags {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.timeline-dates {
  margin-top: 0.35rem;
  font-size: 0.95rem;
  color: var(--text);
  opacity: 0.75;
}

.timeline-loading::before,
.timeline-error::before {
  display: none;
}

.timeline-error .timeline-title {
  color: var(--link);
}

.timeline-noscript {
  margin-top: 1.5rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background: var(--surface-2);
}

.timeline-filters {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.timeline-filter-label {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 70%, var(--bg));
  font-weight: 600;
}

.timeline-filter-group {
  border: 1px solid color-mix(in srgb, var(--muted) 70%, transparent);
  border-radius: 0.85rem;
  background: var(--surface-1);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.timeline-filter-heading {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 85%, var(--bg));
  margin: 0;
}


.timeline-filter-select-label {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 75%, var(--bg));
  font-weight: 600;
}

.timeline-filter-select {
  appearance: none;
  border-radius: 0.6rem;
  border: 1px solid color-mix(in srgb, var(--muted) 70%, transparent);
  padding: 0.65rem 2.5rem 0.65rem 0.75rem;
  font-size: 0.95rem;
  line-height: 1.3;
  background: var(--surface-0);
  color: var(--text);
  font-family: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23a0aec0' d='M4.47 6.47a.75.75 0 0 1 1.06 0L8 8.94l2.47-2.47a.75.75 0 1 1 1.06 1.06l-3 3a.75.75 0 0 1-1.06 0l-3-3a.75.75 0 0 1 0-1.06Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 1rem;
}

.timeline-filter-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

.chip-list,
.timeline-filter-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
}

.timeline-filter-chip-list {
  padding: 0;
}

.chip-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.chip,
.timeline-filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--muted);
  background: var(--surface-1);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 500;
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.chip {
  cursor: default;
}

.timeline-filter-chip {
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.timeline-filter-chip:hover,
.timeline-filter-chip:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
  outline: none;
}

.timeline-filter-chip.is-active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.timeline-filter-chip.is-active:hover,
.timeline-filter-chip.is-active:focus-visible {
  color: var(--bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

[data-hidden="true"] {
  display: none !important;
}

.timeline-empty::before {
  display: none;
}

@media (max-width: 720px) {
  .timeline-section {
    margin-top: 2.5rem;
  }

  .timeline-list {
    margin-top: 1.5rem;
    border-left-width: 1px;
  }

  .timeline-item {
    margin-left: 1.2rem;
    padding-left: 1.1rem;
  }

  .timeline-item::before {
    left: -1.4rem;
    width: 0.65rem;
    height: 0.65rem;
  }

  .timeline-filters {
    gap: 0.65rem;
  }
}

@media (max-width: 540px) {
  .timeline-list {
    border-left: none;
  }

  .timeline-item {
    margin-left: 0;
    padding-left: 0;
  }

  .timeline-item::before {
    display: none;
  }

  .timeline-filter-chip-list {
    justify-content: flex-start;
  }

  .timeline-filter-chip {
    flex: 1 1 calc(50% - 0.3rem);
    max-width: calc(50% - 0.3rem);
    justify-content: center;
    font-size: 0.78rem;
  }
}

/* Thinking Trace GIF Generator */
.thinking-gif {
  margin-top: 2rem;
}

.thinking-gif-disclaimer {
  font-size: 0.95rem;
  color: var(--text);
  margin-top: 0.5rem;
}

.thinking-gif-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

.thinking-gif-preview,
.thinking-gif-panel {
  background: var(--surface-1);
  border: 1px solid var(--muted);
  border-radius: 1rem;
  padding: 1.4rem;
  box-shadow: var(--shadow);
}

.thinking-gif-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.thinking-gif-preview-meta {
  font-size: 0.85rem;
  color: var(--text);
  opacity: 0.7;
}

.thinking-gif-canvas-wrap {
  border-radius: 0.85rem;
  border: 1px solid var(--muted);
  padding: 0.75rem;
  background: #0b0c0f;
  display: flex;
  justify-content: center;
}

.thinking-gif-preview[data-theme="light"] .thinking-gif-canvas-wrap {
  background: #f8fafc;
}

.thinking-gif-canvas-wrap canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.65rem;
}

.thinking-gif-preview-note {
  margin-top: 0.85rem;
  font-size: 0.9rem;
  color: var(--text);
  opacity: 0.75;
}

.thinking-gif-editor {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.thinking-gif-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.thinking-gif-steps {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.thinking-gif-step {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.7rem;
  background: var(--surface-2);
  border: 1px solid var(--muted);
  border-radius: 0.85rem;
}

.thinking-gif-step.is-dragging {
  opacity: 0.6;
}

.thinking-gif-drag {
  border: 1px solid var(--muted);
  background: var(--surface-1);
  color: var(--text);
  border-radius: 0.6rem;
  width: 2.2rem;
  height: 2.2rem;
  cursor: grab;
  font-size: 1rem;
}

.thinking-gif-drag:active {
  cursor: grabbing;
}

.thinking-gif-step-input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: 0.6rem;
  border: 1px solid var(--muted);
  background: var(--surface-1);
  color: var(--text);
  font-size: 0.95rem;
}

.thinking-gif-delete {
  border: 1px solid var(--muted);
  background: transparent;
  color: var(--text);
  border-radius: 0.6rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
}

.thinking-gif-fields {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.thinking-gif-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.9rem;
}

.thinking-gif-field input,
.thinking-gif-field select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 0.6rem;
  border: 1px solid var(--muted);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.95rem;
}

.thinking-gif-field input[type="range"] {
  padding: 0;
}

.thinking-gif-toggle {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.thinking-gif-toggle input {
  width: auto;
}

.thinking-gif-button {
  border: 1px solid var(--muted);
  background: var(--surface-2);
  color: var(--text);
  padding: 0.55rem 1rem;
  border-radius: 0.7rem;
  font-weight: 600;
}

.thinking-gif-button-primary {
  background: var(--accent);
  border-color: transparent;
  color: #ffffff;
}

.thinking-gif-export {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.thinking-gif-export-meta {
  font-size: 0.9rem;
  color: var(--text);
  opacity: 0.8;
}

.thinking-gif-export-help {
  font-size: 0.85rem;
  color: var(--text);
  opacity: 0.6;
}

.thinking-gif-noscript {
  padding: 1rem;
  border-radius: 0.8rem;
  border: 1px dashed var(--muted);
  margin-bottom: 1rem;
}

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