yomitan-core 0.1.0

package/dist/render.d.ts

@@ -0,0 +1,424 @@
+import { Content, ImageElement, KanjiDictionaryEntry, TermDictionaryEntry, TermGlossaryImage } from "./dictionary-_vzfBLWi.js";
+import { Summary } from "./dictionary-importer-BkQQSBhm.js";
+
+//#region src/render/content-manager.d.ts
+/**
+* Interface for managing media content loading within dictionary entries.
+* Implementations handle loading images and other media from dictionary archives.
+*/
+/**
+ * Interface for managing media content loading within dictionary entries.
+ * Implementations handle loading images and other media from dictionary archives.
+ */
+interface ContentManager {
+  /**
+   * Loads a media resource from a dictionary.
+   * @param path - The path to the media file within the dictionary archive.
+   * @param dictionary - The name of the dictionary containing the media.
+   * @param mediaType - The MIME type or category of the media (e.g., 'image').
+   * @returns A URL string that can be used to display the media, or empty string if unavailable.
+   */
+  loadMedia(path: string, dictionary: string, mediaType: string): string;
+  /**
+   * Prepares a link element for navigation.
+   * @param element - The anchor element to prepare.
+   * @param href - The URL to link to.
+   * @param internal - Whether the link is internal to the application.
+   */
+  prepareLink(element: HTMLAnchorElement, href: string, internal: boolean): void;
+  /**
+   * Unloads all previously loaded media resources.
+   */
+  unloadAll(): void;
+}
+/**
+ * A no-op implementation of ContentManager that returns empty values.
+ * Useful for rendering dictionary entries without media support.
+ */
+declare class NoOpContentManager implements ContentManager {
+  loadMedia(_path: string, _dictionary: string, _mediaType: string): string;
+  prepareLink(element: HTMLAnchorElement, href: string, _internal: boolean): void;
+  unloadAll(): void;
+} //#endregion
+//#region src/render/display-generator.d.ts
+
+//# sourceMappingURL=content-manager.d.ts.map
+/**
+ * Generates DOM elements for displaying dictionary entries.
+ * This is the main rendering class that creates term entries, kanji entries,
+ * and all associated sub-elements (headwords, definitions, tags, frequencies, etc.).
+ */
+declare class DisplayGenerator {
+  private _contentManager;
+  private _templates;
+  private _structuredContentGenerator;
+  private _pronunciationGenerator;
+  private _language;
+  private _document;
+  /**
+   * Creates a new DisplayGenerator.
+   * @param doc - The Document object to use for DOM operations.
+   * @param contentManager - The content manager for loading media.
+   * @param templateHtml - The HTML string containing display templates.
+   */
+  constructor(doc: Document, contentManager: ContentManager, templateHtml: string);
+  /** The current content manager. */
+  get contentManager(): ContentManager;
+  set contentManager(contentManager: ContentManager);
+  /**
+   * Updates the target language for rendering.
+   * @param language - The BCP 47 language tag (e.g. 'ja', 'zh').
+   */
+  updateLanguage(language: string): void;
+  /**
+   * Creates a complete term entry element from a dictionary entry.
+   * @param dictionaryEntry - The term dictionary entry data.
+   * @param dictionaryInfo - Array of dictionary summary information.
+   * @returns An HTMLElement representing the full term entry.
+   */
+  createTermEntry(dictionaryEntry: TermDictionaryEntry, dictionaryInfo: Summary[]): HTMLElement;
+  /**
+   * Creates a complete kanji entry element from a dictionary entry.
+   * @param dictionaryEntry - The kanji dictionary entry data.
+   * @param dictionaryInfo - Array of dictionary summary information.
+   * @returns An HTMLElement representing the full kanji entry.
+   */
+  createKanjiEntry(dictionaryEntry: KanjiDictionaryEntry, dictionaryInfo: Summary[]): HTMLElement;
+  /**
+   * Creates an empty footer notification element.
+   */
+  createEmptyFooterNotification(): HTMLElement;
+  /**
+   * Instantiates a named template, returning the first element child.
+   * @param name - The template name.
+   */
+  instantiateTemplate(name: string): HTMLElement;
+  /**
+   * Instantiates a named template, returning the full DocumentFragment.
+   * @param name - The template name.
+   */
+  instantiateTemplateFragment(name: string): DocumentFragment;
+  private _createTermHeadword;
+  private _createInflectionRuleChain;
+  private _getInflectionSourceIcon;
+  private _createTermInflection;
+  private _createTermDefinition;
+  private _createTermDefinitionEntry;
+  private _createTermDefinitionEntryText;
+  private _createTermDefinitionEntryImage;
+  private _createTermDefinitionEntryStructuredContent;
+  private _createTermDisambiguation;
+  private _createKanjiLink;
+  private _createKanjiDefinition;
+  private _createKanjiReading;
+  private _createKanjiInfoTable;
+  private _createKanjiInfoTableItem;
+  private _createKanjiInfoTableItemEmpty;
+  private _createTag;
+  private _createTermTag;
+  private _createTagData;
+  private _createSearchTag;
+  private _createGroupedPronunciation;
+  private _createPronunciation;
+  private _createPronunciationPhoneticTranscription;
+  private _createPronunciationPitchAccent;
+  private _createPronunciationDisambiguations;
+  private _createFrequencyGroup;
+  private _createTermFrequency;
+  private _createKanjiFrequency;
+  private _populateFrequencyValueList;
+  private _appendKanjiLinks;
+  private _appendMultiple;
+  private _appendFurigana;
+  private _createDictionaryTag;
+  private _setTextContent;
+  private _setMultilineTextContent;
+  private _setElementLanguage;
+  private _getPronunciationCategories;
+  private _instantiate;
+  private _querySelector;
+} //#endregion
+//#region src/render/structured-content-generator.d.ts
+
+//# sourceMappingURL=display-generator.d.ts.map
+/**
+ * Generates DOM elements from structured content definitions found in
+ * dictionary glossary entries. Handles images, links, tables, styled
+ * elements, and other structured content types.
+ */
+declare class StructuredContentGenerator {
+  private _contentManager;
+  private _document;
+  /**
+   * Creates a new StructuredContentGenerator.
+   * @param contentManager - The content manager for loading media resources.
+   * @param doc - The Document object to use for creating DOM elements.
+   */
+  constructor(contentManager: ContentManager, doc: Document);
+  /**
+   * Appends structured content to an existing node, adding the 'structured-content' class.
+   * @param node - The container element to append content to.
+   * @param content - The structured content to render.
+   * @param dictionary - The dictionary name for resolving media references.
+   */
+  appendStructuredContent(node: HTMLElement, content: Content, dictionary: string): void;
+  /**
+   * Creates a new span element containing the rendered structured content.
+   * @param content - The structured content to render.
+   * @param dictionary - The dictionary name for resolving media references.
+   * @returns A span element with class 'structured-content'.
+   */
+  createStructuredContent(content: Content, dictionary: string): HTMLElement;
+  /**
+   * Creates an image element for a definition, wrapped in an anchor tag.
+   * @param data - The image data from the dictionary.
+   * @param dictionary - The dictionary name for resolving the image path.
+   * @returns An anchor element containing the image.
+   */
+  createDefinitionImage(data: ImageElement | TermGlossaryImage, dictionary: string): HTMLAnchorElement;
+  private _appendStructuredContent;
+  private _createElement;
+  private _createTextNode;
+  private _setElementDataset;
+  private _setImageData;
+  private _createStructuredContentGenericElement;
+  private _createStructuredContentTableElement;
+  private _createStructuredContentElement;
+  private _setStructuredContentElementStyle;
+  private _createLinkElement;
+}
+
+//#endregion
+//#region src/render/pronunciation-generator.d.ts
+//# sourceMappingURL=structured-content-generator.d.ts.map
+/**
+ * Generates DOM elements for pronunciation visualizations including
+ * pitch accent text, graphs, and downstep position notation.
+ */
+declare class PronunciationGenerator {
+  private _document;
+  /**
+   * Creates a new PronunciationGenerator.
+   * @param doc - The Document object to use for creating DOM elements.
+   */
+  constructor(doc: Document);
+  /**
+   * Creates a span element containing styled mora elements for pronunciation text.
+   * @param morae - Array of mora strings.
+   * @param pitchPositions - The pitch accent downstep position (number or HL string pattern).
+   * @param nasalPositions - Array of 1-indexed mora positions that are nasalized.
+   * @param devoicePositions - Array of 1-indexed mora positions that are devoiced.
+   * @returns A span element with class `pronunciation-text`.
+   */
+  createPronunciationText(morae: string[], pitchPositions: number | string, nasalPositions: number[], devoicePositions: number[]): HTMLSpanElement;
+  /**
+   * Creates an SVG element representing the pitch accent graph.
+   * @param morae - Array of mora strings.
+   * @param pitchPositions - The pitch accent downstep position (number or HL string pattern).
+   * @returns An SVG element with class `pronunciation-graph`.
+   */
+  createPronunciationGraph(morae: string[], pitchPositions: number | string): SVGSVGElement;
+  /**
+   * Creates a span element showing the downstep position in bracket notation.
+   * @param downstepPositions - The downstep position (number or HL string pattern).
+   * @returns A span element with class `pronunciation-downstep-notation`.
+   */
+  createPronunciationDownstepPosition(downstepPositions: number | string): HTMLSpanElement;
+  /**
+   * Creates a Jidoujisho-style pronunciation graph SVG.
+   * @param mora - Array of mora strings.
+   * @param pitchPositions - The pitch accent downstep position (number or HL string pattern).
+   * @returns An SVG element.
+   */
+  createPronunciationGraphJJ(mora: string[], pitchPositions: number | string): SVGSVGElement;
+  private _addGraphDot;
+  private _addGraphDotDownstep;
+  private _addGraphTriangle;
+  private _createGraphCircle;
+  private _pitchValueToPattJJ;
+  private _circleJJ;
+  private _textJJ;
+  private _pathJJ;
+}
+
+//#endregion
+//#region src/render/html-template-collection.d.ts
+//# sourceMappingURL=pronunciation-generator.d.ts.map
+/**
+ * A collection of HTML templates parsed from raw HTML strings.
+ * Templates are identified by their `id` attribute, which must end with `-template`.
+ * The prefix before `-template` is used as the template name.
+ */
+declare class HtmlTemplateCollection {
+  private _templates;
+  private _document;
+  /**
+   * Creates a new HtmlTemplateCollection.
+   * @param doc - The Document object to use for DOM operations.
+   */
+  constructor(doc: Document);
+  /**
+   * Loads templates from a raw HTML string.
+   * @param html - The HTML string containing `<template>` elements.
+   */
+  loadFromString(html: string): void;
+  /**
+   * Loads templates from a Document source.
+   * @param source - The Document containing template elements.
+   */
+  load(source: Document): void;
+  /**
+   * Instantiates a template by name, returning the first element child as a deep clone.
+   * @param name - The template name (without the `-template` suffix).
+   * @returns The cloned first element child.
+   * @throws Error if the template or its content element is not found.
+   */
+  instantiate(name: string): HTMLElement;
+  /**
+   * Instantiates a template by name, returning the entire content as a DocumentFragment clone.
+   * @param name - The template name (without the `-template` suffix).
+   * @returns The cloned DocumentFragment.
+   */
+  instantiateFragment(name: string): DocumentFragment;
+  /**
+   * Gets the content DocumentFragment of a named template.
+   * @param name - The template name (without the `-template` suffix).
+   * @returns The template's content DocumentFragment.
+   * @throws Error if the template is not found.
+   */
+  getTemplateContent(name: string): DocumentFragment;
+  /**
+   * Returns an iterator over all template elements.
+   */
+  getAllTemplates(): IterableIterator<HTMLTemplateElement>;
+  private _prepareTemplate;
+  private _removeWhitespaceText;
+}
+
+//#endregion
+//#region src/render/css-util.d.ts
+//# sourceMappingURL=html-template-collection.d.ts.map
+/**
+ * DOM-dependent CSS utility functions for sanitizing and scoping CSS.
+ * These require a DOM environment (browser or JSDOM/linkedom).
+ */
+/**
+ * Sanitizes a CSS string by parsing it through a CSSStyleSheet and
+ * re-serializing it. This removes any invalid or potentially dangerous rules.
+ * @param css - The raw CSS string to sanitize.
+ * @returns The sanitized CSS string.
+ */
+declare function sanitizeCSS(css: string): string;
+/**
+ * Wraps a CSS string inside a scope selector using CSS nesting.
+ * The resulting CSS will only apply within the scope of the given selector.
+ * @param css - The CSS string to scope.
+ * @param scopeSelector - The CSS selector to use as the scope.
+ * @returns The scoped CSS string.
+ */
+declare function addScopeToCss(css: string, scopeSelector: string): string;
+/**
+ * Wraps a CSS string inside a scope selector using legacy (non-nesting) approach.
+ * Each CSS rule's selector is prefixed with the scope selector.
+ * This is compatible with older browsers that do not support CSS nesting.
+ * @param css - The CSS string to scope.
+ * @param scopeSelector - The CSS selector to use as the scope prefix.
+ * @returns The scoped CSS string.
+ */
+declare function addScopeToCssLegacy(css: string, scopeSelector: string): string;
+
+//#endregion
+//#region src/render/japanese-util.d.ts
+//# sourceMappingURL=css-util.d.ts.map
+type PitchCategory = 'heiban' | 'atamadaka' | 'nakadaka' | 'odaka' | 'kifuku';
+type DiacriticType = 'dakuten' | 'handakuten';
+/**
+ * Checks if a code point represents a CJK kanji character.
+ */
+declare function isCodePointKanji(codePoint: number): boolean;
+/**
+ * Determines whether a mora at a given index has high pitch.
+ * @param moraIndex - The 0-based mora index to check.
+ * @param pitchAccentValue - The pitch accent pattern (number = downstep position, string = HL pattern).
+ * @returns True if the mora at the given index has high pitch.
+ */
+declare function isMoraPitchHigh(moraIndex: number, pitchAccentValue: number | string): boolean;
+/**
+ * Determines the pitch accent category for a word.
+ * @param text - The reading text.
+ * @param pitchAccentValue - The pitch accent pattern.
+ * @param isVerbOrAdjective - Whether the word is a verb or adjective (not a noun).
+ * @returns The pitch category, or null if it cannot be determined.
+ */
+declare function getPitchCategory(text: string, pitchAccentValue: number | string, isVerbOrAdjective: boolean): PitchCategory | null;
+/**
+ * Extracts downstep positions from an HL pitch string pattern.
+ * @param pitchString - A string of 'H' and 'L' characters representing pitch.
+ * @returns Array of downstep positions (1-indexed mora positions where pitch drops).
+ */
+declare function getDownstepPositions(pitchString: string): number[];
+/**
+ * Splits a kana text into an array of morae, combining small kana with their preceding character.
+ * @param text - The kana text to split.
+ * @returns Array of mora strings.
+ */
+declare function getKanaMorae(text: string): string[];
+/**
+ * Counts the number of morae in a kana text.
+ * @param text - The kana text to count morae in.
+ * @returns The number of morae.
+ */
+declare function getKanaMoraCount(text: string): number;
+/**
+ * Gets diacritic information for a kana character.
+ * If the character is a dakuten or handakuten variant, returns the base character and type.
+ * @param character - The kana character to check.
+ * @returns An object with the base character and diacritic type, or null if not a diacritic variant.
+ */
+declare function getKanaDiacriticInfo(character: string): {
+  character: string;
+  type: DiacriticType;
+} | null;
+
+//#endregion
+//#region src/render/templates/display-templates.d.ts
+//# sourceMappingURL=japanese-util.d.ts.map
+/**
+ * The full HTML template string for display rendering.
+ * Contains all template elements used by DisplayGenerator and HtmlTemplateCollection.
+ * Sourced from Yomitan's templates-display.html.
+ */
+declare const DISPLAY_TEMPLATES = "<!DOCTYPE html><html><head><title>Templates</title></head><body>\n\n<!-- Term entry -->\n<template id=\"term-entry-template\" data-remove-whitespace-text=\"true\"><div class=\"entry\" data-type=\"term\">\n    <div class=\"entry-current-indicator\" title=\"Current entry\"><span class=\"entry-current-indicator-inner\"></span></div>\n    <div class=\"entry-header\">\n        <div class=\"actions\">\n            <div class=\"note-actions-container\"></div>\n            <div class=\"action-button-container\">\n                <button type=\"button\" class=\"action-button\" data-action=\"play-audio\" title=\"Play audio\" data-title-default=\"Play audio\" data-menu-position=\"left below h-cover v-cover\">\n                    <span class=\"action-icon icon color-icon\" data-icon=\"play-audio\"></span>\n                    <span class=\"action-button-badge icon\" hidden></span>\n                </button>\n                <button type=\"button\" class=\"action-button action-button-collapsible\" data-action=\"menu\" data-menu-position=\"left below h-cover v-cover\">\n                    <span class=\"action-icon icon\" data-icon=\"kebab-menu\"></span>\n                </button>\n            </div>\n            <span class=\"entry-current-indicator-icon\" title=\"Current entry\">\n                <span class=\"icon color-icon\" data-icon=\"entry-current\"></span>\n            </span>\n        </div>\n        <div class=\"headword-list\"></div>\n        <div class=\"headword-list-details\">\n            <div class=\"headword-list-tag-list tag-list\"></div>\n            <ul class=\"inflection-rule-chains\"></ul>\n        </div>\n    </div>\n    <div class=\"entry-body\">\n        <div class=\"entry-body-section\" data-section-type=\"frequencies\">\n            <div class=\"entry-body-section-content frequency-group-list\"></div>\n        </div>\n        <div class=\"entry-body-section\" data-section-type=\"pronunciations\">\n            <ol class=\"entry-body-section-content pronunciation-group-list\"></ol>\n        </div>\n        <div class=\"entry-body-section\" data-section-type=\"definitions\">\n            <ol class=\"entry-body-section-content definition-list\"></ol>\n        </div>\n    </div>\n</div></template>\n<template id=\"headword-template\" data-remove-whitespace-text=\"true\"><div class=\"headword\">\n    <div class=\"headword-text-container\">\n        <span class=\"headword-term-outer source-text\">\n            <span class=\"headword-current-indicator\"></span>\n            <span class=\"headword-term\"></span>\n        </span>\n        <span class=\"headword-reading-outer\">\n            <span class=\"headword-reading\"></span>\n        </span>\n    </div>\n    <div class=\"headword-details\">\n        <button type=\"button\" class=\"action-button\" data-action=\"play-audio\" title=\"Play audio\" data-title-default=\"Play audio\" data-menu-position=\"right below h-cover v-cover\">\n            <span class=\"action-icon icon color-icon\" data-icon=\"play-audio\"></span>\n            <span class=\"action-button-badge icon\" hidden></span>\n        </button>\n    </div>\n</div></template>\n<template id=\"definition-item-template\" data-remove-whitespace-text=\"true\"><li class=\"definition-item\">\n    <div class=\"definition-item-inner\">\n        <button type=\"button\" class=\"expansion-button\"><div class=\"expansion-button-icon icon\" data-icon=\"double-down-chevron\"></div></button>\n        <div class=\"definition-item-content\">\n            <div class=\"definition-tag-list tag-list\"></div>\n            <div class=\"definition-disambiguation-list\"></div>\n            <ul class=\"gloss-list\"></ul>\n        </div>\n    </div>\n</li></template>\n<template id=\"definition-disambiguation-template\"><span class=\"definition-disambiguation\"></span></template>\n<template id=\"gloss-item-template\"><li class=\"gloss-item click-scannable\"><span class=\"gloss-separator\"> </span><span class=\"gloss-content\"></span></li></template>\n<template id=\"gloss-item-image-description-template\"> <span class=\"gloss-image-description\"></span></template>\n<template id=\"inflection-rule-chain-template\"><li class=\"inflection-rule-chain\"></li></template>\n<template id=\"inflection-template\"><span class=\"inflection\"></span><span class=\"inflection-separator\"> </span></template>\n\n<!-- Frequency -->\n<template id=\"frequency-group-item-template\"><span class=\"frequency-group-item\"><span class=\"tag tag-has-body frequency-group-tag\" data-category=\"frequency\"><span class=\"tag-label\"><span class=\"tag-label-content\"></span></span><span class=\"tag-body\"><span class=\"tag-body-content frequency-list\"></span></span></span></span></template>\n<template id=\"term-frequency-item-template\" data-remove-whitespace-text=\"true\"><span class=\"frequency-item\"><span class=\"tag tag-has-body frequency-tag\" data-category=\"frequency\" data-frequency-type=\"term\">\n    <span class=\"tag-label\"><span class=\"tag-label-content\"></span></span>\n    <span class=\"tag-body\"><span class=\"tag-body-content frequency-body\">\n        <span class=\"frequency-disambiguation\"><ruby>\n            <span class=\"frequency-disambiguation-term\"></span>\n            <span class=\"frequency-disambiguation-separator\"></span>\n            <rt class=\"frequency-disambiguation-reading\"></rt>\n        </ruby></span>\n        <span class=\"frequency-separator\"></span>\n        <span class=\"frequency-value-list\"></span>\n    </span></span>\n</span></span></template>\n<template id=\"kanji-frequency-item-template\" data-remove-whitespace-text=\"true\"><span class=\"frequency-item\"><span class=\"tag tag-has-body frequency-tag\" data-category=\"frequency\" data-frequency-type=\"kanji\">\n    <span class=\"tag-label\"><span class=\"tag-label-content\"></span></span>\n    <span class=\"tag-body\"><span class=\"tag-body-content frequency-body\">\n        <span class=\"frequency-value-list\"></span>\n    </span></span>\n</span></span></template>\n\n<!-- Pitch accent -->\n<template id=\"pronunciation-group-template\"><li class=\"pronunciation-group\"><span class=\"pronunciation-group-tag-list tag-list\"></span><ul class=\"pronunciation-list\"></ul></li></template>\n<template id=\"pronunciation-disambiguation-template\"><span class=\"pronunciation-disambiguation\"></span></template>\n<template id=\"pronunciation-template\"><li class=\"pronunciation\"><span class=\"pronunciation-tag-list tag-list\"></span><span class=\"pronunciation-disambiguation-list\"></span><span class=\"pronunciation-representation-list\"><span class=\"pronunciation-text-container\"></span><span class=\"pronunciation-downstep-notation-container\"></span><span class=\"pronunciation-graph-container\"></span></span></li></template>\n\n<!-- Kanji entry -->\n<template id=\"kanji-entry-template\" data-remove-whitespace-text=\"true\"><div class=\"entry kanji-entry\" data-type=\"kanji\">\n    <div class=\"entry-current-indicator\" title=\"Current entry\"><span class=\"entry-current-indicator-inner\"></span></div>\n    <div class=\"entry-header\">\n        <div class=\"actions\">\n            <div class=\"note-actions-container\"></div>\n            <span class=\"entry-current-indicator-icon\" title=\"Current entry\">\n                <span class=\"icon color-icon\" data-icon=\"entry-current\"></span>\n            </span>\n            <button type=\"button\" class=\"action-button action-button-collapsible\" data-action=\"menu\" data-menu-position=\"left below h-cover v-cover\">\n                <span class=\"action-icon icon\" data-icon=\"kebab-menu\"></span>\n            </button>\n        </div>\n        <div class=\"kanji-glyph-container\">\n            <span class=\"headword-current-indicator\"></span>\n            <div class=\"kanji-glyph source-text\"></div>\n        </div>\n        <div class=\"kanji-tag-list tag-list\"></div>\n    </div>\n    <div class=\"entry-body\">\n        <div class=\"entry-body-section\" data-section-type=\"frequencies\">\n            <div class=\"entry-body-section-content frequency-group-list\"></div>\n        </div>\n    </div>\n    <div class=\"kanji-glyph-data\">\n        <button type=\"button\" class=\"expansion-button\"><div class=\"expansion-button-icon icon\" data-icon=\"double-down-chevron\"></div></button>\n        <table class=\"kanji-glyph-table\">\n            <tbody>\n                <tr>\n                    <th scope=\"col\">Meaning</th>\n                    <th scope=\"col\">Readings</th>\n                    <th scope=\"col\">Statistics</th>\n                </tr>\n                <tr>\n                    <td class=\"kanji-gloss-container\"><ol class=\"kanji-gloss-list\"></ol></td>\n                    <td class=\"kanji-readings\"><dl class=\"kanji-readings-chinese\"></dl><dl class=\"kanji-readings-japanese\"></dl></td>\n                    <td class=\"kanji-statistics\"></td>\n                </tr>\n                <tr><th scope=\"col\" colspan=\"3\">Classifications</th></tr>\n                <tr><td colspan=\"3\" class=\"kanji-classifications\"></td></tr>\n                <tr><th scope=\"col\" colspan=\"3\">Codepoints</th></tr>\n                <tr><td colspan=\"3\" class=\"kanji-codepoints\"></td></tr>\n                <tr><th scope=\"col\" colspan=\"3\">Dictionary Indices</th></tr>\n                <tr><td colspan=\"3\" class=\"kanji-dictionary-indices\"></td></tr>\n            </tbody>\n        </table>\n    </div>\n</div></template>\n<template id=\"kanji-info-table-template\"><table class=\"kanji-info-table\"><tbody class=\"kanji-info-table-body\"></tbody></table></template>\n<template id=\"kanji-info-table-item-template\"><tr class=\"kanji-info-table-item\"><th scope=\"col\" class=\"kanji-info-table-item-header\"></th><td class=\"kanji-info-table-item-value\"></td></tr></template>\n<template id=\"kanji-info-table-empty-template\"><tr class=\"kanji-info-table-item kanji-info-table-item-empty\"><td class=\"kanji-info-table-item-value-empty\">No data found</td></tr></template>\n<template id=\"kanji-gloss-item-template\"><li class=\"kanji-gloss-item\"><span class=\"kanji-gloss-content\"></span></li></template>\n<template id=\"kanji-reading-template\"><dd class=\"kanji-reading\"></dd></template>\n\n<!-- Tag -->\n<template id=\"tag-template\"><span class=\"tag\"><span class=\"tag-label\"><span class=\"tag-label-content\"></span></span></span></template>\n<template id=\"tag-with-body-template\"><span class=\"tag tag-has-body\"><span class=\"tag-label\"><span class=\"tag-label-content\"></span></span><span class=\"tag-body\"><span class=\"tag-body-content\"></span></span></span></template>\n\n<!-- Extra -->\n<template id=\"footer-notification-template\"><div class=\"footer-notification scrollbar\">\n    <div class=\"footer-notification-body\"></div>\n    <div class=\"footer-notification-close-button-container\">\n        <button type=\"button\" class=\"footer-notification-close-button\"><span class=\"footer-notification-close-button-icon icon\" data-icon=\"cross\"></span></button>\n    </div>\n</div></template>\n<template id=\"footer-notification-tag-details-template\" data-remove-whitespace-text=\"true\">\n    <div class=\"tag-details\"></div>\n    <div class=\"tag-details-disambiguation-list\"></div>\n</template>\n<template id=\"profile-list-item-template\"><label class=\"profile-list-item\">\n    <div class=\"profile-list-item-selection\"><label class=\"radio\"><input type=\"radio\" class=\"profile-entry-is-default-radio\" name=\"profile-entry-default-radio\"><span class=\"radio-body\"><span class=\"radio-border\"></span><span class=\"radio-dot\"></span></span></label></div>\n    <div class=\"profile-list-item-name\"></div>\n</label></template>\n\n</body></html>";
+
+//#endregion
+//#region src/render/styles/display-styles.d.ts
+//# sourceMappingURL=display-templates.d.ts.map
+/**
+ * The display CSS styles from the Yomitan extension.
+ * Sourced from Yomitan's ext/css/display.css.
+ */
+declare const DISPLAY_CSS = "/*\n * Copyright (C) 2023-2025  Yomitan Authors\n * Copyright (C) 2016-2022  Yomichan Authors\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the entrys of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program.  If not, see <https://www.gnu.org/licenses/>.\n */\n\n/* Variables */\n:root {\n    /* Strings */\n    --compact-list-separator: ' | ';\n\n    --disambiguation-separator: ', ';\n    --disambiguation-reading-separator: ':';\n\n    --headword-separator: '\\3001';\n\n    --inflection-separator: '\\00AB';\n\n    /* Layout */\n    --font-size-no-units: 14;\n    --font-size: calc(1px * var(--font-size-no-units));\n    --query-parser-font-size-no-units: 2;\n    --query-parser-font-size: calc(1em * var(--query-parser-font-size-no-units));\n    --h2-font-size-no-units: 1.25;\n    --h2-font-size: calc(1em * var(--h2-font-size-no-units));\n\n    --headword-font-size-no-units: 2;\n    --headword-font-size: calc(1em * var(--headword-font-size-no-units));\n    --headword-reading-font-size-no-units: 0.75;\n    --headword-reading-font-size: calc(var(--headword-reading-font-size-no-units) * var(--headword-font-size));\n    --headword-reading-space: 0.5em;\n    --headword-list-end-space: 0.5em;\n    --headword-thin-border-size: calc(1em / (var(--headword-font-size-no-units) * var(--font-size-no-units)));\n\n    --line-height-no-units: 20;\n    --line-height: calc(var(--line-height-no-units) / var(--font-size-no-units));\n\n    --thin-border-size: calc(1em / var(--font-size-no-units));\n\n    --action-button-size-no-units: 16;\n    --action-button-size: calc(1em * (var(--action-button-size-no-units) / var(--font-size-no-units)));\n    --action-button-padding: 0.3em;\n\n    --list-margin: 0.72em;\n    --content-width: 100%;\n    --main-content-vertical-padding: 0em;\n    --main-content-horizontal-padding: 0em;\n    --entry-horizontal-padding: 0.72em;\n    --entry-vertical-padding: 0.72em;\n    --query-horizontal-padding: 0.72em;\n\n    --sidebar-width-no-units: 40;\n    --sidebar-width: calc(1em * (var(--sidebar-width-no-units) / var(--font-size-no-units)));\n    --sidebar-button-height-no-units: 30;\n    --sidebar-button-height: calc(1em * (var(--sidebar-button-height-no-units) / var(--font-size-no-units)));\n    --sidebar-button-icon-size-no-units: 16;\n    --sidebar-button-icon-size: calc(1em * (var(--sidebar-button-icon-size-no-units) / var(--font-size-no-units)));\n\n    --progress-bar-height-no-units: 4;\n    --progress-bar-height: calc(1em * (var(--progress-bar-height-no-units) / var(--font-size-no-units)));\n    --progress-bar-active-transition-duration: 0.125s;\n    --progress-bar-active-transition-start-delay: 0.0625s;\n    --progress-bar-animation-duration: 2s;\n\n    --entry-current-indicator-width-no-units: 4;\n    --entry-current-indicator-width: calc(1em * var(--entry-current-indicator-width-no-units) / var(--font-size-no-units));\n    --entry-current-indicator-transition-duration: 0.125s;\n\n    --tag-height-no-units: 20;\n    --tag-height: calc(1em * var(--tag-height-no-units) / var(--font-size-no-units));\n    --tag-font-size-no-units: 11;\n    --tag-font-size: calc(1em * var(--tag-font-size-no-units) / var(--font-size-no-units));\n    --tag-border-size-no-units: 1;\n    --tag-border-size: calc(1em * (var(--tag-border-size-no-units) / var(--font-size-no-units)));\n    --tag-border-style: solid;\n    --tag-font-weight: bold;\n    --tag-border-radius: 0.25em;\n\n    --list-padding1: 1.4em;\n    --list-padding2: var(--list-padding1);\n\n    --entry-current-indicator-triangle-size-no-units: 6;\n    --entry-current-indicator-triangle-size: calc(1em * (var(--entry-current-indicator-triangle-size-no-units) / var(--font-size-no-units)));\n\n    --overlay-panel-translate-distance: 4em;\n\n    --disambiguation-space: 0.25em;\n\n    --animation-duration: 0.125s;\n    --animation-duration2: calc(2 * var(--animation-duration));\n\n    --collapsible-definition-line-count: 3;\n    --collapsible-kanji-glyph-data-line-count: 3;\n    --kanji-glyph-table-header-height: calc((20em / var(--font-size-no-units)) + var(--kanji-glyph-table-cell-padding) * 3);\n    --collapsible-definition-test-offset: 0.2em;\n    --collpasible-kanji-glyph-data-test-offset: 0.2em;\n\n    /* Colors */\n    --background-color: #ffffff;\n    --gloss-image-background-color: #eeeeee;\n    --link-color: var(--accent-color);\n\n    --text-color: #000000;\n    --reason-text-color: var(--text-color-light3);\n\n    --headword-text-color: var(--text-color);\n    --headword-text-color-popular: var(--accent-color);\n    --headword-text-color-rare: var(--text-color-light4);\n    --headword-furigana-text-color: var(--headword-text-color);\n    --headword-furigana-text-color-popular: var(--headword-text-color-popular);\n    --headword-furigana-text-color-rare: var(--headword-text-color-rare);\n    --headword-reading-text-color: var(--headword-furigana-text-color);\n    --headword-reading-text-color-popular: var(--headword-furigana-text-color-popular);\n    --headword-reading-text-color-rare: var(--headword-furigana-text-color-rare);\n    --headword-kanji-text-color: var(--headword-text-color);\n    --headword-kanji-text-color-popular: var(--headword-text-color-popular);\n    --headword-kanji-text-color-rare: var(--headword-text-color-rare);\n    --headword-kanji-border-color: var(--dark-border-color);\n    --headword-kanji-border-color-popular: var(--headword-kanji-border-color);\n    --headword-kanji-border-color-rare: var(--headword-kanji-border-color);\n\n    --kanji-glyph-table-cell-padding: 0.36em;\n\n    --light-border-color: #eeeeee;\n    --medium-border-color: #dddddd;\n    --dark-border-color: #777777;\n\n    --tag-text-color: #ffffff;\n    --tag-border-color: transparent;\n    --tag-default-background-color: #8a8a91;\n    --tag-name-background-color: #b6327a;\n    --tag-expression-background-color: #f0ad4e;\n    --tag-popular-background-color: #0275d8;\n    --tag-frequent-background-color: #5bc0de;\n    --tag-archaism-background-color: #d9534f;\n    --tag-dictionary-background-color: #aa66cc;\n    --tag-frequency-background-color: #5cb85c;\n    --tag-part-of-speech-background-color: #565656;\n    --tag-search-background-color: #8a8a91;\n    --tag-pronunciation-dictionary-background-color: #6640be;\n\n    --sidebar-background-color: #f8f9fa;\n\n    --sidebar-button-background-color: transparent;\n    --sidebar-button-background-color-hover: #cccccc;\n    --sidebar-button-background-color-active: #aaaaaa;\n    --sidebar-button-danger-background-color: transparent;\n    --sidebar-button-danger-background-color-hover: #dd2222;\n    --sidebar-button-danger-background-color-active: #bb2222;\n    --sidebar-button-icon-color: #333333;\n    --sidebar-button-disabled-icon-color: #888888;\n    --sidebar-button-danger-icon-color: #ffffff;\n\n    --scrollbar-thumb-color: #c1c1c1;\n    --scrollbar-track-color: #f1f1f1;\n    --scrollbar-inverse-thumb-color: #444444;\n    --scrollbar-inverse-track-color: #2f2f2f;\n\n    --progress-bar-track-color: #cccccc;\n    --progress-bar-indicator-color: var(--accent-color);\n    --entry-current-indicator-color: var(--accent-color);\n\n    --notification-text-color: #2f2f2f;\n    --notification-background-color: #f1f1f1;\n    --notification-background-color-light: #e1e1e1;\n    --notification-background-color-lighter: #bbbbbb;\n    --notification-shadow-color: rgba(255, 255, 255, 0.25);\n\n    --action-button-hover-color: #dddddd;\n    --action-button-active-color: #c1c1c1;\n}\n:root[data-theme=dark] {\n    /* Colors */\n    --background-color: #1e1e1e;\n    --gloss-image-background-color: #2f2f2f;\n    --link-color: var(--accent-color);\n\n    --text-color: #d4d4d4;\n    --reason-text-color: var(--text-color-light3);\n\n    --headword-text-color: var(--text-color);\n    --headword-text-color-popular: var(--accent-color);\n    --headword-text-color-rare: var(--text-color-light4);\n    --headword-furigana-text-color: var(--headword-text-color);\n    --headword-furigana-text-color-popular: var(--headword-text-color-popular);\n    --headword-furigana-text-color-rare: var(--headword-text-color-rare);\n    --headword-reading-text-color: var(--headword-furigana-text-color);\n    --headword-reading-text-color-popular: var(--headword-furigana-text-color-popular);\n    --headword-reading-text-color-rare: var(--headword-furigana-text-color-rare);\n    --headword-kanji-border-color: var(--dark-border-color);\n\n    --light-border-color: #2f2f2f;\n    --medium-border-color: #3f3f3f;\n    --dark-border-color: #888888;\n\n    --tag-text-color: #f1f1f1;\n    --tag-border-color: transparent;\n    --tag-default-background-color: #69696e;\n    --tag-name-background-color: #992a67;\n    --tag-expression-background-color: #b07f39;\n    --tag-popular-background-color: #025caa;\n    --tag-frequent-background-color: #4490a7;\n    --tag-archaism-background-color: #b04340;\n    --tag-dictionary-background-color: #9057ad;\n    --tag-frequency-background-color: #489148;\n    --tag-part-of-speech-background-color: #565656;\n    --tag-search-background-color: #69696e;\n    --tag-pronunciation-dictionary-background-color: #6640be;\n\n    --sidebar-background-color: #282828;\n\n    --sidebar-button-background-color: transparent;\n    --sidebar-button-background-color-hover: #3a3a3a;\n    --sidebar-button-background-color-active: #5a5a5a;\n    --sidebar-button-danger-background-color: transparent;\n    --sidebar-button-danger-background-color-hover: #dd2222;\n    --sidebar-button-danger-background-color-active: #bb2222;\n    --sidebar-button-icon-color: #cccccc;\n    --sidebar-button-disabled-icon-color: #777777;\n    --sidebar-button-danger-icon-color: #ffffff;\n\n    --scrollbar-thumb-color: #444444;\n    --scrollbar-track-color: #2f2f2f;\n    --scrollbar-inverse-thumb-color: #c1c1c1;\n    --scrollbar-inverse-track-color: #f1f1f1;\n\n    --progress-bar-track-color: #3a3a3a;\n    --progress-bar-indicator-color: var(--accent-color);\n    --entry-current-indicator-color: var(--accent-color);\n\n    --notification-text-color: #ffffff;\n    --notification-background-color: #333333;\n    --notification-background-color-light: #555555;\n    --notification-background-color-lighter: #666666;\n    --notification-shadow-color: rgba(0, 0, 0, 0.5);\n\n    --action-button-hover-color: #282828;\n    --action-button-active-color: #444444;\n}\n\n\n/* Fonts */\n@font-face {\n    font-family: kanji-stroke-orders;\n    src: url('/data/fonts/kanji-stroke-orders.ttf');\n}\n\n\n/* General */\n:root[data-page-type=popup]:not([data-theme]),\n:root[data-page-type=popup]:not([data-theme]) body {\n    background-color: transparent;\n}\nbody {\n    overflow: hidden;\n}\nol, ul {\n    margin-top: 0;\n    margin-bottom: var(--list-padding);\n}\nh2 {\n    font-size: var(--h2-font-size);\n    font-weight: normal;\n    margin: 0.25em 0 0;\n    border-bottom: calc(1em / (var(--font-size-no-units) * var(--h2-font-size-no-units))) solid var(--light-border-color);\n}\nh3 {\n    font-size: 1em;\n    font-weight: bold;\n    margin: 0.25em 0 0.375em;\n    padding: 0;\n}\nh5 {\n    font-size: calc(12em / var(--font-size-no-units));\n    margin: 0;\n    padding: 0;\n    font-weight: normal;\n}\na {\n    color: var(--link-color);\n    text-decoration: underline;\n    cursor: pointer;\n    text-underline-offset: calc(4em / var(--font-size-no-units));\n    text-decoration-thickness: calc(1em / var(--font-size-no-units));\n}\na:has(rt) {\n    text-decoration: none;\n    border-bottom: solid calc(1em / var(--font-size-no-units)) var(--link-color);\n}\n\n\n/* Selection */\n#content-scroll-focus {\n    opacity: 0;\n    margin: 0;\n    padding: 0;\n    outline: none;\n    background-color: transparent;\n    display: inline;\n    width: 0;\n    height: 0;\n    line-height: 0;\n    user-select: none;\n}\n#content-scroll-focus::-moz-focus-inner {\n    border: 0;\n}\n\n\n/* Scrollbars */\n:root:not([data-theme=light]) .scrollbar {\n    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);\n}\n:root:not([data-theme=light]) .scrollbar::-webkit-scrollbar {\n    width: auto;\n}\n:root:not([data-theme=light]) .scrollbar::-webkit-scrollbar-button {\n    height: 0;\n}\n:root:not([data-theme=light]) .scrollbar::-webkit-scrollbar-thumb {\n    background-color: var(--scrollbar-thumb-color);\n}\n:root:not([data-theme=light]) .scrollbar::-webkit-scrollbar-track {\n    background-color: var(--scrollbar-thumb-color);\n}\n:root:not([data-theme=light]) .scrollbar::-webkit-scrollbar-track-piece {\n    background-color: var(--scrollbar-track-color);\n}\n:root:not([data-theme=light]) .scrollbar::-webkit-scrollbar-corner {\n    background-color: var(--scrollbar-track-color);\n}\n:root .scrollbar-inverse {\n    scrollbar-color: var(--scrollbar-inverse-humb-color) var(--scrollbar-inverse-track-color);\n}\n:root .scrollbar-inverse::-webkit-scrollbar {\n    width: auto;\n}\n:root .scrollbar-inverse::-webkit-scrollbar-button {\n    height: 0;\n}\n:root .scrollbar-inverse::-webkit-scrollbar-thumb {\n    background-color: var(--scrollbar-inverse-thumb-color);\n}\n:root .scrollbar-inverse::-webkit-scrollbar-track {\n    background-color: var(--scrollbar-inverse-thumb-color);\n}\n:root .scrollbar-inverse::-webkit-scrollbar-track-piece {\n    background-color: var(--scrollbar-inverse-track-color);\n}\n:root .scrollbar-inverse::-webkit-scrollbar-corner {\n    background-color: var(--scrollbar-inverse-track-color);\n}\n.scrollbar-spacer {\n    display: inline-block;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    visibility: hidden;\n    flex: 0 1 auto;\n}\n\n\n/* Main layout */\n.content {\n    flex: 1 1 auto;\n    position: relative;\n}\n.content-scroll {\n    position: absolute;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    flex-flow: column nowrap;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    align-items: stretch;\n    justify-content: flex-start;\n}\n.content-body {\n    flex: 1 1 auto;\n    position: relative;\n}\n.content-body-inner {\n    width: var(--content-width);\n    max-width: 100%;\n    box-sizing: border-box;\n    margin: 0 auto;\n    padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding);\n}\n.content-footer-container1 {\n    display: flex;\n    flex-flow: row nowrap;\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    max-height: 100%;\n    pointer-events: none;\n    z-index: 5;\n}\n.content-footer-container2 {\n    display: flex;\n    flex-flow: row nowrap;\n    justify-content: center;\n    flex: 1 1 auto;\n    max-width: 100%;\n}\n.content-footer {\n    width: var(--content-width);\n    max-width: 100%;\n}\n.contain-overscroll {\n    overscroll-behavior: contain;\n}\n\n\n/* Sidebar layout */\n.content-outer {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-flow: row nowrap;\n    overflow: hidden;\n    align-items: stretch;\n    align-content: stretch;\n    justify-content: center;\n}\n.content-sidebar {\n    flex: 0 0 auto;\n    height: 100%;\n    overflow-x: hidden;\n    overflow-y: auto;\n    background-color: var(--sidebar-background-color);\n    z-index: 10;\n    position: relative;\n    display: none;\n}\n:root[data-has-navigation-previous=true] .content-sidebar,\n:root[data-has-navigation-next=true] .content-sidebar,\n:root[data-popup-action-bar-visibility=always] .content-sidebar,\n:root[data-profile-panel-visible=true] .content-sidebar {\n    display: block;\n}\n.content-sidebar-inner {\n    display: flex;\n    flex-flow: column nowrap;\n    width: var(--sidebar-width);\n    height: 100%;\n}\n.content-sidebar-top-pre {\n    flex: 0 0 auto;\n    display: flex;\n    flex-flow: column nowrap;\n}\n.content-sidebar-top {\n    flex: 1 1 auto;\n    display: flex;\n    flex-flow: column nowrap;\n}\n.content-sidebar-bottom {\n    position: sticky;\n    bottom: 0;\n    background-color: var(--sidebar-background-color);\n    display: flex;\n    flex-flow: column nowrap;\n    align-items: center;\n}\n:root[data-popup-action-bar-location=top] .content-outer,\n:root[data-popup-action-bar-location=bottom] .content-outer {\n    flex-flow: column nowrap;\n}\n:root[data-popup-action-bar-location=top] .content-sidebar,\n:root[data-popup-action-bar-location=bottom] .content-sidebar {\n    height: auto;\n    width: 100%;\n}\n:root[data-popup-action-bar-location=left] .content-sidebar,\n:root[data-popup-action-bar-location=top] .content-sidebar {\n    order: -1;\n}\n:root[data-popup-action-bar-location=top] .content-sidebar-inner,\n:root[data-popup-action-bar-location=bottom] .content-sidebar-inner {\n    flex-flow: row nowrap;\n    width: auto;\n    height: var(--sidebar-button-height);\n}\n:root[data-popup-action-bar-location=top] .content-sidebar-top-pre,\n:root[data-popup-action-bar-location=bottom] .content-sidebar-top-pre {\n    flex-flow: row nowrap;\n    order: 1;\n}\n:root[data-popup-action-bar-location=top] .content-sidebar-top,\n:root[data-popup-action-bar-location=bottom] .content-sidebar-top {\n    flex-flow: row nowrap;\n}\n:root[data-popup-action-bar-location=top] .content-sidebar-bottom,\n:root[data-popup-action-bar-location=bottom] .content-sidebar-bottom {\n    flex-flow: row nowrap;\n}\n\n:root[data-popup-action-bar-location=right] #profile-name,\n:root[data-popup-action-bar-location=left] #profile-name {\n    writing-mode: vertical-rl;\n    text-orientation: vertical;\n    letter-spacing: 2px;\n}\n\n\n/* Sidebar buttons */\nbutton.sidebar-button {\n    --button-content-color: var(--sidebar-button-icon-color);\n    --button-border-color: transparent;\n    --button-background-color: var(--sidebar-button-background-color);\n    --button-shadow: none;\n\n    --button-hover-border-color: transparent;\n    --button-hover-background-color: var(--sidebar-button-background-color-hover);\n    --button-hover-shadow: none;\n\n    --button-active-border-color: transparent;\n    --button-active-background-color: var(--sidebar-button-background-color-active);\n    --button-active-shadow: none;\n\n    --button-disabled-content-color: var(--sidebar-button-disabled-icon-color);\n    --button-disabled-border-color: transparent;\n    --button-disabled-background-color: var(--sidebar-button-background-color);\n    --button-disabled-shadow: none;\n\n    width: 100%;\n    height: var(--sidebar-button-height);\n    margin: 0;\n    padding: 0;\n    border-style: none;\n    border-width: 0;\n    cursor: pointer;\n    display: block;\n    transition: background-color 0.125s ease-in-out;\n    outline: none;\n    font-size: inherit;\n    border-radius: 0;\n}\n:root[data-popup-action-bar-location=top] button.sidebar-button,\n:root[data-popup-action-bar-location=bottom] button.sidebar-button {\n    width: var(--sidebar-width);\n    height: 100%;\n}\nbutton.sidebar-button.danger {\n    --button-content-color: var(--sidebar-button-icon-color);\n    --button-border-color: transparent;\n    --button-background-color: var(--sidebar-button-danger-background-color);\n    --button-shadow: none;\n\n    --button-hover-content-color: var(--sidebar-button-danger-icon-color);\n    --button-hover-border-color: transparent;\n    --button-hover-background-color: var(--sidebar-button-danger-background-color-hover);\n    --button-hover-shadow: none;\n\n    --button-active-content-color: var(--sidebar-button-danger-icon-color);\n    --button-active-border-color: transparent;\n    --button-active-background-color: var(--sidebar-button-danger-background-color-active);\n    --button-active-shadow: none;\n}\n.sidebar-button-icon {\n    --icon-size: var(--sidebar-button-icon-size) var(--sidebar-button-icon-size);\n\n    display: block;\n    width: 100%;\n    height: 100%;\n    background-color: var(--button-current-content-color);\n    transition: background-color 0.125s ease-in-out;\n}\nbutton.sidebar-button.sidebar-button-highlight {\n    --button-content-color: var(--accent-color);\n    --button-hover-content-color: var(--accent-color);\n    --button-active-content-color: var(--accent-color);\n}\n\n\n/* Search page */\n.search-header-wrapper {\n    background-color: var(--background-color);\n    width: 100%;\n    display: flex;\n    justify-content: center;\n}\n.sticky-header {\n    position: sticky;\n    top: 0px;\n    z-index: 1000;\n}\n#sticky-search-header {\n    padding-top: 10px;\n}\n.sticky-header #query-parser-content {\n    max-height: calc(var(--query-parser-font-size) * 2);\n}\n.search-header {\n    width: var(--content-width);\n    display: flex;\n    flex-flow: column nowrap;\n    max-height: 100vh;\n    padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding);\n}\n#query-parser-container {\n    overflow-y: auto;\n    padding-left: var(--query-horizontal-padding);\n    padding-right: var(--query-horizontal-padding);\n    padding-bottom: 0.25em;\n    border-bottom: var(--headword-thin-border-size) solid var(--light-border-color);\n}\n#query-parser-content {\n    margin-top: 0.5em;\n    font-size: var(--query-parser-font-size);\n    white-space: pre-wrap;\n}\n#query-parser-content[data-term-spacing=true] .query-parser-term {\n    margin-right: 0.2em;\n}\n\n\n/* Action buttons */\n.actions {\n    display: flex;\n    flex-flow: row nowrap;\n    float: right;\n    margin: -0.25em;\n    position: relative;\n    z-index: 1;\n}\n.actions::after {\n    clear: both;\n    content: '';\n    display: block;\n}\n.note-actions-container {\n    display: flex;\n    flex-flow: row nowrap;\n    align-items: start;\n}\n.action-button-container {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n}\n\n.note-actions-container .action-button-container::after {\n    content: '';\n    position: absolute;\n    left: calc(50% - 0.5px);\n    top: calc((var(--action-button-size) + var(--action-button-padding) * 2) * 0.5);\n    bottom: calc((var(--action-button-size) + var(--action-button-padding) * 2) * 0.5);\n    width: 1px;\n    background: var(--accent-color);\n    pointer-events: none;\n    opacity: 0.25;\n    z-index: -1;\n}\n\n.note-actions-container .action-button-container:first-child {\n    flex-direction: row-reverse;\n}\n.note-actions-container .action-button-container:first-child::after {\n    top: calc(50% - 0.5px);\n    left: calc((var(--action-button-size) + var(--action-button-padding) * 2) * 0.5);\n    right: calc((var(--action-button-size) + var(--action-button-padding) * 2) * 0.5);\n    bottom: auto;\n    height: 1px;\n    width: auto;\n}\n\n.note-actions-container .action-button-container:only-child::after {\n    display: none;\n}\n\nbutton.action-button {\n    cursor: pointer;\n    display: block;\n    opacity: 1;\n    border: 0;\n    margin: 0;\n    padding: var(--action-button-padding);\n    background: transparent;\n    font-size: inherit;\n    box-shadow: none;\n    position: relative;\n    z-index: 1;\n    transition:\n        opacity var(--animation-duration) linear,\n        visibility 0s linear 0s,\n        filter var(--animation-duration) linear,\n        -webkit-filter var(--animation-duration) linear,\n        background-color var(--animation-duration) linear;\n}\nbutton.action-button[hidden] {\n    display: block;\n    visibility: hidden;\n    opacity: 0;\n    transition:\n        opacity var(--animation-duration) linear,\n        visibility 0s linear var(--animation-duration),\n        filter var(--animation-duration) linear,\n        -webkit-filter var(--animation-duration) linear,\n        background-color var(--animation-duration) linear;\n}\nbutton.action-button-collapsible[hidden] {\n    display: none;\n}\nbutton.action-button:disabled {\n    pointer-events: auto;\n    cursor: default;\n    -webkit-filter: grayscale(100%);\n    filter: grayscale(100%);\n    background-color: transparent;\n}\nbutton.action-button:disabled:not([hidden]) {\n    opacity: 0.25;\n}\nbutton.action-button:hover,\nbutton.action-button:focus {\n    background-color: transparent;\n    box-shadow: none;\n}\nbutton.action-button:focus-visible {\n    background-color: var(--action-button-hover-color);\n    box-shadow: none;\n}\nbutton.action-button:active:not(:disabled) {\n    background-color: var(--action-button-active-color);\n    box-shadow: none;\n}\n\n.icon[data-icon=view-note] { background-image: url('/images/view-note.svg'); }\n.icon[data-icon=view-note-learning] { background-image: url('/images/view-note-learning.svg'); }\n.icon[data-icon=view-note-review] { background-image: url('/images/view-note-review.svg'); }\n.icon[data-icon=view-note-suspended] { background-image: url('/images/view-note-suspended.svg'); }\n.icon[data-icon=view-note-buried] { background-image: url('/images/view-note-buried.svg'); }\n.icon[data-icon=big-circle] { background-image: url('/images/big-circle.svg'); }\n.icon[data-icon=small-circle]  { background-image: url('/images/small-circle.svg'); }\n.icon[data-icon=big-square] { background-image: url('/images/big-square.svg'); }\n.icon[data-icon=big-diamond] { background-image: url('/images/big-diamond.svg'); }\n.icon[data-icon=overwrite-big-circle] { background-image: url('/images/overwrite-big-circle.svg'); }\n.icon[data-icon=overwrite-small-circle]  { background-image: url('/images/overwrite-small-circle.svg'); }\n.icon[data-icon=overwrite-big-square] { background-image: url('/images/overwrite-big-square.svg'); }\n.icon[data-icon=overwrite-big-diamond] { background-image: url('/images/overwrite-big-diamond.svg'); }\n.icon[data-icon=add-duplicate-big-circle] { background-image: url('/images/add-duplicate-big-circle.svg'); }\n.icon[data-icon=add-duplicate-small-circle]  { background-image: url('/images/add-duplicate-small-circle.svg'); }\n.icon[data-icon=add-duplicate-big-square] { background-image: url('/images/add-duplicate-big-square.svg'); }\n.icon[data-icon=add-duplicate-big-diamond] { background-image: url('/images/add-duplicate-big-diamond.svg'); }\n.icon[data-icon=play-audio]     { background-image: url('/images/play-audio.svg'); }\n.icon[data-icon=source-term]    { background-image: url('/images/source-term.svg'); }\n.icon[data-icon=entry-current]  { background-image: url('/images/entry-current.svg'); }\n.action-icon {\n    display: block;\n    width: var(--action-button-size);\n    height: var(--action-button-size);\n}\n.action-icon:not(.color-icon) {\n    background-color: var(--text-color);\n}\n:root[data-result-output-mode=merge] .entry[data-type=term] .actions>button.action-button[data-action=play-audio] {\n    display: none;\n}\n.action-button-badge {\n    pointer-events: none;\n    position: absolute;\n    display: block;\n    right: 0;\n    top: 0;\n    width: calc(8em / var(--font-size-no-units));\n    height: calc(8em / var(--font-size-no-units));\n}\n.action-button-badge[data-icon=cross] {\n    background-color: var(--danger-color);\n}\n.action-button-badge[data-icon=plus-thick] {\n    background-color: var(--success-color);\n}\n\n\n/* Tags */\n.tag {\n    --tag-color: var(--tag-default-background-color);\n\n    display: inline-flex;\n    flex-flow: row nowrap;\n    align-items: stretch;\n    border: none;\n    border-right: none;\n    font-size: 1em;\n    min-height: var(--tag-height);\n    margin: calc(1em / var(--font-size-no-units)) 0.375em calc(1em / var(--font-size-no-units)) 0;\n}\n.tag-label {\n    display: flex;\n    flex-flow: row nowrap;\n    align-items: center;\n    background-color: var(--tag-color);\n    border-radius: var(--tag-border-radius);\n    padding: calc(2.5em / var(--font-size-no-units)) 0.375em calc(2.5em / var(--font-size-no-units)) 0.375em;\n    color: var(--tag-text-color);\n    cursor: pointer;\n}\n.tag-label-content {\n    display: block;\n    font-size: var(--tag-font-size);\n    font-weight: var(--tag-font-weight);\n}\n.tag-body {\n    display: flex;\n    flex-flow: row nowrap;\n    align-items: center;\n    position: relative;\n    padding: 0 0.375em 0 0.375em;\n    border-radius: var(--tag-border-radius);\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n.tag-body::before {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    border-radius: var(--tag-border-radius);\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n    border: var(--tag-border-size) var(--tag-border-style) var(--tag-color);\n    border-left: none;\n    pointer-events: none;\n}\n.tag-body-content {\n    display: block;\n    position: relative;\n}\n.tag:not(.tag-has-body)>.tag-body {\n    display: none;\n}\n.tag.tag-has-body>.tag-label {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n}\n.tag[data-category=name] {\n    --tag-color: var(--tag-name-background-color);\n}\n.tag[data-category=expression] {\n    --tag-color: var(--tag-expression-background-color);\n}\n.tag[data-category=popular] {\n    --tag-color: var(--tag-popular-background-color);\n}\n.tag[data-category=frequent] {\n    --tag-color: var(--tag-frequent-background-color);\n}\n.tag[data-category=archaism] {\n    --tag-color: var(--tag-archaism-background-color);\n}\n.tag[data-category=dictionary] {\n    --tag-color: var(--tag-dictionary-background-color);\n}\n.tag[data-category=frequency] {\n    --tag-color: var(--tag-frequency-background-color);\n}\n.tag[data-category=partOfSpeech] {\n    --tag-color: var(--tag-part-of-speech-background-color);\n}\n.tag[data-category=search] {\n    --tag-color: var(--tag-search-background-color);\n}\n.tag[data-category=pronunciation-dictionary] {\n    --tag-color: var(--tag-pronunciation-dictionary-background-color);\n}\n\n\n/* Entries */\n.entry {\n    padding: var(--entry-vertical-padding) var(--entry-horizontal-padding);\n    position: relative;\n    content-visibility: auto;\n    contain-intrinsic-height: auto 500px;\n}\n.entry+.entry {\n    border-top: var(--thin-border-size) solid var(--light-border-color);\n}\n.entry-body {\n    clear: both;\n}\n.entry[data-definition-count='0'] .entry-body-section[data-section-type=definitions],\n.entry[data-frequency-count='0'] .entry-body-section[data-section-type=frequencies],\n.entry[data-pronunciation-count='0'] .entry-body-section[data-section-type=pronunciations] {\n    display: none;\n}\n\n\n/* Inflections */\n.inflection-rule-chains {\n    padding-inline-start: 0;\n    list-style-type: none;\n}\n.inflection-rule-chain {\n    color: var(--reason-text-color);\n}\n.inflection-rule-chain:empty {\n    display: none;\n}\n.inflection-rule-chain>.inflection+.inflection-separator+.inflection::before {\n    content: var(--inflection-separator);\n    padding: 0 0.25em;\n}\n.inflection-source-icon {\n    display: inline-block;\n    white-space: nowrap;\n    text-align: center;\n    width: 1.4em;\n    margin-right: 0.2em;\n}\n.inflection-source-icon[data-inflection-source='dictionary']::after {\n    content: '\uD83D\uDCD6';\n}\n.inflection-source-icon[data-inflection-source='algorithm']::after {\n    content: '\uD83E\uDDE9';\n}\n.inflection-source-icon[data-inflection-source='both'] {\n    width: 2.8em;\n}\n.inflection-source-icon[data-inflection-source='both']::after {\n    content: '\uD83E\uDDE9\uD83D\uDCD6';\n}\n.inflection[title] {\n    cursor: pointer;\n}\n\n\n/* Headwords */\n.headword-list {\n    display: inline;\n    margin-right: var(--headword-list-end-space);\n}\n.headword {\n    --headword-current-text-color: var(--headword-text-color);\n    --headword-current-reading-text-color: var(--headword-reading-text-color);\n    --headword-current-furigana-text-color: var(--headword-furigana-text-color);\n    --headword-current-kanji-text-color: var(--headword-kanji-text-color);\n    --headword-current-kanji-border-color: var(--headword-kanji-border-color);\n\n    display: inline-block;\n}\n:root[data-result-output-mode=merge] .headword[data-frequency=popular] {\n    --headword-current-text-color: var(--headword-text-color-popular);\n    --headword-current-reading-text-color: var(--headword-reading-text-color-popular);\n    --headword-current-furigana-text-color: var(--headword-furigana-text-color-popular);\n    --headword-current-kanji-text-color: var(--headword-kanji-text-color-popular);\n    --headword-current-kanji-border-color: var(--headword-kanji-border-color-popular);\n}\n:root[data-result-output-mode=merge] .headword[data-frequency=rare] {\n    --headword-current-text-color: var(--headword-text-color-rare);\n    --headword-current-reading-text-color: var(--headword-reading-text-color-rare);\n    --headword-current-furigana-text-color: var(--headword-furigana-text-color-rare);\n    --headword-current-kanji-text-color: var(--headword-kanji-text-color-rare);\n    --headword-current-kanji-border-color: var(--headword-kanji-border-color-rare);\n}\n.headword-details {\n    display: inline;\n}\n.headword-list-details {\n    display: inline;\n}\n.headword-list-tag-list {\n    display: inline;\n}\n.headword-text-container {\n    display: inline-block;\n    margin-left: calc(-1 * var(--headword-reading-space));\n}\n.headword-term-outer {\n    display: inline-block;\n    position: relative;\n    margin-left: var(--headword-reading-space);\n}\n.headword-reading-outer {\n    display: none;\n    position: relative;\n    margin-left: var(--headword-reading-space);\n}\n.headword-term {\n    color: var(--headword-current-text-color);\n    font-size: var(--headword-font-size);\n}\n.headword-reading {\n    color: var(--headword-current-reading-text-color);\n    font-size: var(--headword-reading-font-size);\n}\n.headword-list>.headword:not(:last-of-type)>.headword-text-container>.headword-term-outer::after {\n    content: var(--headword-separator);\n    font-size: var(--headword-font-size);\n}\n.headword-list>.headword:not(:last-of-type)>.headword-text-container>.headword-reading-outer::after {\n    content: var(--headword-separator);\n    font-size: var(--headword-reading-font-size);\n}\n.headword-term>ruby>rt {\n    color: var(--headword-current-furigana-text-color);\n}\n.headword-kanji-link {\n    text-decoration: underline dashed var(--headword-current-kanji-border-color) var(--headword-thin-border-size);\n    text-underline-offset: calc(var(--headword-font-size) / 15);\n    color: var(--headword-current-kanji-text-color);\n    cursor: pointer;\n}\n:root[data-result-output-mode=merge] .headword-list-details {\n    display: block;\n}\n:root[data-term-display-mode=ruby-and-reading] .headword-term-outer::after,\n:root[data-term-display-mode=term-and-reading] .headword-term-outer::after {\n    display: none;\n}\n:root:not([data-language=ja]) {\n    --headword-separator: ', ';\n}\n:root[data-term-display-mode=ruby-and-reading] .headword-reading-outer,\n:root[data-term-display-mode=term-and-reading] .headword-reading-outer {\n    display: inline-block;\n}\n:root[data-term-display-mode=ruby-and-reading] .headword[data-reading-is-same=true] .headword-term-outer::after,\n:root[data-term-display-mode=term-and-reading] .headword[data-reading-is-same=true] .headword-term-outer::after {\n    display: inline-block;\n}\n:root[data-term-display-mode=ruby-and-reading] .headword[data-reading-is-same=true] .headword-reading-outer,\n:root[data-term-display-mode=term-and-reading] .headword[data-reading-is-same=true] .headword-reading-outer {\n    display: none;\n}\n:root[data-term-display-mode=term-and-reading] .headword-term>ruby>rt,\n:root[data-term-display-mode=term-only] .headword-term>ruby>rt {\n    display: none;\n}\n\n\n/* Entry indicator */\n.entry-current-indicator {\n    display: block;\n    position: absolute;\n    left: calc(-1 * var(--main-content-horizontal-padding));\n    top: 0;\n    bottom: 0;\n    width: 0;\n    background-color: var(--entry-current-indicator-color);\n    visibility: hidden;\n    transition:\n        width var(--entry-current-indicator-transition-duration) linear,\n        visibility 0s linear var(--entry-current-indicator-transition-duration);\n}\n.entry.entry-current .entry-current-indicator {\n    width: var(--entry-current-indicator-width);\n    visibility: visible;\n    transition:\n        width var(--entry-current-indicator-transition-duration) linear,\n        visibility 0s linear 0s;\n}\n:root[data-popup-current-indicator-mode=bar-right] .entry-current-indicator,\n:root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator {\n    left: auto;\n    right: 0;\n}\n.entry-current-indicator-inner {\n    display: none;\n    pointer-events: auto;\n    width: 100%;\n    height: 0;\n    top: 0;\n    background-color: var(--entry-current-indicator-color);\n    transition: none;\n}\n.entry.entry-current .entry-current-indicator-inner {\n    height: var(--entry-current-indicator-width);\n    transition: height var(--entry-current-indicator-transition-duration) linear;\n}\n:root[data-popup-current-indicator-mode=dot-left] .entry-current-indicator,\n:root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator {\n    background-color: transparent;\n}\n:root[data-popup-current-indicator-mode=dot-left] .entry-current-indicator-inner,\n:root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator-inner {\n    display: block;\n    position: sticky;\n    transition: height var(--entry-current-indicator-transition-duration) linear;\n}\n:root[data-popup-current-indicator-mode=none] .entry-current-indicator,\n:root[data-popup-current-indicator-mode=asterisk] .entry-current-indicator,\n:root[data-popup-current-indicator-mode=triangle] .entry-current-indicator {\n    display: none;\n    transition: none;\n}\n\n\n/* Triangle entry indicator */\n.headword-current-indicator {\n    pointer-events: none;\n    position: absolute;\n    left: calc(-1 * var(--main-content-horizontal-padding));\n    top: 0;\n    bottom: 0;\n    opacity: 0;\n    visibility: hidden;\n    transition:\n        opacity var(--entry-current-indicator-transition-duration) linear,\n        visibility 0s linear var(--entry-current-indicator-transition-duration);\n}\n.headword-term .headword-current-indicator {\n    font-size: calc(1em / var(--headword-font-size-no-units));\n}\n.entry.entry-current .headword-current-indicator {\n    opacity: 1;\n    visibility: visible;\n    transition:\n        opacity var(--entry-current-indicator-transition-duration) linear,\n        visibility 0s linear 0s;\n}\n.headword-current-indicator::after {\n    content: '';\n    display: block;\n    position: absolute;\n    width: var(--entry-current-indicator-triangle-size);\n    height: calc(2 * var(--entry-current-indicator-triangle-size));\n    left: calc(-1 * var(--entry-horizontal-padding));\n    top: calc(50% - var(--entry-current-indicator-triangle-size));\n    background-color: var(--entry-current-indicator-color);\n    mask-repeat: no-repeat;\n    mask-position: center center;\n    mask-mode: alpha;\n    mask-size: contain;\n    mask-image: url(/images/material-right-arrow.svg);\n    -webkit-mask-repeat: no-repeat;\n    -webkit-mask-position: center center;\n    -webkit-mask-mode: alpha;\n    -webkit-mask-size: contain;\n    -webkit-mask-image: url(/images/material-right-arrow.svg);\n}\n.headword-list>.headword:not(:first-of-type) .headword-current-indicator,\n:root:not([data-popup-current-indicator-mode=triangle]) .headword-current-indicator {\n    display: none;\n    transition: none;\n}\n\n\n/* Old entry indicator */\n.entry-current-indicator-icon {\n    display: block;\n    padding: var(--action-button-padding);\n}\n.entry-current-indicator-icon[hidden],\n.entry:not(.entry-current) .entry-current-indicator-icon,\n:root:not([data-popup-current-indicator-mode=asterisk]) .entry-current-indicator-icon {\n    display: none;\n}\n.entry-current-indicator-icon>.icon {\n    width: var(--action-button-size);\n    height: var(--action-button-size);\n    display: block;\n    background-image: url('/images/entry-current.svg');\n}\n\n\n/* Merged term styles */\n:root[data-result-output-mode=merge] .headword-list .headword-details {\n    display: inline-block;\n    position: relative;\n    width: 0;\n    height: 0;\n    visibility: hidden;\n    z-index: 1;\n}\n:root[data-result-output-mode=merge] .headword-list>.headword:not(:last-of-type) .headword-details {\n    left: calc(-1 * var(--headword-font-size));\n}\n:root[data-result-output-mode=merge] .headword:hover .headword-details {\n    visibility: visible;\n}\n:root[data-result-output-mode=merge] .headword-list .headword-details>.action-button[data-action=play-audio] {\n    position: absolute;\n    left: 0;\n    bottom: 0.5em;\n}\n:root:not([data-result-output-mode=merge]) .headword-list .headword-details>.action-button[data-action=play-audio] {\n    display: none;\n}\n\n\n/* Definitions */\n.definition-list {\n    margin: 0;\n    padding: 0 0 0 var(--list-padding1);\n    list-style-type: decimal;\n}\n.definition-list[data-count='0'],\n.definition-list[data-count='1'] {\n    padding-left: 0;\n    list-style-type: none;\n}\n.gloss-list {\n    margin: 0;\n    padding: 0 0 0 var(--list-padding2);\n    list-style-type: circle;\n}\n.gloss-list[data-count='0'],\n.gloss-list[data-count='1'] {\n    padding-left: 0;\n    list-style-type: none;\n}\n.definition-item::marker,\n.gloss-item::marker {\n    color: var(--text-color-light3);\n}\n.gloss-content {\n    display: block;\n    white-space: pre-line;\n}\n.definition-disambiguation-list {\n    color: var(--text-color-light3);\n    padding-right: var(--disambiguation-space);\n}\n.definition-disambiguation-list[data-count='0'] {\n    display: none;\n}\n.definition-disambiguation+.definition-disambiguation::before {\n    content: var(--disambiguation-separator);\n}\n.gloss-separator,\n.inflection-separator {\n    display: inline;\n    font-size: 0;\n    opacity: 0;\n    white-space: pre-wrap;\n}\n.gloss-separator {\n    display: none;\n}\n.definition-item {\n    display: list-item;\n    position: relative;\n}\n.definition-item-inner {\n    display: flex;\n    flex-flow: row nowrap;\n}\n.definition-item-content {\n    width: 100%;\n    flex: 1 1 auto;\n    background-color: transparent;\n    transition: background-color var(--animation-duration) ease-in-out;\n}\n\n/* Collapse & Expand */\nbutton.expansion-button {\n    --button-content-color: var(--text-color-light4);\n    --button-border-color: transparent;\n    --button-background-color: transparent;\n\n    --button-hover-content-color: var(--text-color-light1);\n    --button-hover-border-color: var(--accent-color-lighter);\n    --button-hover-background-color: var(--accent-color-lighter);\n\n    --button-active-content-color: var(--text-color);\n    --button-active-border-color: var(--accent-color-light);\n    --button-active-background-color: var(--accent-color-light);\n\n    --button-padding-vertical: 0;\n    --button-padding-horizontal: 0.125em;\n\n    flex: 0 0 auto;\n    order: 1;\n    border-radius: 0;\n    border: 0;\n}\n\nbutton.expansion-button:hover+.definition-item-content,\nbutton.expansion-button:active+.definition-item-content,\nbutton.expansion-button:focus+.definition-item-content,\nbutton.expansion-button:hover+.kanji-glyph-table,\nbutton.expansion-button:active+.kanji-glyph-table,\nbutton.expansion-button:focus+.kanji-glyph-table {\n    background-color: var(--accent-color-transparent25);\n}\nbutton.expansion-button:focus:not(:focus-visible)+.definition-item-content,\nbutton.expansion-button:focus:not(:focus-visible)+.kanji-glyph-table {\n    background-color: transparent;\n}\nbutton.expansion-button:focus:hover+.definition-item-content,\nbutton.expansion-button:focus:active+.definition-item-content,\nbutton.expansion-button:focus:focus-visible+.definition-item-content,\nbutton.expansion-button:focus:hover+.kanji-glyph-table,\nbutton.expansion-button:focus:active+.kanji-glyph-table,\nbutton.expansion-button:focus:focus-visible+.kanji-glyph-table {\n    background-color: var(--accent-color-transparent25);\n}\n.definition-item-inner.collapsible.collapsed {\n    max-height: calc(1em * var(--collapsible-definition-line-count) * var(--line-height));\n    overflow: hidden;\n}\n.definition-item-inner.collapse-test {\n    max-height: calc(1em * var(--collapsible-definition-line-count) * var(--line-height) + var(--collapsible-definition-test-offset));\n    overflow: hidden;\n}\n.kanji-glyph-data.collapsible.collapsed {\n    max-height: calc(1em * var(--collapsible-kanji-glyph-data-line-count) * var(--line-height) + var(--kanji-glyph-table-header-height));\n    overflow: hidden;\n}\n.kanji-glyph-data.collapse-test {\n    max-height: calc(1em * var(--collapsible-kanji-glyph-data-line-count) * var(--line-height) + var(--kanji-glyph-table-header-height) + var(--collpasible-kanji-glyph-data-test-offset));\n    overflow: hidden;\n}\n:not(.collapsible)>button.expansion-button {\n    display: none;\n}\n.expansion-button-icon {\n    transform: rotate(0deg);\n    width: calc(16em / var(--font-size-no-units));\n    height: calc(16em / var(--font-size-no-units));\n    background-color: var(--button-current-content-color);\n    transition: background-color var(--animation-duration) ease-in-out;\n}\n.collapsible:not(.collapsed)>button.expansion-button>.expansion-button-icon {\n    transform: rotate(180deg);\n}\n\n/* Frequencies */\n.frequency-group-item {\n    display: inline;\n}\n.frequency-item {\n    display: inline;\n}\n.frequency-disambiguation {\n    color: var(--text-color-light3);\n    padding-right: var(--disambiguation-space);\n}\n.frequency-disambiguation-separator::before {\n    content: var(--disambiguation-reading-separator);\n}\n.frequency-disambiguation-reading {\n    display: inline;\n    font-size: 1em;\n}\n.frequency-body::after {\n    white-space: pre-wrap;\n    display: inline;\n    color: var(--text-color-light3);\n}\n.entry[data-unique-term-count='1'] .frequency-item[data-has-reading=false] .frequency-disambiguation,\n.entry[data-unique-reading-count='1'][data-unique-term-count='1'] .frequency-disambiguation,\n.frequency-item[data-reading-is-same=true] .frequency-disambiguation-separator,\n.frequency-item[data-reading-is-same=true] .frequency-disambiguation-reading,\n.frequency-item[data-has-reading=false] .frequency-disambiguation-separator,\n.frequency-item[data-has-reading=false] .frequency-disambiguation-reading,\n.entry[data-unique-term-count='1'] .frequency-disambiguation-separator,\n.entry[data-unique-term-count='1'] .frequency-disambiguation-term,\n.entry[data-unique-reading-count='1'] .frequency-disambiguation-separator,\n.entry[data-unique-reading-count='1'] .frequency-disambiguation-reading {\n    display: none;\n}\n:root[data-frequency-display-mode=tags] .frequency-group-tag,\n:root[data-frequency-display-mode=split-tags] .frequency-group-tag {\n    margin: 0;\n    display: inline;\n    min-height: auto;\n}\n:root[data-frequency-display-mode=tags] .frequency-group-tag>.tag-label,\n:root[data-frequency-display-mode=split-tags] .frequency-group-tag>.tag-label {\n    display: none;\n}\n:root[data-frequency-display-mode=tags] .frequency-group-tag>.tag-body,\n:root[data-frequency-display-mode=split-tags] .frequency-group-tag>.tag-body {\n    display: inline;\n    padding: 0;\n}\n:root[data-frequency-display-mode=tags] .frequency-group-tag>.tag-body::before,\n:root[data-frequency-display-mode=split-tags] .frequency-group-tag>.tag-body::before {\n    display: none;\n}\n:root[data-frequency-display-mode=tags] .frequency-list,\n:root[data-frequency-display-mode=split-tags] .frequency-list {\n    display: inline;\n}\n:root[data-frequency-display-mode=list] .frequency-tag,\n:root[data-frequency-display-mode=inline-list] .frequency-tag,\n:root[data-frequency-display-mode=tags-grouped] .frequency-tag,\n:root[data-frequency-display-mode=split-tags-grouped] .frequency-tag {\n    margin: 0;\n    display: inline;\n    min-height: auto;\n}\n:root[data-frequency-display-mode=list] .frequency-tag>.tag-label,\n:root[data-frequency-display-mode=inline-list] .frequency-tag>.tag-label,\n:root[data-frequency-display-mode=tags-grouped] .frequency-tag>.tag-label,\n:root[data-frequency-display-mode=split-tags-grouped] .frequency-tag>.tag-label {\n    display: none;\n}\n:root[data-frequency-display-mode=list] .frequency-tag>.tag-body,\n:root[data-frequency-display-mode=inline-list] .frequency-tag>.tag-body,\n:root[data-frequency-display-mode=tags-grouped] .frequency-tag>.tag-body,\n:root[data-frequency-display-mode=split-tags-grouped] .frequency-tag>.tag-body {\n    display: inline;\n    padding: 0;\n}\n:root[data-frequency-display-mode=list] .frequency-tag>.tag-body::before,\n:root[data-frequency-display-mode=inline-list] .frequency-tag>.tag-body::before,\n:root[data-frequency-display-mode=tags-grouped] .frequency-tag>.tag-body::before,\n:root[data-frequency-display-mode=split-tags-grouped] .frequency-tag>.tag-body::before {\n    display: none;\n}\n:root[data-frequency-display-mode=list] .frequency-body,\n:root[data-frequency-display-mode=inline-list] .frequency-body,\n:root[data-frequency-display-mode=tags-grouped] .frequency-body,\n:root[data-frequency-display-mode=split-tags-grouped] .frequency-body {\n    display: inline-block;\n}\n:root[data-frequency-display-mode=inline-list] .frequency-item:not(:last-child)>.frequency-tag>.tag-body>.frequency-body::after,\n:root[data-frequency-display-mode=tags-grouped] .frequency-item:not(:last-child)>.frequency-tag>.tag-body>.frequency-body::after,\n:root[data-frequency-display-mode=split-tags-grouped] .frequency-item:not(:last-child)>.frequency-tag>.tag-body>.frequency-body::after {\n    content: var(--compact-list-separator);\n}\n:root[data-frequency-display-mode=list] .frequency-group-tag>.tag-body::before,\n:root[data-frequency-display-mode=inline-list] .frequency-group-tag>.tag-body::before {\n    display: none;\n}\n:root[data-frequency-display-mode=list] .frequency-group-tag.tag.tag-has-body>.tag-label,\n:root[data-frequency-display-mode=inline-list] .frequency-group-tag.tag.tag-has-body>.tag-label {\n    border-radius: var(--tag-border-radius);\n}\n:root[data-frequency-display-mode=tags] .frequency-tag>.tag-body::before {\n    display: none;\n}\n:root[data-frequency-display-mode=tags] .frequency-tag>.tag-body {\n    background-color: var(--tag-color);\n    padding-left: 0;\n}\n:root[data-frequency-display-mode=tags] .frequency-body {\n    font-size: var(--tag-font-size);\n    font-weight: var(--tag-font-weight);\n    color: var(--tag-text-color);\n}\n:root[data-frequency-display-mode=tags] .frequency-tag>.tag-label>.tag-label-content::after {\n    content: ':';\n}\n:root[data-frequency-display-mode=tags-grouped] .frequency-group-tag>.tag-body::before {\n    display: none;\n}\n:root[data-frequency-display-mode=tags-grouped] .frequency-group-tag>.tag-body {\n    background-color: var(--tag-color);\n    padding-left: 0;\n}\n:root[data-frequency-display-mode=tags-grouped] .frequency-list {\n    font-size: var(--tag-font-size);\n    font-weight: var(--tag-font-weight);\n    color: var(--tag-text-color);\n}\n:root[data-frequency-display-mode=tags-grouped] .frequency-group-tag>.tag-label>.tag-label-content::after {\n    content: ':';\n}\n:root[data-frequency-display-mode=tags] .frequency-disambiguation,\n:root[data-frequency-display-mode=tags-grouped] .frequency-disambiguation,\n:root[data-frequency-display-mode=tags] .frequency-body::after,\n:root[data-frequency-display-mode=tags-grouped] .frequency-body::after {\n    color: inherit;\n    font-weight: normal;\n    opacity: 0.75;\n}\n:root[data-frequency-display-mode=list] .frequency-group-list {\n    list-style-type: decimal;\n    padding: 0 0 0 var(--list-padding1);\n}\n:root[data-frequency-display-mode=list] .frequency-group-item {\n    display: list-item;\n}\n:root[data-frequency-display-mode=list] .frequency-group-item::marker {\n    color: var(--text-color-light3);\n}\n:root[data-frequency-display-mode=list] .frequency-group-tag {\n    display: block;\n    min-height: auto;\n}\n:root[data-frequency-display-mode=list] .frequency-group-tag>.tag-label {\n    display: inline-flex;\n}\n:root[data-frequency-display-mode=list] .frequency-list {\n    list-style-type: circle;\n    padding: 0 0 0 var(--list-padding2);\n}\n:root[data-frequency-display-mode=list] .frequency-item {\n    display: list-item;\n}\n:root[data-frequency-display-mode=list] .frequency-item::marker {\n    color: var(--text-color-light3);\n}\n:root[data-frequency-display-mode=list] .frequency-group-list[data-count='1'] {\n    list-style-type: none;\n    padding-left: 0;\n}\n:root[data-frequency-display-mode=list] .frequency-group-list[data-count='1']>.frequency-group-item {\n    display: inline;\n}\n:root[data-frequency-display-mode=list] .frequency-group-item[data-count='1']>.frequency-group-tag>.tag-body {\n    display: inline-flex;\n}\n:root[data-frequency-display-mode=list] .frequency-group-item[data-count='1']>.frequency-group-tag>.tag-body>.frequency-body {\n    display: inline;\n}\n:root[data-frequency-display-mode=list] .frequency-group-item[data-count='1'] .frequency-list {\n    list-style-type: none;\n    padding-left: 0;\n}\n:root[data-frequency-display-mode=list] .frequency-group-item[data-count='1'] .frequency-item {\n    display: inline;\n}\n\n\n/* Pitch accent styles */\n.pronunciation-group-list {\n    margin: 0;\n    padding: 0 0 0 var(--list-padding1);\n    list-style-type: decimal;\n}\n.pronunciation-group-list[data-count='0'],\n.pronunciation-group-list[data-count='1'] {\n    padding-left: 0;\n    list-style-type: none;\n}\n.pronunciation-list {\n    margin: 0;\n    padding: 0 0 0 var(--list-padding2);\n    list-style-type: circle;\n    display: block;\n}\n.pronunciation-list[data-count='0'],\n.pronunciation-list[data-count='1'] {\n    padding-left: 0;\n    list-style-type: none;\n    display: inline;\n}\n.pronunciation-group::marker,\n.pronunciation::marker {\n    color: var(--text-color-light3);\n}\n.pronunciation {\n    display: list-item;\n    line-height: 1.5;\n}\n.pronunciation-list[data-count='0'] .pronunciation,\n.pronunciation-list[data-count='1'] .pronunciation {\n    display: inline;\n}\n.pronunciation-group-tag-list {\n    margin-right: 0.375em;\n}\n.pronunciation-disambiguation-list {\n    color: var(--text-color-light3);\n    padding-right: var(--disambiguation-space);\n}\n.pronunciation-disambiguation+.pronunciation-disambiguation::before {\n    content: var(--disambiguation-separator);\n}\n.pronunciation-disambiguation-list[data-count='0'] {\n    display: none;\n}\n.pronunciation-tag-list:not([data-count='0']) {\n    margin-right: 0.375em;\n}\n.pronunciation-downstep-notation-container {\n    margin-left: 0.25em;\n}\n.pronunciation-graph-container {\n    margin-left: 0.25em;\n}\n\n\n/* Kanji */\n.kanji-glyph-container {\n    display: block;\n    position: relative;\n}\n.kanji-glyph {\n    font-family: sans-serif;\n    font-size: 8.5em;\n    line-height: 1;\n    padding: 0.01em;\n    vertical-align: top;\n}\n.kanji-glyph-data {\n    margin-top: 0.75em;\n    display: flex;\n    flex-flow: row nowrap;\n}\n.kanji-glyph-table {\n    border-spacing: 0;\n    border-collapse: collapse;\n}\n.kanji-glyph-table>tbody>tr>* {\n    border-top: var(--thin-border-size) solid var(--medium-border-color);\n    text-align: left;\n    vertical-align: top;\n    padding: var(--kanji-glyph-table-cell-padding);\n    margin: 0;\n}\n.kanji-info-table {\n    width: 100%;\n}\n.kanji-info-table>tbody>tr>th,\n.kanji-info-table>tbody>tr>td {\n    text-align: left;\n    vertical-align: top;\n    padding: 0;\n    margin: 0;\n}\n.kanji-info-table>tbody>tr>td {\n    text-align: right;\n}\n.kanji-glyph-table dl {\n    margin-top: 0;\n    margin-bottom: 1.4em;\n}\n.kanji-glyph-table dd {\n    margin-left: 0;\n}\n.kanji-gloss-list {\n    margin: 0;\n    padding: 0 0 0 var(--list-padding1);\n    list-style-type: decimal;\n}\n.kanji-gloss-list[data-count='0'],\n.kanji-gloss-list[data-count='1'] {\n    padding-left: 0;\n    list-style-type: none;\n}\n.kanji-gloss-item::marker {\n    color: var(--text-color-light3);\n}\n.kanji-gloss-content {\n    white-space: pre-line;\n}\n.kanji-tag-list {\n    position: relative;\n}\n.entry[data-type=kanji] .entry-body-section[data-section-type=frequencies] {\n    position: relative;\n}\n\n\n/* Progress bar */\n@keyframes progress-bar-indeterminant1a {\n    0% { left: 0; }\n    25% { left: 0; }\n    75% { left: 100%; }\n    100% { left: 100%; }\n}\n@keyframes progress-bar-indeterminant1b {\n    0% { right: 100%; }\n    50% { right: 0; }\n    100% { right: 0; }\n}\n@keyframes progress-bar-indeterminant2a {\n    0% { left: 0; }\n    25% { left: 0; }\n    100% { left: 100%; }\n}\n@keyframes progress-bar-indeterminant2b {\n    0% { right: 100%; }\n    75% { right: 0; }\n    100% { right: 0; }\n}\n.progress-bar-indeterminant {\n    display: block;\n    width: 100%;\n    height: 0;\n    background-color: var(--progress-bar-indicator-color);\n    position: relative;\n    transition:\n        height var(--progress-bar-active-transition-duration) linear var(--progress-bar-active-transition-duration),\n        background-color var(--progress-bar-active-transition-duration) linear;\n}\n.progress-bar-indeterminant[data-active=true] {\n    height: var(--progress-bar-height);\n    background-color: var(--progress-bar-track-color);\n    transition:\n        height var(--progress-bar-active-transition-duration) linear var(--progress-bar-active-transition-start-delay),\n        background-color 0s linear;\n}\n.progress-bar-indeterminant[hidden]:not([data-active=true]) {\n    display: none;\n}\n.progress-bar-indeterminant::before,\n.progress-bar-indeterminant::after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 100%;\n    background-color: var(--progress-bar-indicator-color);\n    animation: none;\n}\n.progress-bar-indeterminant:not([hidden])::before {\n    animation:\n        progress-bar-indeterminant1a var(--progress-bar-animation-duration) infinite ease-in-out var(--progress-bar-active-transition-start-delay),\n        progress-bar-indeterminant1b var(--progress-bar-animation-duration) infinite ease-in-out var(--progress-bar-active-transition-start-delay);\n}\n.progress-bar-indeterminant:not([hidden])::after {\n    animation:\n        progress-bar-indeterminant2a var(--progress-bar-animation-duration) infinite ease-in-out calc(var(--progress-bar-active-transition-start-delay) + 0.375 * var(--progress-bar-animation-duration)),\n        progress-bar-indeterminant2b var(--progress-bar-animation-duration) infinite ease-in-out calc(var(--progress-bar-active-transition-start-delay) + 0.375 * var(--progress-bar-animation-duration));\n}\n.top-progress-bar-container {\n    position: sticky;\n    top: 0;\n    height: 0;\n    pointer-events: none;\n    z-index: 10;\n}\n\n\n/* Frame resizer */\n.frame-resizer-container {\n    position: fixed;\n    bottom: 0;\n    right: 0;\n    z-index: 100;\n    background: transparent;\n    pointer-events: none;\n    user-select: none;\n}\n.frame-resizer-sizer1 {\n    padding-top: 100%;\n    line-height: 0;\n}\n.frame-resizer-sizer2 {\n    display: inline-block;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    vertical-align: bottom;\n}\n.frame-resizer-sizer2.frame-resizer-sizer2-with-min-size {\n    min-width: 1em;\n}\n.frame-resizer-svg {\n    display: block;\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    width: 75%;\n    height: 75%;\n}\n.frame-resizer-handle {\n    fill: var(--text-color);\n    opacity: 0.125;\n    cursor: se-resize;\n    pointer-events: auto;\n    transition:\n        fill var(--animation-duration) linear,\n        opacity var(--animation-duration) linear;\n}\n.frame-resizer-handle:hover,\n:root[data-is-resizing=true] .frame-resizer-handle {\n    fill: var(--accent-color);\n    opacity: 1;\n}\n\n\n/* Footer notifications */\n.footer-notification {\n    display: flex;\n    flex-flow: row nowrap;\n    align-items: flex-start;\n    pointer-events: auto;\n    border-radius: 0.25em;\n    background-color: var(--notification-background-color);\n    box-shadow: 0 0.125em 0.25em 0 var(--notification-shadow-color);\n    color: var(--notification-text-color);\n    margin: 0.5em;\n    padding: 0;\n    transition: opacity var(--animation-duration) ease-out;\n    position: relative;\n    overflow: auto;\n    max-height: calc(0.5em * 2 + var(--line-height) * 4 * 1em);\n}\n.footer-notification[hidden] {\n    display: flex;\n    opacity: 0;\n    transition: opacity var(--animation-duration) ease-in;\n}\n.footer-notification-body {\n    flex: 1 1 auto;\n    padding: 0.5em 0.75em;\n    white-space: pre-line;\n}\n.footer-notification-close-button-container {\n    align-self: stretch;\n    display: flex;\n    flex-flow: column nowrap;\n    align-items: center;\n    justify-content: center;\n    padding: 0.25em 0.75em 0.25em 0;\n    position: sticky;\n    top: 0;\n    right: 0;\n}\nbutton.footer-notification-close-button {\n    --button-content-color: var(--notification-text-color);\n    --button-border-color: transparent;\n    --button-background-color: transparent;\n    --button-shadow: none;\n\n    --button-hover-border-color: transparent;\n    --button-hover-background-color: transparent;\n    --button-hover-shadow: none;\n\n    --button-active-border-color: transparent;\n    --button-active-background-color: transparent;\n    --button-active-shadow: none;\n\n    --button-focus-visible-border-color: transparent;\n    --button-focus-visible-background-color: var(--notification-background-color-light);\n    --button-focus-visible-shadow: none;\n\n    flex: 0 0 auto;\n    margin: -0.25em;\n    padding: 0.5em;\n    border-style: none;\n    border-width: 0;\n    cursor: pointer;\n    font-size: inherit;\n}\n.footer-notification-close-button-icon {\n    display: block;\n    width: calc(16em / var(--font-size-no-units));\n    height: calc(16em / var(--font-size-no-units));\n    background-color: var(--button-content-color);\n}\n.tag-details-disambiguation-list>.tag-details-disambiguation:not(:last-child)::after {\n    content: var(--disambiguation-separator);\n}\n.footer-notification a {\n    color: var(--notification-text-color);\n}\n\n\n/* Overlays */\n.overlay-panel-container {\n    pointer-events: none;\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    z-index: 6;\n}\n.overlay-panel {\n    pointer-events: auto;\n    background-color: var(--background-color);\n    display: block;\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: var(--content-width);\n    max-width: 100%;\n    box-sizing: border-box;\n    margin: 0 auto;\n    padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding);\n    overflow-y: scroll;\n    transform: none;\n    opacity: 1;\n    visibility: visible;\n    transition:\n        opacity var(--animation-duration2) ease-out,\n        visibility 0s linear,\n        transform var(--animation-duration2) ease-out;\n}\n.overlay-panel[hidden] {\n    transform: translate(var(--overlay-panel-translate-distance), 0);\n    opacity: 0;\n    visibility: hidden;\n    transition:\n        opacity var(--animation-duration2) ease-in,\n        visibility 0s linear var(--animation-duration2),\n        transform var(--animation-duration2) ease-in;\n}\n.overlay-panel[hidden]:not(.hidden-animating) {\n    display: none;\n}\n:root[data-popup-action-bar-location=left] .overlay-panel[hidden] {\n    transform: translate(calc(-1 * var(--overlay-panel-translate-distance)), 0);\n}\n:root[data-popup-action-bar-location=top] .overlay-panel[hidden] {\n    transform: translate(0, calc(-1 * var(--overlay-panel-translate-distance)));\n}\n:root[data-popup-action-bar-location=bottom] .overlay-panel[hidden] {\n    transform: translate(0, var(--overlay-panel-translate-distance));\n}\n.overlay-panel-inner {\n    padding: var(--entry-vertical-padding) var(--entry-horizontal-padding);\n}\n\n\n/* Profile panel */\n.profile-list {\n    display: flex;\n    flex-flow: column nowrap;\n    align-items: stretch;\n}\n.profile-list-item {\n    display: flex;\n    flex-flow: row nowrap;\n    align-items: center;\n    cursor: pointer;\n}\n.profile-list-item-selection {\n    flex: 0 0 auto;\n    text-align: center;\n    padding: 0.25em 0.5em 0.25em 0;\n}\n.profile-list-item-name {\n    flex: 1 1 auto;\n    padding: 0.25em 0;\n}\n\n\n/* Audio menu */\n.audio-button-popup-menu[data-show-icons=false] .popup-menu-item-audio-button .popup-menu-item-icon {\n    display: none;\n}\n.audio-button-popup-menu .popup-menu-item-icon[data-icon=checkmark] {\n    background-color: var(--success-color);\n}\n.audio-button-popup-menu .popup-menu-item-icon[data-icon=cross] {\n    background-color: var(--danger-color);\n}\n.audio-button-popup-menu .popup-menu-item-group[data-source-in-options=false][data-valid=null] .popup-menu-item {\n    color: var(--text-color-light1);\n}\n.popup-menu-item-audio-button .popup-menu-item-label {\n    padding-right: 2.5em;\n}\n.popup-menu-item-set-primary-audio-button {\n    flex-flow: row nowrap;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    width: 2.5em;\n}\n.popup-menu-item-set-primary-audio-button:not([hidden]) {\n    display: flex;\n}\n.popup-menu-item-set-primary-audio-button .popup-menu-item-icon {\n    opacity: 0;\n    transition: opacity var(--animation-duration) linear;\n}\n.popup-menu-item-audio-button:hover~.popup-menu-item-set-primary-audio-button .popup-menu-item-icon,\n.popup-menu-item-audio-button:active~.popup-menu-item-set-primary-audio-button .popup-menu-item-icon,\n.popup-menu-item-audio-button:focus~.popup-menu-item-set-primary-audio-button .popup-menu-item-icon {\n    opacity: 0.25;\n}\n.popup-menu-item-set-primary-audio-button:hover .popup-menu-item-icon,\n.popup-menu-item-set-primary-audio-button:active .popup-menu-item-icon,\n.popup-menu-item-set-primary-audio-button:focus .popup-menu-item-icon {\n    opacity: 0.375;\n}\n.popup-menu-item-set-primary-audio-button:focus:not(:focus-visible) .popup-menu-item-icon {\n    opacity: 0;\n}\n.popup-menu-item-audio-button:hover~.popup-menu-item-set-primary-audio-button:not(:focus-visible) .popup-menu-item-icon,\n.popup-menu-item-audio-button:active~.popup-menu-item-set-primary-audio-button:not(:focus-visible) .popup-menu-item-icon,\n.popup-menu-item-audio-button:focus~.popup-menu-item-set-primary-audio-button:not(:focus-visible) .popup-menu-item-icon {\n    opacity: 0.25;\n}\n.popup-menu-item-set-primary-audio-button:hover:not(:focus-visible) .popup-menu-item-icon,\n.popup-menu-item-set-primary-audio-button:active:not(:focus-visible) .popup-menu-item-icon {\n    opacity: 0.375;\n}\n.popup-menu-item-group[data-is-primary-card-audio=true]>.popup-menu-item-audio-button~.popup-menu-item-set-primary-audio-button .popup-menu-item-icon,\n.popup-menu-item-group[data-is-primary-card-audio=true]>.popup-menu-item-audio-button~.popup-menu-item-set-primary-audio-button:hover .popup-menu-item-icon,\n.popup-menu-item-group[data-is-primary-card-audio=true]>.popup-menu-item-audio-button~.popup-menu-item-set-primary-audio-button:active .popup-menu-item-icon,\n.popup-menu-item-group[data-is-primary-card-audio=true]>.popup-menu-item-audio-button~.popup-menu-item-set-primary-audio-button:focus .popup-menu-item-icon {\n    opacity: 1;\n}\n\n\n/* Anki errors */\n.anki-note-error-list {\n    margin: 0;\n    padding-left: 1.5em;\n    list-style: disc;\n}\n.anki-note-error-info {\n    color: var(--danger-color);\n}\n.anki-note-error-header {\n    font-weight: bold;\n}\n\n\n/* Conditional styles */\n:root:not([data-enable-search-tags=true]) .tag[data-category=search] {\n    display: none;\n}\n:root[data-compact-tags=true] .tag[data-redundant=true] {\n    display: none;\n}\n\n:root:not([data-debug=true]) .action-button[data-action=menu] {\n    display: none;\n}\n:root[data-anki-enabled=false] .action-button[data-action=view-note],\n:root[data-anki-enabled=false] .action-button[data-action=save-note] {\n    display: none;\n}\n\n:root[data-average-frequency=true] .frequency-group-item:not([data-details='Average']) {\n    display: none;\n}\n\n:root[data-average-frequency=false] .frequency-group-item[data-details='Average'] {\n    display: none;\n}\n\n:root[data-audio-enabled=false] .action-button[data-action=play-audio] {\n    display: none;\n}\n:root[data-glossary-layout-mode^=compact] .definition-tag-list,\n:root[data-glossary-layout-mode^=compact] .definition-disambiguation-list:not([data-count='0']) {\n    display: inline;\n}\n:root[data-glossary-layout-mode^=compact] .gloss-list {\n    display: inline;\n    list-style: none;\n    padding-left: 0;\n}\n:root[data-glossary-layout-mode^=compact] .gloss-item {\n    display: inline;\n}\n:root[data-glossary-layout-mode^=compact] .gloss-item:not(:first-child)::before {\n    white-space: pre-wrap;\n    content: var(--compact-list-separator);\n    display: inline;\n    color: var(--text-color-light3);\n}\n:root[data-glossary-layout-mode^=compact] .gloss-content {\n    display: inline;\n}\n:root[data-glossary-layout-mode^=compact] .gloss-separator {\n    display: inline;\n}\n\n:root[data-show-pronunciation-text=true] .pronunciation-disambiguation-list[data-term-count='0'],\n:root[data-show-pronunciation-text=true] .pronunciation-disambiguation[data-type=reading] {\n    display: none;\n}\n:root[data-show-pronunciation-text=false] .pronunciation[data-pronunciation-type=pitch-accent]>.pronunciation-representation-list>.pronunciation-text-container {\n    display: none;\n}\n:root[data-show-pronunciation-downstep-position=false] .pronunciation-downstep-notation-container {\n    display: none;\n}\n:root[data-show-pronunciation-graph=false] .pronunciation-graph-container {\n    display: none;\n}\n\n:root[data-glossary-layout-mode^=compact][data-show-pronunciation-graph=false] .pronunciation-list:not([data-has-tags=true]) {\n    display: inline;\n    list-style: none;\n    padding-left: 0;\n}\n:root[data-glossary-layout-mode^=compact][data-show-pronunciation-graph=false] .pronunciation-list:not([data-has-tags=true]) .pronunciation {\n    display: inline;\n}\n:root[data-glossary-layout-mode^=compact][data-show-pronunciation-graph=false] .pronunciation-list:not([data-has-tags=true]) .pronunciation:not(:first-child)::before {\n    white-space: pre-wrap;\n    content: var(--compact-list-separator);\n    display: inline;\n    color: var(--text-color-light3);\n}\n\n:root[data-popup-display-mode=full-width] .frame-resizer-container {\n    display: none;\n}\n";
+
+//#endregion
+//#region src/render/styles/structured-content-styles.d.ts
+//# sourceMappingURL=display-styles.d.ts.map
+/**
+ * The structured content CSS styles from the Yomitan extension.
+ * Sourced from Yomitan's ext/css/structured-content.css.
+ */
+declare const STRUCTURED_CONTENT_CSS = "/*\n * Copyright (C) 2023-2025  Yomitan Authors\n * Copyright (C) 2021-2022  Yomichan Authors\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the entrys of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program.  If not, see <https://www.gnu.org/licenses/>.\n */\n\n/* Glossary images */\n.gloss-image-container {\n    display: inline-block;\n    white-space: nowrap;\n    max-width: 100%;\n    max-height: 100vh;\n    position: relative;\n    vertical-align: top;\n    line-height: 0;\n    font-size: calc(1em / var(--font-size-no-units));\n    overflow: hidden;\n}\n.gloss-image-link[data-background=true]>.gloss-image-container {\n    background-color: var(--gloss-image-background-color);\n}\n.gloss-image-link {\n    cursor: inherit;\n    color: var(--accent-color);\n    display: inline-block;\n    position: relative;\n    line-height: 1;\n    max-width: 100%;\n}\n.gloss-image-link:hover {\n    color: var(--accent-color-dark);\n    cursor: pointer;\n}\n.gloss-image-container-overlay {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    font-size: calc(1em * var(--font-size-no-units));\n    line-height: var(--line-height);\n    display: table;\n    table-layout: fixed;\n    white-space: normal;\n    color: var(--text-color-light3);\n}\n.gloss-image-link[data-has-image=true][data-image-load-state=load-error] .gloss-image-container-overlay::after {\n    content: 'Image failed to load';\n    display: table-cell;\n    width: 100%;\n    height: 100%;\n    vertical-align: middle;\n    text-align: center;\n    padding: 0.25em;\n}\n.gloss-image-background {\n    --image: none;\n\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    background-color: var(--text-color);\n    -webkit-mask-repeat: no-repeat;\n    -webkit-mask-position: center center;\n    -webkit-mask-mode: alpha;\n    -webkit-mask-size: contain;\n    -webkit-mask-image: var(--image);\n    mask-repeat: no-repeat;\n    mask-position: center center;\n    mask-mode: alpha;\n    mask-size: contain;\n    mask-image: var(--image);\n    display: none;\n}\n.gloss-image {\n    display: inline-block;\n    vertical-align: top;\n    object-fit: contain;\n    border: none;\n    outline: none;\n}\n.gloss-image-link[data-has-aspect-ratio=true] .gloss-image {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n}\n.gloss-image-link[data-image-rendering=pixelated] .gloss-image,\n.gloss-image-link[data-image-rendering=pixelated] .gloss-image-background {\n    image-rendering: auto;\n    image-rendering: -moz-crisp-edges;\n    image-rendering: -webkit-optimize-contrast;\n    image-rendering: pixelated;\n    image-rendering: crisp-edges;\n}\n.gloss-image-link[data-image-rendering=crisp-edges] .gloss-image,\n.gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background {\n    image-rendering: auto;\n    image-rendering: -moz-crisp-edges;\n    image-rendering: -webkit-optimize-contrast;\n    image-rendering: crisp-edges;\n}\n:root[data-browser=firefox] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image,\n:root[data-browser=firefox] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background,\n:root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image,\n:root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background {\n    image-rendering: auto;\n}\n.gloss-image-link[data-has-aspect-ratio=true] .gloss-image-sizer {\n    display: inline-block;\n    width: 0;\n    vertical-align: top;\n    font-size: 0;\n}\n.gloss-image-link-text {\n    display: none;\n    line-height: var(--line-height);\n}\n.gloss-image-link-text::before {\n    content: '[';\n}\n.gloss-image-link-text::after {\n    content: ']';\n}\n.gloss-image-description {\n    display: block;\n    white-space: pre-line;\n}\n\n.gloss-image-link[data-appearance=monochrome] .gloss-image {\n    /* Workaround for coloring monochrome gloss images due to issues with masking using a canvas without loading extra media */\n    /* drop-shadow with 0.01px blur is at minimum required for Firefox to render the shadow when used on a canvas */\n    --shadow-settings: 0 0 0.01px var(--text-color);\n    filter: grayscale(1) opacity(0.5) drop-shadow(var(--shadow-settings)) drop-shadow(var(--shadow-settings)) saturate(1000%) brightness(1000%);\n}\n\n.gloss-image-link[data-size-units=em] .gloss-image-container {\n    font-size: 1em;\n}\n\n.gloss-image-link[data-vertical-align=baseline] { vertical-align: baseline; }\n.gloss-image-link[data-vertical-align=sub] { vertical-align: sub; }\n.gloss-image-link[data-vertical-align=super] { vertical-align: super; }\n.gloss-image-link[data-vertical-align=text-top] { vertical-align: top; }\n.gloss-image-link[data-vertical-align=text-bottom] { vertical-align: bottom; }\n.gloss-image-link[data-vertical-align=middle] { vertical-align: middle; }\n.gloss-image-link[data-vertical-align=top] { vertical-align: top; }\n.gloss-image-link[data-vertical-align=bottom] { vertical-align: bottom; }\n.gloss-image-link[data-collapsed=true],\n:root[data-glossary-layout-mode^=compact] .gloss-image-link[data-collapsible=true] {\n    vertical-align: baseline;\n}\n\n.gloss-image-link[data-collapsed=true] .gloss-image-container,\n:root[data-glossary-layout-mode^=compact] .gloss-image-link[data-collapsible=true] .gloss-image-container {\n    display: none;\n    position: absolute;\n    left: 0;\n    top: 100%;\n    z-index: 1;\n}\n.entry:nth-last-of-type(1):not(:nth-of-type(1)) .gloss-image-link[data-collapsed=true] .gloss-image-container,\n:root[data-glossary-layout-mode^=compact] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .gloss-image-link[data-collapsible=true] .gloss-image-container,\n:root[data-glossary-layout-mode^=compact] .definition-item:nth-last-of-type(1) .gloss-image-link[data-collapsible=true] .gloss-image-container {\n    bottom: 100%;\n    top: auto;\n}\n.gloss-image-link[data-collapsed=true]:hover .gloss-image-container,\n.gloss-image-link[data-collapsed=true]:focus .gloss-image-container,\n:root[data-glossary-layout-mode^=compact] .gloss-image-link[data-collapsible=true]:hover .gloss-image-container,\n:root[data-glossary-layout-mode^=compact] .gloss-image-link[data-collapsible=true]:focus .gloss-image-container {\n    display: block;\n}\n.gloss-image-link[data-collapsed=true] .gloss-image-link-text,\n:root[data-glossary-layout-mode^=compact] .gloss-image-link[data-collapsible=true] .gloss-image-link-text {\n    display: inline;\n}\n.gloss-image-link[data-collapsed=true]~.gloss-image-description,\n:root[data-glossary-layout-mode^=compact] .gloss-image-description {\n    display: inline;\n}\n\n\n/* Links */\n.gloss-link-text {\n    vertical-align: baseline;\n}\n.gloss-link-external-icon {\n    display: inline-block;\n    vertical-align: middle;\n    width: calc(16em / var(--font-size-no-units));\n    height: calc(16em / var(--font-size-no-units));\n    margin-left: 0.25em;\n    background-color: var(--link-color);\n    position: relative;\n}\n\n\n/* Structured content glossary styles */\n.gloss-sc-table-container {\n    display: block;\n}\n.gloss-sc-table {\n    table-layout: auto;\n    border-collapse: collapse;\n}\n.gloss-sc-thead,\n.gloss-sc-tfoot,\n.gloss-sc-th {\n    font-weight: bold;\n    background-color: var(--background-color-dark1);\n}\n.gloss-sc-th,\n.gloss-sc-td {\n    border-width: calc(1em / var(--font-size-no-units));\n    border-style: solid;\n    border-color: var(--text-color-light2);\n    padding: 0.25em;\n    vertical-align: top;\n}\n.gloss-sc-ol,\n.gloss-sc-ul {\n    padding-left: var(--list-padding2);\n}\n:root[data-glossary-layout-mode^=compact] .gloss-sc-ul[data-sc-content=glossary] {\n    display: inline;\n    list-style: none;\n    padding-left: 0;\n}\n:root[data-glossary-layout-mode^=compact] .gloss-sc-ul[data-sc-content=glossary] .gloss-sc-li {\n    display: inline;\n}\n:root[data-glossary-layout-mode^=compact] .gloss-sc-ul[data-sc-content=glossary] .gloss-sc-li:not(:first-child)::before {\n    white-space: pre-wrap;\n    content: var(--compact-list-separator);\n    display: inline;\n    color: var(--text-color-light3);\n}\n.gloss-sc-details {\n    padding-left: var(--list-padding1);\n}\n.gloss-sc-summary {\n    list-style-position: outside;\n}\n";
+
+//#endregion
+//#region src/render/styles/pronunciation-styles.d.ts
+//# sourceMappingURL=structured-content-styles.d.ts.map
+/**
+ * The pronunciation CSS styles from the Yomitan extension.
+ * Sourced from Yomitan's ext/css/display-pronunciation.css.
+ */
+declare const PRONUNCIATION_CSS = "/*\n * Copyright (C) 2023-2025  Yomitan Authors\n * Copyright (C) 2021-2022  Yomichan Authors\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the entrys of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program.  If not, see <https://www.gnu.org/licenses/>.\n */\n\n:root {\n    --pronunciation-annotation-color: #000000;\n}\n:root[data-theme=dark] {\n    --pronunciation-annotation-color: #ffffff;\n}\n\n.pronunciation-downstep-notation {\n    display: inline;\n}\n\n.pronunciation-text {\n    display: inline;\n}\n.pronunciation-mora {\n    display: inline-block;\n    position: relative;\n}\n.pronunciation-mora-line {\n    border-color: var(--pronunciation-annotation-color);\n}\n.pronunciation-mora[data-pitch=high]>.pronunciation-mora-line {\n    display: block;\n    user-select: none;\n    pointer-events: none;\n    position: absolute;\n    top: 0.1em;\n    left: 0;\n    right: 0;\n    height: 0;\n    border-top-width: 0.1em;\n    border-top-style: solid;\n}\n.pronunciation-mora[data-pitch=high][data-pitch-next=low]>.pronunciation-mora-line {\n    right: -0.1em;\n    height: 0.4em;\n    border-right-width: 0.1em;\n    border-right-style: solid;\n}\n.pronunciation-mora[data-pitch=high][data-pitch-next=low] {\n    padding-right: 0.1em;\n    margin-right: 0.1em;\n}\n.pronunciation-devoice-indicator {\n    display: block;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    width: 1.125em;\n    height: 1.125em;\n    border: calc(1.5em / var(--font-size-no-units)) dotted var(--danger-color);\n    border-radius: 50%;\n    box-sizing: border-box;\n    z-index: 1;\n    transform: translate(-50%, -50%);\n}\n.pronunciation-nasal-indicator {\n    display: block;\n    position: absolute;\n    right: -0.125em;\n    top: 0.125em;\n    width: 0.375em;\n    height: 0.375em;\n    border: calc(1.5em / var(--font-size-no-units)) solid var(--danger-color);\n    border-radius: 50%;\n    box-sizing: border-box;\n    z-index: 1;\n}\n.pronunciation-nasal-diacritic {\n    position: absolute;\n    width: 0;\n    height: 0;\n    opacity: 0;\n}\n.pronunciation-character {\n    display: inline;\n}\n.pronunciation-character-group {\n    display: inline-block;\n    position: relative;\n}\n\n.pronunciation-graph {\n    display: inline-block;\n    vertical-align: middle;\n    height: 1.5em;\n}\n.pronunciation-graph-line,\n.pronunciation-graph-line-tail {\n    fill: none;\n    stroke: var(--pronunciation-annotation-color);\n    stroke-width: 5;\n}\n.pronunciation-graph-line-tail {\n    stroke-dasharray: 5 5;\n}\n.pronunciation-graph-dot {\n    fill: var(--pronunciation-annotation-color);\n    stroke: var(--pronunciation-annotation-color);\n    stroke-width: 5;\n}\n.pronunciation-graph-dot-downstep1 {\n    fill: none;\n    stroke: var(--pronunciation-annotation-color);\n    stroke-width: 5;\n}\n.pronunciation-graph-dot-downstep2 {\n    fill: var(--pronunciation-annotation-color);\n}\n.pronunciation-graph-triangle {\n    fill: none;\n    stroke: var(--pronunciation-annotation-color);\n    stroke-width: 5;\n}\n";
+
+//#endregion
+//# sourceMappingURL=pronunciation-styles.d.ts.map
+
+export { ContentManager, DISPLAY_CSS, DISPLAY_TEMPLATES, DiacriticType, DisplayGenerator, HtmlTemplateCollection, NoOpContentManager, PRONUNCIATION_CSS, PitchCategory, PronunciationGenerator, STRUCTURED_CONTENT_CSS, StructuredContentGenerator, addScopeToCss, addScopeToCssLegacy, getDownstepPositions, getKanaDiacriticInfo, getKanaMoraCount, getKanaMorae, getPitchCategory, isCodePointKanji, isMoraPitchHigh, sanitizeCSS };
+//# sourceMappingURL=render.d.ts.map