@ndla/ui 55.0.12-alpha.0 → 55.0.14-alpha.0

package/lib/styles.css

@@ -0,0 +1,1197 @@
+@layer utilities {
+  @layer compositions {
+    .textStyle_body\.large {
+      font-family: var(--fonts-sans);
+      font-weight: var(--font-weights-normal);
+      font-size: var(--font-sizes-medium);
+      line-height: var(--line-heights-medium);
+}
+
+    .textStyle_body\.large:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+      font-size: calc(var(--font-sizes-medium) * 1.11);
+      line-height: calc(var(--line-heights-medium) * 1.11);
+}
+
+    .textStyle_label\.medium {
+      font-family: var(--fonts-sans);
+      font-weight: var(--font-weights-normal);
+      font-size: var(--font-sizes-small);
+      line-height: var(--line-heights-small);
+}
+
+    .textStyle_label\.medium:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+      font-size: calc(var(--font-sizes-small) * 1.11);
+      line-height: calc(var(--line-heights-small) * 1.11);
+}
+
+    .textStyle_label\.large {
+      font-family: var(--fonts-sans);
+      font-weight: var(--font-weights-normal);
+      font-size: var(--font-sizes-medium);
+      line-height: var(--line-heights-medium);
+}
+
+    .textStyle_label\.large:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+      font-size: calc(var(--font-sizes-medium) * 1.11);
+      line-height: calc(var(--line-heights-medium) * 1.11);
+}
+
+    .textStyle_body\.medium {
+      font-family: var(--fonts-sans);
+      font-weight: var(--font-weights-normal);
+      font-size: var(--font-sizes-small);
+      line-height: var(--line-heights-small);
+}
+
+    .textStyle_body\.medium:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+      font-size: calc(var(--font-sizes-small) * 1.11);
+      line-height: calc(var(--line-heights-small) * 1.11);
+}
+
+    .\[\&_a\]\:textStyle_label\.xsmall a {
+      font-family: var(--fonts-sans);
+      font-weight: var(--font-weights-normal);
+      font-size: var(--font-sizes-xxsmall);
+      line-height: var(--line-heights-xxsmall);
+}
+
+    .\[\&_a\]\:textStyle_label\.xsmall a:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+      font-size: calc(var(--font-sizes-xxsmall) * 1.11);
+      line-height: calc(var(--line-heights-xxsmall) * 1.11);
+}
+}
+
+  .bd_1px_solid {
+    border: 1px solid;
+}
+
+  .bdr_xsmall {
+    border-radius: var(--radii-xsmall);
+}
+
+  .bx-sh_full {
+    box-shadow: var(--shadows-full);
+}
+
+  .ov_hidden {
+    overflow: hidden;
+}
+
+  .d_flex {
+    display: flex;
+}
+
+  .flex_1_0_auto {
+    flex: 1 0 auto;
+}
+
+  .w_surface\.4xsmall {
+    width: var(--sizes-surface-4xsmall);
+}
+
+  .h_surface\.4xsmall {
+    height: var(--sizes-surface-4xsmall);
+}
+
+  .gap_xsmall {
+    gap: var(--spacing-xsmall);
+}
+
+  .p_xsmall {
+    padding: var(--spacing-xsmall);
+}
+
+  .w_100\% {
+    width: 100%;
+}
+
+  .bd-bs_1px_solid {
+    border-block-start: 1px solid;
+}
+
+  .py_medium {
+    padding-block: var(--spacing-medium);
+}
+
+  .px_xsmall {
+    padding-inline: var(--spacing-xsmall);
+}
+
+  .max-w_surface\.xlarge {
+    max-width: var(--sizes-surface-xlarge);
+}
+
+  .bdr-b_xsmall {
+    border-bottom-left-radius: var(--radii-xsmall);
+    border-bottom-right-radius: var(--radii-xsmall);
+}
+
+  .bg_background\.default {
+    background: var(--colors-background-default);
+}
+
+  .py_xsmall {
+    padding-block: var(--spacing-xsmall);
+}
+
+  .px_medium {
+    padding-inline: var(--spacing-medium);
+}
+
+  .grid-area_play {
+    grid-area: play;
+}
+
+  .grid-area_forwards {
+    grid-area: forwards;
+}
+
+  .grid-area_backwards {
+    grid-area: backwards;
+}
+
+  .flex_1 {
+    flex: 1 1 0%;
+}
+
+  .grid-area_track {
+    grid-area: track;
+}
+
+  .grid-area_volume {
+    grid-area: volume;
+}
+
+  .py_auto {
+    padding-block: auto;
+}
+
+  .px_auto {
+    padding-inline: auto;
+}
+
+  .max-w_xxlarge {
+    max-width: var(--sizes-xxlarge);
+}
+
+  .max-h_xxlarge {
+    max-height: var(--sizes-xxlarge);
+}
+
+  .min-w_xxlarge {
+    min-width: var(--sizes-xxlarge);
+}
+
+  .min-h_xxlarge {
+    min-height: var(--sizes-xxlarge);
+}
+
+  .grid-area_speed {
+    grid-area: speed;
+}
+
+  .h_surface\.3xsmall {
+    height: var(--sizes-surface-3xsmall);
+}
+
+  .sr_true {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+
+  .c_text\.default {
+    color: var(--colors-text-default);
+}
+
+  .gap_medium {
+    gap: var(--spacing-medium);
+}
+
+  .h_100\% {
+    height: 100%;
+}
+
+  .py_xlarge {
+    padding-block: var(--spacing-xlarge);
+}
+
+  .px_xxlarge {
+    padding-inline: var(--spacing-xxlarge);
+}
+
+  .tt_uppercase {
+    text-transform: uppercase;
+}
+
+  .obj-f_cover {
+    object-fit: cover;
+}
+
+  .bd_0 {
+    border: 0;
+}
+
+  .d_inline-block {
+    display: inline-block;
+}
+
+  .w_fit-content {
+    width: fit-content;
+}
+
+  .pos_relative {
+    position: relative;
+}
+
+  .max-w_8xl {
+    max-width: 8xl;
+}
+
+  .max-w_surface\.xsmall {
+    max-width: var(--sizes-surface-xsmall);
+}
+
+  .gap_xxsmall {
+    gap: var(--spacing-xxsmall);
+}
+
+  .td_underline {
+    text-decoration: underline;
+}
+
+  .h_215px {
+    height: 215px;
+}
+
+  .c_inherit {
+    color: inherit;
+}
+
+  .bd-l_4px_solid {
+    border-left: 4px solid;
+}
+
+  .bx-s_border-box {
+    box-sizing: border-box;
+}
+
+  .d_block {
+    display: block;
+}
+
+  .white-space_pre {
+    white-space: pre;
+}
+
+  .d_inline {
+    display: inline;
+}
+
+  .ms_xsmall {
+    margin-inline-start: var(--spacing-xsmall);
+}
+
+  .h_auto {
+    height: auto;
+}
+
+  .w_surface\.xlarge {
+    width: var(--sizes-surface-xlarge);
+}
+
+  .c_text\.error {
+    color: var(--colors-text-error);
+}
+
+  .h_surface\.xsmall {
+    height: var(--sizes-surface-xsmall);
+}
+
+  .bd-b_0 {
+    border-bottom: 0;
+}
+
+  .cursor_pointer {
+    cursor: pointer;
+}
+
+  .pos_absolute {
+    position: absolute;
+}
+
+  .z_base {
+    z-index: var(--z-index-base);
+}
+
+  .bg_background\.default\/20 {
+    --mix-background: color-mix(in srgb, var(--colors-background-default) 20%, transparent);
+    background: var(--mix-background, var(--colors-background-default));
+}
+
+  .p_0 {
+    padding: 0;
+}
+
+  .w_medium {
+    width: var(--sizes-medium);
+}
+
+  .h_medium {
+    height: var(--sizes-medium);
+}
+
+  .bd_2px_solid {
+    border: 2px solid;
+}
+
+  .c_background\.default {
+    color: var(--colors-background-default);
+}
+
+  .bdr_large {
+    border-radius: var(--radii-large);
+}
+
+  .ov_visible {
+    overflow: visible;
+}
+
+  .bd-b_1px_solid {
+    border-bottom: 1px solid;
+}
+
+  .py_4xsmall {
+    padding-block: var(--spacing-4xsmall);
+}
+
+  .px_4xsmall {
+    padding-inline: var(--spacing-4xsmall);
+}
+
+  .ta_center {
+    text-align: center;
+}
+
+  .my_xxlarge {
+    margin-block: var(--spacing-xxlarge);
+}
+
+  .p_medium {
+    padding: var(--spacing-medium);
+}
+
+  .max-h_surface\.xxsmall {
+    max-height: var(--sizes-surface-xxsmall);
+}
+
+  .gap_small {
+    gap: var(--spacing-small);
+}
+
+  .px_0 {
+    padding-inline: 0;
+}
+
+  .mbs_3xsmall {
+    margin-block-start: var(--spacing-3xsmall);
+}
+
+  .py_small {
+    padding-block: var(--spacing-small);
+}
+
+  .bd-t_1px_solid {
+    border-top: 1px solid;
+}
+
+  .bg_surface\.default {
+    background: var(--colors-surface-default);
+}
+
+  .c_icon\.strong {
+    color: var(--colors-icon-strong);
+}
+
+  .li-s_none {
+    list-style: none;
+}
+
+  .d_grid {
+    display: grid;
+}
+
+  .mbs_xsmall {
+    margin-block-start: var(--spacing-xsmall);
+}
+
+  .asp_1\/1 {
+    aspect-ratio: 1/1;
+}
+
+  .bd-c_stroke\.default {
+    border-color: var(--colors-stroke-default);
+}
+
+  .ai_center {
+    align-items: center;
+}
+
+  .ai_flex-start {
+    align-items: flex-start;
+}
+
+  .flex-d_column {
+    flex-direction: column;
+}
+
+  .as_flex-start {
+    align-self: flex-start;
+}
+
+  .jc_center {
+    justify-content: center;
+}
+
+  .bg-c_background\.default {
+    background-color: var(--colors-background-default);
+}
+
+  .bd-c_stroke\.subtle {
+    border-color: var(--colors-stroke-subtle);
+}
+
+  .trs-dur_fast {
+    --transition-duration: var(--durations-fast);
+    transition-duration: var(--durations-fast);
+}
+
+  .trs-prop_background-color\,_border-color\,_max-width {
+    --transition-prop: background-color, border-color, max-width;
+    transition-property: background-color, border-color, max-width;
+}
+
+  .trs-tmf_default {
+    --transition-easing: var(--easings-default);
+    transition-timing-function: var(--easings-default);
+}
+
+  .as_center {
+    align-self: center;
+}
+
+  .bd-l-c_stroke\.default {
+    border-left-color: var(--colors-stroke-default);
+}
+
+  .ov-x_auto {
+    overflow-x: auto;
+}
+
+  .ff_code {
+    font-family: var(--fonts-code);
+}
+
+  .fw_bold {
+    font-weight: var(--font-weights-bold);
+}
+
+  .bg-c_surface\.disabled {
+    background-color: var(--colors-surface-disabled);
+}
+
+  .bd-c_surface\.brand\.1\.strong {
+    border-color: var(--colors-surface-brand-1-strong);
+}
+
+  .bdr-bl_0 {
+    border-bottom-left-radius: 0;
+}
+
+  .bdr-br_0 {
+    border-bottom-right-radius: 0;
+}
+
+  .bottom_0 {
+    bottom: 0;
+}
+
+  .right_0 {
+    right: 0;
+}
+
+  .trs-prop_transform\,_background-color\,_color {
+    --transition-prop: transform, background-color, color;
+    transition-property: transform, background-color, color;
+}
+
+  .trs-dur_normal {
+    --transition-duration: var(--durations-normal);
+    transition-duration: var(--durations-normal);
+}
+
+  .trs-tmf_ease-out {
+    --transition-easing: ease-out;
+    transition-timing-function: ease-out;
+}
+
+  .top_xsmall {
+    top: var(--spacing-xsmall);
+}
+
+  .right_xsmall {
+    right: var(--spacing-xsmall);
+}
+
+  .bd-c_background\.default {
+    border-color: var(--colors-background-default);
+}
+
+  .bg-c_surface\.action {
+    background-color: var(--colors-surface-action);
+}
+
+  .border-style_dashed {
+    border-style: dashed;
+}
+
+  .bd-c_stroke\.hover {
+    border-color: var(--colors-stroke-hover);
+}
+
+  .mb_medium {
+    margin-bottom: var(--spacing-medium);
+}
+
+  .mt_3xsmall {
+    margin-top: var(--spacing-3xsmall);
+}
+
+  .ml_3xsmall {
+    margin-left: var(--spacing-3xsmall);
+}
+
+  .trs-prop_max-height {
+    --transition-prop: max-height;
+    transition-property: max-height;
+}
+
+  .trs-dur_slow {
+    --transition-duration: var(--durations-slow);
+    transition-duration: var(--durations-slow);
+}
+
+  .trs-tmf_ease-in-out {
+    --transition-easing: ease-in-out;
+    transition-timing-function: ease-in-out;
+}
+
+  .bottom_-medium {
+    bottom: calc(var(--spacing-medium) * -1);
+}
+
+  .jc_space-between {
+    justify-content: space-between;
+}
+
+  .font-style_italic {
+    font-style: italic;
+}
+
+  .grid-tc_repeat\(2\,_1fr\) {
+    grid-template-columns: repeat(2, 1fr);
+}
+
+  .\[\&\[data-align\=\"center\"\]\]\:ta_center[data-align="center"] {
+    text-align: center;
+}
+
+  .\[\&\:has\(span\[dir\=\"rtl\"\]\)\]\:direction_rtl:has(span[dir="rtl"]) {
+    direction: rtl;
+}
+
+  .\[\&_img\]\:w_100\% img {
+    width: 100%;
+}
+
+  .\[\&_img\]\:h_100\% img {
+    height: 100%;
+}
+
+  .\[\&_img\]\:obj-f_cover img {
+    object-fit: cover;
+}
+
+  .\[\&_span_\>_\*\]\:white-space_pre-wrap span > * {
+    white-space: pre-wrap;
+}
+
+  .\[\&_span\]\:flex_1 span {
+    flex: 1 1 0%;
+}
+
+  .\[\&_\.linenumber\]\:d_inline-block .linenumber {
+    display: inline-block;
+}
+
+  .\[\&_\.linenumber\]\:py_0 .linenumber {
+    padding-block: 0;
+}
+
+  .\[\&_\.linenumber\]\:px_small .linenumber {
+    padding-inline: var(--spacing-small);
+}
+
+  .\[\&_\.linenumber\]\:bd-r_1px_solid .linenumber {
+    border-right: 1px solid;
+}
+
+  .\[\&_\.linenumber\]\:w_xxlarge .linenumber {
+    width: var(--sizes-xxlarge);
+}
+
+  .\[\&_\.linenumber\]\:ta_right .linenumber {
+    text-align: right;
+}
+
+  .\[\&_\.linenumber\]\:me_xsmall .linenumber {
+    margin-inline-end: var(--spacing-xsmall);
+}
+
+  .\[\&_\.linenumber\[data-first\]\]\:pbs_xsmall .linenumber[data-first] {
+    padding-block-start: var(--spacing-xsmall);
+}
+
+  .\[\&_\.linenumber\[data-last\]\]\:pbe_xsmall .linenumber[data-last] {
+    padding-block-end: var(--spacing-xsmall);
+}
+
+  .\[\&_\.token\.comment\,_\.token\.block-comment\,_\.token\.prolog\,_\.token\.doctype\,_\.token\.cdata\]\:c_\#7d8b99 .token.comment,.\[\&_\.token\.comment\,_\.token\.block-comment\,_\.token\.prolog\,_\.token\.doctype\,_\.token\.cdata\]\:c_\#7d8b99 .token.block-comment,.\[\&_\.token\.comment\,_\.token\.block-comment\,_\.token\.prolog\,_\.token\.doctype\,_\.token\.cdata\]\:c_\#7d8b99 .token.prolog,.\[\&_\.token\.comment\,_\.token\.block-comment\,_\.token\.prolog\,_\.token\.doctype\,_\.token\.cdata\]\:c_\#7d8b99 .token.doctype,.\[\&_\.token\.comment\,_\.token\.block-comment\,_\.token\.prolog\,_\.token\.doctype\,_\.token\.cdata\]\:c_\#7d8b99 .token.cdata {
+    color: #7d8b99;
+}
+
+  .\[\&_\.token\.punctuation\]\:c_\#5f6364 .token.punctuation {
+    color: #5f6364;
+}
+
+  .\[\&_\.token\.property\,_\.token\.tag\,_\.token\.boolean\,_\.token\.number\,_\.token\.function-name\,_\.token\.constant\,_\.token\.symbol\,_\.token\.deleted\]\:c_\#c92c2c .token.property,.\[\&_\.token\.property\,_\.token\.tag\,_\.token\.boolean\,_\.token\.number\,_\.token\.function-name\,_\.token\.constant\,_\.token\.symbol\,_\.token\.deleted\]\:c_\#c92c2c .token.tag,.\[\&_\.token\.property\,_\.token\.tag\,_\.token\.boolean\,_\.token\.number\,_\.token\.function-name\,_\.token\.constant\,_\.token\.symbol\,_\.token\.deleted\]\:c_\#c92c2c .token.boolean,.\[\&_\.token\.property\,_\.token\.tag\,_\.token\.boolean\,_\.token\.number\,_\.token\.function-name\,_\.token\.constant\,_\.token\.symbol\,_\.token\.deleted\]\:c_\#c92c2c .token.number,.\[\&_\.token\.property\,_\.token\.tag\,_\.token\.boolean\,_\.token\.number\,_\.token\.function-name\,_\.token\.constant\,_\.token\.symbol\,_\.token\.deleted\]\:c_\#c92c2c .token.function-name,.\[\&_\.token\.property\,_\.token\.tag\,_\.token\.boolean\,_\.token\.number\,_\.token\.function-name\,_\.token\.constant\,_\.token\.symbol\,_\.token\.deleted\]\:c_\#c92c2c .token.constant,.\[\&_\.token\.property\,_\.token\.tag\,_\.token\.boolean\,_\.token\.number\,_\.token\.function-name\,_\.token\.constant\,_\.token\.symbol\,_\.token\.deleted\]\:c_\#c92c2c .token.symbol,.\[\&_\.token\.property\,_\.token\.tag\,_\.token\.boolean\,_\.token\.number\,_\.token\.function-name\,_\.token\.constant\,_\.token\.symbol\,_\.token\.deleted\]\:c_\#c92c2c .token.deleted {
+    color: #c92c2c;
+}
+
+  .\[\&_\.token\.selector\,_\.token\.attr-name\,_\.token\.string\,_\.token\.char\,_\.token\.function\,_\.token\.builtin\,_\.token\.inserted\]\:c_\#2f9c0a .token.selector,.\[\&_\.token\.selector\,_\.token\.attr-name\,_\.token\.string\,_\.token\.char\,_\.token\.function\,_\.token\.builtin\,_\.token\.inserted\]\:c_\#2f9c0a .token.attr-name,.\[\&_\.token\.selector\,_\.token\.attr-name\,_\.token\.string\,_\.token\.char\,_\.token\.function\,_\.token\.builtin\,_\.token\.inserted\]\:c_\#2f9c0a .token.string,.\[\&_\.token\.selector\,_\.token\.attr-name\,_\.token\.string\,_\.token\.char\,_\.token\.function\,_\.token\.builtin\,_\.token\.inserted\]\:c_\#2f9c0a .token.char,.\[\&_\.token\.selector\,_\.token\.attr-name\,_\.token\.string\,_\.token\.char\,_\.token\.function\,_\.token\.builtin\,_\.token\.inserted\]\:c_\#2f9c0a .token.function,.\[\&_\.token\.selector\,_\.token\.attr-name\,_\.token\.string\,_\.token\.char\,_\.token\.function\,_\.token\.builtin\,_\.token\.inserted\]\:c_\#2f9c0a .token.builtin,.\[\&_\.token\.selector\,_\.token\.attr-name\,_\.token\.string\,_\.token\.char\,_\.token\.function\,_\.token\.builtin\,_\.token\.inserted\]\:c_\#2f9c0a .token.inserted {
+    color: #2f9c0a;
+}
+
+  .\[\&_\.token\.operator\,_\.token\.entity\,_\.token\.url\,_\.token\.variable\]\:c_\#a67f59 .token.operator,.\[\&_\.token\.operator\,_\.token\.entity\,_\.token\.url\,_\.token\.variable\]\:c_\#a67f59 .token.entity,.\[\&_\.token\.operator\,_\.token\.entity\,_\.token\.url\,_\.token\.variable\]\:c_\#a67f59 .token.url,.\[\&_\.token\.operator\,_\.token\.entity\,_\.token\.url\,_\.token\.variable\]\:c_\#a67f59 .token.variable {
+    color: #a67f59;
+}
+
+  .\[\&_\.token\.operator\,_\.token\.entity\,_\.token\.url\,_\.token\.variable\]\:bg_rgba\(255\,_255\,_255\,_0\.5\) .token.operator,.\[\&_\.token\.operator\,_\.token\.entity\,_\.token\.url\,_\.token\.variable\]\:bg_rgba\(255\,_255\,_255\,_0\.5\) .token.entity,.\[\&_\.token\.operator\,_\.token\.entity\,_\.token\.url\,_\.token\.variable\]\:bg_rgba\(255\,_255\,_255\,_0\.5\) .token.url,.\[\&_\.token\.operator\,_\.token\.entity\,_\.token\.url\,_\.token\.variable\]\:bg_rgba\(255\,_255\,_255\,_0\.5\) .token.variable {
+    background: rgba(255, 255, 255, 0.5);
+}
+
+  .\[\&_\.token\.atrule\,_\.token\.attr-value\,_\.token\.keyword\,_\.token\.class-name\]\:c_\#1990b8 .token.atrule,.\[\&_\.token\.atrule\,_\.token\.attr-value\,_\.token\.keyword\,_\.token\.class-name\]\:c_\#1990b8 .token.attr-value,.\[\&_\.token\.atrule\,_\.token\.attr-value\,_\.token\.keyword\,_\.token\.class-name\]\:c_\#1990b8 .token.keyword,.\[\&_\.token\.atrule\,_\.token\.attr-value\,_\.token\.keyword\,_\.token\.class-name\]\:c_\#1990b8 .token.class-name {
+    color: #1990b8;
+}
+
+  .\[\&_\.token\.regex\,_\.token\.important\]\:c_\#e90 .token.regex,.\[\&_\.token\.regex\,_\.token\.important\]\:c_\#e90 .token.important {
+    color: #e90;
+}
+
+  .\[\&_\.language-css_\.token\.string\,_\.style_\.token\.string\]\:c_\#a67f59 .language-css .token.string,.\[\&_\.language-css_\.token\.string\,_\.style_\.token\.string\]\:c_\#a67f59 .style .token.string {
+    color: #a67f59;
+}
+
+  .\[\&_\.language-css_\.token\.string\,_\.style_\.token\.string\]\:bg_rgba\(255\,_255\,_255\,_0\.5\) .language-css .token.string,.\[\&_\.language-css_\.token\.string\,_\.style_\.token\.string\]\:bg_rgba\(255\,_255\,_255\,_0\.5\) .style .token.string {
+    background: rgba(255, 255, 255, 0.5);
+}
+
+  .\[\&_\.token\.entity\]\:cursor_help .token.entity {
+    cursor: help;
+}
+
+  .\[\&_\.token\.namespace\]\:op_0\.7 .token.namespace {
+    opacity: 0.7;
+}
+
+  .\[\&_p\]\:d_inline p {
+    display: inline;
+}
+
+  .\[\&_\>_\*\:not\(\:where\(\:first-child\)\)\]\:mbs_xsmall > *:not(:where(:first-child)) {
+    margin-block-start: var(--spacing-xsmall);
+}
+
+  .\[\&_li\]\:d_block li {
+    display: block;
+}
+
+  .\[\&_svg\]\:fill_text\.subtle svg {
+    fill: var(--colors-text-subtle);
+}
+
+  .\[\&_svg\]\:h_90\% svg {
+    height: 90%;
+}
+
+  .\[\&_svg\]\:w_90\% svg {
+    width: 90%;
+}
+
+  .\[\&\[data-embed-type\=\'audio\'\]\]\:h_surface\.3xsmall[data-embed-type='audio'] {
+    height: var(--sizes-surface-3xsmall);
+}
+
+  .\[\&_\>_\*\:not\(\:first-child\)\]\:mbs_3xsmall > *:not(:first-child) {
+    margin-block-start: var(--spacing-3xsmall);
+}
+
+  .\[\&_iframe\]\:h_auto iframe {
+    height: auto;
+}
+
+  .\[\&_iframe\]\:w_100\% iframe {
+    width: 100%;
+}
+
+  .\[\&_a\]\:ms_1 a {
+    margin-inline-start: var(--spacing-1);
+}
+
+  .\[\&_svg\]\:fill_primary svg {
+    fill: var(--colors-primary);
+}
+
+  .\[\&_a\]\:c_text\.strong a {
+    color: var(--colors-text-strong);
+}
+
+  .open\:max-h_500vh:is([open], [data-open], [data-state="open"]) {
+    max-height: 500vh;
+}
+
+  .\[\&_\:first-child\]\:mbs_0 :first-child {
+    margin-block-start: 0;
+}
+
+  .after\:ta_center::after {
+    text-align: center;
+}
+
+  .after\:pos_absolute::after {
+    position: absolute;
+}
+
+  .after\:inset_0::after {
+    inset: 0;
+}
+
+  .after\:grad-from_surface\.default\/00::after {
+    --mix---gradient-from: color-mix(in srgb, var(--colors-surface-default) 00%, transparent);
+    --gradient-from: var(--mix---gradient-from, var(--colors-surface-default));
+}
+
+  .after\:grad-to_surface\.default::after {
+    --gradient-to: var(--colors-surface-default);
+}
+
+  .after\:bg-grad_to-b::after {
+    --gradient-stops: var(--gradient-via-stops, var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position));
+    --gradient: var(--gradient-via-stops, var(--gradient-stops));
+    background-image: linear-gradient(to bottom, var(--gradient));
+}
+
+  .after\:op_1::after {
+    opacity: 1;
+}
+
+  .after\:z_base::after {
+    z-index: var(--z-index-base);
+}
+
+  .open\:pbe_xsmall:is([open], [data-open], [data-state="open"]) {
+    padding-block-end: var(--spacing-xsmall);
+}
+
+  .first\:bg_surface\.brand\.1\.subtle:first-child {
+    background: var(--colors-surface-brand-1-subtle);
+}
+
+  .\[\&_h3\]\:td_underline h3 {
+    text-decoration: underline;
+}
+
+  .before\:pos_absolute::before {
+    position: absolute;
+}
+
+  .before\:inset_0::before {
+    inset: 0;
+}
+
+  .before\:z_0::before {
+    z-index: 0;
+}
+
+  .\[\&_\.linenumber\]\:bd-c_stroke\.subtle .linenumber {
+    border-color: var(--colors-stroke-subtle);
+}
+
+  .\[\&_\.token\.important\]\:fw_normal .token.important {
+    font-weight: var(--font-weights-normal);
+}
+
+  .\[\&_\.token\.bold\]\:fw_bold .token.bold {
+    font-weight: var(--font-weights-bold);
+}
+
+  .\[\&_\.token\.italic\]\:font-style_italic .token.italic {
+    font-style: italic;
+}
+
+  .\[\&_svg\]\:trs-prop_transform svg {
+    --transition-prop: transform;
+    transition-property: transform;
+}
+
+  .\[\&_svg\]\:trs-dur_normal svg {
+    --transition-duration: var(--durations-normal);
+    transition-duration: var(--durations-normal);
+}
+
+  .\[\&_svg\]\:trs-tmf_ease-out svg {
+    --transition-easing: ease-out;
+    transition-timing-function: ease-out;
+}
+
+  .\[\&_h1\]\:mt_0 h1 {
+    margin-top: 0;
+}
+
+  .after\:content_\"\"::after {
+    content: "";
+}
+
+  .after\:trs-prop_opacity::after {
+    --transition-prop: opacity;
+    transition-property: opacity;
+}
+
+  .after\:trs-dur_slow::after {
+    --transition-duration: var(--durations-slow);
+    transition-duration: var(--durations-slow);
+}
+
+  .after\:trs-tmf_ease-out::after {
+    --transition-easing: ease-out;
+    transition-timing-function: ease-out;
+}
+
+  .\[\&_svg\]\:trs-tmf_ease-in-out svg {
+    --transition-easing: ease-in-out;
+    transition-timing-function: ease-in-out;
+}
+
+  .\[\&_svg\]\:trs-dur_fast svg {
+    --transition-duration: var(--durations-fast);
+    transition-duration: var(--durations-fast);
+}
+
+  .first\:bd-c_stroke\.default:first-child {
+    border-color: var(--colors-stroke-default);
+}
+
+  .\[\&_\[data-forward\]\]\:trs-prop_width\,_height [data-forward] {
+    --transition-prop: width, height;
+    transition-property: width, height;
+}
+
+  .\[\&_\[data-forward\]\]\:trs-tmf_ease-in-out [data-forward] {
+    --transition-easing: ease-in-out;
+    transition-timing-function: ease-in-out;
+}
+
+  .\[\&_\[data-forward\]\]\:trs-dur_fast [data-forward] {
+    --transition-duration: var(--durations-fast);
+    transition-duration: var(--durations-fast);
+}
+
+  .before\:content_\"\"::before {
+    content: "";
+}
+
+  .focusVisible\:ring_none:is(:focus-visible, [data-focus-visible]) {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+}
+
+  .focusVisible\:bdr_0:is(:focus-visible, [data-focus-visible]) {
+    border-radius: 0;
+}
+
+  .\[\&\:hover\,_\&\:focus-visible\]\:bd-c_stroke\.hover:hover,.\[\&\:hover\,_\&\:focus-visible\]\:bd-c_stroke\.hover:focus-visible {
+    border-color: var(--colors-stroke-hover);
+}
+
+  .\[\&\:hover\,_\&\:focus-visible\]\:bg-c_surface\.actionSubtle\.hover:hover,.\[\&\:hover\,_\&\:focus-visible\]\:bg-c_surface\.actionSubtle\.hover:focus-visible {
+    background-color: var(--colors-surface-action-subtle-hover);
+}
+
+  .hover\:td_none:is(:hover, [data-hover]) {
+    text-decoration: none;
+}
+
+  .hover\:bg_surface\.actionSubtle\.hover:is(:hover, [data-hover]) {
+    background: var(--colors-surface-action-subtle-hover);
+}
+
+  .hover\:bd-c_text\.link:is(:hover, [data-hover]) {
+    border-color: var(--colors-text-link);
+}
+
+  .active\:bg_surface\.actionSubtle\.active:is(:active, [data-active]) {
+    background: var(--colors-surface-action-subtle-active);
+}
+
+  .active\:bd-c_text\.link:is(:active, [data-active]) {
+    border-color: var(--colors-text-link);
+}
+
+  .\[\&_button\[data-expanded\=\'true\'\]\]\:\[\&_svg\]\:trf_rotate\(-45deg\) button[data-expanded='true'] svg {
+    transform: rotate(-45deg);
+}
+
+  .open\:after\:op_0:is([open], [data-open], [data-state="open"])::after {
+    opacity: 0;
+}
+
+  .open\:after\:z_hide:is([open], [data-open], [data-state="open"])::after {
+    z-index: var(--z-index-hide);
+}
+
+  .open\:\[\&_svg\]\:trf_rotate\(180deg\):is([open], [data-open], [data-state="open"]) svg {
+    transform: rotate(180deg);
+}
+
+  .first\:\[\&_p\]\:fw_bold:first-child p {
+    font-weight: var(--font-weights-bold);
+}
+
+  .\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h1,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h2,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h3,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h4,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h5,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h6,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h1,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h2,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h3,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h4,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h5,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h6 {
+    text-decoration: underline;
+}
+
+  .focusVisible\:after\:pos_absolute:is(:focus-visible, [data-focus-visible])::after {
+    position: absolute;
+}
+
+  .focusVisible\:after\:inset_0:is(:focus-visible, [data-focus-visible])::after {
+    inset: 0;
+}
+
+  .focusVisible\:after\:ring_3px:is(:focus-visible, [data-focus-visible])::after {
+    outline: 3px;
+}
+
+  .focusVisible\:after\:bdr_xsmall:is(:focus-visible, [data-focus-visible])::after {
+    border-radius: var(--radii-xsmall);
+}
+
+  .focusVisible\:after\:ring-o_3px:is(:focus-visible, [data-focus-visible])::after {
+    outline-offset: 3px;
+}
+
+  .focusVisible\:after\:content_\"\":is(:focus-visible, [data-focus-visible])::after {
+    content: "";
+}
+
+  .focusVisible\:after\:ring-c_stroke\.default:is(:focus-visible, [data-focus-visible])::after {
+    outline-color: var(--colors-stroke-default);
+}
+
+  .focusVisible\:after\:outline-style_solid:is(:focus-visible, [data-focus-visible])::after {
+    outline-style: solid;
+}
+
+  .hover\:\[\&_\[data-byline-button\]\]\:bg_background\.default:is(:hover, [data-hover]) [data-byline-button] {
+    background: var(--colors-background-default);
+}
+
+  .hover\:\[\&_button\[data-expanded\]\]\:trf_scale\(1\.2\):is(:hover, [data-hover]) button[data-expanded] {
+    transform: scale(1.2);
+}
+
+  .hover\:\[\&_h3\]\:td_none:is(:hover, [data-hover]) h3 {
+    text-decoration: none;
+}
+
+  .hover\:\[\&_\[data-forward\]\]\:w_large:is(:hover, [data-hover]) [data-forward] {
+    width: var(--sizes-large);
+}
+
+  .hover\:\[\&_\[data-forward\]\]\:h_large:is(:hover, [data-hover]) [data-forward] {
+    height: var(--sizes-large);
+}
+
+  @media screen and (min-width: 29.75rem) {
+    .mobileWide\:max-w_surface\.medium {
+      max-width: var(--sizes-surface-medium);
+}
+}
+
+  @media screen and (min-width: 37.5625rem) {
+    .tablet\:px_medium {
+      padding-inline: var(--spacing-medium);
+}
+    .tablet\:mt_xxlarge {
+      margin-top: var(--spacing-xxlarge);
+}
+    .tablet\:mb_xxlarge {
+      margin-bottom: var(--spacing-xxlarge);
+}
+    .\[\&\[data-has-image\=\'true\'\]\]\:tablet\:py_xsmall[data-has-image='true'] {
+      padding-block: var(--spacing-xsmall);
+}
+    .\[\&\[data-has-image\=\'true\'\]\]\:tablet\:px_medium[data-has-image='true'] {
+      padding-inline: var(--spacing-medium);
+}
+}
+
+  @media screen and (min-width: 48rem) {
+    .tabletWide\:w_100\% {
+      width: 100%;
+}
+    .tabletWide\:max-w_350px {
+      max-width: 350px;
+}
+    .tabletWide\:max-w_532px {
+      max-width: 532px;
+}
+    .tabletWide\:max-w_1100px {
+      max-width: 1100px;
+}
+    .tabletWide\:flex-d_row {
+      flex-direction: row;
+}
+    .tabletWide\:jc_space-between {
+      justify-content: space-between;
+}
+}
+
+  @media screen and (min-width: 61.3125rem) {
+    .desktop\:w_260px {
+      width: 260px;
+}
+    .desktop\:h_260px {
+      height: 260px;
+}
+    .desktop\:h_340px {
+      height: 340px;
+}
+}
+
+  @media screen and (max-width: 47.9975rem) {
+    .tabletWideDown\:d_block {
+      display: block;
+}
+    .tabletWideDown\:max-h_surface\.small {
+      max-height: var(--sizes-surface-small);
+}
+    .tabletWideDown\:max-w_100\% {
+      max-width: 100%;
+}
+    .tabletWideDown\:w_100\% {
+      width: 100%;
+}
+    .tabletWideDown\:h_auto {
+      height: auto;
+}
+    .tabletWideDown\:d_grid {
+      display: grid;
+}
+    .tabletWideDown\:py_xsmall {
+      padding-block: var(--spacing-xsmall);
+}
+    .tabletWideDown\:px_xsmall {
+      padding-inline: var(--spacing-xsmall);
+}
+    .tabletWideDown\:p_xsmall {
+      padding: var(--spacing-xsmall);
+}
+    .tabletWideDown\:grid-tc_1fr_repeat\(5\,_auto\)_1fr {
+      grid-template-columns: 1fr repeat(5, auto) 1fr;
+}
+    .tabletWideDown\:grid-template-areas_\"track_track_track_track_track_track_track\"_\"\._speed_backwards_play_forwards_volume_\.\" {
+      grid-template-areas: "track track track track track track track" ". speed backwards play forwards volume .";
+}
+}
+
+  @media screen and (max-width: 37.56rem) {
+    .tabletDown\:gap_0 {
+      gap: 0;
+}
+    .tabletDown\:p_0 {
+      padding: 0;
+}
+    .tabletDown\:p_xsmall {
+      padding: var(--spacing-xsmall);
+}
+    .tabletDown\:w_100\% {
+      width: 100%;
+}
+    .tabletDown\:bdr_0 {
+      border-radius: 0;
+}
+    .tabletDown\:grid-tc_1fr {
+      grid-template-columns: 1fr;
+}
+    .tabletDown\:flex-d_column {
+      flex-direction: column;
+}
+}
+
+  @media screen and (max-width: 29.7475rem) {
+    .mobileWideDown\:cg_3xsmall {
+      column-gap: var(--spacing-3xsmall);
+}
+}
+
+  @media screen and (max-width: 19.9975rem) {
+    .mobileDown\:px_xsmall {
+      padding-inline: var(--spacing-xsmall);
+}
+}
+
+  @media print {
+    .print\:ov_visible {
+      overflow: visible;
+}
+    .print\:d_none {
+      display: none;
+}
+}
+
+  @media print {
+    .closed\:print\:ov_visible:is([closed], [data-closed], [data-state="closed"]) {
+      overflow: visible;
+}
+}
+
+  @media print {
+    .closed\:print\:max-h_500vh:is([closed], [data-closed], [data-state="closed"]) {
+      max-height: 500vh;
+}
+}
+
+  @media print {
+    .print\:after\:d_none::after {
+      display: none;
+}
+}
+}