:root{
  --bg: #f5f5f5;
  --card: #ffffff;
  --accent: #2aa198;
  --primary: #0b3d91;
  --muted: #6b7280;
}
*{box-sizing:border-box}
body{font-family: Inter, Roboto, "Helvetica Neue", Arial, sans-serif; margin:0; background:var(--bg); color:#111}
.header{display:flex;align-items:center;gap:16px;padding:24px;background:linear-gradient(90deg,var(--primary),#123e6b);color:#fff}
.header img{height:48px}
.container{max-width:980px;margin:28px auto;padding:20px}
.card{background:var(--card);border-radius:8px;padding:18px;box-shadow:0 6px 18px rgba(16,24,40,0.06);margin-bottom:18px}
.tutorial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.tutorial-thumb{height:160px;width:100%;object-fit:cover;border-radius:6px}
.tutorial-title{font-size:18px;margin:10px 0 6px}
.muted{color:var(--muted)}
.footer{padding:24px;text-align:center;color:var(--muted)}
.nav{display:flex;gap:12px}
.nav a{color:#fff;text-decoration:none;padding:8px 12px;background:rgba(255,255,255,0.06);border-radius:6px}