:root { --accent:#3b82f6; }
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.container{max-width:900px;margin:0 auto;padding:1.25rem}
.site-header{padding:1.25rem;border-bottom:1px solid #e5e7eb}
.nav{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.5rem}
.nav a{padding:.45rem .7rem;border:1px solid #e5e7eb;border-radius:.5rem;text-decoration:none;color:#111}
.nav a:hover{border-color:var(--accent)}
.site-footer{border-top:1px solid #e5e7eb;padding:1rem;text-align:center}
.demo{border:2px dashed var(--accent);border-radius:12px;padding:1rem;background:#f9fafb}
.box{height:100px;width:100%;background:var(--accent);border-radius:10px;color:#fff;display:flex;align-items:center;justify-content:center}
