/* 念头本 as paper (notebook.js). The paper keeps its own colours in every theme
   (like the story book): white paper, blue ink in her 蝴蝶兰 hand, grey pencil. */
#nb-box{--nb-paper:#FBFAF6;--nb-ink:#2C3A72;--nb-pencil:rgba(60,60,64,.5);--nb-faint:#8D8A84;margin:0 -4px 8px}
.nbp-pages{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px 4px 14px;scrollbar-width:none}
.nbp-pages::-webkit-scrollbar{display:none}
.nbp-page{position:relative;flex:0 0 100%;min-width:0;max-width:100%;scroll-snap-align:center;min-height:520px;display:flex;perspective:1600px}
/* A page is a card with two faces; it turns like the gallery cards (gallery-wheel.css). */
.nbp-flipper{position:relative;flex:1;min-width:0;display:flex;transition:transform .6s cubic-bezier(.3,1.05,.4,1)}
.nbp-page.turned .nbp-flipper{transform:rotateY(180deg)}
/* 3D only while turning: iOS WebKit stops painting backface-hidden faces inside a
   swiped scroller, so at rest a page is flat (the back, when shown, too). */
.nbp-page.nbp-3d .nbp-flipper{transform-style:preserve-3d}
.nbp-page.nbp-3d .nbp-face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.nbp-page.nbp-3d .nbp-face.back{display:block}
.nbp-page.nbp-instant .nbp-flipper{transition:none}
.nbp-page.nbp-flat .nbp-flipper{transition:none;transform:none}
.nbp-page.nbp-flat .nbp-face.front{visibility:hidden}
.nbp-page.nbp-flat .nbp-face.back{display:block;transform:none}
.nbp-face{position:relative;flex:1;min-width:0;background:var(--nb-paper);color:var(--nb-ink);border-radius:14px;
  box-shadow:0 10px 30px rgba(40,36,30,.10),0 1px 0 rgba(255,255,255,.8) inset;padding:14px 16px 16px;box-sizing:border-box;
  background-image:linear-gradient(rgba(255,255,255,.5),rgba(0,0,0,0) 40%),radial-gradient(circle at 80% 0%,rgba(0,0,0,.025),transparent 60%)}
.nbp-face.back{display:none;position:absolute;inset:0;transform:rotateY(180deg);background-image:linear-gradient(rgba(0,0,0,.012),rgba(0,0,0,.012)),linear-gradient(rgba(255,255,255,.5),rgba(0,0,0,0) 40%)}
@media (prefers-reduced-motion:reduce){.nbp-flipper{transition:none}}
.nbp-head{display:flex;justify-content:space-between;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:var(--nb-faint)}
.nbp-field{position:absolute;left:12px;right:12px;top:34px;bottom:30px}
.nbp-svg{position:absolute;left:12px;top:34px;pointer-events:none;overflow:visible}
.nbp-line{fill:none;stroke:var(--nb-pencil);stroke-width:1.1;stroke-linecap:round}
.nbp-ring{fill:none;stroke:var(--nb-pencil);stroke-width:1}
.nbp-node{position:absolute;max-width:8.6em;border:0;background:none;padding:2px 3px;color:var(--nb-ink);text-align:center;
  font:17px/1.45 var(--nb-hand,var(--postcard-font,cursive));-webkit-tap-highlight-color:transparent}
.nbp-node sup{font:10px var(--nb-hand,var(--postcard-font,cursive));color:var(--nb-faint);margin-left:2px}
.nbp-node em{display:block;font-style:normal;font-size:12px;color:var(--nb-faint)}
.nbp-node.hl .nbp-t{background:linear-gradient(transparent 52%,rgba(246,222,90,.62) 52%,rgba(246,222,90,.62) 88%,transparent 88%);padding:0 2px}
.nbp-node.shelved{color:var(--nb-faint)}
.nbp-node.covered .nbp-t{color:var(--nb-faint);border:1px dashed rgba(60,60,64,.35);border-radius:3px;padding:2px 8px}
.nbp-foot{position:absolute;left:0;right:0;bottom:10px;text-align:center;font:12px var(--nb-hand,var(--postcard-font,cursive));color:var(--nb-faint)}
.nbp-empty{padding:120px 10px;text-align:center;font:15px/1.8 var(--nb-hand,var(--postcard-font,cursive));color:var(--nb-faint)}
.nbp-title{margin-top:14px;font:20px var(--nb-hand,var(--postcard-font,cursive))}
.nbp-title small{font-size:12px;color:var(--nb-faint)}
.nbp-sub{font:13px/1.6 var(--nb-hand,var(--postcard-font,cursive));color:var(--nb-faint);margin:2px 0 14px}
.nbp-stickies{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.nbp-sticky{min-width:0;border:0;text-align:left;background:none;padding:0;transform:rotate(var(--r));color:var(--nb-ink)}
.nbp-sticky-note{position:relative;display:block;background-color:var(--sc,#DCE3D2);padding:16px 12px 18px;min-height:80px;font:15px/1.5 var(--nb-hand,var(--postcard-font,cursive));
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .06 0'/></filter><rect width='120' height='120' filter='url(%23f)'/></svg>"),linear-gradient(170deg,rgba(255,255,255,.28),rgba(0,0,0,.02) 70%,rgba(0,0,0,.05));
  box-shadow:0 1px 1px rgba(0,0,0,.05),0 8px 12px -6px rgba(40,36,30,.22);border-radius:1px 1px 2px 14px/1px 1px 2px 6px}
.nbp-sticky-note::before{content:'';position:absolute;left:50%;top:-7px;width:46px;height:15px;transform:translateX(-50%) rotate(-3deg);background:rgba(255,255,250,.55);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.nbp-sticky-meta{display:block;margin-top:6px;font:12px/1.5 var(--nb-hand,var(--postcard-font,cursive));color:var(--nb-faint)}
.nbp-trash-row{display:block;width:100%;min-width:0;text-align:left;border:0;border-top:1px dashed rgba(60,60,64,.22);background:none;padding:12px 2px;color:var(--nb-ink)}
.nbp-trash-k,.nbp-trash-v{font:12px var(--nb-hand,var(--postcard-font,cursive));color:var(--nb-faint)}
.nbp-trash-v{float:right}
.nbp-trash-t{display:block;margin-top:4px;font:16px/1.5 var(--nb-hand,var(--postcard-font,cursive))}
.nbp-trash-w{display:block;margin-top:3px;font:13px var(--nb-hand,var(--postcard-font,cursive));color:var(--nb-faint)}
.nbp-under summary{list-style:none;cursor:pointer;margin-top:12px;text-align:center;font:13px var(--nb-hand,var(--postcard-font,cursive));color:var(--nb-faint)}
.nbp-under summary::-webkit-details-marker{display:none}
/* 折纸: a strip of paper drops over the page; its folds hang from one another
   and fall open on the 回执's springs (sigillo.js drives rotateX, shade, gloss). */
.nbp-fold-ov{position:fixed;inset:0;z-index:9997;background:rgba(245,244,240,.82);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;flex-direction:column;align-items:center;
  padding:calc(env(safe-area-inset-top,0px) + 90px) 22px 30px;opacity:0;pointer-events:none;transition:opacity .25s;overflow-y:auto}
.nbp-fold-ov.show{opacity:1;pointer-events:auto}
.nbp-strip-wrap{position:relative;width:100%;max-width:380px;transform:translateY(-34px) rotate(-3deg);transition:transform .5s cubic-bezier(.2,.9,.3,1.12)}
.nbp-fold-ov.show .nbp-strip-wrap{transform:translateY(0) rotate(-1.2deg)}
.nbp-lift{position:absolute;left:2%;right:2%;top:3px;box-shadow:0 14px 28px rgba(40,36,30,.16),0 2px 6px rgba(40,36,30,.08);border-radius:2px}
.nbp-strip{position:relative;width:100%;perspective:1000px;perspective-origin:50% 20%;color:#2C3A72}
.nbp-measure{visibility:hidden}
.nbp-pnl{position:relative;width:100%;transform-style:preserve-3d;transform-origin:50% 0;will-change:transform}
.nbp-kid{position:absolute;left:0;right:0;top:100%;transform-style:preserve-3d}
.nbp-pnl>.face{position:absolute;inset:0;overflow:hidden;background:#FDFCF8;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.nbp-kid>.nbp-pnl>.face{border-top:1px dashed rgba(60,60,64,.25)}
.nbp-pnl>.face>.shade{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;background:linear-gradient(rgba(40,36,30,.38),rgba(40,36,30,.14) 45%,rgba(40,36,30,.05))}
.nbp-pnl>.face>.gloss{position:absolute;left:0;right:0;top:-60%;height:60%;pointer-events:none;z-index:2;opacity:0;background:linear-gradient(175deg,transparent 10%,rgba(255,255,255,.55) 50%,transparent 90%)}
.nbp-fold-v{padding:14px 16px 14px}
.nbp-fold-k{display:flex;justify-content:space-between;font:12px var(--nb-hand,var(--postcard-font,cursive));color:#8D8A84}
.nbp-fold-t{margin-top:6px;font:18px/1.5 var(--nb-hand,var(--postcard-font,cursive))}
.nbp-fold-w{margin-top:6px;font:13px/1.6 var(--nb-hand,var(--postcard-font,cursive));color:#8D8A84}
.nbp-fold-w span{margin-right:8px}
.nbp-fold-links{padding:10px 16px 14px;font:13px/1.8 var(--nb-hand,var(--postcard-font,cursive));color:#8D8A84;border-top:1px solid rgba(60,60,64,.12)}
.nbp-fold-links b{font-weight:500;color:#2C3A72}
.nbp-fold-btns{display:flex;flex-direction:column;align-items:center;will-change:transform}
.nbp-fold-more,.nbp-fold-close{margin-top:16px;border:0;background:none;font:13px var(--nb-hand,var(--postcard-font,cursive));color:#8D8A84}
.nbp-fold-more:empty{display:none}
.nbp-fold-close{margin-top:8px;text-decoration:underline dotted}
@media (prefers-reduced-motion:reduce){.nbp-strip-wrap{transition:none}}

/* Ink (10-24): a page is written in the first time it comes into view.
   nbp-wait = not yet written; nbp-play = writing; neither = still. */
.nbp-page i{font-style:normal}
.nbp-wait i,.nbp-wait .nbp-fade{opacity:0}
.nbp-wait .nbp-line,.nbp-wait .nbp-ring{stroke-dasharray:1;stroke-dashoffset:1}
.nbp-wait .hl .nbp-t{background-size:0 100%}
.nbp-wait .covered .nbp-t{border-color:transparent}
.nbp-wait .nbp-sticky{opacity:0}
.nbp-play i{animation:nbp-ink .42s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--t0,0ms) + var(--i,0)*55ms)}
@keyframes nbp-ink{from{opacity:0;filter:blur(1.2px)}to{opacity:1;filter:none}}
.nbp-play .nbp-fade{animation:nbp-fade .5s ease-out both;animation-delay:var(--t1,0ms)}
@keyframes nbp-fade{from{opacity:0}to{opacity:1}}
.nbp-play .nbp-line{stroke-dasharray:1;animation:nbp-draw var(--dur,.4s) cubic-bezier(.35,.1,.3,1) both;animation-delay:var(--t0,0ms)}
.nbp-play .nbp-ring{stroke-dasharray:1;animation:nbp-draw .5s cubic-bezier(.35,.1,.3,1) both;animation-delay:var(--t0,0ms)}
@keyframes nbp-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.nbp-node.hl .nbp-t{background-repeat:no-repeat;background-size:100% 100%}
.nbp-play .hl .nbp-t{animation:nbp-hl .55s cubic-bezier(.3,.6,.3,1) both;animation-delay:calc(var(--t1,0ms) + 120ms)}
@keyframes nbp-hl{from{background-size:0 100%}to{background-size:100% 100%}}
.nbp-play .covered .nbp-t{animation:nbp-box .5s ease-out both;animation-delay:var(--t0,0ms)}
@keyframes nbp-box{from{border-color:transparent}}
/* Sticky notes are pressed on one by one, then written. */
.nbp-play .nbp-sticky{animation:nbp-stick .55s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:var(--d,0ms)}
@keyframes nbp-stick{from{opacity:0;transform:translateY(-14px) rotate(calc(var(--r) + 5deg)) scale(1.04)}to{opacity:1;transform:rotate(var(--r))}}
.nbp-wait .nbp-still i,.nbp-wait .nbp-still .nbp-fade{opacity:1}
.nbp-play .nbp-still i,.nbp-play .nbp-still .nbp-fade{animation:none}
@media (prefers-reduced-motion:reduce){.nbp-play *{animation:none!important}}

/* On his 「想明白了」 page: a small paperclip, not a badge (Ian: 不要成就墙). */
.nbp-sticky{position:relative}
.nbp-sticky.on-page::after{content:'';position:absolute;right:14px;top:-10px;width:9px;height:26px;border:1.5px solid rgba(110,110,116,.7);border-radius:6px;transform:rotate(8deg)}

/* 回放 (10-24): the first page replays his last sitting. */
.nbr .nbr-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:12px}
.nbr-title{font:20px var(--nb-hand,var(--postcard-font,cursive));white-space:nowrap}
.nbr-cap{font:12.5px/1.4 var(--nb-hand,var(--postcard-font,cursive));color:#5A6699;text-align:right;opacity:0;transform:translateY(3px);transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.3,1)}
.nbr-cap.on{opacity:1;transform:none}
.nbr-when{margin-top:4px;font:12.5px var(--nb-hand,var(--postcard-font,cursive));color:var(--nb-ink)}
.nbr-stats{margin-top:2px;font:12px var(--nb-hand,var(--postcard-font,cursive));color:var(--nb-faint)}
.nbr-go{border:0;background:none;padding:0;font:inherit;color:inherit;text-decoration:underline dotted;text-underline-offset:3px}
.nbr-sent{min-height:92px;margin-top:12px}
.nbr-k{font:11px var(--nb-hand,var(--postcard-font,cursive));color:var(--nb-faint)}
.nbr-old,.nbr-new{margin-top:4px;font:16px/1.55 var(--nb-hand,var(--postcard-font,cursive))}
.nbr-new i{font-style:normal}
/* The strike is drawn across the old words (all their lines, left to right). */
.nbr-old span{background:linear-gradient(transparent 52%,rgba(44,58,114,.75) 52%,rgba(44,58,114,.75) 58%,transparent 58%) no-repeat;background-size:0 100%;-webkit-box-decoration-break:slice;box-decoration-break:slice}
.nbr-old:has(+.nbr-new) span{animation:nbr-strike .6s cubic-bezier(.4,.1,.3,1) .1s both;color:rgba(44,58,114,.55);font-size:14px}
.nbr-old:has(+.nbr-new){font-size:14px;color:rgba(44,58,114,.55);transition:color .6s}
@keyframes nbr-strike{from{background-size:0 100%}to{background-size:100% 100%}}
.nbr-new .nbr-ink i{animation:nbp-ink .42s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--t0,0ms) + var(--i,0)*55ms)}
.nbr-tag{font:12px var(--nb-hand,var(--postcard-font,cursive));font-style:normal;color:#6E7A5E;background:#DCE3D2;padding:1px 6px;margin-left:4px;animation:nbp-fade .5s ease-out both;animation-delay:calc(var(--t0,0ms) + 400ms)}
.nbr-now .nbr-ink i,.nbr-now .nbr-tag,.nbr-now .nbr-old span{animation:none!important;background-size:100% 100%}
.nbp-page.nbr{min-height:610px}
.nbr .nbr-svg{position:absolute;left:12px;top:236px;pointer-events:none;overflow:visible}
.nbr .nbr-field{position:absolute;left:12px;right:12px;top:236px;bottom:50px}
.nbr .nbp-node i{font-style:normal}
.nbr-unborn{opacity:0}
.nbr-born i{animation:nbp-ink .42s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--t0,0ms) + var(--i,0)*55ms)}
.nbr-born sup{animation:nbp-fade .4s both;animation-delay:var(--t0,0ms)}
/* Lines: new ones drawn in blue ink; erased ones leave a faint trace. */
.nbr .nbp-line.nbr-new{stroke:rgba(44,58,114,.8);stroke-width:1.3;stroke-dasharray:1;stroke-dashoffset:1}
.nbr .nbp-line.nbr-draw{animation:nbp-draw .8s cubic-bezier(.35,.1,.3,1) both}
.nbr .nbp-line.nbr-erase{animation:nbr-erase .9s ease-out both}
@keyframes nbr-erase{0%{opacity:1}35%{opacity:.55;stroke-width:2.4}100%{opacity:.14;stroke-width:2.4}}
.nbr .nbp-line.nbr-now{animation-duration:0s!important}
.nbr-hl .nbp-t{animation:nbp-hl .6s cubic-bezier(.3,.6,.3,1) both}
.nbr-dropped .nbp-t{color:var(--nb-faint);text-decoration:line-through;text-decoration-color:rgba(60,60,64,.45);transition:color .6s}
.nbr-resolved .nbp-t{background:#DCE3D2;padding:0 4px;transition:background .6s}
.nbr-back{animation:nbp-fade .6s both}
/* 搁着: a scrap of tracing paper laid over the thought. */
.nbr-vellum{position:absolute;pointer-events:none;background:linear-gradient(225deg,rgba(214,220,232,.85) 0 9px,rgba(232,236,244,.42) 9px);border:1px solid rgba(150,160,185,.32);
  box-shadow:0 2px 6px rgba(40,36,30,.06);transform:rotate(-2deg);animation:nbr-lay .55s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes nbr-lay{from{opacity:0;transform:translateY(-14px) rotate(-7deg)}to{opacity:1;transform:rotate(-2deg)}}
.nbr-vellum.nbr-now,.nbr-now,.nbr-now i,.nbr-now sup,.nbr-now .nbp-t{animation:none!important}
.nbr-bar{position:absolute;left:16px;right:16px;bottom:14px;display:flex;align-items:center;gap:8px}
.nbr-play{width:30px;height:30px;padding:5px;border:0;background:none;color:#2C3A72}
.nbr-play svg{width:100%;height:100%}
.nbr-playing .nbr-play{opacity:.35}
.nbr-hint{font:12px var(--nb-hand,var(--postcard-font,cursive));color:var(--nb-faint)}
@media (prefers-reduced-motion:reduce){.nbr *{animation:none!important;transition:none!important}}

/* 时间轴 (10-24): one dot per sitting under the replay; the chosen one is lit
   yellow and the whole notebook fades back to how it was then. */
.nbp-pages{transition:opacity .22s ease}
.nbp-pages.nbp-fading{opacity:0}
.nbr .nbr-field{bottom:66px}
.nbt{flex:1;min-width:0}
.nbt-track{display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0;scroll-behavior:smooth}
.nbt-track::-webkit-scrollbar{display:none}
.nbt-dot{position:relative;flex:0 0 42px;height:36px;border:0;background:none;padding:0;-webkit-tap-highlight-color:transparent}
.nbt-dot::before{content:'';position:absolute;top:11px;left:0;right:0;height:1px;background:rgba(60,60,64,.22)}
.nbt-dot:first-child::before{left:50%}.nbt-dot:last-child::before{right:50%}
.nbt-dot i{position:absolute;left:50%;top:11px;width:9px;height:9px;margin:-5px 0 0 -5px;border:1px solid rgba(60,60,64,.5);border-radius:50%;background:var(--nb-paper);
  transition:background .25s,border-color .25s,transform .3s cubic-bezier(.2,.9,.3,1.3)}
.nbt-dot.on i{background:#F2D35B;border-color:#D4B43A;transform:scale(1.25)}
.nbt-dot span{position:absolute;left:0;right:0;top:20px;text-align:center;font:10px var(--nb-hand,var(--postcard-font,cursive));color:var(--nb-faint);white-space:nowrap}
.nbt-dot.on span{color:var(--nb-ink)}

/* 背面图例 (10-24): the corner 「图例」 turns the sheet over. */
.nbp-flip{position:absolute;right:14px;bottom:10px;z-index:2;border:0;background:none;padding:4px 2px;font:11px var(--nb-hand,var(--postcard-font,cursive));color:var(--nb-faint);text-decoration:underline dotted;text-underline-offset:3px}
.nbp-lg{margin-top:10px}
.nbp-lg-row{display:flex;align-items:center;gap:12px;padding:6px 0;min-height:30px;border-bottom:1px dashed rgba(60,60,64,.12)}
.nbp-lg-row:last-child{border-bottom:0}
.nbp-lg-m{flex:0 0 76px;display:flex;justify-content:center;align-items:center;font:14px var(--nb-hand,var(--postcard-font,cursive));color:var(--nb-ink)}
.nbp-lg-m svg{width:64px;height:20px;overflow:visible}
.nbp-lg-m sup{font-size:9px;color:var(--nb-faint);margin-left:1px}
.lg-pencil,.lg-blue,.lg-trace{fill:none;stroke-linecap:round}
.lg-pencil{stroke:var(--nb-pencil);stroke-width:1.1}
.lg-blue{stroke:rgba(44,58,114,.8);stroke-width:1.3}
.lg-trace{stroke:rgba(60,60,64,.14);stroke-width:2.4}
.lg-ring{padding:3px 9px;border:1px solid var(--nb-pencil);border-radius:50%;box-shadow:0 0 0 3px var(--nb-paper),0 0 0 4px rgba(60,60,64,.35)}
.lg-hl{background:linear-gradient(transparent 52%,rgba(246,222,90,.62) 52%,rgba(246,222,90,.62) 88%,transparent 88%);padding:0 3px}
.lg-vellum{padding:3px 10px;background:linear-gradient(225deg,rgba(214,220,232,.85) 0 7px,rgba(232,236,244,.5) 7px);border:1px solid rgba(150,160,185,.32);transform:rotate(-2deg);color:var(--nb-faint)}
.lg-old{color:rgba(44,58,114,.55);font-size:12px;background:linear-gradient(transparent 52%,rgba(44,58,114,.75) 52%,rgba(44,58,114,.75) 58%,transparent 58%)}
.lg-cover{color:var(--nb-faint);border:1px dashed rgba(60,60,64,.35);border-radius:3px;padding:2px 8px;font-size:12px}
.lg-sticky{position:relative;width:30px;height:26px;background:#DCE3D2;box-shadow:0 4px 6px -3px rgba(40,36,30,.25);transform:rotate(-3deg)}
.lg-sticky::after{content:'';position:absolute;right:5px;top:-7px;width:6px;height:17px;border:1.3px solid rgba(110,110,116,.7);border-radius:5px;transform:rotate(8deg)}
.nbp-lg-t{flex:1;font:12.5px/1.5 var(--nb-hand,var(--postcard-font,cursive));color:var(--nb-faint)}
.nbp-lg-t b{font-weight:400;font-size:14px;color:var(--nb-ink);margin-right:8px}
.nbp-lg-foot{margin-top:14px;font:12px/1.7 var(--nb-hand,var(--postcard-font,cursive));color:var(--nb-faint)}
.nbp-sticky-note,.nbp-sticky-meta,.nbp-trash-t,.nbp-trash-w,.nbp-fold-t,.nbp-fold-w{overflow-wrap:anywhere}