:root:root:has(.site-header) {
  --bg-page: color-mix(in srgb, #f7f4ec 55%, #fcfcfb);
  --os-ink: var(--text-strong);
  --os-body: color-mix(in srgb, var(--text-strong) 70%, var(--bg-page));
  --os-muted: color-mix(in srgb, var(--text-strong) 55%, var(--bg-page));
  --os-line: color-mix(in srgb, var(--text-strong) 9%, transparent);
  --os-line-strong: color-mix(in srgb, var(--text-strong) 16%, transparent);
  --os-accent: var(--sub-ink, #007c5d);
  --os-accent-soft: rgb(var(--sub-accent, 0 200 150) / 0.11);
  --os-accent-line: rgb(var(--sub-accent, 0 200 150) / 0.45);
  --os-shadow: 0 1px 2px rgb(16 40 32 / 0.04), 0 1px 1px rgb(16 40 32 / 0.02);
  --os-shadow-lg: 0 1px 2px rgb(16 40 32 / 0.04), 0 16px 40px -16px rgb(16 40 32 / 0.16);
}

.site-header {
  background: color-mix(in srgb, var(--bg-page) 84%, transparent);
  border-bottom-color: var(--os-line);
}
.site-header .site-nav { gap: 28px; }
.site-header nav.site-nav a { font-size: 14px; font-weight: 400; color: var(--os-body); }
.site-header nav.site-nav a:hover { color: var(--os-ink); text-decoration: none; }
.site-header .header-actions { gap: 12px; }
.site-header .site-btn-sm { height: 36px; padding: 0 16px; font-size: 14px; font-weight: 500; }
.site-header .nav-signin {
  height: 36px; padding: 0 16px; font-size: 14px; font-weight: 400;
  color: var(--os-ink); border-color: var(--os-line-strong); background: transparent;
}
.site-header .brand-word { font-size: 18px; }

.site-header details.lang-menu { border: 0; padding: 0; max-width: none; }
.site-header .lang-menu > summary {
  padding: 8px; border-radius: 8px; color: var(--os-body); font-size: inherit;
}
.site-header .lang-menu > summary:hover { background: var(--surface-hover); color: var(--os-ink); }
.site-header .lang-menu > summary::after { content: none; }
.site-header .lang-menu[open] > nav {
  border-radius: 12px; border-color: var(--os-line); background: var(--surface-card);
  box-shadow: var(--os-shadow-lg); padding: 6px;
}
.site-header .lang-menu nav a { font-size: 14px; font-weight: 400; color: var(--os-body); padding: 7px 10px; }
.site-header .lang-menu nav a[aria-current="page"] { font-weight: 500; color: var(--os-ink); }

@media (max-width: 760px) {
  .site-header .wrap { padding-block: 10px 0; gap: 0 12px; }
  .site-header .header-actions { gap: 6px; }
  .site-header .site-nav { gap: 22px; padding-block: 6px 12px; }
  .site-header .site-btn-sm, .site-header .nav-signin { height: 34px; padding: 0 14px; font-size: 13.5px; }
}
@media (max-width: 430px) {
  .site-header .header-actions > a.header-gh { display: none; }
  .site-header .wrap { padding-inline: 20px; }
  .site-header .site-nav { margin-inline: -20px; padding-inline: 20px; }
  .site-header .wrap { column-gap: 8px; }
  .site-header .site-btn-sm, .site-header .nav-signin { padding: 0 10px; }
  .site-header .brand-word { font-size: 16.5px; }
  .site-header .site-brand { gap: 6px; }
  .site-header .header-actions { gap: 4px; }
  .site-header .lang-menu > summary { padding: 8px 4px; }
}
@media (max-width: 374px) {
  .site-header .site-btn-sm, .site-header .nav-signin { padding: 0 9px; font-size: 13px; }
  .site-header .brand-tile { width: 22px; height: 22px; }
  .site-header .brand-word { font-size: 15.5px; }
}

:root:has(.site-header) .site-btn { font-weight: 500; }
:root:has(.site-header) .lang-row a[aria-current="page"] { font-weight: 500; }
:root:has(.site-header) :is(.hero h1, main:not(.screen) h2, main:not(.screen) h3) { font-weight: 500; color: var(--os-ink); }

.hero { padding: 96px 0 64px; }
.hero h1 {
  font-size: clamp(38px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.04em;
  max-width: 22ch; margin: 0 auto 24px;
}
.hero:has(.site-eyebrow) h1 {
  font-size: clamp(42px, 5.4vw, 64px); line-height: 1; letter-spacing: -0.045em; max-width: 20ch;
}
.hero .subhead {
  font-size: 20px; line-height: 1.5; color: var(--os-body); max-width: 46ch;
  margin: 0 auto 20px; letter-spacing: -0.01em;
}
.hero:has(.site-eyebrow) .subhead { font-size: 18px; line-height: 1.6; max-width: 52ch; margin-bottom: 0; }
.hero .lede {
  font-size: 17px; line-height: 1.65; color: var(--os-body); max-width: 60ch; margin: 0 auto 16px;
}
.hero .wrap > p:not([class]) { font-size: 17px; line-height: 1.65; color: var(--os-body); max-width: 60ch; margin: 0 auto 16px; }
.hero .lede a { color: var(--os-ink); text-decoration: underline; text-decoration-color: var(--os-line-strong); text-underline-offset: 3px; }
.hero .lede a:hover { text-decoration-color: currentColor; }
.hero .reassure, .hero .post-meta { margin-top: 24px; font-size: 13px; color: var(--os-muted); }
.hero .post-meta a { color: var(--os-ink); font-weight: 500; }
.hero .cta { margin-top: 32px; gap: 12px; }
.hero .btn-lg { padding: 0 24px; height: 48px; font-size: 15px; }

.hero .site-eyebrow {
  margin: 0 auto 28px; padding: 6px 14px 6px 12px; gap: 8px;
  background: var(--surface-card); border: 1px solid var(--os-line); box-shadow: var(--os-shadow);
  color: var(--os-body); font-size: 13px; font-weight: 400; line-height: 1.4;
}
.hero .site-eyebrow svg { color: var(--os-accent); width: 14px; height: 14px; }

.hero .elsewhere { font-size: 13.5px; line-height: 1.6; color: var(--os-muted); }
.hero .elsewhere a { color: var(--os-body); text-decoration-color: var(--os-line-strong); text-underline-offset: 3px; }
.hero .ext-line { gap: 8px 10px; margin-top: 12px; }
.hero .ext-line > span { font-size: 13.5px; color: var(--os-muted); margin-right: 4px; }
.hero .ext-line .site-btn { height: 34px; padding: 0 14px; font-size: 13.5px; }
.hero .ext-line .site-btn-secondary { background: var(--surface-card); border-color: var(--os-line-strong); }
.hero .ext-line .site-btn-primary {
  background: var(--surface-card); color: var(--os-ink);
  border-color: var(--os-accent-line); box-shadow: inset 0 0 0 1px var(--os-accent-line);
}
.hero .ext-line .site-btn-primary:hover { background: var(--os-accent-soft); }

@media (max-width: 640px) {
  .hero { padding: 56px 0 40px; }
  .hero h1 { font-size: clamp(32px, 9vw, 40px); line-height: 1.08; }
  .hero:has(.site-eyebrow) h1 { font-size: clamp(36px, 10.6vw, 42px); line-height: 1.04; letter-spacing: -0.04em; }
  .hero .subhead { font-size: 17px; }
  .hero:has(.site-eyebrow) .subhead { font-size: 16.5px; }
  .hero .ext-line .site-btn { padding: 0 12px; font-size: 13px; }
  .hero .ext-line > span { flex-basis: 100%; margin: 0; }
  .hero .lede { font-size: 16px; }
  .hero .site-eyebrow { display: block; padding: 6px 14px; border-radius: 14px; font-size: 12.5px; text-wrap: balance; }
  .hero .site-eyebrow svg { display: inline-block; vertical-align: -2px; margin-right: 6px; }
}

.hero:has(.site-eyebrow) { padding-top: 64px; padding-bottom: 40px; }
.hero:has(.site-eyebrow) .site-eyebrow { margin-bottom: 24px; }
main.screen:has(> .card-start) { padding-top: 8px; }
.hero:has(.site-eyebrow) .subhead { margin-bottom: 24px; }
main.screen:has(> .card-start) { max-width: 880px; padding-bottom: 32px; gap: 12px; }
main.screen > .card-start {
  padding: 48px 32px 40px; border-radius: 20px; border-color: var(--os-line); box-shadow: var(--os-shadow-lg);
}
main.screen > .card-start .start-title { font-size: 32px; letter-spacing: -0.03em; }
main.screen > .card-start .start-sub { font-size: 15px; color: var(--os-body); }
main.screen > .card-start .start-primary,
main.screen > .card-start .start-sample { border-radius: 12px; }
main.screen > .card-start .start-fine,
main.screen > .card-start .start-drop-hint { color: var(--os-muted); }
main.screen:has(> .card-start) > .features-card { border-radius: 14px; border-color: var(--os-line); box-shadow: var(--os-shadow); }
main.screen:has(> .card-start) > footer.web-footer { border-top: 0; padding: 4px 0 0; text-align: center; color: var(--os-muted); }
@media (max-width: 640px) {
  main.screen > .card-start { padding: 32px 20px 28px; border-radius: 16px; }
  main.screen > .card-start .start-title { font-size: 28px; }
}

:root:has(.site-header) main:not(.screen) > section:not(.hero) {
  padding: 80px 0; background: transparent; border-top: 1px solid var(--os-line);
}
@media (min-width: 900px) {
  :root:has(.site-header) main:not(.screen) > section:not(.hero) { padding: 128px 0; }
}
:root:has(.site-header) main:not(.screen) > section:not(.hero):first-of-type,
:root:has(.site-header) main:not(.screen) > section.hero + section { border-top: 0; }
:root:has(.site-header) main:not(.screen) > section.hero + section#post { padding-top: 16px; }

.section-head { margin-bottom: 56px; }
main:not(.screen) .section-head h2 {
  font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.035em;
  max-width: 24ch; margin: 0 0 20px;
}
main:not(.screen) .section-head > p { font-size: 17px; line-height: 1.65; color: var(--os-body); max-width: 60ch; }
main:not(.screen) .section-head > p + p { margin-top: 16px; }
main:not(.screen) .section-head > p a { color: var(--os-ink); text-decoration: underline; text-decoration-color: var(--os-line-strong); text-underline-offset: 3px; }
main:not(.screen) .section-head > p a:hover { text-decoration-color: currentColor; }
main:not(.screen) .section-head p.open-line {
  margin-top: 32px; font-size: clamp(19px, 2vw, 22px); line-height: 1.5; letter-spacing: -0.01em;
  color: var(--os-ink); max-width: 44ch;
}
main:not(.screen) .section-head:has(+ details) { margin-bottom: 40px; }
@media (max-width: 640px) {
  .section-head { margin-bottom: 40px; }
  main:not(.screen) .section-head h2 { font-size: 30px; line-height: 1.1; margin-bottom: 16px; }
  main:not(.screen) .section-head > p { font-size: 16px; }
}

main:not(.screen) .grid, main:not(.screen) .price-grid, main:not(.screen) .shot-row { gap: 16px; }
.site-card, .site-card.featured {
  background: var(--surface-card); border: 1px solid var(--os-line); border-radius: 16px;
  padding: 28px; box-shadow: var(--os-shadow);
}
.site-card h3 { font-size: 18px; line-height: 1.3; letter-spacing: -0.015em; margin: 0 0 8px; }
.site-card h3 a { color: var(--os-ink); text-decoration: none; }
.site-card h3 a:hover { color: var(--os-accent); text-decoration: none; }
.site-card:has(h3 > a) { transition: border-color .15s ease, box-shadow .15s ease; }
.site-card:has(h3 > a):hover { border-color: var(--os-line-strong); box-shadow: var(--os-shadow-lg); }
.site-card p { font-size: 15px; line-height: 1.6; color: var(--os-body); }
.site-card p a:not(.site-btn) { color: var(--os-ink); text-decoration: underline; text-decoration-color: var(--os-line-strong); text-underline-offset: 3px; }
.site-card p a:not(.site-btn):hover { text-decoration-color: currentColor; }
.site-card code { font-size: 0.88em; }

.card-icon { gap: 12px; margin-bottom: 20px; }
.card-icon svg { width: 40px; height: 40px; padding: 10px; border-radius: 10px; background: var(--os-accent-soft); color: var(--os-accent); }
.card-icon b { font-size: 15px; font-weight: 500; color: var(--os-accent); }

.site-tag {
  margin-bottom: 16px; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.5;
}
.tag-free { background: var(--os-accent-soft); color: var(--os-accent); }
.tag-paid { background: var(--os-line); color: var(--os-body); }

#downloads .site-card p[data-browser-ctas] { display: flex; flex-direction: column; gap: 8px; }
#downloads .site-card .site-btn { height: 40px; padding: 0 16px; font-size: 14px; }
#downloads .site-card .site-btn-secondary { background: var(--surface-card); border-color: var(--os-line-strong); }
.site-btn-secondary:hover { border-color: var(--os-ink); background: var(--surface-card); }
#downloads .reassure, main:not(.screen) .reassure { margin-top: 24px; font-size: 13px; color: var(--os-muted); }

.shot video { border-radius: 16px; box-shadow: 0 0 0 1px var(--os-line), 0 24px 48px -24px rgb(16 40 32 / 0.28); }
.shot figcaption { margin-top: 12px; font-size: 13px; color: var(--os-muted); }
.shot-lead { margin-bottom: 24px; }

.site-card.price-card { padding: 32px; display: flex; flex-direction: column; align-items: flex-start; }
.site-card.featured { border-color: var(--os-accent-line); box-shadow: 0 0 0 1px var(--os-accent-line), var(--os-shadow-lg); }
.price-card .amount { font-size: 48px; font-weight: 500; letter-spacing: -0.045em; color: var(--os-ink); margin: 0 0 4px; }
.price-card .amount small { font-size: 15px; letter-spacing: -0.005em; color: var(--os-muted); }
.price-card ul { margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--os-line); padding-top: 20px; width: 100%; }
.price-card li { position: relative; padding-left: 28px; margin-bottom: 10px; font-size: 15px; line-height: 1.55; color: var(--os-body); }
.price-card li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; background: var(--os-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.price-card > .site-btn { margin-top: 20px; height: 44px; padding: 0 24px; font-size: 15px; }
@media (max-width: 640px) {
  .site-card { padding: 24px; }
  .site-card.price-card { padding: 28px 24px; }
  .price-card .amount { font-size: 40px; }
}

:root:has(.site-header) main:not(.screen) details:not(.lang-menu) {
  max-width: 820px; padding: 0; border-bottom: 1px solid var(--os-line);
}
:root:has(.site-header) main:not(.screen) :not(details) + details:not(.lang-menu) { border-top: 1px solid var(--os-line); }
:root:has(.site-header) main:not(.screen) details:not(.lang-menu) > summary {
  padding: 22px 0; font-size: 17px; line-height: 1.4; font-weight: 500; color: var(--os-ink); align-items: baseline;
}
:root:has(.site-header) main:not(.screen) details:not(.lang-menu) > summary:hover { color: var(--os-accent); }
:root:has(.site-header) main:not(.screen) details:not(.lang-menu) > summary::after {
  color: var(--os-muted); font-size: 22px; line-height: 1; font-weight: 400; flex: none;
}
:root:has(.site-header) main:not(.screen) details:not(.lang-menu) > p {
  margin: -6px 0 24px; max-width: 64ch; font-size: 15.5px; line-height: 1.7; color: var(--os-body);
}
:root:has(.site-header) main:not(.screen) details:not(.lang-menu) > p a { color: var(--os-ink); text-decoration: underline; text-decoration-color: var(--os-line-strong); text-underline-offset: 3px; }
@media (max-width: 640px) {
  :root:has(.site-header) main:not(.screen) details:not(.lang-menu) > summary { padding: 18px 0; font-size: 16px; }
}

.post { max-width: 44rem; }
.post > p, .post > ul > li, .post > ol > li { font-size: 17px; line-height: 1.7; color: var(--os-body); }
.post > p { margin: 0 0 20px; }
.post > ul, .post > ol { margin: 0 0 24px; }
.post li { margin-bottom: 8px; }
.post li::marker { color: var(--os-muted); }
.post strong { font-weight: 500; color: var(--os-ink); }
.post h2 { font-size: clamp(26px, 3vw, 32px); line-height: 1.15; letter-spacing: -0.03em; margin: 64px 0 16px; }
.post h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.015em; margin: 40px 0 12px; }
.post a:not(.site-btn):not(.card-link) { text-decoration-color: var(--os-line-strong); text-underline-offset: 3px; }
.post a:not(.site-btn):not(.card-link):hover { color: var(--os-accent); text-decoration-color: currentColor; }
.post code { background: var(--os-line); font-size: 0.86em; }
.post pre { background: var(--surface-card); border: 1px solid var(--os-line); border-radius: 12px; padding: 16px 20px; margin: 0 0 24px; box-shadow: var(--os-shadow); }
.post pre code { background: none; }
.post .table-scroll {
  margin: 8px 0 28px; background: var(--surface-card); border: 1px solid var(--os-line);
  border-radius: 14px; box-shadow: var(--os-shadow);
}
.post table { font-size: 15px; }
.post th, .post td { padding: 14px 16px; border-bottom-color: var(--os-line); }
.post tr:last-child td { border-bottom: 0; }
.post th { font-size: 13px; font-weight: 500; color: var(--os-ink); background: color-mix(in srgb, var(--os-line) 40%, transparent); }
.post td { color: var(--os-body); }
.post td:first-child { color: var(--os-ink); }
.post hr { border-top-color: var(--os-line); margin: 56px 0; }
.post .cta { margin-top: 40px; }
.post .cta .site-btn { height: 44px; padding: 0 22px; font-size: 15px; text-decoration: none; }

.style-grid { gap: 16px; }
.style-card { border-color: var(--os-line); border-radius: 16px; box-shadow: var(--os-shadow); }
.style-card .style-name { font-weight: 500; font-size: 17px; letter-spacing: -0.01em; }
.style-card .style-preset { color: var(--os-muted); }
.style-card .tags li { color: var(--os-body); background: var(--os-line); }

.post-list { gap: 12px; }
.post-list a.card-link {
  padding: 24px 28px; border: 1px solid var(--os-line); border-radius: 16px; box-shadow: var(--os-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.post-list a.card-link:hover { border-color: var(--os-line-strong); box-shadow: var(--os-shadow-lg); text-decoration: none; }
.post-list a.card-link h2 { font-size: 19px; line-height: 1.3; letter-spacing: -0.02em; margin: 0 0 8px; }
.post-list a.card-link:hover h2 { color: var(--os-accent); }
.post-list p { font-size: 15px; line-height: 1.6; color: var(--os-body); }
@media (max-width: 640px) {
  .post > p, .post > ul > li, .post > ol > li { font-size: 16px; }
  .post h2 { margin-top: 48px; }
  .post-list a.card-link { padding: 20px; }
}

:root:has(.site-header) footer:has(> .wrap) {
  padding: 72px 0 56px; border-top: 1px solid var(--os-line); color: var(--os-muted); font-size: 14px; font-weight: 400;
}
:root:has(.site-header) footer > .wrap:first-child {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 32px; align-items: start;
}
:root:has(.site-header) footer > .wrap:first-child > a:not(.social):not(.source) { font-size: 14px; line-height: 1.5; color: var(--os-body); justify-self: start; }
:root:has(.site-header) footer > .wrap:first-child > a:hover { color: var(--os-ink); }
:root:has(.site-header) footer > .wrap:first-child > .spacer {
  order: 2; grid-column: 1 / -1; height: 1px; margin: 28px 0 8px; background: var(--os-line);
}
:root:has(.site-header) footer > .wrap:first-child > span:first-child { order: 3; grid-column: 1 / span 2; align-self: center; font-size: 13px; color: var(--os-muted); }
:root:has(.site-header) footer > .wrap:first-child > .socials { order: 4; grid-column: 3; justify-self: end; align-self: center; margin: 0 -8px 0 0; }
:root:has(.site-header) footer > .wrap:first-child > .source { order: 5; grid-column: 4; justify-self: start; align-self: center; font-size: 13px; color: var(--os-body); }
:root:has(.site-header) footer .downloads { gap: 8px; }
:root:has(.site-header) footer .dl-chip { background: var(--os-accent-soft); color: var(--os-accent); }
:root:has(.site-header) footer .social { color: var(--os-body); }
:root:has(.site-header) footer .social:hover { color: var(--os-ink); }
:root:has(.site-header) footer > .wrap + .wrap { margin-top: 20px; }
:root:has(.site-header) footer .lang-row { margin: 0; gap: 8px 20px; font-size: 13px; }
:root:has(.site-header) footer .lang-row a { color: var(--os-muted); }
:root:has(.site-header) footer .lang-row a:hover,
:root:has(.site-header) footer .lang-row a[aria-current="page"] { color: var(--os-ink); }
@media (max-width: 900px) {
  :root:has(.site-header) footer > .wrap:first-child { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root:has(.site-header) footer > .wrap:first-child > span:first-child { grid-column: 1 / -1; }
  :root:has(.site-header) footer > .wrap:first-child > .socials { grid-column: 1 / span 1; justify-self: start; margin-left: -8px; }
  :root:has(.site-header) footer > .wrap:first-child > .source { grid-column: 2 / -1; justify-self: end; }
}
@media (max-width: 640px) {
  :root:has(.site-header) footer:has(> .wrap) { padding: 56px 0 48px; }
  :root:has(.site-header) footer > .wrap:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
  :root:has(.site-header) footer > .wrap:first-child > .spacer { flex-basis: auto; height: 1px; margin: 20px 0 4px; }
  :root:has(.site-header) footer > .wrap:first-child > .socials { grid-column: 1 / span 1; }
  :root:has(.site-header) footer > .wrap:first-child > .source { grid-column: 1 / -1; justify-self: start; order: 6; }
}

:is(.hero h1, main:not(.screen) h2, .site-card h3, .hero .subhead, .section-head p.open-line):lang(zh) {
  word-break: keep-all; overflow-wrap: anywhere; letter-spacing: -0.01em;
}
:is(.hero h1, main:not(.screen) h2, .site-card h3, .hero .subhead, .section-head p.open-line, main:not(.screen) summary):lang(ja) {
  word-break: auto-phrase; letter-spacing: -0.01em;
}
:is(.hero h1, main:not(.screen) h2, .site-card h3, .hero .subhead, .section-head p.open-line):lang(ko) {
  word-break: keep-all; letter-spacing: -0.02em;
}
.hero:has(.site-eyebrow) h1:is(:lang(zh), :lang(ja), :lang(ko)) { font-size: clamp(34px, 8.6vw, 64px); line-height: 1.15; }
body:has(> .site-chrome .hero .site-eyebrow) .hero > .wrap > h1:is(:lang(zh), :lang(ja), :lang(ko)) { max-width: calc(12em + 96px); }
.hero h1:is(:lang(zh), :lang(ja), :lang(ko)), main:not(.screen) .section-head h2:is(:lang(zh), :lang(ja), :lang(ko)) { line-height: 1.25; max-width: 20em; }

@media (prefers-reduced-motion: reduce) {
  .site-card, .post-list a.card-link { transition: none; }
}

@media (max-width: 760px) {
  .site-header .site-nav {
    padding-right: 24px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }
}