:root{
  --bg:#f4fbff;
  --card:#ffffff;
  --accent1:#0aa5c2;
  --accent2:#1e90ff;
  --muted:#6b7280;
  --radius:10px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter, "Helvetica Neue", Arial, sans-serif;background:linear-gradient(180deg,var(--bg),#ffffff);color:#0f172a}
.container{max-width:1100px;margin:0 auto;padding:22px}
.header{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#fff;padding:20px;border-radius:12px}
.header h1{margin:0;font-size:24px}
.tag{margin-top:6px;opacity:0.95}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:12px}
.grid a.format-btn{display:flex;align-items:center;justify-content:center;padding:10px;border-radius:8px;background:var(--card);border:1px solid #e6f2f8;text-decoration:none;color:var(--accent2);font-weight:600;box-shadow:0 6px 18px rgba(16,24,40,0.04)}
.grid a.format-btn:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(16,24,40,0.08);background:linear-gradient(90deg,rgba(10,165,194,0.06),rgba(30,144,255,0.06))}
.section-title{color:#0f5132;margin-top:18px;font-weight:700}
.footer{margin-top:28px;padding:18px 0;text-align:center;color:var(--muted);font-size:13px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
/* conversion buttons */
.conv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.conv-btn{display:inline-block;padding:10px;border-radius:8px;background:linear-gradient(90deg,var(--accent1),var(--accent2));color:white;text-decoration:none;text-align:center;font-weight:600;border:0;box-shadow:0 8px 28px rgba(14,20,32,0.08)}
.conv-btn:hover{transform:translateY(-3px)}
@media(max-width:900px){.conv-grid{grid-template-columns:repeat(1,1fr)}}