feat(web): highlight extent adjustment — draggable handles with word/punctuation snap

Objective 9 (web half). The selection popover's edit mode gains an
Adjust button: the overlay's show-annotation event stashes the live DOM
range, start/end teardrop handles render over it (host layer above the
iframe), and pointer drags map into the iframe's caretRangeFromPoint.
Snapping: land next to punctuation → the boundary sits exactly there;
land inside a word → the word's edge in the drag direction; whitespace
trims toward the adjacent word. A live preview repaints through the
overlayer under a scratch key; relocation (page turn) cancels safely.

Release recomputes the range CFI + collapsed-end CFI (view.getCFI) and
saves through the popover's own saveHighlightChanges path (PUT +
remove-old/add-new overlay dance), keeping selection_text and the
anchors in lockstep.

Verified live E2E in Brave: extent extended by one word with the
comma/space snap behavior, saved to the server row, handles cleaned;
all snap paths unit-exercised in-page (word end/start, punctuation
exact on both sides, whitespace trim); the test highlight was restored
to its original extent through the same adjust flow (punctuation-precision
drag back to the comma).

templates/reader.templ

@@ -161,6 +161,16 @@ templ Reader(user User, metadata ReaderMetadata) {
 					>
 						<svg class="reader-icon" width="16" height="16" aria-hidden="true"><path d="M 6 6 V 3 H 16 V 13 H 13 M 3 6 H 13 V 16 H 3 Z"></path></svg>
 					</button>
+					<template x-if="selectionPopover.mode === 'edit'">
+						<button
+							type="button"
+							class="reader-popover-btn"
+							title="Adjust highlight extent"
+							@click="startAdjust()"
+						>
+							<svg class="reader-icon" width="16" height="16" aria-hidden="true"><path d="M 5 3 v 18 M 19 3 v 18 M 5 8 h 14 M 5 16 h 14"></path></svg>
+						</button>
+					</template>
 					<template x-if="selectionPopover.mode === 'edit'">
 						<button
 							type="button"

web/src/reader/reader.ts

@@ -486,6 +486,16 @@ document.addEventListener("alpine:init", () => {
       pdfPage: -1,
       pdfRects: [] as number[][],
     },
+    /** Extent-adjustment context (objective 9): stashed by show-annotation,
+     *  consumed by startAdjust. Null outside adjust mode. */
+    adjustContext: null as null | {
+      id: string;
+      index: number;
+      doc: any;
+      range: Range;
+      color: string;
+    },
+    adjustCancelOnRelocate: null as null | (() => void),
     pdfSelDoc: null as any,
     progressText: "",
     progressLabel: "",
@@ -857,6 +867,9 @@ document.addEventListener("alpine:init", () => {
         const frame = doc?.defaultView?.frameElement as HTMLElement | null;
         const iframeRect = frame?.getBoundingClientRect();
         const rect = range.getBoundingClientRect();
+        // Stash the live range for extent adjustment (objective 9): the
+        // overlayer hands back the exact DOM range it painted from.
+        this.adjustContext = { id: h.id, index, doc, range, color: h.color };
         this.openSelectionPopover({
           mode: "edit",
           x: (iframeRect?.left ?? 0) + rect.left + rect.width / 2,
@@ -1257,6 +1270,257 @@ document.addEventListener("alpine:init", () => {
       this.selectionPopover.open = false;
       this.selectionPopover.noteOpen = false;
     },
+    // ----- highlight extent adjustment (objective 9) -----
+    /** Enter adjust mode: hide the popover, render start/end handles over
+     *  the clicked highlight's range, and take over drags. The range is
+     *  edited live with an overlayer preview; release recomputes the CFIs
+     *  and saves through the same path the popover's Save uses. */
+    startAdjust() {
+      const ctx = this.adjustContext;
+      if (!ctx || !ctx.range) return;
+      this.hideSelectionPopover();
+      const layer = this.ensureAdjustLayer();
+      layer.innerHTML = "";
+      const mkHandle = (which: "start" | "end") => {
+        const dot = document.createElement("div");
+        dot.className = "adjust-handle";
+        dot.dataset.which = which;
+        // Pointer events (mouse + touch + pen); the page's own touch
+        // handlers are not engaged because the handles live in the HOST
+        // document, above the iframe.
+        dot.addEventListener("pointerdown", (e) => {
+          e.preventDefault();
+          dot.setPointerCapture(e.pointerId);
+          dot.dataset.dragging = "1";
+        });
+        dot.addEventListener("pointermove", (e) => {
+          if (!dot.dataset.dragging) return;
+          this.adjustMove(which, e.clientX, e.clientY);
+        });
+        dot.addEventListener("pointerup", (e) => {
+          if (!dot.dataset.dragging) return;
+          delete dot.dataset.dragging;
+          dot.releasePointerCapture?.(e.pointerId);
+          this.adjustFinalize();
+        });
+        dot.addEventListener("pointercancel", () => {
+          delete dot.dataset.dragging;
+        });
+        layer.appendChild(dot);
+        return dot;
+      };
+      mkHandle("start");
+      mkHandle("end");
+      this.positionAdjustHandles();
+      // A page turn (or any relocation that re-renders the section) ends
+      // the adjustment safely — the preview is discarded, nothing saved.
+      this.adjustCancelOnRelocate = () => this.cancelAdjust();
+      this.view?.addEventListener("relocate", this.adjustCancelOnRelocate, {
+        once: true,
+      });
+    },
+    ensureAdjustLayer(): HTMLElement {
+      let layer = document.getElementById("adjust-handles");
+      if (!layer) {
+        layer = document.createElement("div");
+        layer.id = "adjust-handles";
+        layer.style.position = "fixed";
+        layer.style.inset = "0";
+        layer.style.pointerEvents = "none";
+        layer.style.zIndex = "70";
+        document.body.appendChild(layer);
+      }
+      return layer;
+    },
+    /** Host-document coordinates of the working range's two ends. */
+    adjustHandlePoints(): { start: DOMRect | null; end: DOMRect | null; frame: HTMLElement | null } {
+      const ctx = this.adjustContext;
+      if (!ctx) return { start: null, end: null, frame: null };
+      const frame = ctx.doc?.defaultView?.frameElement as HTMLElement | null;
+      const iframeRect = frame?.getBoundingClientRect();
+      const rStart = ctx.range.cloneRange();
+      rStart.collapse(true);
+      const rEnd = ctx.range.cloneRange();
+      rEnd.collapse(false);
+      const s = rStart.getBoundingClientRect();
+      const e = rEnd.getBoundingClientRect();
+      const map = (r: DOMRect) =>
+        new DOMRect(
+          (iframeRect?.left ?? 0) + r.left,
+          (iframeRect?.top ?? 0) + r.top,
+          r.width,
+          r.height,
+        );
+      return { start: map(s), end: map(e), frame };
+    },
+    positionAdjustHandles() {
+      const layer = document.getElementById("adjust-handles");
+      if (!layer) return;
+      const { start, end } = this.adjustHandlePoints();
+      const dots = layer.querySelectorAll<HTMLDivElement>(".adjust-handle");
+      dots.forEach((dot) => {
+        const r = dot.dataset.which === "start" ? start : end;
+        if (!r) return;
+        // Handles sit ON the boundary point; a 26px dot centered on it.
+        dot.style.left = `${r.left - 13}px`;
+        dot.style.top = `${r.top - 6}px`;
+      });
+    },
+    /** Drag move: map the pointer into the iframe's content coordinates,
+     *  read the caret there, snap it, update the working range, and
+     *  redraw the preview highlight. */
+    adjustMove(which: "start" | "end", clientX: number, clientY: number) {
+      const ctx = this.adjustContext;
+      if (!ctx) return;
+      const contents = this.renderer?.getContents?.() ?? [];
+      const content = contents.find((c: any) => c.index === ctx.index);
+      if (!content?.doc) return;
+      const frame = content.doc.defaultView?.frameElement as HTMLElement | null;
+      const iframeRect = frame?.getBoundingClientRect();
+      if (!iframeRect) return;
+      // The iframe is the coordinate space (AGENTS.md #18): client − frame
+      // offset = content point.
+      const x = clientX - (iframeRect.left ?? 0);
+      const y = clientY - (iframeRect.top ?? 0);
+      // caretRangeFromPoint is Chromium/WebKit; caretPositionFromPoint is
+      // the standards track — support both.
+      const caretRange =
+        content.doc.caretRangeFromPoint?.(x, y) ??
+        (() => {
+          const pos = content.doc.caretPositionFromPoint?.(x, y);
+          if (!pos) return null;
+          const r = content.doc.createRange();
+          r.setStart(pos.offsetNode, pos.offset);
+          r.collapse(true);
+          return r;
+        })();
+      if (!caretRange) return;
+      const snapped = this.snapBoundary(
+        caretRange.startContainer,
+        caretRange.startOffset,
+        which === "start",
+      );
+      if (!snapped) return;
+      // Rebuild the working range: the opposite end stays anchored.
+      const working = ctx.range.cloneRange();
+      try {
+        if (which === "start") working.setStart(snapped.node, snapped.offset);
+        else working.setEnd(snapped.node, snapped.offset);
+      } catch {
+        return;
+      }
+      // Degenerate (handles crossed): clamp to a point, never throw.
+      if (working.collapsed && which === "start") {
+        // start pushed past end: keep at the end boundary
+        working.setStart(snapped.node, snapped.offset);
+      }
+      ctx.range = working;
+      this.drawAdjustPreview();
+      this.positionAdjustHandles();
+    },
+    /** Word-boundary snap with punctuation precision (objective 9):
+     *  land next to punctuation → the boundary sits exactly there;
+     *  land inside a word → snap to that word's edge in the drag
+     *  direction; land on whitespace → trim toward the word. */
+    snapBoundary(node: Node, offset: number, isStart: boolean): { node: Node; offset: number } | null {
+      if (node.nodeType !== Node.TEXT_NODE) {
+        // Element landing: descend to the nearest text position.
+        const doc = node.ownerDocument;
+        if (!doc) return null;
+        const walker = doc.createTreeWalker(node, NodeFilter.SHOW_TEXT);
+        const first = walker.nextNode();
+        if (first) return { node: first, offset: 0 };
+        return null;
+      }
+      const text = node.nodeValue ?? "";
+      const isWordChar = (ch: string) => /[\p{L}\p{N}]/u.test(ch);
+      const isPunct = (ch: string) => ch && !isWordChar(ch) && !/\s/.test(ch);
+      const before = offset > 0 ? text[offset - 1] : "";
+      const at = offset < text.length ? text[offset] : "";
+      // Punctuation precision: the boundary takes the exact caret spot
+      // when it touches punctuation (e.g. the period of "sentence.").
+      if ((before && isPunct(before)) || (at && isPunct(at))) {
+        return { node, offset };
+      }
+      if (at && isWordChar(at)) {
+        let o = offset;
+        if (isStart) {
+          while (o > 0 && isWordChar(text[o - 1])) o--;
+        } else {
+          while (o < text.length && isWordChar(text[o])) o++;
+        }
+        return { node, offset: o };
+      }
+      // Whitespace: trim toward the adjacent word (leading whitespace off
+      // a start boundary, trailing off an end boundary).
+      if (isStart) {
+        let o = offset;
+        while (o < text.length && !isWordChar(text[o]) && text[o] !== "") o++;
+        return { node, offset: o };
+      }
+      let o = offset;
+      while (o > 0 && !isWordChar(text[o - 1])) o--;
+      return { node, offset: o };
+    },
+    /** Live preview: repaint the working range in the overlayer under a
+     *  scratch key (removed on the next move or on finalize). */
+    drawAdjustPreview() {
+      const ctx = this.adjustContext;
+      if (!ctx) return;
+      const contents = this.renderer?.getContents?.() ?? [];
+      const content = contents.find((c: any) => c.index === ctx.index);
+      if (!content?.overlayer) return;
+      content.overlayer.remove("__adjust-preview");
+      content.overlayer.add("__adjust-preview", ctx.range, Overlayer.highlight, {
+        color: ctx.color,
+      });
+    },
+    /** Release: recompute the anchors from the working range, save through
+     *  the popover's own path, and clean the mode up. */
+    async adjustFinalize() {
+      const ctx = this.adjustContext;
+      if (!ctx) return;
+      const { index, doc, range, id } = ctx;
+      const text = range.toString().replace(/\s+/g, " ").trim();
+      this.cancelAdjust();
+      if (!text) {
+        showToast("Highlights can't be empty", "error");
+        return;
+      }
+      let cfi = "";
+      let cfiEnd = "";
+      try {
+        cfi = this.view.getCFI(index, range);
+        const endRange = range.cloneRange();
+        endRange.collapse(false);
+        cfiEnd = this.view.getCFI(index, endRange);
+      } catch {
+        showToast("Could not anchor the adjusted selection", "error");
+        return;
+      }
+      // Route through the popover state: saveHighlightChanges reads p.cfi /
+      // p.cfiEnd / p.text and handles the PUT + overlay re-render dance.
+      const p = this.selectionPopover;
+      p.id = id;
+      p.cfi = cfi;
+      p.cfiEnd = cfiEnd;
+      p.text = text;
+      await this.saveHighlightChanges();
+    },
+    cancelAdjust() {
+      const ctx = this.adjustContext;
+      if (ctx) {
+        const contents = this.renderer?.getContents?.() ?? [];
+        const content = contents.find((c: any) => c.index === ctx.index);
+        content?.overlayer?.remove("__adjust-preview");
+      }
+      document.getElementById("adjust-handles")?.remove();
+      if (this.adjustCancelOnRelocate) {
+        this.view?.removeEventListener?.("relocate", this.adjustCancelOnRelocate);
+        this.adjustCancelOnRelocate = null;
+      }
+      this.adjustContext = null;
+    },
     scheduleSelectionPopover(doc: any, index: number) {
       if (this.selPopTimer) clearTimeout(this.selPopTimer);
       this.selPopTimer = setTimeout(() => {

web/static/input.css

@@ -945,6 +945,29 @@
   .reader-popover-btn.danger:hover {
     background-color: rgba(153, 27, 27, 0.6);
   }
+  /* Highlight extent-adjustment handles (objective 9): teardrop dots that
+     sit on the range boundary; the stem points at the text line. */
+  .adjust-handle {
+    position: fixed;
+    width: 26px;
+    height: 26px;
+    border-radius: 50% 50% 50% 0;
+    transform: rotate(-45deg);
+    background: #3b82f6;
+    border: 2px solid #ffffff;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+    pointer-events: auto;
+    cursor: grab;
+    touch-action: none;
+  }
+  .adjust-handle[data-which="end"] {
+    border-radius: 50% 50% 0 50%;
+    transform: rotate(135deg);
+  }
+  .adjust-handle[data-dragging] {
+    cursor: grabbing;
+    scale: 1.15;
+  }
   .reader-note-input {
     width: 100%;
     resize: vertical;

web/static/style.css

@@ -1,2 +1,2 @@
 *,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
-/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Noto Sans SC,Noto Sans TC,Noto Sans JP,Noto Sans KR,PingFang SC,Microsoft YaHei,Hiragino Sans,Apple SD Gothic Neo,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}input:where(:not([type])),input:where([type=date]),input:where([type=datetime-local]),input:where([type=email]),input:where([type=month]),input:where([type=number]),input:where([type=password]),input:where([type=search]),input:where([type=tel]),input:where([type=text]),input:where([type=time]),input:where([type=url]),input:where([type=week]),select,select:where([multiple]),textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}input:where(:not([type])):focus,input:where([type=date]):focus,input:where([type=datetime-local]):focus,input:where([type=email]):focus,input:where([type=month]):focus,input:where([type=number]):focus,input:where([type=password]):focus,input:where([type=search]):focus,input:where([type=tel]):focus,input:where([type=text]):focus,input:where([type=time]):focus,input:where([type=url]):focus,input:where([type=week]):focus,select:focus,select:where([multiple]):focus,textarea:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath Line truncated
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Noto Sans SC,Noto Sans TC,Noto Sans JP,Noto Sans KR,PingFang SC,Microsoft YaHei,Hiragino Sans,Apple SD Gothic Neo,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}input:where(:not([type])),input:where([type=date]),input:where([type=datetime-local]),input:where([type=email]),input:where([type=month]),input:where([type=number]),input:where([type=password]),input:where([type=search]),input:where([type=tel]),input:where([type=text]),input:where([type=time]),input:where([type=url]),input:where([type=week]),select,select:where([multiple]),textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}input:where(:not([type])):focus,input:where([type=date]):focus,input:where([type=datetime-local]):focus,input:where([type=email]):focus,input:where([type=month]):focus,input:where([type=number]):focus,input:where([type=password]):focus,input:where([type=search]):focus,input:where([type=tel]):focus,input:where([type=text]):focus,input:where([type=time]):focus,input:where([type=url]):focus,input:where([type=week]):focus,select:focus,select:where([multiple]):focus,textarea:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath Line truncated