--- ### `src/style.css` ```css *{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,sans-serif;background:#f8fafc;color:#0b1b2e;line-height:1.6;min-height:100vh;display:flex;flex-direction:column}.app{max-width:1000px;margin:0 auto;padding:1.5rem;width:100%;flex:1;display:flex;flex-direction:column}.site-header{background:linear-gradient(135deg,#1e293b,#0f172a);color:#f1f5f9;padding:1.2rem 2rem;border-radius:1.2rem;margin-bottom:2rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;box-shadow:0 8px 20px #0000001f}.site-header h1{font-size:1.8rem;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:.5rem}.site-header h1 small{font-size:1rem;font-weight:400;opacity:.7;margin-left:.5rem}.header-nav{display:flex;gap:1.8rem;font-weight:500}.header-nav a{color:#e2e8f0;text-decoration:none;transition:color .2s;padding:.3rem 0;border-bottom:2px solid transparent}.header-nav a:hover,.header-nav a.active{color:#a5f3fc;border-bottom-color:#38bdf8}.main-content{flex:1;background:#fff;border-radius:1.5rem;padding:2rem 2rem 2.5rem;box-shadow:0 4px 16px #0000000a;margin-bottom:2rem;border:1px solid #e9edf2}.content-section{max-width:100%}.section-title{font-size:1.6rem;font-weight:600;margin-bottom:1.2rem;color:#0f172a;display:flex;align-items:center;gap:.6rem}.section-title span{background:#dbeafe;color:#1d4ed8;font-size:.9rem;font-weight:500;padding:.15rem .8rem;border-radius:40px}.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-top:.8rem}.tool-card{background:#f8fafc;border-radius:1.2rem;padding:1.5rem 1.2rem;transition:all .2s ease;border:1px solid #eef2f6;text-align:center;cursor:default}.tool-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px -8px #00000014;border-color:#b9d0f0;background:#fff}.tool-card .emoji-big{font-size:2.8rem;display:block;margin-bottom:.4rem}.tool-card h3{font-size:1.2rem;font-weight:600;color:#0b1b2e}.tool-card p{font-size:.9rem;color:#475569;margin:.5rem 0 .8rem}.tool-card .badge{background:#e6edf8;color:#1e3a6f;padding:.2rem .8rem;border-radius:20px;font-size:.75rem;font-weight:500;display:inline-block}.demo-utility{margin-top:2rem;padding-top:1.5rem;border-top:1px solid #dee5ed;display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-start}.demo-utility-item{background:#f1f5f9;border-radius:1rem;padding:1rem 1.5rem;flex:1 1 200px}.demo-utility-item h4{font-weight:600;font-size:1rem;color:#1e293b;margin-bottom:.3rem}.demo-utility-item .meta{color:#64748b;font-size:.85rem}.site-footer{background:#f1f5f9;border-radius:1.2rem;padding:1.5rem 2rem;margin-top:.5rem;border:1px solid #e2e8f0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;color:#334155;font-size:.95rem}.site-footer .footer-links{display:flex;gap:1.8rem}.site-footer a{color:#1e293b;text-decoration:none;border-bottom:1px dotted transparent;transition:border-color .2s}.site-footer a:hover{border-bottom-color:#475569;color:#0f172a}.footer-copy{opacity:.7;font-size:.9rem}@media (max-width: 680px){.site-header{flex-direction:column;align-items:flex-start;gap:.6rem}.header-nav{flex-wrap:wrap;gap:1rem 1.5rem}.site-footer{flex-direction:column;gap:.8rem;align-items:flex-start}.main-content{padding:1.5rem}}