@devvit/ui-renderer 0.10.5-next-2023-09-19-b0d142ebc.0 → 0.10.5-next-2023-09-19-57fbad19f.0

package/blocks/attributes.d.ts

@@ -1,7 +1,7 @@
 import { ClassInfo } from 'lit/directives/class-map.js';
 import { StyleInfo } from 'lit/directives/style-map.js';
 import { ButtonAppearance, ButtonSize } from '@reddit/faceplate-ui/templates/button.js';
-import { Block, BlockAlignment, BlockAvatarFacing, BlockAvatarSize, BlockBorder, BlockButtonAppearance, BlockButtonSize, BlockFullSnooSize, BlockGap, BlockIconSize, BlockImageResizeMode, BlockPadding, BlockRadius, BlockSize, BlockSpacerShape, BlockSpacerSize, BlockStackDirection, BlockTextOutline, BlockTextSize, BlockTextWeight, BlockType } from '@devvit/protos';
+import { Block, BlockAlignment, BlockAvatarFacing, BlockAvatarSize, BlockBorder, BlockButtonAppearance, BlockButtonSize, BlockColor, BlockFullSnooSize, BlockGap, BlockIconSize, BlockImageResizeMode, BlockPadding, BlockRadius, BlockSize, BlockSpacerShape, BlockSpacerSize, BlockStackDirection, BlockTextOutline, BlockTextSize, BlockTextWeight, BlockType } from '@devvit/protos';
 import { RenderContext } from './templates/renderContext.js';
 import { ref as clientRef } from 'lit/directives/ref.js';
 export interface AttributeOverrides {
@@ -16,7 +16,7 @@ export declare function sizingStyle(sizing: BlockSize | undefined): StyleInfo;
 export declare function paddingClass(padding: BlockPadding | undefined): ClassInfo;
 export declare function gapClass(spacing: BlockGap | undefined): ClassInfo;
 export declare function alignmentClass(direction: BlockStackDirection, align: BlockAlignment | undefined): ClassInfo;
-export declare function backgroundStyle(background: string | undefined): StyleInfo;
+export declare function backgroundStyle(colors: BlockColor | undefined, legacyColor: string | undefined): StyleInfo;
 export declare function borderClass(border: BlockBorder | undefined): ClassInfo;
 export declare function borderStyle(border: BlockBorder | undefined): StyleInfo;
 export declare function radiusClass(radius: BlockRadius | undefined): ClassInfo;
@@ -24,8 +24,7 @@ export declare function textSizeClass(size: BlockTextSize | undefined): ClassInf
 export declare function textAlignClass(alignment: BlockAlignment | undefined): ClassInfo;
 export declare function textWeightClass(weight: BlockTextWeight | undefined): ClassInfo;
 export declare function textSelectClass(selection: boolean | undefined): ClassInfo;
-export declare function textOutlineClass(outline: BlockTextOutline, _textColor: string | undefined): ClassInfo;
-export declare function colorStyle(color: string | undefined): StyleInfo;
+export declare function colorStyle(colors: BlockColor | undefined, legacyColor: string | undefined): StyleInfo;
 export declare function spacerSizeClass(size: BlockSpacerSize | undefined, shape: BlockSpacerShape | undefined, stackDirection: BlockStackDirection): ClassInfo;
 export declare function resizeModeClass(resizeMode: BlockImageResizeMode | undefined): ClassInfo;
 export declare function iconSizeClass(size: BlockIconSize | undefined): ClassInfo;

package/blocks/attributes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"attributes.d.ts","sourceRoot":"","sources":["../../library/src/blocks/attributes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AAExF,OAAO,EACL,KAAK,EAEL,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,WAAW,EAEX,qBAAqB,EACrB,eAAe,EACf,iBAAiB,EACjB,QAAQ,EAER,aAAa,EACb,oBAAoB,EACpB,YAAY,EACZ,WAAW,EACX,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,SAAS,EAEV,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,GAAG,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAKzD,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS,CAKzD;AAED,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,mBAAmB,EAC9B,OAAO,EAAE,OAAO,GAAG,SAAS,GAC3B,SAAS,CAaX;AAED,wBAAgB,eAAe,CAAC,eAAe,EAAE,mBAAmB,GAAG,SAAS,CAM/E;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,SAAS,GAAG,SAAS,EAAE,OAAO,EAAE,aAAa,GAAG,SAAS,CAM5F;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,CAKpE;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,YAAY,GAAG,SAAS,GAAG,SAAS,CAQzE;AAED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,CAOjE;AAED,wBAAgB,cAAc,CAC5B,SAAS,EAAE,mBAAmB,EAC9B,KAAK,EAAE,cAAc,GAAG,SAAS,GAChC,SAAS,CAgCX;AAED,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAQzE;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,SAAS,GAAG,SAAS,CAYtE;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,SAAS,GAAG,SAAS,CAQtE;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,SAAS,GAAG,SAAS,CAQtE;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,GAAG,SAAS,CASxE;AAED,wBAAgB,cAAc,CAAC,SAAS,EAAE,cAAc,GAAG,SAAS,GAAG,SAAS,CAS/E;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,eAAe,GAAG,SAAS,GAAG,SAAS,CAK9E;AAED,wBAAgB,eAAe,CAAC,SAAS,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAMzE;AAED,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,gBAAgB,EACzB,UAAU,EAAE,MAAM,GAAG,SAAS,GAC7B,SAAS,CAOX;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAQ/D;AAED,wBAAgB,eAAe,CAC7B,IAAI,EAAE,eAAe,GAAG,SAAS,EACjC,KAAK,EAAE,gBAAgB,GAAG,SAAS,EACnC,cAAc,EAAE,mBAAmB,GAClC,SAAS,CAqBX;AAED,wBAAgB,eAAe,CAAC,UAAU,EAAE,oBAAoB,GAAG,SAAS,GAAG,SAAS,CASvF;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,GAAG,SAAS,CAmBxE;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,eAAe,GAAG,SAAS,GAAG,SAAS,CAY5E;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,iBAAiB,GAAG,SAAS,GAAG,SAAS,CAK5E;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,iBAAiB,GAAG,SAAS,GAAG,SAAS,CAgBhF;AAED,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,qBAAqB,GAAG,SAAS,GAAG,gBAAgB,CA2BhG;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,eAAe,GAAG,SAAS,GAAG,UAAU,CAexE;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,CAInD;AAED,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,OAAO,GAAG,SAAS,CAMjE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CASxF;AAED,wBAAgB,cAAc,CAC5B,SAAS,EAAE,gBAAgB,GAAG,SAAS,GACtC,UAAU,CAAC,OAAO,SAAS,CAAC,CAqC9B"}
+{"version":3,"file":"attributes.d.ts","sourceRoot":"","sources":["../../library/src/blocks/attributes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AAExF,OAAO,EACL,KAAK,EAEL,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,WAAW,EAEX,qBAAqB,EACrB,eAAe,EACf,UAAU,EACV,iBAAiB,EACjB,QAAQ,EAER,aAAa,EACb,oBAAoB,EACpB,YAAY,EACZ,WAAW,EACX,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,SAAS,EAEV,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,GAAG,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAKzD,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS,CAoBzD;AAED,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,mBAAmB,EAC9B,OAAO,EAAE,OAAO,GAAG,SAAS,GAC3B,SAAS,CAaX;AAED,wBAAgB,eAAe,CAAC,eAAe,EAAE,mBAAmB,GAAG,SAAS,CAM/E;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,SAAS,GAAG,SAAS,EAAE,OAAO,EAAE,aAAa,GAAG,SAAS,CAM5F;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,CASpE;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,YAAY,GAAG,SAAS,GAAG,SAAS,CAQzE;AAED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,CAOjE;AAED,wBAAgB,cAAc,CAC5B,SAAS,EAAE,mBAAmB,EAC9B,KAAK,EAAE,cAAc,GAAG,SAAS,GAChC,SAAS,CAgCX;AAED,wBAAgB,eAAe,CAC7B,MAAM,EAAE,UAAU,GAAG,SAAS,EAC9B,WAAW,EAAE,MAAM,GAAG,SAAS,GAC9B,SAAS,CAMX;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,SAAS,GAAG,SAAS,CAatE;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,SAAS,GAAG,SAAS,CAMtE;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,SAAS,GAAG,SAAS,CAQtE;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,GAAG,SAAS,CASxE;AAED,wBAAgB,cAAc,CAAC,SAAS,EAAE,cAAc,GAAG,SAAS,GAAG,SAAS,CAS/E;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,eAAe,GAAG,SAAS,GAAG,SAAS,CAK9E;AAED,wBAAgB,eAAe,CAAC,SAAS,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAMzE;AAED,wBAAgB,UAAU,CACxB,MAAM,EAAE,UAAU,GAAG,SAAS,EAC9B,WAAW,EAAE,MAAM,GAAG,SAAS,GAC9B,SAAS,CAMX;AAED,wBAAgB,eAAe,CAC7B,IAAI,EAAE,eAAe,GAAG,SAAS,EACjC,KAAK,EAAE,gBAAgB,GAAG,SAAS,EACnC,cAAc,EAAE,mBAAmB,GAClC,SAAS,CAqBX;AAED,wBAAgB,eAAe,CAAC,UAAU,EAAE,oBAAoB,GAAG,SAAS,GAAG,SAAS,CASvF;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,GAAG,SAAS,CAmBxE;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,eAAe,GAAG,SAAS,GAAG,SAAS,CAY5E;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,iBAAiB,GAAG,SAAS,GAAG,SAAS,CAK5E;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,iBAAiB,GAAG,SAAS,GAAG,SAAS,CAgBhF;AAED,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,qBAAqB,GAAG,SAAS,GAAG,gBAAgB,CA2BhG;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,eAAe,GAAG,SAAS,GAAG,UAAU,CAexE;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,CAInD;AAED,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,OAAO,GAAG,SAAS,CAMjE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CASxF;AAED,wBAAgB,cAAc,CAC5B,SAAS,EAAE,gBAAgB,GAAG,SAAS,GACtC,UAAU,CAAC,OAAO,SAAS,CAAC,CAmC9B"}

package/blocks/attributes.js

@@ -1,12 +1,27 @@
 import { ButtonSize } from '@reddit/faceplate-ui/templates/button.js';
 import { BlockActionType, BlockAvatarFacing, BlockAvatarSize, BlockBorderWidth, BlockButtonAppearance, BlockButtonSize, BlockFullSnooSize, BlockGap, BlockHorizontalAlignment, BlockIconSize, BlockImageResizeMode, BlockPadding, BlockRadius, BlockSpacerShape, BlockSpacerSize, BlockStackDirection, BlockTextOutline, BlockTextSize, BlockTextWeight, BlockType, BlockVerticalAlignment, } from '@devvit/protos';
-import { isHTMLElement, ref, sanitizeStyleInfo } from './templates/util.js';
+import { getSizeUnits, isHTMLElement, ref, resolveColors, sanitizeStyleInfo } from './templates/util.js';
 import { nothing } from 'lit';
 import { brightnessByColor } from './templates/color.js';
 export function defaultClasses(type) {
+    const isTextBlock = type === BlockType.BLOCK_TEXT;
+    const isButtonBlock = type === BlockType.BLOCK_BUTTON;
+    const isIconBlock = type === BlockType.BLOCK_ICON;
+    const hasTextColor = isTextBlock || isButtonBlock || isIconBlock;
     return {
         'overflow-hidden': type === BlockType.BLOCK_ROOT || type === BlockType.BLOCK_STACK,
         'm-0': type === BlockType.BLOCK_IMAGE,
+        textColor: hasTextColor,
+        stackBlock: type === BlockType.BLOCK_STACK,
+        textBlock: isTextBlock,
+        buttonBlock: isButtonBlock,
+        imageBlock: type === BlockType.BLOCK_IMAGE,
+        spacerBlock: type === BlockType.BLOCK_SPACER,
+        iconBlock: isIconBlock,
+        avatarBlock: type === BlockType.BLOCK_AVATAR,
+        fullsnooBlock: type === BlockType.BLOCK_FULLSNOO,
+        animationBlock: type === BlockType.BLOCK_ANIMATION,
+        webviewBlock: type === BlockType.BLOCK_WEBVIEW,
     };
 }
 export function stackDirectionClass(direction, reverse) {
@@ -39,8 +54,10 @@ export function sizingClass(sizing, context) {
 }
 export function sizingStyle(sizing) {
     return sanitizeStyleInfo({
-        width: sizing?.width === undefined ? undefined : `${sizing.width}%`,
-        height: sizing?.height === undefined ? undefined : `${sizing.height}%`,
+        width: sizing?.width === undefined ? undefined : `${sizing.width}${getSizeUnits(sizing.widthUnit)}`,
+        height: sizing?.height === undefined
+            ? undefined
+            : `${sizing.height}${getSizeUnits(sizing.heightUnit)}`,
     });
 }
 export function paddingClass(padding) {
@@ -88,32 +105,33 @@ export function alignmentClass(direction, align) {
         'items-end': (bottom && (hstack || zstack)) || (end && vstack),
     };
 }
-export function backgroundStyle(background) {
-    return sanitizeStyleInfo(background
-        ? {
-            backgroundColor: background,
-        }
-        : {});
+export function backgroundStyle(colors, legacyColor) {
+    const [light, dark] = resolveColors(colors, legacyColor);
+    return sanitizeStyleInfo({
+        '--bg-color-light': light,
+        '--bg-color-dark': dark,
+    });
 }
 export function borderClass(border) {
     const thin = border?.width === BlockBorderWidth.BORDER_WIDTH_THIN;
     const thick = border?.width === BlockBorderWidth.BORDER_WIDTH_THICK;
     const none = !thin && !thick;
     const hasBorder = border !== undefined && !none;
+    const hasColor = (border?.colors?.dark ?? border?.colors?.light ?? border?.color) !== undefined;
     return {
         'border-0': !hasBorder,
         'border-solid': hasBorder,
         'border-dx-thin': thin,
         'border-dx-thick': thick,
-        'border-neutral-border': hasBorder && border.color === undefined,
+        'border-neutral-border': hasBorder && !hasColor,
     };
 }
 export function borderStyle(border) {
-    return sanitizeStyleInfo(border?.color
-        ? {
-            borderColor: border?.color,
-        }
-        : {});
+    const [light, dark] = resolveColors(border?.colors, border?.color);
+    return sanitizeStyleInfo({
+        '--border-color-light': light,
+        '--border-color-dark': dark,
+    });
 }
 export function radiusClass(radius) {
     return {
@@ -156,20 +174,12 @@ export function textSelectClass(selection) {
         'select-auto': selection === undefined,
     };
 }
-export function textOutlineClass(outline, _textColor) {
-    const thin = outline === BlockTextOutline.TEXT_OUTLINE_THIN;
-    const thick = outline === BlockTextOutline.TEXT_OUTLINE_THICK;
-    return {
-        'text-outline-thin-bright': thin,
-        'text-outline-thick-bright': thick,
-    };
-}
-export function colorStyle(color) {
-    return sanitizeStyleInfo(typeof color === 'string'
-        ? {
-            color: color ?? '',
-        }
-        : {});
+export function colorStyle(colors, legacyColor) {
+    const [light, dark] = resolveColors(colors, legacyColor);
+    return sanitizeStyleInfo({
+        '--text-color-light': light,
+        '--text-color-dark': dark,
+    });
 }
 export function spacerSizeClass(size, shape, stackDirection) {
     const square = shape === BlockSpacerShape.SPACER_SQUARE;
@@ -356,7 +366,6 @@ export function setTextOutline(thickness) {
                 el.classList.add(`text-outline-${thicknessClass}-${brightness}`);
             };
             apply();
-            window.matchMedia('(prefers-color-scheme: dark)').onchange = () => apply();
         }
     });
 }

package/blocks/components/devvit-blocks-renderer.d.ts

@@ -4,11 +4,12 @@ import type { RenderContext } from '../templates/renderContext.js';
 export declare class DevvitBlocksRenderer extends LitElement {
     #private;
     block: Block | undefined;
-    renderContext: () => RenderContext;
+    renderContext: (() => RenderContext) | undefined;
+    class: string | undefined;
     static get styles(): import("lit").CSSResult[];
     connectedCallback(): void;
     disconnectedCallback(): void;
-    render(): import("../templates/util.js").TemplateLike;
+    render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/blocks/components/devvit-blocks-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"devvit-blocks-renderer.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/components/devvit-blocks-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAMvC,OAAO,EAAE,KAAK,EAAkC,MAAM,gBAAgB,CAAC;AAGvE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAInE,qBAEa,oBAAqB,SAAQ,UAAU;;IAElD,KAAK,EAAE,KAAK,GAAG,SAAS,CAAC;IAGzB,aAAa,EAAE,MAAM,aAAa,CAE/B;IAIH,WAAoB,MAAM,8BAEzB;IAEQ,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAO5B,MAAM;CAahB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,oBAAoB,CAAC;KAChD;CACF"}
+{"version":3,"file":"devvit-blocks-renderer.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/components/devvit-blocks-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAkB,MAAM,KAAK,CAAC;AAMvD,OAAO,EAAE,KAAK,EAAkC,MAAM,gBAAgB,CAAC;AAGvE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAInE,qBAEa,oBAAqB,SAAQ,UAAU;;IAElD,KAAK,EAAE,KAAK,GAAG,SAAS,CAAC;IAGzB,aAAa,EAAE,CAAC,MAAM,aAAa,CAAC,GAAG,SAAS,CAAC;IAGjD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAI1B,WAAoB,MAAM,8BAEzB;IAEQ,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAW5B,MAAM;CAchB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,oBAAoB,CAAC;KAChD;CACF"}

package/blocks/components/devvit-blocks-renderer.js

@@ -12,7 +12,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _DevvitBlocksRenderer_colorSchemeMediaQuery, _DevvitBlocksRenderer_onColorSchemeChange;
+var _DevvitBlocksRenderer_colorSchemeMediaQuery, _DevvitBlocksRenderer_onColorSchemeChange, _DevvitBlocksRenderer_baseRenderContext;
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { localized, msg } from '@lit/localize';
@@ -23,11 +23,11 @@ import { styles } from '../../styles.js';
 let DevvitBlocksRenderer = class DevvitBlocksRenderer extends LitElement {
     constructor() {
         super(...arguments);
-        this.renderContext = () => ({
-            stackDirection: BlockStackDirection.UNRECOGNIZED,
-        });
         _DevvitBlocksRenderer_colorSchemeMediaQuery.set(this, window.matchMedia('(prefers-color-scheme: dark)'));
         _DevvitBlocksRenderer_onColorSchemeChange.set(this, () => this.requestUpdate());
+        _DevvitBlocksRenderer_baseRenderContext.set(this, () => ({
+            stackDirection: BlockStackDirection.UNRECOGNIZED,
+        }));
     }
     static get styles() {
         return [styles];
@@ -42,7 +42,8 @@ let DevvitBlocksRenderer = class DevvitBlocksRenderer extends LitElement {
     }
     render() {
         if (this.block && this.block.type === BlockType.BLOCK_ROOT) {
-            return renderBlocks(this.block, this.renderContext());
+            const context = { ...__classPrivateFieldGet(this, _DevvitBlocksRenderer_baseRenderContext, "f").call(this), ...(this.renderContext?.() ?? {}) };
+            return html `<div class="${this.class}">${renderBlocks(this.block, context)}</div>`;
         }
         return html `${emptyState({
             creative: html `<slot name="empty-state-image"></slot>`,
@@ -53,15 +54,19 @@ let DevvitBlocksRenderer = class DevvitBlocksRenderer extends LitElement {
         })}`;
     }
 };
-_DevvitBlocksRenderer_colorSchemeMediaQuery = new WeakMap(), _DevvitBlocksRenderer_onColorSchemeChange = new WeakMap();
+_DevvitBlocksRenderer_colorSchemeMediaQuery = new WeakMap(), _DevvitBlocksRenderer_onColorSchemeChange = new WeakMap(), _DevvitBlocksRenderer_baseRenderContext = new WeakMap();
 __decorate([
     property({ attribute: false }),
     __metadata("design:type", Object)
 ], DevvitBlocksRenderer.prototype, "block", void 0);
 __decorate([
     property({ attribute: false }),
-    __metadata("design:type", Function)
+    __metadata("design:type", Object)
 ], DevvitBlocksRenderer.prototype, "renderContext", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], DevvitBlocksRenderer.prototype, "class", void 0);
 DevvitBlocksRenderer = __decorate([
     localized(),
     customElement('devvit-blocks-renderer')

package/blocks/templates/renderButtonBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderButtonBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderButtonBlock.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAA6C,MAAM,gBAAgB,CAAC;AAalF,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAY,YAAY,EAAE,MAAM,WAAW,CAAC;AAInD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA8DhF"}
+{"version":3,"file":"renderButtonBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderButtonBlock.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAA6C,MAAM,gBAAgB,CAAC;AAalF,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAY,YAAY,EAAE,MAAM,WAAW,CAAC;AAInD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAkEhF"}

package/blocks/templates/renderButtonBlock.js

@@ -5,11 +5,14 @@ import { BlockButtonSize, BlockIconSize, BlockType } from '@devvit/protos';
 import { buttonAppearance, buttonSize, colorStyle, cursorClass, defaultClasses, onClickAction, sizingClass, sizingStyle, stackChildClass, } from '../attributes.js';
 import { classMap } from './util.js';
 import { renderIconBlock } from './renderIconBlock.js';
-import { nothing } from "lit";
+import { nothing } from 'lit';
 export function renderButtonBlock(block, ctx) {
     const { html, ifDefined } = getTemplateRenderingStrategy();
-    const buttonIcon = block.config?.buttonConfig?.icon;
-    const disabled = block.config?.buttonConfig?.disabled === true;
+    if (block.config?.buttonConfig === undefined) {
+        console.error('Invalid block: Button missing ButtonConfig');
+        return nothing;
+    }
+    const { icon, disabled, textColor, textColors } = block.config.buttonConfig;
     const classes = {
         ...defaultClasses(block.type),
         ...stackChildClass(ctx.stackDirection),
@@ -17,13 +20,13 @@ export function renderButtonBlock(block, ctx) {
         ...cursorClass(block),
     };
     const styles = {
-        ...colorStyle(block.config?.buttonConfig?.textColor),
+        ...colorStyle(textColors, textColor),
         ...sizingStyle(block.size),
         // not available in all platforms yet
         // ...backgroundStyle(block.config?.buttonConfig?.backgroundColor),
     };
     const onClick = onClickAction(block, ctx);
-    let iconSize = undefined;
+    let iconSize;
     switch (block.config?.buttonConfig?.buttonSize) {
         case BlockButtonSize.BUTTON_SIZE_SMALL:
             iconSize = BlockIconSize.ICON_SIZE_SMALL;
@@ -36,19 +39,19 @@ export function renderButtonBlock(block, ctx) {
             iconSize = BlockIconSize.ICON_SIZE_MEDIUM;
             break;
     }
-    const iconSvg = buttonIcon
+    const iconSvg = icon
         ? renderIconBlock({
             type: BlockType.BLOCK_ICON,
-            config: { iconConfig: { icon: buttonIcon, size: iconSize } },
+            config: { iconConfig: { icon, size: iconSize } },
             actions: [],
         }, ctx)
         : undefined;
-    const icon = iconSvg && iconSvg !== nothing ? { leadingIcon: iconSvg } : {};
+    const iconProp = iconSvg && iconSvg !== nothing ? { leadingIcon: iconSvg } : {};
     // TODO: correctColor
     return html `${button({
         size: buttonSize(block.config?.buttonConfig?.buttonSize),
         appearance: buttonAppearance(block.config?.buttonConfig?.buttonAppearance),
-        ...icon,
+        ...iconProp,
         children: ifDefined(block.config?.buttonConfig?.text),
         attributes: {
             disabled,

package/blocks/templates/renderIconBlock.js

@@ -2,16 +2,16 @@ import { nothing } from 'lit';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
 import { colorStyle, cursorClass, defaultClasses, iconSizeClass, onClickAction, sizingClass, sizingStyle, stackChildClass, } from '../attributes.js';
 import { classMap, resolveIcon } from './util.js';
-import { resolveStyleColor } from "./color.js";
+import { resolveStyleColor } from './color.js';
 export function renderIconBlock(block, ctx) {
     const { html, styleMap, ifDefined } = getTemplateRenderingStrategy();
     if (!block.config?.iconConfig) {
         console.error('Invalid block: Icon missing IconConfig');
         return nothing;
     }
-    const { icon, size, color } = block.config.iconConfig;
+    const { icon, size, color, colors } = block.config.iconConfig;
     const styles = {
-        ...colorStyle(color),
+        ...colorStyle(colors, color),
         ...sizingStyle(block.size),
     };
     const classes = {

package/blocks/templates/renderStackBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderStackBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderStackBlock.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAuB,MAAM,gBAAgB,CAAC;AAE5D,OAAO,EAEL,kBAAkB,EAenB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAY,YAAY,EAAE,MAAM,WAAW,CAAC;AAGnD,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,KAAK,EACZ,GAAG,2BAAsE,EACzE,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,KAAK,YAAY,EAC/D,kBAAkB,GAAE,kBAAkB,GAAG,SAAqB,GAC7D,YAAY,CAiFd"}
+{"version":3,"file":"renderStackBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderStackBlock.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAuB,MAAM,gBAAgB,CAAC;AAE5D,OAAO,EAEL,kBAAkB,EAenB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAY,YAAY,EAAE,MAAM,WAAW,CAAC;AAGnD,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,KAAK,EACZ,GAAG,2BAAsE,EACzE,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,KAAK,YAAY,EAC/D,kBAAkB,GAAE,kBAAkB,GAAG,SAAqB,GAC7D,YAAY,CAsFd"}

package/blocks/templates/renderStackBlock.js

@@ -3,16 +3,19 @@ import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUICo
 import { BlockStackDirection } from '@devvit/protos';
 import { alignmentClass, backgroundStyle, borderClass, borderStyle, cursorClass, defaultClasses, gapClass, onClickAction, paddingClass, pointerEventsClass, radiusClass, sizingClass, sizingStyle, stackChildClass, stackDirectionClass, } from '../attributes.js';
 import { classMap } from './util.js';
-import { resolveStyleColor } from "./color.js";
+import { resolveStyleColor } from './color.js';
 export function renderStackBlock(block, ctx = { stackDirection: BlockStackDirection.UNRECOGNIZED }, renderBlock, attributeOverrides = undefined) {
     const { html, repeat, styleMap, ifDefined } = getTemplateRenderingStrategy();
     if (block.config?.stackConfig === undefined) {
         console.error('Invalid block: Stack missing StackConfig');
         return nothing;
     }
-    const { children, direction, padding, gap, alignment, reverse, backgroundColor, border, cornerRadius, } = block.config.stackConfig;
+    const { children, direction, padding, gap, alignment, reverse, backgroundColor, backgroundColors, border, cornerRadius, } = block.config.stackConfig;
+    const bgColorLight = backgroundColors?.light ?? backgroundColor;
+    const bgColorDark = backgroundColors?.dark ?? bgColorLight;
+    const hasBGColor = !!bgColorLight || !!bgColorDark;
     // capture mouse events on a stack if there are actions associated or there's a background color
-    const pointerEvents = !!(block.actions.length || backgroundColor);
+    const pointerEvents = !!block.actions.length || hasBGColor;
     const classes = {
         ...defaultClasses(block.type),
         ...stackDirectionClass(direction, reverse),
@@ -29,7 +32,7 @@ export function renderStackBlock(block, ctx = { stackDirection: BlockStackDirect
     };
     const styles = {
         ...sizingStyle(block.size),
-        ...backgroundStyle(backgroundColor),
+        ...backgroundStyle(backgroundColors, backgroundColor),
         ...borderStyle(border),
         ...attributeOverrides?.styles,
     };

package/blocks/templates/renderTextBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderTextBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderTextBlock.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAkD,MAAM,gBAAgB,CAAC;AAgBvF,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAY,YAAY,EAAE,MAAM,WAAW,CAAC;AAGnD,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAgE9E"}
+{"version":3,"file":"renderTextBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderTextBlock.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAkD,MAAM,gBAAgB,CAAC;AAgBvF,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAY,YAAY,EAAE,MAAM,WAAW,CAAC;AAGnD,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA+D9E"}

package/blocks/templates/renderTextBlock.js

@@ -3,14 +3,14 @@ import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUICo
 import { BlockTextSize, BlockTextStyle, BlockTextWeight } from '@devvit/protos';
 import { colorStyle, cursorClass, defaultClasses, onClickAction, setTextOutline, sizingClass, sizingStyle, stackChildClass, textAlignClass, textSelectClass, textSizeClass, textWeightClass, } from '../attributes.js';
 import { classMap } from './util.js';
-import { resolveStyleColor } from "./color.js";
+import { resolveStyleColor } from './color.js';
 export function renderTextBlock(block, ctx) {
     const { html, styleMap, ifDefined } = getTemplateRenderingStrategy();
     if (!block.config?.textConfig) {
         console.error('Invalid block: Text missing TextConfig');
         return nothing;
     }
-    const { text, color, size, alignment, weight, style, outline, selectable } = block.config.textConfig;
+    const { text, color, colors, size, alignment, weight, style, outline, selectable } = block.config.textConfig;
     let textColor;
     let textSize;
     let textWeight;
@@ -33,11 +33,10 @@ export function renderTextBlock(block, ctx) {
             textWeight = BlockTextWeight.TEXT_WEIGHT_REGULAR;
             break;
     }
-    textColor = color ?? textColor;
     textSize = size ?? textSize;
     textWeight = weight ?? textWeight;
     const styles = {
-        ...colorStyle(textColor),
+        ...colorStyle(colors, color ?? textColor),
         ...sizingStyle(block.size),
     };
     const classes = {

package/blocks/templates/util.d.ts

@@ -4,12 +4,29 @@ import { ref as clientRef, RefOrCallback } from 'lit/directives/ref.js';
 import { StyleInfo } from 'lit/directives/style-map.js';
 import { nothing, TemplateResult } from 'lit';
 import type { UnsafeString } from '@reddit/baseplate/html.js';
+import { BlockColor, BlockSizeUnit } from '@devvit/protos';
 export type TemplateLike = TemplateResult | typeof nothing;
 export declare function classMap(classInfo: ClassInfo, forceString?: boolean): string | ReturnType<typeof clientClassMap>;
 export declare function unsafeHTML(input: string): DirectiveResult<DirectiveClass> | UnsafeString;
 export declare function ref(ref: RefOrCallback): ReturnType<typeof clientRef> | string;
 export declare function isHTMLElement(el: HTMLElement | Element | undefined): el is HTMLElement;
 export declare function resolveIcon(name: string): TemplateResult;
+/**
+ * Strip semicolons from style values and remove null/undefined values
+ * @param styleInfo
+ */
 export declare function sanitizeStyleInfo(styleInfo: StyleInfo): StyleInfo;
 export declare function isValidImageURL(imageUrl: string): boolean;
+export declare function getSizeUnits(unit: BlockSizeUnit | undefined): string;
+/**
+ * Extracts the light and dark colors from a BlockColor object with an optional
+ * fallback on the original single color parameter.
+ * Priority:
+ *  - Use the split light/dark colors if available
+ *  - If dark color is not available but light is, use light color for both
+ *  - If light and dark colors are not available try the legacy color (old apps)
+ * @param colors BlockColor object
+ * @param legacyColor Original color attribute before it was split into light/dark colors
+ */
+export declare function resolveColors(colors: BlockColor | undefined, legacyColor?: string | undefined): [light?: string | undefined, dark?: string | undefined];
 //# sourceMappingURL=util.d.ts.map

package/blocks/templates/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/util.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAEpF,OAAO,EAAE,GAAG,IAAI,SAAS,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAK9D,MAAM,MAAM,YAAY,GAAG,cAAc,GAAG,OAAO,OAAO,CAAC;AAE3D,wBAAgB,QAAQ,CACtB,SAAS,EAAE,SAAS,EACpB,WAAW,CAAC,EAAE,OAAO,GACpB,MAAM,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAW5C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,eAAe,CAAC,cAAc,CAAC,GAAG,YAAY,CAMxF;AAED,wBAAgB,GAAG,CAAC,GAAG,EAAE,aAAa,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,GAAG,MAAM,CAM7E;AAED,wBAAgB,aAAa,CAAC,EAAE,EAAE,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,EAAE,IAAI,WAAW,CAEtF;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,cAAc,CAiBxD;AAED,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,SAAS,GAAG,SAAS,CAOjE;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAWzD"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/util.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAEpF,OAAO,EAAE,GAAG,IAAI,SAAS,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAK9D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE3D,MAAM,MAAM,YAAY,GAAG,cAAc,GAAG,OAAO,OAAO,CAAC;AAE3D,wBAAgB,QAAQ,CACtB,SAAS,EAAE,SAAS,EACpB,WAAW,CAAC,EAAE,OAAO,GACpB,MAAM,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAW5C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,eAAe,CAAC,cAAc,CAAC,GAAG,YAAY,CAMxF;AAED,wBAAgB,GAAG,CAAC,GAAG,EAAE,aAAa,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,GAAG,MAAM,CAM7E;AAED,wBAAgB,aAAa,CAAC,EAAE,EAAE,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,EAAE,IAAI,WAAW,CAEtF;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,cAAc,CAiBxD;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,SAAS,GAAG,SAAS,CASjE;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAWzD;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,GAAG,MAAM,CAUpE;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,UAAU,GAAG,SAAS,EAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,GAC/B,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,CAIzD"}

package/blocks/templates/util.js

@@ -4,7 +4,8 @@ import { ref as clientRef } from 'lit/directives/ref.js';
 import { unsafeHTML as serverUnsafeHTML } from '@reddit/baseplate/html.js';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
 import faceplateIcons from '@reddit/faceplate-ui/svgs/svg-manifest.js';
-import { VerifiedImageHosts, REDD_IT } from './constants.js';
+import { REDD_IT, VerifiedImageHosts } from './constants.js';
+import { BlockSizeUnit } from '@devvit/protos';
 export function classMap(classInfo, forceString) {
     const { getType } = getTemplateRenderingStrategy();
     if (getType() === 'client' && forceString !== true) {
@@ -51,9 +52,16 @@ export function resolveIcon(name) {
         return html ``;
     }
 }
+/**
+ * Strip semicolons from style values and remove null/undefined values
+ * @param styleInfo
+ */
 export function sanitizeStyleInfo(styleInfo) {
     for (const [key, value] of Object.entries(styleInfo)) {
-        if (typeof value === 'string') {
+        if (!value) {
+            delete styleInfo[key];
+        }
+        else if (typeof value === 'string') {
             styleInfo[key] = value.replace(/;/g, '');
         }
     }
@@ -71,3 +79,29 @@ export function isValidImageURL(imageUrl) {
         return false;
     }
 }
+export function getSizeUnits(unit) {
+    switch (unit) {
+        case BlockSizeUnit.SIZE_UNIT_PIXELS:
+            return 'px';
+        case BlockSizeUnit.SIZE_UNIT_PERCENT:
+        case BlockSizeUnit.UNRECOGNIZED:
+        case undefined:
+        default:
+            return '%';
+    }
+}
+/**
+ * Extracts the light and dark colors from a BlockColor object with an optional
+ * fallback on the original single color parameter.
+ * Priority:
+ *  - Use the split light/dark colors if available
+ *  - If dark color is not available but light is, use light color for both
+ *  - If light and dark colors are not available try the legacy color (old apps)
+ * @param colors BlockColor object
+ * @param legacyColor Original color attribute before it was split into light/dark colors
+ */
+export function resolveColors(colors, legacyColor) {
+    const light = colors?.light ?? legacyColor;
+    const dark = colors?.dark ?? light;
+    return [light, dark];
+}

package/client/devvit-custom-post.d.ts

@@ -23,6 +23,7 @@ export declare class DevvitCustomPost extends LitElement {
     bundle?: LinkedBundle;
     useSandbox: boolean;
     useExperimentalBlocks: boolean;
+    forceColorScheme: string | undefined;
     blocksRenderer?: DevvitBlocksRenderer;
     renderResponse?: RenderPostResponse;
     rootBlock?: Block;

package/client/devvit-custom-post.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"devvit-custom-post.d.ts","sourceRoot":"","sources":["../../library/src/client/devvit-custom-post.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvD,OAAO,kEAAkE,CAAC;AAG1E,OAAO,KAAK,EAOV,YAAY,EACZ,QAAQ,EAER,MAAM,EAGP,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,KAAK,EAML,kBAAkB,EAEnB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAE9E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;AAE5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,gDAAgD,CAAC;AAItF,OAAO,gDAAgD,CAAC;AACxD,OAAO,+CAA+C,CAAC;AACvD,OAAO,8BAA8B,CAAC;AAEtC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF;AASD,qBACa,gBAAiB,SAAQ,UAAU;;IAE9C,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAGpB,QAAQ,EAAE,QAAQ,GAAG,SAAS,CAAC;IAG/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,UAAU,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAG9B,gBAAgB,CAAC,EAAE,IAAI,CAAC;IAGxB,MAAM,CAAC,EAAE,YAAY,CAAC;IAGtB,UAAU,EAAE,OAAO,CAAQ;IAG3B,qBAAqB,EAAE,OAAO,CAAS;IAGvC,cAAc,CAAC,EAAE,oBAAoB,CAAC;IAGtC,cAAc,CAAC,EAAE,kBAAkB,CAAC;IAGpC,SAAS,CAAC,EAAE,KAAK,CAAC;IAelB,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAOhC,QAAQ,IAAI,IAAI;IAIP,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;cASZ,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC;IAuC5E,MAAM;CAoJhB"}
+{"version":3,"file":"devvit-custom-post.d.ts","sourceRoot":"","sources":["../../library/src/client/devvit-custom-post.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvD,OAAO,kEAAkE,CAAC;AAG1E,OAAO,KAAK,EAOV,YAAY,EACZ,QAAQ,EAER,MAAM,EAGP,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,KAAK,EAML,kBAAkB,EAEnB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAE9E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;AAE5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,gDAAgD,CAAC;AAItF,OAAO,gDAAgD,CAAC;AACxD,OAAO,+CAA+C,CAAC;AACvD,OAAO,8BAA8B,CAAC;AAEtC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF;AASD,qBACa,gBAAiB,SAAQ,UAAU;;IAE9C,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAGpB,QAAQ,EAAE,QAAQ,GAAG,SAAS,CAAC;IAG/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,UAAU,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAG9B,gBAAgB,CAAC,EAAE,IAAI,CAAC;IAGxB,MAAM,CAAC,EAAE,YAAY,CAAC;IAGtB,UAAU,EAAE,OAAO,CAAQ;IAG3B,qBAAqB,EAAE,OAAO,CAAS;IAGvC,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IAGrC,cAAc,CAAC,EAAE,oBAAoB,CAAC;IAGtC,cAAc,CAAC,EAAE,kBAAkB,CAAC;IAGpC,SAAS,CAAC,EAAE,KAAK,CAAC;IAelB,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAOhC,QAAQ,IAAI,IAAI;IAIP,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;cASZ,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC;IAuC5E,MAAM;CAqJhB"}

package/client/devvit-custom-post.js

@@ -142,6 +142,7 @@ let DevvitCustomPost = class DevvitCustomPost extends LitElement {
             return html `<slot></slot>`;
         }
         return html `<devvit-blocks-renderer
+      class="${this.forceColorScheme ?? ''}"
       .block="${this.rootBlock}"
       .renderContext="${__classPrivateFieldGet(this, _DevvitCustomPost_makeRenderContext, "f")}"
     >
@@ -257,6 +258,10 @@ __decorate([
     property({ attribute: false }),
     __metadata("design:type", Boolean)
 ], DevvitCustomPost.prototype, "useExperimentalBlocks", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], DevvitCustomPost.prototype, "forceColorScheme", void 0);
 __decorate([
     query('devvit-blocks-renderer'),
     __metadata("design:type", DevvitBlocksRenderer)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devvit/ui-renderer",
-  "version": "0.10.5-next-2023-09-19-b0d142ebc.0",
+  "version": "0.10.5-next-2023-09-19-57fbad19f.0",
   "license": "BSD-3-Clause",
   "repository": {
     "type": "git",
@@ -48,9 +48,9 @@
   },
   "types": "./index.d.ts",
   "dependencies": {
-    "@devvit/protos": "0.10.5-next-2023-09-19-b0d142ebc.0",
-    "@devvit/runtime-lite": "0.10.5-next-2023-09-19-b0d142ebc.0",
-    "@devvit/runtimes": "0.10.5-next-2023-09-19-b0d142ebc.0",
+    "@devvit/protos": "0.10.5-next-2023-09-19-57fbad19f.0",
+    "@devvit/runtime-lite": "0.10.5-next-2023-09-19-57fbad19f.0",
+    "@devvit/runtimes": "0.10.5-next-2023-09-19-57fbad19f.0",
     "@lottiefiles/lottie-player": "1.7.1",
     "p-queue": "7.3.4",
     "rxjs": "7.5.7"
@@ -77,7 +77,7 @@
   "devDependencies": {
     "@devvit/eslint-config": "0.10.4",
     "@devvit/repo-tools": "0.10.4",
-    "@devvit/tsconfig": "0.10.5-next-2023-09-19-b0d142ebc.0",
+    "@devvit/tsconfig": "0.10.5-next-2023-09-19-57fbad19f.0",
     "@lit/localize": "0.11.4",
     "@open-wc/testing-helpers": "2.3.0",
     "@reddit/baseplate": "0.14.0",
@@ -102,5 +102,5 @@
     "directory": "dist"
   },
   "source": "./src/index.ts",
-  "gitHead": "9093c6b8db73b6b01c130f3e6a888315c64bc874"
+  "gitHead": "1e5411c72e6d0562576baf1bfa9040099e233a46"
 }

package/styles.js

@@ -1,3 +1,3 @@
 import { cssString } from '@reddit/faceplate/lib/less.js';
-const uiRendererStyles = 'faceplate-expandable-section-helper {    display: contents;    /* [rpl] just to boost the selector */    /*    Target the [open] attribute on either the root element OR the details    element to rotate the chevron. This is to handle rotating chevrons both    before and after the faceplate-expandable-section-helper component is defined.        Before the component is defined, the [open] attribute on the component will not    toggle if the user clicks on details, but the [open] attribute will toggle on    the details element, so we need to target details too.      The reason we can\'t target only the details element is because once the web    component is defined, we delay toggling the [open] attribute on the details    element until AFTER the animation finishes. So if we only targeted the details    element for the chevron rotation the chevron wouldn\'t rotate until after the    collapse animation finished and we finally toggle the [open] attriubte on the    details element.    */    /*      Specific handling for nested menus. We only need to handle collapse menus inside of      expanded menus, not expanded menus inside collapsed menus because you can\'t see those!    */  }  faceplate-expandable-section-helper > details > summary {    list-style-type: none;    /* For Safari */  }  faceplate-expandable-section-helper > details > summary::marker,  faceplate-expandable-section-helper > details > summary::-webkit-details-marker {    display: none;  }  faceplate-expandable-section-helper[rpl] > details > summary {    /* override details.less */    margin: 0;  }  faceplate-expandable-section-helper > details > summary [icon-name=\'caret-down-outline\'] {    transition: transform 0.22s ease-in-out;  }  faceplate-expandable-section-helper[open] summary [icon-name=\'caret-down-outline\'],  faceplate-expandable-section-helper:not(:defined) > details[open] summary [icon-name=\'caret-down-outline\'] {    transform: rotate(180deg);  }  faceplate-expandable-section-helper:not([open]) summary [icon-name=\'caret-down-outline\'],  faceplate-expandable-section-helper:not(:defined) > details:not([open]) summary [icon-name=\'caret-down-outline\'] {    transform: rotate(0deg);  }  /*   * This is a Tailwind CSS file, it must be run through the PostCSS compiler   * with the Tailwind plugin, not Less. The `postcss-import` plugin is also   * needed, if you have other additions to your Tailwind entry point CSS.   *   * @example   * // tailwind.css   * @import \'@reddit/faceplate/styles/tailwind-components.css\'   * @tailwind components;   * @tailwind utilities;   *   * // styles.less   * @import (less) \'@reddit/faceplate/faceplate.css\';   * @import (less) \'./tailwind-build.css\';   */  .theme-light,:root{--rem320:20rem;--rem192:12rem;--rem144:9rem;--rem128:8rem;--rem96:6rem;--rem90:5.625rem;--rem88:5.5rem;--rem64:4rem;--rem56:3.5rem;--rem48:3rem;--rem40:2.5rem;--rem36:2.25rem;--rem32:2rem;--rem28:1.75rem;--rem26:1.625rem;--rem24:1.5rem;--rem22:1.375rem;--rem20:1.25rem;--rem18:1.125rem;--rem16:1rem;--rem15:0.9375rem;--rem14:0.875rem;--rem12:0.75rem;--rem10:0.625rem;--rem8:0.5rem;--rem6:0.375rem;--rem4:0.25rem;--rem2:0.125rem;--rem1:0.0625rem;--spacer-4xs:0.125rem;--spacer-2xs:0.25rem;--spacer-xs:0.5rem;--spacer-sm:0.75rem;--spacer-md:1rem;--spacer-lg:1.5rem;--spacer-xl:2rem;--spacer-2xl:3rem;--spacer-a-px:0px;--spacer-button-lg-px:var(--spacer-lg);--spacer-button-md-px:var(--spacer-lg);--spacer-button-sm-px:var(--spacer-md);--spacer-input-padding-left:0px;--spacer-input-padding-top:0px;--spacer-label-default:0px;--spacer-switch-input-active-pl:0px;--size-2xs:0.25rem;--size-xs:0.5rem;--size-sm:0.75rem;--size-md:1rem;--size-lg:1.5rem;--size-xl:2rem;--size-2xl:3rem;--size-3xl:4rem;--size-4xl:6rem;--size-5xl:8rem;--size-button-lg-h:3.375rem;--size-button-md-h:2.75rem;--size-button-sm-h:2.125rem;--size-button-xs-h:1.375rem;--size-switch-input-h:1.25rem;--size-switch-input-w:2rem;--line-sm:0.0625rem;--line-md:0.125rem;--line-lg:0.25rem;--line-a-focus:0px;--line-a-outline-moz:0.0625rem;--line-a-outline-wb:0.3125rem;--line-button-lg-border:0.0625rem;--line-button-md-border:0.0625rem;--line-button-sm-border:0.0625rem;--line-button-xs-border:0.0625rem;--line-button-border-activated:0.0625rem;--line-input-border:var(--line-sm);--radius-sm:0.25rem;--radius-lg:2rem;--radius-full:624.9375rem;--radius-accordion-size:var(--radius-sm);--font-10-15-bold:normal 700 0.625rem/0.9375rem var(--font-sans);--font-button-lg:normal 700 1.125rem/1.375rem var(--font-sans);--font-button-md:normal 700 1rem/1.25rem var(--font-sans);--font-button-sm:normal 700 0.875rem/1.125rem var(--font-sans);--font-button-xs:normal 700 0.75rem/0.875rem var(--font-sans);--font-label-default:var(--font-10-15-bold);--misc-accordion-border:1px solid var(--color-tone-5);--misc-accordion-open-list-style-type:disclosure-open;--misc-accordion-closed-list-style-type:disclosure-closed;--misc-divider-margin:0.5rem auto;--misc-label-text-transform:uppercase;--misc-label-letter-spacing:0.5px;--color-primary-visited:#660099;--color-primary-background:#24a0ed;--color-primary-background-hover:#006cbf;--color-danger-content:#ea0027;--color-success-content:#46d160;--color-global-black:#000000;--color-global-white:#ffffff;--color-global-orangered:#D93A00;--color-global-alienblue:#0079d3;--color-global-darkblue:#1d2535;--color-tone-1:#1a1a1b;--color-tone-2:#6a6d6f;--color-tone-3:#878a8c;--color-tone-4:#d3d6da;--color-tone-5:#edeff1;--color-tone-6:#f6f7f8;--color-tone-7:#ffffff;--color-action-primary:var(--color-primary-background);--color-action-secondary:var(--color-primary-background-hover);--color-action-upvote:var(--color-global-orangered);--color-action-downvote:#7193ff;--color-alert-positive:var(--color-success-content);--color-alert-negative:var(--color-danger-content);--color-alert-caution:#ffb000;--color-identity-admin:var(--color-global-orangered);--color-identity-moderator:#46d160;--color-identity-self:#0dd3bb;--color-identity-coins:#ddbd37;--color-category-live:var(--color-global-orangered);--color-category-nsfw:#ff3881;--color-category-spoiler:var(--color-tone-1);--color-ui-canvas:var(--color-tone-5);--color-ui-modalbackground:var(--color-tone-7);--color-opacity-highlight:linear-gradient(#006cbf1a, var(--color-tone-6));--color-opacity-08:#1a1a1b14;--color-opacity-50:#00000080;--color-scrim:#1a1a1b4d;--color-a-default:var(--color-primary-background-hover);--color-a-hover:var(--color-primary-background-hover);--color-a-visited:var(--color-primary-background-hover);--color-button-overlay-focus:#ffffff1a;--color-button-overlay-active:#00000014;--color-button-primary-background-hover:var(--color-primary-background);--color-button-primary-background-disabled:var(--color-tone-6);--color-button-primary-border-hover:transparent;--color-button-primary-border-active:transparent;--color-button-primary-border-activated:transparent;--color-button-primary-border-disabled:transparent;--color-button-primary-text-disabled:var(--color-tone-2);--color-button-secondary-background:transparent;--color-button-secondary-background-focus:transparent;--color-button-secondary-background-hover:transparent;--color-button-secondary-background-disabled:var(--color-tone-6);--color-button-secondary-background-activated:transparent;--color-button-secondary-border:var(--color-primary-background-hover);--color-button-secondary-border-hover:var(--color-primary-background-hover);--color-button-secondary-border-active:var(--color-primary-background-hover);--color-button-secondary-border-activated:var(--color-primary-background-hover);--color-button-secondary-border-disabled:var(--color-tone-2);--color-button-secondary-text:var(--color-primary-background-hover);--color-button-secondary-text-disabled:var(--color-tone-2);--color-button-secondary-text-activated:var(--color-button-secondary-text);--color-button-tertiary-background:var(--color-tone-6);--color-button-tertiary-background-focus:var(--color-tone-6);--color-button-tertiary-background-hover:var(--color-tone-6);--color-button-tertiary-background-disabled:var(--color-tone-6);--color-button-tertiary-background-activated:var(--color-tone-6);--color-button-tertiary-border-hover:transparent;--color-button-tertiary-border-active:transparent;--color-button-tertiary-text:var(--color-primary-background-hover);--color-button-tertiary-text-disabled:var(--color-tone-2);--color-button-tertiary-text-activated:var(--color-primary-background-hover);--color-button-plain-background-hover:transparent;--color-button-plain-background-disabled:var(--color-tone-7);--color-button-plain-background-activated:transparent;--color-button-plain-border-hover:transparent;--color-button-plain-border-active:transparent;--color-button-plain-text:var(--color-primary-background-hover);--color-button-plain-text-disabled:var(--color-tone-2);--color-button-plain-text-activated:var(--color-primary-background-hover);--color-divider-default:var(--color-tone-5);--color-input-default:var(--color-tone-6);--color-input-hover:var(--color-primary-background-hover);--color-input-border:var(--color-tone-5);--color-input-text:var(--color-tone-1);--color-input-helper-text:var(--color-tone-1);--color-label-default:var(--color-tone-1);--color-switch-input-background-default:var(--color-tone-3);--color-switch-input-background-checked:var(--color-global-alienblue);--color-switch-input-background-disabled:var(--color-tone-6);--color-switch-input-background-checked-disabled:var(--color-tone-5);--color-switch-input-background-hover:var(--color-tone-3);--color-switch-input-background-checked-hover:var(--color-global-alienblue);--elevation-xs:0 0.0625rem 0.125rem 0 #00000040;--elevation-sm:0 0.0625rem 0.25rem 0 #00000026,0 0.25rem 0.25rem 0 #00000026;--elevation-md:0 0.25rem 0.5rem 0 #0000001a,0 0.375rem 0.75rem 0 #00000040;--elevation-lg:0 0.75rem 0.75rem 0 #00000026,0 1rem 2rem 0 #00000040;--elevation-focus-ring:0 0 0 0.25rem var(--color-global-alienblue);--font-sans:-apple-system,BlinkMacSystemFont,\'Segoe UI\',Roboto,\'Helvetica Neue\',Arial,\'Apple Color Emoji\',\'Segoe UI Emoji\',\'Segoe UI Symbol\',sans-serif;--font-mono:Noto Mono,Menlo,Monaco,Consolas,monospace;--font-title-h0:normal 500 1.625rem/2rem var(--font-sans);--font-title-h1:normal 500 1.375rem/1.625rem var(--font-sans);--font-title-h2:normal 500 1.25rem/1.5rem var(--font-sans);--font-title-h3:normal 500 1.125rem/1.375rem var(--font-sans);--font-title-h4:normal 500 1rem/1.25rem var(--font-sans);--font-title-h5:normal 500 0.875rem/1.125rem var(--font-sans);--font-title-h6:normal 500 0.75rem/1rem var(--font-sans);--font-body:0.875rem;--font-small:0.75rem;--font-code:0.875rem;--font-subheading:0.75rem;--font-label:0.625rem;--font-button-b1:normal bold 1.125rem/1.375rem var(--font-sans);--font-button-b2:normal bold 1rem/1.25rem var(--font-sans);--font-button-b3:normal bold 0.875rem/1.125rem var(--font-sans);--font-button-b4:normal bold 0.75rem/0.875rem var(--font-sans);--color-gradient-orangeyellow:linear-gradient(89.94deg, #ec0623 0%, #ff8717 100%);--color-gradient-bluepink:linear-gradient(89.94deg, #51b9ff 0%, #7785ff 52.6%, #b279ff 73.96%, #ff81ed 100%);--boxshadow-modal:0px 2px 15px rgba(26, 26, 27, 0.3);--boxshadow-navigation:0px 4px 14px rgba(0, 0, 0, 0.1);--boxshadow-tooltip:0 1px 4px rgba(0, 0, 0, 0.15),0 4px 4px rgba(0, 0, 0, 0.15);color-scheme:light}  .theme-light dialog::backdrop,:root dialog::backdrop{--color-dialog-background:#00000080}  @media (prefers-color-scheme:dark){:root:not(.theme-light){--color-primary-visited:#c58af9;--color-primary-background:#006cbf;--color-primary-background-hover:#24a0ed;--color-tone-1:#d7dadc;--color-tone-2:#818384;--color-tone-3:#565758;--color-tone-4:#3a3a3c;--color-tone-5:#272729;--color-tone-6:#1a1a1b;--color-tone-7:#121213;--color-identity-coins:#ffe600;--color-ui-canvas:#050505;--color-ui-modalbackground:var(--color-tone-6);--color-opacity-50:#d7dadc80;--color-scrim:#0000004d;--elevation-xs:0 0.0625rem 0.125rem 0 #000000ab;--elevation-sm:0 0.0625rem 0.25rem 0 #00000054,0 0.25rem 0.25rem 0 #00000054;--elevation-md:0 0.25rem 0.5rem 0 #00000033,0 0.375rem 0.75rem 0 #00000080;--elevation-lg:0 0.75rem 0.75rem 0 #00000033,0 1rem 2rem 0 #00000080;--boxshadow-modal:0px 2px 15px rgba(0, 0, 0, 0.3);--boxshadow-tooltip:0 1px 4px rgba(0, 0, 0, 0.33),0 4px 4px rgba(0, 0, 0, 0.33);color-scheme:dark}:root:not(.theme-light) dialog::backdrop{--color-dialog-background:#d7dadc80}}  .theme-dark{--color-primary-visited:#c58af9;--color-primary-background:#006cbf;--color-primary-background-hover:#24a0ed;--color-tone-1:#d7dadc;--color-tone-2:#818384;--color-tone-3:#565758;--color-tone-4:#3a3a3c;--color-tone-5:#272729;--color-tone-6:#1a1a1b;--color-tone-7:#121213;--color-identity-coins:#ffe600;--color-ui-canvas:#050505;--color-ui-modalbackground:var(--color-tone-6);--color-opacity-50:#d7dadc80;--color-scrim:#0000004d;--elevation-xs:0 0.0625rem 0.125rem 0 #000000ab;--elevation-sm:0 0.0625rem 0.25rem 0 #00000054,0 0.25rem 0.25rem 0 #00000054;--elevation-md:0 0.25rem 0.5rem 0 #00000033,0 0.375rem 0.75rem 0 #00000080;--elevation-lg:0 0.75rem 0.75rem 0 #00000033,0 1rem 2rem 0 #00000080;--boxshadow-modal:0px 2px 15px rgba(0, 0, 0, 0.3);--boxshadow-tooltip:0 1px 4px rgba(0, 0, 0, 0.33),0 4px 4px rgba(0, 0, 0, 0.33);color-scheme:dark}  .theme-dark dialog::backdrop{--color-dialog-background:#d7dadc80}  .theme-beta,.theme-light.theme-beta{--spacer-a-px:0.125rem;--spacer-button-lg-px:var(--spacer-md);--spacer-button-md-px:var(--spacer-md);--spacer-button-sm-px:var(--spacer-sm);--spacer-input-padding-left:var(--spacer-md);--spacer-input-padding-top:var(--spacer-2xs);--spacer-label-default:var(--spacer-md);--spacer-switch-input-active-pl:var(--spacer-xs);--size-banner-height:var(--size-rem40);--size-button-lg-h:var(--size-2xl);--size-button-md-h:2.5rem;--size-button-sm-h:var(--size-xl);--size-button-xs-h:var(--size-xl);--size-switch-input-h:var(--size-xl);--size-switch-input-w:var(--size-2xl);--line-a-focus:var(--line-md);--line-a-outline-moz:0px;--line-a-outline-wb:0px;--line-button-lg-border:var(--line-sm);--line-button-md-border:var(--line-sm);--line-button-sm-border:var(--line-sm);--line-button-xs-border:var(--line-sm);--line-button-border-activated:var(--line-lg);--line-input-border:var(--line-lg);--radius-md:1.25rem;--radius-accordion-size:0px;--font-10:normal undefined null/null var(--font-sans);--font-12:normal undefined null/null var(--font-sans);--font-14:normal undefined null/null var(--font-sans);--font-16:normal undefined null/null var(--font-sans);--font-18:normal undefined null/null var(--font-sans);--font-20:normal undefined null/null var(--font-sans);--font-24:normal undefined null/null var(--font-sans);--font-32:normal undefined null/null var(--font-sans);--font-48:normal undefined null/null var(--font-sans);--font-64:normal undefined null/null var(--font-sans);--font-title-h0:var(--font-64);--font-title-h1:var(--font-32);--font-title-h2:var(--font-24);--font-title-h3:var(--font-18);--font-title-h4:var(--font-16);--font-title-h5:var(--font-14);--font-title-h6:var(--font-12);--font-14-20-regular:normal 400 0.875rem/1.25rem var(--font-sans);--font-14-20-semibold:normal 600 0.875rem/1.25rem var(--font-sans);--font-16-20-regular:normal 400 1rem/1.25rem var(--font-sans);--font-12-16-regular:normal 400 0.75rem/1rem var(--font-sans);--font-12-16-semibold:normal 600 0.75rem/1rem var(--font-sans);--font-button-lg:var(--font-14-20-semibold);--font-button-md:var(--font-14-20-semibold);--font-button-sm:var(--font-12-16-semibold);--font-label-default:var(--font-12-16-regular);--misc-accordion-border:0;--misc-accordion-open-list-style-type:none;--misc-accordion-closed-list-style-type:none;--misc-divider-margin:0;--misc-label-text-transform:capitalize;--misc-label-letter-spacing:initial;--blur-sm:0.25rem;--blur-normal:0.5rem;--blur-md:0.75rem;--blur-lg:1rem;--blur-xl:1.5rem;--blur-2xl:2.5rem;--blur-3xl:4rem;--color-pizzaRed:#ef5350;--color-global-brand-orangered:#FF4500;--color-global-focus:#47B0DB;--color-interactive-content-disabled:#00000040;--color-interactive-background-disabled:#0000000d;--color-interactive-pressed:#00000029;--color-neutral-content:#2A3C42;--color-neutral-content-disabled:#D6D6D6;--color-neutral-content-weak:#576F76;--color-neutral-content-strong:#0F1A1C;--color-neutral-background:#ffffff;--color-neutral-background-selected:#EAEDEF;--color-neutral-background-weak:#F9FAFA;--color-neutral-background-medium:#F8F8F8;--color-neutral-background-strong:#ffffff;--color-neutral-background-hover:#F2F4F5;--color-neutral-border:#00000033;--color-neutral-border-medium:#00000080;--color-neutral-border-weak:#0000001a;--color-neutral-border-strong:#0F1A1C;--color-primary:#0045AC;--color-primary-hover:#003584;--color-primary-visited:#8700B5;--color-primary-onBackground:#ffffff;--color-primary-onBackground-selected:#ffffff;--color-primary-background:#0045AC;--color-primary-background-hover:#003584;--color-primary-background-selected:#00255D;--color-secondary:#0F1A1C;--color-secondary-hover:#000000;--color-secondary-weak:#576F76;--color-secondary-onBackground:#000000;--color-secondary-background:#EAEDEF;--color-secondary-background-hover:#E2E7E9;--color-secondary-background-selected:#D2DADD;--color-secondary-plain:#0F1A1C;--color-secondary-plain-hover:#000000;--color-danger-background:#EB001F;--color-danger-background-disabled:#FFCCD2;--color-danger-background-hover:#A50016;--color-danger-onBackground:#ffffff;--color-danger-content:#A50016;--color-danger-content-hover:#7E0011;--color-danger-content-default:#ffffff;--color-brand-background:#D93A00;--color-brand-onBackground:#ffffff;--color-brand-background-hover:#962900;--color-media-background:#00000099;--color-media-onbackground:#ffffff;--color-media-background-hover:#000000cc;--color-media-onbackground-disabled:#ffffff40;--color-media-border-selected:#ffffff;--color-media-background-selected:#000000cc;--color-success-content:#0A6000;--color-success-hover:#084A00;--color-success-onBackground:#ffffff;--color-success-background:#0E8A00;--color-success-background-hover:#0A6000;--color-warning-content:#665505;--color-warning-content-hover:#504104;--color-warning-onBackground:#000000;--color-warning-background:#DBAF00;--color-warning-background-hover:#8F7407;--color-upvote-content:#962900;--color-upvote-content-weak:var(--color-global-brand-orangered);--color-upvote-disabled:#9629004d;--color-upvote-onBackground:#ffffff;--color-upvote-background:#D93A00;--color-upvote-background-hover:#962900;--color-upvote-background-disabled:#D93A004d;--color-downvote-content:#453BB5;--color-downvote-content-weak:#6A5CFF;--color-downvote-disabled:#453BB54d;--color-downvote-onBackground:#ffffff;--color-downvote-background:#6A5CFF;--color-downvote-background-hover:#453BB5;--color-downvote-background-disabled:#6A5CFF4d;--color-brand-gradient-default:linear-gradient(180deg, #D93A00ff, #db3b00ff 30%, #962900ff 100%);--color-brand-gradient-default-highlight:linear-gradient(258deg, #db3f0000 80%, #D93A00ff 100%);--color-brand-gradient-hover:linear-gradient(180deg, #e23d00ff 15%, #cb3600ff 49%, #b43000ff 100%);--color-brand-gradient-hover-highlight:linear-gradient(323deg, #cb360000 65%, #cb3600ff 100%);--color-brand-gradient-active:linear-gradient(180deg, #cd3700ff, #db3b00ff 68%, #D93A00ff 100%);--color-brand-gradient-active-highlight:linear-gradient(83deg, #db3f0000 80%, #D93A00ff 100%);--color-gradient-media:linear-gradient(180deg, #00000000, #0000008a 60%, #00000099 100%);--color-gradient-media-strong:linear-gradient(180deg, #00000000, #000000cc 60%, #000000e6 100%);--color-transparent-background-hover:#82959B1a;--color-global-black:#000000;--color-global-white:#ffffff;--color-global-orangered:#D93A00;--color-global-alienblue:#1870F4;--color-global-darkblue:#131F23;--color-tone-1:#131313;--color-tone-2:#434343;--color-tone-3:#ACACAC;--color-tone-4:#E4E4E4;--color-tone-5:#F2F2F2;--color-tone-6:#F8F8F8;--color-tone-7:#ffffff;--color-action-upvote:#D93A00;--color-action-downvote:#6A5CFF;--color-alert-caution:#8F7407;--color-identity-admin:#D93A00;--color-identity-moderator:#0E8A00;--color-identity-self:#008675;--color-identity-coins:#DBAF00;--color-category-live:#D93A00;--color-category-nsfw:#E00096;--color-category-spoiler:var(--color-tone-1);--color-ui-canvas:var(--color-tone-5);--color-ui-modalbackground:var(--color-neutral-background-strong);--color-avatar-gradient:linear-gradient(0deg, #D2DADDff, #ffffffff 75%);--color-opacity-highlight:linear-gradient(#00255D1a, var(--color-tone-6));--color-opacity-08:#13131314;--color-opacity-50:#00000080;--color-scrim:#00000099;--color-scrim-strong:#000000cc;--color-scrim-gradient:linear-gradient(180deg, #00000000, #0000008a 60%, #00000099 100%);--color-online:#55BD46;--color-favorite:#8F7407;--color-a-default:var(--color-primary);--color-a-hover:var(--color-primary-hover);--color-a-visited:var(--color-primary-visited);--color-banner-plain:var(--color-neutral-background-strong);--color-banner-plain-inverted:var(--color-neutral-content-strong);--color-banner-error:var(--color-danger-background);--color-banner-caution:var(--color-warning-background);--color-banner-success:var(--color-success-background);--color-banner-brand:var(--color-brand-background);--color-banner-plain-text:var(--color-neutral-content);--color-banner-plain-inverted-text:var(--color-neutral-background-weak);--color-banner-error-text:var(--color-danger-onBackground);--color-banner-caution-text:var(--color-warning-onBackground);--color-banner-caution-hover:var(--color-warning-background-hover);--color-banner-success-text:var(--color-success-onBackground);--color-banner-brand-text:var(--color-brand-onBackground);--color-button-overlay-focus:transparent;--color-button-overlay-active:transparent;--color-button-border-width:tomato;--color-button-border-width-activated:tomato;--color-button-primary-background-hover:var(--color-primary-background-hover);--color-button-primary-background-activated:var(--color-primary-background-selected);--color-button-primary-background-disabled:var(--color-interactive-background-disabled);--color-button-primary-border-hover:var(--color-primary-background);--color-button-primary-border-active:var(--color-primary-background-hover);--color-button-primary-text-disabled:var(--color-interactive-content-disabled);--color-button-primary-text-activated:var(--color-primary-onBackground-selected);--color-button-secondary-background:var(--color-secondary-background);--color-button-secondary-background-focus:var(--color-secondary-background);--color-button-secondary-background-hover:var(--color-secondary-background-hover);--color-button-secondary-background-disabled:var(--color-interactive-background-disabled);--color-button-secondary-background-activated:var(--color-secondary-background-selected);--color-button-secondary-border:transparent;--color-button-secondary-border-hover:var(--color-secondary-background);--color-button-secondary-border-active:var(--color-secondary-background-hover);--color-button-secondary-border-activated:transparent;--color-button-secondary-border-disabled:transparent;--color-button-secondary-text:var(--color-secondary-onBackground);--color-button-secondary-text-disabled:var(--color-interactive-content-disabled);--color-button-secondary-text-activated:var(--color-secondary-onBackground);--color-button-tertiary-background:transparent;--color-button-tertiary-background-focus:transparent;--color-button-tertiary-background-hover:var(--color-secondary-background-hover);--color-button-tertiary-background-disabled:transparent;--color-button-tertiary-background-activated:var(--color-neutral-content);--color-button-tertiary-border-hover:var(--color-secondary-background);--color-button-tertiary-border-active:var(--color-secondary-background-hover);--color-button-tertiary-text:var(--color-neutral-content-strong);--color-button-tertiary-text-disabled:var(--color-neutral-content-disabled);--color-button-tertiary-text-activated:var(--color-neutral-background);--color-button-plain-background-hover:var(--color-secondary-background-hover);--color-button-plain-background-disabled:transparent;--color-button-plain-background-activated:var(--color-secondary-background-selected);--color-button-plain-border-hover:var(--color-secondary-background);--color-button-plain-border-active:var(--color-secondary-background-hover);--color-button-plain-text:var(--color-secondary-plain);--color-button-plain-text-hover:var(--color-secondary-plain-hover);--color-button-plain-text-disabled:var(--color-interactive-content-disabled);--color-button-plain-text-activated:var(--color-secondary-onBackground);--color-button-primary-border-activated:var(--color-primary-background);--color-button-plain-inverted-background-activated:var(--color-neutral-content);--color-button-plain-inverted-text-activated:var(--color-neutral-background);--color-button-media-border-color-activated:var(--color-media-border-selected);--color-button-favorite-text:var(--color-favorite);--color-button-caution-background:var(--color-warning-background);--color-button-caution-background-hover:var(--color-warning-background-hover);--color-button-caution-background-disabled:var(--color-interactive-background-disabled);--color-button-caution-text:var(--color-warning-onBackground);--color-divider-default:var(--color-neutral-border);--color-input-secondary:var(--color-secondary-background);--color-input-secondary-hover:var(--color-secondary-background-hover);--color-input-border:transparent;--color-input-bordered:transparent;--color-input-bordered-hover:var(--color-neutral-background-hover);--color-input-secondary-text:var(--color-secondary-onBackground);--color-input-bordered-text:var(--color-secondary-plain);--color-input-helper-text:var(--color-neutral-content-weak);--color-input-pressed:var(--color-interactive-pressed);--color-label-default:var(--color-neutral-content-weak);--color-shimmer-background:#00000008;--color-shimmer-gradient-overlay:linear-gradient(to right, #00000000, #00000005 20%, #0000000f 50%, #00000008 70%, #00000000 100%);--color-switch-input-background-pressed-scrim:var(--color-interactive-pressed);--color-switch-input-background-handle:var(--color-global-white);--color-switch-input-background-handle-disabled:var(--color-secondary-background);--color-switch-input-background-default:var(--color-secondary-background);--color-switch-input-background-default-hover:var(--color-secondary-background-hover);--color-switch-input-background-default-disabled:var(--color-interactive-background-disabled);--color-switch-input-background-checked:var(--color-primary-background);--color-switch-input-background-checked-hover:var(--color-primary-background-hover);--color-switch-input-background-checked-disabled:var(--color-interactive-content-disabled);--color-tooltip-bg-neutral:var(--color-neutral-background-strong);--color-tooltip-text-neutral:var(--color-neutral-content);--color-tooltip-bg-inverted:var(--color-neutral-content);--color-tooltip-text-inverted:var(--color-neutral-background);--color-tooltip-bg-primary:var(--color-primary-background);--color-tooltip-text-primary:var(--color-primary-onBackground);--elevation-sm-inset:inset 0 0.0625rem 0.125rem 0 #00000021;--elevation-button-focus:var(--elevation-focus-ring);--elevation-switch-input-default-inset:var(--elevation-sm-inset)}  @media (prefers-color-scheme:dark){:root:not(.theme-light) .theme-beta,:root:not(.theme-light).theme-beta{--color-pizzaRed:#c62828;--color-global-brand-orangered:#FF4500;--color-global-focus:#007FAE;--color-interactive-content-disabled:#ffffff40;--color-interactive-background-disabled:#ffffff0d;--color-interactive-pressed:#ffffff29;--color-neutral-content:#B8C5C9;--color-neutral-content-disabled:#303030;--color-neutral-content-weak:#82959B;--color-neutral-content-strong:#F2F4F5;--color-neutral-background:#0B1416;--color-neutral-background-selected:#1A282D;--color-neutral-background-weak:#04090A;--color-neutral-background-medium:#131313;--color-neutral-background-strong:#0F1A1C;--color-neutral-background-hover:#131F23;--color-neutral-border:#ffffff33;--color-neutral-border-medium:#ffffff80;--color-neutral-border-weak:#ffffff1a;--color-neutral-border-strong:#F2F4F5;--color-primary:#629FFF;--color-primary-hover:#A7CCFF;--color-primary-visited:#D55EFF;--color-primary-background:#0045AC;--color-primary-background-hover:#1870F4;--color-primary-background-selected:#629FFF;--color-primary-onBackground:#ffffff;--color-primary-onBackground-selected:#000000;--color-secondary:#F2F4F5;--color-secondary-hover:#ffffff;--color-secondary-weak:#82959B;--color-secondary-onBackground:#ffffff;--color-secondary-background:#1A282D;--color-secondary-background-hover:#223237;--color-secondary-background-selected:#33464C;--color-secondary-plain:#F2F4F5;--color-secondary-plain-hover:#ffffff;--color-danger-background:#A50016;--color-danger-background-disabled:#3A0008;--color-danger-background-hover:#EB001F;--color-danger-onBackground:#ffffff;--color-danger-content:#FF6E80;--color-danger-content-hover:#FFADB8;--color-success-content:#55BD46;--color-success-hover:#A3E398;--color-success-onBackground:#ffffff;--color-success-background:#0A6000;--color-success-background-hover:#0E8A00;--color-warning-content:#DBAF00;--color-warning-content-hover:#FADB61;--color-warning-onBackground:#000000;--color-warning-background:#DBAF00;--color-warning-background-hover:#FADB61;--color-upvote-content:#FE7C53;--color-upvote-content-weak:var(--color-global-brand-orangered);--color-upvote-disabled:#FE7C534d;--color-upvote-onBackground:#ffffff;--color-upvote-background:#D93A00;--color-upvote-background-hover:#962900;--color-upvote-background-disabled:#D93A004d;--color-downvote-content:#988EFF;--color-downvote-content-weak:#6A5CFF;--color-downvote-disabled:#988EFF4d;--color-downvote-onBackground:#ffffff;--color-downvote-background:#453BB5;--color-downvote-background-hover:#453BB5;--color-downvote-background-disabled:#6A5CFF4d;--color-tone-1:#F2F2F2;--color-tone-2:#ACACAC;--color-tone-3:#434343;--color-tone-4:#303030;--color-tone-5:#1E1E1E;--color-tone-6:#131313;--color-tone-7:#080808;--color-ui-canvas:#080808;--color-ui-modalbackground:var(--color-neutral-background-strong);--color-avatar-gradient:linear-gradient(0deg, #2A3C42ff, #0B1416ff 75%);--color-transparent-background-hover:#667A801a;--color-opacity-50:#F2F2F280;--color-online:#55BD46;--color-favorite:#DBAF00;--color-button-primary-border-activated:transparent;--color-button-plain-inverted-activated-text:var(--color-neutral-background);--color-shimmer-background:#ffffff08;--color-shimmer-gradient-overlay:linear-gradient(to right, #ffffff00, #ffffff05 20%, #ffffff0f 50%, #ffffff08 70%, #ffffff00 100%)}}  .theme-dark .theme-beta,.theme-dark.theme-beta{--color-pizzaRed:#c62828;--color-global-brand-orangered:#FF4500;--color-global-focus:#007FAE;--color-interactive-content-disabled:#ffffff40;--color-interactive-background-disabled:#ffffff0d;--color-interactive-pressed:#ffffff29;--color-neutral-content:#B8C5C9;--color-neutral-content-disabled:#303030;--color-neutral-content-weak:#82959B;--color-neutral-content-strong:#F2F4F5;--color-neutral-background:#0B1416;--color-neutral-background-selected:#1A282D;--color-neutral-background-weak:#04090A;--color-neutral-background-medium:#131313;--color-neutral-background-strong:#0F1A1C;--color-neutral-background-hover:#131F23;--color-neutral-border:#ffffff33;--color-neutral-border-medium:#ffffff80;--color-neutral-border-weak:#ffffff1a;--color-neutral-border-strong:#F2F4F5;--color-primary:#629FFF;--color-primary-hover:#A7CCFF;--color-primary-visited:#D55EFF;--color-primary-background:#0045AC;--color-primary-background-hover:#1870F4;--color-primary-background-selected:#629FFF;--color-primary-onBackground:#ffffff;--color-primary-onBackground-selected:#000000;--color-secondary:#F2F4F5;--color-secondary-hover:#ffffff;--color-secondary-weak:#82959B;--color-secondary-onBackground:#ffffff;--color-secondary-background:#1A282D;--color-secondary-background-hover:#223237;--color-secondary-background-selected:#33464C;--color-secondary-plain:#F2F4F5;--color-secondary-plain-hover:#ffffff;--color-danger-background:#A50016;--color-danger-background-disabled:#3A0008;--color-danger-background-hover:#EB001F;--color-danger-onBackground:#ffffff;--color-danger-content:#FF6E80;--color-danger-content-hover:#FFADB8;--color-success-content:#55BD46;--color-success-hover:#A3E398;--color-success-onBackground:#ffffff;--color-success-background:#0A6000;--color-success-background-hover:#0E8A00;--color-warning-content:#DBAF00;--color-warning-content-hover:#FADB61;--color-warning-onBackground:#000000;--color-warning-background:#DBAF00;--color-warning-background-hover:#FADB61;--color-upvote-content:#FE7C53;--color-upvote-content-weak:var(--color-global-brand-orangered);--color-upvote-disabled:#FE7C534d;--color-upvote-onBackground:#ffffff;--color-upvote-background:#D93A00;--color-upvote-background-hover:#962900;--color-upvote-background-disabled:#D93A004d;--color-downvote-content:#988EFF;--color-downvote-content-weak:#6A5CFF;--color-downvote-disabled:#988EFF4d;--color-downvote-onBackground:#ffffff;--color-downvote-background:#453BB5;--color-downvote-background-hover:#453BB5;--color-downvote-background-disabled:#6A5CFF4d;--color-tone-1:#F2F2F2;--color-tone-2:#ACACAC;--color-tone-3:#434343;--color-tone-4:#303030;--color-tone-5:#1E1E1E;--color-tone-6:#131313;--color-tone-7:#080808;--color-ui-canvas:#080808;--color-ui-modalbackground:var(--color-neutral-background-strong);--color-avatar-gradient:linear-gradient(0deg, #2A3C42ff, #0B1416ff 75%);--color-transparent-background-hover:#667A801a;--color-opacity-50:#F2F2F280;--color-online:#55BD46;--color-favorite:#DBAF00;--color-button-primary-border-activated:transparent;--color-button-plain-inverted-activated-text:var(--color-neutral-background);--color-shimmer-background:#ffffff08;--color-shimmer-gradient-overlay:linear-gradient(to right, #ffffff00, #ffffff05 20%, #ffffff0f 50%, #ffffff08 70%, #ffffff00 100%)}  .theme-light.theme-rpl,.theme-rpl{--spacer-a-px:0.125rem;--spacer-button-lg-px:var(--spacer-md);--spacer-button-md-px:var(--spacer-md);--spacer-button-sm-px:var(--spacer-sm);--spacer-input-padding-left:var(--spacer-md);--spacer-input-padding-top:var(--spacer-2xs);--spacer-label-default:var(--spacer-md);--spacer-switch-input-active-pl:var(--spacer-xs);--size-banner-height:var(--size-rem40);--size-button-lg-h:var(--size-2xl);--size-button-md-h:2.5rem;--size-button-sm-h:var(--size-xl);--size-button-xs-h:var(--size-xl);--size-switch-input-h:var(--size-xl);--size-switch-input-w:var(--size-2xl);--line-a-focus:var(--line-md);--line-a-outline-moz:0px;--line-a-outline-wb:0px;--line-button-lg-border:var(--line-sm);--line-button-md-border:var(--line-sm);--line-button-sm-border:var(--line-sm);--line-button-xs-border:var(--line-sm);--line-button-border-activated:var(--line-lg);--line-input-border:var(--line-lg);--radius-md:1.25rem;--radius-accordion-size:0px;--font-10:normal undefined null/null var(--font-sans);--font-12:normal undefined null/null var(--font-sans);--font-14:normal undefined null/null var(--font-sans);--font-16:normal undefined null/null var(--font-sans);--font-18:normal undefined null/null var(--font-sans);--font-20:normal undefined null/null var(--font-sans);--font-24:normal undefined null/null var(--font-sans);--font-32:normal undefined null/null var(--font-sans);--font-48:normal undefined null/null var(--font-sans);--font-64:normal undefined null/null var(--font-sans);--font-title-h0:var(--font-64);--font-title-h1:var(--font-32);--font-title-h2:var(--font-24);--font-title-h3:var(--font-18);--font-title-h4:var(--font-16);--font-title-h5:var(--font-14);--font-title-h6:var(--font-12);--font-14-20-regular:normal 400 0.875rem/1.25rem var(--font-sans);--font-14-20-semibold:normal 600 0.875rem/1.25rem var(--font-sans);--font-16-20-regular:normal 400 1rem/1.25rem var(--font-sans);--font-12-16-regular:normal 400 0.75rem/1rem var(--font-sans);--font-12-16-semibold:normal 600 0.75rem/1rem var(--font-sans);--font-button-lg:var(--font-14-20-semibold);--font-button-md:var(--font-14-20-semibold);--font-button-sm:var(--font-12-16-semibold);--font-label-default:var(--font-12-16-regular);--misc-accordion-border:0;--misc-accordion-open-list-style-type:none;--misc-accordion-closed-list-style-type:none;--misc-divider-margin:0;--misc-label-text-transform:capitalize;--misc-label-letter-spacing:initial;--blur-sm:0.25rem;--blur-normal:0.5rem;--blur-md:0.75rem;--blur-lg:1rem;--blur-xl:1.5rem;--blur-2xl:2.5rem;--blur-3xl:4rem;--color-pizzaRed:#ef5350;--color-global-brand-orangered:#FF4500;--color-global-focus:#47B0DB;--color-interactive-content-disabled:#00000040;--color-interactive-background-disabled:#0000000d;--color-interactive-pressed:#00000029;--color-neutral-content:#2A3C42;--color-neutral-content-disabled:#D6D6D6;--color-neutral-content-weak:#576F76;--color-neutral-content-strong:#0F1A1C;--color-neutral-background:#ffffff;--color-neutral-background-selected:#EAEDEF;--color-neutral-background-weak:#F9FAFA;--color-neutral-background-medium:#F8F8F8;--color-neutral-background-strong:#ffffff;--color-neutral-background-hover:#F2F4F5;--color-neutral-border:#00000033;--color-neutral-border-medium:#00000080;--color-neutral-border-weak:#0000001a;--color-neutral-border-strong:#0F1A1C;--color-primary:#0045AC;--color-primary-hover:#003584;--color-primary-visited:#8700B5;--color-primary-onBackground:#ffffff;--color-primary-onBackground-selected:#ffffff;--color-primary-background:#0045AC;--color-primary-background-hover:#003584;--color-primary-background-selected:#00255D;--color-secondary:#0F1A1C;--color-secondary-hover:#000000;--color-secondary-weak:#576F76;--color-secondary-onBackground:#000000;--color-secondary-background:#EAEDEF;--color-secondary-background-hover:#E2E7E9;--color-secondary-background-selected:#D2DADD;--color-secondary-plain:#0F1A1C;--color-secondary-plain-hover:#000000;--color-danger-background:#EB001F;--color-danger-background-disabled:#FFCCD2;--color-danger-background-hover:#A50016;--color-danger-onBackground:#ffffff;--color-danger-content:#A50016;--color-danger-content-hover:#7E0011;--color-danger-content-default:#ffffff;--color-brand-background:#D93A00;--color-brand-onBackground:#ffffff;--color-brand-background-hover:#962900;--color-media-background:#00000099;--color-media-onbackground:#ffffff;--color-media-background-hover:#000000cc;--color-media-onbackground-disabled:#ffffff40;--color-media-border-selected:#ffffff;--color-media-background-selected:#000000cc;--color-success-content:#0A6000;--color-success-hover:#084A00;--color-success-onBackground:#ffffff;--color-success-background:#0E8A00;--color-success-background-hover:#0A6000;--color-warning-content:#665505;--color-warning-content-hover:#504104;--color-warning-onBackground:#000000;--color-warning-background:#DBAF00;--color-warning-background-hover:#8F7407;--color-upvote-content:#962900;--color-upvote-content-weak:var(--color-global-brand-orangered);--color-upvote-disabled:#9629004d;--color-upvote-onBackground:#ffffff;--color-upvote-background:#D93A00;--color-upvote-background-hover:#962900;--color-upvote-background-disabled:#D93A004d;--color-downvote-content:#453BB5;--color-downvote-content-weak:#6A5CFF;--color-downvote-disabled:#453BB54d;--color-downvote-onBackground:#ffffff;--color-downvote-background:#6A5CFF;--color-downvote-background-hover:#453BB5;--color-downvote-background-disabled:#6A5CFF4d;--color-brand-gradient-default:linear-gradient(180deg, #D93A00ff, #db3b00ff 30%, #962900ff 100%);--color-brand-gradient-default-highlight:linear-gradient(258deg, #db3f0000 80%, #D93A00ff 100%);--color-brand-gradient-hover:linear-gradient(180deg, #e23d00ff 15%, #cb3600ff 49%, #b43000ff 100%);--color-brand-gradient-hover-highlight:linear-gradient(323deg, #cb360000 65%, #cb3600ff 100%);--color-brand-gradient-active:linear-gradient(180deg, #cd3700ff, #db3b00ff 68%, #D93A00ff 100%);--color-brand-gradient-active-highlight:linear-gradient(83deg, #db3f0000 80%, #D93A00ff 100%);--color-gradient-media:linear-gradient(180deg, #00000000, #0000008a 60%, #00000099 100%);--color-gradient-media-strong:linear-gradient(180deg, #00000000, #000000cc 60%, #000000e6 100%);--color-transparent-background-hover:#82959B1a;--color-global-black:#000000;--color-global-white:#ffffff;--color-global-orangered:#D93A00;--color-global-alienblue:#1870F4;--color-global-darkblue:#131F23;--color-tone-1:#131313;--color-tone-2:#434343;--color-tone-3:#ACACAC;--color-tone-4:#E4E4E4;--color-tone-5:#F2F2F2;--color-tone-6:#F8F8F8;--color-tone-7:#ffffff;--color-action-upvote:#D93A00;--color-action-downvote:#6A5CFF;--color-alert-caution:#8F7407;--color-identity-admin:#D93A00;--color-identity-moderator:#0E8A00;--color-identity-self:#008675;--color-identity-coins:#DBAF00;--color-category-live:#D93A00;--color-category-nsfw:#E00096;--color-category-spoiler:var(--color-tone-1);--color-ui-canvas:var(--color-tone-5);--color-ui-modalbackground:var(--color-neutral-background-strong);--color-avatar-gradient:linear-gradient(0deg, #D2DADDff, #ffffffff 75%);--color-opacity-highlight:linear-gradient(#00255D1a, var(--color-tone-6));--color-opacity-08:#13131314;--color-opacity-50:#00000080;--color-scrim:#00000099;--color-scrim-strong:#000000cc;--color-scrim-gradient:linear-gradient(180deg, #00000000, #0000008a 60%, #00000099 100%);--color-online:#55BD46;--color-favorite:#8F7407;--color-a-default:var(--color-primary);--color-a-hover:var(--color-primary-hover);--color-a-visited:var(--color-primary-visited);--color-banner-plain:var(--color-neutral-background-strong);--color-banner-plain-inverted:var(--color-neutral-content-strong);--color-banner-error:var(--color-danger-background);--color-banner-caution:var(--color-warning-background);--color-banner-success:var(--color-success-background);--color-banner-brand:var(--color-brand-background);--color-banner-plain-text:var(--color-neutral-content);--color-banner-plain-inverted-text:var(--color-neutral-background-weak);--color-banner-error-text:var(--color-danger-onBackground);--color-banner-caution-text:var(--color-warning-onBackground);--color-banner-caution-hover:var(--color-warning-background-hover);--color-banner-success-text:var(--color-success-onBackground);--color-banner-brand-text:var(--color-brand-onBackground);--color-button-overlay-focus:transparent;--color-button-overlay-active:transparent;--color-button-border-width:tomato;--color-button-border-width-activated:tomato;--color-button-primary-background-hover:var(--color-primary-background-hover);--color-button-primary-background-activated:var(--color-primary-background-selected);--color-button-primary-background-disabled:var(--color-interactive-background-disabled);--color-button-primary-border-hover:var(--color-primary-background);--color-button-primary-border-active:var(--color-primary-background-hover);--color-button-primary-text-disabled:var(--color-interactive-content-disabled);--color-button-primary-text-activated:var(--color-primary-onBackground-selected);--color-button-secondary-background:var(--color-secondary-background);--color-button-secondary-background-focus:var(--color-secondary-background);--color-button-secondary-background-hover:var(--color-secondary-background-hover);--color-button-secondary-background-disabled:var(--color-interactive-background-disabled);--color-button-secondary-background-activated:var(--color-secondary-background-selected);--color-button-secondary-border:transparent;--color-button-secondary-border-hover:var(--color-secondary-background);--color-button-secondary-border-active:var(--color-secondary-background-hover);--color-button-secondary-border-activated:transparent;--color-button-secondary-border-disabled:transparent;--color-button-secondary-text:var(--color-secondary-onBackground);--color-button-secondary-text-disabled:var(--color-interactive-content-disabled);--color-button-secondary-text-activated:var(--color-secondary-onBackground);--color-button-tertiary-background:transparent;--color-button-tertiary-background-focus:transparent;--color-button-tertiary-background-hover:var(--color-secondary-background-hover);--color-button-tertiary-background-disabled:transparent;--color-button-tertiary-background-activated:var(--color-neutral-content);--color-button-tertiary-border-hover:var(--color-secondary-background);--color-button-tertiary-border-active:var(--color-secondary-background-hover);--color-button-tertiary-text:var(--color-neutral-content-strong);--color-button-tertiary-text-disabled:var(--color-neutral-content-disabled);--color-button-tertiary-text-activated:var(--color-neutral-background);--color-button-plain-background-hover:var(--color-secondary-background-hover);--color-button-plain-background-disabled:transparent;--color-button-plain-background-activated:var(--color-secondary-background-selected);--color-button-plain-border-hover:var(--color-secondary-background);--color-button-plain-border-active:var(--color-secondary-background-hover);--color-button-plain-text:var(--color-secondary-plain);--color-button-plain-text-hover:var(--color-secondary-plain-hover);--color-button-plain-text-disabled:var(--color-interactive-content-disabled);--color-button-plain-text-activated:var(--color-secondary-onBackground);--color-button-primary-border-activated:var(--color-primary-background);--color-button-plain-inverted-background-activated:var(--color-neutral-content);--color-button-plain-inverted-text-activated:var(--color-neutral-background);--color-button-media-border-color-activated:var(--color-media-border-selected);--color-button-favorite-text:var(--color-favorite);--color-button-caution-background:var(--color-warning-background);--color-button-caution-background-hover:var(--color-warning-background-hover);--color-button-caution-background-disabled:var(--color-interactive-background-disabled);--color-button-caution-text:var(--color-warning-onBackground);--color-divider-default:var(--color-neutral-border);--color-input-secondary:var(--color-secondary-background);--color-input-secondary-hover:var(--color-secondary-background-hover);--color-input-border:transparent;--color-input-bordered:transparent;--color-input-bordered-hover:var(--color-neutral-background-hover);--color-input-secondary-text:var(--color-secondary-onBackground);--color-input-bordered-text:var(--color-secondary-plain);--color-input-helper-text:var(--color-neutral-content-weak);--color-input-pressed:var(--color-interactive-pressed);--color-label-default:var(--color-neutral-content-weak);--color-shimmer-background:#00000008;--color-shimmer-gradient-overlay:linear-gradient(to right, #00000000, #00000005 20%, #0000000f 50%, #00000008 70%, #00000000 100%);--color-switch-input-background-pressed-scrim:var(--color-interactive-pressed);--color-switch-input-background-handle:var(--color-global-white);--color-switch-input-background-handle-disabled:var(--color-secondary-background);--color-switch-input-background-default:var(--color-secondary-background);--color-switch-input-background-default-hover:var(--color-secondary-background-hover);--color-switch-input-background-default-disabled:var(--color-interactive-background-disabled);--color-switch-input-background-checked:var(--color-primary-background);--color-switch-input-background-checked-hover:var(--color-primary-background-hover);--color-switch-input-background-checked-disabled:var(--color-interactive-content-disabled);--color-tooltip-bg-neutral:var(--color-neutral-background-strong);--color-tooltip-text-neutral:var(--color-neutral-content);--color-tooltip-bg-inverted:var(--color-neutral-content);--color-tooltip-text-inverted:var(--color-neutral-background);--color-tooltip-bg-primary:var(--color-primary-background);--color-tooltip-text-primary:var(--color-primary-onBackground);--elevation-sm-inset:inset 0 0.0625rem 0.125rem 0 #00000021;--elevation-button-focus:var(--elevation-focus-ring);--elevation-switch-input-default-inset:var(--elevation-sm-inset)}  @media (prefers-color-scheme:dark){:root:not(.theme-light) .theme-rpl,:root:not(.theme-light).theme-rpl{--color-pizzaRed:#c62828;--color-global-brand-orangered:#FF4500;--color-global-focus:#007FAE;--color-interactive-content-disabled:#ffffff40;--color-interactive-background-disabled:#ffffff0d;--color-interactive-pressed:#ffffff29;--color-neutral-content:#B8C5C9;--color-neutral-content-disabled:#303030;--color-neutral-content-weak:#82959B;--color-neutral-content-strong:#F2F4F5;--color-neutral-background:#0B1416;--color-neutral-background-selected:#1A282D;--color-neutral-background-weak:#04090A;--color-neutral-background-medium:#131313;--color-neutral-background-strong:#0F1A1C;--color-neutral-background-hover:#131F23;--color-neutral-border:#ffffff33;--color-neutral-border-medium:#ffffff80;--color-neutral-border-weak:#ffffff1a;--color-neutral-border-strong:#F2F4F5;--color-primary:#629FFF;--color-primary-hover:#A7CCFF;--color-primary-visited:#D55EFF;--color-primary-background:#0045AC;--color-primary-background-hover:#1870F4;--color-primary-background-selected:#629FFF;--color-primary-onBackground:#ffffff;--color-primary-onBackground-selected:#000000;--color-secondary:#F2F4F5;--color-secondary-hover:#ffffff;--color-secondary-weak:#82959B;--color-secondary-onBackground:#ffffff;--color-secondary-background:#1A282D;--color-secondary-background-hover:#223237;--color-secondary-background-selected:#33464C;--color-secondary-plain:#F2F4F5;--color-secondary-plain-hover:#ffffff;--color-danger-background:#A50016;--color-danger-background-disabled:#3A0008;--color-danger-background-hover:#EB001F;--color-danger-onBackground:#ffffff;--color-danger-content:#FF6E80;--color-danger-content-hover:#FFADB8;--color-success-content:#55BD46;--color-success-hover:#A3E398;--color-success-onBackground:#ffffff;--color-success-background:#0A6000;--color-success-background-hover:#0E8A00;--color-warning-content:#DBAF00;--color-warning-content-hover:#FADB61;--color-warning-onBackground:#000000;--color-warning-background:#DBAF00;--color-warning-background-hover:#FADB61;--color-upvote-content:#FE7C53;--color-upvote-content-weak:var(--color-global-brand-orangered);--color-upvote-disabled:#FE7C534d;--color-upvote-onBackground:#ffffff;--color-upvote-background:#D93A00;--color-upvote-background-hover:#962900;--color-upvote-background-disabled:#D93A004d;--color-downvote-content:#988EFF;--color-downvote-content-weak:#6A5CFF;--color-downvote-disabled:#988EFF4d;--color-downvote-onBackground:#ffffff;--color-downvote-background:#453BB5;--color-downvote-background-hover:#453BB5;--color-downvote-background-disabled:#6A5CFF4d;--color-tone-1:#F2F2F2;--color-tone-2:#ACACAC;--color-tone-3:#434343;--color-tone-4:#303030;--color-tone-5:#1E1E1E;--color-tone-6:#131313;--color-tone-7:#080808;--color-ui-canvas:#080808;--color-ui-modalbackground:var(--color-neutral-background-strong);--color-avatar-gradient:linear-gradient(0deg, #2A3C42ff, #0B1416ff 75%);--color-transparent-background-hover:#667A801a;--color-opacity-50:#F2F2F280;--color-online:#55BD46;--color-favorite:#DBAF00;--color-button-primary-border-activated:transparent;--color-button-plain-inverted-activated-text:var(--color-neutral-background);--color-shimmer-background:#ffffff08;--color-shimmer-gradient-overlay:linear-gradient(to right, #ffffff00, #ffffff05 20%, #ffffff0f 50%, #ffffff08 70%, #ffffff00 100%)}}  .theme-dark .theme-rpl,.theme-dark.theme-rpl{--color-pizzaRed:#c62828;--color-global-brand-orangered:#FF4500;--color-global-focus:#007FAE;--color-interactive-content-disabled:#ffffff40;--color-interactive-background-disabled:#ffffff0d;--color-interactive-pressed:#ffffff29;--color-neutral-content:#B8C5C9;--color-neutral-content-disabled:#303030;--color-neutral-content-weak:#82959B;--color-neutral-content-strong:#F2F4F5;--color-neutral-background:#0B1416;--color-neutral-background-selected:#1A282D;--color-neutral-background-weak:#04090A;--color-neutral-background-medium:#131313;--color-neutral-background-strong:#0F1A1C;--color-neutral-background-hover:#131F23;--color-neutral-border:#ffffff33;--color-neutral-border-medium:#ffffff80;--color-neutral-border-weak:#ffffff1a;--color-neutral-border-strong:#F2F4F5;--color-primary:#629FFF;--color-primary-hover:#A7CCFF;--color-primary-visited:#D55EFF;--color-primary-background:#0045AC;--color-primary-background-hover:#1870F4;--color-primary-background-selected:#629FFF;--color-primary-onBackground:#ffffff;--color-primary-onBackground-selected:#000000;--color-secondary:#F2F4F5;--color-secondary-hover:#ffffff;--color-secondary-weak:#82959B;--color-secondary-onBackground:#ffffff;--color-secondary-background:#1A282D;--color-secondary-background-hover:#223237;--color-secondary-background-selected:#33464C;--color-secondary-plain:#F2F4F5;--color-secondary-plain-hover:#ffffff;--color-danger-background:#A50016;--color-danger-background-disabled:#3A0008;--color-danger-background-hover:#EB001F;--color-danger-onBackground:#ffffff;--color-danger-content:#FF6E80;--color-danger-content-hover:#FFADB8;--color-success-content:#55BD46;--color-success-hover:#A3E398;--color-success-onBackground:#ffffff;--color-success-background:#0A6000;--color-success-background-hover:#0E8A00;--color-warning-content:#DBAF00;--color-warning-content-hover:#FADB61;--color-warning-onBackground:#000000;--color-warning-background:#DBAF00;--color-warning-background-hover:#FADB61;--color-upvote-content:#FE7C53;--color-upvote-content-weak:var(--color-global-brand-orangered);--color-upvote-disabled:#FE7C534d;--color-upvote-onBackground:#ffffff;--color-upvote-background:#D93A00;--color-upvote-background-hover:#962900;--color-upvote-background-disabled:#D93A004d;--color-downvote-content:#988EFF;--color-downvote-content-weak:#6A5CFF;--color-downvote-disabled:#988EFF4d;--color-downvote-onBackground:#ffffff;--color-downvote-background:#453BB5;--color-downvote-background-hover:#453BB5;--color-downvote-background-disabled:#6A5CFF4d;--color-tone-1:#F2F2F2;--color-tone-2:#ACACAC;--color-tone-3:#434343;--color-tone-4:#303030;--color-tone-5:#1E1E1E;--color-tone-6:#131313;--color-tone-7:#080808;--color-ui-canvas:#080808;--color-ui-modalbackground:var(--color-neutral-background-strong);--color-avatar-gradient:linear-gradient(0deg, #2A3C42ff, #0B1416ff 75%);--color-transparent-background-hover:#667A801a;--color-opacity-50:#F2F2F280;--color-online:#55BD46;--color-favorite:#DBAF00;--color-button-primary-border-activated:transparent;--color-button-plain-inverted-activated-text:var(--color-neutral-background);--color-shimmer-background:#ffffff08;--color-shimmer-gradient-overlay:linear-gradient(to right, #ffffff00, #ffffff05 20%, #ffffff0f 50%, #ffffff08 70%, #ffffff00 100%)}  :root{font-family:var(--font-sans);font-size:16px}  .theme-dark,.theme-light,:root{background:var(--color-tone-7);color:var(--color-tone-1)}  body{font-size:var(--font-body)}  :not(:defined):not(faceplate-auto-height-animator,faceplate-dropdown-menu,faceplate-expandable-section-helper,faceplate-hovercard){visibility:hidden}  faceplate-hovercard:not(:defined)>[slot=content]{display:none}  faceplate-banner [slot=closeButton]{margin-left:var(--spacer-sm)}  faceplate-banner [slot=actionButtons] button:first-of-type{margin-right:var(--spacer-xs)}  faceplate-banner[appearance=caution] button{color:var(--color-banner-caution-text)}  faceplate-banner[appearance=caution] button:hover{background-color:var(--color-banner-caution-hover)}  .button-favorite{--button-color-background-focus:transparent;--button-color-background-hover:var(--color-button-plain-background-hover);--button-color-background-disabled:var(--color-button-plain-background-disabled);--button-color-background-activated:var(--color-button-plain-background-activated);--button-color-background-active:linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover));--button-color-text-default:var(--color-button-plain-text);--button-color-text-disabled:var(--color-button-plain-text-disabled);--button-color-text-activated:var(--color-button-plain-text-activated);--button-color-text-hover:var(--color-button-plain-text-hover);--button-border-color-default:transparent;--button-color-text-default:var(--color-neutral-content-weak);--button-color-background-default:transparent;--button-color-text-hover:var(--color-secondary-onBackground)}  .button-favorite-toggled{--button-color-background-focus:transparent;--button-color-background-hover:var(--color-button-plain-background-hover);--button-color-background-disabled:var(--color-button-plain-background-disabled);--button-color-background-activated:var(--color-button-plain-background-activated);--button-color-background-active:linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover));--button-color-text-default:var(--color-button-plain-text);--button-color-text-disabled:var(--color-button-plain-text-disabled);--button-color-text-activated:var(--color-button-plain-text-activated);--button-color-text-hover:var(--color-button-plain-text-hover);--button-border-color-default:transparent;--button-color-background-default:transparent;--button-color-text-default:var(--color-button-favorite-text);--button-color-text-hover:var(--color-button-favorite-text)}  .button-secondary-toggled{--button-color-background-default:var(--color-button-secondary-background);--button-color-background-focus:var(--color-button-secondary-background-focus);--button-color-background-hover:var(--color-button-secondary-background-hover);--button-color-background-active:linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover));--button-color-background-disabled:var(--color-button-secondary-background-disabled);--button-color-background-activated:var(--color-button-secondary-background-activated);--button-color-text-default:var(--color-button-secondary-text);--button-color-text-disabled:var(--color-button-secondary-text-disabled);--button-color-text-activated:var(--color-button-secondary-text-activated);--button-border-color-default:var(--color-button-secondary-border);--button-color-background-default:var(--color-button-secondary-background-activated)}  .button-caution{--button-color-background-default:var(--color-button-caution-background);--button-color-background-hover:var(--color-button-caution-background-hover);--button-color-background-disabled:var(--color-button-caution-background-disabled);--button-color-text-default:var(--color-caution-text)}  button[upvote]:not(:disabled):focus-visible .upvote-hover,button[upvote]:not(:disabled):hover .upvote-hover{display:inline-flex}  button[downvote]:not(:disabled):focus-visible .downvote-hover,button[downvote]:not(:disabled):hover .downvote-hover{display:inline-flex}  button[upvote][aria-pressed=true]:not(:disabled):focus-visible .upvote-hover,button[upvote][aria-pressed=true]:not(:disabled):hover .upvote-hover{display:none}  button[upvote][aria-pressed=false]:not(:disabled):focus-visible .upvote-indicator,button[upvote][aria-pressed=false]:not(:disabled):hover .upvote-indicator{display:none}  button[downvote][aria-pressed=true]:not(:disabled):focus-visible .downvote-hover,button[downvote][aria-pressed=true]:not(:disabled):hover .downvote-hover{display:none}  button[downvote][aria-pressed=false]:not(:disabled):focus-visible .downvote-indicator,button[downvote][aria-pressed=false]:not(:disabled):hover .downvote-indicator{display:none}  faceplate-dropdown-menu:not(.connected) [slot=menu]{display:none}  faceplate-expandable-section-helper{display:contents}  faceplate-expandable-section-helper>details>summary{list-style-type:none}  faceplate-expandable-section-helper>details>summary::-webkit-details-marker,faceplate-expandable-section-helper>details>summary::marker{display:none}  faceplate-expandable-section-helper[rpl]>details>summary{margin:0}  faceplate-expandable-section-helper>details>summary [icon-name=caret-down-outline]{transition:transform .22s ease-in-out}  faceplate-expandable-section-helper:not(:defined)>details[open] summary [icon-name=caret-down-outline],faceplate-expandable-section-helper[open] summary [icon-name=caret-down-outline]{transform:rotate(180deg)}  faceplate-expandable-section-helper:not(:defined)>details:not([open]) summary [icon-name=caret-down-outline],faceplate-expandable-section-helper:not([open]) summary [icon-name=caret-down-outline]{transform:rotate(0)}  address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,menu,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,textarea,ul,video{margin-bottom:1rem}  button,html,input,select{font-family:var(--font-sans)}  body{--faceplate-body-padding:1.5rem;margin:0 auto;padding:var(--faceplate-body-padding);overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;line-height:1.5}  @media (max-width:599px){body{--faceplate-body-padding:1rem}}  ::-moz-selection{background:var(--color-primary-background);color:var(--color-tone-7)}  ::selection{background:var(--color-primary-background);color:var(--color-tone-7)}  h1,h2,h3,h4,h5,h6{margin:1em 0 .5em}  h1{font:var(--font-title-h1)}  h2{font:var(--font-title-h2)}  h3{font:var(--font-title-h3)}  h4{font:var(--font-title-h4)}  h5{font:var(--font-title-h5)}  h6{font:var(--font-title-h6)}  label{text-transform:var(--misc-label-text-transform);letter-spacing:var(--misc-label-letter-spacing);font:var(--font-label-default);color:var(--color-label-default)}  label>input,label>textarea{margin-top:var(--spacer-label-default)}  faceplate-switch-input+label,input[type=checkbox]+label,input[type=radio]+label{font-size:inherit;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;vertical-align:middle}  a{color:var(--color-primary-background-hover);text-decoration:none}  a:hover{text-decoration:underline}  abbr:hover{cursor:help}  blockquote{padding:1.5rem;background:var(--color-tone-6);border-left:5px solid var(--color-tone-5)}  abbr{cursor:help}  blockquote :last-child{padding-bottom:0;margin-bottom:0}  header{padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);margin-left:calc(0px - (50vw - 50%));margin-right:calc(0px - (50vw - 50%));padding-top:var(--faceplate-body-padding);padding-bottom:var(--faceplate-body-padding);margin-top:calc(-1 * var(--faceplate-body-padding));margin-bottom:var(--faceplate-body-padding);background:var(--color-tone-6)}  article header,aside header,dialog header,faceplate-dialog header,main header,section header{padding:.5rem 0;margin:1rem 0;background:0 0}  article header h1,aside header h1,dialog header h1,faceplate-dialog header h1,main header h1,section header h1{font:var(--font-title-h1)}  header h1{font:var(--font-title-h0)}  header>:first-child{margin-top:0}  header>:last-child{margin-bottom:0}  :where(button),:where(input):where([type=submit],[type=reset],[type=button]){background:var(--button-color-background);border-radius:999px;border:none;border:var(--button-border-width,0) solid var(--button-border-color,transparent);box-shadow:var(--button-shadow);box-sizing:border-box;color:var(--button-color-text);cursor:pointer;display:inline-block;font:var(--button-font);height:var(--button-height);line-height:calc(var(--button-height) - (2 * var(--button-border-width,0px)));overflow:hidden;padding:0 calc(var(--button-padding) - var(--button-border-width,0px));text-align:center;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;--button-border-color:var(--button-border-color-default);--button-border-width:var(--button-border-width-default);--button-color-background:var(--button-color-background-default);--button-color-text:var(--button-color-text-default);--button-height:var(--size-button-sm-h);--button-padding:var(--spacer-2xs);--button-font:var(--font-button-sm);--button-border-width-default:var(--line-button-sm-border);--button-color-background-default:var(--color-button-secondary-background);--button-color-background-focus:var(--color-button-secondary-background-focus);--button-color-background-hover:var(--color-button-secondary-background-hover);--button-color-background-active:linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover));--button-color-background-disabled:var(--color-button-secondary-background-disabled);--button-color-background-activated:var(--color-button-secondary-background-activated);--button-color-text-default:var(--color-button-secondary-text);--button-color-text-disabled:var(--color-button-secondary-text-disabled);--button-color-text-activated:var(--color-button-secondary-text-activated);--button-border-color-default:var(--color-button-secondary-border)}  :where(button) .button-icon,:where(input):where([type=submit],[type=reset],[type=button]) .button-icon{margin-right:var(--spacer-xs)}  :where(button) .dropdown-icon,:where(input):where([type=submit],[type=reset],[type=button]) .dropdown-icon{transform:rotate(0);transition:transform .2s ease-in-out}  :where(button).hover,:where(button):focus,:where(button):hover,:where(input):where([type=submit],[type=reset],[type=button]).hover,:where(input):where([type=submit],[type=reset],[type=button]):focus,:where(input):where([type=submit],[type=reset],[type=button]):hover{--button-color-overlay:var(--color-button-overlay-focus)}  :where(button).hover,:where(button):hover,:where(input):where([type=submit],[type=reset],[type=button]).hover,:where(input):where([type=submit],[type=reset],[type=button]):hover{--button-border-color:var(--button-border-color-hover);--button-color-background:var(--button-color-background-hover);--button-color-text:var(--button-color-text-hover, var(--button-color-text-default))}  :where(button).active,:where(button):active,:where(input):where([type=submit],[type=reset],[type=button]).active,:where(input):where([type=submit],[type=reset],[type=button]):active{--button-color-overlay:var(--color-button-overlay-active);--button-color-background:linear-gradient(var(--color-interactive-pressed), var(--color-interactive-pressed)),var(--button-color-background-active)}  :where(button).anchor-disabled,:where(button):disabled,:where(input):where([type=submit],[type=reset],[type=button]).anchor-disabled,:where(input):where([type=submit],[type=reset],[type=button]):disabled{--button-border-color-hover:var(--button-border-color-default);--button-color-background:var(--button-color-background-disabled);--button-color-text:var(--button-color-text-disabled);cursor:not-allowed;pointer-events:none}  :where(button).button-activated,:where(input):where([type=submit],[type=reset],[type=button]).button-activated{--button-border-color:var(--button-border-color-activated);--button-color-background:var(--button-color-background-activated);--button-color-text:var(--button-color-text-activated)}  :where(button).icon,:where(input):where([type=submit],[type=reset],[type=button]).icon{padding:calc(var(--rem6) + var(--rem1))}  small :where(button),small :where(input):where([type=submit],[type=reset],[type=button]){--button-height:var(--size-button-xs-h);--button-padding:var(--spacer-sm);--button-font:var(--font-button-xs);--button-border-width-default:var(--line-button-xs-border)}  :where(button).button-large,:where(input):where([type=submit],[type=reset],[type=button]).button-large{--button-height:var(--size-button-lg-h);--button-padding:var(--spacer-xs);--button-font:var(--font-button-lg);--button-border-width-default:var(--line-button-lg-border)}  :where(button).button-large.icon,:where(input):where([type=submit],[type=reset],[type=button]).button-large.icon{padding:calc(var(--rem12) + var(--rem1))}  :where(button).button-primary,:where(input):where([type=submit],[type=reset],[type=button]).button-primary{--button-color-background-default:var(--color-primary-background);--button-color-background-focus:var(--color-primary-background);--button-color-background-hover:var(--color-button-primary-background-hover);--button-color-background-active:linear-gradient(var(--color-button-primary-background-hover), var(--color-button-primary-background-hover));--button-color-background-disabled:var(--color-button-primary-background-disabled);--button-color-background-activated:var(--color-button-primary-background-activated);--button-color-text-default:var(--color-global-white);--button-color-text-disabled:var(--color-button-primary-text-disabled);--button-color-text-activated:var(--color-button-primary-text-activated);--button-border-color-default:transparent}  :where(button).button-plain,:where(input):where([type=submit],[type=reset],[type=button]).button-plain{--button-color-background-default:transparent;--button-color-background-focus:transparent;--button-color-background-hover:var(--color-button-plain-background-hover);--button-color-background-disabled:var(--color-button-plain-background-disabled);--button-color-background-activated:var(--color-button-plain-background-activated);--button-color-background-active:linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover));--button-color-text-default:var(--color-button-plain-text);--button-color-text-disabled:var(--color-button-plain-text-disabled);--button-color-text-activated:var(--color-button-plain-text-activated);--button-color-text-hover:var(--color-button-plain-text-hover);--button-border-color-default:transparent}  :where(button).button-icon-only,:where(input):where([type=submit],[type=reset],[type=button]).button-icon-only{--button-padding:0;width:var(--button-height)}  :root{--button-color-background-default:var(--color-button-secondary-background);--button-color-background-focus:var(--color-button-secondary-background-focus);--button-color-background-hover:var(--color-button-secondary-background-hover);--button-color-background-active:linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover));--button-color-background-disabled:var(--color-button-secondary-background-disabled);--button-color-background-activated:var(--color-button-secondary-background-activated);--button-color-text-default:var(--color-button-secondary-text);--button-color-text-disabled:var(--color-button-secondary-text-disabled);--button-color-text-activated:var(--color-button-secondary-text-activated);--button-border-color-default:var(--color-button-secondary-border)}  :where(button,input):where([type=submit]){--button-color-background-default:var(--color-primary-background);--button-color-background-focus:var(--color-primary-background);--button-color-background-hover:var(--color-button-primary-background-hover);--button-color-background-active:linear-gradient(var(--color-button-primary-background-hover), var(--color-button-primary-background-hover));--button-color-background-disabled:var(--color-button-primary-background-disabled);--button-color-background-activated:var(--color-button-primary-background-activated);--button-color-text-default:var(--color-global-white);--button-color-text-disabled:var(--color-button-primary-text-disabled);--button-color-text-activated:var(--color-button-primary-text-activated);--button-border-color-default:transparent}  faceplate-tablist button{border-radius:0}  faceplate-tablist button:first-child{border-radius:999px 0 0 999px}  faceplate-tablist button:last-child{border-radius:0 999px 999px 0}  faceplate-tablist a{border-bottom:2px solid var(--button-color-primary);color:inherit;display:inline-block;font:var(--font-button-b3);padding:.5rem 1rem .375rem}  faceplate-tablist a:hover{text-decoration:none}  code,kbd,pre,samp{font-size:var(--font-code);font-family:var(--font-mono);background:var(--color-tone-6);border:1px solid var(--color-tone-5);border-radius:4px;padding:2px 4px;font-size:.9em}  pre{background:var(--color-tone-5);border-color:var(--color-tone-4);padding:1rem 1.4rem;max-width:100%;overflow:auto}  kbd{border-bottom-width:3px}  pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}  code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}  details{padding:.5rem 1rem;background:var(--color-tone-6);border:var(--misc-accordion-border);border-radius:var(--radius-accordion-size)}  details summary{cursor:pointer;font-weight:700;list-style-type:var(--misc-accordion-closed-list-style-type)}  details[open] summary{margin-bottom:.375rem;list-style-type:var(--misc-accordion-open-list-style-type)}  details[open] summary icon-caret-down{transform:rotate(180deg);transition:transform .22s ease-in-out}  details summary icon-caret-down{transform:rotate(0);transition:transform .22s ease-in-out}  details[open]>:last-child{margin-bottom:0}  dt{font-weight:700;margin-bottom:.5rem}  dd{-webkit-margin-start:2rem;margin-inline-start:2rem}  hr{border:0;border-bottom:1px solid var(--color-divider-default);background-color:transparent;margin:var(--misc-divider-margin)}  hr[padding=\'2xs\']{padding:var(--spacer-2xs)}  hr[padding=xs]{padding:var(--spacer-xs)}  hr[padding=sm]{padding:var(--spacer-sm)}  hr[padding=md]{padding:var(--spacer-md)}  hr[color=subdued]{border-bottom-color:var(--color-neutral-border-weak)}  hr[color=inverted]{border-bottom-color:var(--color-neutral-border-strong)}  fieldset{margin-top:1rem;padding:1rem 2rem;border:1px solid var(--color-tone-5);border-radius:.25rem;background:var(--color-tone-7);min-width:0}  legend{padding:0;font-weight:700}  table{border-collapse:collapse;width:100%;word-break:normal;margin-bottom:1rem}  td,th{text-align:left;padding:.5rem}  th{background:var(--color-tone-6)}  tr:nth-child(even){background:var(--color-tone-6)}  table caption{font-weight:700;margin-bottom:.5rem}  textarea{max-width:100%}  ol,ul{padding-left:2rem}  li{margin-top:.25rem}  menu{list-style-type:none;padding-left:0;border-radius:4px;width:-moz-fit-content;width:fit-content;border:1px solid var(--color-tone-5)}  menu li{padding:.5rem .75rem;-webkit-border-after:1px solid var(--color-tone-5);border-block-end:1px solid var(--color-tone-5)}  menu li:last-child{-webkit-border-after:none;border-block-end:none}  menu menu,ol ol,ol ul,ul ol,ul ul{margin-bottom:0}  ins{text-decoration-color:var(--color-success-content);text-decoration-line:overline underline;text-underline-position:under}  del{text-decoration-color:var(--color-danger-content);text-decoration-line:overline underline line-through;text-underline-position:under}  input,select,textarea{font-family:var(--font-sans);color:var(--color-input-text);padding:.5rem .75rem;margin-bottom:.5rem;background:var(--color-input-default);border:var(--color-input-default) solid var(--line-input-border);border-radius:var(--radius-sm);box-shadow:none;box-sizing:border-box;font-size:1rem}  input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}  input:invalid,select:invalid,textarea:invalid{border-color:var(--color-danger-content)}  img{max-width:100%}  input[type=checkbox],input[type=radio]{vertical-align:middle;margin-bottom:0;margin-top:0}  input[type=color],input[type=range]{padding:initial}  input[type=search]{border-radius:400px;-webkit-appearance:textfield}  input{max-width:100%}  dialog{border:0;border-radius:4px;padding:1rem;box-shadow:var(--boxshadow-modal);background:var(--color-ui-modalbackground)}  dialog::backdrop{background:var(--color-scrim)}  .fp-avatar-container img{margin-bottom:0}  /** Text outline classes */  .text-outline-thin-bright {    text-shadow: #000 1px 0 0.5px, #000 -1px 0 0.5px, #000 0 1px 0.5px, #000 0 -1px 0.5px;  }  .text-outline-thick-bright {    text-shadow: #000 1px 0 2px, #000 -1px 0 2px, #000 0 1px 1px, #000 0 -1px 1px, #000 1px 0 2px,      #000 -1px 0 2px, #000 0 1px 1px, #000 0 -1px 1px;  }  .text-outline-thin-dark {    text-shadow: #fff 1px 0 0.5px, #fff -1px 0 0.5px, #fff 0 1px 0.5px, #fff 0 -1px 0.5px;  }  .text-outline-thick-dark {    text-shadow: #fff 1px 0 2px, #fff -1px 0 2px, #fff 0 1px 1px, #fff 0 -1px 1px, #fff 1px 0 2px,      #fff -1px 0 2px, #fff 0 1px 1px, #fff 0 -1px 1px;  }  /** Custom border sizes */  .border-dx-thick {    border-width: 2px;  }  .border-dx-thin {    border-width: 1px;  }  /** Custom border radius sizes */  .rounded-dx-lg {    border-radius: 1.5rem;  }  .rounded-dx-md {    border-radius: 1rem;  }  .rounded-dx-sm {    border-radius: 0.5rem;  }  /** Custom z-index for form dialogs */  .z-dialog {    z-index: 100;  }  .container {    width: 100%;  }  @media (min-width: 1024px) {    .container {      max-width: 1024px;    }  }  /* Anchor component*/  .a {      border: var(--line-a-focus) solid transparent;      border-radius: 2px;      color: var(--color-a-default);      font-size: 1em;      padding: 0 var(--spacer-a-px);      margin: calc(-1 * var(--line-a-focus)) calc(-1 * (var(--spacer-a-px) + var(--line-a-focus)));      text-decoration: none;    }  .a:hover {      color: var(--color-a-hover);    }  .a:visited:not(.no-visited),    .a.visited:not(.no-visited) {      color: var(--color-a-visited);    }  /* Button component */  .button {      background: var(--button-color-background);      border-radius: 999px;      border: none;      border: var(--button-border-width, 0) solid var(--button-border-color, transparent);      box-shadow: var(--button-shadow);      box-sizing: border-box;      color: var(--button-color-text);      cursor: pointer;      display: inline-block;      font: var(--button-font);      height: var(--button-height);      line-height: calc(var(--button-height) - (2 * var(--button-border-width, 0px)));      overflow: hidden;      padding: 0 calc(var(--button-padding) - var(--button-border-width, 0px));      text-align: center;      text-decoration: none;      text-overflow: ellipsis;      white-space: nowrap;      --button-border-color: var(--button-border-color-default);      --button-border-width: var(--button-border-width-default);      --button-color-background: var(--button-color-background-default);      --button-color-text: var(--button-color-text-default);      /* This is :active, AKA Pressed */      /* This is Selected */    }  .button .button-icon {      margin-right: var(--spacer-xs);    }  .button .dropdown-icon {      transform: rotate(0deg);      transition: transform 0.2s ease-in-out;    }  .button:focus,    .button:hover,    .button.hover {      --button-color-overlay: var(--color-button-overlay-focus);    }  .button:hover,    .button.hover {      --button-border-color: var(--button-border-color-hover);      --button-color-background: var(--button-color-background-hover);      --button-color-text: var(--button-color-text-hover, var(--button-color-text-default));    }  .button:active,    .button.active {      --button-color-overlay: var(--color-button-overlay-active);      --button-color-background: linear-gradient(var(--color-interactive-pressed), var(--color-interactive-pressed)),        var(--button-color-background-active);    }  .button:disabled,    .button.anchor-disabled {      --button-border-color-hover: var(--button-border-color-default);      --button-color-background: var(--button-color-background-disabled);      --button-color-text: var(--button-color-text-disabled);      cursor: not-allowed;      pointer-events: none;    }  .button.button-activated {      --button-border-color: var(--button-border-color-activated);      --button-color-background: var(--button-color-background-activated);      --button-color-text: var(--button-color-text-activated);    }  .button-shell {      background: var(--button-color-background);      border-radius: 999px;      border: none;      border: var(--button-border-width, 0) solid var(--button-border-color, transparent);      box-shadow: var(--button-shadow);      box-sizing: border-box;      color: var(--button-color-text);      cursor: pointer;      display: inline-block;      font: var(--button-font);      height: var(--button-height);      line-height: calc(var(--button-height) - (2 * var(--button-border-width, 0px)));      overflow: hidden;      padding: 0 calc(var(--button-padding) - var(--button-border-width, 0px));      text-align: center;      text-decoration: none;      text-overflow: ellipsis;      white-space: nowrap;      --button-border-color: var(--button-border-color-default);      --button-border-width: var(--button-border-width-default);      --button-color-background: var(--button-color-background-default);      --button-color-text: var(--button-color-text-default);    }  .button-large {      --button-height: var(--size-button-lg-h);      --button-padding: var(--spacer-xs);      --button-font: var(--font-button-lg);      --button-border-width-default: var(--line-button-lg-border);    }  .button-large.icon {      padding: calc(var(--rem12) + var(--rem1));    }  .button-medium {      --button-height: var(--size-button-md-h);      --button-padding: var(--spacer-xs);      --button-font: var(--font-button-md);      --button-border-width-default: var(--line-button-md-border);    }  .button-medium.icon {      padding: calc(var(--rem8) + var(--rem1));    }  .button-small {      --button-height: var(--size-button-sm-h);      --button-padding: var(--spacer-2xs);      --button-font: var(--font-button-sm);      --button-border-width-default: var(--line-button-sm-border);    }  .button-small.icon {      padding: calc(var(--rem6) + var(--rem1));    }  .button-primary {      --button-color-background-default: var(--color-primary-background);      --button-color-background-focus: var(--color-primary-background);      --button-color-background-hover: var(--color-button-primary-background-hover);      --button-color-background-active: linear-gradient(var(--color-button-primary-background-hover), var(--color-button-primary-background-hover));      --button-color-background-disabled: var(--color-button-primary-background-disabled);      --button-color-background-activated: var(--color-button-primary-background-activated);      --button-color-text-default: var(--color-global-white);      --button-color-text-disabled: var(--color-button-primary-text-disabled);      --button-color-text-activated: var(--color-button-primary-text-activated);      --button-border-color-default: transparent;    }  .button-secondary {      --button-color-background-default: var(--color-button-secondary-background);      --button-color-background-focus: var(--color-button-secondary-background-focus);      --button-color-background-hover: var(--color-button-secondary-background-hover);      --button-color-background-active: linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover));      --button-color-background-disabled: var(--color-button-secondary-background-disabled);      --button-color-background-activated: var(--color-button-secondary-background-activated);      --button-color-text-default: var(--color-button-secondary-text);      --button-color-text-disabled: var(--color-button-secondary-text-disabled);      --button-color-text-activated: var(--color-button-secondary-text-activated);      --button-border-color-default: var(--color-button-secondary-border);    }  .button-tertiary {      --button-color-background-default: var(--color-button-tertiary-background);      --button-color-background-focus: var(--color-button-tertiary-background-focus);      --button-color-background-hover: var(--color-button-tertiary-background-hover);      --button-color-background-disabled: var(--color-button-tertiary-background-disabled);      --button-color-background-activated: var(--color-button-tertiary-background-activated);      --button-color-text-default: var(--color-button-tertiary-text);      --button-color-text-disabled: var(--color-button-tertiary-text-disabled);      --button-color-text-activated: var(--color-button-tertiary-text-activated);      --button-border-color-default: transparent;    }  .button-plain {      --button-color-background-default: transparent;      --button-color-background-focus: transparent;      --button-color-background-hover: var(--color-button-plain-background-hover);      --button-color-background-disabled: var(--color-button-plain-background-disabled);      --button-color-background-activated: var(--color-button-plain-background-activated);      --button-color-background-active: linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover));      --button-color-text-default: var(--color-button-plain-text);      --button-color-text-disabled: var(--color-button-plain-text-disabled);      --button-color-text-activated: var(--color-button-plain-text-activated);      --button-color-text-hover: var(--color-button-plain-text-hover);      --button-border-color-default: transparent;    }  .button-bordered {      --button-color-background-default: transparent;      --button-color-background-focus: transparent;      --button-color-background-hover: transparent;      --button-color-background-active: linear-gradient(transparent, transparent);      --button-color-background-disabled: transparent;      --button-color-background-activated: var(--color-button-secondary-background-activated);      --button-color-text-default: var(--color-secondary-plain);      --button-color-text-disabled: var(--color-neutral-content-disabled);      --button-color-text-activated: var(--color-neutral-content-strong);      --button-color-text-hover: var(--color-secondary-plain-hover);      --button-border-color-default: var(--color-neutral-border-medium);      --button-border-color-hover: var(--color-neutral-border-strong);      --button-border-color-active: var(--color-neutral-border-strong);      --button-border-color-activated: var(--color-neutral-border-strong);      --button-border-color-disabled: var(--color-neutral-content-disabled);      --button-border-width-default: var(--line-sm);      --button-border-width-activated: var(--line-sm);    }  .button-destructive {      --button-color-background-default: var(--color-danger-background);      --button-color-background-focus: var(--color-danger-background-hover);      --button-color-background-hover: var(--color-danger-background-hover);      --button-color-background-active: linear-gradient(var(--color-danger-background-hover), var(--color-danger-background-hover));      --button-color-background-disabled: var(--color-button-secondary-background-disabled);      --button-color-text-default: var(--color-danger-content-default);      --button-color-text-disabled: var(--color-button-secondary-text-disabled);      --button-border-color-default: transparent;      --button-border-color-hover: transparent;      --button-border-color-active: transparent;    }  .button-media {      --button-color-background-default: var(--color-media-background);      --button-color-background-focus: var(--color-media-background-hover);      --button-color-background-hover: var(--color-media-background-hover);      --button-color-background-active: linear-gradient(var(--color-media-background-hover), var(--color-media-background-hover));      --button-border-color-activated: var(--color-neutral-content-strong);      --button-color-text-default: white;      --button-color-text-disabled: var(--color-media-onbackground-disabled);      --button-color-background-disabled: var(--color-media-background);    }  .button-brand {      --button-color-background-default: var(--color-brand-background);      --button-color-background-hover: var(--color-brand-background-hover);      --button-color-background-active: linear-gradient(var(--color-brand-background-hover), var(--color-brand-background-hover));      --button-color-background-disabled: var(--color-interactive-background-disabled);      --button-color-text-default: var(--color-danger-content-default);      --button-color-text-disabled: var(--color-neutral-content-disabled);      --button-border-color-default: transparent;    }  .button-success {      --button-color-background-default: var(--color-success-background);      --button-color-background-focus: var(--color-success-background-hover);      --button-color-background-hover: var(--color-success-background-hover);      --button-color-background-active: linear-gradient(var(--color-success-background-hover), var(--color-success-background-hover));      --button-color-background-disabled: var(--color-button-primary-background-disabled);      --button-color-text-default: var(--color-success-onBackground);      --button-color-text-disabled: var(--color-button-primary-text-disabled);      --button-border-color-default: transparent;    }  .button-plain-inverted {      --button-color-background-default: transparent;      --button-color-background-focus: var(--color-neutral-content);      --button-color-background-hover: var(--color-neutral-content);      --button-color-background-active: var(--color-interactive-pressed);      --button-color-background-disabled: transparent;      --button-color-text-default: var(--color-neutral-background-weak);      --button-color-text-disabled: var(--color-neutral-content);      --button-border-color-default: transparent;      --button-color-background-activated: var(--color-button-plain-inverted-background-activated);      --button-color-text-activated: var(--color-button-plain-inverted-text-activated);    }  /* Featured avatar */  .full-snoo-xs {      --full-snoo-xs-size: var(--rem48);      height: var(--full-snoo-xs-size);      width: var(--full-snoo-xs-size);      margin-top: 0.125rem;    }  .full-snoo-xs > img {      width: var(--rem36);      bottom: calc(-1 * 0.1875rem);    }  .full-snoo-sm {      --full-snoo-sm-size: var(--rem64);      height: var(--full-snoo-sm-size);      width: var(--full-snoo-sm-size);      margin-top: 0.125rem;    }  .full-snoo-sm > img {      width: var(--rem48);      bottom: calc(-1 * var(--rem4));    }  .full-snoo-md {      --full-snoo-md-size: var(--rem88);      height: var(--full-snoo-md-size);      width: var(--full-snoo-md-size);      margin-top: var(--spacer-2xs);    }  .full-snoo-md > img {      width: var(--rem64);      bottom: calc(-1 * var(--rem6));    }  .full-snoo-lg {      --full-snoo-lg-size: var(--rem144);      height: var(--full-snoo-lg-size);      width: var(--full-snoo-lg-size);      margin-top: 0.375rem;    }  .full-snoo-lg > img {      width: 6.625rem;      bottom: calc(-1 * var(--rem10));    }  .full-snoo-xl {      --full-snoo-xl-size: var(--rem192);      height: var(--full-snoo-xl-size);      width: var(--full-snoo-xl-size);      margin-top: var(--spacer-xs);    }  .full-snoo-xl > img {      width: 8.8125rem;      bottom: calc(-1 * var(--rem14));    }  .full-snoo-2xl {      --full-snoo-2xl-size: var(--rem320);      height: var(--full-snoo-2xl-size);      width: var(--full-snoo-2xl-size);      margin-top: var(--spacer-sm);    }  .full-snoo-2xl > img {      width: 14.75rem;      bottom: calc(-1 * var(--rem22));    }  .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;  }  .collapse {    visibility: collapse;  }  .static {    position: static;  }  .fixed {    position: fixed;  }  .absolute {    position: absolute;  }  .relative {    position: relative;  }  .-right-\\[\\.65rem\\] {    right: -.65rem;  }  .-right-\\[\\.75rem\\] {    right: -.75rem;  }  .-right-\\[0\\.0625rem\\] {    right: -0.0625rem;  }  .-right-\\[0\\.0825rem\\] {    right: -0.0825rem;  }  .-right-\\[0\\.125rem\\] {    right: -0.125rem;  }  .bottom-0 {    bottom: 0px;  }  .top-1\\/2 {    top: 50%;  }  .isolate {    isolation: isolate;  }  .z-\\[2\\] {    z-index: 2;  }  .z-\\[3\\] {    z-index: 3;  }  .z-auto {    z-index: auto;  }  .col-start-1 {    grid-column-start: 1;  }  .row-start-1 {    grid-row-start: 1;  }  .m-0 {    margin: 0px;  }  .m-sm {    margin: 0.75rem;  }  .mx-xs {    margin-left: 0.5rem;    margin-right: 0.5rem;  }  .-ml-\\[var\\(--rem10\\)\\] {    margin-left: calc(var(--rem10) * -1);  }  .-ml-\\[var\\(--rem12\\)\\] {    margin-left: calc(var(--rem12) * -1);  }  .-ml-\\[var\\(--rem14\\)\\] {    margin-left: calc(var(--rem14) * -1);  }  .-ml-\\[var\\(--rem16\\)\\] {    margin-left: calc(var(--rem16) * -1);  }  .-ml-\\[var\\(--rem18\\)\\] {    margin-left: calc(var(--rem18) * -1);  }  .-ml-\\[var\\(--rem20\\)\\] {    margin-left: calc(var(--rem20) * -1);  }  .-ml-\\[var\\(--rem4\\)\\] {    margin-left: calc(var(--rem4) * -1);  }  .-ml-\\[var\\(--rem6\\)\\] {    margin-left: calc(var(--rem6) * -1);  }  .-ml-\\[var\\(--rem8\\)\\] {    margin-left: calc(var(--rem8) * -1);  }  .mb-0 {    margin-bottom: 0px;  }  .ml-0 {    margin-left: 0px;  }  .ml-2xs {    margin-left: 0.25rem;  }  .ml-\\[-\\.25rem\\] {    margin-left: -.25rem;  }  .mr-\\[calc\\(var\\(--size-button-sm-h\\)-var\\(--rem10\\)-var\\(--button-border-width-default\\)\\)\\] {    margin-right: calc(var(--size-button-sm-h) - var(--rem10) - var(--button-border-width-default));  }  .mr-\\[length\\:var\\(--rem6\\)\\] {    margin-right: var(--rem6);  }  .mr-xs {    margin-right: 0.5rem;  }  .mt-0 {    margin-top: 0px;  }  .mt-\\[-0\\.125rem\\] {    margin-top: -0.125rem;  }  .mt-\\[-0\\.25rem\\] {    margin-top: -0.25rem;  }  .box-border {    box-sizing: border-box;  }  .\\!block {    display: block !important;  }  .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;  }  .list-item {    display: list-item;  }  .hidden {    display: none;  }  .aspect-square {    aspect-ratio: 1 / 1;  }  .h-100 {    height: 100%;  }  .h-2xl {    height: 3rem;  }  .h-2xs {    height: 0.25rem;  }  .h-\\[\\.25rem\\] {    height: .25rem;  }  .h-\\[\\.375rem\\] {    height: .375rem;  }  .h-\\[\\.625rem\\] {    height: .625rem;  }  .h-\\[1\\.25rem\\] {    height: 1.25rem;  }  .h-\\[1\\.5rem\\] {    height: 1.5rem;  }  .h-\\[1rem\\] {    height: 1rem;  }  .h-\\[2\\.5rem\\] {    height: 2.5rem;  }  .h-\\[2\\.87rem\\] {    height: 2.87rem;  }  .h-\\[2rem\\] {    height: 2rem;  }  .h-\\[3\\.25rem\\] {    height: 3.25rem;  }  .h-\\[3\\.5rem\\] {    height: 3.5rem;  }  .h-\\[3rem\\] {    height: 3rem;  }  .h-\\[4\\.5rem\\] {    height: 4.5rem;  }  .h-\\[4rem\\] {    height: 4rem;  }  .h-\\[5\\.5rem\\] {    height: 5.5rem;  }  .h-lg {    height: 1.5rem;  }  .h-md {    height: 1rem;  }  .h-px {    height: 1px;  }  .h-sm {    height: 0.75rem;  }  .h-xl {    height: 2rem;  }  .h-xs {    height: 0.5rem;  }  .min-h-\\[1rem\\] {    min-height: 1rem;  }  .w-100 {    width: 100%;  }  .w-2xl {    width: 3rem;  }  .w-2xs {    width: 0.25rem;  }  .w-3xl {    width: 4rem;  }  .w-\\[\\.25rem\\] {    width: .25rem;  }  .w-\\[\\.375rem\\] {    width: .375rem;  }  .w-\\[\\.625rem\\] {    width: .625rem;  }  .w-\\[1\\.25rem\\] {    width: 1.25rem;  }  .w-\\[1\\.5rem\\] {    width: 1.5rem;  }  .w-\\[12rem\\] {    width: 12rem;  }  .w-\\[1rem\\] {    width: 1rem;  }  .w-\\[2\\.5rem\\] {    width: 2.5rem;  }  .w-\\[2\\.87rem\\] {    width: 2.87rem;  }  .w-\\[20rem\\] {    width: 20rem;  }  .w-\\[2rem\\] {    width: 2rem;  }  .w-\\[3\\.25rem\\] {    width: 3.25rem;  }  .w-\\[3\\.5rem\\] {    width: 3.5rem;  }  .w-\\[32rem\\] {    width: 32rem;  }  .w-\\[3rem\\] {    width: 3rem;  }  .w-\\[4\\.5rem\\] {    width: 4.5rem;  }  .w-\\[4rem\\] {    width: 4rem;  }  .w-\\[5\\.5rem\\] {    width: 5.5rem;  }  .w-\\[9rem\\] {    width: 9rem;  }  .w-full {    width: 100%;  }  .w-lg {    width: 1.5rem;  }  .w-md {    width: 1rem;  }  .w-px {    width: 1px;  }  .w-sm {    width: 0.75rem;  }  .w-xl {    width: 2rem;  }  .w-xs {    width: 0.5rem;  }  .min-w-0 {    min-width: 0px;  }  .min-w-\\[0\\.5rem\\] {    min-width: 0.5rem;  }  .max-w-\\[480px\\] {    max-width: 480px;  }  .max-w-full {    max-width: 100%;  }  .flex-shrink {    flex-shrink: 1;  }  .shrink {    flex-shrink: 1;  }  .shrink-0 {    flex-shrink: 0;  }  .flex-grow {    flex-grow: 1;  }  .grow {    flex-grow: 1;  }  .basis-full {    flex-basis: 100%;  }  .-scale-x-100 {    --tw-scale-x: -1;    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));  }  .scale-x-100 {    --tw-scale-x: 1;    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));  }  .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));  }  .cursor-default {    cursor: default;  }  .cursor-none {    cursor: none;  }  .cursor-pointer {    cursor: pointer;  }  .select-none {    -webkit-user-select: none;       -moz-user-select: none;            user-select: none;  }  .select-text {    -webkit-user-select: text;       -moz-user-select: text;            user-select: text;  }  .select-auto {    -webkit-user-select: auto;       -moz-user-select: auto;            user-select: auto;  }  .resize {    resize: both;  }  .list-none {    list-style-type: none;  }  .grid-cols-1 {    grid-template-columns: repeat(1, minmax(0, 1fr));  }  .flex-row {    flex-direction: row;  }  .flex-row-reverse {    flex-direction: row-reverse;  }  .flex-col {    flex-direction: column;  }  .flex-col-reverse {    flex-direction: column-reverse;  }  .flex-wrap {    flex-wrap: wrap;  }  .items-start {    align-items: flex-start;  }  .items-end {    align-items: flex-end;  }  .items-center {    align-items: center;  }  .items-stretch {    align-items: stretch;  }  .justify-start {    justify-content: flex-start;  }  .justify-end {    justify-content: flex-end;  }  .justify-center {    justify-content: center;  }  .justify-between {    justify-content: space-between;  }  .justify-stretch {    justify-content: stretch;  }  .justify-items-start {    justify-items: start;  }  .justify-items-end {    justify-items: end;  }  .justify-items-center {    justify-items: center;  }  .gap-0 {    gap: 0px;  }  .gap-2xs {    gap: 0.25rem;  }  .gap-\\[0\\.5rem\\] {    gap: 0.5rem;  }  .gap-md {    gap: 1rem;  }  .gap-xl {    gap: 2rem;  }  .gap-xs {    gap: 0.5rem;  }  .gap-y-sm {    row-gap: 0.75rem;  }  .gap-y-xs {    row-gap: 0.5rem;  }  .space-x-xs > :not([hidden]) ~ :not([hidden]) {    --tw-space-x-reverse: 0;    margin-right: calc(0.5rem * var(--tw-space-x-reverse));    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));  }  .overflow-auto {    overflow: auto;  }  .overflow-hidden {    overflow: hidden;  }  .overflow-visible {    overflow: visible;  }  .truncate {    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;  }  .text-ellipsis {    text-overflow: ellipsis;  }  .rounded-\\[\\.5rem\\] {    border-radius: .5rem;  }  .rounded-full {    border-radius: 624.9375rem;  }  .rounded-none {    border-radius: 0rem;  }  .rounded-sm {    border-radius: 0.25rem;  }  .border {    border-width: 0.0625rem;  }  .border-0 {    border-width: 0rem;  }  .border-lg {    border-width: 0.25rem;  }  .border-md {    border-width: 0.125rem;  }  .border-b {    border-bottom-width: 0.0625rem;  }  .border-solid {    border-style: solid;  }  .border-none {    border-style: none;  }  .border-action-downvote {    border-color: var(--color-action-downvote);  }  .border-action-upvote {    border-color: var(--color-action-upvote);  }  .border-neutral-background {    border-color: var(--color-neutral-background);  }  .border-neutral-border {    border-color: var(--color-neutral-border);  }  .border-secondary-background-selected {    border-color: var(--color-secondary-background-selected);  }  .border-tone-4 {    border-color: var(--color-tone-4);  }  .border-transparent {    border-color: transparent;  }  .bg-\\[color\\:var\\(--button-color-background-default\\)\\] {    background-color: var(--button-color-background-default);  }  .bg-\\[color\\:var\\(--color-button-plain-background-disabled\\)\\] {    background-color: var(--color-button-plain-background-disabled);  }  .bg-action-downvote {    background-color: var(--color-action-downvote);  }  .bg-action-upvote {    background-color: var(--color-action-upvote);  }  .bg-brand-background {    background-color: var(--color-brand-background);  }  .bg-brand-onBackground {    background-color: var(--color-brand-onBackground);  }  .bg-danger-content {    background-color: var(--color-danger-content);  }  .bg-global-orangered {    background-color: var(--color-global-orangered);  }  .bg-interactive-background-disabled {    background-color: var(--color-interactive-background-disabled);  }  .bg-neutral-background {    background-color: var(--color-neutral-background);  }  .bg-neutral-background-selected {    background-color: var(--color-neutral-background-selected);  }  .bg-neutral-background-strong {    background-color: var(--color-neutral-background-strong);  }  .bg-neutral-content {    background-color: var(--color-neutral-content);  }  .bg-neutral-content-disabled {    background-color: var(--color-neutral-content-disabled);  }  .bg-online {    background-color: var(--color-online);  }  .bg-secondary-background-selected {    background-color: var(--color-secondary-background-selected);  }  .bg-success-content {    background-color: var(--color-success-content);  }  .bg-transparent {    background-color: transparent;  }  .bg-warning-content {    background-color: var(--color-warning-content);  }  .object-contain {    -o-object-fit: contain;       object-fit: contain;  }  .object-cover {    -o-object-fit: cover;       object-fit: cover;  }  .object-fill {    -o-object-fit: fill;       object-fit: fill;  }  .object-none {    -o-object-fit: none;       object-fit: none;  }  .object-scale-down {    -o-object-fit: scale-down;       object-fit: scale-down;  }  .p-0 {    padding: 0px;  }  .p-2xs {    padding: 0.25rem;  }  .p-md {    padding: 1rem;  }  .p-xl {    padding: 2rem;  }  .p-xs {    padding: 0.5rem;  }  .px-2xs {    padding-left: 0.25rem;    padding-right: 0.25rem;  }  .px-\\[0\\.375rem\\] {    padding-left: 0.375rem;    padding-right: 0.375rem;  }  .px-\\[length\\:var\\(--rem10\\)\\] {    padding-left: var(--rem10);    padding-right: var(--rem10);  }  .px-\\[length\\:var\\(--rem12\\)\\] {    padding-left: var(--rem12);    padding-right: var(--rem12);  }  .px-\\[length\\:var\\(--rem14\\)\\] {    padding-left: var(--rem14);    padding-right: var(--rem14);  }  .px-\\[length\\:var\\(--rem6\\)\\] {    padding-left: var(--rem6);    padding-right: var(--rem6);  }  .px-\\[length\\:var\\(--rem8\\)\\] {    padding-left: var(--rem8);    padding-right: var(--rem8);  }  .px-md {    padding-left: 1rem;    padding-right: 1rem;  }  .px-sm {    padding-left: 0.75rem;    padding-right: 0.75rem;  }  .px-xs {    padding-left: 0.5rem;    padding-right: 0.5rem;  }  .py-2xs {    padding-top: 0.25rem;    padding-bottom: 0.25rem;  }  .py-\\[0\\.125rem\\] {    padding-top: 0.125rem;    padding-bottom: 0.125rem;  }  .py-\\[length\\:var\\(--rem10\\)\\] {    padding-top: var(--rem10);    padding-bottom: var(--rem10);  }  .py-\\[length\\:var\\(--rem14\\)\\] {    padding-top: var(--rem14);    padding-bottom: var(--rem14);  }  .py-\\[length\\:var\\(--rem6\\)\\] {    padding-top: var(--rem6);    padding-bottom: var(--rem6);  }  .py-\\[length\\:var\\(--rem8\\)\\] {    padding-top: var(--rem8);    padding-bottom: var(--rem8);  }  .py-sm {    padding-top: 0.75rem;    padding-bottom: 0.75rem;  }  .py-xs {    padding-top: 0.5rem;    padding-bottom: 0.5rem;  }  .pb-md {    padding-bottom: 1rem;  }  .pl-\\[length\\:var\\(--rem10\\)\\] {    padding-left: var(--rem10);  }  .pl-\\[length\\:var\\(--rem12\\)\\] {    padding-left: var(--rem12);  }  .pl-\\[length\\:var\\(--rem14\\)\\] {    padding-left: var(--rem14);  }  .pl-\\[length\\:var\\(--rem16\\)\\] {    padding-left: var(--rem16);  }  .pl-md {    padding-left: 1rem;  }  .pr-\\[length\\:var\\(--rem10\\)\\] {    padding-right: var(--rem10);  }  .pr-\\[length\\:var\\(--rem12\\)\\] {    padding-right: var(--rem12);  }  .pr-\\[length\\:var\\(--rem14\\)\\] {    padding-right: var(--rem14);  }  .pr-\\[length\\:var\\(--rem16\\)\\] {    padding-right: var(--rem16);  }  .pr-\\[length\\:var\\(--rem6\\)\\] {    padding-right: var(--rem6);  }  .pr-\\[length\\:var\\(--rem8\\)\\] {    padding-right: var(--rem8);  }  .pr-md {    padding-right: 1rem;  }  .pt-md {    padding-top: 1rem;  }  .text-center {    text-align: center;  }  .text-start {    text-align: start;  }  .text-end {    text-align: end;  }  .align-middle {    vertical-align: middle;  }  .align-text-bottom {    vertical-align: text-bottom;  }  .text-10 {    font-size: 0.625rem;    line-height: 1rem;  }  .text-12 {    font-size: 0.75rem;    line-height: 1rem;  }  .text-14 {    font-size: 0.875rem;    line-height: 1.25rem;  }  .text-16 {    font-size: 1rem;    line-height: 1.25rem;  }  .text-18 {    font-size: 1.125rem;    line-height: 1.5rem;  }  .text-20 {    font-size: 1.25rem;    line-height: 1.25rem;  }  .text-24 {    font-size: 1.5rem;    line-height: 1.75rem;  }  .text-32 {    font-size: 2rem;    line-height: 2.25rem;  }  .font-bold {    font-weight: 700;  }  .font-normal {    font-weight: 400;  }  .font-semibold {    font-weight: 600;  }  .uppercase {    text-transform: uppercase;  }  .leading-4 {    line-height: 1rem;  }  .leading-5 {    line-height: 1.25rem;  }  .tracking-widest {    letter-spacing: 0.1em;  }  .text-\\[color\\:var\\(--button-color-text-default\\)\\] {    color: var(--button-color-text-default);  }  .text-\\[color\\:var\\(--color-button-plain-text-disabled\\)\\] {    color: var(--color-button-plain-text-disabled);  }  .text-\\[color\\:var\\(--color-button-secondary-text-disabled\\)\\] {    color: var(--color-button-secondary-text-disabled);  }  .text-brand-onBackground {    color: var(--color-brand-onBackground);  }  .text-category-nsfw {    color: var(--color-category-nsfw);  }  .text-category-spoiler {    color: var(--color-category-spoiler);  }  .text-danger-content {    color: var(--color-danger-content);  }  .text-global-white {    color: var(--color-global-white);  }  .text-neutral-content {    color: var(--color-neutral-content);  }  .text-neutral-content-disabled {    color: var(--color-neutral-content-disabled);  }  .text-neutral-content-strong {    color: var(--color-neutral-content-strong);  }  .text-neutral-content-weak {    color: var(--color-neutral-content-weak);  }  .text-primary {    color: var(--color-primary);  }  .text-primary-onBackground {    color: var(--color-primary-onBackground);  }  .text-secondary {    color: var(--color-secondary);  }  .text-secondary-onBackground {    color: var(--color-secondary-onBackground);  }  .text-secondary-weak {    color: var(--color-secondary-weak);  }  .text-warning-content {    color: var(--color-warning-content);  }  .underline {    text-decoration-line: underline;  }  .no-underline {    text-decoration-line: none;  }  .opacity-40 {    opacity: 0.4;  }  .opacity-60 {    opacity: 0.6;  }  .outline {    outline-style: solid;  }  .drop-shadow {    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));    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);  }  .invert {    --tw-invert: invert(100%);    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);  }  .transition {    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);    transition-duration: 150ms;  }  .ease-in-out {    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);  }  .grid.grid-cols-1 > * {    grid-column-start: 1;    grid-row-start: 1;  }  .hover\\:border-secondary-background-hover:hover {    border-color: var(--color-secondary-background-hover);  }  .hover\\:border-secondary-background-selected:hover {    border-color: var(--color-secondary-background-selected);  }  .hover\\:bg-brand-background-hover:hover {    background-color: var(--color-brand-background-hover);  }  .hover\\:bg-neutral-background-hover:hover {    background-color: var(--color-neutral-background-hover);  }  .hover\\:bg-neutral-background-selected:hover {    background-color: var(--color-neutral-background-selected);  }  .hover\\:bg-secondary-background-hover:hover {    background-color: var(--color-secondary-background-hover);  }  .hover\\:bg-secondary-background-selected:hover {    background-color: var(--color-secondary-background-selected);  }  .hover\\:text-action-downvote:hover {    color: var(--color-action-downvote);  }  .hover\\:text-action-upvote:hover {    color: var(--color-action-upvote);  }  .hover\\:text-danger-content-hover:hover {    color: var(--color-danger-content-hover);  }  .hover\\:text-global-white:hover {    color: var(--color-global-white);  }  .hover\\:text-secondary:hover {    color: var(--color-secondary);  }  .hover\\:text-secondary-hover:hover {    color: var(--color-secondary-hover);  }  .hover\\:underline:hover {    text-decoration-line: underline;  }  .hover\\:no-underline:hover {    text-decoration-line: none;  }  .focus-visible\\:text-action-downvote:focus-visible {    color: var(--color-action-downvote);  }  .focus-visible\\:text-action-upvote:focus-visible {    color: var(--color-action-upvote);  }  .active\\:bg-interactive-pressed:active {    background-color: var(--color-interactive-pressed);  }  .active\\:bg-secondary-background:active {    background-color: var(--color-secondary-background);  }  .disabled\\:bg-interactive-background-disabled:disabled {    background-color: var(--color-interactive-background-disabled);  }  .disabled\\:text-interactive-content-disabled:disabled {    color: var(--color-interactive-content-disabled);  }  .\\[\\&\\>\\:not\\(\\.pointer-events-none\\)\\]\\:pointer-events-auto>:not(.pointer-events-none) {    pointer-events: auto;  }  .\\[\\&\\>svg\\]\\:aspect-square>svg {    aspect-ratio: 1 / 1;  }  .\\[\\&\\>svg\\]\\:h-\\[1\\.25rem\\]>svg {    height: 1.25rem;  }  .\\[\\&\\>svg\\]\\:h-lg>svg {    height: 1.5rem;  }  .\\[\\&\\>svg\\]\\:h-md>svg {    height: 1rem;  }  .\\[\\&\\>svg\\]\\:h-sm>svg {    height: 0.75rem;  }  .\\[\\&\\>svg\\]\\:w-\\[1\\.25rem\\]>svg {    width: 1.25rem;  }  .\\[\\&\\>svg\\]\\:w-lg>svg {    width: 1.5rem;  }  .\\[\\&\\>svg\\]\\:w-md>svg {    width: 1rem;  }  .\\[\\&\\>svg\\]\\:w-sm>svg {    width: 0.75rem;  }  .\\[\\&\\>svg\\]\\:text-center>svg {    text-align: center;  }  .\\[\\&\\>svg\\]\\:align-middle>svg {    vertical-align: middle;  }  ';
+const uiRendererStyles = 'faceplate-expandable-section-helper {    display: contents;    /* [rpl] just to boost the selector */    /*    Target the [open] attribute on either the root element OR the details    element to rotate the chevron. This is to handle rotating chevrons both    before and after the faceplate-expandable-section-helper component is defined.        Before the component is defined, the [open] attribute on the component will not    toggle if the user clicks on details, but the [open] attribute will toggle on    the details element, so we need to target details too.      The reason we can\'t target only the details element is because once the web    component is defined, we delay toggling the [open] attribute on the details    element until AFTER the animation finishes. So if we only targeted the details    element for the chevron rotation the chevron wouldn\'t rotate until after the    collapse animation finished and we finally toggle the [open] attriubte on the    details element.    */    /*      Specific handling for nested menus. We only need to handle collapse menus inside of      expanded menus, not expanded menus inside collapsed menus because you can\'t see those!    */  }  faceplate-expandable-section-helper > details > summary {    list-style-type: none;    /* For Safari */  }  faceplate-expandable-section-helper > details > summary::marker,  faceplate-expandable-section-helper > details > summary::-webkit-details-marker {    display: none;  }  faceplate-expandable-section-helper[rpl] > details > summary {    /* override details.less */    margin: 0;  }  faceplate-expandable-section-helper > details > summary [icon-name=\'caret-down-outline\'] {    transition: transform 0.22s ease-in-out;  }  faceplate-expandable-section-helper[open] summary [icon-name=\'caret-down-outline\'],  faceplate-expandable-section-helper:not(:defined) > details[open] summary [icon-name=\'caret-down-outline\'] {    transform: rotate(180deg);  }  faceplate-expandable-section-helper:not([open]) summary [icon-name=\'caret-down-outline\'],  faceplate-expandable-section-helper:not(:defined) > details:not([open]) summary [icon-name=\'caret-down-outline\'] {    transform: rotate(0deg);  }  /*   * This is a Tailwind CSS file, it must be run through the PostCSS compiler   * with the Tailwind plugin, not Less. The `postcss-import` plugin is also   * needed, if you have other additions to your Tailwind entry point CSS.   *   * @example   * // tailwind.css   * @import \'@reddit/faceplate/styles/tailwind-components.css\'   * @tailwind components;   * @tailwind utilities;   *   * // styles.less   * @import (less) \'@reddit/faceplate/faceplate.css\';   * @import (less) \'./tailwind-build.css\';   */  .theme-light,:root{--rem320:20rem;--rem192:12rem;--rem144:9rem;--rem128:8rem;--rem96:6rem;--rem90:5.625rem;--rem88:5.5rem;--rem64:4rem;--rem56:3.5rem;--rem48:3rem;--rem40:2.5rem;--rem36:2.25rem;--rem32:2rem;--rem28:1.75rem;--rem26:1.625rem;--rem24:1.5rem;--rem22:1.375rem;--rem20:1.25rem;--rem18:1.125rem;--rem16:1rem;--rem15:0.9375rem;--rem14:0.875rem;--rem12:0.75rem;--rem10:0.625rem;--rem8:0.5rem;--rem6:0.375rem;--rem4:0.25rem;--rem2:0.125rem;--rem1:0.0625rem;--spacer-4xs:0.125rem;--spacer-2xs:0.25rem;--spacer-xs:0.5rem;--spacer-sm:0.75rem;--spacer-md:1rem;--spacer-lg:1.5rem;--spacer-xl:2rem;--spacer-2xl:3rem;--spacer-a-px:0px;--spacer-button-lg-px:var(--spacer-lg);--spacer-button-md-px:var(--spacer-lg);--spacer-button-sm-px:var(--spacer-md);--spacer-input-padding-left:0px;--spacer-input-padding-top:0px;--spacer-label-default:0px;--spacer-switch-input-active-pl:0px;--size-2xs:0.25rem;--size-xs:0.5rem;--size-sm:0.75rem;--size-md:1rem;--size-lg:1.5rem;--size-xl:2rem;--size-2xl:3rem;--size-3xl:4rem;--size-4xl:6rem;--size-5xl:8rem;--size-button-lg-h:3.375rem;--size-button-md-h:2.75rem;--size-button-sm-h:2.125rem;--size-button-xs-h:1.375rem;--size-switch-input-h:1.25rem;--size-switch-input-w:2rem;--line-sm:0.0625rem;--line-md:0.125rem;--line-lg:0.25rem;--line-a-focus:0px;--line-a-outline-moz:0.0625rem;--line-a-outline-wb:0.3125rem;--line-button-lg-border:0.0625rem;--line-button-md-border:0.0625rem;--line-button-sm-border:0.0625rem;--line-button-xs-border:0.0625rem;--line-button-border-activated:0.0625rem;--line-input-border:var(--line-sm);--radius-sm:0.25rem;--radius-lg:2rem;--radius-full:624.9375rem;--radius-accordion-size:var(--radius-sm);--font-10-15-bold:normal 700 0.625rem/0.9375rem var(--font-sans);--font-button-lg:normal 700 1.125rem/1.375rem var(--font-sans);--font-button-md:normal 700 1rem/1.25rem var(--font-sans);--font-button-sm:normal 700 0.875rem/1.125rem var(--font-sans);--font-button-xs:normal 700 0.75rem/0.875rem var(--font-sans);--font-label-default:var(--font-10-15-bold);--misc-accordion-border:1px solid var(--color-tone-5);--misc-accordion-open-list-style-type:disclosure-open;--misc-accordion-closed-list-style-type:disclosure-closed;--misc-divider-margin:0.5rem auto;--misc-label-text-transform:uppercase;--misc-label-letter-spacing:0.5px;--color-primary-visited:#660099;--color-primary-background:#24a0ed;--color-primary-background-hover:#006cbf;--color-danger-content:#ea0027;--color-success-content:#46d160;--color-global-black:#000000;--color-global-white:#ffffff;--color-global-orangered:#D93A00;--color-global-alienblue:#0079d3;--color-global-darkblue:#1d2535;--color-tone-1:#1a1a1b;--color-tone-2:#6a6d6f;--color-tone-3:#878a8c;--color-tone-4:#d3d6da;--color-tone-5:#edeff1;--color-tone-6:#f6f7f8;--color-tone-7:#ffffff;--color-action-primary:var(--color-primary-background);--color-action-secondary:var(--color-primary-background-hover);--color-action-upvote:var(--color-global-orangered);--color-action-downvote:#7193ff;--color-alert-positive:var(--color-success-content);--color-alert-negative:var(--color-danger-content);--color-alert-caution:#ffb000;--color-identity-admin:var(--color-global-orangered);--color-identity-moderator:#46d160;--color-identity-self:#0dd3bb;--color-identity-coins:#ddbd37;--color-category-live:var(--color-global-orangered);--color-category-nsfw:#ff3881;--color-category-spoiler:var(--color-tone-1);--color-ui-canvas:var(--color-tone-5);--color-ui-modalbackground:var(--color-tone-7);--color-opacity-highlight:linear-gradient(#006cbf1a, var(--color-tone-6));--color-opacity-08:#1a1a1b14;--color-opacity-50:#00000080;--color-scrim:#1a1a1b4d;--color-a-default:var(--color-primary-background-hover);--color-a-hover:var(--color-primary-background-hover);--color-a-visited:var(--color-primary-background-hover);--color-button-overlay-focus:#ffffff1a;--color-button-overlay-active:#00000014;--color-button-primary-background-hover:var(--color-primary-background);--color-button-primary-background-disabled:var(--color-tone-6);--color-button-primary-border-hover:transparent;--color-button-primary-border-active:transparent;--color-button-primary-border-activated:transparent;--color-button-primary-border-disabled:transparent;--color-button-primary-text-disabled:var(--color-tone-2);--color-button-secondary-background:transparent;--color-button-secondary-background-focus:transparent;--color-button-secondary-background-hover:transparent;--color-button-secondary-background-disabled:var(--color-tone-6);--color-button-secondary-background-activated:transparent;--color-button-secondary-border:var(--color-primary-background-hover);--color-button-secondary-border-hover:var(--color-primary-background-hover);--color-button-secondary-border-active:var(--color-primary-background-hover);--color-button-secondary-border-activated:var(--color-primary-background-hover);--color-button-secondary-border-disabled:var(--color-tone-2);--color-button-secondary-text:var(--color-primary-background-hover);--color-button-secondary-text-disabled:var(--color-tone-2);--color-button-secondary-text-activated:var(--color-button-secondary-text);--color-button-tertiary-background:var(--color-tone-6);--color-button-tertiary-background-focus:var(--color-tone-6);--color-button-tertiary-background-hover:var(--color-tone-6);--color-button-tertiary-background-disabled:var(--color-tone-6);--color-button-tertiary-background-activated:var(--color-tone-6);--color-button-tertiary-border-hover:transparent;--color-button-tertiary-border-active:transparent;--color-button-tertiary-text:var(--color-primary-background-hover);--color-button-tertiary-text-disabled:var(--color-tone-2);--color-button-tertiary-text-activated:var(--color-primary-background-hover);--color-button-plain-background-hover:transparent;--color-button-plain-background-disabled:var(--color-tone-7);--color-button-plain-background-activated:transparent;--color-button-plain-border-hover:transparent;--color-button-plain-border-active:transparent;--color-button-plain-text:var(--color-primary-background-hover);--color-button-plain-text-disabled:var(--color-tone-2);--color-button-plain-text-activated:var(--color-primary-background-hover);--color-divider-default:var(--color-tone-5);--color-input-default:var(--color-tone-6);--color-input-hover:var(--color-primary-background-hover);--color-input-border:var(--color-tone-5);--color-input-text:var(--color-tone-1);--color-input-helper-text:var(--color-tone-1);--color-label-default:var(--color-tone-1);--color-switch-input-background-default:var(--color-tone-3);--color-switch-input-background-checked:var(--color-global-alienblue);--color-switch-input-background-disabled:var(--color-tone-6);--color-switch-input-background-checked-disabled:var(--color-tone-5);--color-switch-input-background-hover:var(--color-tone-3);--color-switch-input-background-checked-hover:var(--color-global-alienblue);--elevation-xs:0 0.0625rem 0.125rem 0 #00000040;--elevation-sm:0 0.0625rem 0.25rem 0 #00000026,0 0.25rem 0.25rem 0 #00000026;--elevation-md:0 0.25rem 0.5rem 0 #0000001a,0 0.375rem 0.75rem 0 #00000040;--elevation-lg:0 0.75rem 0.75rem 0 #00000026,0 1rem 2rem 0 #00000040;--elevation-focus-ring:0 0 0 0.25rem var(--color-global-alienblue);--font-sans:-apple-system,BlinkMacSystemFont,\'Segoe UI\',Roboto,\'Helvetica Neue\',Arial,\'Apple Color Emoji\',\'Segoe UI Emoji\',\'Segoe UI Symbol\',sans-serif;--font-mono:Noto Mono,Menlo,Monaco,Consolas,monospace;--font-title-h0:normal 500 1.625rem/2rem var(--font-sans);--font-title-h1:normal 500 1.375rem/1.625rem var(--font-sans);--font-title-h2:normal 500 1.25rem/1.5rem var(--font-sans);--font-title-h3:normal 500 1.125rem/1.375rem var(--font-sans);--font-title-h4:normal 500 1rem/1.25rem var(--font-sans);--font-title-h5:normal 500 0.875rem/1.125rem var(--font-sans);--font-title-h6:normal 500 0.75rem/1rem var(--font-sans);--font-body:0.875rem;--font-small:0.75rem;--font-code:0.875rem;--font-subheading:0.75rem;--font-label:0.625rem;--font-button-b1:normal bold 1.125rem/1.375rem var(--font-sans);--font-button-b2:normal bold 1rem/1.25rem var(--font-sans);--font-button-b3:normal bold 0.875rem/1.125rem var(--font-sans);--font-button-b4:normal bold 0.75rem/0.875rem var(--font-sans);--color-gradient-orangeyellow:linear-gradient(89.94deg, #ec0623 0%, #ff8717 100%);--color-gradient-bluepink:linear-gradient(89.94deg, #51b9ff 0%, #7785ff 52.6%, #b279ff 73.96%, #ff81ed 100%);--boxshadow-modal:0px 2px 15px rgba(26, 26, 27, 0.3);--boxshadow-navigation:0px 4px 14px rgba(0, 0, 0, 0.1);--boxshadow-tooltip:0 1px 4px rgba(0, 0, 0, 0.15),0 4px 4px rgba(0, 0, 0, 0.15);color-scheme:light}  .theme-light dialog::backdrop,:root dialog::backdrop{--color-dialog-background:#00000080}  @media (prefers-color-scheme:dark){:root:not(.theme-light){--color-primary-visited:#c58af9;--color-primary-background:#006cbf;--color-primary-background-hover:#24a0ed;--color-tone-1:#d7dadc;--color-tone-2:#818384;--color-tone-3:#565758;--color-tone-4:#3a3a3c;--color-tone-5:#272729;--color-tone-6:#1a1a1b;--color-tone-7:#121213;--color-identity-coins:#ffe600;--color-ui-canvas:#050505;--color-ui-modalbackground:var(--color-tone-6);--color-opacity-50:#d7dadc80;--color-scrim:#0000004d;--elevation-xs:0 0.0625rem 0.125rem 0 #000000ab;--elevation-sm:0 0.0625rem 0.25rem 0 #00000054,0 0.25rem 0.25rem 0 #00000054;--elevation-md:0 0.25rem 0.5rem 0 #00000033,0 0.375rem 0.75rem 0 #00000080;--elevation-lg:0 0.75rem 0.75rem 0 #00000033,0 1rem 2rem 0 #00000080;--boxshadow-modal:0px 2px 15px rgba(0, 0, 0, 0.3);--boxshadow-tooltip:0 1px 4px rgba(0, 0, 0, 0.33),0 4px 4px rgba(0, 0, 0, 0.33);color-scheme:dark}:root:not(.theme-light) dialog::backdrop{--color-dialog-background:#d7dadc80}}  .theme-dark{--color-primary-visited:#c58af9;--color-primary-background:#006cbf;--color-primary-background-hover:#24a0ed;--color-tone-1:#d7dadc;--color-tone-2:#818384;--color-tone-3:#565758;--color-tone-4:#3a3a3c;--color-tone-5:#272729;--color-tone-6:#1a1a1b;--color-tone-7:#121213;--color-identity-coins:#ffe600;--color-ui-canvas:#050505;--color-ui-modalbackground:var(--color-tone-6);--color-opacity-50:#d7dadc80;--color-scrim:#0000004d;--elevation-xs:0 0.0625rem 0.125rem 0 #000000ab;--elevation-sm:0 0.0625rem 0.25rem 0 #00000054,0 0.25rem 0.25rem 0 #00000054;--elevation-md:0 0.25rem 0.5rem 0 #00000033,0 0.375rem 0.75rem 0 #00000080;--elevation-lg:0 0.75rem 0.75rem 0 #00000033,0 1rem 2rem 0 #00000080;--boxshadow-modal:0px 2px 15px rgba(0, 0, 0, 0.3);--boxshadow-tooltip:0 1px 4px rgba(0, 0, 0, 0.33),0 4px 4px rgba(0, 0, 0, 0.33);color-scheme:dark}  .theme-dark dialog::backdrop{--color-dialog-background:#d7dadc80}  .theme-beta,.theme-light.theme-beta{--spacer-a-px:0.125rem;--spacer-button-lg-px:var(--spacer-md);--spacer-button-md-px:var(--spacer-md);--spacer-button-sm-px:var(--spacer-sm);--spacer-input-padding-left:var(--spacer-md);--spacer-input-padding-top:var(--spacer-2xs);--spacer-label-default:var(--spacer-md);--spacer-switch-input-active-pl:var(--spacer-xs);--size-banner-height:var(--size-rem40);--size-button-lg-h:var(--size-2xl);--size-button-md-h:2.5rem;--size-button-sm-h:var(--size-xl);--size-button-xs-h:var(--size-xl);--size-switch-input-h:var(--size-xl);--size-switch-input-w:var(--size-2xl);--line-a-focus:var(--line-md);--line-a-outline-moz:0px;--line-a-outline-wb:0px;--line-button-lg-border:var(--line-sm);--line-button-md-border:var(--line-sm);--line-button-sm-border:var(--line-sm);--line-button-xs-border:var(--line-sm);--line-button-border-activated:var(--line-lg);--line-input-border:var(--line-lg);--radius-md:1.25rem;--radius-accordion-size:0px;--font-10:normal undefined null/null var(--font-sans);--font-12:normal undefined null/null var(--font-sans);--font-14:normal undefined null/null var(--font-sans);--font-16:normal undefined null/null var(--font-sans);--font-18:normal undefined null/null var(--font-sans);--font-20:normal undefined null/null var(--font-sans);--font-24:normal undefined null/null var(--font-sans);--font-32:normal undefined null/null var(--font-sans);--font-48:normal undefined null/null var(--font-sans);--font-64:normal undefined null/null var(--font-sans);--font-title-h0:var(--font-64);--font-title-h1:var(--font-32);--font-title-h2:var(--font-24);--font-title-h3:var(--font-18);--font-title-h4:var(--font-16);--font-title-h5:var(--font-14);--font-title-h6:var(--font-12);--font-14-20-regular:normal 400 0.875rem/1.25rem var(--font-sans);--font-14-20-semibold:normal 600 0.875rem/1.25rem var(--font-sans);--font-16-20-regular:normal 400 1rem/1.25rem var(--font-sans);--font-12-16-regular:normal 400 0.75rem/1rem var(--font-sans);--font-12-16-semibold:normal 600 0.75rem/1rem var(--font-sans);--font-button-lg:var(--font-14-20-semibold);--font-button-md:var(--font-14-20-semibold);--font-button-sm:var(--font-12-16-semibold);--font-label-default:var(--font-12-16-regular);--misc-accordion-border:0;--misc-accordion-open-list-style-type:none;--misc-accordion-closed-list-style-type:none;--misc-divider-margin:0;--misc-label-text-transform:capitalize;--misc-label-letter-spacing:initial;--blur-sm:0.25rem;--blur-normal:0.5rem;--blur-md:0.75rem;--blur-lg:1rem;--blur-xl:1.5rem;--blur-2xl:2.5rem;--blur-3xl:4rem;--color-pizzaRed:#ef5350;--color-global-brand-orangered:#FF4500;--color-global-focus:#47B0DB;--color-interactive-content-disabled:#00000040;--color-interactive-background-disabled:#0000000d;--color-interactive-pressed:#00000029;--color-neutral-content:#2A3C42;--color-neutral-content-disabled:#D6D6D6;--color-neutral-content-weak:#576F76;--color-neutral-content-strong:#0F1A1C;--color-neutral-background:#ffffff;--color-neutral-background-selected:#EAEDEF;--color-neutral-background-weak:#F9FAFA;--color-neutral-background-medium:#F8F8F8;--color-neutral-background-strong:#ffffff;--color-neutral-background-hover:#F2F4F5;--color-neutral-border:#00000033;--color-neutral-border-medium:#00000080;--color-neutral-border-weak:#0000001a;--color-neutral-border-strong:#0F1A1C;--color-primary:#0045AC;--color-primary-hover:#003584;--color-primary-visited:#8700B5;--color-primary-onBackground:#ffffff;--color-primary-onBackground-selected:#ffffff;--color-primary-background:#0045AC;--color-primary-background-hover:#003584;--color-primary-background-selected:#00255D;--color-secondary:#0F1A1C;--color-secondary-hover:#000000;--color-secondary-weak:#576F76;--color-secondary-onBackground:#000000;--color-secondary-background:#EAEDEF;--color-secondary-background-hover:#E2E7E9;--color-secondary-background-selected:#D2DADD;--color-secondary-plain:#0F1A1C;--color-secondary-plain-hover:#000000;--color-danger-background:#EB001F;--color-danger-background-disabled:#FFCCD2;--color-danger-background-hover:#A50016;--color-danger-onBackground:#ffffff;--color-danger-content:#A50016;--color-danger-content-hover:#7E0011;--color-danger-content-default:#ffffff;--color-brand-background:#D93A00;--color-brand-onBackground:#ffffff;--color-brand-background-hover:#962900;--color-media-background:#00000099;--color-media-onbackground:#ffffff;--color-media-background-hover:#000000cc;--color-media-onbackground-disabled:#ffffff40;--color-media-border-selected:#ffffff;--color-media-background-selected:#000000cc;--color-success-content:#0A6000;--color-success-hover:#084A00;--color-success-onBackground:#ffffff;--color-success-background:#0E8A00;--color-success-background-hover:#0A6000;--color-warning-content:#665505;--color-warning-content-hover:#504104;--color-warning-onBackground:#000000;--color-warning-background:#DBAF00;--color-warning-background-hover:#8F7407;--color-upvote-content:#962900;--color-upvote-content-weak:var(--color-global-brand-orangered);--color-upvote-disabled:#9629004d;--color-upvote-onBackground:#ffffff;--color-upvote-background:#D93A00;--color-upvote-background-hover:#962900;--color-upvote-background-disabled:#D93A004d;--color-downvote-content:#453BB5;--color-downvote-content-weak:#6A5CFF;--color-downvote-disabled:#453BB54d;--color-downvote-onBackground:#ffffff;--color-downvote-background:#6A5CFF;--color-downvote-background-hover:#453BB5;--color-downvote-background-disabled:#6A5CFF4d;--color-brand-gradient-default:linear-gradient(180deg, #D93A00ff, #db3b00ff 30%, #962900ff 100%);--color-brand-gradient-default-highlight:linear-gradient(258deg, #db3f0000 80%, #D93A00ff 100%);--color-brand-gradient-hover:linear-gradient(180deg, #e23d00ff 15%, #cb3600ff 49%, #b43000ff 100%);--color-brand-gradient-hover-highlight:linear-gradient(323deg, #cb360000 65%, #cb3600ff 100%);--color-brand-gradient-active:linear-gradient(180deg, #cd3700ff, #db3b00ff 68%, #D93A00ff 100%);--color-brand-gradient-active-highlight:linear-gradient(83deg, #db3f0000 80%, #D93A00ff 100%);--color-gradient-media:linear-gradient(180deg, #00000000, #0000008a 60%, #00000099 100%);--color-gradient-media-strong:linear-gradient(180deg, #00000000, #000000cc 60%, #000000e6 100%);--color-transparent-background-hover:#82959B1a;--color-global-black:#000000;--color-global-white:#ffffff;--color-global-orangered:#D93A00;--color-global-alienblue:#1870F4;--color-global-darkblue:#131F23;--color-tone-1:#131313;--color-tone-2:#434343;--color-tone-3:#ACACAC;--color-tone-4:#E4E4E4;--color-tone-5:#F2F2F2;--color-tone-6:#F8F8F8;--color-tone-7:#ffffff;--color-action-upvote:#D93A00;--color-action-downvote:#6A5CFF;--color-alert-caution:#8F7407;--color-identity-admin:#D93A00;--color-identity-moderator:#0E8A00;--color-identity-self:#008675;--color-identity-coins:#DBAF00;--color-category-live:#D93A00;--color-category-nsfw:#E00096;--color-category-spoiler:var(--color-tone-1);--color-ui-canvas:var(--color-tone-5);--color-ui-modalbackground:var(--color-neutral-background-strong);--color-avatar-gradient:linear-gradient(0deg, #D2DADDff, #ffffffff 75%);--color-opacity-highlight:linear-gradient(#00255D1a, var(--color-tone-6));--color-opacity-08:#13131314;--color-opacity-50:#00000080;--color-scrim:#00000099;--color-scrim-strong:#000000cc;--color-scrim-gradient:linear-gradient(180deg, #00000000, #0000008a 60%, #00000099 100%);--color-online:#55BD46;--color-favorite:#8F7407;--color-a-default:var(--color-primary);--color-a-hover:var(--color-primary-hover);--color-a-visited:var(--color-primary-visited);--color-banner-plain:var(--color-neutral-background-strong);--color-banner-plain-inverted:var(--color-neutral-content-strong);--color-banner-error:var(--color-danger-background);--color-banner-caution:var(--color-warning-background);--color-banner-success:var(--color-success-background);--color-banner-brand:var(--color-brand-background);--color-banner-plain-text:var(--color-neutral-content);--color-banner-plain-inverted-text:var(--color-neutral-background-weak);--color-banner-error-text:var(--color-danger-onBackground);--color-banner-caution-text:var(--color-warning-onBackground);--color-banner-caution-hover:var(--color-warning-background-hover);--color-banner-success-text:var(--color-success-onBackground);--color-banner-brand-text:var(--color-brand-onBackground);--color-button-overlay-focus:transparent;--color-button-overlay-active:transparent;--color-button-border-width:tomato;--color-button-border-width-activated:tomato;--color-button-primary-background-hover:var(--color-primary-background-hover);--color-button-primary-background-activated:var(--color-primary-background-selected);--color-button-primary-background-disabled:var(--color-interactive-background-disabled);--color-button-primary-border-hover:var(--color-primary-background);--color-button-primary-border-active:var(--color-primary-background-hover);--color-button-primary-text-disabled:var(--color-interactive-content-disabled);--color-button-primary-text-activated:var(--color-primary-onBackground-selected);--color-button-secondary-background:var(--color-secondary-background);--color-button-secondary-background-focus:var(--color-secondary-background);--color-button-secondary-background-hover:var(--color-secondary-background-hover);--color-button-secondary-background-disabled:var(--color-interactive-background-disabled);--color-button-secondary-background-activated:var(--color-secondary-background-selected);--color-button-secondary-border:transparent;--color-button-secondary-border-hover:var(--color-secondary-background);--color-button-secondary-border-active:var(--color-secondary-background-hover);--color-button-secondary-border-activated:transparent;--color-button-secondary-border-disabled:transparent;--color-button-secondary-text:var(--color-secondary-onBackground);--color-button-secondary-text-disabled:var(--color-interactive-content-disabled);--color-button-secondary-text-activated:var(--color-secondary-onBackground);--color-button-tertiary-background:transparent;--color-button-tertiary-background-focus:transparent;--color-button-tertiary-background-hover:var(--color-secondary-background-hover);--color-button-tertiary-background-disabled:transparent;--color-button-tertiary-background-activated:var(--color-neutral-content);--color-button-tertiary-border-hover:var(--color-secondary-background);--color-button-tertiary-border-active:var(--color-secondary-background-hover);--color-button-tertiary-text:var(--color-neutral-content-strong);--color-button-tertiary-text-disabled:var(--color-neutral-content-disabled);--color-button-tertiary-text-activated:var(--color-neutral-background);--color-button-plain-background-hover:var(--color-secondary-background-hover);--color-button-plain-background-disabled:transparent;--color-button-plain-background-activated:var(--color-secondary-background-selected);--color-button-plain-border-hover:var(--color-secondary-background);--color-button-plain-border-active:var(--color-secondary-background-hover);--color-button-plain-text:var(--color-secondary-plain);--color-button-plain-text-hover:var(--color-secondary-plain-hover);--color-button-plain-text-disabled:var(--color-interactive-content-disabled);--color-button-plain-text-activated:var(--color-secondary-onBackground);--color-button-primary-border-activated:var(--color-primary-background);--color-button-plain-inverted-background-activated:var(--color-neutral-content);--color-button-plain-inverted-text-activated:var(--color-neutral-background);--color-button-media-border-color-activated:var(--color-media-border-selected);--color-button-favorite-text:var(--color-favorite);--color-button-caution-background:var(--color-warning-background);--color-button-caution-background-hover:var(--color-warning-background-hover);--color-button-caution-background-disabled:var(--color-interactive-background-disabled);--color-button-caution-text:var(--color-warning-onBackground);--color-divider-default:var(--color-neutral-border);--color-input-secondary:var(--color-secondary-background);--color-input-secondary-hover:var(--color-secondary-background-hover);--color-input-border:transparent;--color-input-bordered:transparent;--color-input-bordered-hover:var(--color-neutral-background-hover);--color-input-secondary-text:var(--color-secondary-onBackground);--color-input-bordered-text:var(--color-secondary-plain);--color-input-helper-text:var(--color-neutral-content-weak);--color-input-pressed:var(--color-interactive-pressed);--color-label-default:var(--color-neutral-content-weak);--color-shimmer-background:#00000008;--color-shimmer-gradient-overlay:linear-gradient(to right, #00000000, #00000005 20%, #0000000f 50%, #00000008 70%, #00000000 100%);--color-switch-input-background-pressed-scrim:var(--color-interactive-pressed);--color-switch-input-background-handle:var(--color-global-white);--color-switch-input-background-handle-disabled:var(--color-secondary-background);--color-switch-input-background-default:var(--color-secondary-background);--color-switch-input-background-default-hover:var(--color-secondary-background-hover);--color-switch-input-background-default-disabled:var(--color-interactive-background-disabled);--color-switch-input-background-checked:var(--color-primary-background);--color-switch-input-background-checked-hover:var(--color-primary-background-hover);--color-switch-input-background-checked-disabled:var(--color-interactive-content-disabled);--color-tooltip-bg-neutral:var(--color-neutral-background-strong);--color-tooltip-text-neutral:var(--color-neutral-content);--color-tooltip-bg-inverted:var(--color-neutral-content);--color-tooltip-text-inverted:var(--color-neutral-background);--color-tooltip-bg-primary:var(--color-primary-background);--color-tooltip-text-primary:var(--color-primary-onBackground);--elevation-sm-inset:inset 0 0.0625rem 0.125rem 0 #00000021;--elevation-button-focus:var(--elevation-focus-ring);--elevation-switch-input-default-inset:var(--elevation-sm-inset)}  @media (prefers-color-scheme:dark){:root:not(.theme-light) .theme-beta,:root:not(.theme-light).theme-beta{--color-pizzaRed:#c62828;--color-global-brand-orangered:#FF4500;--color-global-focus:#007FAE;--color-interactive-content-disabled:#ffffff40;--color-interactive-background-disabled:#ffffff0d;--color-interactive-pressed:#ffffff29;--color-neutral-content:#B8C5C9;--color-neutral-content-disabled:#303030;--color-neutral-content-weak:#82959B;--color-neutral-content-strong:#F2F4F5;--color-neutral-background:#0B1416;--color-neutral-background-selected:#1A282D;--color-neutral-background-weak:#04090A;--color-neutral-background-medium:#131313;--color-neutral-background-strong:#0F1A1C;--color-neutral-background-hover:#131F23;--color-neutral-border:#ffffff33;--color-neutral-border-medium:#ffffff80;--color-neutral-border-weak:#ffffff1a;--color-neutral-border-strong:#F2F4F5;--color-primary:#629FFF;--color-primary-hover:#A7CCFF;--color-primary-visited:#D55EFF;--color-primary-background:#0045AC;--color-primary-background-hover:#1870F4;--color-primary-background-selected:#629FFF;--color-primary-onBackground:#ffffff;--color-primary-onBackground-selected:#000000;--color-secondary:#F2F4F5;--color-secondary-hover:#ffffff;--color-secondary-weak:#82959B;--color-secondary-onBackground:#ffffff;--color-secondary-background:#1A282D;--color-secondary-background-hover:#223237;--color-secondary-background-selected:#33464C;--color-secondary-plain:#F2F4F5;--color-secondary-plain-hover:#ffffff;--color-danger-background:#A50016;--color-danger-background-disabled:#3A0008;--color-danger-background-hover:#EB001F;--color-danger-onBackground:#ffffff;--color-danger-content:#FF6E80;--color-danger-content-hover:#FFADB8;--color-success-content:#55BD46;--color-success-hover:#A3E398;--color-success-onBackground:#ffffff;--color-success-background:#0A6000;--color-success-background-hover:#0E8A00;--color-warning-content:#DBAF00;--color-warning-content-hover:#FADB61;--color-warning-onBackground:#000000;--color-warning-background:#DBAF00;--color-warning-background-hover:#FADB61;--color-upvote-content:#FE7C53;--color-upvote-content-weak:var(--color-global-brand-orangered);--color-upvote-disabled:#FE7C534d;--color-upvote-onBackground:#ffffff;--color-upvote-background:#D93A00;--color-upvote-background-hover:#962900;--color-upvote-background-disabled:#D93A004d;--color-downvote-content:#988EFF;--color-downvote-content-weak:#6A5CFF;--color-downvote-disabled:#988EFF4d;--color-downvote-onBackground:#ffffff;--color-downvote-background:#453BB5;--color-downvote-background-hover:#453BB5;--color-downvote-background-disabled:#6A5CFF4d;--color-tone-1:#F2F2F2;--color-tone-2:#ACACAC;--color-tone-3:#434343;--color-tone-4:#303030;--color-tone-5:#1E1E1E;--color-tone-6:#131313;--color-tone-7:#080808;--color-ui-canvas:#080808;--color-ui-modalbackground:var(--color-neutral-background-strong);--color-avatar-gradient:linear-gradient(0deg, #2A3C42ff, #0B1416ff 75%);--color-transparent-background-hover:#667A801a;--color-opacity-50:#F2F2F280;--color-online:#55BD46;--color-favorite:#DBAF00;--color-button-primary-border-activated:transparent;--color-button-plain-inverted-activated-text:var(--color-neutral-background);--color-shimmer-background:#ffffff08;--color-shimmer-gradient-overlay:linear-gradient(to right, #ffffff00, #ffffff05 20%, #ffffff0f 50%, #ffffff08 70%, #ffffff00 100%)}}  .theme-dark .theme-beta,.theme-dark.theme-beta{--color-pizzaRed:#c62828;--color-global-brand-orangered:#FF4500;--color-global-focus:#007FAE;--color-interactive-content-disabled:#ffffff40;--color-interactive-background-disabled:#ffffff0d;--color-interactive-pressed:#ffffff29;--color-neutral-content:#B8C5C9;--color-neutral-content-disabled:#303030;--color-neutral-content-weak:#82959B;--color-neutral-content-strong:#F2F4F5;--color-neutral-background:#0B1416;--color-neutral-background-selected:#1A282D;--color-neutral-background-weak:#04090A;--color-neutral-background-medium:#131313;--color-neutral-background-strong:#0F1A1C;--color-neutral-background-hover:#131F23;--color-neutral-border:#ffffff33;--color-neutral-border-medium:#ffffff80;--color-neutral-border-weak:#ffffff1a;--color-neutral-border-strong:#F2F4F5;--color-primary:#629FFF;--color-primary-hover:#A7CCFF;--color-primary-visited:#D55EFF;--color-primary-background:#0045AC;--color-primary-background-hover:#1870F4;--color-primary-background-selected:#629FFF;--color-primary-onBackground:#ffffff;--color-primary-onBackground-selected:#000000;--color-secondary:#F2F4F5;--color-secondary-hover:#ffffff;--color-secondary-weak:#82959B;--color-secondary-onBackground:#ffffff;--color-secondary-background:#1A282D;--color-secondary-background-hover:#223237;--color-secondary-background-selected:#33464C;--color-secondary-plain:#F2F4F5;--color-secondary-plain-hover:#ffffff;--color-danger-background:#A50016;--color-danger-background-disabled:#3A0008;--color-danger-background-hover:#EB001F;--color-danger-onBackground:#ffffff;--color-danger-content:#FF6E80;--color-danger-content-hover:#FFADB8;--color-success-content:#55BD46;--color-success-hover:#A3E398;--color-success-onBackground:#ffffff;--color-success-background:#0A6000;--color-success-background-hover:#0E8A00;--color-warning-content:#DBAF00;--color-warning-content-hover:#FADB61;--color-warning-onBackground:#000000;--color-warning-background:#DBAF00;--color-warning-background-hover:#FADB61;--color-upvote-content:#FE7C53;--color-upvote-content-weak:var(--color-global-brand-orangered);--color-upvote-disabled:#FE7C534d;--color-upvote-onBackground:#ffffff;--color-upvote-background:#D93A00;--color-upvote-background-hover:#962900;--color-upvote-background-disabled:#D93A004d;--color-downvote-content:#988EFF;--color-downvote-content-weak:#6A5CFF;--color-downvote-disabled:#988EFF4d;--color-downvote-onBackground:#ffffff;--color-downvote-background:#453BB5;--color-downvote-background-hover:#453BB5;--color-downvote-background-disabled:#6A5CFF4d;--color-tone-1:#F2F2F2;--color-tone-2:#ACACAC;--color-tone-3:#434343;--color-tone-4:#303030;--color-tone-5:#1E1E1E;--color-tone-6:#131313;--color-tone-7:#080808;--color-ui-canvas:#080808;--color-ui-modalbackground:var(--color-neutral-background-strong);--color-avatar-gradient:linear-gradient(0deg, #2A3C42ff, #0B1416ff 75%);--color-transparent-background-hover:#667A801a;--color-opacity-50:#F2F2F280;--color-online:#55BD46;--color-favorite:#DBAF00;--color-button-primary-border-activated:transparent;--color-button-plain-inverted-activated-text:var(--color-neutral-background);--color-shimmer-background:#ffffff08;--color-shimmer-gradient-overlay:linear-gradient(to right, #ffffff00, #ffffff05 20%, #ffffff0f 50%, #ffffff08 70%, #ffffff00 100%)}  .theme-light.theme-rpl,.theme-rpl{--spacer-a-px:0.125rem;--spacer-button-lg-px:var(--spacer-md);--spacer-button-md-px:var(--spacer-md);--spacer-button-sm-px:var(--spacer-sm);--spacer-input-padding-left:var(--spacer-md);--spacer-input-padding-top:var(--spacer-2xs);--spacer-label-default:var(--spacer-md);--spacer-switch-input-active-pl:var(--spacer-xs);--size-banner-height:var(--size-rem40);--size-button-lg-h:var(--size-2xl);--size-button-md-h:2.5rem;--size-button-sm-h:var(--size-xl);--size-button-xs-h:var(--size-xl);--size-switch-input-h:var(--size-xl);--size-switch-input-w:var(--size-2xl);--line-a-focus:var(--line-md);--line-a-outline-moz:0px;--line-a-outline-wb:0px;--line-button-lg-border:var(--line-sm);--line-button-md-border:var(--line-sm);--line-button-sm-border:var(--line-sm);--line-button-xs-border:var(--line-sm);--line-button-border-activated:var(--line-lg);--line-input-border:var(--line-lg);--radius-md:1.25rem;--radius-accordion-size:0px;--font-10:normal undefined null/null var(--font-sans);--font-12:normal undefined null/null var(--font-sans);--font-14:normal undefined null/null var(--font-sans);--font-16:normal undefined null/null var(--font-sans);--font-18:normal undefined null/null var(--font-sans);--font-20:normal undefined null/null var(--font-sans);--font-24:normal undefined null/null var(--font-sans);--font-32:normal undefined null/null var(--font-sans);--font-48:normal undefined null/null var(--font-sans);--font-64:normal undefined null/null var(--font-sans);--font-title-h0:var(--font-64);--font-title-h1:var(--font-32);--font-title-h2:var(--font-24);--font-title-h3:var(--font-18);--font-title-h4:var(--font-16);--font-title-h5:var(--font-14);--font-title-h6:var(--font-12);--font-14-20-regular:normal 400 0.875rem/1.25rem var(--font-sans);--font-14-20-semibold:normal 600 0.875rem/1.25rem var(--font-sans);--font-16-20-regular:normal 400 1rem/1.25rem var(--font-sans);--font-12-16-regular:normal 400 0.75rem/1rem var(--font-sans);--font-12-16-semibold:normal 600 0.75rem/1rem var(--font-sans);--font-button-lg:var(--font-14-20-semibold);--font-button-md:var(--font-14-20-semibold);--font-button-sm:var(--font-12-16-semibold);--font-label-default:var(--font-12-16-regular);--misc-accordion-border:0;--misc-accordion-open-list-style-type:none;--misc-accordion-closed-list-style-type:none;--misc-divider-margin:0;--misc-label-text-transform:capitalize;--misc-label-letter-spacing:initial;--blur-sm:0.25rem;--blur-normal:0.5rem;--blur-md:0.75rem;--blur-lg:1rem;--blur-xl:1.5rem;--blur-2xl:2.5rem;--blur-3xl:4rem;--color-pizzaRed:#ef5350;--color-global-brand-orangered:#FF4500;--color-global-focus:#47B0DB;--color-interactive-content-disabled:#00000040;--color-interactive-background-disabled:#0000000d;--color-interactive-pressed:#00000029;--color-neutral-content:#2A3C42;--color-neutral-content-disabled:#D6D6D6;--color-neutral-content-weak:#576F76;--color-neutral-content-strong:#0F1A1C;--color-neutral-background:#ffffff;--color-neutral-background-selected:#EAEDEF;--color-neutral-background-weak:#F9FAFA;--color-neutral-background-medium:#F8F8F8;--color-neutral-background-strong:#ffffff;--color-neutral-background-hover:#F2F4F5;--color-neutral-border:#00000033;--color-neutral-border-medium:#00000080;--color-neutral-border-weak:#0000001a;--color-neutral-border-strong:#0F1A1C;--color-primary:#0045AC;--color-primary-hover:#003584;--color-primary-visited:#8700B5;--color-primary-onBackground:#ffffff;--color-primary-onBackground-selected:#ffffff;--color-primary-background:#0045AC;--color-primary-background-hover:#003584;--color-primary-background-selected:#00255D;--color-secondary:#0F1A1C;--color-secondary-hover:#000000;--color-secondary-weak:#576F76;--color-secondary-onBackground:#000000;--color-secondary-background:#EAEDEF;--color-secondary-background-hover:#E2E7E9;--color-secondary-background-selected:#D2DADD;--color-secondary-plain:#0F1A1C;--color-secondary-plain-hover:#000000;--color-danger-background:#EB001F;--color-danger-background-disabled:#FFCCD2;--color-danger-background-hover:#A50016;--color-danger-onBackground:#ffffff;--color-danger-content:#A50016;--color-danger-content-hover:#7E0011;--color-danger-content-default:#ffffff;--color-brand-background:#D93A00;--color-brand-onBackground:#ffffff;--color-brand-background-hover:#962900;--color-media-background:#00000099;--color-media-onbackground:#ffffff;--color-media-background-hover:#000000cc;--color-media-onbackground-disabled:#ffffff40;--color-media-border-selected:#ffffff;--color-media-background-selected:#000000cc;--color-success-content:#0A6000;--color-success-hover:#084A00;--color-success-onBackground:#ffffff;--color-success-background:#0E8A00;--color-success-background-hover:#0A6000;--color-warning-content:#665505;--color-warning-content-hover:#504104;--color-warning-onBackground:#000000;--color-warning-background:#DBAF00;--color-warning-background-hover:#8F7407;--color-upvote-content:#962900;--color-upvote-content-weak:var(--color-global-brand-orangered);--color-upvote-disabled:#9629004d;--color-upvote-onBackground:#ffffff;--color-upvote-background:#D93A00;--color-upvote-background-hover:#962900;--color-upvote-background-disabled:#D93A004d;--color-downvote-content:#453BB5;--color-downvote-content-weak:#6A5CFF;--color-downvote-disabled:#453BB54d;--color-downvote-onBackground:#ffffff;--color-downvote-background:#6A5CFF;--color-downvote-background-hover:#453BB5;--color-downvote-background-disabled:#6A5CFF4d;--color-brand-gradient-default:linear-gradient(180deg, #D93A00ff, #db3b00ff 30%, #962900ff 100%);--color-brand-gradient-default-highlight:linear-gradient(258deg, #db3f0000 80%, #D93A00ff 100%);--color-brand-gradient-hover:linear-gradient(180deg, #e23d00ff 15%, #cb3600ff 49%, #b43000ff 100%);--color-brand-gradient-hover-highlight:linear-gradient(323deg, #cb360000 65%, #cb3600ff 100%);--color-brand-gradient-active:linear-gradient(180deg, #cd3700ff, #db3b00ff 68%, #D93A00ff 100%);--color-brand-gradient-active-highlight:linear-gradient(83deg, #db3f0000 80%, #D93A00ff 100%);--color-gradient-media:linear-gradient(180deg, #00000000, #0000008a 60%, #00000099 100%);--color-gradient-media-strong:linear-gradient(180deg, #00000000, #000000cc 60%, #000000e6 100%);--color-transparent-background-hover:#82959B1a;--color-global-black:#000000;--color-global-white:#ffffff;--color-global-orangered:#D93A00;--color-global-alienblue:#1870F4;--color-global-darkblue:#131F23;--color-tone-1:#131313;--color-tone-2:#434343;--color-tone-3:#ACACAC;--color-tone-4:#E4E4E4;--color-tone-5:#F2F2F2;--color-tone-6:#F8F8F8;--color-tone-7:#ffffff;--color-action-upvote:#D93A00;--color-action-downvote:#6A5CFF;--color-alert-caution:#8F7407;--color-identity-admin:#D93A00;--color-identity-moderator:#0E8A00;--color-identity-self:#008675;--color-identity-coins:#DBAF00;--color-category-live:#D93A00;--color-category-nsfw:#E00096;--color-category-spoiler:var(--color-tone-1);--color-ui-canvas:var(--color-tone-5);--color-ui-modalbackground:var(--color-neutral-background-strong);--color-avatar-gradient:linear-gradient(0deg, #D2DADDff, #ffffffff 75%);--color-opacity-highlight:linear-gradient(#00255D1a, var(--color-tone-6));--color-opacity-08:#13131314;--color-opacity-50:#00000080;--color-scrim:#00000099;--color-scrim-strong:#000000cc;--color-scrim-gradient:linear-gradient(180deg, #00000000, #0000008a 60%, #00000099 100%);--color-online:#55BD46;--color-favorite:#8F7407;--color-a-default:var(--color-primary);--color-a-hover:var(--color-primary-hover);--color-a-visited:var(--color-primary-visited);--color-banner-plain:var(--color-neutral-background-strong);--color-banner-plain-inverted:var(--color-neutral-content-strong);--color-banner-error:var(--color-danger-background);--color-banner-caution:var(--color-warning-background);--color-banner-success:var(--color-success-background);--color-banner-brand:var(--color-brand-background);--color-banner-plain-text:var(--color-neutral-content);--color-banner-plain-inverted-text:var(--color-neutral-background-weak);--color-banner-error-text:var(--color-danger-onBackground);--color-banner-caution-text:var(--color-warning-onBackground);--color-banner-caution-hover:var(--color-warning-background-hover);--color-banner-success-text:var(--color-success-onBackground);--color-banner-brand-text:var(--color-brand-onBackground);--color-button-overlay-focus:transparent;--color-button-overlay-active:transparent;--color-button-border-width:tomato;--color-button-border-width-activated:tomato;--color-button-primary-background-hover:var(--color-primary-background-hover);--color-button-primary-background-activated:var(--color-primary-background-selected);--color-button-primary-background-disabled:var(--color-interactive-background-disabled);--color-button-primary-border-hover:var(--color-primary-background);--color-button-primary-border-active:var(--color-primary-background-hover);--color-button-primary-text-disabled:var(--color-interactive-content-disabled);--color-button-primary-text-activated:var(--color-primary-onBackground-selected);--color-button-secondary-background:var(--color-secondary-background);--color-button-secondary-background-focus:var(--color-secondary-background);--color-button-secondary-background-hover:var(--color-secondary-background-hover);--color-button-secondary-background-disabled:var(--color-interactive-background-disabled);--color-button-secondary-background-activated:var(--color-secondary-background-selected);--color-button-secondary-border:transparent;--color-button-secondary-border-hover:var(--color-secondary-background);--color-button-secondary-border-active:var(--color-secondary-background-hover);--color-button-secondary-border-activated:transparent;--color-button-secondary-border-disabled:transparent;--color-button-secondary-text:var(--color-secondary-onBackground);--color-button-secondary-text-disabled:var(--color-interactive-content-disabled);--color-button-secondary-text-activated:var(--color-secondary-onBackground);--color-button-tertiary-background:transparent;--color-button-tertiary-background-focus:transparent;--color-button-tertiary-background-hover:var(--color-secondary-background-hover);--color-button-tertiary-background-disabled:transparent;--color-button-tertiary-background-activated:var(--color-neutral-content);--color-button-tertiary-border-hover:var(--color-secondary-background);--color-button-tertiary-border-active:var(--color-secondary-background-hover);--color-button-tertiary-text:var(--color-neutral-content-strong);--color-button-tertiary-text-disabled:var(--color-neutral-content-disabled);--color-button-tertiary-text-activated:var(--color-neutral-background);--color-button-plain-background-hover:var(--color-secondary-background-hover);--color-button-plain-background-disabled:transparent;--color-button-plain-background-activated:var(--color-secondary-background-selected);--color-button-plain-border-hover:var(--color-secondary-background);--color-button-plain-border-active:var(--color-secondary-background-hover);--color-button-plain-text:var(--color-secondary-plain);--color-button-plain-text-hover:var(--color-secondary-plain-hover);--color-button-plain-text-disabled:var(--color-interactive-content-disabled);--color-button-plain-text-activated:var(--color-secondary-onBackground);--color-button-primary-border-activated:var(--color-primary-background);--color-button-plain-inverted-background-activated:var(--color-neutral-content);--color-button-plain-inverted-text-activated:var(--color-neutral-background);--color-button-media-border-color-activated:var(--color-media-border-selected);--color-button-favorite-text:var(--color-favorite);--color-button-caution-background:var(--color-warning-background);--color-button-caution-background-hover:var(--color-warning-background-hover);--color-button-caution-background-disabled:var(--color-interactive-background-disabled);--color-button-caution-text:var(--color-warning-onBackground);--color-divider-default:var(--color-neutral-border);--color-input-secondary:var(--color-secondary-background);--color-input-secondary-hover:var(--color-secondary-background-hover);--color-input-border:transparent;--color-input-bordered:transparent;--color-input-bordered-hover:var(--color-neutral-background-hover);--color-input-secondary-text:var(--color-secondary-onBackground);--color-input-bordered-text:var(--color-secondary-plain);--color-input-helper-text:var(--color-neutral-content-weak);--color-input-pressed:var(--color-interactive-pressed);--color-label-default:var(--color-neutral-content-weak);--color-shimmer-background:#00000008;--color-shimmer-gradient-overlay:linear-gradient(to right, #00000000, #00000005 20%, #0000000f 50%, #00000008 70%, #00000000 100%);--color-switch-input-background-pressed-scrim:var(--color-interactive-pressed);--color-switch-input-background-handle:var(--color-global-white);--color-switch-input-background-handle-disabled:var(--color-secondary-background);--color-switch-input-background-default:var(--color-secondary-background);--color-switch-input-background-default-hover:var(--color-secondary-background-hover);--color-switch-input-background-default-disabled:var(--color-interactive-background-disabled);--color-switch-input-background-checked:var(--color-primary-background);--color-switch-input-background-checked-hover:var(--color-primary-background-hover);--color-switch-input-background-checked-disabled:var(--color-interactive-content-disabled);--color-tooltip-bg-neutral:var(--color-neutral-background-strong);--color-tooltip-text-neutral:var(--color-neutral-content);--color-tooltip-bg-inverted:var(--color-neutral-content);--color-tooltip-text-inverted:var(--color-neutral-background);--color-tooltip-bg-primary:var(--color-primary-background);--color-tooltip-text-primary:var(--color-primary-onBackground);--elevation-sm-inset:inset 0 0.0625rem 0.125rem 0 #00000021;--elevation-button-focus:var(--elevation-focus-ring);--elevation-switch-input-default-inset:var(--elevation-sm-inset)}  @media (prefers-color-scheme:dark){:root:not(.theme-light) .theme-rpl,:root:not(.theme-light).theme-rpl{--color-pizzaRed:#c62828;--color-global-brand-orangered:#FF4500;--color-global-focus:#007FAE;--color-interactive-content-disabled:#ffffff40;--color-interactive-background-disabled:#ffffff0d;--color-interactive-pressed:#ffffff29;--color-neutral-content:#B8C5C9;--color-neutral-content-disabled:#303030;--color-neutral-content-weak:#82959B;--color-neutral-content-strong:#F2F4F5;--color-neutral-background:#0B1416;--color-neutral-background-selected:#1A282D;--color-neutral-background-weak:#04090A;--color-neutral-background-medium:#131313;--color-neutral-background-strong:#0F1A1C;--color-neutral-background-hover:#131F23;--color-neutral-border:#ffffff33;--color-neutral-border-medium:#ffffff80;--color-neutral-border-weak:#ffffff1a;--color-neutral-border-strong:#F2F4F5;--color-primary:#629FFF;--color-primary-hover:#A7CCFF;--color-primary-visited:#D55EFF;--color-primary-background:#0045AC;--color-primary-background-hover:#1870F4;--color-primary-background-selected:#629FFF;--color-primary-onBackground:#ffffff;--color-primary-onBackground-selected:#000000;--color-secondary:#F2F4F5;--color-secondary-hover:#ffffff;--color-secondary-weak:#82959B;--color-secondary-onBackground:#ffffff;--color-secondary-background:#1A282D;--color-secondary-background-hover:#223237;--color-secondary-background-selected:#33464C;--color-secondary-plain:#F2F4F5;--color-secondary-plain-hover:#ffffff;--color-danger-background:#A50016;--color-danger-background-disabled:#3A0008;--color-danger-background-hover:#EB001F;--color-danger-onBackground:#ffffff;--color-danger-content:#FF6E80;--color-danger-content-hover:#FFADB8;--color-success-content:#55BD46;--color-success-hover:#A3E398;--color-success-onBackground:#ffffff;--color-success-background:#0A6000;--color-success-background-hover:#0E8A00;--color-warning-content:#DBAF00;--color-warning-content-hover:#FADB61;--color-warning-onBackground:#000000;--color-warning-background:#DBAF00;--color-warning-background-hover:#FADB61;--color-upvote-content:#FE7C53;--color-upvote-content-weak:var(--color-global-brand-orangered);--color-upvote-disabled:#FE7C534d;--color-upvote-onBackground:#ffffff;--color-upvote-background:#D93A00;--color-upvote-background-hover:#962900;--color-upvote-background-disabled:#D93A004d;--color-downvote-content:#988EFF;--color-downvote-content-weak:#6A5CFF;--color-downvote-disabled:#988EFF4d;--color-downvote-onBackground:#ffffff;--color-downvote-background:#453BB5;--color-downvote-background-hover:#453BB5;--color-downvote-background-disabled:#6A5CFF4d;--color-tone-1:#F2F2F2;--color-tone-2:#ACACAC;--color-tone-3:#434343;--color-tone-4:#303030;--color-tone-5:#1E1E1E;--color-tone-6:#131313;--color-tone-7:#080808;--color-ui-canvas:#080808;--color-ui-modalbackground:var(--color-neutral-background-strong);--color-avatar-gradient:linear-gradient(0deg, #2A3C42ff, #0B1416ff 75%);--color-transparent-background-hover:#667A801a;--color-opacity-50:#F2F2F280;--color-online:#55BD46;--color-favorite:#DBAF00;--color-button-primary-border-activated:transparent;--color-button-plain-inverted-activated-text:var(--color-neutral-background);--color-shimmer-background:#ffffff08;--color-shimmer-gradient-overlay:linear-gradient(to right, #ffffff00, #ffffff05 20%, #ffffff0f 50%, #ffffff08 70%, #ffffff00 100%)}}  .theme-dark .theme-rpl,.theme-dark.theme-rpl{--color-pizzaRed:#c62828;--color-global-brand-orangered:#FF4500;--color-global-focus:#007FAE;--color-interactive-content-disabled:#ffffff40;--color-interactive-background-disabled:#ffffff0d;--color-interactive-pressed:#ffffff29;--color-neutral-content:#B8C5C9;--color-neutral-content-disabled:#303030;--color-neutral-content-weak:#82959B;--color-neutral-content-strong:#F2F4F5;--color-neutral-background:#0B1416;--color-neutral-background-selected:#1A282D;--color-neutral-background-weak:#04090A;--color-neutral-background-medium:#131313;--color-neutral-background-strong:#0F1A1C;--color-neutral-background-hover:#131F23;--color-neutral-border:#ffffff33;--color-neutral-border-medium:#ffffff80;--color-neutral-border-weak:#ffffff1a;--color-neutral-border-strong:#F2F4F5;--color-primary:#629FFF;--color-primary-hover:#A7CCFF;--color-primary-visited:#D55EFF;--color-primary-background:#0045AC;--color-primary-background-hover:#1870F4;--color-primary-background-selected:#629FFF;--color-primary-onBackground:#ffffff;--color-primary-onBackground-selected:#000000;--color-secondary:#F2F4F5;--color-secondary-hover:#ffffff;--color-secondary-weak:#82959B;--color-secondary-onBackground:#ffffff;--color-secondary-background:#1A282D;--color-secondary-background-hover:#223237;--color-secondary-background-selected:#33464C;--color-secondary-plain:#F2F4F5;--color-secondary-plain-hover:#ffffff;--color-danger-background:#A50016;--color-danger-background-disabled:#3A0008;--color-danger-background-hover:#EB001F;--color-danger-onBackground:#ffffff;--color-danger-content:#FF6E80;--color-danger-content-hover:#FFADB8;--color-success-content:#55BD46;--color-success-hover:#A3E398;--color-success-onBackground:#ffffff;--color-success-background:#0A6000;--color-success-background-hover:#0E8A00;--color-warning-content:#DBAF00;--color-warning-content-hover:#FADB61;--color-warning-onBackground:#000000;--color-warning-background:#DBAF00;--color-warning-background-hover:#FADB61;--color-upvote-content:#FE7C53;--color-upvote-content-weak:var(--color-global-brand-orangered);--color-upvote-disabled:#FE7C534d;--color-upvote-onBackground:#ffffff;--color-upvote-background:#D93A00;--color-upvote-background-hover:#962900;--color-upvote-background-disabled:#D93A004d;--color-downvote-content:#988EFF;--color-downvote-content-weak:#6A5CFF;--color-downvote-disabled:#988EFF4d;--color-downvote-onBackground:#ffffff;--color-downvote-background:#453BB5;--color-downvote-background-hover:#453BB5;--color-downvote-background-disabled:#6A5CFF4d;--color-tone-1:#F2F2F2;--color-tone-2:#ACACAC;--color-tone-3:#434343;--color-tone-4:#303030;--color-tone-5:#1E1E1E;--color-tone-6:#131313;--color-tone-7:#080808;--color-ui-canvas:#080808;--color-ui-modalbackground:var(--color-neutral-background-strong);--color-avatar-gradient:linear-gradient(0deg, #2A3C42ff, #0B1416ff 75%);--color-transparent-background-hover:#667A801a;--color-opacity-50:#F2F2F280;--color-online:#55BD46;--color-favorite:#DBAF00;--color-button-primary-border-activated:transparent;--color-button-plain-inverted-activated-text:var(--color-neutral-background);--color-shimmer-background:#ffffff08;--color-shimmer-gradient-overlay:linear-gradient(to right, #ffffff00, #ffffff05 20%, #ffffff0f 50%, #ffffff08 70%, #ffffff00 100%)}  :root{font-family:var(--font-sans);font-size:16px}  .theme-dark,.theme-light,:root{background:var(--color-tone-7);color:var(--color-tone-1)}  body{font-size:var(--font-body)}  :not(:defined):not(faceplate-auto-height-animator,faceplate-dropdown-menu,faceplate-expandable-section-helper,faceplate-hovercard){visibility:hidden}  faceplate-hovercard:not(:defined)>[slot=content]{display:none}  faceplate-banner [slot=closeButton]{margin-left:var(--spacer-sm)}  faceplate-banner [slot=actionButtons] button:first-of-type{margin-right:var(--spacer-xs)}  faceplate-banner[appearance=caution] button{color:var(--color-banner-caution-text)}  faceplate-banner[appearance=caution] button:hover{background-color:var(--color-banner-caution-hover)}  .button-favorite{--button-color-background-focus:transparent;--button-color-background-hover:var(--color-button-plain-background-hover);--button-color-background-disabled:var(--color-button-plain-background-disabled);--button-color-background-activated:var(--color-button-plain-background-activated);--button-color-background-active:linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover));--button-color-text-default:var(--color-button-plain-text);--button-color-text-disabled:var(--color-button-plain-text-disabled);--button-color-text-activated:var(--color-button-plain-text-activated);--button-color-text-hover:var(--color-button-plain-text-hover);--button-border-color-default:transparent;--button-color-text-default:var(--color-neutral-content-weak);--button-color-background-default:transparent;--button-color-text-hover:var(--color-secondary-onBackground)}  .button-favorite-toggled{--button-color-background-focus:transparent;--button-color-background-hover:var(--color-button-plain-background-hover);--button-color-background-disabled:var(--color-button-plain-background-disabled);--button-color-background-activated:var(--color-button-plain-background-activated);--button-color-background-active:linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover));--button-color-text-default:var(--color-button-plain-text);--button-color-text-disabled:var(--color-button-plain-text-disabled);--button-color-text-activated:var(--color-button-plain-text-activated);--button-color-text-hover:var(--color-button-plain-text-hover);--button-border-color-default:transparent;--button-color-background-default:transparent;--button-color-text-default:var(--color-button-favorite-text);--button-color-text-hover:var(--color-button-favorite-text)}  .button-secondary-toggled{--button-color-background-default:var(--color-button-secondary-background);--button-color-background-focus:var(--color-button-secondary-background-focus);--button-color-background-hover:var(--color-button-secondary-background-hover);--button-color-background-active:linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover));--button-color-background-disabled:var(--color-button-secondary-background-disabled);--button-color-background-activated:var(--color-button-secondary-background-activated);--button-color-text-default:var(--color-button-secondary-text);--button-color-text-disabled:var(--color-button-secondary-text-disabled);--button-color-text-activated:var(--color-button-secondary-text-activated);--button-border-color-default:var(--color-button-secondary-border);--button-color-background-default:var(--color-button-secondary-background-activated)}  .button-caution{--button-color-background-default:var(--color-button-caution-background);--button-color-background-hover:var(--color-button-caution-background-hover);--button-color-background-disabled:var(--color-button-caution-background-disabled);--button-color-text-default:var(--color-caution-text)}  button[upvote]:not(:disabled):focus-visible .upvote-hover,button[upvote]:not(:disabled):hover .upvote-hover{display:inline-flex}  button[downvote]:not(:disabled):focus-visible .downvote-hover,button[downvote]:not(:disabled):hover .downvote-hover{display:inline-flex}  button[upvote][aria-pressed=true]:not(:disabled):focus-visible .upvote-hover,button[upvote][aria-pressed=true]:not(:disabled):hover .upvote-hover{display:none}  button[upvote][aria-pressed=false]:not(:disabled):focus-visible .upvote-indicator,button[upvote][aria-pressed=false]:not(:disabled):hover .upvote-indicator{display:none}  button[downvote][aria-pressed=true]:not(:disabled):focus-visible .downvote-hover,button[downvote][aria-pressed=true]:not(:disabled):hover .downvote-hover{display:none}  button[downvote][aria-pressed=false]:not(:disabled):focus-visible .downvote-indicator,button[downvote][aria-pressed=false]:not(:disabled):hover .downvote-indicator{display:none}  faceplate-dropdown-menu:not(.connected) [slot=menu]{display:none}  faceplate-expandable-section-helper{display:contents}  faceplate-expandable-section-helper>details>summary{list-style-type:none}  faceplate-expandable-section-helper>details>summary::-webkit-details-marker,faceplate-expandable-section-helper>details>summary::marker{display:none}  faceplate-expandable-section-helper[rpl]>details>summary{margin:0}  faceplate-expandable-section-helper>details>summary [icon-name=caret-down-outline]{transition:transform .22s ease-in-out}  faceplate-expandable-section-helper:not(:defined)>details[open] summary [icon-name=caret-down-outline],faceplate-expandable-section-helper[open] summary [icon-name=caret-down-outline]{transform:rotate(180deg)}  faceplate-expandable-section-helper:not(:defined)>details:not([open]) summary [icon-name=caret-down-outline],faceplate-expandable-section-helper:not([open]) summary [icon-name=caret-down-outline]{transform:rotate(0)}  address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,menu,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,textarea,ul,video{margin-bottom:1rem}  button,html,input,select{font-family:var(--font-sans)}  body{--faceplate-body-padding:1.5rem;margin:0 auto;padding:var(--faceplate-body-padding);overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;line-height:1.5}  @media (max-width:599px){body{--faceplate-body-padding:1rem}}  ::-moz-selection{background:var(--color-primary-background);color:var(--color-tone-7)}  ::selection{background:var(--color-primary-background);color:var(--color-tone-7)}  h1,h2,h3,h4,h5,h6{margin:1em 0 .5em}  h1{font:var(--font-title-h1)}  h2{font:var(--font-title-h2)}  h3{font:var(--font-title-h3)}  h4{font:var(--font-title-h4)}  h5{font:var(--font-title-h5)}  h6{font:var(--font-title-h6)}  label{text-transform:var(--misc-label-text-transform);letter-spacing:var(--misc-label-letter-spacing);font:var(--font-label-default);color:var(--color-label-default)}  label>input,label>textarea{margin-top:var(--spacer-label-default)}  faceplate-switch-input+label,input[type=checkbox]+label,input[type=radio]+label{font-size:inherit;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;vertical-align:middle}  a{color:var(--color-primary-background-hover);text-decoration:none}  a:hover{text-decoration:underline}  abbr:hover{cursor:help}  blockquote{padding:1.5rem;background:var(--color-tone-6);border-left:5px solid var(--color-tone-5)}  abbr{cursor:help}  blockquote :last-child{padding-bottom:0;margin-bottom:0}  header{padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);margin-left:calc(0px - (50vw - 50%));margin-right:calc(0px - (50vw - 50%));padding-top:var(--faceplate-body-padding);padding-bottom:var(--faceplate-body-padding);margin-top:calc(-1 * var(--faceplate-body-padding));margin-bottom:var(--faceplate-body-padding);background:var(--color-tone-6)}  article header,aside header,dialog header,faceplate-dialog header,main header,section header{padding:.5rem 0;margin:1rem 0;background:0 0}  article header h1,aside header h1,dialog header h1,faceplate-dialog header h1,main header h1,section header h1{font:var(--font-title-h1)}  header h1{font:var(--font-title-h0)}  header>:first-child{margin-top:0}  header>:last-child{margin-bottom:0}  :where(button),:where(input):where([type=submit],[type=reset],[type=button]){background:var(--button-color-background);border-radius:999px;border:none;border:var(--button-border-width,0) solid var(--button-border-color,transparent);box-shadow:var(--button-shadow);box-sizing:border-box;color:var(--button-color-text);cursor:pointer;display:inline-block;font:var(--button-font);height:var(--button-height);line-height:calc(var(--button-height) - (2 * var(--button-border-width,0px)));overflow:hidden;padding:0 calc(var(--button-padding) - var(--button-border-width,0px));text-align:center;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;--button-border-color:var(--button-border-color-default);--button-border-width:var(--button-border-width-default);--button-color-background:var(--button-color-background-default);--button-color-text:var(--button-color-text-default);--button-height:var(--size-button-sm-h);--button-padding:var(--spacer-2xs);--button-font:var(--font-button-sm);--button-border-width-default:var(--line-button-sm-border);--button-color-background-default:var(--color-button-secondary-background);--button-color-background-focus:var(--color-button-secondary-background-focus);--button-color-background-hover:var(--color-button-secondary-background-hover);--button-color-background-active:linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover));--button-color-background-disabled:var(--color-button-secondary-background-disabled);--button-color-background-activated:var(--color-button-secondary-background-activated);--button-color-text-default:var(--color-button-secondary-text);--button-color-text-disabled:var(--color-button-secondary-text-disabled);--button-color-text-activated:var(--color-button-secondary-text-activated);--button-border-color-default:var(--color-button-secondary-border)}  :where(button) .button-icon,:where(input):where([type=submit],[type=reset],[type=button]) .button-icon{margin-right:var(--spacer-xs)}  :where(button) .dropdown-icon,:where(input):where([type=submit],[type=reset],[type=button]) .dropdown-icon{transform:rotate(0);transition:transform .2s ease-in-out}  :where(button).hover,:where(button):focus,:where(button):hover,:where(input):where([type=submit],[type=reset],[type=button]).hover,:where(input):where([type=submit],[type=reset],[type=button]):focus,:where(input):where([type=submit],[type=reset],[type=button]):hover{--button-color-overlay:var(--color-button-overlay-focus)}  :where(button).hover,:where(button):hover,:where(input):where([type=submit],[type=reset],[type=button]).hover,:where(input):where([type=submit],[type=reset],[type=button]):hover{--button-border-color:var(--button-border-color-hover);--button-color-background:var(--button-color-background-hover);--button-color-text:var(--button-color-text-hover, var(--button-color-text-default))}  :where(button).active,:where(button):active,:where(input):where([type=submit],[type=reset],[type=button]).active,:where(input):where([type=submit],[type=reset],[type=button]):active{--button-color-overlay:var(--color-button-overlay-active);--button-color-background:linear-gradient(var(--color-interactive-pressed), var(--color-interactive-pressed)),var(--button-color-background-active)}  :where(button).anchor-disabled,:where(button):disabled,:where(input):where([type=submit],[type=reset],[type=button]).anchor-disabled,:where(input):where([type=submit],[type=reset],[type=button]):disabled{--button-border-color-hover:var(--button-border-color-default);--button-color-background:var(--button-color-background-disabled);--button-color-text:var(--button-color-text-disabled);cursor:not-allowed;pointer-events:none}  :where(button).button-activated,:where(input):where([type=submit],[type=reset],[type=button]).button-activated{--button-border-color:var(--button-border-color-activated);--button-color-background:var(--button-color-background-activated);--button-color-text:var(--button-color-text-activated)}  :where(button).icon,:where(input):where([type=submit],[type=reset],[type=button]).icon{padding:calc(var(--rem6) + var(--rem1))}  small :where(button),small :where(input):where([type=submit],[type=reset],[type=button]){--button-height:var(--size-button-xs-h);--button-padding:var(--spacer-sm);--button-font:var(--font-button-xs);--button-border-width-default:var(--line-button-xs-border)}  :where(button).button-large,:where(input):where([type=submit],[type=reset],[type=button]).button-large{--button-height:var(--size-button-lg-h);--button-padding:var(--spacer-xs);--button-font:var(--font-button-lg);--button-border-width-default:var(--line-button-lg-border)}  :where(button).button-large.icon,:where(input):where([type=submit],[type=reset],[type=button]).button-large.icon{padding:calc(var(--rem12) + var(--rem1))}  :where(button).button-primary,:where(input):where([type=submit],[type=reset],[type=button]).button-primary{--button-color-background-default:var(--color-primary-background);--button-color-background-focus:var(--color-primary-background);--button-color-background-hover:var(--color-button-primary-background-hover);--button-color-background-active:linear-gradient(var(--color-button-primary-background-hover), var(--color-button-primary-background-hover));--button-color-background-disabled:var(--color-button-primary-background-disabled);--button-color-background-activated:var(--color-button-primary-background-activated);--button-color-text-default:var(--color-global-white);--button-color-text-disabled:var(--color-button-primary-text-disabled);--button-color-text-activated:var(--color-button-primary-text-activated);--button-border-color-default:transparent}  :where(button).button-plain,:where(input):where([type=submit],[type=reset],[type=button]).button-plain{--button-color-background-default:transparent;--button-color-background-focus:transparent;--button-color-background-hover:var(--color-button-plain-background-hover);--button-color-background-disabled:var(--color-button-plain-background-disabled);--button-color-background-activated:var(--color-button-plain-background-activated);--button-color-background-active:linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover));--button-color-text-default:var(--color-button-plain-text);--button-color-text-disabled:var(--color-button-plain-text-disabled);--button-color-text-activated:var(--color-button-plain-text-activated);--button-color-text-hover:var(--color-button-plain-text-hover);--button-border-color-default:transparent}  :where(button).button-icon-only,:where(input):where([type=submit],[type=reset],[type=button]).button-icon-only{--button-padding:0;width:var(--button-height)}  :root{--button-color-background-default:var(--color-button-secondary-background);--button-color-background-focus:var(--color-button-secondary-background-focus);--button-color-background-hover:var(--color-button-secondary-background-hover);--button-color-background-active:linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover));--button-color-background-disabled:var(--color-button-secondary-background-disabled);--button-color-background-activated:var(--color-button-secondary-background-activated);--button-color-text-default:var(--color-button-secondary-text);--button-color-text-disabled:var(--color-button-secondary-text-disabled);--button-color-text-activated:var(--color-button-secondary-text-activated);--button-border-color-default:var(--color-button-secondary-border)}  :where(button,input):where([type=submit]){--button-color-background-default:var(--color-primary-background);--button-color-background-focus:var(--color-primary-background);--button-color-background-hover:var(--color-button-primary-background-hover);--button-color-background-active:linear-gradient(var(--color-button-primary-background-hover), var(--color-button-primary-background-hover));--button-color-background-disabled:var(--color-button-primary-background-disabled);--button-color-background-activated:var(--color-button-primary-background-activated);--button-color-text-default:var(--color-global-white);--button-color-text-disabled:var(--color-button-primary-text-disabled);--button-color-text-activated:var(--color-button-primary-text-activated);--button-border-color-default:transparent}  faceplate-tablist button{border-radius:0}  faceplate-tablist button:first-child{border-radius:999px 0 0 999px}  faceplate-tablist button:last-child{border-radius:0 999px 999px 0}  faceplate-tablist a{border-bottom:2px solid var(--button-color-primary);color:inherit;display:inline-block;font:var(--font-button-b3);padding:.5rem 1rem .375rem}  faceplate-tablist a:hover{text-decoration:none}  code,kbd,pre,samp{font-size:var(--font-code);font-family:var(--font-mono);background:var(--color-tone-6);border:1px solid var(--color-tone-5);border-radius:4px;padding:2px 4px;font-size:.9em}  pre{background:var(--color-tone-5);border-color:var(--color-tone-4);padding:1rem 1.4rem;max-width:100%;overflow:auto}  kbd{border-bottom-width:3px}  pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}  code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}  details{padding:.5rem 1rem;background:var(--color-tone-6);border:var(--misc-accordion-border);border-radius:var(--radius-accordion-size)}  details summary{cursor:pointer;font-weight:700;list-style-type:var(--misc-accordion-closed-list-style-type)}  details[open] summary{margin-bottom:.375rem;list-style-type:var(--misc-accordion-open-list-style-type)}  details[open] summary icon-caret-down{transform:rotate(180deg);transition:transform .22s ease-in-out}  details summary icon-caret-down{transform:rotate(0);transition:transform .22s ease-in-out}  details[open]>:last-child{margin-bottom:0}  dt{font-weight:700;margin-bottom:.5rem}  dd{-webkit-margin-start:2rem;margin-inline-start:2rem}  hr{border:0;border-bottom:1px solid var(--color-divider-default);background-color:transparent;margin:var(--misc-divider-margin)}  hr[padding=\'2xs\']{padding:var(--spacer-2xs)}  hr[padding=xs]{padding:var(--spacer-xs)}  hr[padding=sm]{padding:var(--spacer-sm)}  hr[padding=md]{padding:var(--spacer-md)}  hr[color=subdued]{border-bottom-color:var(--color-neutral-border-weak)}  hr[color=inverted]{border-bottom-color:var(--color-neutral-border-strong)}  fieldset{margin-top:1rem;padding:1rem 2rem;border:1px solid var(--color-tone-5);border-radius:.25rem;background:var(--color-tone-7);min-width:0}  legend{padding:0;font-weight:700}  table{border-collapse:collapse;width:100%;word-break:normal;margin-bottom:1rem}  td,th{text-align:left;padding:.5rem}  th{background:var(--color-tone-6)}  tr:nth-child(even){background:var(--color-tone-6)}  table caption{font-weight:700;margin-bottom:.5rem}  textarea{max-width:100%}  ol,ul{padding-left:2rem}  li{margin-top:.25rem}  menu{list-style-type:none;padding-left:0;border-radius:4px;width:-moz-fit-content;width:fit-content;border:1px solid var(--color-tone-5)}  menu li{padding:.5rem .75rem;-webkit-border-after:1px solid var(--color-tone-5);border-block-end:1px solid var(--color-tone-5)}  menu li:last-child{-webkit-border-after:none;border-block-end:none}  menu menu,ol ol,ol ul,ul ol,ul ul{margin-bottom:0}  ins{text-decoration-color:var(--color-success-content);text-decoration-line:overline underline;text-underline-position:under}  del{text-decoration-color:var(--color-danger-content);text-decoration-line:overline underline line-through;text-underline-position:under}  input,select,textarea{font-family:var(--font-sans);color:var(--color-input-text);padding:.5rem .75rem;margin-bottom:.5rem;background:var(--color-input-default);border:var(--color-input-default) solid var(--line-input-border);border-radius:var(--radius-sm);box-shadow:none;box-sizing:border-box;font-size:1rem}  input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}  input:invalid,select:invalid,textarea:invalid{border-color:var(--color-danger-content)}  img{max-width:100%}  input[type=checkbox],input[type=radio]{vertical-align:middle;margin-bottom:0;margin-top:0}  input[type=color],input[type=range]{padding:initial}  input[type=search]{border-radius:400px;-webkit-appearance:textfield}  input{max-width:100%}  dialog{border:0;border-radius:4px;padding:1rem;box-shadow:var(--boxshadow-modal);background:var(--color-ui-modalbackground)}  dialog::backdrop{background:var(--color-scrim)}  .fp-avatar-container img{margin-bottom:0}  /** Text outline classes */  .text-outline-thin-bright {    text-shadow: #000 1px 0 0.5px, #000 -1px 0 0.5px, #000 0 1px 0.5px, #000 0 -1px 0.5px;  }  .text-outline-thick-bright {    text-shadow: #000 1px 0 2px, #000 -1px 0 2px, #000 0 1px 1px, #000 0 -1px 1px, #000 1px 0 2px,      #000 -1px 0 2px, #000 0 1px 1px, #000 0 -1px 1px;  }  .text-outline-thin-dark {    text-shadow: #fff 1px 0 0.5px, #fff -1px 0 0.5px, #fff 0 1px 0.5px, #fff 0 -1px 0.5px;  }  .text-outline-thick-dark {    text-shadow: #fff 1px 0 2px, #fff -1px 0 2px, #fff 0 1px 1px, #fff 0 -1px 1px, #fff 1px 0 2px,      #fff -1px 0 2px, #fff 0 1px 1px, #fff 0 -1px 1px;  }  /** Custom border sizes */  .border-dx-thick {    border-width: 2px;  }  .border-dx-thin {    border-width: 1px;  }  /** Custom border radius sizes */  .rounded-dx-lg {    border-radius: 1.5rem;  }  .rounded-dx-md {    border-radius: 1rem;  }  .rounded-dx-sm {    border-radius: 0.5rem;  }  /** Custom z-index for form dialogs */  .z-dialog {    z-index: 100;  }  .container {    width: 100%;  }  @media (min-width: 1024px) {    .container {      max-width: 1024px;    }  }  /* Anchor component*/  .a {      border: var(--line-a-focus) solid transparent;      border-radius: 2px;      color: var(--color-a-default);      font-size: 1em;      padding: 0 var(--spacer-a-px);      margin: calc(-1 * var(--line-a-focus)) calc(-1 * (var(--spacer-a-px) + var(--line-a-focus)));      text-decoration: none;    }  .a:hover {      color: var(--color-a-hover);    }  .a:visited:not(.no-visited),    .a.visited:not(.no-visited) {      color: var(--color-a-visited);    }  /* Button component */  .button {      background: var(--button-color-background);      border-radius: 999px;      border: none;      border: var(--button-border-width, 0) solid var(--button-border-color, transparent);      box-shadow: var(--button-shadow);      box-sizing: border-box;      color: var(--button-color-text);      cursor: pointer;      display: inline-block;      font: var(--button-font);      height: var(--button-height);      line-height: calc(var(--button-height) - (2 * var(--button-border-width, 0px)));      overflow: hidden;      padding: 0 calc(var(--button-padding) - var(--button-border-width, 0px));      text-align: center;      text-decoration: none;      text-overflow: ellipsis;      white-space: nowrap;      --button-border-color: var(--button-border-color-default);      --button-border-width: var(--button-border-width-default);      --button-color-background: var(--button-color-background-default);      --button-color-text: var(--button-color-text-default);      /* This is :active, AKA Pressed */      /* This is Selected */    }  .button .button-icon {      margin-right: var(--spacer-xs);    }  .button .dropdown-icon {      transform: rotate(0deg);      transition: transform 0.2s ease-in-out;    }  .button:focus,    .button:hover,    .button.hover {      --button-color-overlay: var(--color-button-overlay-focus);    }  .button:hover,    .button.hover {      --button-border-color: var(--button-border-color-hover);      --button-color-background: var(--button-color-background-hover);      --button-color-text: var(--button-color-text-hover, var(--button-color-text-default));    }  .button:active,    .button.active {      --button-color-overlay: var(--color-button-overlay-active);      --button-color-background: linear-gradient(var(--color-interactive-pressed), var(--color-interactive-pressed)),        var(--button-color-background-active);    }  .button:disabled,    .button.anchor-disabled {      --button-border-color-hover: var(--button-border-color-default);      --button-color-background: var(--button-color-background-disabled);      --button-color-text: var(--button-color-text-disabled);      cursor: not-allowed;      pointer-events: none;    }  .button.button-activated {      --button-border-color: var(--button-border-color-activated);      --button-color-background: var(--button-color-background-activated);      --button-color-text: var(--button-color-text-activated);    }  .button-shell {      background: var(--button-color-background);      border-radius: 999px;      border: none;      border: var(--button-border-width, 0) solid var(--button-border-color, transparent);      box-shadow: var(--button-shadow);      box-sizing: border-box;      color: var(--button-color-text);      cursor: pointer;      display: inline-block;      font: var(--button-font);      height: var(--button-height);      line-height: calc(var(--button-height) - (2 * var(--button-border-width, 0px)));      overflow: hidden;      padding: 0 calc(var(--button-padding) - var(--button-border-width, 0px));      text-align: center;      text-decoration: none;      text-overflow: ellipsis;      white-space: nowrap;      --button-border-color: var(--button-border-color-default);      --button-border-width: var(--button-border-width-default);      --button-color-background: var(--button-color-background-default);      --button-color-text: var(--button-color-text-default);    }  .button-large {      --button-height: var(--size-button-lg-h);      --button-padding: var(--spacer-xs);      --button-font: var(--font-button-lg);      --button-border-width-default: var(--line-button-lg-border);    }  .button-large.icon {      padding: calc(var(--rem12) + var(--rem1));    }  .button-medium {      --button-height: var(--size-button-md-h);      --button-padding: var(--spacer-xs);      --button-font: var(--font-button-md);      --button-border-width-default: var(--line-button-md-border);    }  .button-medium.icon {      padding: calc(var(--rem8) + var(--rem1));    }  .button-small {      --button-height: var(--size-button-sm-h);      --button-padding: var(--spacer-2xs);      --button-font: var(--font-button-sm);      --button-border-width-default: var(--line-button-sm-border);    }  .button-small.icon {      padding: calc(var(--rem6) + var(--rem1));    }  .button-primary {      --button-color-background-default: var(--color-primary-background);      --button-color-background-focus: var(--color-primary-background);      --button-color-background-hover: var(--color-button-primary-background-hover);      --button-color-background-active: linear-gradient(var(--color-button-primary-background-hover), var(--color-button-primary-background-hover));      --button-color-background-disabled: var(--color-button-primary-background-disabled);      --button-color-background-activated: var(--color-button-primary-background-activated);      --button-color-text-default: var(--color-global-white);      --button-color-text-disabled: var(--color-button-primary-text-disabled);      --button-color-text-activated: var(--color-button-primary-text-activated);      --button-border-color-default: transparent;    }  .button-secondary {      --button-color-background-default: var(--color-button-secondary-background);      --button-color-background-focus: var(--color-button-secondary-background-focus);      --button-color-background-hover: var(--color-button-secondary-background-hover);      --button-color-background-active: linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover));      --button-color-background-disabled: var(--color-button-secondary-background-disabled);      --button-color-background-activated: var(--color-button-secondary-background-activated);      --button-color-text-default: var(--color-button-secondary-text);      --button-color-text-disabled: var(--color-button-secondary-text-disabled);      --button-color-text-activated: var(--color-button-secondary-text-activated);      --button-border-color-default: var(--color-button-secondary-border);    }  .button-tertiary {      --button-color-background-default: var(--color-button-tertiary-background);      --button-color-background-focus: var(--color-button-tertiary-background-focus);      --button-color-background-hover: var(--color-button-tertiary-background-hover);      --button-color-background-disabled: var(--color-button-tertiary-background-disabled);      --button-color-background-activated: var(--color-button-tertiary-background-activated);      --button-color-text-default: var(--color-button-tertiary-text);      --button-color-text-disabled: var(--color-button-tertiary-text-disabled);      --button-color-text-activated: var(--color-button-tertiary-text-activated);      --button-border-color-default: transparent;    }  .button-plain {      --button-color-background-default: transparent;      --button-color-background-focus: transparent;      --button-color-background-hover: var(--color-button-plain-background-hover);      --button-color-background-disabled: var(--color-button-plain-background-disabled);      --button-color-background-activated: var(--color-button-plain-background-activated);      --button-color-background-active: linear-gradient(var(--color-button-secondary-background-hover), var(--color-button-secondary-background-hover));      --button-color-text-default: var(--color-button-plain-text);      --button-color-text-disabled: var(--color-button-plain-text-disabled);      --button-color-text-activated: var(--color-button-plain-text-activated);      --button-color-text-hover: var(--color-button-plain-text-hover);      --button-border-color-default: transparent;    }  .button-bordered {      --button-color-background-default: transparent;      --button-color-background-focus: transparent;      --button-color-background-hover: transparent;      --button-color-background-active: linear-gradient(transparent, transparent);      --button-color-background-disabled: transparent;      --button-color-background-activated: var(--color-button-secondary-background-activated);      --button-color-text-default: var(--color-secondary-plain);      --button-color-text-disabled: var(--color-neutral-content-disabled);      --button-color-text-activated: var(--color-neutral-content-strong);      --button-color-text-hover: var(--color-secondary-plain-hover);      --button-border-color-default: var(--color-neutral-border-medium);      --button-border-color-hover: var(--color-neutral-border-strong);      --button-border-color-active: var(--color-neutral-border-strong);      --button-border-color-activated: var(--color-neutral-border-strong);      --button-border-color-disabled: var(--color-neutral-content-disabled);      --button-border-width-default: var(--line-sm);      --button-border-width-activated: var(--line-sm);    }  .button-destructive {      --button-color-background-default: var(--color-danger-background);      --button-color-background-focus: var(--color-danger-background-hover);      --button-color-background-hover: var(--color-danger-background-hover);      --button-color-background-active: linear-gradient(var(--color-danger-background-hover), var(--color-danger-background-hover));      --button-color-background-disabled: var(--color-button-secondary-background-disabled);      --button-color-text-default: var(--color-danger-content-default);      --button-color-text-disabled: var(--color-button-secondary-text-disabled);      --button-border-color-default: transparent;      --button-border-color-hover: transparent;      --button-border-color-active: transparent;    }  .button-media {      --button-color-background-default: var(--color-media-background);      --button-color-background-focus: var(--color-media-background-hover);      --button-color-background-hover: var(--color-media-background-hover);      --button-color-background-active: linear-gradient(var(--color-media-background-hover), var(--color-media-background-hover));      --button-border-color-activated: var(--color-neutral-content-strong);      --button-color-text-default: white;      --button-color-text-disabled: var(--color-media-onbackground-disabled);      --button-color-background-disabled: var(--color-media-background);    }  .button-brand {      --button-color-background-default: var(--color-brand-background);      --button-color-background-hover: var(--color-brand-background-hover);      --button-color-background-active: linear-gradient(var(--color-brand-background-hover), var(--color-brand-background-hover));      --button-color-background-disabled: var(--color-interactive-background-disabled);      --button-color-text-default: var(--color-danger-content-default);      --button-color-text-disabled: var(--color-neutral-content-disabled);      --button-border-color-default: transparent;    }  .button-success {      --button-color-background-default: var(--color-success-background);      --button-color-background-focus: var(--color-success-background-hover);      --button-color-background-hover: var(--color-success-background-hover);      --button-color-background-active: linear-gradient(var(--color-success-background-hover), var(--color-success-background-hover));      --button-color-background-disabled: var(--color-button-primary-background-disabled);      --button-color-text-default: var(--color-success-onBackground);      --button-color-text-disabled: var(--color-button-primary-text-disabled);      --button-border-color-default: transparent;    }  .button-plain-inverted {      --button-color-background-default: transparent;      --button-color-background-focus: var(--color-neutral-content);      --button-color-background-hover: var(--color-neutral-content);      --button-color-background-active: var(--color-interactive-pressed);      --button-color-background-disabled: transparent;      --button-color-text-default: var(--color-neutral-background-weak);      --button-color-text-disabled: var(--color-neutral-content);      --button-border-color-default: transparent;      --button-color-background-activated: var(--color-button-plain-inverted-background-activated);      --button-color-text-activated: var(--color-button-plain-inverted-text-activated);    }  /* Featured avatar */  .full-snoo-xs {      --full-snoo-xs-size: var(--rem48);      height: var(--full-snoo-xs-size);      width: var(--full-snoo-xs-size);      margin-top: 0.125rem;    }  .full-snoo-xs > img {      width: var(--rem36);      bottom: calc(-1 * 0.1875rem);    }  .full-snoo-sm {      --full-snoo-sm-size: var(--rem64);      height: var(--full-snoo-sm-size);      width: var(--full-snoo-sm-size);      margin-top: 0.125rem;    }  .full-snoo-sm > img {      width: var(--rem48);      bottom: calc(-1 * var(--rem4));    }  .full-snoo-md {      --full-snoo-md-size: var(--rem88);      height: var(--full-snoo-md-size);      width: var(--full-snoo-md-size);      margin-top: var(--spacer-2xs);    }  .full-snoo-md > img {      width: var(--rem64);      bottom: calc(-1 * var(--rem6));    }  .full-snoo-lg {      --full-snoo-lg-size: var(--rem144);      height: var(--full-snoo-lg-size);      width: var(--full-snoo-lg-size);      margin-top: 0.375rem;    }  .full-snoo-lg > img {      width: 6.625rem;      bottom: calc(-1 * var(--rem10));    }  .full-snoo-xl {      --full-snoo-xl-size: var(--rem192);      height: var(--full-snoo-xl-size);      width: var(--full-snoo-xl-size);      margin-top: var(--spacer-xs);    }  .full-snoo-xl > img {      width: 8.8125rem;      bottom: calc(-1 * var(--rem14));    }  .full-snoo-2xl {      --full-snoo-2xl-size: var(--rem320);      height: var(--full-snoo-2xl-size);      width: var(--full-snoo-2xl-size);      margin-top: var(--spacer-sm);    }  .full-snoo-2xl > img {      width: 14.75rem;      bottom: calc(-1 * var(--rem22));    }  .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;  }  .collapse {    visibility: collapse;  }  .static {    position: static;  }  .fixed {    position: fixed;  }  .absolute {    position: absolute;  }  .relative {    position: relative;  }  .-right-\\[\\.65rem\\] {    right: -.65rem;  }  .-right-\\[\\.75rem\\] {    right: -.75rem;  }  .-right-\\[0\\.0625rem\\] {    right: -0.0625rem;  }  .-right-\\[0\\.0825rem\\] {    right: -0.0825rem;  }  .-right-\\[0\\.125rem\\] {    right: -0.125rem;  }  .bottom-0 {    bottom: 0px;  }  .top-1\\/2 {    top: 50%;  }  .isolate {    isolation: isolate;  }  .z-\\[2\\] {    z-index: 2;  }  .z-\\[3\\] {    z-index: 3;  }  .z-auto {    z-index: auto;  }  .col-start-1 {    grid-column-start: 1;  }  .row-start-1 {    grid-row-start: 1;  }  .m-0 {    margin: 0px;  }  .m-sm {    margin: 0.75rem;  }  .mx-xs {    margin-left: 0.5rem;    margin-right: 0.5rem;  }  .-ml-\\[var\\(--rem10\\)\\] {    margin-left: calc(var(--rem10) * -1);  }  .-ml-\\[var\\(--rem12\\)\\] {    margin-left: calc(var(--rem12) * -1);  }  .-ml-\\[var\\(--rem14\\)\\] {    margin-left: calc(var(--rem14) * -1);  }  .-ml-\\[var\\(--rem16\\)\\] {    margin-left: calc(var(--rem16) * -1);  }  .-ml-\\[var\\(--rem18\\)\\] {    margin-left: calc(var(--rem18) * -1);  }  .-ml-\\[var\\(--rem20\\)\\] {    margin-left: calc(var(--rem20) * -1);  }  .-ml-\\[var\\(--rem4\\)\\] {    margin-left: calc(var(--rem4) * -1);  }  .-ml-\\[var\\(--rem6\\)\\] {    margin-left: calc(var(--rem6) * -1);  }  .-ml-\\[var\\(--rem8\\)\\] {    margin-left: calc(var(--rem8) * -1);  }  .mb-0 {    margin-bottom: 0px;  }  .ml-0 {    margin-left: 0px;  }  .ml-2xs {    margin-left: 0.25rem;  }  .ml-\\[-\\.25rem\\] {    margin-left: -.25rem;  }  .mr-\\[calc\\(var\\(--size-button-sm-h\\)-var\\(--rem10\\)-var\\(--button-border-width-default\\)\\)\\] {    margin-right: calc(var(--size-button-sm-h) - var(--rem10) - var(--button-border-width-default));  }  .mr-\\[length\\:var\\(--rem6\\)\\] {    margin-right: var(--rem6);  }  .mr-xs {    margin-right: 0.5rem;  }  .mt-0 {    margin-top: 0px;  }  .mt-\\[-0\\.125rem\\] {    margin-top: -0.125rem;  }  .mt-\\[-0\\.25rem\\] {    margin-top: -0.25rem;  }  .box-border {    box-sizing: border-box;  }  .\\!block {    display: block !important;  }  .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;  }  .list-item {    display: list-item;  }  .hidden {    display: none;  }  .aspect-square {    aspect-ratio: 1 / 1;  }  .h-100 {    height: 100%;  }  .h-2xl {    height: 3rem;  }  .h-2xs {    height: 0.25rem;  }  .h-\\[\\.25rem\\] {    height: .25rem;  }  .h-\\[\\.375rem\\] {    height: .375rem;  }  .h-\\[\\.625rem\\] {    height: .625rem;  }  .h-\\[1\\.25rem\\] {    height: 1.25rem;  }  .h-\\[1\\.5rem\\] {    height: 1.5rem;  }  .h-\\[1rem\\] {    height: 1rem;  }  .h-\\[2\\.5rem\\] {    height: 2.5rem;  }  .h-\\[2\\.87rem\\] {    height: 2.87rem;  }  .h-\\[2rem\\] {    height: 2rem;  }  .h-\\[3\\.25rem\\] {    height: 3.25rem;  }  .h-\\[3\\.5rem\\] {    height: 3.5rem;  }  .h-\\[3rem\\] {    height: 3rem;  }  .h-\\[4\\.5rem\\] {    height: 4.5rem;  }  .h-\\[4rem\\] {    height: 4rem;  }  .h-\\[5\\.5rem\\] {    height: 5.5rem;  }  .h-lg {    height: 1.5rem;  }  .h-md {    height: 1rem;  }  .h-px {    height: 1px;  }  .h-sm {    height: 0.75rem;  }  .h-xl {    height: 2rem;  }  .h-xs {    height: 0.5rem;  }  .min-h-\\[1rem\\] {    min-height: 1rem;  }  .w-100 {    width: 100%;  }  .w-2xl {    width: 3rem;  }  .w-2xs {    width: 0.25rem;  }  .w-3xl {    width: 4rem;  }  .w-\\[\\.25rem\\] {    width: .25rem;  }  .w-\\[\\.375rem\\] {    width: .375rem;  }  .w-\\[\\.625rem\\] {    width: .625rem;  }  .w-\\[1\\.25rem\\] {    width: 1.25rem;  }  .w-\\[1\\.5rem\\] {    width: 1.5rem;  }  .w-\\[12rem\\] {    width: 12rem;  }  .w-\\[1rem\\] {    width: 1rem;  }  .w-\\[2\\.5rem\\] {    width: 2.5rem;  }  .w-\\[2\\.87rem\\] {    width: 2.87rem;  }  .w-\\[20rem\\] {    width: 20rem;  }  .w-\\[2rem\\] {    width: 2rem;  }  .w-\\[3\\.25rem\\] {    width: 3.25rem;  }  .w-\\[3\\.5rem\\] {    width: 3.5rem;  }  .w-\\[32rem\\] {    width: 32rem;  }  .w-\\[3rem\\] {    width: 3rem;  }  .w-\\[4\\.5rem\\] {    width: 4.5rem;  }  .w-\\[4rem\\] {    width: 4rem;  }  .w-\\[5\\.5rem\\] {    width: 5.5rem;  }  .w-\\[9rem\\] {    width: 9rem;  }  .w-full {    width: 100%;  }  .w-lg {    width: 1.5rem;  }  .w-md {    width: 1rem;  }  .w-px {    width: 1px;  }  .w-sm {    width: 0.75rem;  }  .w-xl {    width: 2rem;  }  .w-xs {    width: 0.5rem;  }  .min-w-0 {    min-width: 0px;  }  .min-w-\\[0\\.5rem\\] {    min-width: 0.5rem;  }  .max-w-\\[480px\\] {    max-width: 480px;  }  .max-w-full {    max-width: 100%;  }  .flex-shrink {    flex-shrink: 1;  }  .shrink {    flex-shrink: 1;  }  .shrink-0 {    flex-shrink: 0;  }  .flex-grow {    flex-grow: 1;  }  .grow {    flex-grow: 1;  }  .basis-full {    flex-basis: 100%;  }  .-scale-x-100 {    --tw-scale-x: -1;    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));  }  .scale-x-100 {    --tw-scale-x: 1;    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));  }  .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));  }  .cursor-default {    cursor: default;  }  .cursor-none {    cursor: none;  }  .cursor-pointer {    cursor: pointer;  }  .select-none {    -webkit-user-select: none;       -moz-user-select: none;            user-select: none;  }  .select-text {    -webkit-user-select: text;       -moz-user-select: text;            user-select: text;  }  .select-auto {    -webkit-user-select: auto;       -moz-user-select: auto;            user-select: auto;  }  .resize {    resize: both;  }  .list-none {    list-style-type: none;  }  .grid-cols-1 {    grid-template-columns: repeat(1, minmax(0, 1fr));  }  .flex-row {    flex-direction: row;  }  .flex-row-reverse {    flex-direction: row-reverse;  }  .flex-col {    flex-direction: column;  }  .flex-col-reverse {    flex-direction: column-reverse;  }  .flex-wrap {    flex-wrap: wrap;  }  .items-start {    align-items: flex-start;  }  .items-end {    align-items: flex-end;  }  .items-center {    align-items: center;  }  .items-stretch {    align-items: stretch;  }  .justify-start {    justify-content: flex-start;  }  .justify-end {    justify-content: flex-end;  }  .justify-center {    justify-content: center;  }  .justify-between {    justify-content: space-between;  }  .justify-stretch {    justify-content: stretch;  }  .justify-items-start {    justify-items: start;  }  .justify-items-end {    justify-items: end;  }  .justify-items-center {    justify-items: center;  }  .gap-0 {    gap: 0px;  }  .gap-2xs {    gap: 0.25rem;  }  .gap-\\[0\\.5rem\\] {    gap: 0.5rem;  }  .gap-md {    gap: 1rem;  }  .gap-xl {    gap: 2rem;  }  .gap-xs {    gap: 0.5rem;  }  .gap-y-sm {    row-gap: 0.75rem;  }  .gap-y-xs {    row-gap: 0.5rem;  }  .space-x-xs > :not([hidden]) ~ :not([hidden]) {    --tw-space-x-reverse: 0;    margin-right: calc(0.5rem * var(--tw-space-x-reverse));    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));  }  .overflow-auto {    overflow: auto;  }  .overflow-hidden {    overflow: hidden;  }  .overflow-visible {    overflow: visible;  }  .truncate {    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;  }  .text-ellipsis {    text-overflow: ellipsis;  }  .rounded-\\[\\.5rem\\] {    border-radius: .5rem;  }  .rounded-full {    border-radius: 624.9375rem;  }  .rounded-none {    border-radius: 0rem;  }  .rounded-sm {    border-radius: 0.25rem;  }  .border {    border-width: 0.0625rem;  }  .border-0 {    border-width: 0rem;  }  .border-lg {    border-width: 0.25rem;  }  .border-md {    border-width: 0.125rem;  }  .border-b {    border-bottom-width: 0.0625rem;  }  .border-solid {    border-style: solid;  }  .border-none {    border-style: none;  }  .border-action-downvote {    border-color: var(--color-action-downvote);  }  .border-action-upvote {    border-color: var(--color-action-upvote);  }  .border-neutral-background {    border-color: var(--color-neutral-background);  }  .border-neutral-border {    border-color: var(--color-neutral-border);  }  .border-secondary-background-selected {    border-color: var(--color-secondary-background-selected);  }  .border-tone-4 {    border-color: var(--color-tone-4);  }  .border-transparent {    border-color: transparent;  }  .bg-\\[color\\:var\\(--button-color-background-default\\)\\] {    background-color: var(--button-color-background-default);  }  .bg-\\[color\\:var\\(--color-button-plain-background-disabled\\)\\] {    background-color: var(--color-button-plain-background-disabled);  }  .bg-action-downvote {    background-color: var(--color-action-downvote);  }  .bg-action-upvote {    background-color: var(--color-action-upvote);  }  .bg-brand-background {    background-color: var(--color-brand-background);  }  .bg-brand-onBackground {    background-color: var(--color-brand-onBackground);  }  .bg-danger-content {    background-color: var(--color-danger-content);  }  .bg-global-orangered {    background-color: var(--color-global-orangered);  }  .bg-interactive-background-disabled {    background-color: var(--color-interactive-background-disabled);  }  .bg-neutral-background {    background-color: var(--color-neutral-background);  }  .bg-neutral-background-selected {    background-color: var(--color-neutral-background-selected);  }  .bg-neutral-background-strong {    background-color: var(--color-neutral-background-strong);  }  .bg-neutral-content {    background-color: var(--color-neutral-content);  }  .bg-neutral-content-disabled {    background-color: var(--color-neutral-content-disabled);  }  .bg-online {    background-color: var(--color-online);  }  .bg-secondary-background-selected {    background-color: var(--color-secondary-background-selected);  }  .bg-success-content {    background-color: var(--color-success-content);  }  .bg-transparent {    background-color: transparent;  }  .bg-warning-content {    background-color: var(--color-warning-content);  }  .object-contain {    -o-object-fit: contain;       object-fit: contain;  }  .object-cover {    -o-object-fit: cover;       object-fit: cover;  }  .object-fill {    -o-object-fit: fill;       object-fit: fill;  }  .object-none {    -o-object-fit: none;       object-fit: none;  }  .object-scale-down {    -o-object-fit: scale-down;       object-fit: scale-down;  }  .p-0 {    padding: 0px;  }  .p-2xs {    padding: 0.25rem;  }  .p-md {    padding: 1rem;  }  .p-xl {    padding: 2rem;  }  .p-xs {    padding: 0.5rem;  }  .px-2xs {    padding-left: 0.25rem;    padding-right: 0.25rem;  }  .px-\\[0\\.375rem\\] {    padding-left: 0.375rem;    padding-right: 0.375rem;  }  .px-\\[length\\:var\\(--rem10\\)\\] {    padding-left: var(--rem10);    padding-right: var(--rem10);  }  .px-\\[length\\:var\\(--rem12\\)\\] {    padding-left: var(--rem12);    padding-right: var(--rem12);  }  .px-\\[length\\:var\\(--rem14\\)\\] {    padding-left: var(--rem14);    padding-right: var(--rem14);  }  .px-\\[length\\:var\\(--rem6\\)\\] {    padding-left: var(--rem6);    padding-right: var(--rem6);  }  .px-\\[length\\:var\\(--rem8\\)\\] {    padding-left: var(--rem8);    padding-right: var(--rem8);  }  .px-md {    padding-left: 1rem;    padding-right: 1rem;  }  .px-sm {    padding-left: 0.75rem;    padding-right: 0.75rem;  }  .px-xs {    padding-left: 0.5rem;    padding-right: 0.5rem;  }  .py-2xs {    padding-top: 0.25rem;    padding-bottom: 0.25rem;  }  .py-\\[0\\.125rem\\] {    padding-top: 0.125rem;    padding-bottom: 0.125rem;  }  .py-\\[length\\:var\\(--rem10\\)\\] {    padding-top: var(--rem10);    padding-bottom: var(--rem10);  }  .py-\\[length\\:var\\(--rem14\\)\\] {    padding-top: var(--rem14);    padding-bottom: var(--rem14);  }  .py-\\[length\\:var\\(--rem6\\)\\] {    padding-top: var(--rem6);    padding-bottom: var(--rem6);  }  .py-\\[length\\:var\\(--rem8\\)\\] {    padding-top: var(--rem8);    padding-bottom: var(--rem8);  }  .py-sm {    padding-top: 0.75rem;    padding-bottom: 0.75rem;  }  .py-xs {    padding-top: 0.5rem;    padding-bottom: 0.5rem;  }  .pb-md {    padding-bottom: 1rem;  }  .pl-\\[length\\:var\\(--rem10\\)\\] {    padding-left: var(--rem10);  }  .pl-\\[length\\:var\\(--rem12\\)\\] {    padding-left: var(--rem12);  }  .pl-\\[length\\:var\\(--rem14\\)\\] {    padding-left: var(--rem14);  }  .pl-\\[length\\:var\\(--rem16\\)\\] {    padding-left: var(--rem16);  }  .pl-md {    padding-left: 1rem;  }  .pr-\\[length\\:var\\(--rem10\\)\\] {    padding-right: var(--rem10);  }  .pr-\\[length\\:var\\(--rem12\\)\\] {    padding-right: var(--rem12);  }  .pr-\\[length\\:var\\(--rem14\\)\\] {    padding-right: var(--rem14);  }  .pr-\\[length\\:var\\(--rem16\\)\\] {    padding-right: var(--rem16);  }  .pr-\\[length\\:var\\(--rem6\\)\\] {    padding-right: var(--rem6);  }  .pr-\\[length\\:var\\(--rem8\\)\\] {    padding-right: var(--rem8);  }  .pr-md {    padding-right: 1rem;  }  .pt-md {    padding-top: 1rem;  }  .text-center {    text-align: center;  }  .text-start {    text-align: start;  }  .text-end {    text-align: end;  }  .align-middle {    vertical-align: middle;  }  .align-text-bottom {    vertical-align: text-bottom;  }  .text-10 {    font-size: 0.625rem;    line-height: 1rem;  }  .text-12 {    font-size: 0.75rem;    line-height: 1rem;  }  .text-14 {    font-size: 0.875rem;    line-height: 1.25rem;  }  .text-16 {    font-size: 1rem;    line-height: 1.25rem;  }  .text-18 {    font-size: 1.125rem;    line-height: 1.5rem;  }  .text-20 {    font-size: 1.25rem;    line-height: 1.25rem;  }  .text-24 {    font-size: 1.5rem;    line-height: 1.75rem;  }  .text-32 {    font-size: 2rem;    line-height: 2.25rem;  }  .font-bold {    font-weight: 700;  }  .font-normal {    font-weight: 400;  }  .font-semibold {    font-weight: 600;  }  .uppercase {    text-transform: uppercase;  }  .leading-4 {    line-height: 1rem;  }  .leading-5 {    line-height: 1.25rem;  }  .tracking-widest {    letter-spacing: 0.1em;  }  .text-\\[color\\:var\\(--button-color-text-default\\)\\] {    color: var(--button-color-text-default);  }  .text-\\[color\\:var\\(--color-button-plain-text-disabled\\)\\] {    color: var(--color-button-plain-text-disabled);  }  .text-\\[color\\:var\\(--color-button-secondary-text-disabled\\)\\] {    color: var(--color-button-secondary-text-disabled);  }  .text-brand-onBackground {    color: var(--color-brand-onBackground);  }  .text-category-nsfw {    color: var(--color-category-nsfw);  }  .text-category-spoiler {    color: var(--color-category-spoiler);  }  .text-danger-content {    color: var(--color-danger-content);  }  .text-global-white {    color: var(--color-global-white);  }  .text-neutral-content {    color: var(--color-neutral-content);  }  .text-neutral-content-disabled {    color: var(--color-neutral-content-disabled);  }  .text-neutral-content-strong {    color: var(--color-neutral-content-strong);  }  .text-neutral-content-weak {    color: var(--color-neutral-content-weak);  }  .text-primary {    color: var(--color-primary);  }  .text-primary-onBackground {    color: var(--color-primary-onBackground);  }  .text-secondary {    color: var(--color-secondary);  }  .text-secondary-onBackground {    color: var(--color-secondary-onBackground);  }  .text-secondary-weak {    color: var(--color-secondary-weak);  }  .text-warning-content {    color: var(--color-warning-content);  }  .underline {    text-decoration-line: underline;  }  .no-underline {    text-decoration-line: none;  }  .opacity-40 {    opacity: 0.4;  }  .opacity-60 {    opacity: 0.6;  }  .outline {    outline-style: solid;  }  .drop-shadow {    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));    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);  }  .invert {    --tw-invert: invert(100%);    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);  }  .transition {    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);    transition-duration: 150ms;  }  .ease-in-out {    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);  }  :root {    --text-color-light: inherit;    --text-color-dark: inherit;    --bg-color-light: initial;    --bg-color-dark: initial;    --border-color-light: initial;    --border-color-dark: initial;  }  .grid.grid-cols-1 > * {    grid-column-start: 1;    grid-row-start: 1;  }  .stackBlock,  .light .stackBlock {    background-color: var(--bg-color-light);    border-color: var(--border-color-light);  }  .dark .stackBlock {    background-color: var(--bg-color-dark);    border-color: var(--border-color-dark);  }  .textColor,  .light .textColor {    color: var(--text-color-light);  }  .dark .textColor {    color: var(--text-color-dark);  }  @media (prefers-color-scheme: dark) {    .stackBlock {      background-color: var(--bg-color-dark);      border-color: var(--border-color-dark);    }      .textColor {      color: var(--text-color-dark);    }  }  .hover\\:border-secondary-background-hover:hover {    border-color: var(--color-secondary-background-hover);  }  .hover\\:border-secondary-background-selected:hover {    border-color: var(--color-secondary-background-selected);  }  .hover\\:bg-brand-background-hover:hover {    background-color: var(--color-brand-background-hover);  }  .hover\\:bg-neutral-background-hover:hover {    background-color: var(--color-neutral-background-hover);  }  .hover\\:bg-neutral-background-selected:hover {    background-color: var(--color-neutral-background-selected);  }  .hover\\:bg-secondary-background-hover:hover {    background-color: var(--color-secondary-background-hover);  }  .hover\\:bg-secondary-background-selected:hover {    background-color: var(--color-secondary-background-selected);  }  .hover\\:text-action-downvote:hover {    color: var(--color-action-downvote);  }  .hover\\:text-action-upvote:hover {    color: var(--color-action-upvote);  }  .hover\\:text-danger-content-hover:hover {    color: var(--color-danger-content-hover);  }  .hover\\:text-global-white:hover {    color: var(--color-global-white);  }  .hover\\:text-secondary:hover {    color: var(--color-secondary);  }  .hover\\:text-secondary-hover:hover {    color: var(--color-secondary-hover);  }  .hover\\:underline:hover {    text-decoration-line: underline;  }  .hover\\:no-underline:hover {    text-decoration-line: none;  }  .focus-visible\\:text-action-downvote:focus-visible {    color: var(--color-action-downvote);  }  .focus-visible\\:text-action-upvote:focus-visible {    color: var(--color-action-upvote);  }  .active\\:bg-interactive-pressed:active {    background-color: var(--color-interactive-pressed);  }  .active\\:bg-secondary-background:active {    background-color: var(--color-secondary-background);  }  .disabled\\:bg-interactive-background-disabled:disabled {    background-color: var(--color-interactive-background-disabled);  }  .disabled\\:text-interactive-content-disabled:disabled {    color: var(--color-interactive-content-disabled);  }  .\\[\\&\\>\\:not\\(\\.pointer-events-none\\)\\]\\:pointer-events-auto>:not(.pointer-events-none) {    pointer-events: auto;  }  .\\[\\&\\>svg\\]\\:aspect-square>svg {    aspect-ratio: 1 / 1;  }  .\\[\\&\\>svg\\]\\:h-\\[1\\.25rem\\]>svg {    height: 1.25rem;  }  .\\[\\&\\>svg\\]\\:h-lg>svg {    height: 1.5rem;  }  .\\[\\&\\>svg\\]\\:h-md>svg {    height: 1rem;  }  .\\[\\&\\>svg\\]\\:h-sm>svg {    height: 0.75rem;  }  .\\[\\&\\>svg\\]\\:w-\\[1\\.25rem\\]>svg {    width: 1.25rem;  }  .\\[\\&\\>svg\\]\\:w-lg>svg {    width: 1.5rem;  }  .\\[\\&\\>svg\\]\\:w-md>svg {    width: 1rem;  }  .\\[\\&\\>svg\\]\\:w-sm>svg {    width: 0.75rem;  }  .\\[\\&\\>svg\\]\\:text-center>svg {    text-align: center;  }  .\\[\\&\\>svg\\]\\:align-middle>svg {    vertical-align: middle;  }  ';
 export const styles = cssString(uiRendererStyles);