:root{--bg-color: #FAF7F2;--card-bg: #FFFFFF;--card-hover-bg: #FCFAF6;--card-border: #E8E2D9;--card-border-hover: #D6CBC0;--text-main: #2C2623;--text-muted: #6E6660;--text-light: #9C948D;--accent-terracotta: #C85A32;--accent-terracotta-hover: #B04A25;--accent-terracotta-light: #F8ECE7;--accent-ochre: #C07F37;--accent-ochre-light: #FAF1E4;--accent-sage: #4E7E65;--accent-sage-light: #EBF3EE;--chip-bg: #F2EDE4;--chip-hover: #E6DFD4;--chip-text: #423C37;--header-bg: rgba(250, 247, 242, .85);--modal-overlay: rgba(44, 38, 35, .4);--shadow-sm: 0 2px 8px rgba(44, 38, 35, .04);--shadow-md: 0 8px 24px rgba(44, 38, 35, .07);--shadow-lg: 0 16px 40px rgba(44, 38, 35, .1);--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-full: 9999px;--font-serif: "Newsreader", "Georgia", serif;--font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--transition-fast: .18s cubic-bezier(.16, 1, .3, 1);--transition-normal: .28s cubic-bezier(.16, 1, .3, 1)}[data-theme=dark]{--bg-color: #171614;--card-bg: #211F1C;--card-hover-bg: #292623;--card-border: #33302B;--card-border-hover: #48433C;--text-main: #ECE7DF;--text-muted: #A39B92;--text-light: #736B63;--accent-terracotta: #E07A5F;--accent-terracotta-hover: #EC8B72;--accent-terracotta-light: #30201B;--accent-ochre: #E6B87D;--accent-ochre-light: #30261A;--accent-sage: #76B093;--accent-sage-light: #1A2820;--chip-bg: #282521;--chip-hover: #36322C;--chip-text: #D5CFB5;--header-bg: rgba(23, 22, 20, .85);--modal-overlay: rgba(0, 0, 0, .65);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .2);--shadow-md: 0 8px 24px rgba(0, 0, 0, .35);--shadow-lg: 0 16px 40px rgba(0, 0, 0, .5)}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{background-color:var(--bg-color);color:var(--text-main);font-family:var(--font-sans);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--transition-normal),color var(--transition-normal);min-height:100vh}h1,h2,h3,h4,.font-serif{font-family:var(--font-serif);font-weight:500;letter-spacing:-.01em}.container{max-width:1040px;margin:0 auto;padding:0 24px}.site-header{position:sticky;top:0;z-index:100;background:var(--header-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--card-border);transition:background-color var(--transition-normal),border-color var(--transition-normal)}.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px}.brand-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text-main);font-weight:600;font-size:1.15rem}.brand-avatar{width:38px;height:38px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--accent-terracotta),var(--accent-ochre));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1rem;box-shadow:var(--shadow-sm)}.nav-links{display:flex;align-items:center;gap:28px;list-style:none}.nav-link{text-decoration:none;color:var(--text-muted);font-size:.95rem;font-weight:500;transition:color var(--transition-fast);cursor:pointer}.nav-link:hover,.nav-link.active{color:var(--accent-terracotta)}.status-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--radius-full);background:var(--chip-bg);border:1px solid var(--card-border);font-size:.85rem;color:var(--text-muted);font-weight:500}.status-dot{width:8px;height:8px;border-radius:50%;background-color:var(--accent-sage);box-shadow:0 0 0 3px var(--accent-sage-light);animation:pulse-dot 2.5s infinite}@keyframes pulse-dot{0%{transform:scale(.95);box-shadow:0 0 #4e7e6566}70%{transform:scale(1);box-shadow:0 0 0 6px #4e7e6500}to{transform:scale(.95);box-shadow:0 0 #4e7e6500}}.claude-card{background-color:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-md);padding:28px;transition:transform var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),background-color var(--transition-normal);box-shadow:var(--shadow-sm);position:relative}.claude-card:hover{border-color:var(--card-border-hover);box-shadow:var(--shadow-md)}.claude-card.interactive:hover{transform:translateY(-3px);background-color:var(--card-hover-bg)}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background-color:var(--accent-terracotta);color:#fff;border:none;padding:12px 24px;border-radius:var(--radius-full);font-weight:600;font-size:.95rem;cursor:pointer;transition:background-color var(--transition-fast),transform var(--transition-fast);text-decoration:none}.btn-primary:hover{background-color:var(--accent-terracotta-hover);transform:translateY(-1px)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background-color:var(--chip-bg);color:var(--text-main);border:1px solid var(--card-border);padding:12px 24px;border-radius:var(--radius-full);font-weight:500;font-size:.95rem;cursor:pointer;transition:background-color var(--transition-fast),border-color var(--transition-fast);text-decoration:none}.btn-secondary:hover{background-color:var(--chip-hover);border-color:var(--card-border-hover)}.tag-filter{padding:8px 18px;border-radius:var(--radius-full);background-color:var(--chip-bg);color:var(--text-muted);border:1px solid transparent;font-size:.9rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.tag-filter:hover{background-color:var(--chip-hover);color:var(--text-main)}.tag-filter.active{background-color:var(--accent-terracotta-light);color:var(--accent-terracotta);border-color:var(--accent-terracotta)}.modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--modal-overlay);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease-out}.modal-content{background-color:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);max-width:640px;width:100%;max-height:85vh;overflow-y:auto;padding:36px;box-shadow:var(--shadow-lg);position:relative;animation:slideUp .25s cubic-bezier(.16,1,.3,1)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.header-inner{height:64px}.nav-links{gap:16px}.nav-link{font-size:.88rem}.claude-card{padding:20px}.modal-content{padding:24px}}