/* Paper notes shared by the studio and the home page.
   Sticky note: a glue strip along the top, fine paper grain, and a lifted bottom-right corner
   with its shadow underneath. Sticky notes hold on their own, so no tape. */
:root{--sticky:#fde77d;--sticky-ink:#3b2a20;--paper-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .24 0 0 0 0 0 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url%28%23n%29'/%3E%3C/svg%3E");--paperclip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='66' viewBox='0 0 22 66'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%237d828a'/%3E%3Cstop offset='.38' stop-color='%23eef1f5'/%3E%3Cstop offset='.5' stop-color='%23ffffff'/%3E%3Cstop offset='.62' stop-color='%23c9cdd3'/%3E%3Cstop offset='1' stop-color='%236f747c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 49V13.5a3.5 3.5 0 0 1 7 0V53a6 6 0 0 1-12 0V8a8 8 0 0 1 16 0v38' stroke='%235c6168' stroke-width='2.6'/%3E%3Cpath d='M7.5 49V13.5a3.5 3.5 0 0 1 7 0V53a6 6 0 0 1-12 0V8a8 8 0 0 1 16 0v38' stroke='url%28%23g%29' stroke-width='1.7'/%3E%3C/g%3E%3C/svg%3E")}
.sticky-note,.step-tip:not(.folded),.print-sheet[data-dl=note] .sheet-download,.bp-tip,.bp-closing-note,body[data-editor-step=print] .print-warning{
 background-color:var(--sticky)!important;color:var(--sticky-ink);border:0!important;
 background-image:var(--paper-grain),linear-gradient(180deg,rgba(190,150,10,.2) 0,rgba(190,150,10,0) 16%),radial-gradient(130% 70% at 100% 100%,rgba(255,255,255,.5),rgba(255,255,255,0) 42%),linear-gradient(0deg,rgba(150,110,0,.1),rgba(150,110,0,0) 30%)!important;
 border-radius:1px 2px 2px 2px!important;border-bottom-right-radius:42% 9px!important;
 box-shadow:0 1px 1px rgba(80,60,0,.16),0 2px 3px -1px rgba(80,60,0,.14),6px 16px 14px -12px rgba(25,15,0,.45),inset 0 -12px 14px -14px rgba(120,90,0,.35)!important}
.sticky-note::before,.step-tip:not(.folded)::before,.print-sheet[data-dl=note] .sheet-download::before,.bp-tip::before,.bp-closing-note::before{content:none!important}
/* A cream memo slip held to the page by a real-looking paperclip. */
.print-sheet[data-dl=paperclip] .sheet-download{position:absolute;right:-14px;top:-26px;display:grid;gap:8px;min-width:200px;padding:20px 14px 12px;line-height:1.3;color:#2f2a24;z-index:2;transform:rotate(2.5deg);
 background-color:#fffdf7;background-image:var(--paper-grain),repeating-linear-gradient(180deg,transparent 0 21px,#dfe7f1 21px 22px);border-radius:2px;
 box-shadow:0 1px 1px #0000001f,0 3px 4px -2px #0000002e,4px 16px 16px -12px #0000006b}
.print-sheet[data-dl=paperclip] .sheet-download::before{content:'';position:absolute;left:-4px;top:-26px;width:22px;height:66px;background:var(--paperclip) center/contain no-repeat;transform:rotate(-4deg);filter:drop-shadow(1px 2px 1.2px rgba(0,0,0,.38))}
.print-sheet[data-dl=paperclip] .sheet-download-main{display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;padding:10px 14px;background:#2a2622;color:#fffdf7;font-size:15px;font-weight:700}
.print-sheet[data-dl=paperclip] .sheet-download-test{border:0;background:none;color:#2f2a24;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;padding:2px}
/* Cameo memo on the binder step: a ruled slip with the cameo cards clipped to it. */
.cameo-memo{position:relative;margin-inline-start:auto;display:flex;align-items:center;gap:12px;padding:9px 12px 9px 12px;border:0;cursor:pointer;font:inherit;text-align:start;color:#2f2a24;transform:rotate(-1.2deg);
 background-color:#fffdf7;background-image:var(--paper-grain),repeating-linear-gradient(180deg,transparent 0 17px,#dfe7f1 17px 18px);border-radius:2px;
 box-shadow:0 1px 1px #0000001f,0 3px 4px -2px #0000002e,4px 14px 14px -10px #0000006b;transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.cameo-memo:hover{transform:rotate(-.5deg) translateY(-2px)}
.cameo-memo::before{content:'';position:absolute;inset-inline-start:22px;top:-20px;z-index:2;width:16px;height:50px;background:var(--paperclip) center/contain no-repeat;transform:rotate(-6deg);filter:drop-shadow(1px 2px 1px rgba(0,0,0,.35))}
.cameo-memo-fan{position:relative;flex:none;width:62px;height:48px}
.cameo-memo-fan img{position:absolute;left:50%;bottom:0;width:31px;height:auto;aspect-ratio:245/342;border-radius:2px;background:#e9e4da;transform-origin:50% 120%;transform:translateX(-50%) translateX(calc(var(--o)*13px)) rotate(calc(var(--o)*10deg));box-shadow:0 1px 2px #0005}
.cameo-memo:hover .cameo-memo-fan img{transform:translateX(-50%) translateX(calc(var(--o)*15px)) rotate(calc(var(--o)*13deg))}
.cameo-memo-text strong{display:block;font-size:14px;line-height:1.3}
.cameo-memo-text small{display:block;margin-top:1px;color:#6b5f52;font-size:12.5px}
.cameo-memo-add{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:#2a2622;color:#fffdf7;font-size:19px;font-weight:600;line-height:1}
.cameo-memo:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.cameo-memo,.cameo-memo-fan img{transition:none}}
@media(max-width:700px){.cameo-memo{margin-top:10px}}