:root {
  --bg: #0f1923;
  --card: #172030;
  --accent: #4fc3f7;
  --text: #e3eaf4;
  --sub: #a7b8ce;
}

* { box-sizing: border-box; }

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: clamp(1rem, 4vw, 3rem);
  overflow-x: hidden;
  overscroll-behavior-x: none;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Verdana, sans-serif;
  line-height: 1.65;
}

main {
  min-width: 0;
  max-width: 100%;
  width: min(760px, 100%);
  margin: 0 auto;
  padding: clamp(1.3rem, 4vw, 2.8rem);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
}

h1 {
  max-width: 100%;
  margin: 0 0 1.5rem;
  font-size: clamp(1.55rem, 8vw, 2rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
  hyphens: auto;
}
h2 { margin: 1.8rem 0 0.45rem; font-size: 1.15rem; }
p { margin: 0.45rem 0; }
ul { padding-left: 1.3rem; }
a { color: var(--accent); overflow-wrap: anywhere; }
address { font-style: normal; }
.back-link { display: inline-block; margin-bottom: 1.2rem; text-decoration: none; }
.updated { margin-top: 2rem; color: var(--sub); font-size: 0.85rem; }

@media (max-width: 430px) {
  body { padding: 0.55rem; }
  main { padding: 1rem; border-radius: 12px; }
}