.yellowpad-note {
	width: min(560px, 92vw);
	margin: 24px auto;
	margin-bottom: 50px;
	padding: 18px 18px 14px;
	position: relative;
	background: #fff7a6;
	xborder: 1px solid rgba(0,0,0,.18);
	border-radius: 8px 8px 14px 10px;
	xbox-shadow: 0 10px 24px rgba(0,0,0,.18);
	transform: rotate(-0.8deg);
	overflow: hidden;
  }

/* Handwritten vibe (no external fonts): */
  .yellowpad-body p {
	margin: 0 0 10px;
	color: rgba(0,0,0,.88);
  
	/* prefer “handwritten” system fonts where available */
	font-family:
	  "Bradley Hand",
	  "Bradley Hand ITC",
	  "Marker Felt",
	  "Chalkboard SE",
	  "Noteworthy",
	  "Comic Sans MS",
	  "Segoe Print",
	  "Segoe Script",
	  "Snell Roundhand",
	  ui-serif, Georgia, "Times New Roman", Times, serif !important;
  
	font-size: 18px;
	line-height: 1.35;
	font-weight: 500;
	letter-spacing: 0.01em;
  }
  
  /* Optional: make headings/stamps stay “typed” so the contrast sells it */
  .yellowpad-stamp,
  .yellowpad-date {
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  }
  
  /* Optional: tiny ink variance */
  .yellowpad-body p {
	text-shadow: 0.15px 0.15px 0 rgba(0,0,0,.22);
  }
  
  /* faint paper texture */
  .yellowpad-note::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
	  radial-gradient(circle at 20% 10%, rgba(0,0,0,.035), transparent 35%),
	  radial-gradient(circle at 75% 65%, rgba(0,0,0,.03), transparent 40%),
	  linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45));
	mix-blend-mode: multiply;
	pointer-events: none;
  }

  /* blue ruled lines */
  .yellowpad-note::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
	  repeating-linear-gradient(
		to bottom,
		rgba(40,90,160,.18),
		rgba(40,90,160,.18) 1px,
		transparent 1px,
		transparent 26px
	  );
	opacity: .55;
	pointer-events: none;
  }

  .yellowpad-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	position: relative;
	z-index: 2;
	margin-bottom: 10px;
  }

  .yellowpad-stamp {
	font: 700 12px/1.1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
	letter-spacing: .08em;
	color: rgba(0,0,0,.65);
	background: rgba(255,255,255,.35);
	padding: 6px 8px;
	border: 1px dashed rgba(0,0,0,.35);
	border-radius: 6px;
	transform: rotate(-1.4deg);
	user-select: none;
  }

  .yellowpad-date {
	font: 600 12px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
	color: rgba(0,0,0,.7);
	user-select: none;
  }

  .yellowpad-body {
	position: relative;
	z-index: 2;
	padding-left: 20px;
  }

  /* red margin line */
  .yellowpad-redline {
	position: absolute;
	left: 10px;
	top: -8px;
	bottom: -12px;
	width: 2px;
	background: rgba(200,40,40,.55);
	filter: blur(.2px);
  }

  .yellowpad-body p {
	margin: 0 0 10px;
	color: rgba(0,0,0,.86);
	xfont: 500 16px/1.4 ui-serif, Georgia, "Times New Roman", Times, serif;
  }

  .yellowpad-body strong {
	font-weight: 800;
  }

  /* “hasty” vibe */
  .yellowpad-body p:nth-child(2) { transform: rotate(-0.3deg); }
  .yellowpad-body p:nth-child(3) { transform: rotate(0.25deg); }
  .yellowpad-body p:nth-child(4) { transform: rotate(-0.15deg); }

  .yellowpad-scratch {
	margin-top: 14px;
	padding-top: 10px;
	border-top: 1px solid rgba(0,0,0,.25);
	font-weight: 800;
	letter-spacing: .01em;
	transform: rotate(-0.7deg);
  }

.yellowpad-tear--top {
	top: -10px;
	bottom: auto;
  
	/* match the paper color of the note */
	background: #fff7a6;
  
	/* same shape, flipped */
	transform: scaleY(-1);
  
	/* optional: flip the “shadow” so it looks right at the top */
	box-shadow: inset 0 -10px 10px rgba(0,0,0,.10);
  }
  
  /* torn bottom edge */
  .yellowpad-tear {
	  border: 1px solid red;
	position: absolute;
	left: -6px;
	right: -6px;
	bottom: -10px;
	height: 44px;
	xbackground: #fff7a6;
	background: #fff;
	clip-path: polygon(
	  0% 35%,
	  4% 48%,
	  8% 34%,
	  12% 52%,
	  16% 36%,
	  20% 56%,
	  24% 40%,
	  28% 58%,
	  32% 42%,
	  36% 60%,
	  40% 45%,
	  44% 62%,
	  48% 44%,
	  52% 64%,
	  56% 46%,
	  60% 63%,
	  64% 45%,
	  68% 60%,
	  72% 42%,
	  76% 58%,
	  80% 40%,
	  84% 54%,
	  88% 38%,
	  92% 50%,
	  96% 36%,
	  100% 46%,
	  100% 100%,
	  0% 100%
	);
	box-shadow: inset 0 10px 10px rgba(0,0,0,.10);
	z-index: 3;
	pointer-events: none;