#notebook-dialog {
  --notebook-paper: #f9f5e9;
  --notebook-rule: rgba(117, 128, 102, .2);
  --notebook-sage: #65785a;
  width: min(1080px, calc(100vw - 56px));
  max-width: none;
  max-height: calc(100dvh - 28px);
  margin: auto;
  padding: 0 12px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink, #353f30);
  box-shadow: none;
  overflow: auto;
  font-family: var(--hand, 'LXGW WenKai TC', KaiTi, cursive);
}
#notebook-dialog::backdrop {
  background: rgba(31, 37, 27, .63);
  backdrop-filter: blur(7px);
}
#notebook-dialog *, #notebook-dialog *::before, #notebook-dialog *::after { box-sizing: border-box; }
#notebook-dialog button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#notebook-dialog button:focus-visible { outline: 3px solid #ccad6d; outline-offset: 5px; }
#notebook-dialog button:disabled { cursor: default; }
.notebook-shell { width: 100%; padding: 2px 0 4px; }
.notebook-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 17px; color: #f7f4e9; }
.notebook-eyebrow { font: 9px/1.6 Georgia, serif; letter-spacing: .22em; opacity: .65; }
.notebook-contributors { margin: 6px 0 0; font-size: 12px; line-height: 1.5; opacity: .74; overflow-wrap: anywhere; }
#notebook-heading { margin: 3px 0 0; font: 22px/1.3 var(--hand, KaiTi, cursive); font-weight: 400; letter-spacing: .08em; }
.notebook-icon { display: block; width: 20px; height: 20px; flex: 0 0 auto; }
.notebook-close { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #e6ead155; border-radius: 50%; background: #ffffff0a; }
.notebook-close:hover { background: #ffffff20; }
.notebook-stage { perspective: 1800px; padding: 5px 0 13px; }
.notebook-book {
  position: relative;
  height: min(610px, calc(100dvh - 200px));
  min-height: 460px;
  border-radius: 9px 15px 15px 9px;
  background: #697559;
  padding: 9px 10px 12px;
  box-shadow: 0 3px 0 #38482f, 0 8px 0 -3px #657250, 0 18px 28px #18201645, 0 38px 75px #131a1650;
  transform-style: preserve-3d;
}
.notebook-book::after {
  content: ''; position: absolute; z-index: 0; left: 11px; right: 11px; bottom: 5px; height: 15px;
  border-radius: 0 0 10px 5px;
  background: repeating-linear-gradient(to bottom, #eee9d9 0 1px, #c8c4b4 1px 2px, #f2eedf 2px 3px);
  box-shadow: 0 2px 3px #1a291b30;
}
.notebook-spread { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
.notebook-page { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--notebook-paper); }
.notebook-photo-page {
  padding: 29px 35px 34px 33px;
  border-radius: 3px 0 0 4px;
  background-image: radial-gradient(#8a795c16 .65px, transparent .65px), linear-gradient(90deg, transparent 86%, #96876d12 96%, #897b6242 100%);
  background-size: 5px 5px, 100% 100%;
  box-shadow: inset 3px 0 8px #5e57370a;
}
.notebook-photo-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: #7c806b; letter-spacing: .07em; }
.notebook-photo-mount { display: grid; place-items: center; flex: 1; min-height: 0; padding: 24px 10px 14px; }
.notebook-polaroid {
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; max-height: 362px;
  padding: 11px 11px 0; border: 0; background: #fffdf6; box-shadow: 1px 5px 12px #66533e36, 0 0 0 1px #c8bd9f40;
  transform: rotate(-3deg); transition: transform .24s ease, box-shadow .24s ease;
}
.notebook-polaroid:hover { transform: rotate(-1deg) translateY(-3px); box-shadow: 2px 9px 17px #66533e38; }
.notebook-polaroid img { width: 100%; flex: 1; min-height: 0; object-fit: cover; display: block; border-radius: 0; }
.notebook-tape { position: absolute; z-index: 2; top: -13px; left: 35%; width: 32%; height: 28px; opacity: .82; background: repeating-linear-gradient(96deg, #e0c591 0 4px, #d8be8d 4px 5px); transform: rotate(7deg); clip-path: polygon(2% 0, 98% 3%, 100% 12%, 97% 20%, 100% 28%, 97% 39%, 100% 50%, 97% 61%, 100% 73%, 97% 84%, 100% 100%, 0 97%, 3% 86%, 0 74%, 3% 62%, 0 51%, 3% 40%, 0 29%, 3% 18%, 0 8%); }
.notebook-photo-caption { display: flex; align-items: center; justify-content: space-between; min-height: 49px; padding: 6px 7px; font-size: 21px; color: #657456; }
.notebook-photo-caption small { font: 10px/1.3 Georgia, serif; color: #93937e; letter-spacing: .12em; }
.notebook-photo-caption > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 12px; }
.notebook-photo-zoom { position: absolute; display: grid; place-items: center; top: 20px; right: 20px; width: 30px; height: 30px; color: white; background: #29332770; border-radius: 50%; opacity: 0; transition: opacity .2s; }
.notebook-polaroid:hover .notebook-photo-zoom, .notebook-polaroid:focus-visible .notebook-photo-zoom { opacity: 1; }
.notebook-photo-zoom .notebook-icon { width: 16px; height: 16px; }
.notebook-photo-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; }
.notebook-postmark { display: flex; flex-direction: column; justify-content: center; align-items: center; flex: 0 0 auto; width: 88px; min-height: 69px; padding: 10px; border: 1.5px solid #ac6c5e8c; outline: 1px solid #ac6c5e60; outline-offset: -5px; color: #a16a59; border-radius: 50%; transform: rotate(-12deg); }
.notebook-postmark strong { max-width: 76px; font-size: 16px; font-weight: 400; text-align: center; overflow-wrap: anywhere; }
.notebook-postmark span { font-size: 10px; margin-top: 3px; }
.notebook-photo-jot { color: #7c806b; font-size: 17px; transform: rotate(-5deg); }
.notebook-photo-page > .notebook-page-number { position: absolute; left: 27px; bottom: 11px; }
.notebook-writing-page { padding: 29px 37px 19px 37px; border-radius: 0 6px 7px 0; background-image: linear-gradient(90deg, #8c7e5c30, #978a7210 5%, transparent 16%), radial-gradient(#8a795c0e .6px, transparent .6px); background-size: 100% 100%, 4px 4px; }
.notebook-entry-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; font-size: 12px; letter-spacing: .04em; color: #858775; }
.notebook-contribution-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px 0 12px; }
.notebook-author-badge { max-width: 68%; padding: 4px 11px; border: 1px solid #8e9d7250; border-radius: 4px 9px 5px 7px; background: #e5ead8a3; color: #65754b; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; transform: rotate(-2deg); }
.notebook-contribution-index { flex-shrink: 0; font-size: 10px; color: #91947c; }
.notebook-entry-meta > span:last-child { max-width: 60%; text-align: right; }
.notebook-entry-title { flex: 0 0 auto; margin: 19px 0 15px; color: #48543a; font: 30px/1.45 var(--hand, KaiTi, cursive); font-weight: 400; overflow-wrap: anywhere; max-height: 88px; overflow-y: auto; }
.notebook-writing { flex: 1; min-height: 0; overflow-y: auto; background: repeating-linear-gradient(to bottom, transparent 0 31px, var(--notebook-rule) 31px 32px); background-attachment: local; scrollbar-width: thin; scrollbar-color: #bdc0a3 transparent; }
.notebook-note { margin: 0; padding: 0 1px 12px; white-space: pre-wrap; overflow-wrap: anywhere; color: #596048; font: 18px/32px var(--hand, KaiTi, cursive); letter-spacing: .035em; }
.notebook-note-empty { color: #979a84; }
.notebook-page-foot { display: flex; align-items: center; gap: 10px; padding-top: 14px; min-height: 34px; color: #9a9e86; font-size: 10px; }
.notebook-small-flower { color: #a0aa7f; font-size: 22px; line-height: 1; }
.notebook-page-number { color: #96947d; font: 10px/1.3 Georgia, serif; letter-spacing: .12em; }
.notebook-page-foot .notebook-page-number { margin-left: auto; }
.notebook-binding { position: absolute; z-index: 4; top: 10px; bottom: 13px; left: calc(50% - 9px); width: 18px; pointer-events: none; background: linear-gradient(90deg, transparent, #72634a20 27%, #77684c4d 47%, #fff8dc70 50%, #66543a35 54%, transparent 100%); }
.notebook-binding::before { content: ''; position: absolute; inset: 10px 8px; opacity: .5; background: repeating-linear-gradient(to bottom, #736c52 0 3px, transparent 3px 14px); }
.notebook-ribbon { position: absolute; z-index: 5; top: 9px; right: 48px; height: 42px; width: 21px; background: #b28d6d; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); box-shadow: 2px 2px 3px #403b2e30; }
.notebook-photo-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; max-height: 320px; gap: 12px; border: 1px dashed #bec1a9; color: #999e85; font-size: 17px; transform: rotate(-3deg); }
.notebook-photo-empty small { padding: 0 12px; font-size: 13px; text-align: center; }
.notebook-empty-frame { font-size: 50px; color: #adb592; }
.notebook-cover {
  display: none; position: absolute; z-index: 12; top: 0; bottom: 0; left: 50%; right: 0;
  padding: 24px; border-radius: 0 12px 12px 0; transform-origin: left center; backface-visibility: hidden;
  background: repeating-linear-gradient(15deg, #ffffff04 0 1px, transparent 1px 4px), linear-gradient(90deg, #3b4c33, #6e805f 7%, #6b7d5e 92%, #526747);
  box-shadow: 6px 12px 18px #20321e40, inset 0 0 0 1px #829372;
}
.notebook-cover-border { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; padding: 22px; border: 1px solid #e1d3aa60; color: #e6dfbd; }
.notebook-cover-overline { margin-bottom: auto; font: 10px/1.5 Georgia, serif; letter-spacing: .25em; text-align: center; }
.notebook-cover-label { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 90%; min-height: 170px; padding: 20px 10px; border: 1px solid #f0ead255; outline: 1px solid #f0ead233; outline-offset: 5px; }
.notebook-cover-label > span { font-size: 17px; letter-spacing: .15em; }
.notebook-cover-label strong { margin: 10px 0 13px; font-size: 37px; font-weight: 400; text-align: center; }
.notebook-cover-label small { font: 12px/1.3 Georgia, serif; letter-spacing: .15em; }
.notebook-cover-bottom { margin-top: auto; padding-top: 20px; font-size: 12px; letter-spacing: .06em; text-align: center; }
.notebook-opening { animation: notebook-arrive 1.1s cubic-bezier(.18,.7,.16,1) both; }
.notebook-opening .notebook-cover { display: block; animation: notebook-open-cover 1.1s .06s cubic-bezier(.36,.12,.18,1) both; }
.notebook-opening .notebook-spread { animation: notebook-show-paper 1.1s ease both; }
.notebook-leaf { display: none; position: absolute; z-index: 8; top: 9px; bottom: 12px; width: calc(50% - 10px); transform-style: preserve-3d; pointer-events: none; }
.notebook-leaf-face { position: absolute; display: flex; flex-direction: column; inset: 0; overflow: hidden; padding: 29px 37px 19px; background: var(--notebook-paper); backface-visibility: hidden; box-shadow: -9px 4px 18px #50472c26; }
.notebook-leaf-front { background-image: linear-gradient(90deg, #a3946f30, transparent 12%); }
.notebook-leaf-back { transform: rotateY(180deg); background: repeating-linear-gradient(to bottom, #f8f4e8 0 31px, #dcdccc 31px 32px); box-shadow: 10px 4px 18px #50472c33; }
.notebook-flipping-next .notebook-leaf { display: block; left: 50%; transform-origin: left center; animation: notebook-flip-forward .6s cubic-bezier(.42,.06,.2,1) both; }
.notebook-flipping-previous .notebook-leaf { display: block; left: 10px; transform-origin: right center; animation: notebook-flip-backward .6s cubic-bezier(.42,.06,.2,1) both; }
.notebook-flipping-previous .notebook-leaf-front { padding: 29px 35px 34px 33px; }
.notebook-footer { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 12px 8px 0; color: #efecdf; }
.notebook-actions { display: flex; align-items: center; gap: 20px; }
.notebook-actions button { display: flex; align-items: center; gap: 7px; padding: 6px 0; background: transparent; border: 0; font-size: 14px; opacity: .84; }
.notebook-actions button:hover { opacity: 1; }
.notebook-actions .notebook-icon { width: 16px; height: 16px; }
.notebook-pagination { display: flex; align-items: center; gap: 17px; }
.notebook-page-button { display: grid; place-items: center; width: 35px; height: 35px; padding: 0; background: #f5f3e810; border: 1px solid #dddcc23d; border-radius: 50%; }
.notebook-page-button:hover:enabled { background: #f5f3e82a; }
.notebook-page-button:disabled { opacity: .25; }
.notebook-page-status { min-width: 48px; text-align: center; font: 14px/1.5 Georgia, serif; letter-spacing: .1em; }
.notebook-key-hint { min-width: 134px; text-align: right; font-size: 12px; opacity: .5; }
@keyframes notebook-arrive { from { transform: translateX(-12%) rotate(-3deg) scale(.9); } to { transform: translateX(0) rotate(0) scale(1); } }
@keyframes notebook-open-cover { 0%, 12% { transform: rotateY(0); opacity: 1; } 94% { opacity: 1; } 100% { transform: rotateY(-179deg); opacity: 0; } }
@keyframes notebook-show-paper { 0%, 16% { opacity: .05; } 52%, 100% { opacity: 1; } }
@keyframes notebook-flip-forward { 0% { transform: rotateY(0); filter: brightness(1); } 50% { filter: brightness(.89); } 100% { transform: rotateY(-180deg); filter: brightness(1); } }
@keyframes notebook-flip-backward { 0% { transform: rotateY(0); filter: brightness(1); } 50% { filter: brightness(.89); } 100% { transform: rotateY(180deg); filter: brightness(1); } }
@media (max-width: 880px) and (min-width: 681px) {
  .notebook-photo-page { padding: 25px 25px 30px 25px; }
  .notebook-writing-page { padding: 25px 25px 18px; }
  .notebook-note { font-size: 16px; }
  .notebook-entry-title { font-size: 26px; }
  .notebook-photo-jot { max-width: 110px; font-size: 15px; }
  .notebook-key-hint { display: none; }
}
@media (max-width: 680px) {
  #notebook-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 16px); padding: 0 4px 8px; }
  .notebook-toolbar { padding: 0 6px 12px; }
  .notebook-eyebrow { font-size: 8px; }
  #notebook-heading { font-size: 20px; }
  .notebook-close { width: 38px; height: 38px; }
  .notebook-book { height: auto; min-height: 0; padding: 7px 7px 10px; border-radius: 8px; }
  .notebook-stage { padding: 4px 0 9px; perspective: 1200px; }
  .notebook-spread { display: flex; flex-direction: column; height: auto; }
  .notebook-photo-page { min-height: 0; height: 335px; padding: 16px 26px 20px; border-radius: 4px 4px 0 0; background-image: radial-gradient(#8a795c16 .65px, transparent .65px); background-size: 5px 5px; }
  .notebook-photo-meta { font-size: 11px; }
  .notebook-photo-mount { padding: 20px 18px 8px; }
  .notebook-polaroid { max-width: 300px; max-height: 235px; padding: 8px 8px 0; transform: rotate(-2deg); }
  .notebook-photo-caption { min-height: 36px; padding: 5px 5px; font-size: 18px; }
  .notebook-tape { top: -11px; height: 24px; }
  .notebook-photo-bottom { display: none; }
  .notebook-photo-page > .notebook-page-number { bottom: 8px; left: 20px; font-size: 8px; }
  .notebook-photo-zoom { opacity: .75; top: 15px; right: 15px; }
  .notebook-writing-page { min-height: 380px; height: auto; padding: 21px 26px 13px; border-radius: 0 0 5px 4px; background-image: linear-gradient(to bottom, #aa95751a, transparent 12%); border-top: 1px dashed #b7b5996e; }
  .notebook-entry-meta { font-size: 11px; }
  .notebook-contribution-meta { margin-bottom: 12px; }
  .notebook-author-badge { font-size: 14px; }
  .notebook-text-only .notebook-photo-page { height: 185px; }
  .notebook-text-only .notebook-photo-mount { padding-top: 13px; padding-bottom: 0; }
  .notebook-text-only .notebook-photo-empty { gap: 5px; transform: rotate(-1deg); font-size: 15px; }
  .notebook-text-only .notebook-empty-frame { font-size: 28px; }
  .notebook-entry-title { margin: 13px 0 11px; font-size: 26px; max-height: none; overflow: visible; }
  .notebook-writing { flex: 1 0 auto; min-height: 210px; overflow: visible; background: repeating-linear-gradient(to bottom, transparent 0 29px, var(--notebook-rule) 29px 30px); }
  .notebook-note { font-size: 17px; line-height: 30px; letter-spacing: .02em; }
  .notebook-page-foot { padding-top: 10px; }
  .notebook-binding { top: 8px; bottom: 11px; left: 7px; width: 9px; background: linear-gradient(90deg, #92825e38, transparent); }
  .notebook-binding::before { display: none; }
  .notebook-ribbon { top: 7px; right: 20px; height: 32px; width: 17px; }
  .notebook-cover { left: 0; padding: 17px; border-radius: 7px; }
  .notebook-cover-border { padding: 25px; }
  .notebook-cover-label { min-height: 190px; }
  .notebook-cover-label strong { font-size: 42px; }
  .notebook-cover-bottom { padding-top: 30px; }
  .notebook-opening { animation-name: notebook-arrive-mobile; }
  .notebook-footer { gap: 10px; flex-wrap: wrap; padding: 8px 4px 2px; }
  .notebook-actions { gap: 16px; }
  .notebook-actions button { font-size: 13px; }
  .notebook-pagination { gap: 10px; }
  .notebook-page-button { width: 33px; height: 33px; }
  .notebook-page-status { font-size: 13px; min-width: 42px; }
  .notebook-key-hint { display: none; }
  .notebook-leaf { top: 7px; bottom: 10px; width: calc(100% - 14px); }
  .notebook-flipping-next .notebook-leaf, .notebook-flipping-previous .notebook-leaf { left: 7px; transform-origin: left center; }
  .notebook-flipping-previous .notebook-leaf { animation-name: notebook-flip-forward; }
  .notebook-leaf-face { padding: 24px 26px; }
  .notebook-leaf-front { justify-content: center; }
  .notebook-leaf-front .notebook-writing { flex-grow: 0; }
}
@keyframes notebook-arrive-mobile { from { transform: translateY(18px) rotate(-2deg) scale(.95); } to { transform: translateY(0) rotate(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  #notebook-dialog *, #notebook-dialog *::before, #notebook-dialog *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .notebook-opening .notebook-cover { display: none; }
  .notebook-opening .notebook-spread { opacity: 1; }
}

#notebook-dialog .notebook-footer{margin-top:15px;border-top:1px dashed #d4d6bd44;font-family:var(--hand);flex-direction:row;text-align:initial}
@media(max-width:680px){#notebook-dialog .notebook-footer{margin-top:10px;justify-content:space-between;position:sticky;bottom:0;background:#626858eF;padding:12px 8px;border-radius:5px;z-index:15}}