:root{
  /* ---- Image + color settings ---- */
  --note-image: url("pink.jpg"); /* replace with your file */
  --text-color: #7c2131;
  --hover-pill: rgba(244, 114, 182, .16);
  --shadow: 0 1px 0 rgba(255,255,255,.95), 0 2px 6px rgba(0,0,0,.12);

  /* ---- Position the text area ---- */
  --note-top: 12%;
  --note-left: 8%;
  --note-right: 8%;
  --note-bottom: 12%;
}

* { box-sizing: border-box; }

body{
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,#fff1f6 0%, #fde2ea 45%, #f9e6ff 100%);
  font-family: "Baloo 2", ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.frame{
  width: min(92vw, 420px);
  aspect-ratio: 9/16;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(211, 88, 129, .25);
  background: #fff;
  isolation: isolate;
}

.frame::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--note-image);
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.lines{
  position: absolute;
  top: var(--note-top);
  left: var(--note-left);
  right: var(--note-right);
  bottom: var(--note-bottom);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 2.2vh, 20px);
}

.line{
  --size: clamp(18px, 4.8vw, 34px);
  display: inline-block;
  align-self: center;
  padding: 2px 6px;
  text-decoration: none;
  color: var(--text-color);
  font-weight: 700;
  font-size: var(--size);
  letter-spacing: .5px;
  text-shadow: var(--shadow);
  position: relative;
  border-radius: 999px;
}

.line:nth-child(2){
  --size: clamp(26px, 6.2vw, 44px);
}

.line::after{
  content:"";
  position:absolute; inset:-8px -12px;
  background: var(--hover-pill);
  border-radius: 999px;
  opacity: 0;
  transition: opacity .18s ease;
}

.line:hover::after,
.line:focus-visible::after{
  opacity: 1;
}

.line:active{ transform: translateY(1px); }

.line:focus-visible{
  box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 6px rgba(236,72,153,.45);
}

.tip{
  position:absolute;
  inset-inline: 14px;
  bottom: 10px;
  text-align:center;
  font-size: 11px;
  color:#5b5b5b99;
  text-shadow: 0 1px 0 #fff;
}

@media (prefers-reduced-motion: reduce){
  .line::after{ transition: none; }
}