/* Default light theme */
:root{--text:#1a1a1a;--muted:#666;--link:#2563eb;--on-link:#ffffff;--border:#e5e5e5;--bg:#ffffff;--soft:#f8f9fa}

/* Warm light theme */
[data-theme="warm"]{--text:#2d2d2d;--muted:#666;--link:#c2410c;--on-link:#ffffff;--border:#e7e5e4;--bg:#fefdfb;--soft:#f7f5f3}

/* Soft dark theme - much easier on eyes */
[data-theme="soft-dark"]{--text:#e4e4e7;--muted:#a1a1aa;--link:#d97706;--on-link:#111827;--border:#3f3f46;--bg:#1c1c1e;--soft:#27272a}

/* Auto dark theme (less harsh than before) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){--text:#e4e4e7;--muted:#a1a1aa;--link:#d97706;--on-link:#111827;--border:#3f3f46;--bg:#1c1c1e;--soft:#27272a}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif;line-height:1.55}
/* Ensure any top-level content (like summary paragraphs) has the same container width */
body>p,body>ul,body>ol,body>pre,body>article,body>section{max-width:960px;margin:0 auto;padding:0 12px}
header,nav,main,footer{max-width:960px;margin:0 auto;padding:12px}
.header-brand{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.logo-link{text-decoration:none;color:var(--text)}
.logo-link:hover .logo{opacity:0.8;transition:opacity 0.2s}
.logo{height:45px;width:auto;color:var(--text)}
header h1{margin:0;font-size:1.8rem}
header p.tagline{margin:4px 0 8px;max-width:70ch;color:var(--muted)}
header .actions{margin:6px 0 6px}
.rss-btn{display:inline-block;background:var(--link);color:#fff;padding:6px 10px;border-radius:8px;text-decoration:none;font-weight:600}
.rss-btn:hover{filter:brightness(0.95)}
.top-nav{position:sticky;top:0;z-index:1000;display:flex;gap:12px;overflow-x:auto;padding:10px 12px;background:color-mix(in srgb, var(--bg) 92%, transparent);backdrop-filter:saturate(140%) blur(8px);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.top-nav a{color:var(--link);text-decoration:none;white-space:nowrap;padding:4px 6px;border-radius:6px}
.top-nav a:hover,.top-nav a:focus{background:var(--soft);outline:none}
.top-nav a.active{font-weight:600;border-bottom:2px solid var(--link)}
.demo-nav-link{background:var(--link);color:var(--on-link) !important;border-radius:16px;padding:4px 8px !important;font-weight:600}
.demo-nav-link:hover{filter:brightness(1.1);background:var(--link) !important}
main section{padding:18px 0;border-bottom:1px solid var(--border)}
main section h2{margin:0 0 8px;font-size:1.25rem}
main a{color:var(--link)}
/* Improve dark-mode link visibility: keep visited links the same color as normal links */
main a:visited{color:var(--link)}
[data-theme="soft-dark"] main a:visited{color:var(--link)}
@media (prefers-color-scheme: dark){:root:not([data-theme]) main a:visited{color:var(--link)}}
/* Add clear affordance */
main a:hover{text-decoration:underline}
/* Button-like links should preserve their own text color when visited */
.demo-card.mini:visited,
.demo-btn.primary:visited,
.inline-demo-btn:visited,
.demo-cta:visited {
  color: var(--on-link);
}
.meta{color:var(--muted);font-size:.92em}
.back-to-top{float:right}
footer{color:var(--muted);border-top:1px solid var(--border);margin-top:18px;padding-top:12px}
footer a{color:var(--link)}
footer a:visited{color:var(--link)}
[data-theme="soft-dark"] footer a:visited{color:var(--link)}
@media (prefers-color-scheme: dark){:root:not([data-theme]) footer a:visited{color:var(--link)}}
.inputs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.inputs textarea{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;padding:6px}
.diff{border:1px solid var(--border);padding:8px;min-height:60px;white-space:pre-wrap;font-family:ui-monospace;background:var(--soft)}
.added{background:#22c55e;color:#ffffff;padding:2px 4px;border-radius:3px}
.removed{text-decoration:line-through;background:#ef4444;color:#ffffff;padding:2px 4px;border-radius:3px}
.common{color:var(--text)}
.cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.cards li{border:1px solid var(--border);background:var(--soft);padding:10px;border-radius:10px}
.cards li a{text-decoration:none}
.cards li a:hover{text-decoration:underline}
/* Accessibility: visible skip link on focus */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;z-index:2000;background:var(--link);color:#fff;padding:6px 10px;border-radius:6px;text-decoration:none}
/* Theme toggle */
.theme-toggle{position:fixed;top:12px;right:12px;z-index:1000;background:var(--soft);border:1px solid var(--border);border-radius:20px;padding:4px;display:flex;gap:2px}
.theme-btn{background:none;border:none;padding:6px 10px;border-radius:16px;cursor:pointer;font-size:12px;color:var(--muted);transition:all 0.2s}
.theme-btn:hover{color:var(--text)}
.theme-btn.active{background:var(--link);color:white}

/* Demo sections and interactive research styling */
.demos-section {
  background: var(--soft);
  border-radius: 12px;
  padding: 24px;
  margin: 24px 0;
}

.section-intro {
  color: var(--muted);
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.1em;
}

.demo-preview-grid {
  display: flex;
  gap: 8px;
  margin: 12px 0;
  flex-wrap: wrap;
}

.demo-card.mini {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--link);
  color: var(--on-link);
  padding: 6px 12px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 0.85em;
  font-weight: 600;
  transition: all 0.2s;
}

/* Ensure high-contrast text on all button-like links across themes */
.demo-card.mini,
.demo-btn.primary,
.inline-demo-btn,
.demo-cta {
  color: var(--on-link) !important;
}
.demo-card.mini:visited,
.demo-btn.primary:visited,
.inline-demo-btn:visited,
.demo-cta:visited {
  color: var(--on-link) !important;
}

.demo-card.mini:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.demo-card.mini .demo-icon {
  font-size: 1.1em;
}

.demos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.demo-card {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
}

.demo-card:hover {
  border-color: var(--link);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.demo-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.demo-icon.large {
  font-size: 2.5em;
  line-height: 1;
}

.demo-card h3 {
  margin: 0;
  font-size: 1.2em;
  color: var(--text);
}

.demo-badge {
  background: var(--link);
  color: var(--on-link);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75em;
  font-weight: 600;
  margin-left: auto;
}

.demo-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.demo-btn {
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9em;
  transition: all 0.2s;
  text-align: center;
  flex: 1;
}

.demo-btn.primary {
  background: var(--link);
  color: var(--on-link);
}

.demo-btn.primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.demo-btn.secondary {
  background: var(--soft);
  color: var(--text);
  border: 1px solid var(--border);
}

.demo-btn.secondary:hover {
  background: var(--border);
}

.highlight {
  color: var(--link);
  font-weight: 600;
}

.work-item.featured-research {
  background: linear-gradient(135deg, var(--soft) 0%, var(--border) 100%);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--border);
}

.work-type.highlight {
  background: var(--link);
  color: var(--on-link);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8em;
  font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .demos-grid {
    grid-template-columns: 1fr;
  }
  
  .demo-actions {
    flex-direction: column;
  }
  
  .demo-preview-grid {
    justify-content: center;
  }
}

/* Demo integration styles */
.demo-breadcrumb {
  background: var(--soft);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.9em;
  margin-bottom: 20px;
  color: var(--muted);
}

.demo-breadcrumb a {
  color: var(--link);
  text-decoration: none;
}

.demo-breadcrumb a:hover {
  text-decoration: underline;
}

.demo-intro {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.demo-context {
  background: var(--soft);
  padding: 12px;
  border-radius: 8px;
  margin-top: 15px;
  font-size: 0.95em;
}

.demo-context a {
  color: var(--link);
  text-decoration: none;
  font-weight: 600;
}

.demo-context a:hover {
  text-decoration: underline;
}

.demo-footer-nav {
  text-align: center;
  margin-top: 10px;
  font-size: 0.9em;
}

.demo-footer-nav a {
  color: var(--link);
  text-decoration: none;
  font-weight: 600;
}

.demo-footer-nav a:hover {
  text-decoration: underline;
}

/* Research page demo integration styles */
.demo-callout-section {
  background: linear-gradient(135deg, var(--soft) 0%, var(--border) 50%, var(--soft) 100%);
  border-radius: 12px;
  padding: 30px;
  margin: 30px 0;
  text-align: center;
}

.research-demo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.research-demo-card {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.research-demo-card:hover {
  border-color: var(--link);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.research-demo-card h4 a {
  color: var(--text);
  text-decoration: none;
}

.research-demo-card h4 a:hover {
  color: var(--link);
  text-decoration: underline;
}

.research-demo-card .demo-icon {
  font-size: 2.5em;
  margin-bottom: 10px;
  line-height: 1;
}

.research-demo-card h4 {
  margin: 0 0 10px 0;
  color: var(--text);
  font-size: 1.1em;
}

.research-demo-card p {
  margin: 0 0 15px 0;
  color: var(--muted);
  font-size: 0.9em;
  flex-grow: 1;
}

.demo-cta {
  background: var(--link);
  color: var(--on-link);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.85em;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}

.contextual-demo-link {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
}

.inline-demo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--link);
  color: var(--on-link);
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.9em;
  transition: all 0.2s ease;
}

.inline-demo-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.demo-context-note {
  margin-top: 10px;
  font-size: 0.85em;
  color: var(--muted);
  font-style: italic;
  text-align: center;
}

/* Responsive adjustments for demo cards */
@media (max-width: 600px) {
  .research-demo-cards {
    grid-template-columns: 1fr;
  }
  
  .inline-demo-btn {
    flex-direction: column;
    text-align: center;
    gap: 4px;
  }
}