:root {
  --bg: #e6e8ee;
  --ink: #1f2023;
  --muted: #5d646f;
  --card: linear-gradient(180deg, rgba(252,252,253,0.99), rgba(240, 244, 249, 0.97) 44%, rgba(228, 238, 248, 0.96) 78%, rgba(221, 234, 248, 0.96));
  --line: #b9cbe0;
  --accent: linear-gradient(180deg, #85b8ef 0%, #93c6fb 26%, #abd8ff 55%, #c7e8ff 82%, #def2ff 100%);
  --accent-line: #88a4d4;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background:
    radial-gradient(760px 360px at 14% 6%, rgba(255,255,255,0.82), transparent 72%),
    radial-gradient(760px 360px at 88% 8%, rgba(154, 203, 247, 0.16), transparent 74%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, rgba(170,182,198,0.03) 1px 3px),
    linear-gradient(#eef1f6, #dde2ea);
  color: var(--ink);
}
.shell {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
.hero { margin-bottom: 16px; }
.eyebrow {
  margin: 0;
  color: #5f6772;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
}
h1 { margin: 6px 0 0; font-size: 32px; }
.card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.18) 28%, rgba(255,255,255,0.0) 29%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.26) 0 1px, rgba(188,205,223,0.10) 1px 3px),
    var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 10px 20px rgba(78, 107, 139, 0.09), inset 0 1px 0 rgba(255,255,255,0.96);
}
code { background: #eef3fb; padding: 1px 5px; border-radius: 6px; }