tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

activity-stream.css (294452B)


      1 @charset "UTF-8";
      2 /* This Source Code Form is subject to the terms of the Mozilla Public
      3 * License, v. 2.0. If a copy of the MPL was not distributed with this
      4 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      5 html {
      6  box-sizing: border-box;
      7 }
      8 
      9 *,
     10 *::before,
     11 *::after {
     12  box-sizing: inherit;
     13 }
     14 
     15 body {
     16  margin: 0;
     17 }
     18 
     19 button,
     20 input {
     21  background-color: inherit;
     22  color: inherit;
     23  font-family: inherit;
     24  font-size: inherit;
     25 }
     26 
     27 [hidden] {
     28  display: none !important;
     29 }
     30 
     31 :root {
     32  --newtab-card-height: 282px;
     33  --newtab-card-width-medium: 300px;
     34  --newtab-card-grid-layout-width: 296px;
     35 }
     36 
     37 /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */
     38 /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */
     39 /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */
     40 :root {
     41  color-scheme: light;
     42  --newtab-background-color: #F9F9FB;
     43  --newtab-background-color-secondary: var(--color-white);
     44  --newtab-text-primary-color: var(--text-color);
     45  --newtab-background-card: color-mix(in srgb, var(--color-white) 85%, transparent);
     46  --newtab-text-topic-label-color: var(--color-violet-70);
     47  --newtab-text-secondary-text: var(--text-color-deemphasized);
     48  --newtab-contextual-text-primary-color: light-dark(var(--newtab-text-primary-color), var(--text-color));
     49  --newtab-primary-action-background: light-dark(var(--color-accent-primary), var(--color-accent-primary));
     50  --newtab-primary-action-background-pocket: #008078;
     51  --newtab-text-secondary-color: color-mix(in srgb, var(--newtab-text-primary-color) 70%, transparent);
     52  --newtab-contextual-text-secondary-color: color-mix(in srgb, var(--newtab-contextual-text-primary-color) 70%, transparent);
     53  --newtab-weather-background-color: light-dark(rgba(255, 255, 255, 85%), rgba(66, 65, 77, 85%));
     54  --newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 90%, #000);
     55  --newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 80%, #000);
     56  --newtab-button-background: var(--button-background-color);
     57  --newtab-button-focus-background: var(--newtab-button-background);
     58  --newtab-button-focus-border: var(--focus-outline-color);
     59  --newtab-button-hover-background: var(--button-background-color-hover);
     60  --newtab-button-active-background: var(--button-background-color-active);
     61  --newtab-button-text: var(--button-text-color);
     62  --newtab-button-static-background: light-dark(#F0F0F4, #2B2A33);
     63  --newtab-button-static-focus-background: var(--newtab-button-static-background);
     64  --newtab-button-static-hover-background: light-dark(#E0E0E6, #52525E);
     65  --newtab-button-static-active-background: light-dark(#CFCFD8, #5B5B66);
     66  --newtab-element-secondary-color: color-mix(in srgb, currentColor 5%, transparent);
     67  --newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 12%, transparent);
     68  --newtab-element-secondary-active-color: color-mix(in srgb, currentColor 25%, transparent);
     69  --newtab-primary-element-hover-color: color-mix(in srgb, var(--newtab-primary-action-background) 90%, #000);
     70  --newtab-primary-element-hover-pocket-color: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 90%, #000);
     71  --newtab-primary-element-active-color: color-mix(in srgb, var(--newtab-primary-action-background) 80%, #000);
     72  --newtab-primary-element-text-color: var(--color-white);
     73  --newtab-primary-action-background-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent);
     74  --newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 25%, transparent);
     75  --newtab-wordmark-color: light-dark(#20123A, #fbfbfe);
     76  --newtab-status-success: var(--color-green-50);
     77  --newtab-status-error: var(--color-red-60);
     78  --newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1);
     79  --newtab-section-card-box-shadow-color: rgba(58, 57, 68, 20%);
     80  --newtab-overlay-color: color-mix(in srgb, var(--newtab-background-color) 85%, transparent);
     81  --border-radius-large: 16px;
     82  --newtab-textbox-focus-boxshadow: 0 0 0 1px var(--newtab-primary-action-background), 0 0 0 4px rgba(var(--newtab-primary-action-background), 0.3);
     83  --newtab-button-secondary-color: inherit;
     84 }
     85 :root[lwt-newtab-brighttext] {
     86  color-scheme: dark;
     87  --newtab-background-color: #2B2A33;
     88  --newtab-background-color-secondary: #42414d;
     89  --newtab-text-primary-color: var(--text-color);
     90  --newtab-background-card: rgba(66, 65, 77, 0.85);
     91  --newtab-text-topic-label-color: var(--color-violet-30);
     92  --newtab-text-secondary-text: #FBFBFEB0;
     93  --newtab-contextual-text-primary-color: light-dark(var(--text-color), var(--newtab-text-primary-color));
     94  --newtab-primary-action-background-pocket: var(--color-accent-primary);
     95  --newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent);
     96  --newtab-primary-element-hover-color: color-mix(in srgb, var(--newtab-primary-action-background) 55%, var(--color-white));
     97  --newtab-primary-element-hover-pocket-color: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 55%, var(--color-white));
     98  --newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 80%, var(--color-white));
     99  --newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 60%, var(--color-white));
    100  --newtab-section-card-box-shadow-color: rgba(0, 0, 0, 80%);
    101  --newtab-element-secondary-color: color-mix(in srgb, currentColor 10%, transparent);
    102  --newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 17%, transparent);
    103  --newtab-element-secondary-active-color: color-mix(in srgb, currentColor 30%, transparent);
    104  --newtab-primary-element-text-color: #2b2a33;
    105  --newtab-status-success: var(--color-green-30);
    106 }
    107 
    108 @media (prefers-contrast) {
    109  :root {
    110    --newtab-text-secondary-color: var(--newtab-text-primary-color);
    111    --newtab-text-topic-label-color: var(--color-violet-30);
    112    color-scheme: light;
    113    --newtab-text-secondary-text: #000;
    114  }
    115 }
    116 @media (prefers-contrast) and (prefers-color-scheme: dark) {
    117  :root {
    118    color-scheme: dark;
    119    --newtab-text-secondary-text: #FFF;
    120  }
    121 }
    122 .icon {
    123  background-position: center center;
    124  background-repeat: no-repeat;
    125  background-size: 16px;
    126  -moz-context-properties: fill;
    127  display: inline-block;
    128  color: var(--icon-color);
    129  fill: currentColor;
    130  height: 16px;
    131  vertical-align: middle;
    132  width: 16px;
    133 }
    134 .icon.icon-spacer {
    135  margin-inline-end: var(--space-small);
    136 }
    137 .icon.icon-small-spacer {
    138  margin-inline-end: var(--space-xsmall);
    139 }
    140 .icon.icon-button-style {
    141  fill: var(--newtab-text-secondary-color);
    142  border: 0;
    143 }
    144 .icon.icon-button-style:focus, .icon.icon-button-style:hover {
    145  fill: var(--newtab-text-primary-color);
    146 }
    147 .icon.icon-bookmark-added {
    148  background-image: url("chrome://browser/skin/bookmark.svg");
    149 }
    150 .icon.icon-bookmark-hollow {
    151  background-image: url("chrome://browser/skin/bookmark-hollow.svg");
    152 }
    153 .icon.icon-clear-input {
    154  background-image: url("chrome://global/skin/icons/close-fill.svg");
    155 }
    156 .icon.icon-delete {
    157  background-image: url("chrome://global/skin/icons/delete.svg");
    158 }
    159 .icon.icon-search {
    160  background-image: url("chrome://global/skin/icons/search-glass.svg");
    161 }
    162 .icon.icon-modal-delete {
    163  flex-shrink: 0;
    164  background-image: url("chrome://newtab/content/data/content/assets/glyph-modal-delete-20.svg");
    165  background-size: 32px;
    166  height: 32px;
    167  width: 32px;
    168 }
    169 .icon.icon-mail {
    170  background-image: url("chrome://newtab/content/data/content/assets/glyph-mail-16.svg");
    171 }
    172 .icon.icon-dismiss {
    173  background-image: url("chrome://global/skin/icons/close.svg");
    174 }
    175 .icon.icon-info {
    176  background-image: url("chrome://global/skin/icons/info.svg");
    177 }
    178 .icon.icon-info-critical {
    179  background-image: url("chrome://newtab/content/data/content/assets/glyph-info-critical-16.svg");
    180 }
    181 .icon.icon-info-warning {
    182  background-image: url("chrome://global/skin/icons/warning.svg");
    183  fill: var(--icon-color-warning);
    184  -moz-context-properties: fill;
    185 }
    186 .icon.icon-help {
    187  background-image: url("chrome://global/skin/icons/help.svg");
    188 }
    189 .icon.icon-new-window {
    190  background-image: url("chrome://newtab/content/data/content/assets/glyph-newWindow-16.svg");
    191 }
    192 .icon.icon-new-window:dir(rtl) {
    193  transform: scaleX(-1);
    194 }
    195 .icon.icon-new-window-private {
    196  background-image: url("chrome://browser/skin/privateBrowsing.svg");
    197 }
    198 .icon.icon-settings {
    199  background-image: url("chrome://global/skin/icons/settings.svg");
    200 }
    201 .icon.icon-pin {
    202  background-image: url("chrome://newtab/content/data/content/assets/glyph-pin-16.svg");
    203 }
    204 .icon.icon-pin:dir(rtl) {
    205  transform: scaleX(-1);
    206 }
    207 .icon.icon-unpin {
    208  background-image: url("chrome://newtab/content/data/content/assets/glyph-unpin-16.svg");
    209 }
    210 .icon.icon-unpin:dir(rtl) {
    211  transform: scaleX(-1);
    212 }
    213 .icon.icon-edit {
    214  background-image: url("chrome://global/skin/icons/edit.svg");
    215 }
    216 .icon.icon-edit-outline {
    217  background-image: url("chrome://global/skin/icons/edit-outline.svg");
    218 }
    219 .icon.icon-pocket {
    220  background-image: url("chrome://global/skin/icons/help.svg");
    221 }
    222 .icon.icon-history-item {
    223  background-image: url("chrome://browser/skin/history.svg");
    224 }
    225 .icon.icon-newsfeed {
    226  background-image: url("chrome://global/skin/icons/newsfeed.svg");
    227 }
    228 .icon.icon-trending {
    229  background-image: url("chrome://browser/skin/trending.svg");
    230  transform: translateY(2px);
    231 }
    232 .icon.icon-now {
    233  background-image: url("chrome://browser/skin/history.svg");
    234 }
    235 .icon.icon-topsites {
    236  background-image: url("chrome://browser/skin/topsites.svg");
    237 }
    238 .icon.icon-pin-small {
    239  background-image: url("chrome://browser/skin/pin-12.svg");
    240  background-size: 12px;
    241  height: 12px;
    242  width: 12px;
    243 }
    244 .icon.icon-pin-small:dir(rtl) {
    245  transform: scaleX(-1);
    246 }
    247 .icon.icon-check {
    248  background-image: url("chrome://global/skin/icons/check.svg");
    249 }
    250 .icon.icon-check-filled {
    251  background-image: url("chrome://global/skin/icons/check-filled.svg");
    252 }
    253 .icon.icon-download {
    254  background-image: url("chrome://browser/skin/downloads/downloads.svg");
    255 }
    256 .icon.icon-copy {
    257  background-image: url("chrome://global/skin/icons/edit-copy.svg");
    258 }
    259 .icon.icon-open-file {
    260  background-image: url("chrome://newtab/content/data/content/assets/glyph-open-file-16.svg");
    261 }
    262 .icon.icon-webextension {
    263  background-image: url("chrome://newtab/content/data/content/assets/glyph-webextension-16.svg");
    264 }
    265 .icon.icon-weather {
    266  background-image: url("chrome://browser/skin/weather/sunny.svg");
    267 }
    268 .icon.icon-highlights {
    269  background-image: url("chrome://global/skin/icons/highlights.svg");
    270 }
    271 .icon.icon-arrowhead-down {
    272  background-image: url("chrome://global/skin/icons/arrow-down.svg");
    273 }
    274 .icon.icon-arrowhead-down-small {
    275  background-image: url("chrome://global/skin/icons/arrow-down-12.svg");
    276  background-size: 12px;
    277  height: 12px;
    278  width: 12px;
    279 }
    280 .icon.icon-arrowhead-forward-small {
    281  background-image: url("chrome://global/skin/icons/arrow-right-12.svg");
    282  background-size: 12px;
    283  height: 12px;
    284  width: 12px;
    285 }
    286 .icon.icon-arrowhead-forward-small:dir(rtl) {
    287  background-image: url("chrome://global/skin/icons/arrow-left-12.svg");
    288 }
    289 .icon.icon-arrowhead-up {
    290  background-image: url("chrome://global/skin/icons/arrow-up.svg");
    291 }
    292 .icon.icon-add {
    293  background-image: url("chrome://global/skin/icons/plus.svg");
    294 }
    295 .icon.icon-add-circle-fill {
    296  background-image: url("chrome://newtab/content/data/content/assets/glyph-add-circle-fill-16.svg");
    297 }
    298 .icon.icon-minimize {
    299  background-image: url("chrome://newtab/content/data/content/assets/glyph-minimize-16.svg");
    300 }
    301 .icon.icon-maximize {
    302  background-image: url("chrome://newtab/content/data/content/assets/glyph-maximize-16.svg");
    303 }
    304 .icon.icon-arrow {
    305  background-image: url("chrome://global/skin/icons/arrow-right-12.svg");
    306 }
    307 .icon.icon-device-phone {
    308  background-image: url("chrome://browser/skin/device-phone.svg");
    309 }
    310 .icon.icon-arrow-trending {
    311  background-image: url("chrome://global/skin/icons/trending.svg");
    312 }
    313 
    314 :root {
    315  font-size: var(--font-size-root);
    316  height: 100%;
    317 }
    318 :root[lwt-newtab-brighttext] {
    319  -moz-osx-font-smoothing: grayscale;
    320 }
    321 
    322 body,
    323 #root {
    324  min-height: 100vh;
    325 }
    326 
    327 #root {
    328  position: relative;
    329 }
    330 
    331 body {
    332  background-color: var(--newtab-background-color);
    333  font-family: system-ui;
    334  font-size: var(--font-size-root);
    335  background-repeat: no-repeat;
    336  background-size: cover;
    337  background-position: var(--newtab-wallpaper-backgroundPosition);
    338  background-attachment: fixed;
    339  background-image: var(--newtab-wallpaper, ""), linear-gradient(to right, var(--newtab-wallpaper-color, ""), var(--newtab-wallpaper-color, ""));
    340 }
    341 
    342 .no-scroll {
    343  overflow: hidden;
    344 }
    345 
    346 h1,
    347 h2 {
    348  font-weight: var(--font-weight);
    349 }
    350 
    351 .inner-border {
    352  border: 1px solid var(--border-color);
    353  border-radius: var(--border-radius-small);
    354  height: 100%;
    355  inset-inline-start: 0;
    356  pointer-events: none;
    357  position: absolute;
    358  inset-block-start: 0;
    359  width: 100%;
    360  z-index: 100;
    361 }
    362 
    363 @keyframes fadeIn {
    364  from {
    365    opacity: 0;
    366  }
    367  to {
    368    opacity: 1;
    369  }
    370 }
    371 .show-on-init {
    372  opacity: 0;
    373  transition: opacity 0.2s ease-in;
    374 }
    375 .show-on-init.on {
    376  animation: fadeIn 0.2s;
    377  opacity: 1;
    378 }
    379 
    380 .actions {
    381  border-block-start: 1px solid var(--border-color);
    382  display: flex;
    383  flex-direction: row;
    384  flex-wrap: wrap;
    385  justify-content: flex-start;
    386  margin: 0;
    387  padding: var(--space-large) var(--space-xlarge) 0;
    388 }
    389 
    390 .button,
    391 .actions button {
    392  background-color: var(--newtab-button-secondary-color);
    393  border: 1px solid var(--border-color);
    394  border-radius: var(--border-radius-small);
    395  color: inherit;
    396  cursor: pointer;
    397  margin-block-end: var(--space-large);
    398  padding: var(--space-small) var(--space-xxlarge);
    399  white-space: nowrap;
    400 }
    401 .button:hover:not(.dismiss), .button:focus:not(.dismiss),
    402 .actions button:hover:not(.dismiss),
    403 .actions button:focus:not(.dismiss) {
    404  box-shadow: 0 0 0 5px var(--newtab-element-secondary-color);
    405  transition: box-shadow 150ms;
    406 }
    407 .button.dismiss,
    408 .actions button.dismiss {
    409  background-color: transparent;
    410  border: 0;
    411  padding: 0;
    412  text-decoration: underline;
    413 }
    414 .button.primary, .button.done,
    415 .actions button.primary,
    416 .actions button.done {
    417  background-color: var(--newtab-primary-action-background);
    418  border: solid 1px var(--newtab-primary-action-background);
    419  color: var(--newtab-primary-element-text-color);
    420  margin-inline-start: auto;
    421 }
    422 
    423 input[type=text], input[type=search] {
    424  border-radius: var(--border-radius-small);
    425 }
    426 
    427 .clamp {
    428  -webkit-box-orient: vertical;
    429  display: -webkit-box;
    430  overflow: hidden;
    431  word-break: break-word;
    432 }
    433 
    434 .a11y-link-button {
    435  border: 0;
    436  padding: 0;
    437  cursor: pointer;
    438  text-align: unset;
    439  color: var(--newtab-primary-action-background);
    440 }
    441 .a11y-link-button:hover, .a11y-link-button:focus {
    442  text-decoration: underline;
    443 }
    444 
    445 .outer-wrapper {
    446  color: var(--newtab-text-primary-color);
    447  display: flex;
    448  flex-grow: 1;
    449  min-height: 100vh;
    450  padding: var(--space-xxlarge);
    451 }
    452 .outer-wrapper.ds-outer-wrapper-breakpoint-override {
    453  padding: var(--space-xxlarge) 0;
    454 }
    455 @media (min-width: 610px) {
    456  .outer-wrapper.ds-outer-wrapper-breakpoint-override {
    457    padding: var(--space-xxlarge);
    458  }
    459 }
    460 .outer-wrapper.only-search {
    461  display: block;
    462  padding-block-start: calc(var(--space-xxlarge) * 4);
    463 }
    464 .outer-wrapper a {
    465  color: var(--newtab-primary-action-background);
    466 }
    467 
    468 main {
    469  margin: 0 auto;
    470  display: flex;
    471  flex-direction: column;
    472  justify-content: center;
    473  width: 274px;
    474  padding: 0;
    475 }
    476 main.newtab-main {
    477  min-width: min-content;
    478 }
    479 main .vertical-center-wrapper {
    480  margin: auto 0;
    481 }
    482 main section {
    483  margin-block-end: var(--space-medium);
    484  position: relative;
    485 }
    486 .hide-main main {
    487  visibility: hidden;
    488 }
    489 @media (min-width: 610px) {
    490  main {
    491    width: 530px;
    492  }
    493 }
    494 @media (min-width: 866px) {
    495  main {
    496    width: 786px;
    497  }
    498 }
    499 @media (min-width: 1122px) {
    500  main {
    501    width: 1042px;
    502  }
    503 }
    504 
    505 .no-search main {
    506  margin-block-start: var(--space-xxlarge);
    507 }
    508 
    509 .ds-outer-wrapper-search-alignment main {
    510  margin: 0 auto;
    511 }
    512 
    513 .ds-outer-wrapper-breakpoint-override main {
    514  width: auto;
    515  padding-block-end: 0;
    516 }
    517 .ds-outer-wrapper-breakpoint-override main .ds-card {
    518  width: var(--newtab-card-grid-layout-width);
    519 }
    520 .ds-outer-wrapper-breakpoint-override main .ds-card-grid:not(.ds-section-grid) {
    521  grid-gap: var(--space-large);
    522 }
    523 .ds-outer-wrapper-breakpoint-override main .ds-card-grid:not(.ds-section-grid).empty {
    524  grid-template-columns: auto;
    525 }
    526 .ds-outer-wrapper-breakpoint-override main .body-wrapper {
    527  width: 346px;
    528  margin: 0 auto;
    529 }
    530 @media (min-width: 610px) {
    531  .ds-outer-wrapper-breakpoint-override main {
    532    width: auto;
    533  }
    534  .ds-outer-wrapper-breakpoint-override main .ds-card-grid:not(.ds-section-grid) {
    535    grid-template-columns: repeat(1, 1fr);
    536  }
    537  .ds-outer-wrapper-breakpoint-override main .body-wrapper {
    538    width: 346px;
    539  }
    540 }
    541 @media (min-width: 724px) {
    542  .ds-outer-wrapper-breakpoint-override main {
    543    width: auto;
    544  }
    545  .ds-outer-wrapper-breakpoint-override main .ds-card-grid:not(.ds-section-grid) {
    546    grid-template-columns: repeat(2, 1fr);
    547  }
    548  .ds-outer-wrapper-breakpoint-override main .body-wrapper {
    549    width: 659px;
    550  }
    551 }
    552 @media (min-width: 1122px) {
    553  .ds-outer-wrapper-breakpoint-override main {
    554    width: auto;
    555  }
    556  .ds-outer-wrapper-breakpoint-override main .ds-card-grid:not(.ds-section-grid) {
    557    grid-template-columns: repeat(3, 1fr);
    558    grid-gap: var(--space-xlarge);
    559  }
    560  .ds-outer-wrapper-breakpoint-override main .body-wrapper {
    561    width: 989px;
    562  }
    563 }
    564 @media (min-width: 1698px) {
    565  .ds-outer-wrapper-breakpoint-override main {
    566    width: auto;
    567  }
    568  .ds-outer-wrapper-breakpoint-override main .body-wrapper {
    569    display: flex;
    570    flex-direction: column;
    571    width: 1311px;
    572  }
    573  .ds-outer-wrapper-breakpoint-override main .ds-highlights .card-outer {
    574    min-width: 216px;
    575  }
    576  .ds-outer-wrapper-breakpoint-override main .ds-card-grid:not(.ds-section-grid) {
    577    grid-template-columns: repeat(4, 1fr);
    578  }
    579 }
    580 
    581 .base-content-fallback {
    582  height: 100vh;
    583 }
    584 
    585 .body-wrapper .section-title, .body-wrapper .sections-list .section:last-of-type, .body-wrapper .topics {
    586  opacity: 0;
    587 }
    588 .body-wrapper.on .section-title, .body-wrapper.on .sections-list .section:last-of-type, .body-wrapper.on .topics {
    589  opacity: 1;
    590 }
    591 
    592 .non-collapsible-section {
    593  padding: 0;
    594 }
    595 
    596 .prefs-button button {
    597  background-color: transparent;
    598  border: 0;
    599  border-radius: var(--button-border-radius);
    600  cursor: pointer;
    601  padding: var(--space-large);
    602  position: fixed;
    603  inset-inline-end: var(--space-large);
    604  inset-block-start: var(--space-large);
    605  z-index: 1000;
    606 }
    607 .prefs-button button:hover, .prefs-button button:focus {
    608  background-color: var(--newtab-element-hover-color);
    609 }
    610 .prefs-button button:active {
    611  background-color: var(--newtab-element-active-color);
    612 }
    613 
    614 .wallpaper-attribution {
    615  padding: 0 var(--space-xlarge);
    616  font-size: var(--font-size-small);
    617  color: var(--newtab-contextual-text-primary-color);
    618  position: absolute;
    619  inset-block-end: var(--space-large);
    620  inset-inline-start: 0;
    621 }
    622 .lightWallpaper .wallpaper-attribution {
    623  color-scheme: light;
    624 }
    625 .darkWallpaper .wallpaper-attribution {
    626  color-scheme: dark;
    627 }
    628 .wallpaper-attribution.theme-light {
    629  display: inline-block;
    630 }
    631 [lwt-newtab-brighttext] .wallpaper-attribution.theme-light {
    632  display: none;
    633 }
    634 .wallpaper-attribution.theme-dark {
    635  display: none;
    636 }
    637 [lwt-newtab-brighttext] .wallpaper-attribution.theme-dark {
    638  display: inline-block;
    639 }
    640 .wallpaper-attribution a {
    641  color: inherit;
    642 }
    643 .wallpaper-attribution a:hover {
    644  text-decoration: none;
    645 }
    646 
    647 .as-error-fallback {
    648  align-items: center;
    649  border-radius: var(--border-radius-medium);
    650  box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color);
    651  color: var(--newtab-text-secondary-color);
    652  display: flex;
    653  flex-direction: column;
    654  font-size: var(--font-size-small);
    655  justify-content: center;
    656  justify-items: center;
    657 }
    658 .as-error-fallback.borderless-error {
    659  box-shadow: none;
    660 }
    661 .as-error-fallback a {
    662  color: var(--newtab-text-secondary-color);
    663  text-decoration: underline;
    664 }
    665 
    666 .logo-and-wordmark-wrapper {
    667  margin-block: 0;
    668 }
    669 
    670 .logo-and-wordmark {
    671  align-items: center;
    672  display: flex;
    673  justify-content: center;
    674  margin-block-end: var(--space-xxlarge);
    675 }
    676 .no-recommended-stories .logo-and-wordmark {
    677  margin-block-end: calc(var(--space-large) + var(--space-xlarge));
    678 }
    679 .logo-and-wordmark .logo {
    680  display: inline-block;
    681  height: 64px;
    682  width: 64px;
    683  background: image-set(url("chrome://branding/content/about-logo.png"), url("chrome://branding/content/about-logo@2x.png") 2x) no-repeat center;
    684  background-size: 64px;
    685 }
    686 .logo-and-wordmark .wordmark {
    687  background: url("chrome://branding/content/firefox-wordmark.svg") no-repeat center center;
    688  background-size: 105px;
    689  -moz-context-properties: fill;
    690  display: inline-block;
    691  fill: var(--newtab-wordmark-color);
    692  height: 64px;
    693  margin-inline-start: var(--space-large);
    694  width: 105px;
    695 }
    696 .lightWallpaper .logo-and-wordmark .wordmark {
    697  color-scheme: light;
    698 }
    699 .darkWallpaper .logo-and-wordmark .wordmark {
    700  color-scheme: dark;
    701 }
    702 @media (max-width: 609px) {
    703  .logo-and-wordmark .logo {
    704    background-size: 64px;
    705    height: 64px;
    706    width: 64px;
    707  }
    708  .logo-and-wordmark .wordmark {
    709    background-size: 100px;
    710    height: 64px;
    711    width: 100px;
    712    margin-inline-start: var(--space-medium);
    713  }
    714 }
    715 
    716 /* stylelint-disable max-nesting-depth */
    717 .top-sites-list {
    718  list-style: none;
    719  margin: 0 calc(var(--space-large) * -1);
    720  padding: 0;
    721  display: grid;
    722  grid-template-columns: repeat(3, auto);
    723  justify-content: center;
    724  row-gap: var(--space-small);
    725 }
    726 .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) {
    727  background: color-mix(in srgb, var(--button-text-color-hover) 14%, transparent);
    728 }
    729 .lightWallpaper .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) {
    730  color-scheme: light;
    731 }
    732 .darkWallpaper .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) {
    733  color-scheme: dark;
    734 }
    735 .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) .tile {
    736  box-shadow: 0 2px 8px 0 var(--newtab-section-card-box-shadow-color);
    737 }
    738 .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) .icon-pin-small {
    739  opacity: 1;
    740 }
    741 .lightWallpaper .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover), .darkWallpaper .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) {
    742  background: color-mix(in srgb, var(--button-text-color-hover) 14%, transparent);
    743 }
    744 @media (prefers-contrast) {
    745  .lightWallpaper .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover), .darkWallpaper .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) {
    746    background-color: var(--background-color-box);
    747  }
    748 }
    749 @media (min-width: 724px) {
    750  .top-sites-list {
    751    grid-template-columns: repeat(6, auto);
    752  }
    753 }
    754 @media (min-width: 1122px) {
    755  .top-sites-list {
    756    grid-template-columns: repeat(8, auto);
    757  }
    758 }
    759 .top-sites-list a {
    760  text-decoration: none;
    761 }
    762 @media (max-width: 610px) {
    763  .top-sites-list > :nth-child(2n+1) .context-menu {
    764    margin-inline-end: auto;
    765    margin-inline-start: auto;
    766    inset-inline-end: auto;
    767    inset-inline-start: calc(var(--space-xxlarge) * -1);
    768  }
    769  .top-sites-list > :nth-child(2n) .context-menu {
    770    margin-inline-end: var(--space-xsmall);
    771    margin-inline-start: auto;
    772    inset-inline-end: 0;
    773    inset-inline-start: auto;
    774  }
    775 }
    776 @media (min-width: 610px) and (max-width: 866px) {
    777  .top-sites-list :nth-child(4n) .context-menu {
    778    margin-inline-end: var(--space-xsmall);
    779    margin-inline-start: auto;
    780    inset-inline-end: 0;
    781    inset-inline-start: auto;
    782  }
    783 }
    784 @media (min-width: 610px) and (max-width: 802px) {
    785  .top-sites-list :nth-child(4n+3) .context-menu {
    786    margin-inline-end: var(--space-xsmall);
    787    margin-inline-start: auto;
    788    inset-inline-end: 0;
    789    inset-inline-start: auto;
    790  }
    791 }
    792 @media (min-width: 866px) and (max-width: 1250px) {
    793  .top-sites-list :nth-child(6n) .context-menu {
    794    margin-inline-end: var(--space-xsmall);
    795    margin-inline-start: auto;
    796    inset-inline-end: 0;
    797    inset-inline-start: auto;
    798  }
    799 }
    800 @media (min-width: 866px) and (max-width: 1058px) {
    801  .top-sites-list :nth-child(6n+5) .context-menu {
    802    margin-inline-end: var(--space-xsmall);
    803    margin-inline-start: auto;
    804    inset-inline-end: 0;
    805    inset-inline-start: auto;
    806  }
    807 }
    808 @media (min-width: 1122px) and (max-width: 1506px) {
    809  .top-sites-list :nth-child(8n) .context-menu {
    810    margin-inline-end: var(--space-xsmall);
    811    margin-inline-start: auto;
    812    inset-inline-end: 0;
    813    inset-inline-start: auto;
    814  }
    815 }
    816 @media (min-width: 1122px) and (max-width: 1314px) {
    817  .top-sites-list :nth-child(8n+7) .context-menu {
    818    margin-inline-end: var(--space-xsmall);
    819    margin-inline-start: auto;
    820    inset-inline-end: 0;
    821    inset-inline-start: auto;
    822  }
    823 }
    824 .top-sites-list .hide-for-narrow {
    825  display: none;
    826 }
    827 @media (min-width: 610px) {
    828  .top-sites-list .hide-for-narrow {
    829    display: none;
    830  }
    831 }
    832 @media (min-width: 866px) {
    833  .top-sites-list .hide-for-narrow {
    834    display: none;
    835  }
    836 }
    837 @media (min-width: 1122px) {
    838  .top-sites-list .hide-for-narrow {
    839    display: inline-block;
    840  }
    841 }
    842 
    843 .discovery-stream.ds-layout.ds-layout-topsites {
    844  display: flex;
    845  justify-content: center;
    846 }
    847 .discovery-stream.ds-layout.ds-layout-topsites .top-sites-list {
    848  padding-block-start: 0;
    849 }
    850 
    851 .top-site-outer {
    852  width: 120px;
    853  margin-block-end: var(--space-medium);
    854  border-radius: var(--border-radius-large);
    855  display: inline-block;
    856 }
    857 .top-site-outer .top-site-inner {
    858  position: relative;
    859 }
    860 .top-site-outer .top-site-inner > a {
    861  padding: var(--space-large) var(--space-large) var(--space-xsmall);
    862  color: inherit;
    863  display: block;
    864  outline: none;
    865 }
    866 .top-site-outer:hover .context-menu-button, .top-site-outer:focus .context-menu-button {
    867  opacity: 1;
    868  transition: opacity 200ms;
    869 }
    870 .lightWallpaper .top-site-outer:hover .context-menu-button, .lightWallpaper .top-site-outer:focus .context-menu-button {
    871  color-scheme: light;
    872 }
    873 .darkWallpaper .top-site-outer:hover .context-menu-button, .darkWallpaper .top-site-outer:focus .context-menu-button {
    874  color-scheme: dark;
    875 }
    876 .top-site-outer:hover .tile, .top-site-outer:focus .tile {
    877  background-color: var(--newtab-background-color-secondary);
    878 }
    879 .top-site-outer:hover .icon-pin-small, .top-site-outer:focus .icon-pin-small {
    880  opacity: 1;
    881 }
    882 .lightWallpaper .top-site-outer:not(:hover, :active, .active) {
    883  color-scheme: light;
    884 }
    885 .darkWallpaper .top-site-outer:not(:hover, :active, .active) {
    886  color-scheme: dark;
    887 }
    888 .top-site-outer.active .context-menu-button {
    889  opacity: 1;
    890  background-color: var(--newtab-button-active-background);
    891 }
    892 .top-site-outer .tile {
    893  background: var(--newtab-background-card);
    894  border-radius: var(--border-radius-large);
    895  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    896  height: calc(var(--size-item-large) * 2);
    897  width: calc(var(--size-item-large) * 2);
    898  margin: 0 auto;
    899  position: relative;
    900  display: flex;
    901  align-items: center;
    902  justify-content: center;
    903  text-transform: uppercase;
    904  font-size: var(--font-size-xxlarge);
    905  color: var(--newtab-contextual-text-secondary-color);
    906  cursor: pointer;
    907 }
    908 .top-site-outer .tile .icon-wrapper {
    909  border-radius: var(--border-radius-small);
    910  width: 40px;
    911  height: 40px;
    912  display: flex;
    913  align-items: center;
    914  justify-content: center;
    915  overflow: hidden;
    916  position: relative;
    917 }
    918 .top-site-outer .tile .icon-wrapper.letter-fallback {
    919  border-radius: var(--border-radius-circle);
    920 }
    921 .top-site-outer .tile .icon-wrapper.letter-fallback::before {
    922  content: attr(data-fallback);
    923  font-size: var(--font-size-xlarge);
    924  transform: none;
    925  position: static;
    926 }
    927 .top-site-outer .tile .top-site-icon {
    928  background-color: transparent;
    929  border-radius: var(--border-radius-medium);
    930  background-position: center;
    931  background-repeat: no-repeat;
    932  position: absolute;
    933 }
    934 .top-site-outer .context-menu-button {
    935  background-image: url("chrome://global/skin/icons/more.svg");
    936  border: 0;
    937  border-radius: var(--border-radius-small);
    938  cursor: pointer;
    939  fill: var(--newtab-button-text);
    940  -moz-context-properties: fill;
    941  height: var(--size-item-medium);
    942  width: var(--size-item-medium);
    943  inset-inline-end: 0;
    944  inset-block-start: var(--space-medium);
    945  position: absolute;
    946  opacity: 0;
    947 }
    948 .top-site-outer .context-menu-button:hover {
    949  background-color: var(--newtab-button-hover-background);
    950 }
    951 .top-site-outer .context-menu-button:hover:active {
    952  background-color: var(--newtab-button-active-background);
    953 }
    954 .top-site-outer .context-menu-button:focus-visible {
    955  background-color: var(--newtab-button-focus-background);
    956  outline: var(--focus-outline);
    957  opacity: 1;
    958 }
    959 .lightWallpaper .top-site-outer .context-menu-button:focus-visible::after, .darkWallpaper .top-site-outer .context-menu-button:focus-visible::after {
    960  content: "";
    961  position: absolute;
    962  inset: 0;
    963  border-radius: var(--border-radius-small);
    964  outline: var(--focus-outline);
    965  color-scheme: initial;
    966 }
    967 .top-site-outer .context-menu {
    968  inset-block-start: calc(var(--space-large) + var(--space-xlarge));
    969 }
    970 .top-site-outer .icon-pin-small {
    971  inset-block-start: var(--space-small);
    972  inset-inline-start: var(--space-small);
    973  opacity: 0;
    974  position: absolute;
    975 }
    976 .top-site-outer .top-site-button {
    977  padding: var(--space-large) var(--space-large) var(--space-small);
    978 }
    979 .top-site-outer .top-site-button:focus + div .context-menu-button {
    980  opacity: 1;
    981 }
    982 .lightWallpaper .top-site-outer .top-site-button:focus .tile, .darkWallpaper .top-site-outer .top-site-button:focus .tile {
    983  outline: var(--focus-outline);
    984  color-scheme: initial;
    985 }
    986 .top-site-outer .title {
    987  color: var(--newtab-contextual-text-primary-color);
    988  padding-block-start: var(--space-small);
    989  font: caption;
    990  text-align: center;
    991  position: relative;
    992 }
    993 .top-site-outer .title .icon {
    994  margin-inline-end: var(--space-xxsmall);
    995  fill: currentColor;
    996 }
    997 .top-site-outer .title .sponsored-label {
    998  color: var(--newtab-contextual-text-secondary-color);
    999  font-size: var(--font-size-xsmall);
   1000 }
   1001 .top-site-outer .title:not(.sponsored) .sponsored-label {
   1002  display: none;
   1003 }
   1004 .top-site-outer .title .search-topsite {
   1005  margin-inline-end: var(--space-xxsmall);
   1006  fill: currentColor;
   1007  background-size: var(--icon-size-xsmall);
   1008  height: var(--icon-size-xsmall);
   1009  width: var(--icon-size-xsmall);
   1010  background-position: center;
   1011  background-repeat: no-repeat;
   1012  background-color: transparent;
   1013  position: static;
   1014  display: inline-block;
   1015  color: var(--icon-color);
   1016  box-shadow: none;
   1017 }
   1018 .top-site-outer .rich-icon {
   1019  background-size: cover;
   1020  height: 100%;
   1021  width: 100%;
   1022  position: absolute;
   1023  inset-inline-start: 0;
   1024  inset-block-start: 0;
   1025 }
   1026 .top-site-outer .default-icon,
   1027 .top-site-outer .search-topsite {
   1028  background-size: 40px;
   1029  height: 40px;
   1030  width: 40px;
   1031  align-items: center;
   1032  display: flex;
   1033  justify-content: center;
   1034  font-size: var(--font-size-xlarge);
   1035 }
   1036 .top-site-outer .default-icon[data-fallback]::before,
   1037 .top-site-outer .search-topsite[data-fallback]::before {
   1038  content: attr(data-fallback);
   1039 }
   1040 .top-site-outer .search-topsite {
   1041  background-image: url("chrome://global/skin/icons/search-glass.svg");
   1042  background-size: 16px;
   1043  background-color: var(--newtab-primary-action-background);
   1044  border-radius: var(--border-radius-circle);
   1045  -moz-context-properties: fill;
   1046  fill: var(--newtab-primary-element-text-color);
   1047  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
   1048  transition: background-size 150ms, bottom 150ms, inset-inline-end 150ms, height 150ms, width 150ms;
   1049  height: 32px;
   1050  width: 32px;
   1051  inset-block-end: -6px;
   1052  inset-inline-end: -6px;
   1053 }
   1054 .top-site-outer.placeholder .tile {
   1055  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
   1056  cursor: default;
   1057 }
   1058 .top-site-outer.add-button .tile {
   1059  background-color: var(--button-background-color);
   1060 }
   1061 .top-site-outer.add-button .tile .icon-wrapper {
   1062  background-image: url("chrome://global/skin/icons/plus-20.svg");
   1063  background-size: cover;
   1064  background-repeat: no-repeat;
   1065  height: 20px;
   1066  width: 20px;
   1067  fill: var(--icon-color);
   1068  -moz-context-properties: fill;
   1069 }
   1070 .top-site-outer.add-button:hover .tile {
   1071  background-color: var(--newtab-background-color-secondary);
   1072  color-scheme: initial;
   1073 }
   1074 .top-site-outer.search-shortcut .rich-icon {
   1075  background-color: var(--color-white);
   1076 }
   1077 .top-site-outer .edit-button {
   1078  background-image: url("chrome://global/skin/icons/edit.svg");
   1079 }
   1080 .top-site-outer.dragged .tile *, .top-site-outer.dragged .tile::before {
   1081  display: none;
   1082 }
   1083 .top-site-outer.dragged .title {
   1084  visibility: hidden;
   1085 }
   1086 
   1087 .shortcuts-refresh .top-site-outer {
   1088  margin-block-end: 0;
   1089 }
   1090 
   1091 .edit-topsites-wrapper .top-site-inner > .top-site-button > .tile {
   1092  border: 1px solid var(--border-color);
   1093 }
   1094 .edit-topsites-wrapper .modal {
   1095  box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2);
   1096  inset-inline-start: 0;
   1097  margin: 0 auto;
   1098  max-height: calc(100% - 40px);
   1099  position: fixed;
   1100  inset-inline-end: 0;
   1101  inset-block-start: var(--space-xxlarge);
   1102  width: 274px;
   1103 }
   1104 @media (min-width: 610px) {
   1105  .edit-topsites-wrapper .modal {
   1106    width: 530px;
   1107  }
   1108 }
   1109 @media (min-width: 866px) {
   1110  .edit-topsites-wrapper .modal {
   1111    width: 786px;
   1112  }
   1113 }
   1114 
   1115 .topsite-form .section-title {
   1116  font-size: inherit;
   1117  margin: 0 0 var(--space-large);
   1118 }
   1119 .topsite-form .form-input-container {
   1120  max-width: 492px;
   1121  margin: 0 auto;
   1122  padding: var(--space-xxlarge);
   1123 }
   1124 .topsite-form .form-input-container .top-site-outer {
   1125  pointer-events: none;
   1126 }
   1127 .topsite-form .search-shortcuts-container {
   1128  max-width: 700px;
   1129  margin: 0 auto;
   1130  padding: var(--space-xxlarge);
   1131 }
   1132 .topsite-form .search-shortcuts-container > div {
   1133  margin-inline-end: calc(var(--space-xxlarge) * -1);
   1134 }
   1135 .topsite-form .search-shortcuts-container .top-site-outer {
   1136  margin-inline-start: 0;
   1137  margin-inline-end: var(--space-xxlarge);
   1138 }
   1139 .topsite-form .top-site-outer {
   1140  padding: 0;
   1141  margin: var(--space-xlarge) 0 0;
   1142  margin-inline-start: var(--space-xxlarge);
   1143 }
   1144 .topsite-form .fields-and-preview {
   1145  display: flex;
   1146 }
   1147 .topsite-form label {
   1148  font-size: var(--font-size-large);
   1149 }
   1150 .topsite-form .form-wrapper {
   1151  width: 100%;
   1152 }
   1153 .topsite-form .form-wrapper .field {
   1154  position: relative;
   1155 }
   1156 .topsite-form .form-wrapper .field .icon-clear-input {
   1157  position: absolute;
   1158  transform: translateY(-50%);
   1159  inset-block-start: 50%;
   1160  inset-inline-end: var(--space-small);
   1161 }
   1162 .topsite-form .form-wrapper .url input:dir(ltr) {
   1163  padding-inline-end: var(--space-xxlarge);
   1164 }
   1165 .topsite-form .form-wrapper .url input:dir(rtl) {
   1166  padding-inline-start: var(--space-xxlarge);
   1167 }
   1168 .topsite-form .form-wrapper .url input:dir(rtl):not(:placeholder-shown) {
   1169  direction: ltr;
   1170  text-align: end;
   1171 }
   1172 .topsite-form .form-wrapper .enable-custom-image-input {
   1173  display: inline-block;
   1174  font-size: var(--font-size-small);
   1175  margin-block-start: var(--space-xsmall);
   1176  cursor: pointer;
   1177 }
   1178 .topsite-form .form-wrapper .custom-image-input-container {
   1179  margin-block-start: var(--space-xsmall);
   1180 }
   1181 .topsite-form .form-wrapper .custom-image-input-container .loading-container {
   1182  width: 16px;
   1183  height: 16px;
   1184  overflow: hidden;
   1185  position: absolute;
   1186  transform: translateY(-50%);
   1187  inset-block-start: 50%;
   1188  inset-inline-end: var(--space-small);
   1189 }
   1190 .topsite-form .form-wrapper .custom-image-input-container .loading-animation {
   1191  width: 960px;
   1192  height: 16px;
   1193  -moz-context-properties: fill;
   1194  fill: var(--newtab-primary-action-background);
   1195  background-image: url("chrome://browser/skin/tabbrowser/loading.svg");
   1196  animation: tab-throbber-animation 1.05s steps(60) infinite;
   1197 }
   1198 @keyframes tab-throbber-animation {
   1199  100% {
   1200    transform: translateX(-960px);
   1201  }
   1202 }
   1203 @keyframes tab-throbber-animation-rtl {
   1204  100% {
   1205    transform: translateX(960px);
   1206  }
   1207 }
   1208 .topsite-form .form-wrapper .custom-image-input-container .loading-animation:dir(rtl) {
   1209  animation-name: tab-throbber-animation-rtl;
   1210 }
   1211 .topsite-form .form-wrapper input[type=text] {
   1212  background-color: var(--newtab-background-color-secondary);
   1213  border: 1px solid var(--border-color-interactive);
   1214  margin: var(--space-small) 0;
   1215  padding: 0 var(--space-small);
   1216  height: 32px;
   1217  width: 100%;
   1218  font-size: inherit;
   1219 }
   1220 .topsite-form .form-wrapper input[type=text][disabled] {
   1221  border: 1px solid var(--border-color-interactive-disabled);
   1222  box-shadow: none;
   1223  opacity: 0.4;
   1224 }
   1225 .topsite-form .form-wrapper .invalid input[type=text] {
   1226  border: 1px solid var(--outline-color-error);
   1227  box-shadow: 0 0 0 1px var(--newtab-status-error), 0 0 0 4px rgba(var(--newtab-status-error), 0.3);
   1228 }
   1229 .topsite-form .form-wrapper .error-tooltip {
   1230  animation: fade-up-tt 450ms;
   1231  background: var(--newtab-status-error);
   1232  border-radius: var(--border-radius-small);
   1233  color: var(--color-white);
   1234  inset-inline-start: var(--space-xxsmall);
   1235  padding: var(--space-xsmall) var(--space-medium);
   1236  position: absolute;
   1237  inset-block-start: var(--space-xxlarge);
   1238  z-index: 1;
   1239 }
   1240 .topsite-form .form-wrapper .error-tooltip::before {
   1241  background: var(--newtab-status-error);
   1242  inset-block-end: calc(var(--space-small) * -1);
   1243  content: ".";
   1244  height: 16px;
   1245  inset-inline-start: var(--space-medium);
   1246  position: absolute;
   1247  text-indent: -999px;
   1248  inset-block-start: calc(var(--space-small) * -1);
   1249  transform: rotate(45deg);
   1250  white-space: nowrap;
   1251  width: 16px;
   1252  z-index: -1;
   1253 }
   1254 .topsite-form .actions {
   1255  justify-content: flex-end;
   1256 }
   1257 .topsite-form .actions button {
   1258  margin-inline-start: var(--space-small);
   1259  margin-inline-end: 0;
   1260 }
   1261 @media (max-width: 610px) {
   1262  .topsite-form .fields-and-preview {
   1263    flex-direction: column;
   1264  }
   1265  .topsite-form .fields-and-preview .top-site-outer {
   1266    margin-inline-start: 0;
   1267  }
   1268 }
   1269 .topsite-form .title {
   1270  user-select: none;
   1271 }
   1272 .topsite-form [type=checkbox]:not(:checked),
   1273 .topsite-form [type=checkbox]:checked {
   1274  inset-inline-start: -9999px;
   1275  position: absolute;
   1276 }
   1277 .topsite-form [type=checkbox]:not(:checked) + label,
   1278 .topsite-form [type=checkbox]:checked + label {
   1279  cursor: pointer;
   1280  display: block;
   1281  position: relative;
   1282 }
   1283 .topsite-form [type=checkbox]:not(:checked) + label::before,
   1284 .topsite-form [type=checkbox]:checked + label::before {
   1285  background: var(--newtab-background-color);
   1286  border: 1px solid var(--border-color);
   1287  border-radius: var(--border-radius-small);
   1288  content: "";
   1289  height: 21px;
   1290  inset-inline-start: calc(var(--space-small) * -1);
   1291  position: absolute;
   1292  inset-block-start: calc(var(--space-small) * -1);
   1293  width: 21px;
   1294  z-index: 1;
   1295 }
   1296 [dir=rtl] .topsite-form [type=checkbox]:not(:checked) + label::before,
   1297 [dir=rtl] .topsite-form [type=checkbox]:checked + label::before {
   1298  inset-inline-start: auto;
   1299  inset-inline-end: calc(var(--space-small) * -1);
   1300 }
   1301 .topsite-form [type=checkbox]:not(:checked) + label::after,
   1302 .topsite-form [type=checkbox]:checked + label::after {
   1303  background: url("chrome://global/skin/icons/check.svg") no-repeat center center;
   1304  content: "";
   1305  height: 21px;
   1306  inset-inline-start: calc(var(--space-small) * -1);
   1307  position: absolute;
   1308  inset-block-start: calc(var(--space-small) * -1);
   1309  width: 21px;
   1310  -moz-context-properties: fill;
   1311  fill: var(--newtab-primary-action-background);
   1312  z-index: 2;
   1313 }
   1314 [dir=rtl] .topsite-form [type=checkbox]:not(:checked) + label::after,
   1315 [dir=rtl] .topsite-form [type=checkbox]:checked + label::after {
   1316  inset-inline-start: auto;
   1317  inset-inline-end: calc(var(--space-small) * -1);
   1318 }
   1319 .topsite-form [type=checkbox]:checked + label .tile {
   1320  box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed);
   1321 }
   1322 .topsite-form [type=checkbox]:not(:checked) + label::after {
   1323  opacity: 0;
   1324 }
   1325 .topsite-form [type=checkbox]:checked + label::after {
   1326  opacity: 1;
   1327 }
   1328 .topsite-form [type=checkbox]:checked:focus + label::before,
   1329 .topsite-form [type=checkbox]:not(:checked):focus + label::before {
   1330  border: 1px dotted var(--newtab-primary-action-background);
   1331 }
   1332 
   1333 .top-sites-list .top-site-outer .top-site-button,
   1334 .fields-and-preview .top-site-outer .top-site-button {
   1335  display: flex;
   1336  flex-direction: column;
   1337  justify-content: center;
   1338  align-items: center;
   1339 }
   1340 .top-sites-list .top-site-outer .title .title-label,
   1341 .fields-and-preview .top-site-outer .title .title-label {
   1342  display: block;
   1343  overflow: hidden;
   1344  text-overflow: ellipsis;
   1345  -webkit-line-clamp: 2;
   1346  white-space: wrap;
   1347  word-break: break-word;
   1348  min-height: 2lh;
   1349  width: 100px;
   1350  padding: 0 var(--space-xsmall);
   1351 }
   1352 .top-sites-list .top-site-outer .title.sponsored .title-label,
   1353 .fields-and-preview .top-site-outer .title.sponsored .title-label {
   1354  -webkit-line-clamp: 1;
   1355  min-height: 1lh;
   1356 }
   1357 
   1358 @keyframes fade-up-tt {
   1359  0% {
   1360    opacity: 0;
   1361    transform: translateY(15px);
   1362  }
   1363  100% {
   1364    opacity: 1;
   1365    transform: translateY(0);
   1366  }
   1367 }
   1368 .topsite-impression-observer {
   1369  position: absolute;
   1370  inset-block-start: 0;
   1371  width: 100%;
   1372  height: 100%;
   1373  pointer-events: none;
   1374 }
   1375 
   1376 .sections-list .section-list {
   1377  display: grid;
   1378  grid-gap: var(--space-xxlarge);
   1379  grid-template-columns: repeat(auto-fit, 192px);
   1380  margin: 0;
   1381 }
   1382 @media (max-width: 610px) {
   1383  .sections-list .section-list .context-menu {
   1384    margin-inline-end: var(--space-xsmall);
   1385    margin-inline-start: auto;
   1386    inset-inline-end: 0;
   1387    inset-inline-start: auto;
   1388  }
   1389 }
   1390 @media (min-width: 610px) and (max-width: 866px) {
   1391  .sections-list .section-list :nth-child(2n) .context-menu {
   1392    margin-inline-end: var(--space-xsmall);
   1393    margin-inline-start: auto;
   1394    inset-inline-end: 0;
   1395    inset-inline-start: auto;
   1396  }
   1397 }
   1398 @media (min-width: 866px) and (max-width: 1250px) {
   1399  .sections-list .section-list :nth-child(3n) .context-menu {
   1400    margin-inline-end: var(--space-xsmall);
   1401    margin-inline-start: auto;
   1402    inset-inline-end: 0;
   1403    inset-inline-start: auto;
   1404  }
   1405 }
   1406 @media (min-width: 1122px) and (max-width: 1506px) {
   1407  .sections-list .section-list :nth-child(3n) .context-menu,
   1408 .sections-list .section-list :nth-child(4n) .context-menu {
   1409    margin-inline-end: var(--space-xsmall);
   1410    margin-inline-start: auto;
   1411    inset-inline-end: 0;
   1412    inset-inline-start: auto;
   1413  }
   1414 }
   1415 .sections-list .section-empty-state {
   1416  border: 1px solid var(--border-color);
   1417  border-radius: var(--border-radius-small);
   1418  display: flex;
   1419  height: 266px;
   1420  width: 100%;
   1421 }
   1422 .sections-list .section-empty-state .empty-state {
   1423  margin: auto;
   1424  max-width: 350px;
   1425 }
   1426 .sections-list .section-empty-state .empty-state .empty-state-message {
   1427  color: var(--newtab-text-primary-color);
   1428  font-size: var(--font-size-small);
   1429  margin-block-end: 0;
   1430  text-align: center;
   1431 }
   1432 @media (min-width: 1122px) {
   1433  .sections-list .section-empty-state {
   1434    height: 370px;
   1435  }
   1436 }
   1437 
   1438 .top-stories-bottom-container {
   1439  color: var(--newtab-text-primary-color);
   1440  font-size: var(--font-size-small);
   1441  margin-block-start: var(--space-medium);
   1442  display: flex;
   1443  justify-content: space-between;
   1444 }
   1445 .top-stories-bottom-container a {
   1446  color: var(--newtab-primary-action-background);
   1447  font-weight: var(--font-weight-semibold);
   1448 }
   1449 .top-stories-bottom-container a.more-recommendations {
   1450  font-weight: var(--font-weight);
   1451  font-size: var(--font-size-small);
   1452 }
   1453 @media (max-width: 865px) {
   1454  .top-stories-bottom-container .wrapper-topics {
   1455    display: none;
   1456  }
   1457 }
   1458 @media (max-width: 609px) {
   1459  .top-stories-bottom-container .wrapper-more-recommendations {
   1460    width: 100%;
   1461  }
   1462  .top-stories-bottom-container .wrapper-more-recommendations .more-recommendations {
   1463    justify-content: center;
   1464  }
   1465  .top-stories-bottom-container .wrapper-more-recommendations .more-recommendations::after {
   1466    display: none;
   1467  }
   1468 }
   1469 
   1470 @media (min-width: 1122px) {
   1471  .sections-list .normal-cards .section-list {
   1472    grid-template-columns: repeat(auto-fit, 309px);
   1473  }
   1474 }
   1475 /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */
   1476 /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */
   1477 .search-wrapper {
   1478  padding: 0;
   1479  margin-block: var(--space-xxlarge);
   1480  margin-block-start: 0;
   1481  /**
   1482   * @backward-compat { version 148 }
   1483   *
   1484   * Temporary dual implementation to support train hopping. The old handoff UI
   1485   * is kept alongside the new contentSearchHandoffUI.mjs custom element until
   1486   * the module lands on all channels. Controlled by the pref
   1487   * browser.newtabpage.activity-stream.search.useHandoffComponent.
   1488   * Remove the old implementation and the pref once this ships to Release.
   1489   */
   1490  /**
   1491   * @backward-compat { version 148 }
   1492   *
   1493   * Temporary dual implementation to support train hopping. The old handoff UI
   1494   * is kept alongside the new contentSearchHandoffUI.mjs custom element until
   1495   * the module lands on all channels. Controlled by the pref
   1496   * browser.newtabpage.activity-stream.search.useHandoffComponent.
   1497   * Remove the old implementation and the pref once this ships to Release.
   1498   */
   1499  /**
   1500   * @backward-compat { version 148 }
   1501   *
   1502   * Temporary dual implementation to support train hopping. The old handoff UI
   1503   * is kept alongside the new contentSearchHandoffUI.mjs custom element until
   1504   * the module lands on all channels. Controlled by the pref
   1505   * browser.newtabpage.activity-stream.search.useHandoffComponent.
   1506   * Remove the old implementation and the pref once this ships to Release.
   1507   */
   1508 }
   1509 .search-wrapper .logo-and-wordmark {
   1510  margin-block-end: var(--space-xxlarge);
   1511 }
   1512 .search-wrapper .logo-and-wordmark-wrapper {
   1513  margin-block-end: 0;
   1514 }
   1515 @media (height <= 700px) {
   1516  .search-wrapper {
   1517    padding: 0;
   1518    margin-block-start: 0;
   1519  }
   1520 }
   1521 @media (height > 700px) {
   1522  .search-wrapper {
   1523    padding: 0;
   1524  }
   1525 }
   1526 .only-search .search-wrapper {
   1527  padding-block-end: calc(var(--space-large) + var(--space-xlarge));
   1528 }
   1529 .search-wrapper .search-inner-wrapper {
   1530  cursor: default;
   1531  display: flex;
   1532  min-height: 52px;
   1533  margin: 0 auto;
   1534  position: relative;
   1535  width: 304px;
   1536 }
   1537 @media (min-width: 610px) {
   1538  .search-wrapper .search-inner-wrapper {
   1539    width: 360px;
   1540  }
   1541 }
   1542 @media (min-width: 866px) {
   1543  .search-wrapper .search-inner-wrapper {
   1544    width: 510px;
   1545  }
   1546 }
   1547 @media (min-width: 1122px) {
   1548  .search-wrapper .search-inner-wrapper {
   1549    width: 720px;
   1550  }
   1551 }
   1552 .search-wrapper .search-inner-wrapper:has(.trending-searches-pill-wrapper) {
   1553  display: flex;
   1554  flex-direction: column;
   1555 }
   1556 .search-wrapper .search-inner-wrapper:has(.trending-searches-pill-wrapper) .search-handoff-button {
   1557  height: 52px;
   1558 }
   1559 .search-wrapper .search-handoff-button {
   1560  background: var(--newtab-background-color-secondary) var(--newtab-search-icon) 16px center no-repeat;
   1561  background-size: 24px;
   1562  padding-inline-start: 52px;
   1563  padding-inline-end: var(--space-small);
   1564  padding-block: 0;
   1565  width: 100%;
   1566  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
   1567  border: 1px solid transparent;
   1568  border-radius: var(--border-radius-medium);
   1569  color: var(--newtab-text-primary-color);
   1570  -moz-context-properties: fill;
   1571  fill: var(--newtab-text-secondary-color);
   1572 }
   1573 .search-wrapper .search-handoff-button:dir(rtl) {
   1574  background-position-x: right 16px;
   1575 }
   1576 .search-wrapper.fake-focus:not(.search.disabled) .search-handoff-button {
   1577  border: 1px solid var(--newtab-primary-action-background);
   1578  box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed);
   1579 }
   1580 .search-wrapper .search-handoff-button {
   1581  padding-inline-end: var(--space-large);
   1582  color: var(--newtab-text-primary-color);
   1583  fill: var(--newtab-text-secondary-color);
   1584  -moz-context-properties: fill;
   1585 }
   1586 .search-wrapper .search-handoff-button .fake-caret {
   1587  inset-block-start: var(--space-large);
   1588  inset-inline-start: 52px;
   1589 }
   1590 .search-wrapper .search-handoff-button .fake-caret:dir(rtl) {
   1591  background-position-x: right 16px;
   1592 }
   1593 .search-wrapper content-search-handoff-ui {
   1594  --content-search-handoff-ui-background-color: var(--newtab-background-color-secondary);
   1595  --content-search-handoff-ui-color: var(--newtab-text-primary-color);
   1596  --content-search-handoff-ui-fill: var(--newtab-text-secondary-color);
   1597  --content-search-handoff-ui-caret-color: var(--newtab-text-primary-color);
   1598  --content-search-handoff-ui-fakefocus-border-color: var(--newtab-primary-action-background);
   1599  --content-search-handoff-ui-fakefocus-box-shadow-inner: var(--newtab-primary-action-background-dimmed);
   1600  --content-search-handoff-ui-fakefocus-box-shadow-outer: transparent;
   1601 }
   1602 .search-wrapper.visible-logo .logo-and-wordmark .wordmark {
   1603  fill: var(--newtab-wordmark-color);
   1604 }
   1605 
   1606 .has-recommended-stories .outer-wrapper:not(.fixed-search) .search-wrapper {
   1607  margin-block-start: var(--space-large);
   1608 }
   1609 .has-recommended-stories .logo-and-wordmark {
   1610  position: absolute;
   1611  inset-inline-start: var(--space-xxlarge);
   1612  inset-block-start: var(--space-xxlarge);
   1613 }
   1614 @media (min-width: 724px) {
   1615  .has-recommended-stories .logo-and-wordmark {
   1616    inset-inline-start: var(--space-large);
   1617  }
   1618 }
   1619 @media (min-width: 866px) {
   1620  .has-recommended-stories .logo-and-wordmark {
   1621    inset-inline-start: var(--space-xxlarge);
   1622  }
   1623 }
   1624 .has-recommended-stories.no-search .body-wrapper {
   1625  margin-block-start: 0;
   1626 }
   1627 @media (min-width: 866px) {
   1628  .has-recommended-stories.no-search .body-wrapper {
   1629    margin-block-start: calc(var(--space-xlarge) * 4);
   1630  }
   1631 }
   1632 @media (min-width: 1698px) {
   1633  .has-recommended-stories.no-search .body-wrapper {
   1634    margin-block-start: 0;
   1635  }
   1636 }
   1637 .has-recommended-stories.no-search.has-sections-grid .body-wrapper {
   1638  margin-block-start: calc(var(--space-xlarge) * 4);
   1639 }
   1640 .has-recommended-stories.no-search.has-sections-grid .logo-and-wordmark {
   1641  inset-inline-start: var(--space-large);
   1642 }
   1643 @media (min-width: 510px) {
   1644  .has-recommended-stories.no-search.has-sections-grid .logo-and-wordmark {
   1645    inset-inline-start: var(--space-xxlarge);
   1646  }
   1647 }
   1648 @media (min-width: 724px) {
   1649  .has-recommended-stories.no-search.has-sections-grid .logo-and-wordmark {
   1650    inset-inline-start: var(--space-large);
   1651  }
   1652 }
   1653 @media (min-width: 866px) {
   1654  .has-recommended-stories.no-search.has-sections-grid .logo-and-wordmark {
   1655    inset-inline-start: var(--space-xxlarge);
   1656  }
   1657 }
   1658 .has-recommended-stories .search-inner-wrapper {
   1659  width: 200px;
   1660 }
   1661 @media (min-width: 510px) {
   1662  .has-recommended-stories .search-inner-wrapper {
   1663    width: 300px;
   1664  }
   1665 }
   1666 @media (min-width: 610px) {
   1667  .has-recommended-stories .search-inner-wrapper {
   1668    width: 350px;
   1669  }
   1670 }
   1671 @media (min-width: 866px) {
   1672  .has-recommended-stories .search-inner-wrapper {
   1673    width: 410px;
   1674  }
   1675 }
   1676 @media (min-width: 1122px) {
   1677  .has-recommended-stories .search-inner-wrapper {
   1678    width: 584px;
   1679  }
   1680 }
   1681 @media (min-width: 1506px) {
   1682  .has-recommended-stories .search-inner-wrapper {
   1683    width: 720px;
   1684  }
   1685 }
   1686 @media (min-width: 1122px) {
   1687  .has-recommended-stories.has-mobile-download-promo .search-inner-wrapper {
   1688    width: 497px;
   1689  }
   1690 }
   1691 @media (min-width: 1506px) {
   1692  .has-recommended-stories.has-mobile-download-promo .search-inner-wrapper {
   1693    width: 720px;
   1694  }
   1695 }
   1696 .has-recommended-stories .logo {
   1697  width: 52px;
   1698  height: 52px;
   1699  background-size: 52px;
   1700 }
   1701 .has-recommended-stories .wordmark {
   1702  display: none;
   1703  height: 52px;
   1704 }
   1705 @media (min-width: 866px) {
   1706  .has-recommended-stories .wordmark {
   1707    display: block;
   1708  }
   1709 }
   1710 
   1711 .search-handoff-button {
   1712  background: var(--newtab-background-color-secondary) var(--newtab-search-icon) 16px center no-repeat;
   1713  background-size: 24px;
   1714  border: solid 1px transparent;
   1715  border-radius: var(--border-radius-small);
   1716  box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15);
   1717  cursor: text;
   1718  font-size: inherit;
   1719  padding: 0;
   1720  padding-inline: calc(var(--space-xlarge) * 2);
   1721  opacity: 1;
   1722  width: 100%;
   1723 }
   1724 .search-handoff-button:dir(rtl) {
   1725  background-position-x: right 16px;
   1726 }
   1727 .fake-focus:not(.search-disabled) .search-handoff-button {
   1728  border: 1px solid var(--border-color-interactive);
   1729  box-shadow: var(--newtab-textbox-focus-boxshadow);
   1730 }
   1731 .fake-focus:not(.search-disabled) .search-handoff-button .fake-caret {
   1732  display: block;
   1733 }
   1734 .search-disabled .search-handoff-button {
   1735  opacity: 0.5;
   1736  box-shadow: none;
   1737 }
   1738 .search-handoff-button .fake-editable:focus {
   1739  outline: none;
   1740  caret-color: transparent;
   1741 }
   1742 .search-handoff-button .fake-editable {
   1743  color: transparent;
   1744  height: 100%;
   1745  opacity: 0;
   1746  position: absolute;
   1747  inset: 0;
   1748 }
   1749 .search-handoff-button .fake-textbox {
   1750  opacity: 0.54;
   1751  text-align: start;
   1752  -webkit-line-clamp: 1;
   1753  overflow: hidden;
   1754 }
   1755 .search-handoff-button .fake-caret {
   1756  /* To replicate the default caret blink rate of 567ms (https://searchfox.org/mozilla-central/source/widget/cocoa/nsLookAndFeel.mm#397):
   1757   - Multiply the blink time by 2 to cover both the visible and hidden states.
   1758   - Use steps(2, start) to divide the animation into 2 phases:
   1759     1. First 567ms (Step 1) → Caret is visible
   1760     2. Next 567ms (Step 2) → Caret is hidden
   1761  This gives a sharp ON/OFF effect instead of a smooth transition. */
   1762  animation: caret-animation var(--caret-blink-time, 1134ms) steps(2, start) var(--caret-blink-count, infinite);
   1763  background: var(--newtab-text-primary-color);
   1764  display: none;
   1765  inset-inline-start: calc(var(--space-xlarge) * 2);
   1766  height: 17px;
   1767  position: absolute;
   1768  inset-block-start: var(--space-large);
   1769  width: 1px;
   1770 }
   1771 @keyframes caret-animation {
   1772  to {
   1773    visibility: hidden;
   1774  }
   1775 }
   1776 
   1777 @media (height > 700px) {
   1778  .activity-stream .fixed-search .search-wrapper {
   1779    border-block-end: solid 1px var(--border-color);
   1780    padding: var(--space-xlarge) 0;
   1781    background-color: var(--newtab-overlay-color);
   1782    min-height: 95px;
   1783    inset-inline-start: 0;
   1784    position: fixed;
   1785    inset-block-start: 0;
   1786    width: 100%;
   1787    z-index: 3;
   1788    display: flex;
   1789    align-items: center;
   1790  }
   1791  .activity-stream .fixed-search .search-wrapper .search-inner-wrapper {
   1792    min-height: 52px;
   1793  }
   1794  .activity-stream .fixed-search .search-wrapper .search-handoff-button .fake-caret {
   1795    inset-block-start: var(--space-large);
   1796  }
   1797  .activity-stream .fixed-search .search-wrapper .logo-and-wordmark {
   1798    display: none;
   1799  }
   1800  .activity-stream .fixed-search .search-handoff-button {
   1801    background-position-x: var(--space-large);
   1802    background-size: 24px;
   1803  }
   1804  .activity-stream .fixed-search .search-handoff-button:dir(rtl) {
   1805    background-position-x: right var(--space-large);
   1806  }
   1807  .activity-stream .fixed-search .search-handoff-button .fake-caret {
   1808    inset-block-start: var(--space-small);
   1809  }
   1810 }
   1811 /* stylelint-disable max-nesting-depth */
   1812 .context-menu {
   1813  background: var(--newtab-background-color-secondary);
   1814  border-radius: var(--border-radius-small);
   1815  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.2);
   1816  display: block;
   1817  font-size: inherit;
   1818  margin-inline-start: var(--space-xsmall);
   1819  inset-inline-start: 100%;
   1820  position: absolute;
   1821  inset-block-start: var(--space-small);
   1822  z-index: 2;
   1823 }
   1824 .context-menu > ul {
   1825  list-style: none;
   1826  margin: 0;
   1827  padding: var(--space-xsmall) 0;
   1828 }
   1829 .context-menu > ul > li {
   1830  margin: 0;
   1831  width: 100%;
   1832 }
   1833 .context-menu > ul > li.separator {
   1834  border-block-end: 1px solid var(--border-color);
   1835  margin: var(--space-xsmall) 0;
   1836 }
   1837 .context-menu > ul > li > a,
   1838 .context-menu > ul > li > button {
   1839  align-items: center;
   1840  color: inherit;
   1841  cursor: pointer;
   1842  display: flex;
   1843  width: 100%;
   1844  outline: none;
   1845  border: 0;
   1846  padding: var(--space-xsmall) var(--space-medium);
   1847  white-space: nowrap;
   1848 }
   1849 .context-menu > ul > li > a:is(:focus, :hover),
   1850 .context-menu > ul > li > button:is(:focus, :hover) {
   1851  background: var(--newtab-element-secondary-hover-color);
   1852 }
   1853 .context-menu > ul > li > a:active,
   1854 .context-menu > ul > li > button:active {
   1855  background: var(--newtab-element-secondary-active-color);
   1856 }
   1857 .context-menu > ul > li > a.disabled,
   1858 .context-menu > ul > li > button.disabled {
   1859  opacity: 0.4;
   1860  pointer-events: none;
   1861 }
   1862 
   1863 .confirmation-dialog {
   1864  border: 1px solid var(--border-color);
   1865  border-radius: var(--border-radius-small);
   1866  padding: 0;
   1867  width: 400px;
   1868  box-shadow: var(--box-shadow-popup);
   1869  background: var(--newtab-background-color-secondary);
   1870 }
   1871 .confirmation-dialog::backdrop {
   1872  background: var(--newtab-overlay-color);
   1873 }
   1874 .confirmation-dialog section {
   1875  margin: 0;
   1876 }
   1877 .confirmation-dialog .modal-message {
   1878  display: flex;
   1879  padding: var(--space-large);
   1880  padding-block-end: 0;
   1881 }
   1882 .confirmation-dialog .modal-message p {
   1883  margin: 0;
   1884  margin-block-end: var(--space-large);
   1885 }
   1886 .confirmation-dialog .button-group {
   1887  border: 0;
   1888  padding: var(--space-large);
   1889 }
   1890 .confirmation-dialog .icon {
   1891  margin-inline-end: var(--space-large);
   1892 }
   1893 
   1894 .personalizeButtonWrapper {
   1895  margin: 0;
   1896  padding: 0;
   1897  z-index: 5;
   1898  position: fixed;
   1899  inset-block-end: var(--space-xlarge);
   1900  inset-inline-end: var(--space-xlarge);
   1901 }
   1902 
   1903 .personalize-button {
   1904  border: 0;
   1905  border-radius: var(--border-radius-small);
   1906  background-color: var(--button-background-color, rgba(21, 20, 26, 0.07));
   1907  box-shadow: 0 0.8px 1.6px 0 rgba(58, 57, 68, 0.2);
   1908  padding: calc(5 * var(--space-xxsmall));
   1909  position: relative;
   1910  background-size: var(--icon-size-medium);
   1911  background-position: center;
   1912  display: flex;
   1913  align-items: center;
   1914  overflow: hidden;
   1915  transition: background-color 0.3s ease;
   1916 }
   1917 .lightWallpaper .personalize-button, .darkWallpaper .personalize-button {
   1918  background-color: var(--newtab-weather-background-color);
   1919 }
   1920 @media (prefers-contrast) {
   1921  .lightWallpaper .personalize-button, .darkWallpaper .personalize-button {
   1922    background-color: var(--background-color-box);
   1923  }
   1924 }
   1925 .personalize-button:hover {
   1926  background-color: var(--newtab-button-static-hover-background);
   1927 }
   1928 .personalize-button:active {
   1929  background-color: var(--newtab-button-static-active-background);
   1930 }
   1931 .personalize-button:focus-visible {
   1932  border: 0;
   1933  outline: var(--focus-outline);
   1934  background-color: var(--newtab-button-static-active-background);
   1935 }
   1936 .personalize-button.personalize-animate-exit-done {
   1937  visibility: hidden;
   1938 }
   1939 .personalize-button > div {
   1940  width: var(--icon-size-medium);
   1941  height: var(--icon-size-medium);
   1942  display: flex;
   1943  align-items: center;
   1944  justify-content: center;
   1945  flex-shrink: 0;
   1946 }
   1947 .personalize-button > div > img {
   1948  -moz-context-properties: fill;
   1949  display: inline-block;
   1950  color: var(--icon-color);
   1951  fill: currentColor;
   1952  height: 100%;
   1953  object-fit: contain;
   1954  vertical-align: middle;
   1955  width: 100%;
   1956 }
   1957 .personalize-button > label {
   1958  margin-inline-end: 0;
   1959  opacity: 0;
   1960  white-space: nowrap;
   1961  overflow: hidden;
   1962  max-width: 0;
   1963  transition: opacity 0.3s ease, margin 0.3s ease, max-width 0.3s ease;
   1964 }
   1965 
   1966 .personalize-button:hover > label,
   1967 .personalize-button:focus-visible > label {
   1968  opacity: 1;
   1969  margin-inline-end: var(--space-medium);
   1970  max-width: 30ch;
   1971 }
   1972 
   1973 .customize-menu-animate-wrapper {
   1974  color: var(--newtab-text-primary-color);
   1975  background-color: var(--newtab-background-color-secondary);
   1976  width: 432px;
   1977  height: 100%;
   1978  display: none;
   1979  position: fixed;
   1980  inset-block: 0;
   1981  inset-inline-end: 0;
   1982  z-index: 1001;
   1983  padding-block: 0 var(--space-large);
   1984  padding-inline: var(--space-large);
   1985  transform: translateX(435px);
   1986  visibility: hidden;
   1987  cursor: default;
   1988 }
   1989 .customize-menu-animate-wrapper.customize-animate-enter, .customize-menu-animate-wrapper.customize-animate-exit, .customize-menu-animate-wrapper.customize-animate-enter-done, .customize-menu-animate-wrapper.customize-animate-exit-done {
   1990  display: block;
   1991 }
   1992 @media (prefers-reduced-motion: no-preference) {
   1993  .customize-menu-animate-wrapper.customize-animate-enter, .customize-menu-animate-wrapper.customize-animate-exit, .customize-menu-animate-wrapper.customize-animate-enter-done, .customize-menu-animate-wrapper.customize-animate-exit-done {
   1994    transition: transform 250ms cubic-bezier(0.46, 0.03, 0.52, 0.96), visibility 250ms;
   1995  }
   1996 }
   1997 @media (forced-colors: active) {
   1998  .customize-menu-animate-wrapper {
   1999    border-inline-start: solid 1px;
   2000  }
   2001 }
   2002 .customize-menu-animate-wrapper:dir(rtl) {
   2003  transform: translateX(-435px);
   2004 }
   2005 .customize-menu-animate-wrapper.customize-animate-enter-done, .customize-menu-animate-wrapper.customize-animate-enter-active {
   2006  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
   2007  visibility: visible;
   2008  transform: translateX(0);
   2009 }
   2010 .customize-menu-animate-wrapper.customize-animate-exit-active {
   2011  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
   2012 }
   2013 
   2014 .customize-menu {
   2015  overflow: auto;
   2016  height: 100%;
   2017 }
   2018 .customize-menu.subpanel-open {
   2019  overflow: clip;
   2020 }
   2021 .customize-menu .close-button-wrapper {
   2022  position: sticky;
   2023  inset-block-start: 0;
   2024  padding-block-start: var(--space-large);
   2025  background-color: var(--newtab-background-color-secondary);
   2026  z-index: 1;
   2027 }
   2028 .customize-menu .close-button-wrapper moz-button {
   2029  margin-inline-start: auto;
   2030  margin-inline-end: var(--space-large);
   2031  display: block;
   2032 }
   2033 .customize-menu *:focus-visible {
   2034  outline: var(--focus-outline);
   2035 }
   2036 
   2037 .grid-skip {
   2038  display: contents;
   2039 }
   2040 
   2041 .home-section {
   2042  display: grid;
   2043  grid-template-columns: 1fr;
   2044  grid-template-rows: repeat(4, auto);
   2045  grid-row-gap: var(--space-xxlarge);
   2046  padding-block: var(--space-xsmall) var(--space-large);
   2047  padding-inline: var(--space-large);
   2048 }
   2049 .home-section .wallpapers-section h2 {
   2050  font-size: inherit;
   2051 }
   2052 .home-section .widgets-section h2 {
   2053  font-size: inherit;
   2054  margin-block-start: 0;
   2055  font-weight: var(--heading-font-weight);
   2056 }
   2057 .home-section .settings-widgets,
   2058 .home-section .settings-toggles {
   2059  display: flex;
   2060  flex-direction: column;
   2061  gap: var(--space-xlarge);
   2062 }
   2063 .home-section .settings-widgets {
   2064  gap: var(--space-large);
   2065 }
   2066 .home-section .settings-widgets .divider {
   2067  margin-block-start: var(--space-large);
   2068 }
   2069 .home-section [slot=nested] {
   2070  margin-block-start: 0;
   2071 }
   2072 .home-section .section .customize-menu-checkbox-label {
   2073  font-size: inherit;
   2074  margin-inline-start: var(--space-xsmall);
   2075 }
   2076 .home-section .section .check-wrapper {
   2077  position: relative;
   2078  display: flex;
   2079 }
   2080 .home-section .section .customize-menu-checkbox {
   2081  margin-inline-start: var(--space-xxsmall);
   2082  width: 16px;
   2083  height: 16px;
   2084  vertical-align: middle;
   2085  border: 1px solid rgba(0, 0, 0, 0.15);
   2086  box-sizing: border-box;
   2087  border-radius: var(--border-radius-small);
   2088  appearance: none;
   2089  background-color: var(--newtab-element-secondary-color);
   2090  flex-shrink: 0;
   2091 }
   2092 .home-section .section .customize-menu-checkbox:hover {
   2093  background-color: var(--newtab-element-secondary-hover-color);
   2094 }
   2095 .home-section .section .customize-menu-checkbox:checked {
   2096  -moz-context-properties: fill;
   2097  fill: var(--newtab-primary-element-text-color);
   2098  background: url("chrome://global/skin/icons/check.svg") center no-repeat;
   2099  background-color: var(--newtab-primary-action-background);
   2100 }
   2101 .home-section .section .customize-menu-checkbox:checked:hover {
   2102  background-color: var(--newtab-primary-element-hover-color);
   2103 }
   2104 .home-section .section .customize-menu-checkbox:checked:active {
   2105  background-color: var(--newtab-primary-element-active-color);
   2106 }
   2107 @media (forced-colors: active) {
   2108  .home-section .section .customize-menu-checkbox:checked {
   2109    fill: #000;
   2110  }
   2111 }
   2112 .home-section .section .customize-menu-checkbox:active + .checkmark {
   2113  fill: var(--newtab-element-secondary-color);
   2114 }
   2115 .home-section .section .selector {
   2116  color: var(--newtab-text-primary-color);
   2117  width: 118px;
   2118  display: block;
   2119  border: 1px solid var(--border-color);
   2120  border-radius: var(--border-radius-small);
   2121  appearance: none;
   2122  padding-block: var(--space-small);
   2123  padding-inline: var(--space-small) var(--space-medium);
   2124  margin-inline-start: var(--space-xxsmall);
   2125  margin-block-end: var(--space-xxsmall);
   2126  -moz-context-properties: fill;
   2127  fill: var(--newtab-text-primary-color);
   2128  background: url("chrome://global/skin/icons/arrow-down-12.svg") right no-repeat;
   2129  background-size: 8px;
   2130  background-origin: content-box;
   2131  background-color: var(--newtab-background-color-secondary);
   2132 }
   2133 .home-section .section .selector:hover {
   2134  background-color: var(--newtab-element-secondary-hover-color);
   2135 }
   2136 .home-section .section .selector:dir(rtl) {
   2137  background-position-x: left;
   2138 }
   2139 .home-section .section .more-info-top-wrapper,
   2140 .home-section .section .more-info-pocket-wrapper {
   2141  margin-inline-start: calc(var(--space-xxsmall) * -1);
   2142  overflow: hidden;
   2143 }
   2144 .home-section .section .more-info-top-wrapper .more-information,
   2145 .home-section .section .more-info-pocket-wrapper .more-information {
   2146  position: relative;
   2147  transition: margin-block-start 250ms cubic-bezier(0.82, 0.085, 0.395, 0.895);
   2148 }
   2149 .home-section .section .more-info-pocket-wrapper .more-information {
   2150  position: static;
   2151 }
   2152 .home-section .section .more-info-pocket-wrapper .check-wrapper {
   2153  margin-block-end: var(--space-small);
   2154 }
   2155 .home-section .section .more-info-pocket-wrapper:has(moz-box-button:focus-within) {
   2156  overflow: visible;
   2157 }
   2158 .home-section .section .more-info-top-wrapper .check-wrapper {
   2159  margin-block-start: var(--space-large);
   2160 }
   2161 .home-section .sponsored-content-info {
   2162  display: flex;
   2163  gap: var(--space-small);
   2164  font-size: var(--font-size-small);
   2165  border-radius: var(--border-radius-medium);
   2166  background-color: var(--newtab-element-secondary-color);
   2167  padding: var(--space-small) var(--space-large);
   2168 }
   2169 .home-section .sponsored-content-info .icon-help {
   2170  flex-shrink: 0;
   2171  color: var(--color-accent-primary);
   2172  height: 20px;
   2173 }
   2174 .home-section .sponsored-content-info a {
   2175  color: var(--newtab-primary-action-background);
   2176 }
   2177 .home-section .divider {
   2178  border-block-start: 1px var(--border-color) solid;
   2179  margin: 0 calc(var(--space-large) * -1);
   2180 }
   2181 .home-section .external-link {
   2182  -moz-context-properties: fill;
   2183  background: url("chrome://global/skin/icons/settings.svg") left no-repeat;
   2184  background-size: 16px;
   2185  border: 1px solid transparent;
   2186  border-radius: var(--border-radius-small);
   2187  color: var(--link-color);
   2188  cursor: pointer;
   2189  fill: var(--link-color);
   2190  font-size: var(--font-size-small);
   2191  margin-block-end: var(--space-large);
   2192  padding-inline-start: var(--space-xlarge);
   2193  text-decoration: underline;
   2194 }
   2195 .home-section .external-link:hover {
   2196  color: var(--link-color-hover);
   2197  text-decoration: none;
   2198 }
   2199 .home-section .external-link:active {
   2200  color: var(--link-color-active);
   2201 }
   2202 @media (forced-colors: active) {
   2203  .home-section .external-link {
   2204    padding: var(--space-small) var(--space-medium);
   2205    padding-inline-start: var(--space-xlarge);
   2206  }
   2207 }
   2208 .home-section .external-link:dir(rtl) {
   2209  background-position-x: right;
   2210 }
   2211 .home-section .external-link:hover {
   2212  text-decoration: none;
   2213 }
   2214 
   2215 .external-link:focus-visible,
   2216 .close-button:focus-visible {
   2217  border: 1px solid var(--newtab-primary-action-background);
   2218  outline: 0;
   2219  box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed);
   2220 }
   2221 
   2222 .home-section .section .customize-menu-checkbox, .home-section .section .selector {
   2223  outline: 0;
   2224  box-shadow: 0 0 0 2px light-dark(var(--newtab-background-color), var(--newtab-background-color-dark));
   2225 }
   2226 
   2227 .home-section .section .selector {
   2228  margin-block-start: var(--space-xxsmall);
   2229 }
   2230 
   2231 .home-section .section .customize-menu-checkbox:is(:focus-visible), .home-section .section .selector:is(:focus-visible) {
   2232  box-shadow: 0 0 0 2px var(--color-accent-primary);
   2233  outline: var(--focus-outline);
   2234 }
   2235 .home-section .section .customize-menu-checkbox:is(:active), .home-section .section .selector:is(:active) {
   2236  box-shadow: 0 0 0 2px var(--color-accent-primary-active);
   2237  outline: 0;
   2238 }
   2239 
   2240 .sections-mgmt-panel {
   2241  height: 100%;
   2242  inset-inline-start: var(--space-xlarge);
   2243  position: absolute;
   2244  inset-block-start: 0;
   2245  width: 380px;
   2246  z-index: 2;
   2247  transform: translateX(100%);
   2248  margin-block: var(--space-large) 0;
   2249  padding: 0;
   2250  background-color: var(--newtab-background-color-secondary);
   2251  overflow-y: auto;
   2252 }
   2253 .sections-mgmt-panel:dir(rtl) {
   2254  transform: translateX(-100%);
   2255 }
   2256 @media (prefers-reduced-motion: no-preference) {
   2257  .sections-mgmt-panel.sections-mgmt-panel-enter, .sections-mgmt-panel.sections-mgmt-panel-exit, .sections-mgmt-panel.sections-mgmt-panel-enter-done, .sections-mgmt-panel.sections-mgmt-panel-exit-done {
   2258    transition: transform 300ms;
   2259  }
   2260 }
   2261 .sections-mgmt-panel.sections-mgmt-panel-enter-done, .sections-mgmt-panel.sections-mgmt-panel-enter-active {
   2262  transform: translateX(0);
   2263 }
   2264 .sections-mgmt-panel h3 {
   2265  font-size: inherit;
   2266  margin-block: 0 var(--space-small);
   2267 }
   2268 .sections-mgmt-panel .topic-list {
   2269  list-style: none;
   2270  display: flex;
   2271  flex-direction: column;
   2272  gap: var(--space-small);
   2273  margin-block: 0 var(--space-xxlarge);
   2274  padding-inline: 0;
   2275  width: 100%;
   2276 }
   2277 .sections-mgmt-panel .topic-list li {
   2278  display: flex;
   2279  justify-content: space-between;
   2280  align-items: center;
   2281 }
   2282 .sections-mgmt-panel .topic-list-empty-state {
   2283  display: block;
   2284  margin-block-end: var(--space-xxlarge);
   2285  color: var(--text-color-deemphasized);
   2286 }
   2287 .sections-mgmt-panel .arrow-button {
   2288  background: url("chrome://global/skin/icons/arrow-left.svg") no-repeat left center;
   2289  border: none;
   2290  cursor: pointer;
   2291  margin-block-end: var(--space-xlarge);
   2292  padding-inline-start: var(--space-xlarge);
   2293  -moz-context-properties: fill;
   2294  fill: currentColor;
   2295  min-height: var(--size-item-small);
   2296  margin-inline-start: var(--space-xsmall);
   2297  margin-block-start: var(--space-xsmall);
   2298 }
   2299 .sections-mgmt-panel .arrow-button:dir(rtl) {
   2300  background: url("chrome://global/skin/icons/arrow-right.svg") no-repeat right center;
   2301 }
   2302 .sections-mgmt-panel .arrow-button h1 {
   2303  font-size: var(--font-size-root);
   2304  margin-block: 0;
   2305  font-weight: var(--button-font-weight);
   2306 }
   2307 .sections-mgmt-panel .section-block .section-button-blocked-text,
   2308 .sections-mgmt-panel .section-block .section-button-following-text,
   2309 .sections-mgmt-panel .section-follow .section-button-blocked-text,
   2310 .sections-mgmt-panel .section-follow .section-button-following-text {
   2311  display: none;
   2312 }
   2313 .sections-mgmt-panel .section-block .section-button-unblock-text,
   2314 .sections-mgmt-panel .section-block .section-button-unfollow-text,
   2315 .sections-mgmt-panel .section-follow .section-button-unblock-text,
   2316 .sections-mgmt-panel .section-follow .section-button-unfollow-text {
   2317  display: none;
   2318 }
   2319 .sections-mgmt-panel .section-block.following .section-button-follow-text,
   2320 .sections-mgmt-panel .section-follow.following .section-button-follow-text {
   2321  display: none;
   2322 }
   2323 .sections-mgmt-panel .section-block.following .section-button-following-text,
   2324 .sections-mgmt-panel .section-follow.following .section-button-following-text {
   2325  display: block;
   2326 }
   2327 .sections-mgmt-panel .section-block.following:not(:hover) moz-button,
   2328 .sections-mgmt-panel .section-follow.following:not(:hover) moz-button {
   2329  --button-background-color-destructive: var(--button-background-color);
   2330  --button-text-color-destructive: var(--button-text-color);
   2331  --button-border-color-destructive: var(--button-border-color);
   2332 }
   2333 .sections-mgmt-panel .section-block.following:hover .section-button-following-text,
   2334 .sections-mgmt-panel .section-follow.following:hover .section-button-following-text {
   2335  display: none;
   2336 }
   2337 .sections-mgmt-panel .section-block.following:hover .section-button-unfollow-text,
   2338 .sections-mgmt-panel .section-follow.following:hover .section-button-unfollow-text {
   2339  display: block;
   2340 }
   2341 .sections-mgmt-panel .section-block.blocked .section-button-block-text,
   2342 .sections-mgmt-panel .section-follow.blocked .section-button-block-text {
   2343  display: none;
   2344 }
   2345 .sections-mgmt-panel .section-block.blocked .section-button-blocked-text,
   2346 .sections-mgmt-panel .section-follow.blocked .section-button-blocked-text {
   2347  display: block;
   2348 }
   2349 .sections-mgmt-panel .section-block.blocked:hover .section-button-blocked-text,
   2350 .sections-mgmt-panel .section-follow.blocked:hover .section-button-blocked-text {
   2351  display: none;
   2352 }
   2353 .sections-mgmt-panel .section-block.blocked:hover .section-button-unblock-text,
   2354 .sections-mgmt-panel .section-follow.blocked:hover .section-button-unblock-text {
   2355  display: block;
   2356 }
   2357 
   2358 .category-list {
   2359  border: none;
   2360  display: grid;
   2361  gap: calc(var(--space-xlarge) * 2) var(--space-large);
   2362  grid-auto-rows: 86px;
   2363  grid-template-columns: 1fr 1fr 1fr;
   2364  margin-block-end: var(--space-large);
   2365  padding: 0;
   2366 }
   2367 .category-list label {
   2368  display: inline-block;
   2369  font-size: var(--font-size-small);
   2370  text-align: center;
   2371  width: 100%;
   2372 }
   2373 
   2374 .category-header {
   2375  display: flex;
   2376  justify-content: space-between;
   2377 }
   2378 .category-header .wallpapers-reset {
   2379  margin: unset;
   2380 }
   2381 
   2382 .arrow-button {
   2383  background: url("chrome://global/skin/icons/arrow-left.svg") no-repeat left center;
   2384  border: none;
   2385  cursor: pointer;
   2386  margin-block-end: var(--space-xlarge);
   2387  padding-inline-start: var(--space-xlarge);
   2388  -moz-context-properties: fill;
   2389  fill: currentColor;
   2390  min-height: 1rem;
   2391  margin-inline-start: var(--space-xsmall);
   2392  margin-block-start: var(--space-xsmall);
   2393 }
   2394 .arrow-button:dir(rtl) {
   2395  background: url("chrome://global/skin/icons/arrow-right.svg") no-repeat right center;
   2396 }
   2397 
   2398 .wallpaper-input {
   2399  appearance: none;
   2400  background-clip: content-box;
   2401  background-repeat: no-repeat;
   2402  background-size: cover;
   2403  border-radius: var(--border-radius-medium);
   2404  border: none;
   2405  box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2);
   2406  cursor: pointer;
   2407  height: 86px;
   2408  margin: 0;
   2409  outline: 2px solid transparent;
   2410  padding: 0;
   2411  width: 100%;
   2412 }
   2413 .wallpaper-input:checked, .wallpaper-input.selected {
   2414  box-shadow: inset 0 0 0 3px var(--color-accent-primary);
   2415 }
   2416 .wallpaper-input.theme-custom-wallpaper {
   2417  border: 2px dashed var(--border-color-default, #CFCFD8);
   2418  box-shadow: none;
   2419  position: relative;
   2420 }
   2421 .wallpaper-input.theme-custom-wallpaper::after {
   2422  content: "";
   2423  -moz-context-properties: fill;
   2424  fill: var(--icon-color);
   2425  width: calc(var(--icon-size) * 1.25);
   2426  height: calc(var(--icon-size) * 1.25);
   2427  display: block;
   2428  position: absolute;
   2429  inset-block-start: 50%;
   2430  inset-inline-start: 50%;
   2431  transform: translate(-50%, -50%);
   2432 }
   2433 .wallpaper-input.theme-custom-wallpaper:focus {
   2434  outline-color: var(--focus-outline-color);
   2435  outline-offset: var(--focus-outline-offset);
   2436 }
   2437 .wallpaper-input.theme-custom-wallpaper::after {
   2438  background: url("chrome://global/skin/icons/plus-20.svg") center no-repeat;
   2439 }
   2440 .wallpaper-input.dark-landscape {
   2441  background-image: url("chrome://newtab/content/data/content/assets/wallpapers/dark-landscape.avif");
   2442 }
   2443 .wallpaper-input.dark-color {
   2444  background-image: url("chrome://newtab/content/data/content/assets/wallpapers/dark-color.avif");
   2445 }
   2446 .wallpaper-input.dark-mountain {
   2447  background-image: url("chrome://newtab/content/data/content/assets/wallpapers/dark-mountain.avif");
   2448 }
   2449 .wallpaper-input.dark-panda {
   2450  background-image: url("chrome://newtab/content/data/content/assets/wallpapers/dark-panda.avif");
   2451 }
   2452 .wallpaper-input.dark-sky {
   2453  background-image: url("chrome://newtab/content/data/content/assets/wallpapers/dark-sky.avif");
   2454 }
   2455 .wallpaper-input.dark-beach {
   2456  background-image: url("chrome://newtab/content/data/content/assets/wallpapers/dark-beach.avif");
   2457 }
   2458 .wallpaper-input.light-beach {
   2459  background-image: url("chrome://newtab/content/data/content/assets/wallpapers/light-beach.avif");
   2460 }
   2461 .wallpaper-input.light-color {
   2462  background-image: url("chrome://newtab/content/data/content/assets/wallpapers/light-color.avif");
   2463 }
   2464 .wallpaper-input.light-landscape {
   2465  background-image: url("chrome://newtab/content/data/content/assets/wallpapers/light-landscape.avif");
   2466 }
   2467 .wallpaper-input.light-mountain {
   2468  background-image: url("chrome://newtab/content/data/content/assets/wallpapers/light-mountain.avif");
   2469 }
   2470 .wallpaper-input.light-panda {
   2471  background-image: url("chrome://newtab/content/data/content/assets/wallpapers/light-panda.avif");
   2472 }
   2473 .wallpaper-input.light-sky {
   2474  background-image: url("chrome://newtab/content/data/content/assets/wallpapers/light-sky.avif");
   2475 }
   2476 .wallpaper-input:focus-visible {
   2477  outline-offset: var(--focus-outline-offset);
   2478 }
   2479 .wallpaper-input:hover {
   2480  filter: brightness(55%);
   2481  outline-color: transparent;
   2482 }
   2483 
   2484 .theme-custom-color-picker {
   2485  background-color: var(--newtab-background-color-secondary);
   2486  background-clip: content-box;
   2487  border-radius: var(--border-radius-medium);
   2488  outline: 2px dashed var(--border-color-default, #CFCFD8);
   2489  outline-offset: 2px;
   2490  position: relative;
   2491 }
   2492 .theme-custom-color-picker .wallpaper-input {
   2493  box-shadow: none;
   2494 }
   2495 .theme-custom-color-picker .wallpaper-input:focus {
   2496  outline-color: var(--focus-outline-color);
   2497  outline-offset: 6px;
   2498 }
   2499 .theme-custom-color-picker.default-color-set #solid-color-picker {
   2500  opacity: 0;
   2501 }
   2502 @media (prefers-color-scheme: dark) {
   2503  .theme-custom-color-picker.default-color-set::after {
   2504    color-scheme: dark;
   2505  }
   2506 }
   2507 .theme-custom-color-picker.custom-color-dark::after {
   2508  color-scheme: dark;
   2509 }
   2510 .theme-custom-color-picker.is-dark::after {
   2511  color-scheme: dark;
   2512 }
   2513 @media (prefers-color-scheme: dark) {
   2514  .theme-custom-color-picker.is-dark::after {
   2515    color: #FBFBFE;
   2516  }
   2517 }
   2518 .theme-custom-color-picker::after {
   2519  background: url("chrome://global/skin/icons/color-picker-20.svg") center no-repeat;
   2520  content: "";
   2521  -moz-context-properties: fill;
   2522  fill: var(--icon-color);
   2523  width: calc(var(--icon-size) * 1.25);
   2524  height: calc(var(--icon-size) * 1.25);
   2525  display: block;
   2526  position: absolute;
   2527  inset-block-start: 50%;
   2528  inset-inline-start: 50%;
   2529  transform: translate(-50%, -50%);
   2530  pointer-events: none;
   2531  cursor: pointer;
   2532  color-scheme: light;
   2533 }
   2534 .theme-custom-color-picker label {
   2535  display: inline-block;
   2536  font-size: var(--font-size-small);
   2537  text-align: center;
   2538  width: 100%;
   2539 }
   2540 .theme-custom-color-picker ::-moz-color-swatch {
   2541  border-color: transparent;
   2542  border-radius: var(--border-radius-medium);
   2543 }
   2544 
   2545 .wallpaper-list {
   2546  display: grid;
   2547  gap: var(--space-large);
   2548  grid-template-columns: 1fr 1fr 1fr;
   2549  grid-auto-rows: 86px;
   2550  margin: var(--space-large) 0;
   2551  padding: 0;
   2552  border: none;
   2553 }
   2554 .wallpaper-list.category {
   2555  --wallpaper-panel-width: 430px;
   2556  background-color: var(--newtab-background-color-secondary);
   2557  color: var(--newtab-text-primary-color);
   2558  display: unset;
   2559  gap: unset;
   2560  grid-auto-rows: unset;
   2561  grid-template-columns: unset;
   2562  height: 100%;
   2563  padding: var(--space-xlarge);
   2564  position: absolute;
   2565  inset-block-start: 0;
   2566  inset-inline-start: 100%;
   2567  width: var(--wallpaper-panel-width);
   2568  z-index: 2;
   2569  overflow-y: auto;
   2570 }
   2571 .wallpaper-list.category fieldset {
   2572  border: none;
   2573  display: grid;
   2574  gap: var(--space-large);
   2575  grid-auto-rows: 86px;
   2576  grid-template-columns: 1fr 1fr 1fr;
   2577 }
   2578 @media (prefers-reduced-motion: no-preference) {
   2579  .wallpaper-list.category.wallpaper-list-enter, .wallpaper-list.category.wallpaper-list-exit, .wallpaper-list.category.wallpaper-list-enter-done, .wallpaper-list.category.wallpaper-list-exit-done {
   2580    transition: inset-inline-start 300ms;
   2581  }
   2582 }
   2583 .wallpaper-list.category.wallpaper-list-enter-done, .wallpaper-list.category.wallpaper-list-enter-active {
   2584  inset-inline-start: calc(100% - var(--wallpaper-panel-width));
   2585 }
   2586 .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light {
   2587  display: inline-block;
   2588 }
   2589 [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light {
   2590  display: none;
   2591 }
   2592 .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark {
   2593  display: none;
   2594 }
   2595 [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark {
   2596  display: inline-block;
   2597 }
   2598 .wallpaper-list .sr-only {
   2599  opacity: 0;
   2600  overflow: hidden;
   2601  position: absolute;
   2602  pointer-events: none;
   2603 }
   2604 
   2605 .wallpapers-reset {
   2606  background: none;
   2607  border: none;
   2608  text-decoration: underline;
   2609  margin-inline: auto;
   2610  display: block;
   2611  font-size: var(--font-size-small);
   2612  color: var(--newtab-text-primary-color);
   2613  cursor: pointer;
   2614 }
   2615 .wallpapers-reset:hover {
   2616  text-decoration: none;
   2617 }
   2618 .wallpapers-reset:focus-visible {
   2619  outline-offset: -2px;
   2620 }
   2621 
   2622 .custom-wallpaper-error {
   2623  padding-block-start: var(--space-xlarge);
   2624  font-size: var(--font-size-small);
   2625  display: flex;
   2626  gap: var(--space-small);
   2627  align-items: center;
   2628 }
   2629 .custom-wallpaper-error .icon {
   2630  width: var(--button-size-icon-small);
   2631  height: var(--button-size-icon-small);
   2632  fill: var(--icon-color-critical);
   2633 }
   2634 
   2635 :root {
   2636  --newtab-weather-content-font-size: var(--font-size-small);
   2637  --newtab-weather-sponsor-font-size: 8px;
   2638 }
   2639 
   2640 .weather {
   2641  font-size: inherit;
   2642  display: inline-block;
   2643  margin-inline-start: 0;
   2644  position: absolute;
   2645  inset-inline-end: var(--space-xxlarge);
   2646  inset-block-start: var(--space-xxlarge);
   2647  margin-block-start: 0;
   2648  z-index: 1;
   2649 }
   2650 @media (min-width: 724px) {
   2651  .weather {
   2652    inset-inline-end: var(--space-large);
   2653  }
   2654 }
   2655 @media (min-width: 866px) {
   2656  .weather {
   2657    inset-inline-end: var(--space-xxlarge);
   2658  }
   2659 }
   2660 .weather.section-weather {
   2661  position: initial;
   2662  margin-inline-start: var(--space-medium);
   2663 }
   2664 .weather.section-weather .weatherInfoLink {
   2665  max-width: unset;
   2666 }
   2667 .no-search .weather {
   2668  position: absolute;
   2669  inset-block-start: var(--space-xxlarge);
   2670  margin-block-start: 0;
   2671  margin-inline-start: 0;
   2672  inset-inline-end: var(--space-large);
   2673 }
   2674 @media (min-width: 510px) {
   2675  .no-search .weather {
   2676    inset-inline-end: var(--space-xxlarge);
   2677  }
   2678 }
   2679 @media (min-width: 724px) {
   2680  .no-search .weather {
   2681    inset-inline-end: var(--space-large);
   2682  }
   2683 }
   2684 @media (min-width: 866px) {
   2685  .no-search .weather {
   2686    inset-inline-end: var(--space-xxlarge);
   2687  }
   2688 }
   2689 .weather .context-menu {
   2690  inset-inline-end: 100%;
   2691  inset-inline-start: auto;
   2692  margin-inline-end: var(--space-xsmall);
   2693 }
   2694 
   2695 .weather-placeholder {
   2696  width: 240px;
   2697  height: 98px;
   2698  padding: var(--space-small) var(--space-medium);
   2699  border-radius: var(--border-radius-medium);
   2700  background: var(--newtab-background-color-secondary);
   2701  display: flex;
   2702  overflow: hidden;
   2703 }
   2704 .weather-placeholder .placeholder-image {
   2705  height: 100%;
   2706  width: 80px;
   2707  margin-inline-end: var(--space-medium);
   2708  flex-shrink: 0;
   2709 }
   2710 .weather-placeholder .placeholder-context {
   2711  width: 100%;
   2712  display: flex;
   2713  flex-direction: column;
   2714 }
   2715 .weather-placeholder .placeholder-header {
   2716  height: 45px;
   2717  width: 100%;
   2718  margin-block-end: var(--space-small);
   2719 }
   2720 .weather-placeholder .placeholder-description {
   2721  flex-grow: 1;
   2722  width: 100%;
   2723 }
   2724 .weather-placeholder .placeholder-fill {
   2725  color: var(--newtab-text-primary-color);
   2726  background: var(--newtab-button-active-background);
   2727  border-radius: var(--border-radius-small);
   2728 }
   2729 .weather-placeholder.placeholder-seen::before {
   2730  content: "";
   2731  display: block;
   2732  position: absolute;
   2733  inset-block-start: 0;
   2734  inset-inline-start: -100%;
   2735  height: 100%;
   2736  width: 100%;
   2737  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--newtab-background-color-secondary) 50%, rgba(255, 255, 255, 0) 100%);
   2738  z-index: 2;
   2739 }
   2740 @media (prefers-reduced-motion: no-preference) {
   2741  .weather-placeholder.placeholder-seen::before {
   2742    animation: loading 1.5s infinite;
   2743  }
   2744 }
   2745 @keyframes loading {
   2746  0% {
   2747    inset-inline-start: -100%;
   2748  }
   2749  50%, 100% {
   2750    inset-inline-start: 100%;
   2751  }
   2752 }
   2753 
   2754 .has-mobile-download-promo {
   2755  --mobile-download-promo-width: var(--space-xxlarge);
   2756 }
   2757 @media (min-width: 610px) {
   2758  .has-mobile-download-promo .weather {
   2759    inset-inline-end: calc(var(--mobile-download-promo-width) + var(--space-medium));
   2760  }
   2761 }
   2762 @media (min-width: 724px) {
   2763  .has-mobile-download-promo .weather {
   2764    inset-inline-end: calc(var(--space-xxlarge) + var(--mobile-download-promo-width) + var(--space-medium));
   2765  }
   2766 }
   2767 @media (min-width: 866px) {
   2768  .has-mobile-download-promo.no-search .weather {
   2769    inset-inline-end: calc(var(--space-xxlarge) + var(--mobile-download-promo-width) + var(--space-medium));
   2770  }
   2771 }
   2772 
   2773 .has-weather.has-search .weatherDetailedSummaryRow {
   2774  display: block;
   2775 }
   2776 @media (min-width: 610px) {
   2777  .has-weather.has-search .weatherDetailedSummaryRow {
   2778    display: none;
   2779  }
   2780 }
   2781 @media (min-width: 866px) {
   2782  .has-weather.has-search .weatherDetailedSummaryRow {
   2783    display: block;
   2784  }
   2785 }
   2786 .has-weather.has-search .weatherIconCol {
   2787  display: flex;
   2788 }
   2789 @media (min-width: 610px) {
   2790  .has-weather.has-search .weatherIconCol {
   2791    display: none;
   2792  }
   2793 }
   2794 @media (min-width: 866px) {
   2795  .has-weather.has-search .weatherIconCol {
   2796    display: flex;
   2797  }
   2798 }
   2799 
   2800 .weatherNotAvailable {
   2801  font-size: var(--newtab-weather-content-font-size);
   2802  align-items: center;
   2803  border-radius: var(--border-radius-medium);
   2804  height: 52px;
   2805  max-width: 205px;
   2806  display: none;
   2807 }
   2808 @media (min-width: 866px) {
   2809  .weatherNotAvailable {
   2810    display: flex;
   2811  }
   2812 }
   2813 .weatherNotAvailable:hover {
   2814  background-color: var(--button-background-color-ghost-hover);
   2815 }
   2816 .weatherNotAvailable:active {
   2817  background-color: var(--button-background-color-ghost-active);
   2818 }
   2819 .weatherNotAvailable .icon {
   2820  margin-inline-start: var(--space-small);
   2821  min-width: var(--size-item-small);
   2822 }
   2823 .weatherNotAvailable p {
   2824  margin-inline-start: var(--space-small);
   2825 }
   2826 .weatherNotAvailable .weatherButtonContextMenuWrapper {
   2827  align-self: stretch;
   2828  padding-inline: var(--space-small);
   2829 }
   2830 .lightWallpaper .weatherNotAvailable, .darkWallpaper .weatherNotAvailable {
   2831  background-color: var(--newtab-weather-background-color);
   2832 }
   2833 @media (prefers-contrast) {
   2834  .lightWallpaper .weatherNotAvailable, .darkWallpaper .weatherNotAvailable {
   2835    background-color: var(--background-color-box);
   2836  }
   2837 }
   2838 
   2839 .weatherCard {
   2840  margin-block-end: var(--space-xsmall);
   2841  display: flex;
   2842  flex-wrap: nowrap;
   2843  align-items: stretch;
   2844  border-radius: var(--border-radius-medium);
   2845 }
   2846 .weatherCard:hover ~ .weatherSponsorText, .weatherCard:focus-within ~ .weatherSponsorText {
   2847  visibility: visible;
   2848 }
   2849 .weatherCard:has(.staticWeatherInfo):hover {
   2850  box-shadow: none;
   2851 }
   2852 .weatherCard:has(.staticWeatherInfo):hover ~ .weatherSponsorText {
   2853  visibility: hidden;
   2854 }
   2855 .weatherCard:hover {
   2856  box-shadow: var(--box-shadow-card);
   2857 }
   2858 .weatherCard a {
   2859  color: var(--text-color);
   2860 }
   2861 
   2862 .weatherSponsorText {
   2863  visibility: hidden;
   2864  font-size: var(--newtab-weather-sponsor-font-size);
   2865  color: var(--newtab-contextual-text-primary-color);
   2866  float: inline-end;
   2867 }
   2868 .lightWallpaper .weatherSponsorText {
   2869  color-scheme: light;
   2870 }
   2871 .darkWallpaper .weatherSponsorText {
   2872  color-scheme: dark;
   2873 }
   2874 .weatherSponsorText span {
   2875  color: var(--text-color-deemphasized);
   2876  inset-inline-end: 0;
   2877 }
   2878 
   2879 .weatherOptIn {
   2880  position: absolute;
   2881  inset-block-end: calc(var(--space-medium) * -1.5);
   2882  inset-inline-start: calc(var(--space-xxlarge) * -9);
   2883 }
   2884 .weatherOptIn dialog {
   2885  background: var(--newtab-background-color-secondary);
   2886  border: 1px solid var(--border-color-card);
   2887  border-radius: var(--border-radius-medium);
   2888  box-shadow: var(--box-shadow-card);
   2889  display: flex;
   2890  width: 332px;
   2891 }
   2892 .weatherOptIn dialog .weatherOptInImg {
   2893  -webkit-mask: url("chrome://browser/skin/weather/mostly-sunny.svg") no-repeat center;
   2894  mask: url("chrome://browser/skin/weather/mostly-sunny.svg") no-repeat center;
   2895  background-color: var(--button-icon-fill);
   2896  mask-size: cover;
   2897  margin-inline-end: var(--space-medium);
   2898  height: var(--icon-size-xlarge);
   2899  width: var(--icon-size-xlarge);
   2900 }
   2901 .weatherOptIn dialog:focus-visible {
   2902  outline: var(--focus-outline);
   2903 }
   2904 .weatherOptIn dialog:focus-visible::after {
   2905  border-block-end: var(--focus-outline);
   2906  border-inline-end: var(--focus-outline);
   2907 }
   2908 .weatherOptIn dialog .weatherOptInContent {
   2909  display: flex;
   2910  flex-direction: column;
   2911  justify-content: space-between;
   2912 }
   2913 .weatherOptIn dialog .weatherOptInContent h3 {
   2914  font-size: var(--button-font-size);
   2915  font-weight: var(--heading-font-weight);
   2916  margin-block: 0 var(--space-medium);
   2917 }
   2918 .weatherOptIn dialog .weatherOptInContent moz-button-group {
   2919  align-self: flex-end;
   2920 }
   2921 .weatherOptIn dialog .weatherOptInContent moz-button-group moz-button:first-of-type {
   2922  margin-inline-end: var(--space-small);
   2923 }
   2924 @media (min-width: 866px) {
   2925  .weatherOptIn {
   2926    inset-block-end: calc(var(--space-medium) * -1);
   2927    inset-inline-start: calc(var(--space-xxlarge) * -5.5);
   2928  }
   2929 }
   2930 
   2931 dialog::after {
   2932  content: "";
   2933  position: absolute;
   2934  inset-block-start: -9%;
   2935  inset-inline-end: 5%;
   2936  transform: translateX(-50%) rotate(225deg);
   2937  height: 16px;
   2938  width: 16px;
   2939  background: var(--newtab-background-color-secondary);
   2940  box-shadow: 4px 4px 6px -2px var(--box-shadow-card);
   2941  border-inline-end: 1px solid var(--border-color-card);
   2942  border-block-end: 1px solid var(--border-color-card);
   2943 }
   2944 dialog:dir(rtl)::after {
   2945  border-inline-start: 1px solid var(--border-color-card);
   2946  border-block-end: 1px solid var(--border-color-card);
   2947  border-inline-end: none;
   2948  inset-inline-end: 10%;
   2949 }
   2950 
   2951 .weatherInfoLink, .weatherButtonContextMenuWrapper {
   2952  appearance: none;
   2953  background-color: var(--background-color-ghost);
   2954  border: 0;
   2955  padding: var(--space-small);
   2956  cursor: pointer;
   2957 }
   2958 .weatherInfoLink:hover, .weatherButtonContextMenuWrapper:hover {
   2959  background-color: var(--newtab-background-color-secondary);
   2960 }
   2961 .weatherInfoLink:hover::after, .weatherButtonContextMenuWrapper:hover::after {
   2962  background-color: transparent;
   2963 }
   2964 .weatherInfoLink:hover:active, .weatherButtonContextMenuWrapper:hover:active {
   2965  background-color: var(--button-background-color-ghost-active);
   2966 }
   2967 .lightWallpaper .weatherInfoLink, .darkWallpaper .weatherInfoLink, .lightWallpaper .weatherButtonContextMenuWrapper, .darkWallpaper .weatherButtonContextMenuWrapper {
   2968  background-color: var(--newtab-weather-background-color);
   2969 }
   2970 .lightWallpaper .weatherInfoLink:hover, .darkWallpaper .weatherInfoLink:hover, .lightWallpaper .weatherButtonContextMenuWrapper:hover, .darkWallpaper .weatherButtonContextMenuWrapper:hover {
   2971  background-color: var(--newtab-button-static-hover-background);
   2972 }
   2973 .lightWallpaper .weatherInfoLink:hover:active, .darkWallpaper .weatherInfoLink:hover:active, .lightWallpaper .weatherButtonContextMenuWrapper:hover:active, .darkWallpaper .weatherButtonContextMenuWrapper:hover:active {
   2974  background-color: var(--newtab-button-static-active-background);
   2975 }
   2976 @media (prefers-contrast) {
   2977  .lightWallpaper .weatherInfoLink, .darkWallpaper .weatherInfoLink, .lightWallpaper .weatherButtonContextMenuWrapper, .darkWallpaper .weatherButtonContextMenuWrapper {
   2978    background-color: var(--background-color-box);
   2979  }
   2980 }
   2981 
   2982 .weatherInfoLink {
   2983  display: flex;
   2984  gap: var(--space-medium);
   2985  padding: var(--space-small) var(--space-medium);
   2986  border-start-start-radius: var(--border-radius-medium);
   2987  border-start-end-radius: 0;
   2988  border-end-end-radius: 0;
   2989  border-end-start-radius: var(--border-radius-medium);
   2990  text-decoration: none;
   2991  color: var(--text-color);
   2992  min-width: 130px;
   2993  max-width: 190px;
   2994  text-overflow: ellipsis;
   2995 }
   2996 @media (min-width: 610px) {
   2997  .weatherInfoLink {
   2998    min-width: unset;
   2999  }
   3000 }
   3001 .weatherInfoLink:hover ~ .weatherButtonContextMenuWrapper::after {
   3002  background-color: transparent;
   3003 }
   3004 .weatherInfoLink:focus-visible {
   3005  border-radius: var(--border-radius-medium);
   3006  outline: var(--focus-outline);
   3007  z-index: 1;
   3008 }
   3009 .weatherInfoLink:focus-visible ~ .weatherButtonContextMenuWrapper::after {
   3010  background-color: transparent;
   3011 }
   3012 
   3013 .weatherInfoLink.staticWeatherInfo .weatherIcon {
   3014  filter: opacity(60%);
   3015 }
   3016 .weatherInfoLink.staticWeatherInfo .weatherText {
   3017  color: var(--text-color-disabled);
   3018 }
   3019 .weatherInfoLink.staticWeatherInfo:hover, .weatherInfoLink.staticWeatherInfo:active {
   3020  box-shadow: none;
   3021  cursor: default;
   3022  background-color: var(--newtab-weather-background-color);
   3023 }
   3024 
   3025 .weatherButtonContextMenuWrapper {
   3026  position: relative;
   3027  cursor: pointer;
   3028  border-start-start-radius: 0;
   3029  border-start-end-radius: var(--border-radius-medium);
   3030  border-end-end-radius: var(--border-radius-medium);
   3031  border-end-start-radius: 0;
   3032  display: flex;
   3033  align-items: stretch;
   3034  width: 50px;
   3035  padding: 0;
   3036 }
   3037 .weatherButtonContextMenuWrapper::after {
   3038  content: "";
   3039  inset-inline-start: 0;
   3040  inset-block-start: var(--space-small);
   3041  height: calc(100% - 20px);
   3042  width: 1px;
   3043  background-color: var(--newtab-button-static-background);
   3044  display: block;
   3045  position: absolute;
   3046  z-index: 0;
   3047 }
   3048 .weatherButtonContextMenuWrapper:hover::after {
   3049  background-color: transparent;
   3050 }
   3051 .weatherButtonContextMenuWrapper:has(:focus-visible) {
   3052  border-radius: var(--border-radius-medium);
   3053  outline: var(--focus-outline);
   3054 }
   3055 .weatherButtonContextMenuWrapper:has(:focus-visible)::after {
   3056  background-color: transparent;
   3057 }
   3058 
   3059 .weatherButtonContextMenu {
   3060  background-image: url("chrome://global/skin/icons/more.svg");
   3061  background-repeat: no-repeat;
   3062  background-size: var(--size-item-small) auto;
   3063  background-position: center;
   3064  background-color: transparent;
   3065  cursor: pointer;
   3066  fill: var(--icon-color);
   3067  -moz-context-properties: fill;
   3068  width: 100%;
   3069  height: 100%;
   3070  border: 0;
   3071  appearance: none;
   3072  min-width: var(--size-item-large);
   3073 }
   3074 .weatherButtonContextMenu:focus {
   3075  outline: none;
   3076 }
   3077 
   3078 .weatherText {
   3079  height: min-content;
   3080 }
   3081 
   3082 .weatherCityRow, .weatherForecastRow, .weatherDetailedSummaryRow {
   3083  display: flex;
   3084  justify-content: space-between;
   3085  align-items: center;
   3086  gap: var(--space-small);
   3087 }
   3088 
   3089 .weatherForecastRow {
   3090  text-transform: uppercase;
   3091  font-weight: var(--font-weight-semibold);
   3092 }
   3093 
   3094 .weatherCityRow {
   3095  color: var(--text-color-deemphasized);
   3096 }
   3097 
   3098 .weatherCity {
   3099  -webkit-line-clamp: 1;
   3100  text-overflow: ellipsis;
   3101  overflow: hidden;
   3102  word-break: break-word;
   3103  font-size: var(--font-size-small);
   3104 }
   3105 
   3106 .weatherCityRow + .weatherDetailedSummaryRow {
   3107  margin-block-start: var(--space-xsmall);
   3108 }
   3109 
   3110 .weatherDetailedSummaryRow {
   3111  font-size: var(--newtab-weather-content-font-size);
   3112  gap: var(--space-large);
   3113 }
   3114 
   3115 .weatherHighLowTemps {
   3116  display: inline-flex;
   3117  gap: var(--space-xxsmall);
   3118  text-transform: uppercase;
   3119  word-spacing: var(--space-xxsmall);
   3120  margin-inline-end: var(--space-small);
   3121 }
   3122 
   3123 .weatherTextSummary {
   3124  display: inline;
   3125  text-align: center;
   3126  max-width: 90px;
   3127 }
   3128 
   3129 .weatherTemperature {
   3130  font-size: var(--font-size-large);
   3131 }
   3132 
   3133 .weatherIconCol {
   3134  width: var(--size-item-large);
   3135  height: var(--size-item-large);
   3136  aspect-ratio: 1;
   3137  display: flex;
   3138  align-items: center;
   3139  justify-content: center;
   3140  align-self: center;
   3141 }
   3142 
   3143 .weatherIcon {
   3144  width: var(--size-item-large);
   3145  height: auto;
   3146  vertical-align: middle;
   3147 }
   3148 @media (prefers-contrast) {
   3149  .weatherIcon {
   3150    -moz-context-properties: fill, stroke;
   3151    fill: currentColor;
   3152    stroke: currentColor;
   3153  }
   3154 }
   3155 .weatherIcon.iconId1 {
   3156  content: url("chrome://browser/skin/weather/sunny.svg");
   3157 }
   3158 .weatherIcon.iconId2 {
   3159  content: url("chrome://browser/skin/weather/mostly-sunny.svg");
   3160 }
   3161 .weatherIcon:is(.iconId3, .iconId4, .iconId6) {
   3162  content: url("chrome://browser/skin/weather/partly-sunny.svg");
   3163 }
   3164 .weatherIcon.iconId5 {
   3165  content: url("chrome://browser/skin/weather/hazy-sunshine.svg");
   3166 }
   3167 .weatherIcon:is(.iconId7, .iconId8) {
   3168  content: url("chrome://browser/skin/weather/cloudy.svg");
   3169 }
   3170 .weatherIcon.iconId11 {
   3171  content: url("chrome://browser/skin/weather/fog.svg");
   3172 }
   3173 .weatherIcon.iconId12 {
   3174  content: url("chrome://browser/skin/weather/showers.svg");
   3175 }
   3176 .weatherIcon:is(.iconId13, .iconId14) {
   3177  content: url("chrome://browser/skin/weather/mostly-cloudy-with-showers.svg");
   3178 }
   3179 .weatherIcon.iconId15 {
   3180  content: url("chrome://browser/skin/weather/thunderstorms.svg");
   3181 }
   3182 .weatherIcon:is(.iconId16, .iconId17) {
   3183  content: url("chrome://browser/skin/weather/mostly-cloudy-with-thunderstorms.svg");
   3184 }
   3185 .weatherIcon.iconId18 {
   3186  content: url("chrome://browser/skin/weather/rain.svg");
   3187 }
   3188 .weatherIcon:is(.iconId19, .iconId20, .iconId25) {
   3189  content: url("chrome://browser/skin/weather/flurries.svg");
   3190 }
   3191 .weatherIcon.iconId21 {
   3192  content: url("chrome://browser/skin/weather/partly-sunny-with-flurries.svg");
   3193 }
   3194 .weatherIcon:is(.iconId22, .iconId23) {
   3195  content: url("chrome://browser/skin/weather/snow.svg");
   3196 }
   3197 .weatherIcon:is(.iconId24, .iconId31) {
   3198  content: url("chrome://browser/skin/weather/ice.svg");
   3199 }
   3200 .weatherIcon:is(.iconId26, .iconId29) {
   3201  content: url("chrome://browser/skin/weather/freezing-rain.svg");
   3202 }
   3203 .weatherIcon.iconId30 {
   3204  content: url("chrome://browser/skin/weather/hot.svg");
   3205 }
   3206 .weatherIcon.iconId32 {
   3207  content: url("chrome://browser/skin/weather/windy.svg");
   3208 }
   3209 .weatherIcon.iconId33 {
   3210  content: url("chrome://browser/skin/weather/night-clear.svg");
   3211 }
   3212 .weatherIcon:is(.iconId34, .iconId35, .iconId36, .iconId38) {
   3213  content: url("chrome://browser/skin/weather/night-mostly-clear.svg");
   3214 }
   3215 .weatherIcon.iconId37 {
   3216  content: url("chrome://browser/skin/weather/night-hazy-moonlight.svg");
   3217 }
   3218 .weatherIcon:is(.iconId39, .iconId40) {
   3219  content: url("chrome://browser/skin/weather/night-partly-cloudy-with-showers.svg");
   3220  height: var(--size-item-large);
   3221 }
   3222 .weatherIcon:is(.iconId41, .iconId42) {
   3223  content: url("chrome://browser/skin/weather/night-partly-cloudy-with-thunderstorms.svg");
   3224 }
   3225 .weatherIcon:is(.iconId43, .iconId44) {
   3226  content: url("chrome://browser/skin/weather/night-mostly-cloudy-with-flurries.svg");
   3227 }
   3228 
   3229 .location-input-wrapper {
   3230  background-color: light-dark(var(--color-white), var(--newtab-background-color-secondary));
   3231  color: var(--newtab-text-primary-color);
   3232  border-radius: var(--border-radius-medium);
   3233  padding: var(--space-small);
   3234  position: relative;
   3235 }
   3236 .lightWallpaper .location-input-wrapper, .darkWallpaper .location-input-wrapper {
   3237  background-color: var(--newtab-weather-background-color);
   3238 }
   3239 .lightWallpaper .location-input-wrapper:hover, .darkWallpaper .location-input-wrapper:hover {
   3240  background-color: var(--newtab-button-static-hover-background);
   3241 }
   3242 .lightWallpaper .location-input-wrapper:hover:active, .darkWallpaper .location-input-wrapper:hover:active {
   3243  background-color: var(--newtab-button-static-active-background);
   3244 }
   3245 @media (prefers-contrast) {
   3246  .lightWallpaper .location-input-wrapper, .darkWallpaper .location-input-wrapper {
   3247    background-color: var(--background-color-box);
   3248  }
   3249 }
   3250 .location-input-wrapper .search-icon {
   3251  content: url("chrome://global/skin/icons/search-glass.svg");
   3252  -moz-context-properties: fill;
   3253  fill: var(--icon-color);
   3254  position: absolute;
   3255  inset-block-start: 50%;
   3256  transform: translateY(-50%);
   3257  inset-inline-start: var(--space-large);
   3258 }
   3259 .location-input-wrapper .close-icon {
   3260  position: absolute;
   3261  inset-block-start: 50%;
   3262  transform: translateY(-50%);
   3263  inset-inline-end: var(--space-medium);
   3264 }
   3265 .location-input-wrapper .close-icon:focus-visible {
   3266  outline: var(--focus-outline);
   3267 }
   3268 .location-input-wrapper input {
   3269  border-radius: var(--border-radius-medium);
   3270  background-color: light-dark(var(--color-white), var(--newtab-background-color-secondary));
   3271  padding: var(--space-small) var(--space-xxlarge);
   3272  border: 1px solid var(--border-color);
   3273 }
   3274 .location-input-wrapper input:focus-visible {
   3275  outline: var(--focus-outline);
   3276 }
   3277 
   3278 .has-weather.has-search .weatherCityRow,
   3279 .has-weather.has-search .weatherButtonContextMenuWrapper,
   3280 .has-weather .weatherCityRow,
   3281 .has-weather .weatherButtonContextMenuWrapper {
   3282  display: none;
   3283 }
   3284 @media (min-width: 866px) {
   3285  .has-weather.has-search .weatherCityRow,
   3286 .has-weather.has-search .weatherButtonContextMenuWrapper,
   3287 .has-weather .weatherCityRow,
   3288 .has-weather .weatherButtonContextMenuWrapper {
   3289    display: flex;
   3290  }
   3291 }
   3292 .has-weather.has-search .weatherIconCol,
   3293 .has-weather .weatherIconCol {
   3294  display: none;
   3295 }
   3296 @media (min-width: 1122px) {
   3297  .has-weather.has-search .weatherIconCol,
   3298 .has-weather .weatherIconCol {
   3299    display: flex;
   3300  }
   3301 }
   3302 .has-weather.has-search .weatherDetailedSummaryRow,
   3303 .has-weather .weatherDetailedSummaryRow {
   3304  display: none;
   3305 }
   3306 @media (min-width: 1122px) {
   3307  .has-weather.has-search .weatherDetailedSummaryRow,
   3308 .has-weather .weatherDetailedSummaryRow {
   3309    display: block;
   3310  }
   3311 }
   3312 .has-weather.has-search .weatherCard,
   3313 .has-weather .weatherCard {
   3314  min-height: 55px;
   3315 }
   3316 .has-weather.has-search .weatherInfoLink,
   3317 .has-weather .weatherInfoLink {
   3318  min-width: auto;
   3319  max-width: none;
   3320 }
   3321 @media (min-width: 1122px) {
   3322  .has-weather.has-search .weatherInfoLink,
   3323 .has-weather .weatherInfoLink {
   3324    min-width: 130px;
   3325    max-width: 190px;
   3326  }
   3327 }
   3328 .has-weather.has-search .weatherForecastRow,
   3329 .has-weather .weatherForecastRow {
   3330  margin-block: var(--space-small);
   3331 }
   3332 @media (min-width: 866px) {
   3333  .has-weather.has-search .weatherForecastRow,
   3334 .has-weather .weatherForecastRow {
   3335    margin-block: unset;
   3336  }
   3337 }
   3338 .has-weather.has-search .weatherSponsorText,
   3339 .has-weather .weatherSponsorText {
   3340  position: relative;
   3341 }
   3342 .has-weather.has-search .weatherSponsorText span,
   3343 .has-weather .weatherSponsorText span {
   3344  position: absolute;
   3345  white-space: nowrap;
   3346  inset-block-start: var(--space-small);
   3347 }
   3348 @media (min-width: 866px) {
   3349  .has-weather.has-search .weatherSponsorText span,
   3350 .has-weather .weatherSponsorText span {
   3351    inset-block-start: unset;
   3352    position: relative;
   3353  }
   3354 }
   3355 
   3356 .mobileDownloadPromoWrapper {
   3357  display: none;
   3358  height: 55px;
   3359 }
   3360 @media (min-width: 1122px) {
   3361  .mobileDownloadPromoWrapper.is-tall {
   3362    height: 74px;
   3363  }
   3364 }
   3365 @media (min-width: 610px) {
   3366  .mobileDownloadPromoWrapper {
   3367    display: flex;
   3368    align-items: center;
   3369    justify-content: center;
   3370    position: absolute;
   3371    inset-inline-start: auto;
   3372    inset-block-start: var(--space-xxlarge);
   3373    inset-inline-end: var(--space-medium);
   3374    margin-block-start: 0;
   3375    margin-inline-start: 0;
   3376    z-index: 1;
   3377  }
   3378 }
   3379 @media (min-width: 724px) {
   3380  .mobileDownloadPromoWrapper {
   3381    inset-inline-end: var(--space-xxlarge);
   3382  }
   3383 }
   3384 .no-search .mobileDownloadPromoWrapper {
   3385  display: none;
   3386 }
   3387 @media (min-width: 866px) {
   3388  .no-search .mobileDownloadPromoWrapper {
   3389    display: flex;
   3390    inset-block-start: var(--space-xxlarge);
   3391    inset-inline-start: auto;
   3392    inset-inline-end: var(--space-xxlarge);
   3393  }
   3394 }
   3395 
   3396 .mobile-download-promo {
   3397  width: 32px;
   3398  height: 32px;
   3399  appearance: none;
   3400  border: 0;
   3401  border-radius: var(--border-radius-small);
   3402  padding: 0;
   3403  cursor: pointer;
   3404 }
   3405 .mobile-download-promo:hover {
   3406  background-color: var(--button-background-color-ghost-hover);
   3407 }
   3408 .mobile-download-promo:hover:active {
   3409  background-color: var(--button-background-color-ghost-active);
   3410 }
   3411 .mobile-download-promo.is-active {
   3412  background-color: var(--button-background-color-ghost-active);
   3413 }
   3414 .lightWallpaper .mobile-download-promo, .darkWallpaper .mobile-download-promo {
   3415  background-color: var(--newtab-weather-background-color);
   3416 }
   3417 @media (prefers-contrast) {
   3418  .lightWallpaper .mobile-download-promo, .darkWallpaper .mobile-download-promo {
   3419    background-color: var(--background-color-box);
   3420  }
   3421 }
   3422 
   3423 /* stylelint-disable max-nesting-depth */
   3424 .card-outer {
   3425  background: var(--newtab-background-color-secondary);
   3426  border-radius: var(--border-radius-medium);
   3427  display: inline-block;
   3428  height: 266px;
   3429  margin-inline-end: var(--space-xxlarge);
   3430  position: relative;
   3431  width: 100%;
   3432 }
   3433 .card-outer .context-menu-button {
   3434  background-clip: padding-box;
   3435  background-color: var(--newtab-button-background);
   3436  background-image: url("chrome://global/skin/icons/more.svg");
   3437  background-position: 50.1%;
   3438  border: 0;
   3439  outline: 1px solid var(--border-color);
   3440  outline-width: 0;
   3441  border-radius: var(--border-radius-circle);
   3442  cursor: pointer;
   3443  color: var(--button-text-color);
   3444  fill: var(--newtab-button-text);
   3445  height: 27px;
   3446  inset-inline-end: calc(var(--space-medium) * -1);
   3447  opacity: 0;
   3448  position: absolute;
   3449  inset-block-start: calc(var(--space-medium) * -1);
   3450  transform: scale(0.25);
   3451  transition-duration: 150ms;
   3452  transition-property: transform, opacity;
   3453  width: 27px;
   3454 }
   3455 .card-outer .context-menu-button:is(:active, :focus-visible, :hover) {
   3456  opacity: 1;
   3457  transform: scale(1);
   3458 }
   3459 .card-outer .context-menu-button:is(:hover) {
   3460  background-color: var(--newtab-button-hover-background);
   3461 }
   3462 .card-outer .context-menu-button:is(:focus-visible) {
   3463  outline-color: var(--newtab-button-focus-border);
   3464  background-color: var(--newtab-button-focus-background);
   3465  outline-width: 4px;
   3466 }
   3467 .card-outer .context-menu-button:is(:active) {
   3468  background-color: var(--newtab-button-active-background);
   3469 }
   3470 .card-outer:is(:focus):not(.placeholder) {
   3471  border: 0;
   3472  outline: var(--focus-outline);
   3473  transition: none;
   3474 }
   3475 .card-outer:hover {
   3476  box-shadow: none;
   3477  transition: none;
   3478 }
   3479 .card-outer.placeholder {
   3480  background: transparent;
   3481 }
   3482 .card-outer.placeholder .card-preview-image-outer,
   3483 .card-outer.placeholder .card-context {
   3484  display: none;
   3485 }
   3486 .card-outer .card {
   3487  border-radius: var(--border-radius-medium);
   3488  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
   3489  height: 100%;
   3490 }
   3491 .card-outer > a {
   3492  color: inherit;
   3493  display: block;
   3494  height: 100%;
   3495  outline: none;
   3496  position: absolute;
   3497  width: 100%;
   3498 }
   3499 .card-outer > a:is(:focus) .card {
   3500  border: 0;
   3501  outline: var(--focus-outline);
   3502 }
   3503 .card-outer > a:is(.active, :focus) .card {
   3504  box-shadow: 0 0 0 5px var(--newtab-element-secondary-color);
   3505  transition: box-shadow 150ms;
   3506 }
   3507 .card-outer > a:is(.active, :focus) .card-title {
   3508  color: var(--newtab-primary-action-background);
   3509 }
   3510 .card-outer:is(:hover, :focus, .active):not(.placeholder) {
   3511  outline: none;
   3512 }
   3513 .card-outer:is(:hover, :focus, .active):not(.placeholder) .context-menu-button {
   3514  opacity: 1;
   3515  transform: scale(1);
   3516  transition-delay: 333ms;
   3517 }
   3518 .card-outer:is(:hover, :focus, .active):not(.placeholder) .card-title {
   3519  color: var(--newtab-primary-action-background);
   3520 }
   3521 .card-outer:is(:hover, :focus, .active):not(.placeholder) .alternate ~ .card-host-name {
   3522  display: none;
   3523 }
   3524 .card-outer:is(:hover, :focus, .active):not(.placeholder) .card-host-name.alternate {
   3525  display: block;
   3526 }
   3527 .card-outer .card-preview-image-outer {
   3528  background-color: var(--newtab-element-secondary-color);
   3529  border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
   3530  height: 122px;
   3531  overflow: hidden;
   3532  position: relative;
   3533 }
   3534 .card-outer .card-preview-image-outer::after {
   3535  border-block-end: 1px solid var(--newtab-card-hairline-color);
   3536  inset-block-end: 0;
   3537  content: "";
   3538  position: absolute;
   3539  width: 100%;
   3540 }
   3541 .card-outer .card-preview-image-outer .card-preview-image {
   3542  background-position: center;
   3543  background-repeat: no-repeat;
   3544  background-size: cover;
   3545  height: 100%;
   3546  opacity: 0;
   3547  transition: opacity 1s cubic-bezier(0.07, 0.95, 0, 1);
   3548  width: 100%;
   3549 }
   3550 .card-outer .card-preview-image-outer .card-preview-image.loaded {
   3551  opacity: 1;
   3552 }
   3553 .card-outer .card-details {
   3554  padding: var(--space-large) var(--space-large) var(--space-medium);
   3555 }
   3556 .card-outer .card-text {
   3557  max-height: 78px;
   3558  overflow: hidden;
   3559 }
   3560 .card-outer .card-text.no-host-name, .card-outer .card-text.no-context {
   3561  max-height: 97px;
   3562 }
   3563 .card-outer .card-text.no-host-name.no-context {
   3564  max-height: 116px;
   3565 }
   3566 .card-outer .card-text:not(.no-description) .card-title {
   3567  max-height: 57px;
   3568  overflow: hidden;
   3569 }
   3570 .card-outer .card-host-name {
   3571  color: var(--newtab-text-secondary-color);
   3572  font-size: var(--font-size-small);
   3573  overflow: hidden;
   3574  padding-block-end: var(--space-xsmall);
   3575  text-overflow: ellipsis;
   3576  text-transform: uppercase;
   3577  white-space: nowrap;
   3578 }
   3579 .card-outer .card-host-name.alternate {
   3580  display: none;
   3581 }
   3582 .card-outer .card-title {
   3583  font-size: inherit;
   3584  font-weight: var(--heading-font-weight);
   3585  line-height: 19px;
   3586  margin: 0 0 var(--space-xxsmall);
   3587  word-wrap: break-word;
   3588 }
   3589 .card-outer .card-description {
   3590  font-size: var(--font-size-small);
   3591  line-height: 19px;
   3592  margin: 0;
   3593  overflow: hidden;
   3594  word-wrap: break-word;
   3595 }
   3596 .card-outer .card-context {
   3597  inset-block-end: 0;
   3598  color: var(--newtab-text-secondary-color);
   3599  display: flex;
   3600  font-size: var(--font-size-small);
   3601  inset-inline-start: 0;
   3602  padding: var(--space-small) var(--space-large);
   3603  position: absolute;
   3604 }
   3605 .card-outer .card-context-icon {
   3606  fill: var(--newtab-text-secondary-color);
   3607  height: 22px;
   3608  margin-inline-end: var(--space-xsmall);
   3609 }
   3610 .card-outer .card-context-label {
   3611  flex-grow: 1;
   3612  line-height: 22px;
   3613  overflow: hidden;
   3614  text-overflow: ellipsis;
   3615  white-space: nowrap;
   3616 }
   3617 
   3618 @media (min-width: 1122px) {
   3619  .normal-cards .card-outer {
   3620    height: 370px;
   3621  }
   3622  .normal-cards .card-outer .card-preview-image-outer {
   3623    height: 155px;
   3624  }
   3625  .normal-cards .card-outer .card-details {
   3626    padding: var(--space-medium) var(--space-large);
   3627  }
   3628  .normal-cards .card-outer .card-text {
   3629    max-height: 140px;
   3630  }
   3631  .normal-cards .card-outer .card-host-name {
   3632    font-size: var(--font-size-small);
   3633    padding-block-end: var(--space-xsmall);
   3634  }
   3635  .normal-cards .card-outer .card-title {
   3636    font-size: var(--font-size-large);
   3637    line-height: 23px;
   3638    margin-block-end: 0;
   3639  }
   3640  .normal-cards .card-outer .card-text:not(.no-description) .card-title {
   3641    max-height: 69px;
   3642  }
   3643  .normal-cards .card-outer .card-description {
   3644    font-size: inherit;
   3645    line-height: 23px;
   3646  }
   3647  .normal-cards .card-outer .card-context {
   3648    inset-block-end: var(--space-xsmall);
   3649    font-size: inherit;
   3650    line-height: 23px;
   3651  }
   3652 }
   3653 
   3654 .compact-cards .card-outer {
   3655  height: 160px;
   3656 }
   3657 .compact-cards .card-outer .card-preview-image-outer {
   3658  height: 108px;
   3659 }
   3660 .compact-cards .card-outer .card-details {
   3661  padding: var(--space-medium) var(--space-large);
   3662 }
   3663 .compact-cards .card-outer .card-host-name {
   3664  line-height: 10px;
   3665 }
   3666 .compact-cards .card-outer .card-text .card-title, .compact-cards .card-outer .card-text:not(.no-description) .card-title {
   3667  font-size: var(--font-size-small);
   3668  line-height: calc(var(--font-size-small) + 1px);
   3669  max-height: calc(var(--font-size-small) + 5px);
   3670  overflow: hidden;
   3671  padding: 0 0 var(--space-xsmall);
   3672  text-overflow: ellipsis;
   3673  white-space: nowrap;
   3674 }
   3675 .compact-cards .card-outer .card-description {
   3676  display: none;
   3677 }
   3678 .compact-cards .card-outer .card-context {
   3679  background-color: var(--newtab-background-color-secondary);
   3680  border-radius: var(--border-radius-medium);
   3681  clip-path: inset(-1px -1px 4px);
   3682  height: 32px;
   3683  width: 32px;
   3684  padding: var(--space-small);
   3685  inset-block-start: 91px;
   3686  inset-inline-end: var(--space-medium);
   3687  inset-inline-start: auto;
   3688 }
   3689 .compact-cards .card-outer .card-context::after {
   3690  border: 1px solid var(--newtab-card-hairline-color);
   3691  border-block-end: 0;
   3692  border-radius: var(--border-radius-medium);
   3693  content: "";
   3694  position: absolute;
   3695  height: 17px;
   3696  width: 34px;
   3697  inset-block-start: calc(var(--space-xxsmall) * -1);
   3698  inset-inline-start: calc(var(--space-xxsmall) * -1);
   3699 }
   3700 .compact-cards .card-outer .card-context .card-context-icon {
   3701  margin-inline-end: 0;
   3702  height: 16px;
   3703  width: 16px;
   3704 }
   3705 .compact-cards .card-outer .card-context .card-context-icon.icon-bookmark-added {
   3706  fill: var(--color-blue-40);
   3707 }
   3708 .compact-cards .card-outer .card-context .card-context-icon.icon-download {
   3709  fill: var(--color-green-40);
   3710 }
   3711 .compact-cards .card-outer .card-context .card-context-icon.icon-pocket {
   3712  fill: #EF4056;
   3713 }
   3714 .compact-cards .card-outer .card-context .card-context-label {
   3715  display: none;
   3716 }
   3717 @media not all and (min-width: 1122px) {
   3718  .compact-cards .hide-for-narrow {
   3719    display: none;
   3720  }
   3721 }
   3722 
   3723 /* stylelint-disable max-nesting-depth */
   3724 .collapsible-section {
   3725  padding: 0 var(--space-xlarge);
   3726  margin-block-end: var(--space-xxlarge);
   3727 }
   3728 .collapsible-section .section-title-container {
   3729  margin: 0;
   3730 }
   3731 .collapsible-section .section-title-container.has-subtitle {
   3732  display: flex;
   3733  flex-direction: column;
   3734 }
   3735 @media (min-width: 866px) {
   3736  .collapsible-section .section-title-container.has-subtitle {
   3737    flex-direction: row;
   3738    align-items: baseline;
   3739    justify-content: space-between;
   3740  }
   3741 }
   3742 .collapsible-section .section-title {
   3743  font-size: var(--font-size-large);
   3744  font-weight: var(--heading-font-weight);
   3745  color: var(--newtab-text-primary-color);
   3746 }
   3747 .collapsible-section .section-title.grey-title {
   3748  color: var(--newtab-text-primary-color);
   3749  display: inline-block;
   3750  fill: var(--newtab-text-primary-color);
   3751  vertical-align: middle;
   3752 }
   3753 .collapsible-section .section-title .section-title-contents {
   3754  vertical-align: top;
   3755 }
   3756 @media (max-width: 609px) {
   3757  .collapsible-section .section-title .section-title-contents {
   3758    display: block;
   3759  }
   3760  .collapsible-section .section-title .section-title-contents .learn-more-link-wrapper {
   3761    display: block;
   3762    text-align: center;
   3763  }
   3764  .collapsible-section .section-title .section-title-contents .learn-more-link-wrapper .learn-more-link {
   3765    margin-inline-start: 0;
   3766  }
   3767 }
   3768 .collapsible-section .section-sub-title {
   3769  font-size: inherit;
   3770  color: var(--newtab-text-secondary-color);
   3771  opacity: 0.3;
   3772 }
   3773 .collapsible-section .section-top-bar {
   3774  min-height: 19px;
   3775  margin-block-end: var(--space-medium);
   3776  position: relative;
   3777  display: flex;
   3778  justify-content: space-between;
   3779  align-items: center;
   3780 }
   3781 @media (max-width: 609px) {
   3782  .collapsible-section .section-top-bar {
   3783    flex-direction: column;
   3784    gap: var(--space-small);
   3785    align-items: flex-start;
   3786  }
   3787 }
   3788 .collapsible-section.active {
   3789  background: var(--newtab-element-hover-color);
   3790  border-radius: var(--border-radius-small);
   3791 }
   3792 .collapsible-section .learn-more-link {
   3793  font-size: var(--font-size-small);
   3794  margin-inline-start: var(--space-medium);
   3795 }
   3796 .collapsible-section .learn-more-link a {
   3797  color: var(--newtab-primary-action-background);
   3798 }
   3799 .collapsible-section .section-body-fallback {
   3800  height: 266px;
   3801 }
   3802 .collapsible-section .section-body {
   3803  margin: 0 calc(var(--space-xsmall) * -1);
   3804  padding: 0 var(--space-small);
   3805 }
   3806 .collapsible-section .section-body.animating {
   3807  overflow: hidden;
   3808  pointer-events: none;
   3809 }
   3810 .collapsible-section[data-section-id=topsites] .section-top-bar {
   3811  display: none;
   3812 }
   3813 @media (min-width: 610px) and (max-width: 865px) {
   3814  .collapsible-section[data-section-id=topstories] .card-outer:first-child {
   3815    display: none;
   3816  }
   3817 }
   3818 .collapsible-section .button-topic-selection {
   3819  display: none;
   3820 }
   3821 @media (min-width: 724px) {
   3822  .collapsible-section .button-topic-selection {
   3823    display: block;
   3824  }
   3825 }
   3826 .lightWallpaper .collapsible-section .button-topic-selection moz-button[type=default]::part(button), .darkWallpaper .collapsible-section .button-topic-selection moz-button[type=default]::part(button) {
   3827  background-color: var(--newtab-weather-background-color);
   3828 }
   3829 .lightWallpaper .collapsible-section .button-topic-selection moz-button[type=default]::part(button):hover, .darkWallpaper .collapsible-section .button-topic-selection moz-button[type=default]::part(button):hover {
   3830  background-color: var(--newtab-button-static-hover-background);
   3831 }
   3832 .lightWallpaper .collapsible-section .button-topic-selection moz-button[type=default]::part(button):hover:active, .darkWallpaper .collapsible-section .button-topic-selection moz-button[type=default]::part(button):hover:active {
   3833  background-color: var(--newtab-button-static-active-background);
   3834 }
   3835 @media (prefers-contrast) {
   3836  .lightWallpaper .collapsible-section .button-topic-selection moz-button[type=default]::part(button), .darkWallpaper .collapsible-section .button-topic-selection moz-button[type=default]::part(button) {
   3837    background-color: var(--background-color-box);
   3838  }
   3839 }
   3840 
   3841 /* stylelint-disable max-nesting-depth */
   3842 .discoverystream-admin-toggle {
   3843  position: fixed;
   3844  inset-block-end: calc(var(--button-size-icon) + var(--space-xxlarge) + var(--space-small));
   3845  inset-inline-end: var(--space-xlarge);
   3846  border: 0;
   3847  background: none;
   3848  z-index: 4;
   3849  border-radius: var(--border-radius-small);
   3850 }
   3851 .discoverystream-admin-toggle .icon-devtools {
   3852  background-color: var(--button-background-color, rgba(21, 20, 26, 0.07));
   3853  background-image: url("chrome://global/skin/icons/developer.svg");
   3854  background-size: var(--icon-size-medium);
   3855  box-shadow: 0 0.8px 1.6px 0 rgba(58, 57, 68, 0.2);
   3856  padding: calc(5 * var(--space-xsmall));
   3857 }
   3858 .discoverystream-admin-toggle:dir(rtl) {
   3859  transform: scaleX(-1);
   3860 }
   3861 .discoverystream-admin-toggle:hover {
   3862  background: var(--newtab-element-hover-color);
   3863 }
   3864 .discoverystream-admin-toggle.expanded {
   3865  background: rgba(0, 0, 0, 0.2);
   3866 }
   3867 
   3868 .discoverystream-admin {
   3869  position: fixed;
   3870  inset-block-start: 0;
   3871  inset-inline-start: 0;
   3872  width: 100%;
   3873  background: var(--newtab-background-color);
   3874  height: 100%;
   3875  overflow-y: scroll;
   3876  margin: 0 auto;
   3877  color: var(--newtab-text-primary-color);
   3878  z-index: 3;
   3879 }
   3880 .discoverystream-admin.collapsed {
   3881  display: none;
   3882 }
   3883 .discoverystream-admin h1 {
   3884  font-size: var(--font-size-xxlarge);
   3885 }
   3886 .discoverystream-admin h2 .button,
   3887 .discoverystream-admin p .button {
   3888  font-size: inherit;
   3889  padding: var(--space-xsmall) var(--space-medium);
   3890  margin-inline-start: var(--space-xsmall);
   3891  margin-block-end: 0;
   3892 }
   3893 .discoverystream-admin .toggle-wrapper {
   3894  margin-block: var(--space-large);
   3895  width: 200px;
   3896 }
   3897 .discoverystream-admin .details-section {
   3898  margin-block: var(--space-large);
   3899 }
   3900 .discoverystream-admin .details-section summary {
   3901  font-size: var(--font-size-large);
   3902 }
   3903 .discoverystream-admin table {
   3904  border-collapse: collapse;
   3905  width: 100%;
   3906 }
   3907 .discoverystream-admin table.minimal-table {
   3908  border-collapse: collapse;
   3909  border: 1px solid var(--border-color);
   3910 }
   3911 .discoverystream-admin table.minimal-table td {
   3912  padding: var(--space-small);
   3913 }
   3914 .discoverystream-admin table.minimal-table td:first-child {
   3915  width: 1%;
   3916  white-space: nowrap;
   3917 }
   3918 .discoverystream-admin table.minimal-table td:not(:first-child) {
   3919  font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;
   3920 }
   3921 .discoverystream-admin table.errorReporting tr {
   3922  border: 1px solid var(--newtab-background-color-secondary);
   3923 }
   3924 .discoverystream-admin table.errorReporting td {
   3925  padding: var(--space-xsmall);
   3926 }
   3927 .discoverystream-admin table.errorReporting td[rowspan] {
   3928  border: 1px solid var(--newtab-background-color-secondary);
   3929 }
   3930 .discoverystream-admin .large-data-container {
   3931  max-height: 500px;
   3932  overflow-y: scroll;
   3933 }
   3934 .discoverystream-admin .message-item:first-child td {
   3935  border-block-start: 1px solid var(--border-color);
   3936 }
   3937 .discoverystream-admin .message-item td {
   3938  vertical-align: top;
   3939  padding: var(--space-small);
   3940  border-block-end: 1px solid var(--border-color);
   3941 }
   3942 .discoverystream-admin .message-item td.min {
   3943  width: 1%;
   3944  white-space: nowrap;
   3945 }
   3946 .discoverystream-admin .message-item td.message-summary {
   3947  width: 60%;
   3948 }
   3949 .discoverystream-admin .message-item td.button-column {
   3950  width: 15%;
   3951 }
   3952 .discoverystream-admin .message-item td:first-child {
   3953  border-inline-start: 1px solid var(--border-color);
   3954 }
   3955 .discoverystream-admin .message-item td:last-child {
   3956  border-inline-end: 1px solid var(--border-color);
   3957 }
   3958 .discoverystream-admin .message-item.blocked .message-id,
   3959 .discoverystream-admin .message-item.blocked .message-summary {
   3960  opacity: 0.5;
   3961 }
   3962 .discoverystream-admin .message-item.blocked .message-id {
   3963  opacity: 0.5;
   3964 }
   3965 .discoverystream-admin .message-item .message-id {
   3966  font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;
   3967  font-size: var(--font-size-small);
   3968 }
   3969 .discoverystream-admin pre {
   3970  background: var(--newtab-background-color-secondary);
   3971  margin: 0;
   3972  padding: var(--space-small);
   3973  font-size: var(--font-size-small);
   3974  max-width: 750px;
   3975  overflow: auto;
   3976  font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;
   3977 }
   3978 .discoverystream-admin .helpLink {
   3979  padding: var(--space-medium);
   3980  display: flex;
   3981  background: rgba(0, 0, 0, 0.1);
   3982  border-radius: var(--border-radius-small);
   3983  align-items: center;
   3984 }
   3985 .discoverystream-admin .helpLink a {
   3986  text-decoration: underline;
   3987 }
   3988 .discoverystream-admin .helpLink .icon {
   3989  min-width: 18px;
   3990  min-height: 18px;
   3991 }
   3992 .discoverystream-admin .ds-component {
   3993  margin-block-end: var(--space-large);
   3994 }
   3995 .discoverystream-admin .collapsed {
   3996  display: none;
   3997 }
   3998 .discoverystream-admin .icon {
   3999  display: inline-table;
   4000  width: 18px;
   4001  height: 18px;
   4002 }
   4003 .discoverystream-admin .button:disabled, .discoverystream-admin .button:disabled:active {
   4004  opacity: 0.5;
   4005  cursor: unset;
   4006  box-shadow: none;
   4007 }
   4008 .discoverystream-admin .weather-section {
   4009  margin-block-end: var(--space-xlarge);
   4010 }
   4011 .discoverystream-admin .weather-section form {
   4012  display: flex;
   4013 }
   4014 .discoverystream-admin .weather-section form label {
   4015  margin-inline-end: var(--space-medium);
   4016 }
   4017 
   4018 .more-recommendations {
   4019  display: flex;
   4020  align-items: center;
   4021  white-space: nowrap;
   4022  line-height: 1.2307692308;
   4023 }
   4024 .more-recommendations::after {
   4025  background: url("chrome://global/skin/icons/arrow-right-12.svg") no-repeat center center;
   4026  content: "";
   4027  -moz-context-properties: fill;
   4028  display: inline-block;
   4029  fill: var(--newtab-primary-action-background);
   4030  height: 16px;
   4031  margin-inline-start: var(--space-xsmall);
   4032  vertical-align: top;
   4033  width: var(--icon-size-xsmall);
   4034 }
   4035 .more-recommendations:dir(rtl)::after {
   4036  background-image: url("chrome://global/skin/icons/arrow-left-12.svg");
   4037 }
   4038 
   4039 .discovery-stream.ds-layout {
   4040  --gridColumnGap: 48px;
   4041  --gridRowGap: 24px;
   4042  grid-template-columns: repeat(12, 1fr);
   4043  grid-column-gap: var(--gridColumnGap);
   4044  grid-row-gap: var(--gridRowGap);
   4045  margin: 0 auto;
   4046 }
   4047 .discovery-stream.ds-layout .ds-column-12 {
   4048  grid-column-start: auto;
   4049  grid-column-end: span 12;
   4050 }
   4051 .discovery-stream.ds-layout .ds-column-11 {
   4052  grid-column-start: auto;
   4053  grid-column-end: span 11;
   4054 }
   4055 .discovery-stream.ds-layout .ds-column-10 {
   4056  grid-column-start: auto;
   4057  grid-column-end: span 10;
   4058 }
   4059 .discovery-stream.ds-layout .ds-column-9 {
   4060  grid-column-start: auto;
   4061  grid-column-end: span 9;
   4062 }
   4063 .discovery-stream.ds-layout .ds-column-8 {
   4064  grid-column-start: auto;
   4065  grid-column-end: span 8;
   4066 }
   4067 .discovery-stream.ds-layout .ds-column-7 {
   4068  grid-column-start: auto;
   4069  grid-column-end: span 7;
   4070 }
   4071 .discovery-stream.ds-layout .ds-column-6 {
   4072  grid-column-start: auto;
   4073  grid-column-end: span 6;
   4074 }
   4075 .discovery-stream.ds-layout .ds-column-5 {
   4076  grid-column-start: auto;
   4077  grid-column-end: span 5;
   4078 }
   4079 .discovery-stream.ds-layout .ds-column-4 {
   4080  grid-column-start: auto;
   4081  grid-column-end: span 4;
   4082 }
   4083 .discovery-stream.ds-layout .ds-column-3 {
   4084  grid-column-start: auto;
   4085  grid-column-end: span 3;
   4086 }
   4087 .discovery-stream.ds-layout .ds-column-2 {
   4088  grid-column-start: auto;
   4089  grid-column-end: span 2;
   4090 }
   4091 .discovery-stream.ds-layout .ds-column-1 {
   4092  grid-column-start: auto;
   4093  grid-column-end: span 1;
   4094 }
   4095 .discovery-stream.ds-layout .ds-column-grid {
   4096  display: flex;
   4097  flex-direction: column;
   4098  grid-row-gap: var(--gridRowGap);
   4099 }
   4100 .discovery-stream.ds-layout .ds-column-grid > div:empty {
   4101  display: none;
   4102 }
   4103 
   4104 .ds-header {
   4105  margin: var(--space-small) 0;
   4106 }
   4107 .ds-header .ds-context {
   4108  font-weight: var(--font-weight);
   4109 }
   4110 
   4111 .ds-header,
   4112 .ds-layout .section-title span {
   4113  color: var(--newtab-contextual-text-primary-color);
   4114  font-size: var(--font-size-large);
   4115  font-weight: var(--heading-font-weight);
   4116 }
   4117 .lightWallpaper .ds-header,
   4118 .lightWallpaper .ds-layout .section-title span {
   4119  color-scheme: light;
   4120 }
   4121 .darkWallpaper .ds-header,
   4122 .darkWallpaper .ds-layout .section-title span {
   4123  color-scheme: dark;
   4124 }
   4125 .ds-header .icon,
   4126 .ds-layout .section-title span .icon {
   4127  fill: var(--newtab-text-secondary-color);
   4128 }
   4129 
   4130 .collapsible-section.ds-layout {
   4131  margin: auto;
   4132 }
   4133 .lightWallpaper .collapsible-section.ds-layout .section-top-bar .learn-more-link {
   4134  color-scheme: light;
   4135 }
   4136 .darkWallpaper .collapsible-section.ds-layout .section-top-bar .learn-more-link {
   4137  color-scheme: dark;
   4138 }
   4139 .collapsible-section.ds-layout .section-top-bar .learn-more-link a {
   4140  color: var(--newtab-primary-action-background);
   4141  font-weight: var(--font-weight-semibold);
   4142 }
   4143 .collapsible-section.ds-layout .section-top-bar .learn-more-link a:is(:focus, :hover) {
   4144  text-decoration: none;
   4145 }
   4146 
   4147 .activity-stream.modal-open {
   4148  overflow: hidden;
   4149 }
   4150 
   4151 .modalOverlayOuter {
   4152  background: var(--newtab-overlay-color);
   4153  height: 100%;
   4154  position: fixed;
   4155  inset-block-start: 0;
   4156  inset-inline-start: 0;
   4157  width: 100%;
   4158  display: none;
   4159  z-index: 1100;
   4160  overflow: auto;
   4161 }
   4162 .modalOverlayOuter.active {
   4163  display: flex;
   4164 }
   4165 
   4166 .modalOverlayInner {
   4167  min-width: min-content;
   4168  width: 100%;
   4169  max-width: 960px;
   4170  position: relative;
   4171  margin: auto;
   4172  background: var(--newtab-background-color-secondary);
   4173  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
   4174  border-radius: var(--border-radius-small);
   4175  display: none;
   4176  z-index: 1100;
   4177 }
   4178 @media (width <= 960px) {
   4179  .modalOverlayInner {
   4180    height: 100%;
   4181    inset-block-start: 0;
   4182    inset-inline-start: 0;
   4183    box-shadow: none;
   4184    border-radius: 0;
   4185  }
   4186 }
   4187 .modalOverlayInner.active {
   4188  display: block;
   4189 }
   4190 .modalOverlayInner h2 {
   4191  color: var(--newtab-text-primary-color);
   4192  text-align: center;
   4193  margin-block-start: var(--space-xxlarge);
   4194  font-size: var(--font-size-xxlarge);
   4195 }
   4196 @media (width <= 960px) {
   4197  .modalOverlayInner h2 {
   4198    margin-block-start: calc(var(--space-xlarge) * 4);
   4199  }
   4200 }
   4201 @media (width <= 850px) {
   4202  .modalOverlayInner h2 {
   4203    margin-block-start: var(--space-xxlarge);
   4204  }
   4205 }
   4206 .modalOverlayInner .footer {
   4207  border-block-start: 1px solid var(--border-color);
   4208  border-radius: var(--border-radius-small);
   4209  height: 70px;
   4210  width: 100%;
   4211  position: absolute;
   4212  inset-block-end: 0;
   4213  text-align: center;
   4214  background-color: var(--color-white);
   4215 }
   4216 @media (width <= 850px) and (height <= 730px) {
   4217  .modalOverlayInner .footer {
   4218    position: sticky;
   4219  }
   4220 }
   4221 @media (width <= 650px) and (height <= 600px) {
   4222  .modalOverlayInner .footer {
   4223    position: sticky;
   4224  }
   4225 }
   4226 .modalOverlayInner .footer .modalButton {
   4227  margin-block-start: var(--space-large);
   4228  min-width: 150px;
   4229  height: 30px;
   4230  padding: var(--space-xsmall) var(--space-xxlarge);
   4231  font-size: inherit;
   4232 }
   4233 .modalOverlayInner .footer .modalButton:focus, .modalOverlayInner .footer .modalButton.active, .modalOverlayInner .footer .modalButton:hover {
   4234  box-shadow: 0 0 0 5px var(--newtab-element-secondary-color);
   4235  transition: box-shadow 150ms;
   4236 }
   4237 
   4238 .notification-wrapper {
   4239  position: fixed;
   4240  inset-inline-end: var(--space-medium);
   4241  inset-block-end: var(--space-medium);
   4242  z-index: 10;
   4243 }
   4244 
   4245 .notification-feed-item {
   4246  position: relative;
   4247  animation: toastSlideInSlideOut 4s ease-in-out forwards;
   4248 }
   4249 
   4250 @keyframes toastSlideInSlideOut {
   4251  0%, 100% {
   4252    opacity: 0;
   4253    inset-block-start: 50%;
   4254  }
   4255  15%, 85% {
   4256    opacity: 1;
   4257    inset-block-start: 0;
   4258  }
   4259 }
   4260 /* This Source Code Form is subject to the terms of the Mozilla Public
   4261 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
   4262 * You can obtain one at http://mozilla.org/MPL/2.0/. */
   4263 .discovery-stream.ds-layout.ds-layout-widgets {
   4264  margin-inline: 0;
   4265 }
   4266 
   4267 .widgets-wrapper {
   4268  margin-inline: auto;
   4269  padding-block-end: var(--space-large);
   4270  max-width: max-content;
   4271 }
   4272 
   4273 .widgets-section-container {
   4274  padding-block: var(--space-xsmall) var(--space-large);
   4275  padding-inline: var(--space-large);
   4276  background-color: var(--button-background-color);
   4277  border-radius: var(--border-radius-large);
   4278 }
   4279 .lightWallpaper .widgets-section-container, .darkWallpaper .widgets-section-container {
   4280  background-color: var(--newtab-weather-background-color);
   4281 }
   4282 @media (prefers-contrast) {
   4283  .lightWallpaper .widgets-section-container, .darkWallpaper .widgets-section-container {
   4284    background-color: var(--background-color-box);
   4285  }
   4286 }
   4287 .widgets-section-container .widgets-title-container {
   4288  display: flex;
   4289  justify-content: flex-end;
   4290  align-items: center;
   4291  gap: var(--space-medium);
   4292 }
   4293 .widgets-section-container .widgets-title-container h1 {
   4294  margin-inline-end: auto;
   4295 }
   4296 @media (min-width: 1122px) {
   4297  .widgets-section-container {
   4298    padding-block-end: var(--space-xlarge);
   4299    padding-inline: var(--space-xlarge);
   4300  }
   4301 }
   4302 @media (min-width: 1122px) {
   4303  .has-sections-grid .widgets-section-container {
   4304    padding-block-end: var(--space-large);
   4305    padding-inline: var(--space-large);
   4306  }
   4307 }
   4308 .widgets-section-container h1 {
   4309  font-size: var(--font-size-large);
   4310  font-weight: var(--font-weight-bold);
   4311 }
   4312 
   4313 .widgets-container {
   4314  --widgets-card-width: var(--newtab-card-grid-layout-width);
   4315  --widgets-max-cols: 2;
   4316  --widgets-grid-gap: var(--space-large);
   4317 }
   4318 .has-sections-grid .widgets-container {
   4319  --widgets-card-width: var(--newtab-card-width-medium);
   4320 }
   4321 .widgets-container:has(.lists), .widgets-container:has(.focus-timer) {
   4322  display: grid;
   4323  grid-template-columns: repeat(auto-fit, var(--widgets-card-width));
   4324  gap: var(--widgets-grid-gap);
   4325 }
   4326 @media (min-width: 610px) {
   4327  .widgets-container:has(.lists), .widgets-container:has(.focus-timer) {
   4328    max-width: calc(var(--widgets-max-cols) * var(--widgets-card-width) + (var(--widgets-max-cols) - 1) * var(--widgets-grid-gap));
   4329    justify-content: center;
   4330  }
   4331 }
   4332 @media (min-width: 1122px) {
   4333  .widgets-container:has(.lists), .widgets-container:has(.focus-timer) {
   4334    --widgets-grid-gap: var(--space-xlarge);
   4335  }
   4336 }
   4337 @media (min-width: 1122px) {
   4338  .has-sections-grid .widgets-container:has(.lists), .has-sections-grid .widgets-container:has(.focus-timer) {
   4339    --widgets-grid-gap: var(--space-large);
   4340  }
   4341 }
   4342 
   4343 .feature-highlight .feature-highlight-modal.widget-highlight-wrapper {
   4344  width: auto;
   4345  border-radius: var(--border-radius-medium);
   4346 }
   4347 .feature-highlight .feature-highlight-modal.widget-highlight-wrapper .content-wrapper {
   4348  margin: 0;
   4349  padding: var(--space-medium);
   4350 }
   4351 .feature-highlight .feature-highlight-modal.widget-highlight-wrapper .widget-highlight img {
   4352  border-radius: var(--border-radius-medium);
   4353  margin-block-end: var(--space-small);
   4354 }
   4355 .feature-highlight .feature-highlight-modal.widget-highlight-wrapper .widget-highlight h3 {
   4356  margin-block: 0 var(--space-xsmall);
   4357  font-size: var(--font-size-root);
   4358 }
   4359 .feature-highlight .feature-highlight-modal.widget-highlight-wrapper .widget-highlight p {
   4360  margin-block: 0;
   4361  font-size: var(--font-size-root);
   4362 }
   4363 .feature-highlight .feature-highlight-modal.widget-highlight-wrapper .message-icon {
   4364  display: none;
   4365 }
   4366 .feature-highlight .feature-highlight-modal.widget-highlight-wrapper moz-button {
   4367  position: absolute;
   4368  inset-inline-end: var(--space-medium);
   4369  inset-block-start: var(--space-medium);
   4370 }
   4371 
   4372 /* This Source Code Form is subject to the terms of the Mozilla Public
   4373 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
   4374 * You can obtain one at http://mozilla.org/MPL/2.0/. */
   4375 .lists {
   4376  background: var(--newtab-background-card);
   4377  transition: opacity 0.2s ease;
   4378  grid-column: span 1;
   4379  width: var(--newtab-card-grid-layout-width);
   4380  border-radius: var(--border-radius-large);
   4381  padding-block-start: var(--space-medium);
   4382  height: var(--newtab-card-height);
   4383  box-shadow: var(--box-shadow-card);
   4384  position: relative;
   4385  display: flex;
   4386  flex-direction: column;
   4387 }
   4388 .lists:hover {
   4389  background: var(--newtab-background-color-secondary);
   4390 }
   4391 .has-sections-grid .lists {
   4392  width: var(--newtab-card-width-medium);
   4393 }
   4394 .lists .confetti-canvas {
   4395  position: absolute;
   4396  inset-block-start: 0;
   4397  inset-inline-start: 0;
   4398  width: 100%;
   4399  height: 100%;
   4400  pointer-events: none;
   4401  z-index: 1;
   4402  /* adjust as needed to sit above background but below UI */
   4403 }
   4404 .lists .select-wrapper {
   4405  padding-inline: var(--space-medium);
   4406  display: flex;
   4407  justify-content: flex-start;
   4408  position: relative;
   4409  align-items: center;
   4410  gap: var(--space-medium);
   4411 }
   4412 .lists .select-wrapper moz-button {
   4413  visibility: hidden;
   4414  margin-inline-start: auto;
   4415 }
   4416 .lists:hover .select-wrapper moz-button, .lists:focus-within .select-wrapper moz-button,
   4417 .lists .select-wrapper panel-list[open] .select-wrapper moz-button {
   4418  visibility: visible;
   4419 }
   4420 .lists .edit-list {
   4421  outline: var(--focus-outline);
   4422 }
   4423 .lists .add-task-container {
   4424  margin-block: var(--space-small);
   4425  padding-inline: var(--space-medium);
   4426  position: relative;
   4427 }
   4428 .lists .add-task-container .icon.icon-add {
   4429  position: absolute;
   4430  inset-block-start: 50%;
   4431  transform: translateY(-50%);
   4432  inset-inline-start: calc(var(--space-medium) + var(--space-small));
   4433 }
   4434 .lists .add-task-container .icon.icon-add.icon-disabled {
   4435  fill: var(--text-color-disabled);
   4436 }
   4437 .lists .add-task-container .add-task-input {
   4438  background: var(--button-background-color);
   4439  padding-block: var(--space-small);
   4440  padding-inline-start: calc(var(--space-large) * 2 + var(--space-xsmall));
   4441  padding-inline-end: var(--space-large);
   4442  outline: none;
   4443  border: none;
   4444  border-radius: var(--border-radius-small);
   4445  width: 100%;
   4446 }
   4447 .lists .add-task-container .add-task-input:focus {
   4448  outline: var(--focus-outline);
   4449 }
   4450 .lists .add-task-container .add-task-input:focus::placeholder {
   4451  color: var(--newtab-text-primary-color);
   4452 }
   4453 .lists .add-task-container .add-task-input:disabled {
   4454  background-color: var(--button-background-color-ghost);
   4455  color: var(--text-color-disabled);
   4456  outline: var(--border-width) solid var(--border-color-interactive-disabled);
   4457 }
   4458 .lists .task-list-wrapper {
   4459  height: 100%;
   4460  padding-block-start: var(--space-xsmall);
   4461 }
   4462 .lists fieldset {
   4463  margin: 0;
   4464  padding-block: 0;
   4465  padding-inline: var(--space-medium);
   4466  border: none;
   4467  overflow-y: auto;
   4468  max-height: 165px;
   4469 }
   4470 .lists fieldset:focus {
   4471  outline: var(--focus-outline);
   4472 }
   4473 .lists .task-item {
   4474  align-items: center;
   4475  background: transparent;
   4476  border-radius: var(--border-radius-small);
   4477  display: flex;
   4478  justify-content: space-between;
   4479  transition: opacity 300ms ease;
   4480  margin-block-end: var(--space-xsmall);
   4481 }
   4482 .lists .task-item.task-type-tasks:last-of-type {
   4483  margin-block-end: var(--space-small);
   4484 }
   4485 @media (prefers-reduced-motion: no-preference) {
   4486  .lists .task-item.exiting {
   4487    opacity: 0;
   4488  }
   4489 }
   4490 .lists .task-item .checkbox-wrapper {
   4491  display: flex;
   4492  align-items: center;
   4493  flex-grow: 2;
   4494  padding-block: var(--space-small);
   4495 }
   4496 .lists .task-item .checkbox-wrapper span {
   4497  -webkit-line-clamp: 3;
   4498  overflow: hidden;
   4499  text-overflow: ellipsis;
   4500  word-break: break-word;
   4501  white-space: normal;
   4502  max-width: 180px;
   4503 }
   4504 .lists .task-item input[type=checkbox] {
   4505  height: var(--size-item-small);
   4506  width: var(--size-item-small);
   4507  accent-color: var(--color-accent-primary);
   4508  margin-inline-start: var(--space-small);
   4509  padding: 0;
   4510 }
   4511 .lists .task-item .task-label {
   4512  position: relative;
   4513  padding-inline-start: var(--space-small);
   4514 }
   4515 .lists .task-item input:checked ~ .task-label {
   4516  color: var(--text-color-deemphasized);
   4517  text-decoration: line-through;
   4518 }
   4519 .lists .task-item moz-button {
   4520  margin-inline-end: var(--space-xsmall);
   4521  visibility: hidden;
   4522 }
   4523 .lists .task-item moz-button:has(+ panel-list[open]) {
   4524  visibility: visible;
   4525 }
   4526 .lists .task-item:hover, .lists .task-item:focus-visible, .lists .task-item:focus-within {
   4527  background: var(--button-background-color);
   4528 }
   4529 .lists .task-item:hover moz-button, .lists .task-item:focus-visible moz-button, .lists .task-item:focus-within moz-button {
   4530  visibility: visible;
   4531 }
   4532 .lists .task-item panel-list[open] ~ moz-button {
   4533  visibility: visible;
   4534 }
   4535 .lists .task-item .edit-task {
   4536  margin-inline-start: var(--space-small);
   4537  max-width: 180px;
   4538  border: none;
   4539  border-radius: 0;
   4540  user-select: text;
   4541 }
   4542 .lists .task-item .edit-task:focus {
   4543  outline: var(--focus-outline);
   4544 }
   4545 .lists .empty-list {
   4546  display: flex;
   4547  flex-direction: column;
   4548  justify-content: center;
   4549  align-items: center;
   4550  gap: var(--space-small);
   4551  height: 100%;
   4552  padding-block-end: var(--space-medium);
   4553 }
   4554 .lightWallpaper .lists .empty-list {
   4555  color-scheme: light;
   4556 }
   4557 .darkWallpaper .lists .empty-list {
   4558  color-scheme: dark;
   4559 }
   4560 .lists .empty-list .empty-list-text {
   4561  margin: 0;
   4562  text-align: center;
   4563  color: var(--text-color-deemphasized);
   4564  font-size: var(--font-size-small);
   4565  padding-inline: var(--space-medium);
   4566 }
   4567 .lists .completed-task-wrapper {
   4568  display: flex;
   4569  flex-direction: column;
   4570  gap: var(--space-small);
   4571 }
   4572 .lists .completed-task-wrapper summary {
   4573  list-style: none;
   4574 }
   4575 .lists .completed-task-wrapper summary:focus {
   4576  outline: var(--focus-outline);
   4577 }
   4578 .lists .completed-task-wrapper summary .completed-title {
   4579  color: var(--text-color-deemphasized);
   4580  position: relative;
   4581 }
   4582 .lists .completed-task-wrapper summary .completed-title::after {
   4583  content: "";
   4584  -moz-context-properties: fill;
   4585  fill: var(--button-icon-fill);
   4586  background-image: url("chrome://global/skin/icons/arrow-right.svg");
   4587  height: var(--icon-size-small);
   4588  width: var(--icon-size-small);
   4589  position: absolute;
   4590  inset-inline-end: calc(-1 * var(--space-xlarge));
   4591  inset-block-start: 50%;
   4592  transform: translateY(-50%);
   4593 }
   4594 .lists .completed-task-wrapper summary .completed-title:dir(rtl)::after {
   4595  background-image: url("chrome://global/skin/icons/arrow-left.svg");
   4596 }
   4597 .lists .completed-task-wrapper[open] .completed-title::after {
   4598  background-image: url("chrome://global/skin/icons/arrow-down.svg");
   4599 }
   4600 
   4601 /* This Source Code Form is subject to the terms of the Mozilla Public
   4602 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
   4603 * You can obtain one at http://mozilla.org/MPL/2.0/. */
   4604 .focus-timer {
   4605  background: var(--newtab-background-card);
   4606  transition: opacity 0.2s ease;
   4607  grid-column: span 1;
   4608  width: var(--newtab-card-grid-layout-width);
   4609  border-radius: var(--border-radius-large);
   4610  padding-block: var(--space-medium);
   4611  height: var(--newtab-card-height);
   4612  display: flex;
   4613  flex-direction: column;
   4614  align-items: center;
   4615  box-shadow: var(--box-shadow-card);
   4616 }
   4617 .focus-timer:hover {
   4618  background: var(--newtab-background-color-secondary);
   4619 }
   4620 .has-sections-grid .focus-timer {
   4621  width: var(--newtab-card-width-medium);
   4622 }
   4623 
   4624 .focus-timer-tabs {
   4625  display: flex;
   4626  margin-block-end: var(--space-medium);
   4627  position: relative;
   4628  width: 100%;
   4629  padding-inline: var(--space-medium);
   4630 }
   4631 
   4632 .focus-timer-tabs-buttons {
   4633  display: flex;
   4634  gap: var(--space-xxsmall);
   4635  justify-content: center;
   4636  flex-grow: 1;
   4637 }
   4638 .focus-timer-tabs-buttons moz-button {
   4639  flex-grow: 1;
   4640 }
   4641 .focus-timer-tabs-buttons moz-button:first-of-type::part(button) {
   4642  border-end-end-radius: 0;
   4643  border-start-end-radius: 0;
   4644 }
   4645 .focus-timer-tabs-buttons moz-button:last-of-type::part(button) {
   4646  border-start-start-radius: 0;
   4647  border-end-start-radius: 0;
   4648 }
   4649 
   4650 .newtab-widget-timer-notification-title-wrapper {
   4651  display: flex;
   4652  justify-content: space-between;
   4653  align-items: center;
   4654  width: 100%;
   4655  padding-inline: var(--space-medium);
   4656  margin-block-end: var(--space-medium);
   4657 }
   4658 .newtab-widget-timer-notification-title-wrapper h3 {
   4659  font-size: var(--button-font-size);
   4660  font-weight: var(--heading-font-weight);
   4661  margin-block: 0;
   4662 }
   4663 
   4664 .focus-timer-context-menu-wrapper {
   4665  opacity: 0;
   4666  pointer-events: none;
   4667 }
   4668 
   4669 .focus-timer:hover .focus-timer-context-menu-wrapper, .focus-timer:focus-within .focus-timer-context-menu-wrapper {
   4670  opacity: 1;
   4671  pointer-events: auto;
   4672 }
   4673 
   4674 .progress-circle-wrapper {
   4675  /* Colours for the main timer */
   4676  --timer-red: var(--color-red-50);
   4677  --timer-orange: var(--color-orange-30);
   4678  /* Colours for the break timer */
   4679  --timer-blue: var(--color-blue-20);
   4680  --timer-violet: var(--color-violet-20);
   4681  /* Complete timer */
   4682  --timer-green: var(--color-green-20);
   4683  min-height: 138px;
   4684  position: relative;
   4685  width: 138px;
   4686  overflow: hidden;
   4687  margin-block-end: var(--space-small);
   4688  /* main timer colours */
   4689  /* break timer colours */
   4690  /* timer turns green when complete */
   4691 }
   4692 .progress-circle-wrapper.is-small {
   4693  min-height: 114px;
   4694  width: 114px;
   4695 }
   4696 .progress-circle-wrapper.is-small .progress-circle-label {
   4697  font-size: var(--font-size-xxlarge);
   4698 }
   4699 .progress-circle-wrapper .progress-circle-background,
   4700 .progress-circle-wrapper .progress-circle-background-break,
   4701 .progress-circle-wrapper .progress-circle,
   4702 .progress-circle-wrapper .progress-circle-complete {
   4703  --thickness: var(--space-small);
   4704  border-radius: var(--border-radius-circle);
   4705  inset: 0;
   4706  mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), black calc(100% - var(--thickness)));
   4707  position: absolute;
   4708 }
   4709 .progress-circle-wrapper .progress-circle,
   4710 .progress-circle-wrapper .progress-circle-complete {
   4711  background-color: var(--border-color-interactive);
   4712 }
   4713 .progress-circle-wrapper .progress-circle-background {
   4714  background: conic-gradient(var(--timer-orange) 0deg, var(--timer-red) 150deg, var(--timer-red) 210deg, var(--timer-orange) 360deg);
   4715 }
   4716 .progress-circle-wrapper .progress-circle-background-break {
   4717  background: conic-gradient(var(--timer-violet) 0deg, var(--timer-blue) 150deg, var(--timer-blue) 210deg, var(--timer-violet) 360deg);
   4718 }
   4719 .progress-circle-wrapper .progress-circle-complete {
   4720  background: var(--timer-green);
   4721  opacity: 0;
   4722  transition: opacity 1.5s ease-in-out;
   4723  z-index: 2;
   4724 }
   4725 .progress-circle-wrapper .progress-circle-complete.visible {
   4726  opacity: 1;
   4727 }
   4728 .progress-circle-wrapper .focus-hidden {
   4729  opacity: 0;
   4730  pointer-events: none;
   4731 }
   4732 .progress-circle-wrapper .focus-visible {
   4733  opacity: 1;
   4734 }
   4735 .progress-circle-wrapper .break-hidden {
   4736  opacity: 0;
   4737  pointer-events: none;
   4738 }
   4739 .progress-circle-wrapper .break-visible {
   4740  opacity: 1;
   4741 }
   4742 .progress-circle-wrapper .progress-circle-label {
   4743  align-items: center;
   4744  color: var(--text-color);
   4745  display: flex;
   4746  font-size: calc(var(--font-size-large) * 2);
   4747  font-weight: var(--font-weight-semibold);
   4748  font-variant-numeric: tabular-nums;
   4749  height: 100%;
   4750  inset-block-start: 0;
   4751  inset-inline-start: 0;
   4752  justify-content: center;
   4753  position: absolute;
   4754  width: 100%;
   4755  z-index: 2;
   4756 }
   4757 
   4758 .timer-set-minutes:focus,
   4759 .timer-set-seconds:focus {
   4760  outline: var(--focus-outline);
   4761 }
   4762 
   4763 .focus-timer-controls {
   4764  display: flex;
   4765  flex-direction: row;
   4766  align-items: center;
   4767  gap: var(--space-medium);
   4768 }
   4769 
   4770 .timer-notification-status {
   4771  color: var(--text-color-deemphasized);
   4772  font-size: var(--font-size-small);
   4773  margin-block-start: var(--space-small);
   4774 }
   4775 
   4776 .weather-forecast-widget {
   4777  background: var(--newtab-background-card);
   4778  transition: opacity 0.2s ease;
   4779  grid-column: span 1;
   4780  width: var(--newtab-card-grid-layout-width);
   4781  border-radius: var(--border-radius-large);
   4782  padding: var(--space-medium);
   4783  height: var(--newtab-card-height);
   4784  display: flex;
   4785  flex-direction: column;
   4786  box-shadow: var(--box-shadow-card);
   4787  --weather-sunny-background-color: light-dark(var(--color-yellow-0), var(--color-yellow-90));
   4788  --weather-cloudy-background-color: light-dark(var(--color-gray-20), var(--color-gray-80));
   4789  --weather-rainy-background-color: light-dark(var(--color-blue-0), var(--color-blue-90));
   4790  --weather-snowy-background-color: light-dark(var(--color-violet-0), var(--color-violet-90));
   4791  --weather-hot-background-color: light-dark(var(--color-orange-0), var(--color-orange-90));
   4792 }
   4793 .weather-forecast-widget:hover {
   4794  background: var(--newtab-background-color-secondary);
   4795 }
   4796 .has-sections-grid .weather-forecast-widget {
   4797  width: var(--newtab-card-width-medium);
   4798 }
   4799 .weather-forecast-widget .city-wrapper {
   4800  display: flex;
   4801  align-items: center;
   4802 }
   4803 .weather-forecast-widget .city-wrapper h3 {
   4804  margin-block: 0;
   4805  font-weight: var(--font-weight-semibold);
   4806 }
   4807 .weather-forecast-widget .current-weather-wrapper {
   4808  display: flex;
   4809  align-items: center;
   4810  margin-block: var(--space-small);
   4811  padding: var(--space-medium);
   4812  border-radius: var(--border-radius-medium);
   4813  width: 100%;
   4814 }
   4815 .weather-forecast-widget .current-weather-wrapper:has(.iconId1, .iconId2, .iconId3, .iconId4, .iconId5, .iconId6, .iconId33) {
   4816  background-color: var(--weather-sunny-background-color);
   4817 }
   4818 .weather-forecast-widget .current-weather-wrapper:has(.iconId7, .iconId8, .iconI11, .iconId32, .iconId34, .iconId35, .iconId36, .iconId37, .iconId38) {
   4819  background-color: var(--weather-cloudy-background-color);
   4820 }
   4821 .weather-forecast-widget .current-weather-wrapper:has(.iconId12, .iconId13, .iconId14, .iconId15, .iconId16, .iconId17, .iconId18, .iconId39, .iconId40, .iconId41, .iconId42) {
   4822  background-color: var(--weather-rainy-background-color);
   4823 }
   4824 .weather-forecast-widget .current-weather-wrapper:has(.iconId19, .iconId20, .iconId21, .iconId22, .iconId23, .iconId24, .iconId25, .iconId26, .iconId29, .iconId31, .iconId43, .iconId44) {
   4825  background-color: var(--weather-snowy-background-color);
   4826 }
   4827 .weather-forecast-widget .current-weather-wrapper:has(.iconId30) {
   4828  background-color: var(--weather-hot-background-color);
   4829 }
   4830 .weather-forecast-widget .weather-icon-column {
   4831  width: var(--size-item-large);
   4832  height: var(--size-item-large);
   4833  display: flex;
   4834  align-items: center;
   4835  justify-content: center;
   4836  align-self: center;
   4837 }
   4838 .weather-forecast-widget .weather-icon {
   4839  width: var(--size-item-large);
   4840  height: auto;
   4841  vertical-align: middle;
   4842 }
   4843 @media (prefers-contrast) {
   4844  .weather-forecast-widget .weather-icon {
   4845    -moz-context-properties: fill, stroke;
   4846    fill: currentColor;
   4847    stroke: currentColor;
   4848  }
   4849 }
   4850 .weather-forecast-widget .weather-icon.iconId1 {
   4851  content: url("chrome://browser/skin/weather/sunny.svg");
   4852 }
   4853 .weather-forecast-widget .weather-icon.iconId2 {
   4854  content: url("chrome://browser/skin/weather/mostly-sunny.svg");
   4855 }
   4856 .weather-forecast-widget .weather-icon:is(.iconId3, .iconId4, .iconId6) {
   4857  content: url("chrome://browser/skin/weather/partly-sunny.svg");
   4858 }
   4859 .weather-forecast-widget .weather-icon.iconId5 {
   4860  content: url("chrome://browser/skin/weather/hazy-sunshine.svg");
   4861 }
   4862 .weather-forecast-widget .weather-icon:is(.iconId7, .iconId8) {
   4863  content: url("chrome://browser/skin/weather/cloudy.svg");
   4864 }
   4865 .weather-forecast-widget .weather-icon.iconId11 {
   4866  content: url("chrome://browser/skin/weather/fog.svg");
   4867 }
   4868 .weather-forecast-widget .weather-icon.iconId12 {
   4869  content: url("chrome://browser/skin/weather/showers.svg");
   4870 }
   4871 .weather-forecast-widget .weather-icon:is(.iconId13, .iconId14) {
   4872  content: url("chrome://browser/skin/weather/mostly-cloudy-with-showers.svg");
   4873 }
   4874 .weather-forecast-widget .weather-icon.iconId15 {
   4875  content: url("chrome://browser/skin/weather/thunderstorms.svg");
   4876 }
   4877 .weather-forecast-widget .weather-icon:is(.iconId16, .iconId17) {
   4878  content: url("chrome://browser/skin/weather/mostly-cloudy-with-thunderstorms.svg");
   4879 }
   4880 .weather-forecast-widget .weather-icon.iconId18 {
   4881  content: url("chrome://browser/skin/weather/rain.svg");
   4882 }
   4883 .weather-forecast-widget .weather-icon:is(.iconId19, .iconId20, .iconId25) {
   4884  content: url("chrome://browser/skin/weather/flurries.svg");
   4885 }
   4886 .weather-forecast-widget .weather-icon.iconId21 {
   4887  content: url("chrome://browser/skin/weather/partly-sunny-with-flurries.svg");
   4888 }
   4889 .weather-forecast-widget .weather-icon:is(.iconId22, .iconId23) {
   4890  content: url("chrome://browser/skin/weather/snow.svg");
   4891 }
   4892 .weather-forecast-widget .weather-icon:is(.iconId24, .iconId31) {
   4893  content: url("chrome://browser/skin/weather/ice.svg");
   4894 }
   4895 .weather-forecast-widget .weather-icon:is(.iconId26, .iconId29) {
   4896  content: url("chrome://browser/skin/weather/freezing-rain.svg");
   4897 }
   4898 .weather-forecast-widget .weather-icon.iconId30 {
   4899  content: url("chrome://browser/skin/weather/hot.svg");
   4900 }
   4901 .weather-forecast-widget .weather-icon.iconId32 {
   4902  content: url("chrome://browser/skin/weather/windy.svg");
   4903 }
   4904 .weather-forecast-widget .weather-icon.iconId33 {
   4905  content: url("chrome://browser/skin/weather/night-clear.svg");
   4906 }
   4907 .weather-forecast-widget .weather-icon:is(.iconId34, .iconId35, .iconId36, .iconId38) {
   4908  content: url("chrome://browser/skin/weather/night-mostly-clear.svg");
   4909 }
   4910 .weather-forecast-widget .weather-icon.iconId37 {
   4911  content: url("chrome://browser/skin/weather/night-hazy-moonlight.svg");
   4912 }
   4913 .weather-forecast-widget .weather-icon:is(.iconId39, .iconId40) {
   4914  content: url("chrome://browser/skin/weather/night-partly-cloudy-with-showers.svg");
   4915  height: var(--size-item-large);
   4916 }
   4917 .weather-forecast-widget .weather-icon:is(.iconId41, .iconId42) {
   4918  content: url("chrome://browser/skin/weather/night-partly-cloudy-with-thunderstorms.svg");
   4919 }
   4920 .weather-forecast-widget .weather-icon:is(.iconId43, .iconId44) {
   4921  content: url("chrome://browser/skin/weather/night-mostly-cloudy-with-flurries.svg");
   4922 }
   4923 
   4924 .weather-info-column {
   4925  display: flex;
   4926  flex-direction: column;
   4927  margin-inline: var(--space-medium);
   4928 }
   4929 .weather-info-column .temperature-unit {
   4930  text-transform: uppercase;
   4931  font-weight: var(--font-weight-semibold);
   4932 }
   4933 .weather-info-column .temperature-description {
   4934  font-size: var(--font-size-small);
   4935  color: var(--text-color-deemphasized);
   4936 }
   4937 
   4938 .high-low-column {
   4939  display: flex;
   4940  align-items: flex-end;
   4941  align-self: flex-start;
   4942  margin-inline-start: auto;
   4943  color: var(--text-color-deemphasized);
   4944 }
   4945 .high-low-column .high-temperature {
   4946  margin-inline-end: var(--space-small);
   4947 }
   4948 .high-low-column .arrow-icon {
   4949  display: inline-block;
   4950  width: var(--size-item-xsmall);
   4951  height: var(--size-item-xsmall);
   4952  background-size: contain;
   4953  background-repeat: no-repeat;
   4954  background-position: center;
   4955  -moz-context-properties: fill, fill-opacity;
   4956  fill: currentColor;
   4957 }
   4958 .high-low-column .arrow-icon.arrow-up {
   4959  background-image: url("chrome://global/skin/icons/shaft-arrow-up.svg");
   4960 }
   4961 .high-low-column .arrow-icon.arrow-down {
   4962  background-image: url("chrome://global/skin/icons/shaft-arrow-down.svg");
   4963 }
   4964 
   4965 hr {
   4966  border: 0;
   4967  border-block-start: 1px solid var(--border-color);
   4968  width: 100%;
   4969 }
   4970 
   4971 .forecast-row .today-forecast {
   4972  margin-block-start: 0;
   4973  font-weight: var(--font-weight-semibold);
   4974 }
   4975 .forecast-row .forecast-row-items {
   4976  list-style: none;
   4977  display: flex;
   4978  justify-content: center;
   4979  padding: 0;
   4980  margin-block-start: var(--space-small);
   4981 }
   4982 .forecast-row .forecast-row-items li {
   4983  background: var(--newtab-background-color);
   4984  border-radius: var(--border-radius-small);
   4985  display: flex;
   4986  flex-direction: column;
   4987  align-items: center;
   4988  margin-inline: var(--space-xsmall);
   4989  padding-inline: var(--space-small);
   4990  padding-block: var(--space-xsmall);
   4991  font-size: var(--font-size-small);
   4992 }
   4993 
   4994 .weather-forecast-footer {
   4995  display: flex;
   4996  align-items: center;
   4997  justify-content: space-between;
   4998  margin-block-start: auto;
   4999 }
   5000 .weather-forecast-footer a {
   5001  font-size: var(--font-size-small);
   5002 }
   5003 .weather-forecast-footer span {
   5004  font-size: var(--font-size-xsmall);
   5005 }
   5006 
   5007 .ds-card-grid .ds-card {
   5008  background: var(--newtab-background-color-secondary);
   5009  border-radius: var(--border-radius-small);
   5010 }
   5011 .ds-card-grid .ds-card:not(.placeholder) {
   5012  border-radius: var(--border-radius-medium);
   5013  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
   5014 }
   5015 .ds-card-grid .ds-card:not(.placeholder) img,
   5016 .ds-card-grid .ds-card:not(.placeholder) .placeholder-image {
   5017  border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
   5018 }
   5019 
   5020 .ds-card.refined-cards:not(.placeholder) .img-wrapper .img {
   5021  height: 160px;
   5022  width: 100%;
   5023 }
   5024 
   5025 .ds-card-grid {
   5026  display: grid;
   5027  grid-gap: var(--space-xlarge);
   5028  position: relative;
   5029 }
   5030 .ds-card-grid.ds-card-grid-compact {
   5031  grid-gap: var(--space-large);
   5032 }
   5033 .ds-card-grid.ad-sizing-variant-a, .ds-card-grid.ad-sizing-variant-b {
   5034  row-gap: var(--space-xlarge);
   5035  column-gap: var(--space-large);
   5036 }
   5037 .ds-card-grid .ds-card-link:focus {
   5038  border: 0;
   5039  outline: var(--focus-outline);
   5040  transition: none;
   5041  border-radius: var(--border-radius-medium);
   5042 }
   5043 .ds-column-5 .ds-card-grid, .ds-column-6 .ds-card-grid, .ds-column-7 .ds-card-grid, .ds-column-8 .ds-card-grid {
   5044  grid-template-columns: repeat(2, 1fr);
   5045 }
   5046 .ds-column-9 .ds-card-grid, .ds-column-10 .ds-card-grid, .ds-column-11 .ds-card-grid, .ds-column-12 .ds-card-grid {
   5047  grid-template-columns: repeat(1, 1fr);
   5048 }
   5049 @media (min-width: 610px) {
   5050  .ds-column-9 .ds-card-grid, .ds-column-10 .ds-card-grid, .ds-column-11 .ds-card-grid, .ds-column-12 .ds-card-grid {
   5051    grid-template-columns: repeat(2, 1fr);
   5052  }
   5053 }
   5054 @media (min-width: 866px) {
   5055  .ds-column-9 .ds-card-grid, .ds-column-10 .ds-card-grid, .ds-column-11 .ds-card-grid, .ds-column-12 .ds-card-grid {
   5056    grid-template-columns: repeat(3, 1fr);
   5057  }
   5058 }
   5059 .ds-column-9 .ds-card-grid .title, .ds-column-10 .ds-card-grid .title, .ds-column-11 .ds-card-grid .title, .ds-column-12 .ds-card-grid .title {
   5060  font-size: var(--font-size-large);
   5061 }
   5062 .ds-column-9 .ds-card-grid .excerpt, .ds-column-10 .ds-card-grid .excerpt, .ds-column-11 .ds-card-grid .excerpt, .ds-column-12 .ds-card-grid .excerpt {
   5063  font-size: 15;
   5064  -webkit-line-clamp: 3;
   5065  line-height: 24;
   5066 }
   5067 .ds-card-grid.empty {
   5068  grid-template-columns: auto;
   5069 }
   5070 .ds-column-9 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-10 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-11 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-12 .ds-card-grid.ds-card-grid-four-card-variant {
   5071  grid-template-columns: repeat(1, 1fr);
   5072 }
   5073 @media (min-width: 610px) {
   5074  .ds-column-9 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-10 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-11 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-12 .ds-card-grid.ds-card-grid-four-card-variant {
   5075    grid-template-columns: repeat(2, 1fr);
   5076  }
   5077 }
   5078 @media (min-width: 866px) {
   5079  .ds-column-9 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-10 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-11 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-12 .ds-card-grid.ds-card-grid-four-card-variant {
   5080    grid-template-columns: repeat(3, 1fr);
   5081  }
   5082 }
   5083 @media (min-width: 1122px) {
   5084  .ds-column-9 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-10 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-11 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-12 .ds-card-grid.ds-card-grid-four-card-variant {
   5085    grid-template-columns: repeat(4, 1fr);
   5086  }
   5087 }
   5088 .ds-card-grid.ds-card-grid-four-card-variant .ds-card.placeholder {
   5089  min-height: 247px;
   5090 }
   5091 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-footer {
   5092  margin-block-start: var(--space-small);
   5093 }
   5094 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .source,
   5095 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-sponsored-label,
   5096 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .status-message .story-context-label {
   5097  color: var(--newtab-text-secondary-color);
   5098  -webkit-line-clamp: 2;
   5099 }
   5100 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .source,
   5101 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-sponsored-label {
   5102  font-size: var(--font-size-small);
   5103 }
   5104 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .status-message .story-context-label {
   5105  font-size: var(--font-size-small);
   5106 }
   5107 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-badge-icon {
   5108  margin-inline-end: var(--space-xxsmall);
   5109  margin-block-end: var(--space-xxsmall);
   5110  height: 14px;
   5111  width: 14px;
   5112  background-size: 14px;
   5113 }
   5114 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .title {
   5115  font-size: inherit;
   5116 }
   5117 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .info-wrap {
   5118  flex-grow: 0;
   5119 }
   5120 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout {
   5121  grid-template-columns: repeat(1, 1fr);
   5122 }
   5123 @media (min-width: 610px) {
   5124  .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout {
   5125    grid-template-columns: repeat(2, 1fr);
   5126  }
   5127 }
   5128 @media (min-width: 866px) {
   5129  .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout {
   5130    grid-template-columns: repeat(3, 1fr);
   5131  }
   5132 }
   5133 @media (height <= 1065px) {
   5134  .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt {
   5135    display: none;
   5136  }
   5137 }
   5138 @media (max-width: 1122px) {
   5139  .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder {
   5140    min-height: 247px;
   5141  }
   5142  .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer {
   5143    margin-block-start: var(--space-small);
   5144  }
   5145  .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
   5146 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
   5147 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
   5148 .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
   5149 .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
   5150 .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
   5151 .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
   5152 .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
   5153 .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label {
   5154    color: var(--newtab-text-secondary-color);
   5155    -webkit-line-clamp: 2;
   5156  }
   5157  .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
   5158 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
   5159 .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
   5160 .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
   5161 .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label {
   5162    font-size: var(--font-size-small);
   5163  }
   5164  .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label {
   5165    font-size: var(--font-size-small);
   5166  }
   5167  .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon {
   5168    margin-inline-end: var(--space-xxsmall);
   5169    margin-block-end: var(--space-xxsmall);
   5170    height: 14px;
   5171    width: 14px;
   5172    background-size: 14px;
   5173  }
   5174  .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title {
   5175    font-size: inherit;
   5176  }
   5177  .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap {
   5178    flex-grow: 0;
   5179  }
   5180 }
   5181 @media (min-width: 1122px) and (height <= 964px) {
   5182  .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout {
   5183    grid-template-columns: repeat(4, 1fr);
   5184  }
   5185  .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder {
   5186    min-height: 247px;
   5187  }
   5188  .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer {
   5189    margin-block-start: var(--space-small);
   5190  }
   5191  .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
   5192 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
   5193 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
   5194 .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
   5195 .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
   5196 .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
   5197 .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
   5198 .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
   5199 .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label {
   5200    color: var(--newtab-text-secondary-color);
   5201    -webkit-line-clamp: 2;
   5202  }
   5203  .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
   5204 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
   5205 .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
   5206 .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
   5207 .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label {
   5208    font-size: var(--font-size-small);
   5209  }
   5210  .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label {
   5211    font-size: var(--font-size-small);
   5212  }
   5213  .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon {
   5214    margin-inline-end: var(--space-xxsmall);
   5215    margin-block-end: var(--space-xxsmall);
   5216    height: 14px;
   5217    width: 14px;
   5218    background-size: 14px;
   5219  }
   5220  .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title {
   5221    font-size: inherit;
   5222  }
   5223  .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap {
   5224    flex-grow: 0;
   5225  }
   5226 }
   5227 
   5228 .outer-wrapper .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder),
   5229 .outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) {
   5230  box-shadow: none;
   5231  background: none;
   5232 }
   5233 .outer-wrapper .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .ds-card-link:focus,
   5234 .outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .ds-card-link:focus {
   5235  box-shadow: none;
   5236 }
   5237 .outer-wrapper .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .ds-card-link:focus .img-wrapper .img img,
   5238 .outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .ds-card-link:focus .img-wrapper .img img {
   5239  border: 0;
   5240  outline: var(--focus-outline);
   5241 }
   5242 .outer-wrapper .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .img-wrapper .img img,
   5243 .outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .img-wrapper .img img {
   5244  border-radius: var(--border-radius-medium);
   5245  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
   5246 }
   5247 .outer-wrapper .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .meta,
   5248 .outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .meta {
   5249  padding: var(--space-medium) 0 0;
   5250 }
   5251 
   5252 .ds-layout .ds-sub-header {
   5253  margin-block-start: var(--space-xlarge);
   5254 }
   5255 .ds-layout .ds-sub-header .section-title-container {
   5256  flex-direction: row;
   5257  align-items: baseline;
   5258  justify-content: space-between;
   5259  display: flex;
   5260 }
   5261 .ds-layout .ds-sub-header .section-sub-link {
   5262  color: var(--newtab-primary-action-background);
   5263  font-size: inherit;
   5264  cursor: pointer;
   5265 }
   5266 .ds-layout .ds-sub-header .section-sub-link:hover {
   5267  text-decoration: underline;
   5268 }
   5269 .ds-layout .ds-sub-header .section-sub-link:active {
   5270  color: var(--newtab-primary-element-active-color);
   5271 }
   5272 
   5273 .has-sections-grid .ds-outer-wrapper-breakpoint-override .ds-layout-topsites {
   5274  position: relative;
   5275 }
   5276 .has-sections-grid .ds-outer-wrapper-breakpoint-override .ds-layout-topsites .top-sites-list-wrapper {
   5277  margin-inline: auto;
   5278  width: 100%;
   5279 }
   5280 .has-sections-grid .ds-outer-wrapper-breakpoint-override .ds-layout-topsites .hide-for-narrow {
   5281  display: none;
   5282 }
   5283 @media (min-width: 866px) {
   5284  .has-sections-grid .ds-outer-wrapper-breakpoint-override .ds-layout-topsites .hide-for-narrow {
   5285    display: none;
   5286  }
   5287 }
   5288 @media (min-width: 1122px) {
   5289  .has-sections-grid .ds-outer-wrapper-breakpoint-override .ds-layout-topsites .hide-for-narrow {
   5290    display: inline-block;
   5291  }
   5292 }
   5293 
   5294 .has-sections-grid .ds-outer-wrapper-breakpoint-override main {
   5295  width: auto;
   5296 }
   5297 .has-sections-grid .ds-outer-wrapper-breakpoint-override main .ds-card {
   5298  width: 100%;
   5299  height: 100%;
   5300 }
   5301 .has-sections-grid .ds-outer-wrapper-breakpoint-override main .body-wrapper {
   5302  width: 346px;
   5303  margin: 0 auto;
   5304 }
   5305 @media (min-width: 610px) {
   5306  .has-sections-grid .ds-outer-wrapper-breakpoint-override main {
   5307    width: auto;
   5308  }
   5309  .has-sections-grid .ds-outer-wrapper-breakpoint-override main .body-wrapper {
   5310    width: 346px;
   5311  }
   5312 }
   5313 @media (min-width: 724px) {
   5314  .has-sections-grid .ds-outer-wrapper-breakpoint-override main {
   5315    width: auto;
   5316  }
   5317  .has-sections-grid .ds-outer-wrapper-breakpoint-override main .body-wrapper {
   5318    width: 659px;
   5319  }
   5320 }
   5321 @media (min-width: 1122px) {
   5322  .has-sections-grid .ds-outer-wrapper-breakpoint-override main {
   5323    width: auto;
   5324  }
   5325  .has-sections-grid .ds-outer-wrapper-breakpoint-override main .body-wrapper {
   5326    width: 989px;
   5327  }
   5328 }
   5329 @media (min-width: 1390px) {
   5330  .has-sections-grid .ds-outer-wrapper-breakpoint-override main {
   5331    width: auto;
   5332  }
   5333  .has-sections-grid .ds-outer-wrapper-breakpoint-override main .body-wrapper {
   5334    display: flex;
   5335    flex-direction: column;
   5336    width: 1311px;
   5337  }
   5338  .has-sections-grid .ds-outer-wrapper-breakpoint-override main .ds-highlights .card-outer {
   5339    min-width: 216px;
   5340  }
   5341 }
   5342 
   5343 .ds-section-wrapper {
   5344  padding-inline: 0;
   5345  position: relative;
   5346 }
   5347 .ds-section-wrapper .ds-section {
   5348  padding-block-end: var(--space-medium);
   5349 }
   5350 .ds-section-wrapper .ds-section:last-child {
   5351  padding-block-end: 0;
   5352 }
   5353 .ds-section-wrapper .ds-section .section-heading {
   5354  display: flex;
   5355  justify-content: space-between;
   5356  align-items: center;
   5357  margin-block: var(--space-small) var(--space-medium);
   5358 }
   5359 .ds-section-wrapper .ds-section .section-heading .section-heading-inline-start {
   5360  display: flex;
   5361  flex-direction: row;
   5362  align-items: flex-start;
   5363 }
   5364 .ds-section-wrapper .ds-section .section-title {
   5365  font-weight: var(--heading-font-weight);
   5366  font-size: var(--font-size-xlarge);
   5367  color: var(--newtab-contextual-text-primary-color);
   5368  margin-block: 0;
   5369 }
   5370 .lightWallpaper .ds-section-wrapper .ds-section .section-title {
   5371  color-scheme: light;
   5372 }
   5373 .darkWallpaper .ds-section-wrapper .ds-section .section-title {
   5374  color-scheme: dark;
   5375 }
   5376 @media (min-width: 724px) {
   5377  .ds-section-wrapper .ds-section .section-title {
   5378    font-size: var(--font-size-xxlarge);
   5379  }
   5380 }
   5381 .ds-section-wrapper .ds-section .section-subtitle {
   5382  color: var(--newtab-contextual-text-primary-color);
   5383  margin-block: var(--space-xsmall) 0;
   5384  font-size: var(--font-size-root);
   5385 }
   5386 .lightWallpaper .ds-section-wrapper .ds-section .section-subtitle {
   5387  color-scheme: light;
   5388 }
   5389 .darkWallpaper .ds-section-wrapper .ds-section .section-subtitle {
   5390  color-scheme: dark;
   5391 }
   5392 .ds-section-wrapper .section-context-wrapper {
   5393  display: flex;
   5394  justify-content: space-between;
   5395  align-items: center;
   5396  column-gap: var(--space-small);
   5397 }
   5398 .lightWallpaper .ds-section-wrapper .section-context-wrapper {
   5399  color-scheme: light;
   5400 }
   5401 .darkWallpaper .ds-section-wrapper .section-context-wrapper {
   5402  color-scheme: dark;
   5403 }
   5404 .ds-section-wrapper .section-follow {
   5405  position: relative;
   5406 }
   5407 .ds-section-wrapper .section-follow .section-button-following-text {
   5408  display: none;
   5409 }
   5410 .ds-section-wrapper .section-follow .section-button-unfollow-text {
   5411  display: none;
   5412 }
   5413 .ds-section-wrapper .section-follow.following .section-button-follow-text {
   5414  display: none;
   5415 }
   5416 .ds-section-wrapper .section-follow.following .section-button-following-text {
   5417  display: block;
   5418 }
   5419 .ds-section-wrapper .section-follow.following:hover .section-button-following-text {
   5420  display: none;
   5421 }
   5422 .ds-section-wrapper .section-follow.following:hover .section-button-unfollow-text {
   5423  display: block;
   5424 }
   5425 
   5426 .ds-section-grid.ds-card-grid {
   5427  grid-gap: var(--space-large);
   5428  grid-template-columns: repeat(1, 300px);
   5429 }
   5430 .ds-section-grid.ds-card-grid .ds-image.image-2, .ds-section-grid.ds-card-grid .ds-image.image-3, .ds-section-grid.ds-card-grid .ds-image.image-4 {
   5431  display: none;
   5432 }
   5433 .ds-section-grid.ds-card-grid .ds-image.image-1 {
   5434  display: block;
   5435 }
   5436 @media (min-width: 610px) {
   5437  .ds-section-grid.ds-card-grid .col-1-position-0 {
   5438    order: 0;
   5439  }
   5440  .ds-section-grid.ds-card-grid .col-1-position-1 {
   5441    order: 1;
   5442  }
   5443  .ds-section-grid.ds-card-grid .col-1-position-2 {
   5444    order: 2;
   5445  }
   5446  .ds-section-grid.ds-card-grid .col-1-position-3 {
   5447    order: 3;
   5448  }
   5449  .ds-section-grid.ds-card-grid .col-1-position-4 {
   5450    order: 4;
   5451  }
   5452  .ds-section-grid.ds-card-grid .col-1-position-5 {
   5453    order: 5;
   5454  }
   5455  .ds-section-grid.ds-card-grid .col-1-position-6 {
   5456    order: 6;
   5457  }
   5458  .ds-section-grid.ds-card-grid .col-1-position-7 {
   5459    order: 7;
   5460  }
   5461  .ds-section-grid.ds-card-grid .col-1-position-8 {
   5462    order: 8;
   5463  }
   5464  .ds-section-grid.ds-card-grid .col-1-position-9 {
   5465    order: 9;
   5466  }
   5467  .ds-section-grid.ds-card-grid .col-1-position-10 {
   5468    order: 10;
   5469  }
   5470  .ds-section-grid.ds-card-grid .col-1-position-11 {
   5471    order: 11;
   5472  }
   5473  .ds-section-grid.ds-card-grid .col-1-position-12 {
   5474    order: 12;
   5475  }
   5476  .ds-section-grid.ds-card-grid .col-1-position-13 {
   5477    order: 13;
   5478  }
   5479  .ds-section-grid.ds-card-grid .col-1-position-14 {
   5480    order: 14;
   5481  }
   5482  .ds-section-grid.ds-card-grid .col-1-position-15 {
   5483    order: 15;
   5484  }
   5485  .ds-section-grid.ds-card-grid .col-1-position-16 {
   5486    order: 16;
   5487  }
   5488  .ds-section-grid.ds-card-grid .col-1-small {
   5489    grid-row: span 1;
   5490    grid-column: span 1;
   5491    padding: var(--space-large);
   5492  }
   5493  .ds-section-grid.ds-card-grid .col-1-small.refined-cards.ds-card.sections-card-ui {
   5494    box-shadow: var(--box-shadow-card);
   5495  }
   5496  .ds-section-grid.ds-card-grid .col-1-small.refined-cards.ds-card.sections-card-ui:hover {
   5497    box-shadow: var(--box-shadow-card-hover);
   5498  }
   5499  .ds-section-grid.ds-card-grid .col-1-small.refined-cards .ds-card-link {
   5500    padding: var(--space-small);
   5501    flex-grow: 0;
   5502  }
   5503  .ds-section-grid.ds-card-grid .col-1-small.refined-cards .img-wrapper {
   5504    width: 110px;
   5505    height: 117px;
   5506  }
   5507  .ds-section-grid.ds-card-grid .col-1-small.refined-cards .meta {
   5508    padding: 0;
   5509    min-height: 117px;
   5510  }
   5511  .ds-section-grid.ds-card-grid .col-1-small.refined-cards .meta .info-wrap {
   5512    flex-grow: 1;
   5513  }
   5514  .ds-section-grid.ds-card-grid .col-1-small.refined-cards .meta .sections-card-footer {
   5515    max-width: 114px;
   5516    min-height: unset;
   5517    position: initial;
   5518    margin-block-start: auto;
   5519  }
   5520  .ds-section-grid.ds-card-grid .col-1-small.refined-cards .meta .sections-card-footer .source {
   5521    word-break: normal;
   5522    width: 114px;
   5523  }
   5524  .ds-section-grid.ds-card-grid .col-1-small.refined-cards .card-stp-button-hover-background {
   5525    background: transparent;
   5526  }
   5527  .ds-section-grid.ds-card-grid .col-1-small.refined-cards .card-stp-button-position-wrapper {
   5528    inset-inline-end: var(--space-small);
   5529    inset-block-end: var(--space-small);
   5530  }
   5531  .ds-section-grid.ds-card-grid .col-1-small.refined-cards .context-menu-position-container .context-menu-button {
   5532    height: 32px;
   5533    width: 32px;
   5534  }
   5535  .ds-section-grid.ds-card-grid .col-1-small.ds-card.sections-card-ui {
   5536    padding: unset;
   5537  }
   5538  .ds-section-grid.ds-card-grid .col-1-small .ds-card-link {
   5539    display: flex;
   5540    flex-direction: row;
   5541    position: relative;
   5542    align-items: center;
   5543    gap: var(--space-medium);
   5544    padding: var(--space-large);
   5545  }
   5546  .ds-section-grid.ds-card-grid .col-1-small .img-wrapper {
   5547    width: 100px;
   5548    flex-shrink: 0;
   5549    flex-grow: 0;
   5550    aspect-ratio: 5/6;
   5551  }
   5552  .ds-section-grid.ds-card-grid .col-1-small .img-wrapper .ds-image.img {
   5553    width: 100%;
   5554    height: 100%;
   5555    padding-block-start: 0;
   5556    min-width: 100%;
   5557  }
   5558  .ds-section-grid.ds-card-grid .col-1-small .img-wrapper .ds-image.img img {
   5559    width: 100%;
   5560    height: 100%;
   5561    border-radius: var(--border-radius-medium) var(--border-radius-medium);
   5562    object-fit: cover;
   5563  }
   5564  .ds-section-grid.ds-card-grid .col-1-small:not(.placeholder) .img-wrapper > .ds-image.img > img {
   5565    width: 100%;
   5566    border-radius: var(--border-radius-medium) var(--border-radius-medium);
   5567  }
   5568  .ds-section-grid.ds-card-grid .col-1-small .meta {
   5569    padding: 0;
   5570    align-self: flex-start;
   5571    min-height: 125px;
   5572  }
   5573  .ds-section-grid.ds-card-grid .col-1-small .meta .info-wrap .title {
   5574    font-size: var(--font-size-small);
   5575    margin-block: 0;
   5576    -webkit-line-clamp: 4;
   5577  }
   5578  .ds-section-grid.ds-card-grid .col-1-small .meta .sections-card-footer {
   5579    margin-block-start: var(--space-xxsmall);
   5580  }
   5581  .ds-section-grid.ds-card-grid .col-1-small .card-stp-button-hover-background {
   5582    padding-block-start: unset;
   5583  }
   5584  .ds-section-grid.ds-card-grid .col-1-small .card-stp-button-position-wrapper {
   5585    inset-inline-end: var(--space-small);
   5586  }
   5587  .ds-section-grid.ds-card-grid .col-1-medium {
   5588    grid-row: span 2;
   5589    grid-column: span 1;
   5590    flex-direction: column;
   5591    padding: 0;
   5592    align-items: initial;
   5593    gap: initial;
   5594  }
   5595  .ds-section-grid.ds-card-grid .col-1-medium.refined-cards.ds-card.sections-card-ui {
   5596    height: unset;
   5597    box-shadow: var(--box-shadow-card);
   5598  }
   5599  .ds-section-grid.ds-card-grid .col-1-medium.refined-cards.ds-card.sections-card-ui:hover {
   5600    box-shadow: var(--box-shadow-card-hover);
   5601  }
   5602  .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .ds-card-link {
   5603    padding: unset;
   5604    flex-grow: 1;
   5605  }
   5606  .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .img-wrapper {
   5607    width: 100%;
   5608    height: 160px;
   5609  }
   5610  .ds-section-grid.ds-card-grid .col-1-medium.refined-cards.ds-spoc-rectangle .img-wrapper {
   5611    height: 250px;
   5612  }
   5613  .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .meta {
   5614    padding: var(--space-large) var(--space-large) var(--space-small);
   5615    min-height: unset;
   5616  }
   5617  .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .meta .info-wrap {
   5618    flex-grow: initial;
   5619  }
   5620  .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .meta .sections-card-footer {
   5621    max-width: 225px;
   5622    inset-inline-end: initial;
   5623    inset-block-end: initial;
   5624    min-height: 28px;
   5625  }
   5626  .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .meta .sections-card-footer .source-wrapper {
   5627    max-width: 245px;
   5628  }
   5629  .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .meta .sections-card-footer .source {
   5630    width: 217px;
   5631  }
   5632  .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .meta:has(.story-footer .story-sponsored-label) .sections-card-footer {
   5633    display: none;
   5634  }
   5635  .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .meta:has(.story-footer .story-sponsored-label) .story-footer {
   5636    margin-block: auto 0;
   5637  }
   5638  .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .context-menu-position-container .context-menu-button {
   5639    height: 32px;
   5640    width: 32px;
   5641  }
   5642  .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .card-stp-button-position-wrapper {
   5643    inset-inline-end: var(--space-large);
   5644    inset-block-end: var(--space-small);
   5645  }
   5646  .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .card-stp-button-hover-background {
   5647    background: transparent;
   5648  }
   5649  .ds-section-grid.ds-card-grid .col-1-medium.refined-cards:hover .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-1-medium.refined-cards:active .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-1-medium.refined-cards:focus-within .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-1-medium.refined-cards.active .meta .source-wrapper {
   5650    max-width: 175px;
   5651  }
   5652  .ds-section-grid.ds-card-grid .col-1-medium.refined-cards:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-medium.refined-cards:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-medium.refined-cards:focus-within .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-medium.refined-cards.active .meta .source-wrapper .source {
   5653    display: block;
   5654    width: unset;
   5655  }
   5656  .ds-section-grid.ds-card-grid .col-1-medium .card-stp-button-position-wrapper {
   5657    inset-inline-end: var(--space-small);
   5658  }
   5659  .ds-section-grid.ds-card-grid .col-1-medium .card-stp-button-hover-background {
   5660    background: transparent;
   5661  }
   5662  .ds-section-grid.ds-card-grid .col-1-medium .ds-card-link {
   5663    display: flex;
   5664    flex-direction: column;
   5665    gap: 0;
   5666    padding: 0;
   5667  }
   5668  .ds-section-grid.ds-card-grid .col-1-medium .img-wrapper {
   5669    width: 100%;
   5670    position: relative;
   5671    flex-grow: 0;
   5672    flex-shrink: 0;
   5673    aspect-ratio: initial;
   5674  }
   5675  .ds-section-grid.ds-card-grid .col-1-medium:not(.placeholder) .img-wrapper > .ds-image.img > img {
   5676    border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
   5677  }
   5678  .ds-section-grid.ds-card-grid .col-1-medium .meta {
   5679    padding: var(--space-medium) var(--space-large);
   5680  }
   5681  .ds-section-grid.ds-card-grid .col-1-medium .meta .info-wrap {
   5682    flex-grow: initial;
   5683  }
   5684  .ds-section-grid.ds-card-grid .col-1-medium .meta .info-wrap .title {
   5685    -webkit-line-clamp: 3;
   5686    margin-block: 0 var(--space-small);
   5687    font-size: var(--font-size-root);
   5688  }
   5689  .ds-section-grid.ds-card-grid .col-1-medium .meta .info-wrap .excerpt {
   5690    display: block;
   5691    -webkit-line-clamp: 3;
   5692  }
   5693  .ds-section-grid.ds-card-grid .col-1-medium .meta .sections-card-footer {
   5694    margin-block-start: auto;
   5695  }
   5696  .ds-section-grid.ds-card-grid .col-1-large {
   5697    grid-row: span 2;
   5698    grid-column: span 2;
   5699  }
   5700  .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui {
   5701    box-shadow: var(--box-shadow-card);
   5702  }
   5703 }
   5704 @media (min-width: 610px) and (724px <= width < 1122px), (min-width: 610px) and (min-width: 1390px) {
   5705  .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui .ds-card-link {
   5706    gap: var(--space-large);
   5707    padding: var(--space-large);
   5708  }
   5709  .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui .meta {
   5710    padding: 0;
   5711    color: var(--newtab-text-primary-color);
   5712  }
   5713  .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui .meta .info-wrap .excerpt {
   5714    color: var(--text-color-deemphasized);
   5715  }
   5716  .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui .meta .sections-card-footer {
   5717    max-width: 334px;
   5718  }
   5719  .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui .meta .sections-card-footer .source-wrapper {
   5720    max-width: 245px;
   5721  }
   5722  .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui .card-stp-button-position-wrapper {
   5723    inset-inline-end: var(--space-large);
   5724    inset-block-end: var(--space-large);
   5725  }
   5726  .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui:focus-visible .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui.active .meta .source-wrapper .source {
   5727    display: block;
   5728  }
   5729 }
   5730 @media (min-width: 610px) {
   5731  .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui:hover {
   5732    box-shadow: var(--box-shadow-card-hover);
   5733  }
   5734 }
   5735 @media (min-width: 610px) and (724px <= width < 1122px), (min-width: 610px) and (min-width: 1390px) {
   5736  .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui {
   5737    align-content: flex-start;
   5738    justify-content: center;
   5739  }
   5740  .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .ds-card-link {
   5741    flex-direction: row;
   5742    gap: var(--space-xlarge);
   5743    padding: var(--space-xxlarge);
   5744    flex-grow: 0;
   5745  }
   5746  .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .img-wrapper {
   5747    width: 190px;
   5748    height: 250px;
   5749  }
   5750  .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .ds-image.img {
   5751    aspect-ratio: 1/1;
   5752    width: 100%;
   5753    height: 100%;
   5754  }
   5755  .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .ds-image.img img {
   5756    border-radius: var(--border-radius-medium);
   5757  }
   5758  .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .meta {
   5759    padding: 0;
   5760    min-height: 220px;
   5761  }
   5762  .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .meta .title {
   5763    -webkit-line-clamp: 3;
   5764    font-size: var(--font-size-large);
   5765    font-weight: var(--heading-font-weight);
   5766    margin-block: 0 var(--space-small);
   5767  }
   5768  .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .meta .excerpt {
   5769    -webkit-line-clamp: 4;
   5770    font-size: var(--font-size-root);
   5771  }
   5772  .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .meta .sections-card-footer {
   5773    margin-block-start: auto;
   5774  }
   5775  .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .card-stp-button-hover-background {
   5776    background: transparent;
   5777    inset-inline-start: 0;
   5778  }
   5779 }
   5780 @media (min-width: 610px) {
   5781  .ds-section-grid.ds-card-grid .col-1-show-excerpt .meta .info-wrap .excerpt {
   5782    display: block;
   5783  }
   5784 }
   5785 @media (min-width: 610px) {
   5786  .ds-section-grid.ds-card-grid .col-1-hide-excerpt .meta .info-wrap .excerpt {
   5787    display: none;
   5788  }
   5789 }
   5790 @media (min-width: 724px) {
   5791  .ds-section-grid.ds-card-grid {
   5792    grid-template-columns: repeat(2, 300px);
   5793  }
   5794  .ds-section-grid.ds-card-grid .col-2-position-0 {
   5795    order: 0;
   5796  }
   5797  .ds-section-grid.ds-card-grid .col-2-position-1 {
   5798    order: 1;
   5799  }
   5800  .ds-section-grid.ds-card-grid .col-2-position-2 {
   5801    order: 2;
   5802  }
   5803  .ds-section-grid.ds-card-grid .col-2-position-3 {
   5804    order: 3;
   5805  }
   5806  .ds-section-grid.ds-card-grid .col-2-position-4 {
   5807    order: 4;
   5808  }
   5809  .ds-section-grid.ds-card-grid .col-2-position-5 {
   5810    order: 5;
   5811  }
   5812  .ds-section-grid.ds-card-grid .col-2-position-6 {
   5813    order: 6;
   5814  }
   5815  .ds-section-grid.ds-card-grid .col-2-position-7 {
   5816    order: 7;
   5817  }
   5818  .ds-section-grid.ds-card-grid .col-2-position-8 {
   5819    order: 8;
   5820  }
   5821  .ds-section-grid.ds-card-grid .col-2-position-9 {
   5822    order: 9;
   5823  }
   5824  .ds-section-grid.ds-card-grid .col-2-position-10 {
   5825    order: 10;
   5826  }
   5827  .ds-section-grid.ds-card-grid .col-2-position-11 {
   5828    order: 11;
   5829  }
   5830  .ds-section-grid.ds-card-grid .col-2-position-12 {
   5831    order: 12;
   5832  }
   5833  .ds-section-grid.ds-card-grid .col-2-position-13 {
   5834    order: 13;
   5835  }
   5836  .ds-section-grid.ds-card-grid .col-2-position-14 {
   5837    order: 14;
   5838  }
   5839  .ds-section-grid.ds-card-grid .col-2-position-15 {
   5840    order: 15;
   5841  }
   5842  .ds-section-grid.ds-card-grid .col-2-position-16 {
   5843    order: 16;
   5844  }
   5845  .ds-section-grid.ds-card-grid .col-2-small {
   5846    grid-row: span 1;
   5847    grid-column: span 1;
   5848    padding: var(--space-large);
   5849  }
   5850  .ds-section-grid.ds-card-grid .col-2-small.refined-cards.ds-card.sections-card-ui {
   5851    box-shadow: var(--box-shadow-card);
   5852  }
   5853  .ds-section-grid.ds-card-grid .col-2-small.refined-cards.ds-card.sections-card-ui:hover {
   5854    box-shadow: var(--box-shadow-card-hover);
   5855  }
   5856  .ds-section-grid.ds-card-grid .col-2-small.refined-cards .ds-card-link {
   5857    padding: var(--space-small);
   5858    flex-grow: 0;
   5859  }
   5860  .ds-section-grid.ds-card-grid .col-2-small.refined-cards .img-wrapper {
   5861    width: 110px;
   5862    height: 117px;
   5863  }
   5864  .ds-section-grid.ds-card-grid .col-2-small.refined-cards .meta {
   5865    padding: 0;
   5866    min-height: 117px;
   5867  }
   5868  .ds-section-grid.ds-card-grid .col-2-small.refined-cards .meta .info-wrap {
   5869    flex-grow: 1;
   5870  }
   5871  .ds-section-grid.ds-card-grid .col-2-small.refined-cards .meta .sections-card-footer {
   5872    max-width: 114px;
   5873    min-height: unset;
   5874    position: initial;
   5875    margin-block-start: auto;
   5876  }
   5877  .ds-section-grid.ds-card-grid .col-2-small.refined-cards .meta .sections-card-footer .source {
   5878    word-break: normal;
   5879    width: 114px;
   5880  }
   5881  .ds-section-grid.ds-card-grid .col-2-small.refined-cards .card-stp-button-hover-background {
   5882    background: transparent;
   5883  }
   5884  .ds-section-grid.ds-card-grid .col-2-small.refined-cards .card-stp-button-position-wrapper {
   5885    inset-inline-end: var(--space-small);
   5886    inset-block-end: var(--space-small);
   5887  }
   5888  .ds-section-grid.ds-card-grid .col-2-small.refined-cards .context-menu-position-container .context-menu-button {
   5889    height: 32px;
   5890    width: 32px;
   5891  }
   5892  .ds-section-grid.ds-card-grid .col-2-small.ds-card.sections-card-ui {
   5893    padding: unset;
   5894  }
   5895  .ds-section-grid.ds-card-grid .col-2-small .ds-card-link {
   5896    display: flex;
   5897    flex-direction: row;
   5898    position: relative;
   5899    align-items: center;
   5900    gap: var(--space-medium);
   5901    padding: var(--space-large);
   5902  }
   5903  .ds-section-grid.ds-card-grid .col-2-small .img-wrapper {
   5904    width: 100px;
   5905    flex-shrink: 0;
   5906    flex-grow: 0;
   5907    aspect-ratio: 5/6;
   5908  }
   5909  .ds-section-grid.ds-card-grid .col-2-small .img-wrapper .ds-image.img {
   5910    width: 100%;
   5911    height: 100%;
   5912    padding-block-start: 0;
   5913    min-width: 100%;
   5914  }
   5915  .ds-section-grid.ds-card-grid .col-2-small .img-wrapper .ds-image.img img {
   5916    width: 100%;
   5917    height: 100%;
   5918    border-radius: var(--border-radius-medium) var(--border-radius-medium);
   5919    object-fit: cover;
   5920  }
   5921  .ds-section-grid.ds-card-grid .col-2-small:not(.placeholder) .img-wrapper > .ds-image.img > img {
   5922    width: 100%;
   5923    border-radius: var(--border-radius-medium) var(--border-radius-medium);
   5924  }
   5925  .ds-section-grid.ds-card-grid .col-2-small .meta {
   5926    padding: 0;
   5927    align-self: flex-start;
   5928    min-height: 125px;
   5929  }
   5930  .ds-section-grid.ds-card-grid .col-2-small .meta .info-wrap .title {
   5931    font-size: var(--font-size-small);
   5932    margin-block: 0;
   5933    -webkit-line-clamp: 4;
   5934  }
   5935  .ds-section-grid.ds-card-grid .col-2-small .meta .sections-card-footer {
   5936    margin-block-start: var(--space-xxsmall);
   5937  }
   5938  .ds-section-grid.ds-card-grid .col-2-small .card-stp-button-hover-background {
   5939    padding-block-start: unset;
   5940  }
   5941  .ds-section-grid.ds-card-grid .col-2-small .card-stp-button-position-wrapper {
   5942    inset-inline-end: var(--space-small);
   5943  }
   5944  .ds-section-grid.ds-card-grid .col-2-medium {
   5945    grid-row: span 2;
   5946    grid-column: span 1;
   5947    flex-direction: column;
   5948    padding: 0;
   5949    align-items: initial;
   5950    gap: initial;
   5951  }
   5952  .ds-section-grid.ds-card-grid .col-2-medium.refined-cards.ds-card.sections-card-ui {
   5953    height: unset;
   5954    box-shadow: var(--box-shadow-card);
   5955  }
   5956  .ds-section-grid.ds-card-grid .col-2-medium.refined-cards.ds-card.sections-card-ui:hover {
   5957    box-shadow: var(--box-shadow-card-hover);
   5958  }
   5959  .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .ds-card-link {
   5960    padding: unset;
   5961    flex-grow: 1;
   5962  }
   5963  .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .img-wrapper {
   5964    width: 100%;
   5965    height: 160px;
   5966  }
   5967  .ds-section-grid.ds-card-grid .col-2-medium.refined-cards.ds-spoc-rectangle .img-wrapper {
   5968    height: 250px;
   5969  }
   5970  .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .meta {
   5971    padding: var(--space-large) var(--space-large) var(--space-small);
   5972    min-height: unset;
   5973  }
   5974  .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .meta .info-wrap {
   5975    flex-grow: initial;
   5976  }
   5977  .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .meta .sections-card-footer {
   5978    max-width: 225px;
   5979    inset-inline-end: initial;
   5980    inset-block-end: initial;
   5981    min-height: 28px;
   5982  }
   5983  .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .meta .sections-card-footer .source-wrapper {
   5984    max-width: 245px;
   5985  }
   5986  .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .meta .sections-card-footer .source {
   5987    width: 217px;
   5988  }
   5989  .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .meta:has(.story-footer .story-sponsored-label) .sections-card-footer {
   5990    display: none;
   5991  }
   5992  .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .meta:has(.story-footer .story-sponsored-label) .story-footer {
   5993    margin-block: auto 0;
   5994  }
   5995  .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .context-menu-position-container .context-menu-button {
   5996    height: 32px;
   5997    width: 32px;
   5998  }
   5999  .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .card-stp-button-position-wrapper {
   6000    inset-inline-end: var(--space-large);
   6001    inset-block-end: var(--space-small);
   6002  }
   6003  .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .card-stp-button-hover-background {
   6004    background: transparent;
   6005  }
   6006  .ds-section-grid.ds-card-grid .col-2-medium.refined-cards:hover .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-2-medium.refined-cards:active .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-2-medium.refined-cards:focus-within .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-2-medium.refined-cards.active .meta .source-wrapper {
   6007    max-width: 175px;
   6008  }
   6009  .ds-section-grid.ds-card-grid .col-2-medium.refined-cards:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-medium.refined-cards:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-medium.refined-cards:focus-within .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-medium.refined-cards.active .meta .source-wrapper .source {
   6010    display: block;
   6011    width: unset;
   6012  }
   6013  .ds-section-grid.ds-card-grid .col-2-medium .card-stp-button-position-wrapper {
   6014    inset-inline-end: var(--space-small);
   6015  }
   6016  .ds-section-grid.ds-card-grid .col-2-medium .card-stp-button-hover-background {
   6017    background: transparent;
   6018  }
   6019  .ds-section-grid.ds-card-grid .col-2-medium .ds-card-link {
   6020    display: flex;
   6021    flex-direction: column;
   6022    gap: 0;
   6023    padding: 0;
   6024  }
   6025  .ds-section-grid.ds-card-grid .col-2-medium .img-wrapper {
   6026    width: 100%;
   6027    position: relative;
   6028    flex-grow: 0;
   6029    flex-shrink: 0;
   6030    aspect-ratio: initial;
   6031  }
   6032  .ds-section-grid.ds-card-grid .col-2-medium:not(.placeholder) .img-wrapper > .ds-image.img > img {
   6033    border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
   6034  }
   6035  .ds-section-grid.ds-card-grid .col-2-medium .meta {
   6036    padding: var(--space-medium) var(--space-large);
   6037  }
   6038  .ds-section-grid.ds-card-grid .col-2-medium .meta .info-wrap {
   6039    flex-grow: initial;
   6040  }
   6041  .ds-section-grid.ds-card-grid .col-2-medium .meta .info-wrap .title {
   6042    -webkit-line-clamp: 3;
   6043    margin-block: 0 var(--space-small);
   6044    font-size: var(--font-size-root);
   6045  }
   6046  .ds-section-grid.ds-card-grid .col-2-medium .meta .info-wrap .excerpt {
   6047    display: block;
   6048    -webkit-line-clamp: 3;
   6049  }
   6050  .ds-section-grid.ds-card-grid .col-2-medium .meta .sections-card-footer {
   6051    margin-block-start: auto;
   6052  }
   6053  .ds-section-grid.ds-card-grid .col-2-large {
   6054    grid-row: span 2;
   6055    grid-column: span 2;
   6056  }
   6057  .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui {
   6058    box-shadow: var(--box-shadow-card);
   6059  }
   6060 }
   6061 @media (min-width: 724px) and (724px <= width < 1122px), (min-width: 724px) and (min-width: 1390px) {
   6062  .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui .ds-card-link {
   6063    gap: var(--space-large);
   6064    padding: var(--space-large);
   6065  }
   6066  .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui .meta {
   6067    padding: 0;
   6068    color: var(--newtab-text-primary-color);
   6069  }
   6070  .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui .meta .info-wrap .excerpt {
   6071    color: var(--text-color-deemphasized);
   6072  }
   6073  .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui .meta .sections-card-footer {
   6074    max-width: 334px;
   6075  }
   6076  .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui .meta .sections-card-footer .source-wrapper {
   6077    max-width: 245px;
   6078  }
   6079  .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui .card-stp-button-position-wrapper {
   6080    inset-inline-end: var(--space-large);
   6081    inset-block-end: var(--space-large);
   6082  }
   6083  .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui:focus-visible .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui.active .meta .source-wrapper .source {
   6084    display: block;
   6085  }
   6086 }
   6087 @media (min-width: 724px) {
   6088  .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui:hover {
   6089    box-shadow: var(--box-shadow-card-hover);
   6090  }
   6091 }
   6092 @media (min-width: 724px) and (724px <= width < 1122px), (min-width: 724px) and (min-width: 1390px) {
   6093  .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui {
   6094    align-content: flex-start;
   6095    justify-content: center;
   6096  }
   6097  .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .ds-card-link {
   6098    flex-direction: row;
   6099    gap: var(--space-xlarge);
   6100    padding: var(--space-xxlarge);
   6101    flex-grow: 0;
   6102  }
   6103  .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .img-wrapper {
   6104    width: 190px;
   6105    height: 250px;
   6106  }
   6107  .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .ds-image.img {
   6108    aspect-ratio: 1/1;
   6109    width: 100%;
   6110    height: 100%;
   6111  }
   6112  .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .ds-image.img img {
   6113    border-radius: var(--border-radius-medium);
   6114  }
   6115  .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .meta {
   6116    padding: 0;
   6117    min-height: 220px;
   6118  }
   6119  .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .meta .title {
   6120    -webkit-line-clamp: 3;
   6121    font-size: var(--font-size-large);
   6122    font-weight: var(--heading-font-weight);
   6123    margin-block: 0 var(--space-small);
   6124  }
   6125  .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .meta .excerpt {
   6126    -webkit-line-clamp: 4;
   6127    font-size: var(--font-size-root);
   6128  }
   6129  .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .meta .sections-card-footer {
   6130    margin-block-start: auto;
   6131  }
   6132  .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .card-stp-button-hover-background {
   6133    background: transparent;
   6134    inset-inline-start: 0;
   6135  }
   6136 }
   6137 @media (min-width: 724px) {
   6138  .ds-section-grid.ds-card-grid .col-2-show-excerpt .meta .info-wrap .excerpt {
   6139    display: block;
   6140  }
   6141 }
   6142 @media (min-width: 724px) {
   6143  .ds-section-grid.ds-card-grid .col-2-hide-excerpt .meta .info-wrap .excerpt {
   6144    display: none;
   6145  }
   6146 }
   6147 @media (min-width: 724px) {
   6148  .ds-section-grid.ds-card-grid .ds-image.image-1, .ds-section-grid.ds-card-grid .ds-image.image-3, .ds-section-grid.ds-card-grid .ds-image.image-4 {
   6149    display: none;
   6150  }
   6151  .ds-section-grid.ds-card-grid .ds-image.image-2 {
   6152    display: block;
   6153  }
   6154 }
   6155 @media (min-width: 1122px) {
   6156  .ds-section-grid.ds-card-grid {
   6157    grid-template-columns: repeat(3, 300px);
   6158    gap: var(--space-large);
   6159  }
   6160  .ds-section-grid.ds-card-grid .col-3-position-0 {
   6161    order: 0;
   6162  }
   6163  .ds-section-grid.ds-card-grid .col-3-position-1 {
   6164    order: 1;
   6165  }
   6166  .ds-section-grid.ds-card-grid .col-3-position-2 {
   6167    order: 2;
   6168  }
   6169  .ds-section-grid.ds-card-grid .col-3-position-3 {
   6170    order: 3;
   6171  }
   6172  .ds-section-grid.ds-card-grid .col-3-position-4 {
   6173    order: 4;
   6174  }
   6175  .ds-section-grid.ds-card-grid .col-3-position-5 {
   6176    order: 5;
   6177  }
   6178  .ds-section-grid.ds-card-grid .col-3-position-6 {
   6179    order: 6;
   6180  }
   6181  .ds-section-grid.ds-card-grid .col-3-position-7 {
   6182    order: 7;
   6183  }
   6184  .ds-section-grid.ds-card-grid .col-3-position-8 {
   6185    order: 8;
   6186  }
   6187  .ds-section-grid.ds-card-grid .col-3-position-9 {
   6188    order: 9;
   6189  }
   6190  .ds-section-grid.ds-card-grid .col-3-position-10 {
   6191    order: 10;
   6192  }
   6193  .ds-section-grid.ds-card-grid .col-3-position-11 {
   6194    order: 11;
   6195  }
   6196  .ds-section-grid.ds-card-grid .col-3-position-12 {
   6197    order: 12;
   6198  }
   6199  .ds-section-grid.ds-card-grid .col-3-position-13 {
   6200    order: 13;
   6201  }
   6202  .ds-section-grid.ds-card-grid .col-3-position-14 {
   6203    order: 14;
   6204  }
   6205  .ds-section-grid.ds-card-grid .col-3-position-15 {
   6206    order: 15;
   6207  }
   6208  .ds-section-grid.ds-card-grid .col-3-position-16 {
   6209    order: 16;
   6210  }
   6211  .ds-section-grid.ds-card-grid .col-3-small {
   6212    grid-row: span 1;
   6213    grid-column: span 1;
   6214    padding: var(--space-large);
   6215  }
   6216  .ds-section-grid.ds-card-grid .col-3-small.refined-cards.ds-card.sections-card-ui {
   6217    box-shadow: var(--box-shadow-card);
   6218  }
   6219  .ds-section-grid.ds-card-grid .col-3-small.refined-cards.ds-card.sections-card-ui:hover {
   6220    box-shadow: var(--box-shadow-card-hover);
   6221  }
   6222  .ds-section-grid.ds-card-grid .col-3-small.refined-cards .ds-card-link {
   6223    padding: var(--space-small);
   6224    flex-grow: 0;
   6225  }
   6226  .ds-section-grid.ds-card-grid .col-3-small.refined-cards .img-wrapper {
   6227    width: 110px;
   6228    height: 117px;
   6229  }
   6230  .ds-section-grid.ds-card-grid .col-3-small.refined-cards .meta {
   6231    padding: 0;
   6232    min-height: 117px;
   6233  }
   6234  .ds-section-grid.ds-card-grid .col-3-small.refined-cards .meta .info-wrap {
   6235    flex-grow: 1;
   6236  }
   6237  .ds-section-grid.ds-card-grid .col-3-small.refined-cards .meta .sections-card-footer {
   6238    max-width: 114px;
   6239    min-height: unset;
   6240    position: initial;
   6241    margin-block-start: auto;
   6242  }
   6243  .ds-section-grid.ds-card-grid .col-3-small.refined-cards .meta .sections-card-footer .source {
   6244    word-break: normal;
   6245    width: 114px;
   6246  }
   6247  .ds-section-grid.ds-card-grid .col-3-small.refined-cards .card-stp-button-hover-background {
   6248    background: transparent;
   6249  }
   6250  .ds-section-grid.ds-card-grid .col-3-small.refined-cards .card-stp-button-position-wrapper {
   6251    inset-inline-end: var(--space-small);
   6252    inset-block-end: var(--space-small);
   6253  }
   6254  .ds-section-grid.ds-card-grid .col-3-small.refined-cards .context-menu-position-container .context-menu-button {
   6255    height: 32px;
   6256    width: 32px;
   6257  }
   6258  .ds-section-grid.ds-card-grid .col-3-small.ds-card.sections-card-ui {
   6259    padding: unset;
   6260  }
   6261  .ds-section-grid.ds-card-grid .col-3-small .ds-card-link {
   6262    display: flex;
   6263    flex-direction: row;
   6264    position: relative;
   6265    align-items: center;
   6266    gap: var(--space-medium);
   6267    padding: var(--space-large);
   6268  }
   6269  .ds-section-grid.ds-card-grid .col-3-small .img-wrapper {
   6270    width: 100px;
   6271    flex-shrink: 0;
   6272    flex-grow: 0;
   6273    aspect-ratio: 5/6;
   6274  }
   6275  .ds-section-grid.ds-card-grid .col-3-small .img-wrapper .ds-image.img {
   6276    width: 100%;
   6277    height: 100%;
   6278    padding-block-start: 0;
   6279    min-width: 100%;
   6280  }
   6281  .ds-section-grid.ds-card-grid .col-3-small .img-wrapper .ds-image.img img {
   6282    width: 100%;
   6283    height: 100%;
   6284    border-radius: var(--border-radius-medium) var(--border-radius-medium);
   6285    object-fit: cover;
   6286  }
   6287  .ds-section-grid.ds-card-grid .col-3-small:not(.placeholder) .img-wrapper > .ds-image.img > img {
   6288    width: 100%;
   6289    border-radius: var(--border-radius-medium) var(--border-radius-medium);
   6290  }
   6291  .ds-section-grid.ds-card-grid .col-3-small .meta {
   6292    padding: 0;
   6293    align-self: flex-start;
   6294    min-height: 125px;
   6295  }
   6296  .ds-section-grid.ds-card-grid .col-3-small .meta .info-wrap .title {
   6297    font-size: var(--font-size-small);
   6298    margin-block: 0;
   6299    -webkit-line-clamp: 4;
   6300  }
   6301  .ds-section-grid.ds-card-grid .col-3-small .meta .sections-card-footer {
   6302    margin-block-start: var(--space-xxsmall);
   6303  }
   6304  .ds-section-grid.ds-card-grid .col-3-small .card-stp-button-hover-background {
   6305    padding-block-start: unset;
   6306  }
   6307  .ds-section-grid.ds-card-grid .col-3-small .card-stp-button-position-wrapper {
   6308    inset-inline-end: var(--space-small);
   6309  }
   6310  .ds-section-grid.ds-card-grid .col-3-medium {
   6311    grid-row: span 2;
   6312    grid-column: span 1;
   6313    flex-direction: column;
   6314    padding: 0;
   6315    align-items: initial;
   6316    gap: initial;
   6317  }
   6318  .ds-section-grid.ds-card-grid .col-3-medium.refined-cards.ds-card.sections-card-ui {
   6319    height: unset;
   6320    box-shadow: var(--box-shadow-card);
   6321  }
   6322  .ds-section-grid.ds-card-grid .col-3-medium.refined-cards.ds-card.sections-card-ui:hover {
   6323    box-shadow: var(--box-shadow-card-hover);
   6324  }
   6325  .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .ds-card-link {
   6326    padding: unset;
   6327    flex-grow: 1;
   6328  }
   6329  .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .img-wrapper {
   6330    width: 100%;
   6331    height: 160px;
   6332  }
   6333  .ds-section-grid.ds-card-grid .col-3-medium.refined-cards.ds-spoc-rectangle .img-wrapper {
   6334    height: 250px;
   6335  }
   6336  .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .meta {
   6337    padding: var(--space-large) var(--space-large) var(--space-small);
   6338    min-height: unset;
   6339  }
   6340  .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .meta .info-wrap {
   6341    flex-grow: initial;
   6342  }
   6343  .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .meta .sections-card-footer {
   6344    max-width: 225px;
   6345    inset-inline-end: initial;
   6346    inset-block-end: initial;
   6347    min-height: 28px;
   6348  }
   6349  .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .meta .sections-card-footer .source-wrapper {
   6350    max-width: 245px;
   6351  }
   6352  .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .meta .sections-card-footer .source {
   6353    width: 217px;
   6354  }
   6355  .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .meta:has(.story-footer .story-sponsored-label) .sections-card-footer {
   6356    display: none;
   6357  }
   6358  .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .meta:has(.story-footer .story-sponsored-label) .story-footer {
   6359    margin-block: auto 0;
   6360  }
   6361  .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .context-menu-position-container .context-menu-button {
   6362    height: 32px;
   6363    width: 32px;
   6364  }
   6365  .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .card-stp-button-position-wrapper {
   6366    inset-inline-end: var(--space-large);
   6367    inset-block-end: var(--space-small);
   6368  }
   6369  .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .card-stp-button-hover-background {
   6370    background: transparent;
   6371  }
   6372  .ds-section-grid.ds-card-grid .col-3-medium.refined-cards:hover .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-3-medium.refined-cards:active .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-3-medium.refined-cards:focus-within .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-3-medium.refined-cards.active .meta .source-wrapper {
   6373    max-width: 175px;
   6374  }
   6375  .ds-section-grid.ds-card-grid .col-3-medium.refined-cards:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-medium.refined-cards:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-medium.refined-cards:focus-within .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-medium.refined-cards.active .meta .source-wrapper .source {
   6376    display: block;
   6377    width: unset;
   6378  }
   6379  .ds-section-grid.ds-card-grid .col-3-medium .card-stp-button-position-wrapper {
   6380    inset-inline-end: var(--space-small);
   6381  }
   6382  .ds-section-grid.ds-card-grid .col-3-medium .card-stp-button-hover-background {
   6383    background: transparent;
   6384  }
   6385  .ds-section-grid.ds-card-grid .col-3-medium .ds-card-link {
   6386    display: flex;
   6387    flex-direction: column;
   6388    gap: 0;
   6389    padding: 0;
   6390  }
   6391  .ds-section-grid.ds-card-grid .col-3-medium .img-wrapper {
   6392    width: 100%;
   6393    position: relative;
   6394    flex-grow: 0;
   6395    flex-shrink: 0;
   6396    aspect-ratio: initial;
   6397  }
   6398  .ds-section-grid.ds-card-grid .col-3-medium:not(.placeholder) .img-wrapper > .ds-image.img > img {
   6399    border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
   6400  }
   6401  .ds-section-grid.ds-card-grid .col-3-medium .meta {
   6402    padding: var(--space-medium) var(--space-large);
   6403  }
   6404  .ds-section-grid.ds-card-grid .col-3-medium .meta .info-wrap {
   6405    flex-grow: initial;
   6406  }
   6407  .ds-section-grid.ds-card-grid .col-3-medium .meta .info-wrap .title {
   6408    -webkit-line-clamp: 3;
   6409    margin-block: 0 var(--space-small);
   6410    font-size: var(--font-size-root);
   6411  }
   6412  .ds-section-grid.ds-card-grid .col-3-medium .meta .info-wrap .excerpt {
   6413    display: block;
   6414    -webkit-line-clamp: 3;
   6415  }
   6416  .ds-section-grid.ds-card-grid .col-3-medium .meta .sections-card-footer {
   6417    margin-block-start: auto;
   6418  }
   6419  .ds-section-grid.ds-card-grid .col-3-large {
   6420    grid-row: span 2;
   6421    grid-column: span 2;
   6422  }
   6423  .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui {
   6424    box-shadow: var(--box-shadow-card);
   6425  }
   6426 }
   6427 @media (min-width: 1122px) and (724px <= width < 1122px), (min-width: 1122px) and (min-width: 1390px) {
   6428  .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui .ds-card-link {
   6429    gap: var(--space-large);
   6430    padding: var(--space-large);
   6431  }
   6432  .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui .meta {
   6433    padding: 0;
   6434    color: var(--newtab-text-primary-color);
   6435  }
   6436  .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui .meta .info-wrap .excerpt {
   6437    color: var(--text-color-deemphasized);
   6438  }
   6439  .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui .meta .sections-card-footer {
   6440    max-width: 334px;
   6441  }
   6442  .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui .meta .sections-card-footer .source-wrapper {
   6443    max-width: 245px;
   6444  }
   6445  .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui .card-stp-button-position-wrapper {
   6446    inset-inline-end: var(--space-large);
   6447    inset-block-end: var(--space-large);
   6448  }
   6449  .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui:focus-visible .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui.active .meta .source-wrapper .source {
   6450    display: block;
   6451  }
   6452 }
   6453 @media (min-width: 1122px) {
   6454  .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui:hover {
   6455    box-shadow: var(--box-shadow-card-hover);
   6456  }
   6457 }
   6458 @media (min-width: 1122px) and (724px <= width < 1122px), (min-width: 1122px) and (min-width: 1390px) {
   6459  .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui {
   6460    align-content: flex-start;
   6461    justify-content: center;
   6462  }
   6463  .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .ds-card-link {
   6464    flex-direction: row;
   6465    gap: var(--space-xlarge);
   6466    padding: var(--space-xxlarge);
   6467    flex-grow: 0;
   6468  }
   6469  .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .img-wrapper {
   6470    width: 190px;
   6471    height: 250px;
   6472  }
   6473  .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .ds-image.img {
   6474    aspect-ratio: 1/1;
   6475    width: 100%;
   6476    height: 100%;
   6477  }
   6478  .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .ds-image.img img {
   6479    border-radius: var(--border-radius-medium);
   6480  }
   6481  .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .meta {
   6482    padding: 0;
   6483    min-height: 220px;
   6484  }
   6485  .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .meta .title {
   6486    -webkit-line-clamp: 3;
   6487    font-size: var(--font-size-large);
   6488    font-weight: var(--heading-font-weight);
   6489    margin-block: 0 var(--space-small);
   6490  }
   6491  .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .meta .excerpt {
   6492    -webkit-line-clamp: 4;
   6493    font-size: var(--font-size-root);
   6494  }
   6495  .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .meta .sections-card-footer {
   6496    margin-block-start: auto;
   6497  }
   6498  .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .card-stp-button-hover-background {
   6499    background: transparent;
   6500    inset-inline-start: 0;
   6501  }
   6502 }
   6503 @media (min-width: 1122px) {
   6504  .ds-section-grid.ds-card-grid .col-3-show-excerpt .meta .info-wrap .excerpt {
   6505    display: block;
   6506  }
   6507 }
   6508 @media (min-width: 1122px) {
   6509  .ds-section-grid.ds-card-grid .col-3-hide-excerpt .meta .info-wrap .excerpt {
   6510    display: none;
   6511  }
   6512 }
   6513 @media (min-width: 1122px) {
   6514  .ds-section-grid.ds-card-grid .ds-image.image-1, .ds-section-grid.ds-card-grid .ds-image.image-2, .ds-section-grid.ds-card-grid .ds-image.image-4 {
   6515    display: none;
   6516  }
   6517  .ds-section-grid.ds-card-grid .ds-image.image-3 {
   6518    display: block;
   6519  }
   6520 }
   6521 @media (min-width: 1390px) {
   6522  .ds-section-grid.ds-card-grid {
   6523    grid-template-columns: repeat(4, 300px);
   6524  }
   6525  .ds-section-grid.ds-card-grid .col-4-position-0 {
   6526    order: 0;
   6527  }
   6528  .ds-section-grid.ds-card-grid .col-4-position-1 {
   6529    order: 1;
   6530  }
   6531  .ds-section-grid.ds-card-grid .col-4-position-2 {
   6532    order: 2;
   6533  }
   6534  .ds-section-grid.ds-card-grid .col-4-position-3 {
   6535    order: 3;
   6536  }
   6537  .ds-section-grid.ds-card-grid .col-4-position-4 {
   6538    order: 4;
   6539  }
   6540  .ds-section-grid.ds-card-grid .col-4-position-5 {
   6541    order: 5;
   6542  }
   6543  .ds-section-grid.ds-card-grid .col-4-position-6 {
   6544    order: 6;
   6545  }
   6546  .ds-section-grid.ds-card-grid .col-4-position-7 {
   6547    order: 7;
   6548  }
   6549  .ds-section-grid.ds-card-grid .col-4-position-8 {
   6550    order: 8;
   6551  }
   6552  .ds-section-grid.ds-card-grid .col-4-position-9 {
   6553    order: 9;
   6554  }
   6555  .ds-section-grid.ds-card-grid .col-4-position-10 {
   6556    order: 10;
   6557  }
   6558  .ds-section-grid.ds-card-grid .col-4-position-11 {
   6559    order: 11;
   6560  }
   6561  .ds-section-grid.ds-card-grid .col-4-position-12 {
   6562    order: 12;
   6563  }
   6564  .ds-section-grid.ds-card-grid .col-4-position-13 {
   6565    order: 13;
   6566  }
   6567  .ds-section-grid.ds-card-grid .col-4-position-14 {
   6568    order: 14;
   6569  }
   6570  .ds-section-grid.ds-card-grid .col-4-position-15 {
   6571    order: 15;
   6572  }
   6573  .ds-section-grid.ds-card-grid .col-4-position-16 {
   6574    order: 16;
   6575  }
   6576  .ds-section-grid.ds-card-grid .col-4-small {
   6577    grid-row: span 1;
   6578    grid-column: span 1;
   6579    padding: var(--space-large);
   6580  }
   6581  .ds-section-grid.ds-card-grid .col-4-small.refined-cards.ds-card.sections-card-ui {
   6582    box-shadow: var(--box-shadow-card);
   6583  }
   6584  .ds-section-grid.ds-card-grid .col-4-small.refined-cards.ds-card.sections-card-ui:hover {
   6585    box-shadow: var(--box-shadow-card-hover);
   6586  }
   6587  .ds-section-grid.ds-card-grid .col-4-small.refined-cards .ds-card-link {
   6588    padding: var(--space-small);
   6589    flex-grow: 0;
   6590  }
   6591  .ds-section-grid.ds-card-grid .col-4-small.refined-cards .img-wrapper {
   6592    width: 110px;
   6593    height: 117px;
   6594  }
   6595  .ds-section-grid.ds-card-grid .col-4-small.refined-cards .meta {
   6596    padding: 0;
   6597    min-height: 117px;
   6598  }
   6599  .ds-section-grid.ds-card-grid .col-4-small.refined-cards .meta .info-wrap {
   6600    flex-grow: 1;
   6601  }
   6602  .ds-section-grid.ds-card-grid .col-4-small.refined-cards .meta .sections-card-footer {
   6603    max-width: 114px;
   6604    min-height: unset;
   6605    position: initial;
   6606    margin-block-start: auto;
   6607  }
   6608  .ds-section-grid.ds-card-grid .col-4-small.refined-cards .meta .sections-card-footer .source {
   6609    word-break: normal;
   6610    width: 114px;
   6611  }
   6612  .ds-section-grid.ds-card-grid .col-4-small.refined-cards .card-stp-button-hover-background {
   6613    background: transparent;
   6614  }
   6615  .ds-section-grid.ds-card-grid .col-4-small.refined-cards .card-stp-button-position-wrapper {
   6616    inset-inline-end: var(--space-small);
   6617    inset-block-end: var(--space-small);
   6618  }
   6619  .ds-section-grid.ds-card-grid .col-4-small.refined-cards .context-menu-position-container .context-menu-button {
   6620    height: 32px;
   6621    width: 32px;
   6622  }
   6623  .ds-section-grid.ds-card-grid .col-4-small.ds-card.sections-card-ui {
   6624    padding: unset;
   6625  }
   6626  .ds-section-grid.ds-card-grid .col-4-small .ds-card-link {
   6627    display: flex;
   6628    flex-direction: row;
   6629    position: relative;
   6630    align-items: center;
   6631    gap: var(--space-medium);
   6632    padding: var(--space-large);
   6633  }
   6634  .ds-section-grid.ds-card-grid .col-4-small .img-wrapper {
   6635    width: 100px;
   6636    flex-shrink: 0;
   6637    flex-grow: 0;
   6638    aspect-ratio: 5/6;
   6639  }
   6640  .ds-section-grid.ds-card-grid .col-4-small .img-wrapper .ds-image.img {
   6641    width: 100%;
   6642    height: 100%;
   6643    padding-block-start: 0;
   6644    min-width: 100%;
   6645  }
   6646  .ds-section-grid.ds-card-grid .col-4-small .img-wrapper .ds-image.img img {
   6647    width: 100%;
   6648    height: 100%;
   6649    border-radius: var(--border-radius-medium) var(--border-radius-medium);
   6650    object-fit: cover;
   6651  }
   6652  .ds-section-grid.ds-card-grid .col-4-small:not(.placeholder) .img-wrapper > .ds-image.img > img {
   6653    width: 100%;
   6654    border-radius: var(--border-radius-medium) var(--border-radius-medium);
   6655  }
   6656  .ds-section-grid.ds-card-grid .col-4-small .meta {
   6657    padding: 0;
   6658    align-self: flex-start;
   6659    min-height: 125px;
   6660  }
   6661  .ds-section-grid.ds-card-grid .col-4-small .meta .info-wrap .title {
   6662    font-size: var(--font-size-small);
   6663    margin-block: 0;
   6664    -webkit-line-clamp: 4;
   6665  }
   6666  .ds-section-grid.ds-card-grid .col-4-small .meta .sections-card-footer {
   6667    margin-block-start: var(--space-xxsmall);
   6668  }
   6669  .ds-section-grid.ds-card-grid .col-4-small .card-stp-button-hover-background {
   6670    padding-block-start: unset;
   6671  }
   6672  .ds-section-grid.ds-card-grid .col-4-small .card-stp-button-position-wrapper {
   6673    inset-inline-end: var(--space-small);
   6674  }
   6675  .ds-section-grid.ds-card-grid .col-4-medium {
   6676    grid-row: span 2;
   6677    grid-column: span 1;
   6678    flex-direction: column;
   6679    padding: 0;
   6680    align-items: initial;
   6681    gap: initial;
   6682  }
   6683  .ds-section-grid.ds-card-grid .col-4-medium.refined-cards.ds-card.sections-card-ui {
   6684    height: unset;
   6685    box-shadow: var(--box-shadow-card);
   6686  }
   6687  .ds-section-grid.ds-card-grid .col-4-medium.refined-cards.ds-card.sections-card-ui:hover {
   6688    box-shadow: var(--box-shadow-card-hover);
   6689  }
   6690  .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .ds-card-link {
   6691    padding: unset;
   6692    flex-grow: 1;
   6693  }
   6694  .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .img-wrapper {
   6695    width: 100%;
   6696    height: 160px;
   6697  }
   6698  .ds-section-grid.ds-card-grid .col-4-medium.refined-cards.ds-spoc-rectangle .img-wrapper {
   6699    height: 250px;
   6700  }
   6701  .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .meta {
   6702    padding: var(--space-large) var(--space-large) var(--space-small);
   6703    min-height: unset;
   6704  }
   6705  .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .meta .info-wrap {
   6706    flex-grow: initial;
   6707  }
   6708  .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .meta .sections-card-footer {
   6709    max-width: 225px;
   6710    inset-inline-end: initial;
   6711    inset-block-end: initial;
   6712    min-height: 28px;
   6713  }
   6714  .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .meta .sections-card-footer .source-wrapper {
   6715    max-width: 245px;
   6716  }
   6717  .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .meta .sections-card-footer .source {
   6718    width: 217px;
   6719  }
   6720  .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .meta:has(.story-footer .story-sponsored-label) .sections-card-footer {
   6721    display: none;
   6722  }
   6723  .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .meta:has(.story-footer .story-sponsored-label) .story-footer {
   6724    margin-block: auto 0;
   6725  }
   6726  .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .context-menu-position-container .context-menu-button {
   6727    height: 32px;
   6728    width: 32px;
   6729  }
   6730  .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .card-stp-button-position-wrapper {
   6731    inset-inline-end: var(--space-large);
   6732    inset-block-end: var(--space-small);
   6733  }
   6734  .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .card-stp-button-hover-background {
   6735    background: transparent;
   6736  }
   6737  .ds-section-grid.ds-card-grid .col-4-medium.refined-cards:hover .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-4-medium.refined-cards:active .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-4-medium.refined-cards:focus-within .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-4-medium.refined-cards.active .meta .source-wrapper {
   6738    max-width: 175px;
   6739  }
   6740  .ds-section-grid.ds-card-grid .col-4-medium.refined-cards:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-medium.refined-cards:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-medium.refined-cards:focus-within .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-medium.refined-cards.active .meta .source-wrapper .source {
   6741    display: block;
   6742    width: unset;
   6743  }
   6744  .ds-section-grid.ds-card-grid .col-4-medium .card-stp-button-position-wrapper {
   6745    inset-inline-end: var(--space-small);
   6746  }
   6747  .ds-section-grid.ds-card-grid .col-4-medium .card-stp-button-hover-background {
   6748    background: transparent;
   6749  }
   6750  .ds-section-grid.ds-card-grid .col-4-medium .ds-card-link {
   6751    display: flex;
   6752    flex-direction: column;
   6753    gap: 0;
   6754    padding: 0;
   6755  }
   6756  .ds-section-grid.ds-card-grid .col-4-medium .img-wrapper {
   6757    width: 100%;
   6758    position: relative;
   6759    flex-grow: 0;
   6760    flex-shrink: 0;
   6761    aspect-ratio: initial;
   6762  }
   6763  .ds-section-grid.ds-card-grid .col-4-medium:not(.placeholder) .img-wrapper > .ds-image.img > img {
   6764    border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
   6765  }
   6766  .ds-section-grid.ds-card-grid .col-4-medium .meta {
   6767    padding: var(--space-medium) var(--space-large);
   6768  }
   6769  .ds-section-grid.ds-card-grid .col-4-medium .meta .info-wrap {
   6770    flex-grow: initial;
   6771  }
   6772  .ds-section-grid.ds-card-grid .col-4-medium .meta .info-wrap .title {
   6773    -webkit-line-clamp: 3;
   6774    margin-block: 0 var(--space-small);
   6775    font-size: var(--font-size-root);
   6776  }
   6777  .ds-section-grid.ds-card-grid .col-4-medium .meta .info-wrap .excerpt {
   6778    display: block;
   6779    -webkit-line-clamp: 3;
   6780  }
   6781  .ds-section-grid.ds-card-grid .col-4-medium .meta .sections-card-footer {
   6782    margin-block-start: auto;
   6783  }
   6784  .ds-section-grid.ds-card-grid .col-4-large {
   6785    grid-row: span 2;
   6786    grid-column: span 2;
   6787  }
   6788  .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui {
   6789    box-shadow: var(--box-shadow-card);
   6790  }
   6791 }
   6792 @media (min-width: 1390px) and (724px <= width < 1122px), (min-width: 1390px) and (min-width: 1390px) {
   6793  .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui .ds-card-link {
   6794    gap: var(--space-large);
   6795    padding: var(--space-large);
   6796  }
   6797  .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui .meta {
   6798    padding: 0;
   6799    color: var(--newtab-text-primary-color);
   6800  }
   6801  .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui .meta .info-wrap .excerpt {
   6802    color: var(--text-color-deemphasized);
   6803  }
   6804  .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui .meta .sections-card-footer {
   6805    max-width: 334px;
   6806  }
   6807  .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui .meta .sections-card-footer .source-wrapper {
   6808    max-width: 245px;
   6809  }
   6810  .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui .card-stp-button-position-wrapper {
   6811    inset-inline-end: var(--space-large);
   6812    inset-block-end: var(--space-large);
   6813  }
   6814  .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui:focus-visible .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui.active .meta .source-wrapper .source {
   6815    display: block;
   6816  }
   6817 }
   6818 @media (min-width: 1390px) {
   6819  .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui:hover {
   6820    box-shadow: var(--box-shadow-card-hover);
   6821  }
   6822 }
   6823 @media (min-width: 1390px) and (724px <= width < 1122px), (min-width: 1390px) and (min-width: 1390px) {
   6824  .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui {
   6825    align-content: flex-start;
   6826    justify-content: center;
   6827  }
   6828  .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .ds-card-link {
   6829    flex-direction: row;
   6830    gap: var(--space-xlarge);
   6831    padding: var(--space-xxlarge);
   6832    flex-grow: 0;
   6833  }
   6834  .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .img-wrapper {
   6835    width: 190px;
   6836    height: 250px;
   6837  }
   6838  .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .ds-image.img {
   6839    aspect-ratio: 1/1;
   6840    width: 100%;
   6841    height: 100%;
   6842  }
   6843  .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .ds-image.img img {
   6844    border-radius: var(--border-radius-medium);
   6845  }
   6846  .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .meta {
   6847    padding: 0;
   6848    min-height: 220px;
   6849  }
   6850  .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .meta .title {
   6851    -webkit-line-clamp: 3;
   6852    font-size: var(--font-size-large);
   6853    font-weight: var(--heading-font-weight);
   6854    margin-block: 0 var(--space-small);
   6855  }
   6856  .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .meta .excerpt {
   6857    -webkit-line-clamp: 4;
   6858    font-size: var(--font-size-root);
   6859  }
   6860  .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .meta .sections-card-footer {
   6861    margin-block-start: auto;
   6862  }
   6863  .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .card-stp-button-hover-background {
   6864    background: transparent;
   6865    inset-inline-start: 0;
   6866  }
   6867 }
   6868 @media (min-width: 1390px) {
   6869  .ds-section-grid.ds-card-grid .col-4-show-excerpt .meta .info-wrap .excerpt {
   6870    display: block;
   6871  }
   6872 }
   6873 @media (min-width: 1390px) {
   6874  .ds-section-grid.ds-card-grid .col-4-hide-excerpt .meta .info-wrap .excerpt {
   6875    display: none;
   6876  }
   6877 }
   6878 @media (min-width: 1390px) {
   6879  .ds-section-grid.ds-card-grid .ds-image.image-1, .ds-section-grid.ds-card-grid .ds-image.image-2, .ds-section-grid.ds-card-grid .ds-image.image-3 {
   6880    display: none;
   6881  }
   6882  .ds-section-grid.ds-card-grid .ds-image.image-4 {
   6883    display: block;
   6884  }
   6885 }
   6886 
   6887 /* stylelint-disable max-nesting-depth */
   6888 .ds-highlights .section .section-list {
   6889  grid-gap: var(--gridRowGap);
   6890  grid-template-columns: repeat(1, 1fr);
   6891 }
   6892 @media (min-width: 610px) {
   6893  .ds-highlights .section .section-list {
   6894    grid-template-columns: repeat(2, 1fr);
   6895  }
   6896 }
   6897 @media (min-width: 866px) {
   6898  .ds-highlights .section .section-list {
   6899    grid-template-columns: repeat(4, 1fr);
   6900  }
   6901 }
   6902 .ds-highlights .section .section-list .card-outer {
   6903  height: 175px;
   6904 }
   6905 .ds-highlights .section .section-list .card-outer .card-host-name {
   6906  font-size: var(--font-size-small);
   6907  line-height: 20px;
   6908  padding-block-end: 0;
   6909  margin-block-end: var(--space-xxsmall);
   6910  text-transform: unset;
   6911 }
   6912 .ds-highlights .section .section-list .card-outer .card-title {
   6913  font-size: var(--font-size-small);
   6914  font-weight: var(--heading-font-weight);
   6915  line-height: 20px;
   6916  max-height: 20px;
   6917 }
   6918 .ds-highlights .section .section-list .card-outer a {
   6919  text-decoration: none;
   6920 }
   6921 .ds-highlights .section .section-list .card-outer .context-menu-button {
   6922  background-color: var(--newtab-button-static-background);
   6923 }
   6924 .ds-highlights .section .section-list .card-outer .context-menu-button:hover {
   6925  background-color: var(--newtab-button-static-hover-background);
   6926 }
   6927 .ds-highlights .section .section-list .card-outer .context-menu-button:hover:active {
   6928  background-color: var(--newtab-button-static-active-background);
   6929 }
   6930 .ds-highlights .section .section-list .card-outer .context-menu-button:focus-visible {
   6931  background-color: var(--newtab-button-static-focus-background);
   6932 }
   6933 .ds-highlights .hide-for-narrow {
   6934  display: block;
   6935 }
   6936 
   6937 .ds-hr {
   6938  border: 0;
   6939  border-block-start: 1px solid #D7D7DB;
   6940  height: 0;
   6941 }
   6942 [lwt-newtab-brighttext] .ds-hr {
   6943  border-block-start: 1px solid #4A4A4F;
   6944 }
   6945 
   6946 /* stylelint-disable max-nesting-depth */
   6947 .ds-navigation {
   6948  color: var(--newtab-contextual-text-primary-color);
   6949  font-size: var(--font-size-small);
   6950  font-weight: var(--font-weight-semibold);
   6951  padding: var(--space-xsmall) 0;
   6952 }
   6953 @media (min-width: 1122px) {
   6954  .ds-navigation {
   6955    line-height: 32px;
   6956  }
   6957 }
   6958 .ds-navigation.ds-navigation-centered {
   6959  text-align: center;
   6960 }
   6961 .ds-navigation.ds-navigation-right-aligned {
   6962  text-align: end;
   6963 }
   6964 .lightWallpaper .ds-navigation {
   6965  color-scheme: light;
   6966 }
   6967 .darkWallpaper .ds-navigation {
   6968  color-scheme: dark;
   6969 }
   6970 .ds-navigation ul {
   6971  display: inline;
   6972  margin: 0;
   6973  padding: 0;
   6974 }
   6975 .ds-navigation ul li {
   6976  display: inline-block;
   6977 }
   6978 .ds-navigation ul li::after {
   6979  content: "·";
   6980  padding: var(--space-xsmall);
   6981 }
   6982 .ds-navigation ul li:last-child::after {
   6983  content: none;
   6984 }
   6985 .ds-navigation ul li a:hover, .ds-navigation ul li a:active {
   6986  text-decoration: none;
   6987 }
   6988 .ds-navigation ul li a:active {
   6989  color: var(--newtab-primary-element-active-color);
   6990 }
   6991 .ds-navigation .ds-navigation-header {
   6992  padding-inline-end: var(--space-xsmall);
   6993 }
   6994 .ds-navigation .ds-navigation-privacy {
   6995  padding-inline-start: var(--space-xsmall);
   6996  float: inline-end;
   6997 }
   6998 .ds-navigation .ds-navigation-privacy:hover {
   6999  text-decoration: none;
   7000 }
   7001 .ds-navigation.ds-navigation-new-topics {
   7002  display: block;
   7003  padding-block-start: var(--space-xxlarge);
   7004 }
   7005 .ds-navigation.ds-navigation-new-topics .ds-navigation-header {
   7006  font-size: var(--font-size-small);
   7007  font-weight: var(--heading-font-weight);
   7008  display: inline-block;
   7009  margin-block-end: var(--space-small);
   7010 }
   7011 .ds-navigation.ds-navigation-new-topics .ds-navigation-family {
   7012  text-align: center;
   7013  font-size: var(--font-size-small);
   7014  margin: var(--space-large) auto var(--space-xlarge);
   7015 }
   7016 .ds-navigation.ds-navigation-new-topics .ds-navigation-family span {
   7017  margin: 0 var(--space-small);
   7018 }
   7019 .ds-navigation.ds-navigation-new-topics .ds-navigation-family .firefox-logo,
   7020 .ds-navigation.ds-navigation-new-topics .ds-navigation-family .pocket-logo {
   7021  height: 20px;
   7022  width: 20px;
   7023  background-size: cover;
   7024 }
   7025 .ds-navigation.ds-navigation-new-topics .ds-navigation-family .firefox-logo {
   7026  background-image: url("chrome://newtab/content/data/content/assets/firefox.svg");
   7027 }
   7028 .ds-navigation.ds-navigation-new-topics .ds-navigation-family .pocket-logo {
   7029  background-image: url("chrome://global/skin/icons/help.svg");
   7030  fill: #EF4056;
   7031 }
   7032 .ds-navigation.ds-navigation-new-topics .ds-navigation-family .ds-navigation-family-message {
   7033  display: block;
   7034 }
   7035 @media (min-width: 610px) {
   7036  .ds-navigation.ds-navigation-new-topics .ds-navigation-family .ds-navigation-family-message {
   7037    display: inline;
   7038  }
   7039 }
   7040 @media (min-width: 610px) {
   7041  .ds-navigation.ds-navigation-new-topics .ds-navigation-family {
   7042    margin-block-start: calc(var(--space-large) + var(--space-xlarge));
   7043  }
   7044 }
   7045 .ds-navigation.ds-navigation-new-topics ul {
   7046  display: grid;
   7047  grid-gap: 0 var(--space-xlarge);
   7048  grid-auto-flow: column;
   7049  grid-template: repeat(8, 1fr)/repeat(1, 1fr);
   7050 }
   7051 .ds-navigation.ds-navigation-new-topics ul li {
   7052  border-block-start: 1px solid var(--border-color);
   7053  line-height: 24px;
   7054  font-size: var(--font-size-small);
   7055  font-weight: var(--font-weight-semibold);
   7056 }
   7057 .ds-navigation.ds-navigation-new-topics ul li::after {
   7058  content: "";
   7059  padding: 0;
   7060 }
   7061 .ds-navigation.ds-navigation-new-topics ul li:nth-last-child(2), .ds-navigation.ds-navigation-new-topics ul li:nth-last-child(3) {
   7062  display: none;
   7063 }
   7064 .ds-navigation.ds-navigation-new-topics ul li:nth-last-child(1) {
   7065  border-block-end: 1px solid var(--border-color);
   7066 }
   7067 @media (min-width: 610px) {
   7068  .ds-navigation.ds-navigation-new-topics ul {
   7069    grid-template: repeat(3, 1fr)/repeat(2, 1fr);
   7070  }
   7071  .ds-navigation.ds-navigation-new-topics ul li:nth-child(3) {
   7072    border-block-end: 1px solid var(--border-color);
   7073  }
   7074 }
   7075 @media (min-width: 866px) {
   7076  .ds-navigation.ds-navigation-new-topics ul {
   7077    grid-template: repeat(2, 1fr)/repeat(3, 1fr);
   7078  }
   7079  .ds-navigation.ds-navigation-new-topics ul li:nth-child(odd) {
   7080    border-block-end: 0;
   7081  }
   7082  .ds-navigation.ds-navigation-new-topics ul li:nth-child(even) {
   7083    border-block-end: 1px solid var(--border-color);
   7084  }
   7085 }
   7086 @media (min-width: 1122px) {
   7087  .ds-navigation.ds-navigation-new-topics ul {
   7088    grid-template: repeat(2, 1fr)/repeat(4, 1fr);
   7089  }
   7090  .ds-navigation.ds-navigation-new-topics ul li:nth-last-child(2), .ds-navigation.ds-navigation-new-topics ul li:nth-last-child(3) {
   7091    display: block;
   7092  }
   7093 }
   7094 
   7095 .ds-section-title {
   7096  text-align: center;
   7097  margin-block-start: var(--space-xlarge);
   7098 }
   7099 .ds-section-title .title {
   7100  color: var(--newtab-text-primary-color);
   7101  font-size: var(--font-size-xxlarge);
   7102  font-weight: var(--font-weight);
   7103 }
   7104 .ds-section-title .subtitle {
   7105  font-size: inherit;
   7106  color: var(--newtab-text-secondary-color);
   7107  margin-block-start: var(--space-xsmall);
   7108 }
   7109 
   7110 /* stylelint-disable max-nesting-depth */
   7111 .outer-wrapper .ds-top-sites .collapsible-section {
   7112  margin-block-end: var(--space-large);
   7113 }
   7114 .outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .tile {
   7115  border: 0;
   7116  outline: var(--focus-outline);
   7117 }
   7118 .outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .icon-pin-small {
   7119  opacity: 1;
   7120 }
   7121 .outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner {
   7122  box-shadow: 0 0 0 5px var(--newtab-background-color-secondary);
   7123  transition: box-shadow 150ms;
   7124  border-radius: var(--border-radius-small);
   7125  outline: none;
   7126 }
   7127 .outer-wrapper .ds-top-sites .top-sites .top-sites-list {
   7128  width: fit-content;
   7129  margin: 0 auto;
   7130 }
   7131 
   7132 .ds-column-5 .ds-top-sites .top-site-outer,
   7133 .ds-column-6 .ds-top-sites .top-site-outer,
   7134 .ds-column-7 .ds-top-sites .top-site-outer,
   7135 .ds-column-8 .ds-top-sites .top-site-outer {
   7136  padding: 0 var(--space-small);
   7137 }
   7138 .ds-column-5 .ds-top-sites .top-sites-list,
   7139 .ds-column-6 .ds-top-sites .top-sites-list,
   7140 .ds-column-7 .ds-top-sites .top-sites-list,
   7141 .ds-column-8 .ds-top-sites .top-sites-list {
   7142  margin: 0 calc(var(--space-small) * -1);
   7143 }
   7144 .ds-column-5 .ds-top-sites .top-site-inner,
   7145 .ds-column-6 .ds-top-sites .top-site-inner,
   7146 .ds-column-7 .ds-top-sites .top-site-inner,
   7147 .ds-column-8 .ds-top-sites .top-site-inner {
   7148  --leftPanelIconWidth: 84.67px;
   7149 }
   7150 .ds-column-5 .ds-top-sites .top-site-inner .tile,
   7151 .ds-column-6 .ds-top-sites .top-site-inner .tile,
   7152 .ds-column-7 .ds-top-sites .top-site-inner .tile,
   7153 .ds-column-8 .ds-top-sites .top-site-inner .tile {
   7154  width: var(--leftPanelIconWidth);
   7155  height: var(--leftPanelIconWidth);
   7156 }
   7157 .ds-column-5 .ds-top-sites .top-site-inner .title,
   7158 .ds-column-6 .ds-top-sites .top-site-inner .title,
   7159 .ds-column-7 .ds-top-sites .top-site-inner .title,
   7160 .ds-column-8 .ds-top-sites .top-site-inner .title {
   7161  width: var(--leftPanelIconWidth);
   7162 }
   7163 
   7164 .ds-column-1 .ds-top-sites .top-site-outer,
   7165 .ds-column-2 .ds-top-sites .top-site-outer,
   7166 .ds-column-3 .ds-top-sites .top-site-outer,
   7167 .ds-column-4 .ds-top-sites .top-site-outer {
   7168  padding: 0 var(--space-small);
   7169 }
   7170 .ds-column-1 .ds-top-sites .top-sites-list,
   7171 .ds-column-2 .ds-top-sites .top-sites-list,
   7172 .ds-column-3 .ds-top-sites .top-sites-list,
   7173 .ds-column-4 .ds-top-sites .top-sites-list {
   7174  margin: 0 calc(var(--space-small) * -1);
   7175 }
   7176 .ds-column-1 .ds-top-sites .top-site-inner,
   7177 .ds-column-2 .ds-top-sites .top-site-inner,
   7178 .ds-column-3 .ds-top-sites .top-site-inner,
   7179 .ds-column-4 .ds-top-sites .top-site-inner {
   7180  --rightPanelIconWidth: 82.67px;
   7181 }
   7182 .ds-column-1 .ds-top-sites .top-site-inner .tile,
   7183 .ds-column-2 .ds-top-sites .top-site-inner .tile,
   7184 .ds-column-3 .ds-top-sites .top-site-inner .tile,
   7185 .ds-column-4 .ds-top-sites .top-site-inner .tile {
   7186  width: var(--rightPanelIconWidth);
   7187  height: var(--rightPanelIconWidth);
   7188 }
   7189 .ds-column-1 .ds-top-sites .top-site-inner .title,
   7190 .ds-column-2 .ds-top-sites .top-site-inner .title,
   7191 .ds-column-3 .ds-top-sites .top-site-inner .title,
   7192 .ds-column-4 .ds-top-sites .top-site-inner .title {
   7193  width: var(--rightPanelIconWidth);
   7194 }
   7195 
   7196 .ds-card .context-menu-button {
   7197  background-clip: padding-box;
   7198  background-color: var(--newtab-button-background);
   7199  background-image: url("chrome://global/skin/icons/more.svg");
   7200  background-position: 50.1%;
   7201  border: 0;
   7202  outline: 1px solid var(--border-color);
   7203  outline-width: 0;
   7204  border-radius: var(--border-radius-circle);
   7205  cursor: pointer;
   7206  color: var(--button-text-color);
   7207  fill: var(--newtab-button-text);
   7208  height: 27px;
   7209  inset-inline-end: calc(var(--space-medium) * -1);
   7210  opacity: 0;
   7211  position: absolute;
   7212  inset-block-start: calc(var(--space-medium) * -1);
   7213  transform: scale(0.25);
   7214  transition-duration: 150ms;
   7215  transition-property: transform, opacity;
   7216  width: 27px;
   7217 }
   7218 .ds-card .context-menu-button:is(:active, :focus-visible, :hover) {
   7219  opacity: 1;
   7220  transform: scale(1);
   7221 }
   7222 .ds-card .context-menu-button:is(:hover) {
   7223  background-color: var(--newtab-button-hover-background);
   7224 }
   7225 .ds-card .context-menu-button:is(:focus-visible) {
   7226  outline-color: var(--newtab-button-focus-border);
   7227  background-color: var(--newtab-button-focus-background);
   7228  outline-width: 4px;
   7229 }
   7230 .ds-card .context-menu-button:is(:active) {
   7231  background-color: var(--newtab-button-active-background);
   7232 }
   7233 .ds-card .context-menu {
   7234  opacity: 0;
   7235 }
   7236 .ds-card.active .context-menu {
   7237  opacity: 1;
   7238 }
   7239 .ds-card.last-item .context-menu {
   7240  margin-inline-end: var(--space-xsmall);
   7241  margin-inline-start: auto;
   7242  inset-inline-end: 0;
   7243  inset-inline-start: auto;
   7244 }
   7245 .ds-card.last-item .context-menu {
   7246  opacity: 1;
   7247 }
   7248 .ds-card:is(:hover, :focus, .active) {
   7249  outline: none;
   7250 }
   7251 .ds-card:is(:hover, :focus, .active) .context-menu-button {
   7252  opacity: 1;
   7253  transform: scale(1);
   7254  transition-delay: 333ms;
   7255 }
   7256 
   7257 /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */
   7258 /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */
   7259 .ds-card {
   7260  display: flex;
   7261  flex-direction: column;
   7262  position: relative;
   7263  z-index: auto;
   7264 }
   7265 .ds-card.placeholder {
   7266  display: flex;
   7267  flex-direction: column;
   7268  gap: var(--space-small);
   7269  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
   7270  border-radius: var(--border-radius-medium);
   7271  position: relative;
   7272  overflow: hidden;
   7273 }
   7274 .ds-card.placeholder .placeholder-fill {
   7275  background: var(--newtab-button-active-background);
   7276  border-radius: var(--border-radius-small);
   7277 }
   7278 .ds-card.placeholder .placeholder-image {
   7279  width: 100%;
   7280  height: 140px;
   7281  border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
   7282 }
   7283 .ds-card.placeholder .placeholder-label {
   7284  width: 40%;
   7285  height: var(--size-item-small);
   7286  margin-block-end: var(--space-small);
   7287  margin-inline: var(--space-large);
   7288 }
   7289 .ds-card.placeholder .placeholder-header {
   7290  width: 80%;
   7291  height: 20px;
   7292  margin-inline: var(--space-large);
   7293 }
   7294 .ds-card.placeholder .placeholder-description {
   7295  height: 60px;
   7296  margin-inline: var(--space-large);
   7297  margin-block-end: var(--space-large);
   7298 }
   7299 .ds-card.placeholder.refined-cards .placeholder-image {
   7300  height: 150px;
   7301 }
   7302 .ds-card.placeholder.refined-cards .placeholder-description {
   7303  margin-block-end: var(--space-small);
   7304 }
   7305 .ds-card.placeholder.refined-cards .placeholder-header {
   7306  width: initial;
   7307  margin-block-end: var(--space-large);
   7308 }
   7309 .ds-card.placeholder-seen::before {
   7310  content: "";
   7311  display: block;
   7312  position: absolute;
   7313  inset-block-start: 0;
   7314  inset-inline-start: -100%;
   7315  height: 100%;
   7316  width: 100%;
   7317  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--newtab-background-color-secondary) 50%, rgba(255, 255, 255, 0) 100%);
   7318  z-index: 2;
   7319 }
   7320 @media (prefers-reduced-motion: no-preference) {
   7321  .ds-card.placeholder-seen::before {
   7322    animation: loading 1.5s infinite;
   7323  }
   7324 }
   7325 @keyframes loading {
   7326  0% {
   7327    inset-inline-start: -100%;
   7328  }
   7329  50%, 100% {
   7330    inset-inline-start: 100%;
   7331  }
   7332 }
   7333 .ds-card .img-wrapper {
   7334  width: 100%;
   7335  position: relative;
   7336 }
   7337 .ds-card .card-stp-button-hover-background {
   7338  opacity: 0;
   7339  width: 100%;
   7340  position: absolute;
   7341  inset-block-start: 0;
   7342  transition: opacity;
   7343  transition-duration: 0s;
   7344  padding-block-start: 50%;
   7345  pointer-events: none;
   7346  background: rgba(0, 0, 0, 0.4);
   7347  border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
   7348 }
   7349 .ds-card .card-stp-button-hover-background .card-stp-button-position-wrapper {
   7350  position: absolute;
   7351  inset-inline-end: var(--space-small);
   7352  inset-block-start: var(--space-small);
   7353  display: flex;
   7354  justify-content: end;
   7355  align-items: center;
   7356 }
   7357 .ds-card .card-stp-button-hover-background .context-menu-position-container {
   7358  position: relative;
   7359 }
   7360 .ds-card .card-stp-button-hover-background .context-menu {
   7361  margin-inline-start: var(--space-large);
   7362  inset-inline-start: auto;
   7363  position: absolute;
   7364  inset-block-start: calc(var(--space-xsmall) + var(--space-large));
   7365 }
   7366 .ds-card .card-stp-button-hover-background button,
   7367 .ds-card .card-stp-button-hover-background .context-menu {
   7368  pointer-events: auto;
   7369 }
   7370 .ds-card .card-stp-button-hover-background button {
   7371  cursor: pointer;
   7372 }
   7373 .ds-card .context-menu-button {
   7374  position: static;
   7375  transition: none;
   7376  border-radius: var(--border-radius-small);
   7377  background-color: var(--newtab-button-static-background);
   7378 }
   7379 .ds-card .context-menu-button:hover {
   7380  background-color: var(--newtab-button-static-hover-background);
   7381 }
   7382 .ds-card .context-menu-button:hover:active {
   7383  background-color: var(--newtab-button-static-active-background);
   7384 }
   7385 .ds-card .context-menu-button:focus-visible {
   7386  outline: 2px solid var(--newtab-button-focus-border);
   7387  background-color: var(--newtab-button-static-focus-background);
   7388 }
   7389 .ds-card.last-item .card-stp-button-hover-background .context-menu {
   7390  margin-inline-start: auto;
   7391  margin-inline-end: var(--space-large);
   7392 }
   7393 .ds-card.active .card-stp-button-hover-background, .ds-card:focus-within .card-stp-button-hover-background, .ds-card:hover .card-stp-button-hover-background {
   7394  display: block;
   7395  opacity: 1;
   7396  transition-duration: 0.3s;
   7397 }
   7398 .ds-card.active .card-stp-button-hover-background .context-menu-button, .ds-card:focus-within .card-stp-button-hover-background .context-menu-button, .ds-card:hover .card-stp-button-hover-background .context-menu-button {
   7399  opacity: 1;
   7400  transform: scale(1);
   7401 }
   7402 .ds-card.active h3, .ds-card:focus-within h3, .ds-card:hover h3 {
   7403  color: var(--newtab-primary-action-background);
   7404 }
   7405 .ds-card:active h3 {
   7406  color: var(--newtab-primary-element-active-color);
   7407 }
   7408 .ds-card .img {
   7409  aspect-ratio: 2/1;
   7410 }
   7411 .ds-card .img img {
   7412  border-radius: var(--border-radius-small);
   7413  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15);
   7414 }
   7415 .ds-card .ds-card-link {
   7416  display: flex;
   7417  flex-direction: column;
   7418  align-items: initial;
   7419  text-decoration: none;
   7420  grid-template-columns: auto 1fr;
   7421  gap: inherit;
   7422  flex-grow: 1;
   7423 }
   7424 .ds-card .ds-card-link:focus {
   7425  border: 0;
   7426  outline: var(--focus-outline);
   7427  transition: none;
   7428 }
   7429 .ds-card .ds-card-topic {
   7430  position: absolute;
   7431  z-index: 1;
   7432  background: light-dark(#F0F0F4, var(--newtab-background-color-secondary));
   7433  border-radius: var(--border-radius-small);
   7434  color: var(--newtab-text-primary-color);
   7435  padding: var(--space-small);
   7436  margin: var(--space-small);
   7437  font-size: var(--font-size-small);
   7438 }
   7439 .ds-card .meta {
   7440  display: flex;
   7441  justify-content: space-between;
   7442  flex-direction: column;
   7443  padding: var(--space-medium) var(--space-large);
   7444  flex-grow: 1;
   7445 }
   7446 .ds-card .meta .info-wrap {
   7447  flex-grow: 1;
   7448 }
   7449 .ds-card .meta .title {
   7450  font-size: var(--font-size-large);
   7451  -webkit-line-clamp: 3;
   7452  line-height: normal;
   7453  margin-block: 0;
   7454  font-weight: var(--heading-font-weight);
   7455 }
   7456 .ds-card .meta .excerpt {
   7457  font-size: var(--font-size-small);
   7458  -webkit-line-clamp: 3;
   7459  line-height: normal;
   7460 }
   7461 .ds-card .meta .source-wrapper {
   7462  color: var(--newtab-text-secondary-text);
   7463  display: flex;
   7464  margin-block-end: var(--space-xxsmall);
   7465  align-items: center;
   7466 }
   7467 .ds-card .meta .source-wrapper img {
   7468  border-radius: var(--border-radius-small);
   7469  margin-inline-end: var(--space-small);
   7470 }
   7471 .ds-card .meta .source {
   7472  -webkit-line-clamp: 1;
   7473  font-size: var(--font-size-small);
   7474  color: var(--newtab-text-secondary-color);
   7475 }
   7476 .ds-card .meta .source span {
   7477  display: inline-block;
   7478 }
   7479 .ds-card .meta .new-sponsored-label {
   7480  font-size: var(--font-size-small);
   7481  margin-block-end: var(--space-xxsmall);
   7482 }
   7483 .ds-card.ds-card-title-lines-2 .meta .title {
   7484  font-size: var(--font-size-large);
   7485  -webkit-line-clamp: 2;
   7486  line-height: normal;
   7487 }
   7488 .ds-card.ds-card-title-lines-1 .meta .title {
   7489  font-size: var(--font-size-large);
   7490  -webkit-line-clamp: 1;
   7491  line-height: normal;
   7492 }
   7493 .ds-card.ds-card-desc-lines-2 .meta .excerpt {
   7494  font-size: var(--font-size-small);
   7495  -webkit-line-clamp: 2;
   7496  line-height: normal;
   7497 }
   7498 .ds-card.ds-card-desc-lines-1 .meta .excerpt {
   7499  font-size: var(--font-size-small);
   7500  -webkit-line-clamp: 1;
   7501  line-height: normal;
   7502 }
   7503 .ds-card.ds-card-compact-image .img {
   7504  padding-block-start: 47%;
   7505 }
   7506 .ds-card.ds-card-image-gradient img {
   7507  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), black 40px);
   7508 }
   7509 .ds-card.ds-card-image-gradient .meta {
   7510  padding: var(--space-xxsmall) var(--space-large) var(--space-medium);
   7511 }
   7512 .ds-card.ds-card-cta-button.variant-a .img, .ds-card.ds-card-cta-button.variant-b .img {
   7513  padding-block-start: 52.4%;
   7514 }
   7515 .ds-card.ds-card-cta-button.variant-a .story-sponsored-label, .ds-card.ds-card-cta-button.variant-b .story-sponsored-label {
   7516  margin: var(--space-small) 0 0;
   7517 }
   7518 .ds-card.ds-card-cta-button.variant-a .source, .ds-card.ds-card-cta-button.variant-b .source {
   7519  text-decoration: underline;
   7520 }
   7521 .ds-card.ds-card-cta-button.variant-a .story-footer, .ds-card.ds-card-cta-button.variant-b .story-footer {
   7522  display: flex;
   7523  flex-wrap: wrap;
   7524  justify-content: space-between;
   7525  align-items: center;
   7526  gap: 0 var(--space-small);
   7527  margin-block-start: 0;
   7528 }
   7529 .ds-card.ds-card-cta-button.variant-a .story-cta-button, .ds-card.ds-card-cta-button.variant-b .story-cta-button {
   7530  cursor: inherit;
   7531  background: var(--button-background-color);
   7532  border-radius: var(--border-radius-small);
   7533  border: none;
   7534  padding: var(--space-xsmall) var(--space-large);
   7535  font-size: var(--font-size-small);
   7536  font-weight: var(--font-weight-semibold);
   7537  min-height: var(--size-item-large);
   7538  min-width: 97px;
   7539  color: var(--newtab-text-primary-color);
   7540  margin-block-start: var(--space-small);
   7541 }
   7542 .ds-card.ds-card-cta-button.variant-a .story-cta-button:hover, .ds-card.ds-card-cta-button.variant-b .story-cta-button:hover {
   7543  background: var(--button-background-color-hover);
   7544 }
   7545 .ds-card.ds-card-cta-button.variant-a .cta-header, .ds-card.ds-card-cta-button.variant-b .cta-header {
   7546  background: var(--button-background-color);
   7547  font-size: var(--font-size-root);
   7548  font-weight: var(--heading-font-weight);
   7549  text-align: end;
   7550  padding: var(--space-xsmall) var(--space-large);
   7551  color: var(--newtab-text-primary-color);
   7552  min-height: var(--size-item-large);
   7553 }
   7554 .ds-card h3 {
   7555  font-size: var(--font-size-large);
   7556  color: var(--newtab-text-primary-color);
   7557 }
   7558 .ds-card p {
   7559  font-size: var(--font-size-small);
   7560  color: var(--newtab-text-primary-color);
   7561  margin: 0;
   7562 }
   7563 
   7564 .sections-card-ui.placeholder {
   7565  box-shadow: 0 2px 6px #15141A24;
   7566  border-radius: var(--border-radius-large);
   7567 }
   7568 .ds-card-grid .sections-card-ui {
   7569  background: var(--newtab-background-card);
   7570  transition: opacity 0.2s ease;
   7571 }
   7572 .ds-card-grid .sections-card-ui:hover {
   7573  background: var(--newtab-background-color-secondary);
   7574 }
   7575 .ds-card-grid .sections-card-ui:not(.placeholder) {
   7576  box-shadow: 0 1px 2px 0 rgba(58, 57, 68, 0.2);
   7577  border-radius: var(--border-radius-large);
   7578 }
   7579 .ds-card-grid .sections-card-ui:not(.placeholder).active, .ds-card-grid .sections-card-ui:not(.placeholder):focus-within, .ds-card-grid .sections-card-ui:not(.placeholder):hover {
   7580  box-shadow: 0 2px 14px 0 var(--newtab-section-card-box-shadow-color);
   7581  z-index: 1;
   7582 }
   7583 .ds-card-grid .sections-card-ui:not(.placeholder).active {
   7584  z-index: 2;
   7585 }
   7586 .ds-card-grid .sections-card-ui:not(.placeholder) .img-wrapper > .ds-image.img > img {
   7587  border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
   7588 }
   7589 @media (forced-colors: active) {
   7590  .ds-card-grid .sections-card-ui:not(.placeholder) {
   7591    border: var(--border-width) solid var(--border-color-card);
   7592  }
   7593  .ds-card-grid .sections-card-ui:not(.placeholder):hover {
   7594    --newtab-background-color-secondary: SelectedItemText;
   7595    --newtab-text-secondary-color: SelectedItem;
   7596    color: SelectedItem;
   7597    border-color: var(--border-color-interactive-hover);
   7598  }
   7599  .ds-card-grid .sections-card-ui:not(.placeholder):hover .meta .title {
   7600    color: var(--link-color-hover);
   7601  }
   7602  .ds-card-grid .sections-card-ui .meta .title {
   7603    text-decoration: underline;
   7604    color: var(--link-color);
   7605  }
   7606 }
   7607 .ds-card-grid .sections-card-ui .meta {
   7608  padding: var(--space-large);
   7609 }
   7610 .ds-card-grid .sections-card-ui .meta .title {
   7611  -webkit-line-clamp: 3;
   7612  font-size: var(--font-size-root);
   7613  margin-block-end: var(--space-small);
   7614  font-weight: var(--heading-font-weight);
   7615 }
   7616 .ds-card-grid .sections-card-ui .meta .excerpt {
   7617  -webkit-line-clamp: 3;
   7618  font-size: var(--font-size-small);
   7619 }
   7620 .ds-card-grid .sections-card-ui .meta .source {
   7621  -webkit-line-clamp: 1;
   7622  font-size: var(--font-size-small);
   7623 }
   7624 .ds-card-grid .sections-card-ui .meta .story-footer {
   7625  justify-content: flex-start;
   7626  display: grid;
   7627  height: 28px;
   7628  align-content: center;
   7629  margin-block-start: var(--space-small);
   7630 }
   7631 .ds-card-grid .sections-card-ui .meta .story-sponsored-label {
   7632  line-height: unset;
   7633  font-size: var(--font-size-small);
   7634 }
   7635 .ds-card-grid .sections-card-ui .sections-card-footer {
   7636  margin-block-start: var(--space-small);
   7637  position: relative;
   7638  min-height: 28px;
   7639 }
   7640 .ds-card-grid .sections-card-ui .ds-card-topic {
   7641  display: grid;
   7642  align-content: center;
   7643  height: 28px;
   7644  font-size: var(--font-size-small);
   7645  color: var(--newtab-text-topic-label-color);
   7646  margin: initial;
   7647  padding: initial;
   7648  background-color: initial;
   7649 }
   7650 .ds-card-grid .sections-card-ui .card-stp-button-hover-background {
   7651  border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
   7652  background-color: var(--button-background-color-ghost);
   7653 }
   7654 .ds-card-grid .sections-card-ui .ds-card-link:focus {
   7655  border-radius: var(--border-radius-large);
   7656 }
   7657 
   7658 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle,
   7659 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle {
   7660  box-shadow: none;
   7661  background: none;
   7662 }
   7663 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .ds-image,
   7664 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .ds-image {
   7665  padding-block-start: 83.4%;
   7666 }
   7667 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .card-stp-button-hover-background,
   7668 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .card-stp-button-hover-background {
   7669  padding-block-start: 83.4%;
   7670 }
   7671 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .img-wrapper .ds-image img,
   7672 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .img-wrapper .ds-image img {
   7673  border-radius: var(--border-radius-medium);
   7674 }
   7675 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .meta,
   7676 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .meta {
   7677  padding-inline: 0;
   7678  padding-block: var(--space-medium);
   7679 }
   7680 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .meta .title,
   7681 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .meta .title {
   7682  text-transform: uppercase;
   7683  font-size: var(--font-size-small);
   7684  font-weight: var(--font-weight);
   7685  color: var(--newtab-text-secondary-color);
   7686 }
   7687 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .meta .excerpt,
   7688 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .meta .excerpt {
   7689  display: none;
   7690 }
   7691 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .card-stp-button-hover-background,
   7692 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .card-stp-button-hover-background {
   7693  border-radius: var(--border-radius-medium);
   7694 }
   7695 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.sections-card-ui .img-wrapper .ds-image img,
   7696 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.sections-card-ui .img-wrapper .ds-image img {
   7697  border-radius: var(--border-radius-large);
   7698 }
   7699 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.sections-card-ui:hover,
   7700 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.sections-card-ui:hover {
   7701  box-shadow: none;
   7702 }
   7703 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.sections-card-ui:hover .img-wrapper .ds-image img,
   7704 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.sections-card-ui:hover .img-wrapper .ds-image img {
   7705  box-shadow: 0 2px 14px 0 var(--newtab-section-card-box-shadow-color);
   7706 }
   7707 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards,
   7708 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards {
   7709  background: var(--newtab-background-card);
   7710  transition: opacity 0.2s ease;
   7711 }
   7712 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards:hover,
   7713 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards:hover {
   7714  background: var(--newtab-background-color-secondary);
   7715 }
   7716 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .img-wrapper .ds-image img,
   7717 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .img-wrapper .ds-image img {
   7718  border-end-start-radius: 0;
   7719  border-end-end-radius: 0;
   7720 }
   7721 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards:hover .img-wrapper .ds-image img,
   7722 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards:hover .img-wrapper .ds-image img {
   7723  box-shadow: none;
   7724 }
   7725 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .meta,
   7726 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .meta {
   7727  padding: var(--space-small) var(--space-large);
   7728  padding-block-end: 0;
   7729 }
   7730 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .info-wrap,
   7731 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .info-wrap {
   7732  margin-block-start: auto;
   7733 }
   7734 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .meta .title,
   7735 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .meta .title {
   7736  text-transform: none;
   7737 }
   7738 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .sections-card-footer,
   7739 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .sections-card-footer {
   7740  display: none;
   7741 }
   7742 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .card-stp-button-position-wrapper,
   7743 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .card-stp-button-position-wrapper {
   7744  z-index: 10;
   7745  inset-block-end: 0;
   7746  position: absolute;
   7747 }
   7748 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .card-stp-button-position-wrapper .context-menu-position-container,
   7749 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .card-stp-button-position-wrapper .context-menu-position-container {
   7750  align-self: flex-start;
   7751  padding-block-start: var(--space-medium);
   7752 }
   7753 
   7754 .ds-card-grid .refined-cards .meta {
   7755  color: var(--newtab-text-primary-color);
   7756  padding: var(--space-small) var(--space-large);
   7757 }
   7758 .ds-card-grid .refined-cards .meta .excerpt {
   7759  display: none;
   7760 }
   7761 .ds-card-grid .refined-cards .sections-card-footer {
   7762  display: flex;
   7763  justify-content: space-between;
   7764  pointer-events: none;
   7765  max-width: 230px;
   7766  margin-block-start: var(--space-xsmall);
   7767 }
   7768 .ds-card-grid .refined-cards .sections-card-footer .source-wrapper {
   7769  margin-block-end: 0;
   7770  margin-inline-end: var(--space-xxsmall);
   7771  max-width: 175px;
   7772 }
   7773 .ds-card-grid .refined-cards:has(.story-footer .story-sponsored-label) .sections-card-footer {
   7774  display: none;
   7775 }
   7776 .ds-card-grid .refined-cards:has(.story-footer .story-sponsored-label) .card-stp-button-position-wrapper {
   7777  inset-block-end: var(--space-small);
   7778 }
   7779 .ds-card-grid .refined-cards .story-footer {
   7780  margin-block: 0 var(--space-xsmall);
   7781 }
   7782 .ds-card-grid .refined-cards .card-stp-button-hover-background {
   7783  height: 100%;
   7784  padding-block-start: 0;
   7785  background: transparent;
   7786 }
   7787 .ds-card-grid .refined-cards .card-stp-button-hover-background .card-stp-button-position-wrapper {
   7788  inset-block-start: unset;
   7789  inset-block-end: var(--space-medium);
   7790  inset-inline-end: var(--space-large);
   7791  background: var(--button-background-color-ghost);
   7792 }
   7793 .ds-card-grid .refined-cards .context-menu-button {
   7794  background-color: var(--button-background-color-ghost);
   7795 }
   7796 @media (forced-colors: active) {
   7797  .ds-card-grid .refined-cards .context-menu-button {
   7798    border: var(--border-width) solid var(--button-border-color-ghost);
   7799  }
   7800 }
   7801 .ds-card-grid .refined-cards:hover h3, .ds-card-grid .refined-cards.active h3 {
   7802  color: var(--color-accent-primary);
   7803 }
   7804 .ds-card-grid .refined-cards:hover .context-menu-button:hover, .ds-card-grid .refined-cards.active .context-menu-button:hover {
   7805  background-color: var(--button-background-color-ghost-hover);
   7806 }
   7807 @media (forced-colors: active) {
   7808  .ds-card-grid .refined-cards:hover .context-menu-button:hover, .ds-card-grid .refined-cards.active .context-menu-button:hover {
   7809    border-color: var(--button-border-color-ghost-hover);
   7810    fill: var(--button-text-color-ghost-hover);
   7811  }
   7812 }
   7813 .ds-card-grid .refined-cards:hover .context-menu-button:hover:active, .ds-card-grid .refined-cards.active .context-menu-button:hover:active {
   7814  background-color: var(--button-background-color-ghost-active);
   7815 }
   7816 .ds-card-grid .refined-cards:hover .context-menu-button:focus-visible, .ds-card-grid .refined-cards.active .context-menu-button:focus-visible {
   7817  outline: 2px solid var(--newtab-button-focus-border);
   7818  background-color: var(--newtab-button-static-focus-background);
   7819 }
   7820 .ds-card-grid .refined-cards .sections-card-footer .source {
   7821  display: block;
   7822 }
   7823 
   7824 .story-footer {
   7825  color: var(--newtab-text-secondary-color);
   7826  inset-inline-start: 0;
   7827  margin-block-start: var(--space-medium);
   7828  display: flex;
   7829  gap: var(--space-large);
   7830  position: relative;
   7831  pointer-events: none;
   7832 }
   7833 .story-footer .story-sponsored-label span {
   7834  display: inline-block;
   7835 }
   7836 .story-footer .story-sponsored-label,
   7837 .story-footer .status-message {
   7838  -webkit-line-clamp: 1;
   7839  font-size: var(--font-size-small);
   7840  color: var(--newtab-text-secondary-color);
   7841 }
   7842 .story-footer .status-message {
   7843  display: flex;
   7844  align-items: center;
   7845  height: 24px;
   7846 }
   7847 .story-footer .status-message .story-badge-icon {
   7848  fill: var(--newtab-text-secondary-color);
   7849  height: 16px;
   7850  margin-inline-end: var(--space-small);
   7851 }
   7852 .story-footer .status-message .story-badge-icon.icon-bookmark-removed {
   7853  background-image: url("chrome://newtab/content/data/content/assets/icon-removed-bookmark.svg");
   7854 }
   7855 .story-footer .status-message .story-context-label {
   7856  color: var(--newtab-text-secondary-color);
   7857  flex-grow: 1;
   7858  font-size: var(--font-size-small);
   7859  overflow: hidden;
   7860  text-overflow: ellipsis;
   7861  white-space: nowrap;
   7862 }
   7863 
   7864 .story-animate-enter {
   7865  opacity: 0;
   7866 }
   7867 
   7868 .story-animate-enter-active {
   7869  opacity: 1;
   7870  transition: opacity 150ms ease-in 300ms;
   7871 }
   7872 .story-animate-enter-active .story-badge-icon,
   7873 .story-animate-enter-active .story-context-label {
   7874  animation: color 3s ease-out 0.3s;
   7875 }
   7876 @keyframes color {
   7877  0% {
   7878    color: var(--newtab-status-success);
   7879    fill: var(--newtab-status-success);
   7880  }
   7881  100% {
   7882    color: var(--newtab-text-secondary-color);
   7883    fill: var(--newtab-text-secondary-color);
   7884  }
   7885 }
   7886 
   7887 .story-animate-exit {
   7888  position: absolute;
   7889  inset-block-start: 0;
   7890  opacity: 1;
   7891 }
   7892 
   7893 .story-animate-exit-active {
   7894  opacity: 0;
   7895  transition: opacity 250ms ease-in;
   7896 }
   7897 
   7898 .ds-image {
   7899  display: block;
   7900  position: relative;
   7901  opacity: 0;
   7902 }
   7903 .ds-image.use-transition {
   7904  transition: opacity 0.8s;
   7905 }
   7906 .ds-image.loaded {
   7907  opacity: 1;
   7908 }
   7909 .ds-image img,
   7910 .ds-image .placeholder-image,
   7911 .ds-image .broken-image {
   7912  background-color: var(--newtab-element-secondary-color);
   7913  position: absolute;
   7914  inset-block-start: 0;
   7915  width: 100%;
   7916  height: 100%;
   7917  object-fit: cover;
   7918  border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
   7919 }
   7920 .ds-image .placeholder-image {
   7921  overflow: hidden;
   7922  background-color: var(--placeholderBackgroundColor);
   7923 }
   7924 .ds-image .placeholder-image::before {
   7925  content: "";
   7926  background-image: url("chrome://newtab/content/data/content/assets/pocket-swoosh.svg");
   7927  background-repeat: no-repeat;
   7928  background-position: center;
   7929  transform: rotate(var(--placeholderBackgroundRotation));
   7930  position: absolute;
   7931  inset-block-start: -50%;
   7932  inset-inline-start: -50%;
   7933  width: 200%;
   7934  height: 200%;
   7935  margin-inline-start: var(--placeholderBackgroundOffsetx);
   7936  margin-block-start: var(--placeholderBackgroundOffsety);
   7937  background-size: var(--placeholderBackgroundScale);
   7938 }
   7939 
   7940 .ds-message {
   7941  margin: var(--space-small) 0 0;
   7942 }
   7943 .ds-message .title {
   7944  display: flex;
   7945  align-items: center;
   7946 }
   7947 .ds-message .title .glyph {
   7948  width: 16px;
   7949  height: 16px;
   7950  margin: 0 var(--space-small) 0 0;
   7951  -moz-context-properties: fill;
   7952  fill: var(--newtab-text-secondary-color);
   7953  background-position: center center;
   7954  background-size: 16px;
   7955  background-repeat: no-repeat;
   7956 }
   7957 .ds-message .title .title-text {
   7958  font-size: var(--font-size-small);
   7959  color: var(--newtab-text-secondary-color);
   7960  font-weight: var(--heading-font-weight);
   7961  padding-inline-end: var(--space-medium);
   7962 }
   7963 .ds-message .title .link {
   7964  font-size: var(--font-weight-small);
   7965 }
   7966 .ds-message .title .link:hover, .ds-message .title .link:focus {
   7967  text-decoration: underline;
   7968 }
   7969 
   7970 .impression-observer {
   7971  position: absolute;
   7972  inset-block-start: 0;
   7973  inset-inline-end: 0;
   7974  width: 100%;
   7975  height: 100%;
   7976  pointer-events: none;
   7977 }
   7978 
   7979 .section-empty-state {
   7980  border: 1px solid var(--border-color);
   7981  border-radius: var(--border-radius-small);
   7982  display: flex;
   7983  height: 160px;
   7984  width: 100%;
   7985 }
   7986 @media (min-width: 1390px) {
   7987  .section-empty-state {
   7988    width: 936px;
   7989  }
   7990 }
   7991 .section-empty-state .empty-state-message {
   7992  color: var(--newtab-text-secondary-color);
   7993  font-size: var(--font-size-small);
   7994  text-align: center;
   7995  margin: auto;
   7996  max-width: 936px;
   7997 }
   7998 .section-empty-state .try-again-button {
   7999  margin-block-start: var(--space-medium);
   8000  padding: var(--space-small) var(--space-xxlarge);
   8001  border-radius: var(--border-radius-small);
   8002  border: 0;
   8003  background: var(--newtab-button-secondary-color);
   8004  color: var(--newtab-text-primary-color);
   8005  cursor: pointer;
   8006  position: relative;
   8007  transition: background 0.2s ease, color 0.2s ease;
   8008 }
   8009 .section-empty-state .try-again-button:not(.waiting):focus {
   8010  box-shadow: 0 0 0 5px oklch(from var(--color-blue-50)/lch 30%);
   8011  transition: box-shadow 150ms;
   8012  border-radius: var(--border-radius-small);
   8013  outline: none;
   8014 }
   8015 [lwt-newtab-brighttext] .section-empty-state .try-again-button:not(.waiting):focus {
   8016  box-shadow: 0 0 0 5px oklch(from var(--color-blue-40)/lch 40%);
   8017  transition: box-shadow 150ms;
   8018  border-radius: var(--border-radius-small);
   8019  outline: none;
   8020 }
   8021 .section-empty-state .try-again-button:not(.waiting):hover {
   8022  box-shadow: 0 0 0 5px var(--newtab-element-secondary-color);
   8023  transition: box-shadow 150ms;
   8024  border-radius: var(--border-radius-small);
   8025  outline: none;
   8026 }
   8027 .section-empty-state .try-again-button::after {
   8028  content: "";
   8029  height: 20px;
   8030  width: 20px;
   8031  animation: spinner 1s linear infinite;
   8032  opacity: 0;
   8033  position: absolute;
   8034  inset-block-start: 50%;
   8035  inset-inline-start: 50%;
   8036  margin: calc(var(--space-small) * -1) 0 0 calc(var(--space-small) * -1);
   8037  mask-image: url("chrome://newtab/content/data/content/assets/spinner.svg");
   8038  mask-size: 20px;
   8039  background: var(--newtab-text-secondary-color);
   8040 }
   8041 .section-empty-state .try-again-button.waiting {
   8042  cursor: initial;
   8043  background: var(--newtab-element-secondary-color);
   8044  color: transparent;
   8045  transition: background 0.2s ease;
   8046 }
   8047 .section-empty-state .try-again-button.waiting::after {
   8048  transition: opacity 0.2s ease;
   8049  opacity: 1;
   8050 }
   8051 .section-empty-state h2 {
   8052  font-size: inherit;
   8053  font-weight: var(--heading-font-weight);
   8054  margin: 0;
   8055 }
   8056 .section-empty-state p {
   8057  margin: 0;
   8058 }
   8059 
   8060 @keyframes spinner {
   8061  to {
   8062    transform: rotate(360deg);
   8063  }
   8064 }
   8065 .ds-privacy-link {
   8066  text-align: center;
   8067  font-size: var(--font-size-small);
   8068  font-weight: var(--font-weight-semibold);
   8069 }
   8070 .ds-privacy-link a:hover {
   8071  text-decoration: none;
   8072 }
   8073 
   8074 /* stylelint-disable max-nesting-depth */
   8075 .ds-topics-widget {
   8076  display: flex;
   8077  position: relative;
   8078  flex-direction: column;
   8079 }
   8080 .ds-topics-widget .ds-topics-widget-header {
   8081  font-size: var(--font-size-large);
   8082 }
   8083 .ds-topics-widget hr {
   8084  background-color: var(--border-color-deemphasized);
   8085  height: 1px;
   8086  border: 0;
   8087  margin: var(--space-small) 0 0;
   8088 }
   8089 .ds-topics-widget .ds-topics-widget-list-container {
   8090  flex-grow: 1;
   8091 }
   8092 .ds-topics-widget .ds-topics-widget-list-container ul {
   8093  margin: var(--space-large) 0 0;
   8094  padding: 0;
   8095  display: flex;
   8096  align-items: center;
   8097  grid-gap: var(--space-small);
   8098  flex-wrap: wrap;
   8099 }
   8100 .ds-topics-widget .ds-topics-widget-list-container ul li {
   8101  display: flex;
   8102 }
   8103 .ds-topics-widget .ds-topics-widget-list-container ul li a {
   8104  font-size: var(--font-size-small);
   8105  text-decoration: none;
   8106  padding: var(--space-small) var(--space-medium);
   8107  background: var(--newtab-background-color-secondary);
   8108  border: 1px solid var(--border-color-deemphasized);
   8109  color: var(--newtab-text-primary-color);
   8110  border-radius: var(--border-radius-medium);
   8111 }
   8112 .ds-topics-widget .ds-topics-widget-list-container ul li a:hover {
   8113  background: var(--newtab-element-hover-color);
   8114 }
   8115 .ds-topics-widget .ds-topics-widget-list-container ul li a:focus {
   8116  outline: 0;
   8117  box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background);
   8118  transition: box-shadow 150ms;
   8119 }
   8120 .ds-topics-widget .ds-topics-widget-list-container ul .ds-topics-widget-list-overflow-item {
   8121  display: flex;
   8122 }
   8123 @media (min-width: 610px) {
   8124  .ds-topics-widget .ds-topics-widget-list-container ul .ds-topics-widget-list-overflow-item {
   8125    display: none;
   8126  }
   8127 }
   8128 @media (min-width: 1122px) {
   8129  .ds-topics-widget .ds-topics-widget-list-container ul .ds-topics-widget-list-overflow-item {
   8130    display: flex;
   8131  }
   8132 }
   8133 .ds-topics-widget .ds-topics-widget-button {
   8134  margin: var(--space-large) 0 0;
   8135  font-size: inherit;
   8136  text-align: center;
   8137  padding: var(--space-small);
   8138  border-radius: var(--border-radius-small);
   8139  background-color: var(--newtab-primary-action-background-pocket);
   8140  border: 0;
   8141 }
   8142 .ds-topics-widget .ds-topics-widget-button:hover {
   8143  background: var(--newtab-primary-element-hover-pocket-color);
   8144 }
   8145 .ds-topics-widget .ds-topics-widget-button:focus {
   8146  outline: 0;
   8147  box-shadow: 0 0 0 3px var(--newtab-primary-action-background-pocket-dimmed), 0 0 0 1px var(--newtab-primary-action-background-pocket);
   8148  transition: box-shadow 150ms;
   8149 }
   8150 
   8151 .feature-highlight {
   8152  position: relative;
   8153  pointer-events: auto;
   8154  z-index: 1;
   8155 }
   8156 .feature-highlight .feature-highlight-modal {
   8157  position: absolute;
   8158  display: flex;
   8159  opacity: 0;
   8160  visibility: hidden;
   8161  cursor: default;
   8162  justify-content: space-between;
   8163  border-radius: var(--border-radius-small);
   8164  background: var(--newtab-background-color-secondary);
   8165  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
   8166  width: 298px;
   8167  transition: opacity 0.3s, visibility 0.3s;
   8168 }
   8169 .feature-highlight .feature-highlight-modal > moz-button {
   8170  margin-inline-start: var(--space-xsmall);
   8171  z-index: 1;
   8172 }
   8173 .feature-highlight .feature-highlight-modal .message-icon {
   8174  margin-block: var(--space-large);
   8175  margin-inline: var(--space-large) var(--space-medium);
   8176 }
   8177 .feature-highlight .feature-highlight-modal.opened {
   8178  opacity: 1;
   8179  visibility: visible;
   8180 }
   8181 .feature-highlight .feature-highlight-modal::after {
   8182  content: "";
   8183  position: absolute;
   8184  height: 24px;
   8185  width: 24px;
   8186  background: var(--newtab-background-color-secondary);
   8187  box-shadow: 4px 4px 6px -2px rgba(0, 0, 0, 0.15);
   8188 }
   8189 .feature-highlight .feature-highlight-modal.inset-block-start {
   8190  inset-block-end: 100%;
   8191  margin-block-end: var(--space-xlarge);
   8192 }
   8193 .feature-highlight .feature-highlight-modal.inset-block-start::after {
   8194  inset-block-end: calc(var(--space-medium) * -1);
   8195  transform: rotate(45deg);
   8196 }
   8197 .feature-highlight .feature-highlight-modal.inset-block-start:dir(rtl)::after {
   8198  transform: rotate(225deg);
   8199 }
   8200 .feature-highlight .feature-highlight-modal.inset-block-end {
   8201  inset-block-start: 100%;
   8202  margin-block-start: var(--space-xlarge);
   8203 }
   8204 .feature-highlight .feature-highlight-modal.inset-block-end::after {
   8205  inset-block-start: calc(var(--space-medium) * -1);
   8206  transform: rotate(225deg);
   8207 }
   8208 .feature-highlight .feature-highlight-modal.inset-inline-start {
   8209  inset-inline-end: calc(var(--space-xxlarge) * -1);
   8210 }
   8211 .feature-highlight .feature-highlight-modal.inset-inline-start::after {
   8212  inset-inline-end: calc(var(--space-xxlarge) - var(--space-medium));
   8213 }
   8214 .feature-highlight .feature-highlight-modal.inset-inline-center {
   8215  transform: translateX(-50%);
   8216  inset-inline-start: 50%;
   8217 }
   8218 .feature-highlight .feature-highlight-modal.inset-inline-center:dir(rtl) {
   8219  transform: translateX(50%);
   8220 }
   8221 .feature-highlight .feature-highlight-modal.inset-inline-end {
   8222  inset-inline-start: calc(var(--space-xxlarge) * -1);
   8223 }
   8224 .feature-highlight .feature-highlight-modal.inset-inline-end::after {
   8225  inset-inline-start: calc(var(--space-xxlarge) - var(--space-medium));
   8226 }
   8227 .feature-highlight .feature-highlight-modal.arrow-inline-start::after {
   8228  content: "";
   8229  position: absolute;
   8230  inset-block-start: 50%;
   8231  inset-inline-end: calc(var(--space-small) * -1);
   8232  transform: translateY(-50%) rotate(225deg);
   8233  height: 16px;
   8234  width: 16px;
   8235  background: var(--newtab-background-color-secondary);
   8236  box-shadow: -4px 4px 6px -2px rgba(0, 0, 0, 0.15);
   8237 }
   8238 .feature-highlight .feature-highlight-modal.arrow-inline-end::after {
   8239  content: "";
   8240  position: absolute;
   8241  inset-block-start: 50%;
   8242  inset-inline-start: calc(var(--space-small) * -1);
   8243  transform: translateY(-50%) rotate(135deg);
   8244  height: 16px;
   8245  width: 16px;
   8246  background: var(--newtab-background-color-secondary);
   8247  box-shadow: 4px 4px 6px -2px rgba(0, 0, 0, 0.15);
   8248 }
   8249 .feature-highlight .feature-highlight-modal.arrow-top-center::after {
   8250  inset-block-start: calc(var(--space-small) * -1);
   8251  inset-inline-start: 50%;
   8252  transform: translateX(-50%) rotate(225deg);
   8253  height: 16px;
   8254  width: 16px;
   8255 }
   8256 .feature-highlight .feature-highlight-modal p {
   8257  font-size: var(--font-size-small);
   8258  font-weight: var(--font-weight);
   8259  margin: var(--space-large) 0;
   8260  flex-grow: 1;
   8261 }
   8262 .feature-highlight .toggle-button {
   8263  border: none;
   8264  padding: 0;
   8265 }
   8266 .feature-highlight .toggle-button.isHidden {
   8267  display: none;
   8268 }
   8269 
   8270 .download-firefox-feature-highlight .icon.icon-dismiss {
   8271  background: transparent url("chrome://global/skin/icons/close.svg");
   8272  background-size: var(--size-item-small);
   8273  height: var(--size-item-small);
   8274  width: var(--size-item-small);
   8275  position: absolute;
   8276  margin: 0;
   8277  inset-block-start: calc(var(--space-medium) + 2px);
   8278  inset-inline-end: calc(var(--space-medium) + 2px);
   8279 }
   8280 @media (prefers-color-scheme: dark) {
   8281  .download-firefox-feature-highlight .icon.icon-dismiss {
   8282    --dark-icon-color: var(--color-gray-70);
   8283    color: var(--dark-icon-color);
   8284  }
   8285 }
   8286 .download-firefox-feature-highlight .icon.icon-dismiss:hover {
   8287  --dark-icon-hover: var(--color-gray-60);
   8288  color: var(--dark-icon-hover);
   8289 }
   8290 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal {
   8291  --arrow-size: 24px;
   8292  padding: var(--space-large);
   8293  width: 271px;
   8294 }
   8295 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal .content-wrapper {
   8296  margin-block: 0;
   8297 }
   8298 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal .content-wrapper img {
   8299  display: block;
   8300  margin: 0 auto var(--space-large);
   8301 }
   8302 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal .message-icon {
   8303  display: none;
   8304 }
   8305 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal.inset-block-end {
   8306  margin-block-start: var(--space-xxlarge);
   8307 }
   8308 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal.inset-inline-end {
   8309  inset-inline-start: calc(var(--arrow-size) * -2);
   8310 }
   8311 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal.inset-inline-end::after {
   8312  inset-inline-start: calc(var(--space-xxlarge) - 14px);
   8313 }
   8314 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal.inset-inline-start {
   8315  inset-inline-end: calc(var(--arrow-size) / 2 * -1 - 6px);
   8316 }
   8317 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal.inset-inline-start::after {
   8318  inset-inline-end: calc(var(--space-xxlarge) - 12px);
   8319 }
   8320 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal::after {
   8321  height: var(--arrow-size);
   8322  width: var(--arrow-size);
   8323  box-shadow: 4px -4px 6px -2px rgba(0, 0, 0, 0.15);
   8324  transform: rotate(-45deg);
   8325  pointer-events: none;
   8326 }
   8327 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal p {
   8328  margin: 0;
   8329  padding: 0;
   8330 }
   8331 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal .title {
   8332  font-weight: var(--heading-font-weight);
   8333  margin-block: var(--space-small);
   8334 }
   8335 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal .subtitle {
   8336  margin-block: 0;
   8337 }
   8338 
   8339 .follow-section-button-highlight .feature-highlight-modal {
   8340  padding: var(--space-large);
   8341  width: auto;
   8342 }
   8343 .follow-section-button-highlight .feature-highlight-modal p {
   8344  margin: 0;
   8345 }
   8346 .follow-section-button-highlight .feature-highlight-modal .message-icon {
   8347  display: none;
   8348 }
   8349 .follow-section-button-highlight .feature-highlight-modal .icon-dismiss {
   8350  margin-block-start: 0;
   8351  margin-inline-end: 0;
   8352 }
   8353 .follow-section-button-highlight .feature-highlight-modal > moz-button {
   8354  position: absolute;
   8355  inset-inline-end: var(--space-large);
   8356  inset-block-start: var(--space-large);
   8357 }
   8358 @media (prefers-color-scheme: dark) {
   8359  .follow-section-button-highlight.is-inverted-dark-dismiss-button .feature-highlight-modal > moz-button {
   8360    --button-icon-fill: var(--color-gray-70);
   8361  }
   8362 }
   8363 .follow-section-button-highlight .feature-highlight-modal.arrow-inline-start {
   8364  inset-block-start: calc(100% + var(--space-large));
   8365  inset-inline-start: 50%;
   8366  transform: translateX(-50%);
   8367 }
   8368 .follow-section-button-highlight .feature-highlight-modal.arrow-inline-start::after {
   8369  inset-block-start: calc(var(--space-small) * -1);
   8370  inset-inline-end: 50%;
   8371  transform: translateX(50%) rotate(135deg);
   8372 }
   8373 @media (min-width: 724px) {
   8374  .follow-section-button-highlight .feature-highlight-modal.arrow-inline-start {
   8375    min-width: auto;
   8376    inset-inline-start: auto;
   8377    inset-inline-end: calc(100% + var(--space-large));
   8378    inset-block-start: 50%;
   8379    transform: translateY(-50%);
   8380  }
   8381  .follow-section-button-highlight .feature-highlight-modal.arrow-inline-start::after {
   8382    inset-block-start: 50%;
   8383    inset-inline-end: calc(var(--space-small) * -1);
   8384    transform: translateY(-50%) rotate(225deg);
   8385  }
   8386 }
   8387 .follow-section-button-highlight .inset-block-center {
   8388  position: absolute;
   8389  height: 100%;
   8390  width: 100%;
   8391 }
   8392 .follow-section-button-highlight .follow-section-button-highlight-content {
   8393  display: flex;
   8394  flex-direction: column;
   8395  gap: var(--space-medium);
   8396 }
   8397 .follow-section-button-highlight .follow-section-button-highlight-copy {
   8398  font-size: var(--font-size-small);
   8399 }
   8400 .follow-section-button-highlight .follow-section-button-highlight-copy .title {
   8401  font-weight: var(--heading-font-weight);
   8402  margin-block-end: var(--space-xsmall);
   8403 }
   8404 
   8405 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal {
   8406  --arrow-size: 24px;
   8407  width: auto;
   8408  padding: var(--space-large);
   8409 }
   8410 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal .content-wrapper {
   8411  margin-block: 0;
   8412 }
   8413 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal .message-icon {
   8414  display: none;
   8415 }
   8416 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal.inset-inline-end {
   8417  inset-inline-start: 0;
   8418 }
   8419 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal.inset-inline-end::after {
   8420  inset-inline-start: 0;
   8421 }
   8422 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal.inset-inline-start {
   8423  inset-inline-end: calc(var(--space-xxlarge) * 2);
   8424 }
   8425 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal.inset-inline-start::after {
   8426  inset-inline-end: calc(var(--arrow-size) / 2 * -1);
   8427 }
   8428 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal.inset-block-end {
   8429  margin-block-start: 0;
   8430 }
   8431 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal.inset-block-end::after {
   8432  inset-block-start: 0;
   8433 }
   8434 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal.inset-block-start {
   8435  inset-block-end: 0;
   8436  margin-block-end: calc(-4 * var(--space-xsmall));
   8437 }
   8438 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal.inset-block-start::after {
   8439  inset-block-end: calc(var(--arrow-size) - var(--space-xxsmall));
   8440 }
   8441 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal .title {
   8442  font-weight: var(--heading-font-weight);
   8443  margin-block: var(--space-medium);
   8444 }
   8445 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal .subtitle {
   8446  margin-block: 0 var(--space-medium);
   8447 }
   8448 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal .button-wrapper {
   8449  display: block;
   8450  text-align: end;
   8451 }
   8452 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal::after {
   8453  height: var(--arrow-size);
   8454  width: var(--arrow-size);
   8455  box-shadow: 4px -4px 6px -2px rgba(0, 0, 0, 0.15);
   8456  pointer-events: none;
   8457 }
   8458 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal > moz-button {
   8459  position: absolute;
   8460  inset-inline-end: var(--space-large);
   8461  inset-block-start: var(--space-large);
   8462 }
   8463 @media (prefers-color-scheme: dark) {
   8464  .wallpaper-feature-highlight.is-inverted-dark-dismiss-button .feature-highlight-modal > moz-button {
   8465    --button-icon-fill: var(--color-gray-70);
   8466  }
   8467 }
   8468 
   8469 .shortcut-feature-highlight .feature-highlight-modal {
   8470  padding: var(--space-large);
   8471  width: auto;
   8472 }
   8473 .shortcut-feature-highlight .feature-highlight-modal p {
   8474  margin: 0;
   8475  padding-block-start: 0;
   8476 }
   8477 .shortcut-feature-highlight .feature-highlight-modal p, .shortcut-feature-highlight .feature-highlight-modal p:hover {
   8478  color: inherit;
   8479 }
   8480 .shortcut-feature-highlight .feature-highlight-modal .message-icon {
   8481  display: none;
   8482 }
   8483 .shortcut-feature-highlight .feature-highlight-modal.inset-block-end {
   8484  margin-block-start: var(--space-large);
   8485  inset-inline-end: var(--space-xlarge);
   8486 }
   8487 .shortcut-feature-highlight .feature-highlight-modal > moz-button {
   8488  position: absolute;
   8489  inset-inline-end: var(--space-large);
   8490  inset-block-start: var(--space-large);
   8491 }
   8492 @media (prefers-color-scheme: dark) {
   8493  .shortcut-feature-highlight.is-inverted-dark-dismiss-button .feature-highlight-modal > moz-button {
   8494    --button-icon-fill: var(--color-gray-70);
   8495  }
   8496 }
   8497 .shortcut-feature-highlight .shortcut-feature-highlight-content {
   8498  display: flex;
   8499  flex-direction: column;
   8500  gap: var(--space-medium);
   8501 }
   8502 .shortcut-feature-highlight .shortcut-feature-highlight-copy {
   8503  font-size: var(--font-size-small);
   8504 }
   8505 .shortcut-feature-highlight .shortcut-feature-highlight-copy .title {
   8506  font-weight: var(--heading-font-weight);
   8507  margin-block-end: var(--space-xsmall);
   8508  text-align: inherit;
   8509 }
   8510 
   8511 /* stylelint-disable max-nesting-depth */
   8512 .modalOverlayOuter.active:has(.topic-selection-container) {
   8513  background-color: rgba(21, 20, 26, 0.5);
   8514 }
   8515 
   8516 .topic-selection-container {
   8517  --transition: 0.6s opacity, 0.6s scale, 0.6s rotate, 0.6s translate;
   8518  position: relative;
   8519  border-radius: var(--border-radius-medium);
   8520  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
   8521  padding: var(--space-xxlarge);
   8522  max-width: 745px;
   8523  height: auto;
   8524 }
   8525 .topic-selection-container .dismiss-button {
   8526  position: absolute;
   8527  appearance: none;
   8528  border: none;
   8529  z-index: 2;
   8530  inset-block-start: 0;
   8531  inset-inline: auto 0;
   8532  border-radius: var(--border-radius-small);
   8533  padding: 0;
   8534  margin: var(--space-small);
   8535  display: block;
   8536  float: inline-end;
   8537  background: url("chrome://global/skin/icons/close.svg") no-repeat center/16px;
   8538  height: var(--size-item-large);
   8539  width: var(--size-item-large);
   8540  align-self: end;
   8541  min-height: var(--size-item-large);
   8542  min-width: var(--size-item-large);
   8543  -moz-context-properties: fill;
   8544  fill: currentColor;
   8545  transition: var(--transition);
   8546 }
   8547 .topic-selection-container .dismiss-button:hover {
   8548  background-color: var(--button-background-color-hover);
   8549 }
   8550 .topic-selection-container .dismiss-button:hover:active {
   8551  background-color: var(--button-background-color-active);
   8552 }
   8553 .topic-selection-container .title {
   8554  text-align: center;
   8555  font-size: var(--font-size-xlarge);
   8556  font-weight: var(--heading-font-weight);
   8557  margin-block-end: var(--space-small);
   8558 }
   8559 .topic-selection-container .subtitle {
   8560  text-align: center;
   8561  margin-block: 0 var(--space-xlarge);
   8562 }
   8563 .topic-selection-container .modal-footer {
   8564  display: flex;
   8565  justify-content: space-between;
   8566  align-items: center;
   8567 }
   8568 .topic-selection-container .modal-footer > a {
   8569  color: var(--link-color);
   8570 }
   8571 .topic-selection-container .modal-footer > a:hover {
   8572  color: var(--link-color-hover);
   8573 }
   8574 .topic-selection-container .modal-footer > a:hover:active {
   8575  color: var(--link-color-active);
   8576 }
   8577 .topic-selection-container .modal-footer > a:visited {
   8578  color: var(--link-color-visited);
   8579 }
   8580 .topic-selection-container .modal-footer .button-group {
   8581  gap: var(--space-medium);
   8582  display: flex;
   8583 }
   8584 
   8585 .topic-list {
   8586  list-style: none;
   8587  display: flex;
   8588  flex-wrap: wrap;
   8589  gap: var(--space-large);
   8590  margin: var(--space-xxlarge) auto;
   8591  justify-content: center;
   8592  width: fit-content;
   8593 }
   8594 .topic-list .topic-item {
   8595  align-items: center;
   8596  border-radius: var(--border-radius-circle);
   8597  border: var(--border-width) solid var(--border-color-interactive);
   8598  display: flex;
   8599  justify-self: center;
   8600  max-width: fit-content;
   8601  padding-block: var(--space-xsmall);
   8602  padding-inline: var(--space-xsmall) var(--space-large);
   8603  position: relative;
   8604 }
   8605 .topic-list .topic-item:hover {
   8606  cursor: pointer;
   8607  background-color: var(--button-background-color-hover);
   8608 }
   8609 .topic-list .topic-item:active {
   8610  background-color: var(--button-background-color-active);
   8611 }
   8612 .topic-list .topic-item:has(input:checked) {
   8613  /**
   8614   * @backward-compat { version 147 }
   8615   *
   8616   * Replace this with `--border-color-selected` once 147 hits release.
   8617   */
   8618  border-color: var(--color-accent-primary);
   8619 }
   8620 .topic-list .topic-item:focus-within {
   8621  outline-offset: 2px;
   8622  /**
   8623   * @backward-compat { version 147 }
   8624   *
   8625   * Replace this with `--border-color-selected` once 147 hits release.
   8626   */
   8627  outline: 2px solid var(--color-accent-primary);
   8628 }
   8629 .topic-list .topic-item .topic-item-label {
   8630  margin-inline-end: var(--space-small);
   8631 }
   8632 .topic-list .topic-item .topic-custom-checkbox {
   8633  display: flex;
   8634  justify-content: center;
   8635  align-items: center;
   8636  width: 42px;
   8637  height: 42px;
   8638  border-radius: var(--border-radius-circle);
   8639  background-color: var(--newtab-button-static-background);
   8640  margin-inline-end: var(--space-large);
   8641 }
   8642 .topic-list .topic-item .topic-custom-checkbox .topic-icon {
   8643  font-size: var(--font-size-xlarge);
   8644 }
   8645 .topic-list .topic-item .topic-custom-checkbox .topic-checked {
   8646  display: none;
   8647 }
   8648 .topic-list .topic-item input[type=checkbox] {
   8649  height: 100%;
   8650  opacity: 0;
   8651  position: absolute;
   8652  width: 90%;
   8653 }
   8654 .topic-list .topic-item input[type=checkbox]:checked ~ .topic-custom-checkbox {
   8655  background-color: var(--color-accent-primary);
   8656  position: relative;
   8657 }
   8658 .topic-list .topic-item input[type=checkbox]:checked ~ .topic-custom-checkbox .topic-icon {
   8659  display: none;
   8660 }
   8661 .topic-list .topic-item input[type=checkbox]:checked ~ .topic-custom-checkbox .topic-checked {
   8662  color: var(--color-white);
   8663  -moz-context-properties: fill;
   8664  display: block;
   8665  fill: currentColor;
   8666  background: url("chrome://global/skin/icons/check.svg");
   8667  background-size: cover;
   8668  width: 26px;
   8669  height: 26px;
   8670 }
   8671 
   8672 .ad-banner-wrapper {
   8673  --banner-padding: var(--space-large);
   8674  --billboard-width: 970px;
   8675  --billboard-container-width: calc( var(--billboard-width) + ( var(--banner-padding) * 2 ));
   8676  --billboard-height: 250px;
   8677  --leaderboard-width: 728px;
   8678  --leaderboard-container-width: calc(var(--leaderboard-width) + ( var(--banner-padding) * 2 ));
   8679  --leaderboard-height: 90px;
   8680  position: relative;
   8681  display: flex;
   8682  justify-content: space-around;
   8683  grid-column: 1/-1;
   8684  width: 100%;
   8685  inset-inline-start: 50%;
   8686  transform: translate3d(-50%, 0, 0);
   8687  margin-block-start: var(--space-medium);
   8688  margin-block-end: var(--space-xlarge);
   8689 }
   8690 @media (min-width: 1390px) {
   8691  .ad-banner-wrapper.promo-card {
   8692    justify-content: space-between;
   8693  }
   8694 }
   8695 .ad-banner-wrapper:has(.ad-banner-inner.billboard) {
   8696  min-width: var(--billboard-container-width);
   8697 }
   8698 @media (width <= 1015px) {
   8699  .ad-banner-wrapper:has(.ad-banner-inner.billboard) {
   8700    min-width: auto;
   8701  }
   8702 }
   8703 .ad-banner-wrapper:has(.ad-banner-inner.leaderboard) {
   8704  min-width: var(--leaderboard-container-width);
   8705 }
   8706 @media (width <= 758px) {
   8707  .ad-banner-wrapper:has(.ad-banner-inner.leaderboard) {
   8708    min-width: auto;
   8709  }
   8710 }
   8711 .ad-banner-wrapper .ad-banner-inner {
   8712  background: var(--newtab-background-card);
   8713  transition: opacity 0.2s ease;
   8714  position: relative;
   8715  box-shadow: var(--box-shadow-card);
   8716  border-radius: var(--border-radius-large);
   8717 }
   8718 .ad-banner-wrapper .ad-banner-inner:hover {
   8719  background: var(--newtab-background-color-secondary);
   8720 }
   8721 .ad-banner-wrapper .ad-banner-inner:hover {
   8722  box-shadow: var(--box-shadow-card-hover);
   8723 }
   8724 .ad-banner-wrapper .ad-banner-inner .ad-banner-link {
   8725  text-decoration: none;
   8726  padding-block-start: var(--banner-padding);
   8727  padding-inline: var(--banner-padding);
   8728  display: inline-block;
   8729 }
   8730 .ad-banner-wrapper .ad-banner-inner .ad-banner-link:focus {
   8731  outline: var(--focus-outline);
   8732  border-radius: var(--border-radius-large);
   8733 }
   8734 .ad-banner-wrapper .ad-banner-inner .ad-banner-link:hover + .ad-banner-hover-background, .ad-banner-wrapper .ad-banner-inner .ad-banner-link:focus + .ad-banner-hover-background {
   8735  opacity: 1;
   8736 }
   8737 .ad-banner-wrapper .ad-banner-inner .ad-banner-hover-background {
   8738  opacity: 0;
   8739  position: absolute;
   8740  inset-block-start: 0;
   8741  pointer-events: none;
   8742  height: 100%;
   8743 }
   8744 .ad-banner-wrapper .ad-banner-inner .ad-banner-hover-background:hover, .ad-banner-wrapper .ad-banner-inner .ad-banner-hover-background:focus-within {
   8745  opacity: 1;
   8746 }
   8747 .ad-banner-wrapper .ad-banner-inner .ad-banner-hover-background .ads-context-menu-wrapper {
   8748  pointer-events: auto;
   8749 }
   8750 .ad-banner-wrapper .ad-banner-inner.leaderboard {
   8751  max-width: var(--leaderboard-container-width);
   8752 }
   8753 .ad-banner-wrapper .ad-banner-inner.leaderboard .ad-banner-content {
   8754  height: var(--leaderboard-height);
   8755  width: var(--leaderboard-width);
   8756 }
   8757 .ad-banner-wrapper .ad-banner-inner.leaderboard .ad-banner-hover-background {
   8758  width: var(--leaderboard-container-width);
   8759 }
   8760 .ad-banner-wrapper .ad-banner-inner.leaderboard .ad-banner-sponsored {
   8761  width: var(--leaderboard-width);
   8762 }
   8763 @media (width <= 758px) {
   8764  .ad-banner-wrapper .ad-banner-inner.leaderboard {
   8765    display: none;
   8766  }
   8767 }
   8768 .ad-banner-wrapper .ad-banner-inner.billboard {
   8769  width: var(--billboard-container-width);
   8770 }
   8771 .ad-banner-wrapper .ad-banner-inner.billboard .ad-banner-content {
   8772  height: var(--billboard-height);
   8773  width: var(--billboard-width);
   8774 }
   8775 .ad-banner-wrapper .ad-banner-inner.billboard .ad-banner-hover-background {
   8776  width: var(--billboard-container-width);
   8777 }
   8778 .ad-banner-wrapper .ad-banner-inner.billboard .ad-banner-sponsored {
   8779  width: var(--billboard-width);
   8780 }
   8781 @media (width <= 1015px) {
   8782  .ad-banner-wrapper .ad-banner-inner.billboard {
   8783    display: none;
   8784  }
   8785 }
   8786 .ad-banner-wrapper .ad-banner-inner .ad-banner-sponsored {
   8787  height: 32px;
   8788  display: flex;
   8789  align-items: center;
   8790 }
   8791 .ad-banner-wrapper .ad-banner-inner .ad-banner-sponsored span {
   8792  font-size: var(--font-size-small);
   8793  color: var(--newtab-contextual-text-secondary-color);
   8794 }
   8795 .ad-banner-wrapper.active {
   8796  z-index: 1;
   8797 }
   8798 .ad-banner-wrapper.active .ad-banner-hover-background {
   8799  opacity: 1;
   8800 }
   8801 
   8802 .ads-context-menu-wrapper {
   8803  text-align: end;
   8804 }
   8805 
   8806 .ads-context-menu {
   8807  z-index: 10;
   8808  position: absolute;
   8809  inset-inline-end: var(--space-large);
   8810  inset-block-end: 0;
   8811 }
   8812 .ads-context-menu .context-menu {
   8813  /* Position the menu just under and to the right of the context menu button */
   8814  inset-inline-end: 100%;
   8815  inset-inline-start: auto;
   8816  margin-inline-end: calc(-0.98 * var(--size-item-large));
   8817  inset-block-start: calc(2.25 * var(--size-item-small));
   8818 }
   8819 .ads-context-menu > moz-button::part(button) {
   8820  background-color: transparent;
   8821 }
   8822 .ads-context-menu > moz-button::part(button):hover {
   8823  background-color: var(--button-background-color-hover);
   8824 }
   8825 .ads-context-menu > moz-button::part(button):active {
   8826  background-color: var(--button-background-color-active);
   8827 }
   8828 
   8829 .context-menu-open > moz-button::part(button) {
   8830  background-color: var(--button-background-color);
   8831 }
   8832 
   8833 .promo-card-wrapper {
   8834  background: var(--newtab-background-card);
   8835  transition: opacity 0.2s ease;
   8836  display: none;
   8837  box-shadow: var(--box-shadow-card);
   8838  border-radius: var(--border-radius-large);
   8839  height: 298px;
   8840  width: 228px;
   8841  position: relative;
   8842  padding: var(--space-large);
   8843 }
   8844 .promo-card-wrapper:hover {
   8845  background: var(--newtab-background-color-secondary);
   8846 }
   8847 .promo-card-wrapper .promo-card-title {
   8848  display: block;
   8849  font-size: var(--font-size-medium);
   8850  font-weight: var(--heading-font-weight);
   8851  margin-block: var(--space-medium);
   8852 }
   8853 .promo-card-wrapper .promo-card-title::before {
   8854  content: "";
   8855  display: inline-block;
   8856  width: var(--icon-size);
   8857  height: var(--icon-size);
   8858  background-image: url("chrome://branding/content/icon32.png");
   8859  background-size: contain;
   8860  background-repeat: no-repeat;
   8861  margin-inline-end: var(--space-small);
   8862  vertical-align: middle;
   8863 }
   8864 .promo-card-wrapper .promo-card-body {
   8865  display: block;
   8866  margin-block: 0 var(--space-medium);
   8867 }
   8868 .promo-card-wrapper .promo-card-dismiss-button {
   8869  position: absolute;
   8870  inset-block-start: var(--space-small);
   8871  inset-inline-end: var(--space-small);
   8872  margin: 0;
   8873 }
   8874 .promo-card-wrapper .promo-card-cta-wrapper {
   8875  display: flex;
   8876  width: 100%;
   8877  justify-content: end;
   8878 }
   8879 .promo-card-wrapper .img-wrapper {
   8880  height: 132px;
   8881  width: 196px;
   8882 }
   8883 
   8884 @media (min-width: 1698px) {
   8885  .ds-card-grid .promo-card-wrapper {
   8886    display: block;
   8887  }
   8888 }
   8889 
   8890 @media (min-width: 1390px) {
   8891  .ds-section-wrapper .promo-card-wrapper {
   8892    display: block;
   8893  }
   8894 }
   8895 
   8896 .section-context-menu {
   8897  position: relative;
   8898 }
   8899 .section-context-menu .context-menu {
   8900  /* Fix the context menu width */
   8901  width: calc(4 * var(--size-item-large));
   8902  /* Position the context menu on top of the card grid, below the menu button. */
   8903  inset-block-start: calc(2.5 * var(--size-item-small));
   8904  inset-inline-start: calc(-6.25 * var(--size-item-small));
   8905 }
   8906 
   8907 .inline-selection-wrapper.ds-section .section-heading {
   8908  margin-block: var(--space-medium);
   8909 }
   8910 .inline-selection-wrapper.ds-section .section-subtitle {
   8911  color: var(--newtab-contextual-text-primary-color);
   8912 }
   8913 .inline-selection-wrapper.ds-section .learn-more-copy {
   8914  margin-block-end: 0;
   8915 }
   8916 .lightWallpaper .inline-selection-wrapper.ds-section .learn-more-copy {
   8917  color-scheme: light;
   8918 }
   8919 .darkWallpaper .inline-selection-wrapper.ds-section .learn-more-copy {
   8920  color-scheme: dark;
   8921 }
   8922 .inline-selection-wrapper.ds-section .learn-more-copy a:focus-visible {
   8923  outline: var(--focus-outline);
   8924  outline-offset: var(--focus-outline-offset);
   8925 }
   8926 .inline-selection-wrapper.ds-section .topic-list {
   8927  list-style: none;
   8928  display: flex;
   8929  flex-wrap: wrap;
   8930  row-gap: calc(1.25 * var(--space-small));
   8931  column-gap: var(--space-small);
   8932  justify-content: flex-start;
   8933  margin: var(--space-small) 0;
   8934  padding-inline-start: 0;
   8935  width: fit-content;
   8936 }
   8937 .inline-selection-wrapper.ds-section .topic-list li {
   8938  align-items: center;
   8939  display: flex;
   8940  justify-self: flex-start;
   8941  max-width: fit-content;
   8942  position: relative;
   8943 }
   8944 .inline-selection-wrapper.ds-section .topic-list li > label {
   8945  background-color: var(--newtab-background-card);
   8946  border: var(--border-width) solid var(--border-color-interactive);
   8947  border-radius: var(--border-radius-circle);
   8948  color: var(--newtab-text-primary-color);
   8949  padding: var(--space-small) calc(1.25 * var(--space-small)) var(--space-small) var(--space-xsmall);
   8950 }
   8951 .inline-selection-wrapper.ds-section .topic-list li > label input[type=checkbox] {
   8952  outline: none;
   8953  appearance: none;
   8954 }
   8955 .inline-selection-wrapper.ds-section .topic-list li > label .topic-item-icon {
   8956  -moz-context-properties: fill;
   8957  color: var(--newtab-text-primary-color);
   8958  fill: currentColor;
   8959  margin-inline-start: var(--space-small);
   8960  margin-block-start: calc(-0.75 * var(--space-xsmall));
   8961 }
   8962 .inline-selection-wrapper.ds-section .topic-list li > label:hover {
   8963  background-color: var(--newtab-button-static-hover-background);
   8964  cursor: pointer;
   8965 }
   8966 .inline-selection-wrapper.ds-section .topic-list li > label:hover:active {
   8967  background-color: var(--newtab-button-static-active-background);
   8968 }
   8969 .inline-selection-wrapper.ds-section .topic-list li > label:has(input:checked) {
   8970  background-color: var(--color-accent-primary);
   8971  /**
   8972   * @backward-compat { version 147 }
   8973   *
   8974   * Replace this with `--border-color-selected` once 147 hits release.
   8975   */
   8976  border-color: var(--color-accent-primary);
   8977  color: var(--button-text-color-primary);
   8978 }
   8979 .inline-selection-wrapper.ds-section .topic-list li > label:has(input:checked) .topic-item-icon {
   8980  color: var(--button-text-color-primary);
   8981 }
   8982 .inline-selection-wrapper.ds-section .topic-list li > label:has(input:focus-visible) {
   8983  outline-offset: var(--focus-outline-offset);
   8984  outline: var(--focus-outline);
   8985 }
   8986 
   8987 .report-content-form {
   8988  width: 500px;
   8989  height: 270px;
   8990  box-shadow: var(--box-shadow-level-4);
   8991  border-radius: var(--border-radius-medium);
   8992  border: 1px solid var(--border-color);
   8993  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
   8994  background-color: var(--newtab-background-color-secondary);
   8995 }
   8996 .report-content-form form {
   8997  height: 100%;
   8998  display: flex;
   8999  flex-direction: column;
   9000 }
   9001 .report-content-form form moz-radio-group {
   9002  height: 100%;
   9003 }
   9004 .report-content-form::backdrop {
   9005  background: rgba(0, 0, 0, 0.25);
   9006 }
   9007 
   9008 .personalized-card-wrapper {
   9009  background-color: var(--background-color-canvas);
   9010  border: 2px solid var(--border-color-card);
   9011  color: var(--text-color);
   9012  padding: var(--space-xxlarge);
   9013  border-radius: var(--border-radius-large);
   9014  margin: var(--space-xlarge) 0;
   9015  position: relative;
   9016 }
   9017 .personalized-card-wrapper .personalized-card-dismiss {
   9018  position: absolute;
   9019  inset-inline-end: var(--space-medium);
   9020  inset-block-start: var(--space-medium);
   9021 }
   9022 .personalized-card-wrapper .personalized-card-inner {
   9023  display: grid;
   9024  grid-template-columns: 0.5fr 1fr 1fr 1fr;
   9025  align-items: start;
   9026 }
   9027 .personalized-card-wrapper .personalized-card-inner .personalized-card-cta-wrapper {
   9028  display: flex;
   9029  flex-direction: column;
   9030  gap: var(--space-medium);
   9031 }
   9032 .personalized-card-wrapper .personalized-card-inner img {
   9033  max-width: 200px;
   9034  max-height: 200px;
   9035  object-fit: contain;
   9036  justify-self: center;
   9037  align-self: start;
   9038 }
   9039 .personalized-card-wrapper .personalized-card-inner h2, .personalized-card-wrapper .personalized-card-inner p {
   9040  margin-block-start: 0;
   9041 }
   9042 .personalized-card-wrapper .personalized-card-inner h2 {
   9043  font-size: var(--font-size-xxlarge);
   9044  font-weight: var(--heading-font-weight);
   9045 }
   9046 .personalized-card-wrapper .personalized-card-inner .personalized-card-link {
   9047  color: var(--link-color);
   9048  font-size: var(--font-size-small);
   9049 }
   9050 @media (max-width: 724px) {
   9051  .personalized-card-wrapper .personalized-card-inner {
   9052    grid-template-columns: 1fr;
   9053    gap: var(--space-large);
   9054  }
   9055  .personalized-card-wrapper .personalized-card-inner img {
   9056    width: 100px;
   9057    justify-self: initial;
   9058  }
   9059  .personalized-card-wrapper .personalized-card-inner h2 {
   9060    margin-block-end: var(--space-xsmall);
   9061  }
   9062 }
   9063 @media (min-width: 724px) {
   9064  .personalized-card-wrapper .personalized-card-inner {
   9065    grid-template-columns: 0.2fr 1fr 1.2fr;
   9066    gap: var(--space-large);
   9067  }
   9068  .personalized-card-wrapper .personalized-card-inner img {
   9069    width: 130px;
   9070    align-self: end;
   9071    grid-row: 1/span 2;
   9072  }
   9073  .personalized-card-wrapper .personalized-card-inner .personalized-card-cta-wrapper {
   9074    align-items: center;
   9075    display: grid;
   9076    grid-template-columns: subgrid;
   9077    grid-row: 2;
   9078    grid-column: 2/span 2;
   9079    padding-block-end: var(--space-xxlarge);
   9080  }
   9081  .personalized-card-wrapper .personalized-card-inner p {
   9082    width: 210px;
   9083    margin: 0;
   9084  }
   9085  .personalized-card-wrapper .personalized-card-inner h2 {
   9086    margin: 0;
   9087  }
   9088 }
   9089 @media (min-width: 1122px) {
   9090  .personalized-card-wrapper .personalized-card-inner {
   9091    grid-template-columns: 0.2fr 1.2fr 0.8fr 1fr;
   9092    gap: var(--space-large);
   9093  }
   9094  .personalized-card-wrapper .personalized-card-inner img {
   9095    width: 100px;
   9096    align-self: end;
   9097  }
   9098  .personalized-card-wrapper .personalized-card-inner h2 {
   9099    grid-column: 2;
   9100    grid-row: 1;
   9101    width: initial;
   9102  }
   9103  .personalized-card-wrapper .personalized-card-inner p {
   9104    grid-column: 3;
   9105    grid-row: 1;
   9106    width: 400px;
   9107  }
   9108  .personalized-card-wrapper .personalized-card-inner .personalized-card-cta-wrapper {
   9109    grid-column: 4;
   9110    grid-row: 1;
   9111    display: flex;
   9112    flex-direction: column;
   9113    justify-self: end;
   9114    gap: var(--space-medium);
   9115    width: max-content;
   9116    margin-inline-end: var(--space-medium);
   9117  }
   9118  .personalized-card-wrapper .personalized-card-inner .personalized-card-cta {
   9119    align-self: baseline;
   9120  }
   9121 }
   9122 @media (min-width: 1122px) and (max-width: 1390px) {
   9123  .personalized-card-wrapper .personalized-card-inner {
   9124    grid-template-columns: 0.2fr 1fr 1fr 1fr;
   9125  }
   9126  .personalized-card-wrapper .personalized-card-inner h2 {
   9127    max-width: 200px;
   9128  }
   9129  .personalized-card-wrapper .personalized-card-inner p {
   9130    width: 300px;
   9131  }
   9132 }
   9133 @media (min-width: 724px) {
   9134  .personalized-card-wrapper {
   9135    padding-block-end: 0;
   9136  }
   9137 }