@layer reset, base, layout, components, utilities;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote {
    margin: 0;
  }

  img,
  video,
  iframe,
  svg {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  button {
    font: inherit;
  }
}

@layer base {
  :root {
    color-scheme: light dark;

    /* Tatreez on undyed linen: cross-stitch red, olive and flag green, saffron, indigo. */
    --color-page: #efe3c8;
    --color-paper: #fffaf0;
    --color-text: #1d1a17;
    --color-muted: #5b4a3a;
    --color-rule: #d9c9a8;
    --color-red: #a3122a;
    --color-green: #007a3d;
    --color-gold: #e0a526;
    --color-indigo: #2b3a8c;
    --color-border: #1d1a17;
    --color-tint: #f6ecd6;
    --color-focus: #2b3a8c;

    --tile-page: url("../images/linen.svg");
    --tile-tatreez: url("../images/tatreez.svg");

    --font-mono:
      ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "DejaVu Sans Mono",
      "Liberation Mono", "Courier New", monospace;

    --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
    --step-2: clamp(1.4rem, 1.25rem + 0.8vw, 1.8rem);
    --step-3: clamp(1.7rem, 1.45rem + 1.4vw, 2.4rem);
    --step-4: clamp(2rem, 1.6rem + 2.4vw, 3.2rem);

    --space-xs: 0.5rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2.5rem;
    --space-xl: 4rem;

    --gutter: var(--space-s);
    --band: 28px;

    @media (min-width: 52rem) {
      --gutter: var(--space-l);
    }
  }

  @media (prefers-color-scheme: dark) {
    /* Black thob with bright stitching, as on Hebron and Bethlehem dresses. */
    :root {
      --color-page: #0f0d0c;
      --color-paper: #1c1714;
      --color-text: #f3e9d2;
      --color-muted: #cdbb9f;
      --color-rule: #3a302a;
      --color-red: #ff7d8a;
      --color-green: #5fd08a;
      --color-gold: #f2c14e;
      --color-indigo: #9fb0ff;
      --color-border: #f3e9d2;
      --color-tint: #261f1b;
      --color-focus: #f2c14e;

      --tile-page: url("../images/linen-dark.svg");
      --tile-tatreez: url("../images/tatreez-dark.svg");
    }
  }

  @media (prefers-contrast: more) {
    :root {
      --color-muted: var(--color-text);
      --color-rule: var(--color-text);
      --tile-page: none;
    }
  }

  /* House rule: no shouting. Site chrome is lowercase; post titles, authored prose and code keep their case. */
  body {
    text-transform: lowercase;
  }

  .post-content,
  .post-header h1,
  .post-card-title,
  .post-nav-title,
  .post-card-excerpt,
  .page-description,
  :is(pre, code, kbd, samp) {
    text-transform: none;
  }

  .post-content
    :is(
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      .kg-btn,
      .kg-toggle-heading-text,
      .kg-bookmark-title,
      .kg-file-card-title,
      .kg-product-card-title,
      .kg-product-card-button,
      .kg-header-card-button
    ) {
    text-transform: lowercase;
  }

  body {
    background: var(--color-paper);
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: var(--step-0);
    line-height: 1.7;
    overflow-wrap: break-word;

    @media (min-width: 52rem) {
      background: var(--color-page) var(--tile-page);
    }
  }

  h1,
  h2,
  h3,
  h4 {
    line-height: 1.25;
    text-wrap: balance;
  }

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

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

  h3 {
    font-size: var(--step-1);
  }

  a {
    color: var(--color-red);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;

    &:hover {
      text-decoration-thickness: 3px;
    }
  }

  :focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }

  ::selection {
    background: var(--color-red);
    color: var(--color-paper);
  }

  code,
  pre,
  kbd {
    font-family: inherit;
  }

  :not(pre) > code {
    padding: 0.1em 0.3em;
    background: var(--color-tint);
  }

  pre {
    overflow-x: auto;
    padding: var(--space-s);
    background: #12100e;
    color: #b5f28c;
  }

  blockquote {
    padding-inline-start: var(--space-s);
    border-inline-start: 4px solid var(--color-red);
    font-style: italic;
  }

  hr {
    block-size: var(--band);
    border: 0;
    background: var(--tile-tatreez) center / auto 100% repeat-x;
  }

  time {
    font-variant-numeric: tabular-nums;
  }
}

@layer layout {
  .site {
    background: var(--color-paper);

    @media (min-width: 52rem) {
      inline-size: min(100% - 2 * var(--space-l), 48rem);
      margin: var(--space-l) auto;
      border: 2px solid var(--color-border);
    }
  }

  .site-header,
  .site-main,
  .site-footer {
    padding-inline: var(--gutter);
  }

  .site-header {
    display: grid;
    gap: var(--space-s);
    position: relative;
    padding-block: calc(22px + var(--space-m)) var(--space-m);

    &::before {
      content: "";
      position: absolute;
      inset-block-start: 0;
      inset-inline: 0;
      block-size: 22px;
      background: #f6f1e1 url("../images/keffiyeh.svg") repeat-x;
      border-block-end: 2px solid var(--color-border);
    }
  }

  .site-main {
    padding-block: var(--space-m) var(--space-xl);

    &:focus {
      outline: none;
    }
  }

  .site-footer {
    display: grid;
    gap: var(--space-s);
    padding-block: calc(var(--band) + var(--space-m)) var(--space-m);
    background: var(--tile-tatreez) top center / auto var(--band) repeat-x;
    color: var(--color-muted);
    font-size: var(--step--1);
  }
}

@layer components {
  .skip-link {
    position: absolute;
    inset-block-start: var(--space-xs);
    inset-inline-start: var(--space-xs);
    z-index: 1;
    padding: var(--space-xs) var(--space-s);
    background: var(--color-paper);
    border: 2px solid var(--color-border);
    transform: translateY(-200%);

    &:focus {
      transform: none;
    }
  }

  .site-title {
    font-size: var(--step-4);
    font-weight: 700;
    line-height: 1.1;

    & a {
      color: var(--color-text);
      text-decoration: none;
    }

    & a:hover {
      text-decoration: underline;
    }
  }

  .site-tagline {
    margin-block-start: var(--space-xs);
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  .site-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-s);
  }

  .nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-m);
    margin: 0;
    padding: 0;
    list-style: none;

    & a {
      display: inline-flex;
      align-items: center;
      min-block-size: 44px;
      color: var(--color-text);
    }

    & [aria-current="page"] {
      font-weight: 700;
      text-decoration-thickness: 3px;
    }
  }

  .search-button {
    min-block-size: 44px;
    margin-inline-start: auto;
    padding-inline: var(--space-s);
    background: var(--color-paper);
    border: 2px solid var(--color-border);
    color: var(--color-text);
    cursor: pointer;

    &:hover {
      background: var(--color-tint);
    }
  }

  .section-label {
    margin-block-end: var(--space-s);
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  .page-header {
    margin-block-end: var(--space-l);
  }

  .page-description,
  .post-meta {
    color: var(--color-muted);
  }

  .post-meta {
    font-size: var(--step--1);
  }

  .post-header {
    display: grid;
    gap: var(--space-xs);
    margin-block-end: var(--space-l);
  }

  .post-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;

    & a {
      display: inline-block;
      padding: 0.1em 0.6em;
      border: 2px solid var(--color-red);
      border-radius: 999px;
      text-decoration: none;

      &:hover {
        background: var(--color-tint);
      }

      &::before {
        content: "#" / "";
      }
    }
  }

  .feature-image {
    margin-block-end: var(--space-l);
    margin-inline: calc(-1 * var(--gutter));

    & img {
      inline-size: 100%;
    }

    & figcaption {
      margin-block-start: var(--space-xs);
      padding-inline: var(--gutter);
      color: var(--color-muted);
      font-size: var(--step--1);
    }
  }

  .post-content > * + * {
    margin-block-start: var(--space-m);
  }

  .post-content > :is(h2, h3, h4) {
    margin-block-start: var(--space-l);
  }

  .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    margin-block-start: var(--space-l);
    color: var(--color-muted);
  }

  .error {
    text-align: center;

    & h1 {
      font-size: var(--step-4);
      color: var(--color-red);
    }
  }

  .badge {
    display: grid;
    place-items: center;
    inline-size: 88px;
    block-size: 31px;
    padding-inline: 2px;
    border: 2px solid #1d1a17;
    background: #f28c28;
    color: #1d1a17;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

/* Prose: elements authors produce inside posts. */
@layer components {
  .post-content {
    & :is(ul, ol) {
      padding-inline-start: 3ch;
    }

    & li + li,
    & li > :is(ul, ol) {
      margin-block-start: var(--space-xs);
    }

    & li::marker {
      color: var(--color-red);
    }

    & h4 {
      font-size: var(--step-0);
    }

    & :is(h5, h6) {
      font-size: var(--step--1);
    }

    & table {
      display: block;
      max-inline-size: 100%;
      overflow-x: auto;
      border-collapse: collapse;
      font-size: var(--step--1);
    }

    & :is(th, td) {
      padding: var(--space-xs) var(--space-s);
      border: 1px solid var(--color-rule);
      text-align: start;
    }

    & th {
      background: var(--color-tint);
    }
  }

  mark {
    background: var(--color-gold);
    color: #1d1a17;
  }

  kbd {
    padding: 0 0.4em;
    border: 1px solid var(--color-muted);
    border-block-end-width: 3px;
  }

  del {
    text-decoration-color: var(--color-red);
  }

  abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
  }

  :is(sub, sup) {
    line-height: 0;
  }

  .footnotes {
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  hr.footnotes-sep {
    block-size: 1px;
    background: var(--color-rule);
  }

  :is(.footnote-item, .footnote-ref):target {
    background: var(--color-gold);
    color: #1d1a17;
  }
}

/* Editor cards. Ghost's own styles are excluded in theme/package.json for all of these. */
@layer components {
  .post-content figcaption {
    margin-block-start: var(--space-xs);
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  .kg-width-wide,
  .kg-width-full {
    margin-inline: calc(-1 * var(--gutter));

    & figcaption {
      padding-inline: var(--gutter);
    }
  }

  .kg-width-full :is(img, iframe) {
    inline-size: 100%;
  }

  .kg-embed-card iframe {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
    border: 0;
  }

  .kg-blockquote-alt {
    padding: var(--space-s) 0;
    border: 0;
    color: var(--color-red);
    font-size: var(--step-1);
    font-style: normal;
    text-align: center;
  }

  .kg-callout-card {
    --callout: var(--color-muted);

    display: flex;
    gap: var(--space-s);
    padding: var(--space-s);
    background: var(--color-tint);
    border-inline-start: 6px solid var(--callout);
  }

  .kg-callout-card-blue,
  .kg-callout-card-purple {
    --callout: var(--color-indigo);
  }

  .kg-callout-card-green {
    --callout: var(--color-green);
  }

  .kg-callout-card-yellow {
    --callout: var(--color-gold);
  }

  .kg-callout-card-red,
  .kg-callout-card-pink,
  .kg-callout-card-accent {
    --callout: var(--color-red);
  }

  .kg-callout-card-grey {
    --callout: var(--color-muted);
  }

  .kg-callout-card-white {
    --callout: var(--color-rule);
  }

  .kg-callout-text {
    flex: 1;
    min-inline-size: 0;
  }

  .kg-callout-emoji {
    font-size: var(--step-1);
    line-height: 1.4;
  }

  .kg-toggle-card {
    padding: var(--space-s);
    border: 2px solid var(--color-rule);
  }

  .kg-toggle-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    cursor: pointer;
  }

  .kg-toggle-heading-text {
    margin: 0;
    font-size: var(--step-0);
  }

  .kg-toggle-card-icon {
    display: grid;
    flex: none;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    background: var(--color-paper);
    border: 2px solid var(--color-border);
    color: var(--color-text);
    cursor: pointer;

    & svg {
      inline-size: 16px;
      block-size: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 3;
    }
  }

  .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-card-icon svg {
    transform: scaleY(-1);
  }

  .kg-toggle-content {
    margin-block-start: var(--space-s);

    & > * + * {
      margin-block-start: var(--space-s);
    }
  }

  .kg-toggle-card[data-kg-toggle-state="close"]:has([aria-expanded]) .kg-toggle-content {
    display: none;
  }

  /* GScan only sees flat selectors, so the card classes it requires are never nested. */
  .kg-button-card {
    display: flex;
  }

  .kg-button-card.kg-align-center {
    justify-content: center;
  }

  .kg-button-card.kg-align-left {
    justify-content: flex-start;
  }

  .kg-btn,
  .kg-product-card-button,
  .kg-header-card-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    padding-inline: var(--space-m);
    background: var(--color-gold);
    border: 2px solid #1d1a17;
    color: #1d1a17;
    font-weight: 700;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .kg-btn-accent,
  .kg-product-card-btn-accent {
    background: var(--color-red);
    border-color: var(--color-red);
    color: var(--color-paper);
  }

  .kg-bookmark-card {
    container-type: inline-size;
  }

  .kg-bookmark-container {
    display: flex;
    border: 2px solid var(--color-rule);
    color: var(--color-text);
    text-decoration: none;

    &:hover {
      background: var(--color-tint);
    }
  }

  .kg-bookmark-content {
    display: grid;
    flex: 1;
    align-content: start;
    gap: var(--space-xs);
    min-inline-size: 0;
    padding: var(--space-s);
  }

  .kg-bookmark-title {
    font-weight: 700;
  }

  .kg-bookmark-description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  .kg-bookmark-metadata {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--step--1);
  }

  .kg-bookmark-icon {
    inline-size: 20px;
    block-size: 20px;
  }

  .kg-bookmark-author {
    font-weight: 700;
  }

  .kg-bookmark-publisher::before {
    content: "· " / "";
  }

  .kg-bookmark-thumbnail {
    flex: 0 0 30%;

    & img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }

  @container (max-width: 28rem) {
    .kg-bookmark-thumbnail {
      display: none;
    }
  }

  .kg-file-card-container {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-s);
    border: 2px solid var(--color-rule);
    color: var(--color-text);
    text-decoration: none;

    &:hover {
      background: var(--color-tint);
    }
  }

  .kg-file-card-contents {
    flex: 1;
    min-inline-size: 0;
  }

  .kg-file-card-title {
    font-weight: 700;
  }

  .kg-file-card-caption,
  .kg-file-card-metadata {
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  .kg-file-card-metadata {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .kg-file-card-filename {
    overflow-wrap: anywhere;
  }

  .kg-file-card-medium .kg-file-card-container {
    padding-block: var(--space-xs);
  }

  .kg-file-card-small .kg-file-card-container {
    padding: var(--space-xs) var(--space-s);
  }

  .kg-file-card-small :is(.kg-file-card-caption, .kg-file-card-metadata) {
    display: none;
  }

  .kg-file-card-filesize::before {
    content: "· " / "";
  }

  .kg-file-card-icon svg {
    inline-size: 32px;
    block-size: 32px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
  }

  .kg-product-card-container {
    display: grid;
    gap: var(--space-s);
    max-inline-size: 30rem;
    margin-inline: auto;
    padding: var(--space-m);
    border: 2px solid var(--color-rule);
  }

  .kg-product-card-image {
    inline-size: 100%;
  }

  .kg-product-card-title {
    margin: 0;
    font-size: var(--step-1);
  }

  .kg-product-card-title-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
  }

  .kg-product-card-description > * + * {
    margin-block-start: var(--space-xs);
  }

  .kg-product-card-rating {
    display: flex;
    gap: 2px;
  }

  .kg-product-card-rating-star {
    inline-size: 1em;
    block-size: 1em;
    fill: var(--color-rule);
  }

  .kg-product-card-rating-active {
    fill: var(--color-gold);
  }

  .kg-header-card {
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    padding: var(--space-xl) var(--gutter);
    background: var(--color-text);
    color: var(--color-paper);
  }

  .kg-header-card-image {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .kg-header-card-content,
  .kg-header-card-text {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--space-s);
    text-align: center;
  }

  .kg-header-card-text.kg-align-left {
    justify-items: start;
    text-align: start;
  }

  .post-content .kg-header-card-heading {
    margin: 0;
    color: inherit;
    font-size: var(--step-3);
  }

  .kg-header-card-subheading {
    margin: 0;
  }

  .kg-nft-card-container {
    display: grid;
    border: 2px solid var(--color-rule);
    color: var(--color-text);
    text-decoration: none;
  }

  .kg-nft-image {
    inline-size: 100%;
  }

  .kg-nft-metadata {
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-s);
  }

  .kg-nft-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
  }

  .kg-nft-title {
    margin: 0;
    font-size: var(--step-1);
  }

  .kg-nft-opensea-logo {
    inline-size: 24px;
    block-size: 24px;
  }

  .kg-nft-creator,
  .kg-nft-description {
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  .kg-signup-card,
  .kg-cta-card {
    display: none;
  }
}

/* Things this theme adds around posts. */
@layer components {
  .sticker {
    justify-self: start;
    inline-size: fit-content;
    padding: 0 var(--space-xs);
    background: var(--color-gold);
    color: #1d1a17;
    font-size: var(--step--1);
    font-weight: 700;
  }

  .post-list {
    container-type: inline-size;
    margin: 0;
    padding: 0;
    list-style: none;

    & > li {
      padding-block: var(--space-m);
      border-block-start: 1px solid var(--color-rule);
    }

    & > li:last-child {
      border-block-end: 1px solid var(--color-rule);
    }
  }

  .post-card {
    display: grid;
    gap: var(--space-s);
  }

  .post-card-body {
    display: grid;
    align-content: start;
    gap: var(--space-xs);
  }

  .post-card-title {
    font-size: var(--step-1);

    & a {
      color: var(--color-text);
    }
  }

  .post-card-image {
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }

  @container (min-width: 36rem) {
    .post-card.has-image {
      grid-template-columns: 12rem 1fr;
      align-items: start;
    }
  }

  .post-nav {
    display: grid;
    gap: var(--space-m);
    margin-block-start: var(--space-xl);
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--color-rule);

    &:not(:has(a)) {
      display: none;
    }

    @media (min-width: 40rem) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .post-nav-link {
    display: grid;
    gap: 0.25rem;
    color: var(--color-text);
    text-decoration: none;

    &:hover .post-nav-title {
      text-decoration-thickness: 3px;
    }
  }

  .post-nav-older {
    grid-column: -2;
    text-align: end;
  }

  .post-nav-label {
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  .post-nav-newer .post-nav-label::before {
    content: "← " / "";
  }

  .post-nav-older .post-nav-label::after {
    content: " →" / "";
  }

  .post-nav-title {
    color: var(--color-red);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  .footer-nav .nav-list {
    gap: 0 var(--space-m);

    & a {
      min-block-size: 44px;
      color: var(--color-red);
    }
  }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/*
 * Unlayered on purpose: Ghost still ships its own CSS for the gallery, audio and video cards
 * (they need its JS), and unlayered rules beat anything inside @layer.
 */
.kg-audio-card {
  border-radius: 0;
  background: var(--color-paper);
  box-shadow: none;
  border: 2px solid var(--color-rule);
  color: var(--color-text);
  font-family: var(--font-mono);
}

.kg-audio-thumbnail,
.kg-audio-thumbnail.placeholder {
  border-radius: 0;
  background: var(--color-red);
}

.kg-video-overlay {
  background-image: none;
  background: rgb(0 0 0 / 0.3);
}

.kg-video-player-container {
  background: rgb(0 0 0 / 0.55);
}

.kg-video-large-play-icon,
:is(
  .kg-audio-seek-slider,
  .kg-audio-volume-slider,
  .kg-video-seek-slider,
  .kg-video-volume-slider
)::before,
:is(.kg-audio-player-container, .kg-video-card) input[type="range"]::-webkit-slider-runnable-track,
:is(.kg-audio-player-container, .kg-video-card) input[type="range"]::-webkit-slider-thumb,
:is(.kg-audio-player-container, .kg-video-card) input[type="range"]::-moz-range-track,
:is(.kg-audio-player-container, .kg-video-card) input[type="range"]::-moz-range-progress,
:is(.kg-audio-player-container, .kg-video-card) input[type="range"]::-moz-range-thumb {
  border-radius: 0;
}