* { box-sizing: border-box; }
:root { color: #201a17; background: #f5ecd6; font-family: 'Nunito', sans-serif; }
body { margin: 0; background-image: radial-gradient(#201a1710 1px, transparent 1px); background-size: 26px 26px; }
main { max-width: 720px; margin: auto; padding: 24px 24px 56px; }
.brand { display: inline-block; }
.brand img { display: block; width: 130px; height: auto; }
.sheet { margin-top: 20px; padding: 32px; background: #fffaf0; border: 3px solid #201a17; border-radius: 20px; box-shadow: 6px 6px 0 #201a17; }
h1 { font: 600 clamp(32px, 6vw, 46px)/1.05 'Fredoka', sans-serif; margin: 0 0 8px; }
.updated { margin: 0 0 24px; font-size: 14px; color: #201a17cc; }
h2 { font: 600 22px/1.25 'Fredoka', sans-serif; margin: 32px 0 10px; }
p, li { font-size: 16px; line-height: 1.6; }
ul { padding-left: 22px; }
a { color: #201a17; font-weight: 700; text-underline-offset: 3px; }
a:focus-visible { outline: 4px solid #f0563e; outline-offset: 4px; }
.home-button { display: inline-block; margin-top: 28px; padding: 13px 24px; border: 3px solid #201a17; border-radius: 12px; background: #b7ce3c; box-shadow: 4px 4px 0 #201a17; text-decoration: none; font-weight: 800; }
.page-links { display: flex; gap: 18px; justify-content: center; margin-top: 28px; font-size: 14px; }
@media (max-width: 480px) { main { padding: 18px 16px 40px; } .sheet { padding: 22px 18px; } p, li { font-size: 15px; } }
.embed-code { margin: 0 0 10px; padding: 12px 14px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; font-size: 13px; line-height: 1.5; background: #201a17; color: #f5ecd6; border-radius: 12px; }
.copy-button { padding: 8px 16px; font: 800 14px/1 'Nunito', sans-serif; color: #201a17; background: #f7c948; border: 3px solid #201a17; border-radius: 10px; box-shadow: 3px 3px 0 #201a17; cursor: pointer; }
.embed-preview { display: flex; justify-content: center; margin-top: 18px; }