:root{--text:#0a0a0a;--muted:#666;--border:#eaeaea;--bg:#ffffff;--accent:#111;} *{box-sizing:border-box} body.wrap{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif} .container{max-width:1100px;margin:0 auto;padding:24px} .site-header{border-bottom:1px solid var(--border);background:#fff;position:sticky;top:0;z-index:10} .logo{font-weight:800;text-decoration:none;color:#111;font-size:1.2rem} .logo span{color:#999} .nav a{margin-left:16px;color:#111;text-decoration:none} .nav a:hover{text-decoration:underline} .hero{padding:32px 0} .hero h1{font-size:2.2rem;margin:0 0 8px} .hero p{color:var(--muted);max-width:800px} .cta{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap} .btn{border:1px solid #111;padding:10px 14px;border-radius:10px;text-decoration:none;color:#111} .btn.primary{background:#111;color:#fff} .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px} .card{border:1px solid var(--border);border-radius:14px;padding:16px;background:#fff} .card h3{margin:0 0 6px} .meta{color:var(--muted);font-size:.9rem} .byline{color:#333;font-size:.9rem;margin:4px 0 12px} .share{margin:16px 0} .share-btn{margin-right:8px} .site-footer{border-top:1px solid var(--border);background:#fff;margin-top:24px} .breadcrumbs{font-size:.9rem;color:var(--muted);margin:8px 0 16px} .article{max-width:800px} .article h1{margin-top:0} .article img{width:100%;height:auto;border:1px solid var(--border);border-radius:12px} blockquote{border-left:3px solid #111;margin:16px 0;padding:4px 12px;color:#333;background:#fafafa} table{border-collapse:collapse;width:100%} td,th{border:1px solid var(--border);padding:8px;text-align:left} form label{display:block;margin:12px 0 4px} input,textarea{width:100%;padding:10px;border:1px solid var(--border);border-radius:10px} .alert{padding:12px;border:1px solid var(--border);background:#fafafa;border-radius:10px} .small{font-size:.92rem;color:var(--muted)}