*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;line-height:1.8;scroll-behavior:smooth}
body{background:#F0F2F5;color:#5A6478;font-family:'IBM Plex Sans',sans-serif;font-weight:400}
.site-header{position:sticky;top:0;z-index:100;background:#F0F2F5;border-bottom:1px solid #B0C4DE}
.header-inner{max-width:900px;margin:0 auto;padding:16px 24px;display:flex;justify-content:space-between;align-items:center}
.site-brand{font-family:'Space Mono',monospace;font-weight:700;font-size:0.85rem;color:#7A8B9E;letter-spacing:0.04em}
.header-nav{display:flex;gap:20px}
.header-nav a{font-size:0.8rem;color:#A0A8B4;text-decoration:none;letter-spacing:0.04em;transition:color 200ms}
.header-nav a:hover{color:#6B8A7A}
.page-column{max-width:900px;margin:0 auto;padding:48px 24px 80px}
.hero-section{margin-bottom:56px;opacity:0;transform:translateY(20px);transition:opacity 500ms ease-out,transform 500ms ease-out}
.hero-section.visible{opacity:1;transform:translateY(0)}
.hero-title{font-family:'Space Mono',monospace;font-size:4rem;font-weight:700;color:#5A6478;line-height:1.2;margin-bottom:8px}
.hero-subtitle{font-family:'Space Mono',monospace;font-size:1rem;font-weight:700;color:#6B8A7A;margin-bottom:16px}
.hero-desc{font-size:0.95rem;color:#7A8B9E;max-width:560px;line-height:1.7}
.section-title{font-family:'Space Mono',monospace;font-weight:700;font-size:1.1rem;color:#5A6478;letter-spacing:0.02em;margin-bottom:24px;padding-bottom:12px;border-bottom:1px solid #B0C4DE}
.framework-list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:48px}
.framework-card{background:#FFFFFF;border:1px solid #B0C4DE;border-radius:4px;padding:24px;position:relative;overflow:hidden;opacity:0;transform:translateY(16px);transition:opacity 400ms ease-out,transform 400ms ease-out,box-shadow 200ms}
.framework-card.visible{opacity:1;transform:translateY(0)}
.framework-card:hover{box-shadow:0 4px 16px rgba(90,100,120,0.1)}
.card-accent{position:absolute;top:0;left:0;width:100%;height:3px;background:#7A8B9E}
.card-accent.accent-green{background:#6B8A7A}
.card-accent.accent-rose{background:#A0A8B4}
.card-tag{font-family:'Space Mono',monospace;font-size:0.6rem;font-weight:700;color:#A0A8B4;letter-spacing:0.1em;display:block;margin-bottom:8px}
.card-title{font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:1rem;color:#5A6478;margin-bottom:8px}
.card-desc{font-size:0.85rem;color:#7A8B9E;line-height:1.6;margin-bottom:12px}
.card-meta{display:flex;justify-content:space-between;align-items:center}
.meta-contributors{font-size:0.7rem;color:#A0A8B4}
.meta-status{font-family:'Space Mono',monospace;font-size:0.6rem;font-weight:700;letter-spacing:0.06em;padding:2px 8px;border-radius:2px}
.meta-status.active{color:#6B8A7A;background:rgba(107,138,122,0.1)}
.meta-status.review{color:#A0A8B4;background:rgba(160,168,180,0.1)}
.archive-section{margin-top:48px}
.archive-list{display:flex;flex-direction:column;gap:12px}
.archive-item{display:flex;gap:16px;padding:12px 0;border-bottom:1px dotted #B0C4DE}
.archive-date{font-family:'Space Mono',monospace;font-size:0.7rem;color:#A0A8B4;flex-shrink:0}
.archive-title{font-size:0.9rem;color:#5A6478}
.site-footer{max-width:900px;margin:0 auto;padding:32px 24px;border-top:1px solid #B0C4DE}
.footer-text{font-family:'Space Mono',monospace;font-size:0.7rem;color:#A0A8B4;text-align:center}
@media(max-width:768px){.framework-list{grid-template-columns:1fr}.hero-title{font-size:2.5rem}}