@makefully/notefully 0.2.4 → 0.2.5

package/README.md

@@ -135,4 +135,35 @@ Notefully.init({
 
 Kind ids are lowercased slugs (`polish`, `ux`). Labels default to title case; use `{ id, label }` for custom button labels. Optional `title` / `description` override the dialog heading and intro (the copy before the screenshot note). The last selected kind is remembered in `localStorage`. The relay stores whatever kind the widget submits.
 
+### Restyling
+
+The widget mounts under `#notefully` with `all: initial` so host page styles do not leak in. Prefer overriding the public CSS variables on that root (load your rules after `@makefully/notefully/notefully.css`). For structural tweaks, target `#notefully .nf-*` so specificity matches the shipped sheet.
+
+```css
+/* Brand colors + type */
+#notefully {
+  --nf-accent: #0b6e4f;
+  --nf-accent-text: #fff;
+  --nf-btn: #0b6e4f;
+  --nf-btn-text: #fff;
+  --nf-panel: #f4faf7;
+  --nf-input: #e7f3ed;
+  --nf-border: rgba(11, 110, 79, 0.22);
+  --nf-font: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
+}
+
+/* Softer pill hover / press fills (default 20% / 80%) */
+#notefully {
+  --nf-fill-hover: 12%;
+  --nf-fill-press: 70%;
+}
+
+/* One-off layout tweak */
+#notefully .nf-title {
+  font-size: 1.35rem;
+}
+```
+
+Useful tokens: `--nf-accent`, `--nf-btn`, `--nf-panel`, `--nf-input`, `--nf-text`, `--nf-muted`, `--nf-border`, `--nf-font`, `--nf-pill-radius`, `--nf-control-size`, `--nf-fill-hover`, `--nf-fill-press`. Themes (`maker`, `all-business`, …) set the same variables via `data-theme`; your overrides on `#notefully` win when declared later.
+
 Secrets never go in the widget — only the public project key and relay URL.

package/dist/notefully.css

@@ -1 +1 @@
-#notefully{all:initial;--nf-launcher-left: 16px;--nf-launcher-bottom: 16px;--nf-radius: 10px;--nf-z: 2147483000;--nf-accent: #864093;--nf-accent-text: #ffffff;--nf-accent-hot: #e83590;--nf-btn: #864093;--nf-btn-border: #382c74;--nf-btn-text: #ffffff;--nf-panel: #f7f4fb;--nf-text: #2a2140;--nf-muted: rgba(42, 33, 64, .72);--nf-input: #efe8f8;--nf-border: rgba(56, 44, 116, .18);--nf-backdrop: rgba(20, 12, 28, .55);--nf-danger: #e83590;--nf-success: #1a7a3c;--nf-fail: #c2185b;--nf-mark: #fdd341;--nf-mark-text: #2a2140;--nf-canvas-bg: #111;font-family:ui-sans-serif,system-ui,sans-serif;color:var(--nf-text)}#notefully[data-theme=maker]{--nf-accent: #864093;--nf-accent-text: #ffffff;--nf-accent-hot: #e83590;--nf-btn: #864093;--nf-btn-border: #382c74;--nf-btn-text: #ffffff;--nf-panel: #f7f4fb;--nf-text: #2a2140;--nf-muted: rgba(42, 33, 64, .72);--nf-input: #efe8f8;--nf-border: rgba(56, 44, 116, .18);--nf-backdrop: rgba(20, 12, 28, .55);--nf-danger: #e83590;--nf-success: #1a7a3c;--nf-fail: #c2185b;--nf-mark: #fdd341;--nf-mark-text: #2a2140}#notefully[data-theme=all-business]{--nf-accent: #5c6570;--nf-accent-text: #ffffff;--nf-accent-hot: #8a4a4a;--nf-btn: #5c6570;--nf-btn-border: #3a4048;--nf-btn-text: #ffffff;--nf-panel: #ffffff;--nf-text: #1f1f23;--nf-muted: rgba(31, 31, 35, .68);--nf-input: #f0f0f2;--nf-border: rgba(0, 0, 0, .14);--nf-backdrop: rgba(20, 20, 24, .4);--nf-danger: #8a4a4a;--nf-success: #1f7a3a;--nf-fail: #b42318;--nf-mark: #3d6ea8;--nf-mark-text: #ffffff}#notefully[data-theme=brighter-day]{--nf-accent: #5aa8dc;--nf-accent-text: #ffffff;--nf-accent-hot: #f08ab8;--nf-btn: #5aa8dc;--nf-btn-border: #3d7eae;--nf-btn-text: #ffffff;--nf-panel: #fffdf6;--nf-text: #2a2440;--nf-muted: rgba(42, 36, 64, .68);--nf-input: #ffeef5;--nf-border: rgba(90, 168, 220, .28);--nf-backdrop: rgba(60, 40, 70, .35);--nf-danger: #f08ab8;--nf-success: #1f7a3a;--nf-fail: #c4476a;--nf-mark: #5aa8dc;--nf-mark-text: #ffffff}#notefully[data-theme=quiet-night]{--nf-accent: #c4aa5a;--nf-accent-text: #121416;--nf-accent-hot: #6e3a3a;--nf-btn: #3a4048;--nf-btn-border: #0e1012;--nf-btn-text: #d8dbe0;--nf-panel: #1c1f24;--nf-text: #d8dbe0;--nf-muted: rgba(216, 219, 224, .68);--nf-input: #262a30;--nf-border: rgba(255, 255, 255, .12);--nf-backdrop: rgba(0, 0, 0, .65);--nf-danger: #c88888;--nf-success: #7dcea0;--nf-fail: #e89898;--nf-mark: #c4aa5a;--nf-mark-text: #121416}#notefully *{box-sizing:border-box}#notefully .nf-launcher{position:fixed;left:var(--nf-launcher-left);bottom:var(--nf-launcher-bottom);z-index:var(--nf-z);width:48px;height:48px;padding:0;display:grid;place-items:center;background:var(--nf-btn);color:var(--nf-btn-text);border:1px solid var(--nf-btn-border);border-radius:999px;cursor:pointer;box-shadow:0 8px 24px #00000040}#notefully .nf-launcher-icon{width:22px;height:22px;display:block}#notefully .nf-launcher[hidden],#notefully .nf-dialog[hidden],#notefully .nf-stop-video[hidden],#notefully .nf-stage[hidden],#notefully .nf-palette[hidden],#notefully .nf-reset-crop[hidden],#notefully .nf-restore[hidden],#notefully .nf-discard-shot[hidden],#notefully .nf-recapture[hidden],#notefully .nf-privacy[hidden],#notefully .nf-privacy-summary[hidden],#notefully .nf-privacy-panel[hidden],#notefully .nf-privacy-text[hidden],#notefully .nf-privacy-rows[hidden],#notefully .nf-video[hidden],#notefully .nf-author[hidden]{display:none!important}#notefully .nf-dialog{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--nf-z);background:var(--nf-backdrop);display:flex;align-items:center;justify-content:center;padding:24px}#notefully .nf-panel{position:relative;width:min(920px,100%);max-height:calc(100vh - 48px);overflow:auto;background:var(--nf-panel);color:var(--nf-text);border:1px solid var(--nf-border);border-radius:var(--nf-radius);padding:16px;display:flex;flex-direction:column;gap:12px}#notefully .nf-close{position:absolute;top:10px;inset-inline-end:10px;z-index:2}#notefully .nf-heading{display:flex;flex-direction:column;gap:4px;padding-inline-end:40px}#notefully .nf-title{margin:0;font:700 1.15rem/1.25 ui-sans-serif,system-ui,sans-serif;color:var(--nf-text)}#notefully .nf-intro{margin:0;font:13px/1.45 ui-sans-serif,system-ui,sans-serif;color:var(--nf-muted)}#notefully .nf-panel-body{display:flex;flex-direction:column;gap:12px;min-height:0}#notefully .nf-panel-body[hidden]{display:none!important}#notefully .nf-success-msg{margin:0;text-align:center;font:700 1.35rem/1.2 ui-sans-serif,system-ui,sans-serif;letter-spacing:.01em;color:var(--nf-success)}#notefully .nf-success-msg[hidden]{display:none!important}#notefully .nf-success-link{display:inline-flex;align-items:center;justify-content:center;gap:.28em;margin:.7rem 0 0;padding:.15rem .1rem;font:500 .78rem/1.2 ui-sans-serif,system-ui,sans-serif;letter-spacing:.01em;color:var(--nf-muted);text-decoration:none;pointer-events:auto;cursor:pointer;opacity:.88}#notefully .nf-success-link .nf-icon{width:.95em;height:.95em;flex:0 0 auto}#notefully .nf-success-link[hidden]{display:none!important}#notefully .nf-success-link:hover,#notefully .nf-success-link:focus-visible{color:var(--nf-text);opacity:1;outline:none}#notefully .nf-success-link:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--nf-accent) 35%,transparent);border-radius:4px}#notefully .nf-dialog.nf-success{pointer-events:none}#notefully .nf-dialog.nf-success.nf-success-sticky{pointer-events:auto}#notefully .nf-dialog.nf-success .nf-panel{width:auto;min-width:11rem;max-width:min(280px,90vw);max-height:none;overflow:hidden;padding:1.75rem 2.35rem;align-items:center;justify-content:center;gap:0}#notefully .nf-dialog.nf-success.nf-success-sticky .nf-panel{max-width:min(320px,92vw);padding:1.5rem 1.75rem 1.45rem;gap:0;pointer-events:auto;align-items:center}@media(prefers-reduced-motion:reduce){#notefully .nf-dialog.nf-success .nf-panel{transform:none!important;transition:none!important}}#notefully .nf-stage{display:flex;flex-direction:column;gap:0}#notefully .nf-shot-block{width:min(100%,calc(48vh * var(--nf-shot-aspect, 16 / 9)));max-width:100%;margin-inline:auto;display:flex;flex-direction:column;border:1px solid var(--nf-border);border-radius:8px;overflow:hidden;background:var(--nf-canvas-bg)}#notefully .nf-palette{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:8px 10px;background:var(--nf-panel);border-top:1px solid var(--nf-border)}#notefully .nf-palette-tools,#notefully .nf-palette-shot{display:flex;flex-wrap:wrap;gap:8px;align-items:center}#notefully .nf-palette-shot{margin-inline-start:auto}#notefully .nf-tool,#notefully .nf-reset-crop,#notefully .nf-icon-btn{background:var(--nf-input);color:var(--nf-text);border:1px solid var(--nf-border);border-radius:8px;padding:6px 10px;cursor:pointer;font:13px ui-sans-serif,system-ui,sans-serif}#notefully .nf-icon-btn{width:36px;height:36px;padding:0;display:grid;place-items:center;flex:0 0 36px}#notefully .nf-icon{width:18px;height:18px;display:block}#notefully .nf-tool[data-active=true],#notefully .nf-icon-btn[data-active=true]{border-color:var(--nf-accent);color:var(--nf-accent);box-shadow:inset 0 0 0 1px var(--nf-accent)}#notefully .nf-canvas{position:relative;width:100%;max-height:48vh;aspect-ratio:var(--nf-shot-aspect, auto);background:var(--nf-canvas-bg);overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none}#notefully .nf-dialog.nf-success:not(.nf-success-sticky) .nf-close{display:none!important}#notefully .nf-canvas[data-draw=true],#notefully .nf-canvas[data-draw=true] .nf-shot{cursor:crosshair}#notefully .nf-sticker{cursor:grab}#notefully .nf-sticker[data-preview=true]{cursor:crosshair}#notefully .nf-sticker.nf-arrow .nf-arrow-hit{cursor:grab}#notefully[data-grabbing=true] .nf-canvas,#notefully[data-grabbing=true] .nf-shot,#notefully[data-grabbing=true] .nf-sticker,#notefully[data-grabbing=true] .nf-sticker *{cursor:grabbing}#notefully .nf-shot{position:absolute;overflow:hidden;--nf-anno-stroke: 3px;--nf-anno-badge: 20px;--nf-anno-badge-font: 11px;--nf-anno-handle: 10px}#notefully .nf-shot img{position:absolute;display:block;max-height:none;pointer-events:none;-webkit-user-drag:none;user-drag:none}#notefully .nf-canvas video.nf-recording-preview{display:block;width:160px;height:auto;max-height:none;object-fit:contain;pointer-events:auto}#notefully .nf-sticker,#notefully .nf-crop{position:absolute;pointer-events:auto;color:var(--nf-mark)}#notefully .nf-sticker[data-selected=true]{z-index:4}#notefully .nf-sticker[data-preview=true],#notefully .nf-sticker.nf-arrow{pointer-events:none}#notefully .nf-sticker.nf-arrow .nf-handle{pointer-events:auto}#notefully .nf-rect,#notefully .nf-circle{border:var(--nf-anno-stroke) solid var(--nf-mark);background:transparent;box-sizing:border-box}#notefully .nf-circle{border-radius:50%}#notefully .nf-arrow-svg{display:block;overflow:visible;pointer-events:none}#notefully .nf-arrow-hit{fill:none;stroke:transparent;stroke-width:16;pointer-events:stroke}#notefully .nf-arrow-shaft{fill:none;stroke:currentColor;stroke-width:var(--nf-anno-stroke);stroke-linecap:round;pointer-events:none}#notefully .nf-arrow-head{fill:currentColor;stroke:none;pointer-events:none}#notefully .nf-badge{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);box-sizing:border-box;min-width:var(--nf-anno-badge);height:var(--nf-anno-badge);padding:0 calc(var(--nf-anno-badge-font) * .35);border-radius:50%;background:var(--nf-mark);color:var(--nf-mark-text);font:700 var(--nf-anno-badge-font)/var(--nf-anno-badge) ui-sans-serif,system-ui,sans-serif;text-align:center;pointer-events:none;z-index:4}#notefully .nf-sticker.nf-arrow .nf-badge{top:50%}#notefully .nf-handle{position:absolute;width:var(--nf-anno-handle);height:var(--nf-anno-handle);background:#fff;border:2px solid var(--nf-mark);border-radius:2px;z-index:5;box-sizing:border-box}#notefully .nf-handle[data-dir=nw]{left:-6px;top:-6px;cursor:nwse-resize}#notefully .nf-handle[data-dir=ne]{right:-6px;top:-6px;cursor:nesw-resize}#notefully .nf-handle[data-dir=sw]{left:-6px;bottom:-6px;cursor:nesw-resize}#notefully .nf-handle[data-dir=se]{right:-6px;bottom:-6px;cursor:nwse-resize}#notefully .nf-handle[data-dir=start],#notefully .nf-handle[data-dir=end]{margin:0;cursor:grab}#notefully .nf-crop{border:2px dashed var(--nf-accent);background:color-mix(in srgb,var(--nf-accent) 14%,transparent);box-shadow:0 0 0 9999px #00000073;pointer-events:none}#notefully .nf-text{width:100%;min-height:96px;resize:vertical;background:var(--nf-input);color:var(--nf-text);border:1px solid var(--nf-border);border-radius:8px;padding:10px;font:14px/1.4 ui-sans-serif,system-ui,sans-serif}#notefully .nf-author{width:100%;box-sizing:border-box;background:var(--nf-input);color:var(--nf-text);border:1px solid var(--nf-border);border-radius:8px;padding:10px;font:14px/1.4 ui-sans-serif,system-ui,sans-serif}#notefully .nf-author::placeholder{color:var(--nf-muted)}#notefully .nf-kind-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}#notefully .nf-kind{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto;min-width:0}#notefully .nf-kind button{background:var(--nf-input);color:var(--nf-muted);border:1px solid var(--nf-border);border-radius:999px;padding:6px 12px;cursor:pointer}#notefully .nf-kind button[data-active=true]{color:var(--nf-accent-text);background:var(--nf-accent);border-color:var(--nf-accent)}#notefully .nf-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}#notefully .nf-privacy{display:flex;flex-direction:column;gap:8px}#notefully .nf-privacy-summary{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;margin-left:auto;flex:0 1 auto;max-width:100%}#notefully .nf-privacy-text{color:var(--nf-muted);font:12px/1.35 ui-sans-serif,system-ui,sans-serif;text-align:right}#notefully .nf-privacy-done{background:transparent;color:var(--nf-accent);border:0;padding:0;margin:0;cursor:pointer;font:600 12px ui-sans-serif,system-ui,sans-serif;text-decoration:underline;text-underline-offset:2px}#notefully .nf-privacy-done:hover{color:var(--nf-accent-hot)}#notefully .nf-privacy-panel{display:flex;flex-direction:column;gap:8px;border:1px solid var(--nf-border);border-radius:8px;background:var(--nf-input);padding:10px}#notefully .nf-privacy-scroll{max-height:min(240px,36vh);overflow:auto;display:flex;flex-direction:column;gap:12px}#notefully .nf-privacy-section-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}#notefully .nf-privacy-section[data-redacted=true] .nf-privacy-section-head{margin-bottom:0;opacity:.62}#notefully .nf-privacy-section[data-redacted=true] .nf-privacy-section-title{color:var(--nf-muted);text-decoration:line-through}#notefully .nf-privacy-section-title{margin:0;font:600 12px ui-sans-serif,system-ui,sans-serif;color:var(--nf-text)}#notefully .nf-privacy-toggle{margin-left:auto;display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--nf-muted);font:11px ui-sans-serif,system-ui,sans-serif;-webkit-user-select:none;user-select:none}#notefully .nf-privacy-toggle input{margin:0;accent-color:var(--nf-accent)}#notefully .nf-privacy-rows{display:flex;flex-direction:column;gap:6px}#notefully .nf-privacy-row{display:flex;align-items:flex-start;gap:8px;padding:6px 8px;border-radius:6px;background:var(--nf-panel);border:1px solid var(--nf-border)}#notefully .nf-privacy-row[data-redacted=true]{align-items:center;opacity:.55;background:transparent;border-style:dashed}#notefully .nf-privacy-row-text{min-width:0;flex:1}#notefully .nf-privacy-row-title{font:600 11px ui-sans-serif,system-ui,sans-serif;color:var(--nf-text);text-transform:capitalize}#notefully .nf-privacy-row-detail{margin-top:2px;font:11px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--nf-muted);word-break:break-word;white-space:pre-wrap}#notefully .nf-console-styled{display:inline-block;vertical-align:baseline;white-space:pre-wrap}#notefully .nf-privacy-row-summary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:11px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--nf-muted);text-decoration:line-through}#notefully .nf-privacy-done{align-self:flex-end}#notefully .nf-actions button{border:1px solid var(--nf-border);border-radius:8px;padding:8px 12px;cursor:pointer;font:600 13px ui-sans-serif,system-ui,sans-serif;background:var(--nf-input);color:var(--nf-text)}#notefully .nf-actions .nf-icon-btn{padding:0}#notefully .nf-submit{margin-left:auto;background:var(--nf-btn)!important;color:var(--nf-btn-text)!important;border-color:var(--nf-btn-border)!important}#notefully .nf-submit:disabled{opacity:.55;cursor:wait}#notefully .nf-status{color:var(--nf-muted);font:13px ui-sans-serif,system-ui,sans-serif;min-height:1.2em}#notefully .nf-stop-video{position:fixed;top:16px;left:50%;transform:translate(-50%);z-index:calc(var(--nf-z) + 1);background:var(--nf-danger);color:#fff;border:0;border-radius:999px;padding:10px 18px;font:700 14px ui-sans-serif,system-ui,sans-serif;cursor:pointer}#notefully[data-nf-hidden-launcher] .nf-launcher{display:none!important}.nf-capture-chrome{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483645;display:grid;place-items:center;pointer-events:none;background:#140c1c47;animation:nf-capture-fade .16s ease-out both}.nf-capture-chrome-pill{display:inline-flex;align-items:center;gap:.55em;padding:.65em 1.1em;border-radius:999px;background:#f7f4fbf0;color:#2a2140;font:650 14px ui-sans-serif,system-ui,sans-serif;letter-spacing:.01em;box-shadow:0 10px 28px #140c1c38}.nf-capture-chrome-pill:before{content:"";width:.7em;height:.7em;border-radius:50%;border:2px solid rgba(42,33,64,.22);border-top-color:#864093;animation:nf-capture-spin .7s linear infinite}@keyframes nf-capture-fade{0%{opacity:0}to{opacity:1}}@keyframes nf-capture-spin{to{transform:rotate(360deg)}}
+#notefully{all:initial;--nf-launcher-left: 16px;--nf-launcher-bottom: 16px;--nf-z: 2147483000;--nf-font: ui-sans-serif, system-ui, sans-serif;--nf-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--nf-radius: 10px;--nf-pill-radius: 999px;--nf-control-size: 36px;--nf-check-size: 18px;--nf-fill-hover: 20%;--nf-fill-press: 80%;--nf-fill-mid: 40%;--nf-accent: #864093;--nf-accent-text: #ffffff;--nf-accent-hot: #e83590;--nf-btn: #864093;--nf-btn-border: #382c74;--nf-btn-text: #ffffff;--nf-panel: #f7f4fb;--nf-text: #2a2140;--nf-muted: rgba(42, 33, 64, .72);--nf-input: #efe8f8;--nf-border: rgba(56, 44, 116, .18);--nf-backdrop: rgba(20, 12, 28, .55);--nf-danger: #e83590;--nf-success: #1a7a3c;--nf-fail: #c2185b;--nf-mark: #fdd341;--nf-mark-text: #2a2140;--nf-canvas-bg: #111;font-family:var(--nf-font);color:var(--nf-text)}#notefully[data-theme=maker]{--nf-accent: #864093;--nf-accent-text: #ffffff;--nf-accent-hot: #e83590;--nf-btn: #864093;--nf-btn-border: #382c74;--nf-btn-text: #ffffff;--nf-panel: #f7f4fb;--nf-text: #2a2140;--nf-muted: rgba(42, 33, 64, .72);--nf-input: #efe8f8;--nf-border: rgba(56, 44, 116, .18);--nf-backdrop: rgba(20, 12, 28, .55);--nf-danger: #e83590;--nf-success: #1a7a3c;--nf-fail: #c2185b;--nf-mark: #fdd341;--nf-mark-text: #2a2140}#notefully[data-theme=all-business]{--nf-accent: #5c6570;--nf-accent-text: #ffffff;--nf-accent-hot: #8a4a4a;--nf-btn: #5c6570;--nf-btn-border: #3a4048;--nf-btn-text: #ffffff;--nf-panel: #ffffff;--nf-text: #1f1f23;--nf-muted: rgba(31, 31, 35, .68);--nf-input: #f0f0f2;--nf-border: rgba(0, 0, 0, .14);--nf-backdrop: rgba(20, 20, 24, .4);--nf-danger: #8a4a4a;--nf-success: #1f7a3a;--nf-fail: #b42318;--nf-mark: #3d6ea8;--nf-mark-text: #ffffff}#notefully[data-theme=brighter-day]{--nf-accent: #5aa8dc;--nf-accent-text: #ffffff;--nf-accent-hot: #f08ab8;--nf-btn: #5aa8dc;--nf-btn-border: #3d7eae;--nf-btn-text: #ffffff;--nf-panel: #fffdf6;--nf-text: #2a2440;--nf-muted: rgba(42, 36, 64, .68);--nf-input: #ffeef5;--nf-border: rgba(90, 168, 220, .28);--nf-backdrop: rgba(60, 40, 70, .35);--nf-danger: #f08ab8;--nf-success: #1f7a3a;--nf-fail: #c4476a;--nf-mark: #5aa8dc;--nf-mark-text: #ffffff}#notefully[data-theme=quiet-night]{--nf-accent: #c4aa5a;--nf-accent-text: #121416;--nf-accent-hot: #6e3a3a;--nf-btn: #3a4048;--nf-btn-border: #0e1012;--nf-btn-text: #d8dbe0;--nf-panel: #1c1f24;--nf-text: #d8dbe0;--nf-muted: rgba(216, 219, 224, .68);--nf-input: #262a30;--nf-border: rgba(255, 255, 255, .12);--nf-backdrop: rgba(0, 0, 0, .65);--nf-danger: #c88888;--nf-success: #7dcea0;--nf-fail: #e89898;--nf-mark: #c4aa5a;--nf-mark-text: #121416}#notefully *{box-sizing:border-box}#notefully .nf-launcher{position:fixed;left:var(--nf-launcher-left);bottom:var(--nf-launcher-bottom);z-index:var(--nf-z);width:48px;height:48px;padding:0;display:grid;place-items:center;background:var(--nf-btn);color:var(--nf-btn-text);border:1px solid var(--nf-btn-border);border-radius:var(--nf-pill-radius);cursor:pointer;box-shadow:0 8px 24px #00000040}#notefully .nf-launcher-icon{width:22px;height:22px;display:block}#notefully .nf-launcher[hidden],#notefully .nf-dialog[hidden],#notefully .nf-stop-video[hidden],#notefully .nf-stage[hidden],#notefully .nf-palette[hidden],#notefully .nf-reset-crop[hidden],#notefully .nf-restore[hidden],#notefully .nf-discard-shot[hidden],#notefully .nf-recapture[hidden],#notefully .nf-privacy[hidden],#notefully .nf-privacy-summary[hidden],#notefully .nf-privacy-panel[hidden],#notefully .nf-privacy-text[hidden],#notefully .nf-privacy-rows[hidden],#notefully .nf-video[hidden],#notefully .nf-author[hidden]{display:none!important}#notefully .nf-dialog{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--nf-z);background:var(--nf-backdrop);display:flex;align-items:center;justify-content:center;padding:24px}#notefully .nf-panel{position:relative;width:min(920px,100%);max-height:calc(100vh - 48px);overflow:auto;background:var(--nf-panel);color:var(--nf-text);border:1px solid var(--nf-border);border-radius:var(--nf-radius);padding:16px;display:flex;flex-direction:column;gap:12px}#notefully .nf-close-pill{position:absolute;top:10px;inset-inline-end:10px;z-index:2}#notefully .nf-heading{display:flex;flex-direction:column;gap:4px;padding-inline-end:40px;text-align:start}#notefully .nf-title{margin:0;font:700 1.15rem/1.25 var(--nf-font);color:var(--nf-text);text-align:start}#notefully .nf-intro{margin:0;font:13px/1.45 var(--nf-font);color:var(--nf-muted);text-align:start}#notefully .nf-panel-body{display:flex;flex-direction:column;gap:12px;min-height:0}#notefully .nf-panel-body[hidden]{display:none!important}#notefully .nf-success-msg{margin:0;text-align:center;font:700 1.35rem/1.2 var(--nf-font);letter-spacing:.01em;color:var(--nf-success)}#notefully .nf-success-msg[hidden]{display:none!important}#notefully .nf-success-link{display:inline-flex;align-items:center;justify-content:center;gap:.28em;margin:.7rem 0 0;padding:.15rem .1rem;font:500 .78rem/1.2 var(--nf-font);letter-spacing:.01em;color:var(--nf-muted);text-decoration:none;pointer-events:auto;cursor:pointer;opacity:.88}#notefully .nf-success-link .nf-icon{width:.95em;height:.95em;flex:0 0 auto}#notefully .nf-success-link[hidden]{display:none!important}#notefully .nf-success-link:hover,#notefully .nf-success-link:focus-visible{color:var(--nf-text);opacity:1;outline:none}#notefully .nf-success-link:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--nf-accent) 35%,transparent);border-radius:4px}#notefully .nf-dialog.nf-success{pointer-events:none}#notefully .nf-dialog.nf-success.nf-success-sticky{pointer-events:auto}#notefully .nf-dialog.nf-success .nf-panel{width:auto;min-width:11rem;max-width:min(280px,90vw);max-height:none;overflow:hidden;padding:1.75rem 2.35rem;align-items:center;justify-content:center;gap:0}#notefully .nf-dialog.nf-success.nf-success-sticky .nf-panel{max-width:min(320px,92vw);padding:1.5rem 1.75rem 1.45rem;gap:0;pointer-events:auto;align-items:center}@media(prefers-reduced-motion:reduce){#notefully .nf-dialog.nf-success .nf-panel{transform:none!important;transition:none!important}}#notefully .nf-stage{display:flex;flex-direction:column;gap:0}#notefully .nf-shot-block{width:min(100%,calc(48vh * var(--nf-shot-aspect, 16 / 9)));max-width:100%;margin-inline:auto;display:flex;flex-direction:column;border:1px solid var(--nf-border);border-radius:8px;overflow:hidden;background:var(--nf-canvas-bg)}#notefully .nf-palette{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:8px 10px;background:var(--nf-panel);border-top:1px solid var(--nf-border)}#notefully .nf-palette-shot{margin-inline-start:auto}#notefully .nf-tool,#notefully .nf-reset-crop,#notefully .nf-icon-btn{background:var(--nf-input);color:var(--nf-text);border:1px solid var(--nf-border);border-radius:8px;padding:6px 10px;cursor:pointer;font:13px var(--nf-font)}#notefully .nf-icon-btn{width:var(--nf-control-size);height:var(--nf-control-size);padding:0;display:grid;place-items:center;flex:0 0 var(--nf-control-size)}#notefully .nf-icon{width:18px;height:18px;display:block}#notefully .nf-tool[data-active=true],#notefully .nf-icon-btn[data-active=true]{border-color:var(--nf-accent);color:var(--nf-accent);box-shadow:inset 0 0 0 1px var(--nf-accent)}#notefully .nf-canvas{position:relative;width:100%;max-height:48vh;aspect-ratio:var(--nf-shot-aspect, auto);background:var(--nf-canvas-bg);overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none}#notefully .nf-dialog.nf-success:not(.nf-success-sticky) .nf-close-pill{display:none!important}#notefully .nf-canvas[data-draw=true],#notefully .nf-canvas[data-draw=true] .nf-shot{cursor:crosshair}#notefully .nf-sticker{cursor:grab}#notefully .nf-sticker[data-preview=true]{cursor:crosshair}#notefully .nf-sticker.nf-arrow .nf-arrow-hit{cursor:grab}#notefully[data-grabbing=true] .nf-canvas,#notefully[data-grabbing=true] .nf-shot,#notefully[data-grabbing=true] .nf-sticker,#notefully[data-grabbing=true] .nf-sticker *{cursor:grabbing}#notefully .nf-shot{position:absolute;overflow:hidden;--nf-anno-stroke: 3px;--nf-anno-badge: 20px;--nf-anno-badge-font: 11px;--nf-anno-handle: 10px}#notefully .nf-shot img{position:absolute;display:block;max-height:none;pointer-events:none;-webkit-user-drag:none;user-drag:none}#notefully .nf-canvas video.nf-recording-preview{display:block;width:160px;height:auto;max-height:none;object-fit:contain;pointer-events:auto}#notefully .nf-sticker,#notefully .nf-crop{position:absolute;pointer-events:auto;color:var(--nf-mark)}#notefully .nf-sticker[data-selected=true]{z-index:4}#notefully .nf-sticker[data-preview=true],#notefully .nf-sticker.nf-arrow{pointer-events:none}#notefully .nf-sticker.nf-arrow .nf-handle{pointer-events:auto}#notefully .nf-rect,#notefully .nf-circle{border:var(--nf-anno-stroke) solid var(--nf-mark);background:transparent;box-sizing:border-box}#notefully .nf-circle{border-radius:50%}#notefully .nf-arrow-svg{display:block;overflow:visible;pointer-events:none}#notefully .nf-arrow-hit{fill:none;stroke:transparent;stroke-width:16;pointer-events:stroke}#notefully .nf-arrow-shaft{fill:none;stroke:currentColor;stroke-width:var(--nf-anno-stroke);stroke-linecap:round;pointer-events:none}#notefully .nf-arrow-head{fill:currentColor;stroke:none;pointer-events:none}#notefully .nf-badge{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);box-sizing:border-box;min-width:var(--nf-anno-badge);height:var(--nf-anno-badge);padding:0 calc(var(--nf-anno-badge-font) * .35);border-radius:50%;background:var(--nf-mark);color:var(--nf-mark-text);font:700 var(--nf-anno-badge-font)/var(--nf-anno-badge) ui-sans-serif,system-ui,sans-serif;text-align:center;pointer-events:none;z-index:4}#notefully .nf-sticker.nf-arrow .nf-badge{top:50%}#notefully .nf-handle{position:absolute;width:var(--nf-anno-handle);height:var(--nf-anno-handle);background:#fff;border:2px solid var(--nf-mark);border-radius:2px;z-index:5;box-sizing:border-box}#notefully .nf-handle[data-dir=nw]{left:-6px;top:-6px;cursor:nwse-resize}#notefully .nf-handle[data-dir=ne]{right:-6px;top:-6px;cursor:nesw-resize}#notefully .nf-handle[data-dir=sw]{left:-6px;bottom:-6px;cursor:nesw-resize}#notefully .nf-handle[data-dir=se]{right:-6px;bottom:-6px;cursor:nwse-resize}#notefully .nf-handle[data-dir=start],#notefully .nf-handle[data-dir=end]{margin:0;cursor:grab}#notefully .nf-crop{border:2px dashed var(--nf-accent);background:color-mix(in srgb,var(--nf-accent) 14%,transparent);box-shadow:0 0 0 9999px #00000073;pointer-events:none}#notefully .nf-text{width:100%;min-height:96px;resize:vertical;background:var(--nf-input);color:var(--nf-text);border:1px solid var(--nf-border);border-radius:8px;padding:10px;font:14px/1.4 var(--nf-font)}#notefully .nf-author{width:100%;box-sizing:border-box;background:var(--nf-input);color:var(--nf-text);border:1px solid var(--nf-border);border-radius:8px;padding:10px;font:14px/1.4 var(--nf-font)}#notefully .nf-author::placeholder{color:var(--nf-muted)}#notefully .nf-kind-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}#notefully :is(.nf-pill,.nf-kind,.nf-palette-tools,.nf-palette-shot,.nf-actions-media){display:inline-flex;flex-wrap:wrap;gap:0;flex:0 1 auto;min-width:0;align-items:center;padding:0;border:1px solid var(--nf-border);border-radius:var(--nf-pill-radius);background:var(--nf-input);overflow:hidden}#notefully :is(.nf-pill>button,.nf-kind button,.nf-palette-tools .nf-icon-btn,.nf-palette-shot .nf-icon-btn,.nf-actions-media .nf-icon-btn){background:transparent;color:var(--nf-muted);border:0;border-radius:var(--nf-pill-radius);box-shadow:none;cursor:pointer}#notefully :is(.nf-pill>button,.nf-kind button,.nf-palette-tools .nf-icon-btn,.nf-palette-shot .nf-icon-btn,.nf-actions-media .nf-icon-btn):hover:not([data-active=true]):not(:disabled):not(.nf-submit){background:color-mix(in srgb,var(--nf-accent) var(--nf-fill-hover),transparent)}#notefully :is(.nf-pill>button,.nf-kind button,.nf-palette-tools .nf-icon-btn,.nf-palette-shot .nf-icon-btn,.nf-actions-media .nf-icon-btn):active:not([data-active=true]):not(:disabled):not(.nf-submit){background:color-mix(in srgb,var(--nf-accent) var(--nf-fill-press),transparent);color:var(--nf-accent-text)}#notefully :is(.nf-kind button,.nf-submit){padding:6px 12px}#notefully :is(.nf-pill>button,.nf-kind button,.nf-palette-tools .nf-icon-btn,.nf-palette-shot .nf-icon-btn,.nf-actions-media .nf-icon-btn)[data-active=true]{color:var(--nf-accent-text);background:var(--nf-accent);border:0;box-shadow:none}#notefully .nf-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}#notefully .nf-privacy-stack{position:relative;display:flex;flex-direction:column;gap:8px}#notefully .nf-privacy-stack[data-open=true]:before{content:"";position:absolute;z-index:0;inset-inline-end:calc(var(--nf-control-size) / 2);top:calc(var(--nf-control-size) / 2);bottom:12px;width:1px;background:var(--nf-border);pointer-events:none}#notefully .nf-privacy{display:flex;flex-direction:column;gap:8px;position:relative;z-index:1}#notefully .nf-privacy-summary{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;margin-left:auto;flex:0 1 auto;max-width:100%;position:relative;z-index:1}#notefully .nf-privacy-toggle-pill{position:relative;z-index:1}#notefully .nf-privacy-text{color:var(--nf-muted);font:12px/1.35 var(--nf-font);text-align:right}#notefully .nf-privacy-panel{display:flex;flex-direction:column;gap:8px;border:1px solid var(--nf-border);border-radius:8px;background:var(--nf-input);padding:10px;position:relative;z-index:1}#notefully .nf-privacy-scroll{max-height:min(240px,36vh);overflow:auto;display:flex;flex-direction:column;gap:12px}#notefully .nf-privacy-section-head{display:flex;align-items:center;gap:8px;margin-bottom:0;padding-bottom:8px;border-bottom:1px solid var(--nf-border)}#notefully .nf-privacy-section[data-redacted=true] .nf-privacy-section-head{opacity:.62}#notefully .nf-privacy-section[data-redacted=true] .nf-privacy-section-title{color:var(--nf-muted);text-decoration:line-through}#notefully .nf-privacy-section-title{margin:0;font:600 12px var(--nf-font);color:var(--nf-text)}#notefully .nf-privacy-toggle{display:inline-flex;align-items:center;flex:0 0 auto;cursor:pointer;-webkit-user-select:none;user-select:none}#notefully .nf-privacy-check{position:relative;width:var(--nf-check-size);height:var(--nf-check-size);flex:0 0 var(--nf-check-size)}#notefully .nf-privacy-check input{-moz-appearance:none;appearance:none;-webkit-appearance:none;box-sizing:border-box;position:relative;margin:0;width:var(--nf-check-size);height:var(--nf-check-size);border:1px solid var(--nf-border);border-radius:var(--nf-pill-radius);background:transparent;cursor:pointer}#notefully .nf-privacy-check input:hover{background:color-mix(in srgb,var(--nf-accent) var(--nf-fill-hover),transparent)}#notefully .nf-privacy-check input:active{background:color-mix(in srgb,var(--nf-accent) var(--nf-fill-press),transparent)}#notefully .nf-privacy-check input:checked{background:var(--nf-accent);border-color:var(--nf-accent);color:var(--nf-accent-text)}#notefully .nf-privacy-check input:checked:hover{background:color-mix(in srgb,var(--nf-accent) var(--nf-fill-press),transparent);border-color:color-mix(in srgb,var(--nf-accent) var(--nf-fill-press),transparent)}#notefully .nf-privacy-check input:checked:active{background:color-mix(in srgb,var(--nf-accent) var(--nf-fill-hover),transparent);border-color:color-mix(in srgb,var(--nf-accent) var(--nf-fill-hover),transparent)}#notefully .nf-privacy-check input:indeterminate{background:color-mix(in srgb,var(--nf-accent) var(--nf-fill-mid),transparent);border-color:var(--nf-border)}#notefully .nf-privacy-check input:checked:after{content:"";position:absolute;top:50%;left:50%;width:4px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;border-radius:0;background:transparent;transform:translate(-50%,-60%) rotate(45deg)}#notefully .nf-privacy-check input:indeterminate:after{content:"";position:absolute;top:50%;left:50%;width:8px;height:2px;border:0;border-radius:1px;background:var(--nf-accent);transform:translate(-50%,-50%)}#notefully .nf-privacy-rows{display:flex;flex-direction:column;gap:0;margin:0;margin-inline-start:8px;padding-inline-start:0;border-inline-start:1px solid var(--nf-border)}#notefully .nf-privacy-row{display:flex;align-items:flex-start;gap:8px;padding:8px 0 8px 12px;background:transparent;border:0;border-bottom:1px solid var(--nf-border)}#notefully .nf-privacy-row:last-child{border-bottom:0;padding-bottom:0}#notefully .nf-privacy-row[data-redacted=true]{align-items:center;opacity:.55}#notefully .nf-privacy-row[data-redacted=true] .nf-privacy-row-title,#notefully .nf-privacy-row[data-redacted=true] .nf-privacy-row-detail{text-decoration:line-through;color:var(--nf-muted)}#notefully .nf-privacy-row-text{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#notefully .nf-privacy-row:not([data-redacted=true]) .nf-privacy-row-text{white-space:normal;overflow:visible;text-overflow:unset}#notefully .nf-privacy-row-title{font:600 11px/1.35 var(--nf-font);color:var(--nf-text);text-transform:capitalize}#notefully .nf-privacy-row-title:after{content:": ";font-weight:600}#notefully .nf-privacy-row-detail{font:11px/1.35 var(--nf-font-mono);color:var(--nf-muted);word-break:break-word;white-space:pre-wrap}#notefully .nf-privacy-row[data-redacted=true] .nf-privacy-row-detail{white-space:nowrap}#notefully .nf-console-styled{display:inline;vertical-align:baseline;white-space:pre-wrap}#notefully .nf-actions .nf-icon-btn{padding:0}#notefully .nf-submit-pill{margin-inline-start:auto}#notefully .nf-submit{font:600 13px var(--nf-font);background:transparent;color:var(--nf-btn)}#notefully .nf-submit:hover:not(:disabled){background:color-mix(in srgb,var(--nf-btn) var(--nf-fill-hover),transparent);color:var(--nf-btn)}#notefully .nf-submit:active:not(:disabled){background:color-mix(in srgb,var(--nf-btn) var(--nf-fill-press),transparent);color:var(--nf-btn-text)}#notefully .nf-submit:disabled,#notefully .nf-submit[aria-busy=true]{background:var(--nf-btn);color:var(--nf-btn-text);opacity:.55;cursor:wait}#notefully .nf-status{color:var(--nf-muted);font:13px var(--nf-font);min-height:1.2em}#notefully .nf-stop-video{position:fixed;top:16px;left:50%;transform:translate(-50%);z-index:calc(var(--nf-z) + 1);width:var(--nf-control-size);height:var(--nf-control-size);padding:0;border:1px solid var(--nf-border);border-radius:var(--nf-pill-radius);background:var(--nf-accent);color:var(--nf-accent-text);box-shadow:none;cursor:pointer}#notefully[data-nf-hidden-launcher] .nf-launcher{display:none!important}.nf-capture-chrome{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483645;display:grid;place-items:center;pointer-events:none;background:#140c1c47;animation:nf-capture-fade .16s ease-out both}.nf-capture-chrome-pill{display:inline-flex;align-items:center;gap:.55em;padding:.65em 1.1em;border-radius:999px;background:#f7f4fbf0;color:#2a2140;font:650 14px ui-sans-serif,system-ui,sans-serif;letter-spacing:.01em;box-shadow:0 10px 28px #140c1c38}.nf-capture-chrome-pill:before{content:"";width:.7em;height:.7em;border-radius:50%;border:2px solid rgba(42,33,64,.22);border-top-color:#864093;animation:nf-capture-spin .7s linear infinite}@keyframes nf-capture-fade{0%{opacity:0}to{opacity:1}}@keyframes nf-capture-spin{to{transform:rotate(360deg)}}