.ai-nav-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ai-construction { --construction-accent: var(--red); position: relative; margin-top: 32px; padding: clamp(28px, 5vw, 64px) clamp(18px, 4vw, 48px); border: 2px solid var(--construction-accent); background: color-mix(in srgb, var(--construction-accent) 12%, var(--card)); text-align: center; }
.ai-construction::before, .ai-construction::after { content: ''; position: absolute; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(-45deg, var(--construction-accent) 0 10px, transparent 10px 20px); }
.ai-construction::before { top: 0; }
.ai-construction::after { bottom: 0; }
.ai-construction .ai-construction-label { margin: 0 0 18px; font: calc(12px * var(--site-font-scale))/1.5 'IBM Plex Mono', monospace; color: var(--ink); text-transform: uppercase; letter-spacing: 2px; }
.ai-construction h2 { margin: 0 0 24px; font: 600 calc(clamp(24px, 5.5vw, 72px) * var(--site-font-scale))/1.1 'Space Grotesk', system-ui, sans-serif; letter-spacing: -1px; color: var(--ink); }
.ai-construction > p:last-child { max-width: 600px; margin: 0 auto; font: calc(14px * var(--site-font-scale))/1.8 Inter, sans-serif; color: var(--ink); }
:root[data-theme="eva01"] .ai-construction { --construction-accent: var(--eva-lime); }
.ai-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 32px 0; }
.ai-card { position: relative; display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: clamp(22px, 3vw, 36px); border: 1px solid var(--border-strong); background: linear-gradient(135deg, color-mix(in srgb, var(--red) 10%, var(--card)), var(--card) 85%); }
.ai-card::before { content: ''; position: absolute; left: -1px; top: -1px; width: 48px; height: 3px; background: var(--red); }
.ai-card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); font: calc(10px * var(--site-font-scale))/1.5 'IBM Plex Mono', monospace; letter-spacing: 1px; }
.ai-mark { color: var(--red); font-size: calc(18px * var(--site-font-scale)); }
.ai-card h2 { font: 600 calc(clamp(25px, 3vw, 36px) * var(--site-font-scale))/1.15 'Space Grotesk', system-ui, sans-serif; letter-spacing: -1px; overflow-wrap: anywhere; }
.ai-card h2 > span { color: var(--red); }
.ai-card p, .ai-card dd { font: calc(14px * var(--site-font-scale))/1.8 Inter, sans-serif; color: var(--muted); }
.ai-card dt { font: calc(11px * var(--site-font-scale))/1.5 'IBM Plex Mono', monospace; color: var(--ink); margin-bottom: 6px; }
.ai-card dd + dt { margin-top: 16px; }
.ai-card .ai-caption { padding-top: 16px; border-top: 1px solid var(--border); }
.ai-card-bottom { margin-top: auto; padding-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--border); }
.ai-card-bottom > span { font: calc(10px * var(--site-font-scale))/1.8 'IBM Plex Mono', monospace; color: var(--muted); }
.ai-return { padding: 0 0 24px; }
:root[data-theme="eva01"] .ai-card::before { background: var(--eva-lime); }
:root[data-theme="eva01"] .ai-mark, :root[data-theme="eva01"] .ai-card h2 > span { color: var(--eva-lime); }
@media (max-width: 680px) {
  .ai-grid { grid-template-columns: 1fr; gap: 20px; padding-top: 24px; }
  .ai-page nav { flex-wrap: wrap; }
  .ai-nav-actions { gap: 8px; }
  .ai-page .logo { font-size: calc(12px * var(--site-font-scale)); }
  .ai-page .theme-toggle { padding: 0 10px; }
}