:root {
  --rn-pencil: var(--pp-graphite, #3a3f45);
  --rn-ink: var(--pp-type, #22242b);
  --rn-paper: var(--pp-card, #ede6d6);
  --rn-mark: var(--hn-silver, #c9d2d4);
}


.portrait-hold .rn-layer,
.portrait-hold .rn-list {
  position: absolute;
  inset: 0;
  z-index: 2;                  
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.portrait-hold .rn-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.portrait-hold .rn-hair {
  stroke: var(--rn-mark);
  stroke-width: 1;
  opacity: 0.55;
}


.portrait-hold .rn-bracket {
  position: absolute;
  box-sizing: border-box;
  opacity: 0.4;
  transition: opacity 240ms ease;
}
.portrait-hold .rn-bracket::before,
.portrait-hold .rn-bracket::after {
  content: '';
  position: absolute;
  width: 34%;
  height: 34%;
  border: 1.5px solid var(--rn-mark);
}
.portrait-hold .rn-bracket::before {
  left: 0; top: 0;
  border-right: 0; border-bottom: 0;
}
.portrait-hold .rn-bracket::after {
  right: 0; bottom: 0;
  border-left: 0; border-top: 0;
}
.portrait-hold .rn-bracket.inked { opacity: 0.8; }
.portrait-hold .rn-bracket.rn-cursor { opacity: 0.9; }
.portrait-hold .rn-bracket.rn-cursor::before,
.portrait-hold .rn-bracket.rn-cursor::after { border-width: 2px; }


.portrait-hold .rn-note {
  position: absolute;
  box-sizing: border-box;
  padding: 0.3em 0.55em 0.36em;
  background-color: color-mix(in srgb, var(--rn-paper) 94%, #ffffff);
  box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.09), 3px 4px 9px rgba(8, 12, 16, 0.36);
  clip-path: polygon(0 3%, 99% 0, 100% 95%, 2% 100%);
  font-size: max(11px, calc(0.78rem * var(--reading-scale, 1)));
  line-height: 1.28;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.portrait-hold .rn-note.in { opacity: 1; transform: translateY(0); }

.portrait-hold .rn-note.is-gift {
  font-family: var(--font-type, monospace);
  letter-spacing: var(--track-type, 0.05em);
  color: var(--rn-ink);
}
.portrait-hold .rn-note.is-own {
  font-family: var(--font-hand, cursive);
  letter-spacing: 0;
  color: var(--rn-pencil);
}
.portrait-hold .rn-note:focus-visible {
  outline: 2px solid var(--rn-pencil);
  outline-offset: 2px;
}


.portrait-ring .rn-lap2 {
  fill: none;
  stroke: var(--hn-silver, #c9d2d4);
  stroke-width: 1.25;            
  stroke-linecap: round;
  opacity: 0.75;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.portrait-ring.rn-failing .ring-fill { opacity: 0.4; }

@media (max-width: 640px) {
  .portrait-hold .rn-note {
    padding: 0.24em 0.44em 0.28em;
    font-size: max(11px, calc(0.72rem * var(--reading-scale, 1)));
    line-height: 1.24;
  }
}


@media (prefers-reduced-motion: reduce) {
  .portrait-hold .rn-note, .portrait-hold .rn-bracket { transition: none; transform: none; }
  .portrait-hold .rn-note { opacity: 1; }
  .portrait-hold .rn-note.in { transform: none; }
}
:is(body.reduce-motion, :root.rm) .portrait-hold .rn-note,
:is(body.reduce-motion, :root.rm) .portrait-hold .rn-bracket { transition: none; transform: none; }
:is(body.reduce-motion, :root.rm) .portrait-hold .rn-note { opacity: 1; }

@media (forced-colors: active) {
  .portrait-hold .rn-bracket::before,
  .portrait-hold .rn-bracket::after { border-color: CanvasText; }
  .portrait-hold .rn-note { border: 1px solid CanvasText; background: Canvas; clip-path: none; }
  .portrait-hold .rn-hair { stroke: CanvasText; }
}