/* The Cloudbase notes card — an index card taped beside the changelog (design_handoff_shipped_notes_card), shared
   by /shipped and the app's What's new (design_handoff_whats_new_notes_card), so there's one card, not two. The
   paper colors are the one sanctioned break from the system; text on it is dark in both themes because it's paper. */
.sh-note { --note-paper: #fbf8f0; --note-rule: #dde5f3; --note-tape: rgba(224,211,178,.78); --note-stain: rgba(128,78,38,.26);
  --note-shadow: 0 1px 0 rgba(17,32,59,.06), 0 8px 20px rgba(60,45,20,.12); --tilt: 1.4deg; --rules: 62px;
  position: relative; display: block; box-sizing: border-box; width: 256px; padding: 20px 20px 16px; text-decoration: none; color: #11203b;
  background-color: var(--note-paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0 25px, var(--note-rule) 25px 26px);
  background-position: 0 var(--rules); background-repeat: no-repeat; background-size: 100% calc(100% - var(--rules));
  box-shadow: var(--note-shadow); border-radius: 2px; transform: rotate(var(--tilt)); transition: transform .12s ease; }
.night .sh-note { --note-paper: #ece6d8; --note-rule: #d3d8e2; --note-tape: rgba(214,198,160,.72); --note-stain: rgba(128,78,38,.22); --note-shadow: 0 10px 26px rgba(0,0,0,.45); }
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) .sh-note { --note-paper: #ece6d8; --note-rule: #d3d8e2; --note-tape: rgba(214,198,160,.72); --note-stain: rgba(128,78,38,.22); --note-shadow: 0 10px 26px rgba(0,0,0,.45); }
}
.sh-note:hover, .sh-note:focus-visible { transform: rotate(0deg); color: #11203b; }
.sh-note:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.sh-note:hover .sh-note-t { text-decoration: underline; text-decoration-color: #9db4e8; text-underline-offset: 3px; }
.sh-note-tape { position: absolute; top: -11px; left: -14px; width: 78px; height: 24px; background: var(--note-tape); transform: rotate(-9deg); }
.sh-note-tape-r { left: auto; right: -12px; transform: rotate(8deg); }
.sh-note-mark { position: absolute; right: 14px; top: 16px; display: block; transform: rotate(6deg); }
.sh-note-hand { display: block; font-family: 'Caveat', cursive; font-weight: 600; font-size: 24px; line-height: 28px; color: #1d4ed8; transform: rotate(-1.5deg); transform-origin: left center; }
.sh-note-t { display: block; font-family: var(--serif); font-weight: 600; font-size: 25px; line-height: 26px; letter-spacing: -.01em; color: #11203b; margin-top: 14px; }
.sh-note-line { display: block; font-family: var(--prose); font-style: italic; font-size: 15px; line-height: 26px; color: #4a5a76; }
.sh-note-on { display: block; font-family: var(--mono); font-size: 10px; line-height: 26px; letter-spacing: .18em; text-transform: uppercase; color: #4a5a76; }
.sh-note-ring { position: absolute; right: -34px; bottom: -40px; mix-blend-mode: multiply; pointer-events: none; }
.sh-note-rel { --tilt: -1.6deg; --rules: 54px; width: 240px; padding: 18px 16px 12px; }
.sh-note-rel .sh-note-tape { left: 66px; width: 72px; transform: rotate(-3deg); }
.sh-note-rel .sh-note-hand { font-size: 22px; line-height: 26px; transform: none; }
.sh-note-rel .sh-note-t { font-size: 18px; margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .sh-note { transition: none; } }
/* In the app at night the paper is quieter than on /shipped: a working app glares more than a page you visit once */
.night .sh-note.is-app { --note-paper: #e3dccd; --note-rule: #cfd3da; --note-tape: rgba(200,184,146,.62); --note-stain: rgba(110,70,36,.22); --note-shadow: 0 6px 16px rgba(0,0,0,.38); }
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) .sh-note.is-app { --note-paper: #e3dccd; --note-rule: #cfd3da; --note-tape: rgba(200,184,146,.62); --note-stain: rgba(110,70,36,.22); --note-shadow: 0 6px 16px rgba(0,0,0,.38); }
}