/* Paper notes on an open floral canvas; all chrome stays outside its camera. */
html:has(.folio-board) { overflow: hidden; }
body.folio-board { height: 100svh; min-height: 0; overflow: hidden; background: #a9b3c8; }
.noticeboard { --board-note-width: 320px; --board-note-height: 440px; --board-new-note-width: 420px; --board-new-note-height: 560px; --board-reply-scale: .88; --board-chrome: #f9f7f0e0; --board-sidebar-width: min(340px, calc(100vw - 84px)); position: fixed; inset: 0; overflow: hidden; color: var(--folio-masthead-ink); }
.noticeboard-heading { position: absolute; z-index: 30; top: max(18px, env(safe-area-inset-top)); right: 28px; left: 28px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; pointer-events: none; }
.noticeboard-heading > :is(a, .noticeboard-controls) { pointer-events: auto; }
#noticeboard-title { margin: 0; font-family: var(--folio-serif); font-size: 24px; font-weight: 500; letter-spacing: .18em; text-shadow: 0 1px 12px #ffffff60; }
.noticeboard-home { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 3px; background: var(--board-chrome); color: inherit; font-family: var(--folio-ui); font-size: 12px; transition: transform var(--folio-motion-panel) var(--folio-ease); }
.noticeboard-home:hover { transform: translateX(-3px); }
.noticeboard-controls { justify-self: end; display: flex; align-items: center; gap: 10px; }
.noticeboard-controls .folio-icon-button { background: var(--board-chrome); color: inherit; }
.noticeboard-write { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 7px 16px; border: 1px solid #f9edce8c; border-radius: 3px; background: #f8efda; color: #584735; box-shadow: 1px 4px 12px #2b1b2329; font-family: var(--folio-ui); font-size: 12px; transition: transform var(--folio-motion-panel) var(--folio-ease), box-shadow var(--folio-motion-panel); }
.noticeboard-write span { font-size: 23px; font-weight: 300; }
.noticeboard-write:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 2px 7px 15px #2b1b2333; }
.noticeboard button { cursor: pointer; }
.noticeboard button:disabled { cursor: wait; opacity: .55; }
.noticeboard-toolbar { position: absolute; z-index: 30; right: 28px; bottom: max(20px, env(safe-area-inset-bottom)); left: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; color: inherit; font-family: var(--folio-ui); font-size: 12px; pointer-events: none; }
.noticeboard-toolbar > .comment-network-hint { flex: 0 0 100%; color: inherit; font-size: 11px; line-height: 1.7; }
.noticeboard-toolbar > .comment-network-hint span { display: inline-block; padding: 6px 10px; border-radius: 3px; background: var(--board-chrome); }
.noticeboard-toolbar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; pointer-events: auto; }
.noticeboard-center { flex: 0 0 auto; background: var(--board-chrome); color: inherit; }
.noticeboard-count { display: flex; flex-direction: column; gap: 4px; padding: 9px 13px; border-radius: 3px; background: var(--board-chrome); }
#noticeboard-mode, #noticeboard-count-detail { font-size: 10px; opacity: .75; }
#noticeboard-mode:empty { display: none; }
.noticeboard-zoom { display: flex; align-items: center; border-radius: 3px; background: var(--board-chrome); }
.noticeboard-zoom button { min-width: 36px; height: 40px; padding: 0 8px; font-size: 20px; }
.noticeboard-zoom #noticeboard-zoom-reset { min-width: 84px; font-size: 12px; font-variant-numeric: tabular-nums; }
.noticeboard-zoom button:disabled { cursor: default; }
.noticeboard-zoom button:not(:disabled):hover { background: color-mix(in srgb, currentColor 9%, transparent); }
.noticeboard-account { display: flex; align-items: center; gap: 12px; padding: 4px 12px; border-radius: 3px; background: var(--board-chrome); pointer-events: auto; }
.noticeboard-account button { padding-block: 7px; text-underline-offset: 4px; }
.noticeboard-account button:hover { text-decoration: underline; }
.noticeboard-viewport { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; }
.noticeboard-viewport.is-panning { cursor: grabbing; user-select: none; }
.noticeboard-viewport:focus-visible { outline-offset: -5px; }
/* Keep the translated surface near viewport size; periodically rebase its
   repeat phase instead of allocating a canvas several wallpaper tiles wide. */
.noticeboard-wallpaper { --wallpaper-pad: 128px; position: absolute; inset: calc(-1 * var(--wallpaper-pad)); background: url('../images/noticeboard-weave.webp') center var(--wallpaper-pad) / 256px 256px repeat; filter: var(--folio-surround-filter); transform: translate3d(var(--wallpaper-x, 0px), var(--wallpaper-y, 0px), 0); pointer-events: none; }
.noticeboard-canvas { position: absolute; inset: 0; transform: translate3d(var(--camera-x, 0px), var(--camera-y, 0px), 0) scale(var(--camera-scale, 1)); transform-origin: 0 0; pointer-events: none; }
.noticeboard-decoration { position: absolute; inset: 0; pointer-events: none; }
.noticeboard-decoration :is(.folio-garden, .folio-foreground) { overflow: visible; }
.noticeboard-flowers { --flower-spacing: 760px; position: absolute; inset: 0; pointer-events: none; }
.noticeboard-flower { position: absolute; aspect-ratio: 1; filter: var(--folio-surround-filter); }
.noticeboard-flowers .folio-flowers { inset: 0; width: 100%; margin: 0; }
.noticeboard-petals { --petal-spacing: 500px; position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.noticeboard-petals .folio-petal { width: var(--petal-size); height: calc(var(--petal-size) * .74); animation-name: board-petal; }
#noticeboard-notes { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
:is(.board-note, .noticeboard-color, .noticeboard-dialog) { --note-paper: #f7eed5; --note-ink: #554637; --note-pin: #937665; --note-dark-ink: #302c28; --note-light-ink: #fff9ef; --note-rule: color-mix(in srgb, var(--note-ink) 18%, transparent); }
:is(.board-note, .noticeboard-color, .noticeboard-dialog)[data-color='rose'] { --note-paper: #f2d9d2; --note-ink: #704b49; --note-pin: #ac7472; }
:is(.board-note, .noticeboard-color, .noticeboard-dialog)[data-color='sage'] { --note-paper: #e0e6cf; --note-ink: #4a5946; --note-pin: #788b70; }
:is(.board-note, .noticeboard-color, .noticeboard-dialog)[data-color='blue'] { --note-paper: #dce8ed; --note-ink: #465769; --note-pin: #708796; }
:is(.board-note, .noticeboard-color, .noticeboard-dialog)[data-color='lilac'] { --note-paper: #e6dcef; --note-ink: #5b4e6b; --note-pin: #8b7899; }
.board-branch { position: relative; width: var(--note-width, var(--board-note-width)); pointer-events: none; }
#noticeboard-notes > .board-branch { position: absolute; left: var(--note-x); top: var(--note-y); }
.board-note-replies { display: grid; grid-template-columns: 100%; align-items: start; width: 100%; margin-top: -18px; }
.board-note-replies > .board-branch { grid-area: 1 / 1; justify-self: start; margin-left: calc(var(--reply-anchor, 50%) - var(--note-width) / 2 + var(--note-x)); margin-top: var(--note-y); }
.board-note { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; min-height: var(--note-height, var(--board-note-height)); padding: 38px 24px 20px; background: linear-gradient(175deg, #fff5, transparent 40%, #816a4320), var(--note-paper); color: var(--note-ink); box-shadow: 1px 4px 4px #3b281e30, 3px 12px 18px #3b281e1f, inset 0 1px 0 #fff8; transform: rotate(var(--note-turn)); transform-origin: 50% 18px; transition: transform var(--folio-motion-panel) var(--folio-ease), box-shadow var(--folio-motion-panel); animation: board-note-arrive 540ms var(--folio-ease) backwards; pointer-events: auto; cursor: default; }
.board-note::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: url('../images/paper-handmade.webp') 0 0 / 120px repeat; mix-blend-mode: multiply; opacity: .58; }
.board-note.is-located { outline: 2px solid var(--note-pin); outline-offset: 4px; }
.board-note::after { content: ''; position: absolute; right: 3px; bottom: -2px; left: 8px; height: 8px; z-index: -1; background: #35272124; filter: blur(4px); transform: rotate(-2deg); }
.board-note > * { position: relative; }
.board-note-message { flex: 1 1 auto; min-height: 44px; margin: 0 0 18px; font-family: var(--folio-serif); font-size: 16px; line-height: 1.9; }
.board-note > :is(.board-note-footer, .board-note-actions, .noticeboard-reactions) { flex-shrink: 0; }
.board-note-pin { position: absolute; top: 11px; left: calc(50% - 7px); width: 14px; height: 14px; border: 1px solid #fff4; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #ffffffad, transparent 45%), var(--note-pin); box-shadow: 1px 3px 3px #35281866; }
.board-note-handle { position: absolute; inset: 0 0 auto; height: 38px; width: 100%; cursor: grab; touch-action: none; border: 0; background: transparent; }
.board-note-handle:active { cursor: grabbing; }
.board-note-footer { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-family: var(--folio-ui); font-size: 11px; line-height: 1.6; }
.board-note-author { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-note-timestamps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 10px; letter-spacing: -.025em; }
.board-note-date { white-space: nowrap; }
.board-note-date { opacity: .75; font-variant-numeric: tabular-nums; }
.board-note-date span { margin-right: 4px; }
.board-note-actions { display: flex; gap: 14px; margin-top: 13px; padding-top: 10px; border-top: 1px solid currentColor; border-color: color-mix(in srgb, var(--note-ink) 16%, transparent); font-family: var(--folio-ui); font-size: 11px; }
.board-note-actions button { padding-block: 4px; opacity: .85; cursor: pointer; }
.board-note-actions button:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.board-note-reply { margin-left: auto; }
.noticeboard-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 10px; font-family: var(--folio-ui); font-size: 11px; }
.noticeboard-reaction { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 27px; padding: 3px 8px; border: 1px solid var(--note-rule); border-radius: 12px; background: color-mix(in srgb, var(--note-paper) 96%, var(--note-ink)); color: inherit; font-size: inherit; line-height: 1; cursor: pointer; transition: background-color 160ms ease, transform 160ms ease; }
.noticeboard-reaction:hover { background: var(--note-rule); transform: translateY(-1px); }
.noticeboard-reaction[aria-pressed='true'] { border-color: var(--note-ink); background: color-mix(in srgb, var(--note-paper) 85%, var(--note-ink)); }
.noticeboard-reaction:disabled { opacity: .55; cursor: wait; }
.noticeboard-reaction-add { width: 29px; padding: 3px; border-color: transparent; background: none; }
.noticeboard-reaction-add svg { width: 20px; height: 20px; }
.noticeboard-dialog.noticeboard-reaction-picker { inset: auto; margin: 0; width: max-content; height: auto; max-height: none; padding: 8px; overflow: visible; }
.noticeboard-reaction-picker:popover-open { display: grid; grid-template-columns: repeat(4, 38px); gap: 4px; animation: board-dialog-arrive 160ms var(--folio-ease); }
.noticeboard-dialog.noticeboard-reaction-picker::backdrop { background: transparent; backdrop-filter: none; }
.noticeboard-reaction-picker button { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid transparent; border-radius: 4px; font-size: 22px; line-height: 1; }
.noticeboard-reaction-picker button:hover, .noticeboard-reaction-picker button[aria-pressed='true'] { border-color: var(--note-rule); background: var(--note-rule); }
.board-note.is-dragging { transition: none; transform: rotate(0deg) translateY(-4px) scale(1.025); box-shadow: 4px 15px 28px #3020184d; }
.board-note-replies > .board-branch > .board-note.is-dragging { transform: rotate(var(--note-turn)); }
.board-note.is-saving { opacity: .75; }
.board-note.is-saving button { pointer-events: none; }
.noticeboard-status { position: absolute; z-index: 35; left: 50%; bottom: 140px; max-width: calc(100% - 40px); margin: 0; padding: 9px 16px; border-radius: 3px; background: var(--board-chrome); color: inherit; font-family: var(--folio-ui); font-size: 12px; transform: translateX(-50%); pointer-events: none; }
.noticeboard-status:empty { display: none; }
.noticeboard-loading { position: absolute; z-index: 35; top: 50%; left: 50%; box-sizing: border-box; width: max-content; max-width: calc(100% - 40px); margin: 0; padding: 14px 20px; border-radius: 3px; background: var(--board-chrome); color: inherit; font-family: var(--folio-ui); font-size: 14px; text-align: center; transform: translate(-50%, -50%); pointer-events: none; }
.noticeboard-loading:not([hidden]) { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.noticeboard-loading-label { display: flex; align-items: center; gap: 12px; }
.noticeboard-loading-hint { font-size: 12px; line-height: 1.7; opacity: .75; }
.noticeboard-spinner { flex: 0 0 auto; width: 20px; height: 20px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: board-loading-spin 1s linear infinite; }
.noticeboard-loading.has-error .noticeboard-spinner { display: none; }
.noticeboard-sidebar-edge { position: absolute; z-index: 36; inset: 0 0 0 auto; width: 18px; }
.noticeboard-sidebar-toggle { position: absolute; z-index: 42; top: 50%; right: 18px; background: var(--board-chrome); color: inherit; transform: translateY(-50%); transition: right var(--folio-motion-panel) var(--folio-ease); }
.noticeboard .noticeboard-sidebar-toggle:hover { transform: translateY(-50%); }
.noticeboard .noticeboard-sidebar-toggle:active { transform: translateY(-50%) scale(.94); }
.noticeboard:has(.noticeboard-sidebar.is-open) .noticeboard-sidebar-toggle { right: calc(var(--board-sidebar-width) + 30px); }
.noticeboard-sidebar { position: absolute; z-index: 41; top: max(80px, env(safe-area-inset-top)); right: 18px; bottom: max(160px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; width: var(--board-sidebar-width); border: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: 4px; background: var(--board-chrome); box-shadow: 0 8px 32px #20263624; color: inherit; font-family: var(--folio-ui); transform: translateX(calc(100% + 20px)); visibility: hidden; transition: transform var(--folio-motion-panel) var(--folio-ease), visibility var(--folio-motion-panel); }
.noticeboard-sidebar.is-open { transform: none; visibility: visible; }
.noticeboard-sidebar-heading { display: flex; flex: 0 0 auto; justify-content: space-between; align-items: center; padding: 13px 16px; border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.noticeboard-sidebar-heading h2 { margin: 0; font-family: var(--folio-serif); font-size: 18px; font-weight: 500; letter-spacing: .12em; }
.noticeboard-sidebar-heading button { width: 28px; height: 28px; font-size: 24px; }
.noticeboard-sidebar-content { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 12px; scrollbar-width: thin; }
#noticeboard-list-empty { margin: 12px 4px; font-size: 12px; opacity: .7; }
.noticeboard-tree { margin: 0; padding: 0; list-style: none; }
.noticeboard-tree .noticeboard-tree { margin-left: 7px; padding-left: 12px; border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.noticeboard-tree li { margin: 4px 0; }
.noticeboard-tree summary { display: flex; align-items: flex-start; gap: 4px; list-style: none; cursor: pointer; }
.noticeboard-tree summary::-webkit-details-marker { display: none; }
.noticeboard-tree summary::before { content: '›'; flex: 0 0 14px; margin-top: 9px; font-size: 18px; line-height: 1; text-align: center; }
.noticeboard-tree details[open] > summary::before { transform: rotate(90deg); }
.noticeboard-tree li > .noticeboard-tree-item { margin-left: 18px; width: calc(100% - 18px); }
.noticeboard-tree-item { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; padding: 8px; border-radius: 3px; text-align: left; }
.noticeboard-tree-item:hover, .noticeboard-tree-item[aria-current='true'] { background: color-mix(in srgb, currentColor 9%, transparent); }
.noticeboard-tree-author { font-size: 11px; opacity: .7; overflow-wrap: anywhere; }
.noticeboard-tree-excerpt { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.noticeboard :is(.noticeboard-zoom button, .noticeboard-tree-item, .noticeboard-tree summary, .noticeboard-sidebar-heading button):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.noticeboard-dialog { position: fixed; inset: 0; margin: auto; box-sizing: border-box; width: min(560px, calc(100% - 32px)); height: fit-content; max-height: calc(100svh - 48px); overflow: auto; overscroll-behavior: contain; padding: 32px; border: 1px solid var(--note-rule); border-radius: 5px; background-color: var(--note-paper); background-image: linear-gradient(160deg, #fff2, transparent 55%, #30201508), url('../images/paper-handmade.webp'); background-size: 100% 100%, 120px 120px; background-blend-mode: normal, multiply; color: var(--note-ink); box-shadow: 0 2px 0 #fff4 inset, 0 3px 6px #1b1c3126, 0 24px 70px #1b1c314d; transition: background-color 180ms ease, color 180ms ease; }
.noticeboard-dialog::backdrop { background: #20263666; backdrop-filter: blur(3px); }
.noticeboard-dialog[open] { animation: board-dialog-arrive 300ms var(--folio-ease) both; }
.noticeboard-dialog button { cursor: pointer; }
.noticeboard-dialog-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; gap: 16px; }
.noticeboard-dialog h2 { margin: 0; font-family: var(--folio-serif); font-size: 25px; font-weight: 500; }
.noticeboard-close { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 3px; font-family: var(--folio-ui); font-size: 27px; font-weight: 300; }
.noticeboard-close:hover { background: var(--note-rule); }
.noticeboard-dialog textarea { display: block; box-sizing: border-box; width: 100%; resize: vertical; min-height: 190px; padding: 14px 16px; border: 1px solid var(--note-rule); border-radius: 3px; background: color-mix(in srgb, var(--note-paper) 96%, var(--note-ink)); color: inherit; font-family: var(--folio-serif); font-size: 16px; line-height: 1.9; }
.noticeboard-dialog textarea::placeholder { color: color-mix(in srgb, var(--note-ink) 55%, transparent); }
.noticeboard-markdown-hint { margin: 8px 0 0; font-family: var(--folio-ui); font-size: 11px; opacity: .65; }
.noticeboard-colors { min-width: 0; margin: 24px 0; padding: 0; border: 0; }
.noticeboard-colors legend { float: none; margin: 0 0 12px; padding: 0; font-family: var(--folio-ui); font-size: 12px; }
.noticeboard-color-options { display: flex; flex-wrap: wrap; gap: 8px; }
.noticeboard-color { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; min-height: 38px; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--note-ink) 20%, transparent); border-radius: 3px; background: var(--note-paper); color: var(--note-ink); font-family: var(--folio-ui); font-size: 12px; line-height: 1; white-space: nowrap; cursor: pointer; transition: border-color 180ms ease, box-shadow 180ms ease; }
.noticeboard-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.noticeboard-color-chip { flex: 0 0 18px; width: 18px; height: 18px; border: 1px solid var(--note-rule); border-radius: 50%; background: linear-gradient(135deg, #fff6, transparent), var(--note-paper); pointer-events: none; }
.noticeboard-color:has(input:checked) { border-color: var(--note-ink); box-shadow: inset 0 0 0 1px var(--note-ink); }
.noticeboard-color:has(input:focus-visible) { outline: 2px solid var(--note-ink); outline-offset: 3px; }
.noticeboard-hex { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; font-family: var(--folio-ui); font-size: 12px; }
.noticeboard-hex input { box-sizing: border-box; width: 136px; padding: 9px 12px; border: 1px solid var(--note-rule); border-radius: 3px; background: color-mix(in srgb, var(--note-paper) 96%, var(--note-ink)); color: inherit; font-family: var(--font-code); font-size: 13px; }
.noticeboard-hex input:disabled { opacity: .45; }
.noticeboard-dialog :is(textarea, input):focus-visible { outline: 2px solid var(--note-ink); outline-offset: 2px; }
.noticeboard-geometry { display: grid; grid-template-columns: minmax(0, 1fr) 128px; align-items: center; gap: 20px; min-width: 0; margin: 24px 0; padding: 0; border: 0; }
.noticeboard-geometry legend { margin-bottom: 14px; font-family: var(--folio-ui); font-size: 12px; }
.noticeboard-geometry-controls { display: grid; gap: 16px; }
.noticeboard-geometry-controls label { display: grid; grid-template-columns: 2em minmax(0, 1fr) 42px; align-items: center; gap: 12px; font-family: var(--folio-ui); font-size: 11px; }
.noticeboard-geometry-controls input { width: 100%; margin: 0; accent-color: var(--note-ink); cursor: pointer; }
.noticeboard-geometry-controls output { text-align: right; font-variant-numeric: tabular-nums; }
.noticeboard-geometry-preview { display: grid; place-items: center; height: 170px; }
.noticeboard-preview-paper { position: relative; box-sizing: border-box; width: var(--preview-width); height: var(--preview-height); padding: 22px 12px 12px; background: linear-gradient(175deg, #fff4, #816a4315), var(--note-paper); color: var(--note-ink); box-shadow: 1px 3px 3px #3b281e30, 2px 8px 12px #3b281e20; transform: rotate(var(--preview-turn)); transition: transform 160ms ease; }
.noticeboard-preview-paper .board-note-pin { top: 5px; left: calc(50% - 3px); width: 6px; height: 6px; }
.noticeboard-preview-paper p { height: 100%; margin: 0; overflow: hidden; font-family: var(--folio-serif); font-size: 7px; line-height: 1.8; white-space: pre-wrap; }
.noticeboard-sizing-hint { margin: -8px 0 24px; font-family: var(--folio-ui); font-size: 11px; opacity: .65; }
.noticeboard-dialog-actions { display: flex; justify-content: flex-end; gap: 20px; align-items: center; font-family: var(--folio-ui); font-size: 12px; }
.noticeboard-submit { padding: 10px 20px; border: 1px solid var(--note-ink); border-radius: 3px; background: var(--note-ink); color: var(--note-paper); }
.noticeboard-submit:disabled { opacity: .5; cursor: wait; }
.noticeboard-form-status { margin: 14px 0 0; font-family: var(--folio-ui); font-size: 12px; line-height: 1.7; }
.noticeboard-form-status:empty { display: none; }
.noticeboard-delete-dialog p { margin: 20px 0 28px; font-family: var(--folio-ui); font-size: 13px; line-height: 1.8; }
.noticeboard-reply-target { margin: 0 0 12px; font-family: var(--folio-ui); font-size: 11px; line-height: 1.6; opacity: .7; }
.noticeboard-reply-context { margin: 0 0 10px; padding-left: 10px; border-left: 2px solid var(--note-pin); font-family: var(--folio-ui); font-size: 12px; line-height: 1.6; }
.noticeboard-markdown { white-space: normal; overflow-wrap: anywhere; }
.noticeboard-markdown > :first-child { margin-top: 0; }
.noticeboard-markdown > :last-child { margin-bottom: 0; }
.noticeboard-markdown :is(p, ul, ol, blockquote, pre, table) { margin-block: .75em; }
.noticeboard-markdown :is(h1, h2, h3, h4, h5, h6) { margin: 1em 0 .45em; font-family: inherit; font-weight: 600; line-height: 1.5; }
.noticeboard-markdown h1 { font-size: 1.4em; }
.noticeboard-markdown h2 { font-size: 1.25em; }
.noticeboard-markdown :is(h3, h4, h5, h6) { font-size: 1.1em; }
.noticeboard-markdown :is(ul, ol) { padding-left: 1.5em; }
.noticeboard-markdown ul { list-style: disc; }
.noticeboard-markdown ol { list-style: decimal; }
.noticeboard-markdown li + li { margin-top: .2em; }
.noticeboard-markdown li > :is(ul, ol) { margin-block: .25em; }
.noticeboard-markdown a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.noticeboard-markdown blockquote { padding-left: 1em; border-left: 2px solid var(--note-rule); }
.noticeboard-markdown code { padding: .1em .3em; border-radius: 2px; background: color-mix(in srgb, var(--note-ink) 8%, transparent); font-family: var(--font-code); font-size: .85em; }
.noticeboard-markdown pre { padding: 12px; border-radius: 3px; background: color-mix(in srgb, var(--note-ink) 8%, transparent); white-space: pre-wrap; }
.noticeboard-markdown pre code { padding: 0; background: none; }
.noticeboard-markdown img { display: block; max-width: 100%; height: auto; margin-block: .75em; border-radius: 2px; }
.noticeboard-markdown table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .9em; }
.noticeboard-markdown :is(th, td) { padding: .4em .7em; border: 1px solid var(--note-rule); }
.noticeboard-markdown hr { margin-block: 1em; border: 0; border-top: 1px solid var(--note-rule); }
html[data-theme='dark'] .noticeboard { --board-chrome: #28374cdd; }
@keyframes board-loading-spin { to { transform: rotate(1turn); } }
@keyframes board-note-arrive { from { opacity: 0; transform: rotate(calc(var(--note-turn) - 3deg)) translateY(-12px); } to { opacity: 1; transform: rotate(var(--note-turn)); } }
@keyframes board-dialog-arrive { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes board-petal {
    0% { opacity: 0; transform: translate(0, -30px) rotate(var(--petal-start)); }
    18% { opacity: var(--petal-opacity); }
    30% { transform: translate(calc(var(--petal-x) * .3 + var(--petal-sway)), calc(var(--petal-y) * .3)) rotate(calc(var(--petal-start) + var(--petal-turn) * .3)); }
    65% { transform: translate(calc(var(--petal-x) * .65 - var(--petal-sway)), calc(var(--petal-y) * .65)) rotate(calc(var(--petal-start) + var(--petal-turn) * .65)); }
    85% { opacity: var(--petal-opacity); }
    100% { opacity: 0; transform: translate(var(--petal-x), var(--petal-y)) rotate(calc(var(--petal-start) + var(--petal-turn))); }
}
@media (max-width: 767px) {
    .noticeboard-heading { left: 12px; right: 12px; gap: 6px; }
    #noticeboard-title { font-size: 19px; letter-spacing: .12em; }
    .noticeboard-home { padding: 9px 10px; font-size: 11px; gap: 5px; }
    .noticeboard-controls { gap: 5px; }
    .noticeboard-controls .folio-icon-button { width: 34px; height: 34px; }
    .noticeboard-write { gap: 3px; padding: 5px 9px; min-height: 34px; font-size: 11px; white-space: nowrap; }
    .noticeboard-write span { font-size: 19px; }
    .noticeboard-toolbar { left: 12px; right: 12px; font-size: 11px; gap: 8px; }
    .noticeboard-count { padding: 7px 10px; }
    .noticeboard-account { gap: 8px; }
    .noticeboard-toolbar-actions { gap: 8px; margin-left: auto; }
    .noticeboard-zoom button { min-width: 32px; height: 34px; }
    .noticeboard-sidebar-toggle { width: 34px; height: 34px; }
    .noticeboard-center { width: 34px; height: 34px; }
    .noticeboard-dialog { padding: 24px; }
    .noticeboard-color { padding-inline: 8px; }
    .noticeboard-geometry { grid-template-columns: minmax(0, 1fr) 88px; gap: 12px; }
    .noticeboard-geometry-controls label { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .board-note, .noticeboard-dialog[open], .noticeboard-reaction-picker:popover-open, .noticeboard-spinner { animation: none; } .board-note, .noticeboard-write, .noticeboard-reaction, .noticeboard-sidebar, .noticeboard-sidebar-toggle { transition: none; } }