@font-face { font-family: "Lilita One"; src: url(../fonts/lilita-one-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url(../fonts/fredoka-latin.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
:root { --ink: #1b1450; --cream: #fffbea; --sea: #0b7f9a; --grape: #7b3fe0; --sun: #ffd23f; }
* { box-sizing: border-box; }
body {
  margin: 0; font-family: "Fredoka", system-ui, sans-serif; font-weight: 500; color: var(--ink); line-height: 1.6;
  background: linear-gradient(180deg, #19c6d1, var(--sea) 40%, #24165e) fixed; background-color: var(--sea);
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom));
}
main { max-width: 680px; margin: 0 auto; background: var(--cream); border: 4px solid var(--ink); border-radius: 24px; padding: 20px 22px 26px; box-shadow: 0 8px 0 var(--ink); }
h1, h2 { font-family: "Lilita One", system-ui, sans-serif; font-weight: 400; line-height: 1.15; }
h1 { font-size: 32px; margin: 4px 0 4px; color: var(--grape); }
h2 { font-size: 21px; margin: 24px 0 6px; }
p, li { font-size: 16px; }
ul { padding-left: 22px; }
a { color: var(--grape); font-weight: 600; }
.back { display: inline-block; margin-bottom: 14px; font-family: "Lilita One", system-ui, sans-serif; text-decoration: none; color: var(--ink); background: var(--sun); border: 3px solid var(--ink); border-radius: 999px; padding: 4px 14px 5px; box-shadow: 0 3px 0 var(--ink); }
.meta { color: #5a5480; font-size: 14px; margin: 0; }