:root{
  --paper:#f7f0e4; --ink:#4a4139; --ink-soft:#7b7166;
  --sage:#b9c9b2; --rose:#e8c3c3; --lav:#cdc7e0; --sand:#e6d4b8;
  --accent:#a98b6f; --shadow:0 6px 18px rgba(106,86,64,.14);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:17px/1.5 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  color:var(--ink); min-height:100%;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.55), transparent 42%),
    radial-gradient(circle at 85% 70%, rgba(232,195,195,.18), transparent 45%),
    var(--paper);
  padding-bottom:28px;
}
main{max-width:720px;margin:0 auto;padding:0 14px}
h1,h2{font-family:Georgia,"Times New Roman",serif;font-weight:600}
.top{max-width:720px;margin:0 auto;padding:22px 14px 12px;text-align:center}
.top-row{display:flex;align-items:center;justify-content:center;gap:10px}
.top h1{margin:0;font-size:28px;letter-spacing:.3px;color:#5c5147;font-style:italic}
.sub{margin:4px 0 12px;color:var(--ink-soft);font-style:italic;font-size:15px}
.months{display:flex;align-items:center;justify-content:center;gap:14px}
.month-label{font-family:Georgia,serif;font-size:17px;min-width:150px}
.mbtn,.chip-btn{
  min-width:44px;min-height:44px;border-radius:12px;border:1px solid #ddd0bd;
  background:#fffdf8;color:var(--ink);font-size:20px;cursor:pointer;line-height:1;
}
.months .mbtn{font-size:24px}
.sheet{
  position:relative;margin:14px 0;padding:20px 16px 22px;border-radius:16px;
  background:#fdfaf3;box-shadow:var(--shadow);border:1px solid rgba(190,173,148,.35);
  overflow:hidden;
}
.grid-sheet{
  background-image:
    linear-gradient(rgba(150,131,106,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(150,131,106,.13) 1px,transparent 1px);
  background-size:24px 24px;
}
.dot-sheet{
  background-image:radial-gradient(rgba(150,131,106,.26) 1.3px,transparent 1.3px);
  background-size:20px 20px;background-color:#fbf6ec;
}
.grid-sheet>*,.dot-sheet>*{position:relative;z-index:1}
.sheet::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.14;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");background-size:140px 140px;
}
.tape{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:92px;height:24px;background:rgba(205,199,224,.55);
  border:1px solid rgba(180,172,205,.5);box-shadow:0 2px 5px rgba(120,110,140,.12);
}
.tape-2{background:rgba(233,206,175,.6);transform:translateX(-50%) rotate(1.6deg)}
.tape-3{background:rgba(185,201,178,.6);transform:translateX(-50%) rotate(-1deg)}
.sheet-title{margin:6px 0 14px;font-size:21px;color:#5f5449;font-style:italic}
.muted{color:var(--ink-soft);font-size:14px;font-family:inherit}