.pn{--pn-e:var(--pinote-easing,cubic-bezier(.2, 0, 0, 1));--pn-t:var(--pinote-duration,var(--pn-d,.14s));--pn-s:var(--pinote-background,var(--pn-bg,#2c2c2c))}[data-pinote-theme=dark]{color-scheme:dark}[data-pinote-theme=light]{color-scheme:light}.pn-layer{position:relative}.pn-t,.pn-c{box-sizing:border-box;color:var(--pinote-foreground,#fff);background:var(--pn-s);border:0;box-shadow:0 3px 8px #0003}.pn-t,.pn-f{place-items:center;display:grid}.pn-t{width:var(--pinote-size,25px);aspect-ratio:1;cursor:pointer;touch-action:manipulation;padding:0;position:relative}.pn-f{background:inherit;border-radius:inherit;position:absolute;inset:0}:is(.pn-t,.pn-c):focus-visible{outline-offset:3px}.pn-t svg{width:16px;height:16px}.pn-v{aspect-ratio:1;object-fit:cover;border-radius:50%;width:21px}.pn-h>span{-webkit-text-decoration:underline dotted var(--pinote-accent,currentColor);text-decoration:underline dotted var(--pinote-accent,currentColor);text-underline-offset:.15em;cursor:pointer}.pn-c{z-index:50;width:max-content;max-width:min(var(--pinote-width,280px), var(--pn-w,calc(100vw - 24px)));max-height:var(--pn-h,calc(100dvh - 24px));border-radius:var(--pinote-radius,var(--radius,12px));overflow-wrap:anywhere;padding:16px;font:.875rem/1.5 system-ui;overflow:auto}@media (pointer:coarse){.pn-t:after{content:"";position:absolute;inset:-10px}}@media (prefers-reduced-motion:no-preference){.pn-b,.pn-t,.pn-c{transition:var(--pn-t) var(--pn-e);transition-property:opacity,scale,transform,clip-path,translate}[data-entrance=pop]{animation:pn-enter var(--pinote-entrance-duration,.24s) var(--pn-e) var(--pinote-entrance-delay,0s) backwards}@keyframes pn-enter{0%{scale:0}}@media (hover:hover) and (pointer:fine){.pn-t:hover{scale:var(--pinote-hover-scale,.96)}.pn-t:hover>.pn-b{translate:var(--pinote-aside-reveal,3px)}}}:is(.pn-t,.pn-r)[data-dragging]{cursor:grabbing}@media (prefers-reduced-motion:reduce){.pn-c[data-leaving]{opacity:0!important}.pn-c{clip-path:none!important;transition:opacity .2s!important}.pn-c,.pn-v,.pn-l{transform:none!important}}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_astro/inter-latin-wght-normal.Dx4kXJAl.woff2)format("woff2")}:root{color-scheme:light;--background:oklch(100% 0 0);--foreground:oklch(0% 0 0);--muted-foreground:oklch(40% 0 0);--popover:light-dark(oklch(100% 0 0),oklch(20.5% 0 0));--popover-foreground:light-dark(oklch(20.5% 0 0),oklch(98.5% 0 0));--border:light-dark(oklch(86% 0 0),oklch(38% 0 0));--radius:.75rem;background:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{margin:0}.demo{--pinote-entrance-delay:.25s;isolation:isolate;place-items:center;min-height:max(28rem,100svh);display:grid}.intro{text-align:center;justify-items:center;gap:1.25rem;padding:2rem 1.5rem;display:grid}.wordmark{letter-spacing:-.055em;white-space:nowrap;margin:0;font-size:clamp(2rem,6vw,4.5rem);font-weight:900;line-height:1.1}.wordmark [data-slot=pinote-highlight-text]{text-underline-offset:.2em;text-decoration-color:oklch(65% 0 0);text-decoration-thickness:2px}.description{max-width:34ch;color:var(--muted-foreground);text-wrap:pretty;margin:0;font-size:1rem;font-weight:400;line-height:1.6}.install-command{background:oklch(98% 0 0);border:1px solid oklch(92% 0 0);border-radius:8px;align-items:center;gap:4px;margin:0;padding:2px 2px 2px 1rem;font-size:.8125rem;line-height:1.5;display:flex;position:relative}.install-command pre{margin:0}.install-command code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.copy-command{width:44px;height:44px;color:var(--muted-foreground);cursor:pointer;background:0 0;border:0;border-radius:5px;place-items:center;padding:0;transition:color .18s ease-out,background-color .18s ease-out;display:grid}.copy-command:hover{color:var(--foreground);background:oklch(0% 0 0/.04)}.copy-command>span{pointer-events:none;opacity:0;grid-area:1/1;transition:opacity .15s ease-out;display:flex}.copy-command svg{width:16px;height:16px}.copy-command[data-copied=false] .copy-clipboard,.copy-command[data-copied=true] .copy-check{opacity:1}.copy-error{color:var(--muted-foreground);font-size:.75rem;line-height:1.5;position:absolute;inset-block-start:calc(100% + 8px);inset-inline:-2rem}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:no-preference){.copy-command>span{filter:blur(4px);transition:opacity .3s cubic-bezier(.2,0,0,1),transform .3s cubic-bezier(.2,0,0,1),filter .3s cubic-bezier(.2,0,0,1);transform:scale(.25)}.copy-command[data-copied=false] .copy-clipboard,.copy-command[data-copied=true] .copy-check{filter:blur();transform:scale(1)}}.demo-footer{justify-content:center;display:flex;position:absolute;inset-block-end:max(1rem, env(safe-area-inset-bottom));inset-inline:0}.demo-footer a{min-height:44px;color:var(--muted-foreground);align-items:center;gap:.5rem;padding-inline:.5rem;font-size:.875rem;text-decoration:none;transition:color .22s ease-out;display:inline-flex}.demo-footer a:hover{color:var(--foreground)}.demo-footer a:focus-visible,.copy-command:focus-visible{outline-offset:3px;border-radius:4px;outline:2px solid}html [data-slot=pinote-content]{font-family:inherit}.photo-pinote[data-slot=pinote-content]{padding:6px}.photo-trigger{color:#45350e;cursor:pointer;background:#f8e5a4;border:0;border-radius:9px;width:25px;height:25px;padding:0;position:relative;box-shadow:0 3px 8px #0003}@media (pointer:coarse){.photo-trigger:after{content:"";position:absolute;inset:-10px}}@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){.photo-trigger{transition:scale .14s cubic-bezier(.2,0,0,1)}.photo-trigger:hover{scale:.96}}.demo-photo{width:248px;max-width:100%;margin:0}.demo-photo img{outline-offset:-1px;border-radius:3px;outline:1px solid oklch(0% 0 0/.1);width:100%;height:auto;display:block}.demo-photo figcaption{padding:10px 6px 6px;font-size:.8125rem}::selection{color:#45350e;background:#f8e5a4}.demo-avatar-stack{height:var(--pinote-size,25px);display:block;position:relative}.demo-trigger-decoration{isolation:isolate;position:absolute;top:0;left:9px}.demo-trigger-face{background:inherit;border-radius:inherit;position:absolute;inset:0}.demo-avatar-stack>img{width:var(--pinote-size,25px);object-fit:cover;outline:1px solid var(--pinote-background,#2c2c2c);border-radius:50%;height:100%;position:absolute;top:0}@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){.demo-avatar-stack>img{transition:translate var(--pinote-duration,.14s)}.demo-trigger-decoration{transition:translate var(--pinote-duration,.14s) var(--pinote-easing,cubic-bezier(.2, 0, 0, 1))}[data-slot=pinote-trigger]:hover .demo-trigger-decoration{translate:3px}[data-slot=pinote-trigger]:hover .demo-avatar-stack>img{translate:var(--demo-avatar-reveal)}}.demo-conversation p{margin:0}.demo-conversation-count{margin-block-start:8px;font-size:.75rem;display:block}.demo-conversation ol{gap:18px;margin:18px 0 0;padding:0;list-style:none;display:grid}.demo-comment-author{align-items:center;gap:8px;margin-block-end:6px;font-weight:600;display:flex}.demo-comment-author img{object-fit:cover;border-radius:50%;width:21px;height:21px}