diff --git a/README.md b/README.md index 40a0855b..4ae94d20 100644 --- a/README.md +++ b/README.md @@ -126,7 +126,7 @@ hairline borders or browser reset quirks) add an explicit allowlist entry in `scripts/check-design-tokens.mjs` so future contributors understand why the constant exists. -The script now crawls every markup-emitting module under `js/blog`, `js/ui`, +The script now crawls every markup-emitting module under `js/ui`, `js/channelProfile.js`, and `torrent/ui`, so UI tweaks anywhere in the repo benefit from the guard without manual configuration. diff --git a/blog.html b/blog.html deleted file mode 100644 index d569d71e..00000000 --- a/blog.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - bitvid Blog - - - - -
- - - - diff --git a/components/sidebar.html b/components/sidebar.html index d3a75c98..0f2e214b 100644 --- a/components/sidebar.html +++ b/components/sidebar.html @@ -168,7 +168,13 @@ /> Roadmap - + *{pointer-events:auto}#editNip71TagsFieldset>legend,#nip71TagsFieldset>legend{margin-left:0;padding:0}#app{background-color:var(--color-page);color:inherit}body.modal-open,html.modal-open{overflow:hidden;height:100%}body.modal-open #app{overflow:hidden}body.modal-open #sidebar{pointer-events:none;opacity:0;visibility:hidden;z-index:var(--z-sidebar-overlay)}.ng-cloak,.ng-hide:not(.ng-hide-animate),.x-ng-cloak,[data-ng-cloak],[ng-cloak],[ng\:cloak],[x-ng-cloak]{display:none!important}ng\:form{display:block}.\!container{width:100%!important}.container{width:100%}@media (min-width:25rem){.\!container{max-width:25rem!important}.container{max-width:25rem}}@media (min-width:30rem){.\!container{max-width:30rem!important}.container{max-width:30rem}}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}#playerModal.ds-header{display:flex}.ds-header{display:flex;align-items:center;justify-content:flex-start;padding-top:var(--space-sm);padding-bottom:var(--space-sm)}.ds-metric-probe{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;contain:layout size style;inline-size:0;block-size:var(--ds-metric-probe-length,0);overflow:hidden}.ds-header__logo{height:var(--space-2xl-plus);width:auto;max-width:none}.focus-ring{outline:2px solid transparent;outline-offset:2px}.focus-ring:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.author-pic{display:block;height:100%;width:100%;border-radius:var(--radius-full);-o-object-fit:cover;object-fit:cover}.header-icon-toggle{outline:2px solid transparent;outline-offset:2px}.header-icon-toggle:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.header-icon-toggle{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1);width:var(--icon-size-lg);height:var(--icon-size-lg);min-width:var(--icon-size-lg);min-height:var(--icon-size-lg);padding:0;border:none;background:transparent;color:var(--color-text-muted);line-height:1}.header-icon-toggle[data-theme-state=light]{color:var(--color-text-strong)}.header-icon-toggle[data-theme-state=dark]{color:var(--color-text)}.header-icon-toggle__icon-wrapper{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--space-lg);block-size:var(--space-lg)}.header-icon-toggle__icon{inline-size:100%;block-size:100%;display:none;fill:currentColor}.header-icon-toggle__icon-wrapper:not([data-theme-icon-state]),.header-icon-toggle__icon-wrapper[data-theme-icon-state=light]{color:inherit}.header-icon-toggle__icon-wrapper:not([data-theme-icon-state]) .header-icon-toggle__icon--dark,.header-icon-toggle__icon-wrapper[data-theme-icon-state=dark] .header-icon-toggle__icon--light,.header-icon-toggle__icon-wrapper[data-theme-icon-state=light] .header-icon-toggle__icon--dark{display:block}.header-icon-toggle[data-theme-state=light]:focus-visible,.header-icon-toggle[data-theme-state=light]:hover{color:var(--color-text)}.header-icon-toggle[data-theme-state=dark]:focus-visible,.header-icon-toggle[data-theme-state=dark]:hover{color:var(--color-text-strong)}.header-icon-toggle[aria-pressed=true]{color:var(--color-text-strong)}.header-icon-toggle[aria-pressed=true]:focus-visible,.header-icon-toggle[aria-pressed=true]:hover{color:var(--color-text-strong)}.bv-logo{--logo-wordmark-color:var(--color-logo-wordmark);--logo-accent-color:var(--color-logo-accent);--logo-background-color:var(--color-logo-background)}.bv-logo[data-variant=inverse]{--logo-wordmark-color:var(--color-logo-wordmark-inverse);--logo-background-color:var(--color-logo-background-inverse)}.bv-logo[data-wordmark=current]{--logo-wordmark-color:currentColor}.bv-logo[data-accent=current]{--logo-accent-color:currentColor}.bv-logo[data-background=transparent]{--logo-background-color:transparent}.bv-logo__wordmark{fill:var(--logo-wordmark-color);color:var(--logo-wordmark-color)}.bv-logo__accent{fill:var(--logo-accent-color);color:var(--logo-accent-color)}.bv-logo__background{fill:var(--logo-background-color);color:var(--logo-background-color)}.markdown-prose{color:var(--color-text)}.markdown-prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:1rem}.markdown-prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.markdown-prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--color-primary);text-decoration:none;font-weight:500}.markdown-prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.markdown-prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.markdown-prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.markdown-prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.markdown-prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.markdown-prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.markdown-prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.markdown-prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.markdown-prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.markdown-prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.markdown-prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.markdown-prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.markdown-prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.markdown-prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.markdown-prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.markdown-prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.markdown-prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.markdown-prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.25em}.markdown-prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--color-border-subtle);border-top-width:1px;margin-top:2rem;margin-bottom:2rem}.markdown-prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--color-muted);border-inline-start-width:.25rem;border-inline-start-color:var(--tw-prose-quote-borders);quotes:"\201C""\201D""\2018""\2019";margin-top:1rem;margin-bottom:1rem;padding-inline-start:1em;border-left-width:4px;border-left-color:var(--color-border-subtle);padding-left:1rem}.markdown-prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.markdown-prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.markdown-prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:var(--font-size-2xl);margin-top:.5rem;margin-bottom:1rem;line-height:1.1111111}.markdown-prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:900;color:inherit}.markdown-prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:var(--font-size-xl);margin-top:1.25rem;margin-bottom:.75rem;line-height:1.3333333}.markdown-prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:800;color:inherit}.markdown-prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:var(--font-size-lg);margin-top:1rem;margin-bottom:.75rem;line-height:1.6}.markdown-prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.markdown-prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.markdown-prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.markdown-prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:1rem;border-radius:var(--radius-md);max-width:100%;height:auto}.markdown-prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){display:block;margin-top:2em;margin-bottom:2em}.markdown-prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.markdown-prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-family:inherit;color:var(--tw-prose-kbd);box-shadow:0 0 0 1px var(--tw-prose-kbd-shadows),0 3px 0 var(--tw-prose-kbd-shadows);font-size:.875em;border-radius:.3125rem;padding-top:.1875em;padding-inline-end:.375em;padding-bottom:.1875em;padding-inline-start:.375em}.markdown-prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--color-secondary);font-weight:500;font-size:var(--font-size-sm);background-color:var(--color-page-alt);padding:.2rem .4rem;border-radius:var(--radius-md);font-family:var(--font-family-mono)}.markdown-prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:none}.markdown-prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.markdown-prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.markdown-prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.markdown-prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.markdown-prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.markdown-prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.markdown-prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.markdown-prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.markdown-prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--color-text-strong);background-color:var(--color-page-alt);overflow-x:auto;font-weight:400;font-size:var(--font-size-sm);line-height:1.7142857;margin-top:0;margin-bottom:1rem;border-radius:var(--radius-md);padding-inline-end:1.1428571em;padding-inline-start:1.1428571em;padding:1rem;font-family:var(--font-family-mono)}.markdown-prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.markdown-prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:none}.markdown-prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.markdown-prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){width:100%;table-layout:auto;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.markdown-prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.markdown-prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.markdown-prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.markdown-prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:0}.markdown-prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline}.markdown-prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.markdown-prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.markdown-prose :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)){text-align:start}.markdown-prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.markdown-prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.markdown-prose{--tw-prose-body:var(--color-text);--tw-prose-headings:var(--color-text-strong);--tw-prose-lead:#4b5563;--tw-prose-links:var(--color-primary);--tw-prose-bold:var(--color-text-strong);--tw-prose-counters:var(--color-text-muted);--tw-prose-bullets:var(--color-text-muted);--tw-prose-hr:var(--color-border-subtle);--tw-prose-quotes:var(--color-muted);--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-kbd:#111827;--tw-prose-kbd-shadows:rgba(17,24,39,.1);--tw-prose-code:var(--color-secondary);--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:var(--color-border-subtle);--tw-prose-td-borders:var(--color-border-subtle);--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-kbd:#fff;--tw-prose-invert-kbd-shadows:hsla(0,0%,100%,.1);--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:rgba(0,0,0,.5);--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:1rem;line-height:1.6}.markdown-prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.markdown-prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5rem;margin-bottom:.5rem}.markdown-prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.markdown-prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.markdown-prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.markdown-prose :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.markdown-prose :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.markdown-prose :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.markdown-prose :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.markdown-prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.markdown-prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.markdown-prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-inline-start:1.625em}.markdown-prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.markdown-prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.markdown-prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.markdown-prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.markdown-prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.markdown-prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.markdown-prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.5714286em;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.markdown-prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.markdown-prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.markdown-prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.markdown-prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.markdown-prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.markdown-prose{font-family:var(--font-family-sans)}.markdown-prose :where(h4,h5,h6):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:600;margin-top:.75rem;margin-bottom:.5rem}.markdown-prose :where(ul,ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:1rem;padding-left:1.25rem}.markdown-prose :where(a:hover):not(:where([class~=not-prose],[class~=not-prose] *)){text-decoration:underline}.markdown-prose{max-width:none;line-height:1.625;color:var(--text-primary);--tw-prose-body:var(--color-text);--tw-prose-headings:var(--color-text-strong);--tw-prose-invert-headings:var(--color-text-strong);--tw-prose-lead:var(--color-text);--tw-prose-links:var(--color-accent-strong);--tw-prose-bold:var(--color-text-strong);--tw-prose-counters:var(--color-text-muted);--tw-prose-bullets:var(--color-text-muted);--tw-prose-hr:var(--color-border-translucent-strong);--tw-prose-quotes:var(--color-text-strong);--tw-prose-quote-borders:var(--color-border-subtle);--tw-prose-captions:var(--color-text-muted);--tw-prose-code:var(--color-text-strong);--tw-prose-pre-code:var(--color-text);--tw-prose-pre-bg:var(--surface-muted);--tw-prose-th-borders:var(--color-border);--tw-prose-td-borders:var(--color-border-subtle)}.markdown-prose :where(h1,h2,h3,h4,h5,h6){color:var(--color-text-strong)}.markdown-prose :where(h1,h2,h3,h4,h5,h6) strong{color:inherit}.markdown-prose a{color:var(--color-accent-strong);text-decoration-color:color-mix(in srgb,var(--color-accent-strong) 65%,transparent);text-decoration-thickness:2px;text-underline-offset:.2em}.markdown-prose a:focus-visible,.markdown-prose a:hover{color:var(--color-accent);text-decoration-line:underline}.markdown-prose blockquote{border-radius:var(--radius-md);border-left-width:4px;border-color:var(--border-subtle);background-color:var(--surface-muted);--tw-bg-opacity:0.5;padding:.5rem 1rem;color:var(--text-muted)}.markdown-prose :where(pre,code){font-family:var(--font-family-mono)}.markdown-prose code{border-radius:var(--radius-md);background-color:var(--surface-muted);padding:.125rem .25rem;color:var(--color-accent-strong)}.markdown-prose pre{overflow-x:auto;border-radius:var(--radius-lg);border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-muted);padding:1rem;color:var(--text-primary)}.markdown-prose pre code{background-color:transparent;color:inherit;padding:0}.\!popover,.popover{position:relative;display:inline-flex}.popover-panel,.popover__panel{outline:2px solid transparent;outline-offset:2px}.popover-panel:focus-visible,.popover__panel:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.popover-panel,.popover__panel{pointer-events:none;z-index:var(--z-overlay-popover);min-width:var(--menu-min-width);max-width:var(--popover-inline-safe-max);--tw-scale-x:.95;--tw-scale-y:.95;border-radius:var(--overlay-panel-radius);border-width:1px;border-color:var(--border-default);--tw-border-opacity:0.4;background-color:var(--surface-overlay-panel);padding:var(--overlay-panel-padding-block) var(--overlay-panel-padding-inline);font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-primary);opacity:0;--tw-shadow:var(--overlay-panel-shadow);--tw-shadow-colored:var(--overlay-panel-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-shadow-color:var(--surface-overlay-panel);--tw-shadow:var(--tw-shadow-colored);transition-property:transform;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.popover-panel,.popover-panel[data-state=open],.popover__panel,.popover__panel[data-state=open]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.popover-panel[data-state=open],.popover__panel[data-state=open]{pointer-events:auto;--tw-scale-x:1;--tw-scale-y:1;opacity:1}.popover-panel[data-state=closed],.popover__panel[data-state=closed]{pointer-events:none;--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0}.ds-overlay-backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--overlay-backdrop-color);backdrop-filter:blur(var(--overlay-backdrop-blur));-webkit-backdrop-filter:blur(var(--overlay-backdrop-blur))}.popover-panel[data-variant=zap],.popover__panel[data-variant=zap]{background:var(--color-overlay-veil);color:var(--color-subtle);border:var(--border-width-hairline) solid var(--color-border-translucent-stronger);box-shadow:var(--shadow-popover-zap);backdrop-filter:blur(var(--popover-backdrop-blur));-webkit-backdrop-filter:blur(var(--popover-backdrop-blur))}.btn{outline:2px solid transparent;outline-offset:2px}.btn:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-full);border-width:1px;border-color:transparent;background-color:var(--color-accent-strong);padding:.625rem 1.25rem;font-size:var(--font-size-base);line-height:var(--line-height-base);font-weight:600;color:var(--color-white);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.btn:hover{background-color:var(--color-accent)}.btn:focus-visible{background-color:var(--color-accent-pressed)}.btn:disabled{pointer-events:none;cursor:not-allowed;opacity:.6;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.progress,[data-progress-meter]{--progress-height:var(--progress-height-md);--progress-track:var(--progress-track-color);--progress-fill:var(--progress-fill-color);--progress-radius-current:var(--progress-radius);display:block;width:100%;height:var(--progress-height);border:none;border-radius:var(--progress-radius-current);overflow:hidden;background-color:var(--progress-track);-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress::-webkit-progress-bar,[data-progress-meter]::-webkit-progress-bar{background-color:var(--progress-track);border-radius:var(--progress-radius-current)}.progress::-webkit-progress-value,[data-progress-meter]::-webkit-progress-value{background-color:var(--progress-fill);border-radius:var(--progress-radius-current);-webkit-transition:width var(--progress-transition-duration) var(--progress-transition-ease);transition:width var(--progress-transition-duration) var(--progress-transition-ease)}.progress::-moz-progress-bar,[data-progress-meter]::-moz-progress-bar{background-color:var(--progress-fill);border-radius:var(--progress-radius-current);-moz-transition:width var(--progress-transition-duration) var(--progress-transition-ease);transition:width var(--progress-transition-duration) var(--progress-transition-ease)}.progress.progress--surface,.progress[data-variant=surface],[data-progress-meter].progress--surface,[data-progress-meter][data-variant=surface]{--progress-track:var(--color-panel)}.progress.progress--accent,.progress[data-variant=accent],[data-progress-meter].progress--accent,[data-progress-meter][data-variant=accent]{--progress-fill:var(--color-info-strong)}.progress.progress--blog,.progress[data-variant=blog],[data-progress-meter].progress--blog,[data-progress-meter][data-variant=blog]{--progress-height:var(--blog-carousel-progress-height);--progress-track:var(--blog-carousel-progress-track);--progress-fill:var(--blog-carousel-progress-active);--progress-radius-current:var(--blog-carousel-progress-radius)}.btn-ghost{outline:2px solid transparent;outline-offset:2px}.btn-ghost:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-full);border-color:transparent;background-color:var(--color-accent-strong);padding:.625rem 1.25rem;font-size:var(--font-size-base);line-height:var(--line-height-base);font-weight:600;color:var(--color-white);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.btn-ghost:hover{background-color:var(--color-accent)}.btn-ghost:focus-visible{background-color:var(--color-accent-pressed)}.btn-ghost:disabled{cursor:not-allowed;opacity:.6}body.iframe-form button.btn-ghost{align-self:flex-start;margin-top:var(--space-md)}.btn-ghost{border-width:1px;border-color:var(--border-default);--tw-border-opacity:0.6;background-color:transparent;color:var(--text-primary);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media (prefers-reduced-motion:reduce){.btn-ghost{transition-property:none}}.btn-ghost:hover{background-color:var(--surface-panel-hover);color:var(--text-primary)}.btn-ghost:focus-visible{background-color:var(--surface-panel-hover)}.btn-ghost:disabled{pointer-events:none;opacity:.5;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.btn-ghost[data-variant=critical]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.6;color:var(--color-critical)}.btn-ghost[data-variant=critical]:focus-visible,.btn-ghost[data-variant=critical]:hover{background-color:var(--color-critical);--tw-bg-opacity:0.2;color:var(--color-critical-strong)}.btn-ghost[aria-pressed=true],.btn-ghost[data-state=active]{border-color:transparent;background-color:var(--color-primary);color:var(--color-white);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.btn-ghost[aria-pressed=true]:focus-visible,.btn-ghost[aria-pressed=true]:hover,.btn-ghost[data-state=active]:focus-visible,.btn-ghost[data-state=active]:hover{background-color:var(--color-accent-strong)}.blog-carousel{position:relative;display:grid;gap:var(--blog-carousel-gap);--blog-carousel-index:0;--blog-carousel-track-duration:var(--motion-duration-slow,320ms);--blog-carousel-track-ease:var(--motion-ease-out,ease-out);--blog-carousel-slide-duration:var(--motion-duration-base,160ms);--blog-carousel-progress-duration:var(--motion-duration-slow,320ms);--blog-carousel-per-page:1}.blog-carousel[data-transition=instant]{--blog-carousel-track-duration:0s;--blog-carousel-slide-duration:0s}.blog-carousel__viewport{position:relative;overflow:hidden;border-radius:var(--blog-carousel-slide-radius)}.blog-carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,calc(100%/var(--blog-carousel-per-page)));gap:var(--blog-carousel-gap);width:100%;margin:0;padding:0;list-style:none;transform:translate3d(calc(var(--blog-carousel-index)*-100%),0,0);transition:transform var(--blog-carousel-track-duration) var(--blog-carousel-track-ease);will-change:transform}.blog-carousel__track[data-transition=instant]{--blog-carousel-track-duration:0s}.blog-carousel[data-index="0"]{--blog-carousel-index:0}.blog-carousel[data-index="1"]{--blog-carousel-index:1}.blog-carousel[data-index="2"]{--blog-carousel-index:2}.blog-carousel[data-index="3"]{--blog-carousel-index:3}.blog-carousel[data-index="4"]{--blog-carousel-index:4}.blog-carousel[data-index="5"]{--blog-carousel-index:5}.blog-carousel[data-index="6"]{--blog-carousel-index:6}.blog-carousel[data-index="7"]{--blog-carousel-index:7}.blog-carousel[data-index="8"]{--blog-carousel-index:8}.blog-carousel__slide{position:relative;display:grid;align-content:stretch;min-height:var(--blog-carousel-slide-min-height);border-radius:var(--blog-carousel-slide-radius);background:var(--blog-carousel-slide-background);color:var(--blog-carousel-slide-foreground);overflow:hidden;box-shadow:var(--shadow-md);opacity:.55;transform:scale(var(--blog-carousel-slide-scale-inactive));transition:opacity var(--blog-carousel-slide-duration) var(--motion-ease-in-out,ease-in-out),transform var(--blog-carousel-slide-duration) var(--blog-carousel-track-ease),box-shadow var(--blog-carousel-slide-duration) var(--blog-carousel-track-ease)}.blog-carousel__slide[data-active=true]{opacity:1;transform:scale(1);box-shadow:var(--shadow-lg);z-index:1}.blog-carousel__slide[data-state=leaving]{opacity:.25}.blog-carousel__slide[data-inert=true]{pointer-events:none}.blog-carousel[data-per-page="1"]{--blog-carousel-per-page:1}.blog-carousel[data-per-page="2"]{--blog-carousel-per-page:2}.blog-carousel[data-per-page="3"]{--blog-carousel-per-page:3}.blog-carousel[data-per-page="4"]{--blog-carousel-per-page:4}.blog-progress{position:relative;display:flex;align-items:center;width:100%}.blog-progress [data-progress-meter]{flex:1 1 auto}@media (prefers-reduced-motion:reduce){.blog-carousel{--blog-carousel-track-duration:0s;--blog-carousel-slide-duration:0s;--blog-carousel-progress-duration:0s}.blog-carousel__slide,.blog-carousel__track{transition-duration:0s}}.blog-ztr-watermark{float:right;opacity:.2}.\!badge,.badge{display:inline-flex;align-items:center;gap:.25rem;border-radius:var(--radius-full);border-width:1px;border-color:var(--status-neutral-border);background-color:var(--status-neutral-surface);padding:.25rem .75rem;font-size:var(--font-size-2xs);line-height:var(--line-height-tight);font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-extra-wide);color:var(--status-neutral-on)}.\!badge[data-variant=info],.badge[data-variant=info]{border-color:var(--status-info-border);background-color:var(--status-info-surface);color:var(--status-info-on)}.\!badge[data-variant=success],.badge[data-variant=success]{border-color:var(--status-success-border);background-color:var(--status-success-surface);color:var(--status-success-on)}.\!badge[data-variant=warning],.badge[data-variant=warning]{border-color:var(--status-warning-border);background-color:var(--status-warning-surface);color:var(--status-warning-on)}.\!badge[data-variant=critical],.badge[data-variant=critical]{border-color:var(--status-danger-border);background-color:var(--status-danger-surface);color:var(--status-danger-on)}.\!badge[data-variant=private],.badge[data-variant=private]{border-color:var(--status-private-border);background-color:var(--status-private-surface);color:var(--status-private-on)}.\!badge[data-variant=neutral],.badge[data-variant=neutral]{border-color:var(--status-neutral-border);background-color:var(--status-neutral-surface);color:var(--status-neutral-on)}.pill{display:inline-flex;align-items:center;gap:.5rem;border-radius:var(--radius-full);border-width:1px;border-color:var(--status-neutral-border);background-color:var(--status-neutral-surface);padding:.25rem .75rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);font-weight:500;color:var(--status-neutral-on)}.pill[data-size=compact]{padding:.125rem .5rem;font-size:var(--font-size-2xs);line-height:var(--line-height-tight)}.pill[data-variant=info]{border-color:var(--status-info-border);background-color:var(--status-info-surface);color:var(--status-info-on)}.pill[data-variant=success]{border-color:var(--status-success-border);background-color:var(--status-success-surface);color:var(--status-success-on)}.pill[data-variant=warning]{border-color:var(--status-warning-border);background-color:var(--status-warning-surface);color:var(--status-warning-on)}.pill[data-variant=critical]{border-color:var(--status-danger-border);background-color:var(--status-danger-surface);color:var(--status-danger-on)}.pill[data-variant=private]{border-color:var(--status-private-border);background-color:var(--status-private-surface);color:var(--status-private-on)}.pill[data-variant=neutral]{border-color:var(--status-neutral-border);background-color:var(--status-neutral-surface);color:var(--status-neutral-on)}#playerModal.\!menu{display:flex}.\!menu{display:flex;flex-direction:column;gap:.25rem;padding-top:.5rem;padding-bottom:.5rem}#playerModal.menu,.menu{display:flex}.menu{flex-direction:column;gap:.25rem;padding-top:.5rem;padding-bottom:.5rem}.menu__heading{padding-left:1rem;padding-right:1rem;padding-bottom:.5rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);font-weight:600;text-transform:uppercase;letter-spacing:.025em;color:var(--text-muted)}.menu__separator{margin-top:.5rem;margin-bottom:.5rem;height:1px;background-color:var(--border-default);--tw-bg-opacity:0.2}.menu__item{outline:2px solid transparent;outline-offset:2px}.menu__item:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}#playerModal.menu__item{display:flex}.menu__item{position:relative;display:flex;width:100%;align-items:center;gap:.75rem;border-radius:var(--radius-md);padding:.5rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:500;color:var(--text-primary);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:var(--motion-ease-in-out)}.menu__item:hover{background-color:var(--surface-panel-hover);color:var(--text-primary)}.menu__item[data-state=active]{background-color:var(--color-accent);--tw-bg-opacity:0.2;color:var(--color-accent-strong)}.menu__item[data-variant=critical]{color:var(--color-critical-strong)}.menu__item[data-variant=critical]:hover{background-color:var(--color-critical);--tw-bg-opacity:0.2}.menu__item:disabled,.menu__item[aria-disabled=true]{cursor:not-allowed;opacity:.6}.menu__item:disabled,.menu__item:disabled:hover,.menu__item[aria-disabled=true],.menu__item[aria-disabled=true]:hover{background-color:transparent;color:var(--text-muted)}.\!card{--video-card-lift-translate-y:0!important;--video-card-backdrop-opacity:0!important;--video-card-backdrop-translate-y:1.25rem!important;--video-card-backdrop-scale:1.08!important;--video-card-backdrop-blur:var(--blur-thumbnail-blur)!important}.card{--video-card-lift-translate-y:0;--video-card-backdrop-opacity:0;--video-card-backdrop-translate-y:1.25rem;--video-card-backdrop-scale:1.08;--video-card-backdrop-blur:var(--blur-thumbnail-blur)}.\!card{outline:2px solid transparent;outline-offset:2px}.\!card:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.\!card{position:relative;border-radius:var(--radius-lg);border-width:1px;border-color:transparent;background-color:var(--surface-raised);color:var(--text-primary);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.card{outline:2px solid transparent;outline-offset:2px}.card:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.card{position:relative;border-radius:var(--radius-lg);border-width:1px;border-color:transparent;background-color:var(--surface-raised);color:var(--text-primary);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.\!card{transform:translate3d(0,var(--video-card-lift-translate-y),0)!important;transition-property:transform,box-shadow,border-color,background-color,color!important;will-change:transform!important;isolation:isolate!important}.card{transform:translate3d(0,var(--video-card-lift-translate-y),0);transition-property:transform,box-shadow,border-color,background-color,color;will-change:transform;isolation:isolate}.\!card:before{content:""!important;position:absolute!important;inset:0!important;z-index:0!important;opacity:var(--video-card-backdrop-opacity)!important;background-image:var(--video-card-thumb-url,none)!important;background-position:50%!important;background-repeat:no-repeat!important;background-size:cover!important;transform:translate3d(0,var(--video-card-backdrop-translate-y),0) scale(var(--video-card-backdrop-scale))!important;filter:blur(var(--video-card-backdrop-blur))!important;transition:opacity var(--motion-duration-base) var(--motion-ease-in-out),transform var(--motion-duration-base) var(--motion-ease-in-out),filter var(--motion-duration-base) var(--motion-ease-in-out)!important;pointer-events:none!important;will-change:opacity,transform,filter!important}.card:before{content:"";position:absolute;inset:0;z-index:0;opacity:var(--video-card-backdrop-opacity);background-image:var(--video-card-thumb-url,none);background-position:50%;background-repeat:no-repeat;background-size:cover;transform:translate3d(0,var(--video-card-backdrop-translate-y),0) scale(var(--video-card-backdrop-scale));filter:blur(var(--video-card-backdrop-blur));transition:opacity var(--motion-duration-base) var(--motion-ease-in-out),transform var(--motion-duration-base) var(--motion-ease-in-out),filter var(--motion-duration-base) var(--motion-ease-in-out);pointer-events:none;will-change:opacity,transform,filter}.\!card>*{position:relative!important;z-index:1!important}.card>*{position:relative;z-index:1}.card:focus-within,.card:hover{--video-card-lift-translate-y:-0.35rem;--video-card-backdrop-opacity:0.425;--video-card-backdrop-translate-y:0.15rem;--video-card-backdrop-scale:1.12;--video-card-backdrop-blur:24px}.\!card:focus-within,.\!card:hover{--video-card-lift-translate-y:-0.35rem!important;--video-card-backdrop-opacity:0.425!important;--video-card-backdrop-translate-y:0.15rem!important;--video-card-backdrop-scale:1.12!important;--video-card-backdrop-blur:24px!important;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.card:focus-within,.card:hover{--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!card:focus-within,.\!card:hover{--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!card:focus-visible{border-color:var(--color-accent);--tw-border-opacity:0.4;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.card:focus-visible{border-color:var(--color-accent);--tw-border-opacity:0.4;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!card[data-state=critical],.card[data-state=critical]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--surface-raised-critical)}.\!card[data-state=private],.card[data-state=private]{background-color:var(--surface-raised-private);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!card[data-state=disabled],.card[data-state=disabled]{opacity:.6;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.form-control{outline:2px solid transparent;outline-offset:2px}.form-control:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.form-control{display:block;width:100%;border-radius:var(--radius-md);border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-alt);padding:.5rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-primary);--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.form-control::-moz-placeholder{color:var(--text-muted)}.form-control::placeholder{color:var(--text-muted)}.form-control:hover{border-color:var(--border-default)}.form-control:focus-visible{border-color:var(--color-accent-strong)}.form-control:disabled{cursor:not-allowed;background-color:var(--surface-base);color:var(--text-muted);opacity:.6}.form-control:invalid{border-color:var(--color-critical);--tw-border-opacity:0.6}.\!input[data-state=locked],.form-control[data-state=locked],.input[data-state=locked],.select[data-state=locked],.textarea[data-state=locked],select.form-control[data-state=locked],textarea.form-control[data-state=locked]{cursor:default;border-color:var(--border-sidebar-strong);background-color:var(--surface-overlay-panel-soft);color:var(--text-muted)}.form-control[data-state=locked]:focus-visible,.input[data-state=locked]:focus-visible,.select[data-state=locked]:focus-visible,.textarea[data-state=locked]:focus-visible,select.form-control[data-state=locked]:focus-visible,textarea.form-control[data-state=locked]:focus-visible{border-color:var(--border-sidebar-strong);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px;--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(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-offset-width:0px}.\!input[data-state=locked]:focus-visible{border-color:var(--border-sidebar-strong);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px;--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(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-offset-width:0px}.\!input[data-state=locked]:disabled,.form-control[data-state=locked]:disabled,.input[data-state=locked]:disabled,.select[data-state=locked]:disabled,.textarea[data-state=locked]:disabled,select.form-control[data-state=locked]:disabled,textarea.form-control[data-state=locked]:disabled{cursor:default;opacity:1}.\!input{outline:2px solid transparent;outline-offset:2px}.\!input:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.\!input{display:block;width:100%;border-radius:var(--radius-md);border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-alt);padding:.5rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-primary);--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.\!input::-moz-placeholder{color:var(--text-muted)}.\!input::placeholder{color:var(--text-muted)}.\!input:hover{border-color:var(--border-default)}.\!input:focus-visible{border-color:var(--color-accent-strong)}.\!input:disabled{cursor:not-allowed;background-color:var(--surface-base);color:var(--text-muted);opacity:.6}.\!input:invalid{border-color:var(--color-critical);--tw-border-opacity:0.6}.\!input[data-state=locked],select.\!input[data-state=locked],textarea.\!input[data-state=locked]{cursor:default;border-color:var(--border-sidebar-strong);background-color:var(--surface-overlay-panel-soft);color:var(--text-muted)}.\!input[data-state=locked]:focus-visible,select.\!input[data-state=locked]:focus-visible,textarea.\!input[data-state=locked]:focus-visible{border-color:var(--border-sidebar-strong);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px;--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(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-offset-width:0px}.\!input[data-state=locked]:disabled,select.\!input[data-state=locked]:disabled,textarea.\!input[data-state=locked]:disabled{cursor:default;opacity:1}@media (prefers-reduced-motion:reduce){.\!input{transition:none}}body.iframe-form label+.\!input{margin-top:var(--space-xs)}.input{outline:2px solid transparent;outline-offset:2px}.input:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.input{display:block;width:100%;border-radius:var(--radius-md);border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-alt);padding:.5rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-primary);--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.input::-moz-placeholder{color:var(--text-muted)}.input::placeholder{color:var(--text-muted)}.input:hover{border-color:var(--border-default)}.input:focus-visible{border-color:var(--color-accent-strong)}.input:disabled{cursor:not-allowed;background-color:var(--surface-base);color:var(--text-muted);opacity:.6}.input:invalid{border-color:var(--color-critical);--tw-border-opacity:0.6}.input[data-state=locked],select.input[data-state=locked],textarea.input[data-state=locked]{cursor:default;border-color:var(--border-sidebar-strong);background-color:var(--surface-overlay-panel-soft);color:var(--text-muted)}.input[data-state=locked]:focus-visible,select.input[data-state=locked]:focus-visible,textarea.input[data-state=locked]:focus-visible{border-color:var(--border-sidebar-strong);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px;--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(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-offset-width:0px}.input[data-state=locked]:disabled,select.input[data-state=locked]:disabled,textarea.input[data-state=locked]:disabled{cursor:default;opacity:1}@media (prefers-reduced-motion:reduce){.input{transition:none}}body.iframe-form label+.input{margin-top:var(--space-xs)}.textarea{outline:2px solid transparent;outline-offset:2px}.textarea:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.textarea{display:block;width:100%;border-radius:var(--radius-md);border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-alt);padding:.5rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-primary);--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.textarea::-moz-placeholder{color:var(--text-muted)}.textarea::placeholder{color:var(--text-muted)}.textarea:hover{border-color:var(--border-default)}.textarea:focus-visible{border-color:var(--color-accent-strong)}.textarea:disabled{cursor:not-allowed;background-color:var(--surface-base);color:var(--text-muted);opacity:.6}.textarea:invalid{border-color:var(--color-critical);--tw-border-opacity:0.6}.textarea[data-state=locked],select.textarea[data-state=locked],textarea.textarea[data-state=locked]{cursor:default;border-color:var(--border-sidebar-strong);background-color:var(--surface-overlay-panel-soft);color:var(--text-muted)}.textarea[data-state=locked]:focus-visible,select.textarea[data-state=locked]:focus-visible,textarea.textarea[data-state=locked]:focus-visible{border-color:var(--border-sidebar-strong);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px;--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(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-offset-width:0px}.textarea[data-state=locked]:disabled,select.textarea[data-state=locked]:disabled,textarea.textarea[data-state=locked]:disabled{cursor:default;opacity:1}@media (prefers-reduced-motion:reduce){.textarea{transition:none}}body.iframe-form label+.textarea{margin-top:var(--space-xs)}.textarea{min-height:var(--form-textarea-min-height);resize:vertical}.select{outline:2px solid transparent;outline-offset:2px}.select:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.select{display:block;width:100%;border-radius:var(--radius-md);border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-alt);padding:.5rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-primary);--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.select::-moz-placeholder{color:var(--text-muted)}.select::placeholder{color:var(--text-muted)}.select:hover{border-color:var(--border-default)}.select:focus-visible{border-color:var(--color-accent-strong)}.select:disabled{cursor:not-allowed;background-color:var(--surface-base);color:var(--text-muted);opacity:.6}.select:invalid{border-color:var(--color-critical);--tw-border-opacity:0.6}.select[data-state=locked],select.select[data-state=locked],textarea.select[data-state=locked]{cursor:default;border-color:var(--border-sidebar-strong);background-color:var(--surface-overlay-panel-soft);color:var(--text-muted)}.select[data-state=locked]:focus-visible,select.select[data-state=locked]:focus-visible,textarea.select[data-state=locked]:focus-visible{border-color:var(--border-sidebar-strong);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px;--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(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-offset-width:0px}.select[data-state=locked]:disabled,select.select[data-state=locked]:disabled,textarea.select[data-state=locked]:disabled{cursor:default;opacity:1}@media (prefers-reduced-motion:reduce){.select{transition:none}}body.iframe-form label+.select{margin-top:var(--space-xs)}.select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:2.5rem;background-image:linear-gradient(135deg,transparent 50%,var(--select-arrow-color) 50%),linear-gradient(45deg,var(--select-arrow-color) 50%,transparent 50%),linear-gradient(to right,var(--color-border-subtle),var(--color-border-subtle));background-position:right var(--form-select-icon-offset) center,right var(--form-select-icon-gap) center,right var(--form-select-icon-hit-area) center;background-size:var(--form-select-icon-size) var(--form-select-icon-size),var(--form-select-icon-size) var(--form-select-icon-size),var(--form-select-divider-width) 60%;background-repeat:no-repeat}.select,.select:hover{--select-arrow-color:var(--color-border)}.select:focus-visible{--select-arrow-color:var(--color-accent-strong)}.select:disabled{--select-arrow-color:var(--color-border-subtle)}.select:invalid{--select-arrow-color:var(--color-critical)}.\!checkbox{outline:2px solid transparent;outline-offset:2px}.\!checkbox:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.\!checkbox{display:inline-flex;height:1.25rem;width:1.25rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-items:center;justify-content:center;border-radius:.25rem;border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-alt);color:var(--color-white);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.checkbox{outline:2px solid transparent;outline-offset:2px}.checkbox:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.checkbox{display:inline-flex;height:1.25rem;width:1.25rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-items:center;justify-content:center;border-radius:.25rem;border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-alt);color:var(--color-white);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.\!checkbox:hover,.checkbox:hover{border-color:var(--border-default)}.\!checkbox:disabled,.checkbox:disabled{cursor:not-allowed;border-color:var(--border-subtle);background-color:var(--surface-base);color:var(--text-muted);opacity:.6}.\!checkbox:after{content:""!important}.checkbox:after{content:""}.\!checkbox:after,.checkbox:after{pointer-events:none;height:.5rem;width:.75rem;border-bottom-width:2px;border-right-width:2px;border-color:var(--color-white);opacity:0;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.\!checkbox:after{transform:rotate(45deg) translateY(var(--form-checkbox-checkmark-offset)) scale(.85)!important}.checkbox:after{transform:rotate(45deg) translateY(var(--form-checkbox-checkmark-offset)) scale(.85)}.\!checkbox:checked,.\!checkbox[aria-checked=true],.checkbox:checked,.checkbox[aria-checked=true]{border-color:var(--color-accent-strong);background-color:var(--color-accent-strong)}.\!checkbox:checked:after,.\!checkbox[aria-checked=true]:after,.checkbox:checked:after,.checkbox[aria-checked=true]:after{opacity:1}.checkbox:checked:after,.checkbox[aria-checked=true]:after{transform:rotate(45deg) translateY(var(--form-checkbox-checkmark-offset)) scale(1)}.\!checkbox:checked:after,.\!checkbox[aria-checked=true]:after{transform:rotate(45deg) translateY(var(--form-checkbox-checkmark-offset)) scale(1)!important}.switch{outline:2px solid transparent;outline-offset:2px}.switch:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.switch{position:relative;display:inline-flex;height:1.5rem;width:2.75rem;cursor:pointer;align-items:center;border-radius:var(--radius-full);border-width:1px;border-color:var(--border-subtle);background-color:var(--border-subtle);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.switch,.switch:before{transition-duration:.15s;transition-duration:var(--motion-duration-base)}.switch:before{content:"";pointer-events:none;position:absolute;left:.125rem;top:50%;height:1.25rem;width:1.25rem;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:var(--radius-full);background-color:var(--surface-base);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.switch:disabled{cursor:not-allowed;border-color:var(--border-subtle);background-color:var(--surface-base);color:var(--text-muted);opacity:.6}.switch.is-on,.switch[aria-checked=true]{border-color:var(--color-accent-strong);background-color:var(--color-accent-strong)}.switch.is-on:before,.switch[aria-checked=true]:before{--tw-translate-x:1.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (prefers-reduced-motion:reduce){.\!checkbox,.\!checkbox:after,.checkbox,.checkbox:after,.form-control,.menu__item,.popover-panel,.popover__panel,.switch,.switch:before{transition:none!important}}#playerModal.bv-modal{display:flex}.bv-modal{position:fixed;inset:0;z-index:var(--z-modal-root);display:flex;align-items:center;justify-content:center;padding:1.5rem}@media (min-width:640px){.bv-modal{padding:2rem}}.bv-modal.hidden,.bv-modal[hidden]{display:none!important}.bv-modal__panel{outline:2px solid transparent;outline-offset:2px}.bv-modal__panel:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.bv-modal__panel{position:relative;z-index:var(--z-modal-content);width:100%;max-width:var(--modal-max-width);border-radius:var(--radius-modal-xl);border-width:1px;border-color:var(--border-overlay);padding:1.75rem 2rem 2rem;text-align:left;color:var(--text-primary);--tw-shadow:var(--shadow-modal);--tw-shadow-colored:var(--shadow-modal);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1);background-color:var(--color-modal-surface,var(--color-overlay-panel))}.bv-modal__panel:focus-visible{border-color:var(--color-border-translucent-bright)}.bv-modal-backdrop{position:fixed;inset:0;z-index:var(--z-modal-overlay);--tw-backdrop-saturate:saturate(1.5);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);background-color:var(--color-modal-backdrop,var(--color-overlay-muted));backdrop-filter:blur(var(--blur-modal-backdrop));-webkit-backdrop-filter:blur(var(--blur-modal-backdrop))}.bv-modal-backdrop[data-variant=veil]{--tw-backdrop-blur:blur(64px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);background-color:var(--color-overlay-veil)}.bv-modal-backdrop[data-variant=muted]{background-color:var(--color-overlay-muted)}.modal-sheet{outline:2px solid transparent;outline-offset:2px}.modal-sheet:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.modal-sheet{z-index:var(--z-modal-content);max-width:var(--modal-max-width);border-radius:var(--radius-modal-xl);border-width:1px;border-color:var(--border-overlay);padding:1.75rem 2rem 2rem;text-align:left;color:var(--text-primary);--tw-shadow:var(--shadow-modal);--tw-shadow-colored:var(--shadow-modal);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1);background-color:var(--color-modal-surface,var(--color-overlay-panel))}.modal-sheet:focus-visible{border-color:var(--color-border-translucent-bright)}@media (max-width:calc(1024px - 0.02px)){.modal-sheet{inline-size:100vw;block-size:100vh;max-width:none;max-height:none;margin:0;border-radius:0;border:0;padding:calc(var(--space-lg) + env(safe-area-inset-top)) calc(var(--space-lg) + env(safe-area-inset-right)) calc(var(--space-lg) + env(safe-area-inset-bottom)) calc(var(--space-lg) + env(safe-area-inset-left));overflow:auto}}#playerModal>.modal-sheet{max-width:none;width:100%;height:100%;padding:0;border-radius:0;box-shadow:none;border:none;background:transparent;display:flex;align-items:stretch}#modalContainer>[id$=Modal]:not(#playerModal) .modal-sheet{z-index:var(--z-modal-content)}.modal-sheet{position:relative;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;max-width:var(--modal-sheet-inline-max);overscroll-behavior:contain}@media (max-width:calc(1024px - 0.02px)){.bv-modal{align-items:stretch;justify-content:stretch;padding:0}.bv-modal__panel,.modal-sheet{inline-size:100vw;block-size:100vh;max-width:none;max-height:none;margin:0;border-radius:0;border:0;padding:calc(var(--space-lg) + env(safe-area-inset-top)) calc(var(--space-lg) + env(safe-area-inset-right)) calc(var(--space-lg) + env(safe-area-inset-bottom)) calc(var(--space-lg) + env(safe-area-inset-left));overflow:auto}}#playerModal.modal-header,.modal-header{display:flex}.modal-header{align-items:flex-start;justify-content:space-between;gap:var(--space-md);padding:1.75rem 2rem 1rem;background:transparent;border:0}.modal-header[data-variant=flush]{padding:0;background:transparent}.modal-close{outline:2px solid transparent;outline-offset:2px}.modal-close:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}#playerModal.modal-close,.modal-close{display:flex}.modal-close{height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:var(--radius-full);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1);border:var(--border-width-hairline) solid var(--color-border-translucent-medium);background:var(--color-surface-tint-subtle);color:var(--color-text-frosted-strong)}.modal-close:hover{background:var(--color-border-translucent);border-color:var(--color-border-translucent-stronger);color:var(--color-text)}.modal-body>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.modal-body{padding:.5rem 2rem 2rem;overscroll-behavior:contain;scrollbar-width:thin}.modal-body::-webkit-scrollbar{width:var(--scrollbar-thin-width)}.modal-body::-webkit-scrollbar-track{background:transparent}.modal-body::-webkit-scrollbar-thumb{background:var(--color-border-translucent);border-radius:var(--radius-full)}#playerModal.modal-embed-frame{display:flex}.modal-embed-frame{display:flex;height:var(--modal-embed-height);max-height:var(--modal-embed-height);width:100%;flex-direction:column}#playerModal.modal-footer{display:flex}.modal-footer{display:flex;flex-direction:column;gap:.75rem;padding:1rem 2rem 2rem}#playerModal.modal-alert,.modal-alert{display:flex}.modal-alert{align-items:flex-start;gap:.75rem;border-radius:var(--radius-md);border-width:1px;border-color:var(--status-warning-strong);--tw-border-opacity:0.6;padding:.75rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);backdrop-filter:blur(var(--blur-modal-alert));background-color:var(--color-warning-glass)}.modal-alert,.modal-alert__icon{color:var(--status-warning-strong)}.modal-alert__icon{margin-top:.125rem;height:1.25rem;width:1.25rem;flex-shrink:0}.modal-tile{border-radius:var(--radius-xl);border-width:1px;border-color:var(--border-overlay);background-color:var(--surface-overlay-panel-soft);padding:1rem 1.25rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-frosted-primary);background-color:var(--color-overlay-panel-glass-soft)}.modal-tile>h3{font-size:var(--font-size-base);line-height:var(--line-height-base);font-weight:600;color:var(--text-primary)}.modal-primary{outline:2px solid transparent;outline-offset:2px}.modal-primary:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.modal-primary{display:inline-flex;align-items:center;gap:.5rem;border-radius:var(--radius-full);border-width:1px;border-color:transparent;background-color:var(--color-accent-strong);padding:.625rem 1.25rem;font-size:var(--font-size-base);line-height:var(--line-height-base);font-weight:600;color:var(--color-white);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.modal-primary:hover{background-color:var(--color-accent)}.modal-primary:focus-visible{background-color:var(--color-accent-pressed)}.modal-primary:disabled{pointer-events:none;cursor:not-allowed;opacity:.6;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}body.iframe-form button.modal-primary{align-self:flex-start;margin-top:var(--space-md)}.modal-primary{width:100%;justify-content:center}@media (prefers-reduced-motion:reduce){.modal-primary{transition-property:none}}.grid-stack{display:grid;gap:var(--space-lg)}.grid-stack[data-variant=cards]{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.grid-stack[data-variant=cards]{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1280px){.grid-stack[data-variant=cards]{grid-template-columns:repeat(3,minmax(0,1fr))}}#playerModal.grid-stack[data-orientation=vertical]{display:flex}.grid-stack[data-orientation=vertical]{display:flex;flex-direction:column;gap:var(--space-md)}#playerModal.bv-stack,.bv-stack{display:flex}.bv-stack{flex-direction:column;gap:var(--space-lg)}.bv-stack--tight{gap:var(--space-md)}.bv-grid-video{display:grid;gap:var(--space-xl);padding-top:var(--space-lg);padding-bottom:var(--space-lg);grid-template-columns:repeat(auto-fill,minmax(var(--grid-card-min-width),1fr))}.\!card[data-alert=nsfw-owner],.card[data-alert=nsfw-owner]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--color-black)}.\!card[data-alert=nsfw-owner]:hover,.card[data-alert=nsfw-owner]:hover{--tw-border-opacity:0.6;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!card img[data-thumbnail-state=blurred],.card img[data-thumbnail-state=blurred]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.\!card img[data-thumbnail-state=blurred]{filter:blur(var(--blur-thumbnail-blur))!important;transform:scale(1.05)!important}.card img[data-thumbnail-state=blurred]{filter:blur(var(--blur-thumbnail-blur));transform:scale(1.05)}.\!card[data-owner-is-viewer=true][data-url-health-state=offline][data-stream-health-state=unhealthy],.card[data-owner-is-viewer=true][data-url-health-state=offline][data-stream-health-state=unhealthy]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--surface-raised-critical)}.video-visibility-toggle{display:inline-flex;align-items:center;gap:.25rem;border-radius:var(--radius-full);border-width:1px;border-color:var(--border-default);background-color:var(--surface-panel);padding:.25rem}.video-visibility-toggle__option{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);border-width:1px;border-color:transparent;background-color:var(--surface-panel);padding:.5rem .75rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);font-weight:600;text-transform:uppercase;color:var(--text-muted);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.video-visibility-toggle__option:not(.is-disabled):hover{background-color:var(--surface-panel-hover);color:var(--text-primary)}.video-visibility-toggle__option[data-active=true]{border-width:1px;border-color:var(--color-accent);--tw-border-opacity:0.6;color:var(--text-primary);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.video-visibility-toggle__option.is-disabled{cursor:not-allowed;opacity:.45}#playerModal.video-modal__container{display:flex}.video-modal__container{display:flex;height:100%;min-height:100vh;width:100%;flex:1 1 0%;flex-direction:column}#playerModal.player-modal__container{display:flex}.player-modal__container{display:flex;height:100%;min-height:100vh;width:100%;flex:1 1 0%;flex-direction:column}#playerModal>.bv-modal__panel{max-width:none;height:100%;border-radius:0;background:transparent;align-items:stretch}#playerModal>.bv-modal__panel,.video-modal__panel{width:100%;padding:0;box-shadow:none;border:none;display:flex}.video-modal__panel{position:relative;z-index:var(--z-modal-content);flex:1 1 auto;min-height:100%;flex-direction:column;overflow:visible;margin:0;border-radius:0;background-color:var(--color-surface)}#playerModal .watch-container{width:100%;max-width:none;margin-inline:0;padding-inline:0}#playerModal .modal-info-panel{display:flex;flex-direction:column;gap:var(--space-lg)}#playerModal h2#videoTitle{margin:0;font-size:clamp(var(--font-size-xl),calc(var(--font-size-modal-title-base) + .5vw),var(--font-size-xl-plus));font-weight:600;line-height:1.3;color:var(--color-text)}#playerModal .modal-meta{font-size:var(--font-size-sm);line-height:1.4;color:var(--color-text-muted)}#playerModal .modal-view-count{font-weight:600;color:var(--color-text)}#playerModal .channel-card{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md-plus) var(--space-lg);border-radius:var(--radius-xl);border:var(--border-width-hairline) solid var(--color-border-translucent);background-color:var(--color-surface);box-shadow:var(--shadow-sm)}@media (max-width:30rem){#playerModal .modal-nav .icon-button{width:var(--space-xl);height:var(--space-xl);min-width:var(--space-xl);min-height:var(--space-xl)}#playerModal .watch-container{padding-inline:0}#playerModal .channel-card{gap:var(--space-sm);padding:var(--space-sm) var(--space-md)}}#playerModal .channel-card__avatar{flex-shrink:0;width:var(--avatar-size-lg);height:var(--avatar-size-lg);border-radius:var(--radius-full);overflow:hidden;background-color:var(--color-border-subtle)}#playerModal .channel-card__avatar img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}#playerModal .channel-card__name{margin:0;font-size:var(--font-size-lg);font-weight:600;color:var(--color-text)}#playerModal .channel-card__npub{margin:0;font-size:var(--font-size-sm);color:var(--color-text-muted)}#playerModal .description-panel{padding:var(--space-md-plus) var(--space-lg);border-radius:var(--radius-xl);border:var(--border-width-hairline) solid var(--color-border-translucent);background-color:var(--color-surface);box-shadow:var(--shadow-sm)}#playerModal .description-panel p{margin:0;font-size:var(--font-size-sm);line-height:1.6;color:var(--color-text)}.player-modal__content{position:relative;z-index:var(--z-modal-content);display:flex;flex:1 1 auto;width:100%;min-height:100%;flex-direction:column;overflow:visible;padding:0;margin:0;border:none;border-radius:0;background-color:var(--color-surface);box-shadow:none}@media (prefers-reduced-motion:reduce){.player-modal__content{transition-property:none}}#playerModal .modal-nav{position:sticky;top:0;z-index:var(--z-overlay-nav);--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;background-color:var(--color-overlay-darker);background-image:linear-gradient(180deg,var(--color-overlay-panel-gradient-start) 0,var(--color-overlay-panel-gradient-end) 100%);border-bottom:var(--border-width-hairline) solid var(--color-border-translucent);backdrop-filter:blur(var(--modal-nav-backdrop-blur));-webkit-backdrop-filter:blur(var(--modal-nav-backdrop-blur))}#playerModal#playerModal .modal-nav__bar{display:flex}#playerModal .modal-nav__bar{display:flex;width:100%;align-items:center;gap:.75rem;padding:.5rem}@media (min-width:640px){#playerModal .modal-nav__bar{padding-left:1rem;padding-right:1rem}}#playerModal#playerModal .modal-nav .modal-actions{display:flex}#playerModal .modal-nav .modal-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}#playerModal .modal-nav .icon-button{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);color:var(--text-muted);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1);width:var(--icon-size-lg);height:var(--icon-size-lg);background:var(--color-surface-tint-subtle);border:var(--border-width-hairline) solid var(--color-border-translucent-medium);color:var(--color-text-muted)}#playerModal .modal-nav .icon-button:focus-visible,#playerModal .modal-nav .icon-button:hover{background:var(--color-border-translucent-bright);border-color:var(--color-border-translucent-strong);color:var(--color-text)}.modal-nav--hidden{--tw-translate-y:-100%}.modal-nav--hidden,.modal-nav--visible{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.modal-nav--visible{--tw-translate-y:0px}.video-modal__layout{display:grid;gap:1.5rem}@media (min-width:1024px){.video-modal__layout{gap:2rem;grid-template-columns:minmax(0,var(--video-modal-primary-fr)) minmax(var(--video-modal-secondary-min),var(--video-modal-secondary-fr,1fr))}}.revert-modal__layout{display:grid;gap:1.5rem}@media (min-width:1024px){.revert-modal__layout{grid-template-columns:minmax(var(--revert-modal-sidebar-min),var(--revert-modal-sidebar-width)) minmax(0,1fr)}}#playerModal.video-modal__primary{display:flex}.video-modal__primary{display:flex;flex-direction:column;gap:1.5rem}#playerModal.video-modal__secondary{display:flex}.video-modal__secondary{display:flex;flex-direction:column;gap:1rem}.video-modal__video{position:relative;background-color:var(--color-black);padding-block:clamp(var(--space-xs),2.5vw,var(--space-md-plus))}@media (min-width:1024px){.video-modal__video{position:sticky;top:calc(var(--space-2xl) + var(--space-xl))}}#playerModal .video-modal__video video{border-radius:var(--radius-lg);box-shadow:var(--shadow-video-modal);max-height:min(80vh,56.25vw);-o-object-fit:contain;object-fit:contain}.video-modal__media{display:block;aspect-ratio:16/9;width:100%;-o-object-fit:contain;object-fit:contain}#playerModal.video-modal__details{display:flex}.video-modal__details{display:flex;flex-direction:column;gap:1.5rem}.video-modal__meta{border-bottom-width:1px;border-color:var(--border-default);--tw-border-opacity:0.2;padding-bottom:1rem}#playerModal.video-modal__actions-row{display:flex}.video-modal__actions-row{display:flex;flex-wrap:wrap;gap:.75rem}.video-modal__action-button,.video-modal__actions-row{align-items:center}.video-modal__action-button{display:inline-flex;height:2.75rem;justify-content:center;gap:.5rem;border-radius:var(--radius-full);font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:600;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1);min-width:var(--video-modal-action-min-width);padding-inline:var(--space-md);border-width:1px;border-style:solid}.bv-modal.video-modal__action-label,.profile-pane.video-modal__action-label,.video-modal__action-label{display:none}@media (min-width:640px){.video-modal__action-label{display:inline}}.video-modal__action-icon{height:1.25rem;width:1.25rem}.video-modal__channel,.video-modal__description,.video-modal__stats{border-radius:1rem;border-width:1px;border-color:var(--border-default);--tw-border-opacity:0.2;background-color:var(--surface-base);padding:1.25rem 1.5rem;--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.video-modal__progress{height:.5rem;width:100%;overflow:hidden;border-radius:var(--radius-full);background-color:var(--border-subtle)}#playerModal.video-modal__stat-metrics{display:flex}.video-modal__stat-metrics{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-muted)}.profile-modal{display:flex;flex-direction:column;inline-size:100%;max-block-size:var(--modal-shell-max-height);overflow:hidden}.profile-modal__body{overflow:hidden;padding-block-start:var(--space-md);padding-block-end:var(--space-lg);padding-inline:var(--space-lg)}.profile-modal__body,.profile-modal__layout{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--space-lg);inline-size:100%;min-block-size:0}.profile-modal__nav{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-self:flex-start}.profile-modal__panes{display:flex;flex:1 1 auto;flex-direction:column;block-size:100%;min-block-size:0;overflow-y:auto;padding-inline-end:var(--profile-modal-scrollbar-offset);scrollbar-gutter:stable}.profile-pane{display:flex;flex-direction:column;min-block-size:auto}.profile-pane.hidden{display:none!important}@supports not (scrollbar-gutter:stable){.profile-modal__panes{padding-inline-end:calc(var(--profile-modal-scrollbar-offset) + var(--space-2xs))}}@media (min-width:1024px){.profile-modal__body{gap:var(--space-xl);padding-inline:var(--space-xl)}.profile-modal__layout{display:grid;align-items:flex-start;block-size:100%;gap:var(--space-xl);grid-template-columns:minmax(var(--profile-modal-nav-min-width),var(--profile-modal-nav-max-width)) minmax(0,1fr)}.profile-modal__nav{flex-direction:column;flex-wrap:nowrap;justify-self:start;inline-size:var(--profile-modal-nav-max-width);min-inline-size:var(--profile-modal-nav-min-width)}}.beacon-hidden-download,.torrent-download-anchor,[data-beacon-hidden-download]{display:none!important}.beacon-clipboard-offscreen,.torrent-clipboard-textarea,[data-beacon-clipboard-state=offscreen],[data-beacon-clipboard=offscreen]{position:fixed;top:0;left:var(--offscreen-offset);opacity:0;width:0;height:0;pointer-events:none}.beacon-toast-motion,.torrent-toast-motion{transition-property:opacity,transform;will-change:opacity,transform;opacity:0;transform:translateY(var(--toast-translate))}.beacon-toast-motion[data-beacon-motion=enter],.beacon-toast-motion[data-beacon-motion=show],.torrent-toast-motion[data-beacon-motion=enter],.torrent-toast-motion[data-beacon-motion=show]{opacity:1;transform:translateY(0)}.beacon-toast-motion[data-beacon-motion=exit],.torrent-toast-motion[data-beacon-motion=exit]{opacity:0;transform:translateY(var(--toast-translate))}.torrent-toast{pointer-events:auto;width:100%;max-width:28rem;border-radius:var(--radius-lg);padding:.75rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:500;letter-spacing:-.025em;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--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,0 0 #0000);--tw-ring-inset:inset}.torrent-toast--info{border-width:1px;border-color:var(--border-overlay);background-color:var(--surface-base);color:var(--text-primary)}.torrent-toast--success{border-width:1px;border-color:var(--color-info);--tw-border-opacity:0.6;background-color:var(--color-info);color:var(--color-white)}.torrent-toast--error{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.6;background-color:var(--color-critical);color:var(--color-white)}.torrent-toast--warn{border-width:1px;border-color:var(--status-warning-strong);--tw-border-opacity:0.7;background-color:var(--status-warning-strong);color:var(--status-warning-strong)}.watch-history-card{--video-card-lift-translate-y:0;--video-card-backdrop-opacity:0;--video-card-backdrop-translate-y:1.25rem;--video-card-backdrop-scale:1.08;--video-card-backdrop-blur:var(--blur-thumbnail-blur);outline:2px solid transparent;outline-offset:2px}.watch-history-card:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.watch-history-card{position:relative;border-radius:var(--radius-lg);border-width:1px;border-color:transparent;background-color:var(--surface-raised);color:var(--text-primary);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transform:translate3d(0,var(--video-card-lift-translate-y),0);transition-property:transform,box-shadow,border-color,background-color,color;will-change:transform;isolation:isolate}.watch-history-card:before{content:"";position:absolute;inset:0;z-index:0;opacity:var(--video-card-backdrop-opacity);background-image:var(--video-card-thumb-url,none);background-position:50%;background-repeat:no-repeat;background-size:cover;transform:translate3d(0,var(--video-card-backdrop-translate-y),0) scale(var(--video-card-backdrop-scale));filter:blur(var(--video-card-backdrop-blur));transition:opacity var(--motion-duration-base) var(--motion-ease-in-out),transform var(--motion-duration-base) var(--motion-ease-in-out),filter var(--motion-duration-base) var(--motion-ease-in-out);pointer-events:none;will-change:opacity,transform,filter}.watch-history-card>*{position:relative;z-index:1}.watch-history-card:focus-within,.watch-history-card:hover{--video-card-lift-translate-y:-0.35rem;--video-card-backdrop-opacity:0.425;--video-card-backdrop-translate-y:0.15rem;--video-card-backdrop-scale:1.12;--video-card-backdrop-blur:24px;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.watch-history-card:focus-visible{border-color:var(--color-accent);--tw-border-opacity:0.4;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.watch-history-card[data-state=critical]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--surface-raised-critical)}.watch-history-card[data-state=private]{background-color:var(--surface-raised-private);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg)}.watch-history-card[data-state=disabled],.watch-history-card[data-state=private]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.watch-history-card[data-state=disabled]{opacity:.6;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.watch-history-card[data-alert=nsfw-owner]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--color-black)}.watch-history-card[data-alert=nsfw-owner]:hover{--tw-border-opacity:0.6;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.watch-history-card img[data-thumbnail-state=blurred]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1);filter:blur(var(--blur-thumbnail-blur));transform:scale(1.05)}.watch-history-card[data-owner-is-viewer=true][data-url-health-state=offline][data-stream-health-state=unhealthy]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--surface-raised-critical)}.watch-history-card[data-motion=enter]{opacity:0;animation:card-motion-enter .22s ease-out forwards}#playerModal.watch-history-card{display:flex}.watch-history-card{display:flex;flex-wrap:wrap;align-items:stretch;gap:1.25rem;padding:1rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}@media (prefers-reduced-motion:reduce){.watch-history-card,.watch-history-card[data-motion=enter]{transition-property:none}.watch-history-card[data-motion=enter]{opacity:1;animation:none}}.watch-history-card:hover{--tw-translate-y:-0.125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media (min-width:640px){.watch-history-card{gap:1.5rem;padding:1.25rem}}.watch-history-card--private{border-color:var(--color-info);--tw-border-opacity:0.6}#playerModal.watch-history-card__primary{display:flex}.watch-history-card__primary{display:flex;min-width:0;flex:1 1 0%;flex-wrap:wrap;align-items:stretch;gap:1rem}@media (min-width:640px){.watch-history-card__primary{flex-wrap:nowrap}}.watch-history-card__thumbnail{display:block;flex:none;color:var(--text-primary);text-decoration-line:none}@media (min-width:640px){.watch-history-card__thumbnail{width:14rem}}.watch-history-card__thumbnailInner{aspect-ratio:16/9;width:100%;overflow:hidden;border-radius:var(--radius-lg);background-color:var(--surface-base)}.watch-history-card__thumbnailInner img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover}#playerModal.watch-history-card__details{display:flex}.watch-history-card__details{display:flex;min-width:0;flex:1 1 0%;flex-direction:column;justify-content:center;gap:var(--space-sm)}.watch-history-card__title{cursor:pointer;font-size:var(--font-size-lg);line-height:var(--line-height-base);font-weight:600;line-height:1.375;color:var(--text-primary);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.watch-history-card__title:focus,.watch-history-card__title:hover{color:var(--color-accent)}.watch-history-card__created{font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-muted)}#playerModal.watch-history-card__meta{display:flex}.watch-history-card__meta{display:flex;min-width:0;flex-direction:column;justify-content:space-between;gap:1rem}@media (min-width:640px){.watch-history-card__meta{min-width:14rem;flex:none;flex-basis:16rem}}.watch-history-card__watched{font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--border-subtle)}#playerModal.watch-history-card__creator{display:flex}.watch-history-card__creator{display:flex;align-items:center;gap:.75rem}#playerModal.watch-history-card__creatorAvatar{display:flex}.watch-history-card__creatorAvatar{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:var(--radius-full);background-color:var(--surface-panel);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.watch-history-card__creatorAvatar:hover{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.5}.watch-history-card__creatorAvatar:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.5}.watch-history-card__creatorAvatar:focus-visible,.watch-history-card__creatorAvatar:hover{--tw-ring-color:color-mix(in srgb,var(--color-accent) 38%,transparent)}.watch-history-card__creatorAvatar img{height:100%;width:100%;border-radius:var(--radius-full);-o-object-fit:cover;object-fit:cover}.watch-history-card__creatorName{cursor:pointer;background-color:transparent;padding:0;text-align:left;font-size:var(--font-size-base);line-height:var(--line-height-base);font-weight:500;color:var(--text-muted);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.watch-history-card__creatorName:hover{color:var(--color-accent)}.watch-history-card__creatorName:focus-visible{color:var(--color-accent)}#playerModal.watch-history-card__actions{display:flex}.watch-history-card__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.watch-history-card__action{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-full);border-width:1px;border-color:transparent;background-color:var(--surface-panel);padding:.5rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:500;color:var(--text-muted);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.watch-history-card__action:hover{border-color:var(--border-default);background-color:var(--surface-alt);color:var(--text-primary)}.watch-history-card__action:focus-visible{border-color:var(--border-default);background-color:var(--surface-alt);color:var(--text-primary)}.watch-history-card__action--primary{background-color:var(--color-accent-strong);color:var(--color-white)}.watch-history-card__action--primary:hover{background-color:var(--color-accent-pressed)}.watch-history-card__action--primary:focus-visible{background-color:var(--color-accent-pressed)}.watch-history-card__action--danger{background-color:var(--color-critical);color:var(--color-white)}.watch-history-card__action--danger:hover{background-color:var(--color-critical-strong)}.watch-history-card__action--danger:focus-visible{background-color:var(--color-critical-strong)}.\!container{max-width:var(--layout-docs-max-width)!important;margin:0 auto!important;padding:var(--space-md)!important}.container{max-width:var(--layout-docs-max-width);margin:0 auto;padding:var(--space-md)}.fade-in{opacity:0;animation:interface-fade-in .28s ease-out forwards;animation-delay:var(--fade-in-delay,0ms)}.fade-in-delay-100{--fade-in-delay:100ms}.fade-in-delay-200{--fade-in-delay:200ms}.fade-in-delay-300{--fade-in-delay:300ms}.\!card[data-motion=enter]{opacity:0!important;animation:card-motion-enter .22s ease-out forwards!important}.card[data-motion=enter]{opacity:0;animation:card-motion-enter .22s ease-out forwards}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:var(--icon-size-lg);height:var(--icon-size-lg);min-width:var(--icon-size-lg);min-height:var(--icon-size-lg);flex:0 0 var(--icon-size-lg);line-height:0;background-color:var(--color-neutral-700);color:var(--color-white);border:none;border-radius:var(--radius-full);cursor:pointer;transition:background-color .2s ease,box-shadow .2s ease}.icon-button:hover{background-color:var(--color-neutral-600)}.icon-button:active,.icon-button:focus{outline:none;box-shadow:0 0 0 var(--icon-button-ring-width) var(--color-ring-alert)}.icon-image{width:var(--icon-size-md);height:var(--icon-size-md);pointer-events:none}.accent-action-button,.channel-action-button{--accent-action-bg:color-mix(in srgb,var(--surface-overlay-panel) 78%,transparent);--accent-action-border:color-mix(in srgb,var(--border-overlay) 92%,transparent);--accent-action-bg-hover:color-mix(in srgb,var(--color-accent) 22%,var(--surface-overlay-panel));--accent-action-ring:color-mix(in srgb,var(--color-accent) 48%,transparent);--accent-action-bg-active:color-mix(in srgb,var(--color-accent-pressed) 28%,var(--surface-overlay-panel));color:var(--color-text);background-color:var(--accent-action-bg);border-color:var(--accent-action-border);border-style:solid;border-width:1px}.accent-action-button:focus-visible,.accent-action-button:hover,.channel-action-button:focus-visible,.channel-action-button:hover{color:var(--color-accent-strong);background-color:var(--accent-action-bg-hover)}.accent-action-button:focus,.accent-action-button:focus-visible,.channel-action-button:focus,.channel-action-button:focus-visible{box-shadow:0 0 0 var(--icon-button-ring-width) var(--accent-action-ring)}.accent-action-button:active,.channel-action-button:active{color:var(--color-accent-pressed);background-color:var(--accent-action-bg-active)}.modal-nav .icon-button{box-shadow:none;padding:0;gap:0;width:var(--icon-size-lg);height:var(--icon-size-lg);min-width:var(--icon-size-lg);min-height:var(--icon-size-lg)}.modal-nav .icon-button:not(.accent-action-button):not(.channel-action-button){border:none}.modal-meta{gap:var(--space-xs)}.modal-meta,.modal-view-count{display:inline-flex;align-items:center}.modal-view-count{gap:var(--space-2xs);font-size:var(--font-size-sm);line-height:var(--space-md-plus);color:var(--color-muted-alt);white-space:nowrap}.view-count-text{white-space:nowrap;color:var(--color-muted-strong)}.ratio-16-9{position:relative;width:100%;padding-top:56.25%;background-color:var(--color-card)}.ratio-16-9>img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}#modalContainer{position:fixed;inset:0;z-index:var(--z-modal-root);pointer-events:none;isolation:isolate}#modalContainer>*{pointer-events:auto}#modalContainer>[id$=Modal]:not(#playerModal){z-index:var(--z-modal-root)}#modalContainer>[id$=Modal]:not(#playerModal)>.bv-modal-backdrop{z-index:var(--z-modal-overlay)}#modalContainer>[id$=Modal]:not(#playerModal) .bv-modal__panel{z-index:var(--z-modal-content)}#modalContainer>#playerModal{z-index:var(--z-modal-player)}#modalContainer>#playerModal .player-modal__container,#modalContainer>#playerModal .player-modal__content{z-index:var(--z-modal-content)}#playerModal{position:fixed;inset:0;z-index:var(--z-modal-player);display:none;flex-direction:column;align-items:stretch;justify-content:stretch;width:100vw;height:100vh;background-color:var(--color-surface);color:var(--color-subtle-text);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}#playerModal.flex{display:flex}#modalVideo{width:100%;aspect-ratio:16/9;background-color:var(--color-black)}.notification-portal{position:fixed;top:0;left:0;right:0;z-index:var(--z-overlay-toast);display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:calc(var(--space-xl) + env(safe-area-inset-top, 0px)) var(--space-lg) var(--space-lg);pointer-events:none;opacity:0;transform:translateY(var(--toast-translate));transition:transform var(--motion-duration-base) var(--motion-ease-out),opacity var(--motion-duration-base) var(--motion-ease-out)}@media (min-width:640px){.notification-portal{padding-inline:var(--space-xl)}}.notification-portal:has(.notification-banner:not(.hidden)){opacity:1;transform:translateY(0)}.notification-banner,.torrent-toast{--notify-accent:var(--color-accent-strong);--notify-accent-strong:var(--color-accent);--notify-border:var(--surface-overlay-panel-tint);--notify-background:var(--surface-overlay-panel);--notify-foreground:var(--color-text);position:relative;display:flex;align-items:center;gap:var(--space-md);width:min(28rem,100%);padding:var(--space-md) var(--space-xl);border-radius:var(--radius-xl);border:1px solid var(--notify-border);background:var(--notify-background);color:var(--notify-foreground);box-shadow:0 32px 64px var(--color-shadow-notification);backdrop-filter:blur(var(--overlay-backdrop-blur));pointer-events:auto;isolation:isolate;font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:600;line-height:1.375;transition:transform var(--motion-duration-base) var(--motion-ease-out),opacity var(--motion-duration-base) var(--motion-ease-out)}.notification-banner:before,.torrent-toast:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,var(--notify-accent) 0,var(--notify-accent-strong) 100%);opacity:.18;pointer-events:none}.notification-banner>*,.torrent-toast>*{position:relative;z-index:1}.notification-dismiss{display:inline-flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:var(--radius-full);border-width:1px;border-color:transparent;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1);color:inherit;opacity:.75;background-color:var(--notify-dismiss-background)}.notification-dismiss:focus-visible,.notification-dismiss:hover{opacity:1;background-color:var(--notify-dismiss-background-hover)}.notification-dismiss svg{height:1rem;width:1rem}.notification-banner:not(.hidden){animation:notification-slide-in var(--motion-duration-base) var(--motion-ease-out)}.notification-banner--critical,.torrent-toast--error{--notify-accent:var(--color-critical-strong);--notify-accent-strong:var(--color-critical);--notify-border:var(--color-ring-critical-soft);--notify-background:var(--color-card-critical);--notify-foreground:var(--color-critical-strong)}.notification-banner--success,.torrent-toast--success{--notify-accent:var(--status-success-strong);--notify-accent-strong:var(--status-success);--notify-border:var(--status-success-border);--notify-background:var(--status-success-surface);--notify-foreground:var(--status-success-on)}.notification-banner--info,.torrent-toast--info{--notify-accent:var(--color-info-strong);--notify-accent-strong:var(--color-info);--notify-border:var(--color-info-border);--notify-background:var(--status-info-surface)}.notification-banner--warning,.torrent-toast--warn{--notify-accent:var(--color-warning-strong);--notify-accent-strong:var(--color-warning);--notify-border:var(--status-warning-border);--notify-background:var(--status-warning-surface);--notify-foreground:var(--status-warning-on)}.status-banner .status-spinner{animation:spin 1s linear infinite;border:var(--space-3xs) solid var(--color-info-border);border-radius:var(--radius-full);border-top-color:var(--color-info);flex-shrink:0;height:var(--icon-size-md);width:var(--icon-size-md)}.status-banner .status-message{flex:1 1 auto}@keyframes notification-slide-in{0%{opacity:0;transform:translateY(var(--toast-translate))}to{opacity:1;transform:translateY(0)}}.status-spinner--inline{animation:spin 1s linear infinite;border:var(--space-3xs) solid var(--color-border-info-soft);border-radius:var(--radius-full);border-top-color:var(--color-info);display:inline-block;height:var(--space-md);width:var(--space-md)}body.iframe-form{background-color:transparent;color:var(--color-text);font-family:var(--font-family-sans);margin:var(--space-lg)}body.iframe-form .container{width:100%;max-width:100%;margin:0;padding:0}body.iframe-form .\!container{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important}body.iframe-form .form-container{background-color:var(--color-surface-alt);border-radius:var(--radius-md);box-shadow:var(--shadow-md);color:var(--color-text);display:flex;flex-direction:column;gap:var(--space-md);padding:var(--space-lg)}body.iframe-form .form-container>p{margin:0}body.iframe-form form{display:flex;flex-direction:column}body.iframe-form form>*+*{margin-top:var(--space-sm)}body.iframe-form form h1,body.iframe-form form h2{color:var(--color-text);margin-top:var(--space-md)}body.iframe-form label{color:var(--color-subtle-text);display:block;font-weight:600;margin-top:var(--space-sm)}body.iframe-form label+.form-control,body.iframe-form label+.select,body.iframe-form label+.textarea{margin-top:var(--space-xs)}body.iframe-form .checkbox-group,body.iframe-form .radio-group{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-xs)}body.iframe-form .checkbox-group label,body.iframe-form .radio-group label{align-items:center;color:var(--color-subtle-text);display:inline-flex;font-weight:500;gap:var(--space-xs);margin:0}body.iframe-form .checkbox-group input[type=checkbox],body.iframe-form .radio-group input[type=radio]{margin:0}body.iframe-form .radio-group input[type=radio]{accent-color:var(--color-accent-strong)}body.iframe-form button.btn{align-self:flex-start;margin-top:var(--space-md)}body.iframe-form #status{background:var(--color-surface);border-radius:var(--radius-sm);box-shadow:inset 0 0 0 var(--border-width-hairline) var(--color-border-translucent);color:var(--color-subtle-text);min-height:calc(var(--space-2xl) + var(--space-xl));padding:var(--space-sm);white-space:pre-wrap}body.iframe-form .status-line{color:var(--color-subtle-text);margin:var(--space-2xs) 0}body.iframe-form .status-line.error{color:var(--color-critical-strong)}body.iframe-form .status-line.\!error{color:var(--color-critical-strong)!important}body.iframe-form .status-line.success{color:var(--color-info-strong)}body.iframe-form .status-line.\!success{color:var(--color-info-strong)!important}body.iframe-form .status-line.warn{color:var(--color-warning-strong)}@media (max-width:640px){body.iframe-form{margin:var(--space-md)}body.iframe-form .form-container{padding:var(--space-md)}}#sidebarContainer{position:relative;overflow:visible}#sidebar{position:fixed;top:0;left:0;width:var(--sidebar-width);min-width:var(--sidebar-width);height:100vh;height:100dvh;color:var(--color-text-frosted-strong);overflow-x:visible;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-gutter:stable both-edges;background:transparent;border-right:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:width .2s ease,transform .3s ease;z-index:var(--z-sidebar);box-shadow:none;isolation:isolate}#app.sidebar-collapsed,#sidebar.sidebar-collapsed,#sidebar[data-state=collapsed],body.sidebar-collapsed{--sidebar-width:var(--sidebar-width-collapsed)}#app.sidebar-expanded,#sidebar.sidebar-expanded,#sidebar[data-state=expanded],body.sidebar-expanded{--sidebar-width:var(--sidebar-width-expanded)}#sidebar .sidebar__inner{padding:var(--space-sidebar-shell-block-start) var(--space-sidebar-shell-inline) var(--space-sidebar-shell-block-end);border-radius:var(--radius-sidebar-shell);border:none;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;isolation:isolate;transition:color .2s ease}#sidebar .sidebar__inner,.sidebar-scroll{display:flex;flex-direction:column;height:100%;width:100%;overflow:visible}.sidebar-scroll{gap:var(--space-sidebar-scroll-gap);min-height:0;flex:1 1 auto}.sidebar-panel{position:relative;width:100%;display:flex;flex-direction:column;gap:var(--space-sidebar-panel-gap);padding:var(--space-sidebar-panel-padding-block) var(--space-sidebar-panel-padding-inline);border-radius:var(--radius-sidebar-panel);border:none;background:transparent;box-shadow:none;color:inherit;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden;isolation:isolate;transition:border-color .2s ease,box-shadow .22s ease,background .22s ease}.sidebar-panel--primary{flex:1 1 auto;min-height:0}.sidebar-panel__header{display:flex;justify-content:flex-end;margin-bottom:var(--space-md)}.sidebar-collapse-toggle{display:inline-flex;align-items:center;justify-content:center;width:var(--sidebar-control-size);height:var(--sidebar-control-size);border-radius:var(--radius-full);border:var(--border-width-hairline) solid var(--color-border-translucent-medium);background:var(--color-surface-tint-subtle);color:inherit;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease;flex-shrink:0;box-sizing:border-box}.sidebar-collapse-toggle:hover{background:var(--color-border-translucent);border-color:var(--color-border-translucent-stronger);color:var(--color-text)}.sidebar-collapse-toggle:focus-visible{outline:var(--space-3xs) solid var(--color-secondary);outline-offset:var(--space-2xs)}.sidebar-collapse-toggle__icon{width:var(--icon-size-sm);height:var(--icon-size-sm);transition:transform .2s ease}.sidebar-nav{display:flex;flex-direction:column;gap:var(--space-xs);opacity:1;transition:opacity .16s ease;width:100%}.sidebar-nav-link{--sidebar-nav-translate-x:0;--sidebar-nav-link-highlight-opacity:0;--sidebar-nav-link-highlight-scale:0.96;display:flex;align-items:center;gap:var(--space-sidebar-footer-gap);padding:var(--space-sidebar-nav-padding-block) var(--space-md);min-height:var(--sidebar-control-size);border-radius:var(--radius-sidebar-nav);font-size:var(--font-size-sidebar-nav);font-weight:600;letter-spacing:.015em;color:var(--color-text);text-decoration:none;width:100%;position:relative;border:var(--border-width-hairline) solid transparent;background:none;box-shadow:none;transform:translateX(var(--sidebar-nav-translate-x));transition:color .18s ease,border-color .2s ease,box-shadow .22s ease,transform .22s ease;overflow:hidden;isolation:isolate;backdrop-filter:none;-webkit-backdrop-filter:none}.sidebar-nav-link:after,.sidebar-nav-link:before{content:"";position:absolute;inset:calc(var(--border-width-hairline)*-1);border-radius:inherit;pointer-events:none;transition:opacity .22s ease,transform .24s ease;z-index:-1}.sidebar-nav-link:before{background:linear-gradient(120deg,var(--color-sidebar-accent-start) 0,var(--color-sidebar-accent-end) 100%);opacity:var(--sidebar-nav-link-highlight-opacity);transform:scale(var(--sidebar-nav-link-highlight-scale));filter:saturate(140%)}.sidebar-nav-link:after{background:linear-gradient(105deg,var(--color-sidebar-hover) 0,transparent 75%);opacity:.22;mix-blend-mode:screen;z-index:-2}.sidebar-nav-link:focus-visible,.sidebar-nav-link:hover{--sidebar-nav-link-highlight-opacity:1;--sidebar-nav-link-highlight-scale:1.02;--sidebar-nav-translate-x:var(--space-sidebar-nav-translate);color:var(--color-white);border-color:var(--color-sidebar-hover-strong);box-shadow:0 0 0 var(--border-width-hairline) var(--color-sidebar-hover-strong),var(--shadow-sidebar-accent)}.sidebar-nav-link:focus-visible{outline:none;box-shadow:var(--shadow-sidebar-focus-ring),var(--shadow-sidebar-accent)}.sidebar-nav-link:focus-visible:after,.sidebar-nav-link:hover:after{opacity:.35}.sidebar-nav-link--sub{font-size:var(--font-size-sidebar-subnav);font-weight:500;color:var(--color-sidebar-text-muted);padding-block:var(--space-sidebar-subnav-padding-block);letter-spacing:.02em;--sidebar-nav-link-highlight-opacity:0.25;--sidebar-nav-link-highlight-scale:1}.sidebar-icon{width:var(--space-lg);height:var(--space-lg);min-width:var(--space-lg);min-height:var(--space-lg);flex-shrink:0;display:block;filter:var(--sidebar-icon-filter);transition:filter .18s ease}.sidebar-footer{flex-direction:column;margin-top:auto;z-index:2}.sidebar-dropup-trigger,.sidebar-footer{display:flex;gap:var(--space-sidebar-footer-gap);position:relative}.sidebar-dropup-trigger{align-items:center;justify-content:space-between;width:100%;padding:var(--space-sidebar-trigger-padding-block) var(--space-md);min-height:var(--sidebar-control-size);border-radius:var(--radius-sidebar-nav);border:var(--border-width-hairline) solid transparent;background:none;color:var(--color-text);font-size:var(--font-size-sidebar-trigger);font-weight:600;cursor:pointer;box-sizing:border-box;flex-shrink:0;overflow:hidden;isolation:isolate;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;transition:border-color .2s ease,color .2s ease,box-shadow .22s ease}.sidebar-dropup-trigger:before{background:linear-gradient(120deg,var(--color-sidebar-accent-start) 0,var(--color-sidebar-accent-end) 100%);opacity:0;transform:scale(.96);transition:opacity .2s ease,transform .22s ease;z-index:-1;filter:saturate(140%)}.sidebar-dropup-trigger:after,.sidebar-dropup-trigger:before{content:"";position:absolute;inset:calc(var(--border-width-hairline)*-1);border-radius:inherit;pointer-events:none}.sidebar-dropup-trigger:after{background:linear-gradient(110deg,var(--color-sidebar-hover) 0,transparent 80%);opacity:.18;mix-blend-mode:screen;transition:opacity .2s ease;z-index:-2}.sidebar-dropup-trigger:focus-visible,.sidebar-dropup-trigger:hover{color:var(--color-white);border-color:var(--color-sidebar-hover-strong);box-shadow:0 0 0 var(--border-width-hairline) var(--color-sidebar-hover-strong),var(--shadow-sidebar-dropup)}.sidebar-dropup-trigger:focus-visible:before,.sidebar-dropup-trigger:hover:before{opacity:1;transform:scale(1.02)}.sidebar-dropup-trigger:focus-visible:after,.sidebar-dropup-trigger:hover:after{opacity:.35}.sidebar-dropup-trigger:focus-visible{outline:none;box-shadow:var(--shadow-sidebar-focus-ring),var(--shadow-sidebar-dropup)}.sidebar-dropup-trigger__glyph{width:var(--icon-size-md);height:var(--icon-size-md);opacity:.9}.sidebar-dropup-trigger__chevron{width:var(--icon-size-sm);height:var(--icon-size-sm);transition:transform .18s ease}.sidebar-dropup-trigger[aria-expanded=true] .sidebar-dropup-trigger__chevron,.sidebar-dropup-trigger__chevron.is-rotated{transform:rotate(180deg)}.sidebar-dropup-panel{position:absolute;left:0;right:calc(var(--space-sidebar-dropup-scroll-reserve)*-1);bottom:calc(100% + var(--space-sidebar-popover-offset));border-radius:var(--radius-xl);border:var(--border-width-hairline) solid var(--color-sidebar-border-strong);background:linear-gradient(160deg,color-mix(in srgb,var(--color-sidebar-surface) 88%,transparent) 0,color-mix(in srgb,var(--color-sidebar-surface-alt) 68%,transparent) 100%);box-shadow:inset 0 0 0 var(--border-width-fine) var(--color-sidebar-border),var(--shadow-sidebar-panel);padding:var(--space-sidebar-popover-padding-block) var(--space-sidebar-popover-padding-inline);color:var(--color-text-frosted);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(var(--space-sm));transition:opacity .18s ease,transform .18s ease,visibility .18s ease,box-shadow .22s ease;backdrop-filter:blur(var(--sidebar-panel-backdrop-blur)) saturate(var(--sidebar-panel-backdrop-saturation));-webkit-backdrop-filter:blur(var(--sidebar-panel-backdrop-blur)) saturate(var(--sidebar-panel-backdrop-saturation));z-index:5;isolation:isolate}.sidebar-dropup-panel[data-state=expanded]{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.sidebar-dropup-panel__inner{display:flex;flex-direction:column;gap:var(--space-sidebar-popover-gap);width:100%;padding-inline-end:var(--space-sidebar-dropup-scroll-reserve);max-height:var(--sidebar-dropup-max-height);overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable both-edges}.sidebar-dropup-panel__inner>*{width:100%;min-width:0}#sidebar[data-footer-state=expanded] .sidebar-nav{opacity:0;pointer-events:none}#sidebar[data-footer-state=collapsed] .sidebar-nav{opacity:1}.sidebar-loading-wrapper{display:flex;justify-content:center;align-items:center;padding:var(--space-2xl) 0;width:100%;grid-column:1/-1}.sidebar-loading-indicator{display:inline-flex;align-items:center;gap:var(--space-sm);color:var(--color-muted-strong);font-size:var(--font-size-sm);font-weight:500;letter-spacing:.01em}.sidebar-loading-text{white-space:nowrap}#app{box-sizing:border-box;transition:margin-left .2s ease,width .2s ease,max-width .2s ease}#app[data-sidebar-state=collapsed]{margin-left:var(--sidebar-width-collapsed);width:calc(100vw - var(--sidebar-width-collapsed));max-width:calc(100vw - var(--sidebar-width-collapsed))}#app[data-sidebar-state=expanded]{margin-left:var(--sidebar-width-expanded);width:calc(100vw - var(--sidebar-width-expanded));max-width:calc(100vw - var(--sidebar-width-expanded))}#sidebar.sidebar-collapsed .sidebar-nav-link,body.sidebar-collapsed #sidebar .sidebar-nav-link{justify-content:center;width:var(--sidebar-control-size);padding:0;margin-inline:auto;border-radius:var(--radius-full);--sidebar-nav-translate-x:0;--sidebar-nav-link-highlight-scale:1}#sidebar.sidebar-expanded .sidebar-nav-link,body.sidebar-expanded #sidebar .sidebar-nav-link{justify-content:flex-start}#sidebar.sidebar-collapsed .sidebar-text,body.sidebar-collapsed #sidebar .sidebar-text{display:none}#sidebar.sidebar-collapsed .sidebar__inner,body.sidebar-collapsed #sidebar .sidebar__inner{padding-inline:var(--space-2xs)}#sidebar.sidebar-collapsed .sidebar-panel,body.sidebar-collapsed #sidebar .sidebar-panel{padding-inline:calc(var(--space-3xs)*3)}#sidebar.sidebar-collapsed .sidebar-panel__header,body.sidebar-collapsed #sidebar .sidebar-panel__header{justify-content:center}#sidebar.sidebar-collapsed .sidebar-collapse-toggle,body.sidebar-collapsed #sidebar .sidebar-collapse-toggle{margin-inline:auto}#sidebar .sidebar-toggle-icon--rotated{transform:rotate(180deg)}#sidebar.sidebar-collapsed .sidebar-toggle-icon--rotated,body.sidebar-collapsed #sidebar .sidebar-toggle-icon--rotated{transform:rotate(0deg)}#sidebar.sidebar-collapsed .sidebar-dropup-trigger,body.sidebar-collapsed #sidebar .sidebar-dropup-trigger{justify-content:center;width:var(--sidebar-control-size);height:var(--sidebar-control-size);padding:0;margin-inline:auto;border-radius:var(--radius-full)}#sidebar.sidebar-collapsed .sidebar-dropup-trigger .sidebar-text,body.sidebar-collapsed #sidebar .sidebar-dropup-trigger .sidebar-text,body.sidebar-collapsed #sidebar .sidebar-dropup-trigger__chevron{display:none}#sidebar.sidebar-collapsed .sidebar-dropup-trigger__glyph,body.sidebar-collapsed #sidebar .sidebar-dropup-trigger__glyph{margin:0}#sidebar.sidebar-collapsed .sidebar-nav-link:focus-visible,#sidebar.sidebar-collapsed .sidebar-nav-link:hover,body.sidebar-collapsed #sidebar .sidebar-nav-link:focus-visible,body.sidebar-collapsed #sidebar .sidebar-nav-link:hover{--sidebar-nav-translate-x:0}@media (min-width:768px){.sidebar-panel__header{display:flex}.sidebar-collapse-toggle{display:inline-flex}#sidebar{transform:translateX(0)!important;width:var(--sidebar-width);overflow:visible}#app[data-sidebar-state=collapsed]{margin-left:calc(var(--sidebar-width-collapsed) + var(--sidebar-content-gap));width:calc(100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap));max-width:calc(100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap))}#app[data-sidebar-state=expanded]{margin-left:calc(var(--sidebar-width-expanded) + var(--sidebar-content-gap));width:calc(100vw - var(--sidebar-width-expanded) - var(--sidebar-content-gap));max-width:calc(100vw - var(--sidebar-width-expanded) - var(--sidebar-content-gap))}}@keyframes card-motion-enter{0%{opacity:0;transform:translateY(var(--motion-card-enter-translate))}to{opacity:1;transform:translateY(0)}}@keyframes video-thumbnail-fade-in{0%{opacity:0}to{opacity:1}}@keyframes interface-fade-in{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0;transform:translateY(var(--motion-fade-in-translate))}to{opacity:1;transform:translateY(0)}}.status-line{margin-top:.25rem;margin-bottom:.25rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);line-height:1.375;color:var(--text-primary)}.status-line.error{color:var(--color-critical-strong)}.status-line.\!error{color:var(--color-critical-strong)!important}.status-line.success{color:var(--color-blog-green-500)}.status-line.\!success{color:var(--color-blog-green-500)!important}.status-line.warn{color:var(--color-warning-strong)}.blog-html{font-size:var(--blog-font-size-root)}@media (max-width:768px){.blog-html{font-size:var(--font-size-lg)}}.blog-body{margin:0;padding:0}.dark .blog-body{background-color:var(--color-text-strong);color:var(--color-blog-gray-220)}.blog-app-root{box-sizing:border-box;font-family:var(--font-family-sans);color:var(--color-text-strong)}.dark .blog-app-root{background-color:var(--color-text-strong);color:var(--color-blog-gray-170)}.blog-app-root a,.blog-app-root a:visited{color:var(--color-text-strong)}.dark .blog-app-root a,.dark .blog-app-root a:visited{color:var(--color-blog-neutral-100)}.blog-app-root ol,.blog-app-root ul{padding-left:var(--space-md);margin:0}.blog-app-root ol li,.blog-app-root ul li{margin-bottom:var(--space-md)}.blog-app-root blockquote{margin:0;padding-left:var(--space-md);border-left:var(--space-xs) solid var(--color-blog-gray-170)}.blog-app-root code{font-size:var(--blog-font-size-body);background-color:var(--color-blog-neutral-120)}.blog-app-root pre code{overflow:scroll;display:block;padding:var(--space-md) var(--space-xs)}.blog-app-root .unfinished-setup{width:var(--blog-layout-fluid-width);margin:0 auto;text-align:center}.blog-app-root .header.home h1{font-size:var(--blog-font-size-display)}.blog-app-root .\!header.home h1{font-size:var(--blog-font-size-display)!important}.blog-app-root .header .external-link{text-align:right;margin-top:calc(var(--space-md)*-1);font-size:var(--blog-font-size-meta);color:var(--color-blog-gray-220)}.blog-app-root .\!header .external-link{text-align:right!important;margin-top:calc(var(--space-md)*-1)!important;font-size:var(--blog-font-size-meta)!important;color:var(--color-blog-gray-220)!important}@media (max-width:768px){.blog-app-root .header .external-link{margin-bottom:var(--space-md);margin-right:var(--blog-space-inline-lg)}.blog-app-root .\!header .external-link{margin-bottom:var(--space-md)!important;margin-right:var(--blog-space-inline-lg)!important}}.blog-app-root .header .external-link a{text-decoration:underline;color:var(--color-blog-gray-220)}.blog-app-root .\!header .external-link a{text-decoration:underline!important;color:var(--color-blog-gray-220)!important}.blog-app-root .header .picture-container{position:relative;display:inline-block;width:var(--blog-avatar-size);height:var(--blog-avatar-size);overflow:hidden;border-radius:50%;margin-bottom:calc(var(--space-2xs)*-1)}.blog-app-root .\!header .picture-container{position:relative!important;display:inline-block!important;width:var(--blog-avatar-size)!important;height:var(--blog-avatar-size)!important;overflow:hidden!important;border-radius:50%!important;margin-bottom:calc(var(--space-2xs)*-1)!important}.blog-app-root .header .picture-container img{position:absolute;top:50%;left:50%;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transform:translate(-50%,-50%);clip-path:circle(50%)}.blog-app-root .\!header .picture-container img{position:absolute!important;top:50%!important;left:50%!important;width:100%!important;height:100%!important;-o-object-fit:cover!important;object-fit:cover!important;transform:translate(-50%,-50%)!important;clip-path:circle(50%)!important}.blog-app-root .header.note .picture-container{width:var(--blog-avatar-size-compact);height:var(--blog-avatar-size-compact);margin-bottom:calc(var(--blog-space-snug)*-1)}.blog-app-root .\!header.note .picture-container{width:var(--blog-avatar-size-compact)!important;height:var(--blog-avatar-size-compact)!important;margin-bottom:calc(var(--blog-space-snug)*-1)!important}.blog-app-root .header a{text-decoration:none}.blog-app-root .\!header a{text-decoration:none!important}.blog-app-root .header a span{text-decoration:underline}.blog-app-root .\!header a span{text-decoration:underline!important}.dark .blog-app-root .header a:visited{color:var(--color-blog-gray-220)}.dark .blog-app-root .\!header a:visited{color:var(--color-blog-gray-220)!important}.dark .blog-app-root .header .external-link,.dark .blog-app-root .header .external-link a{color:var(--color-blog-gray-440)}.dark .blog-app-root .\!header .external-link,.dark .blog-app-root .\!header .external-link a{color:var(--color-blog-gray-440)!important}.blog-app-root .topic-wrapper{margin-bottom:var(--space-lg);display:flex;flex-direction:row;flex-wrap:wrap;row-gap:var(--space-md)}.blog-app-root .topic-wrapper div{display:inline-grid;margin-right:var(--space-md)}.blog-app-root .topic-wrapper div a{padding:var(--space-xs-snug) var(--space-md);background-color:var(--color-blog-gray-190);text-decoration:none;border-radius:var(--radius-sm)}.blog-app-root .topic-wrapper div a:hover{background-color:var(--color-blog-gray-170)}.blog-app-root .topic-wrapper div a.selected{background-color:var(--color-text-strong);color:var(--color-blog-neutral-100)}.blog-app-root .topic-wrapper div a.\!selected{background-color:var(--color-text-strong)!important;color:var(--color-blog-neutral-100)!important}.dark .blog-app-root .topic-wrapper div a{background-color:var(--color-blog-gray-440);color:var(--color-text-strong)}.dark .blog-app-root .topic-wrapper div a:hover{background-color:var(--color-blog-neutral-100)}.dark .blog-app-root .topic-wrapper div a.selected{background-color:var(--color-blog-gray-220)}.dark .blog-app-root .topic-wrapper div a.\!selected{background-color:var(--color-blog-gray-220)!important}.blog-app-root .externalLink{display:block;text-align:right;margin-top:calc(var(--space-md)*-1);font-size:.8em}.blog-app-root .externalLink,.blog-app-root .externalLink a{color:var(--color-blog-gray-220)}.blog-app-root .about{margin-bottom:var(--space-xl);padding-bottom:var(--space-md);border-bottom:var(--space-xs) solid var(--color-blog-gray-170)}.dark .blog-app-root .about{border-bottom:var(--space-xs) solid var(--color-card)}.blog-app-root .separator{margin-bottom:var(--space-xl);border-bottom:var(--space-xs) solid var(--color-blog-gray-170)}.dark .blog-app-root .separator{border-bottom:var(--space-xs) solid var(--color-card)}.blog-app-root .top-notes{display:flex;color:var(--color-blog-gray-440);flex-wrap:wrap;justify-content:space-between;gap:var(--space-xl);width:100%;margin-bottom:var(--space-md);padding-bottom:var(--space-xl);border-bottom:var(--space-xs) solid var(--color-blog-neutral-100)}@media (max-width:768px){.blog-app-root .top-notes{display:block;padding-bottom:0}}.blog-app-root .top-notes .note{flex:1 1 calc(50% - var(--space-xl));box-sizing:border-box}@media (max-width:768px){.blog-app-root .top-notes .note{margin-bottom:var(--space-xl)}}.blog-app-root .top-notes .note a{text-decoration:none}.blog-app-root .top-notes .note img{width:100%;height:var(--blog-top-note-image-height);-o-object-fit:cover;object-fit:cover;margin-bottom:var(--space-xs);border-radius:var(--radius-sm)}.blog-app-root .top-notes .note .title{display:block;margin-bottom:var(--blog-space-snug);font-size:var(--blog-font-size-title);font-weight:bolder}.blog-app-root .top-notes .note .\!title{display:block!important;margin-bottom:var(--blog-space-snug)!important;font-size:var(--blog-font-size-title)!important;font-weight:bolder!important}.blog-app-root .top-notes .note .summary{margin-bottom:var(--blog-space-snug);font-size:var(--blog-font-size-body)}.blog-app-root .top-notes .note .\!summary{margin-bottom:var(--blog-space-snug)!important;font-size:var(--blog-font-size-body)!important}.blog-app-root .top-notes .note .date{font-size:var(--blog-font-size-meta);color:var(--color-blog-gray-275)}.dark .blog-app-root .top-notes{color:var(--color-blog-gray-220);border-bottom:var(--space-xs) solid var(--color-card)}.blog-app-root .short-notes{border-bottom:var(--space-xs) solid var(--color-blog-neutral-100);padding-bottom:var(--space-md);margin-bottom:var(--space-xl)}.blog-app-root .short-notes .blog-carousel__slide{font-size:var(--blog-font-size-body);overflow-wrap:break-word}.blog-app-root .short-notes .blog-carousel__slide a{text-decoration:none}.blog-app-root .short-notes .blog-carousel__slide .date{font-size:var(--blog-font-size-meta);color:var(--color-blog-gray-275);margin-bottom:var(--blog-space-compact)}.dark .blog-app-root .short-notes{border-bottom:var(--space-xs) solid var(--color-card)}.dark .blog-app-root .short-notes a{color:var(--color-blog-gray-220)}@media (max-width:768px){.blog-app-root .short-notes [data-carousel-control]{display:none}}.blog-app-root .listing-notes{margin-top:var(--space-md);color:var(--color-blog-gray-440)}.blog-app-root .listing-notes.short-feed-full li{margin-bottom:var(--space-xl)}.blog-app-root .listing-notes.short-feed-full .summary{color:var(--color-text-strong)}.blog-app-root .listing-notes.short-feed-full .\!summary{color:var(--color-text-strong)!important}.blog-app-root .listing-notes ul{list-style-type:none;padding:0;margin:0}.blog-app-root .listing-notes ul li{margin-bottom:var(--space-md)}.blog-app-root .listing-notes ul li h2{font-size:var(--blog-font-size-title);margin-bottom:var(--space-xs)}.blog-app-root .listing-notes ul li h2 a{display:block;font-size:var(--blog-font-size-title)}.blog-app-root .listing-notes ul li .summary{margin-bottom:var(--blog-space-snug);overflow-wrap:break-word}.blog-app-root .listing-notes ul li .\!summary{margin-bottom:var(--blog-space-snug)!important;overflow-wrap:break-word!important}.blog-app-root .listing-notes ul li .summary p{margin:0}.blog-app-root .listing-notes ul li .\!summary p{margin:0!important}.blog-app-root .listing-notes ul li .summary img{display:block;margin:var(--space-xl) auto;max-width:100%;border-radius:var(--radius-sm)}.blog-app-root .listing-notes ul li .\!summary img{display:block!important;margin:var(--space-xl) auto!important;max-width:100%!important;border-radius:var(--radius-sm)!important}.blog-app-root .listing-notes ul li .summary video{width:100%;margin:var(--space-xl) auto}.blog-app-root .listing-notes ul li .\!summary video{width:100%!important;margin:var(--space-xl) auto!important}.blog-app-root .listing-notes ul li .summary audio{width:100%;margin:var(--space-xl) auto}.blog-app-root .listing-notes ul li .\!summary audio{width:100%!important;margin:var(--space-xl) auto!important}.blog-app-root .listing-notes ul li .date{font-size:var(--blog-font-size-meta);color:var(--color-blog-gray-275)}.dark .blog-app-root .listing-notes{color:var(--color-blog-gray-220)}.dark .blog-app-root .listing-notes.short-feed-full .summary{color:var(--color-white)}.dark .blog-app-root .listing-notes.short-feed-full .\!summary{color:var(--color-white)!important}.blog-app-root h1{font-size:var(--font-size-2xl);line-height:var(--blog-line-height-tight);margin-top:0}@media (max-width:768px){.blog-app-root h1{font-size:var(--blog-font-size-h1-mobile)}}.blog-app-root .note-wrapper{position:relative;margin-top:var(--space-xl);overflow-wrap:break-word}.blog-app-root .note-wrapper h1,.blog-app-root .note-wrapper h2,.blog-app-root .note-wrapper h3{margin-top:var(--blog-space-heading-stack);margin-bottom:var(--blog-space-heading-gap)}.blog-app-root .note-wrapper h1:first-of-type{margin-top:0}.blog-app-root .note-wrapper .content{margin-top:var(--space-lg)}.blog-app-root .note-wrapper .\!content{margin-top:var(--space-lg)!important}.blog-app-root .note-wrapper p{line-height:var(--blog-line-height-body);margin-top:0}.blog-app-root .note-wrapper .date{display:block;margin-bottom:var(--space-xs);font-size:var(--blog-font-size-meta);color:var(--color-blog-gray-275)}.blog-app-root .note-wrapper img{display:block;margin:var(--space-xl) auto;max-width:100%;border-radius:var(--radius-sm)}.blog-app-root .note-wrapper img.note-banner{margin:var(--blog-space-media-stack-start) auto var(--blog-space-media-stack-end);transform:scale(1.1)}.blog-app-root .note-wrapper audio,.blog-app-root .note-wrapper video{width:100%;margin:var(--space-xl) auto}.blog-app-root .footer{margin-top:var(--blog-space-stack-xxl);padding-top:var(--space-xl);margin-bottom:var(--space-xl);border-top:var(--space-xs) solid var(--color-blog-gray-170);font-size:var(--blog-font-size-meta);text-align:center}.blog-app-root .footer,.blog-app-root .footer a{color:var(--color-blog-gray-220)}.dark .blog-app-root .footer{border-top:var(--space-xs) solid var(--color-card)}.dark .blog-app-root .footer,.dark .blog-app-root .footer a,.dark .blog-app-root .footer a:visited{color:var(--color-blog-gray-440)}.blog-app-root zap-threads{font-size:var(--ztr-font-size)}.blog-app-root #ztr-content,.blog-app-root #ztr-content img{max-width:100%}.blog-app-root #ztr-root{display:flex;flex-direction:column;font-family:var(--ztr-font);font-size:var(--ztr-font-size);color:var(--ztr-text-color);border:var(--border-width-hairline) solid transparent;word-wrap:break-word;margin-top:4em;line-height:1.2em}.blog-app-root #ztr-subtitle{font-size:1.2em;color:var(--color-blog-gray-500)}.blog-app-root #ztr-root a{color:var(--ztr-link-color);text-decoration:none}.blog-app-root .ztr-comment{position:relative;margin:0;padding:0;background-color:var(--ztr-background-color)}.blog-app-root .ztr-comment:first-child{border-top-left-radius:.3em;border-top-right-radius:.3em}.blog-app-root .ztr-comment:last-child{border-bottom-left-radius:.3em;border-bottom-right-radius:.3em}.blog-app-root .ztr-comment-body{padding:1em}.blog-app-root .ztr-comment-info-wrapper{display:flex;justify-content:space-between;align-items:center}.blog-app-root .ztr-comment-info{display:flex;align-items:center}.blog-app-root .ztr-comment-info-picture{width:3.5em}.blog-app-root ul.ztr-comment-info-items{display:flex;align-items:center;list-style:none;margin:0;padding:0;font-size:.9em}.blog-app-root ul.ztr-comment-info-items li{display:inline-block;cursor:default;padding-right:.5em}.blog-app-root ul.ztr-comment-info-items li a{font-weight:600}.blog-app-root .ztr-comment-info-author a{font-size:1.2em;padding-right:.2em}.blog-app-root .ztr-comment-info-dots{cursor:pointer}.blog-app-root .ztr-comment-info-separator{width:.5em}.blog-app-root .ztr-comment-info-picture img{width:2em;height:2em;border-radius:50%;padding:.5em;position:relative;display:block;-o-object-fit:cover;object-fit:cover}.blog-app-root #ztr-content,.blog-app-root .ztr-comment-text{margin-bottom:.75em;padding:0 .8em 0 3.5em;line-height:1.5em;line-break:loose;word-break:break-word;overflow:hidden;max-width:var(--layout-blog-max-width)}.blog-app-root .ztr-comment-text p{margin:0 0 .5em}.blog-app-root .ztr-comment-text code{font-size:1.1em;margin:0 .2em}.blog-app-root .ztr-comment-text pre,.blog-app-root .ztr-info-pane pre{white-space:pre-wrap;white-space:-moz-pre-wrap;word-wrap:break-word}.blog-app-root .ztr-comment-text a:hover{text-decoration:underline}.blog-app-root .ztr-comment-text img{max-width:100%}.blog-app-root .ztr-comment-text .warning{margin-top:0;font-size:.8em;display:flex;align-items:center}.blog-app-root .ztr-comment-text .warning svg{height:1.2em;fill:var(--color-blog-amber-500);padding-right:.7em}.blog-app-root .ztr-comment-replies{margin-left:2em}.blog-app-root .highlight p{background:var(--color-blog-amber-400);color:var(--color-blog-gray-800);display:inline;padding:.2em}.blog-app-root .ztr-comment-expand{display:flex;justify-content:center}.blog-app-root .ztr-comment-expand span{margin:1em 0 1em .35em;cursor:pointer}.blog-app-root .ztr-comment-expand,.blog-app-root ul.ztr-comment-actions{display:flex;align-items:center;list-style:none;margin:0;padding:0 0 0 3.5em;font-weight:600;-webkit-user-select:none;-moz-user-select:none;user-select:none}.blog-app-root ul.ztr-comment-actions li{display:inline-flex;align-items:center;text-align:center;padding:0 2em 0 0;cursor:pointer}.blog-app-root ul.ztr-comment-actions li span{padding:.25em .25em 0;color:var(--ztr-icon-color)}.blog-app-root #ztr-root svg{fill:var(--ztr-icon-color);width:1.1em;height:1.1em}.blog-app-root .ztr-comment-action-reply:hover svg{fill:var(--color-blog-purple-accent)}.blog-app-root .ztr-comment-action-reply:hover span{color:var(--color-blog-purple-accent)}.blog-app-root .ztr-comment-action-zap:hover svg{fill:var(--color-blog-amber-500)}.blog-app-root .ztr-comment-action-zap:hover span{color:var(--color-blog-amber-500)}.blog-app-root .ztr-comment-action-like:hover svg{fill:var(--color-blog-orange-600)}.blog-app-root .ztr-comment-action-like:hover span{color:var(--color-blog-orange-600)}.blog-app-root .ztr-reply-form{padding:0 .5em 0 3.5em}.blog-app-root .ztr-reply-form textarea{font-family:var(--ztr-font);font-size:1.1em;line-height:1.4;color:var(--color-blog-gray-800);background-color:var(--color-blog-neutral-50);border:var(--border-width-hairline) solid var(--color-blog-gray-220);outline:none;width:calc(100% - 1.5em);padding:.7em;margin:.5em 0;height:4em;border-radius:.2em;min-height:4em;resize:vertical}.blog-app-root .ztr-reply-form:disabled{opacity:65%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.blog-app-root .ztr-reply-controls{display:flex;align-items:center;justify-content:flex-end}.blog-app-root .ztr-reply-controls span{font-weight:700;font-size:.85em;margin-right:1em;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:default}.blog-app-root .ztr-reply-error{color:var(--color-blog-error)}.blog-app-root .ztr-reply-controls button{font-family:var(--ztr-font);-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;padding:.5em 1em;border-radius:.2em;font-size:.85em;font-weight:600;cursor:pointer}.blog-app-root .ztr-reply-login-button{color:var(--color-white);background-color:var(--ztr-login-button-color);margin-left:1em}.blog-app-root .ztr-reply-button{color:var(--ztr-text-color);display:flex;align-items:center;background-color:var(--ztr-background-color)}.blog-app-root .ztr-info-pane{padding:0 .5em 1em 3.5em}.blog-app-root .ztr-info-pane pre{font-size:.8em}.blog-app-root .ztr-spinner{width:1.2em;height:1.2em;padding:.9em;animation:ztr-rotate 4s linear infinite}.blog-app-root .ztr-reply-button:disabled{opacity:65%;pointer-events:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.blog-app-root .ztr-spinner .path{stroke:var(--ztr-text-color);stroke-linecap:round;animation:ztr-dash 1.5s ease-in-out infinite}@keyframes ztr-rotate{to{transform:rotate(1turn)}}@keyframes ztr-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}.blog-app-root .ztr-comment-new .ztr-reply-form{margin:.5em 0;padding:0}.blog-app-root .ztr-comment-new .ztr-comment-body{padding:0}.blog-app-root .ztr-comment-new .ztr-comment-actions{font-size:1.1em;padding:0}@media (prefers-color-scheme:dark){.blog-app-root .ztr-spinner .path{stroke:var(--ztr-text-color,var(--color-blog-gray-200))}.blog-app-root .ztr-comment,.blog-app-root .ztr-reply-button{background-color:var(--ztr-background-color,hsla(0,0%,100%,.06))}.blog-app-root .ztr-reply-login-button{color:var(--color-blog-gray-800);background-color:var(--ztr-login-button-color,var(--color-blog-gray-200))}.blog-app-root #ztr-root svg{fill:var(--ztr-icon-color,var(--color-blog-gray-200))}.blog-app-root ul.ztr-comment-actions li span{color:var(--ztr-icon-color)}.blog-app-root .ztr-comment-action-reply:hover svg{fill:var(--color-blog-purple-muted)}.blog-app-root .ztr-comment-action-reply:hover span{color:var(--color-blog-purple-muted)}}.blog-app-root .loader-container.svelte-181fgen{display:flex;align-items:center;justify-content:center}.blog-app-root .loader.svelte-181fgen{display:inline-block;width:var(--blog-loader-dimension-lg);height:var(--blog-loader-dimension-lg);opacity:0;animation:svelte-181fgen-fade-in .5s .4s forwards,svelte-181fgen-loader-animation 2s linear .4s infinite}.blog-app-root .loader.svelte-181fgen:after{content:" ";display:block;width:var(--blog-loader-dimension-md);height:var(--blog-loader-dimension-md);margin:var(--space-xs);border-radius:50%;border:var(--blog-loader-border-width) solid var(--color-blog-gray-275);border-color:var(--color-blog-gray-275) transparent var(--color-blog-gray-275) transparent;animation:svelte-181fgen-loader-animation 2s linear infinite}@keyframes svelte-181fgen-loader-animation{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes svelte-181fgen-fade-in{to{opacity:1}}.dark .blog-app-root .loader.svelte-181fgen:after{border:var(--blog-loader-border-width) solid var(--color-card);border-color:var(--color-card) transparent var(--color-card) transparent}.blog-body #theme-toggle.svelte-bxrhh.svelte-bxrhh{display:none}.blog-body #theme-toggle.svelte-bxrhh+label.svelte-bxrhh{display:inline-block;cursor:pointer;height:var(--space-md);width:var(--space-md);position:absolute;top:var(--space-md);right:var(--space-2xl);border-radius:var(--radius-toggle-thumb);transition-duration:.3s;content:""}@media (max-width:768px){.blog-body #theme-toggle.svelte-bxrhh+label.svelte-bxrhh{right:var(--space-md)}}.blog-body #theme-toggle.svelte-bxrhh:not(:checked)+label.svelte-bxrhh{background-color:var(--color-blog-gray-180)}.blog-body #theme-toggle.svelte-bxrhh:checked+label.svelte-bxrhh{background-color:transparent;box-shadow:var(--blog-theme-toggle-shadow)}.blog-app-root .ztr-nowrap{white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.\!visible{visibility:visible!important}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.bottom-4{bottom:1rem}.left-0{left:0}.left-4{left:1rem}.right-0{right:0}.right-3{right:.75rem}.right-4{right:1rem}.top-0{top:0}.top-1\/2{top:50%}.top-3{top:.75rem}.isolate{isolation:isolate}.z-10{z-index:10}.z-overlay-floating{z-index:var(--z-overlay-floating)}.z-overlay-toast{z-index:var(--z-overlay-toast)}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-4{margin-top:1rem;margin-bottom:1rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-8{margin-top:2rem;margin-bottom:2rem}.-ml-2{margin-left:-.5rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.ml-auto{margin-left:auto}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-sm{margin-top:var(--space-sm)}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-1{height:.25rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-2xl{height:var(--space-2xl)}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-auto{height:auto}.h-full{height:100%}.max-h-modal-body{max-height:var(--modal-body-max-height)}.max-h-modal-pane{max-height:var(--modal-pane-max-height)}.max-h-modal-sheet{max-height:var(--modal-sheet-max-height)}.max-h-modal-shell{max-height:var(--modal-shell-max-height)}.max-h-profile-history{max-height:var(--profile-history-max-height)}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-16{width:4rem}.w-20{width:5rem}.w-24{width:6rem}.w-4{width:1rem}.w-44{width:11rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-72{width:18rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-auto{width:auto}.w-full{width:100%}.min-w-0{min-width:0}.min-w-full{min-width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-5xl{max-width:64rem}.max-w-docs{max-width:var(--layout-docs-max-width)}.max-w-md{max-width:28rem}.max-w-none{max-width:none}.max-w-popover-safe{max-width:var(--popover-inline-safe-max)}.max-w-sm{max-width:24rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.translate-x-1{--tw-translate-x:0.25rem}.translate-x-1,.translate-x-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-1\/2{--tw-translate-x:50%}.translate-x-5{--tw-translate-x:1.25rem}.rotate-90,.translate-x-5{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-90{--tw-rotate:90deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-wait{cursor:wait}.resize-y{resize:vertical}.resize{resize:both}.scroll-mt-24{scroll-margin-top:6rem}.scroll-pt-24{scroll-padding-top:6rem}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-sm{gap:var(--space-sm)}.gap-xl{gap:var(--space-xl)}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-border-translucent>:not([hidden])~:not([hidden]){border-color:var(--border-overlay)}.self-start{align-self:flex-start}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:var(--radius-full)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-lg{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-border{border-color:var(--border-default)}.border-border-translucent{border-color:var(--border-overlay)}.border-border-translucent-bright{border-color:var(--color-border-translucent-bright)}.border-border-translucent-medium{border-color:var(--color-border-translucent-medium)}.border-info{border-color:var(--color-info)}.border-overlay{border-color:var(--border-overlay)}.border-overlay-strong{border-color:var(--border-overlay-strong)}.border-status-danger-border{border-color:var(--status-danger-border)}.border-status-info-border{border-color:var(--status-info-border)}.border-status-success-border{border-color:var(--status-success-border)}.border-status-warning-border{border-color:var(--status-warning-border)}.border-surface-strong{border-color:var(--border-strong)}.border-warning-strong{border-color:var(--status-warning-strong)}.border-opacity-20{--tw-border-opacity:0.2}.bg-blog-neutral-100{background-color:var(--color-blog-neutral-100)}.bg-blog-neutral-50{background-color:var(--color-blog-neutral-50)}.bg-info{background-color:var(--color-info)}.bg-overlay-muted{background-color:var(--surface-overlay-muted)}.bg-overlay-panel{background-color:var(--surface-overlay-panel)}.bg-overlay-panel-soft{background-color:var(--surface-overlay-panel-soft)}.bg-overlay-strong{background-color:var(--surface-overlay-strong)}.bg-panel{background-color:var(--surface-panel)}.bg-status-danger-surface{background-color:var(--status-danger-surface)}.bg-status-info-surface{background-color:var(--status-info-surface)}.bg-status-success-surface{background-color:var(--status-success-surface)}.bg-status-warning-surface{background-color:var(--status-warning-surface)}.bg-surface{background-color:var(--surface-base)}.bg-surface-alt{background-color:var(--surface-alt)}.bg-transparent{background-color:transparent}.bg-warning-surface{background-color:var(--status-warning-surface)}.bg-white{background-color:var(--color-white)}.bg-overlay-banner{background-image:var(--surface-overlay-banner-gradient)}.stroke-border-translucent{stroke:var(--border-overlay)}.stroke-current{stroke:currentColor}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-lg{padding:var(--space-lg)}.p-md{padding:var(--space-md)}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-lg{padding-left:var(--space-lg);padding-right:var(--space-lg)}.px-md{padding-left:var(--space-md);padding-right:var(--space-md)}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.py-md{padding-top:var(--space-md);padding-bottom:var(--space-md)}.py-xl{padding-top:var(--space-xl);padding-bottom:var(--space-xl)}.pb-2{padding-bottom:.5rem}.pb-8{padding-bottom:2rem}.pl-5{padding-left:1.25rem}.pr-1{padding-right:.25rem}.pt-1{padding-top:.25rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.font-mono{font-family:var(--font-family-mono)}.font-sans{font-family:var(--font-family-sans)}.text-2xl{font-size:var(--font-size-2xl);line-height:var(--line-height-relaxed)}.text-2xs{font-size:var(--font-size-2xs);line-height:var(--line-height-tight)}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-3xs{font-size:var(--font-size-3xs);line-height:var(--line-height-tight)}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[0\.75rem\]{font-size:.75rem}.text-base{font-size:var(--font-size-base)}.text-base,.text-lg{line-height:var(--line-height-base)}.text-lg{font-size:var(--font-size-lg)}.text-sm{font-size:var(--font-size-sm);line-height:var(--line-height-snug)}.text-xl{font-size:var(--font-size-xl);line-height:var(--line-height-relaxed)}.text-xs{font-size:var(--font-size-xs);line-height:var(--line-height-tight)}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.normal-case{text-transform:none}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-extra-wide{letter-spacing:var(--tracking-extra-wide)}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.text-blog-gray-500{color:var(--color-blog-gray-500)}.text-blog-gray-700{color:var(--color-blog-gray-700)}.text-blog-gray-800{color:var(--color-blog-gray-800)}.text-blog-gray-900{color:var(--color-blog-gray-900)}.text-critical{color:var(--color-critical)}.text-critical-strong{color:var(--color-critical-strong)}.text-info{color:var(--color-info)}.text-info-strong{color:var(--color-info-strong)}.text-muted{color:var(--text-muted)}.text-muted-strong{color:var(--text-muted-strong)}.text-primary{color:var(--text-primary)}.text-status-danger{color:var(--status-danger)}.text-status-danger-on{color:var(--status-danger-on)}.text-status-info{color:var(--status-info)}.text-status-info-on{color:var(--status-info-on)}.text-status-neutral{color:var(--status-neutral)}.text-status-private-on{color:var(--status-private-on)}.text-status-success{color:var(--status-success)}.text-status-success-on{color:var(--status-success-on)}.text-status-warning{color:var(--status-warning)}.text-status-warning-on{color:var(--status-warning-on)}.text-subtle{color:var(--text-subtle)}.text-text{color:var(--text-primary)}.text-text-frosted{color:var(--text-frosted-primary)}.text-text-strong{color:var(--color-text-strong)}.text-warning-strong{color:var(--status-warning-strong)}.underline{text-decoration-line:underline}.decoration-dotted{text-decoration-style:dotted}.underline-offset-2{text-underline-offset:2px}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-80{opacity:.8}.shadow-lg{--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.\!filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-transform{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-fast{transition-duration:var(--motion-duration-fast)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@media (max-width:640px){.bv-grid-video{gap:var(--space-md);grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){:root{--motion-duration-fast:0s;--motion-duration-base:0s;--motion-duration-slow:0s;--modal-motion-duration:0s}*,:after,:before{animation-delay:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;animation-timing-function:linear!important;transition-delay:0s!important;transition-duration:0s!important;transition-timing-function:linear!important}#app,#playerModal .player-modal__content,#sidebar,.btn,.btn-ghost,.card,.card[data-motion=enter],.fade-in,.icon-button,.menu__item,.modal-nav,.notification-banner,.notification-portal,.popover-panel,.popover__panel,.progress-bar-fill,.sidebar-collapse-toggle,.sidebar-collapse-toggle__icon,.sidebar-dropup-panel,.sidebar-dropup-trigger,.sidebar-dropup-trigger__chevron,.sidebar-loading-indicator,.sidebar-loading-wrapper,.sidebar-nav,.sidebar-nav-link,.status-banner .status-spinner,.status-spinner--inline,.torrent-toast,.video-modal__panel,.watch-history-card,.watch-history-card__action,.watch-history-card__creatorAvatar,.watch-history-card__creatorName,.watch-history-card__title{transition-property:none!important}.popover-panel,.popover__panel{transform:none!important}.popover-panel[data-state=open],.popover__panel[data-state=open]{opacity:1}.popover-panel[data-state=closed],.popover__panel[data-state=closed]{opacity:0}.card[data-motion=enter],.fade-in,[data-video-thumbnail][data-thumbnail-loaded=true]{opacity:1;animation:none!important}.notification-banner,.status-banner .status-spinner,.status-spinner--inline,.torrent-toast{animation:none!important}.notification-portal{transform:none!important;opacity:1!important}}@media (min-width:768px){.md\:flex#playerModal{display:flex}}.last\:border-b-0:last-child{border-bottom-width:0}.hover\:border-status-danger-border:hover{border-color:var(--status-danger-border)}.hover\:bg-overlay-panel:hover{background-color:var(--surface-overlay-panel)}.hover\:bg-panel-hover:hover{background-color:var(--surface-panel-hover)}.hover\:bg-status-warning-surface:hover{background-color:var(--status-warning-surface)}.hover\:text-info-strong:hover{color:var(--color-info-strong)}.hover\:text-text:hover{color:var(--text-primary)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-90:hover{opacity:.9}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-info:focus{--tw-ring-color:var(--color-info)}.focus\:ring-status-info:focus{--tw-ring-color:var(--status-info)}.focus\:ring-status-success:focus{--tw-ring-color:var(--status-success)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus\:ring-offset-surface:focus{--tw-ring-offset-color:var(--surface-base)}.focus-visible\:bg-primary:focus-visible{background-color:var(--color-primary)}.focus-visible\:outline:focus-visible{outline-style:solid}.focus-visible\:outline-2:focus-visible{outline-width:2px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-info:focus-visible{outline-color:var(--color-info)}.focus-visible\:outline-status-warning-border:focus-visible{outline-color:var(--status-warning-border)}@media (min-width:640px){.sm\:col-span-2{grid-column:span 2/span 2}.sm\:w-1\/3{width:33.333333%}.sm\:w-auto{width:auto}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:flex-wrap{flex-wrap:wrap}.sm\:items-start{align-items:flex-start}.sm\:items-end{align-items:flex-end}.sm\:items-center{align-items:center}.sm\:justify-end{justify-content:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:self-end{align-self:flex-end}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-0{padding-top:0;padding-bottom:0}.sm\:pt-8{padding-top:2rem}}@media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:flex{display:flex}.md\:h-64{height:16rem}.md\:w-blog-fluid{width:var(--blog-layout-fluid-width)}.md\:max-w-blog-shell{max-width:var(--blog-layout-max-width)}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-end{align-items:flex-end}.md\:items-center{align-items:center}.md\:justify-end{justify-content:flex-end}.md\:gap-md{gap:var(--space-md)}.md\:px-0{padding-left:0;padding-right:0}}@media (min-width:1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:items-start{align-items:flex-start}.lg\:justify-between{justify-content:space-between}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:text-right{text-align:right}}@media (prefers-color-scheme:dark){.dark\:text-blog-gray-200{color:var(--color-blog-gray-200)}.dark\:text-blog-gray-300{color:var(--color-blog-gray-300)}} \ No newline at end of file +:root{--surface-base:var(--color-surface);--surface-alt:var(--color-surface-alt);--surface-raised:var(--color-card);--surface-raised-private:var(--color-card-private);--surface-raised-critical:var(--color-card-critical);--surface-panel:var(--color-panel);--surface-panel-hover:var(--color-panel-hover);--surface-sunken:var(--color-surface-sunken);--surface-muted:var(--color-surface-muted);--surface-veil:var(--color-overlay-veil);--surface-inverse:var(--color-page);--surface-overlay:var(--color-overlay);--surface-overlay-muted:var(--color-overlay-muted);--surface-overlay-strong:var(--color-overlay-strong);--surface-overlay-darker:var(--color-overlay-darker);--surface-overlay-black:var(--color-overlay-black);--surface-overlay-banner:var(--surface-overlay-banner-bottom);--surface-overlay-banner-bottom:var(--color-overlay-banner-bottom);--surface-overlay-banner-transparent:var(--color-overlay-banner-transparent);--surface-overlay-banner-gradient:linear-gradient(to top,var(--surface-overlay-banner-bottom) 0%,var(--surface-overlay-banner-transparent) 60%,var(--surface-overlay-banner-transparent) 100%);--surface-overlay-panel:var(--color-overlay-panel);--surface-overlay-panel-soft:var(--color-overlay-panel-soft);--surface-overlay-panel-tint:var(--color-overlay-panel-tint);--surface-overlay-panel-glass:var(--color-overlay-panel-glass);--surface-overlay-panel-glass-soft:var(--color-overlay-panel-glass-soft);--surface-modal-backdrop:var(--color-modal-backdrop);--surface-modal:var(--color-modal-surface);--blur-modal-backdrop:18px;--blur-modal-alert:14px;--blur-thumbnail-blur:18px;--modal-nav-backdrop-blur:6px;--border-default:var(--color-border);--border-subtle:var(--color-border-subtle);--border-strong:var(--color-border-translucent-stronger);--border-overlay:var(--color-border-translucent);--border-overlay-strong:var(--color-border-translucent-strongest);--border-overlay-glow:var(--color-border-translucent-glow);--border-neutral-soft:var(--color-border-neutral-soft);--border-info-soft:var(--color-border-info-soft);--border-sidebar-strong:var(--color-border-sidebar-strong);--border-width-hairline:1px;--border-width-fine:0.5px;--text-primary:var(--color-text);--text-inverse:var(--color-text-inverse);--text-muted:var(--color-text-muted);--text-muted-strong:var(--color-muted-strong);--text-subtle:var(--color-subtle-text);--text-frosted-primary:var(--color-text-frosted);--text-frosted-strong:var(--color-text-frosted-strong);--text-frosted-soft:var(--color-text-frosted-soft);--status-info:var(--color-info);--status-info-strong:var(--color-info-strong);--status-info-surface:var(--color-info-glass);--status-info-border:var(--color-info-border);--status-info-on:var(--color-info-on);--status-success:var(--color-success);--status-success-strong:var(--color-success-strong);--status-success-surface:var(--color-success-surface);--status-success-border:var(--color-success-border);--status-success-on:var(--color-success-on);--status-warning:var(--color-warning);--status-warning-strong:var(--color-warning-strong);--status-warning-surface:var(--color-warning-surface);--status-warning-border:var(--color-warning-border);--status-warning-on:var(--color-warning-on);--status-danger:var(--color-critical);--status-danger-strong:var(--color-critical-strong);--status-danger-surface:var(--color-danger-surface);--status-danger-border:var(--color-danger-border);--status-danger-on:var(--color-danger-on);--status-private:var(--color-private);--status-private-strong:var(--color-private-strong);--status-private-surface:var(--color-private-surface);--status-private-border:var(--color-private-border);--status-private-on:var(--color-private-on);--status-neutral:var(--color-muted);--status-neutral-strong:var(--color-muted-strong);--status-neutral-surface:var(--color-neutral-surface);--status-neutral-border:var(--color-neutral-border);--status-neutral-on:var(--color-neutral-on);--scrollbar-width:0.5rem;--scrollbar-track:var(--color-white-soft);--scrollbar-thumb:var(--color-white-softer);--scrollbar-thumb-hover:var(--color-white-softest);--z-overlay-nav:60;--z-overlay-floating:70;--z-overlay-popover:140;--z-overlay-toast:180;--z-sidebar-overlay:10;--z-sidebar:20;--z-modal-root:100;--z-modal-overlay:110;--z-modal-content:120;--z-modal-player:130;--overlay-backdrop-color:var(--color-overlay-backdrop);--overlay-backdrop-blur:12px;--sidebar-width-expanded:16rem;--sidebar-width-collapsed:4rem;--sidebar-width:var(--sidebar-width-expanded);--sidebar-control-size:2.75rem;--sidebar-content-gap:1rem;--space-sidebar-shell-inline:var(--space-lg);--space-sidebar-shell-block-start:var(--space-lg);--space-sidebar-shell-block-end:1.75rem;--space-sidebar-scroll-gap:1.75rem;--space-sidebar-panel-gap:1.35rem;--space-sidebar-panel-padding-block:1.35rem;--space-sidebar-panel-padding-inline:1.1rem;--space-sidebar-footer-gap:0.85rem;--space-sidebar-trigger-padding-block:0.78rem;--space-sidebar-popover-offset:0.85rem;--space-sidebar-popover-padding-block:0.85rem;--space-sidebar-popover-padding-inline:0.65rem;--space-sidebar-popover-gap:0.45rem;--space-sidebar-dropup-scroll-reserve:calc(var(--scrollbar-thin-width) + var(--space-xs) + var(--space-2xs)/2);--sidebar-dropup-max-height:18rem;--space-sidebar-nav-padding-block:0.7rem;--space-sidebar-subnav-padding-block:0.55rem;--space-sidebar-nav-translate:0.35rem;--grid-card-min-width:20rem;--popover-backdrop-blur:12px;--overlay-panel-radius:var(--radius-lg);--overlay-panel-shadow:var(--shadow-lg);--overlay-panel-padding-inline:var(--popup-padding-inline);--overlay-panel-padding-block:var(--popup-padding-block);--toast-translate:-1.5rem;--sidebar-mobile-gutter:3rem;--popup-padding-inline:1rem;--popup-padding-block:0.75rem;--video-modal-primary-fr:1.85fr;--video-modal-secondary-min:260px;--video-modal-secondary-fr:1fr;--revert-modal-sidebar-min:240px;--revert-modal-sidebar-width:280px;--popover-inline-safe-max:calc(100vw - var(--space-xl));--progress-height-sm:0.25rem;--progress-height-md:0.5rem;--progress-radius:var(--radius-full);--progress-track-color:var(--color-border-subtle);--progress-fill-color:var(--color-info);--progress-transition-duration:var(--motion-duration-fast);--progress-transition-ease:var(--motion-ease-out);--space-4xs:0.0625rem;--space-3xs:0.125rem;--space-2xs:0.25rem;--space-xs:0.5rem;--space-xs-snug:0.4rem;--space-sm:0.75rem;--space-md:1rem;--space-md-plus:1.25rem;--space-lg:1.5rem;--space-xl:2rem;--space-xl-compact:2.25rem;--space-xl-plus:2.5rem;--space-2xl:3rem;--space-2xl-plus:3.5rem;--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-full:9999px;--radius-modal-xl:1.75rem;--radius-sidebar-shell:1.5rem;--radius-sidebar-panel:1.1rem;--radius-sidebar-nav:0.95rem;--radius-toggle-thumb:0.5625rem;--menu-min-width:12rem;--modal-max-width:62.5rem;--modal-sheet-inline-max:var(--modal-max-width);--modal-shell-max-height:90vh;--modal-sheet-max-height:92vh;--modal-body-max-height:calc(92vh - 4rem);--modal-pane-max-height:48vh;--modal-pane-min-height:20rem;--profile-modal-nav-min-width:max-content;--profile-modal-nav-max-width:max-content;--profile-modal-scrollbar-offset:var(--space-2xs);--modal-embed-height:80vh;--profile-history-max-height:26.25rem;--status-log-min-height:5rem;--layout-player-max-width:68.75rem;--layout-docs-max-width:92.5rem;--icon-size-sm:var(--font-size-lg);--icon-size-md:var(--space-md-plus);--icon-size-lg:var(--space-xl-plus);--avatar-size-lg:var(--space-2xl-plus);--form-textarea-min-height:8rem;--scrollbar-thin-width:0.4rem;--modal-progress-height:calc(var(--space-3xs)*3);--video-modal-action-min-width:2.75rem;--outline-thick-width:0.1875rem;--icon-button-ring-width:var(--outline-thick-width);--form-select-icon-offset:var(--space-sm);--form-select-icon-gap:var(--space-xs-snug);--form-select-icon-hit-area:var(--space-xl-plus);--form-select-icon-size:0.6rem;--form-select-divider-width:var(--border-width-hairline);--form-checkbox-checkmark-offset:calc(var(--space-3xs)*-1);--offscreen-offset:-9999px;--motion-card-enter-translate:var(--space-xs);--motion-fade-in-translate:var(--space-md-plus);--shadow-sm:0 0.0625rem 0.125rem 0 var(--color-shadow-floating);--shadow-md:0 0.25rem 0.375rem -0.0625rem var(--color-shadow-floating);--shadow-lg:0 0.625rem 0.9375rem -0.1875rem var(--color-shadow-elevated);--shadow-modal:0 2.75rem 6rem -1.25rem var(--color-shadow-modal);--shadow-sidebar-shell:0 1.875rem 3.75rem -1.5rem var(--color-shadow-sidebar);--shadow-sidebar-accent:0 1.65rem 3.25rem -1.35rem var(--color-sidebar-glow);--shadow-sidebar-trigger:0 1.25rem 2.5rem -1.35rem var(--color-shadow-panel);--shadow-sidebar-dropup:0 1.75rem 3.25rem -1.45rem var(--color-sidebar-glow);--shadow-sidebar-panel:0 2.25rem 4.5rem -1.85rem var(--color-shadow-sidebar);--shadow-sidebar-focus-ring:0 0 0 0.125rem var(--color-sidebar-glow),0 0 0 0.25rem var(--color-sidebar-hover-strong);--shadow-popover-zap:0 22px 48px -18px var(--color-shadow-intense);--shadow-video-modal:0 1rem 2.25rem var(--color-shadow-elevated);--font-family-sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;--font-family-mono:"Fira Code","SFMono-Regular",ui-monospace,monospace;--font-size-4xs:0.65rem;--font-size-3xs:0.6875rem;--font-size-2xs:0.7rem;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.5rem;--font-size-2xl:2rem;--font-size-xl-plus:1.875rem;--font-size-modal-title-base:1.25rem;--font-size-sidebar-nav:0.95rem;--font-size-sidebar-subnav:0.85rem;--font-size-sidebar-trigger:0.9rem;--line-height-tight:1.1;--line-height-snug:1.25;--line-height-base:1.5;--line-height-relaxed:1.75;--tracking-extra-wide:0.2em;--grid-border-width:calc(var(--space-2xs)/4);--grid-canvas-padding-top:var(--grid-border-width);--grid-viewport-min-height:calc(var(--space-xl) - var(--space-sm));--grid-cell-padding-block:var(--space-sm);--grid-cell-padding-inline:var(--space-md);--grid-header-font-size:var(--font-size-xs);--grid-header-letter-spacing:0.08em;--grid-overlay-margin:10%;--grid-overlay-padding-block:var(--space-md);--grid-overlay-padding-inline:var(--space-xl);--grid-overlay-radius:var(--radius-lg);--grid-overlay-font-size:var(--font-size-lg);--grid-overlay-text-opacity:0.66;--grid-resizer-width:calc(var(--space-2xs)*1.25);--grid-resize-overlay-width:var(--grid-border-width);--grid-sort-indicator-size:calc(var(--space-lg) - var(--space-2xs));--grid-sort-indicator-offset:var(--space-xs);--grid-sort-indicator-stroke:calc(var(--space-2xs)/2);--grid-sort-indicator-thickness:var(--grid-border-width);--notify-padding-block:var(--space-md);--notify-padding-inline:var(--space-2xl);--notify-font-size:var(--font-size-base);--notify-dismiss-size:calc(var(--space-xl) + var(--space-xs));--notify-dismiss-size-compact:calc(var(--space-lg) + var(--space-2xs));--notify-dismiss-font-size:var(--font-size-sm);--notify-dismiss-radius:var(--radius-full);--notify-dismiss-color:var(--color-subtle);--notify-dismiss-background:var(--color-overlay-panel);--notify-dismiss-background-hover:var(--color-overlay-panel-soft);--z-notify:1200;--motion-duration-fast:120ms;--motion-duration-base:160ms;--motion-duration-slow:280ms;--motion-ease-out:cubic-bezier(0.16,1,0.3,1);--motion-ease-in-out:cubic-bezier(0.4,0,0.2,1);--modal-motion-duration:var(--motion-duration-base)}:root[data-theme=light]{--color-page:#f7f8fc;--color-page-alt:#f2f4f8;--color-surface:#fff;--color-surface-alt:#f8fafc;--color-bg:var(--color-surface);--color-card:#fff;--color-card-private:#f3ecff;--color-card-critical:#ffecee;--color-panel:#fcfdff;--color-panel-hover:#eff2f9;--color-border:#d2dbec;--color-border-subtle:#e5eaf2;--color-accent:#6366f1;--color-accent-strong:#4f46e5;--color-accent-pressed:#4338ca;--color-primary:var(--color-accent-strong);--color-secondary:var(--color-accent);--color-logo-accent:var(--color-accent-strong);--color-logo-wordmark:#28364d;--color-logo-wordmark-inverse:var(--color-white);--color-logo-background:#0f172a;--color-logo-background-inverse:var(--color-white);--color-info:#3b82f6;--color-info-strong:#2563eb;--color-info-pressed:#1d4ed8;--color-info-glass:rgba(59,130,246,.14);--color-info-border:rgba(59,130,246,.35);--color-info-on:#e3f2ff;--color-muted-strong:#475569;--color-text:#181f2c;--color-text-strong:#0c101a;--color-text-inverse:#fff;--color-text-muted:#667085;--color-muted:#8892a6;--color-muted-alt:#788296;--color-subtle-text:#8892a6;--color-subtle:#f3f5fa;--color-surface-sunken:#e8ebf4;--color-surface-muted:#ecf0f9;--color-critical:#dc3646;--color-critical-strong:#b92037;--color-danger-surface:#fce2e6;--color-danger-border:rgba(220,54,70,.35);--color-danger-on:#60121f;--color-warning:#eab308;--color-warning-strong:#ca8a04;--color-warning-surface:rgba(253,224,71,.35);--color-warning-border:rgba(234,179,8,.35);--color-warning-glass:rgba(253,224,71,.18);--color-warning-on:#5c3702;--color-success:#16a34a;--color-success-strong:#15803d;--color-success-surface:#defaec;--color-success-border:rgba(34,197,94,.3);--color-success-on:#125430;--color-private:#8b5cf6;--color-private-strong:#7c3aed;--color-private-surface:#ede9fe;--color-private-border:rgba(139,92,246,.32);--color-private-on:#4a1d96;--color-neutral-700:#475569;--color-neutral-600:#667085;--color-neutral-surface:#e8ecf4;--color-neutral-border:#cdd5e2;--color-neutral-on:#3e485c;--color-white:#fff;--color-black:#000;--color-overlay:rgba(15,23,42,.3);--color-overlay-black:rgba(15,23,42,.7);--color-overlay-muted:rgba(60,75,105,.18);--color-overlay-strong:rgba(15,23,42,.56);--color-overlay-darker:rgba(12,18,32,.68);--color-overlay-panel:rgba(248,250,255,.92);--color-overlay-panel-soft:rgba(244,247,255,.78);--color-overlay-panel-tint:rgba(146,170,211,.24);--color-overlay-panel-glass:hsla(0,0%,100%,.85);--color-overlay-panel-glass-soft:rgba(246,249,255,.7);--color-overlay-panel-gradient-start:hsla(0,0%,100%,.95);--color-overlay-panel-gradient-end:rgba(232,236,244,.92);--color-modal-backdrop:rgba(15,23,42,.28);--color-modal-surface:hsla(0,0%,100%,.94);--color-overlay-veil:rgba(103,112,133,.45);--color-overlay-banner-bottom:hsla(0,0%,100%,.6);--color-overlay-banner-transparent:hsla(0,0%,100%,0);--color-overlay-backdrop:rgba(15,23,42,.2);--color-sidebar-surface:hsla(0,0%,100%,.9);--color-sidebar-surface-alt:rgba(236,240,247,.72);--color-sidebar-border:rgba(184,194,212,.28);--color-sidebar-border-strong:rgba(148,163,184,.36);--color-sidebar-hover:color-mix(in srgb,var(--color-accent) 16%,transparent);--color-sidebar-hover-strong:color-mix(in srgb,var(--color-accent-strong) 24%,transparent);--color-sidebar-glow:color-mix(in srgb,var(--color-accent) 36%,transparent);--color-sidebar-accent-start:color-mix(in srgb,var(--color-accent-strong) 88%,transparent);--color-sidebar-accent-end:color-mix(in srgb,var(--color-accent) 82%,transparent);--color-sidebar-text-muted:var(--color-text-muted);--sidebar-icon-filter:brightness(0) saturate(100%);--color-surface-tint-subtle:rgba(15,23,42,.08);--color-border-translucent:rgba(148,163,184,.18);--color-border-translucent-strong:rgba(148,163,184,.22);--color-border-translucent-bright:rgba(148,163,184,.28);--color-border-translucent-stronger:rgba(148,163,184,.32);--color-border-translucent-strongest:rgba(148,163,184,.36);--color-border-translucent-glow:rgba(148,163,184,.45);--color-border-translucent-medium:rgba(148,163,184,.2);--color-border-neutral-soft:rgba(148,163,184,.25);--color-border-info-soft:rgba(59,130,246,.32);--color-border-sidebar-strong:rgba(102,112,133,.75);--color-ring-private:rgba(139,92,246,.5);--color-ring-private-hover:rgba(168,85,247,.6);--color-ring-critical:rgba(220,54,70,.35);--color-ring-critical-soft:rgba(220,54,70,.3);--color-ring-critical-hover:rgba(220,54,70,.4);--color-ring-critical-strong:rgba(220,54,70,.5);--color-ring-alert:rgba(239,68,68,.48);--color-gradient-visibility-start:rgba(99,102,241,.28);--color-gradient-visibility-end:rgba(129,140,248,.24);--color-white-soft:hsla(0,0%,100%,.08);--color-white-softer:hsla(0,0%,100%,.24);--color-white-softest:hsla(0,0%,100%,.32);--color-shadow-floating:rgba(15,23,42,.18);--color-shadow-elevated:rgba(15,23,42,.16);--color-shadow-panel:rgba(15,23,42,.12);--color-shadow-notification:rgba(15,23,42,.14);--color-shadow-intense:rgba(15,23,42,.22);--color-shadow-sidebar:rgba(15,23,42,.28);--color-shadow-modal:rgba(15,23,42,.28);--color-divider-strong:rgba(203,213,225,.6);--color-text-frosted-strong:rgba(40,54,77,.85);--color-text-frosted:rgba(61,74,98,.8);--color-text-frosted-soft:rgba(82,96,122,.72)}:root:not([data-theme]),:root[data-theme=dark]{--color-page:#060a12;--color-page-alt:#080c16;--color-surface:#0a0e1a;--color-surface-alt:#0e1422;--color-bg:var(--color-surface);--color-card:#121a2c;--color-card-private:#261c3e;--color-card-critical:#3a141c;--color-panel:#101828;--color-panel-hover:#182234;--color-border:#3d5070;--color-border-subtle:#26344c;--color-accent:#818cf8;--color-accent-strong:#6366f1;--color-accent-pressed:#4f46e5;--color-primary:var(--color-accent-strong);--color-secondary:#38bdf8;--color-logo-accent:var(--color-accent-strong);--color-logo-wordmark:#c6cfde;--color-logo-wordmark-inverse:var(--color-white);--color-logo-background:#0c121e;--color-logo-background-inverse:var(--color-white);--color-info:#60a5fa;--color-info-strong:#3884ff;--color-info-pressed:#2563eb;--color-info-glass:rgba(56,132,255,.22);--color-info-border:rgba(96,165,250,.42);--color-info-on:#ebf4ff;--color-muted-strong:#ced7e8;--color-text:#e2e8f0;--color-text-strong:#f4f7ff;--color-text-inverse:#0c121e;--color-text-muted:#a5b3c9;--color-muted:#94a3b8;--color-muted-alt:#808ba2;--color-subtle-text:#a8b4cd;--color-subtle:#1c263a;--color-surface-sunken:rgba(13,19,32,.92);--color-surface-muted:rgba(18,26,44,.82);--color-critical:#ef5362;--color-critical-strong:#dc2626;--color-danger-surface:rgba(220,38,38,.28);--color-danger-border:rgba(220,38,38,.45);--color-danger-on:#ffe4e9;--color-warning:#facc15;--color-warning-strong:#eab308;--color-warning-surface:rgba(253,224,71,.22);--color-warning-border:rgba(250,204,21,.42);--color-warning-glass:rgba(253,224,71,.2);--color-warning-on:#1a1200;--color-success:#22c55e;--color-success-strong:#16a34a;--color-success-surface:rgba(22,163,74,.24);--color-success-border:rgba(34,197,94,.45);--color-success-on:#d2fce4;--color-private:#a855f7;--color-private-strong:#8b5cf6;--color-private-surface:rgba(124,58,237,.26);--color-private-border:rgba(168,85,247,.45);--color-private-on:#efe6ff;--color-neutral-700:#3a4b6e;--color-neutral-600:#5a6985;--color-neutral-surface:rgba(99,114,144,.24);--color-neutral-border:rgba(99,114,144,.35);--color-neutral-on:#d2dcee;--color-white:#fff;--color-black:#000;--color-overlay:rgba(8,11,20,.72);--color-overlay-black:rgba(0,0,0,.88);--color-overlay-muted:rgba(12,18,30,.6);--color-overlay-strong:rgba(8,12,24,.82);--color-overlay-darker:rgba(5,8,16,.9);--color-overlay-panel:rgba(14,20,34,.92);--color-overlay-panel-soft:rgba(18,26,42,.78);--color-overlay-panel-tint:rgba(56,93,160,.36);--color-overlay-panel-glass:rgba(14,24,42,.86);--color-overlay-panel-glass-soft:rgba(16,28,48,.72);--color-overlay-panel-gradient-start:rgba(18,26,44,.92);--color-overlay-panel-gradient-end:rgba(10,16,30,.92);--color-modal-backdrop:rgba(5,8,14,.68);--color-modal-surface:rgba(14,22,38,.88);--color-overlay-veil:rgba(4,6,12,.94);--color-overlay-banner-bottom:rgba(0,0,0,.6);--color-overlay-banner-transparent:transparent;--color-overlay-backdrop:rgba(5,8,14,.75);--color-sidebar-surface:rgba(12,18,30,.94);--color-sidebar-surface-alt:rgba(10,18,32,.8);--color-sidebar-border:rgba(86,106,142,.26);--color-sidebar-border-strong:rgba(112,133,170,.42);--color-sidebar-hover:color-mix(in srgb,var(--color-accent) 22%,transparent);--color-sidebar-hover-strong:color-mix(in srgb,var(--color-accent-strong) 32%,transparent);--color-sidebar-glow:color-mix(in srgb,var(--color-accent) 42%,transparent);--color-sidebar-accent-start:color-mix(in srgb,var(--color-accent) 92%,transparent);--color-sidebar-accent-end:color-mix(in srgb,var(--color-accent-strong) 88%,transparent);--color-sidebar-text-muted:var(--color-text-muted);--sidebar-icon-filter:brightness(0) invert(1);--color-surface-tint-subtle:rgba(94,113,161,.12);--color-border-translucent:rgba(99,114,144,.22);--color-border-translucent-strong:rgba(110,130,170,.28);--color-border-translucent-bright:rgba(148,163,184,.35);--color-border-translucent-stronger:rgba(148,163,184,.38);--color-border-translucent-strongest:rgba(198,207,222,.45);--color-border-translucent-glow:rgba(129,140,248,.55);--color-border-translucent-medium:rgba(99,114,144,.28);--color-border-neutral-soft:rgba(99,114,144,.3);--color-border-info-soft:rgba(96,165,250,.35);--color-border-sidebar-strong:rgba(32,46,68,.88);--color-ring-private:rgba(168,85,247,.55);--color-ring-private-hover:rgba(192,132,252,.65);--color-ring-critical:rgba(239,83,98,.42);--color-ring-critical-soft:rgba(239,83,98,.35);--color-ring-critical-hover:rgba(239,83,98,.5);--color-ring-critical-strong:rgba(220,38,38,.6);--color-ring-alert:rgba(220,38,38,.6);--color-gradient-visibility-start:rgba(129,140,248,.4);--color-gradient-visibility-end:rgba(192,132,252,.32);--color-white-soft:hsla(0,0%,100%,.1);--color-white-softer:hsla(0,0%,100%,.3);--color-white-softest:hsla(0,0%,100%,.4);--color-shadow-floating:rgba(8,11,30,.55);--color-shadow-elevated:rgba(8,11,30,.45);--color-shadow-panel:rgba(15,23,42,.35);--color-shadow-notification:rgba(15,23,42,.3);--color-shadow-intense:rgba(250,204,21,.48);--color-shadow-sidebar:rgba(0,0,0,.45);--color-shadow-modal:rgba(8,11,30,.55);--color-divider-strong:rgba(15,23,42,.35);--color-text-frosted-strong:rgba(226,232,240,.94);--color-text-frosted:rgba(226,232,240,.9);--color-text-frosted-soft:rgba(226,232,240,.82)}*,: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.17 | 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:var(--font-family-sans);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{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:var(--font-family-mono);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}html{font-size:100%}@media (min-width:1024px){html{font-size:75%}}*,:after,:before{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}body{font-family:var(--font-family-sans);background-color:var(--color-page);color:var(--color-text-strong);line-height:1.5;margin:0;padding:0;overflow-x:hidden}#uiOverlay{position:fixed;inset:0;pointer-events:none;z-index:var(--z-overlay-popover)}#uiOverlay>*{pointer-events:auto}#editNip71TagsFieldset>legend,#nip71TagsFieldset>legend{margin-left:0;padding:0}#app{background-color:var(--color-page);color:inherit}body.modal-open,html.modal-open{overflow:hidden;height:100%}body.modal-open #app{overflow:hidden}body.modal-open #sidebar{pointer-events:none;opacity:0;visibility:hidden;z-index:var(--z-sidebar-overlay)}.ng-cloak,.ng-hide:not(.ng-hide-animate),.x-ng-cloak,[data-ng-cloak],[ng-cloak],[ng\:cloak],[x-ng-cloak]{display:none!important}ng\:form{display:block}.\!container{width:100%!important}.container{width:100%}@media (min-width:25rem){.\!container{max-width:25rem!important}.container{max-width:25rem}}@media (min-width:30rem){.\!container{max-width:30rem!important}.container{max-width:30rem}}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}#playerModal.ds-header{display:flex}.ds-header{display:flex;align-items:center;justify-content:flex-start;padding-top:var(--space-sm);padding-bottom:var(--space-sm)}.ds-metric-probe{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;contain:layout size style;inline-size:0;block-size:var(--ds-metric-probe-length,0);overflow:hidden}.ds-header__logo{height:var(--space-2xl-plus);width:auto;max-width:none}.focus-ring{outline:2px solid transparent;outline-offset:2px}.focus-ring:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.author-pic{display:block;height:100%;width:100%;border-radius:var(--radius-full);-o-object-fit:cover;object-fit:cover}.header-icon-toggle{outline:2px solid transparent;outline-offset:2px}.header-icon-toggle:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.header-icon-toggle{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1);width:var(--icon-size-lg);height:var(--icon-size-lg);min-width:var(--icon-size-lg);min-height:var(--icon-size-lg);padding:0;border:none;background:transparent;color:var(--color-text-muted);line-height:1}.header-icon-toggle[data-theme-state=light]{color:var(--color-text-strong)}.header-icon-toggle[data-theme-state=dark]{color:var(--color-text)}.header-icon-toggle__icon-wrapper{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--space-lg);block-size:var(--space-lg)}.header-icon-toggle__icon{inline-size:100%;block-size:100%;display:none;fill:currentColor}.header-icon-toggle__icon-wrapper:not([data-theme-icon-state]),.header-icon-toggle__icon-wrapper[data-theme-icon-state=light]{color:inherit}.header-icon-toggle__icon-wrapper:not([data-theme-icon-state]) .header-icon-toggle__icon--dark,.header-icon-toggle__icon-wrapper[data-theme-icon-state=dark] .header-icon-toggle__icon--light,.header-icon-toggle__icon-wrapper[data-theme-icon-state=light] .header-icon-toggle__icon--dark{display:block}.header-icon-toggle[data-theme-state=light]:focus-visible,.header-icon-toggle[data-theme-state=light]:hover{color:var(--color-text)}.header-icon-toggle[data-theme-state=dark]:focus-visible,.header-icon-toggle[data-theme-state=dark]:hover{color:var(--color-text-strong)}.header-icon-toggle[aria-pressed=true]{color:var(--color-text-strong)}.header-icon-toggle[aria-pressed=true]:focus-visible,.header-icon-toggle[aria-pressed=true]:hover{color:var(--color-text-strong)}.bv-logo{--logo-wordmark-color:var(--color-logo-wordmark);--logo-accent-color:var(--color-logo-accent);--logo-background-color:var(--color-logo-background)}.bv-logo[data-variant=inverse]{--logo-wordmark-color:var(--color-logo-wordmark-inverse);--logo-background-color:var(--color-logo-background-inverse)}.bv-logo[data-wordmark=current]{--logo-wordmark-color:currentColor}.bv-logo[data-accent=current]{--logo-accent-color:currentColor}.bv-logo[data-background=transparent]{--logo-background-color:transparent}.bv-logo__wordmark{fill:var(--logo-wordmark-color);color:var(--logo-wordmark-color)}.bv-logo__accent{fill:var(--logo-accent-color);color:var(--logo-accent-color)}.bv-logo__background{fill:var(--logo-background-color);color:var(--logo-background-color)}.markdown-prose{color:var(--color-text)}.markdown-prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:1rem}.markdown-prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.markdown-prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--color-primary);text-decoration:none;font-weight:500}.markdown-prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.markdown-prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.markdown-prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.markdown-prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.markdown-prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.markdown-prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.markdown-prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.markdown-prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.markdown-prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.markdown-prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.markdown-prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.markdown-prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.markdown-prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.markdown-prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.markdown-prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.markdown-prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.markdown-prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.markdown-prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.25em}.markdown-prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--color-border-subtle);border-top-width:1px;margin-top:2rem;margin-bottom:2rem}.markdown-prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--color-muted);border-inline-start-width:.25rem;border-inline-start-color:var(--tw-prose-quote-borders);quotes:"\201C""\201D""\2018""\2019";margin-top:1rem;margin-bottom:1rem;padding-inline-start:1em;border-left-width:4px;border-left-color:var(--color-border-subtle);padding-left:1rem}.markdown-prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.markdown-prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.markdown-prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:var(--font-size-2xl);margin-top:.5rem;margin-bottom:1rem;line-height:1.1111111}.markdown-prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:900;color:inherit}.markdown-prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:var(--font-size-xl);margin-top:1.25rem;margin-bottom:.75rem;line-height:1.3333333}.markdown-prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:800;color:inherit}.markdown-prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:var(--font-size-lg);margin-top:1rem;margin-bottom:.75rem;line-height:1.6}.markdown-prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.markdown-prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.markdown-prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.markdown-prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:1rem;border-radius:var(--radius-md);max-width:100%;height:auto}.markdown-prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){display:block;margin-top:2em;margin-bottom:2em}.markdown-prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.markdown-prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-family:inherit;color:var(--tw-prose-kbd);box-shadow:0 0 0 1px var(--tw-prose-kbd-shadows),0 3px 0 var(--tw-prose-kbd-shadows);font-size:.875em;border-radius:.3125rem;padding-top:.1875em;padding-inline-end:.375em;padding-bottom:.1875em;padding-inline-start:.375em}.markdown-prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--color-secondary);font-weight:500;font-size:var(--font-size-sm);background-color:var(--color-page-alt);padding:.2rem .4rem;border-radius:var(--radius-md);font-family:var(--font-family-mono)}.markdown-prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:none}.markdown-prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.markdown-prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.markdown-prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.markdown-prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.markdown-prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.markdown-prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.markdown-prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.markdown-prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.markdown-prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--color-text-strong);background-color:var(--color-page-alt);overflow-x:auto;font-weight:400;font-size:var(--font-size-sm);line-height:1.7142857;margin-top:0;margin-bottom:1rem;border-radius:var(--radius-md);padding-inline-end:1.1428571em;padding-inline-start:1.1428571em;padding:1rem;font-family:var(--font-family-mono)}.markdown-prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.markdown-prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:none}.markdown-prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.markdown-prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){width:100%;table-layout:auto;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.markdown-prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.markdown-prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.markdown-prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.markdown-prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:0}.markdown-prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline}.markdown-prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.markdown-prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.markdown-prose :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)){text-align:start}.markdown-prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.markdown-prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.markdown-prose{--tw-prose-body:var(--color-text);--tw-prose-headings:var(--color-text-strong);--tw-prose-lead:#4b5563;--tw-prose-links:var(--color-primary);--tw-prose-bold:var(--color-text-strong);--tw-prose-counters:var(--color-text-muted);--tw-prose-bullets:var(--color-text-muted);--tw-prose-hr:var(--color-border-subtle);--tw-prose-quotes:var(--color-muted);--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-kbd:#111827;--tw-prose-kbd-shadows:rgba(17,24,39,.1);--tw-prose-code:var(--color-secondary);--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:var(--color-border-subtle);--tw-prose-td-borders:var(--color-border-subtle);--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-kbd:#fff;--tw-prose-invert-kbd-shadows:hsla(0,0%,100%,.1);--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:rgba(0,0,0,.5);--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:1rem;line-height:1.6}.markdown-prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.markdown-prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5rem;margin-bottom:.5rem}.markdown-prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.markdown-prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.markdown-prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.markdown-prose :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.markdown-prose :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.markdown-prose :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.markdown-prose :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.markdown-prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.markdown-prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.markdown-prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-inline-start:1.625em}.markdown-prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.markdown-prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.markdown-prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.markdown-prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.markdown-prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.markdown-prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.markdown-prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.5714286em;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.markdown-prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.markdown-prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.markdown-prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.markdown-prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.markdown-prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.markdown-prose{font-family:var(--font-family-sans)}.markdown-prose :where(h4,h5,h6):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:600;margin-top:.75rem;margin-bottom:.5rem}.markdown-prose :where(ul,ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:1rem;padding-left:1.25rem}.markdown-prose :where(a:hover):not(:where([class~=not-prose],[class~=not-prose] *)){text-decoration:underline}.markdown-prose{max-width:none;line-height:1.625;color:var(--text-primary);--tw-prose-body:var(--color-text);--tw-prose-headings:var(--color-text-strong);--tw-prose-invert-headings:var(--color-text-strong);--tw-prose-lead:var(--color-text);--tw-prose-links:var(--color-accent-strong);--tw-prose-bold:var(--color-text-strong);--tw-prose-counters:var(--color-text-muted);--tw-prose-bullets:var(--color-text-muted);--tw-prose-hr:var(--color-border-translucent-strong);--tw-prose-quotes:var(--color-text-strong);--tw-prose-quote-borders:var(--color-border-subtle);--tw-prose-captions:var(--color-text-muted);--tw-prose-code:var(--color-text-strong);--tw-prose-pre-code:var(--color-text);--tw-prose-pre-bg:var(--surface-muted);--tw-prose-th-borders:var(--color-border);--tw-prose-td-borders:var(--color-border-subtle)}.markdown-prose :where(h1,h2,h3,h4,h5,h6){color:var(--color-text-strong)}.markdown-prose :where(h1,h2,h3,h4,h5,h6) strong{color:inherit}.markdown-prose a{color:var(--color-accent-strong);text-decoration-color:color-mix(in srgb,var(--color-accent-strong) 65%,transparent);text-decoration-thickness:2px;text-underline-offset:.2em}.markdown-prose a:focus-visible,.markdown-prose a:hover{color:var(--color-accent);text-decoration-line:underline}.markdown-prose blockquote{border-radius:var(--radius-md);border-left-width:4px;border-color:var(--border-subtle);background-color:var(--surface-muted);--tw-bg-opacity:0.5;padding:.5rem 1rem;color:var(--text-muted)}.markdown-prose :where(pre,code){font-family:var(--font-family-mono)}.markdown-prose code{border-radius:var(--radius-md);background-color:var(--surface-muted);padding:.125rem .25rem;color:var(--color-accent-strong)}.markdown-prose pre{overflow-x:auto;border-radius:var(--radius-lg);border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-muted);padding:1rem;color:var(--text-primary)}.markdown-prose pre code{background-color:transparent;color:inherit;padding:0}.\!popover,.popover{position:relative;display:inline-flex}.popover-panel,.popover__panel{outline:2px solid transparent;outline-offset:2px}.popover-panel:focus-visible,.popover__panel:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.popover-panel,.popover__panel{pointer-events:none;z-index:var(--z-overlay-popover);min-width:var(--menu-min-width);max-width:var(--popover-inline-safe-max);--tw-scale-x:.95;--tw-scale-y:.95;border-radius:var(--overlay-panel-radius);border-width:1px;border-color:var(--border-default);--tw-border-opacity:0.4;background-color:var(--surface-overlay-panel);padding:var(--overlay-panel-padding-block) var(--overlay-panel-padding-inline);font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-primary);opacity:0;--tw-shadow:var(--overlay-panel-shadow);--tw-shadow-colored:var(--overlay-panel-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-shadow-color:var(--surface-overlay-panel);--tw-shadow:var(--tw-shadow-colored);transition-property:transform;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.popover-panel,.popover-panel[data-state=open],.popover__panel,.popover__panel[data-state=open]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.popover-panel[data-state=open],.popover__panel[data-state=open]{pointer-events:auto;--tw-scale-x:1;--tw-scale-y:1;opacity:1}.popover-panel[data-state=closed],.popover__panel[data-state=closed]{pointer-events:none;--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0}.ds-overlay-backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--overlay-backdrop-color);backdrop-filter:blur(var(--overlay-backdrop-blur));-webkit-backdrop-filter:blur(var(--overlay-backdrop-blur))}.popover-panel[data-variant=zap],.popover__panel[data-variant=zap]{background:var(--color-overlay-veil);color:var(--color-subtle);border:var(--border-width-hairline) solid var(--color-border-translucent-stronger);box-shadow:var(--shadow-popover-zap);backdrop-filter:blur(var(--popover-backdrop-blur));-webkit-backdrop-filter:blur(var(--popover-backdrop-blur))}.btn{outline:2px solid transparent;outline-offset:2px}.btn:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-full);border-width:1px;border-color:transparent;background-color:var(--color-accent-strong);padding:.625rem 1.25rem;font-size:var(--font-size-base);line-height:var(--line-height-base);font-weight:600;color:var(--color-white);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.btn:hover{background-color:var(--color-accent)}.btn:focus-visible{background-color:var(--color-accent-pressed)}.btn:disabled{pointer-events:none;cursor:not-allowed;opacity:.6;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.progress,[data-progress-meter]{--progress-height:var(--progress-height-md);--progress-track:var(--progress-track-color);--progress-fill:var(--progress-fill-color);--progress-radius-current:var(--progress-radius);display:block;width:100%;height:var(--progress-height);border:none;border-radius:var(--progress-radius-current);overflow:hidden;background-color:var(--progress-track);-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress::-webkit-progress-bar,[data-progress-meter]::-webkit-progress-bar{background-color:var(--progress-track);border-radius:var(--progress-radius-current)}.progress::-webkit-progress-value,[data-progress-meter]::-webkit-progress-value{background-color:var(--progress-fill);border-radius:var(--progress-radius-current);-webkit-transition:width var(--progress-transition-duration) var(--progress-transition-ease);transition:width var(--progress-transition-duration) var(--progress-transition-ease)}.progress::-moz-progress-bar,[data-progress-meter]::-moz-progress-bar{background-color:var(--progress-fill);border-radius:var(--progress-radius-current);-moz-transition:width var(--progress-transition-duration) var(--progress-transition-ease);transition:width var(--progress-transition-duration) var(--progress-transition-ease)}.progress.progress--surface,.progress[data-variant=surface],[data-progress-meter].progress--surface,[data-progress-meter][data-variant=surface]{--progress-track:var(--color-panel)}.progress.progress--accent,.progress[data-variant=accent],[data-progress-meter].progress--accent,[data-progress-meter][data-variant=accent]{--progress-fill:var(--color-info-strong)}.btn-ghost{outline:2px solid transparent;outline-offset:2px}.btn-ghost:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-full);border-color:transparent;background-color:var(--color-accent-strong);padding:.625rem 1.25rem;font-size:var(--font-size-base);line-height:var(--line-height-base);font-weight:600;color:var(--color-white);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.btn-ghost:hover{background-color:var(--color-accent)}.btn-ghost:focus-visible{background-color:var(--color-accent-pressed)}.btn-ghost:disabled{cursor:not-allowed;opacity:.6}body.iframe-form button.btn-ghost{align-self:flex-start;margin-top:var(--space-md)}.btn-ghost{border-width:1px;border-color:var(--border-default);--tw-border-opacity:0.6;background-color:transparent;color:var(--text-primary);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media (prefers-reduced-motion:reduce){.btn-ghost{transition-property:none}}.btn-ghost:hover{background-color:var(--surface-panel-hover);color:var(--text-primary)}.btn-ghost:focus-visible{background-color:var(--surface-panel-hover)}.btn-ghost:disabled{pointer-events:none;opacity:.5;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.btn-ghost[data-variant=critical]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.6;color:var(--color-critical)}.btn-ghost[data-variant=critical]:focus-visible,.btn-ghost[data-variant=critical]:hover{background-color:var(--color-critical);--tw-bg-opacity:0.2;color:var(--color-critical-strong)}.btn-ghost[aria-pressed=true],.btn-ghost[data-state=active]{border-color:transparent;background-color:var(--color-primary);color:var(--color-white);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.btn-ghost[aria-pressed=true]:focus-visible,.btn-ghost[aria-pressed=true]:hover,.btn-ghost[data-state=active]:focus-visible,.btn-ghost[data-state=active]:hover{background-color:var(--color-accent-strong)}.\!badge,.badge{display:inline-flex;align-items:center;gap:.25rem;border-radius:var(--radius-full);border-width:1px;border-color:var(--status-neutral-border);background-color:var(--status-neutral-surface);padding:.25rem .75rem;font-size:var(--font-size-2xs);line-height:var(--line-height-tight);font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-extra-wide);color:var(--status-neutral-on)}.\!badge[data-variant=info],.badge[data-variant=info]{border-color:var(--status-info-border);background-color:var(--status-info-surface);color:var(--status-info-on)}.\!badge[data-variant=success],.badge[data-variant=success]{border-color:var(--status-success-border);background-color:var(--status-success-surface);color:var(--status-success-on)}.\!badge[data-variant=warning],.badge[data-variant=warning]{border-color:var(--status-warning-border);background-color:var(--status-warning-surface);color:var(--status-warning-on)}.\!badge[data-variant=critical],.badge[data-variant=critical]{border-color:var(--status-danger-border);background-color:var(--status-danger-surface);color:var(--status-danger-on)}.\!badge[data-variant=private],.badge[data-variant=private]{border-color:var(--status-private-border);background-color:var(--status-private-surface);color:var(--status-private-on)}.\!badge[data-variant=neutral],.badge[data-variant=neutral]{border-color:var(--status-neutral-border);background-color:var(--status-neutral-surface);color:var(--status-neutral-on)}.pill{display:inline-flex;align-items:center;gap:.5rem;border-radius:var(--radius-full);border-width:1px;border-color:var(--status-neutral-border);background-color:var(--status-neutral-surface);padding:.25rem .75rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);font-weight:500;color:var(--status-neutral-on)}.pill[data-size=compact]{padding:.125rem .5rem;font-size:var(--font-size-2xs);line-height:var(--line-height-tight)}.pill[data-variant=info]{border-color:var(--status-info-border);background-color:var(--status-info-surface);color:var(--status-info-on)}.pill[data-variant=success]{border-color:var(--status-success-border);background-color:var(--status-success-surface);color:var(--status-success-on)}.pill[data-variant=warning]{border-color:var(--status-warning-border);background-color:var(--status-warning-surface);color:var(--status-warning-on)}.pill[data-variant=critical]{border-color:var(--status-danger-border);background-color:var(--status-danger-surface);color:var(--status-danger-on)}.pill[data-variant=private]{border-color:var(--status-private-border);background-color:var(--status-private-surface);color:var(--status-private-on)}.pill[data-variant=neutral]{border-color:var(--status-neutral-border);background-color:var(--status-neutral-surface);color:var(--status-neutral-on)}#playerModal.\!menu{display:flex}.\!menu{display:flex;flex-direction:column;gap:.25rem;padding-top:.5rem;padding-bottom:.5rem}#playerModal.menu,.menu{display:flex}.menu{flex-direction:column;gap:.25rem;padding-top:.5rem;padding-bottom:.5rem}.menu__heading{padding-left:1rem;padding-right:1rem;padding-bottom:.5rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);font-weight:600;text-transform:uppercase;letter-spacing:.025em;color:var(--text-muted)}.menu__separator{margin-top:.5rem;margin-bottom:.5rem;height:1px;background-color:var(--border-default);--tw-bg-opacity:0.2}.menu__item{outline:2px solid transparent;outline-offset:2px}.menu__item:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}#playerModal.menu__item{display:flex}.menu__item{position:relative;display:flex;width:100%;align-items:center;gap:.75rem;border-radius:var(--radius-md);padding:.5rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:500;color:var(--text-primary);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:var(--motion-ease-in-out)}.menu__item:hover{background-color:var(--surface-panel-hover);color:var(--text-primary)}.menu__item[data-state=active]{background-color:var(--color-accent);--tw-bg-opacity:0.2;color:var(--color-accent-strong)}.menu__item[data-variant=critical]{color:var(--color-critical-strong)}.menu__item[data-variant=critical]:hover{background-color:var(--color-critical);--tw-bg-opacity:0.2}.menu__item:disabled,.menu__item[aria-disabled=true]{cursor:not-allowed;opacity:.6}.menu__item:disabled,.menu__item:disabled:hover,.menu__item[aria-disabled=true],.menu__item[aria-disabled=true]:hover{background-color:transparent;color:var(--text-muted)}.\!card{--video-card-lift-translate-y:0!important;--video-card-backdrop-opacity:0!important;--video-card-backdrop-translate-y:1.25rem!important;--video-card-backdrop-scale:1.08!important;--video-card-backdrop-blur:var(--blur-thumbnail-blur)!important}.card{--video-card-lift-translate-y:0;--video-card-backdrop-opacity:0;--video-card-backdrop-translate-y:1.25rem;--video-card-backdrop-scale:1.08;--video-card-backdrop-blur:var(--blur-thumbnail-blur)}.\!card{outline:2px solid transparent;outline-offset:2px}.\!card:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.\!card{position:relative;border-radius:var(--radius-lg);border-width:1px;border-color:transparent;background-color:var(--surface-raised);color:var(--text-primary);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.card{outline:2px solid transparent;outline-offset:2px}.card:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.card{position:relative;border-radius:var(--radius-lg);border-width:1px;border-color:transparent;background-color:var(--surface-raised);color:var(--text-primary);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.\!card{transform:translate3d(0,var(--video-card-lift-translate-y),0)!important;transition-property:transform,box-shadow,border-color,background-color,color!important;will-change:transform!important;isolation:isolate!important}.card{transform:translate3d(0,var(--video-card-lift-translate-y),0);transition-property:transform,box-shadow,border-color,background-color,color;will-change:transform;isolation:isolate}.\!card:before{content:""!important;position:absolute!important;inset:0!important;z-index:0!important;opacity:var(--video-card-backdrop-opacity)!important;background-image:var(--video-card-thumb-url,none)!important;background-position:50%!important;background-repeat:no-repeat!important;background-size:cover!important;transform:translate3d(0,var(--video-card-backdrop-translate-y),0) scale(var(--video-card-backdrop-scale))!important;filter:blur(var(--video-card-backdrop-blur))!important;transition:opacity var(--motion-duration-base) var(--motion-ease-in-out),transform var(--motion-duration-base) var(--motion-ease-in-out),filter var(--motion-duration-base) var(--motion-ease-in-out)!important;pointer-events:none!important;will-change:opacity,transform,filter!important}.card:before{content:"";position:absolute;inset:0;z-index:0;opacity:var(--video-card-backdrop-opacity);background-image:var(--video-card-thumb-url,none);background-position:50%;background-repeat:no-repeat;background-size:cover;transform:translate3d(0,var(--video-card-backdrop-translate-y),0) scale(var(--video-card-backdrop-scale));filter:blur(var(--video-card-backdrop-blur));transition:opacity var(--motion-duration-base) var(--motion-ease-in-out),transform var(--motion-duration-base) var(--motion-ease-in-out),filter var(--motion-duration-base) var(--motion-ease-in-out);pointer-events:none;will-change:opacity,transform,filter}.\!card>*{position:relative!important;z-index:1!important}.card>*{position:relative;z-index:1}.card:focus-within,.card:hover{--video-card-lift-translate-y:-0.35rem;--video-card-backdrop-opacity:0.425;--video-card-backdrop-translate-y:0.15rem;--video-card-backdrop-scale:1.12;--video-card-backdrop-blur:24px}.\!card:focus-within,.\!card:hover{--video-card-lift-translate-y:-0.35rem!important;--video-card-backdrop-opacity:0.425!important;--video-card-backdrop-translate-y:0.15rem!important;--video-card-backdrop-scale:1.12!important;--video-card-backdrop-blur:24px!important;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.card:focus-within,.card:hover{--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!card:focus-within,.\!card:hover{--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!card:focus-visible{border-color:var(--color-accent);--tw-border-opacity:0.4;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.card:focus-visible{border-color:var(--color-accent);--tw-border-opacity:0.4;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!card[data-state=critical],.card[data-state=critical]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--surface-raised-critical)}.\!card[data-state=private],.card[data-state=private]{background-color:var(--surface-raised-private);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!card[data-state=disabled],.card[data-state=disabled]{opacity:.6;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.form-control{outline:2px solid transparent;outline-offset:2px}.form-control:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.form-control{display:block;width:100%;border-radius:var(--radius-md);border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-alt);padding:.5rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-primary);--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.form-control::-moz-placeholder{color:var(--text-muted)}.form-control::placeholder{color:var(--text-muted)}.form-control:hover{border-color:var(--border-default)}.form-control:focus-visible{border-color:var(--color-accent-strong)}.form-control:disabled{cursor:not-allowed;background-color:var(--surface-base);color:var(--text-muted);opacity:.6}.form-control:invalid{border-color:var(--color-critical);--tw-border-opacity:0.6}.\!input[data-state=locked],.form-control[data-state=locked],.input[data-state=locked],.select[data-state=locked],.textarea[data-state=locked],select.form-control[data-state=locked],textarea.form-control[data-state=locked]{cursor:default;border-color:var(--border-sidebar-strong);background-color:var(--surface-overlay-panel-soft);color:var(--text-muted)}.form-control[data-state=locked]:focus-visible,.input[data-state=locked]:focus-visible,.select[data-state=locked]:focus-visible,.textarea[data-state=locked]:focus-visible,select.form-control[data-state=locked]:focus-visible,textarea.form-control[data-state=locked]:focus-visible{border-color:var(--border-sidebar-strong);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px;--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(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-offset-width:0px}.\!input[data-state=locked]:focus-visible{border-color:var(--border-sidebar-strong);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px;--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(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-offset-width:0px}.\!input[data-state=locked]:disabled,.form-control[data-state=locked]:disabled,.input[data-state=locked]:disabled,.select[data-state=locked]:disabled,.textarea[data-state=locked]:disabled,select.form-control[data-state=locked]:disabled,textarea.form-control[data-state=locked]:disabled{cursor:default;opacity:1}.\!input{outline:2px solid transparent;outline-offset:2px}.\!input:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.\!input{display:block;width:100%;border-radius:var(--radius-md);border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-alt);padding:.5rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-primary);--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.\!input::-moz-placeholder{color:var(--text-muted)}.\!input::placeholder{color:var(--text-muted)}.\!input:hover{border-color:var(--border-default)}.\!input:focus-visible{border-color:var(--color-accent-strong)}.\!input:disabled{cursor:not-allowed;background-color:var(--surface-base);color:var(--text-muted);opacity:.6}.\!input:invalid{border-color:var(--color-critical);--tw-border-opacity:0.6}.\!input[data-state=locked],select.\!input[data-state=locked],textarea.\!input[data-state=locked]{cursor:default;border-color:var(--border-sidebar-strong);background-color:var(--surface-overlay-panel-soft);color:var(--text-muted)}.\!input[data-state=locked]:focus-visible,select.\!input[data-state=locked]:focus-visible,textarea.\!input[data-state=locked]:focus-visible{border-color:var(--border-sidebar-strong);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px;--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(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-offset-width:0px}.\!input[data-state=locked]:disabled,select.\!input[data-state=locked]:disabled,textarea.\!input[data-state=locked]:disabled{cursor:default;opacity:1}@media (prefers-reduced-motion:reduce){.\!input{transition:none}}body.iframe-form label+.\!input{margin-top:var(--space-xs)}.input{outline:2px solid transparent;outline-offset:2px}.input:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.input{display:block;width:100%;border-radius:var(--radius-md);border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-alt);padding:.5rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-primary);--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.input::-moz-placeholder{color:var(--text-muted)}.input::placeholder{color:var(--text-muted)}.input:hover{border-color:var(--border-default)}.input:focus-visible{border-color:var(--color-accent-strong)}.input:disabled{cursor:not-allowed;background-color:var(--surface-base);color:var(--text-muted);opacity:.6}.input:invalid{border-color:var(--color-critical);--tw-border-opacity:0.6}.input[data-state=locked],select.input[data-state=locked],textarea.input[data-state=locked]{cursor:default;border-color:var(--border-sidebar-strong);background-color:var(--surface-overlay-panel-soft);color:var(--text-muted)}.input[data-state=locked]:focus-visible,select.input[data-state=locked]:focus-visible,textarea.input[data-state=locked]:focus-visible{border-color:var(--border-sidebar-strong);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px;--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(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-offset-width:0px}.input[data-state=locked]:disabled,select.input[data-state=locked]:disabled,textarea.input[data-state=locked]:disabled{cursor:default;opacity:1}@media (prefers-reduced-motion:reduce){.input{transition:none}}body.iframe-form label+.input{margin-top:var(--space-xs)}.textarea{outline:2px solid transparent;outline-offset:2px}.textarea:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.textarea{display:block;width:100%;border-radius:var(--radius-md);border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-alt);padding:.5rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-primary);--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.textarea::-moz-placeholder{color:var(--text-muted)}.textarea::placeholder{color:var(--text-muted)}.textarea:hover{border-color:var(--border-default)}.textarea:focus-visible{border-color:var(--color-accent-strong)}.textarea:disabled{cursor:not-allowed;background-color:var(--surface-base);color:var(--text-muted);opacity:.6}.textarea:invalid{border-color:var(--color-critical);--tw-border-opacity:0.6}.textarea[data-state=locked],select.textarea[data-state=locked],textarea.textarea[data-state=locked]{cursor:default;border-color:var(--border-sidebar-strong);background-color:var(--surface-overlay-panel-soft);color:var(--text-muted)}.textarea[data-state=locked]:focus-visible,select.textarea[data-state=locked]:focus-visible,textarea.textarea[data-state=locked]:focus-visible{border-color:var(--border-sidebar-strong);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px;--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(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-offset-width:0px}.textarea[data-state=locked]:disabled,select.textarea[data-state=locked]:disabled,textarea.textarea[data-state=locked]:disabled{cursor:default;opacity:1}@media (prefers-reduced-motion:reduce){.textarea{transition:none}}body.iframe-form label+.textarea{margin-top:var(--space-xs)}.textarea{min-height:var(--form-textarea-min-height);resize:vertical}.select{outline:2px solid transparent;outline-offset:2px}.select:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.select{display:block;width:100%;border-radius:var(--radius-md);border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-alt);padding:.5rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-primary);--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.select::-moz-placeholder{color:var(--text-muted)}.select::placeholder{color:var(--text-muted)}.select:hover{border-color:var(--border-default)}.select:focus-visible{border-color:var(--color-accent-strong)}.select:disabled{cursor:not-allowed;background-color:var(--surface-base);color:var(--text-muted);opacity:.6}.select:invalid{border-color:var(--color-critical);--tw-border-opacity:0.6}.select[data-state=locked],select.select[data-state=locked],textarea.select[data-state=locked]{cursor:default;border-color:var(--border-sidebar-strong);background-color:var(--surface-overlay-panel-soft);color:var(--text-muted)}.select[data-state=locked]:focus-visible,select.select[data-state=locked]:focus-visible,textarea.select[data-state=locked]:focus-visible{border-color:var(--border-sidebar-strong);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px;--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(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-offset-width:0px}.select[data-state=locked]:disabled,select.select[data-state=locked]:disabled,textarea.select[data-state=locked]:disabled{cursor:default;opacity:1}@media (prefers-reduced-motion:reduce){.select{transition:none}}body.iframe-form label+.select{margin-top:var(--space-xs)}.select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:2.5rem;background-image:linear-gradient(135deg,transparent 50%,var(--select-arrow-color) 50%),linear-gradient(45deg,var(--select-arrow-color) 50%,transparent 50%),linear-gradient(to right,var(--color-border-subtle),var(--color-border-subtle));background-position:right var(--form-select-icon-offset) center,right var(--form-select-icon-gap) center,right var(--form-select-icon-hit-area) center;background-size:var(--form-select-icon-size) var(--form-select-icon-size),var(--form-select-icon-size) var(--form-select-icon-size),var(--form-select-divider-width) 60%;background-repeat:no-repeat}.select,.select:hover{--select-arrow-color:var(--color-border)}.select:focus-visible{--select-arrow-color:var(--color-accent-strong)}.select:disabled{--select-arrow-color:var(--color-border-subtle)}.select:invalid{--select-arrow-color:var(--color-critical)}.\!checkbox{outline:2px solid transparent;outline-offset:2px}.\!checkbox:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.\!checkbox{display:inline-flex;height:1.25rem;width:1.25rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-items:center;justify-content:center;border-radius:.25rem;border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-alt);color:var(--color-white);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.checkbox{outline:2px solid transparent;outline-offset:2px}.checkbox:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.checkbox{display:inline-flex;height:1.25rem;width:1.25rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-items:center;justify-content:center;border-radius:.25rem;border-width:1px;border-color:var(--border-subtle);background-color:var(--surface-alt);color:var(--color-white);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.\!checkbox:hover,.checkbox:hover{border-color:var(--border-default)}.\!checkbox:disabled,.checkbox:disabled{cursor:not-allowed;border-color:var(--border-subtle);background-color:var(--surface-base);color:var(--text-muted);opacity:.6}.\!checkbox:after{content:""!important}.checkbox:after{content:""}.\!checkbox:after,.checkbox:after{pointer-events:none;height:.5rem;width:.75rem;border-bottom-width:2px;border-right-width:2px;border-color:var(--color-white);opacity:0;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.\!checkbox:after{transform:rotate(45deg) translateY(var(--form-checkbox-checkmark-offset)) scale(.85)!important}.checkbox:after{transform:rotate(45deg) translateY(var(--form-checkbox-checkmark-offset)) scale(.85)}.\!checkbox:checked,.\!checkbox[aria-checked=true],.checkbox:checked,.checkbox[aria-checked=true]{border-color:var(--color-accent-strong);background-color:var(--color-accent-strong)}.\!checkbox:checked:after,.\!checkbox[aria-checked=true]:after,.checkbox:checked:after,.checkbox[aria-checked=true]:after{opacity:1}.checkbox:checked:after,.checkbox[aria-checked=true]:after{transform:rotate(45deg) translateY(var(--form-checkbox-checkmark-offset)) scale(1)}.\!checkbox:checked:after,.\!checkbox[aria-checked=true]:after{transform:rotate(45deg) translateY(var(--form-checkbox-checkmark-offset)) scale(1)!important}.switch{outline:2px solid transparent;outline-offset:2px}.switch:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.switch{position:relative;display:inline-flex;height:1.5rem;width:2.75rem;cursor:pointer;align-items:center;border-radius:var(--radius-full);border-width:1px;border-color:var(--border-subtle);background-color:var(--border-subtle);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.switch,.switch:before{transition-duration:.15s;transition-duration:var(--motion-duration-base)}.switch:before{content:"";pointer-events:none;position:absolute;left:.125rem;top:50%;height:1.25rem;width:1.25rem;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:var(--radius-full);background-color:var(--surface-base);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.switch:disabled{cursor:not-allowed;border-color:var(--border-subtle);background-color:var(--surface-base);color:var(--text-muted);opacity:.6}.switch.is-on,.switch[aria-checked=true]{border-color:var(--color-accent-strong);background-color:var(--color-accent-strong)}.switch.is-on:before,.switch[aria-checked=true]:before{--tw-translate-x:1.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (prefers-reduced-motion:reduce){.\!checkbox,.\!checkbox:after,.checkbox,.checkbox:after,.form-control,.menu__item,.popover-panel,.popover__panel,.switch,.switch:before{transition:none!important}}#playerModal.bv-modal{display:flex}.bv-modal{position:fixed;inset:0;z-index:var(--z-modal-root);display:flex;align-items:center;justify-content:center;padding:1.5rem}@media (min-width:640px){.bv-modal{padding:2rem}}.bv-modal.hidden,.bv-modal[hidden]{display:none!important}.bv-modal__panel{outline:2px solid transparent;outline-offset:2px}.bv-modal__panel:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.bv-modal__panel{position:relative;z-index:var(--z-modal-content);width:100%;max-width:var(--modal-max-width);border-radius:var(--radius-modal-xl);border-width:1px;border-color:var(--border-overlay);padding:1.75rem 2rem 2rem;text-align:left;color:var(--text-primary);--tw-shadow:var(--shadow-modal);--tw-shadow-colored:var(--shadow-modal);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1);background-color:var(--color-modal-surface,var(--color-overlay-panel))}.bv-modal__panel:focus-visible{border-color:var(--color-border-translucent-bright)}.bv-modal-backdrop{position:fixed;inset:0;z-index:var(--z-modal-overlay);--tw-backdrop-saturate:saturate(1.5);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);background-color:var(--color-modal-backdrop,var(--color-overlay-muted));backdrop-filter:blur(var(--blur-modal-backdrop));-webkit-backdrop-filter:blur(var(--blur-modal-backdrop))}.bv-modal-backdrop[data-variant=veil]{--tw-backdrop-blur:blur(64px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);background-color:var(--color-overlay-veil)}.bv-modal-backdrop[data-variant=muted]{background-color:var(--color-overlay-muted)}.modal-sheet{outline:2px solid transparent;outline-offset:2px}.modal-sheet:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.modal-sheet{z-index:var(--z-modal-content);max-width:var(--modal-max-width);border-radius:var(--radius-modal-xl);border-width:1px;border-color:var(--border-overlay);padding:1.75rem 2rem 2rem;text-align:left;color:var(--text-primary);--tw-shadow:var(--shadow-modal);--tw-shadow-colored:var(--shadow-modal);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1);background-color:var(--color-modal-surface,var(--color-overlay-panel))}.modal-sheet:focus-visible{border-color:var(--color-border-translucent-bright)}@media (max-width:calc(1024px - 0.02px)){.modal-sheet{inline-size:100vw;block-size:100vh;max-width:none;max-height:none;margin:0;border-radius:0;border:0;padding:calc(var(--space-lg) + env(safe-area-inset-top)) calc(var(--space-lg) + env(safe-area-inset-right)) calc(var(--space-lg) + env(safe-area-inset-bottom)) calc(var(--space-lg) + env(safe-area-inset-left));overflow:auto}}#playerModal>.modal-sheet{max-width:none;width:100%;height:100%;padding:0;border-radius:0;box-shadow:none;border:none;background:transparent;display:flex;align-items:stretch}#modalContainer>[id$=Modal]:not(#playerModal) .modal-sheet{z-index:var(--z-modal-content)}.modal-sheet{position:relative;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;max-width:var(--modal-sheet-inline-max);overscroll-behavior:contain}@media (max-width:calc(1024px - 0.02px)){.bv-modal{align-items:stretch;justify-content:stretch;padding:0}.bv-modal__panel,.modal-sheet{inline-size:100vw;block-size:100vh;max-width:none;max-height:none;margin:0;border-radius:0;border:0;padding:calc(var(--space-lg) + env(safe-area-inset-top)) calc(var(--space-lg) + env(safe-area-inset-right)) calc(var(--space-lg) + env(safe-area-inset-bottom)) calc(var(--space-lg) + env(safe-area-inset-left));overflow:auto}}#playerModal.modal-header,.modal-header{display:flex}.modal-header{align-items:flex-start;justify-content:space-between;gap:var(--space-md);padding:1.75rem 2rem 1rem;background:transparent;border:0}.modal-header[data-variant=flush]{padding:0;background:transparent}.modal-close{outline:2px solid transparent;outline-offset:2px}.modal-close:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}#playerModal.modal-close,.modal-close{display:flex}.modal-close{height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:var(--radius-full);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1);border:var(--border-width-hairline) solid var(--color-border-translucent-medium);background:var(--color-surface-tint-subtle);color:var(--color-text-frosted-strong)}.modal-close:hover{background:var(--color-border-translucent);border-color:var(--color-border-translucent-stronger);color:var(--color-text)}.modal-body>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.modal-body{padding:.5rem 2rem 2rem;overscroll-behavior:contain;scrollbar-width:thin}.modal-body::-webkit-scrollbar{width:var(--scrollbar-thin-width)}.modal-body::-webkit-scrollbar-track{background:transparent}.modal-body::-webkit-scrollbar-thumb{background:var(--color-border-translucent);border-radius:var(--radius-full)}#playerModal.modal-embed-frame{display:flex}.modal-embed-frame{display:flex;height:var(--modal-embed-height);max-height:var(--modal-embed-height);width:100%;flex-direction:column}#playerModal.modal-footer{display:flex}.modal-footer{display:flex;flex-direction:column;gap:.75rem;padding:1rem 2rem 2rem}#playerModal.modal-alert,.modal-alert{display:flex}.modal-alert{align-items:flex-start;gap:.75rem;border-radius:var(--radius-md);border-width:1px;border-color:var(--status-warning-strong);--tw-border-opacity:0.6;padding:.75rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);backdrop-filter:blur(var(--blur-modal-alert));background-color:var(--color-warning-glass)}.modal-alert,.modal-alert__icon{color:var(--status-warning-strong)}.modal-alert__icon{margin-top:.125rem;height:1.25rem;width:1.25rem;flex-shrink:0}.modal-tile{border-radius:var(--radius-xl);border-width:1px;border-color:var(--border-overlay);background-color:var(--surface-overlay-panel-soft);padding:1rem 1.25rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-frosted-primary);background-color:var(--color-overlay-panel-glass-soft)}.modal-tile>h3{font-size:var(--font-size-base);line-height:var(--line-height-base);font-weight:600;color:var(--text-primary)}.modal-primary{outline:2px solid transparent;outline-offset:2px}.modal-primary:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.modal-primary{display:inline-flex;align-items:center;gap:.5rem;border-radius:var(--radius-full);border-width:1px;border-color:transparent;background-color:var(--color-accent-strong);padding:.625rem 1.25rem;font-size:var(--font-size-base);line-height:var(--line-height-base);font-weight:600;color:var(--color-white);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.modal-primary:hover{background-color:var(--color-accent)}.modal-primary:focus-visible{background-color:var(--color-accent-pressed)}.modal-primary:disabled{pointer-events:none;cursor:not-allowed;opacity:.6;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}body.iframe-form button.modal-primary{align-self:flex-start;margin-top:var(--space-md)}.modal-primary{width:100%;justify-content:center}@media (prefers-reduced-motion:reduce){.modal-primary{transition-property:none}}.grid-stack{display:grid;gap:var(--space-lg)}.grid-stack[data-variant=cards]{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.grid-stack[data-variant=cards]{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1280px){.grid-stack[data-variant=cards]{grid-template-columns:repeat(3,minmax(0,1fr))}}#playerModal.grid-stack[data-orientation=vertical]{display:flex}.grid-stack[data-orientation=vertical]{display:flex;flex-direction:column;gap:var(--space-md)}#playerModal.bv-stack,.bv-stack{display:flex}.bv-stack{flex-direction:column;gap:var(--space-lg)}.bv-stack--tight{gap:var(--space-md)}.bv-grid-video{display:grid;gap:var(--space-xl);padding-top:var(--space-lg);padding-bottom:var(--space-lg);grid-template-columns:repeat(auto-fill,minmax(var(--grid-card-min-width),1fr))}.\!card[data-alert=nsfw-owner],.card[data-alert=nsfw-owner]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--color-black)}.\!card[data-alert=nsfw-owner]:hover,.card[data-alert=nsfw-owner]:hover{--tw-border-opacity:0.6;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!card img[data-thumbnail-state=blurred],.card img[data-thumbnail-state=blurred]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.\!card img[data-thumbnail-state=blurred]{filter:blur(var(--blur-thumbnail-blur))!important;transform:scale(1.05)!important}.card img[data-thumbnail-state=blurred]{filter:blur(var(--blur-thumbnail-blur));transform:scale(1.05)}.\!card[data-owner-is-viewer=true][data-url-health-state=offline][data-stream-health-state=unhealthy],.card[data-owner-is-viewer=true][data-url-health-state=offline][data-stream-health-state=unhealthy]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--surface-raised-critical)}.video-visibility-toggle{display:inline-flex;align-items:center;gap:.25rem;border-radius:var(--radius-full);border-width:1px;border-color:var(--border-default);background-color:var(--surface-panel);padding:.25rem}.video-visibility-toggle__option{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);border-width:1px;border-color:transparent;background-color:var(--surface-panel);padding:.5rem .75rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);font-weight:600;text-transform:uppercase;color:var(--text-muted);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1)}.video-visibility-toggle__option:not(.is-disabled):hover{background-color:var(--surface-panel-hover);color:var(--text-primary)}.video-visibility-toggle__option[data-active=true]{border-width:1px;border-color:var(--color-accent);--tw-border-opacity:0.6;color:var(--text-primary);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.video-visibility-toggle__option.is-disabled{cursor:not-allowed;opacity:.45}#playerModal.video-modal__container{display:flex}.video-modal__container{display:flex;height:100%;min-height:100vh;width:100%;flex:1 1 0%;flex-direction:column}#playerModal.player-modal__container{display:flex}.player-modal__container{display:flex;height:100%;min-height:100vh;width:100%;flex:1 1 0%;flex-direction:column}#playerModal>.bv-modal__panel{max-width:none;height:100%;border-radius:0;background:transparent;align-items:stretch}#playerModal>.bv-modal__panel,.video-modal__panel{width:100%;padding:0;box-shadow:none;border:none;display:flex}.video-modal__panel{position:relative;z-index:var(--z-modal-content);flex:1 1 auto;min-height:100%;flex-direction:column;overflow:visible;margin:0;border-radius:0;background-color:var(--color-surface)}#playerModal .watch-container{width:100%;max-width:none;margin-inline:0;padding-inline:0}#playerModal .modal-info-panel{display:flex;flex-direction:column;gap:var(--space-lg)}#playerModal h2#videoTitle{margin:0;font-size:clamp(var(--font-size-xl),calc(var(--font-size-modal-title-base) + .5vw),var(--font-size-xl-plus));font-weight:600;line-height:1.3;color:var(--color-text)}#playerModal .modal-meta{font-size:var(--font-size-sm);line-height:1.4;color:var(--color-text-muted)}#playerModal .modal-view-count{font-weight:600;color:var(--color-text)}#playerModal .channel-card{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md-plus) var(--space-lg);border-radius:var(--radius-xl);border:var(--border-width-hairline) solid var(--color-border-translucent);background-color:var(--color-surface);box-shadow:var(--shadow-sm)}@media (max-width:30rem){#playerModal .modal-nav .icon-button{width:var(--space-xl);height:var(--space-xl);min-width:var(--space-xl);min-height:var(--space-xl)}#playerModal .watch-container{padding-inline:0}#playerModal .channel-card{gap:var(--space-sm);padding:var(--space-sm) var(--space-md)}}#playerModal .channel-card__avatar{flex-shrink:0;width:var(--avatar-size-lg);height:var(--avatar-size-lg);border-radius:var(--radius-full);overflow:hidden;background-color:var(--color-border-subtle)}#playerModal .channel-card__avatar img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}#playerModal .channel-card__name{margin:0;font-size:var(--font-size-lg);font-weight:600;color:var(--color-text)}#playerModal .channel-card__npub{margin:0;font-size:var(--font-size-sm);color:var(--color-text-muted)}#playerModal .description-panel{padding:var(--space-md-plus) var(--space-lg);border-radius:var(--radius-xl);border:var(--border-width-hairline) solid var(--color-border-translucent);background-color:var(--color-surface);box-shadow:var(--shadow-sm)}#playerModal .description-panel p{margin:0;font-size:var(--font-size-sm);line-height:1.6;color:var(--color-text)}.player-modal__content{position:relative;z-index:var(--z-modal-content);display:flex;flex:1 1 auto;width:100%;min-height:100%;flex-direction:column;overflow:visible;padding:0;margin:0;border:none;border-radius:0;background-color:var(--color-surface);box-shadow:none}@media (prefers-reduced-motion:reduce){.player-modal__content{transition-property:none}}#playerModal .modal-nav{position:sticky;top:0;z-index:var(--z-overlay-nav);--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;background-color:var(--color-overlay-darker);background-image:linear-gradient(180deg,var(--color-overlay-panel-gradient-start) 0,var(--color-overlay-panel-gradient-end) 100%);border-bottom:var(--border-width-hairline) solid var(--color-border-translucent);backdrop-filter:blur(var(--modal-nav-backdrop-blur));-webkit-backdrop-filter:blur(var(--modal-nav-backdrop-blur))}#playerModal#playerModal .modal-nav__bar{display:flex}#playerModal .modal-nav__bar{display:flex;width:100%;align-items:center;gap:.75rem;padding:.5rem}@media (min-width:640px){#playerModal .modal-nav__bar{padding-left:1rem;padding-right:1rem}}#playerModal#playerModal .modal-nav .modal-actions{display:flex}#playerModal .modal-nav .modal-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}#playerModal .modal-nav .icon-button{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);color:var(--text-muted);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1);width:var(--icon-size-lg);height:var(--icon-size-lg);background:var(--color-surface-tint-subtle);border:var(--border-width-hairline) solid var(--color-border-translucent-medium);color:var(--color-text-muted)}#playerModal .modal-nav .icon-button:focus-visible,#playerModal .modal-nav .icon-button:hover{background:var(--color-border-translucent-bright);border-color:var(--color-border-translucent-strong);color:var(--color-text)}.modal-nav--hidden{--tw-translate-y:-100%}.modal-nav--hidden,.modal-nav--visible{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.modal-nav--visible{--tw-translate-y:0px}.video-modal__layout{display:grid;gap:1.5rem}@media (min-width:1024px){.video-modal__layout{gap:2rem;grid-template-columns:minmax(0,var(--video-modal-primary-fr)) minmax(var(--video-modal-secondary-min),var(--video-modal-secondary-fr,1fr))}}.revert-modal__layout{display:grid;gap:1.5rem}@media (min-width:1024px){.revert-modal__layout{grid-template-columns:minmax(var(--revert-modal-sidebar-min),var(--revert-modal-sidebar-width)) minmax(0,1fr)}}#playerModal.video-modal__primary{display:flex}.video-modal__primary{display:flex;flex-direction:column;gap:1.5rem}#playerModal.video-modal__secondary{display:flex}.video-modal__secondary{display:flex;flex-direction:column;gap:1rem}.video-modal__video{position:relative;background-color:var(--color-black);padding-block:clamp(var(--space-xs),2.5vw,var(--space-md-plus))}@media (min-width:1024px){.video-modal__video{position:sticky;top:calc(var(--space-2xl) + var(--space-xl))}}#playerModal .video-modal__video video{border-radius:var(--radius-lg);box-shadow:var(--shadow-video-modal);max-height:min(80vh,56.25vw);-o-object-fit:contain;object-fit:contain}.video-modal__media{display:block;aspect-ratio:16/9;width:100%;-o-object-fit:contain;object-fit:contain}#playerModal.video-modal__details{display:flex}.video-modal__details{display:flex;flex-direction:column;gap:1.5rem}.video-modal__meta{border-bottom-width:1px;border-color:var(--border-default);--tw-border-opacity:0.2;padding-bottom:1rem}#playerModal.video-modal__actions-row{display:flex}.video-modal__actions-row{display:flex;flex-wrap:wrap;gap:.75rem}.video-modal__action-button,.video-modal__actions-row{align-items:center}.video-modal__action-button{display:inline-flex;height:2.75rem;justify-content:center;gap:.5rem;border-radius:var(--radius-full);font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:600;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1);min-width:var(--video-modal-action-min-width);padding-inline:var(--space-md);border-width:1px;border-style:solid}.bv-modal.video-modal__action-label,.profile-pane.video-modal__action-label,.video-modal__action-label{display:none}@media (min-width:640px){.video-modal__action-label{display:inline}}.video-modal__action-icon{height:1.25rem;width:1.25rem}.video-modal__channel,.video-modal__description,.video-modal__stats{border-radius:1rem;border-width:1px;border-color:var(--border-default);--tw-border-opacity:0.2;background-color:var(--surface-base);padding:1.25rem 1.5rem;--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.video-modal__progress{height:.5rem;width:100%;overflow:hidden;border-radius:var(--radius-full);background-color:var(--border-subtle)}#playerModal.video-modal__stat-metrics{display:flex}.video-modal__stat-metrics{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-muted)}.profile-modal{display:flex;flex-direction:column;inline-size:100%;max-block-size:var(--modal-shell-max-height);overflow:hidden}.profile-modal__body{overflow:hidden;padding-block-start:var(--space-md);padding-block-end:var(--space-lg);padding-inline:var(--space-lg)}.profile-modal__body,.profile-modal__layout{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--space-lg);inline-size:100%;min-block-size:0}.profile-modal__nav{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-self:flex-start}.profile-modal__panes{display:flex;flex:1 1 auto;flex-direction:column;block-size:100%;min-block-size:0;overflow-y:auto;padding-inline-end:var(--profile-modal-scrollbar-offset);scrollbar-gutter:stable}.profile-pane{display:flex;flex-direction:column;min-block-size:auto}.profile-pane.hidden{display:none!important}@supports not (scrollbar-gutter:stable){.profile-modal__panes{padding-inline-end:calc(var(--profile-modal-scrollbar-offset) + var(--space-2xs))}}@media (min-width:1024px){.profile-modal__body{gap:var(--space-xl);padding-inline:var(--space-xl)}.profile-modal__layout{display:grid;align-items:flex-start;block-size:100%;gap:var(--space-xl);grid-template-columns:minmax(var(--profile-modal-nav-min-width),var(--profile-modal-nav-max-width)) minmax(0,1fr)}.profile-modal__nav{flex-direction:column;flex-wrap:nowrap;justify-self:start;inline-size:var(--profile-modal-nav-max-width);min-inline-size:var(--profile-modal-nav-min-width)}}.beacon-hidden-download,.torrent-download-anchor,[data-beacon-hidden-download]{display:none!important}.beacon-clipboard-offscreen,.torrent-clipboard-textarea,[data-beacon-clipboard-state=offscreen],[data-beacon-clipboard=offscreen]{position:fixed;top:0;left:var(--offscreen-offset);opacity:0;width:0;height:0;pointer-events:none}.beacon-toast-motion,.torrent-toast-motion{transition-property:opacity,transform;will-change:opacity,transform;opacity:0;transform:translateY(var(--toast-translate))}.beacon-toast-motion[data-beacon-motion=enter],.beacon-toast-motion[data-beacon-motion=show],.torrent-toast-motion[data-beacon-motion=enter],.torrent-toast-motion[data-beacon-motion=show]{opacity:1;transform:translateY(0)}.beacon-toast-motion[data-beacon-motion=exit],.torrent-toast-motion[data-beacon-motion=exit]{opacity:0;transform:translateY(var(--toast-translate))}.torrent-toast{pointer-events:auto;width:100%;max-width:28rem;border-radius:var(--radius-lg);padding:.75rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:500;letter-spacing:-.025em;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--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,0 0 #0000);--tw-ring-inset:inset}.torrent-toast--info{border-width:1px;border-color:var(--border-overlay);background-color:var(--surface-base);color:var(--text-primary)}.torrent-toast--success{border-width:1px;border-color:var(--color-info);--tw-border-opacity:0.6;background-color:var(--color-info);color:var(--color-white)}.torrent-toast--error{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.6;background-color:var(--color-critical);color:var(--color-white)}.torrent-toast--warn{border-width:1px;border-color:var(--status-warning-strong);--tw-border-opacity:0.7;background-color:var(--status-warning-strong);color:var(--status-warning-strong)}.watch-history-card{--video-card-lift-translate-y:0;--video-card-backdrop-opacity:0;--video-card-backdrop-translate-y:1.25rem;--video-card-backdrop-scale:1.08;--video-card-backdrop-blur:var(--blur-thumbnail-blur);outline:2px solid transparent;outline-offset:2px}.watch-history-card:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-base);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1);--tw-ring-color:var(--color-accent)}.watch-history-card{position:relative;border-radius:var(--radius-lg);border-width:1px;border-color:transparent;background-color:var(--surface-raised);color:var(--text-primary);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transform:translate3d(0,var(--video-card-lift-translate-y),0);transition-property:transform,box-shadow,border-color,background-color,color;will-change:transform;isolation:isolate}.watch-history-card:before{content:"";position:absolute;inset:0;z-index:0;opacity:var(--video-card-backdrop-opacity);background-image:var(--video-card-thumb-url,none);background-position:50%;background-repeat:no-repeat;background-size:cover;transform:translate3d(0,var(--video-card-backdrop-translate-y),0) scale(var(--video-card-backdrop-scale));filter:blur(var(--video-card-backdrop-blur));transition:opacity var(--motion-duration-base) var(--motion-ease-in-out),transform var(--motion-duration-base) var(--motion-ease-in-out),filter var(--motion-duration-base) var(--motion-ease-in-out);pointer-events:none;will-change:opacity,transform,filter}.watch-history-card>*{position:relative;z-index:1}.watch-history-card:focus-within,.watch-history-card:hover{--video-card-lift-translate-y:-0.35rem;--video-card-backdrop-opacity:0.425;--video-card-backdrop-translate-y:0.15rem;--video-card-backdrop-scale:1.12;--video-card-backdrop-blur:24px;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.watch-history-card:focus-visible{border-color:var(--color-accent);--tw-border-opacity:0.4;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.watch-history-card[data-state=critical]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--surface-raised-critical)}.watch-history-card[data-state=private]{background-color:var(--surface-raised-private);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg)}.watch-history-card[data-state=disabled],.watch-history-card[data-state=private]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.watch-history-card[data-state=disabled]{opacity:.6;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.watch-history-card[data-alert=nsfw-owner]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--color-black)}.watch-history-card[data-alert=nsfw-owner]:hover{--tw-border-opacity:0.6;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.watch-history-card img[data-thumbnail-state=blurred]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(.4,0,.2,1);filter:blur(var(--blur-thumbnail-blur));transform:scale(1.05)}.watch-history-card[data-owner-is-viewer=true][data-url-health-state=offline][data-stream-health-state=unhealthy]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--surface-raised-critical)}.watch-history-card[data-motion=enter]{opacity:0;animation:card-motion-enter .22s ease-out forwards}#playerModal.watch-history-card{display:flex}.watch-history-card{display:flex;flex-wrap:wrap;align-items:stretch;gap:1.25rem;padding:1rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}@media (prefers-reduced-motion:reduce){.watch-history-card,.watch-history-card[data-motion=enter]{transition-property:none}.watch-history-card[data-motion=enter]{opacity:1;animation:none}}.watch-history-card:hover{--tw-translate-y:-0.125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media (min-width:640px){.watch-history-card{gap:1.5rem;padding:1.25rem}}.watch-history-card--private{border-color:var(--color-info);--tw-border-opacity:0.6}#playerModal.watch-history-card__primary{display:flex}.watch-history-card__primary{display:flex;min-width:0;flex:1 1 0%;flex-wrap:wrap;align-items:stretch;gap:1rem}@media (min-width:640px){.watch-history-card__primary{flex-wrap:nowrap}}.watch-history-card__thumbnail{display:block;flex:none;color:var(--text-primary);text-decoration-line:none}@media (min-width:640px){.watch-history-card__thumbnail{width:14rem}}.watch-history-card__thumbnailInner{aspect-ratio:16/9;width:100%;overflow:hidden;border-radius:var(--radius-lg);background-color:var(--surface-base)}.watch-history-card__thumbnailInner img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover}#playerModal.watch-history-card__details{display:flex}.watch-history-card__details{display:flex;min-width:0;flex:1 1 0%;flex-direction:column;justify-content:center;gap:var(--space-sm)}.watch-history-card__title{cursor:pointer;font-size:var(--font-size-lg);line-height:var(--line-height-base);font-weight:600;line-height:1.375;color:var(--text-primary);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.watch-history-card__title:focus,.watch-history-card__title:hover{color:var(--color-accent)}.watch-history-card__created{font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--text-muted)}#playerModal.watch-history-card__meta{display:flex}.watch-history-card__meta{display:flex;min-width:0;flex-direction:column;justify-content:space-between;gap:1rem}@media (min-width:640px){.watch-history-card__meta{min-width:14rem;flex:none;flex-basis:16rem}}.watch-history-card__watched{font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--border-subtle)}#playerModal.watch-history-card__creator{display:flex}.watch-history-card__creator{display:flex;align-items:center;gap:.75rem}#playerModal.watch-history-card__creatorAvatar{display:flex}.watch-history-card__creatorAvatar{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:var(--radius-full);background-color:var(--surface-panel);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.watch-history-card__creatorAvatar:hover{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.5}.watch-history-card__creatorAvatar:focus-visible{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:0.5}.watch-history-card__creatorAvatar:focus-visible,.watch-history-card__creatorAvatar:hover{--tw-ring-color:color-mix(in srgb,var(--color-accent) 38%,transparent)}.watch-history-card__creatorAvatar img{height:100%;width:100%;border-radius:var(--radius-full);-o-object-fit:cover;object-fit:cover}.watch-history-card__creatorName{cursor:pointer;background-color:transparent;padding:0;text-align:left;font-size:var(--font-size-base);line-height:var(--line-height-base);font-weight:500;color:var(--text-muted);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.watch-history-card__creatorName:hover{color:var(--color-accent)}.watch-history-card__creatorName:focus-visible{color:var(--color-accent)}#playerModal.watch-history-card__actions{display:flex}.watch-history-card__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.watch-history-card__action{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-full);border-width:1px;border-color:transparent;background-color:var(--surface-panel);padding:.5rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:500;color:var(--text-muted);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.watch-history-card__action:hover{border-color:var(--border-default);background-color:var(--surface-alt);color:var(--text-primary)}.watch-history-card__action:focus-visible{border-color:var(--border-default);background-color:var(--surface-alt);color:var(--text-primary)}.watch-history-card__action--primary{background-color:var(--color-accent-strong);color:var(--color-white)}.watch-history-card__action--primary:hover{background-color:var(--color-accent-pressed)}.watch-history-card__action--primary:focus-visible{background-color:var(--color-accent-pressed)}.watch-history-card__action--danger{background-color:var(--color-critical);color:var(--color-white)}.watch-history-card__action--danger:hover{background-color:var(--color-critical-strong)}.watch-history-card__action--danger:focus-visible{background-color:var(--color-critical-strong)}.\!container{max-width:var(--layout-docs-max-width)!important;margin:0 auto!important;padding:var(--space-md)!important}.container{max-width:var(--layout-docs-max-width);margin:0 auto;padding:var(--space-md)}.fade-in{opacity:0;animation:interface-fade-in .28s ease-out forwards;animation-delay:var(--fade-in-delay,0ms)}.fade-in-delay-100{--fade-in-delay:100ms}.fade-in-delay-200{--fade-in-delay:200ms}.fade-in-delay-300{--fade-in-delay:300ms}.\!card[data-motion=enter]{opacity:0!important;animation:card-motion-enter .22s ease-out forwards!important}.card[data-motion=enter]{opacity:0;animation:card-motion-enter .22s ease-out forwards}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:var(--icon-size-lg);height:var(--icon-size-lg);min-width:var(--icon-size-lg);min-height:var(--icon-size-lg);flex:0 0 var(--icon-size-lg);line-height:0;background-color:var(--color-neutral-700);color:var(--color-white);border:none;border-radius:var(--radius-full);cursor:pointer;transition:background-color .2s ease,box-shadow .2s ease}.icon-button:hover{background-color:var(--color-neutral-600)}.icon-button:active,.icon-button:focus{outline:none;box-shadow:0 0 0 var(--icon-button-ring-width) var(--color-ring-alert)}.icon-image{width:var(--icon-size-md);height:var(--icon-size-md);pointer-events:none}.accent-action-button,.channel-action-button{--accent-action-bg:color-mix(in srgb,var(--surface-overlay-panel) 78%,transparent);--accent-action-border:color-mix(in srgb,var(--border-overlay) 92%,transparent);--accent-action-bg-hover:color-mix(in srgb,var(--color-accent) 22%,var(--surface-overlay-panel));--accent-action-ring:color-mix(in srgb,var(--color-accent) 48%,transparent);--accent-action-bg-active:color-mix(in srgb,var(--color-accent-pressed) 28%,var(--surface-overlay-panel));color:var(--color-text);background-color:var(--accent-action-bg);border-color:var(--accent-action-border);border-style:solid;border-width:1px}.accent-action-button:focus-visible,.accent-action-button:hover,.channel-action-button:focus-visible,.channel-action-button:hover{color:var(--color-accent-strong);background-color:var(--accent-action-bg-hover)}.accent-action-button:focus,.accent-action-button:focus-visible,.channel-action-button:focus,.channel-action-button:focus-visible{box-shadow:0 0 0 var(--icon-button-ring-width) var(--accent-action-ring)}.accent-action-button:active,.channel-action-button:active{color:var(--color-accent-pressed);background-color:var(--accent-action-bg-active)}.modal-nav .icon-button{box-shadow:none;padding:0;gap:0;width:var(--icon-size-lg);height:var(--icon-size-lg);min-width:var(--icon-size-lg);min-height:var(--icon-size-lg)}.modal-nav .icon-button:not(.accent-action-button):not(.channel-action-button){border:none}.modal-meta{gap:var(--space-xs)}.modal-meta,.modal-view-count{display:inline-flex;align-items:center}.modal-view-count{gap:var(--space-2xs);font-size:var(--font-size-sm);line-height:var(--space-md-plus);color:var(--color-muted-alt);white-space:nowrap}.view-count-text{white-space:nowrap;color:var(--color-muted-strong)}.ratio-16-9{position:relative;width:100%;padding-top:56.25%;background-color:var(--color-card)}.ratio-16-9>img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}#modalContainer{position:fixed;inset:0;z-index:var(--z-modal-root);pointer-events:none;isolation:isolate}#modalContainer>*{pointer-events:auto}#modalContainer>[id$=Modal]:not(#playerModal){z-index:var(--z-modal-root)}#modalContainer>[id$=Modal]:not(#playerModal)>.bv-modal-backdrop{z-index:var(--z-modal-overlay)}#modalContainer>[id$=Modal]:not(#playerModal) .bv-modal__panel{z-index:var(--z-modal-content)}#modalContainer>#playerModal{z-index:var(--z-modal-player)}#modalContainer>#playerModal .player-modal__container,#modalContainer>#playerModal .player-modal__content{z-index:var(--z-modal-content)}#playerModal{position:fixed;inset:0;z-index:var(--z-modal-player);display:none;flex-direction:column;align-items:stretch;justify-content:stretch;width:100vw;height:100vh;background-color:var(--color-surface);color:var(--color-subtle-text);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}#playerModal.flex{display:flex}#modalVideo{width:100%;aspect-ratio:16/9;background-color:var(--color-black)}.notification-portal{position:fixed;top:0;left:0;right:0;z-index:var(--z-overlay-toast);display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:calc(var(--space-xl) + env(safe-area-inset-top, 0px)) var(--space-lg) var(--space-lg);pointer-events:none;opacity:0;transform:translateY(var(--toast-translate));transition:transform var(--motion-duration-base) var(--motion-ease-out),opacity var(--motion-duration-base) var(--motion-ease-out)}@media (min-width:640px){.notification-portal{padding-inline:var(--space-xl)}}.notification-portal:has(.notification-banner:not(.hidden)){opacity:1;transform:translateY(0)}.notification-banner,.torrent-toast{--notify-accent:var(--color-accent-strong);--notify-accent-strong:var(--color-accent);--notify-border:var(--surface-overlay-panel-tint);--notify-background:var(--surface-overlay-panel);--notify-foreground:var(--color-text);position:relative;display:flex;align-items:center;gap:var(--space-md);width:min(28rem,100%);padding:var(--space-md) var(--space-xl);border-radius:var(--radius-xl);border:1px solid var(--notify-border);background:var(--notify-background);color:var(--notify-foreground);box-shadow:0 32px 64px var(--color-shadow-notification);backdrop-filter:blur(var(--overlay-backdrop-blur));pointer-events:auto;isolation:isolate;font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:600;line-height:1.375;transition:transform var(--motion-duration-base) var(--motion-ease-out),opacity var(--motion-duration-base) var(--motion-ease-out)}.notification-banner:before,.torrent-toast:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,var(--notify-accent) 0,var(--notify-accent-strong) 100%);opacity:.18;pointer-events:none}.notification-banner>*,.torrent-toast>*{position:relative;z-index:1}.notification-dismiss{display:inline-flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:var(--radius-full);border-width:1px;border-color:transparent;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1);color:inherit;opacity:.75;background-color:var(--notify-dismiss-background)}.notification-dismiss:focus-visible,.notification-dismiss:hover{opacity:1;background-color:var(--notify-dismiss-background-hover)}.notification-dismiss svg{height:1rem;width:1rem}.notification-banner:not(.hidden){animation:notification-slide-in var(--motion-duration-base) var(--motion-ease-out)}.notification-banner--critical,.torrent-toast--error{--notify-accent:var(--color-critical-strong);--notify-accent-strong:var(--color-critical);--notify-border:var(--color-ring-critical-soft);--notify-background:var(--color-card-critical);--notify-foreground:var(--color-critical-strong)}.notification-banner--success,.torrent-toast--success{--notify-accent:var(--status-success-strong);--notify-accent-strong:var(--status-success);--notify-border:var(--status-success-border);--notify-background:var(--status-success-surface);--notify-foreground:var(--status-success-on)}.notification-banner--info,.torrent-toast--info{--notify-accent:var(--color-info-strong);--notify-accent-strong:var(--color-info);--notify-border:var(--color-info-border);--notify-background:var(--status-info-surface)}.notification-banner--warning,.torrent-toast--warn{--notify-accent:var(--color-warning-strong);--notify-accent-strong:var(--color-warning);--notify-border:var(--status-warning-border);--notify-background:var(--status-warning-surface);--notify-foreground:var(--status-warning-on)}.status-banner .status-spinner{animation:spin 1s linear infinite;border:var(--space-3xs) solid var(--color-info-border);border-radius:var(--radius-full);border-top-color:var(--color-info);flex-shrink:0;height:var(--icon-size-md);width:var(--icon-size-md)}.status-banner .status-message{flex:1 1 auto}@keyframes notification-slide-in{0%{opacity:0;transform:translateY(var(--toast-translate))}to{opacity:1;transform:translateY(0)}}.status-spinner--inline{animation:spin 1s linear infinite;border:var(--space-3xs) solid var(--color-border-info-soft);border-radius:var(--radius-full);border-top-color:var(--color-info);display:inline-block;height:var(--space-md);width:var(--space-md)}body.iframe-form{background-color:transparent;color:var(--color-text);font-family:var(--font-family-sans);margin:var(--space-lg)}body.iframe-form .container{width:100%;max-width:100%;margin:0;padding:0}body.iframe-form .\!container{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important}body.iframe-form .form-container{background-color:var(--color-surface-alt);border-radius:var(--radius-md);box-shadow:var(--shadow-md);color:var(--color-text);display:flex;flex-direction:column;gap:var(--space-md);padding:var(--space-lg)}body.iframe-form .form-container>p{margin:0}body.iframe-form form{display:flex;flex-direction:column}body.iframe-form form>*+*{margin-top:var(--space-sm)}body.iframe-form form h1,body.iframe-form form h2{color:var(--color-text);margin-top:var(--space-md)}body.iframe-form label{color:var(--color-subtle-text);display:block;font-weight:600;margin-top:var(--space-sm)}body.iframe-form label+.form-control,body.iframe-form label+.select,body.iframe-form label+.textarea{margin-top:var(--space-xs)}body.iframe-form .checkbox-group,body.iframe-form .radio-group{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-xs)}body.iframe-form .checkbox-group label,body.iframe-form .radio-group label{align-items:center;color:var(--color-subtle-text);display:inline-flex;font-weight:500;gap:var(--space-xs);margin:0}body.iframe-form .checkbox-group input[type=checkbox],body.iframe-form .radio-group input[type=radio]{margin:0}body.iframe-form .radio-group input[type=radio]{accent-color:var(--color-accent-strong)}body.iframe-form button.btn{align-self:flex-start;margin-top:var(--space-md)}body.iframe-form #status{background:var(--color-surface);border-radius:var(--radius-sm);box-shadow:inset 0 0 0 var(--border-width-hairline) var(--color-border-translucent);color:var(--color-subtle-text);min-height:calc(var(--space-2xl) + var(--space-xl));padding:var(--space-sm);white-space:pre-wrap}body.iframe-form .status-line{color:var(--color-subtle-text);margin:var(--space-2xs) 0}body.iframe-form .status-line.error{color:var(--color-critical-strong)}body.iframe-form .status-line.\!error{color:var(--color-critical-strong)!important}body.iframe-form .status-line.success{color:var(--color-info-strong)}body.iframe-form .status-line.\!success{color:var(--color-info-strong)!important}body.iframe-form .status-line.warn{color:var(--color-warning-strong)}@media (max-width:640px){body.iframe-form{margin:var(--space-md)}body.iframe-form .form-container{padding:var(--space-md)}}#sidebarContainer{position:relative;overflow:visible}#sidebar{position:fixed;top:0;left:0;width:var(--sidebar-width);min-width:var(--sidebar-width);height:100vh;height:100dvh;color:var(--color-text-frosted-strong);overflow-x:visible;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-gutter:stable both-edges;background:transparent;border-right:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:width .2s ease,transform .3s ease;z-index:var(--z-sidebar);box-shadow:none;isolation:isolate}#app.sidebar-collapsed,#sidebar.sidebar-collapsed,#sidebar[data-state=collapsed],body.sidebar-collapsed{--sidebar-width:var(--sidebar-width-collapsed)}#app.sidebar-expanded,#sidebar.sidebar-expanded,#sidebar[data-state=expanded],body.sidebar-expanded{--sidebar-width:var(--sidebar-width-expanded)}#sidebar .sidebar__inner{padding:var(--space-sidebar-shell-block-start) var(--space-sidebar-shell-inline) var(--space-sidebar-shell-block-end);border-radius:var(--radius-sidebar-shell);border:none;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;isolation:isolate;transition:color .2s ease}#sidebar .sidebar__inner,.sidebar-scroll{display:flex;flex-direction:column;height:100%;width:100%;overflow:visible}.sidebar-scroll{gap:var(--space-sidebar-scroll-gap);min-height:0;flex:1 1 auto}.sidebar-panel{position:relative;width:100%;display:flex;flex-direction:column;gap:var(--space-sidebar-panel-gap);padding:var(--space-sidebar-panel-padding-block) var(--space-sidebar-panel-padding-inline);border-radius:var(--radius-sidebar-panel);border:none;background:transparent;box-shadow:none;color:inherit;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden;isolation:isolate;transition:border-color .2s ease,box-shadow .22s ease,background .22s ease}.sidebar-panel--primary{flex:1 1 auto;min-height:0}.sidebar-panel__header{display:flex;justify-content:flex-end;margin-bottom:var(--space-md)}.sidebar-collapse-toggle{display:inline-flex;align-items:center;justify-content:center;width:var(--sidebar-control-size);height:var(--sidebar-control-size);border-radius:var(--radius-full);border:var(--border-width-hairline) solid var(--color-border-translucent-medium);background:var(--color-surface-tint-subtle);color:inherit;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease;flex-shrink:0;box-sizing:border-box}.sidebar-collapse-toggle:hover{background:var(--color-border-translucent);border-color:var(--color-border-translucent-stronger);color:var(--color-text)}.sidebar-collapse-toggle:focus-visible{outline:var(--space-3xs) solid var(--color-secondary);outline-offset:var(--space-2xs)}.sidebar-collapse-toggle__icon{width:var(--icon-size-sm);height:var(--icon-size-sm);transition:transform .2s ease}.sidebar-nav{display:flex;flex-direction:column;gap:var(--space-xs);opacity:1;transition:opacity .16s ease;width:100%}.sidebar-nav-link{--sidebar-nav-translate-x:0;--sidebar-nav-link-highlight-opacity:0;--sidebar-nav-link-highlight-scale:0.96;display:flex;align-items:center;gap:var(--space-sidebar-footer-gap);padding:var(--space-sidebar-nav-padding-block) var(--space-md);min-height:var(--sidebar-control-size);border-radius:var(--radius-sidebar-nav);font-size:var(--font-size-sidebar-nav);font-weight:600;letter-spacing:.015em;color:var(--color-text);text-decoration:none;width:100%;position:relative;border:var(--border-width-hairline) solid transparent;background:none;box-shadow:none;transform:translateX(var(--sidebar-nav-translate-x));transition:color .18s ease,border-color .2s ease,box-shadow .22s ease,transform .22s ease;overflow:hidden;isolation:isolate;backdrop-filter:none;-webkit-backdrop-filter:none}.sidebar-nav-link:after,.sidebar-nav-link:before{content:"";position:absolute;inset:calc(var(--border-width-hairline)*-1);border-radius:inherit;pointer-events:none;transition:opacity .22s ease,transform .24s ease;z-index:-1}.sidebar-nav-link:before{background:linear-gradient(120deg,var(--color-sidebar-accent-start) 0,var(--color-sidebar-accent-end) 100%);opacity:var(--sidebar-nav-link-highlight-opacity);transform:scale(var(--sidebar-nav-link-highlight-scale));filter:saturate(140%)}.sidebar-nav-link:after{background:linear-gradient(105deg,var(--color-sidebar-hover) 0,transparent 75%);opacity:.22;mix-blend-mode:screen;z-index:-2}.sidebar-nav-link:focus-visible,.sidebar-nav-link:hover{--sidebar-nav-link-highlight-opacity:1;--sidebar-nav-link-highlight-scale:1.02;--sidebar-nav-translate-x:var(--space-sidebar-nav-translate);color:var(--color-white);border-color:var(--color-sidebar-hover-strong);box-shadow:0 0 0 var(--border-width-hairline) var(--color-sidebar-hover-strong),var(--shadow-sidebar-accent)}.sidebar-nav-link:focus-visible{outline:none;box-shadow:var(--shadow-sidebar-focus-ring),var(--shadow-sidebar-accent)}.sidebar-nav-link:focus-visible:after,.sidebar-nav-link:hover:after{opacity:.35}.sidebar-nav-link--sub{font-size:var(--font-size-sidebar-subnav);font-weight:500;color:var(--color-sidebar-text-muted);padding-block:var(--space-sidebar-subnav-padding-block);letter-spacing:.02em;--sidebar-nav-link-highlight-opacity:0.25;--sidebar-nav-link-highlight-scale:1}.sidebar-icon{width:var(--space-lg);height:var(--space-lg);min-width:var(--space-lg);min-height:var(--space-lg);flex-shrink:0;display:block;filter:var(--sidebar-icon-filter);transition:filter .18s ease}.sidebar-footer{flex-direction:column;margin-top:auto;z-index:2}.sidebar-dropup-trigger,.sidebar-footer{display:flex;gap:var(--space-sidebar-footer-gap);position:relative}.sidebar-dropup-trigger{align-items:center;justify-content:space-between;width:100%;padding:var(--space-sidebar-trigger-padding-block) var(--space-md);min-height:var(--sidebar-control-size);border-radius:var(--radius-sidebar-nav);border:var(--border-width-hairline) solid transparent;background:none;color:var(--color-text);font-size:var(--font-size-sidebar-trigger);font-weight:600;cursor:pointer;box-sizing:border-box;flex-shrink:0;overflow:hidden;isolation:isolate;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;transition:border-color .2s ease,color .2s ease,box-shadow .22s ease}.sidebar-dropup-trigger:before{background:linear-gradient(120deg,var(--color-sidebar-accent-start) 0,var(--color-sidebar-accent-end) 100%);opacity:0;transform:scale(.96);transition:opacity .2s ease,transform .22s ease;z-index:-1;filter:saturate(140%)}.sidebar-dropup-trigger:after,.sidebar-dropup-trigger:before{content:"";position:absolute;inset:calc(var(--border-width-hairline)*-1);border-radius:inherit;pointer-events:none}.sidebar-dropup-trigger:after{background:linear-gradient(110deg,var(--color-sidebar-hover) 0,transparent 80%);opacity:.18;mix-blend-mode:screen;transition:opacity .2s ease;z-index:-2}.sidebar-dropup-trigger:focus-visible,.sidebar-dropup-trigger:hover{color:var(--color-white);border-color:var(--color-sidebar-hover-strong);box-shadow:0 0 0 var(--border-width-hairline) var(--color-sidebar-hover-strong),var(--shadow-sidebar-dropup)}.sidebar-dropup-trigger:focus-visible:before,.sidebar-dropup-trigger:hover:before{opacity:1;transform:scale(1.02)}.sidebar-dropup-trigger:focus-visible:after,.sidebar-dropup-trigger:hover:after{opacity:.35}.sidebar-dropup-trigger:focus-visible{outline:none;box-shadow:var(--shadow-sidebar-focus-ring),var(--shadow-sidebar-dropup)}.sidebar-dropup-trigger__glyph{width:var(--icon-size-md);height:var(--icon-size-md);opacity:.9}.sidebar-dropup-trigger__chevron{width:var(--icon-size-sm);height:var(--icon-size-sm);transition:transform .18s ease}.sidebar-dropup-trigger[aria-expanded=true] .sidebar-dropup-trigger__chevron,.sidebar-dropup-trigger__chevron.is-rotated{transform:rotate(180deg)}.sidebar-dropup-panel{position:absolute;left:0;right:calc(var(--space-sidebar-dropup-scroll-reserve)*-1);bottom:calc(100% + var(--space-sidebar-popover-offset));border-radius:var(--radius-xl);border:var(--border-width-hairline) solid var(--color-sidebar-border-strong);background:linear-gradient(160deg,color-mix(in srgb,var(--color-sidebar-surface) 88%,transparent) 0,color-mix(in srgb,var(--color-sidebar-surface-alt) 68%,transparent) 100%);box-shadow:inset 0 0 0 var(--border-width-fine) var(--color-sidebar-border),var(--shadow-sidebar-panel);padding:var(--space-sidebar-popover-padding-block) var(--space-sidebar-popover-padding-inline);color:var(--color-text-frosted);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(var(--space-sm));transition:opacity .18s ease,transform .18s ease,visibility .18s ease,box-shadow .22s ease;backdrop-filter:blur(var(--sidebar-panel-backdrop-blur)) saturate(var(--sidebar-panel-backdrop-saturation));-webkit-backdrop-filter:blur(var(--sidebar-panel-backdrop-blur)) saturate(var(--sidebar-panel-backdrop-saturation));z-index:5;isolation:isolate}.sidebar-dropup-panel[data-state=expanded]{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.sidebar-dropup-panel__inner{display:flex;flex-direction:column;gap:var(--space-sidebar-popover-gap);width:100%;padding-inline-end:var(--space-sidebar-dropup-scroll-reserve);max-height:var(--sidebar-dropup-max-height);overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable both-edges}.sidebar-dropup-panel__inner>*{width:100%;min-width:0}#sidebar[data-footer-state=expanded] .sidebar-nav{opacity:0;pointer-events:none}#sidebar[data-footer-state=collapsed] .sidebar-nav{opacity:1}.sidebar-loading-wrapper{display:flex;justify-content:center;align-items:center;padding:var(--space-2xl) 0;width:100%;grid-column:1/-1}.sidebar-loading-indicator{display:inline-flex;align-items:center;gap:var(--space-sm);color:var(--color-muted-strong);font-size:var(--font-size-sm);font-weight:500;letter-spacing:.01em}.sidebar-loading-text{white-space:nowrap}#app{box-sizing:border-box;transition:margin-left .2s ease,width .2s ease,max-width .2s ease}#app[data-sidebar-state=collapsed]{margin-left:var(--sidebar-width-collapsed);width:calc(100vw - var(--sidebar-width-collapsed));max-width:calc(100vw - var(--sidebar-width-collapsed))}#app[data-sidebar-state=expanded]{margin-left:var(--sidebar-width-expanded);width:calc(100vw - var(--sidebar-width-expanded));max-width:calc(100vw - var(--sidebar-width-expanded))}#sidebar.sidebar-collapsed .sidebar-nav-link,body.sidebar-collapsed #sidebar .sidebar-nav-link{justify-content:center;width:var(--sidebar-control-size);padding:0;margin-inline:auto;border-radius:var(--radius-full);--sidebar-nav-translate-x:0;--sidebar-nav-link-highlight-scale:1}#sidebar.sidebar-expanded .sidebar-nav-link,body.sidebar-expanded #sidebar .sidebar-nav-link{justify-content:flex-start}#sidebar.sidebar-collapsed .sidebar-text,body.sidebar-collapsed #sidebar .sidebar-text{display:none}#sidebar.sidebar-collapsed .sidebar__inner,body.sidebar-collapsed #sidebar .sidebar__inner{padding-inline:var(--space-2xs)}#sidebar.sidebar-collapsed .sidebar-panel,body.sidebar-collapsed #sidebar .sidebar-panel{padding-inline:calc(var(--space-3xs)*3)}#sidebar.sidebar-collapsed .sidebar-panel__header,body.sidebar-collapsed #sidebar .sidebar-panel__header{justify-content:center}#sidebar.sidebar-collapsed .sidebar-collapse-toggle,body.sidebar-collapsed #sidebar .sidebar-collapse-toggle{margin-inline:auto}#sidebar .sidebar-toggle-icon--rotated{transform:rotate(180deg)}#sidebar.sidebar-collapsed .sidebar-toggle-icon--rotated,body.sidebar-collapsed #sidebar .sidebar-toggle-icon--rotated{transform:rotate(0deg)}#sidebar.sidebar-collapsed .sidebar-dropup-trigger,body.sidebar-collapsed #sidebar .sidebar-dropup-trigger{justify-content:center;width:var(--sidebar-control-size);height:var(--sidebar-control-size);padding:0;margin-inline:auto;border-radius:var(--radius-full)}#sidebar.sidebar-collapsed .sidebar-dropup-trigger .sidebar-text,body.sidebar-collapsed #sidebar .sidebar-dropup-trigger .sidebar-text,body.sidebar-collapsed #sidebar .sidebar-dropup-trigger__chevron{display:none}#sidebar.sidebar-collapsed .sidebar-dropup-trigger__glyph,body.sidebar-collapsed #sidebar .sidebar-dropup-trigger__glyph{margin:0}#sidebar.sidebar-collapsed .sidebar-nav-link:focus-visible,#sidebar.sidebar-collapsed .sidebar-nav-link:hover,body.sidebar-collapsed #sidebar .sidebar-nav-link:focus-visible,body.sidebar-collapsed #sidebar .sidebar-nav-link:hover{--sidebar-nav-translate-x:0}@media (min-width:768px){.sidebar-panel__header{display:flex}.sidebar-collapse-toggle{display:inline-flex}#sidebar{transform:translateX(0)!important;width:var(--sidebar-width);overflow:visible}#app[data-sidebar-state=collapsed]{margin-left:calc(var(--sidebar-width-collapsed) + var(--sidebar-content-gap));width:calc(100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap));max-width:calc(100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap))}#app[data-sidebar-state=expanded]{margin-left:calc(var(--sidebar-width-expanded) + var(--sidebar-content-gap));width:calc(100vw - var(--sidebar-width-expanded) - var(--sidebar-content-gap));max-width:calc(100vw - var(--sidebar-width-expanded) - var(--sidebar-content-gap))}}@keyframes card-motion-enter{0%{opacity:0;transform:translateY(var(--motion-card-enter-translate))}to{opacity:1;transform:translateY(0)}}@keyframes video-thumbnail-fade-in{0%{opacity:0}to{opacity:1}}@keyframes interface-fade-in{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0;transform:translateY(var(--motion-fade-in-translate))}to{opacity:1;transform:translateY(0)}}.status-line{margin-top:.25rem;margin-bottom:.25rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);line-height:1.375;color:var(--text-primary)}.status-line.error{color:var(--color-critical-strong)}.status-line.\!error{color:var(--color-critical-strong)!important}.status-line.warn{color:var(--color-warning-strong)}@keyframes ztr-rotate{to{transform:rotate(1turn)}}@keyframes ztr-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes svelte-181fgen-loader-animation{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes svelte-181fgen-fade-in{to{opacity:1}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.\!visible{visibility:visible!important}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.bottom-4{bottom:1rem}.left-4{left:1rem}.right-3{right:.75rem}.right-4{right:1rem}.top-0{top:0}.top-3{top:.75rem}.z-overlay-floating{z-index:var(--z-overlay-floating)}.z-overlay-toast{z-index:var(--z-overlay-toast)}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-4{margin-top:1rem;margin-bottom:1rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.-ml-2{margin-left:-.5rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.ml-auto{margin-left:auto}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-sm{margin-top:var(--space-sm)}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-1{height:.25rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-2xl{height:var(--space-2xl)}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-auto{height:auto}.h-full{height:100%}.max-h-modal-body{max-height:var(--modal-body-max-height)}.max-h-modal-pane{max-height:var(--modal-pane-max-height)}.max-h-modal-sheet{max-height:var(--modal-sheet-max-height)}.max-h-modal-shell{max-height:var(--modal-shell-max-height)}.max-h-profile-history{max-height:var(--profile-history-max-height)}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-16{width:4rem}.w-20{width:5rem}.w-24{width:6rem}.w-4{width:1rem}.w-44{width:11rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-72{width:18rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-auto{width:auto}.w-full{width:100%}.min-w-0{min-width:0}.min-w-full{min-width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-5xl{max-width:64rem}.max-w-docs{max-width:var(--layout-docs-max-width)}.max-w-md{max-width:28rem}.max-w-popover-safe{max-width:var(--popover-inline-safe-max)}.max-w-sm{max-width:24rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.translate-x-1{--tw-translate-x:0.25rem}.translate-x-1,.translate-x-5{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-5{--tw-translate-x:1.25rem}.rotate-90{--tw-rotate:90deg}.rotate-90,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-wait{cursor:wait}.resize-y{resize:vertical}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-sm{gap:var(--space-sm)}.gap-xl{gap:var(--space-xl)}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-border-translucent>:not([hidden])~:not([hidden]){border-color:var(--border-overlay)}.self-start{align-self:flex-start}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:var(--radius-full)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-lg{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-border{border-color:var(--border-default)}.border-border-translucent{border-color:var(--border-overlay)}.border-border-translucent-bright{border-color:var(--color-border-translucent-bright)}.border-border-translucent-medium{border-color:var(--color-border-translucent-medium)}.border-info{border-color:var(--color-info)}.border-overlay{border-color:var(--border-overlay)}.border-overlay-strong{border-color:var(--border-overlay-strong)}.border-status-danger-border{border-color:var(--status-danger-border)}.border-status-info-border{border-color:var(--status-info-border)}.border-status-success-border{border-color:var(--status-success-border)}.border-status-warning-border{border-color:var(--status-warning-border)}.border-surface-strong{border-color:var(--border-strong)}.border-warning-strong{border-color:var(--status-warning-strong)}.border-opacity-20{--tw-border-opacity:0.2}.bg-info{background-color:var(--color-info)}.bg-overlay-muted{background-color:var(--surface-overlay-muted)}.bg-overlay-panel{background-color:var(--surface-overlay-panel)}.bg-overlay-panel-soft{background-color:var(--surface-overlay-panel-soft)}.bg-overlay-strong{background-color:var(--surface-overlay-strong)}.bg-panel{background-color:var(--surface-panel)}.bg-status-danger-surface{background-color:var(--status-danger-surface)}.bg-status-info-surface{background-color:var(--status-info-surface)}.bg-status-success-surface{background-color:var(--status-success-surface)}.bg-status-warning-surface{background-color:var(--status-warning-surface)}.bg-surface{background-color:var(--surface-base)}.bg-surface-alt{background-color:var(--surface-alt)}.bg-transparent{background-color:transparent}.bg-warning-surface{background-color:var(--status-warning-surface)}.bg-white{background-color:var(--color-white)}.bg-overlay-banner{background-image:var(--surface-overlay-banner-gradient)}.stroke-border-translucent{stroke:var(--border-overlay)}.stroke-current{stroke:currentColor}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-lg{padding:var(--space-lg)}.p-md{padding:var(--space-md)}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-lg{padding-left:var(--space-lg);padding-right:var(--space-lg)}.px-md{padding-left:var(--space-md);padding-right:var(--space-md)}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.py-md{padding-top:var(--space-md);padding-bottom:var(--space-md)}.py-xl{padding-top:var(--space-xl);padding-bottom:var(--space-xl)}.pb-2{padding-bottom:.5rem}.pl-5{padding-left:1.25rem}.pr-1{padding-right:.25rem}.pt-1{padding-top:.25rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.font-mono{font-family:var(--font-family-mono)}.font-sans{font-family:var(--font-family-sans)}.text-2xl{font-size:var(--font-size-2xl);line-height:var(--line-height-relaxed)}.text-2xs{font-size:var(--font-size-2xs);line-height:var(--line-height-tight)}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-3xs{font-size:var(--font-size-3xs);line-height:var(--line-height-tight)}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[0\.75rem\]{font-size:.75rem}.text-base{font-size:var(--font-size-base)}.text-base,.text-lg{line-height:var(--line-height-base)}.text-lg{font-size:var(--font-size-lg)}.text-sm{font-size:var(--font-size-sm);line-height:var(--line-height-snug)}.text-xl{font-size:var(--font-size-xl);line-height:var(--line-height-relaxed)}.text-xs{font-size:var(--font-size-xs);line-height:var(--line-height-tight)}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.normal-case{text-transform:none}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-extra-wide{letter-spacing:var(--tracking-extra-wide)}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.text-critical{color:var(--color-critical)}.text-critical-strong{color:var(--color-critical-strong)}.text-info{color:var(--color-info)}.text-info-strong{color:var(--color-info-strong)}.text-muted{color:var(--text-muted)}.text-muted-strong{color:var(--text-muted-strong)}.text-primary{color:var(--text-primary)}.text-status-danger{color:var(--status-danger)}.text-status-danger-on{color:var(--status-danger-on)}.text-status-info{color:var(--status-info)}.text-status-info-on{color:var(--status-info-on)}.text-status-neutral{color:var(--status-neutral)}.text-status-private-on{color:var(--status-private-on)}.text-status-success{color:var(--status-success)}.text-status-success-on{color:var(--status-success-on)}.text-status-warning{color:var(--status-warning)}.text-status-warning-on{color:var(--status-warning-on)}.text-subtle{color:var(--text-subtle)}.text-text{color:var(--text-primary)}.text-text-frosted{color:var(--text-frosted-primary)}.text-text-strong{color:var(--color-text-strong)}.text-warning-strong{color:var(--status-warning-strong)}.underline{text-decoration-line:underline}.decoration-dotted{text-decoration-style:dotted}.underline-offset-2{text-underline-offset:2px}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-80{opacity:.8}.shadow-lg{--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.\!filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-transform{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-fast{transition-duration:var(--motion-duration-fast)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@media (max-width:640px){.bv-grid-video{gap:var(--space-md);grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){:root{--motion-duration-fast:0s;--motion-duration-base:0s;--motion-duration-slow:0s;--modal-motion-duration:0s}*,:after,:before{animation-delay:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;animation-timing-function:linear!important;transition-delay:0s!important;transition-duration:0s!important;transition-timing-function:linear!important}#app,#playerModal .player-modal__content,#sidebar,.btn,.btn-ghost,.card,.card[data-motion=enter],.fade-in,.icon-button,.menu__item,.modal-nav,.notification-banner,.notification-portal,.popover-panel,.popover__panel,.progress-bar-fill,.sidebar-collapse-toggle,.sidebar-collapse-toggle__icon,.sidebar-dropup-panel,.sidebar-dropup-trigger,.sidebar-dropup-trigger__chevron,.sidebar-loading-indicator,.sidebar-loading-wrapper,.sidebar-nav,.sidebar-nav-link,.status-banner .status-spinner,.status-spinner--inline,.torrent-toast,.video-modal__panel,.watch-history-card,.watch-history-card__action,.watch-history-card__creatorAvatar,.watch-history-card__creatorName,.watch-history-card__title{transition-property:none!important}.popover-panel,.popover__panel{transform:none!important}.popover-panel[data-state=open],.popover__panel[data-state=open]{opacity:1}.popover-panel[data-state=closed],.popover__panel[data-state=closed]{opacity:0}.card[data-motion=enter],.fade-in,[data-video-thumbnail][data-thumbnail-loaded=true]{opacity:1;animation:none!important}.notification-banner,.status-banner .status-spinner,.status-spinner--inline,.torrent-toast{animation:none!important}.notification-portal{transform:none!important;opacity:1!important}}@media (min-width:768px){.md\:flex#playerModal{display:flex}}.hover\:border-status-danger-border:hover{border-color:var(--status-danger-border)}.hover\:bg-overlay-panel:hover{background-color:var(--surface-overlay-panel)}.hover\:bg-panel-hover:hover{background-color:var(--surface-panel-hover)}.hover\:bg-status-warning-surface:hover{background-color:var(--status-warning-surface)}.hover\:text-info-strong:hover{color:var(--color-info-strong)}.hover\:text-text:hover{color:var(--text-primary)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-90:hover{opacity:.9}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-info:focus{--tw-ring-color:var(--color-info)}.focus\:ring-status-info:focus{--tw-ring-color:var(--status-info)}.focus\:ring-status-success:focus{--tw-ring-color:var(--status-success)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus\:ring-offset-surface:focus{--tw-ring-offset-color:var(--surface-base)}.focus-visible\:bg-primary:focus-visible{background-color:var(--color-primary)}.focus-visible\:outline:focus-visible{outline-style:solid}.focus-visible\:outline-2:focus-visible{outline-width:2px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-info:focus-visible{outline-color:var(--color-info)}.focus-visible\:outline-status-warning-border:focus-visible{outline-color:var(--status-warning-border)}@media (min-width:640px){.sm\:col-span-2{grid-column:span 2/span 2}.sm\:w-1\/3{width:33.333333%}.sm\:w-auto{width:auto}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:flex-wrap{flex-wrap:wrap}.sm\:items-start{align-items:flex-start}.sm\:items-end{align-items:flex-end}.sm\:items-center{align-items:center}.sm\:justify-end{justify-content:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:self-end{align-self:flex-end}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-0{padding-top:0;padding-bottom:0}.sm\:pt-8{padding-top:2rem}}@media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:flex{display:flex}.md\:h-64{height:16rem}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-end{align-items:flex-end}.md\:items-center{align-items:center}.md\:justify-end{justify-content:flex-end}.md\:gap-md{gap:var(--space-md)}}@media (min-width:1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:items-start{align-items:flex-start}.lg\:justify-between{justify-content:space-between}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:text-right{text-align:right}} \ No newline at end of file diff --git a/css/tailwind.source.css b/css/tailwind.source.css index 5ffd166b..c2204b81 100644 --- a/css/tailwind.source.css +++ b/css/tailwind.source.css @@ -441,15 +441,6 @@ --progress-fill: var(--color-info-strong); } - .progress[data-variant="blog"], - [data-progress-meter][data-variant="blog"], - .progress.progress--blog, - [data-progress-meter].progress--blog { - --progress-height: var(--blog-carousel-progress-height); - --progress-track: var(--blog-carousel-progress-track); - --progress-fill: var(--blog-carousel-progress-active); - --progress-radius-current: var(--blog-carousel-progress-radius); - } .btn-ghost { @apply btn border border-border border-opacity-60 bg-transparent text-text shadow-none; @@ -509,218 +500,40 @@ * Blog carousel component styles * Tokens consumed here are defined in css/tokens.css under the * "Blog carousel tokens" section: - * --blog-carousel-gap - * --blog-carousel-slide-radius - * --blog-carousel-slide-min-height - * --blog-carousel-slide-background - * --blog-carousel-slide-foreground - * --blog-carousel-slide-scale-inactive - * --blog-carousel-progress-height - * --blog-carousel-progress-radius - * --blog-carousel-progress-track - * --blog-carousel-progress-active */ - .blog-carousel { - position: relative; - display: grid; - gap: var(--blog-carousel-gap); - --blog-carousel-index: 0; - --blog-carousel-track-duration: var(--motion-duration-slow, 320ms); - --blog-carousel-track-ease: var(--motion-ease-out, ease-out); - --blog-carousel-slide-duration: var(--motion-duration-base, 160ms); - --blog-carousel-progress-duration: var(--motion-duration-slow, 320ms); - --blog-carousel-per-page: 1; - } - .blog-carousel[data-transition="instant"] { - --blog-carousel-track-duration: 0s; - --blog-carousel-slide-duration: 0s; - } - .blog-carousel__viewport { - position: relative; - overflow: hidden; - border-radius: var(--blog-carousel-slide-radius); - } - .blog-carousel__track { - display: grid; - grid-auto-flow: column; - grid-auto-columns: minmax(0, calc(100% / var(--blog-carousel-per-page))); - gap: var(--blog-carousel-gap); - width: 100%; - margin: 0; - padding: 0; - list-style: none; - transform: translate3d(calc(var(--blog-carousel-index) * -100%), 0, 0); - transition: transform var(--blog-carousel-track-duration) - var(--blog-carousel-track-ease); - will-change: transform; - } - .blog-carousel__track[data-transition="instant"] { - --blog-carousel-track-duration: 0s; - } - .blog-carousel[data-index="0"] { - --blog-carousel-index: 0; - } - .blog-carousel[data-index="1"] { - --blog-carousel-index: 1; - } - .blog-carousel[data-index="2"] { - --blog-carousel-index: 2; - } - .blog-carousel[data-index="3"] { - --blog-carousel-index: 3; - } - .blog-carousel[data-index="4"] { - --blog-carousel-index: 4; - } - .blog-carousel[data-index="5"] { - --blog-carousel-index: 5; - } - .blog-carousel[data-index="6"] { - --blog-carousel-index: 6; - } - .blog-carousel[data-index="7"] { - --blog-carousel-index: 7; - } - .blog-carousel[data-index="8"] { - --blog-carousel-index: 8; - } - .blog-carousel__slide { - position: relative; - display: grid; - align-content: stretch; - min-height: var(--blog-carousel-slide-min-height); - border-radius: var(--blog-carousel-slide-radius); - background: var(--blog-carousel-slide-background); - color: var(--blog-carousel-slide-foreground); - overflow: hidden; - box-shadow: var(--shadow-md); - opacity: 0.55; - transform: scale(var(--blog-carousel-slide-scale-inactive)); - transition: - opacity var(--blog-carousel-slide-duration) - var(--motion-ease-in-out, ease-in-out), - transform var(--blog-carousel-slide-duration) - var(--blog-carousel-track-ease), - box-shadow var(--blog-carousel-slide-duration) - var(--blog-carousel-track-ease); - } - .blog-carousel__slide[data-active="true"] { - opacity: 1; - transform: scale(1); - box-shadow: var(--shadow-lg); - z-index: 1; - } - .blog-carousel__slide[data-state="leaving"] { - opacity: 0.25; - } - .blog-carousel__slide[data-inert="true"] { - pointer-events: none; - } - .blog-carousel[data-per-page="1"] { - --blog-carousel-per-page: 1; - } - .blog-carousel[data-per-page="2"] { - --blog-carousel-per-page: 2; - } - .blog-carousel[data-per-page="3"] { - --blog-carousel-per-page: 3; - } - .blog-carousel[data-per-page="4"] { - --blog-carousel-per-page: 4; - } - .blog-carousel__controls { - display: flex; - justify-content: flex-end; - gap: var(--space-sm); - } - .blog-progress { - position: relative; - display: flex; - align-items: center; - width: 100%; - } - .blog-progress [data-progress-meter] { - flex: 1 1 auto; - } - @media (prefers-reduced-motion: reduce) { - .blog-carousel { - --blog-carousel-track-duration: 0s; - --blog-carousel-slide-duration: 0s; - --blog-carousel-progress-duration: 0s; - } - .blog-carousel__track { - transition-duration: 0s; - } - .blog-carousel__slide { - transition-duration: 0s; - } - } - .blog-emoji-showdown { - font-family: var(--font-family-mono); - text-decoration-line: underline; - text-decoration-style: dashed; - text-decoration-color: var(--color-blog-teal-accent); - text-underline-position: under; - } - .blog-task-list-item { - list-style-type: none; - } - .blog-task-checkbox { - margin: 0 0.35em 0.25em -1.6em; - vertical-align: middle; - } - .blog-table-align { - text-align: left; - } - .blog-table-align--left { - text-align: left; - } - - .blog-table-align--right { - text-align: right; - } - - .blog-table-align--center { - text-align: center; - } - - .blog-ztr-watermark { - float: right; - opacity: 0.2; - } .badge { @apply inline-flex items-center gap-1 rounded-full border border-status-neutral-border bg-status-neutral-surface px-3 py-1 text-2xs font-semibold uppercase tracking-extra-wide text-status-neutral-on; @@ -3294,7 +3107,6 @@ } .status-line.success { - color: var(--color-blog-green-500); } .status-line.warn { @@ -3302,827 +3114,151 @@ } /* Blog layout root scaffolding */ - .blog-html { - font-size: var(--blog-font-size-root); - } - - @media (max-width: theme('screens.md')) { - .blog-html { - font-size: var(--font-size-lg); - } - } - - .blog-body { - margin: 0; - padding: 0; - } - - .dark .blog-body { - background-color: var(--color-text-strong); - color: var(--color-blog-gray-220); - } - - .blog-app-root { - box-sizing: border-box; - font-family: var(--font-family-sans); - color: var(--color-text-strong); - } - - .dark .blog-app-root { - background-color: var(--color-text-strong); - color: var(--color-blog-gray-170); - } - - .blog-widget-shadow-host { - z-index: 90000; - } - - .blog-widget-overflow-fix { - overflow: auto; - height: 100%; - } - - .blog-app-root a, - .blog-app-root a:visited { - color: var(--color-text-strong); - } - - .dark .blog-app-root a, - .dark .blog-app-root a:visited { - color: var(--color-blog-neutral-100); - } - - .blog-app-root ol, - .blog-app-root ul { - padding-left: var(--space-md); - margin: 0; - } - - .blog-app-root ol li, - .blog-app-root ul li { - margin-bottom: var(--space-md); - } - - .blog-app-root blockquote { - margin: 0; - padding-left: var(--space-md); - border-left: var(--space-xs) solid var(--color-blog-gray-170); - } - - .blog-app-root code { - font-size: var(--blog-font-size-body); - background-color: var(--color-blog-neutral-120); - } - - .blog-app-root pre code { - overflow: scroll; - display: block; - padding: var(--space-md) var(--space-xs); - } - - .blog-app-root .unfinished-setup { - width: var(--blog-layout-fluid-width); - margin: 0 auto; - text-align: center; - } - - .blog-app-root .header.home h1 { - font-size: var(--blog-font-size-display); - } - - .blog-app-root .header .external-link { - text-align: right; - margin-top: calc(var(--space-md) * -1); - font-size: var(--blog-font-size-meta); - color: var(--color-blog-gray-220); - } - - @media (max-width: theme('screens.md')) { - .blog-app-root .header .external-link { - margin-bottom: var(--space-md); - margin-right: var(--blog-space-inline-lg); - } - } - - .blog-app-root .header .external-link a { - text-decoration: underline; - color: var(--color-blog-gray-220); - } - - .blog-app-root .header .picture-container { - position: relative; - display: inline-block; - width: var(--blog-avatar-size); - height: var(--blog-avatar-size); - overflow: hidden; - border-radius: 50%; - margin-bottom: calc(var(--space-2xs) * -1); - } - - .blog-app-root .header .picture-container img { - position: absolute; - top: 50%; - left: 50%; - width: 100%; - height: 100%; - object-fit: cover; - transform: translate(-50%, -50%); - clip-path: circle(50%); - } - - .blog-app-root .header.note .picture-container { - width: var(--blog-avatar-size-compact); - height: var(--blog-avatar-size-compact); - margin-bottom: calc(var(--blog-space-snug) * -1); - } - - .blog-app-root .header a { - text-decoration: none; - } - - .blog-app-root .header a span { - text-decoration: underline; - } - - .dark .blog-app-root .header a:visited { - color: var(--color-blog-gray-220); - } - - .dark .blog-app-root .header .external-link, - .dark .blog-app-root .header .external-link a { - color: var(--color-blog-gray-440); - } - - .blog-app-root .topic-wrapper { - margin-bottom: var(--space-lg); - display: flex; - flex-direction: row; - flex-wrap: wrap; - row-gap: var(--space-md); - } - - .blog-app-root .topic-wrapper div { - display: inline-grid; - margin-right: var(--space-md); - } - - .blog-app-root .topic-wrapper div a { - padding: var(--space-xs-snug) var(--space-md); - background-color: var(--color-blog-gray-190); - text-decoration: none; - border-radius: var(--radius-sm); - } - - .blog-app-root .topic-wrapper div a:hover { - background-color: var(--color-blog-gray-170); - } - - .blog-app-root .topic-wrapper div a.selected { - background-color: var(--color-text-strong); - color: var(--color-blog-neutral-100); - } - - .dark .blog-app-root .topic-wrapper div a { - background-color: var(--color-blog-gray-440); - color: var(--color-text-strong); - } - - .dark .blog-app-root .topic-wrapper div a:hover { - background-color: var(--color-blog-neutral-100); - } - - .dark .blog-app-root .topic-wrapper div a.selected { - background-color: var(--color-blog-gray-220); - } - - .blog-app-root .externalLink { - display: block; - text-align: right; - margin-top: calc(var(--space-md) * -1); - font-size: 0.8em; - color: var(--color-blog-gray-220); - } - - .blog-app-root .externalLink a { - color: var(--color-blog-gray-220); - } - - .blog-app-root .about { - margin-bottom: var(--space-xl); - padding-bottom: var(--space-md); - border-bottom: var(--space-xs) solid var(--color-blog-gray-170); - } - - .dark .blog-app-root .about { - border-bottom: var(--space-xs) solid var(--color-card); - } - - .blog-app-root .separator { - margin-bottom: var(--space-xl); - border-bottom: var(--space-xs) solid var(--color-blog-gray-170); - } - - .dark .blog-app-root .separator { - border-bottom: var(--space-xs) solid var(--color-card); - } - - .blog-app-root .top-notes { - display: flex; - color: var(--color-blog-gray-440); - flex-wrap: wrap; - justify-content: space-between; - gap: var(--space-xl); - width: 100%; - margin-bottom: var(--space-md); - padding-bottom: var(--space-xl); - border-bottom: var(--space-xs) solid var(--color-blog-neutral-100); - } - - @media (max-width: theme('screens.md')) { - .blog-app-root .top-notes { - display: block; - } - } - - @media (max-width: theme('screens.md')) { - .blog-app-root .top-notes { - padding-bottom: 0; - } - } - - .blog-app-root .top-notes .note { - flex: 1 1 calc(50% - var(--space-xl)); - box-sizing: border-box; - } - - @media (max-width: theme('screens.md')) { - .blog-app-root .top-notes .note { - margin-bottom: var(--space-xl); - } - } - - .blog-app-root .top-notes .note a { - text-decoration: none; - } - - .blog-app-root .top-notes .note img { - width: 100%; - height: var(--blog-top-note-image-height); - object-fit: cover; - margin-bottom: var(--space-xs); - border-radius: var(--radius-sm); - } - - .blog-app-root .top-notes .note .title { - display: block; - margin-bottom: var(--blog-space-snug); - font-size: var(--blog-font-size-title); - font-weight: bolder; - } - - .blog-app-root .top-notes .note .summary { - margin-bottom: var(--blog-space-snug); - font-size: var(--blog-font-size-body); - } - - .blog-app-root .top-notes .note .date { - font-size: var(--blog-font-size-meta); - color: var(--color-blog-gray-275); - } - - .dark .blog-app-root .top-notes { - color: var(--color-blog-gray-220); - border-bottom: var(--space-xs) solid var(--color-card); - } - - .blog-app-root .short-notes { - border-bottom: var(--space-xs) solid var(--color-blog-neutral-100); - padding-bottom: var(--space-md); - margin-bottom: var(--space-xl); - } - - .blog-app-root .short-notes .blog-carousel__slide { - font-size: var(--blog-font-size-body); - overflow-wrap: break-word; - } - - .blog-app-root .short-notes .blog-carousel__slide a { - text-decoration: none; - } - - .blog-app-root .short-notes .blog-carousel__slide .date { - font-size: var(--blog-font-size-meta); - color: var(--color-blog-gray-275); - margin-bottom: var(--blog-space-compact); - } - - .dark .blog-app-root .short-notes { - border-bottom: var(--space-xs) solid var(--color-card); - } - - .dark .blog-app-root .short-notes a { - color: var(--color-blog-gray-220); - } - - @media (max-width: theme('screens.md')) { - .blog-app-root .short-notes [data-carousel-control] { - display: none; - } - } - - .blog-app-root .listing-notes { - margin-top: var(--space-md); - color: var(--color-blog-gray-440); - } - - .blog-app-root .listing-notes.short-feed-full li { - margin-bottom: var(--space-xl); - } - - .blog-app-root .listing-notes.short-feed-full .summary { - color: var(--color-text-strong); - } - - .blog-app-root .listing-notes ul { - list-style-type: none; - padding: 0; - margin: 0; - } - - .blog-app-root .listing-notes ul li { - margin-bottom: var(--space-md); - } - - .blog-app-root .listing-notes ul li h2 { - font-size: var(--blog-font-size-title); - margin-bottom: var(--space-xs); - } - - .blog-app-root .listing-notes ul li h2 a { - display: block; - font-size: var(--blog-font-size-title); - } - - .blog-app-root .listing-notes ul li .summary { - margin-bottom: var(--blog-space-snug); - overflow-wrap: break-word; - } - - .blog-app-root .listing-notes ul li .summary p { - margin: 0; - } - - .blog-app-root .listing-notes ul li .summary img { - display: block; - margin: var(--space-xl) auto; - max-width: 100%; - border-radius: var(--radius-sm); - } - - .blog-app-root .listing-notes ul li .summary video { - width: 100%; - margin: var(--space-xl) auto; - } - - .blog-app-root .listing-notes ul li .summary audio { - width: 100%; - margin: var(--space-xl) auto; - } - - .blog-app-root .listing-notes ul li .date { - font-size: var(--blog-font-size-meta); - color: var(--color-blog-gray-275); - } - - .dark .blog-app-root .listing-notes { - color: var(--color-blog-gray-220); - } - - .dark .blog-app-root .listing-notes.short-feed-full .summary { - color: var(--color-white); - } - - .blog-app-root h1 { - font-size: var(--font-size-2xl); - line-height: var(--blog-line-height-tight); - margin-top: 0; - } - - @media (max-width: theme('screens.md')) { - .blog-app-root h1 { - font-size: var(--blog-font-size-h1-mobile); - } - } - - .blog-app-root .note-wrapper { - position: relative; - margin-top: var(--space-xl); - overflow-wrap: break-word; - } - - .blog-app-root .note-wrapper h1, - .blog-app-root .note-wrapper h2, - .blog-app-root .note-wrapper h3 { - margin-top: var(--blog-space-heading-stack); - margin-bottom: var(--blog-space-heading-gap); - } - - .blog-app-root .note-wrapper h1:first-of-type { - margin-top: 0; - } - - .blog-app-root .note-wrapper .content { - margin-top: var(--space-lg); - } - - .blog-app-root .note-wrapper p { - line-height: var(--blog-line-height-body); - margin-top: 0; - } - - .blog-app-root .note-wrapper .date { - display: block; - margin-bottom: var(--space-xs); - font-size: var(--blog-font-size-meta); - color: var(--color-blog-gray-275); - } - - .blog-app-root .note-wrapper img { - display: block; - margin: var(--space-xl) auto; - max-width: 100%; - border-radius: var(--radius-sm); - } - - .blog-app-root .note-wrapper img.note-banner { - margin: var(--blog-space-media-stack-start) auto var(--blog-space-media-stack-end); - transform: scale(1.1); - } - - .blog-app-root .note-wrapper video { - width: 100%; - margin: var(--space-xl) auto; - } - - .blog-app-root .note-wrapper audio { - width: 100%; - margin: var(--space-xl) auto; - } - - .blog-app-root .footer { - margin-top: var(--blog-space-stack-xxl); - padding-top: var(--space-xl); - margin-bottom: var(--space-xl); - border-top: var(--space-xs) solid var(--color-blog-gray-170); - font-size: var(--blog-font-size-meta); - text-align: center; - color: var(--color-blog-gray-220); - } - - .blog-app-root .footer a { - color: var(--color-blog-gray-220); - } - - .dark .blog-app-root .footer { - border-top: var(--space-xs) solid var(--color-card); - color: var(--color-blog-gray-440); - } - - .dark .blog-app-root .footer a, - .dark .blog-app-root .footer a:visited { - color: var(--color-blog-gray-440); - } - - .blog-app-root zap-threads { - font-size: var(--ztr-font-size); - } - - .blog-app-root #ztr-content img { - max-width: 100%; - } - - .blog-app-root #ztr-content { - max-width: 100%; - } - - .blog-app-root #ztr-root { - display: flex; - flex-direction: column; - font-family: var(--ztr-font); - font-size: var(--ztr-font-size); - color: var(--ztr-text-color); - border: var(--border-width-hairline) solid transparent; - word-wrap: break-word; - margin-top: 4em; - line-height: 1.2em; - } - - .blog-app-root #ztr-subtitle { - font-size: 1.2em; - color: var(--color-blog-gray-500); - } - - .blog-app-root #ztr-root a { - color: var(--ztr-link-color); - text-decoration: none; - } - - .blog-app-root .ztr-comment { - position: relative; - margin: 0; - padding: 0; - background-color: var(--ztr-background-color); - } - - .blog-app-root .ztr-comment:first-child { - border-top-left-radius: 0.3em; - border-top-right-radius: 0.3em; - } - - .blog-app-root .ztr-comment:last-child { - border-bottom-left-radius: 0.3em; - border-bottom-right-radius: 0.3em; - } - - .blog-app-root .ztr-comment-body { - padding: 1em; - } - - .blog-app-root .ztr-comment-info-wrapper { - display: flex; - justify-content: space-between; - align-items: center; - } - - .blog-app-root .ztr-comment-info { - display: flex; - align-items: center; - } - - .blog-app-root .ztr-comment-info-picture { - width: 3.5em; - } - - .blog-app-root ul.ztr-comment-info-items { - display: flex; - align-items: center; - list-style: none; - margin: 0; - padding: 0; - font-size: 0.9em; - } - - .blog-app-root ul.ztr-comment-info-items li { - display: inline-block; - cursor: default; - padding-right: 0.5em; - } - - .blog-app-root ul.ztr-comment-info-items li a { - font-weight: 600; - } - - .blog-app-root .ztr-comment-info-author a { - font-size: 1.2em; - padding-right: 0.2em; - } - - .blog-app-root .ztr-comment-info-dots { - cursor: pointer; - } - - .blog-app-root .ztr-comment-info-separator { - width: 0.5em; - } - - .blog-app-root .ztr-comment-info-picture img { - width: 2em; - height: 2em; - border-radius: 50%; - padding: 0.5em; - position: relative; - display: block; - object-fit: cover; - } - - .blog-app-root .ztr-comment-text, - .blog-app-root #ztr-content { - margin-bottom: 0.75em; - padding: 0 0.8em 0 3.5em; - line-height: 1.5em; - line-break: loose; - word-break: break-word; - overflow: hidden; - max-width: var(--layout-blog-max-width); - } - - .blog-app-root .ztr-comment-text p { - margin: 0 0 0.5em 0; - } - - .blog-app-root .ztr-comment-text code { - font-size: 1.1em; - margin: 0 0.2em; - } - - .blog-app-root .ztr-comment-text pre, - .blog-app-root .ztr-info-pane pre { - white-space: pre-wrap; - white-space: -moz-pre-wrap; - word-wrap: break-word; - } - - .blog-app-root .ztr-comment-text a:hover { - text-decoration: underline; - } - - .blog-app-root .ztr-comment-text img { - max-width: 100%; - } - - .blog-app-root .ztr-comment-text .warning { - margin-top: 0; - font-size: 0.8em; - display: flex; - align-items: center; - } - - .blog-app-root .ztr-comment-text .warning svg { - height: 1.2em; - fill: var(--color-blog-amber-500); - padding-right: 0.7em; - } - - .blog-app-root .ztr-comment-replies { - margin-left: 2em; - } - - .blog-app-root .highlight p { - background: var(--color-blog-amber-400); - color: var(--color-blog-gray-800); - display: inline; - padding: 0.2em; - } - - .blog-app-root .ztr-comment-expand { - display: flex; - justify-content: center; - } - - .blog-app-root .ztr-comment-expand span { - margin: 1em 0 1em 0.35em; - cursor: pointer; - } - - .blog-app-root ul.ztr-comment-actions, - .blog-app-root .ztr-comment-expand { - display: flex; - align-items: center; - list-style: none; - margin: 0; - padding: 0 0 0 3.5em; - font-weight: 600; - user-select: none; - } - - .blog-app-root ul.ztr-comment-actions li { - display: inline-flex; - align-items: center; - text-align: center; - padding: 0 2em 0 0; - cursor: pointer; - } - - .blog-app-root ul.ztr-comment-actions li span { - padding: 0.25em 0.25em 0 0.25em; - color: var(--ztr-icon-color); - } - - .blog-app-root #ztr-root svg { - fill: var(--ztr-icon-color); - width: 1.1em; - height: 1.1em; - } - - .blog-app-root .ztr-comment-action-reply:hover svg { - fill: var(--color-blog-purple-accent); - } - - .blog-app-root .ztr-comment-action-reply:hover span { - color: var(--color-blog-purple-accent); - } - - .blog-app-root .ztr-comment-action-zap:hover svg { - fill: var(--color-blog-amber-500); - } - - .blog-app-root .ztr-comment-action-zap:hover span { - color: var(--color-blog-amber-500); - } - - .blog-app-root .ztr-comment-action-like:hover svg { - fill: var(--color-blog-orange-600); - } - - .blog-app-root .ztr-comment-action-like:hover span { - color: var(--color-blog-orange-600); - } - - .blog-app-root .ztr-reply-form { - padding: 0 0.5em 0 3.5em; - } - - .blog-app-root .ztr-reply-form textarea { - font-family: var(--ztr-font); - font-size: 1.1em; - line-height: 1.4; - color: var(--color-blog-gray-800); - background-color: var(--color-blog-neutral-50); - border: var(--border-width-hairline) solid var(--color-blog-gray-220); - outline: none; - width: calc(100% - 1.5em); - padding: 0.7em; - margin: 0.5em 0; - height: 4em; - border-radius: 0.2em; - min-height: 4em; - resize: vertical; - } - - .blog-app-root .ztr-reply-form:disabled { - opacity: 65%; - user-select: none; - } - - .blog-app-root .ztr-reply-controls { - display: flex; - align-items: center; - justify-content: flex-end; - } - - .blog-app-root .ztr-reply-controls span { - font-weight: bold; - font-size: 0.85em; - margin-right: 1em; - user-select: none; - cursor: default; - } - - .blog-app-root .ztr-reply-error { - color: var(--color-blog-error); - } - - .blog-app-root .ztr-reply-controls button { - font-family: var(--ztr-font); - appearance: none; - border: none; - padding: 0.5em 1em; - border-radius: 0.2em; - font-size: 0.85em; - font-weight: 600; - cursor: pointer; - } - - .blog-app-root .ztr-reply-login-button { - color: var(--color-white); - background-color: var(--ztr-login-button-color); - margin-left: 1em; - } - - .blog-app-root .ztr-reply-button { - color: var(--ztr-text-color); - display: flex; - align-items: center; - background-color: var(--ztr-background-color); - } - - .blog-app-root .ztr-info-pane { - padding: 0 0.5em 1em 3.5em; - } - - .blog-app-root .ztr-info-pane pre { - font-size: 0.8em; - } - - .blog-app-root .ztr-spinner { - width: 1.2em; - height: 1.2em; - padding: 0.9em; - animation: ztr-rotate 4s linear infinite; - } - - .blog-app-root .ztr-reply-button:disabled { - opacity: 65%; - pointer-events: none; - cursor: pointer; - user-select: none; - } - - .blog-app-root .ztr-spinner .path { - stroke: var(--ztr-text-color); - stroke-linecap: round; - animation: ztr-dash 1.5s ease-in-out infinite; - } + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @keyframes ztr-rotate { 100% { @@ -4147,79 +3283,12 @@ } } - .blog-app-root .ztr-comment-new .ztr-reply-form { - margin: 0.5em 0; - padding: 0; - } - .blog-app-root .ztr-comment-new .ztr-comment-body { - padding: 0; - } - .blog-app-root .ztr-comment-new .ztr-comment-actions { - font-size: 1.1em; - padding: 0; - } - @media (prefers-color-scheme: dark) { - .blog-app-root .ztr-spinner .path { - stroke: var(--ztr-text-color, var(--color-blog-gray-200)); - } - .blog-app-root .ztr-comment, - .blog-app-root .ztr-reply-button { - background-color: var(--ztr-background-color, rgba(255, 255, 255, 0.06)); - } - .blog-app-root .ztr-reply-login-button { - color: var(--color-blog-gray-800); - background-color: var(--ztr-login-button-color, var(--color-blog-gray-200)); - } - .blog-app-root #ztr-root svg { - fill: var(--ztr-icon-color, var(--color-blog-gray-200)); - } - - .blog-app-root ul.ztr-comment-actions li span { - color: var(--ztr-icon-color); - } - - .blog-app-root .ztr-comment-action-reply:hover svg { - fill: var(--color-blog-purple-muted); - } - - .blog-app-root .ztr-comment-action-reply:hover span { - color: var(--color-blog-purple-muted); - } - } - - .blog-app-root .loader-container.svelte-181fgen { - display: flex; - align-items: center; - justify-content: center; - } - - .blog-app-root .loader.svelte-181fgen { - display: inline-block; - width: var(--blog-loader-dimension-lg); - height: var(--blog-loader-dimension-lg); - opacity: 0; - animation: - svelte-181fgen-fade-in 0.5s 0.4s forwards, - svelte-181fgen-loader-animation 2s linear infinite 0.4s; - } - - .blog-app-root .loader.svelte-181fgen:after { - content: " "; - display: block; - width: var(--blog-loader-dimension-md); - height: var(--blog-loader-dimension-md); - margin: var(--space-xs); - border-radius: 50%; - border: var(--blog-loader-border-width) solid var(--color-blog-gray-275); - border-color: var(--color-blog-gray-275) transparent var(--color-blog-gray-275) transparent; - animation: svelte-181fgen-loader-animation 2s linear infinite; - } @keyframes svelte-181fgen-loader-animation { 0% { @@ -4237,44 +3306,10 @@ } } - .dark .blog-app-root .loader.svelte-181fgen:after { - border: var(--blog-loader-border-width) solid var(--color-card); - border-color: var(--color-card) transparent var(--color-card) transparent; - } - .blog-body #theme-toggle.svelte-bxrhh.svelte-bxrhh { - display: none; - } - .blog-body #theme-toggle.svelte-bxrhh + label.svelte-bxrhh { - display: inline-block; - cursor: pointer; - height: var(--space-md); - width: var(--space-md); - position: absolute; - top: var(--space-md); - right: var(--space-2xl); - border-radius: var(--radius-toggle-thumb); - transition-duration: 0.3s; - content: ""; - } - @media (max-width: theme('screens.md')) { - .blog-body #theme-toggle.svelte-bxrhh + label.svelte-bxrhh { - right: var(--space-md); - } - } - .blog-body #theme-toggle.svelte-bxrhh:not(:checked) + label.svelte-bxrhh { - background-color: var(--color-blog-gray-180); - } - .blog-body #theme-toggle.svelte-bxrhh:checked + label.svelte-bxrhh { - background-color: transparent; - box-shadow: var(--blog-theme-toggle-shadow); - } - .blog-app-root .ztr-nowrap { - white-space: nowrap; - } } diff --git a/css/tokens.css b/css/tokens.css index dbe5f60d..4c879e98 100644 --- a/css/tokens.css +++ b/css/tokens.css @@ -153,9 +153,6 @@ --revert-modal-sidebar-min: 240px; --revert-modal-sidebar-width: 280px; --popover-inline-safe-max: calc(100vw - var(--space-xl)); - --blog-layout-fluid-width: 80%; - --blog-layout-max-width: 47.5rem; - --blog-embed-height: auto; /* Progress primitives */ --progress-height-sm: 0.25rem; @@ -166,52 +163,6 @@ --progress-transition-duration: var(--motion-duration-fast); --progress-transition-ease: var(--motion-ease-out); - /* Blog layout */ - --blog-font-size-root: 1.25rem; - --blog-font-size-display: 3rem; - --blog-font-size-title: 1.1rem; - --blog-font-size-body: 0.9rem; - --blog-font-size-meta: 0.8rem; - --blog-font-size-h1-mobile: 1.6rem; - --blog-space-compact: 0.3rem; - --blog-space-snug: 0.4rem; - --blog-space-stack-xxl: 4rem; - --blog-space-inline-lg: 2.5rem; - --blog-space-media-stack-start: 2.5rem; - --blog-space-media-stack-end: 3.5rem; - --blog-space-heading-stack: 1.4rem; - --blog-space-heading-gap: 0.6rem; - --blog-avatar-size: 2.5rem; - --blog-avatar-size-compact: 1.5rem; - --blog-line-height-body: 1.3rem; - --blog-line-height-tight: 0.9; - --ztr-font: var(--font-family-sans); - --ztr-font-size: var(--font-size-base); - --ztr-text-color: var(--color-blog-gray-800); - --ztr-link-color: var(--color-blog-purple-700); - --ztr-icon-color: var(--color-blog-gray-700); - --ztr-background-color: var(--color-blog-background); - --ztr-login-button-color: var(--color-blog-gray-800); - - /* Blog carousel tokens */ - --blog-carousel-gap: var(--space-lg); - --blog-carousel-slide-radius: var(--radius-xl); - --blog-carousel-slide-min-height: 18rem; - --blog-carousel-slide-background: var(--color-blog-neutral-50); - --blog-carousel-slide-foreground: var(--color-blog-gray-900); - --blog-carousel-slide-scale-inactive: 0.96; - --blog-carousel-progress-height: var(--progress-height-sm); - --blog-carousel-progress-radius: var(--progress-radius); - --blog-carousel-progress-track: var(--color-border-translucent); - --blog-carousel-progress-active: var(--color-blog-purple-500); - --blog-loader-border-width: 6px; - --blog-loader-dimension-lg: 92px; - --blog-loader-dimension-md: 64px; - --blog-theme-toggle-shadow-offset: 6px; - --blog-theme-toggle-shadow: inset calc(var(--blog-theme-toggle-shadow-offset) * -1) - calc(var(--blog-theme-toggle-shadow-offset) * -1) - var(--border-width-hairline) var(--border-width-hairline) var(--color-card); - /* Spacing scale */ --space-4xs: 0.0625rem; --space-3xs: 0.125rem; @@ -257,8 +208,6 @@ --status-log-min-height: 5rem; --layout-player-max-width: 68.75rem; --layout-docs-max-width: 92.5rem; - --layout-blog-max-width: 46.875rem; - --blog-top-note-image-height: 12.5rem; --icon-size-sm: var(--font-size-lg); --icon-size-md: var(--space-md-plus); --icon-size-lg: var(--space-xl-plus); @@ -363,56 +312,6 @@ --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --modal-motion-duration: var(--motion-duration-base); } -:root[data-theme="light"], -:root[data-theme="dark"], -:root:not([data-theme]) { - /* Blog palette (theme-agnostic color values) */ - --color-blog-transparent: rgb(0 0 0 / 0); - --color-blog-cyan-500: rgb(6 182 212); - --color-blog-sky-500: rgb(0 187 255); - --color-blog-teal-600: rgb(14 116 144); - --color-blog-green-800: rgb(20 83 45); - --color-blog-green-700: rgb(21 128 61); - --color-blog-teal-700: rgb(22 78 99); - --color-blog-gray-900: rgb(23 23 23); - --color-blog-coffee-900: rgb(28 25 23); - --color-blog-green-500: rgb(34 197 94); - --color-blog-gray-800: rgb(43 43 43); - --color-blog-gray-700: rgb(59 59 59); - --color-blog-teal-accent: rgb(62 139 138); - --color-blog-gray-650: rgb(64 64 64); - --color-blog-brown-700: rgb(68 64 60); - --color-blog-purple-900: rgb(88 28 135); - --color-blog-gray-500: rgb(102 102 102); - --color-blog-gray-450: rgb(115 115 115); - --color-blog-gray-440: rgb(116 116 116); - --color-blog-brown-500: rgb(120 113 108); - --color-blog-rust-700: rgb(124 45 18); - --color-blog-purple-700: rgb(126 34 206); - --color-blog-purple-accent: rgb(146 55 156); - --color-blog-purple-muted: rgb(150 96 156); - --color-blog-gray-300: rgb(153 153 153); - --color-blog-purple-500: rgb(168 85 247); - --color-blog-gray-275: rgb(169 169 169); - --color-blog-red-600: rgb(185 28 28); - --color-blog-rust-600: rgb(194 65 12); - --color-blog-error: rgb(202 23 23); - --color-blog-gray-220: rgb(203 203 203); - --color-blog-gray-210: rgb(204 204 204); - --color-blog-gray-200: rgb(222 222 222); - --color-blog-amber-500: rgb(228 152 77); - --color-blog-gray-190: rgb(224 224 224); - --color-blog-orange-600: rgb(227 84 40); - --color-blog-gray-180: rgb(233 233 233); - --color-blog-gray-170: rgb(235 235 235); - --color-blog-red-500: rgb(239 68 68); - --color-blog-amber-400: rgb(246 173 85); - --color-blog-neutral-100: rgb(245 245 245); - --color-blog-neutral-120: rgb(246 246 246); - --color-blog-orange-500: rgb(249 115 22); - --color-blog-neutral-50: rgb(253 253 253); - --color-blog-background: rgb(0 0 0 / 0.03); -} :root[data-theme="light"] { /* Light theme palette */ --color-page: rgb(247 248 252); diff --git a/docs/design-system.md b/docs/design-system.md index 156fa42f..50c43107 100644 --- a/docs/design-system.md +++ b/docs/design-system.md @@ -57,7 +57,7 @@ Run `npm run lint:tailwind-brackets` after touching markup or prose that embeds sources and fails when Tailwind's bracket syntax introduces hard-coded measurements (`text-[11px]`, `max-w-[18rem]`, etc.). - Prefer the semantic utilities shipped alongside the tokens (`max-w-popover-safe`, `max-h-modal-shell`, `text-3xs`). -- When you truly need an arbitrary value, drive it with a design token by referencing the CSS custom property (`w-[var(--blog-layout-fluid-width)]`, `min-h-[var(--form-textarea-min-height)]`). +- When you truly need an arbitrary value, drive it with a design token by referencing the CSS custom property (`w-[var(--layout-player-max-width)]`, `min-h-[var(--form-textarea-min-height)]`). - Update the allowlist sparingly—every entry should correspond to a documented token so future adjustments cascade automatically. The lint shares the same underlying script as `npm run lint:tokens`, so both commands stay in lockstep with the design-system @@ -82,20 +82,6 @@ Tokens are sourced from `css/tokens.css` and consumed as CSS custom properties. Limit overrides to variables defined in `css/tokens.css` and document any long-lived changes in this file so the design tokens remain the source of truth. Feature-flagged experiments should wrap overrides in a `data-flag-` selector or toggle them via controller logic so the defaults remain stable when the flag is off. -### Blog layout tokens - -The blog embed now consumes dedicated typography and spacing tokens alongside Tailwind utilities. `css/tokens.css` exposes the following helpers: - -- `--blog-font-size-root`, `--blog-font-size-display`, `--blog-font-size-title`, `--blog-font-size-body`, `--blog-font-size-meta`, and `--blog-font-size-h1-mobile` scale copy across the blog shell, hero headings, and metadata. -- `--blog-line-height-body` and `--blog-line-height-tight` set the rhythm for long-form text and compact headers. -- `--blog-layout-fluid-width` and `--blog-layout-max-width` define the responsive container width; pair them with Tailwind utilities (`mx-auto`, `md:w-[var(--blog-layout-fluid-width)]`, `md:max-w-[var(--blog-layout-max-width)]`) when mounting the blog root. -- `--blog-space-compact`, `--blog-space-snug`, `--blog-space-heading-stack`, `--blog-space-heading-gap`, `--blog-space-inline-lg`, `--blog-space-media-stack-start`, `--blog-space-media-stack-end`, and `--blog-space-stack-xxl` standardise the bespoke gaps used throughout article summaries, media blocks, and footer treatments. -- `--blog-avatar-size` and `--blog-avatar-size-compact` size topic avatars responsively. - -Templates should reference these tokens (directly or via Tailwind arbitrary values) instead of hard-coded measurements so the embed stays in sync with future blog refreshes. - -The blog palette now resolves from the base `:root` scope, making color and layout tokens theme-agnostic. Neither the light nor dark theme overrides these variables, so any future blog-specific deltas should be called out explicitly in this guide if they return. - ## Semantic Palette All interactive surfaces now draw from a shared semantic color map exposed through `css/tokens.css` and Tailwind utility aliases. The palette is grouped into text, surface, overlay, and status slots so controllers can swap state styles without reaching for raw Tailwind hues: @@ -112,43 +98,9 @@ All interactive surfaces now draw from a shared semantic color map exposed throu - Use `text-info`/`hover:text-info-strong` for links that previously relied on `text-blue-400` so anchors adapt in both light and dark modes. - When rendering tinted descriptions or placeholders, prefer `text-muted`, `text-muted-strong`, or `text-subtle` over semi-transparent whites. Token overrides keep the same classes usable across the default and light themes. -### Blog carousel markup - -The short-notes carousel ships as a semantic wrapper around the `blog-carousel` primitive defined in `css/tailwind.source.css`. The runtime no longer injects inline styles or Splide classes—layout is driven entirely by data attributes that map onto tokenised CSS rules. - -**Structure** - -```html -
-
-
    -
  • - ... -
    • - -
- - -
-
- -
-
-``` - -**State contract** - -- `data-per-page` controls how many columns render inside the viewport. CSS exposes variants for 1–4 slides per page; the custom property `--blog-carousel-per-page` updates automatically. -- `data-index` represents the active *page* (zero-indexed). The track translates by `100%` for each page, so the attribute should advance in whole-number increments rather than slide indices. -- Slides expose `data-index`, `data-active`, `data-inert`, and `data-state`. The carousel controller toggles `data-state="active"`, `"idle"`, and `"leaving"` to drive scale/opacity transitions without touching inline styles. -- The root `section` advertises `data-state="active" | "idle"` plus `data-transition="auto" | "instant"` when short-circuiting animations (for example, during first render or programmatic jumps). -- Progress wrappers set `data-state="idle" | "active" | "paused" | "complete"` while the inner `` leverages the shared `progress` primitive (`data-progress-meter`, `data-variant="blog"`) so theme tokens continue to drive track/fill colours. - -Controllers should rely on these data hooks when orchestrating autoplay, pausing on pointer/visibility changes, or syncing the segmented progress indicator. Avoid reintroducing inline `style` mutations—tests enforce the contract via the inline-style guard. - ### Layout & spacing extensions -The core spacing scale gained intermediate stops for tighter micro-layouts and larger hero treatments. `css/tokens.css` now exports `--space-4xs`, `--space-3xs`, `--space-xs-snug`, `--space-md-plus`, `--space-xl-compact`, `--space-xl-plus`, and `--space-2xl-plus`; Tailwind surfaces matching utilities such as `p-4xs`, `p-3xs`, `px-xs-snug`, `py-md-plus`, `gap-xl-compact`, `px-xl-plus`, and `gap-2xl-plus`. Pair them with the new layout primitives—`--menu-min-width` (`min-w-menu`), `--modal-max-width` (`max-w-modal`), `--layout-player-max-width` (`max-w-player`), and `--layout-docs-max-width` (`max-w-docs`)—to anchor consistent breakpoints across popovers, modals, and documentation shells without reintroducing raw `rem`/`px` literals. Blog-specific chrome reuses the same additions: the theme toggle knob now references `--radius-toggle-thumb`, and focus affordances draw from `--outline-thick-width` instead of hard-coded pixel outlines. +The core spacing scale gained intermediate stops for tighter micro-layouts and larger hero treatments. `css/tokens.css` now exports `--space-4xs`, `--space-3xs`, `--space-xs-snug`, `--space-md-plus`, `--space-xl-compact`, `--space-xl-plus`, and `--space-2xl-plus`; Tailwind surfaces matching utilities such as `p-4xs`, `p-3xs`, `px-xs-snug`, `py-md-plus`, `gap-xl-compact`, `px-xl-plus`, and `gap-2xl-plus`. Pair them with the new layout primitives—`--menu-min-width` (`min-w-menu`), `--modal-max-width` (`max-w-modal`), `--layout-player-max-width` (`max-w-player`), and `--layout-docs-max-width` (`max-w-docs`)—to anchor consistent breakpoints across popovers, modals, and documentation shells without reintroducing raw `rem`/`px` literals. ### Previewing themes diff --git a/js/blog/carousel.js b/js/blog/carousel.js deleted file mode 100644 index 675f72b5..00000000 --- a/js/blog/carousel.js +++ /dev/null @@ -1,232 +0,0 @@ -import { userLogger } from "../utils/logger.js"; -function toArray(value) { - if (!value) { - return []; - } - return Array.isArray(value) ? value : Array.from(value); -} - -const SLIDE_STATE_IDLE = 'idle'; -const SLIDE_STATE_ACTIVE = 'active'; -const SLIDE_STATE_LEAVING = 'leaving'; -const SLIDE_TRANSITION_TIMEOUT = 420; - -function getRange(pageIndex, perPage) { - const start = pageIndex * perPage; - return { start, end: start + perPage }; -} - -function clearTimer(state, slide) { - const handle = state.timers.get(slide); - if (typeof handle === 'number') { - clearTimeout(handle); - } - state.timers.delete(slide); -} - -function scheduleSlideIdle(state, slide) { - clearTimer(state, slide); - const handle = setTimeout(() => { - state.timers.delete(slide); - if (slide.dataset.active !== 'true') { - slide.dataset.state = SLIDE_STATE_IDLE; - } - }, SLIDE_TRANSITION_TIMEOUT); - state.timers.set(slide, handle); -} - -function applySlideState(state, slide, { isActive, wasActive, immediate }) { - if (isActive) { - clearTimer(state, slide); - slide.dataset.active = 'true'; - slide.dataset.state = SLIDE_STATE_ACTIVE; - slide.dataset.inert = 'false'; - slide.setAttribute('aria-hidden', 'false'); - return; - } - - slide.dataset.active = 'false'; - slide.dataset.inert = 'true'; - slide.setAttribute('aria-hidden', 'true'); - - if (!immediate && wasActive) { - slide.dataset.state = SLIDE_STATE_LEAVING; - scheduleSlideIdle(state, slide); - return; - } - - clearTimer(state, slide); - slide.dataset.state = SLIDE_STATE_IDLE; -} - -function updateSlides(state, { previousIndex, immediate = false } = {}) { - const currentRange = getRange(state.index, state.perPage); - const previousRange = - typeof previousIndex === 'number' ? getRange(previousIndex, state.perPage) : currentRange; - - state.slides.forEach((slide, slideIndex) => { - const isActive = slideIndex >= currentRange.start && slideIndex < currentRange.end; - const wasActive = slideIndex >= previousRange.start && slideIndex < previousRange.end; - applySlideState(state, slide, { isActive, wasActive, immediate }); - }); -} - -function syncTransitionMode(container, track, mode) { - if (!container || !track) { - return; - } - - if (mode) { - container.dataset.transition = mode; - track.dataset.transition = mode; - } else { - delete container.dataset.transition; - delete track.dataset.transition; - } -} - -export function createCarousel(container, options = {}) { - const track = options.track || container?.querySelector('[data-carousel-track]'); - const slides = options.slides || toArray(track?.children); - if (!container || !track || slides.length === 0) { - return null; - } - - const perPage = Math.max(1, Math.min(options.perPage || 1, slides.length)); - const pageCount = Math.max(1, Math.ceil(slides.length / perPage)); - - const state = { - container, - track, - slides, - perPage, - pageCount, - loop: Boolean(options.loop), - autoPlayInterval: Math.max(0, options.autoPlayInterval || 0), - index: 0, - progress: null, - cleanup: [], - timers: new Map(), - setProgress(progressInstance) { - this.progress = progressInstance || null; - }, - }; - - container.dataset.count = String(pageCount); - container.dataset.perPage = String(perPage); - container.dataset.index = '0'; - container.dataset.state = pageCount > 1 ? 'active' : 'idle'; - - syncTransitionMode(container, track, 'auto'); - - slides.forEach((slide, slideIndex) => { - slide.dataset.index = String(slideIndex); - slide.dataset.active = 'false'; - slide.dataset.state = SLIDE_STATE_IDLE; - slide.dataset.inert = 'true'; - slide.setAttribute('aria-hidden', 'true'); - }); - - function handlePrev(event) { - event?.preventDefault?.(); - advanceSlide(state, -1); - } - - function handleNext(event) { - event?.preventDefault?.(); - advanceSlide(state, 1); - } - - if (options.controls?.prev) { - options.controls.prev.addEventListener('click', handlePrev); - state.cleanup.push(() => options.controls.prev.removeEventListener('click', handlePrev)); - } - - if (options.controls?.next) { - options.controls.next.addEventListener('click', handleNext); - state.cleanup.push(() => options.controls.next.removeEventListener('click', handleNext)); - } - - state.goTo = function goTo(targetPage, { restartProgress = true, instant = false } = {}) { - const maxIndex = state.pageCount - 1; - let nextIndex = targetPage; - - if (nextIndex < 0) { - nextIndex = state.loop ? maxIndex : 0; - } else if (nextIndex > maxIndex) { - nextIndex = state.loop ? 0 : maxIndex; - } - - const previousIndex = state.index; - state.index = nextIndex; - - container.dataset.index = String(nextIndex); - - syncTransitionMode(container, track, instant ? 'instant' : 'auto'); - - updateSlides(state, { previousIndex, immediate: instant }); - - if (instant) { - syncTransitionMode(container, track, 'auto'); - } - - if (restartProgress && state.autoPlayInterval > 0 && state.progress) { - state.progress.reset(); - state.progress.start(state.autoPlayInterval); - } - }; - - state.goTo(0, { restartProgress: false, instant: true }); - - return state; -} - -export function advanceSlide(state, step = 1, options = {}) { - if (!state || typeof state.goTo !== 'function') { - return; - } - state.goTo(state.index + step, options); -} - -export function destroyCarousel(state) { - if (!state) { - return; - } - - state.cleanup?.forEach((dispose) => { - try { - dispose(); - } catch (error) { - userLogger.warn('Failed to dispose carousel listener', error); - } - }); - state.cleanup = []; - - for (const handle of state.timers.values()) { - clearTimeout(handle); - } - state.timers.clear(); - - if (state.progress && typeof state.progress.destroy === 'function') { - state.progress.destroy(); - } - - if (state.container) { - delete state.container.dataset.index; - delete state.container.dataset.count; - delete state.container.dataset.perPage; - delete state.container.dataset.state; - delete state.container.dataset.transition; - } - - if (state.track) { - delete state.track.dataset.transition; - } - - state.slides?.forEach((slide) => { - delete slide.dataset.active; - delete slide.dataset.state; - delete slide.dataset.inert; - slide.setAttribute('aria-hidden', 'false'); - }); -} diff --git a/js/blog/index.js b/js/blog/index.js deleted file mode 100644 index 725c7641..00000000 --- a/js/blog/index.js +++ /dev/null @@ -1,1123 +0,0 @@ -import { createCarousel, advanceSlide, destroyCarousel } from './carousel.js'; -import { mountProgressBar } from './progressBar.js'; -import { initZapthreadsEmbed as defaultInitZapthreadsEmbed } from './zapthreadsEmbed.js'; -import { userLogger } from "../utils/logger.js"; - -const CAROUSEL_AUTOPLAY_INTERVAL = 8000; - -function repeatParagraph(text, times) { - return Array.from({ length: times }, () => text).join(' '); -} - -const NOTE_BLUEPRINTS = [ - { - id: 'relay-health-q3', - title: 'Relay health checks land in bitvid', - paragraph: - 'We reduced fallback churn by folding relay health signals directly into playback orchestration, keeping viewers pinned to the fastest source while magnets warm in the background.', - repeats: 9, - createdAt: Date.parse('2024-08-14T09:00:00Z') / 1000, - image: './assets/png/bitvid-banner.png', - topics: ['infrastructure', 'release'], - }, - { - id: 'nostr-tooling-upgrade', - title: 'Tooling overhaul simplifies Nostr publishing', - paragraph: - 'We rebuilt the publishing helpers so creators can author video and audio notes with cleaner defaults, automatic metadata validation, and better local previews before signing.', - repeats: 8, - createdAt: Date.parse('2024-07-02T15:30:00Z') / 1000, - image: './assets/png/bitvid-banner.png', - topics: ['creator', 'tooling'], - }, - { - id: 'zapthreads-updates', - title: 'Zapthreads embeds now hydrate instantly', - paragraph: - 'Comment embeds now stream profile cards and replies incrementally, so community conversations appear without waiting for full thread reconciliation across relays.', - repeats: 8, - createdAt: Date.parse('2024-06-18T18:45:00Z') / 1000, - topics: ['community', 'release'], - }, - { - id: 'progressive-download', - title: 'Progressive download prioritises hosted sources', - paragraph: - 'Playback prefers direct HTTP sources with smoother resume support while still preparing magnet fallbacks, unlocking faster start times for mobile viewers on congested relays.', - repeats: 7, - createdAt: Date.parse('2024-05-09T12:00:00Z') / 1000, - topics: ['playback'], - }, - { - id: 'moderation-tooling', - title: 'Moderation tooling gains topic level controls', - paragraph: - 'Admin teams can now enforce topic-specific guidelines with clearer override reporting, making it easier to surface community playlists without compromising safety.', - repeats: 7, - createdAt: Date.parse('2024-04-21T20:15:00Z') / 1000, - topics: ['moderation', 'community'], - }, - { - id: 'mobile-ux-refresh', - title: 'Mobile UX refresh ships across the blog', - paragraph: - 'We tuned typography, spacing, and gesture targets throughout the blog so updates remain readable on small screens while matching the main app aesthetic.', - repeats: 6, - createdAt: Date.parse('2024-03-05T10:00:00Z') / 1000, - topics: ['design'], - }, -]; - -function buildDefaultNotes() { - return NOTE_BLUEPRINTS.map((entry) => ({ - ...entry, - summary: repeatParagraph(entry.paragraph, entry.repeats), - })); -} - -function readMetaValue(name) { - const element = document.querySelector(`meta[name="${name}"]`); - if (!element) { - return ''; - } - const value = element.getAttribute('value'); - return value == null ? '' : value; -} - -function parseNumber(value, fallback = 0) { - if (typeof value !== 'string') { - return fallback; - } - const trimmed = value.trim(); - if (!trimmed) { - return fallback; - } - const numeric = Number(trimmed); - return Number.isFinite(numeric) ? numeric : fallback; -} - -function parseTopics(value) { - if (typeof value !== 'string') { - return []; - } - return value - .split(',') - .map((topic) => topic.trim()) - .filter((topic) => topic.length > 0); -} - -function readBlogConfig() { - return { - npub: readMetaValue('author'), - relays: readMetaValue('relays') - .split(',') - .map((relay) => relay.trim()) - .filter((relay) => relay.length > 0), - topNotes: parseNumber(readMetaValue('top-notes'), 0), - shortNotesMode: readMetaValue('short-notes'), - shortNotesMinChars: parseNumber(readMetaValue('short-notes-min-chars'), 0), - shortFeedSummaryMaxChars: parseNumber( - readMetaValue('short-notes-summary-max-chars'), - 0, - ), - topics: parseTopics(readMetaValue('topics')), - commentsEnabled: readMetaValue('comments').toLowerCase() === 'yes', - }; -} - -function resolveNotes() { - if (typeof window !== 'undefined' && Array.isArray(window.bitvidBlogNotes)) { - return window.bitvidBlogNotes; - } - return buildDefaultNotes(); -} - -function setupEmbedHeightBroadcast({ root, registerCleanup }) { - if (typeof window === 'undefined' || window.parent === window) { - return; - } - - const element = root || document.querySelector('.blog-app-root'); - if (!element) { - return; - } - - const parentOrigin = (() => { - try { - if (document.referrer) { - return new URL(document.referrer).origin; - } - } catch (error) { - userLogger.error('[blog] failed to parse parent origin for resize messaging', error); - } - return '*'; - })(); - - let destroyed = false; - registerCleanup(() => { - destroyed = true; - }); - - const parseCssNumber = (value) => { - if (typeof value !== 'string') { - return 0; - } - const numeric = Number.parseFloat(value); - return Number.isFinite(numeric) ? numeric : 0; - }; - - const computeMarginAdjustment = (node) => { - if (!node || typeof window.getComputedStyle !== 'function') { - return 0; - } - let topMargin = 0; - let bottomMargin = 0; - try { - const first = node.firstElementChild; - const last = node.lastElementChild; - if (first) { - topMargin = parseCssNumber(window.getComputedStyle(first).marginTop); - } - if (last) { - bottomMargin = parseCssNumber(window.getComputedStyle(last).marginBottom); - } - } catch (error) { - userLogger.error('[blog] failed to compute margin adjustment for resize messaging', error); - } - const adjustment = Math.max(0, topMargin) + Math.max(0, bottomMargin); - return Number.isFinite(adjustment) ? adjustment : 0; - }; - - let lastHeight = null; - let pendingFrame = null; - - const measureAndPost = (force = false) => { - if (destroyed) { - return; - } - const docElement = document.documentElement; - const body = document.body; - - const candidates = []; - const addCandidate = (value) => { - if (typeof value !== 'number') { - return; - } - const rounded = Math.max(0, Math.ceil(value)); - if (Number.isFinite(rounded)) { - candidates.push(rounded); - } - }; - - const addElementMetrics = (node) => { - if (!node) { - return; - } - const marginAdjustment = computeMarginAdjustment(node); - addCandidate(node.scrollHeight + marginAdjustment); - addCandidate(node.offsetHeight + marginAdjustment); - addCandidate(node.clientHeight + marginAdjustment); - try { - const rect = node.getBoundingClientRect(); - addCandidate(rect.height + marginAdjustment); - } catch (error) { - userLogger.error('[blog] failed to compute element rect for resize messaging', error); - } - }; - - addElementMetrics(element); - if (body && body !== element) { - addElementMetrics(body); - } - if (docElement && docElement !== element && docElement !== body) { - addElementMetrics(docElement); - } - if (document.scrollingElement && document.scrollingElement !== body && document.scrollingElement !== docElement) { - addElementMetrics(document.scrollingElement); - } - - const height = candidates.length > 0 ? Math.max(...candidates) : null; - if (!Number.isFinite(height)) { - return; - } - if (!force && height === lastHeight) { - return; - } - lastHeight = height; - try { - window.parent.postMessage({ type: 'bitvid-blog-resize', height }, parentOrigin); - } catch (error) { - userLogger.error('[blog] failed to post resize message', error); - } - }; - - const queueMeasurement = (force = false) => { - if (destroyed) { - return; - } - if (force) { - measureAndPost(true); - return; - } - if (pendingFrame != null) { - return; - } - pendingFrame = window.requestAnimationFrame(() => { - pendingFrame = null; - measureAndPost(false); - }); - }; - - pendingFrame = window.requestAnimationFrame(() => { - pendingFrame = null; - measureAndPost(true); - }); - - registerCleanup(() => { - if (pendingFrame != null) { - window.cancelAnimationFrame(pendingFrame); - pendingFrame = null; - } - }); - - const observedNodes = new Set(); - - const observeNode = (observer, node) => { - if (!node || observedNodes.has(node)) { - return; - } - observer.observe(node); - observedNodes.add(node); - }; - - if (typeof ResizeObserver === 'function') { - const observer = new ResizeObserver(() => { - queueMeasurement(); - }); - observeNode(observer, element); - if (document.body) { - observeNode(observer, document.body); - } - if (document.documentElement) { - observeNode(observer, document.documentElement); - } - if (document.scrollingElement) { - observeNode(observer, document.scrollingElement); - } - registerCleanup(() => { - observer.disconnect(); - observedNodes.clear(); - }); - } - - const pollingIntervalId = window.setInterval(() => { - queueMeasurement(); - }, 750); - registerCleanup(() => { - window.clearInterval(pollingIntervalId); - }); - - const mutationTargets = [element]; - if (document.body && document.body !== element) { - mutationTargets.push(document.body); - } - if (document.documentElement && document.documentElement !== element && document.documentElement !== document.body) { - mutationTargets.push(document.documentElement); - } - if ( - document.scrollingElement && - document.scrollingElement !== element && - document.scrollingElement !== document.body && - document.scrollingElement !== document.documentElement - ) { - mutationTargets.push(document.scrollingElement); - } - - const trackedMediaNodes = new WeakSet(); - const MEDIA_SELECTOR = 'img, picture, video, audio, iframe, object, embed'; - - const watchMediaNode = (node) => { - if (!(node instanceof Element)) { - return; - } - const candidates = []; - if (node.matches(MEDIA_SELECTOR)) { - candidates.push(node); - } - candidates.push(...node.querySelectorAll(MEDIA_SELECTOR)); - candidates.forEach((media) => { - if (trackedMediaNodes.has(media)) { - return; - } - trackedMediaNodes.add(media); - const handleMediaEvent = () => { - queueMeasurement(true); - }; - const mediaEvents = ['load', 'loadeddata', 'loadedmetadata', 'readystatechange', 'error']; - mediaEvents.forEach((eventName) => { - media.addEventListener(eventName, handleMediaEvent); - }); - registerCleanup(() => { - mediaEvents.forEach((eventName) => { - media.removeEventListener(eventName, handleMediaEvent); - }); - }); - if ( - (media instanceof HTMLImageElement && media.complete) || - (media instanceof HTMLVideoElement && media.readyState >= 1) || - (media instanceof HTMLAudioElement && media.readyState >= 1) || - (media instanceof HTMLIFrameElement && media.contentWindow) - ) { - queueMeasurement(true); - } - }); - }; - - watchMediaNode(element); - - if (typeof MutationObserver === 'function' && mutationTargets.length > 0) { - const mutationObserver = new MutationObserver((mutations) => { - let shouldMeasure = false; - mutations.forEach((mutation) => { - for (const node of mutation.addedNodes) { - watchMediaNode(node); - } - if (mutation.type === 'attributes') { - watchMediaNode(mutation.target); - } - if ( - mutation.type === 'childList' || - mutation.type === 'attributes' || - mutation.type === 'characterData' - ) { - shouldMeasure = true; - } - }); - if (shouldMeasure) { - queueMeasurement(); - } - }); - mutationTargets.forEach((target) => { - mutationObserver.observe(target, { - childList: true, - subtree: true, - attributes: true, - characterData: true, - }); - }); - registerCleanup(() => { - mutationObserver.disconnect(); - }); - } - - const handleMessage = (event) => { - if (event.source !== window.parent) { - return; - } - if (parentOrigin !== '*' && event.origin !== parentOrigin) { - return; - } - if (event?.data?.type === 'bitvid-blog-request-height') { - queueMeasurement(true); - } - }; - - window.addEventListener('message', handleMessage); - registerCleanup(() => { - window.removeEventListener('message', handleMessage); - }); - - const handleResize = () => { - queueMeasurement(); - }; - window.addEventListener('resize', handleResize); - registerCleanup(() => { - window.removeEventListener('resize', handleResize); - }); - - const handleOrientationChange = () => { - queueMeasurement(true); - }; - window.addEventListener('orientationchange', handleOrientationChange); - registerCleanup(() => { - window.removeEventListener('orientationchange', handleOrientationChange); - }); - - const handleTransitionEnd = () => { - queueMeasurement(); - }; - element.addEventListener('transitionend', handleTransitionEnd, true); - element.addEventListener('animationend', handleTransitionEnd, true); - registerCleanup(() => { - element.removeEventListener('transitionend', handleTransitionEnd, true); - element.removeEventListener('animationend', handleTransitionEnd, true); - }); - - const handleLoad = () => { - queueMeasurement(true); - }; - window.addEventListener('load', handleLoad, { once: true }); - registerCleanup(() => { - window.removeEventListener('load', handleLoad); - }); - - const handleVisibilityChange = () => { - if (document.visibilityState === 'visible') { - queueMeasurement(true); - } - }; - document.addEventListener('visibilitychange', handleVisibilityChange); - registerCleanup(() => { - document.removeEventListener('visibilitychange', handleVisibilityChange); - }); - - if (document.fonts && typeof document.fonts.addEventListener === 'function') { - const handleFontLoad = () => { - queueMeasurement(true); - }; - document.fonts.addEventListener('loadingdone', handleFontLoad); - document.fonts.addEventListener('loadingerror', handleFontLoad); - registerCleanup(() => { - document.fonts.removeEventListener('loadingdone', handleFontLoad); - document.fonts.removeEventListener('loadingerror', handleFontLoad); - }); - } - - if (document.fonts?.ready && typeof document.fonts.ready.then === 'function') { - document.fonts.ready - .then(() => { - queueMeasurement(true); - }) - .catch(() => { - queueMeasurement(true); - }); - } -} - -function formatDate(unixSeconds, { includeTime = false } = {}) { - if (!unixSeconds) { - return ''; - } - const date = new Date(unixSeconds * 1000); - const parts = new Intl.DateTimeFormat('en-US', { - day: '2-digit', - month: 'long', - year: 'numeric', - }).formatToParts(date); - - const lookup = Object.fromEntries(parts.map((part) => [part.type, part.value])); - let formatted = `${lookup.day ?? ''} ${lookup.month ?? ''} ${lookup.year ?? ''}`.trim(); - - if (includeTime) { - const time = new Intl.DateTimeFormat('en-US', { - hour: '2-digit', - minute: '2-digit', - hourCycle: 'h23', - }).format(date); - formatted = `${formatted} - ${time}`; - } - - return formatted; -} - -function truncate(text, limit) { - if (!limit || typeof text !== 'string' || text.length <= limit) { - return text; - } - return `${text.slice(0, limit).trim()}…`; -} -function createTopicsNav(topics) { - const nav = document.createElement('nav'); - nav.className = 'flex flex-wrap gap-2'; - - const label = document.createElement('span'); - label.className = 'text-sm font-semibold uppercase tracking-wide text-blog-gray-400'; - label.textContent = 'Topics'; - nav.appendChild(label); - - topics.forEach((topic) => { - const pill = document.createElement('span'); - pill.className = - 'rounded-full border border-blog-neutral-200 px-3 py-1 text-sm text-blog-gray-600 dark:border-blog-neutral-700 dark:text-blog-gray-200'; - pill.textContent = topic; - nav.appendChild(pill); - }); - - return nav; -} - -function renderTopNotes(notes) { - if (!Array.isArray(notes) || notes.length === 0) { - return null; - } - - const section = document.createElement('section'); - section.className = 'top-notes'; - - notes.forEach((note) => { - const noteContainer = document.createElement('article'); - noteContainer.className = 'note'; - - const link = document.createElement('a'); - link.href = `#${note.id}`; - link.className = 'flex flex-col gap-3'; - - if (note.image) { - const image = document.createElement('img'); - image.alt = note.title; - image.loading = 'lazy'; - image.src = note.image; - link.appendChild(image); - } - - const title = document.createElement('span'); - title.className = 'title'; - title.textContent = note.title; - link.appendChild(title); - - if (note.summary) { - const summary = document.createElement('div'); - summary.className = 'summary'; - summary.textContent = truncate(note.summary, 320); - link.appendChild(summary); - } - - const date = document.createElement('div'); - date.className = 'date'; - date.textContent = formatDate(note.createdAt); - link.appendChild(date); - - noteContainer.appendChild(link); - section.appendChild(noteContainer); - }); - - return section; -} - -function createArrowButton(direction) { - const button = document.createElement('button'); - button.type = 'button'; - const sideClass = - direction === 'next' - ? 'right-0 translate-x-1/2' - : 'left-0 -translate-x-1/2'; - button.className = `blog-carousel__control pointer-events-auto absolute top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full border border-blog-neutral-200 bg-white/80 text-xl text-blog-gray-500 shadow-sm transition hover:text-blog-purple dark:border-blog-neutral-700 dark:bg-blog-neutral-900/80 dark:text-blog-gray-200 ${sideClass}`; - button.setAttribute('aria-label', direction === 'next' ? 'Next slide' : 'Previous slide'); - button.setAttribute('data-carousel-control', direction); - if (direction === 'next') { - button.setAttribute('data-carousel-next', 'true'); - } else { - button.setAttribute('data-carousel-prev', 'true'); - } - button.textContent = direction === 'next' ? '›' : '‹'; - return button; -} - -function renderShortNotesCarousel(notes, config) { - if (!Array.isArray(notes) || notes.length === 0) { - return null; - } - - const section = document.createElement('section'); - section.className = 'short-notes blog-carousel relative flex flex-col gap-4'; - section.setAttribute('data-carousel', 'true'); - - const heading = document.createElement('h2'); - heading.className = 'text-2xl font-semibold text-blog-gray-800 dark:text-blog-gray-100'; - heading.textContent = 'Short notes'; - section.appendChild(heading); - - const viewport = document.createElement('div'); - viewport.className = 'blog-carousel__viewport relative overflow-hidden'; - viewport.setAttribute('data-carousel-viewport', 'true'); - section.appendChild(viewport); - - const list = document.createElement('ul'); - list.className = 'blog-carousel__track'; - list.setAttribute('data-carousel-track', 'true'); - viewport.appendChild(list); - - const perPage = Math.min(notes.length, 3); - const summariesLimit = config.shortFeedSummaryMaxChars || 300; - - notes.forEach((note) => { - const item = document.createElement('li'); - item.className = - 'blog-carousel__slide flex flex-col gap-2 rounded-lg bg-blog-neutral-50 p-4 transition-colors dark:bg-blog-neutral-900'; - item.setAttribute('data-carousel-slide', 'true'); - - const link = document.createElement('a'); - link.href = `#${note.id}`; - link.className = 'flex flex-col gap-2 text-blog-gray-700 hover:text-blog-purple dark:text-blog-gray-50'; - - const date = document.createElement('div'); - date.className = 'date'; - date.textContent = formatDate(note.createdAt, { includeTime: true }); - link.appendChild(date); - - const summary = document.createElement('p'); - summary.className = 'leading-relaxed'; - summary.textContent = truncate(note.summary, summariesLimit); - link.appendChild(summary); - - item.appendChild(link); - list.appendChild(item); - }); - - const prev = createArrowButton('prev'); - const next = createArrowButton('next'); - viewport.appendChild(prev); - viewport.appendChild(next); - - const carousel = createCarousel(section, { - track: list, - slides: Array.from(list.children), - perPage, - loop: notes.length > perPage, - autoPlayInterval: CAROUSEL_AUTOPLAY_INTERVAL, - controls: { prev, next }, - }); - - if (!carousel) { - return { section, carousel: null }; - } - - const progress = mountProgressBar(section, { - initialDuration: CAROUSEL_AUTOPLAY_INTERVAL, - autoStart: false, - }); - - if (progress) { - progress.setOnComplete(() => { - advanceSlide(carousel, 1, { restartProgress: true }); - }); - - carousel.setProgress(progress); - if (carousel.autoPlayInterval > 0) { - progress.reset(); - progress.start(carousel.autoPlayInterval); - } - } - - return { section, carousel, progress: progress || null }; -} - -function renderShortNotesList(notes, config) { - if (!Array.isArray(notes) || notes.length === 0) { - return null; - } - - const section = document.createElement('section'); - section.className = 'short-notes flex flex-col gap-4'; - - const heading = document.createElement('h2'); - heading.className = 'text-2xl font-semibold text-blog-gray-800 dark:text-blog-gray-100'; - heading.textContent = 'Short notes'; - section.appendChild(heading); - - const list = document.createElement('ul'); - list.className = 'flex flex-col gap-4'; - - const summariesLimit = config.shortFeedSummaryMaxChars || 280; - - notes.forEach((note) => { - const item = document.createElement('li'); - item.className = 'rounded-lg border border-blog-neutral-200 p-4 dark:border-blog-neutral-800'; - - const link = document.createElement('a'); - link.href = `#${note.id}`; - link.className = 'flex flex-col gap-2 text-blog-gray-700 hover:text-blog-purple dark:text-blog-gray-50'; - - const date = document.createElement('div'); - date.className = 'date'; - date.textContent = formatDate(note.createdAt, { includeTime: true }); - link.appendChild(date); - - const summary = document.createElement('p'); - summary.className = 'leading-relaxed'; - summary.textContent = truncate(note.summary, summariesLimit); - link.appendChild(summary); - - item.appendChild(link); - list.appendChild(item); - }); - - section.appendChild(list); - return section; -} -function renderMainFeed(notes) { - if (!Array.isArray(notes) || notes.length === 0) { - return null; - } - - const section = document.createElement('section'); - section.className = 'flex flex-col gap-10'; - - notes.forEach((note) => { - const article = document.createElement('article'); - article.id = note.id; - article.className = - 'flex scroll-mt-24 flex-col gap-4 border-b border-blog-neutral-200 pb-8 last:border-b-0 dark:border-blog-neutral-800'; - - const header = document.createElement('header'); - header.className = 'flex flex-col gap-2'; - - const title = document.createElement('h2'); - title.className = 'text-3xl font-semibold text-blog-gray-900 dark:text-blog-gray-100'; - title.textContent = note.title; - header.appendChild(title); - - const date = document.createElement('div'); - date.className = 'text-sm text-blog-gray-400'; - date.textContent = formatDate(note.createdAt, { includeTime: true }); - header.appendChild(date); - - if (Array.isArray(note.topics) && note.topics.length > 0) { - const tags = document.createElement('ul'); - tags.className = 'flex flex-wrap gap-2'; - note.topics.forEach((topic) => { - const tag = document.createElement('li'); - tag.className = 'rounded-full bg-blog-neutral-100 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-blog-gray-500 dark:bg-blog-neutral-900 dark:text-blog-gray-300'; - tag.textContent = topic; - tags.appendChild(tag); - }); - header.appendChild(tags); - } - - article.appendChild(header); - - if (note.image) { - const figure = document.createElement('figure'); - figure.className = 'overflow-hidden rounded-lg'; - const image = document.createElement('img'); - image.src = note.image; - image.alt = note.title; - image.loading = 'lazy'; - figure.appendChild(image); - article.appendChild(figure); - } - - if (note.summary) { - const body = document.createElement('p'); - body.className = 'text-lg leading-relaxed text-blog-gray-700 dark:text-blog-gray-200'; - body.textContent = note.summary; - article.appendChild(body); - } - - section.appendChild(article); - }); - - return section; -} - -function extractZapthreadsOptions(element) { - const attributeMap = [ - ['anchor', 'anchor'], - ['title', 'title'], - ['disable', 'disable'], - ['urls', 'urls'], - ['reply-placeholder', 'replyPlaceholder'], - ['legacy-url', 'legacyUrl'], - ]; - - const options = {}; - attributeMap.forEach(([attr, key]) => { - const value = element.getAttribute(attr); - if (value === null) { - return; - } - if (key === 'legacyUrl') { - options[key] = value !== 'false'; - } else { - options[key] = value; - } - }); - return options; -} - -function initializeZapthreads({ registerCleanup, isDestroyed, initZapthreadsEmbed }) { - if (typeof initZapthreadsEmbed !== 'function') { - return; - } - const elements = document.querySelectorAll('zap-threads'); - if (!elements.length) { - return; - } - - elements.forEach((element) => { - const options = extractZapthreadsOptions(element); - try { - const maybeDispose = initZapthreadsEmbed({ root: element, options }); - if (!maybeDispose) { - return; - } - - if (typeof maybeDispose.then === 'function') { - maybeDispose - .then((dispose) => { - if (typeof dispose !== 'function') { - return; - } - if (isDestroyed()) { - try { - dispose(); - } catch (error) { - userLogger.error('[blog] zapthreads cleanup failed', error); - } - return; - } - registerCleanup(() => { - try { - dispose(); - } catch (error) { - userLogger.error('[blog] zapthreads cleanup failed', error); - } - }); - }) - .catch((error) => { - userLogger.error('[blog] failed to initialise zapthreads embed', error); - }); - return; - } - - if (typeof maybeDispose === 'function') { - if (isDestroyed()) { - try { - maybeDispose(); - } catch (error) { - userLogger.error('[blog] zapthreads cleanup failed', error); - } - return; - } - registerCleanup(() => { - try { - maybeDispose(); - } catch (error) { - userLogger.error('[blog] zapthreads cleanup failed', error); - } - }); - } - } catch (error) { - userLogger.error('[blog] failed to start zapthreads embed', error); - } - }); -} - -function mountBlogApp({ initZapthreadsEmbed = defaultInitZapthreadsEmbed } = {}) { - const runtime = { - destroyed: false, - cleanupCallbacks: new Set(), - sliderStates: new Map(), - }; - - const registerCleanup = (callback) => { - if (typeof callback !== 'function') { - return () => {}; - } - if (runtime.destroyed) { - try { - callback(); - } catch (error) { - userLogger.error('[blog] cleanup callback failed', error); - } - return () => {}; - } - runtime.cleanupCallbacks.add(callback); - return () => { - runtime.cleanupCallbacks.delete(callback); - }; - }; - - const destroy = () => { - if (runtime.destroyed) { - return; - } - runtime.destroyed = true; - runtime.cleanupCallbacks.forEach((callback) => { - try { - callback(); - } catch (error) { - userLogger.error('[blog] cleanup callback failed', error); - } - }); - runtime.cleanupCallbacks.clear(); - runtime.sliderStates.clear(); - }; - - const root = document.querySelector('.blog-app-root'); - if (!root) { - return destroy; - } - - const config = readBlogConfig(); - const notes = resolveNotes().slice().sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0)); - - const hero = document.createElement('header'); - hero.className = 'flex flex-col gap-4'; - - const heading = document.createElement('h1'); - heading.className = 'text-4xl font-bold text-blog-gray-900 dark:text-blog-gray-100'; - heading.textContent = 'bitvid updates'; - hero.appendChild(heading); - - const subheading = document.createElement('p'); - subheading.className = 'max-w-2xl text-lg text-blog-gray-600 dark:text-blog-gray-300'; - subheading.textContent = - 'Shipping notes and release highlights from the decentralized video network. Expect incremental drops, roadmap checkpoints, and moderation changelogs.'; - hero.appendChild(subheading); - - if (config.topics.length > 0) { - hero.appendChild(createTopicsNav(config.topics)); - } - - const main = document.createElement('main'); - main.className = 'mx-auto flex w-full max-w-5xl flex-col gap-12 px-4 py-12 scroll-pt-24'; - main.appendChild(hero); - - const topNotes = config.topNotes > 0 ? notes.slice(0, config.topNotes) : []; - if (topNotes.length > 0) { - const topSection = renderTopNotes(topNotes); - if (topSection) { - main.appendChild(topSection); - } - } - - const remaining = config.topNotes > 0 ? notes.slice(config.topNotes) : notes; - const shortNotesCandidates = remaining.filter((note) => { - const length = typeof note.summary === 'string' ? note.summary.length : 0; - return length >= config.shortNotesMinChars; - }); - - const registerSlider = (section, { carousel, progress }) => { - if (!section || !carousel) { - return; - } - - const sliderState = { - container: section, - carousel, - progress, - pausedByPointer: false, - pausedByVisibility: document.visibilityState === 'hidden', - }; - - runtime.sliderStates.set(section, sliderState); - - const pause = () => { - if (sliderState.progress && typeof sliderState.progress.stop === 'function') { - sliderState.progress.stop(); - } - }; - - const resume = () => { - if (!sliderState.progress || typeof sliderState.progress.start !== 'function') { - return; - } - if (sliderState.carousel.autoPlayInterval <= 0) { - return; - } - sliderState.progress.reset?.(); - sliderState.progress.start(sliderState.carousel.autoPlayInterval); - }; - - const updatePlayback = () => { - if (sliderState.pausedByPointer || sliderState.pausedByVisibility) { - pause(); - return; - } - resume(); - }; - - const handlePointerEnter = () => { - sliderState.pausedByPointer = true; - pause(); - }; - - const handlePointerLeave = () => { - sliderState.pausedByPointer = false; - updatePlayback(); - }; - - section.addEventListener('pointerenter', handlePointerEnter); - section.addEventListener('pointerleave', handlePointerLeave); - registerCleanup(() => { - section.removeEventListener('pointerenter', handlePointerEnter); - section.removeEventListener('pointerleave', handlePointerLeave); - }); - - const handleVisibilityChange = () => { - sliderState.pausedByVisibility = document.visibilityState === 'hidden'; - updatePlayback(); - }; - - document.addEventListener('visibilitychange', handleVisibilityChange); - registerCleanup(() => { - document.removeEventListener('visibilitychange', handleVisibilityChange); - }); - - if (sliderState.pausedByVisibility) { - pause(); - } - - registerCleanup(() => { - runtime.sliderStates.delete(section); - destroyCarousel(sliderState.carousel); - }); - }; - - if (config.shortNotesMode === 'carousel') { - const rendered = renderShortNotesCarousel(shortNotesCandidates, config); - if (rendered?.section) { - main.appendChild(rendered.section); - if (rendered.carousel) { - registerSlider(rendered.section, rendered); - } - } - } else if (config.shortNotesMode === 'main') { - const shortNotesSection = renderShortNotesList(shortNotesCandidates, config); - if (shortNotesSection) { - main.appendChild(shortNotesSection); - } - } - - const feed = renderMainFeed(remaining); - if (feed) { - main.appendChild(feed); - } - - root.replaceChildren(main); - setupEmbedHeightBroadcast({ root, registerCleanup }); - - registerCleanup(() => { - root.replaceChildren(); - }); - - initializeZapthreads({ - registerCleanup, - isDestroyed: () => runtime.destroyed, - initZapthreadsEmbed, - }); - - return destroy; -} - -let activeTeardown = null; - -export function bootstrapBlog(options = {}) { - if (typeof activeTeardown === 'function') { - activeTeardown(); - } - const destroy = mountBlogApp(options); - activeTeardown = () => { - destroy(); - activeTeardown = null; - }; - return activeTeardown; -} - -export function teardownBlog() { - if (typeof activeTeardown === 'function') { - activeTeardown(); - } -} - diff --git a/js/blog/progressBar.js b/js/blog/progressBar.js deleted file mode 100644 index fb5ff4bb..00000000 --- a/js/blog/progressBar.js +++ /dev/null @@ -1,126 +0,0 @@ -export function mountProgressBar( - container, - { initialDuration = 0, autoStart = false, onComplete } = {}, -) { - if (!container) { - return null; - } - - const wrapper = document.createElement('div'); - wrapper.className = 'blog-carousel__progress blog-progress mt-2'; - wrapper.dataset.state = 'idle'; - wrapper.setAttribute('data-carousel-progress', 'true'); - - const meter = document.createElement('progress'); - meter.className = 'progress progress--blog'; - meter.max = 100; - meter.value = 0; - meter.dataset.progress = '0'; - meter.dataset.state = 'idle'; - meter.setAttribute('data-progress-meter', 'true'); - meter.setAttribute('data-variant', 'blog'); - meter.setAttribute('aria-label', 'Carousel progress'); - meter.setAttribute('aria-valuetext', 'Carousel progress 0% complete'); - wrapper.appendChild(meter); - container.appendChild(wrapper); - - let duration = Math.max(0, initialDuration); - let rafId = null; - let startTimestamp = null; - let completeHandler = typeof onComplete === 'function' ? onComplete : null; - - function cancelAnimation() { - if (rafId !== null) { - cancelAnimationFrame(rafId); - rafId = null; - } - } - - function setState(state) { - wrapper.dataset.state = state; - meter.dataset.state = state; - } - - function updateMeter(ratio) { - const clamped = Math.max(0, Math.min(1, ratio)); - const percent = Math.round(clamped * 100); - meter.value = percent; - meter.dataset.progress = String(percent); - meter.setAttribute('aria-valuetext', `Carousel progress ${percent}% complete`); - return clamped; - } - - function stop() { - cancelAnimation(); - startTimestamp = null; - setState('paused'); - } - - function reset() { - stop(); - updateMeter(0); - setState('idle'); - } - - function step(timestamp) { - if (startTimestamp === null) { - startTimestamp = timestamp; - } - const elapsed = timestamp - startTimestamp; - const ratio = duration > 0 ? Math.min(1, elapsed / duration) : 1; - const progress = updateMeter(ratio); - - if (progress >= 1) { - cancelAnimation(); - startTimestamp = null; - setState('complete'); - if (completeHandler) { - completeHandler(); - } - return; - } - - setState('active'); - rafId = requestAnimationFrame(step); - } - - function start(nextDuration = duration) { - duration = Math.max(0, nextDuration); - reset(); - if (duration === 0) { - updateMeter(1); - setState('complete'); - if (completeHandler) { - completeHandler(); - } - return; - } - setState('active'); - rafId = requestAnimationFrame(step); - } - - function destroy() { - cancelAnimation(); - wrapper.remove(); - } - - function setOnComplete(handler) { - completeHandler = typeof handler === 'function' ? handler : null; - } - - if (autoStart && duration > 0) { - start(duration); - } else { - reset(); - } - - return { - element: wrapper, - meter, - start, - stop, - reset, - destroy, - setOnComplete, - }; -} diff --git a/js/blog/zapthreadsEmbed.js b/js/blog/zapthreadsEmbed.js deleted file mode 100644 index e8ae9397..00000000 --- a/js/blog/zapthreadsEmbed.js +++ /dev/null @@ -1,1293 +0,0 @@ -import { escapeHTML } from '../utils/domUtils.js'; -import { userLogger } from "../utils/logger.js"; - -/** - * Responsibilities mirrored from the legacy DS component that ships inside - * blog.html: - * - * - Normalise anchors coming from HTTP URLs, note/nevent IDs, or naddr - * references. - * - Resolve relay inputs (with defaults) and build the correct Nostr filter for - * whichever anchor type we are showing. - * - Hydrate the thread from cache, refresh it from the network, and keep the - * subscription lifecycle tidy so repeated mounts don’t leak listeners. - * - Expose cache clearing, watermark/title rendering, and anchor version updates - * to the host document while dispatching mount/unmount events for observers. - */ - -function createSvg(pathD, { viewBox, className } = {}) { - const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - if (viewBox) { - svg.setAttribute('viewBox', viewBox); - } - if (className) { - svg.setAttribute('class', className); - } - - if (pathD) { - const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - path.setAttribute('d', pathD); - svg.appendChild(path); - } - - return svg; -} - -export function createZapthreadsCommentInfoPicture() { - const container = document.createElement('div'); - container.className = 'ztr-comment-info-picture'; - - const image = document.createElement('img'); - container.appendChild(image); - - return container; -} - -export function createZapthreadsReplyForm() { - const form = document.createElement('div'); - form.className = 'ztr-reply-form'; - - const textarea = document.createElement('textarea'); - form.appendChild(textarea); - - const controls = document.createElement('div'); - controls.className = 'ztr-reply-controls'; - form.appendChild(controls); - - return form; -} - -export function createZapthreadsPublishingDisabledMessage() { - const span = document.createElement('span'); - span.textContent = 'Publishing is disabled'; - return span; -} - -export function createZapthreadsReplyErrorMessage() { - const span = document.createElement('span'); - span.className = 'ztr-reply-error'; - span.textContent = 'Error: '; - return span; -} - -export function createZapthreadsSpinner() { - const svg = createSvg(null, { - viewBox: '0 0 50 50', - className: 'ztr-spinner', - }); - - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - circle.setAttribute('class', 'path'); - circle.setAttribute('cx', '25'); - circle.setAttribute('cy', '25'); - circle.setAttribute('r', '20'); - circle.setAttribute('fill', 'none'); - circle.setAttribute('stroke-width', '5'); - svg.appendChild(circle); - - return svg; -} - -export function createZapthreadsReplyAsButton() { - const button = document.createElement('button'); - button.className = 'ztr-reply-button'; - button.textContent = 'Reply as '; - return button; -} - -export function createZapthreadsReplyAnonymouslyButton() { - const button = document.createElement('button'); - button.className = 'ztr-reply-button'; - button.textContent = 'Reply anonymously'; - return button; -} - -export function createZapthreadsReplyLoginButton() { - const button = document.createElement('button'); - button.className = 'ztr-reply-login-button'; - button.textContent = 'Log in'; - return button; -} - -export function createZapthreadsLikeAction() { - const item = document.createElement('li'); - item.className = 'ztr-comment-action-like'; - - const span = document.createElement('span'); - span.textContent = ' likes'; - item.appendChild(span); - - return item; -} - -export function createZapthreadsZapAction() { - const item = document.createElement('li'); - item.className = 'ztr-comment-action-zap'; - - const span = document.createElement('span'); - span.textContent = ' sats'; - item.appendChild(span); - - return item; -} - -export function createZapthreadsNewCommentContainer() { - const wrapper = document.createElement('div'); - wrapper.className = 'ztr-comment-new'; - - const body = document.createElement('div'); - body.className = 'ztr-comment-body'; - wrapper.appendChild(body); - - const actions = document.createElement('ul'); - actions.className = 'ztr-comment-actions'; - body.appendChild(actions); - - return wrapper; -} - -export function createZapthreadsThreadContainer() { - const div = document.createElement('div'); - div.className = 'ztr-thread'; - return div; -} - -export function createZapthreadsReplyActionItem() { - const item = document.createElement('li'); - item.className = 'ztr-comment-action-reply'; - - const span = document.createElement('span'); - item.appendChild(span); - - return item; -} - -export function createZapthreadsCommentContainer() { - const root = document.createElement('div'); - root.className = 'ztr-comment'; - - const body = document.createElement('div'); - body.className = 'ztr-comment-body'; - root.appendChild(body); - - const infoWrapper = document.createElement('div'); - infoWrapper.className = 'ztr-comment-info-wrapper'; - body.appendChild(infoWrapper); - - const info = document.createElement('div'); - info.className = 'ztr-comment-info'; - infoWrapper.appendChild(info); - - info.appendChild(createZapthreadsCommentInfoPicture()); - - const infoItems = document.createElement('ul'); - infoItems.className = 'ztr-comment-info-items'; - info.appendChild(infoItems); - - const authorItem = document.createElement('li'); - authorItem.className = 'ztr-comment-info-author'; - infoItems.appendChild(authorItem); - - const authorLink = document.createElement('a'); - authorLink.target = '_blank'; - authorItem.appendChild(authorLink); - - const nowrap = document.createElement('span'); - nowrap.className = 'ztr-nowrap'; - const strong = document.createElement('strong'); - strong.textContent = ' ed'; - nowrap.appendChild(strong); - nowrap.appendChild(document.createTextNode(' ')); - authorItem.appendChild(nowrap); - - const dotsItem = document.createElement('li'); - infoItems.appendChild(dotsItem); - const dotsLink = document.createElement('a'); - dotsLink.className = 'ztr-comment-info-dots'; - dotsItem.appendChild(dotsLink); - - const metaList = document.createElement('ul'); - metaList.className = 'ztr-comment-info-items'; - infoWrapper.appendChild(metaList); - - const truncatedText = document.createElement('div'); - truncatedText.className = 'ztr-comment-text'; - body.appendChild(truncatedText); - - const fullText = document.createElement('div'); - fullText.className = 'ztr-comment-text'; - body.appendChild(fullText); - - const actions = document.createElement('ul'); - actions.className = 'ztr-comment-actions'; - body.appendChild(actions); - - return root; -} - -export function createZapthreadsBulletSeparator() { - const item = document.createElement('li'); - item.textContent = '●'; - return item; -} - -export function createZapthreadsRepliesLabel() { - const item = document.createElement('li'); - item.textContent = ' repl'; - return item; -} - -export function createZapthreadsActionCountItem() { - const item = document.createElement('li'); - const span = document.createElement('span'); - item.appendChild(span); - return item; -} - -export function createZapthreadsInfoPane() { - const container = document.createElement('div'); - container.className = 'ztr-info-pane'; - - const link = document.createElement('a'); - link.target = '_blank'; - container.appendChild(link); - - const small = document.createElement('small'); - small.textContent = 'Event data'; - link.appendChild(small); - - return container; -} - -export function createZapthreadsCrossPostWarning() { - const paragraph = document.createElement('p'); - paragraph.className = 'warning'; - - const span = document.createElement('span'); - span.textContent = 'This is a that referenced this article in '; - paragraph.appendChild(span); - - const link = document.createElement('a'); - link.textContent = 'another thread'; - span.appendChild(link); - - return paragraph; -} - -export function createZapthreadsContentMaybeChangedWarning() { - const paragraph = document.createElement('p'); - paragraph.className = 'warning'; - - const span = document.createElement('span'); - span.textContent = 'Article contents may have changed since this was made'; - paragraph.appendChild(span); - - return paragraph; -} - -export function createZapthreadsContentChangedWarning() { - const paragraph = document.createElement('p'); - paragraph.className = 'warning'; - - const span = document.createElement('span'); - span.textContent = 'Article contents changed since this was made'; - paragraph.appendChild(span); - - return paragraph; -} - -export function createZapthreadsCommentExpand() { - const container = document.createElement('div'); - container.className = 'ztr-comment-expand'; - - const link = document.createElement('a'); - container.appendChild(link); - - const span = document.createElement('span'); - span.textContent = 'Show full comment'; - container.appendChild(span); - - return container; -} - -export function createZapthreadsRepliesContainer() { - const container = document.createElement('div'); - container.className = 'ztr-comment-replies'; - return container; -} - -export function createZapthreadsMessageIcon() { - return createSvg( - 'M 12.6030 50.4905 C 13.3758 50.4905 13.9307 50.1140 14.8621 49.2421 L 20.6483 43.8720 C 19.5188 42.9803 18.6073 41.5733 18.6073 38.3433 L 18.6073 25.2052 C 18.6073 19.1217 22.3129 15.5152 28.3766 15.5152 L 42.2479 15.5152 L 42.2281 14.7622 C 41.9306 10.6999 39.2557 8.0643 34.7177 8.0643 L 7.5301 8.0643 C 2.9922 8.0643 0 10.7791 0 15.4954 L 0 34.9548 C 0 39.6710 2.9922 42.7028 7.5301 42.7028 L 10.8195 42.7028 L 10.8195 48.4693 C 10.8195 49.6979 11.4735 50.4905 12.6030 50.4905 Z M 44.6058 53.2450 C 45.7353 53.2450 46.3895 52.4325 46.3895 51.2237 L 46.3895 45.4374 L 48.4702 45.4374 C 53.0078 45.4374 56 42.4056 56 37.7092 L 56 25.6610 C 56 20.9250 53.0078 18.2300 48.4702 18.2300 L 28.8522 18.2300 C 24.1161 18.2300 21.3221 20.9250 21.3221 25.6610 L 21.3221 37.7092 C 21.3221 42.4056 24.1161 45.4374 28.8522 45.4374 L 35.1735 45.4374 L 42.3470 51.9767 C 43.2784 52.8487 43.8331 53.2450 44.6058 53.2450 Z', - { viewBox: '0 -6 60 60' } - ); -} - -export function createZapthreadsLightningIcon() { - return createSvg( - 'M349.4 44.6c5.9-13.7 1.5-29.7-10.6-38.5s-28.6-8-39.9 1.8l-256 224c-10 8.8-13.6 22.9-8.9 35.3S50.7 288 64 288H175.5L98.6 467.4c-5.9 13.7-1.5 29.7 10.6 38.5s28.6 8 39.9-1.8l256-224c10-8.8 13.6-22.9 8.9-35.3s-16.6-20.7-30-20.7H272.5L349.4 44.6z', - { viewBox: '-120 -80 528 588' } - ); -} - -export function createZapthreadsHeartIcon() { - return createSvg( - 'M60.732 29.7C41.107 29.7 22 39.7 22 67.41c0 27.29 45.274 67.29 74 94.89 28.744-27.6 74-67.6 74-94.89 0-27.71-19.092-37.71-38.695-37.71C116 29.7 104.325 41.575 96 54.066 87.638 41.516 76 29.7 60.732 29.7z', - { viewBox: '0 -16 180 180' } - ); -} - -export function createZapthreadsQuoteIcon() { - return createSvg( - 'M168 80c-13.3 0-24 10.7-24 24V408c0 8.4-1.4 16.5-4.1 24H440c13.3 0 24-10.7 24-24V104c0-13.3-10.7-24-24-24H168zM72 480c-39.8 0-72-32.2-72-72V112C0 98.7 10.7 88 24 88s24 10.7 24 24V408c0 13.3 10.7 24 24 24s24-10.7 24-24V104c0-39.8 32.2-72 72-72H440c39.8 0 72 32.2 72 72V408c0 39.8-32.2 72-72 72H72zM176 136c0-13.3 10.7-24 24-24h96c13.3 0 24 10.7 24 24v80c0 13.3-10.7 24-24 24H200c-13.3 0-24-10.7-24-24V136zm200-24h32c13.3 0 24 10.7 24 24s-10.7 24-24 24H376c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80h32c13.3 0 24 10.7 24 24s-10.7 24-24 24H376c-13.3 0-24-10.7-24-24s10.7-24 24-24zM200 272H408c13.3 0 24 10.7 24 24s-10.7 24-24 24H200c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80H408c13.3 0 24 10.7 24 24s-10.7 24-24 24H200c-13.3 0-24-10.7-24-24s10.7-24 24-24z', - { viewBox: '0 0 576 512' } - ); -} - -export function createZapthreadsEllipsisIcon() { - return createSvg( - 'M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z', - { viewBox: '0 -200 560 640' } - ); -} - -export function createZapthreadsPlayIcon() { - return createSvg( - 'M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z', - { viewBox: '0 -50 256 512' } - ); -} - -export function createZapthreadsReplyIcon() { - return createSvg( - 'M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z', - { viewBox: '0 -50 320 512' } - ); -} - -export function createZapthreadsAlertIcon() { - const svg = createSvg( - 'M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z', - { viewBox: '0 0 512 512' } - ); - return svg; -} - -const ZAPTHREADS_MOUNT_CLASS = 'blog-ztr-container'; - -function removeExistingZapthreadsMount(blogRoot) { - const existingRoot = blogRoot.querySelector('#ztr-root'); - if (!existingRoot) { - return; - } - - const mountContainer = existingRoot.closest(`.${ZAPTHREADS_MOUNT_CLASS}`); - if (mountContainer && mountContainer.parentNode) { - mountContainer.parentNode.removeChild(mountContainer); - return; - } - - existingRoot.remove(); -} - -function createZapthreadsMountContainer(blogRoot) { - const container = document.createElement('div'); - container.className = ZAPTHREADS_MOUNT_CLASS; - blogRoot.appendChild(container); - return container; -} - -export function createZapthreadsRoot() { - const root = document.createElement('div'); - root.id = 'ztr-root'; - - const watermark = document.createElement('div'); - watermark.className = 'blog-ztr-watermark'; - root.appendChild(watermark); - - return root; -} - -export function createZapthreadsContent() { - const content = document.createElement('div'); - content.id = 'ztr-content'; - return content; -} - -export function createZapthreadsErrorHeading() { - const heading = document.createElement('h1'); - heading.textContent = 'Error!'; - return heading; -} - -export function createZapthreadsErrorDetails() { - const container = document.createElement('div'); - container.className = 'ztr-comment-text'; - - const pre = document.createElement('pre'); - container.appendChild(pre); - - const message = document.createElement('p'); - message.textContent = - 'Only properly formed NIP-19 naddr, note and nevent encoded entities and URLs are supported.'; - container.appendChild(message); - - return container; -} - -export function createZapthreadsTitleHeading() { - const heading = document.createElement('h2'); - heading.id = 'ztr-title'; - return heading; -} - -export const DEFAULT_THREAD_TITLE = 'Thread'; - -export function renderThreadTitle(titleEl, title = DEFAULT_THREAD_TITLE) { - if (!titleEl) return; - titleEl.innerHTML = escapeHTML(title || DEFAULT_THREAD_TITLE); -} - -export function createZapthreadsPoweredByMessage() { - const paragraph = document.createElement('p'); - paragraph.appendChild(document.createTextNode('Powered by ')); - - const link = document.createElement('a'); - link.href = 'https://github.com/fr4nzap/zapthreads'; - link.textContent = 'zapthreads'; - paragraph.appendChild(link); - - return paragraph; -} - -export function createZapthreadsClearCacheButton() { - const button = document.createElement('button'); - button.textContent = 'Clear cache'; - return button; -} - -export function createZapthreadsAnchorVersionLabel() { - const paragraph = document.createElement('p'); - paragraph.textContent = 'Anchor version: '; - return paragraph; -} - -export const DEFAULT_RELAYS = [ - 'wss://relay.damus.io', - 'wss://nos.lol', -]; - -export const DEFAULT_DISABLE_FEATURES = []; - -export function parseRelayList(relayList = '') { - if (!relayList.trim()) { - return [...DEFAULT_RELAYS]; - } - - const relays = []; - - for (const item of relayList.split(',')) { - const trimmed = item.trim(); - if (!trimmed) continue; - - try { - relays.push(new URL(trimmed).toString()); - } catch (error) { - userLogger.warn('[zapthreads] ignored invalid relay input', trimmed, error); - } - } - - return relays.length > 0 ? relays : [...DEFAULT_RELAYS]; -} - -export function parseDisableList(disableList = '') { - return disableList - .split(',') - .map((item) => item.trim()) - .filter(Boolean); -} - -export function parseUrlOptions(urls = '') { - if (!urls || typeof urls !== 'string') { - return {}; - } - - try { - const parsed = JSON.parse(urls); - if (parsed && typeof parsed === 'object') { - return parsed; - } - } catch (error) { - // Ignore JSON parse errors and fall back to manual parsing below. - } - - const map = {}; - for (const segment of urls.split(',')) { - const [rawKey, rawValue] = segment.split('='); - if (!rawKey || !rawValue) continue; - const key = rawKey.trim(); - const value = rawValue.trim(); - if (!key || !value) continue; - map[key] = value; - } - - return map; -} - -export function normalizeAnchor(anchor, { legacyUrl = false } = {}) { - const trimmed = (anchor || '').trim(); - - if (!trimmed) { - return { type: 'error', value: 'Missing anchor value' }; - } - - try { - if (trimmed.startsWith('http')) { - const normalized = legacyUrl ? trimmed : normalizeHttpAnchor(trimmed); - return { type: 'http', value: normalized }; - } - - const decoded = decodeNostrEntity(trimmed); - - if (!decoded) { - return { type: 'error', value: `Unsupported anchor: ${trimmed}` }; - } - - if (decoded.type === 'note' || decoded.type === 'nevent') { - return { type: 'note', value: decoded.id }; - } - - if (decoded.type === 'naddr') { - const { kind, pubkey, identifier } = decoded; - return { type: 'naddr', value: `${kind}:${pubkey}:${identifier}` }; - } - - return { type: 'error', value: `Unsupported anchor type: ${decoded.type}` }; - } catch (error) { - return { type: 'error', value: `Malformed anchor: ${trimmed}`, error }; - } -} - -export function createState(options = {}) { - const { - anchor = '', - legacyUrl = false, - relays = '', - disable = '', - version = '', - } = options; - - const normalizedAnchor = normalizeAnchor(anchor, { legacyUrl }); - - return { - anchor: normalizedAnchor, - version, - relays: parseRelayList(relays), - disableFeatures: parseDisableList(disable), - legacyUrl, - filter: {}, - rootEventIds: [], - anchorAuthor: undefined, - subscription: null, - eventMap: new Map(), - events: [], - }; -} - -export function updateFilterForAnchor(state) { - if (!state || !state.anchor) { - return; - } - - const { anchor, rootEventIds, version } = state; - - if (anchor.type === 'http' || anchor.type === 'note') { - if (!rootEventIds.length) { - state.filter = {}; - return; - } - - state.filter = { '#e': [...rootEventIds] }; - return; - } - - if (anchor.type === 'naddr') { - state.filter = { '#a': [anchor.value] }; - state.version = version || rootEventIds[0] || ''; - } -} - -export function updateStateFromEvents( - state, - events = [], - { parseEvent = Na } = {} -) { - if (!state || !Array.isArray(events) || events.length === 0) { - return []; - } - - const parsedEvents = []; - const rootIds = new Set(state.rootEventIds); - const parser = typeof parseEvent === 'function' ? parseEvent : null; - - if (!state.eventMap || typeof state.eventMap.set !== 'function') { - state.eventMap = new Map(); - } - - for (const event of events) { - if (!event) continue; - const parsed = parser ? parser(event) : event; - if (!parsed) continue; - - parsedEvents.push(parsed); - - const rootId = parsed.ro || parsed.id || event.id; - if (rootId) { - rootIds.add(rootId); - } - - if ( - !state.anchorAuthor && - (!parsed.ro || parsed.ro === parsed.id) && - parsed.pk - ) { - state.anchorAuthor = parsed.pk; - } - - const eventId = parsed.id || event.id; - if (!eventId) { - continue; - } - - const previous = state.eventMap.get(eventId) || {}; - state.eventMap.set(eventId, { - ...previous, - ...parsed, - }); - } - - if (rootIds.size > 0) { - state.rootEventIds = [...rootIds]; - } - - if (!state.version && state.rootEventIds.length > 0) { - state.version = state.rootEventIds[0]; - } - - updateFilterForAnchor(state); - - state.events = Array.from(state.eventMap.values()).sort((a, b) => { - const aTs = typeof a.ts === 'number' ? a.ts : 0; - const bTs = typeof b.ts === 'number' ? b.ts : 0; - return bTs - aTs; - }); - - return parsedEvents; -} - -function normalizeBaseUrl(baseUrl) { - if (!baseUrl) { - return 'https://njump.me/'; - } - return baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`; -} - -function createProfileUrl(pubkey, baseUrl) { - if (!pubkey) { - return '#'; - } - const normalized = normalizeBaseUrl(baseUrl); - return `${normalized}${pubkey}`; -} - -function createEventUrl(eventId, baseUrl) { - if (!eventId) { - return '#'; - } - const normalized = normalizeBaseUrl(baseUrl); - return `${normalized}${eventId}`; -} - -export function formatEventTimestamp(timestamp) { - if (!timestamp && timestamp !== 0) { - return ''; - } - - const date = new Date(timestamp * 1000); - if (Number.isNaN(date.getTime())) { - return ''; - } - - try { - return new Intl.DateTimeFormat(undefined, { - dateStyle: 'medium', - timeStyle: 'short', - }).format(date); - } catch (error) { - return date.toISOString(); - } -} - -export function formatAuthorName(pubkey) { - if (!pubkey) { - return 'Unknown'; - } - - const trimmed = pubkey.trim(); - if (trimmed.length <= 16) { - return trimmed; - } - - return `${trimmed.slice(0, 8)}…${trimmed.slice(-8)}`; -} - -function truncateContent(content = '', limit = 280) { - const text = content.trim(); - if (text.length <= limit) { - return text; - } - return `${text.slice(0, Math.max(0, limit - 1))}…`; -} - -function convertContentToHtml(content = '') { - return escapeHTML(content).replace(/\n/g, '
'); -} - -function isFeatureDisabled(feature, disabled = []) { - return Array.isArray(disabled) && disabled.includes(feature); -} - -export function renderThread( - threadEl, - events = [], - { - anchor, - disableFeatures = [], - urlOptions = {}, - } = {}, -) { - if (!threadEl) { - return; - } - - clearElement(threadEl); - - const list = Array.isArray(events) ? [...events] : []; - if (list.length === 0) { - const empty = document.createElement('p'); - empty.className = 'ztr-thread-empty'; - empty.textContent = 'No comments yet.'; - threadEl.appendChild(empty); - return; - } - - const profileBaseUrl = normalizeBaseUrl( - urlOptions.profile || urlOptions.profileBase || 'https://njump.me/', - ); - const eventBaseUrl = normalizeBaseUrl( - urlOptions.event || urlOptions.eventBase || urlOptions.profile || 'https://njump.me/', - ); - - list.sort((a, b) => { - const aTs = typeof a.ts === 'number' ? a.ts : 0; - const bTs = typeof b.ts === 'number' ? b.ts : 0; - return bTs - aTs; - }); - - for (const event of list) { - const comment = createZapthreadsCommentContainer(); - const pictureWrapper = comment.querySelector('.ztr-comment-info-picture'); - const pictureImage = pictureWrapper ? pictureWrapper.querySelector('img') : null; - if (pictureImage) { - pictureImage.alt = 'User avatar'; - pictureImage.decoding = 'async'; - pictureImage.loading = 'lazy'; - if (event.picture) { - pictureImage.src = event.picture; - } else { - pictureImage.removeAttribute('src'); - } - } - - const authorLink = comment.querySelector('.ztr-comment-info-author a'); - if (authorLink) { - authorLink.href = createProfileUrl(event.pk, profileBaseUrl); - authorLink.textContent = formatAuthorName(event.pk); - authorLink.rel = 'noopener'; - authorLink.target = '_blank'; - } - - const authorBadge = comment.querySelector('.ztr-comment-info-author strong'); - if (authorBadge) { - authorBadge.textContent = ' posted'; - } - - const dotsLink = comment.querySelector('.ztr-comment-info-dots'); - if (dotsLink) { - dotsLink.href = createEventUrl(event.id, eventBaseUrl); - dotsLink.textContent = 'View'; - dotsLink.target = '_blank'; - dotsLink.rel = 'noopener'; - } - - const infoLists = comment.querySelectorAll('.ztr-comment-info-items'); - const metaList = infoLists[1]; - if (metaList) { - clearElement(metaList); - const timestampItem = document.createElement('li'); - timestampItem.textContent = formatEventTimestamp(event.ts); - metaList.appendChild(timestampItem); - - if (event.ro && anchor && anchor.value && event.ro !== anchor.value) { - const bullet = createZapthreadsBulletSeparator(); - metaList.appendChild(bullet); - const crossPost = createZapthreadsRepliesLabel(); - crossPost.textContent = 'Cross-post'; - metaList.appendChild(crossPost); - } - } - - const [truncatedText, fullText] = comment.querySelectorAll('.ztr-comment-text'); - if (truncatedText) { - truncatedText.innerHTML = convertContentToHtml(truncateContent(event.c)); - } - if (fullText) { - fullText.innerHTML = convertContentToHtml(event.c); - } - - const actions = comment.querySelector('.ztr-comment-actions'); - if (actions) { - clearElement(actions); - - if (!isFeatureDisabled('reply', disableFeatures)) { - const replyAction = createZapthreadsReplyActionItem(); - const replySpan = replyAction.querySelector('span'); - if (replySpan) { - replySpan.textContent = 'Reply'; - } - actions.appendChild(replyAction); - } - - if (!isFeatureDisabled('likes', disableFeatures)) { - const likeAction = createZapthreadsLikeAction(); - const likeSpan = likeAction.querySelector('span'); - if (likeSpan) { - const count = typeof event.likeCount === 'number' ? event.likeCount : 0; - likeSpan.textContent = `${count} likes`; - } - actions.appendChild(likeAction); - } - - if (!isFeatureDisabled('zaps', disableFeatures)) { - const zapAction = createZapthreadsZapAction(); - const zapSpan = zapAction.querySelector('span'); - if (zapSpan) { - const total = typeof event.zapTotal === 'number' ? event.zapTotal : 0; - zapSpan.textContent = `${total} sats`; - } - actions.appendChild(zapAction); - } - } - - const infoPane = createZapthreadsInfoPane(); - const infoLink = infoPane.querySelector('a'); - if (infoLink) { - infoLink.href = createEventUrl(event.id, eventBaseUrl); - infoLink.rel = 'noopener'; - infoLink.target = '_blank'; - } - comment.appendChild(infoPane); - - threadEl.appendChild(comment); - } -} - -export async function loadRootEvents({ - state, - data, - onCache, - onNetwork, -}) { - if (!state || !data) return { cache: [], network: [] }; - - const { anchor, relays } = state; - - if (!anchor || anchor.type === 'error') { - return { cache: [], network: [] }; - } - - const cacheResults = []; - const networkResults = []; - - if (anchor.type === 'http') { - const cached = await data.Ti('events', anchor.value, { index: 'r' }); - cacheResults.push(...cached); - } else if (anchor.type === 'note') { - const cached = await data.Ti('events', anchor.value, { index: 'id' }); - cacheResults.push(...cached); - } else if (anchor.type === 'naddr') { - const cached = await data.Ti('events', anchor.value, { index: 'a' }); - cacheResults.push(...cached); - } - - if (onCache) { - onCache(cacheResults); - } - - if (data.di && typeof data.di.querySync === 'function') { - const filter = createFilterForAnchor(state); - const queryResults = await data.di.querySync(relays, filter); - networkResults.push(...queryResults); - if (onNetwork) { - onNetwork(queryResults); - } - } - - return { cache: cacheResults, network: networkResults }; -} - -export function createFilterForAnchor(state) { - const { anchor, rootEventIds, legacyUrl } = state; - - if (!anchor) return {}; - - if (anchor.type === 'http') { - const values = [anchor.value]; - if (!legacyUrl) { - values.push(`${anchor.value}/`); - } - return { '#r': values, kinds: [1, 8812] }; - } - - if (anchor.type === 'note') { - return { ids: [anchor.value] }; - } - - if (anchor.type === 'naddr') { - return { '#a': [anchor.value] }; - } - - return {}; -} - -export function decodeNostrEntity(entity) { - try { - const { decode } = window.NostrTools?.nip19 ?? {}; - if (!decode) return null; - const result = decode(entity); - if (!result) return null; - - switch (result.type) { - case 'nevent': - return { type: 'note', id: result.data.id }; - case 'note': - return { type: 'note', id: result.data }; - case 'naddr': { - const { kind, pubkey, identifier } = result.data; - return { type: 'naddr', kind, pubkey, identifier }; - } - default: - return { type: result.type }; - } - } catch (error) { - return { type: 'error', error }; - } - - return null; -} - -export function normalizeHttpAnchor(url) { - try { - const normalized = new URL(url); - normalized.hash = ''; - return normalized.toString().replace(/\/$/, ''); - } catch (error) { - throw error; - } -} - -export function renderWatermark(watermarkEl) { - if (!watermarkEl) return; - watermarkEl.textContent = ''; - const icon = createZapthreadsEllipsisIcon(); - icon.classList.add('ztr-watermark-icon'); - watermarkEl.appendChild(icon); - const label = document.createElement('span'); - label.textContent = ' Zapthreads'; - watermarkEl.appendChild(label); -} - -export function renderAnchorVersion(labelEl, version) { - if (!labelEl) return; - labelEl.innerHTML = `Anchor version: ${escapeHTML(version || 'unknown')}`; -} - -export const ZAPTHREADS_EVENT_MOUNTED = 'zapthreads:mounted'; -export const ZAPTHREADS_EVENT_UNMOUNTED = 'zapthreads:unmounted'; -export const ZAPTHREADS_EVENT_CLEAR_CACHE = 'zapthreads:clear-cache'; - -export function renderClearCache(buttonEl, clearCache) { - if (!buttonEl) return () => {}; - const handler = () => { - if (typeof clearCache === 'function') { - clearCache(); - } - buttonEl.dispatchEvent( - new CustomEvent(ZAPTHREADS_EVENT_CLEAR_CACHE, { - bubbles: true, - detail: { source: 'button' }, - }) - ); - }; - buttonEl.addEventListener('click', handler); - return () => { - buttonEl.removeEventListener('click', handler); - }; -} - -export function clearElement(element) { - if (!element) return; - while (element.firstChild) { - element.removeChild(element.firstChild); - } -} - -function getBlogAppRoot() { - return document.querySelector('.blog-app-root'); -} - -function dispatchZapthreadsEvent(targets, type, detail) { - for (const target of targets) { - if (!target || typeof target.dispatchEvent !== 'function') continue; - target.dispatchEvent( - new CustomEvent(type, { - bubbles: true, - detail: detail ? { ...detail } : {}, - }) - ); - } -} - -export async function initZapthreadsEmbed({ - root, - options, - dataUtils, -} = {}) { - if (!root) { - throw new Error('initZapthreadsEmbed requires a root element'); - } - - const data = dataUtils || {}; - const state = createState(options); - const urlOptions = parseUrlOptions( - options && typeof options.urls === 'string' ? options.urls : '', - ); - - const blogRoot = getBlogAppRoot(); - if (!blogRoot) { - throw new Error('initZapthreadsEmbed requires .blog-app-root container'); - } - - const rootEl = createZapthreadsRoot(); - - const watermarkEl = rootEl.querySelector('.blog-ztr-watermark'); - renderWatermark(watermarkEl); - - const contentEl = createZapthreadsContent(); - rootEl.appendChild(contentEl); - - const titleEl = createZapthreadsTitleHeading(); - contentEl.appendChild(titleEl); - let currentTitle = DEFAULT_THREAD_TITLE; - let hasCustomTitle = false; - renderThreadTitle(titleEl, currentTitle); - - const poweredByEl = createZapthreadsPoweredByMessage(); - contentEl.appendChild(poweredByEl); - - const anchorVersionEl = createZapthreadsAnchorVersionLabel(); - contentEl.appendChild(anchorVersionEl); - renderAnchorVersion(anchorVersionEl, state.version); - - const clearCacheButton = createZapthreadsClearCacheButton(); - contentEl.appendChild(clearCacheButton); - - const threadEl = createZapthreadsThreadContainer(); - contentEl.appendChild(threadEl); - renderThread(threadEl, state.events, { - anchor: state.anchor, - disableFeatures: state.disableFeatures, - urlOptions, - }); - - const disposeCallbacks = new Set(); - const registerDispose = (callback) => { - if (typeof callback === 'function') { - disposeCallbacks.add(callback); - } - }; - - const clearCacheCleanup = renderClearCache(clearCacheButton, data.clearCache); - registerDispose(clearCacheCleanup); - - removeExistingZapthreadsMount(blogRoot); - const mountContainer = createZapthreadsMountContainer(blogRoot); - mountContainer.appendChild(rootEl); - - const lifecycleTargets = [rootEl]; - if (root && root !== rootEl && typeof root.dispatchEvent === 'function') { - lifecycleTargets.push(root); - } - - const lifecycleDetail = () => ({ anchor: state.anchor, root: rootEl }); - - const renderError = (message) => { - clearElement(contentEl); - const heading = createZapthreadsErrorHeading(); - heading.textContent = 'Error!'; - const details = createZapthreadsErrorDetails(); - const pre = details.querySelector('pre'); - if (pre) { - pre.innerHTML = escapeHTML(message || ''); - } - contentEl.appendChild(heading); - contentEl.appendChild(details); - }; - - if (state.anchor.type === 'error') { - renderError(state.anchor.value); - dispatchZapthreadsEvent(lifecycleTargets, ZAPTHREADS_EVENT_MOUNTED, lifecycleDetail()); - return () => { - disposeCallbacks.forEach((callback) => { - try { - callback(); - } catch (error) { - userLogger.error('[zapthreads] cleanup failed', error); - } - }); - disposeCallbacks.clear(); - dispatchZapthreadsEvent( - lifecycleTargets, - ZAPTHREADS_EVENT_UNMOUNTED, - lifecycleDetail() - ); - if (mountContainer.parentNode) { - mountContainer.parentNode.removeChild(mountContainer); - } - }; - } - - dispatchZapthreadsEvent( - lifecycleTargets, - ZAPTHREADS_EVENT_MOUNTED, - lifecycleDetail() - ); - - updateFilterForAnchor(state); - renderAnchorVersion(anchorVersionEl, state.version); - - const parseEvent = typeof data.Na === 'function' ? data.Na : null; - - let currentSubscription = null; - let currentFilterKey = null; - const closeSubscription = () => { - if (currentSubscription && typeof currentSubscription.close === 'function') { - try { - currentSubscription.close(); - } catch (error) { - userLogger.error('[zapthreads] failed to close subscription', error); - } - } - currentSubscription = null; - currentFilterKey = null; - state.subscription = null; - }; - registerDispose(closeSubscription); - - const processEvents = (events = []) => { - const parsedEvents = updateStateFromEvents(state, events, { parseEvent }); - if (parsedEvents.length > 0) { - const eventWithTitle = parsedEvents.find((item) => item && item.tl); - if (eventWithTitle) { - hasCustomTitle = true; - currentTitle = eventWithTitle.tl || DEFAULT_THREAD_TITLE; - renderThreadTitle(titleEl, currentTitle); - } - } else if (!hasCustomTitle) { - renderThreadTitle(titleEl, currentTitle); - } - renderAnchorVersion(anchorVersionEl, state.version); - renderThread(threadEl, state.events, { - anchor: state.anchor, - disableFeatures: state.disableFeatures, - urlOptions, - }); - return parsedEvents; - }; - - const ensureSubscription = () => { - if (!data.di || typeof data.di.subscribeMany !== 'function') return; - if (!state.filter || Object.keys(state.filter).length === 0) return; - - const nextKey = JSON.stringify(state.filter); - if (currentSubscription && currentFilterKey === nextKey) { - return; - } - - closeSubscription(); - currentFilterKey = nextKey; - currentSubscription = data.di.subscribeMany(state.relays, [state.filter], { - onevent(event) { - if (!event) return; - processEvents([event]); - if (typeof data.un === 'function') { - data.un('events', event, { immediate: true }); - } - }, - }); - state.subscription = currentSubscription; - }; - - await loadRootEvents({ - state, - data, - onCache(events = []) { - processEvents(events); - ensureSubscription(); - }, - onNetwork(events = []) { - if (!Array.isArray(events) || events.length === 0) { - ensureSubscription(); - return; - } - processEvents(events); - for (const event of events) { - if (event && typeof data.un === 'function') { - data.un('events', event, { immediate: true }); - } - } - ensureSubscription(); - }, - }); - - ensureSubscription(); - - return () => { - disposeCallbacks.forEach((callback) => { - try { - callback(); - } catch (error) { - userLogger.error('[zapthreads] cleanup failed', error); - } - }); - disposeCallbacks.clear(); - dispatchZapthreadsEvent( - lifecycleTargets, - ZAPTHREADS_EVENT_UNMOUNTED, - lifecycleDetail() - ); - if (mountContainer.parentNode) { - mountContainer.parentNode.removeChild(mountContainer); - } - }; -} diff --git a/js/config.js b/js/config.js index 77088cbb..2f53f76c 100644 --- a/js/config.js +++ b/js/config.js @@ -6,6 +6,7 @@ import { ADMIN_SUPER_NPUB, ADMIN_DM_IMAGE_URL, BITVID_WEBSITE_URL, + BLOG_URL, MAX_WALLET_DEFAULT_ZAP, PLATFORM_FEE_PERCENT, PLATFORM_LUD16_OVERRIDE, @@ -43,6 +44,7 @@ export const ADMIN_LIST_MODE = "nostr"; export { ADMIN_SUPER_NPUB }; export { ADMIN_DM_IMAGE_URL }; export { BITVID_WEBSITE_URL }; +export { BLOG_URL }; export { MAX_WALLET_DEFAULT_ZAP }; export { PLATFORM_FEE_PERCENT }; export { PLATFORM_LUD16_OVERRIDE }; diff --git a/js/index.js b/js/index.js index 17c7f8e2..86853a44 100644 --- a/js/index.js +++ b/js/index.js @@ -19,6 +19,7 @@ import { openStaticModal, closeStaticModal, } from "./ui/components/staticModalAccessibility.js"; +import { BLOG_URL } from "./config.js"; validateInstanceConfig(); @@ -209,6 +210,15 @@ async function bootstrapInterface() { await loadSidebar("components/sidebar.html", "sidebarContainer"); devLogger.log("Sidebar loaded."); + const blogLink = document.querySelector("[data-blog-link]"); + if (blogLink instanceof HTMLAnchorElement) { + blogLink.href = BLOG_URL; + blogLink.target = "_blank"; + blogLink.rel = "noopener noreferrer"; + } else { + userLogger.warn("Sidebar blog link not found; skipping external link binding."); + } + const sidebar = document.getElementById("sidebar"); const collapseToggle = document.getElementById("sidebarCollapseToggle"); if (sidebar && !sidebar.hasAttribute("data-footer-state")) { diff --git a/scripts/check-design-tokens.mjs b/scripts/check-design-tokens.mjs index aff78855..44773994 100755 --- a/scripts/check-design-tokens.mjs +++ b/scripts/check-design-tokens.mjs @@ -9,7 +9,7 @@ const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); const repoRoot = path.resolve(__dirname, ".."); -const TARGET_DIRECTORIES = ["js/blog", "js/ui", "torrent/ui"]; +const TARGET_DIRECTORIES = ["js/ui", "torrent/ui"]; const TARGET_FILES = ["js/channelProfile.js", "css/tailwind.source.css"]; const IGNORED_DIRECTORIES = new Set(["dist", "vendor"]); const IGNORED_EXTENSIONS = new Set([".min.js", ".map"]); diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 9413bd2c..b0ba9a99 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -3,7 +3,6 @@ const typography = require("@tailwindcss/typography"); module.exports = { content: [ "./index.html", - "./blog.html", "./components/**/*.html", "./views/**/*.html", "./js/**/*.js", @@ -158,53 +157,7 @@ module.exports = { 700: "var(--color-neutral-700)" }, white: "var(--color-white)", - black: "var(--color-black)", - blog: { - transparent: "var(--color-blog-transparent)", - "cyan-500": "var(--color-blog-cyan-500)", - "sky-500": "var(--color-blog-sky-500)", - "teal-600": "var(--color-blog-teal-600)", - "green-800": "var(--color-blog-green-800)", - "green-700": "var(--color-blog-green-700)", - "teal-700": "var(--color-blog-teal-700)", - "gray-900": "var(--color-blog-gray-900)", - "coffee-900": "var(--color-blog-coffee-900)", - "green-500": "var(--color-blog-green-500)", - "gray-800": "var(--color-blog-gray-800)", - "gray-700": "var(--color-blog-gray-700)", - "teal-accent": "var(--color-blog-teal-accent)", - "gray-650": "var(--color-blog-gray-650)", - "brown-700": "var(--color-blog-brown-700)", - "purple-900": "var(--color-blog-purple-900)", - "gray-500": "var(--color-blog-gray-500)", - "gray-450": "var(--color-blog-gray-450)", - "gray-440": "var(--color-blog-gray-440)", - "brown-500": "var(--color-blog-brown-500)", - "rust-700": "var(--color-blog-rust-700)", - "purple-700": "var(--color-blog-purple-700)", - "purple-accent": "var(--color-blog-purple-accent)", - "purple-muted": "var(--color-blog-purple-muted)", - "gray-300": "var(--color-blog-gray-300)", - "purple-500": "var(--color-blog-purple-500)", - "gray-275": "var(--color-blog-gray-275)", - "red-600": "var(--color-blog-red-600)", - "rust-600": "var(--color-blog-rust-600)", - error: "var(--color-blog-error)", - "gray-220": "var(--color-blog-gray-220)", - "gray-210": "var(--color-blog-gray-210)", - "gray-200": "var(--color-blog-gray-200)", - "amber-500": "var(--color-blog-amber-500)", - "gray-190": "var(--color-blog-gray-190)", - "orange-600": "var(--color-blog-orange-600)", - "gray-180": "var(--color-blog-gray-180)", - "gray-170": "var(--color-blog-gray-170)", - "red-500": "var(--color-blog-red-500)", - "amber-400": "var(--color-blog-amber-400)", - "neutral-100": "var(--color-blog-neutral-100)", - "neutral-120": "var(--color-blog-neutral-120)", - "orange-500": "var(--color-blog-orange-500)", - "neutral-50": "var(--color-blog-neutral-50)" - } + black: "var(--color-black)" }, textColor: { primary: "var(--text-primary)", @@ -351,15 +304,11 @@ module.exports = { menu: "var(--menu-min-width)", "grid-card": "var(--grid-card-min-width)" }, - width: { - "blog-fluid": "var(--blog-layout-fluid-width)" - }, maxWidth: { modal: "var(--modal-max-width)", player: "var(--layout-player-max-width)", docs: "var(--layout-docs-max-width)", - "popover-safe": "var(--popover-inline-safe-max)", - "blog-shell": "var(--blog-layout-max-width)" + "popover-safe": "var(--popover-inline-safe-max)" }, translate: { toast: "var(--toast-translate)" diff --git a/tests/blog-carousel.test.mjs b/tests/blog-carousel.test.mjs deleted file mode 100644 index d4719b5e..00000000 --- a/tests/blog-carousel.test.mjs +++ /dev/null @@ -1,297 +0,0 @@ -import assert from 'node:assert/strict'; -import { beforeEach, afterEach, describe, test } from 'node:test'; - -import { advanceSlide, createCarousel, destroyCarousel } from '../js/blog/carousel.js'; -import { mountProgressBar } from '../js/blog/progressBar.js'; -import { createBlogDomEnvironment, createSpy } from './test-helpers/blog-dom.mjs'; - -function assertHasClasses(element, classes, messagePrefix = 'element') { - classes.forEach((className) => { - assert.ok( - element.classList.contains(className), - `${messagePrefix} should include the “${className}” class`, - ); - }); -} - -function assertNoInlineStyleAttributes(elements, messagePrefix = 'element') { - elements.forEach((element, index) => { - assert.ok(element, `${messagePrefix} at index ${index} should exist`); - assert.strictEqual( - element.hasAttribute('style'), - false, - `${messagePrefix} at index ${index} should not set inline style attributes`, - ); - }); -} - -const CAROUSEL_HTML = ` -
-
-
    -
  • Slide 1
    • -
  • Slide 2
    • -
  • Slide 3
    • -
-
- - -
-`; - -const PROGRESS_HTML = '
'; - -describe('blog carousel', () => { - let env; - let container; - let track; - let slides; - let prevButton; - let nextButton; - - beforeEach(() => { - env = createBlogDomEnvironment(CAROUSEL_HTML); - const doc = env.document; - container = doc.querySelector('[data-carousel]'); - track = container.querySelector('[data-carousel-track]'); - slides = Array.from(track.children); - prevButton = container.querySelector('[data-carousel-prev]'); - nextButton = container.querySelector('[data-carousel-next]'); - - env.inlineStyleGuard.guard(container); - env.inlineStyleGuard.guard(track); - env.inlineStyleGuard.guard(prevButton); - env.inlineStyleGuard.guard(nextButton); - slides.forEach((slide) => env.inlineStyleGuard.guard(slide)); - }); - - afterEach(() => { - env.cleanup(); - }); - - test('initializes slides with data attributes and accessibility state', () => { - const state = createCarousel(container, { - perPage: 1, - loop: true, - controls: { prev: prevButton, next: nextButton }, - }); - - assert.ok(state, 'state should be created when container markup is valid'); - assert.strictEqual(state.perPage, 1); - assert.strictEqual(state.slides.length, 3); - assert.strictEqual(state.pageCount, 3); - - assert.strictEqual(container.dataset.index, '0'); - assert.strictEqual(container.dataset.perPage, '1'); - assert.strictEqual(container.dataset.count, '3'); - assert.strictEqual(container.dataset.state, 'active'); - assert.strictEqual(track.dataset.transition, 'auto'); - - assertNoInlineStyleAttributes([container, track, ...slides], 'carousel element'); - - slides.forEach((slide, index) => { - assert.strictEqual(slide.dataset.index, String(index)); - assert.strictEqual(slide.dataset.active, index === 0 ? 'true' : 'false'); - assert.strictEqual(slide.dataset.inert, index === 0 ? 'false' : 'true'); - assert.strictEqual(slide.getAttribute('aria-hidden'), index === 0 ? 'false' : 'true'); - }); - - state.goTo(2); - assert.strictEqual(state.index, 2); - assert.strictEqual(container.dataset.index, '2'); - assert.strictEqual(slides[2].dataset.active, 'true'); - assert.strictEqual(slides[0].dataset.active, 'false'); - assert.strictEqual(slides[2].getAttribute('aria-hidden'), 'false'); - assert.strictEqual(slides[0].getAttribute('aria-hidden'), 'true'); - - destroyCarousel(state); - }); - - test('control buttons advance slides and respect looping', () => { - const state = createCarousel(container, { - perPage: 1, - loop: true, - controls: { prev: prevButton, next: nextButton }, - }); - - nextButton.dispatchEvent(new env.window.MouseEvent('click', { bubbles: true })); - assert.strictEqual(state.index, 1); - nextButton.dispatchEvent(new env.window.MouseEvent('click', { bubbles: true })); - assert.strictEqual(state.index, 2); - nextButton.dispatchEvent(new env.window.MouseEvent('click', { bubbles: true })); - assert.strictEqual(state.index, 0, 'looping should wrap forward navigation to the first slide'); - - prevButton.dispatchEvent(new env.window.MouseEvent('click', { bubbles: true })); - assert.strictEqual(state.index, 2, 'looping should wrap backward navigation to the last slide'); - - destroyCarousel(state); - }); - - test('auto play progress resets when navigation occurs', () => { - const state = createCarousel(container, { - perPage: 1, - controls: { prev: prevButton, next: nextButton }, - }); - const events = []; - const progress = { - reset: () => events.push('reset'), - start: (duration) => events.push(['start', duration]), - destroy: () => events.push('destroy'), - }; - state.setProgress(progress); - state.autoPlayInterval = 4200; - - state.goTo(1); - assert.deepStrictEqual(events, ['reset', ['start', 4200]]); - - events.length = 0; - state.goTo(2, { restartProgress: false }); - assert.deepStrictEqual(events, [], 'progress should not restart when restartProgress is false'); - - destroyCarousel(state); - }); - - test('destroyCarousel tears down listeners and progress state', () => { - const state = createCarousel(container, { - perPage: 1, - controls: { prev: prevButton, next: nextButton }, - }); - const progressEvents = []; - const progress = { - reset: () => progressEvents.push('reset'), - start: () => progressEvents.push('start'), - destroy: () => progressEvents.push('destroy'), - }; - state.setProgress(progress); - state.autoPlayInterval = 2000; - state.goTo(1); - - destroyCarousel(state); - assert.ok(progressEvents.includes('destroy'), 'progress.destroy should be called during teardown'); - assert.ok(!container.classList.contains('is-initialized')); - assert.ok(!container.classList.contains('is-active')); - assert.strictEqual(state.cleanup.length, 0); - - assertNoInlineStyleAttributes([container, track, ...slides], 'carousel element'); - - const previousIndex = state.index; - nextButton.dispatchEvent(new env.window.MouseEvent('click', { bubbles: true })); - assert.strictEqual(state.index, previousIndex, 'clicks after destroy should not change the index'); - assert.strictEqual(container.dataset.index, undefined); - }); - - test('advanceSlide delegates to goTo with relative offsets', () => { - const state = createCarousel(container, { perPage: 1 }); - const goToSpy = createSpy(); - state.goTo = goToSpy; - state.index = 2; - - advanceSlide(state, -1, { restartProgress: false }); - assert.strictEqual(goToSpy.callCount, 1); - assert.deepStrictEqual(goToSpy.calls[0], [1, { restartProgress: false }]); - }); -}); - - -describe('progress bar', () => { - let env; - let container; - - beforeEach(() => { - env = createBlogDomEnvironment(PROGRESS_HTML); - container = env.document.getElementById('progress-root'); - env.inlineStyleGuard.guard(container); - }); - - afterEach(() => { - env.cleanup(); - }); - - test('mountProgressBar renders semantic progress meter without style injection', () => { - const progress = mountProgressBar(container, { initialDuration: 500, autoStart: false }); - assert.ok(progress, 'progress instance should be returned'); - - const wrapper = container.querySelector('.blog-carousel__progress'); - assert.ok(wrapper, 'wrapper element should be appended'); - assertHasClasses(wrapper, ['blog-carousel__progress', 'blog-progress', 'mt-2'], 'progress wrapper'); - assert.strictEqual(wrapper.dataset.carouselProgress, 'true'); - assert.strictEqual(wrapper.getAttribute('data-carousel-progress'), 'true'); - const meter = wrapper.querySelector('progress.progress--blog'); - assert.ok(meter, 'progress meter should be created'); - assertHasClasses(meter, ['progress', 'progress--blog'], 'progress meter'); - assert.strictEqual(meter.max, 100, 'progress meter should expose a 0-100 range'); - assert.strictEqual(meter.value, 0, 'progress meter should start at zero'); - assert.strictEqual(meter.dataset.state, 'idle'); - assert.strictEqual(wrapper.dataset.state, 'idle'); - assert.strictEqual(meter.dataset.progress, '0'); - assert.strictEqual( - meter.getAttribute('aria-valuetext'), - 'Carousel progress 0% complete', - 'progress meter should emit accessible status text', - ); - assert.strictEqual(meter.getAttribute('data-progress-meter'), 'true'); - assert.strictEqual(meter.dataset.progressMeter, 'true'); - assert.strictEqual(meter.getAttribute('data-variant'), 'blog'); - - progress.reset(); - - assertNoInlineStyleAttributes([container, wrapper, meter], 'progress element'); - }); - - test('autoStart runs animation and triggers completion callback', () => { - const onComplete = createSpy(); - const progress = mountProgressBar(container, { initialDuration: 600, autoStart: true, onComplete }); - const wrapper = progress.element; - const meter = wrapper.querySelector('progress.progress--blog'); - assert.ok(meter, 'progress meter should exist when autoStart is enabled'); - - assertNoInlineStyleAttributes([container, wrapper, meter], 'progress element'); - - env.raf.step(0); - env.raf.step(300); - assert.strictEqual(onComplete.callCount, 0); - assert.ok(meter.value > 0 && meter.value < 100, 'meter should report intermediate progress'); - assert.strictEqual(meter.dataset.state, 'active'); - - env.raf.step(300); - assert.strictEqual(onComplete.callCount, 1); - assert.strictEqual(meter.value, 100); - assert.strictEqual(meter.dataset.state, 'complete'); - assert.strictEqual(meter.dataset.progress, '100'); - }); - - test('manual controls support stop, restart, and cleanup', () => { - const onComplete = createSpy(); - const progress = mountProgressBar(container, { initialDuration: 800, onComplete }); - const meter = progress.element.querySelector('progress.progress--blog'); - - progress.start(800); - env.raf.step(0); - env.raf.step(400); - assert.strictEqual(meter.value, 50, 'halfway through should yield a 50% reading'); - assert.strictEqual(meter.dataset.state, 'active'); - - progress.stop(); - assert.strictEqual(meter.dataset.state, 'paused'); - const pausedValue = meter.value; - - env.raf.step(600); - assert.strictEqual(meter.value, pausedValue, 'progress should not advance after stop'); - assert.strictEqual(onComplete.callCount, 0, 'stop should cancel pending completion'); - - progress.setOnComplete(onComplete); - progress.start(0); - assert.strictEqual(onComplete.callCount, 1, 'zero duration should fire completion immediately'); - assert.strictEqual(meter.value, 100); - assert.strictEqual(meter.dataset.state, 'complete'); - - progress.destroy(); - assert.strictEqual(container.children.length, 0, 'destroy should remove wrapper from DOM'); - assert.strictEqual( - container.querySelector('[data-carousel-progress]'), - null, - 'destroy should remove declarative progress markup', - ); - assertNoInlineStyleAttributes([container], 'progress container'); - }); -}); diff --git a/tests/test-helpers/blog-dom.mjs b/tests/test-helpers/blog-dom.mjs deleted file mode 100644 index d23893e3..00000000 --- a/tests/test-helpers/blog-dom.mjs +++ /dev/null @@ -1,205 +0,0 @@ -import { JSDOM } from 'jsdom'; - -const DOM_GLOBALS = [ - 'window', - 'document', - 'HTMLElement', - 'HTMLStyleElement', - 'Element', - 'Node', - 'Event', - 'MouseEvent', - 'CustomEvent', - 'KeyboardEvent', - 'MutationObserver', - 'getComputedStyle', -]; - -export function createSpy(implementation = () => {}) { - function spy(...args) { - spy.calls.push(args); - spy.callCount += 1; - return implementation(...args); - } - spy.calls = []; - spy.callCount = 0; - return spy; -} - -export function createAnimationFrameStub() { - let now = 0; - let handle = 0; - const queue = new Map(); - - function requestAnimationFrame(callback) { - handle += 1; - const id = handle; - queue.set(id, callback); - return id; - } - - function cancelAnimationFrame(id) { - queue.delete(id); - } - - function step(elapsed = 0) { - now += elapsed; - const callbacks = Array.from(queue.entries()); - queue.clear(); - for (const [, callback] of callbacks) { - callback(now); - } - } - - return { - requestAnimationFrame, - cancelAnimationFrame, - step, - get now() { - return now; - }, - get pending() { - return queue.size; - }, - }; -} - -export function installInlineStyleGuard(document) { - const originalCreateElement = document.createElement.bind(document); - const ElementConstructor = document.defaultView?.Element; - const guardedElements = new WeakSet(); - const attributePatches = []; - - if (ElementConstructor?.prototype) { - const prototype = ElementConstructor.prototype; - - if (typeof prototype.setAttribute === 'function') { - const original = prototype.setAttribute; - prototype.setAttribute = function inlineStyleSafeSetAttribute(name, value) { - if (typeof name === 'string' && name.toLowerCase() === 'style') { - throw new Error( - 'Inline style attributes are disabled in blog widget tests. Use CSS classes or data attributes instead.', - ); - } - return original.call(this, name, value); - }; - attributePatches.push(() => { - prototype.setAttribute = original; - }); - } - - if (typeof prototype.setAttributeNS === 'function') { - const original = prototype.setAttributeNS; - prototype.setAttributeNS = function inlineStyleSafeSetAttributeNS(namespace, name, value) { - if (typeof name === 'string' && name.toLowerCase() === 'style') { - throw new Error( - 'Inline style attributes are disabled in blog widget tests. Use CSS classes or data attributes instead.', - ); - } - return original.call(this, namespace, name, value); - }; - attributePatches.push(() => { - prototype.setAttributeNS = original; - }); - } - } - - function guard(element) { - if (!element || typeof element !== 'object') { - return element; - } - - if (guardedElements.has(element)) { - return element; - } - - Object.defineProperty(element, 'style', { - get() { - throw new Error( - 'Inline style access is disabled in blog widget tests. Use CSS classes or data attributes instead.', - ); - }, - set() { - throw new Error( - 'Inline style assignment is disabled in blog widget tests. Use CSS classes or data attributes instead.', - ); - }, - configurable: true, - }); - - guardedElements.add(element); - - if (element.children?.length) { - Array.from(element.children).forEach((child) => guard(child)); - } - - return element; - } - - document.createElement = function createElementGuarded(...args) { - const element = originalCreateElement(...args); - guard(element); - return element; - }; - - return { - guard, - restore() { - document.createElement = originalCreateElement; - attributePatches.forEach((restorePatch) => { - try { - restorePatch(); - } catch (error) { - // ignore failures to restore in tests - } - }); - }, - }; -} - -export function createBlogDomEnvironment(html) { - const dom = new JSDOM(html, { url: 'https://example.com' }); - const { window } = dom; - const previousGlobals = new Map(); - - for (const key of DOM_GLOBALS) { - previousGlobals.set(key, globalThis[key]); - const nextValue = window[key]; - if (typeof nextValue !== 'undefined') { - globalThis[key] = nextValue; - } else { - delete globalThis[key]; - } - } - - const inlineStyleGuard = installInlineStyleGuard(window.document); - const raf = createAnimationFrameStub(); - - previousGlobals.set('requestAnimationFrame', globalThis.requestAnimationFrame); - previousGlobals.set('cancelAnimationFrame', globalThis.cancelAnimationFrame); - - globalThis.requestAnimationFrame = raf.requestAnimationFrame; - globalThis.cancelAnimationFrame = raf.cancelAnimationFrame; - window.requestAnimationFrame = raf.requestAnimationFrame; - window.cancelAnimationFrame = raf.cancelAnimationFrame; - - return { - window, - document: window.document, - dom, - raf, - inlineStyleGuard, - cleanup() { - inlineStyleGuard.restore(); - dom.window.close(); - - for (const [key, value] of previousGlobals) { - if (typeof value === 'undefined') { - delete globalThis[key]; - } else { - globalThis[key] = value; - } - } - }, - }; -} diff --git a/views/blog.html b/views/blog.html deleted file mode 100644 index 50af79a6..00000000 --- a/views/blog.html +++ /dev/null @@ -1,129 +0,0 @@ - -
-
-
-

- Latest Blog Posts -

-
- - -
-
-
-