/* =====================================================================
   NOTEBOOK STREAM PACK — cozy stationery design system
   Matches the "Notebook Chat" overlay (same fonts + pastel palette).
   note-card paper · ruled lines · washi tape · bouncing doodles
   ===================================================================== */
:root{
  --bg1:#8a68e6; --bg2:#6d4fd2;            /* purple backdrop */
  --page:#fffdff; --ink:#5a5a5a;
  --line:#cdb9f2;                          /* ruled line on paper */
  --pink:#fa7cf9; --pinkbg:#ffe8fe;
  --orange:#ff9f42; --orangebg:#fff0dc;
  --blue:#5dcfeb; --bluebg:#dcf6ff;
  --green:#8fd94a; --greenbg:#eafbd6;
  --purple:#b98cff; --purplebg:#efe3ff;
  --px:'Jersey 10','Pixelify Sans',monospace;
  --msg:'Fredoka','Baloo 2',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}
body{background:transparent;font-family:var(--msg);color:var(--ink)}
.bgpurple{position:absolute;inset:0;background:
  radial-gradient(ellipse at 30% 20%, #9a7cf0 0%, transparent 50%),
  linear-gradient(160deg,var(--bg1),var(--bg2))}

/* ---------- note card (paper w/ ruled lines + tape) ---------- */
.note{position:absolute;background:var(--page);border-radius:14px;
  box-shadow:0 10px 24px rgba(58,32,122,.35)}
.note .paper{position:absolute;inset:0;border-radius:14px;overflow:hidden}
.note .paper::before{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent 0 34px, var(--line) 34px 36px)}
.note .paper::after{content:'';position:absolute;left:52px;top:0;bottom:0;width:2px;
  background:#ffb7dd;opacity:.7}
.note.plain .paper::before,.note.plain .paper::after{display:none}
/* washi tape */
.tape{position:absolute;width:110px;height:30px;background:rgba(250,124,249,.55);
  border-left:2px dashed rgba(255,255,255,.6);border-right:2px dashed rgba(255,255,255,.6);
  border-radius:3px;z-index:6}
.tape.blue{background:rgba(93,207,235,.55)}
.tape.green{background:rgba(143,217,74,.5)}
.tape.orange{background:rgba(255,159,66,.5)}

/* ---------- pixel tag chip (like usernames in Notebook Chat) ---------- */
.chip{display:inline-block;font-family:var(--px);font-size:22px;line-height:1;
  padding:4px 10px 6px;border-radius:8px;color:#fff;background:var(--pink)}
.chip.blue{background:var(--blue)} .chip.green{background:var(--green)}
.chip.orange{background:var(--orange)} .chip.purple{background:var(--purple)}

/* ---------- doodles (bouncing stationery) ---------- */
.doodle{position:absolute;font-size:40px;z-index:7;
  animation:doodlebob var(--dd,2.6s) ease-in-out infinite;
  filter:drop-shadow(0 4px 6px rgba(58,32,122,.35))}
@keyframes doodlebob{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-14px) rotate(8deg)}}
/* floating hearts/stars in bg */
.float{position:absolute;font-size:30px;opacity:.85;
  animation:floatup var(--fu,9s) linear infinite}
@keyframes floatup{0%{transform:translateY(40px);opacity:0}12%{opacity:.85}
  88%{opacity:.85}100%{transform:translateY(-560px);opacity:0}}

/* ---------- text ---------- */
.pxt{font-family:var(--px);line-height:.95}
.hand{font-family:var(--msg);font-weight:600}
.cur{display:inline-block;width:.55em;height:.95em;background:var(--pink);
  vertical-align:-3px;animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}

/* ---------- pencil progress ---------- */
.pline{position:relative;height:10px;border-radius:6px;background:#f0e7ff;overflow:visible}
.pline i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--pink);
  animation:pfill 8s linear infinite}
.pline .pen{position:absolute;top:-34px;font-size:34px;animation:ppen 8s linear infinite}
@keyframes pfill{0%{width:2%}96%{width:99%}100%{width:99%}}
@keyframes ppen{0%{left:2%}96%{left:calc(99% - 20px)}100%{left:calc(99% - 20px)}}