:root{
  --bg:#0f1724; --card:#0b1220; --muted:#98a0b3; --accent:#7c5cff; --glass: rgba(255,255,255,0.04);
  --radius:14px; --pad:20px; color-scheme: dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg,#081028 0%, #071026 60%); color:#e6eef8; -webkit-font-smoothing:antialiased;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.wrap{width:100%; max-width:900px}
header{display:flex; align-items:center; gap:16px; margin-bottom:18px}
.logo{
  width:64px; height:64px; border-radius:12px; background:linear-gradient(135deg,var(--accent),#3fd6c8); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; color:#071026; box-shadow:0 6px 20px rgba(124,92,255,0.12);
}
h1{margin:0; font-size:20px}
p.lead{margin:2px 0 0; color:var(--muted); font-size:13px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:18px; border-radius:var(--radius); box-shadow:0 6px 30px rgba(2,6,23,0.6);}
ol.rules{margin:18px 0 0; padding-left:20px}
li.rule{margin-bottom:12px; padding:12px; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); border-radius:10px; display:flex; gap:12px; align-items:flex-start}
.meta{font-size:12px; color:var(--muted)}
.small{font-size:13px}
.muted{color:var(--muted)}
.stamp{font-size:12px; color:var(--muted); margin-top:8px}
footer{margin-top:14px; color:var(--muted); font-size:13px}