/* Folio landing toys: hero-page, shelf, paper, pdf. Everything is prefixed tp-.
   Tokens come from site.css (:root) with fallbacks. Real Folio look: cream sheet,
   blue rules, red margin line, marker bands behind the lower half of the words. */

[data-demo="hero-page"],[data-demo="shelf"],[data-demo="paper"],[data-demo="pdf"],[data-demo="notebook"],.tp-pv-scrim{
  --tp-paper:var(--paper,#FBF7EE); --tp-surface:var(--surface,#F3EDE0); --tp-sheet:var(--sheet,#FFFDF8);
  --tp-line:var(--line,#E4DCCB); --tp-ink:var(--ink,#1D1B2E); --tp-ink2:var(--ink-2,#5E5B70); --tp-ink3:var(--ink-3,#8C889C);
  --tp-hl:var(--hl,#FFD84D); --tp-margin:var(--margin,#C2352B); --tp-rule:var(--rule,#B9C4F0); --tp-accent:var(--accent,#4A55C9);
  --tp-m-pink:var(--m-pink,#FEB4C2); --tp-m-mint:var(--m-mint,#9BFBE1); --tp-m-lime:var(--m-lime,#BFFA37);
  --tp-m-mocha:var(--m-mocha,#C3938B); --tp-m-coral:var(--m-coral,#E79388);
  --tp-display:var(--f-display,"Instrument Serif",Georgia,serif);
  --tp-sans:var(--f-sans,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif);
  --tp-hand:var(--f-hand,"Kalam","Segoe Print","Bradley Hand",cursive);
  --tp-spring:var(--ease-spring,cubic-bezier(.34,1.56,.64,1)); --tp-out:var(--ease-out,cubic-bezier(.22,1,.36,1));
  --tp-rule-c:color-mix(in srgb,var(--tp-rule) 82%,transparent);
  --tp-margin-c:color-mix(in srgb,var(--tp-margin) 58%,transparent);
  font-family:var(--tp-sans); color:var(--tp-ink); text-align:left;
}
[data-demo="hero-page"],[data-demo="shelf"],[data-demo="paper"],[data-demo="pdf"],[data-demo="notebook"]{
  display:block; position:relative; width:100%; min-width:0; container-type:inline-size;
}
/* Reserve the height so nothing shifts when the toy is built (values measured, see toys-page.js). */
[data-demo="hero-page"]{min-height:560px}
[data-demo="shelf"]{min-height:236px}
[data-demo="paper"]{min-height:284px}
[data-demo="pdf"]{min-height:456px}
[data-demo="notebook"]{min-height:470px}
@media (max-width:520px){
  [data-demo="hero-page"]{min-height:690px}
  [data-demo="shelf"]{min-height:218px}
  [data-demo="pdf"]{min-height:424px}
}
@media (max-width:640px){[data-demo="notebook"]{min-height:560px}}

.tp-hp *,.tp-sh *,.tp-pp *,.tp-pd *,.tp-pv *,.tp-nb *{box-sizing:border-box}
.tp-hp :where(button),.tp-sh :where(button),.tp-pp :where(button),.tp-pd :where(button),.tp-pv :where(button),.tp-nb :where(button){font:inherit;color:inherit;margin:0;-webkit-tap-highlight-color:transparent}
.tp-hp :focus-visible,.tp-sh :focus-visible,.tp-pp :focus-visible,.tp-pd :focus-visible,.tp-pv :focus-visible,.tp-nb :focus-visible{
  outline:2px solid var(--tp-accent); outline-offset:2px;
}

/* ===================================================================== 1. HERO PAGE */
.tp-hp{
  position:relative; max-width:640px; margin:0 auto; overflow:hidden;
  background:var(--tp-sheet); border:1px solid var(--tp-line); border-radius:18px;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 2px 6px rgba(29,27,46,.06),0 28px 60px -22px rgba(29,27,46,.28);
}
.tp-hp-bar{
  position:relative; display:flex; align-items:center; gap:7px; height:38px; padding:0 14px;
  background:var(--tp-surface); border-bottom:1px solid var(--tp-line);
}
.tp-dot{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.15)}
.tp-dot:nth-child(1){background:#FF5F57}.tp-dot:nth-child(2){background:#FEBC2E}.tp-dot:nth-child(3){background:#28C840}
.tp-hp-name{position:absolute;left:64px;right:64px;text-align:center;font-size:12px;font-weight:550;letter-spacing:.01em;color:var(--tp-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.tp-hp-sheet{position:relative;isolation:isolate;background:var(--tp-sheet);
  -webkit-user-select:none;user-select:none}
.tp-hp-sheet::before{ /* margin line, 44px from the left */
  content:"";position:absolute;z-index:1;left:44px;top:0;bottom:0;width:1px;background:var(--tp-margin-c);pointer-events:none;
}
.tp-hp-sheet::after{ /* paper grain */
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .1 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.tp-hp-head{padding:20px 20px 12px 60px}
.tp-hp-title{margin:0;font:400 46px/1.05 var(--tp-display);letter-spacing:-.012em;color:var(--tp-ink)}
.tp-hp-body{
  position:relative;isolation:isolate;padding:0 20px 112px 60px;
  background:linear-gradient(to bottom,transparent 27px,var(--tp-rule-c) 27px,var(--tp-rule-c) 28px) 0 0/100% 28px repeat-y;
  border-top:0;
}
.tp-hp-s{
  display:block;margin:0;font-size:16px;line-height:28px;color:var(--tp-ink);border-radius:6px;cursor:text;
}
.tp-hp-s:focus-visible{outline-offset:0}
.tp-w{position:relative;display:inline-block;vertical-align:top;white-space:pre;line-height:28px;touch-action:pan-y}
.tp-w::before{
  content:"";position:absolute;z-index:-1;left:-1px;right:0;top:45%;bottom:5%;border-radius:0;pointer-events:none;
  background:var(--c,rgba(29,27,46,.08));mix-blend-mode:multiply;opacity:.85;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .16s ease-in,background-color .25s;
}
.tp-w.tp-on::before{transform:scaleX(1);transition:transform var(--t,.14s) cubic-bezier(.3,.7,.35,1) var(--d,0s),background-color .25s}
.tp-w.tp-f::before{border-top-left-radius:5px;border-bottom-left-radius:5px;left:-2px}
.tp-w.tp-l::before{border-top-right-radius:5px;border-bottom-right-radius:5px;right:.32em}
@media (hover:hover){.tp-w:not(.tp-on):hover::before{transform:scaleX(1);border-radius:4px;right:.32em}}

.tp-fmt{
  position:absolute;z-index:5;left:0;top:0;display:flex;align-items:center;gap:4px;padding:5px 5px 5px 8px;
  border-radius:999px;background:color-mix(in srgb,var(--tp-sheet) 74%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.7);backdrop-filter:blur(16px) saturate(1.7);
  border:1px solid rgba(29,27,46,.1);
  box-shadow:0 10px 28px -8px rgba(29,27,46,.34),0 1px 0 rgba(255,255,255,.8) inset;
  opacity:0;transform:translateY(8px) scale(.92);transform-origin:50% 100%;pointer-events:none;visibility:hidden;
  transition:opacity .18s,transform .38s var(--tp-spring),visibility 0s .38s;
}
.tp-fmt.tp-show{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .18s,transform .38s var(--tp-spring),visibility 0s}
.tp-sw{position:relative;width:24px;height:24px;border:0;padding:0;border-radius:50%;background:none;cursor:pointer;flex:none}
.tp-sw::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(29,27,46,.14);transition:transform .25s var(--tp-spring)}
.tp-sw:hover::before{transform:scale(1.14)}
.tp-sw[aria-pressed="true"]::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 2px var(--tp-ink)}
.tp-fmt-sep{width:1px;height:18px;margin:0 3px;background:rgba(29,27,46,.14);flex:none}
.tp-mk{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px 0 9px;border:0;border-radius:999px;cursor:pointer;
  background:var(--tp-ink);color:var(--tp-paper);font-size:12.5px;font-weight:600;white-space:nowrap;
  transition:transform .25s var(--tp-spring),background-color .2s;
}
.tp-mk svg{width:14px;height:14px;flex:none}
.tp-mk:hover{transform:scale(1.04)}
.tp-mk:active{transform:scale(.95)}

.tp-stack{position:absolute;z-index:3;right:16px;bottom:14px;width:148px;height:84px}
.tp-stack-empty{
  position:absolute;inset:0;display:grid;place-items:center;padding:8px;text-align:center;border-radius:10px;
  border:1.5px dashed rgba(29,27,46,.2);font-size:11.5px;line-height:1.3;color:var(--tp-ink3);
  background:color-mix(in srgb,var(--tp-sheet) 70%,transparent);
}
.tp-count{
  position:absolute;z-index:4;left:-6px;top:-11px;padding:2px 9px;border-radius:999px;background:var(--tp-ink);color:var(--tp-paper);
  font-size:11px;font-weight:600;letter-spacing:.01em;pointer-events:none;
}
.tp-count.tp-bump{animation:tp-bump .5s var(--tp-spring)}
@keyframes tp-bump{0%{transform:scale(.7)}100%{transform:none}}
.tp-card{
  position:absolute;inset:0;padding:0;border:0;background:none;cursor:pointer;perspective:700px;
  transform:translate(calc(var(--i,0)*-5px),calc(var(--i,0)*-4px)) rotate(calc(var(--i,0)*-2.4deg));
  transition:transform .4s var(--tp-spring);
}
.tp-card[data-top="0"]{cursor:default;pointer-events:none}
.tp-card-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s var(--tp-spring)}
.tp-card.tp-flip .tp-card-in{transform:rotateY(180deg)}
.tp-card.tp-pop .tp-card-in{animation:tp-pop .45s var(--tp-spring)}
@keyframes tp-pop{0%{transform:scale(.94)}100%{transform:none}}
.tp-face,.tp-fly{
  display:flex;flex-direction:column;justify-content:center;gap:4px;padding:9px 11px;border-radius:10px;text-align:left;
  background:#fff;border:1px solid var(--tp-line);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 18px -8px rgba(29,27,46,.4),0 1px 3px rgba(29,27,46,.1);
}
.tp-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:opacity 0s linear .15s}
/* Safari flattens the 3D card inside the <button>, so backface-visibility alone shows the back mirrored: swap the faces half way through the turn */
.tp-face.tp-back{opacity:0}
.tp-card.tp-flip .tp-face:not(.tp-back){opacity:0}
.tp-card.tp-flip .tp-face.tp-back{opacity:1}
.tp-face.tp-back{transform:rotateY(180deg);background:#FFFBEA}
.tp-tag{font-size:8.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--tp-ink3)}
.tp-q{font-size:11.5px;line-height:1.32;color:var(--tp-ink);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.tp-a{font:400 22px/1.05 var(--tp-display);color:var(--tp-ink);overflow-wrap:anywhere}
.tp-a.tp-sm{font-size:17px}
.tp-fly{position:absolute;z-index:7;pointer-events:none;will-change:transform}

.tp-ghost{
  position:absolute;z-index:8;left:0;top:0;width:20px;height:20px;margin:-2px 0 0 -2px;pointer-events:none;opacity:0;
  transition:transform .9s var(--tp-out),opacity .3s;filter:drop-shadow(0 2px 3px rgba(29,27,46,.3));
}
.tp-ghost.tp-press{transition:transform .2s;}
.tp-hp-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;height:46px;padding:0 16px;
  background:var(--tp-surface);border-top:1px solid var(--tp-line);font-size:12.5px;color:var(--tp-ink2);
}
.tp-hint{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tp-text-btn{border:0;background:none;padding:6px 4px;cursor:pointer;font-size:12.5px;color:var(--tp-ink3);border-radius:6px;transition:color .2s}
.tp-text-btn:hover{color:var(--tp-ink);text-decoration:underline;text-underline-offset:3px}

@container (max-width:420px){
  .tp-hp-title{font-size:38px}
  .tp-hp-body{padding-right:14px}
  .tp-fmt{padding:4px 4px 4px 6px;gap:2px}
  .tp-mk{padding:0 10px 0 8px}
}
@media (pointer:coarse){.tp-sw{width:28px;height:28px}.tp-sw::before{inset:4px}}

/* ===================================================================== 2. SHELF */
.tp-sh{position:relative}
.tp-sh-scroll{
  overflow-x:auto;overflow-y:clip;padding:46px 0 36px;scrollbar-width:none;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
.tp-sh-scroll::-webkit-scrollbar{display:none}
.tp-sh-track{
  position:relative;display:flex;justify-content:center;gap:4px;width:max-content;min-width:100%;padding:0 20px;
}
.tp-sh-track::after{ /* the glass ledge */
  content:"";position:absolute;left:6px;right:6px;bottom:-13px;height:14px;z-index:0;border-radius:8px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.35));
  border:1px solid rgba(29,27,46,.08);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 24px -12px rgba(29,27,46,.34);
}
.tp-book{
  position:relative;z-index:1;flex:none;padding:0;border:0;background:none;cursor:pointer;scroll-snap-align:center;
  width:clamp(84px,calc((100cqw - 74px) / 6),142px);aspect-ratio:378/474;
  transform:rotate(var(--r,0deg));transition:transform .55s var(--tp-spring);
  -webkit-user-select:none;user-select:none;
}
.tp-book:focus-visible{outline:none}
.tp-book:focus-visible::after{content:"";position:absolute;inset:-5px;border-radius:12px;box-shadow:0 0 0 2px var(--tp-accent)}
.tp-book-in{position:absolute;inset:0;display:block;transition:transform .7s var(--tp-spring);will-change:transform}
.tp-book.tp-hov .tp-book-in{transition:transform .16s var(--tp-out)}
.tp-book img{position:absolute;display:block;top:-12.66%;left:-14.55%;width:129.1%;height:auto;max-width:none;pointer-events:none;-webkit-user-drag:none}
.tp-tip{
  position:absolute;z-index:3;left:50%;bottom:calc(100% + 10px);padding:5px 11px;border-radius:999px;white-space:nowrap;
  font-size:12px;font-weight:600;color:var(--tp-paper);background:var(--tp-ink);pointer-events:none;
  box-shadow:0 8px 20px -8px rgba(29,27,46,.5);opacity:0;transform:translate(-50%,6px) scale(.94);
  transition:opacity .2s,transform .4s var(--tp-spring);
}
.tp-book:focus-visible .tp-book-in{transform:translateY(-8px)}
.tp-book:focus-visible .tp-tip{opacity:1;transform:translate(-50%,0)}
.tp-book:focus-visible{transform:rotate(0)}
@media (hover:hover){
  .tp-book:hover{transform:rotate(0)}
  .tp-book:hover .tp-tip{opacity:1;transform:translate(-50%,0)}
  .tp-book:not(.tp-hov):hover .tp-book-in{transform:translateY(-8px)}
}
.tp-book:active .tp-book-in{filter:brightness(.97)}

/* preview modal (appended to body) */
.tp-pv-scrim{
  position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:16px;
  background:rgba(29,27,46,.3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.tp-pv{
  position:relative;width:min(344px,100%);overflow:hidden;border-radius:18px;background:var(--tp-sheet);border:1px solid var(--tp-line);
  box-shadow:0 40px 90px -24px rgba(29,27,46,.55),0 2px 8px rgba(29,27,46,.12);transform-origin:50% 50%;
}
.tp-pv-top{display:flex;align-items:center;justify-content:space-between;gap:10px;height:42px;padding:0 8px 0 16px;background:var(--tp-surface);border-bottom:1px solid var(--tp-line)}
.tp-pv-tag{font-size:12px;font-weight:550;color:var(--tp-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-pv-x{
  flex:none;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:none;cursor:pointer;
  color:var(--tp-ink2);font-size:22px;line-height:1;transition:background-color .2s,transform .3s var(--tp-spring);
}
.tp-pv-x:hover{background:rgba(29,27,46,.08);color:var(--tp-ink)}
.tp-pv-x:active{transform:scale(.9)}
.tp-pv-page{position:relative;isolation:isolate}
.tp-pv-page::before{content:"";position:absolute;z-index:1;left:34px;top:0;bottom:0;width:1px;background:var(--tp-margin-c);pointer-events:none}
.tp-pv-title{margin:0;padding:16px 18px 10px 50px;font:400 36px/1.05 var(--tp-display);letter-spacing:-.01em}
.tp-pv-notes{
  list-style:none;margin:0;padding:0 16px 28px 50px;
  background:linear-gradient(to bottom,transparent 27px,var(--tp-rule-c) 27px,var(--tp-rule-c) 28px) 0 0/100% 28px repeat-y;
}
.tp-pv-notes li{font-size:15px;line-height:28px;color:var(--tp-ink)}
.tp-pv-cover{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;border-radius:inherit}
.tp-pv-cover img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%;transform:scale(1.34);transform-origin:50% 46%;background:var(--tp-sheet)}

/* ===================================================================== 3. PAPER */
.tp-pp{
  max-width:440px;margin:0 auto;padding:14px;border-radius:20px;background:var(--tp-surface);border:1px solid var(--tp-line);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 24px 50px -24px rgba(29,27,46,.3);
}
.tp-seg{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);padding:3px;border-radius:12px;background:rgba(29,27,46,.07);
  box-shadow:inset 0 1px 2px rgba(29,27,46,.08);
}
.tp-seg-thumb{
  position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 4);border-radius:9px;background:#fff;
  box-shadow:0 1px 2px rgba(29,27,46,.14),0 4px 10px -4px rgba(29,27,46,.2);
  transform:translateX(calc(var(--i,1) * 100%));transition:transform .5s var(--tp-spring);
}
.tp-seg button{
  position:relative;z-index:1;height:32px;border:0;border-radius:9px;background:none;cursor:pointer;
  font-size:13px;font-weight:550;color:var(--tp-ink2);transition:color .25s;
}
.tp-seg button[aria-pressed="true"]{color:var(--tp-ink)}
.tp-seg button:hover{color:var(--tp-ink)}
.tp-pp-page{
  position:relative;isolation:isolate;margin-top:12px;height:168px;overflow:hidden;border-radius:12px;background:var(--tp-sheet);
  border:1px solid var(--tp-line);box-shadow:0 8px 20px -12px rgba(29,27,46,.25);
}
.tp-pat{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .55s ease;pointer-events:none}
.tp-pat.tp-lined{background:linear-gradient(to bottom,transparent 27px,var(--tp-rule-c) 27px,var(--tp-rule-c) 28px) 0 0/100% 28px}
.tp-pat.tp-lined::before{content:"";position:absolute;left:44px;top:0;bottom:0;width:1px;background:var(--tp-margin-c)}
.tp-pat.tp-grid{
  background:linear-gradient(to bottom,transparent 27px,var(--tp-rule-c) 27px,var(--tp-rule-c) 28px) 0 0/28px 28px,
             linear-gradient(to right,transparent 27px,var(--tp-rule-c) 27px,var(--tp-rule-c) 28px) 0 0/28px 28px;
}
.tp-pat.tp-dots{background:radial-gradient(circle at 2px 26px,var(--tp-rule) 1.5px,transparent 2px) 0 0/28px 28px}
.tp-pp[data-paper="lined"] .tp-pat.tp-lined,.tp-pp[data-paper="grid"] .tp-pat.tp-grid,.tp-pp[data-paper="dots"] .tp-pat.tp-dots{opacity:1}
.tp-pp-text{margin:0;padding:28px 12px 0 60px;list-style:none}
.tp-pp-text p{margin:0;font-size:15px;line-height:28px;color:var(--tp-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-pp-text p:first-child{font-weight:650}

/* ===================================================================== 4. PDF */
.tp-pd{
  position:relative;max-width:420px;margin:0 auto;overflow:hidden;border-radius:18px;background:var(--tp-surface);border:1px solid var(--tp-line);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 2px 6px rgba(29,27,46,.05),0 28px 60px -24px rgba(29,27,46,.3);
}
.tp-pd-tools{display:flex;align-items:center;gap:6px;height:54px;padding:0 10px 0 12px;border-bottom:1px solid var(--tp-line);background:var(--tp-sheet)}
.tp-pd-file{margin-right:auto;font-size:12px;font-weight:550;color:var(--tp-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:none}
.tp-pd-tools .tp-pd-sp{margin-right:auto}
.tp-pd-tool{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:var(--tp-ink2);
  transition:background-color .3s,color .3s,transform .45s var(--tp-spring),box-shadow .3s;
}
.tp-pd-tool svg{width:18px;height:18px}
.tp-pd-tool.tp-on{background:var(--tc,var(--tp-hl));color:var(--tp-ink);transform:scale(1.12);box-shadow:0 6px 14px -6px rgba(29,27,46,.4)}
.tp-pd-replay{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 9px;border:1px solid var(--tp-line);border-radius:999px;
  background:var(--tp-sheet);cursor:pointer;font-size:12.5px;font-weight:550;color:var(--tp-ink2);
  transition:transform .25s var(--tp-spring),color .2s,border-color .2s;
}
.tp-pd-replay svg{width:13px;height:13px;transition:transform .5s var(--tp-spring)}
.tp-pd-replay:hover{color:var(--tp-ink);border-color:var(--tp-ink3)}
.tp-pd-replay:hover svg{transform:rotate(-180deg)}
.tp-pd-replay:active{transform:scale(.94)}
.tp-pd-canvas{padding:18px;background:color-mix(in srgb,var(--tp-surface) 82%,#b9b2a0)}
.tp-pd-page{
  position:relative;max-width:320px;margin:0 auto;aspect-ratio:300/340;overflow:hidden;border-radius:4px;background:#fff;
  box-shadow:0 1px 2px rgba(29,27,46,.15),0 14px 30px -12px rgba(29,27,46,.4);
}
.tp-pd-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.tp-pd-svg .tx{fill:#D4D0DC}
.tp-pd-svg .hd{fill:#A9A5B8}
.tp-pd-svg .dg{fill:none;stroke:#C9C5D6;stroke-width:1.5}
.tp-pd-svg .dn{fill:#E3DFEE}
.tp-pd-svg text{font-family:var(--tp-hand);font-size:16px;fill:#4a3d00}
.tp-pd-ann{transition:opacity .5s}
.tp-pd-hl,.tp-pd-ul{mix-blend-mode:multiply;opacity:.85;transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);transition:transform .7s cubic-bezier(.45,0,.25,1),opacity .5s}
.tp-pd-hl{fill:var(--tp-hl)}
.tp-pd-ul{fill:var(--tp-m-pink);transition-duration:.6s,.5s}
.tp-pd-note{transform-box:fill-box;transform-origin:50% 50%;opacity:0;transform:translateY(-38px) rotate(-10deg) scale(1.18);
  transition:transform .6s var(--tp-spring),opacity .18s}
.tp-pd-stroke{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .7s cubic-bezier(.45,0,.25,1),opacity .5s}
.tp-pd-arrow{stroke:var(--tp-accent);stroke-width:2.4}
.tp-pd-circle{stroke:var(--tp-margin);stroke-width:2.4;transition-duration:.6s,.5s}
.tp-pd.s1 .tp-pd-hl,.tp-pd.s2 .tp-pd-ul{transform:scaleX(1)}
.tp-pd.s3 .tp-pd-note{opacity:1;transform:rotate(3deg)}
.tp-pd.s4 .tp-pd-arrow,.tp-pd.s6 .tp-pd-circle{stroke-dashoffset:0}
.tp-pd.s4 .tp-pd-head{stroke-dashoffset:0;transition-delay:.62s,0s}
.tp-pd.sfade .tp-pd-ann{opacity:0!important}
.tp-pd.tp-noanim *{transition:none!important}
.tp-pd-cur{
  position:absolute;z-index:3;left:50%;top:92%;width:20px;height:20px;margin:-2px 0 0 -3px;pointer-events:none;opacity:0;
  transition:left .65s cubic-bezier(.45,0,.25,1),top .65s cubic-bezier(.45,0,.25,1),opacity .3s;
  filter:drop-shadow(0 2px 3px rgba(29,27,46,.35));
}
.tp-pd.tp-playing .tp-pd-cur{opacity:1}
.tp-pd.sfade .tp-pd-cur{opacity:0}
@container (min-width:400px){.tp-pd-file{display:block}.tp-pd-tools .tp-pd-sp{display:none}}

@media (prefers-reduced-motion:reduce){
  .tp-w::before,.tp-w.tp-on::before,.tp-fmt,.tp-card,.tp-card-in,.tp-book,.tp-book-in,.tp-tip,.tp-seg-thumb,.tp-pat,.tp-pd *,.tp-ghost,.tp-nb *{transition:none!important}
  .tp-count.tp-bump,.tp-card.tp-pop .tp-card-in{animation:none}
  .tp-pd-replay{display:none}
}

/* ===================================================================== 5. NOTEBOOK (tp-nb-) */
.tp-nb{
  position:relative;max-width:860px;margin:0 auto;overflow:hidden;
  background:var(--tp-sheet);border:1px solid var(--tp-line);border-radius:var(--r-card,24px);
  box-shadow:var(--shadow-card,0 1px 0 rgba(29,27,46,.04),0 18px 40px -24px rgba(29,27,46,.25)),0 28px 60px -26px rgba(29,27,46,.28);
}
.tp-nb-main{display:grid;grid-template-columns:240px minmax(0,1fr);height:430px}
.tp-nb-side{
  display:flex;flex-direction:column;min-height:0;background:var(--tp-surface);border-right:1px solid var(--tp-line);padding:14px 10px 12px;
}
.tp-nb-head{display:flex;align-items:center;gap:11px;padding:2px 6px 14px}
.tp-nb-cover{width:34px;height:auto;aspect-ratio:488/600;object-fit:cover;border-radius:4px 7px 7px 4px;flex:none;box-shadow:0 1px 2px rgba(29,27,46,.25),0 6px 12px -6px rgba(29,27,46,.4)}
.tp-nb-htxt{min-width:0}
.tp-nb-name{font:400 25px/1 var(--tp-display);letter-spacing:-.01em;color:var(--tp-ink)}
.tp-nb-kick{margin-top:5px;font:600 10.5px/1 var(--tp-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tp-ink3)}
.tp-nb-tree{flex:1;min-height:0;overflow:auto;margin:0 -4px;padding:0 4px;scrollbar-width:thin}
.tp-nb-ul{list-style:none;margin:0;padding:0}
.tp-nb-row{display:flex;align-items:center;gap:2px;padding-left:calc(var(--d,0) * 18px);position:relative}
.tp-nb-kids .tp-nb-row::before{ /* indent guide */
  content:"";position:absolute;left:calc(var(--d,1) * 18px - 9px);top:-2px;bottom:-2px;width:1px;background:var(--tp-line);
}
.tp-nb-tg,.tp-nb-tgsp{flex:none;width:22px;height:30px;display:grid;place-items:center}
.tp-nb-tg{border:0;background:none;border-radius:7px;cursor:pointer;color:var(--tp-ink3);transition:color .15s,background .15s}
.tp-nb-tg svg{transition:transform .28s var(--tp-out)}
.tp-nb-tg[aria-expanded="true"] svg{transform:rotate(90deg)}
.tp-nb-tg:hover{color:var(--tp-ink);background:color-mix(in srgb,var(--tp-ink) 7%,transparent)}
.tp-nb-pg{
  position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:32px;padding:0 10px 0 8px;margin:1px 0;
  border:0;border-radius:9px;background:none;text-align:left;cursor:pointer;color:var(--tp-ink2);font-size:13.5px;font-weight:500;
  transition:background .18s,color .18s;
}
.tp-nb-pg:hover{background:color-mix(in srgb,var(--tp-ink) 6%,transparent);color:var(--tp-ink)}
.tp-nb-ic{flex:none;display:grid;place-items:center;color:var(--tp-ink3);transition:color .18s}
.tp-nb-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-nb-pg.tp-sel{background:color-mix(in srgb,var(--tp-accent) 12%,transparent);color:var(--tp-accent);font-weight:600}
.tp-nb-pg.tp-sel .tp-nb-ic{color:var(--tp-accent)}
.tp-nb-pg::before{
  content:"";position:absolute;left:-4px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--tp-accent);
  transform:scaleY(0);transition:transform .25s var(--tp-spring);
}
.tp-nb-pg.tp-sel::before{transform:scaleY(1)}
.tp-nb-kids{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .3s var(--tp-out),visibility 0s .3s}
.tp-nb-kids.tp-open{grid-template-rows:1fr;visibility:visible;transition-delay:0s}
.tp-nb-kids-in{min-height:0;overflow:hidden}
.tp-nb-add{
  display:flex;align-items:center;justify-content:center;gap:7px;height:36px;margin:8px 4px 0;border-radius:11px;cursor:pointer;
  background:var(--tp-sheet);border:1px solid var(--tp-line);color:var(--tp-ink);font-size:13px;font-weight:600;
  box-shadow:0 1px 0 rgba(29,27,46,.04);transition:transform .2s var(--tp-spring),border-color .15s,color .15s;
}
.tp-nb-add:hover:not(:disabled){border-color:var(--tp-accent);color:var(--tp-accent)}
.tp-nb-add:active:not(:disabled){transform:scale(.97)}
.tp-nb-add:disabled{opacity:.45;cursor:default}

.tp-nb-view{position:relative;min-width:0;min-height:0;overflow:hidden;background:var(--tp-sheet)}
.tp-nb-view::before{content:"";position:absolute;z-index:1;left:44px;top:0;bottom:0;width:1px;background:var(--tp-margin-c);pointer-events:none}
.tp-nb-sheet{
  position:absolute;inset:0;overflow:auto;padding:30px 28px 24px 62px;
  background-image:linear-gradient(to bottom,transparent 31px,var(--tp-rule-c) 31px);background-size:100% 32px;background-position:0 30px;
}
.tp-nb-pk{display:flex;align-items:center;gap:6px;margin:0 0 6px;font:600 10.5px/1 var(--tp-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tp-ink3)}
.tp-nb-pk svg{flex:none}
.tp-nb-title{margin:0 0 14px;font:400 clamp(30px,5cqw,40px)/1.05 var(--tp-display);letter-spacing:-.015em;color:var(--tp-ink);min-height:42px}
.tp-nb-title.tp-nb-ph{color:var(--tp-ink3)}
.tp-nb-body{display:block}
.tp-nb-l{margin:0;min-height:32px;font:400 15px/32px var(--tp-sans);color:var(--tp-ink)}
.tp-nb-empty{color:var(--tp-ink3)}
.tp-nb-mk{color:inherit;padding:0 2px;border-radius:3px;background:linear-gradient(transparent 52%,color-mix(in srgb,var(--tp-hl) 85%,transparent) 52%)}

.tp-nb-extras{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:10px}
.tp-nb-photo{
  position:relative;margin:0;padding:6px 6px 4px;background:#fff;border-radius:3px;transform:rotate(-3deg);
  box-shadow:0 1px 2px rgba(29,27,46,.2),0 10px 20px -10px rgba(29,27,46,.45);
}
.tp-nb-photo svg{display:block;width:132px;height:auto;border-radius:1px}
.tp-nb-photo figcaption{font:400 13px/1.5 var(--tp-hand);color:#4a3d00;text-align:center;padding-top:2px}
.tp-nb-tape{position:absolute;left:50%;top:-9px;width:46px;height:16px;margin-left:-23px;transform:rotate(2deg);background:color-mix(in srgb,var(--tp-m-pink) 70%,transparent);border-radius:2px}
.tp-nb-voice{
  display:flex;align-items:center;gap:10px;height:44px;padding:0 14px 0 6px;border-radius:999px;
  background:var(--tp-sheet);border:1px solid var(--tp-line);box-shadow:0 6px 16px -10px rgba(29,27,46,.4);
}
.tp-nb-vplay{width:32px;height:32px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:var(--tp-accent);color:#fff;transition:transform .2s var(--tp-spring)}
.tp-nb-vplay:active{transform:scale(.92)}
.tp-nb-wave{display:flex;align-items:center;gap:2px;height:24px}
.tp-nb-wave i{display:block;width:2.5px;border-radius:2px;background:color-mix(in srgb,var(--tp-ink3) 60%,transparent);transition:background .2s}
.tp-nb-voice.tp-vplay .tp-nb-wave i{animation:tp-nb-wv .01s linear both;animation-delay:calc(var(--i) * 140ms)}
@keyframes tp-nb-wv{to{background:var(--tp-accent)}}
.tp-nb-time{font:600 12px/1 var(--tp-sans);font-variant-numeric:tabular-nums;color:var(--tp-ink2)}

/* faux PDF page */
.tp-nb-pdfwrap{position:relative;display:flex;justify-content:center;padding:4px 0 8px}
.tp-nb-pdf{
  position:relative;width:min(100%,360px);aspect-ratio:4/3;padding:20px 22px;background:#fff;border-radius:4px;overflow:hidden;
  box-shadow:0 1px 2px rgba(29,27,46,.18),0 14px 30px -12px rgba(29,27,46,.42);color:#2a2840;
}
.tp-nb-pdfbadge{position:absolute;right:10px;top:10px;padding:3px 6px;border-radius:5px;background:#D8352B;color:#fff;font:700 9px/1 var(--tp-sans);letter-spacing:.08em}
.tp-nb-pdft{font:400 22px/1.1 var(--tp-display);color:#1D1B2E;margin:2px 36px 12px 0}
.tp-nb-pdfl{list-style:none;margin:0;padding:0;font:500 12.5px/1 var(--tp-sans)}
.tp-nb-pdfl li{position:relative;margin:0 0 9px;padding-left:14px}
.tp-nb-pdfl li::before{content:"";position:absolute;left:2px;top:3px;width:5px;height:5px;border-radius:50%;background:#8C889C}
.tp-nb-pdfx{position:relative;z-index:1}
.tp-nb-pdfhl{
  position:absolute;left:10px;right:-4px;top:-3px;bottom:-4px;border-radius:3px;background:#FFD84D;mix-blend-mode:multiply;opacity:.85;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .7s cubic-bezier(.45,0,.25,1) .45s;
}
.tp-nb-pdf.tp-in .tp-nb-pdfhl{transform:scaleX(1)}
.tp-nb-pdfch{position:absolute;left:22px;bottom:30px;display:flex;align-items:flex-end;gap:7px;height:46px}
.tp-nb-pdfch i{display:block;width:24px;border-radius:3px 3px 0 0;background:#B9C4F0}
.tp-nb-pdfch i:last-child{background:var(--tp-accent)}
.tp-nb-pdfn{position:absolute;right:12px;bottom:8px;font:600 10px/1 var(--tp-sans);color:#8C889C}
.tp-nb-pdfnote{
  position:absolute;right:calc(50% - 205px);bottom:16px;max-width:130px;font:400 15px/1.2 var(--tp-hand);color:#4a3d00;
  background:#FFE97A;padding:7px 10px;border-radius:3px;transform:rotate(4deg);box-shadow:0 8px 14px -8px rgba(29,27,46,.45);
}

/* ghost cursor */
.tp-nb-ghost{
  position:absolute;z-index:5;left:60%;top:86%;width:20px;height:20px;margin:-2px 0 0 -3px;pointer-events:none;opacity:0;
  transition:left .8s cubic-bezier(.45,0,.25,1),top .8s cubic-bezier(.45,0,.25,1),opacity .3s,transform .15s;
  filter:drop-shadow(0 2px 3px rgba(29,27,46,.35));
}
.tp-nb.tp-playing .tp-nb-ghost{opacity:1}
.tp-nb-ghost.tp-click{transform:scale(.82)}

@container (max-width:640px){
  .tp-nb-main{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:520px}
  .tp-nb-side{flex-direction:row;align-items:center;gap:8px;padding:10px 12px;border-right:0;border-bottom:1px solid var(--tp-line);overflow-x:auto;scrollbar-width:none}
  .tp-nb-side::-webkit-scrollbar{display:none}
  .tp-nb-head{padding:0 6px 0 0;flex:none}
  .tp-nb-cover,.tp-nb-kick{display:none}
  .tp-nb-name{font-size:22px}
  .tp-nb-tree{flex:none;overflow:visible;margin:0;padding:0}
  .tp-nb-ul,.tp-nb-item,.tp-nb-kids,.tp-nb-kids-in,.tp-nb-row{display:contents}
  .tp-nb-ul{display:flex;gap:6px}
  .tp-nb-ul .tp-nb-ul{display:contents}
  .tp-nb-tree>.tp-nb-ul{display:flex;gap:6px;flex-wrap:nowrap}
  .tp-nb-kids{visibility:visible}
  .tp-nb-tg,.tp-nb-tgsp{display:none}
  .tp-nb-pg{flex:none;height:34px;margin:0;padding:0 12px 0 10px;border-radius:999px;background:var(--tp-sheet);border:1px solid var(--tp-line)}
  .tp-nb-pg::before{display:none}
  .tp-nb-pg.tp-sel{border-color:color-mix(in srgb,var(--tp-accent) 45%,transparent)}
  .tp-nb-add{flex:none;margin:0;padding:0 12px;height:34px;border-radius:999px}
  .tp-nb-view::before{left:30px}
  .tp-nb-sheet{padding:22px 18px 20px 46px}
  .tp-nb-pdfnote{right:4px}
  .tp-nb-photo svg{width:112px}
}
@media (prefers-reduced-motion:reduce){
  .tp-nb-voice.tp-vplay .tp-nb-wave i{animation:none;background:var(--tp-accent)}
}