@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400;500;700&display=swap");
@import url("./tokens.css");
@import url('../../styles/base.css');
@import url('../../styles/blocks/header.css');
@import url('../../styles/blocks/footer.css');

@layer base, layout, components, utilities;

@layer base {

  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
    color-scheme: light;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  body {
    font-family: var(--ff-primary);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: 1.6;
    color: var(--clr-text-primary);
    background-color: var(--clr-bg-primary);
    min-block-size: 100dvh;
    overflow-x: hidden;
  }

  body.is-menu-open {
    overflow: hidden;
  }

  img {
    max-inline-size: 100%;
    block-size: auto;
    display: block;
  }

  a {
    color: var(--clr-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  a:where(:hover, :focus-visible) {
    color: var(--clr-text-primary);
  }

  button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: none;
    background: none;
  }

  input,
  textarea,
  select {
    font-family: inherit;
    font-size: inherit;
  }

  ul,
  ol {
    list-style: none;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: var(--fw-bold);
    line-height: 1.2;
    color: var(--clr-text-primary);
  }

  h1 {
    font-size: var(--fs-3xl);
  }

  h2 {
    font-size: var(--fs-2xl);
  }

  h3 {
    font-size: var(--fs-xl);
  }

  h4 {
    font-size: var(--fs-lg);
  }

  p {
    color: var(--clr-text-secondary);
  }

  :focus-visible {
    outline: 2px solid var(--clr-accent);
    outline-offset: 2px;
  }

  ::selection {
    background-color: var(--clr-accent);
    color: var(--clr-bg-primary);
  }

  main {
    display: block;
  }
}

@layer layout {
  .l-wrapper {
    inline-size: min(100% - var(--space-lg) * 2, var(--container-max));
    margin-inline: auto;
  }

  .l-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .l-stack[data-gap="sm"] {
    gap: var(--space-sm);
  }

  .l-stack[data-gap="lg"] {
    gap: var(--space-lg);
  }

  .l-stack[data-gap="xl"] {
    gap: var(--space-xl);
  }

  .l-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
  }

  .l-grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  }

  .l-grid[data-cols="2"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
  }

  .l-grid[data-cols="3"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  }

  .l-grid[data-cols="4"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  }

  .l-split {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  @media (min-width: 768px) {
    .l-split {
      flex-direction: row;
      align-items: flex-start;
    }

    .l-split>* {
      flex: 1;
    }
  }

  .l-section {
    padding-block: var(--space-2xl);
  }

  .l-section[data-bg="alt"] {
    background-color: var(--clr-bg-secondary);
  }

  .l-section[data-bg="tertiary"] {
    background-color: var(--clr-bg-tertiary);
  }
}

@layer components {
  .c-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: var(--header-height);
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-block-end: 1px solid var(--clr-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    z-index: 1100;
  }

  .c-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    block-size: 100%;
    position: relative;
  }

  .c-logo {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--clr-text-primary);
    z-index: 1101;
    position: relative;
  }

  .c-logo__icon {
    inline-size: 40px;
    block-size: 40px;
    background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-dim));
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    font-size: var(--fs-lg);
  }

  .c-nav {
    display: none;
  }

  @media (min-width: 1024px) {
    .c-nav {
      display: flex;
      gap: var(--space-md);
    }
  }

  .c-nav__link {
    color: var(--clr-text-secondary);
    font-size: var(--fs-sm);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
  }

  .c-nav__link:where(:hover, :focus-visible) {
    color: var(--clr-text-primary);
    background-color: var(--clr-bg-tertiary);
  }

  .c-nav__link.is-active {
    color: var(--clr-accent);
  }

  .c-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    inline-size: 48px;
    block-size: 48px;
    padding: var(--space-xs);
    z-index: 1101;
    position: relative;
    background-color: transparent;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
    cursor: pointer;
  }

  .c-menu-btn:hover,
  .c-menu-btn:focus-visible {
    background-color: var(--clr-bg-tertiary);
  }

  @media (min-width: 1024px) {
    .c-menu-btn {
      display: none;
    }
  }

  .c-menu-btn__line {
    inline-size: 24px;
    block-size: 2px;
    background-color: var(--clr-text-primary);
    transition: all var(--transition-fast);
    transform-origin: center;
    flex-shrink: 0;
  }

  .c-menu-btn.is-open .c-menu-btn__line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .c-menu-btn.is-open .c-menu-btn__line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .c-menu-btn.is-open .c-menu-btn__line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .c-offcanvas {
    position: fixed;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.98);
    transform: translateX(100%);
    transition: transform var(--transition-base), visibility var(--transition-base);
    z-index: 1050;
    padding-block-start: calc(var(--header-height) + var(--space-xl));
    padding-inline: var(--space-lg);
    visibility: hidden;
    overflow-y: auto;
  }

  .c-offcanvas.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .c-offcanvas__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .c-offcanvas__link {
    display: block;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--fs-md);
    color: var(--clr-text-secondary);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    border: 1px solid transparent;
  }

  .c-offcanvas__link:where(:hover, :focus-visible) {
    color: var(--clr-text-primary);
    background-color: var(--clr-bg-tertiary);
    border-color: var(--clr-border);
  }

  .c-offcanvas__link:focus-visible {
    border-color: var(--clr-accent);
    outline: none;
  }

  .c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
  }

  .c-btn[data-variant="primary"] {
    background-color: var(--clr-accent);
    color: var(--clr-bg-primary);
  }

  .c-btn[data-variant="primary"]:where(:hover, :focus-visible) {
    background-color: var(--clr-text-primary);
    box-shadow: var(--shadow-glow);
  }

  .c-btn[data-variant="secondary"] {
    background-color: var(--clr-bg-tertiary);
    color: var(--clr-text-primary);
    border: 1px solid var(--clr-border);
  }

  .c-btn[data-variant="secondary"]:where(:hover, :focus-visible) {
    border-color: var(--clr-accent);
    color: var(--clr-accent);
  }

  .c-btn[data-variant="ghost"] {
    color: var(--clr-text-secondary);
  }

  .c-btn[data-variant="ghost"]:where(:hover, :focus-visible) {
    color: var(--clr-accent);
    background-color: var(--clr-bg-tertiary);
  }

  .c-card {
    background-color: var(--clr-bg-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    transition: all var(--transition-fast);
  }

  .c-card:where(:hover, :focus-within) {
    border-color: var(--clr-accent);
    box-shadow: var(--shadow-md);
  }

  .c-card__img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-block-end: var(--space-sm);
  }

  .c-card__title {
    font-size: var(--fs-md);
    margin-block-end: var(--space-2xs);
  }

  .c-card__text {
    font-size: var(--fs-sm);
    color: var(--clr-text-muted);
  }

  .c-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block-start: var(--space-sm);
    font-size: var(--fs-xs);
    color: var(--clr-text-muted);
  }

  .c-hero {
    padding-block-start: 200px;
    padding-block-end: var(--space-2xl);
    background: linear-gradient(180deg, var(--clr-bg-primary) 0%, var(--clr-bg-secondary) 100%);
    position: relative;
    overflow: hidden;
  }

  .c-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, var(--clr-accent-glow) 0%, transparent 60%);
    pointer-events: none;
  }

  .c-hero__content {
    position: relative;
    text-align: center;
    max-inline-size: 800px;
    margin-inline: auto;
  }

  .c-hero__title {
    margin-block-end: var(--space-md);
  }

  .c-hero__title span {
    color: var(--clr-accent);
  }

  .c-hero__text {
    font-size: var(--fs-md);
    margin-block-end: var(--space-lg);
  }

  .c-section-header {
    text-align: center;
    margin-block-end: var(--space-xl);
  }

  .c-section-header__title {
    margin-block-end: var(--space-sm);
  }

  .c-section-header__title span {
    color: var(--clr-accent);
  }

  .c-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2xs) var(--space-xs);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    border-radius: var(--radius-sm);
    background-color: var(--clr-bg-tertiary);
    color: var(--clr-text-secondary);
  }

  .c-badge[data-color="accent"] {
    background-color: var(--clr-accent-dim);
    color: var(--clr-accent);
  }

  .c-badge[data-color="warning"] {
    background-color: rgba(243, 156, 18, 0.2);
    color: var(--clr-warning);
  }

  .c-input {
    inline-size: 100%;
    padding: var(--space-sm);
    background-color: var(--clr-bg-tertiary);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    color: var(--clr-text-primary);
    transition: border-color var(--transition-fast);
  }

  .c-input:where(:hover, :focus) {
    border-color: var(--clr-accent);
  }

  .c-input::placeholder {
    color: var(--clr-text-muted);
  }

  .c-input.is-error {
    border-color: var(--clr-error);
  }

  .c-input-error {
    font-size: var(--fs-xs);
    color: var(--clr-error);
    margin-block-start: var(--space-2xs);
  }

  .c-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    margin-block-end: var(--space-2xs);
    color: var(--clr-text-secondary);
  }

  .c-field {
    margin-block-end: var(--space-md);
  }

  .c-accordion {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .c-accordion__item {
    border-block-end: 1px solid var(--clr-border);
  }

  .c-accordion__item:last-child {
    border-block-end: none;
  }

  .c-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    inline-size: 100%;
    padding: var(--space-md);
    text-align: start;
    font-weight: var(--fw-medium);
    color: var(--clr-text-primary);
    background-color: var(--clr-bg-card);
    transition: background-color var(--transition-fast);
  }

  .c-accordion__trigger:where(:hover, :focus-visible) {
    background-color: var(--clr-bg-tertiary);
  }

  .c-accordion__icon {
    font-size: var(--fs-lg);
    transition: transform var(--transition-fast);
  }

  .c-accordion__trigger[aria-expanded="true"] .c-accordion__icon {
    transform: rotate(180deg);
  }

  .c-accordion__panel {
    display: none;
    padding: var(--space-md);
    background-color: var(--clr-bg-secondary);
  }

  .c-accordion__panel.is-open {
    display: block;
  }

  .c-tabs {
    display: flex;
    gap: var(--space-2xs);
    padding: var(--space-2xs);
    background-color: var(--clr-bg-tertiary);
    border-radius: var(--radius-md);
    overflow-x: auto;
  }

  .c-tabs__btn {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--clr-text-secondary);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: all var(--transition-fast);
  }

  .c-tabs__btn:where(:hover, :focus-visible) {
    color: var(--clr-text-primary);
  }

  .c-tabs__btn.is-active {
    background-color: var(--clr-accent);
    color: var(--clr-bg-primary);
  }

  .c-tabs__panel {
    display: none;
    padding-block-start: var(--space-md);
  }

  .c-tabs__panel.is-active {
    display: block;
  }

  .c-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-end: var(--space-lg);
  }

  .c-filter__btn {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--fs-sm);
    color: var(--clr-text-secondary);
    background-color: var(--clr-bg-tertiary);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
  }

  .c-filter__btn:where(:hover, :focus-visible) {
    border-color: var(--clr-accent);
    color: var(--clr-accent);
  }

  .c-filter__btn.is-active {
    background-color: var(--clr-accent);
    border-color: var(--clr-accent);
    color: var(--clr-bg-primary);
  }

  .c-rank-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background-color: var(--clr-bg-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
  }

  .c-rank-card:where(:hover, :focus-within) {
    border-color: var(--clr-accent);
    transform: translateY(-2px);
  }

  .c-rank-card__position {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--clr-accent);
    min-inline-size: 40px;
  }

  .c-rank-card__img {
    inline-size: 60px;
    block-size: 60px;
    object-fit: cover;
    border-radius: var(--radius-md);
  }

  .c-rank-card__content {
    flex: 1;
    min-inline-size: 0;
  }

  .c-rank-card__title {
    font-size: var(--fs-md);
    margin-block-end: var(--space-2xs);
  }

  .c-rank-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }

  .c-featured {
    display: grid;
    gap: var(--space-lg);
  }

  @media (min-width: 768px) {
    .c-featured {
      grid-template-columns: 1fr 1fr;
    }
  }

  .c-featured__img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radius-lg);
  }

  .c-featured__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .c-pros-cons {
    display: grid;
    gap: var(--space-md);
  }

  @media (min-width: 768px) {
    .c-pros-cons {
      grid-template-columns: 1fr 1fr;
    }
  }

  .c-pros-cons__list {
    padding: var(--space-md);
    background-color: var(--clr-bg-card);
    border-radius: var(--radius-lg);
  }

  .c-pros-cons__list[data-type="pros"] {
    border-inline-start: 3px solid var(--clr-success);
  }

  .c-pros-cons__list[data-type="cons"] {
    border-inline-start: 3px solid var(--clr-error);
  }

  .c-pros-cons__title {
    font-size: var(--fs-md);
    margin-block-end: var(--space-sm);
  }

  .c-pros-cons__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    padding-block: var(--space-xs);
    font-size: var(--fs-sm);
    color: var(--clr-text-secondary);
  }

  .c-pros-cons__icon {
    flex-shrink: 0;
    font-size: var(--fs-sm);
  }

  .c-pros-cons__list[data-type="pros"] .c-pros-cons__icon {
    color: var(--clr-success);
  }

  .c-pros-cons__list[data-type="cons"] .c-pros-cons__icon {
    color: var(--clr-error);
  }

  .c-news-card {
    background-color: var(--clr-bg-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-fast);
  }

  .c-news-card:where(:hover, :focus-within) {
    border-color: var(--clr-accent);
  }

  .c-news-card__img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .c-news-card__content {
    padding: var(--space-md);
  }

  .c-news-card__date {
    font-size: var(--fs-xs);
    color: var(--clr-text-muted);
    margin-block-end: var(--space-2xs);
  }

  .c-news-card__title {
    font-size: var(--fs-md);
    margin-block-end: var(--space-xs);
  }

  .c-footer {
    padding-block: var(--space-2xl);
    background-color: var(--clr-bg-secondary);
    border-block-start: 1px solid var(--clr-border);
  }

  .c-footer__grid {
    display: grid;
    gap: var(--space-xl);
    margin-block-end: var(--space-xl);
  }

  @media (min-width: 768px) {
    .c-footer__grid {
      grid-template-columns: 2fr 1fr 1fr 1fr;
    }
  }

  .c-footer__title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-block-end: var(--space-md);
    color: var(--clr-text-primary);
  }

  .c-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .c-footer__link {
    font-size: var(--fs-sm);
    color: var(--clr-text-secondary);
  }

  .c-footer__link:where(:hover, :focus-visible) {
    color: var(--clr-accent);
  }

  .c-footer__bottom {
    padding-block-start: var(--space-lg);
    border-block-start: 1px solid var(--clr-border);
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--clr-text-muted);
  }

  .c-cookie-banner {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    padding: var(--space-md);
    background-color: var(--clr-bg-secondary);
    border-block-start: 1px solid var(--clr-border);
    z-index: 2000;
    transform: translateY(100%);
    transition: transform var(--transition-base);
  }

  .c-cookie-banner.is-visible {
    transform: translateY(0);
  }

  .c-cookie-banner__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: center;
  }

  @media (min-width: 768px) {
    .c-cookie-banner__inner {
      flex-direction: row;
      justify-content: space-between;
    }
  }

  .c-cookie-banner__text {
    font-size: var(--fs-sm);
    color: var(--clr-text-secondary);
    text-align: center;
  }

  @media (min-width: 768px) {
    .c-cookie-banner__text {
      text-align: start;
    }
  }

  .c-cookie-banner__actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    justify-content: center;
  }

  .c-comparison-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(10, 15, 13, 0.9);
    z-index: 3000;
    display: none;
    place-items: center;
    padding: var(--space-md);
  }

  .c-comparison-modal.is-open {
    display: grid;
  }

  .c-comparison-modal__content {
    background-color: var(--clr-bg-secondary);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    max-inline-size: 900px;
    max-block-size: 80vh;
    overflow-y: auto;
  }

  .c-comparison-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-lg);
  }

  .c-comparison-modal__close {
    font-size: var(--fs-xl);
    color: var(--clr-text-secondary);
  }

  .c-comparison-modal__close:where(:hover, :focus-visible) {
    color: var(--clr-accent);
  }

  .c-stat {
    text-align: center;
    padding: var(--space-md);
  }

  .c-stat__value {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--clr-accent);
  }

  .c-stat__label {
    font-size: var(--fs-sm);
    color: var(--clr-text-muted);
  }

  .c-about {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  @media (min-width: 768px) {
    .c-about {
      flex-direction: row;
      align-items: center;
    }
  }

  .c-about__img {
    flex-shrink: 0;
    inline-size: 100%;
    max-inline-size: 400px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-xl);
  }

  .c-genre-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    aspect-ratio: 3 / 2;
  }

  .c-genre-card__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
  }

  .c-genre-card:where(:hover, :focus-within) .c-genre-card__img {
    transform: scale(1.05);
  }

  .c-genre-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-md);
  }

  .c-genre-card__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--clr-text-primary);
    margin-block-end: var(--space-2xs);
  }

  .c-genre-card__count {
    font-size: var(--fs-sm);
    color: var(--clr-accent);
  }
}

@layer utilities {
  .u-text-center {
    text-align: center;
  }

  .u-mt-sm {
    margin-block-start: var(--space-sm);
  }

  .u-mt-md {
    margin-block-start: var(--space-md);
  }

  .u-mt-lg {
    margin-block-start: var(--space-lg);
  }

  .u-mb-sm {
    margin-block-end: var(--space-sm);
  }

  .u-mb-md {
    margin-block-end: var(--space-md);
  }

  .u-mb-lg {
    margin-block-end: var(--space-lg);
  }

  .u-accent {
    color: var(--clr-accent);
  }

  .u-sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}