*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{margin:0;background:#d9d2c3;font-family:"Comic Sans MS","Segoe Print",cursive;color:#1c2430}
.sheet{max-width:860px;margin:24px auto;background:#f7f4ea;background-image:linear-gradient(#e7e1d2 1px,transparent 1px),linear-gradient(90deg,#e7e1d2 1px,transparent 1px);background-size:28px 28px;min-height:100vh;padding:28px 22px 48px;box-shadow:8px 8px 0 #1c2430;transform:rotate(-0.4deg)}
.margin{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px;border-bottom:2px solid #c23b3b;padding-bottom:12px}
.margin a{color:#1c2430;text-decoration:none;font-weight:700;background:#ffe08a;padding:6px 10px;transform:rotate(-2deg)}
.margin a.on{background:#c23b3b;color:#fff;transform:rotate(1deg)}
h1{font-family:Georgia,serif;font-size:clamp(1.8rem,5vw,2.8rem);line-height:1.05;margin:0 0 8px;max-width:14em}
.ink{font-family:Georgia,serif;font-size:1.05rem;line-height:1.65;margin:0 0 12px}
.over{display:flex;align-items:center;gap:8px;margin:14px 0}
.over i{font-style:normal;width:52px;font-family:Georgia,serif;font-weight:700}
.balls{display:flex;gap:6px}
.balls span{width:36px;height:36px;border-radius:50%;border:2px solid #1c2430;display:flex;align-items:center;justify-content:center;background:#fff;font-family:Georgia,serif;font-weight:700}
.balls span.w{background:#c23b3b;color:#fff}
.balls span.d{background:#1c2430;color:#fff}
.stamp{display:inline-block;border:3px solid #c23b3b;color:#c23b3b;font-family:Georgia,serif;font-weight:800;letter-spacing:.08em;padding:8px 12px;transform:rotate(-6deg);margin:8px 0 16px}
img.clip{width:100%;height:auto;display:block;margin:10px 0;filter:sepia(.15);border:8px solid #fff;box-shadow:4px 4px 0 #1c2430}
.note{font-size:.95rem;color:#5c6570}
@media(max-width:640px){.sheet{margin:0;transform:none}.balls span{width:30px;height:30px}}