/* legacy themes are still used by TTS player until we update the player themes */
:host {
    --color-slate: #364040;
    --color-slate-dark: #2f3838;
    --color-slate-bright: #e4e8e8;
    --color-red: #ed2024;
    --color-red-dark: #c52024;
    --color-red-bright: #fbc9b4;
    --color-yellow: #ffc20d;
    --color-yellow-dark: #e5aa1a;
    --color-yellow-bright: #ffecc5;
    --color-green: #8cc63f;
    --color-green-dark: #83b441;
    --color-green-bright: #e0edcb;
    --color-turquoise: #00a776;
    --color-turquoise-dark: #009669;
    --color-turquoise-bright: #bee3d5;
    --color-lightblue: #00adee;
    --color-lightblue-dark: #0093c3;
    --color-lightblue-bright: #b9e5fb;
    --color-blue: #0069cf;
    --color-blue-dark: #035eb1;
    --color-blue-bright: #d7dcef;
    --color-purple: #ad2fab;
    --color-purple-dark: #972b90;
    --color-purple-bright: #d9c0dd;
    --color-magenta: #f60f7a;
    --color-magenta-dark: #d5176a;
    --color-magenta-bright: #facad2;
    --color-text: #364040;
    --color-background: #fcfcfc
}

[data-doc-it-theme="slate"] {
    --theme-text: var(--color-text);
    --theme-background: var(--color-background);
    --theme-accent: var(--color-slate);
    --theme-bright: var(--color-slate-bright);
    --theme-dark: var(--color-slate-dark)
}

[data-doc-it-theme="red"] {
    --theme-text: var(--color-text);
    --theme-background: var(--color-background);
    --theme-accent: var(--color-red);
    --theme-bright: var(--color-red-bright);
    --theme-dark: var(--color-red-dark)
}

[data-doc-it-theme="yellow"] {
    --theme-text: var(--color-text);
    --theme-background: var(--color-background);
    --theme-accent: var(--color-yellow);
    --theme-bright: var(--color-yellow-bright);
    --theme-dark: var(--color-yellow-dark)
}

[data-doc-it-theme="green"] {
    --theme-text: var(--color-text);
    --theme-background: var(--color-background);
    --theme-accent: var(--color-green);
    --theme-bright: var(--color-green-bright);
    --theme-dark: var(--color-green-dark)
}

[data-doc-it-theme="turquoise"] {
    --theme-text: var(--color-text);
    --theme-background: var(--color-background);
    --theme-accent: var(--color-turquoise);
    --theme-bright: var(--color-turquoise-bright);
    --theme-dark: var(--color-turquoise-dark)
}

[data-doc-it-theme="lightblue"] {
    --theme-text: var(--color-text);
    --theme-background: var(--color-background);
    --theme-accent: var(--color-lightblue);
    --theme-bright: var(--color-lightblue-bright);
    --theme-dark: var(--color-lightblue-dark)
}

[data-doc-it-theme="blue"] {
    --theme-text: var(--color-text);
    --theme-background: var(--color-background);
    --theme-accent: var(--color-blue);
    --theme-bright: var(--color-blue-bright);
    --theme-dark: var(--color-blue-dark)
}

[data-doc-it-theme="purple"] {
    --theme-text: var(--color-text);
    --theme-background: var(--color-background);
    --theme-accent: var(--color-purple);
    --theme-bright: var(--color-purple-bright);
    --theme-dark: var(--color-purple-dark)
}

[data-doc-it-theme="magenta"] {
    --theme-text: var(--color-text);
    --theme-background: var(--color-background);
    --theme-accent: var(--color-magenta);
    --theme-bright: var(--color-magenta-bright);
    --theme-dark: var(--color-magenta-dark)
}
/**
 * Maps every web theme (see assets/css/web/themes.css + assets/css/colors.css)
 * onto the doc-it viewer's --theme-* variables, mirroring viewer.css.
 *
 * --theme-dark  -> links, h1/h2          (needs strong contrast -> 800)
 * --theme-accent-> hr, borders, markers  (600)
 * --theme-bright-> mark, table th, dl/summary backgrounds (200)
 */
[data-doc-it-theme] {
    --theme-text: var(--color-text);
    --theme-background: var(--color-background);
}
[data-doc-it-theme="crimson"] { --theme-accent: var(--color-crimson-600); --theme-bright: var(--color-crimson-200); --theme-dark: var(--color-crimson-700); }
[data-doc-it-theme="red"]     { --theme-accent: var(--color-red-600);     --theme-bright: var(--color-red-200);     --theme-dark: var(--color-red-700); }
[data-doc-it-theme="tomato"]  { --theme-accent: var(--color-tomato-600);  --theme-bright: var(--color-tomato-200);  --theme-dark: var(--color-tomato-700); }
[data-doc-it-theme="orange"]  { --theme-accent: var(--color-orange-600);  --theme-bright: var(--color-orange-200);  --theme-dark: var(--color-orange-700); }
[data-doc-it-theme="amber"]   { --theme-accent: var(--color-amber-600);   --theme-bright: var(--color-amber-200);   --theme-dark: var(--color-amber-700); }
[data-doc-it-theme="gold"]    { --theme-accent: var(--color-gold-600);    --theme-bright: var(--color-gold-200);    --theme-dark: var(--color-gold-700); }
[data-doc-it-theme="yellow"]  { --theme-accent: var(--color-yellow-600);  --theme-bright: var(--color-yellow-200);  --theme-dark: var(--color-yellow-700); }
[data-doc-it-theme="spring"]  { --theme-accent: var(--color-spring-600);  --theme-bright: var(--color-spring-200);  --theme-dark: var(--color-spring-700); }
[data-doc-it-theme="lime"]    { --theme-accent: var(--color-lime-600);    --theme-bright: var(--color-lime-200);    --theme-dark: var(--color-lime-700); }
[data-doc-it-theme="green"]   { --theme-accent: var(--color-green-600);   --theme-bright: var(--color-green-200);   --theme-dark: var(--color-green-700); }
[data-doc-it-theme="emerald"] { --theme-accent: var(--color-emerald-600); --theme-bright: var(--color-emerald-200); --theme-dark: var(--color-emerald-700); }
[data-doc-it-theme="teal"]    { --theme-accent: var(--color-teal-600);    --theme-bright: var(--color-teal-200);    --theme-dark: var(--color-teal-700); }
[data-doc-it-theme="cyan"]    { --theme-accent: var(--color-cyan-600);    --theme-bright: var(--color-cyan-200);    --theme-dark: var(--color-cyan-700); }
[data-doc-it-theme="sky"]     { --theme-accent: var(--color-sky-600);     --theme-bright: var(--color-sky-200);     --theme-dark: var(--color-sky-700); }
[data-doc-it-theme="azure"]   { --theme-accent: var(--color-azure-600);   --theme-bright: var(--color-azure-200);   --theme-dark: var(--color-azure-700); }
[data-doc-it-theme="blue"]    { --theme-accent: var(--color-blue-600);    --theme-bright: var(--color-blue-200);    --theme-dark: var(--color-blue-700); }
[data-doc-it-theme="indigo"]  { --theme-accent: var(--color-indigo-600);  --theme-bright: var(--color-indigo-200);  --theme-dark: var(--color-indigo-700); }
[data-doc-it-theme="violet"]  { --theme-accent: var(--color-violet-600);  --theme-bright: var(--color-violet-200);  --theme-dark: var(--color-violet-700); }
[data-doc-it-theme="fuchsia"] { --theme-accent: var(--color-fuchsia-600); --theme-bright: var(--color-fuchsia-200); --theme-dark: var(--color-fuchsia-700); }
[data-doc-it-theme="pink"]    { --theme-accent: var(--color-pink-600);    --theme-bright: var(--color-pink-200);    --theme-dark: var(--color-pink-700); }
[data-doc-it-theme="slate"]   { --theme-accent: var(--color-slate-600);   --theme-bright: var(--color-slate-200);   --theme-dark: var(--color-slate-700); }
/**
 * This base is a copy of viewer.css from the doc-it project, except with more css variable wrappers and some adjustments
 * for a finer control of theming. If the original changes we need to reflect those.
 * Source at @lensmedia/doc-it-tts-player/public/viewer.css
 * Both this and the source also includes the definition popup styling.
 */
*, :after, :before {
    box-sizing: border-box
}
.column > :first-child, .media-content > :first-child, .media-media > :first-child, .summary > :first-child, blockquote > :first-child, dd > :first-child, dd > section > :first-child, dl > :first-child, li > :first-child {
    margin-top: 0
}
.column > :last-child, .media-content > :last-child, .media-media > :last-child, .summary > :last-child, blockquote > :last-child, dd > :last-child, dd > section > :last-child, dl > :last-child, li > :last-child {
    margin-bottom: 0
}
img {
    max-width: 100%
}
hr {
    background-color: var(--theme-hr, var(--theme-accent, #000));
    border: 0;
    height: 1px;
    margin-bottom: 4rem;
    margin-top: 4rem;
    width: 33%
}
a {
    color: var(--theme-anchor, var(--theme-dark));
}
a:hover {
    color: var(--theme-anchor-hover, var(--theme-accent));
}
blockquote {
    border-left: .5rem solid var(--theme-blockquote-border, var(--theme-accent, rgba(0, 0, 0, .1)));
    font-style: italic;
    margin: 1rem 0;
    padding: 0 .5rem
}
mark {
    color: var(--theme-mark-text, inherit);
    background-color: var(--theme-mark, var(--theme-bright, #ff0));
    border-radius: .5rem;
    padding: 0 .25rem .25rem
}
h1, h2, h3, h4, h5, h6 {
    line-height: 1em;
    margin: 1rem 0
}
h1, h2 {
    color: var(--theme-headers, var(--theme-dark));
}
h1:first-child {
    margin-top: 0
}
pre > code {
    background-color: rgba(0, 0, 0, .01);
    border-color: rgba(0, 0, 0, .03);
    color: inherit;
    display: block;
    padding: .5rem
}
code {
    background-color: var(--theme-code-background, rgba(0, 0, 0, .02));
    border: thin solid var(--theme-code-border, var(--color-red-bright));
    border-radius: .5rem;
    color: var(--theme-code-text, var(--color-red));
    font-family: Roboto Mono, monospace;
    font-size: .7em;
    line-height: 1em;
    padding: .25rem .5rem
}
ol, ul {
    padding-left: 1.5rem
}
li > p {
    margin: 0
}
li > p + p {
    margin-top: 1rem
}
ul > li > ul {
    list-style-type: "–  "
}
ul > li > ul > ul > li {
    list-style-type: space-counter
}
.table {
    display: block;
    margin-bottom: 1rem;
    margin-top: 1rem;
    max-width: 100%;
    overflow-x: auto
}
.table table {
    border-collapse: collapse;
    margin: 0;
    min-width: 100%
}
.table td, .table th {
    padding: .5rem;
    text-align: left;
    vertical-align: top;
}
.table th {
    background-color: var(--theme-th-background, var(--theme-bright));
    border-left: thin solid var(--theme-th-border, var(--theme-background));
    border-top: thin solid var(--theme-th-border, var(--theme-background));
}
.table tbody td {
    border-left: thin solid var(--theme-td-border, var(--theme-bright));
    border-top: thin solid var(--theme-td-border, var(--theme-bright));
}
.table td:first-child, .table th:first-child {
    border-left: 0
}
.summary, dl {
    background-color: var(--theme-summary-background, var(--theme-bright, rgba(0, 0, 0, .02)));
    color: var(--theme-summary-text, inherit);
    font-style: italic;
    margin-bottom: 1rem;
    margin-top: 1rem;
    padding: .5rem
}
dd, dt {
    margin: 0
}
dl {
    border-left: var(--theme-dl-border, .25rem solid var(--theme-accent, rgba(0, 0, 0, .1)));
    font-style: normal
}
dt {
    font-weight: 700
}
dd + dt {
    margin-top: 1rem
}
details {
    --theme-accent: var(--color-slate-600);
    --theme-bright: var(--color-slate-200);
    --theme-dark: var(--color-slate-700);

    background-color: var(--theme-details-summary-background, var(--theme-bright));
    color: var(--theme-details-summary-text, inherit);

    border-left: var(--theme-details-border, 4px solid var(--theme-accent));
    display: flex;
    flex-direction: column;
    font: inherit;
    margin-bottom: .5rem;
    margin-top: .5rem;
    padding-left: .5rem;
    padding-right: .5rem;
}
details > summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: .25rem;
    justify-content: space-between;
    list-style: none;
    margin-left: -.5rem;
    padding: .25rem 0 .25rem .5rem
}
details > summary:after {
    background-color: var(--theme-details-summary-after-background, var(--theme-background));
    color: var(--theme-details-summary-after-text, var(--theme-accent));
    content: "+";
    display: inline-block;
    font-weight: 900;
    line-height: .75;
    padding: .25em;
    vertical-align: middle;
}
details[open] > summary {
    padding-top: .25rem 0;
}
details[open] > summary:after {
    content: "−";
}
details > section > :first-child { margin-top: 0; }
details > section > :last-child { margin-bottom: 0; }
details > section {
    margin-top: .5rem;
    margin-bottom: .5rem;
}
figure {
    line-height: 0;
    margin: 1rem auto;
    text-align: center
}
figure.video > .video-wrapper {
    padding-bottom: var(--video-ratio, 56.25%);
    position: relative
}
figure.video > .video-wrapper > iframe, figure.video > .video-wrapper > video {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}
figcaption {
    font-size: .8em;
    font-style: italic;
    line-height: 1.10568;
    margin-top: .25rem;
    text-align: left
}
figcaption > :first-child {
    margin-top: 0
}
figcaption > :last-child {
    margin-bottom: 0
}
.columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: -.5rem -1rem;
    padding: 0 .5rem
}
.columns + .columns {
    margin-top: .5rem
}
.column {
    flex: 0 0;
    margin: 0 !important;
    padding: .5rem
}
.column + .column {
    margin-top: 1rem
}
@media only screen {
    .column {
        flex-basis: calc(100% / var(--columns-default, 1))
    }
}
@media only screen and (min-width: 300px) {
    .column {
        flex-basis: calc(100% / var(--columns-tiny, var(--columns-default, 1)))
    }
}
@media only screen and (min-width: 450px) {
    .column {
        flex-basis: calc(100% / var(--columns-small, var(--columns-tiny, var(--columns-default, 1))))
    }
}
@media only screen and (min-width: 600px) {
    .column {
        flex-basis: calc(100% / var(--columns-portrait, var(--columns-small, var(--columns-tiny, var(--columns-default, 1)))))
    }
}
dl + .columns {
    margin-top: .5rem
}
.columns + dl {
    margin-top: 1rem
}
.media {
    display: flex;
    margin: 1rem -.5rem
}
.media-content, .media-media {
    margin: 0 .5rem
}
.media-media {
    max-width: 64px;
    min-width: 64px
}
.media[data-media-size=small] > .media-media {
    max-width: 32px;
    min-width: 32px
}
.media[data-media-size=medium] > .media-media {
    max-width: 96px;
    min-width: 96px
}
.media[data-media-size=large] > .media-media {
    max-width: 128px;
    min-width: 128px
}
.media-content {
    width: 100%
}
.media-right > .media-media {
    order: 1
}
.tippy-box[data-animation=fade][data-state=hidden] {
    opacity: 0
}
[data-tippy-root] {
    max-width: calc(100vw - 2rem)
}
.tippy-box {
    background-color: #333;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    outline: 0;
    position: relative;
    transition-property: transform, visibility, opacity;
    white-space: normal
}
.tippy-box[data-placement^=top] > .tippy-arrow {
    bottom: 0
}
.tippy-box[data-placement^=top] > .tippy-arrow:before {
    border-top-color: initial;
    border-width: 8px 8px 0;
    bottom: -7px;
    left: 0;
    transform-origin: center top
}
.tippy-box[data-placement^=bottom] > .tippy-arrow {
    top: 0
}
.tippy-box[data-placement^=bottom] > .tippy-arrow:before {
    border-bottom-color: initial;
    border-width: 0 8px 8px;
    left: 0;
    top: -7px;
    transform-origin: center bottom
}
.tippy-box[data-placement^=left] > .tippy-arrow {
    right: 0
}
.tippy-box[data-placement^=left] > .tippy-arrow:before {
    border-left-color: initial;
    border-width: 8px 0 8px 8px;
    right: -7px;
    transform-origin: center left
}
.tippy-box[data-placement^=right] > .tippy-arrow {
    left: 0
}
.tippy-box[data-placement^=right] > .tippy-arrow:before {
    border-right-color: initial;
    border-width: 8px 8px 8px 0;
    left: -7px;
    transform-origin: center right
}
.tippy-box[data-inertia][data-state=visible] {
    transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11)
}
.tippy-arrow {
    color: #333;
    height: 16px;
    width: 16px
}
.tippy-arrow:before {
    border-color: transparent;
    border-style: solid;
    content: "";
    position: absolute
}
.tippy-content {
    padding: 5px 9px;
    position: relative;
    z-index: 1
}
.tippy-box[data-theme~=doc-it] {
    background-color: var(--tippy-box-background, var(--theme-bright));
    border: thin solid var(--tippy-box-border, var(--theme-accent));
    border-radius: 0;
    color: var(--tippy-box-text, inherit);
    font-size: inherit;
    line-height: inherit
}
.tippy-box[data-theme~=doc-it][data-placement^=top] .tippy-arrow:before {
    border-top-color: var(--tippy-box-arrow, var(--theme-accent));
    border-width: 7px 7px 0
}
.tippy-box[data-theme~=doc-it][data-placement^=bottom] .tippy-arrow:before {
    border-bottom-color: var(--tippy-box-arrow, var(--theme-accent));
    border-width: 0 7px 7px
}
.tippy-box[data-theme~=doc-it][data-placement^=left] .tippy-arrow:before {
    border-left-color: var(--tippy-box-arrow, var(--theme-accent));
    border-width: 7px 0 7px 7px
}
.tippy-box[data-theme~=doc-it][data-placement^=right] .tippy-arrow:before {
    border-right-color: var(--tippy-box-arrow, var(--theme-accent));
    border-width: 7px 7px 7px 0
}
abbr[data-title] {
    cursor: help;
    text-decoration: var(--theme-abbr-decoration,
        var(--theme-abbr-decoration-color, var(--theme-accent, inherit))
        var(--theme-abbr-decoration-line, underline)
        var(--theme-abbr-decoration-thickness, from-font)
        var(--theme-abbr-decoration-style, wavy)
    );

    text-underline-offset: var(--theme-abbr-decoration-offset, .125em);
}

:host{--color-slate-previous: gray;--color-slate-next: darkgray;--color-red-previous: var(--color-magenta);--color-red-next: var(--color-yellow);--color-yellow-previous: var(--color-red);--color-yellow-next: var(--color-green);--color-green-previous: var(--color-yellow);--color-green-next: var(--color-turquoise);--color-turquoise-previous: var(--color-green);--color-turquoise-next: var(--color-lightblue);--color-lightblue-previous: var(--color-turquoise);--color-lightblue-next: var(--color-blue);--color-blue-previous: var(--color-lightblue);--color-blue-next: var(--color-purple);--color-purple-previous: var(--color-blue);--color-purple-next: var(--color-magenta);--color-magenta-previous: var(--color-purple);--color-magenta-next: var(--color-red)}

:host([data-doc-it-theme=slate]), [data-doc-it-theme=slate]{--theme-previous: var(--color-slate-previous);--theme-next: var(--color-slate-next)}

:host([data-doc-it-theme=red]), [data-doc-it-theme=red]{--theme-previous: var(--color-red-previous);--theme-next: var(--color-red-next)}

:host([data-doc-it-theme=yellow]), [data-doc-it-theme=yellow]{--theme-previous: var(--color-yellow-previous);--theme-next: var(--color-yellow-next)}

:host([data-doc-it-theme=green]), [data-doc-it-theme=green]{--theme-previous: var(--color-green-previous);--theme-next: var(--color-green-next)}

:host([data-doc-it-theme=turquoise]), [data-doc-it-theme=turquoise]{--theme-previous: var(--color-turquoise-previous);--theme-next: var(--color-turquoise-next)}

:host([data-doc-it-theme=lightblue]), [data-doc-it-theme=lightblue]{--theme-previous: var(--color-lightblue-previous);--theme-next: var(--color-lightblue-next)}

:host([data-doc-it-theme=blue]), [data-doc-it-theme=blue]{--theme-previous: var(--color-blue-previous);--theme-next: var(--color-blue-next)}

:host([data-doc-it-theme=purple]), [data-doc-it-theme=purple]{--theme-previous: var(--color-purple-previous);--theme-next: var(--color-purple-next)}

:host([data-doc-it-theme=magenta]), [data-doc-it-theme=magenta]{--theme-previous: var(--color-magenta-previous);--theme-next: var(--color-magenta-next)}

[data-tts].tts-playable{user-select:none}

[data-tts].tts-playable:hover,[data-tts].tts-playable:active,[data-tts].tts-playable:focus{text-decoration:underline;cursor:pointer}

[data-tts].tts-active{color:var(--theme-text);background-color:rgba(0,0,0,.1)}

:host([data-doc-it-theme=slate]), [data-doc-it-theme=slate] .tts-active{background-color:rgba(54,64,64,.15)}

.tts-player{position:fixed;z-index:1;bottom:1em;right:1em;font-family:Kufam,Mulish}

.tts-player.tts-maximized{bottom:0;right:0;width:100%}

.tts-player.tts-maximized::before,.tts-player.tts-maximized::after{border-radius:0}

.tts-player.tts-loading,.tts-player.tts-loading button,.tts-player.tts-loading .tts-progress{cursor:wait !important}

.tts-player,.tts-player *{box-sizing:border-box;line-height:1;user-select:none}

.tts-player{color:var(--theme-background)}

.tts-player::after,.tts-player::before{position:absolute;top:0;left:0;bottom:0;right:0;content:"";z-index:-1;border-radius:999px;background-color:var(--theme-accent);background-image:radial-gradient(circle at -50% -50%, var(--theme-next), transparent 75%),radial-gradient(circle at center center, var(--theme-accent), transparent 100%),radial-gradient(circle at 150% 100%, var(--theme-previous), transparent 75%)}

.tts-player::before{opacity:.5;filter:blur(12px)}

.tts-player svg{width:2em;height:2em}

@media(min-width: 40em){.tts-player svg{width:1.5em;height:1.5em}}

.tts-player button{padding:0;border:0;background-color:rgba(0,0,0,0);color:inherit;vertical-align:middle;line-height:0;cursor:pointer}

.tts-player button:focus{outline:0}

.tts-player button:disabled{cursor:not-allowed}

.tts-player [hidden]{display:none !important}

.tts-container{display:flex;align-items:center;max-width:40em;padding:0 1em;width:100%;margin:0 auto}

.tts-minimize,.tts-controls,.tts-timing{display:none}

.tts-player.tts-maximized .tts-minimize,.tts-player.tts-maximized .tts-controls,.tts-player.tts-maximized .tts-timing{display:block}

.tts-player.tts-maximized .tts-maximize{display:none}

.tts-player .tts-minimize{background-color:rgba(255,255,255,.25);border-radius:999px;margin-left:auto}

.tts-timing{background-color:rgba(255,255,255,.7);color:var(--theme-text)}

.tts-play:disabled,.tts-pause:disabled{display:none}

.tts-maximize svg,.tts-play svg,.tts-pause svg{width:4em;height:4em}

@media(min-width: 40em){.tts-maximize svg,.tts-play svg,.tts-pause svg{width:3em;height:3em}}

.tts-maximize svg,.tts-maximize span{display:inline-block}

.tts-maximize svg{vertical-align:middle}

.tts-maximize svg+span{padding-right:1em}

.tts-maximize span+svg{padding-left:1em}

.tts-previous:disabled,.tts-next:disabled{opacity:.5}

.tts-time,.tts-duration{padding:1em;font-size:.6em;margin-bottom:-3px}

.tts-time{padding-left:0}

.tts-duration{padding-right:0}

.tts-progress,.tts-volume{background-color:rgba(255,255,255,.25);border-radius:999px}

.tts-progress{position:relative;flex-grow:1;padding:6px;cursor:e-resize}

.tts-progress-bar{position:absolute;left:0;top:50%;height:12px;min-width:12px;opacity:.8;border-radius:999px;background-color:var(--theme-accent);background-image:radial-gradient(circle at -50% -50%, var(--theme-next), transparent 75%),radial-gradient(circle at center center, var(--theme-accent), transparent 100%),radial-gradient(circle at 150% 100%, var(--theme-previous), transparent 75%);transform:translateY(-50%)}

.tts-volume .tts-progress-bar{background-color:var(--theme-background);background-image:none}

.tts-volume{display:flex;align-items:center;flex-grow:1;padding:0 .25em;margin:.25em 1em;background-color:rgba(255,255,255,.25)}

.tts-volume-percentage{font-size:.6em;margin:0 .5em}

.tts-volume-icon{opacity:.5}

.tts-progress.tts-loading::after,.tts-progress.tts-loading::before,.tts-maximize.tts-loading::after,.tts-maximize.tts-loading::before{content:"";position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;border-radius:999px}

.tts-progress.tts-loading::after,.tts-maximize.tts-loading::after{animation-delay:0s;background-color:var(--theme-previous);background-image:linear-gradient(to right, var(--theme-next), var(--theme-previous))}

.tts-progress.tts-loading::before,.tts-maximize.tts-loading::before{animation-delay:-1s;background-color:var(--theme-next);background-image:linear-gradient(to right, var(--theme-previous), var(--theme-next))}

.tts-maximize.tts-loading::after,.tts-maximize.tts-loading::before{animation:tts-maximize-loading ease-in-out infinite 2s}

.tts-progress.tts-loading::before,.tts-progress.tts-loading::after{animation:tts-progress-loading ease-in-out infinite 1s;animation-delay:.5s}

.tts-progress.tts-loading::after{animation-delay:0s}

@keyframes tts-maximize-loading{0%{opacity:0;transform:scale(0)}25%{opacity:1}100%{transform:scale(1.5);opacity:0}}

@keyframes tts-progress-loading{0%{opacity:0;transform:scaleY(0)}25%{opacity:.4}100%{transform:scaleY(2);opacity:0}}

@media print {
    :host::before {
        content: 'ERR_PRINTING_DISABLED_DUE_TO_COPYRIGHT_ISSUES';
    }

    * {
        display: none;
    }
}

article.document-dyslexia * {
    font-family: 'Open-Dyslexic', sans-serif !important;
    line-height: 1.5852;
}

article.document-limit-width {
    max-width: 35em;
}