:root{--note-red:#b63824;--note-red-bright:#c5412b;--note-paper:#f3e6d1;--note-green:#122e28;--note-gold:#c99645}

.master-note{
  --master-note-text:rgba(18,46,40,.74);
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  align-items:center;
  gap:18px;
  width:min(100%,520px);
  max-width:520px!important;
  margin:0;
  position:relative;
  color:var(--master-note-text)!important;
  font-family:Manrope,sans-serif;
}

.master-note--dark{--master-note-text:rgba(243,230,209,.72)}

.master-note__seal{
  position:relative;
  isolation:isolate;
  display:flex;
  width:82px;
  min-height:104px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  color:#fff8e9;
  text-align:center;
  transform:rotate(-2.5deg);
  filter:drop-shadow(0 9px 15px rgba(78,20,13,.2));
}

.master-note__seal::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:
    radial-gradient(circle at 20% 18%,rgba(255,255,255,.12) 0 1px,transparent 2px),
    linear-gradient(102deg,#8f261d 0%,var(--note-red) 18%,var(--note-red-bright) 58%,#9e2b20 100%);
  background-size:11px 13px,100% 100%;
  clip-path:polygon(8% 3%,88% 0,100% 8%,94% 23%,100% 37%,94% 51%,99% 68%,91% 83%,96% 96%,71% 92%,51% 100%,30% 94%,7% 98%,11% 80%,2% 65%,8% 48%,0 31%,8% 18%);
}

.master-note__seal::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:7px;
  right:4px;
  bottom:-5px;
  height:14px;
  border-radius:50%;
  background:rgba(143,38,29,.55);
  filter:blur(7px);
}

.master-note__seal strong{
  font-family:"Songti SC","STSong","Noto Serif CJK SC",serif;
  font-size:29px;
  font-weight:600;
  line-height:.95;
  letter-spacing:.04em;
  writing-mode:vertical-rl;
  text-orientation:upright;
  text-shadow:0 1px 0 rgba(85,16,12,.38);
}

.master-note__seal small{
  margin-top:6px;
  font-size:8px;
  font-weight:700;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.86;
}

.master-note__copy{
  margin:0;
  color:inherit;
  font-size:18px;
  font-weight:400;
  line-height:1.58;
}

.master-note--friends{
  --master-note-text:rgba(243,230,209,.78);
  grid-template-columns:176px minmax(0,1fr);
  gap:8px;
  width:min(100%,550px);
  max-width:550px!important;
  min-height:150px;
  padding:14px 20px 14px 0;
  overflow:hidden;
  border:1px solid rgba(201,150,69,.32);
  border-radius:18px;
  background:linear-gradient(115deg,rgba(7,24,19,.7),rgba(18,46,40,.28));
  box-shadow:inset 0 1px 0 rgba(243,230,209,.06),0 18px 42px rgba(0,0,0,.16);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.master-note--friends::after{
  content:"";
  position:absolute;
  right:-30px;
  top:-45px;
  width:150px;
  height:150px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(201,150,69,.16),transparent 68%);
  pointer-events:none;
}

.master-note__friends{
  align-self:end;
  display:block;
  width:195px;
  max-width:none;
  height:auto;
  margin:0 0 -18px -16px;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.3));
}

.master-note__content{position:relative;z-index:1}

.master-note__eyebrow{
  display:inline-flex;
  margin-bottom:9px;
  padding:5px 9px;
  border-radius:3px;
  background:var(--note-red);
  color:var(--note-paper);
  font-size:10px;
  font-weight:800;
  line-height:1;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.review-rating-friends{
  display:block;
  width:190px;
  max-width:24vw;
  height:auto;
  margin:-20px 0 -28px auto;
  align-self:flex-end;
  flex:0 0 auto;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.34));
}

@media(max-width:760px){
  .master-note{grid-template-columns:68px minmax(0,1fr);gap:14px;width:100%;max-width:none!important}
  .master-note__seal{width:68px;min-height:92px}
  .master-note__seal strong{font-size:25px}
  .master-note__copy{font-size:16px;line-height:1.55}
  .master-note--friends{grid-template-columns:122px minmax(0,1fr);gap:4px;padding:12px 14px 12px 0;min-height:126px}
  .master-note__friends{width:145px;margin-left:-15px;margin-bottom:-12px}
  .review-rating-friends{width:150px;max-width:48vw;margin:-8px auto -20px}
}

@media(prefers-reduced-motion:no-preference){
  .master-note__seal{animation:master-note-breathe 5.5s ease-in-out infinite alternate}
  .master-note__friends{animation:master-note-friends 6s ease-in-out infinite alternate}
}

@keyframes master-note-breathe{to{transform:rotate(-1deg) translateY(-2px);filter:drop-shadow(0 12px 18px rgba(78,20,13,.28))}}
@keyframes master-note-friends{to{transform:translateY(-3px)}}