@font-face { font-family: Caveat; src: url('fonts/caveat.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Ephesis; src: url('fonts/ephesis.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
.note-writing { position: relative; isolation: isolate; }
.paper .note-writing #promise { position: relative; z-index: 1; background: transparent; width: 100%; }
#note-art-preview { position: absolute; right: 0; bottom: 0; width: 60%; height: 100%; object-fit: contain; opacity: .12; pointer-events: none; z-index: -1; }
#note-photo-wrap { position: relative; width: 92px; margin: 12px auto 0; padding: 6px 6px 14px; background: #fffaf0; box-shadow: 0 3px 8px #30251426; transform: rotate(-3deg); }
#note-photo-preview { width: 80px; height: 80px; object-fit: cover; display: block; }
#note-photo-remove { position: absolute; right: -16px; top: -12px; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 24px; }
.note-toolbar { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); border-top: 1px solid #6f655133; margin-top: 18px; padding-top: 8px; gap: 2px; }
.note-toolbar button { min-width: 0; min-height: 55px; border: 0; background: transparent; color: var(--paper-ink,#3d4838); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 3px; padding: 5px 0; }
.note-toolbar b { font: 28px/1.1 Georgia,serif; font-weight: 400; }
.note-toolbar svg { width: 28px; height: 28px; }
.note-toolbar span { font: 10px/1.4 Arial,sans-serif; }
.note-toolbar [data-note-font=script] b { font-family: Ephesis,cursive; font-size: 38px; }
.note-toolbar [data-note-font=sans] b { font-family: Arial,sans-serif; font-size: 24px; }
.note-toolbar [aria-pressed=true], .note-toolbar [aria-expanded=true], #note-art-picker [aria-pressed=true] { background: #6f655117; box-shadow: inset 0 -2px var(--paper-ink,#3d4838); }
#note-art-picker { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; padding-top: 12px; }
#note-art-picker button { min-width: 0; padding: 2px; min-height: 44px; border: 1px solid #6f655133; background: transparent; color: var(--paper-ink,#3d4838); font: 11px Arial,sans-serif; border-radius: 3px; }
#note-status { font: 11px/1.5 Arial,sans-serif; color: var(--paper-ink,#3d4838); margin: 12px 0 10px; }

/* Reserve the options’ natural wrapped height while keeping closed controls unfocusable. */
#note-art-picker[hidden] { display: grid !important; visibility: hidden; pointer-events: none; }